@shoper/phoenix_design_system 1.0.4 → 1.1.0-10

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

@@ -0,0 +1,15 @@
+import { BaseSelectController } from './base_select_controller.js';
+
+class SelectController extends BaseSelectController {
+    selectOption(option) {
+        var _a;
+        const selectedOptions = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
+        selectedOptions.forEach((option) => (option.selected = false));
+        option.selected = true;
+        this.selectedOptions$.notify([option]);
+        this.requestOptionsUpdate();
+    }
+}
+
+export { SelectController };
+//# sourceMappingURL=select_controller.js.map

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

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

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

@@ -0,0 +1,22 @@
+import { ReactiveControllerHost } from 'lit';
+import { SelectOption } from "../model/select_option";
+import { BehaviorSubject } from "../../../../core/classes/behavior_subject/behavior_subject";
+import { HSelect } from "../select";
+export declare type SelectControllerConstructorOptions = {
+    host: HSelect & ReactiveControllerHost;
+};
+export interface ISelectController {
+    selectedOptions$: BehaviorSubject<SelectOption[]>;
+    options$: BehaviorSubject<SelectOption[]>;
+    visibleOptionsCount: number;
+    selectedOptionsCount: number;
+    deselectOptions(): void;
+    deselectOption(option: SelectOption): void;
+    filterOptions(value: string): void;
+    toggleOption(option: SelectOption): void;
+    selectOption(option: SelectOption): void;
+    getSelectOption(selectValue: string): SelectOption | undefined;
+    removeOption(optionValue: string): void;
+    addOption(option: SelectOption, position?: number): void;
+    replaceOptions(options: SelectOption[]): void;
+}

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

@@ -0,0 +1,5 @@
+import 'lit';
+import '@phoenixRoot/components/form/select/model/select_option';
+import '@phoenixRoot/core/classes/behavior_subject/behavior_subject';
+import '@phoenixRoot/components/form/select/select';
+//# sourceMappingURL=select_controllers_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select_controllers_types.js","sourceRoot":"","sources":["../../../../../../../../../src/components/form/select/controllers/select_controllers_types.ts"],"names":[],"mappings":"AAAA,OAAuC,KAAK,CAAC;AAC7C,OAA6B,yDAAyD,CAAC;AACvF,OAAgC,6DAA6D,CAAC;AAC9F,OAAwB,4CAA4C,CAAC"}

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

@@ -0,0 +1,10 @@
+import { TSelectOptionConstructorOptions } from "./select_option_constants";
+export declare class SelectOption {
+    selected: boolean;
+    disabled: boolean;
+    value: string;
+    hidden: boolean;
+    content: string;
+    private constructor();
+    static create(options: TSelectOptionConstructorOptions): SelectOption;
+}

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

@@ -0,0 +1,15 @@
+class SelectOption {
+    constructor({ selected = false, hidden = false, disabled = false, value, content }) {
+        this.value = value;
+        this.selected = selected;
+        this.hidden = hidden;
+        this.disabled = disabled;
+        this.content = content;
+    }
+    static create(options) {
+        return new SelectOption(options);
+    }
+}
+
+export { SelectOption };
+//# sourceMappingURL=select_option.js.map

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

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

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

@@ -0,0 +1,7 @@
+export declare type TSelectOptionConstructorOptions = {
+    value: string;
+    content: string;
+    selected?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+};

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { HOption } from "../components/option/select_option";
+import { SelectOption } from "./select_option";
+export declare class SelectOptionMapper {
+    static toModel($option: HOption): SelectOption;
+}

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

@@ -0,0 +1,20 @@
+import { SELECT_RELATED_COMPONENTS_NAMES } from '../components/select_components_constatns.js';
+import { SelectOption } from './select_option.js';
+
+class SelectOptionMapper {
+    static toModel($option) {
+        var _a;
+        const optionContent = (_a = $option.querySelector(SELECT_RELATED_COMPONENTS_NAMES.optionContent)) === null || _a === void 0 ? void 0 : _a.textContent;
+        if (!optionContent)
+            throw new Error('h-options must contains a h-option-content element inside');
+        return SelectOption.create({
+            value: $option.value,
+            disabled: $option.disabled,
+            hidden: $option.hidden,
+            content: optionContent
+        });
+    }
+}
+
+export { SelectOptionMapper };
+//# sourceMappingURL=select_option_mapper.js.map

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

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

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

