@shoper/phoenix_design_system 1.18.2 → 1.18.3

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

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+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');
+var slider_constants = require('./slider_constants.js');
+
+exports.HSlider = class HSlider extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.settings = '';
+        this.id = '';
+        this._settings = {
+            mountOnConnectedCallback: true,
+            type: 'loop',
+            perPage: 3,
+            focus: 'center'
+        };
+        this._slider = null;
+        this._$focusableElements = [];
+        this._showFocusableNodes = (slideComponent) => {
+            this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show);
+        };
+        this._hideFocusableNodes = (slideComponent) => {
+            this._handleFocusableNodes(slideComponent, slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.hide);
+        };
+        this._handleFocusableNodes = ({ slide }, action) => {
+            const $focusableSlideChildren = this._$focusableElements.filter(($focusableElement) => slide.contains($focusableElement));
+            if ($focusableSlideChildren.length === 0)
+                return;
+            const updateFocusability = action === slider_constants.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS.show ? this._showFocusableElement : this._hideFocusableElement;
+            $focusableSlideChildren.forEach(($element) => updateFocusability($element));
+        };
+        this._scanMutationsForNewFocusableElements = (mutationList) => {
+            for (const mutation of mutationList) {
+                if (mutation.type !== 'childList')
+                    continue;
+                const $target = mutation.target;
+                const isFocusable = utilities.UiDomUtils.isFocusable($target);
+                const $focusableChildren = [...$target.querySelectorAll(utilities.UiDomUtils.getFocusableSelector())];
+                isFocusable && this._initializeFocusableElement($target);
+                $focusableChildren.forEach(($child) => this._initializeFocusableElement($child));
+            }
+        };
+        this._initializeFocusableElement = ($element) => {
+            !this._$focusableElements.includes($element) && this._$focusableElements.push($element);
+            if ($element.closest('[aria-hidden="true"]')) {
+                this._hideFocusableElement($element);
+            }
+        };
+    }
+    get sliderSettings() {
+        return this._settings;
+    }
+    set sliderSettings(newSettingsObject) {
+        const newSettings = utilities.JsonUtils.toJson(newSettingsObject);
+        if (!newSettings)
+            return;
+        this.settings = newSettings;
+    }
+    connectedCallback() {
+        var _a;
+        if (this.settings) {
+            this._settings = (_a = utilities.JsonUtils.fromJson(this.settings)) !== null && _a !== void 0 ? _a : this._settings;
+        }
+        this._slider = new splide_esm.Splide(this, this._settings);
+        if (this._settings.mountOnConnectedCallback) {
+            this._slider.mount();
+        }
+        this._slider.on('visible', this._showFocusableNodes);
+        this._slider.on('hidden', this._hideFocusableNodes);
+        const mutationObserver = new MutationObserver(this._scanMutationsForNewFocusableElements);
+        mutationObserver.observe(this, { childList: true, subtree: true, attributes: true });
+    }
+    _showFocusableElement($element) {
+        $element.setAttribute('tabindex', '0');
+        $element.removeAttribute('aria-hidden');
+    }
+    _hideFocusableElement($element) {
+        $element.setAttribute('tabindex', '-1');
+        $element.setAttribute('aria-hidden', 'true');
+    }
+    getSlider() {
+        return this._slider;
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        super.disconnectedCallback();
+        (_a = this._slider) === null || _a === void 0 ? void 0 : _a.off('visible');
+        (_b = this._slider) === null || _b === void 0 ? void 0 : _b.off('hidden');
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSlider.prototype, "settings", void 0);
+tslib_es6.__decorate([
+    decorators.property(),
+    tslib_es6.__metadata("design:type", String)
+], exports.HSlider.prototype, "id", void 0);
+exports.HSlider = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-slider')
+], exports.HSlider);
+//# sourceMappingURL=slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,4CAAgD;AACxE;AACA;AACA;AACA;AACA,yBAAyB,gEAAoE;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/slider/slider_constants.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = {
+    show: 'show',
+    hide: 'hide'
+};
+
+exports.SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS = SLIDER_HANDLE_FOCUSABLE_NODES_OPTIONS;
+//# sourceMappingURL=slider_constants.js.map

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

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

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

