@shoper/phoenix_design_system 1.2.0-3 → 1.2.0

package/build/cjs/external/lit/external/lit-html/directives/template-content.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var litHtml = require('../lit-html.js');
+var directive = require('../directive.js');
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const o=directive.directive(class extends directive.Directive{constructor(t){if(super(t),t.type!==directive.PartType.CHILD)throw Error("templateContent can only be used in child bindings")}render(r){return this.ft===r?litHtml.noChange:(this.ft=r,document.importNode(r.content,!0))}});
+
+exports.templateContent = o;
+//# sourceMappingURL=template-content.js.map

package/build/cjs/{packages/phoenix/src/components/form/file_picker/file/file_model.js.map → external/lit/external/lit-html/directives/template-content.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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -9,6 +9,7 @@ var decorators_js = require('@lit/reactive-element/decorators.js');
 var select_components_constatns = require('../select_components_constatns.js');
 var btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
 var select_option_constants = require('./select_option_constants.js');
+require('@lit/reactive-element');
 
 exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -37,12 +38,10 @@ exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLi
     _setupEvents() {
         this.addEventListener('click', this._dispatchClickedEvent);
     }
-    attributeChangedCallback(name, _old, value) {
-        super.attributeChangedCallback(name, _old, value);
-        switch (name) {
-            case 'selected':
-                this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
-        }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('selected'))
+            this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
     }
     _addSelectedIcon() {
         this._$checkedIcon = document.createElement('h-icon');

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/base_select_controller.js

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

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 {
-    selectOption(option) {
+    select(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.requestOptionsUpdate();
+        this.requestUpdate();
     }
 }
 

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

@@ -30,9 +30,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     constructor() {
         var _a;
         super();
-        this.multiselect = false;
+        this.multiple = false;
         this.opened = false;
         this.offset = 2;
+        this.type = select_constants.SELECT_TYPES.select;
         this._searchValue = '';
         this._$options = {};
         this._$dropdown = ref_js.createRef();
@@ -45,10 +46,11 @@ 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.getSelectOption(event.detail);
+            const selectedOption = this._selectController.getOption(event.detail);
             if (!selectedOption)
                 return;
-            this._selectController.deselectOption(selectedOption);
+            this._selectController.deselect(selectedOption);
+            this._dispatchChangeEvent();
         };
         this._updateOptionsView = (options) => {
             if (options.length < Object.keys(this._$options).length)
@@ -63,16 +65,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 select_utils.SelectControlUtils.syncHTMLOptionWithModel(option, $option);
                 if (!selected)
                     return;
-                $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
+                $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
             });
         };
         this._handleOptionClicked = (event) => {
-            const selectedOption = this._selectController.getSelectOption(event.detail.$option.value);
-            if (!selectedOption)
-                return;
-            this._selectController.toggleOption(selectedOption);
-            if (!this.multiselect)
-                this._closeSelect();
+            this._selectOption(event.detail.$option.value);
         };
         this._handleDropdownHidden = () => {
             this._searchValue = '';
@@ -85,7 +82,11 @@ 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.deselectOptions();
+            this._selectController.deselectAll();
+            this._dispatchChangeEvent();
+        };
+        this._dispatchChangeEvent = () => {
+            this.dispatchEvent(new Event('change'));
         };
         this._handleResize = debounce['default'](() => {
             this._closeSelect();
@@ -94,6 +95,39 @@ 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);
@@ -120,9 +154,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.multiselect ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
+        this._selectController = this.multiple ? 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.multiselect);
+        this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
         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);
@@ -166,29 +200,38 @@ 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.multiselect ? 'aria-checked' : 'aria-selected', 'true');
+            $option.setAttribute(this.multiple ? '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.filterOptions(this._searchValue);
+            this._selectController.filter(this._searchValue);
     }
