@ui5/webcomponents-fiori 0.0.0-e818f286e → 0.0.0-ebd9a4db3

package/dist/NavigationLayout.d.ts

@@ -0,0 +1,74 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import NavigationLayoutMode from "./types/NavigationLayoutMode.js";
+import type SideNavigation from "./SideNavigation.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-navigation-layout` is a container component that can be used to
+ * create a layout with a header, a side navigation and a content area.
+ *
+ * ### Usage
+ *
+ * Use the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.
+ *
+ * ### Responsive Behavior
+ *
+ * On desktop and tablet devices, the side navigation is visible
+ * by default and can be expanded or collapsed using the `mode` property.
+ * On phone devices, the side navigation is hidden by default and can
+ * be displayed using the `mode` property.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 2.4.0
+ * @public
+ */
+declare class NavigationLayout extends UI5Element {
+    _defaultSideCollapsed: boolean;
+    /**
+     * Specifies the navigation layout mode.
+     * @default "Auto"
+     * @public
+     */
+    mode: `${NavigationLayoutMode}`;
+    /**
+     * @private
+     */
+    sideCollapsed: boolean;
+    /**
+     * @private
+     */
+    isPhone: boolean;
+    /**
+     * @private
+     */
+    isTablet: boolean;
+    /**
+     * Gets whether the side navigation is collapsed.
+     * @public
+     */
+    isSideCollapsed(): boolean;
+    /**
+     * Defines the header.
+     * @public
+     */
+    header: Array<HTMLElement>;
+    /**
+     * Defines the side content.
+     * @public
+     */
+    sideContent: Array<SideNavigation>;
+    /**
+     * Defines the content.
+     * @public
+     */
+    content: Array<HTMLElement>;
+    onBeforeRendering(): void;
+    calcSideCollapsed(): void;
+}
+export default NavigationLayout;

package/dist/NavigationLayout.js

@@ -0,0 +1,131 @@
+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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
+import { isPhone, isTablet, isCombi, } from "@ui5/webcomponents-base/dist/Device.js";
+import NavigationLayoutMode from "./types/NavigationLayoutMode.js";
+// Template
+import NavigationLayoutTemplate from "./NavigationLayoutTemplate.js";
+// Styles
+import NavigationLayoutCss from "./generated/themes/NavigationLayout.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-navigation-layout` is a container component that can be used to
+ * create a layout with a header, a side navigation and a content area.
+ *
+ * ### Usage
+ *
+ * Use the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.
+ *
+ * ### Responsive Behavior
+ *
+ * On desktop and tablet devices, the side navigation is visible
+ * by default and can be expanded or collapsed using the `mode` property.
+ * On phone devices, the side navigation is hidden by default and can
+ * be displayed using the `mode` property.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NavigationLayout.js";`
+ * @constructor
+ * @extends UI5Element
+ * @since 2.4.0
+ * @public
+ */
+let NavigationLayout = class NavigationLayout extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this._defaultSideCollapsed = isPhone() || (isTablet() && !isCombi());
+        /**
+         * Specifies the navigation layout mode.
+         * @default "Auto"
+         * @public
+         */
+        this.mode = "Auto";
+        /**
+         * @private
+         */
+        this.sideCollapsed = this._defaultSideCollapsed;
+        /**
+         * @private
+         */
+        this.isPhone = isPhone();
+        /**
+         * @private
+         */
+        this.isTablet = isTablet() && !isCombi();
+    }
+    /**
+     * Gets whether the side navigation is collapsed.
+     * @public
+     */
+    isSideCollapsed() {
+        this.calcSideCollapsed();
+        return this.sideCollapsed;
+    }
+    onBeforeRendering() {
+        this.calcSideCollapsed();
+        if (isPhone()) {
+            return;
+        }
+        const sideNavigation = this.sideContent[0];
+        if (sideNavigation) {
+            sideNavigation.collapsed = this.isSideCollapsed();
+        }
+    }
+    calcSideCollapsed() {
+        if (this.mode === NavigationLayoutMode.Auto) {
+            this.sideCollapsed = this._defaultSideCollapsed;
+        }
+        else {
+            this.sideCollapsed = this.mode === NavigationLayoutMode.Collapsed;
+        }
+    }
+};
+__decorate([
+    property()
+], NavigationLayout.prototype, "mode", void 0);
+__decorate([
+    property({ type: Boolean })
+], NavigationLayout.prototype, "sideCollapsed", void 0);
+__decorate([
+    property({ type: Boolean })
+], NavigationLayout.prototype, "isPhone", void 0);
+__decorate([
+    property({ type: Boolean })
+], NavigationLayout.prototype, "isTablet", void 0);
+__decorate([
+    slot()
+], NavigationLayout.prototype, "header", void 0);
+__decorate([
+    slot()
+], NavigationLayout.prototype, "sideContent", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], NavigationLayout.prototype, "content", void 0);
+NavigationLayout = __decorate([
+    customElement({
+        tag: "ui5-navigation-layout",
+        languageAware: true,
+        renderer: jsxRenderer,
+        styles: [
+            getEffectiveScrollbarStyle(),
+            NavigationLayoutCss,
+        ],
+        template: NavigationLayoutTemplate,
+    })
+], NavigationLayout);
+NavigationLayout.define();
+export default NavigationLayout;
+//# sourceMappingURL=NavigationLayout.js.map

