@sapudex/web-components 0.114.2 → 0.117.1

package/dist/SecondaryNavigationItem.js

@@ -0,0 +1,287 @@
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import { isLeft, isRight, isUp, isDown, isEscape, isSpace, isEnter, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
+import UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import SecondaryNavigationItemTemplate from "./generated/templates/SecondaryNavigationItemTemplate.lit.js";
+// Styles
+import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationItem.css.js";
+export const menuItemRole = "menuitem";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-secondary-navigation-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SecondaryNavigationItem.js";</code>
+ *
+ * @constructor
+ * @extends UDExSecondaryNavigationItemBase
+ * @tagname udex-secondary-navigation-item
+ * @private
+ */
+let UDExSecondaryNavigationItem = class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines processed items.
+         *
+         * @private
+         * @default []
+         */
+        this._processedItems = [];
+        this._dropdownHistory = [];
+    }
+    onAfterRendering() {
+        if (this._shouldFocusFirstSubItem && this.isOpen) {
+            this.onFirstSubItemFocus();
+            this._shouldFocusFirstSubItem = false;
+        }
+    }
+    onBeforeRendering() {
+        this._subTitle = this.subActiveItemTitle || this._subTitle;
+    }
+    onItemClick() {
+        if (this.hasNestedItems) {
+            this.setDropdownItems();
+            this.toggleDropdown();
+        }
+        this.fireEvent("nav-item-click", { item: this });
+    }
+    onSubItemClick(e) {
+        const { index } = e.target;
+        const clickedItem = this._processedItems[index];
+        if (clickedItem.items) {
+            this.setDropdownHistory();
+            this.setNestedItems(clickedItem);
+        }
+        this.fireEvent("sub-item-click", {
+            item: clickedItem,
+        });
+    }
+    onBackClick() {
+        this.setPrevNestedItems();
+    }
+    toggleDropdown() {
+        this.isOpen = !this.isOpen;
+    }
+    closeDropdown() {
+        this.isOpen = false;
+    }
+    handleItemLinkKeyDown(e) {
+        if (isEnter(e) || isSpace(e)) {
+            e.preventDefault();
+            this.onItemClick();
+        }
+    }
+    handleItemButtonKeyDown(e) {
+        if (isEnter(e) || isSpace(e)) {
+            this.onShouldFocusFirstSubItem();
+        }
+    }
+    handleSubItemKeyDown(e) {
+        e.stopPropagation();
+        if (isEscape(e)) {
+            this.handleEscapeKey();
+        }
+        if (isLeft(e)) {
+            this.handleLeftArrow(e);
+        }
+        if (isRight(e)) {
+            this.handleRightArrow(e);
+        }
+        if (isUp(e)) {
+            e.preventDefault();
+            this.handleUpArrow(e);
+        }
+        if (isDown(e)) {
+            e.preventDefault();
+            this.handleDownArrow(e);
+        }
+        if (isHome(e)) {
+            e.preventDefault();
+            this.onFirstSubItemFocus();
+        }
+        if (isEnd(e)) {
+            e.preventDefault();
+            this.onLastSubItemFocus();
+        }
+        if (isEnter(e) || isSpace(e)) {
+            e.preventDefault();
+            this.handleEnterAndSpace(e);
+        }
+    }
+    handleUpArrow(e) {
+        const { index } = e.target;
+        const lastIndex = this.domNavItems.length - 1;
+        const previousIndex = index - 1 < 0 ? lastIndex : index - 1;
+        if (!(lastIndex === previousIndex)) {
+            this.domNavItems[previousIndex].focus();
+        }
+    }
+    handleDownArrow(e) {
+        const { index } = e.target;
+        const nextIndex = index + 1 > this.domNavItems.length - 1 ? 0 : index + 1;
+        if (!(nextIndex === 0)) {
+            this.domNavItems[nextIndex].focus();
+        }
+    }
+    handleLeftArrow(e) {
+        const { isBack } = e.target;
+        if (isBack) {
+            this.setPrevNestedItems();
+            this.onShouldFocusFirstSubItem();
+        }
+    }
+    handleRightArrow(e) {
+        const { hasItems, isBack } = e.target;
+        if (hasItems && !isBack) {
+            this.onSubItemClick(e);
+            this.onShouldFocusFirstSubItem();
+        }
+    }
+    handleEnterAndSpace(e) {
+        const { hasItems, isBack } = e.target;
+        if (isBack) {
+            this.onBackClick();
+            this.onShouldFocusFirstSubItem();
+            return;
+        }
+        this.onSubItemClick(e);
+        if (hasItems) {
+            this.onShouldFocusFirstSubItem();
+        }
+        else {
+            this.closeDropdown();
+            this.focus();
+        }
+    }
+    handleEscapeKey() {
+        this.closeDropdown();
+        this.focus();
+    }
+    setDropdownHistory() {
+        this._dropdownHistory.push(this._processedItems);
+    }
+    setPrevNestedItems() {
+        this._processedItems = this._dropdownHistory.pop();
+    }
+    setNestedItems({ title, items }) {
+        if (items) {
+            this._processedItems = [{ title, isBack: true }, ...items];
+        }
+    }
+    setDropdownItems() {
+        this._processedItems = this.subItems;
+    }
+    onFirstSubItemFocus() {
+        this.domNavItems[0].focus();
+    }
+    onLastSubItemFocus() {
+        this.domNavItems[this.domNavItems.length - 1].focus();
+    }
+    onShouldFocusFirstSubItem() {
+        this._shouldFocusFirstSubItem = true;
+    }
+    get domNavItems() {
+        const domNavItems = this.shadowRoot?.querySelectorAll("udex-secondary-navigation-sub-item");
+        return domNavItems ? Array.from(domNavItems) : [];
+    }
+    get hasNestedItems() {
+        return this.subItems.length > 0;
+    }
+    get isSubItemActive() {
+        return !!this.subActiveItem?.active;
+    }
+    get isActive() {
+        return this.isSubItemActive || this.active;
+    }
+    get subActiveItemTitle() {
+        return this.subActiveItem?.title;
+    }
+    get subActiveItem() {
+        return this.getActiveSubItem(this.subItems);
+    }
+    get isLink() {
+        return !this.hasNestedItems && !!this.path;
+    }
+    get itemRole() {
+        return this.role ? this.role : this.menuItemRole;
+    }
+    get menuItemRole() {
+        return menuItemRole;
+    }
+    get title() {
+        return this.label;
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExSecondaryNavigationItem.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String })
+], UDExSecondaryNavigationItem.prototype, "role", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExSecondaryNavigationItem.prototype, "buttons", void 0);
+__decorate([
+    property({ type: Object, multiple: true })
+], UDExSecondaryNavigationItem.prototype, "subItems", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSecondaryNavigationItem.prototype, "isOpen", void 0);
+__decorate([
+    property({ type: Object })
+], UDExSecondaryNavigationItem.prototype, "_processedItems", void 0);
+UDExSecondaryNavigationItem = __decorate([
+    customElement({
+        tag: "udex-secondary-navigation-item",
+        renderer: litRender,
+        styles: SecondaryNavigationItemCss,
+        template: SecondaryNavigationItemTemplate,
+        dependencies: [UI5Icon, UDExSecondaryNavigationSubItem],
+    })
+    /**
+     * Fires when item is clicked
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("nav-item-click", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fires when dropdown item is clicked
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("sub-item-click", {
+        detail: {
+            item: { type: Array },
+        },
+    })
+], UDExSecondaryNavigationItem);
+UDExSecondaryNavigationItem.define();
+export default UDExSecondaryNavigationItem;
+//# sourceMappingURL=SecondaryNavigationItem.js.map

package/dist/SecondaryNavigationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigationItem.js","sourceRoot":"","sources":["../src/SecondaryNavigationItem.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport {\n  isLeft,\n  isRight,\n  isUp,\n  isDown,\n  isEscape,\n  isSpace,\n  isEnter,\n  isHome,\n  isEnd,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UDExSecondaryNavigationSubItem from \"./SecondaryNavigationSubItem.js\";\nimport UDExSecondaryNavigationItemBase, { NavItem } from \"./SecondaryNavigationItemBase.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nimport SecondaryNavigationItemTemplate from \"./generated/templates/SecondaryNavigationItemTemplate.lit.js\";\n\n// Styles\nimport SecondaryNavigationItemCss from \"./generated/themes/SecondaryNavigationItem.css.js\";\n\nexport const menuItemRole: string = \"menuitem\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-secondary-navigation-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/SecondaryNavigationItem.js\";</code>\n *\n * @constructor\n * @extends UDExSecondaryNavigationItemBase\n * @tagname udex-secondary-navigation-item\n * @private\n */\n@customElement({\n  tag: \"udex-secondary-navigation-item\",\n  renderer: litRender,\n  styles: SecondaryNavigationItemCss,\n  template: SecondaryNavigationItemTemplate,\n  dependencies: [UI5Icon, UDExSecondaryNavigationSubItem],\n})\n\n/**\n * Fires when item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"nav-item-click\", {\n  detail: {\n    item: { type: HTMLElement },\n  },\n})\n\n/**\n * Fires when dropdown item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"sub-item-click\", {\n  detail: {\n    item: { type: Array },\n  },\n})\n\nclass UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {\n  /**\n   * Defines an aria label for item\n   *\n   * @public\n   */\n  @property({ type: String })\n    ariaLabel!: string;\n\n  /**\n   * Defines a role for item\n   *\n   * @public\n   */\n  @property({ type: String })\n    role!: string;\n\n  /**\n   * Defines the content of the item.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    buttons!: Array<HTMLElement>;\n\n  /**\n   * List of the sub items\n   *\n   * @default \"[]\"\n   * @public\n   */\n  @property({ type: Object, multiple: true })\n    subItems!: Array<NavItem>;\n\n  /**\n   * Defines if dropdown is opened.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    isOpen!: boolean;\n\n  /**\n   * Defines processed items.\n   *\n   * @private\n   * @default []\n   */\n  @property({ type: Object })\n    _processedItems: Array<NavItem> = [];\n\n  _dropdownHistory: Array<Array<NavItem>> = [];\n  _shouldFocusFirstSubItem!: boolean;\n  _subTitle!: string | undefined;\n\n  onAfterRendering(): void {\n    if (this._shouldFocusFirstSubItem && this.isOpen) {\n      this.onFirstSubItemFocus();\n      this._shouldFocusFirstSubItem = false;\n    }\n  }\n\n  onBeforeRendering() : void {\n    this._subTitle = this.subActiveItemTitle || this._subTitle;\n  }\n\n  onItemClick(): void {\n    if (this.hasNestedItems) {\n      this.setDropdownItems();\n      this.toggleDropdown();\n    }\n\n    this.fireEvent(\"nav-item-click\", { item: this });\n  }\n\n  onSubItemClick(e: Event): void {\n    const { index } = e.target as UDExSecondaryNavigationSubItem;\n    const clickedItem = this._processedItems[index];\n\n    if (clickedItem.items) {\n      this.setDropdownHistory();\n      this.setNestedItems(clickedItem);\n    }\n\n    this.fireEvent(\"sub-item-click\", {\n      item: clickedItem,\n    });\n  }\n\n  onBackClick(): void {\n    this.setPrevNestedItems();\n  }\n\n  toggleDropdown(): void {\n    this.isOpen = !this.isOpen;\n  }\n\n  closeDropdown(): void {\n    this.isOpen = false;\n  }\n\n  handleItemLinkKeyDown(e: KeyboardEvent): void {\n    if (isEnter(e) || isSpace(e)) {\n      e.preventDefault();\n      this.onItemClick();\n    }\n  }\n\n  handleItemButtonKeyDown(e: KeyboardEvent): void {\n    if (isEnter(e) || isSpace(e)) {\n      this.onShouldFocusFirstSubItem();\n    }\n  }\n\n  handleSubItemKeyDown(e: KeyboardEvent): void {\n    e.stopPropagation();\n    if (isEscape(e)) {\n      this.handleEscapeKey();\n    }\n    if (isLeft(e)) {\n      this.handleLeftArrow(e);\n    }\n    if (isRight(e)) {\n      this.handleRightArrow(e);\n    }\n    if (isUp(e)) {\n      e.preventDefault();\n      this.handleUpArrow(e);\n    }\n    if (isDown(e)) {\n      e.preventDefault();\n      this.handleDownArrow(e);\n    }\n    if (isHome(e)) {\n      e.preventDefault();\n      this.onFirstSubItemFocus();\n    }\n    if (isEnd(e)) {\n      e.preventDefault();\n      this.onLastSubItemFocus();\n    }\n    if (isEnter(e) || isSpace(e)) {\n      e.preventDefault();\n      this.handleEnterAndSpace(e);\n    }\n  }\n\n  handleUpArrow(e: KeyboardEvent): void {\n    const { index } = e.target as UDExSecondaryNavigationSubItem;\n    const lastIndex = this.domNavItems.length - 1;\n    const previousIndex = index - 1 < 0 ? lastIndex : index - 1;\n    if (!(lastIndex === previousIndex)) {\n      this.domNavItems[previousIndex].focus();\n    }\n  }\n\n  handleDownArrow(e: KeyboardEvent): void {\n    const { index } = e.target as UDExSecondaryNavigationSubItem;\n    const nextIndex = index + 1 > this.domNavItems.length - 1 ? 0 : index + 1;\n    if (!(nextIndex === 0)) {\n      this.domNavItems[nextIndex].focus();\n    }\n  }\n\n  handleLeftArrow(e: KeyboardEvent): void {\n    const { isBack } = e.target as UDExSecondaryNavigationSubItem;\n    if (isBack) {\n      this.setPrevNestedItems();\n      this.onShouldFocusFirstSubItem();\n    }\n  }\n\n  handleRightArrow(e: KeyboardEvent): void {\n    const { hasItems, isBack } = e.target as UDExSecondaryNavigationSubItem;\n    if (hasItems && !isBack) {\n      this.onSubItemClick(e);\n      this.onShouldFocusFirstSubItem();\n    }\n  }\n\n  handleEnterAndSpace(e: KeyboardEvent): void {\n    const { hasItems, isBack } = e.target as UDExSecondaryNavigationSubItem;\n    if (isBack) {\n      this.onBackClick();\n      this.onShouldFocusFirstSubItem();\n      return;\n    }\n\n    this.onSubItemClick(e);\n\n    if (hasItems) {\n      this.onShouldFocusFirstSubItem();\n    } else {\n      this.closeDropdown();\n      this.focus();\n    }\n  }\n\n  handleEscapeKey(): void {\n    this.closeDropdown();\n    this.focus();\n  }\n\n  setDropdownHistory(): void {\n    this._dropdownHistory.push(this._processedItems);\n  }\n\n  setPrevNestedItems(): void {\n    this._processedItems = this._dropdownHistory.pop()!;\n  }\n\n  setNestedItems({ title, items } : NavItem): void {\n    if (items) {\n      this._processedItems = [{ title, isBack: true }, ...items];\n    }\n  }\n\n  setDropdownItems(): void {\n    this._processedItems = this.subItems;\n  }\n\n  onFirstSubItemFocus(): void {\n    this.domNavItems[0].focus();\n  }\n\n  onLastSubItemFocus(): void {\n    this.domNavItems[this.domNavItems.length - 1].focus();\n  }\n\n  onShouldFocusFirstSubItem(): void {\n    this._shouldFocusFirstSubItem = true;\n  }\n\n  get domNavItems(): Array<UDExSecondaryNavigationSubItem> {\n    const domNavItems = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationSubItem>(\"udex-secondary-navigation-sub-item\");\n    return domNavItems ? Array.from(domNavItems) : [];\n  }\n\n  get hasNestedItems(): boolean {\n    return this.subItems.length > 0;\n  }\n\n  get isSubItemActive(): boolean {\n    return !!this.subActiveItem?.active;\n  }\n\n  get isActive(): boolean {\n    return this.isSubItemActive || this.active;\n  }\n\n  get subActiveItemTitle(): string | undefined {\n    return this.subActiveItem?.title;\n  }\n\n  get subActiveItem(): NavItem | undefined {\n    return this.getActiveSubItem(this.subItems);\n  }\n\n  get isLink(): boolean {\n    return !this.hasNestedItems && !!this.path;\n  }\n\n  get itemRole(): string {\n    return this.role ? this.role : this.menuItemRole;\n  }\n\n  get menuItemRole(): string {\n    return menuItemRole;\n  }\n\n  get title(): string {\n    return this.label;\n  }\n}\n\nUDExSecondaryNavigationItem.define();\n\nexport default UDExSecondaryNavigationItem;\n"]}

package/dist/SecondaryNavigationItemBase.d.ts

@@ -0,0 +1,68 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+export declare enum Target {
+    _blank = "_blank",
+    _parent = "_parent",
+    _self = "_self",
+    _top = "_top"
+}
+export type NavItem = {
+    path?: string;
+    mobileLinkTitle?: string;
+    target?: Target;
+    title: string;
+    active?: boolean;
+    isBack?: boolean;
+    items?: Array<NavItem>;
+};
+/**
+ * @class
+ *
+ * A class to serve as a foundation
+ * for the <code>UDExSecondaryNavigationItem</code> and <code>UDExSecondaryNavigationSubItem</code> classes.
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExSecondaryNavigationItemBase extends UI5Element {
+    /**
+     * Defines active state for the item
+     *
+     * @public
+     */
+    active: boolean;
+    /**
+     * Defines path for the item
+     *
+     * @public
+     */
+    path: string;
+    /**
+     * Defines target for the item
+     *
+     * @public
+     */
+    target: string;
+    /**
+     * Defines subTitle for the item
+     *
+     * @public
+     */
+    subTitle: string;
+    /**
+     * Defines label for the item
+     *
+     * @public
+     */
+    label: string;
+    /**
+     * Defines the index for the item.
+     *
+     * @public
+     */
+    index: number;
+    onEnterDOM(): void;
+    getActiveSubItem(data: Array<NavItem>): NavItem | undefined;
+}
+export default UDExSecondaryNavigationItemBase;

package/dist/SecondaryNavigationItemBase.js

@@ -0,0 +1,78 @@
+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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+export var Target;
+(function (Target) {
+    Target["_blank"] = "_blank";
+    Target["_parent"] = "_parent";
+    Target["_self"] = "_self";
+    Target["_top"] = "_top";
+})(Target || (Target = {}));
+/**
+ * @class
+ *
+ * A class to serve as a foundation
+ * for the <code>UDExSecondaryNavigationItem</code> and <code>UDExSecondaryNavigationSubItem</code> classes.
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @public
+ */
+let UDExSecondaryNavigationItemBase = class UDExSecondaryNavigationItemBase extends UI5Element {
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    getActiveSubItem(data) {
+        let activeItem;
+        const findActiveItem = (array) => {
+            array.forEach(item => {
+                if (item.active === true) {
+                    activeItem = item;
+                    return;
+                }
+                if (item.items) {
+                    findActiveItem(item.items);
+                }
+            });
+        };
+        findActiveItem(data);
+        return activeItem;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UDExSecondaryNavigationItemBase.prototype, "active", void 0);
+__decorate([
+    property({ type: String })
+], UDExSecondaryNavigationItemBase.prototype, "path", void 0);
+__decorate([
+    property({ type: String })
+], UDExSecondaryNavigationItemBase.prototype, "target", void 0);
+__decorate([
+    property({ type: String })
+], UDExSecondaryNavigationItemBase.prototype, "subTitle", void 0);
+__decorate([
+    property({ type: String })
+], UDExSecondaryNavigationItemBase.prototype, "label", void 0);
+__decorate([
+    property({ validator: Integer })
+], UDExSecondaryNavigationItemBase.prototype, "index", void 0);
+UDExSecondaryNavigationItemBase = __decorate([
+    customElement({
+        renderer: litRender,
+    })
+], UDExSecondaryNavigationItemBase);
+export default UDExSecondaryNavigationItemBase;
+//# sourceMappingURL=SecondaryNavigationItemBase.js.map

package/dist/SecondaryNavigationItemBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigationItemBase.js","sourceRoot":"","sources":["../src/SecondaryNavigationItemBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,OAAO,MAAM,+CAA+C,CAAC;AAEpE,MAAM,CAAN,IAAY,MAKX;AALD,WAAY,MAAM;IAChB,2BAAiB,CAAA;IACjB,6BAAmB,CAAA;IACnB,yBAAe,CAAA;IACf,uBAAa,CAAA;AACf,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB;AAYD;;;;;;;;;;GAUG;AAMH,IAAM,+BAA+B,GAArC,MAAM,+BAAgC,SAAQ,UAAU;IAiDtD,UAAU;QACR,IAAI,SAAS,EAAE,EAAE;YACf,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;SAClC;IACH,CAAC;IAED,gBAAgB,CAAC,IAAoB;QACnC,IAAI,UAAU,CAAC;QACf,MAAM,cAAc,GAAG,CAAC,KAAqB,EAAE,EAAE;YAC/C,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;gBACnB,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,EAAE;oBACxB,UAAU,GAAG,IAAI,CAAC;oBAClB,OAAO;iBACR;gBACD,IAAI,IAAI,CAAC,KAAK,EAAE;oBACd,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBAC5B;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,OAAO,UAAU,CAAC;IACpB,CAAC;CACF,CAAA;AAjEG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+DACT;AAQjB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DACX;AAQd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DACT;AAQhB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEACP;AAQlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DACV;AAQf;IADD,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;8DAChB;AA/Cb,+BAA+B;IAJpC,aAAa,CAAC;QACb,QAAQ,EAAE,SAAS;KACpB,CAAC;GAEI,+BAA+B,CAwEpC;AAED,eAAe,+BAA+B,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\n\nexport enum Target {\n  _blank = \"_blank\",\n  _parent = \"_parent\",\n  _self = \"_self\",\n  _top = \"_top\",\n}\n\nexport type NavItem = {\n  path?: string;\n  mobileLinkTitle?: string;\n  target?: Target;\n  title: string;\n  active?: boolean;\n  isBack?: boolean;\n  items?: Array<NavItem>;\n}\n\n/**\n * @class\n *\n * A class to serve as a foundation\n * for the <code>UDExSecondaryNavigationItem</code> and <code>UDExSecondaryNavigationSubItem</code> classes.\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @public\n */\n\n@customElement({\n  renderer: litRender,\n})\n\nclass UDExSecondaryNavigationItemBase extends UI5Element {\n  /**\n   * Defines active state for the item\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    active!: boolean;\n\n  /**\n   * Defines path for the item\n   *\n   * @public\n   */\n  @property({ type: String })\n    path!: string;\n\n  /**\n   * Defines target for the item\n   *\n   * @public\n   */\n  @property({ type: String })\n    target!: string;\n\n  /**\n   * Defines subTitle for the item\n   *\n   * @public\n   */\n  @property({ type: String })\n    subTitle!: string;\n\n  /**\n   * Defines label for the item\n   *\n   * @public\n   */\n  @property({ type: String })\n    label!: string;\n\n  /**\n   * Defines the index for the item.\n   *\n   * @public\n   */\n  @property({ validator: Integer })\n    index!: number;\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  getActiveSubItem(data: Array<NavItem>): NavItem | undefined {\n    let activeItem;\n    const findActiveItem = (array: Array<NavItem>) => {\n      array.forEach(item => {\n        if (item.active === true) {\n          activeItem = item;\n          return;\n        }\n        if (item.items) {\n          findActiveItem(item.items);\n        }\n      });\n    };\n\n    findActiveItem(data);\n    return activeItem;\n  }\n}\n\nexport default UDExSecondaryNavigationItemBase;\n"]}

package/dist/SecondaryNavigationSubItem.d.ts

@@ -0,0 +1,52 @@
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-secondary-navigation-sub-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SecondaryNavigationSubItem.js";</code>
+ *
+ * @constructor
+ * @extends UDExSecondaryNavigationItemBase
+ * @tagname udex-secondary-navigation-sub-item
+ * @public
+ */
+declare class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
+    /**
+     * Defines active item.
+     *
+     * @public
+     * @default false
+     */
+    isActive: boolean;
+    /**
+     * Defines back item.
+     *
+     * @public
+     * @default false
+     */
+    isBack: boolean;
+    /**
+     * List of the nested items
+     *
+     * @default "[]"
+     * @public
+     */
+    nestedItems: Array<NavItem>;
+    static i18nBundle: any;
+    static onDefine(): Promise<void>;
+    onItemClick(): void;
+    onBackItemClick(): void;
+    get hasItems(): boolean;
+    get isSubItemActive(): boolean;
+    get backButtonLabel(): string;
+}
+export default UDExSecondaryNavigationSubItem;

