@shoper/phoenix_design_system 0.13.0 → 0.13.1-1

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox.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, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';
@@ -10,13 +10,6 @@ import { CHECKBOX_PROPS_TO_SYNC, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox
 let HCheckbox = class HCheckbox extends PhoenixLightLitElement {
     constructor() {
         super();
-        this.disabled = false;
-        this.required = false;
-        this.hidden = false;
-        this.readonly = false;
-        this.checked = false;
-        this.error = false;
-        this.partiallyChecked = false;
         new ControlPropsSyncProviderController({
             host: this,
             propsToSync: [...Object.keys(BASE_FORM_CONTROL_PROPS), ...Object.values(CHECKBOX_PROPS_TO_SYNC)]
@@ -44,32 +37,36 @@ __decorate([
 ], HCheckbox.prototype, "controlName", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckbox.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckbox.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckbox.prototype, "hidden", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckbox.prototype, "readonly", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckbox.prototype, "checked", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckbox.prototype, "error", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckbox.prototype, "partiallyChecked", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HCheckbox.prototype, "value", void 0);
 HCheckbox = __decorate([
     phoenixCustomElement('h-checkbox'),
     __metadata("design:paramtypes", [])

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

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_constants.js

@@ -1,5 +1,3 @@
-import 'lit/decorators';
-
 const baseCheckboxControlClass = 'checkbox';
 const CHECKBOX_CONTROL_CSS_CLASSES = {
     checkbox: baseCheckboxControlClass,

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_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;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_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 { CHECKBOX_CONTROL_CSS_CLASSES, CHECKBOX_SLOTS } from './checkbox_constants.js';
 import { LABEL_CSS_CLASSES } from '../label/label_constants.js';
 
@@ -21,7 +22,7 @@ let HCheckboxContent = class HCheckboxContent extends PhoenixLightLitElement {
     render() {
         super.render();
         return html `
-            <label class="${LABEL_CSS_CLASSES.label}" for="${this.controlId}">${this.getSlot(CHECKBOX_SLOTS.label)}</label>
+            <label class="${LABEL_CSS_CLASSES.label}" for="${l(this.controlId)}">${this.getSlot(CHECKBOX_SLOTS.label)}</label>
 
             ${this.hasSlot(CHECKBOX_SLOTS.description)
             ? html ` <div class="${CHECKBOX_CONTROL_CSS_CLASSES.checkboxDescription}">${this.getSlot(CHECKBOX_SLOTS.description)}</div> `

package/build/esm/packages/phoenix/src/components/form/checkbox/checkbox_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/checkbox/checkbox_control.js

@@ -3,19 +3,14 @@ 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 classnames from '../../../../../../external/classnames/index.js';
+import classnames from '../../../../external/classnames/index.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 { CHECKBOX_CONTROL_EVENTS, CHECKBOX_CONTROL_CSS_CLASSES } from './checkbox_constants.js';
 
 let HCheckboxControl = class HCheckboxControl extends PhoenixLightLitElement {
     constructor() {
         super();
-        this.disabled = false;
-        this.required = false;
-        this.hidden = false;
-        this.readonly = false;
-        this.checked = false;
-        this.partiallyChecked = false;
         this._handleChangeEvent = (event) => {
             this.dispatchEvent(new CustomEvent(CHECKBOX_CONTROL_EVENTS.change, {
                 detail: event,
@@ -32,6 +27,7 @@ let HCheckboxControl = class HCheckboxControl extends PhoenixLightLitElement {
     }
     render() {
         super.render();
+        console.log('partiallyChecked', this.partiallyChecked);
         const checkboxInputClasses = classnames(CHECKBOX_CONTROL_CSS_CLASSES.checkboxInput, {
             [CHECKBOX_CONTROL_CSS_CLASSES.checkboxPartiallyChecked]: this.partiallyChecked
         });
@@ -39,9 +35,9 @@ let HCheckboxControl = class HCheckboxControl extends PhoenixLightLitElement {
             <input
                 type="checkbox"
                 class="${checkboxInputClasses}"
-                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}"
@@ -50,7 +46,7 @@ let HCheckboxControl = class HCheckboxControl extends PhoenixLightLitElement {
                 @change="${this._handleChangeEvent}"
             />
 
-            <label class="${CHECKBOX_CONTROL_CSS_CLASSES.checkboxLabel}" for="${this.id}"></label>
+            <label class="${CHECKBOX_CONTROL_CSS_CLASSES.checkboxLabel}" for="${l(this.controlId)}"></label>
         `;
     }
 };
@@ -64,27 +60,27 @@ __decorate([
 ], HCheckboxControl.prototype, "controlName", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckboxControl.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckboxControl.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckboxControl.prototype, "hidden", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckboxControl.prototype, "readonly", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckboxControl.prototype, "checked", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HCheckboxControl.prototype, "partiallyChecked", void 0);
 __decorate([
     property({ type: String }),

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

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

@@ -15,7 +15,7 @@ class ControlPropsSyncConsumerController {
         this._syncProps = (props) => {
             Object.entries(props).forEach(([key, value]) => {
                 // eslint-disable-next-line no-prototype-builtins
-                if (key in __classPrivateFieldGet(this, _ControlPropsSyncConsumerController_host, "f")) {
+                if (key in __classPrivateFieldGet(this, _ControlPropsSyncConsumerController_host, "f") && __classPrivateFieldGet(this, _ControlPropsSyncConsumerController_host, "f")[key] === undefined) {
                     __classPrivateFieldGet(this, _ControlPropsSyncConsumerController_host, "f")[key] = value;
                 }
             });

package/build/esm/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_provider_controller.js

@@ -2,14 +2,14 @@ import { __classPrivateFieldSet, __classPrivateFieldGet } from '../../../../../.
 import 'lit';
 import { ContextProviderController } from '../../../../core/context/context_provider_controller.js';
 import { BASE_FORM_CONTROL_PROPS, FORM_CONTROL_CONTEXTS } from './control_props_sync_controller_constants.js';
-import { Subject } from '../../../../core/classes/subject/subject.js';
+import { BehaviorSubject } from '../../../../core/classes/behavior_subject/behavior_subject.js';
 
 var _ControlPropsSyncProviderController_host, _ControlPropsSyncProviderController_controlPropsProvider, _ControlPropsSyncProviderController_propsObservable, _ControlPropsSyncProviderController_propsToSync;
 class ControlPropsSyncProviderController {
     constructor({ host, propsToSync = Object.keys(BASE_FORM_CONTROL_PROPS) }) {
         _ControlPropsSyncProviderController_host.set(this, void 0);
         _ControlPropsSyncProviderController_controlPropsProvider.set(this, void 0);
-        _ControlPropsSyncProviderController_propsObservable.set(this, new Subject());
+        _ControlPropsSyncProviderController_propsObservable.set(this, new BehaviorSubject());
         _ControlPropsSyncProviderController_propsToSync.set(this, void 0);
         __classPrivateFieldSet(this, _ControlPropsSyncProviderController_host, host, "f");
         __classPrivateFieldGet(this, _ControlPropsSyncProviderController_host, "f").addController(this);
@@ -21,6 +21,8 @@ class ControlPropsSyncProviderController {
     }
     hostUpdated() {
         const controlPropsWithValuesToSync = __classPrivateFieldGet(this, _ControlPropsSyncProviderController_propsToSync, "f").reduce((acc, propsName) => {
+            if (__classPrivateFieldGet(this, _ControlPropsSyncProviderController_host, "f")[propsName] === undefined)
+                return acc;
             return {
                 ...acc,
                 [propsName]: __classPrivateFieldGet(this, _ControlPropsSyncProviderController_host, "f")[propsName]

package/build/esm/packages/phoenix/src/components/form/controllers/props_synchronizing/control_props_sync_provider_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,+DAA+D,kDAAsD;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAA+D,kDAAsD;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/input/input.d.ts

@@ -11,7 +11,9 @@ export declare class HInput extends PhoenixLightLitElement {
     hidden: boolean;
     readonly: boolean;
     error: boolean;
+    placeholder: string;
     type: TInputControlType;
+    value: string;
     constructor();
     connectedCallback(): void;
 }

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

@@ -2,22 +2,18 @@ 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 { INPUT_CONTROL_TYPES, INPUT_CONTROL_CSS_CLASSES } from './input_constants.js';
-import classnames from '../../../../../../external/classnames/index.js';
+import { INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC, INPUT_CONTROL_CSS_CLASSES } from './input_constants.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';
 
 let HInput = class HInput extends PhoenixLightLitElement {
     constructor() {
         super();
-        this.withButton = false;
-        this.disabled = false;
-        this.required = false;
-        this.hidden = false;
-        this.readonly = false;
-        this.error = false;
         this.type = INPUT_CONTROL_TYPES.text;
         new ControlPropsSyncProviderController({
-            host: this
+            host: this,
+            propsToSync: [...Object.keys(BASE_FORM_CONTROL_PROPS), ...Object.values(INPUT_PROPS_TO_SYNC)]
         });
     }
     connectedCallback() {
@@ -46,32 +42,40 @@ __decorate([
 ], HInput.prototype, "size", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HInput.prototype, "withButton", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HInput.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HInput.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HInput.prototype, "hidden", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HInput.prototype, "readonly", void 0);
 __decorate([
     property({ type: Boolean }),
-    __metadata("design:type", Object)
+    __metadata("design:type", Boolean)
 ], HInput.prototype, "error", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HInput.prototype, "placeholder", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)
 ], HInput.prototype, "type", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], HInput.prototype, "value", void 0);
 HInput = __decorate([
     phoenixCustomElement('h-input'),
     __metadata("design:paramtypes", [])

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

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

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

@@ -8,7 +8,6 @@ export declare const INPUT_CONTROL_TYPES: {
     readonly checkbox: "checkbox";
     readonly number: "number";
     readonly range: "range";
-    readonly textarea: "textarea";
     readonly select: "select";
     readonly multiSelect: "multiSelect";
     readonly hidden: "hidden";
@@ -30,3 +29,6 @@ export declare const INPUT_CONTROL_EVENTS: {
     readonly change: "change";
     readonly input: "input";
 };
+export declare const INPUT_PROPS_TO_SYNC: {
+    readonly placeholder: "placeholder";
+};

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

@@ -9,7 +9,6 @@ const INPUT_CONTROL_TYPES = {
     checkbox: 'checkbox',
     number: 'number',
     range: 'range',
-    textarea: 'textarea',
     select: 'select',
     multiSelect: 'multiSelect',
     hidden: 'hidden',
@@ -30,7 +29,10 @@ const INPUT_CONTROL_CSS_CLASSES = {
 const INPUT_CONTROL_EVENTS = {
     change: 'change',
     input: 'input'
+};
+const INPUT_PROPS_TO_SYNC = {
+    placeholder: 'placeholder'
 };
 
-export { INPUT_CONTROL_CSS_CLASSES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_SIZES, INPUT_CONTROL_TYPES };
+export { INPUT_CONTROL_CSS_CLASSES, INPUT_CONTROL_EVENTS, INPUT_CONTROL_SIZES, INPUT_CONTROL_TYPES, INPUT_PROPS_TO_SYNC };
 //# sourceMappingURL=input_constants.js.map

package/build/esm/packages/phoenix/src/components/form/input/input_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -10,6 +10,7 @@ export declare class HInputControl extends PhoenixLightLitElement {
     hidden: boolean;
     readonly: boolean;
     value: string;
+    placeholder: string;
     constructor();
     connectedCallback(): void;
     protected render(): TemplateResult;

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;"}