@@ -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 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 btn_controller = require('../../../controllers/btn_controller/btn_controller.js');
+var tab_constants = require('./tab_constants.js');
+
+exports.HTab = class HTab extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this._handleTabClicked = () => {
+            if (this.disabled)
+                return;
+            this._dispatchSelectedEvent();
+        };
+        this._dispatchSelectedEvent = () => {
+            document.dispatchEvent(new CustomEvent(tab_constants.TAB_EVENT_NAMES.selected, {
+                detail: {
+                    panelName: this.panelName
+                },
+                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 ? utilities.UiDomUtils.makeNavigable(this) : utilities.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._handleTabClicked);
+        this._setupAttributes();
+        this._bindEvents();
+        this.selected ? utilities.UiDomUtils.makeNavigable(this) : utilities.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);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, reflect: true, attribute: 'panel-name' }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HTab.prototype, "panelName", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HTab.prototype, "disabled", void 0);
+exports.HTab = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-tab')
+], exports.HTab);
+//# sourceMappingURL=tab.js.map

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

@@ -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

@@ -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

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

@@ -0,0 +1,39 @@
+'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.HTabPanel = class HTabPanel extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._visibilityController = new visibility_controller.VisibilityController(this);
+        this.setAttribute('role', 'tabpanel');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const $tab = document.querySelector(`[panel-name="${this.name}"]`);
+        if ($tab && $tab.id) {
+            this.setAttribute('aria-labelledby', $tab.id);
+        }
+    }
+    show() {
+        this._visibilityController.show();
+    }
+    hide() {
+        this._visibilityController.hide();
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String, reflect: true }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HTabPanel.prototype, "name", void 0);
+exports.HTabPanel = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-tab-panel'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HTabPanel);
+//# sourceMappingURL=tab_panel.js.map

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

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

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

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var decorators = require('lit/decorators');
+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 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.HTabs = class HTabs extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.watchChildrenRendered = true;
+        this._handleArrowNavigation = (ev) => {
+            ev.preventDefault();
+            const currentTabIndex = this._getFocusedTabIndex();
+            if (currentTabIndex === undefined)
+                return;
+            const newTabIndex = ev.key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
+            utilities.UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
+            utilities.UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
+            this._$tabs[newTabIndex].focus();
+        };
+        this._handleTabSelected = (event) => {
+            const newlySelectedTabPanelName = event.detail.panelName;
+            const $newlySelectedTab = this.querySelector(`[panel-name="${newlySelectedTabPanelName}"]`);
+            if (!$newlySelectedTab)
+                return;
+            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 keystrokes_controller.KeystrokesController({
+            host: this,
+            keys: ['ArrowRight', 'ArrowLeft'],
+            callback: this._handleArrowNavigation,
+            target: this
+        });
+    }
+    _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) {
+        return (currentTabIndex + 1) % this._$tabs.length;
+    }
+    _getPrevTabIndex(currentTabIndex) {
+        return (currentTabIndex - 1 + this._$tabs.length) % this._$tabs.length;
+    }
+    _setupEvents() {
+        document.addEventListener(tab_constants.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.emitCustomEvent(tabs_constants.TABS_EVENT_NAMES.changed, {
+            detail: {
+                $previousTab,
+                $newTab
+            }
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(tab_constants.TAB_EVENT_NAMES.selected, this._handleTabSelected);
+    }
+};
+tslib_es6.__decorate([
+    decorators.state(),
+    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.HTabs);
+//# sourceMappingURL=tabs.js.map

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

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

@@ -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

@@ -0,0 +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/components/tag/tag.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.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 decorators_js = require('@lit/reactive-element/decorators.js');
+var btn_controller = require('../../controllers/btn_controller/btn_controller.js');
+var tag_constants = require('./tag_constants.js');
+
+exports.HTag = class HTag extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.clickable = false;
+        this.removable = false;
+        this._handleClick = (event) => {
+            event.stopPropagation();
+            /**
+             * TODO do zrobienia in fiuczer, jak jest tag klikalny i mamy remove, to klik remove działa na button remove
+             * a nie na cały tag
+             */
+            if (this.removable)
+                this.emitCustomEvent(tag_constants.TAG_EVENT_NAMES.remove);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(tag_constants.TAG_CSS_CLASSES.tag);
+        this.removable = !!this.querySelector('h-tag-remove-button');
+        if (!this.removable && !this.clickable)
+            return;
+        this._setupEvents();
+        this._btnController = new btn_controller.BtnController(this, this._handleClick);
+        this.classList.add(tag_constants.TAG_CSS_CLASSES.tagInteractive);
+    }
+    _setupEvents() {
+        this.addEventListener('click', this._handleClick);
+    }
+};
+tslib_es6.__decorate([
+    decorators_js.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Boolean)
+], exports.HTag.prototype, "clickable", void 0);
+exports.HTag = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-tag')
+], exports.HTag);
+//# sourceMappingURL=tag.js.map

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

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

