@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/ProductSwitchItem.d.ts

@@ -0,0 +1,117 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { IProductSwitchItem } from "./ProductSwitch.js";
+/**
+ * @class
+ * ### Overview
+ * The `ui5-product-switch-item` web component represents the items displayed in the
+ * `ui5-product-switch` web component.
+ *
+ * **Note:** `ui5-product-switch-item` is not supported when used outside of `ui5-product-switch`.
+ *
+ * ### Keyboard Handling
+ * The `ui5-product-switch` provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ *
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @implements {IProductSwitchItem}
+ * @since 1.0.0-rc.5
+ */
+declare class ProductSwitchItem extends UI5Element implements IProductSwitchItem {
+    eventDetails: {
+        click: {
+            item: ProductSwitchItem;
+        };
+        _focused: void;
+    };
+    /**
+     * Defines the title of the component.
+     * @default undefined
+     * @since 1.0.0-rc.15
+     * @public
+     */
+    titleText?: string;
+    /**
+     * Defines the subtitle of the component.
+     * @default undefined
+     * @since 1.0.0-rc.15
+     * @public
+     */
+    subtitleText?: string;
+    /**
+     * Defines the icon to be displayed as a graphical element within the component.
+     *
+     * Example:
+     *
+     * `<ui5-product-switch-item icon="palette">`
+     *
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @default undefined
+     * @public
+     */
+    icon?: string;
+    /**
+     * Defines a target where the `targetSrc` content must be open.
+     *
+     * Available options are:
+     *
+     * - `_self`
+     * - `_top`
+     * - `_blank`
+     * - `_parent`
+     * - `_search`
+     *
+     * **Note:** By default target will be open in the same frame as it was clicked.
+     * @default undefined
+     * @public
+     */
+    target?: string;
+    /**
+     * Defines the component target URI. Supports standard hyperlink behavior.
+     * @default undefined
+     * @public
+     */
+    targetSrc?: string;
+    /**
+     * Used to switch the active state (pressed or not) of the component.
+     * @private
+     */
+    private active;
+    /**
+     * Used to set the selected state of the component. Only one selected in a sequence.
+     * **Note:** Set by the `ProductSwitch`
+     */
+    selected: boolean;
+    /**
+     * Defines the component tabindex.
+     */
+    forcedTabIndex?: string;
+    /**
+     * Defines an image to be displayed instead of the standard icon.
+     *
+     * **Note:** The image slot takes precedence over the icon property.
+     * **Note:** We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment.
+     * @public
+     * @since 2.14.0
+     */
+    image: Slot<HTMLElement>;
+    _deactivate: () => void;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    _onmousedown(): void;
+    get _effectiveTarget(): string;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    _onfocusout(): void;
+    _onfocusin(): void;
+    _fireItemClick(): void;
+}
+export default ProductSwitchItem;

package/dist/ProductSwitchItem.js

