* Safari/iOS: support Safari/iOS 12.x via transpiling of JavaScript

api/js/etemplate/Et2Date/Et2Date.ts

@@ -12,12 +12,12 @@
 import {css, html} from "@lion/core";
 import 'lit-flatpickr';
 import {dateStyles} from "./DateStyles";
-import {Instance} from 'flatpickr/dist/types/instance';
+import type {Instance} from 'flatpickr/dist/types/instance';
-import "flatpickr/dist/plugins/scrollPlugin.js";
+import {default as scrollPlugin} from "flatpickr/dist/plugins/scrollPlugin.js";
-import "shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr";
+import {default as ShortcutButtonsPlugin} from "shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr";
 import flatpickr from "flatpickr";
 import {egw} from "../../jsapi/egw_global";
-import {HTMLElementWithValue} from "@lion/form-core/types/FormControlMixinTypes";
+import type {HTMLElementWithValue} from "@lion/form-core/types/FormControlMixinTypes";
 import {Et2Textbox} from "../Et2Textbox/Et2Textbox";
 import {Et2ButtonIcon} from "../Et2Button/Et2ButtonIcon";
 import {FormControlMixin} from "@lion/form-core";
@@ -687,6 +687,11 @@ export class Et2Date extends Et2InputWidget(FormControlMixin(LitFlatpickr))
 		return formatDate;
 	}
 
