@shoper/phoenix_design_system 0.16.2 → 0.18.0-1

package/build/cjs/packages/phoenix/src/components/groups/toggle_button_group/toggle_button.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('../../../../../../external/tslib/tslib.es6.js');
+require('lit');
+var decorators = require('lit/decorators');
+var phoenix_light_lit_element = require('../../../core/phoenix_light_lit_element.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var toggle_button_group_constants = require('./toggle_button_group_constants.js');
+
+exports.HToggleButton = class HToggleButton extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.toggledOn = false;
+    }
+    willUpdate(propertyValues) {
+        var _a;
+        if (propertyValues.has('toggledOn')) {
+            (_a = this.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', this.toggledOn.toString());
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'presentation');
+        }
+        this.addEventListener('click', this._componentClickHandler);
+        this._emmitComponentConnected();
+    }
+    _emmitComponentConnected() {
+        const detail = {
+            target: this
+        };
+        this.dispatchEvent(new CustomEvent(toggle_button_group_constants.TOGGLE_BUTTON_EVENT_NAMES.connected, { bubbles: true, detail }));
+    }
+    _componentClickHandler(event) {
+        event.stopPropagation();
+        this._emitComponentClickedCustomEvent();
+    }
+    _emitComponentClickedCustomEvent() {
+        const detail = {
+            target: this
+        };
+        this.dispatchEvent(new CustomEvent(toggle_button_group_constants.TOGGLE_BUTTON_EVENT_NAMES.clicked, { bubbles: true, detail }));
+    }
+};
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean, attribute: toggle_button_group_constants.TOGGLED_ON_ATTRIBUTE_NAME }),
+    tslib_es6.__metadata("design:type", Object)
+], exports.HToggleButton.prototype, "toggledOn", void 0);
+exports.HToggleButton = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-toggle-button')
+], exports.HToggleButton);
+//# sourceMappingURL=toggle_button.js.map

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

package/build/cjs/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group.js

@@ -0,0 +1,67 @@
+'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.js');
+var phoenix_custom_element = require('../../../core/decorators/phoenix_custom_element.js');
+var v4 = require('../../../../../../external/uuid/dist/esm-browser/v4.js');
+var toggle_button_group_constants = require('./toggle_button_group_constants.js');
+
+var HToggleButtonGroup_1;
+exports.HToggleButtonGroup = HToggleButtonGroup_1 = class HToggleButtonGroup extends phoenix_light_lit_element.PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.toggleButtonsRegistry = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'group');
+        }
+        this.addEventListener(toggle_button_group_constants.TOGGLE_BUTTON_EVENT_NAMES.connected, this._toggleButtonConnectedHandler);
+        this.addEventListener(toggle_button_group_constants.TOGGLE_BUTTON_EVENT_NAMES.clicked, this._toggleButtonClickHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.toggleButtonsRegistry = [];
+    }
+    _toggleButtonConnectedHandler(event) {
+        event.stopPropagation();
+        const toggleButton = event.detail.target;
+        this._registerToggleButton(toggleButton);
+        if (toggleButton.getAttribute(toggle_button_group_constants.TOGGLED_ON_ATTRIBUTE_NAME) === '') {
+            this._emitSingleToggleOnModeToggleChange(toggleButton.getAttribute('value'));
+        }
+    }
+    _registerToggleButton(toggleButton) {
+        toggleButton.setAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME, v4['default']());
+        this.toggleButtonsRegistry = [...this.toggleButtonsRegistry, toggleButton];
+    }
+    _toggleButtonClickHandler(event) {
+        event.stopPropagation();
+        const target = event.detail.target;
+        this._performSingleToggleOnActionOnToggleButtons(target);
+        this._emitSingleToggleOnModeToggleChange(target.getAttribute('value'));
+    }
+    _performSingleToggleOnActionOnToggleButtons(toggleButton) {
+        this.toggleButtonsRegistry.forEach((element) => {
+            const canToggleOnButton = element.getAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME) ===
+                toggleButton.getAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME);
+            if (canToggleOnButton) {
+                element.setAttribute(toggle_button_group_constants.TOGGLED_ON_ATTRIBUTE_NAME, '');
+                return;
+            }
+            element.removeAttribute(toggle_button_group_constants.TOGGLED_ON_ATTRIBUTE_NAME);
+        });
+    }
+    _emitSingleToggleOnModeToggleChange(value) {
+        const detail = { value };
+        this.dispatchEvent(new CustomEvent(toggle_button_group_constants.TOGGLE_BUTTON_GROUP_EVENT_NAMES.toggleChange, { bubbles: true, detail }));
+    }
+};
+exports.HToggleButtonGroup.DATA_TOGGLE_ID_ATTRIBUTE_NAME = 'data-toggle-button-id';
+exports.HToggleButtonGroup = HToggleButtonGroup_1 = tslib_es6.__decorate([
+    phoenix_custom_element.phoenixCustomElement('h-toggle-button-group')
+], exports.HToggleButtonGroup);
+//# sourceMappingURL=toggle_button_group.js.map

