@ui5/webcomponents 0.0.0-47cc17a26 → 0.0.0-49bade48d

package/dist/FileUploaderTemplate.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
 import Icon from "./Icon.js";
-import valueHelp from "@ui5/webcomponents-icons/dist/value-help.js";
+import browseIcon from "@ui5/webcomponents-icons/dist/browse-folder.js";
 import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import Tokenizer from "./Tokenizer.js";
 import Token from "./Token.js";
 import FileUploaderPopoverTemplate from "./FileUploaderPopoverTemplate.js";
 export default function FileUploaderTemplate() {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-file-uploader-root", onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onMouseDown: this._onmousedown, onDragOver: this._ondrag, onDrop: this._ondrop, children: [_jsx("form", { class: "ui5-file-uploader-form", onSubmit: this._onFormSubmit, children: _jsx("input", { type: "file", class: "ui5-file-uploader-native-input", name: this.name, multiple: this.multiple, accept: this.accept, disabled: this.disabled, title: this.inputTitle, "aria-roledescription": this.accInfo.ariaRoledescription, "aria-haspopup": this.accInfo.ariaHasPopup, "aria-label": this.accInfo.ariaLabel, "aria-description": this.accInfo.ariaDescription, "aria-required": this.accInfo.ariaRequired, "aria-invalid": this.accInfo.ariaInvalid, onClick: this._onNativeInputClick, onChange: this._onChange, "data-sap-focus-ref": true }) }), this.hideInput ? (_jsx("slot", {})) : (_jsxs("div", { class: "ui5-file-uploader-display-container", children: [_jsxs("div", { class: "ui5-file-uploader-display-elements", children: [this._selectedFilesNames.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Tokenizer, { class: "ui5-file-uploader-tokenizer", expanded: this._tokenizerExpanded, open: this._tokenizerOpen, popoverMinWidth: this._formWidth, onClick: this._onTokenizerClick, onMouseDown: this._onTokenizerMouseDown, onKeyDown: this._onTokenizerKeyDown, onKeyUp: this._onTokenizerKeyUp, preventInitialFocus: true, readonly: true, children: this._selectedFilesNames.map(fileName => (_jsx(Token, { text: fileName }))) }), _jsx(Icon, { name: decline, class: "ui5-file-uploader-clear-icon inputIcon", onClick: this._onClearIconClick, title: this.clearIconTitle })] })) : (_jsx("input", { class: "ui5-file-uploader-display-input", tabindex: -1, "aria-hidden": "true", title: this.inputTitle, placeholder: this.resolvedPlaceholder, "inner-input": true, readonly: true })), _jsx(Icon, { name: valueHelp, class: "ui5-file-uploader-value-help-icon inputIcon", title: this.valueHelpTitle })] }), _jsx("slot", {})] }))] }), FileUploaderPopoverTemplate.call(this)] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-file-uploader-root", onFocusIn: this._onfocusin, onFocusOut: this._onfocusout, onKeyDown: this._onkeydown, onKeyUp: this._onkeyup, onClick: this._onclick, onMouseDown: this._onmousedown, onDragOver: this._ondrag, onDrop: this._ondrop, children: [_jsx("div", { class: "ui5-file-uploader-form", children: _jsx("input", { type: "file", class: "ui5-file-uploader-native-input", name: this.name, multiple: this.multiple, accept: this.accept, disabled: this.disabled, title: this.inputTitle, "aria-roledescription": this.accInfo.ariaRoledescription, "aria-haspopup": this.accInfo.ariaHasPopup, "aria-label": this.accInfo.ariaLabel, "aria-description": this.accInfo.ariaDescription, "aria-required": this.accInfo.ariaRequired, "aria-invalid": this.accInfo.ariaInvalid, onClick: this._onNativeInputClick, onChange: this._onChange, "data-sap-focus-ref": true }) }), this.hideInput ? (_jsx("slot", {})) : (_jsxs("div", { class: "ui5-file-uploader-display-container", children: [_jsxs("div", { class: "ui5-file-uploader-display-elements", children: [this._selectedFilesNames.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Tokenizer, { class: "ui5-file-uploader-tokenizer", expanded: this._tokenizerExpanded, open: this._tokenizerOpen, popoverMinWidth: this._formWidth, onClick: this._onTokenizerClick, onMouseDown: this._onTokenizerMouseDown, onKeyDown: this._onTokenizerKeyDown, onKeyUp: this._onTokenizerKeyUp, preventInitialFocus: true, readonly: true, children: this._selectedFilesNames.map(fileName => (_jsx(Token, { text: fileName }))) }), _jsx(Icon, { name: decline, class: "ui5-file-uploader-clear-icon inputIcon", onClick: this._onClearIconClick, title: this.clearIconTitle })] })) : (_jsx("input", { class: "ui5-file-uploader-display-input", tabindex: -1, "aria-hidden": "true", title: this.inputTitle, placeholder: this.resolvedPlaceholder, "inner-input": true, readonly: true })), _jsx(Icon, { name: browseIcon, class: "ui5-file-uploader-value-help-icon inputIcon", title: this.valueHelpTitle })] }), _jsx("slot", {})] }))] }), FileUploaderPopoverTemplate.call(this)] }));
 }
 //# sourceMappingURL=FileUploaderTemplate.js.map

