npm - @shoper/phoenix_design_system - Versions diffs - 1.1.0-1 → 1.1.0-11 - Mend

@shoper/phoenix_design_system 1.1.0-1 → 1.1.0-11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js CHANGED Viewed

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
 var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
 var select_components_constatns = require('../select_components_constatns.js');
 var btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
 var select_option_constants = require('./select_option_constants.js');
+var litHtml = require('lit-html');
 exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -34,6 +36,9 @@ exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLi
     _setupEvents() {
         this.addEventListener('click', this._dispatchClickedEvent);
     }
+    render() {
+        return litHtml.html ` ${this.getSlot('content')} ${this.selected ? litHtml.html `<h-icon icon-name="icon-check"></h-icon>` : lit.nothing} `;
+    }
 };
 tslib_es6.__decorate([
     decorators_js.property({ type: String, reflect: true }),

package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/form/select/components/option/select_option_content.js ADDED Viewed

@@ -0,0 +1,21 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
+var select_components_constatns = require('../select_components_constatns.js');
+var select_option_constants = require('./select_option_constants.js');
+exports.HOptionContent = class HOptionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('slot', 'content');
+        this.classList.add(select_option_constants.SELECT_OPTION_CSS_CLASSES.selectOptionContent);
+    }
+};
+exports.HOptionContent = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent)
+], exports.HOptionContent);
+//# sourceMappingURL=select_option_content.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option_content.js.map ADDED Viewed

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

package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js CHANGED Viewed

@@ -23,20 +23,22 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
             }));
         }, 200);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
+    }
     render() {
         return lit.html `
-            <div class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch}>
-                <h-icon icon-name="icon-search" class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
-                <input
-                    class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
-                    type="text"
-                    role="search"
-                    .value=${this.value}
-                    aria-autocomplete="list"
-                    autocomplete="false"
-                    @input=${this._handleInputChange}
-                />
-            </div>
+            <h-icon icon-name="icon-search" class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
+            <input
+                class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
+                type="text"
+                role="search"
+                .value=${this.value}
+                aria-autocomplete="list"
+                autocomplete="false"
+                @input=${this._handleInputChange}
+            />
         `;
     }
 };

package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.js.map CHANGED Viewed

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

package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.js CHANGED Viewed

@@ -11,16 +11,20 @@ const SELECT_OPTIONS_EVENT_NAMES = {
 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-select-options',
+    options: 'h-options',
     optionContent: 'h-option-content',
-    value: 'h-select-value',
+    toggler: 'h-select-toggler',
     closeBtn: 'h-select-close-btn',
     search: 'h-select-search'
 };
 const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';
+exports.SELECT_CLOSE_BTN_EVENT_NAMES = SELECT_CLOSE_BTN_EVENT_NAMES;
 exports.SELECT_INPUT_PLACEHOLDER_SLOT_NAME = SELECT_INPUT_PLACEHOLDER_SLOT_NAME;
 exports.SELECT_OPTIONS_EVENT_NAMES = SELECT_OPTIONS_EVENT_NAMES;
 exports.SELECT_OPTION_EVENT_NAMES = SELECT_OPTION_EVENT_NAMES;

package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.js.map CHANGED Viewed

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

package/build/cjs/packages/phoenix/src/components/form/select/components/select_options.js CHANGED Viewed

@@ -8,7 +8,7 @@ var phoenix_light_lit_element = require('../../../../core/phoenix_light_lit_elem
 var phoenix_custom_element = require('../../../../core/decorators/phoenix_custom_element.js');
 var select_components_constatns = require('./select_components_constatns.js');
-exports.HSelectOptions = class HSelectOptions extends phoenix_light_lit_element.PhoenixLightLitElement {
+exports.HOptions = class HOptions extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
         this._dispatchClickedEvent = ({ detail }) => {
@@ -24,8 +24,8 @@ exports.HSelectOptions = class HSelectOptions extends phoenix_light_lit_element.
         this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
     }
 };
-exports.HSelectOptions = tslib_es6.__decorate([
+exports.HOptions = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.options),
     tslib_es6.__metadata("design:paramtypes", [])
-], exports.HSelectOptions);
+], exports.HOptions);
 //# sourceMappingURL=select_options.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/{value/select_value.js → toggler/select_toggler.js} RENAMED Viewed

