@shoper/phoenix_design_system 1.0.0 → 1.0.2

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.d.ts

@@ -1,3 +1,5 @@
+import { Any } from 'ts-toolbelt';
+import { VERTICAL_DIRECTIONS } from "../../controllers/relative_position_controller/relative_position_controller_constants";
 export declare type TDropdownSelectors = {
     getDropdownPortalTargetName(): string;
     getDropdownContainerName(): string;
@@ -7,9 +9,11 @@ export interface IDropdown {
     show(): void;
     hide(): void;
     toggle(): void;
+    isOpened(): boolean;
 }
 export declare type TDropdownHideEvent = Event & {
     detail: {
         name: string;
     };
 };
+export declare type TDropdownDirection = typeof VERTICAL_DIRECTIONS[Any.Keys<typeof VERTICAL_DIRECTIONS>];

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.js

@@ -1,2 +1,3 @@
-export {};
+import 'ts-toolbelt';
+import '@phoenixRoot/controllers/relative_position_controller/relative_position_controller_constants';
 //# sourceMappingURL=dropdown_types.js.map

package/build/esm/packages/phoenix/src/components/dropdown/dropdown_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"dropdown_types.js","sourceRoot":"","sources":["../../../../../../../src/components/dropdown/dropdown_types.ts"],"names":[],"mappings":"AAAA,OAAoB,aAAa,CAAC;AAClC,OAAoC,8FAA8F,CAAC"}

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.d.ts

@@ -0,0 +1,14 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HColorSwatchesControl extends PhoenixLightLitElement {
+    controlId: string;
+    controlName: string;
+    disabled: boolean;
+    required: boolean;
+    error: boolean;
+    selectedColors: string | undefined;
+    connectedCallback(): void;
+    private _setupEvents;
+    private _serializeArrayOfColors;
+    protected render(): TemplateResult;
+}

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js

@@ -0,0 +1,73 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { INPUT_CONTROL_TYPES } from '../input/input_constants.js';
+import classnames from '../../../../external/classnames/index.js';
+import { COLOR_SWATCHES_CONTROL_CSS_CLASSES } from './color_swatches_control_constants.js';
+import { COLOR_SWATCHES_EVENT_NAMES } from '../../color_swatches/color_swatches_constants.js';
+
+let HColorSwatchesControl = class HColorSwatchesControl extends PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+        this.classList.add(COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControl);
+        const cssClasses = classnames({
+            [COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlDisabled]: this.disabled,
+            [COLOR_SWATCHES_CONTROL_CSS_CLASSES.colorSwatchesControlError]: this.error
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+    _setupEvents() {
+        this.addEventListener(COLOR_SWATCHES_EVENT_NAMES.selected, (event) => {
+            const eventValue = event.detail.colors;
+            this.selectedColors = Array.isArray(eventValue) ? this._serializeArrayOfColors(eventValue) : eventValue;
+        });
+    }
+    _serializeArrayOfColors(colors) {
+        return colors.reduce((colorPrev, colorCurr) => {
+            return colorPrev ? `${colorPrev}, ${colorCurr}` : colorCurr;
+        }, '');
+    }
+    render() {
+        return html `
+            <h-input-control
+                controlName="${this.controlName}"
+                type="${INPUT_CONTROL_TYPES.hidden}"
+                value="${this.selectedColors}"
+            ></h-input-control>
+        `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'control-id' }),
+    __metadata("design:type", String)
+], HColorSwatchesControl.prototype, "controlId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HColorSwatchesControl.prototype, "controlName", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HColorSwatchesControl.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HColorSwatchesControl.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HColorSwatchesControl.prototype, "error", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HColorSwatchesControl.prototype, "selectedColors", void 0);
+HColorSwatchesControl = __decorate([
+    phoenixCustomElement('h-color-swatches-control')
+], HColorSwatchesControl);
+
+export { HColorSwatchesControl };
+//# sourceMappingURL=color_swatches_control.js.map

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,0CAA8C;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/color_swatches_control/color_swatches_control_constants.d.ts

