npm - @shoper/phoenix_design_system - Versions diffs - 0.19.3-1 → 0.19.3-2 - Mend

@shoper/phoenix_design_system 0.19.3-1 → 0.19.3-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

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

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

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

@@ -0,0 +1 @@

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

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

@@ -0,0 +1,12 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const TAB_EVENT_NAMES = {
+    selected: 'selected'
+};
+const TAB_SELECTED_ATTRIBUTE_NAME = 'selected';
+exports.TAB_EVENT_NAMES = TAB_EVENT_NAMES;
+exports.TAB_SELECTED_ATTRIBUTE_NAME = TAB_SELECTED_ATTRIBUTE_NAME;
+//# sourceMappingURL=tab_constants.js.map

package/build/cjs/packages/phoenix/src/components/tabs/tab/tab_constants.js.map ADDED Viewed

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

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

@@ -0,0 +1,36 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+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 visibility_controller = require('../../controllers/visibility_controller/visibility_controller.js');
+exports.TabPanel = class TabPanel extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.hidden = true;
+        this._visibilityController = new visibility_controller.VisibilityController(this);
+    }
+    show() {
+        this._visibilityController.show();
+    }
+    hide() {
+        this._visibilityController.hide();
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.TabPanel.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([
+    phoenix_custom_element.phoenixCustomElement('h-tab-panel'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.TabPanel);
+//# sourceMappingURL=tab_panel.js.map

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

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

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

@@ -0,0 +1,103 @@
+'use strict';
+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 tab = require('./tab/tab.js');
+var tabs_constants = require('./tabs_constants.js');
+exports.Tabs = class Tabs extends phoenix_light_lit_element.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;
+            ui_dom_utils.UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
+            ui_dom_utils.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;
+        };
+        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();
+        this._setupEvents();
+        this.setAttribute('role', 'tablist');
+        this._$tabs = [...this.querySelectorAll('h-tab')];
+        new keystrokes_controller.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_constants.TAB_EVENT_NAMES.selected, this._handleTabSelected);
+        this.addEventListener(phoenix_light_lit_elements_constants.PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleTabConnected);
+    }
+    switchPanel(newPanelName) {
+        const $currentPanel = 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_constants.TABS_EVENT_NAMES.changed, {
+            detail: {
+                $previousTab,
+                $newTab
+            },
+            bubbles: true
+        }));
+    }
+};
+tslib_es6.__decorate([
+    decorators.state(),
+    tslib_es6.__metadata("design:type", tab.Tab)
+], exports.Tabs.prototype, "_$selectedTab", void 0);
+exports.Tabs = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-tabs')
+], exports.Tabs);
+//# sourceMappingURL=tabs.js.map

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

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

package/build/cjs/packages/phoenix/src/components/tabs/tabs_constants.js ADDED Viewed

@@ -0,0 +1,10 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const TABS_EVENT_NAMES = {
+    changed: 'changed'
+};
+exports.TABS_EVENT_NAMES = TABS_EVENT_NAMES;
+//# sourceMappingURL=tabs_constants.js.map

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

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

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

