@sapudex/web-components 0.199.3 → 0.225.0

package/dist/MastheadMenu.js.map

@@ -1 +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 event from \"@ui5/webcomponents-base/dist/decorators/event.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\nconst rowClass = \"udex-masthead-menu_with-one-column\";\n\nexport type Item = {\n  title: string;\n  url: string;\n  externalLink: boolean;\n};\n\nexport type SubMenuLinkItem = {\n  categoryId: string;\n  category: string;\n  url: string;\n  items: Item[];\n};\n\nexport type MenuItem = {\n  subMenuLinkItems: SubMenuLinkItem[];\n};\n\nexport type MenuItemClickEventDetail = {\n  originalEvent: Event,\n  item: UDExMastheadMenuItem,\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\n/**\n * Fires when menu item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"menu-item-click\", {\n  detail: {\n    item: {\n      type: HTMLElement,\n    },\n    originalEvent: {\n      type: Event,\n    },\n  },\n})\n\nclass UDExMastheadMenu extends UI5Element {\n  /**\n   * Defines a menu heading\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\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  /**\n   * Defines the mobile mode for component\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _isMobileMode!: boolean;\n\n  handleKeyDown(e: KeyboardEvent): void {\n    this.handleUpArrow(e);\n    this.handleDownArrow(e);\n  }\n\n  handleUpArrow(e: KeyboardEvent): void {\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): void {\n    if (isDown(e)) {\n      e.preventDefault();\n      const currentItem = e.target as UDExMastheadMenuItem;\n      this.focusNextItem(currentItem);\n    }\n  }\n\n  handleMenuItemClick(e: Event): void {\n    this.fireEvent<MenuItemClickEventDetail>(\"menu-item-click\", {\n      item: e.target as UDExMastheadMenuItem,\n      originalEvent: e,\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    let id = 1;\n    const parsedItems: Array<MenuItem> = this.parseArrayFromString(this.subItems);\n    return parsedItems.map((mainItem: MenuItem) => {\n      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((category: SubMenuLinkItem) => {\n        category.categoryId = `${id++}`;\n        return category;\n      });\n\n      return mainItem;\n    });\n  }\n\n  get oneRowClass(): string {\n    const hasOneColumn = this.itemsList.length === 1 && this.itemsList[0].subMenuLinkItems.length === 1;\n    return hasOneColumn ? rowClass : \"\";\n  }\n}\n\nUDExMastheadMenu.define();\n\nexport default UDExMastheadMenu;\n"]}
+{"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 event from \"@ui5/webcomponents-base/dist/decorators/event.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, { ItemType } from \"./MastheadMenuItem.js\";\nimport UDExDivider from \"./Divider.js\";\nimport MastheadMenuTemplate from \"./generated/templates/MastheadMenuTemplate.lit.js\";\n\n// Styles\nimport MastheadMenuCss from \"./generated/themes/MastheadMenu.css.js\";\n\nconst rowClass = \"udex-masthead-menu_with-one-column\";\n\nexport type Item = {\n  title: string;\n  url: string;\n  externalLink: boolean;\n};\n\nexport type SubMenuLinkItem = {\n  categoryId: string;\n  category: string;\n  url: string;\n  items: Item[];\n};\n\nexport type MenuItem = {\n  subMenuLinkItems: SubMenuLinkItem[];\n};\n\nexport type MenuItemClickEventDetail = {\n  category?: string,\n  originalEvent: Event,\n  item: UDExMastheadMenuItem,\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 \"@sapudex/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, UDExDivider],\n})\n\n/**\n * Fires when menu item is clicked\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"menu-item-click\", {\n  detail: {\n    category: {\n      type: String,\n    },\n    item: {\n      type: HTMLElement,\n    },\n    originalEvent: {\n      type: Event,\n    },\n  },\n})\n\nclass UDExMastheadMenu extends UI5Element {\n  /**\n   * Defines a menu heading\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\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  /**\n   * Defines the mobile mode for component\n   *\n   * @private\n   */\n  @property({ type: Boolean })\n    _isMobileMode!: boolean;\n\n  handleKeyDown(e: KeyboardEvent): void {\n    this.handleUpArrow(e);\n    this.handleDownArrow(e);\n  }\n\n  handleUpArrow(e: KeyboardEvent): void {\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): void {\n    if (isDown(e)) {\n      e.preventDefault();\n      const currentItem = e.target as UDExMastheadMenuItem;\n      this.focusNextItem(currentItem);\n    }\n  }\n\n  handleMenuItemClick(e: Event): void {\n    const item = e.target as UDExMastheadMenuItem;\n    const { url, type } = item;\n\n    if (url?.length) {\n      const list = item.closest(\".udex-masthead-menu__list\") as HTMLElement;\n      this.fireEvent<MenuItemClickEventDetail>(\"menu-item-click\", {\n        item,\n        originalEvent: e,\n        ...(type !== ItemType.Heading && { category: list?.getAttribute(\"category\") || \"\" }),\n      });\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    let id = 1;\n    const parsedItems: Array<MenuItem> = this.parseArrayFromString(this.subItems);\n    return parsedItems.map((mainItem: MenuItem) => {\n      mainItem.subMenuLinkItems = mainItem.subMenuLinkItems.map((category: SubMenuLinkItem) => {\n        category.categoryId = `${id++}`;\n        return category;\n      });\n\n      return mainItem;\n    });\n  }\n\n  get oneRowClass(): string {\n    const hasOneColumn = this.itemsList.length === 1 && this.itemsList[0].subMenuLinkItems.length === 1;\n    return hasOneColumn ? rowClass : \"\";\n  }\n}\n\nUDExMastheadMenu.define();\n\nexport default UDExMastheadMenu;\n"]}

