@ui5/webcomponents 2.4.0-rc.0 → 2.4.0-rc.1

package/dist/Form.d.ts

@@ -57,7 +57,7 @@ type ItemsInfo = {
  * - **S** (< 600px) – 1 column is recommended (default: 1)
  * - **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)
  * - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)
- * - **XL** (> 1439px) – up to 6 columns are recommended (default: 2)
+ * - **XL** (> 1439px) – up to 6 columns are recommended (default: 3)
  *
  * To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6".
  *
@@ -123,9 +123,9 @@ declare class Form extends UI5Element {
      * - `S` - 1 column by default (1 column is recommended)
      * - `M` - 1 column by default (up to 2 columns are recommended)
      * - `L` - 2 columns by default (up to 3 columns are recommended)
-     * - `XL` - 2 columns by default (up to 6 columns  are recommended)
+     * - `XL` - 3 columns by default (up to 6 columns  are recommended)
      *
-     * @default "S1 M1 L2 XL2"
+     * @default "S1 M1 L2 XL3"
      * @public
      */
     layout: string;

package/dist/Form.js

@@ -53,7 +53,7 @@ const StepColumn = {
  * - **S** (< 600px) – 1 column is recommended (default: 1)
  * - **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)
  * - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)
- * - **XL** (> 1439px) – up to 6 columns are recommended (default: 2)
+ * - **XL** (> 1439px) – up to 6 columns are recommended (default: 3)
  *
  * To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6".
  *
