diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts index f1efcf9df3..038dda86bb 100644 --- a/src/components/ha-base-time-input.ts +++ b/src/components/ha-base-time-input.ts @@ -1,10 +1,11 @@ import "@material/mwc-list/mwc-list-item"; import { css, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; +import { ifDefined } from "lit/directives/if-defined"; import { fireEvent } from "../common/dom/fire_event"; import { stopPropagation } from "../common/dom/stop_propagation"; import "./ha-select"; -import "./ha-textfield"; +import { HaTextField } from "./ha-textfield"; import "./ha-input-helper-text"; export interface TimeChangedEvent { @@ -36,7 +37,7 @@ export class HaBaseTimeInput extends LitElement { /** * determines if inputs are required */ - @property({ type: Boolean }) public required?: boolean; + @property({ type: Boolean }) public required = false; /** * 12 or 24 hr format @@ -123,11 +124,6 @@ export class HaBaseTimeInput extends LitElement { */ @property() amPm: "AM" | "PM" = "AM"; - /** - * Formatted time string - */ - @property() value?: string; - protected render(): TemplateResult { return html` ${this.label @@ -140,11 +136,11 @@ export class HaBaseTimeInput extends LitElement { id="day" type="number" inputmode="numeric" - .value=${this.days} + .value=${this.days.toFixed()} .label=${this.dayLabel} name="days" @input=${this._valueChanged} - @focus=${this._onFocus} + @focusin=${this._onFocus} no-spinner .required=${this.required} .autoValidate=${this.autoValidate} @@ -161,16 +157,16 @@ export class HaBaseTimeInput extends LitElement { id="hour" type="number" inputmode="numeric" - .value=${this.hours} + .value=${this.hours.toFixed()} .label=${this.hourLabel} name="hours" @input=${this._valueChanged} - @focus=${this._onFocus} + @focusin=${this._onFocus} no-spinner .required=${this.required} .autoValidate=${this.autoValidate} maxlength="2" - .max=${this._hourMax} + max=${ifDefined(this._hourMax)} min="0" .disabled=${this.disabled} suffix=":" @@ -184,7 +180,7 @@ export class HaBaseTimeInput extends LitElement { .value=${this._formatValue(this.minutes)} .label=${this.minLabel} @input=${this._valueChanged} - @focus=${this._onFocus} + @focusin=${this._onFocus} name="minutes" no-spinner .required=${this.required} @@ -205,7 +201,7 @@ export class HaBaseTimeInput extends LitElement { .value=${this._formatValue(this.seconds)} .label=${this.secLabel} @input=${this._valueChanged} - @focus=${this._onFocus} + @focusin=${this._onFocus} name="seconds" no-spinner .required=${this.required} @@ -226,7 +222,7 @@ export class HaBaseTimeInput extends LitElement { .value=${this._formatValue(this.milliseconds, 3)} .label=${this.millisecLabel} @input=${this._valueChanged} - @focus=${this._onFocus} + @focusin=${this._onFocus} name="milliseconds" no-spinner .required=${this.required} @@ -260,9 +256,10 @@ export class HaBaseTimeInput extends LitElement { `; } - private _valueChanged(ev) { - this[ev.target.name] = - ev.target.name === "amPm" ? ev.target.value : Number(ev.target.value); + private _valueChanged(ev: InputEvent) { + const textField = ev.currentTarget as HaTextField; + this[textField.name] = + textField.name === "amPm" ? textField.value : Number(textField.value); const value: TimeChangedEvent = { hours: this.hours, minutes: this.minutes, @@ -277,8 +274,8 @@ export class HaBaseTimeInput extends LitElement { }); } - private _onFocus(ev) { - ev.target.select(); + private _onFocus(ev: FocusEvent) { + (ev.currentTarget as HaTextField).select(); } /** @@ -293,7 +290,7 @@ export class HaBaseTimeInput extends LitElement { */ private get _hourMax() { if (this.noHoursLimit) { - return null; + return undefined; } if (this.format === 12) { return 12; diff --git a/src/components/ha-duration-input.ts b/src/components/ha-duration-input.ts index 408d1e85c7..7d35fe160f 100644 --- a/src/components/ha-duration-input.ts +++ b/src/components/ha-duration-input.ts @@ -14,17 +14,17 @@ export interface HaDurationData { @customElement("ha-duration-input") class HaDurationInput extends LitElement { - @property({ attribute: false }) public data!: HaDurationData; + @property({ attribute: false }) public data?: HaDurationData; @property() public label?: string; @property() public helper?: string; - @property({ type: Boolean }) public required?: boolean; + @property({ type: Boolean }) public required = false; - @property({ type: Boolean }) public enableMillisecond?: boolean; + @property({ type: Boolean }) public enableMillisecond = false; - @property({ type: Boolean }) public enableDay?: boolean; + @property({ type: Boolean }) public enableDay = false; @property({ type: Boolean }) public disabled = false; diff --git a/src/components/ha-form/ha-form-positive_time_period_dict.ts b/src/components/ha-form/ha-form-positive_time_period_dict.ts index a693ce2721..ea2d56b114 100644 --- a/src/components/ha-form/ha-form-positive_time_period_dict.ts +++ b/src/components/ha-form/ha-form-positive_time_period_dict.ts @@ -5,9 +5,9 @@ import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./types"; @customElement("ha-form-positive_time_period_dict") export class HaFormTimePeriod extends LitElement implements HaFormElement { - @property() public schema!: HaFormTimeSchema; + @property({ attribute: false }) public schema!: HaFormTimeSchema; - @property() public data!: HaFormTimeData; + @property({ attribute: false }) public data!: HaFormTimeData; @property() public label!: string; @@ -25,7 +25,7 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement { return html` diff --git a/src/components/ha-selector/ha-selector-datetime.ts b/src/components/ha-selector/ha-selector-datetime.ts index cdb15ccacc..327122b92a 100644 --- a/src/components/ha-selector/ha-selector-datetime.ts +++ b/src/components/ha-selector/ha-selector-datetime.ts @@ -11,9 +11,9 @@ import type { HaTimeInput } from "../ha-time-input"; @customElement("ha-selector-datetime") export class HaDateTimeSelector extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public selector!: DateTimeSelector; + @property({ attribute: false }) public selector!: DateTimeSelector; @property() public value?: string; diff --git a/src/components/ha-selector/ha-selector-duration.ts b/src/components/ha-selector/ha-selector-duration.ts index 61bde6fa21..a2ad44a5d5 100644 --- a/src/components/ha-selector/ha-selector-duration.ts +++ b/src/components/ha-selector/ha-selector-duration.ts @@ -2,15 +2,15 @@ import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import type { DurationSelector } from "../../data/selector"; import type { HomeAssistant } from "../../types"; -import "../ha-duration-input"; +import { HaDurationData } from "../ha-duration-input"; @customElement("ha-selector-duration") export class HaTimeDuration extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public selector!: DurationSelector; + @property({ attribute: false }) public selector!: DurationSelector; - @property() public value?: string; + @property({ attribute: false }) public value?: HaDurationData; @property() public label?: string; @@ -28,7 +28,7 @@ export class HaTimeDuration extends LitElement { .data=${this.value} .disabled=${this.disabled} .required=${this.required} - .enableDay=${this.selector.duration.enable_day} + ?enableDay=${this.selector.duration.enable_day} > `; } diff --git a/src/components/ha-selector/ha-selector-time.ts b/src/components/ha-selector/ha-selector-time.ts index 80c753ba03..40982435a2 100644 --- a/src/components/ha-selector/ha-selector-time.ts +++ b/src/components/ha-selector/ha-selector-time.ts @@ -6,9 +6,9 @@ import "../ha-time-input"; @customElement("ha-selector-time") export class HaTimeSelector extends LitElement { - @property() public hass!: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; - @property() public selector!: TimeSelector; + @property({ attribute: false }) public selector!: TimeSelector; @property() public value?: string; diff --git a/src/components/ha-time-input.ts b/src/components/ha-time-input.ts index eadbc744ce..cba4a0a95a 100644 --- a/src/components/ha-time-input.ts +++ b/src/components/ha-time-input.ts @@ -43,7 +43,7 @@ export class HaTimeInput extends LitElement { .minutes=${Number(parts[1])} .seconds=${Number(parts[2])} .format=${useAMPM ? 12 : 24} - .amPm=${useAMPM && (numberHours >= 12 ? "PM" : "AM")} + .amPm=${useAMPM && numberHours >= 12 ? "PM" : "AM"} .disabled=${this.disabled} @value-changed=${this._timeChanged} .enableSecond=${this.enableSecond} diff --git a/src/dialogs/more-info/controls/more-info-input_datetime.ts b/src/dialogs/more-info/controls/more-info-input_datetime.ts index 2bcb5f534e..fbe6917fd6 100644 --- a/src/dialogs/more-info/controls/more-info-input_datetime.ts +++ b/src/dialogs/more-info/controls/more-info-input_datetime.ts @@ -60,7 +60,7 @@ class MoreInfoInputDatetime extends LitElement { ev.stopPropagation(); } - private _timeChanged(ev): void { + private _timeChanged(ev: CustomEvent<{ value: string }>): void { setInputDateTimeValue( this.hass!, this.stateObj!.entity_id, @@ -69,10 +69,9 @@ class MoreInfoInputDatetime extends LitElement { ? this.stateObj!.state.split(" ")[0] : undefined ); - ev.target.blur(); } - private _dateChanged(ev): void { + private _dateChanged(ev: CustomEvent<{ value: string }>): void { setInputDateTimeValue( this.hass!, this.stateObj!.entity_id, @@ -81,8 +80,6 @@ class MoreInfoInputDatetime extends LitElement { : undefined, ev.detail.value ); - - ev.target.blur(); } static get styles(): CSSResultGroup { diff --git a/src/panels/config/automation/action/types/ha-automation-action-delay.ts b/src/panels/config/automation/action/types/ha-automation-action-delay.ts index 2d71065f8b..f88a098b4b 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-delay.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-delay.ts @@ -1,5 +1,5 @@ import { html, LitElement, PropertyValues } from "lit"; -import { customElement, property } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { hasTemplate } from "../../../../../common/string/has-template"; import type { HaDurationData } from "../../../../../components/ha-duration-input"; @@ -13,9 +13,9 @@ import { createDurationData } from "../../../../../common/datetime/create_durati export class HaDelayAction extends LitElement implements ActionElement { @property({ attribute: false }) public hass!: HomeAssistant; - @property() public action!: DelayAction; + @property({ attribute: false }) public action!: DelayAction; - @property() public _timeData?: HaDurationData; + @state() private _timeData?: HaDurationData; public static get defaultConfig() { return { delay: "" }; diff --git a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts index 8107017d54..f1162bf7aa 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts @@ -10,6 +10,7 @@ import { ActionElement, handleChangeEvent } from "../ha-automation-action-row"; import "../../../../../components/ha-duration-input"; import { createDurationData } from "../../../../../common/datetime/create_duration_data"; import { TimeChangedEvent } from "../../../../../components/ha-base-time-input"; +import { ensureArray } from "../../../../../common/ensure-array"; @customElement("ha-automation-action-wait_for_trigger") export class HaWaitForTriggerAction @@ -18,14 +19,13 @@ export class HaWaitForTriggerAction { @property({ attribute: false }) public hass!: HomeAssistant; - @property() public action!: WaitForTriggerAction; + @property({ attribute: false }) public action!: WaitForTriggerAction; public static get defaultConfig() { return { wait_for_trigger: [] }; } protected render() { - const { wait_for_trigger, continue_on_timeout } = this.action; const timeData = createDurationData(this.action.timeout); return html` @@ -43,12 +43,12 @@ export class HaWaitForTriggerAction )} > ): void { const stateObj = this.hass!.states[this._config!.entity]; setInputDateTimeValue( this.hass!, @@ -105,10 +105,9 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow { ev.detail.value, stateObj.attributes.has_date ? stateObj.state.split(" ")[0] : undefined ); - ev.target.blur(); } - private _dateChanged(ev): void { + private _dateChanged(ev: CustomEvent<{ value: string }>): void { const stateObj = this.hass!.states[this._config!.entity]; setInputDateTimeValue( @@ -117,8 +116,6 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow { stateObj.attributes.has_time ? stateObj.state.split(" ")[1] : undefined, ev.detail.value ); - - ev.target.blur(); } static get styles(): CSSResultGroup {