@ui5/webcomponents-fiori 2.8.0-rc.2 → 2.8.0-rc.3

package/dist/SearchField.d.ts

@@ -0,0 +1,130 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type SearchMode from "./types/SearchMode.js";
+import type { SelectChangeEventDetail } from "@ui5/webcomponents/dist/Select.js";
+/**
+ * Interface for components that may be slotted inside a `ui5-search`
+ * @public
+ */
+interface ISearchFieldScopeOption extends UI5Element {
+    text?: string;
+    selected: boolean;
+    stableDomRef: string;
+}
+type SearchFieldScopeSelectionChangeDetails = {
+    scope: ISearchFieldScopeOption | undefined;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A `ui5-search-field` is an input field, used for user search.
+ *
+ * The `ui5-search-field` consists of several elements parts:
+ * - Scope - displays a select in the beggining of the component, used for filtering results by their scope.
+ * - Input field - for user input value
+ * - Clear button - gives the possibility for deleting the entered value
+ * - Search button - a primary button for performing search, when the user has entered a search term
+ * - Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the `ui5-search-field` component
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/fiori/dist/SearchField.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @private
+ */
+declare class SearchField extends UI5Element {
+    eventDetails: {
+        search: void;
+        input: void;
+        "scope-change": SearchFieldScopeSelectionChangeDetails;
+    };
+    /**
+     * Defines the mode of the component.
+     * @default "Default"
+     * @public
+     */
+    mode: `${SearchMode}`;
+    /**
+     * Defines whether the clear icon of the search will be shown.
+     * @default false
+     * @public
+     */
+    showClearIcon: boolean;
+    /**
+     * Defines whether the component is expanded.
+     *
+     * @default false
+     * @public
+     */
+    expanded: boolean;
+    /**
+     * Determines whether the component is in a fixed state that is not
+     * expandable/collapsible by user interaction.
+     * @default false
+     * @public
+     */
+    fixed: boolean;
+    /**
+     * Defines the value of the component.
+     *
+     * **Note:** The property is updated upon typing.
+     * @default ""
+     * @public
+     */
+    value: string;
+    /**
+     * Defines a short hint intended to aid the user with data entry when the
+     * component has no value.
+     * @default undefined
+     * @public
+     */
+    placeholder?: string;
+    /**
+     * Defines the accessible ARIA name of the component.
+     * @public
+     * @default undefined
+     */
+    accessibleName?: string;
+    /**
+     * Defines the component scope options.
+     * @public
+     */
+    scopeOptions: Array<ISearchFieldScopeOption>;
+    /**
+     * @private
+     */
+    focusedInnerInput: boolean;
+    /**
+     * @private
+     */
+    _effectiveShowClearIcon: boolean;
+    static i18nBundle: I18nBundle;
+    onBeforeRendering(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onfocusin(): void;
+    _onfocusout(): void;
+    _handleEnter(): void;
+    _handleSearchIconPress(): void;
+    _handleInput(e: InputEvent): void;
+    _handleClear(): void;
+    _handleScopeChange(e: CustomEvent<SelectChangeEventDetail>): void;
+    get _isSearchIcon(): boolean | 0;
+    get _searchButtonAccessibilityAttributes(): {
+        expanded: boolean;
+    };
+    get _translations(): {
+        scope: string;
+        clearIcon: string;
+        searchIcon: string;
+        collapsedSearch: string;
+    };
+    captureRef(ref: HTMLElement & {
+        scopeOption?: UI5Element;
+    } | null): void;
+}
+export default SearchField;
+export type { ISearchFieldScopeOption, SearchFieldScopeSelectionChangeDetails };

package/dist/SearchField.js

@@ -0,0 +1,228 @@
+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;
+};
+var SearchField_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import SearchFieldTemplate from "./SearchFieldTemplate.js";
+import SearchFieldCss from "./generated/themes/SearchField.css.js";
+import { isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { SEARCH_FIELD_SCOPE_SELECT_LABEL, SEARCH_FIELD_CLEAR_ICON, SEARCH_FIELD_SEARCH_ICON, SEARCH_FIELD_SEARCH_COLLAPSED, SEARCH_FIELD_SEARCH_EXPANDED, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A `ui5-search-field` is an input field, used for user search.
+ *
+ * The `ui5-search-field` consists of several elements parts:
+ * - Scope - displays a select in the beggining of the component, used for filtering results by their scope.
+ * - Input field - for user input value
+ * - Clear button - gives the possibility for deleting the entered value
+ * - Search button - a primary button for performing search, when the user has entered a search term
+ * - Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the `ui5-search-field` component
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/fiori/dist/SearchField.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @private
+ */
+let SearchField = SearchField_1 = class SearchField extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the mode of the component.
+         * @default "Default"
+         * @public
+         */
+        this.mode = "Default";
+        /**
+         * Defines whether the clear icon of the search will be shown.
+         * @default false
+         * @public
+         */
+        this.showClearIcon = false;
+        /**
+         * Defines whether the component is expanded.
+         *
+         * @default false
+         * @public
+         */
+        this.expanded = false;
+        /**
+         * Determines whether the component is in a fixed state that is not
+         * expandable/collapsible by user interaction.
+         * @default false
+         * @public
+         */
+        this.fixed = false;
+        /**
+         * Defines the value of the component.
+         *
+         * **Note:** The property is updated upon typing.
+         * @default ""
+         * @public
+         */
+        this.value = "";
+        /**
+         * @private
+         */
+        this.focusedInnerInput = false;
+        /**
+         * @private
+         */
+        this._effectiveShowClearIcon = false;
+    }
+    onBeforeRendering() {
+        this._effectiveShowClearIcon = (this.showClearIcon && !!this.value);
+    }
+    _onkeydown(e) {
+        if (isEnter(e)) {
+            return this._handleEnter();
+        }
+    }
+    _onfocusin() {
+        this.focusedInnerInput = true;
+    }
+    _onfocusout() {
+        this.focusedInnerInput = false;
+    }
+    _handleEnter() {
+        if (this.value.length) {
+            this.fireDecoratorEvent("search");
+        }
+    }
+    _handleSearchIconPress() {
+        if (this.value.length) {
+            this.fireDecoratorEvent("search");
+            return;
+        }
+        if (this.fixed) {
+            return;
+        }
+        this.expanded = !this.expanded;
+        setTimeout(() => {
+            this.focus();
+        }, 0);
+    }
+    _handleInput(e) {
+        this.value = e.target.value;
+        this.fireDecoratorEvent("input");
+    }
+    _handleClear() {
+        this.value = "";
+        this.fireDecoratorEvent("input");
+        this.focus();
+    }
+    _handleScopeChange(e) {
+        const item = e.detail.selectedOption;
+        this.fireDecoratorEvent("scope-change", {
+            scope: item.scopeOption,
+        });
+    }
+    get _isSearchIcon() {
+        return this.value.length && this.focusedInnerInput;
+    }
+    get _searchButtonAccessibilityAttributes() {
+        return {
+            expanded: this.expanded,
+        };
+    }
+    get _translations() {
+        return {
+            scope: SearchField_1.i18nBundle.getText(SEARCH_FIELD_SCOPE_SELECT_LABEL),
+            clearIcon: SearchField_1.i18nBundle.getText(SEARCH_FIELD_CLEAR_ICON),
+            searchIcon: this._isSearchIcon ? SearchField_1.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON) : SearchField_1.i18nBundle.getText(SEARCH_FIELD_SEARCH_EXPANDED),
+            collapsedSearch: SearchField_1.i18nBundle.getText(SEARCH_FIELD_SEARCH_COLLAPSED),
+        };
+    }
+    captureRef(ref) {
+        if (ref) {
+            ref.scopeOption = this;
+        }
+    }
+};
+__decorate([
+    property()
+], SearchField.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "showClearIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "fixed", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "value", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], SearchField.prototype, "accessibleName", void 0);
+__decorate([
+    slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })
+], SearchField.prototype, "scopeOptions", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "focusedInnerInput", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchField.prototype, "_effectiveShowClearIcon", void 0);
+__decorate([
+    i18n("@ui5/webcomponents-fiori")
+], SearchField, "i18nBundle", void 0);
+SearchField = SearchField_1 = __decorate([
+    customElement({
+        tag: "ui5-search-field",
+        languageAware: true,
+        renderer: jsxRenderer,
+        template: SearchFieldTemplate,
+        styles: [
+            SearchFieldCss,
+        ],
+    })
+    /**
+     * Fired when typing in input or clear icon is pressed.
+     *
+     * @public
+     */
+    ,
+    event("input", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the scope has changed.
+     * @public
+     * @param {HTMLElement} scope The newly selected scope
+     */
+    ,
+    event("scope-change", {
+        bubbles: true,
+    })
+    /**
+     * Fired when the user has triggered search with Enter key or Search Button press.
+     * @public
+     */
+    ,
+    event("search", {
+        bubbles: true,
+    })
+], SearchField);
+SearchField.define();
+export default SearchField;
+//# sourceMappingURL=SearchField.js.map

package/dist/SearchField.js.map

@@ -0,0 +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 I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type SearchMode from \"./types/SearchMode.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_SEARCH_COLLAPSED,\n\tSEARCH_FIELD_SEARCH_EXPANDED,\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 ISearchFieldScopeOption extends UI5Element {\n\ttext?: string,\n\tselected: boolean,\n\tstableDomRef: string,\n}\n\ntype SearchFieldScopeSelectionChangeDetails = {\n\tscope: ISearchFieldScopeOption | 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 * - Expand/Collapse button - when there is no search term, the search button behaves as an expand/collapse button for the `ui5-search-field` component\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})\n\nclass SearchField extends UI5Element {\n\teventDetails!: {\n\t\tsearch: void,\n\t\tinput: void,\n\t\t\"scope-change\": SearchFieldScopeSelectionChangeDetails,\n\t}\n\n\t/**\n\t * Defines the mode of the component.\n\t * @default \"Default\"\n\t * @public\n\t */\n\t@property()\n\tmode: `${SearchMode}` = \"Default\";\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 expanded.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\texpanded = false;\n\n\t/**\n\t * Determines whether the component is in a fixed state that is not\n\t * expandable/collapsible by user interaction.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tfixed = 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 component scope options.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, individualSlots: true, invalidateOnChildChange: true })\n\tscopeOptions!: Array<ISearchFieldScopeOption>;\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_handleEnter() {\n\t\tif (this.value.length) {\n\t\t\tthis.fireDecoratorEvent(\"search\");\n\t\t}\n\t}\n\n\t_handleSearchIconPress() {\n\t\tif (this.value.length) {\n\t\t\tthis.fireDecoratorEvent(\"search\");\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.fixed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.expanded = !this.expanded;\n\n\t\tsetTimeout(() => {\n\t\t\tthis.focus();\n\t\t}, 0);\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: ISearchFieldScopeOption };\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.expanded,\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\tclearIcon: SearchField.i18nBundle.getText(SEARCH_FIELD_CLEAR_ICON),\n\t\t\tsearchIcon: this._isSearchIcon ? SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_ICON) : SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_EXPANDED),\n\t\t\tcollapsedSearch: SearchField.i18nBundle.getText(SEARCH_FIELD_SEARCH_COLLAPSED),\n\t\t};\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 { ISearchFieldScopeOption, SearchFieldScopeSelectionChangeDetails };\n"]}

