@ui5/webcomponents-fiori 1.23.0-rc.5 → 1.23.0

package/dist/MediaGalleryItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaGalleryItem.js","sourceRoot":"","sources":["../src/MediaGalleryItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/background.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 MediaGalleryItemLayout from \"./types/MediaGalleryItemLayout.js\";\nimport type { IMediaGalleryItem } from \"./MediaGallery.js\";\n\n// Styles\nimport MediaGalleryItemCss from \"./generated/themes/MediaGalleryItem.css.js\";\n\n// Template\nimport MediaGalleryItemTemplate from \"./generated/templates/MediaGalleryItemTemplate.lit.js\";\n\n/**\n * @class\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-media-gallery-item</code> web component represents the items displayed in the\n * <code>ui5-media-gallery</code> web component.\n * <br><br>\n * <b>Note:</b> <code>ui5-media-gallery-item</code> is not supported when used outside of <code>ui5-media-gallery</code>.\n * <br><br>\n *\n * <h3>Keyboard Handling</h3>\n * The <code>ui5-media-gallery</code> provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n * <br>\n * <ul>\n * <li>[SPACE/ENTER/RETURN] - Trigger <code>ui5-click</code> event</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n * <code>import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";</code> (comes with <code>ui5-media-gallery</code>)\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @implements {IMediaGalleryItem}\n * @since 1.1.0\n */\n@customElement({\n\ttag: \"ui5-media-gallery-item\",\n\trenderer: litRender,\n\tstyles: MediaGalleryItemCss,\n\ttemplate: MediaGalleryItemTemplate,\n\tdependencies: [Icon],\n})\nclass MediaGalleryItem extends UI5Element implements IMediaGalleryItem {\n\t/**\n\t * Defines the selected state of the component.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Determines the layout of the item container.\n\t * <br><br>\n\t * Available options are:\n\t * <ul>\n\t * <li><code>Square</code></li>\n\t * <li><code>Wide</code></li>\n\t * </ul>\n\t *\n\t * @default \"Square\"\n\t * @public\n\t */\n\t@property({ type: MediaGalleryItemLayout, defaultValue: MediaGalleryItemLayout.Square })\n\tlayout!: `${MediaGalleryItemLayout}`;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_interactive!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_square!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_contentImageNotFound!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_thumbnailNotFound!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_thumbnailDesign!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property()\n\tforcedTabIndex!: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tcontentHeight!: string;\n\n\t/**\n\t * Defines the content of the component.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the content of the thumbnail.\n\t *\n\t * @public\n\t */\n\t@slot()\n\tthumbnail!: Array<HTMLElement>;\n\n\t_monitoredThumbnail: HTMLElement | null;\n\t_monitoredContent: HTMLElement | null;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._monitoredContent = null;\n\t\tthis._monitoredThumbnail = null;\n\t}\n\n\tonEnterDOM() {\n\t\tthis._thumbnailDesign = !isPhone();\n\t\tthis._interactive = !isPhone();\n\t\tthis._square = true;\n\t}\n\n\tget _thumbnail() {\n\t\treturn this.thumbnail.length ? this.thumbnail[0] : null;\n\t}\n\n\tget displayedContent() {\n\t\treturn this.content.length ? this.content[0] : null;\n\t}\n\n\tget _isThubmnailAvailable() {\n\t\treturn this._thumbnail && !this._thumbnailNotFound;\n\t}\n\n\tget _isContentAvailable() {\n\t\treturn this.displayedContent && !this._contentImageNotFound;\n\t}\n\n\tget _useThumbnail() {\n\t\treturn this._thumbnailDesign && this._isThubmnailAvailable;\n\t}\n\n\tget _useContent() {\n\t\treturn !this._useThumbnail && this._isContentAvailable;\n\t}\n\n\tget effectiveTabIndex() {\n\t\treturn this.disabled ? undefined : this.forcedTabIndex;\n\t}\n\n\tget _showBackgroundIcon() {\n\t\treturn this._thumbnailNotFound || this._contentImageNotFound;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twrapper: {\n\t\t\t\theight: this.contentHeight,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _role() {\n\t\treturn this._interactive ? \"button\" : undefined;\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._monitorLoadingError();\n\t}\n\n\t_monitorLoadingError() {\n\t\tlet callback,\n\t\t\tsuccess;\n\t\tif (this._thumbnailDesign && this.thumbnail.length && (this._monitoredThumbnail !== this._thumbnail)) {\n\t\t\tthis._thumbnailNotFound = false; // reset flag\n\t\t\tcallback = this._updateThumbnailLoaded.bind(this);\n\t\t\tsuccess = this._attachListeners(this._thumbnail as HTMLImageElement, callback);\n\t\t\tsuccess && (this._monitoredThumbnail = this._thumbnail);\n\t\t}\n\t\tif (!this._useThumbnail && this.content.length && (this._monitoredContent !== this.displayedContent)) {\n\t\t\tthis._contentImageNotFound = false; // reset flag\n\t\t\tcallback = this._updateContentImageLoaded.bind(this);\n\t\t\tsuccess = this._attachListeners(this.displayedContent as HTMLImageElement, callback);\n\t\t\tsuccess && (this._monitoredContent = this.displayedContent);\n\t\t}\n\t}\n\n\t_attachListeners(element: HTMLImageElement, callback: (image: HTMLImageElement) => void) {\n\t\tconst isImg = element.tagName === \"IMG\",\n\t\t\timg = isImg ? element : element.querySelector(\"img\");\n\t\tif (img) {\n\t\t\tcallback(img);\n\t\t\timg.addEventListener(\"error\", () => {\n\t\t\t\tif (this.contains(img)) { // img still belongs to us\n\t\t\t\t\tcallback(img);\n\t\t\t\t}\n\t\t\t});\n\t\t\timg.addEventListener(\"load\", () => {\n\t\t\t\tif (this.contains(img)) { // img still belongs to us\n\t\t\t\t\tcallback(img);\n\t\t\t\t}\n\t\t\t});\n\t\t\treturn true;\n\t\t}\n\t}\n\n\t_updateContentImageLoaded(image: HTMLImageElement) {\n\t\tthis._contentImageNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;\n\t}\n\n\t_updateThumbnailLoaded(image: HTMLImageElement) {\n\t\tthis._thumbnailNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t_onfocusin() {\n\t\tthis.focused = true;\n\t}\n\n\t_fireItemClick() {\n\t\tthis.fireEvent(\"click\", { item: this });\n\t}\n}\n\nMediaGalleryItem.define();\n\nexport default MediaGalleryItem;\n"]}
+{"version":3,"file":"MediaGalleryItem.js","sourceRoot":"","sources":["../src/MediaGalleryItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/background.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 MediaGalleryItemLayout from \"./types/MediaGalleryItemLayout.js\";\nimport type { IMediaGalleryItem } from \"./MediaGallery.js\";\n\n// Styles\nimport MediaGalleryItemCss from \"./generated/themes/MediaGalleryItem.css.js\";\n\n// Template\nimport MediaGalleryItemTemplate from \"./generated/templates/MediaGalleryItemTemplate.lit.js\";\n\n/**\n * @class\n * ### Overview\n * The `ui5-media-gallery-item` web component represents the items displayed in the\n * `ui5-media-gallery` web component.\n *\n * **Note:** `ui5-media-gallery-item` is not supported when used outside of `ui5-media-gallery`.\n *\n * ### Keyboard Handling\n * The `ui5-media-gallery` provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n *\n * - [SPACE/ENTER/RETURN] - Trigger `ui5-click` event\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/MediaGalleryItem.js\";` (comes with `ui5-media-gallery`)\n * @constructor\n * @extends UI5Element\n * @public\n * @implements {IMediaGalleryItem}\n * @since 1.1.0\n */\n@customElement({\n\ttag: \"ui5-media-gallery-item\",\n\trenderer: litRender,\n\tstyles: MediaGalleryItemCss,\n\ttemplate: MediaGalleryItemTemplate,\n\tdependencies: [Icon],\n})\nclass MediaGalleryItem extends UI5Element implements IMediaGalleryItem {\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Determines the layout of the item container.\n\t * @default \"Square\"\n\t * @public\n\t */\n\t@property({ type: MediaGalleryItemLayout, defaultValue: MediaGalleryItemLayout.Square })\n\tlayout!: `${MediaGalleryItemLayout}`;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_interactive!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_square!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_contentImageNotFound!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_thumbnailNotFound!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_thumbnailDesign!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t/**\n\t * @private\n\t */\n\t@property()\n\tforcedTabIndex!: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\tcontentHeight!: string;\n\n\t/**\n\t * Defines the content of the component.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the content of the thumbnail.\n\t * @public\n\t */\n\t@slot()\n\tthumbnail!: Array<HTMLElement>;\n\n\t_monitoredThumbnail: HTMLElement | null;\n\t_monitoredContent: HTMLElement | null;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._monitoredContent = null;\n\t\tthis._monitoredThumbnail = null;\n\t}\n\n\tonEnterDOM() {\n\t\tthis._thumbnailDesign = !isPhone();\n\t\tthis._interactive = !isPhone();\n\t\tthis._square = true;\n\t}\n\n\tget _thumbnail() {\n\t\treturn this.thumbnail.length ? this.thumbnail[0] : null;\n\t}\n\n\tget displayedContent() {\n\t\treturn this.content.length ? this.content[0] : null;\n\t}\n\n\tget _isThubmnailAvailable() {\n\t\treturn this._thumbnail && !this._thumbnailNotFound;\n\t}\n\n\tget _isContentAvailable() {\n\t\treturn this.displayedContent && !this._contentImageNotFound;\n\t}\n\n\tget _useThumbnail() {\n\t\treturn this._thumbnailDesign && this._isThubmnailAvailable;\n\t}\n\n\tget _useContent() {\n\t\treturn !this._useThumbnail && this._isContentAvailable;\n\t}\n\n\tget effectiveTabIndex() {\n\t\treturn this.disabled ? undefined : this.forcedTabIndex;\n\t}\n\n\tget _showBackgroundIcon() {\n\t\treturn this._thumbnailNotFound || this._contentImageNotFound;\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\twrapper: {\n\t\t\t\theight: this.contentHeight,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _role() {\n\t\treturn this._interactive ? \"button\" : undefined;\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._monitorLoadingError();\n\t}\n\n\t_monitorLoadingError() {\n\t\tlet callback,\n\t\t\tsuccess;\n\t\tif (this._thumbnailDesign && this.thumbnail.length && (this._monitoredThumbnail !== this._thumbnail)) {\n\t\t\tthis._thumbnailNotFound = false; // reset flag\n\t\t\tcallback = this._updateThumbnailLoaded.bind(this);\n\t\t\tsuccess = this._attachListeners(this._thumbnail as HTMLImageElement, callback);\n\t\t\tsuccess && (this._monitoredThumbnail = this._thumbnail);\n\t\t}\n\t\tif (!this._useThumbnail && this.content.length && (this._monitoredContent !== this.displayedContent)) {\n\t\t\tthis._contentImageNotFound = false; // reset flag\n\t\t\tcallback = this._updateContentImageLoaded.bind(this);\n\t\t\tsuccess = this._attachListeners(this.displayedContent as HTMLImageElement, callback);\n\t\t\tsuccess && (this._monitoredContent = this.displayedContent);\n\t\t}\n\t}\n\n\t_attachListeners(element: HTMLImageElement, callback: (image: HTMLImageElement) => void) {\n\t\tconst isImg = element.tagName === \"IMG\",\n\t\t\timg = isImg ? element : element.querySelector(\"img\");\n\t\tif (img) {\n\t\t\tcallback(img);\n\t\t\timg.addEventListener(\"error\", () => {\n\t\t\t\tif (this.contains(img)) { // img still belongs to us\n\t\t\t\t\tcallback(img);\n\t\t\t\t}\n\t\t\t});\n\t\t\timg.addEventListener(\"load\", () => {\n\t\t\t\tif (this.contains(img)) { // img still belongs to us\n\t\t\t\t\tcallback(img);\n\t\t\t\t}\n\t\t\t});\n\t\t\treturn true;\n\t\t}\n\t}\n\n\t_updateContentImageLoaded(image: HTMLImageElement) {\n\t\tthis._contentImageNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;\n\t}\n\n\t_updateThumbnailLoaded(image: HTMLImageElement) {\n\t\tthis._thumbnailNotFound = image.naturalHeight === 0 && image.naturalWidth === 0;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t_onfocusin() {\n\t\tthis.focused = true;\n\t}\n\n\t_fireItemClick() {\n\t\tthis.fireEvent(\"click\", { item: this });\n\t}\n}\n\nMediaGalleryItem.define();\n\nexport default MediaGalleryItem;\n"]}

