@shoper/phoenix_design_system 0.22.6-2 → 0.23.0

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/checkbox/checkbox.js

@@ -4,7 +4,7 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.js';
 import { CHECKBOX_PROPS_TO_SYNC, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';
 
 let HCheckbox = class HCheckbox extends PhoenixLightLitElement {

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

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

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_control.js

@@ -4,7 +4,7 @@ import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_el
 import { html } from 'lit-html';
 import { property } from '@lit/reactive-element/decorators.js';
 import { createRef, ref } from 'lit-html/directives/ref.js';
-import classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { CHECKBOX_CONTROL_EVENTS, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,uBAAuB,gDAAoD;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,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;AACA;AACA;AACA;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/input/input.js

@@ -5,7 +5,7 @@ import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_el
 import { INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.js';
 
 let HInput = class HInput extends PhoenixLightLitElement {
     constructor() {

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

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

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

@@ -4,7 +4,7 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.js';
 import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';
 import { RADIO_CONTROL_CSS_CLASSES } from './radio_constants.js';
 

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

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

@@ -4,7 +4,7 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.js';
 import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';
 import { SWITCH_CONTROL_CSS_CLASSES } from './switch_constants.js';
 

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

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

@@ -4,7 +4,7 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';
 import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
-import classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.js';
 import { TEXTAREA_PROPS_TO_SYNC, TEXTAREA_CONTROL_CSS_CLASSES } from './textarea_constants.js';
 
 let HTextarea = class HTextarea extends PhoenixLightLitElement {

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

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

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

@@ -0,0 +1,24 @@
+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 {
+    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;
+    private _open;
+    private _close;
+    private _handleFocusWithinMessage;
+}

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

@@ -0,0 +1,131 @@
+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 } 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)
+                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(document.body);
+            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(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);
+    }
+}
+__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;"}

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

@@ -0,0 +1,8 @@
+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_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,14 @@
+import { HINT_CONTENT_ELEMENT_NAME } from './hints/hint_constants.js';
+import { 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_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_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;"}

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/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,33 @@
+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>
+            <div tabindex="0"></div>
+        `;
+    }
+};
+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;AACA;"}

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

@@ -0,0 +1,6 @@
+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 HINT_DEFAULT_OFFSET = 16;

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

@@ -0,0 +1,8 @@
+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`;
+const HINT_DEFAULT_OFFSET = 16;
+
+export { HINT_CLASS_NAME, HINT_CONTENT_CLASS_NAME, HINT_CONTENT_ELEMENT_NAME, HINT_DEFAULT_OFFSET, HINT_ELEMENT_NAME };
+//# sourceMappingURL=hint_constants.js.map

package/build/esm/packages/phoenix/src/components/messages/hints/hint_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/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.classList.add(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 { TOOLTIP_CLASS_NAME, TOOLTIP_ELEMENT_NAME } from './tooltip_constants.js';
+import { MESSAGE_CONTENT_SLOT_NAME } from '../base_message_constants.js';
+import { BaseMessage } from '../base_message.js';
+
+let HTooltip = class HTooltip extends BaseMessage {
+    connectedCallback() {
+        super.connectedCallback(TOOLTIP_CLASS_NAME);
+        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 { TOOLTIP_CONTENT_CLASS_NAME, TOOLTIP_CONTENT_ELEMENT_NAME } from './tooltip_constants.js';
+import { BaseMessageContent } from '../base_message_content.js';
+
+let HTooltipContent = class HTooltipContent extends BaseMessageContent {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(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/components/tabs/tabs.d.ts

@@ -2,7 +2,6 @@ import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/pho
 export declare class HTabs extends PhoenixLightLitElement {
     private _$selectedTab;
     private _$tabs;
-    watchChildrenRendered: boolean;
     connectedCallback(): void;
     private _handleArrowNavigation;
     private _getFocusedTabIndex;

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

@@ -11,7 +11,6 @@ import { TABS_EVENT_NAMES } from './tabs_constants.js';
 let HTabs = class HTabs extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
-        this.watchChildrenRendered = true;
         this._handleArrowNavigation = ({ key }) => {
             const currentTabIndex = this._getFocusedTabIndex();
             if (currentTabIndex === undefined)

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

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

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

@@ -1,11 +1,24 @@
-import { TRelativePositionCalculatorConstructorOptions, TRelativePositionControllerPositionData } from "./relative_position_controller_types";
+import { TRelativePositionCalculatorConstructorOptions } from './relative_position_calculator_types';
+import { TRelativePositionControllerPositionData } from "./relative_position_controller_types";
 export declare class PositionCalculator {
     #private;
-    constructor({ direction, relativeElementRect, positionElementRect, container, nearestNonStaticElementFromElementToPositionRect, shouldNotReposition }: TRelativePositionCalculatorConstructorOptions);
+    constructor({ direction, relativeElementRect, positionElementRect, container, nearestNonStaticElementFromElementToPositionRect, offset, shouldNotReposition }: TRelativePositionCalculatorConstructorOptions);
     calculatePosition(): TRelativePositionControllerPositionData;
     private _canFitTopSide;
     private _canFitBottomSide;
     private _canFitCenter;
+    private _canFitLeftSide;
+    private _canFitRightSide;
     private _calculateSidePosition;
+    private _calculateTopSide;
+    private _calculateBottomSide;
+    private _calculateCenterSide;
+    private _calculateLeftSide;
+    private _calculateRightSide;
     private calculateAlignmentPosition;
+    private _calculateTopAlignment;
+    private _calculateBottomAlignment;
+    private _calculateLeftAlignment;
+    private _calculateRightAlignment;
+    private _calculateCenterAlignment;
 }