@shoper/phoenix_design_system 0.12.0 → 0.13.1-1

package/build/esm/packages/phoenix/src/components/form/input/input_control.js

@@ -5,15 +5,12 @@ import { PhoenixLightLitElement } from '../../../core/phoenix_light_lit_element.
 import { phoenixCustomElement } from '../../../core/decorators/phoenix_custom_element.js';
 import { INPUT_CONTROL_TYPES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
 import { ControlPropsSyncConsumerController } from '../controllers/props_synchronizing/control_props_sync_consumer_controller.js';
+import { ifDefined as l } from '../../../../../../external/lit-html/directives/if-defined.js';
 
 let HInputControl = class HInputControl extends PhoenixLightLitElement {
     constructor() {
         super();
         this.type = INPUT_CONTROL_TYPES.text;
-        this.disabled = false;
-        this.required = false;
-        this.hidden = false;
-        this.readonly = false;
         this._handleChangeEvent = (event) => {
             this.dispatchEvent(new CustomEvent(INPUT_CONTROL_EVENTS.change, {
                 detail: event,
@@ -38,10 +35,11 @@ let HInputControl = class HInputControl extends PhoenixLightLitElement {
         super.render();
         return html `
             <input
-                id="${this.controlId}"
-                name="${this.controlName}"
-                type="${this.type}"
-                value="${this.value}"
+                id="${l(this.controlId)}"
+                name="${l(this.controlName)}"
+                type="${l(this.type)}"
+                value="${l(this.value)}"
+                placeholder="${l(this.placeholder)}"
                 ?disabled="${this.disabled}"
                 ?required="${this.required}"
                 ?readonly="${this.readonly}"
@@ -66,24 +64,28 @@ __decorate([
 ], HInputControl.prototype, "type", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HInputControl.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HInputControl.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HInputControl.prototype, "hidden", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HInputControl.prototype, "readonly", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], HInputControl.prototype, "value", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HInputControl.prototype, "placeholder", void 0);
 HInputControl = __decorate([
     phoenixCustomElement('h-input-control'),
     __metadata("design:paramtypes", [])

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

@@ -1 +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;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,8DAAkE;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -8,6 +8,7 @@ export declare class HRadio extends PhoenixLightLitElement {
     readonly: boolean;
     checked: boolean;
     error: boolean;
+    value: string;
     constructor();
     connectedCallback(): void;
 }

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

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 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 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';
@@ -11,12 +11,6 @@ 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]
@@ -44,28 +38,32 @@ __decorate([
 ], HRadio.prototype, "controlName", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadio.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadio.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadio.prototype, "hidden", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadio.prototype, "readonly", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadio.prototype, "checked", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadio.prototype, "error", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HRadio.prototype, "value", void 0);
 HRadio = __decorate([
     phoenixCustomElement('h-radio'),
     __metadata("design:paramtypes", [])

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

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

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

@@ -4,6 +4,7 @@ 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 { ifDefined as l } from '../../../../../../external/lit-html/directives/if-defined.js';
 import { LABEL_CSS_CLASSES } from '../label/label_constants.js';
 import { RADIO_CONTROL_CSS_CLASSES, RADIO_SLOTS } from './radio_constants.js';
 
@@ -21,7 +22,7 @@ let HRadioContent = class HRadioContent extends PhoenixLightLitElement {
     render() {
         super.render();
         return html `
-            <label class="${LABEL_CSS_CLASSES.label}" for="${this.controlId}">${this.getSlot(RADIO_SLOTS.label)}</label>
+            <label class="${LABEL_CSS_CLASSES.label}" for="${l(this.controlId)}">${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> `

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

@@ -1 +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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,+BAA+B,8DAAkE;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.js

@@ -4,16 +4,12 @@ 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 { ifDefined as l } from '../../../../../../external/lit-html/directives/if-defined.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,
@@ -34,9 +30,9 @@ let HRadioControl = class HRadioControl extends PhoenixLightLitElement {
             <input
                 type="radio"
                 class="${RADIO_CONTROL_CSS_CLASSES.radioInput}"
-                id="${this.controlId}"
-                name="${this.controlName}"
-                value="${this.value}"
+                id="${l(this.controlId)}"
+                name="${l(this.controlName)}"
+                value="${l(this.value)}"
                 ?disabled="${this.disabled}"
                 ?required="${this.required}"
                 ?readonly="${this.readonly}"
@@ -45,7 +41,7 @@ let HRadioControl = class HRadioControl extends PhoenixLightLitElement {
                 @change="${this._handleChangeEvent}"
             />
 
-            <label class="${RADIO_CONTROL_CSS_CLASSES.radioLabel}" for="${this.controlId}"></label>
+            <label class="${RADIO_CONTROL_CSS_CLASSES.radioLabel}" for="${l(this.controlId)}"></label>
         `;
     }
 };
@@ -59,23 +55,23 @@ __decorate([
 ], HRadioControl.prototype, "controlName", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadioControl.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadioControl.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadioControl.prototype, "hidden", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadioControl.prototype, "readonly", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HRadioControl.prototype, "checked", void 0);
 __decorate([
     property({ type: String }),

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

@@ -1 +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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,+BAA+B,8DAAkE;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -8,6 +8,7 @@ export declare class HSwitch extends PhoenixLightLitElement {
     readonly: boolean;
     checked: boolean;
     error: boolean;
+    value: string;
     constructor();
     connectedCallback(): void;
 }

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

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from '../../../../../../external/tslib/tslib.e
 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 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';
@@ -11,12 +11,6 @@ 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]
@@ -44,28 +38,32 @@ __decorate([
 ], HSwitch.prototype, "controlName", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitch.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitch.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitch.prototype, "hidden", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitch.prototype, "readonly", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitch.prototype, "checked", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitch.prototype, "error", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HSwitch.prototype, "value", void 0);
 HSwitch = __decorate([
     phoenixCustomElement('h-switch'),
     __metadata("design:paramtypes", [])

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

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

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

@@ -4,6 +4,7 @@ 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 { ifDefined as l } from '../../../../../../external/lit-html/directives/if-defined.js';
 import { LABEL_CSS_CLASSES } from '../label/label_constants.js';
 import { SWITCH_CONTROL_CSS_CLASSES, SWITCH_SLOTS } from './switch_constants.js';
 
@@ -21,7 +22,7 @@ let HSwitchContent = class HSwitchContent extends PhoenixLightLitElement {
     render() {
         super.render();
         return html `
-            <label class="${LABEL_CSS_CLASSES.label}" for="${this.controlId}">${this.getSlot(SWITCH_SLOTS.label)}</label>
+            <label class="${LABEL_CSS_CLASSES.label}" for="${l(this.controlId)}">${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> `

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

@@ -1 +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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,+BAA+B,8DAAkE;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.js

@@ -4,16 +4,12 @@ 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 { ifDefined as l } from '../../../../../../external/lit-html/directives/if-defined.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,
@@ -34,9 +30,9 @@ let HSwitchControl = class HSwitchControl extends PhoenixLightLitElement {
             <input
                 type="checkbox"
                 class="${SWITCH_CONTROL_CSS_CLASSES.switchInput}"
-                id="${this.controlId}"
-                name="${this.controlName}"
-                value="${this.value}"
+                id="${l(this.controlId)}"
+                name="${l(this.controlName)}"
+                value="${l(this.value)}"
                 ?disabled="${this.disabled}"
                 ?required="${this.required}"
                 ?readonly="${this.readonly}"
@@ -59,23 +55,23 @@ __decorate([
 ], HSwitchControl.prototype, "controlName", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitchControl.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitchControl.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitchControl.prototype, "hidden", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitchControl.prototype, "readonly", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HSwitchControl.prototype, "checked", void 0);
 __decorate([
     property({ type: String }),

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

@@ -1 +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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,+CAAmD;AAC1F;AACA;AACA;AACA;AACA;AACA,+BAA+B,8DAAkE;AACjG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/textarea/textarea.d.ts

@@ -0,0 +1,14 @@
+import { PhoenixLightLitElement } from "../../../core/phoenix_light_lit_element";
+export declare class HTextarea extends PhoenixLightLitElement {
+    controlId: string;
+    controlName: string;
+    disabled: boolean;
+    required: boolean;
+    hidden: boolean;
+    readonly: boolean;
+    error: boolean;
+    placeholder: string;
+    value: string;
+    constructor();
+    connectedCallback(): void;
+}

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

@@ -0,0 +1,72 @@
+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 { TEXTAREA_PROPS_TO_SYNC, TEXTAREA_CONTROL_CSS_CLASSES } from './textarea_constants.js';
+
+let HTextarea = class HTextarea extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        new ControlPropsSyncProviderController({
+            host: this,
+            propsToSync: [...Object.keys(BASE_FORM_CONTROL_PROPS), ...Object.values(TEXTAREA_PROPS_TO_SYNC)]
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.classList.add(TEXTAREA_CONTROL_CSS_CLASSES.textarea);
+        const cssClasses = classnames({
+            [TEXTAREA_CONTROL_CSS_CLASSES.textareaDisabled]: this.disabled,
+            [TEXTAREA_CONTROL_CSS_CLASSES.textareaError]: this.error,
+            [TEXTAREA_CONTROL_CSS_CLASSES.textareaReadonly]: this.readonly
+        });
+        if (cssClasses)
+            this.classList.add(cssClasses);
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HTextarea.prototype, "controlId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HTextarea.prototype, "controlName", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HTextarea.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HTextarea.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HTextarea.prototype, "hidden", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HTextarea.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], HTextarea.prototype, "error", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HTextarea.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HTextarea.prototype, "value", void 0);
+HTextarea = __decorate([
+    phoenixCustomElement('h-textarea'),
+    __metadata("design:paramtypes", [])
+], HTextarea);
+
+export { HTextarea };
+//# sourceMappingURL=textarea.js.map

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

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

@@ -0,0 +1,17 @@
+export declare const TEXTAREA_CONTROL_CSS_CLASSES: {
+    readonly textarea: "textarea";
+    readonly textareaError: "textarea_error";
+    readonly textareaDisabled: "textarea_disabled";
+    readonly textareaReadonly: "textarea_readonly";
+    readonly textareaControl: "textarea__control";
+    readonly textareaLabel: "textarea__label";
+};
+export declare const TEXTAREA_CONTROL_EVENTS: {
+    readonly input: "input";
+};
+export declare const TEXTAREA_PROPS_TO_SYNC: {
+    readonly placeholder: "placeholder";
+};
+export declare const TEXTAREA_SLOTS: {
+    readonly value: "value";
+};

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

@@ -0,0 +1,21 @@
+const baseTextareaControlClass = 'textarea';
+const TEXTAREA_CONTROL_CSS_CLASSES = {
+    textarea: baseTextareaControlClass,
+    textareaError: `${baseTextareaControlClass}_error`,
+    textareaDisabled: `${baseTextareaControlClass}_disabled`,
+    textareaReadonly: `${baseTextareaControlClass}_readonly`,
+    textareaControl: `${baseTextareaControlClass}__control`,
+    textareaLabel: `${baseTextareaControlClass}__label`
+};
+const TEXTAREA_CONTROL_EVENTS = {
+    input: 'input'
+};
+const TEXTAREA_PROPS_TO_SYNC = {
+    placeholder: 'placeholder'
+};
+const TEXTAREA_SLOTS = {
+    value: 'value'
+};
+
+export { TEXTAREA_CONTROL_CSS_CLASSES, TEXTAREA_CONTROL_EVENTS, TEXTAREA_PROPS_TO_SYNC, TEXTAREA_SLOTS };
+//# sourceMappingURL=textarea_constants.js.map

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

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

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