@ui5/webcomponents-fiori 2.22.0 → 2.22.1-rc.0

package/dist/DynamicPage.d.ts

@@ -125,7 +125,7 @@ declare class DynamicPage extends UI5Element {
     constructor();
     onBeforeRendering(): void;
     get endAreaHeight(): number;
-    get topAreaHeight(): number;
+    get scrollPaddingTop(): number;
     get dynamicPageTitle(): DynamicPageTitle | null;
     get dynamicPageHeader(): DynamicPageHeader | null;
     get footerWrapper(): Element | null | undefined;

package/dist/DynamicPage.js

@@ -132,10 +132,15 @@ let DynamicPage = DynamicPage_1 = class DynamicPage extends UI5Element {
     get endAreaHeight() {
         return this.showFooter ? this.footerWrapper?.getBoundingClientRect().height || 0 : 0;
     }
-    get topAreaHeight() {
+    get scrollPaddingTop() {
         const titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;
         const headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;
-        return this._headerSnapped ? titleHeight : headerHeight + titleHeight;
+        if (this._headerSnapped) {
+            return titleHeight;
+        }
+        const fullHeight = headerHeight + titleHeight;
+        const scrollTop = this.scrollContainer?.scrollTop || 0;
+        return Math.max(titleHeight, fullHeight - scrollTop);
     }
     get dynamicPageTitle() {
         return this.querySelector("[ui5-dynamic-page-title]");
@@ -324,7 +329,7 @@ let DynamicPage = DynamicPage_1 = class DynamicPage extends UI5Element {
     }
     onContentFocusIn(e) {
         const target = e.target;
-        this.setScrollPadding({ start: this.topAreaHeight, end: this.endAreaHeight });
+        this.setScrollPadding({ start: this.scrollPaddingTop, end: this.endAreaHeight });
         // textareas and similar elements appear "in view" even when partially
         // hidden behind sticky header/footer.
         // manual scroll brings them fully into view.

package/dist/DynamicPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPage.js","sourceRoot":"","sources":["../src/DynamicPage.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./DynamicPageTemplate.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport type DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\nconst SCROLL_DEBOUNCE_RATE = 5; // ms\nconst SCROLL_THRESHOLD = 10; // px\n/**\n * @class\n *\n * ### Overview\n *\n * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n *\n * The component consist of several components:\n *\n * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n * - `Content area` - a generic container, which can have a single UI5 layout.\n * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n *\n * ### Usage\n *\n * Use the `DynamicPage` if you need to have a title, that is always visible\n * and a header, that has configurable Expanding/Snapping functionality.\n * If you don't need the Expanding/Snapping functionality it is better to use the\n * `ui5-page` as a lighter component.\n *\n * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\n * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\n * scroll through the content.\n *\n * ## Notes:\n *\n * - Snapping of the `DynamicPageTitle` is not supported in the following case:\n *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n *\n * ### Responsive Behavior\n *\n * Dynamic page web component implements the responsive paddings design.\n *\n * ### Keyboard Handling\n *\n *\n * ### Basic Navigation\n *\n * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\n * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\n * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n *\n * ### Fast Navigation\n * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n *\n * - `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @csspart content - Used to style the content of the component\n * @csspart fit-content - Used to style the fit content container of the component.\n * @csspart footer - Used to style the footer of the component\n */\n@customElement({\n\ttag: \"ui5-dynamic-page\",\n\trenderer: jsxRenderer,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\", {\n\tbubbles: true,\n})\n\nclass DynamicPage extends UI5Element {\n\teventDetails!: {\n\t\t\"pin-button-toggle\": void;\n\t\t\"title-toggle\": void;\n\t}\n\t/**\n\t * Defines if the pin button is hidden.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thidePinButton = false;\n\n\t/**\n\t * Defines if the header is pinned.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\theaderPinned = false;\n\n\t/**\n\t * Defines if the footer is shown.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFooter = false;\n\n\t/**\n\t * Defines the content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t * Defines the title HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageTitle })\n\ttitleArea!: Slot<DynamicPageTitle>;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageHeader })\n\theaderArea!: Slot<DynamicPageHeader>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tfooterArea!: Slot<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\tisToggled = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped = false;\n\n\t@query(\".ui5-dynamic-page-scroll-container\")\n\tscrollContainer?: HTMLElement;\n\n\t@query(\"[ui5-dynamic-page-header-actions]\")\n\theaderActions?: DynamicPageHeaderActions;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.dynamicPageTitle) {\n\t\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t\t\tthis.dynamicPageTitle.interactive = this.hasHeading;\n\t\t\tthis.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;\n\t\t\tthis.dynamicPageTitle.removeAttribute(\"hovered\");\n\t\t}\n\t\tif (this.dynamicPageHeader) {\n\t\t\tthis.dynamicPageHeader._snapped = this._headerSnapped;\n\t\t}\n\t}\n\n\tget endAreaHeight() {\n\t\treturn this.showFooter ? this.footerWrapper?.getBoundingClientRect().height || 0 : 0;\n\t}\n\n\tget topAreaHeight() {\n\t\tconst titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\treturn this._headerSnapped ? titleHeight : headerHeight + titleHeight;\n\t}\n\n\tget dynamicPageTitle(): DynamicPageTitle | null {\n\t\treturn this.querySelector<DynamicPageTitle>(\"[ui5-dynamic-page-title]\");\n\t}\n\n\tget dynamicPageHeader(): DynamicPageHeader | null {\n\t\treturn this.querySelector<DynamicPageHeader>(\"[ui5-dynamic-page-header]\");\n\t}\n\n\tget footerWrapper() {\n\t\treturn this.shadowRoot?.querySelector(\".ui5-dynamic-page-footer\");\n\t}\n\n\tget actionsInTitle(): boolean {\n\t\treturn this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;\n\t}\n\n\tget headerInTitle(): boolean {\n\t\treturn !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);\n\t}\n\n\tget headerInContent(): boolean {\n\t\treturn !this.showHeaderInStickArea && !this.headerInTitle && !this.hasSnappedTitleOnMobile;\n\t}\n\n\tget _headerLabel() {\n\t\treturn this._headerSnapped\n\t\t\t? DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)\n\t\t\t: DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this._headerSnapped;\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;\n\t}\n\n\tget headerAriaHidden() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea);\n\t}\n\n\tget hasHeading() {\n\t\treturn this.headerArea.length > 0;\n\t}\n\n\tget headerSnapped(): boolean {\n\t\treturn this._headerSnapped;\n\t}\n\n\tget hasSnappedTitleOnMobile() {\n\t\treturn isPhone() && this.headerSnapped && this.dynamicPageTitle?.snappedTitleOnMobile.length;\n\t}\n\n\tget headerAriaLabel() {\n\t\treturn this.hasHeading ? this._headerLabel : undefined;\n\t}\n\n\tget _hidePinButton() {\n\t\treturn this.hidePinButton || isPhone();\n\t}\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset headerSnapped(snapped: boolean) {\n\t\tif (snapped === this._headerSnapped) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.scrollContainer) {\n\t\t\tthis._headerSnapped = snapped;\n\t\t\tthis.showHeaderInStickArea = snapped;\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleHeader();\n\t}\n\n\tsnapOnScroll() {\n\t\tdebounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);\n\t}\n\n\tsnapTitleByScroll() {\n\t\tif (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned || !this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.isToggled) {\n\t\t\tthis.isToggled = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer.scrollTop;\n\t\tconst headerHeight = this.dynamicPageHeader.getBoundingClientRect().height;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this._headerSnapped && scrollTop > headerHeight) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\n\t\tconst shouldSnap = !this._headerSnapped && scrollTop > headerHeight + SCROLL_THRESHOLD;\n\t\tconst shouldExpand = this._headerSnapped && (scrollTop < headerHeight - SCROLL_THRESHOLD\n\t\t\t|| (!scrollTop && !headerHeight));\n\n\t\tif (shouldSnap) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\n\t\t\t//* snappedTitleOnMobile\n\t\t\t// If the header is snapped and the scroll is at the top, scroll down a bit\n\t\t\t// to avoid ending in an endless loop of snapping and unsnapping\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\t\t\tthis.scrollContainer.scrollTop = SCROLL_THRESHOLD;\n\t\t\t\t}\n\t\t\t});\n\t\t} else if (shouldExpand) {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\t// Fire event if snapped state changed\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\t}\n\t}\n\n\tasync onExpandClick() {\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\n\t\tif (this.hasSnappedTitleOnMobile) {\n\t\t\tthis.dynamicPageTitle?.focus();\n\t\t}\n\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tif (this.headerPinned) {\n\t\t\tthis.showHeaderInStickArea = true;\n\t\t} else if (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusPinButton();\n\t}\n\n\tasync onToggleTitle() {\n\t\tif (!this.hasHeading) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tif (!this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst currentScrollTop = this.scrollContainer.scrollTop;\n\n\t\tif (!this._headerSnapped && this.headerPinned) {\n\t\t\tthis.headerPinned = false;\n\t\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\t}\n\n\t\tif (currentScrollTop <= SCROLL_THRESHOLD) {\n\t\t\tthis._headerSnapped = !this._headerSnapped;\n\t\t\tthis.showHeaderInStickArea = this._headerSnapped;\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {\n\t\t\tif (!this._headerSnapped) {\n\t\t\t\tthis._headerSnapped = true;\n\t\t\t\tthis.showHeaderInStickArea = true;\n\t\t\t\tthis.scrollContainer.scrollTop = 0;\n\t\t\t} else {\n\t\t\t\tthis.showHeaderInStickArea = false;\n\t\t\t\tthis._headerSnapped = false;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.scrollContainer.scrollTop === SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer.scrollTop = 0;\n\t\t}\n\n\t\tthis.showHeaderInStickArea = !this.showHeaderInStickArea;\n\t\tthis._headerSnapped = !this._headerSnapped;\n\n\t\tthis.skipSnapOnScroll = true;\n\n\t\tawait renderFinished();\n\t\tif (this._headerSnapped && this.scrollContainer.scrollTop < SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer.scrollTop = SCROLL_THRESHOLD;\n\t\t}\n\t}\n\n\tonExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t}\n\n\tonContentFocusIn(e: FocusEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\tthis.setScrollPadding({ start: this.topAreaHeight, end: this.endAreaHeight });\n\t\t// textareas and similar elements appear \"in view\" even when partially\n\t\t// hidden behind sticky header/footer.\n\t\t// manual scroll brings them fully into view.\n\t\t// another issue is that browsers do not reflect dynamic changes of scroll-padding\n\t\trequestAnimationFrame(() => {\n\t\t\ttarget.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n\t\t});\n\t}\n\n\tonContentFocusOut() {\n\t\t// Reset scroll padding when focus leaves content (e.g., moves to sticky header).\n\t\t// The sticky header is part of the scrollable area, so keeping padding causes unwanted scroll.\n\t\tthis.setScrollPadding({ start: 0, end: 0 });\n\t}\n\n\tsetScrollPadding(padding: { start: number, end: number }) {\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-top\", `${padding.start}px`);\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-bottom\", `${padding.end}px`);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}
+{"version":3,"file":"DynamicPage.js","sourceRoot":"","sources":["../src/DynamicPage.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport announce from \"@ui5/webcomponents-base/dist/util/InvisibleMessage.js\";\nimport InvisibleMessageMode from \"@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport debounce from \"@ui5/webcomponents-base/dist/util/debounce.js\";\n\n// Template\nimport DynamicPageTemplate from \"./DynamicPageTemplate.js\";\n\n// Styles\nimport DynamicPageCss from \"./generated/themes/DynamicPage.css.js\";\n\nimport DynamicPageHeader from \"./DynamicPageHeader.js\";\nimport DynamicPageTitle from \"./DynamicPageTitle.js\";\nimport type DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\n// Texts\nimport {\n\tDYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER,\n\tDYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\n\nconst SCROLL_DEBOUNCE_RATE = 5; // ms\nconst SCROLL_THRESHOLD = 10; // px\n/**\n * @class\n *\n * ### Overview\n *\n * A layout component, representing a web page, consisting of a title, header with dynamic behavior, a content area, and an optional floating footer.\n *\n * The component consist of several components:\n *\n * - `DynamicPageTitle` - a component, holding the title of the page, the navigation actions and the content. The displayed content changes based on the current mode of the `DynamicPageHeader`.\n * - `DynamicPageHeader` - a generic container, which can contain a single layout component and any other HTML elements. The header works in two modes - expanded and snapped and its behavior can be adjusted with the help of different properties.\n * - `Content area` - a generic container, which can have a single UI5 layout.\n * - `Footer` - positioned at the bottom with a small offset and used for additional actions, the footer floats above the content.\n *\n * ### Usage\n *\n * Use the `DynamicPage` if you need to have a title, that is always visible\n * and a header, that has configurable Expanding/Snapping functionality.\n * If you don't need the Expanding/Snapping functionality it is better to use the\n * `ui5-page` as a lighter component.\n *\n * The app can add to the `default` slot of the ui5-dynamic-page either content that is designed to fit its container (e.g. has 100% height),\n * or content with own height that may overflow its container. In the second case the `DynamicPage` will show a scrollbar that allows the user\n * scroll through the content.\n *\n * ## Notes:\n *\n * - Snapping of the `DynamicPageTitle` is not supported in the following case:\n *  - When the `DynamicPage` has a scroll bar, the component usually scrolls to the snapping point - the point, where the `DynamicPageHeader` is scrolled out completely. However, when there is a scroll bar, but not enough content to reach the snapping point, the snapping is not possible using scrolling.\n *\n * ### Responsive Behavior\n *\n * Dynamic page web component implements the responsive paddings design.\n *\n * ### Keyboard Handling\n *\n *\n * ### Basic Navigation\n *\n * - [SPACE, ENTER, RETURN] - If focus is on a button inside DynamicPageTitle its action is being triggered, once activated.\n * If focus is on the snap header button (arrow button), or on the header itself, once activated, it triggers the associated action (such as snap/expand the header).\n * If focus is on pin button (the button with pin icon on the bottom of the header), once activated, it triggers the associated action (pinning of the header).\n *\n * ### Fast Navigation\n * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down /  Ctrl + Alt(Option) + Up`.\n * In order to use this functionality, you need to import the following module:\n *\n * - `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicPage.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0.0\n * @public\n * @csspart content - Used to style the content of the component\n * @csspart fit-content - Used to style the fit content container of the component.\n * @csspart footer - Used to style the footer of the component\n */\n@customElement({\n\ttag: \"ui5-dynamic-page\",\n\trenderer: jsxRenderer,\n\tstyles: DynamicPageCss,\n\ttemplate: DynamicPageTemplate,\n})\n\n/**\n * Fired when the pin header button is toggled.\n *\n * @public\n */\n@event(\"pin-button-toggle\", {\n\tbubbles: true,\n})\n\n/**\n * Fired when the expand/collapse area of the title is toggled.\n *\n * @public\n */\n@event(\"title-toggle\", {\n\tbubbles: true,\n})\n\nclass DynamicPage extends UI5Element {\n\teventDetails!: {\n\t\t\"pin-button-toggle\": void;\n\t\t\"title-toggle\": void;\n\t}\n\t/**\n\t * Defines if the pin button is hidden.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thidePinButton = false;\n\n\t/**\n\t * Defines if the header is pinned.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\theaderPinned = false;\n\n\t/**\n\t * Defines if the footer is shown.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowFooter = false;\n\n\t/**\n\t * Defines the content of the Dynamic Page.\n\t *\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement })\n\tcontent!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t * Defines the title HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageTitle })\n\ttitleArea!: Slot<DynamicPageTitle>;\n\n\t/**\n\t * Defines the header HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: DynamicPageHeader })\n\theaderArea!: Slot<DynamicPageHeader>;\n\n\t/**\n\t * Defines the footer HTML Element.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\tfooterArea!: Slot<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tskipSnapOnScroll = false;\n\tshowHeaderInStickArea = false;\n\tisToggled = false;\n\n\t@property({ type: Boolean })\n\t_headerSnapped = false;\n\n\t@query(\".ui5-dynamic-page-scroll-container\")\n\tscrollContainer?: HTMLElement;\n\n\t@query(\"[ui5-dynamic-page-header-actions]\")\n\theaderActions?: DynamicPageHeaderActions;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this.dynamicPageTitle) {\n\t\t\tthis.dynamicPageTitle.snapped = this._headerSnapped;\n\t\t\tthis.dynamicPageTitle.interactive = this.hasHeading;\n\t\t\tthis.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;\n\t\t\tthis.dynamicPageTitle.removeAttribute(\"hovered\");\n\t\t}\n\t\tif (this.dynamicPageHeader) {\n\t\t\tthis.dynamicPageHeader._snapped = this._headerSnapped;\n\t\t}\n\t}\n\n\tget endAreaHeight() {\n\t\treturn this.showFooter ? this.footerWrapper?.getBoundingClientRect().height || 0 : 0;\n\t}\n\n\tget scrollPaddingTop() {\n\t\tconst titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\n\t\tif (this._headerSnapped) {\n\t\t\treturn titleHeight;\n\t\t}\n\n\t\tconst fullHeight = headerHeight + titleHeight;\n\t\tconst scrollTop = this.scrollContainer?.scrollTop || 0;\n\n\t\treturn Math.max(titleHeight, fullHeight - scrollTop);\n\t}\n\n\tget dynamicPageTitle(): DynamicPageTitle | null {\n\t\treturn this.querySelector<DynamicPageTitle>(\"[ui5-dynamic-page-title]\");\n\t}\n\n\tget dynamicPageHeader(): DynamicPageHeader | null {\n\t\treturn this.querySelector<DynamicPageHeader>(\"[ui5-dynamic-page-header]\");\n\t}\n\n\tget footerWrapper() {\n\t\treturn this.shadowRoot?.querySelector(\".ui5-dynamic-page-footer\");\n\t}\n\n\tget actionsInTitle(): boolean {\n\t\treturn this._headerSnapped || this.showHeaderInStickArea || this.headerPinned;\n\t}\n\n\tget headerInTitle(): boolean {\n\t\treturn !this._headerSnapped && (this.showHeaderInStickArea || this.headerPinned);\n\t}\n\n\tget headerInContent(): boolean {\n\t\treturn !this.showHeaderInStickArea && !this.headerInTitle && !this.hasSnappedTitleOnMobile;\n\t}\n\n\tget _headerLabel() {\n\t\treturn this._headerSnapped\n\t\t\t? DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_SNAPPED_HEADER)\n\t\t\t: DynamicPage.i18nBundle.getText(DYNAMIC_PAGE_ARIA_LABEL_EXPANDED_HEADER);\n\t}\n\n\tget _headerExpanded() {\n\t\treturn !this._headerSnapped;\n\t}\n\n\tget headerTabIndex() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea) ? -1 : 0;\n\t}\n\n\tget headerAriaHidden() {\n\t\treturn (this._headerSnapped || this.showHeaderInStickArea);\n\t}\n\n\tget hasHeading() {\n\t\treturn this.headerArea.length > 0;\n\t}\n\n\tget headerSnapped(): boolean {\n\t\treturn this._headerSnapped;\n\t}\n\n\tget hasSnappedTitleOnMobile() {\n\t\treturn isPhone() && this.headerSnapped && this.dynamicPageTitle?.snappedTitleOnMobile.length;\n\t}\n\n\tget headerAriaLabel() {\n\t\treturn this.hasHeading ? this._headerLabel : undefined;\n\t}\n\n\tget _hidePinButton() {\n\t\treturn this.hidePinButton || isPhone();\n\t}\n\n\t/**\n\t * Defines if the header is snapped.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tset headerSnapped(snapped: boolean) {\n\t\tif (snapped === this._headerSnapped) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this.scrollContainer) {\n\t\t\tthis._headerSnapped = snapped;\n\t\t\tthis.showHeaderInStickArea = snapped;\n\t\t\treturn;\n\t\t}\n\n\t\tthis._toggleHeader();\n\t}\n\n\tsnapOnScroll() {\n\t\tdebounce(() => this.snapTitleByScroll(), SCROLL_DEBOUNCE_RATE);\n\t}\n\n\tsnapTitleByScroll() {\n\t\tif (!this.dynamicPageTitle || !this.dynamicPageHeader || this.headerPinned || !this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.isToggled) {\n\t\t\tthis.isToggled = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.skipSnapOnScroll) {\n\t\t\tthis.skipSnapOnScroll = false;\n\t\t\treturn;\n\t\t}\n\n\t\tconst scrollTop = this.scrollContainer.scrollTop;\n\t\tconst headerHeight = this.dynamicPageHeader.getBoundingClientRect().height;\n\t\tconst lastHeaderSnapped = this._headerSnapped;\n\n\t\tif (this._headerSnapped && scrollTop > headerHeight) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\n\t\tconst shouldSnap = !this._headerSnapped && scrollTop > headerHeight + SCROLL_THRESHOLD;\n\t\tconst shouldExpand = this._headerSnapped && (scrollTop < headerHeight - SCROLL_THRESHOLD\n\t\t\t|| (!scrollTop && !headerHeight));\n\n\t\tif (shouldSnap) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t\tthis._headerSnapped = true;\n\n\t\t\t//* snappedTitleOnMobile\n\t\t\t// If the header is snapped and the scroll is at the top, scroll down a bit\n\t\t\t// to avoid ending in an endless loop of snapping and unsnapping\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\t\t\tthis.scrollContainer.scrollTop = SCROLL_THRESHOLD;\n\t\t\t\t}\n\t\t\t});\n\t\t} else if (shouldExpand) {\n\t\t\tthis._headerSnapped = false;\n\t\t}\n\n\t\t// Fire event if snapped state changed\n\t\tif (lastHeaderSnapped !== this._headerSnapped) {\n\t\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\t}\n\t}\n\n\tasync onExpandClick() {\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusExpandButton();\n\n\t\tif (this.hasSnappedTitleOnMobile) {\n\t\t\tthis.dynamicPageTitle?.focus();\n\t\t}\n\n\t\tannounce(this._headerLabel, InvisibleMessageMode.Polite);\n\t}\n\n\tasync onPinClick() {\n\t\tthis.headerPinned = !this.headerPinned;\n\t\tif (this.headerPinned) {\n\t\t\tthis.showHeaderInStickArea = true;\n\t\t} else if (this.scrollContainer && this.scrollContainer.scrollTop === 0) {\n\t\t\tthis.showHeaderInStickArea = false;\n\t\t}\n\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\tawait renderFinished();\n\t\tthis.headerActions?.focusPinButton();\n\t}\n\n\tasync onToggleTitle() {\n\t\tif (!this.hasHeading) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isToggled = true;\n\t\tthis._toggleHeader();\n\t\tthis.fireDecoratorEvent(\"title-toggle\");\n\t\tawait renderFinished();\n\t\tthis.dynamicPageTitle!.focus();\n\t}\n\n\tasync _toggleHeader() {\n\t\tif (!this.scrollContainer) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst currentScrollTop = this.scrollContainer.scrollTop;\n\n\t\tif (!this._headerSnapped && this.headerPinned) {\n\t\t\tthis.headerPinned = false;\n\t\t\tthis.fireDecoratorEvent(\"pin-button-toggle\");\n\t\t}\n\n\t\tif (currentScrollTop <= SCROLL_THRESHOLD) {\n\t\t\tthis._headerSnapped = !this._headerSnapped;\n\t\t\tthis.showHeaderInStickArea = this._headerSnapped;\n\t\t\treturn;\n\t\t}\n\n\t\tif (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {\n\t\t\tif (!this._headerSnapped) {\n\t\t\t\tthis._headerSnapped = true;\n\t\t\t\tthis.showHeaderInStickArea = true;\n\t\t\t\tthis.scrollContainer.scrollTop = 0;\n\t\t\t} else {\n\t\t\t\tthis.showHeaderInStickArea = false;\n\t\t\t\tthis._headerSnapped = false;\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.scrollContainer.scrollTop === SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer.scrollTop = 0;\n\t\t}\n\n\t\tthis.showHeaderInStickArea = !this.showHeaderInStickArea;\n\t\tthis._headerSnapped = !this._headerSnapped;\n\n\t\tthis.skipSnapOnScroll = true;\n\n\t\tawait renderFinished();\n\t\tif (this._headerSnapped && this.scrollContainer.scrollTop < SCROLL_THRESHOLD) {\n\t\t\tthis.scrollContainer.scrollTop = SCROLL_THRESHOLD;\n\t\t}\n\t}\n\n\tonExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t}\n\n\tonExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t}\n\n\tonContentFocusIn(e: FocusEvent) {\n\t\tconst target = e.target as HTMLElement;\n\t\tthis.setScrollPadding({ start: this.scrollPaddingTop, end: this.endAreaHeight });\n\n\t\t// textareas and similar elements appear \"in view\" even when partially\n\t\t// hidden behind sticky header/footer.\n\t\t// manual scroll brings them fully into view.\n\t\t// another issue is that browsers do not reflect dynamic changes of scroll-padding\n\t\trequestAnimationFrame(() => {\n\t\t\ttarget.scrollIntoView({ behavior: \"smooth\", block: \"nearest\" });\n\t\t});\n\t}\n\n\tonContentFocusOut() {\n\t\t// Reset scroll padding when focus leaves content (e.g., moves to sticky header).\n\t\t// The sticky header is part of the scrollable area, so keeping padding causes unwanted scroll.\n\t\tthis.setScrollPadding({ start: 0, end: 0 });\n\t}\n\n\tsetScrollPadding(padding: { start: number, end: number }) {\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-top\", `${padding.start}px`);\n\t\tthis.scrollContainer?.style.setProperty(\"scroll-padding-bottom\", `${padding.end}px`);\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}

package/dist/DynamicSideContent.d.ts

@@ -11,7 +11,7 @@ type DynamicSideContentLayoutChangeEventDetail = {
     mainContentVisible: boolean;
     sideContentVisible: boolean;
 };
-type DynamicSideContentAriaAccessibilityAttributes = Pick<AccessibilityAttributes, "ariaLabel">;
+type DynamicSideContentAriaAccessibilityAttributes = Pick<AccessibilityAttributes, "ariaLabel" | "role">;
 type DynamicSideContentAccessibilityAttributes = {
     mainContent?: DynamicSideContentAriaAccessibilityAttributes;
     sideContent?: DynamicSideContentAriaAccessibilityAttributes;
@@ -144,8 +144,13 @@ declare class DynamicSideContent extends UI5Element {
     *
     * The accessibilityAttributes object has the following fields:
     *
-    *  - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.
-    *  - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.
+    * - **mainContent**:
+    *   - **ariaLabel**: defines the aria-label of the main content area. Accepts any string.
+    *   - **role**: defines the role of the main content area. When not set, defaults to `"main"`. Set to `undefined` to remove the role attribute.
+    *
+    * - **sideContent**:
+    *   - **ariaLabel**: defines the aria-label of the side content area. Accepts any string.
+    *   - **role**: defines the role of the side content area. When not set, defaults to `"complementary"`. Set to `undefined` to remove the role attribute.
     *
     * @default {}
     * @public

package/dist/DynamicSideContent.js

@@ -153,8 +153,13 @@ let DynamicSideContent = DynamicSideContent_1 = class DynamicSideContent extends
         *
         * The accessibilityAttributes object has the following fields:
         *
-        *  - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.
-        *  - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.
+        * - **mainContent**:
+        *   - **ariaLabel**: defines the aria-label of the main content area. Accepts any string.
+        *   - **role**: defines the role of the main content area. When not set, defaults to `"main"`. Set to `undefined` to remove the role attribute.
+        *
+        * - **sideContent**:
+        *   - **ariaLabel**: defines the aria-label of the side content area. Accepts any string.
+        *   - **role**: defines the role of the side content area. When not set, defaults to `"complementary"`. Set to `undefined` to remove the role attribute.
         *
         * @default {}
         * @public
@@ -279,12 +284,18 @@ let DynamicSideContent = DynamicSideContent_1 = class DynamicSideContent extends
         };
     }
     get accInfo() {
+        const mainContentAttr = this.accessibilityAttributes.mainContent || {};
+        const sideContentAttr = this.accessibilityAttributes.sideContent || {};
+        const hasMainRole = "role" in mainContentAttr;
+        const hasSideRole = "role" in sideContentAttr;
         return {
             mainContent: {
-                ariaLabel: this.accessibilityAttributes.mainContent?.ariaLabel || DynamicSideContent_1.i18nBundle.getText(DSC_MAIN_ARIA_LABEL),
+                ariaLabel: mainContentAttr.ariaLabel || DynamicSideContent_1.i18nBundle.getText(DSC_MAIN_ARIA_LABEL),
+                role: hasMainRole ? mainContentAttr.role : "main",
             },
             sideContent: {
-                ariaLabel: this.accessibilityAttributes.sideContent?.ariaLabel || DynamicSideContent_1.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),
+                ariaLabel: sideContentAttr.ariaLabel || DynamicSideContent_1.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),
+                role: hasSideRole ? sideContentAttr.role : "complementary",
             },
         };
     }

package/dist/DynamicSideContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicSideContent.js","sourceRoot":"","sources":["../src/DynamicSideContent.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideContentPosition from \"./types/SideContentPosition.js\";\nimport SideContentVisibility from \"./types/SideContentVisibility.js\";\nimport SideContentFallDown from \"./types/SideContentFallDown.js\";\nimport DynamicSideContentTemplate from \"./DynamicSideContentTemplate.js\";\nimport type {\n\tAccessibilityAttributes,\n} from \"@ui5/webcomponents-base\";\n\n// Styles\nimport DynamicSideContentCss from \"./generated/themes/DynamicSideContent.css.js\";\n\n// Texts\nimport {\n\tDSC_MAIN_ARIA_LABEL,\n\tDSC_SIDE_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Breakpoint-related constants\nconst S_M_BREAKPOINT = 720,\t// Breakpoint between S and M screen sizes\n\tM_L_BREAKPOINT = 1024, // Breakpoint between M and L screen sizes\n\tL_XL_BREAKPOINT = 1440, // Breakpoint between L and XL screen sizes\n\tMINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and side contents are side by side\n\ntype DynamicSideContentLayoutChangeEventDetail = {\n\tcurrentBreakpoint: string,\n\tpreviousBreakpoint: string | undefined,\n\tmainContentVisible: boolean,\n\tsideContentVisible: boolean,\n}\n\ntype DynamicSideContentAriaAccessibilityAttributes = Pick<AccessibilityAttributes, \"ariaLabel\">;\ntype DynamicSideContentAccessibilityAttributes = {\n\tmainContent?: DynamicSideContentAriaAccessibilityAttributes,\n\tsideContent?: DynamicSideContentAriaAccessibilityAttributes,\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * The DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content\n * to be displayed in a way that flexibly adapts to different screen sizes. The side\n * content appears in a container next to or directly below the main content\n * (it doesn't overlay). When the side content is triggered, the main content becomes\n * narrower (if appearing side-by-side). The side content contains a separate scrollbar\n * when appearing next to the main content.\n *\n * ### Usage\n *\n * *When to use?*\n *\n * Use this component if you want to display relevant information that is not critical\n * for users to complete a task. Users should have access to all the key functions and\n * critical information in the app even if they do not see the side content. This is\n * important because on smaller screen sizes it may be difficult to display the side\n * content in a way that is easily accessible for the user.\n *\n * *When not to use?*\n *\n * Don't use it if you want to display navigation or critical information that prevents\n * users from completing a task when they have no access to the side content.\n *\n * ### Responsive Behavior\n *\n * Screen width \\> 1440px\n *\n * - Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\n * each).\n * - If the application defines a trigger, the side content can be hidden.\n *\n * Screen width \\<\\= 1440px and \\> 1024px\n *\n * - Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n * 320px each). If the side content width falls below 320 px, it automatically slides\n * under the main content, unless the app development team specifies that it should\n * disappear.\n *\n * Screen width \\<\\= 1024px and \\> 720px\n *\n * - The side content ratio is fixed to 340px, and the main content takes the rest\n * of the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`\n * and screen width is \\<\\= 960px and \\> 720px the side content falls below the main content.\n *\n * Screen width \\<\\= 720px (for example on a mobile device)\n *\n * - In this case, the side content automatically disappears from the screen (unless\n * specified to stay under the content by setting of `sideContentVisibility`\n * property to `AlwaysShow`) and can be triggered from a pre-set trigger\n * (specified within the app). When the side content is triggered, it replaces the main\n * content. We recommend that you always place the trigger for the side content in the\n * same location, such as in the app footer.\n *\n * A special case allows switching the comparison mode between the main and side content.\n * In this case, the screen is split into 50:50 percent for main vs. side content. The\n * responsive behavior of the equal split is the same as in the standard view - the\n * side content disappears on screen widths of less than 720 px and can only be\n * viewed by triggering it.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicSideContent.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.1.0\n * @slot {Array<HTMLElement>} default - Defines the main content.\n */\n@customElement({\n\ttag: \"ui5-dynamic-side-content\",\n\trenderer: jsxRenderer,\n\tstyles: [DynamicSideContentCss],\n\ttemplate: DynamicSideContentTemplate,\n})\n/**\n * Fires when the current breakpoint has been changed.\n * @param {string} currentBreakpoint the current breakpoint.\n * @param {string | undefined} previousBreakpoint the breakpoint that was active before change to current breakpoint.\n * @param {boolean} mainContentVisible visibility of the main content.\n * @param {boolean} sideContentVisible visibility of the side content.\n * @public\n */\n@event(\"layout-change\", {\n\tbubbles: true,\n})\nclass DynamicSideContent extends UI5Element {\n\teventDetails!: {\n\t\t\"layout-change\": DynamicSideContentLayoutChangeEventDetail\n\t}\n\t/**\n\t * Defines the visibility of the main content.\n\t * @default false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\thideMainContent = false;\n\n\t/**\n\t * Defines the visibility of the side content.\n\t * @default false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\thideSideContent = false;\n\n\t/**\n\t * Defines whether the side content is positioned before the main content (left side\n\t * in LTR mode), or after the the main content (right side in LTR mode).\n\n\t * @default \"End\"\n\t * @public\n\t *\n\t */\n\t@property()\n\tsideContentPosition: `${SideContentPosition}` = \"End\";\n\n\t/**\n\t * Defines on which breakpoints the side content is visible.\n \t * @default \"ShowAboveS\"\n\t * @public\n\t *\n\t */\n\t@property()\n\tsideContentVisibility: `${SideContentVisibility}` = \"ShowAboveS\";\n\n\t/**\n\t * Defines on which breakpoints the side content falls down below the main content.\n\t * @default \"OnMinimumWidth\"\n\t * @public\n\t *\n\t */\n\t@property()\n\tsideContentFallDown: `${SideContentFallDown}` = \"OnMinimumWidth\";\n\n\t/**\n\t * Defines whether the component is in equal split mode. In this mode, the side and\n\t * the main content take 50:50 percent of the container on all screen sizes\n\t * except for phone, where the main and side contents are switching visibility\n\t * using the toggle method.\n\t * @default false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\tequalSplit = false;\n\n\t/**\n\t* Defines additional accessibility attributes on different areas of the component.\n\t*\n\t* The accessibilityAttributes object has the following fields:\n\t*\n\t*  - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n\t*  - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.\n\t*\n\t* @default {}\n\t* @public\n\t* @since 2.6.0\n\t*/\n\t@property({ type: Object })\n\taccessibilityAttributes: DynamicSideContentAccessibilityAttributes = {};\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_toggled = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_currentBreakpoint?: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_isSideContentBelowMainContent = false;\n\n\t/**\n\t * Defines the side content.\n\t * @public\n\t */\n\t@slot()\n\tsideContent!: Slot<HTMLElement>;\n\n\t@query(\".ui5-dsc-main\")\n\t_mainContent!: HTMLElement;\n\n\t@query(\".ui5-dsc-side\")\n\t_sideContent!: HTMLElement;\n\n\t_resizeObserver?: ResizeObserver;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonEnterDOM() {\n\t\tthis._resizeObserver = new ResizeObserver(entries => {\n\t\t\tentries.forEach(entry => {\n\t\t\t\tconst width = entry.contentRect.width;\n\t\t\t\tlet breakpoint: string;\n\t\t\t\tif (width <= S_M_BREAKPOINT) {\n\t\t\t\t\tbreakpoint = \"S\";\n\t\t\t\t} else if (width <= M_L_BREAKPOINT) {\n\t\t\t\t\tbreakpoint = \"M\";\n\t\t\t\t} else if (width <= L_XL_BREAKPOINT) {\n\t\t\t\t\tbreakpoint = \"L\";\n\t\t\t\t} else {\n\t\t\t\t\tbreakpoint = \"XL\";\n\t\t\t\t}\n\n\t\t\t\tthis._isSideContentBelowMainContent = this.isSideContentBelowMainContent;\n\n\t\t\t\tif (breakpoint !== this._currentBreakpoint) {\n\t\t\t\t\tthis.fireDecoratorEvent(\"layout-change\", {\n\t\t\t\t\t\tcurrentBreakpoint: breakpoint,\n\t\t\t\t\t\tpreviousBreakpoint: this._currentBreakpoint,\n\t\t\t\t\t\tmainContentVisible: this._getMainContentVisibility(),\n\t\t\t\t\t\tsideContentVisible: this._getSideContentVisibility(),\n\t\t\t\t\t});\n\t\t\t\t\tthis._currentBreakpoint = breakpoint;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\tthis._resizeObserver.observe(this);\n\t}\n\n\tonExitDOM() {\n\t\tthis._resizeObserver?.disconnect();\n\t}\n\n\t/**\n\t * Toggles visibility of main and side contents on S screen size (mobile device).\n\t * @public\n\t */\n\ttoggleContents(): void {\n\t\tif (this._isToggleEnabled) {\n\t\t\tthis._toggled = !this._toggled;\n\t\t}\n\t}\n\n\t/**\n\t * Gets main content visibility by checking CSS display property\n\t * @private\n\t */\n\t_getMainContentVisibility(): boolean {\n\t\tif (!this._mainContent) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst computedStyle = getComputedStyle(this._mainContent);\n\t\treturn computedStyle.display !== \"none\";\n\t}\n\n\t/**\n\t * Gets side content visibility by checking CSS display property\n\t * @private\n\t */\n\t_getSideContentVisibility(): boolean {\n\t\tif (!this._sideContent) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst computedStyle = getComputedStyle(this._sideContent);\n\t\treturn computedStyle.display !== \"none\";\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-dsc-main\": true,\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"ui5-dsc-side\": true,\n\t\t\t},\n\t\t\troot: {\n\t\t\t\t\"ui5-dsc-root\": true,\n\t\t\t\t\"ui5-dsc-toggled\": this._toggled,\n\t\t\t},\n\t\t};\n\t}\n\n\tget isSideContentBelowMainContent() {\n\t\tif (this.sideContentVisibility === SideContentVisibility.NeverShow) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Cases when side content falls below main content\n\t\tconst fallOnMinimumWidth = this.sideContentFallDown === SideContentFallDown.OnMinimumWidth && this._currentBreakpoint === this.sizeM && this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT;\n\t\tconst fallBelowM = this.sideContentFallDown === SideContentFallDown.BelowM && (this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS);\n\t\tconst fallBelowL = this.sideContentFallDown === SideContentFallDown.BelowL && (this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS);\n\t\tconst fallBelowXL = this.sideContentFallDown === SideContentFallDown.BelowXL\n\t\t\t&& (this._currentBreakpoint === this.sizeL || this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS)\n\t\t\t&& this._currentBreakpoint !== this.sizeXL;\n\t\tconst fallWhenAlwaysShow = this.sideContentVisibility === SideContentVisibility.AlwaysShow && (\n\t\t\tthis._currentBreakpoint === this.sizeS\n\t\t\t|| (this._currentBreakpoint === this.sizeM && this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT)\n\t\t);\n\n\t\treturn fallOnMinimumWidth || fallBelowM || fallBelowL || fallBelowXL || fallWhenAlwaysShow;\n\t}\n\n\tget styles() {\n\t\tthis._isSideContentBelowMainContent = this.isSideContentBelowMainContent;\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"flex-wrap\": \"nowrap\",\n\t\t\t},\n\t\t\tmain: {\n\t\t\t\t\"height\": this._isSideContentBelowMainContent ? \"auto\" : \"100%\",\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"height\": this._isSideContentBelowMainContent ? \"auto\" : \"100%\",\n\t\t\t},\n\t\t};\n\t}\n\n\tget accInfo(): DynamicSideContentAccessibilityAttributes {\n\t\treturn {\n\t\t\tmainContent: {\n\t\t\t\tariaLabel: this.accessibilityAttributes.mainContent?.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_MAIN_ARIA_LABEL),\n\t\t\t},\n\t\t\tsideContent: {\n\t\t\t\tariaLabel: this.accessibilityAttributes.sideContent?.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),\n\t\t\t},\n\t\t};\n\t}\n\n\tget sizeS() {\n\t\treturn \"S\";\n\t}\n\n\tget sizeM() {\n\t\treturn \"M\";\n\t}\n\n\tget sizeL() {\n\t\treturn \"L\";\n\t}\n\n\tget sizeXL() {\n\t\treturn \"XL\";\n\t}\n\n\tget containerWidth() {\n\t\treturn this.clientWidth;\n\t}\n\n\tget breakpoint(): string {\n\t\tconst width = this.containerWidth;\n\n\t\tif (width <= S_M_BREAKPOINT) {\n\t\t\treturn this.sizeS;\n\t\t}\n\t\tif (width <= M_L_BREAKPOINT) {\n\t\t\treturn this.sizeM;\n\t\t}\n\t\tif (width <= L_XL_BREAKPOINT) {\n\t\t\treturn this.sizeL;\n\t\t}\n\t\treturn this.sizeXL;\n\t}\n\n\tget _isSideContentFirst() {\n\t\treturn this.sideContentPosition === SideContentPosition.Start;\n\t}\n\n\t/**\n\t * Returns true when the toggleContents functionality should be enabled.\n\t * Toggle is available when side content would normally be hidden in the current breakpoint\n\t * but can be shown via the toggle mechanism.\n\t * @private\n\t */\n\tget _isToggleEnabled(): boolean {\n\t\t// Never allow toggle when NeverShow is set or content is explicitly hidden\n\t\tif (this.sideContentVisibility === SideContentVisibility.NeverShow\n\t\t\t|| this.hideMainContent\n\t\t\t|| this.hideSideContent) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst currentBreakpoint = this.breakpoint;\n\n\t\t// S breakpoint: toggle available unless AlwaysShow\n\t\tif (currentBreakpoint === this.sizeS) {\n\t\t\treturn this.sideContentVisibility !== SideContentVisibility.AlwaysShow;\n\t\t}\n\n\t\t// For other breakpoints, check if side content would be hidden based on visibility setting\n\t\tconst breakpointHierarchy = {\n\t\t\t[this.sizeM]: [SideContentVisibility.ShowAboveM, SideContentVisibility.ShowAboveL],\n\t\t\t[this.sizeL]: [SideContentVisibility.ShowAboveL],\n\t\t};\n\n\t\tconst hiddenVisibilities = breakpointHierarchy[currentBreakpoint];\n\t\treturn hiddenVisibilities?.includes(this.sideContentVisibility as SideContentVisibility) ?? false;\n\t}\n}\n\nDynamicSideContent.define();\n\nexport default DynamicSideContent;\nexport type {\n\tDynamicSideContentLayoutChangeEventDetail,\n\tDynamicSideContentAccessibilityAttributes,\n};\n"]}
+{"version":3,"file":"DynamicSideContent.js","sourceRoot":"","sources":["../src/DynamicSideContent.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,mBAAmB,MAAM,gCAAgC,CAAC;AACjE,OAAO,qBAAqB,MAAM,kCAAkC,CAAC;AACrE,OAAO,mBAAmB,MAAM,gCAAgC,CAAC;AACjE,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AAKzE,SAAS;AACT,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AAEjF,QAAQ;AACR,OAAO,EACN,mBAAmB,EACnB,mBAAmB,GACnB,MAAM,mCAAmC,CAAC;AAE3C,+BAA+B;AAC/B,MAAM,cAAc,GAAG,GAAG,EAAE,0CAA0C;AACrE,cAAc,GAAG,IAAI,EAAE,0CAA0C;AACjE,eAAe,GAAG,IAAI,EAAE,2CAA2C;AACnE,wBAAwB,GAAG,GAAG,CAAC,CAAC,6EAA6E;AAe9G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AAkBH,IAAM,kBAAkB,0BAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAIC;;;;;WAKG;QAEH,oBAAe,GAAG,KAAK,CAAC;QAExB;;;;;WAKG;QAEH,oBAAe,GAAG,KAAK,CAAC;QAExB;;;;;;;WAOG;QAEH,wBAAmB,GAA6B,KAAK,CAAC;QAEtD;;;;;WAKG;QAEH,0BAAqB,GAA+B,YAAY,CAAC;QAEjE;;;;;WAKG;QAEH,wBAAmB,GAA6B,gBAAgB,CAAC;QAEjE;;;;;;;;WAQG;QAEH,eAAU,GAAG,KAAK,CAAC;QAEnB;;;;;;;;;;;;;;;;UAgBE;QAEF,4BAAuB,GAA8C,EAAE,CAAC;QAExE;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAQjB;;WAEG;QAEH,mCAA8B,GAAG,KAAK,CAAC;IAqOxC,CAAC;IAjNA,UAAU;QACT,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YACnD,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACvB,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;gBACtC,IAAI,UAAkB,CAAC;gBACvB,IAAI,KAAK,IAAI,cAAc,EAAE,CAAC;oBAC7B,UAAU,GAAG,GAAG,CAAC;gBAClB,CAAC;qBAAM,IAAI,KAAK,IAAI,cAAc,EAAE,CAAC;oBACpC,UAAU,GAAG,GAAG,CAAC;gBAClB,CAAC;qBAAM,IAAI,KAAK,IAAI,eAAe,EAAE,CAAC;oBACrC,UAAU,GAAG,GAAG,CAAC;gBAClB,CAAC;qBAAM,CAAC;oBACP,UAAU,GAAG,IAAI,CAAC;gBACnB,CAAC;gBAED,IAAI,CAAC,8BAA8B,GAAG,IAAI,CAAC,6BAA6B,CAAC;gBAEzE,IAAI,UAAU,KAAK,IAAI,CAAC,kBAAkB,EAAE,CAAC;oBAC5C,IAAI,CAAC,kBAAkB,CAAC,eAAe,EAAE;wBACxC,iBAAiB,EAAE,UAAU;wBAC7B,kBAAkB,EAAE,IAAI,CAAC,kBAAkB;wBAC3C,kBAAkB,EAAE,IAAI,CAAC,yBAAyB,EAAE;wBACpD,kBAAkB,EAAE,IAAI,CAAC,yBAAyB,EAAE;qBACpD,CAAC,CAAC;oBACH,IAAI,CAAC,kBAAkB,GAAG,UAAU,CAAC;gBACtC,CAAC;YACF,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAED,SAAS;QACR,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,CAAC;IACpC,CAAC;IAED;;;OAGG;IACH,cAAc;QACb,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAChC,CAAC;IACF,CAAC;IAED;;;OAGG;IACH,yBAAyB;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACxB,OAAO,KAAK,CAAC;QACd,CAAC;QAED,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1D,OAAO,aAAa,CAAC,OAAO,KAAK,MAAM,CAAC;IACzC,CAAC;IAED;;;OAGG;IACH,yBAAyB;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACxB,OAAO,KAAK,CAAC;QACd,CAAC;QAED,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1D,OAAO,aAAa,CAAC,OAAO,KAAK,MAAM,CAAC;IACzC,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,IAAI,EAAE;gBACL,cAAc,EAAE,IAAI;aACpB;YACD,IAAI,EAAE;gBACL,cAAc,EAAE,IAAI;aACpB;YACD,IAAI,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,iBAAiB,EAAE,IAAI,CAAC,QAAQ;aAChC;SACD,CAAC;IACH,CAAC;IAED,IAAI,6BAA6B;QAChC,IAAI,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,SAAS,EAAE,CAAC;YACpE,OAAO,KAAK,CAAC;QACd,CAAC;QAED,mDAAmD;QACnD,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,cAAc,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,IAAI,wBAAwB,CAAC;QACxL,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;QACjK,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;QACjK,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,OAAO;eACxE,CAAC,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,CAAC;eAC5H,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,MAAM,CAAC;QAC5C,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,UAAU,IAAI,CAC7F,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK;eACnC,CAAC,IAAI,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,cAAc,IAAI,wBAAwB,CAAC,CAC9F,CAAC;QAEF,OAAO,kBAAkB,IAAI,UAAU,IAAI,UAAU,IAAI,WAAW,IAAI,kBAAkB,CAAC;IAC5F,CAAC;IAED,IAAI,MAAM;QACT,IAAI,CAAC,8BAA8B,GAAG,IAAI,CAAC,6BAA6B,CAAC;QAEzE,OAAO;YACN,IAAI,EAAE;gBACL,WAAW,EAAE,QAAQ;aACrB;YACD,IAAI,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,8BAA8B,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;aAC/D;YACD,IAAI,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,8BAA8B,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;aAC/D;SACD,CAAC;IACH,CAAC;IAED,IAAI,OAAO;QACV,MAAM,eAAe,GAAG,IAAI,CAAC,uBAAuB,CAAC,WAAW,IAAI,EAAE,CAAC;QACvE,MAAM,eAAe,GAAG,IAAI,CAAC,uBAAuB,CAAC,WAAW,IAAI,EAAE,CAAC;QACvE,MAAM,WAAW,GAAG,MAAM,IAAI,eAAe,CAAC;QAC9C,MAAM,WAAW,GAAG,MAAM,IAAI,eAAe,CAAC;QAE9C,OAAO;YACN,WAAW,EAAE;gBACZ,SAAS,EAAE,eAAe,CAAC,SAAS,IAAI,oBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC;gBAClG,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM;aACjD;YACD,WAAW,EAAE;gBACZ,SAAS,EAAE,eAAe,CAAC,SAAS,IAAI,oBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC;gBAClG,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe;aAC1D;SACD,CAAC;IACH,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,KAAK;QACR,OAAO,GAAG,CAAC;IACZ,CAAC;IAED,IAAI,MAAM;QACT,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IACzB,CAAC;IAED,IAAI,UAAU;QACb,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC;QAElC,IAAI,KAAK,IAAI,cAAc,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,KAAK,CAAC;QACnB,CAAC;QACD,IAAI,KAAK,IAAI,cAAc,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,KAAK,CAAC;QACnB,CAAC;QACD,IAAI,KAAK,IAAI,eAAe,EAAE,CAAC;YAC9B,OAAO,IAAI,CAAC,KAAK,CAAC;QACnB,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC;IACpB,CAAC;IAED,IAAI,mBAAmB;QACtB,OAAO,IAAI,CAAC,mBAAmB,KAAK,mBAAmB,CAAC,KAAK,CAAC;IAC/D,CAAC;IAED;;;;;OAKG;IACH,IAAI,gBAAgB;QACnB,2EAA2E;QAC3E,IAAI,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,SAAS;eAC9D,IAAI,CAAC,eAAe;eACpB,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,OAAO,KAAK,CAAC;QACd,CAAC;QAED,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC;QAE1C,mDAAmD;QACnD,IAAI,iBAAiB,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YACtC,OAAO,IAAI,CAAC,qBAAqB,KAAK,qBAAqB,CAAC,UAAU,CAAC;QACxE,CAAC;QAED,2FAA2F;QAC3F,MAAM,mBAAmB,GAAG;YAC3B,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAC,UAAU,EAAE,qBAAqB,CAAC,UAAU,CAAC;YAClF,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAC,UAAU,CAAC;SAChD,CAAC;QAEF,MAAM,kBAAkB,GAAG,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;QAClE,OAAO,kBAAkB,EAAE,QAAQ,CAAC,IAAI,CAAC,qBAA8C,CAAC,IAAI,KAAK,CAAC;IACnG,CAAC;CACD,CAAA;AA7TA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACJ;AASxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2DACJ;AAWxB;IADC,QAAQ,EAAE;+DAC2C;AAStD;IADC,QAAQ,EAAE;iEACsD;AASjE;IADC,QAAQ,EAAE;+DACsD;AAYjE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDACT;AAoBnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAC6C;AAMxE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;oDAC9B;AAMjB;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;8DACJ;AAM5B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;0EACR;AAOvC;IADC,IAAI,EAAE;uDACyB;AAGhC;IADC,KAAK,CAAC,eAAe,CAAC;wDACI;AAG3B;IADC,KAAK,CAAC,eAAe,CAAC;wDACI;AAKpB;IADN,IAAI,CAAC,0BAA0B,CAAC;4CACH;AArHzB,kBAAkB;IAjBvB,aAAa,CAAC;QACd,GAAG,EAAE,0BAA0B;QAC/B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,qBAAqB,CAAC;QAC/B,QAAQ,EAAE,0BAA0B;KACpC,CAAC;IACF;;;;;;;OAOG;;IACF,KAAK,CAAC,eAAe,EAAE;QACvB,OAAO,EAAE,IAAI;KACb,CAAC;GACI,kBAAkB,CAwUvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport query from \"@ui5/webcomponents-base/dist/decorators/query.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideContentPosition from \"./types/SideContentPosition.js\";\nimport SideContentVisibility from \"./types/SideContentVisibility.js\";\nimport SideContentFallDown from \"./types/SideContentFallDown.js\";\nimport DynamicSideContentTemplate from \"./DynamicSideContentTemplate.js\";\nimport type {\n\tAccessibilityAttributes,\n} from \"@ui5/webcomponents-base\";\n\n// Styles\nimport DynamicSideContentCss from \"./generated/themes/DynamicSideContent.css.js\";\n\n// Texts\nimport {\n\tDSC_MAIN_ARIA_LABEL,\n\tDSC_SIDE_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Breakpoint-related constants\nconst S_M_BREAKPOINT = 720,\t// Breakpoint between S and M screen sizes\n\tM_L_BREAKPOINT = 1024, // Breakpoint between M and L screen sizes\n\tL_XL_BREAKPOINT = 1440, // Breakpoint between L and XL screen sizes\n\tMINIMUM_WIDTH_BREAKPOINT = 960; // Minimum width of the control where main and side contents are side by side\n\ntype DynamicSideContentLayoutChangeEventDetail = {\n\tcurrentBreakpoint: string,\n\tpreviousBreakpoint: string | undefined,\n\tmainContentVisible: boolean,\n\tsideContentVisible: boolean,\n}\n\ntype DynamicSideContentAriaAccessibilityAttributes = Pick<AccessibilityAttributes, \"ariaLabel\" | \"role\">;\ntype DynamicSideContentAccessibilityAttributes = {\n\tmainContent?: DynamicSideContentAriaAccessibilityAttributes,\n\tsideContent?: DynamicSideContentAriaAccessibilityAttributes,\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * The DynamicSideContent (`ui5-dynamic-side-content`) is a layout component that allows additional content\n * to be displayed in a way that flexibly adapts to different screen sizes. The side\n * content appears in a container next to or directly below the main content\n * (it doesn't overlay). When the side content is triggered, the main content becomes\n * narrower (if appearing side-by-side). The side content contains a separate scrollbar\n * when appearing next to the main content.\n *\n * ### Usage\n *\n * *When to use?*\n *\n * Use this component if you want to display relevant information that is not critical\n * for users to complete a task. Users should have access to all the key functions and\n * critical information in the app even if they do not see the side content. This is\n * important because on smaller screen sizes it may be difficult to display the side\n * content in a way that is easily accessible for the user.\n *\n * *When not to use?*\n *\n * Don't use it if you want to display navigation or critical information that prevents\n * users from completing a task when they have no access to the side content.\n *\n * ### Responsive Behavior\n *\n * Screen width \\> 1440px\n *\n * - Main vs. side content ratio is 75 vs. 25 percent (with a minimum of 320px\n * each).\n * - If the application defines a trigger, the side content can be hidden.\n *\n * Screen width \\<\\= 1440px and \\> 1024px\n *\n * - Main vs. side content ratio is 66.666 vs. 33.333 percent (with a minimum of\n * 320px each). If the side content width falls below 320 px, it automatically slides\n * under the main content, unless the app development team specifies that it should\n * disappear.\n *\n * Screen width \\<\\= 1024px and \\> 720px\n *\n * - The side content ratio is fixed to 340px, and the main content takes the rest\n * of the width. Only if the `sideContentFallDown` is set to `OnMinimumWidth`\n * and screen width is \\<\\= 960px and \\> 720px the side content falls below the main content.\n *\n * Screen width \\<\\= 720px (for example on a mobile device)\n *\n * - In this case, the side content automatically disappears from the screen (unless\n * specified to stay under the content by setting of `sideContentVisibility`\n * property to `AlwaysShow`) and can be triggered from a pre-set trigger\n * (specified within the app). When the side content is triggered, it replaces the main\n * content. We recommend that you always place the trigger for the side content in the\n * same location, such as in the app footer.\n *\n * A special case allows switching the comparison mode between the main and side content.\n * In this case, the screen is split into 50:50 percent for main vs. side content. The\n * responsive behavior of the equal split is the same as in the standard view - the\n * side content disappears on screen widths of less than 720 px and can only be\n * viewed by triggering it.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/DynamicSideContent.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.1.0\n * @slot {Array<HTMLElement>} default - Defines the main content.\n */\n@customElement({\n\ttag: \"ui5-dynamic-side-content\",\n\trenderer: jsxRenderer,\n\tstyles: [DynamicSideContentCss],\n\ttemplate: DynamicSideContentTemplate,\n})\n/**\n * Fires when the current breakpoint has been changed.\n * @param {string} currentBreakpoint the current breakpoint.\n * @param {string | undefined} previousBreakpoint the breakpoint that was active before change to current breakpoint.\n * @param {boolean} mainContentVisible visibility of the main content.\n * @param {boolean} sideContentVisible visibility of the side content.\n * @public\n */\n@event(\"layout-change\", {\n\tbubbles: true,\n})\nclass DynamicSideContent extends UI5Element {\n\teventDetails!: {\n\t\t\"layout-change\": DynamicSideContentLayoutChangeEventDetail\n\t}\n\t/**\n\t * Defines the visibility of the main content.\n\t * @default false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\thideMainContent = false;\n\n\t/**\n\t * Defines the visibility of the side content.\n\t * @default false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\thideSideContent = false;\n\n\t/**\n\t * Defines whether the side content is positioned before the main content (left side\n\t * in LTR mode), or after the the main content (right side in LTR mode).\n\n\t * @default \"End\"\n\t * @public\n\t *\n\t */\n\t@property()\n\tsideContentPosition: `${SideContentPosition}` = \"End\";\n\n\t/**\n\t * Defines on which breakpoints the side content is visible.\n \t * @default \"ShowAboveS\"\n\t * @public\n\t *\n\t */\n\t@property()\n\tsideContentVisibility: `${SideContentVisibility}` = \"ShowAboveS\";\n\n\t/**\n\t * Defines on which breakpoints the side content falls down below the main content.\n\t * @default \"OnMinimumWidth\"\n\t * @public\n\t *\n\t */\n\t@property()\n\tsideContentFallDown: `${SideContentFallDown}` = \"OnMinimumWidth\";\n\n\t/**\n\t * Defines whether the component is in equal split mode. In this mode, the side and\n\t * the main content take 50:50 percent of the container on all screen sizes\n\t * except for phone, where the main and side contents are switching visibility\n\t * using the toggle method.\n\t * @default false\n\t * @public\n\t *\n\t */\n\t@property({ type: Boolean })\n\tequalSplit = false;\n\n\t/**\n\t* Defines additional accessibility attributes on different areas of the component.\n\t*\n\t* The accessibilityAttributes object has the following fields:\n\t*\n\t* - **mainContent**:\n\t*   - **ariaLabel**: defines the aria-label of the main content area. Accepts any string.\n\t*   - **role**: defines the role of the main content area. When not set, defaults to `\"main\"`. Set to `undefined` to remove the role attribute.\n\t*\n\t* - **sideContent**:\n\t*   - **ariaLabel**: defines the aria-label of the side content area. Accepts any string.\n\t*   - **role**: defines the role of the side content area. When not set, defaults to `\"complementary\"`. Set to `undefined` to remove the role attribute.\n\t*\n\t* @default {}\n\t* @public\n\t* @since 2.6.0\n\t*/\n\t@property({ type: Object })\n\taccessibilityAttributes: DynamicSideContentAccessibilityAttributes = {};\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_toggled = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_currentBreakpoint?: string;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_isSideContentBelowMainContent = false;\n\n\t/**\n\t * Defines the side content.\n\t * @public\n\t */\n\t@slot()\n\tsideContent!: Slot<HTMLElement>;\n\n\t@query(\".ui5-dsc-main\")\n\t_mainContent!: HTMLElement;\n\n\t@query(\".ui5-dsc-side\")\n\t_sideContent!: HTMLElement;\n\n\t_resizeObserver?: ResizeObserver;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonEnterDOM() {\n\t\tthis._resizeObserver = new ResizeObserver(entries => {\n\t\t\tentries.forEach(entry => {\n\t\t\t\tconst width = entry.contentRect.width;\n\t\t\t\tlet breakpoint: string;\n\t\t\t\tif (width <= S_M_BREAKPOINT) {\n\t\t\t\t\tbreakpoint = \"S\";\n\t\t\t\t} else if (width <= M_L_BREAKPOINT) {\n\t\t\t\t\tbreakpoint = \"M\";\n\t\t\t\t} else if (width <= L_XL_BREAKPOINT) {\n\t\t\t\t\tbreakpoint = \"L\";\n\t\t\t\t} else {\n\t\t\t\t\tbreakpoint = \"XL\";\n\t\t\t\t}\n\n\t\t\t\tthis._isSideContentBelowMainContent = this.isSideContentBelowMainContent;\n\n\t\t\t\tif (breakpoint !== this._currentBreakpoint) {\n\t\t\t\t\tthis.fireDecoratorEvent(\"layout-change\", {\n\t\t\t\t\t\tcurrentBreakpoint: breakpoint,\n\t\t\t\t\t\tpreviousBreakpoint: this._currentBreakpoint,\n\t\t\t\t\t\tmainContentVisible: this._getMainContentVisibility(),\n\t\t\t\t\t\tsideContentVisible: this._getSideContentVisibility(),\n\t\t\t\t\t});\n\t\t\t\t\tthis._currentBreakpoint = breakpoint;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\tthis._resizeObserver.observe(this);\n\t}\n\n\tonExitDOM() {\n\t\tthis._resizeObserver?.disconnect();\n\t}\n\n\t/**\n\t * Toggles visibility of main and side contents on S screen size (mobile device).\n\t * @public\n\t */\n\ttoggleContents(): void {\n\t\tif (this._isToggleEnabled) {\n\t\t\tthis._toggled = !this._toggled;\n\t\t}\n\t}\n\n\t/**\n\t * Gets main content visibility by checking CSS display property\n\t * @private\n\t */\n\t_getMainContentVisibility(): boolean {\n\t\tif (!this._mainContent) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst computedStyle = getComputedStyle(this._mainContent);\n\t\treturn computedStyle.display !== \"none\";\n\t}\n\n\t/**\n\t * Gets side content visibility by checking CSS display property\n\t * @private\n\t */\n\t_getSideContentVisibility(): boolean {\n\t\tif (!this._sideContent) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst computedStyle = getComputedStyle(this._sideContent);\n\t\treturn computedStyle.display !== \"none\";\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tmain: {\n\t\t\t\t\"ui5-dsc-main\": true,\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"ui5-dsc-side\": true,\n\t\t\t},\n\t\t\troot: {\n\t\t\t\t\"ui5-dsc-root\": true,\n\t\t\t\t\"ui5-dsc-toggled\": this._toggled,\n\t\t\t},\n\t\t};\n\t}\n\n\tget isSideContentBelowMainContent() {\n\t\tif (this.sideContentVisibility === SideContentVisibility.NeverShow) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Cases when side content falls below main content\n\t\tconst fallOnMinimumWidth = this.sideContentFallDown === SideContentFallDown.OnMinimumWidth && this._currentBreakpoint === this.sizeM && this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT;\n\t\tconst fallBelowM = this.sideContentFallDown === SideContentFallDown.BelowM && (this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS);\n\t\tconst fallBelowL = this.sideContentFallDown === SideContentFallDown.BelowL && (this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS);\n\t\tconst fallBelowXL = this.sideContentFallDown === SideContentFallDown.BelowXL\n\t\t\t&& (this._currentBreakpoint === this.sizeL || this._currentBreakpoint === this.sizeM || this._currentBreakpoint === this.sizeS)\n\t\t\t&& this._currentBreakpoint !== this.sizeXL;\n\t\tconst fallWhenAlwaysShow = this.sideContentVisibility === SideContentVisibility.AlwaysShow && (\n\t\t\tthis._currentBreakpoint === this.sizeS\n\t\t\t|| (this._currentBreakpoint === this.sizeM && this.containerWidth <= MINIMUM_WIDTH_BREAKPOINT)\n\t\t);\n\n\t\treturn fallOnMinimumWidth || fallBelowM || fallBelowL || fallBelowXL || fallWhenAlwaysShow;\n\t}\n\n\tget styles() {\n\t\tthis._isSideContentBelowMainContent = this.isSideContentBelowMainContent;\n\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"flex-wrap\": \"nowrap\",\n\t\t\t},\n\t\t\tmain: {\n\t\t\t\t\"height\": this._isSideContentBelowMainContent ? \"auto\" : \"100%\",\n\t\t\t},\n\t\t\tside: {\n\t\t\t\t\"height\": this._isSideContentBelowMainContent ? \"auto\" : \"100%\",\n\t\t\t},\n\t\t};\n\t}\n\n\tget accInfo(): DynamicSideContentAccessibilityAttributes {\n\t\tconst mainContentAttr = this.accessibilityAttributes.mainContent || {};\n\t\tconst sideContentAttr = this.accessibilityAttributes.sideContent || {};\n\t\tconst hasMainRole = \"role\" in mainContentAttr;\n\t\tconst hasSideRole = \"role\" in sideContentAttr;\n\n\t\treturn {\n\t\t\tmainContent: {\n\t\t\t\tariaLabel: mainContentAttr.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_MAIN_ARIA_LABEL),\n\t\t\t\trole: hasMainRole ? mainContentAttr.role : \"main\",\n\t\t\t},\n\t\t\tsideContent: {\n\t\t\t\tariaLabel: sideContentAttr.ariaLabel || DynamicSideContent.i18nBundle.getText(DSC_SIDE_ARIA_LABEL),\n\t\t\t\trole: hasSideRole ? sideContentAttr.role : \"complementary\",\n\t\t\t},\n\t\t};\n\t}\n\n\tget sizeS() {\n\t\treturn \"S\";\n\t}\n\n\tget sizeM() {\n\t\treturn \"M\";\n\t}\n\n\tget sizeL() {\n\t\treturn \"L\";\n\t}\n\n\tget sizeXL() {\n\t\treturn \"XL\";\n\t}\n\n\tget containerWidth() {\n\t\treturn this.clientWidth;\n\t}\n\n\tget breakpoint(): string {\n\t\tconst width = this.containerWidth;\n\n\t\tif (width <= S_M_BREAKPOINT) {\n\t\t\treturn this.sizeS;\n\t\t}\n\t\tif (width <= M_L_BREAKPOINT) {\n\t\t\treturn this.sizeM;\n\t\t}\n\t\tif (width <= L_XL_BREAKPOINT) {\n\t\t\treturn this.sizeL;\n\t\t}\n\t\treturn this.sizeXL;\n\t}\n\n\tget _isSideContentFirst() {\n\t\treturn this.sideContentPosition === SideContentPosition.Start;\n\t}\n\n\t/**\n\t * Returns true when the toggleContents functionality should be enabled.\n\t * Toggle is available when side content would normally be hidden in the current breakpoint\n\t * but can be shown via the toggle mechanism.\n\t * @private\n\t */\n\tget _isToggleEnabled(): boolean {\n\t\t// Never allow toggle when NeverShow is set or content is explicitly hidden\n\t\tif (this.sideContentVisibility === SideContentVisibility.NeverShow\n\t\t\t|| this.hideMainContent\n\t\t\t|| this.hideSideContent) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst currentBreakpoint = this.breakpoint;\n\n\t\t// S breakpoint: toggle available unless AlwaysShow\n\t\tif (currentBreakpoint === this.sizeS) {\n\t\t\treturn this.sideContentVisibility !== SideContentVisibility.AlwaysShow;\n\t\t}\n\n\t\t// For other breakpoints, check if side content would be hidden based on visibility setting\n\t\tconst breakpointHierarchy = {\n\t\t\t[this.sizeM]: [SideContentVisibility.ShowAboveM, SideContentVisibility.ShowAboveL],\n\t\t\t[this.sizeL]: [SideContentVisibility.ShowAboveL],\n\t\t};\n\n\t\tconst hiddenVisibilities = breakpointHierarchy[currentBreakpoint];\n\t\treturn hiddenVisibilities?.includes(this.sideContentVisibility as SideContentVisibility) ?? false;\n\t}\n}\n\nDynamicSideContent.define();\n\nexport default DynamicSideContent;\nexport type {\n\tDynamicSideContentLayoutChangeEventDetail,\n\tDynamicSideContentAccessibilityAttributes,\n};\n"]}

package/dist/DynamicSideContentTemplate.js

@@ -6,9 +6,9 @@ export default function DynamicSideContentTemplate() {
                 _jsxs(_Fragment, { children: [mainContent.call(this), sideContent.call(this)] }) }));
 }
 function mainContent() {
-    return (_jsx("div", { role: "main", "aria-label": this.accInfo.mainContent?.ariaLabel, class: this.classes.main, style: this.styles.main, children: _jsx("slot", {}) }));
+    return (_jsx("div", { role: this.accInfo.mainContent?.role, "aria-label": this.accInfo.mainContent?.ariaLabel, class: this.classes.main, style: this.styles.main, children: _jsx("slot", {}) }));
 }
 function sideContent() {
-    return (_jsx("aside", { role: "complementary", "aria-label": this.accInfo.sideContent?.ariaLabel, class: this.classes.side, style: this.styles.side, children: _jsx("slot", { name: "sideContent" }) }));
+    return (_jsx("aside", { role: this.accInfo.sideContent?.role, "aria-label": this.accInfo.sideContent?.ariaLabel, class: this.classes.side, style: this.styles.side, children: _jsx("slot", { name: "sideContent" }) }));
 }
 //# sourceMappingURL=DynamicSideContentTemplate.js.map

