@ui5/webcomponents 0.0.0-7c7170d4a → 0.0.0-7d8c57f70

package/dist/DropIndicator.js

@@ -46,7 +46,7 @@ let DropIndicator = class DropIndicator extends UI5Element {
             return;
         }
         const { left, width, right, top, bottom, height, } = this.targetReference.getBoundingClientRect();
-        const { top: containerTop, height: containerHeight, } = this.ownerReference.getBoundingClientRect();
+        const { top: containerTop, } = this.ownerReference.getBoundingClientRect();
         const style = {
             display: "",
             [this._positionProperty]: "",
@@ -54,19 +54,17 @@ let DropIndicator = class DropIndicator extends UI5Element {
             height: "",
         };
         let position = 0;
-        let isLast = false;
-        let isFirst = false;
         if (this.orientation === Orientation.Vertical) {
             switch (this.placement) {
                 case MovePlacement.Before:
-                    position = left;
+                    position = left - this._needle.offsetWidth / 2;
                     break;
                 case MovePlacement.On:
                     style.width = `${width}px`;
                     position = left;
                     break;
                 case MovePlacement.After:
-                    position = right;
+                    position = right - this._needle.offsetWidth / 2;
                     break;
             }
             style.height = `${height}px`;
@@ -86,16 +84,8 @@ let DropIndicator = class DropIndicator extends UI5Element {
             }
             style.width = `${width}px`;
             position -= containerTop;
-            if (position <= 0) {
-                isFirst = true;
-            }
-            if (position >= containerHeight) {
-                isLast = true;
-            }
         }
         style[this._positionProperty] = `${position}px`;
-        this.toggleAttribute("first", isFirst);
-        this.toggleAttribute("last", isLast);
         Object.assign(this.style, style);
     }
     get classes() {
@@ -106,6 +96,9 @@ let DropIndicator = class DropIndicator extends UI5Element {
             },
         };
     }
