@ui5/webcomponents-base 0.0.0-0a35d6b3d → 0.0.0-0dd36ca4b

package/dist/decorators/customElement.d.ts

@@ -14,10 +14,10 @@ declare const customElement: (tagNameOrComponentSettings?: string | {
     styles?: Styles;
     template?: Template;
     dependencies?: Array<typeof UI5Element>;
-    staticAreaStyles?: Styles;
-    staticAreaTemplate?: Template;
     languageAware?: boolean;
     themeAware?: boolean;
     fastNavigation?: boolean;
+    formAssociated?: boolean;
+    shadowRootOptions?: Partial<ShadowRootInit>;
 }) => ClassDecorator;
 export default customElement;

package/dist/decorators/customElement.js

@@ -13,7 +13,7 @@ const customElement = (tagNameOrComponentSettings = {}) => {
             target.metadata.tag = tagNameOrComponentSettings;
             return;
         }
-        const { tag, languageAware, themeAware, fastNavigation, } = tagNameOrComponentSettings;
+        const { tag, languageAware, themeAware, fastNavigation, formAssociated, shadowRootOptions, } = tagNameOrComponentSettings;
         target.metadata.tag = tag;
         if (languageAware) {
             target.metadata.languageAware = languageAware;
@@ -24,9 +24,14 @@ const customElement = (tagNameOrComponentSettings = {}) => {
         if (fastNavigation) {
             target.metadata.fastNavigation = fastNavigation;
         }
-        ["render", "renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity) => {
-            const _customElementEntity = customElementEntity === "render" ? "renderer" : customElementEntity;
-            const customElementEntityValue = tagNameOrComponentSettings[_customElementEntity];
+        if (formAssociated) {
+            target.metadata.formAssociated = formAssociated;
+        }
+        if (shadowRootOptions) {
+            target.metadata.shadowRootOptions = shadowRootOptions;
+        }
+        ["renderer", "template", "styles", "dependencies"].forEach((customElementEntity) => {
+            const customElementEntityValue = tagNameOrComponentSettings[customElementEntity];
             customElementEntityValue && Object.defineProperty(target, customElementEntity, {
                 get: () => customElementEntityValue,
             });

package/dist/decorators/customElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"customElement.js","sourceRoot":"","sources":["../../src/decorators/customElement.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CAAC,6BAWnB,EAAE,EAAkB,EAAE;IACzB,OAAO,CAAC,MAAW,EAAE,EAAE;QACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9D,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;SACrB;QAED,IAAI,OAAO,0BAA0B,KAAK,QAAQ,EAAE;YACnD,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,0BAA0B,CAAC;YACjD,OAAO;SACP;QAED,MAAM,EACL,GAAG,EACH,aAAa,EACb,UAAU,EACV,cAAc,GACb,GAAG,0BAA0B,CAAC;QAEhC,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;QAC1B,IAAI,aAAa,EAAE;YAClB,MAAM,CAAC,QAAQ,CAAC,aAAa,GAAG,aAAa,CAAC;SAC9C;QACD,IAAI,UAAU,EAAE;YACf,MAAM,CAAC,QAAQ,CAAC,UAAU,GAAG,UAAU,CAAC;SACxC;QACD,IAAI,cAAc,EAAE;YACnB,MAAM,CAAC,QAAQ,CAAC,cAAc,GAAG,cAAc,CAAC;SAChD;QAED,CAAC,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,oBAAoB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,mBAA2B,EAAE,EAAE;YAC9I,MAAM,oBAAoB,GAAG,mBAAmB,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC;YACjG,MAAM,wBAAwB,GAAG,0BAA0B,CAAC,oBAAwC,CAAC,CAAC;YAEtG,wBAAwB,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,mBAAmB,EAAE;gBAC9E,GAAG,EAAE,GAAG,EAAE,CAAC,wBAAwB;aACnC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type UI5Element from \"../UI5Element.js\";\nimport type { Renderer } from \"../UI5Element.js\";\nimport type { TemplateFunction as Template } from \"../renderer/executeTemplate.js\";\nimport type { ComponentStylesData as Styles } from \"../types.js\";\n\n/**\n * Returns a custom element class decorator.\n *\n * @param { string | object } tagNameOrComponentSettings\n * @returns { ClassDecorator }\n */\nconst customElement = (tagNameOrComponentSettings: string | {\n\ttag?: string,\n\trenderer?: Renderer,\n\tstyles?: Styles,\n\ttemplate?: Template,\n\tdependencies?: Array<typeof UI5Element>,\n\tstaticAreaStyles?: Styles,\n\tstaticAreaTemplate?: Template,\n\tlanguageAware?: boolean,\n\tthemeAware?: boolean,\n\tfastNavigation?: boolean,\n} = {}): ClassDecorator => {\n\treturn (target: any) => {\n\t\tif (!Object.prototype.hasOwnProperty.call(target, \"metadata\")) {\n\t\t\ttarget.metadata = {};\n\t\t}\n\n\t\tif (typeof tagNameOrComponentSettings === \"string\") {\n\t\t\ttarget.metadata.tag = tagNameOrComponentSettings;\n\t\t\treturn;\n\t\t}\n\n\t\tconst {\n\t\t\ttag,\n\t\t\tlanguageAware,\n\t\t\tthemeAware,\n\t\t\tfastNavigation,\n\t\t } = tagNameOrComponentSettings;\n\n\t\ttarget.metadata.tag = tag;\n\t\tif (languageAware) {\n\t\t\ttarget.metadata.languageAware = languageAware;\n\t\t}\n\t\tif (themeAware) {\n\t\t\ttarget.metadata.themeAware = themeAware;\n\t\t}\n\t\tif (fastNavigation) {\n\t\t\ttarget.metadata.fastNavigation = fastNavigation;\n\t\t}\n\n\t\t[\"render\", \"renderer\", \"template\", \"staticAreaTemplate\", \"styles\", \"staticAreaStyles\", \"dependencies\"].forEach((customElementEntity: string) => {\n\t\t\tconst _customElementEntity = customElementEntity === \"render\" ? \"renderer\" : customElementEntity;\n\t\t\tconst customElementEntityValue = tagNameOrComponentSettings[_customElementEntity as keyof typeof tag];\n\n\t\t\tcustomElementEntityValue && Object.defineProperty(target, customElementEntity, {\n\t\t\t\tget: () => customElementEntityValue,\n\t\t\t});\n\t\t});\n\t};\n};\n\nexport default customElement;\n"]}
+{"version":3,"file":"customElement.js","sourceRoot":"","sources":["../../src/decorators/customElement.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,MAAM,aAAa,GAAG,CAAC,6BAWnB,EAAE,EAAkB,EAAE;IACzB,OAAO,CAAC,MAAW,EAAE,EAAE;QACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9D,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;SACrB;QAED,IAAI,OAAO,0BAA0B,KAAK,QAAQ,EAAE;YACnD,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,0BAA0B,CAAC;YACjD,OAAO;SACP;QAED,MAAM,EACL,GAAG,EACH,aAAa,EACb,UAAU,EACV,cAAc,EACd,cAAc,EACd,iBAAiB,GAChB,GAAG,0BAA0B,CAAC;QAEhC,MAAM,CAAC,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;QAC1B,IAAI,aAAa,EAAE;YAClB,MAAM,CAAC,QAAQ,CAAC,aAAa,GAAG,aAAa,CAAC;SAC9C;QACD,IAAI,UAAU,EAAE;YACf,MAAM,CAAC,QAAQ,CAAC,UAAU,GAAG,UAAU,CAAC;SACxC;QACD,IAAI,cAAc,EAAE;YACnB,MAAM,CAAC,QAAQ,CAAC,cAAc,GAAG,cAAc,CAAC;SAChD;QACD,IAAI,cAAc,EAAE;YACnB,MAAM,CAAC,QAAQ,CAAC,cAAc,GAAG,cAAc,CAAC;SAChD;QAED,IAAI,iBAAiB,EAAE;YACtB,MAAM,CAAC,QAAQ,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;SACtD;QAED,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,mBAA2B,EAAE,EAAE;YAC1F,MAAM,wBAAwB,GAAG,0BAA0B,CAAC,mBAAuC,CAAC,CAAC;YAErG,wBAAwB,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,mBAAmB,EAAE;gBAC9E,GAAG,EAAE,GAAG,EAAE,CAAC,wBAAwB;aACnC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import type UI5Element from \"../UI5Element.js\";\nimport type { Renderer } from \"../UI5Element.js\";\nimport type { TemplateFunction as Template } from \"../renderer/executeTemplate.js\";\nimport type { ComponentStylesData as Styles } from \"../types.js\";\n\n/**\n * Returns a custom element class decorator.\n *\n * @param { string | object } tagNameOrComponentSettings\n * @returns { ClassDecorator }\n */\nconst customElement = (tagNameOrComponentSettings: string | {\n\ttag?: string,\n\trenderer?: Renderer,\n\tstyles?: Styles,\n\ttemplate?: Template,\n\tdependencies?: Array<typeof UI5Element>,\n\tlanguageAware?: boolean,\n\tthemeAware?: boolean,\n\tfastNavigation?: boolean,\n\tformAssociated?: boolean,\n\tshadowRootOptions?: Partial<ShadowRootInit>,\n} = {}): ClassDecorator => {\n\treturn (target: any) => {\n\t\tif (!Object.prototype.hasOwnProperty.call(target, \"metadata\")) {\n\t\t\ttarget.metadata = {};\n\t\t}\n\n\t\tif (typeof tagNameOrComponentSettings === \"string\") {\n\t\t\ttarget.metadata.tag = tagNameOrComponentSettings;\n\t\t\treturn;\n\t\t}\n\n\t\tconst {\n\t\t\ttag,\n\t\t\tlanguageAware,\n\t\t\tthemeAware,\n\t\t\tfastNavigation,\n\t\t\tformAssociated,\n\t\t\tshadowRootOptions,\n\t\t } = tagNameOrComponentSettings;\n\n\t\ttarget.metadata.tag = tag;\n\t\tif (languageAware) {\n\t\t\ttarget.metadata.languageAware = languageAware;\n\t\t}\n\t\tif (themeAware) {\n\t\t\ttarget.metadata.themeAware = themeAware;\n\t\t}\n\t\tif (fastNavigation) {\n\t\t\ttarget.metadata.fastNavigation = fastNavigation;\n\t\t}\n\t\tif (formAssociated) {\n\t\t\ttarget.metadata.formAssociated = formAssociated;\n\t\t}\n\n\t\tif (shadowRootOptions) {\n\t\t\ttarget.metadata.shadowRootOptions = shadowRootOptions;\n\t\t}\n\n\t\t[\"renderer\", \"template\", \"styles\", \"dependencies\"].forEach((customElementEntity: string) => {\n\t\t\tconst customElementEntityValue = tagNameOrComponentSettings[customElementEntity as keyof typeof tag];\n\n\t\t\tcustomElementEntityValue && Object.defineProperty(target, customElementEntity, {\n\t\t\t\tget: () => customElementEntityValue,\n\t\t\t});\n\t\t});\n\t};\n};\n\nexport default customElement;\n"]}

package/dist/decorators/event.d.ts

@@ -1,4 +1,3 @@
-import { EventData } from "../UI5ElementMetadata.js";
 /**
  * Returns an event class decorator.
  *
@@ -6,5 +5,9 @@ import { EventData } from "../UI5ElementMetadata.js";
  * @param { EventData } data the event data
  * @returns { ClassDecorator }
  */
-declare const event: (name: string, data?: EventData) => ClassDecorator;
+declare const event: <EventDetail>(name: string, data?: {
+    detail?: Record<keyof EventDetail, {
+        type: any;
+    }> | undefined;
+}) => ClassDecorator;
 export default event;

package/dist/decorators/event.js.map

@@ -1 +1 @@
-{"version":3,"file":"event.js","sourceRoot":"","sources":["../../src/decorators/event.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,OAAkB,EAAE,EAAkB,EAAE;IACpE,OAAO,CAAC,MAAW,EAAE,EAAE;QACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9D,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACrB,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;YAC1B,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;SAC5B;IACF,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["import { EventData } from \"../UI5ElementMetadata.js\";\n\n/**\n * Returns an event class decorator.\n *\n * @param { string } name the event name\n * @param { EventData } data the event data\n * @returns { ClassDecorator }\n */\nconst event = (name: string, data: EventData = {}): ClassDecorator => {\n\treturn (target: any) => {\n\t\tif (!Object.prototype.hasOwnProperty.call(target, \"metadata\")) {\n\t\t\ttarget.metadata = {};\n\t\t}\n\n\t\tconst metadata = target.metadata;\n\t\tif (!metadata.events) {\n\t\t\tmetadata.events = {};\n\t\t}\n\n\t\tconst eventsMetadata = metadata.events;\n\t\tif (!eventsMetadata[name]) {\n\t\t\teventsMetadata[name] = data;\n\t\t}\n\t};\n};\n\nexport default event;\n"]}
+{"version":3,"file":"event.js","sourceRoot":"","sources":["../../src/decorators/event.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,KAAK,GAAG,CAAc,IAAY,EAAE,OAA8D,EAAE,EAAkB,EAAE;IAC7H,OAAO,CAAC,MAAW,EAAE,EAAE;QACtB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9D,MAAM,CAAC,QAAQ,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACrB,QAAQ,CAAC,MAAM,GAAG,EAAE,CAAC;SACrB;QAED,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC;QACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE;YAC1B,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;SAC5B;IACF,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC","sourcesContent":["/**\n * Returns an event class decorator.\n *\n * @param { string } name the event name\n * @param { EventData } data the event data\n * @returns { ClassDecorator }\n */\nconst event = <EventDetail>(name: string, data: { detail?: Record<keyof EventDetail, { type: any }> } = {}): ClassDecorator => {\n\treturn (target: any) => {\n\t\tif (!Object.prototype.hasOwnProperty.call(target, \"metadata\")) {\n\t\t\ttarget.metadata = {};\n\t\t}\n\n\t\tconst metadata = target.metadata;\n\t\tif (!metadata.events) {\n\t\t\tmetadata.events = {};\n\t\t}\n\n\t\tconst eventsMetadata = metadata.events;\n\t\tif (!eventsMetadata[name]) {\n\t\t\teventsMetadata[name] = data;\n\t\t}\n\t};\n};\n\nexport default event;\n"]}

package/dist/decorators.d.ts

@@ -0,0 +1,5 @@
+import customElement from "./decorators/customElement.js";
+import event from "./decorators/event.js";
+import property from "./decorators/property.js";
+import slot from "./decorators/slot.js";
+export { customElement, event, property, slot, };

package/dist/decorators.js

@@ -0,0 +1,6 @@
+import customElement from "./decorators/customElement.js";
+import event from "./decorators/event.js";
+import property from "./decorators/property.js";
+import slot from "./decorators/slot.js";
+export { customElement, event, property, slot, };
+//# sourceMappingURL=decorators.js.map

package/dist/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../src/decorators.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAC1D,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAExC,OAAO,EACN,aAAa,EACb,KAAK,EACL,QAAQ,EACR,IAAI,GACJ,CAAC","sourcesContent":["import customElement from \"./decorators/customElement.js\";\nimport event from \"./decorators/event.js\";\nimport property from \"./decorators/property.js\";\nimport slot from \"./decorators/slot.js\";\n\nexport {\n\tcustomElement,\n\tevent,\n\tproperty,\n\tslot,\n};\n"]}

package/dist/delegate/ItemNavigation.d.ts

@@ -3,7 +3,7 @@ import ItemNavigationBehavior from "../types/ItemNavigationBehavior.js";
 import type UI5Element from "../UI5Element.js";
 interface ITabbable {
     id: string;
-    _tabIndex: string;
+    forcedTabIndex: string;
 }
 type ItemNavigationOptions = {
     currentIndex?: number;
@@ -27,18 +27,18 @@ type ItemNavigationOptions = {
  * 1) Use the "getItemsCallback" constructor property to pass a callback to ItemNavigation, which, whenever called, will return the list of items to navigate among.
  *
  * Each item passed to ItemNavigation via "getItemsCallback" must be:
- *  - A) either a UI5Element with a "_tabIndex" property
- *  - B) or an Object with "id" and "_tabIndex" properties which represents a part of the root component's shadow DOM.
+ *  - A) either a UI5Element with a "forcedTabIndex" property
+ *  - B) or an Object with "id" and "forcedTabIndex" properties which represents a part of the root component's shadow DOM.
  *    The "id" must be a valid ID within the shadow root of the component ItemNavigation operates on.
  *    This object must not be a DOM object because, as said, ItemNavigation will not set "tabindex" on it. It must be a representation of a DOM object only
  *    and the developer has the responsibility to update the "tabindex" in the component's DOM.
  *  - C) a combination of the above
  *
