@shoper/phoenix_design_system 1.0.4 → 1.1.0-10

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

@@ -0,0 +1,60 @@
+import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
+import { nothing } from 'lit';
+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_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
+import { BtnController } from '../../../../../controllers/btn_controller/btn_controller.js';
+import { SELECT_OPTION_CSS_CLASSES } from './select_option_constants.js';
+import { html } from 'lit-html';
+
+let HOption = class HOption extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._dispatchClickedEvent = () => {
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent(SELECT_OPTION_EVENT_NAMES.clicked, {
+                bubbles: true,
+                detail: {
+                    $option: this
+                }
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._btnController = new BtnController(this, this._dispatchClickedEvent);
+        this.classList.add(SELECT_OPTION_CSS_CLASSES.selectOption);
+        this.setAttribute('role', 'option');
+        this._setupEvents();
+    }
+    _setupEvents() {
+        this.addEventListener('click', this._dispatchClickedEvent);
+    }
+    render() {
+        return html ` ${this.getSlot('content')} ${this.selected ? html `<h-icon icon-name="icon-check"></h-icon>` : nothing} `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], HOption.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HOption.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HOption.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HOption.prototype, "hidden", void 0);
+HOption = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.option)
+], HOption);
+
+export { HOption };
+//# sourceMappingURL=select_option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/option/select_option_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SELECT_OPTION_CSS_CLASSES: {
+    readonly selectOption: "select-option";
+    readonly selectOptionContent: "select-option__content";
+};

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

@@ -0,0 +1,8 @@
+const selectOption = 'select-option';
+const SELECT_OPTION_CSS_CLASSES = {
+    selectOption: selectOption,
+    selectOptionContent: `${selectOption}__content`
+};
+
+export { SELECT_OPTION_CSS_CLASSES };
+//# sourceMappingURL=select_option_constants.js.map

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

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

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

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HOptionContent extends PhoenixLightLitElement {
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,19 @@
+import { __decorate } 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 { SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
+import { SELECT_OPTION_CSS_CLASSES } from './select_option_constants.js';
+
+let HOptionContent = class HOptionContent extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('slot', 'content');
+        this.classList.add(SELECT_OPTION_CSS_CLASSES.selectOptionContent);
+    }
+};
+HOptionContent = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent)
+], HOptionContent);
+
+export { HOptionContent };
+//# sourceMappingURL=select_option_content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,2BAA2B,qDAAyD;AACpF;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/components/search/select_search.d.ts

@@ -0,0 +1,8 @@
+import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { TemplateResult } from 'lit';
+export declare class HSelectSearch extends PhoenixLightLitElement {
+    value: string;
+    connectedCallback(): void;
+    private _handleInputChange;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,50 @@
+import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
+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 { SELECT_SEARCH_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
+import debounce_1 from '../../../../../../../../external/lodash/debounce.js';
+import { SELECT_SEARCH_CSS_CLASSES } from './select_search_constants.js';
+
+let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this._handleInputChange = debounce_1(({ target }) => {
+            this.value = target.value;
+            this.dispatchEvent(new CustomEvent(SELECT_SEARCH_EVENT_NAMES.search, {
+                bubbles: true,
+                detail: target.value
+            }));
+        }, 200);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
+    }
+    render() {
+        return html `
+            <h-icon icon-name="icon-search" class=${SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
+            <input
+                class=${SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
+                type="text"
+                role="search"
+                .value=${this.value}
+                aria-autocomplete="list"
+                autocomplete="false"
+                @input=${this._handleInputChange}
+            />
+        `;
+    }
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], HSelectSearch.prototype, "value", void 0);
+HSelectSearch = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.search)
+], HSelectSearch);
+
+export { HSelectSearch };
+//# sourceMappingURL=select_search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/search/select_search_constants.d.ts