package/build/cjs/packages/phoenix/src/components/tag/tag_constants.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tagBaseClass = 'tag';
+const TAG_CSS_CLASSES = {
+    tag: tagBaseClass,
+    tagRemoveButton: `${tagBaseClass}__remove-button`,
+    tagInteractive: `${tagBaseClass}_interactive`
+};
+const TAG_REMOVE_ICON_SLOT_NAME = 'remove-icon';
+const TAG_EVENT_NAMES = {
+    click: 'click',
+    remove: 'remove'
+};
+
+exports.TAG_CSS_CLASSES = TAG_CSS_CLASSES;
+exports.TAG_EVENT_NAMES = TAG_EVENT_NAMES;
+exports.TAG_REMOVE_ICON_SLOT_NAME = TAG_REMOVE_ICON_SLOT_NAME;
+//# sourceMappingURL=tag_constants.js.map

package/build/cjs/packages/phoenix/src/components/tag/tag_constants.js.map

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

package/build/cjs/packages/phoenix/src/components/tag/tag_remove_button.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.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 litHtml = require('lit-html');
+var tag_constants = require('./tag_constants.js');
+
+exports.HTagRemoveButton = class HTagRemoveButton extends phoenix_light_lit_element.PhoenixLightLitElement {
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(tag_constants.TAG_CSS_CLASSES.tagRemoveButton);
+        this._setupAriaAttributes();
+    }
+    _setupAriaAttributes() {
+        this.setAttribute('aria-label', 'remove tag');
+    }
+    render() {
+        return litHtml.html `
+            ${this.hasSlot(tag_constants.TAG_REMOVE_ICON_SLOT_NAME) ? this.getSlot(tag_constants.TAG_REMOVE_ICON_SLOT_NAME) : litHtml.html `<h-icon icon-name="icon-x"></h-icon>`}
+        `;
+    }
+};
+exports.HTagRemoveButton = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-tag-remove-button')
+], exports.HTagRemoveButton);
+//# sourceMappingURL=tag_remove_button.js.map

package/build/cjs/packages/phoenix/src/components/tag/tag_remove_button.js.map

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

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../external/tslib/tslib.es6.js');
+var lit = require('lit');
+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 behavior_subject = require('../../core/classes/behavior_subject/behavior_subject.js');
+var context_provider_controller = require('../../core/context/context_provider_controller.js');
+var templateContent = require('../../../../../external/lit-html/directives/template-content.js');
+var toggle_constants = require('./toggle_constants.js');
+
+exports.HToggle = class HToggle extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.opened = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._reactiveOpened = new behavior_subject.BehaviorSubject(this.opened);
+        this._toggleContext = new context_provider_controller.ContextProviderController(this);
+        this._$content = this.querySelector('template');
+        this._toggleContext.provide(toggle_constants.TOGGLE_CONTEXT_NAME, this._reactiveOpened);
+        this.addEventListener(toggle_constants.TOGGLE_BUTTON_EVENTS.toggle, this.toggle);
+    }
+    toggle() {
+        this.opened = !this.opened;
+        this._reactiveOpened.notify(this.opened);
+    }
+    render() {
+        return lit.html `${this.opened && this._$content ? templateContent.templateContent(this._$content) : lit.nothing}`;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, reflect: true }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HToggle.prototype, "opened", void 0);
+exports.HToggle = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-toggle')
+], exports.HToggle);
+//# sourceMappingURL=toggle.js.map

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

