@ui5/webcomponents 0.0.0-d9933bd82 → 0.0.0-da0d3eb88

package/dist/FileUploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.js","sourceRoot":"","sources":["../src/FileUploader.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AACrE,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,UAAU,MAAM,kDAAkD,CAAC;AAC1E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,OAAO,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EACN,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,EACjB,mBAAmB,GACnB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,WAAW;AACX,OAAO,oBAAoB,MAAM,mDAAmD,CAAC;AAErF,SAAS;AACT,OAAO,eAAe,MAAM,wCAAwC,CAAC;AACrE,OAAO,0BAA0B,MAAM,mDAAmD,CAAC;AAC3F,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAiCH,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,UAAU;IA0GpC,KAAK,CAAC,iBAAiB;QACtB,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;IACnC,CAAC;IAED,IAAI,kBAAkB;QACrB,IAAI,IAAI,CAAC,KAAK,EAAE;YACf,MAAM,QAAQ,GAAG,IAAI,QAAQ,EAAE,CAAC;YAEhC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBAC3C,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;aAC1C;YAED,OAAO,QAAQ,CAAC;SAChB;QAED,OAAO,IAAI,CAAC;IACb,CAAC;IAED,YAAY;QACX,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,WAAW;QACV,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAC3B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QACtC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,QAAQ,CAAC,CAAa;QACrB,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;YACjC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;SACpB;IACF,CAAC;IAED,UAAU,CAAC,CAAgB;QAC1B,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;SACnB;IACF,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;SACnB;IACF,CAAC;IAED,OAAO,CAAC,CAAY;QACnB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACrB,CAAC;IAED,OAAO,CAAC,CAAY;QACnB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,KAAK,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,CAAC;QAEpC,IAAI,KAAK,EAAE;YACV,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,SAAS,CAAgC,QAAQ,EAAE;gBACvD,KAAK;aACL,CAAC,CAAC;SACH;IACF,CAAC;IAED,UAAU;QACT,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACrB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACtB,CAAC;IAED;;;;OAIG;IACH,IAAI,KAAK;QACR,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;SACzB;QAED,OAAO,cAAY,CAAC,eAAe,CAAC;IACrC,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YAChB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;SACvB;QAED,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QACjB,MAAM,YAAY,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QAE1D,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAChC,IAAI,CAAC,SAAS,CAAgC,QAAQ,EAAE;YACvD,KAAK,EAAE,YAAY;SACnB,CAAC,CAAC;IACJ,CAAC;IAED,YAAY,CAAC,KAAsB;QAClC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE;YAC7D,OAAO,GAAG,GAAG,IAAI,QAAQ,CAAC,IAAI,IAAI,CAAC;QACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IACR,CAAC;IAED,uBAAuB,CAAC,IAAa;QACpC,IAAI,IAAI,EAAE;YACT,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC7B;aAAM;YACN,IAAI,CAAC,sBAAsB,EAAE,CAAC;SAC9B;IACF,CAAC;IAED,qBAAqB;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnC,IAAI,OAAO,EAAE;YACZ,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;YACtB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;SACpB;IACF,CAAC;IAED,sBAAsB;QACrB,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnC,IAAI,OAAO,EAAE;YACZ,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;SACrB;IACF,CAAC;IAED,WAAW;QACV,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAU,gCAAgC,CAAE,CAAC;IACnF,CAAC;IAED;;;OAGG;IACH,MAAM,KAAK,eAAe;QACzB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YACrB,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAClD,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,MAAM,CAAC;SAC9B;QACD,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IAC9B,CAAC;IAED,IAAI,UAAU;QACb,OAAO,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,SAAS;QACZ,OAAO,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;IAC5D,CAAC;IAED,IAAI,MAAM;QACT,OAAO,CAAC,IAAI,CAAC,UAAW,CAAC,aAAa,CAAmB,kBAAkB,CAAC,IAAI,IAAI,CAAC,aAAa,CAAmB,yCAAyC,CAAC,CAAE,CAAC;IACnK,CAAC;IAED,IAAI,sBAAsB;QACzB,OAAO;YACN,UAAU,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC;YAChE,aAAa,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,uBAAuB,CAAC;YACvE,UAAU,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC;YAC9D,UAAU,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC;SAChE,CAAC;IACH,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,IAAI,CAAC;IAC5C,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,QAAQ,CAAC;IACtE,CAAC;IAED,IAAI,qBAAqB;QACxB,OAAO,IAAI,CAAC,eAAe,CAAC,mBAAmB,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAChF,CAAC;IAED,IAAI,qCAAqC;QACxC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,MAAM,IAAI,IAAI,CAAC,iBAAiB,CAAC;IACjE,CAAC;IAED,IAAI,kCAAkC;QACrC,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;IAClE,CAAC;IAED;;OAEG;IACH,IAAI,2BAA2B;QAC9B,MAAM,iBAAiB,GAAG;YACzB,QAAQ,EAAE,OAAO;YACjB,QAAQ,EAAE,OAAO;YACjB,QAAQ,EAAE,aAAa;YACvB,WAAW,EAAE,aAAa;SAC1B,CAAC;QAEF,OAAO,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACtF,CAAC;IAED,IAAI,OAAO;QACV,OAAO;YACN,iBAAiB,EAAE;gBAClB,4BAA4B,EAAE,IAAI;gBAClC,gCAAgC,EAAE,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,QAAQ;gBACzE,8BAA8B,EAAE,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,QAAQ;gBACvE,gCAAgC,EAAE,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,QAAQ;gBACzE,oCAAoC,EAAE,IAAI,CAAC,UAAU,KAAK,UAAU,CAAC,WAAW;aAChF;SACD,CAAC;IACH,CAAC;IAED,IAAI,MAAM;QACT,OAAO;YACN,aAAa,EAAE;gBACd,OAAO,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI;aAC7D;SACD,CAAC;IACH,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAQ,0BAA0B,CAAC,CAAC;IAC1E,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,cAAY,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACrE,CAAC;CACD,CAAA;AAjVA;IADC,QAAQ,EAAE;4CACK;AAQhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACR;AAUpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACT;AAQnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACT;AAUnB;IADC,QAAQ,EAAE;0CACG;AAQd;IADC,QAAQ,EAAE;iDACU;AAUrB;IADC,QAAQ,EAAE;2CACI;AAQf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC;gDACjC;AAM7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACV;AAUlB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAChB;AAa7B;IADC,IAAI,EAAE;uDACgC;AApGlC,YAAY;IAhCjB,aAAa,CAAC;QACd,GAAG,EAAE,mBAAmB;QACxB,aAAa,EAAE,IAAI;QACnB,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE;YACP,eAAe;YACf,0BAA0B;YAC1B,oBAAoB;SACpB;QACD,QAAQ,EAAE,oBAAoB;QAC9B,YAAY,EAAE;YACb,KAAK;YACL,OAAO;YACP,IAAI;SACJ;KACD,CAAC;IACF;;;;;;OAMG;;IACF,KAAK,CAAgC,QAAQ,EAAE;QAC/C,MAAM,EAAE;YACP;;eAEG;YACH,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SACzB;KACD,CAAC;GACI,YAAY,CA0VjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,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 event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport ValueState from \"@ui5/webcomponents-base/dist/types/ValueState.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getEventMark } from \"@ui5/webcomponents-base/dist/MarkedEvents.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport type { IFormInputElement } from \"@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js\";\nimport {\n\tFILEUPLOAD_BROWSE,\n\tFILEUPLOADER_TITLE,\n\tVALUE_STATE_SUCCESS,\n\tVALUE_STATE_INFORMATION,\n\tVALUE_STATE_ERROR,\n\tVALUE_STATE_WARNING,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport Input from \"./Input.js\";\nimport Popover from \"./Popover.js\";\nimport Icon from \"./Icon.js\";\n\n// Template\nimport FileUploaderTemplate from \"./generated/templates/FileUploaderTemplate.lit.js\";\n\n// Styles\nimport FileUploaderCss from \"./generated/themes/FileUploader.css.js\";\nimport ResponsivePopoverCommonCss from \"./generated/themes/ResponsivePopoverCommon.css.js\";\nimport ValueStateMessageCss from \"./generated/themes/ValueStateMessage.css.js\";\n\ntype FileUploaderChangeEventDetail = {\n\tfiles: FileList | null,\n}\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-file-uploader` opens a file explorer dialog and enables users to upload files.\n * The component consists of input field, but you can provide an HTML element by your choice\n * to trigger the file upload, by using the default slot.\n * Furthermore, you can set the property \"hideInput\" to \"true\" to hide the input field.\n *\n * To get all selected files, you can simply use the read-only \"files\" property.\n * To restrict the types of files the user can select, you can use the \"accept\" property.\n *\n * And, similar to all input based components, the FileUploader supports \"valueState\", \"placeholder\", \"name\", and \"disabled\" properties.\n *\n * For the `ui5-file-uploader`\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/FileUploader.js\";`\n * @constructor\n * @since 1.0.0-rc.6\n * @extends UI5Element\n * @public\n */\n@customElement({\n\ttag: \"ui5-file-uploader\",\n\tlanguageAware: true,\n\tformAssociated: true,\n\trenderer: litRender,\n\tstyles: [\n\t\tFileUploaderCss,\n\t\tResponsivePopoverCommonCss,\n\t\tValueStateMessageCss,\n\t],\n\ttemplate: FileUploaderTemplate,\n\tdependencies: [\n\t\tInput,\n\t\tPopover,\n\t\tIcon,\n\t],\n})\n/**\n * Event is fired when the value of the file path has been changed.\n *\n * **Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed.\n * @param {FileList | null} files The current files.\n * @public\n */\n@event<FileUploaderChangeEventDetail>(\"change\", {\n\tdetail: {\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tfiles: { type: FileList },\n\t},\n})\nclass FileUploader extends UI5Element implements IFormInputElement {\n\t/**\n\t * Comma-separated list of file types that the component should accept.\n\t *\n\t * **Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\taccept!: string;\n\n\t/**\n\t * If set to \"true\", the input field of component will not be rendered. Only the default slot that is passed will be rendered.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\thideInput!: boolean;\n\n\t/**\n\t * Defines whether the component is in disabled state.\n\t *\n\t * **Note:** A disabled component is completely noninteractive.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Allows multiple files to be chosen.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tmultiple!: boolean;\n\n\t/**\n\t * Determines the name by which the component will be identified upon submission in an HTML form.\n\t *\n\t * **Note:** This property is only applicable within the context of an HTML Form element.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tname!: string;\n\n\t/**\n\t * Defines a short hint intended to aid the user with data entry when the component has no value.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tplaceholder!: string;\n\n\t/**\n\t * Defines the name/names of the file/files to upload.\n\t * @default \"\"\n\t * @formEvents change\n\t * @formProperty\n\t * @public\n\t */\n\t@property()\n\tvalue!: string;\n\n\t/**\n\t * Defines the value state of the component.\n\t * @default \"None\"\n\t * @public\n\t */\n\t@property({ type: ValueState, defaultValue: ValueState.None })\n\tvalueState!: `${ValueState}`;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\tfocused!: boolean;\n\n\t/**\n\t * By default the component contains a single input field. With this slot you can pass any content that you wish to add. See the samples for more information.\n\t *\n\t * **Note:** If no content is provided in this slot, the component will only consist of an input field and will not be interactable using the keyboard.\n\t * Also it is not recommended to use any non-interactable components, as it may lead to poor accessibility experience.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\tcontent!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the value state message that will be displayed as pop up under the component.\n\t *\n\t * **Note:** If not specified, a default text (in the respective language) will be displayed.\n\t *\n\t * **Note:** The `valueStateMessage` would be displayed,\n\t * when the component is in `Information`, `Warning` or `Error` value state.\n\t * @since 1.0.0-rc.9\n\t * @public\n\t */\n\t@slot()\n\tvalueStateMessage!: Array<HTMLElement>;\n\n\tstatic emptyInput: HTMLInputElement;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tasync formElementAnchor() {\n\t\treturn this.getFocusDomRefAsync();\n\t}\n\n\tget formFormattedValue() {\n\t\tif (this.files) {\n\t\t\tconst formData = new FormData();\n\n\t\t\tfor (let i = 0; i < this.files.length; i++) {\n\t\t\t\tformData.append(this.name, this.files[i]);\n\t\t\t}\n\n\t\t\treturn formData;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\t_onmouseover() {\n\t\tthis.content.forEach(item => {\n\t\t\titem.classList.add(\"ui5_hovered\");\n\t\t});\n\t}\n\n\t_onmouseout() {\n\t\tthis.content.forEach(item => {\n\t\t\titem.classList.remove(\"ui5_hovered\");\n\t\t});\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tif (getEventMark(e) === \"button\") {\n\t\t\tthis._input.click();\n\t\t}\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (isEnter(e)) {\n\t\t\tthis._input.click();\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis._input.click();\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_ondrag(e: DragEvent) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t}\n\n\t_ondrop(e: DragEvent) {\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tconst files = e.dataTransfer?.files;\n\n\t\tif (files) {\n\t\t\tthis._input.files = files;\n\t\t\tthis._updateValue(files);\n\t\t\tthis.fireEvent<FileUploaderChangeEventDetail>(\"change\", {\n\t\t\t\tfiles,\n\t\t\t});\n\t\t}\n\t}\n\n\t_onfocusin() {\n\t\tthis.focused = true;\n\t}\n\n\t_onfocusout() {\n\t\tthis.focused = false;\n\t}\n\n\t/**\n\t * FileList of all selected files.\n\t * @public\n\t * @default null\n\t */\n\tget files(): FileList | null {\n\t\tif (this._input) {\n\t\t\treturn this._input.files;\n\t\t}\n\n\t\treturn FileUploader._emptyFilesList;\n\t}\n\n\tonAfterRendering() {\n\t\tif (!this.value) {\n\t\t\tthis._input.value = \"\";\n\t\t}\n\n\t\tthis.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);\n\t}\n\n\t_onChange(e: Event) {\n\t\tconst changedFiles = (e.target as HTMLInputElement).files;\n\n\t\tthis._updateValue(changedFiles);\n\t\tthis.fireEvent<FileUploaderChangeEventDetail>(\"change\", {\n\t\t\tfiles: changedFiles,\n\t\t});\n\t}\n\n\t_updateValue(files: FileList | null) {\n\t\tthis.value = Array.from(files || []).reduce((acc, currFile) => {\n\t\t\treturn `${acc}\"${currFile.name}\" `;\n\t\t}, \"\");\n\t}\n\n\ttoggleValueStatePopover(open: boolean) {\n\t\tif (open) {\n\t\t\tthis.openValueStatePopover();\n\t\t} else {\n\t\t\tthis.closeValueStatePopover();\n\t\t}\n\t}\n\n\topenValueStatePopover() {\n\t\tconst popover = this._getPopover();\n\n\t\tif (popover) {\n\t\t\tpopover.opener = this;\n\t\t\tpopover.open = true;\n\t\t}\n\t}\n\n\tcloseValueStatePopover() {\n\t\tconst popover = this._getPopover();\n\n\t\tif (popover) {\n\t\t\tpopover.open = false;\n\t\t}\n\t}\n\n\t_getPopover(): Popover {\n\t\treturn this.shadowRoot!.querySelector<Popover>(\".ui5-valuestatemessage-popover\")!;\n\t}\n\n\t/**\n\t * in case when the component is not placed in the DOM, return empty FileList, like native input would do\n\t * @private\n\t */\n\tstatic get _emptyFilesList() {\n\t\tif (!this.emptyInput) {\n\t\t\tthis.emptyInput = document.createElement(\"input\");\n\t\t\tthis.emptyInput.type = \"file\";\n\t\t}\n\t\treturn this.emptyInput.files;\n\t}\n\n\tget browseText(): string {\n\t\treturn FileUploader.i18nBundle.getText(FILEUPLOAD_BROWSE);\n\t}\n\n\tget titleText(): string {\n\t\treturn FileUploader.i18nBundle.getText(FILEUPLOADER_TITLE);\n\t}\n\n\tget _input(): HTMLInputElement {\n\t\treturn (this.shadowRoot!.querySelector<HTMLInputElement>(\"input[type=file]\") || this.querySelector<HTMLInputElement>(\"input[type=file][data-ui5-form-support]\"))!;\n\t}\n\n\tget valueStateTextMappings(): Record<string, string> {\n\t\treturn {\n\t\t\t\"Positive\": FileUploader.i18nBundle.getText(VALUE_STATE_SUCCESS),\n\t\t\t\"Information\": FileUploader.i18nBundle.getText(VALUE_STATE_INFORMATION),\n\t\t\t\"Negative\": FileUploader.i18nBundle.getText(VALUE_STATE_ERROR),\n\t\t\t\"Critical\": FileUploader.i18nBundle.getText(VALUE_STATE_WARNING),\n\t\t};\n\t}\n\n\tget valueStateText(): string {\n\t\treturn this.valueStateTextMappings[this.valueState];\n\t}\n\n\tget hasValueState(): boolean {\n\t\treturn this.valueState !== ValueState.None;\n\t}\n\n\tget hasValueStateText(): boolean {\n\t\treturn this.hasValueState && this.valueState !== ValueState.Positive;\n\t}\n\n\tget valueStateMessageText() {\n\t\treturn this.getSlottedNodes(\"valueStateMessage\").map(el => el.cloneNode(true));\n\t}\n\n\tget shouldDisplayDefaultValueStateMessage(): boolean {\n\t\treturn !this.valueStateMessage.length && this.hasValueStateText;\n\t}\n\n\tget shouldOpenValueStateMessagePopover(): boolean {\n\t\treturn this.focused && this.hasValueStateText && !this.hideInput;\n\t}\n\n\t/**\n\t * This method is relevant for sap_horizon theme only\n\t */\n\tget _valueStateMessageInputIcon(): string {\n\t\tconst iconPerValueState = {\n\t\t\tNegative: \"error\",\n\t\t\tCritical: \"alert\",\n\t\t\tPositive: \"sys-enter-2\",\n\t\t\tInformation: \"information\",\n\t\t};\n\n\t\treturn this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : \"\";\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tpopoverValueState: {\n\t\t\t\t\"ui5-valuestatemessage-root\": true,\n\t\t\t\t\"ui5-valuestatemessage--success\": this.valueState === ValueState.Positive,\n\t\t\t\t\"ui5-valuestatemessage--error\": this.valueState === ValueState.Negative,\n\t\t\t\t\"ui5-valuestatemessage--warning\": this.valueState === ValueState.Critical,\n\t\t\t\t\"ui5-valuestatemessage--information\": this.valueState === ValueState.Information,\n\t\t\t},\n\t\t};\n\t}\n\n\tget styles() {\n\t\treturn {\n\t\t\tpopoverHeader: {\n\t\t\t\t\"width\": `${this.ui5Input ? this.ui5Input.offsetWidth : 0}px`,\n\t\t\t},\n\t\t};\n\t}\n\n\tget ui5Input() {\n\t\treturn this.shadowRoot!.querySelector<Input>(\".ui5-file-uploader-input\");\n\t}\n\n\tstatic async onDefine() {\n\t\tFileUploader.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nFileUploader.define();\n\nexport default FileUploader;\nexport type {\n\tFileUploaderChangeEventDetail,\n};\n"]}

