@shoper/phoenix_design_system 0.19.3-2 → 0.19.3-4

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
-var json_utils = require('../../../../utilities/build/esm/json_utils.js');
+var utilities = require('@dreamcommerce/utilities');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var splide_esm = require('../../../../../external/@splidejs/splide/dist/js/splide.esm.js');
@@ -25,7 +25,7 @@ exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLi
     connectedCallback() {
         var _a;
         if (this.settings) {
-            this._settings = (_a = json_utils.JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
+            this._settings = (_a = utilities.JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
         }
         this._slider = new splide_esm.Splide(`#${this.id}`, this._settings);
         if (this._settings.mountOnConnectedCallback) {

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

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
-var ui_dom_utils = require('../../../../../utilities/build/esm/ui_dom_utils.js');
 var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
 var btn_controller = require('../../../controllers/btn_controller.js');
 var tab_constants = require('./tab_constants.js');
+var ui_dom_utils = require('../../../../../utilities/build/esm/ui_dom_utils.js');
 
-exports.Tab = class Tab extends phoenix_light_lit_element.PhoenixLightLitElement {
+exports.HTab = class HTab extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this._handleTabClicked = () => {
@@ -49,7 +49,7 @@ exports.Tab = class Tab extends phoenix_light_lit_element.PhoenixLightLitElement
         this._btnController = new btn_controller.BtnController(this, this._dispatchSelectedEvent);
         this._setupAttributes();
         this._bindEvents();
-        this.tabIndex = this.selected ? 0 : -1;
+        this.selected ? ui_dom_utils.UiDomUtils.makeNavigable(this) : ui_dom_utils.UiDomUtils.makeUnnavigable(this);
     }
     _setupAttributes() {
         this.setAttribute('role', 'tab');
@@ -63,12 +63,12 @@ exports.Tab = class Tab extends phoenix_light_lit_element.PhoenixLightLitElement
 tslib_es6.__decorate([
     decorators.property({ type: String, reflect: true, attribute: 'panel-name' }),
     tslib_es6.__metadata("design:type", String)
-], exports.Tab.prototype, "panelName", void 0);
+], exports.HTab.prototype, "panelName", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Boolean, reflect: true }),
     tslib_es6.__metadata("design:type", Boolean)
-], exports.Tab.prototype, "disabled", void 0);
-exports.Tab = tslib_es6.__decorate([
+], exports.HTab.prototype, "disabled", void 0);
+exports.HTab = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-tab')
-], exports.Tab);
+], exports.HTab);
 //# sourceMappingURL=tab.js.map

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

@@ -8,7 +8,7 @@ var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/ph
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var visibility_controller = require('../../controllers/visibility_controller/visibility_controller.js');
 
-exports.TabPanel = class TabPanel extends phoenix_light_lit_element.PhoenixLightLitElement {
+exports.HTabPanel = class HTabPanel extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super();
         this.hidden = true;
@@ -24,13 +24,13 @@ exports.TabPanel = class TabPanel extends phoenix_light_lit_element.PhoenixLight
 tslib_es6.__decorate([
     decorators.property({ type: String, reflect: true }),
     tslib_es6.__metadata("design:type", String)
-], exports.TabPanel.prototype, "name", void 0);
+], exports.HTabPanel.prototype, "name", void 0);
 tslib_es6.__decorate([
     decorators.property({ type: Boolean, reflect: true }),
     tslib_es6.__metadata("design:type", Object)
-], exports.TabPanel.prototype, "hidden", void 0);
-exports.TabPanel = tslib_es6.__decorate([
+], exports.HTabPanel.prototype, "hidden", void 0);
+exports.HTabPanel = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-tab-panel'),
     tslib_es6.__metadata("design:paramtypes", [])
-], exports.TabPanel);
+], exports.HTabPanel);
 //# sourceMappingURL=tab_panel.js.map

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

@@ -2,18 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var phoenix_light_lit_elements_constants = require('../../core/phoenix_light_lit_element/phoenix_light_lit_elements_constants.js');
 var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
 var decorators = require('lit/decorators');