package/dist/DynamicSideContentTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicSideContentTemplate.js","sourceRoot":"","sources":["../src/DynamicSideContentTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,0BAA0B;IACjD,OAAO,CACN,cACC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,YAEtB,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAC1B,8BACG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACtB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACtB;YACH,CAAC;gBACD,8BACG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACtB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACtB,GAEC,CACN,CAAC;AACH,CAAC;AAED,SAAS,WAAW;IACnB,OAAO,CACN,cACC,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS,EAC/C,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,YAEvB,gBAAa,GACR,CACN,CAAC;AACH,CAAC;AAED,SAAS,WAAW;IACnB,OAAO,CACN,gBACC,IAAI,EAAC,eAAe,gBACR,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS,EAC/C,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,YAEvB,eAAM,IAAI,EAAC,aAAa,GAAQ,GACzB,CACR,CAAC;AACH,CAAC","sourcesContent":["import type DynamicSideContent from \"./DynamicSideContent.js\";\n\nexport default function DynamicSideContentTemplate(this: DynamicSideContent) {\n\treturn (\n\t\t<div\n\t\t\tclass={this.classes.root}\n\t\t\tstyle={this.styles.root}\n\t\t>\n\t\t\t{this._isSideContentFirst ?\n\t\t\t\t<>\n\t\t\t\t\t{ sideContent.call(this) }\n\t\t\t\t\t{ mainContent.call(this) }\n\t\t\t\t</>\n\t\t\t\t:\n\t\t\t\t<>\n\t\t\t\t\t{ mainContent.call(this) }\n\t\t\t\t\t{ sideContent.call(this) }\n\t\t\t\t</>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction mainContent(this: DynamicSideContent) {\n\treturn (\n\t\t<div\n\t\t\trole=\"main\"\n\t\t\taria-label={this.accInfo.mainContent?.ariaLabel}\n\t\t\tclass={this.classes.main}\n\t\t\tstyle={this.styles.main}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</div>\n\t);\n}\n\nfunction sideContent(this: DynamicSideContent) {\n\treturn (\n\t\t<aside\n\t\t\trole=\"complementary\"\n\t\t\taria-label={this.accInfo.sideContent?.ariaLabel}\n\t\t\tclass={this.classes.side}\n\t\t\tstyle={this.styles.side}\n\t\t>\n\t\t\t<slot name=\"sideContent\"></slot>\n\t\t</aside>\n\t);\n}\n"]}
+{"version":3,"file":"DynamicSideContentTemplate.js","sourceRoot":"","sources":["../src/DynamicSideContentTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,0BAA0B;IACjD,OAAO,CACN,cACC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,YAEtB,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAC1B,8BACG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACtB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACtB;YACH,CAAC;gBACD,8BACG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACtB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IACtB,GAEC,CACN,CAAC;AACH,CAAC;AAED,SAAS,WAAW;IACnB,OAAO,CACN,cACC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,gBACxB,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS,EAC/C,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,YAEvB,gBAAa,GACR,CACN,CAAC;AACH,CAAC;AAED,SAAS,WAAW;IACnB,OAAO,CACN,gBACC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,gBACxB,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS,EAC/C,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACxB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,YAEvB,eAAM,IAAI,EAAC,aAAa,GAAQ,GACzB,CACR,CAAC;AACH,CAAC","sourcesContent":["import type DynamicSideContent from \"./DynamicSideContent.js\";\n\nexport default function DynamicSideContentTemplate(this: DynamicSideContent) {\n\treturn (\n\t\t<div\n\t\t\tclass={this.classes.root}\n\t\t\tstyle={this.styles.root}\n\t\t>\n\t\t\t{this._isSideContentFirst ?\n\t\t\t\t<>\n\t\t\t\t\t{ sideContent.call(this) }\n\t\t\t\t\t{ mainContent.call(this) }\n\t\t\t\t</>\n\t\t\t\t:\n\t\t\t\t<>\n\t\t\t\t\t{ mainContent.call(this) }\n\t\t\t\t\t{ sideContent.call(this) }\n\t\t\t\t</>\n\t\t\t}\n\t\t</div>\n\t);\n}\n\nfunction mainContent(this: DynamicSideContent) {\n\treturn (\n\t\t<div\n\t\t\trole={this.accInfo.mainContent?.role}\n\t\t\taria-label={this.accInfo.mainContent?.ariaLabel}\n\t\t\tclass={this.classes.main}\n\t\t\tstyle={this.styles.main}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</div>\n\t);\n}\n\nfunction sideContent(this: DynamicSideContent) {\n\treturn (\n\t\t<aside\n\t\t\trole={this.accInfo.sideContent?.role}\n\t\t\taria-label={this.accInfo.sideContent?.ariaLabel}\n\t\t\tclass={this.classes.side}\n\t\t\tstyle={this.styles.side}\n\t\t>\n\t\t\t<slot name=\"sideContent\"></slot>\n\t\t</aside>\n\t);\n}\n"]}

package/dist/NotificationListItem.d.ts

@@ -15,6 +15,10 @@ type NotificationListItemCloseEventDetail = {
 type NotificationListItemPressEventDetail = {
     item: NotificationListItem;
 };
+type NotificationListItemClickEventDetail = {
+    item: NotificationListItem;
+    originalEvent: Event;
+};
 /**
  * @class
  *
@@ -63,6 +67,7 @@ type NotificationListItemPressEventDetail = {
 declare class NotificationListItem extends NotificationListItemBase {
     eventDetails: NotificationListItemBase["eventDetails"] & {
         _press: NotificationListItemPressEventDetail;
+        click: NotificationListItemClickEventDetail;
         close: NotificationListItemCloseEventDetail;
         _close: NotificationListItemCloseEventDetail;
     };
@@ -181,7 +186,7 @@ declare class NotificationListItem extends NotificationListItemBase {
     /**
      * Event handlers
      */
-    _onclick(): void;
+    _onclick(e: MouseEvent): void;
     _onShowMoreClick(e: UI5CustomEvent<Link, "click">): void;
     _onkeydown(e: KeyboardEvent): Promise<void>;
     _onkeyup(e: KeyboardEvent): void;
@@ -193,8 +198,8 @@ declare class NotificationListItem extends NotificationListItemBase {
     /**
      * Private
      */
-    fireItemPress(): void;
+    fireItemPress(e: Event): void;
     onResize(): void;
 }
 export default NotificationListItem;
-export type { NotificationListItemPressEventDetail, NotificationListItemCloseEventDetail, };
+export type { NotificationListItemPressEventDetail, NotificationListItemClickEventDetail, NotificationListItemCloseEventDetail, };

package/dist/NotificationListItem.js

@@ -294,8 +294,9 @@ let NotificationListItem = NotificationListItem_1 = class NotificationListItem e
     /**
      * Event handlers
      */
-    _onclick() {
-        this.fireItemPress();
+    _onclick(e) {
+        e.stopPropagation();
+        this.fireItemPress(e);
     }
     _onShowMoreClick(e) {
         e.preventDefault();
@@ -350,13 +351,14 @@ let NotificationListItem = NotificationListItem_1 = class NotificationListItem e
     /**
      * Private
      */
-    fireItemPress() {
+    fireItemPress(e) {
         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("click", { item: this, originalEvent: e });
         this.fireDecoratorEvent("_press", { item: this });
     }
     onResize() {
@@ -432,6 +434,18 @@ NotificationListItem = NotificationListItem_1 = __decorate([
     event("_press", {
         bubbles: true,
     })
+    /**
+     * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
+     *
+     * @since 2.22.0
+     * @public
+     * @param {NotificationListItem} item The activated item.
+     * @param {Event} originalEvent The original event from the user interaction.
+     */
+    ,
+    event("click", {
+        bubbles: true,
+    })
     /**
      * Fired when the `Close` button is pressed.
      * @param {HTMLElement} item the closed item.

package/dist/NotificationListItem.js.map

@@ -1 +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"]}
+{"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 NotificationListItemClickEventDetail = {\n\titem: NotificationListItem,\n\toriginalEvent: Event,\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 component is activated either with a mouse/tap or by using the Enter or Space key.\n *\n * @since 2.22.0\n * @public\n * @param {NotificationListItem} item The activated item.\n * @param {Event} originalEvent The original event from the user interaction.\n */\n@event(\"click\", {\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\tclick: NotificationListItemClickEventDetail,\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(e: MouseEvent) {\n\t\te.stopPropagation();\n\t\tthis.fireItemPress(e);\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(e: Event) {\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(\"click\", { item: this, originalEvent: e });\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\tNotificationListItemClickEventDetail,\n\tNotificationListItemCloseEventDetail,\n};\n"]}