@@ -11,9 +11,9 @@ var litHtml = require('lit-html');
 var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
 var select_constants = require('../../select_constants.js');
 var observable_directive = require('../../../../../directives/observable_directive.js');
-var select_value_constants = require('./select_value_constants.js');
+var select_toggler_constants = require('./select_toggler_constants.js');
-exports.HSelectValue = class HSelectValue extends phoenix_light_lit_element.PhoenixLightLitElement {
+exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
@@ -28,6 +28,7 @@ exports.HSelectValue = class HSelectValue extends phoenix_light_lit_element.Phoe
         super.connectedCallback();
         this.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.input);
         this.setAttribute('role', 'textbox');
+        this.classList.add(select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectToggler);
         this._subscribeObserver();
     }
     async _subscribeObserver() {
@@ -38,32 +39,36 @@ exports.HSelectValue = class HSelectValue extends phoenix_light_lit_element.Phoe
         if (!this.selectedOptions$)
             return;
         return litHtml.html `
-            <div class=${select_value_constants.SELECT_VALUE_CSS_CLASSES.selectValue}>
+            <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
                 ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
             var _a;
             if (!selectOptions.length)
                 return litHtml.html `${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}`;
             return this.isMultiselect
-                ? litHtml.html `${selectOptions.map((option) => litHtml.html `<h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
-                                  ${option.content}
+                ? litHtml.html `${selectOptions.map((option) => litHtml.html `<li>
+                                  <h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
+                                      ${option.content}
-                                  <h-tag-remove-button>x</h-tag-remove-button>
-                              </h-tag>`)}`
-                : selectOptions[0].content;
+                                      <h-tag-remove-button></h-tag-remove-button>
+                                  </h-tag>
+                              </li>`)}`
+                : litHtml.html `<li>${selectOptions[0].content}</li>`;
         })}
-            </div>
+            </ul>
+            <h-icon icon-name="icon-chevron-down"></h-icon>
         `;
     }
 };
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Object)
-], exports.HSelectValue.prototype, "selectedOptions$", void 0);
+], exports.HSelectToggler.prototype, "selectedOptions$", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Boolean)
-], exports.HSelectValue.prototype, "isMultiselect", void 0);
-exports.HSelectValue = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.value)
-], exports.HSelectValue);
-//# sourceMappingURL=select_value.js.map
+], exports.HSelectToggler.prototype, "isMultiselect", void 0);
+exports.HSelectToggler = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.toggler)
+], exports.HSelectToggler);
+//# sourceMappingURL=select_toggler.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/{value/select_value.js.map → toggler/select_toggler.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_constants.js ADDED Viewed

@@ -0,0 +1,12 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const baseClass = 'select-toggler';
+const SELECT_TOGGLER_CSS_CLASSES = {
+    selectToggler: baseClass,
+    selectTogglerValues: `${baseClass}__values`
+};
+exports.SELECT_TOGGLER_CSS_CLASSES = SELECT_TOGGLER_CSS_CLASSES;
+//# sourceMappingURL=select_toggler_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/{value/select_value_constants.js.map → toggler/select_toggler_constants.js.map} RENAMED Viewed

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

package/build/cjs/packages/phoenix/src/components/form/select/select.js CHANGED Viewed

@@ -41,12 +41,13 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             this._selectController.deselectOption(selectedOption);
         };
         this._updateOptionsView = (options) => {
-            // if (options.length < Object.keys(this._$options).length) this._removeHTMLOptions(options.map((option: SelectOption) => option.value));
+            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);
+                    this._appendNewHTMLOption(option, index + 1);
                     return;
                 }
                 select_utils.SelectControlUtils.syncHTMLOptionWithModel(option, $option);
@@ -66,14 +67,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._closeSelect = () => {
             var _a;
             (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
+            this._searchValue = '';
+            this.opened = false;
         };
         this._clearOptions = () => {
             this._selectController.deselectOptions();
         };
-        this._handleDropdownHidden = () => {
-            this._searchValue = '';
-            this.opened = false;
-        };
         const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
     }
