@shoper/phoenix_design_system 1.18.2 → 1.18.3

package/build/cjs/packages/phoenix/src/components/form/control/control_element.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var control_constatns = require('./control_constatns.js');
+
+exports.HControlElement = class HControlElement extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(control_constatns.FORM_CONTROLS_CSS_CLASSES.controlElement);
+    }
+};
+exports.HControlElement = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-control-element')
+], exports.HControlElement);
+//# sourceMappingURL=control_element.js.map

package/build/cjs/packages/phoenix/src/components/form/control/control_element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/control/control_errors.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var control_constatns = require('./control_constatns.js');
+
+exports.HControlErrors = class HControlErrors extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(control_constatns.FORM_CONTROLS_CSS_CLASSES.controlErrors);
+    }
+};
+exports.HControlErrors = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-control-errors')
+], exports.HControlErrors);
+//# sourceMappingURL=control_errors.js.map

package/build/cjs/packages/phoenix/src/components/form/control/control_errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/control/control_label.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var control_constatns = require('./control_constatns.js');
+
+exports.HControlLabel = class HControlLabel extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(control_constatns.FORM_CONTROLS_CSS_CLASSES.controlLabel);
+    }
+};
+exports.HControlLabel = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-control-label')
+], exports.HControlLabel);
+//# sourceMappingURL=control_label.js.map

package/build/cjs/packages/phoenix/src/components/form/control/control_label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_consumer_controller.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+require('lit');
+var observer = require('../../../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../../../core/context/context_consumer_controller.js');
+var control_props_sync_controller_constants = require('./control_props_sync_controller_constants.js');
+
+var _ControlPropsSyncConsumerController_host, _ControlPropsSyncConsumerController_contextConsumer, _ControlPropsSyncConsumerController_basePropsObservable, _ControlPropsSyncConsumerController_propsObserver, _ControlPropsSyncConsumerController_onPropsUpdated;
+class ControlPropsSyncConsumerController {
+    constructor({ host, onPropsUpdated }) {
+        _ControlPropsSyncConsumerController_host.set(this, void 0);
+        _ControlPropsSyncConsumerController_contextConsumer.set(this, void 0);
+        _ControlPropsSyncConsumerController_basePropsObservable.set(this, void 0);
+        _ControlPropsSyncConsumerController_propsObserver.set(this, void 0);
+        _ControlPropsSyncConsumerController_onPropsUpdated.set(this, void 0);
+        this._syncProps = (props) => {
+            Object.entries(props).forEach(([key, value]) => {
+                // eslint-disable-next-line no-prototype-builtins
+                if (key in tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_host, "f") && tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_host, "f")[key] !== value) {
+                    tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_host, "f")[key] = value;
+                }
+            });
+            tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_host, "f").requestUpdate();
+        };
+        tslib_es6.__classPrivateFieldSet(this, _ControlPropsSyncConsumerController_host, host, "f");
+        tslib_es6.__classPrivateFieldSet(this, _ControlPropsSyncConsumerController_contextConsumer, new context_consumer_controller.ContextConsumerController(tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_host, "f")), "f");
+        tslib_es6.__classPrivateFieldSet(this, _ControlPropsSyncConsumerController_onPropsUpdated, onPropsUpdated, "f");
+        tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_host, "f").addController(this);
+    }
+    hostConnected() {
+        tslib_es6.__classPrivateFieldSet(this, _ControlPropsSyncConsumerController_basePropsObservable, tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_contextConsumer, "f").consume(control_props_sync_controller_constants.FORM_CONTROL_CONTEXTS.baseProps), "f");
+        if (!tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_basePropsObservable, "f"))
+            return;
+        this._setupPropsSync();
+    }
+    _setupPropsSync() {
+        var _a;
+        if (!tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_basePropsObservable, "f"))
+            return;
+        tslib_es6.__classPrivateFieldSet(this, _ControlPropsSyncConsumerController_propsObserver, new observer.Observer((_a = tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_onPropsUpdated, "f")) !== null && _a !== void 0 ? _a : this._syncProps), "f");
+        tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_basePropsObservable, "f").subscribe(tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_propsObserver, "f"));
+    }
+    hostDisconnected() {
+        var _a;
+        (_a = tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_basePropsObservable, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe(tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncConsumerController_propsObserver, "f"));
+    }
+}
+_ControlPropsSyncConsumerController_host = new WeakMap(), _ControlPropsSyncConsumerController_contextConsumer = new WeakMap(), _ControlPropsSyncConsumerController_basePropsObservable = new WeakMap(), _ControlPropsSyncConsumerController_propsObserver = new WeakMap(), _ControlPropsSyncConsumerController_onPropsUpdated = new WeakMap();
+
+exports.ControlPropsSyncConsumerController = ControlPropsSyncConsumerController;
+//# sourceMappingURL=control_props_sync_consumer_controller.js.map

