@ui5/webcomponents 1.17.0-rc.2 → 1.17.0

package/dist/SelectMenu.d.ts

@@ -0,0 +1,113 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import type Select from "./Select.js";
+import type SelectMenuOption from "./SelectMenuOption.js";
+type SelectMenuOptionClick = {
+    option: SelectMenuOption;
+    optionIndex: number;
+};
+type SelectMenuChange = {
+    text: string;
+    selectedIndex: number;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-select-menu</code> is meant to be used together with the <code>ui5-select</code> component as alternative
+ * to define the select's dropdown. It acts as a popover on desktop and tablet, and as a Dialog on phone.
+ * <br></br>
+ * The component gives the possibility to the user to customize the <code>ui5-select</code>'s dropdown
+ * by slotting custom options and adding custom styles.
+ *
+ * <h3>Usage</h3>
+ *
+ * To use <code>ui5-select</code> with a <code>ui5-select-menu</code>,
+ * you need to set the <code>ui5-select</code> <code>menu</code> property to reference <code>ui5-select-menu</code> either by ID or DOM reference.
+ * <br></br>
+ *
+ * For the <code>ui5-select-menu</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/SelectMenu.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SelectMenu
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-select-menu
+ * @public
+ * @since 1.17.0
+ */
+declare class SelectMenu extends UI5Element {
+    constructor();
+    /**
+     * Defines the options of the component.
+     *
+     * @type {sap.ui.webc.main.ISelectMenuOption[]}
+     * @name sap.ui.webc.main.SelectMenu.prototype.default
+     * @slot
+     * @public
+     */
+    options: Array<SelectMenuOption>;
+    /**
+     * Defines the width of the component.
+     *
+     * @type { number }
+     * @name sap.ui.webc.main.SelectMenu.prototype.selectWidth
+     * @private
+     */
+    selectWidth?: number;
+    hasValueState: boolean;
+    hasValueStateSlot: boolean;
+    valueState: `${ValueState}`;
+    valueStateText: string;
+    value: string;
+    valueStateMessageText: Array<Node>;
+    _headerTitleText?: string;
+    select?: Select;
+    /**
+     * Shows the dropdown at the given element.
+     */
+    showAt(opener: Select, openerWidth: number): void;
+    /**
+     * Closes the dropdown.
+     */
+    close(escPressed?: boolean, preventRegistryUpdate?: boolean, preventFocusRestore?: boolean): void;
+    onBeforeRendering(): void;
+    _syncSelection(): void;
+    _onOptionClick(e: CustomEvent): void;
+    _onBeforeOpen(): void;
+    _onAfterOpen(): void;
+    _onAfterClose(): void;
+    _onCloseBtnClick(): void;
+    get open(): boolean;
+    get respPopover(): ResponsivePopover;
+    get classes(): {
+        popoverValueState: {
+            "ui5-valuestatemessage-root": boolean;
+            "ui5-valuestatemessage--success": boolean;
+            "ui5-valuestatemessage--error": boolean;
+            "ui5-valuestatemessage--warning": boolean;
+            "ui5-valuestatemessage--information": boolean;
+        };
+        popover: {
+            "ui5-select-popover-valuestate": boolean;
+        };
+    };
+    get styles(): {
+        responsivePopoverHeader: {
+            display: string;
+            width: string;
+        };
+        responsivePopover: {
+            "min-width": string;
+        };
+    };
+    get _valueStateMessageInputIcon(): string;
+    get _isPhone(): boolean;
+}
+export default SelectMenu;
+export type { SelectMenuOptionClick, SelectMenuChange, };

package/dist/SelectMenu.js

@@ -0,0 +1,241 @@
+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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+// Template
+import SelectMenuTemplate from "./generated/templates/SelectMenuTemplate.lit.js";
+// Styles
+import SelectMenuCss from "./generated/themes/SelectMenu.css.js";
+import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
+import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
+// Deps
+import ResponsivePopover from "./ResponsivePopover.js";
+import List from "./List.js";
+import Button from "./Button.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-select-menu</code> is meant to be used together with the <code>ui5-select</code> component as alternative
+ * to define the select's dropdown. It acts as a popover on desktop and tablet, and as a Dialog on phone.
+ * <br></br>
+ * The component gives the possibility to the user to customize the <code>ui5-select</code>'s dropdown
+ * by slotting custom options and adding custom styles.
+ *
+ * <h3>Usage</h3>
+ *
+ * To use <code>ui5-select</code> with a <code>ui5-select-menu</code>,
+ * you need to set the <code>ui5-select</code> <code>menu</code> property to reference <code>ui5-select-menu</code> either by ID or DOM reference.
+ * <br></br>
+ *
+ * For the <code>ui5-select-menu</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/SelectMenu.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SelectMenu
+ * @extends sap.ui.webc.base.UI5Element
+ * @tagname ui5-select-menu
+ * @public
+ * @since 1.17.0
+ */
+let SelectMenu = class SelectMenu extends UI5Element {
+    constructor() {
+        super();
+        this.valueStateMessageText = [];
+    }
+    /**
+     * Shows the dropdown at the given element.
+     */
+    showAt(opener, openerWidth) {
+        this.selectWidth = openerWidth;
+        this.respPopover.open = true;
+        this.respPopover.opener = opener;
+        this.hasValueState = !!opener.hasValueState;
+        this.hasValueStateSlot = opener.valueStateMessageText.length > 0;
+        this.valueStateText = opener.valueStateText;
+        this.valueStateMessageText = opener.valueStateMessageText;
+        this.valueState = opener.valueState;
+        this._headerTitleText = opener._headerTitleText;
+    }
+    /**
+     * Closes the dropdown.
+     */
+    close(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {
+        this.respPopover.close(escPressed, preventRegistryUpdate, preventFocusRestore);
+    }
+    onBeforeRendering() {
+        this._syncSelection();
+    }
+    _syncSelection() {
+        let lastSelectedOptionIndex = -1, firstEnabledOptionIndex = -1, text, selectedIndex;
+        const options = this.options;
+        options.forEach((opt, index) => {
+            if (opt.selected || opt.textContent === this.value) {
+                // The second condition in the IF statement is added because of Angular Reactive Forms Support(Two way data binding)
+                lastSelectedOptionIndex = index;
+            }
+            if (firstEnabledOptionIndex === -1) {
+                firstEnabledOptionIndex = index;
+            }
+            opt.selected = false;
+            opt.focused = false;
+            return opt;
+        });
+        if (lastSelectedOptionIndex > -1) {
+            const lastSelectedOption = options[lastSelectedOptionIndex];
+            lastSelectedOption.selected = true;
+            lastSelectedOption.focused = true;
+            text = lastSelectedOption.displayText || String(lastSelectedOption.textContent);
+            selectedIndex = lastSelectedOptionIndex;
+        }
+        else {
+            text = "";
+            selectedIndex = -1;
+            const firstSelectedOption = options[firstEnabledOptionIndex];
+            if (firstSelectedOption) {
+                firstSelectedOption.selected = true;
+                firstSelectedOption.focused = true;
+                selectedIndex = firstEnabledOptionIndex;
+                text = firstSelectedOption.displayText || String(firstSelectedOption.textContent);
+            }
+        }
+        this.fireEvent("menu-change", {
+            text,
+            selectedIndex,
+        });
+    }
+    _onOptionClick(e) {
+        const option = e.detail.item;
+        const optionIndex = this.options.findIndex(_option => option.__id === _option.__id);
+        this.fireEvent("option-click", {
+            option,
+            optionIndex,
+        });
+    }
+    _onBeforeOpen() {
+        this.fireEvent("before-open");
+    }
+    _onAfterOpen() {
+        this.fireEvent("after-open");
+    }
+    _onAfterClose() {
+        this.fireEvent("after-close");
+    }
+    _onCloseBtnClick() {
+        this.close();
+    }
+    get open() {
+        return !!this.respPopover?.open;
+    }
+    get respPopover() {
+        return this.shadowRoot.querySelector(".ui5-select-menu");
+    }
+    get classes() {
+        return {
+            popoverValueState: {
+                "ui5-valuestatemessage-root": true,
+                "ui5-valuestatemessage--success": this.valueState === ValueState.Success,
+                "ui5-valuestatemessage--error": this.valueState === ValueState.Error,
+                "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
+                "ui5-valuestatemessage--information": this.valueState === ValueState.Information,
+            },
+            popover: {
+                "ui5-select-popover-valuestate": this.hasValueState,
+            },
+        };
+    }
+    get styles() {
+        return {
+            responsivePopoverHeader: {
+                "display": this.options.length && this.respPopover?.offsetWidth === 0 ? "none" : "inline-block",
+                "width": `${this.options.length ? this.respPopover?.offsetWidth : this.selectWidth || "auto"}px`,
+            },
+            responsivePopover: {
+                "min-width": `${this.selectWidth}px`,
+            },
+        };
+    }
+    get _valueStateMessageInputIcon() {
+        const iconPerValueState = {
+            Error: "error",
+            Warning: "alert",
+            Success: "sys-enter-2",
+            Information: "information",
+        };
+        return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+    }
+    get _isPhone() {
+        return isPhone();
+    }
+};
+__decorate([
+    slot({
+        "default": true,
+        type: HTMLElement,
+        invalidateOnChildChange: true,
+    })
+], SelectMenu.prototype, "options", void 0);
+__decorate([
+    property({ validator: Integer })
+], SelectMenu.prototype, "selectWidth", void 0);
+__decorate([
+    property({ type: Boolean })
+], SelectMenu.prototype, "hasValueState", void 0);
+__decorate([
+    property({ type: Boolean })
+], SelectMenu.prototype, "hasValueStateSlot", void 0);
+__decorate([
+    property({ type: ValueState, defaultValue: ValueState.None })
+], SelectMenu.prototype, "valueState", void 0);
+__decorate([
+    property()
+], SelectMenu.prototype, "valueStateText", void 0);
+__decorate([
+    property()
+], SelectMenu.prototype, "value", void 0);
+SelectMenu = __decorate([
+    customElement({
+        tag: "ui5-select-menu",
+        renderer: litRender,
+        styles: [SelectMenuCss, ValueStateMessageCss, ResponsivePopoverCommonCss],
+        template: SelectMenuTemplate,
+        dependencies: [
+            ResponsivePopover,
+            List,
+            Button,
+        ],
+    }),
+    event("option-click", {
+        detail: {
+            option: { type: HTMLElement },
+            optionIndex: { type: Integer },
+        },
+    }),
+    event("before-open"),
+    event("after-open"),
+    event("after-close"),
+    event("menu-change", {
+        detail: {
+            text: { type: String },
+            selectedIndex: { type: Integer },
+        },
+    })
+], SelectMenu);
+SelectMenu.define();
+export default SelectMenu;
+//# sourceMappingURL=SelectMenu.js.map

package/dist/SelectMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenu.js","sourceRoot":"","sources":["../src/SelectMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\n\n// Template\nimport SelectMenuTemplate from \"./generated/templates/SelectMenuTemplate.lit.js\";\n\n// Styles\nimport SelectMenuCss from \"./generated/themes/SelectMenu.css.js\";\nimport ValueStateMessageCss from \"./generated/themes/ValueStateMessage.css.js\";\nimport ResponsivePopoverCommonCss from \"./generated/themes/ResponsivePopoverCommon.css.js\";\n\n// Deps\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport List from \"./List.js\";\nimport Button from \"./Button.js\";\n\n// Types\nimport type Select from \"./Select.js\";\nimport type SelectMenuOption from \"./SelectMenuOption.js\";\n\ntype SelectMenuOptionClick = {\n\toption: SelectMenuOption,\n\toptionIndex: number,\n};\n\ntype SelectMenuChange = {\n\ttext: string,\n\tselectedIndex: number,\n};\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * The <code>ui5-select-menu</code> is meant to be used together with the <code>ui5-select</code> component as alternative\n * to define the select's dropdown. It acts as a popover on desktop and tablet, and as a Dialog on phone.\n * <br></br>\n * The component gives the possibility to the user to customize the <code>ui5-select</code>'s dropdown\n * by slotting custom options and adding custom styles.\n *\n * <h3>Usage</h3>\n *\n * To use <code>ui5-select</code> with a <code>ui5-select-menu</code>,\n * you need to set the <code>ui5-select</code> <code>menu</code> property to reference <code>ui5-select-menu</code> either by ID or DOM reference.\n * <br></br>\n *\n * For the <code>ui5-select-menu</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @ui5/webcomponents/dist/SelectMenu.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.SelectMenu\n * @extends sap.ui.webc.base.UI5Element\n * @tagname ui5-select-menu\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-select-menu\",\n\trenderer: litRender,\n\tstyles: [SelectMenuCss, ValueStateMessageCss, ResponsivePopoverCommonCss],\n\ttemplate: SelectMenuTemplate,\n\tdependencies: [\n\t\tResponsivePopover,\n\t\tList,\n\t\tButton,\n\t],\n})\n@event(\"option-click\", {\n\tdetail: {\n\t\toption: { type: HTMLElement },\n\t\toptionIndex: { type: Integer },\n\t},\n})\n@event(\"before-open\")\n@event(\"after-open\")\n@event(\"after-close\")\n@event(\"menu-change\", {\n\tdetail: {\n\t\ttext: { type: String },\n\t\tselectedIndex: { type: Integer },\n\t},\n})\nclass SelectMenu extends UI5Element {\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.valueStateMessageText = [];\n\t}\n\n\t/**\n\t * Defines the options of the component.\n\t *\n\t * @type {sap.ui.webc.main.ISelectMenuOption[]}\n\t * @name sap.ui.webc.main.SelectMenu.prototype.default\n\t * @slot\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: true,\n\t})\n\toptions!: Array<SelectMenuOption>;\n\n\t/**\n\t * Defines the width of the component.\n\t *\n\t * @type { number }\n\t * @name sap.ui.webc.main.SelectMenu.prototype.selectWidth\n\t * @private\n\t */\n\t@property({ validator: Integer })\n\tselectWidth?: number;\n\n\t@property({ type: Boolean })\n\thasValueState!: boolean;\n\n\t@property({ type: Boolean })\n\thasValueStateSlot!: boolean;\n\n\t@property({ type: ValueState, defaultValue: ValueState.None })\n\tvalueState!: `${ValueState}`;\n\n\t@property()\n\tvalueStateText!: string;\n\n\t@property()\n\tvalue!: string;\n\n\tvalueStateMessageText: Array<Node>;\n\n\t_headerTitleText?: string;\n\n\tselect?: Select;\n\n\t/**\n\t * Shows the dropdown at the given element.\n\t */\n\tshowAt(opener: Select, openerWidth: number) {\n\t\tthis.selectWidth = openerWidth;\n\t\tthis.respPopover.open = true;\n\t\tthis.respPopover.opener = opener;\n\t\tthis.hasValueState = !!opener.hasValueState;\n\t\tthis.hasValueStateSlot = opener.valueStateMessageText.length > 0;\n\t\tthis.valueStateText = opener.valueStateText;\n\t\tthis.valueStateMessageText = opener.valueStateMessageText;\n\t\tthis.valueState = opener.valueState;\n\n\t\tthis._headerTitleText = opener._headerTitleText;\n\t}\n\n\t/**\n\t * Closes the dropdown.\n\t */\n\tclose(escPressed = false, preventRegistryUpdate = false, preventFocusRestore = false) {\n\t\tthis.respPopover.close(escPressed, preventRegistryUpdate, preventFocusRestore);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._syncSelection();\n\t}\n\n\t_syncSelection() {\n\t\tlet lastSelectedOptionIndex = -1,\n\t\t\tfirstEnabledOptionIndex = -1,\n\t\t\ttext,\n\t\t\tselectedIndex;\n\t\tconst options = this.options;\n\t\toptions.forEach((opt, index) => {\n\t\t\tif (opt.selected || opt.textContent === this.value) {\n\t\t\t\t// The second condition in the IF statement is added because of Angular Reactive Forms Support(Two way data binding)\n\t\t\t\tlastSelectedOptionIndex = index;\n\t\t\t}\n\t\t\tif (firstEnabledOptionIndex === -1) {\n\t\t\t\tfirstEnabledOptionIndex = index;\n\t\t\t}\n\n\t\t\topt.selected = false;\n\t\t\topt.focused = false;\n\t\t\treturn opt;\n\t\t});\n\n\t\tif (lastSelectedOptionIndex > -1) {\n\t\t\tconst lastSelectedOption = options[lastSelectedOptionIndex];\n\t\t\tlastSelectedOption.selected = true;\n\t\t\tlastSelectedOption.focused = true;\n\t\t\ttext = lastSelectedOption.displayText || String(lastSelectedOption.textContent);\n\t\t\tselectedIndex = lastSelectedOptionIndex;\n\t\t} else {\n\t\t\ttext = \"\";\n\t\t\tselectedIndex = -1;\n\t\t\tconst firstSelectedOption = options[firstEnabledOptionIndex];\n\t\t\tif (firstSelectedOption) {\n\t\t\t\tfirstSelectedOption.selected = true;\n\t\t\t\tfirstSelectedOption.focused = true;\n\t\t\t\tselectedIndex = firstEnabledOptionIndex;\n\t\t\t\ttext = firstSelectedOption.displayText || String(firstSelectedOption.textContent);\n\t\t\t}\n\t\t}\n\n\t\tthis.fireEvent<SelectMenuChange>(\"menu-change\", {\n\t\t\ttext,\n\t\t\tselectedIndex,\n\t\t});\n\t}\n\n\t_onOptionClick(e: CustomEvent) {\n\t\tconst option = e.detail.item;\n\t\tconst optionIndex = this.options.findIndex(_option => option.__id === _option.__id);\n\n\t\tthis.fireEvent<SelectMenuOptionClick>(\"option-click\", {\n\t\t\toption,\n\t\t\toptionIndex,\n\t\t});\n\t}\n\n\t_onBeforeOpen() {\n\t\tthis.fireEvent<CustomEvent>(\"before-open\");\n\t}\n\n\t_onAfterOpen() {\n\t\tthis.fireEvent<CustomEvent>(\"after-open\");\n\t}\n\n\t_onAfterClose() {\n\t\tthis.fireEvent<CustomEvent>(\"after-close\");\n\t}\n\n\t_onCloseBtnClick() {\n\t\tthis.close();\n\t}\n\n\tget open() {\n\t\treturn !!this.respPopover?.open;\n\t}\n\n\tget respPopover() {\n\t\treturn this.shadowRoot!.querySelector<ResponsivePopover>(\".ui5-select-menu\")!;\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tpopoverValueState: {\n\t\t\t\t\"ui5-valuestatemessage-root\": true,\n\t\t\t\t\"ui5-valuestatemessage--success\": this.valueState === ValueState.Success,\n\t\t\t\t\"ui5-valuestatemessage--error\": this.valueState === ValueState.Error,\n\t\t\t\t\"ui5-valuestatemessage--warning\": this.valueState === ValueState.Warning,\n\t\t\t\t\"ui5-valuestatemessage--information\": this.valueState === ValueState.Information,\n\t\t\t},\n\t\t\tpopover: {\n\t\t\t\t\"ui5-select-popover-valuestate\": this.hasValueState,\n\t\t\t},\n\t\t};\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tresponsivePopoverHeader: {\n\t\t\t\t\"display\": this.options.length && this.respPopover?.offsetWidth === 0 ? \"none\" : \"inline-block\",\n\t\t\t\t\"width\": `${this.options.length ? this.respPopover?.offsetWidth : this.selectWidth || \"auto\"}px`,\n\t\t\t},\n\t\t\tresponsivePopover: {\n\t\t\t\t\"min-width\": `${this.selectWidth!}px`,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _valueStateMessageInputIcon() {\n\t\tconst iconPerValueState = {\n\t\t\tError: \"error\",\n\t\t\tWarning: \"alert\",\n\t\t\tSuccess: \"sys-enter-2\",\n\t\t\tInformation: \"information\",\n\t\t};\n\n\t\treturn this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : \"\";\n\t}\n\n\tget _isPhone() {\n\t\treturn isPhone();\n\t}\n}\n\nSelectMenu.define();\n\nexport default SelectMenu;\nexport type {\n\tSelectMenuOptionClick,\n\tSelectMenuChange,\n};\n"]}

package/dist/SelectMenuOption.d.ts

@@ -0,0 +1,107 @@
+import type { IOption } from "./Select.js";
+import CustomListItem from "./CustomListItem.js";
+import ListItemType from "./types/ListItemType.js";
+import type { AccessibilityAttributes } from "./ListItem.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The code>ui5-select-menu-option</code> component represents an option in the <code>ui5-select-menu</code>.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-select-menu-option</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/SelectMenuOption.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SelectMenuOption
+ * @extends sap.ui.webc.base.UI5Element
+ * @implements sap.ui.webc.main.ISelectMenuOption
+ * @tagname ui5-select-menu-option
+ * @public
+ * @since 1.17.0
+ */
+declare class SelectMenuOption extends CustomListItem implements IOption {
+    /**
+     * Defines the text, displayed inside the <code>ui5-select</code> input filed
+     * when the option gets selected.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.displayText
+     * @public
+     */
+    displayText: string;
+    /**
+     * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
+     * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
+     *
+     * @type {string}
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.value
+     * @public
+     */
+    value: string;
+    /**
+     * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
+     *
+     * @type {sap.ui.webc.main.types.ListItemType}
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.type
+     * @defaultvalue "Active"
+     * @public
+     * @deprecated
+     */
+    type: `${ListItemType}`;
+    /**
+     * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
+     *
+     * @type {object}
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.accessibilityAttributes
+     * @public
+     * @deprecated
+     */
+    accessibilityAttributes: AccessibilityAttributes;
+    /**
+     * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
+     *
+     * @public
+     * @type {boolean}
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.navigated
+     * @deprecated
+     */
+    navigated: boolean;
+    /**
+     * Defines the content of the component.
+     * <br><br>
+     *
+     * @type {Node[]}
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.default
+     * @slot
+     * @public
+     */
+    /**
+     * <b>Note:</b> The slot is inherited and not supported. If set, it won't take any effect.
+     *
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.deleteButton
+     * @slot
+     * @public
+     * @deprecated
+     */
+    get _accInfo(): {
+        ariaSelected: boolean;
+        role: string;
+        ariaExpanded?: boolean | undefined;
+        ariaLevel?: number | undefined;
+        ariaLabel: string;
+        ariaLabelRadioButton: string;
+        ariaSelectedText?: string | undefined;
+        ariaHaspopup?: "Dialog" | "Grid" | "ListBox" | "Menu" | "Tree" | undefined;
+        posinset?: number | undefined;
+        setsize?: number | undefined;
+        ariaChecked?: boolean | undefined;
+        listItemAriaLabel?: string | undefined;
+        ariaOwns?: string | undefined;
+    };
+}
+export default SelectMenuOption;

package/dist/SelectMenuOption.js

@@ -0,0 +1,88 @@
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+// Template
+import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js";
+// Styles
+import CustomListItem from "./CustomListItem.js";
+import ListItemType from "./types/ListItemType.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ * The code>ui5-select-menu-option</code> component represents an option in the <code>ui5-select-menu</code>.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-select-menu-option</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/SelectMenuOption.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webc.main.SelectMenuOption
+ * @extends sap.ui.webc.base.UI5Element
+ * @implements sap.ui.webc.main.ISelectMenuOption
+ * @tagname ui5-select-menu-option
+ * @public
+ * @since 1.17.0
+ */
+let SelectMenuOption = class SelectMenuOption extends CustomListItem {
+    /**
+     * Defines the content of the component.
+     * <br><br>
+     *
+     * @type {Node[]}
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.default
+     * @slot
+     * @public
+     */
+    /**
+     * <b>Note:</b> The slot is inherited and not supported. If set, it won't take any effect.
+     *
+     * @name sap.ui.webc.main.SelectMenuOption.prototype.deleteButton
+     * @slot
+     * @public
+     * @deprecated
+     */
+    get _accInfo() {
+        const accInfoSettings = {
+            ariaSelected: this.selected,
+        };
+        return { ...super._accInfo, ...accInfoSettings };
+    }
+};
+__decorate([
+    property()
+], SelectMenuOption.prototype, "displayText", void 0);
+__decorate([
+    property()
+], SelectMenuOption.prototype, "value", void 0);
+__decorate([
+    property({ type: ListItemType, defaultValue: ListItemType.Active })
+], SelectMenuOption.prototype, "type", void 0);
+__decorate([
+    property({ type: Object })
+], SelectMenuOption.prototype, "accessibilityAttributes", void 0);
+__decorate([
+    property({ type: Boolean })
+], SelectMenuOption.prototype, "navigated", void 0);
+SelectMenuOption = __decorate([
+    customElement({
+        tag: "ui5-select-menu-option",
+        renderer: litRender,
+        styles: CustomListItem.styles,
+        template: CustomListItemTemplate,
+        dependencies: [],
+    })
+], SelectMenuOption);
+SelectMenuOption.define();
+export default SelectMenuOption;
+//# sourceMappingURL=SelectMenuOption.js.map

package/dist/SelectMenuOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMenuOption.js","sourceRoot":"","sources":["../src/SelectMenuOption.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAI7E,WAAW;AACX,OAAO,sBAAsB,MAAM,qDAAqD,CAAC;AAEzF,SAAS;AACT,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAQH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;IAyD5C;;;;;;;;OAQG;IAEH;;;;;;;OAOG;IAEH,IAAI,QAAQ;QACX,MAAM,eAAe,GAAG;YACvB,YAAY,EAAE,IAAI,CAAC,QAAQ;SAC3B,CAAC;QACF,OAAO,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,CAAC;CACD,CAAA;AAxEA;IADC,QAAQ,EAAE;qDACU;AAWrB;IADC,QAAQ,EAAE;+CACI;AAYf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,MAAM,EAAE,CAAC;8CAC3C;AAWzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEACuB;AAWlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACR;AAvDf,gBAAgB;IAPrB,aAAa,CAAC;QACd,GAAG,EAAE,wBAAwB;QAC7B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,cAAc,CAAC,MAAM;QAC7B,QAAQ,EAAE,sBAAsB;QAChC,YAAY,EAAE,EAAE;KAChB,CAAC;GACI,gBAAgB,CAkFrB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\nimport type { IOption } from \"./Select.js\";\n\n// Template\nimport CustomListItemTemplate from \"./generated/templates/CustomListItemTemplate.lit.js\";\n\n// Styles\nimport CustomListItem from \"./CustomListItem.js\";\nimport ListItemType from \"./types/ListItemType.js\";\nimport type { AccessibilityAttributes } from \"./ListItem.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The code>ui5-select-menu-option</code> component represents an option in the <code>ui5-select-menu</code>.\n *\n * <h3>Usage</h3>\n *\n * For the <code>ui5-select-menu-option</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import @ui5/webcomponents/dist/SelectMenuOption.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.SelectMenuOption\n * @extends sap.ui.webc.base.UI5Element\n * @implements sap.ui.webc.main.ISelectMenuOption\n * @tagname ui5-select-menu-option\n * @public\n * @since 1.17.0\n */\n@customElement({\n\ttag: \"ui5-select-menu-option\",\n\trenderer: litRender,\n\tstyles: CustomListItem.styles,\n\ttemplate: CustomListItemTemplate,\n\tdependencies: [],\n})\nclass SelectMenuOption extends CustomListItem implements IOption {\n\t/**\n\t * Defines the text, displayed inside the <code>ui5-select</code> input filed\n\t * when the option gets selected.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.SelectMenuOption.prototype.displayText\n\t * @public\n\t */\n\t@property()\n\tdisplayText!: string;\n\n\t/**\n\t * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.\n\t * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.\n\t *\n\t * @type {string}\n\t * @name sap.ui.webc.main.SelectMenuOption.prototype.value\n\t * @public\n\t */\n\t@property()\n\tvalue!: string;\n\n\t/**\n\t * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.\n\t *\n\t * @type {sap.ui.webc.main.types.ListItemType}\n\t * @name sap.ui.webc.main.SelectMenuOption.prototype.type\n\t * @defaultvalue \"Active\"\n\t * @public\n\t * @deprecated\n\t */\n\t@property({ type: ListItemType, defaultValue: ListItemType.Active })\n\ttype!: `${ListItemType}`;\n\n\t/**\n\t * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.\n\t *\n\t * @type {object}\n\t * @name sap.ui.webc.main.SelectMenuOption.prototype.accessibilityAttributes\n\t * @public\n\t * @deprecated\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes!: AccessibilityAttributes;\n\n\t/**\n\t * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.\n\t *\n\t * @public\n\t * @type {boolean}\n\t * @name sap.ui.webc.main.SelectMenuOption.prototype.navigated\n\t * @deprecated\n\t */\n\t@property({ type: Boolean })\n\tnavigated!: boolean;\n\n\t/**\n\t * Defines the content of the component.\n\t * <br><br>\n\t *\n\t * @type {Node[]}\n\t * @name sap.ui.webc.main.SelectMenuOption.prototype.default\n\t * @slot\n\t * @public\n\t */\n\n\t/**\n\t * <b>Note:</b> The slot is inherited and not supported. If set, it won't take any effect.\n\t *\n\t * @name sap.ui.webc.main.SelectMenuOption.prototype.deleteButton\n\t * @slot\n\t * @public\n\t * @deprecated\n\t */\n\n\tget _accInfo() {\n\t\tconst accInfoSettings = {\n\t\t\tariaSelected: this.selected,\n\t\t};\n\t\treturn { ...super._accInfo, ...accInfoSettings };\n\t}\n}\n\nSelectMenuOption.define();\n\nexport default SelectMenuOption;\n"]}