package/dist/NavigationLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationLayout.js","sourceRoot":"","sources":["../src/NavigationLayout.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,0BAA0B,MAAM,iEAAiE,CAAC;AACzG,OAAO,EACN,OAAO,EACP,QAAQ,EACR,OAAO,GACP,MAAM,wCAAwC,CAAC;AAChD,OAAO,oBAAoB,MAAM,iCAAiC,CAAC;AAGnE,WAAW;AACX,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAErE,SAAS;AACT,OAAO,mBAAmB,MAAM,4CAA4C,CAAC;AAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAWH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QACC,0BAAqB,GAAG,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAEhE;;;;WAIG;QAEH,SAAI,GAA8B,MAAM,CAAC;QAEzC;;WAEG;QAEH,kBAAa,GAAa,IAAI,CAAC,qBAAqB,CAAC;QAErD;;WAEG;QAEH,YAAO,GAAG,OAAO,EAAE,CAAC;QAEpB;;WAEG;QAEH,aAAQ,GAAG,QAAQ,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;IAqDrC,CAAC;IAnDA;;;OAGG;IACH,eAAe;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC3B,CAAC;IAuBD,iBAAiB;QAChB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEzB,IAAI,OAAO,EAAE,EAAE,CAAC;YACf,OAAO;QACR,CAAC;QAED,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAE3C,IAAI,cAAc,EAAE,CAAC;YACpB,cAAc,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACnD,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,oBAAoB,CAAC,IAAI,EAAE,CAAC;YAC7C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAC;QACjD,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,KAAK,oBAAoB,CAAC,SAAS,CAAC;QACnE,CAAC;IACF,CAAC;CACD,CAAA;AAvEA;IADC,QAAQ,EAAE;8CAC8B;AAMzC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACyB;AAMrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACR;AAMpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACQ;AAgBpC;IADC,IAAI,EAAE;gDACqB;AAO5B;IADC,IAAI,EAAE;qDAC6B;AAOpC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;iDAChB;AAzDxB,gBAAgB;IAVrB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;QAC5B,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE;YACP,0BAA0B,EAAE;YAC5B,mBAAmB;SACnB;QACD,QAAQ,EAAE,wBAAwB;KAClC,CAAC;GACI,gBAAgB,CAgFrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","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 jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport getEffectiveScrollbarStyle from \"@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js\";\nimport {\n\tisPhone,\n\tisTablet,\n\tisCombi,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport NavigationLayoutMode from \"./types/NavigationLayoutMode.js\";\nimport type SideNavigation from \"./SideNavigation.js\";\n\n// Template\nimport NavigationLayoutTemplate from \"./NavigationLayoutTemplate.js\";\n\n// Styles\nimport NavigationLayoutCss from \"./generated/themes/NavigationLayout.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-navigation-layout` is a container component that can be used to\n * create a layout with a header, a side navigation and a content area.\n *\n * ### Usage\n *\n * Use the `ui5-navigation-layout` to create whole screen of an application with vertical navigation.\n *\n * ### Responsive Behavior\n *\n * On desktop and tablet devices, the side navigation is visible\n * by default and can be expanded or collapsed using the `mode` property.\n * On phone devices, the side navigation is hidden by default and can\n * be displayed using the `mode` property.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/NavigationLayout.js\";`\n * @constructor\n * @extends UI5Element\n * @since 2.4.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-navigation-layout\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: [\n\t\tgetEffectiveScrollbarStyle(),\n\t\tNavigationLayoutCss,\n\t],\n\ttemplate: NavigationLayoutTemplate,\n})\nclass NavigationLayout extends UI5Element {\n\t_defaultSideCollapsed = isPhone() || (isTablet() && !isCombi());\n\n\t/**\n\t * Specifies the navigation layout mode.\n\t * @default \"Auto\"\n\t * @public\n\t */\n\t@property()\n\tmode: `${NavigationLayoutMode}` = \"Auto\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tsideCollapsed : boolean = this._defaultSideCollapsed;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tisPhone = isPhone();\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tisTablet = isTablet() && !isCombi();\n\n\t/**\n\t * Gets whether the side navigation is collapsed.\n\t * @public\n\t */\n\tisSideCollapsed() : boolean {\n\t\tthis.calcSideCollapsed();\n\t\treturn this.sideCollapsed;\n\t}\n\n\t/**\n\t * Defines the header.\n\t * @public\n\t */\n\t@slot()\n\theader!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the side content.\n\t * @public\n\t */\n\t@slot()\n\tsideContent!: Array<SideNavigation>;\n\n\t/**\n\t * Defines the content.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: Array<HTMLElement>;\n\n\tonBeforeRendering() {\n\t\tthis.calcSideCollapsed();\n\n\t\tif (isPhone()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst sideNavigation = this.sideContent[0];\n\n\t\tif (sideNavigation) {\n\t\t\tsideNavigation.collapsed = this.isSideCollapsed();\n\t\t}\n\t}\n\n\tcalcSideCollapsed() {\n\t\tif (this.mode === NavigationLayoutMode.Auto) {\n\t\t\tthis.sideCollapsed = this._defaultSideCollapsed;\n\t\t} else {\n\t\t\tthis.sideCollapsed = this.mode === NavigationLayoutMode.Collapsed;\n\t\t}\n\t}\n}\n\nNavigationLayout.define();\n\nexport default NavigationLayout;\n"]}

