@shoper/phoenix_design_system 1.0.3 → 1.1.0-1

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

@@ -0,0 +1,57 @@
+'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');
+
+exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._dispatchClickedEvent = () => {
+            if (this.disabled)
+                return;
+            this.dispatchEvent(new CustomEvent(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, {
+                bubbles: true,
+                detail: {
+                    $option: this
+                }
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
+        this.classList.add(select_option_constants.SELECT_OPTION_CSS_CLASSES.selectOption);
+        this.setAttribute('role', 'option');
+        this._setupEvents();
+    }
+    _setupEvents() {
+        this.addEventListener('click', this._dispatchClickedEvent);
+    }
+};
+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);
+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;"}

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/search/select_search.js

@@ -0,0 +1,50 @@
+'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);
+    }
+    render() {
+        return lit.html `
+            <div class=${select_search_constants.SELECT_SEARCH_CSS_CLASSES.selectSearch}>
+                <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"
+                    @input=${this._handleInputChange}
+                />
+            </div>
+        `;
+    }
+};
+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;"}

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_components_constatns.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SELECT_OPTION_EVENT_NAMES = {
+    clicked: 'selectOption.clicked'
+};
+const SELECT_OPTIONS_EVENT_NAMES = {
+    clicked: 'selectOptions.clicked'
+};
+const SELECT_SEARCH_EVENT_NAMES = {
+    search: 'selectSearch.search'
+};
+const SELECT_RELATED_COMPONENTS_NAMES = {
+    option: 'h-option',
+    options: 'h-select-options',
+    optionContent: 'h-option-content',
+    value: 'h-select-value',
+    closeBtn: 'h-select-close-btn',
+    search: 'h-select-search'
+};
+const SELECT_INPUT_PLACEHOLDER_SLOT_NAME = 'placeholder';
+
+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;"}

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

@@ -0,0 +1,31 @@
+'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.HSelectOptions = class HSelectOptions extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = ({ detail }) => {
+            this.dispatchEvent(new CustomEvent(select_components_constatns.SELECT_OPTIONS_EVENT_NAMES.clicked, {
+                bubbles: true,
+                detail: {
+                    $option: detail.$option
+                }
+            }));
+        };
+        this.setAttribute('role', 'listbox');
+        utilities.UiDomUtils.makeNavigable(this);
+        this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
+    }
+};
+exports.HSelectOptions = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.options),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HSelectOptions);
+//# 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;"}

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

@@ -0,0 +1,69 @@
+'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 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_value_constants = require('./select_value_constants.js');
+
+exports.HSelectValue = class HSelectValue extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
+        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.input);
+        this.setAttribute('role', 'textbox');
+        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$));
+    }
+    render() {
+        if (!this.selectedOptions$)
+            return;
+        return litHtml.html `
+            <div class=${select_value_constants.SELECT_VALUE_CSS_CLASSES.selectValue}>
+                ${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 `<h-tag @tag.remove=${() => this._dispatchOptionDeselect(option)}>
+                                  ${option.content}
+
+                                  <h-tag-remove-button>x</h-tag-remove-button>
+                              </h-tag>`)}`
+                : selectOptions[0].content;
+        })}
+            </div>
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HSelectValue.prototype, "selectedOptions$", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelectValue.prototype, "isMultiselect", void 0);
+exports.HSelectValue = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.value)
+], exports.HSelectValue);
+//# sourceMappingURL=select_value.js.map

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

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SELECT_VALUE_CSS_CLASSES = {
+    selectValue: 'select-value'
+};
+
+exports.SELECT_VALUE_CSS_CLASSES = SELECT_VALUE_CSS_CLASSES;
+//# sourceMappingURL=select_value_constants.js.map

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

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