package/dist/StandardListItem.d.ts

@@ -20,6 +20,12 @@ import WrappingType from "./types/WrappingType.js";
  * <li>description - Used to style the description of the list item</li>
  * <li>additional-text - Used to style the additionalText of the list item</li>
  * <li>icon - Used to style the icon of the list item</li>
+ * <li>native-li - Used to style the main li tag of the list item</li>
+ * <li>content - Used to style the content area of the list item</li>
+ * <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
+ * <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
+ * <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
+ * <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
  * </ul>
  *
  * @constructor

package/dist/StandardListItem.js

@@ -31,6 +31,12 @@ import StandardListItemTemplate from "./generated/templates/StandardListItemTemp
  * <li>description - Used to style the description of the list item</li>
  * <li>additional-text - Used to style the additionalText of the list item</li>
  * <li>icon - Used to style the icon of the list item</li>
+ * <li>native-li - Used to style the main li tag of the list item</li>
+ * <li>content - Used to style the content area of the list item</li>
+ * <li>detail-button - Used to style the button rendered when the list item is of type detail</li>
+ * <li>delete-button - Used to style the button rendered when the list item is in delete mode</li>
+ * <li>radio - Used to style the radio button rendered when the list item is in single selection mode</li>
+ * <li>checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode</li>
  * </ul>
  *
  * @constructor