@@ -0,0 +1,156 @@
+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 UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isSpace, isEnter, isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import ProductSwitchItemTemplate from "./ProductSwitchItemTemplate.js";
+// Styles
+import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
+/**
+ * @class
+ * ### Overview
+ * The `ui5-product-switch-item` web component represents the items displayed in the
+ * `ui5-product-switch` web component.
+ *
+ * **Note:** `ui5-product-switch-item` is not supported when used outside of `ui5-product-switch`.
+ *
+ * ### Keyboard Handling
+ * The `ui5-product-switch` provides advanced keyboard handling.
+ * When focused, the user can use the following keyboard
+ * shortcuts in order to perform a navigation:
+ *
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
+ *
+ * ### ES6 Module Import
+ * `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @implements {IProductSwitchItem}
+ * @since 1.0.0-rc.5
+ */
+let ProductSwitchItem = class ProductSwitchItem extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Used to switch the active state (pressed or not) of the component.
+         * @private
+         */
+        this.active = false;
+        /**
+         * Used to set the selected state of the component. Only one selected in a sequence.
+         * **Note:** Set by the `ProductSwitch`
+         */
+        this.selected = false;
+        this._deactivate = () => {
+            if (this.active) {
+                this.active = false;
+            }
+        };
+    }
+    onEnterDOM() {
+        document.addEventListener("mouseup", this._deactivate);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    onExitDOM() {
+        document.removeEventListener("mouseup", this._deactivate);
+    }
+    _onmousedown() {
+        this.active = true;
+    }
+    get _effectiveTarget() {
+        return this.target || "_self";
+    }
+    _onkeydown(e) {
+        if (isSpace(e) || isEnter(e)) {
+            this.active = true;
+        }
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this._fireItemClick();
+        }
+    }
+    _onkeyup(e) {
+        if (isSpace(e) || isEnter(e)) {
+            this.active = false;
+        }
+        if (isSpace(e)) {
+            if (isSpaceShift(e)) {
+                e.stopPropagation();
+            }
+            this._fireItemClick();
+        }
+    }
+    _onfocusout() {
+        this.active = false;
+    }
+    _onfocusin() {
+        this.fireDecoratorEvent("_focused");
+    }
+    _fireItemClick() {
+        this.fireDecoratorEvent("click", { item: this });
+    }
+};
+__decorate([
+    property()
+], ProductSwitchItem.prototype, "titleText", void 0);
+__decorate([
+    property()
+], ProductSwitchItem.prototype, "subtitleText", void 0);
+__decorate([
+    property()
+], ProductSwitchItem.prototype, "icon", void 0);
+__decorate([
+    property()
+], ProductSwitchItem.prototype, "target", void 0);
+__decorate([
+    property()
+], ProductSwitchItem.prototype, "targetSrc", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProductSwitchItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], ProductSwitchItem.prototype, "selected", void 0);
+__decorate([
+    property({ noAttribute: true })
+], ProductSwitchItem.prototype, "forcedTabIndex", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], ProductSwitchItem.prototype, "image", void 0);
+ProductSwitchItem = __decorate([
+    customElement({
+        tag: "ui5-product-switch-item",
+        renderer: jsxRenderer,
+        styles: ProductSwitchItemCss,
+        template: ProductSwitchItemTemplate,
+    })
+    /**
+     * Fired when the `ui5-product-switch-item` is activated either with a
+     * click/tap or by using the Enter or Space key.
+     * @public
+     */
+    ,
+    event("click", {
+        bubbles: true,
+    }),
+    event("_focused", {
+        bubbles: true,
+    })
+], ProductSwitchItem);
+ProductSwitchItem.define();
+export default ProductSwitchItem;
+//# sourceMappingURL=ProductSwitchItem.js.map

