@ui5/webcomponents-fiori 0.0.0-dff5837d7 → 0.0.0-e03cd01f3

package/dist/NotificationListGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationListGroupItem.js","sourceRoot":"","sources":["../src/NotificationListGroupItem.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EACN,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GACzC,MAAM,sCAAsC,CAAC;AAC9C,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAG/E,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAGrE,QAAQ;AACR,OAAO,wBAAwB,MAAM,yDAAyD,CAAC;AAC/F,OAAO,uBAAuB,MAAM,wDAAwD,CAAC;AAE7F,QAAQ;AACR,OAAO,EACN,gCAAgC,EAChC,iCAAiC,EACjC,gCAAgC,EAChC,uDAAuD,GACvD,MAAM,mCAAmC,CAAC;AAE3C,YAAY;AACZ,OAAO,iCAAiC,MAAM,wCAAwC,CAAC;AAEvF,SAAS;AACT,OAAO,4BAA4B,MAAM,qDAAqD,CAAC;AAM/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AA6BH,IAAM,yBAAyB,iCAA/B,MAAM,yBAA0B,SAAQ,wBAAwB;IAAhE;;QAKC;;;;WAIG;QAEH,cAAS,GAAG,KAAK,CAAC;QAElB;;;;;;WAMG;QAEH,YAAO,GAAqC,MAAM,CAAC;IAiJpD,CAAC;IAvIA,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAChC,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IACzB,CAAC;IAED;;;OAGG;IACH,uBAAuB;QACtB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACtB,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,2BAAyB,CAAC,eAAe,CAAC,OAAO,CAAC,uDAAuD,CAAC,CAAC;IACnH,CAAC;IAED,IAAI,gBAAgB;QACnB,OAAO,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;IAC/C,CAAC;IAED,IAAI,UAAU;QACb,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,2BAAyB,CAAC,eAAe,CAAC,OAAO,CAAC,iCAAiC,CAAC,CAAC;QAC7F,CAAC;QAED,OAAO,2BAAyB,CAAC,eAAe,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC;IAC5F,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,2BAAyB,CAAC,eAAe,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC;IAC5F,CAAC;IAED,IAAI,cAAc;QACjB,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC;QAEpB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,GAAG,EAAE,UAAU,CAAC;QACxB,CAAC;QAED,MAAM,GAAG,GAAG,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC;QAC9B,CAAC;QAED,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtB,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED,IAAI,UAAU;QACb,OAAO,KAAK,CAAC;IACd,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,uBAAuB,CAAC;IAC5E,CAAC;IAED,eAAe;QACd,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IACnD,CAAC;IAED;;;OAGG;IACH,oBAAoB;QACnB,IAAI,CAAC,eAAe,EAAE,CAAC;IACxB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;IACtC,CAAC;IAED,gBAAgB;QACf,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,EAAE,aAAa,CAAC,+BAA+B,CAA8B,CAAC;QAChH,OAAO,SAAS,CAAC,gBAAgB,EAAE,CAAC;IACrC,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,CAAgB;QAChC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,EAAE,CAAC;YAChB,OAAO;QACR,CAAC;QAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YAChD,OAAO;QACR,CAAC;QAED,MAAM,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAE1B,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QACzB,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACvB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QACzB,MAAM,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACvB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QAEzB,IAAI,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,eAAe,EAAE,CAAC;QACxB,CAAC;QAED,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;YACnB,SAAS;YACT,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,CAAC,CAAC,wBAAwB,EAAE,CAAC;YAC9B,CAAC;QACF,CAAC;QAED,IAAI,KAAK,IAAI,IAAI,EAAE,CAAC;YACnB,WAAW;YACX,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACrB,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,CAAC,CAAC,wBAAwB,EAAE,CAAC;YAC9B,CAAC;QACF,CAAC;IACF,CAAC;IAED,eAAe;QACd,OAAO,IAAI,CAAC,SAAS,EAAE,EAAE,aAAa,CAAC,uBAAuB,CAAgB,CAAC;IAChF,CAAC;CACD,CAAA;AA3JA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DACV;AAUlB;IADC,QAAQ,EAAE;0DACwC;AAQnD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;wDACV;AA7B9B,yBAAyB;IA5B9B,aAAa,CAAC;QACd,GAAG,EAAE,2BAA2B;QAChC,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE;YACP,4BAA4B;SAC5B;QACD,QAAQ,EAAE,iCAAiC;KAC3C,CAAC;IAEF;;;OAGG;;IACF,KAAK,CAAC,QAAQ,EAAE;QAChB,OAAO,EAAE,IAAI;KACb,CAAC;IAEF;;;;;OAKG;;IACF,KAAK,CAAC,WAAW,EAAE;QACnB,OAAO,EAAE,IAAI;KACb,CAAC;GAEI,yBAAyB,CAsK9B;AAED,yBAAyB,CAAC,MAAM,EAAE,CAAC;AAEnC,eAAe,yBAAyB,CAAC","sourcesContent":["import {\n\tisSpace, isPlus, isMinus, isLeft, isRight,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type NotificationListGrowingMode from \"@ui5/webcomponents/dist/types/NotificationListGrowingMode.js\";\nimport type NotificationListGroupList from \"./NotificationListGroupList.js\";\nimport NotificationListItemBase from \"./NotificationListItemBase.js\";\nimport type NotificationListItem from \"./NotificationListItem.js\";\n\n// Icons\nimport iconNavigationRightArrow from \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport iconNavigationDownArrow from \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\n\n// Texts\nimport {\n\tNOTIFICATION_LIST_GROUP_ITEM_TXT,\n\tNOTIFICATION_LIST_GROUP_COLLAPSED,\n\tNOTIFICATION_LIST_GROUP_EXPANDED,\n\tNOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_COLLAPSE_TITLE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Templates\nimport NotificationListGroupItemTemplate from \"./NotificationListGroupItemTemplate.js\";\n\n// Styles\nimport NotificationListGroupItemCss from \"./generated/themes/NotificationListGroupItem.css.js\";\n\ntype NotificationListGroupItemToggleEventDetail = {\n\titem: NotificationListGroupItem,\n};\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-li-notification-group` is a special type of list item,\n * that unlike others can group items within self, usually `ui5-li-notification` items.\n *\n * The component consists of:\n *\n * - `Toggle` button to expand and collapse the group\n * - `TitleText` to entitle the group\n * - Items of the group\n *\n * ### Usage\n * The component should be used inside a `ui5-notification-list`.\n *\n * ### Keyboard Handling\n * The `ui5-li-notification-group` provides advanced keyboard handling.\n * This component provides fast navigation when the header is focused using the following keyboard shortcuts:\n *\n * - [Space] - toggles expand / collapse of the group\n * - [Plus] - expands the group\n * - [Minus] - collapses the group\n * - [Right] - expands the group\n * - [Left] - collapses the group\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js\";`\n * @constructor\n * @extends NotificationListItemBase\n * @since 1.0.0-rc.8\n * @public\n */\n@customElement({\n\ttag: \"ui5-li-notification-group\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: [\n\t\tNotificationListGroupItemCss,\n\t],\n\ttemplate: NotificationListGroupItemTemplate,\n})\n\n/**\n * Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.\n * @public\n */\n@event(\"toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when additional items are requested.\n *\n * @public\n * @since 2.2.0\n */\n@event(\"load-more\", {\n\tbubbles: true,\n})\n\nclass NotificationListGroupItem extends NotificationListItemBase {\n\teventDetails!: NotificationListItemBase[\"eventDetails\"] & {\n\t\ttoggle: NotificationListGroupItemToggleEventDetail;\n\t\t\"load-more\": void;\n\t}\n\t/**\n\t * Defines if the group is collapsed or expanded.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/**\n\t * Defines whether the component will have growing capability by pressing a `More` button.\n\t * When button is pressed `load-more` event will be fired.\n\t * @default \"None\"\n\t * @public\n\t * @since 2.2.0\n\t */\n\t@property()\n\tgrowing: `${NotificationListGrowingMode}` = \"None\";\n\n\t/**\n\t * Defines the items of the `ui5-li-notification-group`,\n\t * usually `ui5-li-notification` items.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<NotificationListItem>\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\n\t\tthis.items.forEach(item => {\n\t\t\titem._ariaLevel = 2;\n\t\t});\n\n\t\tif (this.loading) {\n\t\t\tthis.clearChildBusyIndicator();\n\t\t}\n\t\tthis.actionable = false;\n\t}\n\n\t/**\n\t * Clears child items loading state to show a single loading over the entire group,\n\t * instead of multiple BusyIndicator instances\n\t */\n\tclearChildBusyIndicator() {\n\t\tthis.items.forEach(item => {\n\t\t\titem.loading = false;\n\t\t});\n\t}\n\n\tget toggleIconAccessibleName() {\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_COLLAPSE_TITLE);\n\t}\n\n\tget accInvisibleText() {\n\t\treturn `${this.groupText} ${this.expandText}`;\n\t}\n\n\tget expandText() {\n\t\tif (this.collapsed) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_COLLAPSED);\n\t\t}\n\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_EXPANDED);\n\t}\n\n\tget groupText() {\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TXT);\n\t}\n\n\tget ariaLabelledBy() {\n\t\tconst id = this._id;\n\n\t\tif (this.loading) {\n\t\t\treturn `${id}-loading`;\n\t\t}\n\n\t\tconst ids = [];\n\n\t\tif (this.hasTitleText) {\n\t\t\tids.push(`${id}-title-text`);\n\t\t}\n\n\t\treturn ids.join(\" \");\n\t}\n\n\tget _expanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget _pressable() {\n\t\treturn false;\n\t}\n\n\tget groupCollapsedIcon() {\n\t\treturn this.collapsed ? iconNavigationRightArrow : iconNavigationDownArrow;\n\t}\n\n\ttoggleCollapsed() {\n\t\tthis.collapsed = !this.collapsed;\n\t\tthis.fireDecoratorEvent(\"toggle\", { item: this });\n\t}\n\n\t/**\n\t * Event handlers\n\t *\n\t */\n\t_onHeaderToggleClick() {\n\t\tthis.toggleCollapsed();\n\t}\n\n\t_onLoadMore() {\n\t\tthis.fireDecoratorEvent(\"load-more\");\n\t}\n\n\tgetGrowingButton() {\n\t\tconst innerList = this.getDomRef()?.querySelector(\"[ui5-notification-group-list]\") as NotificationListGroupList;\n\t\treturn innerList.getGrowingButton();\n\t}\n\n\tasync _onkeydown(e: KeyboardEvent) {\n\t\tconst isFocused = this.matches(\":focus\");\n\t\tif (!isFocused) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.getGrowingButton()?.matches(\":focus\")) {\n\t\t\treturn;\n\t\t}\n\n\t\tawait super._onkeydown(e);\n\n\t\tconst space = isSpace(e);\n\t\tconst plus = isPlus(e);\n\t\tconst minus = isMinus(e);\n\t\tconst left = isLeft(e);\n\t\tconst right = isRight(e);\n\n\t\tif (space) {\n\t\t\tthis.toggleCollapsed();\n\t\t}\n\n\t\tif (plus || right) {\n\t\t\t// expand\n\t\t\tif (this.collapsed) {\n\t\t\t\tthis.toggleCollapsed();\n\t\t\t\te.stopImmediatePropagation();\n\t\t\t}\n\t\t}\n\n\t\tif (minus || left) {\n\t\t\t// collapse\n\t\t\tif (!this.collapsed) {\n\t\t\t\tthis.toggleCollapsed();\n\t\t\t\te.stopImmediatePropagation();\n\t\t\t}\n\t\t}\n\t}\n\n\tgetHeaderDomRef() {\n\t\treturn this.getDomRef()?.querySelector(\".ui5-nli-group-header\") as HTMLElement;\n\t}\n}\n\nNotificationListGroupItem.define();\n\nexport default NotificationListGroupItem;\nexport type {\n\tNotificationListGroupItemToggleEventDetail,\n};\n"]}

