@shoper/phoenix_design_system 1.1.0-8 → 1.1.0

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

@@ -28,6 +28,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
         this.toggleOnHover = false;
         this.name = '';
         this.transition = 'direction';
+        this.offset = 0;
         this.portalTarget = dropdown_constants.DEFAULT_DROPDOWN_PORTAL_NAME;
         this._backdropController = new backdrop_controller.BackdropController();
         this._lastFocusableElement = undefined;
@@ -242,7 +243,8 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
                 relativeElement: this.$dropdownToggler,
                 elementToPosition: this.$dropdownContent,
                 disablePositioningOnCondition: () => window.innerWidth < global_constants.BREAKPOINTS.xs || !this.opened,
-                portalElementsNames: [dropdown_constants.DROPDOWN_CONTENT_NAME]
+                portalElementsNames: [dropdown_constants.DROPDOWN_CONTENT_NAME],
+                offset: this.offset
             });
         if (!this._clickOutsideController)
             this._clickOutsideController = new click_outside_controller.ClickOutsideController({
@@ -365,6 +367,10 @@ tslib_es6.__decorate([
     decorators_js.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdown.prototype, "transition", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Number }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HDropdown.prototype, "offset", void 0);
 tslib_es6.__decorate([
     decorators_js.property({ type: String }),
     tslib_es6.__metadata("design:type", Object)

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_content.js

@@ -11,11 +11,14 @@ var dropdown_constants = require('./dropdown_constants.js');
 
 exports.HDropdownContent = class HDropdownContent extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
-        super();
+        super(...arguments);
         this.name = '';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(dropdown_constants.DROPDOWN_CONTENT_CSS_CLASS);
         this.setAttribute('role', 'menu');
         this.slot = this.hasAttribute('slot') ? this.slot : 'content';
-        this.classList.add(dropdown_constants.DROPDOWN_CONTENT_CSS_CLASS);
         Array.from(this.children).forEach((element) => {
             element.setAttribute('role', 'menuitem');
         });
@@ -30,7 +33,6 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Object)
 ], exports.HDropdownContent.prototype, "name", void 0);
 exports.HDropdownContent = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-dropdown-content'),
-    tslib_es6.__metadata("design:paramtypes", [])
+    phoenix_custom_element.phoenixCustomElement('h-dropdown-content')
 ], exports.HDropdownContent);
 //# sourceMappingURL=dropdown_content.js.map

package/build/cjs/packages/phoenix/src/components/dropdown/dropdown_content.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;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;AACA;AACA;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/checkbox/checkbox_control.js

@@ -6,9 +6,9 @@ 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 decorators_js = require('@lit/reactive-element/decorators.js');
+var index = require('../../../../../../external/classnames/index.js');
 var litHtml = require('lit-html');
 var ref_js = require('lit-html/directives/ref.js');
-var index = require('../../../../../../external/classnames/index.js');
 var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
 var checkbox_constants = require('./checkbox_constants.js');

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.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,oBAAoB,gDAAoD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,gDAAoD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
-var lit = require('lit');
 var phoenix_light_lit_element = require('../../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../../../core/decorators/phoenix_custom_element.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
 var select_components_constatns = require('../select_components_constatns.js');
 var btn_controller = require('../../../../../controllers/btn_controller/btn_controller.js');
 var select_option_constants = require('./select_option_constants.js');
-var litHtml = require('lit-html');
 
 exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -28,7 +26,10 @@ exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLi
     }
     connectedCallback() {
         super.connectedCallback();
-        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
+        if (!this._btnController)
+            this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent, {
+                isNavigable: false
+            });
         this.classList.add(select_option_constants.SELECT_OPTION_CSS_CLASSES.selectOption);
         this.setAttribute('role', 'option');
         this._setupEvents();
@@ -36,8 +37,22 @@ exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLi
     _setupEvents() {
         this.addEventListener('click', this._dispatchClickedEvent);
     }