package/dist/NotificationAction.d.ts

@@ -6,9 +6,8 @@ type NotificationActionClickEventDetail = {
 };
 /**
  * @class
- * The <code>ui5-notification-action</code> represents an abstract action,
- * used in the <code>ui5-li-notification</code> and the <code>ui5-li-notification-group</code> items.
- *
+ * The `ui5-notification-action` represents an abstract action,
+ * used in the `ui5-li-notification` and the `ui5-li-notification-group` items.
  * @constructor
  * @extends UI5Element
  * @abstract
@@ -16,43 +15,38 @@ type NotificationActionClickEventDetail = {
  */
 declare class NotificationAction extends UI5Element {
     /**
-     * Defines the text of the <code>ui5-notification-action</code>.
-     *
+     * Defines the text of the `ui5-notification-action`.
      * @default ""
      * @public
      */
     text: string;
     /**
      * Defines if the action is disabled.
-     * <br><br>
-     * <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.
      *
+     * **Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.
      * @default false
      * @public
      */
     disabled: boolean;
     /**
      * Defines the action design.
-     *
      * @default "Transparent"
      * @public
      */
     design: `${ButtonDesign}`;
     /**
-     * Defines the <code>icon</code> source URI.
-     * <br><br>
-     * <b>Note:</b>
-     * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
-     * <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+     * Defines the `icon` source URI.
      *
+     * **Note:**
+     * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
+     * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
      * @default ""
      * @public
      */
     icon: string;
     /**
      * Fires a custom event "click".
-     * <b>Note:</b> Called by NotificationListItem and NotificationListGroupItem components.
-     *
+     * **Note:** Called by NotificationListItem and NotificationListGroupItem components.
      * @param e
      * @protected
      * @returns false, if the event was cancelled (preventDefault called), true otherwise

package/dist/NotificationAction.js

@@ -11,9 +11,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 /**
  * @class
- * The <code>ui5-notification-action</code> represents an abstract action,
- * used in the <code>ui5-li-notification</code> and the <code>ui5-li-notification-group</code> items.
- *
+ * The `ui5-notification-action` represents an abstract action,
+ * used in the `ui5-li-notification` and the `ui5-li-notification-group` items.
  * @constructor
  * @extends UI5Element
  * @abstract
@@ -22,8 +21,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 let NotificationAction = class NotificationAction extends UI5Element {
     /**
      * Fires a custom event "click".
-     * <b>Note:</b> Called by NotificationListItem and NotificationListGroupItem components.
-     *
+     * **Note:** Called by NotificationListItem and NotificationListGroupItem components.
      * @param e
      * @protected
      * @returns false, if the event was cancelled (preventDefault called), true otherwise
@@ -50,7 +48,6 @@ NotificationAction = __decorate([
     customElement("ui5-notification-action")
     /**
      * Fired, when the action is pressed.
-     *
      * @param {HTMLElement} targetRef DOM ref of the clicked element
      * @public
      */

package/dist/NotificationAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationAction.js","sourceRoot":"","sources":["../src/NotificationAction.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,YAAY,MAAM,+CAA+C,CAAC;AACzE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AAOrE;;;;;;;;;GASG;AAcH,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IA2C1C;;;;;;;OAOG;IACH,cAAc,CAAC,CAAa;QAC3B,OAAO,IAAI,CAAC,SAAS,CAAqC,OAAO,EAAE;YAClE,SAAS,EAAG,CAAC,CAAC,MAAiB;SAC/B,EAAE,IAAI,CAAC,CAAC;IACV,CAAC;CACD,CAAA;AAhDA;IADC,QAAQ,EAAE;gDACG;AAWd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACT;AASnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,WAAW,EAAE,CAAC;kDAC9C;AAa3B;IADC,QAAQ,EAAE;gDACG;AAzCT,kBAAkB;IAbvB,aAAa,CAAC,yBAAyB,CAAC;IAEzC;;;;;OAKG;;IACF,KAAK,CAAqC,OAAO,EAAE;QACnD,MAAM,EAAE;YACP,SAAS,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAChC;KACD,CAAC;GACI,kBAAkB,CAwDvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport type Button from \"@ui5/webcomponents/dist/Button.js\";\n\ntype NotificationActionClickEventDetail = {\n\ttargetRef: Button,\n};\n\n/**\n * @class\n * The <code>ui5-notification-action</code> represents an abstract action,\n * used in the <code>ui5-li-notification</code> and the <code>ui5-li-notification-group</code> items.\n *\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n */\n@customElement(\"ui5-notification-action\")\n\n/**\n * Fired, when the action is pressed.\n *\n * @param {HTMLElement} targetRef DOM ref of the clicked element\n * @public\n */\n@event<NotificationActionClickEventDetail>(\"click\", {\n\tdetail: {\n\t\ttargetRef: { type: HTMLElement },\n\t},\n})\nclass NotificationAction extends UI5Element {\n\t/**\n\t * Defines the text of the <code>ui5-notification-action</code>.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttext!: string;\n\n\t/**\n\t * Defines if the action is disabled.\n\t * <br><br>\n\t * <b>Note:</b> a disabled action can't be pressed or focused, and it is not in the tab chain.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the action design.\n\t *\n\t * @default \"Transparent\"\n\t * @public\n\t */\n\t@property({ type: ButtonDesign, defaultValue: ButtonDesign.Transparent })\n\tdesign!: `${ButtonDesign}`;\n\n\t/**\n\t * Defines the <code>icon</code> source URI.\n\t * <br><br>\n\t * <b>Note:</b>\n\t * SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n\t * <ui5-link target=\"_blank\" href=\"https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html\">Icon Explorer</ui5-link>.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ticon!: string;\n\n\t/**\n\t * Fires a custom event \"click\".\n\t * <b>Note:</b> Called by NotificationListItem and NotificationListGroupItem components.\n\t *\n\t * @param e\n\t * @protected\n\t * @returns false, if the event was cancelled (preventDefault called), true otherwise\n\t */\n\tfireClickEvent(e: MouseEvent): boolean {\n\t\treturn this.fireEvent<NotificationActionClickEventDetail>(\"click\", {\n\t\t\ttargetRef: (e.target as Button),\n\t\t}, true);\n\t}\n}\n\nNotificationAction.define();\n\nexport default NotificationAction;\n\nexport type {\n\tNotificationActionClickEventDetail,\n};\n"]}
+{"version":3,"file":"NotificationAction.js","sourceRoot":"","sources":["../src/NotificationAction.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,YAAY,MAAM,+CAA+C,CAAC;AACzE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AAOrE;;;;;;;;GAQG;AAaH,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAuC1C;;;;;;OAMG;IACH,cAAc,CAAC,CAAa;QAC3B,OAAO,IAAI,CAAC,SAAS,CAAqC,OAAO,EAAE;YAClE,SAAS,EAAG,CAAC,CAAC,MAAiB;SAC/B,EAAE,IAAI,CAAC,CAAC;IACV,CAAC;CACD,CAAA;AA5CA;IADC,QAAQ,EAAE;gDACG;AAUd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACT;AAQnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,WAAW,EAAE,CAAC;kDAC9C;AAY3B;IADC,QAAQ,EAAE;gDACG;AArCT,kBAAkB;IAZvB,aAAa,CAAC,yBAAyB,CAAC;IAEzC;;;;OAIG;;IACF,KAAK,CAAqC,OAAO,EAAE;QACnD,MAAM,EAAE;YACP,SAAS,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAChC;KACD,CAAC;GACI,kBAAkB,CAmDvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport type Button from \"@ui5/webcomponents/dist/Button.js\";\n\ntype NotificationActionClickEventDetail = {\n\ttargetRef: Button,\n};\n\n/**\n * @class\n * The `ui5-notification-action` represents an abstract action,\n * used in the `ui5-li-notification` and the `ui5-li-notification-group` items.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n */\n@customElement(\"ui5-notification-action\")\n\n/**\n * Fired, when the action is pressed.\n * @param {HTMLElement} targetRef DOM ref of the clicked element\n * @public\n */\n@event<NotificationActionClickEventDetail>(\"click\", {\n\tdetail: {\n\t\ttargetRef: { type: HTMLElement },\n\t},\n})\nclass NotificationAction extends UI5Element {\n\t/**\n\t * Defines the text of the `ui5-notification-action`.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ttext!: string;\n\n\t/**\n\t * Defines if the action is disabled.\n\t *\n\t * **Note:** a disabled action can't be pressed or focused, and it is not in the tab chain.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the action design.\n\t * @default \"Transparent\"\n\t * @public\n\t */\n\t@property({ type: ButtonDesign, defaultValue: ButtonDesign.Transparent })\n\tdesign!: `${ButtonDesign}`;\n\n\t/**\n\t * Defines the `icon` source URI.\n\t *\n\t * **Note:**\n\t * SAP-icons font provides numerous built-in icons. To find all the available icons, see the\n\t * [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\ticon!: string;\n\n\t/**\n\t * Fires a custom event \"click\".\n\t * **Note:** Called by NotificationListItem and NotificationListGroupItem components.\n\t * @param e\n\t * @protected\n\t * @returns false, if the event was cancelled (preventDefault called), true otherwise\n\t */\n\tfireClickEvent(e: MouseEvent): boolean {\n\t\treturn this.fireEvent<NotificationActionClickEventDetail>(\"click\", {\n\t\t\ttargetRef: (e.target as Button),\n\t\t}, true);\n\t}\n}\n\nNotificationAction.define();\n\nexport default NotificationAction;\n\nexport type {\n\tNotificationActionClickEventDetail,\n};\n"]}

