@ui5/webcomponents-fiori 0.0.0-037d08c67

package/dist/SideNavigationSelectableItemBase.js

@@ -0,0 +1,256 @@
+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, isEnterShift, isEnterCtrl, isEnterAlt, isLeft, isRight, } from "@ui5/webcomponents-base/dist/Keys.js";
+import SideNavigationItemBase from "./SideNavigationItemBase.js";
+import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.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 if the item's parent is disabled.
+         * @private
+         * @default false
+         * @since 2.10.0
+         */
+        this._parentDisabled = false;
+        /**
+         * Defines whether the item is selected.
+         *
+         * **Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.
+         *
+         * @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**:
+         * - Items with an assigned `href` and a target of `_blank` should be marked as unselectable.
+         * - Items that trigger actions (with design "Action") should be marked as 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.effectiveDisabled;
+    }
+    get _href() {
+        return (!this.effectiveDisabled && this.href) ? this.href : undefined;
+    }
+    get _target() {
+        return (!this.effectiveDisabled && this.href && this.target) ? this.target : undefined;
+    }
+    get isExternalLink() {
+        return this.href && this.target === "_blank";
+    }
+    get _selected() {
+        return this.selected;
+    }
+    get _effectiveTag() {
+        return this._href ? "a" : "div";
+    }
+    get effectiveDisabled() {
+        return this.disabled || this._parentDisabled;
+    }
+    get _ariaHasPopup() {
+        if (this.accessibilityAttributes?.hasPopup) {
+            return this.accessibilityAttributes.hasPopup;
+        }
+        return undefined;
+    }
+    get classesArray() {
+        const classes = [];
+        if (this.effectiveDisabled) {
+            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.sideNavCollapsed && !this.selected) {
+            return undefined;
+        }
+        return "page";
+    }
+    get _ariaSelected() {
+        if (!this.sideNavCollapsed) {
+            return undefined;
+        }
+        return this.selected;
+    }
+    _onkeydown(e) {
+        const isRTL = this.effectiveDir === "rtl";
+        if (isSpace(e) || isRight(e) || isLeft(e)) {
+            e.preventDefault();
+        }
+        // "Enter" + "Meta" is missing since it is often reserved by the operating system or window manager
+        if (isEnter(e) || isEnterShift(e) || isEnterCtrl(e) || isEnterAlt(e)) {
+            if (!this.unselectable) {
+                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) {
+        // "Space" + modifier is often reserved by the operating system or window manager
+        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({ type: Boolean, noAttribute: true })
+], SideNavigationSelectableItemBase.prototype, "_parentDisabled", void 0);
+__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);
+export default SideNavigationSelectableItemBase;
+export const isInstanceOfSideNavigationSelectableItemBase = createInstanceChecker("isSideNavigationSelectableItemBase");
+//# 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\tisEnterShift,\n\tisEnterCtrl,\n\tisEnterAlt,\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\";\nimport createInstanceChecker from \"@ui5/webcomponents-base/dist/util/createInstanceChecker.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 if the item's parent is disabled.\n\t * @private\n\t * @default false\n\t * @since 2.10.0\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_parentDisabled: boolean = false;\n\n\t/**\n\t * Defines the icon of the item.\n\t *\n\t * **Note:** Icons on second-level (child) navigation items are not recommended according to the design specification.\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 * **Note:** Items that have a set `href` and `target` set to `_blank` should not be selectable.\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 * Possible values:\n\t *\n\t * - `_self`\n\t * - `_top`\n\t * - `_blank`\n\t * - `_parent`\n\t * - `framename`\n\t *\n\t * **Note:** Items that have a defined `href` and `target`\n\t * attribute set to `_blank` should not be selectable.\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 * - Items with an assigned `href` and a target of `_blank` should be marked as unselectable.\n\t * - Items that trigger actions (with design \"Action\") should be marked as 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.effectiveDisabled;\n\t}\n\n\tget _href() {\n\t\treturn (!this.effectiveDisabled && this.href) ? this.href : undefined;\n\t}\n\n\tget _target() {\n\t\treturn (!this.effectiveDisabled && this.href && 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 _effectiveTag() {\n\t\treturn this._href ? \"a\" : \"div\";\n\t}\n\n\tget effectiveDisabled() {\n\t\treturn this.disabled || this._parentDisabled;\n\t}\n\n\tget _ariaHasPopup() {\n\t\tif (this.accessibilityAttributes?.hasPopup) {\n\t\t\treturn this.accessibilityAttributes.hasPopup;\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\tget classesArray() {\n\t\tconst classes = [];\n\n\t\tif (this.effectiveDisabled) {\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.sideNavCollapsed && !this.selected) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn \"page\";\n\t}\n\n\tget _ariaSelected() {\n\t\tif (!this.sideNavCollapsed) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn this.selected;\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\t// \"Enter\" + \"Meta\" is missing since it is often reserved by the operating system or window manager\n\t\tif (isEnter(e) || isEnterShift(e) || isEnterCtrl(e) || isEnterAlt(e)) {\n\t\t\tif (!this.unselectable) {\n\t\t\t\tthis._activate(e);\n\t\t\t}\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\t// \"Space\" + modifier is often reserved by the operating system or window manager\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\nexport default SideNavigationSelectableItemBase;\nexport const isInstanceOfSideNavigationSelectableItemBase = createInstanceChecker<SideNavigationSelectableItemBase>(\"isSideNavigationSelectableItemBase\");\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

@@ -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;
+};
+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
+ *
+ * ### 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
+ */
+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");
+        }
+        if (this.effectiveDisabled) {
+            classes.push("ui5-sn-item-disabled");
+        }
+        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,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC5B,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;QACtC,CAAC;QAED,OAAO,OAAO,CAAC;IAChB,CAAC;CACD,CAAA;AA9BK,qBAAqB;IAN1B,aAAa,CAAC;QACd,GAAG,EAAE,8BAA8B;QACnC,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,6BAA6B;QACvC,MAAM,EAAE,wBAAwB;KAChC,CAAC;GACI,qBAAqB,CA8B1B;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\tif (this.effectiveDisabled) {\n\t\t\tclasses.push(\"ui5-sn-item-disabled\");\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,10 @@
+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() {
+    const EffectiveTag = this._effectiveTag;
+    return (_jsx("li", { id: this._id, class: "ui5-sn-list-li", role: "none", children: _jsxs(EffectiveTag, { id: this._id, "data-sap-focus-ref": true, class: `ui5-sn-item ui5-sn-item-level2 ${this._classes}`, role: this.ariaRole, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onFocusIn: this._onfocusin, tabIndex: this.effectiveTabIndex, "aria-current": this._ariaCurrent, "aria-selected": this._ariaSelected, title: this._tooltip, "aria-disabled": this.effectiveDisabled, href: this._href, target: this._target, "aria-haspopup": this._ariaHasPopup, 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,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC;IAExC,OAAO,CACN,aAAI,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,YACnD,MAAC,YAAY,IAAC,EAAE,EAAE,IAAI,CAAC,GAAG,8BAErB,KAAK,EAAE,kCAAkC,IAAI,CAAC,QAAQ,EAAE,EACxD,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,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,kBAClB,IAAI,CAAC,YAAY,mBAChB,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,QAAQ,mBACL,IAAI,CAAC,iBAAiB,EACrC,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,MAAM,EAAE,IAAI,CAAC,OAAO,mBACL,IAAI,CAAC,aAAa,aAEpC,IAAI,CAAC,IAAI;oBACT,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;oBACnB,KAAC,IAAI,IAAC,KAAK,EAAC,gCAAgC,EACzC,IAAI,EAAE,UAAU,GACjB,IAEW,GACX,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\tconst EffectiveTag = this._effectiveTag;\n\n\treturn (\n\t\t<li id={this._id} class=\"ui5-sn-list-li\" role=\"none\">\n\t\t\t<EffectiveTag id={this._id}\n\t\t\t\t\t\t  data-sap-focus-ref\n\t\t\t\t\t\t  class={`ui5-sn-item ui5-sn-item-level2 ${this._classes}`}\n\t\t\t\t\t\t  role={this.ariaRole}\n\t\t\t\t\t\t  onKeyDown={this._onkeydown}\n\t\t\t\t\t\t  onKeyUp={this._onkeyup}\n\t\t\t\t\t\t  onClick={this._onclick}\n\t\t\t\t\t\t  onFocusIn={this._onfocusin}\n\t\t\t\t\t\t  tabIndex={this.effectiveTabIndex}\n\t\t\t\t\t\t  aria-current={this._ariaCurrent}\n\t\t\t\t\t\t  aria-selected={this._ariaSelected}\n\t\t\t\t\t\t  title={this._tooltip}\n\t\t\t\t\t\t  aria-disabled={this.effectiveDisabled}\n\t\t\t\t\t\t  href={this._href}\n\t\t\t\t\t\t  target={this._target}\n\t\t\t\t\t\t  aria-haspopup={this._ariaHasPopup}\n\t\t\t>\n\t\t\t\t{this.icon &&\n\t\t\t\t\t<Icon class=\"ui5-sn-item-icon\" name={this.icon}/>\n\t\t\t\t}\n\t\t\t\t<div class=\"ui5-sn-item-text\">{this.text}</div>\n\t\t\t\t{this.isExternalLink &&\n\t\t\t\t\t<Icon class=\"ui5-sn-item-external-link-icon\"\n\t\t\t\t\t\t  name={arrowRight}\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t</EffectiveTag>\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

package/dist/SideNavigationTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationTemplate.js","sourceRoot":"","sources":["../src/SideNavigationTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AAEjE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,6BAA6B,MAAM,oCAAoC,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC7C,OAAO,CAAC,8BACP,eAAK,KAAK,EAAE;oBACX,aAAa,EAAE,IAAI;oBACnB,kBAAkB,EAAE,IAAI,CAAC,SAAS;iBAClC,EACD,IAAI,EAAE,IAAI,CAAC,SAAS,gBACR,IAAI,CAAC,cAAc,aAE7B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAEjB,IAAI,CAAC,SAAS,CAAC,CAAC;wBAChB,eAAK,IAAI,EAAC,SAAS,EAClB,KAAK,EAAC,6BAA6B,sBAClB,UAAU,0BACL,IAAI,CAAC,0BAA0B,gBACzC,IAAI,CAAC,+BAA+B,aAEhD,gBAAa,EACb,KAAC,kBAAkB,IAClB,UAAU,EAAE,IAAI,EAChB,EAAE,EAAE,GAAG,IAAI,CAAC,GAAG,mBAAmB,EAClC,IAAI,EAAE,IAAI,CAAC,sBAAsB,EACjC,OAAO,EAAE,IAAI,CAAC,oBAAoB,EAClC,KAAK,EAAC,sBAAsB,EAC5B,gBAAgB,EAAE,IAAI,EACtB,IAAI,EAAE,QAAQ,GACb,IACG;wBACN,CAAC;4BACD,aAAI,IAAI,EAAC,MAAM,EACd,KAAK,EAAC,6BAA6B,0BACb,IAAI,CAAC,0BAA0B,gBACzC,IAAI,CAAC,+BAA+B,YAEhD,gBAAa,GACT,EAGL,IAAI,CAAC,aAAa,IAAI,8BACtB,cAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,eAAe,GAAO,EACjD,IAAI,CAAC,SAAS,CAAC,CAAC;gCAChB,cAAK,IAAI,EAAC,SAAS,EAClB,KAAK,EAAC,0BAA0B,sBACf,UAAU,0BACL,IAAI,CAAC,0BAA0B,gBACzC,IAAI,CAAC,8BAA8B,YAE/C,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC1B;gCACN,CAAC;oCACD,aAAI,IAAI,EAAC,MAAM,EACd,KAAK,EAAC,0BAA0B,0BACV,IAAI,CAAC,0BAA0B,gBACzC,IAAI,CAAC,8BAA8B,YAE/C,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC3B,IAEJ,IACE,EACL,6BAA6B,CAAC,IAAI,CAAC,IAAI,CAAC,IACvC,CAAC,CAAC;AACN,CAAC;AAED,SAAS,MAAM;IACd,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACxB,eAAM,IAAI,EAAC,QAAQ,GAAQ,CAC3B,CAAC,CAAC,CAAC,SAAS,CAAC;AACf,CAAC","sourcesContent":["import overflow from \"@ui5/webcomponents-icons/dist/overflow.js\";\nimport type SideNavigation from \"./SideNavigation.js\";\nimport SideNavigationItem from \"./SideNavigationItem.js\";\nimport SideNavigationPopoverTemplate from \"./SideNavigationPopoverTemplate.js\";\n\nexport default function SideNavigationTemplate(this: SideNavigation) {\n\treturn (<>\n\t\t<nav class={{\n\t\t\t\"ui5-sn-root\": true,\n\t\t\t\"ui5-sn-collapsed\": this.collapsed,\n\t\t}}\n\t\trole={this._rootRole}\n\t\taria-label={this.accessibleName}\n\t\t>\n\t\t\t{header.call(this)}\n\n\t\t\t{this.collapsed ?\n\t\t\t\t<div role=\"menubar\"\n\t\t\t\t\tclass=\"ui5-sn-list ui5-sn-flexible\"\n\t\t\t\t\taria-orientation=\"vertical\"\n\t\t\t\t\taria-roledescription={this.ariaRoleDescNavigationList}\n\t\t\t\t\taria-label={this.navigationMenuPrimaryHiddenText}\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t\t<SideNavigationItem\n\t\t\t\t\t\tisOverflow={true}\n\t\t\t\t\t\tid={`${this._id}-sn-overflow-item`}\n\t\t\t\t\t\ttext={this.overflowAccessibleName}\n\t\t\t\t\t\tonClick={this._handleOverflowClick}\n\t\t\t\t\t\tclass=\"ui5-sn-item-overflow\"\n\t\t\t\t\t\tsideNavCollapsed={true}\n\t\t\t\t\t\ticon={overflow}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t:\n\t\t\t\t<ul role=\"tree\"\n\t\t\t\t\tclass=\"ui5-sn-list ui5-sn-flexible\"\n\t\t\t\t\taria-roledescription={this.ariaRoleDescNavigationList}\n\t\t\t\t\taria-label={this.navigationMenuPrimaryHiddenText}\n\t\t\t\t>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t}\n\n\t\t\t{this.hasFixedItems && <>\n\t\t\t\t<div role=\"separator\" class=\"ui5-sn-spacer\"></div>\n\t\t\t\t{this.collapsed ?\n\t\t\t\t\t<div role=\"menubar\"\n\t\t\t\t\t\tclass=\"ui5-sn-list ui5-sn-fixed\"\n\t\t\t\t\t\taria-orientation=\"vertical\"\n\t\t\t\t\t\taria-roledescription={this.ariaRoleDescNavigationList}\n\t\t\t\t\t\taria-label={this.navigationMenuFooterHiddenText}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"fixedItems\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t:\n\t\t\t\t\t<ul role=\"tree\"\n\t\t\t\t\t\tclass=\"ui5-sn-list ui5-sn-fixed\"\n\t\t\t\t\t\taria-roledescription={this.ariaRoleDescNavigationList}\n\t\t\t\t\t\taria-label={this.navigationMenuFooterHiddenText}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"fixedItems\"></slot>\n\t\t\t\t\t</ul>\n\t\t\t\t}\n\t\t\t</>}\n\t\t</nav>\n\t\t{SideNavigationPopoverTemplate.call(this)}\n\t</>);\n}\n\nfunction header(this: SideNavigation) {\n\treturn this.showHeader ? (\n\t\t<slot name=\"header\"></slot>\n\t) : undefined;\n}\n"]}

package/dist/SortItem.d.ts

@@ -0,0 +1,38 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.
+ * It represents a single sort option that users can select to organize data in ascending or descending order.
+ *
+ * ### Usage
+ *
+ * The `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.
+ * Each sort item represents a column or field by which data can be sorted.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SortItem.js";`
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @since 1.0.0-rc.16
+ * @public
+ */
+declare class SortItem extends UI5Element {
+    /**
+     * Defines the text of the sort item.
+     * @default undefined
+     * @public
+     */
+    text?: string;
+    /**
+     * Defines if the sort item is selected.
+     * @default false
+     * @public
+     */
+    selected: boolean;
+}
+export default SortItem;

package/dist/SortItem.js

@@ -0,0 +1,54 @@
+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 property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.
+ * It represents a single sort option that users can select to organize data in ascending or descending order.
+ *
+ * ### Usage
+ *
+ * The `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.
+ * Each sort item represents a column or field by which data can be sorted.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/SortItem.js";`
+ * @constructor
+ * @extends UI5Element
+ * @abstract
+ * @since 1.0.0-rc.16
+ * @public
+ */
+let SortItem = class SortItem extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines if the sort item is selected.
+         * @default false
+         * @public
+         */
+        this.selected = false;
+    }
+};
+__decorate([
+    property()
+], SortItem.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], SortItem.prototype, "selected", void 0);
+SortItem = __decorate([
+    customElement("ui5-sort-item")
+], SortItem);
+SortItem.define();
+export default SortItem;
+//# sourceMappingURL=SortItem.js.map

package/dist/SortItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortItem.js","sourceRoot":"","sources":["../src/SortItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QASC;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;IAClB,CAAC;CAAA,CAAA;AATA;IADC,QAAQ,EAAE;sCACG;AAQd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAfZ,QAAQ;IADb,aAAa,CAAC,eAAe,CAAC;GACzB,QAAQ,CAgBb;AAED,QAAQ,CAAC,MAAM,EAAE,CAAC;AAElB,eAAe,QAAQ,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`.\n * It represents a single sort option that users can select to organize data in ascending or descending order.\n *\n * ### Usage\n *\n * The `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options.\n * Each sort item represents a column or field by which data can be sorted.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n * @constructor\n * @extends UI5Element\n * @abstract\n * @since 1.0.0-rc.16\n * @public\n */\n@customElement(\"ui5-sort-item\")\nclass SortItem extends UI5Element {\n\t/**\n\t * Defines the text of the sort item.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ttext?: string;\n\n\t/**\n\t * Defines if the sort item is selected.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tselected = false;\n}\n\nSortItem.define();\n\nexport default SortItem;\n"]}