package/build/cjs/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_consumer_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_controller_constants.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const FORM_CONTROL_CONTEXTS = {
+    baseProps: 'baseProps'
+};
+const BASE_FORM_CONTROL_PROPS = {
+    disabled: 'disabled',
+    required: 'required',
+    hidden: 'hidden',
+    readonly: 'readonly',
+    controlId: 'controlId',
+    controlName: 'controlName',
+    value: 'value',
+    type: 'type'
+};
+
+exports.BASE_FORM_CONTROL_PROPS = BASE_FORM_CONTROL_PROPS;
+exports.FORM_CONTROL_CONTEXTS = FORM_CONTROL_CONTEXTS;
+//# sourceMappingURL=control_props_sync_controller_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_controller_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_provider_controller.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+require('lit');
+var behavior_subject = require('../../../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../../../core/context/context_provider_controller.js');
+var control_props_sync_controller_constants = require('./control_props_sync_controller_constants.js');
+
+var _ControlPropsSyncProviderController_host, _ControlPropsSyncProviderController_controlPropsProvider, _ControlPropsSyncProviderController_propsObservable, _ControlPropsSyncProviderController_propsToSync;
+class ControlPropsSyncProviderController {
+    constructor({ host, propsToSync = Object.keys(control_props_sync_controller_constants.BASE_FORM_CONTROL_PROPS) }) {
+        _ControlPropsSyncProviderController_host.set(this, void 0);
+        _ControlPropsSyncProviderController_controlPropsProvider.set(this, void 0);
+        _ControlPropsSyncProviderController_propsObservable.set(this, new behavior_subject.BehaviorSubject());
+        _ControlPropsSyncProviderController_propsToSync.set(this, void 0);
+        tslib_es6.__classPrivateFieldSet(this, _ControlPropsSyncProviderController_host, host, "f");
+        tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncProviderController_host, "f").addController(this);
+        tslib_es6.__classPrivateFieldSet(this, _ControlPropsSyncProviderController_controlPropsProvider, new context_provider_controller.ContextProviderController(tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncProviderController_host, "f")), "f");
+        tslib_es6.__classPrivateFieldSet(this, _ControlPropsSyncProviderController_propsToSync, propsToSync, "f");
+    }
+    hostConnected() {
+        tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncProviderController_controlPropsProvider, "f").provide(control_props_sync_controller_constants.FORM_CONTROL_CONTEXTS.baseProps, tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncProviderController_propsObservable, "f"));
+    }
+    hostUpdated() {
+        const controlPropsWithValuesToSync = tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncProviderController_propsToSync, "f").reduce((acc, propsName) => {
+            if (tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncProviderController_host, "f")[propsName] === undefined)
+                return acc;
+            return {
+                ...acc,
+                [propsName]: tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncProviderController_host, "f")[propsName]
+            };
+        }, {});
+        tslib_es6.__classPrivateFieldGet(this, _ControlPropsSyncProviderController_propsObservable, "f").notify(controlPropsWithValuesToSync);
+    }
+}
+_ControlPropsSyncProviderController_host = new WeakMap(), _ControlPropsSyncProviderController_controlPropsProvider = new WeakMap(), _ControlPropsSyncProviderController_propsObservable = new WeakMap(), _ControlPropsSyncProviderController_propsToSync = new WeakMap();
+
+exports.ControlPropsSyncProviderController = ControlPropsSyncProviderController;
+//# sourceMappingURL=control_props_sync_provider_controller.js.map

package/build/cjs/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_provider_controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/file_picker/file/file.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../../core/decorators/phoenix_custom_element.js');
+var file_picker_constants = require('../file_picker_constants.js');
+
+exports.HFile = class HFile extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.maxFileNameLength = 12;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('aria-label', this.name);
+        this.classList.add(file_picker_constants.FILE_ITEM_CSS_CLASSES.file);
+        this._separateNameFromExtension(this.name);
+    }
+    render() {
+        return lit.html `
+            <span class="${file_picker_constants.FILE_ITEM_CSS_CLASSES.fileName}"
+                >${this._fileNameWithoutExtension.length > this.maxFileNameLength
+            ? this._trimNameLength(this._fileNameWithoutExtension)
+            : this.name}</span
+            >
+            <button
+                class="${file_picker_constants.FILE_ITEM_CSS_CLASSES.fileRemoveButton}"
+                @click="${this._handleClick}"
+                aria-label="${this.removeButtonText} ${this.name}"
+                type="button"
+            >
+                ${this.removeButtonIconName
+            ? lit.html `<h-icon class="${file_picker_constants.FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}" icon-name=${this.removeButtonIconName} />`
+            : lit.nothing}
+                ${this.removeButtonText}
+            </button>
+        `;
+    }
+    _handleClick() {
+        this.emitCustomEvent(file_picker_constants.FILE_ITEM_EVENT_NAMES.removed, {
+            detail: {
+                fileId: this.id
+            }
+        });
+    }
+    _separateNameFromExtension(name) {
+        const extensionDotPosition = name.lastIndexOf('.');
+        this._fileExtensionWithDot = name.substring(extensionDotPosition, name.length);
+        this._fileNameWithoutExtension = name.slice(0, extensionDotPosition);
+    }
+    _trimNameLength(nameToTrim) {
+        const trimedNameStart = nameToTrim.slice(0, 11);
+        const trimedNameEnd = nameToTrim.slice(-3);
+        return `${trimedNameStart}...${trimedNameEnd}${this._fileExtensionWithDot}`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "id", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'remove-button-text' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "removeButtonText", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'remove-button-icon-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "removeButtonIconName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'max-file-name-length' }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HFile.prototype, "maxFileNameLength", void 0);
+exports.HFile = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-file')
+], exports.HFile);
+//# sourceMappingURL=file.js.map