@@ -0,0 +1,36 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { TemplateResult, PropertyValues } from 'lit';
+import { SelectOption } from "./model/select_option";
+export declare class HSelect extends PhoenixLightLitElement {
+    private static _components;
+    controlName: string;
+    multiselect: boolean;
+    opened: boolean;
+    private _searchValue;
+    private _selectController;
+    private _$options;
+    private _$dropdown;
+    private _$search;
+    private _$optionsList;
+    private _$dropdownContent;
+    private _selectContext;
+    private _listBoxController;
+    constructor();
+    updated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    firstUpdated(props: PropertyValues): void;
+    private _setupEvents;
+    private _handleOptionDeselect;
+    private _updateOptionsView;
+    private _appendNewHTMLOption;
+    private _removeHTMLOptions;
+    private _handleOptionClicked;
+    private _handleSearch;
+    private _closeSelect;
+    private _clearOptions;
+    protected update(changedProperties: PropertyValues): void;
+    addOption(option: SelectOption, position?: number): void;
+    removeOption(optionValue: string): void;
+    replaceOptions(options: SelectOption[]): void;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,226 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html, nothing } from 'lit';
+import { 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 { property } from '@lit/reactive-element/decorators.js';
+import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_CLOSE_BTN_EVENT_NAMES } from './components/select_components_constatns.js';
+import { SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH } from './select_constants.js';
+import { Observer } from '../../../core/classes/observer/observer.js';
+import { observe } from '../../../directives/observable_directive.js';
+import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
+import { createRef, ref } from 'lit-html/directives/ref.js';
+import { MultiSelectController } from './controllers/multi_select_controller.js';
+import { SelectController } from './controllers/select_controller.js';
+import { HSelectSearch } from './components/search/select_search.js';
+import { ListBoxKeyboardController } from '../../../controllers/list_box_controller/list_box_keyboard_controller.js';
+import { HIcon } from '../../icon/icon.js';
+import { SelectOptionMapper } from './model/select_option_mapper.js';
+import { SelectControlUtils } from './select_utils.js';
+
+let HSelect = class HSelect extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.multiselect = false;
+        this.opened = false;
+        this._searchValue = '';
+        this._$options = {};
+        this._$dropdown = createRef();
+        this._$search = createRef();
+        this._$optionsList = createRef();
+        this._$dropdownContent = createRef();
+        this._selectContext = new ContextProviderController(this);
+        this._handleOptionDeselect = (event) => {
+            const selectedOption = this._selectController.getSelectOption(event.detail);
+            if (!selectedOption)
+                return;
+            this._selectController.deselectOption(selectedOption);
+        };
+        this._updateOptionsView = (options) => {
+            if (options.length < Object.keys(this._$options).length)
+                this._removeHTMLOptions(options.map((option) => option.value));
+            options.forEach((option, index) => {
+                const { selected, value } = option;
+                const $option = this._$options[value];
+                if (!$option) {
+                    this._appendNewHTMLOption(option, index + 1);
+                    return;
+                }
+                SelectControlUtils.syncHTMLOptionWithModel(option, $option);
+                if (!selected)
+                    return;
+                $option.setAttribute(this.multiselect ? '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._closeSelect = () => {
+            var _a;
+            (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
+            this._searchValue = '';
+            this.opened = false;
+        };
+        this._clearOptions = () => {
+            this._selectController.deselectOptions();
+        };
+        const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
+        $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('opened'))
+            this.opened ? this.classList.add(SELECT_CSS_CLASSES.selectOpened) : this.classList.remove(SELECT_CSS_CLASSES.selectOpened);
+        if (this._$optionsList.value && !this._listBoxController)
+            this._listBoxController = new ListBoxKeyboardController({
+                host: this,
+                $list: this._$optionsList.value
+            });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(SELECT_CSS_CLASSES.select);
+        this._selectController = this.multiselect ? 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);
+        const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
+        this._selectController.options$.subscribe(new Observer((selectedOptions) => this._updateOptionsView(selectedOptions)));
+        this._$options = $options.reduce((acc, $option) => {
+            if (acc[$option.value] !== undefined)
+                throw Error('Select options must hava a unique values.');
+            return {
+                ...acc,
+                [$option.value]: $option
+            };
+        }, {});
+        this._selectController.options$.notify($options.map(SelectOptionMapper.toModel));
+        this._setupEvents();
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        if (this._$dropdownContent.value)
+            this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
+    }
+    _setupEvents() {
+        this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
+        this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
+    }
+    _appendNewHTMLOption(option, position) {
+        const $list = this._$optionsList.value;
+        if (!$list)
+            return;
+        const { value, selected } = option;
+        const $option = SelectControlUtils.createHTMLOption(option);
+        if (selected)
+            $option.setAttribute(this.multiselect ? '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);
+    }
+    _handleSearch({ detail }) {
+        this._searchValue = detail;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('_searchValue'))
+            this._selectController.filterOptions(this._searchValue);
+    }
+    addOption(option, position) {
+        this._selectController.addOption(option, position);
+    }
+    removeOption(optionValue) {
+        this._selectController.removeOption(optionValue);
+    }
+    replaceOptions(options) {
+        this._selectController.replaceOptions(options);
+    }
+    render() {
+        var _a;
+        const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
+        return html `
+            <h-dropdown
+                ${ref(this._$dropdown)}
+                @dropdown.showed=${() => (this.opened = true)}
+                @dropdown.hidden=${this._closeSelect}
+                name=${this.controlName}
+            >
+                <h-dropdown-toggler name=${this.controlName}">
+                    ${this.getSlot(SELECT_SLOT_NAMES.input)}
+                </h-dropdown-toggler>
+
+                <h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} name=${this.controlName}>
+                    <h-select-close-btn @click=${this._closeSelect}></h-select-close-btn>
+
+                    ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
+            ? html `<h-select-search
+                                  class=${SELECT_CSS_CLASSES.selectSearch}
+                                  ${ref(this._$search)}
+                                  .value=${this._searchValue}
+                                  @selectSearch.search=${this._handleSearch}
+                              ></h-select-search>`
+            : nothing}
+                    ${this.hasSlot(SELECT_SLOT_NAMES.content)
+            ? html `
+                                  <h-options
+                                      class=${SELECT_CSS_CLASSES.selectOptions}
+                                      ${ref(this._$optionsList)}
+                                      @selectOptions.clicked=${this._handleOptionClicked}
+                                  >
+                                      ${this.getSlot(SELECT_SLOT_NAMES.content)}
+                                  </h-options>
+                              `
+            : nothing}
+                    ${!this._selectController.visibleOptionsCount
+            ? html `<p class=${SELECT_CSS_CLASSES.selectNoResult}>
+                                  brak wyników dla <span class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>${this._searchValue}</span>
+                              </p>`
+            : nothing}
+                    ${this.multiselect && this._selectController.selectedOptionsCount >= 1
+            ? html `
+                                  <section class=${SELECT_CSS_CLASSES.selectFooter}>
+                                      <button class="btn btn_secondary btn_s" @click=${this._clearOptions}>clear</button>
+                                      <h-select-close-btn class="btn btn_primary btn_s" @click=${this._closeSelect}>ok</h-select-close-btn>
+                                  </section>
+                              `
+            : nothing}
+                </h-dropdown-content>
+            </h-dropdown>
+
+            ${observe(this._selectController.selectedOptions$, (selectOptions) => selectOptions.map((option) => html `<input type="hidden" name=${this.controlName} value=${option.value} />`))}
+        `;
+    }
+};
+HSelect._components = {
+    search: HSelectSearch,
+    icon: HIcon
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSelect.prototype, "controlName", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "multiselect", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "opened", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HSelect.prototype, "_searchValue", void 0);
+HSelect = __decorate([
+    phoenixCustomElement('h-select'),
+    __metadata("design:paramtypes", [])
+], HSelect);
+
+export { HSelect };
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -0,0 +1,23 @@
+export declare const SELECT_CONTEXTS: {
+    readonly isMultiselect: "isMultiselect";
+    readonly selectedOptions$: "selectedOptions$";
+};
+export declare const SELECT_SLOT_NAMES: {
+    readonly content: "content";
+    readonly input: "input";
+};
+export declare const SELECT_EVENT_NAMES: {
+    readonly selectOption: "selectOption.select";
+    readonly deselectOption: "selectOption.deselect";
+};
+export declare const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
+export declare const SELECT_CSS_CLASSES: {
+    readonly select: "select";
+    readonly selectOpened: "select_opened";
+    readonly selectSearch: "select__search";
+    readonly selectOptions: "select__options";
+    readonly selectContent: "select__content";
+    readonly selectFooter: "select__footer";
+    readonly selectNoResult: "select__no-result";
+    readonly selectSearchedPhrase: "select__searched-phrase";
+};

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