package/dist/Filters.d.ts

@@ -0,0 +1,5 @@
+declare const StartsWithPerTerm: <T>(value: string, items: T[], propName: string) => T[];
+declare const StartsWith: <T>(value: string, items: T[], propName: string) => T[];
+declare const Contains: <T>(value: string, items: T[], propName: string) => T[];
+declare const None: <T>(_: string, items: T[]) => T[];
+export { StartsWithPerTerm, StartsWith, Contains, None, };

package/dist/Filters.js

@@ -0,0 +1,17 @@
+const escapeReg = /[[\]{}()*+?.\\^$|]/g;
+const escapeRegExp = (str) => {
+    return str.replace(escapeReg, "\\$&");
+};
+const StartsWithPerTerm = (value, items, propName) => {
+    const reg = new RegExp(`(^|\\s)${escapeRegExp(value.toLowerCase())}.*`, "g");
+    return items.filter(item => {
+        const text = item[propName];
+        reg.lastIndex = 0;
+        return reg.test(text.toLowerCase());
+    });
+};
+const StartsWith = (value, items, propName) => items.filter(item => item[propName].toLowerCase().startsWith(value.toLowerCase()));
+const Contains = (value, items, propName) => items.filter(item => item[propName].toLowerCase().includes(value.toLowerCase()));
+const None = (_, items) => items;
+export { StartsWithPerTerm, StartsWith, Contains, None, };
+//# sourceMappingURL=Filters.js.map

