@shoper/phoenix_design_system 1.2.0-1 → 1.2.0-3

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

@@ -30,10 +30,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     constructor() {
         var _a;
         super();
-        this.multiple = false;
+        this.multiselect = false;
         this.opened = false;
         this.offset = 2;
-        this.type = select_constants.SELECT_TYPES.select;
         this._searchValue = '';
         this._$options = {};
         this._$dropdown = ref_js.createRef();
@@ -46,11 +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._dispatchChangeEvent();
+            this._selectController.deselectOption(selectedOption);
         };
         this._updateOptionsView = (options) => {
             if (options.length < Object.keys(this._$options).length)
@@ -65,11 +63,16 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 select_utils.SelectControlUtils.syncHTMLOptionWithModel(option, $option);
                 if (!selected)
                     return;
-                $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+                $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
             });
         };
         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 = '';
@@ -82,11 +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._dispatchChangeEvent();
-        };
-        this._dispatchChangeEvent = () => {
-            this.dispatchEvent(new Event('change'));
+            this._selectController.deselectOptions();
         };
         this._handleResize = debounce['default'](() => {
             this._closeSelect();
@@ -95,39 +94,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
         $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';
-        if (this.multiple)
-            this.type = select_constants.SELECT_TYPES.multiple;
-    }
-    get selectedIndex() {
-        const selectedOptions = this._selectController.selectedOptions$.getValue();
-        if (!selectedOptions || selectedOptions.length === 0)
-            return -1;
-        const htmlOptions = Object.values(this._$options);
-        return this.multiple
-            ? 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() {
-        var _a;
-        const selectedOptions = (_a = this._selectController.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
-        return selectedOptions.filter((option) => option.selected).map((option) => this._$options[option.value]);
-    }
-    get name() {
-        return this.controlName;
-    }
-    get id() {
-        return this.controlId;
-    }
-    get options() {
-        return Object.values(this._$options);
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -154,9 +120,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     connectedCallback() {
         super.connectedCallback();
         this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
-        this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
+        this._selectController = this.multiselect ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
         this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
-        this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
+        this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiselect);
         const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
         this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
         this._selectController.options$.subscribe(this._optionsObserver);
@@ -200,38 +166,29 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         const { value, selected } = option;
         const $option = select_utils.SelectControlUtils.createHTMLOption(option);
         if (selected)
-            $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+            $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
         this._$options[value] = $option;
         select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     _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.multiple)
-            this._closeSelect();
-        this._dispatchChangeEvent();
-    }
     _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();
@@ -261,7 +218,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
 
                 <h-dropdown-content
-                    @focusout=${this._dispatchChangeEvent}
                     class="${select_constants.SELECT_CSS_CLASSES.selectContent} ${this.error ? select_constants.SELECT_CSS_CLASSES.selectContentError : ''}"
                     ${ref_js.ref(this._$dropdownContent)}
                     name=${this.controlName}
@@ -301,7 +257,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                               </p>
                           </div>`
             : lit.nothing}
-                    ${this.multiple && this._selectController.selectedOptionsCount >= 1
+                    ${this.multiselect && this._selectController.selectedOptionsCount >= 1
             ? lit.html `
                               <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
                                   <button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
@@ -325,17 +281,13 @@ 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)
-], exports.HSelect.prototype, "multiple", void 0);
+], exports.HSelect.prototype, "multiselect", void 0);
 tslib_es6.__decorate([
     decorators_js.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
@@ -352,14 +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: String }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HSelect.prototype, "type", 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;AACA;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_constants.js

@@ -10,10 +10,6 @@ const SELECT_SLOT_NAMES = {
     content: 'content',
     toggler: 'toggler'
 };
-const SELECT_TYPES = {
-    select: 'select-one',
-    multiple: 'select-multiple'
-};
 const SELECT_EVENT_NAMES = {
     selectOption: 'selectOption.select',
     deselectOption: 'selectOption.deselect'
@@ -46,5 +42,4 @@ exports.SELECT_CSS_CLASSES = SELECT_CSS_CLASSES;
 exports.SELECT_EVENT_NAMES = SELECT_EVENT_NAMES;
 exports.SELECT_RESIZE_DEBOUNCE_TIME = SELECT_RESIZE_DEBOUNCE_TIME;
 exports.SELECT_SLOT_NAMES = SELECT_SLOT_NAMES;
-exports.SELECT_TYPES = SELECT_TYPES;
 //# sourceMappingURL=select_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/select/select_constants.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;"}
+{"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;"}

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/components/modal/modal.js

@@ -6,11 +6,11 @@ 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 decorators_js = require('@lit/reactive-element/decorators.js');
-require('@lit/reactive-element');
 var litHtml = require('lit-html');
 var ref_js = require('lit-html/directives/ref.js');
 var portal_constants = require('../portal/portal_constants.js');
 var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
+require('@lit/reactive-element');
 var modal_constants = require('./modal_constants.js');
 
 var HModal_1;

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

@@ -23,6 +23,9 @@ 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 file_picker_label = require('./components/form/file_picker/file_picker_label.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 +165,24 @@ 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, 'HFilePickerLabel', {
+	enumerable: true,
+	get: function () {
+		return file_picker_label.HFilePickerLabel;
+	}
+});
 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;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;
+}

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