@@ -0,0 +1,27 @@
+const SELECT_CONTEXTS = {
+    isMultiselect: 'isMultiselect',
+    selectedOptions$: 'selectedOptions$'
+};
+const SELECT_SLOT_NAMES = {
+    content: 'content',
+    input: 'input'
+};
+const SELECT_EVENT_NAMES = {
+    selectOption: 'selectOption.select',
+    deselectOption: 'selectOption.deselect'
+};
+const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
+const baseSelectClass = 'select';
+const SELECT_CSS_CLASSES = {
+    select: baseSelectClass,
+    selectOpened: `${baseSelectClass}_opened`,
+    selectSearch: `${baseSelectClass}__search`,
+    selectOptions: `${baseSelectClass}__options`,
+    selectContent: `${baseSelectClass}__content`,
+    selectFooter: `${baseSelectClass}__footer`,
+    selectNoResult: `${baseSelectClass}__no-result`,
+    selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
+};
+
+export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_SLOT_NAMES };
+//# sourceMappingURL=select_constants.js.map

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

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

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

@@ -0,0 +1,9 @@
+import { SelectOption } from "./model/select_option";
+import { HOption } from "./components/option/select_option";
+import { HOptions } from "./components/select_options";
+export declare class SelectControlUtils {
+    static createHTMLOption(option: SelectOption): HOption;
+    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;
+}

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