package/dist/NotificationListGroupItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type NotificationListGroupItem from "./NotificationListGroupItem.js";
+export default function NotificationListItemTemplate(this: NotificationListGroupItem): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/NotificationListGroupItemTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import NotificationListGroupList from "./NotificationListGroupList.js";
+export default function NotificationListItemTemplate() {
+    return (_jsxs("li", { class: "ui5-nli-group-root ui5-nli-focusable", onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, tabindex: this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined, "aria-labelledby": this.ariaLabelledBy, "aria-description": this.accInvisibleText, "aria-level": 1, children: [this.loading && (_jsx("span", { id: `${this._id}-loading`, class: "ui5-hidden-text", children: this.loadingText })), _jsxs("div", { class: "ui5-nli-group-content-wrapper", children: [_jsxs("div", { class: {
+                            "ui5-nli-group-header": true,
+                            "ui5-nli-group-header-expanded": this._expanded,
+                        }, onClick: this._onHeaderToggleClick, onKeyDown: this._onkeydown, role: "button", "aria-expanded": this._expanded, "aria-controls": `${this._id}-notificationsList`, title: this.toggleIconAccessibleName, children: [_jsx(Icon, { name: this.groupCollapsedIcon, class: "ui5-nli-group-toggle-icon", mode: "Decorative" }), _jsx("div", { id: `${this._id}-title-text`, class: "ui5-nli-group-title-text", part: "title-text", role: "heading", "aria-level": 2, children: this.titleText }), _jsx("div", { class: "ui5-nli-group-divider" })] }), _jsx(NotificationListGroupList, { id: `${this._id}-notificationsList`, class: "ui5-nli-group-items", accessibleNameRef: `${this._id}-title-text`, growing: this.growing, loading: this.loading, loadingDelay: this.loadingDelay, onLoadMore: this._onLoadMore, children: _jsx("slot", {}) })] })] }));
+}
+//# sourceMappingURL=NotificationListGroupItemTemplate.js.map