package/dist/NotificationListGroupItem.d.ts

@@ -10,28 +10,26 @@ type NotificationListGroupItemToggleEventDetail = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-li-notification-group</code> is a special type of list item,
- * that unlike others can group items within self, usually <code>ui5-li-notification</code> items.
- * <br>
+ * ### 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:
- * <ul>
- * <li><code>Toggle</code> button to expand and collapse the group</li>
- * <li><code>Priority</code> icon to display the priority of the group</li>
- * <li><code>TitleText</code> to entitle the group</li>
- * <li>Custom actions - with the use of <code>ui5-notification-action</code></li>
- * <li>Items of the group</li>
- * </ul>
  *
- * <h3>Usage</h3>
- * The component can be used in a standard <code>ui5-list</code>.
+ * - `Toggle` button to expand and collapse the group
+ * - `Priority` icon to display the priority of the group
+ * - `TitleText` to entitle the group
+ * - Custom actions - with the use of `ui5-notification-action`
+ * - Items of the group
  *
- * <h3>ES6 Module Import</h3>
+ * ### Usage
+ * The component can be used in a standard `ui5-list`.
  *
- * <code>import "@ui5/webcomponents/dist/NotificationListGroupItem.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/NotificationListGroupItem.js";`
+ *
+ * `import "@ui5/webcomponents/dist/NotificationAction.js";` (optional)
  * @constructor
  * @extends NotificationListItemBase
  * @since 1.0.0-rc.8
@@ -45,15 +43,14 @@ declare class NotificationListGroupItem extends NotificationListItemBase {
      */
     collapsed: boolean;
     /**
-     * Defines if the items <code>counter</code> would be displayed.
+     * Defines if the items `counter` would be displayed.
      * @default false
      * @public
      */
     showCounter: boolean;
     /**
-     * Defines the items of the <code>ui5-li-notification-group</code>,
-     * usually <code>ui5-li-notification</code> items.
-     *
+     * Defines the items of the `ui5-li-notification-group`,
+     * usually `ui5-li-notification` items.
      * @public
      */
     items: Array<NotificationListItemBase>;

package/dist/NotificationListGroupItem.js

@@ -30,28 +30,26 @@ import NotificationListGroupItemCss from "./generated/themes/NotificationListGro
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-li-notification-group</code> is a special type of list item,
- * that unlike others can group items within self, usually <code>ui5-li-notification</code> items.
- * <br>
+ * ### 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:
- * <ul>
- * <li><code>Toggle</code> button to expand and collapse the group</li>
- * <li><code>Priority</code> icon to display the priority of the group</li>
- * <li><code>TitleText</code> to entitle the group</li>
- * <li>Custom actions - with the use of <code>ui5-notification-action</code></li>
- * <li>Items of the group</li>
- * </ul>
  *
- * <h3>Usage</h3>
- * The component can be used in a standard <code>ui5-list</code>.
+ * - `Toggle` button to expand and collapse the group
+ * - `Priority` icon to display the priority of the group
+ * - `TitleText` to entitle the group
+ * - Custom actions - with the use of `ui5-notification-action`
+ * - Items of the group
  *
- * <h3>ES6 Module Import</h3>
+ * ### Usage
+ * The component can be used in a standard `ui5-list`.
  *
- * <code>import "@ui5/webcomponents/dist/NotificationListGroupItem.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/NotificationListGroupItem.js";`
+ *
+ * `import "@ui5/webcomponents/dist/NotificationAction.js";` (optional)
  * @constructor
  * @extends NotificationListItemBase
  * @since 1.0.0-rc.8
