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

package/dist/SideNavigationPopoverTemplate.d.ts

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

package/dist/SideNavigationPopoverTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import NavigationMenu from "./NavigationMenu.js";
+import NavigationMenuItem from "./NavigationMenuItem.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import SideNavigation from "./SideNavigation.js";
+import SideNavigationItem from "./SideNavigationItem.js";
+import SideNavigationSubItem from "./SideNavigationSubItem.js";
+export default function SideNavigationTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsx(NavigationMenu, { id: `${this._id}-side-navigation-overflow-menu`, onBeforeOpen: this._onBeforeMenuOpen, onBeforeClose: this._onBeforeMenuClose, class: "ui5-side-navigation-popover ui5-side-navigation-overflow-menu", children: this._menuPopoverItems.map(item => _jsx(NavigationMenuItem, { accessibilityAttributes: item.accessibilityAttributes, text: item.text, icon: item.icon, design: item.design, disabled: item.disabled, href: item.href, target: item.target, title: item.title, tooltip: item._tooltip, ref: this.captureRef.bind(item), children: item.items.map(subItem => _jsx(NavigationMenuItem, { accessibilityAttributes: subItem.accessibilityAttributes, text: subItem.text, icon: subItem.icon, design: subItem.design, disabled: subItem.disabled, ref: this.captureRef.bind(subItem), href: subItem.href, target: subItem.target, title: subItem.title, tooltip: subItem._tooltip })) })) }), _jsx(ResponsivePopover, { verticalAlign: "Top", class: "ui5-side-navigation-popover", accessibleNameRef: `${this._id}-sideNavigationPopoverText`, onOpen: this._onAfterPopoverOpen, onBeforeOpen: this._onBeforePopoverOpen, onBeforeClose: this._onBeforePopoverClose, children: this._popoverContents && _jsxs(_Fragment, { children: [_jsx("span", { id: `${this._id}-sideNavigationPopoverText`, class: "ui5-hidden-text", children: this.accSideNavigationPopoverHiddenText }), _jsx(SideNavigation, { inPopover: true, class: "ui5-side-navigation-in-popover", children: _jsx(SideNavigationItem, { accessibilityAttributes: this._popoverContents.item.accessibilityAttributes, text: this._popoverContents.item.text, tooltip: this._popoverContents.item._tooltip, href: this._popoverContents.item._href, target: this._popoverContents.item._target, design: this._popoverContents.item.design, disabled: this._popoverContents.item.disabled, expanded: true, _fixed: true, selected: this._popoverContents.item.selected, unselectable: this._popoverContents.item.unselectable, "onui5-click": this.handlePopupItemClick, ref: this.captureRef.bind(this._popoverContents.item), children: this._popoverContents.subItems.map(item => _jsx(SideNavigationSubItem, { accessibilityAttributes: item.accessibilityAttributes, text: item.text, tooltip: item._tooltip, href: item._href, target: item._target, design: item.design, disabled: item.disabled, selected: item.selected, unselectable: item.unselectable, "onui5-click": this.handlePopupItemClick, ref: this.captureRef.bind(item) })) }) })] }) })] }));
+}
+//# sourceMappingURL=SideNavigationPopoverTemplate.js.map