package/dist/NotificationListGroupItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationListGroupItemTemplate.js","sourceRoot":"","sources":["../src/NotificationListGroupItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AAEvE,MAAM,CAAC,OAAO,UAAU,4BAA4B;IACnD,OAAO,CACN,cACC,KAAK,EAAC,sCAAsC,EAC5C,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,SAAS,qBACxD,IAAI,CAAC,cAAc,sBAClB,IAAI,CAAC,gBAAgB,gBAC3B,CAAC,aAEZ,IAAI,CAAC,OAAO,IAAI,CAChB,eACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,UAAU,EACzB,KAAK,EAAC,iBAAiB,YAEtB,IAAI,CAAC,WAAW,GACX,CACP,EACD,eAAK,KAAK,EAAC,+BAA+B,aACzC,eACC,KAAK,EAAE;4BACN,sBAAsB,EAAE,IAAI;4BAC5B,+BAA+B,EAAE,IAAI,CAAC,SAAS;yBAC/C,EACD,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,SAAS,mBACd,GAAG,IAAI,CAAC,GAAG,oBAAoB,EAC9C,KAAK,EAAE,IAAI,CAAC,wBAAwB,aACpC,KAAC,IAAI,IACJ,IAAI,EAAE,IAAI,CAAC,kBAAkB,EAC7B,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAC,YAAY,GAChB,EACF,cACC,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,aAAa,EAC5B,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,SAAS,gBACF,CAAC,YAEZ,IAAI,CAAC,SAAS,GACV,EACN,cAAK,KAAK,EAAC,uBAAuB,GAAO,IACpC,EACN,KAAC,yBAAyB,IACzB,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,oBAAoB,EACnC,KAAK,EAAC,qBAAqB,EAC3B,iBAAiB,EAAE,GAAG,IAAI,CAAC,GAAG,aAAa,EAC3C,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,IAAI,CAAC,WAAW,YAE5B,gBAAa,GACc,IACvB,IACF,CACL,CAAC;AACH,CAAC","sourcesContent":["import type NotificationListGroupItem from \"./NotificationListGroupItem.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport NotificationListGroupList from \"./NotificationListGroupList.js\";\n\nexport default function NotificationListItemTemplate(this: NotificationListGroupItem) {\n\treturn (\n\t\t<li\n\t\t\tclass=\"ui5-nli-group-root ui5-nli-focusable\"\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\ttabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}\n\t\t\taria-labelledby={this.ariaLabelledBy}\n\t\t\taria-description={this.accInvisibleText}\n\t\t\taria-level={1}\n\t\t>\n\t\t\t{this.loading && (\n\t\t\t\t<span\n\t\t\t\t\tid={`${this._id}-loading`}\n\t\t\t\t\tclass=\"ui5-hidden-text\"\n\t\t\t\t>\n\t\t\t\t\t{this.loadingText}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<div class=\"ui5-nli-group-content-wrapper\">\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"ui5-nli-group-header\": true,\n\t\t\t\t\t\t\"ui5-nli-group-header-expanded\": this._expanded,\n\t\t\t\t\t}}\n\t\t\t\t\tonClick={this._onHeaderToggleClick}\n\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-expanded={this._expanded}\n\t\t\t\t\taria-controls={`${this._id}-notificationsList`}\n\t\t\t\t\ttitle={this.toggleIconAccessibleName}>\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tname={this.groupCollapsedIcon}\n\t\t\t\t\t\tclass=\"ui5-nli-group-toggle-icon\"\n\t\t\t\t\t\tmode=\"Decorative\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tid={`${this._id}-title-text`}\n\t\t\t\t\t\tclass=\"ui5-nli-group-title-text\"\n\t\t\t\t\t\tpart=\"title-text\"\n\t\t\t\t\t\trole=\"heading\"\n\t\t\t\t\t\taria-level={2}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.titleText}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"ui5-nli-group-divider\"></div>\n\t\t\t\t</div>\n\t\t\t\t<NotificationListGroupList\n\t\t\t\t\tid={`${this._id}-notificationsList`}\n\t\t\t\t\tclass=\"ui5-nli-group-items\"\n\t\t\t\t\taccessibleNameRef={`${this._id}-title-text`}\n\t\t\t\t\tgrowing={this.growing}\n\t\t\t\t\tloading={this.loading}\n\t\t\t\t\tloadingDelay={this.loadingDelay}\n\t\t\t\t\tonLoadMore={this._onLoadMore}\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</NotificationListGroupList>\n\t\t\t</div>\n\t\t</li>\n\t);\n}\n"]}