@@ -113,6 +112,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     }
     _setupEvents() {
         this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
+        this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
     }
     _appendNewHTMLOption(option, position) {
         const $list = this._$optionsList.value;
@@ -152,12 +152,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             <h-dropdown
                 ${ref_js.ref(this._$dropdown)}
                 @dropdown.showed=${() => (this.opened = true)}
-                @dropdown.hidden=${this._handleDropdownHidden}
+                @dropdown.hidden=${this._closeSelect}
                 name=${this.controlName}
             >
-                <h-dropdown-toggler name=${this.controlName} class="${select_constants.SELECT_CSS_CLASSES.selectControl}">
+                <h-dropdown-toggler name=${this.controlName}">
                     ${this.getSlot(select_constants.SELECT_SLOT_NAMES.input)}
-                    <h-icon icon-name="icon-chevron-down"></h-icon>
                 </h-dropdown-toggler>
                 <h-dropdown-content class=${select_constants.SELECT_CSS_CLASSES.selectContent} ${ref_js.ref(this._$dropdownContent)} name=${this.controlName}>
@@ -165,31 +164,37 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                     ${options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
             ? lit.html `<h-select-search
-                              class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
-                              ${ref_js.ref(this._$search)}
-                              .value=${this._searchValue}
-                              @selectSearch.search=${this._handleSearch}
-                          ></h-select-search>`
+                                  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
+                                  ${ref_js.ref(this._$search)}
+                                  .value=${this._searchValue}
+                                  @selectSearch.search=${this._handleSearch}
+                              ></h-select-search>`
             : lit.nothing}
                     ${this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
             ? lit.html `
-                              <h-select-options
-                                  class=${select_constants.SELECT_CSS_CLASSES.selectOptions}
-                                  ${ref_js.ref(this._$optionsList)}
-                                  @selectOptions.clicked=${this._handleOptionClicked}
-                              >
-                                  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
-                              </h-select-options>
-                          `
+                                  <h-options
+                                      class=${select_constants.SELECT_CSS_CLASSES.selectOptions}
+                                      ${ref_js.ref(this._$optionsList)}
+                                      @selectOptions.clicked=${this._handleOptionClicked}
+                                  >
+                                      ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
+                                  </h-options>
+                              `
+            : lit.nothing}
+                    ${!this._selectController.visibleOptionsCount
+            ? lit.html `<div>
+                                  <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
+                                      brak wyników dla <em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
+                                  </p>
+                              </div>`
             : lit.nothing}
-                    ${!this._selectController.visibleOptionsCount ? lit.html `<p>brak wyników dla ${this._searchValue}</p>` : lit.nothing}
                     ${this.multiselect && this._selectController.selectedOptionsCount >= 1
             ? lit.html `
-                              <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
-                                  <button @click=${this._clearOptions}>clear</button>
-                                  <h-select-close-btn @click=${this._closeSelect}>ok</h-select-close-btn>
-                              </section>
-                          `
+                                  <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
+                                      <button class="btn btn_secondary btn_s" @click=${this._clearOptions}>clear</button>
+                                      <h-select-close-btn class="btn btn_primary btn_s" @click=${this._closeSelect}>ok</h-select-close-btn>
+                                  </section>
+                              `
             : lit.nothing}
                 </h-dropdown-content>
             </h-dropdown>

package/build/cjs/packages/phoenix/src/components/form/select/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/components/form/select/select_constants.js CHANGED Viewed

@@ -19,12 +19,12 @@ const baseSelectClass = 'select';
 const SELECT_CSS_CLASSES = {
     select: baseSelectClass,
     selectOpened: `${baseSelectClass}_opened`,
-    selectControl: `${baseSelectClass}__control`,
-    selectInput: `${baseSelectClass}__value`,
     selectSearch: `${baseSelectClass}__search`,
     selectOptions: `${baseSelectClass}__options`,
     selectContent: `${baseSelectClass}__content`,
-    selectFooter: `${baseSelectClass}__footer`
+    selectFooter: `${baseSelectClass}__footer`,
+    selectNoResult: `${baseSelectClass}__no-result`,
+    selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
 };
 exports.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;

package/build/cjs/packages/phoenix/src/components/icon/icon.js CHANGED Viewed

@@ -22,6 +22,7 @@ exports.HIcon = HIcon_1 = class HIcon extends phoenix_light_lit_element.PhoenixL
     connectedCallback() {
         var _a;
         super.connectedCallback();
+        this.classList.add(icon_constants.ICON_CSS_CLASSES.icon);
         this._cssClasses = index['default'](icon_constants.ICON_CSS_CLASSES.icon, {
             [icon_constants.ICON_SIZES_CSS_CLASS_MAP[(_a = this.size) !== null && _a !== void 0 ? _a : '']]: Boolean(this.size),
             [icon_constants.ICON_CSS_CLASSES.iconFilled]: this.filled,

package/build/cjs/packages/phoenix/src/components/icon/icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA,oBAAoB,6CAAiD;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA,oBAAoB,6CAAiD;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/phoenix/src/index.js CHANGED Viewed

@@ -7,9 +7,10 @@ var phoenix_light_lit_element = require('./core/phoenix_light_lit_element/phoeni
 var keystrokes_controller = require('./controllers/keystrokes_controller/keystrokes_controller.js');
 var btn_controller = require('./controllers/btn_controller/btn_controller.js');
 var select_option = require('./components/form/select/components/option/select_option.js');
+var select_option_content = require('./components/form/select/components/option/select_option_content.js');
 var select_options = require('./components/form/select/components/select_options.js');
 var context_consumer_controller = require('./core/context/context_consumer_controller.js');
-var select_value = require('./components/form/select/components/value/select_value.js');
+var select_toggler = require('./components/form/select/components/toggler/select_toggler.js');
 var context_provider_controller = require('./core/context/context_provider_controller.js');
 var portal = require('./components/portal/portal.js');
 var portal_target = require('./components/portal/portal_target.js');
@@ -95,17 +96,23 @@ Object.defineProperty(exports, 'HOption', {
 		return select_option.HOption;
 	}
 });
-Object.defineProperty(exports, 'HSelectOptions', {
+Object.defineProperty(exports, 'HOptionContent', {
 	enumerable: true,
 	get: function () {
-		return select_options.HSelectOptions;
+		return select_option_content.HOptionContent;
+	}
+});
+Object.defineProperty(exports, 'HOptions', {
+	enumerable: true,
+	get: function () {
+		return select_options.HOptions;
 	}
 });
 exports.ContextConsumerController = context_consumer_controller.ContextConsumerController;
-Object.defineProperty(exports, 'HSelectValue', {
+Object.defineProperty(exports, 'HSelectToggler', {
 	enumerable: true,
 	get: function () {
-		return select_value.HSelectValue;
+		return select_toggler.HSelectToggler;
 	}
 });
 exports.ContextProviderController = context_provider_controller.ContextProviderController;

package/build/cjs/packages/phoenix/src/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { TemplateResult } from 'lit';
 export declare class HOption extends PhoenixLightLitElement {
     value: string;
     selected: boolean;
@@ -8,4 +9,5 @@ export declare class HOption extends PhoenixLightLitElement {
     connectedCallback(): void;
     private _setupEvents;
     private _dispatchClickedEvent;
+    protected render(): TemplateResult;
 }

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

@@ -1,10 +1,12 @@
 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() {
@@ -30,6 +32,9 @@ let HOption = class HOption extends PhoenixLightLitElement {
     _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 }),

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

	@@ -1 +1 @@
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;"}
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_content.d.ts CHANGED Viewed

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

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

@@ -1,16 +1,19 @@
-import { __decorate } from "tslib";
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
-import { SELECT_RELATED_COMPONENTS_NAMES } from '@phoenixRoot/components/form/select/components/select_components_constatns';
-import { SELECT_OPTION_CSS_CLASSES } from '@phoenixRoot/components/form/select/components/option/select_option_constants';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-let HSelectOptionContent = class HSelectOptionContent extends PhoenixLightLitElement {
-    connectedCallback() {
-        super.connectedCallback();
-        this.classList.add(SELECT_OPTION_CSS_CLASSES.selectOptionContent);
-    }
-};
-HSelectOptionContent = __decorate([
-    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.optionContent)
-], HSelectOptionContent);
-export { HSelectOptionContent };
-//# sourceMappingURL=select_option_content.js.map
+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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":~~"select_option_content.js"~~,"~~sourceRoot~~":"","~~sources~~":[~~"../../../../../../../../../../src/components/form/select/components/option/select_option_content.ts"~~],"names":[],"mappings":";AAAA,~~OAAO~~,~~EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC~~;~~AAC3F,OAAO,EAAE,+BAA+B,EAAE,MAAM,4EAA4E,CAAC~~;~~AAC7H,OAAO,EAAE,yBAAyB,EAAE,MAAM,+EAA+E,CAAC~~;~~AAC1H,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC~~;~~AAG/G,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,sBAAsB~~;~~IACrD,iBAAiB~~;~~QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC~~;~~QAE1B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,mBAAmB,CAAC,CAAC~~;~~IACtE,CAAC~~;~~CACJ,CAAA~~;~~AANY,oBAAoB~~;~~IADhC,oBAAoB,CAAC,+BAA+B,CAAC,aAAa,CAAC~~;~~GACvD,oBAAoB,CAMhC~~;~~SANY,oBAAoB~~"}
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 CHANGED Viewed

@@ -2,6 +2,7 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
 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 CHANGED Viewed

@@ -19,20 +19,22 @@ let HSelectSearch = class HSelectSearch extends PhoenixLightLitElement {
             }));
         }, 200);
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(SELECT_SEARCH_CSS_CLASSES.selectSearch);
+    }
     render() {
         return html `
-            <div class=${SELECT_SEARCH_CSS_CLASSES.selectSearch}>
-                <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}
-                />
-            </div>
+            <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}
+            />
         `;
     }
 };

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

	@@ -1 +1 @@
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;"}
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/select_close_btn.d.ts CHANGED Viewed

@@ -1,6 +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 CHANGED Viewed

@@ -2,18 +2,24 @@ 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_BUTTON_CONTENT_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '@phoenixRoot/components/form/select/components/select_components_constatns';
+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('role', 'presentation');
+        this.setAttribute('aria-label', 'close select');
+        this._btnController = new BtnController(this, this._dispatchCloseEvent);
     }
     render() {
-        return html `<button aria-label="close select">
-            ${this.hasSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
+        return html `${this.hasSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
             ? this.getSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
-            : html `<icon iconName="icon-x"></icon>`}
-        </button> `;
+            : html `<icon iconName="icon-x"></icon>`} `;
     }
 };
 SelectCloseBtn = __decorate([

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

	@@ -1 +1 @@
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,qCAAqC,EACrC,+BAA+B,EAClC,MAAM,4EAA4E,CAAC;~~AAGpF~~,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,sBAAsB;~~IAC~~/C,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,~~MAAM~~,EAAE,cAAc,CAAC,CAAC;~~IAC9C~~,CAAC;~~IAEM~~,MAAM;QACT,OAAO,IAAI,CAAA~~;cACL~~,IAAI,CAAC,OAAO,CAAC,qCAAqC,CAAC;~~YACjD~~,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,qCAAqC,CAAC;YACrD,CAAC,CAAC,IAAI,CAAA,iCAAiC~~;mBACpC~~,CAAC;~~IAChB~~,CAAC;CACJ,CAAA;~~AAdY~~,cAAc;IAD1B,oBAAoB,CAAC,+BAA+B,CAAC,QAAQ,CAAC;GAClD,cAAc,~~CAc1B~~;~~SAdY~~,cAAc"}
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 CHANGED Viewed

@@ -7,11 +7,14 @@ export declare const SELECT_OPTIONS_EVENT_NAMES: {
 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-select-options";
+    readonly options: "h-options";
     readonly optionContent: "h-option-content";
-    readonly value: "h-select-value";
+    readonly toggler: "h-select-toggler";
     readonly closeBtn: "h-select-close-btn";
     readonly search: "h-select-search";
 };

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

@@ -7,15 +7,18 @@ const SELECT_OPTIONS_EVENT_NAMES = {
 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-select-options',
+    options: 'h-options',
     optionContent: 'h-option-content',
-    value: 'h-select-value',
+    toggler: 'h-select-toggler',
     closeBtn: 'h-select-close-btn',
     search: 'h-select-search'
 };
 const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';
-export { SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_OPTIONS_EVENT_NAMES, SELECT_OPTION_EVENT_NAMES, SELECT_RELATED_COMPONENTS_NAMES, SELECT_SEARCH_EVENT_NAMES };
+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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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_options.d.ts CHANGED Viewed

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

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

@@ -4,7 +4,7 @@ import { PhoenixLightLitElement } from '../../../../core/phoenix_light_lit_eleme
 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 HSelectOptions = class HSelectOptions extends PhoenixLightLitElement {
+let HOptions = class HOptions extends PhoenixLightLitElement {
     constructor() {
         super();
         this._dispatchClickedEvent = ({ detail }) => {
@@ -20,10 +20,10 @@ let HSelectOptions = class HSelectOptions extends PhoenixLightLitElement {
         this.addEventListener(SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
     }
 };
-HSelectOptions = __decorate([
+HOptions = __decorate([
     phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.options),
     __metadata("design:paramtypes", [])
-], HSelectOptions);
+], HOptions);
-export { HSelectOptions };
+export { HOptions };
 //# sourceMappingURL=select_options.js.map

package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value.d.ts → toggler/select_toggler.d.ts} RENAMED Viewed

@@ -2,7 +2,7 @@ import { PhoenixLightLitElement } from "../../../../../core/phoenix_light_lit_el
 import { SelectOption } from "../../model/select_option";
 import { TemplateResult } from 'lit-html';
 import { BehaviorSubject } from "../../../../../core/classes/behavior_subject/behavior_subject";
-export declare class HSelectValue extends PhoenixLightLitElement {
+export declare class HSelectToggler extends PhoenixLightLitElement {
     selectedOptions$: BehaviorSubject<SelectOption[]> | null;
     isMultiselect: boolean;
     private _contextConsumer;

package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value.js → toggler/select_toggler.js} RENAMED Viewed

@@ -7,9 +7,9 @@ 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_VALUE_CSS_CLASSES } from './select_value_constants.js';
+import { SELECT_TOGGLER_CSS_CLASSES } from './select_toggler_constants.js';
-let HSelectValue = class HSelectValue extends PhoenixLightLitElement {
+let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this._contextConsumer = new ContextConsumerController(this);
@@ -24,6 +24,7 @@ let HSelectValue = class HSelectValue extends PhoenixLightLitElement {
         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() {
@@ -34,34 +35,38 @@ let HSelectValue = class HSelectValue extends PhoenixLightLitElement {
         if (!this.selectedOptions$)
             return;
         return html `