@@ -62,6 +62,10 @@ var click_outside_controller_messages = require('./controllers/click_outside_con
 var backdrop = require('./components/backdrop/backdrop.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
 var slider = require('./components/slider/slider.js');
+var tab = require('./components/tabs/tab/tab.js');
+var tab_panel = require('./components/tabs/tab_panel.js');
+var tabs_constants = require('./components/tabs/tabs_constants.js');
+var tabs = require('./components/tabs/tabs.js');
@@ -344,4 +348,23 @@ Object.defineProperty(exports, 'HSlider', {
 		return slider.HSlider;
 	}
 });
+Object.defineProperty(exports, 'Tab', {
+	enumerable: true,
+	get: function () {
+		return tab.Tab;
+	}
+});
+Object.defineProperty(exports, 'TabPanel', {
+	enumerable: true,
+	get: function () {
+		return tab_panel.TabPanel;
+	}
+});
+exports.TABS_EVENT_NAMES = tabs_constants.TABS_EVENT_NAMES;
+Object.defineProperty(exports, 'Tabs', {
+	enumerable: true,
+	get: function () {
+		return tabs.Tabs;
+	}
+});
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/phoenix/src/index.js.map CHANGED Viewed

	@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/utilities/build/esm/ui_dom_utils.js ADDED Viewed

@@ -0,0 +1,24 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+class UiDomUtils {
+    static show($el) {
+        $el.removeAttribute('hidden');
+    }
+    static hide($el) {
+        $el.setAttribute('hidden', '');
+    }
+    static empty($el) {
+        $el.innerHTML = '';
+    }
+    static makeUnnavigable($el) {
+        $el.setAttribute('tabindex', '-1');
+    }
+    static makeNavigable($el) {
+        $el.setAttribute('tabindex', '0');
+    }
+}
+exports.UiDomUtils = UiDomUtils;
+//# sourceMappingURL=ui_dom_utils.js.map

package/build/cjs/packages/utilities/build/esm/ui_dom_utils.js.map ADDED Viewed

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

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

@@ -1,70 +1,72 @@
-import { __decorate, __metadata } from "tslib";
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import { BtnController } from '@phoenixRoot/controllers/btn_controller';
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { TAB_EVENT_NAMES, TAB_SELECTED_ATTRIBUTE_NAME } from '@phoenixRoot/components/tabs/tab/tab_constants';
-import { UiDomUtils } from '@dreamcommerce/utilities/build/esm/ui_dom_utils';
-let Tab = class Tab 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._dispatchSelectedEvent);
-        this._setupAttributes();
-        this._bindEvents();
-        this.tabIndex = this.selected ? 0 : -1;
-    }
-    _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)
-], Tab.prototype, "panelName", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Boolean)
-], Tab.prototype, "disabled", void 0);
-Tab = __decorate([
-    phoenixCustomElement('h-tab')
+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';
+let Tab = class Tab 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._dispatchSelectedEvent);
+        this._setupAttributes();
+        this._bindEvents();
+        this.tabIndex = this.selected ? 0 : -1;
+    }
+    _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)
+], Tab.prototype, "panelName", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], Tab.prototype, "disabled", void 0);
+Tab = __decorate([
+    phoenixCustomElement('h-tab')
 ], Tab);
 export { Tab };
-//# sourceMappingURL=tab.js.map
+//# sourceMappingURL=tab.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":~~"tab.js"~~,"~~sourceRoot~~":"","~~sources~~":[~~"../../../../../../../../src/components/tabs/tab/tab.ts"~~],"names":[],"mappings":";AAAA,~~OAAO,EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC~~;~~AAC3F,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC~~;~~AAC/G,OAAO,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC~~;~~AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC~~;~~AAC1C,OAAO,EAAE,eAAe,EAAE,2BAA2B,EAAE,MAAM,gDAAgD,CAAC~~;~~AAC9G,OAAO,EAAE,UAAU,EAAE,MAAM,iDAAiD,CAAC~~;~~AAG7E,IAAa,GAAG,GAAhB,MAAa,GAAI,SAAQ,sBAAsB~~;~~IAA/C;;QAsDY,sBAAiB,GAAG,GAAS,EAAE~~;~~YACnC,IAAI,IAAI,CAAC,QAAQ~~;~~gBAAE,OAAO~~;~~YAE1B,IAAI,CAAC,sBAAsB,EAAE,CAAC~~;~~QAClC,CAAC,CAAC~~;~~QAEK,2BAAsB,GAAG,GAAS,EAAE~~;~~YACvC,IAAI,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,eAAe,CAAC,QAAQ,EAAE~~;~~gBACtC,MAAM,EAAE~~;~~oBACJ,GAAG,EAAE,IAAI~~;~~iBACZ~~;~~gBACD,OAAO,EAAE,IAAI~~;~~aAChB,CAAC,CACL,CAAC~~;~~QACN,CAAC,CAAC~~;~~IACN,CAAC~~;~~IAlEG,IAAW,QAAQ~~;~~QACf,OAAO,IAAI,CAAC,YAAY,CAAC,2BAA2B,CAAC,CAAC~~;~~IAC1D,CAAC~~;~~IAKD,IAAW,QAAQ,CAAC,QAAiB~~;~~QACjC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,2BAA2B,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,2BAA2B,CAAC,CAAC~~;~~QAElH,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC~~;~~QAErD,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC~~;~~IACjF,CAAC~~;~~IAIM,wBAAwB,CAAC,IAAY,EAAE,KAAoB,EAAE,QAAuB~~;~~QACvF,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC~~;~~QAEtD,QAAQ,IAAI,EAAE~~;~~YACV,KAAK,2BAA2B,CAAC,CAAC~~;~~gBAC9B,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC~~;~~gBAElC,MAAM~~;~~aACT~~;~~SACJ~~;~~IACL,CAAC~~;~~IAEM,iBAAiB~~;~~QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC~~;~~QAE1B,IAAI,CAAC,cAAc,GAAG,IAAI,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC~~;~~QAE3E,IAAI,CAAC,gBAAgB,EAAE,CAAC~~;~~QACxB,IAAI,CAAC,WAAW,EAAE,CAAC~~;~~QAEnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC~~;~~IAC3C,CAAC~~;~~IAEO,gBAAgB~~;~~QACpB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC~~;~~QACjC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC~~;~~QACnD,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC~~;~~IAC9D,CAAC~~;~~IAEO,WAAW~~;~~QACf,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC~~;~~IAC3D,CAAC~~;~~CAkBJ,CAAA~~;~~AApEG~~;~~IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;;sCAC1C~~;~~AAOzB~~;~~IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;qCAClB~~;~~AAThB,GAAG~~;~~IADf,oBAAoB,CAAC,OAAO,CAAC~~;~~GACjB,GAAG,CAsEf~~;~~SAtEY,GAAG~~"}
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.js CHANGED Viewed