package/dist/NotificationListGroupList.d.ts

@@ -0,0 +1,23 @@
+import List from "@ui5/webcomponents/dist/List.js";
+import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+/**
+ * @class
+ *
+ * Internal `ui5-li-notification-group-list` component,
+ * that is used to support keyboard navigation of the notification group internal list.
+ *
+ * @private
+ */
+declare class NotificationListGroupList extends List {
+    getEnabledItems(): never[];
+    _handleTabNext(): void;
+    onForwardBefore(): void;
+    onForwardAfter(): void;
+    onItemTabIndexChange(): void;
+    onItemFocused(): void;
+    _onfocusin(e: FocusEvent): void;
+    _onkeydown(): void;
+    focusItem(item: ListItemBase): void;
+    _onLoadMoreKeydown(e: KeyboardEvent): void;
+}
+export default NotificationListGroupList;

package/dist/NotificationListGroupList.js

@@ -0,0 +1,52 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import List from "@ui5/webcomponents/dist/List.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+/**
+ * @class
+ *
+ * Internal `ui5-li-notification-group-list` component,
+ * that is used to support keyboard navigation of the notification group internal list.
+ *
+ * @private
+ */
+let NotificationListGroupList = class NotificationListGroupList extends List {
+    getEnabledItems() {
+        return [];
+    }
+    _handleTabNext() {
+    }
+    onForwardBefore() {
+    }
+    onForwardAfter() {
+    }
+    onItemTabIndexChange() {
+    }
+    onItemFocused() {
+    }
+    _onfocusin(e) {
+        e.stopImmediatePropagation();
+    }
+    _onkeydown() {
+    }
+    focusItem(item) {
+        item.focus();
+    }
+    _onLoadMoreKeydown(e) {
+        if (isSpace(e)) {
+            e.stopImmediatePropagation();
+        }
+        super._onLoadMoreKeydown(e);
+    }
+};
+NotificationListGroupList = __decorate([
+    customElement("ui5-notification-group-list")
+], NotificationListGroupList);
+NotificationListGroupList.define();
+export default NotificationListGroupList;
+//# sourceMappingURL=NotificationListGroupList.js.map