-            <div class=${SELECT_VALUE_CSS_CLASSES.selectValue}>
+            <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 `<h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
-                                  ${option.content}
+                ? html `${selectOptions.map((option) => html `<li>
+                                  <h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
+                                      ${option.content}
-                                  <h-tag-remove-button>x</h-tag-remove-button>
-                              </h-tag>`)}`
-                : selectOptions[0].content;
+                                      <h-tag-remove-button></h-tag-remove-button>
+                                  </h-tag>
+                              </li>`)}`
+                : html `<li>${selectOptions[0].content}</li>`;
         })}
-            </div>
+            </ul>
+            <h-icon icon-name="icon-chevron-down"></h-icon>
         `;
     }
 };
 __decorate([
     state(),
     __metadata("design:type", Object)
-], HSelectValue.prototype, "selectedOptions$", void 0);
+], HSelectToggler.prototype, "selectedOptions$", void 0);
 __decorate([
     state(),
     __metadata("design:type", Boolean)
-], HSelectValue.prototype, "isMultiselect", void 0);
-HSelectValue = __decorate([
-    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.value)
-], HSelectValue);
+], HSelectToggler.prototype, "isMultiselect", void 0);
+HSelectToggler = __decorate([
+    phoenixCustomElement(SELECT_RELATED_COMPONENTS_NAMES.toggler)
+], HSelectToggler);
-export { HSelectValue };
-//# sourceMappingURL=select_value.js.map
+export { HSelectToggler };
+//# sourceMappingURL=select_toggler.js.map

