@shoper/phoenix_design_system 1.3.0 → 1.3.2

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

@@ -1,86 +1,88 @@
-import { __decorate, __metadata } from "tslib";
-import { COLOR_ITEM_CSS_CLASSES, COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from '@phoenixRoot/components/color_swatches/color_item/color_item_constants';
-import { BtnController } from '@phoenixRoot/controllers/btn_controller/btn_controller';
-import { ColorUtils } from '@dreamcommerce/utilities';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-let HColorItem = class HColorItem extends PhoenixLightLitElement {
-    constructor() {
-        super();
-        this.disabled = false;
-        this.selected = false;
-        this.unclickable = 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.setBgColor(this.disabled);
-        this._syncAriaPressed();
-        this.setAttribute('aria-label', this.label ? this.label : this.color);
-        this.unclickable && this.removeAttribute('tabindex');
-        this.classList.add(COLOR_ITEM_CSS_CLASSES.colorItem);
-        if (!this.value)
-            this.value = this.color;
-        if (this.size)
-            this.classList.add(COLOR_ITEM_CSS_CLASSES[this.size]);
-    }
-    attributeChangedCallback(name, value, newValue) {
-        super.attributeChangedCallback(name, value, newValue);
-        switch (name) {
-            case COLOR_ITEM_SELECTED_ATTRIBUTE: {
-                this._syncAriaPressed();
-                break;
-            }
-        }
-    }
-    _syncAriaPressed() {
-        this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
-    }
-    setupEvents() {
-        !this.unclickable && this.addEventListener('click', this._dispatchClickedEvent);
-    }
-    setBgColor(itemIsDisabled) {
-        return itemIsDisabled ? ColorUtils.hexToRgba(this.color, 0.5) : this.color;
-    }
-};
-__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)
-], HColorItem.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Boolean)
-], HColorItem.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Boolean)
-], HColorItem.prototype, "selected", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], HColorItem.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HColorItem.prototype, "unclickable", void 0);
-HColorItem = __decorate([
-    phoenixCustomElement('h-color-item'),
-    __metadata("design:paramtypes", [])
+import { ColorUtils } from '@dreamcommerce/utilities';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
+import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_CSS_CLASSES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item_constants.js';
+
+let HColorItem = class HColorItem extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.selected = false;
+        this.unclickable = 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.setBgColor(this.disabled);
+        this._syncAriaPressed();
+        this.setAttribute('aria-label', this.label ? this.label : this.color);
+        this.unclickable && this.removeAttribute('tabindex');
+        this.classList.add(COLOR_ITEM_CSS_CLASSES.colorItem);
+        if (!this.value)
+            this.value = this.color;
+        if (this.size)
+            this.classList.add(COLOR_ITEM_CSS_CLASSES[this.size]);
+    }
+    attributeChangedCallback(name, value, newValue) {
+        super.attributeChangedCallback(name, value, newValue);
+        switch (name) {
+            case COLOR_ITEM_SELECTED_ATTRIBUTE: {
+                this._syncAriaPressed();
+                break;
+            }
+        }
+    }
+    _syncAriaPressed() {
+        this.selected ? this.setAttribute('aria-pressed', '') : this.removeAttribute('aria-pressed');
+    }
+    setupEvents() {
+        !this.unclickable && this.addEventListener('click', this._dispatchClickedEvent);
+    }
+    setBgColor(itemIsDisabled) {
+        return itemIsDisabled ? ColorUtils.hexToRgba(this.color, 0.5) : this.color;
+    }
+};
+__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)
+], HColorItem.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HColorItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HColorItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorItem.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HColorItem.prototype, "unclickable", void 0);
+HColorItem = __decorate([
+    phoenixCustomElement('h-color-item'),
+    __metadata("design:paramtypes", [])
 ], HColorItem);
+
 export { HColorItem };
-//# sourceMappingURL=color_item.js.map
+//# sourceMappingURL=color_item.js.map

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"color_item_constants.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_swatches/color_item/color_item_constants.ts"],"names":[],"mappings":"AAAA,MAAM,qBAAqB,GAAG,YAAY,CAAC;AAE3C,MAAM,CAAC,MAAM,sBAAsB,GAAG;IAClC,QAAQ,EAAE,mBAAmB;CACvB,CAAC;AAEX,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,CAAC,EAAE,GAAG;IACN,EAAE,EAAE,IAAI;CACF,CAAC;AAEX,MAAM,CAAC,MAAM,sBAAsB,GAAG;IAClC,SAAS,EAAE,qBAAqB;IAChC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,GAAG,qBAAqB,IAAI;IAClD,CAAC,gBAAgB,CAAC,EAAE,CAAC,EAAE,GAAG,qBAAqB,KAAK;CAC9C,CAAC;AAEX,MAAM,CAAC,MAAM,6BAA6B,GAAG,UAAU,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,3 +1,3 @@
-import { Any } from 'ts-toolbelt';
-import { COLOR_ITEM_SIZES } from '@phoenixRoot/components/color_swatches/color_item/color_item_constants';
-export type TColorItemSize = Any.Keys<typeof COLOR_ITEM_SIZES>;
+import { Any } from 'ts-toolbelt';
+import { COLOR_ITEM_SIZES } from "./color_item_constants";
+export declare type TColorItemSize = Any.Keys<typeof COLOR_ITEM_SIZES>;

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

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

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