+    get _needle() {
+        return this.shadowRoot.querySelector(".ui5-di-needle");
+    }
 };
 __decorate([
     property({ type: Object, defaultValue: null })

package/dist/DropIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropIndicator.js","sourceRoot":"","sources":["../src/DropIndicator.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport MovePlacement from \"@ui5/webcomponents-base/dist/types/MovePlacement.js\";\nimport Orientation from \"@ui5/webcomponents-base/dist/types/Orientation.js\";\n\nimport DropIndicatorTemplate from \"./generated/templates/DropIndicatorTemplate.lit.js\";\n\n// Styles\nimport DropIndicatorCss from \"./generated/themes/DropIndicator.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * ### Usage\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/DropIndicator.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-drop-indicator\",\n\trenderer: litRender,\n\tstyles: DropIndicatorCss,\n\ttemplate: DropIndicatorTemplate,\n\tdependencies: [],\n})\nclass DropIndicator extends UI5Element {\n\t/**\n\t * Element where the drop indicator will be shown.\n\t *\n\t * @public\n\t * @default null\n\t */\n\t@property({ type: Object, defaultValue: null })\n\ttargetReference!: HTMLElement | null;\n\n\t/**\n\t * Owner of the indicator and the target.\n\t * @public\n\t * @default null\n\t */\n\t@property({ type: Object, defaultValue: null })\n\townerReference!: HTMLElement | null;\n\n\t/**\n\t * Placement of the indicator relative to the target.\n\t *\n\t * @default \"Before\"\n\t * @public\n\t */\n\t@property({ type: MovePlacement, defaultValue: MovePlacement.Before })\n\tplacement!: `${MovePlacement}`;\n\n\t/**\n\t * Orientation of the indicator.\n\t *\n\t * @default \"Vertical\"\n\t * @public\n\t */\n\t@property({ type: Orientation, defaultValue: Orientation.Vertical })\n\torientation!: `${Orientation}`;\n\n\tget _positionProperty() {\n\t\tif (this.orientation === Orientation.Vertical) {\n\t\t\treturn \"left\";\n\t\t}\n\n\t\treturn \"top\";\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonAfterRendering() {\n\t\tif (!this.targetReference || !this.ownerReference) {\n\t\t\tObject.assign(this.style, {\n\t\t\t\tdisplay: \"none\",\n\t\t\t});\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst {\n\t\t\tleft, width, right, top, bottom, height,\n\t\t} = this.targetReference.getBoundingClientRect();\n\t\tconst {\n\t\t\ttop: containerTop,\n\t\t\theight: containerHeight,\n\t\t} = this.ownerReference.getBoundingClientRect();\n\t\tconst style = {\n\t\t\tdisplay: \"\",\n\t\t\t[this._positionProperty]: \"\",\n\t\t\twidth: \"\",\n\t\t\theight: \"\",\n\t\t};\n\t\tlet position = 0;\n\t\tlet isLast = false;\n\t\tlet isFirst = false;\n\n\t\tif (this.orientation === Orientation.Vertical) {\n\t\t\tswitch (this.placement) {\n\t\t\tcase MovePlacement.Before:\n\t\t\t\tposition = left;\n\t\t\t\tbreak;\n\t\t\tcase MovePlacement.On:\n\t\t\t\tstyle.width = `${width}px`;\n\t\t\t\tposition = left;\n\t\t\t\tbreak;\n\t\t\tcase MovePlacement.After:\n\t\t\t\tposition = right;\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tstyle.height = `${height}px`;\n\t\t}\n\n\t\tif (this.orientation === Orientation.Horizontal) {\n\t\t\tswitch (this.placement) {\n\t\t\tcase MovePlacement.Before:\n\t\t\t\tposition = top;\n\t\t\t\tbreak;\n\t\t\tcase MovePlacement.On:\n\t\t\t\tstyle.height = `${height}px`;\n\t\t\t\tposition = top;\n\t\t\t\tbreak;\n\t\t\tcase MovePlacement.After:\n\t\t\t\tposition = bottom;\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tstyle.width = `${width}px`;\n\t\t\tposition -= containerTop;\n\n\t\t\tif (position <= 0) {\n\t\t\t\tisFirst = true;\n\t\t\t}\n\n\t\t\tif (position >= containerHeight) {\n\t\t\t\tisLast = true;\n\t\t\t}\n\t\t}\n\n\t\tstyle[this._positionProperty] = `${position}px`;\n\t\tthis.toggleAttribute(\"first\", isFirst);\n\t\tthis.toggleAttribute(\"last\", isLast);\n\n\t\tObject.assign(this.style, style);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-di-rect\": this.placement === MovePlacement.On,\n\t\t\t\t\"ui5-di-needle\": this.placement !== MovePlacement.On,\n\t\t\t},\n\t\t};\n\t}\n}\n\nDropIndicator.define();\n\nexport default DropIndicator;\n"]}
+{"version":3,"file":"DropIndicator.js","sourceRoot":"","sources":["../src/DropIndicator.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport MovePlacement from \"@ui5/webcomponents-base/dist/types/MovePlacement.js\";\nimport Orientation from \"@ui5/webcomponents-base/dist/types/Orientation.js\";\n\nimport DropIndicatorTemplate from \"./generated/templates/DropIndicatorTemplate.lit.js\";\n\n// Styles\nimport DropIndicatorCss from \"./generated/themes/DropIndicator.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * ### Usage\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/DropIndicator.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @private\n */\n@customElement({\n\ttag: \"ui5-drop-indicator\",\n\trenderer: litRender,\n\tstyles: DropIndicatorCss,\n\ttemplate: DropIndicatorTemplate,\n\tdependencies: [],\n})\nclass DropIndicator extends UI5Element {\n\t/**\n\t * Element where the drop indicator will be shown.\n\t *\n\t * @public\n\t * @default null\n\t */\n\t@property({ type: Object, defaultValue: null })\n\ttargetReference!: HTMLElement | null;\n\n\t/**\n\t * Owner of the indicator and the target.\n\t * @public\n\t * @default null\n\t */\n\t@property({ type: Object, defaultValue: null })\n\townerReference!: HTMLElement | null;\n\n\t/**\n\t * Placement of the indicator relative to the target.\n\t *\n\t * @default \"Before\"\n\t * @public\n\t */\n\t@property({ type: MovePlacement, defaultValue: MovePlacement.Before })\n\tplacement!: `${MovePlacement}`;\n\n\t/**\n\t * Orientation of the indicator.\n\t *\n\t * @default \"Vertical\"\n\t * @public\n\t */\n\t@property({ type: Orientation, defaultValue: Orientation.Vertical })\n\torientation!: `${Orientation}`;\n\n\tget _positionProperty() {\n\t\tif (this.orientation === Orientation.Vertical) {\n\t\t\treturn \"left\";\n\t\t}\n\n\t\treturn \"top\";\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tonAfterRendering() {\n\t\tif (!this.targetReference || !this.ownerReference) {\n\t\t\tObject.assign(this.style, {\n\t\t\t\tdisplay: \"none\",\n\t\t\t});\n\n\t\t\treturn;\n\t\t}\n\n\t\tconst {\n\t\t\tleft, width, right, top, bottom, height,\n\t\t} = this.targetReference.getBoundingClientRect();\n\t\tconst {\n\t\t\ttop: containerTop,\n\t\t} = this.ownerReference.getBoundingClientRect();\n\t\tconst style = {\n\t\t\tdisplay: \"\",\n\t\t\t[this._positionProperty]: \"\",\n\t\t\twidth: \"\",\n\t\t\theight: \"\",\n\t\t};\n\t\tlet position = 0;\n\n\t\tif (this.orientation === Orientation.Vertical) {\n\t\t\tswitch (this.placement) {\n\t\t\tcase MovePlacement.Before:\n\t\t\t\tposition = left - this._needle!.offsetWidth / 2;\n\t\t\t\tbreak;\n\t\t\tcase MovePlacement.On:\n\t\t\t\tstyle.width = `${width}px`;\n\t\t\t\tposition = left;\n\t\t\t\tbreak;\n\t\t\tcase MovePlacement.After:\n\t\t\t\tposition = right - this._needle!.offsetWidth / 2;\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tstyle.height = `${height}px`;\n\t\t}\n\n\t\tif (this.orientation === Orientation.Horizontal) {\n\t\t\tswitch (this.placement) {\n\t\t\tcase MovePlacement.Before:\n\t\t\t\tposition = top;\n\t\t\t\tbreak;\n\t\t\tcase MovePlacement.On:\n\t\t\t\tstyle.height = `${height}px`;\n\t\t\t\tposition = top;\n\t\t\t\tbreak;\n\t\t\tcase MovePlacement.After:\n\t\t\t\tposition = bottom;\n\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\tstyle.width = `${width}px`;\n\t\t\tposition -= containerTop;\n\t\t}\n\n\t\tstyle[this._positionProperty] = `${position}px`;\n\n\t\tObject.assign(this.style, style);\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-di-rect\": this.placement === MovePlacement.On,\n\t\t\t\t\"ui5-di-needle\": this.placement !== MovePlacement.On,\n\t\t\t},\n\t\t};\n\t}\n\n\tget _needle() {\n\t\treturn this.shadowRoot!.querySelector<HTMLElement>(\".ui5-di-needle\");\n\t}\n}\n\nDropIndicator.define();\n\nexport default DropIndicator;\n"]}