package/build/esm/packages/phoenix/src/components/form/select/components/{value/select_value.js.map → toggler/select_toggler.js.map} RENAMED Viewed

	@@ -1 +1 @@
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;"}
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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/{value/select_value_constants.js.map → toggler/select_toggler_constants.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;"}
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/select.d.ts CHANGED Viewed

@@ -28,7 +28,6 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _handleSearch;
     private _closeSelect;
     private _clearOptions;
-    private _handleDropdownHidden;
     protected update(changedProperties: PropertyValues): void;
     addOption(option: SelectOption, position?: number): void;
     removeOption(optionValue: string): void;

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

@@ -4,7 +4,7 @@ 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_RELATED_COMPONENTS_NAMES, SELECT_CLOSE_BTN_EVENT_NAMES } from './components/select_components_constatns.js';
 import { SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH } from './select_constants.js';
 import { Observer } from '../../../core/classes/observer/observer.js';
 import { observe } from '../../../directives/observable_directive.js';
@@ -37,12 +37,13 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             this._selectController.deselectOption(selectedOption);
         };
         this._updateOptionsView = (options) => {
-            // if (options.length < Object.keys(this._$options).length) this._removeHTMLOptions(options.map((option: SelectOption) => option.value));
+            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);
+                    this._appendNewHTMLOption(option, index + 1);
                     return;
                 }
                 SelectControlUtils.syncHTMLOptionWithModel(option, $option);
