Compare commits

..

74 Commits

Author SHA1 Message Date
Wendelin
06355f6093 Fix target details for labels 2025-09-30 16:09:58 +02:00
Wendelin
36bcaade22 Fix target details button and expansion panel keyboard focus 2025-09-30 14:06:57 +02:00
Wendelin
cdf5d2c899 Merge branch 'dev' of github.com:home-assistant/frontend into target-selected-value 2025-09-30 13:48:06 +02:00
renovate[bot]
d746dc5752 Pin Node.js to 22.20.0 (#27258)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-30 11:53:51 +02:00
Wendelin
5f53e1e71c Update WA to fix tab group scrolling (#27255) 2025-09-30 11:36:17 +02:00
Wendelin
3da82df093 Update node nvm to latest LTS (#27256) 2025-09-30 11:35:48 +02:00
Wendelin
6cdf9ba1ab Merge branch 'dev' of github.com:home-assistant/frontend into target-selected-value 2025-09-30 11:22:37 +02:00
Jan-Philipp Benecke
4cedfffb71 Let text scroll in markdown card (#27250)
* Let text overflow in markdown card

* Update src/panels/lovelace/cards/hui-markdown-card.ts

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>

---------

Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
2025-09-30 09:37:15 +02:00
dcapslock
1e1514e7da forwardHaptic on node rather than window. (#27251)
forwardHaptic on node rather than window. Allows for capturing for custom cards.
2025-09-30 07:49:32 +03:00
Jan-Philipp Benecke
60e07075bc Refactor ha-config-labels to use styleMap (#27248) 2025-09-29 21:05:17 +02:00
Jan-Philipp Benecke
c998086474 Fix --ha-space-13 spacing token (#27246) 2025-09-29 20:16:29 +02:00
renovate[bot]
53be0a3fa2 Update dependency @rsdoctor/rspack-plugin to v1.3.0 (#27241)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-29 17:31:13 +02:00
renovate[bot]
d69c46c80c Update dependency @codemirror/autocomplete to v6.19.0 (#27242)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-29 17:30:42 +02:00
Paul Bottein
0c2a7bfed0 Replace legacy hass icons to mdi icons (#27244) 2025-09-29 17:30:20 +02:00
dependabot[bot]
afdd232e38 Bump home-assistant/wheels from 2025.07.0 to 2025.09.1 (#27239)
Bumps [home-assistant/wheels](https://github.com/home-assistant/wheels) from 2025.07.0 to 2025.09.1.
- [Release notes](https://github.com/home-assistant/wheels/releases)
- [Commits](https://github.com/home-assistant/wheels/compare/2025.07.0...2025.09.1)

---
updated-dependencies:
- dependency-name: home-assistant/wheels
  dependency-version: 2025.09.1
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2025-09-29 12:37:13 +02:00
dependabot[bot]
179751a135 Bump github/codeql-action from 3.30.3 to 3.30.5 (#27235)
Bumps [github/codeql-action](https://github.com/github/codeql-action) from 3.30.3 to 3.30.5.
- [Release notes](https://github.com/github/codeql-action/releases)
- [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md)
- [Commits](192325c861...3599b3baa1)

---
updated-dependencies:
- dependency-name: github/codeql-action
  dependency-version: 3.30.5
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2025-09-29 11:03:37 +03:00
dependabot[bot]
52f6024306 Bump actions/cache from 4.2.4 to 4.3.0 (#27236)
Bumps [actions/cache](https://github.com/actions/cache) from 4.2.4 to 4.3.0.
- [Release notes](https://github.com/actions/cache/releases)
- [Changelog](https://github.com/actions/cache/blob/main/RELEASES.md)
- [Commits](0400d5f644...0057852bfa)

---
updated-dependencies:
- dependency-name: actions/cache
  dependency-version: 4.3.0
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2025-09-29 11:03:06 +03:00
Phil White
7c7a4e61f2 Add media playback badge for Area card (#26893) 2025-09-29 09:58:57 +02:00
Jan-Philipp Benecke
facce7b016 Add custom color token for control color (#27227) 2025-09-29 07:28:24 +00:00
Petar Petrov
e546cb3374 Make "loading next step" look like progress step in config flows (#27234) 2025-09-29 09:19:18 +02:00
Jan-Philipp Benecke
a0d2e7312b Adjust media player cover image sizes in more info for smaller screens (#27232)
Adjust media player cover image sizes for smaller screens
2025-09-29 08:30:12 +03:00
Jan-Philipp Benecke
c0a9dadcbe Implement core spacing tokens (#27226) 2025-09-29 08:28:24 +03:00
renovate[bot]
e1edf7fb98 Update dependency lint-staged to v16.2.1 (#27233)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-29 07:57:45 +03:00
Jan-Philipp Benecke
6d5c165bd2 Add tooltips for undo/redo in automation & script editors (#27224) 2025-09-28 13:35:48 +03:00
Simon Lamon
54177a16e9 Set explicit netlify version to fix workflows (#27229)
netlify set explicit version for fix
2025-09-28 13:34:18 +03:00
Paul Bottein
c814b8e888 Align dashboard data table with other data tables (#27206)
* Align dashboard data table with other data tables

* Update ha-config-lovelace-dashboards.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update ha-config-lovelace-dashboards.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
2025-09-27 18:07:01 +03:00
renovate[bot]
33a0b32cc5 Update vaadinWebComponents monorepo to v24.9.1 (#27220)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-27 13:25:12 +02:00
renovate[bot]
7dae13bf57 Update dependency @rspack/core to v1.5.7 (#27219)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-27 13:24:59 +02:00
renovate[bot]
0a3fe6e0fb Update dependency tar to v7.5.1 (#27216) 2025-09-26 19:21:46 +02:00
Paul Bottein
e0348e4da7 Fix slider ticks support for number selector (#27211) 2025-09-26 15:35:01 +02:00
Aidan Timson
d53f3ec898 Add missing translations for thread config panel (#27210) 2025-09-26 14:09:11 +01:00
renovate[bot]
e422547d93 Update Yarn to v4.10.3 (#27209)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-26 15:33:12 +03:00
Paul Bottein
d91a3fbe85 Don't display negative durations in media player more info (#27212)
Don't display negative value in media player more info
2025-09-26 15:28:59 +03:00
Paul Bottein
01d7130f22 Fix try tts dialog max width (#27208) 2025-09-26 13:36:05 +02:00
Aidan Timson
c57851e4df Migrate hex color helper functions to culori (#27184) 2025-09-26 11:31:18 +02:00
Aidan Timson
6f1f13acb0 Migrate rgb color helper functions to culori (#27185) 2025-09-26 11:00:08 +02:00
Jan-Philipp Benecke
a8abd00809 Refactor media player slider to use slot for position and duration display (#27205)
* Refactor media player slider to use slot for position and duration display

* Fix variable naming
2025-09-26 06:33:56 +00:00
karwosts
e053978dbe Add dropdown mode to water heater operation feature (#27201) 2025-09-26 08:51:03 +03:00
karwosts
6e57f726a3 Add validation issues to energy diagnostic (#27203) 2025-09-26 08:48:21 +03:00
renovate[bot]
b7cabadbe1 Update dependency typescript-eslint to v8.44.1 (#27197) 2025-09-25 22:09:08 +02:00
Simon Lamon
d920217374 Fix typos in media player more info (#27198) 2025-09-25 19:02:26 +00:00
Jan-Philipp Benecke
1630263276 Round seconds in media player more info before formatting (#27196) 2025-09-25 20:47:40 +02:00
Paul Bottein
5680c742be Revert "Update dependency @types/chromecast-caf-receiver to v6.0.24" (#27188) 2025-09-25 17:48:23 +02:00
Paul Bottein
2aeb9cf0ef Revert "Update dependency @types/chromecast-caf-receiver to v6.0.24 (#26500)"
This reverts commit 4a3ed62583.
2025-09-25 17:47:59 +02:00
Paul Bottein
c9931b3a3c Disabled config badge (#27172)
* Add disabled option for badge

* Add disabled to struct
2025-09-25 17:45:06 +02:00
Paul Bottein
fbf7ebdfe4 Add icon option to common controls section strategy (#27180) 2025-09-25 17:23:54 +02:00
renovate[bot]
52ccb03de5 Update dependency hls.js to v1.6.13 (#27187)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-25 17:21:23 +02:00
Paul Bottein
900236ac07 Fix storage bar not displayed (#27183) 2025-09-25 15:56:26 +01:00
renovate[bot]
28940c930d Update dependency @codemirror/view to v6.38.3 (#27163)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-25 15:55:35 +01:00
Paul Bottein
e278b463fd Fix analytics switches (#27181) 2025-09-25 15:54:11 +01:00
renovate[bot]
db2acd4e39 Update dependency @rspack/core to v1.5.6 (#27177)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-25 13:10:01 +02:00
Wendelin
6dcc52cd44 Reduce default tab padding in tab-group (#27173) 2025-09-25 11:52:04 +01:00
Paul Bottein
981db50826 Smooth animation of the sidebar resizing handle (#27166) 2025-09-25 10:43:04 +02:00
Paul Bottein
09683863a7 Fix safe padding for bottom sheet and add scroll lock (#27165) 2025-09-25 10:41:05 +02:00
Norbert Rittel
8c78f931dc Use "Add (person)" instead of "New person" / "Create" (#27161)
* Update dialog-person-detail.ts

* Update en.json
2025-09-25 10:19:25 +02:00
renovate[bot]
40ce3c1e31 Update dependency lint-staged to v16.2.0 (#27164)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-25 10:13:06 +02:00
Wendelin
32e4c23c1a Merge branch 'dev' of github.com:home-assistant/frontend into target-selected-value 2025-09-25 09:17:09 +02:00
Paulus Schoutsen
e430a1b1be Avoid invalid entities in common controls (#27158) 2025-09-25 08:15:54 +03:00
renovate[bot]
a2c6116417 Update dependency tar to v7.4.4 (#27159)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2025-09-25 08:15:06 +03:00
Paul Bottein
3239273f3e Do not show error message when action has no response in dev tools (#27156) 2025-09-24 19:19:31 +02:00
Wendelin
cf97566669 Fix dialog title 2025-09-18 16:59:37 +02:00
Wendelin
c68d73b1ef Add overview dialog 2025-09-18 11:08:52 +02:00
Wendelin
89ef753309 Fix filtering 2025-09-17 15:18:49 +02:00
Wendelin
b149ddc3d4 Enhance target picker with filtering options for devices and entities 2025-09-16 17:31:46 +02:00
Wendelin
a2e99de828 Do not show entities count for sub entries 2025-09-16 15:51:18 +02:00
Wendelin
e3655feda0 Keep chips in history and logbook 2025-09-16 13:14:11 +02:00
Wendelin
a5be92c277 Merge branch 'dev' of github.com:home-assistant/frontend into target-selected-value 2025-09-16 11:08:44 +02:00
Wendelin
043849b057 Group floor and area, add label icon, remove remove group 2025-09-12 14:33:41 +02:00
Wendelin
9a69566000 Fix sublist 2025-09-12 12:02:01 +02:00
Wendelin
9cdb57476a Merge branch 'dev' of github.com:home-assistant/frontend into target-selected-value 2025-09-11 15:59:07 +02:00
Wendelin
f8d90d003e fix entity domain name 2025-09-11 14:36:44 +02:00
Wendelin
f53ee52b0e Fix typo 2025-09-11 12:27:05 +02:00
Wendelin
f8cc1531e5 Use extractFromTarget 2025-09-11 12:25:02 +02:00
Wendelin
11f65ef0f7 Add new target selected value view 2025-09-09 15:38:48 +02:00
175 changed files with 3283 additions and 1554 deletions

View File

@@ -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 }}

View File

@@ -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

View File

@@ -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

View File

@@ -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 }}

View File

@@ -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 }}

View File

@@ -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 }}

View File

@@ -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

2
.nvmrc
View File

@@ -1 +1 @@
lts/iron
22.20.0

File diff suppressed because one or more lines are too long

View File

@@ -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

View File

@@ -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": {

View File

@@ -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",
},
],
},

View File

@@ -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": {

View File

@@ -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: [

View File

@@ -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',

View File

@@ -117,7 +117,7 @@ export class DemoHaBadge extends LitElement {
}
.card-content {
display: flex;
gap: 24px;
gap: var(--ha-space-6);
}
`;
}

View File

@@ -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);
}
`;
}

View File

@@ -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);
}
`;
}

View File

@@ -88,7 +88,7 @@ export class DemoHaSlider extends LitElement {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
gap: var(--ha-space-6);
}
`;
}

View File

@@ -70,7 +70,7 @@ export class DemoHaSpinner extends LitElement {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
gap: var(--ha-space-6);
}
`;
}

View File

@@ -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;
}

View File

@@ -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 {

View File

@@ -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;

View File

@@ -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"
}

View File

@@ -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"

View File

@@ -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}`;

View File

@@ -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]

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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 {

View File

@@ -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,

View File

@@ -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;

View File

@@ -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;

View File

@@ -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);

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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;
}

View File

@@ -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) {

View File

@@ -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}

View File

@@ -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;

View File

@@ -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>
`

View File

@@ -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);

View File

@@ -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);

View File

@@ -15,7 +15,7 @@ export class HaSwitch extends SwitchBase {
super.firstUpdated();
this.addEventListener("change", () => {
if (this.haptic) {
forwardHaptic("light");
forwardHaptic(this, "light");
}
});
}

View File

@@ -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;
}
}

View File

@@ -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 {

View File

@@ -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;
}

View File

@@ -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%;
}

View 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;
}
}

View File

@@ -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,
});

View 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;
}
}

View 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;
}
}

View 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;
}
}

View File

@@ -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);
};

View File

@@ -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"
);
};

View File

@@ -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
View 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;
};

View File

@@ -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;

View File

@@ -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;
}
`;
}

View File

@@ -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;
}

View File

@@ -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;
}

View File

@@ -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 */

View File

@@ -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"}

View File

@@ -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 {

View File

@@ -107,7 +107,7 @@ class MoreInfoCamera extends LitElement {
box-sizing: border-box;
padding: 16px;
z-index: 1;
gap: 8px;
gap: var(--ha-space-2);
}
`;
}

View File

@@ -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,
});

View File

@@ -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,
});

View File

@@ -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);
}

View File

@@ -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;
}

View File

@@ -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 {

View File

@@ -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;
}

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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;
}

View File

@@ -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",

View File

@@ -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));

View File

@@ -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 {

View File

@@ -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));

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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;

View File

@@ -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 {

View File

@@ -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 {

View File

@@ -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;
}
`,
];
}

View File

@@ -92,7 +92,7 @@ class DialogPasteReplace extends LitElement implements HassDialog {
}
div[slot="primaryAction"] {
display: flex;
gap: 8px;
gap: var(--ha-space-2);
}
`,
];

View File

@@ -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 {

View File

@@ -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;
}

View File

@@ -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);
}
}
`;

View File

@@ -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);

View File

@@ -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);
}
`;

View File

@@ -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);
}
`;

View File

@@ -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 {

View File

@@ -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;

View File

@@ -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));

View File

@@ -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