package/dist/SecondaryNavigationSubItem.js

@@ -0,0 +1,102 @@
+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 UDExSecondaryNavigationSubItem_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.js";
+import { BACK_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
+import SecondaryNavigationSubItemTemplate from "./generated/templates/SecondaryNavigationSubItemTemplate.lit.js";
+// Styles
+import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigationSubItem.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-secondary-navigation-sub-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SecondaryNavigationSubItem.js";</code>
+ *
+ * @constructor
+ * @extends UDExSecondaryNavigationItemBase
+ * @tagname udex-secondary-navigation-sub-item
+ * @public
+ */
+let UDExSecondaryNavigationSubItem = UDExSecondaryNavigationSubItem_1 = class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
+    static async onDefine() {
+        UDExSecondaryNavigationSubItem_1.i18nBundle = await getI18nBundle("udex-secondary-navigation-sub-item");
+    }
+    onItemClick() {
+        this.fireEvent("sub-item-click", {
+            item: this,
+        });
+    }
+    onBackItemClick() {
+        this.fireEvent("back-item-click");
+    }
+    get hasItems() {
+        return !!this.nestedItems.length;
+    }
+    get isSubItemActive() {
+        return !!this.getActiveSubItem(this.nestedItems)?.active;
+    }
+    get backButtonLabel() {
+        const label = UDExSecondaryNavigationSubItem_1.i18nBundle.getText(BACK_BUTTON_LABEL);
+        return `${label} ${this.label}`;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UDExSecondaryNavigationSubItem.prototype, "isActive", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSecondaryNavigationSubItem.prototype, "isBack", void 0);
+__decorate([
+    property({ type: Object, multiple: true })
+], UDExSecondaryNavigationSubItem.prototype, "nestedItems", void 0);
+UDExSecondaryNavigationSubItem = UDExSecondaryNavigationSubItem_1 = __decorate([
+    customElement({
+        tag: "udex-secondary-navigation-sub-item",
+        renderer: litRender,
+        styles: SecondaryNavigationSubItemCss,
+        template: SecondaryNavigationSubItemTemplate,
+        dependencies: [UI5Icon],
+    })
+    /**
+     * Fires when item is clicked
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("sub-item-click", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+    /**
+     * Fires when back item is clicked
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("back-item-click")
+], UDExSecondaryNavigationSubItem);
+UDExSecondaryNavigationSubItem.define();
+export default UDExSecondaryNavigationSubItem;
+//# sourceMappingURL=SecondaryNavigationSubItem.js.map

package/dist/SecondaryNavigationSubItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNavigationSubItem.js","sourceRoot":"","sources":["../src/SecondaryNavigationSubItem.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,mDAAmD,CAAC;AAC3D,OAAO,kDAAkD,CAAC;AAC1D,OAAO,+BAA4C,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,kCAAkC,MAAM,iEAAiE,CAAC;AAEjH,SAAS;AACT,OAAO,6BAA6B,MAAM,sDAAsD,CAAC;AAEjG;;;;;;;;;;;;;;;;;GAiBG;AA6BH,IAAM,8BAA8B,sCAApC,MAAM,8BAA+B,SAAQ,+BAA+B;IA8B1E,MAAM,CAAC,KAAK,CAAC,QAAQ;QACnB,gCAA8B,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,oCAAoC,CAAC,CAAC;IACxG,CAAC;IAED,WAAW;QACT,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE;YAC/B,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;IACL,CAAC;IAED,eAAe;QACb,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACpC,CAAC;IAED,IAAI,QAAQ;QACV,OAAO,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;IACnC,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC3D,CAAC;IAED,IAAI,eAAe;QACjB,MAAM,KAAK,GAAG,gCAA8B,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAW,CAAC;QAC7F,OAAO,GAAG,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC;CACF,CAAA;AAhDG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gEACP;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8DACT;AASjB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;mEACZ;AA1B3B,8BAA8B;IA5BnC,aAAa,CAAC;QACb,GAAG,EAAE,oCAAoC;QACzC,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,6BAA6B;QACrC,QAAQ,EAAE,kCAAkC;QAC5C,YAAY,EAAE,CAAC,OAAO,CAAC;KACxB,CAAC;IAEF;;;;;OAKG;;IACF,KAAK,CAAC,gBAAgB,EAAE;QACvB,MAAM,EAAE;YACN,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAC5B;KACF,CAAC;IAEF;;;;;OAKG;;IACF,KAAK,CAAC,iBAAiB,CAAC;GAEnB,8BAA8B,CAwDnC;AAED,8BAA8B,CAAC,MAAM,EAAE,CAAC;AAExC,eAAe,8BAA8B,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport UDExSecondaryNavigationItemBase, { NavItem } from \"./SecondaryNavigationItemBase.js\";\nimport { BACK_BUTTON_LABEL } from \"./generated/i18n/i18n-defaults.js\";\n\nimport SecondaryNavigationSubItemTemplate from \"./generated/templates/SecondaryNavigationSubItemTemplate.lit.js\";\n\n// Styles\nimport SecondaryNavigationSubItemCss from \"./generated/themes/SecondaryNavigationSubItem.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-secondary-navigation-sub-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/SecondaryNavigationSubItem.js\";</code>\n *\n * @constructor\n * @extends UDExSecondaryNavigationItemBase\n * @tagname udex-secondary-navigation-sub-item\n * @public\n */\n@customElement({\n  tag: \"udex-secondary-navigation-sub-item\",\n  renderer: litRender,\n  styles: SecondaryNavigationSubItemCss,\n  template: SecondaryNavigationSubItemTemplate,\n  dependencies: [UI5Icon],\n})\n\n/**\n * Fires when item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"sub-item-click\", {\n  detail: {\n    item: { type: HTMLElement },\n  },\n})\n\n/**\n * Fires when back item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"back-item-click\")\n\nclass UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {\n  /**\n   * Defines active item.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    isActive!: boolean;\n\n  /**\n   * Defines back item.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    isBack!: boolean;\n\n  /**\n   * List of the nested items\n   *\n   * @default \"[]\"\n   * @public\n   */\n  @property({ type: Object, multiple: true })\n    nestedItems!: Array<NavItem>;\n\n  static i18nBundle: any;\n\n  static async onDefine(): Promise<void> {\n    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle(\"udex-secondary-navigation-sub-item\");\n  }\n\n  onItemClick(): void {\n    this.fireEvent(\"sub-item-click\", {\n      item: this,\n    });\n  }\n\n  onBackItemClick(): void {\n    this.fireEvent(\"back-item-click\");\n  }\n\n  get hasItems(): boolean {\n    return !!this.nestedItems.length;\n  }\n\n  get isSubItemActive(): boolean {\n    return !!this.getActiveSubItem(this.nestedItems)?.active;\n  }\n\n  get backButtonLabel(): string {\n    const label = UDExSecondaryNavigationSubItem.i18nBundle.getText(BACK_BUTTON_LABEL) as string;\n    return `${label} ${this.label}`;\n  }\n}\n\nUDExSecondaryNavigationSubItem.define();\n\nexport default UDExSecondaryNavigationSubItem;\n"]}

package/dist/SelectBox.d.ts

@@ -149,6 +149,7 @@ declare class UDExSelectBox extends UDExSearchableListBase {
     handleKeyDownTrigger(e: KeyboardEvent): void;
     handleKeyDownTag(e: KeyboardEvent): void;
     handleKeyDownDropdown(e: KeyboardEvent): void;
+    handleKeyDownSearch(e: CustomEvent): void;
     handleOutsideClick(): void;
     openDropdown(): void;
     closeDropdown(): void;