npm - @ui5/webcomponents-fiori - Versions diffs - 2.9.0-rc.1 → 2.9.0-rc.2 - Mend

@ui5/webcomponents-fiori 2.9.0-rc.1 → 2.9.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (258) hide show

package/dist/DynamicPage.js CHANGED Viewed

@@ -240,6 +240,9 @@ let DynamicPage = DynamicPage_1 = class DynamicPage extends UI5Element {
         if (this.headerPinned) {
             this.showHeaderInStickArea = true;
         }
+        else if (this.scrollContainer.scrollTop === 0) {
+            this.showHeaderInStickArea = false;
+        }
         this.fireDecoratorEvent("pin-button-toggle");
         await renderFinished();
         this.headerActions?.focusPinButton();
@@ -257,6 +260,15 @@ let DynamicPage = DynamicPage_1 = class DynamicPage extends UI5Element {
     async _toggleHeader() {
         const headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;
         const currentScrollTop = this.scrollContainer.scrollTop;
+        if (!this._headerSnapped && this.headerPinned) {
+            this.headerPinned = false;
+            this.fireDecoratorEvent("pin-button-toggle");
+        }
+        if (currentScrollTop <= SCROLL_THRESHOLD) {
+            this._headerSnapped = !this._headerSnapped;
+            this.showHeaderInStickArea = this._headerSnapped;
+            return;
+        }
         if (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {
             if (!this._headerSnapped) {
                 this._headerSnapped = true;

package/dist/DynamicPage.js.map CHANGED Viewed

	@@ -1 +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}\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 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 _accAttributesForHeaderActions() {\n\t\treturn {\n\t\t\tcontrols: `${this._id}-header` as Lowercase<string>,\n\t\t};\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\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}\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 (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"]}
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}\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 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 _accAttributesForHeaderActions() {\n\t\treturn {\n\t\t\tcontrols: `${this._id}-header` as Lowercase<string>,\n\t\t};\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\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/Search.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import type List from "@ui5/webcomponents/dist/List.js";
 import SearchField from "./SearchField.js";
 import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type SearchItem from "./SearchItem.js";
-import ListGrowingMode from "@ui5/webcomponents/dist/types/ListGrowingMode.js";
+import type Button from "@ui5/webcomponents/dist/Button.js";
 interface ISearchSuggestionItem extends UI5Element {
     selected: boolean;
     headingText: string;
@@ -70,6 +70,7 @@ declare class Search extends SearchField {
     subheaderText: string;
     /**
      * Defines whether the popup footer action button is shown.
+     * Note: The footer action button is displayed only when the `popupMode` is set to `List`.
      * @default false
      * @public
      */
@@ -150,6 +151,7 @@ declare class Search extends SearchField {
     _handleSearchEvent(): void;
     _handleEscape(): void;
     _handleInput(e: InputEvent): void;
+    _onFooterButtonKeyDown(e: KeyboardEvent): void;
     _onItemKeydown(e: KeyboardEvent): void;
     _onItemClick(e: CustomEvent): void;
     _onkeydown(e: KeyboardEvent): void;
@@ -158,15 +160,16 @@ declare class Search extends SearchField {
     _onFocusOutSearch(): void;
     _handleClose(): void;
     _handleOpen(): void;
-    _handleMore(): void;
+    _onFooterButtonClick(): void;
     _getFirstMatchingItem(current: string): ISearchSuggestionItem | undefined;
     _getPicker(): Popover;
     _getItemsList(): List;
+    _getFooterButton(): Button;
     get _flattenItems(): Array<ISearchSuggestionItem>;
     get nativeInput(): HTMLInputElement | null;
     get _showIllustration(): boolean;
     get _showLoading(): boolean;
     get _showHeader(): boolean;
-    get _effectiveGrowing(): ListGrowingMode.Button | ListGrowingMode.None;
+    get _showFooter(): boolean;
 }
 export default Search;

package/dist/Search.js CHANGED Viewed

@@ -9,14 +9,13 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import SearchPopupMode from "@ui5/webcomponents/dist/types/SearchPopupMode.js";
-import { isUp, isDown, isEnter, isBackSpace, isDelete, isEscape, isTabNext, isPageUp, isPageDown, isHome, isEnd, isRight, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isUp, isDown, isEnter, isBackSpace, isDelete, isEscape, isTabNext, isPageUp, isPageDown, isHome, isEnd, isRight, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
 import SearchTemplate from "./SearchTemplate.js";
 import SearchCss from "./generated/themes/Search.css.js";
 import SearchField from "./SearchField.js";
 import { StartsWith, StartsWithPerTerm } from "@ui5/webcomponents/dist/Filters.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
-import ListGrowingMode from "@ui5/webcomponents/dist/types/ListGrowingMode.js";
 /**
  * @class
  *
@@ -70,6 +69,7 @@ let Search = class Search extends SearchField {
         this.subheaderText = "";
         /**
          * Defines whether the popup footer action button is shown.
+         * Note: The footer action button is displayed only when the `popupMode` is set to `List`.
          * @default false
          * @public
          */
@@ -221,16 +221,28 @@ let Search = class Search extends SearchField {
         this.open = true;
         this._openPickerOnInput = false;
     }
+    _onFooterButtonKeyDown(e) {
+        if (isUp(e)) {
+            this._flattenItems[this._flattenItems.length - 1].focus();
+        }
+        if (isTabPrevious(e)) {
+            this._getItemsList().focus();
+        }
+    }
     _onItemKeydown(e) {
-        const items = this._getItemsList()?.getSlottedNodes("items");
-        const isFirstItemGroup = items[1] === e.target && items[0]?.hasAttribute("ui5-li-group");
-        const isFirstItem = items[0] === e.target || isFirstItemGroup;
+        const isFirstItem = this._flattenItems[0] === e.target;
+        const isLastItem = this._flattenItems[this._flattenItems.length - 1] === e.target;
         const isArrowUp = isUp(e);
+        const isArrowDown = isDown(e);
+        const isTab = isTabNext(e);
         e.preventDefault();
         if (isFirstItem && isArrowUp) {
             this.nativeInput?.focus();
             this._shouldAutocomplete = true;
         }
+        if ((isLastItem && isArrowDown) || isTab) {
+            this._getFooterButton()?.focus();
+        }
     }
     _onItemClick(e) {
         const item = e.detail.item;
@@ -290,7 +302,7 @@ let Search = class Search extends SearchField {
     _handleOpen() {
         this.fireDecoratorEvent("open");
     }
-    _handleMore() {
+    _onFooterButtonClick() {
         this.fireDecoratorEvent("popup-action-press");
     }
     _getFirstMatchingItem(current) {
@@ -315,6 +327,9 @@ let Search = class Search extends SearchField {
     _getItemsList() {
         return this._getPicker().querySelector(".ui5-search-list");
     }
+    _getFooterButton() {
+        return this._getPicker().querySelector(".ui5-search-footer-button");
+    }
     get _flattenItems() {
         return this.getSlottedNodes("items").flatMap(item => {
             return this._isGroupItem(item) ? [item, ...item.items] : [item];
@@ -333,8 +348,8 @@ let Search = class Search extends SearchField {
     get _showHeader() {
         return !!this.headerText;
     }
-    get _effectiveGrowing() {
-        return this.showPopupAction ? ListGrowingMode.Button : ListGrowingMode.None;
+    get _showFooter() {
+        return !!this.showPopupAction && this.popupMode === SearchPopupMode.List;
     }
 };
 __decorate([

package/dist/Search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Search.js","sourceRoot":"","sources":["../src/Search.ts"],"names":[],"mappings":"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","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport SearchPopupMode from \"@ui5/webcomponents/dist/types/SearchPopupMode.js\";\nimport type Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport type List from \"@ui5/webcomponents/dist/List.js\";\nimport {\n\tisUp,\n\tisDown,\n\tisEnter,\n\tisBackSpace,\n\tisDelete,\n\tisEscape,\n\tisTabNext,\n\tisPageUp,\n\tisPageDown,\n\tisHome,\n\tisEnd,\n\tisRight,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\n\nimport SearchTemplate from \"./SearchTemplate.js\";\nimport SearchCss from \"./generated/themes/Search.css.js\";\nimport SearchField from \"./SearchField.js\";\nimport { StartsWith, StartsWithPerTerm } from \"@ui5/webcomponents/dist/Filters.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type SearchItem from \"./SearchItem.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ListGrowingMode from \"@ui5/webcomponents/dist/types/ListGrowingMode.js\";\n\ninterface ISearchSuggestionItem extends UI5Element {\n\tselected: boolean;\n\theadingText: string;\n\titems?: ISearchSuggestionItem[];\n}\n\ntype SearchEventDetails = {\n\titem?: ISearchSuggestionItem;\n}\n\n/*\n @class\n \n ### Overview\n \n A `ui5-search` is an input with suggestions, used for user search.\n \n The `ui5-search` consists of several elements parts:\n * - Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n * - Input field - for user input value\n * - Clear button - gives the possibility for deleting the entered value\n * - Search button - a primary button for performing search, when the user has entered a search term\n * - Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the `ui5-search` component\n * - Suggestions - a list with available search suggestions\n \n ### ES6 Module Import\n \n `import \"@ui5/webcomponents/fiori/dist/Search.js\";`\n \n @constructor\n * @extends SearchField\n * @public\n * @since 2.9.0\n * @experimental\n /\n@customElement({\n\ttag: \"ui5-search\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchTemplate,\n\tstyles: [\n\t\tSearchField.styles,\n\t\tSearchCss,\n\t],\n})\n\n/\n Fired when load more button is pressed.\n \n @public\n /\n@event(\"popup-action-press\")\n\n/\n Fired when the popup is opened.\n \n @public\n /\n@event(\"open\")\n\n/\n Fired when the popup is closed.\n \n @public\n /\n@event(\"close\")\n\nclass Search extends SearchField {\n\teventDetails!: SearchField[\"eventDetails\"] & {\n\t\tsearch: SearchEventDetails,\n\t\t\"popup-action-press\": void,\n\t\t\"open\": void,\n\t\t\"close\": void,\n\t};\n\t/\n\t Defines the visualisation mode of the search component.\n\t \n\t @default \"List\"\n\t * @public\n\t /\n\t@property()\n\tpopupMode: `${SearchPopupMode}` = \"List\";\n\n\t/\n\t Defines whether the value will be autcompleted to match an item.\n\t * @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tnoTypeahead = false;\n\n\t/\n\t Defines the header text to be placed in the search suggestions popup.\n\t * @public\n\t /\n\t@property()\n\theaderText = \"\";\n\n\t/\n\t Defines the subheader text to be placed in the search suggestions popup.\n\t * @public\n\t /\n\t@property()\n\tsubheaderText = \"\";\n\n\t/\n\t Defines whether the popup footer action button is shown.\n\t * @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tshowPopupAction = false;\n\n\t/\n\t Defines the popup footer action button text.\n\t * @public\n\t /\n\t@property()\n\tpopupActionText = \"\";\n\n\t/\n\t Defines the Search suggestion items.\n\t \n\t @public\n\t /\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<SearchItem>;\n\n\t/\n\t Defines the illustrated message to be shown in the popup.\n\t \n\t @public\n\t /\n\t@slot()\n\tillustration!: HTMLElement;\n\n\t/\n\t Indicates whether the items picker is open.\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/\n\t Defines the inner stored value of the component.\n\t \n\t Note: The property is updated upon typing.\n\t * @default \"\"\n\t * @private\n\t /\n\t@property({ noAttribute: true })\n\t_innerValue = \"\";\n\n\t/\n\t Based on the key pressed, determines if the autocomplete should be performed.\n\t * @private\n\t /\n\t_shouldAutocomplete?: boolean;\n\n\t/\n\t Determines whether a text selection should be performed.\n\t * @private\n\t /\n\t_performTextSelection?: boolean;\n\n\t/\n\t Determines whether the picker should open on user input. In some cases we need to close the picker,\n\t * (press on an item, or pressing Esc), but still focus the input. In this case we need to open the picker on input.\n\t * @private\n\t /\n\t_openPickerOnInput?: boolean;\n\n\t/\n\t Holds the typed value from the user.\n\t * @private\n\t /\n\t_typedInValue: string;\n\n\t/\n\t True if the first matching item is matched by starts with per term, rather than by starts with.\n\t * @private\n\t /\n\t_matchedPerTerm: boolean;\n\n\t/\n\t Holds the currently proposed item which will be selected if the user presses Enter.\n\t * @private\n\t */\n\t_proposedItem?: ISearchSuggestionItem;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// The typed in value.\n\t\tthis._typedInValue = \"\";\n\t\tthis._matchedPerTerm = false;\n\t\tthis._openPickerOnInput = false;\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\n\t\tconst innerInput = this.nativeInput;\n\t\tconst autoCompletedChars = innerInput && (innerInput.selectionEnd! - innerInput.selectionStart!);\n\n\t\t// If there is already a selection the autocomplete has already been performed\n\t\tif (this._shouldAutocomplete && !autoCompletedChars) {\n\t\t\tconst item = this._getFirstMatchingItem(this.value);\n\t\t\tthis._proposedItem = item;\n\n\t\t\tif (item) {\n\t\t\t\tthis._handleTypeAhead(item);\n\t\t\t\tthis._deselectItems();\n\t\t\t\titem.selected = true;\n\t\t\t} else {\n\t\t\t\tthis._typedInValue = this.value;\n\t\t\t}\n\t\t} else {\n\t\t\tthis._typedInValue = this.value;\n\t\t}\n\n\t\tthis._flattenItems.forEach(item => {\n\t\t\t(item as SearchItem).highlightText = this._typedInValue;\n\t\t});\n\n\t\tthis._shouldAutocomplete = false;\n\t}\n\n\tonAfterRendering(): void {\n\t\tconst innerInput = this.nativeInput!;\n\n\t\tif (this._performTextSelection && innerInput.value !== this._innerValue) {\n\t\t\tinnerInput.value = this._innerValue;\n\t\t}\n\n\t\tif (this._performTextSelection && this._typedInValue.length && this.value.length) {\n\t\t\tinnerInput.setSelectionRange(this._typedInValue.length, this.value.length);\n\t\t}\n\n\t\tthis._performTextSelection = false;\n\n\t\tthis.style.setProperty(\"--search_width\", `${this.getBoundingClientRect().width}px`);\n\t}\n\n\t_handleTypeAhead(item: ISearchSuggestionItem) {\n\t\tconst originalValue = item.headingText \|\| \"\";\n\t\tlet displayValue = originalValue;\n\n\t\tif (!originalValue.toLowerCase().startsWith(this.value.toLowerCase())) {\n\t\t\tthis._matchedPerTerm = true;\n\t\t\tdisplayValue = `${this.value} - ${originalValue}`;\n\t\t} else {\n\t\t\tthis._matchedPerTerm = false;\n\t\t}\n\n\t\tthis._typedInValue = this.value;\n\t\tthis._innerValue = displayValue;\n\t\tthis._performTextSelection = true;\n\t\tthis.value = displayValue;\n\t}\n\n\t_startsWithMatchingItems(str: string): Array<ISearchSuggestionItem> {\n\t\treturn StartsWith(str, this._flattenItems.filter(item => !this._isGroupItem(item)), \"headingText\");\n\t}\n\n\t_startsWithPerTermMatchingItems(str: string): Array<ISearchSuggestionItem> {\n\t\treturn StartsWithPerTerm(str, this._flattenItems.filter(item => !this._isGroupItem(item)), \"headingText\");\n\t}\n\n\t_isGroupItem(item: ISearchSuggestionItem) {\n\t\treturn item.hasAttribute(\"ui5-search-item-group\");\n\t}\n\n\t_deselectItems() {\n\t\tthis._flattenItems.forEach(item => {\n\t\t\titem.selected = false;\n\t\t});\n\t}\n\n\tasync _handleDown(e: KeyboardEvent) {\n\t\tif (this.open) {\n\t\t\te.preventDefault();\n\t\t\tawait this._handleArrowDown();\n\t\t}\n\t}\n\n\tasync _handleArrowDown() {\n\t\tconst firstListItem = this._getItemsList()?.getSlottedNodes<ISearchSuggestionItem>(\"items\")[0];\n\t\tconst focusRef = firstListItem && this._isGroupItem(firstListItem) ? firstListItem.getFocusDomRef() : firstListItem;\n\n\t\tif (this.open) {\n\t\t\tthis._deselectItems();\n\t\t\tfirstListItem && focusRef && this._getItemsList()?._itemNavigation.setCurrentItem(focusRef);\n\t\t\tthis.value = this._typedInValue \|\| this.value;\n\t\t\tthis._innerValue = this.value;\n\n\t\t\t// wait item navigation to apply correct tabindex\n\t\t\tawait renderFinished();\n\t\t\tfirstListItem?.focus();\n\t\t}\n\t}\n\n\t_handleRight(e: KeyboardEvent) {\n\t\tif (this._matchedPerTerm) {\n\t\t\te.preventDefault();\n\t\t\tthis.value = this._typedInValue;\n\t\t\tthis._innerValue = this._typedInValue;\n\t\t\tthis._proposedItem = undefined;\n\t\t}\n\t}\n\n\t_handleEnter() {\n\t\tconst prevented = !this.fireDecoratorEvent(\"search\", { item: this._proposedItem });\n\n\t\tif (prevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst innerInput = this.nativeInput!;\n\t\tif (this._matchedPerTerm) {\n\t\t\tthis.value = this._proposedItem?.headingText \|\| this.value;\n\t\t\tthis._innerValue = this.value;\n\t\t\tthis._typedInValue = this.value;\n\t\t\tthis._matchedPerTerm = false;\n\t\t}\n\n\t\tinnerInput.setSelectionRange(this.value.length, this.value.length);\n\t\tthis.open = false;\n\t\tthis._openPickerOnInput = true;\n\t}\n\n\t_handleSearchEvent() {\n\t\tthis.fireDecoratorEvent(\"search\", { item: this._proposedItem });\n\t}\n\n\t_handleEscape() {\n\t\tthis.value = this._typedInValue \|\| this.value;\n\t\tthis._innerValue = this.value;\n\n\t\tthis._openPickerOnInput = true;\n\t}\n\n\t_handleInput(e: InputEvent) {\n\t\tsuper._handleInput(e);\n\n\t\tif (!this._openPickerOnInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.open = true;\n\t\tthis._openPickerOnInput = false;\n\t}\n\n\t_onItemKeydown(e: KeyboardEvent) {\n\t\tconst items = this._getItemsList()?.getSlottedNodes<ISearchSuggestionItem>(\"items\");\n\t\tconst isFirstItemGroup = items[1] === e.target && items[0]?.hasAttribute(\"ui5-li-group\");\n\t\tconst isFirstItem = items[0] === e.target \|\| isFirstItemGroup;\n\t\tconst isArrowUp = isUp(e);\n\n\t\te.preventDefault();\n\n\t\tif (isFirstItem && isArrowUp) {\n\t\t\tthis.nativeInput?.focus();\n\t\t\tthis._shouldAutocomplete = true;\n\t\t}\n\t}\n\n\t_onItemClick(e: CustomEvent) {\n\t\tconst item = e.detail.item as ISearchSuggestionItem;\n\t\tconst prevented = !this.fireDecoratorEvent(\"search\", { item });\n\n\t\tif (prevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = item.headingText;\n\t\tthis._innerValue = this.value;\n\t\tthis._typedInValue = this.value;\n\t\tthis.open = false;\n\t\tthis._openPickerOnInput = true;\n\t\tthis.focus();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\t\tthis._shouldAutocomplete = !this.noTypeahead\n\t\t\t&& !(isBackSpace(e) \|\| isDelete(e) \|\| isEscape(e) \|\| isUp(e) \|\| isDown(e) \|\| isTabNext(e) \|\| isEnter(e) \|\| isPageUp(e) \|\| isPageDown(e) \|\| isHome(e) \|\| isEnd(e) \|\| isEscape(e));\n\n\t\tif (isRight(e)) {\n\t\t\tthis._handleRight(e);\n\t\t}\n\n\t\tif (isDown(e)) {\n\t\t\tthis._handleDown(e);\n\t\t}\n\n\t\tif (isEscape(e)) {\n\t\t\tthis._handleEscape();\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\tsuper._onfocusin();\n\n\t\tif (this._openPickerOnInput) {\n\t\t\treturn;\n\t\t}\n\n\t\t// prevent opening of empty picker on List Mode\n\t\tif (this.popupMode === SearchPopupMode.List && !this.items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.open = true;\n\t}\n\n\t_onfocusout() {\n\t\tsuper._onfocusout();\n\t\tif (this._matchedPerTerm) {\n\t\t\tthis.value = this._typedInValue;\n\t\t\tthis._innerValue = this._typedInValue;\n\t\t}\n\t\tthis._matchedPerTerm = false;\n\t}\n\n\t_onFocusOutSearch() {\n\t\tif (!this.matches(\":focus-within\")) {\n\t\t\tthis.open = false;\n\t\t}\n\t}\n\n\t_handleClose() {\n\t\tthis.open = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\t_handleOpen() {\n\t\tthis.fireDecoratorEvent(\"open\");\n\t}\n\n\t_handleMore() {\n\t\tthis.fireDecoratorEvent(\"popup-action-press\");\n\t}\n\n\t_getFirstMatchingItem(current: string): ISearchSuggestionItem \| undefined {\n\t\tif (!this._flattenItems.length \|\| !current) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst startsWithMatches = this._startsWithMatchingItems(current);\n\t\tconst partialMatches = this._startsWithPerTermMatchingItems(current);\n\n\t\tif (!startsWithMatches.length) {\n\t\t\treturn partialMatches[0] ?? undefined;\n\t\t}\n\n\t\tif (!partialMatches.length) {\n\t\t\treturn startsWithMatches[0];\n\t\t}\n\n\t\treturn this._flattenItems.indexOf(startsWithMatches[0]) <= this._flattenItems.indexOf(partialMatches[0])\n\t\t\t? startsWithMatches[0]\n\t\t\t: partialMatches[0];\n\t}\n\n\t_getPicker() {\n\t\treturn this.shadowRoot!.querySelector<Popover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\t_getItemsList(): List {\n\t\treturn this._getPicker().querySelector(\".ui5-search-list\") as List;\n\t}\n\n\tget _flattenItems(): Array<ISearchSuggestionItem> {\n\t\treturn this.getSlottedNodes<ISearchSuggestionItem>(\"items\").flatMap(item => {\n\t\t\treturn this._isGroupItem(item) ? [item, ...item.items!] : [item];\n\t\t});\n\t}\n\n\tget nativeInput() {\n\t\tconst domRef = this.getDomRef();\n\n\t\treturn domRef ? domRef.querySelector<HTMLInputElement>(`input`) : null;\n\t}\n\n\tget _showIllustration() {\n\t\treturn !!this.illustration && this.popupMode === SearchPopupMode.Illustration;\n\t}\n\n\tget _showLoading() {\n\t\treturn this.popupMode === SearchPopupMode.Loading;\n\t}\n\n\tget _showHeader() {\n\t\treturn !!this.headerText;\n\t}\n\n\tget _effectiveGrowing() {\n\t\treturn this.showPopupAction ? ListGrowingMode.Button : ListGrowingMode.None;\n\t}\n}\n\nSearch.define();\n\nexport default Search;\n"]}
1	+ {"version":3,"file":"Search.js","sourceRoot":"","sources":["../src/Search.ts"],"names":[],"mappings":"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","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport SearchPopupMode from \"@ui5/webcomponents/dist/types/SearchPopupMode.js\";\nimport type Popover from \"@ui5/webcomponents/dist/Popover.js\";\nimport type List from \"@ui5/webcomponents/dist/List.js\";\nimport {\n\tisUp,\n\tisDown,\n\tisEnter,\n\tisBackSpace,\n\tisDelete,\n\tisEscape,\n\tisTabNext,\n\tisPageUp,\n\tisPageDown,\n\tisHome,\n\tisEnd,\n\tisRight,\n\tisTabPrevious,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\n\nimport SearchTemplate from \"./SearchTemplate.js\";\nimport SearchCss from \"./generated/themes/Search.css.js\";\nimport SearchField from \"./SearchField.js\";\nimport { StartsWith, StartsWithPerTerm } from \"@ui5/webcomponents/dist/Filters.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type SearchItem from \"./SearchItem.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type Button from \"@ui5/webcomponents/dist/Button.js\";\n\ninterface ISearchSuggestionItem extends UI5Element {\n\tselected: boolean;\n\theadingText: string;\n\titems?: ISearchSuggestionItem[];\n}\n\ntype SearchEventDetails = {\n\titem?: ISearchSuggestionItem;\n}\n\n/*\n @class\n \n ### Overview\n \n A `ui5-search` is an input with suggestions, used for user search.\n \n The `ui5-search` consists of several elements parts:\n * - Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n * - Input field - for user input value\n * - Clear button - gives the possibility for deleting the entered value\n * - Search button - a primary button for performing search, when the user has entered a search term\n * - Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the `ui5-search` component\n * - Suggestions - a list with available search suggestions\n \n ### ES6 Module Import\n \n `import \"@ui5/webcomponents/fiori/dist/Search.js\";`\n \n @constructor\n * @extends SearchField\n * @public\n * @since 2.9.0\n * @experimental\n /\n@customElement({\n\ttag: \"ui5-search\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchTemplate,\n\tstyles: [\n\t\tSearchField.styles,\n\t\tSearchCss,\n\t],\n})\n\n/\n Fired when load more button is pressed.\n \n @public\n /\n@event(\"popup-action-press\")\n\n/\n Fired when the popup is opened.\n \n @public\n /\n@event(\"open\")\n\n/\n Fired when the popup is closed.\n \n @public\n /\n@event(\"close\")\n\nclass Search extends SearchField {\n\teventDetails!: SearchField[\"eventDetails\"] & {\n\t\tsearch: SearchEventDetails,\n\t\t\"popup-action-press\": void,\n\t\t\"open\": void,\n\t\t\"close\": void,\n\t};\n\t/\n\t Defines the visualisation mode of the search component.\n\t \n\t @default \"List\"\n\t * @public\n\t /\n\t@property()\n\tpopupMode: `${SearchPopupMode}` = \"List\";\n\n\t/\n\t Defines whether the value will be autcompleted to match an item.\n\t * @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tnoTypeahead = false;\n\n\t/\n\t Defines the header text to be placed in the search suggestions popup.\n\t * @public\n\t /\n\t@property()\n\theaderText = \"\";\n\n\t/\n\t Defines the subheader text to be placed in the search suggestions popup.\n\t * @public\n\t /\n\t@property()\n\tsubheaderText = \"\";\n\n\t/\n\t Defines whether the popup footer action button is shown.\n\t * Note: The footer action button is displayed only when the `popupMode` is set to `List`.\n\t * @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tshowPopupAction = false;\n\n\t/\n\t Defines the popup footer action button text.\n\t * @public\n\t /\n\t@property()\n\tpopupActionText = \"\";\n\n\t/\n\t Defines the Search suggestion items.\n\t \n\t @public\n\t /\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<SearchItem>;\n\n\t/\n\t Defines the illustrated message to be shown in the popup.\n\t \n\t @public\n\t /\n\t@slot()\n\tillustration!: HTMLElement;\n\n\t/\n\t Indicates whether the items picker is open.\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/\n\t Defines the inner stored value of the component.\n\t \n\t Note: The property is updated upon typing.\n\t * @default \"\"\n\t * @private\n\t /\n\t@property({ noAttribute: true })\n\t_innerValue = \"\";\n\n\t/\n\t Based on the key pressed, determines if the autocomplete should be performed.\n\t * @private\n\t /\n\t_shouldAutocomplete?: boolean;\n\n\t/\n\t Determines whether a text selection should be performed.\n\t * @private\n\t /\n\t_performTextSelection?: boolean;\n\n\t/\n\t Determines whether the picker should open on user input. In some cases we need to close the picker,\n\t * (press on an item, or pressing Esc), but still focus the input. In this case we need to open the picker on input.\n\t * @private\n\t /\n\t_openPickerOnInput?: boolean;\n\n\t/\n\t Holds the typed value from the user.\n\t * @private\n\t /\n\t_typedInValue: string;\n\n\t/\n\t True if the first matching item is matched by starts with per term, rather than by starts with.\n\t * @private\n\t /\n\t_matchedPerTerm: boolean;\n\n\t/\n\t Holds the currently proposed item which will be selected if the user presses Enter.\n\t * @private\n\t */\n\t_proposedItem?: ISearchSuggestionItem;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\t// The typed in value.\n\t\tthis._typedInValue = \"\";\n\t\tthis._matchedPerTerm = false;\n\t\tthis._openPickerOnInput = false;\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\n\t\tconst innerInput = this.nativeInput;\n\t\tconst autoCompletedChars = innerInput && (innerInput.selectionEnd! - innerInput.selectionStart!);\n\n\t\t// If there is already a selection the autocomplete has already been performed\n\t\tif (this._shouldAutocomplete && !autoCompletedChars) {\n\t\t\tconst item = this._getFirstMatchingItem(this.value);\n\t\t\tthis._proposedItem = item;\n\n\t\t\tif (item) {\n\t\t\t\tthis._handleTypeAhead(item);\n\t\t\t\tthis._deselectItems();\n\t\t\t\titem.selected = true;\n\t\t\t} else {\n\t\t\t\tthis._typedInValue = this.value;\n\t\t\t}\n\t\t} else {\n\t\t\tthis._typedInValue = this.value;\n\t\t}\n\n\t\tthis._flattenItems.forEach(item => {\n\t\t\t(item as SearchItem).highlightText = this._typedInValue;\n\t\t});\n\n\t\tthis._shouldAutocomplete = false;\n\t}\n\n\tonAfterRendering(): void {\n\t\tconst innerInput = this.nativeInput!;\n\n\t\tif (this._performTextSelection && innerInput.value !== this._innerValue) {\n\t\t\tinnerInput.value = this._innerValue;\n\t\t}\n\n\t\tif (this._performTextSelection && this._typedInValue.length && this.value.length) {\n\t\t\tinnerInput.setSelectionRange(this._typedInValue.length, this.value.length);\n\t\t}\n\n\t\tthis._performTextSelection = false;\n\n\t\tthis.style.setProperty(\"--search_width\", `${this.getBoundingClientRect().width}px`);\n\t}\n\n\t_handleTypeAhead(item: ISearchSuggestionItem) {\n\t\tconst originalValue = item.headingText \|\| \"\";\n\t\tlet displayValue = originalValue;\n\n\t\tif (!originalValue.toLowerCase().startsWith(this.value.toLowerCase())) {\n\t\t\tthis._matchedPerTerm = true;\n\t\t\tdisplayValue = `${this.value} - ${originalValue}`;\n\t\t} else {\n\t\t\tthis._matchedPerTerm = false;\n\t\t}\n\n\t\tthis._typedInValue = this.value;\n\t\tthis._innerValue = displayValue;\n\t\tthis._performTextSelection = true;\n\t\tthis.value = displayValue;\n\t}\n\n\t_startsWithMatchingItems(str: string): Array<ISearchSuggestionItem> {\n\t\treturn StartsWith(str, this._flattenItems.filter(item => !this._isGroupItem(item)), \"headingText\");\n\t}\n\n\t_startsWithPerTermMatchingItems(str: string): Array<ISearchSuggestionItem> {\n\t\treturn StartsWithPerTerm(str, this._flattenItems.filter(item => !this._isGroupItem(item)), \"headingText\");\n\t}\n\n\t_isGroupItem(item: ISearchSuggestionItem) {\n\t\treturn item.hasAttribute(\"ui5-search-item-group\");\n\t}\n\n\t_deselectItems() {\n\t\tthis._flattenItems.forEach(item => {\n\t\t\titem.selected = false;\n\t\t});\n\t}\n\n\tasync _handleDown(e: KeyboardEvent) {\n\t\tif (this.open) {\n\t\t\te.preventDefault();\n\t\t\tawait this._handleArrowDown();\n\t\t}\n\t}\n\n\tasync _handleArrowDown() {\n\t\tconst firstListItem = this._getItemsList()?.getSlottedNodes<ISearchSuggestionItem>(\"items\")[0];\n\t\tconst focusRef = firstListItem && this._isGroupItem(firstListItem) ? firstListItem.getFocusDomRef() : firstListItem;\n\n\t\tif (this.open) {\n\t\t\tthis._deselectItems();\n\t\t\tfirstListItem && focusRef && this._getItemsList()?._itemNavigation.setCurrentItem(focusRef);\n\t\t\tthis.value = this._typedInValue \|\| this.value;\n\t\t\tthis._innerValue = this.value;\n\n\t\t\t// wait item navigation to apply correct tabindex\n\t\t\tawait renderFinished();\n\t\t\tfirstListItem?.focus();\n\t\t}\n\t}\n\n\t_handleRight(e: KeyboardEvent) {\n\t\tif (this._matchedPerTerm) {\n\t\t\te.preventDefault();\n\t\t\tthis.value = this._typedInValue;\n\t\t\tthis._innerValue = this._typedInValue;\n\t\t\tthis._proposedItem = undefined;\n\t\t}\n\t}\n\n\t_handleEnter() {\n\t\tconst prevented = !this.fireDecoratorEvent(\"search\", { item: this._proposedItem });\n\n\t\tif (prevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst innerInput = this.nativeInput!;\n\t\tif (this._matchedPerTerm) {\n\t\t\tthis.value = this._proposedItem?.headingText \|\| this.value;\n\t\t\tthis._innerValue = this.value;\n\t\t\tthis._typedInValue = this.value;\n\t\t\tthis._matchedPerTerm = false;\n\t\t}\n\n\t\tinnerInput.setSelectionRange(this.value.length, this.value.length);\n\t\tthis.open = false;\n\t\tthis._openPickerOnInput = true;\n\t}\n\n\t_handleSearchEvent() {\n\t\tthis.fireDecoratorEvent(\"search\", { item: this._proposedItem });\n\t}\n\n\t_handleEscape() {\n\t\tthis.value = this._typedInValue \|\| this.value;\n\t\tthis._innerValue = this.value;\n\n\t\tthis._openPickerOnInput = true;\n\t}\n\n\t_handleInput(e: InputEvent) {\n\t\tsuper._handleInput(e);\n\n\t\tif (!this._openPickerOnInput) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.open = true;\n\t\tthis._openPickerOnInput = false;\n\t}\n\n\t_onFooterButtonKeyDown(e: KeyboardEvent) {\n\t\tif (isUp(e)) {\n\t\t\tthis._flattenItems[this._flattenItems.length - 1].focus();\n\t\t}\n\t\tif (isTabPrevious(e)) {\n\t\t\tthis._getItemsList().focus();\n\t\t}\n\t}\n\n\t_onItemKeydown(e: KeyboardEvent) {\n\t\tconst isFirstItem = this._flattenItems[0] === e.target;\n\t\tconst isLastItem = this._flattenItems[this._flattenItems.length - 1] === e.target;\n\t\tconst isArrowUp = isUp(e);\n\t\tconst isArrowDown = isDown(e);\n\t\tconst isTab = isTabNext(e);\n\n\t\te.preventDefault();\n\n\t\tif (isFirstItem && isArrowUp) {\n\t\t\tthis.nativeInput?.focus();\n\t\t\tthis._shouldAutocomplete = true;\n\t\t}\n\n\t\tif ((isLastItem && isArrowDown) \|\| isTab) {\n\t\t\tthis._getFooterButton()?.focus();\n\t\t}\n\t}\n\n\t_onItemClick(e: CustomEvent) {\n\t\tconst item = e.detail.item as ISearchSuggestionItem;\n\t\tconst prevented = !this.fireDecoratorEvent(\"search\", { item });\n\n\t\tif (prevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = item.headingText;\n\t\tthis._innerValue = this.value;\n\t\tthis._typedInValue = this.value;\n\t\tthis.open = false;\n\t\tthis._openPickerOnInput = true;\n\t\tthis.focus();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\t\tthis._shouldAutocomplete = !this.noTypeahead\n\t\t\t&& !(isBackSpace(e) \|\| isDelete(e) \|\| isEscape(e) \|\| isUp(e) \|\| isDown(e) \|\| isTabNext(e) \|\| isEnter(e) \|\| isPageUp(e) \|\| isPageDown(e) \|\| isHome(e) \|\| isEnd(e) \|\| isEscape(e));\n\n\t\tif (isRight(e)) {\n\t\t\tthis._handleRight(e);\n\t\t}\n\n\t\tif (isDown(e)) {\n\t\t\tthis._handleDown(e);\n\t\t}\n\n\t\tif (isEscape(e)) {\n\t\t\tthis._handleEscape();\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\tsuper._onfocusin();\n\n\t\tif (this._openPickerOnInput) {\n\t\t\treturn;\n\t\t}\n\n\t\t// prevent opening of empty picker on List Mode\n\t\tif (this.popupMode === SearchPopupMode.List && !this.items.length) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.open = true;\n\t}\n\n\t_onfocusout() {\n\t\tsuper._onfocusout();\n\t\tif (this._matchedPerTerm) {\n\t\t\tthis.value = this._typedInValue;\n\t\t\tthis._innerValue = this._typedInValue;\n\t\t}\n\t\tthis._matchedPerTerm = false;\n\t}\n\n\t_onFocusOutSearch() {\n\t\tif (!this.matches(\":focus-within\")) {\n\t\t\tthis.open = false;\n\t\t}\n\t}\n\n\t_handleClose() {\n\t\tthis.open = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\t_handleOpen() {\n\t\tthis.fireDecoratorEvent(\"open\");\n\t}\n\n\t_onFooterButtonClick() {\n\t\tthis.fireDecoratorEvent(\"popup-action-press\");\n\t}\n\n\t_getFirstMatchingItem(current: string): ISearchSuggestionItem \| undefined {\n\t\tif (!this._flattenItems.length \|\| !current) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst startsWithMatches = this._startsWithMatchingItems(current);\n\t\tconst partialMatches = this._startsWithPerTermMatchingItems(current);\n\n\t\tif (!startsWithMatches.length) {\n\t\t\treturn partialMatches[0] ?? undefined;\n\t\t}\n\n\t\tif (!partialMatches.length) {\n\t\t\treturn startsWithMatches[0];\n\t\t}\n\n\t\treturn this._flattenItems.indexOf(startsWithMatches[0]) <= this._flattenItems.indexOf(partialMatches[0])\n\t\t\t? startsWithMatches[0]\n\t\t\t: partialMatches[0];\n\t}\n\n\t_getPicker() {\n\t\treturn this.shadowRoot!.querySelector<Popover>(\"[ui5-responsive-popover]\")!;\n\t}\n\n\t_getItemsList(): List {\n\t\treturn this._getPicker().querySelector(\".ui5-search-list\") as List;\n\t}\n\n\t_getFooterButton(): Button {\n\t\treturn this._getPicker().querySelector(\".ui5-search-footer-button\") as Button;\n\t}\n\n\tget _flattenItems(): Array<ISearchSuggestionItem> {\n\t\treturn this.getSlottedNodes<ISearchSuggestionItem>(\"items\").flatMap(item => {\n\t\t\treturn this._isGroupItem(item) ? [item, ...item.items!] : [item];\n\t\t});\n\t}\n\n\tget nativeInput() {\n\t\tconst domRef = this.getDomRef();\n\n\t\treturn domRef ? domRef.querySelector<HTMLInputElement>(`input`) : null;\n\t}\n\n\tget _showIllustration() {\n\t\treturn !!this.illustration && this.popupMode === SearchPopupMode.Illustration;\n\t}\n\n\tget _showLoading() {\n\t\treturn this.popupMode === SearchPopupMode.Loading;\n\t}\n\n\tget _showHeader() {\n\t\treturn !!this.headerText;\n\t}\n\n\tget _showFooter() {\n\t\treturn !!this.showPopupAction && this.popupMode === SearchPopupMode.List;\n\t}\n}\n\nSearch.define();\n\nexport default Search;\n"]}

package/dist/SearchFieldScopeOption.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ import type { ISearchFieldScopeOption } from "./SearchField.js";
  * @implements {ISearchFieldScopeOption}
  * @public
  * @since 2.9.0
+ * @experimental
  */
 declare class SearchFieldScopeOption extends UI5Element implements ISearchFieldScopeOption {
     /**

package/dist/SearchFieldScopeOption.js CHANGED Viewed

@@ -16,6 +16,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  * @implements {ISearchFieldScopeOption}
  * @public
  * @since 2.9.0
+ * @experimental
  */
 let SearchFieldScopeOption = class SearchFieldScopeOption extends UI5Element {
     get stableDomRef() {

package/dist/SearchFieldScopeOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchFieldScopeOption.js","sourceRoot":"","sources":["../src/SearchFieldScopeOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAGpE~~;;;;;;;;;GASG~~;AAEH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAgB9C,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AAZA;IADC,QAAQ,EAAE;oDACG;AAOd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACT;AAdd,sBAAsB;IAD3B,aAAa,CAAC,+BAA+B,CAAC;GACzC,sBAAsB,CAmB3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { ISearchFieldScopeOption } from \"./SearchField.js\";\n\n/*\n @class\n * The `ui5-search-scope-option` represents the options for the scope in `ui5-search`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @implements {ISearchFieldScopeOption}\n * @public\n * @since 2.9.0\n /\n@customElement(\"ui5-search-field-scope-option\")\nclass SearchFieldScopeOption extends UI5Element implements ISearchFieldScopeOption {\n\t/\n\t Defines the text of the component.\n\t * @default \"\"\n\t * @public\n\t /\n\t@property()\n\ttext!: string;\n\n\t/\n\t Indicates whether the item is selected\n\t * @protected\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") \|\| `${this._id}-stable-dom-ref`;\n\t}\n}\n\nSearchFieldScopeOption.define();\n\nexport default SearchFieldScopeOption;\n"]}
1	+ {"version":3,"file":"SearchFieldScopeOption.js","sourceRoot":"","sources":["../src/SearchFieldScopeOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAGpE;;;;;;;;;;GAUG;AAEH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAgB9C,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AAZA;IADC,QAAQ,EAAE;oDACG;AAOd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDACT;AAdd,sBAAsB;IAD3B,aAAa,CAAC,+BAA+B,CAAC;GACzC,sBAAsB,CAmB3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { ISearchFieldScopeOption } from \"./SearchField.js\";\n\n/*\n @class\n * The `ui5-search-scope-option` represents the options for the scope in `ui5-search`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @implements {ISearchFieldScopeOption}\n * @public\n * @since 2.9.0\n * @experimental\n /\n@customElement(\"ui5-search-field-scope-option\")\nclass SearchFieldScopeOption extends UI5Element implements ISearchFieldScopeOption {\n\t/\n\t Defines the text of the component.\n\t * @default \"\"\n\t * @public\n\t /\n\t@property()\n\ttext!: string;\n\n\t/\n\t Indicates whether the item is selected\n\t * @protected\n\t */\n\t@property({ type: Boolean })\n\tselected!: boolean;\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") \|\| `${this._id}-stable-dom-ref`;\n\t}\n}\n\nSearchFieldScopeOption.define();\n\nexport default SearchFieldScopeOption;\n"]}

package/dist/SearchPopoverTemplate.js CHANGED Viewed

@@ -8,12 +8,15 @@ import ListSeparator from "@ui5/webcomponents/dist/types/ListSeparator.js";
 import TitleLevel from "@ui5/webcomponents/dist/types/TitleLevel.js";
 import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
 import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
 export default function SearchPopoverTemplate() {
     return (_jsx(ResponsivePopover, { hideArrow: true, preventFocusRestore: true, preventInitialFocus: true, placement: PopoverPlacement.Bottom, horizontalAlign: PopoverHorizontalAlign.Start, open: this.open, opener: this, onOpen: this._handleOpen, onClose: this._handleClose, class: "ui5-search-popover", children: this._showIllustration ?
             _jsx("slot", { name: "illustration" })
             : (this._showLoading ?
                 _jsx(BusyIndicator, { class: "ui5-search-popover-loading-bi", active: true })
                 : (_jsxs(_Fragment, { children: [this._showHeader &&
-                            (_jsxs("header", { slot: "header", class: "ui5-search-popover-header", children: [_jsx(Title, { size: TitleLevel.H6, children: this.headerText }), _jsx(Text, { class: "ui5-search-popover-subheader", children: _jsx("i", { children: this.subheaderText }) })] })), _jsx("main", { children: _jsx(List, { class: "ui5-search-list", onLoadMore: this._handleMore, separators: ListSeparator.None, growingButtonText: this.popupActionText, growing: this._effectiveGrowing, onKeyDown: this._onItemKeydown, onItemClick: this._onItemClick, children: _jsx("slot", {}) }) })] }))) }));
+                            (_jsxs("header", { slot: "header", class: "ui5-search-popover-header", children: [_jsx(Title, { size: TitleLevel.H6, children: this.headerText }), _jsx(Text, { class: "ui5-search-popover-subheader", children: _jsx("i", { children: this.subheaderText }) })] })), _jsx("main", { children: _jsx(List, { class: "ui5-search-list", separators: ListSeparator.None, onKeyDown: this._onItemKeydown, onItemClick: this._onItemClick, children: _jsx("slot", {}) }) }), this._showFooter &&
+                            _jsx(Button, { slot: "footer", design: ButtonDesign.Transparent, class: "ui5-search-footer-button", onKeyDown: this._onFooterButtonKeyDown, onClick: this._onFooterButtonClick, children: this.popupActionText })] }))) }));
 }
 //# sourceMappingURL=SearchPopoverTemplate.js.map

package/dist/SearchPopoverTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchPopoverTemplate.js","sourceRoot":"","sources":["../src/SearchPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,MAAM,8CAA8C,CAAC;AAE7E,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,aAAa,MAAM,gDAAgD,CAAC;AAC3E,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,sBAAsB,MAAM,yDAAyD,CAAC;AAC7F,OAAO,gBAAgB,MAAM,mDAAmD,CAAC;~~AAEjF~~,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,KAAC,iBAAiB,IACjB,SAAS,EAAE,IAAI,EACf,mBAAmB,EAAE,IAAI,EACzB,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAE,gBAAgB,CAAC,MAAM,EAClC,eAAe,EAAE,sBAAsB,CAAC,KAAK,EAC7C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAC,oBAAoB,YAGzB,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxB,eAAM,IAAI,EAAC,cAAc,GAAQ;YACjC,CAAC,CAAC,CACD,IAAI,CAAC,YAAY,CAAC,CAAC;gBAClB,KAAC,aAAa,IAAC,KAAK,EAAC,+BAA+B,EAAC,MAAM,SAAiB;gBAC5E,CAAC,CAAC,CACD,8BACE,IAAI,CAAC,WAAW;4BAChB,CAAC,kBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,2BAA2B,aACvD,KAAC,KAAK,IAAC,IAAI,EAAE,UAAU,CAAC,EAAE,YAAG,IAAI,CAAC,UAAU,GAAS,EACrD,KAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,YAAC,sBAAI,IAAI,CAAC,aAAa,GAAK,GAAO,IACrE,CAAC,EAGX,yBACC,KAAC,IAAI,IACJ,KAAK,EAAC,iBAAiB,EACvB,UAAU,EAAE,~~IAAI~~,CAAC,~~WAAW~~,~~EAC5B~~,~~UAAU~~,EAAE,~~aAAa~~,CAAC,~~IAAI~~,EAC9B,~~iBAAiB~~,EAAE,IAAI,CAAC,~~eAAe~~,~~EACvC~~,~~OAAO~~,~~EAAE~~,IAAI,CAAC,~~iBAAiB~~,~~EAC/B~~,SAAS,EAAE,IAAI,CAAC,~~cAAc~~,~~EAC9B~~,~~WAAW~~,EAAE,IAAI,CAAC,~~YAAY~~,~~YAC9B~~,~~gBAAa~~,~~GACP~~,~~GACD~~,~~IACL~~,CACH,CACF,GACiB,CACpB,CAAC;AACH,CAAC","sourcesContent":["import ResponsivePopover from \"@ui5/webcomponents/dist/ResponsivePopover.js\";\nimport type Search from \"./Search.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Text from \"@ui5/webcomponents/dist/Text.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport ListSeparator from \"@ui5/webcomponents/dist/types/ListSeparator.js\";\nimport TitleLevel from \"@ui5/webcomponents/dist/types/TitleLevel.js\";\nimport PopoverHorizontalAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport PopoverPlacement from \"@ui5/webcomponents/dist/types/PopoverPlacement.js\";\n\nexport default function SearchPopoverTemplate(this: Search) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\thideArrow={true}\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\tplacement={PopoverPlacement.Bottom}\n\t\t\thorizontalAlign={PopoverHorizontalAlign.Start}\n\t\t\topen={this.open}\n\t\t\topener={this}\n\t\t\tonOpen={this._handleOpen}\n\t\t\tonClose={this._handleClose}\n\t\t\tclass=\"ui5-search-popover\"\n\t\t>\n\n\t\t\t{this._showIllustration ?\n\t\t\t\t<slot name=\"illustration\"></slot>\n\t\t\t\t: (\n\t\t\t\t\tthis._showLoading ?\n\t\t\t\t\t\t<BusyIndicator class=\"ui5-search-popover-loading-bi\" active></BusyIndicator>\n\t\t\t\t\t\t: (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{this._showHeader &&\n\t\t\t\t\t\t\t\t\t(<header slot=\"header\" class=\"ui5-search-popover-header\">\n\t\t\t\t\t\t\t\t\t\t<Title size={TitleLevel.H6}>{this.headerText}</Title>\n\t\t\t\t\t\t\t\t\t\t<Text class=\"ui5-search-popover-subheader\"><i>{this.subheaderText}</i></Text>\n\t\t\t\t\t\t\t\t\t</header>)\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t<main>\n\t\t\t\t\t\t\t\t\t<List\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-search-list\"\n\t\t\t\t\t\t\t\t\t\~~tonLoadMore~~={~~this~~.~~_handleMore~~}\n\t\t\t\t\t\t\t\t\t\~~tseparators~~={~~ListSeparator~~.~~None~~}\n\t\t\t\t\t\t\t\t\t\~~tgrowingButtonText~~={this.~~popupActionText~~}\n\t\t\t\t\t\t\t\t\t\~~tgrowing=~~{this.~~_effectiveGrowing~~}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this.~~_onItemKeydown~~}\n\t\t\t\t\t\t\t\t\t\~~tonItemClick~~={this.~~_onItemClick~~}>\n\t\t\t\t\t\t\t\t\t\t~~<slot></slot>\~~n\t\t\t\t\t\t\t\t\t</~~List~~>\n\t\t\t\t\t\t\t\t~~</main>\~~n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)\n\t\t\t\t)}\n\t\t</ResponsivePopover>\n\t);\n}\n"]}
1	+ {"version":3,"file":"SearchPopoverTemplate.js","sourceRoot":"","sources":["../src/SearchPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,MAAM,8CAA8C,CAAC;AAE7E,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,aAAa,MAAM,gDAAgD,CAAC;AAC3E,OAAO,UAAU,MAAM,6CAA6C,CAAC;AACrE,OAAO,sBAAsB,MAAM,yDAAyD,CAAC;AAC7F,OAAO,gBAAgB,MAAM,mDAAmD,CAAC;AACjF,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,YAAY,MAAM,+CAA+C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,KAAC,iBAAiB,IACjB,SAAS,EAAE,IAAI,EACf,mBAAmB,EAAE,IAAI,EACzB,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAE,gBAAgB,CAAC,MAAM,EAClC,eAAe,EAAE,sBAAsB,CAAC,KAAK,EAC7C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,EACZ,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAC,oBAAoB,YAGzB,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxB,eAAM,IAAI,EAAC,cAAc,GAAQ;YACjC,CAAC,CAAC,CACD,IAAI,CAAC,YAAY,CAAC,CAAC;gBAClB,KAAC,aAAa,IAAC,KAAK,EAAC,+BAA+B,EAAC,MAAM,SAAiB;gBAC5E,CAAC,CAAC,CACD,8BACE,IAAI,CAAC,WAAW;4BAChB,CAAC,kBAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,2BAA2B,aACvD,KAAC,KAAK,IAAC,IAAI,EAAE,UAAU,CAAC,EAAE,YAAG,IAAI,CAAC,UAAU,GAAS,EACrD,KAAC,IAAI,IAAC,KAAK,EAAC,8BAA8B,YAAC,sBAAI,IAAI,CAAC,aAAa,GAAK,GAAO,IACrE,CAAC,EAGX,yBACC,KAAC,IAAI,IACJ,KAAK,EAAC,iBAAiB,EACvB,UAAU,EAAE,aAAa,CAAC,IAAI,EAC9B,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,WAAW,EAAE,IAAI,CAAC,YAAY,YAC9B,gBAAa,GACP,GACD,EAEN,IAAI,CAAC,WAAW;4BAChB,KAAC,MAAM,IACN,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,YAAY,CAAC,WAAW,EAChC,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,sBAAsB,EACtC,OAAO,EAAE,IAAI,CAAC,oBAAoB,YACjC,IAAI,CAAC,eAAe,GACb,IAER,CACH,CACF,GACiB,CACpB,CAAC;AACH,CAAC","sourcesContent":["import ResponsivePopover from \"@ui5/webcomponents/dist/ResponsivePopover.js\";\nimport type Search from \"./Search.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Text from \"@ui5/webcomponents/dist/Text.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport ListSeparator from \"@ui5/webcomponents/dist/types/ListSeparator.js\";\nimport TitleLevel from \"@ui5/webcomponents/dist/types/TitleLevel.js\";\nimport PopoverHorizontalAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport PopoverPlacement from \"@ui5/webcomponents/dist/types/PopoverPlacement.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\n\nexport default function SearchPopoverTemplate(this: Search) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\thideArrow={true}\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\tplacement={PopoverPlacement.Bottom}\n\t\t\thorizontalAlign={PopoverHorizontalAlign.Start}\n\t\t\topen={this.open}\n\t\t\topener={this}\n\t\t\tonOpen={this._handleOpen}\n\t\t\tonClose={this._handleClose}\n\t\t\tclass=\"ui5-search-popover\"\n\t\t>\n\n\t\t\t{this._showIllustration ?\n\t\t\t\t<slot name=\"illustration\"></slot>\n\t\t\t\t: (\n\t\t\t\t\tthis._showLoading ?\n\t\t\t\t\t\t<BusyIndicator class=\"ui5-search-popover-loading-bi\" active></BusyIndicator>\n\t\t\t\t\t\t: (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t{this._showHeader &&\n\t\t\t\t\t\t\t\t\t(<header slot=\"header\" class=\"ui5-search-popover-header\">\n\t\t\t\t\t\t\t\t\t\t<Title size={TitleLevel.H6}>{this.headerText}</Title>\n\t\t\t\t\t\t\t\t\t\t<Text class=\"ui5-search-popover-subheader\"><i>{this.subheaderText}</i></Text>\n\t\t\t\t\t\t\t\t\t</header>)\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t<main>\n\t\t\t\t\t\t\t\t\t<List\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-search-list\"\n\t\t\t\t\t\t\t\t\t\tseparators={ListSeparator.None}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this._onItemKeydown}\n\t\t\t\t\t\t\t\t\t\tonItemClick={this._onItemClick}>\n\t\t\t\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t\t\t\t</List>\n\t\t\t\t\t\t\t\t</main>\n\n\t\t\t\t\t\t\t\t{this._showFooter &&\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tslot=\"footer\"\n\t\t\t\t\t\t\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-search-footer-button\"\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this._onFooterButtonKeyDown}\n\t\t\t\t\t\t\t\t\t\tonClick={this._onFooterButtonClick}>\n\t\t\t\t\t\t\t\t\t\t{this.popupActionText}\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)\n\t\t\t\t)}\n\t\t</ResponsivePopover>\n\t);\n}\n"]}

package/dist/ShellBarItem.d.ts CHANGED Viewed

@@ -57,6 +57,10 @@ declare class ShellBarItem extends UI5Element {
      * - **hasPopup**: Indicates the availability and type of interactive popup element,
      * such as menu or dialog, that can be triggered by the button.
      *
+     * - **controls**: Identifies the element (or elements) whose contents
+     * or presence are controlled by the component.
+     * Accepts a lowercase string value, referencing the ID of the element it controls.
+     *
      * @default {}
      * @public
      * @since 2.9.0

package/dist/ShellBarItem.js CHANGED Viewed

@@ -39,6 +39,10 @@ let ShellBarItem = class ShellBarItem extends UI5Element {
          * - **hasPopup**: Indicates the availability and type of interactive popup element,
          * such as menu or dialog, that can be triggered by the button.
          *
+         * - **controls**: Identifies the element (or elements) whose contents
+         * or presence are controlled by the component.
+         * Accepts a lowercase string value, referencing the ID of the element it controls.
+         *
          * @default {}
          * @public
          * @since 2.9.0

package/dist/ShellBarItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ShellBarItem.js","sourceRoot":"","sources":["../src/ShellBarItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AASrF;;;GAGG;AAEH;;;;;;;;;;;GAWG;AAYH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QA+BC~~;;;;;;;;;;;;;;;WAeG~~;QAGH,4BAAuB,GAAwC,EAAE,CAAC;IAWnE,CAAC;IATA,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;IAED,cAAc,CAAC,CAAa;QAC3B,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACvC,SAAS,EAAG,CAAC,CAAC,MAAsB;SACpC,CAAC,CAAC;IACJ,CAAC;CACD,CAAA;~~AAlDA~~;IADC,QAAQ,EAAE;0CACG;AAUd;IADC,QAAQ,EAAE;0CACG;AASd;IADC,QAAQ,EAAE;2CACI;~~AAoBf~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DACuC;~~AAjD7D~~,YAAY;IAXjB,aAAa,CAAC,mBAAmB,CAAC;IACnC;;;;OAIG;;IACF,KAAK,CAAC,OAAO,EAAE;QACf,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KAChB,CAAC;GAEI,YAAY,~~CA4DjB~~;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base\";\n\ntype ShellBarItemClickEventDetail = {\n\ttargetRef: HTMLElement,\n};\n\ntype ShellBarItemAccessibilityAttributes = Pick<AccessibilityAttributes, \"expanded\" \| \"hasPopup\" \| \"controls\">;\n\n/*\n Interface for components that may be slotted inside `ui5-shellbar` as items\n * @public\n /\n\n/\n @class\n * The `ui5-shellbar-item` represents a custom item, that\n * might be added to the `ui5-shellbar`.\n \n ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n /\n@customElement(\"ui5-shellbar-item\")\n/\n Fired, when the item is pressed.\n * @param {HTMLElement} targetRef DOM ref of the clicked element\n * @public\n /\n@event(\"click\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\nclass ShellBarItem extends UI5Element {\n\teventDetails!: {\n\t\tclick: ShellBarItemClickEventDetail,\n\t}\n\t/\n\t Defines the name of the item's icon.\n\t * @default undefined\n\t * @public\n\t /\n\t@property()\n\ticon?: string;\n\n\t/\n\t Defines the item text.\n \n Note: The text is only displayed inside the overflow popover list view.\n\t * @default undefined\n\t * @public\n\t /\n\t@property()\n\ttext?: string;\n\n\t/\n\t Defines the count displayed in the top-right corner.\n\t * @default undefined\n\t * @since 1.0.0-rc.6\n\t * @public\n\t /\n\t@property()\n\tcount?: string;\n\n\t/\n\t Defines additional accessibility attributes on Shellbar Items.\n\t \n\t The accessibility attributes support the following values:\n\t \n\t - expanded: Indicates whether the button, or another grouping element it controls,\n\t * is currently expanded or collapsed.\n\t * Accepts the following string values: `true` or `false`.\n\t \n\t - hasPopup: Indicates the availability and type of interactive popup element,\n\t * such as menu or dialog, that can be triggered by the button.\n\t \n\t @default {}\n\t * @public\n\t * @since 2.9.0\n\t */\n\n\t@property({ type: Object })\n\taccessibilityAttributes: ShellBarItemAccessibilityAttributes = {};\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") \|\| `${this._id}-stable-dom-ref`;\n\t}\n\n\tfireClickEvent(e: MouseEvent) {\n\t\treturn this.fireDecoratorEvent(\"click\", {\n\t\t\ttargetRef: (e.target as HTMLElement),\n\t\t});\n\t}\n}\n\nShellBarItem.define();\n\nexport default ShellBarItem;\n\nexport type { ShellBarItemClickEventDetail };\nexport type { ShellBarItemAccessibilityAttributes };\n"]}
1	+ {"version":3,"file":"ShellBarItem.js","sourceRoot":"","sources":["../src/ShellBarItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AASrF;;;GAGG;AAEH;;;;;;;;;;;GAWG;AAYH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QA+BC;;;;;;;;;;;;;;;;;;;WAmBG;QAGH,4BAAuB,GAAwC,EAAE,CAAC;IAWnE,CAAC;IATA,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;IAED,cAAc,CAAC,CAAa;QAC3B,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACvC,SAAS,EAAG,CAAC,CAAC,MAAsB;SACpC,CAAC,CAAC;IACJ,CAAC;CACD,CAAA;AAtDA;IADC,QAAQ,EAAE;0CACG;AAUd;IADC,QAAQ,EAAE;0CACG;AASd;IADC,QAAQ,EAAE;2CACI;AAwBf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DACuC;AArD7D,YAAY;IAXjB,aAAa,CAAC,mBAAmB,CAAC;IACnC;;;;OAIG;;IACF,KAAK,CAAC,OAAO,EAAE;QACf,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KAChB,CAAC;GAEI,YAAY,CAgEjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base\";\n\ntype ShellBarItemClickEventDetail = {\n\ttargetRef: HTMLElement,\n};\n\ntype ShellBarItemAccessibilityAttributes = Pick<AccessibilityAttributes, \"expanded\" \| \"hasPopup\" \| \"controls\">;\n\n/*\n Interface for components that may be slotted inside `ui5-shellbar` as items\n * @public\n /\n\n/\n @class\n * The `ui5-shellbar-item` represents a custom item, that\n * might be added to the `ui5-shellbar`.\n \n ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/ShellBarItem.js\";`\n * @constructor\n * @extends UI5Element\n * @abstract\n * @public\n /\n@customElement(\"ui5-shellbar-item\")\n/\n Fired, when the item is pressed.\n * @param {HTMLElement} targetRef DOM ref of the clicked element\n * @public\n /\n@event(\"click\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\nclass ShellBarItem extends UI5Element {\n\teventDetails!: {\n\t\tclick: ShellBarItemClickEventDetail,\n\t}\n\t/\n\t Defines the name of the item's icon.\n\t * @default undefined\n\t * @public\n\t /\n\t@property()\n\ticon?: string;\n\n\t/\n\t Defines the item text.\n \n Note: The text is only displayed inside the overflow popover list view.\n\t * @default undefined\n\t * @public\n\t /\n\t@property()\n\ttext?: string;\n\n\t/\n\t Defines the count displayed in the top-right corner.\n\t * @default undefined\n\t * @since 1.0.0-rc.6\n\t * @public\n\t /\n\t@property()\n\tcount?: string;\n\n\t/\n\t Defines additional accessibility attributes on Shellbar Items.\n\t \n\t The accessibility attributes support the following values:\n\t \n\t - expanded: Indicates whether the button, or another grouping element it controls,\n\t * is currently expanded or collapsed.\n\t * Accepts the following string values: `true` or `false`.\n\t \n\t - hasPopup: Indicates the availability and type of interactive popup element,\n\t * such as menu or dialog, that can be triggered by the button.\n\t \n\t - controls: Identifies the element (or elements) whose contents\n\t * or presence are controlled by the component.\n\t * Accepts a lowercase string value, referencing the ID of the element it controls.\n\t \n\t @default {}\n\t * @public\n\t * @since 2.9.0\n\t */\n\n\t@property({ type: Object })\n\taccessibilityAttributes: ShellBarItemAccessibilityAttributes = {};\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") \|\| `${this._id}-stable-dom-ref`;\n\t}\n\n\tfireClickEvent(e: MouseEvent) {\n\t\treturn this.fireDecoratorEvent(\"click\", {\n\t\t\ttargetRef: (e.target as HTMLElement),\n\t\t});\n\t}\n}\n\nShellBarItem.define();\n\nexport default ShellBarItem;\n\nexport type { ShellBarItemClickEventDetail };\nexport type { ShellBarItemAccessibilityAttributes };\n"]}

package/dist/SideNavigation.d.ts CHANGED Viewed

@@ -87,6 +87,13 @@ declare class SideNavigation extends UI5Element {
      * @default "Decorated"
      */
     design: `${SideNavigationDesign}`;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @default undefined
+     * @public
+     * @since 2.9.0
+     */
+    accessibleName?: string;
     /**
      * Defines the main items of the component.
      *

package/dist/SideNavigation.js CHANGED Viewed

@@ -460,6 +460,9 @@ __decorate([
 __decorate([
     property()
 ], SideNavigation.prototype, "design", void 0);
+__decorate([
+    property()
+], SideNavigation.prototype, "accessibleName", void 0);
 __decorate([
     slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
 ], SideNavigation.prototype, "items", void 0);