@ui5/webcomponents-fiori 2.13.0-rc.0 → 2.13.0-rc.2

package/dist/DynamicPage.d.ts

@@ -137,7 +137,6 @@ declare class DynamicPage extends UI5Element {
     get headerSnapped(): boolean;
     get hasSnappedTitleOnMobile(): number | false | undefined;
     get headerAriaLabel(): string | undefined;
-    get headerAriaExpanded(): boolean | undefined;
     /**
      * Defines if the header is snapped.
      *

package/dist/DynamicPage.js

@@ -182,9 +182,6 @@ let DynamicPage = DynamicPage_1 = class DynamicPage extends UI5Element {
     get headerAriaLabel() {
         return this.hasHeading ? this._headerLabel : undefined;
     }
-    get headerAriaExpanded() {
-        return this.hasHeading ? this._headerExpanded : undefined;
-    }
     /**
      * Defines if the header is snapped.
      *

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.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\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!: 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!: Array<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!: Array<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!: 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\tconst titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst footerHeight = this.showFooter ? this.footerWrapper?.getBoundingClientRect().height : 0;\n\n\t\tif (this.scrollContainer) {\n\t\t\tthis.scrollContainer.style.setProperty(\"scroll-padding-block-end\", `${footerHeight}px`);\n\n\t\t\tif (this._headerSnapped) {\n\t\t\t  this.scrollContainer.style.setProperty(\"scroll-padding-block-start\", `${titleHeight}px`);\n\t\t\t} else {\n\t\t\t  this.scrollContainer.style.setProperty(\"scroll-padding-block-start\", `${headerHeight + titleHeight}px`);\n\t\t\t}\n\t\t}\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 headerAriaExpanded() {\n\t\treturn this.hasHeading ? this._headerExpanded : undefined;\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\tthis._toggleHeader();\n\t\t}\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) {\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!.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!.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\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\tasync onExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t\tawait renderFinished();\n\t}\n\n\tasync onExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t\tawait renderFinished();\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.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\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!: 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!: Array<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!: Array<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!: 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\tconst titleHeight = this.dynamicPageTitle?.getBoundingClientRect().height || 0;\n\t\tconst headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;\n\t\tconst footerHeight = this.showFooter ? this.footerWrapper?.getBoundingClientRect().height : 0;\n\n\t\tif (this.scrollContainer) {\n\t\t\tthis.scrollContainer.style.setProperty(\"scroll-padding-block-end\", `${footerHeight}px`);\n\n\t\t\tif (this._headerSnapped) {\n\t\t\t  this.scrollContainer.style.setProperty(\"scroll-padding-block-start\", `${titleHeight}px`);\n\t\t\t} else {\n\t\t\t  this.scrollContainer.style.setProperty(\"scroll-padding-block-start\", `${headerHeight + titleHeight}px`);\n\t\t\t}\n\t\t}\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\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\tthis._toggleHeader();\n\t\t}\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) {\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!.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!.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\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\tasync onExpandHoverIn() {\n\t\tthis.dynamicPageTitle?.setAttribute(\"hovered\", \"\");\n\t\tawait renderFinished();\n\t}\n\n\tasync onExpandHoverOut() {\n\t\tthis.dynamicPageTitle?.removeAttribute(\"hovered\");\n\t\tawait renderFinished();\n\t}\n}\n\nDynamicPage.define();\n\nexport default DynamicPage;\n"]}

package/dist/DynamicPageTemplate.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
 import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
 export default function DynamicPageTemplate() {
-    return (_jsxs("div", { class: "ui5-dynamic-page-root", children: [_jsxs("div", { class: "ui5-dynamic-page-scroll-container", onScroll: this.snapOnScroll, children: [_jsxs("header", { class: "ui5-dynamic-page-title-header-wrapper", id: `${this._id}-header`, "aria-label": this.headerAriaLabel, "aria-expanded": this.headerAriaExpanded, "onui5-toggle-title": this.onToggleTitle, children: [_jsx("slot", { name: "titleArea" }), this.headerInTitle &&
+    return (_jsxs("div", { class: "ui5-dynamic-page-root", children: [_jsxs("div", { class: "ui5-dynamic-page-scroll-container", onScroll: this.snapOnScroll, children: [_jsxs("header", { class: "ui5-dynamic-page-title-header-wrapper", id: `${this._id}-header`, "aria-label": this.headerAriaLabel, "onui5-toggle-title": this.onToggleTitle, children: [_jsx("slot", { name: "titleArea" }), this.headerInTitle &&
                                 _jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), this.actionsInTitle && headerActions.call(this)] }), this.headerInContent &&
                         _jsx("slot", { tabIndex: this.headerTabIndex, "aria-hidden": this.headerAriaHidden, name: "headerArea" }), !this.actionsInTitle && headerActions.call(this), _jsx("div", { class: "ui5-dynamic-page-content", part: "content", children: _jsxs("div", { class: "ui5-dynamic-page-fit-content", part: "fit-content", children: [_jsx("slot", {}), this.showFooter &&
                                     _jsx("div", { class: "ui5-dynamic-page-spacer" })] }) })] }), _jsx("div", { class: "ui5-dynamic-page-footer", part: "footer", children: _jsx("slot", { name: "footerArea" }) })] }));

package/dist/DynamicPageTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicPageTemplate.js","sourceRoot":"","sources":["../src/DynamicPageTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,uBAAuB,aACjC,eAAK,KAAK,EAAC,mCAAmC,EAC7C,QAAQ,EAAE,IAAI,CAAC,YAAY,aAE3B,kBACC,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,gBACZ,IAAI,CAAC,eAAe,mBACjB,IAAI,CAAC,kBAAkB,wBAClB,IAAI,CAAC,aAAa,aAEtC,eAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,aAAa;gCAClB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGR,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IACxC,EAER,IAAI,CAAC,eAAe;wBACpB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGR,CAAC,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAEjD,cAAK,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,SAAS,YACnD,eAAK,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAC,aAAa,aAC3D,gBAAa,EACZ,IAAI,CAAC,UAAU;oCACf,cAAK,KAAK,EAAC,yBAAyB,GAAO,IAEvC,GACD,IACD,EAEN,cAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,YACjD,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC1B,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa;IACrB,IAAI,CAAC,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;QACtD,OAAO,CACN,KAAC,wBAAwB,IACxB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,+BACN,IAAI,CAAC,aAAa,4BACrB,IAAI,CAAC,UAAU,kCACT,IAAI,CAAC,eAAe,mCACnB,IAAI,CAAC,gBAAgB,GACnD,CACF,CAAC;IACH,CAAC;AACF,CAAC","sourcesContent":["import type DynamicPage from \"./DynamicPage.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\nexport default function DynamicPageTemplate(this: DynamicPage) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-root\">\n\t\t\t<div class=\"ui5-dynamic-page-scroll-container\"\n\t\t\t\tonScroll={this.snapOnScroll}\n\t\t\t>\n\t\t\t\t<header\n\t\t\t\t\tclass=\"ui5-dynamic-page-title-header-wrapper\"\n\t\t\t\t\tid={`${this._id}-header`}\n\t\t\t\t\taria-label={this.headerAriaLabel}\n\t\t\t\t\taria-expanded={this.headerAriaExpanded}\n\t\t\t\t\tonui5-toggle-title={this.onToggleTitle}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"titleArea\"></slot>\n\t\t\t\t\t{this.headerInTitle &&\n\t\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t\t></slot>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.actionsInTitle && headerActions.call(this)}\n\t\t\t\t</header>\n\n\t\t\t\t{this.headerInContent &&\n\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t></slot>\n\t\t\t\t}\n\n\t\t\t\t{!this.actionsInTitle && headerActions.call(this)}\n\n\t\t\t\t<div class=\"ui5-dynamic-page-content\" part=\"content\">\n\t\t\t\t\t<div class=\"ui5-dynamic-page-fit-content\" part=\"fit-content\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t{this.showFooter &&\n\t\t\t\t\t\t\t<div class=\"ui5-dynamic-page-spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"ui5-dynamic-page-footer\" part=\"footer\">\n\t\t\t\t<slot name=\"footerArea\"></slot>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction headerActions(this: DynamicPage) {\n\tif (!this.hasSnappedTitleOnMobile && this.hasHeading) {\n\t\treturn (\n\t\t\t<DynamicPageHeaderActions\n\t\t\t\tsnapped={this.headerSnapped}\n\t\t\t\tpinned={this.headerPinned}\n\t\t\t\thidePinButton={this.hidePinButton}\n\t\t\t\tonui5-expand-button-click={this.onExpandClick}\n\t\t\t\tonui5-pin-button-click={this.onPinClick}\n\t\t\t\tonui5-expand-button-hover-in={this.onExpandHoverIn}\n\t\t\t\tonui5-expand-button-hover-out={this.onExpandHoverOut}\n\t\t\t/>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"DynamicPageTemplate.js","sourceRoot":"","sources":["../src/DynamicPageTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,eAAK,KAAK,EAAC,uBAAuB,aACjC,eAAK,KAAK,EAAC,mCAAmC,EAC7C,QAAQ,EAAE,IAAI,CAAC,YAAY,aAE3B,kBACC,KAAK,EAAC,uCAAuC,EAC7C,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,SAAS,gBACZ,IAAI,CAAC,eAAe,wBACZ,IAAI,CAAC,aAAa,aAEtC,eAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,aAAa;gCAClB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGR,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,IACxC,EAER,IAAI,CAAC,eAAe;wBACpB,eAAM,QAAQ,EAAE,IAAI,CAAC,cAAc,iBACrB,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAC,YAAY,GACV,EAGR,CAAC,IAAI,CAAC,cAAc,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAEjD,cAAK,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,SAAS,YACnD,eAAK,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAC,aAAa,aAC3D,gBAAa,EACZ,IAAI,CAAC,UAAU;oCACf,cAAK,KAAK,EAAC,yBAAyB,GAAO,IAEvC,GACD,IACD,EAEN,cAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,QAAQ,YACjD,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC1B,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,aAAa;IACrB,IAAI,CAAC,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;QACtD,OAAO,CACN,KAAC,wBAAwB,IACxB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,+BACN,IAAI,CAAC,aAAa,4BACrB,IAAI,CAAC,UAAU,kCACT,IAAI,CAAC,eAAe,mCACnB,IAAI,CAAC,gBAAgB,GACnD,CACF,CAAC;IACH,CAAC;AACF,CAAC","sourcesContent":["import type DynamicPage from \"./DynamicPage.js\";\nimport DynamicPageHeaderActions from \"./DynamicPageHeaderActions.js\";\n\nexport default function DynamicPageTemplate(this: DynamicPage) {\n\treturn (\n\t\t<div class=\"ui5-dynamic-page-root\">\n\t\t\t<div class=\"ui5-dynamic-page-scroll-container\"\n\t\t\t\tonScroll={this.snapOnScroll}\n\t\t\t>\n\t\t\t\t<header\n\t\t\t\t\tclass=\"ui5-dynamic-page-title-header-wrapper\"\n\t\t\t\t\tid={`${this._id}-header`}\n\t\t\t\t\taria-label={this.headerAriaLabel}\n\t\t\t\t\tonui5-toggle-title={this.onToggleTitle}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"titleArea\"></slot>\n\t\t\t\t\t{this.headerInTitle &&\n\t\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t\t></slot>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.actionsInTitle && headerActions.call(this)}\n\t\t\t\t</header>\n\n\t\t\t\t{this.headerInContent &&\n\t\t\t\t\t<slot tabIndex={this.headerTabIndex}\n\t\t\t\t\t\taria-hidden={this.headerAriaHidden}\n\t\t\t\t\t\tname=\"headerArea\"\n\t\t\t\t\t></slot>\n\t\t\t\t}\n\n\t\t\t\t{!this.actionsInTitle && headerActions.call(this)}\n\n\t\t\t\t<div class=\"ui5-dynamic-page-content\" part=\"content\">\n\t\t\t\t\t<div class=\"ui5-dynamic-page-fit-content\" part=\"fit-content\">\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t{this.showFooter &&\n\t\t\t\t\t\t\t<div class=\"ui5-dynamic-page-spacer\"></div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"ui5-dynamic-page-footer\" part=\"footer\">\n\t\t\t\t<slot name=\"footerArea\"></slot>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction headerActions(this: DynamicPage) {\n\tif (!this.hasSnappedTitleOnMobile && this.hasHeading) {\n\t\treturn (\n\t\t\t<DynamicPageHeaderActions\n\t\t\t\tsnapped={this.headerSnapped}\n\t\t\t\tpinned={this.headerPinned}\n\t\t\t\thidePinButton={this.hidePinButton}\n\t\t\t\tonui5-expand-button-click={this.onExpandClick}\n\t\t\t\tonui5-pin-button-click={this.onPinClick}\n\t\t\t\tonui5-expand-button-hover-in={this.onExpandHoverIn}\n\t\t\t\tonui5-expand-button-hover-out={this.onExpandHoverOut}\n\t\t\t/>\n\t\t);\n\t}\n}\n"]}

package/dist/SearchItem.d.ts

@@ -46,6 +46,12 @@ declare class SearchItem extends ListItemBase {
      * @public
      */
     selected: boolean;
+    /**
+     * Defines whether the search item is deletable.
+     * @default false
+     * @public
+     */
+    deletable: boolean;
     /**
      * Defines the scope of the search item
      * @default undefined

package/dist/SearchItem.js

@@ -39,6 +39,12 @@ let SearchItem = class SearchItem extends ListItemBase {
          * @public
          */
         this.selected = false;
+        /**
+         * Defines whether the search item is deletable.
+         * @default false
+         * @public
+         */
+        this.deletable = false;
         this.highlightText = "";
         this._markupText = "";
     }