package/dist/SideNavigationPopoverTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationPopoverTemplate.js","sourceRoot":"","sources":["../src/SideNavigationPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,iBAAiB,MAAM,8CAA8C,CAAC;AAC7E,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAE/D,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC7C,OAAO,CAAC,8BACP,KAAC,cAAc,IACd,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,gCAAgC,EAC/C,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,aAAa,EAAE,IAAI,CAAC,kBAAkB,EACtC,KAAK,EAAC,+DAA+D,YAEpE,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAClC,KAAC,kBAAkB,IAClB,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAE9B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CACzB,KAAC,kBAAkB,IAClB,uBAAuB,EAAE,OAAO,CAAC,uBAAuB,EACxD,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,EAClC,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,OAAO,EAAE,OAAO,CAAC,QAAQ,GACxB,CACF,GACmB,CACrB,GACe,EACjB,KAAC,iBAAiB,IACjB,aAAa,EAAC,KAAK,EACnB,KAAK,EAAC,6BAA6B,EACnC,iBAAiB,EAAE,GAAG,IAAI,CAAC,GAAG,4BAA4B,EAC1D,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAChC,YAAY,EAAE,IAAI,CAAC,oBAAoB,EACvC,aAAa,EAAE,IAAI,CAAC,qBAAqB,YAExC,IAAI,CAAC,gBAAgB,IAAI,8BACzB,eAAM,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,4BAA4B,EAChD,KAAK,EAAC,iBAAiB,YACtB,IAAI,CAAC,kCAAkC,GAAQ,EACjD,KAAC,cAAc,IACd,SAAS,EAAE,IAAI,EACf,KAAK,EAAC,gCAAgC,YAEtC,KAAC,kBAAkB,IAClB,uBAAuB,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,uBAAuB,EAC3E,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,EACrC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAC5C,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,EACtC,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAC1C,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,EACzC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAC7C,QAAQ,EAAE,IAAI,EACd,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAC7C,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,iBACxC,IAAI,CAAC,oBAAoB,EACtC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAEpD,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC1C,KAAC,qBAAqB,IACrB,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,EACrD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,iBAClB,IAAI,CAAC,oBAAoB,EACtC,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,GAC9B,CACF,GACmB,GACL,IACf,GACgB,IAClB,CAAC,CAAC;AACN,CAAC","sourcesContent":["import NavigationMenu from \"./NavigationMenu.js\";\nimport NavigationMenuItem from \"./NavigationMenuItem.js\";\nimport ResponsivePopover from \"@ui5/webcomponents/dist/ResponsivePopover.js\";\nimport SideNavigation from \"./SideNavigation.js\";\nimport SideNavigationItem from \"./SideNavigationItem.js\";\nimport SideNavigationSubItem from \"./SideNavigationSubItem.js\";\n\nexport default function SideNavigationTemplate(this: SideNavigation) {\n\treturn (<>\n\t\t<NavigationMenu\n\t\t\tid={`${this._id}-side-navigation-overflow-menu`}\n\t\t\tonBeforeOpen={this._onBeforeMenuOpen}\n\t\t\tonBeforeClose={this._onBeforeMenuClose}\n\t\t\tclass=\"ui5-side-navigation-popover ui5-side-navigation-overflow-menu\"\n\t\t>\n\t\t\t{this._menuPopoverItems.map(item =>\n\t\t\t\t<NavigationMenuItem\n\t\t\t\t\taccessibilityAttributes={item.accessibilityAttributes}\n\t\t\t\t\ttext={item.text}\n\t\t\t\t\ticon={item.icon}\n\t\t\t\t\tdesign={item.design}\n\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\thref={item.href}\n\t\t\t\t\ttarget={item.target}\n\t\t\t\t\ttitle={item.title}\n\t\t\t\t\ttooltip={item._tooltip}\n\t\t\t\t\tref={this.captureRef.bind(item)}\n\t\t\t\t>\n\t\t\t\t\t{item.items.map(subItem =>\n\t\t\t\t\t\t<NavigationMenuItem\n\t\t\t\t\t\t\taccessibilityAttributes={subItem.accessibilityAttributes}\n\t\t\t\t\t\t\ttext={subItem.text}\n\t\t\t\t\t\t\ticon={subItem.icon}\n\t\t\t\t\t\t\tdesign={subItem.design}\n\t\t\t\t\t\t\tdisabled={subItem.disabled}\n\t\t\t\t\t\t\tref={this.captureRef.bind(subItem)}\n\t\t\t\t\t\t\thref={subItem.href}\n\t\t\t\t\t\t\ttarget={subItem.target}\n\t\t\t\t\t\t\ttitle={subItem.title}\n\t\t\t\t\t\t\ttooltip={subItem._tooltip}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</NavigationMenuItem>\n\t\t\t)}\n\t\t</NavigationMenu>\n\t\t<ResponsivePopover\n\t\t\tverticalAlign=\"Top\"\n\t\t\tclass=\"ui5-side-navigation-popover\"\n\t\t\taccessibleNameRef={`${this._id}-sideNavigationPopoverText`}\n\t\t\tonOpen={this._onAfterPopoverOpen}\n\t\t\tonBeforeOpen={this._onBeforePopoverOpen}\n\t\t\tonBeforeClose={this._onBeforePopoverClose}\n\t\t>\n\t\t\t{this._popoverContents && <>\n\t\t\t\t<span id={`${this._id}-sideNavigationPopoverText`}\n\t\t\t\t\tclass=\"ui5-hidden-text\"\n\t\t\t\t>{this.accSideNavigationPopoverHiddenText}</span>\n\t\t\t\t<SideNavigation\n\t\t\t\t\tinPopover={true}\n\t\t\t\t\tclass=\"ui5-side-navigation-in-popover\"\n\t\t\t\t>\n\t\t\t\t\t<SideNavigationItem\n\t\t\t\t\t\taccessibilityAttributes={this._popoverContents.item.accessibilityAttributes}\n\t\t\t\t\t\ttext={this._popoverContents.item.text}\n\t\t\t\t\t\ttooltip={this._popoverContents.item._tooltip}\n\t\t\t\t\t\thref={this._popoverContents.item._href}\n\t\t\t\t\t\ttarget={this._popoverContents.item._target}\n\t\t\t\t\t\tdesign={this._popoverContents.item.design}\n\t\t\t\t\t\tdisabled={this._popoverContents.item.disabled}\n\t\t\t\t\t\texpanded={true}\n\t\t\t\t\t\t_fixed={true}\n\t\t\t\t\t\tselected={this._popoverContents.item.selected}\n\t\t\t\t\t\tunselectable={this._popoverContents.item.unselectable}\n\t\t\t\t\t\tonui5-click={this.handlePopupItemClick}\n\t\t\t\t\t\tref={this.captureRef.bind(this._popoverContents.item)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._popoverContents.subItems.map(item =>\n\t\t\t\t\t\t\t<SideNavigationSubItem\n\t\t\t\t\t\t\t\taccessibilityAttributes={item.accessibilityAttributes}\n\t\t\t\t\t\t\t\ttext={item.text}\n\t\t\t\t\t\t\t\ttooltip={item._tooltip}\n\t\t\t\t\t\t\t\thref={item._href}\n\t\t\t\t\t\t\t\ttarget={item._target}\n\t\t\t\t\t\t\t\tdesign={item.design}\n\t\t\t\t\t\t\t\tdisabled={item.disabled}\n\t\t\t\t\t\t\t\tselected={item.selected}\n\t\t\t\t\t\t\t\tunselectable={item.unselectable}\n\t\t\t\t\t\t\t\tonui5-click={this.handlePopupItemClick}\n\t\t\t\t\t\t\t\tref={this.captureRef.bind(item)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SideNavigationItem>\n\t\t\t\t</SideNavigation>\n\t\t\t</>}\n\t\t</ResponsivePopover>\n\t</>);\n}\n"]}

