mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-11 19:36:35 +00:00
Add helpers to all selectors (#12230)
This commit is contained in:
parent
358f91c2a9
commit
59595aabde
@ -261,6 +261,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
|
|||||||
|
|
||||||
@state() private _required = false;
|
@state() private _required = false;
|
||||||
|
|
||||||
|
@state() private _helper = false;
|
||||||
|
|
||||||
@state() private _label = true;
|
@state() private _label = true;
|
||||||
|
|
||||||
private data = SCHEMAS.map(() => ({}));
|
private data = SCHEMAS.map(() => ({}));
|
||||||
@ -418,6 +420,13 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
|
|||||||
@change=${this._handleOptionChange}
|
@change=${this._handleOptionChange}
|
||||||
></ha-switch>
|
></ha-switch>
|
||||||
</ha-formfield>
|
</ha-formfield>
|
||||||
|
<ha-formfield label="Helper text">
|
||||||
|
<ha-switch
|
||||||
|
.name=${"helper"}
|
||||||
|
.checked=${this._helper}
|
||||||
|
@change=${this._handleOptionChange}
|
||||||
|
></ha-switch>
|
||||||
|
</ha-formfield>
|
||||||
</div>
|
</div>
|
||||||
${SCHEMAS.map((info, idx) => {
|
${SCHEMAS.map((info, idx) => {
|
||||||
const data = this.data[idx];
|
const data = this.data[idx];
|
||||||
@ -446,6 +455,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
|
|||||||
.disabled=${this._disabled}
|
.disabled=${this._disabled}
|
||||||
.required=${this._required}
|
.required=${this._required}
|
||||||
@value-changed=${valueChanged}
|
@value-changed=${valueChanged}
|
||||||
|
.helper=${this._helper ? "Helper text" : undefined}
|
||||||
></ha-selector>
|
></ha-selector>
|
||||||
</ha-settings-row>
|
</ha-settings-row>
|
||||||
`
|
`
|
||||||
@ -466,7 +476,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
|
|||||||
width: 60;
|
width: 60;
|
||||||
}
|
}
|
||||||
.options {
|
.options {
|
||||||
padding: 16px 48px;
|
max-width: 800px;
|
||||||
|
margin: 16px auto;
|
||||||
}
|
}
|
||||||
.options ha-formfield {
|
.options ha-formfield {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
|
@ -52,6 +52,8 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
|
|||||||
|
|
||||||
@property() public value?: string;
|
@property() public value?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property() public devices?: DeviceRegistryEntry[];
|
@property() public devices?: DeviceRegistryEntry[];
|
||||||
|
|
||||||
@property() public areas?: AreaRegistryEntry[];
|
@property() public areas?: AreaRegistryEntry[];
|
||||||
@ -269,6 +271,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
|
|||||||
? this.hass.localize("ui.components.device-picker.device")
|
? this.hass.localize("ui.components.device-picker.device")
|
||||||
: this.label}
|
: this.label}
|
||||||
.value=${this._value}
|
.value=${this._value}
|
||||||
|
.helper=${this.helper}
|
||||||
.renderer=${rowRenderer}
|
.renderer=${rowRenderer}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
|
@ -11,6 +11,8 @@ class HaDevicesPicker extends LitElement {
|
|||||||
|
|
||||||
@property() public value?: string[];
|
@property() public value?: string[];
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required?: boolean;
|
@property({ type: Boolean }) public required?: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -64,6 +66,7 @@ class HaDevicesPicker extends LitElement {
|
|||||||
<div>
|
<div>
|
||||||
<ha-device-picker
|
<ha-device-picker
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
|
.helper=${this.helper}
|
||||||
.includeDomains=${this.includeDomains}
|
.includeDomains=${this.includeDomains}
|
||||||
.excludeDomains=${this.excludeDomains}
|
.excludeDomains=${this.excludeDomains}
|
||||||
.includeDeviceClasses=${this.includeDeviceClasses}
|
.includeDeviceClasses=${this.includeDeviceClasses}
|
||||||
|
@ -16,6 +16,8 @@ class HaEntitiesPickerLight extends LitElement {
|
|||||||
|
|
||||||
@property({ type: Boolean }) public required?: boolean;
|
@property({ type: Boolean }) public required?: boolean;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Show entities from specific domains.
|
* Show entities from specific domains.
|
||||||
* @type {string}
|
* @type {string}
|
||||||
@ -110,6 +112,7 @@ class HaEntitiesPickerLight extends LitElement {
|
|||||||
.includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
|
.includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
|
||||||
.entityFilter=${this._entityFilter}
|
.entityFilter=${this._entityFilter}
|
||||||
.label=${this.pickEntityLabel}
|
.label=${this.pickEntityLabel}
|
||||||
|
.helper=${this.helper}
|
||||||
.required=${this.required && !currentEntities.length}
|
.required=${this.required && !currentEntities.length}
|
||||||
@value-changed=${this._addEntity}
|
@value-changed=${this._addEntity}
|
||||||
></ha-entity-picker>
|
></ha-entity-picker>
|
||||||
|
@ -28,6 +28,8 @@ class HaEntityAttributePicker extends LitElement {
|
|||||||
|
|
||||||
@property() public value?: string;
|
@property() public value?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean }) private _opened = false;
|
@property({ type: Boolean }) private _opened = false;
|
||||||
|
|
||||||
@query("ha-combo-box", true) private _comboBox!: HaComboBox;
|
@query("ha-combo-box", true) private _comboBox!: HaComboBox;
|
||||||
@ -64,6 +66,7 @@ class HaEntityAttributePicker extends LitElement {
|
|||||||
)}
|
)}
|
||||||
.disabled=${this.disabled || !this.entityId}
|
.disabled=${this.disabled || !this.entityId}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
|
.helper=${this.helper}
|
||||||
.allowCustomValue=${this.allowCustomValue}
|
.allowCustomValue=${this.allowCustomValue}
|
||||||
item-value-path="value"
|
item-value-path="value"
|
||||||
item-label-path="label"
|
item-label-path="label"
|
||||||
|
@ -48,6 +48,8 @@ export class HaEntityPicker extends LitElement {
|
|||||||
|
|
||||||
@property() public value?: string;
|
@property() public value?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Show entities from specific domains.
|
* Show entities from specific domains.
|
||||||
* @type {Array}
|
* @type {Array}
|
||||||
@ -304,6 +306,7 @@ export class HaEntityPicker extends LitElement {
|
|||||||
.label=${this.label === undefined
|
.label=${this.label === undefined
|
||||||
? this.hass.localize("ui.components.entity.entity-picker.entity")
|
? this.hass.localize("ui.components.entity.entity-picker.entity")
|
||||||
: this.label}
|
: this.label}
|
||||||
|
.helper=${this.helper}
|
||||||
.allowCustomValue=${this.allowCustomEntity}
|
.allowCustomValue=${this.allowCustomEntity}
|
||||||
.filteredItems=${this._states}
|
.filteredItems=${this._states}
|
||||||
.renderer=${rowRenderer}
|
.renderer=${rowRenderer}
|
||||||
|
@ -29,6 +29,8 @@ class HaAddonPicker extends LitElement {
|
|||||||
|
|
||||||
@property() public value = "";
|
@property() public value = "";
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@state() private _addons?: HassioAddonInfo[];
|
@state() private _addons?: HassioAddonInfo[];
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
@ -62,6 +64,7 @@ class HaAddonPicker extends LitElement {
|
|||||||
.value=${this._value}
|
.value=${this._value}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
|
.helper=${this.helper}
|
||||||
.renderer=${rowRenderer}
|
.renderer=${rowRenderer}
|
||||||
.items=${this._addons}
|
.items=${this._addons}
|
||||||
item-value-path="slug"
|
item-value-path="slug"
|
||||||
|
@ -49,6 +49,8 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
|
|||||||
|
|
||||||
@property() public value?: string;
|
@property() public value?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property() public placeholder?: string;
|
@property() public placeholder?: string;
|
||||||
|
|
||||||
@property({ type: Boolean, attribute: "no-add" })
|
@property({ type: Boolean, attribute: "no-add" })
|
||||||
@ -312,6 +314,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
|
|||||||
return html`
|
return html`
|
||||||
<ha-combo-box
|
<ha-combo-box
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
|
.helper=${this.helper}
|
||||||
item-value-path="area_id"
|
item-value-path="area_id"
|
||||||
item-id-path="area_id"
|
item-id-path="area_id"
|
||||||
item-label-path="name"
|
item-label-path="name"
|
||||||
|
@ -15,6 +15,8 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
|
|||||||
|
|
||||||
@property() public value?: string[];
|
@property() public value?: string[];
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property() public placeholder?: string;
|
@property() public placeholder?: string;
|
||||||
|
|
||||||
@property({ type: Boolean, attribute: "no-add" })
|
@property({ type: Boolean, attribute: "no-add" })
|
||||||
@ -90,6 +92,7 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
|
|||||||
.noAdd=${this.noAdd}
|
.noAdd=${this.noAdd}
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.label=${this.pickAreaLabel}
|
.label=${this.pickAreaLabel}
|
||||||
|
.helper=${this.helper}
|
||||||
.includeDomains=${this.includeDomains}
|
.includeDomains=${this.includeDomains}
|
||||||
.excludeDomains=${this.excludeDomains}
|
.excludeDomains=${this.excludeDomains}
|
||||||
.includeDeviceClasses=${this.includeDeviceClasses}
|
.includeDeviceClasses=${this.includeDeviceClasses}
|
||||||
|
@ -5,6 +5,7 @@ import { fireEvent } from "../common/dom/fire_event";
|
|||||||
import { stopPropagation } from "../common/dom/stop_propagation";
|
import { stopPropagation } from "../common/dom/stop_propagation";
|
||||||
import "./ha-select";
|
import "./ha-select";
|
||||||
import "./ha-textfield";
|
import "./ha-textfield";
|
||||||
|
import "./ha-input-helper-text";
|
||||||
|
|
||||||
export interface TimeChangedEvent {
|
export interface TimeChangedEvent {
|
||||||
days?: number;
|
days?: number;
|
||||||
@ -253,7 +254,9 @@ export class HaBaseTimeInput extends LitElement {
|
|||||||
<mwc-list-item value="PM">PM</mwc-list-item>
|
<mwc-list-item value="PM">PM</mwc-list-item>
|
||||||
</ha-select>`}
|
</ha-select>`}
|
||||||
</div>
|
</div>
|
||||||
${this.helper ? html`<div class="helper">${this.helper}</div>` : ""}
|
${this.helper
|
||||||
|
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
|
||||||
|
: ""}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -350,13 +353,6 @@ export class HaBaseTimeInput extends LitElement {
|
|||||||
color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
|
color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.helper {
|
|
||||||
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
|
|
||||||
font-size: 0.75rem;
|
|
||||||
padding-left: 16px;
|
|
||||||
padding-right: 16px;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -64,6 +64,8 @@ export class HaComboBox extends LitElement {
|
|||||||
|
|
||||||
@property() public validationMessage?: string;
|
@property() public validationMessage?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ attribute: "error-message" }) public errorMessage?: string;
|
@property({ attribute: "error-message" }) public errorMessage?: string;
|
||||||
|
|
||||||
@property({ type: Boolean }) public invalid?: boolean;
|
@property({ type: Boolean }) public invalid?: boolean;
|
||||||
@ -147,6 +149,8 @@ export class HaComboBox extends LitElement {
|
|||||||
.suffix=${html`<div style="width: 28px;"></div>`}
|
.suffix=${html`<div style="width: 28px;"></div>`}
|
||||||
.icon=${this.icon}
|
.icon=${this.icon}
|
||||||
.invalid=${this.invalid}
|
.invalid=${this.invalid}
|
||||||
|
.helper=${this.helper}
|
||||||
|
helperPersistent
|
||||||
>
|
>
|
||||||
<slot name="icon" slot="leadingIcon"></slot>
|
<slot name="icon" slot="leadingIcon"></slot>
|
||||||
</ha-textfield>
|
</ha-textfield>
|
||||||
|
@ -39,11 +39,15 @@ export class HaDateInput extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return html`<ha-textfield
|
return html`<ha-textfield
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
|
.helper=${this.helper}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
iconTrailing
|
iconTrailing
|
||||||
|
helperPersistent
|
||||||
@click=${this._openDialog}
|
@click=${this._openDialog}
|
||||||
.value=${this.value
|
.value=${this.value
|
||||||
? formatDateNumeric(new Date(this.value), this.locale)
|
? formatDateNumeric(new Date(this.value), this.locale)
|
||||||
|
@ -31,6 +31,8 @@ export class HaIconPicker extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property() public placeholder?: string;
|
@property() public placeholder?: string;
|
||||||
|
|
||||||
@property() public fallbackPath?: string;
|
@property() public fallbackPath?: string;
|
||||||
@ -57,6 +59,7 @@ export class HaIconPicker extends LitElement {
|
|||||||
allow-custom-value
|
allow-custom-value
|
||||||
.filteredItems=${iconItems}
|
.filteredItems=${iconItems}
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
|
.helper=${this.helper}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
.placeholder=${this.placeholder}
|
.placeholder=${this.placeholder}
|
||||||
|
25
src/components/ha-input-helper-text.ts
Normal file
25
src/components/ha-input-helper-text.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { css, html, LitElement, TemplateResult } from "lit";
|
||||||
|
import { customElement } from "lit/decorators";
|
||||||
|
|
||||||
|
@customElement("ha-input-helper-text")
|
||||||
|
class InputHelperText extends LitElement {
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
return html`<slot></slot>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"ha-input-helper-text": InputHelperText;
|
||||||
|
}
|
||||||
|
}
|
@ -46,6 +46,9 @@ class HaLabeledSlider extends PolymerElement {
|
|||||||
value="{{value}}"
|
value="{{value}}"
|
||||||
></ha-slider>
|
></ha-slider>
|
||||||
</div>
|
</div>
|
||||||
|
<template is="dom-if" if="[[helper]]">
|
||||||
|
<ha-input-helper-text>[[helper]]</ha-input-helper-text>
|
||||||
|
</template>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -62,6 +65,7 @@ class HaLabeledSlider extends PolymerElement {
|
|||||||
max: Number,
|
max: Number,
|
||||||
pin: Boolean,
|
pin: Boolean,
|
||||||
step: Number,
|
step: Number,
|
||||||
|
helper: String,
|
||||||
|
|
||||||
extra: {
|
extra: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
@ -14,6 +14,8 @@ export class HaAddonSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = true;
|
@property({ type: Boolean }) public required = true;
|
||||||
@ -23,6 +25,7 @@ export class HaAddonSelector extends LitElement {
|
|||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
|
.helper=${this.helper}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
allow-custom-entity
|
allow-custom-entity
|
||||||
|
@ -18,6 +18,8 @@ export class HaAreaSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@state() public _configEntries?: ConfigEntry[];
|
@state() public _configEntries?: ConfigEntry[];
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
@ -47,6 +49,7 @@ export class HaAreaSelector extends LitElement {
|
|||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
|
.helper=${this.helper}
|
||||||
no-add
|
no-add
|
||||||
.deviceFilter=${this._filterDevices}
|
.deviceFilter=${this._filterDevices}
|
||||||
.entityFilter=${this._filterEntities}
|
.entityFilter=${this._filterEntities}
|
||||||
@ -66,6 +69,7 @@ export class HaAreaSelector extends LitElement {
|
|||||||
<ha-areas-picker
|
<ha-areas-picker
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
|
.helper=${this.helper}
|
||||||
.pickAreaLabel=${this.label}
|
.pickAreaLabel=${this.label}
|
||||||
no-add
|
no-add
|
||||||
.deviceFilter=${this._filterDevices}
|
.deviceFilter=${this._filterDevices}
|
||||||
|
@ -16,6 +16,8 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = true;
|
@property({ type: Boolean }) public required = true;
|
||||||
@ -32,6 +34,7 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
|
|||||||
this.context?.filter_entity}
|
this.context?.filter_entity}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
|
.helper=${this.helper}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
allow-custom-value
|
allow-custom-value
|
||||||
|
@ -4,6 +4,7 @@ import { fireEvent } from "../../common/dom/fire_event";
|
|||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
import "../ha-formfield";
|
import "../ha-formfield";
|
||||||
import "../ha-switch";
|
import "../ha-switch";
|
||||||
|
import "../ha-input-helper-text";
|
||||||
|
|
||||||
@customElement("ha-selector-boolean")
|
@customElement("ha-selector-boolean")
|
||||||
export class HaBooleanSelector extends LitElement {
|
export class HaBooleanSelector extends LitElement {
|
||||||
@ -13,16 +14,23 @@ export class HaBooleanSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
protected render() {
|
protected render() {
|
||||||
return html`<ha-formfield alignEnd spaceBetween .label=${this.label}>
|
return html`
|
||||||
<ha-switch
|
<ha-formfield alignEnd spaceBetween .label=${this.label}>
|
||||||
.checked=${this.value}
|
<ha-switch
|
||||||
@change=${this._handleChange}
|
.checked=${this.value}
|
||||||
.disabled=${this.disabled}
|
@change=${this._handleChange}
|
||||||
></ha-switch>
|
.disabled=${this.disabled}
|
||||||
</ha-formfield>`;
|
></ha-switch>
|
||||||
|
</ha-formfield>
|
||||||
|
${this.helper
|
||||||
|
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
|
||||||
|
: ""}
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _handleChange(ev) {
|
private _handleChange(ev) {
|
||||||
@ -35,12 +43,10 @@ export class HaBooleanSelector extends LitElement {
|
|||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return css`
|
return css`
|
||||||
:host {
|
|
||||||
height: 56px;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
ha-formfield {
|
ha-formfield {
|
||||||
width: 100%;
|
display: flex;
|
||||||
|
height: 56px;
|
||||||
|
align-items: center;
|
||||||
--mdc-typography-body2-font-size: 1em;
|
--mdc-typography-body2-font-size: 1em;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -16,6 +16,8 @@ export class HaColorRGBSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean, reflect: true }) public disabled = false;
|
@property({ type: Boolean, reflect: true }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = true;
|
@property({ type: Boolean }) public required = true;
|
||||||
@ -24,9 +26,11 @@ export class HaColorRGBSelector extends LitElement {
|
|||||||
return html`
|
return html`
|
||||||
<ha-textfield
|
<ha-textfield
|
||||||
type="color"
|
type="color"
|
||||||
|
helperPersistent
|
||||||
.value=${this.value ? rgb2hex(this.value as any) : ""}
|
.value=${this.value ? rgb2hex(this.value as any) : ""}
|
||||||
.label=${this.label || ""}
|
.label=${this.label || ""}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
|
.helper=${this.helper}
|
||||||
.disalbled=${this.disabled}
|
.disalbled=${this.disabled}
|
||||||
@change=${this._valueChanged}
|
@change=${this._valueChanged}
|
||||||
></ha-textfield>
|
></ha-textfield>
|
||||||
|
@ -15,6 +15,8 @@ export class HaColorTempSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean, reflect: true }) public disabled = false;
|
@property({ type: Boolean, reflect: true }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = true;
|
@property({ type: Boolean }) public required = true;
|
||||||
@ -29,6 +31,7 @@ export class HaColorTempSelector extends LitElement {
|
|||||||
.max=${this.selector.color_temp.max_mireds ?? 500}
|
.max=${this.selector.color_temp.max_mireds ?? 500}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
|
.helper=${this.helper}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
@change=${this._valueChanged}
|
@change=${this._valueChanged}
|
||||||
></ha-labeled-slider>
|
></ha-labeled-slider>
|
||||||
|
@ -14,6 +14,8 @@ export class HaDateSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean, reflect: true }) public disabled = false;
|
@property({ type: Boolean, reflect: true }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = true;
|
@property({ type: Boolean }) public required = true;
|
||||||
@ -26,6 +28,7 @@ export class HaDateSelector extends LitElement {
|
|||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
|
.helper=${this.helper}
|
||||||
>
|
>
|
||||||
</ha-date-input>
|
</ha-date-input>
|
||||||
`;
|
`;
|
||||||
|
@ -6,6 +6,7 @@ import type { HomeAssistant } from "../../types";
|
|||||||
import "../ha-date-input";
|
import "../ha-date-input";
|
||||||
import type { HaDateInput } from "../ha-date-input";
|
import type { HaDateInput } from "../ha-date-input";
|
||||||
import "../ha-time-input";
|
import "../ha-time-input";
|
||||||
|
import "../ha-input-helper-text";
|
||||||
import type { HaTimeInput } from "../ha-time-input";
|
import type { HaTimeInput } from "../ha-time-input";
|
||||||
|
|
||||||
@customElement("ha-selector-datetime")
|
@customElement("ha-selector-datetime")
|
||||||
@ -18,6 +19,8 @@ export class HaDateTimeSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean, reflect: true }) public disabled = false;
|
@property({ type: Boolean, reflect: true }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = true;
|
@property({ type: Boolean }) public required = true;
|
||||||
@ -30,23 +33,28 @@ export class HaDateTimeSelector extends LitElement {
|
|||||||
const values = this.value?.split(" ");
|
const values = this.value?.split(" ");
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<ha-date-input
|
<div class="input">
|
||||||
.label=${this.label}
|
<ha-date-input
|
||||||
.locale=${this.hass.locale}
|
.label=${this.label}
|
||||||
.disabled=${this.disabled}
|
.locale=${this.hass.locale}
|
||||||
.required=${this.required}
|
.disabled=${this.disabled}
|
||||||
.value=${values?.[0]}
|
.required=${this.required}
|
||||||
@value-changed=${this._valueChanged}
|
.value=${values?.[0]}
|
||||||
>
|
@value-changed=${this._valueChanged}
|
||||||
</ha-date-input>
|
>
|
||||||
<ha-time-input
|
</ha-date-input>
|
||||||
enable-second
|
<ha-time-input
|
||||||
.value=${values?.[1] || "0:00:00"}
|
enable-second
|
||||||
.locale=${this.hass.locale}
|
.value=${values?.[1] || "0:00:00"}
|
||||||
.disabled=${this.disabled}
|
.locale=${this.hass.locale}
|
||||||
.required=${this.required}
|
.disabled=${this.disabled}
|
||||||
@value-changed=${this._valueChanged}
|
.required=${this.required}
|
||||||
></ha-time-input>
|
@value-changed=${this._valueChanged}
|
||||||
|
></ha-time-input>
|
||||||
|
</div>
|
||||||
|
${this.helper
|
||||||
|
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
|
||||||
|
: ""}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -58,7 +66,7 @@ export class HaDateTimeSelector extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
static styles = css`
|
static styles = css`
|
||||||
:host {
|
.input {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -17,6 +17,8 @@ export class HaDeviceSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@state() public _configEntries?: ConfigEntry[];
|
@state() public _configEntries?: ConfigEntry[];
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
@ -43,6 +45,7 @@ export class HaDeviceSelector extends LitElement {
|
|||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
|
.helper=${this.helper}
|
||||||
.deviceFilter=${this._filterDevices}
|
.deviceFilter=${this._filterDevices}
|
||||||
.includeDeviceClasses=${this.selector.device.entity?.device_class
|
.includeDeviceClasses=${this.selector.device.entity?.device_class
|
||||||
? [this.selector.device.entity.device_class]
|
? [this.selector.device.entity.device_class]
|
||||||
@ -62,6 +65,7 @@ export class HaDeviceSelector extends LitElement {
|
|||||||
<ha-devices-picker
|
<ha-devices-picker
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
|
.helper=${this.helper}
|
||||||
.includeDeviceClasses=${this.selector.device.entity?.device_class
|
.includeDeviceClasses=${this.selector.device.entity?.device_class
|
||||||
? [this.selector.device.entity.device_class]
|
? [this.selector.device.entity.device_class]
|
||||||
: undefined}
|
: undefined}
|
||||||
|
@ -23,6 +23,8 @@ export class HaEntitySelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = true;
|
@property({ type: Boolean }) public required = true;
|
||||||
@ -33,6 +35,7 @@ export class HaEntitySelector extends LitElement {
|
|||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
|
.helper=${this.helper}
|
||||||
.includeEntities=${this.selector.entity.include_entities}
|
.includeEntities=${this.selector.entity.include_entities}
|
||||||
.excludeEntities=${this.selector.entity.exclude_entities}
|
.excludeEntities=${this.selector.entity.exclude_entities}
|
||||||
.entityFilter=${this._filterEntities}
|
.entityFilter=${this._filterEntities}
|
||||||
@ -47,6 +50,7 @@ export class HaEntitySelector extends LitElement {
|
|||||||
<ha-entities-picker
|
<ha-entities-picker
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
|
.helper=${this.helper}
|
||||||
.entityFilter=${this._filterEntities}
|
.entityFilter=${this._filterEntities}
|
||||||
.includeEntities=${this.selector.entity.include_entities}
|
.includeEntities=${this.selector.entity.include_entities}
|
||||||
.excludeEntities=${this.selector.entity.exclude_entities}
|
.excludeEntities=${this.selector.entity.exclude_entities}
|
||||||
|
@ -15,6 +15,8 @@ export class HaIconSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean, reflect: true }) public disabled = false;
|
@property({ type: Boolean, reflect: true }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = true;
|
@property({ type: Boolean }) public required = true;
|
||||||
@ -26,6 +28,7 @@ export class HaIconSelector extends LitElement {
|
|||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
|
.helper=${this.helper}
|
||||||
.fallbackPath=${this.selector.icon.fallbackPath}
|
.fallbackPath=${this.selector.icon.fallbackPath}
|
||||||
.placeholder=${this.selector.icon.placeholder}
|
.placeholder=${this.selector.icon.placeholder}
|
||||||
@value-changed=${this._valueChanged}
|
@value-changed=${this._valueChanged}
|
||||||
|
@ -20,6 +20,8 @@ export class HaLocationSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean, reflect: true }) public disabled = false;
|
@property({ type: Boolean, reflect: true }) public disabled = false;
|
||||||
|
|
||||||
protected render() {
|
protected render() {
|
||||||
@ -27,6 +29,7 @@ export class HaLocationSelector extends LitElement {
|
|||||||
<ha-locations-editor
|
<ha-locations-editor
|
||||||
class="flex"
|
class="flex"
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
|
.helper=${this.helper}
|
||||||
.locations=${this._location(this.selector, this.value)}
|
.locations=${this._location(this.selector, this.value)}
|
||||||
@location-updated=${this._locationChanged}
|
@location-updated=${this._locationChanged}
|
||||||
@radius-updated=${this._radiusChanged}
|
@radius-updated=${this._radiusChanged}
|
||||||
|
@ -33,6 +33,8 @@ export class HaMediaSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean, reflect: true }) public disabled = false;
|
@property({ type: Boolean, reflect: true }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean, reflect: true }) public required = true;
|
@property({ type: Boolean, reflect: true }) public required = true;
|
||||||
@ -86,6 +88,7 @@ export class HaMediaSelector extends LitElement {
|
|||||||
.label=${this.label ||
|
.label=${this.label ||
|
||||||
this.hass.localize("ui.components.selectors.media.pick_media_player")}
|
this.hass.localize("ui.components.selectors.media.pick_media_player")}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
|
.helper=${this.helper}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
include-domains='["media_player"]'
|
include-domains='["media_player"]'
|
||||||
allow-custom-entity
|
allow-custom-entity
|
||||||
|
@ -6,6 +6,7 @@ import { NumberSelector } from "../../data/selector";
|
|||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
import "../ha-slider";
|
import "../ha-slider";
|
||||||
import "../ha-textfield";
|
import "../ha-textfield";
|
||||||
|
import "../ha-input-helper-text";
|
||||||
|
|
||||||
@customElement("ha-selector-number")
|
@customElement("ha-selector-number")
|
||||||
export class HaNumberSelector extends LitElement {
|
export class HaNumberSelector extends LitElement {
|
||||||
@ -26,8 +27,13 @@ export class HaNumberSelector extends LitElement {
|
|||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
protected render() {
|
protected render() {
|
||||||
return html`${this.selector.number.mode !== "box"
|
const isBox = this.selector.number.mode === "box";
|
||||||
? html`${this.label}${this.required ? "*" : ""}<ha-slider
|
|
||||||
|
return html`
|
||||||
|
${this.label}${this.required ? "*" : ""}
|
||||||
|
<div class="input">
|
||||||
|
${!isBox
|
||||||
|
? html`<ha-slider
|
||||||
.min=${this.selector.number.min}
|
.min=${this.selector.number.min}
|
||||||
.max=${this.selector.number.max}
|
.max=${this.selector.number.max}
|
||||||
.value=${this._value}
|
.value=${this._value}
|
||||||
@ -39,28 +45,33 @@ export class HaNumberSelector extends LitElement {
|
|||||||
@change=${this._handleSliderChange}
|
@change=${this._handleSliderChange}
|
||||||
>
|
>
|
||||||
</ha-slider>`
|
</ha-slider>`
|
||||||
|
: ""}
|
||||||
|
<ha-textfield
|
||||||
|
inputMode="numeric"
|
||||||
|
pattern="[0-9]+([\\.][0-9]+)?"
|
||||||
|
.label=${this.selector.number.mode !== "box" ? undefined : this.label}
|
||||||
|
.placeholder=${this.placeholder}
|
||||||
|
class=${classMap({ single: this.selector.number.mode === "box" })}
|
||||||
|
.min=${this.selector.number.min}
|
||||||
|
.max=${this.selector.number.max}
|
||||||
|
.value=${this.value ?? ""}
|
||||||
|
.step=${this.selector.number.step ?? 1}
|
||||||
|
helperPersistent
|
||||||
|
.helper=${isBox ? this.helper : undefined}
|
||||||
|
.disabled=${this.disabled}
|
||||||
|
.required=${this.required}
|
||||||
|
.suffix=${this.selector.number.unit_of_measurement}
|
||||||
|
type="number"
|
||||||
|
autoValidate
|
||||||
|
?no-spinner=${this.selector.number.mode !== "box"}
|
||||||
|
@input=${this._handleInputChange}
|
||||||
|
>
|
||||||
|
</ha-textfield>
|
||||||
|
</div>
|
||||||
|
${!isBox && this.helper
|
||||||
|
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
|
||||||
: ""}
|
: ""}
|
||||||
<ha-textfield
|
`;
|
||||||
inputMode="numeric"
|
|
||||||
pattern="[0-9]+([\\.][0-9]+)?"
|
|
||||||
.label=${this.selector.number.mode !== "box" ? undefined : this.label}
|
|
||||||
.placeholder=${this.placeholder}
|
|
||||||
class=${classMap({ single: this.selector.number.mode === "box" })}
|
|
||||||
.min=${this.selector.number.min}
|
|
||||||
.max=${this.selector.number.max}
|
|
||||||
.value=${this.value ?? ""}
|
|
||||||
.step=${this.selector.number.step ?? 1}
|
|
||||||
helperPersistent
|
|
||||||
.helper=${this.helper}
|
|
||||||
.disabled=${this.disabled}
|
|
||||||
.required=${this.required}
|
|
||||||
.suffix=${this.selector.number.unit_of_measurement}
|
|
||||||
type="number"
|
|
||||||
autoValidate
|
|
||||||
?no-spinner=${this.selector.number.mode !== "box"}
|
|
||||||
@input=${this._handleInputChange}
|
|
||||||
>
|
|
||||||
</ha-textfield>`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private get _value() {
|
private get _value() {
|
||||||
@ -92,7 +103,7 @@ export class HaNumberSelector extends LitElement {
|
|||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return css`
|
return css`
|
||||||
:host {
|
.input {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -58,6 +58,7 @@ export class HaSelectSelector extends LitElement {
|
|||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
${this._renderHelper()}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -76,6 +77,7 @@ export class HaSelectSelector extends LitElement {
|
|||||||
`
|
`
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
${this._renderHelper()}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -107,6 +109,7 @@ export class HaSelectSelector extends LitElement {
|
|||||||
item-label-path="label"
|
item-label-path="label"
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
|
.helper=${this.helper}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
.required=${this.required && !value.length}
|
.required=${this.required && !value.length}
|
||||||
.value=${this._filter}
|
.value=${this._filter}
|
||||||
@ -131,6 +134,7 @@ export class HaSelectSelector extends LitElement {
|
|||||||
item-label-path="label"
|
item-label-path="label"
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
|
.helper=${this.helper}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
.items=${options}
|
.items=${options}
|
||||||
@ -161,6 +165,12 @@ export class HaSelectSelector extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _renderHelper() {
|
||||||
|
return this.helper
|
||||||
|
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
|
||||||
|
: "";
|
||||||
|
}
|
||||||
|
|
||||||
private get _mode(): "list" | "dropdown" {
|
private get _mode(): "list" | "dropdown" {
|
||||||
return (
|
return (
|
||||||
this.selector.select.mode ||
|
this.selector.select.mode ||
|
||||||
|
@ -26,6 +26,8 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@state() private _entityPlaformLookup?: Record<string, string>;
|
@state() private _entityPlaformLookup?: Record<string, string>;
|
||||||
|
|
||||||
@state() private _configEntries?: ConfigEntry[];
|
@state() private _configEntries?: ConfigEntry[];
|
||||||
@ -64,6 +66,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
|
|||||||
return html`<ha-target-picker
|
return html`<ha-target-picker
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
|
.helper=${this.helper}
|
||||||
.deviceFilter=${this._filterDevices}
|
.deviceFilter=${this._filterDevices}
|
||||||
.entityRegFilter=${this._filterRegEntities}
|
.entityRegFilter=${this._filterRegEntities}
|
||||||
.entityFilter=${this._filterEntities}
|
.entityFilter=${this._filterEntities}
|
||||||
|
@ -14,6 +14,8 @@ export class HaTimeSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = false;
|
@property({ type: Boolean }) public required = false;
|
||||||
@ -25,6 +27,7 @@ export class HaTimeSelector extends LitElement {
|
|||||||
.locale=${this.hass.locale}
|
.locale=${this.hass.locale}
|
||||||
.disabled=${this.disabled}
|
.disabled=${this.disabled}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
|
.helper=${this.helper}
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
enable-second
|
enable-second
|
||||||
></ha-time-input>
|
></ha-time-input>
|
||||||
|
@ -43,6 +43,7 @@ import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
|
|||||||
import "./ha-area-picker";
|
import "./ha-area-picker";
|
||||||
import "./ha-icon-button";
|
import "./ha-icon-button";
|
||||||
import "./ha-svg-icon";
|
import "./ha-svg-icon";
|
||||||
|
import "./ha-input-helper-text";
|
||||||
|
|
||||||
@customElement("ha-target-picker")
|
@customElement("ha-target-picker")
|
||||||
export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||||
@ -52,6 +53,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Show only targets with entities from specific domains.
|
* Show only targets with entities from specific domains.
|
||||||
* @type {Array}
|
* @type {Array}
|
||||||
@ -213,7 +216,11 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
|||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>
|
||||||
|
|
||||||
|
${this.helper
|
||||||
|
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
|
||||||
|
: ""} `;
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _showPicker(ev) {
|
private async _showPicker(ev) {
|
||||||
|
@ -14,6 +14,8 @@ export class HaTimeInput extends LitElement {
|
|||||||
|
|
||||||
@property() public label?: string;
|
@property() public label?: string;
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = false;
|
@property({ type: Boolean }) public required = false;
|
||||||
@ -46,6 +48,7 @@ export class HaTimeInput extends LitElement {
|
|||||||
@value-changed=${this._timeChanged}
|
@value-changed=${this._timeChanged}
|
||||||
.enableSecond=${this.enableSecond}
|
.enableSecond=${this.enableSecond}
|
||||||
.required=${this.required}
|
.required=${this.required}
|
||||||
|
.helper=${this.helper}
|
||||||
></ha-base-time-input>
|
></ha-base-time-input>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -21,6 +21,7 @@ import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
|
|||||||
import type { HomeAssistant } from "../../types";
|
import type { HomeAssistant } from "../../types";
|
||||||
import "./ha-map";
|
import "./ha-map";
|
||||||
import type { HaMap } from "./ha-map";
|
import type { HaMap } from "./ha-map";
|
||||||
|
import "../ha-input-helper-text";
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
// for fire event
|
// for fire event
|
||||||
@ -50,6 +51,8 @@ export class HaLocationsEditor extends LitElement {
|
|||||||
|
|
||||||
@property({ attribute: false }) public locations?: MarkerLocation[];
|
@property({ attribute: false }) public locations?: MarkerLocation[];
|
||||||
|
|
||||||
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property({ type: Boolean }) public autoFit = false;
|
@property({ type: Boolean }) public autoFit = false;
|
||||||
|
|
||||||
@property({ type: Number }) public zoom = 16;
|
@property({ type: Number }) public zoom = 16;
|
||||||
@ -102,13 +105,18 @@ export class HaLocationsEditor extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
return html`<ha-map
|
return html`
|
||||||
.hass=${this.hass}
|
<ha-map
|
||||||
.layers=${this._getLayers(this._circles, this._locationMarkers)}
|
.hass=${this.hass}
|
||||||
.zoom=${this.zoom}
|
.layers=${this._getLayers(this._circles, this._locationMarkers)}
|
||||||
.autoFit=${this.autoFit}
|
.zoom=${this.zoom}
|
||||||
.darkMode=${this.darkMode}
|
.autoFit=${this.autoFit}
|
||||||
></ha-map>`;
|
.darkMode=${this.darkMode}
|
||||||
|
></ha-map>
|
||||||
|
${this.helper
|
||||||
|
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
|
||||||
|
: ""}
|
||||||
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _getLayers = memoizeOne(
|
private _getLayers = memoizeOne(
|
||||||
@ -287,13 +295,10 @@ export class HaLocationsEditor extends LitElement {
|
|||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return css`
|
return css`
|
||||||
:host {
|
ha-map {
|
||||||
display: block;
|
display: block;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
ha-map {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user