@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/NotificationListItem.js

@@ -0,0 +1,454 @@
+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 NotificationListItem_1;
+import { isSpace, isDelete, isF10Shift, isEnterShift, } 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 query from "@ui5/webcomponents-base/dist/decorators/query.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import NotificationListItemImportance from "./types/NotificationListItemImportance.js";
+import NotificationListItemBase from "./NotificationListItemBase.js";
+// Icons
+import iconSysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import iconAlert from "@ui5/webcomponents-icons/dist/alert.js";
+import iconError from "@ui5/webcomponents-icons/dist/error.js";
+import iconInformation from "@ui5/webcomponents-icons/dist/information.js";
+// Texts
+import { NOTIFICATION_LIST_ITEM_READ, NOTIFICATION_LIST_ITEM_UNREAD, NOTIFICATION_LIST_ITEM_SHOW_MORE, NOTIFICATION_LIST_ITEM_SHOW_LESS, NOTIFICATION_LIST_ITEM_INFORMATION_STATUS_TXT, NOTIFICATION_LIST_ITEM_POSITIVE_STATUS_TXT, NOTIFICATION_LIST_ITEM_NEGATIVE_STATUS_TXT, NOTIFICATION_LIST_ITEM_CRITICAL_STATUS_TXT, NOTIFICATION_LIST_ITEM_MENU_BTN_TITLE, NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_FULL, NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_TRUNCATE, NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE, NOTIFICATION_LIST_ITEM_IMPORTANT_TXT, } from "./generated/i18n/i18n-defaults.js";
+// Templates
+import NotificationListItemTemplate from "./NotificationListItemTemplate.js";
+// Styles
+import NotificationListItemCss from "./generated/themes/NotificationListItem.css.js";
+import IconDesign from "@ui5/webcomponents/dist/types/IconDesign.js";
+/**
+ * Defines the icons name corresponding to the notification's status indicator.
+ */
+const ICON_PER_STATUS_NAME = {
+    [ValueState.Negative]: iconError,
+    [ValueState.Critical]: iconAlert,
+    [ValueState.Positive]: iconSysEnter2,
+    [ValueState.Information]: iconInformation,
+    [ValueState.None]: "",
+};
+/**
+ * Defines the icons design (color) corresponding to the notification's status indicator.
+ */
+const ICON_PER_STATUS_DESIGN = {
+    [ValueState.Negative]: IconDesign.Negative,
+    [ValueState.Critical]: IconDesign.Critical,
+    [ValueState.Positive]: IconDesign.Positive,
+    [ValueState.Information]: IconDesign.Information,
+    [ValueState.None]: undefined,
+};
+/**
+ * @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
+ */
+let NotificationListItem = NotificationListItem_1 = class NotificationListItem extends NotificationListItemBase {
+    constructor() {
+        super();
+        /**
+        * 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
+        */
+        this.wrappingType = "None";
+        /**
+         * Defines the status indicator of the item.
+         * @default "None"
+         * @public
+         */
+        this.state = "None";
+        /**
+         * Defines if the `Close` button would be displayed.
+         * @default false
+         * @public
+         */
+        this.showClose = false;
+        /**
+         * Defines the `Important` label of the item.
+         * @default "Standard"
+         * @public
+         */
+        this.importance = "Standard";
+        /**
+        * Defines the state of the `titleText` and `description`,
+        * if less or more information is displayed.
+        * @private
+        */
+        this._showMorePressed = false;
+        /**
+        * Defines the visibility of the `showMore` button.
+        * @private
+        */
+        this._showMore = false;
+        // the titleText overflow height
+        this._titleTextOverflowHeight = 0;
+        // the description overflow height
+        this._descOverflowHeight = 0;
+        // the resize handler
+        this._onResizeBound = this.onResize.bind(this);
+    }
+    onEnterDOM() {
+        super.onEnterDOM();
+        ResizeHandler.register(this, this._onResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._onResizeBound);
+    }
+    get hasState() {
+        return this.state !== ValueState.None;
+    }
+    get hasDesc() {
+        return willShowContent(this.description);
+    }
+    get hasImportance() {
+        return this.importance !== NotificationListItemImportance.Standard;
+    }
+    get hasFootNotes() {
+        return !!this.footnotes.length;
+    }
+    get showMoreText() {
+        if (this._showMorePressed) {
+            return NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_LESS);
+        }
+        return NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_MORE);
+    }
+    get menuBtnAccessibleName() {
+        return NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MENU_BTN_TITLE);
+    }
+    get moreLinkAccessibleName() {
+        return this._showMorePressed ? NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_TRUNCATE) : NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_FULL);
+    }
+    get closeBtnAccessibleName() {
+        return NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
+    }
+    get hideShowMore() {
+        if (this.wrappingType === WrappingType.None && this._showMore) {
+            return undefined;
+        }
+        return true;
+    }
+    get titleTextHeight() {
+        return this.titleTextDOM.offsetHeight;
+    }
+    get descriptionHeight() {
+        return this.descriptionDOM.offsetHeight;
+    }
+    get titleTextOverflows() {
+        const titleText = this.titleTextDOM;
+        if (!titleText) {
+            return false;
+        }
+        return titleText.offsetHeight < titleText.scrollHeight;
+    }
+    get descriptionOverflows() {
+        const description = this.descriptionDOM;
+        if (!description) {
+            return false;
+        }
+        return description.offsetHeight < description.scrollHeight;
+    }
+    get footerItems() {
+        return this.footnotes.map((el, idx, arr) => {
+            return {
+                slotName: el._individualSlot,
+                showDivider: idx !== arr.length - 1,
+            };
+        });
+    }
+    get ariaLabelledBy() {
+        const id = this._id;
+        if (this.loading) {
+            return `${id}-loading`;
+        }
+        const ids = [];
+        if (this.hasImportance) {
+            ids.push(`${id}-importance`);
+        }
+        if (this.hasTitleText) {
+            ids.push(`${id}-title-text`);
+        }
+        ids.push(`${id}-read`);
+        if (this.hasDesc) {
+            ids.push(`${id}-description`);
+        }
+        if (this.hasFootNotes) {
+            ids.push(`${id}-footnotes`);
+        }
+        return ids.join(" ");
+    }
+    get itemClasses() {
+        const classes = ["ui5-nli-root", "ui5-nli-focusable"];
+        if (this.getMenu() && this.showClose) {
+            classes.push("ui5-nli-two-buttons");
+        }
+        else if (this.getMenu() || this.showClose) {
+            classes.push("ui5-nli-one-button");
+        }
+        return classes.join(" ");
+    }
+    get statusIconName() {
+        return ICON_PER_STATUS_NAME[this.state];
+    }
+    get statusIconDesign() {
+        return ICON_PER_STATUS_DESIGN[this.state];
+    }
+    get importanceText() {
+        let text;
+        if (this.hasImportance) {
+            text = NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_IMPORTANT_TXT);
+        }
+        else {
+            text = "";
+        }
+        return text;
+    }
+    get stateText() {
+        if (this.state === ValueState.Positive) {
+            return NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_POSITIVE_STATUS_TXT);
+        }
+        if (this.state === ValueState.Critical) {
+            return NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_CRITICAL_STATUS_TXT);
+        }
+        if (this.state === ValueState.Negative) {
+            return NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_NEGATIVE_STATUS_TXT);
+        }
+        if (this.state === ValueState.Information) {
+            return NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_INFORMATION_STATUS_TXT);
+        }
+        return "";
+    }
+    get readText() {
+        return this.read ? NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : NotificationListItem_1.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
+    }
+    get menuButtonAccessibilityAttributes() {
+        return {
+            hasPopup: "menu",
+        };
+    }
+    get moreLinkAccessibilityAttributes() {
+        return {
+            expanded: this._showMorePressed,
+        };
+    }
+    get showMenu() {
+        return !!this.getMenu();
+    }
+    /**
+     * Event handlers
+     */
+    _onclick() {
+        this.fireItemPress();
+    }
+    _onShowMoreClick(e) {
+        e.preventDefault();
+        this._toggleShowMorePressed();
+    }
+    async _onkeydown(e) {
+        await super._onkeydown(e);
+        if (isF10Shift(e)) {
+            e.preventDefault();
+        }
+    }
+    _onkeyup(e) {
+        super._onkeyup(e);
+        const space = isSpace(e);
+        if (space && this.getFocusDomRef().matches(":has(:focus-within)")) {
+            e.preventDefault();
+            this._toggleShowMorePressed();
+            return;
+        }
+        if (isDelete(e)) {
+            this.fireDecoratorEvent("close", { item: this });
+            this.fireDecoratorEvent("_close", { item: this });
+        }
+        if (isF10Shift(e)) {
+            this._onBtnMenuClick();
+        }
+        if (isEnterShift(e)) {
+            this._toggleShowMorePressed();
+        }
+    }
+    _onBtnCloseClick() {
+        this.fireDecoratorEvent("close", { item: this });
+        this.fireDecoratorEvent("_close", { item: this });
+    }
+    _onBtnMenuClick() {
+        if (this.getMenu()) {
+            this.openMenu();
+        }
+    }
+    _toggleShowMorePressed() {
+        this._showMorePressed = !this._showMorePressed;
+    }
+    openMenu() {
+        const menu = this.getMenu();
+        menu.opener = this.menuButtonDOM;
+        menu.open = true;
+    }
+    getMenu() {
+        const menu = this.querySelector("[ui5-menu]");
+        return menu;
+    }
+    /**
+     * Private
+     */
+    fireItemPress() {
+        if (this.getFocusDomRef().matches(":has(:focus-within)")) {
+            return;
+        }
+        // NotificationListItem will never be assigned to a variable of type ListItemBase
+        // typescipt complains here, if that is the case, the parameter to the _press event handler could be a ListItemBase item,
+        // but this is never the case, all components are used by their class and never assigned to a variable with a type of ListItemBase
+        this.fireDecoratorEvent("_press", { item: this });
+    }
+    onResize() {
+        if (this.wrappingType === WrappingType.Normal) {
+            this._showMore = false;
+            return;
+        }
+        const titleTextWouldOverflow = this.titleTextHeight > this._titleTextOverflowHeight;
+        const descWouldOverflow = this.hasDesc && this.descriptionHeight > this._descOverflowHeight;
+        const overflows = titleTextWouldOverflow || descWouldOverflow;
+        if (this._showMorePressed && overflows) {
+            this._showMore = true;
+            return;
+        }
+        if (this.titleTextOverflows || this.descriptionOverflows) {
+            this._titleTextOverflowHeight = this.titleTextHeight;
+            this._descOverflowHeight = this.hasDesc ? this.descriptionHeight : 0;
+            this._showMore = true;
+            return;
+        }
+        this._showMore = false;
+    }
+};
+__decorate([
+    property()
+], NotificationListItem.prototype, "wrappingType", void 0);
+__decorate([
+    property()
+], NotificationListItem.prototype, "state", void 0);
+__decorate([
+    property({ type: Boolean })
+], NotificationListItem.prototype, "showClose", void 0);
+__decorate([
+    property()
+], NotificationListItem.prototype, "importance", void 0);
+__decorate([
+    property({ type: Boolean })
+], NotificationListItem.prototype, "_showMorePressed", void 0);
+__decorate([
+    property({ type: Boolean })
+], NotificationListItem.prototype, "_showMore", void 0);
+__decorate([
+    slot()
+], NotificationListItem.prototype, "avatar", void 0);
+__decorate([
+    slot()
+], NotificationListItem.prototype, "menu", void 0);
+__decorate([
+    slot({ type: HTMLElement, individualSlots: true })
+], NotificationListItem.prototype, "footnotes", void 0);
+__decorate([
+    slot({ type: Node, "default": true })
+], NotificationListItem.prototype, "description", void 0);
+__decorate([
+    query(".ui5-nli-title-text")
+], NotificationListItem.prototype, "titleTextDOM", void 0);
+__decorate([
+    query(".ui5-nli-menu-btn")
+], NotificationListItem.prototype, "menuButtonDOM", void 0);
+__decorate([
+    query(".ui5-nli-description")
+], NotificationListItem.prototype, "descriptionDOM", void 0);
+NotificationListItem = NotificationListItem_1 = __decorate([
+    customElement({
+        tag: "ui5-li-notification",
+        languageAware: true,
+        styles: [
+            NotificationListItemCss,
+        ],
+        renderer: jsxRenderer,
+        template: NotificationListItemTemplate,
+    }),
+    event("_press", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the `Close` button is pressed.
+     * @param {HTMLElement} item the closed item.
+     * @public
+     */
+    ,
+    event("close")
+    /**
+     * Fired when the `Close` button is pressed.
+     * @param {HTMLElement} item the closed item.
+     * @private
+     */
+    ,
+    event("_close", {
+        bubbles: true,
+    })
+], NotificationListItem);
+NotificationListItem.define();
+export default NotificationListItem;
+//# sourceMappingURL=NotificationListItem.js.map

package/dist/NotificationListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationListItem.js","sourceRoot":"","sources":["../src/NotificationListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tisSpace, isDelete, isF10Shift, isEnterShift,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ButtonAccessibilityAttributes } from \"@ui5/webcomponents/dist/Button.js\";\nimport type Link from \"@ui5/webcomponents/dist/Link.js\";\nimport WrappingType from \"@ui5/webcomponents/dist/types/WrappingType.js\";\nimport type Menu from \"@ui5/webcomponents/dist/Menu.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport willShowContent from \"@ui5/webcomponents-base/dist/util/willShowContent.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport NotificationListItemImportance from \"./types/NotificationListItemImportance.js\";\nimport NotificationListItemBase from \"./NotificationListItemBase.js\";\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\n// Icons\nimport iconSysEnter2 from \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport iconAlert from \"@ui5/webcomponents-icons/dist/alert.js\";\nimport iconError from \"@ui5/webcomponents-icons/dist/error.js\";\nimport iconInformation from \"@ui5/webcomponents-icons/dist/information.js\";\n\n// Texts\nimport {\n\tNOTIFICATION_LIST_ITEM_READ,\n\tNOTIFICATION_LIST_ITEM_UNREAD,\n\tNOTIFICATION_LIST_ITEM_SHOW_MORE,\n\tNOTIFICATION_LIST_ITEM_SHOW_LESS,\n\tNOTIFICATION_LIST_ITEM_INFORMATION_STATUS_TXT,\n\tNOTIFICATION_LIST_ITEM_POSITIVE_STATUS_TXT,\n\tNOTIFICATION_LIST_ITEM_NEGATIVE_STATUS_TXT,\n\tNOTIFICATION_LIST_ITEM_CRITICAL_STATUS_TXT,\n\tNOTIFICATION_LIST_ITEM_MENU_BTN_TITLE,\n\tNOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_FULL,\n\tNOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_TRUNCATE,\n\tNOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE,\n\tNOTIFICATION_LIST_ITEM_IMPORTANT_TXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Templates\nimport NotificationListItemTemplate from \"./NotificationListItemTemplate.js\";\n\n// Styles\nimport NotificationListItemCss from \"./generated/themes/NotificationListItem.css.js\";\nimport IconDesign from \"@ui5/webcomponents/dist/types/IconDesign.js\";\n\ntype NotificationListItemCloseEventDetail = {\n\titem: HTMLElement,\n};\n\ntype NotificationListItemPressEventDetail = {\n\titem: NotificationListItem,\n};\n\ntype Footnote = Record<string, any>;\n\n/**\n * Defines the icons name corresponding to the notification's status indicator.\n */\nconst ICON_PER_STATUS_NAME = {\n\t[ValueState.Negative]: iconError,\n\t[ValueState.Critical]: iconAlert,\n\t[ValueState.Positive]: iconSysEnter2,\n\t[ValueState.Information]: iconInformation,\n\t[ValueState.None]: \"\",\n};\n\n/**\n * Defines the icons design (color) corresponding to the notification's status indicator.\n */\nconst ICON_PER_STATUS_DESIGN = {\n\t[ValueState.Negative]: IconDesign.Negative,\n\t[ValueState.Critical]: IconDesign.Critical,\n\t[ValueState.Positive]: IconDesign.Positive,\n\t[ValueState.Information]: IconDesign.Information,\n\t[ValueState.None]: undefined,\n};\n\n/**\n * @class\n *\n * ### Overview\n * The `ui5-li-notification` is a type of list item, meant to display notifications.\n *\n * The component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\n * and `footnotes` to fully describe a notification.\n *\n * The user can:\n *\n * - display a `Close` button\n * - can control whether the `titleText` and `description` should wrap or truncate\n * and display a `ShowMore` button to switch between less and more information\n * - add actions by using the `ui5-menu` component\n *\n * **Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n *\n * ### Usage\n * The component should be used inside a `ui5-notification-list`.\n *\n * ### Keyboard Handling\n *\n * #### Basic Navigation\n * The user can use the following keyboard shortcuts to perform actions (such as select, delete):\n *\n * - [Enter] - select an item (trigger \"item-click\" event)\n * - [Delete] - close an item (trigger \"item-close\" event)\n *\n * #### Fast Navigation\n * This component provides a fast navigation using the following keyboard shortcuts:\n *\n * - [Shift] + [Enter] - 'More'/'Less' link will be triggered\n * - [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`\n *\n * @constructor\n * @extends NotificationListItemBase\n * @since 1.0.0-rc.8\n * @public\n * @csspart title-text - Used to style the titleText of the notification list item\n */\n@customElement({\n\ttag: \"ui5-li-notification\",\n\tlanguageAware: true,\n\tstyles: [\n\t\tNotificationListItemCss,\n\t],\n\trenderer: jsxRenderer,\n\ttemplate: NotificationListItemTemplate,\n})\n\n@event(\"_press\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the `Close` button is pressed.\n * @param {HTMLElement} item the closed item.\n * @public\n */\n@event(\"close\")\n\n/**\n * Fired when the `Close` button is pressed.\n * @param {HTMLElement} item the closed item.\n * @private\n */\n@event(\"_close\", {\n\tbubbles: true,\n})\n\nclass NotificationListItem extends NotificationListItemBase {\n\teventDetails!: NotificationListItemBase[\"eventDetails\"] & {\n\t\t_press: NotificationListItemPressEventDetail,\n\t\tclose: NotificationListItemCloseEventDetail,\n\t\t_close: NotificationListItemCloseEventDetail,\n\t}\n\t/**\n\t* Defines if the `titleText` and `description` should wrap,\n\t* they truncate by default.\n\t*\n\t* **Note:** by default the `titleText` and `description`,\n\t* and a `ShowMore/Less` button would be displayed.\n\t* @default \"None\"\n\t* @public\n\t* @since 1.0.0-rc.15\n\t*/\n\t@property()\n\twrappingType: `${WrappingType}` = \"None\";\n\n\t/**\n\t * Defines the status indicator of the item.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property()\n\tstate: `${ValueState}` = \"None\"\n\n\t/**\n\t * Defines if the `Close` button would be displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowClose = false;\n\n\t/**\n\t * Defines the `Important` label of the item.\n\t * @default \"Standard\"\n\t * @public\n\t */\n\t@property()\n\timportance: `${NotificationListItemImportance}` = \"Standard\";\n\n\t/**\n\t* Defines the state of the `titleText` and `description`,\n\t* if less or more information is displayed.\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\t_showMorePressed = false;\n\n\t/**\n\t* Defines the visibility of the `showMore` button.\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\t_showMore = false;\n\n\t/**\n\t* Defines the avatar, displayed in the `ui5-li-notification`.\n\t*\n\t* **Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\t*\n\t* **Note:** In order to be complaint with the UX guidlines and for best experience,\n\t* we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\n\t* you can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`.\n\t* @public\n\t*/\n\t@slot()\n\tavatar!: Slot<HTMLElement>;\n\n\t/**\n\t* Defines the menu, displayed in the `ui5-li-notification`.\n\t*\n\t* **Note:** Use this for implementing actions.\n\t*\n\t* **Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.\n\t* @public\n\t*/\n\t@slot()\n\tmenu!: Slot<HTMLElement>;\n\n\t/**\n\t* Defines the elements, displayed in the footer of the of the component.\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement, individualSlots: true })\n\tfootnotes!: Slot<HTMLElement>;\n\n\t/**\n\t* Defines the content of the `ui5-li-notification`,\n\t* usually a description of the notification.\n\t*\n\t* **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t* @public\n\t*/\n\t@slot({ type: Node, \"default\": true })\n\tdescription!: DefaultSlot<Node>;\n\n\t@query(\".ui5-nli-title-text\")\n\ttitleTextDOM?: HTMLElement;\n\n\t@query(\".ui5-nli-menu-btn\")\n\tmenuButtonDOM?: HTMLElement;\n\n\t@query(\".ui5-nli-description\")\n\tdescriptionDOM?: HTMLElement;\n\n\t_titleTextOverflowHeight: number;\n\t_descOverflowHeight: number;\n\t_onResizeBound: ResizeObserverCallback;\n\n\t_ariaLevel?: number;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// the titleText overflow height\n\t\tthis._titleTextOverflowHeight = 0;\n\n\t\t// the description overflow height\n\t\tthis._descOverflowHeight = 0;\n\n\t\t// the resize handler\n\t\tthis._onResizeBound = this.onResize.bind(this);\n\t}\n\n\tonEnterDOM() {\n\t\tsuper.onEnterDOM();\n\t\tResizeHandler.register(this, this._onResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._onResizeBound);\n\t}\n\n\tget hasState() {\n\t\treturn this.state !== ValueState.None;\n\t}\n\n\tget hasDesc() {\n\t\treturn willShowContent(this.description);\n\t}\n\n\tget hasImportance() {\n\t\treturn this.importance !== NotificationListItemImportance.Standard;\n\t}\n\n\tget hasFootNotes() {\n\t\treturn !!this.footnotes.length;\n\t}\n\n\tget showMoreText() {\n\t\tif (this._showMorePressed) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_LESS);\n\t\t}\n\n\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_MORE);\n\t}\n\n\tget menuBtnAccessibleName() {\n\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MENU_BTN_TITLE);\n\t}\n\n\tget moreLinkAccessibleName() {\n\t\treturn this._showMorePressed ? NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_TRUNCATE) : NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_FULL);\n\t}\n\n\tget closeBtnAccessibleName() {\n\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);\n\t}\n\n\tget hideShowMore() {\n\t\tif (this.wrappingType === WrappingType.None && this._showMore) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\tget titleTextHeight() {\n\t\treturn (this.titleTextDOM as HTMLElement).offsetHeight;\n\t}\n\n\tget descriptionHeight() {\n\t\treturn (this.descriptionDOM as HTMLElement).offsetHeight;\n\t}\n\n\tget titleTextOverflows() {\n\t\tconst titleText = this.titleTextDOM;\n\n\t\tif (!titleText) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn titleText.offsetHeight < titleText.scrollHeight;\n\t}\n\n\tget descriptionOverflows() {\n\t\tconst description = this.descriptionDOM;\n\n\t\tif (!description) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn description.offsetHeight < description.scrollHeight;\n\t}\n\n\tget footerItems() {\n\t\treturn this.footnotes.map((el, idx, arr) => {\n\t\t\treturn {\n\t\t\t\tslotName: (el as Footnote)._individualSlot,\n\t\t\t\tshowDivider: idx !== arr.length - 1,\n\t\t\t};\n\t\t});\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.hasImportance) {\n\t\t\tids.push(`${id}-importance`);\n\t\t}\n\n\t\tif (this.hasTitleText) {\n\t\t\tids.push(`${id}-title-text`);\n\t\t}\n\n\t\tids.push(`${id}-read`);\n\n\t\tif (this.hasDesc) {\n\t\t\tids.push(`${id}-description`);\n\t\t}\n\n\t\tif (this.hasFootNotes) {\n\t\t\tids.push(`${id}-footnotes`);\n\t\t}\n\n\t\treturn ids.join(\" \");\n\t}\n\n\tget itemClasses() {\n\t\tconst classes = [\"ui5-nli-root\", \"ui5-nli-focusable\"];\n\n\t\tif (this.getMenu() && this.showClose) {\n\t\t\tclasses.push(\"ui5-nli-two-buttons\");\n\t\t} else if (this.getMenu() || this.showClose) {\n\t\t\tclasses.push(\"ui5-nli-one-button\");\n\t\t}\n\n\t\treturn classes.join(\" \");\n\t}\n\n\tget statusIconName() {\n\t\treturn ICON_PER_STATUS_NAME[this.state];\n\t}\n\n\tget statusIconDesign() {\n\t\treturn ICON_PER_STATUS_DESIGN[this.state];\n\t}\n\n\tget importanceText() {\n\t\tlet text;\n\t\tif (this.hasImportance) {\n\t\t\ttext = NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_IMPORTANT_TXT);\n\t\t} else {\n\t\t\ttext = \"\";\n\t\t}\n\n\t\treturn text;\n\t}\n\n\tget stateText() {\n\t\tif (this.state === ValueState.Positive) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_POSITIVE_STATUS_TXT);\n\t\t}\n\n\t\tif (this.state === ValueState.Critical) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_CRITICAL_STATUS_TXT);\n\t\t}\n\n\t\tif (this.state === ValueState.Negative) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_NEGATIVE_STATUS_TXT);\n\t\t}\n\n\t\tif (this.state === ValueState.Information) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_INFORMATION_STATUS_TXT);\n\t\t}\n\n\t\treturn \"\";\n\t}\n\n\tget readText() {\n\t\treturn this.read ? NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);\n\t}\n\n\tget menuButtonAccessibilityAttributes(): ButtonAccessibilityAttributes {\n\t\treturn {\n\t\t\thasPopup: \"menu\",\n\t\t};\n\t}\n\n\tget moreLinkAccessibilityAttributes() {\n\t\treturn {\n\t\t\texpanded: this._showMorePressed,\n\t\t};\n\t}\n\n\tget showMenu() {\n\t\treturn !!this.getMenu();\n\t}\n\n\t/**\n\t * Event handlers\n\t */\n\t_onclick() {\n\t\tthis.fireItemPress();\n\t}\n\n\t_onShowMoreClick(e: UI5CustomEvent<Link, \"click\">) {\n\t\te.preventDefault();\n\t\tthis._toggleShowMorePressed();\n\t}\n\n\tasync _onkeydown(e: KeyboardEvent) {\n\t\tawait super._onkeydown(e);\n\n\t\tif (isF10Shift(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tsuper._onkeyup(e);\n\n\t\tconst space = isSpace(e);\n\n\t\tif (space && this.getFocusDomRef()!.matches(\":has(:focus-within)\")) {\n\t\t\te.preventDefault();\n\t\t\tthis._toggleShowMorePressed();\n\t\t\treturn;\n\t\t}\n\n\t\tif (isDelete(e)) {\n\t\t\tthis.fireDecoratorEvent(\"close\", { item: this });\n\t\t\tthis.fireDecoratorEvent(\"_close\", { item: this });\n\t\t}\n\n\t\tif (isF10Shift(e)) {\n\t\t\tthis._onBtnMenuClick();\n\t\t}\n\n\t\tif (isEnterShift(e)) {\n\t\t\tthis._toggleShowMorePressed();\n\t\t}\n\t}\n\n\t_onBtnCloseClick() {\n\t\tthis.fireDecoratorEvent(\"close\", { item: this });\n\t\tthis.fireDecoratorEvent(\"_close\", { item: this });\n\t}\n\n\t_onBtnMenuClick() {\n\t\tif (this.getMenu()) {\n\t\t\tthis.openMenu();\n\t\t}\n\t}\n\n\t_toggleShowMorePressed() {\n\t\tthis._showMorePressed = !this._showMorePressed;\n\t}\n\n\topenMenu() {\n\t\tconst menu = this.getMenu();\n\t\tmenu.opener = this.menuButtonDOM;\n\t\tmenu.open = true;\n\t}\n\n\tgetMenu() {\n\t\tconst menu = this.querySelector<Menu>(\"[ui5-menu]\")!;\n\t\treturn menu;\n\t}\n\n\t/**\n\t * Private\n\t */\n\tfireItemPress() {\n\t\tif (this.getFocusDomRef()!.matches(\":has(:focus-within)\")) {\n\t\t\treturn;\n\t\t}\n\n\t\t// NotificationListItem will never be assigned to a variable of type ListItemBase\n\t\t// typescipt complains here, if that is the case, the parameter to the _press event handler could be a ListItemBase item,\n\t\t// but this is never the case, all components are used by their class and never assigned to a variable with a type of ListItemBase\n\t\tthis.fireDecoratorEvent(\"_press\", { item: this });\n\t}\n\n\tonResize() {\n\t\tif (this.wrappingType === WrappingType.Normal) {\n\t\t\tthis._showMore = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst titleTextWouldOverflow = this.titleTextHeight > this._titleTextOverflowHeight;\n\t\tconst descWouldOverflow = this.hasDesc && this.descriptionHeight > this._descOverflowHeight;\n\t\tconst overflows = titleTextWouldOverflow || descWouldOverflow;\n\n\t\tif (this._showMorePressed && overflows) {\n\t\t\tthis._showMore = true;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.titleTextOverflows || this.descriptionOverflows) {\n\t\t\tthis._titleTextOverflowHeight = this.titleTextHeight;\n\t\t\tthis._descOverflowHeight = this.hasDesc ? this.descriptionHeight : 0;\n\t\t\tthis._showMore = true;\n\t\t\treturn;\n\t\t}\n\n\t\tthis._showMore = false;\n\t}\n}\n\nNotificationListItem.define();\n\nexport default NotificationListItem;\nexport type {\n\tNotificationListItemPressEventDetail,\n\tNotificationListItemCloseEventDetail,\n};\n"]}