@@ -121,12 +121,12 @@ let Form = class Form extends UI5Element {
          * - `S` - 1 column by default (1 column is recommended)
          * - `M` - 1 column by default (up to 2 columns are recommended)
          * - `L` - 2 columns by default (up to 3 columns are recommended)
-         * - `XL` - 2 columns by default (up to 6 columns  are recommended)
+         * - `XL` - 3 columns by default (up to 6 columns  are recommended)
          *
-         * @default "S1 M1 L2 XL2"
+         * @default "S1 M1 L2 XL3"
          * @public
          */
-        this.layout = "S1 M1 L2 XL2";
+        this.layout = "S1 M1 L2 XL3";
         /**
          * Defines the width proportion of the labels and fields of a FormItem by breakpoint.
          *
@@ -160,7 +160,7 @@ let Form = class Form extends UI5Element {
         this.labelSpanM = 4;
         this.columnsL = 2;
         this.labelSpanL = 4;
-        this.columnsXl = 2;
+        this.columnsXl = 3;
         this.labelSpanXl = 4;
     }
     onBeforeRendering() {

package/dist/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../src/Form.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\n// Template\nimport FormTemplate from \"./generated/templates/FormTemplate.lit.js\";\n\n// Styles\nimport FormCss from \"./generated/themes/Form.css.js\";\n\nimport Title from \"./Title.js\";\nimport type FormItemSpacing from \"./types/FormItemSpacing.js\";\nimport type FormGroup from \"./FormGroup.js\";\n\nconst additionalStylesMap = new Map<string, string>();\n\nconst StepColumn = {\n\t\"S\": 1,\n\t\"M\": 2,\n\t\"L\": 3,\n\t\"XL\": 6,\n};\n\n/**\n * Interface for components that can be slotted inside `ui5-form` as items.\n * @public\n * @experimental\n * @since 2.0.0\n */\ninterface IFormItem extends HTMLElement {\n\tlabelSpan: string\n\titemSpacing: `${FormItemSpacing}`;\n\treadonly isGroup: boolean;\n\tcolsXl?: number;\n\tcolsL?: number;\n\tcolsM?: number;\n\tcolsS?: number;\n\tcolumnSpan?: number;\n}\n\ntype GroupItemsInfo = {\n\tgroupItem: IFormItem,\n\tclasses: string,\n\titems: Array<ItemsInfo>,\n}\n\ntype ItemsInfo = {\n\titem: IFormItem,\n\tclasses: string,\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * The Form is a layout component that arranges labels and form fields (like input fields) pairs\n * into a specific number of columns.\n *\n * **Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\n * The Form web component does not provide any APIs for form submission.\n *\n * ### Structure\n *\n * - **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n * - **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n * - **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n *\n * The simplest Form (`ui5-form`) consists of a header area on top,\n * displaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\n * representing the pairs of label and form fields.\n *\n * And, there is also \"grouping\" available to assist the implementation of richer UIs.\n * This is enabled by the FormGroup (`ui5-form-group`) component.\n * In this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n *\n * ### Responsiveness\n *\n * The Form component reacts and changes its layout on predefined breakpoints.\n * Depending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n * - **S** (< 600px) – 1 column is recommended (default: 1)\n * - **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n * - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n * - **XL** (> 1439px) – up to 6 columns are recommended (default: 2)\n *\n * To change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n *\n * ### Groups\n *\n * To make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n *\n * - **Example #1** (perfect match):\n * 4 columns and 4 groups: each group will use 1 column.\n *\n * - **Example #2** (balanced distribution):\n * 4 columns and 2 groups: each group will use 2 columns.\n * 6 columns and 2 groups: each group will use 3 columns.\n *\n * - **Example #3** (unbalanced distribution):\n * 3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n * 5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n *\n * **Note:** The size of a group element is determined by the number of FormItems assigned to it.\n * In the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n *\n * - **Example #4** (more groups than columns):\n * 3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n *\n * ### Groups Column Span\n *\n * To influence the built-in group distribution, described in the previous section,\n * you can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n *\n * ### Items Column Span\n *\n * FormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n *\n * ### Items Label Span\n *\n * The placement of the labels depends on the size of the used column.\n * If there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\n * By default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\n * You can control what space the labels should take via the `labelSpan` property.\n *\n * **For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n *\n * ### ES6 Module Import\n *\n * - import @ui5/webcomponents/dist/Form.js\";\n * - import @ui5/webcomponents/dist/FormGroup.js\";\n * - import @ui5/webcomponents/dist/FormItem.js\";\n *\n * @csspart header - Used to style the wrapper of the header.\n * @csspart layout - Used to style the element defining the form column layout.\n * @csspart column - Used to style a single column of the form column layout.\n *\n * @public\n * @since 2.0.0\n * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.\n * @extends UI5Element\n */\n@customElement({\n\ttag: \"ui5-form\",\n\trenderer: litRender,\n\tstyles: FormCss,\n\ttemplate: FormTemplate,\n\tdependencies: [Title],\n})\nclass Form extends UI5Element {\n\t/**\n\t * Defines the number of columns to distribute the form content by breakpoint.\n\t *\n\t * Supported values:\n\t * - `S` - 1 column by default (1 column is recommended)\n\t * - `M` - 1 column by default (up to 2 columns are recommended)\n\t * - `L` - 2 columns by default (up to 3 columns are recommended)\n\t * - `XL` - 2 columns by default (up to 6 columns  are recommended)\n\t *\n\t * @default \"S1 M1 L2 XL2\"\n\t * @public\n\t */\n\t@property()\n\tlayout = \"S1 M1 L2 XL2\"\n\n\t/**\n\t * Defines the width proportion of the labels and fields of a FormItem by breakpoint.\n\t *\n\t * By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\n\t * and 12/12 in S size, e.g in S the label is on top of its associated field.\n\t *\n\t * The supported values are between 1 and 12. Greater the number, more space the label will use.\n\t *\n\t * **Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.\n\t * @default \"S12 M4 L4 XL4\"\n\t * @public\n\t */\n\t@property()\n\tlabelSpan = \"S12 M4 L4 XL4\";\n\n\t/**\n\t * Defines the header text of the component.\n\t *\n\t * **Note:** The property gets overridden by the `header` slot.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Defines the vertical spacing between form items.\n\t *\n\t * **Note:** If the Form is meant to be switched between \"non-edit\" and \"edit\" modes,\n\t * we recommend using \"Large\" item spacing in \"non-edit\" mode, and \"Normal\" - for \"edit\" mode,\n\t * to avoid \"jumping\" effect, caused by the hight difference between texts in \"non-edit\" mode and the input fields in \"edit\" mode.\n\t *\n\t * @default \"Normal\"\n\t * @public\n\t */\n\t@property()\n\titemSpacing: `${FormItemSpacing}` = \"Normal\";\n\n\t/**\n\t * Defines the component header area.\n\t *\n\t * **Note:** When a `header` is provided, the `headerText` property is ignored.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\theader!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the component content - FormGroups or FormItems.\n\t *\n\t * **Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\n\t * Either use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: true,\n\t})\n\titems!: Array<IFormItem>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\tcolumnsS = 1;\n\t@property({ type: Number })\n\tlabelSpanS = 12\n\n\t@property({ type: Number })\n\tcolumnsM = 1;\n\t@property({ type: Number })\n\tlabelSpanM = 4;\n\n\t@property({ type: Number })\n\tcolumnsL = 2;\n\t@property({ type: Number })\n\tlabelSpanL = 4;\n\n\t@property({ type: Number })\n\tcolumnsXl = 2;\n\t@property({ type: Number })\n\tlabelSpanXl = 4;\n\n\tonBeforeRendering() {\n\t\t// Parse the layout and set it to the FormGroups/FormItems.\n\t\tthis.setColumnLayout();\n\n\t\t// Parse the labelSpan and set it to the FormGroups/FormItems.\n\t\tthis.setLabelSpan();\n\n\t\t// Define how many columns a group should take.\n\t\tthis.setGroupsColSpan();\n\t}\n\n\tonAfterRendering() {\n\t\t// Create additional CSS for number of columns that are not supported by default.\n\t\tthis.createAdditionalCSSStyleSheet();\n\t}\n\n\tsetColumnLayout() {\n\t\tconst layoutArr = this.layout.split(\" \");\n\t\tlayoutArr.forEach((breakpoint: string) => {\n\t\t\tif (breakpoint.startsWith(\"S\")) {\n\t\t\t\tthis.columnsS = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"M\")) {\n\t\t\t\tthis.columnsM = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"L\")) {\n\t\t\t\tthis.columnsL = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"XL\")) {\n\t\t\t\tthis.columnsXl = parseInt(breakpoint.slice(2));\n\t\t\t}\n\t\t});\n\t}\n\n\tsetLabelSpan() {\n\t\tthis.labelSpan.split(\" \").forEach((breakpoint: string) => {\n\t\t\tif (breakpoint.startsWith(\"S\")) {\n\t\t\t\tthis.labelSpanS = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"M\")) {\n\t\t\t\tthis.labelSpanM = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"L\")) {\n\t\t\t\tthis.labelSpanL = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"XL\")) {\n\t\t\t\tthis.labelSpanXl = parseInt(breakpoint.slice(2));\n\t\t\t}\n\t\t});\n\n\t\tthis.items.forEach((item: IFormItem) => {\n\t\t\titem.labelSpan = this.labelSpan;\n\t\t\titem.itemSpacing = this.itemSpacing;\n\t\t});\n\t}\n\n\tsetGroupsColSpan() {\n\t\tif (!this.hasGroupItems) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst itemsCount = this.items.length;\n\t\tconst sortedItems = [...this.items].sort((itemA: IFormItem, itemB: IFormItem) => {\n\t\t\treturn (itemB as FormGroup)?.items.length - (itemA as FormGroup)?.items.length;\n\t\t});\n\n\t\tsortedItems.forEach((item: IFormItem, idx: number) => {\n\t\t\titem.colsXl = this.getGroupsColSpan(this.columnsXl, itemsCount, idx, item);\n\t\t\titem.colsL = this.getGroupsColSpan(this.columnsL, itemsCount, idx, item);\n\t\t\titem.colsM = this.getGroupsColSpan(this.columnsM, itemsCount, idx, item);\n\t\t\titem.colsS = this.getGroupsColSpan(this.columnsS, itemsCount, idx, item);\n\t\t});\n\t}\n\n\tgetGroupsColSpan(cols: number, groups: number, index: number, group: IFormItem): number {\n\t\t// Case 0: column span is set from outside.\n\t\tif (group.columnSpan) {\n\t\t\treturn group.columnSpan;\n\t\t}\n\n\t\t// CASE 1: The number of available columns match the number of groups, or only 1 column is available - each group takes 1 column.\n\t\t// For example: 1 column - 1 group, 2 columns - 2 groups, 3 columns - 3 groups, 4columns - 4 groups\n\t\tif (cols === 1 || cols <= groups) {\n\t\t\treturn 1;\n\t\t}\n\n\t\t// CASE 2: The number of available columns IS multiple of the number of groups.\n\t\t// For example: 2 column - 1 group, 3 columns - 1 groups, 4 columns - 1 group, 4 columns - 2 groups\n\t\tif (cols % groups === 0) {\n\t\t\treturn cols / groups;\n\t\t}\n\n\t\t// CASE 3: The number of available columns IS NOT multiple of the number of groups.\n\t\tconst MIN_COL_SPAN = 1;\n\t\tconst delta = cols - groups;\n\n\t\t// 7 cols & 4 groups => 2, 2, 2, 1\n\t\tif (delta <= groups) {\n\t\t\treturn index < delta ? MIN_COL_SPAN + 1 : MIN_COL_SPAN;\n\t\t}\n\n\t\t// 7 cols & 3 groups => 3, 2, 2\n\t\treturn index === 0 ? MIN_COL_SPAN + (delta - groups) + 1 : MIN_COL_SPAN + 1;\n\t}\n\n\tget hasGroupItems(): boolean {\n\t\treturn this.items.some((item: IFormItem) => item.isGroup);\n\t}\n\n\tget hasHeader(): boolean {\n\t\treturn this.hasCustomHeader || !!this.headerText;\n\t}\n\n\tget hasCustomHeader(): boolean {\n\t\treturn !!this.header.length;\n\t}\n\n\tget ariaLabelledByID(): string | undefined {\n\t\treturn this.hasCustomHeader ? undefined : `${this._id}-header-text`;\n\t}\n\n\tget groupItemsInfo(): Array<GroupItemsInfo> {\n\t\treturn this.items.map((groupItem: IFormItem) => {\n\t\t\treturn {\n\t\t\t\tgroupItem,\n\t\t\t\tclasses: `ui5-form-column-spanL-${groupItem.colsL} ui5-form-column-spanXL-${groupItem.colsXl} ui5-form-column-spanM-${groupItem.colsM} ui5-form-column-spanS-${groupItem.colsS}`,\n\t\t\t\titems: this.getItemsInfo((Array.from(groupItem.children) as Array<IFormItem>)),\n\t\t\t};\n\t\t});\n\t}\n\n\tget itemsInfo(): Array<ItemsInfo> {\n\t\treturn this.getItemsInfo();\n\t}\n\n\tgetItemsInfo(items?: Array<IFormItem>): Array<ItemsInfo> {\n\t\treturn (items || this.items).map((item: IFormItem) => {\n\t\t\treturn {\n\t\t\t\titem,\n\t\t\t\tclasses: item.columnSpan ? `ui5-form-item-span-${item.columnSpan}` : \"\",\n\t\t\t};\n\t\t});\n\t}\n\n\tcreateAdditionalCSSStyleSheet() {\n\t\t[\n\t\t\t{ breakpoint: \"S\", columns: this.columnsS },\n\t\t\t{ breakpoint: \"M\", columns: this.columnsM },\n\t\t\t{ breakpoint: \"L\", columns: this.columnsL },\n\t\t\t{ breakpoint: \"XL\", columns: this.columnsXl },\n\t\t].forEach(step => {\n\t\t\tconst additionalStyle: string | undefined = this.getAdditionalCSS(step.breakpoint, step.columns);\n\n\t\t\tif (additionalStyle) {\n\t\t\t\tthis.shadowRoot!.adoptedStyleSheets = [...this.shadowRoot!.adoptedStyleSheets, this.getCSSStyleSheet(additionalStyle)];\n\t\t\t}\n\t\t});\n\t}\n\n\tgetAdditionalCSS(step: string, colsNumber: number): string | undefined {\n\t\tif (StepColumn[step as keyof typeof StepColumn] >= colsNumber) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst key = `${step}-${colsNumber}`;\n\n\t\tif (!additionalStylesMap.has(key)) {\n\t\t\tlet containerQuery;\n\t\t\tlet supporedColumnsNumber = StepColumn.S;\n\t\t\tlet stepSpanCSS = \"\";\n\t\t\tlet cols = colsNumber;\n\n\t\t\tif (step === \"S\") {\n\t\t\t\tsupporedColumnsNumber = StepColumn.S;\n\t\t\t\tcontainerQuery = `@container (max-width: 599px) {`;\n\t\t\t} else if (step === \"M\") {\n\t\t\t\tsupporedColumnsNumber = StepColumn.M;\n\t\t\t\tcontainerQuery = `@container (width > 599px) and (width < 1024px) {`;\n\t\t\t} else if (step === \"L\") {\n\t\t\t\tsupporedColumnsNumber = StepColumn.L;\n\t\t\t\tcontainerQuery = `@container (width > 1023px) and (width < 1439px) {`;\n\t\t\t} else if (step === \"XL\") {\n\t\t\t\tcontainerQuery = `@container (min-width: 1440px) {`;\n\t\t\t\tsupporedColumnsNumber = StepColumn.XL;\n\t\t\t}\n\n\t\t\twhile (cols > supporedColumnsNumber) {\n\t\t\t\tstepSpanCSS += `\n\t\t\t\t:host([columns-${step.toLocaleLowerCase()}=\"${cols}\"]) .ui5-form-layout {\n\t\t\t\t\tgrid-template-columns: repeat(${cols}, 1fr);\n\t\t\t\t}\n\n\t\t\t\t.ui5-form-column-span${step}-${cols},\n\t\t\t\t.ui5-form-item-span-${cols} {\n\t\t\t\t\tgrid-column: span ${cols};\n\t\t\t\t}\n\n\t\t\t\t.ui5-form-column-span${step}-${cols} .ui5-form-group-layout {\n\t\t\t\t\tgrid-template-columns: repeat(${cols}, 1fr);\n\t\t\t\t}\n\t\t\t\t`;\n\t\t\t\tcols--;\n\t\t\t}\n\n\t\t\tconst css = `${containerQuery}${stepSpanCSS}}`;\n\t\t\tadditionalStylesMap.set(key, css);\n\t\t}\n\n\t\treturn additionalStylesMap.get(key)!;\n\t}\n\n\tgetCSSStyleSheet(cssText: string): CSSStyleSheet {\n\t\tconst style = new CSSStyleSheet();\n\t\tstyle.replaceSync(cssText);\n\t\treturn style;\n\t}\n}\n\nForm.define();\n\nexport default Form;\nexport type {\n\tIFormItem,\n};\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../src/Form.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 property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\n\n// Template\nimport FormTemplate from \"./generated/templates/FormTemplate.lit.js\";\n\n// Styles\nimport FormCss from \"./generated/themes/Form.css.js\";\n\nimport Title from \"./Title.js\";\nimport type FormItemSpacing from \"./types/FormItemSpacing.js\";\nimport type FormGroup from \"./FormGroup.js\";\n\nconst additionalStylesMap = new Map<string, string>();\n\nconst StepColumn = {\n\t\"S\": 1,\n\t\"M\": 2,\n\t\"L\": 3,\n\t\"XL\": 6,\n};\n\n/**\n * Interface for components that can be slotted inside `ui5-form` as items.\n * @public\n * @experimental\n * @since 2.0.0\n */\ninterface IFormItem extends HTMLElement {\n\tlabelSpan: string\n\titemSpacing: `${FormItemSpacing}`;\n\treadonly isGroup: boolean;\n\tcolsXl?: number;\n\tcolsL?: number;\n\tcolsM?: number;\n\tcolsS?: number;\n\tcolumnSpan?: number;\n}\n\ntype GroupItemsInfo = {\n\tgroupItem: IFormItem,\n\tclasses: string,\n\titems: Array<ItemsInfo>,\n}\n\ntype ItemsInfo = {\n\titem: IFormItem,\n\tclasses: string,\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * The Form is a layout component that arranges labels and form fields (like input fields) pairs\n * into a specific number of columns.\n *\n * **Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\n * The Form web component does not provide any APIs for form submission.\n *\n * ### Structure\n *\n * - **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n * - **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n * - **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n *\n * The simplest Form (`ui5-form`) consists of a header area on top,\n * displaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\n * representing the pairs of label and form fields.\n *\n * And, there is also \"grouping\" available to assist the implementation of richer UIs.\n * This is enabled by the FormGroup (`ui5-form-group`) component.\n * In this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n *\n * ### Responsiveness\n *\n * The Form component reacts and changes its layout on predefined breakpoints.\n * Depending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n * - **S** (< 600px) – 1 column is recommended (default: 1)\n * - **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n * - **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n * - **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n *\n * To change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n *\n * ### Groups\n *\n * To make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n *\n * - **Example #1** (perfect match):\n * 4 columns and 4 groups: each group will use 1 column.\n *\n * - **Example #2** (balanced distribution):\n * 4 columns and 2 groups: each group will use 2 columns.\n * 6 columns and 2 groups: each group will use 3 columns.\n *\n * - **Example #3** (unbalanced distribution):\n * 3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n * 5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n *\n * **Note:** The size of a group element is determined by the number of FormItems assigned to it.\n * In the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n *\n * - **Example #4** (more groups than columns):\n * 3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n *\n * ### Groups Column Span\n *\n * To influence the built-in group distribution, described in the previous section,\n * you can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n *\n * ### Items Column Span\n *\n * FormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n *\n * ### Items Label Span\n *\n * The placement of the labels depends on the size of the used column.\n * If there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\n * By default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\n * You can control what space the labels should take via the `labelSpan` property.\n *\n * **For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n *\n * ### ES6 Module Import\n *\n * - import @ui5/webcomponents/dist/Form.js\";\n * - import @ui5/webcomponents/dist/FormGroup.js\";\n * - import @ui5/webcomponents/dist/FormItem.js\";\n *\n * @csspart header - Used to style the wrapper of the header.\n * @csspart layout - Used to style the element defining the form column layout.\n * @csspart column - Used to style a single column of the form column layout.\n *\n * @public\n * @since 2.0.0\n * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.\n * @extends UI5Element\n */\n@customElement({\n\ttag: \"ui5-form\",\n\trenderer: litRender,\n\tstyles: FormCss,\n\ttemplate: FormTemplate,\n\tdependencies: [Title],\n})\nclass Form extends UI5Element {\n\t/**\n\t * Defines the number of columns to distribute the form content by breakpoint.\n\t *\n\t * Supported values:\n\t * - `S` - 1 column by default (1 column is recommended)\n\t * - `M` - 1 column by default (up to 2 columns are recommended)\n\t * - `L` - 2 columns by default (up to 3 columns are recommended)\n\t * - `XL` - 3 columns by default (up to 6 columns  are recommended)\n\t *\n\t * @default \"S1 M1 L2 XL3\"\n\t * @public\n\t */\n\t@property()\n\tlayout = \"S1 M1 L2 XL3\"\n\n\t/**\n\t * Defines the width proportion of the labels and fields of a FormItem by breakpoint.\n\t *\n\t * By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\n\t * and 12/12 in S size, e.g in S the label is on top of its associated field.\n\t *\n\t * The supported values are between 1 and 12. Greater the number, more space the label will use.\n\t *\n\t * **Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.\n\t * @default \"S12 M4 L4 XL4\"\n\t * @public\n\t */\n\t@property()\n\tlabelSpan = \"S12 M4 L4 XL4\";\n\n\t/**\n\t * Defines the header text of the component.\n\t *\n\t * **Note:** The property gets overridden by the `header` slot.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Defines the vertical spacing between form items.\n\t *\n\t * **Note:** If the Form is meant to be switched between \"non-edit\" and \"edit\" modes,\n\t * we recommend using \"Large\" item spacing in \"non-edit\" mode, and \"Normal\" - for \"edit\" mode,\n\t * to avoid \"jumping\" effect, caused by the hight difference between texts in \"non-edit\" mode and the input fields in \"edit\" mode.\n\t *\n\t * @default \"Normal\"\n\t * @public\n\t */\n\t@property()\n\titemSpacing: `${FormItemSpacing}` = \"Normal\";\n\n\t/**\n\t * Defines the component header area.\n\t *\n\t * **Note:** When a `header` is provided, the `headerText` property is ignored.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement })\n\theader!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the component content - FormGroups or FormItems.\n\t *\n\t * **Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\n\t * Either use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: true,\n\t})\n\titems!: Array<IFormItem>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\tcolumnsS = 1;\n\t@property({ type: Number })\n\tlabelSpanS = 12\n\n\t@property({ type: Number })\n\tcolumnsM = 1;\n\t@property({ type: Number })\n\tlabelSpanM = 4;\n\n\t@property({ type: Number })\n\tcolumnsL = 2;\n\t@property({ type: Number })\n\tlabelSpanL = 4;\n\n\t@property({ type: Number })\n\tcolumnsXl = 3;\n\t@property({ type: Number })\n\tlabelSpanXl = 4;\n\n\tonBeforeRendering() {\n\t\t// Parse the layout and set it to the FormGroups/FormItems.\n\t\tthis.setColumnLayout();\n\n\t\t// Parse the labelSpan and set it to the FormGroups/FormItems.\n\t\tthis.setLabelSpan();\n\n\t\t// Define how many columns a group should take.\n\t\tthis.setGroupsColSpan();\n\t}\n\n\tonAfterRendering() {\n\t\t// Create additional CSS for number of columns that are not supported by default.\n\t\tthis.createAdditionalCSSStyleSheet();\n\t}\n\n\tsetColumnLayout() {\n\t\tconst layoutArr = this.layout.split(\" \");\n\t\tlayoutArr.forEach((breakpoint: string) => {\n\t\t\tif (breakpoint.startsWith(\"S\")) {\n\t\t\t\tthis.columnsS = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"M\")) {\n\t\t\t\tthis.columnsM = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"L\")) {\n\t\t\t\tthis.columnsL = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"XL\")) {\n\t\t\t\tthis.columnsXl = parseInt(breakpoint.slice(2));\n\t\t\t}\n\t\t});\n\t}\n\n\tsetLabelSpan() {\n\t\tthis.labelSpan.split(\" \").forEach((breakpoint: string) => {\n\t\t\tif (breakpoint.startsWith(\"S\")) {\n\t\t\t\tthis.labelSpanS = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"M\")) {\n\t\t\t\tthis.labelSpanM = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"L\")) {\n\t\t\t\tthis.labelSpanL = parseInt(breakpoint.slice(1));\n\t\t\t} else if (breakpoint.startsWith(\"XL\")) {\n\t\t\t\tthis.labelSpanXl = parseInt(breakpoint.slice(2));\n\t\t\t}\n\t\t});\n\n\t\tthis.items.forEach((item: IFormItem) => {\n\t\t\titem.labelSpan = this.labelSpan;\n\t\t\titem.itemSpacing = this.itemSpacing;\n\t\t});\n\t}\n\n\tsetGroupsColSpan() {\n\t\tif (!this.hasGroupItems) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst itemsCount = this.items.length;\n\t\tconst sortedItems = [...this.items].sort((itemA: IFormItem, itemB: IFormItem) => {\n\t\t\treturn (itemB as FormGroup)?.items.length - (itemA as FormGroup)?.items.length;\n\t\t});\n\n\t\tsortedItems.forEach((item: IFormItem, idx: number) => {\n\t\t\titem.colsXl = this.getGroupsColSpan(this.columnsXl, itemsCount, idx, item);\n\t\t\titem.colsL = this.getGroupsColSpan(this.columnsL, itemsCount, idx, item);\n\t\t\titem.colsM = this.getGroupsColSpan(this.columnsM, itemsCount, idx, item);\n\t\t\titem.colsS = this.getGroupsColSpan(this.columnsS, itemsCount, idx, item);\n\t\t});\n\t}\n\n\tgetGroupsColSpan(cols: number, groups: number, index: number, group: IFormItem): number {\n\t\t// Case 0: column span is set from outside.\n\t\tif (group.columnSpan) {\n\t\t\treturn group.columnSpan;\n\t\t}\n\n\t\t// CASE 1: The number of available columns match the number of groups, or only 1 column is available - each group takes 1 column.\n\t\t// For example: 1 column - 1 group, 2 columns - 2 groups, 3 columns - 3 groups, 4columns - 4 groups\n\t\tif (cols === 1 || cols <= groups) {\n\t\t\treturn 1;\n\t\t}\n\n\t\t// CASE 2: The number of available columns IS multiple of the number of groups.\n\t\t// For example: 2 column - 1 group, 3 columns - 1 groups, 4 columns - 1 group, 4 columns - 2 groups\n\t\tif (cols % groups === 0) {\n\t\t\treturn cols / groups;\n\t\t}\n\n\t\t// CASE 3: The number of available columns IS NOT multiple of the number of groups.\n\t\tconst MIN_COL_SPAN = 1;\n\t\tconst delta = cols - groups;\n\n\t\t// 7 cols & 4 groups => 2, 2, 2, 1\n\t\tif (delta <= groups) {\n\t\t\treturn index < delta ? MIN_COL_SPAN + 1 : MIN_COL_SPAN;\n\t\t}\n\n\t\t// 7 cols & 3 groups => 3, 2, 2\n\t\treturn index === 0 ? MIN_COL_SPAN + (delta - groups) + 1 : MIN_COL_SPAN + 1;\n\t}\n\n\tget hasGroupItems(): boolean {\n\t\treturn this.items.some((item: IFormItem) => item.isGroup);\n\t}\n\n\tget hasHeader(): boolean {\n\t\treturn this.hasCustomHeader || !!this.headerText;\n\t}\n\n\tget hasCustomHeader(): boolean {\n\t\treturn !!this.header.length;\n\t}\n\n\tget ariaLabelledByID(): string | undefined {\n\t\treturn this.hasCustomHeader ? undefined : `${this._id}-header-text`;\n\t}\n\n\tget groupItemsInfo(): Array<GroupItemsInfo> {\n\t\treturn this.items.map((groupItem: IFormItem) => {\n\t\t\treturn {\n\t\t\t\tgroupItem,\n\t\t\t\tclasses: `ui5-form-column-spanL-${groupItem.colsL} ui5-form-column-spanXL-${groupItem.colsXl} ui5-form-column-spanM-${groupItem.colsM} ui5-form-column-spanS-${groupItem.colsS}`,\n\t\t\t\titems: this.getItemsInfo((Array.from(groupItem.children) as Array<IFormItem>)),\n\t\t\t};\n\t\t});\n\t}\n\n\tget itemsInfo(): Array<ItemsInfo> {\n\t\treturn this.getItemsInfo();\n\t}\n\n\tgetItemsInfo(items?: Array<IFormItem>): Array<ItemsInfo> {\n\t\treturn (items || this.items).map((item: IFormItem) => {\n\t\t\treturn {\n\t\t\t\titem,\n\t\t\t\tclasses: item.columnSpan ? `ui5-form-item-span-${item.columnSpan}` : \"\",\n\t\t\t};\n\t\t});\n\t}\n\n\tcreateAdditionalCSSStyleSheet() {\n\t\t[\n\t\t\t{ breakpoint: \"S\", columns: this.columnsS },\n\t\t\t{ breakpoint: \"M\", columns: this.columnsM },\n\t\t\t{ breakpoint: \"L\", columns: this.columnsL },\n\t\t\t{ breakpoint: \"XL\", columns: this.columnsXl },\n\t\t].forEach(step => {\n\t\t\tconst additionalStyle: string | undefined = this.getAdditionalCSS(step.breakpoint, step.columns);\n\n\t\t\tif (additionalStyle) {\n\t\t\t\tthis.shadowRoot!.adoptedStyleSheets = [...this.shadowRoot!.adoptedStyleSheets, this.getCSSStyleSheet(additionalStyle)];\n\t\t\t}\n\t\t});\n\t}\n\n\tgetAdditionalCSS(step: string, colsNumber: number): string | undefined {\n\t\tif (StepColumn[step as keyof typeof StepColumn] >= colsNumber) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst key = `${step}-${colsNumber}`;\n\n\t\tif (!additionalStylesMap.has(key)) {\n\t\t\tlet containerQuery;\n\t\t\tlet supporedColumnsNumber = StepColumn.S;\n\t\t\tlet stepSpanCSS = \"\";\n\t\t\tlet cols = colsNumber;\n\n\t\t\tif (step === \"S\") {\n\t\t\t\tsupporedColumnsNumber = StepColumn.S;\n\t\t\t\tcontainerQuery = `@container (max-width: 599px) {`;\n\t\t\t} else if (step === \"M\") {\n\t\t\t\tsupporedColumnsNumber = StepColumn.M;\n\t\t\t\tcontainerQuery = `@container (width > 599px) and (width < 1024px) {`;\n\t\t\t} else if (step === \"L\") {\n\t\t\t\tsupporedColumnsNumber = StepColumn.L;\n\t\t\t\tcontainerQuery = `@container (width > 1023px) and (width < 1439px) {`;\n\t\t\t} else if (step === \"XL\") {\n\t\t\t\tcontainerQuery = `@container (min-width: 1440px) {`;\n\t\t\t\tsupporedColumnsNumber = StepColumn.XL;\n\t\t\t}\n\n\t\t\twhile (cols > supporedColumnsNumber) {\n\t\t\t\tstepSpanCSS += `\n\t\t\t\t:host([columns-${step.toLocaleLowerCase()}=\"${cols}\"]) .ui5-form-layout {\n\t\t\t\t\tgrid-template-columns: repeat(${cols}, 1fr);\n\t\t\t\t}\n\n\t\t\t\t.ui5-form-column-span${step}-${cols},\n\t\t\t\t.ui5-form-item-span-${cols} {\n\t\t\t\t\tgrid-column: span ${cols};\n\t\t\t\t}\n\n\t\t\t\t.ui5-form-column-span${step}-${cols} .ui5-form-group-layout {\n\t\t\t\t\tgrid-template-columns: repeat(${cols}, 1fr);\n\t\t\t\t}\n\t\t\t\t`;\n\t\t\t\tcols--;\n\t\t\t}\n\n\t\t\tconst css = `${containerQuery}${stepSpanCSS}}`;\n\t\t\tadditionalStylesMap.set(key, css);\n\t\t}\n\n\t\treturn additionalStylesMap.get(key)!;\n\t}\n\n\tgetCSSStyleSheet(cssText: string): CSSStyleSheet {\n\t\tconst style = new CSSStyleSheet();\n\t\tstyle.replaceSync(cssText);\n\t\treturn style;\n\t}\n}\n\nForm.define();\n\nexport default Form;\nexport type {\n\tIFormItem,\n};\n"]}

package/dist/FormGroup.js

@@ -88,6 +88,9 @@ __decorate([
 __decorate([
     property()
 ], FormGroup.prototype, "itemSpacing", void 0);
+__decorate([
+    property()
+], FormGroup.prototype, "labelSpan", void 0);
 FormGroup = __decorate([
     customElement("ui5-form-group")
 ], FormGroup);

package/dist/FormGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../src/FormGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAMnE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QA8BC;;WAEG;QAEH,UAAK,GAAG,CAAC,CAAC;QAGV,UAAK,GAAG,CAAC,CAAC;QAGV,UAAK,GAAG,CAAC,CAAC;QAGV,WAAM,GAAG,CAAC,CAAC;QAGX,gBAAW,GAAyB,QAAQ,CAAC;QAE7C,cAAS,GAAG,eAAe,CAAC;IAgB7B,CAAC;IAdA,iBAAiB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAc,EAAE,EAAE;YACrC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC;IACb,CAAC;CACD,CAAA;AAxDA;IADC,QAAQ,EAAE;6CACS;AAUpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACP;AAUpB;IAJC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;KACf,CAAC;wCACsB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAGX;IADC,QAAQ,EAAE;8CACkC;AA9CxC,SAAS;IADd,aAAa,CAAC,gBAAgB,CAAC;GAC1B,SAAS,CAgEd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\n\nimport type FormItem from \"./FormItem.js\";\nimport type { IFormItem } from \"./Form.js\";\nimport type FormItemSpacing from \"./types/FormItemSpacing.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component\n * and it consists of FormItem (ui5-form-item) components.\n *\n * The layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.\n * Still, one can influence the layout via the FormGroup's `columnSpan` property,\n * that defines how many columns the group should expand to.\n *\n * ### Usage\n *\n * Тhe FormGroup (ui5-form-group) allows to split a Form into groups,\n * e.g to group FormItems that logically belong together.\n *\n * ### ES6 Module Import\n *\n * - import @ui5/webcomponents/dist/FormGroup.js\";\n *\n * @public\n * @implements {IFormItem}\n * @since 2.0.0\n * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.\n * @extends UI5Element\n */\n@customElement(\"ui5-form-group\")\nclass FormGroup extends UI5Element implements IFormItem {\n\t/**\n\t * Defines header text of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Defines column span of the component,\n\t * e.g how many columns the group should span to.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: Number })\n\tcolumnSpan?: number;\n\n\t/**\n\t * Defines the items of the component.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t})\n\titems!: Array<FormItem>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\tcolsS = 1;\n\n\t@property({ type: Number })\n\tcolsM = 1;\n\n\t@property({ type: Number })\n\tcolsL = 1;\n\n\t@property({ type: Number })\n\tcolsXl = 1;\n\n\t@property()\n\titemSpacing: `${FormItemSpacing}` = \"Normal\";\n\n\tlabelSpan = \"S12 M4 L4 XL4\";\n\n\tonBeforeRendering() {\n\t\tthis.processFormItems();\n\t}\n\n\tprocessFormItems() {\n\t\tthis.items.forEach((item: FormItem) => {\n\t\t\titem.labelSpan = this.labelSpan;\n\t\t\titem.itemSpacing = this.itemSpacing;\n\t\t});\n\t}\n\n\tget isGroup() {\n\t\treturn true;\n\t}\n}\n\nFormGroup.define();\n\nexport default FormGroup;\n"]}
+{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../src/FormGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAMnE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QA8BC;;WAEG;QAEH,UAAK,GAAG,CAAC,CAAC;QAGV,UAAK,GAAG,CAAC,CAAC;QAGV,UAAK,GAAG,CAAC,CAAC;QAGV,WAAM,GAAG,CAAC,CAAC;QAGX,gBAAW,GAAyB,QAAQ,CAAC;QAG7C,cAAS,GAAG,eAAe,CAAC;IAgB7B,CAAC;IAdA,iBAAiB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAc,EAAE,EAAE;YACrC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC;IACb,CAAC;CACD,CAAA;AAzDA;IADC,QAAQ,EAAE;6CACS;AAUpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACP;AAUpB;IAJC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;KACf,CAAC;wCACsB;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAChB;AAGX;IADC,QAAQ,EAAE;8CACkC;AAG7C;IADC,QAAQ,EAAE;4CACiB;AAjDvB,SAAS;IADd,aAAa,CAAC,gBAAgB,CAAC;GAC1B,SAAS,CAiEd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\n\nimport type FormItem from \"./FormItem.js\";\nimport type { IFormItem } from \"./Form.js\";\nimport type FormItemSpacing from \"./types/FormItemSpacing.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component\n * and it consists of FormItem (ui5-form-item) components.\n *\n * The layout of the FormGroup is mostly defined and controlled by the overarching Form (ui5-form) component.\n * Still, one can influence the layout via the FormGroup's `columnSpan` property,\n * that defines how many columns the group should expand to.\n *\n * ### Usage\n *\n * Тhe FormGroup (ui5-form-group) allows to split a Form into groups,\n * e.g to group FormItems that logically belong together.\n *\n * ### ES6 Module Import\n *\n * - import @ui5/webcomponents/dist/FormGroup.js\";\n *\n * @public\n * @implements {IFormItem}\n * @since 2.0.0\n * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.\n * @extends UI5Element\n */\n@customElement(\"ui5-form-group\")\nclass FormGroup extends UI5Element implements IFormItem {\n\t/**\n\t * Defines header text of the component.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\theaderText?: string;\n\n\t/**\n\t * Defines column span of the component,\n\t * e.g how many columns the group should span to.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property({ type: Number })\n\tcolumnSpan?: number;\n\n\t/**\n\t * Defines the items of the component.\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t})\n\titems!: Array<FormItem>;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Number })\n\tcolsS = 1;\n\n\t@property({ type: Number })\n\tcolsM = 1;\n\n\t@property({ type: Number })\n\tcolsL = 1;\n\n\t@property({ type: Number })\n\tcolsXl = 1;\n\n\t@property()\n\titemSpacing: `${FormItemSpacing}` = \"Normal\";\n\n\t@property()\n\tlabelSpan = \"S12 M4 L4 XL4\";\n\n\tonBeforeRendering() {\n\t\tthis.processFormItems();\n\t}\n\n\tprocessFormItems() {\n\t\tthis.items.forEach((item: FormItem) => {\n\t\t\titem.labelSpan = this.labelSpan;\n\t\t\titem.itemSpacing = this.itemSpacing;\n\t\t});\n\t}\n\n\tget isGroup() {\n\t\treturn true;\n\t}\n}\n\nFormGroup.define();\n\nexport default FormGroup;\n"]}

package/dist/RangeSlider.d.ts

@@ -78,6 +78,8 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
      */
     endValue: number;
     rangePressed: boolean;
+    _isStartValueValid: boolean;
+    _isEndValueValid: boolean;
     _startValueInitial?: number;
     _endValueInitial?: number;
     _valueAffected?: AffectedValue;
@@ -91,6 +93,9 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
     _secondHandlePositionFromStart?: number;
     _selectedRange?: number;
     _reversedValues: boolean;
+    _lastValidStartValue: string;
+    _lastValidEndValue: string;
+    _areInputValuesSwapped: boolean;
     static i18nBundle: I18nBundle;
     get formFormattedValue(): FormData;
     constructor();
@@ -124,14 +129,15 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
      * Resets the stored Range Slider's initial values saved when it was first focused
      * @private
      */
-    _onfocusout(): void;
+    _onfocusout(e: FocusEvent): void;
+    _onInputFocusOut(e: FocusEvent): void;
     /**
     * Handles keyup logic. If one of the handles came across the other
     * swap the start and end values. Reset the affected value by the finished
     * user interaction.
     * @private
     */
-    _onkeyup(): void;
+    _onkeyup(e: KeyboardEvent): void;
     _handleActionKeyPress(e: KeyboardEvent): void;
     /**
      * Determines affected value (start/end) depending on the currently
@@ -182,7 +188,8 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
      * @private
      */
     _updateValueOnRangeDrag(event: TouchEvent | MouseEvent): void;
-    _handleUp(): void;
+    _handleUp(e: MouseEvent): void;
+    _updateValueFromInput(e: Event): void;
     /**
      * Determines where the press occured and which values of the Range Slider
      * handles should be updated on further interaction.
@@ -261,6 +268,10 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
      * @private
      */
     _updateHandlesAndRange(newValue: number): void;
+    _onInputKeydown(e: KeyboardEvent): void;
+    _updateInputValue(): void;
+    _saveInputValues(): void;
+    _getFormattedValue(value: string): string;
     /**
      * Swaps the start and end values of the handles if one came accros the other:
      * - If the start value is greater than the endValue swap them and their handles
@@ -286,9 +297,8 @@ declare class RangeSlider extends SliderBase implements IFormInputElement {
     get _startHandle(): HTMLElement;
     get _endHandle(): HTMLElement;
     get _progressBar(): HTMLElement;
-    get _ariaLabelledByStartHandleRefs(): string;
-    get _ariaLabelledByEndHandleRefs(): string;
-    get _ariaLabelledByProgressBarRefs(): string;
+    get _ariaLabelledByInputText(): string;
+    get _ariaDescribedByInputText(): string;
     get styles(): {
         progress: {
             [x: string]: string;

package/dist/RangeSlider.js

@@ -8,12 +8,13 @@ var RangeSlider_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import { isEscape, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEscape, isEnter, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
 import Icon from "./Icon.js";
 import RangeSliderTemplate from "./generated/templates/RangeSliderTemplate.lit.js";
+import Input from "./Input.js";
 // Texts
-import { RANGE_SLIDER_ARIA_DESCRIPTION, RANGE_SLIDER_START_HANDLE_DESCRIPTION, RANGE_SLIDER_END_HANDLE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
+import { RANGE_SLIDER_ARIA_DESCRIPTION, RANGE_SLIDER_START_HANDLE_DESCRIPTION, RANGE_SLIDER_END_HANDLE_DESCRIPTION, SLIDER_TOOLTIP_INPUT_LABEL, SLIDER_TOOLTIP_INPUT_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import rangeSliderStyles from "./generated/themes/RangeSlider.css.js";
 /**
@@ -99,11 +100,16 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
          */
         this.endValue = 100;
         this.rangePressed = false;
+        this._isStartValueValid = false;
+        this._isEndValueValid = false;
         this._isPressInCurrentRange = false;
         this._handeIsPressed = false;
         this._reversedValues = false;
+        this._areInputValuesSwapped = false;
         this._stateStorage.startValue = undefined;
         this._stateStorage.endValue = undefined;
+        this._lastValidStartValue = this.min.toString();
+        this._lastValidEndValue = this.max.toString();
     }
     get tooltipStartValue() {
         const ctor = this.constructor;
@@ -155,12 +161,16 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             this._setAffectedValue(affectedValue);
             this.update(affectedValue, this.startValue, this.endValue);
         }
