@shoper/phoenix_design_system 0.28.0-2 → 0.28.0-3

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

@@ -6,10 +6,10 @@ 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 index = require('../../../../../../external/classnames/index.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_constants.js');
-var index = require('../../../../../../external/classnames/index.js');
 
 exports.HCheckbox = class HCheckbox extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

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

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_content.js

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

package/build/cjs/packages/phoenix/src/components/form/checkbox/checkbox_control.js

@@ -7,11 +7,11 @@ var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var decorators_js = require('@lit/reactive-element/decorators.js');
 var litHtml = require('lit-html');
-var checkbox_constants = require('./checkbox_constants.js');
-var index = require('../../../../../../external/classnames/index.js');
 var ref_js = require('lit-html/directives/ref.js');
+var index = require('../../../../../../external/classnames/index.js');
 var control_props_sync_consumer_controller = require('../controllers/props_synchronizing/control_props_sync_consumer_controller.js');
 var ifDefined_js = require('lit-html/directives/if-defined.js');
+var checkbox_constants = require('./checkbox_constants.js');
 
 exports.HCheckboxControl = class HCheckboxControl extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

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

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

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

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

@@ -6,10 +6,10 @@ 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 index = require('../../../../../../external/classnames/index.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 radio_constants = require('./radio_constants.js');
 
 exports.HRadio = class HRadio extends phoenix_light_lit_element.PhoenixLightLitElement {

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

package/build/cjs/packages/phoenix/src/components/form/select/{control/components → components/option}/select_option.js

@@ -6,14 +6,13 @@ 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 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.selected = false;
-        this.disabled = false;
         this._dispatchClickedEvent = () => {
             if (this.disabled)
                 return;
@@ -28,6 +27,7 @@ exports.HOption = class HOption extends phoenix_light_lit_element.PhoenixLightLi
     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();
     }

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/{esm/packages/phoenix/src/components/form/select/control/select_control_constants.js.map → cjs/packages/phoenix/src/components/form/select/components/option/select_option_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;"}
+{"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/{control/components → components/search}/select_search.js

@@ -7,8 +7,9 @@ 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 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() {
@@ -23,14 +24,20 @@ exports.HSelectSearch = class HSelectSearch extends phoenix_light_lit_element.Ph
         }, 200);
     }
     render() {
-        return lit.html `<input
-            type="text"
-            role="search"
-            .value=${this.value}
-            aria-autocomplete="list"
-            autocomplete="false"
-            @input=${this._handleInputChange}
-        />`;
+        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([

package/build/cjs/packages/phoenix/src/components/form/select/{control/components → components/search}/select_search.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA,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;"}
+{"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/{control/components → components}/select_components_constatns.js

@@ -15,7 +15,7 @@ const SELECT_RELATED_COMPONENTS_NAMES = {
     option: 'h-option',
     options: 'h-select-options',
     optionContent: 'h-option-content',
-    input: 'h-select-input',
+    value: 'h-select-value',
     closeBtn: 'h-select-close-btn',
     search: 'h-select-search'
 };

package/build/cjs/packages/phoenix/src/components/form/select/{control/components → components}/select_options.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../../../../../../../external/tslib/tslib.es6.js');
+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 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 {

package/build/cjs/packages/phoenix/src/components/form/select/{control/components → components}/select_options.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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/{control/components/select_input.js → components/value/select_value.js}

@@ -6,18 +6,19 @@ 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 select_control_constants = require('../select_control_constants.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.HSelectInput = class HSelectInput extends phoenix_light_lit_element.PhoenixLightLitElement {
+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_control_constants.SELECT_EVENT_NAMES.deselectOption, {
+            this.dispatchEvent(new CustomEvent(select_constants.SELECT_EVENT_NAMES.deselectOption, {
                 detail: option.value,
                 bubbles: true
             }));
@@ -25,42 +26,44 @@ exports.HSelectInput = class HSelectInput extends phoenix_light_lit_element.Phoe
     }
     connectedCallback() {
         super.connectedCallback();
-        this.setAttribute('slot', select_control_constants.SELECT_SLOT_NAMES.input);
+        this.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.input);
         this.setAttribute('role', 'textbox');
         this._subscribeObserver();
     }
     async _subscribeObserver() {
-        this.isMultiselect = (await this._contextConsumer.consumeAsync(select_control_constants.SELECT_CONTEXTS.isMultiselect));
-        this.selectedOptions$ = (await this._contextConsumer.consumeAsync(select_control_constants.SELECT_CONTEXTS.selectedOptions$));
+        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 `
-            ${observable_directive.observe(this.selectedOptions$, (selectOptions) => {
+            <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}
+                                  ${option.content}
 
-                              <h-tag-remove-button>x</h-tag-remove-button>
-                          </h-tag>`)}`
+                                  <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.HSelectInput.prototype, "selectedOptions$", void 0);
+], exports.HSelectValue.prototype, "selectedOptions$", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Boolean)
-], exports.HSelectInput.prototype, "isMultiselect", void 0);
-exports.HSelectInput = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.input)
-], exports.HSelectInput);
-//# sourceMappingURL=select_input.js.map
+], 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/{control/components/select_input.js.map → components/value/select_value.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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/{control/controllers → controllers}/base_select_controller.js

@@ -4,8 +4,8 @@ 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');
+var observer = require('../../../../core/classes/observer/observer.js');
+var behavior_subject = require('../../../../core/classes/behavior_subject/behavior_subject.js');
 
 class BaseSelectController {
     constructor({ host }) {

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

@@ -3,63 +3,221 @@
 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 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 decorators_js = require('@lit/reactive-element/decorators.js');
+var select_components_constatns = require('./components/select_components_constatns.js');
 var select_constants = require('./select_constants.js');
+var observer = require('../../../core/classes/observer/observer.js');
+var observable_directive = require('../../../directives/observable_directive.js');
+var 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/search/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_utils = require('./select_utils.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]
-        });
+        this.multiselect = false;
+        this.opened = false;
+        this._searchValue = '';
+        this._$options = {};
+        this._$dropdown = ref_js.createRef();
+        this._$search = ref_js.createRef();
+        this._$optionsList = ref_js.createRef();
+        this._$dropdownContent = 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: SelectOption) => option.value));
+            options.forEach((option, index) => {
+                const { selected, value } = option;
+                const $option = this._$options[value];
+                if (!$option) {
+                    // this._appendNewHTMLOption(option, index + 1);
+                    return;
+                }
+                select_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 = '';
+            this.opened = false;
+        };
+        const $options = Array.from(this.querySelectorAll(select_components_constatns.SELECT_RELATED_COMPONENTS_NAMES.option));
+        $options.forEach(($option) => $option.setAttribute('slot', select_constants.SELECT_SLOT_NAMES.content));
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('opened'))
+            this.opened ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectOpened) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectOpened);
+        if (this._$optionsList.value && !this._listBoxController)
+            this._listBoxController = new list_box_keyboard_controller.ListBoxKeyboardController({
+                host: this,
+                $list: this._$optionsList.value
+            });
     }
     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);
+        this.classList.add(select_constants.SELECT_CSS_CLASSES.select);
+        this._selectController = this.multiselect ? 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.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();
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        if (this._$dropdownContent.value)
+            this._$dropdownContent.value.style.width = `${this.getBoundingClientRect().width}px`;
+    }
+    _setupEvents() {
+        this.addEventListener(select_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_utils.SelectControlUtils.createHTMLOption(option);
+        if (selected)
+            $option.setAttribute(this.multiselect ? 'aria-checked' : 'aria-selected', 'true');
+        this._$options[value] = $option;
+        select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
+    }
+    _removeHTMLOptions(optionsValues) {
+        this._$options = select_utils.SelectControlUtils.removeHTMLOptions(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 `
+            <h-dropdown
+                ${ref_js.ref(this._$dropdown)}
+                @dropdown.showed=${() => (this.opened = true)}
+                @dropdown.hidden=${this._handleDropdownHidden}
+                name=${this.controlName}
+            >
+                <h-dropdown-toggler name=${this.controlName} class="${select_constants.SELECT_CSS_CLASSES.selectControl}">
+                    ${this.getSlot(select_constants.SELECT_SLOT_NAMES.input)}
+                    <h-icon icon-name="icon-chevron-down"></h-icon>
+                </h-dropdown-toggler>
+
+                <h-dropdown-content class=${select_constants.SELECT_CSS_CLASSES.selectContent} ${ref_js.ref(this._$dropdownContent)} name=${this.controlName}>
+                    <h-select-close-btn @click=${this._closeSelect}></h-select-close-btn>
+
+                    ${options.length > select_constants.MIN_NUMBER_OF_OPTIONS_TO_SHOW_SEARCH
+            ? lit.html `<h-select-search
+                              class=${select_constants.SELECT_CSS_CLASSES.selectSearch}
+                              ${ref_js.ref(this._$search)}
+                              .value=${this._searchValue}
+                              @selectSearch.search=${this._handleSearch}
+                          ></h-select-search>`
+            : lit.nothing}
+                    ${this.hasSlot(select_constants.SELECT_SLOT_NAMES.content)
+            ? lit.html `
+                              <h-select-options
+                                  class=${select_constants.SELECT_CSS_CLASSES.selectOptions}
+                                  ${ref_js.ref(this._$optionsList)}
+                                  @selectOptions.clicked=${this._handleOptionClicked}
+                              >
+                                  ${this.getSlot(select_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 class=${select_constants.SELECT_CSS_CLASSES.selectFooter}>
+                                  <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} />`))}
+        `;
     }
 };
+exports.HSelect._components = {
+    search: select_search.HSelectSearch,
+    icon: icon.HIcon
+};
 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 }),
+    decorators_js.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HSelect.prototype, "controlName", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Boolean }),
+    decorators_js.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
-], exports.HSelect.prototype, "disabled", void 0);
+], exports.HSelect.prototype, "multiselect", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: Boolean }),
+    decorators_js.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Boolean)
-], exports.HSelect.prototype, "required", void 0);
+], exports.HSelect.prototype, "opened", 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);
+    decorators.state(),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSelect.prototype, "_searchValue", void 0);
 exports.HSelect = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-select'),
     tslib_es6.__metadata("design:paramtypes", [])

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