@@ -70,6 +76,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], SearchItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchItem.prototype, "deletable", void 0);
 __decorate([
     property()
 ], SearchItem.prototype, "scopeName", void 0);

package/dist/SearchItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchItem.js","sourceRoot":"","sources":["../src/SearchItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,aAAa,MAAM,sCAAsC,CAAC;AACjE,OAAO,yBAAyB,MAAM,gEAAgE,CAAC;AACvG,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAE5E;;;;;;;;;;;;;;;;GAgBG;AAmBH,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,YAAY;IAArC;;QA8BC;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAWjB,kBAAa,GAAG,EAAE,CAAC;QAYnB,gBAAW,GAAG,EAAE,CAAC;IAsBlB,CAAC;IApBA,UAAU,CAAC,CAAa;QACvB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAEpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,wBAAwB;QACxB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IAC9H,CAAC;CACD,CAAA;AAvEA;IADC,QAAQ,EAAE;wCACG;AASd;IADC,QAAQ,EAAE;+CACU;AASrB;IADC,QAAQ,EAAE;wCACG;AAQd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACX;AAQjB;IADC,QAAQ,EAAE;6CACQ;AAGnB;IADC,QAAQ,EAAE;iDACQ;AAUnB;IADC,IAAI,EAAE;yCACoB;AAzDtB,UAAU;IAlBf,aAAa,CAAC;QACd,GAAG,EAAE,iBAAiB;QACtB,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,kBAAkB;QAC5B,MAAM,EAAE;YACP,YAAY,CAAC,MAAM;YACnB,aAAa;SACb;KACD,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,QAAQ,CAAC;GAEV,UAAU,CAiFf;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport SearchItemTemplate from \"./SearchItemTemplate.js\";\nimport SearchItemCss from \"./generated/themes/SearchItem.css.js\";\nimport generateHighlightedMarkup from \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * A `ui5-search-item` is a list item, used for displaying search suggestions\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`\n *\n * @constructor\n * @extends ListItemBase\n * @public\n * @since 2.9.0\n * @experimental\n */\n@customElement({\n\ttag: \"ui5-search-item\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchItemTemplate,\n\tstyles: [\n\t\tListItemBase.styles,\n\t\tSearchItemCss,\n\t],\n})\n\n/**\n * Fired when delete button is pressed.\n *\n * @public\n */\n@event(\"delete\")\n\nclass SearchItem extends ListItemBase {\n\teventDetails!: ListItemBase[\"eventDetails\"] & {\n\t\t\"delete\": void,\n\t};\n\t/**\n\t * Defines the heading text of the search item.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the description that appears right under the item text, if available.\n\t * @default undefined\n\t * @public\n\t * @since 2.12.0\n\t */\n\t@property()\n\tdescription?: string;\n\n\t/**\n\t * Defines the icon name of the search item.\n\t * **Note:** If provided, the image slot will be ignored.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines whether the search item is selected.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines the scope of the search item\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tscopeName?: string;\n\n\t@property()\n\thighlightText = \"\";\n\n\t/**\n\t * **Note:** While the slot allows the option of setting a custom avatar, to comply with the\n\t * design guidelines, use the `ui5-avatar` with size - XS.\n\t *\n\t * @public\n\t * @since 2.12.0\n\t */\n\t@slot()\n\timage!: Array<HTMLElement>;\n\n\t_markupText = \"\";\n\n\t_onfocusin(e: FocusEvent) {\n\t\tsuper._onfocusin(e);\n\n\t\tthis.selected = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.selected = false;\n\t}\n\n\t_onDeleteButtonClick() {\n\t\tthis.fireDecoratorEvent(\"delete\");\n\t}\n\n\tonBeforeRendering(): void {\n\t\tsuper.onBeforeRendering();\n\n\t\t// bold the matched text\n\t\tthis._markupText = this.highlightText ? generateHighlightedMarkup((this.text || \"\"), this.highlightText) : (this.text || \"\");\n\t}\n}\n\nSearchItem.define();\n\nexport default SearchItem;\n"]}
+{"version":3,"file":"SearchItem.js","sourceRoot":"","sources":["../src/SearchItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,aAAa,MAAM,sCAAsC,CAAC;AACjE,OAAO,yBAAyB,MAAM,gEAAgE,CAAC;AACvG,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAE5E;;;;;;;;;;;;;;;;GAgBG;AAmBH,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,YAAY;IAArC;;QA8BC;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;WAIG;QAEH,cAAS,GAAG,KAAK,CAAC;QAWlB,kBAAa,GAAG,EAAE,CAAC;QAYnB,gBAAW,GAAG,EAAE,CAAC;IAsBlB,CAAC;IApBA,UAAU,CAAC,CAAa;QACvB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAEpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IACvB,CAAC;IAED,oBAAoB;QACnB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,wBAAwB;QACxB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IAC9H,CAAC;CACD,CAAA;AA/EA;IADC,QAAQ,EAAE;wCACG;AASd;IADC,QAAQ,EAAE;+CACU;AASrB;IADC,QAAQ,EAAE;wCACG;AAQd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACX;AAQjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACV;AAQlB;IADC,QAAQ,EAAE;6CACQ;AAGnB;IADC,QAAQ,EAAE;iDACQ;AAUnB;IADC,IAAI,EAAE;yCACoB;AAjEtB,UAAU;IAlBf,aAAa,CAAC;QACd,GAAG,EAAE,iBAAiB;QACtB,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,kBAAkB;QAC5B,MAAM,EAAE;YACP,YAAY,CAAC,MAAM;YACnB,aAAa;SACb;KACD,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,QAAQ,CAAC;GAEV,UAAU,CAyFf;AAED,UAAU,CAAC,MAAM,EAAE,CAAC;AAEpB,eAAe,UAAU,CAAC","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport SearchItemTemplate from \"./SearchItemTemplate.js\";\nimport SearchItemCss from \"./generated/themes/SearchItem.css.js\";\nimport generateHighlightedMarkup from \"@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * A `ui5-search-item` is a list item, used for displaying search suggestions\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`\n *\n * @constructor\n * @extends ListItemBase\n * @public\n * @since 2.9.0\n * @experimental\n */\n@customElement({\n\ttag: \"ui5-search-item\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchItemTemplate,\n\tstyles: [\n\t\tListItemBase.styles,\n\t\tSearchItemCss,\n\t],\n})\n\n/**\n * Fired when delete button is pressed.\n *\n * @public\n */\n@event(\"delete\")\n\nclass SearchItem extends ListItemBase {\n\teventDetails!: ListItemBase[\"eventDetails\"] & {\n\t\t\"delete\": void,\n\t};\n\t/**\n\t * Defines the heading text of the search item.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines the description that appears right under the item text, if available.\n\t * @default undefined\n\t * @public\n\t * @since 2.12.0\n\t */\n\t@property()\n\tdescription?: string;\n\n\t/**\n\t * Defines the icon name of the search item.\n\t * **Note:** If provided, the image slot will be ignored.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines whether the search item is selected.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines whether the search item is deletable.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdeletable = false;\n\n\t/**\n\t * Defines the scope of the search item\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tscopeName?: string;\n\n\t@property()\n\thighlightText = \"\";\n\n\t/**\n\t * **Note:** While the slot allows the option of setting a custom avatar, to comply with the\n\t * design guidelines, use the `ui5-avatar` with size - XS.\n\t *\n\t * @public\n\t * @since 2.12.0\n\t */\n\t@slot()\n\timage!: Array<HTMLElement>;\n\n\t_markupText = \"\";\n\n\t_onfocusin(e: FocusEvent) {\n\t\tsuper._onfocusin(e);\n\n\t\tthis.selected = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.selected = false;\n\t}\n\n\t_onDeleteButtonClick() {\n\t\tthis.fireDecoratorEvent(\"delete\");\n\t}\n\n\tonBeforeRendering(): void {\n\t\tsuper.onBeforeRendering();\n\n\t\t// bold the matched text\n\t\tthis._markupText = this.highlightText ? generateHighlightedMarkup((this.text || \"\"), this.highlightText) : (this.text || \"\");\n\t}\n}\n\nSearchItem.define();\n\nexport default SearchItem;\n"]}

