@sapudex/web-components 0.111.0

package/dist/MastheadMenuItem.d.ts

@@ -0,0 +1,105 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+export declare enum ItemType {
+    Heading = "Heading",
+    Button = "Button",
+    Link = "Link"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>masthead-menu-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadMenuItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExMastheadMenuItem extends UI5Element {
+    /**
+     * Defines the type of the item.
+     *
+     * @default "Link"
+     * @public
+     */
+    type: `${ItemType}`;
+    /**
+     * Controls the ARIA role of the item
+     *
+     * @default ""
+     * @public
+     */
+    accessibleRole: string;
+    /**
+     * Defines the label of the component.
+     *
+     * @default ""
+     * @public
+     */
+    label: string;
+    /**
+     * Defines the url of the component.
+     *
+     * @default ""
+     * @public
+     */
+    url?: string;
+    /**
+     * Defines the badge of the component.
+     *
+     * @default ""
+     * @public
+     */
+    badge?: string;
+    /**
+     * Defines the externalLink of the component.
+     *
+     *
+     * @public
+     * @default false
+     */
+    externalLink?: boolean;
+    /**
+     * Defines the border for component.
+     *
+     *
+     * @public
+     * @default false
+     */
+    hasBorder?: boolean;
+    /**
+     * Defines the start position of icon arrow.
+     *
+     *
+     * @public
+     * @default false
+     */
+    iconStart?: boolean;
+    /**
+     * Defines the end position of icon arrow.
+     *
+     *
+     * @public
+     * @default false
+     */
+    iconEnd?: boolean;
+    onEnterDOM(): void;
+    handleClick(): void;
+    get rootClass(): string;
+    get labelClass(): string;
+    get isHeadingType(): boolean;
+    get isButtonType(): boolean;
+    get isActive(): boolean;
+    get target(): string;
+    get lastWordOfLabel(): string | undefined;
+    get leadingWordsOfLabel(): string;
+}
+export default UDExMastheadMenuItem;

package/dist/MastheadMenuItem.js

@@ -0,0 +1,129 @@
+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 customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import MastheadMenuItemTemplate from "./generated/templates/MastheadMenuItemTemplate.lit.js";
+// Styles
+import MastheadMenuItemCss from "./generated/themes/MastheadMenuItem.css.js";
+export var ItemType;
+(function (ItemType) {
+    ItemType["Heading"] = "Heading";
+    ItemType["Button"] = "Button";
+    ItemType["Link"] = "Link";
+})(ItemType || (ItemType = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>masthead-menu-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadMenuItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExMastheadMenuItem = class UDExMastheadMenuItem extends UI5Element {
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    handleClick() {
+        this.fireEvent("click", { item: this });
+    }
+    get rootClass() {
+        const badgeClass = this.badge ? "udex-masthead-menu-item_badge" : "";
+        const rootClass = this.isHeadingType ? "udex-masthead-menu-item_is-header" : "udex-masthead-menu-item_is-list";
+        return `${rootClass} ${badgeClass}`;
+    }
+    get labelClass() {
+        const root = "udex-masthead-menu-item__label";
+        return this.externalLink ? `${root} udex-masthead-menu-item__label_with-icon` : `${root}`;
+    }
+    get isHeadingType() {
+        return this.type === ItemType.Heading;
+    }
+    get isButtonType() {
+        return this.type === ItemType.Button;
+    }
+    get isActive() {
+        return (this.type === ItemType.Link || !!this.url) && !this.isButtonType;
+    }
+    get target() {
+        return this.externalLink ? "_blank" : "_self";
+    }
+    get lastWordOfLabel() {
+        return this.label.split(" ").pop();
+    }
+    get leadingWordsOfLabel() {
+        const leadingWords = this.label.split(" ").slice(0, -1).join(" ");
+        return `${leadingWords} `;
+    }
+};
+__decorate([
+    property({ type: ItemType, defaultValue: ItemType.Link })
+], UDExMastheadMenuItem.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadMenuItem.prototype, "accessibleRole", void 0);
+__decorate([
+    property()
+], UDExMastheadMenuItem.prototype, "label", void 0);
+__decorate([
+    property()
+], UDExMastheadMenuItem.prototype, "url", void 0);
+__decorate([
+    property()
+], UDExMastheadMenuItem.prototype, "badge", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadMenuItem.prototype, "externalLink", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadMenuItem.prototype, "hasBorder", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadMenuItem.prototype, "iconStart", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadMenuItem.prototype, "iconEnd", void 0);
+UDExMastheadMenuItem = __decorate([
+    customElement({
+        tag: "udex-masthead-menu-item",
+        renderer: litRender,
+        styles: MastheadMenuItemCss,
+        template: MastheadMenuItemTemplate,
+        dependencies: [Icon],
+    })
+    /**
+     * Fires when item button is clicked
+     *
+     * @public
+     */
+    ,
+    event("click", {
+        detail: {
+            item: { type: HTMLElement },
+        },
+    })
+], UDExMastheadMenuItem);
+UDExMastheadMenuItem.define();
+export default UDExMastheadMenuItem;
+//# sourceMappingURL=MastheadMenuItem.js.map

package/dist/MastheadMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MastheadMenuItem.js","sourceRoot":"","sources":["../src/MastheadMenuItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\n\nimport MastheadMenuItemTemplate from \"./generated/templates/MastheadMenuItemTemplate.lit.js\";\n\n// Styles\nimport MastheadMenuItemCss from \"./generated/themes/MastheadMenuItem.css.js\";\n\nexport enum ItemType {\n  Heading = \"Heading\",\n  Button = \"Button\",\n  Link = \"Link\"\n}\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>masthead-menu-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/MastheadMenuItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-masthead-menu-item\",\n  renderer: litRender,\n  styles: MastheadMenuItemCss,\n  template: MastheadMenuItemTemplate,\n  dependencies: [Icon],\n})\n\n/**\n * Fires when item button is clicked\n *\n * @public\n */\n@event(\"click\", {\n  detail: {\n    item: { type: HTMLElement },\n  },\n})\nclass UDExMastheadMenuItem extends UI5Element {\n  /**\n   * Defines the type of the item.\n   *\n   * @default \"Link\"\n   * @public\n   */\n  @property({ type: ItemType, defaultValue: ItemType.Link })\n    type!: `${ItemType}`;\n\n  /**\n   * Controls the ARIA role of the item\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleRole!: string;\n\n  /**\n   * Defines the label of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    label!: string;\n\n  /**\n   * Defines the url of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    url?: string;\n\n  /**\n   * Defines the badge of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    badge?: string;\n\n  /**\n   * Defines the externalLink of the component.\n   *\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    externalLink?: boolean;\n\n  /**\n   * Defines the border for component.\n   *\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    hasBorder?: boolean;\n\n  /**\n   * Defines the start position of icon arrow.\n   *\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    iconStart?: boolean;\n\n  /**\n   * Defines the end position of icon arrow.\n   *\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    iconEnd?: boolean;\n\n  onEnterDOM() {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n  handleClick() {\n    this.fireEvent(\"click\", { item: this });\n  }\n\n  get rootClass(): string {\n    const badgeClass = this.badge ? \"udex-masthead-menu-item_badge\" : \"\";\n    const rootClass = this.isHeadingType ? \"udex-masthead-menu-item_is-header\" : \"udex-masthead-menu-item_is-list\";\n    return `${rootClass} ${badgeClass}`;\n  }\n\n  get labelClass(): string {\n    const root = \"udex-masthead-menu-item__label\";\n    return this.externalLink ? `${root} udex-masthead-menu-item__label_with-icon` : `${root}`;\n  }\n\n  get isHeadingType(): boolean {\n    return this.type === ItemType.Heading;\n  }\n\n  get isButtonType(): boolean {\n    return this.type === ItemType.Button;\n  }\n\n  get isActive(): boolean {\n    return (this.type === ItemType.Link || !!this.url) && !this.isButtonType;\n  }\n\n  get target(): string {\n    return this.externalLink ? \"_blank\" : \"_self\";\n  }\n\n  get lastWordOfLabel(): string | undefined {\n    return this.label.split(\" \").pop();\n  }\n\n  get leadingWordsOfLabel(): string {\n    const leadingWords = this.label.split(\" \").slice(0, -1).join(\" \");\n    return `${leadingWords} `;\n  }\n}\n\nUDExMastheadMenuItem.define();\n\nexport default UDExMastheadMenuItem;\n"]}

package/dist/MastheadMobileMenu.d.ts

@@ -0,0 +1,84 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExMastheadItem, { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-mobile-menu</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadMobileMenu.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExMastheadMobileMenu extends UI5Element {
+    /**
+     * Slot for search
+     *
+     * @public
+     */
+    search: Array<Node>;
+    /**
+     * List of the menu items
+     *
+     * @default "[]"
+     * @public
+     */
+    items: Array<UDExMastheadItem>;
+    /**
+     * Slot for explore Sap mobile button
+     *
+     * @slot
+     * @public
+     */
+    exploreSapMobileButton?: UDExMastheadItem;
+    _showCategories: boolean;
+    _hideExploreSapBtn: boolean;
+    _showCategoryItems: boolean;
+    _direction?: string;
+    _clickedItem: UDExMastheadItem;
+    _categories: Array<SubMenuLinkItem>;
+    _category: SubMenuLinkItem;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    onAfterRendering(): void;
+    handleMenuItemClick(e: Event): void;
+    handleMenuCategoryClick(e: Event): void;
+    handleExploreSapClick(e: Event): void;
+    handleBackToMenuItems(): void;
+    handleBackToCategories(): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    handleRightArrow(e: KeyboardEvent): void;
+    handleLeftArrow(e: KeyboardEvent): void;
+    handleUpArrow(e: KeyboardEvent): void;
+    handleDownArrow(e: KeyboardEvent): void;
+    handleDirection(): void;
+    moveToBackWithKeyboard(e: KeyboardEvent): void;
+    moveToNextLevelWithKeyboard(e: KeyboardEvent): void;
+    focusFirstItem(): void;
+    focusPreviousItem(e: KeyboardEvent): void;
+    focusNextItem(e: KeyboardEvent): void;
+    openCategories(e: Event): void;
+    openCategoryItems(e: Event): void;
+    showFirstLevelMenu(): void;
+    showCategories(): void;
+    getItemByList(el: UDExMastheadItem): UDExMastheadItem;
+    getCategories(items: Array<MenuItem>): Array<SubMenuLinkItem>;
+    getCurrentIndex(item: HTMLElement): number;
+    getListItemByIndex(index: number): HTMLElement | null;
+    get isRtlDirection(): boolean;
+    get navigationItems(): Array<HTMLElement>;
+    get showNavigation(): boolean;
+    get categoryLinkText(): string;
+    get exploreItem(): UDExMastheadItem;
+    get showExploreBtn(): boolean;
+    get hasExploreBtnSlot(): boolean;
+}
+export default UDExMastheadMobileMenu;

package/dist/MastheadMobileMenu.js

@@ -0,0 +1,257 @@
+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 UDExMastheadMobileMenu_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isUp, isDown, isRight, isLeft, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
+import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
+// Styles
+import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-mobile-menu</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadMobileMenu.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobileMenu extends UI5Element {
+    static async onDefine() {
+        UDExMastheadMobileMenu_1.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    }
+    onAfterRendering() {
+        if (this.hasAttribute("slot")) {
+            this.focusFirstItem();
+        }
+    }
+    handleMenuItemClick(e) {
+        e.preventDefault();
+        this.openCategories(e);
+    }
+    handleMenuCategoryClick(e) {
+        e.preventDefault();
+        this.openCategoryItems(e);
+    }
+    handleExploreSapClick(e) {
+        e.preventDefault();
+        this._hideExploreSapBtn = true;
+        this._showCategoryItems = false;
+        this.openCategories(e);
+    }
+    handleBackToMenuItems() {
+        this.showFirstLevelMenu();
+    }
+    handleBackToCategories() {
+        this.showCategories();
+    }
+    handleKeyDown(e) {
+        this.handleUpArrow(e);
+        this.handleDownArrow(e);
+        this.handleRightArrow(e);
+        this.handleLeftArrow(e);
+    }
+    handleRightArrow(e) {
+        this.handleDirection();
+        if (isRight(e) || isEnter(e)) {
+            if (this.isRtlDirection) {
+                this.moveToBackWithKeyboard(e);
+            }
+            else {
+                this.moveToNextLevelWithKeyboard(e);
+            }
+        }
+    }
+    handleLeftArrow(e) {
+        this.handleDirection();
+        if (isLeft(e) || isEnter(e)) {
+            if (this.isRtlDirection) {
+                this.moveToNextLevelWithKeyboard(e);
+            }
+            else {
+                this.moveToBackWithKeyboard(e);
+            }
+        }
+    }
+    handleUpArrow(e) {
+        if (isUp(e)) {
+            e.preventDefault();
+            this.focusPreviousItem(e);
+        }
+    }
+    handleDownArrow(e) {
+        if (isDown(e)) {
+            e.preventDefault();
+            this.focusNextItem(e);
+        }
+    }
+    handleDirection() {
+        const directionStyles = window
+            .getComputedStyle(this)
+            .getPropertyValue("direction");
+        if (!directionStyles) {
+            this._direction = "ltr";
+        }
+        else {
+            this._direction = directionStyles;
+        }
+    }
+    moveToBackWithKeyboard(e) {
+        const target = e.target;
+        if (target.hasAttribute("back-to-nav")) {
+            this.showFirstLevelMenu();
+        }
+        if (target.hasAttribute("back-to-categories")) {
+            this.showCategories();
+        }
+    }
+    moveToNextLevelWithKeyboard(e) {
+        const target = e.target;
+        if (target.hasAttribute("is-explore")) {
+            this._hideExploreSapBtn = true;
+            this._showCategoryItems = false;
+        }
+        if (target.hasAttribute("first-level")) {
+            this.openCategories(e);
+        }
+        if (target.hasAttribute("second-level")) {
+            this.openCategoryItems(e);
+        }
+    }
+    focusFirstItem() {
+        this.getListItemByIndex(0)?.focus();
+    }
+    focusPreviousItem(e) {
+        const target = e.target;
+        const currentItem = target.parentElement;
+        const currentSelectedIndex = this.getCurrentIndex(currentItem);
+        const lastItemIndex = this.navigationItems.length - 1;
+        const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
+        const listItem = this.getListItemByIndex(previousSelectIndex);
+        listItem?.focus();
+    }
+    focusNextItem(e) {
+        const target = e.target;
+        const currentItem = target.parentElement;
+        const currentSelectedIndex = this.getCurrentIndex(currentItem);
+        const nextSelectIndex = currentSelectedIndex + 1 > this.navigationItems.length - 1 ? 0 : currentSelectedIndex + 1;
+        const listItem = this.getListItemByIndex(nextSelectIndex);
+        listItem?.focus();
+    }
+    openCategories(e) {
+        const item = this.getItemByList(e.target);
+        this._clickedItem = item;
+        this._categories = this.getCategories(item.getSubItems());
+        this._showCategories = true;
+    }
+    openCategoryItems(e) {
+        const item = e.target;
+        const index = Number(item.getAttribute("id"));
+        this._category = this._categories[index];
+        this._showCategories = false;
+        this._showCategoryItems = true;
+    }
+    showFirstLevelMenu() {
+        this._showCategories = false;
+        this._showCategoryItems = false;
+        this._hideExploreSapBtn = false;
+    }
+    showCategories() {
+        this._showCategories = true;
+        this._showCategoryItems = false;
+    }
+    getItemByList(el) {
+        const items = [
+            ...this.items,
+            ...[this.hasExploreBtnSlot ? this.exploreItem : []],
+        ];
+        return items.find(item => item._id === el.getAttribute("id"));
+    }
+    getCategories(items) {
+        const categories = [];
+        items?.forEach(item => {
+            item.subMenuLinkItems.forEach(category => {
+                categories.push(category);
+            });
+        });
+        return categories;
+    }
+    getCurrentIndex(item) {
+        return this.navigationItems.indexOf(item);
+    }
+    getListItemByIndex(index) {
+        return this.navigationItems[index]?.querySelector("udex-masthead-menu-item");
+    }
+    get isRtlDirection() {
+        return this._direction === "rtl";
+    }
+    get navigationItems() {
+        return Array.from(this.shadowRoot.querySelectorAll(".udex-masthead-mobile-menu__list-item"));
+    }
+    get showNavigation() {
+        return !this._showCategories && !this._showCategoryItems;
+    }
+    get categoryLinkText() {
+        return UDExMastheadMobileMenu_1.i18nBundle.getText(OVERVIEW);
+    }
+    get exploreItem() {
+        return this.getSlottedNodes("exploreSapMobileButton")[0];
+    }
+    get showExploreBtn() {
+        return this.hasExploreBtnSlot && !this._hideExploreSapBtn;
+    }
+    get hasExploreBtnSlot() {
+        return !!this.getSlottedNodes("exploreSapMobileButton").length;
+    }
+};
+__decorate([
+    slot({ type: Node })
+], UDExMastheadMobileMenu.prototype, "search", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExMastheadMobileMenu.prototype, "items", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExMastheadMobileMenu.prototype, "exploreSapMobileButton", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadMobileMenu.prototype, "_showCategories", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadMobileMenu.prototype, "_hideExploreSapBtn", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadMobileMenu.prototype, "_showCategoryItems", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadMobileMenu.prototype, "_direction", void 0);
+UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = __decorate([
+    customElement({
+        tag: "udex-masthead-mobile-menu",
+        renderer: litRender,
+        styles: MastheadMobileMenuCss,
+        template: MastheadMobileMenuTemplate,
+        dependencies: [UDExMastheadMenuItem],
+    })
+], UDExMastheadMobileMenu);
+UDExMastheadMobileMenu.define();
+export default UDExMastheadMobileMenu;
+//# sourceMappingURL=MastheadMobileMenu.js.map

package/dist/MastheadMobileMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MastheadMobileMenu.js","sourceRoot":"","sources":["../src/MastheadMobileMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  isUp, isDown, isRight, isLeft, isEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UDExMastheadItem, { MenuItem, SubMenuLinkItem } from \"./MastheadItem.js\";\nimport UDExMastheadMenuItem from \"./MastheadMenuItem.js\";\nimport { OVERVIEW } from \"./generated/i18n/i18n-defaults.js\";\n\nimport MastheadMobileMenuTemplate from \"./generated/templates/MastheadMobileMenuTemplate.lit.js\";\n// Styles\nimport MastheadMobileMenuCss from \"./generated/themes/MastheadMobileMenu.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-masthead-mobile-menu</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/MastheadMobileMenu.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-masthead-mobile-menu\",\n  renderer: litRender,\n  styles: MastheadMobileMenuCss,\n  template: MastheadMobileMenuTemplate,\n  dependencies: [UDExMastheadMenuItem],\n})\n\nclass UDExMastheadMobileMenu extends UI5Element {\n  /**\n   * Slot for search\n   *\n   * @public\n   */\n  @slot({ type: Node })\n    search!: Array<Node>;\n\n  /**\n   * List of the menu items\n   *\n   * @default \"[]\"\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    items!: Array<UDExMastheadItem>;\n\n  /**\n   * Slot for explore Sap mobile button\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    exploreSapMobileButton?: UDExMastheadItem;\n\n  @property({ type: Boolean })\n    _showCategories!: boolean;\n\n  @property({ type: Boolean })\n    _hideExploreSapBtn!: boolean;\n\n  @property({ type: Boolean })\n    _showCategoryItems!: boolean;\n\n  @property({ type: String })\n    _direction?: string;\n\n  _clickedItem!: UDExMastheadItem;\n  _categories!: Array<SubMenuLinkItem>;\n  _category!: SubMenuLinkItem;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExMastheadMobileMenu.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  onAfterRendering() {\n    if (this.hasAttribute(\"slot\")) {\n      this.focusFirstItem();\n    }\n  }\n\n  handleMenuItemClick(e: Event) {\n    e.preventDefault();\n    this.openCategories(e);\n  }\n\n  handleMenuCategoryClick(e: Event) {\n    e.preventDefault();\n    this.openCategoryItems(e);\n  }\n\n  handleExploreSapClick(e: Event) {\n    e.preventDefault();\n    this._hideExploreSapBtn = true;\n    this._showCategoryItems = false;\n    this.openCategories(e);\n  }\n\n  handleBackToMenuItems() {\n    this.showFirstLevelMenu();\n  }\n\n  handleBackToCategories() {\n    this.showCategories();\n  }\n\n  handleKeyDown(e: KeyboardEvent) {\n    this.handleUpArrow(e);\n    this.handleDownArrow(e);\n    this.handleRightArrow(e);\n    this.handleLeftArrow(e);\n  }\n\n  handleRightArrow(e: KeyboardEvent) {\n    this.handleDirection();\n    if (isRight(e) || isEnter(e)) {\n      if (this.isRtlDirection) {\n        this.moveToBackWithKeyboard(e);\n      } else {\n        this.moveToNextLevelWithKeyboard(e);\n      }\n    }\n  }\n\n  handleLeftArrow(e: KeyboardEvent) {\n    this.handleDirection();\n    if (isLeft(e) || isEnter(e)) {\n      if (this.isRtlDirection) {\n        this.moveToNextLevelWithKeyboard(e);\n      } else {\n        this.moveToBackWithKeyboard(e);\n      }\n    }\n  }\n\n  handleUpArrow(e: KeyboardEvent) {\n    if (isUp(e)) {\n      e.preventDefault();\n      this.focusPreviousItem(e);\n    }\n  }\n\n  handleDownArrow(e: KeyboardEvent) {\n    if (isDown(e)) {\n      e.preventDefault();\n      this.focusNextItem(e);\n    }\n  }\n\n  handleDirection() {\n    const directionStyles: string = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n    if (!directionStyles) {\n      this._direction = \"ltr\";\n    } else {\n      this._direction = directionStyles;\n    }\n  }\n\n  moveToBackWithKeyboard(e: KeyboardEvent) {\n    const target = e.target as UDExMastheadItem;\n    if (target.hasAttribute(\"back-to-nav\")) {\n      this.showFirstLevelMenu();\n    }\n\n    if (target.hasAttribute(\"back-to-categories\")) {\n      this.showCategories();\n    }\n  }\n\n  moveToNextLevelWithKeyboard(e: KeyboardEvent) {\n    const target = e.target as UDExMastheadItem;\n\n    if (target.hasAttribute(\"is-explore\")) {\n      this._hideExploreSapBtn = true;\n      this._showCategoryItems = false;\n    }\n\n    if (target.hasAttribute(\"first-level\")) {\n      this.openCategories(e);\n    }\n\n    if (target.hasAttribute(\"second-level\")) {\n      this.openCategoryItems(e);\n    }\n  }\n\n  focusFirstItem(): void {\n    this.getListItemByIndex(0)?.focus();\n  }\n\n  focusPreviousItem(e: KeyboardEvent): void {\n    const target = e.target as HTMLElement;\n    const currentItem = target.parentElement as HTMLElement;\n    const currentSelectedIndex = this.getCurrentIndex(currentItem);\n    const lastItemIndex = this.navigationItems.length - 1;\n    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;\n    const listItem = this.getListItemByIndex(previousSelectIndex);\n    listItem?.focus();\n  }\n\n  focusNextItem(e: KeyboardEvent): void {\n    const target = e.target as HTMLElement;\n    const currentItem = target.parentElement as HTMLElement;\n    const currentSelectedIndex = this.getCurrentIndex(currentItem);\n    const nextSelectIndex = currentSelectedIndex + 1 > this.navigationItems.length - 1 ? 0 : currentSelectedIndex + 1;\n    const listItem = this.getListItemByIndex(nextSelectIndex);\n    listItem?.focus();\n  }\n\n  openCategories(e: Event) {\n    const item = this.getItemByList(e.target as UDExMastheadItem);\n    this._clickedItem = item;\n    this._categories = this.getCategories(item.getSubItems());\n    this._showCategories = true;\n  }\n\n  openCategoryItems(e: Event) {\n    const item = e.target as UDExMastheadMenuItem;\n    const index = Number(item.getAttribute(\"id\"));\n    this._category = this._categories[index];\n    this._showCategories = false;\n    this._showCategoryItems = true;\n  }\n\n  showFirstLevelMenu() {\n    this._showCategories = false;\n    this._showCategoryItems = false;\n    this._hideExploreSapBtn = false;\n  }\n\n  showCategories() {\n    this._showCategories = true;\n    this._showCategoryItems = false;\n  }\n\n  getItemByList(el: UDExMastheadItem): UDExMastheadItem {\n    const items = [\n      ...this.items,\n      ...[this.hasExploreBtnSlot ? this.exploreItem : []],\n    ] as Array<UDExMastheadItem>;\n    return items.find(item => item._id === el.getAttribute(\"id\"))!;\n  }\n\n  getCategories(items: Array<MenuItem>): Array<SubMenuLinkItem> {\n    const categories: Array<SubMenuLinkItem> = [];\n    items?.forEach(item => {\n      item.subMenuLinkItems.forEach(category => {\n        categories.push(category);\n      });\n    });\n\n    return categories;\n  }\n\n  getCurrentIndex(item: HTMLElement): number {\n    return this.navigationItems.indexOf(item);\n  }\n\n  getListItemByIndex(index: number): HTMLElement | null {\n    return this.navigationItems[index]?.querySelector(\"udex-masthead-menu-item\");\n  }\n\n  get isRtlDirection(): boolean {\n    return this._direction === \"rtl\";\n  }\n\n  get navigationItems(): Array<HTMLElement> {\n    return Array.from(this.shadowRoot!.querySelectorAll(\".udex-masthead-mobile-menu__list-item\"));\n  }\n\n  get showNavigation(): boolean {\n    return !this._showCategories && !this._showCategoryItems;\n  }\n\n  get categoryLinkText(): string {\n    return UDExMastheadMobileMenu.i18nBundle.getText(OVERVIEW);\n  }\n\n  get exploreItem(): UDExMastheadItem {\n    return this.getSlottedNodes<UDExMastheadItem>(\"exploreSapMobileButton\")[0];\n  }\n\n  get showExploreBtn(): boolean {\n    return this.hasExploreBtnSlot && !this._hideExploreSapBtn;\n  }\n\n  get hasExploreBtnSlot(): boolean {\n    return !!this.getSlottedNodes(\"exploreSapMobileButton\").length;\n  }\n}\n\nUDExMastheadMobileMenu.define();\n\nexport default UDExMastheadMobileMenu;\n"]}