package/dist/FileUploaderTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploaderTemplate.js","sourceRoot":"","sources":["../src/FileUploaderTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Icon from \"./Icon.js\";\nimport valueHelp from \"@ui5/webcomponents-icons/dist/value-help.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport Tokenizer from \"./Tokenizer.js\";\nimport Token from \"./Token.js\";\nimport type FileUploader from \"./FileUploader.js\";\nimport FileUploaderPopoverTemplate from \"./FileUploaderPopoverTemplate.js\";\n\nexport default function FileUploaderTemplate(this: FileUploader) {\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-file-uploader-root\"\n\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\tonClick={this._onclick}\n\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t\tonDragOver={this._ondrag}\n\t\t\t\tonDrop={this._ondrop}\n\t\t\t>\n\t\t\t\t<form class=\"ui5-file-uploader-form\" onSubmit={this._onFormSubmit}>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tclass=\"ui5-file-uploader-native-input\"\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\t\taccept={this.accept}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\ttitle={this.inputTitle}\n\t\t\t\t\t\taria-roledescription={this.accInfo.ariaRoledescription}\n\t\t\t\t\t\taria-haspopup={this.accInfo.ariaHasPopup}\n\t\t\t\t\t\taria-label={this.accInfo.ariaLabel}\n\t\t\t\t\t\taria-description={this.accInfo.ariaDescription}\n\t\t\t\t\t\taria-required={this.accInfo.ariaRequired}\n\t\t\t\t\t\taria-invalid={this.accInfo.ariaInvalid}\n\t\t\t\t\t\tonClick={this._onNativeInputClick}\n\t\t\t\t\t\tonChange={this._onChange}\n\t\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\t/>\n\t\t\t\t</form>\n\n\t\t\t\t{this.hideInput ? (\n\t\t\t\t\t<slot></slot>\n\t\t\t\t) : (\n\t\t\t\t\t<div class=\"ui5-file-uploader-display-container\">\n\t\t\t\t\t\t<div class=\"ui5-file-uploader-display-elements\">\n\t\t\t\t\t\t\t{this._selectedFilesNames.length > 0 ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Tokenizer\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-tokenizer\"\n\t\t\t\t\t\t\t\t\t\texpanded={this._tokenizerExpanded}\n\t\t\t\t\t\t\t\t\t\topen={this._tokenizerOpen}\n\t\t\t\t\t\t\t\t\t\tpopoverMinWidth={this._formWidth}\n\t\t\t\t\t\t\t\t\t\tonClick={this._onTokenizerClick}\n\t\t\t\t\t\t\t\t\t\tonMouseDown={this._onTokenizerMouseDown}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this._onTokenizerKeyDown}\n\t\t\t\t\t\t\t\t\t\tonKeyUp={this._onTokenizerKeyUp}\n\t\t\t\t\t\t\t\t\t\tpreventInitialFocus\n\t\t\t\t\t\t\t\t\t\treadonly\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{this._selectedFilesNames.map(fileName => (\n\t\t\t\t\t\t\t\t\t\t\t<Token\n\t\t\t\t\t\t\t\t\t\t\t\ttext={fileName}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</Tokenizer>\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\tname={decline}\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-clear-icon inputIcon\"\n\t\t\t\t\t\t\t\t\t\tonClick={this._onClearIconClick}\n\t\t\t\t\t\t\t\t\t\ttitle={this.clearIconTitle}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-display-input\"\n\t\t\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\ttitle={this.inputTitle}\n\t\t\t\t\t\t\t\t\tplaceholder={this.resolvedPlaceholder}\n\t\t\t\t\t\t\t\t\tinner-input\n\t\t\t\t\t\t\t\t\treadonly\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tname={valueHelp}\n\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-value-help-icon inputIcon\"\n\t\t\t\t\t\t\t\ttitle={this.valueHelpTitle}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{ FileUploaderPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"file":"FileUploaderTemplate.js","sourceRoot":"","sources":["../src/FileUploaderTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import Icon from \"./Icon.js\";\nimport browseIcon from \"@ui5/webcomponents-icons/dist/browse-folder.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport Tokenizer from \"./Tokenizer.js\";\nimport Token from \"./Token.js\";\nimport type FileUploader from \"./FileUploader.js\";\nimport FileUploaderPopoverTemplate from \"./FileUploaderPopoverTemplate.js\";\n\nexport default function FileUploaderTemplate(this: FileUploader) {\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tclass=\"ui5-file-uploader-root\"\n\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t\tonFocusOut={this._onfocusout}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\tonClick={this._onclick}\n\t\t\t\tonMouseDown={this._onmousedown}\n\t\t\t\tonDragOver={this._ondrag}\n\t\t\t\tonDrop={this._ondrop}\n\t\t\t>\n\t\t\t\t<div class=\"ui5-file-uploader-form\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tclass=\"ui5-file-uploader-native-input\"\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tmultiple={this.multiple}\n\t\t\t\t\t\taccept={this.accept}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\ttitle={this.inputTitle}\n\t\t\t\t\t\taria-roledescription={this.accInfo.ariaRoledescription}\n\t\t\t\t\t\taria-haspopup={this.accInfo.ariaHasPopup}\n\t\t\t\t\t\taria-label={this.accInfo.ariaLabel}\n\t\t\t\t\t\taria-description={this.accInfo.ariaDescription}\n\t\t\t\t\t\taria-required={this.accInfo.ariaRequired}\n\t\t\t\t\t\taria-invalid={this.accInfo.ariaInvalid}\n\t\t\t\t\t\tonClick={this._onNativeInputClick}\n\t\t\t\t\t\tonChange={this._onChange}\n\t\t\t\t\t\tdata-sap-focus-ref\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{this.hideInput ? (\n\t\t\t\t\t<slot></slot>\n\t\t\t\t) : (\n\t\t\t\t\t<div class=\"ui5-file-uploader-display-container\">\n\t\t\t\t\t\t<div class=\"ui5-file-uploader-display-elements\">\n\t\t\t\t\t\t\t{this._selectedFilesNames.length > 0 ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Tokenizer\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-tokenizer\"\n\t\t\t\t\t\t\t\t\t\texpanded={this._tokenizerExpanded}\n\t\t\t\t\t\t\t\t\t\topen={this._tokenizerOpen}\n\t\t\t\t\t\t\t\t\t\tpopoverMinWidth={this._formWidth}\n\t\t\t\t\t\t\t\t\t\tonClick={this._onTokenizerClick}\n\t\t\t\t\t\t\t\t\t\tonMouseDown={this._onTokenizerMouseDown}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this._onTokenizerKeyDown}\n\t\t\t\t\t\t\t\t\t\tonKeyUp={this._onTokenizerKeyUp}\n\t\t\t\t\t\t\t\t\t\tpreventInitialFocus\n\t\t\t\t\t\t\t\t\t\treadonly\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{this._selectedFilesNames.map(fileName => (\n\t\t\t\t\t\t\t\t\t\t\t<Token\n\t\t\t\t\t\t\t\t\t\t\t\ttext={fileName}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</Tokenizer>\n\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\tname={decline}\n\t\t\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-clear-icon inputIcon\"\n\t\t\t\t\t\t\t\t\t\tonClick={this._onClearIconClick}\n\t\t\t\t\t\t\t\t\t\ttitle={this.clearIconTitle}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-display-input\"\n\t\t\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\ttitle={this.inputTitle}\n\t\t\t\t\t\t\t\t\tplaceholder={this.resolvedPlaceholder}\n\t\t\t\t\t\t\t\t\tinner-input\n\t\t\t\t\t\t\t\t\treadonly\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tname={browseIcon}\n\t\t\t\t\t\t\t\tclass=\"ui5-file-uploader-value-help-icon inputIcon\"\n\t\t\t\t\t\t\t\ttitle={this.valueHelpTitle}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{ FileUploaderPopoverTemplate.call(this) }\n\t\t</>\n\t);\n}\n"]}