@@ -0,0 +1,48 @@
+import { SELECT_RELATED_COMPONENTS_NAMES } from './components/select_components_constatns.js';
+
+class SelectControlUtils {
+    static createHTMLOption(option) {
+        const { selected, value, disabled, hidden, content } = option;
+        const $option = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.option);
+        $option.setAttribute('value', String(value));
+        const $optionContent = document.createElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
+        $optionContent.innerText = content;
+        $option.append($optionContent);
+        if (selected)
+            $option.setAttribute('selected', '');
+        if (disabled)
+            $option.setAttribute('disabled', '');
+        if (hidden)
+            $option.setAttribute('hidden', '');
+        return $option;
+    }
+    static syncHTMLOptionWithModel(option, $option) {
+        const { selected, value, disabled, hidden } = option;
+        $option.selected = selected;
+        $option.value = value;
+        $option.disabled = disabled;
+        $option.hidden = hidden;
+    }
+    static removeHTMLOptions($options, optionsValuesThatExists) {
+        return $options.reduce((acc, $option) => {
+            if (optionsValuesThatExists.includes($option.value))
+                return {
+                    ...acc,
+                    [$option.value]: $option
+                };
+            $option.remove();
+            return acc;
+        }, {});
+    }
+    static appendHTMLOption($option, $list, position) {
+        if (position !== undefined) {
+            const $nextOption = $list.querySelector(`${SELECT_RELATED_COMPONENTS_NAMES.option}:nth-child(${position})`);
+            $nextOption ? $nextOption.insertAdjacentElement('beforebegin', $option) : $list.append($option);
+            return;
+        }
+        $list.append($option);
+    }
+}
+
+export { SelectControlUtils };
+//# sourceMappingURL=select_utils.js.map

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

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

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

@@ -2,9 +2,9 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 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 classnames from '../../../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../external/classnames/index.js';
 import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';
 import { SWITCH_CONTROL_CSS_CLASSES } from './switch_constants.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/textarea/textarea.js

@@ -2,9 +2,9 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 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 classnames from '../../../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../external/classnames/index.js';
 import { TEXTAREA_PROPS_TO_SYNC, TEXTAREA_CONTROL_CSS_CLASSES } from './textarea_constants.js';
 
 let HTextarea = class HTextarea extends PhoenixLightLitElement {

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/icon/icon.js

@@ -3,8 +3,8 @@ import { html } 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 classnames from '../../../external/classnames/index.js';
 import { ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP } from './icon_constants.js';
+import classnames from '../../../../../external/classnames/index.js';
 import { namespacedAttribute } from '../../directives/namespaced_attribure_directive.js';
 
 var HIcon_1;
@@ -18,6 +18,7 @@ let HIcon = HIcon_1 = class HIcon extends PhoenixLightLitElement {
     connectedCallback() {
         var _a;
         super.connectedCallback();
+        this.classList.add(ICON_CSS_CLASSES.icon);
         this._cssClasses = classnames(ICON_CSS_CLASSES.icon, {
             [ICON_SIZES_CSS_CLASS_MAP[(_a = this.size) !== null && _a !== void 0 ? _a : '']]: Boolean(this.size),
             [ICON_CSS_CLASSES.iconFilled]: this.filled,

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

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

package/build/esm/packages/phoenix/src/components/messages/base_message.js

@@ -2,9 +2,9 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
 import { property } from 'lit/decorators';
 import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
-import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
 import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
 import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
+import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
 import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_ELEMENTS } from './base_message_constants.js';

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

@@ -1,13 +1,13 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
-import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';
-import { html } from 'lit-html';
-import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { property, state } from '@lit/reactive-element/decorators.js';
+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;
 let HModal = HModal_1 = class HModal extends PhoenixLightLitElement {

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

@@ -3,8 +3,8 @@ import 'lit';
 import { state, 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 { PORTAL_EVENTS } from './portal_constants.js';
 import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
+import { PORTAL_EVENTS } from './portal_constants.js';
 
 let HPortal = class HPortal extends PhoenixLightLitElement {
     constructor() {

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

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