@shoper/phoenix_design_system 1.18.1 → 1.18.2

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

@@ -1,38 +1,38 @@
-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;
-    devVisualSubcategories: 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 _setupCheckboxGroupEvents;
-    private _setupRadioGroupEvents;
-    private _setupColorClickEvents;
-    private _handleColorClicked;
-    private _handleTabNavigation;
-    private _handleRadioNavigation;
-    private _focusOnSelectedColor;
-    private _handleChangeToNextColorItem;
-    private _handleChangeToPreviousColorItem;
-    private _handleColorChange;
-    private _toggleColorItem;
-    private _handleColorClickedForMultipleMode;
-    private _handleColorChangeForSingleMode;
-    private _toggleSelectedAttribute;
-    private _isColorAlreadyExistInArray;
-    private _removeExistingColorFromArray;
-    private _dispatchColorChangeEvent;
-    disconnectedCallback(): void;
-    protected render(): TemplateResult | void;
-}
+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;
+    devVisualSubcategories: 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 _setupCheckboxGroupEvents;
+    private _setupRadioGroupEvents;
+    private _setupColorClickEvents;
+    private _handleColorClicked;
+    private _handleTabNavigation;
+    private _handleRadioNavigation;
+    private _focusOnSelectedColor;
+    private _handleChangeToNextColorItem;
+    private _handleChangeToPreviousColorItem;
+    private _handleColorChange;
+    private _toggleColorItem;
+    private _handleColorClickedForMultipleMode;
+    private _handleColorChangeForSingleMode;
+    private _toggleSelectedAttribute;
+    private _isColorAlreadyExistInArray;
+    private _removeExistingColorFromArray;
+    private _dispatchColorChangeEvent;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult | void;
+}

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

@@ -1,273 +1,274 @@
-import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { __decorate, __metadata } from "tslib";
+import { 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 } from './color_swatches_constants';
+import './color_swatches_types';
+import { ArrayUtils, UiDomUtils } from '@dreamcommerce/utilities';
+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 'lit-html';
 import { html, nothing } from 'lit';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
 import { property } from 'lit/decorators';
