@ui5/webcomponents 1.21.0 → 1.22.0-rc.0

package/dist/SelectMenu.d.ts

@@ -3,6 +3,7 @@ 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";
+import { IOption } from "./Interfaces.js";
 type SelectMenuOptionClick = {
     option: SelectMenuOption;
     optionIndex: number;
@@ -34,10 +35,7 @@ type SelectMenuChange = {
  * <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
+ * @extends UI5Element
  * @public
  * @since 1.17.0
  */
@@ -46,17 +44,12 @@ declare class SelectMenu extends UI5Element {
     /**
      * 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>;
+    options: Array<IOption>;
     /**
      * Defines the width of the component.
      *
-     * @type { number }
-     * @name sap.ui.webc.main.SelectMenu.prototype.selectWidth
      * @private
      */
     selectWidth?: number;

package/dist/SelectMenu.js

@@ -23,6 +23,7 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm
 import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import Button from "./Button.js";
+import "./Interfaces.js";
 /**
  * @class
  *
@@ -46,10 +47,7 @@ import Button from "./Button.js";
  * <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
+ * @extends UI5Element
  * @public
  * @since 1.17.0
  */

package/dist/SelectMenu.js.map

@@ -1 +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({ type: String, noAttribute: true })\n\tvalue!: string;\n\n\t@property({ type: String, noAttribute: true })\n\tselectId?: 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) {\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\tvalueStatePopover: {\n\t\t\t\t\"width\": `${this.selectWidth!}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"]}
+{"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\";\nimport { IOption } from \"./Interfaces.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 * @extends UI5Element\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 * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: true,\n\t})\n\toptions!: Array<IOption>;\n\n\t/**\n\t * Defines the width of the component.\n\t *\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({ type: String, noAttribute: true })\n\tvalue!: string;\n\n\t@property({ type: String, noAttribute: true })\n\tselectId?: 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) {\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\tvalueStatePopover: {\n\t\t\t\t\"width\": `${this.selectWidth!}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

@@ -1,7 +1,7 @@
-import type { IOption } from "./Select.js";
 import CustomListItem from "./CustomListItem.js";
 import ListItemType from "./types/ListItemType.js";
 import type { AccessibilityAttributes } from "./ListItem.js";
+import { IButton, IOption } from "./Interfaces.js";
 /**
  * @class
  *
@@ -16,21 +16,18 @@ import type { AccessibilityAttributes } from "./ListItem.js";
  * <code>import @ui5/webcomponents/dist/SelectMenuOption.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.SelectMenuOption
- * @extends sap.ui.webc.main.CustomListItem
- * @implements sap.ui.webc.main.ISelectMenuOption
- * @tagname ui5-select-menu-option
+ * @extends CustomListItem
+ * @implements {IOption}
  * @public
  * @since 1.17.0
+ * @slot {Array<Node>} default  Defines the content of the component.
  */
 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
+     * @default ""
      * @public
      */
     displayText: string;
@@ -38,9 +35,7 @@ declare class SelectMenuOption extends CustomListItem implements IOption {
      * Defines whether the component is in disabled state.
      * <br><br>
      * <b>Note:</b> A disabled component is hidden.
-     * @type {boolean}
-     * @defaultvalue false
-     * @name sap.ui.webc.main.SelectMenuOption.prototype.disabled
+     * @default false
      * @public
      */
     disabled: boolean;
@@ -48,17 +43,14 @@ declare class SelectMenuOption extends CustomListItem implements IOption {
      * 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
+     * @default ""
      * @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"
+     * @default "Active"
      * @public
      * @deprecated
      */
@@ -66,8 +58,7 @@ declare class SelectMenuOption extends CustomListItem implements IOption {
     /**
      * <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
+     * @default {}
      * @public
      * @deprecated
      */
@@ -75,30 +66,19 @@ declare class SelectMenuOption extends CustomListItem implements IOption {
     /**
      * <b>Note:</b> The property is inherited and not supported. If set, it won't take any effect.
      *
+     * @default false
      * @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
-     * @type {Node[]}
-     * @slot
      * @public
      * @deprecated
      */
+    deleteButton: Array<IButton>;
+    get stableDomRef(): string;
     get _accInfo(): {
         ariaSelected: boolean;
         role: string;

package/dist/SelectMenuOption.js

@@ -7,11 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 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";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 // Template
 import CustomListItemTemplate from "./generated/templates/CustomListItemTemplate.lit.js";
 // Styles
 import CustomListItem from "./CustomListItem.js";
 import ListItemType from "./types/ListItemType.js";
+import "./Interfaces.js";
 /**
  * @class
  *
@@ -26,33 +28,16 @@ import ListItemType from "./types/ListItemType.js";
  * <code>import @ui5/webcomponents/dist/SelectMenuOption.js";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.SelectMenuOption
- * @extends sap.ui.webc.main.CustomListItem
- * @implements sap.ui.webc.main.ISelectMenuOption
- * @tagname ui5-select-menu-option
+ * @extends CustomListItem
+ * @implements {IOption}
  * @public
  * @since 1.17.0
+ * @slot {Array<Node>} default  Defines the content of the component.
  */
 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
-     * @type {Node[]}
-     * @slot
-     * @public
-     * @deprecated
-     */
+    get stableDomRef() {
+        return "";
+    }
     get _accInfo() {
         const accInfoSettings = {
             ariaSelected: this.selected,
@@ -78,6 +63,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], SelectMenuOption.prototype, "navigated", void 0);
+__decorate([
+    slot()
+], SelectMenuOption.prototype, "deleteButton", void 0);
 SelectMenuOption = __decorate([
     customElement({
         tag: "ui5-select-menu-option",

package/dist/SelectMenuOption.js.map

@@ -1 +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;IAqE5C;;;;;;;;OAQG;IAEH;;;;;;;;OAQG;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;AArFA;IADC,QAAQ,EAAE;qDACU;AAYrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACT;AAWnB;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;AAnEf,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,CA+FrB;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.main.CustomListItem\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 whether the component is in disabled state.\n\t * <br><br>\n\t * <b>Note:</b> A disabled component is hidden.\n\t * @type {boolean}\n\t * @defaultvalue false\n\t * @name sap.ui.webc.main.SelectMenuOption.prototype.disabled\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\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     * @type {Node[]}\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"]}
+{"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;AAC7E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,WAAW;AACX,OAAO,sBAAsB,MAAM,qDAAqD,CAAC;AAEzF,SAAS;AACT,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAEnD,OAAiC,iBAAiB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;GAmBG;AAQH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;IAsE5C,IAAI,YAAY;QACf,OAAO,EAAE,CAAC;IACX,CAAC;IAED,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;AAvEA;IADC,QAAQ,EAAE;qDACU;AAUrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACT;AAUnB;IADC,QAAQ,EAAE;+CACI;AAUf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,CAAC,MAAM,EAAE,CAAC;8CAC3C;AAUzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEACuB;AAUlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACR;AASpB;IADC,IAAI,EAAE;sDACuB;AApEzB,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,CAgFrB;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\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.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\";\nimport { IButton, IOption } from \"./Interfaces.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 * @extends CustomListItem\n * @implements {IOption}\n * @public\n * @since 1.17.0\n * @slot {Array<Node>} default  Defines the content of the component.\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 * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tdisplayText!: string;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t * <br><br>\n\t * <b>Note:</b> A disabled component is hidden.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\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 * @default \"\"\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 * @default \"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 * @default {}\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 * @default false\n\t * @public\n\t * @deprecated\n\t */\n\t@property({ type: Boolean })\n\tnavigated!: boolean;\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 * @public\n\t * @deprecated\n\t */\n\t@slot()\n\tdeleteButton!: Array<IButton>;\n\n\tget stableDomRef() {\n\t\treturn \"\";\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/Slider.d.ts

@@ -31,17 +31,6 @@ import SliderBase from "./SliderBase.js";
  * <li>Click/tap on the range bar to move the handle to that location.</li>
  * </ul>
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-slider</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-slider</code>.</li>
- * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.</li>
- * <li>handle - Used to style the handle of the <code>ui5-slider</code>.</li>
- * </ul>
- *
  * <h3>Keyboard Handling</h3>
  *
  * <ul>
@@ -63,20 +52,18 @@ import SliderBase from "./SliderBase.js";
  * <code>import "@ui5/webcomponents/dist/Slider";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Slider
- * @extends sap.ui.webc.main.SliderBase
- * @tagname ui5-slider
+ * @extends SliderBase
  * @since 1.0.0-rc.11
  * @public
+ * @csspart progress-container - Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the <code>ui5-slider</code>.
+ * @csspart progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.
+ * @csspart handle - Used to style the handle of the <code>ui5-slider</code>.
  */
 declare class Slider extends SliderBase {
     /**
      * Current value of the slider
      *
-     * @type {sap.ui.webc.base.types.Float}
-     * @name sap.ui.webc.main.Slider.prototype.value
-     * @defaultvalue 0
+     * @default 0
      * @formEvents change input
      * @formProperty
      * @public

package/dist/Slider.js

@@ -47,17 +47,6 @@ import { SLIDER_ARIA_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
  * <li>Click/tap on the range bar to move the handle to that location.</li>
  * </ul>
  *
- * <h3>CSS Shadow Parts</h3>
- *
- * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
- * <br>
- * The <code>ui5-slider</code> exposes the following CSS Shadow Parts:
- * <ul>
- * <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-slider</code>.</li>
- * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.</li>
- * <li>handle - Used to style the handle of the <code>ui5-slider</code>.</li>
- * </ul>
- *
  * <h3>Keyboard Handling</h3>
  *
  * <ul>
@@ -79,12 +68,12 @@ import { SLIDER_ARIA_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
  * <code>import "@ui5/webcomponents/dist/Slider";</code>
  *
  * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.Slider
- * @extends sap.ui.webc.main.SliderBase
- * @tagname ui5-slider
+ * @extends SliderBase
  * @since 1.0.0-rc.11
  * @public
+ * @csspart progress-container - Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the <code>ui5-slider</code>.
+ * @csspart progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.
+ * @csspart handle - Used to style the handle of the <code>ui5-slider</code>.
  */
 let Slider = Slider_1 = class Slider extends SliderBase {
     constructor() {

package/dist/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../src/Slider.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 Float from \"@ui5/webcomponents-base/dist/types/Float.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport SliderBase from \"./SliderBase.js\";\nimport Icon from \"./Icon.js\";\n\n// Template\nimport SliderTemplate from \"./generated/templates/SliderTemplate.lit.js\";\n\n// Texts\nimport {\n\tSLIDER_ARIA_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The Slider component represents a numerical range and a handle (grip).\n * The purpose of the component is to enable visual selection of a value in\n * a continuous numerical range by moving an adjustable handle.\n *\n * <h3>Structure</h3>\n * The most important properties of the Slider are:\n * <ul>\n * <li>min - The minimum value of the slider range.</li>\n * <li>max - The maximum value of the slider range.</li>\n * <li>value - The current value of the slider range.</li>\n * <li>step - Determines the increments in which the slider will move.</li>\n * <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li>\n * <li>showTickmarks - Displays a visual divider between the step values.</li>\n * <li>labelInterval - Labels some or all of the tickmarks with their values.</li>\n * </ul>\n *\n * <h3>Usage</h3>\n * The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n *\n * <h3>Responsive Behavior</h3>\n * The <code>ui5-slider</code> component adjusts to the size of its parent container by recalculating and\n * resizing the width of the control. You can move the slider handle in several different ways:\n * <ul>\n * <li>Drag and drop the handle to the desired value.</li>\n * <li>Click/tap on the range bar to move the handle to that location.</li>\n * </ul>\n *\n * <h3>CSS Shadow Parts</h3>\n *\n * <ui5-link target=\"_blank\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/::part\">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.\n * <br>\n * The <code>ui5-slider</code> exposes the following CSS Shadow Parts:\n * <ul>\n * <li>progress-container - Used to style the progress container(the horizontal bar which visually represents the range between the minimum and maximum value) of the <code>ui5-slider</code>.</li>\n * <li>progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.</li>\n * <li>handle - Used to style the handle of the <code>ui5-slider</code>.</li>\n * </ul>\n *\n * <h3>Keyboard Handling</h3>\n *\n * <ul>\n * <li><code>Left or Down Arrow</code> - Moves the handle one step to the left, effectively decreasing the component's value by <code>step</code> amount;</li>\n * <li><code>Right or Up Arrow</code> - Moves the handle one step to the right, effectively increasing the component's value by <code>step</code> amount;</li>\n * <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;</li>\n * <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;</li>\n * <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li>\n * <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li>\n * <li><code>Home</code> - Moves the handle to the beginning of the range;</li>\n * <li><code>End</code> - Moves the handle to the end of the range;</li>\n * <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code>;</li>\n * <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code>;</li>\n * <li><code>Escape</code> - Resets the value property after interaction, to the position prior the component's focusing;</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Slider\";</code>\n *\n * @constructor\n * @author SAP SE\n * @alias sap.ui.webc.main.Slider\n * @extends sap.ui.webc.main.SliderBase\n * @tagname ui5-slider\n * @since 1.0.0-rc.11\n * @public\n */\n@customElement({\n\ttag: \"ui5-slider\",\n\tlanguageAware: true,\n\ttemplate: SliderTemplate,\n\tdependencies: [Icon],\n})\nclass Slider extends SliderBase {\n\t/**\n\t * Current value of the slider\n\t *\n\t * @type {sap.ui.webc.base.types.Float}\n\t * @name sap.ui.webc.main.Slider.prototype.value\n\t * @defaultvalue 0\n\t * @formEvents change input\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ validator: Float, defaultValue: 0 })\n\tvalue!: number;\n\n\t_valueInitial?: number;\n\t_valueOnInteractionStart?: number;\n\t_progressPercentage = 0;\n\t_handlePositionFromStart = 0;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._stateStorage.value = undefined;\n\t}\n\n\t/**\n\t *\n\t * Check if the previously saved state is outdated. That would mean\n\t * either it is the initial rendering or that a property has been changed\n\t * programmatically - because the previous state is always updated in\n\t * the interaction handlers.\n\t *\n\t * Normalize current properties, update the previously stored state.\n\t * Update the visual UI representation of the Slider.\n\t *\n\t */\n\tonBeforeRendering() {\n\t\tif (!this.isCurrentStateOutdated()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.notResized = true;\n\t\tthis.syncUIAndState();\n\t\tthis._updateHandleAndProgress(this.value);\n\t}\n\n\tsyncUIAndState() {\n\t\t// Validate step and update the stored state for the step property.\n\t\tif (this.isPropertyUpdated(\"step\")) {\n\t\t\tthis._validateStep(this.step);\n\t\t\tthis.storePropertyState(\"step\");\n\t\t}\n\n\t\t// Recalculate the tickmarks and labels and update the stored state.\n\t\tif (this.isPropertyUpdated(\"min\", \"max\", \"value\")) {\n\t\t\tthis.storePropertyState(\"min\", \"max\");\n\n\t\t\t// Here the value props are changed programmatically (not by user interaction)\n\t\t\t// and it won't be \"stepified\" (rounded to the nearest step). 'Clip' them within\n\t\t\t// min and max bounderies and update the previous state reference.\n\t\t\tthis.value = SliderBase.clipValue(this.value, this._effectiveMin, this._effectiveMax);\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t\tthis.storePropertyState(\"value\");\n\t\t}\n\n\t\t// Labels must be updated if any of the min/max/step/labelInterval props are changed\n\t\tif (this.labelInterval && this.showTickmarks) {\n\t\t\tthis._createLabels();\n\t\t}\n\n\t\t// Update the stored state for the labelInterval, if changed\n\t\tif (this.isPropertyUpdated(\"labelInterval\")) {\n\t\t\tthis.storePropertyState(\"labelInterval\");\n\t\t}\n\t}\n\n\t/**\n\t * Called when the user starts interacting with the slider\n\t *\n\t * @private\n\t */\n\t_onmousedown(e: TouchEvent | MouseEvent) {\n\t\t// If step is 0 no interaction is available because there is no constant\n\t\t// (equal for all user environments) quantitative representation of the value\n\t\tif (this.disabled || this.step === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newValue = this.handleDownBase(e);\n\t\tthis._valueOnInteractionStart = this.value;\n\n\t\t// Set initial value if one is not set previously on focus in.\n\t\t// It will be restored if ESC key is pressed.\n\t\tif (this._valueInitial === undefined) {\n\t\t\tthis._valueInitial = this.value;\n\t\t}\n\n\t\t// Do not yet update the Slider if press is over a handle. It will be updated if the user drags the mouse.\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tif (!this._isHandlePressed(ctor.getPageXValueFromEvent(e))) {\n\t\t\tthis._updateHandleAndProgress(newValue);\n\t\t\tthis.value = newValue;\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\t// Set initial value if one is not set previously on focus in.\n\t\t// It will be restored if ESC key is pressed.\n\t\tif (this._valueInitial === undefined) {\n\t\t\tthis._valueInitial = this.value;\n\t\t}\n\n\t\tif (this.showTooltip) {\n\t\t\tthis._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.VISIBLE;\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\t// Prevent focusout when the focus is getting set within the slider internal\n\t\t// element (on the handle), before the Slider' customElement itself is finished focusing\n\t\tif (this._isFocusing()) {\n\t\t\tthis._preventFocusOut();\n\t\t\treturn;\n\t\t}\n\n\t\t// Reset focus state and the stored Slider's initial\n\t\t// value that was saved when it was first focused in\n\t\tthis._valueInitial = undefined;\n\n\t\tif (this.showTooltip) {\n\t\t\tthis._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;\n\t\t}\n\t}\n\n\t/**\n\t * Called when the user moves the slider\n\t *\n\t * @private\n\t */\n\t_handleMove(e: TouchEvent | MouseEvent) {\n\t\te.preventDefault();\n\n\t\t// If step is 0 no interaction is available because there is no constant\n\t\t// (equal for all user environments) quantitative representation of the value\n\t\tif (this.disabled || this._effectiveStep === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst newValue = ctor.getValueFromInteraction(e, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);\n\n\t\tthis._updateHandleAndProgress(newValue);\n\t\tthis.value = newValue;\n\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t}\n\n\t/** Called when the user finish interacting with the slider\n\t *\n\t * @private\n\t */\n\t_handleUp() {\n\t\tif (this._valueOnInteractionStart !== this.value) {\n\t\t\tthis.fireEvent(\"change\");\n\t\t}\n\n\t\tthis.handleUpBase();\n\t\tthis._valueOnInteractionStart = undefined;\n\t}\n\n\t/** Determines if the press is over the handle\n\t *\n\t * @private\n\t */\n\t_isHandlePressed(clientX: number) {\n\t\tconst sliderHandleDomRect = this._sliderHandle.getBoundingClientRect();\n\t\treturn clientX >= sliderHandleDomRect.left && clientX <= sliderHandleDomRect.right;\n\t}\n\n\t/** Updates the UI representation of the progress bar and handle position\n\t *\n\t * @private\n\t */\n\t_updateHandleAndProgress(newValue: number) {\n\t\tconst max = this._effectiveMax;\n\t\tconst min = this._effectiveMin;\n\n\t\t// The progress (completed) percentage of the slider.\n\t\tthis._progressPercentage = (newValue - min) / (max - min);\n\t\t// How many pixels from the left end of the slider will be the placed the affected  by the user action handle\n\t\tthis._handlePositionFromStart = this._progressPercentage * 100;\n\t}\n\n\t_handleActionKeyPress(e: KeyboardEvent) {\n\t\tconst min = this._effectiveMin;\n\t\tconst max = this._effectiveMax;\n\t\tconst currentValue = this.value;\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst newValue = isEscape(e) ? this._valueInitial : ctor.clipValue(this._handleActionKeyPressBase(e, \"value\") + currentValue, min, max);\n\n\t\tif (newValue !== currentValue) {\n\t\t\tthis._updateHandleAndProgress(newValue!);\n\t\t\tthis.value = newValue!;\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t}\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tprogress: {\n\t\t\t\t\"transform\": `scaleX(${this._progressPercentage})`,\n\t\t\t\t\"transform-origin\": `${this.directionStart} top`,\n\t\t\t},\n\t\t\thandle: {\n\t\t\t\t[this.directionStart]: `${this._handlePositionFromStart}%`,\n\t\t\t},\n\t\t\tlabel: {\n\t\t\t\t\"width\": `${this._labelWidth}%`,\n\t\t\t},\n\t\t\tlabelContainer: {\n\t\t\t\t\"width\": `100%`,\n\t\t\t\t[this.directionStart]: `-${this._labelWidth / 2}%`,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\t\"visibility\": `${this._tooltipVisibility}`,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _sliderHandle() {\n\t\treturn this.shadowRoot!.querySelector(\".ui5-slider-handle\")!;\n\t}\n\n\tget tooltipValue() {\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);\n\t\treturn this.value.toFixed(stepPrecision);\n\t}\n\n\tget _ariaDisabled() {\n\t\treturn this.disabled || undefined;\n\t}\n\n\tget _ariaLabelledByText() {\n\t\treturn Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);\n\t}\n\n\tstatic async onDefine() {\n\t\tSlider.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tget tickmarksObject() {\n\t\tconst count = this._tickmarksCount;\n\t\tconst arr = [];\n\n\t\tif (this._hiddenTickmarks) {\n\t\t\treturn [true, false];\n\t\t}\n\n\t\tfor (let i = 0; i <= count; i++) {\n\t\t\tarr.push(this._effectiveMin + (i * this.step) <= this.value);\n\t\t}\n\n\t\treturn arr;\n\t}\n}\n\nSlider.define();\n\nexport default Slider;\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../src/Slider.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 Float from \"@ui5/webcomponents-base/dist/types/Float.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport SliderBase from \"./SliderBase.js\";\nimport Icon from \"./Icon.js\";\n\n// Template\nimport SliderTemplate from \"./generated/templates/SliderTemplate.lit.js\";\n\n// Texts\nimport {\n\tSLIDER_ARIA_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n * The Slider component represents a numerical range and a handle (grip).\n * The purpose of the component is to enable visual selection of a value in\n * a continuous numerical range by moving an adjustable handle.\n *\n * <h3>Structure</h3>\n * The most important properties of the Slider are:\n * <ul>\n * <li>min - The minimum value of the slider range.</li>\n * <li>max - The maximum value of the slider range.</li>\n * <li>value - The current value of the slider range.</li>\n * <li>step - Determines the increments in which the slider will move.</li>\n * <li>showTooltip - Determines if a tooltip should be displayed above the handle.</li>\n * <li>showTickmarks - Displays a visual divider between the step values.</li>\n * <li>labelInterval - Labels some or all of the tickmarks with their values.</li>\n * </ul>\n *\n * <h3>Usage</h3>\n * The most common use case is to select values on a continuous numerical scale (e.g. temperature, volume, etc. ).\n *\n * <h3>Responsive Behavior</h3>\n * The <code>ui5-slider</code> component adjusts to the size of its parent container by recalculating and\n * resizing the width of the control. You can move the slider handle in several different ways:\n * <ul>\n * <li>Drag and drop the handle to the desired value.</li>\n * <li>Click/tap on the range bar to move the handle to that location.</li>\n * </ul>\n *\n * <h3>Keyboard Handling</h3>\n *\n * <ul>\n * <li><code>Left or Down Arrow</code> - Moves the handle one step to the left, effectively decreasing the component's value by <code>step</code> amount;</li>\n * <li><code>Right or Up Arrow</code> - Moves the handle one step to the right, effectively increasing the component's value by <code>step</code> amount;</li>\n * <li><code>Left or Down Arrow + Ctrl/Cmd</code> - Moves the handle to the left with step equal to 1/10th of the entire range, effectively decreasing the component's value by 1/10th of the range;</li>\n * <li><code>Right or Up Arrow + Ctrl/Cmd</code> - Moves the handle to the right with step equal to 1/10th of the entire range, effectively increasing the component's value by 1/10th of the range;</li>\n * <li><code>Plus</code> - Same as <code>Right or Up Arrow</code>;</li>\n * <li><code>Minus</code> - Same as <code>Left or Down Arrow</code>;</li>\n * <li><code>Home</code> - Moves the handle to the beginning of the range;</li>\n * <li><code>End</code> - Moves the handle to the end of the range;</li>\n * <li><code>Page Up</code> - Same as <code>Right or Up + Ctrl/Cmd</code>;</li>\n * <li><code>Page Down</code> - Same as <code>Left or Down + Ctrl/Cmd</code>;</li>\n * <li><code>Escape</code> - Resets the value property after interaction, to the position prior the component's focusing;</li>\n * </ul>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/Slider\";</code>\n *\n * @constructor\n * @extends SliderBase\n * @since 1.0.0-rc.11\n * @public\n * @csspart progress-container - Used to style the progress container, the horizontal bar that visually represents the range between the minimum and maximum values, of the <code>ui5-slider</code>.\n * @csspart progress-bar - Used to style the progress bar, which shows the progress of the <code>ui5-slider</code>.\n * @csspart handle - Used to style the handle of the <code>ui5-slider</code>.\n */\n@customElement({\n\ttag: \"ui5-slider\",\n\tlanguageAware: true,\n\ttemplate: SliderTemplate,\n\tdependencies: [Icon],\n})\nclass Slider extends SliderBase {\n\t/**\n\t * Current value of the slider\n\t *\n\t * @default 0\n\t * @formEvents change input\n\t * @formProperty\n\t * @public\n\t */\n\t@property({ validator: Float, defaultValue: 0 })\n\tvalue!: number;\n\n\t_valueInitial?: number;\n\t_valueOnInteractionStart?: number;\n\t_progressPercentage = 0;\n\t_handlePositionFromStart = 0;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._stateStorage.value = undefined;\n\t}\n\n\t/**\n\t *\n\t * Check if the previously saved state is outdated. That would mean\n\t * either it is the initial rendering or that a property has been changed\n\t * programmatically - because the previous state is always updated in\n\t * the interaction handlers.\n\t *\n\t * Normalize current properties, update the previously stored state.\n\t * Update the visual UI representation of the Slider.\n\t *\n\t */\n\tonBeforeRendering() {\n\t\tif (!this.isCurrentStateOutdated()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.notResized = true;\n\t\tthis.syncUIAndState();\n\t\tthis._updateHandleAndProgress(this.value);\n\t}\n\n\tsyncUIAndState() {\n\t\t// Validate step and update the stored state for the step property.\n\t\tif (this.isPropertyUpdated(\"step\")) {\n\t\t\tthis._validateStep(this.step);\n\t\t\tthis.storePropertyState(\"step\");\n\t\t}\n\n\t\t// Recalculate the tickmarks and labels and update the stored state.\n\t\tif (this.isPropertyUpdated(\"min\", \"max\", \"value\")) {\n\t\t\tthis.storePropertyState(\"min\", \"max\");\n\n\t\t\t// Here the value props are changed programmatically (not by user interaction)\n\t\t\t// and it won't be \"stepified\" (rounded to the nearest step). 'Clip' them within\n\t\t\t// min and max bounderies and update the previous state reference.\n\t\t\tthis.value = SliderBase.clipValue(this.value, this._effectiveMin, this._effectiveMax);\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t\tthis.storePropertyState(\"value\");\n\t\t}\n\n\t\t// Labels must be updated if any of the min/max/step/labelInterval props are changed\n\t\tif (this.labelInterval && this.showTickmarks) {\n\t\t\tthis._createLabels();\n\t\t}\n\n\t\t// Update the stored state for the labelInterval, if changed\n\t\tif (this.isPropertyUpdated(\"labelInterval\")) {\n\t\t\tthis.storePropertyState(\"labelInterval\");\n\t\t}\n\t}\n\n\t/**\n\t * Called when the user starts interacting with the slider\n\t *\n\t * @private\n\t */\n\t_onmousedown(e: TouchEvent | MouseEvent) {\n\t\t// If step is 0 no interaction is available because there is no constant\n\t\t// (equal for all user environments) quantitative representation of the value\n\t\tif (this.disabled || this.step === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newValue = this.handleDownBase(e);\n\t\tthis._valueOnInteractionStart = this.value;\n\n\t\t// Set initial value if one is not set previously on focus in.\n\t\t// It will be restored if ESC key is pressed.\n\t\tif (this._valueInitial === undefined) {\n\t\t\tthis._valueInitial = this.value;\n\t\t}\n\n\t\t// Do not yet update the Slider if press is over a handle. It will be updated if the user drags the mouse.\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tif (!this._isHandlePressed(ctor.getPageXValueFromEvent(e))) {\n\t\t\tthis._updateHandleAndProgress(newValue);\n\t\t\tthis.value = newValue;\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\t// Set initial value if one is not set previously on focus in.\n\t\t// It will be restored if ESC key is pressed.\n\t\tif (this._valueInitial === undefined) {\n\t\t\tthis._valueInitial = this.value;\n\t\t}\n\n\t\tif (this.showTooltip) {\n\t\t\tthis._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.VISIBLE;\n\t\t}\n\t}\n\n\t_onfocusout() {\n\t\t// Prevent focusout when the focus is getting set within the slider internal\n\t\t// element (on the handle), before the Slider' customElement itself is finished focusing\n\t\tif (this._isFocusing()) {\n\t\t\tthis._preventFocusOut();\n\t\t\treturn;\n\t\t}\n\n\t\t// Reset focus state and the stored Slider's initial\n\t\t// value that was saved when it was first focused in\n\t\tthis._valueInitial = undefined;\n\n\t\tif (this.showTooltip) {\n\t\t\tthis._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;\n\t\t}\n\t}\n\n\t/**\n\t * Called when the user moves the slider\n\t *\n\t * @private\n\t */\n\t_handleMove(e: TouchEvent | MouseEvent) {\n\t\te.preventDefault();\n\n\t\t// If step is 0 no interaction is available because there is no constant\n\t\t// (equal for all user environments) quantitative representation of the value\n\t\tif (this.disabled || this._effectiveStep === 0) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst newValue = ctor.getValueFromInteraction(e, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);\n\n\t\tthis._updateHandleAndProgress(newValue);\n\t\tthis.value = newValue;\n\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t}\n\n\t/** Called when the user finish interacting with the slider\n\t *\n\t * @private\n\t */\n\t_handleUp() {\n\t\tif (this._valueOnInteractionStart !== this.value) {\n\t\t\tthis.fireEvent(\"change\");\n\t\t}\n\n\t\tthis.handleUpBase();\n\t\tthis._valueOnInteractionStart = undefined;\n\t}\n\n\t/** Determines if the press is over the handle\n\t *\n\t * @private\n\t */\n\t_isHandlePressed(clientX: number) {\n\t\tconst sliderHandleDomRect = this._sliderHandle.getBoundingClientRect();\n\t\treturn clientX >= sliderHandleDomRect.left && clientX <= sliderHandleDomRect.right;\n\t}\n\n\t/** Updates the UI representation of the progress bar and handle position\n\t *\n\t * @private\n\t */\n\t_updateHandleAndProgress(newValue: number) {\n\t\tconst max = this._effectiveMax;\n\t\tconst min = this._effectiveMin;\n\n\t\t// The progress (completed) percentage of the slider.\n\t\tthis._progressPercentage = (newValue - min) / (max - min);\n\t\t// How many pixels from the left end of the slider will be the placed the affected  by the user action handle\n\t\tthis._handlePositionFromStart = this._progressPercentage * 100;\n\t}\n\n\t_handleActionKeyPress(e: KeyboardEvent) {\n\t\tconst min = this._effectiveMin;\n\t\tconst max = this._effectiveMax;\n\t\tconst currentValue = this.value;\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst newValue = isEscape(e) ? this._valueInitial : ctor.clipValue(this._handleActionKeyPressBase(e, \"value\") + currentValue, min, max);\n\n\t\tif (newValue !== currentValue) {\n\t\t\tthis._updateHandleAndProgress(newValue!);\n\t\t\tthis.value = newValue!;\n\t\t\tthis.updateStateStorageAndFireInputEvent(\"value\");\n\t\t}\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tprogress: {\n\t\t\t\t\"transform\": `scaleX(${this._progressPercentage})`,\n\t\t\t\t\"transform-origin\": `${this.directionStart} top`,\n\t\t\t},\n\t\t\thandle: {\n\t\t\t\t[this.directionStart]: `${this._handlePositionFromStart}%`,\n\t\t\t},\n\t\t\tlabel: {\n\t\t\t\t\"width\": `${this._labelWidth}%`,\n\t\t\t},\n\t\t\tlabelContainer: {\n\t\t\t\t\"width\": `100%`,\n\t\t\t\t[this.directionStart]: `-${this._labelWidth / 2}%`,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\t\"visibility\": `${this._tooltipVisibility}`,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _sliderHandle() {\n\t\treturn this.shadowRoot!.querySelector(\".ui5-slider-handle\")!;\n\t}\n\n\tget tooltipValue() {\n\t\tconst ctor = this.constructor as typeof Slider;\n\t\tconst stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);\n\t\treturn this.value.toFixed(stepPrecision);\n\t}\n\n\tget _ariaDisabled() {\n\t\treturn this.disabled || undefined;\n\t}\n\n\tget _ariaLabelledByText() {\n\t\treturn Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);\n\t}\n\n\tstatic async onDefine() {\n\t\tSlider.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tget tickmarksObject() {\n\t\tconst count = this._tickmarksCount;\n\t\tconst arr = [];\n\n\t\tif (this._hiddenTickmarks) {\n\t\t\treturn [true, false];\n\t\t}\n\n\t\tfor (let i = 0; i <= count; i++) {\n\t\t\tarr.push(this._effectiveMin + (i * this.step) <= this.value);\n\t\t}\n\n\t\treturn arr;\n\t}\n}\n\nSlider.define();\n\nexport default Slider;\n"]}

package/dist/SliderBase.d.ts

@@ -7,33 +7,22 @@ type StateStorage = {
 };
 type DirectionStart = "left" | "right";
 /**
- * @class
+ * Fired when the value changes and the user has finished interacting with the slider.
  *
- * <h3 class="comment-api-title">Overview</h3>
- *
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.main.SliderBase
- * @extends sap.ui.webc.base.UI5Element
  * @public
  */
 declare abstract class SliderBase extends UI5Element {
     /**
      * Defines the minimum value of the slider.
      *
-     * @type {sap.ui.webc.base.types.Float}
-     * @name sap.ui.webc.main.SliderBase.prototype.min
-     * @defaultvalue 0
+     * @default 0
      * @public
      */
     min: number;
     /**
      * Defines the maximum value of the slider.
      *
-     * @type {sap.ui.webc.base.types.Float}
-     * @name sap.ui.webc.main.SliderBase.prototype.max
-     * @defaultvalue 100
+     * @default 100
      * @public
      */
     max: number;
@@ -42,9 +31,7 @@ declare abstract class SliderBase extends UI5Element {
      * <br><br>
      * <b>Note:</b> If set to 0 the slider handle movement is disabled. When negative number or value other than a number, the component fallbacks to its default value.
      *
-     * @type {sap.ui.webc.base.types.Integer}
-     * @name sap.ui.webc.main.SliderBase.prototype.step
-     * @defaultvalue 1
+     * @default 1
      * @public
      */
     step: number;
@@ -55,9 +42,7 @@ declare abstract class SliderBase extends UI5Element {
      * Example - if the step value is set to 2 and the label interval is also specified to 2 - then every second
      * tickmark will be labelled, which means every 4th value number.
      *
-     * @type {sap.ui.webc.base.types.Integer}
-     * @name sap.ui.webc.main.SliderBase.prototype.labelInterval
-     * @defaultvalue 0
+     * @default 0
      * @public
      */
     labelInterval: number;
@@ -66,36 +51,28 @@ declare abstract class SliderBase extends UI5Element {
      * <br><br>
      * <b>Note:</b> The step must be a positive number.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.SliderBase.prototype.showTickmarks
-     * @defaultvalue false
+     * @default false
      * @public
      */
     showTickmarks: boolean;
     /**
      * Enables handle tooltip displaying the current value.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.SliderBase.prototype.showTooltip
-     * @defaultvalue false
+     * @default false
      * @public
      */
     showTooltip: boolean;
     /**
      * Defines whether the slider is in disabled state.
      *
-     * @type {boolean}
-     * @name sap.ui.webc.main.SliderBase.prototype.disabled
-     * @defaultvalue false
+     * @default false
      * @public
      */
     disabled: boolean;
     /**
      * Defines the accessible ARIA name of the component.
      *
-     * @type {string}
-     * @name sap.ui.webc.main.SliderBase.prototype.accessibleName
-     * @defaultvalue: ""
+     * @default ""
      * @public
      * @since 1.4.0
      */
@@ -136,6 +113,8 @@ declare abstract class SliderBase extends UI5Element {
         VISIBLE: string;
         HIDDEN: string;
     };
+    static get render(): import("@ui5/webcomponents-base/dist/UI5Element.js").Renderer;
+    static get styles(): import("@ui5/webcomponents-base/dist/types.js").StyleData;
     get classes(): {
         root: {
             "ui5-slider-root-phone": boolean;