@@ -0,0 +1,5 @@
+export declare const SELECT_SEARCH_CSS_CLASSES: {
+    readonly selectSearch: "select-search";
+    readonly selectSearchIcon: "select-search__icon";
+    readonly selectSearchInput: "select-search__input";
+};

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

@@ -0,0 +1,9 @@
+const baseClass = 'select-search';
+const SELECT_SEARCH_CSS_CLASSES = {
+    selectSearch: baseClass,
+    selectSearchIcon: `${baseClass}__icon`,
+    selectSearchInput: `${baseClass}__input`
+};
+
+export { SELECT_SEARCH_CSS_CLASSES };
+//# sourceMappingURL=select_search_constants.js.map

package/build/esm/packages/phoenix/src/components/form/select/components/search/select_search_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/form/select/components/select_close_btn.d.ts

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit-html';
+import { PhoenixLightLitElement } from "../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class SelectCloseBtn extends PhoenixLightLitElement {
+    private _btnController;
+    connectedCallback(): void;
+    private _dispatchCloseEvent;
+    render(): TemplateResult;
+}

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

@@ -0,0 +1,29 @@
+import { __decorate } from "tslib";
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { html } from 'lit-html';
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '@phoenixRoot/components/form/select/components/select_components_constatns';
+import { BtnController } from '@phoenixRoot/controllers/btn_controller/btn_controller';
+let SelectCloseBtn = class SelectCloseBtn extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._dispatchCloseEvent = () => {
+            this.dispatchEvent(new CustomEvent(SELECT_CLOSE_BTN_EVENT_NAMES.close));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('aria-label', 'close select');
+        this._btnController = new BtnController(this, this._dispatchCloseEvent);
+    }
+    render() {
+        return html `${this.hasSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
+            ? this.getSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
+            : html `<icon iconName="icon-x"></icon>`} `;
+    }
+};
+SelectCloseBtn = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.closeBtn)
+], SelectCloseBtn);
+export { SelectCloseBtn };
+//# sourceMappingURL=select_close_btn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select_close_btn.js","sourceRoot":"","sources":["../../../../../../../../../src/components/form/select/components/select_close_btn.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,IAAI,EAAkB,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EACH,4BAA4B,EAC5B,qCAAqC,EACrC,+BAA+B,EAClC,MAAM,4EAA4E,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AAGvF,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,sBAAsB;IAA1D;;QAWY,wBAAmB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,4BAA4B,CAAC,KAAK,CAAC,CAAC,CAAC;QAC5E,CAAC,CAAC;IAON,CAAC;IAjBU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;QAEhD,IAAI,CAAC,cAAc,GAAG,IAAI,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC5E,CAAC;IAMM,MAAM;QACT,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,qCAAqC,CAAC;YAC7D,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,qCAAqC,CAAC;YACrD,CAAC,CAAC,IAAI,CAAA,iCAAiC,GAAG,CAAC;IACnD,CAAC;CACJ,CAAA;AApBY,cAAc;IAD1B,oBAAoB,CAAC,+BAA+B,CAAC,QAAQ,CAAC;GAClD,cAAc,CAoB1B;SApBY,cAAc"}

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

@@ -0,0 +1,22 @@
+export declare const SELECT_OPTION_EVENT_NAMES: {
+    readonly clicked: "selectOption.clicked";
+};
+export declare const SELECT_OPTIONS_EVENT_NAMES: {
+    readonly clicked: "selectOptions.clicked";
+};
+export declare const SELECT_SEARCH_EVENT_NAMES: {
+    readonly search: "selectSearch.search";
+};
+export declare const SELECT_CLOSE_BTN_EVENT_NAMES: {
+    readonly close: "selectCloseBtn.close";
+};
+export declare const SELECT_RELATED_COMPONENTS_NAMES: {
+    readonly option: "h-option";
+    readonly options: "h-options";
+    readonly optionContent: "h-option-content";
+    readonly toggler: "h-select-toggler";
+    readonly closeBtn: "h-select-close-btn";
+    readonly search: "h-select-search";
+};
+export declare const SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME = "content";
+export declare const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = "placeholder";

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