package/build/cjs/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group.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,iBAAiB,wDAA4D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/groups/toggle_button_group/toggle_button_group_constants.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const TOGGLED_ON_ATTRIBUTE_NAME = 'toggled-on';
+const TOGGLE_BUTTON_GROUP_EVENT_NAMES = {
+    toggleChange: 'toggleChange'
+};
+const TOGGLE_BUTTON_EVENT_NAMES = {
+    connected: 'toggleButtonConnected',
+    clicked: 'toggleButtonClicked'
+};
+
+exports.TOGGLED_ON_ATTRIBUTE_NAME = TOGGLED_ON_ATTRIBUTE_NAME;
+exports.TOGGLE_BUTTON_EVENT_NAMES = TOGGLE_BUTTON_EVENT_NAMES;
+exports.TOGGLE_BUTTON_GROUP_EVENT_NAMES = TOGGLE_BUTTON_GROUP_EVENT_NAMES;
+//# sourceMappingURL=toggle_button_group_constants.js.map

package/build/cjs/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_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;"}

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

@@ -7,16 +7,67 @@ var tslib_es6 = require('../../../../external/tslib/tslib.es6.js');
 var lit = require('lit');
 var decorators = require('lit/decorators');
 
+class ComponentsUtils {
+    static isUnknownElement($element) {
+        return $element instanceof HTMLUnknownElement;
+    }
+    static isElementDefined($element) {
+        if (!this.isCustomElement($element))
+            return false;
+        const customElementClass = window.customElements.get($element.tagName.toLowerCase());
+        return !!customElementClass && $element instanceof customElementClass;
+    }
+    static isCustomElement($element) {
+        return $element.tagName.includes('-');
+    }
+    static filterComponentsToInitialize(components) {
+        return components.filter(($element) => ComponentsUtils.isUnknownElement($element) ||
+            (ComponentsUtils.isCustomElement($element) && !ComponentsUtils.isElementDefined($element)) ||
+            (ComponentsUtils.isCustomElement($element) && ComponentsUtils.isElementDefined($element) && !$element.isWebComponentConnected));
+    }
+}
 class PhoenixLightLitElement extends lit.LitElement {
     constructor() {
         super(...arguments);
         this._slots = {};
+        this.isWebComponentConnected = false;
+        this._handleComponentConnected = ({ detail }) => {
+            const connectedElement = detail.$el.tagName.toLowerCase();
+            console.log('connected', connectedElement);
+            if (this.childrenToConnectionWatch.includes(connectedElement)) {
+                const elToRemoveIndex = this.childrenToConnectionWatch.findIndex((tagName) => tagName === connectedElement);
+                this.childrenToConnectionWatch.splice(elToRemoveIndex, elToRemoveIndex + 1);
+            }
+            if (!this.childrenToConnectionWatch.length) {
+                this.allChildrenConnected();
+                this.removeEventListener('connected', this._handleComponentConnected);
+            }
+        };
     }
     firstUpdated(props) {
         super.firstUpdated(props);
         this._slots = this._assignSlots();
         this.requestUpdate();
     }
+    _setupChildrenWatch() {
+        this.childrenToConnectionWatch = this.childrenToConnectionWatch
+            ? this.childrenToConnectionWatch
+            : ComponentsUtils.filterComponentsToInitialize([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
+        console.log(this.childrenToConnectionWatch);
+        this.addEventListener('connected', this._handleComponentConnected);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dispatchEvent(new CustomEvent('connected', {
+            detail: {
+                $el: this
+            },
+            bubbles: true
+        }));
+        if (this.watchChildren)
+            this._setupChildrenWatch();
+    }
+    allChildrenConnected() { }
     _assignSlots() {
         return [...this.querySelectorAll(':scope > [slot]')].reduce((acc, $el) => {
             var _a;
@@ -45,7 +96,11 @@ class PhoenixLightLitElement extends lit.LitElement {
 tslib_es6.__decorate([
     decorators.state(),
     tslib_es6.__metadata("design:type", Object)
-], PhoenixLightLitElement.prototype, "_slots", void 0);
+], PhoenixLightLitElement.prototype, "_slots", void 0);
+tslib_es6.__decorate([
+    decorators.property({ type: Boolean }),
+    tslib_es6.__metadata("design:type", Object)
+], PhoenixLightLitElement.prototype, "isWebComponentConnected", void 0);
 
 exports.PhoenixLightLitElement = PhoenixLightLitElement;
 //# sourceMappingURL=phoenix_light_lit_element.js.map

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

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

@@ -56,6 +56,8 @@ var relative_position_controller = require('./controllers/relative_position_cont
 var dropdown = require('./components/dropdown/dropdown.js');
 var toggle_element_aria_controller = require('./controllers/toggle_element_aria_controller/toggle_element_aria_controller.js');
 var dropdown_toggler = require('./components/dropdown/dropdown_toggler.js');
+var toggle_button_group = require('./components/groups/toggle_button_group/toggle_button_group.js');
+var toggle_button = require('./components/groups/toggle_button_group/toggle_button.js');
 var click_outside_controller_messages = require('./controllers/click_outside_controller/click_outside_controller_messages.js');
 var backdrop = require('./components/backdrop/backdrop.js');
 var visibility_controller = require('./controllers/visibility_controller/visibility_controller.js');
@@ -316,6 +318,18 @@ Object.defineProperty(exports, 'HDropdownToggler', {
 		return dropdown_toggler.HDropdownToggler;
 	}
 });
+Object.defineProperty(exports, 'HToggleButtonGroup', {
+	enumerable: true,
+	get: function () {
+		return toggle_button_group.HToggleButtonGroup;
+	}
+});
+Object.defineProperty(exports, 'HToggleButton', {
+	enumerable: true,
+	get: function () {
+		return toggle_button.HToggleButton;
+	}
+});
 exports.CLICK_OUTSIDE_CONTROLLER_MESSAGES = click_outside_controller_messages.CLICK_OUTSIDE_CONTROLLER_MESSAGES;
 Object.defineProperty(exports, 'HBackdrop', {
 	enumerable: true,

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

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

@@ -0,0 +1,10 @@
+import { PropertyValues } from 'lit';
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+export declare class HToggleButton extends PhoenixLightLitElement {
+    toggledOn: boolean;
+    willUpdate(propertyValues: PropertyValues): void;
+    connectedCallback(): void;
+    private _emmitComponentConnected;
+    private _componentClickHandler;
+    private _emitComponentClickedCustomEvent;
+}

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button.js

@@ -0,0 +1,53 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import 'lit';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { TOGGLE_BUTTON_EVENT_NAMES, TOGGLED_ON_ATTRIBUTE_NAME } from './toggle_button_group_constants.js';
+
+let HToggleButton = class HToggleButton extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.toggledOn = false;
+    }
+    willUpdate(propertyValues) {
+        var _a;
+        if (propertyValues.has('toggledOn')) {
+            (_a = this.firstElementChild) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-pressed', this.toggledOn.toString());
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'presentation');
+        }
+        this.addEventListener('click', this._componentClickHandler);
+        this._emmitComponentConnected();
+    }
+    _emmitComponentConnected() {
+        const detail = {
+            target: this
+        };
+        this.dispatchEvent(new CustomEvent(TOGGLE_BUTTON_EVENT_NAMES.connected, { bubbles: true, detail }));
+    }
+    _componentClickHandler(event) {
+        event.stopPropagation();
+        this._emitComponentClickedCustomEvent();
+    }
+    _emitComponentClickedCustomEvent() {
+        const detail = {
+            target: this
+        };
+        this.dispatchEvent(new CustomEvent(TOGGLE_BUTTON_EVENT_NAMES.clicked, { bubbles: true, detail }));
+    }
+};
+__decorate([
+    property({ type: Boolean, attribute: TOGGLED_ON_ATTRIBUTE_NAME }),
+    __metadata("design:type", Object)
+], HToggleButton.prototype, "toggledOn", void 0);
+HToggleButton = __decorate([
+    phoenixCustomElement('h-toggle-button')
+], HToggleButton);
+
+export { HToggleButton };
+//# sourceMappingURL=toggle_button.js.map

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button.js.map

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

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group.d.ts

@@ -0,0 +1,12 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+export declare class HToggleButtonGroup extends PhoenixLightLitElement {
+    private static readonly DATA_TOGGLE_ID_ATTRIBUTE_NAME;
+    private toggleButtonsRegistry;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _toggleButtonConnectedHandler;
+    private _registerToggleButton;
+    private _toggleButtonClickHandler;
+    private _performSingleToggleOnActionOnToggleButtons;
+    private _emitSingleToggleOnModeToggleChange;
+}

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group.js

@@ -0,0 +1,65 @@
+import { __decorate } from '../../../../../../external/tslib/tslib.es6.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import v4 from '../../../../../../external/uuid/dist/esm-browser/v4.js';
+import { TOGGLE_BUTTON_EVENT_NAMES, TOGGLED_ON_ATTRIBUTE_NAME, TOGGLE_BUTTON_GROUP_EVENT_NAMES } from './toggle_button_group_constants.js';
+
+var HToggleButtonGroup_1;
+let HToggleButtonGroup = HToggleButtonGroup_1 = class HToggleButtonGroup extends PhoenixLightLitElement {
+    constructor() {
+        super(...arguments);
+        this.toggleButtonsRegistry = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'group');
+        }
+        this.addEventListener(TOGGLE_BUTTON_EVENT_NAMES.connected, this._toggleButtonConnectedHandler);
+        this.addEventListener(TOGGLE_BUTTON_EVENT_NAMES.clicked, this._toggleButtonClickHandler);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.toggleButtonsRegistry = [];
+    }
+    _toggleButtonConnectedHandler(event) {
+        event.stopPropagation();
+        const toggleButton = event.detail.target;
+        this._registerToggleButton(toggleButton);
+        if (toggleButton.getAttribute(TOGGLED_ON_ATTRIBUTE_NAME) === '') {
+            this._emitSingleToggleOnModeToggleChange(toggleButton.getAttribute('value'));
+        }
+    }
+    _registerToggleButton(toggleButton) {
+        toggleButton.setAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME, v4());
+        this.toggleButtonsRegistry = [...this.toggleButtonsRegistry, toggleButton];
+    }
+    _toggleButtonClickHandler(event) {
+        event.stopPropagation();
+        const target = event.detail.target;
+        this._performSingleToggleOnActionOnToggleButtons(target);
+        this._emitSingleToggleOnModeToggleChange(target.getAttribute('value'));
+    }
+    _performSingleToggleOnActionOnToggleButtons(toggleButton) {
+        this.toggleButtonsRegistry.forEach((element) => {
+            const canToggleOnButton = element.getAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME) ===
+                toggleButton.getAttribute(HToggleButtonGroup_1.DATA_TOGGLE_ID_ATTRIBUTE_NAME);
+            if (canToggleOnButton) {
+                element.setAttribute(TOGGLED_ON_ATTRIBUTE_NAME, '');
+                return;
+            }
+            element.removeAttribute(TOGGLED_ON_ATTRIBUTE_NAME);
+        });
+    }
+    _emitSingleToggleOnModeToggleChange(value) {
+        const detail = { value };
+        this.dispatchEvent(new CustomEvent(TOGGLE_BUTTON_GROUP_EVENT_NAMES.toggleChange, { bubbles: true, detail }));
+    }
+};
+HToggleButtonGroup.DATA_TOGGLE_ID_ATTRIBUTE_NAME = 'data-toggle-button-id';
+HToggleButtonGroup = HToggleButtonGroup_1 = __decorate([
+    phoenixCustomElement('h-toggle-button-group')
+], HToggleButtonGroup);
+
+export { HToggleButtonGroup };
+//# sourceMappingURL=toggle_button_group.js.map

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group.js.map

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

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_constants.d.ts

