@shoper/phoenix_design_system 1.3.0 → 1.3.2

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

package/build/cjs/packages/phoenix/src/components/form/radio/radio_content.js

@@ -0,0 +1,45 @@
+'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 ifDefined_js = require('lit-html/directives/if-defined.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
+var label_constants = require('../label/label_constants.js');
+var radio_constants = require('./radio_constants.js');
+
+exports.HRadioContent = class HRadioContent extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        new control_props_sync_consumer_controller.ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(radio_constants.RADIO_CONTROL_CSS_CLASSES.radioContent);
+    }
+    render() {
+        super.render();
+        return lit.html `
+            <label class="${label_constants.LABEL_CSS_CLASSES.label}" for="${ifDefined_js.ifDefined(this.controlId)}">${this.getSlot(radio_constants.RADIO_SLOTS.label)}</label>
+
+            ${this.hasSlot(radio_constants.RADIO_SLOTS.description)
+            ? lit.html ` <div class="${radio_constants.RADIO_CONTROL_CSS_CLASSES.radioDescription}">${this.getSlot(radio_constants.RADIO_SLOTS.description)}</div> `
+            : lit.nothing}
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HRadioContent.prototype, "controlId", void 0);
+exports.HRadioContent = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-radio-content'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HRadioContent);
+//# sourceMappingURL=radio_content.js.map

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

@@ -0,0 +1,88 @@
+'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 ifDefined_js = require('lit-html/directives/if-defined.js');
+var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
+var radio_constants = require('./radio_constants.js');
+
+exports.HRadioControl = class HRadioControl extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._handleChangeEvent = (event) => {
+            this.dispatchEvent(new CustomEvent(radio_constants.RADIO_CONTROL_EVENTS.change, {
+                detail: event,
+                bubbles: true
+            }));
+        };
+        new control_props_sync_consumer_controller.ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(radio_constants.RADIO_CONTROL_CSS_CLASSES.radioControl);
+    }
+    render() {
+        super.render();
+        return lit.html `
+            <input
+                type="radio"
+                class="${radio_constants.RADIO_CONTROL_CSS_CLASSES.radioInput}"
+                id="${ifDefined_js.ifDefined(this.controlId)}"
+                name="${ifDefined_js.ifDefined(this.controlName)}"
+                value="${ifDefined_js.ifDefined(this.value)}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                ?readonly="${this.readonly}"
+                ?hidden="${this.hidden}"
+                ?checked="${this.checked}"
+                @change="${this._handleChangeEvent}"
+            />
+
+            <label class="${radio_constants.RADIO_CONTROL_CSS_CLASSES.radioLabel}" for="${ifDefined_js.ifDefined(this.controlId)}"></label>
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HRadioControl.prototype, "controlId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HRadioControl.prototype, "controlName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadioControl.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadioControl.prototype, "required", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadioControl.prototype, "hidden", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadioControl.prototype, "readonly", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HRadioControl.prototype, "checked", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HRadioControl.prototype, "value", void 0);
+exports.HRadioControl = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-radio-control'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HRadioControl);
+//# sourceMappingURL=radio_control.js.map

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

