@shoper/phoenix_design_system 1.1.4 → 1.1.5-1

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/file_picker/file/file.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+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 file_picker_constants = require('../file_picker_constants.js');
+var control_props_sync_consumer_controller = require('../../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
+
+exports.HFile = class HFile extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._handleClick = () => {
+            const removeItemEvent = new CustomEvent(file_picker_constants.FILE_ITEM_EVENT_NAMES.removed, {
+                bubbles: true,
+                detail: {
+                    containerId: this.containerId
+                }
+            });
+            this.dispatchEvent(removeItemEvent);
+        };
+        new control_props_sync_consumer_controller.ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(file_picker_constants.FILE_ITEM_CSS_CLASSES.file);
+    }
+    render() {
+        return lit.html `
+            <span class="${file_picker_constants.FILE_ITEM_CSS_CLASSES.fileName}">${this.name}</span>
+            <button class="${file_picker_constants.FILE_ITEM_CSS_CLASSES.fileRemoveButton}" @click="${this._handleClick}">
+                ${this.removeButtonIconName ? lit.html ` <h-file-picker-icon name="${this.removeButtonIconName}" />` : lit.nothing}
+                ${this.removeButtonText}
+            </button>
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'container-id' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "containerId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "removeButtonText", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFile.prototype, "removeButtonIconName", void 0);
+exports.HFile = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-file'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HFile);
+//# sourceMappingURL=file.js.map

package/build/cjs/packages/phoenix/src/components/form/file_picker/file/file.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;AACA;AACA;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/file_picker/file_picker.js

@@ -0,0 +1,146 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+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 index = require('../../../../external/classnames/index.js');
+var ref_js = require('lit-html/directives/ref.js');
+var file_picker_constants = require('./file_picker_constants.js');
+var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var ifDefined = require('lit/directives/if-defined');
+
+exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._$fileInputRef = ref_js.createRef();
+        this._handleChangeEvent = (event) => {
+            this.fileName = this._getFileName(event);
+            this.classList.add(file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+        };
+        this._getFileName = (event) => {
+            const targetElement = event.currentTarget;
+            const fileList = targetElement.files;
+            return fileList[0].name;
+        };
+        this._removeFileItem = (event) => {
+            const { containerId } = event.detail;
+            const $fileInput = this._$fileInputRef.value;
+            if (this.controlId === containerId) {
+                this.fileName = '';
+                if ($fileInput)
+                    $fileInput.value = '';
+            }
+            this.classList.remove(file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerHasValue);
+        };
+        new control_props_sync_provider_controller.ControlPropsSyncProviderController({
+            host: this,
+            propsToSync: [...Object.values(file_picker_constants.FILE_ITEM_PROPS_TO_SYNC)]
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._addEventListeners();
+        this.classList.add(file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePicker);
+        const cssClasses = index['default']({
+            [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
+            [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
+            [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._removeEventListeners();
+    }
+    render() {
+        super.render();
+        return lit.html `
+            <input
+                ${ref_js.ref(this._$fileInputRef)}
+                type="file"
+                class="${file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerInput}"
+                id="${ifDefined.ifDefined(this.controlId)}"
+                name="${ifDefined.ifDefined(this.controlName)}"
+                value="${ifDefined.ifDefined(this.value)}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                accept="${ifDefined.ifDefined(this.formats)}"
+                @change="${this._handleChangeEvent}"
+                hidden
+            />
+
+            ${!this.fileName
+            ? lit.html `<label class="${file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerLabel}" for="${ifDefined.ifDefined(this.controlId)}">
+                      ${this.labelIconName ? lit.html ` <h-file-picker-icon name="${this.labelIconName}" />` : lit.nothing}
+                      ${this.labelText}
+                  </label>`
+            : lit.nothing}
+
+            ${this.fileName ? lit.html `<h-file name="${this.fileName}" container-id="${this.controlId}" />` : lit.nothing}
+        `;
+    }
+    _addEventListeners() {
+        document.addEventListener(file_picker_constants.FILE_ITEM_EVENT_NAMES.removed, this._removeFileItem);
+    }
+    _removeEventListeners() {
+        document.removeEventListener(file_picker_constants.FILE_ITEM_EVENT_NAMES.removed, this._removeFileItem);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'control-id', reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "controlId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'control-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "controlName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HFilePicker.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HFilePicker.prototype, "required", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HFilePicker.prototype, "error", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "value", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'label-text' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "labelText", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'label-icon-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "labelIconName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'remove-button-text' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "removeButtonText", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'remove-button-icon-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "removeButtonIconName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "formats", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePicker.prototype, "fileName", void 0);
+exports.HFilePicker = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-file-picker'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HFilePicker);
+//# sourceMappingURL=file_picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA,oBAAoB,0CAA8C;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/file_picker/file_picker_constants.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const baseFileItemClass = 'file';
+const FILE_ITEM_CSS_CLASSES = {
+    file: baseFileItemClass,
+    fileName: `${baseFileItemClass}__name`,
+    fileRemoveButton: `${baseFileItemClass}__remove-button`
+};
+const FILE_ITEM_EVENT_NAMES = {
+    removed: 'fileItemRemoved'
+};
+const FILE_ITEM_PROPS_TO_SYNC = {
+    removeButtonText: 'removeButtonText',
+    removeButtonIconName: 'removeButtonIconName'
+};
+const baseFilePickerControlClass = 'file-picker';
+const FILE_PICKER_CONTROL_CSS_CLASSES = {
+    filePicker: baseFilePickerControlClass,
+    filePickerDisabled: `${baseFilePickerControlClass}_disabled`,
+    filePickerRequired: `${baseFilePickerControlClass}_required`,
+    filePickerError: `${baseFilePickerControlClass}_error`,
+    filePickerHasValue: `${baseFilePickerControlClass}_has-value`,
+    filePickerInput: `${baseFilePickerControlClass}__input`,
+    filePickerLabel: `${baseFilePickerControlClass}__label`
+};
+const baseFilePickerIconClass = 'file-picker-icon';
+const FILE_PICKER_ICON_CSS_CLASSES = {
+    filePickerIcon: baseFilePickerIconClass
+};
+
+exports.FILE_ITEM_CSS_CLASSES = FILE_ITEM_CSS_CLASSES;
+exports.FILE_ITEM_EVENT_NAMES = FILE_ITEM_EVENT_NAMES;
+exports.FILE_ITEM_PROPS_TO_SYNC = FILE_ITEM_PROPS_TO_SYNC;
+exports.FILE_PICKER_CONTROL_CSS_CLASSES = FILE_PICKER_CONTROL_CSS_CLASSES;
+exports.FILE_PICKER_ICON_CSS_CLASSES = FILE_PICKER_ICON_CSS_CLASSES;
+//# sourceMappingURL=file_picker_constants.js.map

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

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

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker_icon/file_picker_icon.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+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 icon_constants = require('../../../icon/icon_constants.js');
+var file_picker_constants = require('../file_picker_constants.js');
+
+exports.HFilePickerIcon = class HFilePickerIcon extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(file_picker_constants.FILE_PICKER_ICON_CSS_CLASSES.filePickerIcon, icon_constants.ICON_CSS_CLASSES.icon);
+    }
+    render() {
+        super.render();
+        return lit.html ` <h-icon icon-name=${this.iconName}></h-icon> `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HFilePickerIcon.prototype, "iconName", void 0);
+exports.HFilePickerIcon = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-file-picker-icon')
+], exports.HFilePickerIcon);
+//# sourceMappingURL=file_picker_icon.js.map

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker_icon/file_picker_icon.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;"}

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

@@ -7,9 +7,9 @@ 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 index = require('../../../../external/classnames/index.js');
-var input_constants = require('./input_constants.js');
 var control_props_sync_controller_constants = require('../controllers/props_synchronizing/control_props_sync_controller_constants.js');
 var control_props_sync_provider_controller = require('../controllers/props_synchronizing/control_props_sync_provider_controller.js');
+var input_constants = require('./input_constants.js');
 
 exports.HInput = class HInput extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

package/build/cjs/packages/phoenix/src/components/form/input/input_control.js

@@ -7,8 +7,8 @@ var lit = require('lit');
 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 input_constants = require('./input_constants.js');
 var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
+var input_constants = require('./input_constants.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
 
 exports.HInputControl = class HInputControl extends phoenix_light_lit_element.PhoenixLightLitElement {

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