@shoper/phoenix_design_system 1.1.4 → 1.1.5

package/build/cjs/packages/phoenix/src/components/accordion/accordion_content.js

@@ -6,8 +6,8 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
 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 context_consumer_controller = require('../../core/context/context_consumer_controller.js');
 var observer = require('../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
 var accordion_constants = require('./accordion_constants.js');
 var transition_controller = require('../../controllers/transition_controller/transition_controller.js');
 

package/build/cjs/packages/phoenix/src/components/accordion/accordion_group.js

@@ -6,8 +6,8 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
 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 context_consumer_controller = require('../../core/context/context_consumer_controller.js');
 var observer = require('../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
 var behavior_subject = require('../../core/classes/behavior_subject/behavior_subject.js');
 var context_provider_controller = require('../../core/context/context_provider_controller.js');
 var accordion_constants = require('./accordion_constants.js');

package/build/cjs/packages/phoenix/src/components/accordion/accordion_toggler.js

@@ -6,8 +6,8 @@ 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 btn_controller = require('../../controllers/btn_controller/btn_controller.js');
-var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
 var observer = require('../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
 var accordion_constants = require('./accordion_constants.js');
 
 exports.HAccordionToggler = class HAccordionToggler extends phoenix_light_lit_element.PhoenixLightLitElement {

package/build/cjs/packages/phoenix/src/components/backdrop/controller/backdrop_controller.js

@@ -5,11 +5,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var backdrop_constants = require('../backdrop_constants.js');
 
 class BackdropController {
+    constructor() {
+        this._isVisible = false;
+    }
     hide() {
         this._dispatchEvent(backdrop_constants.BACKDROP_EVENTS.hide);
+        this._isVisible = false;
     }
     show() {
+        if (this._isVisible)
+            return;
         this._dispatchEvent(backdrop_constants.BACKDROP_EVENTS.show);
+        this._isVisible = true;
     }
     _dispatchEvent(eventName) {
         const hideBackdropEvent = new CustomEvent(eventName, {

package/build/cjs/packages/phoenix/src/components/backdrop/controller/backdrop_controller.js.map

@@ -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;"}
+{"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;"}

package/build/cjs/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_consumer_controller.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
 require('lit');
-var context_consumer_controller = require('../../../../core/context/context_consumer_controller.js');
 var observer = require('../../../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../../../core/context/context_consumer_controller.js');
 var control_props_sync_controller_constants = require('./control_props_sync_controller_constants.js');
 
 var _ControlPropsSyncConsumerController_host, _ControlPropsSyncConsumerController_contextConsumer, _ControlPropsSyncConsumerController_basePropsObservable, _ControlPropsSyncConsumerController_propsObserver, _ControlPropsSyncConsumerController_onPropsUpdated;

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

@@ -7,6 +7,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');
 var btn_controller = require('../../../../controllers/btn_controller/btn_controller.js');
+var icon_constants = require('../../../icon/icon_constants.js');
 var litHtml = require('lit-html');
 
 exports.HSelectCloseBtn = class HSelectCloseBtn extends phoenix_light_lit_element.PhoenixLightLitElement {
@@ -28,7 +29,7 @@ exports.HSelectCloseBtn = class HSelectCloseBtn extends phoenix_light_lit_elemen
     render() {
         return litHtml.html `${this.hasSlot(select_components_constatns.SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
             ? this.getSlot(select_components_constatns.SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
-            : litHtml.html `<icon iconName="icon-x"></icon>`} `;
+            : litHtml.html ` <h-icon size=${icon_constants.ICONS_SIZES.l} icon-name="icon-x"></h-icon>`} `;
     }
 };
 exports.HSelectCloseBtn = tslib_es6.__decorate([

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

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

@@ -20,7 +20,8 @@ const SELECT_RELATED_COMPONENTS_NAMES = {
     optionContent: 'h-option-content',
     toggler: 'h-select-toggler',
     closeBtn: 'h-select-close-btn',
-    search: 'h-select-search'
+    search: 'h-select-search',
+    placeholder: 'h-placeholder'
 };
 const SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME = 'content';
 const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';

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

@@ -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;"}
+{"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;"}

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

@@ -7,10 +7,10 @@ var decorators = require('lit/decorators');
 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 observer = require('../../../../../core/classes/observer/observer.js');
 var litHtml = require('lit-html');
 var context_consumer_controller = require('../../../../../core/context/context_consumer_controller.js');
 var select_constants = require('../../select_constants.js');
-var observer = require('../../../../../core/classes/observer/observer.js');
 var observable_directive = require('../../../../../directives/observable_directive.js');
 var select_toggler_constants = require('./select_toggler_constants.js');
 
@@ -32,7 +32,7 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.input);
+        this.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.toggler);
         this.setAttribute('role', 'textbox');
         this.classList.add(select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectToggler);
         this._subscribeObserver();
@@ -55,19 +55,17 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
             ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
             var _a;
             if (!selectOptions.length)
-                return litHtml.html `<span class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}
-                        >${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}</span
-                    >`;
-            return litHtml.html `<ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
+                return litHtml.html `${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}`;
+            return litHtml.html ` <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
                     ${this.isMultiselect
-                ? selectOptions.map((option) => litHtml.html `<li>
+                ? selectOptions.map((option) => litHtml.html ` <li>
                                   <h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
                                       ${option.content}
 
                                       <h-tag-remove-button></h-tag-remove-button>
                                   </h-tag>
                               </li>`)
-                : litHtml.html `<li>${selectOptions[0].content}</li>`}
+                : litHtml.html ` <li>${selectOptions[0].content}</li>`}
                 </ul>`;
         })}
 

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

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

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

@@ -9,12 +9,14 @@ var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element
 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('./components/select_components_constatns.js');
+var observer = require('../../../core/classes/observer/observer.js');
 var icon = require('../../icon/icon.js');
 var select_constants = require('./select_constants.js');
-var observer = require('../../../core/classes/observer/observer.js');
 var observable_directive = require('../../../directives/observable_directive.js');
+var select_toggler = require('./components/toggler/select_toggler.js');
 var context_provider_controller = require('../../../core/context/context_provider_controller.js');
 var ref_js = require('lit-html/directives/ref.js');
+var global_constants = require('../../../global_constants.js');
 var debounce = require('../../../../../../external/lodash/debounce.js');
 var multi_select_controller = require('./controllers/multi_select_controller.js');
 var select_controller = require('./controllers/select_controller.js');
@@ -26,6 +28,7 @@ var select_close_btn = require('./components/select_close_btn.js');
 
 exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
+        var _a;
         super();
         this.multiselect = false;
         this.opened = false;
@@ -37,9 +40,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._$optionsList = ref_js.createRef();
         this._$dropdownContent = ref_js.createRef();
         this._selectContext = new context_provider_controller.ContextProviderController(this);
-        this._setDropdownContentWidth = () => {
+        this._setDropdownContentWidth = (width) => {
             if (this._$dropdownContent.value)
-                this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
+                this._$dropdownContent.value.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
         };
         this._handleOptionDeselect = (event) => {
             const selectedOption = this._selectController.getSelectOption(event.detail);
@@ -71,23 +74,26 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             if (!this.multiselect)
                 this._closeSelect();
         };
+        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._searchValue = '';
-            this.opened = false;
         };
         this._clearOptions = () => {
             this._selectController.deselectOptions();
         };
         this._handleResize = debounce['default'](() => {
             this._closeSelect();
-            this._setDropdownContentWidth();
+            this._setDropdownContentWidth(this._getDropdownContentWidth());
         }, select_constants.SELECT_RESIZE_DEBOUNCE_TIME);
         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));
+        this.$placeholder = (_a = this.querySelector(`[slot="${select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME}"]`)) !== null && _a !== void 0 ? _a : 'Select';
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -146,7 +152,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._setDropdownContentWidth();
+        this._setDropdownContentWidth(this._getDropdownContentWidth());
     }
     _setupEvents() {
         this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
@@ -189,6 +195,15 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._selectController.options$.unsubscribe(this._optionsObserver);
         window.removeEventListener('resize', this._handleResize);
     }
+    _getDropdownContentWidth() {
+        return document.documentElement.clientWidth < global_constants.BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
+    }
+    _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 : [];
@@ -196,17 +211,26 @@ 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._closeSelect}
+                @dropdown.hidden=${this._handleDropdownHidden}
                 name=${this.controlName}
                 offset=${this.offset}
             >
-                <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_constants.SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
+                <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
+
+                <h-dropdown-content
+                    class="${select_constants.SELECT_CSS_CLASSES.selectContent} ${this.error ? select_constants.SELECT_CSS_CLASSES.selectContentError : ''}"
+                    ${ref_js.ref(this._$dropdownContent)}
+                    name=${this.controlName}
+                >
+                    <h-select-close-btn
+                        class="${select_constants.SELECT_CSS_CLASSES.selectCloseMobileButton}"
+                        @selectCloseBtn.close=${this._closeSelect}
+                    ></h-select-close-btn>
 
-                <h-dropdown-content class=${select_constants.SELECT_CSS_CLASSES.selectContent} ${ref_js.ref(this._$dropdownContent)} name=${this.controlName}>
-                    <h-select-close-btn @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
+                    <div class=${select_constants.SELECT_CSS_CLASSES.selectLabel}>${lit.html `${this._getClonedPlaceholderElement()}`}</div>
 
                     ${options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
-            ? lit.html `<h-select-search
+            ? lit.html ` <h-select-search
                               class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
                               ${ref_js.ref(this._$search)}
                               .value=${this._searchValue}
@@ -216,7 +240,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                     ${this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
             ? lit.html `
                               <h-options
-                                  class=${select_constants.SELECT_CSS_CLASSES.selectOptions}
+                                  class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
+                ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty
+                : ''}"
                                   ${ref_js.ref(this._$optionsList)}
                                   @selectOptions.clicked=${this._handleOptionClicked}
                               >
@@ -224,8 +250,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                               </h-options>
                           `
             : lit.nothing}
-                    ${!this._selectController.visibleOptionsCount && Object.keys(this._$options).length
-            ? lit.html `<div>
+                    ${this._searchNoResult()
+            ? 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>
@@ -234,10 +260,10 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                     ${this.multiselect && this._selectController.selectedOptionsCount >= 1
             ? lit.html `
                               <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
-                                  <button class="btn btn_secondary btn_xs" @click=${this._clearOptions}>clear</button>
-                                  <h-select-close-btn class="btn btn_primary btn_xs" @selectCloseBtn.close=${this._closeSelect}
-                                      >ok</h-select-close-btn
-                                  >
+                                  <button class="${select_constants.SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
+                                  <h-select-close-btn class="${select_constants.SELECT_CSS_CLASSES.selectCloseButton}" @selectCloseBtn.close=${this._closeSelect}
+                                      ><span slot=${select_components_constatns.SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}>ok</span>
+                                  </h-select-close-btn>
                               </section>
                           `
             : lit.nothing}
@@ -251,7 +277,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
 exports.HSelect._components = {
     search: select_search.HSelectSearch,
     icon: icon.HIcon,
-    closeBtn: select_close_btn.HSelectCloseBtn
+    closeBtn: select_close_btn.HSelectCloseBtn,
+    toggler: select_toggler.HSelectToggler
 };
 tslib_es6.__decorate([
     decorators_js.property({ type: String }),

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

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

@@ -8,7 +8,7 @@ const SELECT_CONTEXTS = {
 };
 const SELECT_SLOT_NAMES = {
     content: 'content',
-    input: 'input'
+    toggler: 'toggler'
 };
 const SELECT_EVENT_NAMES = {
     selectOption: 'selectOption.select',
@@ -24,10 +24,16 @@ const SELECT_CSS_CLASSES = {
     selectDisabled: `${baseSelectClass}_disabled`,
     selectSearch: `${baseSelectClass}__search`,
     selectOptions: `${baseSelectClass}__options`,
+    selectOptionsEmpty: `${baseSelectClass}__options_empty`,
     selectContent: `${baseSelectClass}__content`,
+    selectContentError: `${baseSelectClass}__content_error`,
     selectFooter: `${baseSelectClass}__footer`,
     selectNoResult: `${baseSelectClass}__no-result`,
-    selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
+    selectSearchedPhrase: `${baseSelectClass}__searched-phrase`,
+    selectCloseMobileButton: `${baseSelectClass}__close-mobile-btn`,
+    selectClearButton: `${baseSelectClass}__clear-btn`,
+    selectCloseButton: `${baseSelectClass}__close-btn`,
+    selectLabel: `${baseSelectClass}__label`
 };
 
 exports.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;

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

@@ -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;"}
+{"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;"}

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

@@ -10,19 +10,27 @@ var phoenix_custom_element = require('../../core/decorators/phoenix_custom_eleme
 var icon_constants = require('./icon_constants.js');
 var index = require('../../../external/classnames/index.js');
 var namespaced_attribure_directive = require('../../directives/namespaced_attribure_directive.js');
+var observer = require('../../core/classes/observer/observer.js');
+var subject = require('../../core/classes/subject/subject.js');
 
 var HIcon_1;
 exports.HIcon = HIcon_1 = class HIcon extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.filled = false;
         this.clickable = false;
         this.noStroke = false;
+        this._srcObserverCallback = (src) => {
+            if (src)
+                this.requestUpdate();
+        };
+        this._srcObserver = new observer.Observer(this._srcObserverCallback);
+        HIcon_1.src.subscribe(this._srcObserver);
     }
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        this.classList.add(icon_constants.ICON_CSS_CLASSES.icon);
+        HIcon_1.src.subscribe(this._srcObserver);
         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,
@@ -30,15 +38,20 @@ exports.HIcon = HIcon_1 = class HIcon extends phoenix_light_lit_element.PhoenixL
             [icon_constants.ICON_CSS_CLASSES.iconClickable]: this.clickable
         });
     }
+    disconnectedCallback() {
+        HIcon_1.src.unsubscribe(this._srcObserver);
+    }
     render() {
-        super.render();
+        if (!HIcon_1.src.getValue())
+            return null;
         return lit.html `
             <svg class="${this._cssClasses}">
-                <use xlink:href="${namespaced_attribure_directive.namespacedAttribute('http://www.w3.org/1999/xlink', `${HIcon_1.src}#${this.iconName}`)}"></use>
+                <use xlink:href="${namespaced_attribure_directive.namespacedAttribute('http://www.w3.org/1999/xlink', `${HIcon_1.src.getValue()}#${this.iconName}`)}"></use>
             </svg>
         `;
     }
 };
+exports.HIcon.src = new subject.Subject();
 tslib_es6.__decorate([
     decorators.property({ type: String, attribute: 'icon-name' }),
     tslib_es6.__metadata("design:type", String)
@@ -60,6 +73,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HIcon.prototype, "noStroke", void 0);
 exports.HIcon = HIcon_1 = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-icon')
+    phoenix_custom_element.phoenixCustomElement('h-icon'),
+    tslib_es6.__metadata("design:paramtypes", [])
 ], exports.HIcon);
 //# sourceMappingURL=icon.js.map

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

@@ -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,uCAA2C;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA,oBAAoB,uCAA2C;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/icon/icon_constants.js

@@ -16,8 +16,14 @@ const ICON_SIZES_CSS_CLASS_MAP = {
     l: ICON_CSS_CLASSES.iconSizeL,
     xl: ICON_CSS_CLASSES.iconSizeXl,
     xxl: ICON_CSS_CLASSES.iconSizeXxl
+};
+const ICONS_SIZES = {
+    l: 'l',
+    xl: 'xl',
+    xxl: 'xxl'
 };
 
+exports.ICONS_SIZES = ICONS_SIZES;
 exports.ICON_CSS_CLASSES = ICON_CSS_CLASSES;
 exports.ICON_SIZES_CSS_CLASS_MAP = ICON_SIZES_CSS_CLASS_MAP;
 //# sourceMappingURL=icon_constants.js.map

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

@@ -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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js

@@ -2,8 +2,8 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
 import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
-import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
 import { Observer } from '../../core/classes/observer/observer.js';
+import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
 import { ACCORDION_CONTEXTS } from './accordion_constants.js';
 import { TransitionController } from '../../controllers/transition_controller/transition_controller.js';
 

package/build/esm/packages/phoenix/src/components/accordion/accordion_group.js

@@ -2,8 +2,8 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
 import { property, 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 { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
 import { Observer } from '../../core/classes/observer/observer.js';
+import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
 import { BehaviorSubject } from '../../core/classes/behavior_subject/behavior_subject.js';
 import { ContextProviderController } from '../../core/context/context_provider_controller.js';
 import { ACCORDION_MODE, ACCORDION_CONTEXTS, ACCORDION_EVENTS } from './accordion_constants.js';

package/build/esm/packages/phoenix/src/components/accordion/accordion_toggler.js

@@ -2,8 +2,8 @@ import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { BtnController } from '../../controllers/btn_controller/btn_controller.js';
-import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
 import { Observer } from '../../core/classes/observer/observer.js';
+import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
 import { ACCORDION_EVENTS, ACCORDION_CONTEXTS } from './accordion_constants.js';
 
 let HAccordionToggler = class HAccordionToggler extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/components/backdrop/controller/backdrop_controller.d.ts

@@ -1,5 +1,6 @@
 import { IBackdropController } from "./backdrop_controller_types";
 export declare class BackdropController implements IBackdropController {
+    private _isVisible;
     hide(): void;
     show(): void;
     private _dispatchEvent;

package/build/esm/packages/phoenix/src/components/backdrop/controller/backdrop_controller.js

@@ -1,11 +1,18 @@
 import { BACKDROP_EVENTS } from '../backdrop_constants.js';
 
 class BackdropController {
+    constructor() {
+        this._isVisible = false;
+    }
     hide() {
         this._dispatchEvent(BACKDROP_EVENTS.hide);
+        this._isVisible = false;
     }
     show() {
+        if (this._isVisible)
+            return;
         this._dispatchEvent(BACKDROP_EVENTS.show);
+        this._isVisible = true;
     }
     _dispatchEvent(eventName) {
         const hideBackdropEvent = new CustomEvent(eventName, {

package/build/esm/packages/phoenix/src/components/backdrop/controller/backdrop_controller.js.map

@@ -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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_consumer_controller.js

@@ -1,7 +1,7 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet } from '../../../../../../../external/tslib/tslib.es6.js';
 import 'lit';
-import { ContextConsumerController } from '../../../../core/context/context_consumer_controller.js';
 import { Observer } from '../../../../core/classes/observer/observer.js';
+import { ContextConsumerController } from '../../../../core/context/context_consumer_controller.js';
 import { FORM_CONTROL_CONTEXTS } from './control_props_sync_controller_constants.js';
 
 var _ControlPropsSyncConsumerController_host, _ControlPropsSyncConsumerController_contextConsumer, _ControlPropsSyncConsumerController_basePropsObservable, _ControlPropsSyncConsumerController_propsObserver, _ControlPropsSyncConsumerController_onPropsUpdated;

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

@@ -3,6 +3,7 @@ import { PhoenixLightLitElement } from '../../../../core/phoenix_light_lit_eleme
 import { phoenixCustomElement } from '../../../../core/decorators/phoenix_custom_element.js';
 import { SELECT_CLOSE_BTN_EVENT_NAMES, SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from './select_components_constatns.js';
 import { BtnController } from '../../../../controllers/btn_controller/btn_controller.js';
+import { ICONS_SIZES } from '../../../icon/icon_constants.js';
 import { html } from 'lit-html';
 
 let HSelectCloseBtn = class HSelectCloseBtn extends PhoenixLightLitElement {
@@ -24,7 +25,7 @@ let HSelectCloseBtn = class HSelectCloseBtn extends PhoenixLightLitElement {
     render() {
         return html `${this.hasSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
             ? this.getSlot(SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME)
-            : html `<icon iconName="icon-x"></icon>`} `;
+            : html ` <h-icon size=${ICONS_SIZES.l} icon-name="icon-x"></h-icon>`} `;
     }
 };
 HSelectCloseBtn = __decorate([

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

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

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

@@ -17,6 +17,7 @@ export declare const SELECT_RELATED_COMPONENTS_NAMES: {
     readonly toggler: "h-select-toggler";
     readonly closeBtn: "h-select-close-btn";
     readonly search: "h-select-search";
+    readonly placeholder: "h-placeholder";
 };
 export declare const SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME = "content";
 export declare const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = "placeholder";

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

@@ -16,7 +16,8 @@ const SELECT_RELATED_COMPONENTS_NAMES = {
     optionContent: 'h-option-content',
     toggler: 'h-select-toggler',
     closeBtn: 'h-select-close-btn',
-    search: 'h-select-search'
+    search: 'h-select-search',
+    placeholder: 'h-placeholder'
 };
 const SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME = 'content';
 const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';

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

@@ -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;"}
+{"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;"}

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

@@ -3,10 +3,10 @@ import { state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../../../core/decorators/phoenix_custom_element.js';
 import { SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SELECT_RELATED_COMPONENTS_NAMES } from '../select_components_constatns.js';
+import { Observer } from '../../../../../core/classes/observer/observer.js';
 import { html } from 'lit-html';
 import { ContextConsumerController } from '../../../../../core/context/context_consumer_controller.js';
 import { SELECT_EVENT_NAMES, SELECT_SLOT_NAMES, SELECT_CONTEXTS } from '../../select_constants.js';
-import { Observer } from '../../../../../core/classes/observer/observer.js';
 import { observe } from '../../../../../directives/observable_directive.js';
 import { SELECT_TOGGLER_CSS_CLASSES } from './select_toggler_constants.js';
 
@@ -28,7 +28,7 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('slot', SELECT_SLOT_NAMES.input);
+        this.setAttribute('slot', SELECT_SLOT_NAMES.toggler);
         this.setAttribute('role', 'textbox');
         this.classList.add(SELECT_TOGGLER_CSS_CLASSES.selectToggler);
         this._subscribeObserver();
@@ -51,19 +51,17 @@ let HSelectToggler = class HSelectToggler extends PhoenixLightLitElement {
             ${observe(this.selectedOptions$, (selectOptions) => {
             var _a;
             if (!selectOptions.length)
-                return html `<span class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}
-                        >${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}</span
-                    >`;
-            return html `<ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
+                return html `${(_a = this.getSlot(SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}`;
+            return html ` <ul class=${SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
                     ${this.isMultiselect
-                ? selectOptions.map((option) => html `<li>
+                ? selectOptions.map((option) => html ` <li>
                                   <h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
                                       ${option.content}
 
                                       <h-tag-remove-button></h-tag-remove-button>
                                   </h-tag>
                               </li>`)
-                : html `<li>${selectOptions[0].content}</li>`}
+                : html ` <li>${selectOptions[0].content}</li>`}
                 </ul>`;
         })}
 

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

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

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

@@ -19,6 +19,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _selectContext;
     private _listBoxController;
     private _optionsObserver;
+    private $placeholder;
     constructor();
     updated(changedProperties: PropertyValues): void;
     private _focusElementAfterSelectOpened;
@@ -33,6 +34,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _removeHTMLOptions;
     private _handleOptionClicked;
     private _handleSearch;
+    private _handleDropdownHidden;
     private _closeSelect;
     private _clearOptions;
     protected update(changedProperties: PropertyValues): void;
@@ -41,5 +43,8 @@ export declare class HSelect extends PhoenixLightLitElement {
     replaceOptions(options: SelectOption[]): void;
     disconnectedCallback(): void;
     private _handleResize;
+    private _getDropdownContentWidth;
+    private _getClonedPlaceholderElement;
+    private _searchNoResult;
     protected render(): TemplateResult;
 }

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

@@ -4,13 +4,15 @@ import { state } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { property } from '@lit/reactive-element/decorators.js';
-import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_CLOSE_BTN_EVENT_NAMES } from './components/select_components_constatns.js';
+import { SELECT_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_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 { Observer } from '../../../core/classes/observer/observer.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 { createRef, ref } from 'lit-html/directives/ref.js';
+import { BREAKPOINTS } from '../../../global_constants.js';
 import debounce_1 from '../../../../../../external/lodash/debounce.js';
 import { MultiSelectController } from './controllers/multi_select_controller.js';
 import { SelectController } from './controllers/select_controller.js';
@@ -22,6 +24,7 @@ import { HSelectCloseBtn } from './components/select_close_btn.js';
 
 let HSelect = class HSelect extends PhoenixLightLitElement {
     constructor() {
+        var _a;
         super();
         this.multiselect = false;
         this.opened = false;
@@ -33,9 +36,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._$optionsList = createRef();
         this._$dropdownContent = createRef();
         this._selectContext = new ContextProviderController(this);
-        this._setDropdownContentWidth = () => {
+        this._setDropdownContentWidth = (width) => {
             if (this._$dropdownContent.value)
-                this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
+                this._$dropdownContent.value.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
         };
         this._handleOptionDeselect = (event) => {
             const selectedOption = this._selectController.getSelectOption(event.detail);
@@ -67,23 +70,26 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             if (!this.multiselect)
                 this._closeSelect();
         };
+        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._searchValue = '';
-            this.opened = false;
         };
         this._clearOptions = () => {
             this._selectController.deselectOptions();
         };
         this._handleResize = debounce_1(() => {
             this._closeSelect();
-            this._setDropdownContentWidth();
+            this._setDropdownContentWidth(this._getDropdownContentWidth());
         }, 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';
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -142,7 +148,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     }
     firstUpdated(props) {
         super.firstUpdated(props);
-        this._setDropdownContentWidth();
+        this._setDropdownContentWidth(this._getDropdownContentWidth());
     }
     _setupEvents() {
         this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
@@ -185,6 +191,15 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._selectController.options$.unsubscribe(this._optionsObserver);
         window.removeEventListener('resize', this._handleResize);
     }
+    _getDropdownContentWidth() {
+        return document.documentElement.clientWidth < BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
+    }
+    _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 : [];
@@ -192,17 +207,26 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             <h-dropdown
                 ${ref(this._$dropdown)}
                 @dropdown.showed=${() => (this.opened = true)}
-                @dropdown.hidden=${this._closeSelect}
+                @dropdown.hidden=${this._handleDropdownHidden}
                 name=${this.controlName}
                 offset=${this.offset}
             >
-                <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
+                <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
+
+                <h-dropdown-content
+                    class="${SELECT_CSS_CLASSES.selectContent} ${this.error ? SELECT_CSS_CLASSES.selectContentError : ''}"
+                    ${ref(this._$dropdownContent)}
+                    name=${this.controlName}
+                >
+                    <h-select-close-btn
+                        class="${SELECT_CSS_CLASSES.selectCloseMobileButton}"
+                        @selectCloseBtn.close=${this._closeSelect}
+                    ></h-select-close-btn>
 
-                <h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} name=${this.controlName}>
-                    <h-select-close-btn @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
+                    <div class=${SELECT_CSS_CLASSES.selectLabel}>${html `${this._getClonedPlaceholderElement()}`}</div>
 
                     ${options.length > MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
-            ? html `<h-select-search
+            ? html ` <h-select-search
                               class=${SELECT_CSS_CLASSES.selectSearch}
                               ${ref(this._$search)}
                               .value=${this._searchValue}
@@ -212,7 +236,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     ${this.hasSlot(SELECT_SLOT_NAMES.content)
             ? html `
                               <h-options
-                                  class=${SELECT_CSS_CLASSES.selectOptions}
+                                  class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
+                ? SELECT_CSS_CLASSES.selectOptionsEmpty
+                : ''}"
                                   ${ref(this._$optionsList)}
                                   @selectOptions.clicked=${this._handleOptionClicked}
                               >
@@ -220,8 +246,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                               </h-options>
                           `
             : nothing}
-                    ${!this._selectController.visibleOptionsCount && Object.keys(this._$options).length
-            ? html `<div>
+                    ${this._searchNoResult()
+            ? html ` <div>
                               <p class=${SELECT_CSS_CLASSES.selectNoResult}>
                                   Brak wyników dla: <em class=${SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
                               </p>
@@ -230,10 +256,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                     ${this.multiselect && this._selectController.selectedOptionsCount >= 1
             ? html `
                               <section class=${SELECT_CSS_CLASSES.selectFooter}>
-                                  <button class="btn btn_secondary btn_xs" @click=${this._clearOptions}>clear</button>
-                                  <h-select-close-btn class="btn btn_primary btn_xs" @selectCloseBtn.close=${this._closeSelect}
-                                      >ok</h-select-close-btn
-                                  >
+                                  <button class="${SELECT_CSS_CLASSES.selectClearButton}" @click=${this._clearOptions}>clear</button>
+                                  <h-select-close-btn class="${SELECT_CSS_CLASSES.selectCloseButton}" @selectCloseBtn.close=${this._closeSelect}
+                                      ><span slot=${SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME}>ok</span>
+                                  </h-select-close-btn>
                               </section>
                           `
             : nothing}
@@ -247,7 +273,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
 HSelect._components = {
     search: HSelectSearch,
     icon: HIcon,
-    closeBtn: HSelectCloseBtn
+    closeBtn: HSelectCloseBtn,
+    toggler: HSelectToggler
 };
 __decorate([
     property({ type: String }),

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

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

@@ -4,7 +4,7 @@ export declare const SELECT_CONTEXTS: {
 };
 export declare const SELECT_SLOT_NAMES: {
     readonly content: "content";
-    readonly input: "input";
+    readonly toggler: "toggler";
 };
 export declare const SELECT_EVENT_NAMES: {
     readonly selectOption: "selectOption.select";
@@ -19,8 +19,14 @@ export declare const SELECT_CSS_CLASSES: {
     readonly selectDisabled: "select_disabled";
     readonly selectSearch: "select__search";
     readonly selectOptions: "select__options";
+    readonly selectOptionsEmpty: "select__options_empty";
     readonly selectContent: "select__content";
+    readonly selectContentError: "select__content_error";
     readonly selectFooter: "select__footer";
     readonly selectNoResult: "select__no-result";
     readonly selectSearchedPhrase: "select__searched-phrase";
+    readonly selectCloseMobileButton: "select__close-mobile-btn";
+    readonly selectClearButton: "select__clear-btn";
+    readonly selectCloseButton: "select__close-btn";
+    readonly selectLabel: "select__label";
 };

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

@@ -4,7 +4,7 @@ const SELECT_CONTEXTS = {
 };
 const SELECT_SLOT_NAMES = {
     content: 'content',
-    input: 'input'
+    toggler: 'toggler'
 };
 const SELECT_EVENT_NAMES = {
     selectOption: 'selectOption.select',
@@ -20,10 +20,16 @@ const SELECT_CSS_CLASSES = {
     selectDisabled: `${baseSelectClass}_disabled`,
     selectSearch: `${baseSelectClass}__search`,
     selectOptions: `${baseSelectClass}__options`,
+    selectOptionsEmpty: `${baseSelectClass}__options_empty`,
     selectContent: `${baseSelectClass}__content`,
+    selectContentError: `${baseSelectClass}__content_error`,
     selectFooter: `${baseSelectClass}__footer`,
     selectNoResult: `${baseSelectClass}__no-result`,
-    selectSearchedPhrase: `${baseSelectClass}__searched-phrase`
+    selectSearchedPhrase: `${baseSelectClass}__searched-phrase`,
+    selectCloseMobileButton: `${baseSelectClass}__close-mobile-btn`,
+    selectClearButton: `${baseSelectClass}__clear-btn`,
+    selectCloseButton: `${baseSelectClass}__close-btn`,
+    selectLabel: `${baseSelectClass}__label`
 };
 
 export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES };

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

@@ -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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/icon/icon.d.ts

@@ -1,14 +1,19 @@
 import { TemplateResult } from 'lit';
 import { TIconSize } from "./icon_constants";
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { Subject } from "../../core/classes/subject/subject";
 export declare class HIcon extends PhoenixLightLitElement {
-    static src: string;
+    static src: Subject<string>;
     iconName: string;
     size?: TIconSize | undefined;
     filled: boolean;
     clickable: boolean;
     noStroke: boolean;
     private _cssClasses;
+    private _srcObserver;
+    constructor();
+    private _srcObserverCallback;
     connectedCallback(): void;
-    protected render(): TemplateResult;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult | null;
 }

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

@@ -6,19 +6,27 @@ import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_eleme
 import { ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP } from './icon_constants.js';
 import classnames from '../../../external/classnames/index.js';
 import { namespacedAttribute } from '../../directives/namespaced_attribure_directive.js';
+import { Observer } from '../../core/classes/observer/observer.js';
+import { Subject } from '../../core/classes/subject/subject.js';
 
 var HIcon_1;
 let HIcon = HIcon_1 = class HIcon extends PhoenixLightLitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.filled = false;
         this.clickable = false;
         this.noStroke = false;
+        this._srcObserverCallback = (src) => {
+            if (src)
+                this.requestUpdate();
+        };
+        this._srcObserver = new Observer(this._srcObserverCallback);
+        HIcon_1.src.subscribe(this._srcObserver);
     }
     connectedCallback() {
         var _a;
         super.connectedCallback();
-        this.classList.add(ICON_CSS_CLASSES.icon);
+        HIcon_1.src.subscribe(this._srcObserver);
         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,
@@ -26,15 +34,20 @@ let HIcon = HIcon_1 = class HIcon extends PhoenixLightLitElement {
             [ICON_CSS_CLASSES.iconClickable]: this.clickable
         });
     }
+    disconnectedCallback() {
+        HIcon_1.src.unsubscribe(this._srcObserver);
+    }
     render() {
-        super.render();
+        if (!HIcon_1.src.getValue())
+            return null;
         return html `
             <svg class="${this._cssClasses}">
-                <use xlink:href="${namespacedAttribute('http://www.w3.org/1999/xlink', `${HIcon_1.src}#${this.iconName}`)}"></use>
+                <use xlink:href="${namespacedAttribute('http://www.w3.org/1999/xlink', `${HIcon_1.src.getValue()}#${this.iconName}`)}"></use>
             </svg>
         `;
     }
 };
+HIcon.src = new Subject();
 __decorate([
     property({ type: String, attribute: 'icon-name' }),
     __metadata("design:type", String)
@@ -56,7 +69,8 @@ __decorate([
     __metadata("design:type", Boolean)
 ], HIcon.prototype, "noStroke", void 0);
 HIcon = HIcon_1 = __decorate([
-    phoenixCustomElement('h-icon')
+    phoenixCustomElement('h-icon'),
+    __metadata("design:paramtypes", [])
 ], HIcon);
 
 export { HIcon };

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

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

package/build/esm/packages/phoenix/src/components/icon/icon_constants.d.ts

@@ -13,4 +13,9 @@ export declare const ICON_SIZES_CSS_CLASS_MAP: {
     readonly xl: "icon_xl";
     readonly xxl: "icon_xxl";
 };
+export declare const ICONS_SIZES: {
+    readonly l: "l";
+    readonly xl: "xl";
+    readonly xxl: "xxl";
+};
 export declare type TIconSize = Any.Keys<typeof ICON_SIZES_CSS_CLASS_MAP>;

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

@@ -12,7 +12,12 @@ const ICON_SIZES_CSS_CLASS_MAP = {
     l: ICON_CSS_CLASSES.iconSizeL,
     xl: ICON_CSS_CLASSES.iconSizeXl,
     xxl: ICON_CSS_CLASSES.iconSizeXxl
+};
+const ICONS_SIZES = {
+    l: 'l',
+    xl: 'xl',
+    xxl: 'xxl'
 };
 
-export { ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP };
+export { ICONS_SIZES, ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP };
 //# sourceMappingURL=icon_constants.js.map

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

@@ -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;"}
+{"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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",