@@ -0,0 +1,65 @@
+import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../../core/decorators/phoenix_custom_element.js';
+import { ICON_CSS_CLASSES } from '../../../icon/icon_constants.js';
+import { FILE_ITEM_EVENT_NAMES, FILE_ITEM_CSS_CLASSES, FILE_PICKER_ICON_CSS_CLASSES } from '../file_picker_constants.js';
+
+let HFile = class HFile extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._handleClick = () => {
+            const removeItemEvent = new CustomEvent(FILE_ITEM_EVENT_NAMES.removed, {
+                bubbles: true
+            });
+            this.dispatchEvent(removeItemEvent);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('aria-label', this.name);
+        this.classList.add(FILE_ITEM_CSS_CLASSES.file);
+    }
+    render() {
+        return html `
+            <span class="${FILE_ITEM_CSS_CLASSES.fileName}">${this.name}</span>
+            <button
+                class="${FILE_ITEM_CSS_CLASSES.fileRemoveButton}"
+                @click="${this._handleClick}"
+                aria-label="${this.removeButtonText} ${this.name}"
+            >
+                ${this.removeButtonIconName
+            ? html `<h-icon
+                          class="${ICON_CSS_CLASSES.icon} ${FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon}"
+                          icon-name=${this.removeButtonIconName}
+                      />`
+            : nothing}
+                ${this.removeButtonText}
+            </button>
+        `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HFile.prototype, "name", void 0);
+__decorate([
+    property({ type: String, attribute: 'container-id' }),
+    __metadata("design:type", String)
+], HFile.prototype, "containerId", void 0);
+__decorate([
+    property({ type: String, attribute: 'remove-button-text' }),
+    __metadata("design:type", String)
+], HFile.prototype, "removeButtonText", void 0);
+__decorate([
+    property({ type: String, attribute: 'remove-button-icon-name' }),
+    __metadata("design:type", String)
+], HFile.prototype, "removeButtonIconName", void 0);
+HFile = __decorate([
+    phoenixCustomElement('h-file'),
+    __metadata("design:paramtypes", [])
+], HFile);
+
+export { HFile };
+//# sourceMappingURL=file.js.map

package/build/esm/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,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_model.d.ts

@@ -0,0 +1,9 @@
+import { TFileItemConstructorOptions } from '../file_picker_constants';
+export declare class FileItem {
+    name: string;
+    containerId: string;
+    removeButtonText: string;
+    removeButtonIconName: string | undefined;
+    private constructor();
+    static create(options: TFileItemConstructorOptions): FileItem;
+}

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

@@ -0,0 +1,14 @@
+class FileItem {
+    constructor({ name, containerId, removeButtonText, removeButtonIconName }) {
+        this.name = name;
+        this.containerId = containerId;
+        this.removeButtonText = removeButtonText;
+        this.removeButtonIconName = removeButtonIconName;
+    }
+    static create(options) {
+        return new FileItem(options);
+    }
+}
+
+export { FileItem };
+//# sourceMappingURL=file_model.js.map

package/build/esm/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;"}

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.d.ts

@@ -0,0 +1,31 @@
+import { TemplateResult } from 'lit';
+import { FileItem } from "./file/file_model";
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HFilePicker extends PhoenixLightLitElement {
+    controlId: string;
+    controlName: string;
+    disabled: boolean;
+    required: boolean;
+    error: boolean;
+    value: string;
+    labelText: string;
+    labelIconName: string;
+    removeButtonText: string;
+    removeButtonIconName: string;
+    formats: string;
+    files: FileList | null;
+    file: FileItem;
+    private _$fileInputRef;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+    private _addEventListeners;
+    private _handleChangeEvent;
+    private _getFiles;
+    private _getFileName;
+    private _getInputRefValue;
+    private _removeFileItem;
+    private _triggerClickOnLabel;
+    private _dispatchChangeEvent;
+}

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

