@shoper/phoenix_design_system 1.2.13 → 1.2.15

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

@@ -12,16 +12,23 @@ exports.HOptions = class HOptions extends phoenix_light_lit_element.PhoenixLight
     constructor() {
         super();
         this._dispatchClickedEvent = ({ detail }) => {
-            this.dispatchEvent(new CustomEvent(select_components_constatns.SELECT_OPTIONS_EVENT_NAMES.clicked, {
+            this._dispatchEvent(select_components_constatns.SELECT_OPTIONS_EVENT_NAMES.clicked, detail.$option);
+        };
+        this._dispatchUpdatedEvent = ({ detail }) => {
+            this._dispatchEvent(select_components_constatns.SELECT_OPTIONS_EVENT_NAMES.updated, detail.$option);
+        };
+        this._dispatchEvent = (eventName, $option) => {
+            this.dispatchEvent(new CustomEvent(eventName, {
                 bubbles: true,
                 detail: {
-                    $option: detail.$option
+                    $option
                 }
             }));
         };
         this.setAttribute('role', 'listbox');
         utilities.UiDomUtils.makeNavigable(this);
         this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.clicked, this._dispatchClickedEvent);
+        this.addEventListener(select_components_constatns.SELECT_OPTION_EVENT_NAMES.updated, this._dispatchUpdatedEvent);
     }
 };
 exports.HOptions = tslib_es6.__decorate([

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

@@ -1 +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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,kDAAsD;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -63,8 +63,18 @@ class BaseSelectController {
         this.selectedOptions$.notify([]);
         this.requestUpdate();
     }
+    updateOption(value, newOptions) {
+        const option = this.getOption(value);
+        if (!option)
+            return;
+        Object.entries(newOptions).forEach(([key, value]) => {
+            option[key] = value;
+        });
+        this.requestUpdate();
+    }
     filter(value) {
-        const selectOptions = this.options$.getValue();
+        var _a;
+        const selectOptions = (_a = this.options$.getValue()) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.inactive);
         if (!selectOptions)
             return;
         const filtered = utilities.SearchingUtils.fuzzySearch(value, selectOptions, 'content');

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

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 class SelectOption {
-    constructor({ selected = false, hidden = false, disabled = false, value, content }) {
+    constructor({ selected = false, hidden = false, disabled = false, value, content, inactive = false }) {
         this.value = value;
         this.selected = selected;
         this.hidden = hidden;
         this.disabled = disabled;
         this.content = content;
+        this.inactive = inactive;
     }
     static create(options) {
         return new SelectOption(options);

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

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

@@ -15,6 +15,7 @@ class SelectOptionMapper {
             value: $option.value,
             disabled: $option.disabled,
             hidden: $option.hidden,
+            inactive: $option.inactive,
             content: optionContent,
             selected: $option.selected
         });

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

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

@@ -16,7 +16,6 @@ var observable_directive = require('../../../directives/observable_directive.js'
 var select_toggler = require('./components/toggler/select_toggler.js');
 var context_provider_controller = require('../../../core/context/context_provider_controller.js');
 var ref_js = require('lit-html/directives/ref.js');
-var global_constants = require('../../../global_constants.js');
 var dropdown_content = require('../../dropdown/dropdown_content.js');
 var dropdown_toggler = require('../../dropdown/dropdown_toggler.js');
 var debounce = require('../../../../../../external/lodash/debounce.js');
@@ -44,17 +43,6 @@ 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._setDropdownContentWidth = (width) => {
-            const $dropdown = this._$dropdownContent.value;
-            if (!$dropdown)
-                return;
-            if (!width) {
-                $dropdown.style.removeProperty('width');
-                return;
-            }
-            if (width)
-                $dropdown.style.width = `${width !== null && width !== void 0 ? width : ''}px`;
-        };
         this._handleOptionDeselect = (event) => {
             const selectedOption = this._selectController.getOption(event.detail);
             if (!selectedOption)
@@ -65,7 +53,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         this._updateOptionsView = (options) => {
             if (options.length < Object.keys(this._$options).length)
                 this._removeHTMLOptions(options.map((option) => option.value));
-            options.forEach((option, index) => {
+            options
+                .filter((option) => !option.inactive)
+                .forEach((option, index) => {
                 const { selected, value } = option;
                 const $option = this._$options[value];
                 if (!$option) {
@@ -75,12 +65,19 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 select_utils.SelectControlUtils.syncHTMLOptionWithModel(option, $option);
                 if (!selected)
                     return;
-                $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+                this.updateOptionAriaAttribute($option);
             });
         };
         this._handleOptionClicked = (event) => {
             this._selectOption(event.detail.$option.value);
         };
+        this._handleOptionUpdated = ({ detail }) => {
+            const $option = detail.$option;
+            this._selectController.updateOption($option.value, {
+                inactive: $option.inactive,
+                hidden: $option.hidden
+            });
+        };
         this._handleDropdownHidden = () => {
             this._searchValue = '';
             this.opened = false;
@@ -96,11 +93,12 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
             this._dispatchChangeEvent();
         };
         this._dispatchChangeEvent = () => {
-            this.dispatchEvent(new Event('change'));
+            this.dispatchEvent(new Event('change', {
+                bubbles: true
+            }));
         };
         this._handleResize = debounce['default'](() => {
             this._closeSelect();
-            this._setDropdownContentWidth(this._getDropdownContentWidth());
         }, select_constants.SELECT_RESIZE_DEBOUNCE_TIME);
         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));
@@ -119,11 +117,8 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     }
     set selectedIndex(index) {
         const option = Object.values(this._$options)[index];
-        if (!option) {
-            this._selectController.deselectAll();
-            return;
-        }
-        this._selectOption(option.value);
+        option ? this._selectOption(option.value) : this._selectController.deselectAll();
+        Object.values(this._$options).forEach(($option) => this.updateOptionAriaAttribute($option));
     }
     get selectedOptions() {
         var _a;
@@ -194,10 +189,6 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 this.disabled ? this.classList.add(select_constants.SELECT_CSS_CLASSES.selectDisabled) : this.classList.remove(select_constants.SELECT_CSS_CLASSES.selectDisabled);
         }
     }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this._setDropdownContentWidth(this._getDropdownContentWidth());
-    }
     _setupEvents() {
         this.addEventListener(select_constants.SELECT_EVENT_NAMES.deselectOption, this._handleOptionDeselect);
         this.addEventListener(select_components_constatns.SELECT_CLOSE_BTN_EVENT_NAMES.close, this._closeSelect);
@@ -210,10 +201,15 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
         const { value, selected } = option;
         const $option = select_utils.SelectControlUtils.createHTMLOption(option);
         if (selected)
-            $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+            this.updateOptionAriaAttribute($option);
         this._$options[value] = $option;
         select_utils.SelectControlUtils.appendHTMLOption($option, $list, position);
     }
+    updateOptionAriaAttribute($option) {
+        !$option.selected
+            ? $option.removeAttribute(this.multiple ? 'aria-checked' : 'aria-selected')
+            : $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+    }
     _removeHTMLOptions(optionsValues) {
         this._$options = select_utils.SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
     }
@@ -246,11 +242,9 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
     disconnectedCallback() {
         super.disconnectedCallback();
         this._selectController.options$.unsubscribe(this._optionsObserver);
+        this._$options = {};
         window.removeEventListener('resize', this._handleResize);
     }
-    _getDropdownContentWidth() {
-        return document.documentElement.clientWidth < global_constants.BREAKPOINTS.xs ? undefined : this.getBoundingClientRect().width;
-    }
     _getClonedPlaceholderElement() {
         return this.$placeholder instanceof HTMLElement ? this.$placeholder.cloneNode(true) : this.$placeholder;
     }
@@ -267,6 +261,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 @dropdown.hidden=${this._handleDropdownHidden}
                 name="${this.controlName}$"
                 offset=${this.offset}
+                content-width="full"
             >
                 <h-dropdown-toggler name=${this.controlName}> ${this.getSlot(select_constants.SELECT_SLOT_NAMES.toggler)} </h-dropdown-toggler>
 
@@ -298,6 +293,7 @@ exports.HSelect = class HSelect extends phoenix_light_lit_element.PhoenixLightLi
                 : ''}"
                                   ${ref_js.ref(this._$optionsList)}
                                   @selectOptions.clicked=${this._handleOptionClicked}
+                                  @selectOptions.updated=${this._handleOptionUpdated}
                               >
                                   ${this.getSlot(select_constants.SELECT_SLOT_NAMES.content)}
                               </h-options>

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,uBAAuB,+CAAmD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,+CAAmD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/index.js

@@ -69,9 +69,10 @@ var toggle_button_group = require('./components/groups/toggle_button_group/toggl
 var toggle_button = require('./components/groups/toggle_button_group/toggle_button.js');
 var click_outside_controller_messages = require('./controllers/click_outside_controller/click_outside_controller_messages.js');
 var backdrop = require('./components/backdrop/backdrop.js');
-var color_swatches_control = require('./components/form/color_swatches_control/color_swatches_control.js');
+var color_swatches_control_constants = require('./components/form/color_swatches_control/color_swatches_control_constants.js');
 var color_item = require('./components/color_swatches/color_item/color_item.js');
 var color_swatches = require('./components/color_swatches/color_swatches.js');
+var color_swatches_control = require('./components/form/color_swatches_control/color_swatches_control.js');
 var show_more = require('./components/color_swatches/show-more/show_more.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
 var slider = require('./components/slider/slider.js');
@@ -340,6 +341,7 @@ Object.defineProperty(exports, 'HSwitchControl', {
 });
 exports.RADIO_CONTROL_CSS_CLASSES = radio_constants.RADIO_CONTROL_CSS_CLASSES;
 exports.RADIO_CONTROL_EVENTS = radio_constants.RADIO_CONTROL_EVENTS;
+exports.RADIO_CONTROL_VARIANTS = radio_constants.RADIO_CONTROL_VARIANTS;
 exports.RADIO_SLOTS = radio_constants.RADIO_SLOTS;
 Object.defineProperty(exports, 'HRadio', {
 	enumerable: true,
@@ -421,12 +423,7 @@ Object.defineProperty(exports, 'HBackdrop', {
 		return backdrop.HBackdrop;
 	}
 });
-Object.defineProperty(exports, 'HColorSwatchesControl', {
-	enumerable: true,
-	get: function () {
-		return color_swatches_control.HColorSwatchesControl;
-	}
-});
+exports.COLOR_SWATCHES_CONTROL_EVENT_NAMES = color_swatches_control_constants.COLOR_SWATCHES_CONTROL_EVENT_NAMES;
 Object.defineProperty(exports, 'HColorItem', {
 	enumerable: true,
 	get: function () {
@@ -439,6 +436,12 @@ Object.defineProperty(exports, 'HColorSwatches', {
 		return color_swatches.HColorSwatches;
 	}
 });
+Object.defineProperty(exports, 'HColorSwatchesControl', {
+	enumerable: true,
+	get: function () {
+		return color_swatches_control.HColorSwatchesControl;
+	}
+});
 Object.defineProperty(exports, 'HColorSwatchesShowMore', {
 	enumerable: true,
 	get: function () {

package/build/cjs/packages/phoenix/src/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches/color_item/color_item.d.ts

@@ -1,10 +1,12 @@
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import type { TColorItemSize } from "./color_item_types";
 export declare class HColorItem extends PhoenixLightLitElement {
     color: string;
+    value: string;
     label?: string;
     disabled: boolean;
     selected: boolean;
-    small: boolean;
+    size?: TColorItemSize;
     unclickable: boolean;
     private _btnController;
     constructor();

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js

@@ -4,15 +4,13 @@ import { ColorUtils } 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 { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
-import { COLOR_SWATCHES_CSS_CLASSES } from '../color_swatches_constants.js';
-import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item_constants.js';
+import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_CSS_CLASSES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item_constants.js';
 
 let HColorItem = class HColorItem extends PhoenixLightLitElement {
     constructor() {
         super();
         this.disabled = false;
         this.selected = false;
-        this.small = false;
         this.unclickable = false;
         this._dispatchClickedEvent = () => {
             this.dispatchEvent(new Event(COLOR_ITEM_EVENT_NAMES.selected, {
@@ -28,8 +26,11 @@ let HColorItem = class HColorItem extends PhoenixLightLitElement {
         this._syncAriaPressed();
         this.setAttribute('aria-label', this.label ? this.label : this.color);
         this.unclickable && this.removeAttribute('tabindex');
-        this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorItem);
-        this.small && this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorItemSmall);
+        this.classList.add(COLOR_ITEM_CSS_CLASSES.colorItem);
+        if (!this.value)
+            this.value = this.color;
+        if (this.size)
+            this.classList.add(COLOR_ITEM_CSS_CLASSES[this.size]);
     }
     attributeChangedCallback(name, value, newValue) {
         super.attributeChangedCallback(name, value, newValue);
@@ -54,6 +55,10 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], HColorItem.prototype, "color", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorItem.prototype, "value", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
@@ -67,9 +72,9 @@ __decorate([
     __metadata("design:type", Boolean)
 ], HColorItem.prototype, "selected", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HColorItem.prototype, "small", void 0);
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorItem.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches/color_item/color_item_constants.d.ts

@@ -1,4 +1,13 @@
 export declare const COLOR_ITEM_EVENT_NAMES: {
     readonly selected: "colorItemSelected";
 };
+export declare const COLOR_ITEM_SIZES: {
+    readonly s: "s";
+    readonly xs: "xs";
+};
+export declare const COLOR_ITEM_CSS_CLASSES: {
+    readonly colorItem: "color-item";
+    readonly s: "color-item_s";
+    readonly xs: "color-item_xs";
+};
 export declare const COLOR_ITEM_SELECTED_ATTRIBUTE = "selected";

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js

@@ -1,7 +1,17 @@
+const colorItemBaseCssClass = 'color-item';
 const COLOR_ITEM_EVENT_NAMES = {
     selected: 'colorItemSelected'
 };
+const COLOR_ITEM_SIZES = {
+    s: 's',
+    xs: 'xs'
+};
+const COLOR_ITEM_CSS_CLASSES = {
+    colorItem: colorItemBaseCssClass,
+    [COLOR_ITEM_SIZES.s]: `${colorItemBaseCssClass}_s`,
+    [COLOR_ITEM_SIZES.xs]: `${colorItemBaseCssClass}_xs`
+};
 const COLOR_ITEM_SELECTED_ATTRIBUTE = 'selected';
 
-export { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE };
+export { COLOR_ITEM_CSS_CLASSES, COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE, COLOR_ITEM_SIZES };
 //# sourceMappingURL=color_item_constants.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_types.d.ts

@@ -1,5 +1,3 @@
-export declare type TColorItemConstructorOptions = {
-    color: string;
-    label: string;
-    disabled: boolean;
-};
+import { Any } from 'ts-toolbelt';
+import { COLOR_ITEM_SIZES } from "./color_item_constants";
+export declare type TColorItemSize = Any.Keys<typeof COLOR_ITEM_SIZES>;

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_types.js

@@ -1,2 +1,3 @@
-export {};
+import 'ts-toolbelt';
+import '@phoenixRoot/components/color_swatches/color_item/color_item_constants';
 //# sourceMappingURL=color_item_types.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"color_item_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_swatches/color_item/color_item_types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"color_item_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_swatches/color_item/color_item_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAiC,wEAAwE,CAAC"}

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches.d.ts

@@ -1,21 +1,27 @@
 import { HColorItem } from "./color_item/color_item";
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { TemplateResult } from 'lit-html';
 export declare class HColorSwatches extends PhoenixLightLitElement {
     multiple: boolean;
     numberOfVisibleColors: number;
     selectedColors: HColorItem[];
+    showMoreBtnText: string;
+    private _$colors;
+    private _$colorSwatchesChildren;
+    selectColors($colors: HColorItem[] | HColorItem): void;
+    clearAllColors(): void;
     connectedCallback(): void;
     private _addCssClasses;
     private _hideItems;
     private _showAllItemsEvent;
     private _setupEvents;
     private _handleColorClicked;
+    private _toggleColorItem;
     private _handleColorClickedForMultipleMode;
     private _handleColorClickedForSingleMode;
     private _toggleSelectedAttribute;
     private _isColorAlreadyExistInArray;
     private _removeExistingColorFromArray;
-    private _dispatchColorSelectEvent;
-    private _setColorsDispatchValue;
-    private _getOnlyColorValues;
+    private _dispatchColorChangeEvent;
+    protected render(): TemplateResult;
 }

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

@@ -1,8 +1,11 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { property, state } from 'lit/decorators';
+import { html } from 'lit';
+import { property } from 'lit/decorators';
+import { ArrayUtils } 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 { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
+import 'lit-html';
+import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_TAG_NAME, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
 import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
 import { SHOW_MORE_EVENT_NAMES } from './show-more/show_more_constants.js';
 
@@ -11,43 +14,75 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         super(...arguments);
         this.multiple = false;
         this.selectedColors = [];
+        this.showMoreBtnText = 'Pokaż wszystkie kolory';
         this._handleColorClicked = ({ target }) => {
             const $colorItem = target;
-            this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+            this._toggleColorItem($colorItem);
+            this._dispatchColorChangeEvent($colorItem);
         };
-        this._dispatchColorSelectEvent = () => {
-            const detail = {
-                colors: this._setColorsDispatchValue(this.selectedColors)
-            };
-            this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_EVENT_NAMES.selected, {
+        this._dispatchColorChangeEvent = ($colorItem) => {
+            const colorsDetails = this.selectedColors.reduce(({ colors: colorsSoFar, values: valuesSoFar }, color) => {
+                return {
+                    colors: [...colorsSoFar, color.color],
+                    values: [...colorsSoFar, color.value]
+                };
+            }, {
+                colors: [],
+                values: []
+            });
+            this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_EVENT_NAMES.change, {
                 bubbles: true,
-                detail
+                detail: {
+                    ...colorsDetails,
+                    $colorItem
+                }
             }));
         };
     }
+    selectColors($colors) {
+        const colorsArr = ArrayUtils.makeAsArray($colors);
+        if (!colorsArr.length) {
+            this.clearAllColors();
+            return;
+        }
+        colorsArr.forEach(($color) => this._toggleColorItem($color));
+    }
+    clearAllColors() {
+        [...this.selectedColors].forEach(($color) => {
+            this._toggleColorItem($color);
+        });
+    }
     connectedCallback() {
         super.connectedCallback();
         this._setupEvents();
         this._addCssClasses();
         this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
         this._showAllItemsEvent();
+        this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
+        this._$colors = [...this.querySelectorAll('h-color-item')];
     }
     _addCssClasses() {
         this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
         this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
     }
     _hideItems(numberOfVisibleColors) {
-        this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem, index) => {
+        var _a;
+        this._$colorSwatchesChildren = (_a = document.querySelector(COLOR_SWATCHES_TAG_NAME)) === null || _a === void 0 ? void 0 : _a.children;
+        if (!this._$colorSwatchesChildren)
+            return;
+        Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild, index) => {
             if (index > numberOfVisibleColors - 1) {
-                $colorItem.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+                $colorSwatchesChild.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
             }
         });
     }
     _showAllItemsEvent() {
         this.addEventListener(SHOW_MORE_EVENT_NAMES.showMore, () => {
             var _a;
-            this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => {
-                $colorItem.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+            if (!this._$colorSwatchesChildren)
+                return;
+            Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild) => {
+                $colorSwatchesChild.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
             });
             (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
         });
@@ -55,12 +90,14 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
     _setupEvents() {
         this.addEventListener(COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
     }
+    _toggleColorItem($colorItem) {
+        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+    }
     _handleColorClickedForMultipleMode($colorItem) {
         !this._isColorAlreadyExistInArray($colorItem)
             ? (this.selectedColors = [...this.selectedColors, $colorItem])
             : this._removeExistingColorFromArray($colorItem);
         this._toggleSelectedAttribute($colorItem);
-        this._dispatchColorSelectEvent();
     }
     _handleColorClickedForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
@@ -68,7 +105,6 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         if ($previouslySelected && $previouslySelected !== $colorItem)
             $previouslySelected.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE);
         this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
-        this._dispatchColorSelectEvent();
     }
     _toggleSelectedAttribute($colorItem) {
         $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
@@ -82,15 +118,12 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
         this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
     }
-    _setColorsDispatchValue(selectedColors) {
-        if (this.selectedColors.length > 1)
-            return this._getOnlyColorValues(selectedColors);
-        if (this.selectedColors.length === 1)
-            return selectedColors[0].color;
-        return '';
-    }
-    _getOnlyColorValues(selectedColors) {
-        return selectedColors.map((selectedColor) => selectedColor.color);
+    render() {
+        return html `
+            ${this.getSlot('default')}
+            ${this._$colors.length > this.numberOfVisibleColors &&
+            html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`}
+        `;
     }
 };
 __decorate([
@@ -102,9 +135,13 @@ __decorate([
     __metadata("design:type", Number)
 ], HColorSwatches.prototype, "numberOfVisibleColors", void 0);
 __decorate([
-    state(),
+    property(),
     __metadata("design:type", Array)
 ], HColorSwatches.prototype, "selectedColors", void 0);
+__decorate([
+    property({ type: String, attribute: 'show-more-btn-text' }),
+    __metadata("design:type", Object)
+], HColorSwatches.prototype, "showMoreBtnText", void 0);
 HColorSwatches = __decorate([
     phoenixCustomElement('h-color-swatches')
 ], HColorSwatches);