package/dist/NavigationLayoutTemplate.d.ts

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

package/dist/NavigationLayoutTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+export default function NavigationLayoutTemplate() {
+    return (_jsxs("div", { class: "ui5-nl-root", children: [_jsx("header", { class: "ui5-nl-header", children: _jsx("slot", { name: "header" }) }), _jsxs("section", { class: "ui5-nl-section", children: [_jsx("aside", { class: "ui5-nl-aside", children: _jsx("slot", { name: "sideContent" }) }), _jsx("div", { class: "ui5-nl-content", children: _jsx("slot", {}) })] })] }));
+}
+//# sourceMappingURL=NavigationLayoutTemplate.js.map

package/dist/NavigationLayoutTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationLayoutTemplate.js","sourceRoot":"","sources":["../src/NavigationLayoutTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,OAAO,CACN,eAAK,KAAK,EAAC,aAAa,aACvB,iBAAQ,KAAK,EAAC,eAAe,YAC5B,eAAM,IAAI,EAAC,QAAQ,GAAQ,GACnB,EACT,mBAAS,KAAK,EAAC,gBAAgB,aAC9B,gBAAO,KAAK,EAAC,cAAc,YAC1B,eAAM,IAAI,EAAC,aAAa,GAAQ,GACzB,EACR,cAAK,KAAK,EAAC,gBAAgB,YAC1B,gBAAa,GACR,IACG,IACL,CACN,CAAC;AACH,CAAC","sourcesContent":["import type NavigationLayout from \"./NavigationLayout.js\";\n\nexport default function NavigationLayoutTemplate(this: NavigationLayout) {\n\treturn (\n\t\t<div class=\"ui5-nl-root\">\n\t\t\t<header class=\"ui5-nl-header\">\n\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t</header>\n\t\t\t<section class=\"ui5-nl-section\">\n\t\t\t\t<aside class=\"ui5-nl-aside\">\n\t\t\t\t\t<slot name=\"sideContent\"></slot>\n\t\t\t\t</aside>\n\t\t\t\t<div class=\"ui5-nl-content\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</div>\n\t);\n}\n"]}

package/dist/NavigationMenu.d.ts

@@ -0,0 +1,34 @@
+import Menu from "@ui5/webcomponents/dist/Menu.js";
+import type NavigationMenuItem from "./NavigationMenuItem.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * `ui5-navigation-menu` component represents a hierarchical menu structure, inherits all the functionality of `ui5-menu`.
+ *
+ * ### Usage
+ *
+ * `ui5-navigation-menu` contains `ui5-navigation-menu-item` components.
+ * An arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NavigationMenu.js";`
+ * @constructor
+ * @extends Menu
+ * @since 1.22.0
+ * @private
+ */
+declare class NavigationMenu extends Menu {
+    /**
+     * Defines the items of this component.
+     *
+     * **Note:** Use `ui5-navigation-menu-item` for the intended design.
+     * @public
+     */
+    items: Array<NavigationMenuItem>;
+    _itemMouseOver(e: MouseEvent): void;
+    get accSideNavigationPopoverHiddenText(): string;
+}
+export default NavigationMenu;

package/dist/NavigationMenu.js