+        if (this.editableTooltip) {
+            this._saveInputValues();
+        }
         if (!this.isCurrentStateOutdated()) {
             return;
         }
         this.notResized = true;
         this.syncUIAndState();
         this._updateHandlesAndRange(0);
+        this.update(this._valueAffected, this.startValue, this.endValue);
     }
     syncUIAndState() {
         // Validate step and update the stored state for the step property.
@@ -214,7 +224,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
      * Resets the stored Range Slider's initial values saved when it was first focused
      * @private
      */
-    _onfocusout() {
+    _onfocusout(e) {
         if (this._isFocusing()) {
             this._preventFocusOut();
             return;
@@ -222,9 +232,36 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._setAffectedValue(undefined);
         this._startValueInitial = undefined;
         this._endValueInitial = undefined;
-        if (this.showTooltip) {
+        if (this.showTooltip && !e.relatedTarget?.hasAttribute("ui5-input")) {
+            this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
+        }
+    }
+    _onInputFocusOut(e) {
+        const tooltipInput = e.target;
+        const oppositeTooltipInput = tooltipInput.hasAttribute("data-sap-ui-start-value") ? this.shadowRoot.querySelector("[ui5-input][data-sap-ui-end-value]") : this.shadowRoot.querySelector("[ui5-input][data-sap-ui-start-value]");
+        const relatedTarget = e.relatedTarget;
+        if (this.startValue > this.endValue) {
+            this._areInputValuesSwapped = true;
+            oppositeTooltipInput.focus();
+            return;
+        }
+        if (tooltipInput.hasAttribute("data-sap-ui-start-value")) {
+            this._setAffectedValue("startValue");
+        }
+        else {
+            this._setAffectedValue("endValue");
+        }
+        if (!this._areInputValuesSwapped || !this.shadowRoot.contains(relatedTarget)) {
             this._tooltipVisibility = SliderBase.TOOLTIP_VISIBILITY.HIDDEN;
         }
+        this._updateValueFromInput(e);
+        this._updateInputValue();
+        this.update(this._valueAffected, parseFloat(this._lastValidStartValue), parseFloat(this._lastValidEndValue));
+        const isTooltipInputValueValid = parseFloat(tooltipInput.value) >= this.min && parseFloat(tooltipInput.value) <= this.max;
+        if (!isTooltipInputValueValid) {
+            tooltipInput.value = tooltipInput.hasAttribute("data-sap-ui-start-value") ? this._lastValidStartValue : this._lastValidEndValue;
+            tooltipInput.valueState = "None";
+        }
     }
     /**
     * Handles keyup logic. If one of the handles came across the other
@@ -232,9 +269,11 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
     * user interaction.
     * @private
     */
-    _onkeyup() {
-        super._onkeyup();
-        this._setAffectedValue(undefined);
+    _onkeyup(e) {
+        super._onKeyupBase();
+        if (!isEnter(e)) {
+            this._setAffectedValue(undefined);
+        }
         if (this.startValue !== this._startValueAtBeginningOfAction || this.endValue !== this._endValueAtBeginningOfAction) {
             this.fireDecoratorEvent("change");
         }
@@ -340,9 +379,12 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
      * @private
      */
     _onmousedown(e) {
+        if (e?.button && e?.button !== 0) {
+            return;
+        }
         // If step is 0 no interaction is available because there is no constant
         // (equal for all user environments) quantitative representation of the value
-        if (this.disabled || this._effectiveStep === 0) {
+        if (this.disabled || this._effectiveStep === 0 || e.target.hasAttribute("ui5-input")) {
             return;
         }
         // Calculate the new value from the press position of the event
@@ -387,7 +429,7 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
     _handleMove(e) {
         e.preventDefault();
         // If 'step' is 0 no interaction is available as there is no constant quantitative representation of the value
-        if (this.disabled || this._effectiveStep === 0) {
+        if (this.disabled || this._effectiveStep === 0 || e.target.hasAttribute("ui5-input")) {
             return;
         }
         // Update UI and state when dragging a single Range Slider handle
@@ -421,7 +463,10 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         // Update the UI and the state according to the calculated new values
         this.update(undefined, newValues[0], newValues[1]);
     }
-    _handleUp() {
+    _handleUp(e) {
+        if (e.target.hasAttribute("ui5-input")) {
+            return;
+        }
         this._setAffectedValueByFocusedElement();
         this._setAffectedValue(undefined);
         if (this.startValue !== this._startValueAtBeginningOfAction || this.endValue !== this._endValueAtBeginningOfAction) {
@@ -433,6 +478,25 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         this._startValueAtBeginningOfAction = undefined;
         this._endValueAtBeginningOfAction = undefined;
     }
+    _updateValueFromInput(e) {
+        if (this._areInputValuesSwapped) {
+            return;
+        }
+        const input = e.target;
+        const inputValue = parseFloat(input.value);
+        const isValueValid = inputValue >= this._effectiveMin && inputValue <= this._effectiveMax;
+        if (!isValueValid) {
+            return;
+        }
+        if (input.hasAttribute("data-sap-ui-start-value")) {
+            this.startValue = inputValue;
+            return;
+        }
+        this.endValue = inputValue;
+        if (this.startValue > this.endValue) {
+            this._areInputValuesSwapped = true;
+        }
+    }
     /**
      * Determines where the press occured and which values of the Range Slider
      * handles should be updated on further interaction.
@@ -518,6 +582,9 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
      * @protected
      */
     focusInnerElement() {
+        if (this.editableTooltip && this._tooltipVisibility === SliderBase.TOOLTIP_VISIBILITY.HIDDEN) {
+            return;
+        }
         const isReversed = this._areValuesReversed();
         const affectedValue = this._valueAffected;
         if (this._isPressInCurrentRange || !affectedValue) {
@@ -620,6 +687,84 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
             this._secondHandlePositionFromStart = ((this.endValue - min) / (max - min)) * 100;
         }
     }
+    _onInputKeydown(e) {
+        const targetedInput = e.target;
+        const startValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-start-value]");
+        const endValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-end-value]");
+        const startValue = parseFloat(startValueInput.value);
+        const endValue = parseFloat(endValueInput.value);
+        const affectedValue = targetedInput.hasAttribute("data-sap-ui-start-value") ? "startValue" : "endValue";
+        super._onInputKeydown(e);
+        if (isEnter(e) && startValue > endValue) {
+            const swappedInput = affectedValue === "startValue" ? endValueInput : startValueInput;
+            const isValueValid = parseFloat(targetedInput.value) >= this.min && parseFloat(startValueInput.value) <= this.max;
+            if (!isValueValid) {
+                targetedInput.valueState = "Negative";
+                return;
+            }
+            this._isEndValueValid = parseFloat(endValueInput.value) >= this.min && parseFloat(endValueInput.value) <= this.max;
+            this._areInputValuesSwapped = true;
+            this._setAffectedValue(affectedValue === "startValue" ? "endValue" : "startValue");
+            startValueInput.value = this._getFormattedValue(this.endValue.toString());
+            endValueInput.value = this._getFormattedValue(this.startValue.toString());
+            swappedInput.focus();
+            return;
+        }
+        this._setAffectedValue(affectedValue);
+    }
+    _updateInputValue() {
+        const startValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-start-value]");
+        const endValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-end-value]");
+        if (!startValueInput && !endValueInput) {
+            return;
+        }
+        this._isStartValueValid = parseFloat(startValueInput.value) >= this.min && parseFloat(startValueInput.value) <= this.max;
+        this._isEndValueValid = parseFloat(endValueInput.value) >= this.min && parseFloat(endValueInput.value) <= this.max;
+        if (!this._isStartValueValid) {
+            startValueInput.valueState = "Negative";
+            return;
+        }
+        if (!this._isEndValueValid) {
+            endValueInput.valueState = "Negative";
+            return;
+        }
+        this._lastValidStartValue = startValueInput.value;
+        this._lastValidEndValue = endValueInput.value;
+        startValueInput.valueState = "None";
+        endValueInput.valueState = "None";
+    }
+    _saveInputValues() {
+        const startValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-start-value]");
+        const endValueInput = this.shadowRoot.querySelector("[ui5-input][data-sap-ui-end-value]");
+        if (this.editableTooltip && startValueInput && endValueInput) {
+            const inputStartValue = parseFloat(startValueInput.value);
+            const inputEndValue = parseFloat(endValueInput.value);
+            const isStartValueValid = inputStartValue >= this.min && inputStartValue <= this.max;
+            const isEndValueValid = inputEndValue >= this.min && inputEndValue <= this.max;
+            if (this._isUserInteraction) {
+                startValueInput.value = isStartValueValid ? this._getFormattedValue(this.startValue.toString()) : this._getFormattedValue(this._lastValidStartValue);
+                endValueInput.value = isEndValueValid ? this._getFormattedValue(this.endValue.toString()) : this._getFormattedValue(this._lastValidEndValue);
+                this.startValue = parseFloat(this._getFormattedValue(this.startValue.toString()));
+                this.endValue = parseFloat(this._getFormattedValue(this.endValue.toString()));
+                this.syncUIAndState();
+                this._updateHandlesAndRange(0);
+                this.update(this._valueAffected, this.startValue, this.endValue);
+                return;
+            }
+            this._lastValidStartValue = isStartValueValid ? this._getFormattedValue(inputStartValue.toString()) : this._getFormattedValue(this._lastValidStartValue);
+            this._lastValidEndValue = isEndValueValid ? this._getFormattedValue(inputEndValue.toString()) : this._getFormattedValue(this._lastValidEndValue);
+            if (startValueInput.valueState !== "Negative" && endValueInput.valueState !== "Negative") {
+                startValueInput.value = isStartValueValid ? this._getFormattedValue(inputStartValue.toString()) : this._getFormattedValue(this._lastValidStartValue);
+                endValueInput.value = isEndValueValid ? this._getFormattedValue(inputEndValue.toString()) : this._getFormattedValue(this._lastValidEndValue);
+            }
+        }
+    }
+    _getFormattedValue(value) {
+        const valueNumber = parseFloat(value);
+        const ctor = this.constructor;
+        const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
+        return valueNumber.toFixed(stepPrecision).toString();
+    }
     /**
      * Swaps the start and end values of the handles if one came accros the other:
      * - If the start value is greater than the endValue swap them and their handles
@@ -648,8 +793,11 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
         }
         this._setValuesAreReversed();
         this._updateHandlesAndRange(this[affectedValue]);
-        this.focusInnerElement();
+        if (!this._areInputValuesSwapped) {
+            this.focusInnerElement();
+        }
         this.syncUIAndState();
+        this._areInputValuesSwapped = false;
     }
     /**
      * Flag that we have swapped the values of the 'start' and 'end' properties,
@@ -686,14 +834,11 @@ let RangeSlider = RangeSlider_1 = class RangeSlider extends SliderBase {
     get _progressBar() {
         return this.shadowRoot.querySelector(".ui5-slider-progress");
     }
-    get _ariaLabelledByStartHandleRefs() {
-        return [`${this._id}-accName`, `${this._id}-startHandleDesc`].join(" ").trim();
-    }
-    get _ariaLabelledByEndHandleRefs() {
-        return [`${this._id}-accName`, `${this._id}-endHandleDesc`].join(" ").trim();
+    get _ariaLabelledByInputText() {
+        return RangeSlider_1.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_LABEL);
     }
-    get _ariaLabelledByProgressBarRefs() {
-        return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
+    get _ariaDescribedByInputText() {
+        return RangeSlider_1.i18nBundle.getText(SLIDER_TOOLTIP_INPUT_DESCRIPTION);
     }
     get styles() {
         return {
@@ -730,6 +875,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], RangeSlider.prototype, "rangePressed", void 0);
+__decorate([
+    property({ type: Boolean })
+], RangeSlider.prototype, "_isStartValueValid", void 0);
+__decorate([
+    property({ type: Boolean })
+], RangeSlider.prototype, "_isEndValueValid", void 0);
 __decorate([
     i18n("@ui5/webcomponents")
 ], RangeSlider, "i18nBundle", void 0);
@@ -739,7 +890,7 @@ RangeSlider = RangeSlider_1 = __decorate([
         languageAware: true,
         formAssociated: true,
         template: RangeSliderTemplate,
-        dependencies: [Icon],
+        dependencies: [Icon, Input],
         styles: [SliderBase.styles, rangeSliderStyles],
     })
 ], RangeSlider);