- * Whenever the user navigates with the keyboard, ItemNavigation will modify the "_tabIndex" properties of the items.
- * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "_tabIndex" ItemNavigation set to them to the "tabindex" property).
- * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "_tabIndex" property.
- * If the items are Objects with "id" and "_tabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
- * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "_tabIndex" is changed deeply.
+ * Whenever the user navigates with the keyboard, ItemNavigation will modify the "forcedTabIndex" properties of the items.
+ * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "forcedTabIndex" ItemNavigation set to them to the "tabindex" property).
+ * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "forcedTabIndex" property.
+ * If the items are Objects with "id" and "forcedTabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
+ * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "forcedTabIndex" is changed deeply.
  *
  * 2) Call the "setCurrentItem" method of ItemNavigation whenever you want to change the current item.
  * This is most commonly required if the user for example clicks on an item and thus selects it directly.

package/dist/delegate/ItemNavigation.js

@@ -16,18 +16,18 @@ import { instanceOfUI5Element } from "../UI5Element.js";
  * 1) Use the "getItemsCallback" constructor property to pass a callback to ItemNavigation, which, whenever called, will return the list of items to navigate among.
  *
  * Each item passed to ItemNavigation via "getItemsCallback" must be:
- *  - A) either a UI5Element with a "_tabIndex" property
- *  - B) or an Object with "id" and "_tabIndex" properties which represents a part of the root component's shadow DOM.
+ *  - A) either a UI5Element with a "forcedTabIndex" property
+ *  - B) or an Object with "id" and "forcedTabIndex" properties which represents a part of the root component's shadow DOM.
  *    The "id" must be a valid ID within the shadow root of the component ItemNavigation operates on.
  *    This object must not be a DOM object because, as said, ItemNavigation will not set "tabindex" on it. It must be a representation of a DOM object only
  *    and the developer has the responsibility to update the "tabindex" in the component's DOM.
  *  - C) a combination of the above
  *
- * Whenever the user navigates with the keyboard, ItemNavigation will modify the "_tabIndex" properties of the items.
- * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "_tabIndex" ItemNavigation set to them to the "tabindex" property).
- * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "_tabIndex" property.
- * If the items are Objects with "id" and "_tabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
- * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "_tabIndex" is changed deeply.
+ * Whenever the user navigates with the keyboard, ItemNavigation will modify the "forcedTabIndex" properties of the items.
+ * It is the items' responsibilities to re-render themselves and apply the correct value of "tabindex" (i.e. to map the "forcedTabIndex" ItemNavigation set to them to the "tabindex" property).
+ * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their "forcedTabIndex" property.
+ * If the items are Objects with "id" and "forcedTabIndex" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.
+ * To do so, set the "affectedPropertiesNames" constructor property to point to one or more of the root component's properties that need refreshing when "forcedTabIndex" is changed deeply.
  *
  * 2) Call the "setCurrentItem" method of ItemNavigation whenever you want to change the current item.
  * This is most commonly required if the user for example clicks on an item and thus selects it directly.
