From cefa2ee183d38120afc5603c7bd37aca56900c0c Mon Sep 17 00:00:00 2001 From: Zack Barett Date: Thu, 10 Feb 2022 09:26:28 -0600 Subject: [PATCH] State Trigger -> HA Form (#11631) Co-authored-by: Bram Kragten --- src/components/ha-base-time-input.ts | 15 ++-- src/components/ha-form/ha-form.ts | 2 +- .../ha-selector/ha-selector-duration.ts | 37 ++++++++ .../ha-selector/ha-selector-text.ts | 6 +- src/components/ha-selector/ha-selector.ts | 4 + src/data/selector.ts | 5 ++ .../types/ha-automation-trigger-state.ts | 87 ++++++++----------- 7 files changed, 97 insertions(+), 59 deletions(-) create mode 100644 src/components/ha-selector/ha-selector-duration.ts diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts index e8ede0a78b..27b72e42f2 100644 --- a/src/components/ha-base-time-input.ts +++ b/src/components/ha-base-time-input.ts @@ -26,6 +26,11 @@ export class HaBaseTimeInput extends LitElement { */ @property({ type: Boolean }) autoValidate = false; + /** + * determines if inputs are required + */ + @property({ type: Boolean }) public required?: boolean; + /** * 12 or 24 hr format */ @@ -115,7 +120,7 @@ export class HaBaseTimeInput extends LitElement { @input=${this._valueChanged} @focus=${this._onFocus} no-spinner - required + .required=${this.required} .autoValidate=${this.autoValidate} maxlength="2" .max=${this._hourMax} @@ -135,7 +140,7 @@ export class HaBaseTimeInput extends LitElement { @focus=${this._onFocus} name="minutes" no-spinner - required + .required=${this.required} .autoValidate=${this.autoValidate} maxlength="2" max="59" @@ -156,7 +161,7 @@ export class HaBaseTimeInput extends LitElement { @focus=${this._onFocus} name="seconds" no-spinner - required + .required=${this.required} .autoValidate=${this.autoValidate} maxlength="2" max="59" @@ -177,7 +182,7 @@ export class HaBaseTimeInput extends LitElement { @focus=${this._onFocus} name="milliseconds" no-spinner - required + .required=${this.required} .autoValidate=${this.autoValidate} maxlength="3" max="999" @@ -189,7 +194,7 @@ export class HaBaseTimeInput extends LitElement { ${this.format === 24 ? "" : html`` : dynamicElement(`ha-form-${item.type}`, { schema: item, diff --git a/src/components/ha-selector/ha-selector-duration.ts b/src/components/ha-selector/ha-selector-duration.ts new file mode 100644 index 0000000000..1471750d90 --- /dev/null +++ b/src/components/ha-selector/ha-selector-duration.ts @@ -0,0 +1,37 @@ +import "../ha-duration-input"; +import { html, LitElement } from "lit"; +import { customElement, property } from "lit/decorators"; +import { DurationSelector } from "../../data/selector"; +import { HomeAssistant } from "../../types"; + +@customElement("ha-selector-duration") +export class HaTimeDuration extends LitElement { + @property() public hass!: HomeAssistant; + + @property() public selector!: DurationSelector; + + @property() public value?: string; + + @property() public label?: string; + + @property({ type: Boolean }) public disabled = false; + + @property({ type: Boolean }) public required = true; + + protected render() { + return html` + + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-selector-duration": HaTimeDuration; + } +} diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts index 565ef8889e..fa1d48ff63 100644 --- a/src/components/ha-selector/ha-selector-text.ts +++ b/src/components/ha-selector/ha-selector-text.ts @@ -22,6 +22,8 @@ export class HaTextSelector extends LitElement { @property({ type: Boolean }) public disabled = false; + @property({ type: Boolean }) public required = true; + @state() private _unmaskedPassword = false; protected render() { @@ -35,7 +37,7 @@ export class HaTextSelector extends LitElement { autocapitalize="none" autocomplete="off" spellcheck="false" - required + .required=${this.required} autogrow >`; } @@ -50,7 +52,7 @@ export class HaTextSelector extends LitElement { ? // reserve some space for the icon. html`
` : this.selector.text?.suffix} - required + .required=${this.required} > ${this.selector.text?.type === "password" ? html` - - - - + .computeLabel=${this._computeLabelCallback} + > `; } private _valueChanged(ev: CustomEvent): void { - handleChangeEvent(this, ev); + ev.stopPropagation(); + const newTrigger = ev.detail.value; + + Object.keys(newTrigger).forEach((key) => + newTrigger[key] === undefined || newTrigger[key] === "" + ? delete newTrigger[key] + : {} + ); + + fireEvent(this, "value-changed", { value: newTrigger }); + } + + private _computeLabelCallback(schema: HaFormSchema): string { + return this.hass.localize( + schema.name === "entity_id" + ? "ui.components.entity.entity-picker.entity" + : `ui.panel.config.automation.editor.triggers.type.state.${schema.name}` + ); } }