package/dist/Filters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.js","sourceRoot":"","sources":["../src/Filters.ts"],"names":[],"mappings":"AAAA,MAAM,SAAS,GAAG,qBAAqB,CAAC;AAExC,MAAM,YAAY,GAAG,CAAC,GAAW,EAAU,EAAE;IAC5C,OAAO,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAI,KAAa,EAAE,KAAe,EAAE,QAAgB,EAAE,EAAE;IACjF,MAAM,GAAG,GAAG,IAAI,MAAM,CAAC,UAAU,YAAY,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAE7E,OAAO,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;QAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,QAA6B,CAAW,CAAC;QAE3D,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC;QAElB,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAI,KAAa,EAAE,KAAe,EAAE,QAAgB,EAAY,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAE,IAAI,CAAC,QAA6B,CAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;AAC1M,MAAM,QAAQ,GAAG,CAAI,KAAa,EAAE,KAAe,EAAE,QAAgB,EAAY,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAE,IAAI,CAAC,QAA6B,CAAY,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;AACtM,MAAM,IAAI,GAAG,CAAI,CAAS,EAAE,KAAe,EAAY,EAAE,CAAC,KAAK,CAAC;AAEhE,OAAO,EACN,iBAAiB,EACjB,UAAU,EACV,QAAQ,EACR,IAAI,GACJ,CAAC","sourcesContent":["const escapeReg = /[[\\]{}()*+?.\\\\^$|]/g;\n\nconst escapeRegExp = (str: string): string => {\n\treturn str.replace(escapeReg, \"\\\\$&\");\n};\n\nconst StartsWithPerTerm = <T>(value: string, items: Array<T>, propName: string) => {\n\tconst reg = new RegExp(`(^|\\\\s)${escapeRegExp(value.toLowerCase())}.*`, \"g\");\n\n\treturn items.filter(item => {\n\t\tconst text = item[propName as keyof typeof item] as string;\n\n\t\treg.lastIndex = 0;\n\n\t\treturn reg.test(text.toLowerCase());\n\t});\n};\n\nconst StartsWith = <T>(value: string, items: Array<T>, propName: string): Array<T> => items.filter(item => (item[propName as keyof typeof item] as string).toLowerCase().startsWith(value.toLowerCase()));\nconst Contains = <T>(value: string, items: Array<T>, propName: string): Array<T> => items.filter(item => (item[propName as keyof typeof item] as string).toLowerCase().includes(value.toLowerCase()));\nconst None = <T>(_: string, items: Array<T>): Array<T> => items;\n\nexport {\n\tStartsWithPerTerm,\n\tStartsWith,\n\tContains,\n\tNone,\n};\n"]}