package/dist/SearchFieldScopeOption.d.ts

@@ -0,0 +1,26 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ISearchFieldScopeOption } from "./SearchField.js";
+/**
+ * @class
+ * The `ui5-search-scope-option` represents the options for the scope in `ui5-search`.
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @implements {ISearchFieldScopeOption}
+ * @public
+ */
+declare class SearchFieldScopeOption extends UI5Element implements ISearchFieldScopeOption {
+    /**
+     * Defines the text of the component.
+     * @default ""
+     * @public
+     */
+    text: string;
+    /**
+     * Indicates whether the item is selected
+     * @protected
+     */
+    selected: boolean;
+    get stableDomRef(): string;
+}
+export default SearchFieldScopeOption;

package/dist/SearchFieldScopeOption.js

@@ -0,0 +1,35 @@
+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 customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ * The `ui5-search-scope-option` represents the options for the scope in `ui5-search`.
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @implements {ISearchFieldScopeOption}
+ * @public
+ */
+let SearchFieldScopeOption = class SearchFieldScopeOption extends UI5Element {
+    get stableDomRef() {
+        return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+    }
+};
+__decorate([
+    property()
+], SearchFieldScopeOption.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchFieldScopeOption.prototype, "selected", void 0);
+SearchFieldScopeOption = __decorate([
+    customElement("ui5-search-field-scope-option")
+], SearchFieldScopeOption);
+SearchFieldScopeOption.define();
+export default SearchFieldScopeOption;
+//# sourceMappingURL=SearchFieldScopeOption.js.map

