@shoper/phoenix_design_system 1.3.0 → 1.3.2

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

@@ -1,75 +1,77 @@
-var HIcon_1;
-import { __decorate, __metadata } from "tslib";
-import { property } from 'lit/decorators';
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { html } from 'lit';
-import { ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP } from '@phoenixRoot/components/icon/icon_constants';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import classNames from 'classnames';
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
-import { namespacedAttribute } from '@phoenixRoot/directives/namespaced_attribure_directive';
-import { Subject } from '@phoenixRoot/core/classes/subject/subject';
-import { Observer } from '@phoenixRoot/core/classes/observer/observer';
-let HIcon = HIcon_1 = class HIcon extends PhoenixLightLitElement {
-    constructor() {
-        super();
-        this.filled = false;
-        this.clickable = false;
-        this.noStroke = false;
-        this._srcObserverCallback = (src) => {
-            if (src)
-                this.requestUpdate();
-        };
-        this._srcObserver = new Observer(this._srcObserverCallback);
-        HIcon_1.src.subscribe(this._srcObserver);
-    }
-    connectedCallback() {
-        var _a;
-        super.connectedCallback();
-        HIcon_1.src.subscribe(this._srcObserver);
-        this._cssClasses = classNames(ICON_CSS_CLASSES.icon, {
-            [ICON_SIZES_CSS_CLASS_MAP[(_a = this.size) !== null && _a !== void 0 ? _a : '']]: Boolean(this.size),
-            [ICON_CSS_CLASSES.iconFilled]: this.filled,
-            [ICON_CSS_CLASSES.iconNoStroke]: this.noStroke,
-            [ICON_CSS_CLASSES.iconClickable]: this.clickable
-        });
-    }
-    disconnectedCallback() {
-        HIcon_1.src.unsubscribe(this._srcObserver);
-    }
-    render() {
-        if (!HIcon_1.src.getValue())
-            return null;
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP } from './icon_constants.js';
+import classnames from '../../../external/classnames/index.js';
+import { namespacedAttribute } from '../../directives/namespaced_attribure_directive.js';
+import { Observer } from '../../core/classes/observer/observer.js';
+import { Subject } from '../../core/classes/subject/subject.js';
+
+var HIcon_1;
+let HIcon = HIcon_1 = class HIcon extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.filled = false;
+        this.clickable = false;
+        this.noStroke = false;
+        this._srcObserverCallback = (src) => {
+            if (src)
+                this.requestUpdate();
+        };
+        this._srcObserver = new Observer(this._srcObserverCallback);
+        HIcon_1.src.subscribe(this._srcObserver);
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        HIcon_1.src.subscribe(this._srcObserver);
+        this._cssClasses = classnames(ICON_CSS_CLASSES.icon, {
+            [ICON_SIZES_CSS_CLASS_MAP[(_a = this.size) !== null && _a !== void 0 ? _a : '']]: Boolean(this.size),
+            [ICON_CSS_CLASSES.iconFilled]: this.filled,
+            [ICON_CSS_CLASSES.iconNoStroke]: this.noStroke,
+            [ICON_CSS_CLASSES.iconClickable]: this.clickable
+        });
+    }
+    disconnectedCallback() {
+        HIcon_1.src.unsubscribe(this._srcObserver);
+    }
+    render() {
+        if (!HIcon_1.src.getValue())
+            return null;
         return html `
             <svg class="${this._cssClasses}">
                 <use xlink:href="${namespacedAttribute('http://www.w3.org/1999/xlink', `${HIcon_1.src.getValue()}#${this.iconName}`)}"></use>
             </svg>
-        `;
-    }
-};
-HIcon.src = new Subject();
-__decorate([
-    property({ type: String, attribute: 'icon-name' }),
-    __metadata("design:type", String)
-], HIcon.prototype, "iconName", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], HIcon.prototype, "size", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HIcon.prototype, "filled", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HIcon.prototype, "clickable", void 0);
-__decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Boolean)
-], HIcon.prototype, "noStroke", void 0);
-HIcon = HIcon_1 = __decorate([
-    phoenixCustomElement('h-icon'),
-    __metadata("design:paramtypes", [])
+        `;
+    }
+};
+HIcon.src = new Subject();
+__decorate([
+    property({ type: String, attribute: 'icon-name' }),
+    __metadata("design:type", String)
+], HIcon.prototype, "iconName", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], HIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HIcon.prototype, "filled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HIcon.prototype, "clickable", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HIcon.prototype, "noStroke", void 0);
+HIcon = HIcon_1 = __decorate([
+    phoenixCustomElement('h-icon'),
+    __metadata("design:paramtypes", [])
 ], HIcon);