@@ -163,8 +161,7 @@ NotificationListGroupItem = NotificationListGroupItem_1 = __decorate([
         ],
     })
     /**
-     * Fired when the <code>ui5-li-notification-group</code> is expanded/collapsed by user interaction.
-     *
+     * Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.
      * @public
      */
     ,

package/dist/NotificationListGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationListGroupItem.js","sourceRoot":"","sources":["../src/NotificationListGroupItem.ts"],"names":[],"mappings":"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","sourcesContent":["import Priority from \"@ui5/webcomponents/dist/types/Priority.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.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport NotificationListItemBase from \"./NotificationListItemBase.js\";\nimport type { NotificationListItemBaseCloseEventDetail as NotificationListGroupItemCloseEventDetail } from \"./NotificationListItemBase.js\";\n\n// Icons\nimport \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/overflow.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\n\n// Texts\nimport {\n\tNOTIFICATION_LIST_GROUP_ITEM_TXT,\n\tNOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT,\n\tNOTIFICATION_LIST_ITEM_READ,\n\tNOTIFICATION_LIST_ITEM_UNREAD,\n\tNOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE,\n\tNOTIFICATION_LIST_GROUP_ITEM_CLOSE_BTN_TITLE,\n\tNOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_COLLAPSE_TITLE,\n\tNOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_EXPAND_TITLE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Templates\nimport NotificationListGroupItemTemplate from \"./generated/templates/NotificationListGroupItemTemplate.lit.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 * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-li-notification-group</code> is a special type of list item,\n * that unlike others can group items within self, usually <code>ui5-li-notification</code> items.\n * <br>\n *\n * The component consists of:\n * <ul>\n * <li><code>Toggle</code> button to expand and collapse the group</li>\n * <li><code>Priority</code> icon to display the priority of the group</li>\n * <li><code>TitleText</code> to entitle the group</li>\n * <li>Custom actions - with the use of <code>ui5-notification-action</code></li>\n * <li>Items of the group</li>\n * </ul>\n *\n * <h3>Usage</h3>\n * The component can be used in a standard <code>ui5-list</code>.\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/NotificationListGroupItem.js\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents/dist/NotificationAction.js\";</code> (optional)\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\tstyles: NotificationListGroupItemCss,\n\ttemplate: NotificationListGroupItemTemplate,\n\tdependencies: [\n\t\tList,\n\t\tButton,\n\t\tIcon,\n\t\tBusyIndicator,\n\t\tPopover,\n\t],\n})\n\n/**\n * Fired when the <code>ui5-li-notification-group</code> is expanded/collapsed by user interaction.\n *\n * @public\n */\n@event(\"toggle\")\nclass NotificationListGroupItem extends NotificationListItemBase {\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!: boolean;\n\n\t/**\n\t * Defines if the items <code>counter</code> would be displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowCounter!: boolean;\n\n\t/**\n\t * Defines the items of the <code>ui5-li-notification-group</code>,\n\t * usually <code>ui5-li-notification</code> items.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<NotificationListItemBase>\n\n\tonBeforeRendering() {\n\t\tif (this.busy) {\n\t\t\tthis.clearChildBusyIndicator();\n\t\t}\n\t}\n\n\t/**\n\t * Clears child items busy state to show a single busy 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.busy = false;\n\t\t});\n\t}\n\n\tget itemsCount() {\n\t\treturn this.items.length;\n\t}\n\n\tget overflowBtnAccessibleName() {\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);\n\t}\n\n\tget closeBtnAccessibleName() {\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_CLOSE_BTN_TITLE);\n\t}\n\n\tget toggleBtnAccessibleName() {\n\t\tif (this.collapsed) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_EXPAND_TITLE);\n\t\t}\n\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_COLLAPSE_TITLE);\n\t}\n\n\tget priorityText() {\n\t\tif (this.priority === Priority.High) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);\n\t\t}\n\n\t\tif (this.priority === Priority.Medium) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);\n\t\t}\n\n\t\tif (this.priority === Priority.Low) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);\n\t\t}\n\n\t\treturn \"\";\n\t}\n\n\tget accInvisibleText() {\n\t\treturn `${this.groupText} ${this.readText} ${this.priorityText} ${this.counterText}`;\n\t}\n\n\tget readText() {\n\t\tif (this.read) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ);\n\t\t}\n\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);\n\t}\n\n\tget groupText() {\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TXT);\n\t}\n\n\tget counterText() {\n\t\tconst text = NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT);\n\t\treturn this.showCounter ? `${text} ${this.itemsCount}` : \"\";\n\t}\n\n\tget ariaLabelledBy() {\n\t\tconst id = this._id;\n\t\tconst ids = [];\n\n\t\tif (this.hasTitleText) {\n\t\t\tids.push(`${id}-title-text`);\n\t\t}\n\n\t\tids.push(`${id}-invisibleText`);\n\t\treturn ids.join(\" \");\n\t}\n\n\tget _ariaExpanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget groupCollapsedIcon() {\n\t\treturn this.collapsed ? \"navigation-right-arrow\" : \"navigation-down-arrow\";\n\t}\n\n\t/**\n\t * Event handlers\n\t *\n\t */\n\t_onBtnToggleClick() {\n\t\tthis.collapsed = !this.collapsed;\n\t\tthis.fireEvent<NotificationListGroupItemToggleEventDetail>(\"toggle\", { item: this });\n\t}\n}\n\nNotificationListGroupItem.define();\n\nexport default NotificationListGroupItem;\nexport type {\n\tNotificationListGroupItemToggleEventDetail,\n\tNotificationListGroupItemCloseEventDetail,\n};\n"]}
+{"version":3,"file":"NotificationListGroupItem.js","sourceRoot":"","sources":["../src/NotificationListGroupItem.ts"],"names":[],"mappings":"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","sourcesContent":["import Priority from \"@ui5/webcomponents/dist/types/Priority.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.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport NotificationListItemBase from \"./NotificationListItemBase.js\";\nimport type { NotificationListItemBaseCloseEventDetail as NotificationListGroupItemCloseEventDetail } from \"./NotificationListItemBase.js\";\n\n// Icons\nimport \"@ui5/webcomponents-icons/dist/navigation-right-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/overflow.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\n\n// Texts\nimport {\n\tNOTIFICATION_LIST_GROUP_ITEM_TXT,\n\tNOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT,\n\tNOTIFICATION_LIST_ITEM_READ,\n\tNOTIFICATION_LIST_ITEM_UNREAD,\n\tNOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE,\n\tNOTIFICATION_LIST_GROUP_ITEM_CLOSE_BTN_TITLE,\n\tNOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_COLLAPSE_TITLE,\n\tNOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_EXPAND_TITLE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Templates\nimport NotificationListGroupItemTemplate from \"./generated/templates/NotificationListGroupItemTemplate.lit.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 * - `Priority` icon to display the priority of the group\n * - `TitleText` to entitle the group\n * - Custom actions - with the use of `ui5-notification-action`\n * - Items of the group\n *\n * ### Usage\n * The component can be used in a standard `ui5-list`.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/NotificationListGroupItem.js\";`\n *\n * `import \"@ui5/webcomponents/dist/NotificationAction.js\";` (optional)\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\tstyles: NotificationListGroupItemCss,\n\ttemplate: NotificationListGroupItemTemplate,\n\tdependencies: [\n\t\tList,\n\t\tButton,\n\t\tIcon,\n\t\tBusyIndicator,\n\t\tPopover,\n\t],\n})\n\n/**\n * Fired when the `ui5-li-notification-group` is expanded/collapsed by user interaction.\n * @public\n */\n@event(\"toggle\")\nclass NotificationListGroupItem extends NotificationListItemBase {\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!: boolean;\n\n\t/**\n\t * Defines if the items `counter` would be displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowCounter!: boolean;\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<NotificationListItemBase>\n\n\tonBeforeRendering() {\n\t\tif (this.busy) {\n\t\t\tthis.clearChildBusyIndicator();\n\t\t}\n\t}\n\n\t/**\n\t * Clears child items busy state to show a single busy 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.busy = false;\n\t\t});\n\t}\n\n\tget itemsCount() {\n\t\treturn this.items.length;\n\t}\n\n\tget overflowBtnAccessibleName() {\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);\n\t}\n\n\tget closeBtnAccessibleName() {\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_CLOSE_BTN_TITLE);\n\t}\n\n\tget toggleBtnAccessibleName() {\n\t\tif (this.collapsed) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_EXPAND_TITLE);\n\t\t}\n\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_COLLAPSE_TITLE);\n\t}\n\n\tget priorityText() {\n\t\tif (this.priority === Priority.High) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);\n\t\t}\n\n\t\tif (this.priority === Priority.Medium) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);\n\t\t}\n\n\t\tif (this.priority === Priority.Low) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);\n\t\t}\n\n\t\treturn \"\";\n\t}\n\n\tget accInvisibleText() {\n\t\treturn `${this.groupText} ${this.readText} ${this.priorityText} ${this.counterText}`;\n\t}\n\n\tget readText() {\n\t\tif (this.read) {\n\t\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ);\n\t\t}\n\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);\n\t}\n\n\tget groupText() {\n\t\treturn NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TXT);\n\t}\n\n\tget counterText() {\n\t\tconst text = NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT);\n\t\treturn this.showCounter ? `${text} ${this.itemsCount}` : \"\";\n\t}\n\n\tget ariaLabelledBy() {\n\t\tconst id = this._id;\n\t\tconst ids = [];\n\n\t\tif (this.hasTitleText) {\n\t\t\tids.push(`${id}-title-text`);\n\t\t}\n\n\t\tids.push(`${id}-invisibleText`);\n\t\treturn ids.join(\" \");\n\t}\n\n\tget _ariaExpanded() {\n\t\treturn !this.collapsed;\n\t}\n\n\tget groupCollapsedIcon() {\n\t\treturn this.collapsed ? \"navigation-right-arrow\" : \"navigation-down-arrow\";\n\t}\n\n\t/**\n\t * Event handlers\n\t *\n\t */\n\t_onBtnToggleClick() {\n\t\tthis.collapsed = !this.collapsed;\n\t\tthis.fireEvent<NotificationListGroupItemToggleEventDetail>(\"toggle\", { item: this });\n\t}\n}\n\nNotificationListGroupItem.define();\n\nexport default NotificationListGroupItem;\nexport type {\n\tNotificationListGroupItemToggleEventDetail,\n\tNotificationListGroupItemCloseEventDetail,\n};\n"]}

