npm - @ui5/webcomponents - Versions diffs - 2.22.1-rc.0 → 2.23.0-rc.1 - Mend

@ui5/webcomponents 2.22.1-rc.0 → 2.23.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (155) hide show

package/dist/FormTemplate.js CHANGED Viewed

@@ -1,7 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
 import Title from "./Title.js";
 export default function FormTemplate() {
-    return (_jsxs("div", { class: "ui5-form-root", role: this.effectiveAccessibleRole, "aria-label": this.effectiveAccessibleName, "aria-labelledby": this.effectiveАccessibleNameRef, children: [this.hasHeader &&
+    return (_jsxs("div", { class: "ui5-form-root", role: this.effectiveAccessibleRole, "aria-label": this.effectiveAccessibleName, "aria-labelledby": this.effectiveАccessibleNameRef, style: {
+            "--ui5-form-columns-s": this.columnsS,
+            "--ui5-form-columns-m": this.columnsM,
+            "--ui5-form-columns-l": this.columnsL,
+            "--ui5-form-columns-xl": this.columnsXl,
+            "--ui5-form-item-layout-S": this.getFormItemLayout("S"),
+            "--ui5-form-item-layout-M": this.getFormItemLayout("M"),
+            "--ui5-form-item-layout-L": this.getFormItemLayout("L"),
+            "--ui5-form-item-layout-XL": this.getFormItemLayout("XL"),
+        }, children: [this.hasHeader &&
                 _jsx("div", { class: "ui5-form-header", part: "header", children: this.hasCustomHeader ?
                         _jsx("slot", { name: "header" })
                         :
@@ -10,12 +19,11 @@ export default function FormTemplate() {
 function groupedItemsLayout() {
     return _jsx("div", { class: "ui5-form-layout", part: "layout", children: this.groupItemsInfo.map(groupItemInfo => {
             const groupItem = groupItemInfo.groupItem;
-            return _jsx("div", { class: {
-                    "ui5-form-column": true,
-                    [`ui5-form-column-spanL-${groupItem.colsL}`]: true,
-                    [`ui5-form-column-spanXL-${groupItem.colsXl}`]: true,
-                    [`ui5-form-column-spanM-${groupItem.colsM}`]: true,
-                    [`ui5-form-column-spanS-${groupItem.colsS}`]: true,
+            return _jsx("div", { class: "ui5-form-column", style: {
+                    "--ui5-form-column-span-s": groupItem.colsS,
+                    "--ui5-form-column-span-m": groupItem.colsM,
+                    "--ui5-form-column-span-l": groupItem.colsL,
+                    "--ui5-form-column-span-xl": groupItem.colsXl,
                 }, part: "column", children: _jsxs("div", { class: "ui5-form-group", role: groupItemInfo.role, "aria-labelledby": groupItemInfo.accessibleNameRef, "aria-label": groupItemInfo.accessibleName, children: [groupItem.headerText &&
                             _jsx("div", { class: "ui5-form-group-heading", children: _jsx(Title, { id: `${groupItem._id}-group-header-text`, level: groupItem.headerLevel, size: "H6", children: groupItem.headerText }) }), this.accessibleMode === "Edit" ?
                             _jsx("div", { class: "ui5-form-group-layout", children: _jsx("slot", { name: groupItem._individualSlot }) })
@@ -24,18 +32,21 @@ function groupedItemsLayout() {
         }) });
 }
 function standaloneItemsLayout() {
-    return (this.accessibleMode === "Edit" ?
-        _jsx("div", { class: "ui5-form-layout", part: "layout", children: standaloneItemsLayoutContent.call(this) })
-        :
-            _jsx("dl", { class: "ui5-form-layout", part: "layout", children: standaloneItemsLayoutContent.call(this) }));
+    const column = _jsx("div", { class: "ui5-form-column", style: {
+            "--ui5-form-column-span-s": this.columnsS,
+            "--ui5-form-column-span-m": this.columnsM,
+            "--ui5-form-column-span-l": this.columnsL,
+            "--ui5-form-column-span-xl": this.columnsXl,
+        }, part: "column", children: this.accessibleMode === "Edit" ?
+            _jsx("div", { class: "ui5-form-group-layout", children: standaloneItemsLayoutContent.call(this) })
+            :
+                _jsx("dl", { class: "ui5-form-group-layout", children: standaloneItemsLayoutContent.call(this) }) });
+    return _jsx("div", { class: "ui5-form-layout", part: "layout", children: column });
 }
 function standaloneItemsLayoutContent() {
     return this.itemsInfo.map(itemInfo => {
         const item = itemInfo.item;
-        return (_jsx("div", { class: {
-                "ui5-form-item": true,
-                [`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,
-            }, children: _jsx("slot", { name: item._individualSlot }) }));
+        return (_jsx("div", { class: "ui5-form-item", children: _jsx("slot", { name: item._individualSlot }) }));
     });
 }
 //# sourceMappingURL=FormTemplate.js.map

package/dist/FormTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormTemplate.js","sourceRoot":"","sources":["../src/FormTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,OAAO,CACN,eACC,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,IAAI,CAAC,uBAAuB,gBACtB,IAAI,CAAC,uBAAuB,qBACvB,IAAI,CAAC,0BAA0B,~~aAE/C~~,IAAI,CAAC,SAAS;gBACd,cAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,YACxC,IAAI,CAAC,eAAe,CAAC,CAAC;wBACtB,eAAM,IAAI,EAAC,QAAQ,GAAQ;wBAC3B,CAAC;4BACD,KAAC,KAAK,IAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,YAAG,IAAI,CAAC,UAAU,GAAS,GAEpF,~~EAGL~~,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,~~IAClF~~,CACN,CAAC;AACH,CAAC;AAED,SAAS,kBAAkB;IAC1B,OAAO,cAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,~~YAC9C~~,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;~~YACzC~~,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC;YAC1C,OAAO,cACN,KAAK,~~EAAE;oBACN~~,iBAAiB,EAAE~~,IAAI~~;~~oBACvB~~,~~CAAC~~,~~yBAAyB~~,SAAS,CAAC,KAAK,~~EAAE~~,~~CAAC,~~EAAE,~~IAAI;oBAClD,CAAC,0BAA0B,~~SAAS,CAAC,~~MAAM~~,~~EAAE~~,~~CAAC,~~EAAE,~~IAAI;oBACpD,CAAC,yBAAyB,~~SAAS,CAAC,KAAK,~~EAAE~~,~~CAAC,~~EAAE,~~IAAI;oBAClD,CAAC,yBAAyB,~~SAAS,CAAC,~~KAAK,EAAE,CAAC,EAAE,IAAI~~;~~iBAClD~~,EACD,IAAI,EAAC,QAAQ,YAEb,eAAK,KAAK,EAAC,gBAAgB,EAC1B,IAAI,EAAE,aAAa,CAAC,IAAI,qBACP,aAAa,CAAC,iBAAiB,gBACpC,aAAa,CAAC,cAAc,~~aAEtC~~,SAAS,CAAC,UAAU;~~4BACrB~~,cAAK,KAAK,EAAC,wBAAwB,YAClC,KAAC,KAAK,IAAC,EAAE,EAAE,GAAG,SAAS,CAAC,GAAG,oBAAoB,EAAE,KAAK,EAAE,SAAS,CAAC,WAAW,EAAE,IAAI,EAAC,IAAI,YAAE,SAAS,CAAC,UAAU,GAAS,GAClH,~~EAEL~~,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,CAAC;~~4BACjC~~,cAAK,KAAK,EAAC,uBAAuB,YACjC,eAAM,IAAI,EAAE,SAAS,CAAC,eAAe,GAAS,GACzC;4BACN,CAAC;gCACD,aAAI,KAAK,EAAC,uBAAuB,qBAAkB,aAAa,CAAC,sBAAsB,gBAAc,aAAa,CAAC,mBAAmB,YACrI,eAAM,IAAI,EAAE,SAAS,CAAC,eAAe,GAAS,GAC1C,IAED,GACD,CAAC;QACR,CAAC,CAAC,GACG,CAAC;AACR,CAAC;AAED,SAAS,qBAAqB;IAC7B,~~OAAO~~,~~CACN~~,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,CAAC;~~QAC/B~~,cAAK,KAAK,EAAC,~~iBAAiB~~,~~EAAC~~,IAAI,EAAC,~~QAAQ~~,~~YACvC~~,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC~~;QACN~~,CAAC;~~YACD~~,~~aAAI~~,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,~~YACtC~~,~~4BAA4B~~,~~CAAC~~,~~IAAI,~~CAAC~~,IAAI,CAAC,GACrC,CACN,CAAC~~;~~AACH~~,CAAC;AAED,SAAS,4BAA4B;IACpC,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;QACpC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;QAC3B,OAAO,CACN,cAAK,KAAK,~~EAAE;gBACX~~,eAAe,~~EAAE~~,~~IAAI;gBACrB,CAAC,sBAAsB,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;aACxE,YAEA,~~eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,~~GACpC~~,~~CACN~~,CAAC;IACH,CAAC,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import type Form from \"./Form.js\";\nimport Title from \"./Title.js\";\n\nexport default function FormTemplate(this: Form) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-form-root\"\n\t\t\trole={this.effectiveAccessibleRole}\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-labelledby={this.effectiveАccessibleNameRef}\n\t\t>\n\t\t\t{this.hasHeader &&\n\t\t\t\t<div class=\"ui5-form-header\" part=\"header\">\n\t\t\t\t\t{this.hasCustomHeader ?\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<Title id={`${this._id}-header-text`} level={this.headerLevel}>{this.headerText}</Title>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{ this.hasGroupItems ? groupedItemsLayout.call(this) : standaloneItemsLayout.call(this) }\n\t\t</div>\n\t);\n}\n\nfunction groupedItemsLayout(this: Form) {\n\treturn <div class=\"ui5-form-layout\" part=\"layout\">\n\t\t{ this.groupItemsInfo.map(groupItemInfo => {\n\t\t\tconst groupItem = groupItemInfo.groupItem;\n\t\t\treturn <div\n\t\t\t\tclass~~={{~~\n\t\t\t\t\~~t\"ui5-form-column\": true,\~~n\t\t\t\t\t[`ui5-form-column-~~spanL-${~~groupItem.~~colsL}`]: true~~,\n\t\t\t\t\t[`ui5-form-column-~~spanXL-${~~groupItem.~~colsXl}`]: true~~,\n\t\t\t\t\t[`ui5-form-column-~~spanM-${~~groupItem.~~colsM}`]: true~~,\n\t\t\t\t\t[`ui5-form-column-~~spanS-${~~groupItem.~~colsS}`]: true~~,\n\t\t\t\t}}\n\t\t\t\tpart=\"column\"\n\t\t\t>\n\t\t\t\t<div class=\"ui5-form-group\"\n\t\t\t\t\trole={groupItemInfo.role}\n\t\t\t\t\taria-labelledby={groupItemInfo.accessibleNameRef}\n\t\t\t\t\taria-label={groupItemInfo.accessibleName}\n\t\t\t\t>\n\t\t\t\t\t{ groupItem.headerText &&\n\t\t\t\t\t\t<div class=\"ui5-form-group-heading\">\n\t\t\t\t\t\t\t<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size=\"H6\">{groupItem.headerText}</Title>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t{ this.accessibleMode === \"Edit\" ?\n\t\t\t\t\t\t<div class=\"ui5-form-group-layout\">\n\t\t\t\t\t\t\t<slot name={groupItem._individualSlot}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<dl class=\"ui5-form-group-layout\" aria-labelledby={groupItemInfo.accessibleNameRefInner} aria-label={groupItemInfo.accessibleNameInner}>\n\t\t\t\t\t\t\t<slot name={groupItem._individualSlot}></slot>\n\t\t\t\t\t\t</dl>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>;\n\t\t})}\n\t</div>;\n}\n\nfunction standaloneItemsLayout(this: Form) {\n\~~treturn~~ (\n\t\~~tthis~~.accessibleMode === \"Edit\" ?\n\t\t\t<div class=\"ui5-form-layout\" ~~part=\"layout\"~~>\n\t\t\t\t{ standaloneItemsLayoutContent.call(this) }\n\t\t\t</div>\n\t\t\t:\n\t\t\t<dl class=\"ui5-form-layout\" ~~part=\"layout\"~~>\n\t\t\t\t{ standaloneItemsLayoutContent.call(this) }\n\t\t\t</dl>\n\t~~);\~~n}\n\nfunction standaloneItemsLayoutContent(this: Form) {\n\treturn this.itemsInfo.map(itemInfo => {\n\t\tconst item = itemInfo.item;\n\t\treturn (\n\t\t\t<div class~~={{\n\t\t\t\t\~~"ui5-form-item\"~~: true,\n\t\t\t\t[`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,\n\t\t\t}}\n\t\t\t~~>\n\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t</div>\n\t\t);\n\t});\n}\n"]}
1	+ {"version":3,"file":"FormTemplate.js","sourceRoot":"","sources":["../src/FormTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,OAAO,CACN,eACC,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,IAAI,CAAC,uBAAuB,gBACtB,IAAI,CAAC,uBAAuB,qBACvB,IAAI,CAAC,0BAA0B,EAChD,KAAK,EAAE;YACN,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;YACrC,uBAAuB,EAAE,IAAI,CAAC,SAAS;YACvC,0BAA0B,EAAE,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC;YACvD,0BAA0B,EAAE,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC;YACvD,0BAA0B,EAAE,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC;YACvD,2BAA2B,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;SACzD,aAEA,IAAI,CAAC,SAAS;gBACd,cAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,YACxC,IAAI,CAAC,eAAe,CAAC,CAAC;wBACtB,eAAM,IAAI,EAAC,QAAQ,GAAQ;wBAC3B,CAAC;4BACD,KAAC,KAAK,IAAC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,YAAG,IAAI,CAAC,UAAU,GAAS,GAEpF,EAGN,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,IACjF,CACN,CAAC;AACH,CAAC;AAED,SAAS,kBAAkB;IAC1B,OAAO,cAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,YAC/C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE;YACxC,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAC;YAC1C,OAAO,cACN,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE;oBACN,0BAA0B,EAAE,SAAS,CAAC,KAAK;oBAC3C,0BAA0B,EAAE,SAAS,CAAC,KAAK;oBAC3C,0BAA0B,EAAE,SAAS,CAAC,KAAK;oBAC3C,2BAA2B,EAAE,SAAS,CAAC,MAAM;iBAC7C,EACD,IAAI,EAAC,QAAQ,YAEb,eAAK,KAAK,EAAC,gBAAgB,EAC1B,IAAI,EAAE,aAAa,CAAC,IAAI,qBACP,aAAa,CAAC,iBAAiB,gBACpC,aAAa,CAAC,cAAc,aAEvC,SAAS,CAAC,UAAU;4BACpB,cAAK,KAAK,EAAC,wBAAwB,YAClC,KAAC,KAAK,IAAC,EAAE,EAAE,GAAG,SAAS,CAAC,GAAG,oBAAoB,EAAE,KAAK,EAAE,SAAS,CAAC,WAAW,EAAE,IAAI,EAAC,IAAI,YAAE,SAAS,CAAC,UAAU,GAAS,GAClH,EAEN,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,CAAC;4BAChC,cAAK,KAAK,EAAC,uBAAuB,YACjC,eAAM,IAAI,EAAE,SAAS,CAAC,eAAe,GAAS,GACzC;4BACN,CAAC;gCACD,aAAI,KAAK,EAAC,uBAAuB,qBAAkB,aAAa,CAAC,sBAAsB,gBAAc,aAAa,CAAC,mBAAmB,YACrI,eAAM,IAAI,EAAE,SAAS,CAAC,eAAe,GAAS,GAC1C,IAED,GACD,CAAC;QACR,CAAC,CAAC,GACG,CAAC;AACR,CAAC;AAED,SAAS,qBAAqB;IAC7B,MAAM,MAAM,GAAG,cACd,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE;YACN,0BAA0B,EAAE,IAAI,CAAC,QAAQ;YACzC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;YACzC,0BAA0B,EAAE,IAAI,CAAC,QAAQ;YACzC,2BAA2B,EAAE,IAAI,CAAC,SAAS;SAC3C,EACD,IAAI,EAAC,QAAQ,YAEZ,IAAI,CAAC,cAAc,KAAK,MAAM,CAAC,CAAC;YAChC,cAAK,KAAK,EAAC,uBAAuB,YAChC,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,GACnC;YACN,CAAC;gBACD,aAAI,KAAK,EAAC,uBAAuB,YAC/B,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,GACpC,GAED,CAAC;IAEP,OAAO,cAAK,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,YAAE,MAAM,GAAO,CAAC;AAClE,CAAC;AAED,SAAS,4BAA4B;IACpC,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;QACpC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC;QAC3B,OAAO,CACN,cAAK,KAAK,EAAC,eAAe,YACzB,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,GACnC,CACP,CAAC;IACH,CAAC,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import type Form from \"./Form.js\";\nimport Title from \"./Title.js\";\n\nexport default function FormTemplate(this: Form) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-form-root\"\n\t\t\trole={this.effectiveAccessibleRole}\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-labelledby={this.effectiveАccessibleNameRef}\n\t\t\tstyle={{\n\t\t\t\t\"--ui5-form-columns-s\": this.columnsS,\n\t\t\t\t\"--ui5-form-columns-m\": this.columnsM,\n\t\t\t\t\"--ui5-form-columns-l\": this.columnsL,\n\t\t\t\t\"--ui5-form-columns-xl\": this.columnsXl,\n\t\t\t\t\"--ui5-form-item-layout-S\": this.getFormItemLayout(\"S\"),\n\t\t\t\t\"--ui5-form-item-layout-M\": this.getFormItemLayout(\"M\"),\n\t\t\t\t\"--ui5-form-item-layout-L\": this.getFormItemLayout(\"L\"),\n\t\t\t\t\"--ui5-form-item-layout-XL\": this.getFormItemLayout(\"XL\"),\n\t\t\t}}\n\t\t>\n\t\t\t{this.hasHeader &&\n\t\t\t\t<div class=\"ui5-form-header\" part=\"header\">\n\t\t\t\t\t{this.hasCustomHeader ?\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<Title id={`${this._id}-header-text`} level={this.headerLevel}>{this.headerText}</Title>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{this.hasGroupItems ? groupedItemsLayout.call(this) : standaloneItemsLayout.call(this)}\n\t\t</div>\n\t);\n}\n\nfunction groupedItemsLayout(this: Form) {\n\treturn <div class=\"ui5-form-layout\" part=\"layout\">\n\t\t{this.groupItemsInfo.map(groupItemInfo => {\n\t\t\tconst groupItem = groupItemInfo.groupItem;\n\t\t\treturn <div\n\t\t\t\tclass=\"ui5-form-column\"\n\t\t\t\tstyle={{\n\t\t\t\t\t\"--ui5-form-column-span-s\": groupItem.colsS,\n\t\t\t\t\t\"--ui5-form-column-span-m\": groupItem.colsM,\n\t\t\t\t\t\"--ui5-form-column-span-l\": groupItem.colsL,\n\t\t\t\t\t\"--ui5-form-column-span-xl\": groupItem.colsXl,\n\t\t\t\t}}\n\t\t\t\tpart=\"column\"\n\t\t\t>\n\t\t\t\t<div class=\"ui5-form-group\"\n\t\t\t\t\trole={groupItemInfo.role}\n\t\t\t\t\taria-labelledby={groupItemInfo.accessibleNameRef}\n\t\t\t\t\taria-label={groupItemInfo.accessibleName}\n\t\t\t\t>\n\t\t\t\t\t{groupItem.headerText &&\n\t\t\t\t\t\t<div class=\"ui5-form-group-heading\">\n\t\t\t\t\t\t\t<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size=\"H6\">{groupItem.headerText}</Title>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t{this.accessibleMode === \"Edit\" ?\n\t\t\t\t\t\t<div class=\"ui5-form-group-layout\">\n\t\t\t\t\t\t\t<slot name={groupItem._individualSlot}></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t:\n\t\t\t\t\t\t<dl class=\"ui5-form-group-layout\" aria-labelledby={groupItemInfo.accessibleNameRefInner} aria-label={groupItemInfo.accessibleNameInner}>\n\t\t\t\t\t\t\t<slot name={groupItem._individualSlot}></slot>\n\t\t\t\t\t\t</dl>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>;\n\t\t})}\n\t</div>;\n}\n\nfunction standaloneItemsLayout(this: Form) {\n\tconst column = <div\n\t\tclass=\"ui5-form-column\"\n\t\tstyle={{\n\t\t\t\"--ui5-form-column-span-s\": this.columnsS,\n\t\t\t\"--ui5-form-column-span-m\": this.columnsM,\n\t\t\t\"--ui5-form-column-span-l\": this.columnsL,\n\t\t\t\"--ui5-form-column-span-xl\": this.columnsXl,\n\t\t}}\n\t\tpart=\"column\"\n\t>\n\t\t{this.accessibleMode === \"Edit\" ?\n\t\t\t<div class=\"ui5-form-group-layout\">\n\t\t\t\t{standaloneItemsLayoutContent.call(this)}\n\t\t\t</div>\n\t\t\t:\n\t\t\t<dl class=\"ui5-form-group-layout\">\n\t\t\t\t{standaloneItemsLayoutContent.call(this)}\n\t\t\t</dl>\n\t\t}\n\t</div>;\n\n\treturn <div class=\"ui5-form-layout\" part=\"layout\">{column}</div>;\n}\n\nfunction standaloneItemsLayoutContent(this: Form) {\n\treturn this.itemsInfo.map(itemInfo => {\n\t\tconst item = itemInfo.item;\n\t\treturn (\n\t\t\t<div class=\"ui5-form-item\">\n\t\t\t\t<slot name={item._individualSlot}></slot>\n\t\t\t</div >\n\t\t);\n\t});\n}\n"]}

package/dist/Icon.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type IconDesign from "./types/IconDesign.js";
@@ -142,6 +143,23 @@ declare class Icon extends UI5Element implements IIcon {
      * @since 2.0.0
      */
     mode: `${IconMode}`;
+    /**
+     * Defines the font icon to be used as an icon.
+     * Intended for font-based icon libraries where
+     * the application loads the font and provides a slotted element with the unicode character.
+     * When this slot is used, the component renders a `<span>` instead of an `<svg>`.
+     * Accessibility is fully delegated to the application — set `accessible-name` and `mode` explicitly.
+     *
+     * **Example:**
+     * ```html
+     * <ui5-icon mode="Image" accessible-name="Home">
+     *   <i class="fa fa-home" slot="fontIcon"></i>
+     * </ui5-icon>
+     * ```
+     * @public
+     * @since 2.23.0
+     */
+    fontIcon: Slot<HTMLElement>;
     /**
      * @private
      */
@@ -175,6 +193,7 @@ declare class Icon extends UI5Element implements IIcon {
     get effectiveAccessibleRole(): "button" | "presentation" | "img";
     onEnterDOM(): void;
     onBeforeRendering(): Promise<void>;
+    get hasFontIcon(): boolean;
     get hasIconTooltip(): string | false | undefined;
     _getAriaTypeDescription(): string;
     get accessibilityInfo(): {

package/dist/Icon.js CHANGED Viewed

@@ -10,6 +10,7 @@ import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import { getIconData, getIconDataSync } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -177,6 +178,16 @@ let Icon = Icon_1 = class Icon extends UI5Element {
         }
     }
     async onBeforeRendering() {
+        if (this.fontIcon.length) {
+            // Font-based icon via slot — skip registry, accessibility is app's responsibility
+            if (!this.accessibleName) {
+                this.effectiveAccessibleName = undefined;
+            }
+            else {
+                this.effectiveAccessibleName = this.accessibleName;
+            }
+            return;
+        }
         const name = this.name;
         if (!name) {
             return;
@@ -226,6 +237,9 @@ let Icon = Icon_1 = class Icon extends UI5Element {
             this.effectiveAccessibleName = undefined;
         }
     }
+    get hasFontIcon() {
+        return this.fontIcon.length > 0;
+    }
     get hasIconTooltip() {
         return this.showTooltip && this.effectiveAccessibleName;
     }
@@ -265,6 +279,9 @@ __decorate([
 __decorate([
     property()
 ], Icon.prototype, "mode", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], Icon.prototype, "fontIcon", void 0);
 __decorate([
     property({ type: Array, noAttribute: true })
 ], Icon.prototype, "pathData", void 0);

package/dist/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRender from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type { IconData, UnsafeIconData } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getIconData, getIconDataSync } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport IconTemplate from \"./IconTemplate.js\";\nimport type IconDesign from \"./types/IconDesign.js\";\nimport IconMode from \"./types/IconMode.js\";\n\nimport { ICON_ARIA_TYPE_IMAGE, ICON_ARIA_TYPE_INTERACTIVE } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport iconCss from \"./generated/themes/Icon.css.js\";\n\n/*\n Interface for components that represent an icon, usable in numerous higher-order components\n * @public\n /\ninterface IIcon extends HTMLElement { }\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\n\n/\n @class\n * ### Overview\n \n The `ui5-icon` component represents an SVG icon.\n * There are two main scenarios how the `ui5-icon` component is used:\n * as a purely decorative element,\n * or as an interactive element that can be focused and clicked.\n \n ### Usage\n \n 1. Get familiar with the icons collections.\n \n Before displaying an icon, you need to explore the icons collections to find and import the desired icon.\n \n Currently there are 3 icons collection, available as 3 npm packages:\n \n - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n * - [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n \n 2. After exploring the icons collections, add one or more of the packages as dependencies to your project.\n \n `npm i @ui5/webcomponents-icons`\n * `npm i @ui5/webcomponents-icons-tnt`\n * `npm i @ui5/webcomponents-icons-business-suite`\n \n 3. Then, import the desired icon.\n \n `import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n \n For Example:\n \n For the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n \n `import \"@ui5/webcomponents-icons/dist/employee.js\";`\n \n For the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n \n `import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n \n For the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n \n `import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n \n 4. Display the icon using the `ui5-icon` web component.\n * Set the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\n * and the icon name to the `name` property.\n \n `<ui5-icon name=\"employee\"></ui5-icon>`\n * `<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n * `<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n \n ### Keyboard Handling\n \n - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n \n ### ES6 Module Import\n \n `import \"@ui5/webcomponents/dist/Icon.js\";`\n * @csspart root - Used to style the outermost wrapper of the `ui5-icon`.\n * @constructor\n * @extends UI5Element\n * @implements {IIcon}\n * @public\n /\n@customElement({\n\ttag: \"ui5-icon\",\n\tlanguageAware: true,\n\tthemeAware: true,\n\trenderer: jsxRender,\n\ttemplate: IconTemplate,\n\tstyles: iconCss,\n})\n/\n Fired when the component is activated by mouse/touch, keyboard (Enter or Space),\n * or screen reader virtual cursor activation.\n \n Note: The event will not be fired if the `mode` property is set to `Decorative` or `Image`.\n * @public\n * @since 2.11.0\n /\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Icon extends UI5Element implements IIcon {\n\teventDetails!: {\n\t\tclick: void\n\t}\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/\n\t Defines the component semantic design.\n\t * @default \"Default\"\n\t * @public\n\t * @since 1.9.2\n\t /\n\t@property()\n\tdesign: `${IconDesign}` = \"Default\";\n\n\t/\n\t Defines the unique identifier (icon name) of the component.\n\t \n\t To browse all available icons, see the\n\t * [SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n\t * [SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n\t * [SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\t \n\t Example:\n\t * `name='add'`, `name='delete'`, `name='employee'`.\n\t \n\t Note: To use the SAP Fiori Tools icons,\n\t * you need to set the `tnt` prefix in front of the icon's name.\n\t \n\t Example:\n\t * `name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\t \n\t Note: To use the SAP Business Suite icons,\n\t * you need to set the `business-suite` prefix in front of the icon's name.\n\t \n\t Example:\n\t * `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.\n\t * @default undefined\n\t * @public\n\t /\n\t@property()\n\tname?: string;\n\n\t/\n\t Defines the text alternative of the component.\n\t * If not provided a default text alternative will be set, if present.\n\t \n\t Note: Every icon should have a text alternative in order to\n\t * calculate its accessible name.\n\t * @default undefined\n\t * @public\n\t /\n\t@property()\n\taccessibleName?: string;\n\n\t/\n\t Defines whether the component should have a tooltip.\n\t \n\t Note: The tooltip text should be provided via the `accessible-name` property.\n\t * @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tshowTooltip = false;\n\n\t/\n\t Defines the mode of the component.\n\t * @default \"Decorative\"\n\t * @public\n\t * @since 2.0.0\n\t /\n\t@property()\n\tmode: `${IconMode}` = \"Decorative\";\n\n\t/\n\t @private\n\t /\n\t@property({ type: Array, noAttribute: true })\n\tpathData: Array<string> = [];\n\n\t/\n\t @private\n\t /\n\t@property({ type: Object, noAttribute: true })\n\taccData?: I18nText;\n\n\t/\n\t @private\n\t/\n\t@property({ type: Boolean })\n\tinvalid = false;\n\n\t/\n\t @private\n\t /\n\t@property({ noAttribute: true })\n\teffectiveAccessibleName?: string;\n\n\tltr?: boolean;\n\tpackageName?: string;\n\tviewBox?: string;\n\tcustomTemplate?: object;\n\tcustomTemplateAsString?: string;\n\n\t_onclick(e: MouseEvent) {\n\t\tif (this.mode !== IconMode.Interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\t// prevents the native browser \"click\" event from firing\n\t\te.stopImmediatePropagation();\n\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (this.mode !== IconMode.Interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault(); // prevent scrolling\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this.mode === IconMode.Interactive && isSpace(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\t}\n\n\t/\n\t Enforce \"ltr\" direction, based on the icons collection metadata.\n\t/\n\tget _dir() {\n\t\treturn this.ltr ? \"ltr\" : undefined;\n\t}\n\n\tget effectiveAriaHidden() {\n\t\treturn this.mode === IconMode.Decorative ? \"true\" : undefined;\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.mode === IconMode.Interactive ? 0 : undefined;\n\t}\n\n\tget effectiveAccessibleRole() {\n\t\tswitch (this.mode) {\n\t\tcase IconMode.Interactive:\n\t\t\treturn \"button\";\n\t\tcase IconMode.Decorative:\n\t\t\treturn \"presentation\";\n\t\tdefault:\n\t\t\treturn \"img\";\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tasync onBeforeRendering() {\n\t\tconst name = this.name;\n\t\tif (!name) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconData: typeof ICON_NOT_FOUND \| IconData \| UnsafeIconData \| undefined = getIconDataSync(name);\n\t\tif (!iconData) {\n\t\t\ticonData = await getIconData(name);\n\t\t}\n\n\t\tif (!iconData) {\n\t\t\tthis.invalid = true;\n\t\t\t/ eslint-disable-next-line /\n\t\t\treturn console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);\n\t\t}\n\n\t\tif (iconData === ICON_NOT_FOUND) {\n\t\t\tthis.invalid = true;\n\t\t\t/ eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. You can either import the icon as a module in order to use it e.g. \"@ui5/webcomponents-icons/dist/${name.replace(\"sap-icon://\", \"\")}.js\", or setup a JSON build step and import \"@ui5/webcomponents-icons/dist/AllIcons.js\".`);\n\t\t}\n\n\t\tthis.viewBox = iconData.viewBox \|\| \"0 0 512 512\";\n\n\t\tif (\"customTemplate\" in iconData && iconData.customTemplate) {\n\t\t\tthis.customTemplate = executeTemplate(iconData.customTemplate, this);\n\t\t}\n\n\t\tif (\"customTemplateAsString\" in iconData) {\n\t\t\tthis.customTemplateAsString = iconData.customTemplateAsString;\n\t\t}\n\n\t\t// in case a new valid name is set, show the icon\n\t\tthis.invalid = false;\n\t\tif (\"pathData\" in iconData && iconData.pathData) {\n\t\t\tthis.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];\n\t\t}\n\n\t\tthis.accData = iconData.accData;\n\t\tthis.ltr = iconData.ltr;\n\t\tthis.packageName = iconData.packageName;\n\n\t\tif (this.accessibleName) {\n\t\t\tthis.effectiveAccessibleName = this.accessibleName;\n\t\t} else if (this.accData) {\n\t\t\tif (this.packageName) {\n\t\t\t\tconst i18nBundle = await getI18nBundle(this.packageName);\n\t\t\t\tthis.effectiveAccessibleName = i18nBundle.getText(this.accData) \|\| undefined;\n\t\t\t} else {\n\t\t\t\tthis.effectiveAccessibleName = this.accData?.defaultText \|\| undefined;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.effectiveAccessibleName = undefined;\n\t\t}\n\t}\n\n\tget hasIconTooltip() {\n\t\treturn this.showTooltip && this.effectiveAccessibleName;\n\t}\n\n\t_getAriaTypeDescription() {\n\t\tswitch (this.mode) {\n\t\tcase IconMode.Interactive:\n\t\t\treturn Icon.i18nBundle.getText(ICON_ARIA_TYPE_INTERACTIVE);\n\t\tcase IconMode.Image:\n\t\t\treturn Icon.i18nBundle.getText(ICON_ARIA_TYPE_IMAGE);\n\t\tdefault:\n\t\t\treturn \"\";\n\t\t}\n\t}\n\n\tget accessibilityInfo() {\n\t\tif (this.mode === IconMode.Decorative) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\trole: this.effectiveAccessibleRole as AriaRole,\n\t\t\ttype: this._getAriaTypeDescription(),\n\t\t\tdescription: this.effectiveAccessibleName,\n\t\t};\n\t}\n}\n\nIcon.define();\n\nexport default Icon;\nexport type {\n\tIIcon,\n};\n"]}
1	+ {"version":3,"file":"Icon.js","sourceRoot":"","sources":["../src/Icon.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRender from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { IconData, UnsafeIconData } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getIconData, getIconDataSync } from \"@ui5/webcomponents-base/dist/asset-registries/Icons.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { I18nText } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport executeTemplate from \"@ui5/webcomponents-base/dist/renderer/executeTemplate.js\";\nimport IconTemplate from \"./IconTemplate.js\";\nimport type IconDesign from \"./types/IconDesign.js\";\nimport IconMode from \"./types/IconMode.js\";\n\nimport { ICON_ARIA_TYPE_IMAGE, ICON_ARIA_TYPE_INTERACTIVE } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport iconCss from \"./generated/themes/Icon.css.js\";\n\n/*\n Interface for components that represent an icon, usable in numerous higher-order components\n * @public\n /\ninterface IIcon extends HTMLElement { }\n\nconst ICON_NOT_FOUND = \"ICON_NOT_FOUND\";\n\n/\n @class\n * ### Overview\n \n The `ui5-icon` component represents an SVG icon.\n * There are two main scenarios how the `ui5-icon` component is used:\n * as a purely decorative element,\n * or as an interactive element that can be focused and clicked.\n \n ### Usage\n \n 1. Get familiar with the icons collections.\n \n Before displaying an icon, you need to explore the icons collections to find and import the desired icon.\n \n Currently there are 3 icons collection, available as 3 npm packages:\n \n - [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n * - [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n * [icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n * - [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n * [icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n \n 2. After exploring the icons collections, add one or more of the packages as dependencies to your project.\n \n `npm i @ui5/webcomponents-icons`\n * `npm i @ui5/webcomponents-icons-tnt`\n * `npm i @ui5/webcomponents-icons-business-suite`\n \n 3. Then, import the desired icon.\n \n `import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n \n For Example:\n \n For the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n \n `import \"@ui5/webcomponents-icons/dist/employee.js\";`\n \n For the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n \n `import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n \n For the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n \n `import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n \n 4. Display the icon using the `ui5-icon` web component.\n * Set the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\n * and the icon name to the `name` property.\n \n `<ui5-icon name=\"employee\"></ui5-icon>`\n * `<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n * `<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n \n ### Keyboard Handling\n \n - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n \n ### ES6 Module Import\n \n `import \"@ui5/webcomponents/dist/Icon.js\";`\n * @csspart root - Used to style the outermost wrapper of the `ui5-icon`.\n * @constructor\n * @extends UI5Element\n * @implements {IIcon}\n * @public\n /\n@customElement({\n\ttag: \"ui5-icon\",\n\tlanguageAware: true,\n\tthemeAware: true,\n\trenderer: jsxRender,\n\ttemplate: IconTemplate,\n\tstyles: iconCss,\n})\n/\n Fired when the component is activated by mouse/touch, keyboard (Enter or Space),\n * or screen reader virtual cursor activation.\n \n Note: The event will not be fired if the `mode` property is set to `Decorative` or `Image`.\n * @public\n * @since 2.11.0\n /\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Icon extends UI5Element implements IIcon {\n\teventDetails!: {\n\t\tclick: void\n\t}\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/\n\t Defines the component semantic design.\n\t * @default \"Default\"\n\t * @public\n\t * @since 1.9.2\n\t /\n\t@property()\n\tdesign: `${IconDesign}` = \"Default\";\n\n\t/\n\t Defines the unique identifier (icon name) of the component.\n\t \n\t To browse all available icons, see the\n\t * [SAP Icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html),\n\t * [SAP Fiori Tools](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT) and\n\t * [SAP Business Suite](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html)\n\t \n\t Example:\n\t * `name='add'`, `name='delete'`, `name='employee'`.\n\t \n\t Note: To use the SAP Fiori Tools icons,\n\t * you need to set the `tnt` prefix in front of the icon's name.\n\t \n\t Example:\n\t * `name='tnt/antenna'`, `name='tnt/actor'`, `name='tnt/api'`.\n\t \n\t Note: To use the SAP Business Suite icons,\n\t * you need to set the `business-suite` prefix in front of the icon's name.\n\t \n\t Example:\n\t * `name='business-suite/3d'`, `name='business-suite/1x2-grid-layout'`, `name='business-suite/4x4-grid-layout'`.\n\t * @default undefined\n\t * @public\n\t /\n\t@property()\n\tname?: string;\n\n\t/\n\t Defines the text alternative of the component.\n\t * If not provided a default text alternative will be set, if present.\n\t \n\t Note: Every icon should have a text alternative in order to\n\t * calculate its accessible name.\n\t * @default undefined\n\t * @public\n\t /\n\t@property()\n\taccessibleName?: string;\n\n\t/\n\t Defines whether the component should have a tooltip.\n\t \n\t Note: The tooltip text should be provided via the `accessible-name` property.\n\t * @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tshowTooltip = false;\n\n\t/\n\t Defines the mode of the component.\n\t * @default \"Decorative\"\n\t * @public\n\t * @since 2.0.0\n\t /\n\t@property()\n\tmode: `${IconMode}` = \"Decorative\";\n\n\t/\n\t Defines the font icon to be used as an icon.\n\t * Intended for font-based icon libraries where\n\t * the application loads the font and provides a slotted element with the unicode character.\n\t * When this slot is used, the component renders a `<span>` instead of an `<svg>`.\n\t * Accessibility is fully delegated to the application — set `accessible-name` and `mode` explicitly.\n\t \n\t Example:\n\t * ```html\n\t * <ui5-icon mode=\"Image\" accessible-name=\"Home\">\n\t * <i class=\"fa fa-home\" slot=\"fontIcon\"></i>\n\t * </ui5-icon>\n\t * ```\n\t * @public\n\t * @since 2.23.0\n\t /\n\t@slot({ type: HTMLElement })\n\tfontIcon!: Slot<HTMLElement>;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Array, noAttribute: true })\n\tpathData: Array<string> = [];\n\n\t/\n\t @private\n\t /\n\t@property({ type: Object, noAttribute: true })\n\taccData?: I18nText;\n\n\t/\n\t @private\n\t/\n\t@property({ type: Boolean })\n\tinvalid = false;\n\n\t/\n\t @private\n\t /\n\t@property({ noAttribute: true })\n\teffectiveAccessibleName?: string;\n\n\tltr?: boolean;\n\tpackageName?: string;\n\tviewBox?: string;\n\tcustomTemplate?: object;\n\tcustomTemplateAsString?: string;\n\n\t_onclick(e: MouseEvent) {\n\t\tif (this.mode !== IconMode.Interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\t// prevents the native browser \"click\" event from firing\n\t\te.stopImmediatePropagation();\n\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (this.mode !== IconMode.Interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault(); // prevent scrolling\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this.mode === IconMode.Interactive && isSpace(e)) {\n\t\t\tthis.fireDecoratorEvent(\"click\");\n\t\t}\n\t}\n\n\t/\n\t Enforce \"ltr\" direction, based on the icons collection metadata.\n\t/\n\tget _dir() {\n\t\treturn this.ltr ? \"ltr\" : undefined;\n\t}\n\n\tget effectiveAriaHidden() {\n\t\treturn this.mode === IconMode.Decorative ? \"true\" : undefined;\n\t}\n\n\tget _tabIndex() {\n\t\treturn this.mode === IconMode.Interactive ? 0 : undefined;\n\t}\n\n\tget effectiveAccessibleRole() {\n\t\tswitch (this.mode) {\n\t\tcase IconMode.Interactive:\n\t\t\treturn \"button\";\n\t\tcase IconMode.Decorative:\n\t\t\treturn \"presentation\";\n\t\tdefault:\n\t\t\treturn \"img\";\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tasync onBeforeRendering() {\n\t\tif (this.fontIcon.length) {\n\t\t\t// Font-based icon via slot — skip registry, accessibility is app's responsibility\n\t\t\tif (!this.accessibleName) {\n\t\t\t\tthis.effectiveAccessibleName = undefined;\n\t\t\t} else {\n\t\t\t\tthis.effectiveAccessibleName = this.accessibleName;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tconst name = this.name;\n\t\tif (!name) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconData: typeof ICON_NOT_FOUND \| IconData \| UnsafeIconData \| undefined = getIconDataSync(name);\n\t\tif (!iconData) {\n\t\t\ticonData = await getIconData(name);\n\t\t}\n\n\t\tif (!iconData) {\n\t\t\tthis.invalid = true;\n\t\t\t/ eslint-disable-next-line /\n\t\t\treturn console.warn(`Required icon is not registered. Invalid icon name: ${this.name}`);\n\t\t}\n\n\t\tif (iconData === ICON_NOT_FOUND) {\n\t\t\tthis.invalid = true;\n\t\t\t/ eslint-disable-next-line */\n\t\t\treturn console.warn(`Required icon is not registered. You can either import the icon as a module in order to use it e.g. \"@ui5/webcomponents-icons/dist/${name.replace(\"sap-icon://\", \"\")}.js\", or setup a JSON build step and import \"@ui5/webcomponents-icons/dist/AllIcons.js\".`);\n\t\t}\n\n\t\tthis.viewBox = iconData.viewBox \|\| \"0 0 512 512\";\n\n\t\tif (\"customTemplate\" in iconData && iconData.customTemplate) {\n\t\t\tthis.customTemplate = executeTemplate(iconData.customTemplate, this);\n\t\t}\n\n\t\tif (\"customTemplateAsString\" in iconData) {\n\t\t\tthis.customTemplateAsString = iconData.customTemplateAsString;\n\t\t}\n\n\t\t// in case a new valid name is set, show the icon\n\t\tthis.invalid = false;\n\t\tif (\"pathData\" in iconData && iconData.pathData) {\n\t\t\tthis.pathData = Array.isArray(iconData.pathData) ? iconData.pathData : [iconData.pathData];\n\t\t}\n\n\t\tthis.accData = iconData.accData;\n\t\tthis.ltr = iconData.ltr;\n\t\tthis.packageName = iconData.packageName;\n\n\t\tif (this.accessibleName) {\n\t\t\tthis.effectiveAccessibleName = this.accessibleName;\n\t\t} else if (this.accData) {\n\t\t\tif (this.packageName) {\n\t\t\t\tconst i18nBundle = await getI18nBundle(this.packageName);\n\t\t\t\tthis.effectiveAccessibleName = i18nBundle.getText(this.accData) \|\| undefined;\n\t\t\t} else {\n\t\t\t\tthis.effectiveAccessibleName = this.accData?.defaultText \|\| undefined;\n\t\t\t}\n\t\t} else {\n\t\t\tthis.effectiveAccessibleName = undefined;\n\t\t}\n\t}\n\n\tget hasFontIcon() {\n\t\treturn this.fontIcon.length > 0;\n\t}\n\n\tget hasIconTooltip() {\n\t\treturn this.showTooltip && this.effectiveAccessibleName;\n\t}\n\n\t_getAriaTypeDescription() {\n\t\tswitch (this.mode) {\n\t\tcase IconMode.Interactive:\n\t\t\treturn Icon.i18nBundle.getText(ICON_ARIA_TYPE_INTERACTIVE);\n\t\tcase IconMode.Image:\n\t\t\treturn Icon.i18nBundle.getText(ICON_ARIA_TYPE_IMAGE);\n\t\tdefault:\n\t\t\treturn \"\";\n\t\t}\n\t}\n\n\tget accessibilityInfo() {\n\t\tif (this.mode === IconMode.Decorative) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\trole: this.effectiveAccessibleRole as AriaRole,\n\t\t\ttype: this._getAriaTypeDescription(),\n\t\t\tdescription: this.effectiveAccessibleName,\n\t\t};\n\t}\n}\n\nIcon.define();\n\nexport default Icon;\nexport type {\n\tIIcon,\n};\n"]}

package/dist/IconTemplate.js CHANGED Viewed

@@ -1,5 +1,8 @@
-import { jsxs as _jsxs, jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
 export default function IconTemplate() {
+    if (this.hasFontIcon) {
+        return (_jsx("span", { class: "ui5-icon-root", part: "root", tabindex: this._tabIndex, role: this.effectiveAccessibleRole, "aria-label": this.effectiveAccessibleName, "aria-hidden": this.effectiveAriaHidden, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, children: _jsx("slot", { name: "fontIcon" }) }));
+    }
     return (_jsxs("svg", { class: "ui5-icon-root", part: "root", tabindex: this._tabIndex, dir: this._dir, viewBox: this.viewBox, role: this.effectiveAccessibleRole, focusable: "false", preserveAspectRatio: "xMidYMid meet", "aria-label": this.effectiveAccessibleName, "aria-hidden": this.effectiveAriaHidden, xmlns: "http://www.w3.org/2000/svg", onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, children: [this.hasIconTooltip &&
                 _jsxs("title", { id: `${this._id}-tooltip`, children: [" ", this.effectiveAccessibleName, " "] }), _jsx("g", { role: "presentation", children: content.call(this) })] }));
 }

package/dist/IconTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconTemplate.js","sourceRoot":"","sources":["../src/IconTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,OAAO,CACN,eACC,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,uBAAuB,EAClC,SAAS,EAAC,OAAO,EACjB,mBAAmB,EAAC,eAAe,gBACvB,IAAI,CAAC,uBAAuB,iBAC3B,IAAI,CAAC,mBAAmB,EACrC,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,aAEpB,IAAI,CAAC,cAAc;gBACR,iBAAO,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,kBAAK,IAAI,CAAC,uBAAuB,SAAU,EAGxF,YAAG,IAAI,EAAC,cAAc,YACnB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GACjB,IACC,CACN,CAAC;AACH,CAAC;AAED,SAAS,OAAO;IACf,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACjC,OAAO,YAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,sBAAsB,EAAE,GAAM,CAAC;IAClF,CAAC;IAED,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChC,eAAM,CAAC,EAAE,IAAI,GAAS,CACtB,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import type Icon from \"./Icon.js\";\n\nexport default function IconTemplate(this: Icon) {\n\treturn (\n\t\t<svg\n\t\t\tclass=\"ui5-icon-root\"\n\t\t\tpart=\"root\"\n\t\t\ttabindex={this._tabIndex}\n\t\t\tdir={this._dir}\n\t\t\tviewBox={this.viewBox}\n\t\t\trole={this.effectiveAccessibleRole}\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-hidden={this.effectiveAriaHidden}\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonClick={this._onclick}\n\t\t>\n\t\t\t{ this.hasIconTooltip &&\n <title id={`${this._id}-tooltip`} > {this.effectiveAccessibleName} </title>\n\t\t\t}\n\n\t\t\t<g role=\"presentation\">\n\t\t\t\t{ content.call(this) }\n\t\t\t</g>\n\t\t</svg>\n\t);\n}\n\nfunction content(this: Icon) {\n\tif (this.customTemplate) {\n\t\treturn this.customTemplate;\n\t}\n\n\tif (this.customTemplateAsString) {\n\t\treturn <g dangerouslySetInnerHTML={{ __html: this.customTemplateAsString }}></g>;\n\t}\n\n\treturn this.pathData.map(path => (\n\t\t<path d={path}></path>\n\t));\n}\n"]}
1	+ {"version":3,"file":"IconTemplate.js","sourceRoot":"","sources":["../src/IconTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,YAAY;IACnC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;QACtB,OAAO,CACN,eACC,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAE,IAAI,CAAC,uBAAuB,gBACtB,IAAI,CAAC,uBAAuB,iBAC3B,IAAI,CAAC,mBAAmB,EACrC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,YAEtB,eAAM,IAAI,EAAC,UAAU,GAAQ,GACvB,CACP,CAAC;IACH,CAAC;IAED,OAAO,CACN,eACC,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,uBAAuB,EAClC,SAAS,EAAC,OAAO,EACjB,mBAAmB,EAAC,eAAe,gBACvB,IAAI,CAAC,uBAAuB,iBAC3B,IAAI,CAAC,mBAAmB,EACrC,KAAK,EAAC,4BAA4B,EAClC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,aAEpB,IAAI,CAAC,cAAc;gBACR,iBAAO,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,kBAAK,IAAI,CAAC,uBAAuB,SAAU,EAGxF,YAAG,IAAI,EAAC,cAAc,YACnB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GACjB,IACC,CACN,CAAC;AACH,CAAC;AAED,SAAS,OAAO;IACf,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACjC,OAAO,YAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,sBAAsB,EAAE,GAAM,CAAC;IAClF,CAAC;IAED,OAAO,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChC,eAAM,CAAC,EAAE,IAAI,GAAS,CACtB,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import type Icon from \"./Icon.js\";\n\nexport default function IconTemplate(this: Icon) {\n\tif (this.hasFontIcon) {\n\t\treturn (\n\t\t\t<span\n\t\t\t\tclass=\"ui5-icon-root\"\n\t\t\t\tpart=\"root\"\n\t\t\t\ttabindex={this._tabIndex}\n\t\t\t\trole={this.effectiveAccessibleRole}\n\t\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\t\taria-hidden={this.effectiveAriaHidden}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\tonClick={this._onclick}\n\t\t\t>\n\t\t\t\t<slot name=\"fontIcon\"></slot>\n\t\t\t</span>\n\t\t);\n\t}\n\n\treturn (\n\t\t<svg\n\t\t\tclass=\"ui5-icon-root\"\n\t\t\tpart=\"root\"\n\t\t\ttabindex={this._tabIndex}\n\t\t\tdir={this._dir}\n\t\t\tviewBox={this.viewBox}\n\t\t\trole={this.effectiveAccessibleRole}\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\taria-label={this.effectiveAccessibleName}\n\t\t\taria-hidden={this.effectiveAriaHidden}\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonClick={this._onclick}\n\t\t>\n\t\t\t{ this.hasIconTooltip &&\n <title id={`${this._id}-tooltip`} > {this.effectiveAccessibleName} </title>\n\t\t\t}\n\n\t\t\t<g role=\"presentation\">\n\t\t\t\t{ content.call(this) }\n\t\t\t</g>\n\t\t</svg>\n\t);\n}\n\nfunction content(this: Icon) {\n\tif (this.customTemplate) {\n\t\treturn this.customTemplate;\n\t}\n\n\tif (this.customTemplateAsString) {\n\t\treturn <g dangerouslySetInnerHTML={{ __html: this.customTemplateAsString }}></g>;\n\t}\n\n\treturn this.pathData.map(path => (\n\t\t<path d={path}></path>\n\t));\n}\n"]}

package/dist/ListItem.d.ts CHANGED Viewed

@@ -36,6 +36,7 @@ type AccInfo = {
     ariaOwns?: string;
     tooltip?: string;
     ariaKeyShortcuts?: string;
+    ariaDescribedBy?: string;
 };
 type ListItemAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup" | "ariaSetsize" | "ariaPosinset">;
 /**
@@ -195,6 +196,7 @@ declare abstract class ListItem extends ListItemBase {
     get hasDeleteButtonSlot(): boolean;
     get _accessibleNameRef(): string;
     get ariaLabelledByText(): string;
+    get _ariaDescribedByIds(): string;
     get _accInfo(): AccInfo;
     get _hasHighlightColor(): boolean;
     get hasConfigurableMode(): boolean;

package/dist/ListItem.js CHANGED Viewed

@@ -313,6 +313,9 @@ let ListItem = ListItem_1 = class ListItem extends ListItemBase {
         ].filter(Boolean);
         return texts.join(" ");
     }
+    get _ariaDescribedByIds() {
+        return `${this._id}-invisibleText-describedby`;
+    }
     get _accInfo() {
         return {
             role: this.listItemAccessibleRole,
@@ -325,6 +328,7 @@ let ListItem = ListItem_1 = class ListItem extends ListItemBase {
             setsize: this.accessibilityAttributes.ariaSetsize,
             posinset: this.accessibilityAttributes.ariaPosinset,
             tooltip: this.tooltip,
+            ariaDescribedBy: this._ariaDescribedByIds || undefined,
         };
     }
     get _hasHighlightColor() {

package/dist/ListItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../src/ListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport {\n\tisSpace, isEnter, isDelete, isF2,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport type { AccessibilityAttributes, AriaRole, AriaHasPopup } from \"@ui5/webcomponents-base\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/edit.js\";\nimport DragRegistry from \"@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js\";\nimport Highlight from \"./types/Highlight.js\";\nimport ListItemType from \"./types/ListItemType.js\";\nimport ListSelectionMode from \"./types/ListSelectionMode.js\";\nimport ListItemBase from \"./ListItemBase.js\";\nimport type RadioButton from \"./RadioButton.js\";\nimport type CheckBox from \"./CheckBox.js\";\nimport type { IButton } from \"./Button.js\";\nimport {\n\tDELETE,\n\tARIA_LABEL_LIST_ITEM_CHECKBOX,\n\tARIA_LABEL_LIST_ITEM_RADIO_BUTTON,\n\tLIST_ITEM_ACTIVE,\n\tLIST_ITEM_SELECTED,\n\tLIST_ITEM_NOT_SELECTED,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport type ListItemAccessibleRole from \"./types/ListItemAccessibleRole.js\";\n\n// Styles\nimport styles from \"./generated/themes/ListItem.css.js\";\nimport listItemAdditionalTextCss from \"./generated/themes/ListItemAdditionalText.css.js\";\n\n// Icons\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ninterface IAccessibleListItem {\n\taccessibleName?: string;\n\taccessibleNameRef?: string;\n}\n\ntype SelectionRequestEventDetail = {\n\titem: ListItemBase,\n\tselectionComponentPressed: boolean,\n\tselected?: boolean,\n\tkey?: string,\n}\n\ntype AccInfo = {\n\trole?: AriaRole \| undefined;\n\tariaExpanded?: boolean;\n\tariaLevel?: number;\n\tariaLabel: string;\n\tariaLabelRadioButton: string;\n\tariaSelectedText?: string;\n\tariaHaspopup?: `${AriaHasPopup}`;\n\tposinset?: number;\n\tsetsize?: number;\n\tariaSelected?: boolean;\n\tariaChecked?: boolean;\n\tlistItemAriaLabel?: string;\n\tariaOwns?: string;\n\ttooltip?: string;\n\tariaKeyShortcuts?: string;\n}\n\ntype ListItemAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\" \| \"ariaSetsize\" \| \"ariaPosinset\">;\n\n/*\n @class\n * A class to serve as a base\n * for the `ListItemStandard` and `ListItemCustom` classes.\n * @constructor\n * @abstract\n * @extends ListItemBase\n * @public\n /\n@customElement({\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: [\n\t\tListItemBase.styles,\n\t\tlistItemAdditionalTextCss,\n\t\tstyles,\n\t],\n})\n/\n Fired when the user clicks on the detail button when type is `Detail`.\n * @public\n /\n@event(\"detail-click\", {\n\tbubbles: true,\n})\n@event(\"selection-requested\", {\n\tbubbles: true,\n})\nabstract class ListItem extends ListItemBase {\n\teventDetails!: ListItemBase[\"eventDetails\"] & {\n\t\t\"detail-click\": { item: ListItem, selected: boolean };\n\t\t\"selection-requested\": SelectionRequestEventDetail,\n\t}\n\t/\n\t Defines the visual indication and behavior of the list items.\n\t * Available options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\t \n\t Note: When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\n\t * while with type `Inactive` and `Detail` - will not.\n\t * @default \"Active\"\n\t * @public\n\t/\n\t@property()\n\ttype: `${ListItemType}` = \"Active\";\n\n\t/\n\t Defines the additional accessibility attributes that will be applied to the component.\n\t * The following fields are supported:\n\t \n\t - ariaSetsize: Defines the number of items in the current set when not all items in the set are present in the DOM.\n\t * Note: The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\t \n\t \t- ariaPosinset: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t * \tNote: The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.\n\t \n\t @default {}\n\t * @public\n\t * @since 1.15.0\n\t /\n\t@property({ type: Object })\n\taccessibilityAttributes: ListItemAccessibilityAttributes = {};\n\n\t/\n\t The navigated state of the list item.\n\t * If set to `true`, a navigation indicator is displayed at the end of the list item.\n\t * @default false\n\t * @public\n\t * @since 1.10.0\n\t /\n\t@property({ type: Boolean })\n\tnavigated = false;\n\n\t/\n\t Defines the text of the tooltip that would be displayed for the list item.\n\t * @default undefined\n\t * @public\n\t * @since 1.23.0\n\t /\n\t@property()\n\ttooltip?: string;\n\n\t/\n\t Indicates if the list item is active, e.g pressed down with the mouse or the keyboard keys.\n\t * @private\n\t/\n\t@property({ type: Boolean })\n\tactive = false;\n\n\t/\n\t Defines the highlight state of the list items.\n\t * Available options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.\n\t * @default \"None\"\n\t * @public\n\t * @since 1.24\n\t /\n\t@property()\n\thighlight: `${Highlight}` = \"None\";\n\n\t/\n\t Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tdeclare selected: boolean;\n\n\t/\n\t Used to define the role of the list item.\n\t \n\t Note: If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n\t * (e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\n\t * An explicitly set `accessible-role` on the list item takes precedence over the inherited role.\n\t * @default undefined\n\t * @public\n\t * @since 1.3.0\n\t /\n\t@property()\n\taccessibleRole?: `${Exclude<ListItemAccessibleRole, ListItemAccessibleRole.Group>}`;\n\n\t@property()\n\t_forcedAccessibleRole?: string;\n\n\t@property({ noAttribute: true })\n\t_inheritedAccessibleRole?: string;\n\n\t@property()\n\t_selectionMode: `${ListSelectionMode}` = \"None\";\n\n\t/\n\t Indicates whether the list item is in edit mode.\n\t * When active, Tab cycles through internal focusable elements\n\t * instead of navigating to the next list item.\n\t * Toggled by F2; also set by the parent List on F7.\n\t * @private\n\t /\n\t_editMode = false;\n\n\t/\n\t Defines the current media query size.\n\t * @default \"S\"\n\t * @private\n\t /\n\t@property()\n\tmediaRange = \"S\";\n\n\t/\n\t Defines the delete button, displayed in \"Delete\" mode.\n\t * Note: While the slot allows custom buttons, to match\n\t * design guidelines, please use the `ui5-button` component.\n\t * Note: When the slot is not present, a built-in delete button will be displayed.\n\t * @since 1.9.0\n\t * @public\n\t/\n\t@slot()\n\tdeleteButton!: Slot<IButton>;\n\n\tdeactivateByKey: (e: KeyboardEvent) => void;\n\tdeactivate: () => void;\n\t// used in template, implemented in TreeItemBase, ListItemStandard\n\taccessibleName?: string;\n\t// used in ListItem template but implemented in TreeItemBase\n\tindeterminate?: boolean;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.deactivateByKey = (e: KeyboardEvent) => {\n\t\t\tif (isEnter(e)) {\n\t\t\t\tthis.deactivate();\n\t\t\t}\n\t\t};\n\n\t\tthis.deactivate = () => {\n\t\t\tif (this.active) {\n\t\t\t\tthis.active = false;\n\t\t\t}\n\t\t};\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.actionable = (this.type === ListItemType.Active \|\| this.type === ListItemType.Navigation) && (this._selectionMode !== ListSelectionMode.Delete);\n\t}\n\n\tonEnterDOM() {\n\t\tsuper.onEnterDOM();\n\t\tdocument.addEventListener(\"mouseup\", this.deactivate);\n\t\tdocument.addEventListener(\"touchend\", this.deactivate);\n\t\tdocument.addEventListener(\"keyup\", this.deactivateByKey);\n\t}\n\n\tonExitDOM() {\n\t\tdocument.removeEventListener(\"mouseup\", this.deactivate);\n\t\tdocument.removeEventListener(\"keyup\", this.deactivateByKey);\n\t\tdocument.removeEventListener(\"touchend\", this.deactivate);\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tconst isInternalElementFocused = e.target !== this.getFocusDomRef();\n\n\t\tif ((isSpace(e) \|\| isEnter(e)) && isInternalElementFocused) {\n\t\t\treturn;\n\t\t}\n\n\t\tsuper._onkeydown(e);\n\n\t\tconst itemActive = this.type === ListItemType.Active,\n\t\t\titemNavigated = this.typeNavigation;\n\n\t\tif ((isSpace(e) \|\| isEnter(e)) && (itemActive \|\| itemNavigated)) {\n\t\t\tthis.activate();\n\t\t}\n\n\t\tif (isF2(e)) {\n\t\t\tthis._handleF2();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tsuper._onkeyup(e);\n\n\t\tif (isSpace(e) \|\| isEnter(e)) {\n\t\t\tthis.deactivate();\n\t\t}\n\n\t\tif (this.modeDelete && isDelete(e)) {\n\t\t\tthis.onDelete();\n\t\t}\n\t}\n\n\t_onmousedown() {\n\t\tthis.activate();\n\t}\n\n\t_onmouseup() {\n\t\tif (this.getFocusDomRef()!.matches(\":has(:focus-within)\")) {\n\t\t\treturn;\n\t\t}\n\t\tthis.deactivate();\n\t}\n\n\t_ontouchend() {\n\t\tthis._onmouseup();\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tsuper._onfocusin(e);\n\n\t\tif (e.target !== this.getFocusDomRef()) {\n\t\t\tthis.deactivate();\n\t\t}\n\t}\n\n\t_onfocusout(e: FocusEvent) {\n\t\tif (this._editMode) {\n\t\t\tconst relatedTarget = e.relatedTarget as Node;\n\t\t\tif (!relatedTarget \|\| !(this.contains(relatedTarget) \|\| this.shadowRoot!.contains(relatedTarget))) {\n\t\t\t\tthis._editMode = false;\n\t\t\t}\n\t\t}\n\n\t\tif (e.target !== this.getFocusDomRef()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.deactivate();\n\t}\n\n\t_ondragstart(e: DragEvent) {\n\t\tif (!e.dataTransfer) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (e.target === this._listItem) {\n\t\t\tDragRegistry.setDraggedElement(this, e);\n\t\t\tthis.setAttribute(\"data-moving\", \"\");\n\t\t\te.dataTransfer.dropEffect = \"move\";\n\t\t\te.dataTransfer.effectAllowed = \"move\";\n\t\t}\n\t}\n\n\t_ondragend(e: DragEvent) {\n\t\tif (e.target === this._listItem) {\n\t\t\tDragRegistry.clearDraggedElement();\n\t\t\tthis.removeAttribute(\"data-moving\");\n\t\t}\n\t}\n\n\t/\n\t Called when selection components in Single (ui5-radio-button)\n\t * and Multi (ui5-checkbox) selection modes are used.\n\t */\n\tonMultiSelectionComponentPress(e: CustomEvent) {\n\t\tif (this.isInactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"selection-requested\", { item: this, selected: (e.target as CheckBox).checked, selectionComponentPressed: true });\n\t}\n\n\tonSingleSelectionComponentPress(e: CustomEvent) {\n\t\tif (this.isInactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"selection-requested\", { item: this, selected: !(e.target as RadioButton).checked, selectionComponentPressed: true });\n\t}\n\n\tactivate() {\n\t\tif (this.type === ListItemType.Active \|\| this.type === ListItemType.Navigation) {\n\t\t\tthis.active = true;\n\t\t}\n\t}\n\n\tonDelete() {\n\t\tthis.fireDecoratorEvent(\"selection-requested\", { item: this, selectionComponentPressed: false });\n\t}\n\n\tonDetailClick() {\n\t\tthis.fireDecoratorEvent(\"detail-click\", { item: this, selected: this.selected });\n\t}\n\n\tfireItemPress(e: Event) {\n\t\tif (this.isInactive) {\n\t\t\treturn;\n\t\t}\n\t\tsuper.fireItemPress(e);\n\t\tif (document.activeElement !== this) {\n\t\t\tthis.focus();\n\t\t}\n\t}\n\n\tget isInactive() {\n\t\treturn this.type === ListItemType.Inactive \|\| this.type === ListItemType.Detail;\n\t}\n\n\tget placeSelectionElementBefore() {\n\t\treturn this._selectionMode === ListSelectionMode.Multiple\n\t\t\t\|\| this._selectionMode === ListSelectionMode.SingleStart;\n\t}\n\n\tget placeSelectionElementAfter() {\n\t\treturn !this.placeSelectionElementBefore\n\t\t\t&& (this._selectionMode === ListSelectionMode.SingleEnd \|\| this._selectionMode === ListSelectionMode.Delete);\n\t}\n\n\tget modeSingleSelect() {\n\t\treturn [\n\t\t\tListSelectionMode.SingleStart,\n\t\t\tListSelectionMode.SingleEnd,\n\t\t\tListSelectionMode.Single,\n\t\t].includes(this._selectionMode as ListSelectionMode);\n\t}\n\n\tget modeMultiple() {\n\t\treturn this._selectionMode === ListSelectionMode.Multiple;\n\t}\n\n\tget modeDelete() {\n\t\treturn this._selectionMode === ListSelectionMode.Delete;\n\t}\n\n\tget typeDetail() {\n\t\treturn this.type === ListItemType.Detail;\n\t}\n\n\tget typeNavigation() {\n\t\treturn this.type === ListItemType.Navigation;\n\t}\n\n\tget typeActive() {\n\t\treturn this.type === ListItemType.Active;\n\t}\n\n\tget _ariaSelected() {\n\t\tif (this.modeMultiple \|\| this.modeSingleSelect) {\n\t\t\treturn this.selected;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget listItemAccessibleRole() {\n\t\tif (this._forcedAccessibleRole) {\n\t\t\treturn this._forcedAccessibleRole as AriaRole;\n\t\t}\n\t\tif (this.accessibleRole) {\n\t\t\treturn this.accessibleRole.toLowerCase() as AriaRole;\n\t\t}\n\t\treturn (this._inheritedAccessibleRole \|\| \"listitem\") as AriaRole;\n\t}\n\n\tget ariaSelectedText() {\n\t\tlet ariaSelectedText;\n\n\t\t// Selected state needs to be supported separately since now the role mapping is list -> listitem[]\n\t\t// to avoid the issue of nesting interactive elements, ex. (option -> radio/checkbox);\n\t\t// The text is added to aria-describedby because as part of the aria-labelledby\n\t\t// the whole content of the item is readout when the aria-labelledby value is changed.\n\t\tif (this._ariaSelected !== undefined) {\n\t\t\tariaSelectedText = this._ariaSelected ? ListItem.i18nBundle.getText(LIST_ITEM_SELECTED) : ListItem.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);\n\t\t}\n\n\t\treturn ariaSelectedText;\n\t}\n\n\tget deleteText() {\n\t\treturn ListItem.i18nBundle.getText(DELETE);\n\t}\n\n\tget hasDeleteButtonSlot() {\n\t\treturn !!this.deleteButton.length;\n\t}\n\n\tget _accessibleNameRef(): string {\n\t\tif ((this as IAccessibleListItem).accessibleName) {\n\t\t\t// accessibleName is set - return labels excluding content\n\t\t\treturn `${this._id}-invisibleText`;\n\t\t}\n\n\t\t// accessibleName is not set - return _accInfo.listItemAriaLabel including content\n\t\treturn `${this._id}-content ${this._id}-invisibleText`;\n\t}\n\n\tget ariaLabelledByText() {\n\t\tconst texts = [\n\t\t\tthis._accInfo.listItemAriaLabel,\n\t\t\tthis.accessibleName,\n\t\t\tthis.typeActive ? ListItem.i18nBundle.getText(LIST_ITEM_ACTIVE) : undefined,\n\t\t].filter(Boolean);\n\n\t\treturn texts.join(\" \");\n\t}\n\n\tget _accInfo(): AccInfo {\n\t\treturn {\n\t\t\trole: this.listItemAccessibleRole,\n\t\t\tariaExpanded: undefined,\n\t\t\tariaLevel: undefined,\n\t\t\tariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),\n\t\t\tariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),\n\t\t\tariaSelectedText: this.ariaSelectedText,\n\t\t\tariaHaspopup: this.accessibilityAttributes.hasPopup,\n\t\t\tsetsize: this.accessibilityAttributes.ariaSetsize,\n\t\t\tposinset: this.accessibilityAttributes.ariaPosinset,\n\t\t\ttooltip: this.tooltip,\n\t\t};\n\t}\n\n\tget _hasHighlightColor() {\n\t\treturn this.highlight !== Highlight.None;\n\t}\n\n\tget hasConfigurableMode() {\n\t\treturn true;\n\t}\n\n\tget _listItem() {\n\t\treturn this.shadowRoot!.querySelector(\"li\");\n\t}\n\n\t_handleF2() {\n\t\tconst focusDomRef = this.getFocusDomRef()!;\n\n\t\tif (getActiveElement() === focusDomRef) {\n\t\t\tconst focusables = this._getFocusableElements();\n\t\t\tif (!focusables.length) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis._editMode = true;\n\t\t\tfocusables[0].focus();\n\t\t} else {\n\t\t\tthis._editMode = false;\n\t\t\tfocusDomRef.focus();\n\t\t}\n\t}\n\n\t_handleTabNext(e: KeyboardEvent) {\n\t\tif (this._editMode) {\n\t\t\tconst focusables = this._getFocusableElements();\n\t\t\tconst currentIndex = this._indexOfActiveElement(focusables);\n\t\t\tconst nextIndex = currentIndex + 1;\n\n\t\t\tif (currentIndex !== -1 && nextIndex < focusables.length) {\n\t\t\t\te.preventDefault();\n\t\t\t\tfocusables[nextIndex].focus();\n\t\t\t} else if (!this.fireDecoratorEvent(\"forward-after\")) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.fireDecoratorEvent(\"forward-after\")) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_handleTabPrevious(e: KeyboardEvent) {\n\t\tif (this._editMode) {\n\t\t\tconst focusables = this._getFocusableElements();\n\t\t\tconst currentIndex = this._indexOfActiveElement(focusables);\n\t\t\tif (currentIndex > 0) {\n\t\t\t\te.preventDefault();\n\t\t\t\tfocusables[currentIndex - 1].focus();\n\t\t\t} else if (!this.fireDecoratorEvent(\"forward-before\")) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.fireDecoratorEvent(\"forward-before\")) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_getFocusableElements(): HTMLElement[] {\n\t\tconst focusDomRef = this.getFocusDomRef()!;\n\t\treturn getTabbableElements(focusDomRef);\n\t}\n\n\t_indexOfActiveElement(focusables: HTMLElement[]): number {\n\t\tconst activeElement = getActiveElement() as HTMLElement;\n\t\treturn focusables.findIndex(el => el === activeElement \|\| (el.shadowRoot !== null && el.shadowRoot.contains(activeElement)));\n\t}\n\n\t_getFocusedElementIndex(): number {\n\t\treturn this._indexOfActiveElement(this._getFocusableElements());\n\t}\n\n\t_hasFocusableElements(): boolean {\n\t\treturn this._getFocusableElements().length > 0;\n\t}\n\n\t_isFocusOnInternalElement(): boolean {\n\t\treturn this._indexOfActiveElement(this._getFocusableElements()) !== -1;\n\t}\n\n\t_focusInternalElement(targetIndex: number) {\n\t\tconst focusables = this._getFocusableElements();\n\t\tif (!focusables.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeIndex = Math.min(targetIndex, focusables.length - 1);\n\t\tconst elementToFocus = focusables[safeIndex];\n\n\t\telementToFocus.focus();\n\n\t\treturn safeIndex;\n\t}\n}\n\nexport default ListItem;\nexport type {\n\tIAccessibleListItem,\n\tSelectionRequestEventDetail,\n\tListItemAccessibilityAttributes,\n};\n"]}
1	+ {"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../src/ListItem.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,EACN,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,GAChC,MAAM,sCAAsC,CAAC;AAE9C,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,gBAAgB,MAAM,uDAAuD,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uDAAuD,CAAC;AAE5F,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,0CAA0C,CAAC;AAClD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,YAAY,MAAM,+DAA+D,CAAC;AACzF,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAC7D,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAI7C,OAAO,EACN,MAAM,EACN,6BAA6B,EAC7B,iCAAiC,EACjC,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,GACtB,MAAM,mCAAmC,CAAC;AAG3C,SAAS;AACT,OAAO,MAAM,MAAM,oCAAoC,CAAC;AACxD,OAAO,yBAAyB,MAAM,kDAAkD,CAAC;AAEzF,QAAQ;AACR,OAAO,mDAAmD,CAAC;AAoC3D;;;;;;;;GAQG;AAoBH,IAAe,QAAQ,gBAAvB,MAAe,QAAS,SAAQ,YAAY;IA0I3C;QACC,KAAK,EAAE,CAAC;QAtIT;;;;;;;;UAQE;QAEF,SAAI,GAAsB,QAAQ,CAAC;QAEnC;;;;;;;;;;;;;WAaG;QAEH,4BAAuB,GAAoC,EAAE,CAAC;QAE9D;;;;;;WAMG;QAEH,cAAS,GAAG,KAAK,CAAC;QAWlB;;;UAGE;QAEF,WAAM,GAAG,KAAK,CAAC;QAEf;;;;;;WAMG;QAEH,cAAS,GAAmB,MAAM,CAAC;QA8BnC,mBAAc,GAA2B,MAAM,CAAC;QAEhD;;;;;;WAMG;QACH,cAAS,GAAG,KAAK,CAAC;QAElB;;;;WAIG;QAEH,eAAU,GAAG,GAAG,CAAC;QA0BhB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC3C,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;gBAChB,IAAI,CAAC,UAAU,EAAE,CAAC;YACnB,CAAC;QACF,CAAC,CAAC;QAEF,IAAI,CAAC,UAAU,GAAG,GAAG,EAAE;YACtB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACjB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACrB,CAAC;QACF,CAAC,CAAC;IACH,CAAC;IAED,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,KAAK,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACtJ,CAAC;IAED,UAAU;QACT,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACtD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACvD,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IAC1D,CAAC;IAED,SAAS;QACR,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACzD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC5D,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC3D,CAAC;IAED,UAAU,CAAC,CAAgB;QAC1B,MAAM,wBAAwB,GAAG,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;QAEpE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,wBAAwB,EAAE,CAAC;YAC5D,OAAO;QACR,CAAC;QAED,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAEpB,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,MAAM,EACnD,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC;QAErC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,aAAa,CAAC,EAAE,CAAC;YACjE,IAAI,CAAC,QAAQ,EAAE,CAAC;QACjB,CAAC;QAED,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACb,IAAI,CAAC,SAAS,EAAE,CAAC;QAClB,CAAC;IACF,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QAElB,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACjB,CAAC;IACF,CAAC;IAED,YAAY;QACX,IAAI,CAAC,QAAQ,EAAE,CAAC;IACjB,CAAC;IAED,UAAU;QACT,IAAI,IAAI,CAAC,cAAc,EAAG,CAAC,OAAO,CAAC,qBAAqB,CAAC,EAAE,CAAC;YAC3D,OAAO;QACR,CAAC;QACD,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,UAAU,CAAC,CAAa;QACvB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAEpB,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;YACxC,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC;IACF,CAAC;IAED,WAAW,CAAC,CAAa;QACxB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,MAAM,aAAa,GAAG,CAAC,CAAC,aAAqB,CAAC;YAC9C,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,UAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC;gBACnG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACxB,CAAC;QACF,CAAC;QAED,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;YACxC,OAAO;QACR,CAAC;QAED,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,YAAY,CAAC,CAAY;QACxB,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC;YACrB,OAAO;QACR,CAAC;QAED,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACjC,YAAY,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;YACxC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YACrC,CAAC,CAAC,YAAY,CAAC,UAAU,GAAG,MAAM,CAAC;YACnC,CAAC,CAAC,YAAY,CAAC,aAAa,GAAG,MAAM,CAAC;QACvC,CAAC;IACF,CAAC;IAED,UAAU,CAAC,CAAY;QACtB,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;YACjC,YAAY,CAAC,mBAAmB,EAAE,CAAC;YACnC,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;QACrC,CAAC;IACF,CAAC;IAED;;;OAGG;IACH,8BAA8B,CAAC,CAAc;QAC5C,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACR,CAAC;QAED,IAAI,CAAC,kBAAkB,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAG,CAAC,CAAC,MAAmB,CAAC,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,CAAC,CAAC;IAC3I,CAAC;IAED,+BAA+B,CAAC,CAAc;QAC7C,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACR,CAAC;QAED,IAAI,CAAC,kBAAkB,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAE,CAAC,CAAC,MAAsB,CAAC,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,CAAC,CAAC;IAC/I,CAAC;IAED,QAAQ;QACP,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,EAAE,CAAC;YAChF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACpB,CAAC;IACF,CAAC;IAED,QAAQ;QACP,IAAI,CAAC,kBAAkB,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,yBAAyB,EAAE,KAAK,EAAE,CAAC,CAAC;IAClG,CAAC;IAED,aAAa;QACZ,IAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAClF,CAAC;IAED,aAAa,CAAC,CAAQ;QACrB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,OAAO;QACR,CAAC;QACD,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;QACvB,IAAI,QAAQ,CAAC,aAAa,KAAK,IAAI,EAAE,CAAC;YACrC,IAAI,CAAC,KAAK,EAAE,CAAC;QACd,CAAC;IACF,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,MAAM,CAAC;IACjF,CAAC;IAED,IAAI,2BAA2B;QAC9B,OAAO,IAAI,CAAC,cAAc,KAAK,iBAAiB,CAAC,QAAQ;eACrD,IAAI,CAAC,cAAc,KAAK,iBAAiB,CAAC,WAAW,CAAC;IAC3D,CAAC;IAED,IAAI,0BAA0B;QAC7B,OAAO,CAAC,IAAI,CAAC,2BAA2B;eACpC,CAAC,IAAI,CAAC,cAAc,KAAK,iBAAiB,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,KAAK,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAC/G,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO;YACN,iBAAiB,CAAC,WAAW;YAC7B,iBAAiB,CAAC,SAAS;YAC3B,iBAAiB,CAAC,MAAM;SACxB,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAmC,CAAC,CAAC;IACtD,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,cAAc,KAAK,iBAAiB,CAAC,QAAQ,CAAC;IAC3D,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,cAAc,KAAK,iBAAiB,CAAC,MAAM,CAAC;IACzD,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,MAAM,CAAC;IAC1C,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,UAAU,CAAC;IAC9C,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,MAAM,CAAC;IAC1C,CAAC;IAED,IAAI,aAAa;QAChB,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAChD,OAAO,IAAI,CAAC,QAAQ,CAAC;QACtB,CAAC;QAED,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,IAAI,sBAAsB;QACzB,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAChC,OAAO,IAAI,CAAC,qBAAiC,CAAC;QAC/C,CAAC;QACD,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,IAAI,CAAC,cAAc,CAAC,WAAW,EAAc,CAAC;QACtD,CAAC;QACD,OAAO,CAAC,IAAI,CAAC,wBAAwB,IAAI,UAAU,CAAa,CAAC;IAClE,CAAC;IAED,IAAI,gBAAgB;QACnB,IAAI,gBAAgB,CAAC;QAErB,mGAAmG;QACnG,sFAAsF;QACtF,+EAA+E;QAC/E,sFAAsF;QACtF,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE,CAAC;YACtC,gBAAgB,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,UAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,UAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;QAC/I,CAAC;QAED,OAAO,gBAAgB,CAAC;IACzB,CAAC;IAED,IAAI,UAAU;QACb,OAAO,UAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;IACnC,CAAC;IAED,IAAI,kBAAkB;QACrB,IAAK,IAA4B,CAAC,cAAc,EAAE,CAAC;YAClD,0DAA0D;YAC1D,OAAO,GAAG,IAAI,CAAC,GAAG,gBAAgB,CAAC;QACpC,CAAC;QAED,kFAAkF;QAClF,OAAO,GAAG,IAAI,CAAC,GAAG,YAAY,IAAI,CAAC,GAAG,gBAAgB,CAAC;IACxD,CAAC;IAED,IAAI,kBAAkB;QACrB,MAAM,KAAK,GAAG;YACb,IAAI,CAAC,QAAQ,CAAC,iBAAiB;YAC/B,IAAI,CAAC,cAAc;YACnB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS;SAC3E,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAElB,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,GAAG,IAAI,CAAC,GAAG,4BAA4B,CAAC;IAChD,CAAC;IAED,IAAI,QAAQ;QACX,OAAO;YACN,IAAI,EAAE,IAAI,CAAC,sBAAsB;YACjC,YAAY,EAAE,SAAS;YACvB,SAAS,EAAE,SAAS;YACpB,SAAS,EAAE,UAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,6BAA6B,CAAC;YACrE,oBAAoB,EAAE,UAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,iCAAiC,CAAC;YACpF,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ;YACnD,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,WAAW;YACjD,QAAQ,EAAE,IAAI,CAAC,uBAAuB,CAAC,YAAY;YACnD,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,eAAe,EAAE,IAAI,CAAC,mBAAmB,IAAI,SAAS;SACtD,CAAC;IACH,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,IAAI,CAAC;IAC1C,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IAED,SAAS;QACR,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAG,CAAC;QAE3C,IAAI,gBAAgB,EAAE,KAAK,WAAW,EAAE,CAAC;YACxC,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAChD,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;gBACxB,OAAO;YACR,CAAC;YACD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QACvB,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,WAAW,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC;IACF,CAAC;IAED,cAAc,CAAC,CAAgB;QAC9B,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAChD,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;YAC5D,MAAM,SAAS,GAAG,YAAY,GAAG,CAAC,CAAC;YAEnC,IAAI,YAAY,KAAK,CAAC,CAAC,IAAI,SAAS,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC;gBAC1D,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,UAAU,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;YAC/B,CAAC;iBAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,CAAC;gBACtD,CAAC,CAAC,cAAc,EAAE,CAAC;YACpB,CAAC;YACD,OAAO;QACR,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,CAAC;YAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;QACpB,CAAC;IACF,CAAC;IAED,kBAAkB,CAAC,CAAgB;QAClC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAChD,MAAM,YAAY,GAAG,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;YAC5D,IAAI,YAAY,GAAG,CAAC,EAAE,CAAC;gBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,UAAU,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;YACtC,CAAC;iBAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,EAAE,CAAC;gBACvD,CAAC,CAAC,cAAc,EAAE,CAAC;YACpB,CAAC;YACD,OAAO;QACR,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,EAAE,CAAC;YAChD,CAAC,CAAC,cAAc,EAAE,CAAC;QACpB,CAAC;IACF,CAAC;IAED,qBAAqB;QACpB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAG,CAAC;QAC3C,OAAO,mBAAmB,CAAC,WAAW,CAAC,CAAC;IACzC,CAAC;IAED,qBAAqB,CAAC,UAAyB;QAC9C,MAAM,aAAa,GAAG,gBAAgB,EAAiB,CAAC;QACxD,OAAO,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,aAAa,IAAI,CAAC,EAAE,CAAC,UAAU,KAAK,IAAI,IAAI,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAC9H,CAAC;IAED,uBAAuB;QACtB,OAAO,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;IACjE,CAAC;IAED,qBAAqB;QACpB,OAAO,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IAChD,CAAC;IAED,yBAAyB;QACxB,OAAO,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACxE,CAAC;IAED,qBAAqB,CAAC,WAAmB;QACxC,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAChD,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;YACxB,OAAO;QACR,CAAC;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC/D,MAAM,cAAc,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7C,cAAc,CAAC,KAAK,EAAE,CAAC;QAEvB,OAAO,SAAS,CAAC;IAClB,CAAC;CACD,CAAA;AAngBA;IADC,QAAQ,EAAE;sCACwB;AAiBnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACmC;AAU9D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACV;AASlB;IADC,QAAQ,EAAE;yCACM;AAOjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACb;AAUf;IADC,QAAQ,EAAE;2CACwB;AAQ3B;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACF;AAa1B;IADC,QAAQ,EAAE;gDACyE;AAGpF;IADC,QAAQ,EAAE;uDACoB;AAG/B;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;0DACE;AAGlC;IADC,QAAQ,EAAE;gDACqC;AAiBhD;IADC,QAAQ,EAAE;4CACM;AAWjB;IADC,IAAI,EAAE;8CACsB;AAUtB;IADN,IAAI,CAAC,oBAAoB,CAAC;kCACG;AAxIhB,QAAQ;IAnBtB,aAAa,CAAC;QACd,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE;YACP,YAAY,CAAC,MAAM;YACnB,yBAAyB;YACzB,MAAM;SACN;KACD,CAAC;IACF;;;OAGG;;IACF,KAAK,CAAC,cAAc,EAAE;QACtB,OAAO,EAAE,IAAI;KACb,CAAC;IACD,KAAK,CAAC,qBAAqB,EAAE;QAC7B,OAAO,EAAE,IAAI;KACb,CAAC;GACa,QAAQ,CAkhBtB;AAED,eAAe,QAAQ,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport {\n\tisSpace, isEnter, isDelete, isF2,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport type { AccessibilityAttributes, AriaRole, AriaHasPopup } from \"@ui5/webcomponents-base\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/edit.js\";\nimport DragRegistry from \"@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js\";\nimport Highlight from \"./types/Highlight.js\";\nimport ListItemType from \"./types/ListItemType.js\";\nimport ListSelectionMode from \"./types/ListSelectionMode.js\";\nimport ListItemBase from \"./ListItemBase.js\";\nimport type RadioButton from \"./RadioButton.js\";\nimport type CheckBox from \"./CheckBox.js\";\nimport type { IButton } from \"./Button.js\";\nimport {\n\tDELETE,\n\tARIA_LABEL_LIST_ITEM_CHECKBOX,\n\tARIA_LABEL_LIST_ITEM_RADIO_BUTTON,\n\tLIST_ITEM_ACTIVE,\n\tLIST_ITEM_SELECTED,\n\tLIST_ITEM_NOT_SELECTED,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport type ListItemAccessibleRole from \"./types/ListItemAccessibleRole.js\";\n\n// Styles\nimport styles from \"./generated/themes/ListItem.css.js\";\nimport listItemAdditionalTextCss from \"./generated/themes/ListItemAdditionalText.css.js\";\n\n// Icons\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\ninterface IAccessibleListItem {\n\taccessibleName?: string;\n\taccessibleNameRef?: string;\n}\n\ntype SelectionRequestEventDetail = {\n\titem: ListItemBase,\n\tselectionComponentPressed: boolean,\n\tselected?: boolean,\n\tkey?: string,\n}\n\ntype AccInfo = {\n\trole?: AriaRole \| undefined;\n\tariaExpanded?: boolean;\n\tariaLevel?: number;\n\tariaLabel: string;\n\tariaLabelRadioButton: string;\n\tariaSelectedText?: string;\n\tariaHaspopup?: `${AriaHasPopup}`;\n\tposinset?: number;\n\tsetsize?: number;\n\tariaSelected?: boolean;\n\tariaChecked?: boolean;\n\tlistItemAriaLabel?: string;\n\tariaOwns?: string;\n\ttooltip?: string;\n\tariaKeyShortcuts?: string;\n\tariaDescribedBy?: string;\n}\n\ntype ListItemAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\" \| \"ariaSetsize\" \| \"ariaPosinset\">;\n\n/*\n @class\n * A class to serve as a base\n * for the `ListItemStandard` and `ListItemCustom` classes.\n * @constructor\n * @abstract\n * @extends ListItemBase\n * @public\n /\n@customElement({\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: [\n\t\tListItemBase.styles,\n\t\tlistItemAdditionalTextCss,\n\t\tstyles,\n\t],\n})\n/\n Fired when the user clicks on the detail button when type is `Detail`.\n * @public\n /\n@event(\"detail-click\", {\n\tbubbles: true,\n})\n@event(\"selection-requested\", {\n\tbubbles: true,\n})\nabstract class ListItem extends ListItemBase {\n\teventDetails!: ListItemBase[\"eventDetails\"] & {\n\t\t\"detail-click\": { item: ListItem, selected: boolean };\n\t\t\"selection-requested\": SelectionRequestEventDetail,\n\t}\n\t/\n\t Defines the visual indication and behavior of the list items.\n\t * Available options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\t \n\t Note: When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\n\t * while with type `Inactive` and `Detail` - will not.\n\t * @default \"Active\"\n\t * @public\n\t/\n\t@property()\n\ttype: `${ListItemType}` = \"Active\";\n\n\t/\n\t Defines the additional accessibility attributes that will be applied to the component.\n\t * The following fields are supported:\n\t \n\t - ariaSetsize: Defines the number of items in the current set when not all items in the set are present in the DOM.\n\t * Note: The value is an integer reflecting the number of items in the complete set. If the size of the entire set is unknown, set `-1`.\n\t \n\t \t- ariaPosinset: Defines an element's number or position in the current set when not all items are present in the DOM.\n\t * \tNote: The value is an integer greater than or equal to 1, and less than or equal to the size of the set when that size is known.\n\t \n\t @default {}\n\t * @public\n\t * @since 1.15.0\n\t /\n\t@property({ type: Object })\n\taccessibilityAttributes: ListItemAccessibilityAttributes = {};\n\n\t/\n\t The navigated state of the list item.\n\t * If set to `true`, a navigation indicator is displayed at the end of the list item.\n\t * @default false\n\t * @public\n\t * @since 1.10.0\n\t /\n\t@property({ type: Boolean })\n\tnavigated = false;\n\n\t/\n\t Defines the text of the tooltip that would be displayed for the list item.\n\t * @default undefined\n\t * @public\n\t * @since 1.23.0\n\t /\n\t@property()\n\ttooltip?: string;\n\n\t/\n\t Indicates if the list item is active, e.g pressed down with the mouse or the keyboard keys.\n\t * @private\n\t/\n\t@property({ type: Boolean })\n\tactive = false;\n\n\t/\n\t Defines the highlight state of the list items.\n\t * Available options are: `\"None\"` (by default), `\"Positive\"`, `\"Critical\"`, `\"Information\"` and `\"Negative\"`.\n\t * @default \"None\"\n\t * @public\n\t * @since 1.24\n\t /\n\t@property()\n\thighlight: `${Highlight}` = \"None\";\n\n\t/\n\t Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tdeclare selected: boolean;\n\n\t/\n\t Used to define the role of the list item.\n\t \n\t Note: If not set, the role is automatically inherited from the parent `ui5-list` based on its `accessible-role` property\n\t * (e.g. `Menu` -> `MenuItem`, `Tree` -> `TreeItem`, `ListBox` -> `Option`).\n\t * An explicitly set `accessible-role` on the list item takes precedence over the inherited role.\n\t * @default undefined\n\t * @public\n\t * @since 1.3.0\n\t /\n\t@property()\n\taccessibleRole?: `${Exclude<ListItemAccessibleRole, ListItemAccessibleRole.Group>}`;\n\n\t@property()\n\t_forcedAccessibleRole?: string;\n\n\t@property({ noAttribute: true })\n\t_inheritedAccessibleRole?: string;\n\n\t@property()\n\t_selectionMode: `${ListSelectionMode}` = \"None\";\n\n\t/\n\t Indicates whether the list item is in edit mode.\n\t * When active, Tab cycles through internal focusable elements\n\t * instead of navigating to the next list item.\n\t * Toggled by F2; also set by the parent List on F7.\n\t * @private\n\t /\n\t_editMode = false;\n\n\t/\n\t Defines the current media query size.\n\t * @default \"S\"\n\t * @private\n\t /\n\t@property()\n\tmediaRange = \"S\";\n\n\t/\n\t Defines the delete button, displayed in \"Delete\" mode.\n\t * Note: While the slot allows custom buttons, to match\n\t * design guidelines, please use the `ui5-button` component.\n\t * Note: When the slot is not present, a built-in delete button will be displayed.\n\t * @since 1.9.0\n\t * @public\n\t/\n\t@slot()\n\tdeleteButton!: Slot<IButton>;\n\n\tdeactivateByKey: (e: KeyboardEvent) => void;\n\tdeactivate: () => void;\n\t// used in template, implemented in TreeItemBase, ListItemStandard\n\taccessibleName?: string;\n\t// used in ListItem template but implemented in TreeItemBase\n\tindeterminate?: boolean;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.deactivateByKey = (e: KeyboardEvent) => {\n\t\t\tif (isEnter(e)) {\n\t\t\t\tthis.deactivate();\n\t\t\t}\n\t\t};\n\n\t\tthis.deactivate = () => {\n\t\t\tif (this.active) {\n\t\t\t\tthis.active = false;\n\t\t\t}\n\t\t};\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.actionable = (this.type === ListItemType.Active \|\| this.type === ListItemType.Navigation) && (this._selectionMode !== ListSelectionMode.Delete);\n\t}\n\n\tonEnterDOM() {\n\t\tsuper.onEnterDOM();\n\t\tdocument.addEventListener(\"mouseup\", this.deactivate);\n\t\tdocument.addEventListener(\"touchend\", this.deactivate);\n\t\tdocument.addEventListener(\"keyup\", this.deactivateByKey);\n\t}\n\n\tonExitDOM() {\n\t\tdocument.removeEventListener(\"mouseup\", this.deactivate);\n\t\tdocument.removeEventListener(\"keyup\", this.deactivateByKey);\n\t\tdocument.removeEventListener(\"touchend\", this.deactivate);\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tconst isInternalElementFocused = e.target !== this.getFocusDomRef();\n\n\t\tif ((isSpace(e) \|\| isEnter(e)) && isInternalElementFocused) {\n\t\t\treturn;\n\t\t}\n\n\t\tsuper._onkeydown(e);\n\n\t\tconst itemActive = this.type === ListItemType.Active,\n\t\t\titemNavigated = this.typeNavigation;\n\n\t\tif ((isSpace(e) \|\| isEnter(e)) && (itemActive \|\| itemNavigated)) {\n\t\t\tthis.activate();\n\t\t}\n\n\t\tif (isF2(e)) {\n\t\t\tthis._handleF2();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tsuper._onkeyup(e);\n\n\t\tif (isSpace(e) \|\| isEnter(e)) {\n\t\t\tthis.deactivate();\n\t\t}\n\n\t\tif (this.modeDelete && isDelete(e)) {\n\t\t\tthis.onDelete();\n\t\t}\n\t}\n\n\t_onmousedown() {\n\t\tthis.activate();\n\t}\n\n\t_onmouseup() {\n\t\tif (this.getFocusDomRef()!.matches(\":has(:focus-within)\")) {\n\t\t\treturn;\n\t\t}\n\t\tthis.deactivate();\n\t}\n\n\t_ontouchend() {\n\t\tthis._onmouseup();\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tsuper._onfocusin(e);\n\n\t\tif (e.target !== this.getFocusDomRef()) {\n\t\t\tthis.deactivate();\n\t\t}\n\t}\n\n\t_onfocusout(e: FocusEvent) {\n\t\tif (this._editMode) {\n\t\t\tconst relatedTarget = e.relatedTarget as Node;\n\t\t\tif (!relatedTarget \|\| !(this.contains(relatedTarget) \|\| this.shadowRoot!.contains(relatedTarget))) {\n\t\t\t\tthis._editMode = false;\n\t\t\t}\n\t\t}\n\n\t\tif (e.target !== this.getFocusDomRef()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.deactivate();\n\t}\n\n\t_ondragstart(e: DragEvent) {\n\t\tif (!e.dataTransfer) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (e.target === this._listItem) {\n\t\t\tDragRegistry.setDraggedElement(this, e);\n\t\t\tthis.setAttribute(\"data-moving\", \"\");\n\t\t\te.dataTransfer.dropEffect = \"move\";\n\t\t\te.dataTransfer.effectAllowed = \"move\";\n\t\t}\n\t}\n\n\t_ondragend(e: DragEvent) {\n\t\tif (e.target === this._listItem) {\n\t\t\tDragRegistry.clearDraggedElement();\n\t\t\tthis.removeAttribute(\"data-moving\");\n\t\t}\n\t}\n\n\t/\n\t Called when selection components in Single (ui5-radio-button)\n\t * and Multi (ui5-checkbox) selection modes are used.\n\t */\n\tonMultiSelectionComponentPress(e: CustomEvent) {\n\t\tif (this.isInactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"selection-requested\", { item: this, selected: (e.target as CheckBox).checked, selectionComponentPressed: true });\n\t}\n\n\tonSingleSelectionComponentPress(e: CustomEvent) {\n\t\tif (this.isInactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"selection-requested\", { item: this, selected: !(e.target as RadioButton).checked, selectionComponentPressed: true });\n\t}\n\n\tactivate() {\n\t\tif (this.type === ListItemType.Active \|\| this.type === ListItemType.Navigation) {\n\t\t\tthis.active = true;\n\t\t}\n\t}\n\n\tonDelete() {\n\t\tthis.fireDecoratorEvent(\"selection-requested\", { item: this, selectionComponentPressed: false });\n\t}\n\n\tonDetailClick() {\n\t\tthis.fireDecoratorEvent(\"detail-click\", { item: this, selected: this.selected });\n\t}\n\n\tfireItemPress(e: Event) {\n\t\tif (this.isInactive) {\n\t\t\treturn;\n\t\t}\n\t\tsuper.fireItemPress(e);\n\t\tif (document.activeElement !== this) {\n\t\t\tthis.focus();\n\t\t}\n\t}\n\n\tget isInactive() {\n\t\treturn this.type === ListItemType.Inactive \|\| this.type === ListItemType.Detail;\n\t}\n\n\tget placeSelectionElementBefore() {\n\t\treturn this._selectionMode === ListSelectionMode.Multiple\n\t\t\t\|\| this._selectionMode === ListSelectionMode.SingleStart;\n\t}\n\n\tget placeSelectionElementAfter() {\n\t\treturn !this.placeSelectionElementBefore\n\t\t\t&& (this._selectionMode === ListSelectionMode.SingleEnd \|\| this._selectionMode === ListSelectionMode.Delete);\n\t}\n\n\tget modeSingleSelect() {\n\t\treturn [\n\t\t\tListSelectionMode.SingleStart,\n\t\t\tListSelectionMode.SingleEnd,\n\t\t\tListSelectionMode.Single,\n\t\t].includes(this._selectionMode as ListSelectionMode);\n\t}\n\n\tget modeMultiple() {\n\t\treturn this._selectionMode === ListSelectionMode.Multiple;\n\t}\n\n\tget modeDelete() {\n\t\treturn this._selectionMode === ListSelectionMode.Delete;\n\t}\n\n\tget typeDetail() {\n\t\treturn this.type === ListItemType.Detail;\n\t}\n\n\tget typeNavigation() {\n\t\treturn this.type === ListItemType.Navigation;\n\t}\n\n\tget typeActive() {\n\t\treturn this.type === ListItemType.Active;\n\t}\n\n\tget _ariaSelected() {\n\t\tif (this.modeMultiple \|\| this.modeSingleSelect) {\n\t\t\treturn this.selected;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget listItemAccessibleRole() {\n\t\tif (this._forcedAccessibleRole) {\n\t\t\treturn this._forcedAccessibleRole as AriaRole;\n\t\t}\n\t\tif (this.accessibleRole) {\n\t\t\treturn this.accessibleRole.toLowerCase() as AriaRole;\n\t\t}\n\t\treturn (this._inheritedAccessibleRole \|\| \"listitem\") as AriaRole;\n\t}\n\n\tget ariaSelectedText() {\n\t\tlet ariaSelectedText;\n\n\t\t// Selected state needs to be supported separately since now the role mapping is list -> listitem[]\n\t\t// to avoid the issue of nesting interactive elements, ex. (option -> radio/checkbox);\n\t\t// The text is added to aria-describedby because as part of the aria-labelledby\n\t\t// the whole content of the item is readout when the aria-labelledby value is changed.\n\t\tif (this._ariaSelected !== undefined) {\n\t\t\tariaSelectedText = this._ariaSelected ? ListItem.i18nBundle.getText(LIST_ITEM_SELECTED) : ListItem.i18nBundle.getText(LIST_ITEM_NOT_SELECTED);\n\t\t}\n\n\t\treturn ariaSelectedText;\n\t}\n\n\tget deleteText() {\n\t\treturn ListItem.i18nBundle.getText(DELETE);\n\t}\n\n\tget hasDeleteButtonSlot() {\n\t\treturn !!this.deleteButton.length;\n\t}\n\n\tget _accessibleNameRef(): string {\n\t\tif ((this as IAccessibleListItem).accessibleName) {\n\t\t\t// accessibleName is set - return labels excluding content\n\t\t\treturn `${this._id}-invisibleText`;\n\t\t}\n\n\t\t// accessibleName is not set - return _accInfo.listItemAriaLabel including content\n\t\treturn `${this._id}-content ${this._id}-invisibleText`;\n\t}\n\n\tget ariaLabelledByText() {\n\t\tconst texts = [\n\t\t\tthis._accInfo.listItemAriaLabel,\n\t\t\tthis.accessibleName,\n\t\t\tthis.typeActive ? ListItem.i18nBundle.getText(LIST_ITEM_ACTIVE) : undefined,\n\t\t].filter(Boolean);\n\n\t\treturn texts.join(\" \");\n\t}\n\n\tget _ariaDescribedByIds() {\n\t\treturn `${this._id}-invisibleText-describedby`;\n\t}\n\n\tget _accInfo(): AccInfo {\n\t\treturn {\n\t\t\trole: this.listItemAccessibleRole,\n\t\t\tariaExpanded: undefined,\n\t\t\tariaLevel: undefined,\n\t\t\tariaLabel: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),\n\t\t\tariaLabelRadioButton: ListItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),\n\t\t\tariaSelectedText: this.ariaSelectedText,\n\t\t\tariaHaspopup: this.accessibilityAttributes.hasPopup,\n\t\t\tsetsize: this.accessibilityAttributes.ariaSetsize,\n\t\t\tposinset: this.accessibilityAttributes.ariaPosinset,\n\t\t\ttooltip: this.tooltip,\n\t\t\tariaDescribedBy: this._ariaDescribedByIds \|\| undefined,\n\t\t};\n\t}\n\n\tget _hasHighlightColor() {\n\t\treturn this.highlight !== Highlight.None;\n\t}\n\n\tget hasConfigurableMode() {\n\t\treturn true;\n\t}\n\n\tget _listItem() {\n\t\treturn this.shadowRoot!.querySelector(\"li\");\n\t}\n\n\t_handleF2() {\n\t\tconst focusDomRef = this.getFocusDomRef()!;\n\n\t\tif (getActiveElement() === focusDomRef) {\n\t\t\tconst focusables = this._getFocusableElements();\n\t\t\tif (!focusables.length) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tthis._editMode = true;\n\t\t\tfocusables[0].focus();\n\t\t} else {\n\t\t\tthis._editMode = false;\n\t\t\tfocusDomRef.focus();\n\t\t}\n\t}\n\n\t_handleTabNext(e: KeyboardEvent) {\n\t\tif (this._editMode) {\n\t\t\tconst focusables = this._getFocusableElements();\n\t\t\tconst currentIndex = this._indexOfActiveElement(focusables);\n\t\t\tconst nextIndex = currentIndex + 1;\n\n\t\t\tif (currentIndex !== -1 && nextIndex < focusables.length) {\n\t\t\t\te.preventDefault();\n\t\t\t\tfocusables[nextIndex].focus();\n\t\t\t} else if (!this.fireDecoratorEvent(\"forward-after\")) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.fireDecoratorEvent(\"forward-after\")) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_handleTabPrevious(e: KeyboardEvent) {\n\t\tif (this._editMode) {\n\t\t\tconst focusables = this._getFocusableElements();\n\t\t\tconst currentIndex = this._indexOfActiveElement(focusables);\n\t\t\tif (currentIndex > 0) {\n\t\t\t\te.preventDefault();\n\t\t\t\tfocusables[currentIndex - 1].focus();\n\t\t\t} else if (!this.fireDecoratorEvent(\"forward-before\")) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.fireDecoratorEvent(\"forward-before\")) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_getFocusableElements(): HTMLElement[] {\n\t\tconst focusDomRef = this.getFocusDomRef()!;\n\t\treturn getTabbableElements(focusDomRef);\n\t}\n\n\t_indexOfActiveElement(focusables: HTMLElement[]): number {\n\t\tconst activeElement = getActiveElement() as HTMLElement;\n\t\treturn focusables.findIndex(el => el === activeElement \|\| (el.shadowRoot !== null && el.shadowRoot.contains(activeElement)));\n\t}\n\n\t_getFocusedElementIndex(): number {\n\t\treturn this._indexOfActiveElement(this._getFocusableElements());\n\t}\n\n\t_hasFocusableElements(): boolean {\n\t\treturn this._getFocusableElements().length > 0;\n\t}\n\n\t_isFocusOnInternalElement(): boolean {\n\t\treturn this._indexOfActiveElement(this._getFocusableElements()) !== -1;\n\t}\n\n\t_focusInternalElement(targetIndex: number) {\n\t\tconst focusables = this._getFocusableElements();\n\t\tif (!focusables.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst safeIndex = Math.min(targetIndex, focusables.length - 1);\n\t\tconst elementToFocus = focusables[safeIndex];\n\n\t\telementToFocus.focus();\n\n\t\treturn safeIndex;\n\t}\n}\n\nexport default ListItem;\nexport type {\n\tIAccessibleListItem,\n\tSelectionRequestEventDetail,\n\tListItemAccessibilityAttributes,\n};\n"]}

package/dist/ListItemTemplate.js CHANGED Viewed

@@ -16,7 +16,7 @@ const predefinedHooks = {
 };
 export default function ListItemTemplate(hooks) {
     const currentHooks = { ...predefinedHooks, ...hooks };
-    return _jsxs("li", { part: "native-li", "data-sap-focus-ref": true, tabindex: this._effectiveTabIndex, class: this.classes.main, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, onMouseUp: this._onmouseup, onMouseDown: this._onmousedown, onTouchStart: this._onmousedown, onTouchEnd: this._ontouchend, onClick: this._onclick, draggable: this.movable, onDragStart: this._ondragstart, onDragEnd: this._ondragend, role: this._accInfo.role, title: this._accInfo.tooltip, "aria-expanded": this._accInfo.ariaExpanded, "aria-level": this._accInfo.ariaLevel, "aria-haspopup": this._accInfo.ariaHaspopup, "aria-posinset": this._accInfo.posinset, "aria-setsize": this._accInfo.setsize, "aria-describedby": `${this._id}-invisibleText-describedby`, "aria-labelledby": this._accessibleNameRef, "aria-disabled": this._ariaDisabled, "aria-selected": this._accInfo.ariaSelected, "aria-checked": this._accInfo.ariaChecked, "aria-owns": this._accInfo.ariaOwns, "aria-keyshortcuts": this._accInfo.ariaKeyShortcuts, children: [currentHooks.listItemPreContent.call(this), this.placeSelectionElementBefore && selectionElement.call(this), this._hasHighlightColor && _jsx("div", { class: "ui5-li-highlight" }), _jsxs("div", { part: "content", id: `${this._id}-content`, class: "ui5-li-content", children: [currentHooks.imageBegin.call(this), currentHooks.iconBegin.call(this), currentHooks.listItemContent.call(this)] }), currentHooks.iconEnd.call(this), this.typeDetail && (_jsx("div", { class: "ui5-li-detailbtn", children: _jsx(Button, { part: "detail-button", design: "Transparent", onClick: this.onDetailClick, icon: editIcon }) })), this.typeNavigation && (_jsx(Icon, { name: slimArrowRightIcon })), this.navigated && (_jsx("div", { class: "ui5-li-navigated" })), this.placeSelectionElementAfter && (currentHooks.selectionElement.call(this)), _jsx("span", { id: `${this._id}-invisibleText`, class: "ui5-hidden-text", children: this.ariaLabelledByText }), _jsx("span", { id: `${this._id}-invisibleText-describedby`, class: "ui5-hidden-text", children: this._accInfo.ariaSelectedText })] });
+    return _jsxs("li", { part: "native-li", "data-sap-focus-ref": true, tabindex: this._effectiveTabIndex, class: this.classes.main, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, onMouseUp: this._onmouseup, onMouseDown: this._onmousedown, onTouchStart: this._onmousedown, onTouchEnd: this._ontouchend, onClick: this._onclick, draggable: this.movable, onDragStart: this._ondragstart, onDragEnd: this._ondragend, role: this._accInfo.role, title: this._accInfo.tooltip, "aria-expanded": this._accInfo.ariaExpanded, "aria-level": this._accInfo.ariaLevel, "aria-haspopup": this._accInfo.ariaHaspopup, "aria-posinset": this._accInfo.posinset, "aria-setsize": this._accInfo.setsize, "aria-describedby": this._accInfo.ariaDescribedBy, "aria-labelledby": this._accessibleNameRef, "aria-disabled": this._ariaDisabled, "aria-selected": this._accInfo.ariaSelected, "aria-checked": this._accInfo.ariaChecked, "aria-owns": this._accInfo.ariaOwns, "aria-keyshortcuts": this._accInfo.ariaKeyShortcuts, children: [currentHooks.listItemPreContent.call(this), this.placeSelectionElementBefore && selectionElement.call(this), this._hasHighlightColor && _jsx("div", { class: "ui5-li-highlight" }), _jsxs("div", { part: "content", id: `${this._id}-content`, class: "ui5-li-content", children: [currentHooks.imageBegin.call(this), currentHooks.iconBegin.call(this), currentHooks.listItemContent.call(this)] }), currentHooks.iconEnd.call(this), this.typeDetail && (_jsx("div", { class: "ui5-li-detailbtn", children: _jsx(Button, { part: "detail-button", design: "Transparent", onClick: this.onDetailClick, icon: editIcon }) })), this.typeNavigation && (_jsx(Icon, { name: slimArrowRightIcon })), this.navigated && (_jsx("div", { class: "ui5-li-navigated" })), this.placeSelectionElementAfter && (currentHooks.selectionElement.call(this)), _jsx("span", { id: `${this._id}-invisibleText`, class: "ui5-hidden-text", children: this.ariaLabelledByText }), _jsx("span", { id: `${this._id}-invisibleText-describedby`, class: "ui5-hidden-text", children: this._accInfo.ariaSelectedText })] });
 }
 function listItemPreContent() { }
 function listItemContent() { }

package/dist/ListItemTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListItemTemplate.js","sourceRoot":"","sources":["../src/ListItemTemplate.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,kBAAkB,MAAM,mDAAmD,CAAC;AACnF,OAAO,WAAW,MAAM,0CAA0C,CAAC;AACnE,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAC3C,OAAO,QAAQ,MAAM,eAAe,CAAC;AAWrC,MAAM,eAAe,GAAkB;IACtC,kBAAkB;IAClB,eAAe;IACf,UAAU;IACV,SAAS;IACT,OAAO;IACP,gBAAgB;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAiB,KAA8B;IACtF,MAAM,YAAY,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,KAAK,EAAE,CAAC;IAEtD,OAAO,cACN,IAAI,EAAC,WAAW,8BAEhB,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,mBACb,IAAI,CAAC,QAAQ,CAAC,YAAY,gBAC7B,IAAI,CAAC,QAAQ,CAAC,SAAS,mBACpB,IAAI,CAAC,QAAQ,CAAC,YAAY,mBAC1B,IAAI,CAAC,QAAQ,CAAC,QAAQ,kBACvB,IAAI,CAAC,QAAQ,CAAC,OAAO,sBACjB,~~GAAG,~~IAAI,CAAC,~~GAAG~~,~~4BAA4B~~,~~qBACxC~~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","sourcesContent":["import type { JsxTemplate } from \"@ui5/webcomponents-base/dist/index.js\";\nimport type ListItem from \"./ListItem.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\nimport editIcon from \"@ui5/webcomponents-icons/dist/edit.js\";\nimport slimArrowRightIcon from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport declineIcon from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport RadioButton from \"./RadioButton.js\";\nimport CheckBox from \"./CheckBox.js\";\n\nexport type ListItemHooks = {\n\tlistItemPreContent: JsxTemplate\n\tlistItemContent: JsxTemplate\n\timageBegin: JsxTemplate\n\ticonBegin: JsxTemplate\n\ticonEnd: JsxTemplate\n\tselectionElement: JsxTemplate\n}\n\nconst predefinedHooks: ListItemHooks = {\n\tlistItemPreContent,\n\tlistItemContent,\n\timageBegin,\n\ticonBegin,\n\ticonEnd,\n\tselectionElement,\n};\n\nexport default function ListItemTemplate(this: ListItem, hooks?: Partial<ListItemHooks>) {\n\tconst currentHooks = { ...predefinedHooks, ...hooks };\n\n\treturn <li\n\t\tpart=\"native-li\"\n\t\tdata-sap-focus-ref\n\t\ttabindex={this._effectiveTabIndex}\n\t\tclass={this.classes.main}\n\t\tonFocusIn={this._onfocusin}\n\t\tonFocusOut={this._onfocusout}\n\t\tonKeyUp={this._onkeyup}\n\t\tonKeyDown={this._onkeydown}\n\t\tonMouseUp={this._onmouseup}\n\t\tonMouseDown={this._onmousedown}\n\t\tonTouchStart={this._onmousedown}\n\t\tonTouchEnd={this._ontouchend}\n\t\tonClick={this._onclick}\n\t\tdraggable={this.movable}\n\t\tonDragStart={this._ondragstart}\n\t\tonDragEnd={this._ondragend}\n\t\trole={this._accInfo.role}\n\t\ttitle={this._accInfo.tooltip}\n\t\taria-expanded={this._accInfo.ariaExpanded}\n\t\taria-level={this._accInfo.ariaLevel}\n\t\taria-haspopup={this._accInfo.ariaHaspopup}\n\t\taria-posinset={this._accInfo.posinset}\n\t\taria-setsize={this._accInfo.setsize}\n\t\taria-describedby={~~`${~~this.~~_id~~}~~-invisibleText-describedby`}~~\n\t\taria-labelledby={this._accessibleNameRef}\n\t\taria-disabled={this._ariaDisabled}\n\t\taria-selected={this._accInfo.ariaSelected}\n\t\taria-checked={this._accInfo.ariaChecked}\n\t\taria-owns={this._accInfo.ariaOwns}\n\t\taria-keyshortcuts={this._accInfo.ariaKeyShortcuts}\n\t>\n\t\t{currentHooks.listItemPreContent.call(this)}\n\n\t\t{this.placeSelectionElementBefore && selectionElement.call(this)}\n\n\t\t{this._hasHighlightColor && <div class=\"ui5-li-highlight\"></div>}\n\n\t\t<div part=\"content\" id={`${this._id}-content`} class=\"ui5-li-content\">\n\t\t\t{currentHooks.imageBegin.call(this)}\n\t\t\t{currentHooks.iconBegin.call(this)}\n\t\t\t{currentHooks.listItemContent.call(this)}\n\t\t</div>\n\n\t\t{currentHooks.iconEnd.call(this)}\n\n\t\t{this.typeDetail && (\n\t\t\t<div class=\"ui5-li-detailbtn\">\n\t\t\t\t<Button\n\t\t\t\t\tpart=\"detail-button\"\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this.onDetailClick}\n\t\t\t\t\ticon={editIcon}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t)}\n\n\t\t{this.typeNavigation && (\n\t\t\t<Icon name={slimArrowRightIcon} />\n\t\t)}\n\n\t\t{this.navigated && (\n\t\t\t<div class=\"ui5-li-navigated\"></div>\n\t\t)}\n\n\t\t{this.placeSelectionElementAfter && (currentHooks.selectionElement.call(this))}\n\n\t\t<span\n\t\t\tid={`${this._id}-invisibleText`}\n\t\t\tclass=\"ui5-hidden-text\">\n\t\t\t{this.ariaLabelledByText}\n\t\t</span>\n\t\t<span\n\t\t\tid={`${this._id}-invisibleText-describedby`}\n\t\t\tclass=\"ui5-hidden-text\">\n\t\t\t{this._accInfo.ariaSelectedText}\n\t\t</span>\n\n\t</li >;\n}\n\nfunction listItemPreContent(this: ListItem) { }\nfunction listItemContent(this: ListItem) { }\nfunction imageBegin(this: ListItem) { }\nfunction iconBegin(this: ListItem) { }\nfunction iconEnd(this: ListItem) { }\nfunction selectionElement(this: ListItem) {\n\tswitch (true) {\n\tcase this.modeSingleSelect:\n\t\treturn (\n\t\t\t<RadioButton\n\t\t\t\tpart=\"radio\"\n\t\t\t\tdisabled={this.isInactive}\n\t\t\t\taccessibleName={this._accInfo.ariaLabelRadioButton}\n\t\t\t\ttabindex={-1}\n\t\t\t\tid={`${this._id}-singleSelectionElement`}\n\t\t\t\tclass=\"ui5-li-singlesel-radiobtn\"\n\t\t\t\tchecked={this.selected}\n\t\t\t\tonChange={this.onSingleSelectionComponentPress}\n\t\t\t/>\n\t\t);\n\tcase this.modeMultiple:\n\t\treturn (\n\t\t\t<CheckBox\n\t\t\t\tpart=\"checkbox\"\n\t\t\t\tdisabled={this.isInactive}\n\t\t\t\tindeterminate={this.indeterminate}\n\t\t\t\ttabindex={-1}\n\t\t\t\tid={`${this._id}-multiSelectionElement`}\n\t\t\t\tclass=\"ui5-li-multisel-cb\"\n\t\t\t\tchecked={this.selected}\n\t\t\t\taccessibleName={this._accInfo.ariaLabel}\n\t\t\t\tonChange={this.onMultiSelectionComponentPress}\n\t\t\t/>\n\t\t);\n\tcase this.modeDelete:\n\t\treturn (\n\t\t\t<div class=\"ui5-li-deletebtn\">\n\t\t\t\t{\n\t\t\t\t\tthis.hasDeleteButtonSlot ?\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\t<slot name=\"deleteButton\"></slot>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tpart=\"delete-button\"\n\t\t\t\t\t\t\t\tid={`${this._id}-deleteSelectionElement`}\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\ticon={declineIcon}\n\t\t\t\t\t\t\t\tonClick={this.onDelete}\n\t\t\t\t\t\t\t\ttooltip={this.deleteText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t</div >\n\t\t);\n\t}\n}\n"]}
1	+ {"version":3,"file":"ListItemTemplate.js","sourceRoot":"","sources":["../src/ListItemTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JsxTemplate } from \"@ui5/webcomponents-base/dist/index.js\";\nimport type ListItem from \"./ListItem.js\";\nimport Button from \"./Button.js\";\nimport Icon from \"./Icon.js\";\nimport editIcon from \"@ui5/webcomponents-icons/dist/edit.js\";\nimport slimArrowRightIcon from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport declineIcon from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport RadioButton from \"./RadioButton.js\";\nimport CheckBox from \"./CheckBox.js\";\n\nexport type ListItemHooks = {\n\tlistItemPreContent: JsxTemplate\n\tlistItemContent: JsxTemplate\n\timageBegin: JsxTemplate\n\ticonBegin: JsxTemplate\n\ticonEnd: JsxTemplate\n\tselectionElement: JsxTemplate\n}\n\nconst predefinedHooks: ListItemHooks = {\n\tlistItemPreContent,\n\tlistItemContent,\n\timageBegin,\n\ticonBegin,\n\ticonEnd,\n\tselectionElement,\n};\n\nexport default function ListItemTemplate(this: ListItem, hooks?: Partial<ListItemHooks>) {\n\tconst currentHooks = { ...predefinedHooks, ...hooks };\n\n\treturn <li\n\t\tpart=\"native-li\"\n\t\tdata-sap-focus-ref\n\t\ttabindex={this._effectiveTabIndex}\n\t\tclass={this.classes.main}\n\t\tonFocusIn={this._onfocusin}\n\t\tonFocusOut={this._onfocusout}\n\t\tonKeyUp={this._onkeyup}\n\t\tonKeyDown={this._onkeydown}\n\t\tonMouseUp={this._onmouseup}\n\t\tonMouseDown={this._onmousedown}\n\t\tonTouchStart={this._onmousedown}\n\t\tonTouchEnd={this._ontouchend}\n\t\tonClick={this._onclick}\n\t\tdraggable={this.movable}\n\t\tonDragStart={this._ondragstart}\n\t\tonDragEnd={this._ondragend}\n\t\trole={this._accInfo.role}\n\t\ttitle={this._accInfo.tooltip}\n\t\taria-expanded={this._accInfo.ariaExpanded}\n\t\taria-level={this._accInfo.ariaLevel}\n\t\taria-haspopup={this._accInfo.ariaHaspopup}\n\t\taria-posinset={this._accInfo.posinset}\n\t\taria-setsize={this._accInfo.setsize}\n\t\taria-describedby={this._accInfo.ariaDescribedBy}\n\t\taria-labelledby={this._accessibleNameRef}\n\t\taria-disabled={this._ariaDisabled}\n\t\taria-selected={this._accInfo.ariaSelected}\n\t\taria-checked={this._accInfo.ariaChecked}\n\t\taria-owns={this._accInfo.ariaOwns}\n\t\taria-keyshortcuts={this._accInfo.ariaKeyShortcuts}\n\t>\n\t\t{currentHooks.listItemPreContent.call(this)}\n\n\t\t{this.placeSelectionElementBefore && selectionElement.call(this)}\n\n\t\t{this._hasHighlightColor && <div class=\"ui5-li-highlight\"></div>}\n\n\t\t<div part=\"content\" id={`${this._id}-content`} class=\"ui5-li-content\">\n\t\t\t{currentHooks.imageBegin.call(this)}\n\t\t\t{currentHooks.iconBegin.call(this)}\n\t\t\t{currentHooks.listItemContent.call(this)}\n\t\t</div>\n\n\t\t{currentHooks.iconEnd.call(this)}\n\n\t\t{this.typeDetail && (\n\t\t\t<div class=\"ui5-li-detailbtn\">\n\t\t\t\t<Button\n\t\t\t\t\tpart=\"detail-button\"\n\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\tonClick={this.onDetailClick}\n\t\t\t\t\ticon={editIcon}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t)}\n\n\t\t{this.typeNavigation && (\n\t\t\t<Icon name={slimArrowRightIcon} />\n\t\t)}\n\n\t\t{this.navigated && (\n\t\t\t<div class=\"ui5-li-navigated\"></div>\n\t\t)}\n\n\t\t{this.placeSelectionElementAfter && (currentHooks.selectionElement.call(this))}\n\n\t\t<span\n\t\t\tid={`${this._id}-invisibleText`}\n\t\t\tclass=\"ui5-hidden-text\">\n\t\t\t{this.ariaLabelledByText}\n\t\t</span>\n\t\t<span\n\t\t\tid={`${this._id}-invisibleText-describedby`}\n\t\t\tclass=\"ui5-hidden-text\">\n\t\t\t{this._accInfo.ariaSelectedText}\n\t\t</span>\n\n\t</li >;\n}\n\nfunction listItemPreContent(this: ListItem) { }\nfunction listItemContent(this: ListItem) { }\nfunction imageBegin(this: ListItem) { }\nfunction iconBegin(this: ListItem) { }\nfunction iconEnd(this: ListItem) { }\nfunction selectionElement(this: ListItem) {\n\tswitch (true) {\n\tcase this.modeSingleSelect:\n\t\treturn (\n\t\t\t<RadioButton\n\t\t\t\tpart=\"radio\"\n\t\t\t\tdisabled={this.isInactive}\n\t\t\t\taccessibleName={this._accInfo.ariaLabelRadioButton}\n\t\t\t\ttabindex={-1}\n\t\t\t\tid={`${this._id}-singleSelectionElement`}\n\t\t\t\tclass=\"ui5-li-singlesel-radiobtn\"\n\t\t\t\tchecked={this.selected}\n\t\t\t\tonChange={this.onSingleSelectionComponentPress}\n\t\t\t/>\n\t\t);\n\tcase this.modeMultiple:\n\t\treturn (\n\t\t\t<CheckBox\n\t\t\t\tpart=\"checkbox\"\n\t\t\t\tdisabled={this.isInactive}\n\t\t\t\tindeterminate={this.indeterminate}\n\t\t\t\ttabindex={-1}\n\t\t\t\tid={`${this._id}-multiSelectionElement`}\n\t\t\t\tclass=\"ui5-li-multisel-cb\"\n\t\t\t\tchecked={this.selected}\n\t\t\t\taccessibleName={this._accInfo.ariaLabel}\n\t\t\t\tonChange={this.onMultiSelectionComponentPress}\n\t\t\t/>\n\t\t);\n\tcase this.modeDelete:\n\t\treturn (\n\t\t\t<div class=\"ui5-li-deletebtn\">\n\t\t\t\t{\n\t\t\t\t\tthis.hasDeleteButtonSlot ?\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\t<slot name=\"deleteButton\"></slot>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tpart=\"delete-button\"\n\t\t\t\t\t\t\t\tid={`${this._id}-deleteSelectionElement`}\n\t\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\t\ticon={declineIcon}\n\t\t\t\t\t\t\t\tonClick={this.onDelete}\n\t\t\t\t\t\t\t\ttooltip={this.deleteText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t</div >\n\t\t);\n\t}\n}\n"]}

package/dist/MenuItem.d.ts CHANGED Viewed

@@ -234,6 +234,7 @@ declare class MenuItem extends ListItem implements IMenuItem {
         listItemAriaLabel?: string;
         ariaOwns?: string;
         tooltip?: string;
+        ariaDescribedBy?: string;
     };
     get _popover(): ResponsivePopover | null;
     get _markChecked(): boolean;

package/dist/MultiInput.js CHANGED Viewed

@@ -221,7 +221,8 @@ let MultiInput = MultiInput_1 = class MultiInput extends Input {
         const relatedTarget = e.relatedTarget;
         const insideDOM = this.contains(relatedTarget);
         const insideShadowDom = this.shadowRoot.contains(relatedTarget);
-        if (!insideDOM && !insideShadowDom) {
+        const hasTokenToBeDeleted = this.tokenizer._tokens.some(token => token.toBeDeleted);
+        if (!insideDOM && !insideShadowDom && !hasTokenToBeDeleted) {
             this.tokenizer.expanded = false;
         }
         if (this.contains(relatedTarget) && relatedTarget.hasAttribute("ui5-token")) {