@@ -0,0 +1,24 @@
+const SELECT_OPTION_EVENT_NAMES = {
+    clicked: 'selectOption.clicked'
+};
+const SELECT_OPTIONS_EVENT_NAMES = {
+    clicked: 'selectOptions.clicked'
+};
+const SELECT_SEARCH_EVENT_NAMES = {
+    search: 'selectSearch.search'
+};
+const SELECT_CLOSE_BTN_EVENT_NAMES = {
+    close: 'selectCloseBtn.close'
+};
+const SELECT_RELATED_COMPONENTS_NAMES = {
+    option: 'h-option',
+    options: 'h-options',
+    optionContent: 'h-option-content',
+    toggler: 'h-select-toggler',
+    closeBtn: 'h-select-close-btn',
+    search: 'h-select-search'
+};
+const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';
+
+export { SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES, SELECT_SEARCH_EVENT_NAMES };
+//# sourceMappingURL=select_components_constatns.js.map

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

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

@@ -0,0 +1,4 @@
+import { HOption } from "./option/select_option";
+export declare type TSelectOptionClickedEvent = CustomEvent<{
+    $option: HOption;
+}>;

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { PhoenixLightLitElement } from "../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HOptions extends PhoenixLightLitElement {
+    constructor();
+    private _dispatchClickedEvent;
+}

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

@@ -0,0 +1,29 @@
+import { __decorate, __metadata } from '../../../../../../../external/tslib/tslib.es6.js';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+import { PhoenixLightLitElement } from '../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../../core/decorators/phoenix_custom_element.js';
+import { SELECT_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES } from './select_components_constatns.js';
+
+let HOptions = class HOptions extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = ({ detail }) => {
+            this.dispatchEvent(new CustomEvent(SELECT_OPTIONS_EVENT_NAMES.clicked, {
+                bubbles: true,
+                detail: {
+                    $option: detail.$option
+                }
+            }));
+        };
+        this.setAttribute('role', 'listbox');
+        UiDomUtils.makeNavigable(this);
+        this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
+    }
+};
+HOptions = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.options),
+    __metadata("design:paramtypes", [])
+], HOptions);
+
+export { HOptions };
+//# sourceMappingURL=select_options.js.map

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

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

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

@@ -0,0 +1,13 @@
+import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { SelectOption } from "../../model/select_option";
+import { TemplateResult } from 'lit-html';
+import { BehaviorSubject } from "../../../../../core/classes/behavior_subject/behavior_subject";
+export declare class HSelectToggler extends PhoenixLightLitElement {
+    selectedOptions$: BehaviorSubject<SelectOption[]> | null;
+    isMultiselect: boolean;
+    private _contextConsumer;
+    connectedCallback(): void;
+    private _subscribeObserver;
+    private _dispatchOptionDeselect;
+    render(): TemplateResult | undefined;
+}

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