@@ -1,151 +1,151 @@
-import { __decorate, __metadata } from "tslib";
-import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from '@phoenixRoot/components/color_swatches/color_item/color_item_constants';
-import { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE, COLOR_SWATCHES_TAG_NAME } from './color_swatches_constants';
-import './color_swatches_types';
-import { ArrayUtils } from '@dreamcommerce/utilities';
-import '@phoenixRoot/components/color_swatches/color_item/color_item';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import { SHOW_MORE_EVENT_NAMES } from './show-more/show_more_constants';
-import 'lit-html';
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { html, nothing } from 'lit';
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
 import { property } from 'lit/decorators';
-let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.multiple = false;
-        this.selectedColors = [];
-        this.showMoreBtnText = 'Pokaż wszystkie kolory';
-        this._handleColorClicked = ({ target }) => {
-            const $colorItem = target;
-            this._toggleColorItem($colorItem);
-            this._dispatchColorChangeEvent($colorItem);
-        };
-        this._dispatchColorChangeEvent = ($colorItem) => {
-            const colorsDetails = this.selectedColors.reduce(({ colors: colorsSoFar, values: valuesSoFar }, color) => {
-                return {
-                    colors: [...colorsSoFar, color.color],
-                    values: [...colorsSoFar, color.value]
-                };
-            }, {
-                colors: [],
-                values: []
-            });
-            this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_EVENT_NAMES.change, {
-                bubbles: true,
-                detail: {
-                    ...colorsDetails,
-                    $colorItem
-                }
-            }));
-        };
-    }
-    selectColors($colors) {
-        const colorsArr = ArrayUtils.makeAsArray($colors);
-        if (!colorsArr.length) {
-            this.clearAllColors();
-            return;
-        }
-        colorsArr.forEach(($color) => this._toggleColorItem($color));
-    }
-    clearAllColors() {
-        [...this.selectedColors].forEach(($color) => {
-            this._toggleColorItem($color);
-        });
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._setupEvents();
-        this._addCssClasses();
-        this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
-        this._showAllItemsEvent();
-        this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
-        this._$colors = [...this.querySelectorAll('h-color-item')];
-    }
-    _addCssClasses() {
-        this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
-        this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
-    }
-    _hideItems(numberOfVisibleColors) {
-        var _a;
-        this._$colorSwatchesChildren = (_a = document.querySelector(COLOR_SWATCHES_TAG_NAME)) === null || _a === void 0 ? void 0 : _a.children;
-        if (!this._$colorSwatchesChildren)
-            return;
-        Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild, index) => {
-            if (index > numberOfVisibleColors - 1) {
-                $colorSwatchesChild.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
-            }
-        });
-    }
-    _showAllItemsEvent() {
-        this.addEventListener(SHOW_MORE_EVENT_NAMES.showMore, () => {
-            var _a;
-            if (!this._$colorSwatchesChildren)
-                return;
-            Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild) => {
-                $colorSwatchesChild.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
-            });
-            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
-        });
-    }
-    _setupEvents() {
-        this.addEventListener(COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
-    }
-    _toggleColorItem($colorItem) {
-        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
-    }
-    _handleColorClickedForMultipleMode($colorItem) {
-        !this._isColorAlreadyExistInArray($colorItem)
-            ? (this.selectedColors = [...this.selectedColors, $colorItem])
-            : this._removeExistingColorFromArray($colorItem);
-        this._toggleSelectedAttribute($colorItem);
-    }
-    _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];
-    }
-    _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);
-    }
-    render() {
+import { ArrayUtils } from '@dreamcommerce/utilities';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import 'lit-html';
+import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_TAG_NAME, COLOR_SWATCHES_HIDDEN_ATTRIBUTE } from './color_swatches_constants.js';
+import { COLOR_ITEM_EVENT_NAMES, COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
+import { SHOW_MORE_EVENT_NAMES } from './show-more/show_more_constants.js';
+
+let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.multiple = false;
+        this.selectedColors = [];
+        this.showMoreBtnText = 'Pokaż wszystkie kolory';
+        this._handleColorClicked = ({ target }) => {
+            const $colorItem = target;
+            this._toggleColorItem($colorItem);
+            this._dispatchColorChangeEvent($colorItem);
+        };
+        this._dispatchColorChangeEvent = ($colorItem) => {
+            const colorsDetails = this.selectedColors.reduce(({ colors: colorsSoFar, values: valuesSoFar }, color) => {
+                return {
+                    colors: [...colorsSoFar, color.color],
+                    values: [...colorsSoFar, color.value]
+                };
+            }, {
+                colors: [],
+                values: []
+            });
+            this.dispatchEvent(new CustomEvent(COLOR_SWATCHES_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: {
+                    ...colorsDetails,
+                    $colorItem
+                }
+            }));
+        };
+    }
+    selectColors($colors) {
+        const colorsArr = ArrayUtils.makeAsArray($colors);
+        if (!colorsArr.length) {
+            this.clearAllColors();
+            return;
+        }
+        colorsArr.forEach(($color) => this._toggleColorItem($color));
+    }
+    clearAllColors() {
+        [...this.selectedColors].forEach(($color) => {
+            this._toggleColorItem($color);
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+        this._addCssClasses();
+        this.numberOfVisibleColors && this._hideItems(this.numberOfVisibleColors);
+        this._showAllItemsEvent();
+        this.selectedColors = [...this.querySelectorAll('h-color-item[selected]')];
+        this._$colors = [...this.querySelectorAll('h-color-item')];
+    }
+    _addCssClasses() {
+        this.querySelectorAll(COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
+        this.classList.add(COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
+    }
+    _hideItems(numberOfVisibleColors) {
+        var _a;
+        this._$colorSwatchesChildren = (_a = document.querySelector(COLOR_SWATCHES_TAG_NAME)) === null || _a === void 0 ? void 0 : _a.children;
+        if (!this._$colorSwatchesChildren)
+            return;
+        Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild, index) => {
+            if (index > numberOfVisibleColors - 1) {
+                $colorSwatchesChild.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+            }
+        });
+    }
+    _showAllItemsEvent() {
+        this.addEventListener(SHOW_MORE_EVENT_NAMES.showMore, () => {
+            var _a;
+            if (!this._$colorSwatchesChildren)
+                return;
+            Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild) => {
+                $colorSwatchesChild.removeAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+            });
+            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+        });
+    }
+    _setupEvents() {
+        this.addEventListener(COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
+    }
+    _toggleColorItem($colorItem) {
+        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorClickedForSingleMode($colorItem);
+    }
+    _handleColorClickedForMultipleMode($colorItem) {
+        !this._isColorAlreadyExistInArray($colorItem)
+            ? (this.selectedColors = [...this.selectedColors, $colorItem])
+            : this._removeExistingColorFromArray($colorItem);
+        this._toggleSelectedAttribute($colorItem);
+    }
+    _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];
+    }
+    _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);
+    }
+    render() {
         return html `
             ${this.getSlot('default')}
-            ${this._$colors.length > this.numberOfVisibleColors
-            ? html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
+            ${this._$colors.length > this.numberOfVisibleColors
+            ? html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
             : nothing}
-        `;
-    }
-};
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HColorSwatches.prototype, "multiple", void 0);
-__decorate([
-    property({ type: Number, attribute: 'number-of-visible-colors' }),
-    __metadata("design:type", Number)
-], HColorSwatches.prototype, "numberOfVisibleColors", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", Array)
-], HColorSwatches.prototype, "selectedColors", void 0);
-__decorate([
-    property({ type: String, attribute: 'show-more-btn-text' }),
-    __metadata("design:type", Object)
-], HColorSwatches.prototype, "showMoreBtnText", void 0);
-HColorSwatches = __decorate([
-    phoenixCustomElement('h-color-swatches')
+        `;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HColorSwatches.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Number, attribute: 'number-of-visible-colors' }),
+    __metadata("design:type", Number)
+], HColorSwatches.prototype, "numberOfVisibleColors", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Array)
+], HColorSwatches.prototype, "selectedColors", void 0);
+__decorate([
+    property({ type: String, attribute: 'show-more-btn-text' }),
+    __metadata("design:type", Object)
+], HColorSwatches.prototype, "showMoreBtnText", void 0);
+HColorSwatches = __decorate([
+    phoenixCustomElement('h-color-swatches')
 ], HColorSwatches);
+
 export { HColorSwatches };
-//# sourceMappingURL=color_swatches.js.map
+//# sourceMappingURL=color_swatches.js.map