@@ -0,0 +1,64 @@
+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 NavigationMenu_1;
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isDesktop, } from "@ui5/webcomponents-base/dist/Device.js";
+import Menu from "@ui5/webcomponents/dist/Menu.js";
+import NavigationMenuTemplate from "./NavigationMenuTemplate.js";
+// Styles
+import navigationMenuCss from "./generated/themes/NavigationMenu.css.js";
+import menuCss from "@ui5/webcomponents/dist/generated/themes/Menu.css.js";
+import { NAVIGATION_MENU_POPOVER_HIDDEN_TEXT, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * `ui5-navigation-menu` component represents a hierarchical menu structure, inherits all the functionality of `ui5-menu`.
+ *
+ * ### Usage
+ *
+ * `ui5-navigation-menu` contains `ui5-navigation-menu-item` components.
+ * An arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NavigationMenu.js";`
+ * @constructor
+ * @extends Menu
+ * @since 1.22.0
+ * @private
+ */
+let NavigationMenu = NavigationMenu_1 = class NavigationMenu extends Menu {
+    _itemMouseOver(e) {
+        if (isDesktop()) {
+            // respect mouseover only on desktop
+            const item = e.target;
+            // Opens submenu with 300ms delay
+            this._startOpenTimeout(item);
+        }
+    }
+    get accSideNavigationPopoverHiddenText() {
+        return NavigationMenu_1.i18nBundle.getText(NAVIGATION_MENU_POPOVER_HIDDEN_TEXT);
+    }
+};
+__decorate([
+    slot({ "default": true, type: HTMLElement, invalidateOnChildChange: true })
+], NavigationMenu.prototype, "items", void 0);
+NavigationMenu = NavigationMenu_1 = __decorate([
+    customElement({
+        tag: "ui5-navigation-menu",
+        renderer: jsxRenderer,
+        styles: [menuCss, navigationMenuCss],
+        template: NavigationMenuTemplate,
+    })
+], NavigationMenu);
+NavigationMenu.define();
+export default NavigationMenu;
+//# sourceMappingURL=NavigationMenu.js.map

package/dist/NavigationMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.js","sourceRoot":"","sources":["../src/NavigationMenu.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EACN,SAAS,GACT,MAAM,wCAAwC,CAAC;AAChD,OAAO,IAAI,MAAM,iCAAiC,CAAC;AAGnD,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AAEjE,SAAS;AACT,OAAO,iBAAiB,MAAM,0CAA0C,CAAC;AACzE,OAAO,OAAO,MAAM,sDAAsD,CAAC;AAE3E,OAAO,EACN,mCAAmC,GACnC,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;GAmBG;AAQH,IAAM,cAAc,sBAApB,MAAM,cAAe,SAAQ,IAAI;IAUhC,cAAc,CAAC,CAAa;QAC3B,IAAI,SAAS,EAAE,EAAE,CAAC;YACjB,oCAAoC;YACpC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAkB,CAAC;YAElC,iCAAiC;YACjC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;IACF,CAAC;IAED,IAAI,kCAAkC;QACrC,OAAO,gBAAc,CAAC,UAAU,CAAC,OAAO,CAAC,mCAAmC,CAAC,CAAC;IAC/E,CAAC;CACD,CAAA;AAfQ;IADP,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,uBAAuB,EAAE,IAAI,EAAE,CAAC;6CACnC;AARpC,cAAc;IAPnB,aAAa,CAAC;QACd,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,OAAO,EAAE,iBAAiB,CAAC;QACpC,QAAQ,EAAE,sBAAsB;KAChC,CAAC;GAEI,cAAc,CAuBnB;AAED,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport {\n\tisDesktop,\n} from \"@ui5/webcomponents-base/dist/Device.js\";\nimport Menu from \"@ui5/webcomponents/dist/Menu.js\";\nimport type MenuItem from \"@ui5/webcomponents/dist/MenuItem.js\";\nimport type NavigationMenuItem from \"./NavigationMenuItem.js\";\nimport NavigationMenuTemplate from \"./NavigationMenuTemplate.js\";\n\n// Styles\nimport navigationMenuCss from \"./generated/themes/NavigationMenu.css.js\";\nimport menuCss from \"@ui5/webcomponents/dist/generated/themes/Menu.css.js\";\n\nimport {\n\tNAVIGATION_MENU_POPOVER_HIDDEN_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-navigation-menu` component represents a hierarchical menu structure, inherits all the functionality of `ui5-menu`.\n *\n * ### Usage\n *\n * `ui5-navigation-menu` contains `ui5-navigation-menu-item` components.\n * An arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/NavigationMenu.js\";`\n * @constructor\n * @extends Menu\n * @since 1.22.0\n * @private\n */\n@customElement({\n\ttag: \"ui5-navigation-menu\",\n\trenderer: jsxRenderer,\n\tstyles: [menuCss, navigationMenuCss],\n\ttemplate: NavigationMenuTemplate,\n})\n\nclass NavigationMenu extends Menu {\n\t/**\n\t * Defines the items of this component.\n\t *\n\t * **Note:** Use `ui5-navigation-menu-item` for the intended design.\n\t * @public\n\t */\n\t@slot({ \"default\": true, type: HTMLElement, invalidateOnChildChange: true })\n\tdeclare items: Array<NavigationMenuItem>;\n\n\t_itemMouseOver(e: MouseEvent) {\n\t\tif (isDesktop()) {\n\t\t\t// respect mouseover only on desktop\n\t\t\tconst item = e.target as MenuItem;\n\n\t\t\t// Opens submenu with 300ms delay\n\t\t\tthis._startOpenTimeout(item);\n\t\t}\n\t}\n\n\tget accSideNavigationPopoverHiddenText() {\n\t\treturn NavigationMenu.i18nBundle.getText(NAVIGATION_MENU_POPOVER_HIDDEN_TEXT);\n\t}\n}\n\nNavigationMenu.define();\n\nexport default NavigationMenu;\n"]}

package/dist/NavigationMenuItem.d.ts

