@shoper/phoenix_design_system 0.22.5-7 → 0.22.5-9

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

@@ -7,8 +7,8 @@ var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var btn_controller = require('../../../controllers/btn_controller.js');
-var color_item_constants = require('./color_item_constants.js');
 var color_swatches_constants = require('../color_swatches_constants.js');
+var color_item_constants = require('./color_item_constants.js');
 
 exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {

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

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
 var decorators = require('lit/decorators');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
-var color_item_constants = require('./color_item/color_item_constants.js');
 var color_swatches_constants = require('./color_swatches_constants.js');
+var color_item_constants = require('./color_item/color_item_constants.js');
 
 exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
@@ -21,7 +22,7 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         };
         this._dispatchColorSelectEvent = () => {
             const detail = {
-                colors: this.selectedColors.length > 1 ? this._getColorValuesOnly(this.selectedColors) : this.selectedColors[0].color
+                colors: this._setColorsDispatchValue(this.selectedColors)
             };
             this.dispatchEvent(new CustomEvent(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, {
                 bubbles: true,
@@ -33,39 +34,73 @@ exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.
         super.connectedCallback();
         this._setupEvents();
         this._addCssClasses();
+        this._hideItems(this.itemsToShow);
     }
     _addCssClasses() {
         this.querySelectorAll('h-color-item').forEach(($colorItem) => $colorItem.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
         this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
     }
+    _hideItems(itemsToShow) {
+        this.querySelectorAll('h-color-item').forEach(($colorItem, index) => {
+            if (index > itemsToShow - 1) {
+                $colorItem.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+                this.showMoreButton = true;
+            }
+        });
+    }
+    _showAllItemsAndHideButton() {
+        var _a;
+        this.querySelectorAll('h-color-item').forEach(($colorItem) => {
+            $colorItem.removeAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+        });
+        (_a = this.querySelector(`.${color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatchesShowMoreButton}`)) === null || _a === void 0 ? void 0 : _a.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+    }
     _setupEvents() {
         this.addEventListener(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
     }
     _handleColorClickedForMultipleMode($colorItem) {
-        if (!this._isColorAlreadyAdded($colorItem)) {
-            this.selectedColors = [...this.selectedColors, $colorItem];
-        }
-        $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
-            ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
-            : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+        !this._isColorAlreadyExistInArray($colorItem)
+            ? (this.selectedColors = [...this.selectedColors, $colorItem])
+            : this._removeExistingColorFromArray($colorItem);
+        this._toggleSelectedAttribute($colorItem);
         this._dispatchColorSelectEvent();
     }
     _handleColorClickedForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
-        $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
-            ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
-            : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+        this._toggleSelectedAttribute($colorItem);
         if ($previouslySelected && $previouslySelected !== $colorItem)
             $previouslySelected.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE);
-        this.selectedColors = [$colorItem];
+        $previouslySelected === $colorItem ? (this.selectedColors = []) : (this.selectedColors = [$colorItem]);
         this._dispatchColorSelectEvent();
     }
-    _isColorAlreadyAdded($colorItem) {
-        return this.selectedColors.filter((selectedColor) => selectedColor.color === $colorItem.color).length > 0;
+    _toggleSelectedAttribute($colorItem) {
+        $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
+            ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
+            : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+    }
+    _isColorAlreadyExistInArray($colorItem) {
+        return this.selectedColors.includes($colorItem);
+    }
+    _removeExistingColorFromArray($colorItem) {
+        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 '';
     }
-    _getColorValuesOnly(selectedColors) {
+    _getOnlyColorValues(selectedColors) {
         return selectedColors.map((selectedColor) => selectedColor.color);
     }
+    render() {
+        return lit.html `${this.showMoreButton &&
+            lit.html `<button class="${color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatchesShowMoreButton}" @click="${this._showAllItemsAndHideButton}">
+            ${this.showMoreButtonText}
+        </button>`}`;
+    }
 };
 tslib_es6.__decorate([
     decorators.property({ type: Boolean }),
@@ -75,10 +110,22 @@ tslib_es6.__decorate([
     decorators.property({ type: Boolean }),
     tslib_es6.__metadata("design:type", Object)
 ], exports.HColorSwatches.prototype, "multiple", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HColorSwatches.prototype, "itemsToShow", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorSwatches.prototype, "showMoreButtonText", void 0);
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Array)
 ], exports.HColorSwatches.prototype, "selectedColors", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorSwatches.prototype, "showMoreButton", void 0);
 exports.HColorSwatches = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-color-swatches')
 ], exports.HColorSwatches);

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

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

@@ -6,12 +6,15 @@ const baseCssClass = 'color-swatches';
 const COLOR_SWATCHES_CSS_CLASSES = {
     colorItem: 'color-item',
     colorSwatches: baseCssClass,
-    colorSwatchesItem: `${baseCssClass}__color-item`
+    colorSwatchesItem: `${baseCssClass}__color-item`,
+    colorSwatchesShowMoreButton: `${baseCssClass}__show-more`
 };
 const COLOR_SWATCHES_EVENT_NAMES = {
     selected: 'colorSwatchesSelected'
-};
+};
+const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
 
 exports.COLOR_SWATCHES_CSS_CLASSES = COLOR_SWATCHES_CSS_CLASSES;
 exports.COLOR_SWATCHES_EVENT_NAMES = COLOR_SWATCHES_EVENT_NAMES;
