@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/NotificationList.js

@@ -0,0 +1,135 @@
+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;
+};
+var NotificationList_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+// Template
+import NotificationListTemplate from "./NotificationListTemplate.js";
+// Styles
+import NotificationListCss from "./generated/themes/NotificationList.css.js";
+// Texts
+import { NOTIFICATION_LIST_ACCESSIBLE_NAME, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ * ### Overview
+ * The `ui5-notification-list` web component represents
+ * a container for `ui5-li-notification-group` and `ui5-li-notification`.
+ *
+ * ### Keyboard Handling
+ *
+ * #### Basic Navigation
+ * The `ui5-notification-list` provides advanced keyboard handling.
+ * When a list is focused the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ *
+ * - [Up] or [Left] - Navigates up the items
+ * - [Down] or [Right] - Navigates down the items
+ * - [Home] - Navigates to first item
+ * - [End] - Navigates to the last item
+ *
+ * #### Fast Navigation
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
+ * In order to use this functionality, you need to import the following module:
+ * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NotificationList.js";``
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0.0
+ * @public
+ */
+let NotificationList = NotificationList_1 = class NotificationList extends UI5Element {
+    get _accessibleName() {
+        return NotificationList_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ACCESSIBLE_NAME);
+    }
+    getEnabledItems() {
+        return this.innerList?.getEnabledItems() || [];
+    }
+    get innerList() {
+        return this.shadowRoot?.querySelector("[ui5-notification-list-internal]");
+    }
+    _onItemClick(e) {
+        const item = e.detail.item;
+        if (!this.fireDecoratorEvent("item-click", { item })) {
+            e.preventDefault();
+        }
+    }
+    _onItemClose(e) {
+        const item = e.detail.item;
+        if (!this.fireDecoratorEvent("item-close", { item })) {
+            e.preventDefault();
+        }
+    }
+    _onItemToggle(e) {
+        const item = e.detail.item;
+        if (!this.fireDecoratorEvent("item-toggle", { item })) {
+            e.preventDefault();
+        }
+    }
+    _onLoadMore() {
+        this.fireDecoratorEvent("load-more");
+    }
+};
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], NotificationList.prototype, "items", void 0);
+__decorate([
+    property()
+], NotificationList.prototype, "noDataText", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], NotificationList, "i18nFioriBundle", void 0);
+NotificationList = NotificationList_1 = __decorate([
+    customElement({
+        tag: "ui5-notification-list",
+        renderer: jsxRenderer,
+        languageAware: true,
+        styles: [NotificationListCss],
+        template: NotificationListTemplate,
+    })
+    /**
+     * Fired when an item is clicked.
+     * @param {HTMLElement} item The clicked item.
+     * @public
+     */
+    ,
+    event("item-click", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired when the `Close` button of any item is clicked.
+     * @param {HTMLElement} item the item about to be closed.
+     * @public
+     */
+    ,
+    event("item-close", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * Fired when an item is toggled.
+     *
+     * @param {HTMLElement} item the toggled item.
+     * @public
+     */
+    ,
+    event("item-toggle", {
+        bubbles: true,
+        cancelable: true,
+    })
+], NotificationList);
+NotificationList.define();
+export default NotificationList;
+//# sourceMappingURL=NotificationList.js.map

package/dist/NotificationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationList.js","sourceRoot":"","sources":["../src/NotificationList.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type {\n\tListItemClickEventDetail,\n\tListItemToggleEventDetail,\n\tListItemCloseEventDetail,\n} from \"@ui5/webcomponents/dist/List.js\";\nimport type NotificationListItemBase from \"./NotificationListItemBase.js\";\nimport type NotificationListInternal from \"./NotificationListInternal.js\";\n\n// Template\nimport NotificationListTemplate from \"./NotificationListTemplate.js\";\n\n// Styles\nimport NotificationListCss from \"./generated/themes/NotificationList.css.js\";\n\n// Texts\nimport {\n\tNOTIFICATION_LIST_ACCESSIBLE_NAME,\n} from \"./generated/i18n/i18n-defaults.js\";\n\ntype NotificationItemEventDetail = {\n\titem: NotificationListItemBase,\n}\n\ntype NotificationItemClickEventDetail = NotificationItemEventDetail;\ntype NotificationItemToggleEventDetail = NotificationItemEventDetail;\ntype NotificationItemCloseEventDetail = NotificationItemEventDetail;\n\n/**\n * @class\n * ### Overview\n * The `ui5-notification-list` web component represents\n * a container for `ui5-li-notification-group` and `ui5-li-notification`.\n *\n * ### Keyboard Handling\n *\n * #### Basic Navigation\n * The `ui5-notification-list` provides advanced keyboard handling.\n * When a list is focused the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n *\n * - [Up] or [Left] - Navigates up the items\n * - [Down] or [Right] - Navigates down the items\n * - [Home] - Navigates to first item\n * - [End] - Navigates to the last item\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/NotificationList.js\";``\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-notification-list\",\n\trenderer: jsxRenderer,\n\tlanguageAware: true,\n\tstyles: [NotificationListCss],\n\ttemplate: NotificationListTemplate,\n})\n\n/**\n * Fired when an item is clicked.\n * @param {HTMLElement} item The clicked item.\n * @public\n */\n@event(\"item-click\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired when the `Close` button of any item is clicked.\n * @param {HTMLElement} item the item about to be closed.\n * @public\n */\n@event(\"item-close\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * Fired when an item is toggled.\n *\n * @param {HTMLElement} item the toggled item.\n * @public\n */\n@event(\"item-toggle\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\nclass NotificationList extends UI5Element {\n\teventDetails!: {\n\t\t\"item-click\": NotificationItemClickEventDetail,\n\t\t\"item-close\": NotificationItemCloseEventDetail,\n\t\t\"item-toggle\": NotificationItemToggleEventDetail,\n\t\t\"load-more\": void,\n\t}\n\t/**\n\t * Defines the items of the component.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: DefaultSlot<NotificationListItemBase>;\n\n\t/**\n\t * Defines the text that is displayed when the component contains no items.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tnoDataText?: string;\n\n\tget _accessibleName() {\n\t\treturn NotificationList.i18nFioriBundle.getText(NOTIFICATION_LIST_ACCESSIBLE_NAME);\n\t}\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nFioriBundle: I18nBundle;\n\n\tgetEnabledItems() {\n\t\treturn this.innerList?.getEnabledItems() || [];\n\t}\n\n\tget innerList() {\n\t\treturn this.shadowRoot?.querySelector(\"[ui5-notification-list-internal]\") as NotificationListInternal;\n\t}\n\n\t_onItemClick(e: CustomEvent<ListItemClickEventDetail>) {\n\t\tconst item = e.detail.item as NotificationListItemBase;\n\n\t\tif (!this.fireDecoratorEvent(\"item-click\", { item })) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_onItemClose(e: CustomEvent<ListItemCloseEventDetail>) {\n\t\tconst item = e.detail.item as NotificationListItemBase;\n\n\t\tif (!this.fireDecoratorEvent(\"item-close\", { item })) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_onItemToggle(e: CustomEvent<ListItemToggleEventDetail>) {\n\t\tconst item = e.detail.item as NotificationListItemBase;\n\n\t\tif (!this.fireDecoratorEvent(\"item-toggle\", { item })) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_onLoadMore() {\n\t\tthis.fireDecoratorEvent(\"load-more\");\n\t}\n}\n\nNotificationList.define();\n\nexport default NotificationList;\nexport type {\n\tNotificationItemClickEventDetail,\n\tNotificationItemToggleEventDetail,\n\tNotificationItemCloseEventDetail,\n};\n"]}