+	set format(_format)
+	{
+		// ignored, trying to fix TypeError opening a new contact
+	}
+
 	/**
 	 * Inline calendars need a slot
 	 *

api/js/etemplate/Et2Date/Et2DateRange.ts

@@ -4,7 +4,7 @@ import {classMap, css, html, ifDefined, LitElement, TemplateResult} from "@lion/
 import shoelace from "../Styles/shoelace";
 import {dateStyles} from "./DateStyles";
 import flatpickr from "flatpickr";
-import "flatpickr/dist/plugins/rangePlugin";
+import {default as rangePlugin} from "flatpickr/dist/plugins/rangePlugin";
 import {Et2Date, formatDate, parseDate} from "./Et2Date";
 import {egw} from "../../jsapi/egw_global";
 
@@ -71,7 +71,6 @@ export class Et2DateRange extends Et2InputWidget(FormControlMixin(LitElement))
 			...(<Et2Date>this.fromElement).getOptions(),
 			...{
 				plugins: [
-					// @ts-ignore ts can't find rangePlugin in IDE
 					rangePlugin({
 						input: this.toElement
 					})

api/js/etemplate/Et2Date/Et2DateTime.ts

@@ -11,7 +11,8 @@
 
 import {css} from "@lion/core";
 import {Et2Date} from "./Et2Date";
-import {Instance} from "flatpickr/dist/types/instance";
+import type {Instance} from "flatpickr/dist/types/instance";
+import {default as ShortcutButtonsPlugin} from "shortcut-buttons-flatpickr/dist/shortcut-buttons-flatpickr";
 
 
 export class Et2DateTime extends Et2Date
@@ -115,7 +116,6 @@ export class Et2DateTime extends Et2Date
 	 */
 	protected _buttonPlugin()
 	{
-		// @ts-ignore TypeScript can't find ShortcutButtonsPlugin, but rollup does
 		return ShortcutButtonsPlugin({
 			button: [
 				{label: this.egw().lang("ok")},
@@ -144,4 +144,4 @@ export class Et2DateTime extends Et2Date
 }
 
 // @ts-ignore TypeScript is not recognizing that Et2DateTime is a LitElement
-customElements.define("et2-date-time", Et2DateTime);
+customElements.define("et2-date-time", Et2DateTime);

api/js/etemplate/Et2InputWidget/Et2InputWidget.ts

@@ -222,7 +222,7 @@ const Et2InputWidgetMixin = <T extends Constructor<LitElement>>(superclass : T)
 			if(changedProperties.has('required'))
 			{
 				// Remove all existing Required validators (avoids duplicates)
-				this.validators = (this.validators || []).filter((validator) => validator instanceof Required)
+				this.validators = (this.validators || []).filter((validator) => !(validator instanceof Required))
 				if(this.required)
 				{
 					this.validators.push(new Required());

api/js/etemplate/Et2Link/Et2LinkTo.ts

@@ -20,7 +20,7 @@ import {Et2LinkEntry} from "./Et2LinkEntry";
 import {egw} from "../../jsapi/egw_global";
 import {et2_vfsSelect} from "../et2_widget_vfs";
 import {LinkInfo} from "./Et2Link";
-import {ValidationType} from "@lion/form-core/types/validate/ValidateMixinTypes";
+import type {ValidationType} from "@lion/form-core/types/validate/ValidateMixinTypes";
 import {ManualMessage} from "../Validators/ManualMessage";
 import {Et2Tabs} from "../Layout/Et2Tabs/Et2Tabs";
 

api/js/etemplate/Et2Select/Et2Select.ts

@@ -9,7 +9,7 @@
 
 
 import {css, html, PropertyValues, TemplateResult} from "@lion/core";
-import {Et2StaticSelectMixin, StaticOptions} from "./StaticOptions";
+import {Et2StaticSelectMixin, StaticOptions as so} from "./StaticOptions";
 import {Et2widgetWithSelectMixin} from "./Et2WidgetWithSelectMixin";
 import {SelectOption} from "./FindSelectOptions";
 import {SlMenuItem, SlSelect} from "@shoelace-style/shoelace";
@@ -725,12 +725,6 @@ if(typeof customElements.get("lion-validation-feedback") === "undefined")
 {
 	customElements.define("lion-validation-feedback", LionValidationFeedback);
 }
-/**
- * Use a single StaticOptions, since it should have no state
- * @type {StaticOptions}
- */
-const so = new StaticOptions();
-
 
 export class Et2SelectApp extends Et2StaticSelectMixin(Et2Select)
 {

api/js/etemplate/Et2Select/Et2SelectCategory.ts

@@ -10,7 +10,7 @@
 
 import {css, PropertyValues} from "@lion/core";
 import {Et2Select} from "./Et2Select";
-import {Et2StaticSelectMixin, StaticOptions} from "./StaticOptions";
+import {Et2StaticSelectMixin, StaticOptions as so} from "./StaticOptions";
 import {cleanSelectOptions} from "./FindSelectOptions";
 
 /**
@@ -172,10 +172,4 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2Select)
 	}
 }
 
-/**
- * Use a single StaticOptions, since it should have no state
- * @type {StaticOptions}
- */
-const so = new StaticOptions();
-
 customElements.define("et2-select-cat", Et2SelectCategory);

api/js/etemplate/Et2Select/Et2SelectCountry.ts

@@ -9,7 +9,7 @@
 
 
 import {Et2Select} from "./Et2Select";
-import {Et2StaticSelectMixin, StaticOptions} from "./StaticOptions";
+import {Et2StaticSelectMixin, StaticOptions as so} from "./StaticOptions";
 import {egw} from "../../jsapi/egw_global";
 import {SelectOption} from "./FindSelectOptions";
 
@@ -56,10 +56,4 @@ export class Et2SelectCountry extends Et2StaticSelectMixin(Et2Select)
 	}
 }
 
-/**
- * Use a single StaticOptions, since it should have no state
- * @type {StaticOptions}
- */
-const so = new StaticOptions();
-
 customElements.define("et2-select-country", Et2SelectCountry);

api/js/etemplate/Et2Select/Et2SelectReadonly.ts

@@ -11,12 +11,10 @@
 import {css, html, LitElement, repeat, TemplateResult} from "@lion/core";
 import {et2_IDetachedDOM} from "../et2_core_interfaces";
 import {Et2Widget} from "../Et2Widget/Et2Widget";
-import {StaticOptions} from "./StaticOptions";
+import {StaticOptions as so} from "./StaticOptions";
 import {find_select_options, SelectOption} from "./FindSelectOptions";
 import {SelectAccountMixin} from "./SelectAccountMixin";
 
-const so = new StaticOptions();
-
 /**
  * This is a stripped-down read-only widget used in nextmatch
  * (and other read-only usages)

api/js/etemplate/Et2Select/StaticOptions.ts

@@ -103,7 +103,7 @@ export const Et2StaticSelectMixin = <T extends Constructor<Et2WidgetWithSelect>>
  * @param {boolean} return_promise true: always return a promise
  * @returns {Object[]|Promise<Object[]>} Array of options, or empty and they'll get filled in later, or Promise
  */
-export class StaticOptions
+export const StaticOptions = new class StaticOptionsType
 {
 	cached_server_side(widget : Et2SelectWidgets, type : string, options_string, return_promise? : boolean) : SelectOption[]|Promise<SelectOption[]>
 	{

api/js/etemplate/Et2Textbox/Et2Textbox.ts

@@ -76,7 +76,7 @@ export class Et2Textbox extends Et2InputWidget(SlInput)
 		if(changedProperties.has('validator'))
 		{
 			// Remove all existing Pattern validators (avoids duplicates)
-			this.validators = (this.validators || []).filter((validator) => validator instanceof Regex)
+			this.validators = (this.validators || []).filter((validator) => !(validator instanceof Regex))
 			this.validators.push(new Regex(this.validator));
 		}
 	}

api/js/etemplate/et2_extension_nextmatch.ts

@@ -4382,4 +4382,4 @@ export class et2_nextmatch_sortheader extends et2_nextmatch_header implements et
 
 }
 
-et2_register_widget(et2_nextmatch_sortheader, ['nextmatch-sortheader']);
+et2_register_widget(et2_nextmatch_sortheader, ['nextmatch-sortheader']);

api/js/etemplate/et2_extension_nextmatch_controller.ts

@@ -87,8 +87,8 @@ export class et2_nextmatch_controller extends et2_dataview_controller implements
 		super(_parentController, _grid);
 
 		this.setDataProvider(this);
-		this.setRowCallback(this._rowCallback);
+		this.setRowCallback(this._nmRowCallback);
-		this.setLinkCallback(this._linkCallback);
+		this.setLinkCallback(this._nmLinkCallback);
 		this.setContext(this);
 
 		// Copy the egw reference
@@ -560,7 +560,7 @@ export class et2_nextmatch_controller extends et2_dataview_controller implements
 	 * this special case used to store the rowWidget reference, so that it can
 	 * be properly freed.
 	 */
-	_rowCallback( _data, _tr, _idx, _entry)
+	_nmRowCallback(_data, _tr, _idx, _entry)
 	{
 		// Let the row provider fill in the data row -- store the returned
 		// rowWidget inside the _entry
@@ -585,7 +585,7 @@ export class et2_nextmatch_controller extends et2_dataview_controller implements
 	 *
 	 * @return Array List of action names that valid for the row
 	 */
-	_linkCallback( _data, _idx, _uid)
+	_nmLinkCallback( _data, _idx, _uid)
 	{
 		if(_uid.trim() != "")
 		{

api/js/etemplate/et2_widget_file.ts

@@ -13,7 +13,7 @@
 	et2_core_inputWidget;
 	api.Resumable.resumable;
 */
-import "../Resumable/resumable.js";
+import {Resumable} from "../Resumable/resumable.js";
 import {et2_inputWidget} from "./et2_core_inputWidget";
 import {et2_register_widget, WidgetConfig} from "./et2_core_widget";
 import {ClassWithAttributes} from "./et2_core_inheritance";

api/js/framework/fw_desktop.js

@@ -24,7 +24,7 @@ import './fw_browser.js';
 import './fw_ui.js';
 import './fw_classes.js';
 import '../jsapi/egw_inheritance.js';
-import "sortablejs/Sortable.min.js";
+import Sortable from "sortablejs/modular/sortable.complete.esm";
 /**
  *
  * @param {DOMWindow} window
@@ -479,7 +479,8 @@ import "sortablejs/Sortable.min.js";
 			if (!$menu.is(":visible"))
 			{
 				$body.on('click', function(e){
-					if (e.target.id != 'topmenu_info_user_avatar' && jQuery(e.target).parents('#topmenu_info_user_avatar').length < 1)
+					if (e.target.id != 'topmenu_info_user_avatar' && jQuery(e.target).parents('#topmenu_info_user_avatar').length < 1
+					&& e.target.nodeName && e.target.nodeName != 'ET2-SELECT')
 					{
 						jQuery(this).off(e);
 						$menu.toggle();

api/js/jsapi/egw_global.d.ts

@@ -1238,7 +1238,7 @@ declare interface IegwWndLocal extends IegwGlobal
 	 * @param _isHtml true: add a html (no automatic quoting!), false (default): add as text
 	 * @param _options tooltip options
 	 */
-	tooltipBind(_elem : HTMLElement, _str : string, _isHtml? : boolean, _options);
+	tooltipBind(_elem : HTMLElement, _str : string, _isHtml? : boolean, _options? : any);
 	/**
 	 * Unbinds the tooltip from the given DOM-Node.
 	 *
@@ -1362,6 +1362,8 @@ declare function egwIsMobile() : string|null;
 
 declare var mailvelope : any;
 
+declare var framework : any;
+
 declare function egw_refresh(_msg : string, app : string, id? : string|number, _type?, targetapp?, replace?, _with?, msgtype?);
 declare function egw_open();
 

api/js/jsapi/egw_global.js

@@ -1,5 +1,6 @@
 //export var app = window.app;
 export var egw = window.egw;
 export var framework = window.framework;
+export var app = window.app;
 export var egw_getFramework = window.egw_getFramework;
 export var jQuery = window.jQuery;

api/src/Etemplate/Widget.php

@@ -207,7 +207,7 @@ class Widget
 			{
 				$type = $this->type;
 			}
-			$legacy_options = $legacy_options[$type];
+			$legacy_options = $legacy_options[$type] ?? null;
 		}
 
 		// read and set all attributes
@@ -222,14 +222,14 @@ class Widget
 					$cloned = true;	// only clone it once, otherwise we loose attributes!
 				}
 				// $reader->value is an object and therefore assigned by reference
-				// this is important to not loose content when validating dynamic generated tabs as in settings!
+				// this is important to not lose content when validating dynamic generated tabs as in settings!
 				$template->attrs[$reader->name] = $value = $reader->value;
 
 				// expand attributes values, otherwise eg. validation can not use attrs referencing to content
 				if (!empty($value) && ($value[0] === '@' || strpos($value, '$cont') !== false))
 				{
 					$value = self::expand_name($value, null, null, null, null,
-						isset(self::$cont) ? self::$cont : self::$request->content);
+						self::$cont ?? self::$request->content);
 				}
 
 				// split legacy options

api/templates/default/images/offer.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+ <path d="M6 0C2.71 0 0 2.71 0 6v20c0 3.29 2.71 6 6 6h20c3.29 0 6-2.71 6-6V6c0-3.29-2.71-6-6-6zm1 3h18a4 4 0 0 1 4 4v18a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4zm9 2c-3.777 0-7 3.691-7 7h5c0-1.692 1.444-2 2-2 .562 0 2 .237 2 2 0 2.63-3.474 3-5 3v5h5v-2c2.373-.91 5-1.92 5-6 0-3.976-2.894-7-7-7zm-.5 16.5a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z" fill="#62686a"/>
+</svg>

calendar/js/et2_widget_event.ts

@@ -27,7 +27,7 @@ import {et2_container} from "../../api/js/etemplate/et2_core_baseWidget";
 import {Et2Dialog} from "../../api/js/etemplate/Et2Dialog/Et2Dialog";
 import {formatDate, formatTime} from "../../api/js/etemplate/Et2Date/Et2Date";
 import {ColorTranslator} from "colortranslator";
-import {StaticOptions} from "../../api/js/etemplate/Et2Select/StaticOptions";
+import {StaticOptions as so} from "../../api/js/etemplate/Et2Select/StaticOptions";
 import {Et2Select} from "../../api/js/etemplate/Et2Select/Et2Select";
 import {SelectOption} from "../../api/js/etemplate/Et2Select/FindSelectOptions";
 import {CalendarApp} from "./app";
@@ -298,7 +298,6 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
 			this._need_actions_linked = !this.options.readonly;
 
 			// Make sure category stuff is there by faking a call to cache
-			let so = new StaticOptions();
 			so.cached_server_side(<Et2Select><unknown>{
 				nodeName: "ET2-SELECT-CAT_RO",
 				egw: () => this.egw()
@@ -525,7 +524,6 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
 			let cat_label : (string | string[]) = '';
 			if(this.options.value.category)
 			{
-				let so = new StaticOptions();
 				let options = <SelectOption[]>so.cached_server_side(<Et2Select><unknown>{
 					nodeName: "ET2-SELECT-CAT_RO",
 					egw: () => this.egw()

home/inc/class.home_favorite_portlet.inc.php

@@ -249,4 +249,4 @@ class home_favorite_portlet extends home_portlet
 		);
 		return $properties;
 	}
-}
+}

package.json

@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.14.5",
     "@interactjs/interactjs": "^1.10.11",
     "@open-wc/testing": "^3.0.3",
@@ -27,7 +28,7 @@
     "grunt": "^1.5.3",
     "grunt-contrib-cssmin": "^2.2.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.52.2",
+    "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
     "sinon": "^11.1.2",
     "terser": "^4.8.1",
@@ -62,9 +63,11 @@
     "@lion/listbox": "^0.12.0",
     "@lion/select": "^0.15.0",
     "@lion/textarea": "^0.14.0",
+    "@rollup/plugin-commonjs": "^24.0.1",
     "@shoelace-style/shoelace": "2.0.0-beta.81",
     "blueimp-gallery": "^3.4.0",
     "colortranslator": "^1.9.2",
+    "core-js": "^3.29.1",
     "lit-flatpickr": "^0.3.0",
     "shortcut-buttons-flatpickr": "^0.4.0",
     "sortablejs": "^1.14.0"
@@ -72,4 +75,4 @@
   "engines": {
     "node": ">=14.0.0"
   }
-}
+}

rollup.config.js

@@ -15,12 +15,13 @@ import { readFileSync, readdirSync, statSync, unlinkSync  } from "fs";
 //import rimraf from 'rimraf';
 import { minify } from 'terser';
 import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 
 // Best practice: use this
 //rimraf.sync('./dist/');
 //rimraf.sync('./chunks/');
 
-// remove only chunks older then 2 days, to allow UI to still load them and not require a reload / F5
+// remove only chunks older than 2 days, to allow UI to still load them and not require a reload / F5
 const rm_older = Date.now() - 48*3600000;
 readdirSync('./chunks').forEach(name => {
     const stat = statSync('./chunks/'+name);
@@ -55,6 +56,11 @@ const config = {
         // app.ts/js are added automatic by addAppsConfig() below
     },
     external: function(id,parentId,isResolved) {
+        // core-js used require and needs to be run through RollupJS and NOT treated as external
+        if (id.includes("/node_modules/core-js/"))
+        {
+            return false;
+        }
         if(!isResolved)
         {
             return;
@@ -113,6 +119,8 @@ const config = {
     resolve({
         browser: true
     }),
+    // core-js uses require, which needs to be transformed to es-modules
+    commonjs(),
     {
         transform (code, id) {
             if (id.endsWith('.ts'))
@@ -127,7 +135,22 @@ const config = {
                             // plugins: stage3Syntax,
                             errorRecovery: true
                         },
-                        presets: ['@babel/preset-typescript']
+                        presets: [
+                            ['@babel/preset-typescript', {
+                                //onlyRemoveTypeImports: true   // seems not necessary and generates a lot of warnings about not exported symbols
+                            }],
+                            ['@babel/preset-env', {
+                                corejs: {
+                                    version: "3"
+                                },
+                                useBuiltIns: "usage",
+                                modules: false,
+                                targets : {
+                                    esmodules: true,
+                                    safari: "14"
+                                }
+                            }],
+                        ]
                     }, function (err, result) {
                         if (err)
                             return reject(err);
@@ -193,4 +216,4 @@ export default function addAppsConfig()
         }
     }
     return conf;
-}
+}