package/dist/SearchFieldScopeOption.js.map

@@ -0,0 +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;;;;;;;;GAQG;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;oDACE;AAOb;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 */\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/SearchFieldTemplate.d.ts

@@ -0,0 +1,2 @@
+import type SearchField from "./SearchField.js";
+export default function SearchFieldTemplate(this: SearchField): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/SearchFieldTemplate.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Option from "@ui5/webcomponents/dist/Option.js";
+import Select from "@ui5/webcomponents/dist/Select.js";
+import SearchMode from "./types/SearchMode.js";
+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() {
+    return (this.expanded ? (_jsx("div", { class: "ui5-search-field-root", role: "search", children: _jsxs("div", { class: "ui5-search-field-content", children: [this.mode === SearchMode.Scoped &&
+                    _jsxs(_Fragment, { children: [_jsx(Select, { onChange: this._handleScopeChange, class: "sapUiSizeCompact", accessibleName: this._translations.scope, tooltip: this._translations.scope, children: this.scopeOptions.map(scopeOption => {
+                                    return _jsx(Option, { selected: scopeOption.selected, "data-ui5-stable": scopeOption.stableDomRef, ref: this.captureRef.bind(scopeOption), children: scopeOption.text });
+                                }, this) }), _jsx("div", { class: "ui5-search-field-separator" })] }), _jsx("input", { class: "ui5-search-field-inner-input", role: "searchbox", "aria-label": this.accessibleName, value: this.value, placeholder: this.placeholder, "data-sap-focus-ref": true, onInput: this._handleInput, onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyDown: this._onkeydown }), 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,
+                    }, name: search, showTooltip: true, accessibleName: this._translations.searchIcon, onClick: this._handleSearchIconPress })] }) })) : (_jsx(Button, { class: "ui5-shell-search-field-button", icon: search, design: ButtonDesign.Transparent, "data-sap-focus-ref": true, onClick: this._handleSearchIconPress, tooltip: this._translations.collapsedSearch, accessibleName: this._translations.collapsedSearch, accessibilityAttributes: this._searchButtonAccessibilityAttributes })));
+}
+//# sourceMappingURL=SearchFieldTemplate.js.map

