@shoper/phoenix_design_system 0.23.0-1 → 0.24.0

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

@@ -60,6 +60,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_item = require('./components/color_swatches/color_item/color_item.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');
 var slider = require('./components/slider/slider.js');
 var tab = require('./components/tabs/tab/tab.js');
@@ -346,6 +350,30 @@ 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 () {
+		return color_item.HColorItem;
+	}
+});
+Object.defineProperty(exports, 'HColorSwatches', {
+	enumerable: true,
+	get: function () {
+		return color_swatches.HColorSwatches;
+	}
+});
+Object.defineProperty(exports, 'HColorSwatchesShowMore', {
+	enumerable: true,
+	get: function () {
+		return show_more.HColorSwatchesShowMore;
+	}
+});
 exports.VisibilityController = visibility_controller.VisibilityController;
 Object.defineProperty(exports, 'HSlider', {
 	enumerable: true,

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

package/build/esm/{external → packages/phoenix/external}/classnames/index.js

@@ -1,7 +1,7 @@
-import { createCommonjsModule } from '../../_virtual/_commonjsHelpers.js';
+import { createCommonjsModule } from '../../../../_virtual/_commonjsHelpers.js';
 
 /*!
-  Copyright (c) 2017 Jed Watson.
+  Copyright (c) 2018 Jed Watson.
   Licensed under the MIT License (MIT), see
   http://jedwatson.github.io/classnames
 */
@@ -13,7 +13,7 @@ var classnames = createCommonjsModule(function (module) {
 
 	var hasOwn = {}.hasOwnProperty;
 
-	function classNames () {
+	function classNames() {
 		var classes = [];
 
 		for (var i = 0; i < arguments.length; i++) {
@@ -24,16 +24,22 @@ var classnames = createCommonjsModule(function (module) {
 
 			if (argType === 'string' || argType === 'number') {
 				classes.push(arg);
-			} else if (Array.isArray(arg) && arg.length) {
-				var inner = classNames.apply(null, arg);
-				if (inner) {
-					classes.push(inner);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
 				}
 			} else if (argType === 'object') {
-				for (var key in arg) {
-					if (hasOwn.call(arg, key) && arg[key]) {
-						classes.push(key);
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
 					}
+				} else {
+					classes.push(arg.toString());
 				}
 			}
 		}

package/build/{cjs → esm/packages/phoenix}/external/classnames/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;"}
+{"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;"}

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

@@ -0,0 +1,14 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HColorItem extends PhoenixLightLitElement {
+    color: string;
+    label?: string;
+    disabled: boolean;
+    selected: boolean;
+    private _btnController;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, value: string | null, newValue: string | null): void;
+    private _syncAriaPressed;
+    private setupEvents;
+    private _dispatchClickedEvent;
+}

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

@@ -0,0 +1,68 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+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_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() {
+        super();
+        this.disabled = false;
+        this.selected = false;
+        this._dispatchClickedEvent = () => {
+            this.dispatchEvent(new Event(COLOR_ITEM_EVENT_NAMES.selected, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupEvents();
+        this.style.backgroundColor = this.color;
+        this._syncAriaPressed();
+        this.setAttribute('aria-label', this.label ? this.label : this.color);
+        this.disabled && this.removeAttribute('tabindex');
+        this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorItem);
+    }
+    attributeChangedCallback(name, value, newValue) {
+        super.attributeChangedCallback(name, value, newValue);
+        switch (name) {
+            case COLOR_ITEM_SELECTED_ATTRIBUTE: {
+                this._syncAriaPressed();
+                break;
+            }
+        }
+    }
+    _syncAriaPressed() {
+        this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
+    }
+    setupEvents() {
+        !this.disabled && this.addEventListener('click', this._dispatchClickedEvent);
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorItem.prototype, "color", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true }),
+    __metadata("design:type", Boolean)
+], HColorItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true }),
+    __metadata("design:type", Boolean)
+], HColorItem.prototype, "selected", void 0);
+HColorItem = __decorate([
+    phoenixCustomElement('h-color-item'),
+    __metadata("design:paramtypes", [])
+], HColorItem);
+
+export { HColorItem };
+//# sourceMappingURL=color_item.js.map

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

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

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

@@ -0,0 +1,4 @@
+export declare const COLOR_ITEM_EVENT_NAMES: {
+    readonly selected: "colorItemSelected";
+};
+export declare const COLOR_ITEM_SELECTED_ATTRIBUTE = "selected";

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

@@ -0,0 +1,7 @@
+const COLOR_ITEM_EVENT_NAMES = {
+    selected: 'colorItemSelected'
+};
+const COLOR_ITEM_SELECTED_ATTRIBUTE = 'selected';
+
+export { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE };
+//# sourceMappingURL=color_item_constants.js.map

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

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

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

@@ -0,0 +1,5 @@
+export declare type TColorItemConstructorOptions = {
+    color: string;
+    label: string;
+    disabled: boolean;
+};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=color_item_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color_item_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_swatches/color_item/color_item_types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,21 @@
+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 {
+    multiple: boolean;
+    numberOfVisibleColors: number;
+    selectedColors: HColorItem[];
+    connectedCallback(): void;
+    private _addCssClasses;
+    private _hideItems;
+    private _showAllItemsEvent;
+    private _setupEvents;
+    private _handleColorClicked;
+    private _handleColorClickedForMultipleMode;
+    private _handleColorClickedForSingleMode;
+    private _toggleSelectedAttribute;
+    private _isColorAlreadyExistInArray;
+    private _removeExistingColorFromArray;
+    private _dispatchColorSelectEvent;
+    private _setColorsDispatchValue;
+    private _getOnlyColorValues;
+}

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

@@ -0,0 +1,113 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+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_ITEM_TAG_NAME, 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 { SHOW_MORE_EVENT_NAMES } from './show-more/show_more_constants.js';
+
+let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.multiple = false;
+        this.selectedColors = [];
+        this._handleColorClicked = ({ target }) => {
+            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, {
+                bubbles: true,
+                detail
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+        this._addCssClasses();
+        this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
+        this._showAllItemsEvent();
+    }
+    _addCssClasses() {
+        this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
+        this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
+    }
+    _hideItems(numberOfVisibleColors) {
+        this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem, index) => {
+            if (index > numberOfVisibleColors - 1) {
+                $colorItem.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+            }
+        });
+    }
+    _showAllItemsEvent() {
+        this.addEventListener(SHOW_MORE_EVENT_NAMES.showMore, () => {
+            var _a;
+            this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => {
+                $colorItem.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+            });
+            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+        });
+    }
+    _setupEvents() {
+        this.addEventListener(COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
+    }
+    _handleColorClickedForMultipleMode($colorItem) {
+        !this._isColorAlreadyExistInArray($colorItem)
+            ? (this.selectedColors = [...this.selectedColors, $colorItem])
+            : this._removeExistingColorFromArray($colorItem);
+        this._toggleSelectedAttribute($colorItem);
+        this._dispatchColorSelectEvent();
+    }
+    _handleColorClickedForSingleMode($colorItem) {
+        const $previouslySelected = this.selectedColors[0];
+        this._toggleSelectedAttribute($colorItem);
+        if ($previouslySelected && $previouslySelected !== $colorItem)
+            $previouslySelected.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE);
+        this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
+        this._dispatchColorSelectEvent();
+    }
+    _toggleSelectedAttribute($colorItem) {
+        $colorItem.hasAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE)
+            ? $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);
+    }
+    _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 }),
+    __metadata("design:type", Object)
+], HColorSwatches.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Number, attribute: 'number-of-visible-colors' }),
+    __metadata("design:type", Number)
+], HColorSwatches.prototype, "numberOfVisibleColors", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], HColorSwatches.prototype, "selectedColors", void 0);
+HColorSwatches = __decorate([
+    phoenixCustomElement('h-color-swatches')
+], HColorSwatches);
+
+export { HColorSwatches };
+//# sourceMappingURL=color_swatches.js.map

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

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

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