@@ -0,0 +1,175 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import classnames from '../../../../external/classnames/index.js';
+import { createRef, ref } from 'lit-html/directives/ref.js';
+import { FILE_PICKER_CONTROL_CSS_CLASSES, FILE_ITEM_EVENT_NAMES, FILE_PICKER_LABEL_EVENT_NAMES } from './file_picker_constants.js';
+import { FileItem } from './file/file_model.js';
+import { ifDefined } from 'lit/directives/if-defined';
+
+let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._$fileInputRef = createRef();
+        this._handleChangeEvent = (event) => {
+            const filesList = this._getFiles(event);
+            if (filesList.length > 0) {
+                this.file = FileItem.create({
+                    name: this._getFileName(filesList),
+                    containerId: this.controlId,
+                    removeButtonText: this.removeButtonText,
+                    removeButtonIconName: this.removeButtonIconName
+                });
+                this.classList.add(FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+                this._dispatchChangeEvent();
+            }
+        };
+        this._getFiles = (event) => {
+            const targetElement = event.currentTarget;
+            this.files = targetElement.files;
+            return this.files;
+        };
+        this._getFileName = (fileList) => {
+            return fileList[0].name;
+        };
+        this._getInputRefValue = () => {
+            return this._$fileInputRef.value;
+        };
+        this._removeFileItem = () => {
+            const $fileInput = this._getInputRefValue();
+            if ($fileInput)
+                $fileInput.value = '';
+            this.files = null;
+            this.file = FileItem.create({
+                name: '',
+                containerId: '',
+                removeButtonText: '',
+                removeButtonIconName: ''
+            });
+            this.classList.remove(FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+            this._dispatchChangeEvent();
+        };
+        this._triggerClickOnLabel = () => {
+            const $fileInput = this._getInputRefValue();
+            if ($fileInput)
+                $fileInput.click();
+        };
+        this._dispatchChangeEvent = () => {
+            this.dispatchEvent(new Event('change'));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._addEventListeners();
+        const cssClasses = classnames({
+            [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
+            [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
+            [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    render() {
+        var _a, _b;
+        super.render();
+        return html `
+            <input
+                ${ref(this._$fileInputRef)}
+                type="file"
+                class="${FILE_PICKER_CONTROL_CSS_CLASSES.filePickerInput}"
+                id="${ifDefined(this.controlId)}"
+                name="${ifDefined(this.controlName)}"
+                value="${ifDefined(this.value)}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                accept="${ifDefined(this.formats)}"
+                @change="${this._handleChangeEvent}"
+                hidden
+            />
+
+            ${!((_a = this.file) === null || _a === void 0 ? void 0 : _a.name)
+            ? html ` <h-file-picker-label
+                      control-id="${this.controlId}"
+                      label-text="${this.labelText}"
+                      label-icon-name="${ifDefined(this.labelIconName)}"
+                  />`
+            : nothing}
+            ${((_b = this.file) === null || _b === void 0 ? void 0 : _b.name)
+            ? html `<h-file
+                      name="${this.file.name}"
+                      container-id="${this.file.containerId}"
+                      remove-button-text="${this.file.removeButtonText}"
+                      remove-button-icon-name="${ifDefined(this.file.removeButtonIconName)}"
+                  />`
+            : nothing}
+        `;
+    }
+    _addEventListeners() {
+        this.addEventListener(FILE_ITEM_EVENT_NAMES.removed, this._removeFileItem);
+        this.addEventListener(FILE_PICKER_LABEL_EVENT_NAMES.filePickerLabelClicked, this._triggerClickOnLabel);
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'control-id', reflect: true }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "controlId", void 0);
+__decorate([
+    property({ type: String, attribute: 'control-name' }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "controlName", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HFilePicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HFilePicker.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HFilePicker.prototype, "error", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-text' }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "labelText", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-icon-name' }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "labelIconName", void 0);
+__decorate([
+    property({ type: String, attribute: 'remove-button-text' }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "removeButtonText", void 0);
+__decorate([
+    property({ type: String, attribute: 'remove-button-icon-name' }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "removeButtonIconName", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HFilePicker.prototype, "formats", void 0);
+__decorate([
+    property({ type: FileList, reflect: true }),
+    __metadata("design:type", Object)
+], HFilePicker.prototype, "files", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", FileItem)
+], HFilePicker.prototype, "file", void 0);
+HFilePicker = __decorate([
+    phoenixCustomElement('h-file-picker'),
+    __metadata("design:paramtypes", [])
+], HFilePicker);
+
+export { HFilePicker };
+//# sourceMappingURL=file_picker.js.map

package/build/esm/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,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}