package/dist/MastheadMenuItem.d.ts

@@ -19,7 +19,7 @@ export declare enum ItemType {
  * For the <code>udex-masthead-menu-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadMenuItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadMenuItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -93,12 +93,30 @@ declare class UDExMastheadMenuItem extends UI5Element {
      * @default false
      */
     iconEnd?: boolean;
+    /**
+     * Defines the index for the item.
+     *
+     * @public
+     */
+    index: number;
+    /**
+     * Defines the aria-haspopup attribute for the item.
+     *
+     * @public
+     */
+    ariaHasPopup: string;
     /**
      * Define the target of the item
      * <b>Note:</b> Standard hyperlink behavior is supported.
      * @public
      */
     target: `${Target}`;
+    /**
+     * Defines the tabindex attribute for the item.
+     *
+     * @private
+     */
+    _tabIndex: string;
     static i18nBundle: I18nBundle;
     static onDefine(): Promise<void>;
     onEnterDOM(): void;

package/dist/MastheadMenuItem.js

@@ -12,6 +12,7 @@ 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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import { OPENS_IN_A_NEW_WINDOW } from "./generated/i18n/i18n-defaults.js";
@@ -36,7 +37,7 @@ export var ItemType;
  * For the <code>udex-masthead-menu-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadMenuItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadMenuItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -44,7 +45,7 @@ export var ItemType;
  */
 let UDExMastheadMenuItem = UDExMastheadMenuItem_1 = class UDExMastheadMenuItem extends UI5Element {
     static async onDefine() {
-        UDExMastheadMenuItem_1.i18nBundle = await getI18nBundle("@udex/web-components");
+        UDExMastheadMenuItem_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
     }
     onEnterDOM() {
         if (isDesktop()) {
@@ -52,13 +53,14 @@ let UDExMastheadMenuItem = UDExMastheadMenuItem_1 = class UDExMastheadMenuItem e
         }
     }
     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";
+        const prefixClass = "udex-masthead-menu-item";
+        const badgeClass = this.badge ? `${prefixClass}_badge` : "";
+        const rootClass = this.isHeadingType ? `${prefixClass}_is-header` : `${prefixClass}_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}`;
+        return this.externalLink ? `${root} ${root}__label_with-icon` : `${root}`;
     }
     get isHeadingType() {
         return this.type === ItemType.Heading;
@@ -67,7 +69,7 @@ let UDExMastheadMenuItem = UDExMastheadMenuItem_1 = class UDExMastheadMenuItem e
         return this.type === ItemType.Button;
     }
     get isActive() {
-        return (this.type === ItemType.Link || !!this.url) && !this.isButtonType;
+        return !!this.url && !this.isButtonType;
     }
     get targetLink() {
         if (this.externalLink) {
@@ -122,9 +124,18 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], UDExMastheadMenuItem.prototype, "iconEnd", void 0);
+__decorate([
+    property({ validator: Integer })
+], UDExMastheadMenuItem.prototype, "index", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadMenuItem.prototype, "ariaHasPopup", void 0);
 __decorate([
     property({ type: Target, defaultValue: Target._self })
 ], UDExMastheadMenuItem.prototype, "target", void 0);
+__decorate([
+    property({ type: String })
+], UDExMastheadMenuItem.prototype, "_tabIndex", void 0);
 UDExMastheadMenuItem = UDExMastheadMenuItem_1 = __decorate([
     customElement({
         tag: "udex-masthead-menu-item",

package/dist/MastheadMenuItem.js.map

@@ -1 +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 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 type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.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 { OPENS_IN_A_NEW_WINDOW } from \"./generated/i18n/i18n-defaults.js\";\nimport { Target } from \"./types/common.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>udex-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 * @private\n */\n@customElement({\n  tag: \"udex-masthead-menu-item\",\n  languageAware: true,\n  renderer: litRender,\n  styles: MastheadMenuItemCss,\n  template: MastheadMenuItemTemplate,\n  dependencies: [Icon],\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  /**\n   * Define the target of the item\n   * <b>Note:</b> Standard hyperlink behavior is supported.\n   * @public\n   */\n  @property({ type: Target, defaultValue: Target._self })\n    target!: `${Target}`;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExMastheadMenuItem.i18nBundle = await getI18nBundle(\"@udex/web-components\");\n  }\n\n  onEnterDOM() {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\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 targetLink(): string {\n    if (this.externalLink) {\n      return this.externalLink ? Target._blank : Target._self;\n    }\n    return this.target;\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  get openInNewWindowText(): string {\n    return UDExMastheadMenuItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);\n  }\n\n  get ariaDescribedby(): string | null {\n    return this.externalLink ? \"new-win-desc\" : null;\n  }\n\n  get accessibleRoleText(): string | null {\n    return this.accessibleRole ? this.accessibleRole : null;\n  }\n\n  get partAttr(): string {\n    return this.badge ? \"menu-item-link-badge\" : \"menu-item-link\";\n  }\n}\n\nUDExMastheadMenuItem.define();\n\nexport default UDExMastheadMenuItem;\n"]}
+{"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 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 type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport { OPENS_IN_A_NEW_WINDOW } from \"./generated/i18n/i18n-defaults.js\";\nimport { Target } from \"./types/common.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>udex-masthead-menu-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/MastheadMenuItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n  tag: \"udex-masthead-menu-item\",\n  languageAware: true,\n  renderer: litRender,\n  styles: MastheadMenuItemCss,\n  template: MastheadMenuItemTemplate,\n  dependencies: [Icon],\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  /**\n   * Defines the index for the item.\n   *\n   * @public\n   */\n  @property({ validator: Integer })\n    index!: number;\n\n  /**\n   * Defines the aria-haspopup attribute for the item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    ariaHasPopup!: 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: Target, defaultValue: Target._self })\n    target!: `${Target}`;\n\n  /**\n   * Defines the tabindex attribute for the item.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _tabIndex!: string;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExMastheadMenuItem.i18nBundle = await getI18nBundle(\"@sapudex/web-components\");\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  get rootClass(): string {\n    const prefixClass = \"udex-masthead-menu-item\";\n    const badgeClass = this.badge ? `${prefixClass}_badge` : \"\";\n    const rootClass = this.isHeadingType ? `${prefixClass}_is-header` : `${prefixClass}_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} ${root}__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.url && !this.isButtonType;\n  }\n\n  get targetLink(): string {\n    if (this.externalLink) {\n      return this.externalLink ? Target._blank : Target._self;\n    }\n    return this.target;\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  get openInNewWindowText(): string {\n    return UDExMastheadMenuItem.i18nBundle.getText(OPENS_IN_A_NEW_WINDOW);\n  }\n\n  get ariaDescribedby(): string | null {\n    return this.externalLink ? \"new-win-desc\" : null;\n  }\n\n  get accessibleRoleText(): string | null {\n    return this.accessibleRole ? this.accessibleRole : null;\n  }\n\n  get partAttr(): string {\n    return this.badge ? \"menu-item-link-badge\" : \"menu-item-link\";\n  }\n}\n\nUDExMastheadMenuItem.define();\n\nexport default UDExMastheadMenuItem;\n"]}

package/dist/MastheadMobileMenu.d.ts

@@ -3,6 +3,8 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExMastheadItem, { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
 import UDExMastheadMenuItem from "./MastheadMenuItem.js";
 export type MobileItemClickEventDetail = {
+    category?: string;
+    isMobile: boolean;
     originalEvent: Event;
     item: UDExMastheadMenuItem;
 };
@@ -17,7 +19,7 @@ export type MobileItemClickEventDetail = {
  * For the <code>udex-masthead-mobile-menu</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadMobileMenu.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadMobileMenu.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -63,13 +65,15 @@ declare class UDExMastheadMobileMenu extends UI5Element {
     handleBackToMenuItems(e: Event): void;
     handleBackToCategories(e: Event): void;
     handleExploreBackToMenuItems(e: Event): void;
-    handleKeyDown(e: KeyboardEvent): void;
+    handlePressKey(e: KeyboardEvent): void;
+    handleLeftRightKeys(e: KeyboardEvent): void;
     handleRightArrow(e: KeyboardEvent): void;
     handleLeftArrow(e: KeyboardEvent): void;
     handleUpArrow(e: KeyboardEvent): void;
     handleDownArrow(e: KeyboardEvent): void;
     handleDirection(): void;
     handleMobileItemEvent(e: Event): void;
+    handleMobileCategoryItemEvent(e: PointerEvent): void;
     handleMenuMode(): void;
     handleFocusItem(): void;
     moveToBackWithKeyboard(e: KeyboardEvent): void;
@@ -78,21 +82,24 @@ declare class UDExMastheadMobileMenu extends UI5Element {
     focusExploreBtn(): void;
     focusPreviousItem(e: KeyboardEvent): void;
     focusNextItem(e: KeyboardEvent): void;
+    handleEndKey(e: KeyboardEvent): void;
+    handleHomeKey(e: KeyboardEvent): void;
     openExploreSapMenu(e: Event): void;
     openCategories(item: UDExMastheadItem): void;
     openCategoryItems(e: Event): void;
     showFirstLevelMenu(): void;
     showCategories(): void;
-    fireMobileItemEvent(e: Event): void;
+    fireMobileItemEvent(e: Event, category?: string): void;
     setFocusItemByIndex(index: number): void;
     setFocusExploreBtn(): void;
-    getItemByList(el: UDExMastheadItem): UDExMastheadItem;
+    getClickedItem(el: UDExMastheadItem): UDExMastheadItem;
     getCategories(items: Array<MenuItem>): Array<SubMenuLinkItem>;
-    getCurrentIndex(item: HTMLElement): number;
-    getListItemByIndex(index: number): HTMLElement | null;
+    getCurrentIndex(item: UDExMastheadMenuItem): number;
+    getListItemByIndex(index: number): UDExMastheadMenuItem;
+    setTabIndexForItems(): void;
     get exploreBtnMenu(): UDExMastheadMenuItem;
     get isRtlDirection(): boolean;
-    get navigationItems(): Array<HTMLElement>;
+    get navigationItems(): Array<UDExMastheadMenuItem>;
     get showNavigation(): boolean;
     get overviewLinkText(): string;
     get exploreItem(): UDExMastheadItem;

package/dist/MastheadMobileMenu.js

@@ -12,8 +12,8 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.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 { isUp, isDown, isRight, isLeft, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import UDExMastheadMenuItem, { ItemType } from "./MastheadMenuItem.js";
 import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
 import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
 // Styles
@@ -29,7 +29,7 @@ import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js"
  * For the <code>udex-masthead-mobile-menu</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/MastheadMobileMenu.js";</code>
+ * <code>import "@sapudex/web-components/dist/MastheadMobileMenu.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -37,16 +37,17 @@ import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js"
  */
 let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobileMenu extends UI5Element {
     static async onDefine() {
-        UDExMastheadMobileMenu_1.i18nBundle = await getI18nBundle("@udex/web-components");
+        UDExMastheadMobileMenu_1.i18nBundle = await getI18nBundle("@sapudex/web-components");
     }
     onAfterRendering() {
         this.handleMenuMode();
+        this.setTabIndexForItems();
         this.handleFocusItem();
     }
     handleMenuItemClick(e) {
         e.preventDefault();
         e.stopPropagation();
-        const item = this.getItemByList(e.target);
+        const item = this.getClickedItem(e.target);
         this.openCategories(item);
         this.setFocusItemByIndex(0);
         this.fireMobileItemEvent(e);
@@ -62,7 +63,7 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
         e.preventDefault();
         this.openExploreSapMenu(e);
         this.setFocusItemByIndex(0);
-        this.fireEvent("explorer-menu-click");
+        this.fireEvent("explorer-menu-click", { originalEvent: e });
     }
     handleBackToMenuItems(e) {
         e.stopPropagation();
@@ -82,15 +83,20 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
         this.setFocusExploreBtn();
         this.fireMobileItemEvent(e);
     }
-    handleKeyDown(e) {
+    handlePressKey(e) {
         this.handleUpArrow(e);
         this.handleDownArrow(e);
+        this.handleLeftRightKeys(e);
+        this.handleHomeKey(e);
+        this.handleEndKey(e);
+    }
+    handleLeftRightKeys(e) {
         this.handleRightArrow(e);
         this.handleLeftArrow(e);
     }
     handleRightArrow(e) {
-        this.handleDirection();
-        if (isRight(e) || isEnter(e)) {
+        if (isRight(e)) {
+            this.handleDirection();
             if (this.isRtlDirection) {
                 this.moveToBackWithKeyboard(e);
             }
@@ -100,8 +106,8 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
         }
     }
     handleLeftArrow(e) {
-        this.handleDirection();
-        if (isLeft(e) || isEnter(e)) {
+        if (isLeft(e)) {
+            this.handleDirection();
             if (this.isRtlDirection) {
                 this.moveToNextLevelWithKeyboard(e);
             }
@@ -123,9 +129,7 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
         }
     }
     handleDirection() {
-        const directionStyles = window
-            .getComputedStyle(this)
-            .getPropertyValue("direction");
+        const directionStyles = window.getComputedStyle(this).getPropertyValue("direction");
         if (!directionStyles) {
             this._direction = "ltr";
         }
@@ -137,14 +141,16 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
         e.stopPropagation();
         this.fireMobileItemEvent(e);
     }
+    handleMobileCategoryItemEvent(e) {
+        e.stopPropagation();
+        this.fireMobileItemEvent(e, this._category.category);
+    }
     handleMenuMode() {
-        if (this.isCategoriesOpen) {
-            if (this.isNoMenuItemsMode && this.hasExploreBtnSlot) {
-                this.openCategories(this.exploreItem);
-            }
-            if (this.isSingleMenuMode) {
-                this.openCategories(this.items[0]);
-            }
+        if (this.isNoMenuItemsMode && this.hasExploreBtnSlot) {
+            this.openCategories(this.exploreItem);
+        }
+        if (this.isSingleMenuMode && !this._hideExploreSapBtn) {
+            this.openCategories(this.items[0]);
         }
     }
     handleFocusItem() {
@@ -170,12 +176,13 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
         if (target.hasAttribute("is-explore-back")) {
             this.showFirstLevelMenu();
             this.setFocusExploreBtn();
+            this._focusedItemIndex = 0;
             this.fireMobileItemEvent(e);
         }
     }
     moveToNextLevelWithKeyboard(e) {
         const target = e.target;
-        const item = this.getItemByList(e.target);
+        const item = this.getClickedItem(e.target);
         if (target.hasAttribute("is-explore")) {
             this._hideExploreSapBtn = true;
             this._showCategoryItems = false;
@@ -200,24 +207,57 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
         this._shouldFocusExploreBtn = false;
     }
     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();
+        const currentIndex = this.getCurrentIndex(e.target);
+        const lastIndex = this.navigationItems.length - 1;
+        const previousIndex = currentIndex - 1 < 0 ? lastIndex : currentIndex - 1;
+        const currentItem = this.getListItemByIndex(currentIndex);
+        let prevItem = this.getListItemByIndex(previousIndex);
+        if (prevItem.type === ItemType.Heading) {
+            prevItem = this.getListItemByIndex(lastIndex);
+        }
+        currentItem._tabIndex = "-1";
+        prevItem._tabIndex = "0";
+        prevItem.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();
+        const currentIndex = this.getCurrentIndex(e.target);
+        const navLength = this.navigationItems.length;
+        const nextIndex = currentIndex + 1 > navLength - 1 ? 0 : currentIndex + 1;
+        const currentItem = this.getListItemByIndex(currentIndex);
+        let nextItem = this.getListItemByIndex(nextIndex);
+        if (nextItem.type === ItemType.Heading) {
+            nextItem = this.getListItemByIndex(nextIndex + 1);
+        }
+        currentItem._tabIndex = "-1";
+        nextItem._tabIndex = "0";
+        nextItem.focus();
+    }
+    handleEndKey(e) {
+        if (isEnd(e)) {
+            e.preventDefault();
+            const currentIndex = this.getCurrentIndex(e.target);
+            const lastIndex = this.navigationItems.length - 1;
+            const currentItem = this.getListItemByIndex(currentIndex);
+            const lastItem = this.getListItemByIndex(lastIndex);
+            currentItem._tabIndex = "-1";
+            lastItem._tabIndex = "0";
+            lastItem.focus();
+        }
+    }
+    handleHomeKey(e) {
+        if (isHome(e)) {
+            e.preventDefault();
+            const currentIndex = this.getCurrentIndex(e.target);
+            const currentItem = this.getListItemByIndex(currentIndex);
+            const firstItem = this.getListItemByIndex(0);
+            const focusedIndex = firstItem.type === ItemType.Heading ? 1 : 0;
+            currentItem._tabIndex = "-1";
+            this.getListItemByIndex(focusedIndex)._tabIndex = "0";
+            this.getListItemByIndex(focusedIndex).focus();
+        }
     }
     openExploreSapMenu(e) {
-        const item = this.getItemByList(e.target);
+        const item = this.getClickedItem(e.target);
         this._hideExploreSapBtn = true;
         this._showCategoryItems = false;
         this.openCategories(item);
@@ -243,8 +283,10 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
         this._showCategories = true;
         this._showCategoryItems = false;
     }
-    fireMobileItemEvent(e) {
+    fireMobileItemEvent(e, category) {
         this.fireEvent("item-click", {
+            ...(category && { category }),
+            isMobile: true,
             item: e.target,
             originalEvent: e,
         }, true, false);
@@ -256,7 +298,7 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
     setFocusExploreBtn() {
         this._shouldFocusExploreBtn = true;
     }
-    getItemByList(el) {
+    getClickedItem(el) {
         const items = [
             ...this.items,
             ...[this.hasExploreBtnSlot ? this.exploreItem : []],
@@ -276,7 +318,17 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
         return this.navigationItems.indexOf(item);
     }
     getListItemByIndex(index) {
-        return this.navigationItems[index]?.querySelector("[udex-masthead-menu-item]");
+        return this.navigationItems[index];
+    }
+    setTabIndexForItems() {
+        this.navigationItems.forEach((item, index) => {
+            if (this._focusedItemIndex > 0) {
+                item._tabIndex = index === this._focusedItemIndex ? "0" : "-1";
+                return;
+            }
+            const isPrevItemHeading = this.navigationItems[index - 1]?.type === ItemType.Heading;
+            item._tabIndex = isPrevItemHeading || index === 0 ? "0" : "-1";
+        });
     }
     get exploreBtnMenu() {
         return this.shadowRoot.querySelector(".udex-masthead-mobile-menu__explore-btn");
@@ -285,7 +337,7 @@ let UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = class UDExMastheadMobile
         return this._direction === "rtl";
     }
     get navigationItems() {
-        return Array.from(this.shadowRoot.querySelectorAll(".udex-masthead-mobile-menu__list-item"));
+        return Array.from(this.shadowRoot.querySelectorAll("ul [udex-masthead-menu-item]"));
     }
     get showNavigation() {
         return !this._showCategories && !this._showCategoryItems;
@@ -371,7 +423,13 @@ UDExMastheadMobileMenu = UDExMastheadMobileMenu_1 = __decorate([
      * @public
      */
     ,
-    event("explorer-menu-click")
+    event("explorer-menu-click", {
+        detail: {
+            originalEvent: {
+                type: Event,
+            },
+        },
+    })
 ], UDExMastheadMobileMenu);
 UDExMastheadMobileMenu.define();
 export default UDExMastheadMobileMenu;