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

20230329.0 (#15971)

Browse Source
This commit is contained in:
Bram Kragten 2023-03-29 18:09:10 +02:00 committed by GitHub
commit a4e36d6145
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
241 changed files with 9612 additions and 4975 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.github/workflows/cast_deployment.yaml vendored
View File

@ -22,7 +22,7 @@ jobs:
url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
steps:
- name: Check out files from GitHub
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
with:
ref: dev
@ -58,7 +58,7 @@ jobs:
url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
steps:
- name: Check out files from GitHub
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
with:
ref: master

8
.github/workflows/ci.yaml vendored
View File

@ -25,7 +25,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Check out files from GitHub
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
- name: Set up Node ${{ env.NODE_VERSION }}
uses: actions/setup-node@v3.6.0
with:
@ -48,7 +48,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Check out files from GitHub
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
- name: Set up Node ${{ env.NODE_VERSION }}
uses: actions/setup-node@v3.6.0
with:
@ -66,7 +66,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Check out files from GitHub
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
- name: Set up Node ${{ env.NODE_VERSION }}
uses: actions/setup-node@v3.6.0
with:
@ -84,7 +84,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Check out files from GitHub
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
- name: Set up Node ${{ env.NODE_VERSION }}
uses: actions/setup-node@v3.6.0
with:

2
.github/workflows/codeql-analysis.yml vendored
View File

@ -23,7 +23,7 @@ jobs:
steps:
- name: Checkout repository
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
with:
# We must fetch at least the immediate parents so that if this is
# a pull request then we can checkout the head.

4
.github/workflows/demo_deployment.yaml vendored
View File

@ -23,7 +23,7 @@ jobs:
url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
steps:
- name: Check out files from GitHub
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
with:
ref: dev
@ -59,7 +59,7 @@ jobs:
url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
steps:
- name: Check out files from GitHub
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
with:
ref: master

2
.github/workflows/design_deployment.yaml vendored
View File

@ -17,7 +17,7 @@ jobs:
url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
steps:
- name: Check out files from GitHub
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
- name: Set up Node ${{ env.NODE_VERSION }}
uses: actions/setup-node@v3.6.0

2
.github/workflows/design_preview.yaml vendored
View File

@ -22,7 +22,7 @@ jobs:
if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
steps:
- name: Check out files from GitHub
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
- name: Set up Node ${{ env.NODE_VERSION }}
uses: actions/setup-node@v3.6.0

2
.github/workflows/nightly.yaml vendored
View File

@ -21,7 +21,7 @@ jobs:
contents: write
steps:
- name: Checkout the repository
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
- name: Set up Python ${{ env.PYTHON_VERSION }}
uses: actions/setup-python@v4

2
.github/workflows/release.yaml vendored
View File

@ -24,7 +24,7 @@ jobs:
contents: write # Required to upload release assets
steps:
- name: Checkout the repository
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
- name: Verify version
uses: home-assistant/actions/helpers/verify-version@master

2
.github/workflows/stale.yml vendored
View File

@ -10,7 +10,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: 90 days stale policy
uses: actions/stale@v7.0.0
uses: actions/stale@v8.0.0
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
days-before-stale: 90

2
.github/workflows/translations.yaml vendored
View File

@ -16,7 +16,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Checkout the repository
uses: actions/checkout@v3.3.0
uses: actions/checkout@v3.5.0
- name: Upload Translations
run: |

516
.yarn/releases/yarn-3.4.1.cjs → .yarn/releases/yarn-3.5.0.cjs vendored
View File

File diff suppressed because one or more lines are too long

2
.yarnrc.yml
View File

@ -8,4 +8,4 @@ plugins:
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
spec: "@yarnpkg/plugin-interactive-tools"
yarnPath: .yarn/releases/yarn-3.4.1.cjs
yarnPath: .yarn/releases/yarn-3.5.0.cjs

39
build-scripts/bundle.js
View File

@ -2,6 +2,15 @@ const path = require("path");
const env = require("./env.js");
const paths = require("./paths.js");
// GitHub base URL to use for production source maps
// Nightly builds use the commit SHA, otherwise assumes there is a tag that matches the version
module.exports.sourceMapURL = () => {
const ref = env.version().endsWith("dev")
? process.env.GITHUB_SHA || "dev"
: env.version();
return `https://raw.githubusercontent.com/home-assistant/frontend/${ref}`;
};
// Files from NPM Packages that should not be imported
// eslint-disable-next-line unused-imports/no-unused-vars
module.exports.ignorePackages = ({ latestBuild }) => [
@ -53,7 +62,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
...defineOverlay,
});
const htmlMinifierOptions = {
module.exports.htmlMinifierOptions = {
caseSensitive: true,
collapseWhitespace: true,
conservativeCollapse: true,
@ -61,17 +70,18 @@ const htmlMinifierOptions = {
removeComments: true,
removeRedundantAttributes: true,
minifyCSS: {
level: 0,
compatibility: "*,-properties.zeroUnits",
},
};
module.exports.terserOptions = (latestBuild) => ({
module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({
safari10: !latestBuild,
ecma: latestBuild ? undefined : 5,
output: { comments: false },
format: { comments: false },
sourceMap: !isTestBuild,
});
module.exports.babelOptions = ({ latestBuild, isProdBuild }) => ({
module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
babelrc: false,
compact: false,
presets: [
@ -125,7 +135,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild }) => ({
"@polymer/polymer/lib/utils/html-tag": ["html"],
},
strictCSS: true,
htmlMinifier: htmlMinifierOptions,
htmlMinifier: module.exports.htmlMinifierOptions,
failOnError: true, // we can turn this off in case of false positives
},
],
@ -135,8 +145,11 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild }) => ({
/node_modules[\\/]core-js/,
/node_modules[\\/]webpack[\\/]buildin/,
],
sourceMaps: !isTestBuild,
});
const nameSuffix = (latestBuild) => (latestBuild ? "-latest" : "-es5");
const outputPath = (outputRoot, latestBuild) =>
path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
@ -159,14 +172,17 @@ BundleConfig {
latestBuild: boolean,
// If we're doing a stats build (create nice chunk names)
isStatsBuild: boolean,
// If it's just a test build in CI, skip time on source map generation
isTestBuild: boolean,
// Names of entrypoints that should not be hashed
dontHash: Set<string>
}
*/
module.exports.config = {
app({ isProdBuild, latestBuild, isStatsBuild, isWDS }) {
app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild, isWDS }) {
return {
name: "app" + nameSuffix(latestBuild),
entry: {
service_worker: "./src/entrypoints/service_worker.ts",
app: "./src/entrypoints/app.ts",
@ -180,12 +196,14 @@ module.exports.config = {
isProdBuild,
latestBuild,
isStatsBuild,
isTestBuild,
isWDS,
};
},
demo({ isProdBuild, latestBuild, isStatsBuild }) {
return {
name: "demo" + nameSuffix(latestBuild),
entry: {
main: path.resolve(paths.demo_dir, "src/entrypoint.ts"),
},
@ -215,6 +233,7 @@ module.exports.config = {
}
return {
name: "cast" + nameSuffix(latestBuild),
entry,
outputPath: outputPath(paths.cast_output_root, latestBuild),
publicPath: publicPath(latestBuild),
@ -226,8 +245,9 @@ module.exports.config = {
};
},
hassio({ isProdBuild, latestBuild }) {
hassio({ isProdBuild, latestBuild, isStatsBuild, isTestBuild }) {
return {
name: "supervisor" + nameSuffix(latestBuild),
entry: {
entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
},
@ -235,6 +255,8 @@ module.exports.config = {
publicPath: publicPath(latestBuild, paths.hassio_publicPath),
isProdBuild,
latestBuild,
isStatsBuild,
isTestBuild,
isHassioBuild: true,
defineOverlay: {
__SUPERVISOR__: true,
@ -244,6 +266,7 @@ module.exports.config = {
gallery({ isProdBuild, latestBuild }) {
return {
name: "gallery" + nameSuffix(latestBuild),
entry: {
entrypoint: path.resolve(paths.gallery_dir, "src/entrypoint.js"),
},

2
build-scripts/env.js
View File

@ -17,7 +17,7 @@ module.exports = {
isStatsBuild() {
return process.env.STATS === "1";
},
isTest() {
isTestBuild() {
return process.env.IS_TEST === "true";
},
isNetlify() {

5
build-scripts/gulp/app.js
View File

@ -1,8 +1,7 @@
// Run HA develop mode
const gulp = require("gulp");
const env = require("../env");
require("./clean.js");
require("./translations.js");
require("./locale-data.js");
@ -50,7 +49,7 @@ gulp.task(
"copy-static-app",
env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
// Don't compress running tests
...(env.isTest() ? [] : ["compress-app"]),
...(env.isTestBuild() ? [] : ["compress-app"]),
gulp.parallel(
"gen-pages-prod",
"gen-index-app-prod",

47
build-scripts/gulp/entry-html.js
View File

@ -3,9 +3,10 @@ const gulp = require("gulp");
const fs = require("fs-extra");
const path = require("path");
const template = require("lodash.template");
const minify = require("html-minifier").minify;
const { minify } = require("html-minifier-terser");
const paths = require("../paths.js");
const env = require("../env.js");
const { htmlMinifierOptions, terserOptions } = require("../bundle.js");
const templatePath = (tpl) =>
path.resolve(paths.polymer_dir, "src/html/", `${tpl}.html.template`);
@ -39,10 +40,12 @@ const renderGalleryTemplate = (pth, data = {}) =>
const minifyHtml = (content) =>
minify(content, {
collapseWhitespace: true,
minifyJS: true,
minifyCSS: true,
removeComments: true,
...htmlMinifierOptions,
conservativeCollapse: false,
minifyJS: terserOptions({
latestBuild: false, // Shared scripts should be ES5
isTestBuild: true, // Don't need source maps
}),
});
const PAGES = ["onboarding", "authorize"];
@ -63,7 +66,7 @@ gulp.task("gen-pages-dev", (done) => {
done();
});
gulp.task("gen-pages-prod", (done) => {
gulp.task("gen-pages-prod", async () => {
const latestManifest = require(path.resolve(
paths.app_output_latest,
"manifest.json"
@ -73,19 +76,23 @@ gulp.task("gen-pages-prod", (done) => {
"manifest.json"
));
const minifiedHTML = [];
for (const page of PAGES) {
const content = renderTemplate(page, {
latestPageJS: latestManifest[`${page}.js`],
es5PageJS: es5Manifest[`${page}.js`],
});
fs.outputFileSync(
path.resolve(paths.app_output_root, `${page}.html`),
minifyHtml(content)
minifiedHTML.push(
minifyHtml(content).then((minified) =>
fs.outputFileSync(
path.resolve(paths.app_output_root, `${page}.html`),
minified
)
)
);
}
done();
await Promise.all(minifiedHTML);
});
gulp.task("gen-index-app-dev", (done) => {
@ -118,7 +125,7 @@ gulp.task("gen-index-app-dev", (done) => {
done();
});
gulp.task("gen-index-app-prod", (done) => {
gulp.task("gen-index-app-prod", async () => {
const latestManifest = require(path.resolve(
paths.app_output_latest,
"manifest.json"
@ -136,13 +143,15 @@ gulp.task("gen-index-app-prod", (done) => {
es5CoreJS: es5Manifest["core.js"],
es5CustomPanelJS: es5Manifest["custom-panel.js"],
});
const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");
const minified = (await minifyHtml(content)).replace(
/#THEMEC/g,
"{{ theme_color }}"
);
fs.outputFileSync(
path.resolve(paths.app_output_root, "index.html"),
minified
);
done();
});
gulp.task("gen-index-cast-dev", (done) => {
@ -244,7 +253,7 @@ gulp.task("gen-index-demo-dev", (done) => {
done();
});
gulp.task("gen-index-demo-prod", (done) => {
gulp.task("gen-index-demo-prod", async () => {
const latestManifest = require(path.resolve(
paths.demo_output_latest,
"manifest.json"
@ -258,13 +267,12 @@ gulp.task("gen-index-demo-prod", (done) => {
es5DemoJS: es5Manifest["main.js"],
});
const minified = minifyHtml(content);
const minified = await minifyHtml(content);
fs.outputFileSync(
path.resolve(paths.demo_output_root, "index.html"),
minified
);
done();
});
gulp.task("gen-index-gallery-dev", (done) => {
@ -279,7 +287,7 @@ gulp.task("gen-index-gallery-dev", (done) => {
done();
});
gulp.task("gen-index-gallery-prod", (done) => {
gulp.task("gen-index-gallery-prod", async () => {
const latestManifest = require(path.resolve(
paths.gallery_output_latest,
"manifest.json"
@ -287,13 +295,12 @@ gulp.task("gen-index-gallery-prod", (done) => {
const content = renderGalleryTemplate("index", {
latestGalleryJS: latestManifest["entrypoint.js"],
});
const minified = minifyHtml(content);
const minified = await minifyHtml(content);
fs.outputFileSync(
path.resolve(paths.gallery_output_root, "index.html"),
minified
);
done();
});
gulp.task("gen-index-hassio-dev", async () => {

2
build-scripts/gulp/gallery.js
View File

@ -20,7 +20,7 @@ require("./rollup.js");
gulp.task("gather-gallery-pages", async function gatherPages() {
const pageDir = path.resolve(paths.gallery_dir, "src/pages");
const files = glob.sync(path.resolve(pageDir, "**/*"));
const files = await glob(path.resolve(pageDir, "**/*"));
const galleryBuild = path.resolve(paths.gallery_dir, "build");
fs.mkdirSync(galleryBuild, { recursive: true });

4
build-scripts/gulp/hassio.js
View File

@ -1,7 +1,5 @@
const gulp = require("gulp");
const env = require("../env");
require("./clean.js");
require("./gen-icons-json.js");
require("./webpack.js");
@ -43,6 +41,6 @@ gulp.task(
env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
"gen-index-hassio-prod",
...// Don't compress running tests
(env.isTest() ? [] : ["compress-hassio"])
(env.isTestBuild() ? [] : ["compress-hassio"])
)
);

5
build-scripts/gulp/webpack.js
View File

@ -5,6 +5,7 @@ const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server");
const log = require("fancy-log");
const path = require("path");
const env = require("../env");
const paths = require("../paths");
const {
createAppConfig,
@ -104,6 +105,8 @@ gulp.task("webpack-prod-app", () =>
prodBuild(
bothBuilds(createAppConfig, {
isProdBuild: true,
isStatsBuild: env.isStatsBuild(),
isTestBuild: env.isTestBuild(),
})
)
);
@ -161,6 +164,8 @@ gulp.task("webpack-prod-hassio", () =>
prodBuild(
bothBuilds(createHassioConfig, {
isProdBuild: true,
isStatsBuild: env.isStatsBuild(),
isTestBuild: env.isTestBuild(),
})
)
);

18
build-scripts/rollup.js
View File

@ -39,7 +39,7 @@ const createRollupConfig = ({
inputOptions: {
input: entry,
// Some entry points contain no JavaScript. This setting silences a warning about that.
// https://rollupjs.org/guide/en/#preserveentrysignatures
// https://rollupjs.org/configuration-options/#preserveentrysignatures
preserveEntrySignatures: false,
plugins: [
ignore({
@ -76,7 +76,7 @@ const createRollupConfig = ({
}),
!isWDS && worker(),
!isWDS && dontHashPlugin({ dontHash }),
!isWDS && isProdBuild && terser(bundle.terserOptions(latestBuild)),
!isWDS && isProdBuild && terser(bundle.terserOptions({ latestBuild })),
!isWDS &&
isStatsBuild &&
visualizer({
@ -90,20 +90,20 @@ const createRollupConfig = ({
* @type { import("rollup").OutputOptions }
*/
outputOptions: {
// https://rollupjs.org/guide/en/#outputdir
// https://rollupjs.org/configuration-options/#output-dir
dir: outputPath,
// https://rollupjs.org/guide/en/#outputformat
// https://rollupjs.org/configuration-options/#output-format
format: latestBuild ? "es" : "systemjs",
// https://rollupjs.org/guide/en/#outputexternallivebindings
// https://rollupjs.org/configuration-options/#output-externallivebindings
externalLiveBindings: false,
// https://rollupjs.org/guide/en/#outputentryfilenames
// https://rollupjs.org/guide/en/#outputchunkfilenames
// https://rollupjs.org/guide/en/#outputassetfilenames
// https://rollupjs.org/configuration-options/#output-entryfilenames
// https://rollupjs.org/configuration-options/#output-chunkfilenames
// https://rollupjs.org/configuration-options/#output-assetfilenames
entryFileNames:
isProdBuild && !isStatsBuild ? "[name]-[hash].js" : "[name].js",
chunkFileNames: isProdBuild && !isStatsBuild ? "c.[hash].js" : "[name].js",
assetFileNames: isProdBuild && !isStatsBuild ? "a.[hash].js" : "[name].js",
// https://rollupjs.org/guide/en/#outputsourcemap
// https://rollupjs.org/configuration-options/#output-sourcemap
sourcemap: isProdBuild ? true : "inline",
},
});

57
build-scripts/webpack.js
View File

@ -22,6 +22,7 @@ class LogStartCompilePlugin {
}
const createWebpackConfig = ({
name,
entry,
outputPath,
publicPath,
@ -29,6 +30,7 @@ const createWebpackConfig = ({
isProdBuild,
latestBuild,
isStatsBuild,
isTestBuild,
isHassioBuild,
dontHash,
}) => {
@ -37,10 +39,16 @@ const createWebpackConfig = ({
}
const ignorePackages = bundle.ignorePackages({ latestBuild });
return {
name,
mode: isProdBuild ? "production" : "development",
target: ["web", latestBuild ? "es2017" : "es5"],
devtool: isProdBuild
? "cheap-module-source-map"
// For tests/CI, source maps are skipped to gain build speed
// For production, generate source maps for accurate stack traces without source code
// For development, generate "cheap" versions that can map to original line numbers
devtool: isTestBuild
? false
: isProdBuild
? "nosources-source-map"
: "eval-cheap-module-source-map",
entry,
node: false,
@ -51,7 +59,7 @@ const createWebpackConfig = ({
use: {
loader: "babel-loader",
options: {
...bundle.babelOptions({ latestBuild, isProdBuild }),
...bundle.babelOptions({ latestBuild, isProdBuild, isTestBuild }),
cacheDirectory: !isProdBuild,
cacheCompression: false,
},
@ -68,7 +76,7 @@ const createWebpackConfig = ({
new TerserPlugin({
parallel: true,
extractComments: true,
terserOptions: bundle.terserOptions(latestBuild),
terserOptions: bundle.terserOptions({ latestBuild, isTestBuild }),
}),
],
moduleIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
@ -153,6 +161,22 @@ const createWebpackConfig = ({
publicPath,
// To silence warning in worker plugin
globalObject: "self",
// Since production source maps don't include sources, we need to point to them elsewhere
// For dependencies, just provide the path (no source in browser)
// Otherwise, point to the raw code on GitHub for browser to load
devtoolModuleFilenameTemplate:
!isTestBuild && isProdBuild
? (info) => {
const sourcePath = info.resourcePath.replace(/^\.\//, "");
if (
sourcePath.startsWith("node_modules") ||
sourcePath.startsWith("webpack")
) {
return `no-source/${sourcePath}`;
}
return `${bundle.sourceMapURL()}/${sourcePath}`;
}
: undefined,
},
experiments: {
topLevelAwait: true,
@ -160,9 +184,14 @@ const createWebpackConfig = ({
};
};
const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
const createAppConfig = ({
isProdBuild,
latestBuild,
isStatsBuild,
isTestBuild,
}) =>
createWebpackConfig(
bundle.config.app({ isProdBuild, latestBuild, isStatsBuild })
bundle.config.app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild })
);
const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
@ -173,8 +202,20 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
const createCastConfig = ({ isProdBuild, latestBuild }) =>
createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
const createHassioConfig = ({ isProdBuild, latestBuild }) =>
createWebpackConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
const createHassioConfig = ({
isProdBuild,
latestBuild,
isStatsBuild,
isTestBuild,
}) =>
createWebpackConfig(
bundle.config.hassio({
isProdBuild,
latestBuild,
isStatsBuild,
isTestBuild,
})
);
const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
createWebpackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));

109
demo/src/stubs/history.ts
View File

@ -1,39 +1,19 @@
import { HassEntity } from "home-assistant-js-websocket";
import { HistoryStates } from "../../../src/data/history";
import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
interface HistoryQueryParams {
filter_entity_id: string;
end_time: string;
}
const parseQuery = <T>(queryString: string) => {
const query: any = {};
const items = queryString.split("&");
for (const item of items) {
const parts = item.split("=");
const key = decodeURIComponent(parts[0]);
const value = parts.length > 1 ? decodeURIComponent(parts[1]) : undefined;
query[key] = value;
}
return query as T;
};
const getTime = (minutesAgo) => {
const ts = new Date(Date.now() - minutesAgo * 60 * 1000);
return ts.toISOString();
};
const randomTimeAdjustment = (diff) => Math.random() * diff - diff / 2;
const maxTime = 1440;
const generateHistory = (state, deltas) => {
const generateStateHistory = (
state: HassEntity,
deltas,
start_date: Date,
end_date: Date
) => {
const changes =
typeof deltas[0] === "object"
? deltas
: deltas.map((st) => ({ state: st }));
const timeDiff = 900 / changes.length;
const timeDiff = (end_date.getTime() - start_date.getTime()) / changes.length;
return changes.map((change, index) => {
let attributes;
@ -47,17 +27,13 @@ const generateHistory = (state, deltas) => {
attributes = { ...state.attributes, ...change.attributes };
}
const time =
index === 0
? getTime(maxTime)
: getTime(maxTime - index * timeDiff + randomTimeAdjustment(timeDiff));
const time = start_date.getTime() + timeDiff * index;
return {
attributes,
entity_id: state.entity_id,
state: change.state || state.state,
last_changed: time,
last_updated: time,
a: attributes,
s: change.state || state.state,
lc: time / 1000,
lu: time / 1000,
};
});
};
@ -65,15 +41,29 @@ const generateHistory = (state, deltas) => {
const incrementalUnits = ["clients", "queries", "ads"];
export const mockHistory = (mockHass: MockHomeAssistant) => {
mockHass.mockAPI(
/history\/period\/.+/,
(hass, _method, path, _parameters) => {
const params = parseQuery<HistoryQueryParams>(path.split("?")[1]);
const entities = params.filter_entity_id.split(",");
mockHass.mockWS(
"history/stream",
(
{
entity_ids,
start_time,
end_time,
}: {
entity_ids: string[];
start_time: string;
end_time?: string;
},
hass,
onChange
) => {
const states: HistoryStates = {};
const results: HassEntity[][] = [];
const start = new Date(start_time);
const end = end_time ? new Date(end_time) : new Date();
for (const entityId of entity_ids) {
states[entityId] = [];
for (const entityId of entities) {
const state = hass.states[entityId];
if (!state) {
@ -81,7 +71,12 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
}
if (!state.attributes.unit_of_measurement) {
results.push(generateHistory(state, [state.state]));
states[entityId] = generateStateHistory(
state,
[state.state],
start,
end
);
continue;
}
@ -120,17 +115,23 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
numberState - diff + Math.floor(Math.random() * 2 * diff);
}
results.push(
generateHistory(
{
entity_id: state.entity_id,
attributes: state.attributes,
},
Array.from({ length: statesToGenerate }, genFunc)
)
states[entityId] = generateStateHistory(
state,
Array.from({ length: statesToGenerate }, genFunc),
start,
end
);
}
return results;
setTimeout(() => {
onChange?.({
states,
start_time: start,
end_time: end,
});
}, 1);
return () => {};
}
);
};

3
gallery/src/pages/components/ha-control-select.markdown Normal file
View File

@ -0,0 +1,3 @@
---
title: Control Select
---

212
gallery/src/pages/components/ha-control-select.ts Normal file
View File

@ -0,0 +1,212 @@
import { mdiFanOff, mdiFanSpeed1, mdiFanSpeed2, mdiFanSpeed3 } from "@mdi/js";
import { css, html, LitElement, TemplateResult } from "lit";
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-control-select";
import type { ControlSelectOption } from "../../../../src/components/ha-control-select";
const fullOptions: ControlSelectOption[] = [
{
value: "off",
label: "Off",
path: mdiFanOff,
},
{
value: "low",
label: "Low",
path: mdiFanSpeed1,
},
{
value: "medium",
label: "Medium",
path: mdiFanSpeed2,
},
{
value: "high",
label: "High",
path: mdiFanSpeed3,
},
];
const iconOptions: ControlSelectOption[] = [
{
value: "off",
path: mdiFanOff,
},
{
value: "low",
path: mdiFanSpeed1,
},
{
value: "medium",
path: mdiFanSpeed2,
},
{
value: "high",
path: mdiFanSpeed3,
},
];
const labelOptions: ControlSelectOption[] = [
{
value: "off",
label: "Off",
},
{
value: "low",
label: "Low",
},
{
value: "medium",
label: "Medium",
},
{
value: "high",
label: "High",
},
];
const selects: {
id: string;
label: string;
class?: string;
options: ControlSelectOption[];
disabled?: boolean;
}[] = [
{
id: "label",
label: "Select with labels",
options: labelOptions,
},
{
id: "icon",
label: "Select with icons",
options: iconOptions,
},
{
id: "icon",
label: "Disabled select",
options: iconOptions,
disabled: true,
},
{
id: "custom",
label: "Select and custom style",
class: "custom",
options: fullOptions,
},
];
@customElement("demo-components-ha-control-select")
export class DemoHaControlSelect extends LitElement {
@state() private value?: string = "off";
handleValueChanged(e: CustomEvent) {
this.value = e.detail.value as string;
}
protected render(): TemplateResult {
return html`
<ha-card>
<div class="card-content">
<p><b>Slider values</b></p>
<table>
<tbody>
<tr>
<td>value</td>
<td>${this.value ?? "-"}</td>
</tr>
</tbody>
</table>
</div>
</ha-card>
${repeat(selects, (select) => {
const { id, label, options, ...config } = select;
return html`
<ha-card>
<div class="card-content">
<label id=${id}>${label}</label>
<pre>Config: ${JSON.stringify(config)}</pre>
<ha-control-select
.value=${this.value}
.options=${options}
class=${ifDefined(config.class)}
@value-changed=${this.handleValueChanged}
aria-labelledby=${id}
disabled=${ifDefined(config.disabled)}
>
</ha-control-select>
</div>
</ha-card>
`;
})}
<ha-card>
<div class="card-content">
<p class="title"><b>Vertical</b></p>
<div class="vertical-selects">
${repeat(selects, (select) => {
const { id, label, options, ...config } = select;
return html`
<ha-control-select
.value=${this.value}
.options=${options}
vertical
class=${ifDefined(config.class)}
@value-changed=${this.handleValueChanged}
aria-labelledby=${id}
disabled=${ifDefined(config.disabled)}
>
</ha-control-select>
`;
})}
</div>
</div>
</ha-card>
`;
}
static get styles() {
return css`
ha-card {
max-width: 600px;
margin: 24px auto;
}
pre {
margin-top: 0;
margin-bottom: 8px;
}
p {
margin: 0;
}
label {
font-weight: 600;
}
.custom {
--mdc-icon-size: 24px;
--control-select-color: var(--state-fan-active-color);
--control-select-thickness: 100px;
--control-select-border-radius: 24px;
}
.vertical-selects {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
p.title {
margin-bottom: 12px;
}
.vertical-selects > *:not(:last-child) {
margin-right: 4px;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"demo-components-ha-control-select": DemoHaControlSelect;
}
}

3
hassio/src/addon-view/config/hassio-addon-audio.ts
View File

@ -114,9 +114,6 @@ class HassioAddonAudio extends LitElement {
ha-card {
display: block;
}
paper-item {
width: 450px;
}
.card-actions {
text-align: right;
}

4
hassio/src/backups/hassio-backups.ts
View File

@ -248,9 +248,9 @@ export class HassioBackups extends LitElement {
class="warning"
@click=${this._deleteSelected}
></ha-icon-button>
<paper-tooltip animation-delay="0" for="delete-btn">
<simple-tooltip animation-delay="0" for="delete-btn">
${this.supervisor.localize("backup.delete_selected")}
</paper-tooltip>
</simple-tooltip>
`}
</div>
</div> `

13
hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
View File

@ -50,20 +50,7 @@ class HassioMarkdownDialog extends LitElement {
haStyleDialog,
hassioStyle,
css`
app-toolbar {
margin: 0;
padding: 0 16px;
color: var(--primary-text-color);
background-color: var(--secondary-background-color);
}
app-toolbar [main-title] {
margin-left: 16px;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
app-toolbar {
color: var(--text-primary-color);
background-color: var(--primary-color);
}
ha-markdown {
padding: 16px;
}

4
hassio/src/dialogs/network/dialog-hassio-network.ts
View File

@ -597,10 +597,6 @@ export class DialogHassioNetwork
margin-left: 8px;
}
:host([rtl]) app-toolbar {
direction: rtl;
text-align: right;
}
.container {
padding: 0 8px 4px;
}

6
hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View File

@ -4,7 +4,7 @@ import "@polymer/paper-input/paper-input";
import type { PaperInputElement } from "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -128,7 +128,7 @@ class HassioRepositoriesDialog extends LitElement {
@click=${this._removeRepository}
>
</ha-icon-button>
<paper-tooltip
<simple-tooltip
animation-delay="0"
position="bottom"
offset="1"
@ -138,7 +138,7 @@ class HassioRepositoriesDialog extends LitElement {
? "dialog.repositories.used"
: "dialog.repositories.remove"
)}
</paper-tooltip>
</simple-tooltip>
</div>
</paper-item>
`

100
package.json
View File

@ -26,12 +26,12 @@
"dependencies": {
"@braintree/sanitize-url": "6.0.2",
"@codemirror/autocomplete": "6.4.2",
"@codemirror/commands": "6.2.1",
"@codemirror/commands": "6.2.2",
"@codemirror/language": "6.6.0",
"@codemirror/legacy-modes": "6.3.1",
"@codemirror/search": "6.2.3",
"@codemirror/legacy-modes": "6.3.2",
"@codemirror/search": "6.3.0",
"@codemirror/state": "6.2.0",
"@codemirror/view": "6.9.1",
"@codemirror/view": "6.9.3",
"@egjs/hammerjs": "2.0.17",
"@formatjs/intl-datetimeformat": "6.5.1",
"@formatjs/intl-getcanonicallocales": "2.1.0",
@ -39,14 +39,16 @@
"@formatjs/intl-numberformat": "8.3.5",
"@formatjs/intl-pluralrules": "5.1.10",
"@formatjs/intl-relativetimeformat": "11.1.10",
"@fullcalendar/core": "6.1.4",
"@fullcalendar/daygrid": "6.1.4",
"@fullcalendar/interaction": "6.1.4",
"@fullcalendar/list": "6.1.4",
"@fullcalendar/timegrid": "6.1.4",
"@lezer/highlight": "1.1.3",
"@fullcalendar/core": "6.1.5",
"@fullcalendar/daygrid": "6.1.5",
"@fullcalendar/interaction": "6.1.5",
"@fullcalendar/list": "6.1.5",
"@fullcalendar/timegrid": "6.1.5",
"@lezer/highlight": "1.1.4",
"@lit-labs/context": "0.3.0",
"@lit-labs/motion": "1.0.3",
"@lit-labs/virtualizer": "1.0.1",
"@lrnwebcomponents/simple-tooltip": "4.1.0",
"@material/chips": "=14.0.0-canary.53b3cad2f.0",
"@material/data-table": "=14.0.0-canary.53b3cad2f.0",
"@material/mwc-button": "0.27.0",
@ -69,28 +71,26 @@
"@material/mwc-tab-bar": "0.27.0",
"@material/mwc-textarea": "0.27.0",
"@material/mwc-textfield": "0.27.0",
"@material/mwc-top-app-bar": "0.27.0",
"@material/mwc-top-app-bar-fixed": "0.27.0",
"@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
"@material/web": "=1.0.0-pre.3",
"@mdi/js": "7.1.96",
"@mdi/svg": "7.1.96",
"@material/web": "=1.0.0-pre.4",
"@mdi/js": "7.2.96",
"@mdi/svg": "7.2.96",
"@polymer/app-layout": "3.1.0",
"@polymer/iron-flex-layout": "3.0.1",
"@polymer/iron-icon": "3.0.1",
"@polymer/iron-input": "3.0.1",
"@polymer/iron-resizable-behavior": "3.0.1",
"@polymer/paper-input": "3.2.1",
"@polymer/paper-item": "3.0.1",
"@polymer/paper-listbox": "3.0.1",
"@polymer/paper-slider": "3.0.1",
"@polymer/paper-styles": "3.0.1",
"@polymer/paper-tabs": "3.1.0",
"@polymer/paper-toast": "3.0.1",
"@polymer/paper-tooltip": "3.0.1",
"@polymer/polymer": "3.4.1",
"@polymer/polymer": "3.5.1",
"@thomasloven/round-slider": "0.6.0",
"@vaadin/combo-box": "23.3.8",
"@vaadin/vaadin-themable-mixin": "23.3.8",
"@vaadin/combo-box": "23.3.9",
"@vaadin/vaadin-themable-mixin": "23.3.9",
"@vibrant/color": "3.2.1-alpha.1",
"@vibrant/core": "3.2.1-alpha.1",
"@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@ -100,7 +100,7 @@
"app-datepicker": "5.1.1",
"chart.js": "3.3.2",
"comlink": "4.4.1",
"core-js": "3.29.0",
"core-js": "3.29.1",
"cropperjs": "1.5.13",
"date-fns": "2.29.3",
"date-fns-tz": "2.0.0",
@ -108,15 +108,15 @@
"deep-freeze": "0.0.1",
"fuse.js": "6.6.2",
"google-timezones-json": "1.0.2",
"hls.js": "1.3.4",
"hls.js": "1.3.5",
"home-assistant-js-websocket": "8.0.1",
"idb-keyval": "6.2.0",
"intl-messageformat": "10.3.1",
"intl-messageformat": "10.3.3",
"js-yaml": "4.1.0",
"leaflet": "1.9.3",
"leaflet-draw": "1.0.4",
"lit": "2.6.1",
"marked": "4.2.12",
"lit": "2.7.0",
"marked": "4.3.0",
"memoize-one": "6.0.0",
"node-vibrant": "3.2.1-alpha.1",
"proxy-polyfill": "0.3.2",
@ -133,8 +133,8 @@
"tsparticles-engine": "2.9.3",
"tsparticles-preset-links": "2.9.3",
"unfetch": "5.0.0",
"vis-data": "7.1.4",
"vis-network": "9.1.4",
"vis-data": "7.1.6",
"vis-network": "9.1.6",
"vue": "2.7.14",
"vue2-daterange-picker": "0.6.8",
"weekstart": "2.0.0",
@ -147,7 +147,7 @@
"xss": "1.0.14"
},
"devDependencies": {
"@babel/core": "7.21.0",
"@babel/core": "7.21.3",
"@babel/plugin-external-helpers": "7.18.6",
"@babel/plugin-proposal-class-properties": "7.18.6",
"@babel/plugin-proposal-decorators": "7.21.0",
@ -162,7 +162,7 @@
"@koa/cors": "4.0.0",
"@octokit/auth-oauth-device": "4.0.4",
"@octokit/rest": "19.0.7",
"@open-wc/dev-server-hmr": "0.1.3",
"@open-wc/dev-server-hmr": "0.1.4",
"@rollup/plugin-babel": "6.0.3",
"@rollup/plugin-commonjs": "24.0.1",
"@rollup/plugin-json": "6.0.0",
@ -172,50 +172,51 @@
"@types/chromecast-caf-sender": "1.0.5",
"@types/esprima": "4.0.3",
"@types/glob": "8.1.0",
"@types/html-minifier-terser": "7.0.0",
"@types/js-yaml": "4.0.5",
"@types/leaflet": "1.9.1",
"@types/leaflet": "1.9.3",
"@types/leaflet-draw": "1.0.6",
"@types/marked": "4.0.8",
"@types/mocha": "10.0.1",
"@types/qrcode": "1.5.0",
"@types/serve-handler": "6.1.1",
"@types/sortablejs": "1.15.0",
"@types/sortablejs": "1.15.1",
"@types/tar": "6.1.4",
"@types/webspeechapi": "0.0.29",
"@typescript-eslint/eslint-plugin": "5.54.0",
"@typescript-eslint/parser": "5.54.0",
"@web/dev-server": "0.1.35",
"@web/dev-server-rollup": "0.3.21",
"@typescript-eslint/eslint-plugin": "5.56.0",
"@typescript-eslint/parser": "5.56.0",
"@web/dev-server": "0.1.36",
"@web/dev-server-rollup": "0.4.0",
"babel-loader": "9.1.2",
"babel-plugin-template-html-minifier": "4.1.0",
"chai": "4.3.7",
"del": "7.0.0",
"eslint": "8.35.0",
"eslint": "8.36.0",
"eslint-config-airbnb-base": "15.0.0",
"eslint-config-airbnb-typescript": "17.0.0",
"eslint-config-prettier": "8.7.0",
"eslint-config-prettier": "8.8.0",
"eslint-import-resolver-webpack": "0.13.2",
"eslint-plugin-disable": "2.0.3",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-lit": "1.8.2",
"eslint-plugin-lit-a11y": "2.3.0",
"eslint-plugin-lit-a11y": "2.4.0",
"eslint-plugin-unused-imports": "2.0.0",
"eslint-plugin-wc": "1.4.0",
"esprima": "4.0.1",
"fancy-log": "2.0.0",
"fs-extra": "11.1.0",
"glob": "8.1.0",
"fs-extra": "11.1.1",
"glob": "9.3.2",
"gulp": "4.0.2",
"gulp-flatmap": "1.0.2",
"gulp-json-transform": "0.4.8",
"gulp-merge-json": "2.1.2",
"gulp-rename": "2.0.0",
"gulp-zopfli-green": "6.0.1",
"html-minifier": "4.0.0",
"html-minifier-terser": "7.1.0",
"husky": "8.0.3",
"instant-mocha": "1.5.0",
"jszip": "3.10.1",
"lint-staged": "13.1.2",
"lint-staged": "13.2.0",
"lit-analyzer": "1.2.1",
"lodash.template": "4.5.0",
"magic-string": "0.30.0",
@ -225,37 +226,38 @@
"object-hash": "3.0.0",
"open": "8.4.2",
"pinst": "3.0.0",
"prettier": "2.8.4",
"prettier": "2.8.7",
"require-dir": "1.2.0",
"rollup": "2.79.1",
"rollup-plugin-string": "3.0.0",
"rollup-plugin-terser": "5.3.1",
"rollup-plugin-terser": "7.0.2",
"rollup-plugin-visualizer": "5.9.0",
"serve-handler": "6.1.5",
"sinon": "15.0.1",
"sinon": "15.0.2",
"source-map-url": "0.4.1",
"systemjs": "6.14.0",
"systemjs": "6.14.1",
"tar": "6.1.13",
"terser-webpack-plugin": "5.3.6",
"terser-webpack-plugin": "5.3.7",
"ts-lit-plugin": "1.2.1",
"typescript": "4.9.5",
"vinyl-buffer": "1.0.1",
"vinyl-source-stream": "2.0.0",
"webpack": "=5.72.1",
"webpack-cli": "5.0.1",
"webpack-dev-server": "4.11.1",
"webpack-dev-server": "4.13.1",
"webpack-manifest-plugin": "5.0.0",
"webpackbar": "5.0.2",
"workbox-build": "6.5.4"
},
"_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
"resolutions": {
"@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch"
"@polymer/polymer": "patch:@polymer/polymer@3.5.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
"@material/mwc-button@^0.25.3": "^0.27.0"
},
"main": "src/home-assistant.js",
"prettier": {
"trailingComma": "es5",
"arrowParens": "always"
},
"packageManager": "yarn@3.4.1"
"packageManager": "yarn@3.5.0"
}

2
pyproject.toml
View File

@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
[project]
name = "home-assistant-frontend"
version = "20230309.1"
version = "20230329.0"
license = {text = "Apache-2.0"}
description = "The Home Assistant frontend"
readme = "README.md"

38
src/auth/ha-pick-auth-provider.ts
View File

@ -1,9 +1,9 @@
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import "@material/mwc-list";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import "../components/ha-icon-next";
import "../components/ha-list-item";
import { AuthProvider } from "../data/auth";
import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
@ -20,18 +20,21 @@ export class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
protected render() {
return html`
<p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
${this.authProviders.map(
(provider) => html`
<paper-item
role="button"
.auth_provider=${provider}
@click=${this._handlePick}
>
<paper-item-body>${provider.name}</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
`
)}
<mwc-list>
${this.authProviders.map(
(provider) => html`
<ha-list-item
hasMeta
role="button"
.auth_provider=${provider}
@click=${this._handlePick}
>
${provider.name}
<ha-icon-next slot="meta"></ha-icon-next>
</ha-list-item>
`
)}</mwc-list
>
`;
}
@ -40,11 +43,12 @@ export class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
}
static styles = css`
paper-item {
cursor: pointer;
}
p {
margin-top: 0;
}
mwc-list {
margin: 0 -16px;
--mdc-list-side-padding: 16px;
}
`;
}

25
src/common/datetime/duration.ts
View File

@ -1,16 +1,19 @@
import secondsToDuration from "./seconds_to_duration";
import millisecondsToDuration from "./milliseconds_to_duration";
const DAY_IN_SECONDS = 86400;
const HOUR_IN_SECONDS = 3600;
const MINUTE_IN_SECONDS = 60;
const DAY_IN_MILLISECONDS = 86400000;
const HOUR_IN_MILLISECONDS = 3600000;
const MINUTE_IN_MILLISECONDS = 60000;
const SECOND_IN_MILLISECONDS = 1000;
export const UNIT_TO_SECOND_CONVERT = {
s: 1,
min: MINUTE_IN_SECONDS,
h: HOUR_IN_SECONDS,
d: DAY_IN_SECONDS,
export const UNIT_TO_MILLISECOND_CONVERT = {
ms: 1,
s: SECOND_IN_MILLISECONDS,
min: MINUTE_IN_MILLISECONDS,
h: HOUR_IN_MILLISECONDS,
d: DAY_IN_MILLISECONDS,
};
export const formatDuration = (duration: string, units: string): string =>
secondsToDuration(parseFloat(duration) * UNIT_TO_SECOND_CONVERT[units]) ||
"0";
millisecondsToDuration(
parseFloat(duration) * UNIT_TO_MILLISECOND_CONVERT[units]
) || "0";

25
src/common/datetime/milliseconds_to_duration.ts Normal file
View File

@ -0,0 +1,25 @@
const leftPad = (num: number, digits = 2) => {
let paddedNum = "" + num;
for (let i = 1; i < digits; i++) {
paddedNum = parseInt(paddedNum) < 10 ** i ? `0${paddedNum}` : paddedNum;
}
return paddedNum;
};
export default function millisecondsToDuration(d: number) {
const h = Math.floor(d / 1000 / 3600);
const m = Math.floor(((d / 1000) % 3600) / 60);
const s = Math.floor(((d / 1000) % 3600) % 60);
const ms = Math.floor(d % 1000);
if (h > 0) {
return `${h}:${leftPad(m)}:${leftPad(s)}`;
}
if (m > 0) {
return `${m}:${leftPad(s)}`;
}
if (s > 0 || ms > 0) {
return `${s}${ms > 0 ? `.${leftPad(ms, 3)}` : ``}`;
}
return null;
}

111
src/common/decorators/transform.ts Normal file
View File

@ -0,0 +1,111 @@
import { PropertyDeclaration, PropertyValues, ReactiveElement } from "lit";
import { ClassElement } from "../../types";
import { shallowEqual } from "../util/shallow-equal";
/**
* Transform function type.
*/
export interface Transformer<T = any, V = any> {
(value: V): T;
}
type ReactiveTransformElement = ReactiveElement & {
_transformers: Map<PropertyKey, Transformer>;
_watching: Map<PropertyKey, Set<PropertyKey>>;
};
type ReactiveElementClassWithTransformers = typeof ReactiveElement & {
prototype: ReactiveTransformElement;
};
/**
* Specifies an tranformer callback that is run when the value of the decorated property, or any of the properties in the watching array, changes.
* The result of the tranformer is assigned to the decorated property.
* The tranformer receives the current as arguments.
*/
export const transform =
<T, V>(config: {
transformer: Transformer<T, V>;
watch?: PropertyKey[];
propertyOptions?: PropertyDeclaration;
}): any =>
(clsElement: ClassElement) => {
const key = String(clsElement.key);
return {
...clsElement,
kind: "method",
descriptor: {
set(this: ReactiveTransformElement, value: V) {
const oldValue = this[`__transform_${key}`];
const trnsformr: Transformer<T, V> | undefined =
this._transformers.get(key);
if (trnsformr) {
this[`__transform_${key}`] = trnsformr.call(this, value);
} else {
this[`__transform_${key}`] = value;
}
this[`__original_${key}`] = value;
this.requestUpdate(key, oldValue);
},
get(): T {
return this[`__transform_${key}`];
},
enumerable: true,
configurable: true,
},
finisher(cls: ReactiveElementClassWithTransformers) {
// if we haven't wrapped `willUpdate` in this class, do so
if (!cls.prototype._transformers) {
cls.prototype._transformers = new Map<PropertyKey, Transformer>();
cls.prototype._watching = new Map<PropertyKey, Set<PropertyKey>>();
// @ts-ignore
const userWillUpdate = cls.prototype.willUpdate;
// @ts-ignore
cls.prototype.willUpdate = function (
this: ReactiveTransformElement,
changedProperties: PropertyValues
) {
userWillUpdate.call(this, changedProperties);
const keys = new Set<PropertyKey>();
changedProperties.forEach((_v, k) => {
const watchers = this._watching;
const ks: Set<PropertyKey> | undefined = watchers.get(k);
if (ks !== undefined) {
ks.forEach((wk) => keys.add(wk));
}
});
keys.forEach((k) => {
// trigger setter
this[k] = this[`__original_${String(k)}`];
});
};
// clone any existing observers (superclasses)
// eslint-disable-next-line no-prototype-builtins
} else if (!cls.prototype.hasOwnProperty("_transformers")) {
const tranformers = cls.prototype._transformers;
cls.prototype._transformers = new Map();
tranformers.forEach((v: any, k: PropertyKey) =>
cls.prototype._transformers.set(k, v)
);
}
// set this method
cls.prototype._transformers.set(clsElement.key, config.transformer);
if (config.watch) {
// store watchers
config.watch.forEach((k) => {
let curWatch = cls.prototype._watching.get(k);
if (!curWatch) {
curWatch = new Set();
cls.prototype._watching.set(k, curWatch);
}
curWatch.add(clsElement.key);
});
}
cls.createProperty(clsElement.key, {
noAccessor: true,
hasChanged: (v: any, o: any) => !shallowEqual(v, o),
...config.propertyOptions,
});
},
};
};

8
src/common/dom/apply_themes_on_element.ts
View File

@ -93,7 +93,7 @@ export const applyThemesOnElement = (
}
// Nothing was changed
if (element._themes?.cacheKey === cacheKey) {
if (element.__themes?.cacheKey === cacheKey) {
return;
}
}
@ -119,7 +119,7 @@ export const applyThemesOnElement = (
}
}
if (!element._themes?.keys && !Object.keys(themeRules).length) {
if (!element.__themes?.keys && !Object.keys(themeRules).length) {
// No styles to reset, and no styles to set
return;
}
@ -130,8 +130,8 @@ export const applyThemesOnElement = (
: undefined;
// Add previous set keys to reset them, and new theme
const styles = { ...element._themes?.keys, ...newTheme?.styles };
element._themes = { cacheKey, keys: newTheme?.keys };
const styles = { ...element.__themes?.keys, ...newTheme?.styles };
element.__themes = { cacheKey, keys: newTheme?.keys };
// Set and/or reset styles
if (element.updateStyles) {

126
src/common/entity/compute_attribute_display.ts
View File

@ -1,30 +1,126 @@
import { HassEntity } from "home-assistant-js-websocket";
import { html, TemplateResult } from "lit";
import { until } from "lit/directives/until";
import { EntityRegistryDisplayEntry } from "../../data/entity_registry";
import { HomeAssistant } from "../../types";
import checkValidDate from "../datetime/check_valid_date";
import { formatDate } from "../datetime/format_date";
import { formatDateTimeWithSeconds } from "../datetime/format_date_time";
import { formatNumber } from "../number/format_number";
import { capitalizeFirstLetter } from "../string/capitalize-first-letter";
import { isDate } from "../string/is_date";
import { isTimestamp } from "../string/is_timestamp";
import { LocalizeFunc } from "../translations/localize";
import { computeDomain } from "./compute_domain";
import { FrontendLocaleData } from "../../data/translation";
let jsYamlPromise: Promise<typeof import("../../resources/js-yaml-dump")>;
export const computeAttributeValueDisplay = (
localize: LocalizeFunc,
stateObj: HassEntity,
locale: FrontendLocaleData,
entities: HomeAssistant["entities"],
attribute: string,
value?: any
): string => {
const entityId = stateObj.entity_id;
): string | TemplateResult => {
const attributeValue =
value !== undefined ? value : stateObj.attributes[attribute];
// Null value, the state is unknown
if (attributeValue === null) {
return localize("state.default.unknown");
}
// Number value, return formatted number
if (typeof attributeValue === "number") {
return formatNumber(attributeValue, locale);
}
// Special handling in case this is a string with an known format
if (typeof attributeValue === "string") {
// URL handling
if (attributeValue.startsWith("http")) {
try {
// If invalid URL, exception will be raised
const url = new URL(attributeValue);
if (url.protocol === "http:" || url.protocol === "https:")
return html`<a target="_blank" rel="noreferrer" href=${value}
>${attributeValue}</a
>`;
} catch (_) {
// Nothing to do here
}
}
// Date handling
if (isDate(attributeValue, true)) {
// Timestamp handling
if (isTimestamp(attributeValue)) {
const date = new Date(attributeValue);
if (checkValidDate(date)) {
return formatDateTimeWithSeconds(date, locale);
}
}
// Value was not a timestamp, so only do date formatting
const date = new Date(attributeValue);
if (checkValidDate(date)) {
return formatDate(date, locale);
}
}
}
// Values are objects, render object
if (
(Array.isArray(attributeValue) &&
attributeValue.some((val) => val instanceof Object)) ||
(!Array.isArray(attributeValue) && attributeValue instanceof Object)
) {
if (!jsYamlPromise) {
jsYamlPromise = import("../../resources/js-yaml-dump");
}
const yaml = jsYamlPromise.then((jsYaml) => jsYaml.dump(attributeValue));
return html`<pre>${until(yaml, "")}</pre>`;
}
// If this is an array, try to determine the display value for each item
if (Array.isArray(attributeValue)) {
return attributeValue
.map((item) =>
computeAttributeValueDisplay(
localize,
stateObj,
locale,
entities,
attribute,
item
)
)
.join(", ");
}
// We've explored all known value handling, so now we'll try to find a
// translation for the value.
const entityId = stateObj.entity_id;
const domain = computeDomain(entityId);
const entity = entities[entityId] as EntityRegistryDisplayEntry | undefined;
const translationKey = entity?.translation_key;
const deviceClass = stateObj.attributes.device_class;
const registryEntry = entities[entityId] as
| EntityRegistryDisplayEntry
| undefined;
const translationKey = registryEntry?.translation_key;
return (
(translationKey &&
localize(
`component.${entity.platform}.entity.${domain}.${translationKey}.state_attributes.${attribute}.state.${attributeValue}`
`component.${registryEntry.platform}.entity.${domain}.${translationKey}.state_attributes.${attribute}.state.${attributeValue}`
)) ||
(deviceClass &&
localize(
`component.${domain}.entity_component.${deviceClass}.state_attributes.${attribute}.state.${attributeValue}`
)) ||
localize(
`component.${domain}.state_attributes._.${attribute}.state.${attributeValue}`
`component.${domain}.entity_component._.state_attributes.${attribute}.state.${attributeValue}`
) ||
attributeValue
);
@ -37,6 +133,7 @@ export const computeAttributeNameDisplay = (
attribute: string
): string => {
const entityId = stateObj.entity_id;
const deviceClass = stateObj.attributes.device_class;
const domain = computeDomain(entityId);
const entity = entities[entityId] as EntityRegistryDisplayEntry | undefined;
const translationKey = entity?.translation_key;
@ -46,7 +143,20 @@ export const computeAttributeNameDisplay = (
localize(
`component.${entity.platform}.entity.${domain}.${translationKey}.state_attributes.${attribute}.name`
)) ||
localize(`component.${domain}.state_attributes._.${attribute}.name`) ||
attribute
(deviceClass &&
localize(
`component.${domain}.entity_component.${deviceClass}.state_attributes.${attribute}.name`
)) ||
localize(
`component.${domain}.entity_component._.state_attributes.${attribute}.name`
) ||
capitalizeFirstLetter(
attribute
.replace(/_/g, " ")
.replace(/\bid\b/g, "ID")
.replace(/\bip\b/g, "IP")
.replace(/\bmac\b/g, "MAC")
.replace(/\bgps\b/g, "GPS")
)
);
};

11
src/common/entity/compute_state_display.ts
View File

@ -7,7 +7,10 @@ import {
UPDATE_SUPPORT_PROGRESS,
} from "../../data/update";
import { HomeAssistant } from "../../types";
import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
import {
formatDuration,
UNIT_TO_MILLISECOND_CONVERT,
} from "../datetime/duration";
import { formatDate } from "../datetime/format_date";
import { formatDateTime } from "../datetime/format_date_time";
import { formatTime } from "../datetime/format_time";
@ -57,7 +60,7 @@ export const computeStateDisplayFromEntityAttributes = (
if (
attributes.device_class === "duration" &&
attributes.unit_of_measurement &&
UNIT_TO_SECOND_CONVERT[attributes.unit_of_measurement]
UNIT_TO_MILLISECOND_CONVERT[attributes.unit_of_measurement]
) {
try {
return formatDuration(state, attributes.unit_of_measurement);
@ -214,10 +217,10 @@ export const computeStateDisplayFromEntityAttributes = (
// Return device class translation
(attributes.device_class &&
localize(
`component.${domain}.state.${attributes.device_class}.${state}`
`component.${domain}.entity_component.${attributes.device_class}.state.${state}`
)) ||
// Return default translation
localize(`component.${domain}.state._.${state}`) ||
localize(`component.${domain}.entity_component._.state.${state}`) ||
// We don't know! Return the raw state.
state
);

13
src/common/entity/state_color.ts
View File

@ -1,6 +1,7 @@
/** Return an color representing a state. */
import { HassEntity } from "home-assistant-js-websocket";
import { UNAVAILABLE } from "../../data/entity";
import { computeGroupDomain, GroupEntity } from "../../data/group";
import { computeCssVariable } from "../../resources/css-variables";
import { slugify } from "../string/slugify";
import { batteryStateColorProperty } from "./color/battery_color";
@ -52,11 +53,11 @@ export const stateColorCss = (stateObj: HassEntity, state?: string) => {
};
export const domainStateColorProperties = (
domain: string,
stateObj: HassEntity,
state?: string
): string[] => {
const compareState = state !== undefined ? state : stateObj.state;
const domain = computeDomain(stateObj.entity_id);
const active = stateActive(stateObj, state);
const properties: string[] = [];
@ -95,8 +96,16 @@ export const stateColorProperties = (
}
}
// Special rules for group coloring
if (domain === "group") {
const groupDomain = computeGroupDomain(stateObj as GroupEntity);
if (groupDomain && STATE_COLORED_DOMAIN.has(groupDomain)) {
return domainStateColorProperties(groupDomain, stateObj, state);
}
}
if (STATE_COLORED_DOMAIN.has(domain)) {
return domainStateColorProperties(stateObj, state);
return domainStateColorProperties(domain, stateObj, state);
}
return undefined;

108
src/common/util/shallow-equal.ts Normal file
View File

@ -0,0 +1,108 @@
/**
* Compares two values for shallow equality, only 1 level deep.
*/
export const shallowEqual = (a: any, b: any): boolean => {
if (a === b) {
return true;
}
if (a && b && typeof a === "object" && typeof b === "object") {
if (a.constructor !== b.constructor) {
return false;
}
let i: number | [any, any];
let length: number;
if (Array.isArray(a)) {
length = a.length;
if (length !== b.length) {
return false;
}
for (i = length; i-- !== 0; ) {
if (a[i] !== b[i]) {
return false;
}
}
return true;
}
if (a instanceof Map && b instanceof Map) {
if (a.size !== b.size) {
return false;
}
for (i of a.entries()) {
if (!b.has(i[0])) {
return false;
}
}
for (i of a.entries()) {
if (i[1] !== b.get(i[0])) {
return false;
}
}
return true;
}
if (a instanceof Set && b instanceof Set) {
if (a.size !== b.size) {
return false;
}
for (i of a.entries()) {
if (!b.has(i[0])) {
return false;
}
}
return true;
}
if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
// @ts-ignore
length = a.length;
// @ts-ignore
if (length !== b.length) {
return false;
}
for (i = length; i-- !== 0; ) {
if (a[i] !== b[i]) {
return false;
}
}
return true;
}
if (a.constructor === RegExp) {
return a.source === b.source && a.flags === b.flags;
}
if (a.valueOf !== Object.prototype.valueOf) {
return a.valueOf() === b.valueOf();
}
if (a.toString !== Object.prototype.toString) {
return a.toString() === b.toString();
}
const keys = Object.keys(a);
length = keys.length;
if (length !== Object.keys(b).length) {
return false;
}
for (i = length; i-- !== 0; ) {
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
return false;
}
}
for (i = length; i-- !== 0; ) {
const key = keys[i];
if (a[key] !== b[key]) {
return false;
}
}
return true;
}
// true if both NaN, false otherwise
// eslint-disable-next-line no-self-compare
return a !== a && b !== b;
};

9
src/components/chart/state-history-chart-timeline.ts
View File

@ -143,11 +143,16 @@ export class StateHistoryChartTimeline extends LitElement {
}
},
afterUpdate: (y) => {
const yWidth = this.showNames
? y.width ?? 0
: computeRTL(this.hass)
? 0
: y.left ?? 0;
if (
this._yWidth !== Math.floor(y.width) &&
this._yWidth !== Math.floor(yWidth) &&
y.ticks.length === this.data.length
) {
this._yWidth = Math.floor(y.width);
this._yWidth = Math.floor(yWidth);
fireEvent(this, "y-width-changed", {
value: this._yWidth,
chartIndex: this.chartIndex,

5
src/components/chart/state-history-charts.ts
View File

@ -175,15 +175,14 @@ export class StateHistoryCharts extends LitElement {
if (changedProps.has("_chartCount")) {
if (this._chartCount < this._childYWidths.length) {
this._childYWidths.length = this._chartCount;
this._maxYWidth =
this._childYWidths.length === 0 ? 0 : Math.max(...this._childYWidths);
this._maxYWidth = Math.max(...Object.values(this._childYWidths), 0);
}
}
}
private _yWidthChanged(e: CustomEvent<HASSDomEvents["y-width-changed"]>) {
this._childYWidths[e.detail.chartIndex] = e.detail.value;
this._maxYWidth = Math.max(...this._childYWidths);
this._maxYWidth = Math.max(...Object.values(this._childYWidths), 0);
}
private _isHistoryEmpty(): boolean {

4
src/components/data-table/ha-data-table-icon.ts
View File

@ -48,8 +48,8 @@ class HaDataTableIcon extends LitElement {
outline: none;
font-size: 10px;
line-height: 1;
background-color: var(--paper-tooltip-background, #616161);
color: var(--paper-tooltip-text-color, white);
background-color: var(--simple-tooltip-background, #616161);
color: var(--simple-tooltip-text-color, white);
padding: 8px;
border-radius: 2px;
}

17
src/components/date-range-picker.ts
View File

@ -6,6 +6,21 @@ import DateRangePicker from "vue2-daterange-picker";
import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
import { fireEvent } from "../common/dom/fire_event";
// Set the current date to the left picker instead of the right picker because the right is hidden
const CustomDateRangePicker = Vue.extend({
mixins: [DateRangePicker],
methods: {
selectMonthDate() {
const dt: Date = this.end || new Date();
// @ts-ignore
this.changeLeftMonth({
year: dt.getFullYear(),
month: dt.getMonth() + 1,
});
},
},
});
const Component = Vue.extend({
props: {
timePicker: {
@ -47,7 +62,7 @@ const Component = Vue.extend({
},
render(createElement) {
// @ts-expect-error
return createElement(DateRangePicker, {
return createElement(CustomDateRangePicker, {
props: {
"time-picker": this.timePicker,
"auto-apply": this.autoApply,

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

@ -1,7 +1,7 @@
import { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, nothing } from "lit";
import { customElement, property, query } from "lit/decorators";
import { formatAttributeName } from "../../data/entity_attributes";
import { computeAttributeNameDisplay } from "../../common/entity/compute_attribute_display";
import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types";
import "../ha-combo-box";
@ -54,7 +54,12 @@ class HaEntityAttributePicker extends LitElement {
.filter((key) => !this.hideAttributes?.includes(key))
.map((key) => ({
value: key,
label: formatAttributeName(key),
label: computeAttributeNameDisplay(
this.hass.localize,
state,
this.hass.entities,
key
),
}))
: [];
}
@ -68,7 +73,14 @@ class HaEntityAttributePicker extends LitElement {
return html`
<ha-combo-box
.hass=${this.hass}
.value=${this.value ? formatAttributeName(this.value) : ""}
.value=${this.value
? computeAttributeNameDisplay(
this.hass.localize,
this.hass.states[this.entityId!],
this.hass.entities,
this.value
)
: ""}
.autofocus=${this.autofocus}
.label=${this.label ??
this.hass.localize(

11
src/components/entity/ha-entity-state-picker.ts
View File

@ -4,7 +4,7 @@ import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { computeStateDisplay } from "../../common/entity/compute_state_display";
import { getStates } from "../../common/entity/get_states";
import { formatAttributeValue } from "../../data/entity_attributes";
import { computeAttributeValueDisplay } from "../../common/entity/compute_attribute_display";
import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types";
import "../ha-combo-box";
@ -58,7 +58,14 @@ class HaEntityStatePicker extends LitElement {
this.hass.entities,
key
)
: formatAttributeValue(this.hass, key),
: computeAttributeValueDisplay(
this.hass.localize,
state,
this.hass.locale,
this.hass.entities,
this.attribute,
key
),
}))
: [];
}

6
src/components/entity/state-info.ts
View File

@ -1,4 +1,4 @@
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import type { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
@ -45,7 +45,7 @@ class StateInfo extends LitElement {
.datetime=${this.stateObj.last_changed}
capitalize
></ha-relative-time>
<paper-tooltip animation-delay="0" for="last_changed">
<simple-tooltip animation-delay="0" for="last_changed">
<div>
<div class="row">
<span class="column-name">
@ -72,7 +72,7 @@ class StateInfo extends LitElement {
></ha-relative-time>
</div>
</div>
</paper-tooltip>
</simple-tooltip>
</div>`
: html`<div class="extra-info"><slot></slot></div>`}
</div>`;

11
src/components/ha-analytics-learn-more.ts
View File

@ -1,11 +0,0 @@
import { html } from "lit";
import { HomeAssistant } from "../types";
import { documentationUrl } from "../util/documentation-url";
export const analyticsLearnMore = (hass: HomeAssistant) => html`<a
.href=${documentationUrl(hass, "/integrations/analytics/")}
target="_blank"
rel="noreferrer"
>
How we process your data
</a>`;

68
src/components/ha-analytics.ts
View File

@ -1,4 +1,4 @@
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
@ -9,18 +9,7 @@ import "./ha-settings-row";
import "./ha-switch";
import type { HaSwitch } from "./ha-switch";
const ADDITIONAL_PREFERENCES = [
{
key: "usage",
title: "Usage",
description: "Details of what you use with Home Assistant",
},
{
key: "statistics",
title: "Statistical data",
description: "Counts containing total number of datapoints",
},
];
const ADDITIONAL_PREFERENCES = ["usage", "statistics"] as const;
declare global {
interface HASSDomEvents {
@ -34,15 +23,25 @@ export class HaAnalytics extends LitElement {
@property({ attribute: false }) public analytics?: Analytics;
@property({ attribute: "translation_key_panel" }) public translationKeyPanel:
| "page-onboarding"
| "config" = "config";
protected render(): TemplateResult {
const loading = this.analytics === undefined;
const baseEnabled = !loading && this.analytics!.preferences.base;
return html`
<ha-settings-row>
<span slot="heading" data-for="base"> Basic analytics </span>
<span slot="heading" data-for="base">
${this.hass.localize(
`ui.panel.${this.translationKeyPanel}.analytics.preferences.base.title`
)}
</span>
<span slot="description" data-for="base">
This includes information about your system.
${this.hass.localize(
`ui.panel.${this.translationKeyPanel}.analytics.preferences.base.description`
)}
</span>
<ha-switch
@change=${this._handleRowClick}
@ -57,26 +56,31 @@ export class HaAnalytics extends LitElement {
(preference) =>
html`
<ha-settings-row>
<span slot="heading" data-for=${preference.key}>
${preference.title}
<span slot="heading" data-for=${preference}>
${this.hass.localize(
`ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.title`
)}
</span>
<span slot="description" data-for=${preference.key}>
${preference.description}
<span slot="description" data-for=${preference}>
${this.hass.localize(
`ui.panel.${this.translationKeyPanel}.analytics.preferences.${preference}.description`
)}
</span>
<span>
<ha-switch
@change=${this._handleRowClick}
.checked=${this.analytics?.preferences[preference.key]}
.preference=${preference.key}
name=${preference.key}
.checked=${this.analytics?.preferences[preference]}
.preference=${preference}
name=${preference}
>
</ha-switch>
${!baseEnabled
? html`
<paper-tooltip animation-delay="0" position="right">
You need to enable basic analytics for this option to be
available
</paper-tooltip>
<simple-tooltip animation-delay="0" position="right">
${this.hass.localize(
`ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
)}
</simple-tooltip>
`
: ""}
</span>
@ -84,9 +88,15 @@ export class HaAnalytics extends LitElement {
`
)}
<ha-settings-row>
<span slot="heading" data-for="diagnostics"> Diagnostics </span>
<span slot="heading" data-for="diagnostics">
${this.hass.localize(
`ui.panel.${this.translationKeyPanel}.analytics.preferences.diagnostics.title`
)}
</span>
<span slot="description" data-for="diagnostics">
Share crash reports when unexpected errors occur.
${this.hass.localize(
`ui.panel.${this.translationKeyPanel}.analytics.preferences.diagnostics.description`
)}
</span>
<ha-switch
@change=${this._handleRowClick}
@ -132,7 +142,7 @@ export class HaAnalytics extends LitElement {
preferences[preference] = target.checked;
if (
ADDITIONAL_PREFERENCES.some((entry) => entry.key === preference) &&
ADDITIONAL_PREFERENCES.some((entry) => entry === preference) &&
target.checked
) {
preferences.base = true;

42
src/components/ha-attributes.ts
View File

@ -1,18 +1,11 @@
import { HassEntity } from "home-assistant-js-websocket";
import {
css,
CSSResultGroup,
html,
LitElement,
TemplateResult,
nothing,
} from "lit";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import {
formatAttributeName,
formatAttributeValue,
STATE_ATTRIBUTES,
} from "../data/entity_attributes";
computeAttributeNameDisplay,
computeAttributeValueDisplay,
} from "../common/entity/compute_attribute_display";
import { STATE_ATTRIBUTES } from "../data/entity_attributes";
import { haStyle } from "../resources/styles";
import { HomeAssistant } from "../types";
@ -56,9 +49,22 @@ class HaAttributes extends LitElement {
${attributes.map(
(attribute) => html`
<div class="data-entry">
<div class="key">${formatAttributeName(attribute)}</div>
<div class="key">
${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj!,
this.hass.entities,
attribute
)}
</div>
<div class="value">
${this.formatAttribute(attribute)}
${computeAttributeValueDisplay(
this.hass.localize,
this.stateObj!,
this.hass.locale,
this.hass.entities,
attribute
)}
</div>
</div>
`
@ -128,14 +134,6 @@ class HaAttributes extends LitElement {
);
}
private formatAttribute(attribute: string): string | TemplateResult {
if (!this.stateObj) {
return "—";
}
const value = this.stateObj.attributes[attribute];
return formatAttributeValue(this.hass, value);
}
private expandedChanged(ev) {
this._expanded = ev.detail.expanded;
}

15
src/components/ha-chip.ts
View File

@ -1,13 +1,6 @@
// @ts-ignore
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
import {
css,
CSSResultGroup,
html,
LitElement,
TemplateResult,
unsafeCSS,
} from "lit";
import { css, CSSResultGroup, html, LitElement, nothing, unsafeCSS } from "lit";
import { customElement, property } from "lit/decorators";
@customElement("ha-chip")
@ -18,14 +11,14 @@ export class HaChip extends LitElement {
@property({ type: Boolean }) public noText = false;
protected render(): TemplateResult {
protected render() {
return html`
<div class="mdc-chip ${this.noText ? "no-text" : ""}">
${this.hasIcon
? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
<slot name="icon"></slot>
</div>`
: null}
: nothing}
<div class="mdc-chip__ripple"></div>
<span role="gridcell">
<span role="button" tabindex="0" class="mdc-chip__primary-action">
@ -36,7 +29,7 @@ export class HaChip extends LitElement {
? html`<div class="mdc-chip__icon mdc-chip__icon--trailing">
<slot name="trailing-icon"></slot>
</div>`
: null}
: nothing}
</div>
`;
}

2
src/components/ha-climate-state.ts
View File

@ -27,6 +27,7 @@ class HaClimateState extends LitElement {
${computeAttributeValueDisplay(
this.hass.localize,
this.stateObj,
this.hass.locale,
this.hass.entities,
"preset_mode"
)}`
@ -142,6 +143,7 @@ class HaClimateState extends LitElement {
? `${computeAttributeValueDisplay(
this.hass.localize,
this.stateObj,
this.hass.locale,
this.hass.entities,
"hvac_action"
)} (${stateString})`

6
src/components/ha-control-button.ts
View File

@ -85,6 +85,7 @@ export class HaControlButton extends LitElement {
--control-button-background-opacity: 0.2;
--control-button-border-radius: 10px;
--mdc-icon-size: 20px;
color: var(--primary-text-color);
width: 40px;
height: 40px;
-webkit-tap-highlight-color: transparent;
@ -107,8 +108,11 @@ export class HaControlButton extends LitElement {
outline: none;
overflow: hidden;
background: none;
z-index: 1;
--mdc-ripple-color: var(--control-button-background-color);
/* For safari border-radius overflow */
z-index: 0;
font-size: inherit;
color: inherit;
}
.button::before {
content: "";

336
src/components/ha-control-select.ts Normal file
View File

@ -0,0 +1,336 @@
import {
css,
CSSResultGroup,
html,
LitElement,
nothing,
PropertyValues,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined";
import { repeat } from "lit/directives/repeat";
import { fireEvent } from "../common/dom/fire_event";
import "./ha-icon";
import "./ha-svg-icon";
export type ControlSelectOption = {
value: string;
label?: string;
icon?: string;
path?: string;
};
@customElement("ha-control-select")
export class HaControlSelect extends LitElement {
@property({ type: Boolean, reflect: true }) disabled = false;
@property() public label?: string;
@property() public options?: ControlSelectOption[];
@property() public value?: string;
@property({ type: Boolean, reflect: true })
public vertical = false;
@property({ type: Boolean, attribute: "hide-label" })
public hideLabel = false;
@state() private _activeIndex?: number;
protected firstUpdated(changedProperties: PropertyValues): void {
super.firstUpdated(changedProperties);
this.setAttribute("role", "listbox");
if (!this.hasAttribute("tabindex")) {
this.setAttribute("tabindex", "0");
}
}
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (changedProps.has("_activeIndex")) {
const activeValue =
this._activeIndex != null
? this.options?.[this._activeIndex]?.value
: undefined;
const activedescendant =
activeValue != null ? `option-${activeValue}` : undefined;
this.setAttribute("aria-activedescendant", activedescendant ?? "");
}
if (changedProps.has("vertical")) {
const orientation = this.vertical ? "vertical" : "horizontal";
this.setAttribute("aria-orientation", orientation);
}
}
public connectedCallback(): void {
super.connectedCallback();
this._setupListeners();
}
public disconnectedCallback(): void {
super.disconnectedCallback();
this._destroyListeners();
}
private _setupListeners() {
this.addEventListener("focus", this._handleFocus);
this.addEventListener("blur", this._handleBlur);
this.addEventListener("keydown", this._handleKeydown);
}
private _destroyListeners() {
this.removeEventListener("focus", this._handleFocus);
this.removeEventListener("blur", this._handleBlur);
this.removeEventListener("keydown", this._handleKeydown);
}
private _handleFocus() {
if (this.disabled) return;
this._activeIndex =
(this.value != null
? this.options?.findIndex((option) => option.value === this.value)
: undefined) ?? 0;
}
private _handleBlur() {
this._activeIndex = undefined;
}
private _handleKeydown(ev: KeyboardEvent) {
if (!this.options || this._activeIndex == null || this.disabled) return;
const value = this.options[this._activeIndex].value;
switch (ev.key) {
case " ":
this.value = value;
fireEvent(this, "value-changed", { value });
break;
case "ArrowUp":
case "ArrowLeft":
this._activeIndex =
this._activeIndex <= 0
? this.options.length - 1
: this._activeIndex - 1;
break;
case "ArrowDown":
case "ArrowRight":
this._activeIndex = (this._activeIndex + 1) % this.options.length;
break;
case "Home":
this._activeIndex = 0;
break;
case "End":
this._activeIndex = this.options.length - 1;
break;
default:
return;
}
ev.preventDefault();
}
private _handleOptionClick(ev: MouseEvent) {
if (this.disabled) return;
const value = (ev.target as any).value;
this.value = value;
fireEvent(this, "value-changed", { value });
}
private _handleOptionMouseDown(ev: MouseEvent) {
if (this.disabled) return;
ev.preventDefault();
const value = (ev.target as any).value;
this._activeIndex = this.options?.findIndex(
(option) => option.value === value
);
}
private _handleOptionMouseUp(ev: MouseEvent) {
ev.preventDefault();
this._activeIndex = undefined;
}
protected render() {
return html`
<div class="container">
${this.options
? repeat(
this.options,
(option) => option.value,
(option, idx) => this._renderOption(option, idx)
)
: nothing}
</div>
`;
}
private _renderOption(option: ControlSelectOption, index: number) {
return html`
<div
id=${`option-${option.value}`}
class=${classMap({
option: true,
selected: this.value === option.value,
focused: this._activeIndex === index,
})}
role="option"
.value=${option.value}
aria-selected=${this.value === option.value}
aria-label=${ifDefined(option.label)}
title=${ifDefined(option.label)}
@click=${this._handleOptionClick}
@mousedown=${this._handleOptionMouseDown}
@mouseup=${this._handleOptionMouseUp}
>
<div class="content">
${option.path
? html`<ha-svg-icon .path=${option.path}></ha-svg-icon>`
: option.icon
? html`<ha-icon .icon=${option.icon}></ha-icon> `
: nothing}
${option.label && !this.hideLabel
? html`<span>${option.label}</span>`
: nothing}
</div>
</div>
`;
}
static get styles(): CSSResultGroup {
return css`
:host {
display: block;
--control-select-color: var(--primary-color);
--control-select-focused-opacity: 0.2;
--control-select-selected-opacity: 1;
--control-select-background: var(--disabled-color);
--control-select-background-opacity: 0.2;
--control-select-thickness: 40px;
--control-select-border-radius: 10px;
--control-select-padding: 4px;
--control-select-button-border-radius: calc(
var(--control-select-border-radius) - var(--control-select-padding)
);
--mdc-icon-size: 20px;
height: var(--control-select-thickness);
width: 100%;
border-radius: var(--control-select-border-radius);
outline: none;
transition: box-shadow 180ms ease-in-out;
font-style: normal;
font-weight: 500;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
:host(:focus-visible) {
box-shadow: 0 0 0 2px var(--control-select-color);
}
:host([vertical]) {
width: var(--control-select-thickness);
height: 100%;
}
.container {
position: relative;
height: 100%;
width: 100%;
border-radius: var(--control-select-border-radius);
transform: translateZ(0);
overflow: hidden;
display: flex;
flex-direction: row;
padding: var(--control-select-padding);
box-sizing: border-box;
}
.container::before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: var(--control-select-background);
opacity: var(--control-select-background-opacity);
}
.container > *:not(:last-child) {
margin-right: var(--control-select-padding);
margin-inline-end: var(--control-select-padding);
margin-inline-start: initial;
direction: var(--direction);
}
.option {
cursor: pointer;
position: relative;
flex: 1;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--control-select-button-border-radius);
overflow: hidden;
color: var(--primary-text-color);
/* For safari border-radius overflow */
z-index: 0;
}
.content > *:not(:last-child) {
margin-bottom: 4px;
}
.option::before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--control-select-color);
opacity: 0;
transition: background-color ease-in-out 180ms, opacity ease-in-out 80ms;
}
.option.focused::before,
.option:hover::before {
opacity: var(--control-select-focused-opacity);
}
.option.selected {
color: white;
}
.option.selected::before {
opacity: var(--control-select-selected-opacity);
}
.option .content {
position: relative;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
:host([vertical]) {
width: var(--control-select-thickness);
height: auto;
}
:host([vertical]) .container {
flex-direction: column;
}
:host([vertical]) .container > *:not(:last-child) {
margin-right: initial;
margin-inline-end: initial;
margin-bottom: var(--control-select-padding);
}
:host([disabled]) {
--control-select-color: var(--disabled-color);
--control-select-focused-opacity: 0;
}
:host([disabled]) .option {
cursor: not-allowed;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-control-select": HaControlSelect;
}
}

55
src/components/ha-control-slider.ts
View File

@ -29,19 +29,6 @@ const A11Y_KEY_CODES = new Set([
"End",
]);
const getPercentageFromEvent = (e: HammerInput, vertical: boolean) => {
if (vertical) {
const y = e.center.y;
const offset = e.target.getBoundingClientRect().top;
const total = e.target.clientHeight;
return Math.max(Math.min(1, 1 - (y - offset) / total), 0);
}
const x = e.center.x;
const offset = e.target.getBoundingClientRect().left;
const total = e.target.clientWidth;
return Math.max(Math.min(1, (x - offset) / total), 0);
};
@customElement("ha-control-slider")
export class HaControlSlider extends LitElement {
@property({ type: Boolean, reflect: true })
@ -157,7 +144,7 @@ export class HaControlSlider extends LitElement {
});
this._mc.on("panmove", (e) => {
if (this.disabled) return;
const percentage = getPercentageFromEvent(e, this.vertical);
const percentage = this._getPercentageFromEvent(e);
this.value = this.percentageToValue(percentage);
const value = this.steppedValue(this.value);
fireEvent(this, "slider-moved", { value });
@ -165,7 +152,7 @@ export class HaControlSlider extends LitElement {
this._mc.on("panend", (e) => {
if (this.disabled) return;
this.pressed = false;
const percentage = getPercentageFromEvent(e, this.vertical);
const percentage = this._getPercentageFromEvent(e);
this.value = this.steppedValue(this.percentageToValue(percentage));
fireEvent(this, "slider-moved", { value: undefined });
fireEvent(this, "value-changed", { value: this.value });
@ -173,7 +160,7 @@ export class HaControlSlider extends LitElement {
this._mc.on("singletap", (e) => {
if (this.disabled) return;
const percentage = getPercentageFromEvent(e, this.vertical);
const percentage = this._getPercentageFromEvent(e);
this.value = this.steppedValue(this.percentageToValue(percentage));
fireEvent(this, "value-changed", { value: this.value });
});
@ -234,6 +221,19 @@ export class HaControlSlider extends LitElement {
fireEvent(this, "value-changed", { value: this.value });
}
private _getPercentageFromEvent = (e: HammerInput) => {
if (this.vertical) {
const y = e.center.y;
const offset = e.target.getBoundingClientRect().top;
const total = e.target.clientHeight;
return Math.max(Math.min(1, 1 - (y - offset) / total), 0);
}
const x = e.center.x;
const offset = e.target.getBoundingClientRect().left;
const total = e.target.clientWidth;
return Math.max(Math.min(1, (x - offset) / total), 0);
};
protected render(): TemplateResult {
return html`
<div
@ -244,13 +244,13 @@ export class HaControlSlider extends LitElement {
})}
>
<div class="slider-track-background"></div>
<slot name="background"></slot>
${this.mode === "cursor"
? this.value != null
? html`
<div
class=${classMap({
"slider-track-cursor": true,
vertical: this.vertical,
})}
></div>
`
@ -259,7 +259,6 @@ export class HaControlSlider extends LitElement {
<div
class=${classMap({
"slider-track-bar": true,
vertical: this.vertical,
[this.mode ?? "start"]: true,
"show-handle": this.showHandle,
})}
@ -312,6 +311,13 @@ export class HaControlSlider extends LitElement {
background: var(--control-slider-background);
opacity: var(--control-slider-background-opacity);
}
::slotted([slot="background"]) {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.slider .slider-track-bar {
--border-radius: var(--control-slider-border-radius);
--handle-size: 4px;
@ -369,7 +375,7 @@ export class HaControlSlider extends LitElement {
left: var(--handle-margin);
}
.slider .slider-track-bar.vertical {
:host([vertical]) .slider .slider-track-bar {
bottom: 0;
left: 0;
transform: translate3d(
@ -379,7 +385,7 @@ export class HaControlSlider extends LitElement {
);
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.slider .slider-track-bar.vertical:after {
:host([vertical]) .slider .slider-track-bar:after {
top: var(--handle-margin);
right: 0;
left: 0;
@ -387,7 +393,7 @@ export class HaControlSlider extends LitElement {
width: 50%;
height: var(--handle-size);
}
.slider .slider-track-bar.vertical.end {
:host([vertical]) .slider .slider-track-bar.end {
top: 0;
bottom: initial;
transform: translate3d(
@ -397,7 +403,7 @@ export class HaControlSlider extends LitElement {
);
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.slider .slider-track-bar.vertical.end::after {
:host([vertical]) .slider .slider-track-bar.end::after {
top: initial;
bottom: var(--handle-margin);
}
@ -426,13 +432,14 @@ export class HaControlSlider extends LitElement {
bottom: 0;
left: calc(var(--value, 0) * (100% - var(--cursor-size)));
width: var(--cursor-size);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.slider .slider-track-cursor:after {
height: 50%;
width: var(--handle-size);
}
.slider .slider-track-cursor.vertical {
:host([vertical]) .slider .slider-track-cursor {
top: initial;
right: 0;
left: 0;
@ -440,7 +447,7 @@ export class HaControlSlider extends LitElement {
height: var(--cursor-size);
width: 100%;
}
.slider .slider-track-cursor.vertical:after {
:host([vertical]) .slider .slider-track-cursor:after {
height: var(--handle-size);
width: 50%;
}

3
src/components/ha-dialog-date-picker.ts
View File

@ -96,6 +96,9 @@ export class HaDialogDatePicker extends LitElement {
app-datepicker::part(calendar-day):focus {
outline: none;
}
app-datepicker::part(body) {
direction: ltr;
}
@media all and (min-width: 450px) {
ha-dialog {
--mdc-dialog-min-width: 300px;

22
src/components/ha-drawer.ts Normal file
View File

@ -0,0 +1,22 @@
import { DrawerBase } from "@material/mwc-drawer/mwc-drawer-base";
import { styles } from "@material/mwc-drawer/mwc-drawer.css";
import { css } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-drawer")
export class HaDrawer extends DrawerBase {
static override styles = [
styles,
css`
.mdc-drawer {
top: 0;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-drawer": HaDrawer;
}
}

6
src/components/ha-form/ha-form-expandable.ts
View File

@ -1,4 +1,4 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../types";
import "./ha-form";
@ -26,7 +26,7 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
@property() public computeHelper?: (schema: HaFormSchema) => string;
protected render(): TemplateResult {
protected render() {
return html`
<ha-expansion-panel outlined .expanded=${Boolean(this.schema.expanded)}>
<div
@ -38,7 +38,7 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
? html` <ha-icon .icon=${this.schema.icon}></ha-icon> `
: this.schema.iconPath
? html` <ha-svg-icon .path=${this.schema.iconPath}></ha-svg-icon> `
: null}
: nothing}
${this.schema.title}
</div>
<div class="content">

3
src/components/ha-header-bar.ts
View File

@ -32,6 +32,9 @@ export class HaHeaderBar extends LitElement {
return [
unsafeCSS(topAppBarStyles),
css`
.mdc-top-app-bar__row {
height: var(--header-bar-height, 64px);
}
.mdc-top-app-bar {
position: static;
color: var(--mdc-theme-on-primary, #fff);

6
src/components/ha-help-tooltip.ts
View File

@ -1,5 +1,5 @@
import { mdiHelpCircle } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "./ha-svg-icon";
@ -13,11 +13,11 @@ export class HaHelpTooltip extends LitElement {
protected render(): TemplateResult {
return html`
<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
<paper-tooltip
<simple-tooltip
offset="4"
.position=${this.position}
.fitToVisibleBounds=${true}
>${this.label}</paper-tooltip
>${this.label}</simple-tooltip
>
`;
}

9
src/components/ha-icon-overflow-menu.ts
View File

@ -1,6 +1,6 @@
import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
@ -75,9 +75,12 @@ export class HaIconOverflowMenu extends LitElement {
? html`<div role="separator"></div>`
: html`<div>
${item.tooltip
? html`<paper-tooltip animation-delay="0" position="left">
? html`<simple-tooltip
animation-delay="0"
position="left"
>
${item.tooltip}
</paper-tooltip>`
</simple-tooltip>`
: ""}
<ha-icon-button
@click=${item.action}

4
src/components/ha-icon.ts
View File

@ -1,4 +1,3 @@
import "@polymer/iron-icon/iron-icon";
import {
css,
CSSResultGroup,
@ -66,7 +65,8 @@ export class HaIcon extends LitElement {
return nothing;
}
if (this._legacy) {
return html`<iron-icon .icon=${this.icon}></iron-icon>`;
return html`<!-- @ts-ignore we don't provice the iron-icon element -->
<iron-icon .icon=${this.icon}></iron-icon>`;
}
return html`<ha-svg-icon
.path=${this._path}

2
src/components/ha-network.ts
View File

@ -1,5 +1,5 @@
import { mdiStar } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
css,
CSSResultGroup,

38
src/components/ha-selector/ha-selector-constant.ts Normal file
View File

@ -0,0 +1,38 @@
import { LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { ConstantSelector } from "../../data/selector";
@customElement("ha-selector-constant")
export class HaSelectorConstant extends LitElement {
@property() public selector!: ConstantSelector;
@property({ type: Boolean }) public disabled = false;
@property() public localizeValue?: (key: string) => string;
protected render() {
if (this.disabled) {
return nothing;
}
const translationKey = this.selector.constant?.translation_key;
const translatedLabel =
translationKey && this.localizeValue
? this.localizeValue(`${translationKey}.value`)
: undefined;
return (
translatedLabel ??
this.selector.constant?.label ??
this.selector.constant?.value ??
nothing
);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-selector-constant": HaSelectorConstant;
}
}

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

@ -2,7 +2,8 @@ import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import type { DurationSelector } from "../../data/selector";
import type { HomeAssistant } from "../../types";
import { HaDurationData } from "../ha-duration-input";
import type { HaDurationData } from "../ha-duration-input";
import "../ha-duration-input";
@customElement("ha-selector-duration")
export class HaTimeDuration extends LitElement {

1
src/components/ha-selector/ha-selector.ts
View File

@ -17,6 +17,7 @@ const LOAD_ELEMENTS = {
boolean: () => import("./ha-selector-boolean"),
color_rgb: () => import("./ha-selector-color-rgb"),
config_entry: () => import("./ha-selector-config-entry"),
constant: () => import("./ha-selector-constant"),
date: () => import("./ha-selector-date"),
datetime: () => import("./ha-selector-datetime"),
device: () => import("./ha-selector-device"),

15
src/components/ha-service-control.ts
View File

@ -360,10 +360,21 @@ export class HaServiceControl extends LitElement {
if (checked) {
this._checkedKeys.add(key);
const defaultValue = this._getServiceInfo(
const field = this._getServiceInfo(
this._value?.service,
this.hass.services
)?.fields.find((field) => field.key === key)?.default;
)?.fields.find((_field) => _field.key === key);
let defaultValue = field?.default;
if (
defaultValue == null &&
field?.selector &&
"constant" in field.selector
) {
defaultValue = field.selector.constant?.value;
}
if (defaultValue != null) {
data = {
...this._value?.data,

40
src/components/ha-settings-row.ts
View File

@ -1,4 +1,3 @@
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
@ -13,13 +12,14 @@ export class HaSettingsRow extends LitElement {
return html`
<div class="prefix-wrap">
<slot name="prefix"></slot>
<paper-item-body
<div
class="body"
?two-line=${!this.threeLine}
?three-line=${this.threeLine}
>
<slot name="heading"></slot>
<div secondary><slot name="description"></slot></div>
</paper-item-body>
<div class="secondary"><slot name="description"></slot></div>
</div>
</div>
<div class="content"><slot></slot></div>
`;
@ -34,10 +34,38 @@ export class HaSettingsRow extends LitElement {
align-self: auto;
align-items: center;
}
paper-item-body {
.body {
padding: 8px 16px 8px 0;
overflow: hidden;
display: var(--layout-vertical_-_display);
flex-direction: var(--layout-vertical_-_flex-direction);
justify-content: var(--layout-center-justified_-_justify-content);
flex: var(--layout-flex_-_flex);
flex-basis: var(--layout-flex_-_flex-basis);
}
paper-item-body[two-line] {
.body[three-line] {
min-height: var(--paper-item-body-three-line-min-height, 88px);
}
.body > * {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.body > .secondary {
font-family: var(--paper-font-body1_-_font-family);
-webkit-font-smoothing: var(
--paper-font-body1_-_-webkit-font-smoothing
);
font-size: var(--paper-font-body1_-_font-size);
font-weight: var(--paper-font-body1_-_font-weight);
line-height: var(--paper-font-body1_-_line-height);
color: var(
--paper-item-body-secondary-color,
var(--secondary-text-color)
);
}
.body[two-line] {
min-height: calc(
var(--paper-item-body-two-line-min-height, 72px) - 16px
);

14
src/components/ha-sidebar.ts
View File

@ -846,17 +846,9 @@ class HaSidebar extends SubscribeMixin(LitElement) {
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
border-right: 1px solid var(--divider-color);
background-color: var(--sidebar-background-color);
width: 56px;
}
:host([expanded]) {
width: 256px;
width: calc(256px + env(safe-area-inset-left));
}
:host([rtl]) {
border-right: 0;
border-left: 1px solid var(--divider-color);
width: 100%;
box-sizing: border-box;
}
.menu {
height: var(--header-height);
@ -1070,8 +1062,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
.notification-badge,
.configuration-badge {
left: calc(var(--app-drawer-width) - 42px);
position: absolute;
left: calc(var(--app-drawer-width, 248px) - 42px);
min-width: 20px;
box-sizing: border-box;
border-radius: 50%;

12
src/components/ha-target-picker.ts
View File

@ -9,7 +9,7 @@ import {
mdiSofa,
mdiUnfoldMoreVertical,
} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
import { HassEntity, HassServiceTarget } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, unsafeCSS, nothing } from "lit";
@ -248,10 +248,10 @@ export class HaTargetPicker extends LitElement {
.type=${type}
@click=${this._handleExpand}
></ha-icon-button>
<paper-tooltip class="expand" animation-delay="0"
<simple-tooltip class="expand" animation-delay="0"
>${this.hass.localize(
`ui.components.target-picker.expand_${type}`
)}</paper-tooltip
)}</simple-tooltip
>
</span>`}
<span role="gridcell">
@ -266,10 +266,10 @@ export class HaTargetPicker extends LitElement {
.type=${type}
@click=${this._handleRemove}
></ha-icon-button>
<paper-tooltip animation-delay="0"
<simple-tooltip animation-delay="0"
>${this.hass.localize(
`ui.components.target-picker.remove_${type}`
)}</paper-tooltip
)}</simple-tooltip
>
</span>
</div>
@ -670,7 +670,7 @@ export class HaTargetPicker extends LitElement {
.mdc-chip:hover {
z-index: 5;
}
paper-tooltip.expand {
simple-tooltip.expand {
min-width: 200px;
}
:host([disabled]) .mdc-chip {

34
src/components/ha-top-app-bar-fixed.ts Normal file
View File

@ -0,0 +1,34 @@
import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base";
import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
import { css } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-top-app-bar-fixed")
export class HaTopAppBarFixed extends TopAppBarFixedBase {
static override styles = [
styles,
css`
.mdc-top-app-bar__row {
height: var(--header-height);
}
.mdc-top-app-bar--fixed-adjust {
padding-top: var(--header-height);
}
.mdc-top-app-bar {
--mdc-typography-headline6-font-weight: 400;
color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
background-color: var(
--app-header-background-color,
var(--mdc-theme-primary)
);
border-bottom: var(--app-header-border-bottom);
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-top-app-bar-fixed": HaTopAppBarFixed;
}
}

34
src/components/ha-top-app-bar.ts Normal file
View File

@ -0,0 +1,34 @@
import { TopAppBarBase } from "@material/mwc-top-app-bar/mwc-top-app-bar-base";
import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
import { css } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-top-app-bar")
export class HaTopAppBar extends TopAppBarBase {
static override styles = [
styles,
css`
.mdc-top-app-bar__row {
height: var(--header-height);
}
.mdc-top-app-bar--fixed-adjust {
padding-top: var(--header-height);
}
.mdc-top-app-bar {
--mdc-typography-headline6-font-weight: 400;
color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
background-color: var(
--app-header-background-color,
var(--mdc-theme-primary)
);
border-bottom: var(--app-header-border-bottom);
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-top-app-bar": HaTopAppBar;
}
}

2
src/components/ha-vacuum-state.js
View File

@ -76,7 +76,7 @@ class HaVacuumState extends LocalizeMixin(PolymerElement) {
? this.localize(
`ui.card.vacuum.actions.${STATES_INTERCEPTABLE[state].action}`
)
: this.localize(`component.vacuum._.${state}`);
: this.localize(`component.vacuum.entity_component._.state.${state}`);
}
_callService(ev) {

14
src/components/map/ha-map.ts
View File

@ -50,6 +50,10 @@ export class HaMap extends ReactiveElement {
@property({ type: Boolean }) public autoFit = false;
@property({ type: Boolean }) public renderPassive = false;
@property({ type: Boolean }) public interactiveZones = false;
@property({ type: Boolean }) public fitZones?: boolean;
@property({ type: Boolean }) public darkMode?: boolean;
@ -321,6 +325,10 @@ export class HaMap extends ReactiveElement {
const computedStyles = getComputedStyle(this);
const zoneColor = computedStyles.getPropertyValue("--accent-color");
const passiveZoneColor = computedStyles.getPropertyValue(
"--secondary-text-color"
);
const darkPrimaryColor = computedStyles.getPropertyValue(
"--dark-primary-color"
);
@ -350,7 +358,7 @@ export class HaMap extends ReactiveElement {
if (computeStateDomain(stateObj) === "zone") {
// DRAW ZONE
if (passive) {
if (passive && !this.renderPassive) {
continue;
}
@ -374,7 +382,7 @@ export class HaMap extends ReactiveElement {
iconSize: [24, 24],
className,
}),
interactive: false,
interactive: this.interactiveZones,
title,
})
);
@ -383,7 +391,7 @@ export class HaMap extends ReactiveElement {
this._mapZones.push(
Leaflet.circle([latitude, longitude], {
interactive: false,
color: zoneColor,
color: passive ? passiveZoneColor : zoneColor,
radius,
})
);

6
src/components/media-player/ha-media-player-browse.ts
View File

@ -5,7 +5,7 @@ import "@material/mwc-button/mwc-button";
import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
css,
CSSResultGroup,
@ -600,8 +600,8 @@ export class HaMediaPlayerBrowse extends LitElement {
</div>
<div class="title">
${child.title}
<paper-tooltip fitToVisibleBounds position="top" offset="4"
>${child.title}</paper-tooltip
<simple-tooltip fitToVisibleBounds position="top" offset="4"
>${child.title}</simple-tooltip
>
</div>
</ha-card>

6
src/components/tile/ha-tile-image.ts
View File

@ -1,4 +1,4 @@
import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
import { CSSResultGroup, html, css, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
@ -8,12 +8,12 @@ export class HaTileImage extends LitElement {
@property() public imageAlt?: string;
protected render(): TemplateResult {
protected render() {
return html`
<div class="image">
${this.imageUrl
? html`<img alt=${ifDefined(this.imageAlt)} src=${this.imageUrl} />`
: null}
: nothing}
</div>
`;
}

13
src/components/tile/ha-tile-info.ts
View File

@ -1,4 +1,11 @@
import { CSSResultGroup, html, css, LitElement, TemplateResult } from "lit";
import {
CSSResultGroup,
html,
css,
LitElement,
TemplateResult,
nothing,
} from "lit";
import { customElement, property } from "lit/decorators";
@customElement("ha-tile-info")
@ -7,13 +14,13 @@ export class HaTileInfo extends LitElement {
@property() public secondary?: string | TemplateResult<1>;
protected render(): TemplateResult {
protected render() {
return html`
<div class="info">
<span class="primary">${this.primary}</span>
${this.secondary
? html`<span class="secondary">${this.secondary}</span>`
: null}
: nothing}
</div>
`;
}

70
src/components/tile/ha-tile-slider.ts
View File

@ -1,70 +0,0 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import "../ha-control-slider";
@customElement("ha-tile-slider")
export class HaTileSlider extends LitElement {
@property({ type: Boolean })
public disabled = false;
@property()
public mode?: "start" | "end" | "cursor" = "start";
@property({ type: Boolean, attribute: "show-handle" })
public showHandle = false;
@property({ type: Number })
public value?: number;
@property({ type: Number })
public step = 1;
@property({ type: Number })
public min = 0;
@property({ type: Number })
public max = 100;
@property() public label?: string;
protected render(): TemplateResult {
return html`
<ha-control-slider
.disabled=${this.disabled}
.mode=${this.mode}
.value=${this.value}
.step=${this.step}
.min=${this.min}
.max=${this.max}
aria-label=${ifDefined(this.label)}
.showHandle=${this.showHandle}
>
</ha-control-slider>
`;
}
static get styles(): CSSResultGroup {
return css`
ha-control-slider {
--control-slider-color: var(--tile-slider-color, var(--primary-color));
--control-slider-background: var(
--tile-slider-background,
var(--disabled-color)
);
--control-slider-background-opacity: var(
--tile-slider-background-opacity,
0.2
);
--control-slider-thickness: 40px;
--control-slider-border-radius: 10px;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-tile-slider": HaTileSlider;
}
}

74
src/data/alarm_control_panel.ts
View File

@ -1,3 +1,15 @@
import {
mdiAirplane,
mdiHome,
mdiLock,
mdiMoonWaningCrescent,
mdiShield,
mdiShieldOff,
} from "@mdi/js";
import {
HassEntityAttributeBase,
HassEntityBase,
} from "home-assistant-js-websocket";
import { HomeAssistant } from "../types";
export const FORMAT_TEXT = "text";
@ -12,6 +24,16 @@ export const enum AlarmControlPanelEntityFeature {
ARM_VACATION = 32,
}
interface AlarmControlPanelEntityAttributes extends HassEntityAttributeBase {
code_format?: "text" | "number";
changed_by?: string | null;
code_arm_required?: boolean;
}
export interface AlarmControlPanelEntity extends HassEntityBase {
attributes: AlarmControlPanelEntityAttributes;
}
export const callAlarmAction = (
hass: HomeAssistant,
entity: string,
@ -29,3 +51,55 @@ export const callAlarmAction = (
code,
});
};
export type AlarmMode =
| "away"
| "home"
| "night"
| "vacation"
| "custom_bypass"
| "disarmed";
type AlarmConfig = {
service: string;
feature?: AlarmControlPanelEntityFeature;
state: string;
path: string;
};
export const ALARM_MODES: Record<AlarmMode, AlarmConfig> = {
away: {
feature: AlarmControlPanelEntityFeature.ARM_AWAY,
service: "alarm_arm_away",
state: "armed_away",
path: mdiLock,
},
home: {
feature: AlarmControlPanelEntityFeature.ARM_HOME,
service: "alarm_arm_home",
state: "armed_home",
path: mdiHome,
},
custom_bypass: {
feature: AlarmControlPanelEntityFeature.ARM_CUSTOM_BYPASS,
service: "alarm_arm_custom_bypass",
state: "armed_custom_bypass",
path: mdiShield,
},
night: {
feature: AlarmControlPanelEntityFeature.ARM_NIGHT,
service: "alarm_arm_night",
state: "armed_night",
path: mdiMoonWaningCrescent,
},
vacation: {
feature: AlarmControlPanelEntityFeature.ARM_VACATION,
service: "alarm_arm_vacation",
state: "armed_vacation",
path: mdiAirplane,
},
disarmed: {
service: "alarm_disarm",
state: "disarmed",
path: mdiShieldOff,
},
};

1
src/data/automation.ts
View File

@ -197,6 +197,7 @@ export interface StateCondition extends BaseCondition {
attribute?: string;
state: string | number | string[];
for?: string | number | ForDict;
match?: "all" | "any";
}
export interface NumericStateCondition extends BaseCondition {

235
src/data/automation_i18n.ts
View File

@ -10,7 +10,11 @@ import {
localizeDeviceAutomationCondition,
localizeDeviceAutomationTrigger,
} from "./device_automation";
import { formatAttributeName } from "./entity_attributes";
import {
computeAttributeNameDisplay,
computeAttributeValueDisplay,
} from "../common/entity/compute_attribute_display";
import { computeStateDisplay } from "../common/entity/compute_state_display";
const describeDuration = (forTime: number | string | ForDict) => {
let duration: string | null;
@ -67,7 +71,12 @@ export const describeTrigger = (
const entity = stateObj ? computeStateName(stateObj) : trigger.entity_id;
if (trigger.attribute) {
base += ` ${formatAttributeName(trigger.attribute)} from`;
base += ` ${computeAttributeNameDisplay(
hass.localize,
stateObj,
hass.entities,
trigger.attribute
)} from`;
}
base += ` ${entity} is`;
@ -98,11 +107,18 @@ export const describeTrigger = (
if (trigger.platform === "state") {
let base = "When";
let entities = "";
const states = hass.states;
if (trigger.attribute) {
base += ` ${formatAttributeName(trigger.attribute)} from`;
const stateObj = Array.isArray(trigger.entity_id)
? hass.states[trigger.entity_id[0]]
: hass.states[trigger.entity_id];
base += ` ${computeAttributeNameDisplay(
hass.localize,
stateObj,
hass.entities,
trigger.attribute
)} of`;
}
if (Array.isArray(trigger.entity_id)) {
@ -129,35 +145,120 @@ export const describeTrigger = (
base += ` ${entities} changes`;
if (trigger.from) {
let from = "";
if (Array.isArray(trigger.from)) {
const stateObj =
hass.states[
Array.isArray(trigger.entity_id)
? trigger.entity_id[0]
: trigger.entity_id
];
if (trigger.from !== undefined) {
if (trigger.from === null) {
if (!trigger.attribute) {
base += " from any state";
}
} else if (Array.isArray(trigger.from)) {
let from = "";
for (const [index, state] of trigger.from.entries()) {
from += `${index > 0 ? "," : ""} ${
trigger.from.length > 1 && index === trigger.from.length - 1
? "or"
: ""
} ${state}`;
} '${
trigger.attribute
? computeAttributeValueDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
trigger.attribute,
state
)
: computeStateDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
state
)
}'`;
}
if (from) {
base += ` from ${from}`;
}
} else {
from = trigger.from.toString();
base += ` from '${
trigger.attribute
? computeAttributeValueDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
trigger.attribute,
trigger.from
).toString()
: computeStateDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
trigger.from.toString()
).toString()
}'`;
}
base += ` from ${from}`;
}
if (trigger.to) {
let to = "";
if (Array.isArray(trigger.to)) {
if (trigger.to !== undefined) {
if (trigger.to === null) {
if (!trigger.attribute) {
base += " to any state";
}
} else if (Array.isArray(trigger.to)) {
let to = "";
for (const [index, state] of trigger.to.entries()) {
to += `${index > 0 ? "," : ""} ${
trigger.to.length > 1 && index === trigger.to.length - 1 ? "or" : ""
} ${state}`;
} '${
trigger.attribute
? computeAttributeValueDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
trigger.attribute,
state
).toString()
: computeStateDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
state
).toString()
}'`;
}
} else if (trigger.to) {
to = trigger.to.toString();
if (to) {
base += ` to ${to}`;
}
} else {
base += ` to '${
trigger.attribute
? computeAttributeValueDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
trigger.attribute,
trigger.to
).toString()
: computeStateDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
trigger.to.toString()
).toString()
}'`;
}
base += ` to ${to}`;
}
if (trigger.for) {
@ -412,36 +513,108 @@ export const describeCondition = (
// State Condition
if (condition.condition === "state") {
let base = "Confirm";
const stateObj = hass.states[condition.entity_id];
const entity = stateObj
? computeStateName(stateObj)
: condition.entity_id
? condition.entity_id
: "an entity";
if (!condition.entity_id) {
return `${base} state`;
}
if ("attribute" in condition) {
base += ` ${condition.attribute} from`;
if (condition.attribute) {
const stateObj = Array.isArray(condition.entity_id)
? hass.states[condition.entity_id[0]]
: hass.states[condition.entity_id];
base += ` ${computeAttributeNameDisplay(
hass.localize,
stateObj,
hass.entities,
condition.attribute
)} of`;
}
if (Array.isArray(condition.entity_id)) {
let entities = "";
for (const [index, entity] of condition.entity_id.entries()) {
if (hass.states[entity]) {
entities += `${index > 0 ? "," : ""} ${
condition.entity_id.length > 1 &&
index === condition.entity_id.length - 1
? condition.match === "any"
? "or"
: "and"
: ""
} ${computeStateName(hass.states[entity]) || entity}`;
}
}
if (entities) {
base += ` ${entities} ${condition.entity_id.length > 1 ? "are" : "is"}`;
} else {
// no entity_id or empty array
base += " an entity";
}
} else if (condition.entity_id) {
base += ` ${
hass.states[condition.entity_id]
? computeStateName(hass.states[condition.entity_id])
: condition.entity_id
} is`;
}
let states = "";
const stateObj =
hass.states[
Array.isArray(condition.entity_id)
? condition.entity_id[0]
: condition.entity_id
];
if (Array.isArray(condition.state)) {
for (const [index, state] of condition.state.entries()) {
states += `${index > 0 ? "," : ""} ${
condition.state.length > 1 && index === condition.state.length - 1
? "or"
: ""
} ${state}`;
} '${
condition.attribute
? computeAttributeValueDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
condition.attribute,
state
)
: computeStateDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
state
)
}'`;
}
} else if (condition.state) {
states = condition.state.toString();
} else if (condition.state !== "") {
states = `'${
condition.attribute
? computeAttributeValueDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
condition.attribute,
condition.state
).toString()
: computeStateDisplay(
hass.localize,
stateObj,
hass.locale,
hass.entities,
condition.state.toString()
).toString()
}'`;
}
if (!states) {
states = "a state";
}
base += ` ${entity} is ${states}`;
base += ` ${states}`;
if (condition.for) {
const duration = describeDuration(condition.for);

2
src/data/cloud.ts
View File

@ -11,8 +11,6 @@ interface CloudStatusNotLoggedIn {
export interface GoogleEntityConfig {
should_expose?: boolean | null;
override_name?: string;
aliases?: string[];
disable_2fa?: boolean;
}

24
src/data/context.ts Normal file
View File

@ -0,0 +1,24 @@
import { createContext } from "@lit-labs/context";
import { HomeAssistant } from "../types";
import { EntityRegistryEntry } from "./entity_registry";
export const statesContext = createContext<HomeAssistant["states"]>("states");
export const entitiesContext =
createContext<HomeAssistant["entities"]>("entities");
export const devicesContext =
createContext<HomeAssistant["devices"]>("devices");
export const areasContext = createContext<HomeAssistant["areas"]>("areas");
export const localizeContext =
createContext<HomeAssistant["localize"]>("localize");
export const localeContext = createContext<HomeAssistant["locale"]>("locale");
export const configContext = createContext<HomeAssistant["config"]>("config");
export const themesContext = createContext<HomeAssistant["themes"]>("themes");
export const selectedThemeContext =
createContext<HomeAssistant["selectedTheme"]>("selectedTheme");
export const userContext = createContext<HomeAssistant["user"]>("user");
export const userDataContext =
createContext<HomeAssistant["userData"]>("userData");
export const panelsContext = createContext<HomeAssistant["panels"]>("panels");
export const extendedEntitiesContext =
createContext<EntityRegistryEntry[]>("extendedEntities");

2
src/data/conversation.ts
View File

@ -44,7 +44,7 @@ interface IntentResultError extends IntentResultBase {
};
}
interface ConversationResult {
export interface ConversationResult {
conversation_id: string | null;
response:
| IntentResultActionDone

85
src/data/entity_attributes.ts
View File

@ -1,17 +1,5 @@
import { html, TemplateResult } from "lit";
import { until } from "lit/directives/until";
import checkValidDate from "../common/datetime/check_valid_date";
import { formatDate } from "../common/datetime/format_date";
import { formatDateTimeWithSeconds } from "../common/datetime/format_date_time";
import { formatNumber } from "../common/number/format_number";
import { capitalizeFirstLetter } from "../common/string/capitalize-first-letter";
import { isDate } from "../common/string/is_date";
import { isTimestamp } from "../common/string/is_timestamp";
import { HomeAssistant } from "../types";
let jsYamlPromise: Promise<typeof import("../resources/js-yaml-dump")>;
export const STATE_ATTRIBUTES = [
"entity_id",
"assumed_state",
"attribution",
"custom_ui_more_info",
@ -32,74 +20,3 @@ export const STATE_ATTRIBUTES = [
"supported_features",
"unit_of_measurement",
];
// Convert from internal snake_case format to user-friendly format
export function formatAttributeName(value: string): string {
value = value
.replace(/_/g, " ")
.replace(/\bid\b/g, "ID")
.replace(/\bip\b/g, "IP")
.replace(/\bmac\b/g, "MAC")
.replace(/\bgps\b/g, "GPS");
return capitalizeFirstLetter(value);
}
export function formatAttributeValue(
hass: HomeAssistant,
value: any
): string | TemplateResult {
if (value === null) {
return "—";
}
// YAML handling
if (
(Array.isArray(value) && value.some((val) => val instanceof Object)) ||
(!Array.isArray(value) && value instanceof Object)
) {
if (!jsYamlPromise) {
jsYamlPromise = import("../resources/js-yaml-dump");
}
const yaml = jsYamlPromise.then((jsYaml) => jsYaml.dump(value));
return html`<pre>${until(yaml, "")}</pre>`;
}
if (typeof value === "number") {
return formatNumber(value, hass.locale);
}
if (typeof value === "string") {
// URL handling
if (value.startsWith("http")) {
try {
// If invalid URL, exception will be raised
const url = new URL(value);
if (url.protocol === "http:" || url.protocol === "https:")
return html`<a target="_blank" rel="noreferrer" href=${value}
>${value}</a
>`;
} catch (_) {
// Nothing to do here
}
}
// Date handling
if (isDate(value, true)) {
// Timestamp handling
if (isTimestamp(value)) {
const date = new Date(value);
if (checkValidDate(date)) {
return formatDateTimeWithSeconds(date, hass.locale);
}
}
// Value was not a timestamp, so only do date formatting
const date = new Date(value);
if (checkValidDate(date)) {
return formatDate(date, hass.locale);
}
}
}
return Array.isArray(value) ? value.join(", ") : value;
}

71
src/data/fan.ts
View File

@ -1,3 +1,10 @@
import {
mdiFan,
mdiFanOff,
mdiFanSpeed1,
mdiFanSpeed2,
mdiFanSpeed3,
} from "@mdi/js";
import {
HassEntityAttributeBase,
HassEntityBase,
@ -11,7 +18,7 @@ export const enum FanEntityFeature {
}
interface FanEntityAttributes extends HassEntityAttributeBase {
direction?: number;
direction?: string;
oscillating?: boolean;
percentage?: number;
percentage_step?: number;
@ -22,3 +29,65 @@ interface FanEntityAttributes extends HassEntityAttributeBase {
export interface FanEntity extends HassEntityBase {
attributes: FanEntityAttributes;
}
export type FanSpeed = "off" | "low" | "medium" | "high" | "on";
export const FAN_SPEEDS: Partial<Record<number, FanSpeed[]>> = {
2: ["off", "on"],
3: ["off", "low", "high"],
4: ["off", "low", "medium", "high"],
};
export function fanPercentageToSpeed(
stateObj: FanEntity,
value: number
): FanSpeed {
const step = stateObj.attributes.percentage_step ?? 1;
const speedValue = Math.round(value / step);
const speedCount = Math.round(100 / step) + 1;
const speeds = FAN_SPEEDS[speedCount];
return speeds?.[speedValue] ?? "off";
}
export function fanSpeedToPercentage(
stateObj: FanEntity,
speed: FanSpeed
): number {
const step = stateObj.attributes.percentage_step ?? 1;
const speedCount = Math.round(100 / step) + 1;
const speeds = FAN_SPEEDS[speedCount];
if (!speeds) {
return 0;
}
const speedValue = speeds.indexOf(speed);
if (speedValue === -1) {
return 0;
}
return Math.round(speedValue * step);
}
export function computeFanSpeedCount(stateObj: FanEntity): number {
const step = stateObj.attributes.percentage_step ?? 1;
const speedCount = Math.round(100 / step) + 1;
return speedCount;
}
export function computeFanSpeedIcon(
stateObj: FanEntity,
speed: FanSpeed
): string {
const speedCount = computeFanSpeedCount(stateObj);
const speeds = FAN_SPEEDS[speedCount];
const index = speeds?.indexOf(speed) ?? 1;
return speed === "on"
? mdiFan
: speed === "off"
? mdiFanOff
: [mdiFanSpeed1, mdiFanSpeed2, mdiFanSpeed3][index - 1];
}
export const FAN_SPEED_COUNT_MAX_FOR_BUTTONS = 4;

11
src/data/history.ts
View File

@ -232,7 +232,8 @@ export const subscribeHistoryStatesTimeWindow = (
hoursToShow: number,
entityIds: string[],
minimalResponse = true,
significantChangesOnly = true
significantChangesOnly = true,
noAttributes?: boolean
): Promise<() => Promise<void>> => {
const params = {
type: "history/stream",
@ -242,9 +243,11 @@ export const subscribeHistoryStatesTimeWindow = (
).toISOString(),
minimal_response: minimalResponse,
significant_changes_only: significantChangesOnly,
no_attributes: !entityIds.some((entityId) =>
entityIdHistoryNeedsAttributes(hass, entityId)
),
no_attributes:
noAttributes ??
!entityIds.some((entityId) =>
entityIdHistoryNeedsAttributes(hass, entityId)
),
};
const stream = new HistoryStream(hass, hoursToShow);
return hass.connection.subscribeMessage<HistoryStreamMessage>(

2
src/data/icons/haOscillating.ts Normal file
View File

@ -0,0 +1,2 @@
export const haOscillating =
"M12,6C7.963,6 6,9.715 6,12L9,12L5,16L1,12L4,12C4,9.17 5.897,4 12.004,4C18.112,4 20.004,9.17 20.004,12L23.004,12L19.004,16L15.004,12L18.004,12C18.004,9.715 16.037,6 12,6Z";

2
src/data/icons/haOscillatingOff.ts Normal file
View File

@ -0,0 +1,2 @@
export const haOscillatingOff =
"M 2.9003906,0.8203125 1.6289062,2.0917969 6.0566406,6.5195312 C 4.5643882,8.2344127 4,10.461887 4,12 H 1 l 4,4 4,-4 H 6 C 6,10.82424 6.5229215,9.2725296 7.578125,8.0410156 L 19.730469,20.193359 21.003906,18.921875 8.9394531,6.8574219 7.3964844,5.3164062 Z M 12.003906,4 C 10.899236,4 9.9346562,4.1709695 9.0917969,4.4648438 L 10.755859,6.1289062 C 11.146838,6.0472549 11.559859,6 12,6 c 4.036992,0 6.003906,3.7150046 6.003906,6 h -1.376953 l 3.189453,3.1875 3.1875,-3.1875 h -3 c 0,-2.8299944 -1.892012,-8 -8,-8 z";

21
src/data/otbr.ts
View File

@ -9,3 +9,24 @@ export const getOTBRInfo = (hass: HomeAssistant): Promise<OTBRInfo> =>
hass.callWS({
type: "otbr/info",
});
export const OTBRCreateNetwork = (hass: HomeAssistant): Promise<void> =>
hass.callWS({
type: "otbr/create_network",
});
export const OTBRSetNetwork = (
hass: HomeAssistant,
dataset_id: string
): Promise<void> =>
hass.callWS({
type: "otbr/set_network",
dataset_id,
});
export const OTBRGetExtendedAddress = (
hass: HomeAssistant
): Promise<{ extended_address: string }> =>
hass.callWS({
type: "otbr/get_extended_address",
});

9
src/data/selector.ts
View File

@ -13,6 +13,7 @@ export type Selector =
| ColorRGBSelector
| ColorTempSelector
| ConfigEntrySelector
| ConstantSelector
| DateSelector
| DateTimeSelector
| DeviceSelector
@ -88,6 +89,14 @@ export interface ConfigEntrySelector {
} | null;
}
export interface ConstantSelector {
constant: {
value: string | number | boolean;
label?: string;
translation_key?: string;
} | null;
}
export interface DateSelector {
// eslint-disable-next-line @typescript-eslint/ban-types
date: {} | null;

17
src/data/stt.ts Normal file
View File

@ -0,0 +1,17 @@
export interface SpeechMetadata {
language: string;
format: "wav" | "ogg";
codec: "pcm" | "opus";
bit_rate: 8 | 16 | 24 | 32;
sample_rate:
| 8000
| 11000
| 16000
| 18900
| 22000
| 32000
| 37800
| 44100
| 48000;
channel: 1 | 2;
}

10
src/data/thread.ts
View File

@ -4,6 +4,7 @@ export interface ThreadRouter {
brand: "google" | "apple" | "homeassistant";
server: string;
extended_pan_id: string;
extended_address: string;
model_name: string | null;
network_name: string;
vendor_name: string;
@ -87,3 +88,12 @@ export const removeThreadDataSet = (
type: "thread/delete_dataset",
dataset_id,
});
export const setPreferredThreadDataSet = (
hass: HomeAssistant,
dataset_id: string
): Promise<void> =>
hass.callWS({
type: "thread/set_preferred_dataset",
dataset_id,
});

2
src/data/translation.ts
View File

@ -44,8 +44,8 @@ declare global {
export type TranslationCategory =
| "title"
| "state"
| "state_attributes"
| "entity"
| "entity_component"
| "config"
| "config_panel"
| "options"

173
src/data/voice_assistant.ts Normal file
View File

@ -0,0 +1,173 @@
import type { HomeAssistant } from "../types";
import type { ConversationResult } from "./conversation";
import type { ResolvedMediaSource } from "./media_source";
import type { SpeechMetadata } from "./stt";
interface PipelineEventBase {
timestamp: string;
}
interface PipelineRunStartEvent extends PipelineEventBase {
type: "run-start";
data: {
pipeline: string;
language: string;
runner_data: {
stt_binary_handler_id: number | null;
};
};
}
interface PipelineRunEndEvent extends PipelineEventBase {
type: "run-end";
data: Record<string, never>;
}
interface PipelineErrorEvent extends PipelineEventBase {
type: "error";
data: {
code: string;
message: string;
};
}
interface PipelineSTTStartEvent extends PipelineEventBase {
type: "stt-start";
data: {
engine: string;
metadata: SpeechMetadata;
};
}
interface PipelineSTTEndEvent extends PipelineEventBase {
type: "stt-end";
data: {
text: string;
};
}
interface PipelineIntentStartEvent extends PipelineEventBase {
type: "intent-start";
data: {
engine: string;
intent_input: string;
};
}
interface PipelineIntentEndEvent extends PipelineEventBase {
type: "intent-end";
data: {
intent_output: ConversationResult;
};
}
interface PipelineTTSStartEvent extends PipelineEventBase {
type: "tts-start";
data: {
engine: string;
tts_input: string;
};
}
interface PipelineTTSEndEvent extends PipelineEventBase {
type: "tts-end";
data: {
tts_output: ResolvedMediaSource;
};
}
type PipelineRunEvent =
| PipelineRunStartEvent
| PipelineRunEndEvent
| PipelineErrorEvent
| PipelineSTTStartEvent
| PipelineSTTEndEvent
| PipelineIntentStartEvent
| PipelineIntentEndEvent
| PipelineTTSStartEvent
| PipelineTTSEndEvent;
interface PipelineRunOptions {
start_stage: "stt" | "intent" | "tts";
end_stage: "stt" | "intent" | "tts";
language?: string;
pipeline?: string;
input?: { text: string };
conversation_id?: string | null;
}
export interface PipelineRun {
init_options: PipelineRunOptions;
events: PipelineRunEvent[];
stage: "ready" | "stt" | "intent" | "tts" | "done" | "error";
run: PipelineRunStartEvent["data"];
error?: PipelineErrorEvent["data"];
stt?: PipelineSTTStartEvent["data"] & Partial<PipelineSTTEndEvent["data"]>;
intent?: PipelineIntentStartEvent["data"] &
Partial<PipelineIntentEndEvent["data"]>;
tts?: PipelineTTSStartEvent["data"] & Partial<PipelineTTSEndEvent["data"]>;
}
export const runPipelineFromText = (
hass: HomeAssistant,
callback: (event: PipelineRun) => void,
options: PipelineRunOptions
) => {
let run: PipelineRun | undefined;
const unsubProm = hass.connection.subscribeMessage<PipelineRunEvent>(
(updateEvent) => {
if (updateEvent.type === "run-start") {
run = {
init_options: options,
stage: "ready",
run: updateEvent.data,
error: undefined,
stt: undefined,
intent: undefined,
tts: undefined,
events: [updateEvent],
};
callback(run);
return;
}
if (!run) {
// eslint-disable-next-line no-console
console.warn(
"Received unexpected event before receiving session",
updateEvent
);
return;
}
if (updateEvent.type === "stt-start") {
run = { ...run, stage: "stt", stt: updateEvent.data };
} else if (updateEvent.type === "stt-end") {
run = { ...run, stt: { ...run.stt!, ...updateEvent.data } };
} else if (updateEvent.type === "intent-start") {
run = { ...run, stage: "intent", intent: updateEvent.data };
} else if (updateEvent.type === "intent-end") {
run = { ...run, intent: { ...run.intent!, ...updateEvent.data } };
} else if (updateEvent.type === "tts-start") {
run = { ...run, stage: "tts", tts: updateEvent.data };
} else if (updateEvent.type === "tts-end") {
run = { ...run, tts: { ...run.tts!, ...updateEvent.data } };
} else if (updateEvent.type === "run-end") {
run = { ...run, stage: "done" };
unsubProm.then((unsub) => unsub());
} else if (updateEvent.type === "error") {
run = { ...run, stage: "error", error: updateEvent.data };
unsubProm.then((unsub) => unsub());
} else {
run = { ...run };
}
run.events = [...run.events, updateEvent];
callback(run);
},
{
...options,
type: "voice_assistant/run",
}
);
return unsubProm;
};

2
src/dialogs/config-flow/step-flow-form.ts
View File

@ -1,5 +1,5 @@
import "@material/mwc-button";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
css,
CSSResultGroup,

248
src/dialogs/more-info/components/alarm_control_panel/dialog-enter-code.ts Normal file
View File

@ -0,0 +1,248 @@
import "@material/web/button/filled-button";
import "@material/web/iconbutton/filled-icon-button";
import { mdiCheck, mdiClose } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-button";
import "../../../../components/ha-control-button";
import { createCloseHeading } from "../../../../components/ha-dialog";
import "../../../../components/ha-textfield";
import type { HaTextField } from "../../../../components/ha-textfield";
import { HomeAssistant } from "../../../../types";
import { HassDialog } from "../../../make-dialog-manager";
import { EnterCodeDialogParams } from "./show-enter-code-dialog";
const BUTTONS = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"0",
"clear",
"submit",
];
@customElement("dialog-enter-code")
export class DialogEnterCode
extends LitElement
implements HassDialog<EnterCodeDialogParams>
{
@property({ attribute: false }) public hass?: HomeAssistant;
@state() private _dialogParams?: EnterCodeDialogParams;
@query("#code") private _input?: HaTextField;
@state() private _showClearButton = false;
public async showDialog(dialogParams: EnterCodeDialogParams): Promise<void> {
this._dialogParams = dialogParams;
await this.updateComplete;
}
public closeDialog(): void {
if (this._dialogParams?.cancel) {
this._dialogParams.cancel();
}
this._dialogParams = undefined;
this._showClearButton = false;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
private _submit(): void {
this._dialogParams?.submit?.(this._input?.value ?? "");
this._dialogParams = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
private _numberClick(e: MouseEvent): void {
const val = (e.currentTarget! as any).value;
this._input!.value = this._input!.value + val;
this._showClearButton = true;
}
private _clear(): void {
this._input!.value = "";
this._showClearButton = false;
}
private _inputValueChange(e) {
const val = (e.currentTarget! as any).value;
this._showClearButton = !!val;
}
protected render() {
if (!this._dialogParams || !this.hass) {
return nothing;
}
const isText = this._dialogParams.codeFormat === "text";
if (isText) {
return html`
<ha-dialog
open
@closed=${this.closeDialog}
defaultAction="ignore"
.heading=${this._dialogParams.title ??
this.hass.localize("ui.dialogs.enter_code.title")}
>
<ha-textfield
class="input"
dialogInitialFocus
id="code"
.label=${this.hass.localize("ui.dialogs.enter_code.input_label")}
type="password"
input-mode="text"
></ha-textfield>
<ha-button @click=${this.closeDialog} slot="secondaryAction">
${this._dialogParams.cancelText ??
this.hass.localize("ui.common.cancel")}
</ha-button>
<ha-button @click=${this._submit} slot="primaryAction">
${this._dialogParams.submitText ??
this.hass.localize("ui.common.submit")}
</ha-button>
</ha-dialog>
`;
}
return html`
<ha-dialog
open
.heading=${createCloseHeading(
this.hass,
this._dialogParams.title ?? "Enter code"
)}
@closed=${this.closeDialog}
hideActions
>
<div class="container">
<ha-textfield
@input=${this._inputValueChange}
id="code"
.label=${this.hass.localize("ui.dialogs.enter_code.input_label")}
type="password"
input-mode="numeric"
></ha-textfield>
<div class="keypad">
${BUTTONS.map((value) =>
value === ""
? html`<span></span>`
: value === "clear"
? html`
<ha-control-button
@click=${this._clear}
class="clear"
.disabled=${!this._showClearButton}
.label=${this.hass!.localize("ui.common.clear")}
>
<ha-svg-icon path=${mdiClose}></ha-svg-icon>
</ha-control-button>
`
: value === "submit"
? html`
<ha-control-button
@click=${this._submit}
class="submit"
.label=${this._dialogParams!.submitText ??
this.hass!.localize("ui.common.submit")}
>
<ha-svg-icon path=${mdiCheck}></ha-svg-icon>
</ha-control-button>
`
: html`
<ha-control-button
.value=${value}
@click=${this._numberClick}
.label=${value}
>
${value}
</ha-control-button>
`
)}
</div>
</div>
</ha-dialog>
`;
}
static get styles(): CSSResultGroup {
return css`
ha-dialog {
--mdc-dialog-heading-ink-color: var(--primary-text-color);
--mdc-dialog-content-ink-color: var(--primary-text-color);
/* Place above other dialogs */
--dialog-z-index: 104;
}
ha-textfield {
width: 100%;
max-width: 300px;
margin: auto;
}
.container {
display: flex;
align-items: center;
flex-direction: column;
}
.keypad {
--keypad-columns: 3;
margin-top: 12px;
padding: 12px;
display: grid;
grid-template-columns: repeat(var(--keypad-columns), auto);
grid-auto-rows: auto;
grid-gap: 24px;
justify-items: center;
align-items: center;
}
.clear {
grid-row-start: 4;
grid-column-start: 0;
}
@media all and (max-height: 450px) {
.keypad {
--keypad-columns: 6;
}
.clear {
grid-row-start: 1;
grid-column-start: 6;
}
}
ha-control-button {
width: 56px;
height: 56px;
--control-button-border-radius: 28px;
--mdc-icon-size: 24px;
font-size: 24px;
}
.submit {
--control-button-background-color: var(--green-color);
--control-button-icon-color: var(--green-color);
}
.clear {
--control-button-background-color: var(--red-color);
--control-button-icon-color: var(--red-color);
}
.hidden {
display: none;
}
.buttons {
margin-top: 12px;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"dialog-enter-code": DialogEnterCode;
}
}

154
src/dialogs/more-info/components/alarm_control_panel/ha-more-info-alarm_control_panel-modes.ts Normal file
View File

@ -0,0 +1,154 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { computeAttributeNameDisplay } from "../../../../common/entity/compute_attribute_display";
import { stateColorCss } from "../../../../common/entity/state_color";
import { supportsFeature } from "../../../../common/entity/supports-feature";
import "../../../../components/ha-control-select";
import type { ControlSelectOption } from "../../../../components/ha-control-select";
import "../../../../components/ha-control-slider";
import {
AlarmControlPanelEntity,
AlarmMode,
ALARM_MODES,
} from "../../../../data/alarm_control_panel";
import { HomeAssistant } from "../../../../types";
import { showEnterCodeDialogDialog } from "./show-enter-code-dialog";
@customElement("ha-more-info-alarm_control_panel-modes")
export class HaMoreInfoAlarmControlPanelModes extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: AlarmControlPanelEntity;
@state() _currentMode?: AlarmMode;
private _modes = memoizeOne((stateObj: AlarmControlPanelEntity) => {
const modes = Object.keys(ALARM_MODES) as AlarmMode[];
return modes.filter((mode) => {
const feature = ALARM_MODES[mode as AlarmMode].feature;
return !feature || supportsFeature(stateObj, feature);
});
});
protected updated(changedProp: Map<string | number | symbol, unknown>): void {
super.updated(changedProp);
if (changedProp.has("stateObj") && this.stateObj) {
const oldStateObj = changedProp.get("stateObj") as HassEntity | undefined;
if (!oldStateObj || this.stateObj.state !== oldStateObj.state) {
this._currentMode = this._getCurrentMode(this.stateObj);
}
}
}
private _getCurrentMode(stateObj: AlarmControlPanelEntity) {
return this._modes(stateObj).find(
(mode) => ALARM_MODES[mode].state === stateObj.state
);
}
private async _valueChanged(ev: CustomEvent) {
const mode = (ev.detail as any).value as AlarmMode;
const { state: modeState, service } = ALARM_MODES[mode];
if (modeState === this.stateObj.state) return;
// Force ha-control-select to previous mode because we don't known if the service call will succeed due to code check
this._currentMode = mode;
await this.requestUpdate("_currentMode");
this._currentMode = this._getCurrentMode(this.stateObj!);
let code: string | undefined;
if (
(mode !== "disarmed" &&
this.stateObj.attributes.code_arm_required &&
this.stateObj.attributes.code_format) ||
(mode === "disarmed" && this.stateObj.attributes.code_format)
) {
const disarm = mode === "disarmed";
const response = await showEnterCodeDialogDialog(this, {
codeFormat: this.stateObj.attributes.code_format,
title: this.hass.localize(
`ui.dialogs.more_info_control.alarm_control_panel.${
disarm ? "disarm_title" : "arm_title"
}`
),
submitText: this.hass.localize(
`ui.dialogs.more_info_control.alarm_control_panel.${
disarm ? "disarm_action" : "arm_action"
}`
),
});
if (!response) {
return;
}
code = response;
}
await this.hass.callService("alarm_control_panel", service, {
entity_id: this.stateObj!.entity_id,
code,
});
}
protected render() {
const color = stateColorCss(this.stateObj);
const modes = this._modes(this.stateObj);
const options = modes.map<ControlSelectOption>((mode) => ({
value: mode,
label: this.hass.localize(
`ui.dialogs.more_info_control.alarm_control_panel.modes.${mode}`
),
path: ALARM_MODES[mode].path,
}));
return html`
<ha-control-select
vertical
.options=${options}
.value=${this._currentMode}
@value-changed=${this._valueChanged}
.label=${computeAttributeNameDisplay(
this.hass.localize,
this.stateObj,
this.hass.entities,
"percentage"
)}
style=${styleMap({
"--control-select-color": color,
"--modes-count": modes.length.toString(),
})}
>
</ha-control-select>
`;
}
static get styles(): CSSResultGroup {
return css`
ha-control-select {
height: 45vh;
max-height: max(320px, var(--modes-count, 1) * 80px);
min-height: max(200px, var(--modes-count, 1) * 80px);
--control-select-thickness: 100px;
--control-select-border-radius: 24px;
--control-select-color: var(--primary-color);
--control-select-background: var(--disabled-color);
--control-select-background-opacity: 0.2;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-alarm_control_panel-modes": HaMoreInfoAlarmControlPanelModes;
}
}

39
src/dialogs/more-info/components/alarm_control_panel/show-enter-code-dialog.ts Normal file
View File

@ -0,0 +1,39 @@
import { fireEvent } from "../../../../common/dom/fire_event";
export interface EnterCodeDialogParams {
codeFormat: "text" | "number";
submitText?: string;
cancelText?: string;
title?: string;
submit?: (code?: string) => void;
cancel?: () => void;
}
export const showEnterCodeDialogDialog = (
element: HTMLElement,
dialogParams: EnterCodeDialogParams
) =>
new Promise<string | null>((resolve) => {
const origCancel = dialogParams.cancel;
const origSubmit = dialogParams.submit;
fireEvent(element, "show-dialog", {
dialogTag: "dialog-enter-code",
dialogImport: () => import("./dialog-enter-code"),
dialogParams: {
...dialogParams,
cancel: () => {
resolve(null);
if (origCancel) {
origCancel();
}
},
submit: (code: string) => {
resolve(code);
if (origSubmit) {
origSubmit(code);
}
},
},
});
});

311
src/dialogs/more-info/components/cover/ha-more-info-cover-buttons.ts Normal file
View File

@ -0,0 +1,311 @@
import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
import {
css,
CSSResultGroup,
html,
LitElement,
nothing,
TemplateResult,
} from "lit";
import { customElement, property } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
import {
computeCloseIcon,
computeOpenIcon,
} from "../../../../common/entity/cover_icon";
import { supportsFeature } from "../../../../common/entity/supports-feature";
import "../../../../components/ha-control-button";
import "../../../../components/ha-control-button-group";
import "../../../../components/ha-control-slider";
import "../../../../components/ha-svg-icon";
import {
canClose,
canCloseTilt,
canOpen,
canOpenTilt,
canStop,
canStopTilt,
CoverEntity,
CoverEntityFeature,
} from "../../../../data/cover";
import { HomeAssistant } from "../../../../types";
type CoverButton =
| "open"
| "close"
| "stop"
| "open-tilt"
| "close-tilt"
| "none";
type CoverLayout = {
type: "line" | "cross";
buttons: CoverButton[];
};
export const getCoverLayout = memoizeOne(
(stateObj: CoverEntity): CoverLayout => {
const supportsOpen = supportsFeature(stateObj, CoverEntityFeature.OPEN);
const supportsClose = supportsFeature(stateObj, CoverEntityFeature.CLOSE);
const supportsStop = supportsFeature(stateObj, CoverEntityFeature.STOP);
const supportsOpenTilt = supportsFeature(
stateObj,
CoverEntityFeature.OPEN_TILT
);
const supportsCloseTilt = supportsFeature(
stateObj,
CoverEntityFeature.CLOSE_TILT
);
const supportsStopTilt = supportsFeature(
stateObj,
CoverEntityFeature.STOP_TILT
);
if (
(supportsOpen || supportsClose) &&
(supportsOpenTilt || supportsCloseTilt)
) {
return {
type: "cross",
buttons: [
supportsOpen ? "open" : "none",
supportsCloseTilt ? "close-tilt" : "none",
supportsStop || supportsStopTilt ? "stop" : "none",
supportsOpenTilt ? "open-tilt" : "none",
supportsClose ? "close" : "none",
],
};
}
if (supportsOpen || supportsClose) {
const buttons: CoverButton[] = [];
if (supportsOpen) buttons.push("open");
if (supportsStop) buttons.push("stop");
if (supportsClose) buttons.push("close");
return {
type: "line",
buttons,
};
}
if (supportsOpenTilt || supportsCloseTilt) {
const buttons: CoverButton[] = [];
if (supportsOpenTilt) buttons.push("open-tilt");
if (supportsStopTilt) buttons.push("stop");
if (supportsCloseTilt) buttons.push("close-tilt");
return {
type: "line",
buttons,
};
}
return {
type: "line",
buttons: [],
};
}
);
@customElement("ha-more-info-cover-buttons")
export class HaMoreInfoCoverButtons extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj!: CoverEntity;
private _onOpenTap(ev): void {
ev.stopPropagation();
this.hass!.callService("cover", "open_cover", {
entity_id: this.stateObj!.entity_id,
});
}
private _onCloseTap(ev): void {
ev.stopPropagation();
this.hass!.callService("cover", "close_cover", {
entity_id: this.stateObj!.entity_id,
});
}
private _onOpenTiltTap(ev): void {
ev.stopPropagation();
this.hass!.callService("cover", "open_cover_tilt", {
entity_id: this.stateObj!.entity_id,
});
}
private _onCloseTiltTap(ev): void {
ev.stopPropagation();
this.hass!.callService("cover", "close_cover_tilt", {
entity_id: this.stateObj!.entity_id,
});
}
private _onStopTap(ev): void {
ev.stopPropagation();
if (supportsFeature(this.stateObj, CoverEntityFeature.STOP)) {
this.hass!.callService("cover", "stop_cover", {
entity_id: this.stateObj!.entity_id,
});
}
if (supportsFeature(this.stateObj, CoverEntityFeature.STOP_TILT)) {
this.hass!.callService("cover", "stop_cover_tilt", {
entity_id: this.stateObj!.entity_id,
});
}
}
protected renderButton(button: CoverButton | undefined) {
if (button === "open") {
return html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_cover"
)}
@click=${this._onOpenTap}
.disabled=${!canOpen(this.stateObj)}
data-button="open"
>
<ha-svg-icon .path=${computeOpenIcon(this.stateObj)}></ha-svg-icon>
</ha-control-button>
`;
}
if (button === "close") {
return html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_cover"
)}
@click=${this._onCloseTap}
.disabled=${!canClose(this.stateObj)}
data-button="close"
>
<ha-svg-icon .path=${computeCloseIcon(this.stateObj)}></ha-svg-icon>
</ha-control-button>
`;
}
if (button === "stop") {
return html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.stop_cover"
)}
@click=${this._onStopTap}
.disabled=${!canStop(this.stateObj) && !canStopTilt(this.stateObj)}
data-button="stop"
>
<ha-svg-icon .path=${mdiStop}></ha-svg-icon>
</ha-control-button>
`;
}
if (button === "open-tilt") {
return html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_tilt_cover"
)}
@click=${this._onOpenTiltTap}
.disabled=${!canOpenTilt(this.stateObj)}
data-button="open-tilt"
>
<ha-svg-icon .path=${mdiArrowTopRight}></ha-svg-icon>
</ha-control-button>
`;
}
if (button === "close-tilt") {
return html`
<ha-control-button
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_tilt_cover"
)}
@click=${this._onCloseTiltTap}
.disabled=${!canCloseTilt(this.stateObj)}
data-button="close-tilt"
>
<ha-svg-icon .path=${mdiArrowBottomLeft}></ha-svg-icon>
</ha-control-button>
`;
}
return nothing;
}
protected render(): TemplateResult {
const layout = getCoverLayout(this.stateObj);
return html`
${layout.type === "line"
? html`
<ha-control-button-group vertical>
${repeat(
layout.buttons,
(action) => action,
(action) => this.renderButton(action)
)}
</ha-control-button-group>
`
: nothing}
${layout.type === "cross"
? html`
<div class="cross-container">
${repeat(
layout.buttons,
(action) => action,
(action) => this.renderButton(action)
)}
</div>
`
: nothing}
`;
}
static get styles(): CSSResultGroup {
return css`
ha-control-button-group {
height: 45vh;
max-height: 320px;
min-height: 200px;
--control-button-group-spacing: 6px;
--control-button-group-thickness: 100px;
}
.cross-container {
height: 45vh;
max-height: 320px;
min-height: 200px;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, min(100px, 25vw, 15vh));
grid-template-rows: repeat(3, min(100px, 25vw, 15vh));
grid-template-areas: ". open ." "close-tilt stop open-tilt" ". close .";
}
.cross-container > * {
width: 100%;
height: 100%;
}
.cross-container > [data-button="open"] {
grid-area: open;
}
.cross-container > [data-button="close"] {
grid-area: close;
}
.cross-container > [data-button="open-tilt"] {
grid-area: open-tilt;
}
.cross-container > [data-button="close-tilt"] {
grid-area: close-tilt;
}
.cross-container > [data-button="stop"] {
grid-area: stop;
}
ha-control-button {
--control-button-border-radius: 18px;
--mdc-icon-size: 24px;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-more-info-cover-buttons": HaMoreInfoCoverButtons;
}
}

Some files were not shown because too many files have changed in this diff Show More