npm - @shoper/phoenix_design_system - Versions diffs - 1.2.10 → 1.2.11-1 - Mend

@shoper/phoenix_design_system 1.2.10 → 1.2.11-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

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

@@ -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 CHANGED Viewed

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

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

@@ -19,11 +19,17 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             const $colorItem = target;
             this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($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
             }));
@@ -35,6 +41,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         this._addCssClasses();
         this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
         this._showAllItemsEvent();
+        this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
     }
     _addCssClasses() {
         this.querySelectorAll(color_swatches_constants.COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
@@ -64,7 +71,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
             ? (this.selectedColors = [...this.selectedColors, $colorItem])
             : this._removeExistingColorFromArray($colorItem);
         this._toggleSelectedAttribute($colorItem);
-        this._dispatchColorSelectEvent();
+        this._dispatchColorChangeEvent();
     }
     _handleColorClickedForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
@@ -72,7 +79,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 +93,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 }),

package/build/cjs/packages/phoenix/src/components/color_swatches/color_swatches.js.map CHANGED Viewed

	@@ -1 +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;~~"}
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;"}

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

@@ -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 CHANGED Viewed

@@ -5,7 +5,7 @@ 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');
+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');
@@ -28,11 +28,14 @@ exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_ligh
         });
         if (cssClasses)
             this.classList.add(cssClasses);
+        this._getInitiallySelectedColors();
+    }
+    _getInitiallySelectedColors() {
+        this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')].map((selectedColor) => selectedColor.value ? selectedColor.value : selectedColor.color);
     }
     _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) => {
+            this.selectedColors = event.detail.values;
         });
     }
     render() {

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

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

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

@@ -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();

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

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

package/build/cjs/packages/phoenix/src/index.js CHANGED Viewed

@@ -69,8 +69,8 @@ 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_item = require('./components/color_swatches/color_item/color_item.js');
+var color_swatches_control = require('./components/form/color_swatches_control/color_swatches_control.js');
 var color_swatches = require('./components/color_swatches/color_swatches.js');
 var show_more = require('./components/color_swatches/show-more/show_more.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
@@ -421,16 +421,16 @@ Object.defineProperty(exports, 'HBackdrop', {
 		return backdrop.HBackdrop;
 	}
 });
-Object.defineProperty(exports, 'HColorSwatchesControl', {
+Object.defineProperty(exports, 'HColorItem', {
 	enumerable: true,
 	get: function () {
-		return color_swatches_control.HColorSwatchesControl;
+		return color_item.HColorItem;
 	}
 });
-Object.defineProperty(exports, 'HColorItem', {
+Object.defineProperty(exports, 'HColorSwatchesControl', {
 	enumerable: true,
 	get: function () {
-		return color_item.HColorItem;
+		return color_swatches_control.HColorSwatchesControl;
 	}
 });
 Object.defineProperty(exports, 'HColorSwatches', {

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -15,7 +15,5 @@ export declare class HColorSwatches extends PhoenixLightLitElement {
     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 CHANGED Viewed

@@ -15,11 +15,17 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             const $colorItem = target;
             this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($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
             }));
@@ -31,6 +37,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         this._addCssClasses();
         this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
         this._showAllItemsEvent();
+        this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
     }
     _addCssClasses() {
         this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
@@ -60,7 +67,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
             ? (this.selectedColors = [...this.selectedColors, $colorItem])
             : this._removeExistingColorFromArray($colorItem);
         this._toggleSelectedAttribute($colorItem);
-        this._dispatchColorSelectEvent();
+        this._dispatchColorChangeEvent();
     }
     _handleColorClickedForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
@@ -68,7 +75,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 +89,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 }),

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

	@@ -1 +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;~~"}
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;"}

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -8,6 +8,7 @@ export declare class HColorSwatchesControl extends PhoenixLightLitElement {
     error: boolean;
     selectedColors: string[];
     connectedCallback(): void;
+    private _getInitiallySelectedColors;
     private _setupEvents;
     protected render(): TemplateResult | void;
 }

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

@@ -1,7 +1,7 @@
 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 '@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 classnames from '../../../../external/classnames/index.js';
@@ -24,11 +24,14 @@ let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitE
         });
         if (cssClasses)
             this.classList.add(cssClasses);
+        this._getInitiallySelectedColors();
+    }
+    _getInitiallySelectedColors() {
+        this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')].map((selectedColor) => selectedColor.value ? selectedColor.value : selectedColor.color);
     }
     _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) => {
+            this.selectedColors = event.detail.values;
         });
     }
     render() {

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

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

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

@@ -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();

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

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

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

@@ -65,8 +65,8 @@ 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 { HColorItem } from './components/color_swatches/color_item/color_item.js';
+export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
 export { HColorSwatches } from './components/color_swatches/color_swatches.js';
 export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';

package/package.json CHANGED Viewed

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