+
 export { HIcon };
-//# sourceMappingURL=icon.js.map
+//# sourceMappingURL=icon.js.map

package/build/esm/packages/phoenix/src/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../../../../src/components/icon/icon.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAa,MAAM,6CAA6C,CAAC;AACpH,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC;AAC/G,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wDAAwD,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,MAAM,2CAA2C,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AAGhE,IAAM,KAAK,aAAX,MAAM,KAAM,SAAQ,sBAAsB;IAsB7C;QACI,KAAK,EAAE,CAAC;QAbL,WAAM,GAAY,KAAK,CAAC;QAGxB,cAAS,GAAY,KAAK,CAAC;QAG3B,aAAQ,GAAY,KAAK,CAAC;QAczB,yBAAoB,GAAG,CAAC,GAAW,EAAE,EAAE;YAC3C,IAAI,GAAG;gBAAE,IAAI,CAAC,aAAa,EAAE,CAAC;QAClC,CAAC,CAAC;QAPE,IAAI,CAAC,YAAY,GAAG,IAAI,QAAQ,CAAS,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAEpE,OAAK,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC3C,CAAC;IAMM,iBAAiB;;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,OAAK,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAEvC,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,EAAE;YACjD,CAAC,wBAAwB,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YAC/D,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,MAAM;YAC1C,CAAC,gBAAgB,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,QAAQ;YAC9C,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAAE,IAAI,CAAC,SAAS;SACnD,CAAC,CAAC;IACP,CAAC;IAEM,oBAAoB;QACvB,OAAK,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,CAAC;IAES,MAAM;QACZ,IAAI,CAAC,OAAK,CAAC,GAAG,CAAC,QAAQ,EAAE;YAAE,OAAO,IAAI,CAAC;QAEvC,OAAO,IAAI,CAAA;0BACO,IAAI,CAAC,WAAW;mCACP,mBAAmB,CAAC,8BAA8B,EAAE,GAAG,OAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;;SAEzH,CAAC;IACN,CAAC;;AA1Da,SAAG,GAAoB,IAAI,OAAO,EAAU,CAAC;AAE3D;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;;uCAC3B;AAExB;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;mCACS;AAEpC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;qCACG;AAE/B;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;wCACM;AAElC;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;uCACK;AAhBxB,KAAK;IADjB,oBAAoB,CAAC,QAAQ,CAAC;;GAClB,KAAK,CA4DjB;SA5DY,KAAK"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA,uBAAuB,uCAA2C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/icon/icon_constants.d.ts

@@ -1,21 +1,21 @@
-import { Any } from 'ts-toolbelt';
-export declare const ICON_CSS_CLASSES: {
-    readonly icon: "icon";
-    readonly iconFilled: "icon_filled";
-    readonly iconNoStroke: "icon_no-stroke";
-    readonly iconSizeL: "icon_l";
-    readonly iconSizeXl: "icon_xl";
-    readonly iconSizeXxl: "icon_xxl";
-    readonly iconClickable: "icon_clickable";
-};
-export declare const ICON_SIZES_CSS_CLASS_MAP: {
-    readonly l: "icon_l";
-    readonly xl: "icon_xl";
-    readonly xxl: "icon_xxl";
-};
-export declare const ICONS_SIZES: {
-    readonly l: "l";
-    readonly xl: "xl";
-    readonly xxl: "xxl";
-};
-export type TIconSize = Any.Keys<typeof ICON_SIZES_CSS_CLASS_MAP>;
+import { Any } from 'ts-toolbelt';
+export declare const ICON_CSS_CLASSES: {
+    readonly icon: "icon";
+    readonly iconFilled: "icon_filled";
+    readonly iconNoStroke: "icon_no-stroke";
+    readonly iconSizeL: "icon_l";
+    readonly iconSizeXl: "icon_xl";
+    readonly iconSizeXxl: "icon_xxl";
+    readonly iconClickable: "icon_clickable";
+};
+export declare const ICON_SIZES_CSS_CLASS_MAP: {
+    readonly l: "icon_l";
+    readonly xl: "icon_xl";
+    readonly xxl: "icon_xxl";
+};
+export declare const ICONS_SIZES: {
+    readonly l: "l";
+    readonly xl: "xl";
+    readonly xxl: "xxl";
+};
+export declare type TIconSize = Any.Keys<typeof ICON_SIZES_CSS_CLASS_MAP>;

