@shoper/phoenix_design_system 1.3.0 → 1.3.2

package/build/cjs/packages/phoenix/src/components/accordion/accordion_group.js

@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var observer = require('../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
+var behavior_subject = require('../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../core/context/context_provider_controller.js');
+var accordion_constants = require('./accordion_constants.js');
+
+exports.HAccordionGroup = class HAccordionGroup extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this._isDisabled = false;
+        this._regionId = typeof self.crypto.randomUUID === 'function' ? self.crypto.randomUUID() : (Math.random() + 1).toString(36).substring(3);
+        this._controlsId = typeof self.crypto.randomUUID === 'function' ? self.crypto.randomUUID() : (Math.random() + 1).toString(36).substring(3);
+        this._mode = accordion_constants.ACCORDION_MODE.multi;
+        this._accordionToggle = () => {
+            this.toggle();
+        };
+        this._accordionGroupPropsSubject = new behavior_subject.BehaviorSubject(this._getProps());
+        this._accordionGroupContext = new context_provider_controller.ContextProviderController(this);
+        this._accordionGroupContext.provide(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps, this._accordionGroupPropsSubject);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._accordionContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+        this._subscribeObserver();
+        this.addEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+    }
+    async _subscribeObserver() {
+        this._accordionProps = await this._accordionContextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionProps);
+        this._accordionPropsObserver = new observer.Observer((accordionProps) => {
+            this._mode = accordionProps.mode;
+            const hasAccordionBeenDisabled = accordionProps.disabled;
+            if (hasAccordionBeenDisabled) {
+                this.disable();
+                return;
+            }
+            const hasAccordionBeenEnabled = accordionProps.disabled === false;
+            if (hasAccordionBeenEnabled) {
+                this.enable();
+                return;
+            }
+        });
+        this._accordionProps.subscribe(this._accordionPropsObserver);
+    }
+    disconnectedCallback() {
+        this._accordionProps.unsubscribe(this._accordionPropsObserver);
+        this.removeEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+    }
+    show() {
+        if (this._mode === accordion_constants.ACCORDION_MODE.single)
+            this._closeOtherAccordionGroups();
+        this.opened = true;
+    }
+    hide() {
+        this.opened = false;
+    }
+    toggle() {
+        if (this._mode === accordion_constants.ACCORDION_MODE.single)
+            this._closeOtherAccordionGroups();
+        this.opened = !this.opened;
+    }
+    enable() {
+        if (this._isDisabled) {
+            this.addEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+            this.hide();
+            this._isDisabled = false;
+        }
+    }
+    disable() {
+        if (!this._isDisabled) {
+            this.removeEventListener(accordion_constants.ACCORDION_EVENTS.toggle, this._accordionToggle);
+            this.show();
+            this._isDisabled = true;
+        }
+    }
+    _closeOtherAccordionGroups() {
+        if (!this._isDisabled) {
+            const $accordion = this.closest('h-accordion');
+            const $accordionGroups = [...$accordion.querySelectorAll('h-accordion-group')];
+            const $otherAccordionGroupsWithinAccordion = $accordionGroups.filter(($accordionGroup) => $accordionGroup !== this);
+            $otherAccordionGroupsWithinAccordion.forEach(($accordionGroup) => $accordionGroup.hide());
+        }
+    }
+    notify() {
+        this._accordionGroupPropsSubject.notify(this._getProps());
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('opened') ||
+            _changedProperties.has('_isDisabled') ||
+            _changedProperties.has('_regionId') ||
+            _changedProperties.has('_controlsId')) {
+            this.notify();
+        }
+    }
+    _getProps() {
+        return {
+            opened: this.opened,
+            disabled: this._isDisabled,
+            regionId: this._regionId,
+            controlsId: this._controlsId
+        };
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionGroup.prototype, "opened", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionGroup.prototype, "_isDisabled", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionGroup.prototype, "_regionId", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HAccordionGroup.prototype, "_controlsId", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", String)
+], exports.HAccordionGroup.prototype, "_mode", void 0);
+exports.HAccordionGroup = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-accordion-group'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HAccordionGroup);
+//# sourceMappingURL=accordion_group.js.map