-import { UiDomUtils, 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 { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
-import 'lit-html';
-import { COLOR_SWATCHES_EVENT_NAMES, COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES } from './color_swatches_constants.js';
-import { COLOR_ITEM_SELECTED_ATTRIBUTE } from './color_item/color_item_constants.js';
-import { HColorItem } from './color_item/color_item.js';
-
-let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.multiple = false;
-        this.devVisualSubcategories = false;
-        this.selectedColors = [];
-        this.showMoreBtnText = 'Pokaż wszystkie kolory';
-        this._setupEvents = () => {
-            if (this.getAttribute('role') === 'group') {
-                this._setupCheckboxGroupEvents();
-            }
-            else {
-                this._setupRadioGroupEvents();
-            }
-        };
-        this._setupCheckboxGroupEvents = () => {
-            this._setupColorClickEvents();
-        };
-        this._setupRadioGroupEvents = () => {
-            document.body.addEventListener('keydown', this._focusOnSelectedColor);
-            this.addEventListener('keydown', this._handleTabNavigation);
-            this.addEventListener('keyup', this._handleRadioNavigation);
-            this._setupColorClickEvents();
-        };
-        this._setupColorClickEvents = () => {
-            if (!this._$colorSwatchesChildren)
-                return;
-            this._$colorSwatchesChildren.forEach(($colorItem) => {
-                $colorItem.addEventListener('click', this._handleColorClicked);
-                new KeystrokesController({
-                    host: this,
-                    keys: [' '],
-                    callback: this._handleColorClicked,
-                    target: $colorItem
-                });
-            });
-        };
-        this._handleColorClicked = (ev) => {
-            ev.preventDefault();
-            const $colorItem = ev.target;
-            if ($colorItem.unclickable || !($colorItem instanceof HColorItem))
-                return;
-            this._toggleColorItem($colorItem);
-            this._dispatchColorChangeEvent($colorItem);
-        };
-        this._handleTabNavigation = (ev) => {
-            if (ev.key !== 'Tab')
-                return;
-            ev.preventDefault();
-            if (ev.shiftKey) {
-                const $firstFocusableColor = UiDomUtils.getFocusableElement(this);
-                UiDomUtils.getPreviousFocusableElement($firstFocusableColor).focus();
-                return;
-            }
-            const $LastFocusableColor = UiDomUtils.getLastFocusableElement(this);
-            UiDomUtils.getNextFocusableElement($LastFocusableColor).focus();
-        };
-        this._handleRadioNavigation = (ev) => {
-            const changeToNextKeys = ['ArrowDown', 'ArrowRight'];
-            const changeToPreviousKeys = ['ArrowUp', 'ArrowLeft'];
-            if (!changeToNextKeys.includes(ev.key) && !changeToPreviousKeys.includes(ev.key))
-                return;
-            ev.preventDefault();
-            if (changeToNextKeys.includes(ev.key)) {
-                this._handleChangeToNextColorItem(ev);
-            }
-            if (changeToPreviousKeys.includes(ev.key)) {
-                this._handleChangeToPreviousColorItem(ev);
-            }
-        };
-        this._focusOnSelectedColor = (ev) => {
-            if (ev.key !== 'Tab' || this.multiple)
-                return;
-            if (ev.shiftKey) {
-                const $previousFocusableElement = UiDomUtils.getPreviousFocusableElement(document.activeElement);
-                if (this.contains($previousFocusableElement) && this.selectedColors.length > 0) {
-                    ev.preventDefault();
-                    this.selectedColors[0].focus();
-                }
-                return;
-            }
-            const $nextFocusableElement = UiDomUtils.getNextFocusableElement(document.activeElement);
-            if (this.contains($nextFocusableElement) && this.selectedColors.length > 0) {
-                ev.preventDefault();
-                this.selectedColors[0].focus();
-            }
-        };
-        this._handleColorChange = ($colorItem) => {
-            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.emitCustomEvent(COLOR_SWATCHES_EVENT_NAMES.change, {
-                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.setAttribute('role', this.multiple ? 'group' : 'radiogroup');
-        this._$colorSwatchesChildren = [...this.children];
-        this._setupEvents();
-        this._addCssClasses();
-        if (!this.devVisualSubcategories) {
-            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) {
-        if (!this._$colorSwatchesChildren)
-            return;
-        this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
-            if (index > numberOfVisibleColors - 1) {
-                $colorSwatchesChild.setAttribute('hidden', '');
-            }
-        });
-    }
-    _showAllItemsEvent() {
-        this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.showMore, () => {
-            var _a;
-            if (!this._$colorSwatchesChildren)
-                return;
-            this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
-                $colorSwatchesChild.removeAttribute('hidden');
-            });
-            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
-        });
-    }
-    _handleChangeToNextColorItem({ target }) {
-        const $colorItem = target;
-        const $nextFocusableElement = UiDomUtils.getNextFocusableElement($colorItem);
-        let $nextColorItem;
-        if (!this.contains($nextFocusableElement)) {
-            $nextColorItem = UiDomUtils.getFocusableElement(this);
-        }
-        else {
-            $nextColorItem = $nextFocusableElement;
-        }
-        $nextColorItem.focus();
-        if ($nextColorItem instanceof HColorItem) {
-            this._handleColorChange($nextColorItem);
-        }
-    }
-    _handleChangeToPreviousColorItem({ target }) {
-        const $colorItem = target;
-        const $previousFocusableElement = UiDomUtils.getPreviousFocusableElement($colorItem);
-        let $previousColorItem;
-        if (!this.contains($previousFocusableElement)) {
-            $previousColorItem = UiDomUtils.getLastFocusableElement(this);
-        }
-        else {
-            $previousColorItem = $previousFocusableElement;
-        }
-        $previousColorItem.focus();
-        if ($previousColorItem instanceof HColorItem) {
-            this._handleColorChange($previousColorItem);
-        }
-    }
-    _toggleColorItem($colorItem) {
-        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorChangeForSingleMode($colorItem);
-    }
-    _handleColorClickedForMultipleMode($colorItem) {
-        !this._isColorAlreadyExistInArray($colorItem)
-            ? (this.selectedColors = [...this.selectedColors, $colorItem])
-            : this._removeExistingColorFromArray($colorItem);
-        this._toggleSelectedAttribute($colorItem);
-    }
-    _handleColorChangeForSingleMode($colorItem) {
-        const $previouslySelected = this.selectedColors[0];
-        this._toggleSelectedAttribute($colorItem);
-        if ($previouslySelected && $previouslySelected !== $colorItem) {
-            $previouslySelected.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE);
-            $previouslySelected.setAttribute('aria-checked', 'false');
-        }
-        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, '');
-        $colorItem.setAttribute('aria-checked', 'true');
-    }
-    _isColorAlreadyExistInArray($colorItem) {
-        return this.selectedColors.includes($colorItem);
-    }
-    _removeExistingColorFromArray($colorItem) {
-        const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
-        this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.body.removeEventListener('keydown', this._focusOnSelectedColor);
-    }
-    render() {
-        if (!this.devVisualSubcategories) {
+import '@phoenixRoot/controllers/btn_controller/btn_controller';
+import { KeystrokesController } from '@phoenixRoot/controllers/keystrokes_controller/keystrokes_controller';
+import '../show-more/show_more_button';
+let HColorSwatches = class HColorSwatches extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.multiple = false;
+        this.devVisualSubcategories = false;
+        this.selectedColors = [];
+        this.showMoreBtnText = 'Pokaż wszystkie kolory';
+        this._setupEvents = () => {
+            if (this.getAttribute('role') === 'group') {
+                this._setupCheckboxGroupEvents();
+            }
+            else {
+                this._setupRadioGroupEvents();
+            }
+        };
+        this._setupCheckboxGroupEvents = () => {
+            this._setupColorClickEvents();
+        };
+        this._setupRadioGroupEvents = () => {
+            document.body.addEventListener('keydown', this._focusOnSelectedColor);
+            this.addEventListener('keydown', this._handleTabNavigation);
+            this.addEventListener('keyup', this._handleRadioNavigation);
+            this._setupColorClickEvents();
+        };
+        this._setupColorClickEvents = () => {
+            if (!this._$colorSwatchesChildren)
+                return;
+            this._$colorSwatchesChildren.forEach(($colorItem) => {
+                $colorItem.addEventListener('click', this._handleColorClicked);
+                new KeystrokesController({
+                    host: this,
+                    keys: [' '],
+                    callback: this._handleColorClicked,
+                    target: $colorItem
+                });
+            });
+        };
+        this._handleColorClicked = (ev) => {
+            ev.preventDefault();
+            const $colorItem = ev.target;
+            if ($colorItem.unclickable || !($colorItem instanceof HColorItem))
+                return;
+            this._toggleColorItem($colorItem);
+            this._dispatchColorChangeEvent($colorItem);
+        };
+        this._handleTabNavigation = (ev) => {
+            if (ev.key !== 'Tab')
+                return;
+            ev.preventDefault();
+            if (ev.shiftKey) {
+                const $firstFocusableColor = UiDomUtils.getFocusableElement(this);
+                UiDomUtils.getPreviousFocusableElement($firstFocusableColor).focus();
+                return;
+            }
+            const $LastFocusableColor = UiDomUtils.getLastFocusableElement(this);
+            UiDomUtils.getNextFocusableElement($LastFocusableColor).focus();
+        };
+        this._handleRadioNavigation = (ev) => {
+            const changeToNextKeys = ['ArrowDown', 'ArrowRight'];
+            const changeToPreviousKeys = ['ArrowUp', 'ArrowLeft'];
+            if (!changeToNextKeys.includes(ev.key) && !changeToPreviousKeys.includes(ev.key))
+                return;
+            ev.preventDefault();
+            if (changeToNextKeys.includes(ev.key)) {
+                this._handleChangeToNextColorItem(ev);
+            }
+            if (changeToPreviousKeys.includes(ev.key)) {
+                this._handleChangeToPreviousColorItem(ev);
+            }
+        };
+        this._focusOnSelectedColor = (ev) => {
+            if (ev.key !== 'Tab' || this.multiple)
+                return;
+            if (ev.shiftKey) {
+                const $previousFocusableElement = UiDomUtils.getPreviousFocusableElement(document.activeElement);
+                if (this.contains($previousFocusableElement) && this.selectedColors.length > 0) {
+                    ev.preventDefault();
+                    this.selectedColors[0].focus();
+                }
+                return;
+            }
+            const $nextFocusableElement = UiDomUtils.getNextFocusableElement(document.activeElement);
+            if (this.contains($nextFocusableElement) && this.selectedColors.length > 0) {
+                ev.preventDefault();
+                this.selectedColors[0].focus();
+            }
+        };
+        this._handleColorChange = ($colorItem) => {
+            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.emitCustomEvent(COLOR_SWATCHES_EVENT_NAMES.change, {
+                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.setAttribute('role', this.multiple ? 'group' : 'radiogroup');
+        this._$colorSwatchesChildren = [...this.children];
+        this._setupEvents();
+        this._addCssClasses();
+        if (!this.devVisualSubcategories) {
+            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) {
+        if (!this._$colorSwatchesChildren)
+            return;
+        this._$colorSwatchesChildren.forEach(($colorSwatchesChild, index) => {
+            if (index > numberOfVisibleColors - 1) {
+                $colorSwatchesChild.setAttribute('hidden', '');
+            }
+        });
+    }
+    _showAllItemsEvent() {
+        this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.showMore, () => {
+            var _a;
+            if (!this._$colorSwatchesChildren)
+                return;
+            this._$colorSwatchesChildren.forEach(($colorSwatchesChild) => {
+                $colorSwatchesChild.removeAttribute('hidden');
+            });
+            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
+        });
+    }
+    _handleChangeToNextColorItem({ target }) {
+        const $colorItem = target;
+        const $nextFocusableElement = UiDomUtils.getNextFocusableElement($colorItem);
+        let $nextColorItem;
+        if (!this.contains($nextFocusableElement)) {
+            $nextColorItem = UiDomUtils.getFocusableElement(this);
+        }
+        else {
+            $nextColorItem = $nextFocusableElement;
+        }
+        $nextColorItem.focus();
+        if ($nextColorItem instanceof HColorItem) {
+            this._handleColorChange($nextColorItem);
+        }
+    }
+    _handleChangeToPreviousColorItem({ target }) {
+        const $colorItem = target;
+        const $previousFocusableElement = UiDomUtils.getPreviousFocusableElement($colorItem);
+        let $previousColorItem;
+        if (!this.contains($previousFocusableElement)) {
+            $previousColorItem = UiDomUtils.getLastFocusableElement(this);
+        }
+        else {
+            $previousColorItem = $previousFocusableElement;
+        }
+        $previousColorItem.focus();
+        if ($previousColorItem instanceof HColorItem) {
+            this._handleColorChange($previousColorItem);
+        }
+    }
+    _toggleColorItem($colorItem) {
+        this.multiple ? this._handleColorClickedForMultipleMode($colorItem) : this._handleColorChangeForSingleMode($colorItem);
+    }
+    _handleColorClickedForMultipleMode($colorItem) {
+        !this._isColorAlreadyExistInArray($colorItem)
+            ? (this.selectedColors = [...this.selectedColors, $colorItem])
+            : this._removeExistingColorFromArray($colorItem);
+        this._toggleSelectedAttribute($colorItem);
+    }
+    _handleColorChangeForSingleMode($colorItem) {
+        const $previouslySelected = this.selectedColors[0];
+        this._toggleSelectedAttribute($colorItem);
+        if ($previouslySelected && $previouslySelected !== $colorItem) {
+            $previouslySelected.removeAttribute(COLOR_ITEM_SELECTED_ATTRIBUTE);
+            $previouslySelected.setAttribute('aria-checked', 'false');
+        }
+        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, '');
+        $colorItem.setAttribute('aria-checked', 'true');
+    }
+    _isColorAlreadyExistInArray($colorItem) {
+        return this.selectedColors.includes($colorItem);
+    }
+    _removeExistingColorFromArray($colorItem) {
+        const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
+        this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.body.removeEventListener('keydown', this._focusOnSelectedColor);
+    }
+    render() {
+        if (!this.devVisualSubcategories) {
             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: Boolean, attribute: 'dev-visual-subcategories' }),
-    __metadata("design:type", Boolean)
-], HColorSwatches.prototype, "devVisualSubcategories", 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: Boolean, attribute: 'dev-visual-subcategories' }),
+    __metadata("design:type", Boolean)
+], HColorSwatches.prototype, "devVisualSubcategories", 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