mirror of
https://github.com/home-assistant/frontend.git
synced 2025-10-15 06:39:46 +00:00
Compare commits
5 Commits
loading-an
...
reusable_t
Author | SHA1 | Date | |
---|---|---|---|
![]() |
1a4a6e60fb | ||
![]() |
d377275bff | ||
![]() |
65d15da469 | ||
![]() |
903ab67604 | ||
![]() |
948b020b7c |
6
.github/workflows/codeql-analysis.yml
vendored
6
.github/workflows/codeql-analysis.yml
vendored
@@ -36,14 +36,14 @@ jobs:
|
|||||||
|
|
||||||
# Initializes the CodeQL tools for scanning.
|
# Initializes the CodeQL tools for scanning.
|
||||||
- name: Initialize CodeQL
|
- name: Initialize CodeQL
|
||||||
uses: github/codeql-action/init@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
|
uses: github/codeql-action/init@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
|
||||||
with:
|
with:
|
||||||
languages: ${{ matrix.language }}
|
languages: ${{ matrix.language }}
|
||||||
|
|
||||||
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
# 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)
|
# If this step fails, then you should remove it and run the build manually (see below)
|
||||||
- name: Autobuild
|
- name: Autobuild
|
||||||
uses: github/codeql-action/autobuild@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
|
uses: github/codeql-action/autobuild@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
|
||||||
|
|
||||||
# ℹ️ Command-line programs to run using the OS shell.
|
# ℹ️ Command-line programs to run using the OS shell.
|
||||||
# 📚 https://git.io/JvXDl
|
# 📚 https://git.io/JvXDl
|
||||||
@@ -57,4 +57,4 @@ jobs:
|
|||||||
# make release
|
# make release
|
||||||
|
|
||||||
- name: Perform CodeQL Analysis
|
- name: Perform CodeQL Analysis
|
||||||
uses: github/codeql-action/analyze@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
|
uses: github/codeql-action/analyze@3599b3baa15b485a2e49ef411a7a4bb2452e7f93 # v3.30.5
|
||||||
|
6
.github/workflows/release.yaml
vendored
6
.github/workflows/release.yaml
vendored
@@ -55,7 +55,7 @@ jobs:
|
|||||||
script/release
|
script/release
|
||||||
|
|
||||||
- name: Upload release assets
|
- name: Upload release assets
|
||||||
uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
|
uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
|
||||||
with:
|
with:
|
||||||
files: |
|
files: |
|
||||||
dist/*.whl
|
dist/*.whl
|
||||||
@@ -108,7 +108,7 @@ jobs:
|
|||||||
- name: Tar folder
|
- name: Tar folder
|
||||||
run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
|
run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
|
||||||
- name: Upload release asset
|
- name: Upload release asset
|
||||||
uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
|
uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
|
||||||
with:
|
with:
|
||||||
files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
|
files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
|
||||||
|
|
||||||
@@ -137,6 +137,6 @@ jobs:
|
|||||||
- name: Tar folder
|
- name: Tar folder
|
||||||
run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
|
run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
|
||||||
- name: Upload release asset
|
- name: Upload release asset
|
||||||
uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
|
uses: softprops/action-gh-release@6cbd405e2c4e67a21c47fa9e383d020e4e28b836 # v2.3.3
|
||||||
with:
|
with:
|
||||||
files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz
|
files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz
|
||||||
|
2
.github/workflows/stale.yml
vendored
2
.github/workflows/stale.yml
vendored
@@ -10,7 +10,7 @@ jobs:
|
|||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
steps:
|
steps:
|
||||||
- name: 90 days stale policy
|
- name: 90 days stale policy
|
||||||
uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
|
uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10.0.0
|
||||||
with:
|
with:
|
||||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
days-before-stale: 90
|
days-before-stale: 90
|
||||||
|
@@ -183,6 +183,7 @@ module.exports.babelOptions = ({
|
|||||||
include: /\/node_modules\//,
|
include: /\/node_modules\//,
|
||||||
exclude: [
|
exclude: [
|
||||||
"element-internals-polyfill",
|
"element-internals-polyfill",
|
||||||
|
"@shoelace-style",
|
||||||
"@?lit(?:-labs|-element|-html)?",
|
"@?lit(?:-labs|-element|-html)?",
|
||||||
].map((p) => new RegExp(`/node_modules/${p}/`)),
|
].map((p) => new RegExp(`/node_modules/${p}/`)),
|
||||||
},
|
},
|
||||||
|
@@ -242,7 +242,7 @@ class HcCast extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.question:before {
|
.question:before {
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
@@ -95,8 +95,7 @@ class HcLayout extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero {
|
.hero {
|
||||||
border-radius: var(--ha-border-radius-sm) var(--ha-border-radius-sm)
|
border-radius: 4px 4px 0 0;
|
||||||
var(--ha-border-radius-square) var(--ha-border-radius-square);
|
|
||||||
}
|
}
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: var(--ha-font-size-m);
|
font-size: var(--ha-font-size-m);
|
||||||
|
@@ -208,7 +208,7 @@ class HaGallery extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar a[active]::before {
|
.sidebar a[active]::before {
|
||||||
border-radius: var(--ha-border-radius-lg);
|
border-radius: 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 2px;
|
right: 2px;
|
||||||
@@ -241,7 +241,7 @@ class HaGallery extends LitElement {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
border-radius: var(--ha-border-radius-lg);
|
border-radius: 12px;
|
||||||
background-color: var(--primary-background-color);
|
background-color: var(--primary-background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -9,10 +9,10 @@ import { css, html, LitElement } from "lit";
|
|||||||
import { customElement } from "lit/decorators";
|
import { customElement } from "lit/decorators";
|
||||||
import { ifDefined } from "lit/directives/if-defined";
|
import { ifDefined } from "lit/directives/if-defined";
|
||||||
import { repeat } from "lit/directives/repeat";
|
import { repeat } from "lit/directives/repeat";
|
||||||
import "../../../../src/components/ha-card";
|
|
||||||
import "../../../../src/components/ha-control-button";
|
import "../../../../src/components/ha-control-button";
|
||||||
import "../../../../src/components/ha-control-button-group";
|
import "../../../../src/components/ha-card";
|
||||||
import "../../../../src/components/ha-svg-icon";
|
import "../../../../src/components/ha-svg-icon";
|
||||||
|
import "../../../../src/components/ha-control-button-group";
|
||||||
|
|
||||||
interface Button {
|
interface Button {
|
||||||
label: string;
|
label: string;
|
||||||
@@ -156,17 +156,17 @@ export class DemoHaBarButton extends LitElement {
|
|||||||
--control-button-icon-color: var(--primary-color);
|
--control-button-icon-color: var(--primary-color);
|
||||||
--control-button-background-color: var(--primary-color);
|
--control-button-background-color: var(--primary-color);
|
||||||
--control-button-background-opacity: 0.2;
|
--control-button-background-opacity: 0.2;
|
||||||
--control-button-border-radius: var(--ha-border-radius-xl);
|
--control-button-border-radius: 18px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
.custom-group {
|
.custom-group {
|
||||||
--control-button-group-thickness: 100px;
|
--control-button-group-thickness: 100px;
|
||||||
--control-button-group-border-radius: var(--ha-border-radius-6xl);
|
--control-button-group-border-radius: 36px;
|
||||||
--control-button-group-spacing: 20px;
|
--control-button-group-spacing: 20px;
|
||||||
}
|
}
|
||||||
.custom-group ha-control-button {
|
.custom-group ha-control-button {
|
||||||
--control-button-border-radius: var(--ha-border-radius-xl);
|
--control-button-border-radius: 18px;
|
||||||
--mdc-icon-size: 32px;
|
--mdc-icon-size: 32px;
|
||||||
}
|
}
|
||||||
.vertical-buttons {
|
.vertical-buttons {
|
||||||
|
@@ -1,10 +1,10 @@
|
|||||||
import type { TemplateResult } from "lit";
|
import type { TemplateResult } from "lit";
|
||||||
import { LitElement, css, html } from "lit";
|
import { LitElement, css, html } from "lit";
|
||||||
import { customElement, state } from "lit/decorators";
|
import { customElement, state } from "lit/decorators";
|
||||||
import { ifDefined } from "lit/directives/if-defined";
|
|
||||||
import { repeat } from "lit/directives/repeat";
|
|
||||||
import "../../../../src/components/ha-card";
|
import "../../../../src/components/ha-card";
|
||||||
import "../../../../src/components/ha-control-number-buttons";
|
import "../../../../src/components/ha-control-number-buttons";
|
||||||
|
import { repeat } from "lit/directives/repeat";
|
||||||
|
import { ifDefined } from "lit/directives/if-defined";
|
||||||
|
|
||||||
const buttons: {
|
const buttons: {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -94,7 +94,7 @@ export class DemoHarControlNumberButtons extends LitElement {
|
|||||||
--control-number-buttons-background-color: #2196f3;
|
--control-number-buttons-background-color: #2196f3;
|
||||||
--control-number-buttons-background-opacity: 0.1;
|
--control-number-buttons-background-opacity: 0.1;
|
||||||
--control-number-buttons-thickness: 100px;
|
--control-number-buttons-thickness: 100px;
|
||||||
--control-number-buttons-border-radius: var(--ha-border-radius-6xl);
|
--control-number-buttons-border-radius: 36px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@@ -131,7 +131,7 @@ export class DemoHaControlSelectMenu extends LitElement {
|
|||||||
--control-button-icon-color: var(--primary-color);
|
--control-button-icon-color: var(--primary-color);
|
||||||
--control-button-background-color: var(--primary-color);
|
--control-button-background-color: var(--primary-color);
|
||||||
--control-button-background-opacity: 0.2;
|
--control-button-background-opacity: 0.2;
|
||||||
--control-button-border-radius: var(--ha-border-radius-xl);
|
--control-button-border-radius: 18px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
@@ -187,7 +187,7 @@ export class DemoHaControlSelect extends LitElement {
|
|||||||
--mdc-icon-size: 24px;
|
--mdc-icon-size: 24px;
|
||||||
--control-select-color: var(--state-fan-active-color);
|
--control-select-color: var(--state-fan-active-color);
|
||||||
--control-select-thickness: 130px;
|
--control-select-thickness: 130px;
|
||||||
--control-select-border-radius: var(--ha-border-radius-6xl);
|
--control-select-border-radius: 36px;
|
||||||
}
|
}
|
||||||
.vertical-selects {
|
.vertical-selects {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
|
@@ -3,8 +3,8 @@ import { css, html, LitElement } from "lit";
|
|||||||
import { customElement, state } from "lit/decorators";
|
import { customElement, state } from "lit/decorators";
|
||||||
import { ifDefined } from "lit/directives/if-defined";
|
import { ifDefined } from "lit/directives/if-defined";
|
||||||
import { repeat } from "lit/directives/repeat";
|
import { repeat } from "lit/directives/repeat";
|
||||||
import "../../../../src/components/ha-card";
|
|
||||||
import "../../../../src/components/ha-control-slider";
|
import "../../../../src/components/ha-control-slider";
|
||||||
|
import "../../../../src/components/ha-card";
|
||||||
|
|
||||||
const sliders: {
|
const sliders: {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -151,7 +151,7 @@ export class DemoHaBarSlider extends LitElement {
|
|||||||
--control-slider-background: #ffcf4c;
|
--control-slider-background: #ffcf4c;
|
||||||
--control-slider-background-opacity: 0.2;
|
--control-slider-background-opacity: 0.2;
|
||||||
--control-slider-thickness: 130px;
|
--control-slider-thickness: 130px;
|
||||||
--control-slider-border-radius: var(--ha-border-radius-6xl);
|
--control-slider-border-radius: 36px;
|
||||||
}
|
}
|
||||||
.vertical-sliders {
|
.vertical-sliders {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
|
@@ -9,8 +9,8 @@ import { css, html, LitElement } from "lit";
|
|||||||
import { customElement, state } from "lit/decorators";
|
import { customElement, state } from "lit/decorators";
|
||||||
import { ifDefined } from "lit/directives/if-defined";
|
import { ifDefined } from "lit/directives/if-defined";
|
||||||
import { repeat } from "lit/directives/repeat";
|
import { repeat } from "lit/directives/repeat";
|
||||||
import "../../../../src/components/ha-card";
|
|
||||||
import "../../../../src/components/ha-control-switch";
|
import "../../../../src/components/ha-control-switch";
|
||||||
|
import "../../../../src/components/ha-card";
|
||||||
|
|
||||||
const switches: {
|
const switches: {
|
||||||
id: string;
|
id: string;
|
||||||
@@ -118,7 +118,7 @@ export class DemoHaControlSwitch extends LitElement {
|
|||||||
--control-switch-on-color: var(--green-color);
|
--control-switch-on-color: var(--green-color);
|
||||||
--control-switch-off-color: var(--red-color);
|
--control-switch-off-color: var(--red-color);
|
||||||
--control-switch-thickness: 130px;
|
--control-switch-thickness: 130px;
|
||||||
--control-switch-border-radius: var(--ha-border-radius-6xl);
|
--control-switch-border-radius: 36px;
|
||||||
--control-switch-padding: 6px;
|
--control-switch-padding: 6px;
|
||||||
--mdc-icon-size: 24px;
|
--mdc-icon-size: 24px;
|
||||||
}
|
}
|
||||||
|
@@ -131,7 +131,7 @@ export class DemoHaSelectBox extends LitElement {
|
|||||||
--mdc-icon-size: 24px;
|
--mdc-icon-size: 24px;
|
||||||
--control-select-color: var(--state-fan-active-color);
|
--control-select-color: var(--state-fan-active-color);
|
||||||
--control-select-thickness: 130px;
|
--control-select-thickness: 130px;
|
||||||
--control-select-border-radius: var(--ha-border-radius-6xl);
|
--control-select-border-radius: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
p.title {
|
p.title {
|
||||||
|
@@ -34,5 +34,3 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/slid
|
|||||||
**CSS Custom Properties**
|
**CSS Custom Properties**
|
||||||
|
|
||||||
- `--ha-slider-track-size` - Height of the slider track. Defaults to `4px`.
|
- `--ha-slider-track-size` - Height of the slider track. Defaults to `4px`.
|
||||||
- `--ha-slider-thumb-color` - Color of the slider thumb. Defaults to `var(--primary-color)`.
|
|
||||||
- `--ha-slider-indicator-color` - Color of the filled portion of the slider track. Defaults to `var(--primary-color)`.
|
|
||||||
|
@@ -79,7 +79,7 @@ export class DemoHaSlider extends LitElement {
|
|||||||
background-color: var(--primary-background-color);
|
background-color: var(--primary-background-color);
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
ha-card {
|
ha-card {
|
||||||
margin: 24px auto;
|
margin: 24px auto;
|
||||||
|
@@ -61,7 +61,7 @@ export class DemoHaSpinner extends LitElement {
|
|||||||
background-color: var(--primary-background-color);
|
background-color: var(--primary-background-color);
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
margin: 16px;
|
margin: 16px;
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
ha-card {
|
ha-card {
|
||||||
margin: 24px auto;
|
margin: 24px auto;
|
||||||
|
@@ -5,13 +5,13 @@ import type {
|
|||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import memoizeOne from "memoize-one";
|
import memoizeOne from "memoize-one";
|
||||||
import { mockIcons } from "../../../../demo/src/stubs/icons";
|
|
||||||
import { computeDomain } from "../../../../src/common/entity/compute_domain";
|
import { computeDomain } from "../../../../src/common/entity/compute_domain";
|
||||||
import { computeStateDisplay } from "../../../../src/common/entity/compute_state_display";
|
import { computeStateDisplay } from "../../../../src/common/entity/compute_state_display";
|
||||||
import "../../../../src/components/data-table/ha-data-table";
|
import "../../../../src/components/data-table/ha-data-table";
|
||||||
import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
|
import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
|
||||||
import "../../../../src/components/entity/state-badge";
|
import "../../../../src/components/entity/state-badge";
|
||||||
import { provideHass } from "../../../../src/fake_data/provide_hass";
|
import { provideHass } from "../../../../src/fake_data/provide_hass";
|
||||||
|
import { mockIcons } from "../../../../demo/src/stubs/icons";
|
||||||
import type { HomeAssistant } from "../../../../src/types";
|
import type { HomeAssistant } from "../../../../src/types";
|
||||||
|
|
||||||
const SENSOR_DEVICE_CLASSES = [
|
const SENSOR_DEVICE_CLASSES = [
|
||||||
@@ -434,7 +434,7 @@ export class DemoEntityState extends LitElement {
|
|||||||
display: block;
|
display: block;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 10px;
|
||||||
background-color: rgb(--color);
|
background-color: rgb(--color);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@@ -121,7 +121,7 @@ class HassioCardContent extends LitElement {
|
|||||||
height: 12px;
|
height: 12px;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.topbar {
|
.topbar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@@ -164,7 +164,7 @@ class HassioHardwareDialog extends LitElement {
|
|||||||
pre,
|
pre,
|
||||||
code {
|
code {
|
||||||
background-color: var(--markdown-code-background-color, none);
|
background-color: var(--markdown-code-background-color, none);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
pre {
|
pre {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
@@ -228,7 +228,7 @@ class HassioRegistriesDialog extends LitElement {
|
|||||||
css`
|
css`
|
||||||
.registry {
|
.registry {
|
||||||
border: 1px solid var(--divider-color);
|
border: 1px solid var(--divider-color);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
.action {
|
.action {
|
||||||
|
@@ -193,7 +193,7 @@ class HassioRepositoriesDialog extends LitElement {
|
|||||||
}
|
}
|
||||||
.option {
|
.option {
|
||||||
border: 1px solid var(--divider-color);
|
border: 1px solid var(--divider-color);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
}
|
}
|
||||||
ha-button {
|
ha-button {
|
||||||
|
@@ -302,7 +302,7 @@ class LandingPageLogs extends LitElement {
|
|||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border: 1px solid var(--divider-color);
|
border: 1px solid var(--divider-color);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -221,7 +221,7 @@ class HaLandingPage extends LandingPageBaseElement {
|
|||||||
ha-language-picker {
|
ha-language-picker {
|
||||||
display: block;
|
display: block;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
--ha-select-height: 40px;
|
--ha-select-height: 40px;
|
||||||
--mdc-select-fill-color: none;
|
--mdc-select-fill-color: none;
|
||||||
|
56
package.json
56
package.json
@@ -29,30 +29,30 @@
|
|||||||
"@babel/runtime": "7.28.4",
|
"@babel/runtime": "7.28.4",
|
||||||
"@braintree/sanitize-url": "7.1.1",
|
"@braintree/sanitize-url": "7.1.1",
|
||||||
"@codemirror/autocomplete": "6.19.0",
|
"@codemirror/autocomplete": "6.19.0",
|
||||||
"@codemirror/commands": "6.9.0",
|
"@codemirror/commands": "6.8.1",
|
||||||
"@codemirror/language": "6.11.3",
|
"@codemirror/language": "6.11.3",
|
||||||
"@codemirror/legacy-modes": "6.5.2",
|
"@codemirror/legacy-modes": "6.5.1",
|
||||||
"@codemirror/search": "6.5.11",
|
"@codemirror/search": "6.5.11",
|
||||||
"@codemirror/state": "6.5.2",
|
"@codemirror/state": "6.5.2",
|
||||||
"@codemirror/view": "6.38.4",
|
"@codemirror/view": "6.38.3",
|
||||||
"@date-fns/tz": "1.4.1",
|
"@date-fns/tz": "1.4.1",
|
||||||
"@egjs/hammerjs": "2.0.17",
|
"@egjs/hammerjs": "2.0.17",
|
||||||
"@formatjs/intl-datetimeformat": "6.18.1",
|
"@formatjs/intl-datetimeformat": "6.18.0",
|
||||||
"@formatjs/intl-displaynames": "6.8.12",
|
"@formatjs/intl-displaynames": "6.8.11",
|
||||||
"@formatjs/intl-durationformat": "0.7.5",
|
"@formatjs/intl-durationformat": "0.7.4",
|
||||||
"@formatjs/intl-getcanonicallocales": "2.5.6",
|
"@formatjs/intl-getcanonicallocales": "2.5.5",
|
||||||
"@formatjs/intl-listformat": "7.7.12",
|
"@formatjs/intl-listformat": "7.7.11",
|
||||||
"@formatjs/intl-locale": "4.2.12",
|
"@formatjs/intl-locale": "4.2.11",
|
||||||
"@formatjs/intl-numberformat": "8.15.5",
|
"@formatjs/intl-numberformat": "8.15.4",
|
||||||
"@formatjs/intl-pluralrules": "5.4.5",
|
"@formatjs/intl-pluralrules": "5.4.4",
|
||||||
"@formatjs/intl-relativetimeformat": "11.4.12",
|
"@formatjs/intl-relativetimeformat": "11.4.11",
|
||||||
"@fullcalendar/core": "6.1.19",
|
"@fullcalendar/core": "6.1.19",
|
||||||
"@fullcalendar/daygrid": "6.1.19",
|
"@fullcalendar/daygrid": "6.1.19",
|
||||||
"@fullcalendar/interaction": "6.1.19",
|
"@fullcalendar/interaction": "6.1.19",
|
||||||
"@fullcalendar/list": "6.1.19",
|
"@fullcalendar/list": "6.1.19",
|
||||||
"@fullcalendar/luxon3": "6.1.19",
|
"@fullcalendar/luxon3": "6.1.19",
|
||||||
"@fullcalendar/timegrid": "6.1.19",
|
"@fullcalendar/timegrid": "6.1.19",
|
||||||
"@home-assistant/webawesome": "3.0.0-beta.6.ha.1",
|
"@home-assistant/webawesome": "3.0.0-beta.4.ha.3",
|
||||||
"@lezer/highlight": "1.2.1",
|
"@lezer/highlight": "1.2.1",
|
||||||
"@lit-labs/motion": "1.0.9",
|
"@lit-labs/motion": "1.0.9",
|
||||||
"@lit-labs/observers": "2.0.6",
|
"@lit-labs/observers": "2.0.6",
|
||||||
@@ -89,14 +89,14 @@
|
|||||||
"@thomasloven/round-slider": "0.6.0",
|
"@thomasloven/round-slider": "0.6.0",
|
||||||
"@tsparticles/engine": "3.9.1",
|
"@tsparticles/engine": "3.9.1",
|
||||||
"@tsparticles/preset-links": "3.2.0",
|
"@tsparticles/preset-links": "3.2.0",
|
||||||
"@vaadin/combo-box": "24.9.2",
|
"@vaadin/combo-box": "24.9.1",
|
||||||
"@vaadin/vaadin-themable-mixin": "24.9.2",
|
"@vaadin/vaadin-themable-mixin": "24.9.1",
|
||||||
"@vibrant/color": "4.0.0",
|
"@vibrant/color": "4.0.0",
|
||||||
"@vue/web-component-wrapper": "1.3.0",
|
"@vue/web-component-wrapper": "1.3.0",
|
||||||
"@webcomponents/scoped-custom-element-registry": "0.0.10",
|
"@webcomponents/scoped-custom-element-registry": "0.0.10",
|
||||||
"@webcomponents/webcomponentsjs": "2.8.0",
|
"@webcomponents/webcomponentsjs": "2.8.0",
|
||||||
"app-datepicker": "5.1.1",
|
"app-datepicker": "5.1.1",
|
||||||
"barcode-detector": "3.0.6",
|
"barcode-detector": "3.0.5",
|
||||||
"color-name": "2.0.2",
|
"color-name": "2.0.2",
|
||||||
"comlink": "4.4.2",
|
"comlink": "4.4.2",
|
||||||
"core-js": "3.45.1",
|
"core-js": "3.45.1",
|
||||||
@@ -114,7 +114,7 @@
|
|||||||
"hls.js": "1.6.13",
|
"hls.js": "1.6.13",
|
||||||
"home-assistant-js-websocket": "9.5.0",
|
"home-assistant-js-websocket": "9.5.0",
|
||||||
"idb-keyval": "6.2.2",
|
"idb-keyval": "6.2.2",
|
||||||
"intl-messageformat": "10.7.17",
|
"intl-messageformat": "10.7.16",
|
||||||
"js-yaml": "4.1.0",
|
"js-yaml": "4.1.0",
|
||||||
"leaflet": "1.9.4",
|
"leaflet": "1.9.4",
|
||||||
"leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
|
"leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
|
||||||
@@ -152,13 +152,13 @@
|
|||||||
"@babel/helper-define-polyfill-provider": "0.6.5",
|
"@babel/helper-define-polyfill-provider": "0.6.5",
|
||||||
"@babel/plugin-transform-runtime": "7.28.3",
|
"@babel/plugin-transform-runtime": "7.28.3",
|
||||||
"@babel/preset-env": "7.28.3",
|
"@babel/preset-env": "7.28.3",
|
||||||
"@bundle-stats/plugin-webpack-filter": "4.21.4",
|
"@bundle-stats/plugin-webpack-filter": "4.21.3",
|
||||||
"@lokalise/node-api": "15.3.0",
|
"@lokalise/node-api": "15.2.1",
|
||||||
"@octokit/auth-oauth-device": "8.0.2",
|
"@octokit/auth-oauth-device": "8.0.1",
|
||||||
"@octokit/plugin-retry": "8.0.2",
|
"@octokit/plugin-retry": "8.0.1",
|
||||||
"@octokit/rest": "22.0.0",
|
"@octokit/rest": "22.0.0",
|
||||||
"@rsdoctor/rspack-plugin": "1.3.1",
|
"@rsdoctor/rspack-plugin": "1.3.0",
|
||||||
"@rspack/core": "1.5.8",
|
"@rspack/core": "1.5.7",
|
||||||
"@rspack/dev-server": "1.1.4",
|
"@rspack/dev-server": "1.1.4",
|
||||||
"@types/babel__plugin-transform-runtime": "7.9.5",
|
"@types/babel__plugin-transform-runtime": "7.9.5",
|
||||||
"@types/chromecast-caf-receiver": "6.0.22",
|
"@types/chromecast-caf-receiver": "6.0.22",
|
||||||
@@ -183,7 +183,7 @@
|
|||||||
"babel-plugin-template-html-minifier": "4.1.0",
|
"babel-plugin-template-html-minifier": "4.1.0",
|
||||||
"browserslist-useragent-regexp": "4.1.3",
|
"browserslist-useragent-regexp": "4.1.3",
|
||||||
"del": "8.0.1",
|
"del": "8.0.1",
|
||||||
"eslint": "9.37.0",
|
"eslint": "9.36.0",
|
||||||
"eslint-config-airbnb-base": "15.0.0",
|
"eslint-config-airbnb-base": "15.0.0",
|
||||||
"eslint-config-prettier": "10.1.8",
|
"eslint-config-prettier": "10.1.8",
|
||||||
"eslint-import-resolver-webpack": "0.13.10",
|
"eslint-import-resolver-webpack": "0.13.10",
|
||||||
@@ -191,7 +191,7 @@
|
|||||||
"eslint-plugin-lit": "2.1.1",
|
"eslint-plugin-lit": "2.1.1",
|
||||||
"eslint-plugin-lit-a11y": "5.1.1",
|
"eslint-plugin-lit-a11y": "5.1.1",
|
||||||
"eslint-plugin-unused-imports": "4.2.0",
|
"eslint-plugin-unused-imports": "4.2.0",
|
||||||
"eslint-plugin-wc": "3.0.2",
|
"eslint-plugin-wc": "3.0.1",
|
||||||
"fancy-log": "2.0.0",
|
"fancy-log": "2.0.0",
|
||||||
"fs-extra": "11.3.2",
|
"fs-extra": "11.3.2",
|
||||||
"glob": "11.0.3",
|
"glob": "11.0.3",
|
||||||
@@ -203,7 +203,7 @@
|
|||||||
"husky": "9.1.7",
|
"husky": "9.1.7",
|
||||||
"jsdom": "27.0.0",
|
"jsdom": "27.0.0",
|
||||||
"jszip": "3.10.1",
|
"jszip": "3.10.1",
|
||||||
"lint-staged": "16.2.3",
|
"lint-staged": "16.2.1",
|
||||||
"lit-analyzer": "2.0.3",
|
"lit-analyzer": "2.0.3",
|
||||||
"lodash.merge": "4.6.2",
|
"lodash.merge": "4.6.2",
|
||||||
"lodash.template": "4.5.0",
|
"lodash.template": "4.5.0",
|
||||||
@@ -216,8 +216,8 @@
|
|||||||
"tar": "7.5.1",
|
"tar": "7.5.1",
|
||||||
"terser-webpack-plugin": "5.3.14",
|
"terser-webpack-plugin": "5.3.14",
|
||||||
"ts-lit-plugin": "2.0.2",
|
"ts-lit-plugin": "2.0.2",
|
||||||
"typescript": "5.9.3",
|
"typescript": "5.9.2",
|
||||||
"typescript-eslint": "8.45.0",
|
"typescript-eslint": "8.44.1",
|
||||||
"vite-tsconfig-paths": "5.1.4",
|
"vite-tsconfig-paths": "5.1.4",
|
||||||
"vitest": "3.2.4",
|
"vitest": "3.2.4",
|
||||||
"webpack-stats-plugin": "1.1.3",
|
"webpack-stats-plugin": "1.1.3",
|
||||||
|
@@ -103,10 +103,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
|
|||||||
);
|
);
|
||||||
box-shadow: var(--ha-card-box-shadow, none);
|
box-shadow: var(--ha-card-box-shadow, none);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(
|
border-radius: var(--ha-card-border-radius, 12px);
|
||||||
--ha-card-border-radius,
|
|
||||||
var(--ha-border-radius-lg)
|
|
||||||
);
|
|
||||||
border-width: var(--ha-card-border-width, 1px);
|
border-width: var(--ha-card-border-width, 1px);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(
|
border-color: var(
|
||||||
@@ -135,7 +132,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
|
|||||||
}
|
}
|
||||||
ha-language-picker {
|
ha-language-picker {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
--ha-select-height: 40px;
|
--ha-select-height: 40px;
|
||||||
--mdc-select-fill-color: none;
|
--mdc-select-fill-color: none;
|
||||||
|
@@ -1,141 +0,0 @@
|
|||||||
import type {
|
|
||||||
ReactiveController,
|
|
||||||
ReactiveControllerHost,
|
|
||||||
} from "@lit/reactive-element/reactive-controller";
|
|
||||||
|
|
||||||
const UNDO_REDO_STACK_LIMIT = 75;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Configuration options for the UndoRedoController.
|
|
||||||
*
|
|
||||||
* @template ConfigType The type of configuration to manage.
|
|
||||||
*/
|
|
||||||
export interface UndoRedoControllerConfig<ConfigType> {
|
|
||||||
stackLimit?: number;
|
|
||||||
currentConfig: () => ConfigType;
|
|
||||||
apply: (config: ConfigType) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A controller to manage undo and redo operations for a given configuration type.
|
|
||||||
*
|
|
||||||
* @template ConfigType The type of configuration to manage.
|
|
||||||
*/
|
|
||||||
export class UndoRedoController<ConfigType> implements ReactiveController {
|
|
||||||
private _host: ReactiveControllerHost;
|
|
||||||
|
|
||||||
private _undoStack: ConfigType[] = [];
|
|
||||||
|
|
||||||
private _redoStack: ConfigType[] = [];
|
|
||||||
|
|
||||||
private readonly _stackLimit: number = UNDO_REDO_STACK_LIMIT;
|
|
||||||
|
|
||||||
private readonly _apply: (config: ConfigType) => void = () => {
|
|
||||||
throw new Error("No apply function provided");
|
|
||||||
};
|
|
||||||
|
|
||||||
private readonly _currentConfig: () => ConfigType = () => {
|
|
||||||
throw new Error("No currentConfig function provided");
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
host: ReactiveControllerHost,
|
|
||||||
options: UndoRedoControllerConfig<ConfigType>
|
|
||||||
) {
|
|
||||||
if (options.stackLimit !== undefined) {
|
|
||||||
this._stackLimit = options.stackLimit;
|
|
||||||
}
|
|
||||||
|
|
||||||
this._apply = options.apply;
|
|
||||||
this._currentConfig = options.currentConfig;
|
|
||||||
this._host = host;
|
|
||||||
host.addController(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
hostConnected() {
|
|
||||||
window.addEventListener("undo-change", this._onUndoChange);
|
|
||||||
}
|
|
||||||
|
|
||||||
hostDisconnected() {
|
|
||||||
window.removeEventListener("undo-change", this._onUndoChange);
|
|
||||||
}
|
|
||||||
|
|
||||||
private _onUndoChange = (ev: Event) => {
|
|
||||||
ev.stopPropagation();
|
|
||||||
this.undo();
|
|
||||||
this._host.requestUpdate();
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Indicates whether there are actions available to undo.
|
|
||||||
*
|
|
||||||
* @returns `true` if there are actions to undo, `false` otherwise.
|
|
||||||
*/
|
|
||||||
public get canUndo(): boolean {
|
|
||||||
return this._undoStack.length > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Indicates whether there are actions available to redo.
|
|
||||||
*
|
|
||||||
* @returns `true` if there are actions to redo, `false` otherwise.
|
|
||||||
*/
|
|
||||||
public get canRedo(): boolean {
|
|
||||||
return this._redoStack.length > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Commits the current configuration to the undo stack and clears the redo stack.
|
|
||||||
*
|
|
||||||
* @param config The current configuration to commit.
|
|
||||||
*/
|
|
||||||
public commit(config: ConfigType) {
|
|
||||||
if (this._undoStack.length >= this._stackLimit) {
|
|
||||||
this._undoStack.shift();
|
|
||||||
}
|
|
||||||
this._undoStack.push({ ...config });
|
|
||||||
this._redoStack = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Undoes the last action and applies the previous configuration
|
|
||||||
* while saving the current configuration to the redo stack.
|
|
||||||
*/
|
|
||||||
public undo() {
|
|
||||||
if (this._undoStack.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this._redoStack.push({ ...this._currentConfig() });
|
|
||||||
const config = this._undoStack.pop()!;
|
|
||||||
this._apply(config);
|
|
||||||
this._host.requestUpdate();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Redoes the last undone action and reapplies the configuration
|
|
||||||
* while saving the current configuration to the undo stack.
|
|
||||||
*/
|
|
||||||
public redo() {
|
|
||||||
if (this._redoStack.length === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this._undoStack.push({ ...this._currentConfig() });
|
|
||||||
const config = this._redoStack.pop()!;
|
|
||||||
this._apply(config);
|
|
||||||
this._host.requestUpdate();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Resets the undo and redo stacks, clearing all history.
|
|
||||||
*/
|
|
||||||
public reset() {
|
|
||||||
this._undoStack = [];
|
|
||||||
this._redoStack = [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface HASSDomEvents {
|
|
||||||
"undo-change": undefined;
|
|
||||||
}
|
|
||||||
}
|
|
@@ -31,10 +31,10 @@ export const isNavigationClick = (e: MouseEvent, preventDefault = true) => {
|
|||||||
|
|
||||||
const location = window.location;
|
const location = window.location;
|
||||||
const origin = location.origin || location.protocol + "//" + location.host;
|
const origin = location.origin || location.protocol + "//" + location.host;
|
||||||
if (!href.startsWith(origin)) {
|
if (href.indexOf(origin) !== 0) {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
href = href.slice(origin.length);
|
href = href.substr(origin.length);
|
||||||
|
|
||||||
if (href === "#") {
|
if (href === "#") {
|
||||||
return undefined;
|
return undefined;
|
||||||
|
@@ -1,53 +0,0 @@
|
|||||||
/**
|
|
||||||
* Trigger a view transition if supported by the browser
|
|
||||||
* @param updateCallback - Callback function that updates the DOM
|
|
||||||
* @returns Promise that resolves when the transition is complete
|
|
||||||
*/
|
|
||||||
export const startViewTransition = async (
|
|
||||||
updateCallback: () => void | Promise<void>
|
|
||||||
): Promise<void> => {
|
|
||||||
// Check if View Transitions API is supported
|
|
||||||
if (
|
|
||||||
!document.startViewTransition ||
|
|
||||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
|
||||||
) {
|
|
||||||
// Fallback: just run the update without transition
|
|
||||||
await updateCallback();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start the view transition
|
|
||||||
const transition = document.startViewTransition(async () => {
|
|
||||||
await updateCallback();
|
|
||||||
});
|
|
||||||
|
|
||||||
try {
|
|
||||||
await transition.finished;
|
|
||||||
} catch (error) {
|
|
||||||
// Transitions can be skipped, which is fine
|
|
||||||
// eslint-disable-next-line no-console
|
|
||||||
console.debug("View transition skipped or failed:", error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Helper to apply view transition on first render
|
|
||||||
* @param _element - The element to observe (unused, kept for API consistency)
|
|
||||||
* @param callback - Callback when element is first rendered
|
|
||||||
*/
|
|
||||||
export const applyViewTransitionOnLoad = (
|
|
||||||
_element: HTMLElement,
|
|
||||||
callback?: () => void
|
|
||||||
): void => {
|
|
||||||
if (!document.startViewTransition) {
|
|
||||||
callback?.();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use requestAnimationFrame to ensure DOM is ready
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
startViewTransition(() => {
|
|
||||||
callback?.();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
@@ -1,3 +1,3 @@
|
|||||||
/** Compute the object ID of a state. */
|
/** Compute the object ID of a state. */
|
||||||
export const computeObjectId = (entityId: string): string =>
|
export const computeObjectId = (entityId: string): string =>
|
||||||
entityId.slice(entityId.indexOf(".") + 1);
|
entityId.substr(entityId.indexOf(".") + 1);
|
||||||
|
@@ -122,22 +122,3 @@ export const generateEntityFilter = (
|
|||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export const findEntities = (
|
|
||||||
entities: string[],
|
|
||||||
filters: EntityFilterFunc[]
|
|
||||||
): string[] => {
|
|
||||||
const seen = new Set<string>();
|
|
||||||
const results: string[] = [];
|
|
||||||
|
|
||||||
for (const filter of filters) {
|
|
||||||
for (const entity of entities) {
|
|
||||||
if (filter(entity) && !seen.has(entity)) {
|
|
||||||
seen.add(entity);
|
|
||||||
results.push(entity);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return results;
|
|
||||||
};
|
|
||||||
|
@@ -18,7 +18,6 @@ export const FIXED_DOMAIN_STATES = {
|
|||||||
"pending",
|
"pending",
|
||||||
"triggered",
|
"triggered",
|
||||||
],
|
],
|
||||||
alert: ["on", "off", "idle"],
|
|
||||||
assist_satellite: ["idle", "listening", "responding", "processing"],
|
assist_satellite: ["idle", "listening", "responding", "processing"],
|
||||||
automation: ["on", "off"],
|
automation: ["on", "off"],
|
||||||
binary_sensor: ["on", "off"],
|
binary_sensor: ["on", "off"],
|
||||||
|
@@ -40,7 +40,6 @@ const STATE_COLORED_DOMAIN = new Set([
|
|||||||
"vacuum",
|
"vacuum",
|
||||||
"valve",
|
"valve",
|
||||||
"water_heater",
|
"water_heater",
|
||||||
"weather",
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export const stateColorCss = (stateObj: HassEntity, state?: string) => {
|
export const stateColorCss = (stateObj: HassEntity, state?: string) => {
|
||||||
|
@@ -32,8 +32,6 @@ export const numberFormatToLocale = (
|
|||||||
return ["de", "es", "it"]; // Use German with fallback to Spanish then Italian formatting 1.234.567,89
|
return ["de", "es", "it"]; // Use German with fallback to Spanish then Italian formatting 1.234.567,89
|
||||||
case NumberFormat.space_comma:
|
case NumberFormat.space_comma:
|
||||||
return ["fr", "sv", "cs"]; // Use French with fallback to Swedish and Czech formatting 1 234 567,89
|
return ["fr", "sv", "cs"]; // Use French with fallback to Swedish and Czech formatting 1 234 567,89
|
||||||
case NumberFormat.quote_decimal:
|
|
||||||
return ["de-CH"]; // Use German (Switzerland) formatting 1'234'567.89
|
|
||||||
case NumberFormat.system:
|
case NumberFormat.system:
|
||||||
return undefined;
|
return undefined;
|
||||||
default:
|
default:
|
||||||
|
@@ -67,7 +67,10 @@ function isSeparatorAtPos(value: string, index: number): boolean {
|
|||||||
case undefined:
|
case undefined:
|
||||||
return false;
|
return false;
|
||||||
default:
|
default:
|
||||||
return isEmojiImprecise(code);
|
if (isEmojiImprecise(code)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -14,7 +14,7 @@ export default function parseAspectRatio(input: string) {
|
|||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
if (input.endsWith("%")) {
|
if (input.endsWith("%")) {
|
||||||
return { w: 100, h: parseOrThrow(input.slice(0, -1)) };
|
return { w: 100, h: parseOrThrow(input.substr(0, input.length - 1)) };
|
||||||
}
|
}
|
||||||
|
|
||||||
const arr = input.replace(":", "x").split("x");
|
const arr = input.replace(":", "x").split("x");
|
||||||
|
@@ -1,5 +1,5 @@
|
|||||||
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
|
||||||
import { consume } from "@lit/context";
|
import { consume } from "@lit/context";
|
||||||
|
import { ResizeController } from "@lit-labs/observers/resize-controller";
|
||||||
import { mdiChevronDown, mdiChevronUp, mdiRestart } from "@mdi/js";
|
import { mdiChevronDown, mdiChevronUp, mdiRestart } from "@mdi/js";
|
||||||
import { differenceInMinutes } from "date-fns";
|
import { differenceInMinutes } from "date-fns";
|
||||||
import type { DataZoomComponentOption } from "echarts/components";
|
import type { DataZoomComponentOption } from "echarts/components";
|
||||||
@@ -7,16 +7,15 @@ import type { EChartsType } from "echarts/core";
|
|||||||
import type {
|
import type {
|
||||||
ECElementEvent,
|
ECElementEvent,
|
||||||
LegendComponentOption,
|
LegendComponentOption,
|
||||||
LineSeriesOption,
|
|
||||||
XAXisOption,
|
XAXisOption,
|
||||||
YAXisOption,
|
YAXisOption,
|
||||||
|
LineSeriesOption,
|
||||||
} from "echarts/types/dist/shared";
|
} from "echarts/types/dist/shared";
|
||||||
import type { PropertyValues } from "lit";
|
import type { PropertyValues } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { classMap } from "lit/directives/class-map";
|
import { classMap } from "lit/directives/class-map";
|
||||||
import { styleMap } from "lit/directives/style-map";
|
import { styleMap } from "lit/directives/style-map";
|
||||||
import { ensureArray } from "../../common/array/ensure-array";
|
|
||||||
import { getAllGraphColors } from "../../common/color/colors";
|
import { getAllGraphColors } from "../../common/color/colors";
|
||||||
import { fireEvent } from "../../common/dom/fire_event";
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
import { listenMediaQuery } from "../../common/dom/media_query";
|
import { listenMediaQuery } from "../../common/dom/media_query";
|
||||||
@@ -25,9 +24,10 @@ import type { Themes } from "../../data/ws-themes";
|
|||||||
import type { ECOption } from "../../resources/echarts";
|
import type { ECOption } from "../../resources/echarts";
|
||||||
import type { HomeAssistant } from "../../types";
|
import type { HomeAssistant } from "../../types";
|
||||||
import { isMac } from "../../util/is_mac";
|
import { isMac } from "../../util/is_mac";
|
||||||
import "../chips/ha-assist-chip";
|
|
||||||
import "../ha-icon-button";
|
import "../ha-icon-button";
|
||||||
import { formatTimeLabel } from "./axis-label";
|
import { formatTimeLabel } from "./axis-label";
|
||||||
|
import { ensureArray } from "../../common/array/ensure-array";
|
||||||
|
import "../chips/ha-assist-chip";
|
||||||
import { downSampleLineData } from "./down-sample";
|
import { downSampleLineData } from "./down-sample";
|
||||||
|
|
||||||
export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
|
export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
|
||||||
@@ -983,7 +983,7 @@ export class HaChartBase extends LitElement {
|
|||||||
.chart-controls ha-icon-button,
|
.chart-controls ha-icon-button,
|
||||||
.chart-controls ::slotted(ha-icon-button) {
|
.chart-controls ::slotted(ha-icon-button) {
|
||||||
background: var(--card-background-color);
|
background: var(--card-background-color);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
--mdc-icon-button-size: 32px;
|
--mdc-icon-button-size: 32px;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
border: 1px solid var(--divider-color);
|
border: 1px solid var(--divider-color);
|
||||||
@@ -1036,7 +1036,7 @@ export class HaChartBase extends LitElement {
|
|||||||
.chart-legend .bullet {
|
.chart-legend .bullet {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
display: block;
|
display: block;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
|
@@ -6,8 +6,6 @@ import { computeDomain } from "../../common/entity/compute_domain";
|
|||||||
import { stateColorProperties } from "../../common/entity/state_color";
|
import { stateColorProperties } from "../../common/entity/state_color";
|
||||||
import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
|
import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
|
||||||
import { computeCssValue } from "../../resources/css-variables";
|
import { computeCssValue } from "../../resources/css-variables";
|
||||||
import { computeStateDomain } from "../../common/entity/compute_state_domain";
|
|
||||||
import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
|
|
||||||
|
|
||||||
const DOMAIN_STATE_SHADES: Record<string, Record<string, number>> = {
|
const DOMAIN_STATE_SHADES: Record<string, Record<string, number>> = {
|
||||||
media_player: {
|
media_player: {
|
||||||
@@ -53,28 +51,6 @@ function computeTimelineStateColor(
|
|||||||
let colorIndex = 0;
|
let colorIndex = 0;
|
||||||
const stateColorMap = new Map<string, string>();
|
const stateColorMap = new Map<string, string>();
|
||||||
|
|
||||||
function computeTimelineEnumColor(
|
|
||||||
state: string,
|
|
||||||
computedStyles: CSSStyleDeclaration,
|
|
||||||
stateObj?: HassEntity
|
|
||||||
): string | undefined {
|
|
||||||
if (!stateObj) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
const domain = computeStateDomain(stateObj);
|
|
||||||
const states =
|
|
||||||
FIXED_DOMAIN_STATES[domain] ||
|
|
||||||
(domain === "sensor" &&
|
|
||||||
stateObj.attributes.device_class === "enum" &&
|
|
||||||
stateObj.attributes.options) ||
|
|
||||||
[];
|
|
||||||
const idx = states.indexOf(state);
|
|
||||||
if (idx === -1) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
return getGraphColorByIndex(idx, computedStyles);
|
|
||||||
}
|
|
||||||
|
|
||||||
function computeTimeLineGenericColor(
|
function computeTimeLineGenericColor(
|
||||||
state: string,
|
state: string,
|
||||||
computedStyles: CSSStyleDeclaration
|
computedStyles: CSSStyleDeclaration
|
||||||
@@ -95,7 +71,6 @@ export function computeTimelineColor(
|
|||||||
): string {
|
): string {
|
||||||
return (
|
return (
|
||||||
computeTimelineStateColor(state, computedStyles, stateObj) ||
|
computeTimelineStateColor(state, computedStyles, stateObj) ||
|
||||||
computeTimelineEnumColor(state, computedStyles, stateObj) ||
|
|
||||||
computeTimeLineGenericColor(state, computedStyles)
|
computeTimeLineGenericColor(state, computedStyles)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@@ -290,9 +290,7 @@ export class DialogDataTableSettings extends LitElement {
|
|||||||
ha-dialog {
|
ha-dialog {
|
||||||
--vertical-align-dialog: flex-start;
|
--vertical-align-dialog: flex-start;
|
||||||
--dialog-surface-margin-top: 250px;
|
--dialog-surface-margin-top: 250px;
|
||||||
--ha-dialog-border-radius: var(--ha-border-radius-4xl)
|
--ha-dialog-border-radius: 28px 28px 0 0;
|
||||||
var(--ha-border-radius-4xl) var(--ha-border-radius-square)
|
|
||||||
var(--ha-border-radius-square);
|
|
||||||
--mdc-dialog-min-height: calc(100% - 250px);
|
--mdc-dialog-min-height: calc(100% - 250px);
|
||||||
--mdc-dialog-max-height: calc(100% - 250px);
|
--mdc-dialog-max-height: calc(100% - 250px);
|
||||||
}
|
}
|
||||||
|
@@ -1053,7 +1053,7 @@ export class HaDataTable extends LitElement {
|
|||||||
|
|
||||||
.mdc-data-table {
|
.mdc-data-table {
|
||||||
background-color: var(--data-table-background-color);
|
background-color: var(--data-table-background-color);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--divider-color);
|
border-color: var(--divider-color);
|
||||||
|
@@ -4,11 +4,11 @@ import Vue from "vue";
|
|||||||
import DateRangePicker from "vue2-daterange-picker";
|
import DateRangePicker from "vue2-daterange-picker";
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
|
import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
|
||||||
import {
|
|
||||||
localizeMonths,
|
|
||||||
localizeWeekdays,
|
|
||||||
} from "../common/datetime/localize_date";
|
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
|
import {
|
||||||
|
localizeWeekdays,
|
||||||
|
localizeMonths,
|
||||||
|
} from "../common/datetime/localize_date";
|
||||||
import { mainWindow } from "../common/dom/get_main_window";
|
import { mainWindow } from "../common/dom/get_main_window";
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||||
@@ -177,7 +177,7 @@ class DateRangePickerElement extends WrappedElement {
|
|||||||
top: auto;
|
top: auto;
|
||||||
box-shadow: var(--ha-card-box-shadow, none);
|
box-shadow: var(--ha-card-box-shadow, none);
|
||||||
background-color: var(--card-background-color);
|
background-color: var(--card-background-color);
|
||||||
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
|
border-radius: var(--ha-card-border-radius, 12px);
|
||||||
border-width: var(--ha-card-border-width, 1px);
|
border-width: var(--ha-card-border-width, 1px);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(
|
border-color: var(
|
||||||
@@ -203,7 +203,7 @@ class DateRangePickerElement extends WrappedElement {
|
|||||||
.daterangepicker .calendar-table th {
|
.daterangepicker .calendar-table th {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
border-radius: var(--ha-border-radius-square);
|
border-radius: 0;
|
||||||
outline: none;
|
outline: none;
|
||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
@@ -225,13 +225,13 @@ class DateRangePickerElement extends WrappedElement {
|
|||||||
color: var(--text-primary-color);
|
color: var(--text-primary-color);
|
||||||
}
|
}
|
||||||
.daterangepicker td.start-date.end-date {
|
.daterangepicker td.start-date.end-date {
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.daterangepicker td.start-date {
|
.daterangepicker td.start-date {
|
||||||
border-radius: var(--ha-border-radius-circle) var(--ha-border-radius-square) var(--ha-border-radius-square) var(--ha-border-radius-circle);
|
border-radius: 50% 0 0 50%;
|
||||||
}
|
}
|
||||||
.daterangepicker td.end-date {
|
.daterangepicker td.end-date {
|
||||||
border-radius: var(--ha-border-radius-square) var(--ha-border-radius-circle) var(--ha-border-radius-circle) var(--ha-border-radius-square);
|
border-radius: 0 50% 50% 0;
|
||||||
}
|
}
|
||||||
.reportrange-text {
|
.reportrange-text {
|
||||||
background: none !important;
|
background: none !important;
|
||||||
@@ -265,7 +265,7 @@ class DateRangePickerElement extends WrappedElement {
|
|||||||
border: 1px solid var(--primary-color);
|
border: 1px solid var(--primary-color);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -321,10 +321,10 @@ class DateRangePickerElement extends WrappedElement {
|
|||||||
-webkit-transform: rotate(-45deg);
|
-webkit-transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
.daterangepicker td.start-date {
|
.daterangepicker td.start-date {
|
||||||
border-radius: var(--ha-border-radius-square) var(--ha-border-radius-circle) var(--ha-border-radius-circle) var(--ha-border-radius-square);
|
border-radius: 0 50% 50% 0;
|
||||||
}
|
}
|
||||||
.daterangepicker td.end-date {
|
.daterangepicker td.end-date {
|
||||||
border-radius: var(--ha-border-radius-circle) var(--ha-border-radius-square) var(--ha-border-radius-square) var(--ha-border-radius-circle);
|
border-radius: 50% 0 0 50%;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@@ -112,7 +112,7 @@ export class HaEntityToggle extends LitElement {
|
|||||||
if (!this.hass || !this.stateObj) {
|
if (!this.hass || !this.stateObj) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
forwardHaptic(this, "light");
|
forwardHaptic("light");
|
||||||
const stateDomain = computeStateDomain(this.stateObj);
|
const stateDomain = computeStateDomain(this.stateObj);
|
||||||
let serviceDomain;
|
let serviceDomain;
|
||||||
let service;
|
let service;
|
||||||
|
@@ -236,7 +236,7 @@ export class StateBadge extends LitElement {
|
|||||||
border-radius: var(--state-badge-with-media-image-border-radius, 8%);
|
border-radius: var(--state-badge-with-media-image-border-radius, 8%);
|
||||||
}
|
}
|
||||||
:host(.has-no-radius) {
|
:host(.has-no-radius) {
|
||||||
border-radius: var(--ha-border-radius-square);
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
:host(:focus) {
|
:host(:focus) {
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@@ -99,7 +99,7 @@ class HaAlert extends LitElement {
|
|||||||
opacity: 0.12;
|
opacity: 0.12;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
content: "";
|
content: "";
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
.icon.no-title {
|
.icon.no-title {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
|
@@ -1,24 +1,24 @@
|
|||||||
import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js";
|
|
||||||
import type { PropertyValues, TemplateResult } from "lit";
|
import type { PropertyValues, TemplateResult } from "lit";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, LitElement, html, nothing } from "lit";
|
||||||
|
import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js";
|
||||||
import { customElement, property, query, state } from "lit/decorators";
|
import { customElement, property, query, state } from "lit/decorators";
|
||||||
import { classMap } from "lit/directives/class-map";
|
import { classMap } from "lit/directives/class-map";
|
||||||
import { supportsFeature } from "../common/entity/supports-feature";
|
import type { HomeAssistant } from "../types";
|
||||||
import {
|
import {
|
||||||
|
type PipelineRunEvent,
|
||||||
runAssistPipeline,
|
runAssistPipeline,
|
||||||
type AssistPipeline,
|
type AssistPipeline,
|
||||||
type ConversationChatLogAssistantDelta,
|
type ConversationChatLogAssistantDelta,
|
||||||
type ConversationChatLogToolResultDelta,
|
type ConversationChatLogToolResultDelta,
|
||||||
type PipelineRunEvent,
|
|
||||||
} from "../data/assist_pipeline";
|
} from "../data/assist_pipeline";
|
||||||
|
import { supportsFeature } from "../common/entity/supports-feature";
|
||||||
import { ConversationEntityFeature } from "../data/conversation";
|
import { ConversationEntityFeature } from "../data/conversation";
|
||||||
import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
|
|
||||||
import type { HomeAssistant } from "../types";
|
|
||||||
import { AudioRecorder } from "../util/audio-recorder";
|
import { AudioRecorder } from "../util/audio-recorder";
|
||||||
import { documentationUrl } from "../util/documentation-url";
|
|
||||||
import "./ha-alert";
|
import "./ha-alert";
|
||||||
import "./ha-textfield";
|
import "./ha-textfield";
|
||||||
import type { HaTextField } from "./ha-textfield";
|
import type { HaTextField } from "./ha-textfield";
|
||||||
|
import { documentationUrl } from "../util/documentation-url";
|
||||||
|
import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
|
||||||
|
|
||||||
interface AssistMessage {
|
interface AssistMessage {
|
||||||
who: string;
|
who: string;
|
||||||
@@ -591,7 +591,7 @@ export class HaAssistChat extends LitElement {
|
|||||||
clear: both;
|
clear: both;
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border-radius: var(--ha-border-radius-xl);
|
border-radius: 15px;
|
||||||
}
|
}
|
||||||
.message:last-child {
|
.message:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
@@ -659,7 +659,7 @@ export class HaAssistChat extends LitElement {
|
|||||||
.double-bounce2 {
|
.double-bounce2 {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@@ -122,7 +122,7 @@ export class HaBadge extends LitElement {
|
|||||||
::slotted(img[slot="icon"]) {
|
::slotted(img[slot="icon"]) {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
|
@@ -46,7 +46,7 @@ export class HaBar extends LitElement {
|
|||||||
fill: var(--ha-bar-primary-color, var(--primary-color));
|
fill: var(--ha-bar-primary-color, var(--primary-color));
|
||||||
}
|
}
|
||||||
svg {
|
svg {
|
||||||
border-radius: var(--ha-bar-border-radius, var(--ha-border-radius-sm));
|
border-radius: var(--ha-bar-border-radius, 4px);
|
||||||
height: 12px;
|
height: 12px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@@ -337,9 +337,7 @@ export class HaBaseTimeInput extends LitElement {
|
|||||||
.time-input-wrap {
|
.time-input-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: var(--time-input-flex, unset);
|
flex: var(--time-input-flex, unset);
|
||||||
border-radius: var(--mdc-shape-small, var(--ha-border-radius-sm))
|
border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
|
||||||
var(--mdc-shape-small, var(--ha-border-radius-sm))
|
|
||||||
var(--ha-border-radius-square) var(--ha-border-radius-square);
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
|
@@ -42,8 +42,8 @@ export class HaBottomSheet extends LitElement {
|
|||||||
static styles = css`
|
static styles = css`
|
||||||
wa-drawer {
|
wa-drawer {
|
||||||
--wa-color-surface-raised: var(
|
--wa-color-surface-raised: var(
|
||||||
--ha-bottom-sheet-surface-background,
|
--ha-dialog-surface-background,
|
||||||
var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
|
var(--mdc-theme-surface, #fff)
|
||||||
);
|
);
|
||||||
--spacing: 0;
|
--spacing: 0;
|
||||||
--size: auto;
|
--size: auto;
|
||||||
@@ -51,14 +51,8 @@ export class HaBottomSheet extends LitElement {
|
|||||||
--hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
|
--hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
|
||||||
}
|
}
|
||||||
wa-drawer::part(dialog) {
|
wa-drawer::part(dialog) {
|
||||||
border-top-left-radius: var(
|
border-top-left-radius: var(--ha-border-radius-lg);
|
||||||
--ha-bottom-sheet-border-radius,
|
border-top-right-radius: var(--ha-border-radius-lg);
|
||||||
var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
|
|
||||||
);
|
|
||||||
border-top-right-radius: var(
|
|
||||||
--ha-bottom-sheet-border-radius,
|
|
||||||
var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
|
|
||||||
);
|
|
||||||
max-height: 90vh;
|
max-height: 90vh;
|
||||||
padding-bottom: var(--safe-area-inset-bottom);
|
padding-bottom: var(--safe-area-inset-bottom);
|
||||||
padding-left: var(--safe-area-inset-left);
|
padding-left: var(--safe-area-inset-left);
|
||||||
|
@@ -41,7 +41,8 @@ export class HaButton extends Button {
|
|||||||
return [
|
return [
|
||||||
Button.styles,
|
Button.styles,
|
||||||
css`
|
css`
|
||||||
:host {
|
.button {
|
||||||
|
/* set theme vars */
|
||||||
--wa-form-control-padding-inline: 16px;
|
--wa-form-control-padding-inline: 16px;
|
||||||
--wa-font-weight-action: var(--ha-font-weight-medium);
|
--wa-font-weight-action: var(--ha-font-weight-medium);
|
||||||
--wa-form-control-border-radius: var(
|
--wa-form-control-border-radius: var(
|
||||||
@@ -53,8 +54,7 @@ export class HaButton extends Button {
|
|||||||
--ha-button-height,
|
--ha-button-height,
|
||||||
var(--button-height, 40px)
|
var(--button-height, 40px)
|
||||||
);
|
);
|
||||||
}
|
|
||||||
.button {
|
|
||||||
font-size: var(--ha-font-size-m);
|
font-size: var(--ha-font-size-m);
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
|
||||||
@@ -223,12 +223,6 @@ export class HaButton extends Button {
|
|||||||
.button.has-end {
|
.button.has-end {
|
||||||
padding-inline-end: 8px;
|
padding-inline-end: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
padding: var(--ha-space-1) 0;
|
|
||||||
}
|
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@@ -17,7 +17,7 @@ export class HaCard extends LitElement {
|
|||||||
backdrop-filter: var(--ha-card-backdrop-filter, none);
|
backdrop-filter: var(--ha-card-backdrop-filter, none);
|
||||||
box-shadow: var(--ha-card-box-shadow, none);
|
box-shadow: var(--ha-card-box-shadow, none);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
|
border-radius: var(--ha-card-border-radius, 12px);
|
||||||
border-width: var(--ha-card-border-width, 1px);
|
border-width: var(--ha-card-border-width, 1px);
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0));
|
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0));
|
||||||
|
@@ -45,7 +45,7 @@ export class HaCodeEditorCompletionItems extends LitElement {
|
|||||||
margin: 0 3px;
|
margin: 0 3px;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
background-color: var(--markdown-code-background-color, none);
|
background-color: var(--markdown-code-background-color, none);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: var(--ha-border-radius-sm, 4px);
|
||||||
line-height: var(--ha-line-height-condensed);
|
line-height: var(--ha-line-height-condensed);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@@ -5,20 +5,19 @@ import type {
|
|||||||
CompletionResult,
|
CompletionResult,
|
||||||
CompletionSource,
|
CompletionSource,
|
||||||
} from "@codemirror/autocomplete";
|
} from "@codemirror/autocomplete";
|
||||||
import { redo, redoDepth, undo, undoDepth } from "@codemirror/commands";
|
import { undo, undoDepth, redo, redoDepth } from "@codemirror/commands";
|
||||||
import type { Extension, TransactionSpec } from "@codemirror/state";
|
import type { Extension, TransactionSpec } from "@codemirror/state";
|
||||||
import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
|
import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
|
||||||
import { placeholder } from "@codemirror/view";
|
|
||||||
import {
|
import {
|
||||||
mdiArrowCollapse,
|
|
||||||
mdiArrowExpand,
|
mdiArrowExpand,
|
||||||
|
mdiArrowCollapse,
|
||||||
mdiContentCopy,
|
mdiContentCopy,
|
||||||
mdiRedo,
|
|
||||||
mdiUndo,
|
mdiUndo,
|
||||||
|
mdiRedo,
|
||||||
} from "@mdi/js";
|
} from "@mdi/js";
|
||||||
import type { HassEntities } from "home-assistant-js-websocket";
|
import type { HassEntities } from "home-assistant-js-websocket";
|
||||||
import type { PropertyValues } from "lit";
|
import type { PropertyValues } from "lit";
|
||||||
import { css, html, ReactiveElement, render } from "lit";
|
import { css, ReactiveElement, html, render } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import memoizeOne from "memoize-one";
|
import memoizeOne from "memoize-one";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
@@ -82,8 +81,6 @@ export class HaCodeEditor extends ReactiveElement {
|
|||||||
@property({ type: Boolean, attribute: "has-toolbar" })
|
@property({ type: Boolean, attribute: "has-toolbar" })
|
||||||
public hasToolbar = true;
|
public hasToolbar = true;
|
||||||
|
|
||||||
@property({ type: String }) public placeholder?: string;
|
|
||||||
|
|
||||||
@state() private _value = "";
|
@state() private _value = "";
|
||||||
|
|
||||||
@state() private _isFullscreen = false;
|
@state() private _isFullscreen = false;
|
||||||
@@ -267,7 +264,6 @@ export class HaCodeEditor extends ReactiveElement {
|
|||||||
this._loadedCodeMirror.foldingCompartment.of(
|
this._loadedCodeMirror.foldingCompartment.of(
|
||||||
this._getFoldingExtensions()
|
this._getFoldingExtensions()
|
||||||
),
|
),
|
||||||
...(this.placeholder ? [placeholder(this.placeholder)] : []),
|
|
||||||
];
|
];
|
||||||
|
|
||||||
if (!this.readOnly) {
|
if (!this.readOnly) {
|
||||||
@@ -778,7 +774,7 @@ export class HaCodeEditor extends ReactiveElement {
|
|||||||
right: 8px !important;
|
right: 8px !important;
|
||||||
bottom: 8px !important;
|
bottom: 8px !important;
|
||||||
z-index: 6;
|
z-index: 6;
|
||||||
border-radius: var(--ha-border-radius-lg) !important;
|
border-radius: 12px !important;
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
background-color: var(
|
background-color: var(
|
||||||
@@ -801,7 +797,7 @@ export class HaCodeEditor extends ReactiveElement {
|
|||||||
:host(.fullscreen) .cm-editor {
|
:host(.fullscreen) .cm-editor {
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
max-height: 100% !important;
|
max-height: 100% !important;
|
||||||
border-radius: var(--ha-border-radius-square) !important;
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(:not(.hasToolbar)) .code-editor-toolbar {
|
:host(:not(.hasToolbar)) .code-editor-toolbar {
|
||||||
|
@@ -155,7 +155,7 @@ export class HaColorPicker extends LitElement {
|
|||||||
display: block;
|
display: block;
|
||||||
background-color: var(--circle-color, var(--divider-color));
|
background-color: var(--circle-color, var(--divider-color));
|
||||||
border: 1px solid var(--outline-color);
|
border: 1px solid var(--outline-color);
|
||||||
border-radius: var(--ha-border-radius-pill);
|
border-radius: 10px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@@ -32,7 +32,7 @@ export class HaControlButton extends LitElement {
|
|||||||
--control-button-icon-color: var(--primary-text-color);
|
--control-button-icon-color: var(--primary-text-color);
|
||||||
--control-button-background-color: var(--disabled-color);
|
--control-button-background-color: var(--disabled-color);
|
||||||
--control-button-background-opacity: 0.2;
|
--control-button-background-opacity: 0.2;
|
||||||
--control-button-border-radius: var(--ha-border-radius-md);
|
--control-button-border-radius: 10px;
|
||||||
--control-button-padding: 8px;
|
--control-button-padding: 8px;
|
||||||
--mdc-icon-size: 20px;
|
--mdc-icon-size: 20px;
|
||||||
--ha-ripple-color: var(--secondary-text-color);
|
--ha-ripple-color: var(--secondary-text-color);
|
||||||
|
@@ -187,7 +187,7 @@ export class HaControlNumberButton extends LitElement {
|
|||||||
--control-number-buttons-focus-color: var(--secondary-text-color);
|
--control-number-buttons-focus-color: var(--secondary-text-color);
|
||||||
--control-number-buttons-background-color: var(--disabled-color);
|
--control-number-buttons-background-color: var(--disabled-color);
|
||||||
--control-number-buttons-background-opacity: 0.2;
|
--control-number-buttons-background-opacity: 0.2;
|
||||||
--control-number-buttons-border-radius: var(--ha-border-radius-md);
|
--control-number-buttons-border-radius: 10px;
|
||||||
--mdc-icon-size: 16px;
|
--mdc-icon-size: 16px;
|
||||||
height: var(--feature-height);
|
height: var(--feature-height);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@@ -174,7 +174,7 @@ export class HaControlSelectMenu extends SelectBase {
|
|||||||
--control-select-menu-text-color: var(--primary-text-color);
|
--control-select-menu-text-color: var(--primary-text-color);
|
||||||
--control-select-menu-background-color: var(--disabled-color);
|
--control-select-menu-background-color: var(--disabled-color);
|
||||||
--control-select-menu-background-opacity: 0.2;
|
--control-select-menu-background-opacity: 0.2;
|
||||||
--control-select-menu-border-radius: var(--ha-border-radius-lg);
|
--control-select-menu-border-radius: 14px;
|
||||||
--control-select-menu-height: 48px;
|
--control-select-menu-height: 48px;
|
||||||
--control-select-menu-padding: 6px 10px;
|
--control-select-menu-padding: 6px 10px;
|
||||||
--mdc-icon-size: 20px;
|
--mdc-icon-size: 20px;
|
||||||
|
@@ -380,7 +380,7 @@ export class HaControlSlider extends LitElement {
|
|||||||
--control-slider-background: var(--disabled-color);
|
--control-slider-background: var(--disabled-color);
|
||||||
--control-slider-background-opacity: 0.2;
|
--control-slider-background-opacity: 0.2;
|
||||||
--control-slider-thickness: 40px;
|
--control-slider-thickness: 40px;
|
||||||
--control-slider-border-radius: var(--ha-border-radius-md);
|
--control-slider-border-radius: 10px;
|
||||||
--control-slider-tooltip-font-size: var(--ha-font-size-m);
|
--control-slider-tooltip-font-size: var(--ha-font-size-m);
|
||||||
height: var(--control-slider-thickness);
|
height: var(--control-slider-thickness);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -403,7 +403,7 @@ export class HaControlSlider extends LitElement {
|
|||||||
background-color: var(--clear-background-color);
|
background-color: var(--clear-background-color);
|
||||||
color: var(--primary-text-color);
|
color: var(--primary-text-color);
|
||||||
font-size: var(--control-slider-tooltip-font-size);
|
font-size: var(--control-slider-tooltip-font-size);
|
||||||
border-radius: var(--ha-border-radius-lg);
|
border-radius: 0.8em;
|
||||||
padding: 0.2em 0.4em;
|
padding: 0.2em 0.4em;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
@@ -157,7 +157,7 @@ export class HaControlSwitch extends LitElement {
|
|||||||
--control-switch-off-color: var(--disabled-color);
|
--control-switch-off-color: var(--disabled-color);
|
||||||
--control-switch-background-opacity: 0.2;
|
--control-switch-background-opacity: 0.2;
|
||||||
--control-switch-thickness: 40px;
|
--control-switch-thickness: 40px;
|
||||||
--control-switch-border-radius: var(--ha-border-radius-lg);
|
--control-switch-border-radius: 12px;
|
||||||
--control-switch-padding: 4px;
|
--control-switch-padding: 4px;
|
||||||
--mdc-icon-size: 20px;
|
--mdc-icon-size: 20px;
|
||||||
height: var(--control-switch-thickness);
|
height: var(--control-switch-thickness);
|
||||||
|
@@ -100,7 +100,7 @@ const CURRENCIES = [
|
|||||||
"MMK",
|
"MMK",
|
||||||
"MNT",
|
"MNT",
|
||||||
"MOP",
|
"MOP",
|
||||||
"MRU",
|
"MRO",
|
||||||
"MUR",
|
"MUR",
|
||||||
"MVR",
|
"MVR",
|
||||||
"MWK",
|
"MWK",
|
||||||
|
@@ -123,10 +123,7 @@ export class HaDialog extends DialogBase {
|
|||||||
margin-top: var(--dialog-surface-margin-top);
|
margin-top: var(--dialog-surface-margin-top);
|
||||||
min-width: var(--mdc-dialog-min-width, 100vw);
|
min-width: var(--mdc-dialog-min-width, 100vw);
|
||||||
min-height: var(--mdc-dialog-min-height, auto);
|
min-height: var(--mdc-dialog-min-height, auto);
|
||||||
border-radius: var(
|
border-radius: var(--ha-dialog-border-radius, 24px);
|
||||||
--ha-dialog-border-radius,
|
|
||||||
var(--ha-border-radius-3xl)
|
|
||||||
);
|
|
||||||
-webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
|
-webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
|
||||||
backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
|
backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
|
||||||
background: var(
|
background: var(
|
||||||
@@ -142,9 +139,7 @@ export class HaDialog extends DialogBase {
|
|||||||
@media all and (max-width: 450px), all and (max-height: 500px) {
|
@media all and (max-width: 450px), all and (max-height: 500px) {
|
||||||
.mdc-dialog .mdc-dialog__surface {
|
.mdc-dialog .mdc-dialog__surface {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
min-height: 100svh;
|
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
max-height: 100svh;
|
|
||||||
padding-top: var(--safe-area-inset-top);
|
padding-top: var(--safe-area-inset-top);
|
||||||
padding-bottom: var(--safe-area-inset-bottom);
|
padding-bottom: var(--safe-area-inset-bottom);
|
||||||
padding-left: var(--safe-area-inset-left);
|
padding-left: var(--safe-area-inset-left);
|
||||||
|
@@ -144,7 +144,7 @@ export class HaExpansionPanel extends LitElement {
|
|||||||
.top {
|
.top {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
|
border-radius: var(--ha-card-border-radius, 12px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.top.expanded {
|
.top.expanded {
|
||||||
@@ -161,7 +161,7 @@ export class HaExpansionPanel extends LitElement {
|
|||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: var(--outline-color);
|
border-color: var(--outline-color);
|
||||||
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
|
border-radius: var(--ha-card-border-radius, 12px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-icon {
|
.summary-icon {
|
||||||
|
@@ -242,7 +242,7 @@ export class HaFileUpload extends LitElement {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
border: solid 1px
|
border: solid 1px
|
||||||
var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
|
var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
|
||||||
border-radius: var(--mdc-shape-small, var(--ha-border-radius-sm));
|
border-radius: var(--mdc-shape-small, 4px);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.row {
|
.row {
|
||||||
|
@@ -4,7 +4,6 @@ import type { CSSResultGroup, PropertyValues } from "lit";
|
|||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
import { deepEqual } from "../common/util/deep-equal";
|
|
||||||
import type { Blueprints } from "../data/blueprint";
|
import type { Blueprints } from "../data/blueprint";
|
||||||
import { fetchBlueprints } from "../data/blueprint";
|
import { fetchBlueprints } from "../data/blueprint";
|
||||||
import type { RelatedResult } from "../data/search";
|
import type { RelatedResult } from "../data/search";
|
||||||
@@ -15,6 +14,7 @@ import "./ha-check-list-item";
|
|||||||
import "./ha-expansion-panel";
|
import "./ha-expansion-panel";
|
||||||
import "./ha-icon-button";
|
import "./ha-icon-button";
|
||||||
import "./ha-list";
|
import "./ha-list";
|
||||||
|
import { deepEqual } from "../common/util/deep-equal";
|
||||||
|
|
||||||
@customElement("ha-filter-blueprints")
|
@customElement("ha-filter-blueprints")
|
||||||
export class HaFilterBlueprints extends LitElement {
|
export class HaFilterBlueprints extends LitElement {
|
||||||
@@ -189,7 +189,7 @@ export class HaFilterBlueprints extends LitElement {
|
|||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
--ha-card-border-radius: var(--ha-border-radius-square);
|
--ha-card-border-radius: 0;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
@@ -207,7 +207,7 @@ export class HaFilterBlueprints extends LitElement {
|
|||||||
margin-inline-end: 0;
|
margin-inline-end: 0;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
font-size: var(--ha-font-size-xs);
|
font-size: var(--ha-font-size-xs);
|
||||||
font-weight: var(--ha-font-weight-normal);
|
font-weight: var(--ha-font-weight-normal);
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
@@ -12,7 +12,6 @@ import type { CSSResultGroup } from "lit";
|
|||||||
import { LitElement, css, html, nothing } from "lit";
|
import { LitElement, css, html, nothing } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
import { stopPropagation } from "../common/dom/stop_propagation";
|
|
||||||
import type { CategoryRegistryEntry } from "../data/category_registry";
|
import type { CategoryRegistryEntry } from "../data/category_registry";
|
||||||
import {
|
import {
|
||||||
createCategoryRegistryEntry,
|
createCategoryRegistryEntry,
|
||||||
@@ -25,11 +24,12 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
|
|||||||
import { showCategoryRegistryDetailDialog } from "../panels/config/category/show-dialog-category-registry-detail";
|
import { showCategoryRegistryDetailDialog } from "../panels/config/category/show-dialog-category-registry-detail";
|
||||||
import { haStyleScrollbar } from "../resources/styles";
|
import { haStyleScrollbar } from "../resources/styles";
|
||||||
import type { HomeAssistant } from "../types";
|
import type { HomeAssistant } from "../types";
|
||||||
import "./ha-button-menu";
|
|
||||||
import "./ha-expansion-panel";
|
import "./ha-expansion-panel";
|
||||||
import "./ha-icon";
|
import "./ha-icon";
|
||||||
import "./ha-list";
|
import "./ha-button-menu";
|
||||||
import "./ha-list-item";
|
import "./ha-list-item";
|
||||||
|
import "./ha-list";
|
||||||
|
import { stopPropagation } from "../common/dom/stop_propagation";
|
||||||
|
|
||||||
@customElement("ha-filter-categories")
|
@customElement("ha-filter-categories")
|
||||||
export class HaFilterCategories extends SubscribeMixin(LitElement) {
|
export class HaFilterCategories extends SubscribeMixin(LitElement) {
|
||||||
@@ -284,7 +284,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
|
|||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
--ha-card-border-radius: var(--ha-border-radius-square);
|
--ha-card-border-radius: 0;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
@@ -302,7 +302,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
|
|||||||
margin-inline-end: 0;
|
margin-inline-end: 0;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
font-size: var(--ha-font-size-xs);
|
font-size: var(--ha-font-size-xs);
|
||||||
font-weight: var(--ha-font-weight-normal);
|
font-weight: var(--ha-font-weight-normal);
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
@@ -216,7 +216,7 @@ export class HaFilterDevices extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
--ha-card-border-radius: var(--ha-border-radius-square);
|
--ha-card-border-radius: 0;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
@@ -234,7 +234,7 @@ export class HaFilterDevices extends LitElement {
|
|||||||
margin-inline-end: 0;
|
margin-inline-end: 0;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
font-size: var(--ha-font-size-xs);
|
font-size: var(--ha-font-size-xs);
|
||||||
font-weight: var(--ha-font-weight-normal);
|
font-weight: var(--ha-font-weight-normal);
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
@@ -170,7 +170,7 @@ export class HaFilterDomains extends LitElement {
|
|||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
--ha-card-border-radius: var(--ha-border-radius-square);
|
--ha-card-border-radius: 0;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
@@ -188,7 +188,7 @@ export class HaFilterDomains extends LitElement {
|
|||||||
margin-inline-end: initial;
|
margin-inline-end: initial;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
font-size: var(--ha-font-size-xs);
|
font-size: var(--ha-font-size-xs);
|
||||||
font-weight: var(--ha-font-weight-normal);
|
font-weight: var(--ha-font-weight-normal);
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
@@ -7,7 +7,6 @@ import { fireEvent } from "../common/dom/fire_event";
|
|||||||
import { computeStateDomain } from "../common/entity/compute_state_domain";
|
import { computeStateDomain } from "../common/entity/compute_state_domain";
|
||||||
import { computeStateName } from "../common/entity/compute_state_name";
|
import { computeStateName } from "../common/entity/compute_state_name";
|
||||||
import { stringCompare } from "../common/string/compare";
|
import { stringCompare } from "../common/string/compare";
|
||||||
import { deepEqual } from "../common/util/deep-equal";
|
|
||||||
import type { RelatedResult } from "../data/search";
|
import type { RelatedResult } from "../data/search";
|
||||||
import { findRelated } from "../data/search";
|
import { findRelated } from "../data/search";
|
||||||
import { haStyleScrollbar } from "../resources/styles";
|
import { haStyleScrollbar } from "../resources/styles";
|
||||||
@@ -18,6 +17,7 @@ import "./ha-expansion-panel";
|
|||||||
import "./ha-list";
|
import "./ha-list";
|
||||||
import "./ha-state-icon";
|
import "./ha-state-icon";
|
||||||
import "./search-input-outlined";
|
import "./search-input-outlined";
|
||||||
|
import { deepEqual } from "../common/util/deep-equal";
|
||||||
|
|
||||||
@customElement("ha-filter-entities")
|
@customElement("ha-filter-entities")
|
||||||
export class HaFilterEntities extends LitElement {
|
export class HaFilterEntities extends LitElement {
|
||||||
@@ -231,7 +231,7 @@ export class HaFilterEntities extends LitElement {
|
|||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
--ha-card-border-radius: var(--ha-border-radius-square);
|
--ha-card-border-radius: 0;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
@@ -249,7 +249,7 @@ export class HaFilterEntities extends LitElement {
|
|||||||
margin-inline-end: 0;
|
margin-inline-end: 0;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
font-size: var(--ha-font-size-xs);
|
font-size: var(--ha-font-size-xs);
|
||||||
font-weight: var(--ha-font-weight-normal);
|
font-weight: var(--ha-font-weight-normal);
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
@@ -7,7 +7,6 @@ import { repeat } from "lit/directives/repeat";
|
|||||||
import memoizeOne from "memoize-one";
|
import memoizeOne from "memoize-one";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
import { computeRTL } from "../common/util/compute_rtl";
|
import { computeRTL } from "../common/util/compute_rtl";
|
||||||
import { deepEqual } from "../common/util/deep-equal";
|
|
||||||
import { getFloorAreaLookup } from "../data/floor_registry";
|
import { getFloorAreaLookup } from "../data/floor_registry";
|
||||||
import type { RelatedResult } from "../data/search";
|
import type { RelatedResult } from "../data/search";
|
||||||
import { findRelated } from "../data/search";
|
import { findRelated } from "../data/search";
|
||||||
@@ -21,6 +20,7 @@ import "./ha-icon-button";
|
|||||||
import "./ha-list";
|
import "./ha-list";
|
||||||
import "./ha-svg-icon";
|
import "./ha-svg-icon";
|
||||||
import "./ha-tree-indicator";
|
import "./ha-tree-indicator";
|
||||||
|
import { deepEqual } from "../common/util/deep-equal";
|
||||||
|
|
||||||
@customElement("ha-filter-floor-areas")
|
@customElement("ha-filter-floor-areas")
|
||||||
export class HaFilterFloorAreas extends LitElement {
|
export class HaFilterFloorAreas extends LitElement {
|
||||||
@@ -281,7 +281,7 @@ export class HaFilterFloorAreas extends LitElement {
|
|||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
--ha-card-border-radius: var(--ha-border-radius-square);
|
--ha-card-border-radius: 0;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
@@ -299,7 +299,7 @@ export class HaFilterFloorAreas extends LitElement {
|
|||||||
margin-inline-end: 0;
|
margin-inline-end: 0;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
font-size: var(--ha-font-size-xs);
|
font-size: var(--ha-font-size-xs);
|
||||||
font-weight: var(--ha-font-weight-normal);
|
font-weight: var(--ha-font-weight-normal);
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
@@ -8,7 +8,7 @@ import { fireEvent } from "../common/dom/fire_event";
|
|||||||
import { stringCompare } from "../common/string/compare";
|
import { stringCompare } from "../common/string/compare";
|
||||||
import type { LocalizeFunc } from "../common/translations/localize";
|
import type { LocalizeFunc } from "../common/translations/localize";
|
||||||
import type { IntegrationManifest } from "../data/integration";
|
import type { IntegrationManifest } from "../data/integration";
|
||||||
import { domainToName, fetchIntegrationManifests } from "../data/integration";
|
import { fetchIntegrationManifests, domainToName } from "../data/integration";
|
||||||
import { haStyleScrollbar } from "../resources/styles";
|
import { haStyleScrollbar } from "../resources/styles";
|
||||||
import type { HomeAssistant } from "../types";
|
import type { HomeAssistant } from "../types";
|
||||||
import "./ha-check-list-item";
|
import "./ha-check-list-item";
|
||||||
@@ -188,7 +188,7 @@ export class HaFilterIntegrations extends LitElement {
|
|||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
--ha-card-border-radius: var(--ha-border-radius-square);
|
--ha-card-border-radius: 0;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
@@ -206,7 +206,7 @@ export class HaFilterIntegrations extends LitElement {
|
|||||||
margin-inline-end: 0;
|
margin-inline-end: 0;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
font-size: var(--ha-font-size-xs);
|
font-size: var(--ha-font-size-xs);
|
||||||
font-weight: var(--ha-font-weight-normal);
|
font-weight: var(--ha-font-weight-normal);
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
@@ -214,7 +214,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
|
|||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
--ha-card-border-radius: var(--ha-border-radius-square);
|
--ha-card-border-radius: 0;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
@@ -232,7 +232,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
|
|||||||
margin-inline-end: 0;
|
margin-inline-end: 0;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
font-size: var(--ha-font-size-xs);
|
font-size: var(--ha-font-size-xs);
|
||||||
font-weight: var(--ha-font-weight-normal);
|
font-weight: var(--ha-font-weight-normal);
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
@@ -158,7 +158,7 @@ export class HaFilterStates extends LitElement {
|
|||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
--ha-card-border-radius: var(--ha-border-radius-square);
|
--ha-card-border-radius: 0;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
}
|
}
|
||||||
.header {
|
.header {
|
||||||
@@ -176,7 +176,7 @@ export class HaFilterStates extends LitElement {
|
|||||||
margin-inline-end: 0;
|
margin-inline-end: 0;
|
||||||
min-width: 16px;
|
min-width: 16px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
font-size: var(--ha-font-size-xs);
|
font-size: var(--ha-font-size-xs);
|
||||||
font-weight: var(--ha-font-weight-normal);
|
font-weight: var(--ha-font-weight-normal);
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
|
@@ -120,8 +120,8 @@ export class HaFormExpandable extends LitElement implements HaFormElement {
|
|||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
display: block;
|
display: block;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 6px;
|
||||||
--ha-card-border-radius: var(--ha-border-radius-md);
|
--ha-card-border-radius: 6px;
|
||||||
}
|
}
|
||||||
ha-svg-icon,
|
ha-svg-icon,
|
||||||
ha-icon {
|
ha-icon {
|
||||||
|
@@ -264,7 +264,7 @@ export class HaGridSizeEditor extends LitElement {
|
|||||||
left: 0;
|
left: 0;
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 8px;
|
||||||
height: calc(var(--rows, 1) * 30px);
|
height: calc(var(--rows, 1) * 30px);
|
||||||
width: calc(var(--columns, 1) * 100% / var(--total-columns, 12));
|
width: calc(var(--columns, 1) * 100% / var(--total-columns, 12));
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@@ -321,7 +321,7 @@ class HaHLSPlayer extends LitElement {
|
|||||||
} else if (data.response.code >= 400) {
|
} else if (data.response.code >= 400) {
|
||||||
error += " (Stream never started)";
|
error += " (Stream never started)";
|
||||||
} else {
|
} else {
|
||||||
error += ` (${data.response.code})`;
|
error += " (" + data.response.code + ")";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._setRetryableError(error);
|
this._setRetryableError(error);
|
||||||
|
@@ -394,7 +394,7 @@ class HaHsColorPicker extends LitElement {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
svg {
|
svg {
|
||||||
|
@@ -15,7 +15,7 @@ export class HaIconButtonGroup extends LitElement {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
border-radius: var(--ha-border-radius-4xl);
|
border-radius: 28px;
|
||||||
background-color: rgba(139, 145, 151, 0.1);
|
background-color: rgba(139, 145, 151, 0.1);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
@@ -18,7 +18,7 @@ export class HaIconButtonToggle extends HaIconButton {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 180ms ease-in-out;
|
transition: opacity 180ms ease-in-out;
|
||||||
background-color: var(--primary-text-color);
|
background-color: var(--primary-text-color);
|
||||||
border-radius: var(--ha-border-radius-2xl);
|
border-radius: 20px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
content: "";
|
content: "";
|
||||||
|
@@ -32,10 +32,7 @@ export class HaIconOverflowMenu extends LitElement {
|
|||||||
|
|
||||||
@property({ type: Boolean }) public narrow = false;
|
@property({ type: Boolean }) public narrow = false;
|
||||||
|
|
||||||
protected render(): TemplateResult | typeof nothing {
|
protected render(): TemplateResult {
|
||||||
if (this.items.length === 0) {
|
|
||||||
return nothing;
|
|
||||||
}
|
|
||||||
return html`
|
return html`
|
||||||
${this.narrow
|
${this.narrow
|
||||||
? html` <!-- Collapsed representation for small screens -->
|
? html` <!-- Collapsed representation for small screens -->
|
||||||
|
@@ -394,7 +394,7 @@ export class HaItemDisplayEditor extends LitElement {
|
|||||||
}
|
}
|
||||||
ha-md-list-item.drag-selected {
|
ha-md-list-item.drag-selected {
|
||||||
--md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
|
--md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 8px;
|
||||||
outline: solid;
|
outline: solid;
|
||||||
outline-color: rgba(var(--rgb-accent-color), 0.6);
|
outline-color: rgba(var(--rgb-accent-color), 0.6);
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
|
@@ -89,7 +89,7 @@ class HaLabelBadge extends LitElement {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: var(--ha-label-badge-color, var(--primary-color));
|
background-color: var(--ha-label-badge-color, var(--primary-color));
|
||||||
color: var(--ha-label-badge-label-color, white);
|
color: var(--ha-label-badge-label-color, white);
|
||||||
border-radius: var(--ha-border-radius-lg);
|
border-radius: 1em;
|
||||||
padding: 9% 16% 8% 16%; /* mostly apitalized text, not much descenders => bit more top margin */
|
padding: 9% 16% 8% 16%; /* mostly apitalized text, not much descenders => bit more top margin */
|
||||||
font-weight: var(--ha-font-weight-medium);
|
font-weight: var(--ha-font-weight-medium);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@@ -39,7 +39,7 @@ class HaLabel extends LitElement {
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
border-radius: var(--ha-border-radius-xl);
|
border-radius: 18px;
|
||||||
color: var(--ha-label-text-color);
|
color: var(--ha-label-text-color);
|
||||||
--mdc-icon-size: 12px;
|
--mdc-icon-size: 12px;
|
||||||
text-wrap: nowrap;
|
text-wrap: nowrap;
|
||||||
@@ -73,7 +73,7 @@ class HaLabel extends LitElement {
|
|||||||
:host([dense]) {
|
:host([dense]) {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
:host([dense]) ::slotted([slot="icon"]) {
|
:host([dense]) ::slotted([slot="icon"]) {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
@@ -91,7 +91,7 @@ class HaLabeledSlider extends LitElement {
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-image: var(--ha-slider-background);
|
background-image: var(--ha-slider-background);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -61,7 +61,7 @@ export class HaMarkdown extends LitElement {
|
|||||||
code,
|
code,
|
||||||
pre {
|
pre {
|
||||||
background-color: var(--markdown-code-background-color, none);
|
background-color: var(--markdown-code-background-color, none);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
svg {
|
svg {
|
||||||
background-color: var(--markdown-svg-background-color, none);
|
background-color: var(--markdown-svg-background-color, none);
|
||||||
|
@@ -137,7 +137,7 @@ class HaMenuButton extends LitElement {
|
|||||||
right: 7px;
|
right: 7px;
|
||||||
inset-inline-end: 7px;
|
inset-inline-end: 7px;
|
||||||
inset-inline-start: initial;
|
inset-inline-start: initial;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
border: 2px solid var(--app-header-background-color);
|
border: 2px solid var(--app-header-background-color);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@@ -5,9 +5,9 @@ import { ifDefined } from "lit/directives/if-defined";
|
|||||||
import type { PageNavigation } from "../layouts/hass-tabs-subpage";
|
import type { PageNavigation } from "../layouts/hass-tabs-subpage";
|
||||||
import type { HomeAssistant } from "../types";
|
import type { HomeAssistant } from "../types";
|
||||||
import "./ha-icon-next";
|
import "./ha-icon-next";
|
||||||
|
import "./ha-svg-icon";
|
||||||
import "./ha-md-list";
|
import "./ha-md-list";
|
||||||
import "./ha-md-list-item";
|
import "./ha-md-list-item";
|
||||||
import "./ha-svg-icon";
|
|
||||||
|
|
||||||
@customElement("ha-navigation-list")
|
@customElement("ha-navigation-list")
|
||||||
class HaNavigationList extends LitElement {
|
class HaNavigationList extends LitElement {
|
||||||
@@ -74,7 +74,7 @@ class HaNavigationList extends LitElement {
|
|||||||
padding: 8px;
|
padding: 8px;
|
||||||
}
|
}
|
||||||
.icon-background {
|
.icon-background {
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.icon-background ha-svg-icon {
|
.icon-background ha-svg-icon {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@@ -96,7 +96,7 @@ export class HaPickerField extends LitElement {
|
|||||||
}
|
}
|
||||||
ha-combo-box-item {
|
ha-combo-box-item {
|
||||||
background-color: var(--mdc-text-field-fill-color, whitesmoke);
|
background-color: var(--mdc-text-field-fill-color, whitesmoke);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
border-end-end-radius: 0;
|
border-end-end-radius: 0;
|
||||||
border-end-start-radius: 0;
|
border-end-start-radius: 0;
|
||||||
--md-list-item-one-line-container-height: 56px;
|
--md-list-item-one-line-container-height: 56px;
|
||||||
|
@@ -354,7 +354,7 @@ class HaQrScanner extends LitElement {
|
|||||||
}
|
}
|
||||||
canvas {
|
canvas {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: var(--ha-border-radius-xl);
|
border-radius: 16px;
|
||||||
}
|
}
|
||||||
#canvas-container {
|
#canvas-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -367,7 +367,7 @@ class HaQrScanner extends LitElement {
|
|||||||
inset-inline-start: initial;
|
inset-inline-start: initial;
|
||||||
background: #727272b2;
|
background: #727272b2;
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@@ -1,5 +1,6 @@
|
|||||||
import { css, html, LitElement } from "lit";
|
import { css, html, LitElement } from "lit";
|
||||||
import { customElement, query, state } from "lit/decorators";
|
import { customElement, query, state } from "lit/decorators";
|
||||||
|
import { styleMap } from "lit/directives/style-map";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
import { BOTTOM_SHEET_ANIMATION_DURATION_MS } from "./ha-bottom-sheet";
|
import { BOTTOM_SHEET_ANIMATION_DURATION_MS } from "./ha-bottom-sheet";
|
||||||
|
|
||||||
@@ -36,14 +37,13 @@ export class HaResizableBottomSheet extends LitElement {
|
|||||||
return html`<dialog
|
return html`<dialog
|
||||||
open
|
open
|
||||||
@transitionend=${this._handleTransitionEnd}
|
@transitionend=${this._handleTransitionEnd}
|
||||||
style=${`
|
style=${styleMap({
|
||||||
--height: ${this._dialogViewportHeight}vh;
|
height: this._dialogViewportHeight
|
||||||
--height: ${this._dialogViewportHeight}dvh;
|
? `${this._dialogViewportHeight}vh`
|
||||||
--max-height: ${this._dialogMaxViewpointHeight}vh;
|
: "auto",
|
||||||
--max-height: ${this._dialogMaxViewpointHeight}dvh;
|
maxHeight: `${this._dialogMaxViewpointHeight}vh`,
|
||||||
--min-height: ${this._dialogMinViewpointHeight}vh;
|
minHeight: `${this._dialogMinViewpointHeight}vh`,
|
||||||
--min-height: ${this._dialogMinViewpointHeight}dvh;
|
})}
|
||||||
`}
|
|
||||||
>
|
>
|
||||||
<div class="handle-wrapper">
|
<div class="handle-wrapper">
|
||||||
<div
|
<div
|
||||||
@@ -204,7 +204,7 @@ export class HaResizableBottomSheet extends LitElement {
|
|||||||
}
|
}
|
||||||
.handle-wrapper .handle::after {
|
.handle-wrapper .handle::after {
|
||||||
content: "";
|
content: "";
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 8px;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: var(--divider-color, #e0e0e0);
|
background: var(--divider-color, #e0e0e0);
|
||||||
width: 80px;
|
width: 80px;
|
||||||
@@ -213,14 +213,12 @@ export class HaResizableBottomSheet extends LitElement {
|
|||||||
cursor: grabbing;
|
cursor: grabbing;
|
||||||
}
|
}
|
||||||
dialog {
|
dialog {
|
||||||
height: var(--height, auto);
|
height: auto;
|
||||||
max-height: var(--max-height, 70vh);
|
max-height: 70vh;
|
||||||
max-height: var(--max-height, 70dvh);
|
min-height: 30vh;
|
||||||
min-height: var(--min-height, 30vh);
|
|
||||||
min-height: var(--min-height, 30dvh);
|
|
||||||
background-color: var(
|
background-color: var(
|
||||||
--ha-bottom-sheet-surface-background,
|
--ha-dialog-surface-background,
|
||||||
var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
|
var(--mdc-theme-surface, #fff)
|
||||||
);
|
);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -241,12 +239,12 @@ export class HaResizableBottomSheet extends LitElement {
|
|||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
|
box-shadow: 0px -8px 16px rgba(0, 0, 0, 0.2);
|
||||||
border-top-left-radius: var(
|
border-top-left-radius: var(
|
||||||
--ha-bottom-sheet-border-radius,
|
--ha-dialog-border-radius,
|
||||||
var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
|
var(--ha-border-radius-2xl)
|
||||||
);
|
);
|
||||||
border-top-right-radius: var(
|
border-top-right-radius: var(
|
||||||
--ha-bottom-sheet-border-radius,
|
--ha-dialog-border-radius,
|
||||||
var(--ha-dialog-border-radius, var(--ha-border-radius-2xl))
|
var(--ha-border-radius-2xl)
|
||||||
);
|
);
|
||||||
transform: translateY(100%);
|
transform: translateY(100%);
|
||||||
transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease;
|
transition: transform ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms ease;
|
||||||
@@ -256,6 +254,7 @@ export class HaResizableBottomSheet extends LitElement {
|
|||||||
border-bottom-width: 0;
|
border-bottom-width: 0;
|
||||||
border-style: var(--ha-bottom-sheet-border-style);
|
border-style: var(--ha-bottom-sheet-border-style);
|
||||||
border-color: var(--ha-bottom-sheet-border-color);
|
border-color: var(--ha-bottom-sheet-border-color);
|
||||||
|
margin-bottom: var(--safe-area-inset-bottom);
|
||||||
margin-left: var(--safe-area-inset-left);
|
margin-left: var(--safe-area-inset-left);
|
||||||
margin-right: var(--safe-area-inset-right);
|
margin-right: var(--safe-area-inset-right);
|
||||||
}
|
}
|
||||||
|
@@ -106,7 +106,7 @@ class HaSegmentedBar extends LitElement {
|
|||||||
.bar {
|
.bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: var(--ha-bar-border-radius, var(--ha-border-radius-sm));
|
border-radius: var(--ha-bar-border-radius, 4px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
margin: 2px 0;
|
margin: 2px 0;
|
||||||
@@ -139,7 +139,7 @@ class HaSegmentedBar extends LitElement {
|
|||||||
.legend li .bullet {
|
.legend li .bullet {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
border-radius: var(--ha-border-radius-circle);
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
.spacer {
|
.spacer {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
@@ -1,13 +1,13 @@
|
|||||||
import { css, html, LitElement, nothing } from "lit";
|
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
|
import "./ha-radio";
|
||||||
import { classMap } from "lit/directives/class-map";
|
import { classMap } from "lit/directives/class-map";
|
||||||
import { styleMap } from "lit/directives/style-map";
|
import { styleMap } from "lit/directives/style-map";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
|
||||||
import { stopPropagation } from "../common/dom/stop_propagation";
|
|
||||||
import { computeRTL } from "../common/util/compute_rtl";
|
|
||||||
import type { HomeAssistant } from "../types";
|
|
||||||
import "./ha-radio";
|
|
||||||
import type { HaRadio } from "./ha-radio";
|
import type { HaRadio } from "./ha-radio";
|
||||||
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
|
import type { HomeAssistant } from "../types";
|
||||||
|
import { computeRTL } from "../common/util/compute_rtl";
|
||||||
|
import { stopPropagation } from "../common/dom/stop_propagation";
|
||||||
|
|
||||||
interface SelectBoxOptionImage {
|
interface SelectBoxOptionImage {
|
||||||
src: string;
|
src: string;
|
||||||
@@ -122,7 +122,7 @@ export class HaSelectBox extends LitElement {
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
border: 1px solid var(--divider-color);
|
border: 1px solid var(--divider-color);
|
||||||
border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
|
border-radius: var(--ha-card-border-radius, 12px);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@@ -329,11 +329,11 @@ export class HaMediaSelector extends LitElement {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
ha-card .image {
|
ha-card .image {
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
.folder {
|
.folder {
|
||||||
--mdc-icon-size: 24px;
|
--mdc-icon-size: 24px;
|
||||||
|
@@ -301,7 +301,7 @@ export class HaObjectSelector extends LitElement {
|
|||||||
}
|
}
|
||||||
ha-md-list-item {
|
ha-md-list-item {
|
||||||
border: 1px solid var(--divider-color);
|
border: 1px solid var(--divider-color);
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 8px;
|
||||||
--ha-md-list-item-gap: 0;
|
--ha-md-list-item-gap: 0;
|
||||||
--md-list-item-top-space: 0;
|
--md-list-item-top-space: 0;
|
||||||
--md-list-item-bottom-space: 0;
|
--md-list-item-bottom-space: 0;
|
||||||
|
@@ -19,8 +19,6 @@ export class HaTemplateSelector extends LitElement {
|
|||||||
|
|
||||||
@property() public helper?: string;
|
@property() public helper?: string;
|
||||||
|
|
||||||
@property() public placeholder?: any;
|
|
||||||
|
|
||||||
@property({ type: Boolean }) public disabled = false;
|
@property({ type: Boolean }) public disabled = false;
|
||||||
|
|
||||||
@property({ type: Boolean }) public required = true;
|
@property({ type: Boolean }) public required = true;
|
||||||
@@ -57,7 +55,6 @@ export class HaTemplateSelector extends LitElement {
|
|||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.value=${this.value}
|
.value=${this.value}
|
||||||
.readOnly=${this.disabled}
|
.readOnly=${this.disabled}
|
||||||
.placeholder=${this.placeholder || "{{ ... }}"}
|
|
||||||
autofocus
|
autofocus
|
||||||
autocomplete-entities
|
autocomplete-entities
|
||||||
autocomplete-icons
|
autocomplete-icons
|
||||||
|
@@ -13,7 +13,6 @@ import { fireEvent } from "../common/dom/fire_event";
|
|||||||
import { computeDomain } from "../common/entity/compute_domain";
|
import { computeDomain } from "../common/entity/compute_domain";
|
||||||
import { computeObjectId } from "../common/entity/compute_object_id";
|
import { computeObjectId } from "../common/entity/compute_object_id";
|
||||||
import { supportsFeature } from "../common/entity/supports-feature";
|
import { supportsFeature } from "../common/entity/supports-feature";
|
||||||
import { hasTemplate } from "../common/string/has-template";
|
|
||||||
import {
|
import {
|
||||||
fetchIntegrationManifest,
|
fetchIntegrationManifest,
|
||||||
type IntegrationManifest,
|
type IntegrationManifest,
|
||||||
@@ -35,10 +34,11 @@ import "./ha-checkbox";
|
|||||||
import "./ha-icon-button";
|
import "./ha-icon-button";
|
||||||
import "./ha-selector/ha-selector";
|
import "./ha-selector/ha-selector";
|
||||||
import "./ha-service-picker";
|
import "./ha-service-picker";
|
||||||
import "./ha-service-section-icon";
|
|
||||||
import "./ha-settings-row";
|
import "./ha-settings-row";
|
||||||
import "./ha-yaml-editor";
|
import "./ha-yaml-editor";
|
||||||
import type { HaYamlEditor } from "./ha-yaml-editor";
|
import type { HaYamlEditor } from "./ha-yaml-editor";
|
||||||
|
import "./ha-service-section-icon";
|
||||||
|
import { hasTemplate } from "../common/string/has-template";
|
||||||
|
|
||||||
const attributeFilter = (values: any[], attribute: any) => {
|
const attributeFilter = (values: any[], attribute: any) => {
|
||||||
if (typeof attribute === "object") {
|
if (typeof attribute === "object") {
|
||||||
@@ -999,7 +999,7 @@ export class HaServiceControl extends LitElement {
|
|||||||
direction: ltr;
|
direction: ltr;
|
||||||
}
|
}
|
||||||
ha-expansion-panel {
|
ha-expansion-panel {
|
||||||
--ha-card-border-radius: var(--ha-border-radius-square);
|
--ha-card-border-radius: 0;
|
||||||
--expansion-panel-summary-padding: 0 16px;
|
--expansion-panel-summary-padding: 0 16px;
|
||||||
--expansion-panel-content-padding: 0;
|
--expansion-panel-content-padding: 0;
|
||||||
}
|
}
|
||||||
|
@@ -784,7 +784,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
--md-list-item-one-line-container-height: 40px;
|
--md-list-item-one-line-container-height: 40px;
|
||||||
--md-list-item-top-space: 0;
|
--md-list-item-top-space: 0;
|
||||||
--md-list-item-bottom-space: 0;
|
--md-list-item-bottom-space: 0;
|
||||||
@@ -807,7 +807,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
|
|||||||
--md-ripple-hover-color: var(--sidebar-selected-icon-color);
|
--md-ripple-hover-color: var(--sidebar-selected-icon-color);
|
||||||
}
|
}
|
||||||
ha-md-list-item.selected::before {
|
ha-md-list-item.selected::before {
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -857,7 +857,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 8px;
|
min-width: 8px;
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 10px;
|
||||||
font-weight: var(--ha-font-weight-normal);
|
font-weight: var(--ha-font-weight-normal);
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
@@ -869,7 +869,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
left: 26px;
|
left: 26px;
|
||||||
border-radius: var(--ha-border-radius-md);
|
border-radius: 10px;
|
||||||
font-size: 0.65em;
|
font-size: 0.65em;
|
||||||
line-height: var(--ha-line-height-expanded);
|
line-height: var(--ha-line-height-expanded);
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
@@ -902,7 +902,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
|
|||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 2px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
color: var(--sidebar-background-color);
|
color: var(--sidebar-background-color);
|
||||||
background-color: var(--sidebar-text-color);
|
background-color: var(--sidebar-text-color);
|
||||||
|
@@ -19,6 +19,7 @@ export class HaSlider extends Slider {
|
|||||||
Slider.styles,
|
Slider.styles,
|
||||||
css`
|
css`
|
||||||
:host {
|
:host {
|
||||||
|
--wa-form-control-activated-color: var(--ha-control-color);
|
||||||
--track-size: var(--ha-slider-track-size, 4px);
|
--track-size: var(--ha-slider-track-size, 4px);
|
||||||
--marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
|
--marker-height: calc(var(--ha-slider-track-size, 4px) / 2);
|
||||||
--marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
|
--marker-width: calc(var(--ha-slider-track-size, 4px) / 2);
|
||||||
@@ -43,10 +44,7 @@ export class HaSlider extends Slider {
|
|||||||
var(--ha-line-height-condensed)
|
var(--ha-line-height-condensed)
|
||||||
);
|
);
|
||||||
--wa-tooltip-padding: 8px;
|
--wa-tooltip-padding: 8px;
|
||||||
--wa-tooltip-border-radius: var(
|
--wa-tooltip-border-radius: var(--ha-tooltip-border-radius, 4px);
|
||||||
--ha-tooltip-border-radius,
|
|
||||||
var(--ha-border-radius-sm)
|
|
||||||
);
|
|
||||||
--wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
|
--wa-tooltip-arrow-size: var(--ha-tooltip-arrow-size, 8px);
|
||||||
--wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
|
--wa-z-index-tooltip: var(--ha-tooltip-z-index, 1000);
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
@@ -56,7 +54,6 @@ export class HaSlider extends Slider {
|
|||||||
|
|
||||||
#thumb {
|
#thumb {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: var(--ha-slider-thumb-color, var(--primary-color));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#slider:focus-visible:not(.disabled) #thumb,
|
#slider:focus-visible:not(.disabled) #thumb,
|
||||||
@@ -65,21 +62,14 @@ export class HaSlider extends Slider {
|
|||||||
outline: var(--wa-focus-ring);
|
outline: var(--wa-focus-ring);
|
||||||
}
|
}
|
||||||
|
|
||||||
#indicator {
|
|
||||||
background-color: var(
|
|
||||||
--ha-slider-indicator-color,
|
|
||||||
var(--primary-color)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([size="medium"]) {
|
:host([size="medium"]) {
|
||||||
--thumb-width: 20px;
|
--thumb-width: var(--ha-font-size-l, 1.25em);
|
||||||
--thumb-height: 20px;
|
--thumb-height: var(--ha-font-size-l, 1.25em);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([size="small"]) {
|
:host([size="small"]) {
|
||||||
--thumb-width: 16px;
|
--thumb-width: var(--ha-font-size-m, 1em);
|
||||||
--thumb-height: 16px;
|
--thumb-height: var(--ha-font-size-m, 1em);
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
];
|
];
|
||||||
|
@@ -112,12 +112,12 @@ export class HaSortable extends LitElement {
|
|||||||
.sortable-ghost {
|
.sortable-ghost {
|
||||||
box-shadow: 0 0 0 2px var(--primary-color);
|
box-shadow: 0 0 0 2px var(--primary-color);
|
||||||
background: rgba(var(--rgb-primary-color), 0.25);
|
background: rgba(var(--rgb-primary-color), 0.25);
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sortable-drag {
|
.sortable-drag {
|
||||||
border-radius: var(--ha-border-radius-sm);
|
border-radius: 4px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background: var(--card-background-color);
|
background: var(--card-background-color);
|
||||||
box-shadow: 0px 4px 8px 3px #00000026;
|
box-shadow: 0px 4px 8px 3px #00000026;
|
||||||
|
@@ -15,7 +15,7 @@ export class HaSwitch extends SwitchBase {
|
|||||||
super.firstUpdated();
|
super.firstUpdated();
|
||||||
this.addEventListener("change", () => {
|
this.addEventListener("change", () => {
|
||||||
if (this.haptic) {
|
if (this.haptic) {
|
||||||
forwardHaptic(this, "light");
|
forwardHaptic("light");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user