@shoper/phoenix_design_system 1.3.0 → 1.3.2

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

@@ -0,0 +1,44 @@
+'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');
+
+exports.HScrollTo = class HScrollTo extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.to = '';
+        this.behaviour = 'smooth';
+        this.scrollToElement = () => {
+            const $scrollTo = document.querySelector(`[data-scroll="${this.to}"]`);
+            if ($scrollTo) {
+                const elTopPosition = $scrollTo.getBoundingClientRect().top;
+                requestAnimationFrame(() => {
+                    window.scrollTo({ top: elTopPosition + window.scrollY, behavior: this.behaviour });
+                });
+            }
+        };
+        this._btnController = new btn_controller.BtnController(this, this.scrollToElement);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.scrollToElement);
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HScrollTo.prototype, "to", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: String }),
+    tslib_es6.__metadata("design:type", String)
+], exports.HScrollTo.prototype, "behaviour", void 0);
+exports.HScrollTo = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-scroll-to'),
+    tslib_es6.__metadata("design:paramtypes", [])
+], exports.HScrollTo);
+//# sourceMappingURL=scroll_to.js.map

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

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

@@ -0,0 +1,50 @@
+'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');
+
+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;
+    }
+    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.id}`, this._settings);
+        if (this._settings.mountOnConnectedCallback) {
+            this._slider.mount();
+        }
+    }
+    getSlider() {
+        return this._slider;
+    }
+};
+tslib_es6.__decorate([
+    decorators.property(),
+    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;"}

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 = () => {
+            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 ? 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,31 @@
+'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);
+    }
+    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;"}

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

@@ -0,0 +1,110 @@
+'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 = ({ key }) => {
+            const currentTabIndex = this._getFocusedTabIndex();
+            if (currentTabIndex === undefined)
+                return;
+            const newTabIndex = key === 'ArrowLeft' ? this._getPrevTabIndex(currentTabIndex) : this._getNextTabIndex(currentTabIndex);
+            if (newTabIndex === undefined)
+                return;
+            utilities.UiDomUtils.makeUnnavigable(this._$tabs[currentTabIndex]);
+            utilities.UiDomUtils.makeNavigable(this._$tabs[newTabIndex]);
+            this._$tabs[newTabIndex].focus();
+        };
+        this._handleTabSelected = (event) => {
+            const $newlySelectedTab = event.detail.$el;
+            this.switchPanel($newlySelectedTab.panelName);
+            if (this._$selectedTab)
+                this._$selectedTab.selected = false;
+            $newlySelectedTab.selected = true;
+            this._dispatchChangedEvent(this._$selectedTab, $newlySelectedTab);
+            this._$selectedTab = $newlySelectedTab;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._setupEvents();
+        this.setAttribute('role', 'tablist');
+        this._$tabs = [...this.querySelectorAll('h-tab')];
+        new 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) {
+        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);
+    }
+    allChildrenRendered() {
+        const $selectedTab = this.querySelector('h-tab[selected]');
+        this._hideNotSelectedAndVisiblePanels();
+        if (!$selectedTab)
+            return;
+        this._$selectedTab = $selectedTab;
+        this.switchPanel(this._$selectedTab.panelName);
+    }
+    _hideNotSelectedAndVisiblePanels() {
+        const $notSelectedTabs = [...this.querySelectorAll('h-tab:not([selected])')];
+        $notSelectedTabs
+            .map(($tab) => $tab.panelName)
+            .forEach((panelName) => document.querySelectorAll(`[name="${panelName}"]`).forEach(($panel) => $panel.hide()));
+    }
+    switchPanel(newPanelName) {
+        const $currentPanel = this._$selectedTab && document.querySelectorAll(`[name="${this._$selectedTab.panelName}"]`);
+        const $newPanel = document.querySelectorAll(`[name="${newPanelName}"]`);
+        if ($currentPanel)
+            $currentPanel.forEach(($panel) => $panel.hide());
+        if ($newPanel)
+            $newPanel.forEach(($panel) => $panel.show());
+    }
+    _dispatchChangedEvent($previousTab, $newTab) {
+        this.dispatchEvent(new CustomEvent(tabs_constants.TABS_EVENT_NAMES.changed, {
+            detail: {
+                $previousTab,
+                $newTab
+            },
+            bubbles: true
+        }));
+    }
+};
+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;"}

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
+             */
+            const eventName = this.removable ? tag_constants.TAG_EVENT_NAMES.remove : tag_constants.TAG_EVENT_NAMES.click;
+            this.dispatchEvent(new CustomEvent(eventName));
+        };
+    }
+    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: 'tag.click',
+    remove: 'tag.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/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_EVENT_NAME, 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,8EAAsF;AACpH;AACA;AACA;AACA;AACA;AACA;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,57 @@
+'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();
+            },
+            expand: (isOpened) => {
+                isOpened ? this._visibilityController.hide() : this._visibilityController.show();
+            }
+        };
+        this._dispatchToggleEvent = () => {
+            this.dispatchEvent(new CustomEvent(toggle_constants.TOGGLE_EVENT_NAME, {
+                bubbles: true
+            }));
+        };
+        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.addEventListener('click', this._dispatchToggleEvent);
+    }
+    disconnectedCallback() {
+        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;"}

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TOGGLE_ACTIONS = {
+    expand: 'expand',
+    collapse: 'collapse'
+};
+const TOGGLE_CONTEXT_NAME = 'opened';
+const TOGGLE_EVENT_NAME = 'toggle';
+
+exports.TOGGLE_ACTIONS = TOGGLE_ACTIONS;
+exports.TOGGLE_CONTEXT_NAME = TOGGLE_CONTEXT_NAME;
+exports.TOGGLE_EVENT_NAME = TOGGLE_EVENT_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;"}

package/build/cjs/packages/phoenix/src/controllers/btn_controller/btn_controller.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('lit');
+var utilities = require('@dreamcommerce/utilities');
+var keystrokes_controller = require('../keystrokes_controller/keystrokes_controller.js');
+
+class BtnController {
+    constructor(host, callback, { isNavigable = true } = {}) {
+        (this.host = host).addController(this);
+        isNavigable ? utilities.UiDomUtils.makeNavigable(this.host) : utilities.UiDomUtils.makeUnnavigable(this.host);
+        this.host.setAttribute('role', 'button');
+        this._keystrokesController = new keystrokes_controller.KeystrokesController({
+            host,
+            keys: ['enter', ' '],
+            callback,
+            target: host
+        });
+    }
+    hostConnected() { }
+    hostDisconnected() { }
+}
+
+exports.BtnController = BtnController;
+//# sourceMappingURL=btn_controller.js.map

package/build/cjs/packages/phoenix/src/controllers/btn_controller/btn_controller.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;AACA;AACA;AACA;AACA;AACA;AACA;"}