diff --git a/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch b/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch new file mode 100644 index 0000000000..94e00fbe98 --- /dev/null +++ b/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch @@ -0,0 +1,22 @@ +diff --git a/mwc-formfield-base.js b/mwc-formfield-base.js +index 7b763326d7d51835ad52646bfbc80fe21989abd3..f2baa8224e6d03df1fdb0b9fd03f5c6d77fc8747 100644 +--- a/mwc-formfield-base.js ++++ b/mwc-formfield-base.js +@@ -9,7 +9,7 @@ import { BaseElement } from '@material/mwc-base/base-element.js'; + import { FormElement } from '@material/mwc-base/form-element.js'; + import { observer } from '@material/mwc-base/observer.js'; + import { html } from 'lit'; +-import { property, query, queryAssignedNodes } from 'lit/decorators.js'; ++import { property, query, queryAssignedElements } from 'lit/decorators.js'; + import { classMap } from 'lit/directives/class-map.js'; + export class FormfieldBase extends BaseElement { + constructor() { +@@ -96,7 +96,7 @@ __decorate([ + query('.mdc-form-field') + ], FormfieldBase.prototype, "mdcRoot", void 0); + __decorate([ +- queryAssignedNodes('', true, '*') ++ queryAssignedElements({ slot: "", flatten: true, selector: "*" }) + ], FormfieldBase.prototype, "slottedInputs", void 0); + __decorate([ + query('label') diff --git a/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch b/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch new file mode 100644 index 0000000000..a6bc459314 --- /dev/null +++ b/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch @@ -0,0 +1,26 @@ +diff --git a/mwc-list-base.js b/mwc-list-base.js +index 1ba95b6a01dcecea4d85b5cbbbcc3dfb04c40d5f..dced13fdb7929c490d6661b1bbe7e9f96dcd2285 100644 +--- a/mwc-list-base.js ++++ b/mwc-list-base.js +@@ -11,7 +11,7 @@ import { BaseElement } from '@material/mwc-base/base-element.js'; + import { observer } from '@material/mwc-base/observer.js'; + import { deepActiveElementPath, doesElementContainFocus, isNodeElement } from '@material/mwc-base/utils.js'; + import { html } from 'lit'; +-import { property, query, queryAssignedNodes } from 'lit/decorators.js'; ++import { property, query, queryAssignedElements } from 'lit/decorators.js'; + import { ifDefined } from 'lit/directives/if-defined.js'; + import MDCListFoundation, { isIndexSet } from './mwc-list-foundation.js'; + export { createSetFromIndex, isEventMulti, isIndexSet } from './mwc-list-foundation.js'; +@@ -425,10 +425,10 @@ __decorate([ + query('.mdc-deprecated-list') + ], ListBase.prototype, "mdcRoot", void 0); + __decorate([ +- queryAssignedNodes('', true, '*') ++ queryAssignedElements({ flatten: true, selector: "*" }) + ], ListBase.prototype, "assignedElements", void 0); + __decorate([ +- queryAssignedNodes('', true, '[tabindex="0"]') ++ queryAssignedElements({ flatten: true, selector: '[tabindex="0"]' }) + ], ListBase.prototype, "tabbableElements", void 0); + __decorate([ + property({ type: Boolean }), diff --git a/build-scripts/bundle.cjs b/build-scripts/bundle.cjs index 61ec4dbee8..b27f1c7d2b 100644 --- a/build-scripts/bundle.cjs +++ b/build-scripts/bundle.cjs @@ -73,6 +73,19 @@ module.exports.terserOptions = ({ latestBuild, isTestBuild }) => ({ sourceMap: !isTestBuild, }); +/** @type {import('@rspack/core').SwcLoaderOptions} */ +module.exports.swcOptions = ({ latestBuild }) => ({ + jsc: { + loose: true, + externalHelpers: true, + target: latestBuild ? "ES2021" : "ES5", + parser: { + syntax: "typescript", + decorators: true, + }, + }, +}); + module.exports.babelOptions = ({ latestBuild, isProdBuild, @@ -97,7 +110,6 @@ module.exports.babelOptions = ({ shippedProposals: true, }, ], - "@babel/preset-typescript", ], plugins: [ [ @@ -134,12 +146,6 @@ module.exports.babelOptions = ({ "@babel/plugin-transform-runtime", { version: dependencies["@babel/runtime"] }, ], - // Transpile decorators (still in TC39 process) - // Modern browsers support class fields and private methods, but transform is required with the older decorator version dictated by Lit - [ - "@babel/plugin-proposal-decorators", - { version: "2018-09", decoratorsBeforeExport: true }, - ], "@babel/plugin-transform-class-properties", "@babel/plugin-transform-private-methods", ].filter(Boolean), diff --git a/build-scripts/list-plugins-and-polyfills.js b/build-scripts/list-plugins-and-polyfills.js index abda2ca1ed..e5a404230f 100755 --- a/build-scripts/list-plugins-and-polyfills.js +++ b/build-scripts/list-plugins-and-polyfills.js @@ -16,6 +16,7 @@ const detailsClose = "\n"; const dummyAPI = { version: babelVersion, + // eslint-disable-next-line @typescript-eslint/no-empty-function assertVersion: () => {}, caller: (callback) => callback({ diff --git a/build-scripts/rspack.cjs b/build-scripts/rspack.cjs index 0925ecfa0f..6351b36ccd 100644 --- a/build-scripts/rspack.cjs +++ b/build-scripts/rspack.cjs @@ -65,19 +65,28 @@ const createRspackConfig = ({ rules: [ { test: /\.m?js$|\.ts$/, - use: (info) => ({ - loader: "babel-loader", - options: { - ...bundle.babelOptions({ - latestBuild, - isProdBuild, - isTestBuild, - sw: info.issuerLayer === "sw", - }), - cacheDirectory: !isProdBuild, - cacheCompression: false, + exclude: /node_modules[\\/]core-js/, + use: (info) => [ + { + loader: "babel-loader", + options: { + ...bundle.babelOptions({ + latestBuild, + isProdBuild, + isTestBuild, + sw: info.issuerLayer === "sw", + }), + cacheDirectory: !isProdBuild, + cacheCompression: false, + }, }, - }), + { + loader: "builtin:swc-loader", + options: bundle.swcOptions({ + latestBuild, + }), + }, + ], resolve: { fullySpecified: false, }, @@ -136,7 +145,8 @@ const createRspackConfig = ({ // calling define.amd will call require("!!webpack amd options") resource.startsWith("!!webpack") || // loaded by webpack dev server but doesn't exist. - resource === "webpack/hot" + resource === "webpack/hot" || + resource.startsWith("@swc/helpers") ) { return false; } diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index 130926748a..f592575e08 100644 --- a/cast/src/launcher/layout/hc-cast.ts +++ b/cast/src/launcher/layout/hc-cast.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list"; + import type { ActionDetail } from "@material/mwc-list/mwc-list"; import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js"; import type { Auth, Connection } from "home-assistant-js-websocket"; @@ -19,6 +19,8 @@ import { import { atLeastVersion } from "../../../../src/common/config/version"; import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute"; import "../../../../src/components/ha-icon"; +import "../../../../src/components/ha-list"; +import "../../../../src/components/ha-list-item"; import "../../../../src/components/ha-svg-icon"; import { getLegacyLovelaceCollection, @@ -29,7 +31,6 @@ import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/vi import "../../../../src/layouts/hass-loading-screen"; import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config"; import "./hc-layout"; -import "../../../../src/components/ha-list-item"; @customElement("hc-cast") class HcCast extends LitElement { @@ -85,7 +86,7 @@ class HcCast extends LitElement { ` : html`
PICK A VIEW
- + ${( this.lovelaceViews ?? [ generateDefaultViewConfig({}, {}, {}, {}, () => ""), @@ -113,7 +114,7 @@ class HcCast extends LitElement { >`} ` - )} `} diff --git a/gallery/src/pages/automation/editor-action.ts b/gallery/src/pages/automation/editor-action.ts index cf40c4ce7c..eca218d1b4 100644 --- a/gallery/src/pages/automation/editor-action.ts +++ b/gallery/src/pages/automation/editor-action.ts @@ -1,29 +1,30 @@ import type { TemplateResult } from "lit"; -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; +import "../../../../src/components/ha-formfield"; import { provideHass } from "../../../../src/fake_data/provide_hass"; import type { HomeAssistant } from "../../../../src/types"; import "../../components/demo-black-white-row"; -import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; -import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; +import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; +import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; +import type { Action } from "../../../../src/data/script"; import "../../../../src/panels/config/automation/action/ha-automation-action"; import { HaChooseAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-choose"; +import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition"; import { HaDelayAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-delay"; import { HaDeviceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-device_id"; import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event"; +import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if"; +import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel"; +import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media"; import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat"; +import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence"; import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service"; +import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop"; import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger"; import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template"; -import type { Action } from "../../../../src/data/script"; -import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition"; -import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence"; -import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel"; -import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if"; -import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop"; -import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media"; const SCHEMAS: { name: string; actions: Action[] }[] = [ { name: "Event", actions: [HaEventAction.defaultConfig] }, diff --git a/gallery/src/pages/automation/editor-condition.ts b/gallery/src/pages/automation/editor-condition.ts index 883ff642ce..add10cb2a4 100644 --- a/gallery/src/pages/automation/editor-condition.ts +++ b/gallery/src/pages/automation/editor-condition.ts @@ -1,26 +1,27 @@ import type { TemplateResult } from "lit"; -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; -import { provideHass } from "../../../../src/fake_data/provide_hass"; -import type { HomeAssistant } from "../../../../src/types"; -import "../../components/demo-black-white-row"; -import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; -import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; +import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; +import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; +import "../../../../src/components/ha-formfield"; import type { ConditionWithShorthand } from "../../../../src/data/automation"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; import "../../../../src/panels/config/automation/condition/ha-automation-condition"; +import { HaAndCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-and"; import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device"; +import { HaNotCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-not"; import HaNumericStateCondition from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state"; +import { HaOrCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-or"; import { HaStateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-state"; import { HaSunCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-sun"; import { HaTemplateCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-template"; import { HaTimeCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-time"; import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger"; import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone"; -import { HaAndCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-and"; -import { HaOrCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-or"; -import { HaNotCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-not"; +import type { HomeAssistant } from "../../../../src/types"; +import "../../components/demo-black-white-row"; const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [ { diff --git a/gallery/src/pages/automation/editor-trigger.ts b/gallery/src/pages/automation/editor-trigger.ts index 2feb661a30..885c8da7d0 100644 --- a/gallery/src/pages/automation/editor-trigger.ts +++ b/gallery/src/pages/automation/editor-trigger.ts @@ -1,35 +1,36 @@ import type { TemplateResult } from "lit"; -import { LitElement, html, css } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; -import { provideHass } from "../../../../src/fake_data/provide_hass"; -import type { HomeAssistant } from "../../../../src/types"; -import "../../components/demo-black-white-row"; -import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; -import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; -import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; -import { mockConfig } from "../../../../demo/src/stubs/config"; -import { mockTags } from "../../../../demo/src/stubs/tags"; import { mockAuth } from "../../../../demo/src/stubs/auth"; +import { mockConfig } from "../../../../demo/src/stubs/config"; +import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; +import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; +import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; +import { mockTags } from "../../../../demo/src/stubs/tags"; +import "../../../../src/components/ha-formfield"; import type { Trigger } from "../../../../src/data/automation"; -import { HaGeolocationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location"; +import { provideHass } from "../../../../src/fake_data/provide_hass"; +import "../../../../src/panels/config/automation/trigger/ha-automation-trigger"; +import { HaConversationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-conversation"; +import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device"; import { HaEventTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event"; +import { HaGeolocationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location"; import { HaHassTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant"; +import { HaTriggerList } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-list"; +import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt"; import { HaNumericStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state"; +import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification"; +import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state"; import { HaSunTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-sun"; import { HaTagTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-tag"; import { HaTemplateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-template"; import { HaTimeTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time"; import { HaTimePatternTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern"; import { HaWebhookTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook"; -import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification"; import { HaZoneTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone"; -import { HaDeviceTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device"; -import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state"; -import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt"; -import "../../../../src/panels/config/automation/trigger/ha-automation-trigger"; -import { HaConversationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-conversation"; -import { HaTriggerList } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-list"; +import type { HomeAssistant } from "../../../../src/types"; +import "../../components/demo-black-white-row"; const SCHEMAS: { name: string; triggers: Trigger[] }[] = [ { diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index 5e0e6d8fe0..dfb1f4a848 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/gallery/src/pages/components/ha-selector.ts @@ -6,22 +6,23 @@ import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry"; import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries"; import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry"; import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry"; +import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry"; import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor"; +import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry"; +import "../../../../src/components/ha-formfield"; import "../../../../src/components/ha-selector/ha-selector"; import "../../../../src/components/ha-settings-row"; import type { AreaRegistryEntry } from "../../../../src/data/area_registry"; import type { BlueprintInput } from "../../../../src/data/blueprint"; +import type { DeviceRegistryEntry } from "../../../../src/data/device_registry"; +import type { FloorRegistryEntry } from "../../../../src/data/floor_registry"; +import type { LabelRegistryEntry } from "../../../../src/data/label_registry"; import { showDialog } from "../../../../src/dialogs/make-dialog-manager"; import { getEntity } from "../../../../src/fake_data/entity"; import { provideHass } from "../../../../src/fake_data/provide_hass"; import type { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin"; import type { HomeAssistant } from "../../../../src/types"; import "../../components/demo-black-white-row"; -import type { FloorRegistryEntry } from "../../../../src/data/floor_registry"; -import type { LabelRegistryEntry } from "../../../../src/data/label_registry"; -import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry"; -import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry"; -import type { DeviceRegistryEntry } from "../../../../src/data/device_registry"; const ENTITIES = [ getEntity("alarm_control_panel", "alarm", "disarmed", { diff --git a/gallery/src/pages/date-time/date-time-numeric.ts b/gallery/src/pages/date-time/date-time-numeric.ts index a1ead031b8..0694e6edf0 100644 --- a/gallery/src/pages/date-time/date-time-numeric.ts +++ b/gallery/src/pages/date-time/date-time-numeric.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list"; import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; import { formatDateTimeNumeric } from "../../../../src/common/datetime/format_date_time"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-control-select"; +import "../../../../src/components/ha-list"; import type { FrontendLocaleData } from "../../../../src/data/translation"; import { DateFormat, @@ -49,7 +49,7 @@ export class DemoDateTimeDateTimeNumeric extends LitElement { @value-changed=${this.handleValueChanged} > - +
Language
Default (lang)
@@ -96,7 +96,7 @@ export class DemoDateTimeDateTimeNumeric extends LitElement {
` )} - + `; } diff --git a/gallery/src/pages/date-time/date-time-seconds.ts b/gallery/src/pages/date-time/date-time-seconds.ts index 0ebb94d07c..a2d88a0293 100644 --- a/gallery/src/pages/date-time/date-time-seconds.ts +++ b/gallery/src/pages/date-time/date-time-seconds.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list"; import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; import { formatDateTimeWithSeconds } from "../../../../src/common/datetime/format_date_time"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-control-select"; +import "../../../../src/components/ha-list"; import type { FrontendLocaleData } from "../../../../src/data/translation"; import { DateFormat, @@ -49,7 +49,7 @@ export class DemoDateTimeDateTimeSeconds extends LitElement { @value-changed=${this.handleValueChanged} > - +
Language
Default (lang)
@@ -96,7 +96,7 @@ export class DemoDateTimeDateTimeSeconds extends LitElement {
` )} - + `; } diff --git a/gallery/src/pages/date-time/date-time-short-year.ts b/gallery/src/pages/date-time/date-time-short-year.ts index 3c0e5b651b..9e55a5c2c8 100644 --- a/gallery/src/pages/date-time/date-time-short-year.ts +++ b/gallery/src/pages/date-time/date-time-short-year.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list"; import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; import { formatShortDateTimeWithYear } from "../../../../src/common/datetime/format_date_time"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-control-select"; +import "../../../../src/components/ha-list"; import type { FrontendLocaleData } from "../../../../src/data/translation"; import { DateFormat, @@ -49,7 +49,7 @@ export class DemoDateTimeDateTimeShortYear extends LitElement { @value-changed=${this.handleValueChanged} > - +
Language
Default (lang)
@@ -96,7 +96,7 @@ export class DemoDateTimeDateTimeShortYear extends LitElement {
` )} - + `; } diff --git a/gallery/src/pages/date-time/date-time-short.ts b/gallery/src/pages/date-time/date-time-short.ts index 9d22f9b3de..01a32fa32d 100644 --- a/gallery/src/pages/date-time/date-time-short.ts +++ b/gallery/src/pages/date-time/date-time-short.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list"; import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; import { formatShortDateTime } from "../../../../src/common/datetime/format_date_time"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-control-select"; +import "../../../../src/components/ha-list"; import type { FrontendLocaleData } from "../../../../src/data/translation"; import { DateFormat, @@ -49,7 +49,7 @@ export class DemoDateTimeDateTimeShort extends LitElement { @value-changed=${this.handleValueChanged} > - +
Language
Default (lang)
@@ -96,7 +96,7 @@ export class DemoDateTimeDateTimeShort extends LitElement {
` )} - + `; } diff --git a/gallery/src/pages/date-time/date-time.ts b/gallery/src/pages/date-time/date-time.ts index d75c5d2459..6a61041d2b 100644 --- a/gallery/src/pages/date-time/date-time.ts +++ b/gallery/src/pages/date-time/date-time.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list"; import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; import { formatDateTime } from "../../../../src/common/datetime/format_date_time"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-control-select"; +import "../../../../src/components/ha-list"; import type { FrontendLocaleData } from "../../../../src/data/translation"; import { DateFormat, @@ -49,7 +49,7 @@ export class DemoDateTimeDateTime extends LitElement { @value-changed=${this.handleValueChanged} > - +
Language
Default (lang)
@@ -96,7 +96,7 @@ export class DemoDateTimeDateTime extends LitElement {
` )} - + `; } diff --git a/gallery/src/pages/date-time/date.ts b/gallery/src/pages/date-time/date.ts index dd115bf25d..12ee7244cc 100644 --- a/gallery/src/pages/date-time/date.ts +++ b/gallery/src/pages/date-time/date.ts @@ -1,8 +1,8 @@ -import "@material/mwc-list/mwc-list"; import { css, html, LitElement } from "lit"; import { customElement } from "lit/decorators"; import { formatDateNumeric } from "../../../../src/common/datetime/format_date"; import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-list"; import type { FrontendLocaleData } from "../../../../src/data/translation"; import { DateFormat, @@ -27,7 +27,7 @@ export class DemoDateTimeDate extends LitElement { }; const date = new Date(); return html` - +
Language
Default (lang)
@@ -86,7 +86,7 @@ export class DemoDateTimeDate extends LitElement {
` )} - + `; } diff --git a/gallery/src/pages/date-time/time-seconds.ts b/gallery/src/pages/date-time/time-seconds.ts index a00c72a939..6a7dc0a8a7 100644 --- a/gallery/src/pages/date-time/time-seconds.ts +++ b/gallery/src/pages/date-time/time-seconds.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list"; import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; import { formatTimeWithSeconds } from "../../../../src/common/datetime/format_time"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-control-select"; +import "../../../../src/components/ha-list"; import type { FrontendLocaleData } from "../../../../src/data/translation"; import { DateFormat, @@ -49,7 +49,7 @@ export class DemoDateTimeTimeSeconds extends LitElement { @value-changed=${this.handleValueChanged} > - +
Language
Default (lang)
@@ -96,7 +96,7 @@ export class DemoDateTimeTimeSeconds extends LitElement {
` )} - + `; } diff --git a/gallery/src/pages/date-time/time-weekday.ts b/gallery/src/pages/date-time/time-weekday.ts index 1299324d72..68f24922ef 100644 --- a/gallery/src/pages/date-time/time-weekday.ts +++ b/gallery/src/pages/date-time/time-weekday.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list"; import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; import { formatTimeWeekday } from "../../../../src/common/datetime/format_time"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-control-select"; +import "../../../../src/components/ha-list"; import type { FrontendLocaleData } from "../../../../src/data/translation"; import { DateFormat, @@ -49,7 +49,7 @@ export class DemoDateTimeTimeWeekday extends LitElement { @value-changed=${this.handleValueChanged} > - +
Language
Default (lang)
@@ -96,7 +96,7 @@ export class DemoDateTimeTimeWeekday extends LitElement {
` )} - + `; } diff --git a/gallery/src/pages/date-time/time.ts b/gallery/src/pages/date-time/time.ts index 0654d838b0..bc2c0135ce 100644 --- a/gallery/src/pages/date-time/time.ts +++ b/gallery/src/pages/date-time/time.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list"; import { LitElement, css, html } from "lit"; import { customElement, state } from "lit/decorators"; import { formatTime } from "../../../../src/common/datetime/format_time"; import "../../../../src/components/ha-card"; import "../../../../src/components/ha-control-select"; +import "../../../../src/components/ha-list"; import type { FrontendLocaleData } from "../../../../src/data/translation"; import { DateFormat, @@ -49,7 +49,7 @@ export class DemoDateTimeTime extends LitElement { @value-changed=${this.handleValueChanged} > - +
Language
Default (lang)
@@ -96,7 +96,7 @@ export class DemoDateTimeTime extends LitElement {
` )} - + `; } diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index e33ec23208..867df14ac3 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -1,5 +1,5 @@ import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; -import "@material/mwc-list/mwc-list-item"; + import { mdiDotsVertical } from "@mdi/js"; import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -11,6 +11,7 @@ import { navigate } from "../../../src/common/navigate"; import { extractSearchParam } from "../../../src/common/url/search-params"; import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-icon-button"; +import "../../../src/components/ha-list-item"; import "../../../src/components/search-input"; import type { HassioAddonRepository } from "../../../src/data/hassio/addon"; import { reloadHassioAddons } from "../../../src/data/hassio/addon"; @@ -89,17 +90,17 @@ export class HassioAddonStore extends LitElement { .path=${mdiDotsVertical} slot="trigger" > - + ${this.supervisor.localize("store.check_updates")} - - + + ${this.supervisor.localize("store.repositories")} - + ${this.hass.userData?.showAdvanced && atLeastVersion(this.hass.config.version, 0, 117) - ? html` + ? html` ${this.supervisor.localize("store.registries")} - ` + ` : ""} ${repos.length === 0 diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts index 3fbfa9c14b..e5afe3ed15 100644 --- a/hassio/src/addon-view/config/hassio-addon-config.ts +++ b/hassio/src/addon-view/config/hassio-addon-config.ts @@ -1,6 +1,4 @@ -import "@material/mwc-button"; import type { ActionDetail } from "@material/mwc-list"; -import "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical } from "@mdi/js"; import { DEFAULT_SCHEMA, Type } from "js-yaml"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; @@ -16,6 +14,7 @@ import "../../../../src/components/ha-form/ha-form"; import type { HaFormSchema } from "../../../../src/components/ha-form/types"; import "../../../../src/components/ha-formfield"; import "../../../../src/components/ha-icon-button"; +import "../../../../src/components/ha-list-item"; import "../../../../src/components/ha-switch"; import "../../../../src/components/ha-yaml-editor"; import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor"; @@ -178,7 +177,7 @@ class HassioAddonConfig extends LitElement { .path=${mdiDotsVertical} slot="trigger" > - + ${this._yamlMode ? this.supervisor.localize( "addon.configuration.options.edit_in_ui" @@ -186,13 +185,13 @@ class HassioAddonConfig extends LitElement { : this.supervisor.localize( "addon.configuration.options.edit_in_yaml" )} - - + ${this.supervisor.localize("common.reset_defaults")} - + @@ -419,7 +418,7 @@ class HassioAddonConfig extends LitElement { z-index: 3; --mdc-theme-text-primary-on-background: var(--primary-text-color); } - mwc-list-item[disabled] { + ha-list-item[disabled] { --mdc-theme-text-primary-on-background: var(--disabled-text-color); } .header { diff --git a/hassio/src/addon-view/config/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts index 51c225c1dc..794984e7a4 100644 --- a/hassio/src/addon-view/config/hassio-addon-network.ts +++ b/hassio/src/addon-view/config/hassio-addon-network.ts @@ -6,6 +6,7 @@ import { fireEvent } from "../../../../src/common/dom/fire_event"; import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/ha-alert"; import "../../../../src/components/ha-card"; +import "../../../../src/components/ha-formfield"; import "../../../../src/components/ha-form/ha-form"; import type { HaFormSchema } from "../../../../src/components/ha-form/types"; import type { diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts index 57c5fba4bf..05cfe65ea4 100644 --- a/hassio/src/backups/hassio-backups.ts +++ b/hassio/src/backups/hassio-backups.ts @@ -1,6 +1,6 @@ import "@material/mwc-button"; import type { ActionDetail } from "@material/mwc-list"; -import "@material/mwc-list/mwc-list-item"; + import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -18,6 +18,7 @@ import type { import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-fab"; import "../../../src/components/ha-icon-button"; +import "../../../src/components/ha-list-item"; import "../../../src/components/ha-svg-icon"; import type { HassioBackup } from "../../../src/data/hassio/backup"; import { @@ -32,6 +33,7 @@ import { showAlertDialog, showConfirmationDialog, } from "../../../src/dialogs/generic/show-dialog-box"; +import "../../../src/layouts/hass-loading-screen"; import "../../../src/layouts/hass-tabs-subpage-data-table"; import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table"; import { haStyle } from "../../../src/resources/styles"; @@ -42,7 +44,6 @@ import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-bac import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup"; import { supervisorTabs } from "../hassio-tabs"; import { hassioStyle } from "../resources/hassio-style"; -import "../../../src/layouts/hass-loading-screen"; type BackupItem = HassioBackup & { secondary: string; @@ -211,16 +212,16 @@ export class HassioBackups extends LitElement { .path=${mdiDotsVertical} slot="trigger" > - + ${this.supervisor.localize("common.reload")} - - + + ${this.supervisor.localize("dialog.backup_location.title")} - + ${atLeastVersion(this.hass.config.version, 0, 116) - ? html` + ? html` ${this.supervisor.localize("backup.upload_backup")} - ` + ` : ""} diff --git a/hassio/src/dialogs/backup/dialog-hassio-backup.ts b/hassio/src/dialogs/backup/dialog-hassio-backup.ts index 7be8b0d1be..9fcf949eb8 100644 --- a/hassio/src/dialogs/backup/dialog-hassio-backup.ts +++ b/hassio/src/dialogs/backup/dialog-hassio-backup.ts @@ -1,5 +1,5 @@ import type { ActionDetail } from "@material/mwc-list"; -import "@material/mwc-list/mwc-list-item"; + import { mdiClose, mdiDotsVertical } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -8,15 +8,17 @@ import { atLeastVersion } from "../../../../src/common/config/version"; import { fireEvent } from "../../../../src/common/dom/fire_event"; import { stopPropagation } from "../../../../src/common/dom/stop_propagation"; import { slugify } from "../../../../src/common/string/slugify"; -import "../../../../src/components/ha-md-dialog"; -import "../../../../src/components/ha-dialog-header"; import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/ha-alert"; -import "../../../../src/components/ha-spinner"; import "../../../../src/components/ha-button"; import "../../../../src/components/ha-button-menu"; +import "../../../../src/components/ha-dialog-header"; import "../../../../src/components/ha-header-bar"; import "../../../../src/components/ha-icon-button"; +import "../../../../src/components/ha-list-item"; +import "../../../../src/components/ha-md-dialog"; +import type { HaMdDialog } from "../../../../src/components/ha-md-dialog"; +import "../../../../src/components/ha-spinner"; import { getSignedPath } from "../../../../src/data/auth"; import type { HassioBackupDetail } from "../../../../src/data/hassio/backup"; import { @@ -36,7 +38,6 @@ import { fileDownload } from "../../../../src/util/file_download"; import "../../components/supervisor-backup-content"; import type { SupervisorBackupContent } from "../../components/supervisor-backup-content"; import type { HassioBackupDialogParams } from "./show-dialog-hassio-backup"; -import type { HaMdDialog } from "../../../../src/components/ha-md-dialog"; @customElement("dialog-hassio-backup") class HassioBackupDialog @@ -121,15 +122,15 @@ class HassioBackupDialog .path=${mdiDotsVertical} slot="trigger" > - ${this._dialogParams.supervisor.localize( "backup.download_backup" - )} - ${this._dialogParams.supervisor.localize( "backup.delete_backup_title" - )} ` : nothing} diff --git a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts index 7555d9194e..c5c7b1c974 100644 --- a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts +++ b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts @@ -1,12 +1,12 @@ -import "@material/mwc-list/mwc-list-item"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../src/common/dom/fire_event"; -import "../../../../src/components/ha-spinner"; -import "../../../../src/components/ha-select"; import "../../../../src/components/ha-dialog"; +import "../../../../src/components/ha-list-item"; +import "../../../../src/components/ha-select"; +import "../../../../src/components/ha-spinner"; import { extractApiErrorMessage, ignoreSupervisorError, @@ -95,8 +95,8 @@ class HassioDatadiskDialog extends LitElement { > ${this.devices.map( (device) => - html`${device}${device}` )} diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts index 5678b57ee7..b41009577b 100644 --- a/hassio/src/dialogs/network/dialog-hassio-network.ts +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -1,6 +1,5 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list"; -import "@material/mwc-list/mwc-list-item"; + import "@material/mwc-tab"; import "@material/mwc-tab-bar"; import { mdiClose } from "@mdi/js"; @@ -10,14 +9,16 @@ import { customElement, property, state } from "lit/decorators"; import { cache } from "lit/directives/cache"; import { fireEvent } from "../../../../src/common/dom/fire_event"; import "../../../../src/components/ha-alert"; -import "../../../../src/components/ha-spinner"; import "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-expansion-panel"; import "../../../../src/components/ha-formfield"; import "../../../../src/components/ha-header-bar"; import "../../../../src/components/ha-icon-button"; +import "../../../../src/components/ha-list"; +import "../../../../src/components/ha-list-item"; import "../../../../src/components/ha-password-field"; import "../../../../src/components/ha-radio"; +import "../../../../src/components/ha-spinner"; import "../../../../src/components/ha-textfield"; import type { HaTextField } from "../../../../src/components/ha-textfield"; import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; @@ -169,12 +170,12 @@ export class DialogHassioNetwork this._accessPoints.accesspoints && this._accessPoints.accesspoints.length !== 0 ? html` - + ${this._accessPoints.accesspoints .filter((ap) => ap.ssid) .map( (ap) => html` - - + ` )} - + ` : ""} ${this._wifiConfiguration @@ -634,7 +635,7 @@ export class DialogHassioNetwork ha-textfield { padding: 0 14px; } - mwc-list-item { + ha-list-item { --mdc-list-side-padding: 10px; } `, diff --git a/hassio/src/system/hassio-core-info.ts b/hassio/src/system/hassio-core-info.ts index a49fd63a0a..8190ef4bf6 100644 --- a/hassio/src/system/hassio-core-info.ts +++ b/hassio/src/system/hassio-core-info.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@material/mwc-list/mwc-list-item"; + import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -197,9 +197,6 @@ class HassioCoreInfo extends LitElement { color: var(--secondary-text-color); --mdc-menu-min-width: 200px; } - mwc-list-item ha-svg-icon { - color: var(--secondary-text-color); - } a { text-decoration: none; } diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts index d393f44299..e517b44829 100644 --- a/hassio/src/system/hassio-host-info.ts +++ b/hassio/src/system/hassio-host-info.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@material/mwc-list/mwc-list-item"; + import { mdiDotsVertical } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; @@ -10,6 +10,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event"; import "../../../src/components/buttons/ha-progress-button"; import "../../../src/components/ha-button-menu"; import "../../../src/components/ha-card"; +import "../../../src/components/ha-list-item"; import "../../../src/components/ha-icon-button"; import "../../../src/components/ha-settings-row"; import { @@ -188,31 +189,31 @@ class HassioHostInfo extends LitElement { .path=${mdiDotsVertical} slot="trigger" > - ${this.supervisor.localize("system.host.hardware")} - + ${this.supervisor.host.features.includes("haos") ? html` - ${this.supervisor.localize("system.host.import_from_usb")} - + ${this.supervisor.host.features.includes("os_agent") && atLeastVersion(this.supervisor.host.agent_version, 1, 2, 0) ? html` - ${this.supervisor.localize( "system.host.move_datadisk" )} - + ` : ""} ` @@ -438,7 +439,7 @@ class HassioHostInfo extends LitElement { color: var(--secondary-text-color); --mdc-menu-min-width: 200px; } - mwc-list-item ha-svg-icon { + ha-list-item ha-svg-icon { color: var(--secondary-text-color); } a { diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index ce8702dd51..3aed53b720 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@material/mwc-list/mwc-list-item"; + import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -8,6 +8,7 @@ import "../../../src/components/ha-alert"; import "../../../src/components/ha-ansi-to-html"; import "../../../src/components/ha-card"; import "../../../src/components/ha-select"; +import "../../../src/components/ha-list-item"; import { extractApiErrorMessage } from "../../../src/data/hassio/common"; import { fetchHassioLogs } from "../../../src/data/hassio/supervisor"; import type { Supervisor } from "../../../src/data/supervisor/supervisor"; @@ -80,9 +81,9 @@ class HassioSupervisorLog extends LitElement { > ${logProviders.map( (provider) => html` - + ${provider.name} - + ` )} diff --git a/hassio/src/update-available/update-available-card.ts b/hassio/src/update-available/update-available-card.ts index ed15034845..7c2a8f2ca6 100644 --- a/hassio/src/update-available/update-available-card.ts +++ b/hassio/src/update-available/update-available-card.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import { css, type CSSResultGroup, diff --git a/package.json b/package.json index ae2b09750c..7b3113a766 100644 --- a/package.json +++ b/package.json @@ -52,10 +52,10 @@ "@fullcalendar/luxon3": "6.1.17", "@fullcalendar/timegrid": "6.1.17", "@lezer/highlight": "1.2.1", - "@lit-labs/context": "0.4.1", "@lit-labs/motion": "1.0.8", "@lit-labs/observers": "2.0.5", "@lit-labs/virtualizer": "2.1.0", + "@lit/context": "1.1.4", "@material/chips": "=14.0.0-canary.53b3cad2f.0", "@material/data-table": "=14.0.0-canary.53b3cad2f.0", "@material/mwc-base": "0.27.0", @@ -65,10 +65,10 @@ "@material/mwc-drawer": "0.27.0", "@material/mwc-fab": "0.27.0", "@material/mwc-floating-label": "0.27.0", - "@material/mwc-formfield": "0.27.0", + "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch", "@material/mwc-icon-button": "0.27.0", "@material/mwc-linear-progress": "0.27.0", - "@material/mwc-list": "0.27.0", + "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch", "@material/mwc-menu": "0.27.0", "@material/mwc-radio": "0.27.0", "@material/mwc-select": "0.27.0", @@ -86,6 +86,7 @@ "@mdi/svg": "7.4.47", "@replit/codemirror-indentation-markers": "6.5.3", "@shoelace-style/shoelace": "2.20.1", + "@swc/helpers": "0.5.17", "@thomasloven/round-slider": "0.6.0", "@tsparticles/engine": "3.8.1", "@tsparticles/preset-links": "3.2.0", @@ -119,8 +120,8 @@ "leaflet": "1.9.4", "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch", "leaflet.markercluster": "1.5.3", - "lit": "2.8.0", - "lit-html": "2.8.0", + "lit": "3.3.0", + "lit-html": "3.3.0", "luxon": "3.6.1", "marked": "15.0.8", "memoize-one": "6.0.0", @@ -152,10 +153,8 @@ "devDependencies": { "@babel/core": "7.26.10", "@babel/helper-define-polyfill-provider": "0.6.4", - "@babel/plugin-proposal-decorators": "7.25.9", "@babel/plugin-transform-runtime": "7.26.10", "@babel/preset-env": "7.26.9", - "@babel/preset-typescript": "7.27.0", "@bundle-stats/plugin-webpack-filter": "4.19.1", "@lokalise/node-api": "14.4.0", "@octokit/auth-oauth-device": "7.1.5", @@ -230,13 +229,14 @@ }, "resolutions": { "@material/mwc-button@^0.25.3": "^0.27.0", - "lit": "2.8.0", - "lit-html": "2.8.0", + "lit": "3.3.0", + "lit-html": "3.3.0", "clean-css": "5.3.3", - "@lit/reactive-element": "1.6.3", + "@lit/reactive-element": "2.1.0", "@fullcalendar/daygrid": "6.1.17", "globals": "16.0.0", - "tslib": "2.8.1" + "tslib": "2.8.1", + "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch" }, "packageManager": "yarn@4.9.1" } diff --git a/src/auth/ha-pick-auth-provider.ts b/src/auth/ha-pick-auth-provider.ts index 2ee93fb2e4..9f6f11cd7b 100644 --- a/src/auth/ha-pick-auth-provider.ts +++ b/src/auth/ha-pick-auth-provider.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-icon-next"; +import "../components/ha-list"; import "../components/ha-list-item"; import type { AuthProvider } from "../data/auth"; @@ -29,7 +29,7 @@ export class HaPickAuthProvider extends LitElement { >${this.localize("ui.panel.page-authorize.pick_auth_provider")} - + ${this.authProviders.map( (provider) => html` ` )} - + `; } @@ -77,7 +77,7 @@ export class HaPickAuthProvider extends LitElement { background: var(--card-background-color); padding: 0 15px; } - mwc-list { + ha-list { margin: 16px -16px 0; --mdc-list-side-padding: 24px; } diff --git a/src/common/decorators/restore-scroll.ts b/src/common/decorators/restore-scroll.ts index b7ba120cf5..f82915fa2e 100644 --- a/src/common/decorators/restore-scroll.ts +++ b/src/common/decorators/restore-scroll.ts @@ -1,46 +1,65 @@ -import type { LitElement } from "lit"; -import type { ClassElement } from "../../types"; +import type { ReactiveElement } from "lit"; import { throttle } from "../util/throttle"; const throttleReplaceState = throttle((value) => { history.replaceState({ scrollPosition: value }, ""); }, 300); -export const restoreScroll = - (selector: string): any => - (element: ClassElement) => ({ - kind: "method", - placement: "prototype", - key: element.key, - descriptor: { - set(this: LitElement, value: number) { - throttleReplaceState(value); - this[`__${String(element.key)}`] = value; - }, - get(this: LitElement) { - return ( - this[`__${String(element.key)}`] || history.state?.scrollPosition - ); - }, - enumerable: true, - configurable: true, - }, - finisher(cls: typeof LitElement) { - const connectedCallback = cls.prototype.connectedCallback; - cls.prototype.connectedCallback = function () { - connectedCallback.call(this); - const scrollPos = this[element.key]; - if (scrollPos) { - this.updateComplete.then(() => { - const target = this.renderRoot.querySelector(selector); - if (!target) { - return; - } - setTimeout(() => { - target.scrollTop = scrollPos; - }, 0); - }); - } +export function restoreScroll(selector: string) { + return ( + proto: ElemClass, + propertyKey: string + ) => { + if (typeof propertyKey === "object") { + throw new Error("This decorator does not support this compilation type."); + } + + const connectedCallback = proto.connectedCallback; + proto.connectedCallback = function () { + connectedCallback.call(this); + + const scrollPos = this[propertyKey]; + + if (scrollPos) { + this.updateComplete.then(() => { + const target = this.renderRoot.querySelector(selector); + if (!target) { + return; + } + setTimeout(() => { + target.scrollTop = scrollPos; + }, 0); + }); + } + }; + + const descriptor = Object.getOwnPropertyDescriptor(proto, propertyKey); + let newDescriptor: PropertyDescriptor; + if (descriptor === undefined) { + newDescriptor = { + get(this: ReactiveElement) { + return ( + this[`__${String(propertyKey)}`] || history.state?.scrollPosition + ); + }, + set(this: ReactiveElement, value) { + throttleReplaceState(value); + this[`__${String(propertyKey)}`] = value; + }, + configurable: true, + enumerable: true, }; - }, - }); + } else { + const oldSetter = descriptor.set; + newDescriptor = { + ...descriptor, + set(this: ReactiveElement, value) { + throttleReplaceState(value); + this[`__${String(propertyKey)}`] = value; + oldSetter?.call(this, value); + }, + }; + } + Object.defineProperty(proto, propertyKey, newDescriptor); + }; +} diff --git a/src/common/decorators/storage.ts b/src/common/decorators/storage.ts index b1e62d9bb3..a806fa9791 100644 --- a/src/common/decorators/storage.ts +++ b/src/common/decorators/storage.ts @@ -1,14 +1,17 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { ReactiveElement } from "lit"; +import { ReactiveElement } from "lit"; import type { InternalPropertyDeclaration } from "lit/decorators"; -import type { ClassElement } from "../../types"; type Callback = (oldValue: any, newValue: any) => void; +type ReactiveStorageElement = ReactiveElement & { + __unbsubLocalStorage: UnsubscribeFunc | undefined; +}; + class StorageClass { - constructor(storage = window.localStorage) { - this.storage = storage; - if (storage !== window.localStorage) { + constructor(store = window.localStorage) { + this.storage = store; + if (this.storage !== window.localStorage) { // storage events only work for localStorage return; } @@ -99,17 +102,23 @@ class StorageClass { const storages: Record = {}; -export const storage = - (options: { - key?: string; - storage?: "localStorage" | "sessionStorage"; - subscribe?: boolean; - state?: boolean; - stateOptions?: InternalPropertyDeclaration; - serializer?: (value: any) => any; - deserializer?: (value: any) => any; - }): any => - (clsElement: ClassElement) => { +export function storage(options: { + key?: string; + storage?: "localStorage" | "sessionStorage"; + subscribe?: boolean; + state?: boolean; + stateOptions?: InternalPropertyDeclaration; + serializer?: (value: any) => any; + deserializer?: (value: any) => any; +}) { + return ( + proto: ElemClass, + propertyKey: string + ) => { + if (typeof propertyKey === "object") { + throw new Error("This decorator does not support this compilation type."); + } + const storageName = options.storage || "localStorage"; let storageInstance: StorageClass; @@ -120,11 +129,7 @@ export const storage = storages[storageName] = storageInstance; } - const key = String(clsElement.key); - const storageKey = options.key || String(clsElement.key); - const initVal = clsElement.initializer - ? clsElement.initializer() - : undefined; + const storageKey = options.key || String(propertyKey); storageInstance.addFromStorage(storageKey); @@ -134,7 +139,7 @@ export const storage = storageInstance.subscribeChanges( storageKey!, (oldValue, _newValue) => { - el.requestUpdate(clsElement.key, oldValue); + el.requestUpdate(propertyKey, oldValue); } ) : undefined; @@ -144,7 +149,7 @@ export const storage = ? options.deserializer ? options.deserializer(storageInstance.getValue(storageKey!)) : storageInstance.getValue(storageKey!) - : initVal; + : undefined; const setValue = (el: ReactiveElement, value: any) => { let oldValue: unknown | undefined; @@ -156,44 +161,62 @@ export const storage = options.serializer ? options.serializer(value) : value ); if (options.state) { - el.requestUpdate(clsElement.key, oldValue); + el.requestUpdate(propertyKey, oldValue); } }; - return { - kind: "method", - placement: "prototype", - key: clsElement.key, - descriptor: { - set(this: ReactiveElement, value: unknown) { - setValue(this, value); - }, - get() { + if (options.state && options.subscribe) { + const connectedCallback = proto.connectedCallback; + const disconnectedCallback = proto.disconnectedCallback; + + proto.connectedCallback = function () { + connectedCallback.call(this); + const el = this as unknown as ReactiveStorageElement; + if (!el.__unbsubLocalStorage) { + el.__unbsubLocalStorage = subscribeChanges?.(this); + } + }; + proto.disconnectedCallback = function () { + disconnectedCallback.call(this); + const el = this as unknown as ReactiveStorageElement; + el.__unbsubLocalStorage?.(); + el.__unbsubLocalStorage = undefined; + }; + } + if (options.state) { + ReactiveElement.createProperty(propertyKey, { + noAccessor: true, + ...options.stateOptions, + }); + } + + const descriptor = Object.getOwnPropertyDescriptor(proto, propertyKey); + let newDescriptor: PropertyDescriptor; + if (descriptor === undefined) { + newDescriptor = { + get(this: ReactiveElement) { return getValue(); }, - enumerable: true, + set(this: ReactiveElement, value) { + // Don't set the initial value if we have a value in localStorage + if (this.hasUpdated || getValue() === undefined) { + setValue(this, value); + } + this.requestUpdate(propertyKey, undefined); + }, configurable: true, - }, - finisher(cls: typeof ReactiveElement) { - if (options.state && options.subscribe) { - const connectedCallback = cls.prototype.connectedCallback; - const disconnectedCallback = cls.prototype.disconnectedCallback; - cls.prototype.connectedCallback = function () { - connectedCallback.call(this); - this[`__unbsubLocalStorage${key}`] = subscribeChanges?.(this); - }; - cls.prototype.disconnectedCallback = function () { - disconnectedCallback.call(this); - this[`__unbsubLocalStorage${key}`]?.(); - this[`__unbsubLocalStorage${key}`] = undefined; - }; - } - if (options.state) { - cls.createProperty(clsElement.key, { - noAccessor: true, - ...options.stateOptions, - }); - } - }, - }; + enumerable: true, + }; + } else { + const oldSetter = descriptor.set; + newDescriptor = { + ...descriptor, + set(this: ReactiveElement, value) { + setValue(this, value); + oldSetter?.call(this, value); + }, + }; + } + Object.defineProperty(proto, propertyKey, newDescriptor); }; +} diff --git a/src/common/decorators/transform.ts b/src/common/decorators/transform.ts index 62f2effc8b..ee02be719b 100644 --- a/src/common/decorators/transform.ts +++ b/src/common/decorators/transform.ts @@ -1,39 +1,103 @@ -import type { PropertyDeclaration, PropertyValues, ReactiveElement } from "lit"; -import type { ClassElement } from "../../types"; +import { + ReactiveElement, + type PropertyDeclaration, + type PropertyValues, +} from "lit"; import { shallowEqual } from "../util/shallow-equal"; /** * Transform function type. */ -export type Transformer = (value: V) => T; +export type Transformer = (value: T) => V | undefined; type ReactiveTransformElement = ReactiveElement & { _transformers: Map; _watching: Map>; }; -type ReactiveElementClassWithTransformers = typeof ReactiveElement & { - prototype: ReactiveTransformElement; -}; - /** * Specifies a transformer 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 transformer is assigned to the decorated property. * The transformer receives the current as argument. */ -export const transform = - (config: { - transformer: Transformer; - watch?: PropertyKey[]; - propertyOptions?: PropertyDeclaration; - }): any => - (clsElement: ClassElement) => { - const key = String(clsElement.key); - return { - ...clsElement, - kind: "method", - descriptor: { - set(this: ReactiveTransformElement, value: V) { +export function transform(config: { + transformer: Transformer; + watch?: PropertyKey[]; + propertyOptions?: PropertyDeclaration; +}) { + return ( + proto: ElemClass, + propertyKey: string + ) => { + if (typeof propertyKey === "object") { + throw new Error("This decorator does not support this compilation type."); + } + + const key = String(propertyKey); + + const el = proto as unknown as ReactiveTransformElement; + + // if we haven't wrapped `willUpdate` in this class, do so + if (!el._transformers) { + el._transformers = new Map(); + el._watching = new Map>(); + // @ts-ignore + const userWillUpdate = el.willUpdate; + // @ts-ignore + el.willUpdate = function ( + this: ReactiveTransformElement, + changedProperties: PropertyValues + ) { + userWillUpdate.call(this, changedProperties); + const keys = new Set(); + changedProperties.forEach((_v, k) => { + const watchers = this._watching; + const ks: Set | 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 (!el.hasOwnProperty("_transformers")) { + const tranformers = el._transformers; + el._transformers = new Map(); + tranformers.forEach((v: any, k: PropertyKey) => + el._transformers.set(k, v) + ); + } + // set this method + el._transformers.set(propertyKey, config.transformer); + if (config.watch) { + // store watchers + config.watch.forEach((k) => { + let curWatch = el._watching.get(k); + if (!curWatch) { + curWatch = new Set(); + el._watching.set(k, curWatch); + } + curWatch.add(propertyKey); + }); + } + ReactiveElement.createProperty(propertyKey, { + noAccessor: true, + hasChanged: (v: any, o: any) => !shallowEqual(v, o), + ...config.propertyOptions, + }); + + const descriptor = Object.getOwnPropertyDescriptor(proto, propertyKey); + let newDescriptor: PropertyDescriptor; + if (descriptor === undefined) { + newDescriptor = { + get(this: ReactiveTransformElement): V { + return this[`__transform_${key}`]; + }, + set(this: ReactiveTransformElement, value: T) { const oldValue = this[`__transform_${key}`]; const trnsformr: Transformer | undefined = this._transformers.get(key); @@ -45,65 +109,28 @@ export const transform = 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(); - cls.prototype._watching = new Map>(); - // @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(); - changedProperties.forEach((_v, k) => { - const watchers = this._watching; - const ks: Set | 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, - }); - }, - }; + enumerable: true, + }; + } else { + const oldSetter = descriptor.set; + newDescriptor = { + ...descriptor, + set(this: ReactiveTransformElement, value: T) { + const oldValue = this[`__transform_${key}`]; + const trnsformr: Transformer | 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); + oldSetter?.call(this, value); + }, + }; + } + Object.defineProperty(proto, propertyKey, newDescriptor); }; +} diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index f98856cf96..5748378ed4 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -1,4 +1,4 @@ -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import { ResizeController } from "@lit-labs/observers/resize-controller"; import { mdiChevronDown, mdiChevronUp, mdiRestart } from "@mdi/js"; import { differenceInMinutes } from "date-fns"; diff --git a/src/components/chips/ha-assist-chip.ts b/src/components/chips/ha-assist-chip.ts index 879a88569c..2775264aa4 100644 --- a/src/components/chips/ha-assist-chip.ts +++ b/src/components/chips/ha-assist-chip.ts @@ -1,16 +1,23 @@ -import { MdAssistChip } from "@material/web/chips/assist-chip"; +import { AssistChip } from "@material/web/chips/internal/assist-chip"; +import { styles } from "@material/web/chips/internal/assist-styles"; + +import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles"; +import { styles as elevatedStyles } from "@material/web/chips/internal/elevated-styles"; + import { css, html } from "lit"; import { customElement, property } from "lit/decorators"; @customElement("ha-assist-chip") // @ts-ignore -export class HaAssistChip extends MdAssistChip { +export class HaAssistChip extends AssistChip { @property({ type: Boolean, reflect: true }) filled = false; @property({ type: Boolean }) active = false; static override styles = [ - ...super.styles, + sharedStyles, + elevatedStyles, + styles, css` :host { --md-sys-color-primary: var(--primary-text-color); diff --git a/src/components/chips/ha-filter-chip.ts b/src/components/chips/ha-filter-chip.ts index accd3c5f23..daf633b092 100644 --- a/src/components/chips/ha-filter-chip.ts +++ b/src/components/chips/ha-filter-chip.ts @@ -1,14 +1,23 @@ -import { MdFilterChip } from "@material/web/chips/filter-chip"; +import { FilterChip } from "@material/web/chips/internal/filter-chip"; +import { styles } from "@material/web/chips/internal/filter-styles"; +import { styles as selectableStyles } from "@material/web/chips/internal/selectable-styles"; +import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles"; +import { styles as trailingIconStyles } from "@material/web/chips/internal/trailing-icon-styles"; +import { styles as elevatedStyles } from "@material/web/chips/internal/elevated-styles"; import { css, html } from "lit"; import { customElement, property } from "lit/decorators"; @customElement("ha-filter-chip") -export class HaFilterChip extends MdFilterChip { +export class HaFilterChip extends FilterChip { @property({ type: Boolean, reflect: true, attribute: "no-leading-icon" }) noLeadingIcon = false; static override styles = [ - ...super.styles, + sharedStyles, + elevatedStyles, + trailingIconStyles, + selectableStyles, + styles, css` :host { --md-sys-color-primary: var(--primary-text-color); diff --git a/src/components/chips/ha-input-chip.ts b/src/components/chips/ha-input-chip.ts index df64089eb3..918358c832 100644 --- a/src/components/chips/ha-input-chip.ts +++ b/src/components/chips/ha-input-chip.ts @@ -1,11 +1,18 @@ -import { MdInputChip } from "@material/web/chips/input-chip"; +import { InputChip } from "@material/web/chips/internal/input-chip"; +import { styles } from "@material/web/chips/internal/input-styles"; +import { styles as selectableStyles } from "@material/web/chips/internal/selectable-styles"; +import { styles as sharedStyles } from "@material/web/chips/internal/shared-styles"; +import { styles as trailingIconStyles } from "@material/web/chips/internal/trailing-icon-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; @customElement("ha-input-chip") -export class HaInputChip extends MdInputChip { +export class HaInputChip extends InputChip { static override styles = [ - ...super.styles, + sharedStyles, + trailingIconStyles, + selectableStyles, + styles, css` :host { --md-sys-color-primary: var(--primary-text-color); diff --git a/src/components/data-table/dialog-data-table-settings.ts b/src/components/data-table/dialog-data-table-settings.ts index 1b23e4927c..ac7acac001 100644 --- a/src/components/data-table/dialog-data-table-settings.ts +++ b/src/components/data-table/dialog-data-table-settings.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list"; import { mdiDrag, mdiEye, mdiEyeOff } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -6,18 +5,19 @@ import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { repeat } from "lit/directives/repeat"; import memoizeOne from "memoize-one"; +import { fireEvent } from "../../common/dom/fire_event"; import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; +import "../ha-button"; import { createCloseHeading } from "../ha-dialog"; +import "../ha-list"; import "../ha-list-item"; import "../ha-sortable"; -import "../ha-button"; import type { DataTableColumnContainer, DataTableColumnData, } from "./ha-data-table"; import type { DataTableSettingsDialogParams } from "./show-dialog-data-table-settings"; -import { fireEvent } from "../../common/dom/fire_event"; @customElement("dialog-data-table-settings") export class DialogDataTableSettings extends LitElement { @@ -104,7 +104,7 @@ export class DialogDataTableSettings extends LitElement { draggable-selector=".draggable" handle-selector=".handle" > - + ${repeat( columns, (col) => col.key, @@ -150,7 +150,7 @@ export class DialogDataTableSettings extends LitElement { `; } )} - + ${localize("ui.components.data-table.settings.restore")} ${value === NO_AUTOMATION_KEY - ? html` + ? html` ${this.NO_AUTOMATION_TEXT} - ` + ` : ""} ${value === UNKNOWN_AUTOMATION_KEY - ? html` + ? html` ${this.UNKNOWN_AUTOMATION_TEXT} - ` + ` : ""} ${this._automations.map( (automation, idx) => html` - + ${this._localizeDeviceAutomation( this.hass, this._entityReg, automation )} - + ` )} diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts index b7b3e9390b..49b5351f28 100644 --- a/src/components/entity/ha-entity-picker.ts +++ b/src/components/entity/ha-entity-picker.ts @@ -26,7 +26,6 @@ import "../ha-combo-box"; import type { HaComboBox } from "../ha-combo-box"; import "../ha-combo-box-item"; import "../ha-icon-button"; -import "../ha-list-item"; import "../ha-svg-icon"; import "./state-badge"; diff --git a/src/components/ha-area-floor-picker.ts b/src/components/ha-area-floor-picker.ts index 5c13690c01..ed52b1c9ee 100644 --- a/src/components/ha-area-floor-picker.ts +++ b/src/components/ha-area-floor-picker.ts @@ -28,7 +28,6 @@ import type { HaComboBox } from "./ha-combo-box"; import "./ha-combo-box-item"; import "./ha-floor-icon"; import "./ha-icon-button"; -import "./ha-list-item"; import "./ha-svg-icon"; import "./ha-tree-indicator"; diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts index 9b00f0afa7..5a77caf84a 100644 --- a/src/components/ha-area-picker.ts +++ b/src/components/ha-area-picker.ts @@ -25,7 +25,6 @@ import "./ha-combo-box"; import type { HaComboBox } from "./ha-combo-box"; import "./ha-combo-box-item"; import "./ha-icon-button"; -import "./ha-list-item"; import "./ha-svg-icon"; type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry; diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts index 7b2a5b3525..bc873e499b 100644 --- a/src/components/ha-base-time-input.ts +++ b/src/components/ha-base-time-input.ts @@ -1,16 +1,16 @@ -import "@material/mwc-list/mwc-list-item"; +import { mdiClose } from "@mdi/js"; import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; -import { mdiClose } from "@mdi/js"; import { ifDefined } from "lit/directives/if-defined"; import { fireEvent } from "../common/dom/fire_event"; import { stopPropagation } from "../common/dom/stop_propagation"; -import "./ha-select"; import "./ha-icon-button"; +import "./ha-input-helper-text"; +import "./ha-list-item"; +import "./ha-select"; import "./ha-textfield"; import type { HaTextField } from "./ha-textfield"; -import "./ha-input-helper-text"; export interface TimeChangedEvent { days?: number; @@ -266,8 +266,8 @@ export class HaBaseTimeInput extends LitElement { @selected=${this._valueChanged} @closed=${stopPropagation} > - AM - PM + AM + PM `} ${this.helper diff --git a/src/components/ha-blueprint-picker.ts b/src/components/ha-blueprint-picker.ts index 3300ea4937..5c13ef894e 100644 --- a/src/components/ha-blueprint-picker.ts +++ b/src/components/ha-blueprint-picker.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -8,6 +7,7 @@ import { stringCompare } from "../common/string/compare"; import type { Blueprint, BlueprintDomain, Blueprints } from "../data/blueprint"; import { fetchBlueprints } from "../data/blueprint"; import type { HomeAssistant } from "../types"; +import "./ha-list-item"; import "./ha-select"; @customElement("ha-blueprint-picker") @@ -64,9 +64,9 @@ class HaBluePrintPicker extends LitElement { > ${this._processedBlueprints(this.blueprints).map( (blueprint) => html` - + ${blueprint.name} - + ` )} diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index 081e3cea24..5bb561f8c7 100644 --- a/src/components/ha-button-menu.ts +++ b/src/components/ha-button-menu.ts @@ -1,5 +1,4 @@ import type { Button } from "@material/mwc-button"; -import "@material/mwc-menu"; import type { Corner, Menu, MenuCorner } from "@material/mwc-menu"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; @@ -7,6 +6,7 @@ import { customElement, property, query } from "lit/decorators"; import { mainWindow } from "../common/dom/get_main_window"; import { FOCUS_TARGET } from "../dialogs/make-dialog-manager"; import type { HaIconButton } from "./ha-icon-button"; +import "./ha-menu"; @customElement("ha-button-menu") export class HaButtonMenu extends LitElement { @@ -31,7 +31,7 @@ export class HaButtonMenu extends LitElement { @property({ type: Boolean, attribute: "no-anchor" }) public noAnchor = false; - @query("mwc-menu", true) private _menu?: Menu; + @query("ha-menu", true) private _menu?: Menu; public get items() { return this._menu?.items; @@ -54,7 +54,7 @@ export class HaButtonMenu extends LitElement {
- - + `; } @@ -73,7 +73,7 @@ export class HaButtonMenu extends LitElement { if (mainWindow.document.dir === "rtl") { this.updateComplete.then(() => { - this.querySelectorAll("mwc-list-item").forEach((item) => { + this.querySelectorAll("ha-list-item").forEach((item) => { const style = document.createElement("style"); style.innerHTML = "span.material-icons:first-of-type { margin-left: var(--mdc-list-item-graphic-margin, 32px) !important; margin-right: 0px !important;}"; @@ -93,7 +93,7 @@ export class HaButtonMenu extends LitElement { private get _triggerButton() { return this.querySelector( - 'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"]' + 'ha-icon-button[slot="trigger"], ha-button[slot="trigger"], mwc-button[slot="trigger"]' ) as HaIconButton | Button | null; } diff --git a/src/components/ha-combo-box-item.ts b/src/components/ha-combo-box-item.ts index 4a1b822ebc..8486afd310 100644 --- a/src/components/ha-combo-box-item.ts +++ b/src/components/ha-combo-box-item.ts @@ -1,6 +1,6 @@ import { css } from "lit"; import { customElement, property } from "lit/decorators"; -import { HaMdListItem } from "./ha-md-list-item"; +import { HaMdListItem, haMdListStyles } from "./ha-md-list-item"; @customElement("ha-combo-box-item") export class HaComboBoxItem extends HaMdListItem { @@ -8,7 +8,7 @@ export class HaComboBoxItem extends HaMdListItem { public borderTop = false; static override styles = [ - ...super.styles, + ...haMdListStyles, css` :host { --md-list-item-one-line-container-height: 48px; diff --git a/src/components/ha-control-select-menu.ts b/src/components/ha-control-select-menu.ts index 2bf22046e7..6108cf5b26 100644 --- a/src/components/ha-control-select-menu.ts +++ b/src/components/ha-control-select-menu.ts @@ -12,6 +12,7 @@ import type { HaIcon } from "./ha-icon"; import "./ha-ripple"; import "./ha-svg-icon"; import type { HaSvgIcon } from "./ha-svg-icon"; +import "./ha-menu"; @customElement("ha-control-select-menu") export class HaControlSelectMenu extends SelectBase { @@ -91,6 +92,27 @@ export class HaControlSelectMenu extends SelectBase { `; } + protected override renderMenu() { + const classes = this.getMenuClasses(); + return html` + ${this.renderMenuContent()} + `; + } + private _renderArrow() { if (!this.showArrow) return nothing; @@ -240,13 +262,6 @@ export class HaControlSelectMenu extends SelectBase { cursor: not-allowed; color: var(--disabled-color); } - - mwc-menu { - --mdc-shape-medium: 8px; - } - mwc-list { - --mdc-list-vertical-padding: 0; - } `, ]; } diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index d85f8d809b..5d94626f92 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -1,7 +1,7 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list"; + import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; -import "@material/mwc-list/mwc-list-item"; + import { mdiCalendar } from "@mdi/js"; import { isThisYear } from "date-fns"; import { fromZonedTime, toZonedTime } from "date-fns-tz"; @@ -10,6 +10,8 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; import { shiftDateRange } from "../common/datetime/calc_date"; +import type { DateRange } from "../common/datetime/calc_date_range"; +import { calcDateRange } from "../common/datetime/calc_date_range"; import { firstWeekdayIndex } from "../common/datetime/first_weekday"; import { formatShortDateTime, @@ -23,9 +25,9 @@ import "./date-range-picker"; import "./ha-icon-button"; import "./ha-icon-button-next"; import "./ha-icon-button-prev"; +import "./ha-list"; +import "./ha-list-item"; import "./ha-textarea"; -import { calcDateRange } from "../common/datetime/calc_date_range"; -import type { DateRange } from "../common/datetime/calc_date_range"; export type DateRangePickerRanges = Record; @@ -187,11 +189,11 @@ export class HaDateRangePicker extends LitElement { ${this.ranges !== false && (this.ranges || this._ranges) ? html`
- + ${Object.keys(this.ranges || this._ranges!).map( - (name) => html`${name}` + (name) => html`${name}` )} - +
` : nothing}
diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts index 18839b7cb6..0b5c176352 100644 --- a/src/components/ha-filter-blueprints.ts +++ b/src/components/ha-filter-blueprints.ts @@ -1,6 +1,4 @@ -import "@material/mwc-list/mwc-list"; import type { SelectedDetail } from "@material/mwc-list"; -import "@material/mwc-menu/mwc-menu-surface"; import { mdiFilterVariantRemove } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -12,9 +10,10 @@ import type { RelatedResult } from "../data/search"; import { findRelated } from "../data/search"; import { haStyleScrollbar } from "../resources/styles"; import type { HomeAssistant } from "../types"; +import "./ha-check-list-item"; import "./ha-expansion-panel"; import "./ha-icon-button"; -import "./ha-check-list-item"; +import "./ha-list"; @customElement("ha-filter-blueprints") export class HaFilterBlueprints extends LitElement { @@ -62,7 +61,7 @@ export class HaFilterBlueprints extends LitElement {
${this._blueprints && this._shouldRender ? html` - ` )} - + ` : nothing} @@ -95,7 +94,7 @@ export class HaFilterBlueprints extends LitElement { if (changed.has("expanded") && this.expanded) { setTimeout(() => { if (this.narrow || !this.expanded) return; - this.renderRoot.querySelector("mwc-list")!.style.height = + this.renderRoot.querySelector("ha-list")!.style.height = `${this.clientHeight - 49}px`; }, 300); } diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts index 678e784499..dd153c7b02 100644 --- a/src/components/ha-filter-categories.ts +++ b/src/components/ha-filter-categories.ts @@ -1,5 +1,3 @@ -import "@material/mwc-list/mwc-list"; -import "@material/mwc-list/mwc-list-item"; import type { ActionDetail, SelectedDetail } from "@material/mwc-list"; import { mdiDelete, @@ -30,6 +28,7 @@ import "./ha-expansion-panel"; import "./ha-icon"; import "./ha-button-menu"; import "./ha-list-item"; +import "./ha-list"; import { stopPropagation } from "../common/dom/stop_propagation"; @customElement("ha-filter-categories") @@ -82,7 +81,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) { ${this._shouldRender ? html` - - ${this.hass.localize( "ui.panel.config.category.editor.edit" - )} - ${this.hass.localize( "ui.panel.config.category.editor.delete" - )} ` )} - + ` : nothing} @@ -169,7 +168,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) { if (changed.has("expanded") && this.expanded) { setTimeout(() => { if (!this.expanded) return; - this.renderRoot.querySelector("mwc-list")!.style.height = + this.renderRoot.querySelector("ha-list")!.style.height = `${this.clientHeight - (49 + 48)}px`; }, 300); } @@ -312,7 +311,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) { padding: 0px 2px; color: var(--text-primary-color); } - mwc-list { + ha-list { --mdc-list-item-meta-size: auto; --mdc-list-side-padding-right: 4px; --mdc-icon-button-size: 36px; diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts index 69b53b4d29..9e929fe8c4 100644 --- a/src/components/ha-filter-devices.ts +++ b/src/components/ha-filter-devices.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiFilterVariantRemove } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -14,6 +13,7 @@ import { loadVirtualizer } from "../resources/virtualizer"; import type { HomeAssistant } from "../types"; import "./ha-check-list-item"; import "./ha-expansion-panel"; +import "./ha-list"; import "./search-input-outlined"; @customElement("ha-filter-devices") @@ -68,7 +68,7 @@ export class HaFilterDevices extends LitElement { @value-changed=${this._handleSearchChange} > - + - ` + ` : nothing} `; @@ -117,7 +117,7 @@ export class HaFilterDevices extends LitElement { if (changed.has("expanded") && this.expanded) { setTimeout(() => { if (!this.expanded) return; - this.renderRoot.querySelector("mwc-list")!.style.height = + this.renderRoot.querySelector("ha-list")!.style.height = `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input }, 300); } diff --git a/src/components/ha-filter-domains.ts b/src/components/ha-filter-domains.ts index 70b992c8a1..dbada6c247 100644 --- a/src/components/ha-filter-domains.ts +++ b/src/components/ha-filter-domains.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiFilterVariantRemove } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -6,15 +5,16 @@ import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; +import { computeDomain } from "../common/entity/compute_domain"; import { stringCompare } from "../common/string/compare"; import { domainToName } from "../data/integration"; import { haStyleScrollbar } from "../resources/styles"; import type { HomeAssistant } from "../types"; +import "./ha-check-list-item"; import "./ha-domain-icon"; import "./ha-expansion-panel"; -import "./ha-check-list-item"; +import "./ha-list"; import "./search-input-outlined"; -import { computeDomain } from "../common/entity/compute_domain"; @customElement("ha-filter-domains") export class HaFilterDomains extends LitElement { @@ -57,7 +57,7 @@ export class HaFilterDomains extends LitElement { @value-changed=${this._handleSearchChange} > - ` )} - ` + ` : nothing} `; @@ -111,7 +111,7 @@ export class HaFilterDomains extends LitElement { if (changed.has("expanded") && this.expanded) { setTimeout(() => { if (!this.expanded) return; - this.renderRoot.querySelector("mwc-list")!.style.height = + this.renderRoot.querySelector("ha-list")!.style.height = `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input }, 300); } diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts index d451f36c9d..39d6d51288 100644 --- a/src/components/ha-filter-entities.ts +++ b/src/components/ha-filter-entities.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiFilterVariantRemove } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -14,8 +13,9 @@ import { haStyleScrollbar } from "../resources/styles"; import { loadVirtualizer } from "../resources/virtualizer"; import type { HomeAssistant } from "../types"; import "./ha-check-list-item"; -import "./ha-state-icon"; import "./ha-expansion-panel"; +import "./ha-list"; +import "./ha-state-icon"; import "./search-input-outlined"; @customElement("ha-filter-entities") @@ -71,7 +71,7 @@ export class HaFilterEntities extends LitElement { @value-changed=${this._handleSearchChange} > - + - + ` : nothing} @@ -95,7 +95,7 @@ export class HaFilterEntities extends LitElement { if (changed.has("expanded") && this.expanded) { setTimeout(() => { if (!this.expanded) return; - this.renderRoot.querySelector("mwc-list")!.style.height = + this.renderRoot.querySelector("ha-list")!.style.height = `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input }, 300); } diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts index 5f0e3ee313..3cf160dec7 100644 --- a/src/components/ha-filter-floor-areas.ts +++ b/src/components/ha-filter-floor-areas.ts @@ -1,5 +1,3 @@ -import "@material/mwc-list/mwc-list"; -import "@material/mwc-menu/mwc-menu-surface"; import { mdiFilterVariantRemove, mdiTextureBox } from "@mdi/js"; import type { CSSResultGroup, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -15,12 +13,13 @@ import { findRelated } from "../data/search"; import { haStyleScrollbar } from "../resources/styles"; import type { HomeAssistant } from "../types"; import "./ha-check-list-item"; +import "./ha-expansion-panel"; import "./ha-floor-icon"; import "./ha-icon"; +import "./ha-icon-button"; +import "./ha-list"; import "./ha-svg-icon"; import "./ha-tree-indicator"; -import "./ha-icon-button"; -import "./ha-expansion-panel"; @customElement("ha-filter-floor-areas") export class HaFilterFloorAreas extends LitElement { @@ -74,7 +73,7 @@ export class HaFilterFloorAreas extends LitElement { ${this._shouldRender ? html` - + ${repeat( areas?.floors || [], (floor) => floor.floor_id, @@ -108,7 +107,7 @@ export class HaFilterFloorAreas extends LitElement { (area) => area.area_id, (area) => this._renderArea(area) )} - + ` : nothing} @@ -183,7 +182,7 @@ export class HaFilterFloorAreas extends LitElement { if (changed.has("expanded") && this.expanded) { setTimeout(() => { if (!this.expanded) return; - this.renderRoot.querySelector("mwc-list")!.style.height = + this.renderRoot.querySelector("ha-list")!.style.height = `${this.clientHeight - 49}px`; }, 300); } diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts index 46064d68a3..bf8507ff1f 100644 --- a/src/components/ha-filter-integrations.ts +++ b/src/components/ha-filter-integrations.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiFilterVariantRemove } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -11,10 +10,11 @@ import type { IntegrationManifest } from "../data/integration"; import { fetchIntegrationManifests } from "../data/integration"; import { haStyleScrollbar } from "../resources/styles"; import type { HomeAssistant } from "../types"; -import "./ha-domain-icon"; -import "./search-input-outlined"; -import "./ha-expansion-panel"; import "./ha-check-list-item"; +import "./ha-domain-icon"; +import "./ha-expansion-panel"; +import "./ha-list"; +import "./search-input-outlined"; @customElement("ha-filter-integrations") export class HaFilterIntegrations extends LitElement { @@ -57,7 +57,7 @@ export class HaFilterIntegrations extends LitElement { @value-changed=${this._handleSearchChange} > - ` )} - ` + ` : nothing} `; @@ -92,7 +92,7 @@ export class HaFilterIntegrations extends LitElement { if (changed.has("expanded") && this.expanded) { setTimeout(() => { if (!this.expanded) return; - this.renderRoot.querySelector("mwc-list")!.style.height = + this.renderRoot.querySelector("ha-list")!.style.height = `${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input }, 300); } diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts index ee9fbd8906..0d998ad85c 100644 --- a/src/components/ha-filter-labels.ts +++ b/src/components/ha-filter-labels.ts @@ -1,16 +1,15 @@ -import "@material/mwc-list/mwc-list"; import type { SelectedDetail } from "@material/mwc-list"; -import "@material/mwc-menu/mwc-menu-surface"; -import memoizeOne from "memoize-one"; import { mdiCog, mdiFilterVariantRemove } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; +import memoizeOne from "memoize-one"; import { computeCssColor } from "../common/color/compute-color"; import { fireEvent } from "../common/dom/fire_event"; import { navigate } from "../common/navigate"; +import { stringCompare } from "../common/string/compare"; import type { LabelRegistryEntry } from "../data/label_registry"; import { subscribeLabelRegistry } from "../data/label_registry"; import { SubscribeMixin } from "../mixins/subscribe-mixin"; @@ -19,11 +18,11 @@ import type { HomeAssistant } from "../types"; import "./ha-check-list-item"; import "./ha-expansion-panel"; import "./ha-icon"; -import "./ha-label"; import "./ha-icon-button"; +import "./ha-label"; +import "./ha-list"; import "./ha-list-item"; import "./search-input-outlined"; -import { stringCompare } from "../common/string/compare"; @customElement("ha-filter-labels") export class HaFilterLabels extends SubscribeMixin(LitElement) { @@ -93,7 +92,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) { @value-changed=${this._handleSearchChange} > - `; } )} - ` + ` : nothing} ${this.expanded @@ -142,7 +141,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) { if (changed.has("expanded") && this.expanded) { setTimeout(() => { if (!this.expanded) return; - this.renderRoot.querySelector("mwc-list")!.style.height = + this.renderRoot.querySelector("ha-list")!.style.height = `${this.clientHeight - (49 + 48 + 32)}px`; }, 300); } diff --git a/src/components/ha-filter-states.ts b/src/components/ha-filter-states.ts index b39acfb970..cd3ef47856 100644 --- a/src/components/ha-filter-states.ts +++ b/src/components/ha-filter-states.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import type { List, SelectedDetail } from "@material/mwc-list"; import { mdiFilterVariantRemove } from "@mdi/js"; import type { CSSResultGroup } from "lit"; @@ -11,6 +10,7 @@ import "./ha-check-list-item"; import "./ha-expansion-panel"; import "./ha-icon"; import "./ha-icon-button"; +import "./ha-list"; @customElement("ha-filter-states") export class HaFilterStates extends LitElement { @@ -32,7 +32,7 @@ export class HaFilterStates extends LitElement { @state() private _shouldRender = false; - @query("mwc-list") private _list!: List; + @query("ha-list") private _list!: List; protected render() { if (!this.states) { @@ -58,7 +58,7 @@ export class HaFilterStates extends LitElement { ${this._shouldRender ? html` - ` )} - + ` : nothing} diff --git a/src/components/ha-form/ha-form-optional_actions.ts b/src/components/ha-form/ha-form-optional_actions.ts index 30f2fcec7f..3568fa1b63 100644 --- a/src/components/ha-form/ha-form-optional_actions.ts +++ b/src/components/ha-form/ha-form-optional_actions.ts @@ -6,6 +6,7 @@ import { stopPropagation } from "../../common/dom/stop_propagation"; import type { LocalizeFunc } from "../../common/translations/localize"; import type { HomeAssistant } from "../../types"; import "./ha-form"; +import "../ha-list-item"; import type { HaFormOptionalActionsSchema, HaFormDataContainer, diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts index 57c796312d..cbca7aca3c 100644 --- a/src/components/ha-form/ha-form.ts +++ b/src/components/ha-form/ha-form.ts @@ -184,8 +184,8 @@ export class HaForm extends LitElement implements HaFormElement { return context; } - protected createRenderRoot() { - const root = super.createRenderRoot(); + protected createRenderRoot(): HTMLElement | DocumentFragment { + const root = super.createRenderRoot() as ShadowRoot; // attach it as soon as possible to make sure we fetch all events. this.addValueChangedListener(root); return root; diff --git a/src/components/ha-icon-overflow-menu.ts b/src/components/ha-icon-overflow-menu.ts index b526e48e24..eed7d557a9 100644 --- a/src/components/ha-icon-overflow-menu.ts +++ b/src/components/ha-icon-overflow-menu.ts @@ -7,7 +7,6 @@ import { haStyle } from "../resources/styles"; import type { HomeAssistant } from "../types"; import "./ha-md-button-menu"; import "./ha-icon-button"; -import "./ha-list-item"; import "./ha-svg-icon"; import "./ha-tooltip"; import "./ha-md-menu-item"; diff --git a/src/components/ha-list.ts b/src/components/ha-list.ts new file mode 100644 index 0000000000..9cb8efd371 --- /dev/null +++ b/src/components/ha-list.ts @@ -0,0 +1,14 @@ +import { ListBase } from "@material/mwc-list/mwc-list-base"; +import { styles } from "@material/mwc-list/mwc-list.css"; +import { customElement } from "lit/decorators"; + +@customElement("ha-list") +export class HaList extends ListBase { + static styles = styles; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-list": HaList; + } +} diff --git a/src/components/ha-md-button-menu.ts b/src/components/ha-md-button-menu.ts index ce4e39f173..4451f11f99 100644 --- a/src/components/ha-md-button-menu.ts +++ b/src/components/ha-md-button-menu.ts @@ -2,11 +2,11 @@ import type { Button } from "@material/mwc-button"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; -import { FOCUS_TARGET } from "../dialogs/make-dialog-manager"; import { fireEvent } from "../common/dom/fire_event"; +import { FOCUS_TARGET } from "../dialogs/make-dialog-manager"; import type { HaIconButton } from "./ha-icon-button"; -import "./ha-menu"; -import type { HaMenu } from "./ha-menu"; +import "./ha-md-menu"; +import type { HaMdMenu } from "./ha-md-menu"; @customElement("ha-md-button-menu") export class HaMdButtonMenu extends LitElement { @@ -19,7 +19,7 @@ export class HaMdButtonMenu extends LitElement { @property({ type: Boolean, attribute: "has-overflow" }) public hasOverflow = false; - @query("ha-menu", true) private _menu!: HaMenu; + @query("ha-menu", true) private _menu!: HaMdMenu; public get items() { return this._menu.items; @@ -38,14 +38,14 @@ export class HaMdButtonMenu extends LitElement {
- - + `; } diff --git a/src/components/ha-md-dialog.ts b/src/components/ha-md-dialog.ts index 06adb5ad6d..f62cee329c 100644 --- a/src/components/ha-md-dialog.ts +++ b/src/components/ha-md-dialog.ts @@ -1,4 +1,5 @@ -import { MdDialog } from "@material/web/dialog/dialog"; +import { Dialog } from "@material/web/dialog/internal/dialog"; +import { styles } from "@material/web/dialog/internal/dialog-styles"; import { type DialogAnimation, DIALOG_DEFAULT_CLOSE_ANIMATION, @@ -8,10 +9,10 @@ import { css } from "lit"; import { customElement, property } from "lit/decorators"; // workaround to be able to overlay a dialog with another dialog -MdDialog.addInitializer(async (instance) => { +Dialog.addInitializer(async (instance) => { await instance.updateComplete; - const dialogInstance = instance as MdDialog; + const dialogInstance = instance as HaMdDialog; // @ts-expect-error dialog is private dialogInstance.dialog.prepend(dialogInstance.scrim); @@ -49,7 +50,7 @@ let DIALOG_POLYFILL: Promise; * */ @customElement("ha-md-dialog") -export class HaMdDialog extends MdDialog { +export class HaMdDialog extends Dialog { /** * When true the dialog will not close when the user presses the esc key or press out of the dialog. */ @@ -146,7 +147,7 @@ export class HaMdDialog extends MdDialog { } static override styles = [ - ...super.styles, + styles, css` :host { --md-dialog-container-color: var(--card-background-color); diff --git a/src/components/ha-md-divider.ts b/src/components/ha-md-divider.ts index 63bac722d5..111c059e96 100644 --- a/src/components/ha-md-divider.ts +++ b/src/components/ha-md-divider.ts @@ -1,11 +1,12 @@ -import { MdDivider } from "@material/web/divider/divider"; +import { Divider } from "@material/web/divider/internal/divider"; +import { styles } from "@material/web/divider/internal/divider-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; @customElement("ha-md-divider") -export class HaMdDivider extends MdDivider { +export class HaMdDivider extends Divider { static override styles = [ - ...super.styles, + styles, css` :host { --md-divider-color: var(--divider-color); diff --git a/src/components/ha-md-list-item.ts b/src/components/ha-md-list-item.ts index 0920557f9a..702dc08a21 100644 --- a/src/components/ha-md-list-item.ts +++ b/src/components/ha-md-list-item.ts @@ -1,26 +1,29 @@ -import { MdListItem } from "@material/web/list/list-item"; +import { ListItemEl } from "@material/web/list/internal/listitem/list-item"; +import { styles } from "@material/web/list/internal/listitem/list-item-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; +export const haMdListStyles = [ + styles, + css` + :host { + --ha-icon-display: block; + --md-sys-color-primary: var(--primary-text-color); + --md-sys-color-secondary: var(--secondary-text-color); + --md-sys-color-surface: var(--card-background-color); + --md-sys-color-on-surface: var(--primary-text-color); + --md-sys-color-on-surface-variant: var(--secondary-text-color); + } + md-item { + overflow: var(--md-item-overflow, hidden); + align-items: var(--md-item-align-items, center); + } + `, +]; + @customElement("ha-md-list-item") -export class HaMdListItem extends MdListItem { - static override styles = [ - ...super.styles, - css` - :host { - --ha-icon-display: block; - --md-sys-color-primary: var(--primary-text-color); - --md-sys-color-secondary: var(--secondary-text-color); - --md-sys-color-surface: var(--card-background-color); - --md-sys-color-on-surface: var(--primary-text-color); - --md-sys-color-on-surface-variant: var(--secondary-text-color); - } - md-item { - overflow: var(--md-item-overflow, hidden); - align-items: var(--md-item-align-items, center); - } - `, - ]; +export class HaMdListItem extends ListItemEl { + static override styles = haMdListStyles; } declare global { diff --git a/src/components/ha-md-list.ts b/src/components/ha-md-list.ts index 0ab2b5b2d5..0bba2ced8d 100644 --- a/src/components/ha-md-list.ts +++ b/src/components/ha-md-list.ts @@ -1,11 +1,12 @@ -import { MdList } from "@material/web/list/list"; +import { List } from "@material/web/list/internal/list"; +import { styles } from "@material/web/list/internal/list-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; @customElement("ha-md-list") -export class HaMdList extends MdList { +export class HaMdList extends List { static override styles = [ - ...super.styles, + styles, css` :host { --md-sys-color-surface: var(--card-background-color); diff --git a/src/components/ha-md-menu-item.ts b/src/components/ha-md-menu-item.ts index a8a7579f41..06a43c7340 100644 --- a/src/components/ha-md-menu-item.ts +++ b/src/components/ha-md-menu-item.ts @@ -1,13 +1,14 @@ -import { MdMenuItem } from "@material/web/menu/menu-item"; +import { MenuItemEl } from "@material/web/menu/internal/menuitem/menu-item"; +import { styles } from "@material/web/menu/internal/menuitem/menu-item-styles"; import { css } from "lit"; import { customElement, property } from "lit/decorators"; @customElement("ha-md-menu-item") -export class HaMdMenuItem extends MdMenuItem { +export class HaMdMenuItem extends MenuItemEl { @property({ attribute: false }) clickAction?: (item?: HTMLElement) => void; static override styles = [ - ...super.styles, + styles, css` :host { --ha-icon-display: block; diff --git a/src/components/ha-md-menu.ts b/src/components/ha-md-menu.ts new file mode 100644 index 0000000000..919d02b1eb --- /dev/null +++ b/src/components/ha-md-menu.ts @@ -0,0 +1,47 @@ +import { Menu } from "@material/web/menu/internal/menu"; +import { styles } from "@material/web/menu/internal/menu-styles"; +import type { CloseMenuEvent } from "@material/web/menu/menu"; +import { + CloseReason, + KeydownCloseKey, +} from "@material/web/menu/internal/controllers/shared"; +import { css } from "lit"; +import { customElement } from "lit/decorators"; +import type { HaMdMenuItem } from "./ha-md-menu-item"; + +@customElement("ha-md-menu") +export class HaMdMenu extends Menu { + connectedCallback(): void { + super.connectedCallback(); + this.addEventListener("close-menu", this._handleCloseMenu); + } + + private _handleCloseMenu(ev: CloseMenuEvent) { + if ( + ev.detail.reason.kind === CloseReason.KEYDOWN && + ev.detail.reason.key === KeydownCloseKey.ESCAPE + ) { + return; + } + (ev.detail.initiator as HaMdMenuItem).clickAction?.(ev.detail.initiator); + } + + static override styles = [ + styles, + css` + :host { + --md-sys-color-surface-container: var(--card-background-color); + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-md-menu": HaMdMenu; + } + + interface HTMLElementEventMap { + "close-menu": CloseMenuEvent; + } +} diff --git a/src/components/ha-md-select-option.ts b/src/components/ha-md-select-option.ts index 4cf8062e21..f0df065e97 100644 --- a/src/components/ha-md-select-option.ts +++ b/src/components/ha-md-select-option.ts @@ -1,11 +1,12 @@ -import { MdSelectOption } from "@material/web/select/select-option"; +import { SelectOptionEl } from "@material/web/select/internal/selectoption/select-option"; +import { styles } from "@material/web/menu/internal/menuitem/menu-item-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; @customElement("ha-md-select-option") -export class HaMdSelectOption extends MdSelectOption { +export class HaMdSelectOption extends SelectOptionEl { static override styles = [ - ...super.styles, + styles, css` :host { --ha-icon-display: block; diff --git a/src/components/ha-md-select.ts b/src/components/ha-md-select.ts index 7dc7ef03f6..2a6aa1070d 100644 --- a/src/components/ha-md-select.ts +++ b/src/components/ha-md-select.ts @@ -1,11 +1,14 @@ -import { MdFilledSelect } from "@material/web/select/filled-select"; +import { FilledSelect } from "@material/web/select/internal/filled-select"; +import { styles as sharedStyles } from "@material/web/select/internal/shared-styles"; +import { styles } from "@material/web/select/internal/filled-select-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; @customElement("ha-md-select") -export class HaMdSelect extends MdFilledSelect { +export class HaMdSelect extends FilledSelect { static override styles = [ - ...super.styles, + sharedStyles, + styles, css` :host { --ha-icon-display: block; diff --git a/src/components/ha-md-textfield.ts b/src/components/ha-md-textfield.ts index d0d0b808f7..bd5c26d1e3 100644 --- a/src/components/ha-md-textfield.ts +++ b/src/components/ha-md-textfield.ts @@ -1,11 +1,14 @@ -import { MdFilledTextField } from "@material/web/textfield/filled-text-field"; +import { styles } from "@material/web/textfield/internal/filled-styles"; +import { FilledTextField } from "@material/web/textfield/internal/filled-text-field"; +import { styles as sharedStyles } from "@material/web/textfield/internal/shared-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; @customElement("ha-md-textfield") -export class HaMdTextfield extends MdFilledTextField { +export class HaMdTextfield extends FilledTextField { static override styles = [ - ...super.styles, + sharedStyles, + styles, css` :host { --ha-icon-display: block; diff --git a/src/components/ha-menu.ts b/src/components/ha-menu.ts index 053d012163..1865bdf23c 100644 --- a/src/components/ha-menu.ts +++ b/src/components/ha-menu.ts @@ -1,46 +1,45 @@ -import { MdMenu } from "@material/web/menu/menu"; -import type { CloseMenuEvent } from "@material/web/menu/menu"; -import { - CloseReason, - KeydownCloseKey, -} from "@material/web/menu/internal/controllers/shared"; -import { css } from "lit"; +import { MenuBase } from "@material/mwc-menu/mwc-menu-base"; +import { styles } from "@material/mwc-menu/mwc-menu.css"; +import { html } from "lit"; import { customElement } from "lit/decorators"; -import type { HaMdMenuItem } from "./ha-md-menu-item"; +import { classMap } from "lit/directives/class-map"; +import "./ha-list"; @customElement("ha-menu") -export class HaMenu extends MdMenu { - connectedCallback(): void { - super.connectedCallback(); - this.addEventListener("close-menu", this._handleCloseMenu); - } - - private _handleCloseMenu(ev: CloseMenuEvent) { - if ( - ev.detail.reason.kind === CloseReason.KEYDOWN && - ev.detail.reason.key === KeydownCloseKey.ESCAPE - ) { - return; +export class HaMenu extends MenuBase { + protected get listElement() { + if (!this.listElement_) { + this.listElement_ = this.renderRoot.querySelector("ha-list"); + return this.listElement_; } - (ev.detail.initiator as HaMdMenuItem).clickAction?.(ev.detail.initiator); + + return this.listElement_; } - static override styles = [ - ...super.styles, - css` - :host { - --md-sys-color-surface-container: var(--card-background-color); - } - `, - ]; + protected renderList() { + const itemRoles = this.innerRole === "menu" ? "menuitem" : "option"; + const classes = this.renderListClasses(); + + return html` + + `; + } + + static styles = styles; } declare global { interface HTMLElementTagNameMap { "ha-menu": HaMenu; } - - interface HTMLElementEventMap { - "close-menu": CloseMenuEvent; - } } diff --git a/src/components/ha-navigation-list.ts b/src/components/ha-navigation-list.ts index fd00db4609..a0bc4ef64e 100644 --- a/src/components/ha-navigation-list.ts +++ b/src/components/ha-navigation-list.ts @@ -5,7 +5,6 @@ import { ifDefined } from "lit/directives/if-defined"; import type { PageNavigation } from "../layouts/hass-tabs-subpage"; import type { HomeAssistant } from "../types"; import "./ha-icon-next"; -import "./ha-list-item"; import "./ha-svg-icon"; import "./ha-md-list"; import "./ha-md-list-item"; diff --git a/src/components/ha-outlined-button.ts b/src/components/ha-outlined-button.ts index d2489be100..5b0328f589 100644 --- a/src/components/ha-outlined-button.ts +++ b/src/components/ha-outlined-button.ts @@ -1,11 +1,14 @@ -import { MdOutlinedButton } from "@material/web/button/outlined-button"; +import { OutlinedButton } from "@material/web/button/internal/outlined-button"; +import { styles as sharedStyles } from "@material/web/button/internal/shared-styles"; +import { styles } from "@material/web/button/internal/outlined-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; @customElement("ha-outlined-button") -export class HaOutlinedButton extends MdOutlinedButton { +export class HaOutlinedButton extends OutlinedButton { static override styles = [ - ...super.styles, + sharedStyles, + styles, css` :host { --ha-icon-display: block; diff --git a/src/components/ha-outlined-field.ts b/src/components/ha-outlined-field.ts index 694c9e538c..8b72679158 100644 --- a/src/components/ha-outlined-field.ts +++ b/src/components/ha-outlined-field.ts @@ -1,14 +1,17 @@ -import { MdOutlinedField } from "@material/web/field/outlined-field"; +import { OutlinedField } from "@material/web/field/internal/outlined-field"; +import { styles } from "@material/web/field/internal/outlined-styles"; +import { styles as sharedStyles } from "@material/web/field/internal/shared-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; import { literal } from "lit/static-html"; @customElement("ha-outlined-field") -export class HaOutlinedField extends MdOutlinedField { +export class HaOutlinedField extends OutlinedField { protected readonly fieldTag = literal`ha-outlined-field`; static override styles = [ - ...super.styles, + sharedStyles, + styles, css` .container::before { display: block; diff --git a/src/components/ha-outlined-icon-button.ts b/src/components/ha-outlined-icon-button.ts index 0789fc4f99..7e0835bc5a 100644 --- a/src/components/ha-outlined-icon-button.ts +++ b/src/components/ha-outlined-icon-button.ts @@ -1,16 +1,19 @@ -import { MdOutlinedIconButton } from "@material/web/iconbutton/outlined-icon-button"; +import { IconButton } from "@material/web/iconbutton/internal/icon-button"; +import { styles } from "@material/web/iconbutton/internal/outlined-styles"; +import { styles as sharedStyles } from "@material/web/iconbutton/internal/shared-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; @customElement("ha-outlined-icon-button") -export class HaOutlinedIconButton extends MdOutlinedIconButton { +export class HaOutlinedIconButton extends IconButton { static override styles = [ css` .icon-button { border-radius: var(--_container-shape); } `, - ...super.styles, + sharedStyles, + styles, css` :host { --ha-icon-display: block; diff --git a/src/components/ha-outlined-text-field.ts b/src/components/ha-outlined-text-field.ts index 026bce0b25..e50357cfb4 100644 --- a/src/components/ha-outlined-text-field.ts +++ b/src/components/ha-outlined-text-field.ts @@ -1,15 +1,18 @@ -import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field"; +import { OutlinedTextField } from "@material/web/textfield/internal/outlined-text-field"; +import { styles } from "@material/web/textfield/internal/outlined-styles"; +import { styles as sharedStyles } from "@material/web/textfield/internal/shared-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; import { literal } from "lit/static-html"; import "./ha-outlined-field"; @customElement("ha-outlined-text-field") -export class HaOutlinedTextField extends MdOutlinedTextField { +export class HaOutlinedTextField extends OutlinedTextField { protected readonly fieldTag = literal`ha-outlined-field`; static override styles = [ - ...super.styles, + sharedStyles, + styles, css` :host { --md-sys-color-on-surface: var(--primary-text-color); diff --git a/src/components/ha-radio-list-item.ts b/src/components/ha-radio-list-item.ts new file mode 100644 index 0000000000..a923867f3e --- /dev/null +++ b/src/components/ha-radio-list-item.ts @@ -0,0 +1,52 @@ +import { css } from "lit"; +import { RadioListItemBase } from "@material/mwc-list/mwc-radio-list-item-base"; +import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-item.css"; +import { styles } from "@material/mwc-list/mwc-list-item.css"; +import { customElement } from "lit/decorators"; +import { fireEvent } from "../common/dom/fire_event"; + +@customElement("ha-radio-list-item") +export class HaRadioListItem extends RadioListItemBase { + async onChange(event) { + super.onChange(event); + fireEvent(this, event.type); + } + + static override styles = [ + styles, + controlStyles, + css` + :host { + --mdc-theme-secondary: var(--primary-color); + } + + :host([graphic="avatar"]) .mdc-deprecated-list-item__graphic, + :host([graphic="medium"]) .mdc-deprecated-list-item__graphic, + :host([graphic="large"]) .mdc-deprecated-list-item__graphic, + :host([graphic="control"]) .mdc-deprecated-list-item__graphic { + margin-inline-end: var(--mdc-list-item-graphic-margin, 16px); + margin-inline-start: 0px; + direction: var(--direction); + } + .mdc-deprecated-list-item__meta { + flex-shrink: 0; + direction: var(--direction); + margin-inline-start: auto; + margin-inline-end: 0; + } + .mdc-deprecated-list-item__graphic { + margin-top: var(--radio-list-item-graphic-margin-top); + } + :host([graphic="icon"]) .mdc-deprecated-list-item__graphic { + margin-inline-start: 0; + margin-inline-end: var(--mdc-list-item-graphic-margin, 32px); + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-radio-list-item": HaRadioListItem; + } +} diff --git a/src/components/ha-related-items.ts b/src/components/ha-related-items.ts index 7cd3bfd2d0..6ca49a8065 100644 --- a/src/components/ha-related-items.ts +++ b/src/components/ha-related-items.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiAlertCircleOutline, mdiDevices, @@ -25,6 +24,7 @@ import "./ha-icon-next"; import "./ha-list-item"; import "./ha-state-icon"; import "./ha-switch"; +import "./ha-list"; @customElement("ha-related-items") export class HaRelatedItems extends LitElement { @@ -132,7 +132,7 @@ export class HaRelatedItems extends LitElement { } if (Object.keys(this._related).length === 0) { return html` - + - + `; } @@ -156,7 +156,7 @@ export class HaRelatedItems extends LitElement { ? html`

${this.hass.localize("ui.components.related-items.integration")}

- ${configEntries?.map((entry) => { if (!entry) { return nothing; @@ -209,14 +209,14 @@ export class HaRelatedItems extends LitElement { ` )} - ` + ` : nothing} ${this._related.area ? html`

${this.hass.localize("ui.components.related-items.area")}

- - ${this._related.area.map((relatedAreaId) => { + ${this._related.area.map((relatedAreaId) => { const area = this.hass.areas[relatedAreaId]; if (!area) { return nothing; @@ -250,13 +250,13 @@ export class HaRelatedItems extends LitElement { `; })} - ` + ` : nothing} ${this._related.device ? html`

${this.hass.localize("ui.components.related-items.device")}

- + ${this._related.device.map((relatedDeviceId) => { const device = this.hass.devices[relatedDeviceId]; if (!device) { @@ -275,12 +275,12 @@ export class HaRelatedItems extends LitElement { `; })} - ` + ` : nothing} ${this._related.entity ? html`

${this.hass.localize("ui.components.related-items.entity")}

- + ${this._relatedEntities(this._related.entity).map( (entity) => html` ` )} - + ` : nothing} ${this._related.group ? html`

${this.hass.localize("ui.components.related-items.group")}

- + ${this._relatedGroups(this._related.group).map( (group) => html` ` )} - + ` : nothing} ${this._related.scene ? html`

${this.hass.localize("ui.components.related-items.scene")}

- + ${this._relatedScenes(this._related.scene).map( (scene) => html` ` )} - + ` : nothing} ${this._related.automation_blueprint @@ -357,7 +357,7 @@ export class HaRelatedItems extends LitElement {

${this.hass.localize("ui.components.related-items.blueprint")}

- + ${this._related.automation_blueprint.map((path) => { const blueprintMeta = this._blueprints ? this._blueprints.automation[path] @@ -375,7 +375,7 @@ export class HaRelatedItems extends LitElement { `; })} - + ` : nothing} ${this._related.automation @@ -383,7 +383,7 @@ export class HaRelatedItems extends LitElement {

${this.hass.localize("ui.components.related-items.automation")}

- + ${this._relatedAutomations(this._related.automation).map( (automation) => html` ` )} - + ` : nothing} ${this._related.script_blueprint @@ -411,7 +411,7 @@ export class HaRelatedItems extends LitElement {

${this.hass.localize("ui.components.related-items.blueprint")}

- + ${this._related.script_blueprint.map((path) => { const blueprintMeta = this._blueprints ? this._blueprints.script[path] @@ -429,13 +429,13 @@ export class HaRelatedItems extends LitElement { `; })} - + ` : nothing} ${this._related.script ? html`

${this.hass.localize("ui.components.related-items.script")}

- + ${this._relatedScripts(this._related.script).map( (script) => html` ` )} - + ` : nothing} `; diff --git a/src/components/ha-ripple.ts b/src/components/ha-ripple.ts index 9df52b925b..3b57810145 100644 --- a/src/components/ha-ripple.ts +++ b/src/components/ha-ripple.ts @@ -1,10 +1,11 @@ import { AttachableController } from "@material/web/internal/controller/attachable-controller"; -import { MdRipple } from "@material/web/ripple/ripple"; +import { Ripple } from "@material/web/ripple/internal/ripple"; +import { styles } from "@material/web/ripple/internal/ripple-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; @customElement("ha-ripple") -export class HaRipple extends MdRipple { +export class HaRipple extends Ripple { private readonly attachableTouchController = new AttachableController( this, this._onTouchControlChange.bind(this) @@ -37,7 +38,7 @@ export class HaRipple extends MdRipple { } static override styles = [ - ...super.styles, + styles, css` :host { --md-ripple-hover-opacity: var(--ha-ripple-hover-opacity, 0.08); diff --git a/src/components/ha-select.ts b/src/components/ha-select.ts index 7f240ee525..b4617b69e7 100644 --- a/src/components/ha-select.ts +++ b/src/components/ha-select.ts @@ -3,9 +3,11 @@ import { styles } from "@material/mwc-select/mwc-select.css"; import { mdiClose } from "@mdi/js"; import { css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; import { debounce } from "../common/util/debounce"; import { nextRender } from "../common/util/render-status"; import "./ha-icon-button"; +import "./ha-menu"; @customElement("ha-select") export class HaSelect extends SelectBase { @@ -32,6 +34,27 @@ export class HaSelect extends SelectBase { `; } + protected override renderMenu() { + const classes = this.getMenuClasses(); + return html` + ${this.renderMenuContent()} + `; + } + protected override renderLeadingIcon() { if (!this.icon) { return nothing; diff --git a/src/components/ha-selector/ha-selector-button-toggle.ts b/src/components/ha-selector/ha-selector-button-toggle.ts index 727dfaef82..eaa1f32116 100644 --- a/src/components/ha-selector/ha-selector-button-toggle.ts +++ b/src/components/ha-selector/ha-selector-button-toggle.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts index 6e7d72ece2..c136290114 100644 --- a/src/components/ha-selector/ha-selector-select.ts +++ b/src/components/ha-selector/ha-selector-select.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import { mdiDrag } from "@mdi/js"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; @@ -16,10 +15,11 @@ import "../ha-combo-box"; import type { HaComboBox } from "../ha-combo-box"; import "../ha-formfield"; import "../ha-input-helper-text"; +import "../ha-list-item"; import "../ha-radio"; import "../ha-select"; -import "../ha-sortable"; import "../ha-select-box"; +import "../ha-sortable"; @customElement("ha-selector-select") export class HaSelectSelector extends LitElement { @@ -274,8 +274,8 @@ export class HaSelectSelector extends LitElement { > ${options.map( (item: SelectOption) => html` - ${item.label}${item.label} ` )} @@ -420,11 +420,10 @@ export class HaSelectSelector extends LitElement { position: relative; } ha-select, - mwc-formfield, ha-formfield { display: block; } - mwc-list-item[disabled] { + ha-list-item[disabled] { --mdc-theme-text-primary-on-background: var(--disabled-text-color); } ha-chip-set { diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts index df91f81970..4f2904bddc 100644 --- a/src/components/ha-slider.ts +++ b/src/components/ha-slider.ts @@ -1,17 +1,18 @@ -import { MdSlider } from "@material/web/slider/slider"; +import { Slider } from "@material/web/slider/internal/slider"; +import { styles } from "@material/web/slider/internal/slider-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; import { mainWindow } from "../common/dom/get_main_window"; @customElement("ha-slider") -export class HaSlider extends MdSlider { +export class HaSlider extends Slider { public connectedCallback() { super.connectedCallback(); this.dir = mainWindow.document.dir; } static override styles = [ - ...super.styles, + styles, css` :host { --md-sys-color-primary: var(--primary-color); diff --git a/src/components/ha-sub-menu.ts b/src/components/ha-sub-menu.ts index f6d89d90e8..e72483b121 100644 --- a/src/components/ha-sub-menu.ts +++ b/src/components/ha-sub-menu.ts @@ -1,16 +1,17 @@ -import { MdSubMenu } from "@material/web/menu/sub-menu"; +import { SubMenu } from "@material/web/menu/internal/submenu/sub-menu"; +import { styles } from "@material/web/menu/internal/submenu/sub-menu-styles"; import { css } from "lit"; import { customElement } from "lit/decorators"; @customElement("ha-sub-menu") -export class HaSubMenu extends MdSubMenu { +export class HaSubMenu extends SubMenu { async show() { super.show(); this.menu.hasOverflow = false; } static override styles = [ - ...super.styles, + styles, css` :host { --ha-icon-display: block; diff --git a/src/components/ha-theme-picker.ts b/src/components/ha-theme-picker.ts index fac1a3198a..c188e39309 100644 --- a/src/components/ha-theme-picker.ts +++ b/src/components/ha-theme-picker.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import type { TemplateResult } from "lit"; import { css, html, nothing, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; @@ -6,6 +5,7 @@ import { fireEvent } from "../common/dom/fire_event"; import { stopPropagation } from "../common/dom/stop_propagation"; import type { HomeAssistant } from "../types"; import "./ha-select"; +import "./ha-list-item"; const DEFAULT_THEME = "default"; @@ -39,23 +39,23 @@ export class HaThemePicker extends LitElement { > ${!this.required ? html` - + ${this.hass!.localize("ui.components.theme-picker.no_theme")} - + ` : nothing} ${this.includeDefault ? html` - + Home Assistant - + ` : nothing} ${Object.keys(this.hass!.themes.themes) .sort() .map( (theme) => - html`${theme}` + html`${theme}` )} `; diff --git a/src/components/media-player/dialog-media-manage.ts b/src/components/media-player/dialog-media-manage.ts index b214e36c99..6a38ec9847 100644 --- a/src/components/media-player/dialog-media-manage.ts +++ b/src/components/media-player/dialog-media-manage.ts @@ -1,36 +1,36 @@ import { animate } from "@lit-labs/motion"; -import "@material/mwc-list/mwc-list"; -import "@material/mwc-list/mwc-list-item"; + import { mdiClose, mdiDelete } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; +import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { fireEvent } from "../../common/dom/fire_event"; import { computeRTLDirection } from "../../common/util/compute_rtl"; +import { deleteImage, getIdFromUrl } from "../../data/image_upload"; import type { MediaPlayerItem } from "../../data/media-player"; import { MediaClassBrowserSettings } from "../../data/media-player"; import { browseLocalMediaPlayer, - removeLocalMedia, - isLocalMediaSourceContentId, isImageUploadMediaSourceContentId, + isLocalMediaSourceContentId, + removeLocalMedia, } from "../../data/media_source"; -import { deleteImage, getIdFromUrl } from "../../data/image_upload"; import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box"; import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import "../ha-button"; import "../ha-check-list-item"; -import "../ha-spinner"; import "../ha-dialog"; import "../ha-dialog-header"; +import "../ha-list"; +import "../ha-spinner"; import "../ha-svg-icon"; import "../ha-tip"; import "./ha-media-player-browse"; import "./ha-media-upload-button"; import type { MediaManageDialogParams } from "./show-media-manage-dialog"; -import { isComponentLoaded } from "../../common/config/is_component_loaded"; @customElement("dialog-media-manage") class DialogMediaManage extends LitElement { @@ -170,7 +170,7 @@ class DialogMediaManage extends LitElement { : ""} ` : html` - + ${repeat( children, (item) => item.media_content_id, @@ -201,7 +201,7 @@ class DialogMediaManage extends LitElement { `; } )} - + `} ${isComponentLoaded(this.hass, "hassio") ? html` diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index d198826279..7210065897 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -12,6 +12,7 @@ import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import type { HASSDomEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event"; +import { stopPropagation } from "../../common/dom/stop_propagation"; import type { MediaPickedEvent, MediaPlayerBrowseAction, @@ -22,6 +23,7 @@ import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import "../ha-dialog"; import "../ha-dialog-header"; +import "../ha-list-item"; import "./ha-media-manage-button"; import "./ha-media-player-browse"; import type { @@ -29,7 +31,6 @@ import type { MediaPlayerItemId, } from "./ha-media-player-browse"; import type { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog"; -import { stopPropagation } from "../../common/dom/stop_propagation"; @customElement("dialog-media-player-browse") class DialogMediaPlayerBrowse extends LitElement { @@ -118,7 +119,7 @@ class DialogMediaPlayerBrowse extends LitElement { .label=${this.hass.localize("ui.common.menu")} .path=${mdiDotsVertical} > - + ${this.hass.localize("ui.components.media-browser.auto")} - - + + ${this.hass.localize("ui.components.media-browser.grid")} - - + + ${this.hass.localize("ui.components.media-browser.list")} - + diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 42eaa9cbcc..d183d49b0d 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -1,8 +1,7 @@ import type { LitVirtualizer } from "@lit-labs/virtualizer"; import { grid } from "@lit-labs/virtualizer/layouts/grid"; 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 type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -50,6 +49,8 @@ import "../ha-fab"; import "../ha-icon-button"; import "../ha-svg-icon"; import "../ha-tooltip"; +import "../ha-list"; +import "../ha-list-item"; import "./ha-browse-media-tts"; import type { TtsMediaPickedEvent } from "./ha-browse-media-tts"; import { loadVirtualizer } from "../../resources/virtualizer"; @@ -516,7 +517,7 @@ export class HaMediaPlayerBrowse extends LitElement { : ""} ` : html` - + ${currentItem.not_shown ? html` - - + ` : ""} - + ` } @@ -623,7 +624,7 @@ export class HaMediaPlayerBrowse extends LitElement { : "none"; return html` - `} ${child.title} - + `; }; @@ -1001,22 +1002,22 @@ export class HaMediaPlayerBrowse extends LitElement { /* ============= CHILDREN ============= */ - mwc-list { + ha-list { --mdc-list-vertical-padding: 0; --mdc-list-item-graphic-margin: 0; --mdc-theme-text-icon-on-background: var(--secondary-text-color); margin-top: 10px; } - mwc-list li:last-child { + ha-list li:last-child { display: none; } - mwc-list li[divider] { + ha-list li[divider] { border-bottom-color: var(--divider-color); } - mwc-list-item { + ha-list-item { width: 100%; } @@ -1152,7 +1153,7 @@ export class HaMediaPlayerBrowse extends LitElement { padding-left: 16px; } - mwc-list-item .graphic { + ha-list-item .graphic { background-size: contain; background-repeat: no-repeat; background-position: center; @@ -1163,7 +1164,7 @@ export class HaMediaPlayerBrowse extends LitElement { line-height: initial; } - mwc-list-item .graphic .play { + ha-list-item .graphic .play { opacity: 0; transition: all 0.5s; background-color: rgba(var(--rgb-card-background-color), 0.5); @@ -1171,17 +1172,17 @@ export class HaMediaPlayerBrowse extends LitElement { --mdc-icon-button-size: 40px; } - mwc-list-item:hover .graphic .play { + ha-list-item:hover .graphic .play { opacity: 1; color: var(--primary-text-color); } - mwc-list-item .graphic .play.show { + ha-list-item .graphic .play.show { opacity: 1; background-color: transparent; } - mwc-list-item .title { + ha-list-item .title { margin-left: 16px; margin-inline-start: 16px; margin-inline-end: initial; diff --git a/src/components/trace/ha-trace-path-details.ts b/src/components/trace/ha-trace-path-details.ts index 19f38a333d..7a513d734a 100644 --- a/src/components/trace/ha-trace-path-details.ts +++ b/src/components/trace/ha-trace-path-details.ts @@ -1,5 +1,5 @@ import { dump } from "js-yaml"; -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/components/trace/hat-trace-timeline.ts b/src/components/trace/hat-trace-timeline.ts index 7c330ccde1..2ffbf04256 100644 --- a/src/components/trace/hat-trace-timeline.ts +++ b/src/components/trace/hat-trace-timeline.ts @@ -1,4 +1,4 @@ -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import { mdiAlertCircle, mdiCircle, diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts index 3536d8d542..d16e68cf1d 100644 --- a/src/components/user/ha-user-picker.ts +++ b/src/components/user/ha-user-picker.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { property } from "lit/decorators"; @@ -46,10 +45,10 @@ class HaUserPicker extends LitElement { @selected=${this._userChanged} > ${this.users?.length === 0 - ? html` + ? html` ${this.noUserLabel || this.hass?.localize("ui.components.user-picker.no_user")} - ` + ` : ""} ${this._sortedUsers(this.users).map( (user) => html` @@ -92,9 +91,6 @@ class HaUserPicker extends LitElement { :host { display: inline-block; } - mwc-list { - display: block; - } `; } diff --git a/src/data/context.ts b/src/data/context.ts index 94be214c5a..92223f8bfc 100644 --- a/src/data/context.ts +++ b/src/data/context.ts @@ -1,4 +1,4 @@ -import { createContext } from "@lit-labs/context"; +import { createContext } from "@lit/context"; import type { HassConfig } from "home-assistant-js-websocket"; import type { HomeAssistant } from "../types"; import type { EntityRegistryEntry } from "./entity_registry"; diff --git a/src/dialogs/config-flow/previews/entity-preview-row.ts b/src/dialogs/config-flow/previews/entity-preview-row.ts index 61eac841b1..14acb8f20a 100644 --- a/src/dialogs/config-flow/previews/entity-preview-row.ts +++ b/src/dialogs/config-flow/previews/entity-preview-row.ts @@ -1,20 +1,21 @@ +import { format } from "date-fns"; import type { HassEntity } from "home-assistant-js-websocket"; import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; -import { format } from "date-fns"; import { computeStateName } from "../../../common/entity/compute_state_name"; +import "../../../components/entity/ha-entity-toggle"; +import "../../../components/entity/state-badge"; import "../../../components/ha-climate-state"; import "../../../components/ha-cover-controls"; import "../../../components/ha-cover-tilt-controls"; import "../../../components/ha-date-input"; import "../../../components/ha-humidifier-state"; +import "../../../components/ha-list-item"; import "../../../components/ha-select"; import "../../../components/ha-slider"; import "../../../components/ha-time-input"; -import "../../../components/entity/ha-entity-toggle"; -import "../../../components/entity/state-badge"; import { isTiltOnly } from "../../../data/cover"; import { isUnavailableState } from "../../../data/entity"; import type { ImageEntity } from "../../../data/image"; @@ -293,9 +294,9 @@ class EntityPreviewRow extends LitElement { ${stateObj.attributes.options ? stateObj.attributes.options.map( (option) => html` - + ${this.hass!.formatEntityState(stateObj, option)} - + ` ) : ""} diff --git a/src/dialogs/config-flow/step-flow-menu.ts b/src/dialogs/config-flow/step-flow-menu.ts index 83ecd2d5d0..7c1f1e35f6 100644 --- a/src/dialogs/config-flow/step-flow-menu.ts +++ b/src/dialogs/config-flow/step-flow-menu.ts @@ -1,13 +1,13 @@ -import "@material/mwc-list/mwc-list-item"; import type { TemplateResult } from "lit"; 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 type { DataEntryFlowStepMenu } from "../../data/data_entry_flow"; import type { HomeAssistant } from "../../types"; import type { FlowConfig } from "./show-dialog-data-entry-flow"; -import "../../components/ha-icon-next"; import { configFlowContentStyles } from "./styles"; -import { fireEvent } from "../../common/dom/fire_event"; @customElement("step-flow-menu") class StepFlowMenu extends LitElement { @@ -47,10 +47,10 @@ class StepFlowMenu extends LitElement {
${options.map( (option) => html` - + ${translations[option]} - + ` )}
@@ -83,7 +83,7 @@ class StepFlowMenu extends LitElement { .content + .options { margin-top: 8px; } - mwc-list-item { + ha-list-item { --mdc-list-side-padding: 24px; } `, diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts index 28f1c24554..f265a1d916 100644 --- a/src/dialogs/more-info/controls/more-info-climate.ts +++ b/src/dialogs/more-info/controls/more-info-climate.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import { mdiArrowOscillating, mdiFan, diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts index 9d81cfdc01..6af1a2357d 100644 --- a/src/dialogs/more-info/controls/more-info-light.ts +++ b/src/dialogs/more-info/controls/more-info-light.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import { mdiBrightness6, mdiCreation, diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index eeaa19d25e..1de7b7c717 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list-item"; + import { mdiLoginVariant, mdiMusicNote, @@ -15,6 +15,7 @@ import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stateActive } from "../../../common/entity/state_active"; import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/ha-icon-button"; +import "../../../components/ha-list-item"; import "../../../components/ha-select"; import "../../../components/ha-slider"; import "../../../components/ha-svg-icon"; @@ -157,13 +158,13 @@ class MoreInfoMediaPlayer extends LitElement { > ${stateObj.attributes.source_list!.map( (source) => html` - + ${this.hass.formatEntityAttributeValue( stateObj, "source", source )} - + ` )} @@ -187,13 +188,13 @@ class MoreInfoMediaPlayer extends LitElement { > ${stateObj.attributes.sound_mode_list.map( (mode) => html` - + ${this.hass.formatEntityAttributeValue( stateObj, "sound_mode", mode )} - + ` )} diff --git a/src/dialogs/more-info/controls/more-info-remote.ts b/src/dialogs/more-info/controls/more-info-remote.ts index b3b5d9592a..0990ffd5c3 100644 --- a/src/dialogs/more-info/controls/more-info-remote.ts +++ b/src/dialogs/more-info/controls/more-info-remote.ts @@ -1,5 +1,3 @@ -import "@material/mwc-select/mwc-select"; -import "@material/mwc-list/mwc-list-item"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { stopPropagation } from "../../../common/dom/stop_propagation"; @@ -8,6 +6,8 @@ import "../../../components/ha-attributes"; import type { RemoteEntity } from "../../../data/remote"; import { REMOTE_SUPPORT_ACTIVITY } from "../../../data/remote"; import type { HomeAssistant } from "../../../types"; +import "../../../components/ha-select"; +import "../../../components/ha-list-item"; const filterExtraAttributes = "activity_list,current_activity"; @@ -27,7 +27,7 @@ class MoreInfoRemote extends LitElement { return html` ${supportsFeature(stateObj, REMOTE_SUPPORT_ACTIVITY) ? html` - ${stateObj.attributes.activity_list?.map( (activity) => html` - + ${this.hass.formatEntityAttributeValue( stateObj, "activity", activity )} - + ` )} - + ` : nothing} @@ -75,7 +75,7 @@ class MoreInfoRemote extends LitElement { } static styles = css` - mwc-select { + ha-select { width: 100%; } `; diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts index 82d224b0fa..f303233e47 100644 --- a/src/dialogs/more-info/controls/more-info-update.ts +++ b/src/dialogs/more-info/controls/more-info-update.ts @@ -9,7 +9,6 @@ import "../../../components/ha-alert"; import "../../../components/ha-button"; import "../../../components/ha-checkbox"; import "../../../components/ha-faded"; -import "../../../components/ha-formfield"; import "../../../components/ha-markdown"; import "../../../components/ha-md-list"; import "../../../components/ha-md-list-item"; diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts index 066e6145bc..9596678775 100644 --- a/src/dialogs/more-info/controls/more-info-vacuum.ts +++ b/src/dialogs/more-info/controls/more-info-vacuum.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import { mdiFan, mdiHomeImportOutline, @@ -19,6 +18,7 @@ import "../../../components/entity/ha-battery-icon"; import "../../../components/ha-attributes"; import "../../../components/ha-icon"; import "../../../components/ha-icon-button"; +import "../../../components/ha-list-item"; import "../../../components/ha-select"; import { UNAVAILABLE } from "../../../data/entity"; import type { EntityRegistryDisplayEntry } from "../../../data/entity_registry"; @@ -182,13 +182,13 @@ class MoreInfoVacuum extends LitElement { > ${stateObj.attributes.fan_speed_list!.map( (mode) => html` - + ${this.hass.formatEntityAttributeValue( stateObj, "fan_speed", mode )} - + ` )} diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index f0cf6182ba..828397f353 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import type { ListItem } from "@material/mwc-list/mwc-list-item"; import { mdiClose, @@ -29,6 +28,7 @@ import { fuzzyFilterSort } from "../../common/string/filter/sequence-matching"; import { debounce } from "../../common/util/debounce"; import "../../components/ha-icon-button"; import "../../components/ha-label"; +import "../../components/ha-list"; import "../../components/ha-list-item"; import "../../components/ha-spinner"; import "../../components/ha-textfield"; @@ -248,7 +248,7 @@ export class QuickBar extends LitElement { ` : html` - + ${this._opened ? html` ` : ""} - + `} ${this._hint ? html`${this._hint}` @@ -856,7 +856,7 @@ export class QuickBar extends LitElement { haStyleScrollbar, haStyleDialog, css` - mwc-list { + ha-list { position: relative; --mdc-list-vertical-padding: 0; } diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts index 9e8a40f8c5..2f02ef0544 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts @@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import { stopPropagation } from "../../common/dom/stop_propagation"; +import "../../components/ha-list-item"; import "../../components/ha-select"; import "../../components/ha-tts-voice-picker"; import type { AssistPipeline } from "../../data/assist_pipeline"; @@ -22,9 +23,9 @@ import { setSelectOption } from "../../data/select"; import { showVoiceAssistantPipelineDetailDialog } from "../../panels/config/voice-assistants/show-dialog-voice-assistant-pipeline-detail"; import "../../panels/lovelace/entity-rows/hui-select-entity-row"; import type { HomeAssistant } from "../../types"; +import { getTranslation } from "../../util/common-translation"; import { AssistantSetupStyles } from "./styles"; import { STEP } from "./voice-assistant-setup-dialog"; -import { getTranslation } from "../../util/common-translation"; @customElement("ha-voice-assistant-setup-step-success") export class HaVoiceAssistantSetupStepSuccess extends LitElement { diff --git a/src/onboarding/dialogs/community-dialog.ts b/src/onboarding/dialogs/community-dialog.ts index 629349676c..1d6c864c79 100644 --- a/src/onboarding/dialogs/community-dialog.ts +++ b/src/onboarding/dialogs/community-dialog.ts @@ -1,10 +1,10 @@ -import "@material/mwc-list/mwc-list"; import { mdiOpenInNew } from "@mdi/js"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import type { LocalizeFunc } from "../../common/translations/localize"; import { createCloseHeading } from "../../components/ha-dialog"; +import "../../components/ha-list"; import "../../components/ha-list-item"; @customElement("community-dialog") @@ -33,7 +33,7 @@ class DialogCommunity extends LitElement { this.localize("ui.panel.page-onboarding.welcome.community") )} > - + - + `; } diff --git a/src/onboarding/onboarding-location.ts b/src/onboarding/onboarding-location.ts index 44bf2fe0ff..58311b910e 100644 --- a/src/onboarding/onboarding-location.ts +++ b/src/onboarding/onboarding-location.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list"; + import { mdiCrosshairsGps, mdiMagnify, @@ -13,10 +13,10 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; import type { LocalizeFunc } from "../common/translations/localize"; import "../components/ha-alert"; -import "../components/ha-spinner"; -import "../components/ha-formfield"; +import "../components/ha-list"; import "../components/ha-list-item"; import "../components/ha-radio"; +import "../components/ha-spinner"; import "../components/ha-textfield"; import type { HaTextField } from "../components/ha-textfield"; import "../components/map/ha-locations-editor"; @@ -132,7 +132,7 @@ class OnboardingLocation extends LitElement { ${this._places !== undefined ? html` - + ${this._places?.length ? this._places.map((place) => { const primary = [ @@ -172,7 +172,7 @@ class OnboardingLocation extends LitElement { ? "" : "No results"}`} - + ` : nothing} @@ -507,7 +507,7 @@ class OnboardingLocation extends LitElement { border-radius: var(--mdc-shape-large, 16px); overflow: hidden; } - mwc-list { + ha-list { width: 100%; border: 1px solid var(--divider-color); box-sizing: border-box; diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts index 21583deb77..b27b52874a 100644 --- a/src/panels/calendar/ha-panel-calendar.ts +++ b/src/panels/calendar/ha-panel-calendar.ts @@ -1,5 +1,4 @@ import { ResizeController } from "@lit-labs/observers/resize-controller"; -import "@material/mwc-list"; import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import { mdiChevronDown, mdiPlus, mdiRefresh } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; @@ -14,6 +13,8 @@ import "../../components/ha-button-menu"; import "../../components/ha-card"; import "../../components/ha-check-list-item"; import "../../components/ha-icon-button"; +import "../../components/ha-list"; +import "../../components/ha-list-item"; import type { HaListItem } from "../../components/ha-list-item"; import "../../components/ha-menu-button"; import "../../components/ha-state-icon"; @@ -162,7 +163,7 @@ class PanelCalendar extends LitElement { @click=${this._handleRefresh} > ${showPane && this.hass.user?.is_admin - ? html`${calendarItems} + ? html`${calendarItems} - ${this.hass.localize("ui.panel.config.areas.edit_settings")} - + - - +
@@ -280,7 +279,7 @@ class HaConfigAreaPage extends LitElement { outlined .header=${this.hass.localize("ui.panel.config.devices.caption")} >${devices.length - ? html` + ? html` ${devices.map( (device) => html` @@ -291,7 +290,7 @@ class HaConfigAreaPage extends LitElement { ` )} - ` + ` : html`
${this.hass.localize( @@ -307,7 +306,7 @@ class HaConfigAreaPage extends LitElement { )} > ${entities.length - ? html` + ? html` ${entities.map((entity) => ["scene", "script", "automation"].includes( computeDomain(entity.entity_id) @@ -323,7 +322,7 @@ class HaConfigAreaPage extends LitElement { ` - )}` : html`
@@ -349,13 +348,13 @@ class HaConfigAreaPage extends LitElement { "ui.panel.config.areas.assigned_to_area" )}: - + ${groupedAutomations.map((automation) => this._renderAutomation( automation.name, automation.entity ) - )}` : ""} ${relatedAutomations?.length @@ -364,13 +363,13 @@ class HaConfigAreaPage extends LitElement { "ui.panel.config.areas.targeting_area" )}: - + ${relatedAutomations.map((automation) => this._renderAutomation( automation.name, automation.entity ) - )}` : ""} ${!groupedAutomations?.length && !relatedAutomations?.length @@ -399,10 +398,10 @@ class HaConfigAreaPage extends LitElement { "ui.panel.config.areas.assigned_to_area" )}: - + ${groupedScenes.map((scene) => this._renderScene(scene.name, scene.entity) - )}` : ""} ${relatedScenes?.length @@ -411,10 +410,10 @@ class HaConfigAreaPage extends LitElement { "ui.panel.config.areas.targeting_area" )}: - + ${relatedScenes.map((scene) => this._renderScene(scene.name, scene.entity) - )}` : ""} ${!groupedScenes?.length && !relatedScenes?.length diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index ede068b9ff..283f0972ab 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -21,6 +21,7 @@ import { formatListWithAnds } from "../../../common/string/format-list"; import "../../../components/ha-fab"; import "../../../components/ha-floor-icon"; import "../../../components/ha-icon-button"; +import "../../../components/ha-list-item"; import "../../../components/ha-sortable"; import "../../../components/ha-svg-icon"; import type { AreaRegistryEntry } from "../../../data/area_registry"; diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 79ae3bf4e2..f079ef0762 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -1,4 +1,4 @@ -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import { mdiAlertCircleCheck, mdiArrowDown, diff --git a/src/panels/config/automation/action/types/ha-automation-action-condition.ts b/src/panels/config/automation/action/types/ha-automation-action-condition.ts index 5e77983bc7..c701185c4c 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-condition.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-condition.ts @@ -4,6 +4,7 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { stringCompare } from "../../../../../common/string/compare"; import type { LocalizeFunc } from "../../../../../common/translations/localize"; +import "../../../../../components/ha-list-item"; import "../../../../../components/ha-select"; import type { HaSelect } from "../../../../../components/ha-select"; import type { Condition } from "../../../../../data/automation"; @@ -38,9 +39,9 @@ export class HaConditionAction extends LitElement implements ActionElement { > ${this._processedTypes(this.hass.localize).map( ([opt, label, icon]) => html` - + ${label} + > ` )} diff --git a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts index e5f4f3d9d4..0cc01e80c6 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts @@ -1,4 +1,4 @@ -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts b/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts index 82b0aab8de..8fcb7a5e75 100644 --- a/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts +++ b/src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@material/mwc-list/mwc-list-item"; + import { mdiClose, mdiHelpCircle } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index a905b88233..d1484d7499 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -1,4 +1,4 @@ -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import { mdiArrowDown, mdiArrowUp, diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-device.ts b/src/panels/config/automation/condition/types/ha-automation-condition-device.ts index 70ae2128e1..7b03f5164d 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-device.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-device.ts @@ -1,4 +1,4 @@ -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts b/src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts index 577d13d070..4e6d545d71 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/automation/dialog-new-automation.ts b/src/panels/config/automation/dialog-new-automation.ts index 8429515308..a028d98224 100644 --- a/src/panels/config/automation/dialog-new-automation.ts +++ b/src/panels/config/automation/dialog-new-automation.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiAccount, mdiFile, @@ -15,6 +14,7 @@ import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-req import { stringCompare } from "../../../common/string/compare"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-icon-next"; +import "../../../components/ha-list"; import "../../../components/ha-list-item"; import "../../../components/ha-tip"; import { showAutomationEditor } from "../../../data/automation"; @@ -106,7 +106,7 @@ class DialogNewAutomation extends LitElement implements HassDialog { this.hass.localize(`ui.panel.config.${this._mode}.dialog_new.header`) )} > - `} - + `; } diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index dc80efaec5..dcd4202e04 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -1,4 +1,4 @@ -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import "@material/mwc-button"; import { mdiCog, @@ -135,7 +135,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin( @state() private _blueprintConfig?: BlueprintAutomationConfig; @consume({ context: fullEntitiesContext, subscribe: true }) - @transform({ + @transform({ transformer: function (this: HaAutomationEditor, value) { return value.find(({ entity_id }) => entity_id === this._entityId); }, diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 6138f519ec..23a9a4612c 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -1,5 +1,5 @@ -import { consume } from "@lit-labs/context"; import { ResizeController } from "@lit-labs/observers/resize-controller"; +import { consume } from "@lit/context"; import { mdiChevronRight, mdiCog, @@ -48,7 +48,6 @@ import type { } from "../../../components/data-table/ha-data-table"; import "../../../components/data-table/ha-data-table-labels"; import "../../../components/entity/ha-entity-toggle"; -import "../../../components/ha-md-divider"; import "../../../components/ha-fab"; import "../../../components/ha-filter-blueprints"; import "../../../components/ha-filter-categories"; @@ -57,10 +56,11 @@ import "../../../components/ha-filter-entities"; import "../../../components/ha-filter-floor-areas"; import "../../../components/ha-filter-labels"; import "../../../components/ha-icon-button"; +import "../../../components/ha-md-divider"; +import "../../../components/ha-md-menu"; +import type { HaMdMenu } from "../../../components/ha-md-menu"; import "../../../components/ha-md-menu-item"; import type { HaMdMenuItem } from "../../../components/ha-md-menu-item"; -import "../../../components/ha-menu"; -import type { HaMenu } from "../../../components/ha-menu"; import "../../../components/ha-sub-menu"; import "../../../components/ha-svg-icon"; import { createAreaRegistryEntry } from "../../../data/area_registry"; @@ -199,7 +199,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { }) private _activeHiddenColumns?: string[]; - @query("#overflow-menu") private _overflowMenu!: HaMenu; + @query("#overflow-menu") private _overflowMenu!: HaMdMenu; private _sizeController = new ResizeController(this, { callback: (entries) => entries[0]?.contentRect.width, @@ -722,7 +722,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { .path=${mdiChevronRight} > - ${categoryItems} + ${categoryItems} ` : nothing } @@ -740,7 +740,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { .path=${mdiChevronRight} > - ${labelItems} + ${labelItems} ` : nothing } @@ -758,7 +758,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { .path=${mdiChevronRight} > - ${areaItems} + ${areaItems} ` : nothing } @@ -828,7 +828,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { - + - + `; } @@ -1059,13 +1059,13 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { } private _showInfo = (item: HaMdMenuItem) => { - const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)! .automation; fireEvent(this, "hass-more-info", { entityId: automation.entity_id }); }; private _showSettings = (item: HaMdMenuItem) => { - const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)! .automation; fireEvent(this, "hass-more-info", { @@ -1075,14 +1075,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { }; private _runActions = (item: HaMdMenuItem) => { - const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)! .automation; triggerAutomationActions(this.hass, automation.entity_id); }; private _editCategory = (item: HaMdMenuItem) => { - const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)! .automation; const entityReg = this._entityReg.find( @@ -1106,7 +1106,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { }; private _showTrace = (item: HaMdMenuItem) => { - const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)! .automation; if (!automation.attributes.id) { @@ -1123,7 +1123,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { }; private _toggle = async (item: HaMdMenuItem): Promise => { - const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)! .automation; const service = automation.state === "off" ? "turn_on" : "turn_off"; @@ -1133,7 +1133,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { }; private _deleteConfirm = async (item: HaMdMenuItem) => { - const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)! .automation; showConfirmationDialog(this, { @@ -1170,7 +1170,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { } private _duplicate = async (item: HaMdMenuItem) => { - const automation = ((item.parentElement as HaMenu)!.anchorElement as any)! + const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)! .automation; try { diff --git a/src/panels/config/automation/ha-automation-trace.ts b/src/panels/config/automation/ha-automation-trace.ts index 562176d46e..1ced1f10df 100644 --- a/src/panels/config/automation/ha-automation-trace.ts +++ b/src/panels/config/automation/ha-automation-trace.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical, mdiDownload, @@ -16,8 +15,10 @@ import { repeat } from "lit/directives/repeat"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time"; import { fireEvent } from "../../../common/dom/fire_event"; +import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../components/ha-button-menu"; import "../../../components/ha-icon-button"; +import "../../../components/ha-list-item"; import "../../../components/trace/ha-trace-blueprint-config"; import "../../../components/trace/ha-trace-config"; import "../../../components/trace/ha-trace-logbook"; @@ -41,7 +42,6 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import "../../../layouts/hass-subpage"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant, Route } from "../../../types"; -import { computeRTL } from "../../../common/util/compute_rtl"; const TABS = ["details", "timeline", "logbook", "automation_config"] as const; @@ -121,7 +121,7 @@ export class HaAutomationTrace extends LitElement { .path=${mdiDotsVertical} > - - + ${stateObj?.attributes.id && this.narrow ? html` @@ -141,7 +141,7 @@ export class HaAutomationTrace extends LitElement { stateObj.attributes.id )}" > - + ${this.hass.localize( "ui.panel.config.automation.trace.edit_automation" )} @@ -149,19 +149,19 @@ export class HaAutomationTrace extends LitElement { slot="graphic" .path=${mdiPencil} > - + ` : ""}
  • - + ${this.hass.localize("ui.panel.config.automation.trace.refresh")} - + - - +
    @@ -245,7 +245,9 @@ export class HaAutomationTrace extends LitElement {
    diff --git a/src/panels/config/core/ha-config-section-general.ts b/src/panels/config/core/ha-config-section-general.ts index 693937b1d0..a3647c8ec1 100644 --- a/src/panels/config/core/ha-config-section-general.ts +++ b/src/panels/config/core/ha-config-section-general.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/core/ha-config-section-updates.ts b/src/panels/config/core/ha-config-section-updates.ts index a556798803..7e3813d9c3 100644 --- a/src/panels/config/core/ha-config-section-updates.ts +++ b/src/panels/config/core/ha-config-section-updates.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical, mdiRefresh } from "@mdi/js"; import type { HassEntities } from "home-assistant-js-websocket"; @@ -13,6 +12,7 @@ import "../../../components/ha-bar"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; import "../../../components/ha-check-list-item"; +import "../../../components/ha-list-item"; import "../../../components/ha-metric"; import { extractApiErrorMessage } from "../../../data/hassio/common"; import type { @@ -89,7 +89,7 @@ class HaConfigSectionUpdates extends LitElement { ${this._supervisorInfo ? html`
  • - @@ -98,7 +98,7 @@ class HaConfigSectionUpdates extends LitElement { : this.hass.localize( "ui.panel.config.updates.leave_beta" )} - + ` : ""} diff --git a/src/panels/config/dashboard/dialog-new-dashboard.ts b/src/panels/config/dashboard/dialog-new-dashboard.ts index 33040d8f2c..5c30a2ccbd 100644 --- a/src/panels/config/dashboard/dialog-new-dashboard.ts +++ b/src/panels/config/dashboard/dialog-new-dashboard.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiHome, mdiMap, mdiPencilOutline, mdiShape, mdiWeb } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -8,6 +7,7 @@ import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-req import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-icon-next"; import "../../../components/ha-list-item"; +import "../../../components/ha-list"; import type { LovelaceRawConfig } from "../../../data/lovelace/config/types"; import type { HassDialog } from "../../../dialogs/make-dialog-manager"; import { haStyle, haStyleDialog } from "../../../resources/styles"; @@ -75,7 +75,7 @@ class DialogNewDashboard extends LitElement implements HassDialog { ) )} > - ` )} - + `; } diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts index 0b0f926dad..d34d266364 100644 --- a/src/panels/config/dashboard/ha-config-navigation.ts +++ b/src/panels/config/dashboard/ha-config-navigation.ts @@ -1,5 +1,3 @@ -import "@material/mwc-list/mwc-list"; -import "@material/mwc-list/mwc-list-item"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; diff --git a/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts b/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts index a3009bfe0a..e31f9fdbf2 100644 --- a/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts +++ b/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiAbTesting, mdiGestureTap, @@ -13,6 +12,7 @@ import { shouldHandleRequestSelectedEvent } from "../../../../common/mwc/handle- import { createCloseHeading } from "../../../../components/ha-dialog"; import "../../../../components/ha-icon-next"; import "../../../../components/ha-list-item"; +import "../../../../components/ha-list"; import type { AutomationConfig } from "../../../../data/automation"; import { showAutomationEditor } from "../../../../data/automation"; import type { @@ -142,7 +142,7 @@ export class DialogDeviceAutomation extends LitElement { @closed=${this.closeDialog} .heading=${createCloseHeading(this.hass, title)} > - - + `; } diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts index 5415f29028..46f08c8fd7 100644 --- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -9,6 +8,7 @@ import { stripPrefixFromEntityName } from "../../../../common/entity/strip_prefi import "../../../../components/ha-card"; import "../../../../components/ha-icon"; import "../../../../components/ha-list-item"; +import "../../../../components/ha-list"; import type { ExtEntityRegistryEntry } from "../../../../data/entity_registry"; import { getExtendedEntityRegistryEntry } from "../../../../data/entity_registry"; import { entryIcon } from "../../../../data/icons"; @@ -91,13 +91,13 @@ export class HaDeviceEntitiesCard extends LitElement { ${shownEntities.length ? html`
    - + ${shownEntities.map((entry) => this.hass.states[entry.entity_id] ? this._renderEntity(entry) : this._renderEntry(entry) )} - +
    ` : nothing} @@ -113,9 +113,9 @@ export class HaDeviceEntitiesCard extends LitElement { ` : html` - + ${hiddenEntities.map((entry) => this._renderEntry(entry))} - +
    - ${labelItems} + ${labelItems} ` : nothing diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index 586755bdac..8afee3fb70 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -1,4 +1,4 @@ -import { ContextProvider } from "@lit-labs/context"; +import { ContextProvider } from "@lit/context"; import { mdiAccount, mdiBackupRestore, diff --git a/src/panels/config/hardware/ha-config-hardware.ts b/src/panels/config/hardware/ha-config-hardware.ts index 12c14def9a..ba0413dcfd 100644 --- a/src/panels/config/hardware/ha-config-hardware.ts +++ b/src/panels/config/hardware/ha-config-hardware.ts @@ -1,5 +1,3 @@ -import "@material/mwc-list/mwc-list"; -import "@material/mwc-list/mwc-list-item"; import { mdiPower } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; @@ -14,6 +12,7 @@ import "../../../components/buttons/ha-progress-button"; import "../../../components/chart/ha-chart-base"; import "../../../components/ha-alert"; import "../../../components/ha-card"; +import "../../../components/ha-list"; import "../../../components/ha-clickable-list-item"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; @@ -288,7 +287,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) {
    ${documentationURL ? html` - + - + ` : ""} ${boardConfigEntries.length || diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index 68a8aa0fa3..f60ca0b624 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/src/panels/config/helpers/dialog-helper-detail.ts @@ -1,5 +1,5 @@ -import { mdiAlertOutline } from "@mdi/js"; import "@material/mwc-button/mwc-button"; +import { mdiAlertOutline } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; @@ -7,11 +7,15 @@ import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { dynamicElement } from "../../../common/dom/dynamic-element-directive"; -import "../../../components/ha-spinner"; +import { fireEvent } from "../../../common/dom/fire_event"; +import { stopPropagation } from "../../../common/dom/stop_propagation"; +import { stringCompare } from "../../../common/string/compare"; import { createCloseHeading } from "../../../components/ha-dialog"; +import "../../../components/ha-list"; import "../../../components/ha-list-item"; -import "../../../components/ha-tooltip"; +import "../../../components/ha-spinner"; import "../../../components/ha-svg-icon"; +import "../../../components/ha-tooltip"; import { getConfigFlowHandlers } from "../../../data/config_flow"; import { createCounter } from "../../../data/counter"; import { createInputBoolean } from "../../../data/input_boolean"; @@ -33,9 +37,6 @@ import { brandsUrl } from "../../../util/brands-url"; import type { Helper, HelperDomain } from "./const"; import { isHelperDomain } from "./const"; import type { ShowDialogHelperDetailParams } from "./show-dialog-helper-detail"; -import { fireEvent } from "../../../common/dom/fire_event"; -import { stringCompare } from "../../../common/string/compare"; -import { stopPropagation } from "../../../common/dom/stop_propagation"; type HelperCreators = Record< HelperDomain, @@ -196,7 +197,7 @@ export class DialogHelperDetail extends LitElement { "ui.panel.config.integrations.search_helper" )} > - `; })} - + `; } @@ -423,11 +424,11 @@ export class DialogHelperDetail extends LitElement { display: block; margin: 16px 16px 0; } - mwc-list { + ha-list { height: calc(60vh - 184px); } @media all and (max-width: 450px), all and (max-height: 500px) { - mwc-list { + ha-list { height: calc(100vh - 184px); } } diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts index 213e80a18b..554ff7d6df 100644 --- a/src/panels/config/helpers/forms/ha-input_select-form.ts +++ b/src/panels/config/helpers/forms/ha-input_select-form.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiDelete, mdiDrag } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -8,6 +7,7 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-button"; import "../../../../components/ha-icon-button"; import "../../../../components/ha-icon-picker"; +import "../../../../components/ha-list"; import "../../../../components/ha-list-item"; import "../../../../components/ha-sortable"; import "../../../../components/ha-textfield"; @@ -102,7 +102,7 @@ class HaInputSelectForm extends LitElement { )}:
    - + ${this._options.length ? repeat( this._options, @@ -134,7 +134,7 @@ class HaInputSelectForm extends LitElement { )} `} - +
    - ${categoryItems} + ${categoryItems} ` : nothing } @@ -814,7 +814,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) { .path=${mdiChevronRight} > - ${labelItems} + ${labelItems} ` : nothing } diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts index cebbacb4ff..b711a1f6f6 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiBug, mdiFileDocument, @@ -15,18 +14,20 @@ import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import "../../../components/ha-card"; import "../../../components/ha-clickable-list-item"; +import "../../../components/ha-icon-next"; +import "../../../components/ha-list"; +import "../../../components/ha-list-item"; import "../../../components/ha-logo-svg"; import type { HassioHassOSInfo } from "../../../data/hassio/host"; import { fetchHassioHassOsInfo } from "../../../data/hassio/host"; import type { HassioInfo } from "../../../data/hassio/supervisor"; import { fetchHassioInfo } from "../../../data/hassio/supervisor"; +import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog"; import "../../../layouts/hass-subpage"; import { mdiHomeAssistant } from "../../../resources/home-assistant-logo-svg"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant, Route } from "../../../types"; import { documentationUrl } from "../../../util/documentation-url"; -import "../../../components/ha-icon-next"; -import { showShortcutsDialog } from "../../../dialogs/shortcuts/show-shortcuts-dialog"; const JS_TYPE = __BUILD__; const JS_VERSION = __VERSION__; @@ -173,7 +174,7 @@ class HaConfigInfo extends LitElement { - +
    ` )} - + ${customUiList.length ? html`
    @@ -353,7 +354,7 @@ class HaConfigInfo extends LitElement { padding: 4px 0; } - mwc-list { + ha-list { --mdc-list-side-padding: 16px; --mdc-list-vertical-padding: 0; } diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts index 66de3b5308..0c0793b1c1 100644 --- a/src/panels/config/integrations/dialog-add-integration.ts +++ b/src/panels/config/integrations/dialog-add-integration.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@material/mwc-list/mwc-list"; + import type { IFuseOptions } from "fuse.js"; import Fuse from "fuse.js"; import type { HassConfig } from "home-assistant-js-websocket"; @@ -20,6 +20,8 @@ import { caseInsensitiveStringCompare } from "../../../common/string/compare"; import type { LocalizeFunc } from "../../../common/translations/localize"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-icon-button-prev"; +import "../../../components/ha-list"; +import "../../../components/ha-spinner"; import "../../../components/search-input"; import { getConfigEntries } from "../../../data/config_entries"; import { fetchConfigFlowInProgress } from "../../../data/config_flow"; @@ -48,7 +50,6 @@ import { loadVirtualizer } from "../../../resources/virtualizer"; import type { HomeAssistant } from "../../../types"; import "./ha-domain-integrations"; import "./ha-integration-list-item"; -import "../../../components/ha-spinner"; import type { AddIntegrationDialogParams } from "./show-add-integration-dialog"; import { showYamlIntegrationDialog } from "./show-add-integration-dialog"; @@ -150,7 +151,7 @@ class AddIntegrationDialog extends LitElement { ) { // Store the width and height so that when we search, box doesn't jump const boundingRect = - this.shadowRoot!.querySelector("mwc-list")?.getBoundingClientRect(); + this.shadowRoot!.querySelector("ha-list")?.getBoundingClientRect(); this._width = boundingRect?.width; this._height = boundingRect?.height; } @@ -449,7 +450,7 @@ class AddIntegrationDialog extends LitElement { @keypress=${this._maybeSubmit} > ${integrations - ? html` - ` + ` : html`
    `} `; @@ -744,7 +745,7 @@ class AddIntegrationDialog extends LitElement { ha-spinner { margin: 24px 0; } - mwc-list { + ha-list { position: relative; } lit-virtualizer { diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts index 0062a9ccac..5397d2ff9b 100644 --- a/src/panels/config/integrations/ha-config-integration-page.ts +++ b/src/panels/config/integrations/ha-config-integration-page.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiAlertCircle, mdiBookshelf, diff --git a/src/panels/config/integrations/ha-domain-integrations.ts b/src/panels/config/integrations/ha-domain-integrations.ts index b9fc656e04..8a7d8cc16f 100644 --- a/src/panels/config/integrations/ha-domain-integrations.ts +++ b/src/panels/config/integrations/ha-domain-integrations.ts @@ -4,12 +4,14 @@ import { customElement, property } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { fireEvent } from "../../../common/dom/fire_event"; import { - protocolIntegrationPicked, PROTOCOL_INTEGRATIONS, + protocolIntegrationPicked, } from "../../../common/integrations/protocolIntegrationPicked"; import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event"; import { navigate } from "../../../common/navigate"; import { caseInsensitiveStringCompare } from "../../../common/string/compare"; +import "../../../components/ha-list"; +import "../../../components/ha-list-item"; import { localizeConfigFlowTitle } from "../../../data/config_flow"; import type { DataEntryFlowProgress } from "../../../data/data_entry_flow"; import { @@ -38,14 +40,14 @@ class HaDomainIntegrations extends LitElement { public flowsInProgress?: DataEntryFlowProgress[]; protected render() { - return html` + return html` ${this.flowsInProgress?.length ? html`

    ${this.hass.localize("ui.panel.config.integrations.discovered")}

    ${this.flowsInProgress.map( (flow) => - html`${localizeConfigFlowTitle(this.hass.localize, flow)} - ` + ` )}
  • ${this.integration && @@ -91,7 +93,7 @@ class HaDomainIntegrations extends LitElement { .map((standard) => { const domain: (typeof PROTOCOL_INTEGRATIONS)[number] = standardToDomain[standard] || standard; - return html` - `; + `; }) : ""} ${this.integration && @@ -154,7 +156,7 @@ class HaDomainIntegrations extends LitElement { ) : ""} ${(PROTOCOL_INTEGRATIONS as readonly string[]).includes(this.domain) - ? html` - ` + ` : ""} ${this.integration && "config_flow" in this.integration && this.integration.config_flow ? html`${this.flowsInProgress?.length - ? html` - ` + ` : html` `}` : ""} -     `; + `; } private async _integrationPicked(ev: CustomEvent) { diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts index 24b70e0f20..0389daf7ca 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-manage-fabrics.ts @@ -1,14 +1,14 @@ -import "@material/mwc-list/mwc-list"; import "@material/mwc-button/mwc-button"; import { mdiDelete } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import "../../../../../components/ha-spinner"; -import "../../../../../components/ha-list-item"; import { createCloseHeading } from "../../../../../components/ha-dialog"; +import "../../../../../components/ha-list"; +import "../../../../../components/ha-list-item"; import "../../../../../components/ha-qr-code"; +import "../../../../../components/ha-spinner"; import type { MatterFabricData, MatterNodeDiagnostics, @@ -59,7 +59,7 @@ class DialogMatterManageFabrics extends LitElement { ${this.hass.localize("ui.panel.config.matter.manage_fabrics.fabrics")}

    ${this._nodeDiagnostics - ? html` + ? html` ${this._nodeDiagnostics.active_fabrics.map( (fabric) => html` ` )} - ` + ` : html`
    `} diff --git a/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts b/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts index 6d7f1f986e..830a9a2855 100644 --- a/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts +++ b/src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import "@material/mwc-button/mwc-button"; import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from "@mdi/js"; import type { CSSResultGroup } from "lit"; @@ -6,14 +5,15 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { copyToClipboard } from "../../../../../common/util/copy-clipboard"; -import "../../../../../components/ha-spinner"; -import "../../../../../components/ha-list-item"; import { createCloseHeading } from "../../../../../components/ha-dialog"; +import "../../../../../components/ha-list"; +import "../../../../../components/ha-list-item"; +import "../../../../../components/ha-spinner"; import { pingMatterNode } from "../../../../../data/matter"; import { haStyle, haStyleDialog } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; -import type { MatterPingNodeDialogParams } from "./show-dialog-matter-ping-node"; import { showToast } from "../../../../../util/toast"; +import type { MatterPingNodeDialogParams } from "./show-dialog-matter-ping-node"; @customElement("dialog-matter-ping-node") class DialogMatterPingNode extends LitElement { @@ -82,7 +82,7 @@ class DialogMatterPingNode extends LitElement { "ui.panel.config.matter.ping_node.ping_complete" )} - + ${this._pingResultEntries.map( ([ip, success]) => html` ` )} - + ${this.hass.localize("ui.common.close")} @@ -194,7 +194,7 @@ class DialogMatterPingNode extends LitElement { padding: 8px; } - mwc-list { + ha-list { --mdc-list-side-padding: 0; } diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts index 5b6cbfb159..c87fd42e0d 100644 --- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts +++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts @@ -6,6 +6,7 @@ import { storage } from "../../../../../common/decorators/storage"; import "../../../../../components/ha-card"; import "../../../../../components/ha-code-editor"; import "../../../../../components/ha-formfield"; +import "../../../../../components/ha-list-item"; import "../../../../../components/ha-switch"; import { getConfigEntries } from "../../../../../data/config_entries"; import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow"; @@ -90,7 +91,7 @@ export class MQTTConfigPanel extends LitElement { @selected=${this._handleQos} >${qosLevel.map( (qos) => - html`${qos}` + html`${qos}` )} ${qosLevel.map( - (qos) => - html`${qos}` + (qos) => html`${qos}` )} - + ${this.hass.localize( "ui.panel.config.integrations.config_entry.download_diagnostics" )} - +     - ${this.hass.localize( "ui.panel.config.thread.add_dataset_from_tlv" - )} - ${this.hass.localize( "ui.panel.config.thread.add_open_thread_border_router" - )}
    diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts index 709d1e0db6..f363012b1d 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -6,6 +5,7 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/buttons/ha-progress-button"; import "../../../../../components/ha-card"; +import "../../../../../components/ha-list-item"; import "../../../../../components/ha-select"; import "../../../../../components/ha-textfield"; import { forwardHaptic } from "../../../../../data/haptics"; @@ -76,9 +76,9 @@ export class ZHAClusterAttributes extends LitElement { > ${this._attributes.map( (entry) => html` - + ${`${entry.name} (id: ${formatAsPaddedHex(entry.id)})`} - + ` )} diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts index 832f28a10c..c912e83663 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import type { CSSResultGroup, PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { property, state } from "lit/decorators"; @@ -6,6 +5,7 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/ha-card"; import "../../../../../components/ha-form/ha-form"; +import "../../../../../components/ha-list-item"; import "../../../../../components/ha-select"; import "../../../../../components/ha-textfield"; import type { Cluster, Command, ZHADevice } from "../../../../../data/zha"; @@ -69,9 +69,9 @@ export class ZHAClusterCommands extends LitElement { > ${this._commands.map( (entry) => html` - + ${entry.name + " (id: " + formatAsPaddedHex(entry.id) + ")"} - + ` )} diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts index 9f532f868d..b8bbb20a9f 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -6,6 +5,7 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import "../../../../../components/buttons/ha-progress-button"; import "../../../../../components/ha-card"; import "../../../../../components/ha-select"; +import "../../../../../components/ha-list-item"; import type { ZHADevice } from "../../../../../data/zha"; import { bindDevices, unbindDevices } from "../../../../../data/zha"; import { haStyle } from "../../../../../resources/styles"; @@ -50,11 +50,11 @@ export class ZHADeviceBindingControl extends LitElement { > ${this.bindableDevices.map( (device, idx) => html` - + ${device.user_given_name ? device.user_given_name : device.name} - + ` )} diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts index 38465b27b3..bedccc1b0a 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts @@ -7,6 +7,7 @@ import "../../../../../components/buttons/ha-progress-button"; import type { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table"; import "../../../../../components/ha-card"; import "../../../../../components/ha-select"; +import "../../../../../components/ha-list-item"; import type { Cluster, ZHADevice, ZHAGroup } from "../../../../../data/zha"; import { bindDeviceToGroup, @@ -18,7 +19,6 @@ import type { HomeAssistant } from "../../../../../types"; import type { ItemSelectedEvent } from "./types"; import "./zha-clusters-data-table"; import type { ZHAClustersDataTable } from "./zha-clusters-data-table"; -import "@material/mwc-list/mwc-list-item"; @customElement("zha-group-binding-control") export class ZHAGroupBindingControl extends LitElement { @@ -70,8 +70,8 @@ export class ZHAGroupBindingControl extends LitElement { > ${this.groups.map( (group, idx) => - html`${group.name}${group.name} ` )} diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts index 2510ff7c8b..3c6feff3bc 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts @@ -7,8 +7,10 @@ import type { HASSDomEvent } from "../../../../../common/dom/fire_event"; import { navigate } from "../../../../../common/navigate"; import type { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table"; import "../../../../../components/ha-card"; -import "../../../../../components/ha-spinner"; import "../../../../../components/ha-icon-button"; +import "../../../../../components/ha-list"; +import "../../../../../components/ha-list-item"; +import "../../../../../components/ha-spinner"; import type { ZHADeviceEndpoint, ZHAGroup } from "../../../../../data/zha"; import { addMembersToGroup, @@ -24,8 +26,6 @@ import "../../../ha-config-section"; import { formatAsPaddedHex } from "./functions"; import "./zha-device-endpoint-data-table"; import type { ZHADeviceEndpointDataTable } from "./zha-device-endpoint-data-table"; -import "@material/mwc-list/mwc-list"; -import "../../../../../components/ha-list-item"; @customElement("zha-group-page") export class ZHAGroupPage extends LitElement { @@ -126,7 +126,7 @@ export class ZHAGroupPage extends LitElement { ${this.hass.localize("ui.panel.config.zha.groups.members")}
    - + ${this.group.members.length ? this.group.members.map( (member) => @@ -143,7 +143,7 @@ export class ZHAGroupPage extends LitElement { : html` This group has no members `} - + ${this.group.members.length ? html` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts index cf60f26d99..056f296a4b 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-manage-clusters.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import "@material/mwc-tab-bar/mwc-tab-bar"; import "@material/mwc-tab/mwc-tab"; import type { CSSResultGroup, PropertyValues } from "lit"; @@ -7,6 +6,7 @@ import { customElement, property, state } from "lit/decorators"; import { cache } from "lit/directives/cache"; import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import "../../../../../components/ha-card"; +import "../../../../../components/ha-list-item"; import "../../../../../components/ha-select"; import type { Cluster, ZHADevice } from "../../../../../data/zha"; import { fetchClustersForZhaDevice } from "../../../../../data/zha"; @@ -83,8 +83,8 @@ export class ZHAManageClusters extends LitElement { > ${this._clusters.map( (entry, idx) => html` - ${computeClusterKey(entry)}${computeClusterKey(entry)} ` )} diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts index bbe442323b..b5be0824f3 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts @@ -1,5 +1,3 @@ -import "@material/mwc-list/mwc-list"; -import "@material/mwc-list/mwc-list-item"; import { mdiSwapHorizontal } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup, TemplateResult } from "lit"; @@ -10,6 +8,8 @@ import { computeDeviceNameDisplay } from "../../../../../common/entity/compute_d import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-expansion-panel"; import "../../../../../components/ha-help-tooltip"; +import "../../../../../components/ha-list"; +import "../../../../../components/ha-list-item"; import "../../../../../components/ha-svg-icon"; import type { DeviceRegistryEntry } from "../../../../../data/device_registry"; import { subscribeDeviceRegistry } from "../../../../../data/device_registry"; @@ -84,8 +84,8 @@ class DialogZWaveJSNodeStatistics extends LitElement { this.hass.localize("ui.panel.config.zwave_js.node_statistics.title") )} > - - + + ${this.hass.localize( "ui.panel.config.zwave_js.node_statistics.commands_tx.label" @@ -97,8 +97,8 @@ class DialogZWaveJSNodeStatistics extends LitElement { )} ${this._nodeStatistics?.commands_tx} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.node_statistics.commands_rx.label" @@ -110,8 +110,8 @@ class DialogZWaveJSNodeStatistics extends LitElement { )} ${this._nodeStatistics?.commands_rx} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.node_statistics.commands_dropped_tx.label" @@ -125,8 +125,8 @@ class DialogZWaveJSNodeStatistics extends LitElement { ${this._nodeStatistics?.commands_dropped_tx} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.node_statistics.commands_dropped_rx.label" @@ -140,8 +140,8 @@ class DialogZWaveJSNodeStatistics extends LitElement { ${this._nodeStatistics?.commands_dropped_rx} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.node_statistics.timeout_response.label" @@ -153,9 +153,9 @@ class DialogZWaveJSNodeStatistics extends LitElement { )} ${this._nodeStatistics?.timeout_response} - + ${this._nodeStatistics?.rtt - ? html` + ? html` ${this.hass.localize( "ui.panel.config.zwave_js.node_statistics.rtt.label" @@ -167,10 +167,10 @@ class DialogZWaveJSNodeStatistics extends LitElement { )} ${this._nodeStatistics.rtt} - ` + ` : ``} ${this._nodeStatistics?.rssi_translated - ? html` + ? html` ${this.hass.localize( "ui.panel.config.zwave_js.node_statistics.rssi.label" @@ -182,9 +182,9 @@ class DialogZWaveJSNodeStatistics extends LitElement { )} ${this._nodeStatistics.rssi_translated} - ` + ` : ``} - + ${Object.entries(this._workingRoutes).map(([wrKey, wrValue]) => wrValue ? html` @@ -442,7 +442,7 @@ class DialogZWaveJSNodeStatistics extends LitElement { return [ haStyleDialog, css` - mwc-list-item { + ha-list-item { height: 60px; } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts index b18b5f1375..9137623338 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts @@ -1,5 +1,3 @@ -import "@material/mwc-list/mwc-list"; -import "@material/mwc-list/mwc-list-item"; import { mdiAlertCircle, mdiCheckCircle, @@ -12,15 +10,17 @@ import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; +import "../../../../../components/ha-button"; import "../../../../../components/ha-card"; import "../../../../../components/ha-expansion-panel"; import "../../../../../components/ha-fab"; -import "../../../../../components/ha-spinner"; import "../../../../../components/ha-icon-button"; -import "../../../../../components/ha-button"; import "../../../../../components/ha-icon-next"; -import "../../../../../components/ha-svg-icon"; +import "../../../../../components/ha-list"; +import "../../../../../components/ha-list-item"; import "../../../../../components/ha-progress-ring"; +import "../../../../../components/ha-spinner"; +import "../../../../../components/ha-svg-icon"; import type { ConfigEntry } from "../../../../../data/config_entries"; import { ERROR_STATES, @@ -49,11 +49,11 @@ import "../../../../../layouts/hass-tabs-subpage"; import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin"; import { haStyle } from "../../../../../resources/styles"; import type { HomeAssistant, Route } from "../../../../../types"; +import { fileDownload } from "../../../../../util/file_download"; import { showZWaveJSAddNodeDialog } from "./add-node/show-dialog-zwave_js-add-node"; import { showZWaveJSRebuildNetworkRoutesDialog } from "./show-dialog-zwave_js-rebuild-network-routes"; import { showZWaveJSRemoveNodeDialog } from "./show-dialog-zwave_js-remove-node"; import { configTabs } from "./zwave_js-config-router"; -import { fileDownload } from "../../../../../util/file_download"; @customElement("zwave_js-config-dashboard") class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { @@ -263,8 +263,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { "ui.panel.config.zwave_js.dashboard.statistics.title" )} > - - + + ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.statistics.messages_tx.label" @@ -278,8 +278,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { ${this._statistics?.messages_tx ?? 0} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.statistics.messages_rx.label" @@ -293,8 +293,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { ${this._statistics?.messages_rx ?? 0} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_tx.label" @@ -308,8 +308,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { ${this._statistics?.messages_dropped_tx ?? 0} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.statistics.messages_dropped_rx.label" @@ -323,8 +323,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { ${this._statistics?.messages_dropped_rx ?? 0} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.statistics.nak.label" @@ -336,8 +336,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { )} ${this._statistics?.nak ?? 0} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.statistics.can.label" @@ -349,8 +349,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { )} ${this._statistics?.can ?? 0} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.statistics.timeout_ack.label" @@ -364,8 +364,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { ${this._statistics?.timeout_ack ?? 0} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.statistics.timeout_response.label" @@ -379,8 +379,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { ${this._statistics?.timeout_response ?? 0} - - + + ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.statistics.timeout_callback.label" @@ -394,8 +394,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { ${this._statistics?.timeout_callback ?? 0} - - + +
    @@ -921,7 +921,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { font-size: 1rem; } - mwc-list-item { + ha-list-item { height: 60px; } diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts index 12d0183fd6..03d35ba60b 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import { mdiDownload } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultArray } from "lit"; @@ -6,6 +5,7 @@ import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { capitalizeFirstLetter } from "../../../../../common/string/capitalize-first-letter"; import "../../../../../components/ha-icon-button"; +import "../../../../../components/ha-list-item"; import "../../../../../components/ha-select"; import type { ZWaveJSLogConfig } from "../../../../../data/zwave_js"; import { @@ -85,12 +85,12 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) { .value=${this._logConfig.level} @selected=${this._dropdownSelected} > - Error - Warn - Info - Verbose - Debug - Silly + Error + Warn + Info + Verbose + Debug + Silly ` : ""} diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts index 25865a3fca..b015e44d22 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list-item"; + import { mdiCheckCircle, mdiCircle, @@ -17,6 +17,7 @@ import "../../../../../components/buttons/ha-progress-button"; import type { HaProgressButton } from "../../../../../components/buttons/ha-progress-button"; import "../../../../../components/ha-alert"; import "../../../../../components/ha-card"; +import "../../../../../components/ha-list-item"; import "../../../../../components/ha-select"; import "../../../../../components/ha-selector/ha-selector-boolean"; import "../../../../../components/ha-settings-row"; @@ -354,7 +355,7 @@ class ZWaveJSNodeConfig extends LitElement { > ${Object.entries(item.metadata.states).map( ([key, entityState]) => html` - ${entityState} + ${entityState} ` )} diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts index 3d8b84bb56..9cff05bae1 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-installer.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list-item"; + import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/labels/dialog-label-detail.ts b/src/panels/config/labels/dialog-label-detail.ts index 8832808501..a4fc0e189c 100644 --- a/src/panels/config/labels/dialog-label-detail.ts +++ b/src/panels/config/labels/dialog-label-detail.ts @@ -5,7 +5,6 @@ import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-alert"; import { createCloseHeading } from "../../../components/ha-dialog"; -import "../../../components/ha-formfield"; import "../../../components/ha-switch"; import "../../../components/ha-textfield"; import "../../../components/ha-textarea"; diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index 395eed7a7e..f319fc08e8 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -1,49 +1,55 @@ -import "@material/mwc-list/mwc-list-item"; import type { ActionDetail } from "@material/mwc-list"; import { mdiArrowCollapseDown, - mdiDotsVertical, mdiCircle, + mdiDotsVertical, mdiDownload, + mdiFolderTextOutline, mdiFormatListNumbered, mdiMenuDown, mdiRefresh, mdiWrap, mdiWrapDisabled, - mdiFolderTextOutline, } from "@mdi/js"; import { css, type CSSResultGroup, html, LitElement, + nothing, type PropertyValues, type TemplateResult, - nothing, } from "lit"; import { classMap } from "lit/directives/class-map"; // eslint-disable-next-line import/extensions import { IntersectionController } from "@lit-labs/observers/intersection-controller.js"; -import { customElement, property, state, query } from "lit/decorators"; +import { customElement, property, query, state } from "lit/decorators"; +import "../../../components/chips/ha-assist-chip"; import "../../../components/ha-alert"; import "../../../components/ha-ansi-to-html"; import type { HaAnsiToHtml } from "../../../components/ha-ansi-to-html"; -import "../../../components/ha-card"; import "../../../components/ha-button"; -import "../../../components/ha-icon-button"; -import "../../../components/ha-svg-icon"; -import "../../../components/ha-spinner"; -import "../../../components/chips/ha-assist-chip"; -import "../../../components/ha-menu"; -import "../../../components/ha-md-menu-item"; -import "../../../components/ha-md-divider"; import "../../../components/ha-button-menu"; +import "../../../components/ha-card"; +import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; +import "../../../components/ha-md-divider"; +import "../../../components/ha-md-menu"; +import "../../../components/ha-md-menu-item"; +import "../../../components/ha-spinner"; +import "../../../components/ha-svg-icon"; import { getSignedPath } from "../../../data/auth"; +import { isComponentLoaded } from "../../../common/config/is_component_loaded"; +import { atLeastVersion } from "../../../common/config/version"; +import { fireEvent, type HASSDomEvent } from "../../../common/dom/fire_event"; +import type { LocalizeFunc } from "../../../common/translations/localize"; +import { debounce } from "../../../common/util/debounce"; +import type { HaMdMenu } from "../../../components/ha-md-menu"; +import type { ConnectionStatus } from "../../../data/connection-status"; import { fetchErrorLog, getErrorLogDownloadUrl } from "../../../data/error_log"; import { extractApiErrorMessage } from "../../../data/hassio/common"; import { @@ -60,14 +66,7 @@ import { downloadFileSupported, fileDownload, } from "../../../util/file_download"; -import { fireEvent, type HASSDomEvent } from "../../../common/dom/fire_event"; -import type { ConnectionStatus } from "../../../data/connection-status"; -import { atLeastVersion } from "../../../common/config/version"; -import { isComponentLoaded } from "../../../common/config/is_component_loaded"; -import { debounce } from "../../../common/util/debounce"; import { showDownloadLogsDialog } from "./show-dialog-download-logs"; -import type { HaMenu } from "../../../components/ha-menu"; -import type { LocalizeFunc } from "../../../common/translations/localize"; const NUMBER_OF_LINES = 100; @@ -95,7 +94,7 @@ class ErrorLogCard extends LitElement { @query("ha-ansi-to-html") private _ansiToHtmlElement?: HaAnsiToHtml; - @query("#boots-menu") private _bootsMenu?: HaMenu; + @query("#boots-menu") private _bootsMenu?: HaMdMenu; @state() private _firstCursor?: string; @@ -179,7 +178,7 @@ class ErrorLogCard extends LitElement { .path=${mdiMenuDown} > - + ` : nothing} ${this._downloadSupported diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts index 4492fa07b5..a76522fced 100644 --- a/src/panels/config/logs/ha-config-logs.ts +++ b/src/panels/config/logs/ha-config-logs.ts @@ -7,6 +7,7 @@ import { navigate } from "../../../common/navigate"; import { extractSearchParam } from "../../../common/url/search-params"; import "../../../components/ha-button"; import "../../../components/ha-button-menu"; +import "../../../components/ha-list-item"; import "../../../components/search-input"; import type { LogProvider } from "../../../data/error_log"; import { fetchHassioAddonsInfo } from "../../../data/hassio/addon"; @@ -129,13 +130,13 @@ export class HaConfigLogs extends LitElement { ${this._logProviders.map( (provider) => html` - ${provider.name} - + ` )} diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts index 23841bdc20..c63b4db9c9 100644 --- a/src/panels/config/logs/system-log-card.ts +++ b/src/panels/config/logs/system-log-card.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list"; import { mdiDotsVertical, mdiDownload, mdiRefresh, mdiText } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -9,9 +8,10 @@ import "../../../components/buttons/ha-call-service-button"; import "../../../components/buttons/ha-progress-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; -import "../../../components/ha-spinner"; import "../../../components/ha-icon-button"; +import "../../../components/ha-list"; import "../../../components/ha-list-item"; +import "../../../components/ha-spinner"; import { getSignedPath } from "../../../data/auth"; import { getErrorLogDownloadUrl } from "../../../data/error_log"; import { domainToName } from "../../../data/integration"; @@ -150,7 +150,7 @@ export class SystemLogCard extends LitElement { { term: this.filter } )}
    ` - : html`${filteredItems.map( (item, idx) => html` ` - )}`}
    @@ -248,7 +248,7 @@ export class SystemLogCard extends LitElement { :host { direction: var(--direction); } - mwc-list { + ha-list { direction: ltr; } diff --git a/src/panels/config/network/ha-config-url-form.ts b/src/panels/config/network/ha-config-url-form.ts index 062c3f16e0..d7995ae9cf 100644 --- a/src/panels/config/network/ha-config-url-form.ts +++ b/src/panels/config/network/ha-config-url-form.ts @@ -7,7 +7,6 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isIPAddress } from "../../../common/string/is_ip_address"; import "../../../components/ha-alert"; import "../../../components/ha-card"; -import "../../../components/ha-formfield"; import "../../../components/ha-switch"; import "../../../components/ha-textfield"; import "../../../components/ha-settings-row"; diff --git a/src/panels/config/network/supervisor-hostname.ts b/src/panels/config/network/supervisor-hostname.ts index d359e0031c..c34765cf8f 100644 --- a/src/panels/config/network/supervisor-hostname.ts +++ b/src/panels/config/network/supervisor-hostname.ts @@ -1,6 +1,5 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list"; -import "@material/mwc-list/mwc-list-item"; + import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -8,7 +7,6 @@ import "../../../components/ha-alert"; import "../../../components/ha-card"; import "../../../components/ha-spinner"; import "../../../components/ha-expansion-panel"; -import "../../../components/ha-formfield"; import "../../../components/ha-icon-button"; import "../../../components/ha-radio"; import "../../../components/ha-settings-row"; diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts index 93d03c7db9..deea22e5a5 100644 --- a/src/panels/config/network/supervisor-network.ts +++ b/src/panels/config/network/supervisor-network.ts @@ -1,7 +1,6 @@ -import "@material/mwc-list/mwc-list"; import "@material/mwc-tab"; import "@material/mwc-tab-bar"; -import { mdiDeleteOutline, mdiPlus, mdiMenuDown, mdiWifi } from "@mdi/js"; +import { mdiDeleteOutline, mdiMenuDown, mdiPlus, mdiWifi } from "@mdi/js"; import { css, type CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { cache } from "lit/directives/cache"; @@ -9,14 +8,15 @@ import "../../../components/ha-alert"; import "../../../components/ha-button"; import "../../../components/ha-button-menu"; import "../../../components/ha-card"; -import "../../../components/ha-spinner"; import "../../../components/ha-expansion-panel"; import "../../../components/ha-formfield"; import "../../../components/ha-icon-button"; +import "../../../components/ha-list"; +import "../../../components/ha-list-item"; import "../../../components/ha-password-field"; import "../../../components/ha-radio"; -import "../../../components/ha-list-item"; import type { HaRadio } from "../../../components/ha-radio"; +import "../../../components/ha-spinner"; import "../../../components/ha-textfield"; import type { HaTextField } from "../../../components/ha-textfield"; import { extractApiErrorMessage } from "../../../data/hassio/common"; @@ -154,7 +154,7 @@ export class HassioNetwork extends LitElement { ${this._accessPoints.length ? html` - + ${this._accessPoints.map( (ap) => html` ` )} - + ` : nothing} ${this._wifiConfiguration diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index e1de5e1baa..b75c1106f4 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -6,7 +6,6 @@ import memoizeOne from "memoize-one"; import "../../../components/entity/ha-entities-picker"; import "../../../components/ha-button"; import { createCloseHeading } from "../../../components/ha-dialog"; -import "../../../components/ha-formfield"; import "../../../components/ha-icon-button"; import "../../../components/ha-picture-upload"; import type { HaPictureUpload } from "../../../components/ha-picture-upload"; diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index 3a5ba2ae21..b22b3ad750 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -1,12 +1,13 @@ import { mdiPlus } from "@mdi/js"; -import "@material/mwc-list/mwc-list"; + import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { stringCompare } from "../../../common/string/compare"; import "../../../components/ha-card"; import "../../../components/ha-fab"; -import "../../../components/ha-svg-icon"; +import "../../../components/ha-list"; import "../../../components/ha-list-item"; +import "../../../components/ha-svg-icon"; import "../../../components/user/ha-person-badge"; import type { Person } from "../../../data/person"; import { @@ -91,7 +92,7 @@ export class HaConfigPerson extends LitElement { - + ${this._storageItems.map( (entry) => html` ` )} - + ${this._storageItems.length === 0 ? html`
    @@ -127,7 +128,7 @@ export class HaConfigPerson extends LitElement { ${this._configItems.length > 0 ? html` - + ${this._configItems.map( (entry) => html` @@ -140,7 +141,7 @@ export class HaConfigPerson extends LitElement { ` )} - + ` : nothing} @@ -292,7 +293,7 @@ export class HaConfigPerson extends LitElement { align-items: center; justify-content: space-around; } - mwc-list:has(+ .empty) { + ha-list:has(+ .empty) { display: none; } `; diff --git a/src/panels/config/repairs/ha-config-repairs-dashboard.ts b/src/panels/config/repairs/ha-config-repairs-dashboard.ts index 5aabf9a51c..67c352775c 100644 --- a/src/panels/config/repairs/ha-config-repairs-dashboard.ts +++ b/src/panels/config/repairs/ha-config-repairs-dashboard.ts @@ -11,6 +11,7 @@ import { navigate } from "../../../common/navigate"; import { extractSearchParam } from "../../../common/url/search-params"; import "../../../components/ha-card"; import "../../../components/ha-check-list-item"; +import "../../../components/ha-list-item"; import type { RepairsIssue } from "../../../data/repairs"; import { severitySort, @@ -97,22 +98,22 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) { ${isComponentLoaded(this.hass, "system_health") || isComponentLoaded(this.hass, "hassio") ? html` - ${this.hass.localize( "ui.panel.config.repairs.system_information" )} - + ` : ""} - ${this.hass.localize( "ui.panel.config.repairs.integration_startup_time" )} - +
    diff --git a/src/panels/config/repairs/integrations-startup-time.ts b/src/panels/config/repairs/integrations-startup-time.ts index 73f3728640..8ec5bdf23d 100644 --- a/src/panels/config/repairs/integrations-startup-time.ts +++ b/src/panels/config/repairs/integrations-startup-time.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-card"; import "../../../components/ha-clickable-list-item"; +import "../../../components/ha-list"; import type { IntegrationManifest, IntegrationSetup, @@ -39,7 +39,7 @@ class IntegrationsStartupTime extends LitElement { } return html` - + ${this._setups?.map((setup) => { const manifest = this._manifests && this._manifests[setup.domain]; const docLink = manifest @@ -80,7 +80,7 @@ class IntegrationsStartupTime extends LitElement { `; })} - + `; } diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index a54b004fcd..357e4667ee 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -1,5 +1,5 @@ -import { consume } from "@lit-labs/context"; import { ResizeController } from "@lit-labs/observers/resize-controller"; +import { consume } from "@lit/context"; import { mdiChevronRight, mdiCog, @@ -43,7 +43,6 @@ import type { } from "../../../components/data-table/ha-data-table"; import "../../../components/data-table/ha-data-table-labels"; import "../../../components/ha-button"; -import "../../../components/ha-md-divider"; import "../../../components/ha-fab"; import "../../../components/ha-filter-categories"; import "../../../components/ha-filter-devices"; @@ -52,6 +51,8 @@ import "../../../components/ha-filter-floor-areas"; import "../../../components/ha-filter-labels"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-overflow-menu"; +import "../../../components/ha-md-divider"; +import "../../../components/ha-md-menu"; import "../../../components/ha-md-menu-item"; import "../../../components/ha-state-icon"; import "../../../components/ha-sub-menu"; @@ -724,7 +725,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) { .path=${mdiChevronRight} > - ${categoryItems} + ${categoryItems} ` : nothing } @@ -742,7 +743,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) { .path=${mdiChevronRight} > - ${labelItems} + ${labelItems} ` : nothing } @@ -760,7 +761,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) { .path=${mdiChevronRight} > - ${areaItems} + ${areaItems} ` : nothing } diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index e0c8e319d2..4c58244a21 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -1,5 +1,5 @@ -import { consume } from "@lit-labs/context"; -import "@material/mwc-list/mwc-list"; +import { consume } from "@lit/context"; + import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { mdiCog, @@ -37,6 +37,7 @@ import "../../../components/ha-card"; import "../../../components/ha-fab"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-picker"; +import "../../../components/ha-list"; import "../../../components/ha-list-item"; import "../../../components/ha-svg-icon"; import "../../../components/ha-textfield"; @@ -427,7 +428,7 @@ export class HaSceneEditor extends PreventUnsavedMixin( @click=${this._deleteDevice} > - + ${device.entities.map((entityId) => { const entityStateObj = this.hass.states[entityId]; if (!entityStateObj) { @@ -458,7 +459,7 @@ export class HaSceneEditor extends PreventUnsavedMixin( `; })} - + ` )} @@ -500,7 +501,7 @@ export class HaSceneEditor extends PreventUnsavedMixin( ${entities.length ? html` - + ${entities.map((entityId) => { const entityStateObj = this.hass.states[entityId]; if (!entityStateObj) { @@ -540,7 +541,7 @@ export class HaSceneEditor extends PreventUnsavedMixin( `; })} - + ` : ""} diff --git a/src/panels/config/script/ha-config-script.ts b/src/panels/config/script/ha-config-script.ts index 9bbd0e3a08..9ac1c2962e 100644 --- a/src/panels/config/script/ha-config-script.ts +++ b/src/panels/config/script/ha-config-script.ts @@ -1,4 +1,4 @@ -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import type { HassEntities } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 11e50a36ba..fdc99c324d 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -20,7 +20,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import { fireEvent } from "../../../common/dom/fire_event"; import { navigate } from "../../../common/navigate"; import { slugify } from "../../../common/string/slugify"; @@ -106,7 +106,7 @@ export class HaScriptEditor extends SubscribeMixin( @state() private _readOnly = false; @consume({ context: fullEntitiesContext, subscribe: true }) - @transform({ + @transform({ transformer: function (this: HaScriptEditor, value) { return value.find(({ entity_id }) => entity_id === this._entityId); }, diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 0efd0a0a4c..f29be8225e 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -1,5 +1,5 @@ -import { consume } from "@lit-labs/context"; import { ResizeController } from "@lit-labs/observers/resize-controller"; +import { consume } from "@lit/context"; import { mdiChevronRight, mdiCog, @@ -44,7 +44,6 @@ import type { SortingChangedEvent, } from "../../../components/data-table/ha-data-table"; import "../../../components/data-table/ha-data-table-labels"; -import "../../../components/ha-md-divider"; import "../../../components/ha-fab"; import "../../../components/ha-filter-blueprints"; import "../../../components/ha-filter-categories"; @@ -54,6 +53,8 @@ import "../../../components/ha-filter-floor-areas"; import "../../../components/ha-filter-labels"; import "../../../components/ha-icon-button"; import "../../../components/ha-icon-overflow-menu"; +import "../../../components/ha-md-divider"; +import "../../../components/ha-md-menu"; import "../../../components/ha-md-menu-item"; import "../../../components/ha-sub-menu"; import "../../../components/ha-svg-icon"; @@ -720,7 +721,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) { .path=${mdiChevronRight} > - ${categoryItems} + ${categoryItems} ` : nothing } @@ -738,7 +739,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) { .path=${mdiChevronRight} > - ${labelItems} + ${labelItems} ` : nothing } @@ -756,7 +757,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) { .path=${mdiChevronRight} > - ${areaItems} + ${areaItems} ` : nothing } diff --git a/src/panels/config/script/ha-script-trace.ts b/src/panels/config/script/ha-script-trace.ts index 2523d0a1bf..a69e685a30 100644 --- a/src/panels/config/script/ha-script-trace.ts +++ b/src/panels/config/script/ha-script-trace.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical, mdiDownload, @@ -15,7 +14,10 @@ import { classMap } from "lit/directives/class-map"; import { repeat } from "lit/directives/repeat"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time"; +import { fireEvent } from "../../../common/dom/fire_event"; +import "../../../components/ha-button-menu"; import "../../../components/ha-icon-button"; +import "../../../components/ha-list-item"; import "../../../components/trace/ha-trace-blueprint-config"; import "../../../components/trace/ha-trace-config"; import "../../../components/trace/ha-trace-logbook"; @@ -27,18 +29,16 @@ import type { NodeInfo, } from "../../../components/trace/hat-script-graph"; import { traceTabStyles } from "../../../components/trace/trace-tab-styles"; +import type { EntityRegistryEntry } from "../../../data/entity_registry"; import type { LogbookEntry } from "../../../data/logbook"; import { getLogbookDataForContext } from "../../../data/logbook"; import type { ScriptEntity } from "../../../data/script"; import type { ScriptTrace, ScriptTraceExtended } from "../../../data/trace"; import { loadTrace, loadTraces } from "../../../data/trace"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; +import "../../../layouts/hass-subpage"; import { haStyle } from "../../../resources/styles"; import type { HomeAssistant, Route } from "../../../types"; -import "../../../layouts/hass-subpage"; -import "../../../components/ha-button-menu"; -import { fireEvent } from "../../../common/dom/fire_event"; -import type { EntityRegistryEntry } from "../../../data/entity_registry"; @customElement("ha-script-trace") export class HaScriptTrace extends LitElement { @@ -122,7 +122,7 @@ export class HaScriptTrace extends LitElement { .path=${mdiDotsVertical} > - - + ${this.narrow && this.scriptId ? html` @@ -140,7 +140,7 @@ export class HaScriptTrace extends LitElement { class="trace-link" href="/config/script/edit/${this.scriptId}" > - + ${this.hass.localize( "ui.panel.config.script.trace.edit_script" )} @@ -148,19 +148,19 @@ export class HaScriptTrace extends LitElement { slot="graphic" .path=${mdiPencil} > - + ` : ""}
  • - + ${this.hass.localize("ui.panel.config.automation.trace.refresh")} - + - - +
    @@ -263,7 +263,9 @@ export class HaScriptTrace extends LitElement {
    - + `}
    - + ${Object.entries(columns).map(([id, column]) => column.groupable ? html` @@ -468,7 +473,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) { > ${localize("ui.components.subpage-data-table.dont_group_by")} - + ${localize("ui.components.subpage-data-table.expand_all_groups")} - - + + ${Object.entries(columns).map(([id, column]) => column.sortable ? html` @@ -516,7 +521,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) { ` : nothing )} - + `; } diff --git a/src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts index 8cfc665de6..45425225d6 100644 --- a/src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-climate-fan-modes-card-feature.ts @@ -11,6 +11,7 @@ import "../../../components/ha-control-select"; import type { ControlSelectOption } from "../../../components/ha-control-select"; import "../../../components/ha-control-select-menu"; import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu"; +import "../../../components/ha-list-item"; import type { ClimateEntity } from "../../../data/climate"; import { ClimateEntityFeature } from "../../../data/climate"; import { UNAVAILABLE } from "../../../data/entity"; diff --git a/src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts index d8ada2c5d9..266e2820c1 100644 --- a/src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-climate-hvac-modes-card-feature.ts @@ -11,6 +11,7 @@ import "../../../components/ha-control-select"; import type { ControlSelectOption } from "../../../components/ha-control-select"; import "../../../components/ha-control-select-menu"; import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu"; +import "../../../components/ha-list-item"; import type { ClimateEntity, HvacMode } from "../../../data/climate"; import { climateHvacModeIcon, diff --git a/src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts index 825115cbaa..44086b5d14 100644 --- a/src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-climate-preset-modes-card-feature.ts @@ -11,6 +11,7 @@ import "../../../components/ha-control-select"; import type { ControlSelectOption } from "../../../components/ha-control-select"; import "../../../components/ha-control-select-menu"; import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu"; +import "../../../components/ha-list-item"; import type { ClimateEntity } from "../../../data/climate"; import { ClimateEntityFeature } from "../../../data/climate"; import { UNAVAILABLE } from "../../../data/entity"; diff --git a/src/panels/lovelace/card-features/hui-climate-swing-horizontal-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-climate-swing-horizontal-modes-card-feature.ts index 136d38d142..f6579175f8 100644 --- a/src/panels/lovelace/card-features/hui-climate-swing-horizontal-modes-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-climate-swing-horizontal-modes-card-feature.ts @@ -11,6 +11,7 @@ import "../../../components/ha-control-select"; import type { ControlSelectOption } from "../../../components/ha-control-select"; import "../../../components/ha-control-select-menu"; import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu"; +import "../../../components/ha-list-item"; import type { ClimateEntity } from "../../../data/climate"; import { ClimateEntityFeature } from "../../../data/climate"; import { UNAVAILABLE } from "../../../data/entity"; diff --git a/src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts index e381e741b4..c2d68431c3 100644 --- a/src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-climate-swing-modes-card-feature.ts @@ -11,6 +11,7 @@ import "../../../components/ha-control-select"; import type { ControlSelectOption } from "../../../components/ha-control-select"; import "../../../components/ha-control-select-menu"; import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu"; +import "../../../components/ha-list-item"; import type { ClimateEntity } from "../../../data/climate"; import { ClimateEntityFeature } from "../../../data/climate"; import { UNAVAILABLE } from "../../../data/entity"; diff --git a/src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts index 83a6c6b603..5abdbc128c 100644 --- a/src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-fan-preset-modes-card-feature.ts @@ -11,6 +11,7 @@ import "../../../components/ha-control-select"; import type { ControlSelectOption } from "../../../components/ha-control-select"; import "../../../components/ha-control-select-menu"; import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu"; +import "../../../components/ha-list-item"; import { UNAVAILABLE } from "../../../data/entity"; import type { FanEntity } from "../../../data/fan"; import { FanEntityFeature } from "../../../data/fan"; diff --git a/src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts b/src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts index 4cb01b0c2a..357da0736d 100644 --- a/src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-humidifier-modes-card-feature.ts @@ -11,6 +11,7 @@ import "../../../components/ha-control-select"; import type { ControlSelectOption } from "../../../components/ha-control-select"; import "../../../components/ha-control-select-menu"; import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu"; +import "../../../components/ha-list-item"; import { UNAVAILABLE } from "../../../data/entity"; import type { HumidifierEntity } from "../../../data/humidifier"; import { HumidifierEntityFeature } from "../../../data/humidifier"; diff --git a/src/panels/lovelace/card-features/hui-select-options-card-feature.ts b/src/panels/lovelace/card-features/hui-select-options-card-feature.ts index 65ee578b54..bb13f1c206 100644 --- a/src/panels/lovelace/card-features/hui-select-options-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-select-options-card-feature.ts @@ -7,6 +7,7 @@ import { stopPropagation } from "../../../common/dom/stop_propagation"; import { computeDomain } from "../../../common/entity/compute_domain"; import "../../../components/ha-control-select-menu"; import type { HaControlSelectMenu } from "../../../components/ha-control-select-menu"; +import "../../../components/ha-list-item"; import { UNAVAILABLE } from "../../../data/entity"; import type { InputSelectEntity } from "../../../data/input_select"; import type { SelectEntity } from "../../../data/select"; diff --git a/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts index 0314dd1110..0fe49658cf 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts @@ -282,7 +282,7 @@ class HuiEnergySankeyCard const entityAreaId = entity?.area_id ?? - (entity.device_id && this.hass.devices[entity.device_id]?.area_id); + (entity?.device_id && this.hass.devices[entity.device_id]?.area_id); if (entityAreaId && entityAreaId in this.hass.areas) { const area = this.hass.areas[entityAreaId]; diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index 59d6db9adc..987048fce9 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -1,4 +1,4 @@ -import { consume } from "@lit-labs/context"; +import { consume } from "@lit/context"; import type { HassConfig, HassEntities, @@ -93,7 +93,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { }, watch: ["_config"], }) - _stateObj?: HassEntity; + private _stateObj?: HassEntity; @state() @consume({ context: themesContext, subscribe: true }) diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts index 648c132e5e..8c37699dd3 100644 --- a/src/panels/lovelace/cards/hui-todo-list-card.ts +++ b/src/panels/lovelace/cards/hui-todo-list-card.ts @@ -1,6 +1,5 @@ -import "@material/mwc-list/mwc-list"; -import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import type { List } from "@material/mwc-list/mwc-list"; +import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { mdiClock, mdiDelete, @@ -19,13 +18,14 @@ import { classMap } from "lit/directives/class-map"; import { repeat } from "lit/directives/repeat"; import memoizeOne from "memoize-one"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; -import { supportsFeature } from "../../../common/entity/supports-feature"; import { stopPropagation } from "../../../common/dom/stop_propagation"; +import { supportsFeature } from "../../../common/entity/supports-feature"; import { caseInsensitiveStringCompare } from "../../../common/string/compare"; import "../../../components/ha-card"; import "../../../components/ha-check-list-item"; import "../../../components/ha-checkbox"; import "../../../components/ha-icon-button"; +import "../../../components/ha-list"; import "../../../components/ha-list-item"; import "../../../components/ha-markdown-element"; import "../../../components/ha-relative-time"; @@ -39,12 +39,12 @@ import type { TodoItem } from "../../../data/todo"; import { TodoItemStatus, TodoListEntityFeature, + TodoSortMode, createItem, deleteItems, moveItem, subscribeItems, updateItem, - TodoSortMode, } from "../../../data/todo"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import type { HomeAssistant } from "../../../types"; @@ -273,7 +273,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { .disabled=${!this._reordering} @item-moved=${this._itemMoved} > - + ${uncheckedItems.length ? html`
    @@ -360,7 +360,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { ${this._renderItems(checkedItems, unavailable)} ` : ""} - + `; @@ -528,7 +528,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { let focusedIndex: number | undefined; let list: List | undefined; if (ev.type === "keydown") { - list = this.renderRoot.querySelector("mwc-list")!; + list = this.renderRoot.querySelector("ha-list")!; focusedIndex = list.getFocusedItemIndex(); } const item = this._getItem(ev.currentTarget.itemId); diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts index cd1f466840..a4d5e25ecf 100644 --- a/src/panels/lovelace/components/hui-action-editor.ts +++ b/src/panels/lovelace/components/hui-action-editor.ts @@ -10,7 +10,9 @@ import type { SchemaUnion, } from "../../../components/ha-form/types"; import "../../../components/ha-help-tooltip"; +import "../../../components/ha-list-item"; import "../../../components/ha-navigation-picker"; +import type { HaSelect } from "../../../components/ha-select"; import "../../../components/ha-service-control"; import type { ActionConfig, @@ -21,7 +23,6 @@ import type { import type { ServiceAction } from "../../../data/script"; import type { HomeAssistant } from "../../../types"; import type { EditorTarget } from "../editor/types"; -import type { HaSelect } from "../../../components/ha-select"; export type UiAction = Exclude; @@ -141,7 +142,7 @@ export class HuiActionEditor extends LitElement { fixedMenuPosition naturalMenuWidt > - + ${this.hass!.localize( "ui.panel.lovelace.editor.action-editor.actions.default_action" )} @@ -150,14 +151,14 @@ export class HuiActionEditor extends LitElement { `ui.panel.lovelace.editor.action-editor.actions.${this.defaultAction}` ).toLowerCase()})` : nothing} - + ${actions.map( (actn) => html` - + ${this.hass!.localize( `ui.panel.lovelace.editor.action-editor.actions.${actn}` )} - + ` )} @@ -345,12 +346,6 @@ export class HuiActionEditor extends LitElement { ha-service-control { --service-control-padding: 0; } - ha-formfield { - display: flex; - height: 56px; - align-items: center; - --mdc-typography-body2-font-size: 1em; - } `; } diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index 3f3f1a91ad..c2e971124b 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -12,7 +12,7 @@ import { } from "@mdi/js"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; -import { customElement, property, queryAssignedNodes } from "lit/decorators"; +import { customElement, property, queryAssignedElements } from "lit/decorators"; import { storage } from "../../../common/decorators/storage"; import { fireEvent } from "../../../common/dom/fire_event"; import "../../../components/ha-button-menu"; @@ -53,7 +53,7 @@ export class HuiCardOptions extends LitElement { @property({ type: Array }) public path?: LovelaceCardPath; - @queryAssignedNodes() private _assignedNodes?: NodeListOf; + @queryAssignedElements() private _assignedElements?: LovelaceCard[]; @property({ attribute: "hide-position", type: Boolean }) public hidePosition = false; @@ -67,7 +67,9 @@ export class HuiCardOptions extends LitElement { protected _clipboard?: LovelaceCardConfig; public getCardSize() { - return this._assignedNodes ? computeCardSize(this._assignedNodes[0]) : 1; + return this._assignedElements + ? computeCardSize(this._assignedElements[0]) + : 1; } protected updated(changedProps: PropertyValues) { diff --git a/src/panels/lovelace/editor/conditions/types/ha-card-condition-user.ts b/src/panels/lovelace/editor/conditions/types/ha-card-condition-user.ts index abeb281d4e..98264c7b6d 100644 --- a/src/panels/lovelace/editor/conditions/types/ha-card-condition-user.ts +++ b/src/panels/lovelace/editor/conditions/types/ha-card-condition-user.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list"; import type { PropertyValues } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -8,6 +7,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event"; import { stringCompare } from "../../../../../common/string/compare"; import "../../../../../components/ha-check-list-item"; import "../../../../../components/ha-switch"; +import "../../../../../components/ha-list"; import "../../../../../components/user/ha-user-badge"; import type { User } from "../../../../../data/user"; import { fetchUsers } from "../../../../../data/user"; @@ -57,7 +57,7 @@ export class HaCardConditionUser extends LitElement { const selectedUsers = this.condition.users ?? []; return html` - + ${this._sortedUsers(this._users).map( (user) => html` ` )} - + `; } @@ -109,7 +109,7 @@ export class HaCardConditionUser extends LitElement { :host { display: block; } - mwc-list { + ha-list { --mdc-list-vertical-padding: 0; } `; diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts index 14e8b07430..394456b8c4 100644 --- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts @@ -12,7 +12,6 @@ import type { HASSDomEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-alert"; import "../../../../components/ha-button"; -import "../../../../components/ha-list-item"; import "../../../../components/ha-svg-icon"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; diff --git a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts index 1624036f5e..81872b3c99 100644 --- a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts @@ -1,3 +1,4 @@ +import "@material/mwc-menu/mwc-menu-surface"; import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js"; import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light"; import { LitElement, css, html, nothing } from "lit"; @@ -11,7 +12,6 @@ import "../../../../components/entity/ha-entity-picker"; import type { HaEntityPicker } from "../../../../components/entity/ha-entity-picker"; import "../../../../components/ha-button"; import "../../../../components/ha-icon-button"; -import "../../../../components/ha-list-item"; import "../../../../components/ha-sortable"; import "../../../../components/ha-svg-icon"; import type { HomeAssistant } from "../../../../types"; diff --git a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts index 0937d6c883..b9d5a40aed 100644 --- a/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts +++ b/src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts @@ -15,6 +15,7 @@ import "../../../../../components/ha-button-menu"; import "../../../../../components/ha-dialog"; import "../../../../../components/ha-dialog-header"; import "../../../../../components/ha-icon-button"; +import "../../../../../components/ha-list-item"; import type { LovelaceStrategyConfig } from "../../../../../data/lovelace/config/strategy"; import { haStyleDialog } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; diff --git a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts index c81f09c8cc..be8ff35a30 100644 --- a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts +++ b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts @@ -1,16 +1,16 @@ +import { mdiClose, mdiContentDuplicate, mdiPencil } from "@mdi/js"; import deepClone from "deep-clone-simple"; -import { mdiClose, mdiPencil, mdiContentDuplicate } from "@mdi/js"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import "../../../components/ha-icon-button"; -import "../../../components/ha-svg-icon"; -import type { HomeAssistant } from "../../../types"; +import "../../../components/ha-list-item"; import "../../../components/ha-select"; import type { HaSelect } from "../../../components/ha-select"; +import "../../../components/ha-svg-icon"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; -import { getElementStubConfig } from "./get-element-stub-config"; +import type { HomeAssistant } from "../../../types"; import type { ConditionalElementConfig, IconElementConfig, @@ -21,6 +21,7 @@ import type { StateIconElementConfig, StateLabelElementConfig, } from "../elements/types"; +import { getElementStubConfig } from "./get-element-stub-config"; declare global { interface HASSDomEvents { @@ -115,10 +116,10 @@ export class HuiPictureElementsCardRowEditor extends LitElement { > ${elementTypes.map( (element) => html` - ${this.hass?.localize( `ui.panel.lovelace.editor.card.picture-elements.element_types.${element}` - )} ` )} diff --git a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts index 1117a11952..4b23bd6501 100644 --- a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts +++ b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts @@ -1,7 +1,5 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list"; -import "@material/mwc-list/mwc-list-item"; -import "@material/mwc-list/mwc-radio-list-item"; + import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; @@ -10,15 +8,18 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation"; import "../../../../components/ha-alert"; import { createCloseHeading } from "../../../../components/ha-dialog"; import "../../../../components/ha-icon"; +import "../../../../components/ha-list"; +import "../../../../components/ha-list-item"; +import "../../../../components/ha-radio-list-item"; import "../../../../components/ha-select"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; import { fetchConfig } from "../../../../data/lovelace/config/types"; +import { isStrategyView } from "../../../../data/lovelace/config/view"; import type { LovelaceDashboard } from "../../../../data/lovelace/dashboard"; import { fetchDashboards } from "../../../../data/lovelace/dashboard"; import { haStyleDialog } from "../../../../resources/styles"; import type { HomeAssistant } from "../../../../types"; import type { SelectViewDialogParams } from "./show-select-view-dialog"; -import { isStrategyView } from "../../../../data/lovelace/config/view"; declare global { interface HASSDomEvents { @@ -83,19 +84,19 @@ export class HuiDialogSelectView extends LitElement { naturalMenuWidth dialogInitialFocus > - Default - + ${this._dashboards.map( (dashboard) => html` - ${dashboard.title}${dashboard.title} ` )} @@ -111,12 +112,12 @@ export class HuiDialogSelectView extends LitElement { >` : this._config.views.length > 1 ? html` - + ${this._config.views.map((view, idx) => { const isStrategy = isStrategyView(view); return html` - icon) ? "icon" : nothing} @@ -133,10 +134,10 @@ export class HuiDialogSelectView extends LitElement { - + `; })} - + ` : ""} - html`${option}` + html`${option}` ) : ""} diff --git a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts index e877ac1bf4..fa7fb03ca2 100644 --- a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list-item"; import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import { computeStateName } from "../../../common/entity/compute_state_name"; +import "../../../components/ha-list-item"; import "../../../components/ha-select"; import { UNAVAILABLE } from "../../../data/entity"; import { forwardHaptic } from "../../../data/haptics"; @@ -70,9 +70,9 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow { ${stateObj.attributes.options ? stateObj.attributes.options.map( (option) => html` - + ${this.hass!.formatEntityState(stateObj, option)} - + ` ) : ""} diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 899eb95ccb..6752a5be33 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@material/mwc-list/mwc-list-item"; + import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item"; import { mdiCodeBraces, @@ -39,6 +39,7 @@ import "../../components/ha-icon"; import "../../components/ha-icon-button"; import "../../components/ha-icon-button-arrow-next"; import "../../components/ha-icon-button-arrow-prev"; +import "../../components/ha-list-item"; import "../../components/ha-menu-button"; import "../../components/ha-svg-icon"; import "../../components/sl-tab-group"; @@ -60,6 +61,7 @@ import { QuickBarMode, showQuickBar, } from "../../dialogs/quick-bar/show-dialog-quick-bar"; +import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog"; import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog"; import { haStyle } from "../../resources/styles"; import type { HomeAssistant, PanelInfo } from "../../types"; @@ -76,7 +78,6 @@ import "./views/hui-view"; import type { HUIView } from "./views/hui-view"; import "./views/hui-view-background"; import "./views/hui-view-container"; -import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog"; @customElement("hui-root") class HUIRoot extends LitElement { @@ -264,13 +265,13 @@ class HUIRoot extends LitElement { const listItems: TemplateResult[] = []; overflowItems.forEach((i) => { listItems.push( - html` ${[this.hass!.localize(i.key), i.suffix].join(" ")} - ` + ` ); }); result.push( diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts index 086487bb81..05b2799ae5 100644 --- a/src/panels/media-browser/ha-panel-media-browser.ts +++ b/src/panels/media-browser/ha-panel-media-browser.ts @@ -1,12 +1,12 @@ +import "@material/mwc-button"; +import type { ActionDetail } from "@material/mwc-list"; import { + mdiAlphaABoxOutline, + mdiArrowLeft, + mdiDotsVertical, mdiGrid, mdiListBoxOutline, - mdiArrowLeft, - mdiAlphaABoxOutline, - mdiDotsVertical, } from "@mdi/js"; -import type { ActionDetail } from "@material/mwc-list"; -import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; @@ -14,15 +14,21 @@ import { storage } from "../../common/decorators/storage"; import type { HASSDomEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event"; import { navigate } from "../../common/navigate"; -import "../../components/ha-menu-button"; import "../../components/ha-icon-button"; import "../../components/ha-icon-button-arrow-prev"; -import "../../components/media-player/ha-media-player-browse"; +import "../../components/ha-list-item"; +import "../../components/ha-menu-button"; +import "../../components/ha-top-app-bar-fixed"; import "../../components/media-player/ha-media-manage-button"; +import "../../components/media-player/ha-media-player-browse"; import type { HaMediaPlayerBrowse, MediaPlayerItemId, } from "../../components/media-player/ha-media-player-browse"; +import { + getEntityIdFromCameraMediaSource, + isCameraMediaSource, +} from "../../data/camera"; import type { MediaPickedEvent, MediaPlayerItem, @@ -31,17 +37,12 @@ import type { import { BROWSER_PLAYER, mediaPlayerPlayMedia } from "../../data/media-player"; import type { ResolvedMediaSource } from "../../data/media_source"; import { resolveMediaSource } from "../../data/media_source"; +import { showAlertDialog } from "../../dialogs/generic/show-dialog-box"; import { haStyle } from "../../resources/styles"; import type { HomeAssistant, Route } from "../../types"; import "./ha-bar-media-player"; import type { BarMediaPlayer } from "./ha-bar-media-player"; import { showWebBrowserPlayMediaDialog } from "./show-media-player-dialog"; -import { showAlertDialog } from "../../dialogs/generic/show-dialog-box"; -import { - getEntityIdFromCameraMediaSource, - isCameraMediaSource, -} from "../../data/camera"; -import "../../components/ha-top-app-bar-fixed"; const createMediaPanelUrl = (entityId: string, items: MediaPlayerItemId[]) => { let path = `/media-browser/${entityId}`; @@ -125,7 +126,7 @@ class PanelMediaBrowser extends LitElement { .label=${this.hass.localize("ui.common.menu")} .path=${mdiDotsVertical} > - + ${this.hass.localize("ui.components.media-browser.auto")} - - + + ${this.hass.localize("ui.components.media-browser.grid")} - - + + ${this.hass.localize("ui.components.media-browser.list")} - + - + ${this.hass.localize( "ui.panel.profile.dashboard.default_dashboard_label" )} - + ${this._dashboards.map((dashboard) => { if (!this.hass.user!.is_admin && dashboard.require_admin) { return ""; } return html` - + ${dashboard.title} - + `; })} ` diff --git a/src/panels/profile/ha-pick-date-format-row.ts b/src/panels/profile/ha-pick-date-format-row.ts index 78ff9c1387..ead7a7cf0f 100644 --- a/src/panels/profile/ha-pick-date-format-row.ts +++ b/src/panels/profile/ha-pick-date-format-row.ts @@ -1,10 +1,10 @@ -import "@material/mwc-list/mwc-list-item"; import type { TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { formatDateNumeric } from "../../common/datetime/format_date"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-card"; +import "../../components/ha-list-item"; import "../../components/ha-select"; import "../../components/ha-settings-row"; import { DateFormat } from "../../data/translation"; @@ -47,10 +47,10 @@ class DateFormatRow extends LitElement { const value = this.hass.localize( `ui.panel.profile.date_format.formats.${format}` ); - return html` + return html` ${value} ${formattedDate} - `; + `; })} diff --git a/src/panels/profile/ha-pick-first-weekday-row.ts b/src/panels/profile/ha-pick-first-weekday-row.ts index 63ccb1ba11..e793c93151 100644 --- a/src/panels/profile/ha-pick-first-weekday-row.ts +++ b/src/panels/profile/ha-pick-first-weekday-row.ts @@ -1,9 +1,9 @@ -import "@material/mwc-list/mwc-list-item"; import type { TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { firstWeekday } from "../../common/datetime/first_weekday"; import { fireEvent } from "../../common/dom/fire_event"; +import "../../components/ha-list-item"; import "../../components/ha-select"; import "../../components/ha-settings-row"; import { FirstWeekday } from "../../data/translation"; @@ -44,7 +44,7 @@ class FirstWeekdayRow extends LitElement { ); const twoLine = day === FirstWeekday.language; return html` - + ${value} ${twoLine ? html` @@ -57,7 +57,7 @@ class FirstWeekdayRow extends LitElement { > ` : ""} - + `; })} diff --git a/src/panels/profile/ha-pick-number-format-row.ts b/src/panels/profile/ha-pick-number-format-row.ts index 4e04f249c6..356fd6122f 100644 --- a/src/panels/profile/ha-pick-number-format-row.ts +++ b/src/panels/profile/ha-pick-number-format-row.ts @@ -1,10 +1,10 @@ -import "@material/mwc-list/mwc-list-item"; import type { TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import { formatNumber } from "../../common/number/format_number"; import "../../components/ha-card"; +import "../../components/ha-list-item"; import "../../components/ha-select"; import "../../components/ha-settings-row"; import { NumberFormat } from "../../data/translation"; @@ -44,12 +44,12 @@ class NumberFormatRow extends LitElement { ); const twoLine = value.slice(value.length - 2) !== "89"; // Display explicit number formats on one line return html` - + ${value} ${twoLine ? html`${formattedNumber}` : ""} - + `; })} diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts index d37471f938..56c30af63d 100644 --- a/src/panels/profile/ha-pick-theme-row.ts +++ b/src/panels/profile/ha-pick-theme-row.ts @@ -1,10 +1,11 @@ import "@material/mwc-button/mwc-button"; -import "@material/mwc-list/mwc-list-item"; + import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-formfield"; +import "../../components/ha-list-item"; import "../../components/ha-radio"; import type { HaRadio } from "../../components/ha-radio"; import "../../components/ha-select"; @@ -68,15 +69,15 @@ export class HaPickThemeRow extends LitElement { @selected=${this._handleThemeSelection} naturalMenuWidth > - + ${this.hass.localize("ui.panel.profile.themes.use_default")} - - + + Home Assistant - + ${this._themeNames.map( (theme) => html` - ${theme} + ${theme} ` )} diff --git a/src/panels/profile/ha-pick-time-format-row.ts b/src/panels/profile/ha-pick-time-format-row.ts index 1cb7d8800a..17644a7975 100644 --- a/src/panels/profile/ha-pick-time-format-row.ts +++ b/src/panels/profile/ha-pick-time-format-row.ts @@ -1,10 +1,10 @@ -import "@material/mwc-list/mwc-list-item"; import type { TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { formatTime } from "../../common/datetime/format_time"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-card"; +import "../../components/ha-list-item"; import "../../components/ha-select"; import "../../components/ha-settings-row"; import { TimeFormat } from "../../data/translation"; @@ -47,10 +47,10 @@ class TimeFormatRow extends LitElement { const value = this.hass.localize( `ui.panel.profile.time_format.formats.${format}` ); - return html` + return html` ${value} ${formattedTime} - `; + `; })} diff --git a/src/panels/profile/ha-pick-time-zone-row.ts b/src/panels/profile/ha-pick-time-zone-row.ts index 6698e7da4a..a237eb6ec9 100644 --- a/src/panels/profile/ha-pick-time-zone-row.ts +++ b/src/panels/profile/ha-pick-time-zone-row.ts @@ -1,4 +1,3 @@ -import "@material/mwc-list/mwc-list-item"; import type { TemplateResult } from "lit"; import { html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; @@ -6,6 +5,7 @@ import { formatDateTimeNumeric } from "../../common/datetime/format_date_time"; import { resolveTimeZone } from "../../common/datetime/resolve-time-zone"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-card"; +import "../../components/ha-list-item"; import "../../components/ha-select"; import "../../components/ha-settings-row"; import { TimeZone } from "../../data/translation"; @@ -45,7 +45,7 @@ class TimeZoneRow extends LitElement { }, this.hass.config ); - return html` + return html` ${this.hass.localize( `ui.panel.profile.time_zone.options.${format}`, @@ -58,7 +58,7 @@ class TimeZoneRow extends LitElement { )} ${formattedTime} - `; + `; })} diff --git a/src/panels/todo/ha-panel-todo.ts b/src/panels/todo/ha-panel-todo.ts index a52780ee72..d6c2369822 100644 --- a/src/panels/todo/ha-panel-todo.ts +++ b/src/panels/todo/ha-panel-todo.ts @@ -1,5 +1,4 @@ import { ResizeController } from "@lit-labs/observers/resize-controller"; -import "@material/mwc-list"; import { mdiChevronDown, mdiCommentProcessingOutline, @@ -26,6 +25,7 @@ import { import "../../components/ha-button"; import "../../components/ha-fab"; import "../../components/ha-icon-button"; +import "../../components/ha-list"; import "../../components/ha-list-item"; import "../../components/ha-menu-button"; import "../../components/ha-state-icon"; @@ -209,7 +209,7 @@ class PanelTodo extends LitElement { ` : this.hass.localize("panel.todo")}
    - ${listItems} + ${listItems} ${showPane && this.hass.user?.is_admin ? html` ${this.stateObj.attributes.options.map( (option) => - html`${option}` + html`${option}` )} `; diff --git a/src/state-summary/state-card-select.ts b/src/state-summary/state-card-select.ts index 642310e032..9027a17100 100644 --- a/src/state-summary/state-card-select.ts +++ b/src/state-summary/state-card-select.ts @@ -1,10 +1,10 @@ -import "@material/mwc-list/mwc-list-item"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { stopPropagation } from "../common/dom/stop_propagation"; import { computeStateName } from "../common/entity/compute_state_name"; import "../components/entity/state-badge"; +import "../components/ha-list-item"; import "../components/ha-select"; import { UNAVAILABLE } from "../data/entity"; import type { SelectEntity } from "../data/select"; @@ -32,9 +32,9 @@ class StateCardSelect extends LitElement { > ${this.stateObj.attributes.options.map( (option) => html` - + ${this.hass.formatEntityState(this.stateObj, option)} - + ` )} diff --git a/src/state/context-mixin.ts b/src/state/context-mixin.ts index fd5bae6025..a2d1c44975 100644 --- a/src/state/context-mixin.ts +++ b/src/state/context-mixin.ts @@ -1,4 +1,4 @@ -import { ContextProvider } from "@lit-labs/context"; +import { ContextProvider } from "@lit/context"; import { areasContext, configContext, diff --git a/tsconfig.json b/tsconfig.json index cc74354d22..e77b179a93 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,6 +4,7 @@ "target": "ES2021", "lib": ["ES2021", "DOM", "DOM.Iterable", "WebWorker"], "experimentalDecorators": true, + "useDefineForClassFields": false, // Modules "module": "ESNext", "moduleResolution": "node", diff --git a/yarn.lock b/yarn.lock index d22c347daa..cb0e100592 100644 --- a/yarn.lock +++ b/yarn.lock @@ -117,7 +117,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.25.9, @babel/helper-create-class-features-plugin@npm:^7.27.0": +"@babel/helper-create-class-features-plugin@npm:^7.25.9": version: 7.27.0 resolution: "@babel/helper-create-class-features-plugin@npm:7.27.0" dependencies: @@ -359,19 +359,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-proposal-decorators@npm:7.25.9": - version: 7.25.9 - resolution: "@babel/plugin-proposal-decorators@npm:7.25.9" - dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.25.9" - "@babel/helper-plugin-utils": "npm:^7.25.9" - "@babel/plugin-syntax-decorators": "npm:^7.25.9" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10/f564de219ace3980cd679c719738390c02e2e6f562b330bfb941fab94c128bcb2b30e9970e1aae82d3b908703e162e4a62fb9269c7e9fb4bad83d0a56cdb41af - languageName: node - linkType: hard - "@babel/plugin-proposal-private-property-in-object@npm:7.21.0-placeholder-for-preset-env.2": version: 7.21.0-placeholder-for-preset-env.2 resolution: "@babel/plugin-proposal-private-property-in-object@npm:7.21.0-placeholder-for-preset-env.2" @@ -381,17 +368,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-decorators@npm:^7.25.9": - version: 7.25.9 - resolution: "@babel/plugin-syntax-decorators@npm:7.25.9" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.25.9" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10/e22e85c0a780b9c10619996d8e9fdb5f151869e53ce2b82ea05a52d393a1dbfda82e5896e9a75775a78ca7f91bca3b7d6864bec401ae1e9dc2b490dc044cad8d - languageName: node - linkType: hard - "@babel/plugin-syntax-import-assertions@npm:^7.26.0": version: 7.26.0 resolution: "@babel/plugin-syntax-import-assertions@npm:7.26.0" @@ -414,28 +390,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-jsx@npm:^7.25.9": - version: 7.25.9 - resolution: "@babel/plugin-syntax-jsx@npm:7.25.9" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.25.9" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10/bb609d1ffb50b58f0c1bac8810d0e46a4f6c922aa171c458f3a19d66ee545d36e782d3bffbbc1fed0dc65a558bdce1caf5279316583c0fff5a2c1658982a8563 - languageName: node - linkType: hard - -"@babel/plugin-syntax-typescript@npm:^7.25.9": - version: 7.25.9 - resolution: "@babel/plugin-syntax-typescript@npm:7.25.9" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.25.9" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10/0e9821e8ba7d660c36c919654e4144a70546942ae184e85b8102f2322451eae102cbfadbcadd52ce077a2b44b400ee52394c616feab7b5b9f791b910e933fd33 - languageName: node - linkType: hard - "@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6" @@ -1004,21 +958,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-typescript@npm:^7.27.0": - version: 7.27.0 - resolution: "@babel/plugin-transform-typescript@npm:7.27.0" - dependencies: - "@babel/helper-annotate-as-pure": "npm:^7.25.9" - "@babel/helper-create-class-features-plugin": "npm:^7.27.0" - "@babel/helper-plugin-utils": "npm:^7.26.5" - "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9" - "@babel/plugin-syntax-typescript": "npm:^7.25.9" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10/61f866967d0aa1b64d28f11687bfa517e47829baab294fe42f9eae4020767f96ab4c44029af9a445b6a1ac66bc3b3e4ff24048d833812ce81eec9a9bece90b11 - languageName: node - linkType: hard - "@babel/plugin-transform-unicode-escapes@npm:^7.25.9": version: 7.25.9 resolution: "@babel/plugin-transform-unicode-escapes@npm:7.25.9" @@ -1158,21 +1097,6 @@ __metadata: languageName: node linkType: hard -"@babel/preset-typescript@npm:7.27.0": - version: 7.27.0 - resolution: "@babel/preset-typescript@npm:7.27.0" - dependencies: - "@babel/helper-plugin-utils": "npm:^7.26.5" - "@babel/helper-validator-option": "npm:^7.25.9" - "@babel/plugin-syntax-jsx": "npm:^7.25.9" - "@babel/plugin-transform-modules-commonjs": "npm:^7.26.3" - "@babel/plugin-transform-typescript": "npm:^7.27.0" - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: 10/3b7b44bff0ed5dec49cb056e9a3a3dbf55e51dc5f85baa98336785b2d99670a12b7f9741b8c74ae061f2942d13a9dc7ac4ae0bcaecaff04f9db934c6ab6d9f30 - languageName: node - linkType: hard - "@babel/runtime@npm:7.27.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.8.4": version: 7.27.0 resolution: "@babel/runtime@npm:7.27.0" @@ -2226,16 +2150,6 @@ __metadata: languageName: node linkType: hard -"@lit-labs/context@npm:0.4.1": - version: 0.4.1 - resolution: "@lit-labs/context@npm:0.4.1" - dependencies: - "@lit/reactive-element": "npm:^1.5.0" - lit: "npm:^2.7.0" - checksum: 10/4d0ecbfe390d64306e5756bea46818ce02fdc3946acdd77a6bc8a32b0db179ffdba5b9e37d249c01923f5813c96b85502cad29ff496ea440708b43a64ad0636e - languageName: node - linkType: hard - "@lit-labs/motion@npm:1.0.8": version: 1.0.8 resolution: "@lit-labs/motion@npm:1.0.8" @@ -2255,10 +2169,10 @@ __metadata: languageName: node linkType: hard -"@lit-labs/ssr-dom-shim@npm:^1.0.0, @lit-labs/ssr-dom-shim@npm:^1.1.0": - version: 1.3.0 - resolution: "@lit-labs/ssr-dom-shim@npm:1.3.0" - checksum: 10/a15c5d145a20f367a392cff91f2091ffe54457119ac26569670bbbe32760f86d1e250f865dc1bd0604641106376776c4862a8fff9adb44f9881b510747c08680 +"@lit-labs/ssr-dom-shim@npm:^1.2.0": + version: 1.2.1 + resolution: "@lit-labs/ssr-dom-shim@npm:1.2.1" + checksum: 10/48e28c1f132eb1d5b385454dd23db2837bf913d108a0908e73816ceb594b1b09db34e05ccb86a18fb9c02fc100d62bbab350b6ec88e2c175f2c21c5f0220bfdd languageName: node linkType: hard @@ -2272,6 +2186,15 @@ __metadata: languageName: node linkType: hard +"@lit/context@npm:1.1.4": + version: 1.1.4 + resolution: "@lit/context@npm:1.1.4" + dependencies: + "@lit/reactive-element": "npm:^1.6.2 || ^2.0.0" + checksum: 10/9c8dea816c423fab05bf2f7fa644468d7c9842af44ebc5aa61edc78b926f63832413d33d6b913c3b8420edddc6e37d1188efadd7f7328e90c7fc2d727ce98a8c + languageName: node + linkType: hard + "@lit/react@npm:^1.0.6": version: 1.0.7 resolution: "@lit/react@npm:1.0.7" @@ -2281,12 +2204,12 @@ __metadata: languageName: node linkType: hard -"@lit/reactive-element@npm:1.6.3": - version: 1.6.3 - resolution: "@lit/reactive-element@npm:1.6.3" +"@lit/reactive-element@npm:2.1.0": + version: 2.1.0 + resolution: "@lit/reactive-element@npm:2.1.0" dependencies: - "@lit-labs/ssr-dom-shim": "npm:^1.0.0" - checksum: 10/664c899bb0b144590dc4faf83b358b1504810eac107778c3aeb384affc65a7ef4eda754944bcc34a57237db03dff145332406345ac24da19ca37cf4b3cb343d3 + "@lit-labs/ssr-dom-shim": "npm:^1.2.0" + checksum: 10/c13dbc370550b8f3cbdfff3524c4bf58fbda6e91689951ca376104d95c80df96182e0b1c9480786740711f67493f50166d261c79b020eb7a4a10b6794921c790 languageName: node linkType: hard @@ -2738,6 +2661,18 @@ __metadata: languageName: node linkType: hard +"@material/mwc-formfield@patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch": + version: 0.27.0 + resolution: "@material/mwc-formfield@patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch::version=0.27.0&hash=fbe3e7" + dependencies: + "@material/form-field": "npm:=14.0.0-canary.53b3cad2f.0" + "@material/mwc-base": "npm:^0.27.0" + lit: "npm:^2.0.0" + tslib: "npm:^2.0.1" + checksum: 10/20827383c78c06f8e38eee6ec7cce84d2f79bd4ba74f83de0d97479865dee34d6c4c558063afd7ef2315db4697427b52dfa3d1fae6088187c389d50438de5a48 + languageName: node + linkType: hard + "@material/mwc-icon-button@npm:0.27.0": version: 0.27.0 resolution: "@material/mwc-icon-button@npm:0.27.0" @@ -2783,7 +2718,7 @@ __metadata: languageName: node linkType: hard -"@material/mwc-list@npm:0.27.0, @material/mwc-list@npm:^0.27.0": +"@material/mwc-list@npm:0.27.0": version: 0.27.0 resolution: "@material/mwc-list@npm:0.27.0" dependencies: @@ -2800,6 +2735,23 @@ __metadata: languageName: node linkType: hard +"@material/mwc-list@patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch": + version: 0.27.0 + resolution: "@material/mwc-list@patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch::version=0.27.0&hash=c7628f" + dependencies: + "@material/base": "npm:=14.0.0-canary.53b3cad2f.0" + "@material/dom": "npm:=14.0.0-canary.53b3cad2f.0" + "@material/list": "npm:=14.0.0-canary.53b3cad2f.0" + "@material/mwc-base": "npm:^0.27.0" + "@material/mwc-checkbox": "npm:^0.27.0" + "@material/mwc-radio": "npm:^0.27.0" + "@material/mwc-ripple": "npm:^0.27.0" + lit: "npm:^2.0.0" + tslib: "npm:^2.0.1" + checksum: 10/299d8e0f397ddd0e9d737b02277c3f49d821b20ec5037b52f98dd5a3c606189cb76dcbc4c9ba65ee7b54d6b461526191d26bed42173e793185e74234e61a34dd + languageName: node + linkType: hard + "@material/mwc-menu@npm:0.27.0, @material/mwc-menu@npm:^0.27.0": version: 0.27.0 resolution: "@material/mwc-menu@npm:0.27.0" @@ -4298,6 +4250,15 @@ __metadata: languageName: node linkType: hard +"@swc/helpers@npm:0.5.17": + version: 0.5.17 + resolution: "@swc/helpers@npm:0.5.17" + dependencies: + tslib: "npm:^2.8.0" + checksum: 10/1fc8312a78f1f99c8ec838585445e99763eeebff2356100738cdfdb8ad47d2d38df678ee6edd93a90fe319ac52da67adc14ac00eb82b606c5fb8ebc5d06ec2a2 + languageName: node + linkType: hard + "@thepassle/axobject-query@npm:^4.0.0": version: 4.0.0 resolution: "@thepassle/axobject-query@npm:4.0.0" @@ -4565,7 +4526,7 @@ __metadata: languageName: node linkType: hard -"@types/express-serve-static-core@npm:*, @types/express-serve-static-core@npm:^5.0.0": +"@types/express-serve-static-core@npm:*": version: 5.0.6 resolution: "@types/express-serve-static-core@npm:5.0.6" dependencies: @@ -4589,18 +4550,7 @@ __metadata: languageName: node linkType: hard -"@types/express@npm:*": - version: 5.0.1 - resolution: "@types/express@npm:5.0.1" - dependencies: - "@types/body-parser": "npm:*" - "@types/express-serve-static-core": "npm:^5.0.0" - "@types/serve-static": "npm:*" - checksum: 10/189dd078679c5f748644c9dccf6b9666755d2fd37741ae5b7494129531b14d0366746a79191e1064060c2547daf7d342a02c48923730f20c8980c9ca7dfce1d2 - languageName: node - linkType: hard - -"@types/express@npm:^4.17.21": +"@types/express@npm:*, @types/express@npm:^4.17.21": version: 4.17.21 resolution: "@types/express@npm:4.17.21" dependencies: @@ -9381,10 +9331,8 @@ __metadata: dependencies: "@babel/core": "npm:7.26.10" "@babel/helper-define-polyfill-provider": "npm:0.6.4" - "@babel/plugin-proposal-decorators": "npm:7.25.9" "@babel/plugin-transform-runtime": "npm:7.26.10" "@babel/preset-env": "npm:7.26.9" - "@babel/preset-typescript": "npm:7.27.0" "@babel/runtime": "npm:7.27.0" "@braintree/sanitize-url": "npm:7.1.1" "@bundle-stats/plugin-webpack-filter": "npm:4.19.1" @@ -9412,10 +9360,10 @@ __metadata: "@fullcalendar/luxon3": "npm:6.1.17" "@fullcalendar/timegrid": "npm:6.1.17" "@lezer/highlight": "npm:1.2.1" - "@lit-labs/context": "npm:0.4.1" "@lit-labs/motion": "npm:1.0.8" "@lit-labs/observers": "npm:2.0.5" "@lit-labs/virtualizer": "npm:2.1.0" + "@lit/context": "npm:1.1.4" "@lokalise/node-api": "npm:14.4.0" "@material/chips": "npm:=14.0.0-canary.53b3cad2f.0" "@material/data-table": "npm:=14.0.0-canary.53b3cad2f.0" @@ -9426,10 +9374,10 @@ __metadata: "@material/mwc-drawer": "npm:0.27.0" "@material/mwc-fab": "npm:0.27.0" "@material/mwc-floating-label": "npm:0.27.0" - "@material/mwc-formfield": "npm:0.27.0" + "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch" "@material/mwc-icon-button": "npm:0.27.0" "@material/mwc-linear-progress": "npm:0.27.0" - "@material/mwc-list": "npm:0.27.0" + "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch" "@material/mwc-menu": "npm:0.27.0" "@material/mwc-radio": "npm:0.27.0" "@material/mwc-select": "npm:0.27.0" @@ -9453,6 +9401,7 @@ __metadata: "@rspack/cli": "npm:1.3.5" "@rspack/core": "npm:1.3.5" "@shoelace-style/shoelace": "npm:2.20.1" + "@swc/helpers": "npm:0.5.17" "@thomasloven/round-slider": "npm:0.6.0" "@tsparticles/engine": "npm:3.8.1" "@tsparticles/preset-links": "npm:3.2.0" @@ -9530,9 +9479,9 @@ __metadata: leaflet-draw: "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch" leaflet.markercluster: "npm:1.5.3" lint-staged: "npm:15.5.1" - lit: "npm:2.8.0" + lit: "npm:3.3.0" lit-analyzer: "npm:2.0.3" - lit-html: "npm:2.8.0" + lit-html: "npm:3.3.0" lodash.merge: "npm:4.6.2" lodash.template: "npm:4.5.0" luxon: "npm:3.6.1" @@ -10657,16 +10606,7 @@ __metadata: languageName: node linkType: hard -"jsesc@npm:^3.0.2": - version: 3.1.0 - resolution: "jsesc@npm:3.1.0" - bin: - jsesc: bin/jsesc - checksum: 10/20bd37a142eca5d1794f354db8f1c9aeb54d85e1f5c247b371de05d23a9751ecd7bd3a9c4fc5298ea6fa09a100dafb4190fa5c98c6610b75952c3487f3ce7967 - languageName: node - linkType: hard - -"jsesc@npm:~3.0.2": +"jsesc@npm:^3.0.2, jsesc@npm:~3.0.2": version: 3.0.2 resolution: "jsesc@npm:3.0.2" bin: @@ -10963,23 +10903,23 @@ __metadata: languageName: node linkType: hard -"lit-element@npm:^3.3.0": - version: 3.3.3 - resolution: "lit-element@npm:3.3.3" +"lit-element@npm:^4.2.0": + version: 4.2.0 + resolution: "lit-element@npm:4.2.0" dependencies: - "@lit-labs/ssr-dom-shim": "npm:^1.1.0" - "@lit/reactive-element": "npm:^1.3.0" - lit-html: "npm:^2.8.0" - checksum: 10/7968e7f3ce3994911f27c4c54acc956488c91d8af81677cce3d6f0c2eaea45cceb79b064077159392238d6e43d46015a950269db9914fea8913566aacb17eaa1 + "@lit-labs/ssr-dom-shim": "npm:^1.2.0" + "@lit/reactive-element": "npm:^2.1.0" + lit-html: "npm:^3.3.0" + checksum: 10/0760140f9cf7eb71e327f04d51a41e3ae4c3fca2ddccca05fa3458d67124a2008044ef3d3812d021e2297ba8b3af7c06fa56b03860877bc09567c334b9d390ad languageName: node linkType: hard -"lit-html@npm:2.8.0": - version: 2.8.0 - resolution: "lit-html@npm:2.8.0" +"lit-html@npm:3.3.0": + version: 3.3.0 + resolution: "lit-html@npm:3.3.0" dependencies: "@types/trusted-types": "npm:^2.0.2" - checksum: 10/3503e55e2927c2ff94773cf041fc4128f92291869c9192f36eacb7f95132d11f6b329e5b910ab60a4456349cd2e6d23b33d83291b24d557bcd6b904d6314ac1a + checksum: 10/667992d927e841d9e74cf615e3556edcdc71392953d3eaf963187b4f0159e52ec7826331a650456f1c573a461f71e6c41da36b8efacef1dffc6cce07e548d8b0 languageName: node linkType: hard @@ -10994,14 +10934,14 @@ __metadata: languageName: node linkType: hard -"lit@npm:2.8.0": - version: 2.8.0 - resolution: "lit@npm:2.8.0" +"lit@npm:3.3.0": + version: 3.3.0 + resolution: "lit@npm:3.3.0" dependencies: - "@lit/reactive-element": "npm:^1.6.0" - lit-element: "npm:^3.3.0" - lit-html: "npm:^2.8.0" - checksum: 10/aa64c1136b855ba328d41157dba67657d480345aeec3c1dd829abeb67719d759c9ff2ade9903f9cfb4f9d012b16087034aaa5b33f1182e70c615765562e3251b + "@lit/reactive-element": "npm:^2.1.0" + lit-element: "npm:^4.2.0" + lit-html: "npm:^3.3.0" + checksum: 10/442b8eabd5d1b4aee0ab34db0b67d5c07a988f30d345f4a68263275acf826816ba30937bb8d5d331dc260c2127cd8953f332dcc45edbf080d61c21291cb06330 languageName: node linkType: hard