package/dist/SearchFieldTemplate.js.map

@@ -0,0 +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,UAAU,MAAM,uBAAuB,CAAC;AAC/C,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,MAAM,MAAM,yCAAyC,CAAC;AAC7D,OAAO,YAAY,MAAM,+CAA+C,CAAC;AAEzE,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,cAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,QAAQ,YAC/C,eAAK,KAAK,EAAC,0BAA0B,aACnC,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,MAAM;oBAC/B,8BACC,KAAC,MAAM,IACN,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,KAAK,EAAC,kBAAkB,EACxB,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EACxC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,YAChC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;oCACpC,OAAO,KAAC,MAAM,IACb,QAAQ,EAAE,WAAW,CAAC,QAAQ,qBACb,WAAW,CAAC,YAAY,EACzC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,YACrC,WAAW,CAAC,IAAI,GAAU,CAAC;gCAC9B,CAAC,EACD,IAAI,CAAC,GACG,EACT,cAAK,KAAK,EAAC,4BAA4B,GAAO,IAC5C,EAGJ,gBACC,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,WAAW,gBACJ,IAAI,CAAC,cAAc,EAC/B,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,GAAI,EAE9B,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,aAAa,CAAC,UAAU,EAC7C,OAAO,EAAE,IAAI,CAAC,sBAAsB,GAC7B,IACH,GACD,CACN,CAAC,CAAC,CAAC,CACH,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,aAAa,CAAC,eAAe,EAC3C,cAAc,EAAE,IAAI,CAAC,aAAa,CAAC,eAAe,EAClD,uBAAuB,EAAE,IAAI,CAAC,oCAAoC,GACzD,CACV,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 SearchMode from \"./types/SearchMode.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 default function SearchFieldTemplate(this: SearchField) {\n\treturn (\n\t\tthis.expanded ? (\n\t\t\t<div class=\"ui5-search-field-root\" role=\"search\">\n\t\t\t\t<div class=\"ui5-search-field-content\">\n\t\t\t\t\t{this.mode === SearchMode.Scoped &&\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\"\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.scopeOptions.map(scopeOption => {\n\t\t\t\t\t\t\t\t\treturn <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}</Option>;\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tthis)}\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}\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-label={this.accessibleName}\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\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._translations.searchIcon}\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\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._translations.collapsedSearch}\n\t\t\t\taccessibleName={this._translations.collapsedSearch}\n\t\t\t\taccessibilityAttributes={this._searchButtonAccessibilityAttributes}\n\t\t\t></Button>\n\t\t)\n\t);\n}\n"]}

