@shoper/phoenix_design_system 1.10.0 → 1.10.1

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

@@ -23,7 +23,7 @@ exports.HDropdown = HDropdown_1 = class HDropdown extends phoenix_light_lit_elem
     constructor() {
         super();
         this.opened = false;
-        this.direction = relative_position_controller_constants.DIRECTIONS.bottomCenter;
+        this.direction = utilities.DIRECTIONS.bottomCenter;
         this.toggleOnHover = false;
         this.name = '';
         this.transition = 'direction';

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

@@ -7,19 +7,19 @@ 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;
+        const $optionContent = $option.querySelector(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.optionContent);
+        const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
         const value = $option.getAttribute('value');
         if (!value)
             throw new Error('h-option must contain a unique value');
-        if (!optionContent)
+        if (!optionContentText)
             throw new Error('h-options must contains a h-option-content element inside');
         return select_option.SelectOption.create({
             value,
             disabled: $option.hasAttribute('disabled'),
             hidden: $option.hasAttribute('hidden'),
             inactive: $option.hasAttribute('inactive'),
-            content: optionContent,
+            content: optionContentText,
             selected: $option.hasAttribute('selected')
         });
     }

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

@@ -11,7 +11,8 @@ var decorators_js = require('@lit/reactive-element/decorators.js');
 var select_components_constatns = require('./components/select_components_constatns.js');
 var observer = require('../../../core/classes/observer/observer.js');
 var icon = require('../../icon/icon.js');
-var select_option = require('./components/option/select_option.js');
+var select_option$1 = require('./components/option/select_option.js');
+var select_option = require('./model/select_option.js');
 var select_constants = require('./select_constants.js');
 var observable_directive = require('../../../directives/observable_directive.js');
 var select_toggler = require('./components/toggler/select_toggler.js');
@@ -27,6 +28,7 @@ var multi_select_controller = require('./controllers/multi_select_controller.js'
 var select_utils = require('./select_utils.js');
 var select_controller = require('./controllers/select_controller.js');
 var select_option_mapper = require('./model/select_option_mapper.js');
+var repeat = require('lit/directives/repeat');
 
 exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -37,6 +39,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this.offset = 2;
         this.searchDisabled = false;
         this.type = select_constants.SELECT_TYPES.select;
+        this.noDeselect = false;
         this._searchValue = '';
         this._$options = {};
         this._$dropdown = ref_js.createRef();
@@ -44,6 +47,40 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._$optionsList = ref_js.createRef();
         this._$dropdownContent = ref_js.createRef();
         this._selectContext = new context_provider_controller.ContextProviderController(this);
+        this._updateOptions = () => {
+            const $options = this._getOptions();
+            this._$options = $options.reduce((acc, $option) => {
+                const value = $option.getAttribute('value');
+                if (!value)
+                    throw Error('Select option must hava a value');
+                if (acc[value] !== undefined)
+                    throw Error('Select options must hava a unique values.');
+                return {
+                    ...acc,
+                    [value]: $option
+                };
+            }, {});
+            const options = $options.map(select_option_mapper.SelectOptionMapper.toModel);
+            this._selectController.options$.notify(options);
+            if (options.length)
+                this._selectController.selectedOptions$.notify(options.filter((option) => option.selected));
+        };
+        this._getOptions = () => {
+            let $options;
+            if (this.optionsList) {
+                $options = this.optionsList.map(option => {
+                    return select_utils.SelectControlUtils.createHTMLOption(select_option.SelectOption.create(option));
+                });
+            }
+            else {
+                $options = this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
+                    ? this.getSlot(select_constants.SELECT_SLOT_NAMES.content)
+                        .map((litElement) => litElement.values[0])
+                        .filter((element) => element instanceof select_option$1.HOption)
+                    : Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
+            }
+            return $options;
+        };
         this._handleOptionDeselect = (event) => {
             const selectedOption = this._selectController.getOption(event.detail);
             if (!selectedOption)
@@ -143,6 +180,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectOpened);
             }
         }
+        if (changedProperties.has('optionsList')) {
+            this._updateOptions();
+        }
         if (this._$optionsList.value && !this._listBoxController)
             this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
                 host: this,