package/dist/SideNavigationSelectableItemBase.d.ts

@@ -0,0 +1,135 @@
+import SideNavigationItemBase from "./SideNavigationItemBase.js";
+import type SideNavigationItemDesign from "./types/SideNavigationItemDesign.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
+import type { SideNavigationItemClickEventDetail } from "./SideNavigationItemBase.js";
+type SideNavigationItemAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup">;
+/**
+ * Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.
+ *
+ * @public
+ * @param {boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+ * @param {boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+ * @param {boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+ * @param {boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
+ */
+declare class SideNavigationSelectableItemBase extends SideNavigationItemBase {
+    eventDetails: SideNavigationItemBase["eventDetails"] & {
+        "click": SideNavigationItemClickEventDetail;
+    };
+    /**
+     * Defines the icon of the item.
+     *
+     * The SAP-icons font provides numerous options.
+     *
+     * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+     * @public
+     * @default undefined
+     */
+    icon?: string;
+    /**
+     * Defines whether the item is selected
+     *
+     * @public
+     * @default false
+     */
+    selected: boolean;
+    /**
+     * 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.19.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.19.0
+     */
+    target?: string;
+    /**
+     * Item design.
+     *
+     * **Note:** Items with "Action" design must not have sub-items.
+     *
+     * @public
+     * @default "Default"
+     * @since 2.7.0
+     */
+    design: `${SideNavigationItemDesign}`;
+    /**
+     * Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.
+     *
+     * When a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.
+     * To improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.
+     *
+     *
+     * **Guidelines**:
+     * - External links should be unselectable.
+     * - Items that trigger actions (with design "Action") should be unselectable.
+     *
+     * @public
+     * @default false
+     * @since 2.7.0
+     */
+    unselectable: boolean;
+    /**
+     * Defines the additional accessibility attributes that will be applied to the component.
+     * The following fields are supported:
+     *
+     * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+     * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+     *
+     * **Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.
+     *
+     * @public
+     * @default {}
+     * @since 2.7.0
+     */
+    accessibilityAttributes: SideNavigationItemAccessibilityAttributes;
+    /**
+     * @private
+     * @default false
+     */
+    isOverflow: boolean;
+    /**
+     * Reference to the original side navigation item that opened the popover.
+     *
+     * @private
+     */
+    associatedItem?: SideNavigationItemBase;
+    get ariaRole(): "menuitem" | "menuitemradio" | "treeitem";
+    get isSelectable(): boolean;
+    get _href(): string | undefined;
+    get _target(): string | undefined;
+    get isExternalLink(): boolean | "" | undefined;
+    get _selected(): boolean;
+    get classesArray(): string[];
+    get _classes(): string;
+    get _ariaCurrent(): "page" | undefined;
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    _onclick(e: MouseEvent): void;
+    _onfocusin(e: FocusEvent): void;
+    _activate(e: KeyboardEvent | MouseEvent): void;
+    get isSideNavigationSelectableItemBase(): boolean;
+}
+declare const isInstanceOfSideNavigationSelectableItemBase: (object: any) => object is SideNavigationSelectableItemBase;
+export default SideNavigationSelectableItemBase;
+export { isInstanceOfSideNavigationSelectableItemBase, };
+export type { SideNavigationItemAccessibilityAttributes, };

package/dist/SideNavigationSelectableItemBase.js

