@shoper/phoenix_design_system 1.2.3-1 → 1.2.3

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

@@ -1,14 +1,25 @@
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { HOption } from "./components/option/select_option";
 import { TemplateResult, PropertyValues } from 'lit';
 import { SelectOption } from "./model/select_option";
+import type { TSelectType } from "./select_types";
 export declare class HSelect extends PhoenixLightLitElement {
     private static _components;
     controlName: string;
-    multiselect: boolean;
+    controlId: string;
+    multiple: boolean;
     opened: boolean;
     offset: number;
     error: boolean;
     disabled: boolean;
+    type: TSelectType;
+    required: boolean;
+    get selectedIndex(): number;
+    set selectedIndex(index: number);
+    get selectedOptions(): HOption[];
+    get name(): string;
+    get id(): string;
+    get options(): HOption[];
     private _searchValue;
     private _selectController;
     private _$options;
@@ -33,14 +44,16 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _appendNewHTMLOption;
     private _removeHTMLOptions;
     private _handleOptionClicked;
+    private _selectOption;
     private _handleSearch;
     private _handleDropdownHidden;
     private _closeSelect;
     private _clearOptions;
+    private _dispatchChangeEvent;
     protected update(changedProperties: PropertyValues): void;
-    addOption(option: SelectOption, position?: number): void;
+    add(option: SelectOption, position?: number): void;
     removeOption(optionValue: string): void;
-    replaceOptions(options: SelectOption[]): void;
+    replace(options: SelectOption[]): void;
     disconnectedCallback(): void;
     private _handleResize;
     private _getDropdownContentWidth;

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

@@ -7,7 +7,7 @@ import { property } from '@lit/reactive-element/decorators.js';
 import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME } from './components/select_components_constatns.js';
 import { Observer } from '../../../core/classes/observer/observer.js';
 import { HIcon } from '../../icon/icon.js';
-import { SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_RESIZE_DEBOUNCE_TIME } from './select_constants.js';
+import { SELECT_TYPES, SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_RESIZE_DEBOUNCE_TIME } from './select_constants.js';
 import { observe } from '../../../directives/observable_directive.js';
 import { HSelectToggler } from './components/toggler/select_toggler.js';
 import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
@@ -26,9 +26,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     constructor() {
         var _a;
         super();
-        this.multiselect = false;
+        this.multiple = false;
         this.opened = false;
         this.offset = 2;
+        this.type = SELECT_TYPES.select;
         this._searchValue = '';
         this._$options = {};
         this._$dropdown = createRef();
@@ -37,14 +38,22 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._$dropdownContent = createRef();
         this._selectContext = new ContextProviderController(this);
         this._setDropdownContentWidth = (width) => {
-            if (this._$dropdownContent.value)
-                this._$dropdownContent.value.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
+            const $dropdown = this._$dropdownContent.value;
+            if (!$dropdown)
+                return;
+            if (!width) {
+                $dropdown.style.removeProperty('width');
+                return;
+            }
+            if (width)
+                $dropdown.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)
@@ -59,16 +68,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 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 = '';
@@ -81,7 +85,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             (_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_1(() => {
             this._closeSelect();
@@ -90,6 +98,39 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
         this.$placeholder = (_a = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
+        if (this.multiple)
+            this.type = 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
+            ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
+            : 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);
@@ -116,9 +157,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         this.classList.add(SELECT_CSS_CLASSES.select);
-        this._selectController = this.multiselect ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
+        this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
         this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
-        this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiselect);
+        this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
         this._selectController.options$.subscribe(this._optionsObserver);
@@ -162,29 +203,38 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const { value, selected } = option;
         const $option = 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;
         SelectControlUtils.appendHTMLOption($option, $list, position);
     }
     _removeHTMLOptions(optionsValues) {
         this._$options = 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();
@@ -253,7 +303,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                               </p>
                           </div>`
             : nothing}
-                    ${this.multiselect && this._selectController.selectedOptionsCount >= 1
+                    ${this.multiple && this._selectController.selectedOptionsCount >= 1
             ? html `
                               <section class=${SELECT_CSS_CLASSES.selectFooter}>
                                   <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
@@ -277,13 +327,17 @@ HSelect._components = {
     toggler: HSelectToggler
 };
 __decorate([
-    property({ type: String }),
+    property({ type: String, attribute: 'control-name' }),
     __metadata("design:type", String)
 ], HSelect.prototype, "controlName", void 0);
+__decorate([
+    property({ type: String, attribute: 'control-id' }),
+    __metadata("design:type", String)
+], HSelect.prototype, "controlId", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
-], HSelect.prototype, "multiselect", void 0);
+], HSelect.prototype, "multiple", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
@@ -300,6 +354,14 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
 ], HSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSelect.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "required", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)

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

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

