@shoper/phoenix_design_system 0.10.0 → 0.11.0-1

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

@@ -0,0 +1,75 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/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';
+import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
+import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';
+import { RADIO_CONTROL_CSS_CLASSES } from './radio_constants.js';
+
+let HRadio = class HRadio extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.required = false;
+        this.hidden = false;
+        this.readonly = false;
+        this.checked = false;
+        this.error = false;
+        new ControlPropsSyncProviderController({
+            host: this,
+            propsToSync: [...Object.keys(BASE_FORM_CONTROL_PROPS), CHECKBOX_PROPS_TO_SYNC.checked]
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(RADIO_CONTROL_CSS_CLASSES.radio);
+        const cssClasses = classnames({
+            [RADIO_CONTROL_CSS_CLASSES.radioDisabled]: this.disabled,
+            [RADIO_CONTROL_CSS_CLASSES.radioReadonly]: this.readonly,
+            [RADIO_CONTROL_CSS_CLASSES.radioError]: this.error
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HRadio.prototype, "id", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HRadio.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadio.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadio.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadio.prototype, "hidden", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadio.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadio.prototype, "error", void 0);
+HRadio = __decorate([
+    phoenixCustomElement('h-radio'),
+    __metadata("design:paramtypes", [])
+], HRadio);
+
+export { HRadio };
+//# sourceMappingURL=radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,0CAA8C;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;"}

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

@@ -0,0 +1,18 @@
+export declare const RADIO_CONTROL_CSS_CLASSES: {
+    readonly radio: "radio";
+    readonly radioError: "radio_error";
+    readonly radioDisabled: "radio_disabled";
+    readonly radioReadonly: "radio_readonly";
+    readonly radioContent: "radio__content";
+    readonly radioDescription: "radio__description";
+    readonly radioControl: "radio__control";
+    readonly radioInput: "radio__input";
+    readonly radioLabel: "radio__label";
+};
+export declare const RADIO_SLOTS: {
+    readonly label: "label";
+    readonly description: "description";
+};
+export declare const RADIO_CONTROL_EVENTS: {
+    readonly change: "change";
+};

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

@@ -0,0 +1,22 @@
+const baseRadioControlClass = 'radio';
+const RADIO_CONTROL_CSS_CLASSES = {
+    radio: baseRadioControlClass,
+    radioError: `${baseRadioControlClass}_error`,
+    radioDisabled: `${baseRadioControlClass}_disabled`,
+    radioReadonly: `${baseRadioControlClass}_readonly`,
+    radioContent: `${baseRadioControlClass}__content`,
+    radioDescription: `${baseRadioControlClass}__description`,
+    radioControl: `${baseRadioControlClass}__control`,
+    radioInput: `${baseRadioControlClass}__input`,
+    radioLabel: `${baseRadioControlClass}__label`
+};
+const RADIO_SLOTS = {
+    label: 'label',
+    description: 'description'
+};
+const RADIO_CONTROL_EVENTS = {
+    change: 'change'
+};
+
+export { RADIO_CONTROL_CSS_CLASSES, RADIO_CONTROL_EVENTS, RADIO_SLOTS };
+//# sourceMappingURL=radio_constants.js.map

package/build/{cjs/packages/phoenix/src/core/observer/observable.js.map → esm/packages/phoenix/src/components/form/radio/radio_constants.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;"}
+{"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;"}

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

@@ -0,0 +1,7 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+import { TemplateResult } from 'lit';
+export declare class HRadioContent extends PhoenixLightLitElement {
+    constructor();
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,37 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html, nothing } from 'lit';
+import { PhoenixLightLitElement } from '../../../core/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 { LABEL_CSS_CLASSES } from '../label/label_constants.js';
+import { RADIO_CONTROL_CSS_CLASSES, RADIO_SLOTS } from './radio_constants.js';
+
+let HRadioContent = class HRadioContent extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        new ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(RADIO_CONTROL_CSS_CLASSES.radioContent);
+    }
+    render() {
+        super.render();
+        return html `
+            <label class="${LABEL_CSS_CLASSES.label}" for="${this.id}">${this.getSlot(RADIO_SLOTS.label)}</label>
+
+            ${this.hasSlot(RADIO_SLOTS.description)
+            ? html ` <div class="${RADIO_CONTROL_CSS_CLASSES.radioDescription}">${this.getSlot(RADIO_SLOTS.description)}</div> `
+            : nothing}
+        `;
+    }
+};
+HRadioContent = __decorate([
+    phoenixCustomElement('h-radio-content'),
+    __metadata("design:paramtypes", [])
+], HRadioContent);
+
+export { HRadioContent };
+//# sourceMappingURL=radio_content.js.map

package/build/esm/packages/phoenix/src/components/form/radio/radio_content.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;"}

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

@@ -0,0 +1,16 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+import { TemplateResult } from 'lit';
+export declare class HRadioControl extends PhoenixLightLitElement {
+    id: string;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    hidden: boolean;
+    readonly: boolean;
+    checked: boolean;
+    value: string;
+    constructor();
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    private _handleChangeEvent;
+}

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

@@ -0,0 +1,90 @@
+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 { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
+import { RADIO_CONTROL_EVENTS, RADIO_CONTROL_CSS_CLASSES } from './radio_constants.js';
+
+let HRadioControl = class HRadioControl extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.required = false;
+        this.hidden = false;
+        this.readonly = false;
+        this.checked = false;
+        this._handleChangeEvent = (event) => {
+            this.dispatchEvent(new CustomEvent(RADIO_CONTROL_EVENTS.change, {
+                detail: event,
+                bubbles: true
+            }));
+        };
+        new ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(RADIO_CONTROL_CSS_CLASSES.radioControl);
+    }
+    render() {
+        super.render();
+        return html `
+            <input
+                type="radio"
+                class="${RADIO_CONTROL_CSS_CLASSES.radioInput}"
+                id="${this.id}"
+                name="${this.name}"
+                value="${this.value}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                ?readonly="${this.readonly}"
+                ?hidden="${this.hidden}"
+                ?checked="${this.checked}"
+                @change="${this._handleChangeEvent}"
+            />
+
+            <label class="${RADIO_CONTROL_CSS_CLASSES.radioLabel}" for="${this.id}"></label>
+        `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HRadioControl.prototype, "id", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HRadioControl.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadioControl.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadioControl.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadioControl.prototype, "hidden", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadioControl.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HRadioControl.prototype, "checked", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HRadioControl.prototype, "value", void 0);
+HRadioControl = __decorate([
+    phoenixCustomElement('h-radio-control'),
+    __metadata("design:paramtypes", [])
+], HRadioControl);
+
+export { HRadioControl };
+//# sourceMappingURL=radio_control.js.map

package/build/esm/packages/phoenix/src/components/form/radio/radio_control.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/radio/radio_types.d.ts

@@ -0,0 +1,18 @@
+import { HRadio } from "./radio";
+import { HRadioContent } from "./radio_content";
+import { HRadioControl } from "./radio_control";
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-radio': HRadio;
+    }
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-radio-content': HRadioContent;
+    }
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-radio-control': HRadioControl;
+    }
+}

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