@@ -0,0 +1,92 @@
+'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 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');
+require('@lit/reactive-element');
+
+exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._dispatchClickedEvent = () => {
+            if (this.disabled && !this.clickable)
+                return;
+            this._dispatchEvent(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        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();
+    }
+    _setupEvents() {
+        this.addEventListener('click', this._dispatchClickedEvent);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('selected'))
+            this.selected ? this._addSelectedIcon() : this._removeSelectedIcon();
+        if (changedProperties.has('inactive') || changedProperties.has('hidden') || changedProperties.has('disabled'))
+            this._dispatchSelectUpdated();
+    }
+    _dispatchSelectUpdated() {
+        this._dispatchEvent(select_components_constatns.SELECT_OPTION_EVENT_NAMES.updated);
+    }
+    _dispatchEvent(eventName) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            bubbles: true,
+            detail: {
+                $option: this
+            }
+        }));
+    }
+    _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([
+    decorators_js.property({ type: String, reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HOption.prototype, "value", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HOption.prototype, "selected", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HOption.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HOption.prototype, "hidden", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HOption.prototype, "inactive", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HOption.prototype, "clickable", void 0);
+exports.HOption = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option)
+], exports.HOption);
+//# sourceMappingURL=select_option.js.map

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

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

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const selectOption = 'select-option';
+const SELECT_OPTION_CSS_CLASSES = {
+    selectOption: selectOption,
+    selectOptionContent: `${selectOption}__content`
+};
+
+exports.SELECT_OPTION_CSS_CLASSES = SELECT_OPTION_CSS_CLASSES;
+//# sourceMappingURL=select_option_constants.js.map

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+'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 select_components_constatns = require('../select_components_constatns.js');
+var debounce = require('../../../../../../../../external/lodash/debounce.js');
+var select_search_constants = require('./select_search_constants.js');
+
+exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this._handleInputChange = debounce['default'](({ target }) => {
+            this.value = target.value;
+            this.dispatchEvent(new CustomEvent(select_components_constatns.SELECT_SEARCH_EVENT_NAMES.search, {
+                bubbles: true,
+                detail: target.value
+            }));
+        }, 200);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch);
+    }
+    render() {
+        return lit.html `
+            <h-icon icon-name="icon-search" class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchIcon}></h-icon>
+            <input
+                class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearchInput}
+                type="text"
+                role="search"
+                .value=${this.value}
+                aria-autocomplete="list"
+                autocomplete="false"
+                placeholder="Szukaj"
+                @input=${this._handleInputChange}
+            />
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSelectSearch.prototype, "value", void 0);
+exports.HSelectSearch = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.search)
+], exports.HSelectSearch);
+//# sourceMappingURL=select_search.js.map

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

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

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

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const baseClass = 'select-search';
+const SELECT_SEARCH_CSS_CLASSES = {
+    selectSearch: baseClass,
+    selectSearchIcon: `${baseClass}__icon`,
+    selectSearchInput: `${baseClass}__input`
+};
+
+exports.SELECT_SEARCH_CSS_CLASSES = SELECT_SEARCH_CSS_CLASSES;
+//# sourceMappingURL=select_search_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/search/select_search_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;"}

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

@@ -0,0 +1,38 @@
+'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 icon_constants = require('../../../icon/icon_constants.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 ` <h-icon size=${icon_constants.ICONS_SIZES.l} icon-name="icon-x"></h-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;AACA;"}

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SELECT_OPTION_EVENT_NAMES = {
+    clicked: 'selectOption.clicked',
+    updated: 'selectOption.updated'
+};
+const SELECT_OPTIONS_EVENT_NAMES = {
+    clicked: 'selectOptions.clicked',
+    updated: 'selectOptions.updated'
+};
+const SELECT_SEARCH_EVENT_NAMES = {
+    search: 'selectSearch.search'
+};
+const SELECT_CLOSE_BTN_EVENT_NAMES = {
+    close: 'selectCloseBtn.close'
+};
+const SELECT_RELATED_COMPONENTS_NAMES = {
+    option: 'h-option',
+    options: 'h-options',
+    optionContent: 'h-option-content',
+    toggler: 'h-select-toggler',
+    closeBtn: 'h-select-close-btn',
+    search: 'h-select-search',
+    placeholder: 'h-placeholder'
+};
+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;
+exports.SELECT_RELATED_COMPONENTS_NAMES = SELECT_RELATED_COMPONENTS_NAMES;
+exports.SELECT_SEARCH_EVENT_NAMES = SELECT_SEARCH_EVENT_NAMES;
+//# sourceMappingURL=select_components_constatns.js.map

package/build/cjs/packages/phoenix/src/components/form/select/components/select_components_constatns.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/select/components/select_options.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../../external/tslib/tslib.es6.js');
+var utilities = require('@dreamcommerce/utilities');
+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');
+
+exports.HOptions = class HOptions extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = ({ detail }) => {
+            this._dispatchEvent(select_components_constatns.SELECT_OPTIONS_EVENT_NAMES.clicked, detail.$option);
+        };
+        this._dispatchUpdatedEvent = ({ detail }) => {
+            this._dispatchEvent(select_components_constatns.SELECT_OPTIONS_EVENT_NAMES.updated, detail.$option);
+        };
+        this._dispatchEvent = (eventName, $option) => {
+            this.dispatchEvent(new CustomEvent(eventName, {
+                bubbles: true,
+                detail: {
+                    $option
+                }
+            }));
+        };
+        this.setAttribute('role', 'listbox');
+        utilities.UiDomUtils.makeNavigable(this);
+        this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
+        this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
+    }
+};
+exports.HOptions = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.options),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HOptions);
+//# sourceMappingURL=select_options.js.map

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

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

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 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 observable_directive = require('../../../../../directives/observable_directive.js');
+var select_toggler_constants = require('./select_toggler_constants.js');
+
+exports.HSelectToggler = class HSelectToggler extends phoenix_light_lit_element.PhoenixLightLitElement {
+    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,
+                bubbles: true
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        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();
+    }
+    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 `
+            ${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 : litHtml.html `<span class=${select_toggler_constants.SELECT_TOGGLER_CSS_CLASSES.selectTogglerPlaceholder}>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>`}
+                </ul>`;
+        })}
+
+            <h-icon icon-name="icon-chevron-down"></h-icon>
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSelectToggler.prototype, "selectedOptions$", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelectToggler.prototype, "isMultiselect", void 0);
+exports.HSelectToggler = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.toggler)
+], exports.HSelectToggler);
+//# sourceMappingURL=select_toggler.js.map

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

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

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

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

package/build/cjs/packages/phoenix/src/components/form/select/components/toggler/select_toggler_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;"}