package/dist/Form.d.ts

@@ -1,6 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { AriaRole } from "@ui5/webcomponents-base";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { Breakpoint } from "./form-utils/FormUtils.js";
 import type FormItemSpacing from "./types/FormItemSpacing.js";
 import type FormAccessibleMode from "./types/FormAccessibleMode.js";
 import type TitleLevel from "./types/TitleLevel.js";
@@ -16,6 +18,7 @@ interface IFormItem extends UI5Element {
     colsL?: number;
     colsM?: number;
     colsS?: number;
+    colSpan?: string;
     columnSpan?: number;
     headerText?: string;
     headerLevel?: `${TitleLevel}`;
@@ -62,10 +65,10 @@ type ItemsInfo = {
  *
  * The Form component reacts and changes its layout on predefined breakpoints.
  * Depending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:
- * - **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: 3)
+ * - **S** (0 - 599px) – 1 column is recommended (default: 1)
+ * - **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)
+ * - **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)
+ * - **XL** (>= 1440px) – up to 6 columns are recommended (default: 3)
  *
  * To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6".
  *
@@ -126,23 +129,7 @@ type ItemsInfo = {
  *
  * ### Navigation flow
  *
- * The Form component supports two layout options for keyboard navigation:
- *
- * #### Simple form
- *
- * In this "simple form" layout, each `ui5-form-item` acts as a standalone group
- * with one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.
- * This layout is ideal for simpler forms and supports custom arrangements, e.g.,
- *
- * ```
- * | 1 | 2 |
- * |   3   |
- * | 4 | 5 |
- * ```
- *
- * #### Complex form
- *
- * In this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:
+ * Items are grouped into `ui5-form-group` elements, allowing the following navigation:
  *
  * - **Single-Column Group**: Focus moves vertically down from one item to the next.
  *   ```
@@ -285,15 +272,19 @@ declare class Form extends UI5Element {
      * **Note:** When a `header` is provided, the `headerText` property is ignored.
      * @public
      */
-    header: Array<HTMLElement>;
+    header: Slot<HTMLElement>;
     /**
      * Defines the component content - FormGroups or FormItems.
      *
      * **Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.
      * Either use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.
+     *
+     * **Note:** As of version 2.23.0 the support for standalone FormItems (not belonging to a group) is deprecated.
+     * We recommend using FormGroups, as they provide better accessibility and layout options.
+     *
      * @public
      */
-    items: Array<IFormItem>;
+    items: DefaultSlot<IFormItem>;
     static i18nBundle: I18nBundle;
     /**
      * @private
@@ -312,13 +303,10 @@ declare class Form extends UI5Element {
     emptySpanXl: number;
     onBeforeRendering(): void;
     onAfterRendering(): void;
-    setColumnLayout(): void;
-    parseFormItemSpan(): void;
-    setFormItemLayout(): void;
-    isValidFormItemLayout(labelSpan: number, emptySpan: number): boolean;
+    parseLayoutConfiguration(): void;
+    getFormItemLayout(breakpoint: Breakpoint): string;
     setFastNavGroup(): void;
     setGroupsColSpan(): void;
-    getGroupsColSpan(cols: number, groups: number, index: number, group: IFormItem): number;
     setItemsState(): void;
     get hasGroupItems(): boolean;
     get hasHeader(): boolean;
@@ -330,9 +318,6 @@ declare class Form extends UI5Element {
     get groupItemsInfo(): Array<GroupItemsInfo>;
     get itemsInfo(): Array<ItemsInfo>;
     getItemsInfo(items?: Array<IFormItem>): Array<ItemsInfo>;
-    createAdditionalCSSStyleSheet(): void;
-    getAdditionalCSS(step: string, colsNumber: number): string | undefined;
-    getCSSStyleSheet(cssText: string): CSSStyleSheet;
 }
 export default Form;
 export type { IFormItem, };

package/dist/Form.js

@@ -9,26 +9,16 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 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 { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
+// Utils
+import { getFormItemLayoutValue, getGroupsColSpan } from "./form-utils/FormUtils.js";
 // Template
 import FormTemplate from "./FormTemplate.js";
 // Styles
 import FormCss from "./generated/themes/Form.css.js";
 import { FORM_ACCESSIBLE_NAME } from "./generated/i18n/i18n-defaults.js";
-const additionalStylesMap = new Map();
-const StepColumn = {
-    "S": 1,
-    "M": 2,
-    "L": 3,
-    "XL": 6,
-};
-const breakpoints = ["S", "M", "L", "Xl"];
-const MAX_FORM_ITEM_CELLS = 12;
-const DEFAULT_FORM_ITEM_LAYOUT = "4fr 8fr 0fr";
-const DEFAULT_FORM_ITEM_LAYOUT_S = "1fr";
 /**
  * @class
  *
@@ -58,10 +48,10 @@ const DEFAULT_FORM_ITEM_LAYOUT_S = "1fr";
  *
  * The Form component reacts and changes its layout on predefined breakpoints.
  * Depending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:
- * - **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: 3)
+ * - **S** (0 - 599px) – 1 column is recommended (default: 1)
+ * - **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)
+ * - **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)
+ * - **XL** (>= 1440px) – up to 6 columns are recommended (default: 3)
  *
  * To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6".
  *
@@ -122,23 +112,7 @@ const DEFAULT_FORM_ITEM_LAYOUT_S = "1fr";
  *
  * ### Navigation flow
  *
- * The Form component supports two layout options for keyboard navigation:
- *
- * #### Simple form
- *
- * In this "simple form" layout, each `ui5-form-item` acts as a standalone group
- * with one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.
- * This layout is ideal for simpler forms and supports custom arrangements, e.g.,
- *
- * ```
- * | 1 | 2 |
- * |   3   |
- * | 4 | 5 |
- * ```
- *
- * #### Complex form
- *
- * In this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:
+ * Items are grouped into `ui5-form-group` elements, allowing the following navigation:
  *
  * - **Single-Column Group**: Focus moves vertically down from one item to the next.
  *   ```
@@ -272,22 +246,17 @@ let Form = Form_1 = class Form extends UI5Element {
     }
     onBeforeRendering() {
         // Parse the layout and set it to the FormGroups/FormItems.
-        this.setColumnLayout();
-        // Parse the labelSpan and emptySpan and set it to the FormGroups/FormItems.
-        this.setFormItemLayout();
+        this.parseLayoutConfiguration();
         // Define how many columns a group should take.
         this.setGroupsColSpan();
         // Set item spacing
         this.setItemsState();
     }
     onAfterRendering() {
-        // Create additional CSS for number of columns that are not supported by default.
-        this.createAdditionalCSSStyleSheet();
         this.setFastNavGroup();
     }
-    setColumnLayout() {
-        const layoutArr = this.layout.split(" ");
-        layoutArr.forEach((breakpoint) => {
+    parseLayoutConfiguration() {
+        this.layout.split(" ").forEach((breakpoint) => {
             if (breakpoint.startsWith("S")) {
                 this.columnsS = parseInt(breakpoint.slice(1));
             }
@@ -301,8 +270,6 @@ let Form = Form_1 = class Form extends UI5Element {
                 this.columnsXl = parseInt(breakpoint.slice(2));
             }
         });
-    }
-    parseFormItemSpan() {
         this.labelSpan.split(" ").forEach((breakpoint) => {
             if (breakpoint.startsWith("S")) {
                 this.labelSpanS = parseInt(breakpoint.slice(1));
@@ -332,43 +299,25 @@ let Form = Form_1 = class Form extends UI5Element {
             }
         });
     }
-    setFormItemLayout() {
-        this.parseFormItemSpan();
-        [
-            {
-                breakpoint: "S",
-                labelSpan: this.labelSpanS,
-                emptySpan: this.emptySpanS,
-            },
-            {
-                breakpoint: "M",
-                labelSpan: this.labelSpanM,
-                emptySpan: this.emptySpanM,
-            },
-            {
-                breakpoint: "L",
-                labelSpan: this.labelSpanL,
-                emptySpan: this.emptySpanL,
-            },
-            {
-                breakpoint: "XL",
-                labelSpan: this.labelSpanXl,
-                emptySpan: this.emptySpanXl,
-            },
-        ].forEach(layout => {
-            if (this.isValidFormItemLayout(layout.labelSpan, layout.emptySpan)) {
-                const formItemLayout = layout.labelSpan === MAX_FORM_ITEM_CELLS ? `1fr` : `${layout.labelSpan}fr ${MAX_FORM_ITEM_CELLS - (layout.labelSpan + layout.emptySpan)}fr ${layout.emptySpan}fr`;
-                this.style.setProperty(getScopedVarName(`--ui5-form-item-layout-${layout.breakpoint}`), formItemLayout);
-            }
-            else {
-                // eslint-disable-next-line
-                console.warn(`Form :: invalid usage of emptySpan and/or labelSpan in ${layout.breakpoint} size. The labelSpan must be <=12 and when emptySpace is used - their combined values must not exceed 11.`);
-                this.style.setProperty(getScopedVarName(`--ui5-form-item-layout-${layout.breakpoint}`), layout.breakpoint === "S" ? DEFAULT_FORM_ITEM_LAYOUT_S : DEFAULT_FORM_ITEM_LAYOUT);
-            }
-        });
-    }
-    isValidFormItemLayout(labelSpan, emptySpan) {
-        return emptySpan === 0 ? labelSpan <= MAX_FORM_ITEM_CELLS : labelSpan + emptySpan <= MAX_FORM_ITEM_CELLS - 1;
+    getFormItemLayout(breakpoint) {
+        let labelSpan, emptySpan;
+        if (breakpoint === "S") {
+            labelSpan = this.labelSpanS;
+            emptySpan = this.emptySpanS;
+        }
+        else if (breakpoint === "M") {
+            labelSpan = this.labelSpanM;
+            emptySpan = this.emptySpanM;
+        }
+        else if (breakpoint === "L") {
+            labelSpan = this.labelSpanL;
+            emptySpan = this.emptySpanL;
+        }
+        else if (breakpoint === "XL") {
+            labelSpan = this.labelSpanXl;
+            emptySpan = this.emptySpanXl;
+        }
+        return getFormItemLayoutValue(breakpoint, labelSpan, emptySpan);
     }
     setFastNavGroup() {
         if (this.hasGroupItems) {
@@ -387,37 +336,12 @@ let Form = Form_1 = class Form extends UI5Element {
             return itemB?.items.length - itemA?.items.length;
         });
         sortedItems.forEach((item, idx) => {
-            item.colsXl = this.getGroupsColSpan(this.columnsXl, itemsCount, idx, item);
-            item.colsL = this.getGroupsColSpan(this.columnsL, itemsCount, idx, item);
-            item.colsM = this.getGroupsColSpan(this.columnsM, itemsCount, idx, item);
-            item.colsS = this.getGroupsColSpan(this.columnsS, itemsCount, idx, item);
+            item.colsXl = getGroupsColSpan(this.columnsXl, itemsCount, idx, item, "XL");
+            item.colsL = getGroupsColSpan(this.columnsL, itemsCount, idx, item, "L");
+            item.colsM = getGroupsColSpan(this.columnsM, itemsCount, idx, item, "M");
+            item.colsS = getGroupsColSpan(this.columnsS, itemsCount, idx, item, "S");
         });
     }
-    getGroupsColSpan(cols, groups, index, group) {
-        // Case 0: column span is set from outside.
-        if (group.columnSpan) {
-            return group.columnSpan;
-        }
-        // CASE 1: The number of available columns match the number of groups, or only 1 column is available - each group takes 1 column.
-        // For example: 1 column - 1 group, 2 columns - 2 groups, 3 columns - 3 groups, 4columns - 4 groups
-        if (cols === 1 || cols <= groups) {
-            return 1;
-        }
-        // CASE 2: The number of available columns IS multiple of the number of groups.
-        // For example: 2 column - 1 group, 3 columns - 1 groups, 4 columns - 1 group, 4 columns - 2 groups
-        if (cols % groups === 0) {
-            return cols / groups;
-        }
-        // CASE 3: The number of available columns IS NOT multiple of the number of groups.
-        const MIN_COL_SPAN = 1;
-        const delta = cols - groups;
-        // 7 cols & 4 groups => 2, 2, 2, 1
-        if (delta <= groups) {
-            return index < delta ? MIN_COL_SPAN + 1 : MIN_COL_SPAN;
-        }
-        // 7 cols & 3 groups => 3, 2, 2
-        return index === 0 ? MIN_COL_SPAN + (delta - groups) + 1 : MIN_COL_SPAN + 1;
-    }
     setItemsState() {
         this.items.forEach((item) => {
             item.itemSpacing = this.itemSpacing;
@@ -453,24 +377,6 @@ let Form = Form_1 = class Form extends UI5Element {
     }
     get groupItemsInfo() {
         return this.items.map((groupItem, index) => {
-            const items = this.getItemsInfo(Array.from(groupItem.children));
-            breakpoints.forEach(breakpoint => {
-                const cols = ((groupItem[`cols${breakpoint}`]) || 1);
-                const rows = Math.ceil(items.length / cols);
-                const total = cols * rows;
-                const lastRowColumns = (cols - (total - items.length) - 1); // all other indecies start from 0
-                let currentItem = 0;
-                for (let i = 0; i < total; i++) {
-                    const column = Math.floor(i / rows);
-                    const row = i % rows;
-                    if (row === rows - 1 && column > lastRowColumns) {
-                        // eslint-disable-next-line no-continue
-                        continue;
-                    }
-                    items[currentItem].item.style.setProperty(getScopedVarName(`--ui5-form-item-order-${breakpoint}`), `${column + row * cols}`);
-                    currentItem++;
-                }
-            });
             const accessibleNameRef = groupItem.effectiveAccessibleNameRef;
             return {
                 groupItem,
@@ -490,81 +396,9 @@ let Form = Form_1 = class Form extends UI5Element {
         return (items || this.items).map((item) => {
             return {
                 item,
-                // eslint-disable-next-line
-                // TODO: remove classes and classMap after deleting the hbs template
-                classes: item.columnSpan ? `ui5-form-item-span-${item.columnSpan}` : "",
-                classMap: {
-                    [`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,
-                },
             };
         });
     }
-    createAdditionalCSSStyleSheet() {
-        [
-            { breakpoint: "S", columns: this.columnsS },
-            { breakpoint: "M", columns: this.columnsM },
-            { breakpoint: "L", columns: this.columnsL },
-            { breakpoint: "XL", columns: this.columnsXl },
-        ].forEach(step => {
-            const additionalStyle = this.getAdditionalCSS(step.breakpoint, step.columns);
-            if (additionalStyle) {
-                this.shadowRoot.adoptedStyleSheets = [...this.shadowRoot.adoptedStyleSheets, this.getCSSStyleSheet(additionalStyle)];
-            }
-        });
-    }
-    getAdditionalCSS(step, colsNumber) {
-        if (StepColumn[step] >= colsNumber) {
-            return;
-        }
-        const key = `${step}-${colsNumber}`;
-        if (!additionalStylesMap.has(key)) {
-            let containerQuery;
-            let supporedColumnsNumber = StepColumn.S;
-            let stepSpanCSS = "";
-            let cols = colsNumber;
-            if (step === "S") {
-                supporedColumnsNumber = StepColumn.S;
-                containerQuery = `@container (max-width: 599px) {`;
-            }
-            else if (step === "M") {
-                supporedColumnsNumber = StepColumn.M;
-                containerQuery = `@container (width > 599px) and (width < 1024px) {`;
-            }
-            else if (step === "L") {
-                supporedColumnsNumber = StepColumn.L;
-                containerQuery = `@container (width > 1023px) and (width < 1439px) {`;
-            }
-            else if (step === "XL") {
-                containerQuery = `@container (min-width: 1440px) {`;
-                supporedColumnsNumber = StepColumn.XL;
-            }
-            while (cols > supporedColumnsNumber) {
-                stepSpanCSS += `
-				:host([columns-${step.toLocaleLowerCase()}="${cols}"]) .ui5-form-layout {
-					grid-template-columns: repeat(${cols}, 1fr);
-				}
-
-				.ui5-form-column-span${step}-${cols},
-				.ui5-form-item-span-${cols} {
-					grid-column: span ${cols};
-				}
-
-				.ui5-form-column-span${step}-${cols} .ui5-form-group-layout {
-					grid-template-columns: repeat(${cols}, 1fr);
-				}
-				`;
-                cols--;
-            }
-            const css = `${containerQuery}${stepSpanCSS}}`;
-            additionalStylesMap.set(key, css);
-        }
-        return additionalStylesMap.get(key);
-    }
-    getCSSStyleSheet(cssText) {
-        const style = new CSSStyleSheet();
-        style.replaceSync(cssText);
-        return style;
-    }
 };
 __decorate([
     property()
@@ -594,7 +428,7 @@ __decorate([
     property()
 ], Form.prototype, "itemSpacing", void 0);
 __decorate([
-    slot({ type: HTMLElement })
+    slot()
 ], Form.prototype, "header", void 0);
 __decorate([
     slot({
@@ -605,40 +439,40 @@ __decorate([
     })
 ], Form.prototype, "items", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "columnsS", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "labelSpanS", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "emptySpanS", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "columnsM", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "labelSpanM", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "emptySpanM", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "columnsL", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "labelSpanL", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "emptySpanL", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "columnsXl", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "labelSpanXl", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, noAttribute: true })
 ], Form.prototype, "emptySpanXl", void 0);
 __decorate([
     i18n("@ui5/webcomponents")