npm - @ui5/webcomponents-fiori - Versions diffs - 2.18.0-rc.0 → 2.18.0-rc.2 - Mend

@ui5/webcomponents-fiori 2.18.0-rc.0 → 2.18.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 (254) hide show

package/dist/SearchField.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import type { SelectChangeEventDetail } from "@ui5/webcomponents/dist/Select.js"
  */
 interface ISearchScope extends UI5Element {
     text?: string;
-    selected: boolean;
+    value?: string;
     stableDomRef: string;
 }
 type SearchFieldScopeSelectionChangeDetails = {
@@ -81,6 +81,18 @@ declare class SearchField extends UI5Element {
      * @default undefined
      */
     accessibleDescription?: string;
+    /**
+     * Defines the value of the component:
+     *
+     * Applications are responsible for setting the correct scope value.
+     *
+     * **Note:** If the given value does not match any existing scopes,
+     * no scope will be selected and the SearchField scope component will be displayed as empty.
+     * @public
+     * @default ""
+     * @since 2.18.0
+     */
+    scopeValue?: string;
     /**
      * Defines the component scope options.
      * @public

package/dist/SearchField.js CHANGED Viewed

@@ -111,6 +111,10 @@ let SearchField = SearchField_1 = class SearchField extends UI5Element {
     }
     _handleScopeChange(e) {
         const item = e.detail.selectedOption;
+        // Set the scopeValue property if the selected scope has a value defined
+        if (item.value) {
+            this.scopeValue = item.value;
+        }
         this.fireDecoratorEvent("scope-change", {
             scope: item.scopeOption,
         });
@@ -158,6 +162,9 @@ __decorate([
 __decorate([
     property()
 ], SearchField.prototype, "accessibleDescription", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "scopeValue", void 0);
 __decorate([
     slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })
 ], SearchField.prototype, "scopes", void 0);

package/dist/SearchField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../src/SearchField.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport SearchFieldTemplate from \"./SearchFieldTemplate.js\";\nimport SearchFieldCss from \"./generated/themes/SearchField.css.js\";\nimport type Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { IOption, SelectChangeEventDetail } from \"@ui5/webcomponents/dist/Select.js\";\n\nimport {\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport {\n\tSEARCH_FIELD_SCOPE_SELECT_LABEL,\n\tSEARCH_FIELD_CLEAR_ICON,\n\tSEARCH_FIELD_SEARCH_ICON,\n\tSEARCH_FIELD_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/*\n Interface for components that may be slotted inside a `ui5-search`\n * @public\n /\ninterface ISearchScope extends UI5Element {\n\ttext?: string,\n\tselected: boolean,\n\tstableDomRef: string,\n}\n\ntype SearchFieldScopeSelectionChangeDetails = {\n\tscope: ISearchScope \| undefined;\n}\n\n/\n @class\n \n ### Overview\n \n A `ui5-search-field` is an input field, used for user search.\n \n The `ui5-search-field` 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 \n ### ES6 Module Import\n \n `import \"@ui5/webcomponents-fiori/dist/SearchField.js\";`\n \n @constructor\n * @extends UI5Element\n * @private\n /\n@customElement({\n\ttag: \"ui5-search-field\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchFieldTemplate,\n\tstyles: [\n\t\tSearchFieldCss,\n\t],\n})\n\n/\n Fired when typing in input or clear icon is pressed.\n \n @public\n /\n@event(\"input\", {\n\tbubbles: true,\n})\n\n/\n Fired when the scope has changed.\n * @public\n * @param {HTMLElement} scope The newly selected scope\n /\n@event(\"scope-change\", {\n\tbubbles: true,\n})\n\n/\n Fired when the user has triggered search with Enter key or Search Button press.\n * @public\n /\n@event(\"search\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\nclass SearchField extends UI5Element {\n\teventDetails!: {\n\t\tsearch: object,\n\t\tinput: void,\n\t\t\"scope-change\": SearchFieldScopeSelectionChangeDetails,\n\t}\n\n\t/\n\t Defines whether the clear icon of the search will be shown.\n\t * @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tshowClearIcon = false;\n\n\t/\n\t Defines whether the component is collapsed.\n\t \n\t @default false\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/\n\t Defines the value of the component.\n\t \n\t Note: The property is updated upon typing.\n\t * @default \"\"\n\t * @public\n\t /\n\t@property()\n\tvalue = \"\";\n\n\t/\n\t Defines a short hint intended to aid the user with data entry when the\n\t * component has no value.\n\t * @default undefined\n\t * @public\n\t /\n\t@property()\n\tplaceholder?: string;\n\n\t/\n\t Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t /\n\t@property()\n\taccessibleName?: string;\n\n\t/\n\t Defines the accessible ARIA description of the field.\n\t * @public\n\t * @default undefined\n\t /\n\t@property()\n\taccessibleDescription?: string;\n\n\t/\n\t Defines the component scope options.\n\t * @public\n\t /\n\t@slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })\n\tscopes!: Array<ISearchScope>;\n\n\t/\n\t Defines the filter button slot, used to display an additional filtering button.\n\t * This slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\t \n\t Note: Scope button and Filter button are mutually exclusive.\n\t * @public\n\t * @since 2.11.0\n\t /\n\t@slot()\n\tfilterButton!: Array<Button>;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\tfocusedInnerInput = false;\n\n\t/\n\t @private\n\t */\n\t@property({ type: Boolean })\n\t_effectiveShowClearIcon = false;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis._effectiveShowClearIcon = (this.showClearIcon && !!this.value);\n\t}\n\n\t_onkeydown(e:KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\treturn this._handleEnter();\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\tthis.focusedInnerInput = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.focusedInnerInput = false;\n\t}\n\n\t_onFocusOutSearch(e: FocusEvent) {} // eslint-disable-line\n\n\t_handleEnter() {\n\t\tif (this.value.length) {\n\t\t\tthis._handleSearchEvent();\n\t\t}\n\t}\n\n\t_handleInnerClick() {} // eslint-disable-line\n\n\t_handleSearchIconPress() {\n\t\tthis._handleSearchEvent();\n\n\t\tsetTimeout(() => {\n\t\t\tthis.focus();\n\t\t}, 0);\n\t}\n\n\t_handleSearchEvent() {\n\t\tthis.fireDecoratorEvent(\"search\");\n\t}\n\n\t_handleInput(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLInputElement).value;\n\n\t\tthis.fireDecoratorEvent(\"input\");\n\t}\n\n\t_handleClear() {\n\t\tthis.value = \"\";\n\t\tthis.fireDecoratorEvent(\"input\");\n\n\t\tthis.focus();\n\t}\n\n\t_handleScopeChange(e: CustomEvent<SelectChangeEventDetail>) {\n\t\tconst item = e.detail.selectedOption as IOption & { scopeOption: ISearchScope };\n\t\tthis.fireDecoratorEvent(\"scope-change\", {\n\t\t\tscope: item.scopeOption,\n\t\t});\n\t}\n\n\tget _isSearchIcon() {\n\t\treturn this.value.length && this.focusedInnerInput;\n\t}\n\n\tget _searchButtonAccessibilityAttributes() {\n\t\treturn {\n\t\t\texpanded: !this.collapsed,\n\t\t};\n\t}\n\n\tget _translations() {\n\t\treturn {\n\t\t\tscope: SearchField.i18nBundle.getText(SEARCH_FIELD_SCOPE_SELECT_LABEL),\n\t\t\tsearchIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON),\n\t\t\tclearIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_CLEAR_ICON),\n\t\t\tsearchFieldAriaLabel: SearchField.i18nBundle.getText(SEARCH_FIELD_LABEL),\n\t\t};\n\t}\n\n\tget _effectiveIconTooltip() {\n\t\treturn this._translations.searchIcon;\n\t}\n\n\tcaptureRef(ref: HTMLElement & { scopeOption?: UI5Element} \| null) {\n\t\tif (ref) {\n\t\t\tref.scopeOption = this;\n\t\t}\n\t}\n}\n\nSearchField.define();\n\nexport default SearchField;\n\nexport type { ISearchScope, SearchFieldScopeSelectionChangeDetails };\n"]}
1	+ {"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../src/SearchField.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport SearchFieldTemplate from \"./SearchFieldTemplate.js\";\nimport SearchFieldCss from \"./generated/themes/SearchField.css.js\";\nimport type Button from \"@ui5/webcomponents/dist/Button.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { IOption, SelectChangeEventDetail } from \"@ui5/webcomponents/dist/Select.js\";\n\nimport {\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport {\n\tSEARCH_FIELD_SCOPE_SELECT_LABEL,\n\tSEARCH_FIELD_CLEAR_ICON,\n\tSEARCH_FIELD_SEARCH_ICON,\n\tSEARCH_FIELD_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/*\n Interface for components that may be slotted inside a `ui5-search`\n * @public\n /\ninterface ISearchScope extends UI5Element {\n\ttext?: string,\n\tvalue?: string,\n\tstableDomRef: string,\n}\n\ntype SearchFieldScopeSelectionChangeDetails = {\n\tscope: ISearchScope \| undefined;\n}\n\n/\n @class\n \n ### Overview\n \n A `ui5-search-field` is an input field, used for user search.\n \n The `ui5-search-field` 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 \n ### ES6 Module Import\n \n `import \"@ui5/webcomponents-fiori/dist/SearchField.js\";`\n \n @constructor\n * @extends UI5Element\n * @private\n /\n@customElement({\n\ttag: \"ui5-search-field\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\ttemplate: SearchFieldTemplate,\n\tstyles: [\n\t\tSearchFieldCss,\n\t],\n})\n\n/\n Fired when typing in input or clear icon is pressed.\n \n @public\n /\n@event(\"input\", {\n\tbubbles: true,\n})\n\n/\n Fired when the scope has changed.\n * @public\n * @param {HTMLElement} scope The newly selected scope\n /\n@event(\"scope-change\", {\n\tbubbles: true,\n})\n\n/\n Fired when the user has triggered search with Enter key or Search Button press.\n * @public\n /\n@event(\"search\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\nclass SearchField extends UI5Element {\n\teventDetails!: {\n\t\tsearch: object,\n\t\tinput: void,\n\t\t\"scope-change\": SearchFieldScopeSelectionChangeDetails,\n\t}\n\n\t/\n\t Defines whether the clear icon of the search will be shown.\n\t * @default false\n\t * @public\n\t /\n\t@property({ type: Boolean })\n\tshowClearIcon = false;\n\n\t/\n\t Defines whether the component is collapsed.\n\t \n\t @default false\n\t * @private\n\t /\n\t@property({ type: Boolean })\n\tcollapsed = false;\n\n\t/\n\t Defines the value of the component.\n\t \n\t Note: The property is updated upon typing.\n\t * @default \"\"\n\t * @public\n\t /\n\t@property()\n\tvalue = \"\";\n\n\t/\n\t Defines a short hint intended to aid the user with data entry when the\n\t * component has no value.\n\t * @default undefined\n\t * @public\n\t /\n\t@property()\n\tplaceholder?: string;\n\n\t/\n\t Defines the accessible ARIA name of the component.\n\t * @public\n\t * @default undefined\n\t /\n\t@property()\n\taccessibleName?: string;\n\n\t/\n\t Defines the accessible ARIA description of the field.\n\t * @public\n\t * @default undefined\n\t /\n\t@property()\n\taccessibleDescription?: string;\n\n\t/\n\t Defines the value of the component:\n\t \n\t Applications are responsible for setting the correct scope value.\n\t \n\t Note: If the given value does not match any existing scopes,\n\t * no scope will be selected and the SearchField scope component will be displayed as empty.\n\t * @public\n\t * @default \"\"\n\t * @since 2.18.0\n\t /\n\t@property()\n\tscopeValue?: string;\n\n\t/\n\t Defines the component scope options.\n\t * @public\n\t /\n\t@slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })\n\tscopes!: Array<ISearchScope>;\n\n\t/\n\t Defines the filter button slot, used to display an additional filtering button.\n\t * This slot is intended for passing a `ui5-button` with a filter icon to provide extended filtering options.\n\t \n\t Note: Scope button and Filter button are mutually exclusive.\n\t * @public\n\t * @since 2.11.0\n\t /\n\t@slot()\n\tfilterButton!: Array<Button>;\n\n\t/\n\t @private\n\t /\n\t@property({ type: Boolean })\n\tfocusedInnerInput = false;\n\n\t/\n\t @private\n\t */\n\t@property({ type: Boolean })\n\t_effectiveShowClearIcon = false;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\tonBeforeRendering() {\n\t\tthis._effectiveShowClearIcon = (this.showClearIcon && !!this.value);\n\t}\n\n\t_onkeydown(e:KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\treturn this._handleEnter();\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\tthis.focusedInnerInput = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.focusedInnerInput = false;\n\t}\n\n\t_onFocusOutSearch(e: FocusEvent) {} // eslint-disable-line\n\n\t_handleEnter() {\n\t\tif (this.value.length) {\n\t\t\tthis._handleSearchEvent();\n\t\t}\n\t}\n\n\t_handleInnerClick() {} // eslint-disable-line\n\n\t_handleSearchIconPress() {\n\t\tthis._handleSearchEvent();\n\n\t\tsetTimeout(() => {\n\t\t\tthis.focus();\n\t\t}, 0);\n\t}\n\n\t_handleSearchEvent() {\n\t\tthis.fireDecoratorEvent(\"search\");\n\t}\n\n\t_handleInput(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLInputElement).value;\n\n\t\tthis.fireDecoratorEvent(\"input\");\n\t}\n\n\t_handleClear() {\n\t\tthis.value = \"\";\n\t\tthis.fireDecoratorEvent(\"input\");\n\n\t\tthis.focus();\n\t}\n\n\t_handleScopeChange(e: CustomEvent<SelectChangeEventDetail>) {\n\t\tconst item = e.detail.selectedOption as IOption & { scopeOption: ISearchScope };\n\n\t\t// Set the scopeValue property if the selected scope has a value defined\n\t\tif (item.value) {\n\t\t\tthis.scopeValue = item.value;\n\t\t}\n\n\t\tthis.fireDecoratorEvent(\"scope-change\", {\n\t\t\tscope: item.scopeOption,\n\t\t});\n\t}\n\n\tget _isSearchIcon() {\n\t\treturn this.value.length && this.focusedInnerInput;\n\t}\n\n\tget _searchButtonAccessibilityAttributes() {\n\t\treturn {\n\t\t\texpanded: !this.collapsed,\n\t\t};\n\t}\n\n\tget _translations() {\n\t\treturn {\n\t\t\tscope: SearchField.i18nBundle.getText(SEARCH_FIELD_SCOPE_SELECT_LABEL),\n\t\t\tsearchIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON),\n\t\t\tclearIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_CLEAR_ICON),\n\t\t\tsearchFieldAriaLabel: SearchField.i18nBundle.getText(SEARCH_FIELD_LABEL),\n\t\t};\n\t}\n\n\tget _effectiveIconTooltip() {\n\t\treturn this._translations.searchIcon;\n\t}\n\n\tcaptureRef(ref: HTMLElement & { scopeOption?: UI5Element} \| null) {\n\t\tif (ref) {\n\t\t\tref.scopeOption = this;\n\t\t}\n\t}\n}\n\nSearchField.define();\n\nexport default SearchField;\n\nexport type { ISearchScope, SearchFieldScopeSelectionChangeDetails };\n"]}