package/dist/NotificationListGroupList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationListGroupList.js","sourceRoot":"","sources":["../src/NotificationListGroupList.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAErF,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAE/D;;;;;;;GAOG;AAEH,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,IAAI;IAC3C,eAAe;QACd,OAAO,EAAE,CAAC;IACX,CAAC;IAED,cAAc;IACd,CAAC;IAED,eAAe;IACf,CAAC;IAED,cAAc;IACd,CAAC;IAED,oBAAoB;IACpB,CAAC;IAED,aAAa;IACb,CAAC;IAED,UAAU,CAAC,CAAa;QACvB,CAAC,CAAC,wBAAwB,EAAE,CAAC;IAC9B,CAAC;IAED,UAAU;IAEV,CAAC;IAED,SAAS,CAAC,IAAkB;QAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;IACd,CAAC;IAED,kBAAkB,CAAC,CAAgB;QAClC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,CAAC,CAAC,wBAAwB,EAAE,CAAC;QAC9B,CAAC;QAED,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAC7B,CAAC;CACD,CAAA;AAvCK,yBAAyB;IAD9B,aAAa,CAAC,6BAA6B,CAAC;GACvC,yBAAyB,CAuC9B;AAED,yBAAyB,CAAC,MAAM,EAAE,CAAC;AAEnC,eAAe,yBAAyB,CAAC","sourcesContent":["import List from \"@ui5/webcomponents/dist/List.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport { isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\n\n/**\n * @class\n *\n * Internal `ui5-li-notification-group-list` component,\n * that is used to support keyboard navigation of the notification group internal list.\n *\n * @private\n */\n@customElement(\"ui5-notification-group-list\")\nclass NotificationListGroupList extends List {\n\tgetEnabledItems() {\n\t\treturn [];\n\t}\n\n\t_handleTabNext() {\n\t}\n\n\tonForwardBefore() {\n\t}\n\n\tonForwardAfter() {\n\t}\n\n\tonItemTabIndexChange() {\n\t}\n\n\tonItemFocused() {\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\te.stopImmediatePropagation();\n\t}\n\n\t_onkeydown() {\n\n\t}\n\n\tfocusItem(item: ListItemBase) {\n\t\titem.focus();\n\t}\n\n\t_onLoadMoreKeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\n\t\tsuper._onLoadMoreKeydown(e);\n\t}\n}\n\nNotificationListGroupList.define();\n\nexport default NotificationListGroupList;\n"]}

package/dist/NotificationListInternal.d.ts

@@ -0,0 +1,21 @@
+import List from "@ui5/webcomponents/dist/List.js";
+import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+/**
+ * @class
+ *
+ * Internal `ui5-li-notification-list-list` component,
+ * that is used to support keyboard navigation of the notification list internal list.
+ *
+ * @private
+ */
+declare class NotificationListInternal extends List {
+    constructor();
+    _allNavigationItems: Array<HTMLElement>;
+    getEnabledItems(): Array<ListItemBase>;
+    _onkeydown(e: KeyboardEvent): void;
+    _handleHomeKey(e: KeyboardEvent): void;
+    _handleEndKey(e: KeyboardEvent): void;
+    _focusSameItemOnNextRow(e: KeyboardEvent): void;
+    _isGrowingButton(item: Element | null): boolean | undefined;
+}
+export default NotificationListInternal;

package/dist/NotificationListInternal.js