package/dist/NotificationListItemBase.d.ts

@@ -0,0 +1,52 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+/**
+ * @class
+ *
+ * The base class of the `NotificationListItem` and `NotificationListGroupItem`.
+ * @constructor
+ * @extends ListItemBase
+ * @since 1.0.0-rc.8
+ * @public
+ */
+declare class NotificationListItemBase extends ListItemBase {
+    eventDetails: ListItemBase["eventDetails"];
+    /**
+     * Defines the `titleText` of the item.
+     * @default undefined
+     * @public
+     */
+    titleText?: string;
+    /**
+     * Defines if the `notification` is new or has been already read.
+     *
+     * **Note:** if set to `false` the `titleText` has bold font,
+     * if set to true - it has a normal font.
+     * @default false
+     * @public
+     */
+    read: boolean;
+    /**
+     * Defines if a busy indicator would be displayed over the item.
+     * @default false
+     * @public
+     * @since 1.0.0-rc.8
+     */
+    loading: boolean;
+    /**
+     * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+     * @default 1000
+     * @public
+     */
+    loadingDelay: number;
+    static i18nFioriBundle: I18nBundle;
+    get hasTitleText(): boolean;
+    get loadingText(): string;
+    /**
+     * Event handlers
+     */
+    _onkeydown(e: KeyboardEvent): Promise<void>;
+    getHeaderDomRef(): HTMLElement | undefined;
+    shouldForwardTabAfter(): boolean;
+}
+export default NotificationListItemBase;