@@ -97,7 +97,7 @@ class ItemNavigation {
     }
     _init() {
         this._getItems().forEach((item, idx) => {
-            item._tabIndex = (idx === this._currentIndex) ? "0" : "-1";
+            item.forcedTabIndex = (idx === this._currentIndex) ? "0" : "-1";
         });
     }
     _onkeydown(event) {
@@ -265,7 +265,7 @@ class ItemNavigation {
     _applyTabIndex() {
         const items = this._getItems();
         for (let i = 0; i < items.length; i++) {
-            items[i]._tabIndex = i === this._currentIndex ? "0" : "-1";
+            items[i].forcedTabIndex = i === this._currentIndex ? "0" : "-1";
         }
         this._affectedPropertiesNames.forEach(propName => {
             const prop = this.rootWebComponent[propName];

package/dist/delegate/ItemNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemNavigation.js","sourceRoot":"","sources":["../../src/delegate/ItemNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tisDown,\n\tisUp,\n\tisLeft,\n\tisRight,\n\tisHome,\n\tisEnd,\n\tisPageDown,\n\tisPageUp,\n} from \"../Keys.js\";\nimport getActiveElement from \"../util/getActiveElement.js\";\n\nimport NavigationMode from \"../types/NavigationMode.js\";\nimport ItemNavigationBehavior from \"../types/ItemNavigationBehavior.js\";\n\nimport type UI5Element from \"../UI5Element.js\";\nimport { instanceOfUI5Element } from \"../UI5Element.js\";\n\ninterface ITabbable {\n\tid: string,\n\t_tabIndex: string,\n}\n\ntype ItemNavigationOptions = {\n\tcurrentIndex?: number,\n\tnavigationMode?: NavigationMode,\n\trowSize?: number\n\tskipItemsSize?: number,\n\tbehavior?: ItemNavigationBehavior,\n\tgetItemsCallback: () => Array<ITabbable>,\n\taffectedPropertiesNames?: Array<string>,\n};\n\n/**\n * The ItemNavigation class manages the calculations to determine the correct \"tabindex\" for a group of related items inside a root component.\n * Important: ItemNavigation only does the calculations and does not change \"tabindex\" directly, this is a responsibility of the developer.\n *\n * The keys that trigger ItemNavigation are:\n *  - Up/down\n *  - Left/right\n *  - Home/End\n *\n * Usage:\n * 1) Use the \"getItemsCallback\" constructor property to pass a callback to ItemNavigation, which, whenever called, will return the list of items to navigate among.\n *\n * Each item passed to ItemNavigation via \"getItemsCallback\" must be:\n *  - A) either a UI5Element with a \"_tabIndex\" property\n *  - B) or an Object with \"id\" and \"_tabIndex\" properties which represents a part of the root component's shadow DOM.\n *    The \"id\" must be a valid ID within the shadow root of the component ItemNavigation operates on.\n *    This object must not be a DOM object because, as said, ItemNavigation will not set \"tabindex\" on it. It must be a representation of a DOM object only\n *    and the developer has the responsibility to update the \"tabindex\" in the component's DOM.\n *  - C) a combination of the above\n *\n * Whenever the user navigates with the keyboard, ItemNavigation will modify the \"_tabIndex\" properties of the items.\n * It is the items' responsibilities to re-render themselves and apply the correct value of \"tabindex\" (i.e. to map the \"_tabIndex\" ItemNavigation set to them to the \"tabindex\" property).\n * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their \"_tabIndex\" property.\n * If the items are Objects with \"id\" and \"_tabIndex\" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.\n * To do so, set the \"affectedPropertiesNames\" constructor property to point to one or more of the root component's properties that need refreshing when \"_tabIndex\" is changed deeply.\n *\n * 2) Call the \"setCurrentItem\" method of ItemNavigation whenever you want to change the current item.\n * This is most commonly required if the user for example clicks on an item and thus selects it directly.\n * Pass as the only argument to \"setCurrentItem\" the item that becomes current (must be one of the items, returned by \"getItemsCallback\").\n *\n * @class\n * @public\n */\nclass ItemNavigation {\n\trootWebComponent: UI5Element;\n\n\t_getItems: () => Array<ITabbable>;\n\n\t_currentIndex: number;\n\n\t_rowSize: number;\n\n\t_behavior: ItemNavigationBehavior;\n\n\t_navigationMode: NavigationMode;\n\n\t_affectedPropertiesNames: Array<string>;\n\n\t_skipItemsSize: number | null;\n\n\t_initBound: () => void;\n\n\t/**\n\t *\n\t * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)\n\t * @param {ItemNavigationOptions} options Object with configuration options:\n\t *  - currentIndex: the index of the item that will be initially selected (from which navigation will begin)\n\t *  - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)\n\t *  - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto\n\t * \t- skipItemsSize: tells how many items upon PAGE_UP and PAGE_DOWN should be skipped to applying the focus on the next item\n\t *  - behavior (Static|Cycling): tells what to do when trying to navigate beyond the first and last items\n\t *    Static means that nothing happens if the user tries to navigate beyond the first/last item.\n\t *    Cycling means that when the user navigates beyond the last item they go to the first and vice versa.\n\t *  - getItemsCallback: function that, when called, returns an array with all items the user can navigate among\n\t *  - affectedPropertiesNames: a list of metadata properties on the root component which, upon user navigation, will be reassigned by address thus causing the root component to invalidate\n\t */\n\tconstructor(rootWebComponent: UI5Element, options: ItemNavigationOptions) {\n\t\tif (!rootWebComponent.isUI5Element) {\n\t\t\tthrow new Error(\"The root web component must be a UI5 Element instance\");\n\t\t}\n\n\t\tthis.rootWebComponent = rootWebComponent;\n\t\tthis.rootWebComponent.addEventListener(\"keydown\", this._onkeydown.bind(this));\n\t\tthis._initBound = this._init.bind(this);\n\t\tthis.rootWebComponent.attachComponentStateFinalized(this._initBound);\n\n\t\tif (typeof options.getItemsCallback !== \"function\") {\n\t\t\tthrow new Error(\"getItemsCallback is required\");\n\t\t}\n\n\t\tthis._getItems = options.getItemsCallback;\n\t\tthis._currentIndex = options.currentIndex || 0;\n\t\tthis._rowSize = options.rowSize || 1;\n\t\tthis._behavior = options.behavior || ItemNavigationBehavior.Static;\n\t\tthis._navigationMode = options.navigationMode || NavigationMode.Auto;\n\t\tthis._affectedPropertiesNames = options.affectedPropertiesNames || [];\n\t\tthis._skipItemsSize = options.skipItemsSize || null;\n\t}\n\n\t/**\n\t * Call this method to set a new \"current\" (selected) item in the item navigation\n\t * Note: the item passed to this function must be one of the items, returned by the getItemsCallback function\n\t *\n\t * @public\n\t * @param current the new selected item\n\t */\n\tsetCurrentItem(current: ITabbable): void {\n\t\tconst currentItemIndex = this._getItems().indexOf(current);\n\n\t\tif (currentItemIndex === -1) {\n\t\t\tconsole.warn(`The provided item is not managed by ItemNavigation`, current); // eslint-disable-line\n\t\t\treturn;\n\t\t}\n\n\t\tthis._currentIndex = currentItemIndex;\n\t\tthis._applyTabIndex();\n\t}\n\n\t/**\n\t * Call this method to dynamically change the row size\n\t *\n\t * @public\n\t * @param newRowSize\n\t */\n\tsetRowSize(newRowSize: number): void {\n\t\tthis._rowSize = newRowSize;\n\t}\n\n\t_init() {\n\t\tthis._getItems().forEach((item, idx) => {\n\t\t\titem._tabIndex = (idx === this._currentIndex) ? \"0\" : \"-1\";\n\t\t});\n\t}\n\n\t_onkeydown(event: KeyboardEvent) {\n\t\tif (!this._canNavigate()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst horizontalNavigationOn = this._navigationMode === NavigationMode.Horizontal || this._navigationMode === NavigationMode.Auto;\n\t\tconst verticalNavigationOn = this._navigationMode === NavigationMode.Vertical || this._navigationMode === NavigationMode.Auto;\n\t\tconst isRTL = this.rootWebComponent.effectiveDir === \"rtl\";\n\n\t\tif (isRTL && isLeft(event) && horizontalNavigationOn) {\n\t\t\tthis._handleRight();\n\t\t} else if (isRTL && isRight(event) && horizontalNavigationOn) {\n\t\t\tthis._handleLeft();\n\t\t} else if (isLeft(event) && horizontalNavigationOn) {\n\t\t\tthis._handleLeft();\n\t\t} else if (isRight(event) && horizontalNavigationOn) {\n\t\t\tthis._handleRight();\n\t\t} else if (isUp(event) && verticalNavigationOn) {\n\t\t\tthis._handleUp();\n\t\t} else if (isDown(event) && verticalNavigationOn) {\n\t\t\tthis._handleDown();\n\t\t} else if (isHome(event)) {\n\t\t\tthis._handleHome();\n\t\t} else if (isEnd(event)) {\n\t\t\tthis._handleEnd();\n\t\t} else if (isPageUp(event)) {\n\t\t\tthis._handlePageUp();\n\t\t} else if (isPageDown(event)) {\n\t\t\tthis._handlePageDown();\n\t\t} else {\n\t\t\treturn; // if none of the supported keys is pressed, we don't want to prevent the event or update the item navigation\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tthis._applyTabIndex();\n\t\tthis._focusCurrentItem();\n\t}\n\n\t_handleUp() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex - this._rowSize >= 0) { // no border reached, just decrease the index by a row\n\t\t\tthis._currentIndex -= this._rowSize;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **last** item in the **previous** column\n\t\t\tconst firstItemInThisColumnIndex = this._currentIndex % this._rowSize;\n\t\t\tconst firstItemInPreviousColumnIndex = firstItemInThisColumnIndex === 0 ? this._rowSize - 1 : firstItemInThisColumnIndex - 1; // find the first item in the previous column (if the current column is the first column -> move to the last column)\n\t\t\tconst rows = Math.ceil(itemsLength / this._rowSize); // how many rows there are (even if incomplete, f.e. for 14 items and _rowSize=4 -> 4 rows total, although only 2 items on the last row)\n\t\t\tlet lastItemInPreviousColumnIndex = firstItemInPreviousColumnIndex + (rows - 1) * this._rowSize; // multiply rows by columns, and add the column's first item's index\n\t\t\tif (lastItemInPreviousColumnIndex > itemsLength - 1) { // for incomplete rows, use the previous row's last item, as for them the last item is missing\n\t\t\t\tlastItemInPreviousColumnIndex -= this._rowSize;\n\t\t\t}\n\t\t\tthis._currentIndex = lastItemInPreviousColumnIndex;\n\t\t} else { // not cyclic, so just go to the first item\n\t\t\tthis._currentIndex = 0;\n\t\t}\n\t}\n\n\t_handleDown() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex + this._rowSize < itemsLength) { // no border reached, just increase the index by a row\n\t\t\tthis._currentIndex += this._rowSize;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **first** item in the **next** column\n\t\t\tconst firstItemInThisColumnIndex = this._currentIndex % this._rowSize; // find the first item in the current column first\n\t\t\tconst firstItemInNextColumnIndex = (firstItemInThisColumnIndex + 1) % this._rowSize; // to get the first item in the next column, just increase the index by 1. The modulo by rows is for the case when we are at the last column\n\t\t\tthis._currentIndex = firstItemInNextColumnIndex;\n\t\t} else { // not cyclic, so just go to the last item\n\t\t\tthis._currentIndex = itemsLength - 1;\n\t\t}\n\t}\n\n\t_handleLeft() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex > 0) {\n\t\t\tthis._currentIndex -= 1;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column\n\t\t\tthis._currentIndex = itemsLength - 1;\n\t\t}\n\t}\n\n\t_handleRight() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex < itemsLength - 1) {\n\t\t\tthis._currentIndex += 1;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column\n\t\t\tthis._currentIndex = 0;\n\t\t}\n\t}\n\n\t_handleHome() {\n\t\tconst homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;\n\t\tthis._currentIndex -= this._currentIndex % homeEndRange;\n\t}\n\n\t_handleEnd() {\n\t\tconst homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;\n\t\tthis._currentIndex += (homeEndRange - 1 - this._currentIndex % homeEndRange); // eslint-disable-line\n\t}\n\n\t_handlePageUp() {\n\t\tif (this._rowSize > 1) {\n\t\t\t// eslint-disable-next-line\n\t\t\t// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.\n\t\t\treturn;\n\t\t}\n\t\tthis._handlePageUpFlat();\n\t}\n\n\t_handlePageDown() {\n\t\tif (this._rowSize > 1) {\n\t\t\t// eslint-disable-next-line\n\t\t\t// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.\n\t\t\treturn;\n\t\t}\n\t\tthis._handlePageDownFlat();\n\t}\n\n\t/**\n\t * Handles PAGE_UP in a flat list-like structure, both vertically and horizontally.\n\t */\n\t_handlePageUpFlat() {\n\t\tif (this._skipItemsSize === null) {\n\t\t\t// Move the focus to the very top (as Home).\n\t\t\tthis._currentIndex -= this._currentIndex;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._currentIndex + 1 > this._skipItemsSize) {\n\t\t\t// When there are more than \"skipItemsSize\" number of items to the top,\n\t\t\t// move the focus up/left with the predefined number.\n\t\t\tthis._currentIndex -= this._skipItemsSize;\n\t\t} else {\n\t\t\t// Otherwise, move the focus to the very top (as Home).\n\t\t\tthis._currentIndex -= this._currentIndex;\n\t\t}\n\t}\n\n\t/**\n\t * Handles PAGE_DOWN in a flat list-like structure, both vertically and horizontally.\n\t */\n\t_handlePageDownFlat() {\n\t\tif (this._skipItemsSize === null) {\n\t\t\t// Move the focus to the very bottom (as End).\n\t\t\tthis._currentIndex = this._getItems().length - 1;\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentToEndRange = this._getItems().length - this._currentIndex - 1;\n\n\t\tif (currentToEndRange > this._skipItemsSize) {\n\t\t\t// When there are more than \"skipItemsSize\" number of items until the bottom,\n\t\t\t// move the focus down/right with the predefined number.\n\t\t\tthis._currentIndex += this._skipItemsSize;\n\t\t} else {\n\t\t\t// Otherwise, move the focus to the very bottom (as End).\n\t\t\tthis._currentIndex = this._getItems().length - 1;\n\t\t}\n\t}\n\n\t_applyTabIndex() {\n\t\tconst items = this._getItems();\n\t\tfor (let i = 0; i < items.length; i++) {\n\t\t\titems[i]._tabIndex = i === this._currentIndex ? \"0\" : \"-1\";\n\t\t}\n\n\t\tthis._affectedPropertiesNames.forEach(propName => {\n\t\t\tconst prop = (this.rootWebComponent as Record<string, any>)[propName];\n\t\t\t(this.rootWebComponent as Record<string, any>)[propName] = Array.isArray(prop) ? [...prop] : { ...prop };\n\t\t});\n\t}\n\n\t_focusCurrentItem() {\n\t\tconst currentItem = this._getCurrentItem();\n\t\tif (currentItem) {\n\t\t\tcurrentItem.focus();\n\t\t}\n\t}\n\n\t_canNavigate() {\n\t\tconst currentItem = this._getCurrentItem();\n\t\tconst activeElement = getActiveElement();\n\n\t\treturn currentItem && currentItem === activeElement;\n\t}\n\n\t_getCurrentItem() {\n\t\tconst items = this._getItems();\n\n\t\tif (!items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\t// normalize the index\n\t\twhile (this._currentIndex >= items.length) {\n\t\t\tthis._currentIndex -= this._rowSize;\n\t\t}\n\n\t\tif (this._currentIndex < 0) {\n\t\t\tthis._currentIndex = 0;\n\t\t}\n\n\t\tconst currentItem = items[this._currentIndex];\n\n\t\tif (!currentItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (instanceOfUI5Element(currentItem)) {\n\t\t\treturn currentItem.getFocusDomRef();\n\t\t}\n\n\t\tconst currentItemDOMRef = this.rootWebComponent.getDomRef();\n\t\tif (!currentItemDOMRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentItem.id) {\n\t\t\treturn currentItemDOMRef.querySelector(`[id=\"${currentItem.id}\"]`) as HTMLElement;\n\t\t}\n\t}\n}\n\nexport default ItemNavigation;\n\nexport {\n\tITabbable,\n};\n"]}
+{"version":3,"file":"ItemNavigation.js","sourceRoot":"","sources":["../../src/delegate/ItemNavigation.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,MAAM,EACN,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,UAAU,EACV,QAAQ,GACR,MAAM,YAAY,CAAC;AACpB,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAE3D,OAAO,cAAc,MAAM,4BAA4B,CAAC;AACxD,OAAO,sBAAsB,MAAM,oCAAoC,CAAC;AAGxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAiBxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,cAAc;IAmBnB;;;;;;;;;;;;;OAaG;IACH,YAAY,gBAA4B,EAAE,OAA8B;QACvE,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE;YACnC,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC,CAAC;SACzE;QAED,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9E,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAErE,IAAI,OAAO,OAAO,CAAC,gBAAgB,KAAK,UAAU,EAAE;YACnD,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAC;SAChD;QAED,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,gBAAgB,CAAC;QAC1C,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,YAAY,IAAI,CAAC,CAAC;QAC/C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,OAAO,IAAI,CAAC,CAAC;QACrC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,QAAQ,IAAI,sBAAsB,CAAC,MAAM,CAAC;QACnE,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,cAAc,IAAI,cAAc,CAAC,IAAI,CAAC;QACrE,IAAI,CAAC,wBAAwB,GAAG,OAAO,CAAC,uBAAuB,IAAI,EAAE,CAAC;QACtE,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,aAAa,IAAI,IAAI,CAAC;IACrD,CAAC;IAED;;;;;;OAMG;IACH,cAAc,CAAC,OAAkB;QAChC,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAE3D,IAAI,gBAAgB,KAAK,CAAC,CAAC,EAAE;YAC5B,OAAO,CAAC,IAAI,CAAC,oDAAoD,EAAE,OAAO,CAAC,CAAC,CAAC,sBAAsB;YACnG,OAAO;SACP;QAED,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC;QACtC,IAAI,CAAC,cAAc,EAAE,CAAC;IACvB,CAAC;IAED;;;;;OAKG;IACH,UAAU,CAAC,UAAkB;QAC5B,IAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;IAC5B,CAAC;IAED,KAAK;QACJ,IAAI,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE;YACtC,IAAI,CAAC,cAAc,GAAG,CAAC,GAAG,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;QACjE,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,KAAoB;QAC9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE;YACzB,OAAO;SACP;QAED,MAAM,sBAAsB,GAAG,IAAI,CAAC,eAAe,KAAK,cAAc,CAAC,UAAU,IAAI,IAAI,CAAC,eAAe,KAAK,cAAc,CAAC,IAAI,CAAC;QAClI,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,KAAK,cAAc,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,KAAK,cAAc,CAAC,IAAI,CAAC;QAC9H,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,KAAK,KAAK,CAAC;QAE3D,IAAI,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,sBAAsB,EAAE;YACrD,IAAI,CAAC,YAAY,EAAE,CAAC;SACpB;aAAM,IAAI,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,sBAAsB,EAAE;YAC7D,IAAI,CAAC,WAAW,EAAE,CAAC;SACnB;aAAM,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,sBAAsB,EAAE;YACnD,IAAI,CAAC,WAAW,EAAE,CAAC;SACnB;aAAM,IAAI,OAAO,CAAC,KAAK,CAAC,IAAI,sBAAsB,EAAE;YACpD,IAAI,CAAC,YAAY,EAAE,CAAC;SACpB;aAAM,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,oBAAoB,EAAE;YAC/C,IAAI,CAAC,SAAS,EAAE,CAAC;SACjB;aAAM,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,oBAAoB,EAAE;YACjD,IAAI,CAAC,WAAW,EAAE,CAAC;SACnB;aAAM,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE;YACzB,IAAI,CAAC,WAAW,EAAE,CAAC;SACnB;aAAM,IAAI,KAAK,CAAC,KAAK,CAAC,EAAE;YACxB,IAAI,CAAC,UAAU,EAAE,CAAC;SAClB;aAAM,IAAI,QAAQ,CAAC,KAAK,CAAC,EAAE;YAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;SACrB;aAAM,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE;YAC7B,IAAI,CAAC,eAAe,EAAE,CAAC;SACvB;aAAM;YACN,OAAO,CAAC,6GAA6G;SACrH;QAED,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC1B,CAAC;IAED,SAAS;QACR,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC;QAC5C,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,EAAE,EAAE,sDAAsD;YACpG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC;YACpC,OAAO;SACP;QAED,IAAI,IAAI,CAAC,SAAS,KAAK,sBAAsB,CAAC,MAAM,EAAE,EAAE,gEAAgE;YACvH,MAAM,0BAA0B,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;YACtE,MAAM,8BAA8B,GAAG,0BAA0B,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,0BAA0B,GAAG,CAAC,CAAC,CAAC,oHAAoH;YAClP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,wIAAwI;YAC7L,IAAI,6BAA6B,GAAG,8BAA8B,GAAG,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,oEAAoE;YACrK,IAAI,6BAA6B,GAAG,WAAW,GAAG,CAAC,EAAE,EAAE,8FAA8F;gBACpJ,6BAA6B,IAAI,IAAI,CAAC,QAAQ,CAAC;aAC/C;YACD,IAAI,CAAC,aAAa,GAAG,6BAA6B,CAAC;SACnD;aAAM,EAAE,2CAA2C;YACnD,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;SACvB;IACF,CAAC;IAED,WAAW;QACV,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC;QAC5C,IAAI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,GAAG,WAAW,EAAE,EAAE,sDAAsD;YAC7G,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC;YACpC,OAAO;SACP;QAED,IAAI,IAAI,CAAC,SAAS,KAAK,sBAAsB,CAAC,MAAM,EAAE,EAAE,6DAA6D;YACpH,MAAM,0BAA0B,GAAG,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,kDAAkD;YACzH,MAAM,0BAA0B,GAAG,CAAC,0BAA0B,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,4IAA4I;YACjO,IAAI,CAAC,aAAa,GAAG,0BAA0B,CAAC;SAChD;aAAM,EAAE,0CAA0C;YAClD,IAAI,CAAC,aAAa,GAAG,WAAW,GAAG,CAAC,CAAC;SACrC;IACF,CAAC;IAED,WAAW;QACV,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC;QAC5C,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE;YAC3B,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC;YACxB,OAAO;SACP;QAED,IAAI,IAAI,CAAC,SAAS,KAAK,sBAAsB,CAAC,MAAM,EAAE,EAAE,0CAA0C;YACjG,IAAI,CAAC,aAAa,GAAG,WAAW,GAAG,CAAC,CAAC;SACrC;IACF,CAAC;IAED,YAAY;QACX,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC;QAC5C,IAAI,IAAI,CAAC,aAAa,GAAG,WAAW,GAAG,CAAC,EAAE;YACzC,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC;YACxB,OAAO;SACP;QAED,IAAI,IAAI,CAAC,SAAS,KAAK,sBAAsB,CAAC,MAAM,EAAE,EAAE,0CAA0C;YACjG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;SACvB;IACF,CAAC;IAED,WAAW;QACV,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC;QACjF,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;IACzD,CAAC;IAED,UAAU;QACT,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,CAAC;QACjF,IAAI,CAAC,aAAa,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC,CAAC,CAAC,sBAAsB;IACrG,CAAC;IAED,aAAa;QACZ,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE;YACtB,2BAA2B;YAC3B,8EAA8E;YAC9E,OAAO;SACP;QACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC1B,CAAC;IAED,eAAe;QACd,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE;YACtB,2BAA2B;YAC3B,8EAA8E;YAC9E,OAAO;SACP;QACD,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACH,iBAAiB;QAChB,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;YACjC,4CAA4C;YAC5C,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC;YACzC,OAAO;SACP;QAED,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE;YACjD,uEAAuE;YACvE,qDAAqD;YACrD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,cAAc,CAAC;SAC1C;aAAM;YACN,uDAAuD;YACvD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC;SACzC;IACF,CAAC;IAED;;OAEG;IACH,mBAAmB;QAClB,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE;YACjC,8CAA8C;YAC9C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;YACjD,OAAO;SACP;QAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;QAE3E,IAAI,iBAAiB,GAAG,IAAI,CAAC,cAAc,EAAE;YAC5C,6EAA6E;YAC7E,wDAAwD;YACxD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,cAAc,CAAC;SAC1C;aAAM;YACN,yDAAyD;YACzD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;SACjD;IACF,CAAC;IAED,cAAc;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,GAAG,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;SAChE;QAED,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;YAChD,MAAM,IAAI,GAAI,IAAI,CAAC,gBAAwC,CAAC,QAAQ,CAAC,CAAC;YACrE,IAAI,CAAC,gBAAwC,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;QAC1G,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,iBAAiB;QAChB,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC3C,IAAI,WAAW,EAAE;YAChB,WAAW,CAAC,KAAK,EAAE,CAAC;SACpB;IACF,CAAC;IAED,YAAY;QACX,MAAM,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC3C,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;QAEzC,OAAO,WAAW,IAAI,WAAW,KAAK,aAAa,CAAC;IACrD,CAAC;IAED,eAAe;QACd,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAE/B,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YAClB,OAAO;SACP;QAED,sBAAsB;QACtB,OAAO,IAAI,CAAC,aAAa,IAAI,KAAK,CAAC,MAAM,EAAE;YAC1C,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC;SACpC;QAED,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE;YAC3B,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;SACvB;QAED,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAE9C,IAAI,CAAC,WAAW,EAAE;YACjB,OAAO;SACP;QAED,IAAI,oBAAoB,CAAC,WAAW,CAAC,EAAE;YACtC,OAAO,WAAW,CAAC,cAAc,EAAE,CAAC;SACpC;QAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC;QAC5D,IAAI,CAAC,iBAAiB,EAAE;YACvB,OAAO;SACP;QAED,IAAI,WAAW,CAAC,EAAE,EAAE;YACnB,OAAO,iBAAiB,CAAC,aAAa,CAAC,QAAQ,WAAW,CAAC,EAAE,IAAI,CAAgB,CAAC;SAClF;IACF,CAAC;CACD;AAED,eAAe,cAAc,CAAC","sourcesContent":["import {\n\tisDown,\n\tisUp,\n\tisLeft,\n\tisRight,\n\tisHome,\n\tisEnd,\n\tisPageDown,\n\tisPageUp,\n} from \"../Keys.js\";\nimport getActiveElement from \"../util/getActiveElement.js\";\n\nimport NavigationMode from \"../types/NavigationMode.js\";\nimport ItemNavigationBehavior from \"../types/ItemNavigationBehavior.js\";\n\nimport type UI5Element from \"../UI5Element.js\";\nimport { instanceOfUI5Element } from \"../UI5Element.js\";\n\ninterface ITabbable {\n\tid: string,\n\tforcedTabIndex: string,\n}\n\ntype ItemNavigationOptions = {\n\tcurrentIndex?: number,\n\tnavigationMode?: NavigationMode,\n\trowSize?: number\n\tskipItemsSize?: number,\n\tbehavior?: ItemNavigationBehavior,\n\tgetItemsCallback: () => Array<ITabbable>,\n\taffectedPropertiesNames?: Array<string>,\n};\n\n/**\n * The ItemNavigation class manages the calculations to determine the correct \"tabindex\" for a group of related items inside a root component.\n * Important: ItemNavigation only does the calculations and does not change \"tabindex\" directly, this is a responsibility of the developer.\n *\n * The keys that trigger ItemNavigation are:\n *  - Up/down\n *  - Left/right\n *  - Home/End\n *\n * Usage:\n * 1) Use the \"getItemsCallback\" constructor property to pass a callback to ItemNavigation, which, whenever called, will return the list of items to navigate among.\n *\n * Each item passed to ItemNavigation via \"getItemsCallback\" must be:\n *  - A) either a UI5Element with a \"forcedTabIndex\" property\n *  - B) or an Object with \"id\" and \"forcedTabIndex\" properties which represents a part of the root component's shadow DOM.\n *    The \"id\" must be a valid ID within the shadow root of the component ItemNavigation operates on.\n *    This object must not be a DOM object because, as said, ItemNavigation will not set \"tabindex\" on it. It must be a representation of a DOM object only\n *    and the developer has the responsibility to update the \"tabindex\" in the component's DOM.\n *  - C) a combination of the above\n *\n * Whenever the user navigates with the keyboard, ItemNavigation will modify the \"forcedTabIndex\" properties of the items.\n * It is the items' responsibilities to re-render themselves and apply the correct value of \"tabindex\" (i.e. to map the \"forcedTabIndex\" ItemNavigation set to them to the \"tabindex\" property).\n * If the items of the ItemNavigation are UI5Elements themselves, this can happen naturally since they will be invalidated by their \"forcedTabIndex\" property.\n * If the items are Objects with \"id\" and \"forcedTabIndex\" however, it is the developer's responsibility to apply these and the easiest way is to have the root component invalidated by ItemNavigation.\n * To do so, set the \"affectedPropertiesNames\" constructor property to point to one or more of the root component's properties that need refreshing when \"forcedTabIndex\" is changed deeply.\n *\n * 2) Call the \"setCurrentItem\" method of ItemNavigation whenever you want to change the current item.\n * This is most commonly required if the user for example clicks on an item and thus selects it directly.\n * Pass as the only argument to \"setCurrentItem\" the item that becomes current (must be one of the items, returned by \"getItemsCallback\").\n *\n * @class\n * @public\n */\nclass ItemNavigation {\n\trootWebComponent: UI5Element;\n\n\t_getItems: () => Array<ITabbable>;\n\n\t_currentIndex: number;\n\n\t_rowSize: number;\n\n\t_behavior: ItemNavigationBehavior;\n\n\t_navigationMode: NavigationMode;\n\n\t_affectedPropertiesNames: Array<string>;\n\n\t_skipItemsSize: number | null;\n\n\t_initBound: () => void;\n\n\t/**\n\t *\n\t * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among)\n\t * @param {ItemNavigationOptions} options Object with configuration options:\n\t *  - currentIndex: the index of the item that will be initially selected (from which navigation will begin)\n\t *  - navigationMode (Auto|Horizontal|Vertical): whether the items are displayed horizontally (Horizontal), vertically (Vertical) or as a matrix (Auto) meaning the user can navigate in both directions (up/down and left/right)\n\t *  - rowSize: tells how many items per row there are when the items are not rendered as a flat list but rather as a matrix. Relevant for navigationMode=Auto\n\t * \t- skipItemsSize: tells how many items upon PAGE_UP and PAGE_DOWN should be skipped to applying the focus on the next item\n\t *  - behavior (Static|Cycling): tells what to do when trying to navigate beyond the first and last items\n\t *    Static means that nothing happens if the user tries to navigate beyond the first/last item.\n\t *    Cycling means that when the user navigates beyond the last item they go to the first and vice versa.\n\t *  - getItemsCallback: function that, when called, returns an array with all items the user can navigate among\n\t *  - affectedPropertiesNames: a list of metadata properties on the root component which, upon user navigation, will be reassigned by address thus causing the root component to invalidate\n\t */\n\tconstructor(rootWebComponent: UI5Element, options: ItemNavigationOptions) {\n\t\tif (!rootWebComponent.isUI5Element) {\n\t\t\tthrow new Error(\"The root web component must be a UI5 Element instance\");\n\t\t}\n\n\t\tthis.rootWebComponent = rootWebComponent;\n\t\tthis.rootWebComponent.addEventListener(\"keydown\", this._onkeydown.bind(this));\n\t\tthis._initBound = this._init.bind(this);\n\t\tthis.rootWebComponent.attachComponentStateFinalized(this._initBound);\n\n\t\tif (typeof options.getItemsCallback !== \"function\") {\n\t\t\tthrow new Error(\"getItemsCallback is required\");\n\t\t}\n\n\t\tthis._getItems = options.getItemsCallback;\n\t\tthis._currentIndex = options.currentIndex || 0;\n\t\tthis._rowSize = options.rowSize || 1;\n\t\tthis._behavior = options.behavior || ItemNavigationBehavior.Static;\n\t\tthis._navigationMode = options.navigationMode || NavigationMode.Auto;\n\t\tthis._affectedPropertiesNames = options.affectedPropertiesNames || [];\n\t\tthis._skipItemsSize = options.skipItemsSize || null;\n\t}\n\n\t/**\n\t * Call this method to set a new \"current\" (selected) item in the item navigation\n\t * Note: the item passed to this function must be one of the items, returned by the getItemsCallback function\n\t *\n\t * @public\n\t * @param current the new selected item\n\t */\n\tsetCurrentItem(current: ITabbable): void {\n\t\tconst currentItemIndex = this._getItems().indexOf(current);\n\n\t\tif (currentItemIndex === -1) {\n\t\t\tconsole.warn(`The provided item is not managed by ItemNavigation`, current); // eslint-disable-line\n\t\t\treturn;\n\t\t}\n\n\t\tthis._currentIndex = currentItemIndex;\n\t\tthis._applyTabIndex();\n\t}\n\n\t/**\n\t * Call this method to dynamically change the row size\n\t *\n\t * @public\n\t * @param newRowSize\n\t */\n\tsetRowSize(newRowSize: number): void {\n\t\tthis._rowSize = newRowSize;\n\t}\n\n\t_init() {\n\t\tthis._getItems().forEach((item, idx) => {\n\t\t\titem.forcedTabIndex = (idx === this._currentIndex) ? \"0\" : \"-1\";\n\t\t});\n\t}\n\n\t_onkeydown(event: KeyboardEvent) {\n\t\tif (!this._canNavigate()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst horizontalNavigationOn = this._navigationMode === NavigationMode.Horizontal || this._navigationMode === NavigationMode.Auto;\n\t\tconst verticalNavigationOn = this._navigationMode === NavigationMode.Vertical || this._navigationMode === NavigationMode.Auto;\n\t\tconst isRTL = this.rootWebComponent.effectiveDir === \"rtl\";\n\n\t\tif (isRTL && isLeft(event) && horizontalNavigationOn) {\n\t\t\tthis._handleRight();\n\t\t} else if (isRTL && isRight(event) && horizontalNavigationOn) {\n\t\t\tthis._handleLeft();\n\t\t} else if (isLeft(event) && horizontalNavigationOn) {\n\t\t\tthis._handleLeft();\n\t\t} else if (isRight(event) && horizontalNavigationOn) {\n\t\t\tthis._handleRight();\n\t\t} else if (isUp(event) && verticalNavigationOn) {\n\t\t\tthis._handleUp();\n\t\t} else if (isDown(event) && verticalNavigationOn) {\n\t\t\tthis._handleDown();\n\t\t} else if (isHome(event)) {\n\t\t\tthis._handleHome();\n\t\t} else if (isEnd(event)) {\n\t\t\tthis._handleEnd();\n\t\t} else if (isPageUp(event)) {\n\t\t\tthis._handlePageUp();\n\t\t} else if (isPageDown(event)) {\n\t\t\tthis._handlePageDown();\n\t\t} else {\n\t\t\treturn; // if none of the supported keys is pressed, we don't want to prevent the event or update the item navigation\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tthis._applyTabIndex();\n\t\tthis._focusCurrentItem();\n\t}\n\n\t_handleUp() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex - this._rowSize >= 0) { // no border reached, just decrease the index by a row\n\t\t\tthis._currentIndex -= this._rowSize;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **last** item in the **previous** column\n\t\t\tconst firstItemInThisColumnIndex = this._currentIndex % this._rowSize;\n\t\t\tconst firstItemInPreviousColumnIndex = firstItemInThisColumnIndex === 0 ? this._rowSize - 1 : firstItemInThisColumnIndex - 1; // find the first item in the previous column (if the current column is the first column -> move to the last column)\n\t\t\tconst rows = Math.ceil(itemsLength / this._rowSize); // how many rows there are (even if incomplete, f.e. for 14 items and _rowSize=4 -> 4 rows total, although only 2 items on the last row)\n\t\t\tlet lastItemInPreviousColumnIndex = firstItemInPreviousColumnIndex + (rows - 1) * this._rowSize; // multiply rows by columns, and add the column's first item's index\n\t\t\tif (lastItemInPreviousColumnIndex > itemsLength - 1) { // for incomplete rows, use the previous row's last item, as for them the last item is missing\n\t\t\t\tlastItemInPreviousColumnIndex -= this._rowSize;\n\t\t\t}\n\t\t\tthis._currentIndex = lastItemInPreviousColumnIndex;\n\t\t} else { // not cyclic, so just go to the first item\n\t\t\tthis._currentIndex = 0;\n\t\t}\n\t}\n\n\t_handleDown() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex + this._rowSize < itemsLength) { // no border reached, just increase the index by a row\n\t\t\tthis._currentIndex += this._rowSize;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // if cyclic, go to the **first** item in the **next** column\n\t\t\tconst firstItemInThisColumnIndex = this._currentIndex % this._rowSize; // find the first item in the current column first\n\t\t\tconst firstItemInNextColumnIndex = (firstItemInThisColumnIndex + 1) % this._rowSize; // to get the first item in the next column, just increase the index by 1. The modulo by rows is for the case when we are at the last column\n\t\t\tthis._currentIndex = firstItemInNextColumnIndex;\n\t\t} else { // not cyclic, so just go to the last item\n\t\t\tthis._currentIndex = itemsLength - 1;\n\t\t}\n\t}\n\n\t_handleLeft() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex > 0) {\n\t\t\tthis._currentIndex -= 1;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column\n\t\t\tthis._currentIndex = itemsLength - 1;\n\t\t}\n\t}\n\n\t_handleRight() {\n\t\tconst itemsLength = this._getItems().length;\n\t\tif (this._currentIndex < itemsLength - 1) {\n\t\t\tthis._currentIndex += 1;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._behavior === ItemNavigationBehavior.Cyclic) { // go to the first item in the next column\n\t\t\tthis._currentIndex = 0;\n\t\t}\n\t}\n\n\t_handleHome() {\n\t\tconst homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;\n\t\tthis._currentIndex -= this._currentIndex % homeEndRange;\n\t}\n\n\t_handleEnd() {\n\t\tconst homeEndRange = this._rowSize > 1 ? this._rowSize : this._getItems().length;\n\t\tthis._currentIndex += (homeEndRange - 1 - this._currentIndex % homeEndRange); // eslint-disable-line\n\t}\n\n\t_handlePageUp() {\n\t\tif (this._rowSize > 1) {\n\t\t\t// eslint-disable-next-line\n\t\t\t// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.\n\t\t\treturn;\n\t\t}\n\t\tthis._handlePageUpFlat();\n\t}\n\n\t_handlePageDown() {\n\t\tif (this._rowSize > 1) {\n\t\t\t// eslint-disable-next-line\n\t\t\t// TODO: handle page up on matrix (grid) layout - ColorPalette, ProductSwitch.\n\t\t\treturn;\n\t\t}\n\t\tthis._handlePageDownFlat();\n\t}\n\n\t/**\n\t * Handles PAGE_UP in a flat list-like structure, both vertically and horizontally.\n\t */\n\t_handlePageUpFlat() {\n\t\tif (this._skipItemsSize === null) {\n\t\t\t// Move the focus to the very top (as Home).\n\t\t\tthis._currentIndex -= this._currentIndex;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._currentIndex + 1 > this._skipItemsSize) {\n\t\t\t// When there are more than \"skipItemsSize\" number of items to the top,\n\t\t\t// move the focus up/left with the predefined number.\n\t\t\tthis._currentIndex -= this._skipItemsSize;\n\t\t} else {\n\t\t\t// Otherwise, move the focus to the very top (as Home).\n\t\t\tthis._currentIndex -= this._currentIndex;\n\t\t}\n\t}\n\n\t/**\n\t * Handles PAGE_DOWN in a flat list-like structure, both vertically and horizontally.\n\t */\n\t_handlePageDownFlat() {\n\t\tif (this._skipItemsSize === null) {\n\t\t\t// Move the focus to the very bottom (as End).\n\t\t\tthis._currentIndex = this._getItems().length - 1;\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentToEndRange = this._getItems().length - this._currentIndex - 1;\n\n\t\tif (currentToEndRange > this._skipItemsSize) {\n\t\t\t// When there are more than \"skipItemsSize\" number of items until the bottom,\n\t\t\t// move the focus down/right with the predefined number.\n\t\t\tthis._currentIndex += this._skipItemsSize;\n\t\t} else {\n\t\t\t// Otherwise, move the focus to the very bottom (as End).\n\t\t\tthis._currentIndex = this._getItems().length - 1;\n\t\t}\n\t}\n\n\t_applyTabIndex() {\n\t\tconst items = this._getItems();\n\t\tfor (let i = 0; i < items.length; i++) {\n\t\t\titems[i].forcedTabIndex = i === this._currentIndex ? \"0\" : \"-1\";\n\t\t}\n\n\t\tthis._affectedPropertiesNames.forEach(propName => {\n\t\t\tconst prop = (this.rootWebComponent as Record<string, any>)[propName];\n\t\t\t(this.rootWebComponent as Record<string, any>)[propName] = Array.isArray(prop) ? [...prop] : { ...prop };\n\t\t});\n\t}\n\n\t_focusCurrentItem() {\n\t\tconst currentItem = this._getCurrentItem();\n\t\tif (currentItem) {\n\t\t\tcurrentItem.focus();\n\t\t}\n\t}\n\n\t_canNavigate() {\n\t\tconst currentItem = this._getCurrentItem();\n\t\tconst activeElement = getActiveElement();\n\n\t\treturn currentItem && currentItem === activeElement;\n\t}\n\n\t_getCurrentItem() {\n\t\tconst items = this._getItems();\n\n\t\tif (!items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\t// normalize the index\n\t\twhile (this._currentIndex >= items.length) {\n\t\t\tthis._currentIndex -= this._rowSize;\n\t\t}\n\n\t\tif (this._currentIndex < 0) {\n\t\t\tthis._currentIndex = 0;\n\t\t}\n\n\t\tconst currentItem = items[this._currentIndex];\n\n\t\tif (!currentItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (instanceOfUI5Element(currentItem)) {\n\t\t\treturn currentItem.getFocusDomRef();\n\t\t}\n\n\t\tconst currentItemDOMRef = this.rootWebComponent.getDomRef();\n\t\tif (!currentItemDOMRef) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentItem.id) {\n\t\t\treturn currentItemDOMRef.querySelector(`[id=\"${currentItem.id}\"]`) as HTMLElement;\n\t\t}\n\t}\n}\n\nexport default ItemNavigation;\n\nexport {\n\tITabbable,\n};\n"]}

package/dist/features/InputElementsFormSupport.d.ts

@@ -0,0 +1,18 @@
+import type UI5Element from "../UI5Element.js";
+interface IFormElement extends UI5Element {
+    _internals?: ElementInternals;
+}
+interface IFormInputElement extends IFormElement {
+    name: string;
+    formFormattedValue: FormData | string | null;
+    formValidityMessage?: string;
+    formValidity?: ValidityStateFlags;
+    formElementAnchor?: () => HTMLElement | undefined | Promise<HTMLElement | undefined>;
+}
+declare const attachFormElementInternals: (element: IFormInputElement | IFormElement) => void;
+declare const setFormValue: (element: IFormInputElement) => void;
+declare const setFormValidity: (element: IFormInputElement) => Promise<void>;
+declare const submitForm: (element: IFormElement) => void;
+declare const resetForm: (element: IFormElement) => void;
+export { attachFormElementInternals, setFormValue, setFormValidity, submitForm, resetForm, };
+export type { IFormInputElement, IFormElement, };

package/dist/features/InputElementsFormSupport.js

@@ -0,0 +1,40 @@
+const attachFormElementInternals = (element) => {
+    element._internals = element.attachInternals();
+    if (isInputElement(element)) {
+        setFormValue(element);
+    }
+};
+const setFormValue = (element) => {
+    if (!element._internals?.form) {
+        return;
+    }
+    setFormValidity(element);
+    if (!element.name) {
+        element._internals?.setFormValue(null);
+        return;
+    }
+    element._internals.setFormValue(element.formFormattedValue);
+};
+const setFormValidity = async (element) => {
+    if (!element._internals?.form) {
+        return;
+    }
+    if (element.formValidity && Object.keys(element.formValidity).some(key => key)) {
+        const focusRef = await element.formElementAnchor?.();
+        element._internals.setValidity(element.formValidity, element.formValidityMessage, focusRef);
+    }
+    else {
+        element._internals.setValidity({});
+    }
+};
+const submitForm = (element) => {
+    element._internals?.form?.requestSubmit();
+};
+const resetForm = (element) => {
+    element._internals?.form?.reset();
+};
+const isInputElement = (element) => {
+    return "formFormattedValue" in element && "name" in element;
+};
+export { attachFormElementInternals, setFormValue, setFormValidity, submitForm, resetForm, };
+//# sourceMappingURL=InputElementsFormSupport.js.map

package/dist/features/InputElementsFormSupport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputElementsFormSupport.js","sourceRoot":"","sources":["../../src/features/InputElementsFormSupport.ts"],"names":[],"mappings":"AAcA,MAAM,0BAA0B,GAAG,CAAC,OAAyC,EAAE,EAAE;IAChF,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,eAAe,EAAE,CAAC;IAE/C,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;QAC5B,YAAY,CAAC,OAAO,CAAC,CAAC;KACtB;AACF,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,OAA0B,EAAE,EAAE;IACnD,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,EAAE;QAC9B,OAAO;KACP;IAED,eAAe,CAAC,OAAO,CAAC,CAAC;IAEzB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;QAClB,OAAO,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,CAAC;QACvC,OAAO;KACP;IAED,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,KAAK,EAAE,OAA0B,EAAE,EAAE;IAC5D,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,IAAI,EAAE;QAC9B,OAAO;KACP;IACD,IAAI,OAAO,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE;QAC/E,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC;QACrD,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;KAC5F;SAAM;QACN,OAAO,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;KACnC;AACF,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,OAAqB,EAAE,EAAE;IAC5C,OAAO,CAAC,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;AAC3C,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,OAAqB,EAAE,EAAE;IAC3C,OAAO,CAAC,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,OAAyC,EAAgC,EAAE;IAClG,OAAO,oBAAoB,IAAI,OAAO,IAAI,MAAM,IAAI,OAAO,CAAC;AAC7D,CAAC,CAAC;AAEF,OAAO,EACN,0BAA0B,EAC1B,YAAY,EACZ,eAAe,EACf,UAAU,EACV,SAAS,GACT,CAAC","sourcesContent":["import type UI5Element from \"../UI5Element.js\";\n\ninterface IFormElement extends UI5Element {\n\t_internals?: ElementInternals;\n}\n\ninterface IFormInputElement extends IFormElement {\n\tname: string;\n\tformFormattedValue: FormData | string | null;\n\tformValidityMessage?: string;\n\tformValidity?: ValidityStateFlags;\n\tformElementAnchor?: () => HTMLElement | undefined | Promise<HTMLElement | undefined>;\n}\n\nconst attachFormElementInternals = (element: IFormInputElement | IFormElement) => {\n\telement._internals = element.attachInternals();\n\n\tif (isInputElement(element)) {\n\t\tsetFormValue(element);\n\t}\n};\n\nconst setFormValue = (element: IFormInputElement) => {\n\tif (!element._internals?.form) {\n\t\treturn;\n\t}\n\n\tsetFormValidity(element);\n\n\tif (!element.name) {\n\t\telement._internals?.setFormValue(null);\n\t\treturn;\n\t}\n\n\telement._internals.setFormValue(element.formFormattedValue);\n};\n\nconst setFormValidity = async (element: IFormInputElement) => {\n\tif (!element._internals?.form) {\n\t\treturn;\n\t}\n\tif (element.formValidity && Object.keys(element.formValidity).some(key => key)) {\n\t\tconst focusRef = await element.formElementAnchor?.();\n\t\telement._internals.setValidity(element.formValidity, element.formValidityMessage, focusRef);\n\t} else {\n\t\telement._internals.setValidity({});\n\t}\n};\n\nconst submitForm = (element: IFormElement) => {\n\telement._internals?.form?.requestSubmit();\n};\n\nconst resetForm = (element: IFormElement) => {\n\telement._internals?.form?.reset();\n};\n\nconst isInputElement = (element: IFormInputElement | IFormElement): element is IFormInputElement => {\n\treturn \"formFormattedValue\" in element && \"name\" in element;\n};\n\nexport {\n\tattachFormElementInternals,\n\tsetFormValue,\n\tsetFormValidity,\n\tsubmitForm,\n\tresetForm,\n};\n\nexport type {\n\tIFormInputElement,\n\tIFormElement,\n};\n"]}

package/dist/features/OpenUI5Support.d.ts

@@ -30,7 +30,5 @@ declare class OpenUI5Support {
     static _listenForThemeChange(): void;
     static attachListeners(): void;
     static cssVariablesLoaded(): boolean | undefined;
-    static getNextZIndex(): number | undefined;
-    static setInitialZIndex(): void;
 }
 export default OpenUI5Support;

package/dist/features/OpenUI5Support.js

@@ -1,6 +1,7 @@
+import patchPatcher from "./patchPatcher.js";
+import patchPopup from "./patchPopup.js";
 import { registerFeature } from "../FeaturesRegistry.js";
 import { setTheme } from "../config/Theme.js";
-import { getCurrentZIndex } from "../util/PopupUtils.js";
 class OpenUI5Support {
     static isAtLeastVersion116() {
         const version = window.sap.ui.version;
@@ -20,7 +21,7 @@ class OpenUI5Support {
         return new Promise(resolve => {
             window.sap.ui.require(["sap/ui/core/Core"], async (Core) => {
                 const callback = () => {
-                    let deps = ["sap/ui/core/Popup", "sap/ui/core/LocaleData"];
+                    let deps = ["sap/ui/core/Popup", "sap/ui/core/Patcher", "sap/ui/core/LocaleData"];
                     if (OpenUI5Support.isAtLeastVersion116()) { // for versions since 1.116.0 and onward, use the modular core
                         deps = [
                             ...deps,
@@ -31,8 +32,9 @@ class OpenUI5Support {
                             "sap/ui/core/date/CalendarUtils",
                         ];
                     }
-                    window.sap.ui.require(deps, (Popup) => {
-                        Popup.setInitialZIndex(getCurrentZIndex());
+                    window.sap.ui.require(deps, (Popup, Patcher) => {
+                        patchPatcher(Patcher);
+                        patchPopup(Popup);
                         resolve();
                     });
                 };
@@ -132,23 +134,6 @@ class OpenUI5Support {
         }
         return !!link.href.match(/\/css(-|_)variables\.css/);
     }
-    static getNextZIndex() {
-        if (!OpenUI5Support.isOpenUI5Detected()) {
-            return;
-        }
-        const Popup = window.sap.ui.require("sap/ui/core/Popup");
-        if (!Popup) {
-            console.warn(`The OpenUI5Support feature hasn't been initialized properly. Make sure you import the "@ui5/webcomponents-base/dist/features/OpenUI5Support.js" module before all components' modules.`); // eslint-disable-line
-        }
-        return Popup.getNextZIndex();
-    }
-    static setInitialZIndex() {
-        if (!OpenUI5Support.isOpenUI5Detected()) {
-            return;
-        }
-        const Popup = window.sap.ui.require("sap/ui/core/Popup");
-        Popup.setInitialZIndex(getCurrentZIndex());
-    }
 }
 registerFeature("OpenUI5Support", OpenUI5Support);
 export default OpenUI5Support;

package/dist/features/OpenUI5Support.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenUI5Support.js","sourceRoot":"","sources":["../../src/features/OpenUI5Support.ts"],"names":[],"mappings":"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","sourcesContent":["import { registerFeature } from \"../FeaturesRegistry.js\";\nimport { setTheme } from \"../config/Theme.js\";\nimport { getCurrentZIndex } from \"../util/PopupUtils.js\";\nimport { CLDRData } from \"../asset-registries/LocaleData.js\";\nimport type { LegacyDateCalendarCustomizing } from \"../features/LegacyDateFormats.js\";\n\ntype OpenUI5Popup = {\n\tsetInitialZIndex: (zIndex: number) => void,\n\tgetNextZIndex: () => number,\n};\n\ntype OpenUI5Core = {\n\tattachInit: (callback: () => void) => void,\n\tready: () => Promise<void>,\n\tattachThemeChanged: (callback: () => void) => void,\n\tgetConfiguration: () => OpenUI5CoreConfiguration,\n};\n\ntype OpenUI5CoreConfiguration = {\n\tgetAnimationMode: () => string,\n\tgetLanguage: () => string,\n\tgetTheme: () => string,\n\tgetThemeRoot: () => string,\n\tgetRTL: () => string,\n\tgetTimezone: () => string,\n\tgetCalendarType: () => string,\n\tgetLocale: () => string,\n\tgetFormatSettings: () => {\n\t\tgetLegacyDateCalendarCustomizing: () => LegacyDateCalendarCustomizing;\n\t}\n};\n\ntype ControlBehavior = {\n\tgetAnimationMode: () => string,\n}\n\ntype Localization = {\n\tgetLanguage: () => string,\n\tgetLanguageTag: () => string,\n\tgetRTL: () => string,\n\tgetTimezone: () => string,\n}\n\ntype LocaleData = {\n\tgetInstance: (locale: string) => Locale,\n}\n\ntype Theming = {\n\tgetThemeRoot: () => string,\n\tgetTheme: () => string,\n\tattachApplied: (callback: () => void) => void,\n}\n\ntype Formatting = {\n\tgetCalendarType: () => string,\n\tgetLegacyDateCalendarCustomizing: () => LegacyDateCalendarCustomizing,\n\tgetCustomIslamicCalendarData?: () => LegacyDateCalendarCustomizing,\n}\n\ntype CalendarUtils = {\n\tgetWeekConfigurationValues: () => {\n\t\tfirstDayOfWeek: number | undefined,\n\t},\n}\n\ntype Locale = {\n\tgetFirstDayOfWeek: () => number,\n\t_get: () => CLDRData,\n};\n\nclass OpenUI5Support {\n\tstatic isAtLeastVersion116() {\n\t\tconst version = window.sap.ui!.version as string;\n\t\tconst parts = version.split(\".\");\n\t\tif (!parts || parts.length < 2) {\n\t\t\treturn false;\n\t\t}\n\t\treturn parseInt(parts[0]) > 1 || parseInt(parts[1]) >= 116;\n\t}\n\n\tstatic isOpenUI5Detected() {\n\t\treturn typeof window.sap?.ui?.require === \"function\";\n\t}\n\n\tstatic init() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn Promise.resolve();\n\t\t}\n\n\t\treturn new Promise<void>(resolve => {\n\t\t\twindow.sap.ui.require([\"sap/ui/core/Core\"], async (Core: OpenUI5Core) => {\n\t\t\t\tconst callback = () => {\n\t\t\t\t\tlet deps: Array<string> = [\"sap/ui/core/Popup\", \"sap/ui/core/LocaleData\"];\n\t\t\t\t\tif (OpenUI5Support.isAtLeastVersion116()) { // for versions since 1.116.0 and onward, use the modular core\n\t\t\t\t\t\tdeps = [\n\t\t\t\t\t\t\t...deps,\n\t\t\t\t\t\t\t\"sap/base/i18n/Formatting\",\n\t\t\t\t\t\t\t\"sap/base/i18n/Localization\",\n\t\t\t\t\t\t\t\"sap/ui/core/ControlBehavior\",\n\t\t\t\t\t\t\t\"sap/ui/core/Theming\",\n\t\t\t\t\t\t\t\"sap/ui/core/date/CalendarUtils\",\n\t\t\t\t\t\t];\n\t\t\t\t\t}\n\t\t\t\t\twindow.sap.ui.require(deps, (Popup: OpenUI5Popup) => {\n\t\t\t\t\t\tPopup.setInitialZIndex(getCurrentZIndex());\n\t\t\t\t\t\tresolve();\n\t\t\t\t\t});\n\t\t\t\t};\n\t\t\t\tif (OpenUI5Support.isAtLeastVersion116()) {\n\t\t\t\t\tawait Core.ready();\n\t\t\t\t\tcallback();\n\t\t\t\t} else {\n\t\t\t\t\tCore.attachInit(callback);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t}\n\n\tstatic getConfigurationSettingsObject() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn {};\n\t\t}\n\n\t\tif (OpenUI5Support.isAtLeastVersion116()) {\n\t\t\tconst ControlBehavior = window.sap.ui.require(\"sap/ui/core/ControlBehavior\") as ControlBehavior;\n\t\t\tconst Localization = window.sap.ui.require(\"sap/base/i18n/Localization\") as Localization;\n\t\t\tconst Theming = window.sap.ui.require(\"sap/ui/core/Theming\") as Theming;\n\t\t\tconst Formatting = window.sap.ui.require(\"sap/base/i18n/Formatting\") as Formatting;\n\t\t\tconst CalendarUtils = window.sap.ui.require(\"sap/ui/core/date/CalendarUtils\") as CalendarUtils;\n\n\t\t\treturn {\n\t\t\t\tanimationMode: ControlBehavior.getAnimationMode(),\n\t\t\t\tlanguage: Localization.getLanguage(),\n\t\t\t\ttheme: Theming.getTheme(),\n\t\t\t\tthemeRoot: Theming.getThemeRoot(),\n\t\t\t\trtl: Localization.getRTL(),\n\t\t\t\ttimezone: Localization.getTimezone(),\n\t\t\t\tcalendarType: Formatting.getCalendarType(),\n\t\t\t\tformatSettings: {\n\t\t\t\t\tfirstDayOfWeek: CalendarUtils.getWeekConfigurationValues().firstDayOfWeek,\n\t\t\t\t\tlegacyDateCalendarCustomizing: Formatting.getCustomIslamicCalendarData?.()\n\t\t\t\t\t\t\t\t\t\t\t\t?? Formatting.getLegacyDateCalendarCustomizing?.(),\n\t\t\t\t},\n\t\t\t};\n\t\t}\n\n\t\tconst Core = window.sap.ui.require(\"sap/ui/core/Core\") as OpenUI5Core;\n\t\tconst config = Core.getConfiguration();\n\t\tconst LocaleData = window.sap.ui.require(\"sap/ui/core/LocaleData\") as LocaleData;\n\n\t\treturn {\n\t\t\tanimationMode: config.getAnimationMode(),\n\t\t\tlanguage: config.getLanguage(),\n\t\t\ttheme: config.getTheme(),\n\t\t\tthemeRoot: config.getThemeRoot(),\n\t\t\trtl: config.getRTL(),\n\t\t\ttimezone: config.getTimezone(),\n\t\t\tcalendarType: config.getCalendarType(),\n\t\t\tformatSettings: {\n\t\t\t\tfirstDayOfWeek: LocaleData ? LocaleData.getInstance(config.getLocale()).getFirstDayOfWeek() : undefined,\n\t\t\t\tlegacyDateCalendarCustomizing: config.getFormatSettings().getLegacyDateCalendarCustomizing(),\n\t\t\t},\n\t\t};\n\t}\n\n\tstatic getLocaleDataObject() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst LocaleData = window.sap.ui.require(\"sap/ui/core/LocaleData\") as LocaleData;\n\n\t\tif (OpenUI5Support.isAtLeastVersion116()) {\n\t\t\tconst Localization = window.sap.ui.require(\"sap/base/i18n/Localization\") as Localization;\n\t\t\treturn LocaleData.getInstance(Localization.getLanguageTag())._get();\n\t\t}\n\n\t\tconst Core = window.sap.ui.require(\"sap/ui/core/Core\") as OpenUI5Core;\n\t\tconst config = Core.getConfiguration();\n\t\treturn LocaleData.getInstance(config.getLocale())._get();\n\t}\n\n\tstatic _listenForThemeChange() {\n\t\tif (OpenUI5Support.isAtLeastVersion116()) {\n\t\t\tconst Theming: Theming = window.sap.ui.require(\"sap/ui/core/Theming\");\n\t\t\tTheming.attachApplied(() => {\n\t\t\t\tsetTheme(Theming.getTheme());\n\t\t\t});\n\t\t} else {\n\t\t\tconst Core = window.sap.ui.require(\"sap/ui/core/Core\") as OpenUI5Core;\n\t\t\tconst config = Core.getConfiguration();\n\t\t\tCore.attachThemeChanged(() => {\n\t\t\t\tsetTheme(config.getTheme());\n\t\t\t});\n\t\t}\n\t}\n\n\tstatic attachListeners() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn;\n\t\t}\n\n\t\tOpenUI5Support._listenForThemeChange();\n\t}\n\n\tstatic cssVariablesLoaded() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst link = [...document.head.children].find(el => el.id === \"sap-ui-theme-sap.ui.core\") as HTMLLinkElement; // more reliable than querySelector early\n\t\tif (!link) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn !!link.href.match(/\\/css(-|_)variables\\.css/);\n\t}\n\n\tstatic getNextZIndex() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst Popup = window.sap.ui.require(\"sap/ui/core/Popup\") as OpenUI5Popup;\n\n\t\tif (!Popup) {\n\t\t\tconsole.warn(`The OpenUI5Support feature hasn't been initialized properly. Make sure you import the \"@ui5/webcomponents-base/dist/features/OpenUI5Support.js\" module before all components' modules.`); // eslint-disable-line\n\t\t}\n\n\t\treturn Popup.getNextZIndex();\n\t}\n\n\tstatic setInitialZIndex() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst Popup = window.sap.ui.require(\"sap/ui/core/Popup\") as OpenUI5Popup;\n\t\tPopup.setInitialZIndex(getCurrentZIndex());\n\t}\n}\n\nregisterFeature(\"OpenUI5Support\", OpenUI5Support);\n\nexport default OpenUI5Support;\n"]}
+{"version":3,"file":"OpenUI5Support.js","sourceRoot":"","sources":["../../src/features/OpenUI5Support.ts"],"names":[],"mappings":"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","sourcesContent":["import patchPatcher from \"./patchPatcher.js\";\nimport type { OpenUI5Patcher } from \"./patchPatcher.js\";\nimport patchPopup from \"./patchPopup.js\";\nimport type { OpenUI5Popup } from \"./patchPopup.js\";\nimport { registerFeature } from \"../FeaturesRegistry.js\";\nimport { setTheme } from \"../config/Theme.js\";\nimport { CLDRData } from \"../asset-registries/LocaleData.js\";\nimport type { LegacyDateCalendarCustomizing } from \"../features/LegacyDateFormats.js\";\n\ntype OpenUI5Core = {\n\tattachInit: (callback: () => void) => void,\n\tready: () => Promise<void>,\n\tattachThemeChanged: (callback: () => void) => void,\n\tgetConfiguration: () => OpenUI5CoreConfiguration,\n};\n\ntype OpenUI5CoreConfiguration = {\n\tgetAnimationMode: () => string,\n\tgetLanguage: () => string,\n\tgetTheme: () => string,\n\tgetThemeRoot: () => string,\n\tgetRTL: () => string,\n\tgetTimezone: () => string,\n\tgetCalendarType: () => string,\n\tgetLocale: () => string,\n\tgetFormatSettings: () => {\n\t\tgetLegacyDateCalendarCustomizing: () => LegacyDateCalendarCustomizing;\n\t}\n};\n\ntype ControlBehavior = {\n\tgetAnimationMode: () => string,\n}\n\ntype Localization = {\n\tgetLanguage: () => string,\n\tgetLanguageTag: () => string,\n\tgetRTL: () => string,\n\tgetTimezone: () => string,\n}\n\ntype LocaleData = {\n\tgetInstance: (locale: string) => Locale,\n}\n\ntype Theming = {\n\tgetThemeRoot: () => string,\n\tgetTheme: () => string,\n\tattachApplied: (callback: () => void) => void,\n}\n\ntype Formatting = {\n\tgetCalendarType: () => string,\n\tgetLegacyDateCalendarCustomizing: () => LegacyDateCalendarCustomizing,\n\tgetCustomIslamicCalendarData?: () => LegacyDateCalendarCustomizing,\n}\n\ntype CalendarUtils = {\n\tgetWeekConfigurationValues: () => {\n\t\tfirstDayOfWeek: number | undefined,\n\t},\n}\n\ntype Locale = {\n\tgetFirstDayOfWeek: () => number,\n\t_get: () => CLDRData,\n};\n\nclass OpenUI5Support {\n\tstatic isAtLeastVersion116() {\n\t\tconst version = window.sap.ui!.version as string;\n\t\tconst parts = version.split(\".\");\n\t\tif (!parts || parts.length < 2) {\n\t\t\treturn false;\n\t\t}\n\t\treturn parseInt(parts[0]) > 1 || parseInt(parts[1]) >= 116;\n\t}\n\n\tstatic isOpenUI5Detected() {\n\t\treturn typeof window.sap?.ui?.require === \"function\";\n\t}\n\n\tstatic init() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn Promise.resolve();\n\t\t}\n\n\t\treturn new Promise<void>(resolve => {\n\t\t\twindow.sap.ui.require([\"sap/ui/core/Core\"], async (Core: OpenUI5Core) => {\n\t\t\t\tconst callback = () => {\n\t\t\t\t\tlet deps: Array<string> = [\"sap/ui/core/Popup\", \"sap/ui/core/Patcher\", \"sap/ui/core/LocaleData\"];\n\t\t\t\t\tif (OpenUI5Support.isAtLeastVersion116()) { // for versions since 1.116.0 and onward, use the modular core\n\t\t\t\t\t\tdeps = [\n\t\t\t\t\t\t\t...deps,\n\t\t\t\t\t\t\t\"sap/base/i18n/Formatting\",\n\t\t\t\t\t\t\t\"sap/base/i18n/Localization\",\n\t\t\t\t\t\t\t\"sap/ui/core/ControlBehavior\",\n\t\t\t\t\t\t\t\"sap/ui/core/Theming\",\n\t\t\t\t\t\t\t\"sap/ui/core/date/CalendarUtils\",\n\t\t\t\t\t\t];\n\t\t\t\t\t}\n\t\t\t\t\twindow.sap.ui.require(deps, (Popup: OpenUI5Popup, Patcher: OpenUI5Patcher) => {\n\t\t\t\t\t\tpatchPatcher(Patcher);\n\t\t\t\t\t\tpatchPopup(Popup);\n\t\t\t\t\t\tresolve();\n\t\t\t\t\t});\n\t\t\t\t};\n\t\t\t\tif (OpenUI5Support.isAtLeastVersion116()) {\n\t\t\t\t\tawait Core.ready();\n\t\t\t\t\tcallback();\n\t\t\t\t} else {\n\t\t\t\t\tCore.attachInit(callback);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t}\n\n\tstatic getConfigurationSettingsObject() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn {};\n\t\t}\n\n\t\tif (OpenUI5Support.isAtLeastVersion116()) {\n\t\t\tconst ControlBehavior = window.sap.ui.require(\"sap/ui/core/ControlBehavior\") as ControlBehavior;\n\t\t\tconst Localization = window.sap.ui.require(\"sap/base/i18n/Localization\") as Localization;\n\t\t\tconst Theming = window.sap.ui.require(\"sap/ui/core/Theming\") as Theming;\n\t\t\tconst Formatting = window.sap.ui.require(\"sap/base/i18n/Formatting\") as Formatting;\n\t\t\tconst CalendarUtils = window.sap.ui.require(\"sap/ui/core/date/CalendarUtils\") as CalendarUtils;\n\n\t\t\treturn {\n\t\t\t\tanimationMode: ControlBehavior.getAnimationMode(),\n\t\t\t\tlanguage: Localization.getLanguage(),\n\t\t\t\ttheme: Theming.getTheme(),\n\t\t\t\tthemeRoot: Theming.getThemeRoot(),\n\t\t\t\trtl: Localization.getRTL(),\n\t\t\t\ttimezone: Localization.getTimezone(),\n\t\t\t\tcalendarType: Formatting.getCalendarType(),\n\t\t\t\tformatSettings: {\n\t\t\t\t\tfirstDayOfWeek: CalendarUtils.getWeekConfigurationValues().firstDayOfWeek,\n\t\t\t\t\tlegacyDateCalendarCustomizing: Formatting.getCustomIslamicCalendarData?.()\n\t\t\t\t\t\t\t\t\t\t\t\t?? Formatting.getLegacyDateCalendarCustomizing?.(),\n\t\t\t\t},\n\t\t\t};\n\t\t}\n\n\t\tconst Core = window.sap.ui.require(\"sap/ui/core/Core\") as OpenUI5Core;\n\t\tconst config = Core.getConfiguration();\n\t\tconst LocaleData = window.sap.ui.require(\"sap/ui/core/LocaleData\") as LocaleData;\n\n\t\treturn {\n\t\t\tanimationMode: config.getAnimationMode(),\n\t\t\tlanguage: config.getLanguage(),\n\t\t\ttheme: config.getTheme(),\n\t\t\tthemeRoot: config.getThemeRoot(),\n\t\t\trtl: config.getRTL(),\n\t\t\ttimezone: config.getTimezone(),\n\t\t\tcalendarType: config.getCalendarType(),\n\t\t\tformatSettings: {\n\t\t\t\tfirstDayOfWeek: LocaleData ? LocaleData.getInstance(config.getLocale()).getFirstDayOfWeek() : undefined,\n\t\t\t\tlegacyDateCalendarCustomizing: config.getFormatSettings().getLegacyDateCalendarCustomizing(),\n\t\t\t},\n\t\t};\n\t}\n\n\tstatic getLocaleDataObject() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst LocaleData = window.sap.ui.require(\"sap/ui/core/LocaleData\") as LocaleData;\n\n\t\tif (OpenUI5Support.isAtLeastVersion116()) {\n\t\t\tconst Localization = window.sap.ui.require(\"sap/base/i18n/Localization\") as Localization;\n\t\t\treturn LocaleData.getInstance(Localization.getLanguageTag())._get();\n\t\t}\n\n\t\tconst Core = window.sap.ui.require(\"sap/ui/core/Core\") as OpenUI5Core;\n\t\tconst config = Core.getConfiguration();\n\t\treturn LocaleData.getInstance(config.getLocale())._get();\n\t}\n\n\tstatic _listenForThemeChange() {\n\t\tif (OpenUI5Support.isAtLeastVersion116()) {\n\t\t\tconst Theming: Theming = window.sap.ui.require(\"sap/ui/core/Theming\");\n\t\t\tTheming.attachApplied(() => {\n\t\t\t\tsetTheme(Theming.getTheme());\n\t\t\t});\n\t\t} else {\n\t\t\tconst Core = window.sap.ui.require(\"sap/ui/core/Core\") as OpenUI5Core;\n\t\t\tconst config = Core.getConfiguration();\n\t\t\tCore.attachThemeChanged(() => {\n\t\t\t\tsetTheme(config.getTheme());\n\t\t\t});\n\t\t}\n\t}\n\n\tstatic attachListeners() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn;\n\t\t}\n\n\t\tOpenUI5Support._listenForThemeChange();\n\t}\n\n\tstatic cssVariablesLoaded() {\n\t\tif (!OpenUI5Support.isOpenUI5Detected()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst link = [...document.head.children].find(el => el.id === \"sap-ui-theme-sap.ui.core\") as HTMLLinkElement; // more reliable than querySelector early\n\t\tif (!link) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn !!link.href.match(/\\/css(-|_)variables\\.css/);\n\t}\n}\n\nregisterFeature(\"OpenUI5Support\", OpenUI5Support);\n\nexport default OpenUI5Support;\n"]}

package/dist/features/patchPatcher.d.ts

@@ -0,0 +1,11 @@
+type OpenUI5Patcher = {
+    prototype: {
+        _mAttributes: {
+            [key: string]: string;
+        };
+        openEnd: () => OpenUI5Patcher;
+    };
+};
+declare const patchPatcher: (Patcher: OpenUI5Patcher) => void;
+export default patchPatcher;
+export type { OpenUI5Patcher };

package/dist/features/patchPatcher.js

@@ -0,0 +1,11 @@
+const patchPatcher = (Patcher) => {
+    const origOpenEnd = Patcher.prototype.openEnd;
+    Patcher.prototype.openEnd = function openEnd() {
+        if (this._mAttributes.popover) {
+            delete this._mAttributes.popover; // The "popover" attribute will be managed externally, don't let Patcher remove it
+        }
+        return origOpenEnd.apply(this);
+    };
+};
+export default patchPatcher;
+//# sourceMappingURL=patchPatcher.js.map

package/dist/features/patchPatcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"patchPatcher.js","sourceRoot":"","sources":["../../src/features/patchPatcher.ts"],"names":[],"mappings":"AAOA,MAAM,YAAY,GAAG,CAAC,OAAuB,EAAE,EAAE;IAChD,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC;IAC9C,OAAO,CAAC,SAAS,CAAC,OAAO,GAAG,SAAS,OAAO;QAC3C,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAC9B,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,kFAAkF;SACpH;QACD,OAAO,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["type OpenUI5Patcher = {\n\tprototype: {\n\t\t_mAttributes: { [key: string]: string },\n\t\topenEnd: () => OpenUI5Patcher,\n\t}\n};\n\nconst patchPatcher = (Patcher: OpenUI5Patcher) => {\n\tconst origOpenEnd = Patcher.prototype.openEnd;\n\tPatcher.prototype.openEnd = function openEnd() {\n\t\tif (this._mAttributes.popover) {\n\t\t\tdelete this._mAttributes.popover; // The \"popover\" attribute will be managed externally, don't let Patcher remove it\n\t\t}\n\t\treturn origOpenEnd.apply(this);\n\t};\n};\n\nexport default patchPatcher;\nexport type { OpenUI5Patcher };\n"]}

package/dist/features/patchPopup.d.ts

@@ -0,0 +1,14 @@
+type Element = {
+    getDomRef: () => HTMLElement | null;
+};
+type OpenUI5Popup = {
+    prototype: {
+        open: (...args: any[]) => void;
+        _closed: (...args: any[]) => void;
+        getOpenState: () => "CLOSED" | "CLOSING" | "OPEN" | "OPENING";
+        getContent: () => Element;
+    };
+};
+declare const patchPopup: (Popup: OpenUI5Popup) => void;
+export default patchPopup;
+export type { OpenUI5Popup };

package/dist/features/patchPopup.js

@@ -0,0 +1,50 @@
+const openNativePopover = (domRef) => {
+    domRef.setAttribute("popover", "manual");
+    domRef.showPopover();
+};
+const closeNativePopover = (domRef) => {
+    if (domRef.hasAttribute("popover")) {
+        domRef.hidePopover();
+        domRef.removeAttribute("popover");
+    }
+};
+const patchOpen = (Popup) => {
+    const origOpen = Popup.prototype.open;
+    Popup.prototype.open = function open(...args) {
+        origOpen.apply(this, args); // call open first to initiate opening
+        const topLayerAlreadyInUse = !!document.body.querySelector(":popover-open"); // check if there is already something in the top layer
+        const openingInitiated = ["OPENING", "OPEN"].includes(this.getOpenState());
+        if (openingInitiated && topLayerAlreadyInUse) {
+            const element = this.getContent();
+            if (element) {
+                const domRef = element.getDomRef();
+                if (domRef) {
+                    openNativePopover(domRef);
+                }
+            }
+        }
+    };
+};
+const patchClosed = (Popup) => {
+    const _origClosed = Popup.prototype._closed;
+    Popup.prototype._closed = function _closed(...args) {
+        const element = this.getContent();
+        const domRef = element.getDomRef();
+        _origClosed.apply(this, args); // only then call _close
+        if (domRef) {
+            closeNativePopover(domRef); // unset the popover attribute and close the native popover, but only if still in DOM
+        }
+    };
+};
+const createGlobalStyles = () => {
+    const stylesheet = new CSSStyleSheet();
+    stylesheet.replaceSync(`.sapMPopup-CTX:popover-open { inset: unset; }`);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+};
+const patchPopup = (Popup) => {
+    patchOpen(Popup); // Popup.prototype.open
+    patchClosed(Popup); // Popup.prototype._closed
+    createGlobalStyles(); // Ensures correct popover positioning by OpenUI5 (otherwise 0,0 is the center of the screen)
+};
+export default patchPopup;
+//# sourceMappingURL=patchPopup.js.map