@shoper/phoenix_design_system 1.17.3-5 → 1.17.3-6

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

@@ -9,3 +9,4 @@ export declare const COLOR_SWATCHES_EVENT_NAMES: {
     readonly markDisabledItems: "markDisabledItems";
     readonly showMore: "showMore";
 };
+export declare const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = "hidden";

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

@@ -8,7 +8,8 @@ const COLOR_SWATCHES_EVENT_NAMES = {
     change: 'change',
     markDisabledItems: 'markDisabledItems',
     showMore: 'showMore'
-};
+};
+const COLOR_SWATCHES_HIDDEN_ATTRIBUTE = 'hidden';
 
-export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES };
+export { COLOR_ITEM_TAG_NAME, COLOR_SWATCHES_CSS_CLASSES, COLOR_SWATCHES_EVENT_NAMES, COLOR_SWATCHES_HIDDEN_ATTRIBUTE };
 //# sourceMappingURL=color_swatches_constants.js.map

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

@@ -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":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

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

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

@@ -0,0 +1,35 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { BtnController } from '../../../controllers/btn_controller/btn_controller.js';
+import { COLOR_SWATCHES_EVENT_NAMES } from '../color_swatches_constants.js';
+import { SHOW_MORE_CSS_CLASS } from './show_more_constants.js';
+
+let HColorSwatchesShowMore = class HColorSwatchesShowMore extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._dispatchClickedEvent = () => {
+            this.emitCustomEvent(COLOR_SWATCHES_EVENT_NAMES.showMore);
+        };
+        this._btnController = new BtnController(this, this._dispatchClickedEvent);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupEvents();
+        this._addCssClasses();
+        this.classList.add(SHOW_MORE_CSS_CLASS);
+    }
+    _addCssClasses() {
+        this.classList.add(SHOW_MORE_CSS_CLASS);
+    }
+    setupEvents() {
+        this.addEventListener('click', this._dispatchClickedEvent);
+    }
+};
+HColorSwatchesShowMore = __decorate([
+    phoenixCustomElement('h-color-swatches-show-more'),
+    __metadata("design:paramtypes", [])
+], HColorSwatchesShowMore);
+
+export { HColorSwatchesShowMore };
+//# sourceMappingURL=show_more.js.map

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

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

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

@@ -0,0 +1 @@
+export declare const SHOW_MORE_CSS_CLASS = "color-swatches-show-more";

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

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

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

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

package/build/esm/packages/phoenix/src/components/messages/base_message.d.ts