package/dist/NotificationListItemBase.js

@@ -0,0 +1,103 @@
+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 { isSpace, isF2 } from "@ui5/webcomponents-base/dist/Keys.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
+// Texts
+import { NOTIFICATION_LIST_ITEM_LOADING, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * The base class of the `NotificationListItem` and `NotificationListGroupItem`.
+ * @constructor
+ * @extends ListItemBase
+ * @since 1.0.0-rc.8
+ * @public
+ */
+class NotificationListItemBase extends ListItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines if the `notification` is new or has been already read.
+         *
+         * **Note:** if set to `false` the `titleText` has bold font,
+         * if set to true - it has a normal font.
+         * @default false
+         * @public
+         */
+        this.read = false;
+        /**
+         * Defines if a busy indicator would be displayed over the item.
+         * @default false
+         * @public
+         * @since 1.0.0-rc.8
+         */
+        this.loading = false;
+        /**
+         * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+         * @default 1000
+         * @public
+         */
+        this.loadingDelay = 1000;
+    }
+    get hasTitleText() {
+        return !!this.titleText?.length;
+    }
+    get loadingText() {
+        return NotificationListItemBase.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOADING);
+    }
+    /**
+     * Event handlers
+     */
+    async _onkeydown(e) {
+        super._onkeydown(e);
+        if (isSpace(e) && this.getFocusDomRef().matches(":has(:focus-within)")) {
+            e.preventDefault();
+            return;
+        }
+        if (isF2(e)) {
+            e.stopImmediatePropagation();
+            const activeElement = getActiveElement();
+            const focusDomRef = this.getHeaderDomRef();
+            if (activeElement === focusDomRef) {
+                const firstFocusable = await getFirstFocusableElement(focusDomRef);
+                firstFocusable?.focus();
+            }
+            else {
+                focusDomRef.focus();
+            }
+        }
+    }
+    getHeaderDomRef() {
+        return this.getFocusDomRef();
+    }
+    shouldForwardTabAfter() {
+        const aContent = getTabbableElements(this.getHeaderDomRef());
+        return aContent.length === 0 || (aContent[aContent.length - 1] === getActiveElement());
+    }
+}
+__decorate([
+    property()
+], NotificationListItemBase.prototype, "titleText", void 0);
+__decorate([
+    property({ type: Boolean })
+], NotificationListItemBase.prototype, "read", void 0);
+__decorate([
+    property({ type: Boolean })
+], NotificationListItemBase.prototype, "loading", void 0);
+__decorate([
+    property({ type: Number })
+], NotificationListItemBase.prototype, "loadingDelay", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], NotificationListItemBase, "i18nFioriBundle", void 0);
+export default NotificationListItemBase;
+//# sourceMappingURL=NotificationListItemBase.js.map