@shoper/phoenix_design_system 0.22.3 → 0.22.4-1

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

@@ -1,13 +1,12 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import 'lit';
 import { state } from 'lit/decorators';
+import { UiDomUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { PORTAL_TARGET_COMPONENT_NAME, PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { html } from 'lit-html';
 import { BackdropController } from '../backdrop/controller/backdrop_controller.js';
 import { property } from '@lit/reactive-element/decorators.js';
-import { createRef, ref } from 'lit-html/directives/ref.js';
 import { BREAKPOINTS, SCROLLABLE_CLASS_NAME } from '../../global_constants.js';
 import { DEFAULT_DROPDOWN_PORTAL_NAME, DROPDOWN_CONTENT_VISIBLE_CLASS, DROPDOWN_CONTENT_SHOW, DROPDOWN_EVENTS, DROPDOWN_CONTAINER_NAME, DROPDOWN_CONTENT_HIDE, DROPDOWN_CONTENT_NAME, DROPDOWN_TOGGLER_NAME } from './dropdown_constants.js';
 import { DIRECTIONS, RELATIVE_POSITION_CONTROLLER_EVENTS, DEFAULT_THROTTLE_WAIT_TIME } from '../../controllers/relative_position_controller/relative_position_controller_constants.js';
@@ -26,10 +25,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this.transition = 'direction';
         this.portalTarget = DEFAULT_DROPDOWN_PORTAL_NAME;
         this._backdropController = new BackdropController();
-        this._firstFocusableElement = undefined;
         this._lastFocusableElement = undefined;
-        this._focusSentinelStart = createRef();
-        this._focusSentinelEnd = createRef();
         this._handleClickOutside = async (target) => {
             var _a, _b;
             if (!this.opened)
@@ -55,11 +51,13 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
                     }, 0);
                     const transitionDuration = parseFloat(getComputedStyle(this.$dropdownContent || this).transitionDuration) * 1000;
                     setTimeout(() => {
-                        var _a, _b;
+                        var _a, _b, _c;
                         this._dispatchShowDropdownEvent();
                         (_a = this.$dropdownContent) === null || _a === void 0 ? void 0 : _a.classList.remove(`${DROPDOWN_CONTENT_SHOW}-${this.transition}-start`, `${DROPDOWN_CONTENT_SHOW}-${this.transition}-end`);
                         this._toggleScroll();
-                        (_b = this._firstFocusableElement) === null || _b === void 0 ? void 0 : _b.focus();
+                        if (!this._lastFocusableElement)
+                            this._lastFocusableElement = (_b = this.$dropdownContent) === null || _b === void 0 ? void 0 : _b.lastElementChild;
+                        this._focusOnNextSibling((_c = this.$dropdownContent) === null || _c === void 0 ? void 0 : _c.firstElementChild);
                         resolve();
                     }, transitionDuration);
                 });