@@ -1,6 +1,7 @@
 import { IBaseMessage } from './base_message_types';
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import type { TDirection } from '@dreamcommerce/utilities';
+import { PropertyValues, TemplateResult } from 'lit';
 export declare class BaseMessage extends PhoenixLightLitElement implements IBaseMessage {
     opened: boolean;
     portalTarget: string;
@@ -8,6 +9,7 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
     offset: number;
     mouseonly: boolean;
     tabindex: string;
+    private _messageId;
     private _positionController;
     private _clickOutsideController;
     private _$messageContent;
@@ -16,11 +18,18 @@ export declare class BaseMessage extends PhoenixLightLitElement implements IBase
     private _shouldDelayClosing;
     private _closeTimeout;
     private _messageComponentName;
+    private _$baseMessageContent?;
+    private _tooltipRef;
     constructor();
     connectedCallback(messageComponentName?: string): void;
+    firstUpdated(props: PropertyValues): void;
+    private _handleChildrenAriaAttributes;
     private static _appendMessagePortal;
     private _setupEventListeners;
     protected _positionMessage: () => void;
     open: () => void;
+    private _closeFromKeyboard;
     close: () => void;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/messages/base_message.js

@@ -1,11 +1,14 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
 import { property } from 'lit/decorators';
-import { DIRECTIONS } from '@dreamcommerce/utilities';
+import { DIRECTIONS, DomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
 import { ClickOutsideController } from '../../controllers/click_outside_controller/click_outside_controller.js';
 import { RelativePositionController } from '../../controllers/relative_position_controller/relative_position_controller.js';
-import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS } from './base_message_constants.js';
+import { DEFAULT_MESSAGE_PORTAL_NAME, DEFAULT_MESSAGE_OFFSET, LIST_OF_MESSAGE_CHILDREN, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, SCREEN_READER_ONLY_CLASS_NAME, MESSAGE_CONTENT_SLOT_NAME } from './base_message_constants.js';
+import { createRef, ref } from 'lit/directives/ref';
 
 class BaseMessage extends PhoenixLightLitElement {
     constructor() {
@@ -16,9 +19,22 @@ class BaseMessage extends PhoenixLightLitElement {
         this.offset = DEFAULT_MESSAGE_OFFSET;
         this.mouseonly = false;
         this.tabindex = '-1';
+        this._messageId = v4();
+        this._tooltipRef = createRef();
+        this._handleChildrenAriaAttributes = () => {
+            [...this.children].forEach((child) => {
+                if (LIST_OF_MESSAGE_CHILDREN.includes(child.tagName.toLowerCase()) || this._tooltipRef.value === child)
+                    return;
+                child.setAttribute('aria-describedby', `${child.getAttribute('aria-describedby') || ''} ${this._messageId}`);
+            });
+        };
         this._setupEventListeners = () => {
+            var _a, _b;
             this.addEventListener('mouseenter', this.open);
             this.addEventListener('mouseleave', this.close);
+            this.addEventListener('keydown', this._closeFromKeyboard);
+            (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.open);
+            (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.close);
             if (!this.mouseonly) {
                 this.addEventListener('focusin', this.open);
                 this.addEventListener('focusout', this.close);
@@ -39,6 +55,13 @@ class BaseMessage extends PhoenixLightLitElement {
                 this.opened = true;
             }, MESSAGE_SHOW_DELAY_IN_MS);
         };
+        this._closeFromKeyboard = (ev) => {
+            if (ev.key !== 'Escape' || !this.opened)
+                return;
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.close();
+        };
         this.close = () => {
             this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
             clearTimeout(this._openTimeout);
@@ -79,8 +102,14 @@ class BaseMessage extends PhoenixLightLitElement {
                 offset: this.offset
             });
         this.setAttribute('tabindex', this.tabindex);
+        if (!this._$baseMessageContent)
+            this._$baseMessageContent = [...this.children].find((child) => MESSAGE_CONTENT_ELEMENTS.includes(child.tagName.toLowerCase()));
         this._setupEventListeners();
     }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._handleChildrenAriaAttributes();
+    }
     static _appendMessagePortal() {
         const $messagePortalTarget = document.querySelector(`[name="${DEFAULT_MESSAGE_PORTAL_NAME}"]`);
         if ($messagePortalTarget)
@@ -89,6 +118,24 @@ class BaseMessage extends PhoenixLightLitElement {
         $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
         document.body.appendChild($portalTarget);
     }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.open);
+        (_b = this._$baseMessageContent) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.close);
+    }
+    render() {
+        var _a;
+        super.render();
+        return html `
+            <span ${ref(this._tooltipRef)} id="${this._messageId}" class="${SCREEN_READER_ONLY_CLASS_NAME}" role="tooltip">
+                ${DomUtils.stripHTMLTags(((_a = this._$baseMessageContent) === null || _a === void 0 ? void 0 : _a.innerHTML) || '')}
+            </span>
+            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
+                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
+            </h-portal>
+        `;
+    }
 }
 __decorate([
     property({ type: Boolean, reflect: true }),

package/build/esm/packages/phoenix/src/components/messages/base_message.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,eAAe,qDAAyD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.d.ts

@@ -4,6 +4,8 @@ export declare const MESSAGE_REMOVED_CLASS_NAME = "removed";
 export declare const DEFAULT_MESSAGE_OFFSET = 10;
 export declare const MESSAGE_ELEMENTS: string[];
 export declare const MESSAGE_CONTENT_ELEMENTS: string[];
+export declare const LIST_OF_MESSAGE_CHILDREN: string[];
 export declare const MESSAGE_SHOW_DELAY_IN_MS = 100;
 export declare const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
 export declare const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+export declare const SCREEN_READER_ONLY_CLASS_NAME = "sr-only";

package/build/esm/packages/phoenix/src/components/messages/base_message_constants.js

@@ -1,3 +1,4 @@
+import { PORTAL_COMPONENT_NAME } from '../portal/portal_constants.js';
 import { HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
 import { TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
 
@@ -6,9 +7,11 @@ const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
 const MESSAGE_REMOVED_CLASS_NAME = `removed`;
 const DEFAULT_MESSAGE_OFFSET = 10;
 const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
+const LIST_OF_MESSAGE_CHILDREN = [...MESSAGE_CONTENT_ELEMENTS, PORTAL_COMPONENT_NAME];
 const MESSAGE_SHOW_DELAY_IN_MS = 100;
 const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
-const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+const SCREEN_READER_ONLY_CLASS_NAME = 'sr-only';
 
-export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
+export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, LIST_OF_MESSAGE_CHILDREN, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS, SCREEN_READER_ONLY_CLASS_NAME };
 //# sourceMappingURL=base_message_constants.js.map

package/build/esm/packages/phoenix/src/components/messages/base_message_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":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/messages/hints/hint.d.ts

@@ -1,7 +1,5 @@
-import { TemplateResult } from 'lit-html';
 import { BaseMessage } from '../base_message';
 export declare class HHint extends BaseMessage {
     constructor();
     connectedCallback(): void;
-    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/messages/hints/hint.js

@@ -1,8 +1,6 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { html } from 'lit-html';
 import { HINT_DEFAULT_OFFSET, HINT_CLASS_NAME, HINT_ELEMENT_NAME } from './hint_constants.js';
-import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
 import { BaseMessage } from '../base_message.js';
 
 let HHint = class HHint extends BaseMessage {
@@ -14,14 +12,6 @@ let HHint = class HHint extends BaseMessage {
         super.connectedCallback(HINT_CLASS_NAME);
         this.classList.add(HINT_CLASS_NAME);
     }
-    render() {
-        super.render();
-        return html `
-            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
-                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
-            </h-portal>
-        `;
-    }
 };
 HHint = __decorate([
     phoenixCustomElement(HINT_ELEMENT_NAME),

package/build/esm/packages/phoenix/src/components/messages/hints/hint.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;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.d.ts

@@ -1,6 +1,4 @@
-import { TemplateResult } from 'lit-html';
 import { BaseMessage } from '../base_message';
 export declare class HTooltip extends BaseMessage {
     connectedCallback(): void;
-    protected render(): TemplateResult;
 }

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js

@@ -1,8 +1,6 @@
 import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
-import { html } from 'lit-html';
 import { TOOLTIP_CLASS_NAME, TOOLTIP_ELEMENT_NAME } from './tooltip_constants.js';
-import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
 import { BaseMessage } from '../base_message.js';
 
 let HTooltip = class HTooltip extends BaseMessage {
@@ -10,14 +8,6 @@ let HTooltip = class HTooltip extends BaseMessage {
         super.connectedCallback(TOOLTIP_CLASS_NAME);
         this.classList.add(TOOLTIP_CLASS_NAME);
     }
-    render() {
-        super.render();
-        return html `
-            <h-portal ?disabled="${!this.opened}" @open="${this._positionMessage}" to="${this.portalTarget}" hidden>
-                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
-            </h-portal>
-        `;
-    }
 };
 HTooltip = __decorate([
     phoenixCustomElement(TOOLTIP_ELEMENT_NAME)

package/build/esm/packages/phoenix/src/components/messages/tooltips/tooltip.js.map

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

package/build/esm/packages/phoenix/src/components/portal/portal_constants.js

@@ -3,8 +3,9 @@ const PORTAL_EVENTS = {
     close: 'close'
 };
 const PORTAL_TARGET_NAME_PROP = 'name';
+const PORTAL_COMPONENT_NAME = 'h-portal';
 const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
 const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
 
-export { PORTAL_EVENTS, PORTAL_TARGET_ATTRIBUTE_NAME, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
+export { PORTAL_COMPONENT_NAME, PORTAL_EVENTS, PORTAL_TARGET_ATTRIBUTE_NAME, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
 //# sourceMappingURL=portal_constants.js.map

package/build/esm/packages/phoenix/src/components/portal/portal_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":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/index.d.ts

@@ -91,6 +91,7 @@ export { BACKDROP_EVENTS } from "./components/backdrop/backdrop_constants";
 export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control';
 export { HColorSwatches } from './components/color_swatches/color_swatches';
 export { HColorItem } from './components/color_swatches/color_item/color_item';
+export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more';
 export { TColorSwatchesControlChangeEventDetail } from "./components/color_swatches/color_swatches_types";
 export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from "./components/form/color_swatches_control/color_swatches_control_constants";
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller';
@@ -139,6 +140,4 @@ export * from './components/toggle/toggle_types';
 export * from './components/toggle/toggle_constants';
 export { NavigatorShare } from './components/navigator/navigator_share/navigator_share';
 export { NavigatorController } from './components/navigator/navigator_controller/navigator_controller';
-export { HShowMore } from './components/show-more/show_more';
-export { HShowMoreButton } from './components/show-more/show_more_button';
 export { phoenixCustomElement } from './core/decorators/phoenix_custom_element';

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

@@ -79,10 +79,10 @@ export { HToggleButton } from './components/groups/toggle_button_group/toggle_bu
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
 export { HBackdrop } from './components/backdrop/backdrop.js';
 export { COLOR_SWATCHES_CONTROL_EVENT_NAMES } from './components/form/color_swatches_control/color_swatches_control_constants.js';
-export { HShowMoreButton } from './components/show-more/show_more_button.js';
 export { HColorSwatches } from './components/color_swatches/color_swatches.js';
 export { HColorItem } from './components/color_swatches/color_item/color_item.js';
 export { HColorSwatchesControl } from './components/form/color_swatches_control/color_swatches_control.js';
+export { HColorSwatchesShowMore } from './components/color_swatches/show-more/show_more.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';
 export { HSlider } from './components/slider/slider.js';
 export { HScroller } from './components/scroller/scroller.js';
@@ -122,5 +122,4 @@ export { HToggle } from './components/toggle/toggle.js';
 export { HToggleBtn } from './components/toggle/toggle_button.js';
 export { NavigatorShare } from './components/navigator/navigator_share/navigator_share.js';
 export { NavigatorController } from './components/navigator/navigator_controller/navigator_controller.js';
-export { HShowMore } from './components/show-more/show_more.js';
 //# sourceMappingURL=index.js.map

package/build/esm/packages/phoenix/src/index.js.map

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "1.17.3-5",
+  "version": "1.17.3-6",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",
@@ -27,15 +27,15 @@
   },
   "peerDependencies": {
     "@dreamcommerce/utilities": "^1.0.0",
-    "@splidejs/splide": "4.0.7",
-    "@splidejs/splide-extension-auto-scroll": "0.5.3"
+    "@splidejs/splide": "^4.0.7",
+    "@splidejs/splide-extension-auto-scroll": "^0.5.3"
   },
   "devDependencies": {
-    "@dreamcommerce/utilities": "^1.20.1-0",
+    "@dreamcommerce/utilities": "^1.20.1-3",
     "@shoper/jest_config": "^0.0.0",
     "@shoper/tsconfig": "^0.0.0",
     "@splidejs/splide": "4.0.7",
-    "@splidejs/splide-extension-auto-scroll": "0.5.3",
+    "@splidejs/splide-extension-auto-scroll": "^0.5.3",
     "@storybook/web-components": "6.5.7",
     "lit": "2.4.0"
   },

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

@@ -1,121 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
-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');
-var global_constants = require('../../global_constants.js');
-var relative_position_controller_constants = require('../../controllers/relative_position_controller/relative_position_controller_constants.js');
-var throttle = require('../../../../../external/lodash/throttle.js');
-var show_more_constants = require('./show_more_constants.js');
-
-exports.HShowMore = class HShowMore extends phoenix_light_lit_element.PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this._$showMoreButton = null;
-        this._showMore = () => {
-            this._showAllItems();
-            this._hideButton();
-            this._focusNextItem();
-        };
-        this._onResize = throttle['default'](() => {
-            if (window.innerWidth > global_constants.BREAKPOINTS.xs) {
-                this._showAllItems();
-                this._hideButton();
-                window.removeEventListener('resize', this._onResize);
-            }
-        }, relative_position_controller_constants.DEFAULT_THROTTLE_WAIT_TIME);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._$showMoreButton = this.querySelector('h-show-more-button');
-        this._$items = [...this.querySelectorAll(this.selector)];
-        this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASSES.showMore);
-        this._updateComponentVisibility();
-        this._setupListeners();
-    }
-    updated(_changedProperties) {
-        super.updated(_changedProperties);
-        if (_changedProperties.has('showAll')) {
-            this._showAllItems();
-            this._hideButton();
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener('resize', this._onResize);
-    }
-    _updateComponentVisibility() {
-        const hasOverflowItems = this._$items.length > this.count;
-        const isMobileView = window.innerWidth <= global_constants.BREAKPOINTS.xs;
-        const shouldBeActive = (!this.mobileOnly || isMobileView) && hasOverflowItems;
-        if (shouldBeActive) {
-            this._hideExcessItems();
-            this._showButton();
-        }
-        else {
-            this._hideButton();
-        }
-    }
-    _hideExcessItems() {
-        this._$items.forEach(($item, index) => {
-            $item.removeAttribute('hidden');
-            if (index >= this.count)
-                $item.setAttribute('hidden', '');
-        });
-    }
-    _showAllItems() {
-        this._$items.forEach(($item) => $item.removeAttribute('hidden'));
-    }
-    _hideButton() {
-        var _a;
-        (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.setAttribute('hidden', '');
-    }
-    _showButton() {
-        var _a;
-        (_a = this._$showMoreButton) === null || _a === void 0 ? void 0 : _a.removeAttribute('hidden');
-    }
-    _setupListeners() {
-        this.addEventListener(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore, this._showMore);
-        if (this.mobileOnly && window.innerWidth <= global_constants.BREAKPOINTS.xs) {
-            window.addEventListener('resize', this._onResize);
-        }
-    }
-    _focusNextItem() {
-        const $nextItem = this._$items[this.count];
-        if (!$nextItem)
-            return;
-        const $firstFocusableElement = utilities.UiDomUtils.getFocusableElement($nextItem);
-        if ($firstFocusableElement) {
-            $firstFocusableElement.focus();
-            return;
-        }
-        if (!$nextItem.getAttribute('tabindex'))
-            $nextItem.setAttribute('tabindex', '-1');
-        $nextItem.focus();
-    }
-};
-tslib_es6.__decorate([
-    decorators.property({ type: Number }),
-    tslib_es6.__metadata("design:type", Number)
-], exports.HShowMore.prototype, "count", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: String }),
-    tslib_es6.__metadata("design:type", String)
-], exports.HShowMore.prototype, "selector", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Boolean, attribute: 'mobile-only' }),
-    tslib_es6.__metadata("design:type", Boolean)
-], exports.HShowMore.prototype, "mobileOnly", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Boolean, attribute: 'show-all' }),
-    tslib_es6.__metadata("design:type", Boolean)
-], exports.HShowMore.prototype, "showAll", void 0);
-exports.HShowMore = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-show-more')
-], exports.HShowMore);
-//# sourceMappingURL=show_more.js.map

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