-    render() {
-        return litHtml.html ` ${this.getSlot('content')} ${this.selected ? litHtml.html `<h-icon icon-name="icon-check"></h-icon>` : lit.nothing} `;
+    attributeChangedCallback(name, _old, value) {
+        super.attributeChangedCallback(name, _old, value);
+        switch (name) {
+            case 'selected':
+                this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
+        }
+    }
+    _addSelectedIcon() {
+        this._$checkedIcon = document.createElement('h-icon');
+        this._$checkedIcon.setAttribute('icon-name', 'icon-check');
+        this.append(this._$checkedIcon);
+    }
+    _removeSelectedIcon() {
+        var _a;
+        (_a = this._$checkedIcon) === null || _a === void 0 ? void 0 : _a.remove();
+        this._$checkedIcon = undefined;
     }
 };
 tslib_es6.__decorate([

package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option.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;"}
+{"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;"}

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

@@ -11,7 +11,6 @@ var select_option_constants = require('./select_option_constants.js');
 exports.HOptionContent = class HOptionContent extends phoenix_light_lit_element.PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('slot', 'content');
         this.classList.add(select_option_constants.SELECT_OPTION_CSS_CLASSES.selectOptionContent);
     }
 };

package/build/cjs/packages/phoenix/src/components/form/select/components/option/select_option_content.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;"}
+{"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;"}

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

@@ -37,6 +37,7 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
                 .value=${this.value}
                 aria-autocomplete="list"
                 autocomplete="false"
+                placeholder="Szukaj"
                 @input=${this._handleInputChange}
             />
         `;

package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search.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,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA,uBAAuB,qDAAyD;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_element = require('../../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../../core/decorators/phoenix_custom_element.js');
+var select_components_constatns = require('./select_components_constatns.js');
+var btn_controller = require('../../../../controllers/btn_controller/btn_controller.js');
+var litHtml = require('lit-html');
+
+exports.HSelectCloseBtn = class HSelectCloseBtn extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._dispatchCloseEvent = () => {
+            this.dispatchEvent(new CustomEvent(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, {
+                bubbles: true
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('aria-label', 'close select');
+        if (!this._btnController)
+            this._btnController = new btn_controller.BtnController(this, this._dispatchCloseEvent);
+        this.addEventListener('click', this._dispatchCloseEvent);
+    }
+    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>`} `;
+    }
+};
+exports.HSelectCloseBtn = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.closeBtn)
+], exports.HSelectCloseBtn);
+//# sourceMappingURL=select_close_btn.js.map

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

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

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

@@ -22,9 +22,11 @@ const SELECT_RELATED_COMPONENTS_NAMES = {
     closeBtn: 'h-select-close-btn',
     search: 'h-select-search'
 };
+const SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME = 'content';
 const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';
 
 exports.SELECT_CLOSE_BTN_EVENT_NAMES = SELECT_CLOSE_BTN_EVENT_NAMES;
+exports.SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME = SELECT_CLOSE_BUTTON_CONTENT_SLOT_NAME;
 exports.SELECT_INPUT_PLACEHOLDER_SLOT_NAME = SELECT_INPUT_PLACEHOLDER_SLOT_NAME;
 exports.SELECT_OPTIONS_EVENT_NAMES = SELECT_OPTIONS_EVENT_NAMES;
 exports.SELECT_OPTION_EVENT_NAMES = SELECT_OPTION_EVENT_NAMES;

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

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

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

@@ -10,6 +10,7 @@ var select_components_constatns = require('../select_components_constatns.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');
 
@@ -17,6 +18,11 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
     constructor() {
         super(...arguments);
         this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
+        this._handleSelectedOptionChanged = (selectedOptions) => {
+            selectedOptions.length
+                ? this.classList.add(select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerSelected)
+                : this.classList.remove(select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerSelected);
+        };
         this._dispatchOptionDeselect = (option) => {
             this.dispatchEvent(new CustomEvent(select_constants.SELECT_EVENT_NAMES.deselectOption, {
                 detail: option.value,
@@ -34,27 +40,36 @@ exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.
     async _subscribeObserver() {
         this.isMultiselect = (await this._contextConsumer.consumeAsync(select_constants.SELECT_CONTEXTS.isMultiselect));
         this.selectedOptions$ = (await this._contextConsumer.consumeAsync(select_constants.SELECT_CONTEXTS.selectedOptions$));
+        this._selectedOptionsObserver = new observer.Observer(this._handleSelectedOptionChanged);
+        this.selectedOptions$.subscribe(this._selectedOptionsObserver);
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.selectedOptions$) === null || _a === void 0 ? void 0 : _a.unsubscribe(this._selectedOptionsObserver);
     }
     render() {
         if (!this.selectedOptions$)
             return;
         return litHtml.html `
