@shoper/phoenix_design_system 1.2.12 → 1.2.13-1

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

@@ -33,6 +33,8 @@ exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixL
         this.setAttribute('aria-label', this.label ? this.label : this.color);
         this.unclickable && this.removeAttribute('tabindex');
         this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItem);
+        if (!this.value)
+            this.value = this.color;
         this.small && this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItemSmall);
     }
     attributeChangedCallback(name, value, newValue) {
@@ -58,6 +60,10 @@ tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HColorItem.prototype, "color", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorItem.prototype, "value", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: String }),
     tslib_es6.__metadata("design:type", String)

package/build/cjs/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;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;"}
+{"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;"}

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
+var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var color_swatches_constants = require('./color_swatches_constants.js');
@@ -17,24 +18,45 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         this.selectedColors = [];
         this._handleColorClicked = ({ target }) => {
             const $colorItem = target;
-            this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+            this._toggleColorItem($colorItem);
         };
-        this._dispatchColorSelectEvent = () => {
-            const detail = {
-                colors: this._setColorsDispatchValue(this.selectedColors)
-            };
-            this.dispatchEvent(new CustomEvent(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, {
+        this._dispatchColorChangeEvent = () => {
+            const detail = 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_constants.COLOR_SWATCHES_EVENT_NAMES.change, {
                 bubbles: true,
                 detail
             }));
         };
     }
+    selectColors($colors) {
+        const colorsArr = utilities.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_swatches_constants.COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
@@ -59,12 +81,15 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
     _setupEvents() {
         this.addEventListener(color_item_constants.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();
+        this._dispatchColorChangeEvent();
     }
     _handleColorClickedForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
@@ -72,7 +97,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         if ($previouslySelected && $previouslySelected !== $colorItem)
             $previouslySelected.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE);
         this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
-        this._dispatchColorSelectEvent();
+        this._dispatchColorChangeEvent();
     }
     _toggleSelectedAttribute($colorItem) {
         $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
@@ -86,16 +111,6 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         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);
-    }
 };
 tslib_es6.__decorate([
     decorators.property({ type: Boolean }),
@@ -106,7 +121,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Number)
 ], exports.HColorSwatches.prototype, "numberOfVisibleColors", void 0);
 tslib_es6.__decorate([
-    decorators.state(),
+    decorators.property(),
     tslib_es6.__metadata("design:type", Array)
 ], exports.HColorSwatches.prototype, "selectedColors", void 0);
 exports.HColorSwatches = tslib_es6.__decorate([

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

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches_constants.js

@@ -12,7 +12,7 @@ const COLOR_SWATCHES_CSS_CLASSES = {
     colorSwatchesItem: `${colorSwatchesBaseCssClass}__color-item`
 };
 const COLOR_SWATCHES_EVENT_NAMES = {
-    selected: 'colorSwatchesSelected',
+    change: 'change',
     markDisabledItems: 'markDisabledItems'
 };
 const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';

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

@@ -5,7 +5,6 @@ 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 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 index = require('../../../../external/classnames/index.js');
@@ -18,6 +17,18 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
         super(...arguments);
         this.selectedColors = [];
     }
+    selectColors(values) {
+        if (!this._$colorSwatches)
+            return;
+        const $colors = values === null || values === void 0 ? void 0 : values.map((value) => this.querySelector(`h-color-item[value="${value}"]`)).filter(($color) => $color);
+        this._$colorSwatches.selectColors($colors);
+        this.requestUpdate();
+    }
+    clearAllColors() {
+        var _a;
+        (_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.clearAllColors();
+        this.requestUpdate();
+    }
     connectedCallback() {
         super.connectedCallback();
         this._setupEvents();
@@ -26,13 +37,28 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
             [color_swatches_control_constants.COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlDisabled]: this.disabled,
             [color_swatches_control_constants.COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlError]: this.error
         });
+        this._$colorSwatches = this.querySelector('h-color-swatches');
         if (cssClasses)
             this.classList.add(cssClasses);
+        this._getSelectedColors();
+    }
+    _getSelectedColors() {
+        this.selectedColors = this._getSelectedColorItems().map((selectedColor) => { var _a; return (_a = selectedColor.value) !== null && _a !== void 0 ? _a : selectedColor.color; });
+    }
+    _getAllColorItems() {
+        return [...this.querySelectorAll('h-color-item[selected]')];
+    }
+    _getSelectedColorItems() {
+        return this._getAllColorItems().filter(($color) => $color.selected);
     }
     _setupEvents() {
-        this.addEventListener(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
-            const eventValue = event.detail.colors;
-            this.selectedColors = eventValue ? utilities.ArrayUtils.makeAsArray(eventValue) : [];
+        this.addEventListener(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.change, (event) => {
+            event.preventDefault();
+            this.selectedColors = event.detail.values;
+            this.dispatchEvent(new CustomEvent(color_swatches_control_constants.COLOR_SWATCHES_CONTROL_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: event.detail
+            }));
         });
     }
     render() {
@@ -48,7 +74,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", String)
 ], exports.HColorSwatchesControl.prototype, "controlId", void 0);
 tslib_es6.__decorate([
-    decorators.property({ type: String }),
+    decorators.property({ type: String, attribute: 'control-name' }),
     tslib_es6.__metadata("design:type", String)
 ], exports.HColorSwatchesControl.prototype, "controlName", void 0);
 tslib_es6.__decorate([
@@ -64,7 +90,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:type", Boolean)
 ], exports.HColorSwatchesControl.prototype, "error", void 0);
 tslib_es6.__decorate([
-    decorators.state(),
+    decorators.property(),
     tslib_es6.__metadata("design:type", Array)
 ], exports.HColorSwatchesControl.prototype, "selectedColors", void 0);
 exports.HColorSwatchesControl = tslib_es6.__decorate([

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.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,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0CAA8C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_swatches_control/color_swatches_control_constants.js

@@ -7,7 +7,11 @@ const COLOR_SWATCHES_CONTROL_CSS_CLASSES = {
     colorSwatchesControl: baseColorSwatchesControlClass,
     colorSwatchesControlDisabled: `${baseColorSwatchesControlClass}_disabled`,
     colorSwatchesControlError: `${baseColorSwatchesControlClass}_error`
+};
+const COLOR_SWATCHES_CONTROL_EVENT_NAMES = {
+    change: 'colorSwatchesControl.change'
 };
 
 exports.COLOR_SWATCHES_CONTROL_CSS_CLASSES = COLOR_SWATCHES_CONTROL_CSS_CLASSES;
+exports.COLOR_SWATCHES_CONTROL_EVENT_NAMES = COLOR_SWATCHES_CONTROL_EVENT_NAMES;
 //# sourceMappingURL=color_swatches_control_constants.js.map

package/build/cjs/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_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;"}
+{"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/cjs/packages/phoenix/src/components/form/file_picker/file_picker.js

@@ -19,6 +19,10 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
     constructor() {
         super(...arguments);
         this.type = input_constants.INPUT_CONTROL_TYPES.file;
+        this.labelText = 'Wgraj plik';
+        this.labelIconName = 'icon-upload';
+        this.removeButtonText = 'Usuń plik';
+        this.removeButtonIconName = 'icon-x';
         this._$fileInputRef = ref_js.createRef();
         this._handleChangeEvent = (event) => {
             const filesList = this._getFiles(event);
@@ -63,6 +67,7 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
         super.connectedCallback();
         this._addEventListeners();
         const cssClasses = index['default']({
+            [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePicker]: true,
             [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
             [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
             [file_picker_constants.FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
@@ -95,7 +100,7 @@ exports.HFilePicker = class HFilePicker extends phoenix_light_lit_element.Phoeni
                   />`
             : lit.nothing}
             ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
-            ? lit.html `<h-file
+            ? lit.html ` <h-file
                       name="${this._file.name}"
                       id="${this._file.id}"
                       remove-button-text="${this.removeButtonText}"

package/build/cjs/packages/phoenix/src/components/form/file_picker/file_picker.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,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0CAA8C;AAClE;AACA,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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

@@ -75,7 +75,7 @@ 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) => {
@@ -96,7 +96,9 @@ 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();
@@ -119,11 +121,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;
@@ -210,10 +209,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,6 +250,7 @@ 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() {

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;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;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');
@@ -421,12 +422,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 +435,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;"}

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

@@ -1,6 +1,7 @@
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HColorItem extends PhoenixLightLitElement {
     color: string;
+    value: string;
     label?: string;
     disabled: boolean;
     selected: boolean;

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

@@ -29,6 +29,8 @@ let HColorItem = class HColorItem extends PhoenixLightLitElement {
         this.setAttribute('aria-label', this.label ? this.label : this.color);
         this.unclickable && this.removeAttribute('tabindex');
         this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorItem);
+        if (!this.value)
+            this.value = this.color;
         this.small && this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorItemSmall);
     }
     attributeChangedCallback(name, value, newValue) {
@@ -54,6 +56,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)

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;AACA;"}

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

@@ -4,18 +4,20 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
     multiple: boolean;
     numberOfVisibleColors: number;
     selectedColors: HColorItem[];
+    private _$colors;
+    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;
 }

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

@@ -1,5 +1,6 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { property, state } from 'lit/decorators';
+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';
@@ -13,24 +14,45 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         this.selectedColors = [];
         this._handleColorClicked = ({ target }) => {
             const $colorItem = target;
-            this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+            this._toggleColorItem($colorItem);
         };
-        this._dispatchColorSelectEvent = () => {
-            const detail = {
-                colors: this._setColorsDispatchValue(this.selectedColors)
-            };
-            this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_EVENT_NAMES.selected, {
+        this._dispatchColorChangeEvent = () => {
+            const detail = 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
             }));
         };
     }
+    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));
@@ -55,12 +77,15 @@ 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();
+        this._dispatchColorChangeEvent();
     }
     _handleColorClickedForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
@@ -68,7 +93,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         if ($previouslySelected && $previouslySelected !== $colorItem)
             $previouslySelected.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE);
         this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
-        this._dispatchColorSelectEvent();
+        this._dispatchColorChangeEvent();
     }
     _toggleSelectedAttribute($colorItem) {
         $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
@@ -82,16 +107,6 @@ 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);
-    }
 };
 __decorate([
     property({ type: Boolean }),
@@ -102,7 +117,7 @@ __decorate([
     __metadata("design:type", Number)
 ], HColorSwatches.prototype, "numberOfVisibleColors", void 0);
 __decorate([
-    state(),
+    property(),
     __metadata("design:type", Array)
 ], HColorSwatches.prototype, "selectedColors", void 0);
 HColorSwatches = __decorate([

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_swatches_constants.d.ts

@@ -6,7 +6,7 @@ export declare const COLOR_SWATCHES_CSS_CLASSES: {
     readonly colorSwatchesItem: "color-swatches__color-item";
 };
 export declare const COLOR_SWATCHES_EVENT_NAMES: {
-    readonly selected: "colorSwatchesSelected";
+    readonly change: "change";
     readonly markDisabledItems: "markDisabledItems";
 };
 export declare const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = "hidden";

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

@@ -8,7 +8,7 @@ const COLOR_SWATCHES_CSS_CLASSES = {
     colorSwatchesItem: `${colorSwatchesBaseCssClass}__color-item`
 };
 const COLOR_SWATCHES_EVENT_NAMES = {
-    selected: 'colorSwatchesSelected',
+    change: 'change',
     markDisabledItems: 'markDisabledItems'
 };
 const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';

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

@@ -1,3 +1,4 @@
-export interface IColorSelectValue {
-    colors: string | string[] | undefined;
-}
+export declare type TSelectedColorsObject = {
+    colors: string[];
+    values: string[];
+};

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

@@ -7,7 +7,13 @@ export declare class HColorSwatchesControl extends PhoenixLightLitElement {
     required: boolean;
     error: boolean;
     selectedColors: string[];
+    selectColors(values: string[]): void;
+    clearAllColors(): void;
+    private _$colorSwatches;
     connectedCallback(): void;
+    private _getSelectedColors;
+    private _getAllColorItems;
+    private _getSelectedColorItems;
     private _setupEvents;
     protected render(): TemplateResult | void;
 }

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

@@ -1,12 +1,11 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { html } from 'lit';
-import { property, state } from 'lit/decorators';
-import { ArrayUtils } from '@dreamcommerce/utilities';
+import { property } from 'lit/decorators';
 import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import classnames from '../../../../external/classnames/index.js';
 import { INPUT_CONTROL_TYPES } from '../input/input_constants.js';
-import { COLOR_SWATCHES_CONTROL_CSS_CLASSES } from './color_swatches_control_constants.js';
+import { COLOR_SWATCHES_CONTROL_CSS_CLASSES, COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './color_swatches_control_constants.js';
 import { COLOR_SWATCHES_EVENT_NAMES } from '../../color_swatches/color_swatches_constants.js';
 
 let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitElement {
@@ -14,6 +13,18 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
         super(...arguments);
         this.selectedColors = [];
     }
+    selectColors(values) {
+        if (!this._$colorSwatches)
+            return;
+        const $colors = values === null || values === void 0 ? void 0 : values.map((value) => this.querySelector(`h-color-item[value="${value}"]`)).filter(($color) => $color);
+        this._$colorSwatches.selectColors($colors);
+        this.requestUpdate();
+    }
+    clearAllColors() {
+        var _a;
+        (_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.clearAllColors();
+        this.requestUpdate();
+    }
     connectedCallback() {
         super.connectedCallback();
         this._setupEvents();
@@ -22,13 +33,28 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
             [COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlDisabled]: this.disabled,
             [COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlError]: this.error
         });
+        this._$colorSwatches = this.querySelector('h-color-swatches');
         if (cssClasses)
             this.classList.add(cssClasses);
+        this._getSelectedColors();
+    }
+    _getSelectedColors() {
+        this.selectedColors = this._getSelectedColorItems().map((selectedColor) => { var _a; return (_a = selectedColor.value) !== null && _a !== void 0 ? _a : selectedColor.color; });
+    }
+    _getAllColorItems() {
+        return [...this.querySelectorAll('h-color-item[selected]')];
+    }
+    _getSelectedColorItems() {
+        return this._getAllColorItems().filter(($color) => $color.selected);
     }
     _setupEvents() {
-        this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
-            const eventValue = event.detail.colors;
-            this.selectedColors = eventValue ? ArrayUtils.makeAsArray(eventValue) : [];
+        this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.change, (event) => {
+            event.preventDefault();
+            this.selectedColors = event.detail.values;
+            this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_CONTROL_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: event.detail
+            }));
         });
     }
     render() {
@@ -44,7 +70,7 @@ __decorate([
     __metadata("design:type", String)
 ], HColorSwatchesControl.prototype, "controlId", void 0);
 __decorate([
-    property({ type: String }),
+    property({ type: String, attribute: 'control-name' }),
     __metadata("design:type", String)
 ], HColorSwatchesControl.prototype, "controlName", void 0);
 __decorate([
@@ -60,7 +86,7 @@ __decorate([
     __metadata("design:type", Boolean)
 ], HColorSwatchesControl.prototype, "error", void 0);
 __decorate([
-    state(),
+    property(),
     __metadata("design:type", Array)
 ], HColorSwatchesControl.prototype, "selectedColors", void 0);
 HColorSwatchesControl = __decorate([

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/color_swatches_control/color_swatches_control_constants.d.ts

@@ -3,3 +3,6 @@ export declare const COLOR_SWATCHES_CONTROL_CSS_CLASSES: {
     readonly colorSwatchesControlDisabled: "color-swatches-control_disabled";
     readonly colorSwatchesControlError: "color-swatches-control_error";
 };
+export declare const COLOR_SWATCHES_CONTROL_EVENT_NAMES: {
+    readonly change: "colorSwatchesControl.change";
+};

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js

@@ -3,7 +3,10 @@ const COLOR_SWATCHES_CONTROL_CSS_CLASSES = {
     colorSwatchesControl: baseColorSwatchesControlClass,
     colorSwatchesControlDisabled: `${baseColorSwatchesControlClass}_disabled`,
     colorSwatchesControlError: `${baseColorSwatchesControlClass}_error`
+};
+const COLOR_SWATCHES_CONTROL_EVENT_NAMES = {
+    change: 'colorSwatchesControl.change'
 };
 
-export { COLOR_SWATCHES_CONTROL_CSS_CLASSES };
+export { COLOR_SWATCHES_CONTROL_CSS_CLASSES, COLOR_SWATCHES_CONTROL_EVENT_NAMES };
 //# sourceMappingURL=color_swatches_control_constants.js.map

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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/esm/packages/phoenix/src/components/form/file_picker/file_picker.js

@@ -15,6 +15,10 @@ let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this.type = INPUT_CONTROL_TYPES.file;
+        this.labelText = 'Wgraj plik';
+        this.labelIconName = 'icon-upload';
+        this.removeButtonText = 'Usuń plik';
+        this.removeButtonIconName = 'icon-x';
         this._$fileInputRef = createRef();
         this._handleChangeEvent = (event) => {
             const filesList = this._getFiles(event);
@@ -59,6 +63,7 @@ let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
         super.connectedCallback();
         this._addEventListeners();
         const cssClasses = classnames({
+            [FILE_PICKER_CONTROL_CSS_CLASSES.filePicker]: true,
             [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerDisabled]: this.disabled,
             [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerRequired]: this.required,
             [FILE_PICKER_CONTROL_CSS_CLASSES.filePickerError]: this.error
@@ -91,7 +96,7 @@ let HFilePicker = class HFilePicker extends PhoenixLightLitElement {
                   />`
             : nothing}
             ${((_b = this._file) === null || _b === void 0 ? void 0 : _b.name)
-            ? html `<h-file
+            ? html ` <h-file
                       name="${this._file.name}"
                       id="${this._file.id}"
                       remove-button-text="${this.removeButtonText}"

package/build/esm/packages/phoenix/src/components/form/file_picker/file_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA,eAAe,wDAA4D;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;"}

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

@@ -42,6 +42,7 @@ export declare class HSelect extends PhoenixLightLitElement {
     private _handleOptionDeselect;
     private _updateOptionsView;
     private _appendNewHTMLOption;
+    updateOptionAriaAttribute($option: HOption): void;
     private _removeHTMLOptions;
     private _handleOptionClicked;
     private _selectOption;

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

@@ -71,7 +71,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
                 SelectControlUtils.syncHTMLOptionWithModel(option, $option);
                 if (!selected)
                     return;
-                $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+                this.updateOptionAriaAttribute($option);
             });
         };
         this._handleOptionClicked = (event) => {
@@ -92,7 +92,9 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
             this._dispatchChangeEvent();
         };
         this._dispatchChangeEvent = () => {
-            this.dispatchEvent(new Event('change'));
+            this.dispatchEvent(new Event('change', {
+                bubbles: true
+            }));
         };
         this._handleResize = debounce_1(() => {
             this._closeSelect();
@@ -115,11 +117,8 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     }
     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;
@@ -206,10 +205,15 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
         const { value, selected } = option;
         const $option = SelectControlUtils.createHTMLOption(option);
         if (selected)
-            $option.setAttribute(this.multiple ? 'aria-checked' : 'aria-selected', 'true');
+            this.updateOptionAriaAttribute($option);
         this._$options[value] = $option;
         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 = SelectControlUtils.removeHTMLOptions(Object.values(this._$options), optionsValues);
     }
@@ -242,6 +246,7 @@ let HSelect = class HSelect extends PhoenixLightLitElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         this._selectController.options$.unsubscribe(this._optionsObserver);
+        this._$options = {};
         window.removeEventListener('resize', this._handleResize);
     }
     _getDropdownContentWidth() {

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

package/build/esm/packages/phoenix/src/components/slider/slider_types.d.ts

@@ -1,5 +1,8 @@
-import { Options, Splide } from '@splidejs/splide';
-export interface ISlider extends Splide {
+import { Options } from '@splidejs/splide';
+export interface ISlider {
+    mount(): void;
+    sync(slider: ISlider): this;
+    go(control: number | string): this;
 }
 export interface ISliderOptions extends Options {
     mountOnConnectedCallback: boolean;

package/build/esm/packages/phoenix/src/components/slider/slider_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAgC,kBAAkB,CAAC"}
+{"version":3,"file":"slider_types.js","sourceRoot":"","sources":["../../../../../../../src/components/slider/slider_types.ts"],"names":[],"mappings":"AAAA,OAAwB,kBAAkB,CAAC"}

package/build/esm/packages/phoenix/src/index.d.ts

@@ -77,6 +77,8 @@ export { HColorSwatchesControl } from './components/form/color_swatches_control/
 export { HColorSwatches } from './components/color_swatches/color_swatches';
 export { HColorItem } from './components/color_swatches/color_item/color_item';
 export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more';
+export { TSelectedColorsObject } from "./components/color_swatches/color_swatches_types";
+export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from "./components/form/color_swatches_control/color_swatches_control_constants";
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller';
 export * from './controllers/visibility_controller/visibility_controller_types';
 export { HSlider } from './components/slider/slider';

package/build/esm/packages/phoenix/src/index.js

@@ -65,9 +65,10 @@ export { HToggleButtonGroup } from './components/groups/toggle_button_group/togg
 export { HToggleButton } from './components/groups/toggle_button_group/toggle_button.js';
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
 export { HBackdrop } from './components/backdrop/backdrop.js';
-export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
+export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './components/form/color_swatches_control/color_swatches_control_constants.js';
 export { HColorItem } from './components/color_swatches/color_item/color_item.js';
 export { HColorSwatches } from './components/color_swatches/color_swatches.js';
+export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
 export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';
 export { HSlider } from './components/slider/slider.js';

package/build/esm/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;"}
+{"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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.2.12",
+  "version": "1.2.13-1",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",