@shoper/phoenix_design_system 0.22.5-2 → 0.22.5-4

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

@@ -0,0 +1,126 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property } from 'lit/decorators';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP, PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
+import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
+import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_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_REMOVED_CLASS_NAME, MESSAGE_CLASS_NAME } from './base_message_constants.js';
+
+class BaseMessage extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this.portalTarget = DEFAULT_MESSAGE_PORTAL_NAME;
+        this.direction = DIRECTIONS.topCenter;
+        this.offset = DEFAULT_MESSAGE_OFFSET;
+        this._setupEventListeners = () => {
+            this.addEventListener('mouseenter', this._open);
+            this.addEventListener('mouseout', this._close);
+            this.addEventListener('focus', this._open);
+        };
+        this._positionMessage = () => {
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.setAttribute('direction', this._positionController.position());
+            });
+        };
+        this._open = () => {
+            if (this.opened)
+                return;
+            this.opened = true;
+        };
+        this._close = () => {
+            if (!this.opened)
+                return;
+            const transitionDuration = parseFloat(getComputedStyle(this._$messageContent || this).transitionDuration) * 1000;
+            window.requestAnimationFrame(() => {
+                var _a;
+                (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.add(MESSAGE_REMOVED_CLASS_NAME);
+                setTimeout(() => {
+                    this.opened = false;
+                }, transitionDuration);
+            });
+        };
+        this._handleFocusWithinMessage = (ev) => {
+            var _a;
+            if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${MESSAGE_CLASS_NAME}`)) !== this)
+                this._close();
+            if (!document.activeElement)
+                return;
+            const $focusableElements = UiDomUtils.getFocusableElements(this);
+            const activeElementIndex = $focusableElements.indexOf(document.activeElement);
+            // jeśli jest przedostatni, to następnym elementem jest sentinel
+            const isPenultimate = activeElementIndex + 1 === $focusableElements.length - 1;
+            if (!isPenultimate)
+                return;
+            this._close();
+            ev.preventDefault();
+            const $focusableParentElements = UiDomUtils.getFocusableElements(this.parentElement);
+            const sentinelIndex = $focusableParentElements.indexOf(document.activeElement) + 1;
+            $focusableParentElements[sentinelIndex + 1].focus();
+        };
+        this._clickOutsideController = new ClickOutsideController({
+            host: this,
+            container: this,
+            action: this._close
+        });
+        new KeystrokesController({
+            host: this,
+            keys: ['tab'],
+            callback: this._handleFocusWithinMessage
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        BaseMessage._appendMessagePortal();
+        if (!this._$messageContent)
+            this._$messageContent = this.querySelector('h-tooltip-content');
+        if (!this._positionController && this._$messageContent)
+            this._positionController = new RelativePositionController({
+                host: this,
+                direction: this.direction,
+                relativeElement: this,
+                elementToPosition: this._$messageContent,
+                offset: this.offset
+            });
+        this.setAttribute('tabindex', '0');
+        this._setupEventListeners();
+        this.className = MESSAGE_CLASS_NAME;
+    }
+    static _appendMessagePortal() {
+        const $messagePortalTarget = document.querySelector(`[name="${DEFAULT_MESSAGE_PORTAL_NAME}"]`);
+        if ($messagePortalTarget)
+            return;
+        const $portalTarget = document.createElement(PORTAL_TARGET_COMPONENT_NAME);
+        $portalTarget.setAttribute(PORTAL_TARGET_NAME_PROP, DEFAULT_MESSAGE_PORTAL_NAME);
+        document.body.appendChild($portalTarget);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('mouseenter', this._open);
+        this.removeEventListener('mouseout', this._close);
+        this.removeEventListener('focus', this._open);
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], BaseMessage.prototype, "opened", void 0);
+__decorate([
+    property({ type: String, attribute: PORTAL_TARGET_ATTRIBUTE_NAME }),
+    __metadata("design:type", Object)
+], BaseMessage.prototype, "portalTarget", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], BaseMessage.prototype, "direction", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Number)
+], BaseMessage.prototype, "offset", void 0);
+
+export { BaseMessage };
+//# sourceMappingURL=base_message.js.map

package/build/esm/packages/phoenix/src/components/{color_swatches/color_swatches.js.map → 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;"}
+{"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,5 @@
+export declare const DEFAULT_MESSAGE_PORTAL_NAME = "message-portal";
+export declare const MESSAGE_CONTENT_SLOT_NAME = "message-content";
+export declare const MESSAGE_CLASS_NAME = "message";
+export declare const MESSAGE_REMOVED_CLASS_NAME: string;
+export declare const DEFAULT_MESSAGE_OFFSET = 8;

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

@@ -0,0 +1,8 @@
+const DEFAULT_MESSAGE_PORTAL_NAME = 'message-portal';
+const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
+const MESSAGE_CLASS_NAME = 'message';
+const MESSAGE_REMOVED_CLASS_NAME = `${MESSAGE_CLASS_NAME}_removed`;
+const DEFAULT_MESSAGE_OFFSET = 8;
+
+export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLASS_NAME, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_REMOVED_CLASS_NAME };
+//# sourceMappingURL=base_message_constants.js.map

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

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

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

@@ -0,0 +1,6 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class BaseMessageContent extends PhoenixLightLitElement {
+    portalTarget: string;
+    connectedCallback(): void;
+    private _setupAriaAttributes;
+}

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

@@ -0,0 +1,28 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { PORTAL_TARGET_ATTRIBUTE_NAME } from '../portal/portal_constants.js';
+import { DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CONTENT_SLOT_NAME } from './base_message_constants.js';
+
+class BaseMessageContent extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.portalTarget = DEFAULT_MESSAGE_PORTAL_NAME;
+        this._setupAriaAttributes = () => {
+            this.setAttribute('role', 'tooltip');
+            this.setAttribute('inert', '');
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.slot = MESSAGE_CONTENT_SLOT_NAME;
+        this._setupAriaAttributes();
+    }
+}
+__decorate([
+    property({ type: String, attribute: PORTAL_TARGET_ATTRIBUTE_NAME }),
+    __metadata("design:type", Object)
+], BaseMessageContent.prototype, "portalTarget", void 0);
+
+export { BaseMessageContent };
+//# sourceMappingURL=base_message_content.js.map

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

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

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

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

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

@@ -0,0 +1,28 @@
+import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { html } from 'lit-html';
+import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
+import { BaseMessage } from '../base_message.js';
+import { HINT_CLASS_NAME, HINT_ELEMENT_NAME } from './hint_constants.js';
+
+let HHint = class HHint extends BaseMessage {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(HINT_CLASS_NAME);
+    }
+    render() {
+        super.render();
+        return html `
+            <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionMessage}" to="${this.portalTarget}" hidden>
+                ${this.getSlot(MESSAGE_CONTENT_SLOT_NAME)}
+            </h-portal>
+            <div tabindex="0"></div>
+        `;
+    }
+};
+HHint = __decorate([
+    phoenixCustomElement(HINT_ELEMENT_NAME)
+], HHint);
+
+export { HHint };
+//# sourceMappingURL=hint.js.map

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

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

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

@@ -0,0 +1,7 @@
+export declare const HINT_ELEMENT_NAME = "h-hint";
+export declare const HINT_CONTENT_ELEMENT_NAME = "h-hint-content";
+export declare const HINT_CLASS_NAME = "hint";
+export declare const HINT_CONTENT_CLASS_NAME: string;
+export declare const HINT_REMOVED_CLASS_NAME: string;
+export declare const TOOLTIP_CONTENT_SLOT_NAME = "tooltip-content";
+export declare const DEFAULT_TOOLTIP_OFFSET = 8;

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

@@ -0,0 +1,7 @@
+const HINT_ELEMENT_NAME = 'h-hint';
+const HINT_CONTENT_ELEMENT_NAME = 'h-hint-content';
+const HINT_CLASS_NAME = 'hint';
+const HINT_CONTENT_CLASS_NAME = `${HINT_CLASS_NAME}__content`;
+
+export { HINT_CLASS_NAME, HINT_CONTENT_CLASS_NAME, HINT_CONTENT_ELEMENT_NAME, HINT_ELEMENT_NAME };
+//# sourceMappingURL=hint_constants.js.map

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

@@ -0,0 +1,4 @@
+import { BaseMessageContent } from '../base_message_content';
+export declare class HHintContent extends BaseMessageContent {
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,17 @@
+import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { HINT_CONTENT_CLASS_NAME, HINT_CONTENT_ELEMENT_NAME } from './hint_constants.js';
+import { BaseMessageContent } from '../base_message_content.js';
+
+let HHintContent = class HHintContent extends BaseMessageContent {
+    connectedCallback() {
+        super.connectedCallback();
+        this.className = HINT_CONTENT_CLASS_NAME;
+    }
+};
+HHintContent = __decorate([
+    phoenixCustomElement(HINT_CONTENT_ELEMENT_NAME)
+], HHintContent);
+
+export { HHintContent };
+//# sourceMappingURL=hint_content.js.map

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

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

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

@@ -0,0 +1,6 @@
+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

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

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

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

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

@@ -0,0 +1,4 @@
+export declare const TOOLTIP_ELEMENT_NAME = "h-tooltip";
+export declare const TOOLTIP_CONTENT_ELEMENT_NAME = "h-tooltip-content";
+export declare const TOOLTIP_CLASS_NAME = "tooltip";
+export declare const TOOLTIP_CONTENT_CLASS_NAME: string;

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

@@ -0,0 +1,7 @@
+const TOOLTIP_ELEMENT_NAME = 'h-tooltip';
+const TOOLTIP_CONTENT_ELEMENT_NAME = 'h-tooltip-content';
+const TOOLTIP_CLASS_NAME = 'tooltip';
+const TOOLTIP_CONTENT_CLASS_NAME = `${TOOLTIP_CLASS_NAME}__content`;
+
+export { TOOLTIP_CLASS_NAME, TOOLTIP_CONTENT_CLASS_NAME, TOOLTIP_CONTENT_ELEMENT_NAME, TOOLTIP_ELEMENT_NAME };
+//# sourceMappingURL=tooltip_constants.js.map

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

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

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

@@ -0,0 +1,4 @@
+import { BaseMessageContent } from '../base_message_content';
+export declare class HTooltipContent extends BaseMessageContent {
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,17 @@
+import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { BaseMessageContent } from '../base_message_content.js';
+import { TOOLTIP_CONTENT_CLASS_NAME, TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltip_constants.js';
+
+let HTooltipContent = class HTooltipContent extends BaseMessageContent {
+    connectedCallback() {
+        super.connectedCallback();
+        this.className = TOOLTIP_CONTENT_CLASS_NAME;
+    }
+};
+HTooltipContent = __decorate([
+    phoenixCustomElement(TOOLTIP_CONTENT_ELEMENT_NAME)
+], HTooltipContent);
+
+export { HTooltipContent };
+//# sourceMappingURL=tooltip_content.js.map

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

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

package/build/esm/packages/phoenix/src/components/portal/portal_constants.d.ts

@@ -6,6 +6,7 @@ export declare const PORTAL_EVENTS: {
 };
 export declare const PORTAL_TARGET_NAME_PROP = "name";
 export declare const PORTAL_TARGET_COMPONENT_NAME = "h-portal-target";
+export declare const PORTAL_TARGET_ATTRIBUTE_NAME = "portal-target";
 declare global {
     interface HTMLElementTagNameMap {
         'h-portal': HPortal;

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

@@ -3,7 +3,8 @@ const PORTAL_EVENTS = {
     close: 'portal.close'
 };
 const PORTAL_TARGET_NAME_PROP = 'name';
-const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
+const PORTAL_TARGET_COMPONENT_NAME = 'h-portal-target';
+const PORTAL_TARGET_ATTRIBUTE_NAME = 'portal-target';
 
-export { PORTAL_EVENTS, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP };
+export { 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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller.js

@@ -7,7 +7,7 @@ import throttle_1 from '../../../../../external/lodash/throttle.js';
 
 var _RelativePositionController_host, _RelativePositionController_container, _RelativePositionController_nearestNonStaticElementFromElementToPosition, _RelativePositionController_direction, _RelativePositionController_nearestScrollableElement, _RelativePositionController_relativeElement, _RelativePositionController_elementToPosition, _RelativePositionController_disablePositioningOnCondition, _RelativePositionController_portalElementsNames, _RelativePositionController_isInitiallyScrollable, _RelativePositionController_initialMaxHeight, _RelativePositionController_initialHeight, _RelativePositionController_calculatedDirection, _RelativePositionController_hasPositioningBeenDisabled, _RelativePositionController_doesCurrentlyHaveShrinkMode, _RelativePositionController_offset, _RelativePositionController_throttledReposition, _RelativePositionController_throttledRepositionForScroll;
 class RelativePositionController {
-    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => true, portalElementsNames = [], offset = 0 }) {
+    constructor({ host, container, direction, relativeElement, elementToPosition, disablePositioningOnCondition = () => false, portalElementsNames = [], offset = 0 }) {
         _RelativePositionController_host.set(this, void 0);
         _RelativePositionController_container.set(this, void 0);
         _RelativePositionController_nearestNonStaticElementFromElementToPosition.set(this, void 0);

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.d.ts

@@ -1,4 +1,38 @@
+export declare const VERTICAL_DIRECTIONS: {
+    readonly bottomLeft: "bottom-left";
+    readonly bottomRight: "bottom-right";
+    readonly bottomCenter: "bottom-center";
+    readonly topLeft: "top-left";
+    readonly topRight: "top-right";
+    readonly topCenter: "top-center";
+};
+export declare const HORIZONTAL_DIRECTIONS: {
+    readonly rightTop: "right-top";
+    readonly rightCenter: "right-center";
+    readonly rightBottom: "right-bottom";
+    readonly leftTop: "left-top";
+    readonly leftCenter: "left-center";
+    readonly leftBottom: "left-bottom";
+};
+export declare const CENTER_DIRECTIONS: {
+    readonly centerTop: "center-top";
+    readonly centerRight: "center-right";
+    readonly centerBottom: "center-bottom";
+    readonly centerLeft: "center-left";
+    readonly top: "top";
+    readonly right: "right";
+    readonly bottom: "bottom";
+    readonly left: "left";
+};
 export declare const DIRECTIONS: {
+    readonly centerTop: "center-top";
+    readonly centerRight: "center-right";
+    readonly centerBottom: "center-bottom";
+    readonly centerLeft: "center-left";
+    readonly top: "top";
+    readonly right: "right";
+    readonly bottom: "bottom";
+    readonly left: "left";
     readonly bottomLeft: "bottom-left";
     readonly bottomRight: "bottom-right";
     readonly bottomCenter: "bottom-center";

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_constants.js

@@ -1,10 +1,12 @@
-const DIRECTIONS = {
+const VERTICAL_DIRECTIONS = {
     bottomLeft: 'bottom-left',
     bottomRight: 'bottom-right',
     bottomCenter: 'bottom-center',
     topLeft: 'top-left',
     topRight: 'top-right',
-    topCenter: 'top-center',
+    topCenter: 'top-center'
+};
+const HORIZONTAL_DIRECTIONS = {
     rightTop: 'right-top',
     rightCenter: 'right-center',
     rightBottom: 'right-bottom',
@@ -12,6 +14,21 @@ const DIRECTIONS = {
     leftCenter: 'left-center',
     leftBottom: 'left-bottom'
 };
+const CENTER_DIRECTIONS = {
+    centerTop: 'center-top',
+    centerRight: 'center-right',
+    centerBottom: 'center-bottom',
+    centerLeft: 'center-left',
+    top: 'top',
+    right: 'right',
+    bottom: 'bottom',
+    left: 'left'
+};
+const DIRECTIONS = {
+    ...HORIZONTAL_DIRECTIONS,
+    ...VERTICAL_DIRECTIONS,
+    ...CENTER_DIRECTIONS
+};
 const CALCULATOR_DIRECTIONS = {
     bottom: 'bottom',
     top: 'top',
@@ -32,5 +49,5 @@ const RELATIVE_POSITION_CONTROLLER_EVENTS = {
     disabledPositioning: `${RELATIVE_POSITION_CONTROLLER_EVENT_NAME}.disabledPositioning`
 };
 
-export { CALCULATOR_DIRECTIONS, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, DEFAULT_THROTTLE_WAIT_TIME, DIRECTIONS, NON_STATIC_POSITIONS, OVERFLOW_AUTO, OVERFLOW_SCROLL, RELATIVE_POSITION_CONTROLLER_EVENTS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT };
+export { CALCULATOR_DIRECTIONS, CENTER_DIRECTIONS, DEFAULT_SCROLL_THROTTLE_WAIT_TIME, DEFAULT_THROTTLE_WAIT_TIME, DIRECTIONS, HORIZONTAL_DIRECTIONS, NON_STATIC_POSITIONS, OVERFLOW_AUTO, OVERFLOW_SCROLL, RELATIVE_POSITION_CONTROLLER_EVENTS, SHRINK_MODE_BOTTOM_MARGIN, SHRINK_MODE_MIN_HEIGHT, VERTICAL_DIRECTIONS };
 //# sourceMappingURL=relative_position_controller_constants.js.map

package/build/esm/packages/phoenix/src/controllers/relative_position_controller/relative_position_controller_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;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;"}

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult, nothing, PropertyValues } from 'lit';
+import { LitElement, PropertyValues, TemplateResult, nothing } from 'lit';
 export declare class PhoenixLightLitElement extends LitElement {
     _slots: Record<string, TemplateResult[]>;
     protected childrenToWatch: string[];

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

@@ -65,8 +65,6 @@ export { RelativePositionController } from './controllers/relative_position_cont
 export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller';
 export { HBackdrop } from './components/backdrop/backdrop';
 export { BackdropController } from "./components/backdrop/controller/backdrop_controller";
-export { HColorSwatches } from './components/color_swatches/color_swatches';
-export { HColorItem } from './components/color_swatches/color_item/color_item';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller';
 export * from './controllers/visibility_controller/visibility_controller_types';
 export { HSlider } from './components/slider/slider';
@@ -77,3 +75,8 @@ export { HTabPanel } from './components/tabs/tab_panel';
 export { TABS_EVENT_NAMES } from './components/tabs/tabs_constants';
 export { HScrollTo } from './components/scroll_to/scroll_to';
 export * from './components/scroll_to/scroll_to_types';
+export { BaseMessage } from "./components/messages/base_message";
+export { HHint } from "./components/messages/hints/hint";
+export { HHintContent } from "./components/messages/hints/hint_content";
+export { HTooltip } from "./components/messages/tooltips/tooltip";
+export { HTooltipContent } from "./components/messages/tooltips/tooltip_content";

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

@@ -56,8 +56,6 @@ export { HToggleButtonGroup } from './components/groups/toggle_button_group/togg
 export { HToggleButton } from './components/groups/toggle_button_group/toggle_button.js';
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
 export { HBackdrop } from './components/backdrop/backdrop.js';
-export { HColorItem } from './components/color_swatches/color_item/color_item.js';
-export { HColorSwatches } from './components/color_swatches/color_swatches.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';
 export { HSlider } from './components/slider/slider.js';
 export { HTab } from './components/tabs/tab/tab.js';
@@ -65,4 +63,9 @@ export { HTabPanel } from './components/tabs/tab_panel.js';
 export { TABS_EVENT_NAMES } from './components/tabs/tabs_constants.js';
 export { HTabs } from './components/tabs/tabs.js';
 export { HScrollTo } from './components/scroll_to/scroll_to.js';
+export { BaseMessage } from './components/messages/base_message.js';
+export { HHint } from './components/messages/hints/hint.js';
+export { HHintContent } from './components/messages/hints/hint_content.js';
+export { HTooltip } from './components/messages/tooltips/tooltip.js';
+export { HTooltipContent } from './components/messages/tooltips/tooltip_content.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;"}
+{"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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@shoper/phoenix_design_system",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "0.22.5-2",
+  "version": "0.22.5-4",
   "description": "phoenix design system",
   "author": "zefirek",
   "license": "MIT",

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

@@ -1,69 +0,0 @@
-'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 btn_controller = require('../../../controllers/btn_controller.js');
-var color_item_constants = require('./color_item_constants.js');
-var color_swatches_constants = require('../color_swatches_constants.js');
-
-exports.HColorItem = class HColorItem extends phoenix_light_lit_element.PhoenixLightLitElement {
-    constructor() {
-        super();
-        this.disabled = false;
-        this.selected = 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.color;
-        this._syncAriaPressed();
-        this.setAttribute('aria-label', this.label ? this.label : this.color);
-        this.classList.add(color_swatches_constants.COLOR_SWATCHES_CSS_CLASSES.colorItem);
-    }
-    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.addEventListener('click', this._dispatchClickedEvent);
-    }
-};
-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, "label", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Boolean, attribute: true }),
-    tslib_es6.__metadata("design:type", Boolean)
-], exports.HColorItem.prototype, "disabled", void 0);
-tslib_es6.__decorate([
-    decorators.property({ type: Boolean, attribute: true }),
-    tslib_es6.__metadata("design:type", Boolean)
-], exports.HColorItem.prototype, "selected", 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

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