package/build/cjs/packages/phoenix/src/components/accordion/accordion_group.js.map

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

package/build/cjs/packages/phoenix/src/components/accordion/accordion_toggler.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
+var observer = require('../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
+var accordion_constants = require('./accordion_constants.js');
+
+exports.HAccordionToggler = class HAccordionToggler extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._emitTogglerClicked = () => {
+            const togglerClickedEvent = new CustomEvent(accordion_constants.ACCORDION_EVENTS.toggle, {
+                bubbles: true
+            });
+            this.dispatchEvent(togglerClickedEvent);
+        };
+        this._btnController = new btn_controller.BtnController(this, this._emitTogglerClicked);
+        this._contextConsumer = new context_consumer_controller.ContextConsumerController(this);
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._accordionGroupProps = await this._contextConsumer.consumeAsync(accordion_constants.ACCORDION_CONTEXTS.accordionGroupProps);
+        this._accordionGroupPropsObserver = new observer.Observer((accordionProps) => this._setAttributes(accordionProps));
+        this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
+        this.addEventListener('click', this._emitTogglerClicked);
+    }
+    _setAttributes({ regionId, opened, controlsId, disabled }) {
+        this.setAttribute('id', regionId);
+        this.setAttribute('aria-expanded', opened ? 'true' : 'false');
+        this.setAttribute('aria-controls', controlsId);
+        this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    }
+    disconnectedCallback() {
+        this._accordionGroupProps.unsubscribe(this._accordionGroupPropsObserver);
+    }
+};
+exports.HAccordionToggler = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-accordion-toggler'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HAccordionToggler);
+//# sourceMappingURL=accordion_toggler.js.map

package/build/cjs/packages/phoenix/src/components/accordion/accordion_toggler.js.map

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

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

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+var backdrop_constants = require('./backdrop_constants.js');
+
+exports.HBackdrop = class HBackdrop extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.visible = false;
+        this._backdropLayerCounter = 0;
+        this._appendBackdrop = () => {
+            const $backdrop = document.querySelector(backdrop_constants.BACKDROP_NAME);
+            if (!$backdrop) {
+                const $newBackdrop = document.createElement(backdrop_constants.BACKDROP_NAME);
+                document.body.appendChild($newBackdrop);
+            }
+        };
+        this._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.visible = false;
+        };
+        this._dispatchBackdropClickedEvent = () => {
+            const backdropClickedEvent = new CustomEvent(backdrop_constants.BACKDROP_EVENTS.clicked, {
+                bubbles: true
+            });
+            document.dispatchEvent(backdropClickedEvent);
+        };
+        this._appendBackdrop();
+        document.addEventListener(backdrop_constants.BACKDROP_EVENTS.show, this._show);
+        document.addEventListener(backdrop_constants.BACKDROP_EVENTS.hide, this._hide);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.show, this._show);
+        document.removeEventListener(backdrop_constants.BACKDROP_EVENTS.hide, this._hide);
+    }
+    updated() {
+        if (this.visible) {
+            this._disableScrolling();
+        }
+        else {
+            this._enableScrolling();
+        }
+    }
+    _disableScrolling() {
+        document.body.style.overflow = 'hidden';
+        document.body.style.paddingRight = '15px';
+    }
+    _enableScrolling() {
+        document.body.style.removeProperty('overflow');
+        document.body.style.removeProperty('padding-right');
+    }
+    render() {
+        return lit.html ` <div
+            aria-hidden="true"
+            ?hidden="${!this.visible}"
+            @click="${this._dispatchBackdropClickedEvent}"
+            class="${backdrop_constants.BACKDROP_CSS_CLASS}"
+        ></div>`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HBackdrop.prototype, "visible", void 0);
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HBackdrop.prototype, "_backdropLayerCounter", void 0);
+exports.HBackdrop = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-backdrop'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HBackdrop);
+//# sourceMappingURL=backdrop.js.map