@@ -0,0 +1,224 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import { isSpace, isEnter, isLeft, isRight, } from "@ui5/webcomponents-base/dist/Keys.js";
+import SideNavigationItemBase from "./SideNavigationItemBase.js";
+/**
+ * Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.
+ *
+ * @public
+ * @param {boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+ * @param {boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+ * @param {boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+ * @param {boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
+ */
+let SideNavigationSelectableItemBase = class SideNavigationSelectableItemBase extends SideNavigationItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines whether the item is selected
+         *
+         * @public
+         * @default false
+         */
+        this.selected = false;
+        /**
+         * Item design.
+         *
+         * **Note:** Items with "Action" design must not have sub-items.
+         *
+         * @public
+         * @default "Default"
+         * @since 2.7.0
+         */
+        this.design = "Default";
+        /**
+         * Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.
+         *
+         * When a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.
+         * To improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.
+         *
+         *
+         * **Guidelines**:
+         * - External links should be unselectable.
+         * - Items that trigger actions (with design "Action") should be unselectable.
+         *
+         * @public
+         * @default false
+         * @since 2.7.0
+         */
+        this.unselectable = false;
+        /**
+         * Defines the additional accessibility attributes that will be applied to the component.
+         * The following fields are supported:
+         *
+         * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+         * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+         *
+         * **Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.
+         *
+         * @public
+         * @default {}
+         * @since 2.7.0
+         */
+        this.accessibilityAttributes = {};
+        /**
+         * @private
+         * @default false
+         */
+        this.isOverflow = false;
+    }
+    get ariaRole() {
+        if (this.sideNavCollapsed) {
+            return this.isOverflow || this.unselectable ? "menuitem" : "menuitemradio";
+        }
+        return "treeitem";
+    }
+    get isSelectable() {
+        return !this.unselectable && !this.disabled;
+    }
+    get _href() {
+        return (!this.disabled && this.href) ? this.href : undefined;
+    }
+    get _target() {
+        return (!this.disabled && this.target) ? this.target : undefined;
+    }
+    get isExternalLink() {
+        return this.href && this.target === "_blank";
+    }
+    get _selected() {
+        return this.selected;
+    }
+    get classesArray() {
+        const classes = [];
+        if (this.disabled) {
+            classes.push("ui5-sn-item-disabled");
+        }
+        if (this._selected) {
+            classes.push("ui5-sn-item-selected");
+        }
+        return classes;
+    }
+    get _classes() {
+        return this.classesArray.join(" ");
+    }
+    get _ariaCurrent() {
+        if (!this.selected) {
+            return undefined;
+        }
+        return "page";
+    }
+    _onkeydown(e) {
+        const isRTL = this.effectiveDir === "rtl";
+        if (isSpace(e) || isRight(e) || isLeft(e)) {
+            e.preventDefault();
+        }
+        if (isEnter(e)) {
+            this._activate(e);
+        }
+        if ((isRTL ? isLeft(e) : isRight(e)) && this.sideNavCollapsed && this.hasSubItems) {
+            this._activate(e);
+        }
+        if ((isRTL ? isRight(e) : isLeft(e)) && this.inPopover) {
+            this.associatedItem?.sideNavigation?.closePicker();
+        }
+    }
+    _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);
+                }
+            }
+        }
+    }
+    _onclick(e) {
+        this._activate(e);
+    }
+    _onfocusin(e) {
+        e.stopPropagation();
+        this.sideNavigation?.focusItem(this);
+    }
+    _activate(e) {
+        const { altKey, ctrlKey, metaKey, shiftKey, } = e;
+        e.stopPropagation();
+        if (this.isOverflow) {
+            const executeEvent = this.fireDecoratorEvent("click", {
+                altKey,
+                ctrlKey,
+                metaKey,
+                shiftKey,
+            });
+            if (!executeEvent) {
+                e.preventDefault();
+            }
+        }
+        else {
+            this.sideNavigation?._handleItemClick(e, this);
+        }
+    }
+    get isSideNavigationSelectableItemBase() {
+        return true;
+    }
+};
+__decorate([
+    property()
+], SideNavigationSelectableItemBase.prototype, "icon", void 0);
+__decorate([
+    property({ type: Boolean })
+], SideNavigationSelectableItemBase.prototype, "selected", void 0);
+__decorate([
+    property()
+], SideNavigationSelectableItemBase.prototype, "href", void 0);
+__decorate([
+    property()
+], SideNavigationSelectableItemBase.prototype, "target", void 0);
+__decorate([
+    property()
+], SideNavigationSelectableItemBase.prototype, "design", void 0);
+__decorate([
+    property({ type: Boolean })
+], SideNavigationSelectableItemBase.prototype, "unselectable", void 0);
+__decorate([
+    property({ type: Object })
+], SideNavigationSelectableItemBase.prototype, "accessibilityAttributes", void 0);
+__decorate([
+    property({ type: Boolean })
+], SideNavigationSelectableItemBase.prototype, "isOverflow", void 0);
+SideNavigationSelectableItemBase = __decorate([
+    event("click", {
+        bubbles: true,
+        cancelable: true,
+    })
+    /**
+     * @class
+     * Base class for the navigation items that support actions.
+     *
+     * @constructor
+     * @extends SideNavigationItemBase
+     * @abstract
+     * @public
+     * @since 1.24.0
+     */
+    ,
+    customElement()
+], SideNavigationSelectableItemBase);
+const isInstanceOfSideNavigationSelectableItemBase = (object) => {
+    return "isSideNavigationSelectableItemBase" in object;
+};
+export default SideNavigationSelectableItemBase;
+export { isInstanceOfSideNavigationSelectableItemBase, };
+//# sourceMappingURL=SideNavigationSelectableItemBase.js.map

package/dist/SideNavigationSelectableItemBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationSelectableItemBase.js","sourceRoot":"","sources":["../src/SideNavigationSelectableItemBase.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport {\n\tisSpace,\n\tisEnter,\n\tisLeft,\n\tisRight,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport SideNavigationItemBase from \"./SideNavigationItemBase.js\";\nimport type SideNavigationItemDesign from \"./types/SideNavigationItemDesign.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type { SideNavigationItemClickEventDetail } from \"./SideNavigationItemBase.js\";\n\ntype SideNavigationItemAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\">;\n\n/**\n * Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.\n *\n * @public\n * @param {boolean} altKey Returns whether the \"ALT\" key was pressed when the event was triggered.\n * @param {boolean} ctrlKey Returns whether the \"CTRL\" key was pressed when the event was triggered.\n * @param {boolean} metaKey Returns whether the \"META\" key was pressed when the event was triggered.\n * @param {boolean} shiftKey Returns whether the \"SHIFT\" key was pressed when the event was triggered.\n */\n@event(\"click\", {\n\tbubbles: true,\n\tcancelable: true,\n})\n\n/**\n * @class\n * Base class for the navigation items that support actions.\n *\n * @constructor\n * @extends SideNavigationItemBase\n * @abstract\n * @public\n * @since 1.24.0\n */\n@customElement()\nclass SideNavigationSelectableItemBase extends SideNavigationItemBase {\n\teventDetails!: SideNavigationItemBase[\"eventDetails\"] & {\n\t\t\"click\": SideNavigationItemClickEventDetail\n\t}\n\n\t/**\n\t * Defines the icon of the item.\n\t *\n\t * The SAP-icons font provides numerous options.\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @public\n\t * @default undefined\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines whether the item is selected\n\t *\n\t * @public\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n\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 *\n\t * @public\n\t * @default undefined\n\t * @since 1.19.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 *\n\t * @public\n\t * @default undefined\n\t * @since 1.19.0\n\t */\n\t@property()\n\ttarget?: string;\n\n\t/**\n\t * Item design.\n\t *\n\t * **Note:** Items with \"Action\" design must not have sub-items.\n\t *\n\t * @public\n\t * @default \"Default\"\n\t * @since 2.7.0\n\t */\n\t@property()\n\tdesign: `${SideNavigationItemDesign}` = \"Default\";\n\n\t/**\n\t * Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.\n\t *\n\t * When a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.\n\t * To improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.\n\t *\n\t *\n\t * **Guidelines**:\n\t * - External links should be unselectable.\n\t * - Items that trigger actions (with design \"Action\") should be unselectable.\n\t *\n\t * @public\n\t * @default false\n\t * @since 2.7.0\n\t */\n\t@property({ type: Boolean })\n\tunselectable = false;\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t * The following fields are supported:\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * **Note:** Do not use it on parent items, as it will be overridden if the item is in the overflow menu.\n\t *\n\t * @public\n\t * @default {}\n\t * @since 2.7.0\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: SideNavigationItemAccessibilityAttributes = {};\n\n\t/**\n\t * @private\n\t * @default false\n\t */\n\t@property({ type: Boolean })\n\tisOverflow = false;\n\n\t/**\n\t * Reference to the original side navigation item that opened the popover.\n\t *\n\t * @private\n\t */\n\tassociatedItem?: SideNavigationItemBase;\n\n\tget ariaRole() {\n\t\tif (this.sideNavCollapsed) {\n\t\t\treturn this.isOverflow || this.unselectable ? \"menuitem\" : \"menuitemradio\";\n\t\t}\n\n\t\treturn \"treeitem\";\n\t}\n\n\tget isSelectable() {\n\t\treturn !this.unselectable && !this.disabled;\n\t}\n\n\tget _href() {\n\t\treturn (!this.disabled && this.href) ? this.href : undefined;\n\t}\n\n\tget _target() {\n\t\treturn (!this.disabled && this.target) ? this.target : undefined;\n\t}\n\n\tget isExternalLink() {\n\t\treturn this.href && this.target === \"_blank\";\n\t}\n\n\tget _selected() {\n\t\treturn this.selected;\n\t}\n\n\tget classesArray() {\n\t\tconst classes = [];\n\n\t\tif (this.disabled) {\n\t\t\tclasses.push(\"ui5-sn-item-disabled\");\n\t\t}\n\n\t\tif (this._selected) {\n\t\t\tclasses.push(\"ui5-sn-item-selected\");\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tget _classes() {\n\t\treturn this.classesArray.join(\" \");\n\t}\n\n\tget _ariaCurrent() {\n\t\tif (!this.selected) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn \"page\";\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tconst isRTL = this.effectiveDir === \"rtl\";\n\n\t\tif (isSpace(e) || isRight(e) || isLeft(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\tif ((isRTL ? isLeft(e) : isRight(e)) && this.sideNavCollapsed && this.hasSubItems) {\n\t\t\tthis._activate(e);\n\t\t}\n\n\t\tif ((isRTL ? isRight(e) : isLeft(e)) && this.inPopover) {\n\t\t\tthis.associatedItem?.sideNavigation?.closePicker();\n\t\t}\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\t_onclick(e: MouseEvent) {\n\t\tthis._activate(e);\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\te.stopPropagation();\n\n\t\tthis.sideNavigation?.focusItem(this);\n\t}\n\n\t_activate(e: KeyboardEvent | MouseEvent) {\n\t\tconst {\n\t\t\taltKey,\n\t\t\tctrlKey,\n\t\t\tmetaKey,\n\t\t\tshiftKey,\n\t\t} = e;\n\n\t\te.stopPropagation();\n\n\t\tif (this.isOverflow) {\n\t\t\tconst executeEvent = this.fireDecoratorEvent(\"click\", {\n\t\t\t\taltKey,\n\t\t\t\tctrlKey,\n\t\t\t\tmetaKey,\n\t\t\t\tshiftKey,\n\t\t\t});\n\n\t\t\tif (!executeEvent) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t} else {\n\t\t\tthis.sideNavigation?._handleItemClick(e, this);\n\t\t}\n\t}\n\n\tget isSideNavigationSelectableItemBase() {\n\t\treturn true;\n\t}\n}\n\nconst isInstanceOfSideNavigationSelectableItemBase = (object: any): object is SideNavigationSelectableItemBase => {\n\treturn \"isSideNavigationSelectableItemBase\" in object;\n};\n\nexport default SideNavigationSelectableItemBase;\nexport {\n\tisInstanceOfSideNavigationSelectableItemBase,\n};\nexport type {\n\tSideNavigationItemAccessibilityAttributes,\n};\n"]}