package/build/cjs/packages/phoenix/src/components/form/file_picker/file/file.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/file_picker/file/file_model.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+class FileItem {
+    constructor({ name, id }) {
+        this.name = name;
+        this.id = id;
+    }
+    static create(options) {
+        return new FileItem(options);
+    }
+}
+
+exports.FileItem = FileItem;
+//# sourceMappingURL=file_model.js.map

package/build/cjs/packages/phoenix/src/components/form/file_picker/file/file_model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js

@@ -0,0 +1,191 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var index = require('../../../../../../external/classnames/index.js');
+var ref_js = require('lit-html/directives/ref.js');
+var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
+var file_picker_constants = require('./file_picker_constants.js');
+var file_model = require('./file/file_model.js');
+var input_constants = require('../input/input_constants.js');
+var ifDefined_js = require('lit-html/directives/if-defined.js');
+
+exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.type = input_constants.INPUT_CONTROL_TYPES.file;
+        this.labelText = 'Wgraj plik';
+        this.labelIconName = 'icon-upload';
+        this.removeButtonText = 'Usuń plik';
+        this.removeButtonIconName = 'icon-x';
+        this._$fileInputRef = ref_js.createRef();
+        this._handleChangeEvent = (event) => {
+            const filesList = this._getFiles(event);
+            if (filesList && filesList.length > 0) {
+                this._file = file_model.FileItem.create({
+                    name: this._getFileName(filesList),
+                    id: `file-${v4['default']()}`
+                });
+                this.classList.add(file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+            }
+        };
+        this._getFiles = (event) => {
+            const targetElement = event.currentTarget;
+            return targetElement.id === this.controlId ? targetElement.files : null;
+        };
+        this._getFileName = (fileList) => {
+            return fileList[0].name;
+        };
+        this._getInputRefValue = () => {
+            return this._$fileInputRef.value;
+        };
+        this._removeFileItem = () => {
+            const $fileInput = this._getInputRefValue();
+            if ($fileInput) {
+                $fileInput.value = '';
+                $fileInput.files = null;
+            }
+            this._file = null;
+            this.classList.remove(file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+            this._dispatchChangeEvent();
+        };
+        this._triggerClickOnLabel = () => {
+            const $fileInput = this._getInputRefValue();
+            if ($fileInput)
+                $fileInput.click();
+        };
+        this._dispatchChangeEvent = () => {
+            this.emitEvent('change');
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._addEventListeners();
+        const cssClasses = index['default']({
+            [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePicker]: true,
+            [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
+            [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
+            [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
+        });
+        if (cssClasses)
+            this.classList.add(...cssClasses.split(' '));
+    }
+    render() {
+        var _a, _b;
+        super.render();
+        return lit.html `
+            <input
+                ${ref_js.ref(this._$fileInputRef)}
+                type="file"
+                class="${file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerInput}"
+                id="${ifDefined_js.ifDefined(this.controlId)}"
+                name="${ifDefined_js.ifDefined(this.controlName)}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                accept="${ifDefined_js.ifDefined(this.accept)}"
+                @change="${this._handleChangeEvent}"
+                hidden
+            />
+
+            ${!((_a = this._file) === null || _a === void 0 ? void 0 : _a.name)
+            ? lit.html ` <h-file-picker-label
+                      control-id="${this.controlId}"
+                      label-text="${this.labelText}"
+                      label-icon-name="${ifDefined_js.ifDefined(this.labelIconName)}"
+                      aria-required="${this.required ? 'true' : 'false'}"
+                      validation-container
+                      tabindex="0"
+                  />`
+            : lit.nothing}
+            ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
+            ? lit.html ` <h-file
+                      name="${this._file.name}"
+                      id="${this._file.id}"
+                      remove-button-text="${this.removeButtonText}"
+                      remove-button-icon-name="${ifDefined_js.ifDefined(this.removeButtonIconName)}"
+                  />`
+            : lit.nothing}
+        `;
+    }
+    get files() {
+        const $fileInput = this._getInputRefValue();
+        return $fileInput.files;
+    }
+    set files(files) {
+        if (!files)
+            return;
+        const $fileInput = this._getInputRefValue();
+        const dataTransfer = new DataTransfer();
+        const filesArray = Array.from(files);
+        filesArray.forEach((file) => dataTransfer.items.add(file));
+        if ($fileInput)
+            $fileInput.files = dataTransfer.files;
+    }
+    get name() {
+        return this.controlName;
+    }
+    get id() {
+        return this.controlId;
+    }
+    _addEventListeners() {
+        this.addEventListener(file_picker_constants.FILE_ITEM_EVENT_NAMES.removed, this._removeFileItem);
+        this.addEventListener(file_picker_constants.FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClickedByEnterKey, this._triggerClickOnLabel);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'control-id', reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "controlId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'control-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "controlName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "type", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HFilePicker.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HFilePicker.prototype, "required", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HFilePicker.prototype, "error", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'label-text' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "labelText", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'label-icon-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "labelIconName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'remove-button-text' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "removeButtonText", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'remove-button-icon-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "removeButtonIconName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "accept", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HFilePicker.prototype, "_file", void 0);
+exports.HFilePicker = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-file-picker')
+], exports.HFilePicker);
+//# sourceMappingURL=file_picker.js.map

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,gDAAoD;AACxE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker_constants.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const baseFileItemClass = 'file';
+const FILE_ITEM_CSS_CLASSES = {
+    file: baseFileItemClass,
+    fileName: `${baseFileItemClass}__name`,
+    fileRemoveButton: `${baseFileItemClass}__remove-button`
+};
+const FILE_ITEM_EVENT_NAMES = {
+    removed: 'removed'
+};
+const baseFilePickerControlClass = 'file-picker';
+const FILE_PICKER_CONTROL_CSS_CLASSES = {
+    filePicker: baseFilePickerControlClass,
+    filePickerDisabled: `${baseFilePickerControlClass}_disabled`,
+    filePickerRequired: `${baseFilePickerControlClass}_required`,
+    filePickerError: `${baseFilePickerControlClass}_error`,
+    filePickerHasValue: `${baseFilePickerControlClass}_has-value`,
+    filePickerInput: `${baseFilePickerControlClass}__input`,
+    filePickerLabel: `${baseFilePickerControlClass}__label`
+};
+const FILE_PICKER_LABEL_EVENT_NAMES = {
+    filePickerLabelClickedByEnterKey: 'clickedByEnterKey'
+};
+const baseFilePickerIconClass = 'file-picker-icon';
+const FILE_PICKER_ICON_CSS_CLASSES = {
+    filePickerIcon: baseFilePickerIconClass
+};
+
+exports.FILE_ITEM_CSS_CLASSES = FILE_ITEM_CSS_CLASSES;
+exports.FILE_ITEM_EVENT_NAMES = FILE_ITEM_EVENT_NAMES;
+exports.FILE_PICKER_CONTROL_CSS_CLASSES = FILE_PICKER_CONTROL_CSS_CLASSES;
+exports.FILE_PICKER_ICON_CSS_CLASSES = FILE_PICKER_ICON_CSS_CLASSES;
+exports.FILE_PICKER_LABEL_EVENT_NAMES = FILE_PICKER_LABEL_EVENT_NAMES;
+//# sourceMappingURL=file_picker_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker_label.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
+var icon_constants = require('../../icon/icon_constants.js');
+var file_picker_constants = require('./file_picker_constants.js');
+
+exports.HFilePickerLabel = class HFilePickerLabel extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickEvent = (ev) => {
+            ev.preventDefault();
+            this.emitCustomEvent(file_picker_constants.FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClickedByEnterKey);
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchClickEvent);
+    }
+    render() {
+        super.render();
+        return lit.html `<label class="${file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerLabel}" for="${this.controlId}">
+            ${this.labelIconName
+            ? lit.html `<h-icon
+                      class="${icon_constants.ICON_CSS_CLASSES.icon} ${file_picker_constants.FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}"
+                      icon-name=${this.labelIconName}
+                  />`
+            : lit.nothing}
+            ${this.labelText}
+        </label>`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'control-id', reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePickerLabel.prototype, "controlId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'label-text' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePickerLabel.prototype, "labelText", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'label-icon-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePickerLabel.prototype, "labelIconName", void 0);
+exports.HFilePickerLabel = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-file-picker-label'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HFilePickerLabel);
+//# sourceMappingURL=file_picker_label.js.map

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker_label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}