package/build/esm/packages/phoenix/src/components/icon/icon_constants.js

@@ -1,22 +1,23 @@
-import 'ts-toolbelt';
-const iconBaseClass = 'icon';
-export const ICON_CSS_CLASSES = {
-    icon: iconBaseClass,
-    iconFilled: `${iconBaseClass}_filled`,
-    iconNoStroke: `${iconBaseClass}_no-stroke`,
-    iconSizeL: `${iconBaseClass}_l`,
-    iconSizeXl: `${iconBaseClass}_xl`,
-    iconSizeXxl: `${iconBaseClass}_xxl`,
-    iconClickable: `${iconBaseClass}_clickable`
+const iconBaseClass = 'icon';
+const ICON_CSS_CLASSES = {
+    icon: iconBaseClass,
+    iconFilled: `${iconBaseClass}_filled`,
+    iconNoStroke: `${iconBaseClass}_no-stroke`,
+    iconSizeL: `${iconBaseClass}_l`,
+    iconSizeXl: `${iconBaseClass}_xl`,
+    iconSizeXxl: `${iconBaseClass}_xxl`,
+    iconClickable: `${iconBaseClass}_clickable`
+};
+const ICON_SIZES_CSS_CLASS_MAP = {
+    l: ICON_CSS_CLASSES.iconSizeL,
+    xl: ICON_CSS_CLASSES.iconSizeXl,
+    xxl: ICON_CSS_CLASSES.iconSizeXxl
+};
+const ICONS_SIZES = {
+    l: 'l',
+    xl: 'xl',
+    xxl: 'xxl'
 };
-export const ICON_SIZES_CSS_CLASS_MAP = {
-    l: ICON_CSS_CLASSES.iconSizeL,
-    xl: ICON_CSS_CLASSES.iconSizeXl,
-    xxl: ICON_CSS_CLASSES.iconSizeXxl
-};
-export const ICONS_SIZES = {
-    l: 'l',
-    xl: 'xl',
-    xxl: 'xxl'
-};
-//# sourceMappingURL=icon_constants.js.map
+
+export { ICONS_SIZES, ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP };
+//# sourceMappingURL=icon_constants.js.map

package/build/esm/packages/phoenix/src/components/icon/icon_constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon_constants.js","sourceRoot":"","sources":["../../../../../../../src/components/icon/icon_constants.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAElC,MAAM,aAAa,GAAG,MAAM,CAAC;AAE7B,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,IAAI,EAAE,aAAa;IACnB,UAAU,EAAE,GAAG,aAAa,SAAS;IACrC,YAAY,EAAE,GAAG,aAAa,YAAY;IAC1C,SAAS,EAAE,GAAG,aAAa,IAAI;IAC/B,UAAU,EAAE,GAAG,aAAa,KAAK;IACjC,WAAW,EAAE,GAAG,aAAa,MAAM;IACnC,aAAa,EAAE,GAAG,aAAa,YAAY;CACrC,CAAC;AAEX,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACpC,CAAC,EAAE,gBAAgB,CAAC,SAAS;IAC7B,EAAE,EAAE,gBAAgB,CAAC,UAAU;IAC/B,GAAG,EAAE,gBAAgB,CAAC,WAAW;CAC3B,CAAC;AAEX,MAAM,CAAC,MAAM,WAAW,GAAG;IACvB,CAAC,EAAE,GAAG;IACN,EAAE,EAAE,IAAI;IACR,GAAG,EAAE,KAAK;CACJ,CAAC"}
+{"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;"}

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

@@ -1,27 +1,27 @@
-import { IBaseMessage } from './base_message_types';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import type { TDirection } from '@phoenixRoot/controllers/relative_position_controller/relative_position_controller_types';
-export declare class BaseMessage extends PhoenixLightLitElement implements IBaseMessage {
-    opened: boolean;
-    portalTarget: string;
-    direction: TDirection;
-    offset: number;
-    private _positionController;
-    private _clickOutsideController;
-    private _$messageContent;
-    private _openTimeout;
-    private _tooltipOpenTime;
-    private _shouldDelayClosing;
-    private _closeTimeout;
-    private _messageComponentName;
-    constructor();
-    connectedCallback(messageComponentName?: string): void;
-    private static _appendMessagePortal;
-    private _setupEventListeners;
-    protected _positionMessage: () => void;
-    open: () => void;
-    close: () => void;
-    private _handleFocusWithinMessage;
-    private _handleReverseTab;
-    private _isBaseMessage;
-}
+import { IBaseMessage } from './base_message_types';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import type { TDirection } from "../../controllers/relative_position_controller/relative_position_controller_types";
+export declare class BaseMessage extends PhoenixLightLitElement implements IBaseMessage {
+    opened: boolean;
+    portalTarget: string;
+    direction: TDirection;
+    offset: number;
+    private _positionController;
+    private _clickOutsideController;
+    private _$messageContent;
+    private _openTimeout;
+    private _tooltipOpenTime;
+    private _shouldDelayClosing;
+    private _closeTimeout;
+    private _messageComponentName;
+    constructor();
+    connectedCallback(messageComponentName?: string): void;
+    private static _appendMessagePortal;
+    private _setupEventListeners;
+    protected _positionMessage: () => void;
+    open: () => void;
+    close: () => void;
+    private _handleFocusWithinMessage;
+    private _handleReverseTab;
+    private _isBaseMessage;
+}

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

@@ -1,150 +1,151 @@
-import { __decorate, __metadata } from "tslib";
-import { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_ELEMENTS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS } from './base_message_constants';
-import { PORTAL_TARGET_ATTRIBUTE_NAME, PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '@phoenixRoot/components/portal/portal_constants';
-import { ClickOutsideController } from '@phoenixRoot/controllers/click_outside_controller/click_outside_controller';
-import { DIRECTIONS } from '@phoenixRoot/controllers/relative_position_controller/relative_position_controller_constants';
-import '@phoenixRoot/components/portal/portal_target';
-import './base_message_types';
-import { KeystrokesController } from '@phoenixRoot/controllers/keystrokes_controller/keystrokes_controller';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import { RelativePositionController } from '@phoenixRoot/controllers/relative_position_controller/relative_position_controller';
-import { UiDomUtils } from '@dreamcommerce/utilities';
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-export 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('mouseleave', 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 = () => {
-            this._tooltipOpenTime = Date.now();
-            clearTimeout(this._closeTimeout);
-            this._openTimeout = setTimeout(() => {
-                if (this.opened)
-                    return;
-                this.opened = true;
-            }, MESSAGE_SHOW_DELAY_IN_MS);
-        };
-        this.close = () => {
-            this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
-            clearTimeout(this._openTimeout);
-            if (!this.opened)
-                return;
-            this._closeTimeout = setTimeout(() => {
-                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(`${this._messageComponentName}_${MESSAGE_REMOVED_CLASS_NAME}`);
-                    setTimeout(() => {
-                        var _a;
-                        this.opened = false;
-                        this._shouldDelayClosing = false;
-                        (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${this._messageComponentName}_${MESSAGE_REMOVED_CLASS_NAME}`);
-                    }, transitionDuration);
-                });
-            }, this._shouldDelayClosing ? MESSAGE_CLOSE_DELAY_IN_MS : 0);
-        };
-        this._handleFocusWithinMessage = (ev) => {
-            var _a;
-            if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${this._messageComponentName}`)) !== this)
-                this.close();
-            if (!document.activeElement || ev.shiftKey)
-                return;
-            const $focusableElements = UiDomUtils.getFocusableElements(this);
-            const activeElementIndex = $focusableElements.indexOf(document.activeElement);
-            const isLastFocusableChild = activeElementIndex === $focusableElements.length - 1;
-            if (!isLastFocusableChild)
-                return;
-            this.close();
-        };
-        this._handleReverseTab = () => {
-            const $focusableElements = UiDomUtils.getFocusableElements(document.body);
-            const activeElement = document.activeElement;
-            const indexOfCurrentlyFocusedElement = $focusableElements.indexOf(activeElement);
-            const $previousElement = $focusableElements[indexOfCurrentlyFocusedElement - 1];
-            const $previousElementMessageParent = $previousElement === null || $previousElement === void 0 ? void 0 : $previousElement.closest(`h-${this._messageComponentName}`);
-            if ($previousElementMessageParent === this)
-                return;
-            if ($previousElementMessageParent)
-                $previousElementMessageParent.open();
-            if (this._isBaseMessage(activeElement))
-                activeElement.close();
-        };
-        this._clickOutsideController = new ClickOutsideController({
-            host: this,
-            container: this,
-            action: this.close
-        });
-        new KeystrokesController({
-            host: this,
-            keys: ['tab'],
-            target: this,
-            callback: this._handleFocusWithinMessage
-        });
-        new KeystrokesController({
-            host: this,
-            keys: [['shift', 'tab']],
-            target: document.body,
-            callback: this._handleReverseTab
-        });
-    }
-    connectedCallback(messageComponentName = '') {
-        super.connectedCallback();
-        this._messageComponentName = messageComponentName;
-        BaseMessage._appendMessagePortal();
-        if (!this._$messageContent)
-            this._$messageContent = this.querySelector(MESSAGE_CONTENT_ELEMENTS.join(','));
-        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();
-    }
-    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);
-    }
-    _isBaseMessage($element) {
-        if (MESSAGE_ELEMENTS.includes($element.localName))
-            return true;
-        return false;
-    }
-}
-__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)
+import { UiDomUtils } from '@dreamcommerce/utilities';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
+import { DIRECTIONS } from '../../controllers/relative_position_controller/relative_position_controller_constants.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, MESSAGE_ELEMENTS } 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('mouseleave', 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 = () => {
+            this._tooltipOpenTime = Date.now();
+            clearTimeout(this._closeTimeout);
+            this._openTimeout = setTimeout(() => {
+                if (this.opened)
+                    return;
+                this.opened = true;
+            }, MESSAGE_SHOW_DELAY_IN_MS);
+        };
+        this.close = () => {
+            this._shouldDelayClosing = Date.now() - this._tooltipOpenTime > MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS;
+            clearTimeout(this._openTimeout);
+            if (!this.opened)
+                return;
+            this._closeTimeout = setTimeout(() => {
+                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(`${this._messageComponentName}_${MESSAGE_REMOVED_CLASS_NAME}`);
+                    setTimeout(() => {
+                        var _a;
+                        this.opened = false;
+                        this._shouldDelayClosing = false;
+                        (_a = this._$messageContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${this._messageComponentName}_${MESSAGE_REMOVED_CLASS_NAME}`);
+                    }, transitionDuration);
+                });
+            }, this._shouldDelayClosing ? MESSAGE_CLOSE_DELAY_IN_MS : 0);
+        };
+        this._handleFocusWithinMessage = (ev) => {
+            var _a;
+            if (((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest(`.${this._messageComponentName}`)) !== this)
+                this.close();
+            if (!document.activeElement || ev.shiftKey)
+                return;
+            const $focusableElements = UiDomUtils.getFocusableElements(this);
+            const activeElementIndex = $focusableElements.indexOf(document.activeElement);
+            const isLastFocusableChild = activeElementIndex === $focusableElements.length - 1;
+            if (!isLastFocusableChild)
+                return;
+            this.close();
+        };
+        this._handleReverseTab = () => {
+            const $focusableElements = UiDomUtils.getFocusableElements(document.body);
+            const activeElement = document.activeElement;
+            const indexOfCurrentlyFocusedElement = $focusableElements.indexOf(activeElement);
+            const $previousElement = $focusableElements[indexOfCurrentlyFocusedElement - 1];
+            const $previousElementMessageParent = $previousElement === null || $previousElement === void 0 ? void 0 : $previousElement.closest(`h-${this._messageComponentName}`);
+            if ($previousElementMessageParent === this)
+                return;
+            if ($previousElementMessageParent)
+                $previousElementMessageParent.open();
+            if (this._isBaseMessage(activeElement))
+                activeElement.close();
+        };
+        this._clickOutsideController = new ClickOutsideController({
+            host: this,
+            container: this,
+            action: this.close
+        });
+        new KeystrokesController({
+            host: this,
+            keys: ['tab'],
+            target: this,
+            callback: this._handleFocusWithinMessage
+        });
+        new KeystrokesController({
+            host: this,
+            keys: [['shift', 'tab']],
+            target: document.body,
+            callback: this._handleReverseTab
+        });
+    }
+    connectedCallback(messageComponentName = '') {
+        super.connectedCallback();
+        this._messageComponentName = messageComponentName;
+        BaseMessage._appendMessagePortal();
+        if (!this._$messageContent)
+            this._$messageContent = this.querySelector(MESSAGE_CONTENT_ELEMENTS.join(','));
+        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();
+    }
+    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);
+    }
+    _isBaseMessage($element) {
+        if (MESSAGE_ELEMENTS.includes($element.localName))
+            return true;
+        return false;
+    }
+}
+__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);
-//# sourceMappingURL=base_message.js.map
+
+export { BaseMessage };
+//# sourceMappingURL=base_message.js.map