@@ -0,0 +1,161 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import List from "@ui5/webcomponents/dist/List.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
+import NotificationListGroupItem from "./NotificationListGroupItem.js";
+import { isDown, isUp, isLeft, isRight, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+/**
+ * @class
+ *
+ * Internal `ui5-li-notification-list-list` component,
+ * that is used to support keyboard navigation of the notification list internal list.
+ *
+ * @private
+ */
+let NotificationListInternal = class NotificationListInternal extends List {
+    constructor() {
+        super();
+        this._allNavigationItems = [];
+        this._itemNavigation._navigationMode = NavigationMode.Auto;
+    }
+    getEnabledItems() {
+        const items = new Array();
+        const allNavigationItems = new Array();
+        this.getItems().forEach(item => {
+            items.push(item);
+            allNavigationItems.push(item);
+            if (item instanceof NotificationListGroupItem && !item.collapsed && !item.loading) {
+                item.items.forEach(subItem => {
+                    items.push(subItem);
+                    allNavigationItems.push(subItem);
+                });
+                const growingButton = item.getGrowingButton();
+                if (growingButton) {
+                    allNavigationItems.push(growingButton);
+                }
+            }
+        });
+        const growingButton = this.getGrowingButton();
+        if (growingButton) {
+            allNavigationItems.push(growingButton);
+        }
+        this._allNavigationItems = allNavigationItems;
+        return items;
+    }
+    _onkeydown(e) {
+        if (isEnd(e)) {
+            this._handleEndKey(e);
+            e.preventDefault();
+            return;
+        }
+        if (isHome(e)) {
+            this._handleHomeKey(e);
+            e.preventDefault();
+            return;
+        }
+        this._focusSameItemOnNextRow(e);
+    }
+    _handleHomeKey(e) {
+        e.stopImmediatePropagation();
+        const target = e.target;
+        const activeElement = getActiveElement();
+        if ((!this._isGrowingButton(activeElement) && target?.hasAttribute("ui5-li-notification-group"))
+            || target?.hasAttribute("ui5-menu-item")) {
+            return;
+        }
+        const currentFocusedItem = this.getEnabledItems()[this._itemNavigation._currentIndex];
+        if (!currentFocusedItem) {
+            return;
+        }
+        const currentFocusedIndex = this._allNavigationItems.indexOf(currentFocusedItem);
+        let nextFocusedIndex = 0;
+        for (let i = currentFocusedIndex - 1; i >= 0; i--) {
+            const item = this._allNavigationItems[i];
+            if (item.hasAttribute("ui5-li-notification-group")) {
+                nextFocusedIndex = i + 1;
+                break;
+            }
+        }
+        this._allNavigationItems[nextFocusedIndex].focus();
+    }
+    _handleEndKey(e) {
+        e.stopImmediatePropagation();
+        const target = e.target;
+        if (target?.hasAttribute("ui5-menu-item")) {
+            return;
+        }
+        const currentFocusedItem = this.getEnabledItems()[this._itemNavigation._currentIndex];
+        if (!currentFocusedItem) {
+            return;
+        }
+        const currentFocusedIndex = this._allNavigationItems.indexOf(currentFocusedItem);
+        let nextFocusedIndex = this._allNavigationItems.length - 1;
+        for (let i = currentFocusedIndex + 1; i < this._allNavigationItems.length; i++) {
+            const item = this._allNavigationItems[i];
+            if (item.hasAttribute("ui5-li-notification-group")) {
+                nextFocusedIndex = i - 1;
+                break;
+            }
+            if (this._isGrowingButton(item)) {
+                nextFocusedIndex = i === currentFocusedIndex + 1 ? i : i - 1;
+                break;
+            }
+        }
+        this._allNavigationItems[nextFocusedIndex].focus();
+    }
+    _focusSameItemOnNextRow(e) {
+        if (!isUp(e) && !isDown(e) && !isLeft(e) && !isRight(e)) {
+            return;
+        }
+        const target = e.target;
+        const shadowTarget = target.shadowRoot.activeElement;
+        const activeElement = getActiveElement();
+        const isGrowingBtn = this._isGrowingButton(activeElement);
+        if (!target || target.hasAttribute("ui5-menu-item")) {
+            return;
+        }
+        const isFocusWithin = target.matches(":focus-within");
+        if (!isFocusWithin) {
+            return;
+        }
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        const currentItem = isGrowingBtn ? activeElement : this.getEnabledItems()[this._itemNavigation._currentIndex];
+        const index = this._allNavigationItems.indexOf(currentItem) + ((isUp(e) || isLeft(e)) ? -1 : 1);
+        const nextItem = this._allNavigationItems[index];
+        if (!nextItem) {
+            return;
+        }
+        if (this._isGrowingButton(nextItem) || shadowTarget.classList.contains("ui5-nli-focusable")) {
+            nextItem.focus();
+            return;
+        }
+        const nextListItem = nextItem;
+        if (nextListItem.loading || (isLeft(e) || isRight(e))) {
+            nextItem.focus();
+            return;
+        }
+        const sameItemOnNextRow = nextListItem.getHeaderDomRef().querySelector(`.${shadowTarget.className}`);
+        if (sameItemOnNextRow && sameItemOnNextRow.offsetParent) {
+            sameItemOnNextRow.focus();
+        }
+        else {
+            nextItem.focus();
+        }
+    }
+    _isGrowingButton(item) {
+        return item?.classList.contains("ui5-growing-button-inner");
+    }
+};
+NotificationListInternal = __decorate([
+    customElement("ui5-notification-list-internal")
+], NotificationListInternal);
+NotificationListInternal.define();
+export default NotificationListInternal;
+//# sourceMappingURL=NotificationListInternal.js.map

package/dist/NotificationListInternal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationListInternal.js","sourceRoot":"","sources":["../src/NotificationListInternal.ts"],"names":[],"mappings":"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","sourcesContent":["import List from \"@ui5/webcomponents/dist/List.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport type ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport NotificationListGroupItem from \"./NotificationListGroupItem.js\";\nimport {\n\tisDown,\n\tisUp,\n\tisLeft,\n\tisRight,\n\tisHome,\n\tisEnd,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type NotificationListItemBase from \"./NotificationListItemBase.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\n\n/**\n * @class\n *\n * Internal `ui5-li-notification-list-list` component,\n * that is used to support keyboard navigation of the notification list internal list.\n *\n * @private\n */\n@customElement(\"ui5-notification-list-internal\")\nclass NotificationListInternal extends List {\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._itemNavigation._navigationMode = NavigationMode.Auto;\n\t}\n\n\t_allNavigationItems: Array<HTMLElement> = [];\n\n\tgetEnabledItems(): Array<ListItemBase> {\n\t\tconst items = new Array<ListItemBase>();\n\t\tconst allNavigationItems = new Array<HTMLElement>();\n\n\t\tthis.getItems().forEach(item => {\n\t\t\titems.push(item);\n\t\t\tallNavigationItems.push(item);\n\n\t\t\tif (item instanceof NotificationListGroupItem && !item.collapsed && !item.loading) {\n\t\t\t\titem.items.forEach(subItem => {\n\t\t\t\t\titems.push(subItem);\n\t\t\t\t\tallNavigationItems.push(subItem);\n\t\t\t\t});\n\n\t\t\t\tconst growingButton = item.getGrowingButton();\n\t\t\t\tif (growingButton) {\n\t\t\t\t\tallNavigationItems.push(growingButton);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tconst growingButton = this.getGrowingButton();\n\t\tif (growingButton) {\n\t\t\tallNavigationItems.push(growingButton);\n\t\t}\n\n\t\tthis._allNavigationItems = allNavigationItems;\n\n\t\treturn items;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnd(e)) {\n\t\t\tthis._handleEndKey(e);\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tif (isHome(e)) {\n\t\t\tthis._handleHomeKey(e);\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tthis._focusSameItemOnNextRow(e);\n\t}\n\n\t_handleHomeKey(e: KeyboardEvent) {\n\t\te.stopImmediatePropagation();\n\n\t\tconst target = e.target as HTMLElement;\n\t\tconst activeElement = getActiveElement()! as HTMLElement;\n\n\t\tif ((!this._isGrowingButton(activeElement) && target?.hasAttribute(\"ui5-li-notification-group\"))\n\t\t\t|| target?.hasAttribute(\"ui5-menu-item\")) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentFocusedItem = this.getEnabledItems()[this._itemNavigation._currentIndex];\n\t\tif (!currentFocusedItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentFocusedIndex = this._allNavigationItems.indexOf(currentFocusedItem);\n\t\tlet nextFocusedIndex = 0;\n\n\t\tfor (let i = currentFocusedIndex - 1; i >= 0; i--) {\n\t\t\tconst item = this._allNavigationItems[i];\n\t\t\tif (item.hasAttribute(\"ui5-li-notification-group\")) {\n\t\t\t\tnextFocusedIndex = i + 1;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tthis._allNavigationItems[nextFocusedIndex].focus();\n\t}\n\n\t_handleEndKey(e: KeyboardEvent) {\n\t\te.stopImmediatePropagation();\n\n\t\tconst target = e.target as HTMLElement;\n\n\t\tif (target?.hasAttribute(\"ui5-menu-item\")) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentFocusedItem = this.getEnabledItems()[this._itemNavigation._currentIndex];\n\t\tif (!currentFocusedItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentFocusedIndex = this._allNavigationItems.indexOf(currentFocusedItem);\n\t\tlet nextFocusedIndex = this._allNavigationItems.length - 1;\n\n\t\tfor (let i = currentFocusedIndex + 1; i < this._allNavigationItems.length; i++) {\n\t\t\tconst item = this._allNavigationItems[i];\n\n\t\t\tif (item.hasAttribute(\"ui5-li-notification-group\")) {\n\t\t\t\tnextFocusedIndex = i - 1;\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tif (this._isGrowingButton(item)) {\n\t\t\t\tnextFocusedIndex = i === currentFocusedIndex + 1 ? i : i - 1;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tthis._allNavigationItems[nextFocusedIndex].focus();\n\t}\n\n\t_focusSameItemOnNextRow(e: KeyboardEvent) {\n\t\tif (!isUp(e) && !isDown(e) && !isLeft(e) && !isRight(e)) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst target = e.target as HTMLElement;\n\t\tconst shadowTarget = target.shadowRoot!.activeElement as HTMLElement;\n\t\tconst activeElement = getActiveElement()! as HTMLElement;\n\t\tconst isGrowingBtn = this._isGrowingButton(activeElement);\n\n\t\tif (!target || target.hasAttribute(\"ui5-menu-item\")) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst isFocusWithin = target.matches(\":focus-within\");\n\t\tif (!isFocusWithin) {\n\t\t\treturn;\n\t\t}\n\n\t\te.preventDefault();\n\t\te.stopImmediatePropagation();\n\n\t\tconst currentItem = isGrowingBtn ? activeElement : this.getEnabledItems()[this._itemNavigation._currentIndex];\n\t\tconst index = this._allNavigationItems.indexOf(currentItem) + ((isUp(e) || isLeft(e)) ? -1 : 1);\n\t\tconst nextItem = this._allNavigationItems[index];\n\t\tif (!nextItem) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._isGrowingButton(nextItem) || shadowTarget.classList.contains(\"ui5-nli-focusable\")) {\n\t\t\tnextItem.focus();\n\t\t\treturn;\n\t\t}\n\n\t\tconst nextListItem = nextItem as NotificationListItemBase;\n\t\tif (nextListItem.loading || (isLeft(e) || isRight(e))) {\n\t\t\tnextItem.focus();\n\t\t\treturn;\n\t\t}\n\n\t\tconst sameItemOnNextRow = nextListItem.getHeaderDomRef()!.querySelector<HTMLElement>(`.${shadowTarget.className}`);\n\t\tif (sameItemOnNextRow && sameItemOnNextRow.offsetParent) {\n\t\t\tsameItemOnNextRow.focus();\n\t\t} else {\n\t\t\tnextItem.focus();\n\t\t}\n\t}\n\n\t_isGrowingButton(item: Element | null) {\n\t\treturn item?.classList.contains(\"ui5-growing-button-inner\");\n\t}\n}\n\nNotificationListInternal.define();\n\nexport default NotificationListInternal;\n"]}