@@ -62,14 +63,12 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._closeSelect = () => {
             var _a;
             (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
+            this._searchValue = '';
+            this.opened = false;
         };
         this._clearOptions = () => {
             this._selectController.deselectOptions();
         };
-        this._handleDropdownHidden = () => {
-            this._searchValue = '';
-            this.opened = false;
-        };
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         $options.forEach(($option) => $option.setAttribute('slot', SELECT_SLOT_NAMES.content));
     }
@@ -109,6 +108,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     }
     _setupEvents() {
         this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
+        this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
     }
     _appendNewHTMLOption(option, position) {
         const $list = this._$optionsList.value;
@@ -148,12 +148,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             <h-dropdown
                 ${ref(this._$dropdown)}
                 @dropdown.showed=${() => (this.opened = true)}
-                @dropdown.hidden=${this._handleDropdownHidden}
+                @dropdown.hidden=${this._closeSelect}
                 name=${this.controlName}
             >
-                <h-dropdown-toggler name=${this.controlName} class="${SELECT_CSS_CLASSES.selectControl}">
+                <h-dropdown-toggler name=${this.controlName}">
                     ${this.getSlot(SELECT_SLOT_NAMES.input)}
-                    <h-icon icon-name="icon-chevron-down"></h-icon>
                 </h-dropdown-toggler>
                 <h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} name=${this.controlName}>