@@ -0,0 +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,8BAA8B,iEAAqE;AACnG;AACA;AACA;AACA;AACA;AACA;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/toggle/toggle_button.js

@@ -0,0 +1,68 @@
+'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 btn_controller = require('../../controllers/btn_controller/btn_controller.js');
+var observer = require('../../core/classes/observer/observer.js');
+var context_consumer_controller = require('../../core/context/context_consumer_controller.js');
+var visibility_controller = require('../../controllers/visibility_controller/visibility_controller.js');
+var toggle_constants = require('./toggle_constants.js');
+
+exports.HToggleBtn = class HToggleBtn extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.action = toggle_constants.TOGGLE_ACTIONS.collapse;
+        this._visibility = {
+            collapse: (isOpened) => {
+                isOpened ? this._visibilityController.show() : this._visibilityController.hide();
+                this._handleFocusOppositeToggleButtonIfLostFocus();
+            },
+            expand: (isOpened) => {
+                isOpened ? this._visibilityController.hide() : this._visibilityController.show();
+                this._handleFocusOppositeToggleButtonIfLostFocus();
+            }
+        };
+        this._handleFocusOppositeToggleButtonIfLostFocus = () => {
+            var _a;
+            const shouldFocus = this === document.activeElement;
+            const oppositeAction = this.action === toggle_constants.TOGGLE_ACTIONS.collapse ? toggle_constants.TOGGLE_ACTIONS.expand : toggle_constants.TOGGLE_ACTIONS.collapse;
+            if (shouldFocus) {
+                const $oppositeToggleBtn = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`[action="${oppositeAction}"]`);
+                $oppositeToggleBtn === null || $oppositeToggleBtn === void 0 ? void 0 : $oppositeToggleBtn.focus();
+            }
+        };
+        this._dispatchToggleEvent = () => {
+            this.emitCustomEvent(toggle_constants.TOGGLE_BUTTON_EVENTS.toggle);
+        };
+        this._btnController = new btn_controller.BtnController(this, this._dispatchToggleEvent);
+        this._visibilityController = new visibility_controller.VisibilityController(this);
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this._toggleContextConsumer = new context_consumer_controller.ContextConsumerController(this);
+        this._opened$ = await this._toggleContextConsumer.consumeAsync(toggle_constants.TOGGLE_CONTEXT_NAME);
+        this._openedObserver = new observer.Observer((isOpened) => {
+            this._visibility[this.action](isOpened);
+        });
+        this._opened$.subscribe(this._openedObserver);
+        this.setAttribute('aria-expanded', this.action === toggle_constants.TOGGLE_ACTIONS.collapse ? 'true' : 'false');
+        this.addEventListener('click', this._dispatchToggleEvent);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._openedObserver && this._opened$.unsubscribe(this._openedObserver);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HToggleBtn.prototype, "action", void 0);
+exports.HToggleBtn = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-toggle-btn'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HToggleBtn);
+//# sourceMappingURL=toggle_button.js.map

package/build/cjs/packages/phoenix/src/components/toggle/toggle_button.js.map

@@ -0,0 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/toggle/toggle_constants.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TOGGLE_ACTIONS = {
+    expand: 'expand',
+    collapse: 'collapse'
+};
+const TOGGLE_CONTEXT_NAME = 'opened';
+const TOGGLE_BUTTON_EVENTS = {
+    toggle: 'toggle'
+};
+
+exports.TOGGLE_ACTIONS = TOGGLE_ACTIONS;
+exports.TOGGLE_BUTTON_EVENTS = TOGGLE_BUTTON_EVENTS;
+exports.TOGGLE_CONTEXT_NAME = TOGGLE_CONTEXT_NAME;
+//# sourceMappingURL=toggle_constants.js.map

package/build/cjs/packages/phoenix/src/components/toggle/toggle_constants.js.map

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