package/build/cjs/packages/phoenix/src/components/backdrop/backdrop.js.map

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

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const BACKDROP_NAME = 'h-backdrop';
+const BACKDROP_CSS_CLASS = 'backdrop';
+const BACKDROP_EVENT_NAME = 'backdrop';
+const BACKDROP_EVENTS = {
+    show: `${BACKDROP_EVENT_NAME}.show`,
+    hide: `${BACKDROP_EVENT_NAME}.hide`,
+    clicked: `${BACKDROP_EVENT_NAME}.clicked`
+};
+
+exports.BACKDROP_CSS_CLASS = BACKDROP_CSS_CLASS;
+exports.BACKDROP_EVENTS = BACKDROP_EVENTS;
+exports.BACKDROP_NAME = BACKDROP_NAME;
+//# sourceMappingURL=backdrop_constants.js.map

package/build/cjs/packages/phoenix/src/components/backdrop/backdrop_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;AACA;AACA;"}

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var backdrop_constants = require('../backdrop_constants.js');
+
+class BackdropController {
+    constructor() {
+        this._isVisible = false;
+    }
+    hide() {
+        this._dispatchEvent(backdrop_constants.BACKDROP_EVENTS.hide);
+        this._isVisible = false;
+    }
+    show() {
+        if (this._isVisible)
+            return;
+        this._dispatchEvent(backdrop_constants.BACKDROP_EVENTS.show);
+        this._isVisible = true;
+    }
+    _dispatchEvent(eventName) {
+        const hideBackdropEvent = new CustomEvent(eventName, {
+            bubbles: true
+        });
+        document.dispatchEvent(hideBackdropEvent);
+    }
+}
+
+exports.BackdropController = BackdropController;
+//# sourceMappingURL=backdrop_controller.js.map