package/dist/SideNavigationSubItem.d.ts

@@ -0,0 +1,26 @@
+import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
+/**
+ * @class
+ *
+ * ### Overview
+ * Represents a single navigation action within `ui5-side-navigation-item`.
+ * The `ui5-side-navigation-sub-item` is intended to be used inside a `ui5-side-navigation-item` only.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";`
+ *
+ * @constructor
+ * @extends SideNavigationSelectableItemBase
+ * @public
+ * @abstract
+ * @since 1.0.0-rc.8
+ */
+declare class SideNavigationSubItem extends SideNavigationSelectableItemBase {
+    _onkeydown(e: KeyboardEvent): void;
+    _onkeyup(e: KeyboardEvent): void;
+    _onfocusin(e: FocusEvent): void;
+    _onclick(e: MouseEvent): void;
+    get classesArray(): string[];
+}
+export default SideNavigationSubItem;

package/dist/SideNavigationSubItem.js

@@ -1,86 +1,61 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-
-/**
- * @public
- */
-const metadata = {
-	tag: "ui5-side-navigation-sub-item",
-	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
-		/**
-		 * Defines the text of the item.
-		 *
-		 * @public
-		 * @type {string}
-		 * @defaultvalue ""
-		 */
-		text: {
-			type: String,
-		},
-
-		/**
-		 * Defines whether the subitem is selected.
-		 *
-		 * @public
-		 * @type {boolean}
-		 * @defaultvalue false
-		 */
-		selected: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines the icon of the item.
-		 * <br><br>
-		 *
-		 * The SAP-icons font provides numerous options.
-		 * <br>
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
-		 * @public
-		 * @type {string}
-		 * @defaultvalue ""
-		 */
-		icon: {
-			type: String,
-		},
-	},
-
-	events: {
-		/**
-		 * @public
-		 * @event
-		 * @since 1.0.0-rc.9
-		 */
-		click: {
-
-		},
-	},
+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 jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
+import SideNavigationSubItemTemplate from "./SideNavigationSubItemTemplate.js";
+// Styles
+import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
 /**
  * @class
  *
- * <h3 class="comment-api-title">Overview</h3>
+ * ### Overview
+ * Represents a single navigation action within `ui5-side-navigation-item`.
+ * The `ui5-side-navigation-sub-item` is intended to be used inside a `ui5-side-navigation-item` only.
  *
- * The <code>ui5-side-navigation-sub-item</code> is intended to be used inside a <code>ui5-side-navigation-item</code> only.
+ * ### ES6 Module Import
  *
- * <h3>ES6 Module Import</h3>
- *
- * <code>import @ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";</code>
+ * `import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";`
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.SideNavigationSubItem
- * @extends UI5Element
- * @tagname ui5-side-navigation-sub-item
+ * @extends SideNavigationSelectableItemBase
  * @public
+ * @abstract
  * @since 1.0.0-rc.8
  */
-class SideNavigationSubItem extends UI5Element {
-	static get metadata() {
-		return metadata;
-	}
-}
-
+let SideNavigationSubItem = class SideNavigationSubItem extends SideNavigationSelectableItemBase {
+    _onkeydown(e) {
+        super._onkeydown(e);
+    }
+    _onkeyup(e) {
+        super._onkeyup(e);
+    }
+    _onfocusin(e) {
+        super._onfocusin(e);
+    }
+    _onclick(e) {
+        super._onclick(e);
+    }
+    get classesArray() {
+        const classes = super.classesArray;
+        if (this.icon) {
+            classes.push("ui5-sn-item-has-icon");
+        }
+        return classes;
+    }
+};
+SideNavigationSubItem = __decorate([
+    customElement({
+        tag: "ui5-side-navigation-sub-item",
+        renderer: jsxRender,
+        template: SideNavigationSubItemTemplate,
+        styles: SideNavigationSubItemCss,
+    })
+], SideNavigationSubItem);
 SideNavigationSubItem.define();
-
 export default SideNavigationSubItem;
+//# sourceMappingURL=SideNavigationSubItem.js.map