@@ -0,0 +1,93 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('lit');
+var utilities = require('@dreamcommerce/utilities');
+var observer = require('../../../../core/classes/observer/observer.js');
+var behavior_subject = require('../../../../core/classes/behavior_subject/behavior_subject.js');
+
+class BaseSelectController {
+    constructor({ host }) {
+        this.options$ = new behavior_subject.BehaviorSubject([]);
+        this.selectedOptions$ = new behavior_subject.BehaviorSubject([]);
+        this._calculateValuesRelatedToOptions = (selectOptions) => {
+            const { visibleCount, selectedCount } = selectOptions.reduce((acc, option) => {
+                return {
+                    visibleCount: !option.hidden ? acc.visibleCount + 1 : acc.visibleCount,
+                    selectedCount: option.selected ? acc.selectedCount + 1 : acc.selectedCount
+                };
+            }, { 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);
+        this._setupComputedStateObserver();
+    }
+    _setupComputedStateObserver() {
+        this._optionsObserver = new observer.Observer(this._calculateValuesRelatedToOptions);
+        this.options$.subscribe(this._optionsObserver);
+    }
+    toggleOption(option) {
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
+    }
+    removeOption(optionValue) {
+        const options = this.options$.getValue();
+        if (!options)
+            return;
+        this.options$.notify(options.filter((option) => option.value !== optionValue));
+    }
+    addOption(option, position) {
+        var _a;
+        const options = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
+        if (position === undefined) {
+            options.push(option);
+            this.options$.notify(options);
+            return;
+        }
+        this.options$.notify([...options.slice(0, position - 1), option, ...options.slice(position - 1)]);
+    }
+    replaceOptions(options) {
+        this.options$.notify(options);
+    }
+    deselectOptions() {
+        var _a;
+        (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
+        this.requestOptionsUpdate();
+    }
+    deselectOption(option) {
+        var _a;
+        (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.forEach((option) => (option.selected = false));
+        this.requestOptionsUpdate();
+    }
+    filterOptions(value) {
+        const selectOptions = this.options$.getValue();
+        if (!selectOptions)
+            return;
+        const filtered = utilities.SearchingUtils.fuzzySearch(value, selectOptions, 'content');
+        selectOptions.forEach((option) => (option.hidden = true));
+        filtered.forEach((option) => {
+            option.hidden = false;
+        });
+        this.requestOptionsUpdate();
+    }
+    requestOptionsUpdate() {
+        const selectOptions = this.options$.getValue();
+        if (!selectOptions)
+            return;
+        this.options$.notify([...selectOptions]);
+        this.host.requestUpdate();
+    }
+    getSelectOption(selectValue) {
+        var _a;
+        return (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === selectValue);
+    }
+    hostConnected() {
+        this.options$.unsubscribe(this._optionsObserver);
+    }
+}
+
+exports.BaseSelectController = BaseSelectController;
+//# sourceMappingURL=base_select_controller.js.map

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base_select_controller = require('./base_select_controller.js');
+
+class MultiSelectController extends base_select_controller.BaseSelectController {
+    toggleOption(option) {
+        option.selected ? this.deselectOption(option) : this.selectOption(option);
+    }
+    selectOption(option) {
+        option.selected = true;
+        this.requestOptionsUpdate();
+    }
+    deselectOption(option) {
+        option.selected = false;
+        this.requestOptionsUpdate();
+    }
+}
+
+exports.MultiSelectController = MultiSelectController;
+//# sourceMappingURL=multi_select_controller.js.map

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var base_select_controller = require('./base_select_controller.js');
+
+class SelectController extends base_select_controller.BaseSelectController {
+    selectOption(option) {
+        var _a;
+        const selectedOptions = (_a = this.options$.getValue()) !== null && _a !== void 0 ? _a : [];
+        selectedOptions.forEach((option) => (option.selected = false));
+        option.selected = true;
+        this.selectedOptions$.notify([option]);
+        this.requestOptionsUpdate();
+    }
+}
+
+exports.SelectController = SelectController;
+//# sourceMappingURL=select_controller.js.map

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+class SelectOption {
+    constructor({ selected = false, hidden = false, disabled = false, value, content }) {
+        this.value = value;
+        this.selected = selected;
+        this.hidden = hidden;
+        this.disabled = disabled;
+        this.content = content;
+    }
+    static create(options) {
+        return new SelectOption(options);
+    }
+}
+
+exports.SelectOption = SelectOption;
+//# sourceMappingURL=select_option.js.map

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

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var select_components_constatns = require('../components/select_components_constatns.js');
+var select_option = require('./select_option.js');
+
+class SelectOptionMapper {
+    static toModel($option) {
+        var _a;
+        const optionContent = (_a = $option.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent)) === null || _a === void 0 ? void 0 : _a.textContent;
+        if (!optionContent)
+            throw new Error('h-options must contains a h-option-content element inside');
+        return select_option.SelectOption.create({
+            value: $option.value,
+            disabled: $option.disabled,
+            hidden: $option.hidden,
+            content: optionContent
+        });
+    }
+}
+
+exports.SelectOptionMapper = SelectOptionMapper;
+//# sourceMappingURL=select_option_mapper.js.map

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