@@ -0,0 +1,8 @@
+export declare const TOGGLED_ON_ATTRIBUTE_NAME = "toggled-on";
+export declare const TOGGLE_BUTTON_GROUP_EVENT_NAMES: {
+    readonly toggleChange: "toggleChange";
+};
+export declare const TOGGLE_BUTTON_EVENT_NAMES: {
+    readonly connected: "toggleButtonConnected";
+    readonly clicked: "toggleButtonClicked";
+};

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_constants.js

@@ -0,0 +1,11 @@
+const TOGGLED_ON_ATTRIBUTE_NAME = 'toggled-on';
+const TOGGLE_BUTTON_GROUP_EVENT_NAMES = {
+    toggleChange: 'toggleChange'
+};
+const TOGGLE_BUTTON_EVENT_NAMES = {
+    connected: 'toggleButtonConnected',
+    clicked: 'toggleButtonClicked'
+};
+
+export { TOGGLED_ON_ATTRIBUTE_NAME, TOGGLE_BUTTON_EVENT_NAMES, TOGGLE_BUTTON_GROUP_EVENT_NAMES };
+//# sourceMappingURL=toggle_button_group_constants.js.map

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_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/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_types.d.ts

@@ -0,0 +1,6 @@
+export interface ITargetToggleButton {
+    target: HTMLElement;
+}
+export interface ISingleToggleOnModeToggleChange {
+    value: string | null;
+}

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toggle_button_group_types.js.map