@@ -161,31 +160,37 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     ${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>`
+                                  class=${SELECT_CSS_CLASSES.selectSearch}
+                                  ${ref(this._$search)}
+                                  .value=${this._searchValue}
+                                  @selectSearch.search=${this._handleSearch}
+                              ></h-select-search>`
             : nothing}
                     ${this.hasSlot(SELECT_SLOT_NAMES.content)
             ? html `
-                              <h-select-options
-                                  class=${SELECT_CSS_CLASSES.selectOptions}
-                                  ${ref(this._$optionsList)}
-                                  @selectOptions.clicked=${this._handleOptionClicked}
-                              >
-                                  ${this.getSlot(SELECT_SLOT_NAMES.content)}
-                              </h-select-options>
-                          `
+                                  <h-options
+                                      class=${SELECT_CSS_CLASSES.selectOptions}
+                                      ${ref(this._$optionsList)}
+                                      @selectOptions.clicked=${this._handleOptionClicked}
+                                  >
+                                      ${this.getSlot(SELECT_SLOT_NAMES.content)}
+                                  </h-options>
+                              `
+            : nothing}
+                    ${!this._selectController.visibleOptionsCount
+            ? html `<div>
+                                  <p class=${SELECT_CSS_CLASSES.selectNoResult}>
+                                      brak wyników dla <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
+                                  </p>
+                              </div>`
             : nothing}
-                    ${!this._selectController.visibleOptionsCount ? html `<p>brak wyników dla ${this._searchValue}</p>` : nothing}
                     ${this.multiselect && this._selectController.selectedOptionsCount >= 1
             ? html `
-                              <section class=${SELECT_CSS_CLASSES.selectFooter}>
-                                  <button @click=${this._clearOptions}>clear</button>
-                                  <h-select-close-btn @click=${this._closeSelect}>ok</h-select-close-btn>
-                              </section>
-                          `
+                                  <section class=${SELECT_CSS_CLASSES.selectFooter}>
+                                      <button class="btn btn_secondary btn_s" @click=${this._clearOptions}>clear</button>
+                                      <h-select-close-btn class="btn btn_primary btn_s" @click=${this._closeSelect}>ok</h-select-close-btn>
+                                  </section>
+                              `
             : nothing}
                 </h-dropdown-content>
             </h-dropdown>

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

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

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

@@ -14,10 +14,10 @@ export declare const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
 export declare const SELECT_CSS_CLASSES: {
     readonly select: "select";
     readonly selectOpened: "select_opened";
-    readonly selectControl: "select__control";
-    readonly selectInput: "select__value";
     readonly selectSearch: "select__search";
     readonly selectOptions: "select__options";
     readonly selectContent: "select__content";
     readonly selectFooter: "select__footer";
+    readonly selectNoResult: "select__no-result";
+    readonly selectSearchedPhrase: "select__searched-phrase";
 };

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