@@ -0,0 +1,85 @@
+import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
+import MenuItem from "@ui5/webcomponents/dist/MenuItem.js";
+import type SideNavigationItemDesign from "./types/SideNavigationItemDesign.js";
+import type SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * `ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.
+ * An arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.
+ *
+ * ### Usage
+ *
+ * `ui5-navigation-menu-item` represents a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,
+ * and each `ui5-navigation-menu-item` is represented by a list item in that list. Therefore, you should only use
+ * `ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NavigationMenuItem.js";`
+ * @constructor
+ * @extends MenuItem
+ * @since 1.22.0
+ * @private
+ */
+declare class NavigationMenuItem extends MenuItem {
+    /**
+     * Defines the link target URI. Supports standard hyperlink behavior.
+     * If a JavaScript action should be triggered,
+     * this should not be set, but instead an event handler
+     * for the `click` event should be registered.
+     * @public
+     * @default undefined
+     * @since 1.22.0
+     */
+    href?: string;
+    /**
+     * Defines the component target.
+     *
+     * **Notes:**
+     *
+     * - `_self`
+     * - `_top`
+     * - `_blank`
+     * - `_parent`
+     * - `_search`
+     *
+     * **This property must only be used when the `href` property is set.**
+     * @public
+     * @default undefined
+     * @since 1.22.0
+     */
+    target?: string;
+    design: `${SideNavigationItemDesign}`;
+    associatedItem?: SideNavigationSelectableItemBase;
+    get isExternalLink(): boolean | "" | undefined;
+    get _href(): string | undefined;
+    get _accInfo(): {
+        role: import("@ui5/webcomponents-base/dist/types.js").AriaRole;
+        ariaHaspopup?: `${import("@ui5/webcomponents-base/dist/types.js").AriaHasPopup}`;
+        ariaKeyShortcuts?: string;
+        ariaHidden?: boolean;
+        ariaExpanded?: boolean;
+        ariaLevel?: number;
+        ariaLabel: string;
+        ariaLabelRadioButton: string;
+        ariaSelectedText?: string;
+        posinset?: number;
+        setsize?: number;
+        ariaSelected?: boolean;
+        ariaChecked?: boolean;
+        listItemAriaLabel?: string;
+        ariaOwns?: string;
+        tooltip?: string;
+    };
+    get classes(): ClassMap;
+    _onclick(e: MouseEvent): void;
+    _activate(e: MouseEvent | KeyboardEvent): void;
+    _handleFocus(associatedItem: SideNavigationSelectableItemBase): void;
+    _onkeydown(e: KeyboardEvent): Promise<void>;
+    _onkeyup(e: KeyboardEvent): void;
+    get acessibleNameText(): string;
+}
+export default NavigationMenuItem;

package/dist/NavigationMenuItem.js

@@ -0,0 +1,164 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import MenuItem from "@ui5/webcomponents/dist/MenuItem.js";
+import NavigationMenu from "./NavigationMenu.js";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+// Templates
+import NavigationMenuItemTemplate from "./NavigationMenuItemTemplate.js";
+// Styles
+import navigationMenuItemCss from "./generated/themes/NavigationMenuItem.css.js";
+import { NAVIGATION_MENU_POPOVER_HIDDEN_TEXT, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * `ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.
+ * An arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.
+ *
+ * ### Usage
+ *
+ * `ui5-navigation-menu-item` represents a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,
+ * and each `ui5-navigation-menu-item` is represented by a list item in that list. Therefore, you should only use
+ * `ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/NavigationMenuItem.js";`
+ * @constructor
+ * @extends MenuItem
+ * @since 1.22.0
+ * @private
+ */
+let NavigationMenuItem = class NavigationMenuItem extends MenuItem {
+    constructor() {
+        super(...arguments);
+        this.design = "Default";
+    }
+    get isExternalLink() {
+        return this.href && this.target === "_blank";
+    }
+    get _href() {
+        return (!this.disabled && this.href) ? this.href : undefined;
+    }
+    get _accInfo() {
+        const accInfo = super._accInfo;
+        accInfo.role = this.href ? "none" : "treeitem";
+        if (!accInfo.ariaHaspopup) {
+            accInfo.ariaHaspopup = this.accessibilityAttributes.hasPopup;
+        }
+        return accInfo;
+    }
+    get classes() {
+        const result = super.classes;
+        result.main["ui5-navigation-menu-item-root"] = true;
+        return result;
+    }
+    _onclick(e) {
+        this._activate(e);
+    }
+    _activate(e) {
+        e.stopPropagation();
+        const item = this.associatedItem;
+        if (this.disabled || !item) {
+            return;
+        }
+        const sideNav = item.sideNavigation;
+        const overflowMenu = sideNav?.getOverflowPopover();
+        const isSelectable = item.isSelectable;
+        const executeEvent = item.fireDecoratorEvent("click", {
+            altKey: e.altKey,
+            ctrlKey: e.ctrlKey,
+            metaKey: e.metaKey,
+            shiftKey: e.shiftKey,
+        });
+        if (!executeEvent) {
+            e.preventDefault();
+            if (this.hasSubmenu) {
+                overflowMenu?._openItemSubMenu(this);
+            }
+            else {
+                sideNav?.closeMenu();
+            }
+            return;
+        }
+        const shouldSelect = !this.hasSubmenu && isSelectable;
+        if (this.hasSubmenu) {
+            overflowMenu?._openItemSubMenu(this);
+        }
+        if (shouldSelect) {
+            sideNav?._selectItem(item);
+        }
+        if (!this.hasSubmenu) {
+            sideNav?.closeMenu();
+            this._handleFocus(item);
+        }
+    }
+    _handleFocus(associatedItem) {
+        const sideNavigation = associatedItem.sideNavigation;
+        if (associatedItem.nodeName.toLowerCase() === "ui5-side-navigation-sub-item") {
+            const parent = associatedItem.parentElement;
+            sideNavigation?.focusItem(parent);
+            parent?.focus();
+        }
+        else {
+            sideNavigation?.focusItem(associatedItem);
+            associatedItem?.focus();
+        }
+    }
+    async _onkeydown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this._activate(e);
+        }
+        return Promise.resolve();
+    }
+    _onkeyup(e) {
+        if (isSpace(e)) {
+            this._activate(e);
+            if (this.href && !e.defaultPrevented) {
+                const customEvent = new MouseEvent("click");
+                customEvent.stopImmediatePropagation();
+                if (this.getDomRef().querySelector("a")) {
+                    this.getDomRef().querySelector("a").dispatchEvent(customEvent);
+                }
+                else {
+                    // when Side Navigation is collapsed and it is first level item we have directly <a> element
+                    this.getDomRef().dispatchEvent(customEvent);
+                }
+            }
+        }
+    }
+    get acessibleNameText() {
+        return NavigationMenu.i18nBundle.getText(NAVIGATION_MENU_POPOVER_HIDDEN_TEXT);
+    }
+};
+__decorate([
+    property()
+], NavigationMenuItem.prototype, "href", void 0);
+__decorate([
+    property()
+], NavigationMenuItem.prototype, "target", void 0);
+__decorate([
+    property()
+], NavigationMenuItem.prototype, "design", void 0);
+NavigationMenuItem = __decorate([
+    customElement({
+        renderer: jsxRenderer,
+        tag: "ui5-navigation-menu-item",
+        template: NavigationMenuItemTemplate,
+        styles: [MenuItem.styles, navigationMenuItemCss],
+    })
+], NavigationMenuItem);
+NavigationMenuItem.define();
+export default NavigationMenuItem;
+//# sourceMappingURL=NavigationMenuItem.js.map