@@ -0,0 +1,4 @@
+import '@phoenixRoot/components/form/radio/radio';
+import '@phoenixRoot/components/form/radio/radio_content';
+import '@phoenixRoot/components/form/radio/radio_control';
+//# sourceMappingURL=radio_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/radio/radio_types.ts"],"names":[],"mappings":"AAAA,OAAuB,0CAA0C,CAAC;AAClE,OAA8B,kDAAkD,CAAC;AACjF,OAA8B,kDAAkD,CAAC"}

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

@@ -0,0 +1,13 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+export declare class HSwitch extends PhoenixLightLitElement {
+    id: string;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    hidden: boolean;
+    readonly: boolean;
+    checked: boolean;
+    error: boolean;
+    constructor();
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,75 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../../core/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';
+import { ControlPropsSyncProviderController } from '../controllers/props_synchronizing/control_props_sync_provider_controller.js';
+import { CHECKBOX_PROPS_TO_SYNC } from '../checkbox/checkbox_constants.js';
+import { SWITCH_CONTROL_CSS_CLASSES } from './switch_constants.js';
+
+let HSwitch = class HSwitch extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.required = false;
+        this.hidden = false;
+        this.readonly = false;
+        this.checked = false;
+        this.error = false;
+        new ControlPropsSyncProviderController({
+            host: this,
+            propsToSync: [...Object.keys(BASE_FORM_CONTROL_PROPS), CHECKBOX_PROPS_TO_SYNC.checked]
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(SWITCH_CONTROL_CSS_CLASSES.switch);
+        const cssClasses = classnames({
+            [SWITCH_CONTROL_CSS_CLASSES.switchDisabled]: this.disabled,
+            [SWITCH_CONTROL_CSS_CLASSES.switchError]: this.error,
+            [SWITCH_CONTROL_CSS_CLASSES.switchReadonly]: this.readonly
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSwitch.prototype, "id", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSwitch.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitch.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitch.prototype, "hidden", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitch.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitch.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitch.prototype, "error", void 0);
+HSwitch = __decorate([
+    phoenixCustomElement('h-switch'),
+    __metadata("design:paramtypes", [])
+], HSwitch);
+
+export { HSwitch };
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA,uBAAuB,0CAA8C;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;"}

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

@@ -0,0 +1,18 @@
+export declare const SWITCH_CONTROL_CSS_CLASSES: {
+    readonly switch: "switch";
+    readonly switchError: "switch_error";
+    readonly switchDisabled: "switch_disabled";
+    readonly switchReadonly: "switch_readonly";
+    readonly switchContent: "switch__content";
+    readonly switchDescription: "switch__description";
+    readonly switchControl: "switch__control";
+    readonly switchInput: "switch__input";
+    readonly switchLabel: "switch__label";
+};
+export declare const SWITCH_SLOTS: {
+    readonly label: "label";
+    readonly description: "description";
+};
+export declare const SWITCH_CONTROL_EVENTS: {
+    readonly change: "change";
+};

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

@@ -0,0 +1,22 @@
+const baseSwitchControlClass = 'switch';
+const SWITCH_CONTROL_CSS_CLASSES = {
+    switch: baseSwitchControlClass,
+    switchError: `${baseSwitchControlClass}_error`,
+    switchDisabled: `${baseSwitchControlClass}_disabled`,
+    switchReadonly: `${baseSwitchControlClass}_readonly`,
+    switchContent: `${baseSwitchControlClass}__content`,
+    switchDescription: `${baseSwitchControlClass}__description`,
+    switchControl: `${baseSwitchControlClass}__control`,
+    switchInput: `${baseSwitchControlClass}__input`,
+    switchLabel: `${baseSwitchControlClass}__label`
+};
+const SWITCH_SLOTS = {
+    label: 'label',
+    description: 'description'
+};
+const SWITCH_CONTROL_EVENTS = {
+    change: 'change'
+};
+
+export { SWITCH_CONTROL_CSS_CLASSES, SWITCH_CONTROL_EVENTS, SWITCH_SLOTS };
+//# sourceMappingURL=switch_constants.js.map

package/build/esm/packages/phoenix/src/components/form/switch/switch_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;AACA;AACA;"}

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

@@ -0,0 +1,7 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+import { TemplateResult } from 'lit';
+export declare class HSwitchContent extends PhoenixLightLitElement {
+    constructor();
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+}

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

@@ -0,0 +1,37 @@
+import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.es6.js';
+import { html, nothing } from 'lit';
+import { PhoenixLightLitElement } from '../../../core/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 { LABEL_CSS_CLASSES } from '../label/label_constants.js';
+import { SWITCH_CONTROL_CSS_CLASSES, SWITCH_SLOTS } from './switch_constants.js';
+
+let HSwitchContent = class HSwitchContent extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        new ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(SWITCH_CONTROL_CSS_CLASSES.switchContent);
+    }
+    render() {
+        super.render();
+        return html `
+            <label class="${LABEL_CSS_CLASSES.label}" for="${this.id}">${this.getSlot(SWITCH_SLOTS.label)}</label>
+
+            ${this.hasSlot(SWITCH_SLOTS.description)
+            ? html ` <div class="${SWITCH_CONTROL_CSS_CLASSES.switchDescription}">${this.getSlot(SWITCH_SLOTS.description)}</div> `
+            : nothing}
+        `;
+    }
+};
+HSwitchContent = __decorate([
+    phoenixCustomElement('h-switch-content'),
+    __metadata("design:paramtypes", [])
+], HSwitchContent);
+
+export { HSwitchContent };
+//# sourceMappingURL=switch_content.js.map

package/build/esm/packages/phoenix/src/components/form/switch/switch_content.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;"}

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

@@ -0,0 +1,16 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+import { TemplateResult } from 'lit';
+export declare class HSwitchControl extends PhoenixLightLitElement {
+    id: string;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    hidden: boolean;
+    readonly: boolean;
+    checked: boolean;
+    value: string;
+    constructor();
+    connectedCallback(): void;
+    protected render(): TemplateResult;
+    private _handleChangeEvent;
+}

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

@@ -0,0 +1,90 @@
+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 { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
+import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
+import { SWITCH_CONTROL_EVENTS, SWITCH_CONTROL_CSS_CLASSES } from './switch_constants.js';
+
+let HSwitchControl = class HSwitchControl extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.disabled = false;
+        this.required = false;
+        this.hidden = false;
+        this.readonly = false;
+        this.checked = false;
+        this._handleChangeEvent = (event) => {
+            this.dispatchEvent(new CustomEvent(SWITCH_CONTROL_EVENTS.change, {
+                detail: event,
+                bubbles: true
+            }));
+        };
+        new ControlPropsSyncConsumerController({
+            host: this
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(SWITCH_CONTROL_CSS_CLASSES.switchControl);
+    }
+    render() {
+        super.render();
+        return html `
+            <input
+                type="checkbox"
+                class="${SWITCH_CONTROL_CSS_CLASSES.switchInput}"
+                id="${this.id}"
+                name="${this.name}"
+                value="${this.value}"
+                ?disabled="${this.disabled}"
+                ?required="${this.required}"
+                ?readonly="${this.readonly}"
+                ?hidden="${this.hidden}"
+                ?checked="${this.checked}"
+                @change="${this._handleChangeEvent}"
+            />
+
+            <label class="${SWITCH_CONTROL_CSS_CLASSES.switchLabel}" for="${this.id}"></label>
+        `;
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSwitchControl.prototype, "id", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSwitchControl.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitchControl.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitchControl.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitchControl.prototype, "hidden", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitchControl.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HSwitchControl.prototype, "checked", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSwitchControl.prototype, "value", void 0);
+HSwitchControl = __decorate([
+    phoenixCustomElement('h-switch-control'),
+    __metadata("design:paramtypes", [])
+], HSwitchControl);
+
+export { HSwitchControl };
+//# sourceMappingURL=switch_control.js.map

package/build/esm/packages/phoenix/src/components/form/switch/switch_control.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/form/switch/switch_types.d.ts

@@ -0,0 +1,18 @@
+import { HSwitch } from "./switch";
+import { HSwitchContent } from "./switch_content";
+import { HSwitchControl } from "./switch_control";
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-switch': HSwitch;
+    }
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-switch-content': HSwitchContent;
+    }
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-switch-control': HSwitchControl;
+    }
+}

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

@@ -0,0 +1,4 @@
+import '@phoenixRoot/components/form/switch/switch';
+import '@phoenixRoot/components/form/switch/switch_content';
+import '@phoenixRoot/components/form/switch/switch_control';
+//# sourceMappingURL=switch_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/form/switch/switch_types.ts"],"names":[],"mappings":"AAAA,OAAwB,4CAA4C,CAAC;AACrE,OAA+B,oDAAoD,CAAC;AACpF,OAA+B,oDAAoD,CAAC"}