@shoper/phoenix_design_system 1.2.22 → 1.3.0

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

@@ -1,255 +1,260 @@
-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 { __decorate, __metadata } from "tslib";
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import '@phoenixRoot/components/form/select/components/option/select_option';
 import { property } from '@lit/reactive-element/decorators.js';
-import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME } from './components/select_components_constatns.js';
-import { Observer } from '../../../core/classes/observer/observer.js';
-import { HIcon } from '../../icon/icon.js';
-import { SELECT_TYPES, SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_RESIZE_DEBOUNCE_TIME } from './select_constants.js';
-import { observe } from '../../../directives/observable_directive.js';
-import { HSelectToggler } from './components/toggler/select_toggler.js';
-import { ContextProviderController } from '../../../core/context/context_provider_controller.js';
+import { nothing, html } from 'lit';
+import '@phoenixRoot/components/form/select/model/select_option';
+import { ContextProviderController } from '@phoenixRoot/core/context/context_provider_controller';
+import { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES, SELECT_TYPES } from '@phoenixRoot/components/form/select/select_constants';
+import '@phoenixRoot/core/classes/behavior_subject/behavior_subject';
 import { createRef, ref } from 'lit-html/directives/ref.js';
-import { HDropdownContent } from '../../dropdown/dropdown_content.js';
-import { HDropdownToggler } from '../../dropdown/dropdown_toggler.js';
-import debounce_1 from '../../../../../../external/lodash/debounce.js';
-import { HDropdown } from '../../dropdown/dropdown.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 { SelectOptionMapper } from './model/select_option_mapper.js';
-import { SelectControlUtils } from './select_utils.js';
-import { HSelectCloseBtn } from './components/select_close_btn.js';
-
-let HSelect = class HSelect extends PhoenixLightLitElement {
-    constructor() {
-        var _a;
-        super();
-        this.multiple = false;
-        this.opened = false;
-        this.offset = 2;
-        this.type = SELECT_TYPES.select;
-        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.getOption(event.detail);
-            if (!selectedOption)
-                return;
-            this._selectController.deselect(selectedOption);
-            this._dispatchChangeEvent();
-        };
-        this._updateOptionsView = (options) => {
-            if (options.length < Object.keys(this._$options).length)
-                this._removeHTMLOptions(options.map((option) => option.value));
-            options
-                .filter((option) => !option.inactive)
-                .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;
-                this.updateOptionAriaAttribute($option);
-            });
-        };
-        this._handleOptionClicked = (event) => {
-            this._selectOption(event.detail.$option.value);
-        };
-        this._handleOptionUpdated = ({ detail }) => {
-            const $option = detail.$option;
-            this._selectController.updateOption($option.value, {
-                inactive: $option.inactive,
-                hidden: $option.hidden
-            });
-        };
-        this._handleDropdownHidden = () => {
-            this._searchValue = '';
-            this.opened = false;
-        };
-        this._closeSelect = () => {
-            var _a;
-            if (!this.opened)
-                return;
-            (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
-        };
-        this._clearOptions = () => {
-            this._selectController.deselectAll();
-            this._dispatchChangeEvent();
-        };
-        this._dispatchChangeEvent = () => {
-            this.dispatchEvent(new Event('change', {
-                bubbles: true
-            }));
-        };
-        this._handleResize = debounce_1(() => {
-            this._closeSelect();
-        }, SELECT_RESIZE_DEBOUNCE_TIME);
-        const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
-        $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
-        this.$placeholder = (_a = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
-        if (this.multiple)
-            this.type = SELECT_TYPES.multiple;
-    }
-    get selectedIndex() {
-        const selectedOptions = this._selectController.selectedOptions$.getValue();
-        if (!selectedOptions || selectedOptions.length === 0)
-            return -1;
-        const htmlOptions = Object.values(this._$options);
-        return this.multiple
-            ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
-            : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
-    }
-    set selectedIndex(index) {
-        const option = Object.values(this._$options).filter(($option) => !$option.hidden)[index];
-        option ? this._selectOption(option.value) : this._selectController.deselectAll();
-        Object.values(this._$options).forEach(($option) => this.updateOptionAriaAttribute($option));
-    }
-    get selectedOptions() {
-        var _a;
-        const selectedOptions = (_a = this._selectController.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
-        return selectedOptions.filter((option) => option.selected).map((option) => this._$options[option.value]);
-    }
-    get name() {
-        return this.controlName;
-    }
-    get id() {
-        return this.controlId;
-    }
-    get options() {
-        return Object.values(this._$options);
-    }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('opened')) {
-            if (this.opened) {
-                this.classList.add(SELECT_CSS_CLASSES.selectOpened);
-                this._focusElementAfterSelectOpened();
-            }
-            else {
-                this.classList.remove(SELECT_CSS_CLASSES.selectOpened);
-            }
-        }
-        if (this._$optionsList.value && !this._listBoxController)
-            this._listBoxController = new ListBoxKeyboardController({
-                host: this,
-                $list: this._$optionsList.value
-            });
-    }
-    _focusElementAfterSelectOpened() {
-        var _a, _b;
-        const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
-        $searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.classList.add(SELECT_CSS_CLASSES.select);
-        this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
-        this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
-        this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
-        const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
-        this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
-        this._selectController.options$.subscribe(this._optionsObserver);
-        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
-            };
-        }, {});
-        const options = $options.map(SelectOptionMapper.toModel);
-        this._selectController.options$.notify(options);
-        if (options.length)
-            this._selectController.selectedOptions$.notify(options.filter((option) => option.selected));
-        this._setupEvents();
-    }
-    attributeChangedCallback(name, _old, value) {
-        super.attributeChangedCallback(name, _old, value);
-        switch (name) {
-            case 'error':
-                this.error ? this.classList.add(SELECT_CSS_CLASSES.selectError) : this.classList.remove(SELECT_CSS_CLASSES.selectError);
-                break;
-            case 'disabled':
-                this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
-        }
-    }
-    _setupEvents() {
-        this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
-        this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
-        window.addEventListener('resize', this._handleResize);
-    }
-    _appendNewHTMLOption(option, position) {
-        const $list = this._$optionsList.value;
-        if (!$list)
-            return;
-        const { value, selected } = option;
-        const $option = SelectControlUtils.createHTMLOption(option);
-        if (selected)
-            this.updateOptionAriaAttribute($option);
-        this._$options[value] = $option;
-        SelectControlUtils.appendHTMLOption($option, $list, position);
-    }
-    updateOptionAriaAttribute($option) {
-        !$option.selected
-            ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
-            : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
-    }
-    _removeHTMLOptions(optionsValues) {
-        this._$options = SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
-    }
-    _selectOption(value) {
-        const option = this._selectController.getOption(value);
-        if (!option)
-            return;
-        this._selectController.toggle(option);
-        if (!this.multiple)
-            this._closeSelect();
-        this._dispatchChangeEvent();
-    }
-    _handleSearch({ detail }) {
-        this._searchValue = detail;
-    }
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('_searchValue'))
-            this._selectController.filter(this._searchValue);
-    }
-    add(option, position) {
-        this._selectController.add(option, position);
-    }
-    removeOption(optionValue) {
-        this._selectController.remove(optionValue);
-    }
-    replace(options) {
-        this._selectController.replace(options);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._selectController.options$.unsubscribe(this._optionsObserver);
-        this._$options = {};
-        window.removeEventListener('resize', this._handleResize);
-    }
-    _getClonedPlaceholderElement() {
-        return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
-    }
-    _searchNoResult() {
-        return Boolean(!this._selectController.visibleOptionsCount && Object.keys(this._$options).length);
-    }
-    render() {
-        var _a;
-        const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
+import { HDropdown } from '@phoenixRoot/components/dropdown/dropdown';
+import { observe } from '@phoenixRoot/directives/observable_directive';
+import { MultiSelectController } from '@phoenixRoot/components/form/select/controllers/multi_select_controller';
+import { SelectController } from '@phoenixRoot/components/form/select/controllers/select_controller';
+import '@phoenixRoot/components/form/select/controllers/select_controllers_types';
+import { HSelectSearch } from '@phoenixRoot/components/form/select/components/search/select_search';
+import { Observer } from '@phoenixRoot/core/classes/observer/observer';
+import { state } from 'lit/decorators';
+import { ListBoxKeyboardController } from '@phoenixRoot/controllers/list_box_controller/list_box_keyboard_controller';
+import '@phoenixRoot/components/form/select/components/select_options';
+import { HIcon } from '@phoenixRoot/components/icon/icon';
+import { SelectOptionMapper } from '@phoenixRoot/components/form/select/model/select_option_mapper';
+import '@phoenixRoot/components/form/select/components/select_components_types';
+import { SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME, SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '@phoenixRoot/components/form/select/components/select_components_constatns';
+import { SelectControlUtils } from '@phoenixRoot/components/form/select/select_utils';
+import { HSelectCloseBtn } from '@phoenixRoot/components/form/select/components/select_close_btn';
+import { debounce } from 'lodash';
+import { HSelectToggler } from '@phoenixRoot/components/form/select/components/toggler/select_toggler';
+import { HDropdownContent } from '@phoenixRoot/components/dropdown/dropdown_content';
+import { HDropdownToggler } from '@phoenixRoot/components/dropdown/dropdown_toggler';
+let HSelect = class HSelect extends PhoenixLightLitElement {
+    get selectedIndex() {
+        const selectedOptions = this._selectController.selectedOptions$.getValue();
+        if (!selectedOptions || selectedOptions.length === 0)
+            return -1;
+        const htmlOptions = Object.values(this._$options);
+        return this.multiple
+            ? SelectControlUtils.getFirstIndexSelectedOption(htmlOptions)
+            : SelectControlUtils.getLastIndexOfSelectedOption(htmlOptions);
+    }
+    set selectedIndex(index) {
+        const option = Object.values(this._$options).filter(($option) => !$option.hidden)[index];
+        option ? this._selectOption(option.value) : this._selectController.deselectAll();
+        Object.values(this._$options).forEach(($option) => this.updateOptionAriaAttribute($option));
+    }
+    get selectedOptions() {
+        var _a;
+        const selectedOptions = (_a = this._selectController.selectedOptions$.getValue()) !== null && _a !== void 0 ? _a : [];
+        return selectedOptions.filter((option) => option.selected).map((option) => this._$options[option.value]);
+    }
+    get name() {
+        return this.controlName;
+    }
+    get id() {
+        return this.controlId;
+    }
+    get options() {
+        return Object.values(this._$options);
+    }
+    constructor() {
+        var _a;
+        super();
+        this.multiple = false;
+        this.opened = false;
+        this.offset = 2;
+        this.type = SELECT_TYPES.select;
+        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.getOption(event.detail);
+            if (!selectedOption)
+                return;
+            this._selectController.deselect(selectedOption);
+            this._dispatchChangeEvent();
+        };
+        this._updateOptionsView = (options) => {
+            if (options.length < Object.keys(this._$options).length)
+                this._removeHTMLOptions(options.map((option) => option.value));
+            options
+                .filter((option) => !option.inactive)
+                .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;
+                this.updateOptionAriaAttribute($option);
+            });
+        };
+        this._handleOptionClicked = (event) => {
+            this._selectOption(event.detail.$option.value);
+        };
+        this._handleOptionUpdated = ({ detail }) => {
+            const $option = detail.$option;
+            this._selectController.updateOption($option.value, {
+                inactive: $option.inactive,
+                hidden: $option.hidden
+            });
+        };
+        this._handleDropdownHidden = () => {
+            this._searchValue = '';
+            this.opened = false;
+        };
+        this._closeSelect = () => {
+            var _a;
+            if (!this.opened)
+                return;
+            (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
+        };
+        this._clearOptions = () => {
+            this._selectController.deselectAll();
+            this._dispatchChangeEvent();
+        };
+        this._dispatchChangeEvent = () => {
+            this.dispatchEvent(new Event('change', {
+                bubbles: true
+            }));
+        };
+        this._handleResize = debounce(() => {
+            this._closeSelect();
+        }, SELECT_RESIZE_DEBOUNCE_TIME);
+        const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
+        $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
+        this.$placeholder = (_a = this.querySelector(`[slot="${SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
+        if (this.multiple)
+            this.type = SELECT_TYPES.multiple;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('opened')) {
+            if (this.opened) {
+                this.classList.add(SELECT_CSS_CLASSES.selectOpened);
+                this._focusElementAfterSelectOpened();
+            }
+            else {
+                this.classList.remove(SELECT_CSS_CLASSES.selectOpened);
+            }
+        }
+        if (this._$optionsList.value && !this._listBoxController)
+            this._listBoxController = new ListBoxKeyboardController({
+                host: this,
+                $list: this._$optionsList.value
+            });
+    }
+    _focusElementAfterSelectOpened() {
+        var _a, _b;
+        const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
+        $searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(SELECT_CSS_CLASSES.select);
+        this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
+        this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
+        this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
+        const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
+        this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
+        this._selectController.options$.subscribe(this._optionsObserver);
+        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
+            };
+        }, {});
+        const options = $options.map(SelectOptionMapper.toModel);
+        this._selectController.options$.notify(options);
+        if (options.length)
+            this._selectController.selectedOptions$.notify(options.filter((option) => option.selected));
+        this._setupEvents();
+    }
+    attributeChangedCallback(name, _old, value) {
+        super.attributeChangedCallback(name, _old, value);
+        switch (name) {
+            case 'error':
+                this.error ? this.classList.add(SELECT_CSS_CLASSES.selectError) : this.classList.remove(SELECT_CSS_CLASSES.selectError);
+                break;
+            case 'disabled':
+                this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
+        }
+    }
+    _setupEvents() {
+        this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
+        this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
+        window.addEventListener('resize', this._handleResize);
+    }
+    _appendNewHTMLOption(option, position) {
+        const $list = this._$optionsList.value;
+        if (!$list)
+            return;
+        const { value, selected } = option;
+        const $option = SelectControlUtils.createHTMLOption(option);
+        if (selected)
+            this.updateOptionAriaAttribute($option);
+        this._$options[value] = $option;
+        SelectControlUtils.appendHTMLOption($option, $list, position);
+    }
+    updateOptionAriaAttribute($option) {
+        !$option.selected
+            ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
+            : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+    }
+    _removeHTMLOptions(optionsValues) {
+        this._$options = SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
+    }
+    _selectOption(value) {
+        const option = this._selectController.getOption(value);
+        if (!option)
+            return;
+        this._selectController.toggle(option);
+        if (!this.multiple)
+            this._closeSelect();
+        this._dispatchChangeEvent();
+    }
+    _handleSearch({ detail }) {
+        this._searchValue = detail;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('_searchValue'))
+            this._selectController.filter(this._searchValue);
+    }
+    add(option, position) {
+        this._selectController.add(option, position);
+    }
+    removeOption(optionValue) {
+        this._selectController.remove(optionValue);
+    }
+    replace(options) {
+        this._selectController.replace(options);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._selectController.options$.unsubscribe(this._optionsObserver);
+        this._$options = {};
+        window.removeEventListener('resize', this._handleResize);
+    }
+    _getClonedPlaceholderElement() {
+        return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
+    }
+    _searchNoResult() {
+        return Boolean(!this._selectController.visibleOptionsCount && Object.keys(this._$options).length);
+    }
+    render() {
+        var _a;
+        const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
         return html `
             <h-dropdown
                 ${ref(this._$dropdown)}
@@ -273,19 +278,19 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
 
                     <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
 
-                    ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
+                    ${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>`
+                          ></h-select-search>`
             : nothing}
-                    ${this.hasSlot(SELECT_SLOT_NAMES.content)
+                    ${this.hasSlot(SELECT_SLOT_NAMES.content)
             ? html `
                               <h-options
-                                  class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
-                ? SELECT_CSS_CLASSES.selectOptionsEmpty
+                                  class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
+                ? SELECT_CSS_CLASSES.selectOptionsEmpty
                 : ''}"
                                   ${ref(this._$optionsList)}
                                   @selectOptions.clicked=${this._handleOptionClicked}
@@ -293,16 +298,16 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                               >
                                   ${this.getSlot(SELECT_SLOT_NAMES.content)}
                               </h-options>
-                          `
+                          `
             : nothing}
-                    ${this._searchNoResult()
+                    ${this._searchNoResult()
             ? html ` <div>
                               <p class=${SELECT_CSS_CLASSES.selectNoResult}>
                                   Brak wyników dla: <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
                               </p>
-                          </div>`
+                          </div>`
             : nothing}
-                    ${this.multiple && this._selectController.selectedOptionsCount >= 1
+                    ${this.multiple && this._selectController.selectedOptionsCount >= 1
             ? html `
                               <section class=${SELECT_CSS_CLASSES.selectFooter}>
                                   <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>Reset</button>
@@ -310,68 +315,67 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                                       ><span slot=${SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}>Choose</span>
                                   </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,
-    closeBtn: HSelectCloseBtn,
-    toggler: HSelectToggler,
-    dropdown: HDropdown,
-    dropdownContent: HDropdownContent,
-    dropdownToggler: HDropdownToggler
-};
-__decorate([
-    property({ type: String, attribute: 'control-name' }),
-    __metadata("design:type", String)
-], HSelect.prototype, "controlName", void 0);
-__decorate([
-    property({ type: String, attribute: 'control-id' }),
-    __metadata("design:type", String)
-], HSelect.prototype, "controlId", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HSelect.prototype, "multiple", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Boolean)
-], HSelect.prototype, "opened", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Number)
-], HSelect.prototype, "offset", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HSelect.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HSelect.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], HSelect.prototype, "type", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HSelect.prototype, "required", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], HSelect.prototype, "_searchValue", void 0);
-HSelect = __decorate([
-    phoenixCustomElement('h-select'),
-    __metadata("design:paramtypes", [])
+        `;
+    }
+};
+HSelect._components = {
+    search: HSelectSearch,
+    icon: HIcon,
+    closeBtn: HSelectCloseBtn,
+    toggler: HSelectToggler,
+    dropdown: HDropdown,
+    dropdownContent: HDropdownContent,
+    dropdownToggler: HDropdownToggler
+};
+__decorate([
+    property({ type: String, attribute: 'control-name' }),
+    __metadata("design:type", String)
+], HSelect.prototype, "controlName", void 0);
+__decorate([
+    property({ type: String, attribute: 'control-id' }),
+    __metadata("design:type", String)
+], HSelect.prototype, "controlId", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "opened", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], HSelect.prototype, "offset", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSelect.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "required", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], HSelect.prototype, "_searchValue", void 0);
+HSelect = __decorate([
+    phoenixCustomElement('h-select'),
+    __metadata("design:paramtypes", [])
 ], HSelect);
-
 export { HSelect };
-//# sourceMappingURL=select.js.map
+//# sourceMappingURL=select.js.map