jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-09 10:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Pickers and selectors with required (#12151)

Browse Source 
* Update Pickers and selectors with required

* Use native * for device and entity
This commit is contained in:
Zack Barett 2022-03-30 06:48:56 -05:00 committed by GitHub
parent f5af63a50e
commit 7ab54ee5ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 159 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gallery/src/pages/components/ha-selector.ts
View File

@ -363,9 +363,11 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
<span slot="heading">${value?.name || key}</span>
<span slot="description">${value?.description}</span>
<ha-selector
.required=${true}
.hass=${this.hass}
.selector=${value!.selector}
.key=${key}
.label=${value?.name || key}
.value=${data[key] ?? value!.default}
@value-changed=${valueChanged}
></ha-selector>

3
src/components/device/ha-device-picker.ts
View File

@ -86,6 +86,8 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
@property({ type: Boolean }) public disabled?: boolean;
@property({ type: Boolean }) public required?: boolean;
@state() private _opened?: boolean;
@query("ha-combo-box", true) public comboBox!: HaComboBox;
@ -269,6 +271,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
.value=${this._value}
.renderer=${rowRenderer}
.disabled=${this.disabled}
.required=${this.required}
item-value-path="id"
item-label-path="name"
@opened-changed=${this._openedChanged}

3
src/components/device/ha-devices-picker.ts
View File

@ -11,6 +11,8 @@ class HaDevicesPicker extends LitElement {
@property() public value?: string[];
@property({ type: Boolean }) public required?: boolean;
/**
* Show entities from specific domains.
* @type {string}
@ -66,6 +68,7 @@ class HaDevicesPicker extends LitElement {
.excludeDomains=${this.excludeDomains}
.includeDeviceClasses=${this.includeDeviceClasses}
.label=${this.pickDeviceLabel}
.required=${this.required}
@value-changed=${this._addDevice}
></ha-device-picker>
</div>

3
src/components/entity/ha-entities-picker.ts
View File

@ -14,6 +14,8 @@ class HaEntitiesPickerLight extends LitElement {
@property({ type: Array }) public value?: string[];
@property({ type: Boolean }) public required?: boolean;
/**
* Show entities from specific domains.
* @type {string}
@ -108,6 +110,7 @@ class HaEntitiesPickerLight extends LitElement {
.includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
.entityFilter=${this._entityFilter}
.label=${this.pickEntityLabel}
.required=${this.required}
@value-changed=${this._addEntity}
></ha-entity-picker>
</div>

3
src/components/entity/ha-entity-attribute-picker.ts
View File

@ -19,6 +19,8 @@ class HaEntityAttributePicker extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
@property({ type: Boolean, attribute: "allow-custom-value" })
public allowCustomValue;
@ -61,6 +63,7 @@ class HaEntityAttributePicker extends LitElement {
"ui.components.entity.entity-attribute-picker.attribute"
)}
.disabled=${this.disabled || !this.entityId}
.required=${this.required}
.allowCustomValue=${this.allowCustomValue}
item-value-path="value"
item-label-path="label"

3
src/components/entity/ha-entity-picker.ts
View File

@ -39,6 +39,8 @@ export class HaEntityPicker extends LitElement {
@property({ type: Boolean }) public disabled?: boolean;
@property({ type: Boolean }) public required?: boolean;
@property({ type: Boolean, attribute: "allow-custom-entity" })
public allowCustomEntity;
@ -305,6 +307,7 @@ export class HaEntityPicker extends LitElement {
.allowCustomValue=${this.allowCustomEntity}
.filteredItems=${this._states}
.renderer=${rowRenderer}
.required=${this.required}
@opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged}
@filter-changed=${this._filterChanged}

4
src/components/ha-addon-picker.ts
View File

@ -30,6 +30,8 @@ class HaAddonPicker extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
@query("ha-combo-box") private _comboBox!: HaComboBox;
public open() {
@ -55,6 +57,8 @@ class HaAddonPicker extends LitElement {
? this.hass.localize("ui.components.addon-picker.addon")
: this.label}
.value=${this._value}
.required=${this.required}
.disabled=${this.disabled}
.renderer=${rowRenderer}
.items=${this._addons}
item-value-path="slug"

5
src/components/ha-area-picker.ts
View File

@ -28,8 +28,8 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
import { PolymerChangedEvent } from "../polymer-types";
import { HomeAssistant } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import type { HaComboBox } from "./ha-combo-box";
import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box";
import "./ha-icon-button";
import "./ha-svg-icon";
@ -84,6 +84,8 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
@property({ type: Boolean }) public disabled?: boolean;
@property({ type: Boolean }) public required?: boolean;
@state() private _areas?: AreaRegistryEntry[];
@state() private _devices?: DeviceRegistryEntry[];
@ -315,6 +317,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
item-label-path="name"
.value=${this.value}
.disabled=${this.disabled}
.required=${this.required}
.label=${this.label === undefined && this.hass
? this.hass.localize("ui.components.area-picker.area")
: this.label}

3
src/components/ha-areas-picker.ts
View File

@ -56,6 +56,8 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
@property({ type: Boolean }) public disabled?: boolean;
@property({ type: Boolean }) public required?: boolean;
protected render(): TemplateResult {
if (!this.hass) {
return html``;
@ -95,6 +97,7 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
.entityFilter=${this.entityFilter}
.disabled=${this.disabled}
.placeholder=${this.placeholder}
.required=${this.required}
@value-changed=${this._addArea}
></ha-area-picker>
</div>

4
src/components/ha-base-time-input.ts
View File

@ -129,7 +129,9 @@ export class HaBaseTimeInput extends LitElement {
protected render(): TemplateResult {
return html`
${this.label ? html`<label>${this.label}</label>` : ""}
${this.label
? html`<label>${this.label}${this.required ? "*" : ""}</label>`
: ""}
<div class="time-input-wrap">
${this.enableDay
? html`

4
src/components/ha-combo-box.ts
View File

@ -87,6 +87,8 @@ export class HaComboBox extends LitElement {
@property({ type: Boolean }) public disabled?: boolean;
@property({ type: Boolean }) public required?: boolean;
@property({ type: Boolean, reflect: true, attribute: "opened" })
private _opened?: boolean;
@ -119,6 +121,7 @@ export class HaComboBox extends LitElement {
.filteredItems=${this.filteredItems}
.allowCustomValue=${this.allowCustomValue}
.disabled=${this.disabled}
.required=${this.required}
${comboBoxRenderer(this.renderer || this._defaultRowRenderer)}
@opened-changed=${this._openedChanged}
@filter-changed=${this._filterChanged}
@ -129,6 +132,7 @@ export class HaComboBox extends LitElement {
.label=${this.label}
.placeholder=${this.placeholder}
.disabled=${this.disabled}
.required=${this.required}
.validationMessage=${this.validationMessage}
.errorMessage=${this.errorMessage}
class="input"

3
src/components/ha-date-input.ts
View File

@ -35,6 +35,8 @@ export class HaDateInput extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
@property() public label?: string;
render() {
@ -46,6 +48,7 @@ export class HaDateInput extends LitElement {
.value=${this.value
? formatDateNumeric(new Date(this.value), this.locale)
: ""}
.required=${this.required}
>
<ha-svg-icon slot="trailingIcon" .path=${mdiCalendar}></ha-svg-icon>
</ha-textfield>`;

3
src/components/ha-icon-picker.ts
View File

@ -39,6 +39,8 @@ export class HaIconPicker extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
@property({ type: Boolean }) public invalid = false;
@state() private _opened = false;
@ -56,6 +58,7 @@ export class HaIconPicker extends LitElement {
.filteredItems=${iconItems}
.label=${this.label}
.disabled=${this.disabled}
.required=${this.required}
.placeholder=${this.placeholder}
.errorMessage=${this.errorMessage}
.invalid=${this.invalid}

7
src/components/ha-labeled-slider.js
View File

@ -33,7 +33,7 @@ class HaLabeledSlider extends PolymerElement {
}
</style>
<div class="title">[[caption]]</div>
<div class="title">[[_getTitle()]]</div>
<div class="extra-container"><slot name="extra"></slot></div>
<div class="slider-container">
<ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
@ -49,10 +49,15 @@ class HaLabeledSlider extends PolymerElement {
`;
}
_getTitle() {
return `${this.caption}${this.required ? "*" : ""}`;
}
static get properties() {
return {
caption: String,
disabled: Boolean,
required: Boolean,
min: Number,
max: Number,
pin: Boolean,

6
src/components/ha-selector/ha-selector-addon.ts
View File

@ -14,11 +14,17 @@ export class HaAddonSelector extends LitElement {
@property() public label?: string;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected render() {
return html`<ha-addon-picker
.hass=${this.hass}
.value=${this.value}
.label=${this.label}
.disabled=${this.disabled}
.required=${this.required}
allow-custom-entity
></ha-addon-picker>`;
}

4
src/components/ha-selector/ha-selector-area.ts
View File

@ -22,6 +22,8 @@ export class HaAreaSelector extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected updated(changedProperties) {
if (changedProperties.has("selector")) {
const oldSelector = changedProperties.get("selector");
@ -55,6 +57,7 @@ export class HaAreaSelector extends LitElement {
? [this.selector.area.entity.domain]
: undefined}
.disabled=${this.disabled}
.required=${this.required}
></ha-area-picker>
`;
}
@ -74,6 +77,7 @@ export class HaAreaSelector extends LitElement {
? [this.selector.area.entity.domain]
: undefined}
.disabled=${this.disabled}
.required=${this.required}
></ha-areas-picker>
`;
}

7
src/components/ha-selector/ha-selector-attribute.ts
View File

@ -1,10 +1,10 @@
import "../entity/ha-entity-attribute-picker";
import { html, LitElement, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { AttributeSelector } from "../../data/selector";
import { SubscribeMixin } from "../../mixins/subscribe-mixin";
import { HomeAssistant } from "../../types";
import { fireEvent } from "../../common/dom/fire_event";
import "../entity/ha-entity-attribute-picker";
@customElement("ha-selector-attribute")
export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
@ -18,6 +18,8 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = true;
@property() public context?: {
filter_entity?: string;
};
@ -31,6 +33,7 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
.value=${this.value}
.label=${this.label}
.disabled=${this.disabled}
.required=${this.required}
allow-custom-value
></ha-entity-attribute-picker>
`;

10
src/components/ha-selector/ha-selector-color-rgb.ts
View File

@ -1,9 +1,9 @@
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../types";
import type { ColorRGBSelector } from "../../data/selector";
import { fireEvent } from "../../common/dom/fire_event";
import { hex2rgb, rgb2hex } from "../../common/color/convert-color";
import { fireEvent } from "../../common/dom/fire_event";
import type { ColorRGBSelector } from "../../data/selector";
import type { HomeAssistant } from "../../types";
import "../ha-textfield";
@customElement("ha-selector-color_rgb")
@ -18,12 +18,16 @@ export class HaColorRGBSelector extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected render() {
return html`
<ha-textfield
type="color"
.value=${this.value ? rgb2hex(this.value as any) : ""}
.label=${this.label || ""}
.required=${this.required}
.disalbled=${this.disabled}
@change=${this._valueChanged}
></ha-textfield>
`;

8
src/components/ha-selector/ha-selector-color-temp.ts
View File

@ -1,8 +1,8 @@
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../types";
import type { ColorTempSelector } from "../../data/selector";
import { fireEvent } from "../../common/dom/fire_event";
import type { ColorTempSelector } from "../../data/selector";
import type { HomeAssistant } from "../../types";
import "../ha-labeled-slider";
@customElement("ha-selector-color_temp")
@ -17,6 +17,8 @@ export class HaColorTempSelector extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected render() {
return html`
<ha-labeled-slider
@ -26,6 +28,8 @@ export class HaColorTempSelector extends LitElement {
.min=${this.selector.color_temp.min_mireds ?? 153}
.max=${this.selector.color_temp.max_mireds ?? 500}
.value=${this.value}
.disabled=${this.disabled}
.required=${this.required}
@change=${this._valueChanged}
></ha-labeled-slider>
`;

5
src/components/ha-selector/ha-selector-date.ts
View File

@ -1,7 +1,7 @@
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../types";
import type { DateSelector } from "../../data/selector";
import type { HomeAssistant } from "../../types";
import "../ha-date-input";
@customElement("ha-selector-date")
@ -16,6 +16,8 @@ export class HaDateSelector extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected render() {
return html`
<ha-date-input
@ -23,6 +25,7 @@ export class HaDateSelector extends LitElement {
.locale=${this.hass.locale}
.disabled=${this.disabled}
.value=${this.value}
.required=${this.required}
>
</ha-date-input>
`;

12
src/components/ha-selector/ha-selector-datetime.ts
View File

@ -1,12 +1,12 @@
import { css, html, LitElement } from "lit";
import { customElement, property, query } from "lit/decorators";
import type { HomeAssistant } from "../../types";
import type { DateTimeSelector } from "../../data/selector";
import type { HaDateInput } from "../ha-date-input";
import type { HaTimeInput } from "../ha-time-input";
import { fireEvent } from "../../common/dom/fire_event";
import type { DateTimeSelector } from "../../data/selector";
import type { HomeAssistant } from "../../types";
import "../ha-date-input";
import type { HaDateInput } from "../ha-date-input";
import "../ha-time-input";
import type { HaTimeInput } from "../ha-time-input";
@customElement("ha-selector-datetime")
export class HaDateTimeSelector extends LitElement {
@ -20,6 +20,8 @@ export class HaDateTimeSelector extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public required = true;
@query("ha-date-input") private _dateInput!: HaDateInput;
@query("ha-time-input") private _timeInput!: HaTimeInput;
@ -32,6 +34,7 @@ export class HaDateTimeSelector extends LitElement {
.label=${this.label}
.locale=${this.hass.locale}
.disabled=${this.disabled}
.required=${this.required}
.value=${values?.[0]}
@value-changed=${this._valueChanged}
>
@ -41,6 +44,7 @@ export class HaDateTimeSelector extends LitElement {
.value=${values?.[1] || "0:00:00"}
.locale=${this.hass.locale}
.disabled=${this.disabled}
.required=${this.required}
@value-changed=${this._valueChanged}
></ha-time-input>
`;

10
src/components/ha-selector/ha-selector-device.ts
View File

@ -21,6 +21,8 @@ export class HaDeviceSelector extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected updated(changedProperties) {
if (changedProperties.has("selector")) {
const oldSelector = changedProperties.get("selector");
@ -36,7 +38,8 @@ export class HaDeviceSelector extends LitElement {
protected render() {
if (!this.selector.device.multiple) {
return html`<ha-device-picker
return html`
<ha-device-picker
.hass=${this.hass}
.value=${this.value}
.label=${this.label}
@ -48,8 +51,10 @@ export class HaDeviceSelector extends LitElement {
? [this.selector.device.entity.domain]
: undefined}
.disabled=${this.disabled}
.required=${this.required}
allow-custom-entity
></ha-device-picker> `;
></ha-device-picker>
`;
}
return html`
@ -63,6 +68,7 @@ export class HaDeviceSelector extends LitElement {
.includeDomains=${this.selector.device.entity?.domain
? [this.selector.device.entity.domain]
: undefined}
.required=${this.required}
></ha-devices-picker>
`;
}

4
src/components/ha-selector/ha-selector-entity.ts
View File

@ -25,6 +25,8 @@ export class HaEntitySelector extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected render() {
if (!this.selector.entity.multiple) {
return html`<ha-entity-picker
@ -35,6 +37,7 @@ export class HaEntitySelector extends LitElement {
.excludeEntities=${this.selector.entity.exclude_entities}
.entityFilter=${this._filterEntities}
.disabled=${this.disabled}
.required=${this.required}
allow-custom-entity
></ha-entity-picker>`;
}
@ -47,6 +50,7 @@ export class HaEntitySelector extends LitElement {
.entityFilter=${this._filterEntities}
.includeEntities=${this.selector.entity.include_entities}
.excludeEntities=${this.selector.entity.exclude_entities}
.required=${this.required}
></ha-entities-picker>
`;
}

10
src/components/ha-selector/ha-selector-icon.ts
View File

@ -1,9 +1,9 @@
import "../ha-icon-picker";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { HomeAssistant } from "../../types";
import { IconSelector } from "../../data/selector";
import { fireEvent } from "../../common/dom/fire_event";
import { IconSelector } from "../../data/selector";
import { HomeAssistant } from "../../types";
import "../ha-icon-picker";
@customElement("ha-selector-icon")
export class HaIconSelector extends LitElement {
@ -17,11 +17,15 @@ export class HaIconSelector extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected render() {
return html`
<ha-icon-picker
.label=${this.label}
.value=${this.value}
.required=${this.required}
.disabled=${this.disabled}
.fallbackPath=${this.selector.icon.fallbackPath}
.placeholder=${this.selector.icon.placeholder}
@value-changed=${this._valueChanged}

3
src/components/ha-selector/ha-selector-media.ts
View File

@ -35,6 +35,8 @@ export class HaMediaSelector extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean, reflect: true }) public required = true;
@state() private _thumbnailUrl?: string | null;
willUpdate(changedProps: PropertyValues<this>) {
@ -84,6 +86,7 @@ export class HaMediaSelector extends LitElement {
.label=${this.label ||
this.hass.localize("ui.components.selectors.media.pick_media_player")}
.disabled=${this.disabled}
.required=${this.required}
include-domains='["media_player"]'
allow-custom-entity
@value-changed=${this._entityChanged}

2
src/components/ha-selector/ha-selector-number.ts
View File

@ -27,7 +27,7 @@ export class HaNumberSelector extends LitElement {
protected render() {
return html`${this.selector.number.mode !== "box"
? html`${this.label}<ha-slider
? html`${this.label}${this.required ? "*" : ""}<ha-slider
.min=${this.selector.number.min}
.max=${this.selector.number.max}
.value=${this._value}

5
src/components/ha-selector/ha-selector-object.ts
View File

@ -16,10 +16,13 @@ export class HaObjectSelector extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected render() {
return html`<ha-yaml-editor
.hass=${this.hass}
.disabled=${this.disabled}
.readonly=${this.disabled}
.required=${this.required}
.placeholder=${this.placeholder}
.defaultValue=${this.value}
@value-changed=${this._handleChange}

3
src/components/ha-selector/ha-selector-select.ts
View File

@ -6,8 +6,8 @@ import { fireEvent } from "../../common/dom/fire_event";
import { stopPropagation } from "../../common/dom/stop_propagation";
import type { SelectOption, SelectSelector } from "../../data/selector";
import type { HomeAssistant } from "../../types";
import "../ha-select";
import "../ha-radio";
import "../ha-select";
@customElement("ha-selector-select")
export class HaSelectSelector extends LitElement {
@ -57,6 +57,7 @@ export class HaSelectSelector extends LitElement {
.value=${this.value}
.helper=${this.helper}
.disabled=${this.disabled}
.required=${this.required}
@closed=${stopPropagation}
@selected=${this._valueChanged}
>

8
src/components/ha-selector/ha-selector-theme.ts
View File

@ -1,8 +1,8 @@
import "../ha-theme-picker";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../types";
import type { ThemeSelector } from "../../data/selector";
import type { HomeAssistant } from "../../types";
import "../ha-theme-picker";
@customElement("ha-selector-theme")
export class HaThemeSelector extends LitElement {
@ -16,12 +16,16 @@ export class HaThemeSelector extends LitElement {
@property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected render() {
return html`
<ha-theme-picker
.hass=${this.hass}
.value=${this.value}
.label=${this.label}
.disabled=${this.disabled}
.required=${this.required}
></ha-theme-picker>
`;
}

3
src/components/ha-selector/ha-selector-time.ts
View File

@ -16,12 +16,15 @@ export class HaTimeSelector extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
protected render() {
return html`
<ha-time-input
.value=${this.value}
.locale=${this.hass.locale}
.disabled=${this.disabled}
.required=${this.required}
.label=${this.label}
enable-second
></ha-time-input>

8
src/components/ha-theme-picker.ts
View File

@ -4,8 +4,8 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation";
import "./ha-select";
import { HomeAssistant } from "../types";
import "./ha-select";
@customElement("ha-theme-picker")
export class HaThemePicker extends LitElement {
@ -15,12 +15,18 @@ export class HaThemePicker extends LitElement {
@property({ attribute: false }) public hass?: HomeAssistant;
@property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public required = false;
protected render(): TemplateResult {
return html`
<ha-select
.label=${this.label ||
this.hass!.localize("ui.components.theme_picker.theme")}
.value=${this.value}
.required=${this.required}
.disabled=${this.disabled}
@selected=${this._changed}
@closed=${stopPropagation}
fixedMenuPosition

5
src/components/ha-time-input.ts
View File

@ -2,8 +2,8 @@ import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { useAmPm } from "../common/datetime/use_am_pm";
import { fireEvent } from "../common/dom/fire_event";
import "./ha-base-time-input";
import { FrontendLocaleData } from "../data/translation";
import "./ha-base-time-input";
import type { TimeChangedEvent } from "./ha-base-time-input";
@customElement("ha-time-input")
@ -16,6 +16,8 @@ export class HaTimeInput extends LitElement {
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
@property({ type: Boolean, attribute: "enable-second" })
public enableSecond = false;
@ -43,6 +45,7 @@ export class HaTimeInput extends LitElement {
.disabled=${this.disabled}
@value-changed=${this._timeChanged}
.enableSecond=${this.enableSecond}
.required=${this.required}
></ha-base-time-input>
`;
}

4
src/components/ha-yaml-editor.ts
View File

@ -33,6 +33,8 @@ export class HaYamlEditor extends LitElement {
@property({ type: Boolean }) public readOnly = false;
@property({ type: Boolean }) public required = false;
@state() private _yaml = "";
public setValue(value): void {
@ -59,7 +61,7 @@ export class HaYamlEditor extends LitElement {
return html``;
}
return html`
${this.label ? html`<p>${this.label}</p>` : ""}
${this.label ? html`<p>${this.label}${this.required ? "*" : ""}</p>` : ""}
<ha-code-editor
.hass=${this.hass}
.value=${this._yaml}

9
src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
View File

@ -4,8 +4,8 @@ import { assert } from "superstruct";
import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-formfield";
import "../../../../components/ha-textfield";
import "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
import type { HomeAssistant } from "../../../../types";
import { graphHeaderFooterConfigStruct } from "../../header-footer/structs";
import { GraphHeaderFooterConfig } from "../../header-footer/types";
@ -50,15 +50,14 @@ export class HuiGraphFooterEditor
<div class="card-config">
<ha-entity-picker
allow-custom-entity
.label="${this.hass.localize(
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
)}
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
.includeDomains=${includeDomains}
.required=${true}
@change=${this._valueChanged}
></ha-entity-picker>
<div class="side-by-side">

9
src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
View File

@ -3,9 +3,9 @@ import { customElement, property, state } from "lit/decorators";
import { assert, assign, object, optional, string } from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import "../../../../components/ha-theme-picker";
import { HomeAssistant } from "../../../../types";
import { MediaControlCardConfig } from "../../cards/types";
import "../../../../components/ha-theme-picker";
import { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
@ -50,15 +50,14 @@ export class HuiMediaControlCardEditor
return html`
<div class="card-config">
<ha-entity-picker
.label="${this.hass.localize(
.label=${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.required"
)})"
)}
.hass=${this.hass}
.value=${this._entity}
.configValue=${"entity"}
.includeDomains=${includeDomains}
.required=${true}
@change=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>