package/dist/ProductSwitchItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSwitchItem.js","sourceRoot":"","sources":["../src/ProductSwitchItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { isSpace, isEnter, isSpaceShift } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot-strict.js\";\nimport ProductSwitchItemTemplate from \"./ProductSwitchItemTemplate.js\";\nimport type { IProductSwitchItem } from \"./ProductSwitch.js\";\n\n// Styles\nimport ProductSwitchItemCss from \"./generated/themes/ProductSwitchItem.css.js\";\n\n/**\n * @class\n * ### Overview\n * The `ui5-product-switch-item` web component represents the items displayed in the\n * `ui5-product-switch` web component.\n *\n * **Note:** `ui5-product-switch-item` is not supported when used outside of `ui5-product-switch`.\n *\n * ### Keyboard Handling\n * The `ui5-product-switch` provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n *\n * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/ProductSwitchItem.js\";`\n * @constructor\n * @extends UI5Element\n * @public\n * @implements {IProductSwitchItem}\n * @since 1.0.0-rc.5\n */\n@customElement({\n\ttag: \"ui5-product-switch-item\",\n\trenderer: jsxRenderer,\n\tstyles: ProductSwitchItemCss,\n\ttemplate: ProductSwitchItemTemplate,\n})\n/**\n * Fired when the `ui5-product-switch-item` is activated either with a\n * click/tap or by using the Enter or Space key.\n * @public\n */\n@event(\"click\", {\n\tbubbles: true,\n})\n@event(\"_focused\", {\n\tbubbles: true,\n})\nclass ProductSwitchItem extends UI5Element implements IProductSwitchItem {\n\teventDetails!: {\n\t\tclick: { item: ProductSwitchItem },\n\t\t_focused: void,\n\t}\n\t/**\n\t * Defines the title of the component.\n\t * @default undefined\n\t * @since 1.0.0-rc.15\n\t * @public\n\t */\n\t@property()\n\ttitleText?: string;\n\n\t/**\n\t * Defines the subtitle of the component.\n\t * @default undefined\n\t * @since 1.0.0-rc.15\n\t * @public\n\t */\n\t@property()\n\tsubtitleText?: string;\n\n\t/**\n\t * Defines the icon to be displayed as a graphical element within the component.\n\t *\n\t * Example:\n\t *\n\t * `<ui5-product-switch-item icon=\"palette\">`\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines a target where the `targetSrc` content must be open.\n\t *\n\t * Available options are:\n\t *\n\t * - `_self`\n\t * - `_top`\n\t * - `_blank`\n\t * - `_parent`\n\t * - `_search`\n\t *\n\t * **Note:** By default target will be open in the same frame as it was clicked.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttarget?: string;\n\n\t/**\n\t * Defines the component target URI. Supports standard hyperlink behavior.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttargetSrc?: string;\n\n\t/**\n\t * Used to switch the active state (pressed or not) of the component.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tprivate active = false;\n\n\t/**\n\t * Used to set the selected state of the component. Only one selected in a sequence.\n\t * **Note:** Set by the `ProductSwitch`\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\n\t/**\n\t * Defines the component tabindex.\n\t */\n\t@property({ noAttribute: true })\n\tforcedTabIndex?: string;\n\n\t/**\n\t * Defines an image to be displayed instead of the standard icon.\n\t *\n\t * **Note:** The image slot takes precedence over the icon property.\n\t * **Note:** We recommend using non-interactive ui5-avatar with size S, Square shape and Transparent colorScheme for best alignment.\n\t * @public\n\t * @since 2.14.0\n\t */\n\t@slot({ type: HTMLElement })\n\timage!: Slot<HTMLElement>;\n\n\t_deactivate: () => void;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._deactivate = () => {\n\t\t\tif (this.active) {\n\t\t\t\tthis.active = false;\n\t\t\t}\n\t\t};\n\t}\n\n\tonEnterDOM() {\n\t\tdocument.addEventListener(\"mouseup\", this._deactivate);\n\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\t}\n\n\tonExitDOM() {\n\t\tdocument.removeEventListener(\"mouseup\", this._deactivate);\n\t}\n\n\t_onmousedown() {\n\t\tthis.active = true;\n\t}\n\n\tget _effectiveTarget() {\n\t\treturn this.target || \"_self\";\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tthis.active = true;\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e) || isEnter(e)) {\n\t\t\tthis.active = false;\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\tif (isSpaceShift(e)) {\n\t\t\t\te.stopPropagation();\n\t\t\t}\n\t\t\tthis._fireItemClick();\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\tthis.active = false;\n\t}\n\n\t_onfocusin() {\n\t\tthis.fireDecoratorEvent(\"_focused\");\n\t}\n\n\t_fireItemClick() {\n\t\tthis.fireDecoratorEvent(\"click\", { item: this });\n\t}\n}\n\nProductSwitchItem.define();\n\nexport default ProductSwitchItem;\n"]}

package/dist/ProductSwitchItemTemplate.d.ts

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

