@shoper/phoenix_design_system 1.1.0-9 → 1.1.1

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

@@ -5,24 +5,27 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/
 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_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH } from './select_constants.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 { ContextProviderController } from '../../../core/context/context_provider_controller.js';
 import { createRef, ref } from 'lit-html/directives/ref.js';
+import debounce_1 from '../../../../../../external/lodash/debounce.js';
 import { MultiSelectController } from './controllers/multi_select_controller.js';
 import { SelectController } from './controllers/select_controller.js';
 import { HSelectSearch } from './components/search/select_search.js';
 import { ListBoxKeyboardController } from '../../../controllers/list_box_controller/list_box_keyboard_controller.js';
-import { HIcon } from '../../icon/icon.js';
 import { SelectOptionMapper } from './model/select_option_mapper.js';
 import { SelectControlUtils } from './select_utils.js';
+import { HSelectCloseBtn } from './components/select_close_btn.js';
 
 let HSelect = class HSelect extends PhoenixLightLitElement {
     constructor() {
         super();
         this.multiselect = false;
         this.opened = false;
+        this.offset = 2;
         this._searchValue = '';
         this._$options = {};
         this._$dropdown = createRef();
@@ -30,6 +33,10 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._$optionsList = createRef();
         this._$dropdownContent = createRef();
         this._selectContext = new ContextProviderController(this);
+        this._setDropdownContentWidth = () => {
+            if (this._$dropdownContent.value)
+                this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
+        };
         this._handleOptionDeselect = (event) => {
             const selectedOption = this._selectController.getSelectOption(event.detail);
             if (!selectedOption)
@@ -62,6 +69,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         };
         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;
@@ -69,19 +78,35 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._clearOptions = () => {
             this._selectController.deselectOptions();
         };
+        this._handleResize = debounce_1(() => {
+            this._closeSelect();
+            this._setDropdownContentWidth();
+        }, 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));
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('opened'))
-            this.opened ? this.classList.add(SELECT_CSS_CLASSES.selectOpened) : this.classList.remove(SELECT_CSS_CLASSES.selectOpened);
+        if (changedProperties.has('opened')) {
+            if (this.opened) {
+                this.classList.add(SELECT_CSS_CLASSES.selectOpened);
+                this._focusElementAfterSelectOpened();
+            }
+            else {
+                this.classList.remove(SELECT_CSS_CLASSES.selectOpened);
+            }
+        }
         if (this._$optionsList.value && !this._listBoxController)
             this._listBoxController = new ListBoxKeyboardController({
                 host: this,
                 $list: this._$optionsList.value
             });
     }
+    _focusElementAfterSelectOpened() {
+        var _a, _b;
+        const $searchInput = (_a = this._$search.value) === null || _a === void 0 ? void 0 : _a.querySelector('[role="search"]');
+        $searchInput ? $searchInput.focus() : (_b = this._$optionsList.value) === null || _b === void 0 ? void 0 : _b.focus();
+    }
     connectedCallback() {
         super.connectedCallback();
         this.classList.add(SELECT_CSS_CLASSES.select);
@@ -89,7 +114,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
         this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiselect);
         const $options = Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
-        this._selectController.options$.subscribe(new Observer((selectedOptions) => this._updateOptionsView(selectedOptions)));
+        this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
+        this._selectController.options$.subscribe(this._optionsObserver);
         this._$options = $options.reduce((acc, $option) => {
             if (acc[$option.value] !== undefined)
                 throw Error('Select options must hava a unique values.');
@@ -98,17 +124,30 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 [$option.value]: $option
             };
         }, {});
-        this._selectController.options$.notify($options.map(SelectOptionMapper.toModel));
+        const options = $options.map(SelectOptionMapper.toModel);
+        this._selectController.options$.notify(options);
+        if (options.length)
+            this._selectController.selectedOptions$.notify(options.filter((option) => option.selected));
         this._setupEvents();
     }