@@ -0,0 +1,11 @@
+export declare const COLOR_ITEM_TAG_NAME = "h-color-item";
+export declare const COLOR_SWATCHES_CSS_CLASSES: {
+    readonly colorItem: "color-item";
+    readonly colorSwatches: "color-swatches";
+    readonly colorSwatchesItem: "color-swatches__color-item";
+    readonly colorSwatchesItems: "color-swatches__color-items";
+};
+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

@@ -0,0 +1,15 @@
+const baseCssClass = 'color-swatches';
+const COLOR_ITEM_TAG_NAME = 'h-color-item';
+const COLOR_SWATCHES_CSS_CLASSES = {
+    colorItem: 'color-item',
+    colorSwatches: baseCssClass,
+    colorSwatchesItem: `${baseCssClass}__color-item`,
+    colorSwatchesItems: `${baseCssClass}__color-items`
+};
+const COLOR_SWATCHES_EVENT_NAMES = {
+    selected: 'colorSwatchesSelected'
+};
+const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
+
+export { COLOR_ITEM_TAG_NAME, 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

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

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

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

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=color_swatches_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color_swatches_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_swatches/color_swatches_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more.d.ts

@@ -0,0 +1,9 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HColorSwatchesShowMore extends PhoenixLightLitElement {
+    private _btnController;
+    constructor();
+    connectedCallback(): void;
+    private _addCssClasses;
+    private setupEvents;
+    private _dispatchClickedEvent;
+}

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more.js

@@ -0,0 +1,36 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+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 { SHOW_MORE_EVENT_NAMES, SHOW_MORE_CSS_CLASS } from './show_more_constants.js';
+
+let HColorSwatchesShowMore = class HColorSwatchesShowMore extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = () => {
+            this.dispatchEvent(new CustomEvent(SHOW_MORE_EVENT_NAMES.showMore, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupEvents();
+        this._addCssClasses();
+        this.classList.add(SHOW_MORE_CSS_CLASS);
+    }
+    _addCssClasses() {
+        this.classList.add(SHOW_MORE_CSS_CLASS);
+    }
+    setupEvents() {
+        this.addEventListener('click', this._dispatchClickedEvent);
+    }
+};
+HColorSwatchesShowMore = __decorate([
+    phoenixCustomElement('h-color-swatches-show-more'),
+    __metadata("design:paramtypes", [])
+], HColorSwatchesShowMore);
+
+export { HColorSwatchesShowMore };
+//# sourceMappingURL=show_more.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more.js.map

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

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const SHOW_MORE_CSS_CLASS = "color-swatches-show-more";
+export declare const SHOW_MORE_EVENT_NAMES: {
+    readonly showMore: "colorSwatchesShowMore";
+};

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more_constants.js

@@ -0,0 +1,7 @@
+const SHOW_MORE_CSS_CLASS = 'color-swatches-show-more';
+const SHOW_MORE_EVENT_NAMES = {
+    showMore: 'colorSwatchesShowMore'
+};
+
+export { SHOW_MORE_CSS_CLASS, SHOW_MORE_EVENT_NAMES };
+//# sourceMappingURL=show_more_constants.js.map

package/build/esm/packages/phoenix/src/components/color_swatches/show-more/show_more_constants.js.map

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

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

@@ -4,7 +4,7 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.js';
 import { CHECKBOX_PROPS_TO_SYNC, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';
 
 let HCheckbox = class HCheckbox extends PhoenixLightLitElement {

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

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

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

@@ -4,7 +4,7 @@ import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_el
 import { html } from 'lit-html';
 import { property } from '@lit/reactive-element/decorators.js';
 import { createRef, ref } from 'lit-html/directives/ref.js';
-import classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { CHECKBOX_CONTROL_EVENTS, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_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,gDAAoD;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;"}
+{"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;AACA;AACA;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.d.ts

@@ -0,0 +1,14 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HColorSwatchesControl extends PhoenixLightLitElement {
+    controlId: string;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    error: boolean;
+    selectedColors: string | undefined;
+    connectedCallback(): void;
+    private _setupEvents;
+    private _serializeArrayOfColors;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,71 @@
+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 { INPUT_CONTROL_TYPES } from '../input/input_constants.js';
+import classnames from '../../../../external/classnames/index.js';
+import { COLOR_SWATCHES_CONTROL_CSS_CLASSES } from './color_swatches_control_constants.js';
+import { COLOR_SWATCHES_EVENT_NAMES } from '../../color_swatches/color_swatches_constants.js';
+
+let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+        this.classList.add(COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControl);
+        const cssClasses = classnames({
+            [COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlDisabled]: this.disabled,
+            [COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlError]: this.error
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+    _setupEvents() {
+        this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
+            const eventValue = event.detail.colors;
+            this.selectedColors = Array.isArray(eventValue) ? this._serializeArrayOfColors(eventValue) : eventValue;
+        });
+    }
+    _serializeArrayOfColors(colors) {
+        return colors.reduce((colorPrev, colorCurr) => {
+            return colorPrev ? `${colorPrev}, ${colorCurr}` : colorCurr;
+        }, '');
+    }
+    render() {
+        return html `
+            <h-input controlName="${this.name}">
+                <h-input-control type="${INPUT_CONTROL_TYPES.hidden}" value="${this.selectedColors}"></h-input-control>
+            </h-input>
+        `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'control-id' }),
+    __metadata("design:type", String)
+], HColorSwatchesControl.prototype, "controlId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorSwatchesControl.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HColorSwatchesControl.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HColorSwatchesControl.prototype, "required", 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

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

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

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

@@ -0,0 +1,5 @@
+export declare const COLOR_SWATCHES_CONTROL_CSS_CLASSES: {
+    readonly colorSwatchesControl: "color-swatches-control";
+    readonly colorSwatchesControlDisabled: "color-swatches-control_disabled";
+    readonly colorSwatchesControlError: "color-swatches-control_error";
+};

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

@@ -0,0 +1,9 @@
+const baseColorSwatchesControlClass = 'color-swatches-control';
+const COLOR_SWATCHES_CONTROL_CSS_CLASSES = {
+    colorSwatchesControl: baseColorSwatchesControlClass,
+    colorSwatchesControlDisabled: `${baseColorSwatchesControlClass}_disabled`,
+    colorSwatchesControlError: `${baseColorSwatchesControlClass}_error`
+};
+
+export { COLOR_SWATCHES_CONTROL_CSS_CLASSES };
+//# sourceMappingURL=color_swatches_control_constants.js.map

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

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