@shoper/phoenix_design_system 0.27.0 → 0.28.0-1

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

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

@@ -0,0 +1,200 @@
+'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 decorators_js = require('@lit/reactive-element/decorators.js');
+var select_components_constatns = require('./components/select_components_constatns.js');
+var select_control_constants = require('./select_control_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 multi_select_controller = require('./controllers/multi_select_controller.js');
+var select_controller = require('./controllers/select_controller.js');
+var select_search = require('./components/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_control_utils = require('./select_control_utils.js');
+
+exports.HSelectControl = class HSelectControl extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.multiselect = false;
+        this._searchValue = '';
+        this._$options = {};
+        this._$dropdown = ref_js.createRef();
+        this._$search = ref_js.createRef();
+        this._$optionsList = ref_js.createRef();
+        this._selectContext = new context_provider_controller.ContextProviderController(this);
+        this._handleOptionDeselect = (event) => {
+            const selectedOption = this._selectController.getSelectOption(event.detail);
+            if (!selectedOption)
+                return;
+            this._selectController.deselectOption(selectedOption);
+        };
+        this._updateOptionsView = (options) => {
+            if (options.length < Object.keys(this._$options).length)
+                this._removeHTMLOptions(options.map((option) => option.value));
+            options.forEach((option, index) => {
+                const { selected, value } = option;
+                const $option = this._$options[value];
+                if (!$option) {
+                    this._appendNewHTMLOption(option, index + 1);
+                    return;
+                }
+                select_control_utils.SelectControlUtils.syncHTMLOptionWithModel(option, $option);
+                if (!selected)
+                    return;
+                $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
+            });
+        };
+        this._handleOptionClicked = (event) => {
+            const selectedOption = this._selectController.getSelectOption(event.detail.$option.value);
+            if (!selectedOption)
+                return;
+            this._selectController.toggleOption(selectedOption);
+            if (!this.multiselect)
+                this._closeSelect();
+        };
+        this._closeSelect = () => {
+            var _a;
+            (_a = this._$dropdown.value) === null || _a === void 0 ? void 0 : _a.hide();
+        };
+        this._clearOptions = () => {
+            this._selectController.deselectOptions();
+        };
+        this._handleDropdownHidden = () => {
+            this._searchValue = '';
+        };
+        const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
+        $options.forEach(($option) => $option.setAttribute('slot', select_control_constants.SELECT_SLOT_NAMES.content));
+    }
+    updated(props) {
+        super.updated(props);
+        if (this._$optionsList.value && !this._listBoxController)
+            this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
+                host: this,
+                $list: this._$optionsList.value
+            });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._selectController = this.multiselect ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
+        this._selectContext.provide(select_control_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
+        this._selectContext.provide(select_control_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._$options = $options.reduce((acc, $option) => {
+            if (acc[$option.value] !== undefined)
+                throw Error('Select options must hava a unique values.');
+            return {
+                ...acc,
+                [$option.value]: $option
+            };
+        }, {});
+        this._selectController.options$.notify($options.map(select_option_mapper.SelectOptionMapper.toModel));
+        this._setupEvents();
+    }
+    _setupEvents() {
+        this.addEventListener(select_control_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
+    }
+    _appendNewHTMLOption(option, position) {
+        const $list = this._$optionsList.value;
+        if (!$list)
+            return;
+        const { value, selected } = option;
+        const $option = select_control_utils.SelectControlUtils.createHTMLOption(option);
+        if (selected)
+            $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
+        this._$options[value] = $option;
+        select_control_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
+    }
+    _removeHTMLOptions(optionsValues) {
+        this._$options = select_control_utils.SelectControlUtils.removeHTMLOption(Object.values(this._$options), optionsValues);
+    }
+    _handleSearch({ detail }) {
+        this._searchValue = detail;
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('_searchValue'))
+            this._selectController.filterOptions(this._searchValue);
+    }
+    addOption(option, position) {
+        this._selectController.addOption(option, position);
+    }
+    removeOption(optionValue) {
+        this._selectController.removeOption(optionValue);
+    }
+    replaceOptions(options) {
+        this._selectController.replaceOptions(options);
+    }
+    render() {
+        var _a;
+        const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
+        return lit.html `
+            <div>
+                <h-dropdown ${ref_js.ref(this._$dropdown)} @dropdown.hidden=${this._handleDropdownHidden} name=${this.controlName}>
+                    <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_control_constants.SELECT_SLOT_NAMES.input)} </h-dropdown-toggler>
+
+                    <h-dropdown-content name=${this.controlName}>
+                        <h-select-close-btn @click=${this._closeSelect}></h-select-close-btn>
+
+                        ${options.length > select_control_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
+            ? lit.html `<h-select-search
+                                  ${ref_js.ref(this._$search)}
+                                  .value=${this._searchValue}
+                                  @selectSearch.search=${this._handleSearch}
+                              ></h-select-search>`
+            : lit.nothing}
+                        ${this.hasSlot(select_control_constants.SELECT_SLOT_NAMES.content)
+            ? lit.html `
+                                  <h-select-options ${ref_js.ref(this._$optionsList)} @selectOptions.clicked=${this._handleOptionClicked}>
+                                      ${this.getSlot(select_control_constants.SELECT_SLOT_NAMES.content)}
+                                  </h-select-options>
+                              `
+            : 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>
+                                      <button @click=${this._clearOptions}>clear</button>
+                                      <h-select-close-btn @click=${this._closeSelect}>ok</h-select-close-btn>
+                                  </section>
+                              `
+            : lit.nothing}
+                    </h-dropdown-content>
+                </h-dropdown>
+
+                ${observable_directive.observe(this._selectController.selectedOptions$, (selectOptions) => selectOptions.map((option) => lit.html `<input type="hidden" name=${this.controlName} value=${option.value} />`))}
+            </div>
+        `;
+    }
+};
+exports.HSelectControl._components = {
+    search: select_search.HSelectSearch,
+    icon: icon.HIcon
+};
+tslib_es6.__decorate([
+    decorators_js.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSelectControl.prototype, "controlName", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelectControl.prototype, "multiselect", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSelectControl.prototype, "_searchValue", void 0);
+exports.HSelectControl = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-select-control'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HSelectControl);
+//# sourceMappingURL=select_control.js.map

package/build/cjs/packages/phoenix/src/components/form/select/control/select_control.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/control/select_control_constants.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SELECT_CONTEXTS = {
+    isMultiselect: 'isMultiselect',
+    selectedOptions$: 'selectedOptions$'
+};
+const SELECT_SLOT_NAMES = {
+    content: 'content',
+    input: 'input'
+};
+const SELECT_EVENT_NAMES = {
+    selectOption: 'selectOption.select',
+    deselectOption: 'selectOption.deselect'
+};
+const MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = 6;
+
+exports.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH = MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH;
+exports.SELECT_CONTEXTS = SELECT_CONTEXTS;
+exports.SELECT_EVENT_NAMES = SELECT_EVENT_NAMES;
+exports.SELECT_SLOT_NAMES = SELECT_SLOT_NAMES;
+//# sourceMappingURL=select_control_constants.js.map

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

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

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var select_components_constatns = require('./components/select_components_constatns.js');
+
+class SelectControlUtils {
+    static createHTMLOption(option) {
+        const { selected, value, disabled, hidden, content } = option;
+        const $option = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option);
+        $option.setAttribute('value', String(value));
+        const $optionContent = document.createElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
+        $optionContent.innerText = content;
+        $option.append($optionContent);
+        if (selected)
+            $option.setAttribute('selected', '');
+        if (disabled)
+            $option.setAttribute('disabled', '');
+        if (hidden)
+            $option.setAttribute('hidden', '');
+        return $option;
+    }
+    static syncHTMLOptionWithModel(option, $option) {
+        const { selected, value, disabled, hidden } = option;
+        $option.selected = selected;
+        $option.value = value;
+        $option.disabled = disabled;
+        $option.hidden = hidden;
+    }
+    static removeHTMLOption($options, optionsValuesThatExists) {
+        return $options.reduce((acc, $option) => {
+            if (optionsValuesThatExists.includes($option.value))
+                return {
+                    ...acc,
+                    [$option.value]: $option
+                };
+            $option.remove();
+            return acc;
+        }, {});
+    }
+    static appendHTMLOption($option, $list, position) {
+        if (position !== undefined) {
+            const $nextOption = $list.querySelector(`${select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option}:nth-child(${position})`);
+            $nextOption ? $nextOption.insertAdjacentElement('beforebegin', $option) : $list.append($option);
+            return;
+        }
+        $list.append($option);
+    }
+}
+
+exports.SelectControlUtils = SelectControlUtils;
+//# sourceMappingURL=select_control_utils.js.map

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

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

@@ -0,0 +1,67 @@
+'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 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 checkbox_constants = require('../checkbox/checkbox_constants.js');
+var index = require('../../../../../../external/classnames/index.js');
+var select_constants = require('./select_constants.js');
+
+exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        new control_props_sync_provider_controller.ControlPropsSyncProviderController({
+            host: this,
+            propsToSync: [...Object.keys(control_props_sync_controller_constants.BASE_FORM_CONTROL_PROPS), checkbox_constants.CHECKBOX_PROPS_TO_SYNC.checked]
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(select_constants.SELECT_CONTROL_CSS_CLASSES.select);
+        const cssClasses = index['default']({
+            [select_constants.SELECT_CONTROL_CSS_CLASSES.selectDisabled]: this.disabled,
+            [select_constants.SELECT_CONTROL_CSS_CLASSES.selectReadonly]: this.readonly,
+            [select_constants.SELECT_CONTROL_CSS_CLASSES.selectError]: this.error
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSelect.prototype, "controlId", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSelect.prototype, "controlName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelect.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelect.prototype, "required", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelect.prototype, "hidden", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelect.prototype, "readonly", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelect.prototype, "error", void 0);
+exports.HSelect = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-select'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HSelect);
+//# sourceMappingURL=select.js.map

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

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const baseSelectControlClass = 'select';
+const SELECT_CONTROL_CSS_CLASSES = {
+    select: baseSelectControlClass,
+    selectError: `${baseSelectControlClass}_error`,
+    selectDisabled: `${baseSelectControlClass}_disabled`,
+    selectReadonly: `${baseSelectControlClass}_readonly`,
+    selectControl: `${baseSelectControlClass}__control`
+};
+
+exports.SELECT_CONTROL_CSS_CLASSES = SELECT_CONTROL_CSS_CLASSES;
+//# sourceMappingURL=select_constants.js.map

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

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

@@ -8,8 +8,8 @@ var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.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 index = require('../../../../../../external/classnames/index.js');
 var checkbox_constants = require('../checkbox/checkbox_constants.js');
+var index = require('../../../../../../external/classnames/index.js');
 var switch_constants = require('./switch_constants.js');
 
 exports.HSwitch = class HSwitch extends phoenix_light_lit_element.PhoenixLightLitElement {

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

package/build/cjs/packages/phoenix/src/components/messages/base_message.js

@@ -6,9 +6,9 @@ var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
 var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
-var portal_constants = require('../portal/portal_constants.js');
 var keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
 var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
+var portal_constants = require('../portal/portal_constants.js');
 var click_outside_controller = require('../../controllers/click_outside_controller/click_outside_controller.js');
 var relative_position_controller = require('../../controllers/relative_position_controller/relative_position_controller.js');
 var base_message_constants = require('./base_message_constants.js');

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

@@ -5,13 +5,13 @@ 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 portal_constants = require('../portal/portal_constants.js');
-var modal_constants = require('./modal_constants.js');
-var litHtml = require('lit-html');
-var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
+var litHtml = require('lit-html');
 var ref_js = require('lit-html/directives/ref.js');
+var portal_constants = require('../portal/portal_constants.js');
+var backdrop_controller = require('../backdrop/controller/backdrop_controller.js');
 require('@lit/reactive-element');
+var modal_constants = require('./modal_constants.js');
 
 var HModal_1;
 exports.HModal = HModal_1 = class HModal extends phoenix_light_lit_element.PhoenixLightLitElement {

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

@@ -7,8 +7,8 @@ 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 portal_constants = require('./portal_constants.js');
 var v4 = require('../../../../../external/uuid/dist/esm-browser/v4.js');
+var portal_constants = require('./portal_constants.js');
 
 exports.HPortal = class HPortal extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

package/build/cjs/packages/phoenix/src/components/portal/portal.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,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA,iBAAiB,qDAAyD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}