package/dist/NotificationListGroupItem.d.ts

@@ -0,0 +1,93 @@
+import type NotificationListGrowingMode from "@ui5/webcomponents/dist/types/NotificationListGrowingMode.js";
+import NotificationListItemBase from "./NotificationListItemBase.js";
+import type NotificationListItem from "./NotificationListItem.js";
+import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+type NotificationListGroupItemToggleEventDetail = {
+    item: NotificationListGroupItem;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-li-notification-group` is a special type of list item,
+ * that unlike others can group items within self, usually `ui5-li-notification` items.
+ *
+ * The component consists of:
+ *
+ * - `Toggle` button to expand and collapse the group
+ * - `TitleText` to entitle the group
+ * - Items of the group
+ *
+ * ### Usage
+ * The component should be used inside a `ui5-notification-list`.
+ *
+ * ### Keyboard Handling
+ * The `ui5-li-notification-group` provides advanced keyboard handling.
+ * This component provides fast navigation when the header is focused using the following keyboard shortcuts:
+ *
+ * - [Space] - toggles expand / collapse of the group
+ * - [Plus] - expands the group
+ * - [Minus] - collapses the group
+ * - [Right] - expands the group
+ * - [Left] - collapses the group
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js";`
+ * @constructor
+ * @extends NotificationListItemBase
+ * @since 1.0.0-rc.8
+ * @public
+ */
+declare class NotificationListGroupItem extends NotificationListItemBase {
+    eventDetails: NotificationListItemBase["eventDetails"] & {
+        toggle: NotificationListGroupItemToggleEventDetail;
+        "load-more": void;
+    };
+    /**
+     * Defines if the group is collapsed or expanded.
+     * @default false
+     * @public
+     */
+    collapsed: boolean;
+    /**
+     * Defines whether the component will have growing capability by pressing a `More` button.
+     * When button is pressed `load-more` event will be fired.
+     * @default "None"
+     * @public
+     * @since 2.2.0
+     */
+    growing: `${NotificationListGrowingMode}`;
+    /**
+     * Defines the items of the `ui5-li-notification-group`,
+     * usually `ui5-li-notification` items.
+     * @public
+     */
+    items: DefaultSlot<NotificationListItem>;
+    onBeforeRendering(): void;
+    /**
+     * Clears child items loading state to show a single loading over the entire group,
+     * instead of multiple BusyIndicator instances
+     */
+    clearChildBusyIndicator(): void;
+    get toggleIconAccessibleName(): string;
+    get accInvisibleText(): string;
+    get expandText(): string;
+    get groupText(): string;
+    get ariaLabelledBy(): string;
+    get _expanded(): boolean;
+    get _pressable(): boolean;
+    get groupCollapsedIcon(): "navigation-right-arrow" | "navigation-down-arrow";
+    toggleCollapsed(): void;
+    /**
+     * Event handlers
+     *
+     */
+    _onHeaderToggleClick(): void;
+    _onLoadMore(): void;
+    getGrowingButton(): HTMLElement;
+    _onkeydown(e: KeyboardEvent): Promise<void>;
+    getHeaderDomRef(): HTMLElement;
+}
+export default NotificationListGroupItem;
+export type { NotificationListGroupItemToggleEventDetail, };

package/dist/NotificationListGroupItem.js

@@ -0,0 +1,224 @@
+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;
+};
+var NotificationListGroupItem_1;
+import { isSpace, isPlus, isMinus, isLeft, isRight, } from "@ui5/webcomponents-base/dist/Keys.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import NotificationListItemBase from "./NotificationListItemBase.js";
+// Icons
+import iconNavigationRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import iconNavigationDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+// Texts
+import { NOTIFICATION_LIST_GROUP_ITEM_TXT, NOTIFICATION_LIST_GROUP_COLLAPSED, NOTIFICATION_LIST_GROUP_EXPANDED, NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_COLLAPSE_TITLE, } from "./generated/i18n/i18n-defaults.js";
+// Templates
+import NotificationListGroupItemTemplate from "./NotificationListGroupItemTemplate.js";
+// Styles
+import NotificationListGroupItemCss from "./generated/themes/NotificationListGroupItem.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * The `ui5-li-notification-group` is a special type of list item,
+ * that unlike others can group items within self, usually `ui5-li-notification` items.
+ *
+ * The component consists of:
+ *
+ * - `Toggle` button to expand and collapse the group
+ * - `TitleText` to entitle the group
+ * - Items of the group
+ *
+ * ### Usage
+ * The component should be used inside a `ui5-notification-list`.
+ *
+ * ### Keyboard Handling
+ * The `ui5-li-notification-group` provides advanced keyboard handling.
+ * This component provides fast navigation when the header is focused using the following keyboard shortcuts:
+ *
+ * - [Space] - toggles expand / collapse of the group
+ * - [Plus] - expands the group
+ * - [Minus] - collapses the group
+ * - [Right] - expands the group
+ * - [Left] - collapses the group
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js";`
+ * @constructor
+ * @extends NotificationListItemBase
+ * @since 1.0.0-rc.8
+ * @public
+ */
+let NotificationListGroupItem = NotificationListGroupItem_1 = class NotificationListGroupItem extends NotificationListItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines if the group is collapsed or expanded.
+         * @default false
+         * @public
+         */
+        this.collapsed = false;
+        /**
+         * Defines whether the component will have growing capability by pressing a `More` button.
+         * When button is pressed `load-more` event will be fired.
+         * @default "None"
+         * @public
+         * @since 2.2.0
+         */
+        this.growing = "None";
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        this.items.forEach(item => {
+            item._ariaLevel = 2;
+        });
+        if (this.loading) {
+            this.clearChildBusyIndicator();
+        }
+        this.actionable = false;
+    }
+    /**
+     * Clears child items loading state to show a single loading over the entire group,
+     * instead of multiple BusyIndicator instances
+     */
+    clearChildBusyIndicator() {
+        this.items.forEach(item => {
+            item.loading = false;
+        });
+    }
+    get toggleIconAccessibleName() {
+        return NotificationListGroupItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_COLLAPSE_TITLE);
+    }
+    get accInvisibleText() {
+        return `${this.groupText} ${this.expandText}`;
+    }
+    get expandText() {
+        if (this.collapsed) {
+            return NotificationListGroupItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_COLLAPSED);
+        }
+        return NotificationListGroupItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_EXPANDED);
+    }
+    get groupText() {
+        return NotificationListGroupItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TXT);
+    }
+    get ariaLabelledBy() {
+        const id = this._id;
+        if (this.loading) {
+            return `${id}-loading`;
+        }
+        const ids = [];
+        if (this.hasTitleText) {
+            ids.push(`${id}-title-text`);
+        }
+        return ids.join(" ");
+    }
+    get _expanded() {
+        return !this.collapsed;
+    }
+    get _pressable() {
+        return false;
+    }
+    get groupCollapsedIcon() {
+        return this.collapsed ? iconNavigationRightArrow : iconNavigationDownArrow;
+    }
+    toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+        this.fireDecoratorEvent("toggle", { item: this });
+    }
+    /**
+     * Event handlers
+     *
+     */
+    _onHeaderToggleClick() {
+        this.toggleCollapsed();
+    }
+    _onLoadMore() {
+        this.fireDecoratorEvent("load-more");
+    }
+    getGrowingButton() {
+        const innerList = this.getDomRef()?.querySelector("[ui5-notification-group-list]");
+        return innerList.getGrowingButton();
+    }
+    async _onkeydown(e) {
+        const isFocused = this.matches(":focus");
+        if (!isFocused) {
+            return;
+        }
+        if (this.getGrowingButton()?.matches(":focus")) {
+            return;
+        }
+        await super._onkeydown(e);
+        const space = isSpace(e);
+        const plus = isPlus(e);
+        const minus = isMinus(e);
+        const left = isLeft(e);
+        const right = isRight(e);
+        if (space) {
+            this.toggleCollapsed();
+        }
+        if (plus || right) {
+            // expand
+            if (this.collapsed) {
+                this.toggleCollapsed();
+                e.stopImmediatePropagation();
+            }
+        }
+        if (minus || left) {
+            // collapse
+            if (!this.collapsed) {
+                this.toggleCollapsed();
+                e.stopImmediatePropagation();
+            }
+        }
+    }
+    getHeaderDomRef() {
+        return this.getDomRef()?.querySelector(".ui5-nli-group-header");
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], NotificationListGroupItem.prototype, "collapsed", void 0);
+__decorate([
+    property()
+], NotificationListGroupItem.prototype, "growing", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], NotificationListGroupItem.prototype, "items", void 0);
+NotificationListGroupItem = NotificationListGroupItem_1 = __decorate([
+    customElement({
+        tag: "ui5-li-notification-group",
+        languageAware: true,
+        renderer: jsxRenderer,
+        styles: [
+            NotificationListGroupItemCss,
+        ],
+        template: NotificationListGroupItemTemplate,
+    })
+    /**
+     * Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.
+     * @public
+     */
+    ,
+    event("toggle", {
+        bubbles: true,
+    })
+    /**
+     * Fired when additional items are requested.
+     *
+     * @public
+     * @since 2.2.0
+     */
+    ,
+    event("load-more", {
+        bubbles: true,
+    })
+], NotificationListGroupItem);
+NotificationListGroupItem.define();
+export default NotificationListGroupItem;
+//# sourceMappingURL=NotificationListGroupItem.js.map

package/dist/NotificationListGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationListGroupItem.js","sourceRoot":"","sources":["../src/NotificationListGroupItem.ts"],"names":[],"mappings":"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","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-strict.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\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.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!: DefaultSlot<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;