@sapudex/web-components 0.111.0

package/dist/ListSelectAll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListSelectAll.js","sourceRoot":"","sources":["../src/ListSelectAll.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,uBAAuB,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAC/D,OAAO,qBAAqB,MAAM,iDAAiD,CAAC;AAEpF,SAAS;AACT,OAAO,kBAAkB,MAAM,wCAAwC,CAAC;AAExE;;;;;;;;;;;;;;;;GAgBG;AAcH,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,uBAAuB;IAGrD,MAAM,CAAC,KAAK,CAAC,QAAQ;QACnB,mBAAiB,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,6BAA6B,CAAC,CAAC;IACpF,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,yBAAyB,EAAE,CAAC;SAClC;QACD,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;YAC3B,IAAI,EAAE,IAAI;SACX,CAAC,CAAC;IACL,CAAC;IAED,8BAA8B;QAC5B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;IACH,CAAC;IAED,kBAAkB,CAAC,CAAgB;QACjC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;QACD,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YAC5B,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;IACH,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,QAAQ,CAAC,WAAW,CAAC;IAC9B,CAAC;IAED,IAAI,cAAc;QAChB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;QACtE,OAAO,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,mBAAiB,CAAC,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAClF,CAAC;IAED,IAAI,mBAAmB;QACrB,MAAM,kBAAkB,GAAG,8BAA8B,CAAC;QAC1D,OAAO,GAAG,kBAAkB,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9D,CAAC;IAED,IAAI,kBAAkB;QACpB,MAAM,SAAS,GAAG,uBAAuB,CAAC;QAC1C,MAAM,kBAAkB,GAAG,+BAA+B,CAAC;QAC3D,OAAO,GAAG,SAAS,IAAI,IAAI,CAAC,oBAAoB,IAAI,kBAAkB,EAAE,CAAC;IAC3E,CAAC;CACF,CAAA;AAtDK,iBAAiB;IAbtB,aAAa,CAAC;QACb,GAAG,EAAE,sBAAsB;QAC3B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,kBAAkB;QAC1B,QAAQ,EAAE,qBAAqB;KAChC,CAAC;IAED,KAAK,CAAC,YAAY,EAAE;QACnB,MAAM,EAAE;YACN,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;SAC5B;KACF,CAAC;GAEI,iBAAiB,CAsDtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UDExListGroupHeaderBase from \"./ListGroupHeaderBase.js\";\nimport { ListMode } from \"./types/List.js\";\nimport { SELECT_ALL } from \"./generated/i18n/i18n-defaults.js\";\nimport ListSelectAllTemplate from \"./generated/templates/ListSelectAllTemplate.lit\";\n\n// Styles\nimport ListGroupHeaderCss from \"./generated/themes/ListGroupHeader.css\";\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--list-select-all</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/ListSelectAll.js\";</code>\n *\n * @constructor\n * @extends UDExListGroupHeaderBase\n * @public\n */\n@customElement({\n  tag: \"udex-list-select-all\",\n  renderer: litRender,\n  styles: ListGroupHeaderCss,\n  template: ListSelectAllTemplate,\n})\n\n@event(\"select-all\", {\n  detail: {\n    item: { type: HTMLElement },\n  },\n})\n\nclass UDExListSelectAll extends UDExListGroupHeaderBase {\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExListSelectAll.i18nBundle = await getI18nBundle(\"sap-ui-webcomponents-bundle\");\n  }\n\n  handleSelectAllPress() {\n    if (!this.controlled) {\n      this.handleSelectionGroupState();\n    }\n    this.fireEvent(\"select-all\", {\n      item: this,\n    });\n  }\n\n  handleSelectAllGroupItemsPress() {\n    if (!this.controlled) {\n      this.handleHeaderState();\n    }\n  }\n\n  handleKeyDownPress(e: KeyboardEvent) {\n    if (isSpace(e)) {\n      e.preventDefault();\n    }\n    if (isSpace(e) || isEnter(e)) {\n      this.handleSelectAllPress();\n    }\n  }\n\n  get isSelectAllHeader() {\n    return true;\n  }\n\n  get multiselectMode(): ListMode {\n    return ListMode.MultiSelect;\n  }\n\n  get selectAllLabel(): string {\n    const hasLabel = this.label !== \"undefined\" && this.label?.length > 0;\n    return hasLabel ? this.label : UDExListSelectAll.i18nBundle.getText(SELECT_ALL);\n  }\n\n  get additionalClassName(): string {\n    const selectAllClassName = \"udex-list__header-select-all\";\n    return `${selectAllClassName} ${this._additionalClassName}`;\n  }\n\n  get groupListClassName(): string {\n    const className = \"udex-list__group-list\";\n    const selectAllClassName = \"udex--list__header-select-all\";\n    return `${className} ${this._additionalClassName} ${selectAllClassName}`;\n  }\n}\n\nUDExListSelectAll.define();\n\nexport default UDExListSelectAll;\n"]}