@@ -133,18 +131,16 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this._handleFocusWithinDropdown = async (ev) => {
             var _a;
             const hasTabBeenPressed = ev.key.toLowerCase() === 'tab';
-            if (hasTabBeenPressed) {
-                if (ev.shiftKey) {
-                    if (document.activeElement === this._firstFocusableElement) {
-                        (_a = this._lastFocusableElement) === null || _a === void 0 ? void 0 : _a.focus();
-                        ev.preventDefault();
-                    }
-                }
-                else if (document.activeElement === this._lastFocusableElement) {
-                    ev.preventDefault();
-                    this._focusOnNextSibling(this);
-                    await this._hideDropdownsSequentially();
-                }
+            if (hasTabBeenPressed && document.activeElement === this._lastFocusableElement) {
+                ev.preventDefault();
+                this._focusOnNextSibling(this.nextElementSibling || this);
+                await this._hideDropdownsSequentially();
+            }
+            const $firstFocusableElement = this.$dropdownContent && UiDomUtils.getFocusableElement(this.$dropdownContent);
+            if (hasTabBeenPressed && ev.shiftKey && document.activeElement === $firstFocusableElement) {
+                ev.preventDefault();
+                (_a = this.$dropdownToggler) === null || _a === void 0 ? void 0 : _a.focus();
+                await this._hideDropdownsSequentially();
             }
         };
         this._hoverToggle = async (ev) => {
@@ -203,11 +199,6 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         this._setupListeners();
         this._setupInitialDropdownProperties();
     }
-    firstUpdated(props) {
-        super.firstUpdated(props);
-        this._firstFocusableElement = this._focusSentinelStart.value;
-        this._lastFocusableElement = this._focusSentinelEnd.value;
-    }
     static _appendDropdownPortal() {
         const $dropdownPortalTarget = document.querySelector(`[name="${DEFAULT_DROPDOWN_PORTAL_NAME}"]`);
         if (!$dropdownPortalTarget) {
@@ -254,7 +245,12 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         el.focus();
         if (el === document.activeElement)
             return;
-        this._focusOnNextSibling(el.nextElementSibling);
+        if (el.firstElementChild) {
+            this._focusOnNextSibling(el.firstElementChild);
+            return;
+        }
+        if (el.nextElementSibling)
+            this._focusOnNextSibling(el.nextElementSibling);
     }
     _isHoveredWithinDropdown(element) {
         var _a;
@@ -262,7 +258,8 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
             return true;
         if (element === this.$dropdownContent)
             return true;
-        const isDescendantOfDropdown = element.closest(`${DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null;
+        const isDescendantOfDropdown = element.closest(`${DROPDOWN_CONTAINER_NAME}[name="${this.name}"]`) !== null ||
+            element.closest(`${DROPDOWN_CONTENT_NAME}[name="${this.name}"]`) !== null;
         if (isDescendantOfDropdown)
             return true;
         const $closestDropdownContent = element.closest(DROPDOWN_CONTENT_NAME);
@@ -299,9 +296,7 @@ let HDropdown = HDropdown_1 = class HDropdown extends PhoenixLightLitElement {
         return html `
             ${this.getSlot('toggler')}
             <h-portal ?disabled="${!this.opened}" @portal.open="${this._positionDropdownContent}" to="${this.portalTarget}" hidden>
-                <div tabindex="0" ${ref(this._focusSentinelStart)}></div>
                 ${this.getSlot('content')}
-                <div tabindex="0" ${ref(this._focusSentinelEnd)}></div>
             </h-portal>
         `;
     }
@@ -330,10 +325,6 @@ __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
 ], HDropdown.prototype, "portalTarget", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], HDropdown.prototype, "_firstFocusableElement", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,uBAAuB,4CAAgD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/dropdown/dropdown_content.js

@@ -18,7 +18,10 @@ let HDropdownContent = class HDropdownContent extends PhoenixLightLitElement {
     }
     render() {
         super.render();
-        return html ` <div role="dialog">${this.getSlot('content')}</div> `;
+        return html `
+            <div role="dialog">${this.getSlot('content')}</div>
+            <div tabindex="0" aria-hidden="true"></div>
+        `;
     }
 };
 __decorate([

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

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

@@ -14,7 +14,7 @@ let HDropdownToggler = class HDropdownToggler extends PhoenixLightLitElement {
         this._dispatchToggleDropdownEvent = (ev) => {
             ev.preventDefault();
             ev.stopImmediatePropagation();
-            const toggleDropdownEvent = new Event(DROPDOWN_EVENTS.toggle, {
+            const toggleDropdownEvent = new CustomEvent(DROPDOWN_EVENTS.toggle, {
                 bubbles: true
             });
             this.dispatchEvent(toggleDropdownEvent);

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { JsonUtils } from '../../../../utilities/build/esm/json_utils.js';
+import { JsonUtils } from '@dreamcommerce/utilities';
 import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { Splide } from '../../../../../external/@splidejs/splide/dist/js/splide.esm.js';

package/build/esm/packages/phoenix/src/components/tabs/tab/tab.d.ts

@@ -0,0 +1,14 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HTab extends PhoenixLightLitElement {
+    panelName: string;
+    get selected(): boolean;
+    disabled: boolean;
+    set selected(selected: boolean);
+    private _btnController;
+    attributeChangedCallback(name: string, value: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    private _setupAttributes;
+    private _bindEvents;
+    private _handleTabClicked;
+    _dispatchSelectedEvent: () => void;
+}

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

@@ -0,0 +1,72 @@
+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 { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { BtnController } from '../../../controllers/btn_controller.js';
+import { TAB_EVENT_NAMES, TAB_SELECTED_ATTRIBUTE_NAME } from './tab_constants.js';
+
+let HTab = class HTab extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._handleTabClicked = () => {
+            if (this.disabled)
+                return;
+            this._dispatchSelectedEvent();
+        };
+        this._dispatchSelectedEvent = () => {
+            this.dispatchEvent(new CustomEvent(TAB_EVENT_NAMES.selected, {
+                detail: {
+                    $el: this
+                },
+                bubbles: true
+            }));
+        };
+    }
+    get selected() {
+        return this.hasAttribute(TAB_SELECTED_ATTRIBUTE_NAME);
+    }
+    set selected(selected) {
+        selected ? this.setAttribute(TAB_SELECTED_ATTRIBUTE_NAME, '') : this.removeAttribute(TAB_SELECTED_ATTRIBUTE_NAME);
+        this.setAttribute('aria-selected', String(selected));
+        selected ? UiDomUtils.makeNavigable(this) : UiDomUtils.makeUnnavigable(this);
+    }
+    attributeChangedCallback(name, value, newValue) {
+        super.attributeChangedCallback(name, value, newValue);
+        switch (name) {
+            case TAB_SELECTED_ATTRIBUTE_NAME: {
+                this.selected = Boolean(newValue);
+                break;
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._btnController = new BtnController(this, this._handleTabClicked);
+        this._setupAttributes();
+        this._bindEvents();
+        this.selected ? UiDomUtils.makeNavigable(this) : UiDomUtils.makeUnnavigable(this);
+    }
+    _setupAttributes() {
+        this.setAttribute('role', 'tab');
+        this.setAttribute('aria-controls', this.panelName);
+        this.setAttribute('aria-selected', String(this.selected));
+    }
+    _bindEvents() {
+        this.addEventListener('click', this._handleTabClicked);
+    }
+};
+__decorate([
+    property({ type: String, reflect: true, attribute: 'panel-name' }),
+    __metadata("design:type", String)
+], HTab.prototype, "panelName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], HTab.prototype, "disabled", void 0);
+HTab = __decorate([
+    phoenixCustomElement('h-tab')
+], HTab);
+
+export { HTab };
+//# sourceMappingURL=tab.js.map

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

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

@@ -0,0 +1,4 @@
+export declare const TAB_EVENT_NAMES: {
+    readonly selected: "selected";
+};
+export declare const TAB_SELECTED_ATTRIBUTE_NAME = "selected";

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

@@ -0,0 +1,7 @@
+const TAB_EVENT_NAMES = {
+    selected: 'selected'
+};
+const TAB_SELECTED_ATTRIBUTE_NAME = 'selected';
+
+export { TAB_EVENT_NAMES, TAB_SELECTED_ATTRIBUTE_NAME };
+//# sourceMappingURL=tab_constants.js.map

package/build/esm/packages/phoenix/src/components/tabs/tab/tab_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/tabs/tab_panel.d.ts

@@ -0,0 +1,8 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HTabPanel extends PhoenixLightLitElement {
+    name: string;
+    private _visibilityController;
+    constructor();
+    show(): void;
+    hide(): void;
+}

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

@@ -0,0 +1,29 @@
+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 { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { VisibilityController } from '../../controllers/visibility_controller/visibility_controller.js';
+
+let HTabPanel = class HTabPanel extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._visibilityController = new VisibilityController(this);
+    }
+    show() {
+        this._visibilityController.show();
+    }
+    hide() {
+        this._visibilityController.hide();
+    }
+};
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], HTabPanel.prototype, "name", void 0);
+HTabPanel = __decorate([
+    phoenixCustomElement('h-tab-panel'),
+    __metadata("design:paramtypes", [])
+], HTabPanel);
+
+export { HTabPanel };
+//# sourceMappingURL=tab_panel.js.map

package/build/{cjs/packages/utilities/build/esm/json_utils.js.map → esm/packages/phoenix/src/components/tabs/tab_panel.js.map}

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

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

@@ -0,0 +1,16 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
+export declare class HTabs extends PhoenixLightLitElement {
+    private _$selectedTab;
+    private _$tabs;
+    connectedCallback(): void;
+    private _handleArrowNavigation;
+    private _getFocusedTabIndex;
+    private _getNextTabIndex;
+    private _getPrevTabIndex;
+    private _setupEvents;
+    private _handleTabSelected;
+    allChildrenRendered(): void;
+    private _hideNotSelectedAndVisiblePanels;
+    switchPanel(newPanelName: string): void;
+    private _dispatchChangedEvent;
+}

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

@@ -0,0 +1,106 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { state } from 'lit/decorators';
+import { UiDomUtils } from '@dreamcommerce/utilities';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { KeystrokesController } from '../../controllers/keystrokes_controller/keystrokes_controller.js';
+import { TAB_EVENT_NAMES } from './tab/tab_constants.js';
+import { HTab } from './tab/tab.js';
+import { TABS_EVENT_NAMES } from './tabs_constants.js';
+
+let HTabs = class HTabs extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._handleArrowNavigation = ({ key }) => {
+            const currentTabIndex = this._getFocusedTabIndex();
+            if (currentTabIndex === undefined)
+                return;
+            const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
+            if (newTabIndex === undefined)
+                return;
+            UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
+            UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
+            this._$tabs[newTabIndex].focus();
+        };
+        this._handleTabSelected = (event) => {
+            const $newlySelectedTab = event.detail.$el;
+            this.switchPanel($newlySelectedTab.panelName);
+            if (this._$selectedTab)
+                this._$selectedTab.selected = false;
+            $newlySelectedTab.selected = true;
+            this._dispatchChangedEvent(this._$selectedTab, $newlySelectedTab);
+            this._$selectedTab = $newlySelectedTab;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+        this.setAttribute('role', 'tablist');
+        this._$tabs = [...this.querySelectorAll('h-tab')];
+        new KeystrokesController({
+            host: this,
+            keys: ['ArrowRight', 'ArrowLeft'],
+            callback: this._handleArrowNavigation
+        });
+    }
+    _getFocusedTabIndex() {
+        const focusedElement = document.activeElement;
+        if ((focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.tagName) !== 'H-TAB')
+            return;
+        return this._$tabs.findIndex(($tab) => $tab === focusedElement);
+    }
+    _getNextTabIndex(currentTabIndex) {
+        if (currentTabIndex >= this._$tabs.length - 1)
+            return;
+        return currentTabIndex + 1;
+    }
+    _getPrevTabIndex(currentTabIndex) {
+        if (currentTabIndex <= 0)
+            return;
+        return currentTabIndex - 1;
+    }
+    _setupEvents() {
+        this.addEventListener(TAB_EVENT_NAMES.selected, this._handleTabSelected);
+    }
+    allChildrenRendered() {
+        const $selectedTab = this.querySelector('h-tab[selected]');
+        this._hideNotSelectedAndVisiblePanels();
+        if (!$selectedTab)
+            return;
+        this._$selectedTab = $selectedTab;
+        this.switchPanel(this._$selectedTab.panelName);
+    }
+    _hideNotSelectedAndVisiblePanels() {
+        const $notSelectedTabs = [...this.querySelectorAll('h-tab:not([selected])')];
+        $notSelectedTabs
+            .map(($tab) => $tab.panelName)
+            .forEach((panelName) => document.querySelectorAll(`[name="${panelName}"]`).forEach(($panel) => $panel.hide()));
+    }
+    switchPanel(newPanelName) {
+        const $currentPanel = this._$selectedTab && document.querySelectorAll(`[name="${this._$selectedTab.panelName}"]`);
+        const $newPanel = document.querySelectorAll(`[name="${newPanelName}"]`);
+        if ($currentPanel)
+            $currentPanel.forEach(($panel) => $panel.hide());
+        if ($newPanel)
+            $newPanel.forEach(($panel) => $panel.show());
+    }
+    _dispatchChangedEvent($previousTab, $newTab) {
+        this.dispatchEvent(new CustomEvent(TABS_EVENT_NAMES.changed, {
+            detail: {
+                $previousTab,
+                $newTab
+            },
+            bubbles: true
+        }));
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", HTab)
+], HTabs.prototype, "_$selectedTab", void 0);
+HTabs = __decorate([
+    phoenixCustomElement('h-tabs')
+], HTabs);
+
+export { HTabs };
+//# sourceMappingURL=tabs.js.map

package/build/esm/packages/phoenix/src/components/tabs/tabs.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;"}

package/build/esm/packages/phoenix/src/components/tabs/tabs_constants.d.ts

@@ -0,0 +1,3 @@
+export declare const TABS_EVENT_NAMES: {
+    readonly changed: "changed";
+};

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

@@ -0,0 +1,6 @@
+const TABS_EVENT_NAMES = {
+    changed: 'changed'
+};
+
+export { TABS_EVENT_NAMES };
+//# sourceMappingURL=tabs_constants.js.map

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

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

package/build/esm/packages/phoenix/src/components/tabs/tabs_types.d.ts

@@ -0,0 +1,4 @@
+import { HTab } from "./tab/tab";
+export declare type TTabSelectedEvent = CustomEvent<{
+    $el: HTab;
+}>;

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

@@ -0,0 +1,2 @@
+import '@phoenixRoot/components/tabs/tab/tab';
+//# sourceMappingURL=tabs_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs_types.js","sourceRoot":"","sources":["../../../../../../../src/components/tabs/tabs_types.ts"],"names":[],"mappings":"AAAA,OAAqB,sCAAsC,CAAC"}

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;
 }