package/dist/SearchItemTemplate.js

@@ -9,6 +9,7 @@ export default function SearchFieldTemplate() {
     return (_jsx("li", { part: "native-li", class: "ui5-li-root ui5-li--focusable", "aria-selected": this.selected, role: "option", "data-sap-focus-ref": true, draggable: this.movable, tabindex: this._effectiveTabIndex, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, onClick: this._onclick, children: _jsx("div", { part: "content", class: "ui5-search-item-content", children: _jsxs("div", { class: "ui5-search-item-begin-content", children: [this.image.length > 0 && !this.icon &&
                         _jsx("slot", { name: "image" }), this.icon &&
                         _jsx(Icon, { class: "ui5-search-item-icon", name: this.icon }), this.scopeName &&
-                        _jsx(Tag, { design: TagDesign.Set2, colorScheme: "10", children: this.scopeName }), _jsxs("div", { class: "ui5-search-item-titles-container", children: [_jsx("span", { part: "title", class: "ui5-search-item-text", dangerouslySetInnerHTML: { __html: this._markupText } }), _jsx("span", { part: "subtitle", class: "ui5-search-item-description", children: this.description })] }), _jsx(Button, { class: "ui5-search-item-selected-delete", design: ButtonDesign.Transparent, icon: decline, onClick: this._onDeleteButtonClick })] }) }) }));
+                        _jsx(Tag, { design: TagDesign.Set2, colorScheme: "10", children: this.scopeName }), _jsxs("div", { class: "ui5-search-item-titles-container", children: [_jsx("span", { part: "title", class: "ui5-search-item-text", dangerouslySetInnerHTML: { __html: this._markupText } }), _jsx("span", { part: "subtitle", class: "ui5-search-item-description", children: this.description })] }), this.deletable &&
+                        _jsx(Button, { class: "ui5-search-item-selected-delete", design: ButtonDesign.Transparent, icon: decline, onClick: this._onDeleteButtonClick })] }) }) }));
 }
 //# sourceMappingURL=SearchItemTemplate.js.map