package/dist/NavigationMenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenuItem.js","sourceRoot":"","sources":["../src/NavigationMenuItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAE3D,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAGxE,YAAY;AACZ,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AAEzE,SAAS;AACT,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AAEjF,OAAO,EACN,mCAAmC,GACnC,MAAM,mCAAmC,CAAC;AAG3C;;;;;;;;;;;;;;;;;;;;;GAqBG;AAOH,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,QAAQ;IAAzC;;QAiCC,WAAM,GAAkC,SAAS,CAAC;IAkInD,CAAC;IA9HA,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;IAC9C,CAAC;IAED,IAAI,KAAK;QACR,OAAO,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9D,CAAC;IAED,IAAI,QAAQ;QACX,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC;QAE/B,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC;QAE/C,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE,CAAC;YAC3B,OAAO,CAAC,YAAY,GAAG,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC;QAC9D,CAAC;QAED,OAAO,OAAO,CAAC;IAChB,CAAC;IAED,IAAI,OAAO;QACV,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;QAE7B,MAAM,CAAC,IAAI,CAAC,+BAA+B,CAAC,GAAG,IAAI,CAAC;QAEpD,OAAO,MAAM,CAAC;IACf,CAAC;IAED,QAAQ,CAAC,CAAa;QACrB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC;IAED,SAAS,CAAC,CAA6B;QACtC,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC;QAEjC,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAC5B,OAAO;QACR,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;QACpC,MAAM,YAAY,GAAG,OAAO,EAAE,kBAAkB,EAAE,CAAC;QACnD,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QAEvC,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACrD,MAAM,EAAE,CAAC,CAAC,MAAM;YAChB,OAAO,EAAE,CAAC,CAAC,OAAO;YAClB,OAAO,EAAE,CAAC,CAAC,OAAO;YAClB,QAAQ,EAAE,CAAC,CAAC,QAAQ;SACpB,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,EAAE,CAAC;YACnB,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACrB,YAAY,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACtC,CAAC;iBAAM,CAAC;gBACP,OAAO,EAAE,SAAS,EAAE,CAAC;YACtB,CAAC;YAED,OAAO;QACR,CAAC;QAED,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,UAAU,IAAI,YAAY,CAAC;QAEtD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,YAAY,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,YAAY,EAAE,CAAC;YAClB,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACtB,OAAO,EAAE,SAAS,EAAE,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACzB,CAAC;IACF,CAAC;IAED,YAAY,CAAC,cAAgD;QAC5D,MAAM,cAAc,GAAG,cAAc,CAAC,cAAc,CAAC;QAErD,IAAI,cAAc,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,8BAA8B,EAAE,CAAC;YAC9E,MAAM,MAAM,GAAG,cAAc,CAAC,aAAmC,CAAC;YAClE,cAAc,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;YAClC,MAAM,EAAE,KAAK,EAAE,CAAC;QACjB,CAAC;aAAM,CAAC;YACP,cAAc,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;YAC1C,cAAc,EAAE,KAAK,EAAE,CAAC;QACzB,CAAC;IACF,CAAC;IAED,KAAK,CAAC,UAAU,CAAC,CAAgB;QAChC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,CAAC,CAAC,cAAc,EAAE,CAAC;QACpB,CAAC;QAED,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;QAED,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;IAC1B,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YAElB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;gBACtC,MAAM,WAAW,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;gBAE5C,WAAW,CAAC,wBAAwB,EAAE,CAAC;gBACvC,IAAI,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC;oBAC1C,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAC,GAAG,CAAE,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;gBAClE,CAAC;qBAAM,CAAC;oBACP,4FAA4F;oBAC5F,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;gBAC9C,CAAC;YACF,CAAC;QACF,CAAC;IACF,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,mCAAmC,CAAC,CAAC;IAC/E,CAAC;CACD,CAAA;AAxJA;IADC,QAAQ,EAAE;gDACG;AAmBd;IADC,QAAQ,EAAE;kDACK;AAGhB;IADC,QAAQ,EAAE;kDACuC;AAjC7C,kBAAkB;IANvB,aAAa,CAAC;QACd,QAAQ,EAAE,WAAW;QACrB,GAAG,EAAE,0BAA0B;QAC/B,QAAQ,EAAE,0BAA0B;QACpC,MAAM,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,qBAAqB,CAAC;KAChD,CAAC;GACI,kBAAkB,CAmKvB;AAED,kBAAkB,CAAC,MAAM,EAAE,CAAC;AAE5B,eAAe,kBAAkB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { ClassMap } from \"@ui5/webcomponents-base/dist/types.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport MenuItem from \"@ui5/webcomponents/dist/MenuItem.js\";\nimport type SideNavigationItemDesign from \"./types/SideNavigationItemDesign.js\";\nimport NavigationMenu from \"./NavigationMenu.js\";\nimport { isSpace, isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type SideNavigationSelectableItemBase from \"./SideNavigationSelectableItemBase.js\";\n\n// Templates\nimport NavigationMenuItemTemplate from \"./NavigationMenuItemTemplate.js\";\n\n// Styles\nimport navigationMenuItemCss from \"./generated/themes/NavigationMenuItem.css.js\";\n\nimport {\n\tNAVIGATION_MENU_POPOVER_HIDDEN_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport type SideNavigationItem from \"./SideNavigationItem.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * `ui5-navigation-menu-item` is the item to use inside a `ui5-navigation-menu`.\n * An arbitrary hierarchy structure can be represented by recursively nesting navigation menu items.\n *\n * ### Usage\n *\n * `ui5-navigation-menu-item` represents a node in a `ui5-navigation-menu`. The navigation menu itself is rendered as a list,\n * and each `ui5-navigation-menu-item` is represented by a list item in that list. Therefore, you should only use\n * `ui5-navigation-menu-item` directly in your apps. The `ui5-li` list item is internal for the list, and not intended for public use.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/NavigationMenuItem.js\";`\n * @constructor\n * @extends MenuItem\n * @since 1.22.0\n * @private\n */\n@customElement({\n\trenderer: jsxRenderer,\n\ttag: \"ui5-navigation-menu-item\",\n\ttemplate: NavigationMenuItemTemplate,\n\tstyles: [MenuItem.styles, navigationMenuItemCss],\n})\nclass NavigationMenuItem extends MenuItem {\n\t/**\n\t * Defines the link target URI. Supports standard hyperlink behavior.\n\t * If a JavaScript action should be triggered,\n\t * this should not be set, but instead an event handler\n\t * for the `click` event should be registered.\n\t * @public\n\t * @default undefined\n\t * @since 1.22.0\n\t */\n\t@property()\n\thref?: string;\n\n\t/**\n\t * Defines the component target.\n\t *\n\t * **Notes:**\n\t *\n\t * - `_self`\n\t * - `_top`\n\t * - `_blank`\n\t * - `_parent`\n\t * - `_search`\n\t *\n\t * **This property must only be used when the `href` property is set.**\n\t * @public\n\t * @default undefined\n\t * @since 1.22.0\n\t */\n\t@property()\n\ttarget?: string;\n\n\t@property()\n\tdesign: `${SideNavigationItemDesign}` = \"Default\";\n\n\tassociatedItem?: SideNavigationSelectableItemBase;\n\n\tget isExternalLink() {\n\t\treturn this.href && this.target === \"_blank\";\n\t}\n\n\tget _href() {\n\t\treturn (!this.disabled && this.href) ? this.href : undefined;\n\t}\n\n\tget _accInfo() {\n\t\tconst accInfo = super._accInfo;\n\n\t\taccInfo.role = this.href ? \"none\" : \"treeitem\";\n\n\t\tif (!accInfo.ariaHaspopup) {\n\t\t\taccInfo.ariaHaspopup = this.accessibilityAttributes.hasPopup;\n\t\t}\n\n\t\treturn accInfo;\n\t}\n\n\tget classes(): ClassMap {\n\t\tconst result = super.classes;\n\n\t\tresult.main[\"ui5-navigation-menu-item-root\"] = true;\n\n\t\treturn result;\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tthis._activate(e);\n\t}\n\n\t_activate(e: MouseEvent | KeyboardEvent) {\n\t\te.stopPropagation();\n\n\t\tconst item = this.associatedItem;\n\n\t\tif (this.disabled || !item) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst sideNav = item.sideNavigation;\n\t\tconst overflowMenu = sideNav?.getOverflowPopover();\n\t\tconst isSelectable = item.isSelectable;\n\n\t\tconst executeEvent = item.fireDecoratorEvent(\"click\", {\n\t\t\taltKey: e.altKey,\n\t\t\tctrlKey: e.ctrlKey,\n\t\t\tmetaKey: e.metaKey,\n\t\t\tshiftKey: e.shiftKey,\n\t\t});\n\n\t\tif (!executeEvent) {\n\t\t\te.preventDefault();\n\n\t\t\tif (this.hasSubmenu) {\n\t\t\t\toverflowMenu?._openItemSubMenu(this);\n\t\t\t} else {\n\t\t\t\tsideNav?.closeMenu();\n\t\t\t}\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst shouldSelect = !this.hasSubmenu && isSelectable;\n\n\t\tif (this.hasSubmenu) {\n\t\t\toverflowMenu?._openItemSubMenu(this);\n\t\t}\n\n\t\tif (shouldSelect) {\n\t\t\tsideNav?._selectItem(item);\n\t\t}\n\n\t\tif (!this.hasSubmenu) {\n\t\t\tsideNav?.closeMenu();\n\t\t\tthis._handleFocus(item);\n\t\t}\n\t}\n\n\t_handleFocus(associatedItem: SideNavigationSelectableItemBase) {\n\t\tconst sideNavigation = associatedItem.sideNavigation;\n\n\t\tif (associatedItem.nodeName.toLowerCase() === \"ui5-side-navigation-sub-item\") {\n\t\t\tconst parent = associatedItem.parentElement as SideNavigationItem;\n\t\t\tsideNavigation?.focusItem(parent);\n\t\t\tparent?.focus();\n\t\t} else {\n\t\t\tsideNavigation?.focusItem(associatedItem);\n\t\t\tassociatedItem?.focus();\n\t\t}\n\t}\n\n\tasync _onkeydown(e: KeyboardEvent): Promise<void> {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._activate(e);\n\t\t}\n\n\t\treturn Promise.resolve();\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._activate(e);\n\n\t\t\tif (this.href && !e.defaultPrevented) {\n\t\t\t\tconst customEvent = new MouseEvent(\"click\");\n\n\t\t\t\tcustomEvent.stopImmediatePropagation();\n\t\t\t\tif (this.getDomRef()!.querySelector(\"a\")) {\n\t\t\t\t\tthis.getDomRef()!.querySelector(\"a\")!.dispatchEvent(customEvent);\n\t\t\t\t} else {\n\t\t\t\t\t// when Side Navigation is collapsed and it is first level item we have directly <a> element\n\t\t\t\t\tthis.getDomRef()!.dispatchEvent(customEvent);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tget acessibleNameText() {\n\t\treturn NavigationMenu.i18nBundle.getText(NAVIGATION_MENU_POPOVER_HIDDEN_TEXT);\n\t}\n}\n\nNavigationMenuItem.define();\n\nexport default NavigationMenuItem;\n"]}