@@ -163,28 +203,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._selectController = this.multiple ? new multi_select_controller.MultiSelectController({ host: this }) : new select_controller.SelectController({ host: this });
         this._selectContext.provide(select_constants.SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
         this._selectContext.provide(select_constants.SELECT_CONTEXTS.isMultiselect, this.multiple);
-        const $options = this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
-            ? this.getSlot(select_constants.SELECT_SLOT_NAMES.content)
-                .map((litElement) => litElement.values[0])
-                .filter((element) => element instanceof select_option.HOption)
-            : Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
         this._optionsObserver = new observer.Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
         this._selectController.options$.subscribe(this._optionsObserver);
-        this._$options = $options.reduce((acc, $option) => {
-            const value = $option.getAttribute('value');
-            if (!value)
-                throw Error('Select option must hava a value');
-            if (acc[value] !== undefined)
-                throw Error('Select options must hava a unique values.');
-            return {
-                ...acc,
-                [value]: $option
-            };
-        }, {});
-        const options = $options.map(select_option_mapper.SelectOptionMapper.toModel);
-        this._selectController.options$.notify(options);
-        if (options.length)
-            this._selectController.selectedOptions$.notify(options.filter((option) => option.selected));
+        this._updateOptions();
         this._setupEvents();
     }
     attributeChangedCallback(name, _old, value) {
@@ -224,7 +245,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         const option = this._selectController.getOption(value);
         if (!option)
             return;
-        this._selectController.toggle(option);
+        this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
         if (!this.multiple)
             this._closeSelect();
         this._dispatchChangeEvent();
@@ -257,6 +278,11 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     _searchNoResult() {
         return Boolean(!this._selectController.visibleOptionsCount && Object.keys(this._$options).length);
     }
+    _renderOption(option) {
+        const fragment = document.createDocumentFragment();
+        fragment.appendChild(option);
+        return fragment;
+    }
     render() {
         var _a;
         const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
@@ -292,20 +318,18 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                               @selectSearch.search=${this._handleSearch}
                           ></h-select-search>`
             : lit.nothing}
-                    ${this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
-            ? lit.html `
-                              <h-options
-                                  class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
-                ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty
-                : ''}"
-                                  ${ref_js.ref(this._$optionsList)}
-                                  @selectOptions.clicked=${this._handleOptionClicked}
-                                  @selectOptions.updated=${this._handleOptionUpdated}
-                              >
-                                  ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
-                              </h-options>
-                          `
-            : lit.nothing}
+
+                        <h-options
+                            class="${select_constants.SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
+            ? select_constants.SELECT_CSS_CLASSES.selectOptionsEmpty
+            : ''}"
+                            ${ref_js.ref(this._$optionsList)}
+                            @selectOptions.clicked=${this._handleOptionClicked}
+                            @selectOptions.updated=${this._handleOptionUpdated}
+                        >
+                            ${this._$options ? repeat.repeat(Object.values(this._$options), (option) => option.value, (option) => this._renderOption(option)) : lit.nothing}
+                        </h-options>
+
                     ${this._searchNoResult()
             ? lit.html ` <div>
                               <p class=${select_constants.SELECT_CSS_CLASSES.selectNoResult}>
@@ -379,6 +403,14 @@ tslib_es6.__decorate([
     decorators_js.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HSelect.prototype, "required", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Array }),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HSelect.prototype, "optionsList", void 0);
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean, attribute: 'no-deselect' }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HSelect.prototype, "noDeselect", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", String)

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