package/dist/Form.d.ts

@@ -0,0 +1,198 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import FormItemSpacing from "./types/FormItemSpacing.js";
+interface IFormItem extends HTMLElement {
+    labelSpan: string;
+    itemSpacing: `${FormItemSpacing}`;
+    readonly isGroup: boolean;
+    colsXl?: number;
+    colsL?: number;
+    colsM?: number;
+    colsS?: number;
+    columnSpan?: number;
+}
+type GroupItemsInfo = {
+    groupItem: IFormItem;
+    classes: string;
+    items: Array<ItemsInfo>;
+};
+type ItemsInfo = {
+    item: IFormItem;
+    classes: string;
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The Form is a layout component that arranges labels and form fields (like input fields) pairs
+ * into a specific number of columns.
+ *
+ * ### Structure
+ *
+ * - **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.
+ * - **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.
+ * - **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.
+ *
+ * The simplest Form (`ui5-form`) consists of a header area on top,
+ * displaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),
+ * representing the pairs of label and form fields.
+ *
+ * And, there is also "grouping" available to assist the implementation of richer UIs.
+ * This is enabled by the FormGroup (`ui5-form-group`) component.
+ * In this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.
+ *
+ *  ### Responsiveness
+ *
+ * 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: 2)
+ *
+ * To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6".
+ *
+ * ### Groups
+ *
+ * To make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.
+ *
+ * - **Example #1** (perfect match):
+ * 4 columns and 4 groups: each group will use 1 column.
+ *
+ * - **Example #2** (balanced distribution):
+ * 4 columns and 2 groups: each group will use 2 columns.
+ * 6 columns and 2 groups: each group will use 3 columns.
+ *
+ * - **Example #3** (unbalanced distribution):
+ * 3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.
+ * 5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.
+ *
+ * **Note:** The size of a group element is determined by the number of FormItems assigned to it.
+ * In the case of equality, the first in the DOM will use more columns, and the last - fewer columns.
+ *
+ * - **Example #4** (more groups than columns):
+ * 3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.
+ *
+ * ### Groups Column Span
+ *
+ * To influence the built-in group distribution, described in the previous section,
+ * you can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.
+ *
+ * ### Items Column Span
+ *
+ * FormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.
+ *
+ * ### Items Label Span
+ *
+ * The placement of the labels depends on the size of the used column.
+ * If there is enough space, the labels are next to their associated fields, otherwise  - above the fields.
+ * By default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.
+ * You can control what space the labels should take via the `labelSpan` property.
+ *
+ * **For example:** To always place the labels on top set: `labelSpan="S12 M12 L12 XL12"` property.
+ *
+ * ### ES6 Module Import
+ *
+ * - import @ui5/webcomponents/dist/Form.js";
+ * - import @ui5/webcomponents/dist/FormGroup.js";
+ * - import @ui5/webcomponents/dist/FormItem.js";
+ *
+ * @csspart header - Used to style the wrapper of the header.
+ * @csspart layout - Used to style the element defining the form column layout.
+ * @csspart column - Used to style a single column of the form column layout.
+ *
+ * @public
+ * @since 2.0.0
+ */
+declare class Form extends UI5Element {
+    /**
+     * Defines the number of columns to distribute the form content by breakpoint.
+     *
+     * Supported values:
+     * - `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)
+     *
+     * @default "S1 M1 L2 XL2"
+     * @public
+     */
+    layout: string;
+    /**
+     * Defines the width proportion of the labels and fields of a FormItem by breakpoint.
+     *
+     * By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,
+     * and 12/12 in S size, e.g in S the label is on top of its associated field.
+     *
+     * The supported values are between 1 and 12. Greater the number, more space the label will use.
+     *
+     * **Note:** If "12" is set, the label will be displayed on top of its assosiated field.
+     * @default "S12 M4 L4 XL4"
+     * @public
+     */
+    labelSpan: string;
+    /**
+     * Defines the header text of the component.
+     *
+     * **Note:** The property gets overridden by the `header` slot.
+     *
+     * @default ""
+     * @public
+     */
+    headerText: string;
+    /**
+     * Defines the vertical spacing between form items.
+     *
+     * **Note:** If the Form is meant to be switched between "non-edit" and "edit" modes,
+     * we recommend using "Large" item spacing in "non-edit" mode, and "Normal" - for "edit" mode,
+     * to avoid "jumping" effect, caused by the hight difference between texts in "non-edit" mode and the input fields in "edit" mode.
+     *
+     * @default "Normal"
+     * @public
+     */
+    itemSpacing: `${FormItemSpacing}`;
+    /**
+     * Defines the component header area.
+     *
+     * **Note:** When a `header` is provided, the `headerText` property is ignored.
+     * @public
+     */
+    header: Array<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.
+     * @public
+     */
+    items: Array<IFormItem>;
+    /**
+     * @private
+     */
+    columnsS: number;
+    labelSpanS: number;
+    columnsM: number;
+    labelSpanM: number;
+    columnsL: number;
+    labelSpanL: number;
+    columnsXl: number;
+    labelSpanXl: number;
+    onBeforeRendering(): void;
+    onAfterRendering(): void;
+    setColumnLayout(): void;
+    setLabelSpan(): void;
+    setGroupsColSpan(): void;
+    getGroupsColSpan(cols: number, groups: number, index: number, group: IFormItem): number;
+    get hasGroupItems(): boolean;
+    get hasHeader(): boolean;
+    get hasCustomHeader(): boolean;
+    get ariaLabelledByID(): string | undefined;
+    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 { IFormItem, };

package/dist/Form.js

@@ -0,0 +1,358 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+// Template
+import FormTemplate from "./generated/templates/FormTemplate.lit.js";
+// Styles
+import FormCss from "./generated/themes/Form.css.js";
+import Title from "./Title.js";
+import FormItemSpacing from "./types/FormItemSpacing.js";
+const additionalStylesMap = new Map();
+const StepColumn = {
+    "S": 1,
+    "M": 2,
+    "L": 3,
+    "XL": 6,
+};
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The Form is a layout component that arranges labels and form fields (like input fields) pairs
+ * into a specific number of columns.
+ *
+ * ### Structure
+ *
+ * - **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.
+ * - **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.
+ * - **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.
+ *
+ * The simplest Form (`ui5-form`) consists of a header area on top,
+ * displaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),
+ * representing the pairs of label and form fields.
+ *
+ * And, there is also "grouping" available to assist the implementation of richer UIs.
+ * This is enabled by the FormGroup (`ui5-form-group`) component.
+ * In this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.
+ *
+ *  ### Responsiveness
+ *
+ * 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: 2)
+ *
+ * To change the layout, use the `layout` property - f.e. layout="S1 M2 L3 XL6".
+ *
+ * ### Groups
+ *
+ * To make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.
+ *
+ * - **Example #1** (perfect match):
+ * 4 columns and 4 groups: each group will use 1 column.
+ *
+ * - **Example #2** (balanced distribution):
+ * 4 columns and 2 groups: each group will use 2 columns.
+ * 6 columns and 2 groups: each group will use 3 columns.
+ *
+ * - **Example #3** (unbalanced distribution):
+ * 3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.
+ * 5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.
+ *
+ * **Note:** The size of a group element is determined by the number of FormItems assigned to it.
+ * In the case of equality, the first in the DOM will use more columns, and the last - fewer columns.
+ *
+ * - **Example #4** (more groups than columns):
+ * 3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.
+ *
+ * ### Groups Column Span
+ *
+ * To influence the built-in group distribution, described in the previous section,
+ * you can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.
+ *
+ * ### Items Column Span
+ *
+ * FormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.
+ *
+ * ### Items Label Span
+ *
+ * The placement of the labels depends on the size of the used column.
+ * If there is enough space, the labels are next to their associated fields, otherwise  - above the fields.
+ * By default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.
+ * You can control what space the labels should take via the `labelSpan` property.
+ *
+ * **For example:** To always place the labels on top set: `labelSpan="S12 M12 L12 XL12"` property.
+ *
+ * ### ES6 Module Import
+ *
+ * - import @ui5/webcomponents/dist/Form.js";
+ * - import @ui5/webcomponents/dist/FormGroup.js";
+ * - import @ui5/webcomponents/dist/FormItem.js";
+ *
+ * @csspart header - Used to style the wrapper of the header.
+ * @csspart layout - Used to style the element defining the form column layout.
+ * @csspart column - Used to style a single column of the form column layout.
+ *
+ * @public
+ * @since 2.0.0
+ */
+let Form = class Form extends UI5Element {
+    onBeforeRendering() {
+        // Parse the layout and set it to the FormGroups/FormItems.
+        this.setColumnLayout();
+        // Parse the labelSpan and set it to the FormGroups/FormItems.
+        this.setLabelSpan();
+        // Define how many columns a group should take.
+        this.setGroupsColSpan();
+    }
+    onAfterRendering() {
+        // Create additional CSS for number of columns that are not supported by default.
+        this.createAdditionalCSSStyleSheet();
+    }
+    setColumnLayout() {
+        const layoutArr = this.layout.split(" ");
+        layoutArr.forEach((breakpoint) => {
+            if (breakpoint.startsWith("S")) {
+                this.columnsS = parseInt(breakpoint.slice(1));
+            }
+            else if (breakpoint.startsWith("M")) {
+                this.columnsM = parseInt(breakpoint.slice(1));
+            }
+            else if (breakpoint.startsWith("L")) {
+                this.columnsL = parseInt(breakpoint.slice(1));
+            }
+            else if (breakpoint.startsWith("XL")) {
+                this.columnsXl = parseInt(breakpoint.slice(2));
+            }
+        });
+    }
+    setLabelSpan() {
+        this.labelSpan.split(" ").forEach((breakpoint) => {
+            if (breakpoint.startsWith("S")) {
+                this.labelSpanS = parseInt(breakpoint.slice(1));
+            }
+            else if (breakpoint.startsWith("M")) {
+                this.labelSpanM = parseInt(breakpoint.slice(1));
+            }
+            else if (breakpoint.startsWith("L")) {
+                this.labelSpanL = parseInt(breakpoint.slice(1));
+            }
+            else if (breakpoint.startsWith("XL")) {
+                this.labelSpanXl = parseInt(breakpoint.slice(2));
+            }
+        });
+        this.items.forEach((item) => {
+            item.labelSpan = this.labelSpan;
+            item.itemSpacing = this.itemSpacing;
+        });
+    }
+    setGroupsColSpan() {
+        if (!this.hasGroupItems) {
+            return;
+        }
+        const itemsCount = this.items.length;
+        const sortedItems = [...this.items].sort((itemA, itemB) => {
+            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);
+        });
+    }
+    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;
+    }
+    get hasGroupItems() {
+        return this.items.some((item) => item.isGroup);
+    }
+    get hasHeader() {
+        return this.hasCustomHeader || !!this.headerText;
+    }
+    get hasCustomHeader() {
+        return !!this.header.length;
+    }
+    get ariaLabelledByID() {
+        return this.hasCustomHeader ? undefined : `${this._id}-header-text`;
+    }
+    get groupItemsInfo() {
+        return this.items.map((groupItem) => {
+            return {
+                groupItem,
+                classes: `ui5-form-column-spanL-${groupItem.colsL} ui5-form-column-spanXL-${groupItem.colsXl} ui5-form-column-spanM-${groupItem.colsM} ui5-form-column-spanS-${groupItem.colsS}`,
+                items: this.getItemsInfo(Array.from(groupItem.children)),
+            };
+        });
+    }
+    get itemsInfo() {
+        return this.getItemsInfo();
+    }
+    getItemsInfo(items) {
+        return (items || this.items).map((item) => {
+            return {
+                item,
+                classes: item.columnSpan ? `ui5-form-item-span-${item.columnSpan}` : "",
+            };
+        });
+    }
+    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;
+            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({ type: String, defaultValue: "S1 M1 L2 XL2" })
+], Form.prototype, "layout", void 0);
+__decorate([
+    property({ type: String, defaultValue: "S12 M4 L4 XL4" })
+], Form.prototype, "labelSpan", void 0);
+__decorate([
+    property()
+], Form.prototype, "headerText", void 0);
+__decorate([
+    property({ type: FormItemSpacing, defaultValue: FormItemSpacing.Normal })
+], Form.prototype, "itemSpacing", void 0);
+__decorate([
+    slot({ type: HTMLElement })
+], Form.prototype, "header", void 0);
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        individualSlots: true,
+        invalidateOnChildChange: true,
+    })
+], Form.prototype, "items", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 1 })
+], Form.prototype, "columnsS", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 12 })
+], Form.prototype, "labelSpanS", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 1 })
+], Form.prototype, "columnsM", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 4 })
+], Form.prototype, "labelSpanM", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 2 })
+], Form.prototype, "columnsL", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 4 })
+], Form.prototype, "labelSpanL", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 2 })
+], Form.prototype, "columnsXl", void 0);
+__decorate([
+    property({ validator: Integer, defaultValue: 4 })
+], Form.prototype, "labelSpanXl", void 0);
+Form = __decorate([
+    customElement({
+        tag: "ui5-form",
+        renderer: litRender,
+        styles: FormCss,
+        template: FormTemplate,
+        dependencies: [Title],
+    })
+], Form);
+Form.define();
+export default Form;
+//# sourceMappingURL=Form.js.map