@shoper/phoenix_design_system 1.1.6-1 → 1.1.6-11

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

@@ -0,0 +1,65 @@
+'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');
+var control_props_sync_consumer_controller = require('../../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
+
+exports.HFile = class HFile extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._handleClick = () => {
+            const removeItemEvent = new CustomEvent(file_picker_constants.FILE_ITEM_EVENT_NAMES.removed, {
+                bubbles: true,
+                detail: {
+                    containerId: this.containerId
+                }
+            });
+            this.dispatchEvent(removeItemEvent);
+        };
+        new control_props_sync_consumer_controller.ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(file_picker_constants.FILE_ITEM_CSS_CLASSES.file);
+    }
+    render() {
+        return lit.html `
+            <span class="${file_picker_constants.FILE_ITEM_CSS_CLASSES.fileName}">${this.name}</span>
+            <button class="${file_picker_constants.FILE_ITEM_CSS_CLASSES.fileRemoveButton}" @click="${this._handleClick}">
+                ${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>
+        `;
+    }
+};
+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, attribute: 'container-id' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "containerId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "removeButtonText", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "removeButtonIconName", void 0);
+exports.HFile = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-file'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], 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;"}

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

@@ -0,0 +1,142 @@
+'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 file_picker_constants = require('./file_picker_constants.js');
+var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var ifDefined = require('lit/directives/if-defined');
+
+exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._$fileInputRef = ref_js.createRef();
+        this._handleChangeEvent = (event) => {
+            console.log('change');
+            this.fileName = this._getFileName(event);
+            this.classList.add(file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+        };
+        this._getFileName = (event) => {
+            const targetElement = event.currentTarget;
+            const fileList = targetElement.files;
+            return fileList[0].name;
+        };
+        this._removeFileItem = () => {
+            const $fileInput = this._$fileInputRef.value;
+            this.fileName = '';
+            if ($fileInput)
+                $fileInput.value = '';
+            this.classList.remove(file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+        };
+        new control_props_sync_provider_controller.ControlPropsSyncProviderController({
+            host: this,
+            propsToSync: [...Object.values(file_picker_constants.FILE_ITEM_PROPS_TO_SYNC)]
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._addEventListeners();
+        this.classList.add(file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePicker);
+        const cssClasses = index['default']({
+            [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);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    render() {
+        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.ifDefined(this.controlId)}"
+                name="${ifDefined.ifDefined(this.controlName)}"
+                value="${ifDefined.ifDefined(this.value)}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                accept="${ifDefined.ifDefined(this.formats)}"
+                @change="${this._handleChangeEvent}"
+                hidden
+            />
+
+            ${!this.fileName
+            ? lit.html `<label class="${file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerLabel}" for="${ifDefined.ifDefined(this.controlId)}">
+                      ${this.labelIconName
+                ? lit.html `<h-icon class="${file_picker_constants.FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}" icon-name=${this.labelIconName} />`
+                : lit.nothing}
+                      ${this.labelText}
+                  </label>`
+            : lit.nothing}
+
+            ${this.fileName ? lit.html `<h-file name="${this.fileName}" container-id="${this.controlId}" />` : lit.nothing}
+        `;
+    }
+    _addEventListeners() {
+        this.addEventListener(file_picker_constants.FILE_ITEM_EVENT_NAMES.removed, this._removeFileItem);
+    }
+};
+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: 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 }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "value", 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, "formats", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "fileName", void 0);
+exports.HFilePicker = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-file-picker'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], 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,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,38 @@
+'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: 'fileItemRemoved'
+};
+const FILE_ITEM_PROPS_TO_SYNC = {
+    removeButtonText: 'removeButtonText',
+    removeButtonIconName: 'removeButtonIconName'
+};
+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 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_ITEM_PROPS_TO_SYNC = FILE_ITEM_PROPS_TO_SYNC;
+exports.FILE_PICKER_CONTROL_CSS_CLASSES = FILE_PICKER_CONTROL_CSS_CLASSES;
+exports.FILE_PICKER_ICON_CSS_CLASSES = FILE_PICKER_ICON_CSS_CLASSES;
+//# 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;AACA;"}

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

@@ -7,9 +7,9 @@ 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 input_constants = require('./input_constants.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var input_constants = require('./input_constants.js');
 
 exports.HInput = class HInput extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

package/build/cjs/packages/phoenix/src/components/form/input/input_control.js

@@ -7,8 +7,8 @@ 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 input_constants = require('./input_constants.js');
 var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
+var input_constants = require('./input_constants.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
 
 exports.HInputControl = class HInputControl extends phoenix_light_lit_element.PhoenixLightLitElement {

package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_controller.js

@@ -29,16 +29,16 @@ class BaseSelectController {
         this._optionsObserver = new observer.Observer(this._calculateValuesRelatedToOptions);
         this.options$.subscribe(this._optionsObserver);
     }
-    toggle(option) {
-        option.selected ? this.deselect(option) : this.select(option);
+    toggleOption(option) {
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
     }
-    remove(optionValue) {
+    removeOption(optionValue) {
         const options = this.options$.getValue();
         if (!options)
             return;
         this.options$.notify(options.filter((option) => option.value !== optionValue));
     }
-    add(option, position) {
+    addOption(option, position) {
         var _a;
         const options = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
         if (position === undefined) {
@@ -48,22 +48,22 @@ class BaseSelectController {
         }
         this.options$.notify([...options.slice(0, position - 1), option, ...options.slice(position - 1)]);
     }
-    replace(options) {
+    replaceOptions(options) {
         this.options$.notify(options);
     }
-    deselectAll() {
+    deselectOptions() {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
         this.selectedOptions$.notify([]);
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    deselect(option) {
+    deselectOption(option) {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
         this.selectedOptions$.notify([]);
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    filter(value) {
+    filterOptions(value) {
         const selectOptions = this.options$.getValue();
         if (!selectOptions)
             return;
@@ -72,16 +72,16 @@ class BaseSelectController {
         filtered.forEach((option) => {
             option.hidden = false;
         });
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    requestUpdate() {
+    requestOptionsUpdate() {
         const selectOptions = this.options$.getValue();
         if (!selectOptions)
             return;
         this.options$.notify([...selectOptions]);
         this.host.requestUpdate();
     }
-    getOption(selectValue) {
+    getSelectOption(selectValue) {
         var _a;
         return (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === selectValue);
     }

package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_controller.js

@@ -5,18 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var base_select_controller = require('./base_select_controller.js');
 
 class MultiSelectController extends base_select_controller.BaseSelectController {
-    toggle(option) {
-        option.selected ? this.deselect(option) : this.select(option);
+    toggleOption(option) {
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
     }
-    select(option) {
+    selectOption(option) {
         option.selected = true;
         this.selectedOptions$.notify((selectedOptions) => [...selectedOptions, option]);
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
-    deselect(option) {
+    deselectOption(option) {
         option.selected = false;
         this.selectedOptions$.notify((selectedOptions) => selectedOptions.filter((currOption) => currOption.value !== option.value));
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
 }
 

package/build/cjs/packages/phoenix/src/components/form/select/controllers/select_controller.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var base_select_controller = require('./base_select_controller.js');
 
 class SelectController extends base_select_controller.BaseSelectController {
-    select(option) {
+    selectOption(option) {
         var _a;
         const selectedOptions = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
         selectedOptions.forEach((option) => (option.selected = false));
         option.selected = true;
         this.selectedOptions$.notify([option]);
-        this.requestUpdate();
+        this.requestOptionsUpdate();
     }
 }
 

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

@@ -45,10 +45,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 this._$dropdownContent.value.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
         };
         this._handleOptionDeselect = (event) => {
-            const selectedOption = this._selectController.getOption(event.detail);
+            const selectedOption = this._selectController.getSelectOption(event.detail);
             if (!selectedOption)
                 return;
-            this._selectController.deselect(selectedOption);
+            this._selectController.deselectOption(selectedOption);
         };
         this._updateOptionsView = (options) => {
             if (options.length < Object.keys(this._$options).length)
@@ -67,7 +67,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             });
         };
         this._handleOptionClicked = (event) => {
-            this._selectOption(event.detail.$option.value);
+            const selectedOption = this._selectController.getSelectOption(event.detail.$option.value);
+            if (!selectedOption)
+                return;
+            this._selectController.toggleOption(selectedOption);
+            if (!this.multiselect)
+                this._closeSelect();
         };
         this._handleDropdownHidden = () => {
             this._searchValue = '';
@@ -80,7 +85,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
         };
         this._clearOptions = () => {
-            this._selectController.deselectAll();
+            this._selectController.deselectOptions();
         };
         this._handleResize = debounce['default'](() => {
             this._closeSelect();
@@ -90,26 +95,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
         this.$placeholder = (_a = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
     }
-    get selectedIndex() {
-        const selectedOptions = this._selectController.selectedOptions$.getValue();
-        if (!selectedOptions || selectedOptions.length === 0)
-            return -1;
-        const htmlOptions = Object.values(this._$options);
-        return this.multiselect
-            ? select_utils.SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
-            : select_utils.SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
-    }
-    set selectedIndex(index) {
-        const option = Object.values(this._$options)[index];
-        if (!option) {
-            this._selectController.deselectAll();
-            return;
-        }
-        this._selectOption(option.value);
-    }
-    get selectedOptions() {
-        return Object.values(this._$options).filter((option) => option.selected);
-    }
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('opened')) {
@@ -188,30 +173,22 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     _removeHTMLOptions(optionsValues) {
         this._$options = select_utils.SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
     }
-    _selectOption(value) {
-        const option = this._selectController.getOption(value);
-        if (!option)
-            return;
-        this._selectController.toggle(option);
-        if (!this.multiselect)
-            this._closeSelect();
-    }
     _handleSearch({ detail }) {
         this._searchValue = detail;
     }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('_searchValue'))
-            this._selectController.filter(this._searchValue);
+            this._selectController.filterOptions(this._searchValue);
     }
-    add(option, position) {
-        this._selectController.add(option, position);
+    addOption(option, position) {
+        this._selectController.addOption(option, position);
     }
     removeOption(optionValue) {
-        this._selectController.remove(optionValue);
+        this._selectController.removeOption(optionValue);
     }
-    replace(options) {
-        this._selectController.replace(options);
+    replaceOptions(options) {
+        this._selectController.replaceOptions(options);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -304,13 +281,9 @@ exports.HSelect._components = {
     toggler: select_toggler.HSelectToggler
 };
 tslib_es6.__decorate([
-    decorators_js.property({ type: String, attribute: 'control-name' }),
+    decorators_js.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HSelect.prototype, "controlName", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String, attribute: 'control-id' }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HSelect.prototype, "controlId", void 0);
 tslib_es6.__decorate([
     decorators_js.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
@@ -331,10 +304,6 @@ tslib_es6.__decorate([
     decorators_js.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HSelect.prototype, "disabled", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean }),
-    tslib_es6.__metadata("design:type", Boolean)
-], exports.HSelect.prototype, "required", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", String)

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

@@ -1 +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,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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,uBAAuB,+CAAmD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/select/select_utils.js

@@ -46,12 +46,6 @@ class SelectControlUtils {
         }
         $list.append($option);
     }
-    static getFirstIndexSelectedOption(options) {
-        return options.findIndex((option) => option.selected);
-    }
-    static getLastIndexOfSelectedOption(options) {
-        return [...options].reverse().findIndex((option) => option.selected);
-    }
 }
 
 exports.SelectControlUtils = SelectControlUtils;

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

@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/index.js

@@ -23,6 +23,8 @@ var dropdown_toggler = require('./components/dropdown/dropdown_toggler.js');
 var relative_position_controller = require('./controllers/relative_position_controller/relative_position_controller.js');
 var dropdown = require('./components/dropdown/dropdown.js');
 var select = require('./components/form/select/select.js');
+var file = require('./components/form/file_picker/file/file.js');
+var file_picker = require('./components/form/file_picker/file_picker.js');
 var modal = require('./components/modal/modal.js');
 var modal_opener = require('./components/modal/modal_opener.js');
 var modal_body = require('./components/modal/modal_body.js');
@@ -162,6 +164,18 @@ Object.defineProperty(exports, 'HSelect', {
 		return select.HSelect;
 	}
 });
+Object.defineProperty(exports, 'HFile', {
+	enumerable: true,
+	get: function () {
+		return file.HFile;
+	}
+});
+Object.defineProperty(exports, 'HFilePicker', {
+	enumerable: true,
+	get: function () {
+		return file_picker.HFilePicker;
+	}
+});
 Object.defineProperty(exports, 'HModal', {
 	enumerable: true,
 	get: function () {

package/build/cjs/packages/phoenix/src/index.js.map

@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/esm/packages/phoenix/src/components/form/file_picker/file/file.d.ts

@@ -0,0 +1,12 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HFile extends PhoenixLightLitElement {
+    name: string;
+    containerId: string;
+    removeButtonText: string;
+    removeButtonIconName: string;
+    constructor();
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    private _handleClick;
+}