+exports.COLOR_SWATCHES_HIDDEN_ATTRIBUTE = COLOR_SWATCHES_HIDDEN_ATTRIBUTE;
 //# sourceMappingURL=color_swatches_constants.js.map

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

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

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

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var color_swatches_constants = require('../../color_swatches/color_swatches_constants.js');
+
+exports.HColorSwatchesControl = class HColorSwatchesControl extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+    }
+    _setupEvents() {
+        this.addEventListener(color_swatches_constants.COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
+            this.selectedColors = event.detail.colors;
+        });
+    }
+    render() {
+        return lit.html `
+            <h-input hidden="true">
+                <h-input-control value="${this.selectedColors}"></h-input-control>
+            </h-input>
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorSwatchesControl.prototype, "name", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorSwatchesControl.prototype, "error", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HColorSwatchesControl.prototype, "selectedColors", void 0);
+exports.HColorSwatchesControl = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-color-swatches-control')
+], exports.HColorSwatchesControl);
+//# sourceMappingURL=color_swatches_control.js.map

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

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

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

@@ -60,6 +60,7 @@ 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/color_swatches_control.js');
 var color_item = require('./components/color_swatches/color_item/color_item.js');
 var color_swatches = require('./components/color_swatches/color_swatches.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
@@ -344,6 +345,12 @@ Object.defineProperty(exports, 'HBackdrop', {
 		return backdrop.HBackdrop;
 	}
 });
+Object.defineProperty(exports, 'HColorSwatchesControl', {
+	enumerable: true,
+	get: function () {
+		return color_swatches_control.HColorSwatchesControl;
+	}
+});
 Object.defineProperty(exports, 'HColorItem', {
 	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;"}
+{"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;"}

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

@@ -3,8 +3,8 @@ 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 { BtnController } from '../../../controllers/btn_controller.js';
-import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item_constants.js';
 import { COLOR_SWATCHES_CSS_CLASSES } from '../color_swatches_constants.js';
+import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item_constants.js';
 
 let HColorItem = class HColorItem extends PhoenixLightLitElement {
     constructor() {

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

@@ -1,16 +1,26 @@
+import { TemplateResult } from 'lit';
 import { HColorItem } from "./color_item/color_item";
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HColorSwatches extends PhoenixLightLitElement {
     inline: boolean;
     multiple: boolean;
+    itemsToShow: number;
+    showMoreButtonText: string;
     selectedColors: HColorItem[];
+    showMoreButton: boolean;
     connectedCallback(): void;
     private _addCssClasses;
+    private _hideItems;
+    private _showAllItemsAndHideButton;
     private _setupEvents;
     private _handleColorClicked;
     private _handleColorClickedForMultipleMode;
     private _handleColorClickedForSingleMode;
-    private _isColorAlreadyAdded;
+    private _toggleSelectedAttribute;
+    private _isColorAlreadyExistInArray;
+    private _removeExistingColorFromArray;
     private _dispatchColorSelectEvent;
-    private _getColorValuesOnly;
+    private _setColorsDispatchValue;
+    private _getOnlyColorValues;
+    protected render(): TemplateResult;
 }

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

@@ -1,9 +1,10 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
 import { property, state } 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 { COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
 import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
-import { COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_CSS_CLASSES } from './color_swatches_constants.js';
 
 let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
     constructor() {
@@ -17,7 +18,7 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         };
         this._dispatchColorSelectEvent = () => {
             const detail = {
-                colors: this.selectedColors.length > 1 ? this._getColorValuesOnly(this.selectedColors) : this.selectedColors[0].color
+                colors: this._setColorsDispatchValue(this.selectedColors)
             };
             this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_EVENT_NAMES.selected, {
                 bubbles: true,
@@ -29,39 +30,73 @@ let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
         super.connectedCallback();
         this._setupEvents();
         this._addCssClasses();
+        this._hideItems(this.itemsToShow);
     }
     _addCssClasses() {
         this.querySelectorAll('h-color-item').forEach(($colorItem) => $colorItem.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
         this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
     }
+    _hideItems(itemsToShow) {
+        this.querySelectorAll('h-color-item').forEach(($colorItem, index) => {
+            if (index > itemsToShow - 1) {
+                $colorItem.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+                this.showMoreButton = true;
+            }
+        });
+    }
+    _showAllItemsAndHideButton() {
+        var _a;
+        this.querySelectorAll('h-color-item').forEach(($colorItem) => {
+            $colorItem.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+        });
+        (_a = this.querySelector(`.${COLOR_SWATCHES_CSS_CLASSES.colorSwatchesShowMoreButton}`)) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+    }
     _setupEvents() {
         this.addEventListener(COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
     }
     _handleColorClickedForMultipleMode($colorItem) {
-        if (!this._isColorAlreadyAdded($colorItem)) {
-            this.selectedColors = [...this.selectedColors, $colorItem];
-        }
-        $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
-            ? $colorItem.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
-            : $colorItem.setAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+        !this._isColorAlreadyExistInArray($colorItem)
+            ? (this.selectedColors = [...this.selectedColors, $colorItem])
+            : this._removeExistingColorFromArray($colorItem);
+        this._toggleSelectedAttribute($colorItem);
         this._dispatchColorSelectEvent();
     }
     _handleColorClickedForSingleMode($colorItem) {
         const $previouslySelected = this.selectedColors[0];
-        $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
-            ? $colorItem.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
-            : $colorItem.setAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+        this._toggleSelectedAttribute($colorItem);
         if ($previouslySelected && $previouslySelected !== $colorItem)
             $previouslySelected.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE);
-        this.selectedColors = [$colorItem];
+        $previouslySelected === $colorItem ? (this.selectedColors = []) : (this.selectedColors = [$colorItem]);
         this._dispatchColorSelectEvent();
     }
-    _isColorAlreadyAdded($colorItem) {
-        return this.selectedColors.filter((selectedColor) => selectedColor.color === $colorItem.color).length > 0;
+    _toggleSelectedAttribute($colorItem) {
+        $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
+            ? $colorItem.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
+            : $colorItem.setAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+    }
+    _isColorAlreadyExistInArray($colorItem) {
+        return this.selectedColors.includes($colorItem);
+    }
+    _removeExistingColorFromArray($colorItem) {
+        const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
+        this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
     }
-    _getColorValuesOnly(selectedColors) {
+    _setColorsDispatchValue(selectedColors) {
+        if (this.selectedColors.length > 1)
+            return this._getOnlyColorValues(selectedColors);
+        if (this.selectedColors.length === 1)
+            return selectedColors[0].color;
+        return '';
+    }
+    _getOnlyColorValues(selectedColors) {
         return selectedColors.map((selectedColor) => selectedColor.color);
     }
+    render() {
+        return html `${this.showMoreButton &&
+            html `<button class="${COLOR_SWATCHES_CSS_CLASSES.colorSwatchesShowMoreButton}" @click="${this._showAllItemsAndHideButton}">
+            ${this.showMoreButtonText}
+        </button>`}`;
+    }
 };
 __decorate([
     property({ type: Boolean }),
@@ -71,10 +106,22 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Object)
 ], HColorSwatches.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], HColorSwatches.prototype, "itemsToShow", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorSwatches.prototype, "showMoreButtonText", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)
 ], HColorSwatches.prototype, "selectedColors", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], HColorSwatches.prototype, "showMoreButton", void 0);
 HColorSwatches = __decorate([
     phoenixCustomElement('h-color-swatches')
 ], HColorSwatches);

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

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

@@ -2,7 +2,9 @@ export declare const COLOR_SWATCHES_CSS_CLASSES: {
     readonly colorItem: "color-item";
     readonly colorSwatches: "color-swatches";
     readonly colorSwatchesItem: "color-swatches__color-item";
+    readonly colorSwatchesShowMoreButton: "color-swatches__show-more";
 };
 export declare const COLOR_SWATCHES_EVENT_NAMES: {
     readonly selected: "colorSwatchesSelected";
 };
+export declare const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = "hidden";

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

@@ -2,11 +2,13 @@ const baseCssClass = 'color-swatches';
 const COLOR_SWATCHES_CSS_CLASSES = {
     colorItem: 'color-item',
     colorSwatches: baseCssClass,
-    colorSwatchesItem: `${baseCssClass}__color-item`
+    colorSwatchesItem: `${baseCssClass}__color-item`,
+    colorSwatchesShowMoreButton: `${baseCssClass}__show-more`
 };
 const COLOR_SWATCHES_EVENT_NAMES = {
     selected: 'colorSwatchesSelected'
-};
+};
+const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
 
-export { COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES };
+export { COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE };
 //# sourceMappingURL=color_swatches_constants.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/color_swatches_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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

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

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

@@ -1,5 +1,10 @@
+import { TemplateResult } from 'lit';
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HColorSwatchesControl extends PhoenixLightLitElement {
     name: string;
     error: boolean;
+    selectedColors: string | string[];
+    connectedCallback(): void;
+    private _setupEvents;
+    protected render(): TemplateResult;
 }

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

@@ -1,19 +1,43 @@
-import { __decorate, __metadata } from "tslib";
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import { property } from 'lit/decorators';
-let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitElement {
-};
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], HColorSwatchesControl.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HColorSwatchesControl.prototype, "error", void 0);
-HColorSwatchesControl = __decorate([
-    phoenixCustomElement('h-color-swatches-control')
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property, state } 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 { COLOR_SWATCHES_EVENT_NAMES } from '../../color_swatches/color_swatches_constants.js';
+
+let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+    }
+    _setupEvents() {
+        this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
+            this.selectedColors = event.detail.colors;
+        });
+    }
+    render() {
+        return html `
+            <h-input hidden="true">
+                <h-input-control value="${this.selectedColors}"></h-input-control>
+            </h-input>
+        `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorSwatchesControl.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HColorSwatchesControl.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HColorSwatchesControl.prototype, "selectedColors", void 0);
+HColorSwatchesControl = __decorate([
+    phoenixCustomElement('h-color-swatches-control')
 ], HColorSwatchesControl);
+
 export { HColorSwatchesControl };
-//# sourceMappingURL=color_swatches_control.js.map
+//# sourceMappingURL=color_swatches_control.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"color_swatches_control.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/color_swatches/color_swatches_control.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,sBAAsB;CAMhE,CAAA;AAJG;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mDACP;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;oDACN;AALb,qBAAqB;IADjC,oBAAoB,CAAC,0BAA0B,CAAC;GACpC,qBAAqB,CAMjC;SANY,qBAAqB"}
+{"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;"}

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

@@ -65,6 +65,7 @@ export { RelativePositionController } from './controllers/relative_position_cont
 export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller';
 export { HBackdrop } from './components/backdrop/backdrop';
 export { BackdropController } from "./components/backdrop/controller/backdrop_controller";
+export { HColorSwatchesControl } from './components/form/color_swatches/color_swatches_control';
 export { HColorSwatches } from './components/color_swatches/color_swatches';
 export { HColorItem } from './components/color_swatches/color_item/color_item';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller';

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

@@ -56,6 +56,7 @@ 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/color_swatches_control.js';
 export { HColorItem } from './components/color_swatches/color_item/color_item.js';
 export { HColorSwatches } from './components/color_swatches/color_swatches.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.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;"}
+{"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;"}

package/package.json

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