-var ui_dom_utils = require('../../../../utilities/build/esm/ui_dom_utils.js');
 var phoenix_light_lit_element = require('../../core/phoenix_light_lit_element/phoenix_light_lit_element.js');
 var phoenix_custom_element = require('../../core/decorators/phoenix_custom_element.js');
 var keystrokes_controller = require('../../controllers/keystrokes_controller/keystrokes_controller.js');
 var tab_constants = require('./tab/tab_constants.js');
+var ui_dom_utils = require('../../../../utilities/build/esm/ui_dom_utils.js');
 var tab = require('./tab/tab.js');
 var tabs_constants = require('./tabs_constants.js');
 
-exports.Tabs = class Tabs extends phoenix_light_lit_element.PhoenixLightLitElement {
+exports.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this._handleArrowNavigation = ({ key }) => {
@@ -36,13 +35,6 @@ exports.Tabs = class Tabs extends phoenix_light_lit_element.PhoenixLightLitEleme
             this._dispatchChangedEvent(this._$selectedTab, $newlySelectedTab);
             this._$selectedTab = $newlySelectedTab;
         };
-        this._handleTabConnected = (event) => {
-            const $connectedTab = event.detail.$el;
-            if (!$connectedTab.selected)
-                return;
-            this._$selectedTab = event.detail.$el;
-            this.switchPanel(this._$selectedTab.panelName);
-        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -73,7 +65,21 @@ exports.Tabs = class Tabs extends phoenix_light_lit_element.PhoenixLightLitEleme
     }
     _setupEvents() {
         this.addEventListener(tab_constants.TAB_EVENT_NAMES.selected, this._handleTabSelected);
-        this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleTabConnected);
+        // this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleTabConnected);
+    }
+    // private _handleTabConnected = (event: TTabConnectedEvent): void => {
+    //     const $connectedTab = event.detail.$el;
+    //
+    //     if (!$connectedTab.selected) return;
+    //
+    //     this._$selectedTab = event.detail.$el;
+    //     this.switchPanel(this._$selectedTab.panelName);
+    // };
+    allChildrenConnected() {
+        const $selectedTab = this.querySelector('h-tab[selected]');
+        if ($selectedTab)
+            this._$selectedTab = $selectedTab;
+        this.switchPanel(this._$selectedTab.panelName);
     }
     switchPanel(newPanelName) {
         const $currentPanel = document.querySelectorAll(`[name="${this._$selectedTab.panelName}"]`);
@@ -95,9 +101,9 @@ exports.Tabs = class Tabs extends phoenix_light_lit_element.PhoenixLightLitEleme
 };
 tslib_es6.__decorate([
     decorators.state(),
-    tslib_es6.__metadata("design:type", tab.Tab)
-], exports.Tabs.prototype, "_$selectedTab", void 0);
-exports.Tabs = tslib_es6.__decorate([
+    tslib_es6.__metadata("design:type", tab.HTab)
+], exports.HTabs.prototype, "_$selectedTab", void 0);
+exports.HTabs = tslib_es6.__decorate([
     phoenix_custom_element.phoenixCustomElement('h-tabs')
-], exports.Tabs);
+], exports.HTabs);
 //# sourceMappingURL=tabs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js

@@ -32,6 +32,8 @@ class PhoenixLightLitElement extends lit.LitElement {
     }
     _setupChildrenWatch() {
         this.childrenToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesToWatch();
+        if (!this.childrenToWatch.length)
+            this.allChildrenConnected();
         this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
     }
     _getComponentsNamesToWatch() {
@@ -45,6 +47,7 @@ class PhoenixLightLitElement extends lit.LitElement {
             },
             bubbles: true
         }));
+        this.isWebComponentConnected = true;
         this._setupChildrenWatch();
     }
     allChildrenConnected() { }