@@ -0,0 +1,72 @@
+import { __decorate, __metadata } from '../../../../../../../../external/tslib/tslib.es6.js';
+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 { SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
+import { html } from 'lit-html';
+import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
+import { SELECT_EVENT_NAMES, SELECT_SLOT_NAMES, SELECT_CONTEXTS } from '../../select_constants.js';
+import { observe } from '../../../../../directives/observable_directive.js';
+import { SELECT_TOGGLER_CSS_CLASSES } from './select_toggler_constants.js';
+
+let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._contextConsumer = new ContextConsumerController(this);
+        this._dispatchOptionDeselect = (option) => {
+            this.dispatchEvent(new CustomEvent(SELECT_EVENT_NAMES.deselectOption, {
+                detail: option.value,
+                bubbles: true
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('slot', SELECT_SLOT_NAMES.input);
+        this.setAttribute('role', 'textbox');
+        this.classList.add(SELECT_TOGGLER_CSS_CLASSES.selectToggler);
+        this._subscribeObserver();
+    }
+    async _subscribeObserver() {
+        this.isMultiselect = (await this._contextConsumer.consumeAsync(SELECT_CONTEXTS.isMultiselect));
+        this.selectedOptions$ = (await this._contextConsumer.consumeAsync(SELECT_CONTEXTS.selectedOptions$));
+    }
+    render() {
+        if (!this.selectedOptions$)
+            return;
+        return html `
+            <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
+                ${observe(this.selectedOptions$, (selectOptions) => {
+            var _a;
+            if (!selectOptions.length)
+                return html `${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}`;
+            return this.isMultiselect
+                ? html `${selectOptions.map((option) => html `<li>
+                                  <h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
+                                      ${option.content}
+
+                                      <h-tag-remove-button></h-tag-remove-button>
+                                  </h-tag>
+                              </li>`)}`
+                : html `<li>${selectOptions[0].content}</li>`;
+        })}
+            </ul>
+
+            <h-icon icon-name="icon-chevron-down"></h-icon>
+        `;
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HSelectToggler.prototype, "selectedOptions$", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], HSelectToggler.prototype, "isMultiselect", void 0);
+HSelectToggler = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.toggler)
+], HSelectToggler);
+
+export { HSelectToggler };
+//# sourceMappingURL=select_toggler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,qDAAyD;AAChG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/toggler/select_toggler_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SELECT_TOGGLER_CSS_CLASSES: {
+    readonly selectToggler: "select-toggler";
+    readonly selectTogglerValues: "select-toggler__values";
+};

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

@@ -0,0 +1,8 @@
+const baseClass = 'select-toggler';
+const SELECT_TOGGLER_CSS_CLASSES = {
+    selectToggler: baseClass,
+    selectTogglerValues: `${baseClass}__values`
+};
+
+export { SELECT_TOGGLER_CSS_CLASSES };
+//# sourceMappingURL=select_toggler_constants.js.map

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

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

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

@@ -0,0 +1,27 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { ISelectController, SelectControllerConstructorOptions } from "./select_controllers_types";
+import { SelectOption } from "../model/select_option";
+import { BehaviorSubject } from "../../../../core/classes/behavior_subject/behavior_subject";
+import { HSelect } from "../select";
+export declare abstract class BaseSelectController implements ISelectController, ReactiveController {
+    options$: BehaviorSubject<SelectOption[]>;
+    visibleOptionsCount: number;
+    selectedOptionsCount: number;
+    selectedOptions$: BehaviorSubject<SelectOption[]>;
+    protected host: HSelect & ReactiveControllerHost;
+    private _optionsObserver;
+    constructor({ host }: SelectControllerConstructorOptions);
+    private _setupComputedStateObserver;
+    private _calculateValuesRelatedToOptions;
+    toggleOption(option: SelectOption): void;
+    abstract selectOption(option: SelectOption): void;
+    removeOption(optionValue: string): void;
+    addOption(option: SelectOption, position?: number): void;
+    replaceOptions(options: SelectOption[]): void;
+    deselectOptions(): void;
+    deselectOption(option: SelectOption): void;
+    filterOptions(value: string): void;
+    protected requestOptionsUpdate(): void;
+    getSelectOption(selectValue: string): SelectOption | undefined;
+    hostConnected(): void;
+}

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