package/dist/SearchItemTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchItemTemplate.js","sourceRoot":"","sources":["../src/SearchItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,OAAO,GAAG,MAAM,gCAAgC,CAAC;AACjD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,YAAY,MAAM,+CAA+C,CAAC;AACzE,OAAO,SAAS,MAAM,4CAA4C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,aACC,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,+BAA+B,mBACtB,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAC,QAAQ,8BAEb,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,YAEtB,cAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,yBAAyB,YAClD,eAAK,KAAK,EAAC,+BAA+B,aACxC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;wBACnC,eAAM,IAAI,EAAC,OAAO,GAAQ,EAG1B,IAAI,CAAC,IAAI;wBACT,KAAC,IAAI,IAAC,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAS,EAG3D,IAAI,CAAC,SAAS;wBACd,KAAC,GAAG,IAAC,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,WAAW,EAAC,IAAI,YAC3C,IAAI,CAAC,SAAS,GACV,EAGP,eAAK,KAAK,EAAC,kCAAkC,aAC5C,eAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,GAAS,EAE9G,eAAM,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,6BAA6B,YAAE,IAAI,CAAC,WAAW,GAAQ,IAC9E,EACN,KAAC,MAAM,IAAC,KAAK,EAAC,iCAAiC,EAAC,MAAM,EAAE,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,oBAAoB,GAAW,IACzI,GACD,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type SearchItem from \"./SearchItem.js\";\nimport Tag from \"@ui5/webcomponents/dist/Tag.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport TagDesign from \"@ui5/webcomponents/dist/types/TagDesign.js\";\n\nexport default function SearchFieldTemplate(this: SearchItem) {\n\treturn (\n\t\t<li\n\t\t\tpart=\"native-li\"\n\t\t\tclass=\"ui5-li-root ui5-li--focusable\"\n\t\t\taria-selected={this.selected}\n\t\t\trole=\"option\"\n\t\t\tdata-sap-focus-ref\n\t\t\tdraggable={this.movable}\n\t\t\ttabindex={this._effectiveTabIndex}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\tonFocusOut={this._onfocusout}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonClick={this._onclick}\n\t\t>\n\t\t\t<div part=\"content\" class=\"ui5-search-item-content\">\n\t\t\t\t<div class=\"ui5-search-item-begin-content\">\n\t\t\t\t\t{this.image.length > 0 && !this.icon &&\n\t\t\t\t\t\t<slot name=\"image\"></slot>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\t<Icon class=\"ui5-search-item-icon\" name={this.icon}></Icon>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.scopeName &&\n\t\t\t\t\t\t<Tag design={TagDesign.Set2} colorScheme=\"10\">\n\t\t\t\t\t\t\t{this.scopeName}\n\t\t\t\t\t\t</Tag>\n\t\t\t\t\t}\n\n\t\t\t\t\t<div class=\"ui5-search-item-titles-container\">\n\t\t\t\t\t\t<span part=\"title\" class=\"ui5-search-item-text\" dangerouslySetInnerHTML={{ __html: this._markupText }}></span>\n\n\t\t\t\t\t\t<span part=\"subtitle\" class=\"ui5-search-item-description\">{this.description}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<Button class=\"ui5-search-item-selected-delete\" design={ButtonDesign.Transparent} icon={decline} onClick={this._onDeleteButtonClick}></Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li >\n\t);\n}\n"]}
+{"version":3,"file":"SearchItemTemplate.js","sourceRoot":"","sources":["../src/SearchItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAEnD,OAAO,GAAG,MAAM,gCAAgC,CAAC;AACjD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,YAAY,MAAM,+CAA+C,CAAC;AACzE,OAAO,SAAS,MAAM,4CAA4C,CAAC;AAEnE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,aACC,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,+BAA+B,mBACtB,IAAI,CAAC,QAAQ,EAC5B,IAAI,EAAC,QAAQ,8BAEb,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,YAEtB,cAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,yBAAyB,YAClD,eAAK,KAAK,EAAC,+BAA+B,aACxC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;wBACnC,eAAM,IAAI,EAAC,OAAO,GAAQ,EAG1B,IAAI,CAAC,IAAI;wBACT,KAAC,IAAI,IAAC,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAS,EAG3D,IAAI,CAAC,SAAS;wBACd,KAAC,GAAG,IAAC,MAAM,EAAE,SAAS,CAAC,IAAI,EAAE,WAAW,EAAC,IAAI,YAC3C,IAAI,CAAC,SAAS,GACV,EAGP,eAAK,KAAK,EAAC,kCAAkC,aAC5C,eAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,sBAAsB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,GAAS,EAE9G,eAAM,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,6BAA6B,YAAE,IAAI,CAAC,WAAW,GAAQ,IAC9E,EAEL,IAAI,CAAC,SAAS;wBACd,KAAC,MAAM,IAAC,KAAK,EAAC,iCAAiC,EAAC,MAAM,EAAE,YAAY,CAAC,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,oBAAoB,GAAW,IAE1I,GACD,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type SearchItem from \"./SearchItem.js\";\nimport Tag from \"@ui5/webcomponents/dist/Tag.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport TagDesign from \"@ui5/webcomponents/dist/types/TagDesign.js\";\n\nexport default function SearchFieldTemplate(this: SearchItem) {\n\treturn (\n\t\t<li\n\t\t\tpart=\"native-li\"\n\t\t\tclass=\"ui5-li-root ui5-li--focusable\"\n\t\t\taria-selected={this.selected}\n\t\t\trole=\"option\"\n\t\t\tdata-sap-focus-ref\n\t\t\tdraggable={this.movable}\n\t\t\ttabindex={this._effectiveTabIndex}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\tonFocusOut={this._onfocusout}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonClick={this._onclick}\n\t\t>\n\t\t\t<div part=\"content\" class=\"ui5-search-item-content\">\n\t\t\t\t<div class=\"ui5-search-item-begin-content\">\n\t\t\t\t\t{this.image.length > 0 && !this.icon &&\n\t\t\t\t\t\t<slot name=\"image\"></slot>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\t<Icon class=\"ui5-search-item-icon\" name={this.icon}></Icon>\n\t\t\t\t\t}\n\n\t\t\t\t\t{this.scopeName &&\n\t\t\t\t\t\t<Tag design={TagDesign.Set2} colorScheme=\"10\">\n\t\t\t\t\t\t\t{this.scopeName}\n\t\t\t\t\t\t</Tag>\n\t\t\t\t\t}\n\n\t\t\t\t\t<div class=\"ui5-search-item-titles-container\">\n\t\t\t\t\t\t<span part=\"title\" class=\"ui5-search-item-text\" dangerouslySetInnerHTML={{ __html: this._markupText }}></span>\n\n\t\t\t\t\t\t<span part=\"subtitle\" class=\"ui5-search-item-description\">{this.description}</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this.deletable &&\n\t\t\t\t\t\t<Button class=\"ui5-search-item-selected-delete\" design={ButtonDesign.Transparent} icon={decline} onClick={this._onDeleteButtonClick}></Button>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li >\n\t);\n}\n"]}

package/dist/ShellBar.js

@@ -14,7 +14,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { isSpace, isEnter, isLeft, isRight, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isSpace, isEnter, isLeft, isRight, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
 import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js";
@@ -257,7 +257,7 @@ let ShellBar = ShellBar_1 = class ShellBar extends UI5Element {
         }
     }
     _onKeyDown(e) {
-        if (!isLeft(e) && !isRight(e)) {
+        if (!isLeft(e) && !isRight(e) && !isHome(e) && !isEnd(e)) {
             return;
         }
         const domRef = this.getDomRef();
@@ -285,6 +285,14 @@ let ShellBar = ShellBar_1 = class ShellBar extends UI5Element {
             else if (isRight(e)) {
                 this._focusNextItem(items, currentIndex);
             }
+            else if (isHome(e)) {
+                // Move focus to the first ShellBar item
+                items[0]?.focus();
+            }
+            else if (isEnd(e)) {
+                // Move focus to the last ShellBar item
+                items[items.length - 1]?.focus();
+            }
         }
     }
     _allowChildNavigation(activeElement, e) {