@@ -7,7 +7,6 @@ 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 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');
@@ -18,7 +17,7 @@ class BaseMessage extends phoenix_light_lit_element.PhoenixLightLitElement {
         super();
         this.opened = false;
         this.portalTarget = base_message_constants.DEFAULT_MESSAGE_PORTAL_NAME;
-        this.direction = relative_position_controller_constants.DIRECTIONS.topCenter;
+        this.direction = utilities.DIRECTIONS.topCenter;
         this.offset = base_message_constants.DEFAULT_MESSAGE_OFFSET;
         this._setupEventListeners = () => {
             this.addEventListener('mouseenter', this.open);

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controllers/relative_position_controller/relative_position_controller.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 require('lit');
+var utilities = require('@dreamcommerce/utilities');
 var global_constants = require('../../global_constants.js');
 var relative_position_controller_constants = require('./relative_position_controller_constants.js');
-var relative_position_calculator = require('./relative_position_calculator.js');
 var throttle = require('../../../../../external/lodash/throttle.js');
 
 var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_offset, _RelativePositionController_mobileElementPosition, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
@@ -75,7 +75,7 @@ class RelativePositionController {
         const positionElementRect = tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f")
             ? { ...tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect().toJSON(), height: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_initialHeight, "f") }
             : tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_elementToPosition, "f").getBoundingClientRect();
-        const position = new relative_position_calculator.PositionCalculator({
+        const position = new utilities.RelativePositionCalculator({
             direction: shouldNotReposition && tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") ? tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_calculatedDirection, "f") : tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_direction, "f"),
             relativeElementRect: tslib_es6.__classPrivateFieldGet(this, _RelativePositionController_relativeElement, "f").getBoundingClientRect(),
             positionElementRect,

package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js

@@ -2,44 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const VERTICAL_DIRECTIONS = {
-    bottomLeft: 'bottom-left',
-    bottomRight: 'bottom-right',
-    bottomCenter: 'bottom-center',
-    topLeft: 'top-left',
-    topRight: 'top-right',
-    topCenter: 'top-center'
-};
-const HORIZONTAL_DIRECTIONS = {
-    rightTop: 'right-top',
-    rightCenter: 'right-center',
-    rightBottom: 'right-bottom',
-    leftTop: 'left-top',
-    leftCenter: 'left-center',
-    leftBottom: 'left-bottom'
-};
-const CENTER_DIRECTIONS = {
-    centerTop: 'center-top',
-    centerRight: 'center-right',
-    centerBottom: 'center-bottom',
-    centerLeft: 'center-left',
-    top: 'top',
-    right: 'right',
-    bottom: 'bottom',
-    left: 'left'
-};
-const DIRECTIONS = {
-    ...HORIZONTAL_DIRECTIONS,
-    ...VERTICAL_DIRECTIONS,
-    ...CENTER_DIRECTIONS
-};
-const CALCULATOR_DIRECTIONS = {
-    bottom: 'bottom',
-    top: 'top',
-    left: 'left',
-    right: 'right',
-    center: 'center'
-};
 const NON_STATIC_POSITIONS = ['relative', 'absolute', 'fixed', 'sticky'];
 const OVERFLOW_SCROLL = 'scroll';
 const OVERFLOW_AUTO = 'auto';
@@ -57,12 +19,8 @@ const MOBILE_ELEMENT_POSITIONS = {
     right: 'right'
 };
 
-exports.CALCULATOR_DIRECTIONS = CALCULATOR_DIRECTIONS;
-exports.CENTER_DIRECTIONS = CENTER_DIRECTIONS;
 exports.DEFAULT_SCROLL_THROTTLE_WAIT_TIME = DEFAULT_SCROLL_THROTTLE_WAIT_TIME;
 exports.DEFAULT_THROTTLE_WAIT_TIME = DEFAULT_THROTTLE_WAIT_TIME;
-exports.DIRECTIONS = DIRECTIONS;
-exports.HORIZONTAL_DIRECTIONS = HORIZONTAL_DIRECTIONS;
 exports.MOBILE_ELEMENT_POSITIONS = MOBILE_ELEMENT_POSITIONS;
 exports.NON_STATIC_POSITIONS = NON_STATIC_POSITIONS;
 exports.OVERFLOW_AUTO = OVERFLOW_AUTO;
@@ -70,5 +28,4 @@ exports.OVERFLOW_SCROLL = OVERFLOW_SCROLL;
 exports.RELATIVE_POSITION_CONTROLLER_EVENTS = RELATIVE_POSITION_CONTROLLER_EVENTS;
 exports.SHRINK_MODE_BOTTOM_MARGIN = SHRINK_MODE_BOTTOM_MARGIN;
 exports.SHRINK_MODE_MIN_HEIGHT = SHRINK_MODE_MIN_HEIGHT;
-exports.VERTICAL_DIRECTIONS = VERTICAL_DIRECTIONS;
 //# sourceMappingURL=relative_position_controller_constants.js.map

package/build/cjs/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { UiDomUtils } from '@dreamcommerce/utilities';
+import { DIRECTIONS, UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { property } from '@lit/reactive-element/decorators.js';
@@ -7,7 +7,7 @@ import { KeystrokesController } from '../../controllers/keystrokes_controller/ke
 import { html } from 'lit-html';
 import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
 import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_CSS_CLASSES, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_NAME, DROPDOWN_CONTENT_WIDTH, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
-import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
+import { RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.d.ts

@@ -1,6 +1,6 @@
 import { Any } from 'ts-toolbelt';
 import { DROPDOWN_CONTENT_WIDTH } from "./dropdown_constants";
-import { VERTICAL_DIRECTIONS } from "../../controllers/relative_position_controller/relative_position_controller_constants";
+import { VERTICAL_DIRECTIONS } from '@dreamcommerce/utilities';
 export declare type TDropdownSelectors = {
     getDropdownPortalTargetName(): string;
     getDropdownContainerName(): string;

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.js

@@ -1,4 +1,4 @@
 import 'ts-toolbelt';
 import '@phoenixRoot/components/dropdown/dropdown_constants';
-import '@phoenixRoot/controllers/relative_position_controller/relative_position_controller_constants';
+import '@dreamcommerce/utilities';
 //# sourceMappingURL=dropdown_types.js.map

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,qDAAqD,CAAC;AAC7F,OAAoC,8FAA8F,CAAC"}
+{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAuC,qDAAqD,CAAC;AAC7F,OAAoC,0BAA0B,CAAC"}

package/build/esm/packages/phoenix/src/components/form/select/model/select_option.d.ts

@@ -1,4 +1,4 @@
-import { TSelectOptionConstructorOptions } from "./select_option_constants";
+import { TSelectOptionConstructorOptions } from "./select_option_types";
 export declare class SelectOption {
     selected: boolean;
     disabled: boolean;

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

@@ -3,19 +3,19 @@ import { SelectOption } from './select_option.js';
 
 class SelectOptionMapper {
     static toModel($option) {
-        var _a;
-        const optionContent = (_a = $option.querySelector(SELECT_RELATED_COMPONENTS_NAMES.optionContent)) === null || _a === void 0 ? void 0 : _a.textContent;
+        const $optionContent = $option.querySelector(SELECT_RELATED_COMPONENTS_NAMES.optionContent);
+        const optionContentText = ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.textContent) || ($optionContent === null || $optionContent === void 0 ? void 0 : $optionContent.innerText);
         const value = $option.getAttribute('value');
         if (!value)
             throw new Error('h-option must contain a unique value');
-        if (!optionContent)
+        if (!optionContentText)
             throw new Error('h-options must contains a h-option-content element inside');
         return SelectOption.create({
             value,
             disabled: $option.hasAttribute('disabled'),
             hidden: $option.hasAttribute('hidden'),
             inactive: $option.hasAttribute('inactive'),
-            content: optionContent,
+            content: optionContentText,
             selected: $option.hasAttribute('selected')
         });
     }

package/build/esm/packages/phoenix/src/components/form/select/model/{select_option_constants.d.ts → select_option_types.d.ts}

@@ -1,4 +1,4 @@
-export declare type TSelectOptionConstructorOptions = {
+export declare type TSelectOption = {
     value: string;
     content: string;
     selected?: boolean;
@@ -6,3 +6,4 @@ export declare type TSelectOptionConstructorOptions = {
     hidden?: boolean;
     inactive?: boolean;
 };
+export declare type TSelectOptionConstructorOptions = TSelectOption;

package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=select_option_types.js.map

package/build/esm/packages/phoenix/src/components/form/select/model/select_option_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select_option_types.js","sourceRoot":"","sources":["../../../../../../../../../src/components/form/select/model/select_option_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/components/form/select/select.d.ts

@@ -3,6 +3,7 @@ import { HOption } from "./components/option/select_option";
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { SelectOption } from "./model/select_option";
 import type { TSelectType } from "./select_types";
+import { TSelectOption } from './model/select_option_types';
 export declare class HSelect extends PhoenixLightLitElement {
     private static _components;
     controlName: string;
@@ -15,6 +16,8 @@ export declare class HSelect extends PhoenixLightLitElement {
     searchDisabled: boolean;
     type: TSelectType;
     required: boolean;
+    optionsList?: TSelectOption[];
+    noDeselect: boolean;
     get selectedIndex(): number;
     set selectedIndex(index: number);
     get selectedOptions(): HOption[];
@@ -37,6 +40,8 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _focusElementAfterSelectOpened;
     connectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    private _updateOptions;
+    private _getOptions;
     private _setupEvents;
     private _handleOptionDeselect;
     private _updateOptionsView;
@@ -58,5 +63,6 @@ export declare class HSelect extends PhoenixLightLitElement {
     disconnectedCallback(): void;
     private _getClonedPlaceholderElement;
     private _searchNoResult;
+    private _renderOption;
     protected render(): TemplateResult;
 }

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

@@ -8,6 +8,7 @@ import { SELECT_RELATED_COMPONENTS_NAMES, SELECT_INPUT_PLACEHOLDER_SLOT_NAME, SE
 import { Observer } from '../../../core/classes/observer/observer.js';
 import { HIcon } from '../../icon/icon.js';
 import { HOption } from './components/option/select_option.js';
+import { SelectOption } from './model/select_option.js';
 import { SELECT_TYPES, SELECT_SLOT_NAMES, SELECT_CSS_CLASSES, SELECT_CONTEXTS, SELECT_EVENT_NAMES, MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH } from './select_constants.js';
 import { observe } from '../../../directives/observable_directive.js';
 import { HSelectToggler } from './components/toggler/select_toggler.js';
@@ -23,6 +24,7 @@ import { MultiSelectController } from './controllers/multi_select_controller.js'
 import { SelectControlUtils } from './select_utils.js';
 import { SelectController } from './controllers/select_controller.js';
 import { SelectOptionMapper } from './model/select_option_mapper.js';
+import { repeat } from 'lit/directives/repeat';
 
 let HSelect = class HSelect extends PhoenixLightLitElement {
     constructor() {
@@ -33,6 +35,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this.offset = 2;
         this.searchDisabled = false;
         this.type = SELECT_TYPES.select;
+        this.noDeselect = false;
         this._searchValue = '';
         this._$options = {};
         this._$dropdown = createRef();
@@ -40,6 +43,40 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._$optionsList = createRef();
         this._$dropdownContent = createRef();
         this._selectContext = new ContextProviderController(this);
+        this._updateOptions = () => {
+            const $options = this._getOptions();
+            this._$options = $options.reduce((acc, $option) => {
+                const value = $option.getAttribute('value');
+                if (!value)
+                    throw Error('Select option must hava a value');
+                if (acc[value] !== undefined)
+                    throw Error('Select options must hava a unique values.');
+                return {
+                    ...acc,
+                    [value]: $option
+                };
+            }, {});
+            const options = $options.map(SelectOptionMapper.toModel);
+            this._selectController.options$.notify(options);
+            if (options.length)
+                this._selectController.selectedOptions$.notify(options.filter((option) => option.selected));
+        };
+        this._getOptions = () => {
+            let $options;
+            if (this.optionsList) {
+                $options = this.optionsList.map(option => {
+                    return SelectControlUtils.createHTMLOption(SelectOption.create(option));
+                });
+            }
+            else {
+                $options = this.hasSlot(SELECT_SLOT_NAMES.content)
+                    ? this.getSlot(SELECT_SLOT_NAMES.content)
+                        .map((litElement) => litElement.values[0])
+                        .filter((element) => element instanceof HOption)
+                    : Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
+            }
+            return $options;
+        };
         this._handleOptionDeselect = (event) => {
             const selectedOption = this._selectController.getOption(event.detail);
             if (!selectedOption)
@@ -139,6 +176,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 this.classList.remove(SELECT_CSS_CLASSES.selectOpened);
             }
         }
+        if (changedProperties.has('optionsList')) {
+            this._updateOptions();
+        }
         if (this._$optionsList.value && !this._listBoxController)
             this._listBoxController = new ListBoxKeyboardController({
                 host: this,
@@ -159,28 +199,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         this._selectController = this.multiple ? new MultiSelectController({ host: this }) : new SelectController({ host: this });
         this._selectContext.provide(SELECT_CONTEXTS.selectedOptions$, this._selectController.selectedOptions$);
         this._selectContext.provide(SELECT_CONTEXTS.isMultiselect, this.multiple);
-        const $options = this.hasSlot(SELECT_SLOT_NAMES.content)
-            ? this.getSlot(SELECT_SLOT_NAMES.content)
-                .map((litElement) => litElement.values[0])
-                .filter((element) => element instanceof HOption)
-            : Array.from(this.querySelectorAll(SELECT_RELATED_COMPONENTS_NAMES.option));
         this._optionsObserver = new Observer((selectedOptions) => this._updateOptionsView(selectedOptions));
         this._selectController.options$.subscribe(this._optionsObserver);
-        this._$options = $options.reduce((acc, $option) => {
-            const value = $option.getAttribute('value');
-            if (!value)
-                throw Error('Select option must hava a value');
-            if (acc[value] !== undefined)
-                throw Error('Select options must hava a unique values.');
-            return {
-                ...acc,
-                [value]: $option
-            };
-        }, {});
-        const options = $options.map(SelectOptionMapper.toModel);
-        this._selectController.options$.notify(options);
-        if (options.length)
-            this._selectController.selectedOptions$.notify(options.filter((option) => option.selected));
+        this._updateOptions();
         this._setupEvents();
     }
     attributeChangedCallback(name, _old, value) {
@@ -220,7 +241,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const option = this._selectController.getOption(value);
         if (!option)
             return;
-        this._selectController.toggle(option);
+        this.noDeselect ? this._selectController.select(option) : this._selectController.toggle(option);
         if (!this.multiple)
             this._closeSelect();
         this._dispatchChangeEvent();
@@ -253,6 +274,11 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     _searchNoResult() {
         return Boolean(!this._selectController.visibleOptionsCount && Object.keys(this._$options).length);
     }
+    _renderOption(option) {
+        const fragment = document.createDocumentFragment();
+        fragment.appendChild(option);
+        return fragment;
+    }
     render() {
         var _a;
         const options = (_a = this._selectController.options$.getValue()) !== null && _a !== void 0 ? _a : [];
@@ -288,20 +314,18 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                               @selectSearch.search=${this._handleSearch}
                           ></h-select-search>`
             : nothing}
-                    ${this.hasSlot(SELECT_SLOT_NAMES.content)
-            ? html `
-                              <h-options
-                                  class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
-                ? SELECT_CSS_CLASSES.selectOptionsEmpty
-                : ''}"
-                                  ${ref(this._$optionsList)}
-                                  @selectOptions.clicked=${this._handleOptionClicked}
-                                  @selectOptions.updated=${this._handleOptionUpdated}
-                              >
-                                  ${this.getSlot(SELECT_SLOT_NAMES.content)}
-                              </h-options>
-                          `
-            : nothing}
+
+                        <h-options
+                            class="${SELECT_CSS_CLASSES.selectOptions} ${this._searchNoResult()
+            ? SELECT_CSS_CLASSES.selectOptionsEmpty
+            : ''}"
+                            ${ref(this._$optionsList)}
+                            @selectOptions.clicked=${this._handleOptionClicked}
+                            @selectOptions.updated=${this._handleOptionUpdated}
+                        >
+                            ${this._$options ? repeat(Object.values(this._$options), (option) => option.value, (option) => this._renderOption(option)) : nothing}
+                        </h-options>
+
                     ${this._searchNoResult()
             ? html ` <div>
                               <p class=${SELECT_CSS_CLASSES.selectNoResult}>
@@ -375,6 +399,14 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
 ], HSelect.prototype, "required", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], HSelect.prototype, "optionsList", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-deselect' }),
+    __metadata("design:type", Boolean)
+], HSelect.prototype, "noDeselect", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)