package/build/cjs/packages/phoenix/src/components/backdrop/controller/backdrop_controller.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+var utilities = require('@dreamcommerce/utilities');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
+var color_item_constants = require('./color_item_constants.js');
+
+exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.selected = false;
+        this.unclickable = false;
+        this._dispatchClickedEvent = () => {
+            this.dispatchEvent(new Event(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, {
+                bubbles: true
+            }));
+        };
+        this._btnController = new btn_controller.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_constants.COLOR_ITEM_CSS_CLASSES.colorItem);
+        if (!this.value)
+            this.value = this.color;
+        if (this.size)
+            this.classList.add(color_item_constants.COLOR_ITEM_CSS_CLASSES[this.size]);
+    }
+    attributeChangedCallback(name, value, newValue) {
+        super.attributeChangedCallback(name, value, newValue);
+        switch (name) {
+            case color_item_constants.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 ? utilities.ColorUtils.hexToRgba(this.color, 0.5) : this.color;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorItem.prototype, "color", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorItem.prototype, "value", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorItem.prototype, "label", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorItem.prototype, "disabled", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorItem.prototype, "selected", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HColorItem.prototype, "size", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorItem.prototype, "unclickable", void 0);
+exports.HColorItem = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-color-item'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HColorItem);
+//# sourceMappingURL=color_item.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA,wBAAwB,+CAAmD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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';
+
+exports.COLOR_ITEM_CSS_CLASSES = COLOR_ITEM_CSS_CLASSES;
+exports.COLOR_ITEM_EVENT_NAMES = COLOR_ITEM_EVENT_NAMES;
+exports.COLOR_ITEM_SELECTED_ATTRIBUTE = COLOR_ITEM_SELECTED_ATTRIBUTE;
+exports.COLOR_ITEM_SIZES = COLOR_ITEM_SIZES;
+//# sourceMappingURL=color_item_constants.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,153 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+var decorators = require('lit/decorators');
+var utilities = require('@dreamcommerce/utilities');
+var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
+require('lit-html');
+var color_swatches_constants = require('./color_swatches_constants.js');
+var color_item_constants = require('./color_item/color_item_constants.js');
+var show_more_constants = require('./show-more/show_more_constants.js');
+
+exports.HColorSwatches = class HColorSwatches extends phoenix_light_lit_element.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_constants.COLOR_SWATCHES_EVENT_NAMES.change, {
+                bubbles: true,
+                detail: {
+                    ...colorsDetails,
+                    $colorItem
+                }
+            }));
+        };
+    }
+    selectColors($colors) {
+        const colorsArr = utilities.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_swatches_constants.COLOR_ITEM_TAG_NAME).forEach(($colorItem) => $colorItem.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatchesItem));
+        this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorSwatches);
+    }
+    _hideItems(numberOfVisibleColors) {
+        var _a;
+        this._$colorSwatchesChildren = (_a = document.querySelector(color_swatches_constants.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_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+            }
+        });
+    }
+    _showAllItemsEvent() {
+        this.addEventListener(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore, () => {
+            var _a;
+            if (!this._$colorSwatchesChildren)
+                return;
+            Array.from(this._$colorSwatchesChildren).forEach(($colorSwatchesChild) => {
+                $colorSwatchesChild.removeAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE);
+            });
+            (_a = this.querySelector('h-color-swatches-show-more')) === null || _a === void 0 ? void 0 : _a.setAttribute(color_swatches_constants.COLOR_SWATCHES_HIDDEN_ATTRIBUTE, '');
+        });
+    }
+    _setupEvents() {
+        this.addEventListener(color_item_constants.COLOR_ITEM_EVENT_NAMES.selected, this._handleColorClicked);
+    }
+    _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_constants.COLOR_ITEM_SELECTED_ATTRIBUTE);
+        this.selectedColors = $previouslySelected === $colorItem ? [] : [$colorItem];
+    }
+    _toggleSelectedAttribute($colorItem) {
+        $colorItem.hasAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
+            ? $colorItem.removeAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE)
+            : $colorItem.setAttribute(color_item_constants.COLOR_ITEM_SELECTED_ATTRIBUTE, '');
+    }
+    _isColorAlreadyExistInArray($colorItem) {
+        return this.selectedColors.includes($colorItem);
+    }
+    _removeExistingColorFromArray($colorItem) {
+        const indexOfAlreadyExistingColor = this.selectedColors.indexOf($colorItem);
+        this.selectedColors.splice(indexOfAlreadyExistingColor, 1);
+    }
+    render() {
+        return lit.html `
+            ${this.getSlot('default')}
+            ${this._$colors.length > this.numberOfVisibleColors
+            ? lit.html `<h-color-swatches-show-more>${this.showMoreBtnText}</h-color-swatches-show-more>`
+            : lit.nothing}
+        `;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HColorSwatches.prototype, "multiple", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Number, attribute: 'number-of-visible-colors' }),
+    tslib_es6.__metadata("design:type", Number)
+], exports.HColorSwatches.prototype, "numberOfVisibleColors", void 0);
+tslib_es6.__decorate([
+    decorators.property(),
+    tslib_es6.__metadata("design:type", Array)
+], exports.HColorSwatches.prototype, "selectedColors", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String, attribute: 'show-more-btn-text' }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HColorSwatches.prototype, "showMoreBtnText", void 0);
+exports.HColorSwatches = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-color-swatches')
+], exports.HColorSwatches);
+//# sourceMappingURL=color_swatches.js.map

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

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

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

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const colorSwatchesBaseCssClass = 'color-swatches';
+const COLOR_SWATCHES_TAG_NAME = 'h-color-swatches';
+const COLOR_ITEM_TAG_NAME = 'h-color-item';
+const COLOR_SWATCHES_CSS_CLASSES = {
+    colorSwatches: colorSwatchesBaseCssClass,
+    colorSwatchesItem: `${colorSwatchesBaseCssClass}__color-item`
+};
+const COLOR_SWATCHES_EVENT_NAMES = {
+    change: 'change',
+    markDisabledItems: 'markDisabledItems'
+};
+const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
+
+exports.COLOR_ITEM_TAG_NAME = COLOR_ITEM_TAG_NAME;
+exports.COLOR_SWATCHES_CSS_CLASSES = COLOR_SWATCHES_CSS_CLASSES;
+exports.COLOR_SWATCHES_EVENT_NAMES = COLOR_SWATCHES_EVENT_NAMES;
+exports.COLOR_SWATCHES_HIDDEN_ATTRIBUTE = COLOR_SWATCHES_HIDDEN_ATTRIBUTE;
+exports.COLOR_SWATCHES_TAG_NAME = COLOR_SWATCHES_TAG_NAME;
+//# sourceMappingURL=color_swatches_constants.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}