package/dist/FileUploader.d.ts

@@ -1,9 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import Input from "./Input.js";
 import Popover from "./Popover.js";
+import type { IFormElement } from "./features/InputElementsFormSupport.js";
 type FileUploaderChangeEventDetail = {
     files: FileList | null;
 };
@@ -31,7 +31,7 @@ type FileUploaderChangeEventDetail = {
  * @extends UI5Element
  * @public
  */
-declare class FileUploader extends UI5Element implements IFormInputElement {
+declare class FileUploader extends UI5Element implements IFormElement {
     /**
      * Comma-separated list of file types that the component should accept.
      *
@@ -61,9 +61,14 @@ declare class FileUploader extends UI5Element implements IFormInputElement {
      */
     multiple: boolean;
     /**
-     * Determines the name by which the component will be identified upon submission in an HTML form.
+     * Determines the name with which the component will be submitted in an HTML form.
      *
-     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * **Important:** For the `name` property to have effect, you must add the following import to your project:
+     * `import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`
+     *
+     * **Note:** When set, a native `input` HTML element
+     * will be created inside the component so that it can be submitted as
+     * part of an HTML form. Do not use this property unless you need to submit a form.
      * @default ""
      * @public
      */
@@ -111,10 +116,21 @@ declare class FileUploader extends UI5Element implements IFormInputElement {
      * @public
      */
     valueStateMessage: Array<HTMLElement>;
+    /**
+     * The slot is used to render native `input` HTML element within Light DOM to enable form submit,
+     * when `name` property is set.
+     * @private
+     */
+    formSupport: Array<HTMLElement>;
+    _internals: ElementInternals;
     static emptyInput: HTMLInputElement;
     static i18nBundle: I18nBundle;
-    formElementAnchor(): Promise<HTMLElement | undefined>;
-    get formFormattedValue(): FormData | null;
+    static get formAssociated(): boolean;
+    constructor();
+    /**
+     * @override
+     */
+    getFocusDomRef(): HTMLElement | undefined;
     _onmouseover(): void;
     _onmouseout(): void;
     _onclick(e: MouseEvent): void;
@@ -130,13 +146,16 @@ declare class FileUploader extends UI5Element implements IFormInputElement {
      * @default null
      */
     get files(): FileList | null;
+    onBeforeRendering(): void;
     onAfterRendering(): void;
+    _enableFormSupport(): void;
     _onChange(e: Event): void;
     _updateValue(files: FileList | null): void;
+    _setFormValue(): void;
     toggleValueStatePopover(open: boolean): void;
-    openValueStatePopover(): void;
-    closeValueStatePopover(): void;
-    _getPopover(): Popover;
+    openValueStatePopover(): Promise<void>;
+    closeValueStatePopover(): Promise<void>;
+    _getPopover(): Promise<Popover>;
     /**
      * in case when the component is not placed in the DOM, return empty FileList, like native input would do
      * @private
@@ -144,6 +163,8 @@ declare class FileUploader extends UI5Element implements IFormInputElement {
     static get _emptyFilesList(): FileList | null;
     get browseText(): string;
     get titleText(): string;
+    get _canUseNativeFormSupport(): boolean;
+    get _keepInputInShadowDOM(): boolean;
     get _input(): HTMLInputElement;
     get valueStateTextMappings(): Record<string, string>;
     get valueStateText(): string;

package/dist/FileUploader.js

@@ -11,6 +11,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
@@ -21,6 +22,7 @@ import Popover from "./Popover.js";
 import Icon from "./Icon.js";
 // Template
 import FileUploaderTemplate from "./generated/templates/FileUploaderTemplate.lit.js";
+import FileUploaderPopoverTemplate from "./generated/templates/FileUploaderPopoverTemplate.lit.js";
 // Styles
 import FileUploaderCss from "./generated/themes/FileUploader.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
@@ -50,18 +52,18 @@ import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
  * @public
  */
 let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
-    async formElementAnchor() {
-        return this.getFocusDomRefAsync();
+    static get formAssociated() {
+        return true;
     }
-    get formFormattedValue() {
-        if (this.files) {
-            const formData = new FormData();
-            for (let i = 0; i < this.files.length; i++) {
-                formData.append(this.name, this.files[i]);
-            }
-            return formData;
-        }
-        return null;
+    constructor() {
+        super();
+        this._internals = this.attachInternals && this.attachInternals();
+    }
+    /**
+     * @override
+     */
+    getFocusDomRef() {
+        return this.content[0];
     }
     _onmouseover() {
         this.content.forEach(item => {
@@ -123,12 +125,31 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
         }
         return FileUploader_1._emptyFilesList;
     }
+    onBeforeRendering() {
+        this._enableFormSupport();
+    }
     onAfterRendering() {
         if (!this.value) {
             this._input.value = "";
         }
         this.toggleValueStatePopover(this.shouldOpenValueStateMessagePopover);
     }
+    _enableFormSupport() {
+        const formSupport = getFeature("FormSupport");
+        if (formSupport) {
+            if (this._canUseNativeFormSupport) {
+                this._setFormValue();
+            }
+            else {
+                formSupport.syncNativeFileInput(this, (element, nativeInput) => {
+                    nativeInput.disabled = !!element.disabled;
+                }, this._onChange.bind(this));
+            }
+        }
+        else if (this.name) {
+            console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
+        }
+    }
     _onChange(e) {
         const changedFiles = e.target.files;
         this._updateValue(changedFiles);
@@ -141,6 +162,15 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
             return `${acc}"${currFile.name}" `;
         }, "");
     }
+    _setFormValue() {
+        const formData = new FormData();
+        if (this.files) {
+            for (let i = 0; i < this.files.length; i++) {
+                formData.append(this.name, this.files[i]);
+            }
+        }
+        this._internals.setFormValue(formData);
+    }
     toggleValueStatePopover(open) {
         if (open) {
             this.openValueStatePopover();
@@ -149,21 +179,21 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
             this.closeValueStatePopover();
         }
     }
-    openValueStatePopover() {
-        const popover = this._getPopover();
+    async openValueStatePopover() {
+        const popover = await this._getPopover();
         if (popover) {
-            popover.opener = this;
-            popover.open = true;
+            popover.showAt(this);
         }
     }
-    closeValueStatePopover() {
-        const popover = this._getPopover();
+    async closeValueStatePopover() {
+        const popover = await this._getPopover();
         if (popover) {
-            popover.open = false;
+            popover.close();
         }
     }
-    _getPopover() {
-        return this.shadowRoot.querySelector(".ui5-valuestatemessage-popover");
+    async _getPopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector(".ui5-valuestatemessage-popover");
     }
     /**
      * in case when the component is not placed in the DOM, return empty FileList, like native input would do
@@ -182,15 +212,22 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
     get titleText() {
         return FileUploader_1.i18nBundle.getText(FILEUPLOADER_TITLE);
     }
+    get _canUseNativeFormSupport() {
+        return !!(this._internals && this._internals.setFormValue);
+    }
+    get _keepInputInShadowDOM() {
+        // only put input in the light dom when ui5-file-uploader is placed inside form and there is no support for form elements
+        return this._canUseNativeFormSupport || !this.name;
+    }
     get _input() {
         return (this.shadowRoot.querySelector("input[type=file]") || this.querySelector("input[type=file][data-ui5-form-support]"));
     }
     get valueStateTextMappings() {
         return {
-            "Positive": FileUploader_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
+            "Success": FileUploader_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
             "Information": FileUploader_1.i18nBundle.getText(VALUE_STATE_INFORMATION),
-            "Negative": FileUploader_1.i18nBundle.getText(VALUE_STATE_ERROR),
-            "Critical": FileUploader_1.i18nBundle.getText(VALUE_STATE_WARNING),
+            "Error": FileUploader_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            "Warning": FileUploader_1.i18nBundle.getText(VALUE_STATE_WARNING),
         };
     }
     get valueStateText() {
@@ -200,7 +237,7 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
         return this.valueState !== ValueState.None;
     }
     get hasValueStateText() {
-        return this.hasValueState && this.valueState !== ValueState.Positive;
+        return this.hasValueState && this.valueState !== ValueState.Success;
     }
     get valueStateMessageText() {
         return this.getSlottedNodes("valueStateMessage").map(el => el.cloneNode(true));
@@ -216,9 +253,9 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
      */
     get _valueStateMessageInputIcon() {
         const iconPerValueState = {
-            Negative: "error",
-            Critical: "alert",
-            Positive: "sys-enter-2",
+            Error: "error",
+            Warning: "alert",
+            Success: "sys-enter-2",
             Information: "information",
         };
         return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
@@ -227,9 +264,9 @@ let FileUploader = FileUploader_1 = class FileUploader extends UI5Element {
         return {
             popoverValueState: {
                 "ui5-valuestatemessage-root": true,
-                "ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
-                "ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
-                "ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
+                "ui5-valuestatemessage--success": this.valueState === ValueState.Success,
+                "ui5-valuestatemessage--error": this.valueState === ValueState.Error,
+                "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
                 "ui5-valuestatemessage--information": this.valueState === ValueState.Information,
             },
         };
@@ -281,18 +318,18 @@ __decorate([
 __decorate([
     slot()
 ], FileUploader.prototype, "valueStateMessage", void 0);
+__decorate([
+    slot()
+], FileUploader.prototype, "formSupport", void 0);
 FileUploader = FileUploader_1 = __decorate([
     customElement({
         tag: "ui5-file-uploader",
         languageAware: true,
-        formAssociated: true,
         renderer: litRender,
-        styles: [
-            FileUploaderCss,
-            ResponsivePopoverCommonCss,
-            ValueStateMessageCss,
-        ],
+        styles: FileUploaderCss,
         template: FileUploaderTemplate,
+        staticAreaTemplate: FileUploaderPopoverTemplate,
+        staticAreaStyles: [ResponsivePopoverCommonCss, ValueStateMessageCss],
         dependencies: [
             Input,
             Popover,

package/dist/FileUploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.js","sourceRoot":"","sources":["../src/FileUploader.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 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"]}
+{"version":3,"file":"FileUploader.js","sourceRoot":"","sources":["../src/FileUploader.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 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 { getFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.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 {\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\";\nimport FileUploaderPopoverTemplate from \"./generated/templates/FileUploaderPopoverTemplate.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\";\nimport type FormSupport from \"./features/InputElementsFormSupport.js\";\nimport type { IFormElement, NativeFormElement } from \"./features/InputElementsFormSupport.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\trenderer: litRender,\n\tstyles: FileUploaderCss,\n\ttemplate: FileUploaderTemplate,\n\tstaticAreaTemplate: FileUploaderPopoverTemplate,\n\tstaticAreaStyles: [ResponsivePopoverCommonCss, ValueStateMessageCss],\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 IFormElement {\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 with which the component will be submitted in an HTML form.\n\t *\n\t * **Important:** For the `name` property to have effect, you must add the following import to your project:\n\t * `import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`\n\t *\n\t * **Note:** When set, a native `input` HTML element\n\t * will be created inside the component so that it can be submitted as\n\t * part of an HTML form. Do not use this property unless you need to submit a form.\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\t/**\n\t * The slot is used to render native `input` HTML element within Light DOM to enable form submit,\n\t * when `name` property is set.\n\t * @private\n\t */\n\t@slot()\n\tformSupport!: Array<HTMLElement>;\n\n\t_internals: ElementInternals;\n\n\tstatic emptyInput: HTMLInputElement;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic get formAssociated() {\n\t\treturn true;\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._internals = this.attachInternals && this.attachInternals();\n\t}\n\n\t/**\n\t * @override\n\t */\n\tgetFocusDomRef(): HTMLElement | undefined {\n\t\treturn this.content[0];\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\tonBeforeRendering() {\n\t\tthis._enableFormSupport();\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_enableFormSupport() {\n\t\tconst formSupport = getFeature<typeof FormSupport>(\"FormSupport\");\n\n\t\tif (formSupport) {\n\t\t\tif (this._canUseNativeFormSupport) {\n\t\t\t\tthis._setFormValue();\n\t\t\t} else {\n\t\t\t\tformSupport.syncNativeFileInput(this,\n\t\t\t\t\t(element: IFormElement, nativeInput: NativeFormElement) => {\n\t\t\t\t\t\tnativeInput.disabled = !!element.disabled;\n\t\t\t\t\t},\n\t\t\t\t\tthis._onChange.bind(this));\n\t\t\t}\n\t\t} else if (this.name) {\n\t\t\tconsole.warn(`In order for the \"name\" property to have effect, you should also: import \"@ui5/webcomponents/dist/features/InputElementsFormSupport.js\";`); // eslint-disable-line\n\t\t}\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\t_setFormValue() {\n\t\tconst formData = new FormData();\n\n\t\tif (this.files) {\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\t\t}\n\n\t\tthis._internals.setFormValue(formData);\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\tasync openValueStatePopover() {\n\t\tconst popover = await this._getPopover();\n\n\t\tif (popover) {\n\t\t\tpopover.showAt(this);\n\t\t}\n\t}\n\n\tasync closeValueStatePopover() {\n\t\tconst popover = await this._getPopover();\n\n\t\tif (popover) {\n\t\t\tpopover.close();\n\t\t}\n\t}\n\n\tasync _getPopover(): Promise<Popover> {\n\t\tconst staticAreaItem = await this.getStaticAreaItemDomRef();\n\t\treturn staticAreaItem!.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 _canUseNativeFormSupport(): boolean {\n\t\treturn !!(this._internals && this._internals.setFormValue);\n\t}\n\n\tget _keepInputInShadowDOM(): boolean {\n\t\t// only put input in the light dom when ui5-file-uploader is placed inside form and there is no support for form elements\n\t\treturn this._canUseNativeFormSupport || !this.name;\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\"Success\": FileUploader.i18nBundle.getText(VALUE_STATE_SUCCESS),\n\t\t\t\"Information\": FileUploader.i18nBundle.getText(VALUE_STATE_INFORMATION),\n\t\t\t\"Error\": FileUploader.i18nBundle.getText(VALUE_STATE_ERROR),\n\t\t\t\"Warning\": 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.Success;\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\tError: \"error\",\n\t\t\tWarning: \"alert\",\n\t\t\tSuccess: \"sys-enter-2\",\n\t\t\tInformation: \"information\",\n\t\t};\n\n\t\treturn this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : \"\";\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\tpopoverValueState: {\n\t\t\t\t\"ui5-valuestatemessage-root\": true,\n\t\t\t\t\"ui5-valuestatemessage--success\": this.valueState === ValueState.Success,\n\t\t\t\t\"ui5-valuestatemessage--error\": this.valueState === ValueState.Error,\n\t\t\t\t\"ui5-valuestatemessage--warning\": this.valueState === ValueState.Warning,\n\t\t\t\t\"ui5-valuestatemessage--information\": this.valueState === ValueState.Information,\n\t\t\t},\n\t\t};\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/{ListItemGroupHeader.d.ts → GroupHeaderListItem.d.ts}

@@ -2,21 +2,22 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItemBase from "./ListItemBase.js";
 /**
  * @class
- * The `ui5-li-group-header` is a special list item, used only to separate other list items into logical groups.
+ * The `ui5-li-groupheader` is a special list item, used only to separate other list items into logical groups.
  * @slot {Node[]} default - Defines the text of the component.
  *
  * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
  * @constructor
  * @extends ListItemBase
- * @private
+ * @public
  */
-declare class ListItemGroupHeader extends ListItemBase {
+declare class GroupHeaderListItem extends ListItemBase {
     /**
      * Defines the text alternative of the component.
      *
      * **Note:** If not provided a default text alternative will be set, if present.
      * @default ""
      * @public
+     * @since 1.0.0-rc.15
      */
     accessibleName: string;
     static i18nBundle: I18nBundle;
@@ -25,4 +26,4 @@ declare class ListItemGroupHeader extends ListItemBase {
     get ariaLabelText(): string;
     static onDefine(): Promise<void>;
 }
-export default ListItemGroupHeader;
+export default GroupHeaderListItem;

package/dist/{ListItemGroupHeader.js → GroupHeaderListItem.js}

@@ -4,51 +4,51 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-var ListItemGroupHeader_1;
+var GroupHeaderListItem_1;
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItemBase from "./ListItemBase.js";
 import { GROUP_HEADER_TEXT } from "./generated/i18n/i18n-defaults.js";
 // Template
-import ListItemGroupHeaderTemplate from "./generated/templates/ListItemGroupHeaderTemplate.lit.js";
+import GroupHeaderListItemTemplate from "./generated/templates/GroupHeaderListItemTemplate.lit.js";
 // Styles
-import ListItemGroupHeaderCss from "./generated/themes/ListItemGroupHeader.css.js";
+import groupheaderListItemCss from "./generated/themes/GroupHeaderListItem.css.js";
 /**
  * @class
- * The `ui5-li-group-header` is a special list item, used only to separate other list items into logical groups.
+ * The `ui5-li-groupheader` is a special list item, used only to separate other list items into logical groups.
  * @slot {Node[]} default - Defines the text of the component.
  *
  * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
  * @constructor
  * @extends ListItemBase
- * @private
+ * @public
  */
-let ListItemGroupHeader = ListItemGroupHeader_1 = class ListItemGroupHeader extends ListItemBase {
+let GroupHeaderListItem = GroupHeaderListItem_1 = class GroupHeaderListItem extends ListItemBase {
     get groupItem() {
         return true;
     }
     get groupHeaderText() {
-        return ListItemGroupHeader_1.i18nBundle.getText(GROUP_HEADER_TEXT);
+        return GroupHeaderListItem_1.i18nBundle.getText(GROUP_HEADER_TEXT);
     }
     get ariaLabelText() {
         return [this.textContent, this.accessibleName].filter(Boolean).join(" ");
     }
     static async onDefine() {
-        ListItemGroupHeader_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+        GroupHeaderListItem_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
     }
 };
 __decorate([
     property()
-], ListItemGroupHeader.prototype, "accessibleName", void 0);
-ListItemGroupHeader = ListItemGroupHeader_1 = __decorate([
+], GroupHeaderListItem.prototype, "accessibleName", void 0);
+GroupHeaderListItem = GroupHeaderListItem_1 = __decorate([
     customElement({
-        tag: "ui5-li-group-header",
+        tag: "ui5-li-groupheader",
         languageAware: true,
-        template: ListItemGroupHeaderTemplate,
-        styles: [ListItemBase.styles, ListItemGroupHeaderCss],
+        template: GroupHeaderListItemTemplate,
+        styles: [ListItemBase.styles, groupheaderListItemCss],
     })
-], ListItemGroupHeader);
-ListItemGroupHeader.define();
-export default ListItemGroupHeader;
-//# sourceMappingURL=ListItemGroupHeader.js.map
+], GroupHeaderListItem);
+GroupHeaderListItem.define();
+export default GroupHeaderListItem;
+//# sourceMappingURL=GroupHeaderListItem.js.map

package/dist/GroupHeaderListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupHeaderListItem.js","sourceRoot":"","sources":["../src/GroupHeaderListItem.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAErF,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,WAAW;AACX,OAAO,2BAA2B,MAAM,0DAA0D,CAAC;AAEnG,SAAS;AACT,OAAO,sBAAsB,MAAM,+CAA+C,CAAC;AAEnF;;;;;;;;;GASG;AAOH,IAAM,mBAAmB,2BAAzB,MAAM,mBAAoB,SAAQ,YAAY;IAc7C,IAAI,SAAS;QACZ,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,qBAAmB,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAClE,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1E,CAAC;IAED,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,qBAAmB,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC5E,CAAC;CACD,CAAA;AAnBA;IADC,QAAQ,EAAE;2DACa;AAVnB,mBAAmB;IANxB,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,2BAA2B;QACrC,MAAM,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,sBAAsB,CAAC;KACrD,CAAC;GACI,mBAAmB,CA6BxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport ListItemBase from \"./ListItemBase.js\";\n\nimport { GROUP_HEADER_TEXT } from \"./generated/i18n/i18n-defaults.js\";\n\n// Template\nimport GroupHeaderListItemTemplate from \"./generated/templates/GroupHeaderListItemTemplate.lit.js\";\n\n// Styles\nimport groupheaderListItemCss from \"./generated/themes/GroupHeaderListItem.css.js\";\n\n/**\n * @class\n * The `ui5-li-groupheader` is a special list item, used only to separate other list items into logical groups.\n * @slot {Node[]} default - Defines the text of the component.\n *\n * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n * @constructor\n * @extends ListItemBase\n * @public\n */\n@customElement({\n\ttag: \"ui5-li-groupheader\",\n\tlanguageAware: true,\n\ttemplate: GroupHeaderListItemTemplate,\n\tstyles: [ListItemBase.styles, groupheaderListItemCss],\n})\nclass GroupHeaderListItem extends ListItemBase {\n\t/**\n\t * Defines the text alternative of the component.\n\t *\n\t * **Note:** If not provided a default text alternative will be set, if present.\n\t * @default \"\"\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@property()\n\taccessibleName!: string;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tget groupItem() {\n\t\treturn true;\n\t}\n\n\tget groupHeaderText() {\n\t\treturn GroupHeaderListItem.i18nBundle.getText(GROUP_HEADER_TEXT);\n\t}\n\n\tget ariaLabelText() {\n\t\treturn [this.textContent, this.accessibleName].filter(Boolean).join(\" \");\n\t}\n\n\tstatic async onDefine() {\n\t\tGroupHeaderListItem.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n}\n\nGroupHeaderListItem.define();\n\nexport default GroupHeaderListItem;\n"]}