-    addOption(option, position) {
-        this._selectController.addOption(option, position);
+    add(option, position) {
+        this._selectController.add(option, position);
     }
     removeOption(optionValue) {
-        this._selectController.removeOption(optionValue);
+        this._selectController.remove(optionValue);
     }
-    replaceOptions(options) {
-        this._selectController.replaceOptions(options);
+    replace(options) {
+        this._selectController.replace(options);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -218,6 +261,7 @@ 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}
@@ -257,7 +301,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                               </p>
                           </div>`
             : lit.nothing}
-                    ${this.multiselect && this._selectController.selectedOptionsCount >= 1
+                    ${this.multiple && 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>
@@ -281,13 +325,17 @@ exports.HSelect._components = {
     toggler: select_toggler.HSelectToggler
 };
 tslib_es6.__decorate([
-    decorators_js.property({ type: String }),
+    decorators_js.property({ type: String, attribute: 'control-name' }),
     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, "multiselect", void 0);
+], exports.HSelect.prototype, "multiple", void 0);
 tslib_es6.__decorate([
     decorators_js.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
@@ -304,6 +352,14 @@ 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;"}
+{"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;"}

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

@@ -10,6 +10,10 @@ 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'
@@ -42,4 +46,5 @@ 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;"}
+{"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;"}

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

@@ -46,6 +46,12 @@ 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;"}
+{"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;"}

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

@@ -0,0 +1,43 @@
+'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 behavior_subject = require('../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../core/context/context_provider_controller.js');
+var templateContent = require('../../../../../external/lit/external/lit-html/directives/template-content.js');
+var toggle_constants = require('./toggle_constants.js');
+
+exports.HToggle = class HToggle extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._reactiveOpened = new behavior_subject.BehaviorSubject(this.opened);
+        this._toggleContext = new context_provider_controller.ContextProviderController(this);
+        this._$content = this.querySelector('template');
+        this._toggleContext.provide(toggle_constants.TOGGLE_CONTEXT_NAME, this._reactiveOpened);
+        this.addEventListener(toggle_constants.TOGGLE_EVENT_NAME, this.toggle);
+    }
+    toggle() {
+        this.opened = !this.opened;
+        this._reactiveOpened.notify(this.opened);
+    }
+    render() {
+        return lit.html `${this.opened && this._$content ? templateContent.templateContent(this._$content) : lit.nothing}`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HToggle.prototype, "opened", void 0);
+exports.HToggle = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-toggle')
+], exports.HToggle);
+//# sourceMappingURL=toggle.js.map

package/build/cjs/packages/phoenix/src/components/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,8BAA8B,8EAAsF;AACpH;AACA;AACA;AACA;AACA;AACA;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/toggle/toggle_button.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+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 observer = require('../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
+var visibility_controller = require('../../controllers/visibility_controller/visibility_controller.js');
+var toggle_constants = require('./toggle_constants.js');
+
+exports.HToggleBtn = class HToggleBtn extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.action = toggle_constants.TOGGLE_ACTIONS.collapse;
+        this._visibility = {
+            collapse: (isOpened) => {
+                isOpened ? this._visibilityController.show() : this._visibilityController.hide();
+            },
+            expand: (isOpened) => {
+                isOpened ? this._visibilityController.hide() : this._visibilityController.show();
+            }
+        };
+        this._dispatchToggleEvent = () => {
+            this.dispatchEvent(new CustomEvent(toggle_constants.TOGGLE_EVENT_NAME, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchToggleEvent);
+        this._visibilityController = new visibility_controller.VisibilityController(this);
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._toggleContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+        this._opened$ = await this._toggleContextConsumer.consumeAsync(toggle_constants.TOGGLE_CONTEXT_NAME);
+        this._openedObserver = new observer.Observer((isOpened) => {
+            this._visibility[this.action](isOpened);
+        });
+        this._opened$.subscribe(this._openedObserver);
+        this.addEventListener('click', this._dispatchToggleEvent);
+    }
+    disconnectedCallback() {
+        this._opened$.unsubscribe(this._openedObserver);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HToggleBtn.prototype, "action", void 0);
+exports.HToggleBtn = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-toggle-btn'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HToggleBtn);
+//# sourceMappingURL=toggle_button.js.map

package/build/{esm/packages/phoenix/src/components/form/file_picker/file_picker_label.js.map → cjs/packages/phoenix/src/components/toggle/toggle_button.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/toggle/toggle_constants.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TOGGLE_ACTIONS = {
+    expand: 'expand',
+    collapse: 'collapse'
+};
+const TOGGLE_CONTEXT_NAME = 'opened';
+const TOGGLE_EVENT_NAME = 'toggle';
+
+exports.TOGGLE_ACTIONS = TOGGLE_ACTIONS;
+exports.TOGGLE_CONTEXT_NAME = TOGGLE_CONTEXT_NAME;
+exports.TOGGLE_EVENT_NAME = TOGGLE_EVENT_NAME;
+//# sourceMappingURL=toggle_constants.js.map

package/build/{esm/packages/phoenix/src/components/form/file_picker/file_picker_constants.js.map → cjs/packages/phoenix/src/components/toggle/toggle_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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -23,9 +23,6 @@ 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');
@@ -86,6 +83,9 @@ var tooltip = require('./components/messages/tooltips/tooltip.js');
 var tooltip_content = require('./components/messages/tooltips/tooltip_content.js');
 var tag = require('./components/tag/tag.js');
 var tag_remove_button = require('./components/tag/tag_remove_button.js');
+var toggle_constants = require('./components/toggle/toggle_constants.js');
+var toggle = require('./components/toggle/toggle.js');
+var toggle_button$1 = require('./components/toggle/toggle_button.js');
 
 
 
@@ -165,24 +165,6 @@ 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 () {
@@ -507,4 +489,19 @@ Object.defineProperty(exports, 'HTagRemoveButton', {
 		return tag_remove_button.HTagRemoveButton;
 	}
 });
+exports.TOGGLE_ACTIONS = toggle_constants.TOGGLE_ACTIONS;
+exports.TOGGLE_CONTEXT_NAME = toggle_constants.TOGGLE_CONTEXT_NAME;
+exports.TOGGLE_EVENT_NAME = toggle_constants.TOGGLE_EVENT_NAME;
+Object.defineProperty(exports, 'HToggle', {
+	enumerable: true,
+	get: function () {
+		return toggle.HToggle;
+	}
+});
+Object.defineProperty(exports, 'HToggleBtn', {
+	enumerable: true,
+	get: function () {
+		return toggle_button$1.HToggleBtn;
+	}
+});
 //# sourceMappingURL=index.js.map