genesys-spark-components 4.115.1 → 4.116.0

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file-beta/components/gux-file-list-item/gux-file-list-item.css

@@ -0,0 +1,66 @@
+:host {
+  display: block;
+}
+
+.gux-file-list-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: var(--gse-ui-fileUpload-fileCard-foregroundColor);
+  border: var(--gse-ui-fileUpload-fileCard-mainContainer-default-border-width) var(--gse-ui-fileUpload-fileCard-mainContainer-default-border-style) var(--gse-ui-fileUpload-fileCard-mainContainer-default-border-color);
+  border-radius: var(--gse-ui-fileUpload-fileCard-borderRadius);
+  box-shadow: var(--gse-ui-fileUpload-fileCard-boxShadow);
+}
+.gux-file-list-item.gux-disabled {
+  opacity: 0.5;
+}
+.gux-file-list-item.gux-error {
+  padding-block-start: 0;
+  border: var(--gse-ui-fileUpload-fileCard-mainContainer-error-border-width) var(--gse-ui-fileUpload-fileCard-mainContainer-error-border-style) var(--gse-ui-fileUpload-fileCard-mainContainer-error-border-color);
+}
+.gux-file-list-item .gux-info {
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--gse-ui-fileUpload-fileCard-card-gap);
+  align-items: center;
+  inline-size: 100%;
+  block-size: 32px;
+  padding: var(--gse-ui-fileUpload-fileCard-card-padding);
+}
+.gux-file-list-item .gux-info .gux-file-name {
+  font-family: var(--gse-ui-fileUpload-fileCard-fileName-text-fontFamily);
+  font-size: var(--gse-ui-fileUpload-fileCard-fileName-text-fontSize);
+  font-weight: var(--gse-ui-fileUpload-fileCard-fileName-text-fontWeight);
+  line-height: var(--gse-ui-fileUpload-fileCard-fileName-text-lineHeight);
+  color: var(--gse-ui-fileUpload-fileCard-fileName-default);
+}
+.gux-file-list-item .gux-info .gux-indicator[icon-name="fa/circle-check-solid"] {
+  --gse-ui-formControl-label-tooltipTrigger-color: var(
+    --gse-ui-fileUpload-fileCard-statusIcon-success
+  );
+}
+.gux-file-list-item .gux-info .gux-indicator[icon-name="fa/hexagon-exclamation-solid"] {
+  --gse-ui-formControl-label-tooltipTrigger-color: var(
+    --gse-ui-fileUpload-fileCard-statusIcon-error
+  );
+}
+.gux-file-list-item .gux-additional-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gse-ui-fileUpload-fileCard-card-errorCard-errorTextSection-gap);
+  inline-size: 100%;
+  padding: var(--gse-ui-fileUpload-fileCard-card-errorCard-mainContainer-padding);
+  font-family: var(--gse-ui-fileUpload-fileCard-error-text-fontFamily);
+  font-size: var(--gse-ui-fileUpload-fileCard-error-text-fontSize);
+  font-weight: var(--gse-ui-fileUpload-fileCard-error-text-fontWeight);
+  line-height: var(--gse-ui-fileUpload-fileCard-error-text-lineHeight);
+  border-block-start: var(--gse-ui-fileUpload-fileCard-mainContainer-default-border-width) var(--gse-ui-fileUpload-fileCard-mainContainer-default-border-style) var(--gse-ui-fileUpload-fileCard-mainContainer-default-border-color);
+}
+.gux-file-list-item .gux-additional-info .gux-additional-info-header {
+  padding: var(--gse-ui-fileUpload-fileCard-card-padding);
+  color: var(--gse-ui-fileUpload-fileCard-error-errorMessage);
+}
+.gux-file-list-item .gux-additional-info .gux-additional-info-content {
+  padding: var(--gse-ui-fileUpload-fileCard-card-padding);
+  color: var(--gse-ui-fileUpload-fileCard-error-errorHelper);
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file-beta/components/gux-file-list-item/gux-file-list-item.js

@@ -0,0 +1,153 @@
+import { h } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../../../../i18n/index";
+import { trackComponent } from "../../../../../../../utils/tracking/usage";
+import componentResources from "./i18n/en.json";
+export class GuxFileListItem {
+    constructor() {
+        this.name = undefined;
+        this.index = undefined;
+        this.disabled = false;
+        this.status = undefined;
+    }
+    async componentWillLoad() {
+        this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
+        trackComponent(this.root);
+    }
+    render() {
+        return (h("div", { key: '8c7de21311c7efcc6b3ee95dfe5224ffaea9ed2f', class: {
+                'gux-file-list-item': true,
+                [`gux-${this.status}`]: true,
+                'gux-disabled': this.disabled
+            } }, h("div", { key: 'e7c5b0957f52222c50c7599f69a4145e9f67ab74', class: "gux-info" }, h("gux-truncate", { key: 'a095b2528c551c7aafe85efb9a06dc5a1e357e41' }, h("span", { key: '81732c744cd8230d5bcde46a39bf99c4a6b526bf', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
+    }
+    renderStatusIndicator() {
+        switch (this.status) {
+            case 'loading':
+                return (h("gux-radial-loading", { context: "input", "screenreader-text": this.getI18nValue('uploadingFile', {
+                        filename: this.name
+                    }) }));
+            case 'success':
+                return (h("gux-icon-tooltip-beta", { "icon-name": "fa/circle-check-solid", class: "gux-indicator" }, h("span", { slot: "content" }, this.getI18nValue('success', { filename: this.name }))));
+            case 'error':
+                return (h("gux-icon-tooltip-beta", { "icon-name": "fa/hexagon-exclamation-solid", class: "gux-indicator" }, h("span", { slot: "content" }, this.getI18nValue('error', { filename: this.name }))));
+            default:
+                return null;
+        }
+    }
+    renderFileRemoveButton() {
+        if (this.disabled) {
+            return null;
+        }
+        return (h("gux-button-slot", { accent: "ghost", "icon-only": true }, h("button", { type: "button", onClick: () => this.guxremovefile.emit(this.index) }, h("gux-icon", { "icon-name": "fa/xmark-large-regular", size: "small", decorative: true }), h("gux-screen-reader-beta", null, this.getI18nValue('removeFile', { filename: this.name })))));
+    }
+    renderAdditionalInfo() {
+        if (this.status === 'error') {
+            return (h("div", { class: "gux-additional-info" }, h("div", { class: "gux-additional-info-header" }, h("slot", { name: "additional-info-header" })), h("div", { class: "gux-additional-info-content" }, h("slot", { name: "additional-info-content" }))));
+        }
+        return null;
+    }
+    static get is() { return "gux-file-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-file-list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-file-list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "index",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'loading' | 'success' | 'error'",
+                    "resolved": "\"default\" | \"error\" | \"loading\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "status",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "guxremovefile",
+                "name": "guxremovefile",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "root"; }
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file-beta/gux-form-field-file.css

@@ -0,0 +1,159 @@
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+.gux-form-field-container.gux-beside {
+  display: flex;
+  flex-direction: row;
+}
+
+.gux-form-field-error {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
+  place-content: stretch flex-start;
+  padding: var(--gse-ui-formControl-helper-errorPadding);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error.gux-show {
+  display: flex;
+}
+.gux-form-field-error gux-icon {
+  flex: 0 1 auto;
+  order: 0;
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
+  color: var(--gse-ui-formControl-helper-errorColor);
+}
+.gux-form-field-error .gux-message {
+  flex: 0 1 auto;
+  align-self: auto;
+  order: 0;
+}
+
+.gux-form-field-label {
+  display: inline-flex;
+  flex: 1 0 auto;
+}
+.gux-form-field-label ::slotted(gux-label-info-beta) {
+  padding-inline-start: var(--gse-ui-formControl-formField-gap);
+}
+.gux-form-field-label.gux-beside {
+  position: relative;
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
+}
+.gux-form-field-label.gux-above {
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
+}
+.gux-form-field-label.gux-screenreader {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.gux-form-field-help {
+  display: none;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  place-content: stretch flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
+  font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
+  font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
+  line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
+  color: var(--gse-ui-formControl-helper-defaultColor);
+}
+.gux-form-field-help.gux-show {
+  display: flex;
+}
+.gux-form-field-help .gux-message {
+  flex: 0 1 auto;
+  align-self: none;
+  order: 0;
+}
+
+:host {
+  display: block;
+}
+
+::slotted(label) {
+  font-family: var(--gse-ui-formControl-label-textBold-fontFamily);
+  font-size: var(--gse-ui-formControl-label-textBold-fontSize);
+  font-weight: var(--gse-ui-formControl-label-textBold-fontWeight);
+  line-height: var(--gse-ui-formControl-label-textBold-lineHeight);
+  color: var(--gse-ui-formControl-label-labelColor);
+}
+
+.gux-input-and-error-container {
+  flex-grow: 1;
+}
+
+.gux-drop-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-fileUpload-dragDrop-btnText-gap);
+  margin-block: var(--gse-ui-fileUpload-mainContainer-gap);
+  margin-inline: 0;
+  font-family: var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-fontFamily);
+  font-size: var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-fontSize);
+  font-weight: var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-fontWeight);
+  line-height: var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-lineHeight);
+  color: var(--gse-ui-fileUpload-dragAndDrop-dropZoneText-color);
+}
+.gux-drop-container.gux-drop-zone {
+  place-content: stretch center;
+  align-items: center;
+  min-block-size: var(--gse-ui-fileUpload-dragAndDrop-dropZone-minHeight);
+  padding: 20px;
+  border: var(--gse-ui-fileUpload-dragAndDrop-dropZone-default-border-width) var(--gse-ui-fileUpload-dragAndDrop-dropZone-default-border-style) var(--gse-ui-fileUpload-dragAndDrop-dropZone-default-border-color);
+  border-radius: var(--gse-ui-fileUpload-dropZone-borderRadius);
+}
+.gux-drop-container.gux-drop-zone.gux-drag-over:not(.gux-disabled) {
+  background-color: var(--gse-ui-fileUpload-dragAndDrop-dropZone-background-active);
+  border: var(--gse-ui-fileUpload-dragAndDrop-dropZone-active-border-width) var(--gse-ui-fileUpload-dragAndDrop-dropZone-active-border-style) var(--gse-ui-fileUpload-dragAndDrop-dropZone-active-border-color);
+}
+.gux-drop-container.gux-drop-zone.gux-disabled {
+  border-color: rgba(0, 0, 64, 0.2509803922);
+}
+.gux-drop-container.gux-drop-zone.gux-disabled .gux-drag-and-drop-text {
+  opacity: 0.5;
+}
+
+.gux-offscreen {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.gux-proxy-button {
+  inline-size: fit-content;
+  border-radius: var(--gse-ui-button-borderRadius);
+}
+
+.gux-proxy-button:focus-within {
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
+}
+
+.gux-file-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gse-ui-fileUpload-fileCard-cardGroup-gap);
+  inline-size: 100%;
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file-beta/gux-form-field-file.js

@@ -0,0 +1,296 @@
+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 { h, forceUpdate } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../../i18n";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import { GuxFormFieldError, GuxFormFieldContainer, GuxFormFieldHelp, GuxFormFieldLabel } from "../../functional-components/functional-components";
+import { getSlottedInput, validateFormIds } from "../../gux-form-field.service";
+import { preventBrowserValidationStyling } from "../../../../../utils/dom/prevent-browser-validation-styling";
+import { onDisabledChange, onRequiredChange, onMultipleChange } from "../../../../../utils/dom/on-attribute-change";
+import simulateNativeEvent from "../../../../../utils/dom/simulate-native-event";
+import componentResources from "./i18n/en.json";
+/**
+ * @slot input - Required slot for input tag
+ * @slot label - Required slot for label tag
+ * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
+ * @slot label-info - Optional slot for tooltip
+ */
+export class GuxFormFieldFileBeta {
+    constructor() {
+        this.indicatorMark = 'required';
+        this.dragAndDrop = false;
+        this.disabled = false;
+        this.hasError = false;
+        this.hasHelp = false;
+        this.required = false;
+    }
+    onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
+        this.hasError = hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot(this.root, 'help');
+    }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.input.matches(':focus-visible')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.input.matches(':focus-visible')) {
+                    void ((_b = this.labelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
+    }
+    onGuxRemoveFile(event) {
+        this.removeFile(event.detail);
+    }
+    async componentWillLoad() {
+        this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
+        this.setInput();
+        this.hasError = hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot(this.root, 'help');
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
+        trackComponent(this.root);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.disabledObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.requiredObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.multipleObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+    }
+    render() {
+        return (h(GuxFormFieldContainer, { key: '00c36efa4405c0b5a91f862cb01ec2b8a71046ec', labelPosition: "above" }, h(GuxFormFieldLabel, { key: '70256247ed84be23f88ae9bb38c49269b171ccf8', position: "above", required: this.required }, h("slot", { key: 'd533077057b2e9ba5a7d93db92227b370ca01958', name: "label" }), h("gux-form-field-label-indicator", { key: 'e97db53e8a57d4788e362145ead6edf1d06c6856', variant: this.indicatorMark, required: this.required }), h("slot", { key: '3404533998a709fe4de78b3d4acaf769892ae6a0', name: "label-info" })), h("div", { key: 'a76911d55098f00f1d3ad972aab42d9a4670328f', class: "gux-input-and-error-container" }, h(GuxFormFieldHelp, { key: '97d13f4d962563a6128a18f06d70b5adc830d0ee', show: this.hasHelp }, h("slot", { key: '15db9f5259d63b803cf34cb8d82974e79f2c7328', name: "help" })), this.renderInputSlot(), this.renderFileList(), h(GuxFormFieldError, { key: '7160af25b00b911a46598cc694c27abf9cddef9f', show: this.hasError }, h("slot", { key: '9cad5228cefbff40f83f7a3657927421d64900ee', name: "error" })))));
+    }
+    setInput() {
+        this.input = getSlottedInput(this.root, 'input[type="file"][slot="input"]');
+        this.input.addEventListener('input', () => {
+            forceUpdate(this.root);
+        });
+        preventBrowserValidationStyling(this.input);
+        this.disabled = this.input.disabled;
+        this.required = this.input.required;
+        this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+            this.disabled = disabled;
+        });
+        this.requiredObserver = onRequiredChange(this.input, (required) => {
+            this.required = required;
+        });
+        this.multipleObserver = onMultipleChange(this.input, () => {
+            forceUpdate(this.root);
+        });
+        validateFormIds(this.root, this.input);
+    }
+    getDropZoneText() {
+        if (this.input.multiple) {
+            return this.getI18nValue('dragAndDropFilesInstructions');
+        }
+        else {
+            return this.getI18nValue('dragAndDropFileInstructions');
+        }
+    }
+    getProxyButtonText() {
+        if (this.dragAndDrop) {
+            return this.getI18nValue('clickToUpload');
+        }
+        else if (this.input.multiple) {
+            if (this.input.files.length > 0) {
+                return this.getI18nValue('changeFiles');
+            }
+            return this.getI18nValue('uploadFiles');
+        }
+        else {
+            if (this.input.files.length > 0) {
+                return this.getI18nValue('changeFile');
+            }
+            return this.getI18nValue('uploadFile');
+        }
+    }
+    removeFile(index) {
+        const fileList = this.input.files;
+        const dt = new DataTransfer();
+        for (let i = 0; i < fileList.length; i++) {
+            if (index !== i) {
+                dt.items.add(fileList[i]);
+            }
+        }
+        this.modifyInputFiles(dt.files);
+    }
+    modifyInputFiles(files) {
+        this.input.files = files;
+        simulateNativeEvent(this.root, 'input');
+        simulateNativeEvent(this.root, 'change');
+        forceUpdate(this.root);
+    }
+    onProxyFileButtonClick(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.input.focus();
+        this.input.click();
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        const currentFileList = this.input.files;
+        const newFileList = event.dataTransfer.items;
+        const dt = new DataTransfer();
+        for (let i = 0; i < currentFileList.length; i++) {
+            dt.items.add(currentFileList[i]);
+        }
+        for (let i = 0; i < newFileList.length; i++) {
+            const item = newFileList[i];
+            if (item.kind === 'file' && item.webkitGetAsEntry().isFile) {
+                dt.items.add(item.getAsFile());
+            }
+        }
+        this.dropContainer.classList.remove('gux-drag-over');
+        this.modifyInputFiles(dt.files);
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.dropContainer.classList.add('gux-drag-over');
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dropContainer.classList.remove('gux-drag-over');
+    }
+    renderFileList() {
+        const files = Array.from(this.input.files || new DataTransfer().files);
+        if (files.length === 0) {
+            return null;
+        }
+        return (h("div", { class: "gux-file-list" }, files.map((file, index) => {
+            return (h("slot", { name: `file-${index}` }, h("gux-file-list-item", { name: file.name, index: index, disabled: this.disabled })));
+        })));
+    }
+    renderInputSlot() {
+        return (h("div", { ref: el => (this.dropContainer = el), class: {
+                'gux-drop-container': true,
+                'gux-drop-zone': this.dragAndDrop,
+                'gux-disabled': this.disabled
+            }, onDrop: event => this.onDrop(event), onDragOver: event => this.onDragOver(event), onDragEnter: event => this.onDragOver(event), onDragLeave: event => this.onDragLeave(event) }, this.dragAndDrop && (h("div", { class: "gux-drag-and-drop-text" }, this.getDropZoneText())), h("div", { class: "gux-proxy-button" }, h("gux-button-slot", { accent: "tertiary" }, h("button", { tabIndex: -1, type: "button", disabled: this.disabled, onClick: e => this.onProxyFileButtonClick(e) }, h("div", null, this.getProxyButtonText()))), h("div", { class: "gux-offscreen" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })))));
+    }
+    static get is() { return "gux-form-field-file-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-form-field-file.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-form-field-file.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "indicatorMark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxFormFieldIndicatorMark",
+                    "resolved": "\"none\" | \"optional\" | \"required\"",
+                    "references": {
+                        "GuxFormFieldIndicatorMark": {
+                            "location": "import",
+                            "path": "../../gux-form-field.types",
+                            "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldIndicatorMark"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field indicator mark which can show *, (optional) or blank\nDefaults to required. When set to required, the component will display * for required fields and blank for optional\nWhen set to optional, the component will display (optional) for optional and blank for required."
+                },
+                "attribute": "indicator-mark",
+                "reflect": false,
+                "defaultValue": "'required'"
+            },
+            "dragAndDrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "drag-and-drop",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "disabled": {},
+            "hasError": {},
+            "hasHelp": {},
+            "required": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keyup",
+                "method": "handleKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "guxremovefile",
+                "method": "onGuxRemoveFile",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    OnMutation({ childList: true, subtree: true })
+], GuxFormFieldFileBeta.prototype, "onMutation", null);