@@ -6,6 +6,10 @@ export declare const SELECT_SLOT_NAMES: {
     readonly content: "content";
     readonly toggler: "toggler";
 };
+export declare const SELECT_TYPES: {
+    readonly select: "select-one";
+    readonly multiple: "select-multiple";
+};
 export declare const SELECT_EVENT_NAMES: {
     readonly selectOption: "selectOption.select";
     readonly deselectOption: "selectOption.deselect";

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

@@ -6,6 +6,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'
@@ -32,5 +36,5 @@ const SELECT_CSS_CLASSES = {
     selectLabel: `${baseSelectClass}__label`
 };
 
-export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES };
+export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES, SELECT_TYPES };
 //# sourceMappingURL=select_constants.js.map

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

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

@@ -0,0 +1,2 @@
+import { SELECT_TYPES } from "./select_constants";
+export declare type TSelectType = typeof SELECT_TYPES[keyof typeof SELECT_TYPES];

package/build/esm/packages/phoenix/src/components/form/select/select_types.js

@@ -0,0 +1,2 @@
+import '@phoenixRoot/components/form/select/select_constants';
+//# sourceMappingURL=select_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/select/select_types.ts"],"names":[],"mappings":"AAAA,OAA6B,sDAAsD,CAAC"}

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

@@ -6,4 +6,6 @@ export declare class SelectControlUtils {
     static syncHTMLOptionWithModel(option: SelectOption, $option: HOption): void;
     static removeHTMLOptions($options: HOption[], optionsValuesThatExists: string[]): Record<string, HOption>;
     static appendHTMLOption($option: HOption, $list: HOptions, position?: number): void;
+    static getFirstIndexSelectedOption(options: HOption[]): number;
+    static getLastIndexOfSelectedOption(options: HOption[]): number;
 }

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

@@ -42,6 +42,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);
+    }
 }
 
 export { SelectControlUtils };

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

package/build/esm/packages/phoenix/src/components/modal/modal.js

@@ -2,11 +2,11 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { property, state } from '@lit/reactive-element/decorators.js';
+import '@lit/reactive-element';
 import { html } from 'lit-html';
 import { createRef, ref } from 'lit-html/directives/ref.js';
 import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
-import '@lit/reactive-element';
 import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
 
 var HModal_1;

package/build/esm/packages/phoenix/src/components/toggle/toggle.d.ts