package/dist/SideNavigationSubItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationSubItem.js","sourceRoot":"","sources":["../src/SideNavigationSubItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,gCAAgC,MAAM,uCAAuC,CAAC;AACrF,OAAO,6BAA6B,MAAM,oCAAoC,CAAC;AAE/E,SAAS;AACT,OAAO,wBAAwB,MAAM,iDAAiD,CAAC;AAEvF;;;;;;;;;;;;;;;;GAgBG;AAOH,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,gCAAgC;IACnE,UAAU,CAAC,CAAgB;QAC1B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC;IAED,UAAU,CAAC,CAAa;QACvB,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;IAED,QAAQ,CAAC,CAAa;QACrB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC;IAED,IAAI,YAAY;QACf,MAAM,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC;QAEnC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QACtC,CAAC;QAED,OAAO,OAAO,CAAC;IAChB,CAAC;CACD,CAAA;AA1BK,qBAAqB;IAN1B,aAAa,CAAC;QACd,GAAG,EAAE,8BAA8B;QACnC,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,6BAA6B;QACvC,MAAM,EAAE,wBAAwB;KAChC,CAAC;GACI,qBAAqB,CA0B1B;AAED,qBAAqB,CAAC,MAAM,EAAE,CAAC;AAE/B,eAAe,qBAAqB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRender from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport SideNavigationSelectableItemBase from \"./SideNavigationSelectableItemBase.js\";\nimport SideNavigationSubItemTemplate from \"./SideNavigationSubItemTemplate.js\";\n\n// Styles\nimport SideNavigationSubItemCss from \"./generated/themes/SideNavigationSubItem.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n * Represents a single navigation action within `ui5-side-navigation-item`.\n * The `ui5-side-navigation-sub-item` is intended to be used inside a `ui5-side-navigation-item` only.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";`\n *\n * @constructor\n * @extends SideNavigationSelectableItemBase\n * @public\n * @abstract\n * @since 1.0.0-rc.8\n */\n@customElement({\n\ttag: \"ui5-side-navigation-sub-item\",\n\trenderer: jsxRender,\n\ttemplate: SideNavigationSubItemTemplate,\n\tstyles: SideNavigationSubItemCss,\n})\nclass SideNavigationSubItem extends SideNavigationSelectableItemBase {\n\t_onkeydown(e: KeyboardEvent) {\n\t\tsuper._onkeydown(e);\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tsuper._onkeyup(e);\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tsuper._onfocusin(e);\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tsuper._onclick(e);\n\t}\n\n\tget classesArray() {\n\t\tconst classes = super.classesArray;\n\n\t\tif (this.icon) {\n\t\t\tclasses.push(\"ui5-sn-item-has-icon\");\n\t\t}\n\n\t\treturn classes;\n\t}\n}\n\nSideNavigationSubItem.define();\n\nexport default SideNavigationSubItem;\n"]}

package/dist/SideNavigationSubItemTemplate.d.ts

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

package/dist/SideNavigationSubItemTemplate.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
+export default function SideNavigationSubItemTemplate() {
+    return (_jsx("li", { id: this._id, class: "ui5-sn-list-li", role: "none", children: this._href ?
+            _jsxs("a", { class: `ui5-sn-item ui5-sn-item-level2 ${this._classes}`, role: "treeitem", "data-sap-focus-ref": true, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusIn: this._onfocusin, tabIndex: this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined, "aria-current": this._ariaCurrent, "aria-selected": this.selected, title: this._tooltip, href: this._href, target: this._target, children: [this.icon &&
+                        _jsx(Icon, { class: "ui5-sn-item-icon", name: this.icon }), _jsx("div", { class: "ui5-sn-item-text", children: this.text }), this.isExternalLink &&
+                        _jsx(Icon, { class: "ui5-sn-item-external-link-icon", name: arrowRight })] })
+            :
+                _jsxs("div", { class: `ui5-sn-item ui5-sn-item-level2 ${this._classes}`, role: "treeitem", "data-sap-focus-ref": true, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusIn: this._onfocusin, tabIndex: this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined, "aria-current": this._ariaCurrent, "aria-haspopup": this.accessibilityAttributes?.hasPopup, "aria-selected": this.selected, title: this._tooltip, children: [this.icon &&
+                            _jsx(Icon, { class: "ui5-sn-item-icon", name: this.icon }), _jsx("div", { class: "ui5-sn-item-text", children: this.text }), this.isExternalLink &&
+                            _jsx(Icon, { class: "ui5-sn-item-external-link-icon", name: arrowRight })] }) }));
+}
+//# sourceMappingURL=SideNavigationSubItemTemplate.js.map

package/dist/SideNavigationSubItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationSubItemTemplate.js","sourceRoot":"","sources":["../src/SideNavigationSubItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,UAAU,MAAM,8CAA8C,CAAC;AAGtE,MAAM,CAAC,OAAO,UAAU,6BAA6B;IACpD,OAAO,CACN,aAAI,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,YAClD,IAAI,CAAC,KAAK,CAAC,CAAC;YACZ,aAAG,KAAK,EAAE,kCAAkC,IAAI,CAAC,QAAQ,EAAE,EAC1D,IAAI,EAAC,UAAU,8BAEf,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,kBACjE,IAAI,CAAC,YAAY,mBAChB,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,MAAM,EAAE,IAAI,CAAC,OAAO,aAEnB,IAAI,CAAC,IAAI;wBACT,KAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,EAElD,cAAK,KAAK,EAAC,kBAAkB,YAAE,IAAI,CAAC,IAAI,GAAO,EAC9C,IAAI,CAAC,cAAc;wBACnB,KAAC,IAAI,IAAC,KAAK,EAAC,gCAAgC,EAC3C,IAAI,EAAE,UAAU,GACf,IAEA;YACJ,CAAC;gBACD,eAAK,KAAK,EAAE,kCAAkC,IAAI,CAAC,QAAQ,EAAE,EAC5D,IAAI,EAAC,UAAU,8BAEf,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,kBACjE,IAAI,CAAC,YAAY,mBAChB,IAAI,CAAC,uBAAuB,EAAE,QAAQ,mBACtC,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,IAAI,CAAC,QAAQ,aAEnB,IAAI,CAAC,IAAI;4BACT,KAAC,IAAI,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,EAElD,cAAK,KAAK,EAAC,kBAAkB,YAAE,IAAI,CAAC,IAAI,GAAO,EAC9C,IAAI,CAAC,cAAc;4BACnB,KAAC,IAAI,IAAC,KAAK,EAAC,gCAAgC,EAC3C,IAAI,EAAE,UAAU,GACf,IAEE,GAEH,CACL,CAAC;AACH,CAAC","sourcesContent":["import Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport arrowRight from \"@ui5/webcomponents-icons/dist/arrow-right.js\";\nimport type SideNavigationSubItem from \"./SideNavigationSubItem.js\";\n\nexport default function SideNavigationSubItemTemplate(this: SideNavigationSubItem) {\n\treturn (\n\t\t<li id={this._id} class=\"ui5-sn-list-li\" role=\"none\">\n\t\t\t{this._href ?\n\t\t\t\t<a class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}\n\t\t\t\t\trole=\"treeitem\"\n\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\t\tonClick={this._onclick}\n\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\ttabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}\n\t\t\t\t\taria-current={this._ariaCurrent}\n\t\t\t\t\taria-selected={this.selected}\n\t\t\t\t\ttitle={this._tooltip}\n\t\t\t\t\thref={this._href}\n\t\t\t\t\ttarget={this._target}\n\t\t\t\t>\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\t<Icon class=\"ui5-sn-item-icon\" name={this.icon}/>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"ui5-sn-item-text\">{this.text}</div>\n\t\t\t\t\t{this.isExternalLink &&\n\t\t\t\t\t\t<Icon class=\"ui5-sn-item-external-link-icon\"\n\t\t\t\t\t\t\tname={arrowRight}\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t</a>\n\t\t\t\t:\n\t\t\t\t<div class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}\n\t\t\t\t\trole=\"treeitem\"\n\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\t\tonClick={this._onclick}\n\t\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\t\ttabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}\n\t\t\t\t\taria-current={this._ariaCurrent}\n\t\t\t\t\taria-haspopup={this.accessibilityAttributes?.hasPopup}\n\t\t\t\t\taria-selected={this.selected}\n\t\t\t\t\ttitle={this._tooltip}\n\t\t\t\t>\n\t\t\t\t\t{this.icon &&\n\t\t\t\t\t\t<Icon class=\"ui5-sn-item-icon\" name={this.icon}/>\n\t\t\t\t\t}\n\t\t\t\t\t<div class=\"ui5-sn-item-text\">{this.text}</div>\n\t\t\t\t\t{this.isExternalLink &&\n\t\t\t\t\t\t<Icon class=\"ui5-sn-item-external-link-icon\"\n\t\t\t\t\t\t\tname={arrowRight}\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t</div>\n\t\t\t}\n\t\t</li>\n\t);\n}\n"]}

package/dist/SideNavigationTemplate.d.ts

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

package/dist/SideNavigationTemplate.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import overflow from "@ui5/webcomponents-icons/dist/overflow.js";
+import SideNavigationItem from "./SideNavigationItem.js";
+import SideNavigationPopoverTemplate from "./SideNavigationPopoverTemplate.js";
+export default function SideNavigationTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsxs("nav", { class: {
+                    "ui5-sn-root": true,
+                    "ui5-sn-collapsed": this.collapsed,
+                }, role: this._rootRole, "aria-label": this.accessibleName, children: [header.call(this), this.collapsed ?
+                        _jsxs("div", { role: "menubar", class: "ui5-sn-list ui5-sn-flexible", "aria-orientation": "vertical", "aria-roledescription": this.ariaRoleDescNavigationList, "aria-label": this.navigationMenuPrimaryHiddenText, children: [_jsx("slot", {}), _jsx(SideNavigationItem, { isOverflow: true, id: `${this._id}-sn-overflow-item`, text: this.overflowAccessibleName, onClick: this._handleOverflowClick, class: "ui5-sn-item-overflow", sideNavCollapsed: true, icon: overflow })] })
+                        :
+                            _jsx("ul", { role: "tree", class: "ui5-sn-list ui5-sn-flexible", "aria-roledescription": this.ariaRoleDescNavigationList, "aria-label": this.navigationMenuPrimaryHiddenText, children: _jsx("slot", {}) }), this.hasFixedItems && _jsxs(_Fragment, { children: [_jsx("div", { role: "separator", class: "ui5-sn-spacer" }), this.collapsed ?
+                                _jsx("div", { role: "menubar", class: "ui5-sn-list ui5-sn-fixed", "aria-orientation": "vertical", "aria-roledescription": this.ariaRoleDescNavigationList, "aria-label": this.navigationMenuFooterHiddenText, children: _jsx("slot", { name: "fixedItems" }) })
+                                :
+                                    _jsx("ul", { role: "tree", class: "ui5-sn-list ui5-sn-fixed", "aria-roledescription": this.ariaRoleDescNavigationList, "aria-label": this.navigationMenuFooterHiddenText, children: _jsx("slot", { name: "fixedItems" }) })] })] }), SideNavigationPopoverTemplate.call(this)] }));
+}
+function header() {
+    return this.showHeader ? (_jsx("slot", { name: "header" })) : undefined;
+}
+//# sourceMappingURL=SideNavigationTemplate.js.map