@shoper/phoenix_design_system 1.18.1 → 1.18.2

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

@@ -1,96 +1,94 @@
-import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { __decorate, __metadata } from "tslib";
+import { BACKDROP_CSS_CLASS, BACKDROP_EVENTS, BACKDROP_NAME } from './backdrop_constants';
 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 { BACKDROP_NAME, BACKDROP_EVENTS, BACKDROP_CSS_CLASS } from './backdrop_constants.js';
-import { TransitionController } from '../../controllers/transition_controller/transition_controller.js';
-
-let HBackdrop = class HBackdrop extends PhoenixLightLitElement {
-    constructor() {
-        super();
-        this.visible = false;
-        this._backdropLayerCounter = 0;
-        this._appendBackdrop = () => {
-            const $backdrop = document.querySelector(BACKDROP_NAME);
-            if (!$backdrop) {
-                const $newBackdrop = document.createElement(BACKDROP_NAME);
-                document.body.appendChild($newBackdrop);
-            }
-        };
-        this._show = () => {
-            this._transitionController.show(() => {
-                this._backdropLayerCounter += 1;
-                this.visible = true;
-            });
-        };
-        this._hide = () => {
-            this._backdropLayerCounter -= 1;
-            if (this._backdropLayerCounter > 0)
-                return;
-            if (this._backdropLayerCounter < 0)
-                this._backdropLayerCounter = 0;
-            this._transitionController.hide(() => {
-                this.visible = false;
-            });
-        };
-        this._dispatchBackdropClickedEvent = () => {
-            this.emitCustomEvent(BACKDROP_EVENTS.clicked, {
-                target: document
-            });
-        };
-        this._appendBackdrop();
-        document.addEventListener(BACKDROP_EVENTS.show, this._show);
-        document.addEventListener(BACKDROP_EVENTS.hide, this._hide);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._transitionController = new TransitionController(this, 'backdrop-opacity');
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        document.removeEventListener(BACKDROP_EVENTS.show, this._show);
-        document.removeEventListener(BACKDROP_EVENTS.hide, this._hide);
-    }
-    updated() {
-        if (this.visible) {
-            this._disableScrolling();
-        }
-        else {
-            this._enableScrolling();
-        }
-    }
-    _disableScrolling() {
-        if (matchMedia('(pointer:fine)').matches) {
-            document.body.style.overflow = 'hidden';
-            document.body.style.paddingRight = '15px';
-        }
-    }
-    _enableScrolling() {
-        document.body.style.removeProperty('overflow');
-        document.body.style.removeProperty('padding-right');
-    }
-    render() {
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { TransitionController } from '@phoenixRoot/controllers/transition_controller/transition_controller';
+let HBackdrop = class HBackdrop extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.visible = false;
+        this._backdropLayerCounter = 0;
+        this._appendBackdrop = () => {
+            const $backdrop = document.querySelector(BACKDROP_NAME);
+            if (!$backdrop) {
+                const $newBackdrop = document.createElement(BACKDROP_NAME);
+                document.body.appendChild($newBackdrop);
+            }
+        };
+        this._show = () => {
+            this._transitionController.show(() => {
+                this._backdropLayerCounter += 1;
+                this.visible = true;
+            });
+        };
+        this._hide = () => {
+            this._backdropLayerCounter -= 1;
+            if (this._backdropLayerCounter > 0)
+                return;
+            if (this._backdropLayerCounter < 0)
+                this._backdropLayerCounter = 0;
+            this._transitionController.hide(() => {
+                this.visible = false;
+            });
+        };
+        this._dispatchBackdropClickedEvent = () => {
+            this.emitCustomEvent(BACKDROP_EVENTS.clicked, {
+                target: document
+            });
+        };
+        this._appendBackdrop();
+        document.addEventListener(BACKDROP_EVENTS.show, this._show);
+        document.addEventListener(BACKDROP_EVENTS.hide, this._hide);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._transitionController = new TransitionController(this, 'backdrop-opacity');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(BACKDROP_EVENTS.show, this._show);
+        document.removeEventListener(BACKDROP_EVENTS.hide, this._hide);
+    }
+    updated() {
+        if (this.visible) {
+            this._disableScrolling();
+        }
+        else {
+            this._enableScrolling();
+        }
+    }
+    _disableScrolling() {
+        if (matchMedia('(pointer:fine)').matches) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = '15px';
+        }
+    }
+    _enableScrolling() {
+        document.body.style.removeProperty('overflow');
+        document.body.style.removeProperty('padding-right');
+    }
+    render() {
         return html ` <div
             aria-hidden="true"
             ?hidden="${!this.visible}"
             @click="${this._dispatchBackdropClickedEvent}"
             class="${BACKDROP_CSS_CLASS}"
-        ></div>`;
-    }
-};
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
-], HBackdrop.prototype, "visible", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HBackdrop.prototype, "_backdropLayerCounter", void 0);
-HBackdrop = __decorate([
-    phoenixCustomElement('h-backdrop'),
-    __metadata("design:paramtypes", [])
+        ></div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HBackdrop.prototype, "visible", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HBackdrop.prototype, "_backdropLayerCounter", void 0);
+HBackdrop = __decorate([
+    phoenixCustomElement('h-backdrop'),
+    __metadata("design:paramtypes", [])
 ], HBackdrop);
-
 export { HBackdrop };
-//# sourceMappingURL=backdrop.js.map
+//# sourceMappingURL=backdrop.js.map

package/build/esm/packages/phoenix/src/components/backdrop/backdrop.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":"backdrop.js","sourceRoot":"","sources":["../../../../../../../src/components/backdrop/backdrop.ts"],"names":[],"mappings":"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"}

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.d.ts

@@ -1,7 +1,7 @@
-export declare const BACKDROP_NAME = "h-backdrop";
-export declare const BACKDROP_CSS_CLASS = "backdrop";
-export declare const BACKDROP_EVENTS: {
-    readonly show: "show";
-    readonly hide: "hide";
-    readonly clicked: "clicked";
-};
+export declare const BACKDROP_NAME = "h-backdrop";
+export declare const BACKDROP_CSS_CLASS = "backdrop";
+export declare const BACKDROP_EVENTS: {
+    readonly show: "show";
+    readonly hide: "hide";
+    readonly clicked: "clicked";
+};

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.js

@@ -1,10 +1,8 @@
-const BACKDROP_NAME = 'h-backdrop';
-const BACKDROP_CSS_CLASS = 'backdrop';
-const BACKDROP_EVENTS = {
-    show: 'show',
-    hide: 'hide',
-    clicked: 'clicked'
+export const BACKDROP_NAME = 'h-backdrop';
+export const BACKDROP_CSS_CLASS = 'backdrop';
+export const BACKDROP_EVENTS = {
+    show: 'show',
+    hide: 'hide',
+    clicked: 'clicked'
 };
-
-export { BACKDROP_CSS_CLASS, BACKDROP_EVENTS, BACKDROP_NAME };
-//# sourceMappingURL=backdrop_constants.js.map
+//# sourceMappingURL=backdrop_constants.js.map

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":"backdrop_constants.js","sourceRoot":"","sources":["../../../../../../../src/components/backdrop/backdrop_constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG,YAAY,CAAC;AAC1C,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAAC;AAE7C,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;CACZ,CAAC"}

package/build/esm/packages/phoenix/src/components/backdrop/controller/backdrop_controller.d.ts

@@ -1,7 +1,7 @@
-import { IBackdropController } from "./backdrop_controller_types";
-export declare class BackdropController implements IBackdropController {
-    private _isVisible;
-    hide(): void;
-    show(): void;
-    private _dispatchEvent;
-}
+import { IBackdropController } from '@phoenixRoot/components/backdrop/controller/backdrop_controller_types';
+export declare class BackdropController implements IBackdropController {
+    private _isVisible;
+    hide(): void;
+    show(): void;
+    private _dispatchEvent;
+}

package/build/esm/packages/phoenix/src/components/backdrop/controller/backdrop_controller.js

@@ -1,26 +1,24 @@
-import { BACKDROP_EVENTS } from '../backdrop_constants.js';
-
-class BackdropController {
-    constructor() {
-        this._isVisible = false;
-    }
-    hide() {
-        this._dispatchEvent(BACKDROP_EVENTS.hide);
-        this._isVisible = false;
-    }
-    show() {
-        if (this._isVisible)
-            return;
-        this._dispatchEvent(BACKDROP_EVENTS.show);
-        this._isVisible = true;
-    }
-    _dispatchEvent(eventName) {
-        const hideBackdropEvent = new CustomEvent(eventName, {
-            bubbles: true
-        });
-        document.dispatchEvent(hideBackdropEvent);
-    }
+import '@phoenixRoot/components/backdrop/controller/backdrop_controller_types';
+import { BACKDROP_EVENTS } from '@phoenixRoot/components/backdrop/backdrop_constants';
+export class BackdropController {
+    constructor() {
+        this._isVisible = false;
+    }
+    hide() {
+        this._dispatchEvent(BACKDROP_EVENTS.hide);
+        this._isVisible = false;
+    }
+    show() {
+        if (this._isVisible)
+            return;
+        this._dispatchEvent(BACKDROP_EVENTS.show);
+        this._isVisible = true;
+    }
+    _dispatchEvent(eventName) {
+        const hideBackdropEvent = new CustomEvent(eventName, {
+            bubbles: true
+        });
+        document.dispatchEvent(hideBackdropEvent);
+    }
 }
-
-export { BackdropController };
-//# sourceMappingURL=backdrop_controller.js.map
+//# sourceMappingURL=backdrop_controller.js.map

package/build/esm/packages/phoenix/src/components/backdrop/controller/backdrop_controller.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;"}
+{"version":3,"file":"backdrop_controller.js","sourceRoot":"","sources":["../../../../../../../../src/components/backdrop/controller/backdrop_controller.ts"],"names":[],"mappings":"AAAA,OAAoC,uEAAuE,CAAC;AAC5G,OAAO,EAAE,eAAe,EAAE,MAAM,qDAAqD,CAAC;AAEtF,MAAM,OAAO,kBAAkB;IAA/B;QACY,eAAU,GAAY,KAAK,CAAC;IAuBxC,CAAC;IArBU,IAAI;QACP,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAE1C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC5B,CAAC;IAEM,IAAI;QACP,IAAI,IAAI,CAAC,UAAU;YAAE,OAAO;QAE5B,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAE1C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IAC3B,CAAC;IAEO,cAAc,CAAC,SAAiB;QACpC,MAAM,iBAAiB,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE;YACjD,OAAO,EAAE,IAAI;SAChB,CAAC,CAAC;QAEH,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC9C,CAAC;CACJ"}

package/build/esm/packages/phoenix/src/components/backdrop/controller/backdrop_controller_types.d.ts

@@ -1,4 +1,4 @@
-export interface IBackdropController {
-    show(): void;
-    hide(): void;
-}
+export interface IBackdropController {
+    show(): void;
+    hide(): void;
+}

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

@@ -1,16 +1,16 @@
-import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-import type { TColorItemSize } from "./color_item_types";
-export declare class HColorItem extends PhoenixLightLitElement {
-    color: string;
-    value: string;
-    label?: string;
-    disabled: boolean;
-    selected: boolean;
-    size?: TColorItemSize;
-    unclickable: boolean;
-    private _$colorSwatches;
-    connectedCallback(): void;
-    private _setupAriaAttributes;
-    private _setupClasses;
-    private setBgColor;
-}
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import type { TColorItemSize } from '@phoenixRoot/components/color_swatches/color_item/color_item_types';
+export declare class HColorItem extends PhoenixLightLitElement {
+    color: string;
+    value: string;
+    label?: string;
+    disabled: boolean;
+    selected: boolean;
+    size?: TColorItemSize;
+    unclickable: boolean;
+    private _$colorSwatches;
+    connectedCallback(): void;
+    private _setupAriaAttributes;
+    private _setupClasses;
+    private setBgColor;
+}

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

@@ -1,78 +1,77 @@
-import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
-import { property } from 'lit/decorators';
+import { __decorate, __metadata } from "tslib";
+import { COLOR_ITEM_CSS_CLASSES } from '@phoenixRoot/components/color_swatches/color_item/color_item_constants';
 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 { COLOR_ITEM_CSS_CLASSES } from './color_item_constants.js';
-
-let HColorItem = class HColorItem extends PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.selected = false;
-        this.unclickable = false;
-        this._$colorSwatches = null;
-        this._setupAriaAttributes = () => {
-            var _a;
-            this._$colorSwatches = this.closest('h-color-swatches');
-            this.setAttribute('role', ((_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.multiple) ? 'checkbox' : 'radio');
-            this.setAttribute('aria-label', this.label ? this.label : this.color);
-        };
-        this._setupClasses = () => {
-            this.classList.add(COLOR_ITEM_CSS_CLASSES.colorItem);
-            if (this.size)
-                this.classList.add(COLOR_ITEM_CSS_CLASSES[this.size]);
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._setupAriaAttributes();
-        this._setupClasses();
-        this.style.backgroundColor = this.setBgColor(this.disabled);
-        if (this.unclickable) {
-            this.removeAttribute('tabindex');
-        }
-        else {
-            this.setAttribute('tabindex', '0');
-        }
-        if (!this.value)
-            this.value = this.color;
-    }
-    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')
+import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
+import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
+import { property } from 'lit/decorators';
+import '../color_swatches';
+let HColorItem = class HColorItem extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.selected = false;
+        this.unclickable = false;
+        this._$colorSwatches = null;
+        this._setupAriaAttributes = () => {
+            var _a;
+            this._$colorSwatches = this.closest('h-color-swatches');
+            this.setAttribute('role', ((_a = this._$colorSwatches) === null || _a === void 0 ? void 0 : _a.multiple) ? 'checkbox' : 'radio');
+            this.setAttribute('aria-label', this.label ? this.label : this.color);
+        };
+        this._setupClasses = () => {
+            this.classList.add(COLOR_ITEM_CSS_CLASSES.colorItem);
+            if (this.size)
+                this.classList.add(COLOR_ITEM_CSS_CLASSES[this.size]);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupAriaAttributes();
+        this._setupClasses();
+        this.style.backgroundColor = this.setBgColor(this.disabled);
+        if (this.unclickable) {
+            this.removeAttribute('tabindex');
+        }
+        else {
+            this.setAttribute('tabindex', '0');
+        }
+        if (!this.value)
+            this.value = this.color;
+    }
+    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')
 ], 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":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;"}
+{"version":3,"file":"color_item.js","sourceRoot":"","sources":["../../../../../../../../src/components/color_swatches/color_item/color_item.ts"],"names":[],"mappings":"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"}

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,14 +1,15 @@
-const colorItemBaseCssClass = 'color-item';
-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_SELECTED_ATTRIBUTE, COLOR_ITEM_SIZES };
-//# sourceMappingURL=color_item_constants.js.map
+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

package/build/esm/packages/phoenix/src/components/color_swatches/color_item/color_item_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;"}
+{"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"}

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 "./color_item_constants";
-export declare type TColorItemSize = Any.Keys<typeof COLOR_ITEM_SIZES>;
+import { Any } from 'ts-toolbelt';
+import { COLOR_ITEM_SIZES } from '@phoenixRoot/components/color_swatches/color_item/color_item_constants';
+export declare type TColorItemSize = Any.Keys<typeof COLOR_ITEM_SIZES>;