@@ -1,5 +1,7 @@
-export const TAB_EVENT_NAMES = {
-    selected: 'selected'
-};
-export const TAB_SELECTED_ATTRIBUTE_NAME = 'selected';
-//# sourceMappingURL=tab_constants.js.map
+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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":~~"tab_constants.js"~~,"~~sourceRoot~~":"","~~sources~~":[~~"../../../../../../../../src/components/tabs/tab/tab_constants.ts"~~],"names":[],"mappings":"AAAA~~,MAAM,CAAC,MAAM,eAAe,GAAG~~;~~IAC3B,QAAQ,EAAE,UAAU~~;~~CACd,CAAC~~;~~AAEX,MAAM,CAAC,MAAM,2BAA2B,GAAG,UAAU,CAAC~~"}
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.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":~~"tab_panel.js"~~,"~~sourceRoot~~":"","~~sources~~":[~~"../../../../../../../src/components/tabs/tab_panel.ts"~~],"names":[],"mappings":";AAAA,~~OAAO~~,~~EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC~~;~~AAC3F,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC~~;~~AAC/G,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC~~;~~AAC1C,OAAsC,4EAA4E,CAAC~~;~~AACnH,OAAO,EAAE,oBAAoB,EAAE,MAAM,sEAAsE,CAAC~~;~~AAG5G,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,sBAAsB~~;~~IAShD~~;~~QACI,KAAK,EAAE,CAAC~~;~~QALL,WAAM,GAAG,IAAI,CAAC~~;~~QAOjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,CAAC~~;~~IAChE,CAAC~~;~~IAEM,IAAI~~;~~QACP,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC~~;~~IACtC,CAAC~~;~~IAEM,IAAI~~;~~QACP,IAAI,CAAC,qBAAqB,CAAC,IAAI,EAAE,CAAC~~;~~IACtC,CAAC~~;~~CACJ,CAAA~~;~~AApBG~~;~~IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;sCAC7B~~;~~AAGb~~;~~IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;wCACtB~~;~~AALZ,QAAQ~~;~~IADpB,oBAAoB,CAAC,aAAa,CAAC;;GACvB,QAAQ,CAsBpB~~;~~SAtBY,QAAQ~~"}
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;"}

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

@@ -1,103 +1,101 @@
-import { __decorate, __metadata } from "tslib";
-import { PhoenixLightLitElement } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_element';
-import { phoenixCustomElement } from '@phoenixRoot/core/decorators/phoenix_custom_element';
-import { Tab } from '@phoenixRoot/components/tabs/tab/tab';
+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 '@phoenixRoot/components/tabs/tab_panel';
-import { PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES } from '@phoenixRoot/core/phoenix_light_lit_element/phoenix_light_lit_elements_constants';
-import { TABS_EVENT_NAMES } from '@phoenixRoot/components/tabs/tabs_constants';
-import { TAB_EVENT_NAMES } from '@phoenixRoot/components/tabs/tab/tab_constants';
-import '@phoenixRoot/components/tabs/tabs_types';
-import { KeystrokesController } from '@phoenixRoot/controllers/keystrokes_controller/keystrokes_controller';
-import { UiDomUtils } from '@dreamcommerce/utilities/build/esm/ui_dom_utils';
-let Tabs = class Tabs extends PhoenixLightLitElement {
-    constructor() {
-        super(...arguments);
-        this._handleArrowNavigation = ({ key }) => {
-            const currentTabIndex = this._getFocusedTabIndex();
-            // console.log('currentTabIndex ', currentTabIndex, ' key', key);
-            if (currentTabIndex === undefined)
-                return;
-            const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
-            // console.log('newTabIndex ', newTabIndex);
-            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;
-        };
-        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();
-        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);
-        this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleTabConnected);
-    }
-    switchPanel(newPanelName) {
-        const $currentPanel = 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", Tab)
-], Tabs.prototype, "_$selectedTab", void 0);
-Tabs = __decorate([
-    phoenixCustomElement('h-tabs')
+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 { TABS_EVENT_NAMES } from './tabs_constants.js';
+let Tabs = class Tabs 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;
+        };
+        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();
+        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);
+        this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleTabConnected);
+    }
+    switchPanel(newPanelName) {
+        const $currentPanel = 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", Tab)
+], Tabs.prototype, "_$selectedTab", void 0);
+Tabs = __decorate([
+    phoenixCustomElement('h-tabs')
 ], Tabs);
 export { Tabs };