package/dist/NotificationListItem.d.ts

@@ -10,30 +10,27 @@ type NotificationListItemPressEventDetail = {
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-li-notification</code> is a type of list item, meant to display notifications.
- * <br>
+ * ### 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 <code>avatar</code>, <code>titleText</code>, descriptive <code>content</code>
- * and <code>footnotes</code> to fully describe a notification.
- * <br>
+ * The component has a rich set of various properties that allows the user to set `avatar`, `titleText`, descriptive `content`
+ * and `footnotes` to fully describe a notification.
  *
  * The user can:
- * <ul>
- * <li>display a <code>Close</code> button</li>
- * <li>can control whether the <code>titleText</code> and <code>description</code> should wrap or truncate
- * and display a <code>ShowMore</code> button to switch between less and more information</li>
- * <li>add custom actions by using the <code>ui5-notification-action</code> component</li>
- * </ul>
  *
- * <h3>Usage</h3>
- * The component can be used in a standard <code>ui5-list</code>.
+ * - 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 custom actions by using the `ui5-notification-action` component
  *
- * <h3>ES6 Module Import</h3>
+ * ### Usage
+ * The component can be used in a standard `ui5-list`.
  *
- * <code>import "@ui5/webcomponents/dist/NotificationListItem.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/NotificationListItem.js";`
+ *
+ * `import "@ui5/webcomponents/dist/NotificationAction.js";` (optional)
  * @constructor
  * @extends NotificationListItemBase
  * @since 1.0.0-rc.8
@@ -42,38 +39,35 @@ type NotificationListItemPressEventDetail = {
  */
 declare class NotificationListItem extends NotificationListItemBase {
     /**
-    * Defines if the <code>titleText</code> and <code>description</code> should wrap,
+    * Defines if the `titleText` and `description` should wrap,
     * they truncate by default.
     *
-    * <br><br>
-    * <b>Note:</b> by default the <code>titleText</code> and <code>description</code>,
-    * and a <code>ShowMore/Less</code> button would be displayed.
+    * **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 state of the <code>titleText</code> and <code>description</code>,
+    * Defines the state of the `titleText` and `description`,
     * if less or more information is displayed.
     * @private
     */
     _showMorePressed: boolean;
     /**
-    * Defines the visibility of the <code>showMore</code> button.
+    * Defines the visibility of the `showMore` button.
     * @private
     */
     _showMore: boolean;
     /**
-    * Defines the avatar, displayed in the <code>ui5-li-notification</code>.
+    * Defines the avatar, displayed in the `ui5-li-notification`.
     *
-    * <br><br>
-    * <b>Note:</b> Consider using the <code>ui5-avatar</code> to display icons, initials or images.
-    * <br>
-    * <b>Note:</b>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 <code>ui5-avatar</code>
-    * you can set its <code>size</code> property to <code>XS</code> to get the required size - <code>&lt;ui5-avatar size="XS">&lt;/ui5-avatar></code>.
+    * **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>;
@@ -83,12 +77,10 @@ declare class NotificationListItem extends NotificationListItemBase {
     */
     footnotes: Array<HTMLElement>;
     /**
-    * Defines the content of the <code>ui5-li-notification</code>,
+    * Defines the content of the `ui5-li-notification`,
     * usually a description of the notification.
     *
-    * <br><br>
-    * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
-    *
+    * **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>;

package/dist/NotificationListItem.js

@@ -32,30 +32,27 @@ import NotificationListItemCss from "./generated/themes/NotificationListItem.css
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
- * The <code>ui5-li-notification</code> is a type of list item, meant to display notifications.
- * <br>
+ * ### 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 <code>avatar</code>, <code>titleText</code>, descriptive <code>content</code>
- * and <code>footnotes</code> to fully describe a notification.
- * <br>
+ * The component has a rich set of various properties that allows the user to set `avatar`, `titleText`, descriptive `content`
+ * and `footnotes` to fully describe a notification.
  *
  * The user can:
- * <ul>
- * <li>display a <code>Close</code> button</li>
- * <li>can control whether the <code>titleText</code> and <code>description</code> should wrap or truncate
- * and display a <code>ShowMore</code> button to switch between less and more information</li>
- * <li>add custom actions by using the <code>ui5-notification-action</code> component</li>
- * </ul>
  *
- * <h3>Usage</h3>
- * The component can be used in a standard <code>ui5-list</code>.
+ * - 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 custom actions by using the `ui5-notification-action` component
  *
- * <h3>ES6 Module Import</h3>
+ * ### Usage
+ * The component can be used in a standard `ui5-list`.
  *
- * <code>import "@ui5/webcomponents/dist/NotificationListItem.js";</code>
- * <br>
- * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/NotificationListItem.js";`
+ *
+ * `import "@ui5/webcomponents/dist/NotificationAction.js";` (optional)
  * @constructor
  * @extends NotificationListItemBase
  * @since 1.0.0-rc.8

package/dist/NotificationListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationListItem.js","sourceRoot":"","sources":["../src/NotificationListItem.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAEnF,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAC5E,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,OAAO,MAAM,oCAAoC,CAAC;AACzD,OAAO,YAAY,MAAM,+CAA+C,CAAC;AACzE,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,QAAQ;AACR,OAAO,2CAA2C,CAAC;AACnD,OAAO,0CAA0C,CAAC;AAElD,QAAQ;AACR,OAAO,EACN,0BAA0B,EAC1B,2BAA2B,EAC3B,6BAA6B,EAC7B,gCAAgC,EAChC,gCAAgC,EAChC,wCAAwC,EACxC,0CAA0C,EAC1C,uCAAuC,EACvC,wCAAwC,EACxC,sCAAsC,GACtC,MAAM,mCAAmC,CAAC;AAE3C,YAAY;AACZ,OAAO,4BAA4B,MAAM,2DAA2D,CAAC;AAErG,SAAS;AACT,OAAO,uBAAuB,MAAM,gDAAgD,CAAC;AAUrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAgBH,IAAM,oBAAoB,4BAA1B,MAAM,oBAAqB,SAAQ,wBAAwB;IAoE1D;QACC,KAAK,EAAE,CAAC;QAER,gCAAgC;QAChC,IAAI,CAAC,wBAAwB,GAAG,CAAC,CAAC;QAElC,kCAAkC;QAClC,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;QAE7B,qBAAqB;QACrB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACnD,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,OAAO;QACV,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;IAClC,CAAC;IAED,IAAI,YAAY;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAChC,CAAC;IAED,IAAI,YAAY;QACf,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC1B,OAAO,sBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC;SACtF;QAED,OAAO,sBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC;IACvF,CAAC;IAED,IAAI,yBAAyB;QAC5B,OAAO,sBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,wCAAwC,CAAC,CAAC;IAC/F,CAAC;IAED,IAAI,sBAAsB;QACzB,OAAO,sBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,sCAAsC,CAAC,CAAC;IAC7F,CAAC;IAED,IAAI,YAAY;QACf,IAAI,IAAI,CAAC,YAAY,KAAK,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;YAC9D,OAAO,SAAS,CAAC;SACjB;QAED,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,sBAAsB,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAc,qBAAqB,CAAC,CAAC;IAC3E,CAAC;IAED,IAAI,eAAe;QAClB,OAAQ,IAAI,CAAC,YAA4B,CAAC,YAAY,CAAC;IACxD,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAQ,IAAI,CAAC,cAA8B,CAAC,YAAY,CAAC;IAC1D,CAAC;IAED,IAAI,kBAAkB;QACrB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;QAEpC,IAAI,CAAC,SAAS,EAAE;YACf,OAAO,KAAK,CAAC;SACb;QAED,OAAO,SAAS,CAAC,YAAY,GAAG,SAAS,CAAC,YAAY,CAAC;IACxD,CAAC;IAED,IAAI,oBAAoB;QACvB,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC;QAExC,IAAI,CAAC,WAAW,EAAE;YACjB,OAAO,KAAK,CAAC;SACb;QAED,OAAO,WAAW,CAAC,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC;IAC5D,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE;YAC1C,OAAO;gBACN,QAAQ,EAAG,EAAe,CAAC,eAAe;gBAC1C,WAAW,EAAE,GAAG,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;aACnC,CAAC;QACH,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,IAAI,cAAc;QACjB,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC;QACpB,MAAM,GAAG,GAAG,EAAE,CAAC;QAEf,IAAI,IAAI,CAAC,YAAY,EAAE;YACtB,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC;SAC7B;QACD,IAAI,IAAI,CAAC,OAAO,EAAE;YACjB,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC;SAC9B;QAED,IAAI,IAAI,CAAC,YAAY,EAAE;YACtB,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;SACzB;QAED,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,gBAAgB,CAAC,CAAC;QAEhC,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtB,CAAC;IAED,IAAI,YAAY;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,IAAI,EAAE;YACpC,OAAO,sBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,wCAAwC,CAAC,CAAC;SAC9F;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,MAAM,EAAE;YACtC,OAAO,sBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,0CAA0C,CAAC,CAAC;SAChG;QAED,IAAI,IAAI,CAAC,QAAQ,KAAK,QAAQ,CAAC,GAAG,EAAE;YACnC,OAAO,sBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,uCAAuC,CAAC,CAAC;SAC7F;QAED,OAAO,EAAE,CAAC;IACX,CAAC;IAED,IAAI,gBAAgB;QACnB,MAAM,gBAAgB,GAAG,sBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;QAClG,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC,CAAC,CAAC,sBAAoB,CAAC,eAAe,CAAC,OAAO,CAAC,6BAA6B,CAAC,CAAC;QACrL,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QAEvC,OAAO,GAAG,gBAAgB,IAAI,QAAQ,IAAI,YAAY,EAAE,CAAC;IAC1D,CAAC;IAED;;OAEG;IACH,QAAQ,CAAC,CAAa;QACrB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACvB,CAAC;IAED,gBAAgB,CAAC,CAAa;QAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,gBAAgB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC;IAChD,CAAC;IAED,UAAU,CAAC,CAAgB;QAC1B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAEpB,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YACf,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;SACtB;IACF,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QAElB,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QAEzB,IAAI,KAAK,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,MAAM,EAAE;YACxC,IAAI,CAAC,gBAAgB,CAAC,CAA0B,CAAC,CAAC;YAClD,OAAO;SACP;QAED,IAAI,KAAK,EAAE;YACV,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;SACtB;IACF,CAAC;IAED;;OAEG;IACH,aAAa,CAAC,CAAQ;QACrB,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,MAAM,EAAE;YAC/D,OAAO;SACP;QAED,IAAI,CAAC,SAAS,CAAuC,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAChF,CAAC;IAED,QAAQ;QACP,IAAI,IAAI,CAAC,YAAY,KAAK,YAAY,CAAC,MAAM,EAAE;YAC9C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,OAAO;SACP;QAED,MAAM,sBAAsB,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,wBAAwB,CAAC;QACpF,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,CAAC;QAC5F,MAAM,SAAS,GAAG,sBAAsB,IAAI,iBAAiB,CAAC;QAE9D,IAAI,IAAI,CAAC,gBAAgB,IAAI,SAAS,EAAE;YACvC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,OAAO;SACP;QAED,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,oBAAoB,EAAE;YACzD,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,eAAe,CAAC;YACrD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;YACrE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,OAAO;SACP;QAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACxB,CAAC;CACD,CAAA;AA3QA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,IAAI,EAAE,CAAC;0DACjC;AAQjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8DACD;AAO3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACR;AAepB;IADC,IAAI,EAAE;oDACqB;AAO5B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;uDACpB;AAY/B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yDACZ;AA9DrB,oBAAoB;IAfzB,aAAa,CAAC;QACd,GAAG,EAAE,qBAAqB;QAC1B,aAAa,EAAE,IAAI;QACnB,MAAM,EAAE,uBAAuB;QAC/B,QAAQ,EAAE,4BAA4B;QACtC,YAAY,EAAE;YACb,MAAM;YACN,IAAI;YACJ,aAAa;YACb,IAAI;YACJ,OAAO;SACP;KACD,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC;GACV,oBAAoB,CAwRzB;AAED,oBAAoB,CAAC,MAAM,EAAE,CAAC;AAE9B,eAAe,oBAAoB,CAAC","sourcesContent":["import { isSpace, isEnter } 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.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { getEventMark } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport Priority from \"@ui5/webcomponents/dist/types/Priority.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Link from \"@ui5/webcomponents/dist/Link.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport WrappingType from \"@ui5/webcomponents/dist/types/WrappingType.js\";\nimport NotificationListItemBase from \"./NotificationListItemBase.js\";\n\n// Icons\nimport \"@ui5/webcomponents-icons/dist/overflow.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\n\n// Texts\nimport {\n\tNOTIFICATION_LIST_ITEM_TXT,\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_HIGH_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE,\n\tNOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Templates\nimport NotificationListItemTemplate from \"./generated/templates/NotificationListItemTemplate.lit.js\";\n\n// Styles\nimport NotificationListItemCss from \"./generated/themes/NotificationListItem.css.js\";\n\nimport type { NotificationListItemBaseCloseEventDetail as NotificationListItemCloseEventDetail } from \"./NotificationListItemBase.js\";\n\ntype NotificationListItemPressEventDetail = {\n\titem: NotificationListItem,\n};\n\ntype Footnote = Record<string, any>;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The <code>ui5-li-notification</code> is a type of list item, meant to display notifications.\n * <br>\n *\n * The component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>titleText</code>, descriptive <code>content</code>\n * and <code>footnotes</code> to fully describe a notification.\n * <br>\n *\n * The user can:\n * <ul>\n * <li>display a <code>Close</code> button</li>\n * <li>can control whether the <code>titleText</code> and <code>description</code> should wrap or truncate\n * and display a <code>ShowMore</code> button to switch between less and more information</li>\n * <li>add custom actions by using the <code>ui5-notification-action</code> component</li>\n * </ul>\n *\n * <h3>Usage</h3>\n * The component can be used in a standard <code>ui5-list</code>.\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/NotificationListItem.js\";</code>\n * <br>\n * <code>import \"@ui5/webcomponents/dist/NotificationAction.js\";</code> (optional)\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: NotificationListItemCss,\n\ttemplate: NotificationListItemTemplate,\n\tdependencies: [\n\t\tButton,\n\t\tIcon,\n\t\tBusyIndicator,\n\t\tLink,\n\t\tPopover,\n\t],\n})\n\n@event(\"_press\")\nclass NotificationListItem extends NotificationListItemBase {\n\t/**\n\t* Defines if the <code>titleText</code> and <code>description</code> should wrap,\n\t* they truncate by default.\n\t*\n\t* <br><br>\n\t* <b>Note:</b> by default the <code>titleText</code> and <code>description</code>,\n\t* and a <code>ShowMore/Less</code> button would be displayed.\n\t* @default \"None\"\n\t* @public\n\t* @since 1.0.0-rc.15\n\t*/\n\t@property({ type: WrappingType, defaultValue: WrappingType.None })\n\twrappingType!: `${WrappingType}`;\n\n\t/**\n\t* Defines the state of the <code>titleText</code> and <code>description</code>,\n\t* if less or more information is displayed.\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\t_showMorePressed!: boolean;\n\n\t/**\n\t* Defines the visibility of the <code>showMore</code> button.\n\t* @private\n\t*/\n\t@property({ type: Boolean })\n\t_showMore!: boolean;\n\n\t/**\n\t* Defines the avatar, displayed in the <code>ui5-li-notification</code>.\n\t*\n\t* <br><br>\n\t* <b>Note:</b> Consider using the <code>ui5-avatar</code> to display icons, initials or images.\n\t* <br>\n\t* <b>Note:</b>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 <code>ui5-avatar</code>\n\t* you can set its <code>size</code> property to <code>XS</code> to get the required size - <code>&lt;ui5-avatar size=\"XS\">&lt;/ui5-avatar></code>.\n\t*\n\t* @public\n\t*/\n\t@slot()\n\tavatar!: Array<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!: Array<HTMLElement>;\n\n\t/**\n\t* Defines the content of the <code>ui5-li-notification</code>,\n\t* usually a description of the notification.\n\t*\n\t* <br><br>\n\t* <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\t*\n\t* @public\n\t*/\n\t@slot({ type: Node, \"default\": true })\n\tdescription!: Array<Node>;\n\n\t_titleTextOverflowHeight: number;\n\t_descOverflowHeight: number;\n\t_onResizeBound: ResizeObserverCallback;\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\tResizeHandler.register(this, this._onResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._onResizeBound);\n\t}\n\n\tget hasDesc() {\n\t\treturn !!this.description.length;\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 overflowBtnAccessibleName() {\n\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);\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 descriptionDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-nli-description\");\n\t}\n\n\tget titleTextDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-nli-title-text\");\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\t\tconst ids = [];\n\n\t\tif (this.hasTitleText) {\n\t\t\tids.push(`${id}-title-text`);\n\t\t}\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}-footer`);\n\t\t}\n\n\t\tids.push(`${id}-invisibleText`);\n\n\t\treturn ids.join(\" \");\n\t}\n\n\tget priorityText() {\n\t\tif (this.priority === Priority.High) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);\n\t\t}\n\n\t\tif (this.priority === Priority.Medium) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);\n\t\t}\n\n\t\tif (this.priority === Priority.Low) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);\n\t\t}\n\n\t\treturn \"\";\n\t}\n\n\tget accInvisibleText() {\n\t\tconst notificationText = NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_TXT);\n\t\tconst readText = this.read ? NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);\n\t\tconst priorityText = this.priorityText;\n\n\t\treturn `${notificationText} ${readText} ${priorityText}`;\n\t}\n\n\t/**\n\t * Event handlers\n\t */\n\t_onclick(e: MouseEvent) {\n\t\tthis.fireItemPress(e);\n\t}\n\n\t_onShowMoreClick(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tthis._showMorePressed = !this._showMorePressed;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireItemPress(e);\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 && getEventMark(e) === \"link\") {\n\t\t\tthis._onShowMoreClick(e as unknown as MouseEvent);\n\t\t\treturn;\n\t\t}\n\n\t\tif (space) {\n\t\t\tthis.fireItemPress(e);\n\t\t}\n\t}\n\n\t/**\n\t * Private\n\t */\n\tfireItemPress(e: Event) {\n\t\tif (getEventMark(e) === \"button\" || getEventMark(e) === \"link\") {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireEvent<NotificationListItemPressEventDetail>(\"_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"]}
+{"version":3,"file":"NotificationListItem.js","sourceRoot":"","sources":["../src/NotificationListItem.ts"],"names":[],"mappings":"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","sourcesContent":["import { isSpace, isEnter } 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.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { getEventMark } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport Priority from \"@ui5/webcomponents/dist/types/Priority.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Link from \"@ui5/webcomponents/dist/Link.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport WrappingType from \"@ui5/webcomponents/dist/types/WrappingType.js\";\nimport NotificationListItemBase from \"./NotificationListItemBase.js\";\n\n// Icons\nimport \"@ui5/webcomponents-icons/dist/overflow.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\n\n// Texts\nimport {\n\tNOTIFICATION_LIST_ITEM_TXT,\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_HIGH_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT,\n\tNOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE,\n\tNOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Templates\nimport NotificationListItemTemplate from \"./generated/templates/NotificationListItemTemplate.lit.js\";\n\n// Styles\nimport NotificationListItemCss from \"./generated/themes/NotificationListItem.css.js\";\n\nimport type { NotificationListItemBaseCloseEventDetail as NotificationListItemCloseEventDetail } from \"./NotificationListItemBase.js\";\n\ntype NotificationListItemPressEventDetail = {\n\titem: NotificationListItem,\n};\n\ntype Footnote = Record<string, any>;\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`, `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 custom actions by using the `ui5-notification-action` component\n *\n * ### Usage\n * The component can be used in a standard `ui5-list`.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/NotificationListItem.js\";`\n *\n * `import \"@ui5/webcomponents/dist/NotificationAction.js\";` (optional)\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: NotificationListItemCss,\n\ttemplate: NotificationListItemTemplate,\n\tdependencies: [\n\t\tButton,\n\t\tIcon,\n\t\tBusyIndicator,\n\t\tLink,\n\t\tPopover,\n\t],\n})\n\n@event(\"_press\")\nclass NotificationListItem extends NotificationListItemBase {\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({ type: WrappingType, defaultValue: WrappingType.None })\n\twrappingType!: `${WrappingType}`;\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!: boolean;\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!: boolean;\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!: Array<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!: Array<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!: Array<Node>;\n\n\t_titleTextOverflowHeight: number;\n\t_descOverflowHeight: number;\n\t_onResizeBound: ResizeObserverCallback;\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\tResizeHandler.register(this, this._onResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._onResizeBound);\n\t}\n\n\tget hasDesc() {\n\t\treturn !!this.description.length;\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 overflowBtnAccessibleName() {\n\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);\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 descriptionDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-nli-description\");\n\t}\n\n\tget titleTextDOM() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-nli-title-text\");\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\t\tconst ids = [];\n\n\t\tif (this.hasTitleText) {\n\t\t\tids.push(`${id}-title-text`);\n\t\t}\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}-footer`);\n\t\t}\n\n\t\tids.push(`${id}-invisibleText`);\n\n\t\treturn ids.join(\" \");\n\t}\n\n\tget priorityText() {\n\t\tif (this.priority === Priority.High) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);\n\t\t}\n\n\t\tif (this.priority === Priority.Medium) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);\n\t\t}\n\n\t\tif (this.priority === Priority.Low) {\n\t\t\treturn NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);\n\t\t}\n\n\t\treturn \"\";\n\t}\n\n\tget accInvisibleText() {\n\t\tconst notificationText = NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_TXT);\n\t\tconst readText = this.read ? NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);\n\t\tconst priorityText = this.priorityText;\n\n\t\treturn `${notificationText} ${readText} ${priorityText}`;\n\t}\n\n\t/**\n\t * Event handlers\n\t */\n\t_onclick(e: MouseEvent) {\n\t\tthis.fireItemPress(e);\n\t}\n\n\t_onShowMoreClick(e: MouseEvent) {\n\t\te.preventDefault();\n\t\tthis._showMorePressed = !this._showMorePressed;\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.fireItemPress(e);\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 && getEventMark(e) === \"link\") {\n\t\t\tthis._onShowMoreClick(e as unknown as MouseEvent);\n\t\t\treturn;\n\t\t}\n\n\t\tif (space) {\n\t\t\tthis.fireItemPress(e);\n\t\t}\n\t}\n\n\t/**\n\t * Private\n\t */\n\tfireItemPress(e: Event) {\n\t\tif (getEventMark(e) === \"button\" || getEventMark(e) === \"link\") {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.fireEvent<NotificationListItemPressEventDetail>(\"_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"]}