package/dist/SideNavigationItem.js

@@ -98,7 +98,7 @@ let SideNavigationItem = class SideNavigationItem extends SideNavigationSelectab
     }
     get classesArray() {
         const classes = super.classesArray;
-        if (!this.disabled && this.parentNode.collapsed && this.items.length) {
+        if (!this.disabled && this.sideNavigation?.collapsed && this.items.length) {
             classes.push("ui5-sn-item-with-expander");
         }
         if (this._fixed) {

package/dist/SideNavigationItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNavigationItem.js","sourceRoot":"","sources":["../src/SideNavigationItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRender from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport {\n\tisLeft,\n\tisRight,\n\tisSpace,\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type SideNavigationItemBase from \"./SideNavigationItemBase.js\";\nimport SideNavigationSelectableItemBase from \"./SideNavigationSelectableItemBase.js\";\nimport type SideNavigation from \"./SideNavigation.js\";\nimport type SideNavigationSubItem from \"./SideNavigationSubItem.js\";\n\n// Templates\nimport SideNavigationItemTemplate from \"./SideNavigationItemTemplate.js\";\n\n// Styles\nimport SideNavigationItemCss from \"./generated/themes/SideNavigationItem.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * Represents a navigation action. It can provide sub items.\n * The `ui5-side-navigation-item` is used within `ui5-side-navigation` or `ui5-side-navigation-group` only.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";`\n *\n * @constructor\n * @extends SideNavigationSelectableItemBase\n * @abstract\n * @public\n * @since 1.0.0-rc.8\n */\n@customElement({\n\ttag: \"ui5-side-navigation-item\",\n\trenderer: jsxRender,\n\ttemplate: SideNavigationItemTemplate,\n\tstyles: SideNavigationItemCss,\n})\nclass SideNavigationItem extends SideNavigationSelectableItemBase {\n\t/**\n\t * Defines if the item is expanded\n\t *\n\t * @public\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\texpanded = false;\n\n\t/**\n\t * Defines if the item should be collapsible or not.\n\t * It is true, for example, for the items inside the Popover of the Side Navigation\n\t * @private\n\t * @default false\n\t * @since 1.10.0\n\t */\n\t@property({ type: Boolean })\n\t_fixed = false;\n\n\t/**\n     * Defines nested items by passing `ui5-side-navigation-sub-item` to the default slot.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n\titems!: Array<SideNavigationSubItem>;\n\n\tget overflowItems() : Array<SideNavigationItem> {\n\t\treturn [this];\n\t}\n\n\tget selectableItems() : Array<SideNavigationSelectableItemBase> {\n\t\treturn [this, ...this.items];\n\t}\n\n\tget focusableItems() : Array<SideNavigationItemBase> {\n\t\tif (this.sideNavCollapsed) {\n\t\t\treturn [this];\n\t\t}\n\n\t\tif (this.expanded) {\n\t\t\treturn [this, ...this.items];\n\t\t}\n\n\t\treturn [this];\n\t}\n\n\tget allItems() : Array<SideNavigationItemBase> {\n\t\treturn [this, ...this.items];\n\t}\n\n\tget _ariaHasPopup() {\n\t\tif (this.inPopover && this.accessibilityAttributes?.hasPopup) {\n\t\t\treturn this.accessibilityAttributes.hasPopup;\n\t\t}\n\n\t\tif (!this.disabled && this.sideNavCollapsed && this.items.length) {\n\t\t\treturn \"tree\";\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget _ariaChecked() {\n\t\tif (this.isOverflow || this.unselectable) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn this.selected;\n\t}\n\n\tget _groupId() {\n\t\tif (!this.items.length) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn `${this._id}-group`;\n\t}\n\n\tget _expanded() {\n\t\tif (!this.items.length) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn this.expanded;\n\t}\n\n\tget classesArray() {\n\t\tconst classes = super.classesArray;\n\n\t\tif (!this.disabled && (this.parentNode as SideNavigation).collapsed && this.items.length) {\n\t\t\tclasses.push(\"ui5-sn-item-with-expander\");\n\t\t}\n\n\t\tif (this._fixed) {\n\t\t\tclasses.push(\"ui5-sn-item-fixed\");\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tget _selected() {\n\t\tif (this.sideNavCollapsed) {\n\t\t\treturn this.selected || this.items.some(item => item.selected);\n\t\t}\n\n\t\treturn this.selected;\n\t}\n\n\t_onToggleClick(e: CustomEvent) {\n\t\te.stopPropagation();\n\n\t\tthis._toggle();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isLeft(e)) {\n\t\t\tthis.expanded = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (isRight(e)) {\n\t\t\tthis.expanded = true;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.unselectable && isSpace(e)) {\n\t\t\tthis._toggle();\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.unselectable && isEnter(e)) {\n\t\t\tthis._toggle();\n\t\t}\n\n\t\tsuper._onkeydown(e);\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tsuper._onkeyup(e);\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tsuper._onfocusin(e);\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tif (!this.inPopover && this.unselectable) {\n\t\t\tthis._toggle();\n\t\t}\n\n\t\tsuper._onclick(e);\n\t}\n\n\t_onfocusout() {\n\t\tif (!this.sideNavCollapsed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.getDomRef()!.classList.remove(\"ui5-sn-item-no-hover-effect\");\n\t}\n\n\t_onmouseenter() {\n\t\tif (!this.sideNavCollapsed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.getDomRef()!.classList.remove(\"ui5-sn-item-no-hover-effect\");\n\t}\n\n\t_onmouseleave() {\n\t\tif (!this.sideNavCollapsed || !this._selected) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.getDomRef()!.classList.add(\"ui5-sn-item-no-hover-effect\");\n\t}\n\n\tget isSideNavigationItem() {\n\t\treturn true;\n\t}\n\n\t_toggle() {\n\t\tif (this.items.length) {\n\t\t\tthis.expanded = !this.expanded;\n\t\t}\n\t}\n}\n\nSideNavigationItem.define();\n\nconst isInstanceOfSideNavigationItem = (object: any): object is SideNavigationItem => {\n\treturn \"isSideNavigationItem\" in object;\n};\n\nexport default SideNavigationItem;\nexport { isInstanceOfSideNavigationItem };\n"]}
+{"version":3,"file":"SideNavigationItem.js","sourceRoot":"","sources":["../src/SideNavigationItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,EACN,MAAM,EACN,OAAO,EACP,OAAO,EACP,OAAO,GACP,MAAM,sCAAsC,CAAC;AAE9C,OAAO,gCAAgC,MAAM,uCAAuC,CAAC;AAGrF,YAAY;AACZ,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AAEzE,SAAS;AACT,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AAEjF;;;;;;;;;;;;;;;;;GAiBG;AAOH,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,gCAAgC;IAAjE;;QACC;;;;;WAKG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;;;WAMG;QAEH,WAAM,GAAG,KAAK,CAAC;IA0KhB,CAAC;IAhKA,IAAI,aAAa;QAChB,OAAO,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI,cAAc;QACjB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,OAAO,CAAC,IAAI,CAAC,CAAC;QACf,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QAED,OAAO,CAAC,IAAI,CAAC,CAAC;IACf,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,IAAI,aAAa;QAChB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,uBAAuB,EAAE,QAAQ,EAAE,CAAC;YAC9D,OAAO,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC;QAC9C,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAClE,OAAO,MAAM,CAAC;QACf,CAAC;QAED,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,IAAI,YAAY;QACf,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YAC1C,OAAO,SAAS,CAAC;QAClB,CAAC;QAED,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;IAED,IAAI,QAAQ;QACX,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,OAAO,SAAS,CAAC;QAClB,CAAC;QAED,OAAO,GAAG,IAAI,CAAC,GAAG,QAAQ,CAAC;IAC5B,CAAC;IAED,IAAI,SAAS;QACZ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,OAAO,SAAS,CAAC;QAClB,CAAC;QAED,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;IAED,IAAI,YAAY;QACf,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC;QAEnC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAC3E,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACnC,CAAC;QAED,OAAO,OAAO,CAAC;IAChB,CAAC;IAED,IAAI,SAAS;QACZ,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC3B,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChE,CAAC;QAED,OAAO,IAAI,CAAC,QAAQ,CAAC;IACtB,CAAC;IAED,cAAc,CAAC,CAAc;QAC5B,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,OAAO,EAAE,CAAC;IAChB,CAAC;IAED,UAAU,CAAC,CAAgB;QAC1B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,OAAO;QACR,CAAC;QAED,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,OAAO;QACR,CAAC;QAED,IAAI,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,OAAO;QACR,CAAC;QAED,IAAI,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,OAAO,EAAE,CAAC;QAChB,CAAC;QAED,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC;IAED,UAAU,CAAC,CAAa;QACvB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,QAAQ,CAAC,CAAa;QACrB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YAC1C,IAAI,CAAC,OAAO,EAAE,CAAC;QAChB,CAAC;QAED,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC5B,OAAO;QACR,CAAC;QAED,IAAI,CAAC,SAAS,EAAG,CAAC,SAAS,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC;IACnE,CAAC;IAED,aAAa;QACZ,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC5B,OAAO;QACR,CAAC;QAED,IAAI,CAAC,SAAS,EAAG,CAAC,SAAS,CAAC,MAAM,CAAC,6BAA6B,CAAC,CAAC;IACnE,CAAC;IAED,aAAa;QACZ,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAC/C,OAAO;QACR,CAAC;QAED,IAAI,CAAC,SAAS,EAAG,CAAC,SAAS,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,oBAAoB;QACvB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,OAAO;QACN,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAChC,CAAC;IACF,CAAC;CACD,CAAA;AApLA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDACX;AAUjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACb;AAQf;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;iDACvC;AA1BhC,kBAAkB;IANvB,aAAa,CAAC;QACd,GAAG,EAAE,0BAA0B;QAC/B,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,0BAA0B;QACpC,MAAM,EAAE,qBAAqB;KAC7B,CAAC;GACI,kBAAkB,CA4LvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,MAAM,8BAA8B,GAAG,CAAC,MAAW,EAAgC,EAAE;IACpF,OAAO,sBAAsB,IAAI,MAAM,CAAC;AACzC,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC;AAClC,OAAO,EAAE,8BAA8B,EAAE,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRender from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport {\n\tisLeft,\n\tisRight,\n\tisSpace,\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type SideNavigationItemBase from \"./SideNavigationItemBase.js\";\nimport SideNavigationSelectableItemBase from \"./SideNavigationSelectableItemBase.js\";\nimport type SideNavigationSubItem from \"./SideNavigationSubItem.js\";\n\n// Templates\nimport SideNavigationItemTemplate from \"./SideNavigationItemTemplate.js\";\n\n// Styles\nimport SideNavigationItemCss from \"./generated/themes/SideNavigationItem.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * Represents a navigation action. It can provide sub items.\n * The `ui5-side-navigation-item` is used within `ui5-side-navigation` or `ui5-side-navigation-group` only.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";`\n *\n * @constructor\n * @extends SideNavigationSelectableItemBase\n * @abstract\n * @public\n * @since 1.0.0-rc.8\n */\n@customElement({\n\ttag: \"ui5-side-navigation-item\",\n\trenderer: jsxRender,\n\ttemplate: SideNavigationItemTemplate,\n\tstyles: SideNavigationItemCss,\n})\nclass SideNavigationItem extends SideNavigationSelectableItemBase {\n\t/**\n\t * Defines if the item is expanded\n\t *\n\t * @public\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\texpanded = false;\n\n\t/**\n\t * Defines if the item should be collapsible or not.\n\t * It is true, for example, for the items inside the Popover of the Side Navigation\n\t * @private\n\t * @default false\n\t * @since 1.10.0\n\t */\n\t@property({ type: Boolean })\n\t_fixed = false;\n\n\t/**\n     * Defines nested items by passing `ui5-side-navigation-sub-item` to the default slot.\n\t *\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n\titems!: Array<SideNavigationSubItem>;\n\n\tget overflowItems() : Array<SideNavigationItem> {\n\t\treturn [this];\n\t}\n\n\tget selectableItems() : Array<SideNavigationSelectableItemBase> {\n\t\treturn [this, ...this.items];\n\t}\n\n\tget focusableItems() : Array<SideNavigationItemBase> {\n\t\tif (this.sideNavCollapsed) {\n\t\t\treturn [this];\n\t\t}\n\n\t\tif (this.expanded) {\n\t\t\treturn [this, ...this.items];\n\t\t}\n\n\t\treturn [this];\n\t}\n\n\tget allItems() : Array<SideNavigationItemBase> {\n\t\treturn [this, ...this.items];\n\t}\n\n\tget _ariaHasPopup() {\n\t\tif (this.inPopover && this.accessibilityAttributes?.hasPopup) {\n\t\t\treturn this.accessibilityAttributes.hasPopup;\n\t\t}\n\n\t\tif (!this.disabled && this.sideNavCollapsed && this.items.length) {\n\t\t\treturn \"tree\";\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget _ariaChecked() {\n\t\tif (this.isOverflow || this.unselectable) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn this.selected;\n\t}\n\n\tget _groupId() {\n\t\tif (!this.items.length) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn `${this._id}-group`;\n\t}\n\n\tget _expanded() {\n\t\tif (!this.items.length) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn this.expanded;\n\t}\n\n\tget classesArray() {\n\t\tconst classes = super.classesArray;\n\n\t\tif (!this.disabled && this.sideNavigation?.collapsed && this.items.length) {\n\t\t\tclasses.push(\"ui5-sn-item-with-expander\");\n\t\t}\n\n\t\tif (this._fixed) {\n\t\t\tclasses.push(\"ui5-sn-item-fixed\");\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tget _selected() {\n\t\tif (this.sideNavCollapsed) {\n\t\t\treturn this.selected || this.items.some(item => item.selected);\n\t\t}\n\n\t\treturn this.selected;\n\t}\n\n\t_onToggleClick(e: CustomEvent) {\n\t\te.stopPropagation();\n\n\t\tthis._toggle();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isLeft(e)) {\n\t\t\tthis.expanded = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (isRight(e)) {\n\t\t\tthis.expanded = true;\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.unselectable && isSpace(e)) {\n\t\t\tthis._toggle();\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.unselectable && isEnter(e)) {\n\t\t\tthis._toggle();\n\t\t}\n\n\t\tsuper._onkeydown(e);\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tsuper._onkeyup(e);\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tsuper._onfocusin(e);\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tif (!this.inPopover && this.unselectable) {\n\t\t\tthis._toggle();\n\t\t}\n\n\t\tsuper._onclick(e);\n\t}\n\n\t_onfocusout() {\n\t\tif (!this.sideNavCollapsed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.getDomRef()!.classList.remove(\"ui5-sn-item-no-hover-effect\");\n\t}\n\n\t_onmouseenter() {\n\t\tif (!this.sideNavCollapsed) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.getDomRef()!.classList.remove(\"ui5-sn-item-no-hover-effect\");\n\t}\n\n\t_onmouseleave() {\n\t\tif (!this.sideNavCollapsed || !this._selected) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.getDomRef()!.classList.add(\"ui5-sn-item-no-hover-effect\");\n\t}\n\n\tget isSideNavigationItem() {\n\t\treturn true;\n\t}\n\n\t_toggle() {\n\t\tif (this.items.length) {\n\t\t\tthis.expanded = !this.expanded;\n\t\t}\n\t}\n}\n\nSideNavigationItem.define();\n\nconst isInstanceOfSideNavigationItem = (object: any): object is SideNavigationItem => {\n\treturn \"isSideNavigationItem\" in object;\n};\n\nexport default SideNavigationItem;\nexport { isInstanceOfSideNavigationItem };\n"]}