package/dist/NotificationListItem.d.ts

@@ -0,0 +1,199 @@
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ButtonAccessibilityAttributes } from "@ui5/webcomponents/dist/Button.js";
+import type Link from "@ui5/webcomponents/dist/Link.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
+import type Menu from "@ui5/webcomponents/dist/Menu.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import NotificationListItemImportance from "./types/NotificationListItemImportance.js";
+import NotificationListItemBase from "./NotificationListItemBase.js";
+import IconDesign from "@ui5/webcomponents/dist/types/IconDesign.js";
+type NotificationListItemCloseEventDetail = {
+    item: HTMLElement;
+};
+type NotificationListItemPressEventDetail = {
+    item: NotificationListItem;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-li-notification` is a type of list item, meant to display notifications.
+ *
+ * The component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`
+ * and `footnotes` to fully describe a notification.
+ *
+ * The user can:
+ *
+ * - display a `Close` button
+ * - can control whether the `titleText` and `description` should wrap or truncate
+ * and display a `ShowMore` button to switch between less and more information
+ * - add actions by using the `ui5-menu` component
+ *
+ * **Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!
+ *
+ * ### Usage
+ * The component should be used inside a `ui5-notification-list`.
+ *
+ * ### Keyboard Handling
+ *
+ * #### Basic Navigation
+ * The user can use the following keyboard shortcuts to perform actions (such as select, delete):
+ *
+ * - [Enter] - select an item (trigger "item-click" event)
+ * - [Delete] - close an item (trigger "item-close" event)
+ *
+ * #### Fast Navigation
+ * This component provides a fast navigation using the following keyboard shortcuts:
+ *
+ * - [Shift] + [Enter] - 'More'/'Less' link will be triggered
+ * - [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NotificationListItem.js";`
+ *
+ * @constructor
+ * @extends NotificationListItemBase
+ * @since 1.0.0-rc.8
+ * @public
+ * @csspart title-text - Used to style the titleText of the notification list item
+ */
+declare class NotificationListItem extends NotificationListItemBase {
+    eventDetails: NotificationListItemBase["eventDetails"] & {
+        _press: NotificationListItemPressEventDetail;
+        close: NotificationListItemCloseEventDetail;
+        _close: NotificationListItemCloseEventDetail;
+    };
+    /**
+    * Defines if the `titleText` and `description` should wrap,
+    * they truncate by default.
+    *
+    * **Note:** by default the `titleText` and `description`,
+    * and a `ShowMore/Less` button would be displayed.
+    * @default "None"
+    * @public
+    * @since 1.0.0-rc.15
+    */
+    wrappingType: `${WrappingType}`;
+    /**
+     * Defines the status indicator of the item.
+     * @default "None"
+     * @public
+     */
+    state: `${ValueState}`;
+    /**
+     * Defines if the `Close` button would be displayed.
+     * @default false
+     * @public
+     */
+    showClose: boolean;
+    /**
+     * Defines the `Important` label of the item.
+     * @default "Standard"
+     * @public
+     */
+    importance: `${NotificationListItemImportance}`;
+    /**
+    * Defines the state of the `titleText` and `description`,
+    * if less or more information is displayed.
+    * @private
+    */
+    _showMorePressed: boolean;
+    /**
+    * Defines the visibility of the `showMore` button.
+    * @private
+    */
+    _showMore: boolean;
+    /**
+    * Defines the avatar, displayed in the `ui5-li-notification`.
+    *
+    * **Note:** Consider using the `ui5-avatar` to display icons, initials or images.
+    *
+    * **Note:** In order to be complaint with the UX guidlines and for best experience,
+    * we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`
+    * you can set its `size` property to `XS` to get the required size - `<ui5-avatar size="XS"></ui5-avatar>`.
+    * @public
+    */
+    avatar: Array<HTMLElement>;
+    /**
+    * Defines the menu, displayed in the `ui5-li-notification`.
+    *
+    * **Note:** Use this for implementing actions.
+    *
+    * **Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.
+    * @public
+    */
+    menu: Array<HTMLElement>;
+    /**
+    * Defines the elements, displayed in the footer of the of the component.
+    * @public
+    */
+    footnotes: Array<HTMLElement>;
+    /**
+    * Defines the content of the `ui5-li-notification`,
+    * usually a description of the notification.
+    *
+    * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+    * @public
+    */
+    description: Array<Node>;
+    titleTextDOM?: HTMLElement;
+    menuButtonDOM?: HTMLElement;
+    descriptionDOM?: HTMLElement;
+    _titleTextOverflowHeight: number;
+    _descOverflowHeight: number;
+    _onResizeBound: ResizeObserverCallback;
+    _ariaLevel?: number;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    get hasState(): boolean;
+    get hasDesc(): boolean;
+    get hasImportance(): boolean;
+    get hasFootNotes(): boolean;
+    get showMoreText(): string;
+    get menuBtnAccessibleName(): string;
+    get moreLinkAccessibleName(): string;
+    get closeBtnAccessibleName(): string;
+    get hideShowMore(): true | undefined;
+    get titleTextHeight(): number;
+    get descriptionHeight(): number;
+    get titleTextOverflows(): boolean;
+    get descriptionOverflows(): boolean;
+    get footerItems(): {
+        slotName: any;
+        showDivider: boolean;
+    }[];
+    get ariaLabelledBy(): string;
+    get itemClasses(): string;
+    get statusIconName(): string;
+    get statusIconDesign(): IconDesign | undefined;
+    get importanceText(): string;
+    get stateText(): string;
+    get readText(): string;
+    get menuButtonAccessibilityAttributes(): ButtonAccessibilityAttributes;
+    get moreLinkAccessibilityAttributes(): {
+        expanded: boolean;
+    };
+    get showMenu(): boolean;
+    /**
+     * Event handlers
+     */
+    _onclick(): void;
+    _onShowMoreClick(e: UI5CustomEvent<Link, "click">): void;
+    _onkeydown(e: KeyboardEvent): Promise<void>;
+    _onkeyup(e: KeyboardEvent): void;
+    _onBtnCloseClick(): void;
+    _onBtnMenuClick(): void;
+    _toggleShowMorePressed(): void;
+    openMenu(): void;
+    getMenu(): Menu;
+    /**
+     * Private
+     */
+    fireItemPress(): void;
+    onResize(): void;
+}
+export default NotificationListItem;
+export type { NotificationListItemPressEventDetail, NotificationListItemCloseEventDetail, };