@@ -15,12 +15,12 @@ const baseSelectClass = 'select';
 const SELECT_CSS_CLASSES = {
     select: baseSelectClass,
     selectOpened: `${baseSelectClass}_opened`,
-    selectControl: `${baseSelectClass}__control`,
-    selectInput: `${baseSelectClass}__value`,
     selectSearch: `${baseSelectClass}__search`,
     selectOptions: `${baseSelectClass}__options`,
     selectContent: `${baseSelectClass}__content`,
-    selectFooter: `${baseSelectClass}__footer`
+    selectFooter: `${baseSelectClass}__footer`,
+    selectNoResult: `${baseSelectClass}__no-result`,
+    selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
 };
 export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_SLOT_NAMES };

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

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

package/build/esm/packages/phoenix/src/components/icon/icon.js CHANGED Viewed

@@ -18,6 +18,7 @@ let HIcon = HIcon_1 = class HIcon extends PhoenixLightLitElement {
     connectedCallback() {
         var _a;
         super.connectedCallback();
+        this.classList.add(ICON_CSS_CLASSES.icon);
         this._cssClasses = classnames(ICON_CSS_CLASSES.icon, {
             [ICON_SIZES_CSS_CLASS_MAP[(_a = this.size) !== null && _a !== void 0 ? _a : '']]: Boolean(this.size),
             [ICON_CSS_CLASSES.iconFilled]: this.filled,

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

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA,uBAAuB,6CAAiD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA,uBAAuB,6CAAiD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/index.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 export { HOption } from "./components/form/select/components/option/select_option";
-export { HSelectOptions } from "./components/form/select/components/select_options";
-export { HSelectValue } from "./components/form/select/components/value/select_value";
+export { HOptionContent } from "./components/form/select/components/option/select_option_content";
+export { HOptions } from "./components/form/select/components/select_options";
+export { HSelectToggler } from "./components/form/select/components/toggler/select_toggler";
 export { HSelect } from "./components/form/select/select";
 export { DEFAULT_SLOT_NAME } from "./core/phoenix_light_lit_element/phoenix_light_lit_elements_constants";
 export { IPhoenixWebComponentClass } from "./global_types";

package/build/esm/packages/phoenix/src/index.js CHANGED Viewed

@@ -3,9 +3,10 @@ export { PhoenixLightLitElement } from './core/phoenix_light_lit_element/phoenix
 export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
 export { BtnController } from './controllers/btn_controller/btn_controller.js';
 export { HOption } from './components/form/select/components/option/select_option.js';
-export { HSelectOptions } from './components/form/select/components/select_options.js';
+export { HOptionContent } from './components/form/select/components/option/select_option_content.js';
+export { HOptions } from './components/form/select/components/select_options.js';
 export { ContextConsumerController } from './core/context/context_consumer_controller.js';
-export { HSelectValue } from './components/form/select/components/value/select_value.js';
+export { HSelectToggler } from './components/form/select/components/toggler/select_toggler.js';
 export { ContextProviderController } from './core/context/context_provider_controller.js';
 export { HPortal } from './components/portal/portal.js';
 export { HPortalTarget } from './components/portal/portal_target.js';

package/build/esm/packages/phoenix/src/index.js.map CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.1.0-1",
+  "version": "1.1.0-11",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "@splidejs/splide": "^4.0.7"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.1.0",
+    "@dreamcommerce/utilities": "^1.1.0-1",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",

package/build/cjs/packages/phoenix/src/components/form/select/components/value/select_value_constants.js DELETED Viewed

@@ -1,10 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const SELECT_VALUE_CSS_CLASSES = {
-    selectValue: 'select-value'
-};
-exports.SELECT_VALUE_CSS_CLASSES = SELECT_VALUE_CSS_CLASSES;
-//# sourceMappingURL=select_value_constants.js.map

package/build/esm/packages/phoenix/src/components/form/select/components/value/select_value_constants.d.ts DELETED Viewed

@@ -1,3 +0,0 @@
-export declare const SELECT_VALUE_CSS_CLASSES: {
-    readonly selectValue: "select-value";
-};

package/build/esm/packages/phoenix/src/components/form/select/components/value/select_value_constants.js DELETED Viewed

@@ -1,6 +0,0 @@
-const SELECT_VALUE_CSS_CLASSES = {
-    selectValue: 'select-value'
-};
-export { SELECT_VALUE_CSS_CLASSES };
-//# sourceMappingURL=select_value_constants.js.map