@@ -1 +0,0 @@
-{"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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/show-more/show_more_button.js

@@ -1,29 +0,0 @@
-'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 show_more_constants = require('./show_more_constants.js');
-
-exports.HShowMoreButton = class HShowMoreButton extends phoenix_light_lit_element.PhoenixLightLitElement {
-    constructor() {
-        super();
-        this._dispatchClickedEvent = () => {
-            this.emitCustomEvent(show_more_constants.SHOW_MORE_EVENT_NAMES.showMore);
-        };
-        this._btnController = new btn_controller.BtnController(this, this._dispatchClickedEvent);
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this._dispatchClickedEvent);
-        this.classList.add(show_more_constants.SHOW_MORE_CSS_CLASSES.showMoreButton);
-    }
-};
-exports.HShowMoreButton = tslib_es6.__decorate([
-    phoenix_custom_element.phoenixCustomElement('h-show-more-button'),
-    tslib_es6.__metadata("design:paramtypes", [])
-], exports.HShowMoreButton);
-//# sourceMappingURL=show_more_button.js.map

package/build/cjs/packages/phoenix/src/components/show-more/show_more_button.js.map

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

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

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const SHOW_MORE_CSS_CLASSES = {
-    showMore: 'show-more',
-    showMoreButton: 'show-more__button'
-};
-const SHOW_MORE_EVENT_NAMES = {
-    showMore: 'showMore'
-};
-
-exports.SHOW_MORE_CSS_CLASSES = SHOW_MORE_CSS_CLASSES;
-exports.SHOW_MORE_EVENT_NAMES = SHOW_MORE_EVENT_NAMES;
-//# sourceMappingURL=show_more_constants.js.map

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

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

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

@@ -1,22 +0,0 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-import { PropertyValues } from 'lit';
-export declare class HShowMore extends PhoenixLightLitElement {
-    count: number;
-    selector: string;
-    mobileOnly: boolean;
-    showAll: boolean;
-    private _$showMoreButton;
-    private _$items;
-    connectedCallback(): void;
-    protected updated(_changedProperties: PropertyValues): void;
-    disconnectedCallback(): void;
-    private _updateComponentVisibility;
-    private _hideExcessItems;
-    private _showAllItems;
-    private _hideButton;
-    private _showButton;
-    private _setupListeners;
-    private _showMore;
-    private _focusNextItem;
-    private _onResize;
-}