package/dist/MastheadItem.d.ts

@@ -0,0 +1,167 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import "@ui5/webcomponents-icons/dist/search.js";
+import UDExAvatar from "./Avatar.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+export interface IMastheadItem {
+    text?: string;
+    selected?: boolean;
+    icon?: string;
+    avatar?: Array<HTMLElement>;
+    href?: string;
+}
+export type CategoryItem = {
+    title: string;
+    url: string;
+    externalLink: boolean;
+};
+export type SubMenuLinkItem = {
+    category: string;
+    url?: string;
+    items: CategoryItem[];
+};
+export type MenuItem = {
+    subMenuLinkItems: SubMenuLinkItem[];
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExMastheadItem extends UI5Element implements IMastheadItem {
+    /**
+     * Defines sub items for item
+     *
+     * @default ""
+     * @public
+     */
+    subItems: string;
+    /**
+     * Defines a title for sub menu items
+     *
+     * @default ""
+     * @public
+     */
+    menuTitle: string;
+    /**
+     * Defines the text of item.
+     *
+     * @public
+     * @default ""
+     */
+    text: string;
+    /**
+     * Defines the selected item.
+     *
+     * @public
+     * @default false
+     */
+    selected: boolean;
+    /**
+     * Defines the icon in the item.
+     *
+     * @public
+     * @default ""
+     */
+    icon: string;
+    /**
+     * Defines the href of the item.
+     *
+     * @public
+     */
+    href: string;
+    /**
+     * Define the target of the item
+     * <b>Note:</b> Standard hyperlink behavior is supported.
+     * @public
+     */
+    target: string;
+    /**
+     * Controls the ARIA name of the item
+     *
+     * @default ""
+     * @public
+     */
+    accessibleName: string;
+    /**
+     * Controls the ARIA role of the item
+     *
+     * @default ""
+     * @public
+     */
+    accessibleRole: string;
+    /**
+     * Defines an alt text for item icon
+     *
+     * @default ""
+     * @public
+     */
+    iconAlt?: string;
+    /**
+     * Hide active border for item
+     *
+     * @default ""
+     * @public
+     */
+    hideActiveBorder?: boolean;
+    /**
+     * Defines direction of the text.
+     *
+     * @private
+     */
+    _direction?: string;
+    /**
+     * Slot for the dropdown
+     *
+     * @slot
+     * @public
+     */
+    dropdown?: Array<HTMLElement>;
+    /**
+     * Slot for any content
+     *
+     * @slot
+     * @public
+     */
+    content?: Array<HTMLElement>;
+    _profileAvatar: UDExAvatar;
+    onEnterDOM(): void;
+    onAfterRendering(): void;
+    onClick(e: Event): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    handleKeyEscape(): void;
+    handleKeyEscapeMobile(): void;
+    setDropdownInsetStart(): void;
+    calculateMarginInlineStart(rect: DOMRect): number | null;
+    handleDirection(): void;
+    getDomElement(selector: string): HTMLElement | undefined | null;
+    parseArrayFromString<T>(string: string): T[];
+    getSubItems(): Array<MenuItem>;
+    get additionalClass(): string;
+    get profileAvatar(): UDExAvatar;
+    get isRtlDirection(): boolean;
+    get isLtrDirection(): boolean;
+    get hasHref(): boolean;
+    get accessibleRoleName(): string;
+    get selectedClass(): string;
+    get ariaLabelledBy(): string;
+    get showDropdown(): boolean;
+    get hasDropdownSlot(): boolean;
+    get hasArrowDown(): boolean;
+    get isProfileBtn(): boolean;
+    get isExploreBtn(): boolean;
+    get isMenuItem(): boolean;
+    get isMobile(): boolean;
+}
+export default UDExMastheadItem;

package/dist/MastheadItem.js

@@ -0,0 +1,263 @@
+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 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 UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/search.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import UDExMastheadMenu from "./MastheadMenu.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
+// Styles
+import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExMastheadItem = class UDExMastheadItem extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines an alt text for item icon
+         *
+         * @default ""
+         * @public
+         */
+        this.iconAlt = "";
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    onAfterRendering() {
+        this._profileAvatar = this.profileAvatar;
+        this.handleDirection();
+        if (this.selected && this.hasDropdownSlot && !this.isMobile && !this.isExploreBtn) {
+            this.setDropdownInsetStart();
+        }
+    }
+    onClick(e) {
+        e.stopPropagation();
+        this.fireEvent("click", { item: this });
+        this.selected = this.isMobile ? true : !this.selected;
+    }
+    handleKeyDown(e) {
+        if (isEscape(e) && this.hasDropdownSlot) {
+            if (this.isMobile) {
+                this.handleKeyEscapeMobile();
+            }
+            else {
+                this.handleKeyEscape();
+            }
+        }
+    }
+    handleKeyEscape() {
+        this.selected = false;
+        if (this.isProfileBtn) {
+            this._profileAvatar.focus();
+        }
+        else {
+            this.focus();
+        }
+    }
+    handleKeyEscapeMobile() {
+        const mastheadShell = document.querySelector("udex-masthead-shell");
+        const mobileMenu = mastheadShell?.mastheadMobileMenu;
+        mastheadShell?.removeActiveMobileClass();
+        mastheadShell?.mobileBtn?.focus();
+        this.selected = false;
+        if (mobileMenu) {
+            mobileMenu.showFirstLevelMenu();
+        }
+    }
+    setDropdownInsetStart() {
+        const dropdown = this.getDomElement(".udex-masthead-item__dropdown");
+        if (dropdown) {
+            const rect = dropdown.getBoundingClientRect();
+            const dropdownHolder = this.getDomElement(".udex-masthead-item__dropdown-holder");
+            const marginInlineStart = this.calculateMarginInlineStart(rect);
+            if (marginInlineStart !== null && dropdownHolder) {
+                dropdownHolder.style.marginInlineStart = `${marginInlineStart - 3}px`;
+            }
+        }
+    }
+    calculateMarginInlineStart(rect) {
+        const { left, right } = rect;
+        if (this.isLtrDirection && left < 0) {
+            return left * -1 + 15;
+        }
+        if (this.isRtlDirection && left < 0) {
+            return left - 15;
+        }
+        if (this.isRtlDirection && right > window.innerWidth) {
+            return right - window.innerWidth + 15;
+        }
+        if (this.isLtrDirection && right > window.innerWidth) {
+            return window.innerWidth - right - 15;
+        }
+        return null;
+    }
+    handleDirection() {
+        const directionStyles = window
+            .getComputedStyle(this)
+            .getPropertyValue("direction");
+        if (!directionStyles) {
+            this._direction = "ltr";
+        }
+        else {
+            this._direction = directionStyles;
+        }
+    }
+    getDomElement(selector) {
+        return this.shadowRoot?.querySelector(`${selector}`);
+    }
+    parseArrayFromString(string) {
+        return string ? JSON.parse(string) : [];
+    }
+    getSubItems() {
+        return this.parseArrayFromString(this.subItems);
+    }
+    get additionalClass() {
+        const iconClass = this.icon ? "udex-masthead-item__button--icon" : "";
+        const profileClass = this.isProfileBtn ? "udex-masthead-item__button--profile" : "";
+        const exploreClass = this.isExploreBtn ? "udex-masthead-item__button--explore" : "";
+        return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass}`;
+    }
+    get profileAvatar() {
+        return this.querySelector("udex-avatar");
+    }
+    get isRtlDirection() {
+        return this._direction === "rtl";
+    }
+    get isLtrDirection() {
+        return this._direction === "ltr";
+    }
+    get hasHref() {
+        return !!this.href.length;
+    }
+    get accessibleRoleName() {
+        return this.accessibleRole ? this.accessibleRole : "button";
+    }
+    get selectedClass() {
+        return this.selected ? " udex-masthead-item__button--active" : "";
+    }
+    get ariaLabelledBy() {
+        const labels = [];
+        if (this.text) {
+            labels.push(`${this.__id}-text`);
+        }
+        if (this.icon) {
+            labels.push(`${this.__id}-icon`);
+        }
+        return labels.join(" ");
+    }
+    get showDropdown() {
+        return this.hasDropdownSlot && this.selected;
+    }
+    get hasDropdownSlot() {
+        return !!this.getSlottedNodes("dropdown").length;
+    }
+    get hasArrowDown() {
+        return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length;
+    }
+    get isProfileBtn() {
+        return this.getAttribute("slot") === "profile";
+    }
+    get isExploreBtn() {
+        return this.getAttribute("slot") === "exploreSAP";
+    }
+    get isMenuItem() {
+        return true;
+    }
+    get isMobile() {
+        return window.innerWidth < 1279;
+    }
+};
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMastheadItem.prototype, "subItems", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMastheadItem.prototype, "menuTitle", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMastheadItem.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMastheadItem.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadItem.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadItem.prototype, "target", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadItem.prototype, "accessibleName", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadItem.prototype, "accessibleRole", void 0);
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMastheadItem.prototype, "iconAlt", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExMastheadItem.prototype, "hideActiveBorder", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadItem.prototype, "_direction", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], UDExMastheadItem.prototype, "dropdown", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExMastheadItem.prototype, "content", void 0);
+UDExMastheadItem = __decorate([
+    customElement({
+        tag: "udex-masthead-item",
+        renderer: litRender,
+        styles: MastheadItemCss,
+        template: MastheadItemTemplate,
+        dependencies: [
+            UDExMastheadMenu,
+            UI5Icon,
+        ],
+    })
+    /**
+     * Fires when item is clicked
+     *
+     * @allowPreventDefault
+     * @public
+     */
+    ,
+    event("click")
+], UDExMastheadItem);
+UDExMastheadItem.define();
+export default UDExMastheadItem;
+//# sourceMappingURL=MastheadItem.js.map

package/dist/MastheadItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MastheadItem.js","sourceRoot":"","sources":["../src/MastheadItem.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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/search.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport UDExMastheadMenu from \"./MastheadMenu.js\";\nimport UDExAvatar from \"./Avatar.js\";\nimport MastheadShell from \"./MastheadShell.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\n\nimport MastheadItemTemplate from \"./generated/templates/MastheadItemTemplate.lit.js\";\n\n// Styles\nimport MastheadItemCss from \"./generated/themes/MastheadItem.css.js\";\n\nexport interface IMastheadItem {\n  text?: string;\n  selected?: boolean;\n  icon?: string;\n  avatar?: Array<HTMLElement>;\n  href?: string;\n}\n\nexport type CategoryItem = {\n  title: string;\n  url: string;\n  externalLink: boolean;\n};\n\nexport type SubMenuLinkItem = {\n  category: string;\n  url?: string;\n  items: CategoryItem[];\n};\n\nexport type MenuItem = {\n  subMenuLinkItems: SubMenuLinkItem[];\n};\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-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/MastheadItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-masthead-item\",\n  renderer: litRender,\n  styles: MastheadItemCss,\n  template: MastheadItemTemplate,\n  dependencies: [\n    UDExMastheadMenu,\n    UI5Icon,\n  ],\n})\n\n/**\n * Fires when item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"click\")\nclass UDExMastheadItem extends UI5Element implements IMastheadItem {\n  /**\n   * Defines sub items for item\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    subItems!: string;\n\n  /**\n   * Defines a title for sub menu items\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    menuTitle!: string;\n\n  /**\n   * Defines the text of item.\n   *\n   * @public\n   * @default \"\"\n   */\n  @property({ type: String, defaultValue: \"\" })\n    text!: string;\n\n  /**\n   * Defines the selected item.\n   *\n   * @public\n   * @default false\n   */\n  @property({ type: Boolean })\n    selected!: boolean;\n\n  /**\n   * Defines the icon in the item.\n   *\n   * @public\n   * @default \"\"\n   */\n  @property({ type: String, defaultValue: \"\" })\n    icon!: string;\n\n  /**\n   * Defines the href of the item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    href!: string;\n\n  /**\n   * Define the target of the item\n   * <b>Note:</b> Standard hyperlink behavior is supported.\n   * @public\n   */\n  @property({ type: String })\n    target!: string;\n\n  /**\n   * Controls the ARIA name of the item\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\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 an alt text for item icon\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    iconAlt?: string = \"\";\n\n  /**\n   * Hide active border for item\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: Boolean })\n    hideActiveBorder?: boolean;\n\n  /**\n   * Defines direction of the text.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Slot for the dropdown\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    dropdown?: Array<HTMLElement>;\n\n  /**\n   * Slot for any content\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    content?: Array<HTMLElement>;\n\n  _profileAvatar!: UDExAvatar;\n\n  onEnterDOM() {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  onAfterRendering() {\n    this._profileAvatar = this.profileAvatar;\n    this.handleDirection();\n    if (this.selected && this.hasDropdownSlot && !this.isMobile && !this.isExploreBtn) {\n      this.setDropdownInsetStart();\n    }\n  }\n\n  onClick(e: Event): void {\n    e.stopPropagation();\n    this.fireEvent(\"click\", { item: this });\n    this.selected = this.isMobile ? true : !this.selected;\n  }\n\n  handleKeyDown(e: KeyboardEvent): void {\n    if (isEscape(e) && this.hasDropdownSlot) {\n      if (this.isMobile) {\n        this.handleKeyEscapeMobile();\n      } else {\n        this.handleKeyEscape();\n      }\n    }\n  }\n\n  handleKeyEscape() {\n    this.selected = false;\n    if (this.isProfileBtn) {\n      this._profileAvatar.focus();\n    } else {\n      this.focus();\n    }\n  }\n\n  handleKeyEscapeMobile() {\n    const mastheadShell: MastheadShell | null = document.querySelector(\"udex-masthead-shell\");\n    const mobileMenu = mastheadShell?.mastheadMobileMenu;\n    mastheadShell?.removeActiveMobileClass();\n    mastheadShell?.mobileBtn?.focus();\n    this.selected = false;\n\n    if (mobileMenu) {\n      mobileMenu.showFirstLevelMenu();\n    }\n  }\n\n  setDropdownInsetStart(): void {\n    const dropdown = this.getDomElement(\".udex-masthead-item__dropdown\");\n    if (dropdown) {\n      const rect = dropdown.getBoundingClientRect();\n      const dropdownHolder = this.getDomElement(\".udex-masthead-item__dropdown-holder\");\n      const marginInlineStart = this.calculateMarginInlineStart(rect);\n\n      if (marginInlineStart !== null && dropdownHolder) {\n        dropdownHolder.style.marginInlineStart = `${marginInlineStart - 3}px`;\n      }\n    }\n  }\n\n  calculateMarginInlineStart(rect: DOMRect): number | null {\n    const { left, right } = rect;\n\n    if (this.isLtrDirection && left < 0) {\n      return left * -1 + 15;\n    }\n\n    if (this.isRtlDirection && left < 0) {\n      return left - 15;\n    }\n\n    if (this.isRtlDirection && right > window.innerWidth) {\n      return right - window.innerWidth + 15;\n    }\n\n    if (this.isLtrDirection && right > window.innerWidth) {\n      return window.innerWidth - right - 15;\n    }\n\n    return null;\n  }\n\n  handleDirection(): void {\n    const directionStyles = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n    if (!directionStyles) {\n      this._direction = \"ltr\";\n    } else {\n      this._direction = directionStyles;\n    }\n  }\n\n  getDomElement(selector: string): HTMLElement | undefined | null {\n    return this.shadowRoot?.querySelector(`${selector}`);\n  }\n\n  parseArrayFromString<T>(string: string): T[] {\n    return string ? JSON.parse(string) as T[] : [];\n  }\n\n  getSubItems(): Array<MenuItem> {\n    return this.parseArrayFromString(this.subItems);\n  }\n\n  get additionalClass(): string {\n    const iconClass = this.icon ? \"udex-masthead-item__button--icon\" : \"\";\n    const profileClass = this.isProfileBtn ? \"udex-masthead-item__button--profile\" : \"\";\n    const exploreClass = this.isExploreBtn ? \"udex-masthead-item__button--explore\" : \"\";\n    return `udex-masthead-item ${iconClass} ${profileClass} ${exploreClass}`;\n  }\n\n  get profileAvatar(): UDExAvatar {\n    return this.querySelector(\"udex-avatar\")!;\n  }\n\n  get isRtlDirection(): boolean {\n    return this._direction === \"rtl\";\n  }\n\n  get isLtrDirection(): boolean {\n    return this._direction === \"ltr\";\n  }\n\n  get hasHref(): boolean {\n    return !!this.href.length;\n  }\n\n  get accessibleRoleName(): string {\n    return this.accessibleRole ? this.accessibleRole : \"button\";\n  }\n\n  get selectedClass(): string {\n    return this.selected ? \" udex-masthead-item__button--active\" : \"\";\n  }\n\n  get ariaLabelledBy(): string {\n    const labels = [];\n\n    if (this.text) {\n      labels.push(`${this.__id}-text`);\n    }\n\n    if (this.icon) {\n      labels.push(`${this.__id}-icon`);\n    }\n\n    return labels.join(\" \");\n  }\n\n  get showDropdown(): boolean {\n    return this.hasDropdownSlot && this.selected;\n  }\n\n  get hasDropdownSlot(): boolean {\n    return !!this.getSlottedNodes(\"dropdown\").length;\n  }\n\n  get hasArrowDown(): boolean {\n    return this.hasDropdownSlot && !this.isProfileBtn && !this.icon.length;\n  }\n\n  get isProfileBtn():boolean {\n    return this.getAttribute(\"slot\") === \"profile\";\n  }\n\n  get isExploreBtn():boolean {\n    return this.getAttribute(\"slot\") === \"exploreSAP\";\n  }\n\n  get isMenuItem(): boolean {\n    return true;\n  }\n\n  get isMobile(): boolean {\n    return window.innerWidth < 1279;\n  }\n}\n\nUDExMastheadItem.define();\n\nexport default UDExMastheadItem;\n"]}

package/dist/MastheadMenu.d.ts

@@ -0,0 +1,61 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/action.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+export type Item = {
+    title: string;
+    url: string;
+    externalLink: boolean;
+};
+export type SubMenuLinkItem = {
+    category: string;
+    url: string;
+    items: Item[];
+};
+export type MenuItem = {
+    subMenuLinkItems: SubMenuLinkItem[];
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-menu</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadMenu.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExMastheadMenu extends UI5Element {
+    /**
+     * Defines a menu heading
+     *
+     * @default ""
+     * @public
+     */
+    menuTitle: string;
+    /**
+     * List of the menu items
+     *
+     * @default "[]"
+     * @public
+     */
+    subItems: string;
+    handleKeyDown(e: KeyboardEvent): void;
+    handleUpArrow(e: KeyboardEvent): void;
+    handleDownArrow(e: KeyboardEvent): void;
+    focusPreviousItem(item: UDExMastheadMenuItem): void;
+    focusNextItem(item: UDExMastheadMenuItem): void;
+    getCurrentIndex(item: UDExMastheadMenuItem): number;
+    parseArrayFromString<T>(string: string): T[];
+    get links(): Array<UDExMastheadMenuItem>;
+    get itemsList(): Array<MenuItem>;
+    get oneRowClass(): string;
+}
+export default UDExMastheadMenu;

package/dist/MastheadMenu.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;
+};
+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 Icon from "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/action.js";
+import { isUp, isDown } from "@ui5/webcomponents-base/dist/Keys.js";
+import UDExBadge from "./Badge.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import MastheadMenuTemplate from "./generated/templates/MastheadMenuTemplate.lit.js";
+// Styles
+import MastheadMenuCss from "./generated/themes/MastheadMenu.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-menu</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadMenu.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExMastheadMenu = class UDExMastheadMenu extends UI5Element {
+    handleKeyDown(e) {
+        this.handleUpArrow(e);
+        this.handleDownArrow(e);
+    }
+    handleUpArrow(e) {
+        if (isUp(e)) {
+            e.preventDefault();
+            const currentItem = e.target;
+            this.focusPreviousItem(currentItem);
+        }
+    }
+    handleDownArrow(e) {
+        if (isDown(e)) {
+            e.preventDefault();
+            const currentItem = e.target;
+            this.focusNextItem(currentItem);
+        }
+    }
+    focusPreviousItem(item) {
+        const currentSelectedIndex = this.getCurrentIndex(item);
+        const lastItemIndex = this.links.length - 1;
+        const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
+        this.links[previousSelectIndex].focus();
+    }
+    focusNextItem(item) {
+        const currentSelectedIndex = this.getCurrentIndex(item);
+        const nextSelectIndex = currentSelectedIndex + 1 > this.links.length - 1 ? 0 : currentSelectedIndex + 1;
+        this.links[nextSelectIndex].focus();
+    }
+    getCurrentIndex(item) {
+        return this.links.indexOf(item);
+    }
+    parseArrayFromString(string) {
+        return string ? JSON.parse(string) : [];
+    }
+    get links() {
+        const menuItems = Array.from(this.shadowRoot.querySelectorAll("udex-masthead-menu-item"));
+        return menuItems.filter(({ url }) => url && url.length > 0);
+    }
+    get itemsList() {
+        return this.parseArrayFromString(this.subItems);
+    }
+    get oneRowClass() {
+        const hasOneColumn = this.itemsList.length === 1 && this.itemsList[0].subMenuLinkItems.length === 1;
+        return hasOneColumn ? "udex-masthead-menu_with-one-column" : "";
+    }
+};
+__decorate([
+    property({ type: String, defaultValue: "" })
+], UDExMastheadMenu.prototype, "menuTitle", void 0);
+__decorate([
+    property({ type: String, defaultValue: "[]" })
+], UDExMastheadMenu.prototype, "subItems", void 0);
+UDExMastheadMenu = __decorate([
+    customElement({
+        tag: "udex-masthead-menu",
+        renderer: litRender,
+        styles: MastheadMenuCss,
+        template: MastheadMenuTemplate,
+        dependencies: [Icon, UDExBadge, UDExMastheadMenuItem],
+    })
+], UDExMastheadMenu);
+UDExMastheadMenu.define();
+export default UDExMastheadMenu;
+//# sourceMappingURL=MastheadMenu.js.map

package/dist/MastheadMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MastheadMenu.js","sourceRoot":"","sources":["../src/MastheadMenu.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 Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport \"@ui5/webcomponents-icons/dist/action.js\";\nimport { isUp, isDown } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UDExBadge from \"./Badge.js\";\nimport UDExMastheadMenuItem from \"./MastheadMenuItem.js\";\nimport MastheadMenuTemplate from \"./generated/templates/MastheadMenuTemplate.lit.js\";\n\n// Styles\nimport MastheadMenuCss from \"./generated/themes/MastheadMenu.css.js\";\n\nexport type Item = {\n  title: string;\n  url: string;\n  externalLink: boolean;\n};\n\nexport type SubMenuLinkItem = {\n  category: string;\n  url: string;\n  items: Item[];\n};\n\nexport type MenuItem = {\n  subMenuLinkItems: SubMenuLinkItem[];\n};\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-menu</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/MastheadMenu.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-masthead-menu\",\n  renderer: litRender,\n  styles: MastheadMenuCss,\n  template: MastheadMenuTemplate,\n  dependencies: [Icon, UDExBadge, UDExMastheadMenuItem],\n})\n\nclass UDExMastheadMenu extends UI5Element {\n  /**\n   * Defines a menu heading\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"\" })\n    menuTitle!: string;\n\n  /**\n   * List of the menu items\n   *\n   * @default \"[]\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"[]\" })\n    subItems!: string;\n\n  handleKeyDown(e: KeyboardEvent) {\n    this.handleUpArrow(e);\n    this.handleDownArrow(e);\n  }\n\n  handleUpArrow(e: KeyboardEvent) {\n    if (isUp(e)) {\n      e.preventDefault();\n      const currentItem = e.target as UDExMastheadMenuItem;\n      this.focusPreviousItem(currentItem);\n    }\n  }\n\n  handleDownArrow(e: KeyboardEvent) {\n    if (isDown(e)) {\n      e.preventDefault();\n      const currentItem = e.target as UDExMastheadMenuItem;\n      this.focusNextItem(currentItem);\n    }\n  }\n\n  focusPreviousItem(item: UDExMastheadMenuItem): void {\n    const currentSelectedIndex = this.getCurrentIndex(item);\n    const lastItemIndex = this.links.length - 1;\n    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;\n    this.links[previousSelectIndex].focus();\n  }\n\n  focusNextItem(item: UDExMastheadMenuItem): void {\n    const currentSelectedIndex = this.getCurrentIndex(item);\n    const nextSelectIndex = currentSelectedIndex + 1 > this.links.length - 1 ? 0 : currentSelectedIndex + 1;\n    this.links[nextSelectIndex].focus();\n  }\n\n  getCurrentIndex(item: UDExMastheadMenuItem): number {\n    return this.links.indexOf(item);\n  }\n\n  parseArrayFromString<T>(string: string): T[] {\n    return string ? JSON.parse(string) as T[] : [];\n  }\n\n  get links(): Array<UDExMastheadMenuItem> {\n    const menuItems: Array<UDExMastheadMenuItem> = Array.from(this.shadowRoot!.querySelectorAll(\"udex-masthead-menu-item\"));\n    return menuItems.filter(({ url }) => url && url.length > 0);\n  }\n\n  get itemsList(): Array<MenuItem> {\n    return this.parseArrayFromString(this.subItems);\n  }\n\n  get oneRowClass(): string {\n    const hasOneColumn = this.itemsList.length === 1 && this.itemsList[0].subMenuLinkItems.length === 1;\n    return hasOneColumn ? \"udex-masthead-menu_with-one-column\" : \"\";\n  }\n}\n\nUDExMastheadMenu.define();\n\nexport default UDExMastheadMenu;\n"]}