@shoper/phoenix_design_system 0.18.2 → 0.19.0

package/build/esm/packages/phoenix/src/components/form/radio/radio_content.js

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';

package/build/esm/packages/phoenix/src/components/form/radio/radio_control.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { TemplateResult } from 'lit';
 export declare class HRadioControl extends PhoenixLightLitElement {
     controlId: string;

package/build/esm/packages/phoenix/src/components/form/radio/radio_control.js

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';

package/build/esm/packages/phoenix/src/components/form/switch/switch.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HSwitch extends PhoenixLightLitElement {
     controlId: string;
     controlName: string;

package/build/esm/packages/phoenix/src/components/form/switch/switch.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import classnames from '../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';

package/build/esm/packages/phoenix/src/components/form/switch/switch_content.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { TemplateResult } from 'lit';
 export declare class HSwitchContent extends PhoenixLightLitElement {
     controlId: string;

package/build/esm/packages/phoenix/src/components/form/switch/switch_content.js

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';

package/build/esm/packages/phoenix/src/components/form/switch/switch_control.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { TemplateResult } from 'lit';
 export declare class HSwitchControl extends PhoenixLightLitElement {
     controlId: string;

package/build/esm/packages/phoenix/src/components/form/switch/switch_control.js

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { html } from 'lit';
 import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';

package/build/esm/packages/phoenix/src/components/form/textarea/textarea.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HTextarea extends PhoenixLightLitElement {
     controlId: string;
     controlName: string;

package/build/esm/packages/phoenix/src/components/form/textarea/textarea.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import classnames from '../../../../external/classnames/index.js';
 import { BASE_FORM_CONTROL_PROPS } from '../controllers/props_synchronizing/control_props_sync_controller_constants.js';

package/build/esm/packages/phoenix/src/components/form/textarea/textarea_control.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { TemplateResult } from 'lit';
 export declare class HTextareaControl extends PhoenixLightLitElement {
     controlId: string;

package/build/esm/packages/phoenix/src/components/form/textarea/textarea_control.js

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';

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/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/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/{core/phoenix_light_lit_element.js.map → components/groups/toggle_button_group/toggle_button.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,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/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/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/components/modal/modal.d.ts

@@ -1,5 +1,5 @@
 import { TemplateResult } from 'lit-html';
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { PropertyValues } from '@lit/reactive-element';
 export declare class HModal extends PhoenixLightLitElement {
     opened: boolean;

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

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { PORTAL_TARGET_NAME_PROP } from '../portal/portal_constants.js';
 import { MODAL_OPENED_PROP, FOCUSABLE_ELEMENTS_WITHIN_MODAL, MODALS_PORTAL_NAME, MODAL_EVENTS } from './modal_constants.js';

package/build/esm/packages/phoenix/src/components/modal/modal_body.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HModalBody extends PhoenixLightLitElement {
     constructor();
 }

package/build/esm/packages/phoenix/src/components/modal/modal_body.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 
 let HModalBody = class HModalBody extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/components/modal/modal_close.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HModalClose extends PhoenixLightLitElement {
     constructor();
     connectedCallback(): void;

package/build/esm/packages/phoenix/src/components/modal/modal_close.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { MODAL_EVENTS } from './modal_constants.js';
 

package/build/esm/packages/phoenix/src/components/modal/modal_footer.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HModalFooter extends PhoenixLightLitElement {
     constructor();
 }

package/build/esm/packages/phoenix/src/components/modal/modal_footer.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 
 let HModalFooter = class HModalFooter extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/components/modal/modal_header.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HModalHeader extends PhoenixLightLitElement {
     constructor();
 }

package/build/esm/packages/phoenix/src/components/modal/modal_header.js

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 
 let HModalHeader = class HModalHeader extends PhoenixLightLitElement {

package/build/esm/packages/phoenix/src/components/modal/modal_opener.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HModalOpener extends PhoenixLightLitElement {
     name: string;
     constructor();

package/build/esm/packages/phoenix/src/components/modal/modal_opener.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 
 let HModalOpener = class HModalOpener extends PhoenixLightLitElement {

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

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { PropertyValues } from 'lit';
 export declare class HPortal extends PhoenixLightLitElement {
     _id: string;

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

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import 'lit';
 import { state, property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { PORTAL_EVENTS } from './portal_constants.js';
 import v4 from '../../../../../external/uuid/dist/esm-browser/v4.js';

package/build/esm/packages/phoenix/src/components/portal/portal_target.d.ts

@@ -1,4 +1,4 @@
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 import { TPortalEventData } from './portal_types';
 export declare class HPortalTarget extends PhoenixLightLitElement {
     static portalTargetsNames: Set<string>;

package/build/esm/packages/phoenix/src/components/portal/portal_target.js

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property, state } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { PortalTargetError } from './portal_target_error.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { PORTAL_EVENTS, PORTAL_TARGET_NAME_PROP } from './portal_constants.js';

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

@@ -1,5 +1,5 @@
 import { ISlider } from './slider_types';
-import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element/phoenix_light_lit_element";
 export declare class HSlider extends PhoenixLightLitElement {
     settings: string;
     id: string;

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

@@ -1,9 +1,9 @@
 import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
 import { property } from 'lit/decorators';
-import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { JsonUtils } from '../../../../utilities/build/esm/json_utils.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element/phoenix_light_lit_element.js';
 import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
 import { Splide } from '../../../../../external/@splidejs/splide/dist/js/splide.esm.js';
-import { JsonUtils } from '../../../../../external/@dreamcommerce/utilities/build/esm/json_utils.js';
 
 let HSlider = class HSlider extends PhoenixLightLitElement {
     constructor() {

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F,0BAA0B,0EAA8E;AACxG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA,uBAAuB,gEAAoE;AAC3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/core/{phoenix_light_lit_element.d.ts → phoenix_light_lit_element/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 childrenToWatch: string[];
+    isWebComponentConnected: boolean;
     firstUpdated(props: PropertyValues): void;
+    private _setupChildrenWatch;
+    private _getComponentsNamesToWatch;
+    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/phoenix_light_lit_element.js

@@ -0,0 +1,82 @@
+import { PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES, 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, property } from 'lit/decorators';
+import { PhoenixLightLitElementUtils } from './phoenix_light_lit_element_utils.js';
+
+class PhoenixLightLitElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._slots = {};
+        this.isWebComponentConnected = false;
+        this._handleComponentConnected = ({ detail }) => {
+            const connectedElement = detail.$el.tagName.toLowerCase();
+            if (this.childrenToWatch.includes(connectedElement)) {
+                const elToRemoveIndex = this.childrenToWatch.findIndex((tagName) => tagName === connectedElement);
+                this.childrenToWatch.splice(elToRemoveIndex, elToRemoveIndex + 1);
+            }
+            if (!this.childrenToWatch.length) {
+                this.allChildrenConnected();
+                this.removeEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
+            }
+        };
+    }
+    firstUpdated(props) {
+        super.firstUpdated(props);
+        this._slots = this._assignSlots();
+        this.requestUpdate();
+    }
+    _setupChildrenWatch() {
+        this.childrenToWatch = this.childrenToWatch ? this.childrenToWatch : this._getComponentsNamesToWatch();
+        this.addEventListener(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, this._handleComponentConnected);
+    }
+    _getComponentsNamesToWatch() {
+        return PhoenixLightLitElementUtils.getComponentsForWhichToWaitForConnection([...this.querySelectorAll('*')]).map(($element) => $element.tagName.toLowerCase());
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dispatchEvent(new CustomEvent(PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES.connected, {
+            detail: {
+                $el: this
+            },
+            bubbles: true
+        }));
+        this._setupChildrenWatch();
+    }
+    allChildrenConnected() { }
+    _assignSlots() {
+        return [...this.querySelectorAll(':scope > [slot]')].reduce((acc, $el) => {
+            var _a;
+            const slotName = $el.slot || DEFAULT_SLOT_NAME;
+            acc[slotName] = acc[slotName] || [];
+            acc[slotName].push(html `${$el}`);
+            (_a = $el.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild($el);
+            $el.removeAttribute('slot');
+            return acc;
+        }, this._slots);
+    }
+    getSlot(name) {
+        try {
+            return this._slots[name];
+        }
+        catch (_a) { }
+        return nothing;
+    }
+    hasSlot(name) {
+        return !!this._slots[name];
+    }
+    createRenderRoot() {
+        return this;
+    }
+}
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], 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/phoenix_light_lit_element.js.map

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

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

@@ -0,0 +1,4 @@
+import { PhoenixLightLitElement } from "./phoenix_light_lit_element";
+export declare class PhoenixLightLitElementUtils {
+    static getComponentsForWhichToWaitForConnection(components: PhoenixLightLitElement[]): PhoenixLightLitElement[];
+}

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

@@ -0,0 +1,13 @@
+import { WebComponentsUtils } from '../../../../utilities/build/esm/web_components_utils.js';
+
+class PhoenixLightLitElementUtils {
+    static getComponentsForWhichToWaitForConnection(components) {
+        return components.filter(($element) => (WebComponentsUtils.isWebComponent($element) && !WebComponentsUtils.isWebComponentDefined($element)) ||
+            (WebComponentsUtils.isWebComponent($element) &&
+                WebComponentsUtils.isWebComponentDefined($element) &&
+                !$element.isWebComponentConnected));
+    }
+}
+
+export { PhoenixLightLitElementUtils };
+//# sourceMappingURL=phoenix_light_lit_element_utils.js.map

package/build/esm/packages/phoenix/src/core/phoenix_light_lit_element/phoenix_light_lit_element_utils.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;"}

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

@@ -0,0 +1,4 @@
+export declare const DEFAULT_SLOT_NAME = "default";
+export declare const PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES: {
+    readonly connected: "connected";
+};

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

@@ -0,0 +1,7 @@
+const DEFAULT_SLOT_NAME = 'default';
+const PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES = {
+    connected: 'connected'
+};
+
+export { DEFAULT_SLOT_NAME, PHOENIX_LIGHT_LIT_ELEMENTS_EVENT_NAMES };
+//# sourceMappingURL=phoenix_light_lit_elements_constants.js.map