@@ -0,0 +1,11 @@
+import { IToggle } from './toggle_types';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HToggle extends PhoenixLightLitElement implements IToggle {
+    opened: boolean;
+    private _toggleContext;
+    private _reactiveOpened;
+    private _$content;
+    connectedCallback(): void;
+    toggle(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/build/esm/packages/phoenix/src/components/toggle/toggle.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC,8EAAsF;AAC3H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/toggle/toggle_button.d.ts

@@ -0,0 +1,14 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HToggleBtn extends PhoenixLightLitElement {
+    private _toggleContextConsumer;
+    private _btnController;
+    private _visibilityController;
+    private _opened$;
+    private _openedObserver;
+    action: "collapse";
+    private _visibility;
+    constructor();
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private _dispatchToggleEvent;
+}

package/build/esm/packages/phoenix/src/components/toggle/toggle_button.js

@@ -0,0 +1,55 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+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 { BtnController } from '../../controllers/btn_controller/btn_controller.js';
+import { Observer } from '../../core/classes/observer/observer.js';
+import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
+import { VisibilityController } from '../../controllers/visibility_controller/visibility_controller.js';
+import { TOGGLE_ACTIONS, TOGGLE_EVENT_NAME, TOGGLE_CONTEXT_NAME } from './toggle_constants.js';
+
+let HToggleBtn = class HToggleBtn extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.action = 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_EVENT_NAME, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new BtnController(this, this._dispatchToggleEvent);
+        this._visibilityController = new VisibilityController(this);
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._toggleContextConsumer = new ContextConsumerController(this);
+        this._opened$ = await this._toggleContextConsumer.consumeAsync(TOGGLE_CONTEXT_NAME);
+        this._openedObserver = new Observer((isOpened) => {
+            this._visibility[this.action](isOpened);
+        });
+        this._opened$.subscribe(this._openedObserver);
+        this.addEventListener('click', this._dispatchToggleEvent);
+    }
+    disconnectedCallback() {
+        this._opened$.unsubscribe(this._openedObserver);
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HToggleBtn.prototype, "action", void 0);
+HToggleBtn = __decorate([
+    phoenixCustomElement('h-toggle-btn'),
+    __metadata("design:paramtypes", [])
+], HToggleBtn);
+
+export { HToggleBtn };
+//# sourceMappingURL=toggle_button.js.map

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

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

@@ -0,0 +1,6 @@
+export declare const TOGGLE_ACTIONS: {
+    readonly expand: "expand";
+    readonly collapse: "collapse";
+};
+export declare const TOGGLE_CONTEXT_NAME = "opened";
+export declare const TOGGLE_EVENT_NAME = "toggle";

package/build/esm/packages/phoenix/src/components/toggle/toggle_constants.js

@@ -0,0 +1,9 @@
+const TOGGLE_ACTIONS = {
+    expand: 'expand',
+    collapse: 'collapse'
+};
+const TOGGLE_CONTEXT_NAME = 'opened';
+const TOGGLE_EVENT_NAME = 'toggle';
+
+export { TOGGLE_ACTIONS, TOGGLE_CONTEXT_NAME, TOGGLE_EVENT_NAME };
+//# sourceMappingURL=toggle_constants.js.map

package/build/esm/packages/phoenix/src/components/toggle/toggle_constants.js.map

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

package/build/esm/packages/phoenix/src/components/toggle/toggle_types.d.ts

@@ -0,0 +1,3 @@
+export interface IToggle {
+    toggle(): void;
+}

package/build/esm/packages/phoenix/src/components/toggle/toggle_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toggle_types.js.map

package/build/esm/packages/phoenix/src/components/toggle/toggle_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle_types.js","sourceRoot":"","sources":["../../../../../../../src/components/toggle/toggle_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js

@@ -32,10 +32,14 @@ class ClickOutsideController {
         __classPrivateFieldSet(this, _ClickOutsideController_enabled, false, "f");
     }
     _setupClickEventListener() {
-        document.addEventListener('click', this._dispatchClickedOutsideEvent);
+        document.addEventListener('click', this._dispatchClickedOutsideEvent, {
+            capture: true
+        });
     }
     _removeClickEventListener() {
-        document.removeEventListener('click', this._dispatchClickedOutsideEvent);
+        document.removeEventListener('click', this._dispatchClickedOutsideEvent, {
+            capture: true
+        });
     }
     hostDisconnected() {
         this._removeClickEventListener();

package/build/esm/packages/phoenix/src/controllers/click_outside_controller/click_outside_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,4CAAgD;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/core/phoenix_light_lit_element/phoenix_light_lit_element.d.ts

@@ -11,6 +11,7 @@ export declare class PhoenixLightLitElement extends LitElement {
     firstUpdated(props: PropertyValues): void;
     private _setupChildrenConnectedWatch;
     private _setupChildrenRenderWatch;
+    private _getComponentsChildrenToWatch;
     private _getComponentsNamesForConnectionToWatch;
     private _getComponentsNamesForRenderedToWatch;
     private _handleComponentConnected;

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js

@@ -54,7 +54,9 @@ class PhoenixLightLitElement extends LitElement {
         this.isWebComponentRendered = true;
     }
     _setupChildrenConnectedWatch() {
-        this._childrenForConnectionToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForConnectionToWatch();
+        this._childrenForConnectionToWatch = this.childrenToWatch
+            ? this._getComponentsChildrenToWatch()
+            : this._getComponentsNamesForConnectionToWatch();
         if (!this._childrenForConnectionToWatch.length) {
             this.allChildrenConnected();
             return;
@@ -62,13 +64,24 @@ class PhoenixLightLitElement extends LitElement {
         this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
     }
     _setupChildrenRenderWatch() {
-        this._childrenForRenderToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesForRenderedToWatch();
+        this._childrenForRenderToWatch = this.childrenToWatch
+            ? this._getComponentsChildrenToWatch()
+            : this._getComponentsNamesForRenderedToWatch();
         if (!this._childrenForRenderToWatch.length) {
             this.allChildrenRendered();
             return;
         }
         this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.rendered, this._handleComponentRendered);
     }
+    _getComponentsChildrenToWatch() {
+        const childrenToWatch = [];
+        this.childrenToWatch.forEach((elementName) => {
+            return [...this.querySelectorAll(elementName)].forEach(($element) => {
+                childrenToWatch.push($element.tagName.toLowerCase());
+            });
+        });
+        return childrenToWatch;
+    }
     _getComponentsNamesForConnectionToWatch() {
         return PhoenixLightLitElementUtils.getComponentsForWhichToWaitForConnection([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
     }
@@ -77,8 +90,8 @@ class PhoenixLightLitElement extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this._dispatchLifecycleEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
         this.isWebComponentConnected = true;
+        this._dispatchLifecycleEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected);
         if (this.watchChildrenConnected)
             this._setupChildrenConnectedWatch();
         if (this.watchChildrenRendered)

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}