package/build/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element_utils.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var web_components_utils = require('../../../../utilities/build/esm/web_components_utils.js');
+var utilities = require('@dreamcommerce/utilities');
 
 class PhoenixLightLitElementUtils {
     static getComponentsForWhichToWaitForConnection(components) {
-        return components.filter(($element) => (web_components_utils.WebComponentsUtils.isWebComponent($element) && !web_components_utils.WebComponentsUtils.isWebComponentDefined($element)) ||
-            (web_components_utils.WebComponentsUtils.isWebComponent($element) &&
-                web_components_utils.WebComponentsUtils.isWebComponentDefined($element) &&
+        return components.filter(($element) => (utilities.WebComponentsUtils.isWebComponent($element) && !utilities.WebComponentsUtils.isWebComponentDefined($element)) ||
+            (utilities.WebComponentsUtils.isWebComponent($element) &&
+                utilities.WebComponentsUtils.isWebComponentDefined($element) &&
                 !$element.isWebComponentConnected));
     }
 }

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

@@ -348,23 +348,23 @@ Object.defineProperty(exports, 'HSlider', {
 		return slider.HSlider;
 	}
 });
-Object.defineProperty(exports, 'Tab', {
+Object.defineProperty(exports, 'HTab', {
 	enumerable: true,
 	get: function () {
-		return tab.Tab;
+		return tab.HTab;
 	}
 });
-Object.defineProperty(exports, 'TabPanel', {
+Object.defineProperty(exports, 'HTabPanel', {
 	enumerable: true,
 	get: function () {
-		return tab_panel.TabPanel;
+		return tab_panel.HTabPanel;
 	}
 });
 exports.TABS_EVENT_NAMES = tabs_constants.TABS_EVENT_NAMES;
-Object.defineProperty(exports, 'Tabs', {
+Object.defineProperty(exports, 'HTabs', {
 	enumerable: true,
 	get: function () {
-		return tabs.Tabs;
+		return tabs.HTabs;
 	}
 });
 //# sourceMappingURL=index.js.map

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

@@ -1,5 +1,5 @@
 import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-export declare class Tab extends PhoenixLightLitElement {
+export declare class HTab extends PhoenixLightLitElement {
     panelName: string;
     get selected(): boolean;
     disabled: boolean;

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

@@ -1,12 +1,12 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { UiDomUtils } from '../../../../../utilities/build/esm/ui_dom_utils.js';
 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';
+import { UiDomUtils } from '../../../../../utilities/build/esm/ui_dom_utils.js';
 
-let Tab = class Tab extends PhoenixLightLitElement {
+let HTab = class HTab extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this._handleTabClicked = () => {
@@ -45,7 +45,7 @@ let Tab = class Tab extends PhoenixLightLitElement {
         this._btnController = new BtnController(this, this._dispatchSelectedEvent);
         this._setupAttributes();
         this._bindEvents();
-        this.tabIndex = this.selected ? 0 : -1;
+        this.selected ? UiDomUtils.makeNavigable(this) : UiDomUtils.makeUnnavigable(this);
     }
     _setupAttributes() {
         this.setAttribute('role', 'tab');
@@ -59,14 +59,14 @@ let Tab = class Tab extends PhoenixLightLitElement {
 __decorate([
     property({ type: String, reflect: true, attribute: 'panel-name' }),
     __metadata("design:type", String)
-], Tab.prototype, "panelName", void 0);
+], HTab.prototype, "panelName", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
-], Tab.prototype, "disabled", void 0);
-Tab = __decorate([
+], HTab.prototype, "disabled", void 0);
+HTab = __decorate([
     phoenixCustomElement('h-tab')
-], Tab);
+], HTab);
 
-export { Tab };
+export { HTab };
 //# sourceMappingURL=tab.js.map

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

@@ -1,5 +1,5 @@
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-export declare class TabPanel extends PhoenixLightLitElement {
+export declare class HTabPanel extends PhoenixLightLitElement {
     name: string;
     hidden: boolean;
     private _visibilityController;

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

@@ -4,7 +4,7 @@ import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/pho
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { VisibilityController } from '../../controllers/visibility_controller/visibility_controller.js';
 
-let TabPanel = class TabPanel extends PhoenixLightLitElement {
+let HTabPanel = class HTabPanel extends PhoenixLightLitElement {
     constructor() {
         super();
         this.hidden = true;
@@ -20,15 +20,15 @@ let TabPanel = class TabPanel extends PhoenixLightLitElement {
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
-], TabPanel.prototype, "name", void 0);
+], HTabPanel.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Object)
-], TabPanel.prototype, "hidden", void 0);
-TabPanel = __decorate([
+], HTabPanel.prototype, "hidden", void 0);
+HTabPanel = __decorate([
     phoenixCustomElement('h-tab-panel'),
     __metadata("design:paramtypes", [])
-], TabPanel);
+], HTabPanel);
 
-export { TabPanel };
+export { HTabPanel };
 //# sourceMappingURL=tab_panel.js.map

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

@@ -1,5 +1,5 @@
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
-export declare class Tabs extends PhoenixLightLitElement {
+export declare class HTabs extends PhoenixLightLitElement {
     private _$selectedTab;
     private _$tabs;
     connectedCallback(): void;
@@ -9,7 +9,7 @@ export declare class Tabs extends PhoenixLightLitElement {
     private _getPrevTabIndex;
     private _setupEvents;
     private _handleTabSelected;
-    private _handleTabConnected;
+    allChildrenConnected(): void;
     switchPanel(newPanelName: string): void;
     private _dispatchChangedEvent;
 }

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

@@ -1,15 +1,14 @@
-import { PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES } from '../../core/phoenix_light_lit_element/phoenix_light_lit_elements_constants.js';
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { state } from 'lit/decorators';
-import { UiDomUtils } from '../../../../utilities/build/esm/ui_dom_utils.js';
 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 { Tab } from './tab/tab.js';
+import { UiDomUtils } from '../../../../utilities/build/esm/ui_dom_utils.js';
+import { HTab } from './tab/tab.js';
 import { TABS_EVENT_NAMES } from './tabs_constants.js';
 
-let Tabs = class Tabs extends PhoenixLightLitElement {
+let HTabs = class HTabs extends PhoenixLightLitElement {
     constructor() {
         super(...arguments);
         this._handleArrowNavigation = ({ key }) => {
@@ -32,13 +31,6 @@ let Tabs = class Tabs extends PhoenixLightLitElement {
             this._dispatchChangedEvent(this._$selectedTab, $newlySelectedTab);
             this._$selectedTab = $newlySelectedTab;
         };
-        this._handleTabConnected = (event) => {
-            const $connectedTab = event.detail.$el;
-            if (!$connectedTab.selected)
-                return;
-            this._$selectedTab = event.detail.$el;
-            this.switchPanel(this._$selectedTab.panelName);
-        };
     }
     connectedCallback() {
         super.connectedCallback();
@@ -69,7 +61,21 @@ let Tabs = class Tabs extends PhoenixLightLitElement {
     }
     _setupEvents() {
         this.addEventListener(TAB_EVENT_NAMES.selected, this._handleTabSelected);
-        this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleTabConnected);
+        // this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleTabConnected);
+    }
+    // private _handleTabConnected = (event: TTabConnectedEvent): void => {
+    //     const $connectedTab = event.detail.$el;
+    //
+    //     if (!$connectedTab.selected) return;
+    //
+    //     this._$selectedTab = event.detail.$el;
+    //     this.switchPanel(this._$selectedTab.panelName);
+    // };
+    allChildrenConnected() {
+        const $selectedTab = this.querySelector('h-tab[selected]');
+        if ($selectedTab)
+            this._$selectedTab = $selectedTab;
+        this.switchPanel(this._$selectedTab.panelName);
     }
     switchPanel(newPanelName) {
         const $currentPanel = document.querySelectorAll(`[name="${this._$selectedTab.panelName}"]`);
@@ -91,11 +97,11 @@ let Tabs = class Tabs extends PhoenixLightLitElement {
 };
 __decorate([
     state(),
-    __metadata("design:type", Tab)
-], Tabs.prototype, "_$selectedTab", void 0);
-Tabs = __decorate([
+    __metadata("design:type", HTab)
+], HTabs.prototype, "_$selectedTab", void 0);
+HTabs = __decorate([
     phoenixCustomElement('h-tabs')
-], Tabs);
+], HTabs);
 
-export { Tabs };
+export { HTabs };
 //# sourceMappingURL=tabs.js.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"tabs_types.js","sourceRoot":"","sources":["../../../../../../../src/components/tabs/tabs_types.ts"],"names":[],"mappings":"AAAA,OAAoB,sCAAsC,CAAC"}
+{"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/core/phoenix_light_lit_element/phoenix_light_lit_element.js

@@ -28,6 +28,8 @@ class PhoenixLightLitElement extends LitElement {
     }
     _setupChildrenWatch() {
         this.childrenToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesToWatch();
+        if (!this.childrenToWatch.length)
+            this.allChildrenConnected();
         this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
     }
     _getComponentsNamesToWatch() {
@@ -41,6 +43,7 @@ class PhoenixLightLitElement extends LitElement {
             },
             bubbles: true
         }));
+        this.isWebComponentConnected = true;
         this._setupChildrenWatch();
     }
     allChildrenConnected() { }

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element.js.map

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

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element_utils.js

@@ -1,4 +1,4 @@
-import { WebComponentsUtils } from '../../../../utilities/build/esm/web_components_utils.js';
+import { WebComponentsUtils } from '@dreamcommerce/utilities';
 
 class PhoenixLightLitElementUtils {
     static getComponentsForWhichToWaitForConnection(components) {

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

@@ -69,7 +69,7 @@ export { VisibilityController } from './controllers/visibility_controller/visibi
 export * from './controllers/visibility_controller/visibility_controller_types';
 export { HSlider } from './components/slider/slider';
 export * from './components/slider/slider_types';
-export { Tabs } from './components/tabs/tabs';
-export { Tab } from './components/tabs/tab/tab';
-export { TabPanel } from './components/tabs/tab_panel';
+export { HTabs } from './components/tabs/tabs';
+export { HTab } from './components/tabs/tab/tab';
+export { HTabPanel } from './components/tabs/tab_panel';
 export { TABS_EVENT_NAMES } from './components/tabs/tabs_constants';

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

@@ -58,8 +58,8 @@ export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_c
 export { HBackdrop } from './components/backdrop/backdrop.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';
 export { HSlider } from './components/slider/slider.js';
-export { Tab } from './components/tabs/tab/tab.js';
-export { TabPanel } from './components/tabs/tab_panel.js';
+export { HTab } from './components/tabs/tab/tab.js';
+export { HTabPanel } from './components/tabs/tab_panel.js';
 export { TABS_EVENT_NAMES } from './components/tabs/tabs_constants.js';
-export { Tabs } from './components/tabs/tabs.js';
+export { HTabs } from './components/tabs/tabs.js';
 //# sourceMappingURL=index.js.map

package/package.json

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

package/build/cjs/packages/utilities/build/esm/json_utils.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-class JsonUtils {
-    static toJson(value) {
-        try {
-            return JSON.stringify(value);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-    static fromJson(value) {
-        try {
-            return JSON.parse(value);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-}
-
-exports.JsonUtils = JsonUtils;
-//# sourceMappingURL=json_utils.js.map

package/build/cjs/packages/utilities/build/esm/json_utils.js.map

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

package/build/cjs/packages/utilities/build/esm/web_components_utils.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-class WebComponentsUtils {
-    static isWebComponentDefined($element) {
-        if (!this.isWebComponent($element))
-            return false;
-        const customElementClass = window.customElements.get($element.tagName.toLowerCase());
-        return !!customElementClass && $element instanceof customElementClass;
-    }
-    static isWebComponent($element) {
-        return $element.tagName.includes('-');
-    }
-}
-
-exports.WebComponentsUtils = WebComponentsUtils;
-//# sourceMappingURL=web_components_utils.js.map

package/build/cjs/packages/utilities/build/esm/web_components_utils.js.map

@@ -1 +0,0 @@
-{"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/utilities/build/esm/json_utils.js

@@ -1,21 +0,0 @@
-class JsonUtils {
-    static toJson(value) {
-        try {
-            return JSON.stringify(value);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-    static fromJson(value) {
-        try {
-            return JSON.parse(value);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }
-}
-
-export { JsonUtils };
-//# sourceMappingURL=json_utils.js.map

package/build/esm/packages/utilities/build/esm/json_utils.js.map

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

package/build/esm/packages/utilities/build/esm/web_components_utils.js

@@ -1,14 +0,0 @@
-class WebComponentsUtils {
-    static isWebComponentDefined($element) {
-        if (!this.isWebComponent($element))
-            return false;
-        const customElementClass = window.customElements.get($element.tagName.toLowerCase());
-        return !!customElementClass && $element instanceof customElementClass;
-    }
-    static isWebComponent($element) {
-        return $element.tagName.includes('-');
-    }
-}
-
-export { WebComponentsUtils };
-//# sourceMappingURL=web_components_utils.js.map

package/build/esm/packages/utilities/build/esm/web_components_utils.js.map

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