diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
index 9c34ff3583..4f35f03578 100644
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@@ -106,17 +106,19 @@ export class HaChip extends LitElement {
.mdc-chip:not(.outlined) .mdc-chip__icon.mdc-chip__icon--leading {
margin-left: -12px !important;
margin-right: -2px;
+ color: var(--ha-chip-icon-color, var(--text-primary-color));
}
.mdc-chip.outlined ha-svg-icon,
slot[name="trailing-icon"]::slotted(ha-svg-icon) {
border-radius: 50%;
- background: var(--ha-chip-background-color, var(--primary-color));
- color: var(--card-background-color);
+ background-color: var(--ha-chip-background-color, var(--primary-color));
+ color: var(--ha-chip-icon-color, var(--text-primary-color));
}
.mdc-chip.outlined .mdc-chip__icon.mdc-chip__icon--leading {
margin-left: -13px !important;
+ color: var(--ha-chip-icon-color, var(--text-primary-color));
}
.mdc-chip__icon.mdc-chip__icon--trailing,
@@ -125,7 +127,7 @@ export class HaChip extends LitElement {
height: 18px;
font-size: 18px;
padding: 2px;
- color: var(--ha-chip-text-color, var(--text-primary-color));
+ color: var(--ha-chip-icon-color);
margin-right: -8px;
display: inline-flex;
align-items: center;
diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts
index 4edf45230d..21d8a85d8d 100644
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@@ -1,5 +1,3 @@
-// @ts-ignore
-import chipStyles from "@material/chips/dist/mdc.chips.min.css";
import "@material/mwc-button/mwc-button";
import {
mdiClose,
@@ -14,13 +12,13 @@ import {
HassServiceTarget,
UnsubscribeFunc,
} from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, unsafeCSS } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../common/dom/fire_event";
import { ensureArray } from "../common/ensure-array";
import { computeDomain } from "../common/entity/compute_domain";
import { computeStateName } from "../common/entity/compute_state_name";
+import { stateIconPath } from "../common/entity/state_icon_path";
import {
AreaRegistryEntry,
subscribeAreaRegistry,
@@ -41,6 +39,7 @@ import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./entity/ha-entity-picker";
import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
import "./ha-area-picker";
+import "./ha-chip-set";
import "./ha-icon-button";
import "./ha-svg-icon";
@@ -114,7 +113,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
if (!this._areas || !this._devices || !this._entities) {
return html``;
}
- return html`
+ return html`
${this.value?.area_id
? ensureArray(this.value.area_id).map((area_id) => {
const area = this._areas![area_id];
@@ -150,70 +149,39 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
);
})
: ""}
-
+
${this._renderPicker()}
-
-
+
-
-
-
-
- ${this.hass.localize(
- "ui.components.target-picker.add_area_id"
- )}
-
-
-
-
+
-
-
-
-
- ${this.hass.localize(
- "ui.components.target-picker.add_device_id"
- )}
-
-
-
-
+
-
-
-
-
- ${this.hass.localize(
- "ui.components.target-picker.add_entity_id"
- )}
-
-
-
-
`;
+ .leadingIcon=${mdiPlus}
+ .label=${this.hass.localize(
+ "ui.components.target-picker.add_entity_id"
+ )}
+ >
+ `;
}
private async _showPicker(ev) {
@@ -233,69 +201,59 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
iconPath?: string
) {
return html`
-
- ${iconPath
- ? html`
`
- : ""}
- ${entityState
- ? html`
`
- : ""}
-
-
- ${name}
+
+ ${type === "entity_id"
+ ? ""
+ : html`
+
+
+ ${this.hass.localize(
+ `ui.components.target-picker.expand_${type}`
+ )}
+
+ `}
+
+
+ ${this.hass.localize(
+ `ui.components.target-picker.remove_${type}`
+ )}
-
- ${type === "entity_id"
- ? ""
- : html`
-
- ${this.hass.localize(
- `ui.components.target-picker.expand_${type}`
- )}
- `}
-
-
- ${this.hass.localize(
- `ui.components.target-picker.remove_${type}`
- )}
-
-
+
+
`;
}
@@ -528,84 +486,39 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
static get styles(): CSSResultGroup {
return css`
- ${unsafeCSS(chipStyles)}
- .mdc-chip {
- color: var(--primary-text-color);
- }
- .items {
- z-index: 2;
- }
- .mdc-chip-set {
- padding: 4px 0;
- }
- .mdc-chip.add {
- color: rgba(0, 0, 0, 0.87);
- }
- .mdc-chip:not(.add) {
- cursor: default;
- }
- .mdc-chip ha-icon-button {
- --mdc-icon-button-size: 24px;
- display: flex;
- align-items: center;
- outline: none;
- }
- .mdc-chip ha-icon-button ha-svg-icon {
- border-radius: 50%;
- background: var(--secondary-text-color);
- }
- .mdc-chip__icon.mdc-chip__icon--trailing {
- width: 16px;
- height: 16px;
- --mdc-icon-size: 14px;
- color: var(--secondary-text-color);
- }
- .mdc-chip__icon--leading {
- display: flex;
- align-items: center;
- justify-content: center;
- --mdc-icon-size: 20px;
- border-radius: 50%;
- padding: 6px;
- margin-left: -14px !important;
- }
.expand-btn {
margin-right: 0;
}
- .mdc-chip.area_id:not(.add) {
- border: 2px solid #fed6a4;
- background: var(--card-background-color);
+ ha-chip {
+ --ha-chip-icon-color: var(--secondary-text-color);
+ --ha-chip-text-color: var(--primary-text-color);
}
- .mdc-chip.area_id:not(.add) .mdc-chip__icon--leading,
- .mdc-chip.area_id.add {
- background: #fed6a4;
- }
- .mdc-chip.device_id:not(.add) {
- border: 2px solid #a8e1fb;
- background: var(--card-background-color);
- }
- .mdc-chip.device_id:not(.add) .mdc-chip__icon--leading,
- .mdc-chip.device_id.add {
- background: #a8e1fb;
- }
- .mdc-chip.entity_id:not(.add) {
- border: 2px solid #d2e7b9;
- background: var(--card-background-color);
- }
- .mdc-chip.entity_id:not(.add) .mdc-chip__icon--leading,
- .mdc-chip.entity_id.add {
- background: #d2e7b9;
- }
- .mdc-chip:hover {
+ ha-chip:hover {
z-index: 5;
}
+ ha-icon-button {
+ --mdc-icon-size: 18px;
+ --mdc-icon-button-size: 24px;
+ color: var(--secondary-text-color);
+ outline: none;
+ }
+ ha-chip > div {
+ margin-right: -8px;
+ display: inline-flex;
+ align-items: center;
+ }
+ ha-chip.area_id {
+ --ha-chip-background-color: #fed6a4;
+ }
+ ha-chip.device_id {
+ --ha-chip-background-color: #a8e1fb;
+ }
+ ha-chip.entity_id {
+ --ha-chip-background-color: #d2e7b9;
+ }
paper-tooltip.expand {
min-width: 200px;
}
- :host([disabled]) .mdc-chip {
- opacity: var(--light-disabled-opacity);
- pointer-events: none;
- }
`;
}
}