package/build/esm/packages/phoenix/src/components/groups/toggle_button_group/toggle_button_group_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle_button_group_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/groups/toggle_button_group/toggle_button_group_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element.d.ts

@@ -1,7 +1,14 @@
 import { LitElement, TemplateResult, nothing, PropertyValues } from 'lit';
 export declare class PhoenixLightLitElement extends LitElement {
     _slots: Record<string, TemplateResult[]>;
+    protected childrenToConnectionWatch: string[];
+    watchChildren: boolean;
+    isWebComponentConnected: boolean;
     firstUpdated(props: PropertyValues): void;
+    private _setupChildrenWatch;
+    private _handleComponentConnected;
+    connectedCallback(): void;
+    allChildrenConnected(): void;
     private _assignSlots;
     getSlot(name: string): TemplateResult[] | typeof nothing;
     hasSlot(name: string): boolean;

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

@@ -1,18 +1,69 @@
 import { DEFAULT_SLOT_NAME } from './phoenix_light_lit_elements_constants.js';
 import { __decorate, __metadata } from '../../../../external/tslib/tslib.es6.js';
 import { LitElement, html, nothing } from 'lit';
-import { state } from 'lit/decorators';
+import { state, property } from 'lit/decorators';
 
+class ComponentsUtils {
+    static isUnknownElement($element) {
+        return $element instanceof HTMLUnknownElement;
+    }
+    static isElementDefined($element) {
+        if (!this.isCustomElement($element))
+            return false;
+        const customElementClass = window.customElements.get($element.tagName.toLowerCase());
+        return !!customElementClass && $element instanceof customElementClass;
+    }
+    static isCustomElement($element) {
+        return $element.tagName.includes('-');
+    }
+    static filterComponentsToInitialize(components) {
+        return components.filter(($element) => ComponentsUtils.isUnknownElement($element) ||
+            (ComponentsUtils.isCustomElement($element) && !ComponentsUtils.isElementDefined($element)) ||
+            (ComponentsUtils.isCustomElement($element) && ComponentsUtils.isElementDefined($element) && !$element.isWebComponentConnected));
+    }
+}
 class PhoenixLightLitElement extends LitElement {
     constructor() {
         super(...arguments);
         this._slots = {};
+        this.isWebComponentConnected = false;
+        this._handleComponentConnected = ({ detail }) => {
+            const connectedElement = detail.$el.tagName.toLowerCase();
+            console.log('connected', connectedElement);
+            if (this.childrenToConnectionWatch.includes(connectedElement)) {
+                const elToRemoveIndex = this.childrenToConnectionWatch.findIndex((tagName) => tagName === connectedElement);
+                this.childrenToConnectionWatch.splice(elToRemoveIndex, elToRemoveIndex + 1);
+            }
+            if (!this.childrenToConnectionWatch.length) {
+                this.allChildrenConnected();
+                this.removeEventListener('connected', this._handleComponentConnected);
+            }
+        };
     }
     firstUpdated(props) {
         super.firstUpdated(props);
         this._slots = this._assignSlots();
         this.requestUpdate();
     }
+    _setupChildrenWatch() {
+        this.childrenToConnectionWatch = this.childrenToConnectionWatch
+            ? this.childrenToConnectionWatch
+            : ComponentsUtils.filterComponentsToInitialize([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
+        console.log(this.childrenToConnectionWatch);
+        this.addEventListener('connected', this._handleComponentConnected);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dispatchEvent(new CustomEvent('connected', {
+            detail: {
+                $el: this
+            },
+            bubbles: true
+        }));
+        if (this.watchChildren)
+            this._setupChildrenWatch();
+    }
+    allChildrenConnected() { }
     _assignSlots() {
         return [...this.querySelectorAll(':scope > [slot]')].reduce((acc, $el) => {
             var _a;
@@ -41,7 +92,11 @@ class PhoenixLightLitElement extends LitElement {
 __decorate([
     state(),
     __metadata("design:type", Object)
-], PhoenixLightLitElement.prototype, "_slots", void 0);
+], PhoenixLightLitElement.prototype, "_slots", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], PhoenixLightLitElement.prototype, "isWebComponentConnected", void 0);
 
 export { PhoenixLightLitElement };
 //# sourceMappingURL=phoenix_light_lit_element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,uCAAuC,yCAA6C;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,uCAAuC,yCAA6C;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/index.d.ts

@@ -54,6 +54,9 @@ export { BtnController } from './controllers/btn_controller';
 export { HDropdown } from './components/dropdown/dropdown';
 export { HDropdownToggler } from './components/dropdown/dropdown_toggler';
 export { HDropdownContent } from './components/dropdown/dropdown_content';
+export { HToggleButtonGroup } from './components/groups/toggle_button_group/toggle_button_group';
+export { HToggleButton } from './components/groups/toggle_button_group/toggle_button';
+export type { ISingleToggleOnModeToggleChange } from './components/groups/toggle_button_group/toggle_button_group_types';
 export { ClickOutsideController } from './controllers/click_outside_controller/click_outside_controller';
 export { IClickOutsideController } from "./controllers/click_outside_controller/click_outside_controller_types";
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from "./controllers/click_outside_controller/click_outside_controller_messages";

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

@@ -52,6 +52,8 @@ export { RelativePositionController } from './controllers/relative_position_cont
 export { HDropdown } from './components/dropdown/dropdown.js';
 export { ToggleElementAriaController } from './controllers/toggle_element_aria_controller/toggle_element_aria_controller.js';
 export { HDropdownToggler } from './components/dropdown/dropdown_toggler.js';
+export { HToggleButtonGroup } from './components/groups/toggle_button_group/toggle_button_group.js';
+export { HToggleButton } from './components/groups/toggle_button_group/toggle_button.js';
 export { CLICK_OUTSIDE_CONTROLLER_MESSAGES } from './controllers/click_outside_controller/click_outside_controller_messages.js';
 export { HBackdrop } from './components/backdrop/backdrop.js';
 export { VisibilityController } from './controllers/visibility_controller/visibility_controller.js';

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

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

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