-            <ul class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerValues}>
-                ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
+            ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
             var _a;
             if (!selectOptions.length)
-                return litHtml.html `${(_a = this.getSlot(select_components_constatns.SELECT_INPUT_PLACEHOLDER_SLOT_NAME)) !== null && _a !== void 0 ? _a : 'Select'}`;
-            return this.isMultiselect
-                ? litHtml.html `${selectOptions.map((option) => litHtml.html `<li>
+                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}>
+                    ${this.isMultiselect
+                ? 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>`;
+                              </li>`)
+                : litHtml.html `<li>${selectOptions[0].content}</li>`}
+                </ul>`;
         })}
-            </ul>
 
             <h-icon icon-name="icon-chevron-down"></h-icon>
         `;

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

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const baseClass = 'select-toggler';
 const SELECT_TOGGLER_CSS_CLASSES = {
     selectToggler: baseClass,
-    selectTogglerValues: `${baseClass}__values`
+    selectTogglerSelected: `${baseClass}_selected`,
+    selectTogglerValues: `${baseClass}__values`,
+    selectTogglerPlaceholder: `${baseClass}__placeholder`
 };
 
 exports.SELECT_TOGGLER_CSS_CLASSES = SELECT_TOGGLER_CSS_CLASSES;

package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -20,7 +20,6 @@ class BaseSelectController {
             }, { visibleCount: 0, selectedCount: 0 });
             this.visibleOptionsCount = visibleCount;
             this.selectedOptionsCount = selectedCount;
-            this.selectedOptions$.notify(selectOptions.filter((option) => option.selected));
         };
         this.host = host;
         this.host.addController(this);
@@ -55,11 +54,13 @@ class BaseSelectController {
     deselectOptions() {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
+        this.selectedOptions$.notify([]);
         this.requestOptionsUpdate();
     }
     deselectOption(option) {
         var _a;
         (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
+        this.selectedOptions$.notify([]);
         this.requestOptionsUpdate();
     }
     filterOptions(value) {

package/build/cjs/packages/phoenix/src/components/form/select/controllers/base_select_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/multi_select_controller.js

@@ -10,10 +10,12 @@ class MultiSelectController extends base_select_controller.BaseSelectController
     }
     selectOption(option) {
         option.selected = true;
+        this.selectedOptions$.notify((selectedOptions) => [...selectedOptions, option]);
         this.requestOptionsUpdate();
     }
     deselectOption(option) {
         option.selected = false;
+        this.selectedOptions$.notify((selectedOptions) => selectedOptions.filter((currOption) => currOption.value !== option.value));
         this.requestOptionsUpdate();
     }
 }

package/build/cjs/packages/phoenix/src/components/form/select/controllers/multi_select_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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -15,7 +15,8 @@ class SelectOptionMapper {
             value: $option.value,
             disabled: $option.disabled,
             hidden: $option.hidden,
-            content: optionContent
+            content: optionContent,
+            selected: $option.selected
         });
     }
 }

package/build/cjs/packages/phoenix/src/components/form/select/model/select_option_mapper.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;"}
+{"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;"}

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

@@ -9,24 +9,27 @@ 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 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 context_provider_controller = require('../../../core/context/context_provider_controller.js');
 var ref_js = require('lit-html/directives/ref.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');
 var select_search = require('./components/search/select_search.js');
 var list_box_keyboard_controller = require('../../../controllers/list_box_controller/list_box_keyboard_controller.js');
-var icon = require('../../icon/icon.js');
 var select_option_mapper = require('./model/select_option_mapper.js');
 var select_utils = require('./select_utils.js');
+var select_close_btn = require('./components/select_close_btn.js');
 
 exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
         this.multiselect = false;
         this.opened = false;
+        this.offset = 2;
         this._searchValue = '';
         this._$options = {};
         this._$dropdown = ref_js.createRef();
@@ -34,6 +37,10 @@ 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 = () => {
+            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)
@@ -66,6 +73,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         };
         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;
@@ -73,19 +82,35 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._clearOptions = () => {
             this._selectController.deselectOptions();
         };