+    attributeChangedCallback(name, _old, value) {
+        super.attributeChangedCallback(name, _old, value);
+        switch (name) {
+            case 'error':
+                this.error ? this.classList.add(SELECT_CSS_CLASSES.selectError) : this.classList.remove(SELECT_CSS_CLASSES.selectError);
+                break;
+            case 'disabled':
+                this.disabled ? this.classList.add(SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(SELECT_CSS_CLASSES.selectDisabled);
+        }
+    }
     firstUpdated(props) {
         super.firstUpdated(props);
-        if (this._$dropdownContent.value)
-            this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
+        this._setDropdownContentWidth();
     }
     _setupEvents() {
         this.addEventListener(SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
+        window.addEventListener('resize', this._handleResize);
     }
     _appendNewHTMLOption(option, position) {
         const $list = this._$optionsList.value;
@@ -141,6 +180,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     replaceOptions(options) {
         this._selectController.replaceOptions(options);
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._selectController.options$.unsubscribe(this._optionsObserver);
+        window.removeEventListener('resize', this._handleResize);
+    }
     render() {
         var _a;
         const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
@@ -150,41 +194,48 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 @dropdown.showed=${() => (this.opened = true)}
                 @dropdown.hidden=${this._closeSelect}
                 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.input)} </h-dropdown-toggler>
 
                 <h-dropdown-content class=${SELECT_CSS_CLASSES.selectContent} ${ref(this._$dropdownContent)} name=${this.controlName}>
-                    <h-select-close-btn @click=${this._closeSelect}></h-select-close-btn>
+                    <h-select-close-btn @selectCloseBtn.close=${this._closeSelect}></h-select-close-btn>
 
                     ${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-options
-                                      class=${SELECT_CSS_CLASSES.selectOptions}
-                                      ${ref(this._$optionsList)}
-                                      @selectOptions.clicked=${this._handleOptionClicked}
-                                  >
-                                      ${this.getSlot(SELECT_SLOT_NAMES.content)}
-                                  </h-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 && Object.keys(this._$options).length
+            ? 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 class="btn btn_secondary" @click=${this._clearOptions}>clear</button>
-                                      <h-select-close-btn class="btn btn_primary" @click=${this._closeSelect}>ok</h-select-close-btn>
-                                  </section>
-                              `
+                              <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
+                                  >
+                              </section>
+                          `
             : nothing}
                 </h-dropdown-content>
             </h-dropdown>
@@ -195,7 +246,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
 };
 HSelect._components = {
     search: HSelectSearch,
-    icon: HIcon
+    icon: HIcon,
+    closeBtn: HSelectCloseBtn
 };
 __decorate([
     property({ type: String }),
@@ -209,6 +261,18 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
 ], HSelect.prototype, "opened", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], HSelect.prototype, "offset", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "disabled", void 0);
 __decorate([
     state(),
     __metadata("design: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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;"}

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

@@ -11,11 +11,16 @@ export declare const SELECT_EVENT_NAMES: {
     readonly deselectOption: "selectOption.deselect";
 };
 export declare const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
+export declare const SELECT_RESIZE_DEBOUNCE_TIME = 100;
 export declare const SELECT_CSS_CLASSES: {
     readonly select: "select";
     readonly selectOpened: "select_opened";
+    readonly selectError: "select_error";
+    readonly selectDisabled: "select_disabled";
     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

@@ -11,15 +11,20 @@ const SELECT_EVENT_NAMES = {
     deselectOption: 'selectOption.deselect'
 };
 const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
+const SELECT_RESIZE_DEBOUNCE_TIME = 100;
 const baseSelectClass = 'select';
 const SELECT_CSS_CLASSES = {
     select: baseSelectClass,
     selectOpened: `${baseSelectClass}_opened`,
+    selectError: `${baseSelectClass}_error`,
+    selectDisabled: `${baseSelectClass}_disabled`,
     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 };
+export { MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH, SELECT_CONTEXTS, SELECT_CSS_CLASSES, SELECT_EVENT_NAMES, SELECT_RESIZE_DEBOUNCE_TIME, SELECT_SLOT_NAMES };
 //# sourceMappingURL=select_constants.js.map

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;"}
+{"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/esm/packages/phoenix/src/components/form/switch/switch.js

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 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 classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
 import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';

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

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

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

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 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 classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
 import { TEXTAREA_PROPS_TO_SYNC, TEXTAREA_CONTROL_CSS_CLASSES } from './textarea_constants.js';

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

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

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

@@ -4,7 +4,7 @@ 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 { ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP } from './icon_constants.js';
-import classnames from '../../../../../external/classnames/index.js';
+import classnames from '../../../external/classnames/index.js';
 import { namespacedAttribute } from '../../directives/namespaced_attribure_directive.js';
 
 var HIcon_1;

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

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.d.ts

@@ -56,7 +56,7 @@ export declare const CALCULATOR_DIRECTIONS: {
 export declare const NON_STATIC_POSITIONS: string[];
 export declare const OVERFLOW_SCROLL = "scroll";
 export declare const OVERFLOW_AUTO = "auto";
-export declare const DEFAULT_THROTTLE_WAIT_TIME = 300;
+export declare const DEFAULT_THROTTLE_WAIT_TIME = 150;
 export declare const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
 export declare const SHRINK_MODE_BOTTOM_MARGIN = 20;
 export declare const SHRINK_MODE_MIN_HEIGHT = 80;

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js

@@ -39,7 +39,7 @@ const CALCULATOR_DIRECTIONS = {
 const NON_STATIC_POSITIONS = ['relative', 'absolute', 'fixed', 'sticky'];
 const OVERFLOW_SCROLL = 'scroll';
 const OVERFLOW_AUTO = 'auto';
-const DEFAULT_THROTTLE_WAIT_TIME = 300;
+const DEFAULT_THROTTLE_WAIT_TIME = 150;
 const DEFAULT_SCROLL_THROTTLE_WAIT_TIME = 15;
 const SHRINK_MODE_BOTTOM_MARGIN = 20;
 const SHRINK_MODE_MIN_HEIGHT = 80;

package/build/esm/packages/phoenix/src/directives/observable_directive.js

@@ -1,7 +1,7 @@
 import { noChange } from 'lit';
-import { Observer } from '../core/classes/observer/observer.js';
 import { directive as e } from '../../../../external/lit/external/lit-html/directive.js';
 import { AsyncDirective as c } from '../../../../external/lit/external/lit-html/async-directive.js';
+import { Observer } from '../core/classes/observer/observer.js';
 
 class ObserveDirective extends c {
     render(observable, render) {

package/build/esm/packages/phoenix/src/directives/observable_directive.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,+BAA+B,yDAAiE;AAChG,oCAAoC,+DAAuE;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA;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,+BAA+B,yDAAiE;AAChG,oCAAoC,+DAAuE;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.js

@@ -2,6 +2,7 @@ export { DEFAULT_SLOT_NAME } from './core/phoenix_light_lit_element/phoenix_ligh
 export { PhoenixLightLitElement } from './core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 export { KeystrokesController } from './controllers/keystrokes_controller/keystrokes_controller.js';
 export { BtnController } from './controllers/btn_controller/btn_controller.js';
+export { HIcon } from './components/icon/icon.js';
 export { HOption } from './components/form/select/components/option/select_option.js';
 export { HOptionContent } from './components/form/select/components/option/select_option_content.js';
 export { HOptions } from './components/form/select/components/select_options.js';
@@ -17,7 +18,6 @@ export { ToggleElementAriaController } from './controllers/toggle_element_aria_c
 export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
 export { RelativePositionController } from './controllers/relative_position_controller/relative_position_controller.js';
 export { HDropdown } from './components/dropdown/dropdown.js';
-export { HIcon } from './components/icon/icon.js';
 export { HSelect } from './components/form/select/select.js';
 export { HModal } from './components/modal/modal.js';
 export { HModalOpener } from './components/modal/modal_opener.js';

package/package.json

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