@@ -0,0 +1,5 @@
+export declare const COLOR_SWATCHES_CONTROL_CSS_CLASSES: {
+    readonly colorSwatchesControl: "color-swatches-control";
+    readonly colorSwatchesControlDisabled: "color-swatches-control_disabled";
+    readonly colorSwatchesControlError: "color-swatches-control_error";
+};

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js

@@ -0,0 +1,9 @@
+const baseColorSwatchesControlClass = 'color-swatches-control';
+const COLOR_SWATCHES_CONTROL_CSS_CLASSES = {
+    colorSwatchesControl: baseColorSwatchesControlClass,
+    colorSwatchesControlDisabled: `${baseColorSwatchesControlClass}_disabled`,
+    colorSwatchesControlError: `${baseColorSwatchesControlClass}_error`
+};
+
+export { COLOR_SWATCHES_CONTROL_CSS_CLASSES };
+//# sourceMappingURL=color_swatches_control_constants.js.map

package/build/esm/packages/phoenix/src/components/form/color_swatches_control/color_swatches_control_constants.js.map

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

package/build/esm/packages/phoenix/src/components/form/input/input_icon.d.ts

@@ -1,7 +1,6 @@
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { TemplateResult } from 'lit';
 export declare class HInputIcon extends PhoenixLightLitElement {
-    static src: string;
     iconName: string;
     connectedCallback(): void;
     protected render(): TemplateResult;

package/build/esm/packages/phoenix/src/components/form/input/input_icon.js

@@ -6,26 +6,21 @@ import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_el
 import { INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 import { ICON_CSS_CLASSES } from '../../icon/icon_constants.js';
 
-var HInputIcon_1;
-let HInputIcon = HInputIcon_1 = class HInputIcon extends PhoenixLightLitElement {
+let HInputIcon = class HInputIcon extends PhoenixLightLitElement {
     connectedCallback() {
         super.connectedCallback();
         this.classList.add(INPUT_CONTROL_CSS_CLASSES.inputIcon, ICON_CSS_CLASSES.icon);
     }
     render() {
         super.render();
-        return html `
-            <svg>
-                <use xlink:href="${HInputIcon_1.src}#${this.iconName}"></use>
-            </svg>
-        `;
+        return html ` <h-icon icon-name=${this.iconName}></h-icon> `;
     }
 };
 __decorate([
-    property({ type: String }),
+    property({ type: String, attribute: 'icon-name' }),
     __metadata("design:type", String)
 ], HInputIcon.prototype, "iconName", void 0);
-HInputIcon = HInputIcon_1 = __decorate([
+HInputIcon = __decorate([
     phoenixCustomElement('h-input-icon')
 ], HInputIcon);
 

package/build/esm/packages/phoenix/src/components/form/input/input_icon.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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;"}

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button.d.ts

@@ -1,5 +1,5 @@
-import { PropertyValues } from 'lit';
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+import { PropertyValues } from 'lit';
 export declare class HToggleButton extends PhoenixLightLitElement {
     toggledOn: boolean;
     willUpdate(propertyValues: PropertyValues): void;

package/build/esm/packages/phoenix/src/components/icon/icon.d.ts

@@ -0,0 +1,14 @@
+import { TemplateResult } from 'lit';
+import { TIconSize } from "./icon_constants";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HIcon extends PhoenixLightLitElement {
+    static src: string;
+    iconName: string;
+    size?: TIconSize | undefined;
+    filled: boolean;
+    clickable: boolean;
+    noStroke: boolean;
+    private _cssClasses;
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,62 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+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 classnames from '../../../external/classnames/index.js';
+import { ICON_CSS_CLASSES, ICON_SIZES_CSS_CLASS_MAP } from './icon_constants.js';
+import { namespacedAttribute } from '../../directives/namespaced_attribure_directive.js';
+
+var HIcon_1;
+let HIcon = HIcon_1 = class HIcon extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.filled = false;
+        this.clickable = false;
+        this.noStroke = false;
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        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
+        });
+    }
+    render() {
+        super.render();
+        return html `
+            <svg class="${this._cssClasses}">
+                <use xlink:href="${namespacedAttribute('http://www.w3.org/1999/xlink', `${HIcon_1.src}#${this.iconName}`)}"></use>
+            </svg>
+        `;
+    }
+};
+__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')
+], HIcon);
+
+export { HIcon };
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;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;"}

package/build/esm/packages/phoenix/src/components/icon/icon_constants.d.ts

@@ -1,3 +1,16 @@
+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 type TIconSize = Any.Keys<typeof ICON_SIZES_CSS_CLASS_MAP>;

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

@@ -1,6 +1,18 @@
+const iconBaseClass = 'icon';
 const ICON_CSS_CLASSES = {
-    icon: 'icon'
+    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
 };
 
-export { ICON_CSS_CLASSES };
+export { 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":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}

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

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

@@ -0,0 +1,151 @@
+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_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);
+
+export { BaseMessage };
+//# sourceMappingURL=base_message.js.map

package/build/esm/packages/phoenix/src/components/messages/base_message.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,9 @@
+export declare const DEFAULT_MESSAGE_PORTAL_NAME = "message-portal";
+export declare const MESSAGE_CONTENT_SLOT_NAME = "message-content";
+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 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;

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

@@ -0,0 +1,15 @@
+import { HINT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
+import { TOOLTIP_ELEMENT_NAME, TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltips/tooltip_constants.js';
+
+const DEFAULT_MESSAGE_PORTAL_NAME = 'message-portal';
+const MESSAGE_CONTENT_SLOT_NAME = 'message-content';
+const MESSAGE_REMOVED_CLASS_NAME = `removed`;
+const DEFAULT_MESSAGE_OFFSET = 10;
+const MESSAGE_ELEMENTS = [TOOLTIP_ELEMENT_NAME, HINT_ELEMENT_NAME];
+const MESSAGE_CONTENT_ELEMENTS = [TOOLTIP_CONTENT_ELEMENT_NAME, HINT_CONTENT_ELEMENT_NAME];
+const MESSAGE_SHOW_DELAY_IN_MS = 100;
+const MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS = 500;
+const MESSAGE_CLOSE_DELAY_IN_MS = 500;
+
+export { DEFAULT_MESSAGE_OFFSET, DEFAULT_MESSAGE_PORTAL_NAME, MESSAGE_CLOSE_DELAY_IN_MS, MESSAGE_CONTENT_ELEMENTS, MESSAGE_CONTENT_SLOT_NAME, MESSAGE_ELEMENTS, MESSAGE_REMOVED_CLASS_NAME, MESSAGE_SHOW_DELAY_IN_MS, MESSAGE_TIME_TO_DELAY_CLOSING_IN_MS };
+//# 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;AACA;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;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.slot = MESSAGE_CONTENT_SLOT_NAME;
+        this._setupAriaAttributes();
+    }
+    _setupAriaAttributes() {
+        this.setAttribute('role', 'tooltip');
+        this.setAttribute('inert', '');
+    }
+}
+__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/base_message_types.d.ts

@@ -0,0 +1,4 @@
+export interface IBaseMessage {
+    open: () => void;
+    close: () => void;
+}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=base_message_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base_message_types.js","sourceRoot":"","sources":["../../../../../../../src/components/messages/base_message_types.ts"],"names":[],"mappings":""}

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

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

@@ -0,0 +1,32 @@
+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 {
+    constructor() {
+        super();
+        this.offset = HINT_DEFAULT_OFFSET;
+    }
+    connectedCallback() {
+        super.connectedCallback(HINT_CLASS_NAME);
+        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>
+        `;
+    }
+};
+HHint = __decorate([
+    phoenixCustomElement(HINT_ELEMENT_NAME),
+    __metadata("design:paramtypes", [])
+], 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,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;"}