package/dist/ProductSwitchItemTemplate.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+export default function ProductSwitchItemTemplate() {
+    return (_jsx(_Fragment, { children: this.targetSrc ?
+            _jsx("a", { "data-sap-focus-ref": true, class: "ui5-product-switch-item-root", onFocusOut: this._onfocusout, onFocusIn: this._onfocusin, onMouseDown: this._onmousedown, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, tabindex: this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined, href: this.targetSrc, target: this._effectiveTarget, children: item.call(this) })
+            :
+                _jsx("div", { role: "listitem", class: "ui5-product-switch-item-root", "data-sap-focus-ref": true, onFocusOut: this._onfocusout, onFocusIn: this._onfocusin, onMouseDown: this._onmousedown, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, tabindex: this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined, children: item.call(this) }) }));
+}
+function item() {
+    return (_jsxs(_Fragment, { children: [this.image && this.image.length > 0 ? (_jsx("span", { class: "ui5-product-switch-item-image-placeholder", children: _jsx("slot", { name: "image" }) })) : (this.icon &&
+                _jsx(Icon, { class: "ui5-product-switch-item-icon", name: this.icon })), _jsxs("span", { class: "ui5-product-switch-item-text-content", children: [this.titleText &&
+                        _jsx("span", { class: "ui5-product-switch-item-title", children: this.titleText }), this.subtitleText &&
+                        _jsx("span", { class: "ui5-product-switch-item-subtitle", children: this.subtitleText })] })] }));
+}
+//# sourceMappingURL=ProductSwitchItemTemplate.js.map

package/dist/ProductSwitchItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSwitchItemTemplate.js","sourceRoot":"","sources":["../src/ProductSwitchItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,yBAAyB;IAChD,OAAO,CACN,4BACE,IAAI,CAAC,SAAS,CAAC,CAAC;YAChB,wCAEC,KAAK,EAAC,8BAA8B,EACpC,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,SAAS,EACzE,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,MAAM,EAAE,IAAI,CAAC,gBAAgB,YAE3B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GACd;YACJ,CAAC;gBACD,cACC,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,8BAEpC,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,SAAS,YAEvE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GACZ,GAEL,CACH,CAAC;AACH,CAAC;AAED,SAAS,IAAI;IACZ,OAAO,CACN,8BACE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACtC,eAAM,KAAK,EAAC,2CAA2C,YACtD,eAAM,IAAI,EAAC,OAAO,GAAQ,GACpB,CACP,CAAC,CAAC,CAAC,CACH,IAAI,CAAC,IAAI;gBACT,KAAC,IAAI,IACJ,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAE,IAAI,CAAC,IAAI,GACd,CACF,EAED,gBAAM,KAAK,EAAC,sCAAsC,aAChD,IAAI,CAAC,SAAS;wBACd,eAAM,KAAK,EAAC,+BAA+B,YAAE,IAAI,CAAC,SAAS,GAAQ,EAEnE,IAAI,CAAC,YAAY;wBACjB,eAAM,KAAK,EAAC,kCAAkC,YAAE,IAAI,CAAC,YAAY,GAAQ,IAEpE,IACL,CACH,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type ProductSwitchItem from \"./ProductSwitchItem.js\";\n\nexport default function ProductSwitchItemTemplate(this: ProductSwitchItem) {\n\treturn (\n\t\t<>\n\t\t\t{this.targetSrc ?\n\t\t\t\t<a\n\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\tclass=\"ui5-product-switch-item-root\"\n\t\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\t\ttabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}\n\t\t\t\t\thref={this.targetSrc}\n\t\t\t\t\ttarget={this._effectiveTarget}\n\t\t\t\t>\n\t\t\t\t\t{ item.call(this) }\n\t\t\t\t</a>\n\t\t\t\t:\n\t\t\t\t<div\n\t\t\t\t\trole=\"listitem\"\n\t\t\t\t\tclass=\"ui5-product-switch-item-root\"\n\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\t\ttabindex={this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined}\n\t\t\t\t>\n\t\t\t\t\t{ item.call(this) }\n\t\t\t\t</div>\n\t\t\t}\n\t\t</>\n\t);\n}\n\nfunction item(this: ProductSwitchItem) {\n\treturn (\n\t\t<>\n\t\t\t{this.image && this.image.length > 0 ? (\n\t\t\t\t<span class=\"ui5-product-switch-item-image-placeholder\">\n\t\t\t\t\t<slot name=\"image\"></slot>\n\t\t\t\t</span>\n\t\t\t) : (\n\t\t\t\tthis.icon &&\n\t\t\t\t<Icon\n\t\t\t\t\tclass=\"ui5-product-switch-item-icon\"\n\t\t\t\t\tname={this.icon}\n\t\t\t\t/>\n\t\t\t)}\n\n\t\t\t<span class=\"ui5-product-switch-item-text-content\">\n\t\t\t\t{this.titleText &&\n\t\t\t\t\t<span class=\"ui5-product-switch-item-title\">{this.titleText}</span>\n\t\t\t\t}\n\t\t\t\t{this.subtitleText &&\n\t\t\t\t\t<span class=\"ui5-product-switch-item-subtitle\">{this.subtitleText}</span>\n\t\t\t\t}\n\t\t\t</span>\n\t\t</>\n\t);\n}\n"]}