@@ -0,0 +1,89 @@
+import 'lit';
+import { SearchingUtils } from '@dreamcommerce/utilities';
+import { Observer } from '../../../../core/classes/observer/observer.js';
+import { BehaviorSubject } from '../../../../core/classes/behavior_subject/behavior_subject.js';
+
+class BaseSelectController {
+    constructor({ host }) {
+        this.options$ = new BehaviorSubject([]);
+        this.selectedOptions$ = new BehaviorSubject([]);
+        this._calculateValuesRelatedToOptions = (selectOptions) => {
+            const { visibleCount, selectedCount } = selectOptions.reduce((acc, option) => {
+                return {
+                    visibleCount: !option.hidden ? acc.visibleCount + 1 : acc.visibleCount,
+                    selectedCount: option.selected ? acc.selectedCount + 1 : acc.selectedCount
+                };
+            }, { visibleCount: 0, selectedCount: 0 });
+            this.visibleOptionsCount = visibleCount;
+            this.selectedOptionsCount = selectedCount;
+            this.selectedOptions$.notify(selectOptions.filter((option) => option.selected));
+        };
+        this.host = host;
+        this.host.addController(this);
+        this._setupComputedStateObserver();
+    }
+    _setupComputedStateObserver() {
+        this._optionsObserver = new Observer(this._calculateValuesRelatedToOptions);
+        this.options$.subscribe(this._optionsObserver);
+    }
+    toggleOption(option) {
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
+    }
+    removeOption(optionValue) {
+        const options = this.options$.getValue();
+        if (!options)
+            return;
+        this.options$.notify(options.filter((option) => option.value !== optionValue));
+    }
+    addOption(option, position) {
+        var _a;
+        const options = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
+        if (position === undefined) {
+            options.push(option);
+            this.options$.notify(options);
+            return;
+        }
+        this.options$.notify([...options.slice(0, position - 1), option, ...options.slice(position - 1)]);
+    }
+    replaceOptions(options) {
+        this.options$.notify(options);
+    }
+    deselectOptions() {
+        var _a;
+        (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
+        this.requestOptionsUpdate();
+    }
+    deselectOption(option) {
+        var _a;
+        (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
+        this.requestOptionsUpdate();
+    }
+    filterOptions(value) {
+        const selectOptions = this.options$.getValue();
+        if (!selectOptions)
+            return;
+        const filtered = SearchingUtils.fuzzySearch(value, selectOptions, 'content');
+        selectOptions.forEach((option) => (option.hidden = true));
+        filtered.forEach((option) => {
+            option.hidden = false;
+        });
+        this.requestOptionsUpdate();
+    }
+    requestOptionsUpdate() {
+        const selectOptions = this.options$.getValue();
+        if (!selectOptions)
+            return;
+        this.options$.notify([...selectOptions]);
+        this.host.requestUpdate();
+    }
+    getSelectOption(selectValue) {
+        var _a;
+        return (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === selectValue);
+    }
+    hostConnected() {
+        this.options$.unsubscribe(this._optionsObserver);
+    }
+}
+
+export { BaseSelectController };
+//# sourceMappingURL=base_select_controller.js.map

package/build/esm/packages/phoenix/src/components/form/select/controllers/base_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/multi_select_controller.d.ts

@@ -0,0 +1,7 @@
+import { SelectOption } from "../model/select_option";
+import { BaseSelectController } from "./base_select_controller";
+export declare class MultiSelectController extends BaseSelectController {
+    toggleOption(option: SelectOption): void;
+    selectOption(option: SelectOption): void;
+    deselectOption(option: SelectOption): void;
+}

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

@@ -0,0 +1,18 @@
+import { BaseSelectController } from './base_select_controller.js';
+
+class MultiSelectController extends BaseSelectController {
+    toggleOption(option) {
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
+    }
+    selectOption(option) {
+        option.selected = true;
+        this.requestOptionsUpdate();
+    }
+    deselectOption(option) {
+        option.selected = false;
+        this.requestOptionsUpdate();
+    }
+}
+
+export { MultiSelectController };
+//# sourceMappingURL=multi_select_controller.js.map

package/build/esm/packages/phoenix/src/components/form/select/controllers/multi_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;AACA;AACA;AACA;"}

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

@@ -0,0 +1,5 @@
+import { SelectOption } from "../model/select_option";
+import { BaseSelectController } from "./base_select_controller";
+export declare class SelectController extends BaseSelectController {
+    selectOption(option: SelectOption): void;
+}