package/dist/NavigationMenuItemTemplate.d.ts

@@ -0,0 +1,3 @@
+import type NavigationMenuItem from "./NavigationMenuItem.js";
+import type { ListItemHooks } from "@ui5/webcomponents/dist/ListItemTemplate.js";
+export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hooks?: Partial<ListItemHooks>): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/NavigationMenuItemTemplate.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import MenuItemTemplate from "@ui5/webcomponents/dist/MenuItemTemplate.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import arrowRightIcon from "@ui5/webcomponents-icons/dist/arrow-right.js";
+const predefinedHooks = {
+    listItemContent,
+    iconBegin,
+    iconEnd,
+};
+export default function NavigationMenuItemTemplate(hooks) {
+    const currentHooks = { ...predefinedHooks, ...hooks, };
+    return _jsx(_Fragment, { children: this._href ? (_jsx("a", { role: "treeitem", class: "ui5-navmenu-item-link", href: this.href, target: this.target, children: MenuItemTemplate.call(this, currentHooks) })) : MenuItemTemplate.call(this, currentHooks) });
+}
+function listItemContent() {
+    return _jsx(_Fragment, { children: this.text });
+}
+function iconBegin() {
+    if (this.hasIcon) {
+        return _jsx(Icon, { part: "icon", class: "ui5-li-icon", name: this.icon });
+    }
+    if (this._siblingsWithIcon) {
+        return _jsx("div", { class: "ui5-menu-item-dummy-icon" });
+    }
+}
+function iconEnd() {
+    if (this.hasSubmenu) {
+        return _jsx(Icon, { part: "icon", name: slimArrowRightIcon, class: "ui5-menu-item-icon-end" });
+    }
+    if (this.isExternalLink) {
+        return _jsx(Icon, { class: "ui5-sn-item-external-link-icon", name: arrowRightIcon });
+    }
+}
+//# sourceMappingURL=NavigationMenuItemTemplate.js.map