-//# sourceMappingURL=tabs.js.map
+//# sourceMappingURL=tabs.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":~~"tabs.js"~~,"~~sourceRoot~~":"","~~sources~~":[~~"../../../../../../../src/components/tabs/tabs.ts"~~],"names":[],"mappings":";AAAA~~,OAAO,EAAE,sBAAsB,EAAE,MAAM,uEAAuE,CAAC~~;~~AAC/G~~,~~OAAO~~,~~EAAE,oBAAoB,EAAE,MAAM,qDAAqD,CAAC~~;~~AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC~~;~~AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC~~;~~AACvC,OAAyB,wCAAwC,CAAC~~;~~AAClE,OAAO,EAAE,sCAAsC,EAAE,MAAM,kFAAkF,CAAC~~;~~AAC1I,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC~~;~~AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC~~;~~AACjF,OAAsD,yCAAyC,CAAC~~;~~AAChG,OAAO,EAAE,oBAAoB,EAAE,MAAM,sEAAsE,CAAC~~;~~AAC5G,OAAO,EAAE,UAAU,EAAE,MAAM,iDAAiD,CAAC~~;~~AAG7E,IAAa,IAAI,GAAjB,MAAa,IAAK,SAAQ,sBAAsB~~;~~IAAhD;;QAoBY,2BAAsB,GAAG,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE~~;~~YACxD,MAAM,eAAe,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC~~;~~YAEnD,iEAAiE~~;~~YAEjE,IAAI,eAAe,KAAK,SAAS~~;~~gBAAE,OAAO~~;~~YAE1C,MAAM,WAAW,GAAG,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC~~;~~YAE1H,4CAA4C~~;~~YAE5C,IAAI,WAAW,KAAK,SAAS~~;~~gBAAE,OAAO~~;~~YAEtC,UAAU,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC~~;~~YACzD,UAAU,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC~~;~~YAEnD,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,CAAC~~;~~QACrC,CAAC,CAAC~~;~~QA4BM,uBAAkB,GAAG,CAAC,KAAwB,EAAE,EAAE~~;~~YACtD,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC~~;~~YAE3C,IAAI,CAAC,WAAW,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC~~;~~YAE9C,IAAI,IAAI,CAAC,aAAa~~;~~gBAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,KAAK,CAAC~~;~~YAE5D,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC~~;~~YAElC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC~~;~~YAElE,IAAI,CAAC,aAAa,GAAG,iBAAiB,CAAC~~;~~QAC3C,CAAC,CAAC~~;~~QAEM,wBAAmB,GAAG,CAAC,KAAyB,EAAQ,EAAE~~;~~YAC9D,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC~~;~~YACvC,IAAI,CAAC,aAAa,CAAC,QAAQ~~;~~gBAAE,OAAO~~;~~YAEpC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC~~;~~YACtC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC~~;~~QACnD,CAAC,CAAC~~;~~IAqBN,CAAC~~;~~IAtGU,iBAAiB~~;~~QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC~~;~~QAE1B,IAAI,CAAC,YAAY,EAAE,CAAC~~;~~QAEpB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC~~;~~QAErC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAM,OAAO,CAAC,CAAC,CAAC~~;~~QAEvD,IAAI,oBAAoB,CAAC~~;~~YACrB,IAAI,EAAE,IAAI~~;~~YACV,IAAI,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC~~;~~YACjC,QAAQ,EAAE,IAAI,CAAC,sBAAsB~~;~~SACxC,CAAC,CAAC~~;~~IACP,CAAC~~;~~IAqBO,mBAAmB~~;~~QACvB,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC~~;~~QAE9C,IAAI,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,MAAK,OAAO~~;~~YAAE,OAAO~~;~~QAEhD,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,cAAc,CAAC,CAAC~~;~~IACpE,CAAC~~;~~IAEO,gBAAgB,CAAC,eAAuB~~;~~QAC5C,IAAI,eAAe,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC~~;~~YAAE,OAAO~~;~~QAEtD,OAAO,eAAe,GAAG,CAAC,CAAC~~;~~IAC/B,CAAC~~;~~IAEO,gBAAgB,CAAC,eAAuB~~;~~QAC5C,IAAI,eAAe,IAAI,CAAC~~;~~YAAE,OAAO~~;~~QAEjC,OAAO,eAAe,GAAG,CAAC,CAAC~~;~~IAC/B,CAAC~~;~~IAEO,YAAY~~;~~QAChB,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC~~;~~QAEzE,IAAI,CAAC,gBAAgB,CAAC,sCAAsC,CAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC~~;~~IACtG,CAAC~~;~~IAwBM,WAAW,CAAC,YAAoB~~;~~QACnC,MAAM,aAAa,GAAG,QAAQ,CAAC,gBAAgB,CAAW,UAAU,IAAI,CAAC,aAAa,CAAC,SAAS,IAAI,CAAC,CAAC~~;~~QACtG,MAAM,SAAS,GAAG,QAAQ,CAAC,gBAAgB,CAAW,UAAU,YAAY,IAAI,CAAC,CAAC~~;~~QAElF,IAAI,aAAa~~;~~YAAE,aAAa,CAAC,OAAO,CAAC,CAAC,MAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC~~;~~QAC9E,IAAI,SAAS~~;~~YAAE,SAAS,CAAC,OAAO,CAAC,CAAC,MAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC~~;~~IAC1E,CAAC~~;~~IAEO,qBAAqB,CAAC,YAAiB,EAAE,OAAY~~;~~QACzD,IAAI,CAAC,aAAa,CACd,IAAI,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE~~;~~YACtC,MAAM,EAAE~~;~~gBACJ,YAAY~~;~~gBACZ,OAAO~~;~~aACV~~;~~YACD,OAAO,EAAE,IAAI~~;~~SAChB,CAAC,CACL,CAAC~~;~~IACN,CAAC~~;~~CACJ,CAAA~~;~~AAxGG~~;~~IADC,KAAK,EAAE~~;~~8BACe,GAAG~~;~~2CAAC~~;~~AAFlB,IAAI~~;~~IADhB,oBAAoB,CAAC,QAAQ,CAAC~~;~~GAClB,IAAI,CA0GhB~~;~~SA1GY,IAAI~~"}
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;"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":~~"tabs_constants.js"~~,"~~sourceRoot~~":"","~~sources~~":[~~"../../../../../../../src/components/tabs/tabs_constants.ts"~~],"names":[],"mappings":"AAAA~~,MAAM,CAAC,MAAM,gBAAgB,GAAG~~;~~IAC5B,OAAO,EAAE,SAAS~~;~~CACZ,CAAC~~"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;"}

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

@@ -69,3 +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 { TABS_EVENT_NAMES } from './components/tabs/tabs_constants';

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

@@ -58,4 +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 { TABS_EVENT_NAMES } from './components/tabs/tabs_constants.js';
+export { Tabs } from './components/tabs/tabs.js';
 //# sourceMappingURL=index.js.map

package/build/esm/packages/phoenix/src/index.js.map CHANGED Viewed

	@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/utilities/build/esm/ui_dom_utils.js ADDED Viewed

@@ -0,0 +1,20 @@
+class UiDomUtils {
+    static show($el) {
+        $el.removeAttribute('hidden');
+    }
+    static hide($el) {
+        $el.setAttribute('hidden', '');
+    }
+    static empty($el) {
+        $el.innerHTML = '';
+    }
+    static makeUnnavigable($el) {
+        $el.setAttribute('tabindex', '-1');
+    }
+    static makeNavigable($el) {
+        $el.setAttribute('tabindex', '0');
+    }
+}
+export { UiDomUtils };
+//# sourceMappingURL=ui_dom_utils.js.map

package/build/esm/packages/utilities/build/esm/ui_dom_utils.js.map ADDED Viewed

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

package/package.json CHANGED Viewed

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