@shoper/phoenix_design_system 0.27.0 → 0.28.0-1

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

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

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

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

@@ -0,0 +1,41 @@
+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';
+
+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);
+    }
+    render() {
+        return html `<input
+            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/control/components/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;"}

package/build/esm/packages/phoenix/src/components/form/select/control/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 { HSelectControl } from "../select_control";
+export declare abstract class BaseSelectController implements ISelectController, ReactiveController {
+    options$: BehaviorSubject<SelectOption[]>;
+    visibleOptionsCount: number;
+    selectedOptionsCount: number;
+    selectedOptions$: BehaviorSubject<SelectOption[]>;
+    protected host: HSelectControl & 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/control/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/control/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/control/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/control/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/control/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/control/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;
+}

package/build/esm/packages/phoenix/src/components/form/select/control/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/control/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/control/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 { HSelectControl } from "../select_control";
+export declare type SelectControllerConstructorOptions = {
+    host: HSelectControl & 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/control/controllers/select_controllers_types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"select_controllers_types.js","sourceRoot":"","sources":["../../../../../../../../../../src/components/form/select/control/controllers/select_controllers_types.ts"],"names":[],"mappings":"AAAA,OAAuC,KAAK,CAAC;AAC7C,OAA6B,iEAAiE,CAAC;AAC/F,OAAgC,6DAA6D,CAAC;AAC9F,OAA+B,4DAA4D,CAAC"}

package/build/esm/packages/phoenix/src/components/form/select/control/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/control/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/control/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/control/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/control/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/control/model/select_option_constants.js.map

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

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

@@ -0,0 +1,5 @@
+import { HOption } from "../components/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/control/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/control/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/control/select_control.d.ts

@@ -0,0 +1,34 @@
+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 HSelectControl extends PhoenixLightLitElement {
+    private static _components;
+    controlName: string;
+    multiselect: boolean;
+    private _searchValue;
+    private _selectController;
+    private _$options;
+    private _$dropdown;
+    private _$search;
+    private _$optionsList;
+    private _selectContext;
+    private _listBoxController;
+    constructor();
+    updated(props: PropertyValues): void;
+    connectedCallback(): void;
+    private _setupEvents;
+    private _handleOptionDeselect;
+    private _updateOptionsView;
+    private _appendNewHTMLOption;
+    private _removeHTMLOptions;
+    private _handleOptionClicked;
+    private _handleSearch;
+    private _closeSelect;
+    private _clearOptions;
+    private _handleDropdownHidden;
+    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/control/select_control.js

@@ -0,0 +1,198 @@
+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 } from './components/select_components_constatns.js';
+import { SELECT_SLOT_NAMES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH } from './select_control_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/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_control_utils.js';
+
+let HSelectControl = class HSelectControl extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.multiselect = false;
+        this._searchValue = '';
+        this._$options = {};
+        this._$dropdown = createRef();
+        this._$search = createRef();
+        this._$optionsList = 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._clearOptions = () => {
+            this._selectController.deselectOptions();
+        };
+        this._handleDropdownHidden = () => {
+            this._searchValue = '';
+        };
+        const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
+        $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
+    }
+    updated(props) {
+        super.updated(props);
+        if (this._$optionsList.value && !this._listBoxController)
+            this._listBoxController = new ListBoxKeyboardController({
+                host: this,
+                $list: this._$optionsList.value
+            });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        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();
+    }
+    _setupEvents() {
+        this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
+    }
+    _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.removeHTMLOption(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 `
+            <div>
+                <h-dropdown ${ref(this._$dropdown)} @dropdown.hidden=${this._handleDropdownHidden} name=${this.controlName}>
+                    <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
+
+                    <h-dropdown-content 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
+                                  ${ref(this._$search)}
+                                  .value=${this._searchValue}
+                                  @selectSearch.search=${this._handleSearch}
+                              ></h-select-search>`
+            : nothing}
+                        ${this.hasSlot(SELECT_SLOT_NAMES.content)
+            ? html `
+                                  <h-select-options ${ref(this._$optionsList)} @selectOptions.clicked=${this._handleOptionClicked}>
+                                      ${this.getSlot(SELECT_SLOT_NAMES.content)}
+                                  </h-select-options>
+                              `
+            : nothing}
+                        ${!this._selectController.visibleOptionsCount ? html `<p>brak wyników dla ${this._searchValue}</p>` : nothing}
+                        ${this.multiselect && this._selectController.selectedOptionsCount >= 1
+            ? html `
+                                  <section>
+                                      <button @click=${this._clearOptions}>clear</button>
+                                      <h-select-close-btn @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} />`))}
+            </div>
+        `;
+    }
+};
+HSelectControl._components = {
+    search: HSelectSearch,
+    icon: HIcon
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSelectControl.prototype, "controlName", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelectControl.prototype, "multiselect", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HSelectControl.prototype, "_searchValue", void 0);
+HSelectControl = __decorate([
+    phoenixCustomElement('h-select-control'),
+    __metadata("design:paramtypes", [])
+], HSelectControl);
+
+export { HSelectControl };
+//# sourceMappingURL=select_control.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,kDAAsD;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/control/select_control_constants.d.ts

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

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

@@ -0,0 +1,16 @@
+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;
+
+export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_EVENT_NAMES, SELECT_SLOT_NAMES };
+//# sourceMappingURL=select_control_constants.js.map

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

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

@@ -0,0 +1,9 @@
+import { SelectOption } from "./model/select_option";
+import { HOption } from "./components/select_option";
+import { HSelectOptions } from "./components/select_options";
+export declare class SelectControlUtils {
+    static createHTMLOption(option: SelectOption): HOption;
+    static syncHTMLOptionWithModel(option: SelectOption, $option: HOption): void;
+    static removeHTMLOption($options: HOption[], optionsValuesThatExists: string[]): Record<string, HOption>;
+    static appendHTMLOption($option: HOption, $list: HSelectOptions, position?: number): void;
+}