package/dist/ProductSwitchTemplate.d.ts

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

package/dist/ProductSwitchTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function ProductSwitchTemplate() {
+    return (_jsx("div", { role: "list", class: "ui5-product-switch-root", "aria-label": this._ariaLabelText, onFocusIn: this._onfocusin, onKeyDown: this._onkeydown, onClick: this.handleProductSwitchItemClick, children: _jsx("slot", {}) }));
+}
+//# sourceMappingURL=ProductSwitchTemplate.js.map

package/dist/ProductSwitchTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductSwitchTemplate.js","sourceRoot":"","sources":["../src/ProductSwitchTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC5C,OAAO,CACN,cACC,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,yBAAyB,gBACnB,IAAI,CAAC,cAAc,EAC/B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,4BAA4B,YAE1C,gBAAa,GACR,CACN,CAAC;AACH,CAAC","sourcesContent":["import type ProductSwitch from \"./ProductSwitch.js\";\n\nexport default function ProductSwitchTemplate(this: ProductSwitch) {\n\treturn (\n\t\t<div\n\t\t\trole=\"list\"\n\t\t\tclass=\"ui5-product-switch-root\"\n\t\t\taria-label={this._ariaLabelText}\n\t\t\tonFocusIn={this._onfocusin}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonClick={this.handleProductSwitchItemClick}\n\t\t>\n\t\t\t<slot></slot>\n\t\t</div>\n\t);\n}\n"]}

package/dist/Search.d.ts