package/dist/SearchFieldTemplate.js CHANGED Viewed

@@ -7,7 +7,7 @@ import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import search from "@ui5/webcomponents-icons/dist/search.js";
 import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
 export default function SearchFieldTemplate(options) {
-    return (!options?.forceExpanded && this.collapsed ? (_jsx(Button, { class: "ui5-shell-search-field-button", icon: search, design: ButtonDesign.Transparent, "data-sap-focus-ref": true, onClick: this._handleSearchIconPress, tooltip: this._effectiveIconTooltip, accessibleName: this._effectiveIconTooltip, accessibilityAttributes: this._searchButtonAccessibilityAttributes })) : (_jsx("div", { class: "ui5-search-field-root", role: "search", onFocusOut: this._onFocusOutSearch, children: _jsxs("div", { class: "ui5-search-field-content", children: [this.scopes?.length ? (_jsxs(_Fragment, { children: [_jsx(Select, { onChange: this._handleScopeChange, class: "sapUiSizeCompact ui5-search-field-select", accessibleName: this._translations.scope, tooltip: this._translations.scope, children: this.scopes.map(scopeOption => (_jsx(Option, { selected: scopeOption.selected, "data-ui5-stable": scopeOption.stableDomRef, ref: this.captureRef.bind(scopeOption), children: scopeOption.text }))) }), _jsx("div", { class: "ui5-search-field-separator" })] })) : this.filterButton?.length ? (_jsxs(_Fragment, { children: [_jsx("div", { class: "ui5-filter-wrapper", style: "display: contents", children: _jsx("slot", { name: "filterButton" }) }), _jsx("div", { class: "ui5-search-field-separator" })] })) : null, _jsx("input", { class: "ui5-search-field-inner-input", role: "searchbox", "aria-description": this.accessibleDescription, "aria-label": this.accessibleName || this._translations.searchFieldAriaLabel, value: this.value, placeholder: this.placeholder, "data-sap-focus-ref": true, onInput: this._handleInput, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyDown: this._onkeydown, onClick: this._handleInnerClick }), this._effectiveShowClearIcon &&
+    return (!options?.forceExpanded && this.collapsed ? (_jsx(Button, { class: "ui5-shell-search-field-button", icon: search, design: ButtonDesign.Transparent, "data-sap-focus-ref": true, onClick: this._handleSearchIconPress, tooltip: this._effectiveIconTooltip, accessibleName: this._effectiveIconTooltip, accessibilityAttributes: this._searchButtonAccessibilityAttributes })) : (_jsx("div", { class: "ui5-search-field-root", role: "search", onFocusOut: this._onFocusOutSearch, children: _jsxs("div", { class: "ui5-search-field-content", children: [this.scopes?.length ? (_jsxs(_Fragment, { children: [_jsx(Select, { onChange: this._handleScopeChange, class: "sapUiSizeCompact ui5-search-field-select", accessibleName: this._translations.scope, tooltip: this._translations.scope, value: this.scopeValue, children: this.scopes.map(scopeOption => (_jsx(Option, { value: scopeOption.value, "data-ui5-stable": scopeOption.stableDomRef, ref: this.captureRef.bind(scopeOption), children: scopeOption.text }))) }), _jsx("div", { class: "ui5-search-field-separator" })] })) : this.filterButton?.length ? (_jsxs(_Fragment, { children: [_jsx("div", { class: "ui5-filter-wrapper", style: "display: contents", children: _jsx("slot", { name: "filterButton" }) }), _jsx("div", { class: "ui5-search-field-separator" })] })) : null, _jsx("input", { class: "ui5-search-field-inner-input", role: "searchbox", "aria-description": this.accessibleDescription, "aria-label": this.accessibleName || this._translations.searchFieldAriaLabel, "aria-autocomplete": "both", "aria-controls": "ui5-search-list", value: this.value, placeholder: this.placeholder, "data-sap-focus-ref": true, onInput: this._handleInput, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyDown: this._onkeydown, onClick: this._handleInnerClick }), this._effectiveShowClearIcon &&
                     _jsx(Icon, { class: "ui5-shell-search-field-icon", name: decline, showTooltip: true, accessibleName: this._translations.clearIcon, onClick: this._handleClear }), _jsx(Icon, { class: {
                         "ui5-shell-search-field-icon": true,
                         "ui5-shell-search-field-search-icon": this._isSearchIcon,

package/dist/SearchFieldTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchFieldTemplate.js","sourceRoot":"","sources":["../src/SearchFieldTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AAEvD,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,MAAM,MAAM,yCAAyC,CAAC;AAC7D,OAAO,YAAY,MAAM,+CAA+C,CAAC;AASzE,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAoB,OAAoC;IAClG,OAAO,CACN,CAAC,OAAO,EAAE,aAAa,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAC3C,KAAC,MAAM,IACN,KAAK,EAAC,+BAA+B,EACrC,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,YAAY,CAAC,WAAW,8BAEhC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAC1C,uBAAuB,EAAE,IAAI,CAAC,oCAAoC,GACzD,CACV,CAAC,CAAC,CAAC,CACH,cAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,YAClF,eAAK,KAAK,EAAC,0BAA0B,aACnC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CACtB,8BACC,KAAC,MAAM,IACN,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,KAAK,EAAC,0CAA0C,EAChD,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EACxC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,~~YAChC~~,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC,CAC/B,KAAC,MAAM,IACN,~~QAAQ~~,EAAE,WAAW,CAAC,~~QAAQ~~,~~qBACb~~,WAAW,CAAC,YAAY,EACzC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,YACrC,WAAW,CAAC,IAAI,GACT,CACT,CAAC,GACM,EACT,cAAK,KAAK,EAAC,4BAA4B,GAAO,IAC5C,CACH,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,CAC/B,8BACC,cAAK,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAC,mBAAmB,YACxD,eAAM,IAAI,EAAC,cAAc,GAAQ,GAC5B,EACN,cAAK,KAAK,EAAC,4BAA4B,GAAO,IAC5C,CACH,CAAC,CAAC,CAAC,IAAI,EAER,gBACC,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,qBAAqB,gBAChC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,CAAC,oBAAoB,~~EAC1E~~,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,8BAE7B,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAAI,EAEnC,IAAI,CAAC,uBAAuB;oBAC5B,KAAC,IAAI,IACJ,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAE,OAAO,EACb,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,SAAS,EAC5C,OAAO,EAAE,IAAI,CAAC,YAAY,GACnB,EAGT,KAAC,IAAI,IACJ,KAAK,EAAE;wBACN,6BAA6B,EAAE,IAAI;wBACnC,oCAAoC,EAAE,IAAI,CAAC,aAAa;qBACxD,EACD,IAAI,EAAE,MAAM,EACZ,WAAW,EAAE,IAAI,EACjB,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAC1C,OAAO,EAAE,IAAI,CAAC,sBAAsB,GAC7B,IACH,GACD,CACN,CACD,CAAC;AACH,CAAC","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Option from \"@ui5/webcomponents/dist/Option.js\";\nimport Select from \"@ui5/webcomponents/dist/Select.js\";\nimport type SearchField from \"./SearchField.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport search from \"@ui5/webcomponents-icons/dist/search.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\n\nexport type SearchFieldTemplateOptions = {\n\t/*\n\t If set to true, the search field will be expanded.\n\t */\n\tforceExpanded?: boolean;\n};\n\nexport default function SearchFieldTemplate(this: SearchField, options?: SearchFieldTemplateOptions) {\n\treturn (\n\t\t!options?.forceExpanded && this.collapsed ? (\n\t\t\t<Button\n\t\t\t\tclass=\"ui5-shell-search-field-button\"\n\t\t\t\ticon={search}\n\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\tonClick={this._handleSearchIconPress}\n\t\t\t\ttooltip={this._effectiveIconTooltip}\n\t\t\t\taccessibleName={this._effectiveIconTooltip}\n\t\t\t\taccessibilityAttributes={this._searchButtonAccessibilityAttributes}\n\t\t\t></Button>\n\t\t) : (\n\t\t\t<div class=\"ui5-search-field-root\" role=\"search\" onFocusOut={this._onFocusOutSearch}>\n\t\t\t\t<div class=\"ui5-search-field-content\">\n\t\t\t\t\t{this.scopes?.length ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\tonChange={this._handleScopeChange}\n\t\t\t\t\t\t\t\tclass=\"sapUiSizeCompact ui5-search-field-select\"\n\t\t\t\t\t\t\t\taccessibleName={this._translations.scope}\n\t\t\t\t\t\t\t\ttooltip={this._translations.scope}>\n\t\t\t\t\t\t\t\t{this.scopes.map(scopeOption => (\n\t\t\t\t\t\t\t\t\t<Option\n\t\t\t\t\t\t\t\t\t\~~tselected~~={scopeOption.~~selected~~}\n\t\t\t\t\t\t\t\t\t\tdata-ui5-stable={scopeOption.stableDomRef}\n\t\t\t\t\t\t\t\t\t\tref={this.captureRef.bind(scopeOption)}\n\t\t\t\t\t\t\t\t\t>{scopeOption.text}\n\t\t\t\t\t\t\t\t\t</Option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t<div class=\"ui5-search-field-separator\"></div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : this.filterButton?.length ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<div class=\"ui5-filter-wrapper\" style=\"display: contents\">\n\t\t\t\t\t\t\t\t<slot name=\"filterButton\"></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"ui5-search-field-separator\"></div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : null}\n\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"ui5-search-field-inner-input\"\n\t\t\t\t\t\trole=\"searchbox\"\n\t\t\t\t\t\taria-description={this.accessibleDescription}\n\t\t\t\t\t\taria-label={this.accessibleName \|\| this._translations.searchFieldAriaLabel}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\t\tonInput={this._handleInput}\n\t\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\t\tonClick={this._handleInnerClick} />\n\n\t\t\t\t\t{this._effectiveShowClearIcon &&\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclass=\"ui5-shell-search-field-icon\"\n\t\t\t\t\t\t\tname={decline}\n\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\taccessibleName={this._translations.clearIcon}\n\t\t\t\t\t\t\tonClick={this._handleClear}\n\t\t\t\t\t\t></Icon>\n\t\t\t\t\t}\n\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-shell-search-field-icon\": true,\n\t\t\t\t\t\t\t\"ui5-shell-search-field-search-icon\": this._isSearchIcon,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tname={search}\n\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\taccessibleName={this._effectiveIconTooltip}\n\t\t\t\t\t\tonClick={this._handleSearchIconPress}\n\t\t\t\t\t></Icon>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t);\n}\n"]}
1	+ {"version":3,"file":"SearchFieldTemplate.js","sourceRoot":"","sources":["../src/SearchFieldTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Button from \"@ui5/webcomponents/dist/Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport Option from \"@ui5/webcomponents/dist/Option.js\";\nimport Select from \"@ui5/webcomponents/dist/Select.js\";\nimport type SearchField from \"./SearchField.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport search from \"@ui5/webcomponents-icons/dist/search.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\n\nexport type SearchFieldTemplateOptions = {\n\t/*\n\t If set to true, the search field will be expanded.\n\t */\n\tforceExpanded?: boolean;\n};\n\nexport default function SearchFieldTemplate(this: SearchField, options?: SearchFieldTemplateOptions) {\n\treturn (\n\t\t!options?.forceExpanded && this.collapsed ? (\n\t\t\t<Button\n\t\t\t\tclass=\"ui5-shell-search-field-button\"\n\t\t\t\ticon={search}\n\t\t\t\tdesign={ButtonDesign.Transparent}\n\t\t\t\tdata-sap-focus-ref\n\t\t\t\tonClick={this._handleSearchIconPress}\n\t\t\t\ttooltip={this._effectiveIconTooltip}\n\t\t\t\taccessibleName={this._effectiveIconTooltip}\n\t\t\t\taccessibilityAttributes={this._searchButtonAccessibilityAttributes}\n\t\t\t></Button>\n\t\t) : (\n\t\t\t<div class=\"ui5-search-field-root\" role=\"search\" onFocusOut={this._onFocusOutSearch}>\n\t\t\t\t<div class=\"ui5-search-field-content\">\n\t\t\t\t\t{this.scopes?.length ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\tonChange={this._handleScopeChange}\n\t\t\t\t\t\t\t\tclass=\"sapUiSizeCompact ui5-search-field-select\"\n\t\t\t\t\t\t\t\taccessibleName={this._translations.scope}\n\t\t\t\t\t\t\t\ttooltip={this._translations.scope}\n\t\t\t\t\t\t\t\tvalue={this.scopeValue}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.scopes.map(scopeOption => (\n\t\t\t\t\t\t\t\t\t<Option\n\t\t\t\t\t\t\t\t\t\tvalue={scopeOption.value}\n\t\t\t\t\t\t\t\t\t\tdata-ui5-stable={scopeOption.stableDomRef}\n\t\t\t\t\t\t\t\t\t\tref={this.captureRef.bind(scopeOption)}\n\t\t\t\t\t\t\t\t\t>{scopeOption.text}\n\t\t\t\t\t\t\t\t\t</Option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t<div class=\"ui5-search-field-separator\"></div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : this.filterButton?.length ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<div class=\"ui5-filter-wrapper\" style=\"display: contents\">\n\t\t\t\t\t\t\t\t<slot name=\"filterButton\"></slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"ui5-search-field-separator\"></div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : null}\n\n\t\t\t\t\t<input\n\t\t\t\t\t\tclass=\"ui5-search-field-inner-input\"\n\t\t\t\t\t\trole=\"searchbox\"\n\t\t\t\t\t\taria-description={this.accessibleDescription}\n\t\t\t\t\t\taria-label={this.accessibleName \|\| this._translations.searchFieldAriaLabel}\n\t\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\t\taria-controls=\"ui5-search-list\"\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\t\tonInput={this._handleInput}\n\t\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\t\tonClick={this._handleInnerClick} />\n\n\t\t\t\t\t{this._effectiveShowClearIcon &&\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclass=\"ui5-shell-search-field-icon\"\n\t\t\t\t\t\t\tname={decline}\n\t\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\t\taccessibleName={this._translations.clearIcon}\n\t\t\t\t\t\t\tonClick={this._handleClear}\n\t\t\t\t\t\t></Icon>\n\t\t\t\t\t}\n\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-shell-search-field-icon\": true,\n\t\t\t\t\t\t\t\"ui5-shell-search-field-search-icon\": this._isSearchIcon,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tname={search}\n\t\t\t\t\t\tshowTooltip={true}\n\t\t\t\t\t\taccessibleName={this._effectiveIconTooltip}\n\t\t\t\t\t\tonClick={this._handleSearchIconPress}\n\t\t\t\t\t></Icon>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t)\n\t);\n}\n"]}

package/dist/SearchItem.js CHANGED Viewed

@@ -14,7 +14,7 @@ import SearchItemCss from "./generated/themes/SearchItem.css.js";
 import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-import { SEARCH_ITEM_DELETE_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import { SEARCH_ITEM_DELETE_BUTTON_TOOLTIP, } from "./generated/i18n/i18n-defaults.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
@@ -156,7 +156,7 @@ let SearchItem = SearchItem_1 = class SearchItem extends ListItemBase {
         this._markupText = this.highlightText ? generateHighlightedMarkup((this.text || ""), this.highlightText) : encodeXML(this.text || "");
     }
     get _deleteButtonTooltip() {
-        return SearchItem_1.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON);
+        return SearchItem_1.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON_TOOLTIP);
     }
     get hasActions() {
         return !!this.actions.length;

package/dist/SearchItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchItem.js","sourceRoot":"","sources":["../src/SearchItem.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 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\";\nimport { SEARCH_ITEM_DELETE_BUTTON } from \"./generated/i18n/i18n-defaults.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport { getFirstFocusableElement } from \"@ui5/webcomponents-base/dist/util/FocusableElements.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport {\n\tisSpace,\n\tisEnter,\n\tisF2,\n\tisTabNext,\n\tisTabPrevious,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n// @ts-expect-error\nimport encodeXML from \"@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js\";\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/\n\t Defines the actionable elements.\n\t * This slot allows placing additional interactive elements (such as buttons, icons, or tags)\n\t * next to the delete button, providing flexible customization for various user actions.\n\t \n\t Note: While the slot is flexible, for consistency with design guidelines,\n\t * it's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.\n\t \n\t @public\n\t * @since 2.16.0\n\t /\n\t@slot()\n\tactions!: Array<HTMLElement>;\n\n\t_markupText = \"\";\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\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\tasync _onkeydown(e: KeyboardEvent) {\n\t\t// Handle manual tab navigation between action items\n\t\tif (isTabNext(e) \|\| isTabPrevious(e)) {\n\t\t\tconst handled = this._handleTabNavigation(e);\n\t\t\tif (handled) {\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Call super for other key handling\n\t\tsuper._onkeydown(e);\n\n\t\t// Handle space/enter when focus is within action items\n\t\tif (this.getFocusDomRef()!.matches(\":has(:focus-within)\")) {\n\t\t\tif (isSpace(e) \|\| isEnter(e)) {\n\t\t\t\te.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Handle F2 for focus navigation\n\t\tif (isF2(e)) {\n\t\t\te.stopImmediatePropagation();\n\t\t\tconst activeElement = getActiveElement();\n\t\t\tconst focusDomRef = this.getFocusDomRef();\n\n\t\t\tif (!focusDomRef) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (activeElement === focusDomRef) {\n\t\t\t\tconst firstFocusable = await getFirstFocusableElement(focusDomRef);\n\t\t\t\tfirstFocusable?.focus();\n\t\t\t} else {\n\t\t\t\tfocusDomRef.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Handles manual tab navigation between action items and delete button with focus looping\n\t */\n\t_handleTabNavigation(e: KeyboardEvent): boolean {\n\t\tconst focusDomRef = this.getFocusDomRef();\n\t\tif (!focusDomRef) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst tabbableElements = getTabbableElements(focusDomRef);\n\t\tif (tabbableElements.length === 0) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst activeElement = getActiveElement() as HTMLElement;\n\t\tconst currentIndex = tabbableElements.indexOf(activeElement);\n\n\t\tif (currentIndex === -1) {\n\t\t\treturn false;\n\t\t}\n\n\t\tlet nextElement: HTMLElement \| null = null;\n\n\t\tif (isTabNext(e)) {\n\t\t\tif (currentIndex < tabbableElements.length - 1) {\n\t\t\t\tnextElement = tabbableElements[currentIndex + 1];\n\t\t\t} else {\n\t\t\t\t// Loop to first element when at the last element\n\t\t\t\tnextElement = tabbableElements[0];\n\t\t\t}\n\t\t} else if (isTabPrevious(e)) {\n\t\t\tif (currentIndex > 0) {\n\t\t\t\tnextElement = tabbableElements[currentIndex - 1];\n\t\t\t} else {\n\t\t\t\t// Loop to last element when at the first element\n\t\t\t\tnextElement = tabbableElements[tabbableElements.length - 1];\n\t\t\t}\n\t\t}\n\n\t\tif (nextElement) {\n\t\t\tnextElement.focus();\n\t\t\treturn true;\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t_onDeleteButtonClick() {\n\t\tthis.fireDecoratorEvent(\"delete\");\n\t}\n\n\t_onDeleteButtonKeyDown(e: KeyboardEvent) {\n\t\tif (isSpace(e) \|\| isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"delete\");\n\t\t}\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) : encodeXML(this.text \|\| \"\");\n\t}\n\n\tget _deleteButtonTooltip() {\n\t\treturn SearchItem.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON);\n\t}\n\n\tget hasActions() {\n\t\treturn !!this.actions.length;\n\t}\n}\n\nSearchItem.define();\n\nexport default SearchItem;\n"]}
1	+ {"version":3,"file":"SearchItem.js","sourceRoot":"","sources":["../src/SearchItem.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 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\";\nimport {\n\tSEARCH_ITEM_DELETE_BUTTON_TOOLTIP,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport { getFirstFocusableElement } from \"@ui5/webcomponents-base/dist/util/FocusableElements.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport {\n\tisSpace,\n\tisEnter,\n\tisF2,\n\tisTabNext,\n\tisTabPrevious,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { i18n } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n// @ts-expect-error\nimport encodeXML from \"@ui5/webcomponents-base/dist/sap/base/security/encodeXML.js\";\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/\n\t Defines the actionable elements.\n\t * This slot allows placing additional interactive elements (such as buttons, icons, or tags)\n\t * next to the delete button, providing flexible customization for various user actions.\n\t \n\t Note: While the slot is flexible, for consistency with design guidelines,\n\t * it's recommended to use `ui5-button` with `Transparent` design or `ui5-icon` elements.\n\t \n\t @public\n\t * @since 2.16.0\n\t /\n\t@slot()\n\tactions!: Array<HTMLElement>;\n\n\t_markupText = \"\";\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\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\tasync _onkeydown(e: KeyboardEvent) {\n\t\t// Handle manual tab navigation between action items\n\t\tif (isTabNext(e) \|\| isTabPrevious(e)) {\n\t\t\tconst handled = this._handleTabNavigation(e);\n\t\t\tif (handled) {\n\t\t\t\te.preventDefault();\n\t\t\t\te.stopPropagation();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Call super for other key handling\n\t\tsuper._onkeydown(e);\n\n\t\t// Handle space/enter when focus is within action items\n\t\tif (this.getFocusDomRef()!.matches(\":has(:focus-within)\")) {\n\t\t\tif (isSpace(e) \|\| isEnter(e)) {\n\t\t\t\te.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// Handle F2 for focus navigation\n\t\tif (isF2(e)) {\n\t\t\te.stopImmediatePropagation();\n\t\t\tconst activeElement = getActiveElement();\n\t\t\tconst focusDomRef = this.getFocusDomRef();\n\n\t\t\tif (!focusDomRef) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (activeElement === focusDomRef) {\n\t\t\t\tconst firstFocusable = await getFirstFocusableElement(focusDomRef);\n\t\t\t\tfirstFocusable?.focus();\n\t\t\t} else {\n\t\t\t\tfocusDomRef.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\t/\n\t Handles manual tab navigation between action items and delete button with focus looping\n\t */\n\t_handleTabNavigation(e: KeyboardEvent): boolean {\n\t\tconst focusDomRef = this.getFocusDomRef();\n\t\tif (!focusDomRef) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst tabbableElements = getTabbableElements(focusDomRef);\n\t\tif (tabbableElements.length === 0) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst activeElement = getActiveElement() as HTMLElement;\n\t\tconst currentIndex = tabbableElements.indexOf(activeElement);\n\n\t\tif (currentIndex === -1) {\n\t\t\treturn false;\n\t\t}\n\n\t\tlet nextElement: HTMLElement \| null = null;\n\n\t\tif (isTabNext(e)) {\n\t\t\tif (currentIndex < tabbableElements.length - 1) {\n\t\t\t\tnextElement = tabbableElements[currentIndex + 1];\n\t\t\t} else {\n\t\t\t\t// Loop to first element when at the last element\n\t\t\t\tnextElement = tabbableElements[0];\n\t\t\t}\n\t\t} else if (isTabPrevious(e)) {\n\t\t\tif (currentIndex > 0) {\n\t\t\t\tnextElement = tabbableElements[currentIndex - 1];\n\t\t\t} else {\n\t\t\t\t// Loop to last element when at the first element\n\t\t\t\tnextElement = tabbableElements[tabbableElements.length - 1];\n\t\t\t}\n\t\t}\n\n\t\tif (nextElement) {\n\t\t\tnextElement.focus();\n\t\t\treturn true;\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t_onDeleteButtonClick() {\n\t\tthis.fireDecoratorEvent(\"delete\");\n\t}\n\n\t_onDeleteButtonKeyDown(e: KeyboardEvent) {\n\t\tif (isSpace(e) \|\| isEnter(e)) {\n\t\t\tthis.fireDecoratorEvent(\"delete\");\n\t\t}\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) : encodeXML(this.text \|\| \"\");\n\t}\n\n\tget _deleteButtonTooltip() {\n\t\treturn SearchItem.i18nBundle.getText(SEARCH_ITEM_DELETE_BUTTON_TOOLTIP);\n\t}\n\n\tget hasActions() {\n\t\treturn !!this.actions.length;\n\t}\n}\n\nSearchItem.define();\n\nexport default SearchItem;\n"]}

package/dist/SearchPopoverTemplate.js CHANGED Viewed

@@ -13,7 +13,7 @@ import Button from "@ui5/webcomponents/dist/Button.js";
 import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
 import ListAccessibleRole from "@ui5/webcomponents/dist/types/ListAccessibleRole.js";
 export default function SearchPopoverTemplate(headerTemplate) {
-    return (_jsxs(ResponsivePopover, { hideArrow: true, preventFocusRestore: true, preventInitialFocus: !isPhone(), accessibleNameRef: "suggestions-speech-output message-area-text message-area-description", placement: PopoverPlacement.Bottom, horizontalAlign: PopoverHorizontalAlign.Start, open: this.open, opener: this, onOpen: this._handleOpen, onClose: this._handleClose, onBeforeClose: this._handleBeforeClose, onBeforeOpen: this._handleBeforeOpen, class: {
+    return (_jsxs(ResponsivePopover, { id: "ui5-search-list", hideArrow: true, preventFocusRestore: true, preventInitialFocus: !isPhone(), accessibleNameRef: "suggestions-speech-output message-area-text message-area-description", placement: PopoverPlacement.Bottom, horizontalAlign: PopoverHorizontalAlign.Start, open: this.open, opener: this, onOpen: this._handleOpen, onClose: this._handleClose, onBeforeClose: this._handleBeforeClose, onBeforeOpen: this._handleBeforeOpen, class: {
             "ui5-search-popover": true,
             "ui5-search-popover-phone": isPhone(),
         }, children: [isPhone() ? (headerTemplate ? headerTemplate.call(this) : (_jsx(_Fragment, { children: _jsxs("header", { slot: "header", class: "ui5-search-popup-searching-header", children: [_jsx(Input, { class: "ui5-search-popover-search-field", onInput: this._handleMobileInput, showClearIcon: this.showClearIcon, noTypeahead: this.noTypeahead, hint: InputKeyHint.Search, onKeyDown: this._onMobileInputKeydown, children: this._flattenItems.map(item => {

package/dist/SearchPopoverTemplate.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchPopoverTemplate.js","sourceRoot":"","sources":["../src/SearchPopoverTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import ResponsivePopover from \"@ui5/webcomponents/dist/ResponsivePopover.js\";\nimport type Search from \"./Search.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport ListSeparator from \"@ui5/webcomponents/dist/types/ListSeparator.js\";\nimport PopoverHorizontalAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport PopoverPlacement from \"@ui5/webcomponents/dist/types/PopoverPlacement.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport SuggestionItem from \"@ui5/webcomponents/dist/SuggestionItem.js\";\nimport InputKeyHint from \"@ui5/webcomponents/dist/types/InputKeyHint.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport ListAccessibleRole from \"@ui5/webcomponents/dist/types/ListAccessibleRole.js\";\nimport type { JsxTemplate } from \"@ui5/webcomponents-base/dist/index.js\";\n\nexport default function SearchPopoverTemplate(this: Search, headerTemplate?: JsxTemplate) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\thideArrow={true}\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={!isPhone()}\n\t\t\taccessibleNameRef=\"suggestions-speech-output message-area-text message-area-description\"\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\tonBeforeClose={this._handleBeforeClose}\n\t\t\tonBeforeOpen={this._handleBeforeOpen}\n\t\t\tclass={{\n\t\t\t\t\"ui5-search-popover\": true,\n\t\t\t\t\"ui5-search-popover-phone\": isPhone(),\n\t\t\t}}\n\t\t>\n\n\t\t\t{isPhone() ? (headerTemplate ? headerTemplate.call(this) : (\n\t\t\t\t<>\n\t\t\t\t\t<header slot=\"header\" class=\"ui5-search-popup-searching-header\">\n\t\t\t\t\t\t<Input class=\"ui5-search-popover-search-field\" onInput={this._handleMobileInput} showClearIcon={this.showClearIcon} noTypeahead={this.noTypeahead} hint={InputKeyHint.Search} onKeyDown={this._onMobileInputKeydown}>\n\t\t\t\t\t\t\t{this._flattenItems.map(item => {\n\t\t\t\t\t\t\t\treturn (<SuggestionItem text={item.text}></SuggestionItem>);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t<Button design={ButtonDesign.Transparent} onClick={this._handleCancel}>{this.cancelButtonText}</Button>\n\t\t\t\t\t</header>\n\t\t\t\t</>\n\t\t\t)) : null }\n\n\t\t\t<main class=\"ui5-search-popover-content\">\n\t\t\t\t<slot name=\"messageArea\"></slot>\n\t\t\t\t<div class=\"search-popover-busy-wrapper\">\n\t\t\t\t\t<BusyIndicator active={true}></BusyIndicator>\n\t\t\t\t</div>\n\n\t\t\t\t{this.items.length ?\n\t\t\t\t\t<List\n\t\t\t\t\t\tclass=\"ui5-search-list\"\n\t\t\t\t\t\tseparators={ListSeparator.None}\n\t\t\t\t\t\tonKeyDown={this._onItemKeydown}\n\t\t\t\t\t\taccessibleRole={ListAccessibleRole.ListBox}\n\t\t\t\t\t\tonItemClick={this._onItemClick}>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</List>\n\t\t\t\t\t: (\n\t\t\t\t\t\t<slot name=\"illustration\"></slot>\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\t<span class=\"ui5-hidden-text\" id=\"suggestions-speech-output\">{this.suggestionsText}</span>\n\t\t\t\t{this.messageArea[0]?.text ? (<span class=\"ui5-hidden-text\" id=\"message-area-text\">{this.messageArea[0].text}</span>) : null}\n\t\t\t\t{this.messageArea[0]?.description ? (<span class=\"ui5-hidden-text\" id=\"message-area-description\">{this.messageArea[0].description}</span>) : null}\n\t\t\t</main>\n\n\t\t\t{this.action.length ? (<slot onKeyDown={this._handleActionKeydown} name=\"action\" slot=\"footer\"></slot>) : null}\n\t\t</ResponsivePopover>\n\t);\n}\n"]}
1	+ {"version":3,"file":"SearchPopoverTemplate.js","sourceRoot":"","sources":["../src/SearchPopoverTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import ResponsivePopover from \"@ui5/webcomponents/dist/ResponsivePopover.js\";\nimport type Search from \"./Search.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport ListSeparator from \"@ui5/webcomponents/dist/types/ListSeparator.js\";\nimport PopoverHorizontalAlign from \"@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js\";\nimport PopoverPlacement from \"@ui5/webcomponents/dist/types/PopoverPlacement.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport SuggestionItem from \"@ui5/webcomponents/dist/SuggestionItem.js\";\nimport InputKeyHint from \"@ui5/webcomponents/dist/types/InputKeyHint.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport ButtonDesign from \"@ui5/webcomponents/dist/types/ButtonDesign.js\";\nimport ListAccessibleRole from \"@ui5/webcomponents/dist/types/ListAccessibleRole.js\";\nimport type { JsxTemplate } from \"@ui5/webcomponents-base/dist/index.js\";\n\nexport default function SearchPopoverTemplate(this: Search, headerTemplate?: JsxTemplate) {\n\treturn (\n\t\t<ResponsivePopover\n\t\t\tid=\"ui5-search-list\"\n\t\t\thideArrow={true}\n\t\t\tpreventFocusRestore={true}\n\t\t\tpreventInitialFocus={!isPhone()}\n\t\t\taccessibleNameRef=\"suggestions-speech-output message-area-text message-area-description\"\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\tonBeforeClose={this._handleBeforeClose}\n\t\t\tonBeforeOpen={this._handleBeforeOpen}\n\t\t\tclass={{\n\t\t\t\t\"ui5-search-popover\": true,\n\t\t\t\t\"ui5-search-popover-phone\": isPhone(),\n\t\t\t}}\n\t\t>\n\n\t\t\t{isPhone() ? (headerTemplate ? headerTemplate.call(this) : (\n\t\t\t\t<>\n\t\t\t\t\t<header slot=\"header\" class=\"ui5-search-popup-searching-header\">\n\t\t\t\t\t\t<Input class=\"ui5-search-popover-search-field\" onInput={this._handleMobileInput} showClearIcon={this.showClearIcon} noTypeahead={this.noTypeahead} hint={InputKeyHint.Search} onKeyDown={this._onMobileInputKeydown}>\n\t\t\t\t\t\t\t{this._flattenItems.map(item => {\n\t\t\t\t\t\t\t\treturn (<SuggestionItem text={item.text}></SuggestionItem>);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t<Button design={ButtonDesign.Transparent} onClick={this._handleCancel}>{this.cancelButtonText}</Button>\n\t\t\t\t\t</header>\n\t\t\t\t</>\n\t\t\t)) : null }\n\n\t\t\t<main class=\"ui5-search-popover-content\">\n\t\t\t\t<slot name=\"messageArea\"></slot>\n\t\t\t\t<div class=\"search-popover-busy-wrapper\">\n\t\t\t\t\t<BusyIndicator active={true}></BusyIndicator>\n\t\t\t\t</div>\n\n\t\t\t\t{this.items.length ?\n\t\t\t\t\t<List\n\t\t\t\t\t\tclass=\"ui5-search-list\"\n\t\t\t\t\t\tseparators={ListSeparator.None}\n\t\t\t\t\t\tonKeyDown={this._onItemKeydown}\n\t\t\t\t\t\taccessibleRole={ListAccessibleRole.ListBox}\n\t\t\t\t\t\tonItemClick={this._onItemClick}>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</List>\n\t\t\t\t\t: (\n\t\t\t\t\t\t<slot name=\"illustration\"></slot>\n\t\t\t\t\t)\n\t\t\t\t}\n\n\t\t\t\t<span class=\"ui5-hidden-text\" id=\"suggestions-speech-output\">{this.suggestionsText}</span>\n\t\t\t\t{this.messageArea[0]?.text ? (<span class=\"ui5-hidden-text\" id=\"message-area-text\">{this.messageArea[0].text}</span>) : null}\n\t\t\t\t{this.messageArea[0]?.description ? (<span class=\"ui5-hidden-text\" id=\"message-area-description\">{this.messageArea[0].description}</span>) : null}\n\t\t\t</main>\n\n\t\t\t{this.action.length ? (<slot onKeyDown={this._handleActionKeydown} name=\"action\" slot=\"footer\"></slot>) : null}\n\t\t</ResponsivePopover>\n\t);\n}\n"]}

package/dist/SearchScope.d.ts CHANGED Viewed

@@ -19,11 +19,12 @@ declare class SearchScope extends UI5Element implements ISearchScope {
      */
     text: string;
     /**
-     * Indicates whether the item is selected
-     * @default false
+     * Defines the value of the `ui5-search-scope`.
+     * Used for selection in Search scopes.
+     * @default undefined
      * @public
      */
-    selected: boolean;
+    value?: string;
     get stableDomRef(): string;
 }
 export default SearchScope;

package/dist/SearchScope.js CHANGED Viewed

@@ -27,8 +27,8 @@ __decorate([
     property()
 ], SearchScope.prototype, "text", void 0);
 __decorate([
-    property({ type: Boolean })
-], SearchScope.prototype, "selected", void 0);
+    property()
+], SearchScope.prototype, "value", void 0);
 SearchScope = __decorate([
     customElement("ui5-search-scope")
 ], SearchScope);

package/dist/SearchScope.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchScope.js","sourceRoot":"","sources":["../src/SearchScope.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,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;~~IAiBnC~~,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;~~AAbA~~;IADC,QAAQ,EAAE;yCACG;~~AAQd~~;IADC,QAAQ,~~CAAC,~~EAAE~~,IAAI,EAAE,OAAO,EAAE,CAAC~~;~~6CACT~~;~~AAfd~~,WAAW;IADhB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,WAAW,~~CAoBhB~~;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AAErB,eAAe,WAAW,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 { ISearchScope } from \"./SearchField.js\";\n\n/*\n @class\n * The `ui5-search-scope` represents the options for the scope in `ui5-search`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @implements {ISearchScope}\n * @public\n * @since 2.9.0\n * @experimental\n /\n@customElement(\"ui5-search-scope\")\nclass SearchScope extends UI5Element implements ISearchScope {\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 * @default ~~false~~\n\t * @public\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\nSearchScope.define();\n\nexport default SearchScope;\n"]}
1	+ {"version":3,"file":"SearchScope.js","sourceRoot":"","sources":["../src/SearchScope.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,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAkBnC,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;CACD,CAAA;AAdA;IADC,QAAQ,EAAE;yCACG;AASd;IADC,QAAQ,EAAE;0CACI;AAhBV,WAAW;IADhB,aAAa,CAAC,kBAAkB,CAAC;GAC5B,WAAW,CAqBhB;AAED,WAAW,CAAC,MAAM,EAAE,CAAC;AAErB,eAAe,WAAW,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 { ISearchScope } from \"./SearchField.js\";\n\n/*\n @class\n * The `ui5-search-scope` represents the options for the scope in `ui5-search`.\n * @constructor\n * @extends UI5Element\n * @abstract\n * @implements {ISearchScope}\n * @public\n * @since 2.9.0\n * @experimental\n /\n@customElement(\"ui5-search-scope\")\nclass SearchScope extends UI5Element implements ISearchScope {\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 Defines the value of the `ui5-search-scope`.\n\t * Used for selection in Search scopes.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tvalue?: string;\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") \|\| `${this._id}-stable-dom-ref`;\n\t}\n}\n\nSearchScope.define();\n\nexport default SearchScope;\n"]}

package/dist/UserSettingsAppearanceView.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import UserSettingsView from "./UserSettingsView.js";
+import type UserSettingsAppearanceViewItem from "./UserSettingsAppearanceViewItem.js";
+import type UserSettingsAppearanceViewGroup from "./UserSettingsAppearanceViewGroup.js";
+import type { ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js";
+type UserSettingsAppearanceViewItemSelectEventDetail = {
+    item: UserSettingsAppearanceViewItem;
+};
+declare class UserSettingsAppearanceView extends UserSettingsView {
+    eventDetails: {
+        "selection-change": UserSettingsAppearanceViewItemSelectEventDetail;
+    };
+    /**
+     * Defines the items of the component.
+     *
+     * @public
+     */
+    items: Array<UserSettingsAppearanceViewGroup | UserSettingsAppearanceViewItem>;
+    /**
+     * Defines additional content displayed below the items list.
+     *
+     * @public
+     */
+    additionalContent?: Array<HTMLElement>;
+    _getAllItems(): Array<UserSettingsAppearanceViewItem>;
+    _handleItemClick: (e: CustomEvent<ListItemClickEventDetail>) => void;
+}
+export default UserSettingsAppearanceView;
+export type { UserSettingsAppearanceViewItemSelectEventDetail, };

package/dist/UserSettingsAppearanceView.js ADDED Viewed

@@ -0,0 +1,108 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UserSettingsView from "./UserSettingsView.js";
+import UserSettingsAppearanceViewTemplate from "./UserSettingsAppearanceViewTemplate.js";
+import UserSettingViewCss from "./generated/themes/UserSettingsView.css.js";
+import { customElement, slot, eventStrict as event, } from "@ui5/webcomponents-base/dist/decorators.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+let UserSettingsAppearanceView =
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-user-settings-appearance-view` represents a view displayed in the `ui5-user-settings-item`.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js";`
+ *
+ * @constructor
+ * @extends UserSettingsView
+ * @experimental
+ * @public
+ * @since 2.17.0
+ */
+class UserSettingsAppearanceView extends UserSettingsView {
+    constructor() {
+        super(...arguments);
+        this._handleItemClick = (e) => {
+            const listItem = e.detail.item;
+            if (listItem.tagName === "UI5-USER-SETTINGS-APPEARANCE-VIEW-ITEM") {
+                const item = listItem;
+                const eventPrevented = !this.fireDecoratorEvent("selection-change", {
+                    item,
+                });
+                if (!eventPrevented) {
+                    this._getAllItems().forEach(viewItem => {
+                        viewItem.selected = false;
+                    });
+                    item.selected = true;
+                }
+            }
+        };
+    }
+    _getAllItems() {
+        const allItems = [];
+        this.items.forEach(item => {
+            if (item.tagName === "UI5-USER-SETTINGS-APPEARANCE-VIEW-GROUP") {
+                const group = item;
+                const groupItems = Array.from(group.children).filter(child => child.tagName === "UI5-USER-SETTINGS-APPEARANCE-VIEW-ITEM");
+                allItems.push(...groupItems);
+            }
+            else if (item.tagName === "UI5-USER-SETTINGS-APPEARANCE-VIEW-ITEM") {
+                allItems.push(item);
+            }
+        });
+        return allItems;
+    }
+};
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        invalidateOnChildChange: true,
+    })
+], UserSettingsAppearanceView.prototype, "items", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+    })
+], UserSettingsAppearanceView.prototype, "additionalContent", void 0);
+UserSettingsAppearanceView = __decorate([
+    customElement({
+        tag: "ui5-user-settings-appearance-view",
+        renderer: jsxRenderer,
+        template: UserSettingsAppearanceViewTemplate,
+        styles: [UserSettingViewCss],
+    })
+    /**
+     * Fired when an item is selected.
+     * @param {UserSettingsAppearanceViewItem} item The selected `user settings appearance view item`.
+     * @public
+     */
+    ,
+    event("selection-change", {
+        cancelable: true,
+    })
+    /**
+     * @class
+     * ### Overview
+     *
+     * The `ui5-user-settings-appearance-view` represents a view displayed in the `ui5-user-settings-item`.
+     *
+     * ### ES6 Module Import
+     * `import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js";`
+     *
+     * @constructor
+     * @extends UserSettingsView
+     * @experimental
+     * @public
+     * @since 2.17.0
+     */
+], UserSettingsAppearanceView);
+UserSettingsAppearanceView.define();
+export default UserSettingsAppearanceView;
+//# sourceMappingURL=UserSettingsAppearanceView.js.map

package/dist/UserSettingsAppearanceView.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UserSettingsAppearanceView.js","sourceRoot":"","sources":["../src/UserSettingsAppearanceView.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AACrD,OAAO,kCAAkC,MAAM,yCAAyC,CAAC;AACzF,OAAO,kBAAkB,MAAM,4CAA4C,CAAC;AAM5E,OAAO,EACN,aAAa,EAAE,IAAI,EAAE,WAAW,IAAI,KAAK,GACzC,MAAM,4CAA4C,CAAC;AACpD,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAqC/E,IAAM,0BAA0B;AAfhC;;;;;;;;;;;;;;GAcG;AACH,MAAM,0BAA2B,SAAQ,gBAAgB;IAAzD;;QA6CC,qBAAgB,GAAG,CAAC,CAAwC,EAAE,EAAE;YAC/D,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,IAAiF,CAAC;YAC5G,IAAI,QAAQ,CAAC,OAAO,KAAK,wCAAwC,EAAE,CAAC;gBACnE,MAAM,IAAI,GAAG,QAA0C,CAAC;gBACxD,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,kBAAkB,EAAE;oBACnE,IAAI;iBACJ,CAAC,CAAC;gBAEH,IAAI,CAAC,cAAc,EAAE,CAAC;oBACrB,IAAI,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;wBACtC,QAAQ,CAAC,QAAQ,GAAG,KAAK,CAAC;oBAC3B,CAAC,CAAC,CAAC;oBACH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACtB,CAAC;YACF,CAAC;QACF,CAAC,CAAC;IACH,CAAC;IAlCA,YAAY;QACX,MAAM,QAAQ,GAA0C,EAAE,CAAC;QAE3D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,IAAI,IAAI,CAAC,OAAO,KAAK,yCAAyC,EAAE,CAAC;gBAChE,MAAM,KAAK,GAAG,IAAuC,CAAC;gBACtD,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CACnD,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,KAAK,wCAAwC,CAC1B,CAAC;gBAC3C,QAAQ,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,CAAC;YAC9B,CAAC;iBAAM,IAAI,IAAI,CAAC,OAAO,KAAK,wCAAwC,EAAE,CAAC;gBACtE,QAAQ,CAAC,IAAI,CAAC,IAAsC,CAAC,CAAC;YACvD,CAAC;QACF,CAAC,CAAC,CAAC;QAEH,OAAO,QAAQ,CAAC;IACjB,CAAC;CAkBD,CAAA;AA9CA;IALC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE,IAAI;KAC7B,CAAC;yDAC8E;AAUhF;IAHC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;KACjB,CAAC;qEACqC;AAzBlC,0BAA0B;IA/B/B,aAAa,CAAC;QACd,GAAG,EAAE,mCAAmC;QACxC,QAAQ,EAAE,WAAW;QACrB,QAAQ,EAAE,kCAAkC;QAC5C,MAAM,EAAE,CAAC,kBAAkB,CAAC;KAC5B,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,kBAAkB,EAAE;QAC1B,UAAU,EAAE,IAAI;KAChB,CAAC;IAEF;;;;;;;;;;;;;;OAcG;GACG,0BAA0B,CA6D/B;AAED,0BAA0B,CAAC,MAAM,EAAE,CAAC;AACpC,eAAe,0BAA0B,CAAC","sourcesContent":["import UserSettingsView from \"./UserSettingsView.js\";\nimport UserSettingsAppearanceViewTemplate from \"./UserSettingsAppearanceViewTemplate.js\";\nimport UserSettingViewCss from \"./generated/themes/UserSettingsView.css.js\";\nimport type UserSettingsAppearanceViewItem from \"./UserSettingsAppearanceViewItem.js\";\nimport type UserSettingsAppearanceViewGroup from \"./UserSettingsAppearanceViewGroup.js\";\nimport type { ListItemClickEventDetail } from \"@ui5/webcomponents/dist/List.js\";\nimport type ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\n\nimport {\n\tcustomElement, slot, eventStrict as event,\n} from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\ntype UserSettingsAppearanceViewItemSelectEventDetail = {\n\titem: UserSettingsAppearanceViewItem;\n}\n\n@customElement({\n\ttag: \"ui5-user-settings-appearance-view\",\n\trenderer: jsxRenderer,\n\ttemplate: UserSettingsAppearanceViewTemplate,\n\tstyles: [UserSettingViewCss],\n})\n\n/**\n * Fired when an item is selected.\n * @param {UserSettingsAppearanceViewItem} item The selected `user settings appearance view item`.\n * @public\n */\n@event(\"selection-change\", {\n\tcancelable: true,\n})\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-user-settings-appearance-view` represents a view displayed in the `ui5-user-settings-item`.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js\";`\n *\n * @constructor\n * @extends UserSettingsView\n * @experimental\n * @public\n * @since 2.17.0\n */\nclass UserSettingsAppearanceView extends UserSettingsView {\n\teventDetails!: {\n\t\t\"selection-change\": UserSettingsAppearanceViewItemSelectEventDetail;\n\t}\n\n\t/**\n\t * Defines the items of the component.\n\t *\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t\tinvalidateOnChildChange: true,\n\t})\n\titems!: Array<UserSettingsAppearanceViewGroup | UserSettingsAppearanceViewItem>;\n\n\t/**\n\t * Defines additional content displayed below the items list.\n\t *\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t})\n\tadditionalContent?: Array<HTMLElement>;\n\n\t_getAllItems(): Array<UserSettingsAppearanceViewItem> {\n\t\tconst allItems: Array<UserSettingsAppearanceViewItem> = [];\n\n\t\tthis.items.forEach(item => {\n\t\t\tif (item.tagName === \"UI5-USER-SETTINGS-APPEARANCE-VIEW-GROUP\") {\n\t\t\t\tconst group = item as UserSettingsAppearanceViewGroup;\n\t\t\t\tconst groupItems = Array.from(group.children).filter(\n\t\t\t\t\tchild => child.tagName === \"UI5-USER-SETTINGS-APPEARANCE-VIEW-ITEM\",\n\t\t\t\t) as Array<UserSettingsAppearanceViewItem>;\n\t\t\t\tallItems.push(...groupItems);\n\t\t\t} else if (item.tagName === \"UI5-USER-SETTINGS-APPEARANCE-VIEW-ITEM\") {\n\t\t\t\tallItems.push(item as UserSettingsAppearanceViewItem);\n\t\t\t}\n\t\t});\n\n\t\treturn allItems;\n\t}\n\n\t_handleItemClick = (e: CustomEvent<ListItemClickEventDetail>) => {\n\t\tconst listItem = e.detail.item as ListItemBase & { associatedSettingItem?: UserSettingsAppearanceViewItem };\n\t\tif (listItem.tagName === \"UI5-USER-SETTINGS-APPEARANCE-VIEW-ITEM\") {\n\t\t\tconst item = listItem as UserSettingsAppearanceViewItem;\n\t\t\tconst eventPrevented = !this.fireDecoratorEvent(\"selection-change\", {\n\t\t\t\titem,\n\t\t\t});\n\n\t\t\tif (!eventPrevented) {\n\t\t\t\tthis._getAllItems().forEach(viewItem => {\n\t\t\t\t\tviewItem.selected = false;\n\t\t\t\t});\n\t\t\t\titem.selected = true;\n\t\t\t}\n\t\t}\n\t};\n}\n\nUserSettingsAppearanceView.define();\nexport default UserSettingsAppearanceView;\nexport type {\n\tUserSettingsAppearanceViewItemSelectEventDetail,\n};\n"]}

package/dist/UserSettingsAppearanceViewGroup.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js";
+import type UserSettingsAppearanceViewItem from "./UserSettingsAppearanceViewItem.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-user-settings-appearance-view-group` is a special list item group used to group appearance view items.
+ *
+ * This is the item to use inside a `ui5-user-settings-appearance-view`.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js";`
+ *
+ * @constructor
+ * @extends ListItemGroup
+ * @experimental
+ * @public
+ * @since 2.17.0
+ */
+declare class UserSettingsAppearanceViewGroup extends ListItemGroup {
+    /**
+     * Defines the items of the <code>ui5-user-settings-appearance-view-group</code>.
+     * @public
+     */
+    items: Array<UserSettingsAppearanceViewItem>;
+}
+export default UserSettingsAppearanceViewGroup;

package/dist/UserSettingsAppearanceViewGroup.js ADDED Viewed

@@ -0,0 +1,43 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+/**
+ * @class
+ * ### Overview
+ *
+ * The `ui5-user-settings-appearance-view-group` is a special list item group used to group appearance view items.
+ *
+ * This is the item to use inside a `ui5-user-settings-appearance-view`.
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js";`
+ *
+ * @constructor
+ * @extends ListItemGroup
+ * @experimental
+ * @public
+ * @since 2.17.0
+ */
+let UserSettingsAppearanceViewGroup = class UserSettingsAppearanceViewGroup extends ListItemGroup {
+};
+__decorate([
+    slot({
+        "default": true,
+        invalidateOnChildChange: true,
+        type: HTMLElement,
+    })
+], UserSettingsAppearanceViewGroup.prototype, "items", void 0);
+UserSettingsAppearanceViewGroup = __decorate([
+    customElement({
+        tag: "ui5-user-settings-appearance-view-group",
+    })
+], UserSettingsAppearanceViewGroup);
+UserSettingsAppearanceViewGroup.define();
+export default UserSettingsAppearanceViewGroup;
+//# sourceMappingURL=UserSettingsAppearanceViewGroup.js.map

package/dist/UserSettingsAppearanceViewGroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UserSettingsAppearanceViewGroup.js","sourceRoot":"","sources":["../src/UserSettingsAppearanceViewGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAGnE;;;;;;;;;;;;;;;;GAgBG;AAIH,IAAM,+BAA+B,GAArC,MAAM,+BAAgC,SAAQ,aAAa;CAW1D,CAAA;AADQ;IALP,IAAI,CAAC;QACL,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE,IAAI;QAC7B,IAAI,EAAE,WAAW;KACjB,CAAC;8DACmD;AAVhD,+BAA+B;IAHpC,aAAa,CAAC;QACd,GAAG,EAAE,yCAAyC;KAC9C,CAAC;GACI,+BAA+B,CAWpC;AAED,+BAA+B,CAAC,MAAM,EAAE,CAAC;AACzC,eAAe,+BAA+B,CAAC","sourcesContent":["import ListItemGroup from \"@ui5/webcomponents/dist/ListItemGroup.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type UserSettingsAppearanceViewItem from \"./UserSettingsAppearanceViewItem.js\";\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-user-settings-appearance-view-group` is a special list item group used to group appearance view items.\n *\n * This is the item to use inside a `ui5-user-settings-appearance-view`.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js\";`\n *\n * @constructor\n * @extends ListItemGroup\n * @experimental\n * @public\n * @since 2.17.0\n */\n@customElement({\n\ttag: \"ui5-user-settings-appearance-view-group\",\n})\nclass UserSettingsAppearanceViewGroup extends ListItemGroup {\n\t/**\n\t * Defines the items of the <code>ui5-user-settings-appearance-view-group</code>.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\tinvalidateOnChildChange: true,\n\t\ttype: HTMLElement,\n\t})\n\tdeclare items: Array<UserSettingsAppearanceViewItem>;\n}\n\nUserSettingsAppearanceViewGroup.define();\nexport default UserSettingsAppearanceViewGroup;\n"]}

package/dist/UserSettingsAppearanceViewItem.d.ts ADDED Viewed

@@ -0,0 +1,29 @@
+import ListItemCustom from "@ui5/webcomponents/dist/ListItemCustom.js";
+import "@ui5/webcomponents-icons/dist/product.js";
+declare class UserSettingsAppearanceViewItem extends ListItemCustom {
+    /**
+     * Defines the unique identifier of the item.
+     * @default ""
+     * @public
+     */
+    itemKey: string;
+    /**
+     * Defines the text label displayed for the appearance item.
+     * @default ""
+     * @public
+     */
+    text: string;
+    /**
+     * Defines the icon of the appearance item.
+     * @default "product"
+     * @public
+     */
+    icon: string;
+    /**
+     * Defines the color scheme of the avatar.
+     * @default "Accent7"
+     * @public
+     */
+    colorScheme: string;
+}
+export default UserSettingsAppearanceViewItem;