+        this._handleResize = debounce['default'](() => {
+            this._closeSelect();
+            this._setDropdownContentWidth();
+        }, 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));
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('opened'))
-            this.opened ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectOpened) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectOpened);
+        if (changedProperties.has('opened')) {
+            if (this.opened) {
+                this.classList.add(select_constants.SELECT_CSS_CLASSES.selectOpened);
+                this._focusElementAfterSelectOpened();
+            }
+            else {
+                this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectOpened);
+            }
+        }
         if (this._$optionsList.value && !this._listBoxController)
             this._listBoxController = new list_box_keyboard_controller.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_constants.SELECT_CSS_CLASSES.select);
@@ -93,7 +118,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
         this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiselect);
         const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
-        this._selectController.options$.subscribe(new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions)));
+        this._optionsObserver = new observer.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.');
@@ -102,17 +128,27 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 [$option.value]: $option
             };
         }, {});
-        this._selectController.options$.notify($options.map(select_option_mapper.SelectOptionMapper.toModel));
+        const options = $options.map(select_option_mapper.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_constants.SELECT_CSS_CLASSES.selectError) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectError);
+        }
+    }
     firstUpdated(props) {
         super.firstUpdated(props);
-        if (this._$dropdownContent.value)
-            this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
+        this._setDropdownContentWidth();
     }
     _setupEvents() {
         this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
+        window.addEventListener('resize', this._handleResize);
     }
     _appendNewHTMLOption(option, position) {
         const $list = this._$optionsList.value;
@@ -145,6 +181,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     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 : [];
@@ -154,41 +195,48 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 @dropdown.showed=${() => (this.opened = true)}
                 @dropdown.hidden=${this._closeSelect}
                 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.input)} </h-dropdown-toggler>
 
                 <h-dropdown-content class=${select_constants.SELECT_CSS_CLASSES.selectContent} ${ref_js.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 > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
             ? lit.html `<h-select-search
-                                  class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
-                                  ${ref_js.ref(this._$search)}
-                                  .value=${this._searchValue}
-                                  @selectSearch.search=${this._handleSearch}
-                              ></h-select-search>`
+                              class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
+                              ${ref_js.ref(this._$search)}
+                              .value=${this._searchValue}
+                              @selectSearch.search=${this._handleSearch}
+                          ></h-select-search>`
             : lit.nothing}
                     ${this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
             ? lit.html `
-                                  <h-options
-                                      class=${select_constants.SELECT_CSS_CLASSES.selectOptions}
-                                      ${ref_js.ref(this._$optionsList)}
-                                      @selectOptions.clicked=${this._handleOptionClicked}
-                                  >
-                                      ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
-                                  </h-options>
-                              `
+                              <h-options
+                                  class=${select_constants.SELECT_CSS_CLASSES.selectOptions}
+                                  ${ref_js.ref(this._$optionsList)}
+                                  @selectOptions.clicked=${this._handleOptionClicked}
+                              >
+                                  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
+                              </h-options>
+                          `
+            : lit.nothing}
+                    ${!this._selectController.visibleOptionsCount
+            ? lit.html `<div>
+                              <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
+                                  Brak wyników dla: <em class=${select_constants.SELECT_CSS_CLASSES.selectSearchedPhrase}>"${this._searchValue}"</em>
+                              </p>
+                          </div>`
             : lit.nothing}
-                    ${!this._selectController.visibleOptionsCount ? lit.html `<p>brak wyników dla ${this._searchValue}</p>` : lit.nothing}
                     ${this.multiselect && this._selectController.selectedOptionsCount >= 1
             ? lit.html `
-                                  <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
-                                      <button @click=${this._clearOptions}>clear</button>
-                                      <h-select-close-btn @click=${this._closeSelect}>ok</h-select-close-btn>
-                                  </section>
-                              `
+                              <section class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
+                                  <button class="btn btn_secondary btn_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>
+                          `
             : lit.nothing}
                 </h-dropdown-content>
             </h-dropdown>
@@ -199,7 +247,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
 };
 exports.HSelect._components = {
     search: select_search.HSelectSearch,
-    icon: icon.HIcon
+    icon: icon.HIcon,
+    closeBtn: select_close_btn.HSelectCloseBtn
 };
 tslib_es6.__decorate([
     decorators_js.property({ type: String }),
@@ -213,6 +262,14 @@ tslib_es6.__decorate([
     decorators_js.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HSelect.prototype, "opened", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Number }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HSelect.prototype, "offset", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelect.prototype, "error", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", String)