@@ -0,0 +1,186 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type Popover from "@ui5/webcomponents/dist/Popover.js";
+import type List from "@ui5/webcomponents/dist/List.js";
+import SearchField from "./SearchField.js";
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type SearchItem from "./SearchItem.js";
+import type Button from "@ui5/webcomponents/dist/Button.js";
+import type IllustratedMessage from "./IllustratedMessage.js";
+import type SearchItemGroup from "./SearchItemGroup.js";
+import type SearchMessageArea from "./SearchMessageArea.js";
+import type { InputEventDetail } from "@ui5/webcomponents/dist/Input.js";
+import type Input from "@ui5/webcomponents/dist/Input.js";
+import type { PopupBeforeCloseEventDetail } from "@ui5/webcomponents/dist/Popup.js";
+import type Select from "@ui5/webcomponents/dist/Select.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+interface ISearchSuggestionItem extends UI5Element {
+    selected: boolean;
+    text: string;
+    items?: ISearchSuggestionItem[];
+}
+type SearchEventDetails = {
+    item?: ISearchSuggestionItem;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * A `ui5-search` is an input with suggestions, used for user search.
+ *
+ * The `ui5-search` 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
+ * - Suggestions - a list with available search suggestions
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/Search.js";`
+ *
+ * @constructor
+ * @extends SearchField
+ * @public
+ * @since 2.9.0
+ * @experimental
+ */
+declare class Search extends SearchField {
+    eventDetails: SearchField["eventDetails"] & {
+        search: SearchEventDetails;
+        "popup-action-press": void;
+        "open": void;
+        "close": void;
+    };
+    /**
+     * Indicates whether a loading indicator should be shown in the popup.
+     * @default false
+     * @public
+     */
+    loading: boolean;
+    /**
+     * Defines whether the value will be autcompleted to match an item.
+     * @default false
+     * @public
+     */
+    noTypeahead: boolean;
+    /**
+     * Defines the Search suggestion items.
+     *
+     * @public
+     */
+    items: DefaultSlot<SearchItem | SearchItemGroup>;
+    /**
+     * Defines the popup footer action button.
+     *
+     * @public
+     */
+    action: Slot<Button>;
+    /**
+     * Defines the illustrated message to be shown in the popup.
+     *
+     * @public
+     */
+    illustration: Slot<IllustratedMessage>;
+    /**
+     * Defines the illustrated message to be shown in the popup.
+     *
+     * @public
+     */
+    messageArea: Slot<SearchMessageArea>;
+    /**
+     * Indicates whether the items picker is open.
+     * @public
+     */
+    open: boolean;
+    /**
+     * Defines the inner stored value of the component.
+     *
+     * **Note:** The property is updated upon typing.
+     * @default ""
+     * @private
+     */
+    _innerValue?: string;
+    /**
+     * Determines whether the item selection should be performed on mobile devices.
+     * Similar to _performTextSelection on desktop
+     * @private
+     */
+    _performItemSelectionOnMobile?: boolean;
+    /**
+     * Based on the key pressed, determines if the autocomplete should be performed.
+     * @private
+     */
+    _shouldAutocomplete?: boolean;
+    /**
+     * Determines whether a text selection should be performed.
+     * @private
+     */
+    _performTextSelection?: boolean;
+    /**
+     * Holds the typed value from the user.
+     * @private
+     */
+    _typedInValue: string;
+    /**
+     * Holds the typed value before opening the picker.
+     * @private
+     */
+    _valueBeforeOpen: string;
+    /**
+     * Holds the currently proposed item which will be selected if the user presses Enter.
+     * @private
+     */
+    _proposedItem?: ISearchSuggestionItem;
+    /**
+     * This property is used during rendering to indicate that the user has started typing in the input
+     * @private
+     */
+    _isTyping: boolean;
+    static i18nBundle: I18nBundle;
+    constructor();
+    onBeforeRendering(): void;
+    onAfterRendering(): void;
+    _handleMobileInput(e: CustomEvent<InputEventDetail>): void;
+    _shouldPerformSelectionOnMobile(inputType: string): boolean;
+    _handleTypeAhead(item: ISearchSuggestionItem): void;
+    _startsWithMatchingItems(str: string): Array<ISearchSuggestionItem>;
+    _isGroupItem(item: HTMLElement): item is SearchItemGroup;
+    _isShowMoreItem(item: ISearchSuggestionItem): boolean;
+    _deselectItems(): void;
+    _selectMatchingItem(item: ISearchSuggestionItem): void;
+    _handleDown(e: KeyboardEvent): void;
+    _handleArrowDown(): void;
+    _handleInnerClick(): void;
+    _handleSearchIconPress(): void;
+    _handleEnter(): void;
+    _onMobileInputKeydown(e: KeyboardEvent): void;
+    _handleSearchEvent(): void;
+    _handleEscape(): void;
+    _handleInput(e: InputEvent): void;
+    _handleClear(): void;
+    _popoupHasAnyContent(): boolean;
+    _onFooterButtonKeyDown(e: KeyboardEvent): void;
+    _onItemKeydown(e: KeyboardEvent): void;
+    _onItemClick(e: CustomEvent): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onFocusOutSearch(e: FocusEvent): void;
+    _handleBeforeClose(e: CustomEvent<PopupBeforeCloseEventDetail>): void;
+    _handleCancel(): void;
+    _handleClose(): void;
+    _handleBeforeOpen(): void;
+    _handleOpen(): void;
+    _handleActionKeydown(e: KeyboardEvent): void;
+    _onFooterButtonClick(): void;
+    _getFirstMatchingItem(current: string): ISearchSuggestionItem | undefined;
+    _getPicker(): Popover;
+    _getItemsList(): List;
+    _getFooterButton(): Button;
+    get _flattenItems(): Array<ISearchSuggestionItem>;
+    get nativeInput(): HTMLInputElement | null | undefined;
+    get mobileInput(): Input | null;
+    get cancelButtonText(): string;
+    get suggestionsText(): string;
+    get scopeSelect(): Select | null;
+}
+export default Search;