mirror of
https://github.com/home-assistant/frontend.git
synced 2025-10-05 01:39:43 +00:00
Compare commits
74 Commits
20250925.1
...
target-sel
Author | SHA1 | Date | |
---|---|---|---|
![]() |
06355f6093 | ||
![]() |
36bcaade22 | ||
![]() |
cdf5d2c899 | ||
![]() |
d746dc5752 | ||
![]() |
5f53e1e71c | ||
![]() |
3da82df093 | ||
![]() |
6cdf9ba1ab | ||
![]() |
4cedfffb71 | ||
![]() |
1e1514e7da | ||
![]() |
60e07075bc | ||
![]() |
c998086474 | ||
![]() |
53be0a3fa2 | ||
![]() |
d69c46c80c | ||
![]() |
0c2a7bfed0 | ||
![]() |
afdd232e38 | ||
![]() |
179751a135 | ||
![]() |
52f6024306 | ||
![]() |
7c7a4e61f2 | ||
![]() |
facce7b016 | ||
![]() |
e546cb3374 | ||
![]() |
a0d2e7312b | ||
![]() |
c0a9dadcbe | ||
![]() |
e1edf7fb98 | ||
![]() |
6d5c165bd2 | ||
![]() |
54177a16e9 | ||
![]() |
c814b8e888 | ||
![]() |
33a0b32cc5 | ||
![]() |
7dae13bf57 | ||
![]() |
0a3fe6e0fb | ||
![]() |
e0348e4da7 | ||
![]() |
d53f3ec898 | ||
![]() |
e422547d93 | ||
![]() |
d91a3fbe85 | ||
![]() |
01d7130f22 | ||
![]() |
c57851e4df | ||
![]() |
6f1f13acb0 | ||
![]() |
a8abd00809 | ||
![]() |
e053978dbe | ||
![]() |
6e57f726a3 | ||
![]() |
b7cabadbe1 | ||
![]() |
d920217374 | ||
![]() |
1630263276 | ||
![]() |
5680c742be | ||
![]() |
2aeb9cf0ef | ||
![]() |
c9931b3a3c | ||
![]() |
fbf7ebdfe4 | ||
![]() |
52ccb03de5 | ||
![]() |
900236ac07 | ||
![]() |
28940c930d | ||
![]() |
e278b463fd | ||
![]() |
db2acd4e39 | ||
![]() |
6dcc52cd44 | ||
![]() |
981db50826 | ||
![]() |
09683863a7 | ||
![]() |
8c78f931dc | ||
![]() |
40ce3c1e31 | ||
![]() |
32e4c23c1a | ||
![]() |
e430a1b1be | ||
![]() |
a2c6116417 | ||
![]() |
3239273f3e | ||
![]() |
cf97566669 | ||
![]() |
c68d73b1ef | ||
![]() |
89ef753309 | ||
![]() |
b149ddc3d4 | ||
![]() |
a2e99de828 | ||
![]() |
e3655feda0 | ||
![]() |
a5be92c277 | ||
![]() |
043849b057 | ||
![]() |
9a69566000 | ||
![]() |
9cdb57476a | ||
![]() |
f8d90d003e | ||
![]() |
f53ee52b0e | ||
![]() |
f8cc1531e5 | ||
![]() |
11f65ef0f7 |
4
.github/workflows/cast_deployment.yaml
vendored
4
.github/workflows/cast_deployment.yaml
vendored
@@ -42,7 +42,7 @@ jobs:
|
||||
- name: Deploy to Netlify
|
||||
id: deploy
|
||||
run: |
|
||||
npx -y netlify-cli deploy --dir=cast/dist --alias dev
|
||||
npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --alias dev
|
||||
env:
|
||||
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
|
||||
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
|
||||
@@ -77,7 +77,7 @@ jobs:
|
||||
- name: Deploy to Netlify
|
||||
id: deploy
|
||||
run: |
|
||||
npx -y netlify-cli deploy --dir=cast/dist --prod
|
||||
npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --prod
|
||||
env:
|
||||
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
|
||||
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
|
||||
|
2
.github/workflows/ci.yaml
vendored
2
.github/workflows/ci.yaml
vendored
@@ -37,7 +37,7 @@ jobs:
|
||||
- name: Build resources
|
||||
run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
|
||||
- name: Setup lint cache
|
||||
uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
|
||||
uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
|
||||
with:
|
||||
path: |
|
||||
node_modules/.cache/prettier
|
||||
|
6
.github/workflows/codeql-analysis.yml
vendored
6
.github/workflows/codeql-analysis.yml
vendored
@@ -36,14 +36,14 @@ jobs:
|
||||
|
||||
# Initializes the CodeQL tools for scanning.
|
||||
- name: Initialize CodeQL
|
||||
uses: github/codeql-action/init@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
|
||||
uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
|
||||
with:
|
||||
languages: ${{ matrix.language }}
|
||||
|
||||
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
||||
# If this step fails, then you should remove it and run the build manually (see below)
|
||||
- name: Autobuild
|
||||
uses: github/codeql-action/autobuild@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
|
||||
uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
|
||||
|
||||
# ℹ️ Command-line programs to run using the OS shell.
|
||||
# 📚 https://git.io/JvXDl
|
||||
@@ -57,4 +57,4 @@ jobs:
|
||||
# make release
|
||||
|
||||
- name: Perform CodeQL Analysis
|
||||
uses: github/codeql-action/analyze@192325c86100d080feab897ff886c34abd4c83a3 # v3.30.3
|
||||
uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
|
||||
|
4
.github/workflows/demo_deployment.yaml
vendored
4
.github/workflows/demo_deployment.yaml
vendored
@@ -43,7 +43,7 @@ jobs:
|
||||
- name: Deploy to Netlify
|
||||
id: deploy
|
||||
run: |
|
||||
npx -y netlify-cli deploy --dir=demo/dist --prod
|
||||
npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
|
||||
env:
|
||||
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
|
||||
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
|
||||
@@ -78,7 +78,7 @@ jobs:
|
||||
- name: Deploy to Netlify
|
||||
id: deploy
|
||||
run: |
|
||||
npx -y netlify-cli deploy --dir=demo/dist --prod
|
||||
npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
|
||||
env:
|
||||
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
|
||||
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}
|
||||
|
2
.github/workflows/design_deployment.yaml
vendored
2
.github/workflows/design_deployment.yaml
vendored
@@ -35,7 +35,7 @@ jobs:
|
||||
- name: Deploy to Netlify
|
||||
id: deploy
|
||||
run: |
|
||||
npx -y netlify-cli deploy --dir=gallery/dist --prod
|
||||
npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --prod
|
||||
env:
|
||||
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
|
||||
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}
|
||||
|
2
.github/workflows/design_preview.yaml
vendored
2
.github/workflows/design_preview.yaml
vendored
@@ -40,7 +40,7 @@ jobs:
|
||||
- name: Deploy preview to Netlify
|
||||
id: deploy
|
||||
run: |
|
||||
npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
|
||||
npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
|
||||
--json > deploy_output.json
|
||||
env:
|
||||
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
|
||||
|
2
.github/workflows/release.yaml
vendored
2
.github/workflows/release.yaml
vendored
@@ -75,7 +75,7 @@ jobs:
|
||||
|
||||
# home-assistant/wheels doesn't support SHA pinning
|
||||
- name: Build wheels
|
||||
uses: home-assistant/wheels@2025.07.0
|
||||
uses: home-assistant/wheels@2025.09.1
|
||||
with:
|
||||
abi: cp313
|
||||
tag: musllinux_1_2
|
||||
|
File diff suppressed because one or more lines are too long
@@ -6,4 +6,4 @@ enableGlobalCache: false
|
||||
|
||||
nodeLinker: node-modules
|
||||
|
||||
yarnPath: .yarn/releases/yarn-4.10.2.cjs
|
||||
yarnPath: .yarn/releases/yarn-4.10.3.cjs
|
||||
|
@@ -75,7 +75,7 @@ export const castDemoEntities: () => Entity[] = () =>
|
||||
longitude: 4.8903147,
|
||||
radius: 100,
|
||||
friendly_name: "Home",
|
||||
icon: "hass:home",
|
||||
icon: "mdi:home",
|
||||
},
|
||||
},
|
||||
"input_number.harmonyvolume": {
|
||||
@@ -88,7 +88,7 @@ export const castDemoEntities: () => Entity[] = () =>
|
||||
step: 1,
|
||||
mode: "slider",
|
||||
friendly_name: "Volume",
|
||||
icon: "hass:volume-high",
|
||||
icon: "mdi:volume-high",
|
||||
},
|
||||
},
|
||||
"climate.upstairs": {
|
||||
|
@@ -56,7 +56,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
|
||||
type: "weblink",
|
||||
url: "/lovelace/climate",
|
||||
name: "Climate controls",
|
||||
icon: "hass:arrow-right",
|
||||
icon: "mdi:arrow-right",
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -76,7 +76,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
|
||||
type: "weblink",
|
||||
url: "/lovelace/overview",
|
||||
name: "Back",
|
||||
icon: "hass:arrow-left",
|
||||
icon: "mdi:arrow-left",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
@@ -143,7 +143,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
|
||||
state: "on",
|
||||
attributes: {
|
||||
friendly_name: "Home Automation",
|
||||
icon: "hass:home-automation",
|
||||
icon: "mdi:home-automation",
|
||||
},
|
||||
},
|
||||
"input_boolean.tvtime": {
|
||||
|
@@ -4,7 +4,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
|
||||
title: "Home Assistant",
|
||||
views: [
|
||||
{
|
||||
icon: "hass:home-assistant",
|
||||
icon: "mdi:home-assistant",
|
||||
id: "home",
|
||||
title: "Home",
|
||||
cards: [
|
||||
|
@@ -1236,7 +1236,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
|
||||
},
|
||||
],
|
||||
path: "security",
|
||||
icon: "hass:shield-home",
|
||||
icon: "mdi:shield-home",
|
||||
name: "Security",
|
||||
background:
|
||||
'center / cover no-repeat url("/assets/jimpower/background-15.jpg") fixed',
|
||||
|
@@ -117,7 +117,7 @@ export class DemoHaBadge extends LitElement {
|
||||
}
|
||||
.card-content {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@@ -155,11 +155,11 @@ export class DemoHaButton extends LitElement {
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
}
|
||||
.card-content div {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@@ -123,11 +123,11 @@ export class DemoHaProgressButton extends LitElement {
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
}
|
||||
.card-content div {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@@ -88,7 +88,7 @@ export class DemoHaSlider extends LitElement {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@@ -70,7 +70,7 @@ export class DemoHaSpinner extends LitElement {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@@ -159,7 +159,7 @@ class HassioSystemManagedDialog extends LitElement {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
--mdc-icon-size: 48px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
@@ -31,7 +31,7 @@ export const hassioStyle = css`
|
||||
.card-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
grid-gap: 8px;
|
||||
grid-gap: var(--ha-space-2);
|
||||
}
|
||||
@media screen and (min-width: 640px) {
|
||||
.card-group {
|
||||
|
@@ -213,7 +213,7 @@ class HaLandingPage extends LandingPageBaseElement {
|
||||
ha-card .card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
}
|
||||
ha-alert p {
|
||||
text-align: unset;
|
||||
|
24
package.json
24
package.json
@@ -28,13 +28,13 @@
|
||||
"dependencies": {
|
||||
"@babel/runtime": "7.28.4",
|
||||
"@braintree/sanitize-url": "7.1.1",
|
||||
"@codemirror/autocomplete": "6.18.7",
|
||||
"@codemirror/autocomplete": "6.19.0",
|
||||
"@codemirror/commands": "6.8.1",
|
||||
"@codemirror/language": "6.11.3",
|
||||
"@codemirror/legacy-modes": "6.5.1",
|
||||
"@codemirror/search": "6.5.11",
|
||||
"@codemirror/state": "6.5.2",
|
||||
"@codemirror/view": "6.38.2",
|
||||
"@codemirror/view": "6.38.3",
|
||||
"@date-fns/tz": "1.4.1",
|
||||
"@egjs/hammerjs": "2.0.17",
|
||||
"@formatjs/intl-datetimeformat": "6.18.0",
|
||||
@@ -52,7 +52,7 @@
|
||||
"@fullcalendar/list": "6.1.19",
|
||||
"@fullcalendar/luxon3": "6.1.19",
|
||||
"@fullcalendar/timegrid": "6.1.19",
|
||||
"@home-assistant/webawesome": "3.0.0-beta.4.ha.3",
|
||||
"@home-assistant/webawesome": "3.0.0-beta.6.ha.0",
|
||||
"@lezer/highlight": "1.2.1",
|
||||
"@lit-labs/motion": "1.0.9",
|
||||
"@lit-labs/observers": "2.0.6",
|
||||
@@ -89,8 +89,8 @@
|
||||
"@thomasloven/round-slider": "0.6.0",
|
||||
"@tsparticles/engine": "3.9.1",
|
||||
"@tsparticles/preset-links": "3.2.0",
|
||||
"@vaadin/combo-box": "24.9.0",
|
||||
"@vaadin/vaadin-themable-mixin": "24.9.0",
|
||||
"@vaadin/combo-box": "24.9.1",
|
||||
"@vaadin/vaadin-themable-mixin": "24.9.1",
|
||||
"@vibrant/color": "4.0.0",
|
||||
"@vue/web-component-wrapper": "1.3.0",
|
||||
"@webcomponents/scoped-custom-element-registry": "0.0.10",
|
||||
@@ -111,7 +111,7 @@
|
||||
"fuse.js": "7.1.0",
|
||||
"google-timezones-json": "1.2.0",
|
||||
"gulp-zopfli-green": "6.0.2",
|
||||
"hls.js": "1.6.12",
|
||||
"hls.js": "1.6.13",
|
||||
"home-assistant-js-websocket": "9.5.0",
|
||||
"idb-keyval": "6.2.2",
|
||||
"intl-messageformat": "10.7.16",
|
||||
@@ -157,8 +157,8 @@
|
||||
"@octokit/auth-oauth-device": "8.0.1",
|
||||
"@octokit/plugin-retry": "8.0.1",
|
||||
"@octokit/rest": "22.0.0",
|
||||
"@rsdoctor/rspack-plugin": "1.2.3",
|
||||
"@rspack/core": "1.5.5",
|
||||
"@rsdoctor/rspack-plugin": "1.3.0",
|
||||
"@rspack/core": "1.5.7",
|
||||
"@rspack/dev-server": "1.1.4",
|
||||
"@types/babel__plugin-transform-runtime": "7.9.5",
|
||||
"@types/chromecast-caf-receiver": "6.0.22",
|
||||
@@ -203,7 +203,7 @@
|
||||
"husky": "9.1.7",
|
||||
"jsdom": "27.0.0",
|
||||
"jszip": "3.10.1",
|
||||
"lint-staged": "16.1.6",
|
||||
"lint-staged": "16.2.1",
|
||||
"lit-analyzer": "2.0.3",
|
||||
"lodash.merge": "4.6.2",
|
||||
"lodash.template": "4.5.0",
|
||||
@@ -213,11 +213,11 @@
|
||||
"rspack-manifest-plugin": "5.1.0",
|
||||
"serve": "14.2.5",
|
||||
"sinon": "21.0.0",
|
||||
"tar": "7.4.3",
|
||||
"tar": "7.5.1",
|
||||
"terser-webpack-plugin": "5.3.14",
|
||||
"ts-lit-plugin": "2.0.2",
|
||||
"typescript": "5.9.2",
|
||||
"typescript-eslint": "8.44.0",
|
||||
"typescript-eslint": "8.44.1",
|
||||
"vite-tsconfig-paths": "5.1.4",
|
||||
"vitest": "3.2.4",
|
||||
"webpack-stats-plugin": "1.1.3",
|
||||
@@ -235,5 +235,5 @@
|
||||
"tslib": "2.8.1",
|
||||
"@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
|
||||
},
|
||||
"packageManager": "yarn@4.10.2"
|
||||
"packageManager": "yarn@4.10.3"
|
||||
}
|
||||
|
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
|
||||
|
||||
[project]
|
||||
name = "home-assistant-frontend"
|
||||
version = "20250925.1"
|
||||
version = "20250924.0"
|
||||
license = "Apache-2.0"
|
||||
license-files = ["LICENSE*"]
|
||||
description = "The Home Assistant frontend"
|
||||
|
@@ -1,23 +1,40 @@
|
||||
import { formatHex, parse } from "culori";
|
||||
|
||||
/**
|
||||
* Expands a 3-digit hex color to a 6-digit hex color.
|
||||
* @param hex - The hex color to expand.
|
||||
* @returns The expanded hex color.
|
||||
* @throws If the hex color is invalid.
|
||||
*/
|
||||
export const expandHex = (hex: string): string => {
|
||||
hex = hex.replace("#", "");
|
||||
if (hex.length === 6) return hex;
|
||||
let result = "";
|
||||
for (const val of hex) {
|
||||
result += val + val;
|
||||
const color = parse(hex);
|
||||
if (!color) {
|
||||
throw new Error(`Invalid hex color: ${hex}`);
|
||||
}
|
||||
return result;
|
||||
const formattedColor = formatHex(color);
|
||||
if (!formattedColor) {
|
||||
throw new Error(`Could not format hex color: ${hex}`);
|
||||
}
|
||||
return formattedColor.replace("#", "");
|
||||
};
|
||||
|
||||
// Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
|
||||
/**
|
||||
* Blends two hex colors. c1 is placed over c2, blend is c1's opacity.
|
||||
* @param c1 - The first hex color.
|
||||
* @param c2 - The second hex color.
|
||||
* @param blend - The blend percentage (0-100).
|
||||
* @returns The blended hex color.
|
||||
*/
|
||||
export const hexBlend = (c1: string, c2: string, blend = 50): string => {
|
||||
let color = "";
|
||||
c1 = expandHex(c1);
|
||||
c2 = expandHex(c2);
|
||||
let color = "";
|
||||
for (let i = 0; i <= 5; i += 2) {
|
||||
const h1 = parseInt(c1.substring(i, i + 2), 16);
|
||||
const h2 = parseInt(c2.substring(i, i + 2), 16);
|
||||
let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
|
||||
while (hex.length < 2) hex = "0" + hex;
|
||||
const hex = Math.floor(h2 + (h1 - h2) * (blend / 100))
|
||||
.toString(16)
|
||||
.padStart(2, "0");
|
||||
color += hex;
|
||||
}
|
||||
return `#${color}`;
|
||||
|
@@ -1,28 +1,49 @@
|
||||
export const luminosity = (rgb: [number, number, number]): number => {
|
||||
// http://www.w3.org/TR/WCAG20/#relativeluminancedef
|
||||
const lum: [number, number, number] = [0, 0, 0];
|
||||
for (let i = 0; i < rgb.length; i++) {
|
||||
const chan = rgb[i] / 255;
|
||||
lum[i] = chan <= 0.03928 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
|
||||
}
|
||||
import { wcagLuminance, wcagContrast } from "culori";
|
||||
|
||||
return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
|
||||
};
|
||||
/**
|
||||
* Calculates the luminosity of an RGB color.
|
||||
* @param rgb - The RGB color to calculate the luminosity of.
|
||||
* @returns The luminosity of the color.
|
||||
*/
|
||||
export const luminosity = (rgb: [number, number, number]): number =>
|
||||
wcagLuminance({
|
||||
mode: "rgb",
|
||||
r: rgb[0] / 255,
|
||||
g: rgb[1] / 255,
|
||||
b: rgb[2] / 255,
|
||||
});
|
||||
|
||||
/**
|
||||
* Calculates the contrast ratio between two RGB colors.
|
||||
* @param color1 - The first color to calculate the contrast ratio of.
|
||||
* @param color2 - The second color to calculate the contrast ratio of.
|
||||
* @returns The contrast ratio between the two colors.
|
||||
*/
|
||||
export const rgbContrast = (
|
||||
color1: [number, number, number],
|
||||
color2: [number, number, number]
|
||||
) => {
|
||||
const lum1 = luminosity(color1);
|
||||
const lum2 = luminosity(color2);
|
||||
|
||||
if (lum1 > lum2) {
|
||||
return (lum1 + 0.05) / (lum2 + 0.05);
|
||||
}
|
||||
|
||||
return (lum2 + 0.05) / (lum1 + 0.05);
|
||||
};
|
||||
) =>
|
||||
wcagContrast(
|
||||
{
|
||||
mode: "rgb",
|
||||
r: color1[0] / 255,
|
||||
g: color1[1] / 255,
|
||||
b: color1[2] / 255,
|
||||
},
|
||||
{
|
||||
mode: "rgb",
|
||||
r: color2[0] / 255,
|
||||
g: color2[1] / 255,
|
||||
b: color2[2] / 255,
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* Calculates the contrast ratio between two RGB colors.
|
||||
* @param rgb1 - The first color to calculate the contrast ratio of.
|
||||
* @param rgb2 - The second color to calculate the contrast ratio of.
|
||||
* @returns The contrast ratio between the two colors.
|
||||
*/
|
||||
export const getRGBContrastRatio = (
|
||||
rgb1: [number, number, number],
|
||||
rgb2: [number, number, number]
|
||||
|
@@ -974,7 +974,7 @@ export class HaChartBase extends LitElement {
|
||||
right: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: var(--ha-space-1);
|
||||
}
|
||||
.chart-controls.small {
|
||||
top: 0;
|
||||
@@ -1011,7 +1011,7 @@ export class HaChartBase extends LitElement {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
.chart-legend li {
|
||||
height: 24px;
|
||||
|
@@ -112,7 +112,7 @@ export class HaEntityToggle extends LitElement {
|
||||
if (!this.hass || !this.stateObj) {
|
||||
return;
|
||||
}
|
||||
forwardHaptic("light");
|
||||
forwardHaptic(this, "light");
|
||||
const stateDomain = computeStateDomain(this.stateObj);
|
||||
let serviceDomain;
|
||||
let service;
|
||||
|
@@ -54,7 +54,7 @@ export class HaBadge extends LitElement {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
height: var(--ha-badge-size, 36px);
|
||||
min-width: var(--ha-badge-size, 36px);
|
||||
padding: 0px 12px;
|
||||
|
@@ -76,7 +76,7 @@ export class HaCopyTextfield extends LitElement {
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
@@ -343,7 +343,7 @@ export class HaDateRangePicker extends LitElement {
|
||||
.date-range-inputs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
|
||||
.date-range-ranges {
|
||||
|
@@ -49,6 +49,7 @@ export class HaExpansionPanel extends LitElement {
|
||||
tabindex=${this.noCollapse ? -1 : 0}
|
||||
aria-expanded=${this.expanded}
|
||||
aria-controls="sect1"
|
||||
part="summary"
|
||||
>
|
||||
${this.leftChevron ? chevronIcon : nothing}
|
||||
<slot name="leading-icon"></slot>
|
||||
@@ -170,6 +171,11 @@ export class HaExpansionPanel extends LitElement {
|
||||
margin-left: 8px;
|
||||
margin-inline-start: 8px;
|
||||
margin-inline-end: initial;
|
||||
border-radius: var(--ha-border-radius-circle);
|
||||
}
|
||||
|
||||
#summary:focus-visible ha-svg-icon.summary-icon {
|
||||
background-color: var(--ha-color-fill-neutral-normal-active);
|
||||
}
|
||||
|
||||
:host([left-chevron]) .summary-icon,
|
||||
|
@@ -77,8 +77,8 @@ export class HaFormGrid extends LitElement implements HaFormElement {
|
||||
var(--form-grid-column-count, auto-fit),
|
||||
minmax(var(--form-grid-min-width, 200px), 1fr)
|
||||
);
|
||||
grid-column-gap: 8px;
|
||||
grid-row-gap: 24px;
|
||||
grid-column-gap: var(--ha-space-2);
|
||||
grid-row-gap: var(--ha-space-6);
|
||||
}
|
||||
:host > ha-form {
|
||||
display: block;
|
||||
|
@@ -156,7 +156,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
|
||||
:host {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
}
|
||||
:host ha-form {
|
||||
display: block;
|
||||
|
@@ -57,7 +57,7 @@ export class HaFormfield extends FormfieldBase {
|
||||
}
|
||||
.mdc-form-field {
|
||||
align-items: var(--ha-formfield-align-items, center);
|
||||
gap: 4px;
|
||||
gap: var(--ha-space-1);
|
||||
}
|
||||
.mdc-form-field > label {
|
||||
direction: var(--direction);
|
||||
|
@@ -227,7 +227,7 @@ export class HaGridSizeEditor extends LitElement {
|
||||
"row-slider preview";
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
#columns {
|
||||
grid-area: column-slider;
|
||||
|
@@ -104,7 +104,7 @@ export class HaIconButtonToolbar extends LitElement {
|
||||
background-color: transparent;
|
||||
padding-right: 4px;
|
||||
height: var(--icon-button-toolbar-height);
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
|
||||
.icon-toolbar-button {
|
||||
|
@@ -105,7 +105,7 @@ export class HaPickerField extends LitElement {
|
||||
--md-list-item-bottom-space: 0px;
|
||||
--md-list-item-leading-space: 8px;
|
||||
--md-list-item-trailing-space: 8px;
|
||||
--ha-md-list-item-gap: 8px;
|
||||
--ha-md-list-item-gap: var(--ha-space-2);
|
||||
/* Remove the default focus ring */
|
||||
--md-focus-ring-width: 0px;
|
||||
--md-focus-ring-duration: 0s;
|
||||
|
@@ -90,7 +90,7 @@ class HaSegmentedBar extends LitElement {
|
||||
.heading {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
.heading .title {
|
||||
flex: 1;
|
||||
@@ -125,7 +125,7 @@ class HaSegmentedBar extends LitElement {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
gap: var(--ha-space-3);
|
||||
margin: 12px 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@@ -133,7 +133,7 @@ class HaSegmentedBar extends LitElement {
|
||||
.legend li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: var(--ha-space-1);
|
||||
font-size: var(--ha-font-size-s);
|
||||
}
|
||||
.legend li .bullet {
|
||||
|
@@ -116,7 +116,7 @@ export class HaSelectBox extends LitElement {
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
gap: var(--ha-space-3);
|
||||
}
|
||||
.option {
|
||||
position: relative;
|
||||
@@ -128,7 +128,7 @@ export class HaSelectBox extends LitElement {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -137,7 +137,7 @@ export class HaSelectBox extends LitElement {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -148,7 +148,7 @@ export class HaSelectBox extends LitElement {
|
||||
.option .content .text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: var(--ha-space-1);
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
@@ -89,7 +89,7 @@ export class HaButtonToggleSelector extends LitElement {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
align-items: center;
|
||||
}
|
||||
@media all and (max-width: 600px) {
|
||||
|
@@ -62,7 +62,7 @@ export class HaColorTempSelector extends LitElement {
|
||||
"--ha-slider-background": `linear-gradient( to var(--float-end), ${gradient})`,
|
||||
})}
|
||||
labeled
|
||||
icon="hass:thermometer"
|
||||
icon="mdi:thermometer"
|
||||
.caption=${this.label || ""}
|
||||
.min=${min}
|
||||
.max=${max}
|
||||
|
@@ -321,7 +321,7 @@ export class HaMediaSelector extends LitElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
gap: 12px;
|
||||
gap: var(--ha-space-3);
|
||||
}
|
||||
ha-card .thumbnail {
|
||||
width: 40px;
|
||||
|
@@ -82,12 +82,12 @@ export class HaNumberSelector extends LitElement {
|
||||
labeled
|
||||
.min=${this.selector.number!.min}
|
||||
.max=${this.selector.number!.max}
|
||||
.value=${this.value ?? ""}
|
||||
.value=${this.value}
|
||||
.step=${sliderStep}
|
||||
.disabled=${this.disabled}
|
||||
.required=${this.required}
|
||||
@change=${this._handleSliderChange}
|
||||
.ticks=${this.selector.number?.slider_ticks}
|
||||
.withMarkers=${this.selector.number?.slider_ticks || false}
|
||||
>
|
||||
</ha-slider>
|
||||
`
|
||||
|
@@ -297,7 +297,7 @@ export class HaObjectSelector extends LitElement {
|
||||
return [
|
||||
css`
|
||||
ha-md-list {
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
ha-md-list-item {
|
||||
border: 1px solid var(--divider-color);
|
||||
|
@@ -19,7 +19,7 @@ export class HaSlider extends Slider {
|
||||
Slider.styles,
|
||||
css`
|
||||
:host {
|
||||
--wa-form-control-activated-color: var(--primary-color);
|
||||
--wa-form-control-activated-color: var(--ha-control-color);
|
||||
--track-size: var(--ha-slider-track-size, 4px);
|
||||
--marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
|
||||
--marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
|
||||
|
@@ -15,7 +15,7 @@ export class HaSwitch extends SwitchBase {
|
||||
super.firstUpdated();
|
||||
this.addEventListener("change", () => {
|
||||
if (this.haptic) {
|
||||
forwardHaptic("light");
|
||||
forwardHaptic(this, "light");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@@ -1,39 +1,21 @@
|
||||
// @ts-ignore
|
||||
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
|
||||
import "@material/mwc-menu/mwc-menu-surface";
|
||||
import {
|
||||
mdiClose,
|
||||
mdiDevices,
|
||||
mdiHome,
|
||||
mdiLabel,
|
||||
mdiPlus,
|
||||
mdiTextureBox,
|
||||
mdiUnfoldMoreVertical,
|
||||
} from "@mdi/js";
|
||||
import { mdiPlus } from "@mdi/js";
|
||||
import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
|
||||
import type {
|
||||
HassEntity,
|
||||
HassServiceTarget,
|
||||
UnsubscribeFunc,
|
||||
} from "home-assistant-js-websocket";
|
||||
import type { HassServiceTarget } from "home-assistant-js-websocket";
|
||||
import type { CSSResultGroup } from "lit";
|
||||
import { LitElement, css, html, nothing, unsafeCSS } from "lit";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import { ensureArray } from "../common/array/ensure-array";
|
||||
import { computeCssColor } from "../common/color/compute-color";
|
||||
import { hex2rgb } from "../common/color/convert-color";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { stopPropagation } from "../common/dom/stop_propagation";
|
||||
import { computeDeviceNameDisplay } from "../common/entity/compute_device_name";
|
||||
import { computeDomain } from "../common/entity/compute_domain";
|
||||
import { computeStateName } from "../common/entity/compute_state_name";
|
||||
import { isValidEntityId } from "../common/entity/valid_entity_id";
|
||||
import type { AreaRegistryEntry } from "../data/area_registry";
|
||||
import type { DeviceRegistryEntry } from "../data/device_registry";
|
||||
import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
|
||||
import type { LabelRegistryEntry } from "../data/label_registry";
|
||||
import { subscribeLabelRegistry } from "../data/label_registry";
|
||||
import {
|
||||
areaMeetsFilter,
|
||||
deviceMeetsFilter,
|
||||
entityRegMeetsFilter,
|
||||
} from "../data/target";
|
||||
import { SubscribeMixin } from "../mixins/subscribe-mixin";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import "./device/ha-device-picker";
|
||||
@@ -41,12 +23,14 @@ import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
|
||||
import "./entity/ha-entity-picker";
|
||||
import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
|
||||
import "./ha-area-floor-picker";
|
||||
import { floorDefaultIconPath } from "./ha-floor-icon";
|
||||
import "./ha-icon-button";
|
||||
import "./ha-input-helper-text";
|
||||
import "./ha-label-picker";
|
||||
import "./ha-svg-icon";
|
||||
import "./ha-tooltip";
|
||||
import "./target-picker/ha-target-picker-chips-selection";
|
||||
import "./target-picker/ha-target-picker-item-group";
|
||||
import type { TargetType } from "./target-picker/ha-target-picker-item-row";
|
||||
|
||||
@customElement("ha-target-picker")
|
||||
export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
@@ -58,6 +42,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
|
||||
@property() public helper?: string;
|
||||
|
||||
@property({ type: Boolean, reflect: true }) public compact = false;
|
||||
|
||||
@property({ attribute: false, type: Array }) public createDomains?: string[];
|
||||
|
||||
/**
|
||||
@@ -96,18 +82,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
|
||||
@query(".add-container", true) private _addContainer?: HTMLDivElement;
|
||||
|
||||
@state() private _labels?: LabelRegistryEntry[];
|
||||
|
||||
private _opened = false;
|
||||
|
||||
protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
|
||||
return [
|
||||
subscribeLabelRegistry(this.hass.connection, (labels) => {
|
||||
this._labels = labels;
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (this.addOnTop) {
|
||||
return html` ${this._renderChips()} ${this._renderItems()} `;
|
||||
@@ -116,89 +92,154 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
}
|
||||
|
||||
private _renderItems() {
|
||||
if (
|
||||
!this.value?.floor_id &&
|
||||
!this.value?.area_id &&
|
||||
!this.value?.device_id &&
|
||||
!this.value?.entity_id &&
|
||||
!this.value?.label_id
|
||||
) {
|
||||
return nothing;
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="mdc-chip-set items">
|
||||
${this.value?.floor_id
|
||||
? ensureArray(this.value.floor_id).map((floor_id) => {
|
||||
const floor = this.hass.floors[floor_id];
|
||||
return this._renderChip(
|
||||
"floor_id",
|
||||
floor_id,
|
||||
floor?.name || floor_id,
|
||||
undefined,
|
||||
floor?.icon,
|
||||
floor ? floorDefaultIconPath(floor) : mdiHome
|
||||
);
|
||||
})
|
||||
: ""}
|
||||
${this.value?.area_id
|
||||
? ensureArray(this.value.area_id).map((area_id) => {
|
||||
const area = this.hass.areas![area_id];
|
||||
return this._renderChip(
|
||||
"area_id",
|
||||
area_id,
|
||||
area?.name || area_id,
|
||||
undefined,
|
||||
area?.icon,
|
||||
mdiTextureBox
|
||||
);
|
||||
})
|
||||
: nothing}
|
||||
${this.value?.device_id
|
||||
? ensureArray(this.value.device_id).map((device_id) => {
|
||||
const device = this.hass.devices![device_id];
|
||||
return this._renderChip(
|
||||
"device_id",
|
||||
device_id,
|
||||
device
|
||||
? computeDeviceNameDisplay(device, this.hass)
|
||||
: device_id,
|
||||
undefined,
|
||||
undefined,
|
||||
mdiDevices
|
||||
);
|
||||
})
|
||||
: nothing}
|
||||
${this.value?.entity_id
|
||||
? ensureArray(this.value.entity_id).map((entity_id) => {
|
||||
const entity = this.hass.states[entity_id];
|
||||
return this._renderChip(
|
||||
"entity_id",
|
||||
entity_id,
|
||||
entity ? computeStateName(entity) : entity_id,
|
||||
entity
|
||||
);
|
||||
})
|
||||
: nothing}
|
||||
${this.value?.label_id
|
||||
? ensureArray(this.value.label_id).map((label_id) => {
|
||||
const label = this._labels?.find(
|
||||
(lbl) => lbl.label_id === label_id
|
||||
);
|
||||
let color = label?.color
|
||||
? computeCssColor(label.color)
|
||||
: undefined;
|
||||
if (color?.startsWith("var(")) {
|
||||
const computedStyles = getComputedStyle(this);
|
||||
color = computedStyles.getPropertyValue(
|
||||
color.substring(4, color.length - 1)
|
||||
);
|
||||
}
|
||||
if (color?.startsWith("#")) {
|
||||
color = hex2rgb(color).join(",");
|
||||
}
|
||||
return this._renderChip(
|
||||
"label_id",
|
||||
label_id,
|
||||
label ? label.name : label_id,
|
||||
undefined,
|
||||
label?.icon,
|
||||
mdiLabel,
|
||||
color
|
||||
);
|
||||
})
|
||||
: nothing}
|
||||
</div>
|
||||
${this.compact
|
||||
? html`<div class="mdc-chip-set items">
|
||||
${this.value?.floor_id
|
||||
? ensureArray(this.value.floor_id).map(
|
||||
(floor_id) => html`
|
||||
<ha-target-picker-chips-selection
|
||||
.hass=${this.hass}
|
||||
.type=${"floor"}
|
||||
.itemId=${floor_id}
|
||||
@remove-target-item=${this._handleRemove}
|
||||
@expand-target-item=${this._handleExpand}
|
||||
></ha-target-picker-chips-selection>
|
||||
`
|
||||
)
|
||||
: nothing}
|
||||
${this.value?.area_id
|
||||
? ensureArray(this.value.area_id).map(
|
||||
(area_id) => html`
|
||||
<ha-target-picker-chips-selection
|
||||
.hass=${this.hass}
|
||||
.type=${"area"}
|
||||
.itemId=${area_id}
|
||||
@remove-target-item=${this._handleRemove}
|
||||
@expand-target-item=${this._handleExpand}
|
||||
></ha-target-picker-chips-selection>
|
||||
`
|
||||
)
|
||||
: nothing}
|
||||
${this.value?.device_id
|
||||
? ensureArray(this.value.device_id).map(
|
||||
(device_id) => html`
|
||||
<ha-target-picker-chips-selection
|
||||
.hass=${this.hass}
|
||||
.type=${"device"}
|
||||
.itemId=${device_id}
|
||||
@remove-target-item=${this._handleRemove}
|
||||
@expand-target-item=${this._handleExpand}
|
||||
></ha-target-picker-chips-selection>
|
||||
`
|
||||
)
|
||||
: nothing}
|
||||
${this.value?.entity_id
|
||||
? ensureArray(this.value.entity_id).map(
|
||||
(entity_id) => html`
|
||||
<ha-target-picker-chips-selection
|
||||
.hass=${this.hass}
|
||||
.type=${"entity"}
|
||||
.itemId=${entity_id}
|
||||
@remove-target-item=${this._handleRemove}
|
||||
@expand-target-item=${this._handleExpand}
|
||||
></ha-target-picker-chips-selection>
|
||||
`
|
||||
)
|
||||
: nothing}
|
||||
${this.value?.label_id
|
||||
? ensureArray(this.value.label_id).map(
|
||||
(label_id) => html`
|
||||
<ha-target-picker-chips-selection
|
||||
.hass=${this.hass}
|
||||
.type=${"label"}
|
||||
.itemId=${label_id}
|
||||
@remove-target-item=${this._handleRemove}
|
||||
@expand-target-item=${this._handleExpand}
|
||||
></ha-target-picker-chips-selection>
|
||||
`
|
||||
)
|
||||
: nothing}
|
||||
</div>`
|
||||
: html`<div class="item-groups">
|
||||
${this.value?.floor_id || this.value?.area_id
|
||||
? html`
|
||||
<ha-target-picker-item-group
|
||||
@remove-target-item=${this._handleRemove}
|
||||
type="area"
|
||||
.hass=${this.hass}
|
||||
.items=${{
|
||||
floor: ensureArray(this.value?.floor_id),
|
||||
area: ensureArray(this.value?.area_id),
|
||||
}}
|
||||
.collapsed=${this.compact}
|
||||
.deviceFilter=${this.deviceFilter}
|
||||
.entityFilter=${this.entityFilter}
|
||||
.includeDomains=${this.includeDomains}
|
||||
.includeDeviceClasses=${this.includeDeviceClasses}
|
||||
>
|
||||
</ha-target-picker-item-group>
|
||||
`
|
||||
: nothing}
|
||||
${this.value?.device_id
|
||||
? html`
|
||||
<ha-target-picker-item-group
|
||||
@remove-target-item=${this._handleRemove}
|
||||
type="device"
|
||||
.hass=${this.hass}
|
||||
.items=${{ device: ensureArray(this.value?.device_id) }}
|
||||
.collapsed=${this.compact}
|
||||
.deviceFilter=${this.deviceFilter}
|
||||
.entityFilter=${this.entityFilter}
|
||||
.includeDomains=${this.includeDomains}
|
||||
.includeDeviceClasses=${this.includeDeviceClasses}
|
||||
>
|
||||
</ha-target-picker-item-group>
|
||||
`
|
||||
: nothing}
|
||||
${this.value?.entity_id
|
||||
? html`
|
||||
<ha-target-picker-item-group
|
||||
@remove-target-item=${this._handleRemove}
|
||||
type="entity"
|
||||
.hass=${this.hass}
|
||||
.items=${{ entity: ensureArray(this.value?.entity_id) }}
|
||||
.collapsed=${this.compact}
|
||||
.deviceFilter=${this.deviceFilter}
|
||||
.entityFilter=${this.entityFilter}
|
||||
.includeDomains=${this.includeDomains}
|
||||
.includeDeviceClasses=${this.includeDeviceClasses}
|
||||
>
|
||||
</ha-target-picker-item-group>
|
||||
`
|
||||
: nothing}
|
||||
${this.value?.label_id
|
||||
? html`
|
||||
<ha-target-picker-item-group
|
||||
@remove-target-item=${this._handleRemove}
|
||||
type="label"
|
||||
.hass=${this.hass}
|
||||
.items=${{ label: ensureArray(this.value?.label_id) }}
|
||||
.collapsed=${this.compact}
|
||||
.deviceFilter=${this.deviceFilter}
|
||||
.entityFilter=${this.entityFilter}
|
||||
.includeDomains=${this.includeDomains}
|
||||
.includeDeviceClasses=${this.includeDeviceClasses}
|
||||
>
|
||||
</ha-target-picker-item-group>
|
||||
`
|
||||
: nothing}
|
||||
</div>`}
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -299,85 +340,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
this._addMode = ev.currentTarget.type;
|
||||
}
|
||||
|
||||
private _renderChip(
|
||||
type: "floor_id" | "area_id" | "device_id" | "entity_id" | "label_id",
|
||||
id: string,
|
||||
name: string,
|
||||
entityState?: HassEntity,
|
||||
icon?: string | null,
|
||||
fallbackIconPath?: string,
|
||||
color?: string
|
||||
) {
|
||||
return html`
|
||||
<div
|
||||
class="mdc-chip ${classMap({
|
||||
[type]: true,
|
||||
})}"
|
||||
style=${color
|
||||
? `--color: rgb(${color}); --background-color: rgba(${color}, .5)`
|
||||
: ""}
|
||||
>
|
||||
${icon
|
||||
? html`<ha-icon
|
||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
||||
.icon=${icon}
|
||||
></ha-icon>`
|
||||
: fallbackIconPath
|
||||
? html`<ha-svg-icon
|
||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
||||
.path=${fallbackIconPath}
|
||||
></ha-svg-icon>`
|
||||
: ""}
|
||||
${entityState
|
||||
? html`<ha-state-icon
|
||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
||||
.hass=${this.hass}
|
||||
.stateObj=${entityState}
|
||||
></ha-state-icon>`
|
||||
: ""}
|
||||
<span role="gridcell">
|
||||
<span role="button" tabindex="0" class="mdc-chip__primary-action">
|
||||
<span class="mdc-chip__text">${name}</span>
|
||||
</span>
|
||||
</span>
|
||||
${type === "entity_id"
|
||||
? ""
|
||||
: html`<span role="gridcell">
|
||||
<ha-tooltip .for="expand-${id}"
|
||||
>${this.hass.localize(
|
||||
`ui.components.target-picker.expand_${type}`
|
||||
)}
|
||||
</ha-tooltip>
|
||||
<ha-icon-button
|
||||
class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.target-picker.expand"
|
||||
)}
|
||||
.path=${mdiUnfoldMoreVertical}
|
||||
hide-title
|
||||
.id="expand-${id}"
|
||||
.type=${type}
|
||||
@click=${this._handleExpand}
|
||||
></ha-icon-button>
|
||||
</span>`}
|
||||
<span role="gridcell">
|
||||
<ha-tooltip .for="remove-${id}">
|
||||
${this.hass.localize(`ui.components.target-picker.remove_${type}`)}
|
||||
</ha-tooltip>
|
||||
<ha-icon-button
|
||||
class="mdc-chip__icon mdc-chip__icon--trailing"
|
||||
.label=${this.hass.localize("ui.components.target-picker.remove")}
|
||||
.path=${mdiClose}
|
||||
hide-title
|
||||
.id="remove-${id}"
|
||||
.type=${type}
|
||||
@click=${this._handleRemove}
|
||||
></ha-icon-button>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private _renderPicker() {
|
||||
if (!this._addMode) {
|
||||
return nothing;
|
||||
@@ -520,76 +482,138 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
});
|
||||
}
|
||||
|
||||
private _handleRemove(ev) {
|
||||
const { type, id } = ev.detail;
|
||||
fireEvent(this, "value-changed", {
|
||||
value: this._removeItem(this.value, type, id),
|
||||
});
|
||||
}
|
||||
|
||||
private _handleExpand(ev) {
|
||||
const target = ev.currentTarget as any;
|
||||
const id = target.id.replace(/^expand-/, "");
|
||||
const type = ev.detail.type;
|
||||
const itemId = ev.detail.id;
|
||||
const newAreas: string[] = [];
|
||||
const newDevices: string[] = [];
|
||||
const newEntities: string[] = [];
|
||||
|
||||
if (target.type === "floor_id") {
|
||||
if (type === "floor") {
|
||||
Object.values(this.hass.areas).forEach((area) => {
|
||||
if (
|
||||
area.floor_id === id &&
|
||||
area.floor_id === itemId &&
|
||||
!this.value!.area_id?.includes(area.area_id) &&
|
||||
this._areaMeetsFilter(area)
|
||||
areaMeetsFilter(
|
||||
area,
|
||||
this.hass.devices,
|
||||
this.hass.entities,
|
||||
this.deviceFilter,
|
||||
this.includeDomains,
|
||||
this.includeDeviceClasses,
|
||||
this.hass.states,
|
||||
this.entityFilter
|
||||
)
|
||||
) {
|
||||
newAreas.push(area.area_id);
|
||||
}
|
||||
});
|
||||
} else if (target.type === "area_id") {
|
||||
} else if (type === "area") {
|
||||
Object.values(this.hass.devices).forEach((device) => {
|
||||
if (
|
||||
device.area_id === id &&
|
||||
device.area_id === itemId &&
|
||||
!this.value!.device_id?.includes(device.id) &&
|
||||
this._deviceMeetsFilter(device)
|
||||
deviceMeetsFilter(
|
||||
device,
|
||||
this.hass.entities,
|
||||
this.deviceFilter,
|
||||
this.includeDomains,
|
||||
this.includeDeviceClasses,
|
||||
this.hass.states,
|
||||
this.entityFilter
|
||||
)
|
||||
) {
|
||||
newDevices.push(device.id);
|
||||
}
|
||||
});
|
||||
Object.values(this.hass.entities).forEach((entity) => {
|
||||
if (
|
||||
entity.area_id === id &&
|
||||
entity.area_id === itemId &&
|
||||
!this.value!.entity_id?.includes(entity.entity_id) &&
|
||||
this._entityRegMeetsFilter(entity)
|
||||
entityRegMeetsFilter(
|
||||
entity,
|
||||
false,
|
||||
this.includeDomains,
|
||||
this.includeDeviceClasses,
|
||||
this.hass.states,
|
||||
this.entityFilter
|
||||
)
|
||||
) {
|
||||
newEntities.push(entity.entity_id);
|
||||
}
|
||||
});
|
||||
} else if (target.type === "device_id") {
|
||||
} else if (type === "device") {
|
||||
Object.values(this.hass.entities).forEach((entity) => {
|
||||
if (
|
||||
entity.device_id === id &&
|
||||
entity.device_id === itemId &&
|
||||
!this.value!.entity_id?.includes(entity.entity_id) &&
|
||||
this._entityRegMeetsFilter(entity)
|
||||
entityRegMeetsFilter(
|
||||
entity,
|
||||
false,
|
||||
this.includeDomains,
|
||||
this.includeDeviceClasses,
|
||||
this.hass.states,
|
||||
this.entityFilter
|
||||
)
|
||||
) {
|
||||
newEntities.push(entity.entity_id);
|
||||
}
|
||||
});
|
||||
} else if (target.type === "label_id") {
|
||||
} else if (type === "label") {
|
||||
Object.values(this.hass.areas).forEach((area) => {
|
||||
if (
|
||||
area.labels.includes(id) &&
|
||||
area.labels.includes(itemId) &&
|
||||
!this.value!.area_id?.includes(area.area_id) &&
|
||||
this._areaMeetsFilter(area)
|
||||
areaMeetsFilter(
|
||||
area,
|
||||
this.hass.devices,
|
||||
this.hass.entities,
|
||||
this.deviceFilter,
|
||||
this.includeDomains,
|
||||
this.includeDeviceClasses,
|
||||
this.hass.states,
|
||||
this.entityFilter
|
||||
)
|
||||
) {
|
||||
newAreas.push(area.area_id);
|
||||
}
|
||||
});
|
||||
Object.values(this.hass.devices).forEach((device) => {
|
||||
if (
|
||||
device.labels.includes(id) &&
|
||||
device.labels.includes(itemId) &&
|
||||
!this.value!.device_id?.includes(device.id) &&
|
||||
this._deviceMeetsFilter(device)
|
||||
deviceMeetsFilter(
|
||||
device,
|
||||
this.hass.entities,
|
||||
this.deviceFilter,
|
||||
this.includeDomains,
|
||||
this.includeDeviceClasses,
|
||||
this.hass.states,
|
||||
this.entityFilter
|
||||
)
|
||||
) {
|
||||
newDevices.push(device.id);
|
||||
}
|
||||
});
|
||||
Object.values(this.hass.entities).forEach((entity) => {
|
||||
if (
|
||||
entity.labels.includes(id) &&
|
||||
entity.labels.includes(itemId) &&
|
||||
!this.value!.entity_id?.includes(entity.entity_id) &&
|
||||
this._entityRegMeetsFilter(entity, true)
|
||||
entityRegMeetsFilter(
|
||||
entity,
|
||||
true,
|
||||
this.includeDomains,
|
||||
this.includeDeviceClasses,
|
||||
this.hass.states,
|
||||
this.entityFilter
|
||||
)
|
||||
) {
|
||||
newEntities.push(entity.entity_id);
|
||||
}
|
||||
@@ -607,18 +631,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
if (newAreas.length) {
|
||||
value = this._addItems(value, "area_id", newAreas);
|
||||
}
|
||||
value = this._removeItem(value, target.type, id);
|
||||
value = this._removeItem(value, type, itemId);
|
||||
fireEvent(this, "value-changed", { value });
|
||||
}
|
||||
|
||||
private _handleRemove(ev) {
|
||||
const target = ev.currentTarget as any;
|
||||
const id = target.id.replace(/^remove-/, "");
|
||||
fireEvent(this, "value-changed", {
|
||||
value: this._removeItem(this.value, target.type, id),
|
||||
});
|
||||
}
|
||||
|
||||
private _addItems(
|
||||
value: this["value"],
|
||||
type: string,
|
||||
@@ -632,20 +648,22 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
|
||||
private _removeItem(
|
||||
value: this["value"],
|
||||
type: string,
|
||||
type: TargetType,
|
||||
id: string
|
||||
): this["value"] {
|
||||
const newVal = ensureArray(value![type])!.filter(
|
||||
const typeId = `${type}_id`;
|
||||
|
||||
const newVal = ensureArray(value![typeId])!.filter(
|
||||
(val) => String(val) !== id
|
||||
);
|
||||
if (newVal.length) {
|
||||
return {
|
||||
...value,
|
||||
[type]: newVal,
|
||||
[typeId]: newVal,
|
||||
};
|
||||
}
|
||||
const val = { ...value }!;
|
||||
delete val[type];
|
||||
delete val[typeId];
|
||||
if (Object.keys(val).length) {
|
||||
return val;
|
||||
}
|
||||
@@ -677,83 +695,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
private _areaMeetsFilter(area: AreaRegistryEntry): boolean {
|
||||
const areaDevices = Object.values(this.hass.devices).filter(
|
||||
(device) => device.area_id === area.area_id
|
||||
);
|
||||
|
||||
if (areaDevices.some((device) => this._deviceMeetsFilter(device))) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const areaEntities = Object.values(this.hass.entities).filter(
|
||||
(entity) => entity.area_id === area.area_id
|
||||
);
|
||||
|
||||
if (areaEntities.some((entity) => this._entityRegMeetsFilter(entity))) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
private _deviceMeetsFilter(device: DeviceRegistryEntry): boolean {
|
||||
const devEntities = Object.values(this.hass.entities).filter(
|
||||
(entity) => entity.device_id === device.id
|
||||
);
|
||||
|
||||
if (!devEntities.some((entity) => this._entityRegMeetsFilter(entity))) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.deviceFilter) {
|
||||
if (!this.deviceFilter(device)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
private _entityRegMeetsFilter(
|
||||
entity: EntityRegistryDisplayEntry,
|
||||
includeSecondary = false
|
||||
): boolean {
|
||||
if (entity.hidden || (entity.entity_category && !includeSecondary)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
this.includeDomains &&
|
||||
!this.includeDomains.includes(computeDomain(entity.entity_id))
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
if (this.includeDeviceClasses) {
|
||||
const stateObj = this.hass.states[entity.entity_id];
|
||||
if (!stateObj) {
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
!stateObj.attributes.device_class ||
|
||||
!this.includeDeviceClasses!.includes(stateObj.attributes.device_class)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.entityFilter) {
|
||||
const stateObj = this.hass.states[entity.entity_id];
|
||||
if (!stateObj) {
|
||||
return false;
|
||||
}
|
||||
if (!this.entityFilter!(stateObj)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
${unsafeCSS(chipStyles)}
|
||||
@@ -765,6 +706,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
}
|
||||
.mdc-chip-set {
|
||||
padding: 4px 0;
|
||||
gap: 8px;
|
||||
}
|
||||
.mdc-chip-set .mdc-chip {
|
||||
margin: 0;
|
||||
}
|
||||
.mdc-chip.add {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
@@ -786,7 +731,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
border-radius: 50%;
|
||||
background: var(--secondary-text-color);
|
||||
}
|
||||
.mdc-chip__icon.mdc-chip__icon--trailing {
|
||||
.mdc-chip__icon.mdc-chip__icon--2 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
--mdc-icon-size: 14px;
|
||||
@@ -807,46 +752,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
margin-inline-end: 4px !important;
|
||||
direction: var(--direction);
|
||||
}
|
||||
.expand-btn {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: initial;
|
||||
}
|
||||
.mdc-chip.area_id:not(.add),
|
||||
.mdc-chip.floor_id:not(.add) {
|
||||
border: 1px solid #fed6a4;
|
||||
background: var(--card-background-color);
|
||||
}
|
||||
.mdc-chip.area_id:not(.add) .mdc-chip__icon--leading,
|
||||
.mdc-chip.area_id.add,
|
||||
.mdc-chip.floor_id:not(.add) .mdc-chip__icon--leading,
|
||||
.mdc-chip.floor_id.add {
|
||||
background: #fed6a4;
|
||||
}
|
||||
.mdc-chip.device_id:not(.add) {
|
||||
border: 1px 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: 1px 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.label_id:not(.add) {
|
||||
border: 1px solid var(--color, #e0e0e0);
|
||||
background: var(--card-background-color);
|
||||
}
|
||||
.mdc-chip.label_id:not(.add) .mdc-chip__icon--leading,
|
||||
.mdc-chip.label_id.add {
|
||||
background: var(--background-color, #e0e0e0);
|
||||
}
|
||||
.mdc-chip:hover {
|
||||
z-index: 5;
|
||||
}
|
||||
@@ -863,8 +768,30 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
ha-tooltip {
|
||||
--ha-tooltip-arrow-size: 0;
|
||||
|
||||
.item-groups {
|
||||
overflow: hidden;
|
||||
border: 2px solid var(--divider-color);
|
||||
border-radius: var(--ha-border-radius-lg);
|
||||
}
|
||||
|
||||
:host([compact]) .mdc-chip.area_id:not(.add),
|
||||
.mdc-chip.floor_id:not(.add) {
|
||||
border: 1px solid #fed6a4;
|
||||
background: var(--card-background-color);
|
||||
}
|
||||
:host([compact]) .mdc-chip.area_id.add,
|
||||
:host([compact]) .mdc-chip.floor_id.add {
|
||||
background: #fed6a4;
|
||||
}
|
||||
:host([compact]) .mdc-chip.device_id.add {
|
||||
background: #a8e1fb;
|
||||
}
|
||||
:host([compact]) .mdc-chip.entity_id.add {
|
||||
background: #d2e7b9;
|
||||
}
|
||||
:host([compact]) .mdc-chip.label_id.add {
|
||||
background: var(--background-color, #e0e0e0);
|
||||
}
|
||||
`;
|
||||
}
|
||||
@@ -874,4 +801,16 @@ declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-target-picker": HaTargetPicker;
|
||||
}
|
||||
|
||||
interface HASSDomEvents {
|
||||
"remove-target-item": {
|
||||
type: string;
|
||||
id: string;
|
||||
};
|
||||
"expand-target-item": {
|
||||
type: string;
|
||||
id: string;
|
||||
};
|
||||
"remove-target-group": string;
|
||||
}
|
||||
}
|
||||
|
@@ -217,7 +217,7 @@ class DialogJoinMediaPlayers extends LitElement {
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 16px;
|
||||
row-gap: var(--ha-space-4);
|
||||
}
|
||||
|
||||
ha-dialog-header ha-button {
|
||||
|
@@ -1138,7 +1138,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
auto-fit,
|
||||
minmax(var(--media-browse-item-size, 175px), 0.1fr)
|
||||
);
|
||||
grid-gap: 16px;
|
||||
grid-gap: var(--ha-space-4);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
@@ -54,7 +54,7 @@ class HaMediaPlayerToggle extends LitElement {
|
||||
.list-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
column-gap: 16px;
|
||||
column-gap: var(--ha-space-4);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
125
src/components/target-picker/dialog/dialog-target-details.ts
Normal file
125
src/components/target-picker/dialog/dialog-target-details.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
import { ContextProvider } from "@lit/context";
|
||||
import { mdiClose } from "@mdi/js";
|
||||
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import { css, html, LitElement, nothing } from "lit";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import { labelsContext } from "../../../data/context";
|
||||
import { subscribeLabelRegistry } from "../../../data/label_registry";
|
||||
import type { HassDialog } from "../../../dialogs/make-dialog-manager";
|
||||
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
||||
import type { HomeAssistant } from "../../../types";
|
||||
import "../../ha-dialog-header";
|
||||
import "../../ha-icon-button";
|
||||
import "../../ha-icon-next";
|
||||
import "../../ha-md-dialog";
|
||||
import type { HaMdDialog } from "../../ha-md-dialog";
|
||||
import "../../ha-md-list";
|
||||
import "../../ha-md-list-item";
|
||||
import "../../ha-svg-icon";
|
||||
import "../ha-target-picker-item-row";
|
||||
import type { TargetDetailsDialogParams } from "./show-dialog-target-details";
|
||||
|
||||
@customElement("ha-dialog-target-details")
|
||||
class DialogTargetDetails
|
||||
extends SubscribeMixin(LitElement)
|
||||
implements HassDialog
|
||||
{
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@state() private _params?: TargetDetailsDialogParams;
|
||||
|
||||
@query("ha-md-dialog") private _dialog?: HaMdDialog;
|
||||
|
||||
private _labelsContext = new ContextProvider(this, {
|
||||
context: labelsContext,
|
||||
initialValue: [],
|
||||
});
|
||||
|
||||
public showDialog(params: TargetDetailsDialogParams): void {
|
||||
this._params = params;
|
||||
}
|
||||
|
||||
public closeDialog() {
|
||||
this._dialog?.close();
|
||||
return true;
|
||||
}
|
||||
|
||||
private _dialogClosed() {
|
||||
fireEvent(this, "dialog-closed", { dialog: this.localName });
|
||||
this._params = undefined;
|
||||
}
|
||||
|
||||
public hassSubscribe(): UnsubscribeFunc[] {
|
||||
return [
|
||||
subscribeLabelRegistry(this.hass.connection!, (labels) => {
|
||||
this._labelsContext.setValue(labels);
|
||||
}),
|
||||
];
|
||||
}
|
||||
|
||||
protected render() {
|
||||
if (!this._params) {
|
||||
return nothing;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-md-dialog open @closed=${this._dialogClosed}>
|
||||
<ha-dialog-header slot="headline">
|
||||
<ha-icon-button
|
||||
slot="navigationIcon"
|
||||
@click=${this.closeDialog}
|
||||
.label=${this.hass.localize("ui.common.close")}
|
||||
.path=${mdiClose}
|
||||
></ha-icon-button>
|
||||
<span slot="title"
|
||||
>${this.hass.localize(
|
||||
"ui.components.target-picker.target_details"
|
||||
)}</span
|
||||
>
|
||||
<span slot="subtitle"
|
||||
>${this.hass.localize(
|
||||
`ui.components.target-picker.type.${this._params.type}`
|
||||
)}:
|
||||
${this._params.title}</span
|
||||
>
|
||||
</ha-dialog-header>
|
||||
<div slot="content">
|
||||
<ha-target-picker-item-row
|
||||
.hass=${this.hass}
|
||||
.type=${this._params.type}
|
||||
.itemId=${this._params.itemId}
|
||||
.deviceFilter=${this._params.deviceFilter}
|
||||
.entityFilter=${this._params.entityFilter}
|
||||
.includeDomains=${this._params.includeDomains}
|
||||
.includeDeviceClasses=${this._params.includeDeviceClasses}
|
||||
expand
|
||||
></ha-target-picker-item-row>
|
||||
</div>
|
||||
</ha-md-dialog>
|
||||
`;
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
ha-md-dialog {
|
||||
min-width: 400px;
|
||||
max-height: 90%;
|
||||
--dialog-content-padding: 8px 24px
|
||||
max(var(--safe-area-inset-bottom, 0px), 32px);
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px), all and (max-height: 500px) {
|
||||
ha-md-dialog {
|
||||
--md-dialog-container-shape: 0;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-dialog-target-details": DialogTargetDetails;
|
||||
}
|
||||
}
|
@@ -0,0 +1,28 @@
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import type { HaDevicePickerDeviceFilterFunc } from "../../device/ha-device-picker";
|
||||
import type { HaEntityPickerEntityFilterFunc } from "../../entity/ha-entity-picker";
|
||||
import type { TargetType } from "../ha-target-picker-item-row";
|
||||
|
||||
export type NewBackupType = "automatic" | "manual";
|
||||
|
||||
export interface TargetDetailsDialogParams {
|
||||
title: string;
|
||||
type: TargetType;
|
||||
itemId: string;
|
||||
deviceFilter?: HaDevicePickerDeviceFilterFunc;
|
||||
entityFilter?: HaEntityPickerEntityFilterFunc;
|
||||
includeDomains?: string[];
|
||||
includeDeviceClasses?: string[];
|
||||
}
|
||||
|
||||
export const loadTargetDetailsDialog = () => import("./dialog-target-details");
|
||||
|
||||
export const showTargetDetailsDialog = (
|
||||
element: HTMLElement,
|
||||
params: TargetDetailsDialogParams
|
||||
) =>
|
||||
fireEvent(element, "show-dialog", {
|
||||
dialogTag: "ha-dialog-target-details",
|
||||
dialogImport: loadTargetDetailsDialog,
|
||||
dialogParams: params,
|
||||
});
|
354
src/components/target-picker/ha-target-picker-chips-selection.ts
Normal file
354
src/components/target-picker/ha-target-picker-chips-selection.ts
Normal file
@@ -0,0 +1,354 @@
|
||||
import { consume } from "@lit/context";
|
||||
// @ts-ignore
|
||||
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
|
||||
import {
|
||||
mdiClose,
|
||||
mdiDevices,
|
||||
mdiHome,
|
||||
mdiLabel,
|
||||
mdiTextureBox,
|
||||
mdiUnfoldMoreVertical,
|
||||
} from "@mdi/js";
|
||||
import { css, html, LitElement, nothing, unsafeCSS } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { computeCssColor } from "../../common/color/compute-color";
|
||||
import { hex2rgb } from "../../common/color/convert-color";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import {
|
||||
computeDeviceName,
|
||||
computeDeviceNameDisplay,
|
||||
} from "../../common/entity/compute_device_name";
|
||||
import { computeDomain } from "../../common/entity/compute_domain";
|
||||
import { computeEntityName } from "../../common/entity/compute_entity_name";
|
||||
import { getEntityContext } from "../../common/entity/context/get_entity_context";
|
||||
import { getConfigEntry } from "../../data/config_entries";
|
||||
import { labelsContext } from "../../data/context";
|
||||
import { domainToName } from "../../data/integration";
|
||||
import type { LabelRegistryEntry } from "../../data/label_registry";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import { brandsUrl } from "../../util/brands-url";
|
||||
import { floorDefaultIconPath } from "../ha-floor-icon";
|
||||
import "../ha-icon";
|
||||
import "../ha-icon-button";
|
||||
import "../ha-md-list";
|
||||
import "../ha-md-list-item";
|
||||
import "../ha-state-icon";
|
||||
import "../ha-tooltip";
|
||||
import type { TargetType } from "./ha-target-picker-item-row";
|
||||
|
||||
@customElement("ha-target-picker-chips-selection")
|
||||
export class HaTargetPickerChipsSelection extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ reflect: true }) public type!: TargetType;
|
||||
|
||||
@property({ attribute: "item-id" }) public itemId!: string;
|
||||
|
||||
@state() private _domainName?: string;
|
||||
|
||||
@state() private _iconImg?: string;
|
||||
|
||||
@state()
|
||||
@consume({ context: labelsContext, subscribe: true })
|
||||
_labelRegistry!: LabelRegistryEntry[];
|
||||
|
||||
protected render() {
|
||||
const { name, iconPath, fallbackIconPath, stateObject, color } =
|
||||
this._itemData(this.type, this.itemId);
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="mdc-chip ${classMap({
|
||||
[this.type]: true,
|
||||
})}"
|
||||
style=${color
|
||||
? `--color: rgb(${color}); --background-color: rgba(${color}, .5)`
|
||||
: ""}
|
||||
>
|
||||
${iconPath
|
||||
? html`<ha-icon
|
||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
||||
.icon=${iconPath}
|
||||
></ha-icon>`
|
||||
: this._iconImg
|
||||
? html`<img
|
||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
||||
alt=${this._domainName || ""}
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
src=${this._iconImg}
|
||||
/>`
|
||||
: fallbackIconPath
|
||||
? html`<ha-svg-icon
|
||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
||||
.path=${fallbackIconPath}
|
||||
></ha-svg-icon>`
|
||||
: stateObject
|
||||
? html`<ha-state-icon
|
||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObject}
|
||||
></ha-state-icon>`
|
||||
: nothing}
|
||||
<span role="gridcell">
|
||||
<span role="button" tabindex="0" class="mdc-chip__primary-action">
|
||||
<span id="title-${this.itemId}" class="mdc-chip__text"
|
||||
>${name}</span
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
${this.type === "entity"
|
||||
? nothing
|
||||
: html`<span role="gridcell">
|
||||
<ha-tooltip .for="expand-${this.itemId}"
|
||||
>${this.hass.localize(
|
||||
`ui.components.target-picker.expand_${this.type}_id`
|
||||
)}
|
||||
</ha-tooltip>
|
||||
<ha-icon-button
|
||||
class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
|
||||
.label=${this.hass.localize(
|
||||
"ui.components.target-picker.expand"
|
||||
)}
|
||||
.path=${mdiUnfoldMoreVertical}
|
||||
hide-title
|
||||
.id="expand-${this.itemId}"
|
||||
.type=${this.type}
|
||||
@click=${this._handleExpand}
|
||||
></ha-icon-button>
|
||||
</span>`}
|
||||
<span role="gridcell">
|
||||
<ha-tooltip .for="remove-${this.itemId}">
|
||||
${this.hass.localize(
|
||||
`ui.components.target-picker.remove_${this.type}_id`
|
||||
)}
|
||||
</ha-tooltip>
|
||||
<ha-icon-button
|
||||
class="mdc-chip__icon mdc-chip__icon--trailing"
|
||||
.label=${this.hass.localize("ui.components.target-picker.remove")}
|
||||
.path=${mdiClose}
|
||||
hide-title
|
||||
.id="remove-${this.itemId}"
|
||||
.type=${this.type}
|
||||
@click=${this._removeItem}
|
||||
></ha-icon-button>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private _itemData = memoizeOne((type: TargetType, itemId: string) => {
|
||||
if (type === "floor") {
|
||||
const floor = this.hass.floors?.[itemId];
|
||||
return {
|
||||
name: floor?.name || itemId,
|
||||
iconPath: floor?.icon,
|
||||
fallbackIconPath: floor ? floorDefaultIconPath(floor) : mdiHome,
|
||||
};
|
||||
}
|
||||
if (type === "area") {
|
||||
const area = this.hass.areas?.[itemId];
|
||||
return {
|
||||
name: area?.name || itemId,
|
||||
iconPath: area?.icon,
|
||||
fallbackIconPath: mdiTextureBox,
|
||||
};
|
||||
}
|
||||
if (type === "device") {
|
||||
const device = this.hass.devices?.[itemId];
|
||||
|
||||
if (device.primary_config_entry) {
|
||||
this._getDeviceDomain(device.primary_config_entry);
|
||||
}
|
||||
|
||||
return {
|
||||
name: device ? computeDeviceNameDisplay(device, this.hass) : itemId,
|
||||
fallbackIconPath: mdiDevices,
|
||||
};
|
||||
}
|
||||
if (type === "entity") {
|
||||
this._setDomainName(computeDomain(itemId));
|
||||
|
||||
const stateObject = this.hass.states[itemId];
|
||||
const entityName = computeEntityName(
|
||||
stateObject,
|
||||
this.hass.entities,
|
||||
this.hass.devices
|
||||
);
|
||||
const { device } = getEntityContext(
|
||||
stateObject,
|
||||
this.hass.entities,
|
||||
this.hass.devices,
|
||||
this.hass.areas,
|
||||
this.hass.floors
|
||||
);
|
||||
const deviceName = device ? computeDeviceName(device) : undefined;
|
||||
return {
|
||||
name: entityName || deviceName || itemId,
|
||||
stateObject,
|
||||
};
|
||||
}
|
||||
|
||||
// type label
|
||||
const label = this._labelRegistry.find((lab) => lab.label_id === itemId);
|
||||
let color = label?.color ? computeCssColor(label.color) : undefined;
|
||||
if (color?.startsWith("var(")) {
|
||||
const computedStyles = getComputedStyle(this);
|
||||
color = computedStyles.getPropertyValue(
|
||||
color.substring(4, color.length - 1)
|
||||
);
|
||||
}
|
||||
if (color?.startsWith("#")) {
|
||||
color = hex2rgb(color).join(",");
|
||||
}
|
||||
return {
|
||||
name: label?.name || itemId,
|
||||
iconPath: label?.icon,
|
||||
fallbackIconPath: mdiLabel,
|
||||
color,
|
||||
};
|
||||
});
|
||||
|
||||
private _setDomainName(domain: string) {
|
||||
this._domainName = domainToName(this.hass.localize, domain);
|
||||
}
|
||||
|
||||
private async _getDeviceDomain(configEntryId: string) {
|
||||
try {
|
||||
const data = await getConfigEntry(this.hass, configEntryId);
|
||||
const domain = data.config_entry.domain;
|
||||
this._iconImg = brandsUrl({
|
||||
domain: domain,
|
||||
type: "icon",
|
||||
darkOptimized: this.hass.themes?.darkMode,
|
||||
});
|
||||
|
||||
this._setDomainName(domain);
|
||||
} catch {
|
||||
// failed to load config entry -> ignore
|
||||
}
|
||||
}
|
||||
|
||||
private _removeItem(ev) {
|
||||
ev.stopPropagation();
|
||||
fireEvent(this, "remove-target-item", {
|
||||
type: this.type,
|
||||
id: this.itemId,
|
||||
});
|
||||
}
|
||||
|
||||
private _handleExpand(ev) {
|
||||
ev.stopPropagation();
|
||||
fireEvent(this, "expand-target-item", {
|
||||
type: this.type,
|
||||
id: this.itemId,
|
||||
});
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
${unsafeCSS(chipStyles)}
|
||||
.mdc-chip {
|
||||
color: var(--primary-text-color);
|
||||
}
|
||||
.mdc-chip.add {
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
.add-container {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
.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);
|
||||
margin-inline-start: 4px !important;
|
||||
margin-inline-end: -4px !important;
|
||||
direction: var(--direction);
|
||||
}
|
||||
.mdc-chip__icon--leading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
--mdc-icon-size: 20px;
|
||||
border-radius: 50%;
|
||||
padding: 6px;
|
||||
margin-left: -13px !important;
|
||||
margin-inline-start: -13px !important;
|
||||
margin-inline-end: 4px !important;
|
||||
direction: var(--direction);
|
||||
}
|
||||
.expand-btn {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-inline-start: initial;
|
||||
}
|
||||
.mdc-chip.area:not(.add),
|
||||
.mdc-chip.floor:not(.add) {
|
||||
border: 1px solid #fed6a4;
|
||||
background: var(--card-background-color);
|
||||
}
|
||||
.mdc-chip.area:not(.add) .mdc-chip__icon--leading,
|
||||
.mdc-chip.area.add,
|
||||
.mdc-chip.floor:not(.add) .mdc-chip__icon--leading,
|
||||
.mdc-chip.floor.add {
|
||||
background: #fed6a4;
|
||||
}
|
||||
.mdc-chip.device:not(.add) {
|
||||
border: 1px solid #a8e1fb;
|
||||
background: var(--card-background-color);
|
||||
}
|
||||
.mdc-chip.device:not(.add) .mdc-chip__icon--leading,
|
||||
.mdc-chip.device.add {
|
||||
background: #a8e1fb;
|
||||
}
|
||||
.mdc-chip.entity:not(.add) {
|
||||
border: 1px solid #d2e7b9;
|
||||
background: var(--card-background-color);
|
||||
}
|
||||
.mdc-chip.entity:not(.add) .mdc-chip__icon--leading,
|
||||
.mdc-chip.entity.add {
|
||||
background: #d2e7b9;
|
||||
}
|
||||
.mdc-chip.label:not(.add) {
|
||||
border: 1px solid var(--color, #e0e0e0);
|
||||
background: var(--card-background-color);
|
||||
}
|
||||
.mdc-chip.label:not(.add) .mdc-chip__icon--leading,
|
||||
.mdc-chip.label.add {
|
||||
background: var(--background-color, #e0e0e0);
|
||||
}
|
||||
.mdc-chip:hover {
|
||||
z-index: 5;
|
||||
}
|
||||
:host([disabled]) .mdc-chip {
|
||||
opacity: var(--light-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
.tooltip-icon-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-target-picker-chips-selection": HaTargetPickerChipsSelection;
|
||||
}
|
||||
}
|
107
src/components/target-picker/ha-target-picker-item-group.ts
Normal file
107
src/components/target-picker/ha-target-picker-item-group.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
import { css, html, LitElement, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
|
||||
import type { HaEntityPickerEntityFilterFunc } from "../entity/ha-entity-picker";
|
||||
import "../ha-expansion-panel";
|
||||
import "../ha-md-list";
|
||||
import "./ha-target-picker-item-row";
|
||||
import type { TargetType } from "./ha-target-picker-item-row";
|
||||
|
||||
@customElement("ha-target-picker-item-group")
|
||||
export class HaTargetPickerItemGroup extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property() public type!: "entity" | "device" | "area" | "label";
|
||||
|
||||
@property({ attribute: false }) public items!: Partial<
|
||||
Record<TargetType, string[]>
|
||||
>;
|
||||
|
||||
@property({ type: Boolean }) public collapsed = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
public deviceFilter?: HaDevicePickerDeviceFilterFunc;
|
||||
|
||||
@property({ attribute: false })
|
||||
public entityFilter?: HaEntityPickerEntityFilterFunc;
|
||||
|
||||
/**
|
||||
* Show only targets with entities from specific domains.
|
||||
* @type {Array}
|
||||
* @attr include-domains
|
||||
*/
|
||||
@property({ type: Array, attribute: "include-domains" })
|
||||
public includeDomains?: string[];
|
||||
|
||||
/**
|
||||
* Show only targets with entities of these device classes.
|
||||
* @type {Array}
|
||||
* @attr include-device-classes
|
||||
*/
|
||||
@property({ type: Array, attribute: "include-device-classes" })
|
||||
public includeDeviceClasses?: string[];
|
||||
|
||||
protected render() {
|
||||
let count = 0;
|
||||
Object.values(this.items).forEach((items) => {
|
||||
if (items) {
|
||||
count += items.length;
|
||||
}
|
||||
});
|
||||
|
||||
return html`<ha-expansion-panel .expanded=${!this.collapsed} left-chevron>
|
||||
<div slot="header" class="heading">
|
||||
${this.hass.localize(
|
||||
`ui.components.target-picker.selected.${this.type}`,
|
||||
{
|
||||
count,
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
<ha-md-list>
|
||||
${Object.entries(this.items).map(([type, items]) =>
|
||||
items
|
||||
? items.map(
|
||||
(item) =>
|
||||
html`<ha-target-picker-item-row
|
||||
.hass=${this.hass}
|
||||
.type=${type as "entity" | "device" | "area" | "label"}
|
||||
.itemId=${item}
|
||||
.deviceFilter=${this.deviceFilter}
|
||||
.entityFilter=${this.entityFilter}
|
||||
.includeDomains=${this.includeDomains}
|
||||
.includeDeviceClasses=${this.includeDeviceClasses}
|
||||
></ha-target-picker-item-row>`
|
||||
)
|
||||
: nothing
|
||||
)}
|
||||
</ha-md-list>
|
||||
</ha-expansion-panel>`;
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
--expansion-panel-content-padding: 0;
|
||||
}
|
||||
ha-expansion-panel::part(summary) {
|
||||
background-color: var(--ha-color-fill-neutral-quiet-resting);
|
||||
padding: 4px 8px;
|
||||
font-weight: var(--ha-font-weight-bold);
|
||||
color: var(--secondary-text-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-height: unset;
|
||||
}
|
||||
ha-md-list {
|
||||
padding: 0;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-target-picker-item-group": HaTargetPickerItemGroup;
|
||||
}
|
||||
}
|
699
src/components/target-picker/ha-target-picker-item-row.ts
Normal file
699
src/components/target-picker/ha-target-picker-item-row.ts
Normal file
@@ -0,0 +1,699 @@
|
||||
import { consume } from "@lit/context";
|
||||
import {
|
||||
mdiClose,
|
||||
mdiDevices,
|
||||
mdiHome,
|
||||
mdiLabel,
|
||||
mdiTextureBox,
|
||||
} from "@mdi/js";
|
||||
import { css, html, LitElement, nothing, type PropertyValues } from "lit";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { computeAreaName } from "../../common/entity/compute_area_name";
|
||||
import {
|
||||
computeDeviceName,
|
||||
computeDeviceNameDisplay,
|
||||
} from "../../common/entity/compute_device_name";
|
||||
import { computeDomain } from "../../common/entity/compute_domain";
|
||||
import { computeEntityName } from "../../common/entity/compute_entity_name";
|
||||
import { getEntityContext } from "../../common/entity/context/get_entity_context";
|
||||
import { computeRTL } from "../../common/util/compute_rtl";
|
||||
import { getConfigEntry } from "../../data/config_entries";
|
||||
import { labelsContext } from "../../data/context";
|
||||
import { domainToName } from "../../data/integration";
|
||||
import type { LabelRegistryEntry } from "../../data/label_registry";
|
||||
import {
|
||||
areaMeetsFilter,
|
||||
deviceMeetsFilter,
|
||||
entityRegMeetsFilter,
|
||||
extractFromTarget,
|
||||
type ExtractFromTargetResult,
|
||||
type ExtractFromTargetResultReferenced,
|
||||
} from "../../data/target";
|
||||
import { buttonLinkStyle } from "../../resources/styles";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import { brandsUrl } from "../../util/brands-url";
|
||||
import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";
|
||||
import type { HaEntityPickerEntityFilterFunc } from "../entity/ha-entity-picker";
|
||||
import { floorDefaultIconPath } from "../ha-floor-icon";
|
||||
import "../ha-icon-button";
|
||||
import "../ha-md-list";
|
||||
import type { HaMdList } from "../ha-md-list";
|
||||
import "../ha-md-list-item";
|
||||
import type { HaMdListItem } from "../ha-md-list-item";
|
||||
import "../ha-state-icon";
|
||||
import "../ha-svg-icon";
|
||||
import { showTargetDetailsDialog } from "./dialog/show-dialog-target-details";
|
||||
|
||||
export type TargetType = "entity" | "device" | "area" | "label" | "floor";
|
||||
|
||||
@customElement("ha-target-picker-item-row")
|
||||
export class HaTargetPickerItemRow extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ reflect: true }) public type!: TargetType;
|
||||
|
||||
@property({ attribute: "item-id" }) public itemId!: string;
|
||||
|
||||
@property({ type: Boolean }) public expand = false;
|
||||
|
||||
@property({ type: Boolean, attribute: "last" }) public lastItem = false;
|
||||
|
||||
@property({ type: Boolean, attribute: "sub-entry", reflect: true })
|
||||
public subEntry = false;
|
||||
|
||||
@property({ type: Boolean, attribute: "hide-context" })
|
||||
public hideContext = false;
|
||||
|
||||
@property({ attribute: false })
|
||||
public parentEntries?: ExtractFromTargetResultReferenced;
|
||||
|
||||
@property({ attribute: false })
|
||||
public deviceFilter?: HaDevicePickerDeviceFilterFunc;
|
||||
|
||||
@property({ attribute: false })
|
||||
public entityFilter?: HaEntityPickerEntityFilterFunc;
|
||||
|
||||
/**
|
||||
* Show only targets with entities from specific domains.
|
||||
* @type {Array}
|
||||
* @attr include-domains
|
||||
*/
|
||||
@property({ type: Array, attribute: "include-domains" })
|
||||
public includeDomains?: string[];
|
||||
|
||||
/**
|
||||
* Show only targets with entities of these device classes.
|
||||
* @type {Array}
|
||||
* @attr include-device-classes
|
||||
*/
|
||||
@property({ type: Array, attribute: "include-device-classes" })
|
||||
public includeDeviceClasses?: string[];
|
||||
|
||||
@state() private _iconImg?: string;
|
||||
|
||||
@state() private _domainName?: string;
|
||||
|
||||
@state() private _entries?: ExtractFromTargetResult;
|
||||
|
||||
@state()
|
||||
@consume({ context: labelsContext, subscribe: true })
|
||||
_labelRegistry!: LabelRegistryEntry[];
|
||||
|
||||
@query("ha-md-list-item") public item?: HaMdListItem;
|
||||
|
||||
@query("ha-md-list") public list?: HaMdList;
|
||||
|
||||
@query("ha-target-picker-item-row") public itemRow?: HaTargetPickerItemRow;
|
||||
|
||||
protected willUpdate(changedProps: PropertyValues) {
|
||||
if (!this.subEntry && changedProps.has("itemId")) {
|
||||
this._updateItemData();
|
||||
}
|
||||
}
|
||||
|
||||
protected render() {
|
||||
const { name, context, iconPath, fallbackIconPath, stateObject } =
|
||||
this._itemData(this.type, this.itemId);
|
||||
|
||||
const showDevices = ["floor", "area", "label"].includes(this.type);
|
||||
const showEntities = this.type !== "entity";
|
||||
|
||||
const entries = this.parentEntries || this._entries;
|
||||
|
||||
// Don't show sub entries that have no entities
|
||||
if (
|
||||
this.subEntry &&
|
||||
this.type !== "entity" &&
|
||||
(!entries || entries.referenced_entities.length === 0)
|
||||
) {
|
||||
return nothing;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-md-list-item type="text">
|
||||
<div slot="start">
|
||||
${this.subEntry
|
||||
? html`
|
||||
<div class="horizontal-line-wrapper">
|
||||
<div class="horizontal-line"></div>
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
${iconPath
|
||||
? html`<ha-icon .icon=${iconPath}></ha-icon>`
|
||||
: this._iconImg
|
||||
? html`<img
|
||||
alt=${this._domainName || ""}
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
src=${this._iconImg}
|
||||
/>`
|
||||
: fallbackIconPath
|
||||
? html`<ha-svg-icon .path=${fallbackIconPath}></ha-svg-icon>`
|
||||
: stateObject
|
||||
? html`
|
||||
<ha-state-icon
|
||||
.hass=${this.hass}
|
||||
.stateObj=${stateObject}
|
||||
>
|
||||
</ha-state-icon>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
|
||||
<div slot="headline">${name}</div>
|
||||
${context && !this.hideContext
|
||||
? html`<span slot="supporting-text">${context}</span>`
|
||||
: this._domainName && this.subEntry
|
||||
? html`<span slot="supporting-text" class="domain"
|
||||
>${this._domainName}</span
|
||||
>`
|
||||
: nothing}
|
||||
${!this.subEntry &&
|
||||
((entries && (showEntities || showDevices)) || this._domainName)
|
||||
? html`
|
||||
<div slot="end" class="summary">
|
||||
${showEntities && !this.expand
|
||||
? html`<button class="main link" @click=${this._openDetails}>
|
||||
${this.hass.localize(
|
||||
"ui.components.target-picker.entities_count",
|
||||
{
|
||||
count: entries?.referenced_entities.length,
|
||||
}
|
||||
)}
|
||||
</button>`
|
||||
: showEntities
|
||||
? html`<span class="main">
|
||||
${this.hass.localize(
|
||||
"ui.components.target-picker.entities_count",
|
||||
{
|
||||
count: entries?.referenced_entities.length,
|
||||
}
|
||||
)}
|
||||
</span>`
|
||||
: nothing}
|
||||
${showDevices
|
||||
? html`<span class="secondary"
|
||||
>${this.hass.localize(
|
||||
"ui.components.target-picker.devices_count",
|
||||
{
|
||||
count: entries?.referenced_devices.length,
|
||||
}
|
||||
)}</span
|
||||
>`
|
||||
: nothing}
|
||||
${this._domainName && !showDevices
|
||||
? html`<span class="secondary domain"
|
||||
>${this._domainName}</span
|
||||
>`
|
||||
: nothing}
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
${!this.expand && !this.subEntry
|
||||
? html`
|
||||
<ha-icon-button
|
||||
.path=${mdiClose}
|
||||
slot="end"
|
||||
@click=${this._removeItem}
|
||||
></ha-icon-button>
|
||||
`
|
||||
: nothing}
|
||||
</ha-md-list-item>
|
||||
${this.expand && entries && entries.referenced_entities
|
||||
? this._renderEntries()
|
||||
: nothing}
|
||||
`;
|
||||
}
|
||||
|
||||
private _renderEntries() {
|
||||
const entries = this.parentEntries || this._entries;
|
||||
|
||||
let nextType: TargetType =
|
||||
this.type === "floor"
|
||||
? "area"
|
||||
: this.type === "area"
|
||||
? "device"
|
||||
: "entity";
|
||||
|
||||
if (this.type === "label") {
|
||||
if (entries?.referenced_areas.length) {
|
||||
nextType = "area";
|
||||
} else if (entries?.referenced_devices.length) {
|
||||
nextType = "device";
|
||||
}
|
||||
}
|
||||
|
||||
const rows1 =
|
||||
(nextType === "area"
|
||||
? entries?.referenced_areas
|
||||
: nextType === "device"
|
||||
? entries?.referenced_devices
|
||||
: entries?.referenced_entities) || [];
|
||||
|
||||
const devicesInAreas = [] as string[];
|
||||
|
||||
const rows1Entries =
|
||||
nextType === "entity"
|
||||
? undefined
|
||||
: rows1.map((rowItem) => {
|
||||
const nextEntries = {
|
||||
referenced_areas: [] as string[],
|
||||
referenced_devices: [] as string[],
|
||||
referenced_entities: [] as string[],
|
||||
};
|
||||
|
||||
if (nextType === "area") {
|
||||
nextEntries.referenced_devices =
|
||||
entries?.referenced_devices.filter(
|
||||
(device_id) =>
|
||||
this.hass.devices?.[device_id]?.area_id === rowItem &&
|
||||
entries?.referenced_entities.some(
|
||||
(entity_id) =>
|
||||
this.hass.entities?.[entity_id]?.device_id === device_id
|
||||
)
|
||||
) || ([] as string[]);
|
||||
|
||||
devicesInAreas.push(...nextEntries.referenced_devices);
|
||||
|
||||
nextEntries.referenced_entities =
|
||||
entries?.referenced_entities.filter((entity_id) => {
|
||||
const entity = this.hass.entities[entity_id];
|
||||
return (
|
||||
entity.area_id === rowItem ||
|
||||
!entity.device_id ||
|
||||
nextEntries.referenced_devices.includes(entity.device_id)
|
||||
);
|
||||
}) || ([] as string[]);
|
||||
|
||||
return nextEntries;
|
||||
}
|
||||
|
||||
nextEntries.referenced_entities =
|
||||
entries?.referenced_entities.filter(
|
||||
(entity_id) =>
|
||||
this.hass.entities?.[entity_id]?.device_id === rowItem
|
||||
) || ([] as string[]);
|
||||
|
||||
return nextEntries;
|
||||
});
|
||||
|
||||
const entityRows =
|
||||
this.type === "label" && entries
|
||||
? entries.referenced_entities.filter((entity_id) =>
|
||||
this.hass.entities[entity_id].labels.includes(this.itemId)
|
||||
)
|
||||
: nextType === "device" && entries
|
||||
? entries.referenced_entities.filter(
|
||||
(entity_id) =>
|
||||
this.hass.entities[entity_id].area_id === this.itemId
|
||||
)
|
||||
: [];
|
||||
|
||||
const deviceRows =
|
||||
this.type === "label" && entries
|
||||
? entries.referenced_devices.filter(
|
||||
(device_id) =>
|
||||
!devicesInAreas.includes(device_id) &&
|
||||
this.hass.devices[device_id].labels.includes(this.itemId)
|
||||
)
|
||||
: [];
|
||||
|
||||
const deviceRowsEntries =
|
||||
deviceRows.length === 0
|
||||
? undefined
|
||||
: deviceRows.map((device_id) => ({
|
||||
referenced_areas: [] as string[],
|
||||
referenced_devices: [] as string[],
|
||||
referenced_entities:
|
||||
entries?.referenced_entities.filter(
|
||||
(entity_id) =>
|
||||
this.hass.entities?.[entity_id]?.device_id === device_id
|
||||
) || ([] as string[]),
|
||||
}));
|
||||
|
||||
return html`
|
||||
<div class="entries-tree">
|
||||
<div class="line-wrapper">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<ha-md-list class="entries">
|
||||
${rows1.map(
|
||||
(itemId, index) => html`
|
||||
<ha-target-picker-item-row
|
||||
sub-entry
|
||||
.hass=${this.hass}
|
||||
.type=${nextType}
|
||||
.itemId=${itemId}
|
||||
.parentEntries=${rows1Entries?.[index]}
|
||||
.hideContext=${this.hideContext || this.type !== "label"}
|
||||
expand
|
||||
.lastItem=${deviceRows.length === 0 &&
|
||||
entityRows.length === 0 &&
|
||||
index === rows1.length - 1}
|
||||
></ha-target-picker-item-row>
|
||||
`
|
||||
)}
|
||||
${deviceRows.map(
|
||||
(itemId, index) => html`
|
||||
<ha-target-picker-item-row
|
||||
sub-entry
|
||||
.hass=${this.hass}
|
||||
type="device"
|
||||
.itemId=${itemId}
|
||||
.parentEntries=${deviceRowsEntries?.[index]}
|
||||
.hideContext=${this.hideContext || this.type !== "label"}
|
||||
expand
|
||||
.lastItem=${entityRows.length === 0 &&
|
||||
index === deviceRows.length - 1}
|
||||
></ha-target-picker-item-row>
|
||||
`
|
||||
)}
|
||||
${entityRows.map(
|
||||
(itemId, index) => html`
|
||||
<ha-target-picker-item-row
|
||||
sub-entry
|
||||
.hass=${this.hass}
|
||||
type="entity"
|
||||
.itemId=${itemId}
|
||||
.hideContext=${this.hideContext || this.type !== "label"}
|
||||
.lastItem=${index === entityRows.length - 1}
|
||||
></ha-target-picker-item-row>
|
||||
`
|
||||
)}
|
||||
</ha-md-list>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private async _updateItemData() {
|
||||
if (this.type === "entity") {
|
||||
this._entries = undefined;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const entries = await extractFromTarget(this.hass, {
|
||||
[`${this.type}_id`]: [this.itemId],
|
||||
});
|
||||
|
||||
const hiddenAreaIds: string[] = [];
|
||||
if (this.type === "floor" || this.type === "label") {
|
||||
entries.referenced_areas = entries.referenced_areas.filter(
|
||||
(area_id) => {
|
||||
const area = this.hass.areas[area_id];
|
||||
if (
|
||||
(this.type === "floor" || area.labels.includes(this.itemId)) &&
|
||||
areaMeetsFilter(
|
||||
area,
|
||||
this.hass.devices,
|
||||
this.hass.entities,
|
||||
this.deviceFilter,
|
||||
this.includeDomains,
|
||||
this.includeDeviceClasses,
|
||||
this.hass.states,
|
||||
this.entityFilter
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
hiddenAreaIds.push(area_id);
|
||||
return false;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const hiddenDeviceIds: string[] = [];
|
||||
if (
|
||||
this.type === "floor" ||
|
||||
this.type === "area" ||
|
||||
this.type === "label"
|
||||
) {
|
||||
entries.referenced_devices = entries.referenced_devices.filter(
|
||||
(device_id) => {
|
||||
const device = this.hass.devices[device_id];
|
||||
if (
|
||||
!hiddenAreaIds.includes(device.area_id || "") &&
|
||||
(this.type !== "label" || device.labels.includes(this.itemId)) &&
|
||||
deviceMeetsFilter(
|
||||
device,
|
||||
this.hass.entities,
|
||||
this.deviceFilter,
|
||||
this.includeDomains,
|
||||
this.includeDeviceClasses,
|
||||
this.hass.states,
|
||||
this.entityFilter
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
hiddenDeviceIds.push(device_id);
|
||||
return false;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
entries.referenced_entities = entries.referenced_entities.filter(
|
||||
(entity_id) => {
|
||||
const entity = this.hass.entities[entity_id];
|
||||
if (hiddenDeviceIds.includes(entity.device_id || "")) {
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
(this.type === "area" && entity.area_id === this.itemId) ||
|
||||
(this.type === "label" && entity.labels.includes(this.itemId)) ||
|
||||
entries.referenced_devices.includes(entity.device_id || "")
|
||||
) {
|
||||
return entityRegMeetsFilter(
|
||||
entity,
|
||||
this.type === "label",
|
||||
this.includeDomains,
|
||||
this.includeDeviceClasses,
|
||||
this.hass.states,
|
||||
this.entityFilter
|
||||
);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
);
|
||||
|
||||
this._entries = entries;
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error("Failed to extract target", e);
|
||||
}
|
||||
}
|
||||
|
||||
private _itemData = memoizeOne((type: TargetType, item: string) => {
|
||||
if (type === "floor") {
|
||||
const floor = this.hass.floors?.[item];
|
||||
return {
|
||||
name: floor?.name || item,
|
||||
iconPath: floor?.icon,
|
||||
fallbackIconPath: floor ? floorDefaultIconPath(floor) : mdiHome,
|
||||
};
|
||||
}
|
||||
if (type === "area") {
|
||||
const area = this.hass.areas?.[item];
|
||||
return {
|
||||
name: area?.name || item,
|
||||
context: area.floor_id && this.hass.floors?.[area.floor_id]?.name,
|
||||
iconPath: area?.icon,
|
||||
fallbackIconPath: mdiTextureBox,
|
||||
};
|
||||
}
|
||||
if (type === "device") {
|
||||
const device = this.hass.devices?.[item];
|
||||
|
||||
if (device.primary_config_entry) {
|
||||
this._getDeviceDomain(device.primary_config_entry);
|
||||
}
|
||||
|
||||
return {
|
||||
name: device ? computeDeviceNameDisplay(device, this.hass) : item,
|
||||
context: device?.area_id && this.hass.areas?.[device.area_id]?.name,
|
||||
fallbackIconPath: mdiDevices,
|
||||
};
|
||||
}
|
||||
if (type === "entity") {
|
||||
this._setDomainName(computeDomain(item));
|
||||
|
||||
const stateObject = this.hass.states[item];
|
||||
const entityName = computeEntityName(
|
||||
stateObject,
|
||||
this.hass.entities,
|
||||
this.hass.devices
|
||||
);
|
||||
const { area, device } = getEntityContext(
|
||||
stateObject,
|
||||
this.hass.entities,
|
||||
this.hass.devices,
|
||||
this.hass.areas,
|
||||
this.hass.floors
|
||||
);
|
||||
const deviceName = device ? computeDeviceName(device) : undefined;
|
||||
const areaName = area ? computeAreaName(area) : undefined;
|
||||
const context = [areaName, entityName ? deviceName : undefined]
|
||||
.filter(Boolean)
|
||||
.join(computeRTL(this.hass) ? " ◂ " : " ▸ ");
|
||||
return {
|
||||
name: entityName || deviceName || item,
|
||||
context,
|
||||
stateObject,
|
||||
};
|
||||
}
|
||||
|
||||
// type label
|
||||
const label = this._labelRegistry.find((lab) => lab.label_id === item);
|
||||
return {
|
||||
name: label?.name || item,
|
||||
iconPath: label?.icon,
|
||||
fallbackIconPath: mdiLabel,
|
||||
};
|
||||
});
|
||||
|
||||
private _setDomainName(domain: string) {
|
||||
this._domainName = domainToName(this.hass.localize, domain);
|
||||
}
|
||||
|
||||
private _removeItem(ev) {
|
||||
ev.stopPropagation();
|
||||
fireEvent(this, "remove-target-item", {
|
||||
type: this.type,
|
||||
id: this.itemId,
|
||||
});
|
||||
}
|
||||
|
||||
private async _getDeviceDomain(configEntryId: string) {
|
||||
try {
|
||||
const data = await getConfigEntry(this.hass, configEntryId);
|
||||
const domain = data.config_entry.domain;
|
||||
this._iconImg = brandsUrl({
|
||||
domain: domain,
|
||||
type: "icon",
|
||||
darkOptimized: this.hass.themes?.darkMode,
|
||||
});
|
||||
|
||||
this._setDomainName(domain);
|
||||
} catch {
|
||||
// failed to load config entry -> ignore
|
||||
}
|
||||
}
|
||||
|
||||
private _openDetails() {
|
||||
showTargetDetailsDialog(this, {
|
||||
title: this._itemData(this.type, this.itemId).name,
|
||||
type: this.type,
|
||||
itemId: this.itemId,
|
||||
deviceFilter: this.deviceFilter,
|
||||
entityFilter: this.entityFilter,
|
||||
includeDomains: this.includeDomains,
|
||||
includeDeviceClasses: this.includeDeviceClasses,
|
||||
});
|
||||
}
|
||||
|
||||
static styles = [
|
||||
buttonLinkStyle,
|
||||
css`
|
||||
:host {
|
||||
--md-list-item-top-space: 0;
|
||||
--md-list-item-bottom-space: 0;
|
||||
--md-list-item-leading-space: 8px;
|
||||
--md-list-item-trailing-space: 8px;
|
||||
--md-list-item-two-line-container-height: 56px;
|
||||
}
|
||||
|
||||
:host([expand]:not([sub-entry])) ha-md-list-item {
|
||||
border: 2px solid var(--ha-color-border-neutral-loud);
|
||||
background-color: var(--ha-color-fill-neutral-quiet-resting);
|
||||
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
|
||||
}
|
||||
|
||||
state-badge {
|
||||
color: var(--ha-color-on-neutral-quiet);
|
||||
}
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
ha-icon-button {
|
||||
--mdc-icon-button-size: 32px;
|
||||
}
|
||||
.summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
line-height: var(--ha-line-height-condensed);
|
||||
}
|
||||
:host([sub-entry]) .summary {
|
||||
margin-right: 48px;
|
||||
}
|
||||
.summary .main {
|
||||
font-weight: var(--ha-font-weight-medium);
|
||||
}
|
||||
.summary .secondary {
|
||||
font-size: var(--ha-font-size-s);
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
.domain {
|
||||
font-family: var(--ha-font-family-code);
|
||||
}
|
||||
|
||||
.entries-tree {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entries-tree .line-wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.entries-tree .line-wrapper .line {
|
||||
border-left: 2px dashed var(--divider-color);
|
||||
height: calc(100% - 28px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
:host([sub-entry]) .entries-tree .line-wrapper .line {
|
||||
height: calc(100% - 12px);
|
||||
top: -18px;
|
||||
}
|
||||
|
||||
.entries {
|
||||
padding: 0;
|
||||
--md-item-overflow: visible;
|
||||
}
|
||||
|
||||
.horizontal-line-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.horizontal-line-wrapper .horizontal-line {
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
margin-inline-start: -28px;
|
||||
width: 29px;
|
||||
border-top: 2px dashed var(--divider-color);
|
||||
}
|
||||
|
||||
button.link {
|
||||
text-decoration: none;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
button.link:hover,
|
||||
button.link:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-target-picker-item-row": HaTargetPickerItemRow;
|
||||
}
|
||||
}
|
@@ -28,6 +28,6 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
export const forwardHaptic = (hapticType: HapticType) => {
|
||||
fireEvent(window, "haptic", hapticType);
|
||||
export const forwardHaptic = (node: HTMLElement, hapticType: HapticType) => {
|
||||
fireEvent(node, "haptic", hapticType);
|
||||
};
|
||||
|
@@ -39,6 +39,8 @@ import type { HomeAssistant, TranslationDict } from "../types";
|
||||
import { isUnavailableState } from "./entity";
|
||||
import { isTTSMediaSource } from "./tts";
|
||||
|
||||
import { generateEntityFilter } from "../common/entity/entity_filter";
|
||||
|
||||
interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
|
||||
media_content_id?: string;
|
||||
media_content_type?: string;
|
||||
@@ -522,3 +524,33 @@ export const mediaPlayerJoin = (
|
||||
|
||||
export const mediaPlayerUnjoin = (hass: HomeAssistant, entity_id: string) =>
|
||||
hass.callService("media_player", "unjoin", {}, { entity_id });
|
||||
|
||||
/**
|
||||
* Compute active media player states in a specific area.
|
||||
* @param hass Home Assistant object
|
||||
* @param areaId Area ID to filter media players by
|
||||
* @returns Array of playing media player entities
|
||||
*/
|
||||
export const computeActiveAreaMediaStates = (
|
||||
hass: HomeAssistant,
|
||||
areaId: string
|
||||
): MediaPlayerEntity[] => {
|
||||
const area = hass.areas[areaId];
|
||||
if (!area) {
|
||||
return [];
|
||||
}
|
||||
|
||||
// Get all media_player entities in this area
|
||||
const mediaFilter = generateEntityFilter(hass, {
|
||||
area: areaId,
|
||||
domain: "media_player",
|
||||
});
|
||||
|
||||
const mediaEntities = Object.keys(hass.entities).filter(mediaFilter);
|
||||
|
||||
return mediaEntities
|
||||
.map((entityId) => hass.states[entityId] as MediaPlayerEntity | undefined)
|
||||
.filter(
|
||||
(stateObj): stateObj is MediaPlayerEntity => stateObj?.state === "playing"
|
||||
);
|
||||
};
|
||||
|
@@ -66,9 +66,9 @@ export const getPanelIcon = (panel: PanelInfo): string | null => {
|
||||
if (!panel.icon) {
|
||||
switch (panel.component_name) {
|
||||
case "profile":
|
||||
return "hass:account";
|
||||
return "mdi:account";
|
||||
case "lovelace":
|
||||
return "hass:view-dashboard";
|
||||
return "mdi:view-dashboard";
|
||||
}
|
||||
}
|
||||
|
||||
|
161
src/data/target.ts
Normal file
161
src/data/target.ts
Normal file
@@ -0,0 +1,161 @@
|
||||
import type { HassServiceTarget } from "home-assistant-js-websocket";
|
||||
import { computeDomain } from "../common/entity/compute_domain";
|
||||
import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
|
||||
import type { HaEntityPickerEntityFilterFunc } from "../components/entity/ha-entity-picker";
|
||||
import type { HomeAssistant } from "../types";
|
||||
import type { AreaRegistryEntry } from "./area_registry";
|
||||
import type { DeviceRegistryEntry } from "./device_registry";
|
||||
import type { EntityRegistryDisplayEntry } from "./entity_registry";
|
||||
|
||||
export interface ExtractFromTargetResult {
|
||||
missing_areas: string[];
|
||||
missing_devices: string[];
|
||||
missing_floors: string[];
|
||||
missing_labels: string[];
|
||||
referenced_areas: string[];
|
||||
referenced_devices: string[];
|
||||
referenced_entities: string[];
|
||||
}
|
||||
|
||||
export interface ExtractFromTargetResultReferenced {
|
||||
referenced_areas: string[];
|
||||
referenced_devices: string[];
|
||||
referenced_entities: string[];
|
||||
}
|
||||
|
||||
export const extractFromTarget = async (
|
||||
hass: HomeAssistant,
|
||||
target: HassServiceTarget
|
||||
) =>
|
||||
hass.callWS<ExtractFromTargetResult>({
|
||||
type: "extract_from_target",
|
||||
target,
|
||||
});
|
||||
|
||||
export const areaMeetsFilter = (
|
||||
area: AreaRegistryEntry,
|
||||
devices: HomeAssistant["devices"],
|
||||
entities: HomeAssistant["entities"],
|
||||
deviceFilter?: HaDevicePickerDeviceFilterFunc,
|
||||
includeDomains?: string[],
|
||||
includeDeviceClasses?: string[],
|
||||
states?: HomeAssistant["states"],
|
||||
entityFilter?: HaEntityPickerEntityFilterFunc
|
||||
): boolean => {
|
||||
const areaDevices = Object.values(devices).filter(
|
||||
(device) => device.area_id === area.area_id
|
||||
);
|
||||
|
||||
if (
|
||||
areaDevices.some((device) =>
|
||||
deviceMeetsFilter(
|
||||
device,
|
||||
entities,
|
||||
deviceFilter,
|
||||
includeDomains,
|
||||
includeDeviceClasses,
|
||||
states,
|
||||
entityFilter
|
||||
)
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const areaEntities = Object.values(entities).filter(
|
||||
(entity) => entity.area_id === area.area_id
|
||||
);
|
||||
|
||||
if (
|
||||
areaEntities.some((entity) =>
|
||||
entityRegMeetsFilter(
|
||||
entity,
|
||||
false,
|
||||
includeDomains,
|
||||
includeDeviceClasses,
|
||||
states,
|
||||
entityFilter
|
||||
)
|
||||
)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
export const deviceMeetsFilter = (
|
||||
device: DeviceRegistryEntry,
|
||||
entities: HomeAssistant["entities"],
|
||||
deviceFilter?: HaDevicePickerDeviceFilterFunc,
|
||||
includeDomains?: string[],
|
||||
includeDeviceClasses?: string[],
|
||||
states?: HomeAssistant["states"],
|
||||
entityFilter?: HaEntityPickerEntityFilterFunc
|
||||
): boolean => {
|
||||
const devEntities = Object.values(entities).filter(
|
||||
(entity) => entity.device_id === device.id
|
||||
);
|
||||
|
||||
if (
|
||||
!devEntities.some((entity) =>
|
||||
entityRegMeetsFilter(
|
||||
entity,
|
||||
false,
|
||||
includeDomains,
|
||||
includeDeviceClasses,
|
||||
states,
|
||||
entityFilter
|
||||
)
|
||||
)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (deviceFilter) {
|
||||
return deviceFilter(device);
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
export const entityRegMeetsFilter = (
|
||||
entity: EntityRegistryDisplayEntry,
|
||||
includeSecondary = false,
|
||||
includeDomains?: string[],
|
||||
includeDeviceClasses?: string[],
|
||||
states?: HomeAssistant["states"],
|
||||
entityFilter?: HaEntityPickerEntityFilterFunc
|
||||
): boolean => {
|
||||
if (entity.hidden || (entity.entity_category && !includeSecondary)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
includeDomains &&
|
||||
!includeDomains.includes(computeDomain(entity.entity_id))
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
if (includeDeviceClasses) {
|
||||
const stateObj = states?.[entity.entity_id];
|
||||
if (!stateObj) {
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
!stateObj.attributes.device_class ||
|
||||
!includeDeviceClasses!.includes(stateObj.attributes.device_class)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (entityFilter) {
|
||||
const stateObj = states?.[entity.entity_id];
|
||||
if (!stateObj) {
|
||||
return false;
|
||||
}
|
||||
return entityFilter!(stateObj);
|
||||
}
|
||||
return true;
|
||||
};
|
@@ -325,7 +325,7 @@ class StepFlowCreateEntry extends LitElement {
|
||||
.device-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
.device-info img {
|
||||
width: 40px;
|
||||
|
@@ -26,20 +26,21 @@ class StepFlowLoading extends LitElement {
|
||||
this.step
|
||||
);
|
||||
return html`
|
||||
<div class="init-spinner">
|
||||
<div class="content">
|
||||
<ha-spinner size="large"></ha-spinner>
|
||||
${description ? html`<div>${description}</div>` : ""}
|
||||
<ha-spinner></ha-spinner>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
.init-spinner {
|
||||
.content {
|
||||
margin-top: 0;
|
||||
padding: 50px 100px;
|
||||
text-align: center;
|
||||
}
|
||||
ha-spinner {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@@ -34,7 +34,7 @@ class StepFlowProgress extends LitElement {
|
||||
)}%</ha-progress-ring
|
||||
>
|
||||
`
|
||||
: html` <ha-spinner size="large"></ha-spinner> `}
|
||||
: html`<ha-spinner size="large"></ha-spinner>`}
|
||||
${this.flowConfig.renderShowFormProgressDescription(
|
||||
this.hass,
|
||||
this.step
|
||||
@@ -48,6 +48,7 @@ class StepFlowProgress extends LitElement {
|
||||
configFlowContentStyles,
|
||||
css`
|
||||
.content {
|
||||
margin-top: 0;
|
||||
padding: 50px 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
@@ -209,7 +209,7 @@ export class DialogEnterCode
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--keypad-columns), auto);
|
||||
grid-auto-rows: auto;
|
||||
grid-gap: 24px;
|
||||
grid-gap: var(--ha-space-6);
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
@@ -32,7 +32,7 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
gap: 12px;
|
||||
gap: var(--ha-space-3);
|
||||
margin: auto;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
|
@@ -110,7 +110,7 @@ class LightRgbColorPicker extends LitElement {
|
||||
? html`<ha-labeled-slider
|
||||
labeled
|
||||
.caption=${this.hass.localize("ui.card.light.color_brightness")}
|
||||
icon="hass:brightness-7"
|
||||
icon="mdi:brightness-7"
|
||||
min="0"
|
||||
max="100"
|
||||
.value=${this._colorBrightnessSliderValue}
|
||||
@@ -122,7 +122,7 @@ class LightRgbColorPicker extends LitElement {
|
||||
<ha-labeled-slider
|
||||
labeled
|
||||
.caption=${this.hass.localize("ui.card.light.white_value")}
|
||||
icon="hass:file-word-box"
|
||||
icon="mdi:file-word-box"
|
||||
min="0"
|
||||
max="100"
|
||||
.name=${"wv"}
|
||||
@@ -136,7 +136,7 @@ class LightRgbColorPicker extends LitElement {
|
||||
<ha-labeled-slider
|
||||
labeled
|
||||
.caption=${this.hass.localize("ui.card.light.cold_white_value")}
|
||||
icon="hass:file-word-box-outline"
|
||||
icon="mdi:file-word-box-outline"
|
||||
min="0"
|
||||
max="100"
|
||||
.name=${"cw"}
|
||||
@@ -146,7 +146,7 @@ class LightRgbColorPicker extends LitElement {
|
||||
<ha-labeled-slider
|
||||
labeled
|
||||
.caption=${this.hass.localize("ui.card.light.warm_white_value")}
|
||||
icon="hass:file-word-box"
|
||||
icon="mdi:file-word-box"
|
||||
min="0"
|
||||
max="100"
|
||||
.name=${"ww"}
|
||||
|
@@ -202,13 +202,13 @@ class MoreInfoSirenAdvancedControls extends LitElement {
|
||||
.options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
}
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
margin-top: 16px;
|
||||
}
|
||||
ha-control-button {
|
||||
|
@@ -107,7 +107,7 @@ class MoreInfoCamera extends LitElement {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
z-index: 1;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@@ -42,7 +42,7 @@ class MoreInfoFan extends LitElement {
|
||||
|
||||
private _toggle = () => {
|
||||
const service = this.stateObj?.state === "on" ? "turn_off" : "turn_on";
|
||||
forwardHaptic("light");
|
||||
forwardHaptic(this, "light");
|
||||
this.hass.callService("fan", service, {
|
||||
entity_id: this.stateObj!.entity_id,
|
||||
});
|
||||
|
@@ -310,7 +310,7 @@ class MoreInfoLight extends LitElement {
|
||||
|
||||
private _toggle = () => {
|
||||
const service = this.stateObj?.state === "on" ? "turn_off" : "turn_on";
|
||||
forwardHaptic("light");
|
||||
forwardHaptic(this, "light");
|
||||
this.hass.callService("light", service, {
|
||||
entity_id: this.stateObj!.entity_id,
|
||||
});
|
||||
|
@@ -181,7 +181,7 @@ class MoreInfoLock extends LitElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
font-weight: var(--ha-font-weight-medium);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
@@ -48,10 +48,10 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
|
||||
@property({ attribute: false }) public stateObj?: MediaPlayerEntity;
|
||||
|
||||
private _formateDuration(duration: number) {
|
||||
private _formatDuration(duration: number) {
|
||||
const hours = Math.floor(duration / 3600);
|
||||
const minutes = Math.floor((duration % 3600) / 60);
|
||||
const seconds = duration % 60;
|
||||
const seconds = Math.floor(duration % 60);
|
||||
return formatDurationDigital(this.hass.locale, {
|
||||
hours,
|
||||
minutes,
|
||||
@@ -260,12 +260,12 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
const controls = computeMediaControls(stateObj, true);
|
||||
const coverUrl = stateObj.attributes.entity_picture || "";
|
||||
const playerObj = new HassMediaPlayerEntity(this.hass, this.stateObj);
|
||||
const position = Math.floor(playerObj.currentProgress) || 0;
|
||||
const duration = stateObj.attributes.media_duration || 0;
|
||||
const remaining = duration - position;
|
||||
const durationFormated =
|
||||
remaining > 0 ? this._formateDuration(remaining) : 0;
|
||||
const postionFormated = this._formateDuration(position);
|
||||
|
||||
const position = Math.max(Math.floor(playerObj.currentProgress || 0), 0);
|
||||
const duration = Math.max(stateObj.attributes.media_duration || 0, 0);
|
||||
const remaining = Math.max(duration - position, 0);
|
||||
const remainingFormatted = this._formatDuration(remaining);
|
||||
const positionFormatted = this._formatDuration(position);
|
||||
const primaryTitle = playerObj.primaryTitle;
|
||||
const secondaryTitle = playerObj.secondaryTitle;
|
||||
const turnOn = controls?.find((c) => c.action === "turn_on");
|
||||
@@ -323,11 +323,10 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
@change=${this._handleMediaSeekChanged}
|
||||
?disabled=${!stateActive(stateObj) ||
|
||||
!supportsFeature(stateObj, MediaPlayerEntityFeature.SEEK)}
|
||||
></ha-slider>
|
||||
<div class="position-info-row">
|
||||
<span class="position-time">${postionFormated}</span>
|
||||
<span class="duration-time">${durationFormated}</span>
|
||||
</div>
|
||||
>
|
||||
<span slot="reference">${positionFormatted}</span>
|
||||
<span slot="reference">${remainingFormatted}</span>
|
||||
</ha-slider>
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
@@ -443,7 +442,7 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@@ -477,6 +476,22 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
@media (max-height: 750px) {
|
||||
.cover-container {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.cover-image {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.cover-image--playing {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-cover {
|
||||
background-color: var(--secondary-background-color);
|
||||
font-size: 1.5em;
|
||||
@@ -511,7 +526,7 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
.volume {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: var(--ha-space-3);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@@ -548,13 +563,8 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.position-info-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.position-bar ha-slider::part(references) {
|
||||
color: var(--secondary-text-color);
|
||||
padding: 0 8px;
|
||||
font-size: var(--ha-font-size-s);
|
||||
}
|
||||
|
||||
.media-info-row {
|
||||
@@ -597,7 +607,7 @@ class MoreInfoMediaPlayer extends LitElement {
|
||||
.bottom-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
align-self: center;
|
||||
width: 320px;
|
||||
}
|
||||
|
@@ -508,7 +508,7 @@ class MoreInfoUpdate extends LitElement {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
z-index: 1;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
|
||||
a {
|
||||
|
@@ -269,7 +269,7 @@ class DialogShortcuts extends LitElement {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
|
@@ -8,6 +8,7 @@ import { createCloseHeading } from "../../components/ha-dialog";
|
||||
import "../../components/ha-textarea";
|
||||
import type { HaTextArea } from "../../components/ha-textarea";
|
||||
import { convertTextToSpeech } from "../../data/tts";
|
||||
import { haStyleDialog } from "../../resources/styles";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import { showAlertDialog } from "../generic/show-dialog-box";
|
||||
import type { TTSTryDialogParams } from "./show-dialog-tts-try";
|
||||
@@ -149,21 +150,24 @@ export class TTSTryDialog extends LitElement {
|
||||
});
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
ha-dialog {
|
||||
--mdc-dialog-max-width: 500px;
|
||||
}
|
||||
ha-textarea,
|
||||
ha-select {
|
||||
width: 100%;
|
||||
}
|
||||
ha-select {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.loading {
|
||||
height: 36px;
|
||||
}
|
||||
`;
|
||||
static styles = [
|
||||
haStyleDialog,
|
||||
css`
|
||||
ha-dialog {
|
||||
--mdc-dialog-max-width: 500px;
|
||||
}
|
||||
ha-textarea,
|
||||
ha-select {
|
||||
width: 100%;
|
||||
}
|
||||
ha-select {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.loading {
|
||||
height: 36px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
@@ -127,7 +127,7 @@ export class CloudStepIntro extends LitElement {
|
||||
.features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-gap: 16px;
|
||||
grid-gap: var(--ha-space-4);
|
||||
padding: 16px;
|
||||
}
|
||||
.feature {
|
||||
|
@@ -427,7 +427,7 @@ export class HaVoiceAssistantSetupStepPipeline extends LitElement {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
gap: var(--ha-space-1);
|
||||
margin: 8px 0;
|
||||
}
|
||||
.segment {
|
||||
|
@@ -368,7 +368,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.rows {
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
@@ -60,28 +60,28 @@ export const demoPanels: Panels = {
|
||||
// Uncomment when we are ready to stub the history API
|
||||
// history: {
|
||||
// component_name: "history",
|
||||
// icon: "hass:poll-box",
|
||||
// icon: "mdi:chart-box",
|
||||
// title: "history",
|
||||
// config: null,
|
||||
// url_path: "history",
|
||||
// },
|
||||
map: {
|
||||
component_name: "lovelace",
|
||||
icon: "hass:tooltip-account",
|
||||
icon: "mdi:tooltip-account",
|
||||
title: "map",
|
||||
config: { mode: "storage" },
|
||||
url_path: "map",
|
||||
},
|
||||
energy: {
|
||||
component_name: "energy",
|
||||
icon: "hass:lightning-bolt",
|
||||
icon: "mdi:lightning-bolt",
|
||||
title: "energy",
|
||||
config: null,
|
||||
url_path: "energy",
|
||||
},
|
||||
// config: {
|
||||
// component_name: "config",
|
||||
// icon: "hass:cog",
|
||||
// icon: "mdi:cog",
|
||||
// title: "config",
|
||||
// config: null,
|
||||
// url_path: "config",
|
||||
|
@@ -182,7 +182,7 @@ class HassSubpage extends LitElement {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
:host([narrow]) #fab.tabs {
|
||||
bottom: calc(84px + var(--safe-area-inset-bottom, 0px));
|
||||
|
@@ -740,7 +740,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
box-sizing: border-box;
|
||||
background: var(--primary-background-color);
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
@@ -823,7 +823,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 100%;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
overflow-x: scroll;
|
||||
@@ -852,7 +852,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
|
||||
.selection-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
|
||||
.selection-controls p {
|
||||
@@ -864,7 +864,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
|
||||
.center-vertical {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
|
||||
.relative {
|
||||
|
@@ -362,7 +362,7 @@ class HassTabsSubpage extends LitElement {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
:host([narrow]) #fab.tabs {
|
||||
bottom: calc(84px + var(--safe-area-inset-bottom, 0px));
|
||||
|
@@ -212,7 +212,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) {
|
||||
margin-top: 24px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
|
||||
row-gap: 24px;
|
||||
row-gap: var(--ha-space-6);
|
||||
}
|
||||
.more {
|
||||
display: flex;
|
||||
|
@@ -64,8 +64,8 @@ class OnboardingWelcomeLinks extends LitElement {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
margin-top: 16px;
|
||||
column-gap: 16px;
|
||||
row-gap: 16px;
|
||||
column-gap: var(--ha-space-4);
|
||||
row-gap: var(--ha-space-4);
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
:host {
|
||||
|
@@ -123,7 +123,7 @@ class OnboardingRestoreBackupCloudLogin extends LitElement {
|
||||
font-size: var(--ha-font-size-2xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
}
|
||||
h2 img {
|
||||
width: 48px;
|
||||
|
@@ -332,7 +332,7 @@ class OnboardingRestoreBackupRestore extends LitElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
line-height: var(--ha-line-height-condensed);
|
||||
}
|
||||
h2 {
|
||||
|
@@ -736,7 +736,7 @@ class DialogAddAutomationElement
|
||||
}
|
||||
.shortcut-label {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
gap: var(--ha-space-3);
|
||||
justify-content: space-between;
|
||||
}
|
||||
.shortcut-label .supporting-text {
|
||||
|
@@ -1,5 +1,6 @@
|
||||
import { consume } from "@lit/context";
|
||||
import {
|
||||
mdiAppleKeyboardCommand,
|
||||
mdiCog,
|
||||
mdiContentSave,
|
||||
mdiDebugStepOver,
|
||||
@@ -87,6 +88,7 @@ import "./blueprint-automation-editor";
|
||||
import "./manual-automation-editor";
|
||||
import type { HaManualAutomationEditor } from "./manual-automation-editor";
|
||||
import { UndoRedoMixin } from "../../../mixins/undo-redo-mixin";
|
||||
import { isMac } from "../../../util/is_mac";
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@@ -215,6 +217,10 @@ export class HaAutomationEditor extends UndoRedoMixin<
|
||||
: undefined;
|
||||
|
||||
const useBlueprint = "use_blueprint" in this._config;
|
||||
const shortcutIcon = isMac
|
||||
? html`<ha-svg-icon .path=${mdiAppleKeyboardCommand}></ha-svg-icon>`
|
||||
: this.hass.localize("ui.panel.config.automation.editor.ctrl");
|
||||
|
||||
return html`
|
||||
<hass-subpage
|
||||
.hass=${this.hass}
|
||||
@@ -231,16 +237,35 @@ export class HaAutomationEditor extends UndoRedoMixin<
|
||||
.path=${mdiUndo}
|
||||
@click=${this.undo}
|
||||
.disabled=${!this.canUndo}
|
||||
id="button-undo"
|
||||
>
|
||||
</ha-icon-button>
|
||||
<ha-tooltip placement="bottom" for="button-undo">
|
||||
${this.hass.localize("ui.common.undo")}
|
||||
<span class="shortcut"
|
||||
>(
|
||||
<span>${shortcutIcon}</span>
|
||||
<span>+</span>
|
||||
<span>Z</span>)
|
||||
</span>
|
||||
</ha-tooltip>
|
||||
<ha-icon-button
|
||||
slot="toolbar-icon"
|
||||
.label=${this.hass.localize("ui.common.redo")}
|
||||
.path=${mdiRedo}
|
||||
@click=${this.redo}
|
||||
.disabled=${!this.canRedo}
|
||||
id="button-redo"
|
||||
>
|
||||
</ha-icon-button>`
|
||||
</ha-icon-button>
|
||||
<ha-tooltip placement="bottom" for="button-redo">
|
||||
${this.hass.localize("ui.common.redo")}
|
||||
<span class="shortcut">
|
||||
(<span>${shortcutIcon}</span>
|
||||
<span>+</span>
|
||||
<span>Y</span>)
|
||||
</span>
|
||||
</ha-tooltip>`
|
||||
: nothing}
|
||||
${this._config?.id && !this.narrow
|
||||
? html`
|
||||
@@ -1292,6 +1317,15 @@ export class HaAutomationEditor extends UndoRedoMixin<
|
||||
ha-fab.dirty {
|
||||
bottom: calc(16px + var(--safe-area-inset-bottom, 0px));
|
||||
}
|
||||
ha-tooltip ha-svg-icon {
|
||||
width: 12px;
|
||||
}
|
||||
ha-tooltip .shortcut {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -92,7 +92,7 @@ class DialogPasteReplace extends LitElement implements HassDialog {
|
||||
}
|
||||
div[slot="primaryAction"] {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
@@ -118,7 +118,7 @@ export const manualEditorStyles = css`
|
||||
var(--ha-automation-editor-max-width) -
|
||||
${CONTENT_MIN_WIDTH}px - var(--mdc-drawer-width, 0px)
|
||||
);
|
||||
--sidebar-gap: 16px;
|
||||
--sidebar-gap: var(--ha-space-4);
|
||||
}
|
||||
|
||||
.fab-positioner {
|
||||
@@ -188,7 +188,7 @@ export const automationRowsStyles = css`
|
||||
.rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
}
|
||||
.rows.no-sidebar {
|
||||
margin-inline-end: 0;
|
||||
@@ -225,7 +225,7 @@ export const automationRowsStyles = css`
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
order: 1;
|
||||
}
|
||||
`;
|
||||
@@ -244,7 +244,7 @@ export const overflowStyles = css`
|
||||
.overflow-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: var(--ha-space-3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.overflow-label .shortcut {
|
||||
|
@@ -806,7 +806,7 @@ export default class HaAutomationTriggerRow extends LitElement {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: var(--ha-space-1);
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
@@ -313,13 +313,13 @@ class HaBackupConfigAgents extends LitElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
line-height: var(--ha-line-height-condensed);
|
||||
}
|
||||
.unencrypted-warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
gap: var(--ha-space-1);
|
||||
}
|
||||
.dot {
|
||||
display: block;
|
||||
@@ -341,7 +341,7 @@ class HaBackupConfigAgents extends LitElement {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
gap: var(--ha-space-1);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@@ -119,7 +119,7 @@ class HaBackupAgentsPicker extends LitElement {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
font-size: var(--ha-font-size-l);
|
||||
font-weight: var(--ha-font-weight-normal);
|
||||
line-height: var(--ha-line-height-normal);
|
||||
|
@@ -110,7 +110,7 @@ class HaBackupDetailsRestore extends LitElement {
|
||||
max-width: 690px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
display: grid;
|
||||
}
|
||||
.card-content {
|
||||
@@ -133,7 +133,7 @@ class HaBackupDetailsRestore extends LitElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
line-height: var(--ha-line-height-condensed);
|
||||
}
|
||||
`;
|
||||
|
@@ -138,7 +138,7 @@ class HaBackupDetailsSummary extends LitElement {
|
||||
max-width: 690px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
display: grid;
|
||||
}
|
||||
.card-content {
|
||||
@@ -168,7 +168,7 @@ class HaBackupDetailsSummary extends LitElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
gap: var(--ha-space-2);
|
||||
line-height: var(--ha-line-height-condensed);
|
||||
}
|
||||
`;
|
||||
|
@@ -35,7 +35,7 @@ class SupervisorFormfieldLabel extends LitElement {
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
align-items: center;
|
||||
}
|
||||
.label {
|
||||
|
@@ -74,8 +74,8 @@ class HaBackupSummaryCard extends LitElement {
|
||||
.summary {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 16px;
|
||||
row-gap: 8px;
|
||||
column-gap: var(--ha-space-4);
|
||||
row-gap: var(--ha-space-2);
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
padding-bottom: 8px;
|
||||
|
@@ -117,7 +117,7 @@ class HaBackupOverviewBackups extends LitElement {
|
||||
padding: 28px 20px 0;
|
||||
max-width: 690px;
|
||||
margin: 0 auto;
|
||||
gap: 24px;
|
||||
gap: var(--ha-space-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: calc(72px + var(--safe-area-inset-bottom));
|
||||
|
@@ -61,7 +61,7 @@ class HaBackupOverviewBackups extends LitElement {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
gap: var(--ha-space-4);
|
||||
}
|
||||
.icon {
|
||||
position: relative;
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user