From 9f032a61a9dd308a263dc5c990782aba50ded1d7 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Fri, 7 May 2021 22:16:14 +0200 Subject: [PATCH] Add compatibility for Lit 2.0 (#8878) --- cast/src/launcher/layout/hc-cast.ts | 10 +-- cast/src/launcher/layout/hc-connect.ts | 18 ++-- cast/src/launcher/layout/hc-layout.ts | 4 +- cast/src/receiver/layout/hc-demo.ts | 4 +- cast/src/receiver/layout/hc-launch-screen.ts | 4 +- cast/src/receiver/layout/hc-lovelace.ts | 4 +- cast/src/receiver/layout/hc-main.ts | 15 ++-- demo/src/custom-cards/cast-demo-row.ts | 8 +- demo/src/custom-cards/ha-demo-card.ts | 8 +- gallery/src/demos/demo-automation-trace.ts | 4 +- gallery/src/demos/demo-integration-card.ts | 6 +- .../addon-store/hassio-addon-repository.ts | 4 +- hassio/src/addon-store/hassio-addon-store.ts | 8 +- .../addon-view/config/hassio-addon-audio.ts | 16 ++-- .../config/hassio-addon-config-tab.ts | 4 +- .../addon-view/config/hassio-addon-config.ts | 16 ++-- .../addon-view/config/hassio-addon-network.ts | 10 +-- .../hassio-addon-documentation-tab.ts | 10 +-- .../src/addon-view/hassio-addon-dashboard.ts | 8 +- .../addon-view/info/hassio-addon-info-tab.ts | 4 +- .../src/addon-view/info/hassio-addon-info.ts | 10 +-- .../addon-view/log/hassio-addon-log-tab.ts | 4 +- .../src/addon-view/log/hassio-addon-logs.ts | 10 +-- hassio/src/components/hassio-ansi-to-html.ts | 4 +- hassio/src/components/hassio-card-content.ts | 4 +- .../src/components/hassio-upload-snapshot.ts | 6 +- hassio/src/components/supervisor-metric.ts | 4 +- hassio/src/dashboard/hassio-addons.ts | 4 +- hassio/src/dashboard/hassio-dashboard.ts | 4 +- hassio/src/dashboard/hassio-update.ts | 4 +- .../markdown/dialog-hassio-markdown.ts | 8 +- .../dialogs/network/dialog-hassio-network.ts | 24 ++--- .../registries/dialog-hassio-registries.ts | 16 ++-- .../dialog-hassio-repositories.ts | 16 ++-- .../snapshot/dialog-hassio-snapshot-upload.ts | 8 +- .../snapshot/dialog-hassio-snapshot.ts | 22 ++--- .../update/dialog-supervisor-update.ts | 16 ++-- hassio/src/hassio-my-redirect.ts | 4 +- hassio/src/hassio-panel.ts | 4 +- .../src/ingress-view/hassio-ingress-view.ts | 8 +- hassio/src/snapshots/hassio-snapshots.ts | 22 ++--- hassio/src/supervisor-base-element.ts | 16 +--- hassio/src/system/hassio-core-info.ts | 8 +- hassio/src/system/hassio-host-info.ts | 4 +- hassio/src/system/hassio-supervisor-info.ts | 8 +- hassio/src/system/hassio-supervisor-log.ts | 12 +-- hassio/src/system/hassio-system.ts | 4 +- package.json | 8 +- src/auth/ha-auth-flow.ts | 14 +-- src/auth/ha-authorize.ts | 12 +-- src/common/decorators/local-storage.ts | 10 +-- src/common/dom/dynamic-element-directive.ts | 53 +++++++---- src/common/search/search-input.ts | 4 +- src/components/buttons/ha-call-api-button.ts | 11 ++- src/components/buttons/ha-progress-button.ts | 4 +- src/components/data-table/ha-data-table.ts | 20 ++--- src/components/date-range-picker.ts | 1 - .../device/ha-area-devices-picker.ts | 14 +-- .../device/ha-device-automation-picker.ts | 10 +-- src/components/device/ha-device-picker.ts | 8 +- .../entity/ha-entity-attribute-picker.ts | 4 +- src/components/entity/ha-entity-picker.ts | 4 +- src/components/entity/ha-entity-toggle.ts | 8 +- src/components/entity/ha-state-label-badge.ts | 89 +++++++++++-------- src/components/entity/state-badge.ts | 8 +- src/components/entity/state-info.ts | 4 +- src/components/ha-addon-picker.ts | 4 +- src/components/ha-analytics.ts | 4 +- src/components/ha-area-picker.ts | 14 +-- src/components/ha-attributes.ts | 4 +- src/components/ha-bar.ts | 4 +- src/components/ha-blueprint-picker.ts | 4 +- src/components/ha-button-menu.ts | 4 +- .../ha-button-related-filter-menu.ts | 8 +- src/components/ha-button-toggle-group.ts | 4 +- src/components/ha-camera-stream.ts | 10 +-- src/components/ha-card.ts | 4 +- src/components/ha-chip-set.ts | 4 +- src/components/ha-chip.ts | 4 +- src/components/ha-climate-state.ts | 4 +- src/components/ha-code-editor.ts | 39 +++++--- src/components/ha-combo-box.ts | 8 +- src/components/ha-cover-controls.ts | 8 +- src/components/ha-cover-tilt-controls.ts | 8 +- src/components/ha-date-input.ts | 4 +- src/components/ha-date-range-picker.ts | 4 +- src/components/ha-dialog.ts | 4 +- src/components/ha-expansion-panel.ts | 4 +- src/components/ha-file-upload.ts | 4 +- src/components/ha-form/ha-form-boolean.ts | 4 +- src/components/ha-form/ha-form-constant.ts | 4 +- src/components/ha-form/ha-form-integer.ts | 4 +- .../ha-form/ha-form-multi_select.ts | 8 +- src/components/ha-form/ha-form-select.ts | 4 +- src/components/ha-form/ha-form-string.ts | 8 +- src/components/ha-form/ha-form.ts | 4 +- src/components/ha-formfield.ts | 4 +- src/components/ha-gauge.ts | 6 +- src/components/ha-hls-player.ts | 8 +- src/components/ha-icon-button-arrow-next.ts | 4 +- src/components/ha-icon-button-arrow-prev.ts | 4 +- src/components/ha-icon-button-next.ts | 4 +- src/components/ha-icon-button-prev.ts | 4 +- src/components/ha-icon-button.ts | 11 +-- src/components/ha-icon.ts | 12 +-- src/components/ha-label-badge.ts | 4 +- src/components/ha-markdown-element.ts | 19 ++-- src/components/ha-markdown.ts | 4 +- src/components/ha-menu-button.ts | 8 +- src/components/ha-picture-upload.ts | 4 +- src/components/ha-related-items.ts | 14 +-- src/components/ha-relative-time.ts | 8 +- .../ha-selector/ha-selector-action.ts | 4 +- .../ha-selector/ha-selector-area.ts | 10 +-- .../ha-selector/ha-selector-boolean.ts | 4 +- .../ha-selector/ha-selector-device.ts | 10 +-- .../ha-selector/ha-selector-entity.ts | 10 +-- .../ha-selector/ha-selector-number.ts | 4 +- .../ha-selector/ha-selector-select.ts | 4 +- .../ha-selector/ha-selector-target.ts | 10 +-- src/components/ha-service-control.ts | 10 +-- src/components/ha-service-picker.ts | 4 +- src/components/ha-settings-row.ts | 4 +- src/components/ha-sidebar.ts | 15 ++-- src/components/ha-svg-icon.ts | 4 +- src/components/ha-switch.ts | 4 +- src/components/ha-tab.ts | 8 +- src/components/ha-target-picker.ts | 14 +-- src/components/ha-yaml-editor.ts | 4 +- src/components/map/ha-location-editor.ts | 4 +- src/components/map/ha-locations-editor.ts | 4 +- src/components/map/ha-map.ts | 4 +- .../dialog-media-player-browse.ts | 16 ++-- .../media-player/ha-media-player-browse.ts | 12 +-- src/components/state-history-charts.ts | 4 +- src/components/trace/ha-timeline.ts | 4 +- src/components/trace/hat-trace-timeline.ts | 4 +- src/components/user/ha-person-badge.ts | 4 +- src/components/user/ha-user-badge.ts | 14 +-- src/components/user/ha-user-picker.ts | 4 +- src/components/user/ha-users-picker.ts | 4 +- .../dialog-config-entry-system-options.ts | 16 ++-- .../config-flow/dialog-data-entry-flow.ts | 22 ++--- src/dialogs/config-flow/step-flow-abort.ts | 4 +- .../config-flow/step-flow-create-entry.ts | 4 +- src/dialogs/config-flow/step-flow-external.ts | 4 +- src/dialogs/config-flow/step-flow-form.ts | 4 +- src/dialogs/config-flow/step-flow-loading.ts | 4 +- .../config-flow/step-flow-pick-flow.ts | 4 +- .../config-flow/step-flow-pick-handler.ts | 8 +- src/dialogs/config-flow/step-flow-progress.ts | 4 +- .../domain-toggler/dialog-domain-toggler.ts | 8 +- src/dialogs/generic/dialog-box.ts | 10 +-- .../image-cropper-dialog.ts | 10 +-- .../controls/more-info-automation.ts | 4 +- .../more-info/controls/more-info-camera.ts | 10 +-- .../more-info/controls/more-info-climate.ts | 4 +- .../more-info/controls/more-info-counter.ts | 4 +- .../more-info/controls/more-info-group.ts | 22 ++--- .../controls/more-info-humidifier.ts | 4 +- .../more-info/controls/more-info-light.ts | 28 +++--- .../controls/more-info-media_player.ts | 4 +- .../more-info/controls/more-info-person.ts | 4 +- .../more-info/controls/more-info-remote.ts | 4 +- .../more-info/controls/more-info-script.ts | 4 +- .../more-info/controls/more-info-sun.ts | 4 +- .../more-info/controls/more-info-timer.ts | 4 +- .../more-info/controls/more-info-vacuum.ts | 4 +- .../more-info/controls/more-info-weather.ts | 4 +- src/dialogs/more-info/ha-more-info-dialog.ts | 6 +- src/dialogs/more-info/ha-more-info-history.ts | 4 +- src/dialogs/more-info/ha-more-info-logbook.ts | 8 +- src/dialogs/more-info/more-info-content.ts | 8 +- .../notification-item-template.ts | 4 +- .../persistent-notification-item.ts | 4 +- src/dialogs/quick-bar/ha-quick-bar.ts | 16 ++-- .../ha-voice-command-dialog.ts | 12 +-- src/entrypoints/custom-panel.ts | 3 +- src/layouts/ha-init-page.ts | 4 +- src/layouts/hass-error-screen.ts | 4 +- src/layouts/hass-loading-screen.ts | 4 +- src/layouts/hass-router-page.ts | 8 +- src/layouts/hass-subpage.ts | 4 +- src/layouts/hass-tabs-subpage-data-table.ts | 4 +- src/layouts/hass-tabs-subpage.ts | 8 +- src/layouts/home-assistant-main.ts | 8 +- src/layouts/home-assistant.ts | 13 +-- src/layouts/supervisor-error-screen.ts | 4 +- src/managers/notification-manager.ts | 10 +-- src/mixins/provide-hass-lit-mixin.ts | 4 +- src/mixins/subscribe-mixin.ts | 4 +- src/onboarding/action-badge.ts | 4 +- src/onboarding/ha-onboarding.ts | 10 +-- src/onboarding/integration-badge.ts | 4 +- src/onboarding/onboarding-analytics.ts | 10 +-- src/onboarding/onboarding-core-config.ts | 18 ++-- src/onboarding/onboarding-create-user.ts | 18 ++-- src/onboarding/onboarding-integrations.ts | 10 +-- src/onboarding/onboarding-loading.ts | 4 +- src/onboarding/onboarding-restore-snapshot.ts | 4 +- src/panels/calendar/ha-full-calendar.ts | 10 +-- src/panels/calendar/ha-panel-calendar.ts | 10 +-- .../areas/dialog-area-registry-detail.ts | 14 +-- .../config/areas/ha-config-area-page.ts | 44 ++++----- .../config/areas/ha-config-areas-dashboard.ts | 4 +- src/panels/config/areas/ha-config-areas.ts | 15 ++-- .../action/ha-automation-action-row.ts | 12 +-- .../automation/action/ha-automation-action.ts | 4 +- .../types/ha-automation-action-choose.ts | 4 +- .../types/ha-automation-action-device_id.ts | 12 +-- .../types/ha-automation-action-repeat.ts | 9 +- .../types/ha-automation-action-service.ts | 8 +- .../automation/blueprint-automation-editor.ts | 8 +- .../ha-automation-condition-editor.ts | 4 +- .../condition/ha-automation-condition-row.ts | 8 +- .../condition/ha-automation-condition.ts | 4 +- .../types/ha-automation-condition-device.ts | 12 +-- .../types/ha-automation-condition-time.ts | 10 +-- .../automation/dialog-new-automation.ts | 8 +- .../config/automation/ha-automation-editor.ts | 16 ++-- .../config/automation/ha-automation-picker.ts | 10 +-- .../automation/manual-automation-editor.ts | 4 +- .../automation/thingtalk/dialog-thingtalk.ts | 16 ++-- .../thingtalk/ha-thingtalk-placeholders.ts | 16 ++-- .../trace/ha-automation-trace-config.ts | 4 +- .../trace/ha-automation-trace-logbook.ts | 4 +- .../trace/ha-automation-trace-path-details.ts | 11 +-- .../trace/ha-automation-trace-timeline.ts | 4 +- .../automation/trace/ha-automation-trace.ts | 20 ++--- .../trigger/ha-automation-trigger-row.ts | 8 +- .../trigger/ha-automation-trigger.ts | 4 +- .../types/ha-automation-trigger-device.ts | 12 +-- .../types/ha-automation-trigger-tag.ts | 4 +- .../types/ha-automation-trigger-time.ts | 10 +-- .../blueprint/dialog-import-blueprint.ts | 18 ++-- .../config/blueprint/ha-blueprint-overview.ts | 4 +- .../config/cloud/account/cloud-alexa-pref.ts | 8 +- .../config/cloud/account/cloud-google-pref.ts | 4 +- .../config/cloud/account/cloud-remote-pref.ts | 4 +- .../config/cloud/account/cloud-tts-pref.ts | 10 +-- .../config/cloud/account/cloud-webhooks.ts | 12 +-- .../cloud/account/dialog-cloud-tts-try.ts | 10 +-- src/panels/config/cloud/alexa/cloud-alexa.ts | 8 +- .../dialog-cloud-certificate.ts | 4 +- .../dialog-manage-cloudhook.ts | 12 +-- .../cloud-google-assistant.ts | 8 +- src/panels/config/cloud/ha-config-cloud.ts | 6 +- src/panels/config/core/ha-config-analytics.ts | 10 +-- src/panels/config/core/ha-config-core-form.ts | 16 ++-- src/panels/config/core/ha-config-name-form.ts | 6 +- src/panels/config/core/ha-config-url-form.ts | 14 +-- .../config/customize/ha-config-customize.ts | 4 +- .../config/dashboard/ha-config-dashboard.ts | 4 +- .../config/dashboard/ha-config-navigation.ts | 4 +- .../ha-device-automation-card.ts | 4 +- .../ha-device-automation-dialog.ts | 14 +-- .../device-detail/ha-device-entities-card.ts | 4 +- .../device-detail/ha-device-info-card.ts | 4 +- .../mqtt/dialog-mqtt-device-debug-info.ts | 14 +-- .../mqtt/ha-device-actions-mqtt.ts | 4 +- .../mqtt/mqtt-discovery-payload.ts | 8 +- .../mqtt/mqtt-messages.ts | 12 +-- .../ozw/ha-device-actions-ozw.ts | 4 +- .../ozw/ha-device-info-ozw.ts | 8 +- .../tasmota/ha-device-actions-tasmota.ts | 4 +- .../zha/ha-device-actions-zha.ts | 8 +- .../zha/ha-device-info-zha.ts | 8 +- .../zwave_js/ha-device-actions-zwave_js.ts | 10 +-- .../zwave_js/ha-device-info-zwave_js.ts | 14 +-- .../dialog-device-registry-detail.ts | 18 ++-- .../config/devices/ha-config-device-page.ts | 53 +++++------ .../devices/ha-config-devices-dashboard.ts | 16 ++-- .../config/devices/ha-config-devices.ts | 15 ++-- .../config/entities/dialog-entity-editor.ts | 19 ++-- .../settings/entity-settings-helper-tab.ts | 14 +-- .../entities/entity-registry-basic-editor.ts | 14 +-- .../entities/entity-registry-settings.ts | 22 ++--- .../config/entities/ha-config-entities.ts | 30 +++---- src/panels/config/ha-entity-config.ts | 4 +- src/panels/config/ha-panel-config.ts | 13 +-- .../config/helpers/dialog-helper-detail.ts | 16 ++-- .../config/helpers/forms/ha-counter-form.ts | 20 ++--- .../helpers/forms/ha-input_boolean-form.ts | 10 +-- .../helpers/forms/ha-input_datetime-form.ts | 12 +-- .../helpers/forms/ha-input_number-form.ts | 20 ++--- .../helpers/forms/ha-input_select-form.ts | 12 +-- .../helpers/forms/ha-input_text-form.ts | 18 ++-- .../config/helpers/forms/ha-timer-form.ts | 12 +-- .../config/helpers/ha-config-helpers.ts | 18 ++-- src/panels/config/info/ha-config-info.ts | 4 +- src/panels/config/info/integrations-card.ts | 10 +-- src/panels/config/info/system-health-card.ts | 8 +- .../integrations/ha-config-integrations.ts | 22 ++--- .../integrations/ha-integration-card.ts | 4 +- .../mqtt/mqtt-config-panel.ts | 10 +-- .../mqtt/mqtt-subscribe-card.ts | 12 +-- .../ozw/dialog-ozw-refresh-node.ts | 18 ++-- .../ozw/ozw-config-dashboard.ts | 8 +- .../ozw/ozw-network-dashboard.ts | 14 +-- .../ozw/ozw-network-nodes.ts | 8 +- .../integration-panels/ozw/ozw-node-config.ts | 14 +-- .../ozw/ozw-node-dashboard.ts | 12 +-- .../zha/dialog-zha-cluster.ts | 14 +-- .../zha/dialog-zha-device-children.ts | 10 +-- .../zha/dialog-zha-device-zigbee-info.ts | 8 +- .../zha/dialog-zha-reconfigure-device.ts | 18 ++-- .../zha/zha-add-devices-page.ts | 21 ++--- .../zha/zha-add-group-page.ts | 10 +-- .../zha/zha-cluster-attributes.ts | 16 ++-- .../zha/zha-cluster-commands.ts | 16 ++-- .../integration-panels/zha/zha-clusters.ts | 10 +-- .../zha/zha-config-dashboard.ts | 4 +- .../zha/zha-device-binding.ts | 14 +-- .../integration-panels/zha/zha-device-card.ts | 8 +- .../zha/zha-device-endpoint-data-table.ts | 4 +- .../zha/zha-device-pairing-status-card.ts | 8 +- .../zha/zha-group-binding.ts | 16 ++-- .../integration-panels/zha/zha-group-page.ts | 16 ++-- .../zha/zha-groups-dashboard.ts | 4 +- .../zha/zha-network-visualization-page.ts | 16 ++-- .../zwave/zwave-migration.ts | 20 ++--- .../integration-panels/zwave/zwave-network.ts | 12 +-- .../zwave/zwave-node-config.ts | 22 ++--- .../integration-panels/zwave/zwave-values.ts | 8 +- .../zwave_js/dialog-zwave_js-add-node.ts | 14 +-- .../dialog-zwave_js-reinterview-node.ts | 10 +-- .../zwave_js/dialog-zwave_js-remove-node.ts | 12 +-- .../zwave_js/zwave_js-config-dashboard.ts | 16 ++-- .../zwave_js/zwave_js-logs.ts | 4 +- .../zwave_js/zwave_js-node-config.ts | 19 ++-- .../config/logs/dialog-system-log-detail.ts | 10 +-- src/panels/config/logs/error-log-card.ts | 8 +- src/panels/config/logs/ha-config-logs.ts | 4 +- src/panels/config/logs/system-log-card.ts | 8 +- .../dialog-lovelace-dashboard-detail.ts | 22 ++--- .../ha-config-lovelace-dashboards.ts | 4 +- .../dialog-lovelace-resource-detail.ts | 16 ++-- .../resources/ha-config-lovelace-resources.ts | 4 +- .../config/person/dialog-person-detail.ts | 26 +++--- src/panels/config/person/ha-config-person.ts | 10 +-- src/panels/config/scene/ha-scene-dashboard.ts | 10 +-- src/panels/config/scene/ha-scene-editor.ts | 36 ++++---- src/panels/config/script/ha-script-editor.ts | 18 ++-- src/panels/config/script/ha-script-picker.ts | 10 +-- .../ha-config-server-control.ts | 10 +-- src/panels/config/tags/dialog-tag-detail.ts | 18 ++-- src/panels/config/tags/ha-config-tags.ts | 6 +- src/panels/config/tags/tag-image.ts | 4 +- src/panels/config/users/dialog-add-user.ts | 24 ++--- src/panels/config/users/dialog-user-detail.ts | 18 ++-- src/panels/config/zone/dialog-zone-detail.ts | 24 ++--- src/panels/config/zone/ha-config-zone.ts | 69 +++++++------- src/panels/custom/ha-panel-custom.ts | 8 +- .../event/event-subscribe-card.ts | 12 +-- .../ha-panel-developer-tools.ts | 4 +- .../service/developer-tools-service.ts | 8 +- .../template/developer-tools-template.ts | 14 +-- src/panels/history/ha-panel-history.ts | 10 +-- src/panels/logbook/ha-logbook.ts | 4 +- src/panels/logbook/ha-panel-logbook.ts | 8 +- .../badges/hui-entity-filter-badge.ts | 15 ++-- src/panels/lovelace/badges/hui-error-badge.ts | 8 +- .../lovelace/badges/hui-state-label-badge.ts | 4 +- .../lovelace/cards/hui-alarm-panel-card.ts | 28 +++--- src/panels/lovelace/cards/hui-button-card.ts | 10 +-- .../lovelace/cards/hui-calendar-card.ts | 14 +-- .../lovelace/cards/hui-empty-state-card.ts | 4 +- .../lovelace/cards/hui-entities-card.ts | 8 +- src/panels/lovelace/cards/hui-entity-card.ts | 8 +- .../lovelace/cards/hui-entity-filter-card.ts | 15 ++-- src/panels/lovelace/cards/hui-error-card.ts | 8 +- src/panels/lovelace/cards/hui-gauge-card.ts | 14 +-- src/panels/lovelace/cards/hui-glance-card.ts | 8 +- src/panels/lovelace/cards/hui-grid-card.ts | 4 +- .../lovelace/cards/hui-history-graph-card.ts | 10 +-- .../cards/hui-horizontal-stack-card.ts | 4 +- .../lovelace/cards/hui-humidifier-card.ts | 10 +-- src/panels/lovelace/cards/hui-iframe-card.ts | 4 +- src/panels/lovelace/cards/hui-light-card.ts | 8 +- src/panels/lovelace/cards/hui-logbook-card.ts | 14 +-- src/panels/lovelace/cards/hui-map-card.ts | 4 +- .../lovelace/cards/hui-markdown-card.ts | 12 +-- .../lovelace/cards/hui-media-control-card.ts | 33 +++---- src/panels/lovelace/cards/hui-picture-card.ts | 4 +- .../cards/hui-picture-elements-card.ts | 10 +-- .../lovelace/cards/hui-picture-entity-card.ts | 14 +-- .../lovelace/cards/hui-picture-glance-card.ts | 8 +- .../lovelace/cards/hui-plant-status-card.ts | 8 +- .../lovelace/cards/hui-safe-mode-card.ts | 4 +- .../lovelace/cards/hui-shopping-list-card.ts | 16 ++-- src/panels/lovelace/cards/hui-stack-card.ts | 8 +- .../lovelace/cards/hui-starting-card.ts | 4 +- .../lovelace/cards/hui-thermostat-card.ts | 10 +-- .../lovelace/cards/hui-vertical-stack-card.ts | 4 +- .../cards/hui-weather-forecast-card.ts | 8 +- .../directives/action-handler-directive.ts | 28 ++++-- .../lovelace/components/hui-action-editor.ts | 4 +- .../lovelace/components/hui-buttons-base.ts | 4 +- .../lovelace/components/hui-card-options.ts | 4 +- .../components/hui-conditional-base.ts | 8 +- .../components/hui-entities-toggle.ts | 8 +- .../lovelace/components/hui-entity-editor.ts | 10 +-- .../components/hui-generic-entity-row.ts | 4 +- .../lovelace/components/hui-graph-base.ts | 8 +- src/panels/lovelace/components/hui-image.ts | 20 ++--- .../components/hui-input-list-editor.ts | 4 +- src/panels/lovelace/components/hui-marquee.ts | 4 +- .../components/hui-theme-select-editor.ts | 4 +- .../components/hui-timestamp-display.ts | 4 +- .../lovelace/components/hui-views-list.ts | 10 +-- .../components/hui-warning-element.ts | 4 +- src/panels/lovelace/components/hui-warning.ts | 4 +- .../editor/card-editor/hui-card-picker.ts | 14 +-- .../editor/card-editor/hui-card-preview.ts | 8 +- .../card-editor/hui-dialog-create-card.ts | 14 +-- .../card-editor/hui-dialog-delete-card.ts | 10 +-- .../card-editor/hui-dialog-edit-card.ts | 24 ++--- .../card-editor/hui-dialog-suggest-card.ts | 12 +-- .../card-editor/hui-entity-picker-table.ts | 4 +- .../hui-alarm-panel-card-editor.ts | 16 ++-- .../config-elements/hui-button-card-editor.ts | 8 +- .../hui-calendar-card-editor.ts | 8 +- .../hui-conditional-card-editor.ts | 14 +-- .../hui-entities-card-editor.ts | 12 +-- .../config-elements/hui-entity-card-editor.ts | 8 +- .../config-elements/hui-gauge-card-editor.ts | 8 +- .../hui-generic-entity-row-editor.ts | 8 +- .../config-elements/hui-glance-card-editor.ts | 10 +-- .../hui-graph-footer-editor.ts | 8 +- .../hui-history-graph-card-editor.ts | 10 +-- .../hui-humidifier-card-editor.ts | 8 +- .../config-elements/hui-iframe-card-editor.ts | 8 +- .../config-elements/hui-light-card-editor.ts | 8 +- .../hui-logbook-card-editor.ts | 10 +-- .../config-elements/hui-map-card-editor.ts | 10 +-- .../hui-markdown-card-editor.ts | 8 +- .../hui-media-control-card-editor.ts | 4 +- .../hui-picture-card-editor.ts | 8 +- .../hui-picture-entity-card-editor.ts | 8 +- .../hui-picture-glance-card-editor.ts | 10 +-- .../hui-plant-status-card-editor.ts | 8 +- .../config-elements/hui-sensor-card-editor.ts | 8 +- .../hui-shopping-list-editor.ts | 8 +- .../config-elements/hui-stack-card-editor.ts | 14 +-- .../hui-thermostat-card-editor.ts | 8 +- .../hui-weather-forecast-card-editor.ts | 8 +- .../hui-dialog-create-headerfooter.ts | 8 +- .../hui-header-footer-editor.ts | 4 +- .../lovelace/editor/hui-dialog-save-config.ts | 12 +-- .../lovelace/editor/hui-element-editor.ts | 24 ++--- .../editor/hui-entities-card-row-editor.ts | 10 +-- .../lovelace/editor/hui-sub-element-editor.ts | 10 +-- .../hui-dialog-edit-lovelace.ts | 8 +- .../lovelace-editor/hui-lovelace-editor.ts | 4 +- .../select-view/hui-dialog-select-view.ts | 14 +-- .../unused-entities/hui-unused-entities.ts | 10 +-- .../view-editor/hui-dialog-edit-view.ts | 18 ++-- .../editor/view-editor/hui-view-editor.ts | 8 +- .../view-editor/hui-view-visibility-editor.ts | 10 +-- .../lovelace/elements/hui-icon-element.ts | 8 +- .../lovelace/elements/hui-image-element.ts | 8 +- .../elements/hui-service-button-element.ts | 8 +- .../elements/hui-state-badge-element.ts | 4 +- .../elements/hui-state-icon-element.ts | 8 +- .../elements/hui-state-label-element.ts | 8 +- .../entity-rows/hui-climate-entity-row.ts | 8 +- .../entity-rows/hui-cover-entity-row.ts | 8 +- .../entity-rows/hui-group-entity-row.ts | 4 +- .../hui-input-datetime-entity-row.ts | 4 +- .../hui-input-number-entity-row.ts | 8 +- .../hui-input-select-entity-row.ts | 8 +- .../entity-rows/hui-input-text-entity-row.ts | 8 +- .../entity-rows/hui-lock-entity-row.ts | 8 +- .../hui-media-player-entity-row.ts | 35 ++++---- .../entity-rows/hui-number-entity-row.ts | 8 +- .../entity-rows/hui-scene-entity-row.ts | 8 +- .../entity-rows/hui-script-entity-row.ts | 8 +- .../entity-rows/hui-sensor-entity-row.ts | 8 +- .../entity-rows/hui-text-entity-row.ts | 8 +- .../entity-rows/hui-timer-entity-row.ts | 6 +- .../entity-rows/hui-toggle-entity-row.ts | 4 +- .../entity-rows/hui-weather-entity-row.ts | 8 +- src/panels/lovelace/ha-panel-lovelace.ts | 36 ++++---- .../hui-buttons-header-footer.ts | 4 +- .../header-footer/hui-graph-header-footer.ts | 8 +- .../hui-picture-header-footer.ts | 4 +- src/panels/lovelace/hui-editor.ts | 10 +-- src/panels/lovelace/hui-root.ts | 8 +- .../special-rows/hui-attribute-row.ts | 8 +- .../lovelace/special-rows/hui-button-row.ts | 8 +- .../lovelace/special-rows/hui-buttons-row.ts | 4 +- .../lovelace/special-rows/hui-cast-row.ts | 12 +-- .../lovelace/special-rows/hui-divider-row.ts | 8 +- .../lovelace/special-rows/hui-section-row.ts | 8 +- .../lovelace/special-rows/hui-text-row.ts | 8 +- .../lovelace/special-rows/hui-weblink-row.ts | 8 +- src/panels/lovelace/views/hui-masonry-view.ts | 8 +- src/panels/lovelace/views/hui-panel-view.ts | 11 +-- src/panels/lovelace/views/hui-view.ts | 14 +-- .../media-browser/ha-panel-media-browser.ts | 4 +- .../hui-dialog-select-media-player.ts | 4 +- .../hui-dialog-web-browser-play-media.ts | 4 +- src/panels/my/ha-panel-my.ts | 10 +-- .../dialog-ha-mfa-module-setup-flow.ts | 20 ++--- src/panels/profile/ha-advanced-mode-row.ts | 4 +- src/panels/profile/ha-change-password-card.ts | 18 ++-- .../ha-long-lived-access-tokens-card.ts | 4 +- src/panels/profile/ha-mfa-modules-card.ts | 4 +- src/panels/profile/ha-panel-profile.ts | 10 +-- src/panels/profile/ha-pick-dashboard-row.ts | 4 +- src/panels/profile/ha-pick-theme-row.ts | 10 +-- src/panels/profile/ha-refresh-tokens-card.ts | 4 +- .../shopping-list/ha-panel-shopping-list.ts | 8 +- src/state-summary/state-card-display.ts | 4 +- src/state-summary/state-card-input_select.ts | 4 +- src/state-summary/state-card-script.ts | 6 +- src/state/quick-bar-mixin.ts | 4 +- src/state/url-sync-mixin.ts | 4 +- src/styles/polymer-ha-style-dialog.ts | 3 +- src/styles/polymer-ha-style.ts | 3 +- yarn.lock | 16 ++-- 521 files changed, 2512 insertions(+), 2510 deletions(-) diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index c91e38f2af..fdb2b64432 100644 --- a/cast/src/launcher/layout/hc-cast.ts +++ b/cast/src/launcher/layout/hc-cast.ts @@ -3,12 +3,12 @@ import "@polymer/paper-listbox/paper-listbox"; import { Auth, Connection } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, property, - internalProperty, + state, TemplateResult, } from "lit-element"; import { CastManager } from "../../../../src/cast/cast_manager"; @@ -42,9 +42,9 @@ class HcCast extends LitElement { @property() public castManager!: CastManager; - @internalProperty() private askWrite = false; + @state() private askWrite = false; - @internalProperty() private lovelaceConfig?: LovelaceConfig | null; + @state() private lovelaceConfig?: LovelaceConfig | null; protected render(): TemplateResult { if (this.lovelaceConfig === undefined) { @@ -204,7 +204,7 @@ class HcCast extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .center-item { display: flex; diff --git a/cast/src/launcher/layout/hc-connect.ts b/cast/src/launcher/layout/hc-connect.ts index 518c582f2c..c546e5bef5 100644 --- a/cast/src/launcher/layout/hc-connect.ts +++ b/cast/src/launcher/layout/hc-connect.ts @@ -13,12 +13,12 @@ import { } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, TemplateResult, - internalProperty, + state, } from "lit-element"; import { CastManager, getCastManager } from "../../../../src/cast/cast_manager"; import { castSendShowDemo } from "../../../../src/cast/receiver_messages"; @@ -60,19 +60,19 @@ const INTRO = html` @customElement("hc-connect") export class HcConnect extends LitElement { - @internalProperty() private loading = false; + @state() private loading = false; // If we had stored credentials but we cannot connect, // show a screen asking retry or logout. - @internalProperty() private cannotConnect = false; + @state() private cannotConnect = false; - @internalProperty() private error?: string | TemplateResult; + @state() private error?: string | TemplateResult; - @internalProperty() private auth?: Auth; + @state() private auth?: Auth; - @internalProperty() private connection?: Connection; + @state() private connection?: Connection; - @internalProperty() private castManager?: CastManager | null; + @state() private castManager?: CastManager | null; private openDemo = false; @@ -297,7 +297,7 @@ export class HcConnect extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .card-content a { color: var(--primary-color); diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts index 76a3af25ef..a505d926a2 100644 --- a/cast/src/launcher/layout/hc-layout.ts +++ b/cast/src/launcher/layout/hc-layout.ts @@ -6,7 +6,7 @@ import { } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -69,7 +69,7 @@ class HcLayout extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/cast/src/receiver/layout/hc-demo.ts b/cast/src/receiver/layout/hc-demo.ts index b4ddc41a67..1929812157 100644 --- a/cast/src/receiver/layout/hc-demo.ts +++ b/cast/src/receiver/layout/hc-demo.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, property, TemplateResult, } from "lit-element"; @@ -21,7 +21,7 @@ import "./hc-lovelace"; class HcDemo extends HassElement { @property({ attribute: false }) public lovelacePath!: string; - @internalProperty() private _lovelaceConfig?: LovelaceConfig; + @state() private _lovelaceConfig?: LovelaceConfig; protected render(): TemplateResult { if (!this._lovelaceConfig) { diff --git a/cast/src/receiver/layout/hc-launch-screen.ts b/cast/src/receiver/layout/hc-launch-screen.ts index 603f70f655..53fe4476c2 100644 --- a/cast/src/receiver/layout/hc-launch-screen.ts +++ b/cast/src/receiver/layout/hc-launch-screen.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -29,7 +29,7 @@ class HcLaunchScreen extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/cast/src/receiver/layout/hc-lovelace.ts b/cast/src/receiver/layout/hc-lovelace.ts index ba94b42394..3115b474c6 100644 --- a/cast/src/receiver/layout/hc-lovelace.ts +++ b/cast/src/receiver/layout/hc-lovelace.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -91,7 +91,7 @@ class HcLovelace extends LitElement { return undefined; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { min-height: 100vh; diff --git a/cast/src/receiver/layout/hc-main.ts b/cast/src/receiver/layout/hc-main.ts index e8623dfa65..567d4de8b5 100644 --- a/cast/src/receiver/layout/hc-main.ts +++ b/cast/src/receiver/layout/hc-main.ts @@ -3,12 +3,7 @@ import { getAuth, UnsubscribeFunc, } from "home-assistant-js-websocket"; -import { - customElement, - html, - internalProperty, - TemplateResult, -} from "lit-element"; +import { customElement, html, state, TemplateResult } from "lit-element"; import { CAST_NS } from "../../../../src/cast/const"; import { ConnectMessage, @@ -36,13 +31,13 @@ let resourcesLoaded = false; @customElement("hc-main") export class HcMain extends HassElement { - @internalProperty() private _showDemo = false; + @state() private _showDemo = false; - @internalProperty() private _lovelaceConfig?: LovelaceConfig; + @state() private _lovelaceConfig?: LovelaceConfig; - @internalProperty() private _lovelacePath: string | number | null = null; + @state() private _lovelacePath: string | number | null = null; - @internalProperty() private _error?: string; + @state() private _error?: string; private _unsubLovelace?: UnsubscribeFunc; diff --git a/demo/src/custom-cards/cast-demo-row.ts b/demo/src/custom-cards/cast-demo-row.ts index ea0f3033a3..01f804a8af 100644 --- a/demo/src/custom-cards/cast-demo-row.ts +++ b/demo/src/custom-cards/cast-demo-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -20,7 +20,7 @@ import { HomeAssistant } from "../../../src/types"; class CastDemoRow extends LitElement implements LovelaceRow { public hass!: HomeAssistant; - @internalProperty() private _castManager?: CastManager | null; + @state() private _castManager?: CastManager | null; public setConfig(_config: CastConfig): void { // No config possible. @@ -73,7 +73,7 @@ class CastDemoRow extends LitElement implements LovelaceRow { this.style.display = this._castManager ? "" : "none"; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/demo/src/custom-cards/ha-demo-card.ts b/demo/src/custom-cards/ha-demo-card.ts index 8da813d7bd..0bb27206ca 100644 --- a/demo/src/custom-cards/ha-demo-card.ts +++ b/demo/src/custom-cards/ha-demo-card.ts @@ -1,9 +1,9 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -26,7 +26,7 @@ export class HADemoCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass!: MockHomeAssistant; - @internalProperty() private _switching?: boolean; + @state() private _switching?: boolean; private _hidden = localStorage.hide_demo_card; @@ -113,7 +113,7 @@ export class HADemoCard extends LitElement implements LovelaceCard { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ css` a { diff --git a/gallery/src/demos/demo-automation-trace.ts b/gallery/src/demos/demo-automation-trace.ts index 8187c01630..e6c0fe624a 100644 --- a/gallery/src/demos/demo-automation-trace.ts +++ b/gallery/src/demos/demo-automation-trace.ts @@ -4,7 +4,7 @@ import { css, LitElement, TemplateResult, - internalProperty, + state, property, } from "lit-element"; import "../../../src/components/ha-card"; @@ -22,7 +22,7 @@ const traces: DemoTrace[] = [basicTrace, motionLightTrace]; export class DemoAutomationTrace extends LitElement { @property({ attribute: false }) hass?: HomeAssistant; - @internalProperty() private _selected = {}; + @state() private _selected = {}; protected render(): TemplateResult { if (!this.hass) { diff --git a/gallery/src/demos/demo-integration-card.ts b/gallery/src/demos/demo-integration-card.ts index 7fb8607930..8cb51ddd2b 100644 --- a/gallery/src/demos/demo-integration-card.ts +++ b/gallery/src/demos/demo-integration-card.ts @@ -2,7 +2,7 @@ import { customElement, html, css, - internalProperty, + state, LitElement, TemplateResult, property, @@ -220,9 +220,9 @@ const createDeviceRegistryEntries = ( export class DemoIntegrationCard extends LitElement { @property({ attribute: false }) hass?: HomeAssistant; - @internalProperty() isCustomIntegration = false; + @state() isCustomIntegration = false; - @internalProperty() isCloud = false; + @state() isCloud = false; protected render(): TemplateResult { if (!this.hass) { diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts index 4e33f15e8b..4462d03854 100644 --- a/hassio/src/addon-store/hassio-addon-repository.ts +++ b/hassio/src/addon-store/hassio-addon-repository.ts @@ -1,7 +1,7 @@ import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js"; import { css, - CSSResultArray, + CSSResultGroup, html, LitElement, property, @@ -129,7 +129,7 @@ class HassioAddonRepositoryEl extends LitElement { navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ hassioStyle, css` diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index fd41a504db..21e67c7d24 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -4,8 +4,8 @@ import "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical } from "@mdi/js"; import { css, - CSSResult, - internalProperty, + CSSResultGroup, + state, LitElement, property, PropertyValues, @@ -58,7 +58,7 @@ class HassioAddonStore extends LitElement { @property({ attribute: false }) public route!: Route; - @internalProperty() private _filter?: string; + @state() private _filter?: string; public async refreshData() { await reloadHassioAddons(this.hass); @@ -218,7 +218,7 @@ class HassioAddonStore extends LitElement { this._filter = e.detail.value; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` hassio-addon-repository { margin-top: 24px; diff --git a/hassio/src/addon-view/config/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts index 79275a39cf..a3e4121418 100644 --- a/hassio/src/addon-view/config/hassio-addon-audio.ts +++ b/hassio/src/addon-view/config/hassio-addon-audio.ts @@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -39,15 +39,15 @@ class HassioAddonAudio extends LitElement { @property({ attribute: false }) public addon!: HassioAddonDetails; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _inputDevices?: HassioHardwareAudioDevice[]; + @state() private _inputDevices?: HassioHardwareAudioDevice[]; - @internalProperty() private _outputDevices?: HassioHardwareAudioDevice[]; + @state() private _outputDevices?: HassioHardwareAudioDevice[]; - @internalProperty() private _selectedInput!: null | string; + @state() private _selectedInput!: null | string; - @internalProperty() private _selectedOutput!: null | string; + @state() private _selectedOutput!: null | string; protected render(): TemplateResult { return html` @@ -109,7 +109,7 @@ class HassioAddonAudio extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/addon-view/config/hassio-addon-config-tab.ts b/hassio/src/addon-view/config/hassio-addon-config-tab.ts index b9a5907075..ab57e72d6a 100644 --- a/hassio/src/addon-view/config/hassio-addon-config-tab.ts +++ b/hassio/src/addon-view/config/hassio-addon-config-tab.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -70,7 +70,7 @@ class HassioAddonConfigDashboard extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts index 9bbc6ac782..936c5d7651 100644 --- a/hassio/src/addon-view/config/hassio-addon-config.ts +++ b/hassio/src/addon-view/config/hassio-addon-config.ts @@ -5,10 +5,10 @@ import { mdiDotsVertical } from "@mdi/js"; import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -53,15 +53,15 @@ class HassioAddonConfig extends LitElement { @property({ type: Boolean }) private _valid = true; - @internalProperty() private _canShowSchema = false; + @state() private _canShowSchema = false; - @internalProperty() private _showOptional = false; + @state() private _showOptional = false; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _options?: Record; + @state() private _options?: Record; - @internalProperty() private _yamlMode = false; + @state() private _yamlMode = false; @query("ha-yaml-editor") private _editor?: HaYamlEditor; @@ -292,7 +292,7 @@ class HassioAddonConfig extends LitElement { fireEvent(this, "hass-api-called", eventdata); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/addon-view/config/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts index 256f81175f..6a96a88741 100644 --- a/hassio/src/addon-view/config/hassio-addon-network.ts +++ b/hassio/src/addon-view/config/hassio-addon-network.ts @@ -1,10 +1,10 @@ import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -43,9 +43,9 @@ class HassioAddonNetwork extends LitElement { @property({ attribute: false }) public addon!: HassioAddonDetails; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _config?: NetworkItem[]; + @state() private _config?: NetworkItem[]; public connectedCallback(): void { super.connectedCallback(); @@ -216,7 +216,7 @@ class HassioAddonNetwork extends LitElement { button.progress = false; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts index 0cb15c1842..3ae8b65427 100644 --- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts +++ b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts @@ -1,10 +1,10 @@ import "../../../../src/components/ha-card"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -30,9 +30,9 @@ class HassioAddonDocumentationDashboard extends LitElement { @property({ attribute: false }) public addon?: HassioAddonDetails; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _content?: string; + @state() private _content?: string; public async connectedCallback(): Promise { super.connectedCallback(); @@ -57,7 +57,7 @@ class HassioAddonDocumentationDashboard extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts index 5113aa3bdb..52f5859f14 100644 --- a/hassio/src/addon-view/hassio-addon-dashboard.ts +++ b/hassio/src/addon-view/hassio-addon-dashboard.ts @@ -6,10 +6,10 @@ import { } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -52,7 +52,7 @@ class HassioAddonDashboard extends LitElement { @property({ type: Boolean }) public narrow!: boolean; - @internalProperty() _error?: string; + @state() _error?: string; private _computeTail = memoizeOne((route: Route) => { const dividerPos = route.path.indexOf("/", 1); @@ -133,7 +133,7 @@ class HassioAddonDashboard extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/addon-view/info/hassio-addon-info-tab.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts index dffd2a8b66..a46becbd75 100644 --- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts +++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -42,7 +42,7 @@ class HassioAddonInfoDashboard extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts index 20af66c7ce..0a3e0fd691 100644 --- a/hassio/src/addon-view/info/hassio-addon-info.ts +++ b/hassio/src/addon-view/info/hassio-addon-info.ts @@ -16,10 +16,10 @@ import { } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -90,9 +90,9 @@ class HassioAddonInfo extends LitElement { @property({ attribute: false }) public supervisor!: Supervisor; - @internalProperty() private _metrics?: HassioStats; + @state() private _metrics?: HassioStats; - @internalProperty() private _error?: string; + @state() private _error?: string; private _addonStoreInfo = memoizeOne( (slug: string, storeAddons: StoreAddon[]) => @@ -1098,7 +1098,7 @@ class HassioAddonInfo extends LitElement { button.progress = false; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/addon-view/log/hassio-addon-log-tab.ts b/hassio/src/addon-view/log/hassio-addon-log-tab.ts index 7b93e38a5b..d9d4cff07d 100644 --- a/hassio/src/addon-view/log/hassio-addon-log-tab.ts +++ b/hassio/src/addon-view/log/hassio-addon-log-tab.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -38,7 +38,7 @@ class HassioAddonLogDashboard extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/addon-view/log/hassio-addon-logs.ts b/hassio/src/addon-view/log/hassio-addon-logs.ts index c380c0b92e..3d2034f1ac 100644 --- a/hassio/src/addon-view/log/hassio-addon-logs.ts +++ b/hassio/src/addon-view/log/hassio-addon-logs.ts @@ -1,10 +1,10 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -29,9 +29,9 @@ class HassioAddonLogs extends LitElement { @property({ attribute: false }) public addon!: HassioAddonDetails; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _content?: string; + @state() private _content?: string; public async connectedCallback(): Promise { super.connectedCallback(); @@ -59,7 +59,7 @@ class HassioAddonLogs extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/components/hassio-ansi-to-html.ts b/hassio/src/components/hassio-ansi-to-html.ts index b957b172b4..e31b4dba05 100644 --- a/hassio/src/components/hassio-ansi-to-html.ts +++ b/hassio/src/components/hassio-ansi-to-html.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -25,7 +25,7 @@ class HassioAnsiToHtml extends LitElement { return html`${this._parseTextToColoredPre(this.content)}`; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` pre { overflow-x: auto; diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index 03884e6b94..383388bde9 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -1,7 +1,7 @@ import { mdiHelpCircle } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -77,7 +77,7 @@ class HassioCardContent extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-svg-icon { margin-right: 24px; diff --git a/hassio/src/components/hassio-upload-snapshot.ts b/hassio/src/components/hassio-upload-snapshot.ts index 834281d911..5f16b62f8e 100644 --- a/hassio/src/components/hassio-upload-snapshot.ts +++ b/hassio/src/components/hassio-upload-snapshot.ts @@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input-container"; import { customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -33,9 +33,9 @@ const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB export class HassioUploadSnapshot extends LitElement { public hass!: HomeAssistant; - @internalProperty() public value: string | null = null; + @state() public value: string | null = null; - @internalProperty() private _uploading = false; + @state() private _uploading = false; public render(): TemplateResult { return html` diff --git a/hassio/src/components/supervisor-metric.ts b/hassio/src/components/supervisor-metric.ts index bf6246876c..3030c9cf65 100644 --- a/hassio/src/components/supervisor-metric.ts +++ b/hassio/src/components/supervisor-metric.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -37,7 +37,7 @@ class SupervisorMetric extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-settings-row { padding: 0; diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts index 3a578581ab..aa5393313c 100644 --- a/hassio/src/dashboard/hassio-addons.ts +++ b/hassio/src/dashboard/hassio-addons.ts @@ -1,7 +1,7 @@ import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -90,7 +90,7 @@ class HassioAddons extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts index 1a4c373eda..9c27910641 100644 --- a/hassio/src/dashboard/hassio-dashboard.ts +++ b/hassio/src/dashboard/hassio-dashboard.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -53,7 +53,7 @@ class HassioDashboard extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts index 1a11ee99e4..9a4f7487a8 100644 --- a/hassio/src/dashboard/hassio-update.ts +++ b/hassio/src/dashboard/hassio-update.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import { mdiHomeAssistant } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -233,7 +233,7 @@ export class HassioUpdate extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts index 95177a18f5..1f6db1677f 100644 --- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts +++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -23,7 +23,7 @@ class HassioMarkdownDialog extends LitElement { @property() public content!: string; - @internalProperty() private _opened = false; + @state() private _opened = false; public showDialog(params: HassioMarkdownDialogParams) { this.title = params.title; @@ -50,7 +50,7 @@ class HassioMarkdownDialog extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, hassioStyle, diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts index 04f2710465..91d08c8d57 100644 --- a/hassio/src/dialogs/network/dialog-hassio-network.ts +++ b/hassio/src/dialogs/network/dialog-hassio-network.ts @@ -8,10 +8,10 @@ import { mdiClose } from "@mdi/js"; import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -54,23 +54,23 @@ export class DialogHassioNetwork @property({ attribute: false }) public supervisor!: Supervisor; - @internalProperty() private _accessPoints?: AccessPoints; + @state() private _accessPoints?: AccessPoints; - @internalProperty() private _curTabIndex = 0; + @state() private _curTabIndex = 0; - @internalProperty() private _dirty = false; + @state() private _dirty = false; - @internalProperty() private _interface?: NetworkInterface; + @state() private _interface?: NetworkInterface; - @internalProperty() private _interfaces!: NetworkInterface[]; + @state() private _interfaces!: NetworkInterface[]; - @internalProperty() private _params?: HassioNetworkDialogParams; + @state() private _params?: HassioNetworkDialogParams; - @internalProperty() private _processing = false; + @state() private _processing = false; - @internalProperty() private _scanning = false; + @state() private _scanning = false; - @internalProperty() private _wifiConfiguration?: WifiConfiguration; + @state() private _wifiConfiguration?: WifiConfiguration; public async showDialog(params: HassioNetworkDialogParams): Promise { this._params = params; @@ -543,7 +543,7 @@ export class DialogHassioNetwork this._wifiConfiguration![id] = value; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/hassio/src/dialogs/registries/dialog-hassio-registries.ts b/hassio/src/dialogs/registries/dialog-hassio-registries.ts index 4b77b41436..7f02cb769b 100644 --- a/hassio/src/dialogs/registries/dialog-hassio-registries.ts +++ b/hassio/src/dialogs/registries/dialog-hassio-registries.ts @@ -5,10 +5,10 @@ import { mdiDelete } from "@mdi/js"; import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -39,15 +39,15 @@ class HassioRegistriesDialog extends LitElement { username: string; }[]; - @internalProperty() private _registry?: string; + @state() private _registry?: string; - @internalProperty() private _username?: string; + @state() private _username?: string; - @internalProperty() private _password?: string; + @state() private _password?: string; - @internalProperty() private _opened = false; + @state() private _opened = false; - @internalProperty() private _addingRegistry = false; + @state() private _addingRegistry = false; protected render(): TemplateResult { return html` @@ -220,7 +220,7 @@ class HassioRegistriesDialog extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, haStyleDialog, diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index 0c91f31055..d776b83d27 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -7,10 +7,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -37,15 +37,15 @@ class HassioRepositoriesDialog extends LitElement { @query("#repository_input", true) private _optionInput?: PaperInputElement; - @internalProperty() private _repositories?: HassioAddonRepository[]; + @state() private _repositories?: HassioAddonRepository[]; - @internalProperty() private _dialogParams?: HassioRepositoryDialogParams; + @state() private _dialogParams?: HassioRepositoryDialogParams; - @internalProperty() private _opened = false; + @state() private _opened = false; - @internalProperty() private _processing = false; + @state() private _processing = false; - @internalProperty() private _error?: string; + @state() private _error?: string; public async showDialog( dialogParams: HassioRepositoryDialogParams @@ -137,7 +137,7 @@ class HassioRepositoriesDialog extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, haStyleDialog, diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts index d4948bd553..b87b4c7031 100644 --- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts +++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts @@ -1,10 +1,10 @@ import { mdiClose } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -23,7 +23,7 @@ export class DialogHassioSnapshotUpload implements HassDialog { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _params?: HassioSnapshotUploadDialogParams; + @state() private _params?: HassioSnapshotUploadDialogParams; public async showDialog( params: HassioSnapshotUploadDialogParams @@ -78,7 +78,7 @@ export class DialogHassioSnapshotUpload this.closeDialog(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts index b44c9eb6c3..c4e13a02d8 100755 --- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts +++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts @@ -5,10 +5,10 @@ import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbo import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -80,21 +80,21 @@ class HassioSnapshotDialog extends LitElement { @property({ attribute: false }) public supervisor?: Supervisor; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _onboarding = false; + @state() private _onboarding = false; - @internalProperty() private _snapshot?: HassioSnapshotDetail; + @state() private _snapshot?: HassioSnapshotDetail; - @internalProperty() private _folders!: FolderItem[]; + @state() private _folders!: FolderItem[]; - @internalProperty() private _addons!: AddonItem[]; + @state() private _addons!: AddonItem[]; - @internalProperty() private _dialogParams?: HassioSnapshotDialogParams; + @state() private _dialogParams?: HassioSnapshotDialogParams; - @internalProperty() private _snapshotPassword!: string; + @state() private _snapshotPassword!: string; - @internalProperty() private _restoreHass = true; + @state() private _restoreHass = true; public async showDialog(params: HassioSnapshotDialogParams) { this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug); @@ -235,7 +235,7 @@ class HassioSnapshotDialog extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, haStyleDialog, diff --git a/hassio/src/dialogs/update/dialog-supervisor-update.ts b/hassio/src/dialogs/update/dialog-supervisor-update.ts index 47f509331d..e8cb3fb67e 100644 --- a/hassio/src/dialogs/update/dialog-supervisor-update.ts +++ b/hassio/src/dialogs/update/dialog-supervisor-update.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -27,15 +27,15 @@ import { SupervisorDialogSupervisorUpdateParams } from "./show-dialog-update"; class DialogSupervisorUpdate extends LitElement { public hass!: HomeAssistant; - @internalProperty() private _opened = false; + @state() private _opened = false; - @internalProperty() private _createSnapshot = true; + @state() private _createSnapshot = true; - @internalProperty() private _action: "snapshot" | "update" | null = null; + @state() private _action: "snapshot" | "update" | null = null; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() + @state() private _dialogParams?: SupervisorDialogSupervisorUpdateParams; public async showDialog( @@ -173,7 +173,7 @@ class DialogSupervisorUpdate extends LitElement { this.closeDialog(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, haStyleDialog, diff --git a/hassio/src/hassio-my-redirect.ts b/hassio/src/hassio-my-redirect.ts index ff9a40b399..0e73adc529 100644 --- a/hassio/src/hassio-my-redirect.ts +++ b/hassio/src/hassio-my-redirect.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -59,7 +59,7 @@ class HassioMyRedirect extends LitElement { @property({ attribute: false }) public route!: Route; - @internalProperty() public _error?: TemplateResult | string; + @state() public _error?: TemplateResult | string; connectedCallback() { super.connectedCallback(); diff --git a/hassio/src/hassio-panel.ts b/hassio/src/hassio-panel.ts index c52339821e..a52de0a6eb 100644 --- a/hassio/src/hassio-panel.ts +++ b/hassio/src/hassio-panel.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -46,7 +46,7 @@ class HassioPanel extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { --app-header-background-color: var(--sidebar-background-color); diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts index 531673ac2f..bbdde5c053 100644 --- a/hassio/src/ingress-view/hassio-ingress-view.ts +++ b/hassio/src/ingress-view/hassio-ingress-view.ts @@ -1,10 +1,10 @@ import { mdiMenu } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -33,7 +33,7 @@ class HassioIngressView extends LitElement { @property() public ingressPanel = false; - @internalProperty() private _addon?: HassioAddonDetails; + @state() private _addon?: HassioAddonDetails; @property({ type: Boolean }) public narrow = false; @@ -162,7 +162,7 @@ class HassioIngressView extends LitElement { fireEvent(this, "hass-toggle-menu"); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` iframe { display: block; diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts index cf44e561b4..c01310191f 100644 --- a/hassio/src/snapshots/hassio-snapshots.ts +++ b/hassio/src/snapshots/hassio-snapshots.ts @@ -16,10 +16,10 @@ import "@polymer/paper-radio-group/paper-radio-group"; import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -69,19 +69,19 @@ class HassioSnapshots extends LitElement { @property({ attribute: false }) public supervisor!: Supervisor; - @internalProperty() private _snapshotName = ""; + @state() private _snapshotName = ""; - @internalProperty() private _snapshotPassword = ""; + @state() private _snapshotPassword = ""; - @internalProperty() private _snapshotHasPassword = false; + @state() private _snapshotHasPassword = false; - @internalProperty() private _snapshotType: HassioSnapshot["type"] = "full"; + @state() private _snapshotType: HassioSnapshot["type"] = "full"; - @internalProperty() private _snapshots?: HassioSnapshot[] = []; + @state() private _snapshots?: HassioSnapshot[] = []; - @internalProperty() private _addonList: CheckboxItem[] = []; + @state() private _addonList: CheckboxItem[] = []; - @internalProperty() private _folderList: CheckboxItem[] = [ + @state() private _folderList: CheckboxItem[] = [ { slug: "homeassistant", checked: true, @@ -92,7 +92,7 @@ class HassioSnapshots extends LitElement { { slug: "addons/local", checked: true }, ]; - @internalProperty() private _error = ""; + @state() private _error = ""; public async refreshData() { await reloadHassioSnapshots(this.hass); @@ -428,7 +428,7 @@ class HassioSnapshots extends LitElement { }); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/supervisor-base-element.ts b/hassio/src/supervisor-base-element.ts index 2043a8a2ae..a763d16d2b 100644 --- a/hassio/src/supervisor-base-element.ts +++ b/hassio/src/supervisor-base-element.ts @@ -1,10 +1,5 @@ import { Collection, UnsubscribeFunc } from "home-assistant-js-websocket"; -import { - internalProperty, - LitElement, - property, - PropertyValues, -} from "lit-element"; +import { state, LitElement, property, PropertyValues } from "lit-element"; import { atLeastVersion } from "../../src/common/config/version"; import { computeLocalize } from "../../src/common/translations/localize"; import { fetchHassioAddonsInfo } from "../../src/data/hassio/addon"; @@ -46,14 +41,11 @@ export class SupervisorBaseElement extends urlSyncMixin( localize: () => "", }; - @internalProperty() private _unsubs: Record = {}; + @state() private _unsubs: Record = {}; - @internalProperty() private _collections: Record< - string, - Collection - > = {}; + @state() private _collections: Record> = {}; - @internalProperty() private _language = "en"; + @state() private _language = "en"; public connectedCallback(): void { super.connectedCallback(); diff --git a/hassio/src/system/hassio-core-info.ts b/hassio/src/system/hassio-core-info.ts index bdb156fe20..4ee474ff08 100644 --- a/hassio/src/system/hassio-core-info.ts +++ b/hassio/src/system/hassio-core-info.ts @@ -2,10 +2,10 @@ import "@material/mwc-button"; import "@material/mwc-list/mwc-list-item"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -39,7 +39,7 @@ class HassioCoreInfo extends LitElement { @property({ attribute: false }) public supervisor!: Supervisor; - @internalProperty() private _metrics?: HassioStats; + @state() private _metrics?: HassioStats; protected render(): TemplateResult | void { const metrics = [ @@ -189,7 +189,7 @@ class HassioCoreInfo extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts index db5e4e2f7e..be5b6910e1 100644 --- a/hassio/src/system/hassio-host-info.ts +++ b/hassio/src/system/hassio-host-info.ts @@ -5,7 +5,7 @@ import { mdiDotsVertical } from "@mdi/js"; import { safeDump } from "js-yaml"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -415,7 +415,7 @@ class HassioHostInfo extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts index db60abcdc5..dfe04b3a92 100644 --- a/hassio/src/system/hassio-supervisor-info.ts +++ b/hassio/src/system/hassio-supervisor-info.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -67,7 +67,7 @@ class HassioSupervisorInfo extends LitElement { @property({ attribute: false }) public supervisor!: Supervisor; - @internalProperty() private _metrics?: HassioStats; + @state() private _metrics?: HassioStats; protected render(): TemplateResult | void { const metrics = [ @@ -504,7 +504,7 @@ class HassioSupervisorInfo extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts index 29ce5a242a..8a78153feb 100644 --- a/hassio/src/system/hassio-supervisor-log.ts +++ b/hassio/src/system/hassio-supervisor-log.ts @@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -61,11 +61,11 @@ class HassioSupervisorLog extends LitElement { @property({ attribute: false }) public supervisor!: Supervisor; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _selectedLogProvider = "supervisor"; + @state() private _selectedLogProvider = "supervisor"; - @internalProperty() private _content?: string; + @state() private _content?: string; public async connectedCallback(): Promise { super.connectedCallback(); @@ -146,7 +146,7 @@ class HassioSupervisorLog extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts index 5c02662932..e7b1d74b0b 100644 --- a/hassio/src/system/hassio-system.ts +++ b/hassio/src/system/hassio-system.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -64,7 +64,7 @@ class HassioSystem extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, hassioStyle, diff --git a/package.json b/package.json index e320fc9ff2..2002de0926 100644 --- a/package.json +++ b/package.json @@ -115,8 +115,8 @@ "js-yaml": "^3.13.1", "leaflet": "^1.7.1", "leaflet-draw": "^1.0.4", - "lit-element": "^2.5.0", - "lit-html": "^1.4.0", + "lit-element": "2.5.1", + "lit-html": "1.4.1", "lit-virtualizer": "^0.4.2", "marked": "2.0.0", "mdn-polyfills": "^5.16.0", @@ -241,8 +241,8 @@ "resolutions": { "@webcomponents/webcomponentsjs": "^2.2.10", "@polymer/polymer": "3.1.0", - "lit-html": "1.4.0", - "lit-element": "2.5.0" + "lit-html": "1.4.1", + "lit-element": "2.5.1" }, "main": "src/home-assistant.js", "husky": { diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts index 3164b6dafb..0602edab15 100644 --- a/src/auth/ha-auth-flow.ts +++ b/src/auth/ha-auth-flow.ts @@ -1,9 +1,9 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -29,13 +29,13 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) { @property() public oauth2State?: string; - @internalProperty() private _state: State = "loading"; + @state() private _state: State = "loading"; - @internalProperty() private _stepData: any = {}; + @state() private _stepData: any = {}; - @internalProperty() private _step?: DataEntryFlowStep; + @state() private _step?: DataEntryFlowStep; - @internalProperty() private _errorMessage?: string; + @state() private _errorMessage?: string; protected render() { return html`
${this._renderForm()}
`; @@ -313,7 +313,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { /* So we can set min-height to avoid jumping during loading */ diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts index ceabc2b409..02d1f80cea 100644 --- a/src/auth/ha-authorize.ts +++ b/src/auth/ha-authorize.ts @@ -1,8 +1,8 @@ import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -32,11 +32,11 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) { @property() public oauth2State?: string; - @internalProperty() private _authProvider?: AuthProvider; + @state() private _authProvider?: AuthProvider; - @internalProperty() private _authProviders?: AuthProvider[]; + @state() private _authProviders?: AuthProvider[]; - @internalProperty() private _discovery?: DiscoveryInformation; + @state() private _discovery?: DiscoveryInformation; constructor() { super(); @@ -189,7 +189,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) { this._authProvider = ev.detail; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-pick-auth-provider { display: block; diff --git a/src/common/decorators/local-storage.ts b/src/common/decorators/local-storage.ts index e72c9f0657..2299705033 100644 --- a/src/common/decorators/local-storage.ts +++ b/src/common/decorators/local-storage.ts @@ -1,5 +1,5 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { PropertyDeclaration, UpdatingElement } from "lit-element"; +import { PropertyDeclaration, ReactiveElement } from "lit-element"; import type { ClassElement } from "../../types"; type Callback = (oldValue: any, newValue: any) => void; @@ -93,7 +93,7 @@ export const LocalStorage = ( storage.addFromStorage(storageKey); - const subscribe = (el: UpdatingElement): UnsubscribeFunc => + const subscribe = (el: ReactiveElement): UnsubscribeFunc => storage.subscribeChanges(storageKey!, (oldValue) => { el.requestUpdate(clsElement.key, oldValue); }); @@ -101,7 +101,7 @@ export const LocalStorage = ( const getValue = (): any => storage.hasKey(storageKey!) ? storage.getValue(storageKey!) : initVal; - const setValue = (el: UpdatingElement, value: any) => { + const setValue = (el: ReactiveElement, value: any) => { let oldValue: unknown | undefined; if (property) { oldValue = getValue(); @@ -117,7 +117,7 @@ export const LocalStorage = ( placement: "prototype", key: clsElement.key, descriptor: { - set(this: UpdatingElement, value: unknown) { + set(this: ReactiveElement, value: unknown) { setValue(this, value); }, get() { @@ -126,7 +126,7 @@ export const LocalStorage = ( enumerable: true, configurable: true, }, - finisher(cls: typeof UpdatingElement) { + finisher(cls: typeof ReactiveElement) { if (property) { const connectedCallback = cls.prototype.connectedCallback; const disconnectedCallback = cls.prototype.disconnectedCallback; diff --git a/src/common/dom/dynamic-element-directive.ts b/src/common/dom/dynamic-element-directive.ts index e3e48e57af..cad1f45137 100644 --- a/src/common/dom/dynamic-element-directive.ts +++ b/src/common/dom/dynamic-element-directive.ts @@ -1,30 +1,47 @@ -import { directive, NodePart, Part } from "lit-html"; +import { noChange } from "lit-html"; +import { + ChildPart, + Directive, + directive, + DirectiveParameters, + PartInfo, + PartType, + // eslint-disable-next-line import/extensions +} from "lit-html/directive.js"; export const dynamicElement = directive( - (tag: string, properties?: Record) => (part: Part): void => { - if (!(part instanceof NodePart)) { - throw new Error( - "dynamicElementDirective can only be used in content bindings" - ); + class extends Directive { + private _element?: HTMLElement; + + constructor(partInfo: PartInfo) { + super(partInfo); + if (partInfo.type !== PartType.CHILD) { + throw new Error( + "dynamicElementDirective can only be used in content bindings" + ); + } } - let element = part.value as HTMLElement | undefined; + update(_part: ChildPart, [tag, properties]: DirectiveParameters) { + if (this._element && this._element.localName === tag) { + if (properties) { + Object.entries(properties).forEach(([key, value]) => { + this._element![key] = value; + }); + } + return noChange; + } + return this.render(tag, properties); + } - if (tag === element?.localName) { + render(tag: string, properties?: Record): HTMLElement { + this._element = document.createElement(tag); if (properties) { Object.entries(properties).forEach(([key, value]) => { - element![key] = value; + this._element![key] = value; }); } - return; + return this._element; } - - element = document.createElement(tag); - if (properties) { - Object.entries(properties).forEach(([key, value]) => { - element![key] = value; - }); - } - part.setValue(element); } ); diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts index aff3a1a2a7..d6a76951d4 100644 --- a/src/common/search/search-input.ts +++ b/src/common/search/search-input.ts @@ -3,7 +3,7 @@ import { mdiClose, mdiMagnify } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, LitElement, property, @@ -80,7 +80,7 @@ class SearchInput extends LitElement { this._filterChanged(""); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-svg-icon, mwc-icon-button { diff --git a/src/components/buttons/ha-call-api-button.ts b/src/components/buttons/ha-call-api-button.ts index ab5d075373..b7cec1d738 100644 --- a/src/components/buttons/ha-call-api-button.ts +++ b/src/components/buttons/ha-call-api-button.ts @@ -1,4 +1,11 @@ -import { css, CSSResult, html, LitElement, property, query } from "lit-element"; +import { + css, + CSSResultGroup, + html, + LitElement, + property, + query, +} from "lit-element"; import { fireEvent } from "../../common/dom/fire_event"; import { HomeAssistant } from "../../types"; import "./ha-progress-button"; @@ -59,7 +66,7 @@ class HaCallApiButton extends LitElement { fireEvent(this, "hass-api-called", eventData as any); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host([disabled]) { pointer-events: none; diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts index bb431cf7cb..68c39559e1 100644 --- a/src/components/buttons/ha-progress-button.ts +++ b/src/components/buttons/ha-progress-button.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import type { Button } from "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -60,7 +60,7 @@ class HaProgressButton extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { outline: none; diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index cca0ddf896..639849eb7a 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -1,11 +1,11 @@ import deepClone from "deep-clone-simple"; import { css, - CSSResult, + CSSResultGroup, customElement, eventOptions, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -118,21 +118,21 @@ export class HaDataTable extends LitElement { @property({ type: String }) public filter = ""; - @internalProperty() private _filterable = false; + @state() private _filterable = false; - @internalProperty() private _filter = ""; + @state() private _filter = ""; - @internalProperty() private _sortColumn?: string; + @state() private _sortColumn?: string; - @internalProperty() private _sortDirection: SortingDirection = null; + @state() private _sortDirection: SortingDirection = null; - @internalProperty() private _filteredData: DataTableRowData[] = []; + @state() private _filteredData: DataTableRowData[] = []; - @internalProperty() private _headerHeight = 0; + @state() private _headerHeight = 0; @query("slot[name='header']") private _header!: HTMLSlotElement; - @internalProperty() private _items: DataTableRowData[] = []; + @state() private _items: DataTableRowData[] = []; private _checkableRowsCount?: number; @@ -573,7 +573,7 @@ export class HaDataTable extends LitElement { this._savedScrollPos = (e.target as HTMLDivElement).scrollTop; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` /* default mdc styles, colors changed, without checkbox styles */ :host { diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts index f7ec87169e..7dd6244640 100644 --- a/src/components/date-range-picker.ts +++ b/src/components/date-range-picker.ts @@ -1,6 +1,5 @@ // @ts-nocheck import wrap from "@vue/web-component-wrapper"; -import { customElement } from "lit-element/lib/decorators"; import Vue from "vue"; import DateRangePicker from "vue2-daterange-picker"; import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css"; diff --git a/src/components/device/ha-area-devices-picker.ts b/src/components/device/ha-area-devices-picker.ts index 6e635d0720..677db126a0 100644 --- a/src/components/device/ha-area-devices-picker.ts +++ b/src/components/device/ha-area-devices-picker.ts @@ -9,10 +9,10 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -127,13 +127,13 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) { @property({ type: Boolean }) private _opened?: boolean; - @internalProperty() private _areaPicker = true; + @state() private _areaPicker = true; - @internalProperty() private _devices?: DeviceRegistryEntry[]; + @state() private _devices?: DeviceRegistryEntry[]; - @internalProperty() private _areas?: AreaRegistryEntry[]; + @state() private _areas?: AreaRegistryEntry[]; - @internalProperty() private _entities?: EntityRegistryEntry[]; + @state() private _entities?: EntityRegistryEntry[]; private _selectedDevices: string[] = []; @@ -407,7 +407,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) { }, 0); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .suffix { display: flex; diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts index 98e79035b6..2743e77d89 100644 --- a/src/components/device/ha-device-automation-picker.ts +++ b/src/components/device/ha-device-automation-picker.ts @@ -4,9 +4,9 @@ import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -33,11 +33,11 @@ export abstract class HaDeviceAutomationPicker< @property() public value?: T; - @internalProperty() private _automations: T[] = []; + @state() private _automations: T[] = []; // Trigger an empty render so we start with a clean DOM. // paper-listbox does not like changing things around. - @internalProperty() private _renderEmpty = false; + @state() private _renderEmpty = false; protected get NO_AUTOMATION_TEXT() { return this.hass.localize( @@ -188,7 +188,7 @@ export abstract class HaDeviceAutomationPicker< fireEvent(this, "value-changed", { value: automation }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-paper-dropdown-menu { width: 100%; diff --git a/src/components/device/ha-device-picker.ts b/src/components/device/ha-device-picker.ts index 3644ad9405..3e70ef85e8 100644 --- a/src/components/device/ha-device-picker.ts +++ b/src/components/device/ha-device-picker.ts @@ -3,10 +3,10 @@ import "@polymer/paper-item/paper-item-body"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -111,7 +111,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) { @property({ type: Boolean }) public disabled?: boolean; - @internalProperty() private _opened?: boolean; + @state() private _opened?: boolean; @query("ha-combo-box", true) public comboBox!: HaComboBox; @@ -326,7 +326,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) { }, 0); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` paper-input > mwc-icon-button { --mdc-icon-button-size: 24px; diff --git a/src/components/entity/ha-entity-attribute-picker.ts b/src/components/entity/ha-entity-attribute-picker.ts index 784ea421f8..10ffef76db 100644 --- a/src/components/entity/ha-entity-attribute-picker.ts +++ b/src/components/entity/ha-entity-attribute-picker.ts @@ -6,7 +6,7 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -165,7 +165,7 @@ class HaEntityAttributePicker extends LitElement { }, 0); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .suffix { display: flex; diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts index dfaeecd570..e2307a529b 100644 --- a/src/components/entity/ha-entity-picker.ts +++ b/src/components/entity/ha-entity-picker.ts @@ -7,7 +7,7 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -311,7 +311,7 @@ export class HaEntityPicker extends LitElement { }, 0); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .suffix { display: flex; diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts index 10fb56e096..19c08a57aa 100644 --- a/src/components/entity/ha-entity-toggle.ts +++ b/src/components/entity/ha-entity-toggle.ts @@ -1,9 +1,9 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -32,7 +32,7 @@ export class HaEntityToggle extends LitElement { @property() public label?: string; - @internalProperty() private _isOn = false; + @state() private _isOn = false; protected render(): TemplateResult { if (!this.stateObj) { @@ -148,7 +148,7 @@ export class HaEntityToggle extends LitElement { }, 2000); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { white-space: nowrap; diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts index 340677ff41..e2ce11c133 100644 --- a/src/components/entity/ha-state-label-badge.ts +++ b/src/components/entity/ha-state-label-badge.ts @@ -1,10 +1,10 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -35,7 +35,7 @@ export class HaStateLabelBadge extends LitElement { @property() public image?: string; - @internalProperty() private _timerTimeRemaining?: number; + @state() private _timerTimeRemaining?: number; private _connected?: boolean; @@ -54,9 +54,9 @@ export class HaStateLabelBadge extends LitElement { } protected render(): TemplateResult { - const state = this.state; + const entityState = this.state; - if (!state) { + if (!entityState) { return html` `; } @@ -99,7 +106,7 @@ export class HaStateLabelBadge extends LitElement { } } - private _computeValue(domain: string, state: HassEntity) { + private _computeValue(domain: string, entityState: HassEntity) { switch (domain) { case "binary_sensor": case "device_tracker": @@ -111,77 +118,81 @@ export class HaStateLabelBadge extends LitElement { return null; case "sensor": default: - return state.attributes.device_class === "moon__phase" + return entityState.attributes.device_class === "moon__phase" ? null - : state.state === UNKNOWN + : entityState.state === UNKNOWN ? "-" - : state.attributes.unit_of_measurement - ? formatNumber(state.state, this.hass!.locale) - : computeStateDisplay(this.hass!.localize, state, this.hass!.locale); + : entityState.attributes.unit_of_measurement + ? formatNumber(entityState.state, this.hass!.locale) + : computeStateDisplay( + this.hass!.localize, + entityState, + this.hass!.locale + ); } } - private _computeIcon(domain: string, state: HassEntity) { - if (state.state === UNAVAILABLE) { + private _computeIcon(domain: string, entityState: HassEntity) { + if (entityState.state === UNAVAILABLE) { return null; } switch (domain) { case "alarm_control_panel": - if (state.state === "pending") { + if (entityState.state === "pending") { return "hass:clock-fast"; } - if (state.state === "armed_away") { + if (entityState.state === "armed_away") { return "hass:nature"; } - if (state.state === "armed_home") { + if (entityState.state === "armed_home") { return "hass:home-variant"; } - if (state.state === "armed_night") { + if (entityState.state === "armed_night") { return "hass:weather-night"; } - if (state.state === "armed_custom_bypass") { + if (entityState.state === "armed_custom_bypass") { return "hass:shield-home"; } - if (state.state === "triggered") { + if (entityState.state === "triggered") { return "hass:alert-circle"; } // state == 'disarmed' - return domainIcon(domain, state); + return domainIcon(domain, entityState); case "binary_sensor": case "device_tracker": case "updater": case "person": case "sun": - return stateIcon(state); + return stateIcon(entityState); case "timer": - return state.state === "active" + return entityState.state === "active" ? "hass:timer-outline" : "hass:timer-off-outline"; default: - return state?.attributes.device_class === "moon__phase" - ? stateIcon(state) + return entityState?.attributes.device_class === "moon__phase" + ? stateIcon(entityState) : null; } } - private _computeLabel(domain, state, _timerTimeRemaining) { + private _computeLabel(domain, entityState, _timerTimeRemaining) { if ( - state.state === UNAVAILABLE || + entityState.state === UNAVAILABLE || ["device_tracker", "alarm_control_panel", "person"].includes(domain) ) { // Localize the state with a special state_badge namespace, which has variations of // the state translations that are truncated to fit within the badge label. Translations // are only added for device_tracker, alarm_control_panel and person. return ( - this.hass!.localize(`state_badge.${domain}.${state.state}`) || - this.hass!.localize(`state_badge.default.${state.state}`) || - state.state + this.hass!.localize(`state_badge.${domain}.${entityState.state}`) || + this.hass!.localize(`state_badge.default.${entityState.state}`) || + entityState.state ); } if (domain === "timer") { return secondsToDuration(_timerTimeRemaining); } - return state.attributes.unit_of_measurement || null; + return entityState.attributes.unit_of_measurement || null; } private clearInterval() { @@ -209,7 +220,7 @@ export class HaStateLabelBadge extends LitElement { this._timerTimeRemaining = timerTimeRemaining(stateObj); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { cursor: pointer; diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index 46886fa909..76604f87bd 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -1,9 +1,9 @@ import type { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -32,7 +32,7 @@ export class StateBadge extends LitElement { @property({ type: Boolean, reflect: true, attribute: "icon" }) private _showIcon = true; - @internalProperty() private _iconStyle: { [name: string]: string } = {}; + @state() private _iconStyle: { [name: string]: string } = {}; protected render(): TemplateResult { const stateObj = this.stateObj; @@ -128,7 +128,7 @@ export class StateBadge extends LitElement { Object.assign(this.style, hostStyle); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { position: relative; diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts index 0bb035cc7f..f53089578f 100644 --- a/src/components/entity/state-info.ts +++ b/src/components/entity/state-info.ts @@ -2,7 +2,7 @@ import "@polymer/paper-tooltip/paper-tooltip"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -89,7 +89,7 @@ class StateInfo extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { min-width: 120px; diff --git a/src/components/ha-addon-picker.ts b/src/components/ha-addon-picker.ts index 582eaefcff..05d5f30bbd 100644 --- a/src/components/ha-addon-picker.ts +++ b/src/components/ha-addon-picker.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, LitElement, property, query, @@ -51,7 +51,7 @@ class HaAddonPicker extends LitElement { @property() public value = ""; - @internalProperty() private _addons?: HassioAddonInfo[]; + @state() private _addons?: HassioAddonInfo[]; @property({ type: Boolean }) public disabled = false; diff --git a/src/components/ha-analytics.ts b/src/components/ha-analytics.ts index e3f5ae6858..f357342581 100644 --- a/src/components/ha-analytics.ts +++ b/src/components/ha-analytics.ts @@ -1,7 +1,7 @@ import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -151,7 +151,7 @@ export class HaAnalytics extends LitElement { fireEvent(this, "analytics-preferences-changed", { preferences }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts index 35f7fc00bb..fc48bac838 100644 --- a/src/components/ha-area-picker.ts +++ b/src/components/ha-area-picker.ts @@ -8,10 +8,10 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -119,13 +119,13 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) { @property({ type: Boolean }) public disabled?: boolean; - @internalProperty() private _areas?: AreaRegistryEntry[]; + @state() private _areas?: AreaRegistryEntry[]; - @internalProperty() private _devices?: DeviceRegistryEntry[]; + @state() private _devices?: DeviceRegistryEntry[]; - @internalProperty() private _entities?: EntityRegistryEntry[]; + @state() private _entities?: EntityRegistryEntry[]; - @internalProperty() private _opened?: boolean; + @state() private _opened?: boolean; @query("vaadin-combo-box-light", true) public comboBox!: HTMLElement; @@ -457,7 +457,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) { }, 0); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` paper-input > mwc-icon-button { --mdc-icon-button-size: 24px; diff --git a/src/components/ha-attributes.ts b/src/components/ha-attributes.ts index e18910ef1d..24af62f6a6 100644 --- a/src/components/ha-attributes.ts +++ b/src/components/ha-attributes.ts @@ -1,7 +1,7 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -58,7 +58,7 @@ class HaAttributes extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/components/ha-bar.ts b/src/components/ha-bar.ts index 3378958a56..0c58dd5964 100644 --- a/src/components/ha-bar.ts +++ b/src/components/ha-bar.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, LitElement, property, @@ -40,7 +40,7 @@ export class HaBar extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` rect { height: 100%; diff --git a/src/components/ha-blueprint-picker.ts b/src/components/ha-blueprint-picker.ts index 716d85ba17..95e1318647 100644 --- a/src/components/ha-blueprint-picker.ts +++ b/src/components/ha-blueprint-picker.ts @@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -98,7 +98,7 @@ class HaBluePrintPicker extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: inline-block; diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index de50f7bd42..27c75b9ac5 100644 --- a/src/components/ha-button-menu.ts +++ b/src/components/ha-button-menu.ts @@ -2,7 +2,7 @@ import "@material/mwc-menu"; import type { Corner, Menu } from "@material/mwc-menu"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -53,7 +53,7 @@ export class HaButtonMenu extends LitElement { this._menu!.show(); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: inline-block; diff --git a/src/components/ha-button-related-filter-menu.ts b/src/components/ha-button-related-filter-menu.ts index 1e4cde248d..1a2eba9209 100644 --- a/src/components/ha-button-related-filter-menu.ts +++ b/src/components/ha-button-related-filter-menu.ts @@ -3,10 +3,10 @@ import type { Corner } from "@material/mwc-menu"; import { mdiFilterVariant } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -59,7 +59,7 @@ export class HaRelatedFilterButtonMenu extends LitElement { @property({ type: Array, attribute: "exclude-domains" }) public excludeDomains?: string[]; - @internalProperty() private _open = false; + @state() private _open = false; protected render(): TemplateResult { return html` @@ -175,7 +175,7 @@ export class HaRelatedFilterButtonMenu extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: inline-block; diff --git a/src/components/ha-button-toggle-group.ts b/src/components/ha-button-toggle-group.ts index 8facec61bf..f6aa48c317 100644 --- a/src/components/ha-button-toggle-group.ts +++ b/src/components/ha-button-toggle-group.ts @@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button"; import "@material/mwc-icon-button/mwc-icon-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -56,7 +56,7 @@ export class HaButtonToggleGroup extends LitElement { fireEvent(this, "value-changed", { value: this.active }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` div { display: flex; diff --git a/src/components/ha-camera-stream.ts b/src/components/ha-camera-stream.ts index adc3913644..acd0c90ff2 100644 --- a/src/components/ha-camera-stream.ts +++ b/src/components/ha-camera-stream.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -39,9 +39,9 @@ class HaCameraStream extends LitElement { // We keep track if we should force MJPEG with a string // that way it automatically resets if we change entity. - @internalProperty() private _forceMJPEG?: string; + @state() private _forceMJPEG?: string; - @internalProperty() private _url?: string; + @state() private _url?: string; protected render(): TemplateResult { if (!this.stateObj) { @@ -113,7 +113,7 @@ class HaCameraStream extends LitElement { fireEvent(this, "iron-resize"); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host, img { diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts index 157d663bfe..7ec2045fe7 100644 --- a/src/components/ha-card.ts +++ b/src/components/ha-card.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -14,7 +14,7 @@ export class HaCard extends LitElement { @property({ type: Boolean, reflect: true }) public outlined = false; - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { background: var( diff --git a/src/components/ha-chip-set.ts b/src/components/ha-chip-set.ts index 9f1e237188..0d6fed061e 100644 --- a/src/components/ha-chip-set.ts +++ b/src/components/ha-chip-set.ts @@ -2,7 +2,7 @@ import chipStyles from "@material/chips/dist/mdc.chips.min.css"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -48,7 +48,7 @@ export class HaChipSet extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ${unsafeCSS(chipStyles)} diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts index 2f57b6c943..3e317bc0b5 100644 --- a/src/components/ha-chip.ts +++ b/src/components/ha-chip.ts @@ -4,7 +4,7 @@ import { ripple } from "@material/mwc-ripple/ripple-directive"; import "./ha-icon"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -44,7 +44,7 @@ export class HaChip extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ${unsafeCSS(chipStyles)} .mdc-chip { diff --git a/src/components/ha-climate-state.ts b/src/components/ha-climate-state.ts index aac651d6af..bc330ff3b1 100644 --- a/src/components/ha-climate-state.ts +++ b/src/components/ha-climate-state.ts @@ -1,7 +1,7 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -126,7 +126,7 @@ class HaClimateState extends LitElement { : stateString; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts index d830e06e08..678eef7304 100644 --- a/src/components/ha-code-editor.ts +++ b/src/components/ha-code-editor.ts @@ -1,10 +1,12 @@ import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view"; import { customElement, - internalProperty, + state, property, PropertyValues, - UpdatingElement, + ReactiveElement, + css, + CSSResultGroup, } from "lit-element"; import { fireEvent } from "../common/dom/fire_event"; import { loadCodeMirror } from "../resources/codemirror.ondemand"; @@ -24,7 +26,7 @@ const saveKeyBinding: KeyBinding = { }; @customElement("ha-code-editor") -export class HaCodeEditor extends UpdatingElement { +export class HaCodeEditor extends ReactiveElement { public codemirror?: EditorView; @property() public mode = "yaml"; @@ -35,7 +37,7 @@ export class HaCodeEditor extends UpdatingElement { @property() public error = false; - @internalProperty() private _value = ""; + @state() private _value = ""; private _loadedCodeMirror?: typeof import("../resources/codemirror"); @@ -60,6 +62,14 @@ export class HaCodeEditor extends UpdatingElement { public connectedCallback() { super.connectedCallback(); + // Lit 2.0 will create the shadowRoot for us, and adopt the styles, check if it was created + if (!this.shadowRoot) { + this.attachShadow({ mode: "open" }).innerHTML = ``; + } if (!this.codemirror) { return; } @@ -116,14 +126,6 @@ export class HaCodeEditor extends UpdatingElement { private async _load(): Promise { this._loadedCodeMirror = await loadCodeMirror(); - const shadowRoot = this.attachShadow({ mode: "open" }); - - shadowRoot!.innerHTML = ``; - this.codemirror = new this._loadedCodeMirror.EditorView({ state: this._loadedCodeMirror.EditorState.create({ doc: this._value, @@ -155,8 +157,8 @@ export class HaCodeEditor extends UpdatingElement { ), ], }), - root: shadowRoot, - parent: shadowRoot, + root: this.shadowRoot!, + parent: this.shadowRoot!, }); } @@ -175,6 +177,15 @@ export class HaCodeEditor extends UpdatingElement { this._value = newValue; fireEvent(this, "value-changed", { value: this._value }); } + + // Only Lit 2.0 will use this + static get styles(): CSSResultGroup { + return css` + :host(.error-state) div.cm-wrap .cm-gutters { + border-color: var(--error-state-color, red); + } + `; + } } declare global { diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts index 19f89bd410..be09112404 100644 --- a/src/components/ha-combo-box.ts +++ b/src/components/ha-combo-box.ts @@ -7,10 +7,10 @@ import "@polymer/paper-listbox/paper-listbox"; import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -70,7 +70,7 @@ export class HaComboBox extends LitElement { @property({ type: Boolean }) public disabled?: boolean; - @internalProperty() private _opened?: boolean; + @state() private _opened?: boolean; @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement; @@ -167,7 +167,7 @@ export class HaComboBox extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` paper-input > mwc-icon-button { --mdc-icon-button-size: 24px; diff --git a/src/components/ha-cover-controls.ts b/src/components/ha-cover-controls.ts index 08910a7735..bbe03b6af4 100644 --- a/src/components/ha-cover-controls.ts +++ b/src/components/ha-cover-controls.ts @@ -1,10 +1,10 @@ import type { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -23,7 +23,7 @@ class HaCoverControls extends LitElement { @property({ attribute: false }) public stateObj!: HassEntity; - @internalProperty() private _entityObj?: CoverEntity; + @state() private _entityObj?: CoverEntity; protected updated(changedProperties: PropertyValues): void { super.updated(changedProperties); @@ -114,7 +114,7 @@ class HaCoverControls extends LitElement { this._entityObj.stopCover(); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .state { white-space: nowrap; diff --git a/src/components/ha-cover-tilt-controls.ts b/src/components/ha-cover-tilt-controls.ts index be2f6f4087..9ae7e1eb8d 100644 --- a/src/components/ha-cover-tilt-controls.ts +++ b/src/components/ha-cover-tilt-controls.ts @@ -1,10 +1,10 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -22,7 +22,7 @@ class HaCoverTiltControls extends LitElement { @property({ attribute: false }) stateObj!: HassEntity; - @internalProperty() private _entityObj?: CoverEntity; + @state() private _entityObj?: CoverEntity; protected updated(changedProperties: PropertyValues): void { super.updated(changedProperties); @@ -101,7 +101,7 @@ class HaCoverTiltControls extends LitElement { this._entityObj.stopCoverTilt(); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { white-space: nowrap; diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts index 40493d1345..a7ec481461 100644 --- a/src/components/ha-date-input.ts +++ b/src/components/ha-date-input.ts @@ -1,7 +1,7 @@ import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -134,7 +134,7 @@ export class HaDateInput extends LitElement { return true; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` paper-input { width: 110px; diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index d0d1442f87..0b67c7e50a 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -6,7 +6,7 @@ import { mdiCalendar } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -146,7 +146,7 @@ export class HaDateRangePicker extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-svg-icon { margin-right: 8px; diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts index 40e0f736db..a38faff951 100644 --- a/src/components/ha-dialog.ts +++ b/src/components/ha-dialog.ts @@ -2,7 +2,7 @@ import "@material/mwc-dialog"; import type { Dialog } from "@material/mwc-dialog"; import { style } from "@material/mwc-dialog/mwc-dialog-css"; import { mdiClose } from "@mdi/js"; -import { css, CSSResult, customElement, html } from "lit-element"; +import { css, CSSResultGroup, customElement, html } from "lit-element"; import { computeRTLDirection } from "../common/util/compute_rtl"; import type { Constructor, HomeAssistant } from "../types"; import "./ha-icon-button"; @@ -31,7 +31,7 @@ export class HaDialog extends MwcDialog { return html` ${super.renderHeading()} `; } - protected static get styles(): CSSResult[] { + protected static get styles(): CSSResultGroup { return [ style, css` diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts index be3dc4f77d..0676b6a178 100644 --- a/src/components/ha-expansion-panel.ts +++ b/src/components/ha-expansion-panel.ts @@ -1,7 +1,7 @@ import { mdiChevronDown } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -59,7 +59,7 @@ class HaExpansionPanel extends LitElement { fireEvent(this, "expanded-changed", { expanded: this.expanded }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts index 0fa12a6ed9..d3324d63c4 100644 --- a/src/components/ha-file-upload.ts +++ b/src/components/ha-file-upload.ts @@ -6,7 +6,7 @@ import { css, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -39,7 +39,7 @@ export class HaFileUpload extends LitElement { @property({ type: Boolean, attribute: "auto-open-file-dialog" }) private autoOpenFileDialog = false; - @internalProperty() private _drag = false; + @state() private _drag = false; @query("#input") private _input?: HTMLInputElement; diff --git a/src/components/ha-form/ha-form-boolean.ts b/src/components/ha-form/ha-form-boolean.ts index 454a01e718..2eac24c33f 100644 --- a/src/components/ha-form/ha-form-boolean.ts +++ b/src/components/ha-form/ha-form-boolean.ts @@ -2,7 +2,7 @@ import "@polymer/paper-checkbox/paper-checkbox"; import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -49,7 +49,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` paper-checkbox { display: block; diff --git a/src/components/ha-form/ha-form-constant.ts b/src/components/ha-form/ha-form-constant.ts index 4e6d6e21b4..e860191635 100644 --- a/src/components/ha-form/ha-form-constant.ts +++ b/src/components/ha-form/ha-form-constant.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -28,7 +28,7 @@ export class HaFormConstant extends LitElement implements HaFormElement { return html`${this.label}: ${this.schema.value}`; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts index 9fab3cabc0..cb8fa55d46 100644 --- a/src/components/ha-form/ha-form-integer.ts +++ b/src/components/ha-form/ha-form-integer.ts @@ -4,7 +4,7 @@ import "@polymer/paper-slider/paper-slider"; import type { PaperSliderElement } from "@polymer/paper-slider/paper-slider"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -107,7 +107,7 @@ export class HaFormInteger extends LitElement implements HaFormElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .flex { display: flex; diff --git a/src/components/ha-form/ha-form-multi_select.ts b/src/components/ha-form/ha-form-multi_select.ts index 117dbe927e..c9424e4ec6 100644 --- a/src/components/ha-form/ha-form-multi_select.ts +++ b/src/components/ha-form/ha-form-multi_select.ts @@ -6,10 +6,10 @@ import "@polymer/paper-menu-button/paper-menu-button"; import "@polymer/paper-ripple/paper-ripple"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -33,7 +33,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement { @property() public suffix!: string; - @internalProperty() private _init = false; + @state() private _init = false; @query("paper-menu-button", true) private _input?: HTMLElement; @@ -140,7 +140,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement { ); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` paper-menu-button { display: block; diff --git a/src/components/ha-form/ha-form-select.ts b/src/components/ha-form/ha-form-select.ts index 398de2afda..05ee346726 100644 --- a/src/components/ha-form/ha-form-select.ts +++ b/src/components/ha-form/ha-form-select.ts @@ -2,7 +2,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -74,7 +74,7 @@ export class HaFormSelect extends LitElement implements HaFormElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-paper-dropdown-menu { display: block; diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts index a376520783..d78d793268 100644 --- a/src/components/ha-form/ha-form-string.ts +++ b/src/components/ha-form/ha-form-string.ts @@ -3,10 +3,10 @@ import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -31,7 +31,7 @@ export class HaFormString extends LitElement implements HaFormElement { @property() public suffix!: string; - @internalProperty() private _unmaskedPassword = false; + @state() private _unmaskedPassword = false; @query("paper-input") private _input?: HTMLElement; @@ -104,7 +104,7 @@ export class HaFormString extends LitElement implements HaFormElement { return "text"; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` mwc-icon-button { --mdc-icon-button-size: 24px; diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts index adfe4fd71f..4b7f3ef7d8 100644 --- a/src/components/ha-form/ha-form.ts +++ b/src/components/ha-form/ha-form.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -207,7 +207,7 @@ export class HaForm extends LitElement implements HaFormElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .error { color: var(--error-color); diff --git a/src/components/ha-formfield.ts b/src/components/ha-formfield.ts index 96187b8803..9b31ed66f5 100644 --- a/src/components/ha-formfield.ts +++ b/src/components/ha-formfield.ts @@ -1,7 +1,7 @@ import "@material/mwc-formfield"; import type { Formfield } from "@material/mwc-formfield"; import { style } from "@material/mwc-formfield/mwc-formfield-css"; -import { css, CSSResult, customElement } from "lit-element"; +import { css, CSSResultGroup, customElement } from "lit-element"; import { Constructor } from "../types"; const MwcFormfield = customElements.get( @@ -10,7 +10,7 @@ const MwcFormfield = customElements.get( @customElement("ha-formfield") export class HaFormfield extends MwcFormfield { - protected static get styles(): CSSResult[] { + protected static get styles(): CSSResultGroup { return [ style, css` diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts index 0628cb2243..11db5a890f 100644 --- a/src/components/ha-gauge.ts +++ b/src/components/ha-gauge.ts @@ -1,7 +1,7 @@ import { css, customElement, - internalProperty, + state, LitElement, property, PropertyValues, @@ -34,9 +34,9 @@ export class Gauge extends LitElement { @property() public label = ""; - @internalProperty() private _angle = 0; + @state() private _angle = 0; - @internalProperty() private _updated = false; + @state() private _updated = false; protected firstUpdated(changedProperties: PropertyValues) { super.firstUpdated(changedProperties); diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts index e841993c1b..ee9d20001b 100644 --- a/src/components/ha-hls-player.ts +++ b/src/components/ha-hls-player.ts @@ -1,10 +1,10 @@ import type HlsType from "hls.js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -40,7 +40,7 @@ class HaHLSPlayer extends LitElement { // don't cache this, as we remove it on disconnects @query("video") private _videoEl!: HTMLVideoElement; - @internalProperty() private _attached = false; + @state() private _attached = false; private _hlsPolyfillInstance?: HlsType; @@ -220,7 +220,7 @@ class HaHLSPlayer extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host, video { diff --git a/src/components/ha-icon-button-arrow-next.ts b/src/components/ha-icon-button-arrow-next.ts index 85bc2d245f..d6076d7ffd 100644 --- a/src/components/ha-icon-button-arrow-next.ts +++ b/src/components/ha-icon-button-arrow-next.ts @@ -3,7 +3,7 @@ import { mdiArrowLeft, mdiArrowRight } from "@mdi/js"; import { customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -19,7 +19,7 @@ export class HaIconButtonArrowNext extends LitElement { @property() public label?: string; - @internalProperty() private _icon = mdiArrowRight; + @state() private _icon = mdiArrowRight; public connectedCallback() { super.connectedCallback(); diff --git a/src/components/ha-icon-button-arrow-prev.ts b/src/components/ha-icon-button-arrow-prev.ts index c426c589a7..50ef9120ee 100644 --- a/src/components/ha-icon-button-arrow-prev.ts +++ b/src/components/ha-icon-button-arrow-prev.ts @@ -3,7 +3,7 @@ import { mdiArrowLeft, mdiArrowRight } from "@mdi/js"; import { customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -19,7 +19,7 @@ export class HaIconButtonArrowPrev extends LitElement { @property() public label?: string; - @internalProperty() private _icon = mdiArrowLeft; + @state() private _icon = mdiArrowLeft; public connectedCallback() { super.connectedCallback(); diff --git a/src/components/ha-icon-button-next.ts b/src/components/ha-icon-button-next.ts index 04213393eb..8b4df6eb54 100644 --- a/src/components/ha-icon-button-next.ts +++ b/src/components/ha-icon-button-next.ts @@ -3,7 +3,7 @@ import { mdiChevronLeft, mdiChevronRight } from "@mdi/js"; import { customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -19,7 +19,7 @@ export class HaIconButtonNext extends LitElement { @property() public label?: string; - @internalProperty() private _icon = mdiChevronRight; + @state() private _icon = mdiChevronRight; public connectedCallback() { super.connectedCallback(); diff --git a/src/components/ha-icon-button-prev.ts b/src/components/ha-icon-button-prev.ts index 6384039f13..3a962bc23a 100644 --- a/src/components/ha-icon-button-prev.ts +++ b/src/components/ha-icon-button-prev.ts @@ -3,7 +3,7 @@ import { mdiChevronLeft, mdiChevronRight } from "@mdi/js"; import { customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -19,7 +19,7 @@ export class HaIconButtonPrev extends LitElement { @property() public label?: string; - @internalProperty() private _icon = mdiChevronLeft; + @state() private _icon = mdiChevronLeft; public connectedCallback() { super.connectedCallback(); diff --git a/src/components/ha-icon-button.ts b/src/components/ha-icon-button.ts index e8cc62ab55..3e57d5a9b6 100644 --- a/src/components/ha-icon-button.ts +++ b/src/components/ha-icon-button.ts @@ -1,7 +1,7 @@ import "@material/mwc-icon-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -18,9 +18,10 @@ export class HaIconButton extends LitElement { @property({ type: String }) label = ""; - protected createRenderRoot() { - return this.attachShadow({ mode: "open", delegatesFocus: true }); - } + static shadowRootOptions: ShadowRootInit = { + mode: "open", + delegatesFocus: true, + }; protected render(): TemplateResult { return html` @@ -30,7 +31,7 @@ export class HaIconButton extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: inline-block; diff --git a/src/components/ha-icon.ts b/src/components/ha-icon.ts index 2cb7e0bdf6..ba1a4a74da 100644 --- a/src/components/ha-icon.ts +++ b/src/components/ha-icon.ts @@ -1,10 +1,10 @@ import "@polymer/iron-icon/iron-icon"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -45,11 +45,11 @@ const cachedIcons: Record = {}; export class HaIcon extends LitElement { @property() public icon?: string; - @internalProperty() private _path?: string; + @state() private _path?: string; - @internalProperty() private _viewBox?; + @state() private _viewBox?; - @internalProperty() private _legacy = false; + @state() private _legacy = false; protected updated(changedProps: PropertyValues) { if (changedProps.has("icon")) { @@ -161,7 +161,7 @@ export class HaIcon extends LitElement { cachedIcons[iconName] = iconPack[iconName]; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { fill: currentcolor; diff --git a/src/components/ha-label-badge.ts b/src/components/ha-label-badge.ts index 49ecff7bf2..66aa2dc0bc 100644 --- a/src/components/ha-label-badge.ts +++ b/src/components/ha-label-badge.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, html, LitElement, property, @@ -60,7 +60,7 @@ class HaLabelBadge extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ css` .badge-container { diff --git a/src/components/ha-markdown-element.ts b/src/components/ha-markdown-element.ts index cd07cf0a01..4658f5ee05 100644 --- a/src/components/ha-markdown-element.ts +++ b/src/components/ha-markdown-element.ts @@ -1,15 +1,22 @@ -import { customElement, property, UpdatingElement } from "lit-element"; +import { customElement, property, ReactiveElement } from "lit-element"; import { fireEvent } from "../common/dom/fire_event"; import { renderMarkdown } from "../resources/render-markdown"; @customElement("ha-markdown-element") -class HaMarkdownElement extends UpdatingElement { +class HaMarkdownElement extends ReactiveElement { @property() public content?; @property({ type: Boolean }) public allowSvg = false; @property({ type: Boolean }) public breaks = false; + public connectedCallback() { + super.connectedCallback(); + if (!this.shadowRoot) { + this.attachShadow({ mode: "open" }); + } + } + protected update(changedProps) { super.update(changedProps); if (this.content !== undefined) { @@ -18,7 +25,7 @@ class HaMarkdownElement extends UpdatingElement { } private async _render() { - this.innerHTML = await renderMarkdown( + this.shadowRoot!.innerHTML = await renderMarkdown( this.content, { breaks: this.breaks, @@ -32,10 +39,8 @@ class HaMarkdownElement extends UpdatingElement { this._resize(); const walker = document.createTreeWalker( - this, - 1 /* SHOW_ELEMENT */, - null, - false + this.shadowRoot!, + 1 /* SHOW_ELEMENT */ ); while (walker.nextNode()) { diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts index c98f5d07a9..b47e96e706 100644 --- a/src/components/ha-markdown.ts +++ b/src/components/ha-markdown.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -29,7 +29,7 @@ class HaMarkdown extends LitElement { >`; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts index b95d012938..067bf93324 100644 --- a/src/components/ha-menu-button.ts +++ b/src/components/ha-menu-button.ts @@ -3,10 +3,10 @@ import { mdiMenu } from "@mdi/js"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -25,7 +25,7 @@ class HaMenuButton extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _hasNotifications = false; + @state() private _hasNotifications = false; private _alwaysVisible = false; @@ -125,7 +125,7 @@ class HaMenuButton extends LitElement { fireEvent(this, "hass-toggle-menu"); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { position: relative; diff --git a/src/components/ha-picture-upload.ts b/src/components/ha-picture-upload.ts index 0ac990c667..f63eaedf4a 100644 --- a/src/components/ha-picture-upload.ts +++ b/src/components/ha-picture-upload.ts @@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input-container"; import { customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -36,7 +36,7 @@ export class HaPictureUpload extends LitElement { @property({ type: Number }) public size = 512; - @internalProperty() private _uploading = false; + @state() private _uploading = false; public render(): TemplateResult { return html` diff --git a/src/components/ha-related-items.ts b/src/components/ha-related-items.ts index 3d2cc72c27..9bee1152b5 100644 --- a/src/components/ha-related-items.ts +++ b/src/components/ha-related-items.ts @@ -1,10 +1,10 @@ import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -34,13 +34,13 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) { @property() public itemId!: string; - @internalProperty() private _entries?: ConfigEntry[]; + @state() private _entries?: ConfigEntry[]; - @internalProperty() private _devices?: DeviceRegistryEntry[]; + @state() private _devices?: DeviceRegistryEntry[]; - @internalProperty() private _areas?: AreaRegistryEntry[]; + @state() private _areas?: AreaRegistryEntry[]; - @internalProperty() private _related?: RelatedResult; + @state() private _related?: RelatedResult; public hassSubscribe(): UnsubscribeFunc[] { return [ @@ -303,7 +303,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) { fireEvent(this, "hass-more-info", { entityId }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` a { color: var(--primary-color); diff --git a/src/components/ha-relative-time.ts b/src/components/ha-relative-time.ts index 98b9228dec..83ad795ac7 100644 --- a/src/components/ha-relative-time.ts +++ b/src/components/ha-relative-time.ts @@ -2,13 +2,13 @@ import { customElement, property, PropertyValues, - UpdatingElement, + ReactiveElement, } from "lit-element"; import relativeTime from "../common/datetime/relative_time"; import type { HomeAssistant } from "../types"; @customElement("ha-relative-time") -class HaRelativeTime extends UpdatingElement { +class HaRelativeTime extends ReactiveElement { @property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public datetime?: string | Date; @@ -27,6 +27,10 @@ class HaRelativeTime extends UpdatingElement { } } + protected createRenderRoot() { + return this; + } + protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); this._updateRelative(); diff --git a/src/components/ha-selector/ha-selector-action.ts b/src/components/ha-selector/ha-selector-action.ts index 8b2ca84fca..321e5f4f00 100644 --- a/src/components/ha-selector/ha-selector-action.ts +++ b/src/components/ha-selector/ha-selector-action.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -31,7 +31,7 @@ export class HaActionSelector extends LitElement { >`; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-automation-action { display: block; diff --git a/src/components/ha-selector/ha-selector-area.ts b/src/components/ha-selector/ha-selector-area.ts index c3443291d6..5fb5621570 100644 --- a/src/components/ha-selector/ha-selector-area.ts +++ b/src/components/ha-selector/ha-selector-area.ts @@ -1,10 +1,4 @@ -import { - customElement, - html, - internalProperty, - LitElement, - property, -} from "lit-element"; +import { customElement, html, state, LitElement, property } from "lit-element"; import { ConfigEntry, getConfigEntries } from "../../data/config_entries"; import { DeviceRegistryEntry } from "../../data/device_registry"; import { EntityRegistryEntry } from "../../data/entity_registry"; @@ -22,7 +16,7 @@ export class HaAreaSelector extends LitElement { @property() public label?: string; - @internalProperty() public _configEntries?: ConfigEntry[]; + @state() public _configEntries?: ConfigEntry[]; @property({ type: Boolean }) public disabled = false; diff --git a/src/components/ha-selector/ha-selector-boolean.ts b/src/components/ha-selector/ha-selector-boolean.ts index 0f56180fe5..7299316b72 100644 --- a/src/components/ha-selector/ha-selector-boolean.ts +++ b/src/components/ha-selector/ha-selector-boolean.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -39,7 +39,7 @@ export class HaBooleanSelector extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-formfield { width: 100%; diff --git a/src/components/ha-selector/ha-selector-device.ts b/src/components/ha-selector/ha-selector-device.ts index 9446c16a51..b528beb784 100644 --- a/src/components/ha-selector/ha-selector-device.ts +++ b/src/components/ha-selector/ha-selector-device.ts @@ -1,10 +1,4 @@ -import { - customElement, - html, - internalProperty, - LitElement, - property, -} from "lit-element"; +import { customElement, html, state, LitElement, property } from "lit-element"; import { ConfigEntry, getConfigEntries } from "../../data/config_entries"; import { DeviceRegistryEntry } from "../../data/device_registry"; import { DeviceSelector } from "../../data/selector"; @@ -21,7 +15,7 @@ export class HaDeviceSelector extends LitElement { @property() public label?: string; - @internalProperty() public _configEntries?: ConfigEntry[]; + @state() public _configEntries?: ConfigEntry[]; @property({ type: Boolean }) public disabled = false; diff --git a/src/components/ha-selector/ha-selector-entity.ts b/src/components/ha-selector/ha-selector-entity.ts index 21977aa46c..884905f7bb 100644 --- a/src/components/ha-selector/ha-selector-entity.ts +++ b/src/components/ha-selector/ha-selector-entity.ts @@ -1,11 +1,5 @@ import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; -import { - customElement, - html, - internalProperty, - LitElement, - property, -} from "lit-element"; +import { customElement, html, state, LitElement, property } from "lit-element"; import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { subscribeEntityRegistry } from "../../data/entity_registry"; import { EntitySelector } from "../../data/selector"; @@ -19,7 +13,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) { @property() public selector!: EntitySelector; - @internalProperty() private _entityPlaformLookup?: Record; + @state() private _entityPlaformLookup?: Record; @property() public value?: any; diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts index 6360ed1568..393dbb7d00 100644 --- a/src/components/ha-selector/ha-selector-number.ts +++ b/src/components/ha-selector/ha-selector-number.ts @@ -1,7 +1,7 @@ import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -92,7 +92,7 @@ export class HaNumberSelector extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts index 55a2fa7357..ae19d099d5 100644 --- a/src/components/ha-selector/ha-selector-select.ts +++ b/src/components/ha-selector/ha-selector-select.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -52,7 +52,7 @@ export class HaSelectSelector extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-paper-dropdown-menu { width: 100%; diff --git a/src/components/ha-selector/ha-selector-target.ts b/src/components/ha-selector/ha-selector-target.ts index 60c93c8857..814b69275c 100644 --- a/src/components/ha-selector/ha-selector-target.ts +++ b/src/components/ha-selector/ha-selector-target.ts @@ -10,10 +10,10 @@ import { } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, } from "lit-element"; @@ -38,9 +38,9 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) { @property() public label?: string; - @internalProperty() private _entityPlaformLookup?: Record; + @state() private _entityPlaformLookup?: Record; - @internalProperty() private _configEntries?: ConfigEntry[]; + @state() private _configEntries?: ConfigEntry[]; @property({ type: Boolean }) public disabled = false; @@ -153,7 +153,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) { ); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-target-picker { display: block; diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts index 8fab54997b..50ae36f237 100644 --- a/src/components/ha-service-control.ts +++ b/src/components/ha-service-control.ts @@ -6,10 +6,10 @@ import { } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -55,13 +55,13 @@ export class HaServiceControl extends LitElement { data?: Record; }; - @internalProperty() private _value!: this["value"]; + @state() private _value!: this["value"]; @property({ reflect: true, type: Boolean }) public narrow!: boolean; @property({ type: Boolean }) public showAdvanced?: boolean; - @internalProperty() private _checkedKeys = new Set(); + @state() private _checkedKeys = new Set(); @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor; @@ -407,7 +407,7 @@ export class HaServiceControl extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-settings-row { padding: var(--service-control-padding, 0 16px); diff --git a/src/components/ha-service-picker.ts b/src/components/ha-service-picker.ts index 17bff6027f..1f7d8449d2 100644 --- a/src/components/ha-service-picker.ts +++ b/src/components/ha-service-picker.ts @@ -1,4 +1,4 @@ -import { html, internalProperty, LitElement, property } from "lit-element"; +import { html, state, LitElement, property } from "lit-element"; import memoizeOne from "memoize-one"; import { fireEvent } from "../common/dom/fire_event"; import { LocalizeFunc } from "../common/translations/localize"; @@ -38,7 +38,7 @@ class HaServicePicker extends LitElement { @property() public value?: string; - @internalProperty() private _filter?: string; + @state() private _filter?: string; protected render() { return html` diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts index 12f37bfe79..aa6f9d5707 100644 --- a/src/components/ha-settings-row.ts +++ b/src/components/ha-settings-row.ts @@ -1,7 +1,7 @@ import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -32,7 +32,7 @@ export class HaSettingsRow extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts index 83502db730..a3fe63f50d 100644 --- a/src/components/ha-sidebar.ts +++ b/src/components/ha-sidebar.ts @@ -15,14 +15,15 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, eventOptions, html, - internalProperty, + state, LitElement, property, PropertyValues, + CSSResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; import { guard } from "lit-html/directives/guard"; @@ -171,15 +172,15 @@ class HaSidebar extends LitElement { @property({ type: Boolean }) public editMode = false; - @internalProperty() private _externalConfig?: ExternalConfig; + @state() private _externalConfig?: ExternalConfig; - @internalProperty() private _notifications?: PersistentNotification[]; + @state() private _notifications?: PersistentNotification[]; // property used only in css // @ts-ignore @property({ type: Boolean, reflect: true }) public rtl = false; - @internalProperty() private _renderEmptySortable = false; + @state() private _renderEmptySortable = false; private _mouseLeaveTimeout?: number; @@ -524,7 +525,7 @@ class HaSidebar extends LitElement { ]); const style = document.createElement("style"); - style.innerHTML = sortStylesImport.sortableStyles.cssText; + style.innerHTML = (sortStylesImport.sortableStyles as CSSResult).cssText; this.shadowRoot!.appendChild(style); Sortable = sortableImport.Sortable; @@ -741,7 +742,7 @@ class HaSidebar extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleScrollbar, css` diff --git a/src/components/ha-svg-icon.ts b/src/components/ha-svg-icon.ts index ecc95d0d44..b803d3bc6d 100644 --- a/src/components/ha-svg-icon.ts +++ b/src/components/ha-svg-icon.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, LitElement, property, @@ -26,7 +26,7 @@ export class HaSvgIcon extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: var(--ha-icon-display, inline-flex); diff --git a/src/components/ha-switch.ts b/src/components/ha-switch.ts index ed5c123a1d..77ce4b30dd 100644 --- a/src/components/ha-switch.ts +++ b/src/components/ha-switch.ts @@ -1,7 +1,7 @@ import "@material/mwc-switch"; import type { Switch } from "@material/mwc-switch"; import { style } from "@material/mwc-switch/mwc-switch-css"; -import { css, CSSResult, customElement, property } from "lit-element"; +import { css, CSSResultGroup, customElement, property } from "lit-element"; import { forwardHaptic } from "../data/haptics"; import { Constructor } from "../types"; @@ -27,7 +27,7 @@ export class HaSwitch extends MwcSwitch { }); } - protected static get styles(): CSSResult[] { + protected static get styles(): CSSResultGroup { return [ style, css` diff --git a/src/components/ha-tab.ts b/src/components/ha-tab.ts index c887c6c440..7ab6364e09 100644 --- a/src/components/ha-tab.ts +++ b/src/components/ha-tab.ts @@ -3,11 +3,11 @@ import "@material/mwc-ripple/mwc-ripple"; import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers"; import { css, - CSSResult, + CSSResultGroup, customElement, eventOptions, html, - internalProperty, + state, LitElement, property, queryAsync, @@ -27,7 +27,7 @@ export class HaTab extends LitElement { @queryAsync("mwc-ripple") private _ripple!: Promise; - @internalProperty() private _shouldRenderRipple = false; + @state() private _shouldRenderRipple = false; protected render(): TemplateResult { return html` @@ -92,7 +92,7 @@ export class HaTab extends LitElement { this._rippleHandlers.endFocus(); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` div { padding: 0 32px; diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index d082962d9b..b2ceeb39f1 100644 --- a/src/components/ha-target-picker.ts +++ b/src/components/ha-target-picker.ts @@ -16,10 +16,10 @@ import { } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -86,15 +86,15 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { @property({ type: Boolean, reflect: true }) public disabled = false; - @internalProperty() private _areas?: { [areaId: string]: AreaRegistryEntry }; + @state() private _areas?: { [areaId: string]: AreaRegistryEntry }; - @internalProperty() private _devices?: { + @state() private _devices?: { [deviceId: string]: DeviceRegistryEntry; }; - @internalProperty() private _entities?: EntityRegistryEntry[]; + @state() private _entities?: EntityRegistryEntry[]; - @internalProperty() private _addMode?: "area_id" | "entity_id" | "device_id"; + @state() private _addMode?: "area_id" | "entity_id" | "device_id"; @query("#input") private _inputElement?; @@ -534,7 +534,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { return true; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ${unsafeCSS(chipStyles)} .mdc-chip { diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts index a702be77ac..f0eabb168d 100644 --- a/src/components/ha-yaml-editor.ts +++ b/src/components/ha-yaml-editor.ts @@ -2,7 +2,7 @@ import { safeDump, safeLoad } from "js-yaml"; import { customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -32,7 +32,7 @@ export class HaYamlEditor extends LitElement { @property() public label?: string; - @internalProperty() private _yaml = ""; + @state() private _yaml = ""; public setValue(value): void { try { diff --git a/src/components/map/ha-location-editor.ts b/src/components/map/ha-location-editor.ts index 8ba1ec3c2b..8a7954cba6 100644 --- a/src/components/map/ha-location-editor.ts +++ b/src/components/map/ha-location-editor.ts @@ -10,7 +10,7 @@ import { } from "leaflet"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -271,7 +271,7 @@ class LocationEditor extends LitElement { (this._locationMarker as Circle).setStyle({ color: this.radiusColor }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts index 5991f36706..2dda009670 100644 --- a/src/components/map/ha-locations-editor.ts +++ b/src/components/map/ha-locations-editor.ts @@ -10,7 +10,7 @@ import { } from "leaflet"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -303,7 +303,7 @@ export class HaLocationsEditor extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index 98113ab100..3e4df08b30 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -1,7 +1,7 @@ import { Circle, Layer, Map, Marker, TileLayer } from "leaflet"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -326,7 +326,7 @@ class HaMap extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts index 3ef4f00c04..ba885213fa 100644 --- a/src/components/media-player/dialog-media-player-browse.ts +++ b/src/components/media-player/dialog-media-player-browse.ts @@ -1,9 +1,9 @@ import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -23,15 +23,15 @@ import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog"; class DialogMediaPlayerBrowse extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _entityId!: string; + @state() private _entityId!: string; - @internalProperty() private _mediaContentId?: string; + @state() private _mediaContentId?: string; - @internalProperty() private _mediaContentType?: string; + @state() private _mediaContentType?: string; - @internalProperty() private _action?: MediaPlayerBrowseAction; + @state() private _action?: MediaPlayerBrowseAction; - @internalProperty() private _params?: MediaPlayerBrowseDialogParams; + @state() private _params?: MediaPlayerBrowseDialogParams; public showDialog(params: MediaPlayerBrowseDialogParams): void { this._params = params; @@ -81,7 +81,7 @@ class DialogMediaPlayerBrowse extends LitElement { } } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 88ccff39d1..1c7e093527 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -7,11 +7,11 @@ import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResultArray, + CSSResultGroup, customElement, eventOptions, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -72,11 +72,11 @@ export class HaMediaPlayerBrowse extends LitElement { @property({ type: Boolean, attribute: "scroll", reflect: true }) private _scrolled = false; - @internalProperty() private _loading = false; + @state() private _loading = false; - @internalProperty() private _error?: { message: string; code: string }; + @state() private _error?: { message: string; code: string }; - @internalProperty() private _mediaPlayerItems: MediaPlayerItem[] = []; + @state() private _mediaPlayerItems: MediaPlayerItem[] = []; @query(".header") private _header?: HTMLDivElement; @@ -610,7 +610,7 @@ export class HaMediaPlayerBrowse extends LitElement { return html`${err.message}`; } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/components/state-history-charts.ts b/src/components/state-history-charts.ts index 49ac8049c5..20abd72ae2 100644 --- a/src/components/state-history-charts.ts +++ b/src/components/state-history-charts.ts @@ -1,7 +1,7 @@ import "./ha-circular-progress"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -98,7 +98,7 @@ class StateHistoryCharts extends LitElement { return !this.isLoadingData && historyDataEmpty; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/components/trace/ha-timeline.ts b/src/components/trace/ha-timeline.ts index d9572c4a67..4ce8b7b495 100644 --- a/src/components/trace/ha-timeline.ts +++ b/src/components/trace/ha-timeline.ts @@ -6,7 +6,7 @@ import { css, property, TemplateResult, - internalProperty, + state, } from "lit-element"; import { buttonLinkStyle } from "../../resources/styles"; import "../ha-svg-icon"; @@ -23,7 +23,7 @@ export class HaTimeline extends LitElement { @property({ attribute: false }) public moreItems?: TemplateResult[]; - @internalProperty() private _showMore = false; + @state() private _showMore = false; protected render() { return html` diff --git a/src/components/trace/hat-trace-timeline.ts b/src/components/trace/hat-trace-timeline.ts index 49898be86f..ea6746322e 100644 --- a/src/components/trace/hat-trace-timeline.ts +++ b/src/components/trace/hat-trace-timeline.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -568,7 +568,7 @@ export class HaAutomationTracer extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ css` ha-timeline[lastItem].condition { diff --git a/src/components/user/ha-person-badge.ts b/src/components/user/ha-person-badge.ts index eead0784c2..07cdd916ac 100644 --- a/src/components/user/ha-person-badge.ts +++ b/src/components/user/ha-person-badge.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -37,7 +37,7 @@ class PersonBadge extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: contents; diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts index cb978dd004..3e5411d8dc 100644 --- a/src/components/user/ha-user-badge.ts +++ b/src/components/user/ha-user-badge.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -36,7 +36,7 @@ class UserBadge extends LitElement { @property({ attribute: false }) public user?: User | CurrentUser; - @internalProperty() private _personPicture?: string; + @state() private _personPicture?: string; private _personEntityId?: string; @@ -53,9 +53,9 @@ class UserBadge extends LitElement { this.hass.states[this._personEntityId] !== oldHass.states[this._personEntityId] ) { - const state = this.hass.states[this._personEntityId]; - if (state) { - this._personPicture = state.attributes.entity_picture; + const entityState = this.hass.states[this._personEntityId]; + if (entityState) { + this._personPicture = entityState.attributes.entity_picture; } else { this._getPersonPicture(); } @@ -102,7 +102,7 @@ class UserBadge extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: contents; diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts index e8cd417bc6..9a028ad7c6 100644 --- a/src/components/user/ha-user-picker.ts +++ b/src/components/user/ha-user-picker.ts @@ -5,7 +5,7 @@ import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, html, LitElement, property, @@ -96,7 +96,7 @@ class HaUserPicker extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: inline-block; diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts index 36a8012596..886307f5f1 100644 --- a/src/components/user/ha-users-picker.ts +++ b/src/components/user/ha-users-picker.ts @@ -1,7 +1,7 @@ import { mdiClose } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -149,7 +149,7 @@ class HaUsersPickerLight extends LitElement { this._updateUsers(this._currentUsers.filter((user) => user !== userId)); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts index ece523c8fa..442be29383 100644 --- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts +++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -28,15 +28,15 @@ import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry class DialogConfigEntrySystemOptions extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _disableNewEntities!: boolean; + @state() private _disableNewEntities!: boolean; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _params?: ConfigEntrySystemOptionsDialogParams; + @state() private _params?: ConfigEntrySystemOptionsDialogParams; - @internalProperty() private _loading = false; + @state() private _loading = false; - @internalProperty() private _submitting = false; + @state() private _submitting = false; public async showDialog( params: ConfigEntrySystemOptionsDialogParams @@ -154,7 +154,7 @@ class DialogConfigEntrySystemOptions extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts index c4cb084fab..86529c24dc 100644 --- a/src/dialogs/config-flow/dialog-data-entry-flow.ts +++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts @@ -3,10 +3,10 @@ import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, PropertyValues, TemplateResult, @@ -61,27 +61,27 @@ declare global { class DataEntryFlowDialog extends LitElement { public hass!: HomeAssistant; - @internalProperty() private _params?: DataEntryFlowDialogParams; + @state() private _params?: DataEntryFlowDialogParams; - @internalProperty() private _loading = true; + @state() private _loading = true; private _instance = instance; - @internalProperty() private _step: + @state() private _step: | DataEntryFlowStep | undefined // Null means we need to pick a config flow | null; - @internalProperty() private _devices?: DeviceRegistryEntry[]; + @state() private _devices?: DeviceRegistryEntry[]; - @internalProperty() private _areas?: AreaRegistryEntry[]; + @state() private _areas?: AreaRegistryEntry[]; - @internalProperty() private _handlers?: string[]; + @state() private _handlers?: string[]; - @internalProperty() private _handler?: string; + @state() private _handler?: string; - @internalProperty() private _flowsInProgress?: DataEntryFlowProgress[]; + @state() private _flowsInProgress?: DataEntryFlowProgress[]; private _unsubAreas?: UnsubscribeFunc; @@ -400,7 +400,7 @@ class DataEntryFlowDialog extends LitElement { this._step = step; } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/dialogs/config-flow/step-flow-abort.ts b/src/dialogs/config-flow/step-flow-abort.ts index 7309ff2226..041e681e15 100644 --- a/src/dialogs/config-flow/step-flow-abort.ts +++ b/src/dialogs/config-flow/step-flow-abort.ts @@ -1,6 +1,6 @@ import "@material/mwc-button"; import { - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -47,7 +47,7 @@ class StepFlowAbort extends LitElement { fireEvent(this, "flow-update", { step: undefined }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return configFlowContentStyles; } } diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts index 46b67ab1a6..8ee662ba66 100644 --- a/src/dialogs/config-flow/step-flow-create-entry.ts +++ b/src/dialogs/config-flow/step-flow-create-entry.ts @@ -4,7 +4,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -109,7 +109,7 @@ class StepFlowCreateEntry extends LitElement { } } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ configFlowContentStyles, css` diff --git a/src/dialogs/config-flow/step-flow-external.ts b/src/dialogs/config-flow/step-flow-external.ts index 3f9c84bbc7..28261e6433 100644 --- a/src/dialogs/config-flow/step-flow-external.ts +++ b/src/dialogs/config-flow/step-flow-external.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -48,7 +48,7 @@ class StepFlowExternal extends LitElement { window.open(this.step.url); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ configFlowContentStyles, css` diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts index 5c569873d6..f168cc68e2 100644 --- a/src/dialogs/config-flow/step-flow-form.ts +++ b/src/dialogs/config-flow/step-flow-form.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -183,7 +183,7 @@ class StepFlowForm extends LitElement { private _errorCallback = (error: string) => this.flowConfig.renderShowFormStepFieldError(this.hass, this.step, error); - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ configFlowContentStyles, css` diff --git a/src/dialogs/config-flow/step-flow-loading.ts b/src/dialogs/config-flow/step-flow-loading.ts index 8b4d28735b..c8df08ae34 100644 --- a/src/dialogs/config-flow/step-flow-loading.ts +++ b/src/dialogs/config-flow/step-flow-loading.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -22,7 +22,7 @@ class StepFlowLoading extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .init-spinner { padding: 50px 100px; diff --git a/src/dialogs/config-flow/step-flow-pick-flow.ts b/src/dialogs/config-flow/step-flow-pick-flow.ts index b75f2e3b38..94f4ae203e 100644 --- a/src/dialogs/config-flow/step-flow-pick-flow.ts +++ b/src/dialogs/config-flow/step-flow-pick-flow.ts @@ -3,7 +3,7 @@ import "@polymer/paper-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -89,7 +89,7 @@ class StepFlowPickFlow extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ configFlowContentStyles, css` diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index 660416a71e..4ab3e2eeda 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -3,10 +3,10 @@ import "@polymer/paper-item/paper-item-body"; import Fuse from "fuse.js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -46,7 +46,7 @@ class StepFlowPickHandler extends LitElement { @property() public showAdvanced?: boolean; - @internalProperty() private _filter?: string; + @state() private _filter?: string; private _width?: number; @@ -175,7 +175,7 @@ class StepFlowPickHandler extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ configFlowContentStyles, css` diff --git a/src/dialogs/config-flow/step-flow-progress.ts b/src/dialogs/config-flow/step-flow-progress.ts index fc12f9b5c5..347a178d95 100644 --- a/src/dialogs/config-flow/step-flow-progress.ts +++ b/src/dialogs/config-flow/step-flow-progress.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -39,7 +39,7 @@ class StepFlowProgress extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ configFlowContentStyles, css` diff --git a/src/dialogs/domain-toggler/dialog-domain-toggler.ts b/src/dialogs/domain-toggler/dialog-domain-toggler.ts index 4b2aa3aea4..e07d2d9b4a 100644 --- a/src/dialogs/domain-toggler/dialog-domain-toggler.ts +++ b/src/dialogs/domain-toggler/dialog-domain-toggler.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -24,7 +24,7 @@ class DomainTogglerDialog implements HassDialog { public hass!: HomeAssistant; - @internalProperty() private _params?: HaDomainTogglerDialogParams; + @state() private _params?: HaDomainTogglerDialogParams; public showDialog(params: HaDomainTogglerDialogParams): void { this._params = params; @@ -91,7 +91,7 @@ class DomainTogglerDialog ev.currentTarget.blur(); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts index 3dcbbd37f8..5ccd33d199 100644 --- a/src/dialogs/generic/dialog-box.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -2,10 +2,10 @@ import "@material/mwc-button/mwc-button"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -23,9 +23,9 @@ import { DialogBoxParams } from "./show-dialog-box"; class DialogBox extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _params?: DialogBoxParams; + @state() private _params?: DialogBoxParams; - @internalProperty() private _value?: string; + @state() private _value?: string; public async showDialog(params: DialogBoxParams): Promise { this._params = params; @@ -154,7 +154,7 @@ class DialogBox extends LitElement { fireEvent(this, "dialog-closed", { dialog: this.localName }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts index 82dd0bc958..2571ae29fe 100644 --- a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts +++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts @@ -4,10 +4,10 @@ import Cropper from "cropperjs"; import cropperCss from "cropperjs/dist/cropper.css"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -25,9 +25,9 @@ import { HaImageCropperDialogParams } from "./show-image-cropper-dialog"; export class HaImagecropperDialog extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _params?: HaImageCropperDialogParams; + @state() private _params?: HaImageCropperDialogParams; - @internalProperty() private _open = false; + @state() private _open = false; @query("img", true) private _image!: HTMLImageElement; @@ -104,7 +104,7 @@ export class HaImagecropperDialog extends LitElement { ); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/dialogs/more-info/controls/more-info-automation.ts b/src/dialogs/more-info/controls/more-info-automation.ts index 293b56f6ad..cdd9fe7729 100644 --- a/src/dialogs/more-info/controls/more-info-automation.ts +++ b/src/dialogs/more-info/controls/more-info-automation.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -50,7 +50,7 @@ class MoreInfoAutomation extends LitElement { triggerAutomationActions(this.hass, this.stateObj!.entity_id); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .flex { display: flex; diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts index d5ed6dfb5c..1dfcd4157e 100644 --- a/src/dialogs/more-info/controls/more-info-camera.ts +++ b/src/dialogs/more-info/controls/more-info-camera.ts @@ -2,9 +2,9 @@ import "@polymer/paper-checkbox/paper-checkbox"; import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -27,9 +27,9 @@ class MoreInfoCamera extends LitElement { @property() public stateObj?: CameraEntity; - @internalProperty() private _cameraPrefs?: CameraPreferences; + @state() private _cameraPrefs?: CameraPreferences; - @internalProperty() private _attached = false; + @state() private _attached = false; public connectedCallback() { super.connectedCallback(); @@ -113,7 +113,7 @@ class MoreInfoCamera extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts index 02d48e8a1b..bd80dfc223 100644 --- a/src/dialogs/more-info/controls/more-info-climate.ts +++ b/src/dialogs/more-info/controls/more-info-climate.ts @@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, html, LitElement, property, @@ -437,7 +437,7 @@ class MoreInfoClimate extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { color: var(--primary-text-color); diff --git a/src/dialogs/more-info/controls/more-info-counter.ts b/src/dialogs/more-info/controls/more-info-counter.ts index 330f504f50..fcdff2f781 100644 --- a/src/dialogs/more-info/controls/more-info-counter.ts +++ b/src/dialogs/more-info/controls/more-info-counter.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -59,7 +59,7 @@ class MoreInfoCounter extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .actions { margin: 8px 0; diff --git a/src/dialogs/more-info/controls/more-info-group.ts b/src/dialogs/more-info/controls/more-info-group.ts index 615bf3314d..597cf1d5a4 100644 --- a/src/dialogs/more-info/controls/more-info-group.ts +++ b/src/dialogs/more-info/controls/more-info-group.ts @@ -1,8 +1,8 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, - internalProperty, + CSSResultGroup, + state, LitElement, property, PropertyValues, @@ -23,9 +23,9 @@ class MoreInfoGroup extends LitElement { @property() public stateObj?: GroupEntity; - @internalProperty() private _groupDomainStateObj?: HassEntity; + @state() private _groupDomainStateObj?: HassEntity; - @internalProperty() private _moreInfoType?: string; + @state() private _moreInfoType?: string; protected updated(changedProperties: PropertyValues) { if ( @@ -38,7 +38,7 @@ class MoreInfoGroup extends LitElement { const states = this.stateObj.attributes.entity_id .map((entity_id) => this.hass.states[entity_id]) - .filter((state) => state); + .filter((entityState) => entityState); if (!states.length) { this._groupDomainStateObj = undefined; @@ -53,7 +53,9 @@ class MoreInfoGroup extends LitElement { // first child above the children of the current group if ( groupDomain !== "group" && - states.every((state) => groupDomain === computeStateDomain(state)) + states.every( + (entityState) => groupDomain === computeStateDomain(entityState) + ) ) { this._groupDomainStateObj = { ...baseStateObj, @@ -80,20 +82,20 @@ class MoreInfoGroup extends LitElement { }) : ""} ${this.stateObj.attributes.entity_id.map((entity_id) => { - const state = this.hass!.states[entity_id]; - if (!state) { + const entityState = this.hass!.states[entity_id]; + if (!entityState) { return ""; } return html` `; })}`; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` state-card-content { display: block; diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts index 56f89af45d..7a118a2521 100644 --- a/src/dialogs/more-info/controls/more-info-humidifier.ts +++ b/src/dialogs/more-info/controls/more-info-humidifier.ts @@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, html, LitElement, property, @@ -171,7 +171,7 @@ class MoreInfoHumidifier extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { color: var(--primary-text-color); diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts index 18e355b81f..2cff114519 100644 --- a/src/dialogs/more-info/controls/more-info-light.ts +++ b/src/dialogs/more-info/controls/more-info-light.ts @@ -2,10 +2,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -41,27 +41,27 @@ class MoreInfoLight extends LitElement { @property({ attribute: false }) public stateObj?: LightEntity; - @internalProperty() private _brightnessSliderValue = 0; + @state() private _brightnessSliderValue = 0; - @internalProperty() private _ctSliderValue?: number; + @state() private _ctSliderValue?: number; - @internalProperty() private _cwSliderValue?: number; + @state() private _cwSliderValue?: number; - @internalProperty() private _wwSliderValue?: number; + @state() private _wwSliderValue?: number; - @internalProperty() private _wvSliderValue?: number; + @state() private _wvSliderValue?: number; - @internalProperty() private _colorBrightnessSliderValue?: number; + @state() private _colorBrightnessSliderValue?: number; - @internalProperty() private _brightnessAdjusted?: number; + @state() private _brightnessAdjusted?: number; - @internalProperty() private _hueSegments = 24; + @state() private _hueSegments = 24; - @internalProperty() private _saturationSegments = 8; + @state() private _saturationSegments = 8; - @internalProperty() private _colorPickerColor?: [number, number, number]; + @state() private _colorPickerColor?: [number, number, number]; - @internalProperty() private _mode?: "color" | LightColorModes.COLOR_TEMP; + @state() private _mode?: "color" | LightColorModes.COLOR_TEMP; protected render(): TemplateResult { if (!this.hass || !this.stateObj) { @@ -539,7 +539,7 @@ class MoreInfoLight extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .content { display: flex; 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 95ebc74d26..c617a8f761 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -6,7 +6,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -203,7 +203,7 @@ class MoreInfoMediaPlayer extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-icon-button[action="turn_off"], ha-icon-button[action="turn_on"], diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts index 4caa2ea3d3..57e8e38470 100644 --- a/src/dialogs/more-info/controls/more-info-person.ts +++ b/src/dialogs/more-info/controls/more-info-person.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -68,7 +68,7 @@ class MoreInfoPerson extends LitElement { fireEvent(this, "hass-more-info", { entityId: null }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .flex { display: flex; diff --git a/src/dialogs/more-info/controls/more-info-remote.ts b/src/dialogs/more-info/controls/more-info-remote.ts index 276b862b33..e144094c8d 100644 --- a/src/dialogs/more-info/controls/more-info-remote.ts +++ b/src/dialogs/more-info/controls/more-info-remote.ts @@ -2,7 +2,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -75,7 +75,7 @@ class MoreInfoRemote extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` paper-item { cursor: pointer; diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts index 1c364318b9..61005dda6a 100644 --- a/src/dialogs/more-info/controls/more-info-script.ts +++ b/src/dialogs/more-info/controls/more-info-script.ts @@ -1,7 +1,7 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -42,7 +42,7 @@ class MoreInfoScript extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .flex { display: flex; diff --git a/src/dialogs/more-info/controls/more-info-sun.ts b/src/dialogs/more-info/controls/more-info-sun.ts index 22904234d5..9f8b49d71e 100644 --- a/src/dialogs/more-info/controls/more-info-sun.ts +++ b/src/dialogs/more-info/controls/more-info-sun.ts @@ -1,7 +1,7 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -68,7 +68,7 @@ class MoreInfoSun extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .row { margin: 0; diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts index 80f8819009..a9b07bfb81 100644 --- a/src/dialogs/more-info/controls/more-info-timer.ts +++ b/src/dialogs/more-info/controls/more-info-timer.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -73,7 +73,7 @@ class MoreInfoTimer extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .actions { margin: 8px 0; diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts index f6285c28d2..99716e91aa 100644 --- a/src/dialogs/more-info/controls/more-info-vacuum.ts +++ b/src/dialogs/more-info/controls/more-info-vacuum.ts @@ -2,7 +2,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -224,7 +224,7 @@ class MoreInfoVacuum extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { line-height: 1.5; diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index 0f2b63313d..dc4a529985 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -22,7 +22,7 @@ import { import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, LitElement, property, @@ -224,7 +224,7 @@ class MoreInfoWeather extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-svg-icon { color: var(--paper-item-icon-color); diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index 0e57bc9112..493c04f245 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -7,7 +7,7 @@ import { css, customElement, html, - internalProperty, + state, LitElement, property, } from "lit-element"; @@ -58,9 +58,9 @@ export class MoreInfoDialog extends LitElement { @property({ type: Boolean, reflect: true }) public large = false; - @internalProperty() private _entityId?: string | null; + @state() private _entityId?: string | null; - @internalProperty() private _currTabIndex = 0; + @state() private _currTabIndex = 0; public showDialog(params: MoreInfoDialogParams) { this._entityId = params.entityId; diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts index eb393e3395..2374ccd7e4 100644 --- a/src/dialogs/more-info/ha-more-info-history.ts +++ b/src/dialogs/more-info/ha-more-info-history.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -20,7 +20,7 @@ export class MoreInfoHistory extends LitElement { @property() public entityId!: string; - @internalProperty() private _stateHistory?: HistoryResult; + @state() private _stateHistory?: HistoryResult; private _throttleGetStateHistory = throttle(() => { this._getStateHistory(); diff --git a/src/dialogs/more-info/ha-more-info-logbook.ts b/src/dialogs/more-info/ha-more-info-logbook.ts index 397dc10fc4..2af0eb69f4 100644 --- a/src/dialogs/more-info/ha-more-info-logbook.ts +++ b/src/dialogs/more-info/ha-more-info-logbook.ts @@ -2,7 +2,7 @@ import { css, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -26,11 +26,11 @@ export class MoreInfoLogbook extends LitElement { @property() public entityId!: string; - @internalProperty() private _logbookEntries?: LogbookEntry[]; + @state() private _logbookEntries?: LogbookEntry[]; - @internalProperty() private _traceContexts?: TraceContexts; + @state() private _traceContexts?: TraceContexts; - @internalProperty() private _persons = {}; + @state() private _persons = {}; private _lastLogbookDate?: Date; diff --git a/src/dialogs/more-info/more-info-content.ts b/src/dialogs/more-info/more-info-content.ts index 4adae879ad..0c5ddab96c 100644 --- a/src/dialogs/more-info/more-info-content.ts +++ b/src/dialogs/more-info/more-info-content.ts @@ -1,17 +1,21 @@ import { HassEntity } from "home-assistant-js-websocket"; -import { property, PropertyValues, UpdatingElement } from "lit-element"; +import { property, PropertyValues, ReactiveElement } from "lit-element"; import dynamicContentUpdater from "../../common/dom/dynamic_content_updater"; import { importMoreInfoControl } from "../../panels/lovelace/custom-card-helpers"; import { HomeAssistant } from "../../types"; import { stateMoreInfoType } from "./state_more_info_control"; -class MoreInfoContent extends UpdatingElement { +class MoreInfoContent extends ReactiveElement { @property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public stateObj?: HassEntity; private _detachedChild?: ChildNode; + protected createRenderRoot() { + return this; + } + // This is not a lit element, but an updating element, so we implement update protected update(changedProps: PropertyValues): void { super.update(changedProps); diff --git a/src/dialogs/notifications/notification-item-template.ts b/src/dialogs/notifications/notification-item-template.ts index f6b5d319d8..28fb986784 100644 --- a/src/dialogs/notifications/notification-item-template.ts +++ b/src/dialogs/notifications/notification-item-template.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -20,7 +20,7 @@ export class HuiNotificationItemTemplate extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .contents { padding: 16px; diff --git a/src/dialogs/notifications/persistent-notification-item.ts b/src/dialogs/notifications/persistent-notification-item.ts index 44cab069de..cb66b0fad8 100644 --- a/src/dialogs/notifications/persistent-notification-item.ts +++ b/src/dialogs/notifications/persistent-notification-item.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -57,7 +57,7 @@ export class HuiPersistentNotificationItem extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .time { display: flex; diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index a570e6a699..b398a9759c 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -15,7 +15,7 @@ import { css, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -87,19 +87,19 @@ type BaseNavigationCommand = Pick< export class QuickBar extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _commandItems?: CommandItem[]; + @state() private _commandItems?: CommandItem[]; - @internalProperty() private _entityItems?: EntityItem[]; + @state() private _entityItems?: EntityItem[]; - @internalProperty() private _filter = ""; + @state() private _filter = ""; - @internalProperty() private _search = ""; + @state() private _search = ""; - @internalProperty() private _opened = false; + @state() private _opened = false; - @internalProperty() private _commandMode = false; + @state() private _commandMode = false; - @internalProperty() private _done = false; + @state() private _done = false; @query("paper-input", false) private _filterInputField?: HTMLElement; diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts index 31c573e52d..62e9ae5c93 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts @@ -4,10 +4,10 @@ import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -46,16 +46,16 @@ export class HaVoiceCommandDialog extends LitElement { @property() public results: Results | null = null; - @internalProperty() private _conversation: Message[] = [ + @state() private _conversation: Message[] = [ { who: "hass", text: "", }, ]; - @internalProperty() private _opened = false; + @state() private _opened = false; - @internalProperty() private _agentInfo?: AgentInfo; + @state() private _agentInfo?: AgentInfo; @query("#messages", true) private messages!: PaperDialogScrollableElement; @@ -360,7 +360,7 @@ export class HaVoiceCommandDialog extends LitElement { return `message ${message.who} ${message.error ? " error" : ""}`; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/entrypoints/custom-panel.ts b/src/entrypoints/custom-panel.ts index de6df8758a..711bb6db64 100644 --- a/src/entrypoints/custom-panel.ts +++ b/src/entrypoints/custom-panel.ts @@ -10,6 +10,7 @@ import { createCustomPanelElement } from "../util/custom-panel/create-custom-pan import { loadCustomPanel } from "../util/custom-panel/load-custom-panel"; import { setCustomPanelProperties } from "../util/custom-panel/set-custom-panel-properties"; import { baseEntrypointStyles } from "../resources/styles"; +import { CSSResult } from "lit-element"; declare global { interface Window { @@ -101,7 +102,7 @@ function initialize( } const errorStyle = document.createElement("style"); - errorStyle.innerHTML = baseEntrypointStyles.cssText; + errorStyle.innerHTML = (baseEntrypointStyles as CSSResult).cssText; document.body.appendChild(errorStyle); errorScreen.hass = properties.hass; diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index e0fa8384c5..0d657ec304 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import { css, CSSResult, html, LitElement, property } from "lit-element"; +import { css, CSSResultGroup, html, LitElement, property } from "lit-element"; import "../components/ha-circular-progress"; import { removeInitSkeleton } from "../util/init-skeleton"; @@ -43,7 +43,7 @@ class HaInitPage extends LitElement { location.reload(); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` div { height: 100%; diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts index b335218f03..e80a37e0e8 100644 --- a/src/layouts/hass-error-screen.ts +++ b/src/layouts/hass-error-screen.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -58,7 +58,7 @@ class HassErrorScreen extends LitElement { history.back(); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ css` :host { diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts index 763622b3c1..d2f08eb69f 100644 --- a/src/layouts/hass-loading-screen.ts +++ b/src/layouts/hass-loading-screen.ts @@ -1,7 +1,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -54,7 +54,7 @@ class HassLoadingScreen extends LitElement { history.back(); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts index 450e331a73..4c88766031 100644 --- a/src/layouts/hass-router-page.ts +++ b/src/layouts/hass-router-page.ts @@ -1,4 +1,4 @@ -import { property, PropertyValues, UpdatingElement } from "lit-element"; +import { property, PropertyValues, ReactiveElement } from "lit-element"; import memoizeOne from "memoize-one"; import { navigate } from "../common/navigate"; import { Route } from "../types"; @@ -46,7 +46,7 @@ export interface RouterOptions { // Time to wait for code to load before we show loading screen. const LOADING_SCREEN_THRESHOLD = 400; // ms -export class HassRouterPage extends UpdatingElement { +export class HassRouterPage extends ReactiveElement { @property() public route?: Route; protected routerOptions!: RouterOptions; @@ -72,6 +72,10 @@ export class HassRouterPage extends UpdatingElement { }; }); + protected createRenderRoot() { + return this; + } + protected update(changedProps: PropertyValues) { super.update(changedProps); diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts index 780fdb068b..1b100c3892 100644 --- a/src/layouts/hass-subpage.ts +++ b/src/layouts/hass-subpage.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, eventOptions, html, @@ -62,7 +62,7 @@ class HassSubpage extends LitElement { history.back(); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index 1c46a6caba..2b9687b20d 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -3,7 +3,7 @@ import { mdiFilterVariant } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -238,7 +238,7 @@ export class HaTabsSubpageDataTable extends LitElement { fireEvent(this, "clear-filter"); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-data-table { width: 100%; diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index 23c599e613..448c6e3e17 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -1,11 +1,11 @@ import "@material/mwc-ripple"; import { css, - CSSResult, + CSSResultGroup, customElement, eventOptions, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -62,7 +62,7 @@ class HassTabsSubpage extends LitElement { @property({ type: Boolean, reflect: true }) public rtl = false; - @internalProperty() private _activeTab?: PageNavigation; + @state() private _activeTab?: PageNavigation; // @ts-ignore @restoreScroll(".content") private _savedScrollPos?: number; @@ -201,7 +201,7 @@ class HassTabsSubpage extends LitElement { history.back(); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index f90e26b861..78e0630db0 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -4,10 +4,10 @@ import "@polymer/app-layout/app-drawer/app-drawer"; import type { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -46,7 +46,7 @@ class HomeAssistantMain extends LitElement { @property({ type: Boolean }) public narrow?: boolean; - @internalProperty() private _sidebarEditMode = false; + @state() private _sidebarEditMode = false; protected render(): TemplateResult { const hass = this.hass; @@ -186,7 +186,7 @@ class HomeAssistantMain extends LitElement { return this.shadowRoot!.querySelector("app-drawer-layout")!; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { color: var(--primary-text-color); diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts index 42abe399ce..675781d5a5 100644 --- a/src/layouts/home-assistant.ts +++ b/src/layouts/home-assistant.ts @@ -1,10 +1,5 @@ import "@polymer/app-route/app-location"; -import { - customElement, - html, - internalProperty, - PropertyValues, -} from "lit-element"; +import { customElement, html, state, PropertyValues } from "lit-element"; import { navigate } from "../common/navigate"; import { getStorageDefaultPanelUrlPath } from "../data/panel"; import "../resources/custom-card-support"; @@ -21,11 +16,11 @@ import "./home-assistant-main"; @customElement("home-assistant") export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { - @internalProperty() private _route?: Route; + @state() private _route?: Route; - @internalProperty() private _error = false; + @state() private _error = false; - @internalProperty() private _panelUrl?: string; + @state() private _panelUrl?: string; private _haVersion?: string; diff --git a/src/layouts/supervisor-error-screen.ts b/src/layouts/supervisor-error-screen.ts index dab453f236..7d35f95e73 100644 --- a/src/layouts/supervisor-error-screen.ts +++ b/src/layouts/supervisor-error-screen.ts @@ -2,7 +2,7 @@ import "../components/ha-card"; import "@material/mwc-button"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -112,7 +112,7 @@ class SupervisorErrorScreen extends LitElement { ); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/managers/notification-manager.ts b/src/managers/notification-manager.ts index a282adfd78..8c3de2c802 100644 --- a/src/managers/notification-manager.ts +++ b/src/managers/notification-manager.ts @@ -1,9 +1,9 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, query, @@ -29,9 +29,9 @@ export interface ToastActionParams { class NotificationManager extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _action?: ToastActionParams; + @state() private _action?: ToastActionParams; - @internalProperty() private _noCancelOnOutsideClick = false; + @state() private _noCancelOnOutsideClick = false; @query("ha-toast") private _toast!: HaToast; @@ -80,7 +80,7 @@ class NotificationManager extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-toast { display: flex; diff --git a/src/mixins/provide-hass-lit-mixin.ts b/src/mixins/provide-hass-lit-mixin.ts index ba9ab227c3..8ebe9ebc11 100644 --- a/src/mixins/provide-hass-lit-mixin.ts +++ b/src/mixins/provide-hass-lit-mixin.ts @@ -1,11 +1,11 @@ -import { PropertyValues, UpdatingElement } from "lit-element"; +import { PropertyValues, ReactiveElement } from "lit-element"; import { Constructor, HomeAssistant } from "../types"; export interface ProvideHassElement { provideHass(element: HTMLElement); } -export const ProvideHassLitMixin = >( +export const ProvideHassLitMixin = >( superClass: T ) => class extends superClass { diff --git a/src/mixins/subscribe-mixin.ts b/src/mixins/subscribe-mixin.ts index 88c54eaf3c..e104737784 100644 --- a/src/mixins/subscribe-mixin.ts +++ b/src/mixins/subscribe-mixin.ts @@ -1,12 +1,12 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { property, PropertyValues, UpdatingElement } from "lit-element"; +import { property, PropertyValues, ReactiveElement } from "lit-element"; import { Constructor, HomeAssistant } from "../types"; export interface HassSubscribeElement { hassSubscribe(): UnsubscribeFunc[]; } -export const SubscribeMixin = >( +export const SubscribeMixin = >( superClass: T ) => { class SubscribeClass extends superClass { diff --git a/src/onboarding/action-badge.ts b/src/onboarding/action-badge.ts index 45d69b0c72..c9f516084e 100644 --- a/src/onboarding/action-badge.ts +++ b/src/onboarding/action-badge.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -31,7 +31,7 @@ class ActionBadge extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: inline-flex; diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts index 64ff66bf5a..ea13d7c615 100644 --- a/src/onboarding/ha-onboarding.ts +++ b/src/onboarding/ha-onboarding.ts @@ -8,7 +8,7 @@ import { import { customElement, html, - internalProperty, + state, property, PropertyValues, TemplateResult, @@ -66,13 +66,13 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) { public translationFragment = "page-onboarding"; - @internalProperty() private _loading = false; + @state() private _loading = false; - @internalProperty() private _restoring = false; + @state() private _restoring = false; - @internalProperty() private _supervisor?: boolean; + @state() private _supervisor?: boolean; - @internalProperty() private _steps?: OnboardingStep[]; + @state() private _steps?: OnboardingStep[]; protected render(): TemplateResult { const step = this._curStep()!; diff --git a/src/onboarding/integration-badge.ts b/src/onboarding/integration-badge.ts index 341c3f6219..b03acb8b02 100644 --- a/src/onboarding/integration-badge.ts +++ b/src/onboarding/integration-badge.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -35,7 +35,7 @@ class IntegrationBadge extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: inline-flex; diff --git a/src/onboarding/onboarding-analytics.ts b/src/onboarding/onboarding-analytics.ts index 78c20b485f..b22173a73c 100644 --- a/src/onboarding/onboarding-analytics.ts +++ b/src/onboarding/onboarding-analytics.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -23,9 +23,9 @@ class OnboardingAnalytics extends LitElement { @property() public localize!: LocalizeFunc; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _analyticsDetails: Analytics = { + @state() private _analyticsDetails: Analytics = { preferences: {}, }; @@ -85,7 +85,7 @@ class OnboardingAnalytics extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .error { color: var(--error-color); diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts index a983a2288b..7a3380229d 100644 --- a/src/onboarding/onboarding-core-config.ts +++ b/src/onboarding/onboarding-core-config.ts @@ -5,10 +5,10 @@ import "@polymer/paper-radio-button/paper-radio-button"; import "@polymer/paper-radio-group/paper-radio-group"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -35,17 +35,17 @@ class OnboardingCoreConfig extends LitElement { @property() public onboardingLocalize!: LocalizeFunc; - @internalProperty() private _working = false; + @state() private _working = false; - @internalProperty() private _name!: ConfigUpdateValues["location_name"]; + @state() private _name!: ConfigUpdateValues["location_name"]; - @internalProperty() private _location!: [number, number]; + @state() private _location!: [number, number]; - @internalProperty() private _elevation!: string; + @state() private _elevation!: string; - @internalProperty() private _unitSystem!: ConfigUpdateValues["unit_system"]; + @state() private _unitSystem!: ConfigUpdateValues["unit_system"]; - @internalProperty() private _timeZone!: string; + @state() private _timeZone!: string; protected render(): TemplateResult { return html` @@ -278,7 +278,7 @@ class OnboardingCoreConfig extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .row { display: flex; diff --git a/src/onboarding/onboarding-create-user.ts b/src/onboarding/onboarding-create-user.ts index 63cff1ca6e..64250f91ce 100644 --- a/src/onboarding/onboarding-create-user.ts +++ b/src/onboarding/onboarding-create-user.ts @@ -3,10 +3,10 @@ import "@polymer/paper-input/paper-input"; import { genClientId } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -23,17 +23,17 @@ class OnboardingCreateUser extends LitElement { @property() public language!: string; - @internalProperty() private _name = ""; + @state() private _name = ""; - @internalProperty() private _username = ""; + @state() private _username = ""; - @internalProperty() private _password = ""; + @state() private _password = ""; - @internalProperty() private _passwordConfirm = ""; + @state() private _passwordConfirm = ""; - @internalProperty() private _loading = false; + @state() private _loading = false; - @internalProperty() private _errorMsg?: string = undefined; + @state() private _errorMsg?: string = undefined; protected render(): TemplateResult { return html` @@ -199,7 +199,7 @@ class OnboardingCreateUser extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .error { color: red; diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts index 0ea9a94ff5..eee62415b3 100644 --- a/src/onboarding/onboarding-integrations.ts +++ b/src/onboarding/onboarding-integrations.ts @@ -1,12 +1,12 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, property, - internalProperty, + state, PropertyValues, TemplateResult, } from "lit-element"; @@ -37,9 +37,9 @@ class OnboardingIntegrations extends LitElement { @property() public onboardingLocalize!: LocalizeFunc; - @internalProperty() private _entries?: ConfigEntry[]; + @state() private _entries?: ConfigEntry[]; - @internalProperty() private _discovered?: DataEntryFlowProgress[]; + @state() private _discovered?: DataEntryFlowProgress[]; private _unsubEvents?: () => void; @@ -175,7 +175,7 @@ class OnboardingIntegrations extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .badges { margin-top: 24px; diff --git a/src/onboarding/onboarding-loading.ts b/src/onboarding/onboarding-loading.ts index 96703c6a6c..29005246dc 100644 --- a/src/onboarding/onboarding-loading.ts +++ b/src/onboarding/onboarding-loading.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -13,7 +13,7 @@ class OnboardingLoading extends LitElement { return html`
`; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` /* MIT License (MIT). Copyright (c) 2014 Luke Haas */ .loader, diff --git a/src/onboarding/onboarding-restore-snapshot.ts b/src/onboarding/onboarding-restore-snapshot.ts index 6fb86da28e..835a31aff4 100644 --- a/src/onboarding/onboarding-restore-snapshot.ts +++ b/src/onboarding/onboarding-restore-snapshot.ts @@ -1,7 +1,7 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -86,7 +86,7 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index 9d11cff9d2..71e5ebbb02 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -14,9 +14,9 @@ import "@material/mwc-button"; import { mdiViewAgenda, mdiViewDay, mdiViewModule, mdiViewWeek } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -91,9 +91,9 @@ export class HAFullCalendar extends LitElement { @property() public initialView: FullCalendarView = "dayGridMonth"; - @internalProperty() private calendar?: Calendar; + @state() private calendar?: Calendar; - @internalProperty() private _activeView?: FullCalendarView; + @state() private _activeView?: FullCalendarView; public updateSize(): void { this.calendar?.updateSize(); @@ -285,7 +285,7 @@ export class HAFullCalendar extends LitElement { ) ); - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts index 636c9fb117..1f73721efc 100644 --- a/src/panels/calendar/ha-panel-calendar.ts +++ b/src/panels/calendar/ha-panel-calendar.ts @@ -4,10 +4,10 @@ import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -39,9 +39,9 @@ class PanelCalendar extends LitElement { @property({ type: Boolean, reflect: true }) public narrow!: boolean; - @internalProperty() private _calendars: Calendar[] = []; + @state() private _calendars: Calendar[] = []; - @internalProperty() private _events: CalendarEvent[] = []; + @state() private _events: CalendarEvent[] = []; @LocalStorage("deSelectedCalendars", true) private _deSelectedCalendars: string[] = []; @@ -175,7 +175,7 @@ class PanelCalendar extends LitElement { ); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts index e0c5c48467..dcb29ffdf2 100644 --- a/src/panels/config/areas/dialog-area-registry-detail.ts +++ b/src/panels/config/areas/dialog-area-registry-detail.ts @@ -3,9 +3,9 @@ import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -22,13 +22,13 @@ import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-deta class DialogAreaDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _params?: AreaRegistryDetailDialogParams; + @state() private _params?: AreaRegistryDetailDialogParams; - @internalProperty() private _submitting?: boolean; + @state() private _submitting?: boolean; public async showDialog( params: AreaRegistryDetailDialogParams @@ -159,7 +159,7 @@ class DialogAreaDetail extends LitElement { navigate(this, "/config/areas/dashboard"); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index d1356ef014..29d5269810 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/src/panels/config/areas/ha-config-area-page.ts @@ -1,10 +1,10 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -58,7 +58,7 @@ class HaConfigAreaPage extends LitElement { @property() public route!: Route; - @internalProperty() private _related?: RelatedResult; + @state() private _related?: RelatedResult; private _area = memoizeOne((areaId: string, areas: AreaRegistryEntry[]): | AreaRegistryEntry @@ -215,27 +215,27 @@ class HaConfigAreaPage extends LitElement { )} >${this._related?.automation?.length ? this._related.automation.map((automation) => { - const state = this.hass.states[automation]; - return state + const entityState = this.hass.states[automation]; + return entityState ? html`
- ${computeStateName(state)} + ${computeStateName(entityState)} - ${!state.attributes.id + ${!entityState.attributes.id ? html` ${this.hass.localize( @@ -268,27 +268,27 @@ class HaConfigAreaPage extends LitElement { )} >${this._related?.scene?.length ? this._related.scene.map((scene) => { - const state = this.hass.states[scene]; - return state + const entityState = this.hass.states[scene]; + return entityState ? html`
- ${computeStateName(state)} + ${computeStateName(entityState)} - ${!state.attributes.id + ${!entityState.attributes.id ? html` ${this.hass.localize( @@ -319,15 +319,15 @@ class HaConfigAreaPage extends LitElement { )} >${this._related?.script?.length ? this._related.script.map((script) => { - const state = this.hass.states[script]; - return state + const entityState = this.hass.states[script]; + return entityState ? html` - ${computeStateName(state)} + ${computeStateName(entityState)} @@ -399,7 +399,7 @@ class HaConfigAreaPage extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index 7ba5201c97..cee1c49c53 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -210,7 +210,7 @@ export class HaConfigAreasDashboard extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` hass-loading-screen { --app-header-background-color: var(--sidebar-background-color); diff --git a/src/panels/config/areas/ha-config-areas.ts b/src/panels/config/areas/ha-config-areas.ts index c742b304d0..725bf14cd9 100644 --- a/src/panels/config/areas/ha-config-areas.ts +++ b/src/panels/config/areas/ha-config-areas.ts @@ -1,10 +1,5 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { - customElement, - internalProperty, - property, - PropertyValues, -} from "lit-element"; +import { customElement, state, property, PropertyValues } from "lit-element"; import { compare } from "../../../common/string/compare"; import { AreaRegistryEntry, @@ -50,15 +45,15 @@ class HaConfigAreas extends HassRouterPage { }, }; - @internalProperty() private _configEntries: ConfigEntry[] = []; + @state() private _configEntries: ConfigEntry[] = []; - @internalProperty() + @state() private _deviceRegistryEntries: DeviceRegistryEntry[] = []; - @internalProperty() + @state() private _entityRegistryEntries: EntityRegistryEntry[] = []; - @internalProperty() private _areas: AreaRegistryEntry[] = []; + @state() private _areas: AreaRegistryEntry[] = []; private _unsubs?: UnsubscribeFunc[]; 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 87556b3a75..5dfc358a5f 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -8,10 +8,10 @@ import "@polymer/paper-listbox/paper-listbox"; import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -99,11 +99,11 @@ export default class HaAutomationActionRow extends LitElement { @property({ type: Boolean }) public narrow = false; - @internalProperty() private _warnings?: string[]; + @state() private _warnings?: string[]; - @internalProperty() private _uiModeAvailable = true; + @state() private _uiModeAvailable = true; - @internalProperty() private _yamlMode = false; + @state() private _yamlMode = false; @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor; @@ -339,7 +339,7 @@ export default class HaAutomationActionRow extends LitElement { this._yamlMode = !this._yamlMode; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index 568dc9676b..9d2c266783 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -90,7 +90,7 @@ export default class HaAutomationAction extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-automation-action-row, ha-card { diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts index 2a04f9e022..2cc117665b 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts @@ -3,7 +3,7 @@ import "@polymer/paper-input/paper-input"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, LitElement, property, @@ -156,7 +156,7 @@ export class HaChooseAction extends LitElement implements ActionElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` 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 051b3a8889..535be0f254 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,10 +1,4 @@ -import { - customElement, - html, - internalProperty, - LitElement, - property, -} from "lit-element"; +import { customElement, html, state, LitElement, property } from "lit-element"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/device/ha-device-action-picker"; @@ -24,9 +18,9 @@ export class HaDeviceAction extends LitElement { @property({ type: Object }) public action!: DeviceAction; - @internalProperty() private _deviceId?: string; + @state() private _deviceId?: string; - @internalProperty() private _capabilities?: DeviceCapabilities; + @state() private _capabilities?: DeviceCapabilities; private _origAction?: DeviceAction; diff --git a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts index 807aa2fefa..538fb94767 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts @@ -1,7 +1,12 @@ import "@polymer/paper-input/paper-input"; import type { PaperListboxElement } from "@polymer/paper-listbox"; import "@polymer/paper-listbox/paper-listbox"; -import { CSSResult, customElement, LitElement, property } from "lit-element"; +import { + CSSResultGroup, + customElement, + LitElement, + property, +} from "lit-element"; import { html } from "lit-html"; import { fireEvent } from "../../../../../common/dom/fire_event"; import { @@ -165,7 +170,7 @@ export class HaRepeatAction extends LitElement implements ActionElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return haStyle; } } diff --git a/src/panels/config/automation/action/types/ha-automation-action-service.ts b/src/panels/config/automation/action/types/ha-automation-action-service.ts index 175c11f9a5..7743800b30 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-service.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-service.ts @@ -1,9 +1,9 @@ import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, - internalProperty, + state, LitElement, property, PropertyValues, @@ -33,7 +33,7 @@ export class HaServiceAction extends LitElement implements ActionElement { @property({ type: Boolean }) public narrow = false; - @internalProperty() private _action!: ServiceAction; + @state() private _action!: ServiceAction; public static get defaultConfig() { return { service: "", data: {} }; @@ -86,7 +86,7 @@ export class HaServiceAction extends LitElement implements ActionElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-service-control { display: block; diff --git a/src/panels/config/automation/blueprint-automation-editor.ts b/src/panels/config/automation/blueprint-automation-editor.ts index 75a7019d27..14358dec95 100644 --- a/src/panels/config/automation/blueprint-automation-editor.ts +++ b/src/panels/config/automation/blueprint-automation-editor.ts @@ -4,9 +4,9 @@ import "@polymer/paper-input/paper-textarea"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, - internalProperty, + state, LitElement, property, } from "lit-element"; @@ -44,7 +44,7 @@ export class HaBlueprintAutomationEditor extends LitElement { @property() public stateObj?: HassEntity; - @internalProperty() private _blueprints?: Blueprints; + @state() private _blueprints?: Blueprints; protected firstUpdated(changedProps) { super.firstUpdated(changedProps); @@ -270,7 +270,7 @@ export class HaBlueprintAutomationEditor extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts index e7a1c2f691..59c2ac55d3 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts @@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox"; import { - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -134,7 +134,7 @@ export default class HaAutomationConditionEditor extends LitElement { fireEvent(this, "value-changed", { value: ev.detail.value }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return haStyle; } } 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 6b824a60fc..d1dbed74fa 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -4,10 +4,10 @@ import { mdiDotsVertical } from "@mdi/js"; import "@polymer/paper-item/paper-item"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, } from "lit-element"; @@ -56,7 +56,7 @@ export default class HaAutomationConditionRow extends LitElement { @property() public condition!: Condition; - @internalProperty() private _yamlMode = false; + @state() private _yamlMode = false; protected render() { if (!this.condition) { @@ -135,7 +135,7 @@ export default class HaAutomationConditionRow extends LitElement { this._yamlMode = !this._yamlMode; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index b4529c4650..1105e7be11 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -107,7 +107,7 @@ export default class HaAutomationCondition extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-automation-condition-row, ha-card { 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 4470724548..2ba0ba91fc 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,10 +1,4 @@ -import { - customElement, - html, - internalProperty, - LitElement, - property, -} from "lit-element"; +import { customElement, html, state, LitElement, property } from "lit-element"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/device/ha-device-condition-picker"; @@ -24,9 +18,9 @@ export class HaDeviceCondition extends LitElement { @property({ type: Object }) public condition!: DeviceCondition; - @internalProperty() private _deviceId?: string; + @state() private _deviceId?: string; - @internalProperty() private _capabilities?: DeviceCapabilities; + @state() private _capabilities?: DeviceCapabilities; private _origCondition?: DeviceCondition; diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts index 87b22ef223..fbbf6baa8b 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts @@ -2,10 +2,10 @@ import { Radio } from "@material/mwc-radio"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, } from "lit-element"; @@ -43,9 +43,9 @@ export class HaTimeCondition extends LitElement implements ConditionElement { @property({ attribute: false }) public condition!: TimeCondition; - @internalProperty() private _inputModeBefore?: boolean; + @state() private _inputModeBefore?: boolean; - @internalProperty() private _inputModeAfter?: boolean; + @state() private _inputModeAfter?: boolean; public static get defaultConfig() { return {}; @@ -210,7 +210,7 @@ export class HaTimeCondition extends LitElement implements ConditionElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .weekday-toggle { display: flex; diff --git a/src/panels/config/automation/dialog-new-automation.ts b/src/panels/config/automation/dialog-new-automation.ts index 3815eee8b0..35932dab35 100644 --- a/src/panels/config/automation/dialog-new-automation.ts +++ b/src/panels/config/automation/dialog-new-automation.ts @@ -1,10 +1,10 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -27,7 +27,7 @@ import { showThingtalkDialog } from "./thingtalk/show-dialog-thingtalk"; class DialogNewAutomation extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _opened = false; + @state() private _opened = false; public showDialog(): void { this._opened = true; @@ -125,7 +125,7 @@ class DialogNewAutomation extends LitElement { this.closeDialog(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, haStyleDialog, diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 19c73ac31b..7b4ad82315 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -13,9 +13,9 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import "@polymer/paper-input/paper-textarea"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -85,15 +85,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) { @property() public route!: Route; - @internalProperty() private _config?: AutomationConfig; + @state() private _config?: AutomationConfig; - @internalProperty() private _dirty = false; + @state() private _dirty = false; - @internalProperty() private _errors?: string; + @state() private _errors?: string; - @internalProperty() private _entityId?: string; + @state() private _entityId?: string; - @internalProperty() private _mode: "gui" | "yaml" = "gui"; + @state() private _mode: "gui" | "yaml" = "gui"; @query("ha-yaml-editor", true) private _editor?: HaYamlEditor; @@ -519,7 +519,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) { this._saveAutomation(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 03dd102f45..760069e16b 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -9,10 +9,10 @@ import { } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -56,9 +56,9 @@ class HaAutomationPicker extends LitElement { @property() private _activeFilters?: string[]; - @internalProperty() private _filteredAutomations?: string[] | null; + @state() private _filteredAutomations?: string[] | null; - @internalProperty() private _filterValue?; + @state() private _filterValue?; private _automations = memoizeOne( ( @@ -335,7 +335,7 @@ class HaAutomationPicker extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return haStyle; } } diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts index 8828066792..492621e877 100644 --- a/src/panels/config/automation/manual-automation-editor.ts +++ b/src/panels/config/automation/manual-automation-editor.ts @@ -5,7 +5,7 @@ import { PaperListboxElement } from "@polymer/paper-listbox"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, LitElement, property, @@ -317,7 +317,7 @@ export class HaManualAutomationEditor extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts index 5c09ed45cd..663b6a552e 100644 --- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts +++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts @@ -4,10 +4,10 @@ import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -40,15 +40,15 @@ export interface PlaceholderContainer { class DialogThingtalk extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _params?: ThingtalkDialogParams; + @state() private _params?: ThingtalkDialogParams; - @internalProperty() private _submitting = false; + @state() private _submitting = false; - @internalProperty() private _opened = false; + @state() private _opened = false; - @internalProperty() private _placeholders?: PlaceholderContainer; + @state() private _placeholders?: PlaceholderContainer; @query("#input") private _input?: PaperInputElement; @@ -257,7 +257,7 @@ class DialogThingtalk extends LitElement { this._input!.value = (ev.target as HTMLAnchorElement).innerText; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, haStyleDialog, diff --git a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts index f71d8a8ab9..3a42951f93 100644 --- a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts +++ b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts @@ -1,10 +1,10 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -72,13 +72,13 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) { @property() public placeholders!: PlaceholderContainer; - @internalProperty() private _error?: string; + @state() private _error?: string; private _deviceEntityLookup: DeviceEntitiesLookup = {}; - @internalProperty() private _extraInfo: ExtraInfo = {}; + @state() private _extraInfo: ExtraInfo = {}; - @internalProperty() private _placeholderValues: PlaceholderValues = {}; + @state() private _placeholderValues: PlaceholderValues = {}; private _devices?: DeviceRegistryEntry[]; @@ -198,13 +198,13 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) { "device_id", ]) )}`} - .entityFilter=${(state: HassEntity) => { + .entityFilter=${(entityState: HassEntity) => { const devId = this._placeholderValues[type][ placeholder.index ][idx].device_id; return this._deviceEntityLookup[ devId - ].includes(state.entity_id); + ].includes(entityState.entity_id); }} > ` @@ -470,7 +470,7 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) { this.dispatchEvent(new CustomEvent(ev.type, ev)); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/automation/trace/ha-automation-trace-config.ts b/src/panels/config/automation/trace/ha-automation-trace-config.ts index f579e30815..73a49f6649 100644 --- a/src/panels/config/automation/trace/ha-automation-trace-config.ts +++ b/src/panels/config/automation/trace/ha-automation-trace-config.ts @@ -1,7 +1,7 @@ import { safeDump } from "js-yaml"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -28,7 +28,7 @@ export class HaAutomationTraceConfig extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [css``]; } } diff --git a/src/panels/config/automation/trace/ha-automation-trace-logbook.ts b/src/panels/config/automation/trace/ha-automation-trace-logbook.ts index b18d83d1be..54c78e201a 100644 --- a/src/panels/config/automation/trace/ha-automation-trace-logbook.ts +++ b/src/panels/config/automation/trace/ha-automation-trace-logbook.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -36,7 +36,7 @@ export class HaAutomationTraceLogbook extends LitElement {
`; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ css` .padded-box { diff --git a/src/panels/config/automation/trace/ha-automation-trace-path-details.ts b/src/panels/config/automation/trace/ha-automation-trace-path-details.ts index 51ebbdab7f..a7c3754c4d 100644 --- a/src/panels/config/automation/trace/ha-automation-trace-path-details.ts +++ b/src/panels/config/automation/trace/ha-automation-trace-path-details.ts @@ -1,10 +1,10 @@ import { safeDump } from "js-yaml"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -40,10 +40,7 @@ export class HaAutomationTracePathDetails extends LitElement { @property() public trackedNodes!: Record; - @internalProperty() private _view: - | "config" - | "changed_variables" - | "logbook" = "config"; + @state() private _view: "config" | "changed_variables" | "logbook" = "config"; protected render(): TemplateResult { return html` @@ -254,7 +251,7 @@ ${safeDump(trace.changed_variables).trimRight()} void; diff --git a/src/panels/config/core/ha-config-analytics.ts b/src/panels/config/core/ha-config-analytics.ts index ee145e9f64..b533c4c407 100644 --- a/src/panels/config/core/ha-config-analytics.ts +++ b/src/panels/config/core/ha-config-analytics.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -28,9 +28,9 @@ import type { HomeAssistant } from "../../../types"; class ConfigAnalytics extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _analyticsDetails?: Analytics; + @state() private _analyticsDetails?: Analytics; - @internalProperty() private _error?: string; + @state() private _error?: string; protected render(): TemplateResult { const error = this._error @@ -101,7 +101,7 @@ class ConfigAnalytics extends LitElement { }; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/core/ha-config-core-form.ts b/src/panels/config/core/ha-config-core-form.ts index 2d3bfff403..848d89bbdf 100644 --- a/src/panels/config/core/ha-config-core-form.ts +++ b/src/panels/config/core/ha-config-core-form.ts @@ -5,10 +5,10 @@ import "@polymer/paper-radio-button/paper-radio-button"; import "@polymer/paper-radio-group/paper-radio-group"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -26,15 +26,15 @@ import type { HomeAssistant } from "../../../types"; class ConfigCoreForm extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _working = false; + @state() private _working = false; - @internalProperty() private _location!: [number, number]; + @state() private _location!: [number, number]; - @internalProperty() private _elevation!: string; + @state() private _elevation!: string; - @internalProperty() private _unitSystem!: ConfigUpdateValues["unit_system"]; + @state() private _unitSystem!: ConfigUpdateValues["unit_system"]; - @internalProperty() private _timeZone!: string; + @state() private _timeZone!: string; protected render(): TemplateResult { const canEdit = ["storage", "default"].includes( @@ -231,7 +231,7 @@ class ConfigCoreForm extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .row { display: flex; diff --git a/src/panels/config/core/ha-config-name-form.ts b/src/panels/config/core/ha-config-name-form.ts index 3dbdefb1ed..bbb9f16035 100644 --- a/src/panels/config/core/ha-config-name-form.ts +++ b/src/panels/config/core/ha-config-name-form.ts @@ -7,7 +7,7 @@ import { css, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -21,9 +21,9 @@ import type { HomeAssistant } from "../../../types"; class ConfigNameForm extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _working = false; + @state() private _working = false; - @internalProperty() private _name!: ConfigUpdateValues["location_name"]; + @state() private _name!: ConfigUpdateValues["location_name"]; protected render(): TemplateResult { const canEdit = ["storage", "default"].includes( diff --git a/src/panels/config/core/ha-config-url-form.ts b/src/panels/config/core/ha-config-url-form.ts index 778fa18a66..9a26b83236 100644 --- a/src/panels/config/core/ha-config-url-form.ts +++ b/src/panels/config/core/ha-config-url-form.ts @@ -3,10 +3,10 @@ import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -20,13 +20,13 @@ import type { HomeAssistant } from "../../../types"; class ConfigUrlForm extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _working = false; + @state() private _working = false; - @internalProperty() private _external_url?: string; + @state() private _external_url?: string; - @internalProperty() private _internal_url?: string; + @state() private _internal_url?: string; protected render(): TemplateResult { const canEdit = ["storage", "default"].includes( @@ -135,7 +135,7 @@ class ConfigUrlForm extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .row { display: flex; diff --git a/src/panels/config/customize/ha-config-customize.ts b/src/panels/config/customize/ha-config-customize.ts index c1802cc6aa..a79d356836 100644 --- a/src/panels/config/customize/ha-config-customize.ts +++ b/src/panels/config/customize/ha-config-customize.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, html, LitElement, property, @@ -80,7 +80,7 @@ class HaConfigCustomize extends LitElement { this._selectedEntityId = routeSegments.length > 1 ? routeSegments[1] : ""; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` a { color: var(--primary-color); diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 9e740eea4a..f4844895ea 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -3,7 +3,7 @@ import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -111,7 +111,7 @@ class HaConfigDashboard extends LitElement { `; } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts index f1b958a4fe..935cc544f1 100644 --- a/src/panels/config/dashboard/ha-config-navigation.ts +++ b/src/panels/config/dashboard/ha-config-navigation.ts @@ -2,7 +2,7 @@ import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -76,7 +76,7 @@ class HaConfigNavigation extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` a { text-decoration: none; diff --git a/src/panels/config/devices/device-detail/ha-device-automation-card.ts b/src/panels/config/devices/device-detail/ha-device-automation-card.ts index b267581048..ed4a1caa13 100644 --- a/src/panels/config/devices/device-detail/ha-device-automation-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-automation-card.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, html, LitElement, property, @@ -86,7 +86,7 @@ export abstract class HaDeviceAutomationCard< showAutomationEditor(this, data); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` h3 { color: var(--primary-text-color); 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 d374b14860..876289e04d 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,8 +1,8 @@ import { - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -29,13 +29,13 @@ import "@material/mwc-button/mwc-button"; export class DialogDeviceAutomation extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _triggers: DeviceTrigger[] = []; + @state() private _triggers: DeviceTrigger[] = []; - @internalProperty() private _conditions: DeviceCondition[] = []; + @state() private _conditions: DeviceCondition[] = []; - @internalProperty() private _actions: DeviceAction[] = []; + @state() private _actions: DeviceAction[] = []; - @internalProperty() private _params?: DeviceAutomationDialogParams; + @state() private _params?: DeviceAutomationDialogParams; public async showDialog(params: DeviceAutomationDialogParams): Promise { this._params = params; @@ -140,7 +140,7 @@ export class DialogDeviceAutomation extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return haStyleDialog; } } 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 946c46e665..7a779b6065 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 @@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -173,7 +173,7 @@ export class HaDeviceEntitiesCard extends LitElement { ); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/config/devices/device-detail/ha-device-info-card.ts b/src/panels/config/devices/device-detail/ha-device-info-card.ts index af8110fe2c..bddb19aecb 100644 --- a/src/panels/config/devices/device-detail/ha-device-info-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-info-card.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -94,7 +94,7 @@ export class HaDeviceCard extends LitElement { )})`; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts index d66d736779..3f0a740f93 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -29,13 +29,13 @@ import { MQTTDeviceDebugInfoDialogParams } from "./show-dialog-mqtt-device-debug class DialogMQTTDeviceDebugInfo extends LitElement { public hass!: HomeAssistant; - @internalProperty() private _params?: MQTTDeviceDebugInfoDialogParams; + @state() private _params?: MQTTDeviceDebugInfoDialogParams; - @internalProperty() private _debugInfo?: MQTTDeviceDebugInfo; + @state() private _debugInfo?: MQTTDeviceDebugInfo; - @internalProperty() private _showAsYaml = true; + @state() private _showAsYaml = true; - @internalProperty() private _showDeserialized = true; + @state() private _showDeserialized = true; public async showDialog( params: MQTTDeviceDebugInfoDialogParams @@ -219,7 +219,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts index 2b5c29b052..54ab5b9403 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -46,7 +46,7 @@ export class HaDeviceActionsMqtt extends LitElement { await showMQTTDeviceDebugInfoDialog(this, { device }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts index a820ef9bf3..afea8620fa 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts @@ -1,10 +1,10 @@ import { safeDump } from "js-yaml"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -19,7 +19,7 @@ class MQTTDiscoveryPayload extends LitElement { @property() public summary!: string; - @internalProperty() private _open = false; + @state() private _open = false; protected render(): TemplateResult { return html` @@ -48,7 +48,7 @@ class MQTTDiscoveryPayload extends LitElement { this._open = !this._open; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .expander { cursor: pointer; diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts index 15a8ce0051..9bd2ec167a 100644 --- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts +++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts @@ -1,10 +1,10 @@ import { safeDump } from "js-yaml"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -28,11 +28,11 @@ class MQTTMessages extends LitElement { @property() public summary!: string; - @internalProperty() private _open = false; + @state() private _open = false; - @internalProperty() private _payloadsJson = new WeakMap(); + @state() private _payloadsJson = new WeakMap(); - @internalProperty() private _showTopic = false; + @state() private _showTopic = false; protected firstUpdated(): void { this.messages.forEach((message) => { @@ -133,7 +133,7 @@ class MQTTMessages extends LitElement { this._open = !this._open; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .expander { cursor: pointer; diff --git a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts index 82f770c928..9fe72d2ff2 100644 --- a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts +++ b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts @@ -1,7 +1,7 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -72,7 +72,7 @@ export class HaDeviceActionsOzw extends LitElement { ); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts index f23ce1c636..3fab405b92 100644 --- a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts +++ b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -31,7 +31,7 @@ export class HaDeviceInfoOzw extends LitElement { @property() private ozw_instance = 1; - @internalProperty() private _ozwDevice?: OZWDevice; + @state() private _ozwDevice?: OZWDevice; protected updated(changedProperties: PropertyValues) { if (changedProperties.has("device")) { @@ -85,7 +85,7 @@ export class HaDeviceInfoOzw extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts b/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts index 96253e2bd9..6b4009dd0e 100644 --- a/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts +++ b/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -39,7 +39,7 @@ export class HaDeviceActionsTasmota extends LitElement { await removeTasmotaDeviceEntry(this.hass!, this.device.id); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts index 4d0b380bb2..723b0f4425 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -26,7 +26,7 @@ export class HaDeviceActionsZha extends LitElement { @property() public device!: DeviceRegistryEntry; - @internalProperty() private _zhaDevice?: ZHADevice; + @state() private _zhaDevice?: ZHADevice; protected updated(changedProperties: PropertyValues) { if (changedProperties.has("device")) { @@ -145,7 +145,7 @@ export class HaDeviceActionsZha extends LitElement { history.back(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts index 5440940f16..6aa0188b2b 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -21,7 +21,7 @@ export class HaDeviceActionsZha extends LitElement { @property() public device!: DeviceRegistryEntry; - @internalProperty() private _zhaDevice?: ZHADevice; + @state() private _zhaDevice?: ZHADevice; protected updated(changedProperties: PropertyValues) { if (changedProperties.has("device")) { @@ -77,7 +77,7 @@ export class HaDeviceActionsZha extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts index a43d8126f3..6620ac62ad 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -25,9 +25,9 @@ export class HaDeviceActionsZWaveJS extends LitElement { @property() public device!: DeviceRegistryEntry; - @internalProperty() private _entryId?: string; + @state() private _entryId?: string; - @internalProperty() private _nodeId?: number; + @state() private _nodeId?: number; protected updated(changedProperties: PropertyValues) { if (changedProperties.has("device")) { @@ -70,7 +70,7 @@ export class HaDeviceActionsZWaveJS extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts index ed35383b16..c37856a5c2 100644 --- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts +++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -27,13 +27,13 @@ export class HaDeviceInfoZWaveJS extends LitElement { @property() public device!: DeviceRegistryEntry; - @internalProperty() private _entryId?: string; + @state() private _entryId?: string; - @internalProperty() private _nodeId?: number; + @state() private _nodeId?: number; - @internalProperty() private _homeId?: string; + @state() private _homeId?: string; - @internalProperty() private _node?: ZWaveJSNode; + @state() private _node?: ZWaveJSNode; protected updated(changedProperties: PropertyValues) { if (changedProperties.has("device")) { @@ -95,7 +95,7 @@ export class HaDeviceInfoZWaveJS extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts index 99bd51dcb7..a6536d8c56 100644 --- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts +++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts @@ -5,10 +5,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -27,17 +27,17 @@ import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry- class DialogDeviceRegistryDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _nameByUser!: string; + @state() private _nameByUser!: string; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _params?: DeviceRegistryDetailDialogParams; + @state() private _params?: DeviceRegistryDetailDialogParams; - @internalProperty() private _areaId?: string | null; + @state() private _areaId?: string | null; - @internalProperty() private _disabledBy!: string | null; + @state() private _disabledBy!: string | null; - @internalProperty() private _submitting?: boolean; + @state() private _submitting?: boolean; public async showDialog( params: DeviceRegistryDetailDialogParams @@ -159,7 +159,7 @@ class DialogDeviceRegistryDetail extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, haStyleDialog, diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index bf2575ee97..4162a1a737 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -1,10 +1,10 @@ import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -75,7 +75,7 @@ export class HaConfigDevicePage extends LitElement { @property() public route!: Route; - @internalProperty() private _related?: RelatedResult; + @state() private _related?: RelatedResult; private _device = memoizeOne( ( @@ -323,28 +323,28 @@ export class HaConfigDevicePage extends LitElement { ${this._related?.automation?.length ? this._related.automation.map((automation) => { - const state = this.hass.states[automation]; - return state + const entityState = this.hass.states[automation]; + return entityState ? html`
- ${computeStateName(state)} + ${computeStateName(entityState)} - ${!state.attributes.id + ${!entityState.attributes.id ? html` ${this.hass.localize( @@ -402,28 +402,29 @@ export class HaConfigDevicePage extends LitElement { ${ this._related?.scene?.length ? this._related.scene.map((scene) => { - const state = this.hass.states[scene]; - return state + const entityState = this.hass.states[scene]; + return entityState ? html`
- ${computeStateName(state)} + ${computeStateName(entityState)} - ${!state.attributes.id + ${!entityState.attributes.id ? html` ${this._related?.script?.length ? this._related.script.map((script) => { - const state = this.hass.states[script]; - return state + const entityState = this.hass.states[script]; + return entityState ? html` - ${computeStateName(state)} + ${computeStateName(entityState)} @@ -519,8 +520,8 @@ export class HaConfigDevicePage extends LitElement { if (entity.name) { return entity.name; } - const state = this.hass.states[entity.entity_id]; - return state ? computeStateName(state) : null; + const entityState = this.hass.states[entity.entity_id]; + return entityState ? computeStateName(entityState) : null; } private _onImageLoad(ev) { @@ -748,7 +749,7 @@ export class HaConfigDevicePage extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index 67dd2fa2c2..b6b2d2ff0b 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -4,10 +4,10 @@ import { mdiCancel, mdiFilterVariant, mdiPlus } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -68,15 +68,13 @@ export class HaConfigDeviceDashboard extends LitElement { @property() public route!: Route; - @internalProperty() private _searchParms = new URLSearchParams( - window.location.search - ); + @state() private _searchParms = new URLSearchParams(window.location.search); - @internalProperty() private _showDisabled = false; + @state() private _showDisabled = false; - @internalProperty() private _filter = ""; + @state() private _filter = ""; - @internalProperty() private _numHiddenDevices = 0; + @state() private _numHiddenDevices = 0; private _activeFilters = memoizeOne( ( @@ -468,7 +466,7 @@ export class HaConfigDeviceDashboard extends LitElement { this._showDisabled = true; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ css` ha-button-menu { diff --git a/src/panels/config/devices/ha-config-devices.ts b/src/panels/config/devices/ha-config-devices.ts index 82dd2d7720..9252c18420 100644 --- a/src/panels/config/devices/ha-config-devices.ts +++ b/src/panels/config/devices/ha-config-devices.ts @@ -1,10 +1,5 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { - customElement, - internalProperty, - property, - PropertyValues, -} from "lit-element"; +import { customElement, state, property, PropertyValues } from "lit-element"; import { AreaRegistryEntry, subscribeAreaRegistry, @@ -49,15 +44,15 @@ class HaConfigDevices extends HassRouterPage { }, }; - @internalProperty() private _configEntries: ConfigEntry[] = []; + @state() private _configEntries: ConfigEntry[] = []; - @internalProperty() + @state() private _entityRegistryEntries: EntityRegistryEntry[] = []; - @internalProperty() + @state() private _deviceRegistryEntries: DeviceRegistryEntry[] = []; - @internalProperty() private _areas: AreaRegistryEntry[] = []; + @state() private _areas: AreaRegistryEntry[] = []; private _unsubs?: UnsubscribeFunc[]; diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts index c0f4f18ea7..45f5058070 100644 --- a/src/panels/config/entities/dialog-entity-editor.ts +++ b/src/panels/config/entities/dialog-entity-editor.ts @@ -5,10 +5,10 @@ import { mdiClose, mdiTune } from "@mdi/js"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -47,18 +47,15 @@ interface Tab { export class DialogEntityEditor extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _params?: EntityRegistryDetailDialogParams; + @state() private _params?: EntityRegistryDetailDialogParams; - @internalProperty() private _entry?: - | EntityRegistryEntry - | ExtEntityRegistryEntry - | null; + @state() private _entry?: EntityRegistryEntry | ExtEntityRegistryEntry | null; - @internalProperty() private _curTab = "tab-settings"; + @state() private _curTab = "tab-settings"; - @internalProperty() private _extraTabs: Tabs = {}; + @state() private _extraTabs: Tabs = {}; - @internalProperty() private _settingsElementTag?: string; + @state() private _settingsElementTag?: string; private _curTabIndex = 0; @@ -256,7 +253,7 @@ export class DialogEntityEditor extends LitElement { this.closeDialog(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts index dae2b5f42e..d47479811b 100644 --- a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts +++ b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -110,13 +110,13 @@ export class EntityRegistrySettingsHelper extends LitElement { @property() public entry!: ExtEntityRegistryEntry; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _item?: Helper | null; + @state() private _item?: Helper | null; - @internalProperty() private _submitting?: boolean; + @state() private _submitting?: boolean; - @internalProperty() private _componentLoaded?: boolean; + @state() private _componentLoaded?: boolean; @query("ha-registry-basic-editor") private _registryEditor?: HaEntityRegistryBasicEditor; @@ -242,7 +242,7 @@ export class EntityRegistrySettingsHelper extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/entities/entity-registry-basic-editor.ts b/src/panels/config/entities/entity-registry-basic-editor.ts index 1063639aa4..027e9334da 100644 --- a/src/panels/config/entities/entity-registry-basic-editor.ts +++ b/src/panels/config/entities/entity-registry-basic-editor.ts @@ -4,7 +4,7 @@ import { css, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -34,19 +34,19 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) { @property() public entry!: ExtEntityRegistryEntry; - @internalProperty() private _origEntityId!: string; + @state() private _origEntityId!: string; - @internalProperty() private _entityId!: string; + @state() private _entityId!: string; - @internalProperty() private _areaId?: string | null; + @state() private _areaId?: string | null; - @internalProperty() private _disabledBy!: string | null; + @state() private _disabledBy!: string | null; private _deviceLookup?: Record; - @internalProperty() private _device?: DeviceRegistryEntry; + @state() private _device?: DeviceRegistryEntry; - @internalProperty() private _submitting?: boolean; + @state() private _submitting?: boolean; public async updateEntry(): Promise { this._submitting = true; diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 6e60b08bfe..4c83b7b795 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -3,10 +3,10 @@ import "@polymer/paper-input/paper-input"; import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -47,23 +47,23 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { @property() public entry!: ExtEntityRegistryEntry; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _icon!: string; + @state() private _icon!: string; - @internalProperty() private _entityId!: string; + @state() private _entityId!: string; - @internalProperty() private _areaId?: string | null; + @state() private _areaId?: string | null; - @internalProperty() private _disabledBy!: string | null; + @state() private _disabledBy!: string | null; private _deviceLookup?: Record; - @internalProperty() private _device?: DeviceRegistryEntry; + @state() private _device?: DeviceRegistryEntry; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _submitting?: boolean; + @state() private _submitting?: boolean; private _origEntityId!: string; @@ -359,7 +359,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) { this._disabledBy = (ev.target as HaSwitch).checked ? null : "user"; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index d42ef240cf..5f6993e13f 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -15,10 +15,10 @@ import "@polymer/paper-tooltip/paper-tooltip"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -101,31 +101,29 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { @property() public route!: Route; - @internalProperty() private _entities?: EntityRegistryEntry[]; + @state() private _entities?: EntityRegistryEntry[]; - @internalProperty() private _devices?: DeviceRegistryEntry[]; + @state() private _devices?: DeviceRegistryEntry[]; - @internalProperty() private _areas: AreaRegistryEntry[] = []; + @state() private _areas: AreaRegistryEntry[] = []; - @internalProperty() private _stateEntities: StateEntity[] = []; + @state() private _stateEntities: StateEntity[] = []; @property() public _entries?: ConfigEntry[]; - @internalProperty() private _showDisabled = false; + @state() private _showDisabled = false; - @internalProperty() private _showUnavailable = true; + @state() private _showUnavailable = true; - @internalProperty() private _showReadOnly = true; + @state() private _showReadOnly = true; - @internalProperty() private _filter = ""; + @state() private _filter = ""; - @internalProperty() private _numHiddenEntities = 0; + @state() private _numHiddenEntities = 0; - @internalProperty() private _searchParms = new URLSearchParams( - window.location.search - ); + @state() private _searchParms = new URLSearchParams(window.location.search); - @internalProperty() private _selectedEntities: string[] = []; + @state() private _selectedEntities: string[] = []; @query("hass-tabs-subpage-data-table", true) private _dataTable!: HaTabsSubpageDataTable; @@ -847,7 +845,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { this._showUnavailable = true; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/ha-entity-config.ts b/src/panels/config/ha-entity-config.ts index 9fb1d804dd..838523efc9 100644 --- a/src/panels/config/ha-entity-config.ts +++ b/src/panels/config/ha-entity-config.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -103,7 +103,7 @@ export class HaEntityConfig extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index 831bb4682d..34583a8ad8 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -22,12 +22,7 @@ import { import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { PolymerElement } from "@polymer/polymer"; -import { - customElement, - internalProperty, - property, - PropertyValues, -} from "lit-element"; +import { customElement, state, property, PropertyValues } from "lit-element"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { listenMediaQuery } from "../../common/dom/media_query"; import { CloudStatus, fetchCloudStatus } from "../../data/cloud"; @@ -316,11 +311,11 @@ class HaPanelConfig extends HassRouterPage { }, }; - @internalProperty() private _wideSidebar = false; + @state() private _wideSidebar = false; - @internalProperty() private _wide = false; + @state() private _wide = false; - @internalProperty() private _cloudStatus?: CloudStatus; + @state() private _cloudStatus?: CloudStatus; private _listeners: Array<() => void> = []; diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index b4eeed86be..16e85a43f0 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/src/panels/config/helpers/dialog-helper-detail.ts @@ -3,10 +3,10 @@ import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -49,15 +49,15 @@ const HELPERS = { export class DialogHelperDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _item?: Helper; + @state() private _item?: Helper; - @internalProperty() private _opened = false; + @state() private _opened = false; - @internalProperty() private _platform?: string; + @state() private _platform?: string; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _submitting = false; + @state() private _submitting = false; @query(".form") private _form?: HTMLDivElement; @@ -207,7 +207,7 @@ export class DialogHelperDetail extends LitElement { this._error = undefined; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/helpers/forms/ha-counter-form.ts b/src/panels/config/helpers/forms/ha-counter-form.ts index 278d33edd3..460bd0b9d2 100644 --- a/src/panels/config/helpers/forms/ha-counter-form.ts +++ b/src/panels/config/helpers/forms/ha-counter-form.ts @@ -1,10 +1,10 @@ import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -25,19 +25,19 @@ class HaCounterForm extends LitElement { private _item?: Partial; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _icon!: string; + @state() private _icon!: string; - @internalProperty() private _maximum?: number; + @state() private _maximum?: number; - @internalProperty() private _minimum?: number; + @state() private _minimum?: number; - @internalProperty() private _restore?: boolean; + @state() private _restore?: boolean; - @internalProperty() private _initial?: number; + @state() private _initial?: number; - @internalProperty() private _step?: number; + @state() private _step?: number; set item(item: Counter) { this._item = item; @@ -183,7 +183,7 @@ class HaCounterForm extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/helpers/forms/ha-input_boolean-form.ts b/src/panels/config/helpers/forms/ha-input_boolean-form.ts index 90656b861d..18ca1f4741 100644 --- a/src/panels/config/helpers/forms/ha-input_boolean-form.ts +++ b/src/panels/config/helpers/forms/ha-input_boolean-form.ts @@ -1,10 +1,10 @@ import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -23,9 +23,9 @@ class HaInputBooleanForm extends LitElement { private _item?: InputBoolean; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _icon!: string; + @state() private _icon!: string; set item(item: InputBoolean) { this._item = item; @@ -100,7 +100,7 @@ class HaInputBooleanForm extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/helpers/forms/ha-input_datetime-form.ts b/src/panels/config/helpers/forms/ha-input_datetime-form.ts index 09a1efc4e7..03eb3f08c6 100644 --- a/src/panels/config/helpers/forms/ha-input_datetime-form.ts +++ b/src/panels/config/helpers/forms/ha-input_datetime-form.ts @@ -3,10 +3,10 @@ import "@polymer/paper-radio-button/paper-radio-button"; import "@polymer/paper-radio-group/paper-radio-group"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -25,11 +25,11 @@ class HaInputDateTimeForm extends LitElement { private _item?: InputDateTime; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _icon!: string; + @state() private _icon!: string; - @internalProperty() private _mode!: "date" | "time" | "datetime"; + @state() private _mode!: "date" | "time" | "datetime"; set item(item: InputDateTime) { this._item = item; @@ -145,7 +145,7 @@ class HaInputDateTimeForm extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/helpers/forms/ha-input_number-form.ts b/src/panels/config/helpers/forms/ha-input_number-form.ts index 0439227315..c049b5790c 100644 --- a/src/panels/config/helpers/forms/ha-input_number-form.ts +++ b/src/panels/config/helpers/forms/ha-input_number-form.ts @@ -3,10 +3,10 @@ import "@polymer/paper-radio-button/paper-radio-button"; import "@polymer/paper-radio-group/paper-radio-group"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -25,20 +25,20 @@ class HaInputNumberForm extends LitElement { private _item?: Partial; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _icon!: string; + @state() private _icon!: string; - @internalProperty() private _max?: number; + @state() private _max?: number; - @internalProperty() private _min?: number; + @state() private _min?: number; - @internalProperty() private _mode?: string; + @state() private _mode?: string; - @internalProperty() private _step?: number; + @state() private _step?: number; // eslint-disable-next-line: variable-name - @internalProperty() private _unit_of_measurement?: string; + @state() private _unit_of_measurement?: string; set item(item: InputNumber) { this._item = item; @@ -194,7 +194,7 @@ class HaInputNumberForm extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` 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 2aec4aee3a..1aba9c2d23 100644 --- a/src/panels/config/helpers/forms/ha-input_select-form.ts +++ b/src/panels/config/helpers/forms/ha-input_select-form.ts @@ -5,10 +5,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -30,11 +30,11 @@ class HaInputSelectForm extends LitElement { private _item?: InputSelect; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _icon!: string; + @state() private _icon!: string; - @internalProperty() private _options: string[] = []; + @state() private _options: string[] = []; @query("#option_input", true) private _optionInput?: PaperInputElement; @@ -190,7 +190,7 @@ class HaInputSelectForm extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/helpers/forms/ha-input_text-form.ts b/src/panels/config/helpers/forms/ha-input_text-form.ts index 5c738b9dd8..a63d8580eb 100644 --- a/src/panels/config/helpers/forms/ha-input_text-form.ts +++ b/src/panels/config/helpers/forms/ha-input_text-form.ts @@ -3,10 +3,10 @@ import "@polymer/paper-radio-button/paper-radio-button"; import "@polymer/paper-radio-group/paper-radio-group"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -25,17 +25,17 @@ class HaInputTextForm extends LitElement { private _item?: InputText; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _icon!: string; + @state() private _icon!: string; - @internalProperty() private _max?: number; + @state() private _max?: number; - @internalProperty() private _min?: number; + @state() private _min?: number; - @internalProperty() private _mode?: string; + @state() private _mode?: string; - @internalProperty() private _pattern?: string; + @state() private _pattern?: string; set item(item: InputText) { this._item = item; @@ -177,7 +177,7 @@ class HaInputTextForm extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/helpers/forms/ha-timer-form.ts b/src/panels/config/helpers/forms/ha-timer-form.ts index 1b81f2d481..e8a83ad32c 100644 --- a/src/panels/config/helpers/forms/ha-timer-form.ts +++ b/src/panels/config/helpers/forms/ha-timer-form.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -22,11 +22,11 @@ class HaTimerForm extends LitElement { private _item?: Timer; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _icon!: string; + @state() private _icon!: string; - @internalProperty() private _duration!: string | number | DurationDict; + @state() private _duration!: string | number | DurationDict; set item(item: Timer) { this._item = item; @@ -111,7 +111,7 @@ class HaTimerForm extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts index 71623d5289..41535926b2 100644 --- a/src/panels/config/helpers/ha-config-helpers.ts +++ b/src/panels/config/helpers/ha-config-helpers.ts @@ -8,7 +8,7 @@ import { HassEntity } from "home-assistant-js-websocket"; import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -43,7 +43,7 @@ export class HaConfigHelpers extends LitElement { @property() public route!: Route; - @internalProperty() private _stateItems: HassEntity[] = []; + @state() private _stateItems: HassEntity[] = []; private _columns = memoize( (narrow, _language): DataTableColumnContainer => { @@ -121,13 +121,13 @@ export class HaConfigHelpers extends LitElement { ); private _getItems = memoize((stateItems: HassEntity[]) => - stateItems.map((state) => ({ - id: state.entity_id, - icon: state.attributes.icon, - name: state.attributes.friendly_name || "", - entity_id: state.entity_id, - editable: state.attributes.editable, - type: computeStateDomain(state), + stateItems.map((entityState) => ({ + id: entityState.entity_id, + icon: entityState.attributes.icon, + name: entityState.attributes.friendly_name || "", + entity_id: entityState.entity_id, + editable: entityState.attributes.editable, + type: computeStateDomain(entityState), })) ); diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts index b3ffe78557..7d2911ca45 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, html, LitElement, property, @@ -161,7 +161,7 @@ class HaConfigInfo extends LitElement { }, 1000); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/info/integrations-card.ts b/src/panels/config/info/integrations-card.ts index 42287dda06..eb0c876148 100644 --- a/src/panels/config/info/integrations-card.ts +++ b/src/panels/config/info/integrations-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -27,11 +27,11 @@ class IntegrationsCard extends LitElement { @property({ type: Boolean }) public narrow = false; - @internalProperty() private _manifests?: { + @state() private _manifests?: { [domain: string]: IntegrationManifest; }; - @internalProperty() private _setups?: { + @state() private _setups?: { [domain: string]: IntegrationSetup; }; @@ -152,7 +152,7 @@ class IntegrationsCard extends LitElement { this._setups = setups; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` table { width: 100%; diff --git a/src/panels/config/info/system-health-card.ts b/src/panels/config/info/system-health-card.ts index ebdcf8f4e4..85728fec70 100644 --- a/src/panels/config/info/system-health-card.ts +++ b/src/panels/config/info/system-health-card.ts @@ -6,9 +6,9 @@ import { mdiContentCopy } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -48,7 +48,7 @@ const sortKeys = (a: string, b: string) => { class SystemHealthCard extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _info?: SystemHealthInfo; + @state() private _info?: SystemHealthInfo; protected render(): TemplateResult { if (!this.hass) { @@ -260,7 +260,7 @@ class SystemHealthCard extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` table { width: 100%; diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index 3bfe8bb69b..731ece01c0 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -6,10 +6,10 @@ import Fuse from "fuse.js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -114,31 +114,31 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { @property() public route!: Route; - @internalProperty() private _configEntries?: ConfigEntryExtended[]; + @state() private _configEntries?: ConfigEntryExtended[]; @property() private _configEntriesInProgress: DataEntryFlowProgressExtended[] = []; - @internalProperty() + @state() private _entityRegistryEntries: EntityRegistryEntry[] = []; - @internalProperty() + @state() private _deviceRegistryEntries: DeviceRegistryEntry[] = []; - @internalProperty() + @state() private _manifests: Record = {}; private _extraFetchedManifests?: Set; - @internalProperty() private _showIgnored = false; + @state() private _showIgnored = false; - @internalProperty() private _showDisabled = false; + @state() private _showDisabled = false; - @internalProperty() private _searchParms = new URLSearchParams( + @state() private _searchParms = new URLSearchParams( window.location.hash.substring(1) ); - @internalProperty() private _filter?: string; + @state() private _filter?: string; public hassSubscribe(): UnsubscribeFunc[] { return [ @@ -624,7 +624,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts index 44cd2866c7..e35512b06f 100644 --- a/src/panels/config/integrations/ha-integration-card.ts +++ b/src/panels/config/integrations/ha-integration-card.ts @@ -7,7 +7,7 @@ import "@polymer/paper-tooltip/paper-tooltip"; import { mdiAlertCircle, mdiDotsVertical, mdiOpenInNew } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -581,7 +581,7 @@ export class HaIntegrationCard extends LitElement { fireEvent(this, "entry-updated", { entry: newEntry }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, haStyleScrollbar, 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 a7e971bfca..827e6aef6b 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 @@ -2,10 +2,10 @@ import "@material/mwc-button"; import "@polymer/paper-input/paper-input"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -25,9 +25,9 @@ class HaPanelDevMqtt extends LitElement { @property({ type: Boolean }) public narrow!: boolean; - @internalProperty() private topic = ""; + @state() private topic = ""; - @internalProperty() private payload = ""; + @state() private payload = ""; private inited = false; @@ -123,7 +123,7 @@ class HaPanelDevMqtt extends LitElement { showOptionsFlowDialog(this, configEntry!); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts index 532b8f7873..22b3ab4a54 100644 --- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts +++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts @@ -2,10 +2,10 @@ import "@material/mwc-button"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -19,11 +19,11 @@ import { HomeAssistant } from "../../../../../types"; class MqttSubscribeCard extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _topic = ""; + @state() private _topic = ""; - @internalProperty() private _subscribed?: () => void; + @state() private _subscribed?: () => void; - @internalProperty() private _messages: Array<{ + @state() private _messages: Array<{ id: number; message: MQTTMessage; payload: string; @@ -129,7 +129,7 @@ class MqttSubscribeCard extends LitElement { ]; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` form { display: block; diff --git a/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts b/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts index f041c1c370..1f8faf19bb 100644 --- a/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts +++ b/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -26,17 +26,17 @@ import { OZWRefreshNodeDialogParams } from "./show-dialog-ozw-refresh-node"; class DialogOZWRefreshNode extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _node_id?: number; + @state() private _node_id?: number; - @internalProperty() private _ozw_instance = 1; + @state() private _ozw_instance = 1; - @internalProperty() private _nodeMetaData?: OZWDeviceMetaData; + @state() private _nodeMetaData?: OZWDeviceMetaData; - @internalProperty() private _node?: OZWDevice; + @state() private _node?: OZWDevice; - @internalProperty() private _active = false; + @state() private _active = false; - @internalProperty() private _complete = false; + @state() private _complete = false; private _refreshDevicesTimeoutHandle?: number; @@ -234,7 +234,7 @@ class DialogOZWRefreshNode extends LitElement { this._node = undefined; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts index dba134523b..8856c3a24c 100644 --- a/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts @@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -44,7 +44,7 @@ class OZWConfigDashboard extends LitElement { @property() public configEntryId?: string; - @internalProperty() private _instances?: OZWInstance[]; + @state() private _instances?: OZWInstance[]; protected firstUpdated() { this._fetchData(); @@ -159,7 +159,7 @@ class OZWConfigDashboard extends LitElement { } } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts index 655d1fae01..10f5e38d97 100644 --- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts @@ -2,10 +2,10 @@ import "@material/mwc-button/mwc-button"; import { mdiCheckCircle, mdiCircle, mdiCloseCircle } from "@mdi/js"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -44,13 +44,13 @@ class OZWNetworkDashboard extends LitElement { @property() public ozwInstance?: number; - @internalProperty() private _network?: OZWInstance; + @state() private _network?: OZWInstance; - @internalProperty() private _statistics?: OZWNetworkStatistics; + @state() private _statistics?: OZWNetworkStatistics; - @internalProperty() private _status = "unknown"; + @state() private _status = "unknown"; - @internalProperty() private _icon = mdiCircle; + @state() private _icon = mdiCircle; protected firstUpdated() { if (!this.ozwInstance) { @@ -172,7 +172,7 @@ class OZWNetworkDashboard extends LitElement { `; } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts index 1983aba1a2..da9f5175a3 100644 --- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { mdiAlert, mdiCheck } from "@mdi/js"; import { - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -46,7 +46,7 @@ class OZWNetworkNodes extends LitElement { @property() public ozwInstance = 0; - @internalProperty() private _nodes: OZWDevice[] = []; + @state() private _nodes: OZWDevice[] = []; private _columns = memoizeOne( (narrow: boolean): DataTableColumnContainer => ({ @@ -127,7 +127,7 @@ class OZWNetworkNodes extends LitElement { navigate(this, `/config/ozw/network/${this.ozwInstance}/node/${nodeId}`); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return haStyle; } } diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts index d495a45d76..ec55e61569 100644 --- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -45,13 +45,13 @@ class OZWNodeConfig extends LitElement { @property() public nodeId?; - @internalProperty() private _node?: OZWDevice; + @state() private _node?: OZWDevice; - @internalProperty() private _metadata?: OZWDeviceMetaDataResponse; + @state() private _metadata?: OZWDeviceMetaDataResponse; - @internalProperty() private _config?: OZWDeviceConfig[]; + @state() private _config?: OZWDeviceConfig[]; - @internalProperty() private _error?: string; + @state() private _error?: string; protected firstUpdated() { if (!this.ozwInstance) { @@ -221,7 +221,7 @@ class OZWNodeConfig extends LitElement { }); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts index ff13a68f2f..b8a6bcf5bd 100644 --- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -43,11 +43,11 @@ class OZWNodeDashboard extends LitElement { @property() public nodeId?; - @internalProperty() private _node?: OZWDevice; + @state() private _node?: OZWDevice; - @internalProperty() private _metadata?: OZWDeviceMetaDataResponse; + @state() private _metadata?: OZWDeviceMetaDataResponse; - @internalProperty() private _not_found = false; + @state() private _not_found = false; protected firstUpdated() { if (!this.ozwInstance) { @@ -189,7 +189,7 @@ class OZWNodeDashboard extends LitElement { }); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts index 3632eb748f..8af5413706 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts @@ -1,8 +1,8 @@ import { - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -33,13 +33,13 @@ import "./zha-group-binding"; class DialogZHACluster extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _device?: ZHADevice; + @state() private _device?: ZHADevice; - @internalProperty() private _selectedCluster?: Cluster; + @state() private _selectedCluster?: Cluster; - @internalProperty() private _bindableDevices: ZHADevice[] = []; + @state() private _bindableDevices: ZHADevice[] = []; - @internalProperty() private _groups: ZHAGroup[] = []; + @state() private _groups: ZHAGroup[] = []; public async showDialog( params: ZHADeviceZigbeeInfoDialogParams @@ -132,7 +132,7 @@ class DialogZHACluster extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return haStyleDialog; } } diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts index 135776a74a..b8330b5826 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts @@ -1,8 +1,8 @@ import { - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -33,9 +33,9 @@ export interface DeviceRowData extends DataTableRowData { class DialogZHADeviceChildren extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _device: ZHADevice | undefined; + @state() private _device: ZHADevice | undefined; - @internalProperty() private _devices: Map | undefined; + @state() private _devices: Map | undefined; private _deviceChildren = memoizeOne( ( @@ -132,7 +132,7 @@ class DialogZHADeviceChildren extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return haStyleDialog; } } diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts index d0fc98269f..17bb63f3f8 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts @@ -1,8 +1,8 @@ import { - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -17,7 +17,7 @@ import { ZHADeviceZigbeeInfoDialogParams } from "./show-dialog-zha-device-zigbee class DialogZHADeviceZigbeeInfo extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _signature: any; + @state() private _signature: any; public async showDialog( params: ZHADeviceZigbeeInfoDialogParams @@ -59,7 +59,7 @@ class DialogZHADeviceZigbeeInfo extends LitElement { this._signature = undefined; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return haStyleDialog; } } diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts index e32e984729..1e82acbb8d 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -34,22 +34,22 @@ import { createCloseHeading } from "../../../../../components/ha-dialog"; class DialogZHAReconfigureDevice extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _status?: string; + @state() private _status?: string; - @internalProperty() private _stages?: string[]; + @state() private _stages?: string[]; - @internalProperty() private _clusterConfigurationStatuses?: Map< + @state() private _clusterConfigurationStatuses?: Map< number, ClusterConfigurationStatus > = new Map(); - @internalProperty() private _params: + @state() private _params: | ZHAReconfigureDeviceDialogParams | undefined = undefined; - @internalProperty() private _allSuccessful = true; + @state() private _allSuccessful = true; - @internalProperty() private _showDetails = false; + @state() private _showDetails = false; private _subscribed?: Promise; @@ -397,7 +397,7 @@ class DialogZHAReconfigureDevice extends LitElement { this._showDetails = !this._showDetails; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts index eceb2fa034..c68bba9760 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts @@ -3,10 +3,10 @@ import { IronAutogrowTextareaElement } from "@polymer/iron-autogrow-textarea"; import "@polymer/paper-input/paper-textarea"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -36,20 +36,17 @@ class ZHAAddDevicesPage extends LitElement { @property() public route?: Route; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _discoveredDevices: Record< - string, - ZHADevice - > = {}; + @state() private _discoveredDevices: Record = {}; - @internalProperty() private _formattedEvents = ""; + @state() private _formattedEvents = ""; - @internalProperty() private _active = false; + @state() private _active = false; - @internalProperty() private _showHelp = false; + @state() private _showHelp = false; - @internalProperty() private _showLogs = false; + @state() private _showLogs = false; private _ieeeAddress?: string; @@ -217,7 +214,7 @@ class ZHAAddDevicesPage extends LitElement { ); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts index 81765c1810..840d2ebea3 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts @@ -3,10 +3,10 @@ import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -38,9 +38,9 @@ export class ZHAAddGroupPage extends LitElement { @property({ type: Array }) public deviceEndpoints: ZHADeviceEndpoint[] = []; - @internalProperty() private _processingAdd = false; + @state() private _processingAdd = false; - @internalProperty() private _groupName = ""; + @state() private _groupName = ""; @query("zha-device-endpoint-data-table", true) private _zhaDevicesDataTable!: ZHADeviceEndpointDataTable; @@ -155,7 +155,7 @@ export class ZHAAddGroupPage extends LitElement { this._groupName = target.value || ""; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ css` .header { 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 2ef7ed2784..69e3c2f120 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 @@ -5,9 +5,9 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -46,15 +46,15 @@ export class ZHAClusterAttributes extends LitElement { @property() public selectedCluster?: Cluster; - @internalProperty() private _attributes: Attribute[] = []; + @state() private _attributes: Attribute[] = []; - @internalProperty() private _selectedAttributeIndex = -1; + @state() private _selectedAttributeIndex = -1; - @internalProperty() private _attributeValue?: any = ""; + @state() private _attributeValue?: any = ""; - @internalProperty() private _manufacturerCodeOverride?: string | number; + @state() private _manufacturerCodeOverride?: string | number; - @internalProperty() + @state() private _setAttributeServiceData?: SetAttributeServiceData; protected updated(changedProperties: PropertyValues): void { @@ -273,7 +273,7 @@ export class ZHAClusterAttributes extends LitElement { this._attributeValue = ""; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` 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 f66f398148..bae849aff9 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 @@ -4,9 +4,9 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -41,15 +41,15 @@ export class ZHAClusterCommands extends LitElement { @property() public selectedCluster?: Cluster; - @internalProperty() private _showHelp = false; + @state() private _showHelp = false; - @internalProperty() private _commands: Command[] = []; + @state() private _commands: Command[] = []; - @internalProperty() private _selectedCommandIndex = -1; + @state() private _selectedCommandIndex = -1; - @internalProperty() private _manufacturerCodeOverride?: number; + @state() private _manufacturerCodeOverride?: number; - @internalProperty() + @state() private _issueClusterCommandServiceData?: IssueCommandServiceData; protected updated(changedProperties: PropertyValues): void { @@ -205,7 +205,7 @@ export class ZHAClusterCommands extends LitElement { this._issueClusterCommandServiceData = this._computeIssueClusterCommandServiceData(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts index 9761d1b0b6..46b4c6caea 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts @@ -3,9 +3,9 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -45,9 +45,9 @@ export class ZHAClusters extends LitElement { @property() public showHelp = false; - @internalProperty() private _selectedClusterIndex = -1; + @state() private _selectedClusterIndex = -1; - @internalProperty() private _clusters: Cluster[] = []; + @state() private _clusters: Cluster[] = []; protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("selectedDevice")) { @@ -132,7 +132,7 @@ export class ZHAClusters extends LitElement { this.showHelp = !this.showHelp; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts index fd67ae4c04..d8241f67a9 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts @@ -4,7 +4,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -169,7 +169,7 @@ class ZHAConfigDashboard extends LitElement { schema.name; } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` 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 41d269f69c..5cbd2a947e 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 @@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -31,13 +31,13 @@ export class ZHADeviceBindingControl extends LitElement { @property() public selectedDevice?: ZHADevice; - @internalProperty() private _showHelp = false; + @state() private _showHelp = false; - @internalProperty() private _bindTargetIndex = -1; + @state() private _bindTargetIndex = -1; - @internalProperty() private bindableDevices: ZHADevice[] = []; + @state() private bindableDevices: ZHADevice[] = []; - @internalProperty() private _deviceToBind?: ZHADevice; + @state() private _deviceToBind?: ZHADevice; protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("selectedDevice")) { @@ -142,7 +142,7 @@ export class ZHADeviceBindingControl extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts index 763bb5d49a..eeae2aa242 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts @@ -3,12 +3,12 @@ import "@polymer/paper-listbox/paper-listbox"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, property, - internalProperty, + state, TemplateResult, } from "lit-element"; import { fireEvent } from "../../../../../common/dom/fire_event"; @@ -43,7 +43,7 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) { @property({ type: Boolean }) public narrow?: boolean; - @internalProperty() private _entities: EntityRegistryEntry[] = []; + @state() private _entities: EntityRegistryEntry[] = []; private _deviceEntities = memoizeOne( ( @@ -206,7 +206,7 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts index 2b09a8220a..d0d79c8dd3 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -156,7 +156,7 @@ export class ZHADeviceEndpointDataTable extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ css` .table-cell-text { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts index d3422dd828..4721363bc6 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts @@ -2,10 +2,10 @@ import "@polymer/paper-input/paper-input"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -36,7 +36,7 @@ class ZHADevicePairingStatusCard extends LitElement { @property({ type: Boolean }) public narrow?: boolean; - @internalProperty() private _showHelp = false; + @state() private _showHelp = false; protected render(): TemplateResult { if (!this.hass || !this.device) { @@ -102,7 +102,7 @@ class ZHADevicePairingStatusCard extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` 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 449db0795a..571d5c7101 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 @@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -45,15 +45,15 @@ export class ZHAGroupBindingControl extends LitElement { @property() public selectedDevice?: ZHADevice; - @internalProperty() private _showHelp = false; + @state() private _showHelp = false; - @internalProperty() private _bindTargetIndex = -1; + @state() private _bindTargetIndex = -1; - @internalProperty() private groups: ZHAGroup[] = []; + @state() private groups: ZHAGroup[] = []; - @internalProperty() private _selectedClusters: string[] = []; + @state() private _selectedClusters: string[] = []; - @internalProperty() private _clusters: Cluster[] = []; + @state() private _clusters: Cluster[] = []; private _groupToBind?: ZHAGroup; @@ -250,7 +250,7 @@ export class ZHAGroupBindingControl extends LitElement { ); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` 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 e56c145673..2a52714a02 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 @@ -1,10 +1,10 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -46,16 +46,16 @@ export class ZHAGroupPage extends LitElement { @property({ type: Array }) public deviceEndpoints: ZHADeviceEndpoint[] = []; - @internalProperty() private _processingAdd = false; + @state() private _processingAdd = false; - @internalProperty() private _processingRemove = false; + @state() private _processingRemove = false; - @internalProperty() + @state() private _filteredDeviceEndpoints: ZHADeviceEndpoint[] = []; - @internalProperty() private _selectedDevicesToAdd: string[] = []; + @state() private _selectedDevicesToAdd: string[] = []; - @internalProperty() private _selectedDevicesToRemove: string[] = []; + @state() private _selectedDevicesToRemove: string[] = []; @query("#addMembers", true) private _zhaAddMembersDataTable!: ZHADeviceEndpointDataTable; @@ -285,7 +285,7 @@ export class ZHAGroupPage extends LitElement { navigate(this, `/config/zha/groups`, true); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ css` hass-subpage { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts index ce1e02415a..b11428b9fa 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import { mdiPlus } from "@mdi/js"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -144,7 +144,7 @@ export class ZHAGroupsDashboard extends LitElement { navigate(this, `/config/zha/group/${groupId}`); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index c1937537c1..ac195ca760 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -47,19 +47,19 @@ export class ZHANetworkVisualizationPage extends LitElement { @query("#visualization", true) private _visualization?: HTMLElement; - @internalProperty() + @state() private _devices: Map = new Map(); - @internalProperty() + @state() private _devicesByDeviceId: Map = new Map(); - @internalProperty() + @state() private _nodes: Node[] = []; - @internalProperty() + @state() private _network?: Network; - @internalProperty() + @state() private _filter?: string; private _autoZoom = true; @@ -361,7 +361,7 @@ export class ZHANetworkVisualizationPage extends LitElement { this._autoZoom = (ev.target as HaCheckbox).checked; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ css` .header { diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts index 5ea9be159f..114c146bdf 100644 --- a/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts +++ b/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts @@ -6,12 +6,12 @@ import "../../../../../components/ha-circular-progress"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, property, - internalProperty, + state, TemplateResult, } from "lit-element"; import "../../../../../components/buttons/ha-call-api-button"; @@ -51,19 +51,19 @@ export class ZwaveMigration extends LitElement { @property({ type: Boolean }) public isWide!: boolean; - @internalProperty() private _networkStatus?: ZWaveNetworkStatus; + @state() private _networkStatus?: ZWaveNetworkStatus; - @internalProperty() private _step = 0; + @state() private _step = 0; - @internalProperty() private _stoppingNetwork = false; + @state() private _stoppingNetwork = false; - @internalProperty() private _migrationConfig?: ZWaveMigrationConfig; + @state() private _migrationConfig?: ZWaveMigrationConfig; - @internalProperty() private _migrationData?: OZWMigrationData; + @state() private _migrationData?: OZWMigrationData; - @internalProperty() private _migratedZwaveEntities?: string[]; + @state() private _migratedZwaveEntities?: string[]; - @internalProperty() private _deviceNameLookup: { [id: string]: string } = {}; + @state() private _deviceNameLookup: { [id: string]: string } = {}; private _unsub?: Promise; @@ -461,7 +461,7 @@ export class ZwaveMigration extends LitElement { this._networkStatus = await fetchNetworkStatus(this.hass!); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts index b9860c0589..e162edacc9 100644 --- a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts +++ b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts @@ -1,10 +1,10 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -35,11 +35,11 @@ export class ZwaveNetwork extends LitElement { @property() public isWide!: boolean; - @internalProperty() private _showHelp = false; + @state() private _showHelp = false; - @internalProperty() private _networkStatus?: ZWaveNetworkStatus; + @state() private _networkStatus?: ZWaveNetworkStatus; - @internalProperty() private _unsubs: Array> = []; + @state() private _unsubs: Array> = []; public disconnectedCallback(): void { this._unsubscribe(); @@ -239,7 +239,7 @@ export class ZwaveNetwork extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts index 343cc3b479..4bc1542a51 100644 --- a/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts +++ b/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts @@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -34,13 +34,13 @@ export class ZwaveNodeConfig extends LitElement { @property() public selectedNode = -1; - @internalProperty() private _configItem?: ZWaveConfigItem; + @state() private _configItem?: ZWaveConfigItem; - @internalProperty() private _wakeupInput = -1; + @state() private _wakeupInput = -1; - @internalProperty() private _selectedConfigParameter = -1; + @state() private _selectedConfigParameter = -1; - @internalProperty() private _selectedConfigValue: number | string = -1; + @state() private _selectedConfigValue: number | string = -1; protected render(): TemplateResult { return html` @@ -107,9 +107,9 @@ export class ZwaveNodeConfig extends LitElement { @iron-select=${this._selectedConfigParameterChanged} > ${this.config.map( - (state) => html` + (entityState) => html` - ${state.key}: ${state.value.label} + ${entityState.key}: ${entityState.value.label} ` )} @@ -135,8 +135,8 @@ export class ZwaveNodeConfig extends LitElement { @iron-select=${this._configValueSelectChanged} > ${this._configItem.value.data_items.map( - (state) => html` - ${state} + (entityState) => html` + ${entityState} ` )} @@ -218,7 +218,7 @@ export class ZwaveNodeConfig extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts index 9d2ee97f3e..719a57a493 100644 --- a/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts +++ b/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts @@ -3,10 +3,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -23,7 +23,7 @@ export class ZwaveValues extends LitElement { @property() public values: ZWaveValue[] = []; - @internalProperty() private _selectedValue = -1; + @state() private _selectedValue = -1; protected render(): TemplateResult { return html` @@ -54,7 +54,7 @@ export class ZwaveValues extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts index fa9f30869e..484b240212 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts @@ -3,12 +3,12 @@ import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js"; import "../../../../../components/ha-switch"; import "../../../../../components/ha-formfield"; import { - CSSResult, + CSSResultGroup, customElement, html, LitElement, property, - internalProperty, + state, TemplateResult, css, } from "lit-element"; @@ -28,13 +28,13 @@ export interface ZWaveJSAddNodeDevice { class DialogZWaveJSAddNode extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private entry_id?: string; + @state() private entry_id?: string; - @internalProperty() private _use_secure_inclusion = false; + @state() private _use_secure_inclusion = false; - @internalProperty() private _status = ""; + @state() private _status = ""; - @internalProperty() private _device?: ZWaveJSAddNodeDevice; + @state() private _device?: ZWaveJSAddNodeDevice; private _addNodeTimeoutHandle?: number; @@ -252,7 +252,7 @@ class DialogZWaveJSAddNode extends LitElement { fireEvent(this, "dialog-closed", { dialog: this.localName }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts index 7dfc9a999a..f15acf8846 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts @@ -6,7 +6,7 @@ import { html, LitElement, property, - internalProperty, + state, TemplateResult, css, } from "lit-element"; @@ -23,13 +23,13 @@ import { reinterviewNode } from "../../../../../data/zwave_js"; class DialogZWaveJSReinterviewNode extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private entry_id?: string; + @state() private entry_id?: string; - @internalProperty() private node_id?: number; + @state() private node_id?: number; - @internalProperty() private _status?: string; + @state() private _status?: string; - @internalProperty() private _stages?: string[]; + @state() private _stages?: string[]; private _subscribed?: Promise; diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts index a319ad8ce9..5c575d41e2 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts @@ -1,11 +1,11 @@ import "@material/mwc-button/mwc-button"; import { - CSSResult, + CSSResultGroup, customElement, html, LitElement, property, - internalProperty, + state, TemplateResult, css, } from "lit-element"; @@ -27,11 +27,11 @@ export interface ZWaveJSRemovedNode { class DialogZWaveJSRemoveNode extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private entry_id?: string; + @state() private entry_id?: string; - @internalProperty() private _status = ""; + @state() private _status = ""; - @internalProperty() private _node?: ZWaveJSRemovedNode; + @state() private _node?: ZWaveJSRemovedNode; private _removeNodeTimeoutHandle?: number; @@ -213,7 +213,7 @@ class DialogZWaveJSRemoveNode extends LitElement { fireEvent(this, "dialog-closed", { dialog: this.localName }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` 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 eb53eeafba..5e082e90e7 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 @@ -3,10 +3,10 @@ import "@material/mwc-icon-button/mwc-icon-button"; import { mdiCheckCircle, mdiCircle, mdiRefresh } from "@mdi/js"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -49,15 +49,15 @@ class ZWaveJSConfigDashboard extends LitElement { @property() public configEntryId?: string; - @internalProperty() private _network?: ZWaveJSNetwork; + @state() private _network?: ZWaveJSNetwork; - @internalProperty() private _nodes?: ZWaveJSNode[]; + @state() private _nodes?: ZWaveJSNode[]; - @internalProperty() private _status = "unknown"; + @state() private _status = "unknown"; - @internalProperty() private _icon = mdiCircle; + @state() private _icon = mdiCircle; - @internalProperty() private _dataCollectionOptIn?: boolean; + @state() private _dataCollectionOptIn?: boolean; protected firstUpdated() { if (this.hass) { @@ -328,7 +328,7 @@ class ZWaveJSConfigDashboard extends LitElement { this.shadowRoot!.removeChild(a); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` 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 b51a9d8163..d8efb4ed06 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 @@ -6,7 +6,7 @@ import { customElement, LitElement, CSSResultArray, - internalProperty, + state, query, } from "lit-element"; import "@polymer/paper-listbox/paper-listbox"; @@ -33,7 +33,7 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) { @property() public configEntryId!: string; - @internalProperty() private _logConfig?: ZWaveJSLogConfig; + @state() private _logConfig?: ZWaveJSLogConfig; @query("textarea", true) private _textarea?: HTMLTextAreaElement; 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 bc850d348f..47a81f57e7 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 @@ -12,10 +12,10 @@ import "@material/mwc-button/mwc-button"; import "@material/mwc-icon-button/mwc-icon-button"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -91,14 +91,11 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) { @property({ type: Array }) private _deviceRegistryEntries?: DeviceRegistryEntry[]; - @internalProperty() private _config?: ZWaveJSNodeConfigParams; + @state() private _config?: ZWaveJSNodeConfigParams; - @internalProperty() private _results: Record< - string, - ZWaveJSSetConfigParamResult - > = {}; + @state() private _results: Record = {}; - @internalProperty() private _error?: string; + @state() private _error?: string; public connectedCallback(): void { super.connectedCallback(); @@ -294,8 +291,8 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) { @iron-select=${this._dropdownSelected} > ${Object.entries(item.metadata.states).map( - ([key, state]) => html` - ${state} + ([key, entityState]) => html` + ${entityState} ` )} @@ -428,7 +425,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) { ); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts index db8a33c244..2eed2d9224 100644 --- a/src/panels/config/logs/dialog-system-log-detail.ts +++ b/src/panels/config/logs/dialog-system-log-detail.ts @@ -3,9 +3,9 @@ import { mdiClose, mdiContentCopy, mdiPackageVariant } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -34,9 +34,9 @@ import { formatSystemLogTime } from "./util"; class DialogSystemLogDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _params?: SystemLogDetailDialogParams; + @state() private _params?: SystemLogDetailDialogParams; - @internalProperty() private _manifest?: IntegrationManifest; + @state() private _manifest?: IntegrationManifest; public async showDialog(params: SystemLogDetailDialogParams): Promise { this._params = params; @@ -197,7 +197,7 @@ class DialogSystemLogDetail extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index 2dd3fc9ceb..1f10e7a5a1 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -1,9 +1,9 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -15,7 +15,7 @@ import { HomeAssistant } from "../../../types"; class ErrorLogCard extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _errorHTML!: TemplateResult[] | string; + @state() private _errorHTML!: TemplateResult[] | string; protected render(): TemplateResult { return html` @@ -47,7 +47,7 @@ class ErrorLogCard extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .error-log-intro { text-align: center; diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts index a8c822ccd1..a2166e3ba4 100644 --- a/src/panels/config/logs/ha-config-logs.ts +++ b/src/panels/config/logs/ha-config-logs.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -54,7 +54,7 @@ export class HaConfigLogs extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts index 3cc184b8be..61d03b3da9 100644 --- a/src/panels/config/logs/system-log-card.ts +++ b/src/panels/config/logs/system-log-card.ts @@ -2,10 +2,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -32,7 +32,7 @@ export class SystemLogCard extends LitElement { public loaded = false; - @internalProperty() private _items?: LoggedError[]; + @state() private _items?: LoggedError[]; public async fetchData(): Promise { this._items = undefined; @@ -154,7 +154,7 @@ export class SystemLogCard extends LitElement { showSystemLogDetailDialog(this, { item }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { padding-top: 16px; diff --git a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts index 3ed55ea16d..5748d93f78 100644 --- a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts +++ b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -31,22 +31,22 @@ import { LovelaceDashboardDetailsDialogParams } from "./show-dialog-lovelace-das export class DialogLovelaceDashboardDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _params?: LovelaceDashboardDetailsDialogParams; + @state() private _params?: LovelaceDashboardDetailsDialogParams; - @internalProperty() private _urlPath!: LovelaceDashboard["url_path"]; + @state() private _urlPath!: LovelaceDashboard["url_path"]; - @internalProperty() private _showInSidebar!: boolean; + @state() private _showInSidebar!: boolean; - @internalProperty() private _icon!: string; + @state() private _icon!: string; - @internalProperty() private _title!: string; + @state() private _title!: string; - @internalProperty() + @state() private _requireAdmin!: LovelaceDashboard["require_admin"]; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _submitting = false; + @state() private _submitting = false; public async showDialog( params: LovelaceDashboardDetailsDialogParams @@ -322,7 +322,7 @@ export class DialogLovelaceDashboardDetail extends LitElement { this._params = undefined; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts index e40fbcd9db..2eef3839fe 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -3,7 +3,7 @@ import "@polymer/paper-tooltip/paper-tooltip"; import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -46,7 +46,7 @@ export class HaConfigLovelaceDashboards extends LitElement { @property() public route!: Route; - @internalProperty() private _dashboards: LovelaceDashboard[] = []; + @state() private _dashboards: LovelaceDashboard[] = []; private _columns = memoize( (narrow: boolean, _language, dashboards): DataTableColumnContainer => { diff --git a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts index ff4df8eb82..48836d8a46 100644 --- a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts +++ b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts @@ -4,10 +4,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -41,15 +41,15 @@ const detectResourceType = (url: string) => { export class DialogLovelaceResourceDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _params?: LovelaceResourceDetailsDialogParams; + @state() private _params?: LovelaceResourceDetailsDialogParams; - @internalProperty() private _url!: LovelaceResource["url"]; + @state() private _url!: LovelaceResource["url"]; - @internalProperty() private _type?: LovelaceResource["type"]; + @state() private _type?: LovelaceResource["type"]; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _submitting = false; + @state() private _submitting = false; public async showDialog( params: LovelaceResourceDetailsDialogParams @@ -236,7 +236,7 @@ export class DialogLovelaceResourceDetail extends LitElement { this._params = undefined; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts index 68a64a4b65..8366b52051 100644 --- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts +++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts @@ -6,7 +6,7 @@ import "@polymer/paper-listbox/paper-listbox"; import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -49,7 +49,7 @@ export class HaConfigLovelaceRescources extends LitElement { @property() public route!: Route; - @internalProperty() private _resources: LovelaceResource[] = []; + @state() private _resources: LovelaceResource[] = []; private _columns = memoize( (_language): DataTableColumnContainer => ({ diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts index 9d83ae4d9a..d9fb7f3dca 100644 --- a/src/panels/config/person/dialog-person-detail.ts +++ b/src/panels/config/person/dialog-person-detail.ts @@ -2,9 +2,9 @@ import "@material/mwc-button"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -50,25 +50,25 @@ const cropOptions: CropOptions = { class DialogPersonDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _userId?: string; + @state() private _userId?: string; - @internalProperty() private _user?: User; + @state() private _user?: User; - @internalProperty() private _isAdmin?: boolean; + @state() private _isAdmin?: boolean; - @internalProperty() private _deviceTrackers!: string[]; + @state() private _deviceTrackers!: string[]; - @internalProperty() private _picture!: string | null; + @state() private _picture!: string | null; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _params?: PersonDetailDialogParams; + @state() private _params?: PersonDetailDialogParams; - @internalProperty() private _submitting = false; + @state() private _submitting = false; - @internalProperty() private _personExists = false; + @state() private _personExists = false; private _deviceTrackersAvailable = memoizeOne((hass) => Object.keys(hass.states).some( @@ -438,7 +438,7 @@ class DialogPersonDetail extends LitElement { this._params = undefined; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index 697627e09f..3452320425 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -3,9 +3,9 @@ import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -47,9 +47,9 @@ class HaConfigPerson extends LitElement { @property() public route!: Route; - @internalProperty() private _storageItems?: Person[]; + @state() private _storageItems?: Person[]; - @internalProperty() private _configItems?: Person[]; + @state() private _configItems?: Person[]; private _usersLoad?: Promise; @@ -265,7 +265,7 @@ class HaConfigPerson extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` a { color: var(--primary-color); diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index cdecf87ec2..846f209485 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -10,10 +10,10 @@ import { import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -52,9 +52,9 @@ class HaSceneDashboard extends LitElement { @property() private _activeFilters?: string[]; - @internalProperty() private _filteredScenes?: string[] | null; + @state() private _filteredScenes?: string[] | null; - @internalProperty() private _filterValue?; + @state() private _filterValue?; private _scenes = memoizeOne( (scenes: SceneEntity[], filteredScenes?: string[] | null) => { @@ -252,7 +252,7 @@ class HaSceneDashboard extends LitElement { }); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 0fd4d9dcd1..545a5d12b8 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -5,10 +5,10 @@ import "@polymer/paper-item/paper-item-body"; import { HassEvent } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -89,29 +89,29 @@ export class HaSceneEditor extends SubscribeMixin( @property() public showAdvanced!: boolean; - @internalProperty() private _dirty = false; + @state() private _dirty = false; - @internalProperty() private _errors?: string; + @state() private _errors?: string; - @internalProperty() private _config?: SceneConfig; + @state() private _config?: SceneConfig; - @internalProperty() private _entities: string[] = []; + @state() private _entities: string[] = []; - @internalProperty() private _devices: string[] = []; + @state() private _devices: string[] = []; - @internalProperty() + @state() private _deviceRegistryEntries: DeviceRegistryEntry[] = []; - @internalProperty() + @state() private _entityRegistryEntries: EntityRegistryEntry[] = []; - @internalProperty() private _scene?: SceneEntity; + @state() private _scene?: SceneEntity; private _storedStates: SceneEntities = {}; private _unsubscribeEvents?: () => void; - @internalProperty() private _deviceEntityLookup: DeviceEntitiesLookup = {}; + @state() private _deviceEntityLookup: DeviceEntitiesLookup = {}; private _activateContextId?: string; @@ -686,9 +686,9 @@ export class HaSceneEditor extends SubscribeMixin( private _calculateStates(): SceneEntities { const output: SceneEntities = {}; this._entities.forEach((entityId) => { - const state = this._getCurrentState(entityId); - if (state) { - output[entityId] = state; + const entityState = this._getCurrentState(entityId); + if (entityState) { + output[entityId] = entityState; } }); return output; @@ -698,11 +698,11 @@ export class HaSceneEditor extends SubscribeMixin( if (entityId in this._storedStates) { return; } - const state = this._getCurrentState(entityId); - if (!state) { + const entityState = this._getCurrentState(entityId); + if (!entityState) { return; } - this._storedStates[entityId] = state; + this._storedStates[entityId] = entityState; } private _getCurrentState(entityId: string) { @@ -736,7 +736,7 @@ export class HaSceneEditor extends SubscribeMixin( this._saveScene(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index e59a8b7429..bd11dc5bba 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -13,9 +13,9 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import { PaperListboxElement } from "@polymer/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -69,17 +69,17 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) { @property() public narrow!: boolean; - @internalProperty() private _config?: ScriptConfig; + @state() private _config?: ScriptConfig; - @internalProperty() private _entityId?: string; + @state() private _entityId?: string; - @internalProperty() private _idError = false; + @state() private _idError = false; - @internalProperty() private _dirty = false; + @state() private _dirty = false; - @internalProperty() private _errors?: string; + @state() private _errors?: string; - @internalProperty() private _mode: "gui" | "yaml" = "gui"; + @state() private _mode: "gui" | "yaml" = "gui"; @query("ha-yaml-editor", true) private _editor?: HaYamlEditor; @@ -681,7 +681,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) { this._saveScript(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index bd38f62599..aa2e527815 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -9,10 +9,10 @@ import { import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -50,9 +50,9 @@ class HaScriptPicker extends LitElement { @property() private _activeFilters?: string[]; - @internalProperty() private _filteredScripts?: string[] | null; + @state() private _filteredScripts?: string[] | null; - @internalProperty() private _filterValue?; + @state() private _filterValue?; private _scripts = memoizeOne( (scripts: HassEntity[], filteredScripts?: string[] | null) => { @@ -268,7 +268,7 @@ class HaScriptPicker extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/server_control/ha-config-server-control.ts b/src/panels/config/server_control/ha-config-server-control.ts index f63cfab076..8eb165aa71 100644 --- a/src/panels/config/server_control/ha-config-server-control.ts +++ b/src/panels/config/server_control/ha-config-server-control.ts @@ -4,10 +4,10 @@ import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -35,9 +35,9 @@ export class HaConfigServerControl extends LitElement { @property() public showAdvanced!: boolean; - @internalProperty() private _validating = false; + @state() private _validating = false; - @internalProperty() private _reloadableDomains: string[] = []; + @state() private _reloadableDomains: string[] = []; private _validateLog = ""; @@ -242,7 +242,7 @@ export class HaConfigServerControl extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/config/tags/dialog-tag-detail.ts b/src/panels/config/tags/dialog-tag-detail.ts index 3a8655fd6c..0f7f551110 100644 --- a/src/panels/config/tags/dialog-tag-detail.ts +++ b/src/panels/config/tags/dialog-tag-detail.ts @@ -2,10 +2,10 @@ import "@material/mwc-button"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -28,17 +28,17 @@ class DialogTagDetail implements HassDialog { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _id?: string; + @state() private _id?: string; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _params?: TagDetailDialogParams; + @state() private _params?: TagDetailDialogParams; - @internalProperty() private _submitting = false; + @state() private _submitting = false; - @internalProperty() private _qrCode?: TemplateResult; + @state() private _qrCode?: TemplateResult; public showDialog(params: TagDetailDialogParams): void { this._params = params; @@ -252,7 +252,7 @@ class DialogTagDetail this._qrCode = html``; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts index d543b5c6af..9c138eabe3 100644 --- a/src/panels/config/tags/ha-config-tags.ts +++ b/src/panels/config/tags/ha-config-tags.ts @@ -9,7 +9,7 @@ import { import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -57,9 +57,9 @@ export class HaConfigTags extends SubscribeMixin(LitElement) { @property() public route!: Route; - @internalProperty() private _tags: Tag[] = []; + @state() private _tags: Tag[] = []; - @internalProperty() private _canWriteTags = false; + @state() private _canWriteTags = false; private _columns = memoizeOne( ( diff --git a/src/panels/config/tags/tag-image.ts b/src/panels/config/tags/tag-image.ts index 7392b935cb..eae822f0b7 100644 --- a/src/panels/config/tags/tag-image.ts +++ b/src/panels/config/tags/tag-image.ts @@ -1,7 +1,7 @@ import { mdiNfcVariant } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -52,7 +52,7 @@ export class HaTagImage extends LitElement {
`; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .image { height: 100%; diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts index b18bfc7a7e..850157a63f 100644 --- a/src/panels/config/users/dialog-add-user.ts +++ b/src/panels/config/users/dialog-add-user.ts @@ -2,10 +2,10 @@ import "@material/mwc-button"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -33,24 +33,24 @@ import { AddUserDialogParams } from "./show-dialog-add-user"; export class DialogAddUser extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _loading = false; + @state() private _loading = false; // Error message when can't talk to server etc - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _params?: AddUserDialogParams; + @state() private _params?: AddUserDialogParams; - @internalProperty() private _name?: string; + @state() private _name?: string; - @internalProperty() private _username?: string; + @state() private _username?: string; - @internalProperty() private _password?: string; + @state() private _password?: string; - @internalProperty() private _passwordConfirm?: string; + @state() private _passwordConfirm?: string; - @internalProperty() private _isAdmin?: boolean; + @state() private _isAdmin?: boolean; - @internalProperty() private _allowChangeName = true; + @state() private _allowChangeName = true; public showDialog(params: AddUserDialogParams) { this._params = params; @@ -264,7 +264,7 @@ export class DialogAddUser extends LitElement { this._close(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts index 7882b5ba16..864aaef4c4 100644 --- a/src/panels/config/users/dialog-user-detail.ts +++ b/src/panels/config/users/dialog-user-detail.ts @@ -3,10 +3,10 @@ import "@polymer/paper-input/paper-input"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -34,17 +34,17 @@ import { UserDetailDialogParams } from "./show-dialog-user-detail"; class DialogUserDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _isAdmin?: boolean; + @state() private _isAdmin?: boolean; - @internalProperty() private _isActive?: boolean; + @state() private _isActive?: boolean; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _params?: UserDetailDialogParams; + @state() private _params?: UserDetailDialogParams; - @internalProperty() private _submitting = false; + @state() private _submitting = false; public async showDialog(params: UserDetailDialogParams): Promise { this._params = params; @@ -295,7 +295,7 @@ class DialogUserDetail extends LitElement { this._params = undefined; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts index d06e6bce0e..380d6ed767 100644 --- a/src/panels/config/zone/dialog-zone-detail.ts +++ b/src/panels/config/zone/dialog-zone-detail.ts @@ -2,9 +2,9 @@ import "@material/mwc-button"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -30,23 +30,23 @@ import { ZoneDetailDialogParams } from "./show-dialog-zone-detail"; class DialogZoneDetail extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _name!: string; + @state() private _name!: string; - @internalProperty() private _icon!: string; + @state() private _icon!: string; - @internalProperty() private _latitude!: number; + @state() private _latitude!: number; - @internalProperty() private _longitude!: number; + @state() private _longitude!: number; - @internalProperty() private _passive!: boolean; + @state() private _passive!: boolean; - @internalProperty() private _radius!: number; + @state() private _radius!: number; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _params?: ZoneDetailDialogParams; + @state() private _params?: ZoneDetailDialogParams; - @internalProperty() private _submitting = false; + @state() private _submitting = false; public showDialog(params: ZoneDetailDialogParams): void { this._params = params; @@ -282,7 +282,7 @@ class DialogZoneDetail extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index 0e1972f69e..328ff27072 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -8,10 +8,10 @@ import "@polymer/paper-tooltip/paper-tooltip"; import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -62,13 +62,13 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { @property() public route!: Route; - @internalProperty() private _storageItems?: Zone[]; + @state() private _storageItems?: Zone[]; - @internalProperty() private _stateItems?: HassEntity[]; + @state() private _stateItems?: HassEntity[]; - @internalProperty() private _activeEntry = ""; + @state() private _activeEntry = ""; - @internalProperty() private _canEditCore = false; + @state() private _canEditCore = false; @query("ha-locations-editor") private _map?: HaLocationsEditor; @@ -76,22 +76,25 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { private _getZones = memoizeOne( (storageItems: Zone[], stateItems: HassEntity[]): MarkerLocation[] => { - const stateLocations: MarkerLocation[] = stateItems.map((state) => ({ - id: state.entity_id, - icon: state.attributes.icon, - name: state.attributes.friendly_name || state.entity_id, - latitude: state.attributes.latitude, - longitude: state.attributes.longitude, - radius: state.attributes.radius, - radius_color: - state.entity_id === "zone.home" - ? homeRadiusColor - : state.attributes.passive - ? passiveRadiusColor - : defaultRadiusColor, - location_editable: state.entity_id === "zone.home" && this._canEditCore, - radius_editable: false, - })); + const stateLocations: MarkerLocation[] = stateItems.map( + (entityState) => ({ + id: entityState.entity_id, + icon: entityState.attributes.icon, + name: entityState.attributes.friendly_name || entityState.entity_id, + latitude: entityState.attributes.latitude, + longitude: entityState.attributes.longitude, + radius: entityState.attributes.radius, + radius_color: + entityState.entity_id === "zone.home" + ? homeRadiusColor + : entityState.attributes.passive + ? passiveRadiusColor + : defaultRadiusColor, + location_editable: + entityState.entity_id === "zone.home" && this._canEditCore, + radius_editable: false, + }) + ); const storageLocations: MarkerLocation[] = storageItems.map((zone) => ({ ...zone, radius_color: zone.passive ? passiveRadiusColor : defaultRadiusColor, @@ -161,22 +164,26 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { ` )} ${this._stateItems.map( - (state) => html` + (stateObject) => html` - + - ${state.attributes.friendly_name || state.entity_id} + ${stateObject.attributes.friendly_name || + stateObject.entity_id}
- ${state.entity_id === "zone.home" + ${stateObject.entity_id === "zone.home" ? this.hass.localize( `ui.panel.config.zone.${ this.narrow @@ -462,7 +469,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` hass-loading-screen { --app-header-background-color: var(--sidebar-background-color); diff --git a/src/panels/custom/ha-panel-custom.ts b/src/panels/custom/ha-panel-custom.ts index e000a4c7dd..0956624db4 100644 --- a/src/panels/custom/ha-panel-custom.ts +++ b/src/panels/custom/ha-panel-custom.ts @@ -1,4 +1,4 @@ -import { property, PropertyValues, UpdatingElement } from "lit-element"; +import { property, PropertyValues, ReactiveElement } from "lit-element"; import { navigate } from "../../common/navigate"; import { CustomPanelInfo } from "../../data/panel_custom"; import { HomeAssistant, Route } from "../../types"; @@ -15,7 +15,7 @@ declare global { } } -export class HaPanelCustom extends UpdatingElement { +export class HaPanelCustom extends ReactiveElement { @property({ attribute: false }) public hass!: HomeAssistant; @property() public narrow!: boolean; @@ -26,6 +26,10 @@ export class HaPanelCustom extends UpdatingElement { private _setProperties?: (props: Record) => void | undefined; + protected createRenderRoot() { + return this; + } + // Since navigate fires events on `window`, we need to expose this as a function // to allow custom panels to forward their location changes to the main window // instead of their iframe window. diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts index 58a8fc27a7..3bdc41acbc 100644 --- a/src/panels/developer-tools/event/event-subscribe-card.ts +++ b/src/panels/developer-tools/event/event-subscribe-card.ts @@ -3,10 +3,10 @@ import "@polymer/paper-input/paper-input"; import { HassEvent } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -20,11 +20,11 @@ import { HomeAssistant } from "../../../types"; class EventSubscribeCard extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _eventType = ""; + @state() private _eventType = ""; - @internalProperty() private _subscribed?: () => void; + @state() private _subscribed?: () => void; - @internalProperty() private _events: Array<{ + @state() private _events: Array<{ id: number; event: HassEvent; }> = []; @@ -118,7 +118,7 @@ class EventSubscribeCard extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` form { display: block; diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts index 3ad8fe9887..5ff7069cd6 100644 --- a/src/panels/developer-tools/ha-panel-developer-tools.ts +++ b/src/panels/developer-tools/ha-panel-developer-tools.ts @@ -3,7 +3,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/paper-tabs/paper-tab"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -94,7 +94,7 @@ class PanelDeveloperTools extends LitElement { return this.route.path.substr(1); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts index a7b3451a14..882dfab821 100644 --- a/src/panels/developer-tools/service/developer-tools-service.ts +++ b/src/panels/developer-tools/service/developer-tools-service.ts @@ -3,9 +3,9 @@ import { ERR_CONNECTION_LOST } from "home-assistant-js-websocket"; import { safeLoad } from "js-yaml"; import { css, - CSSResultArray, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, query, @@ -42,7 +42,7 @@ class HaPanelDevService extends LitElement { @property({ type: Boolean }) public narrow!: boolean; - @internalProperty() private _uiAvailable = true; + @state() private _uiAvailable = true; @LocalStorage("panel-dev-service-state-service-data", true) private _serviceData?: ServiceAction = { service: "", target: {}, data: {} }; @@ -381,7 +381,7 @@ class HaPanelDevService extends LitElement { this._yamlEditor?.setValue(this._serviceData); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts index 9ec9c1c4ad..5b344be5d8 100644 --- a/src/panels/developer-tools/template/developer-tools-template.ts +++ b/src/panels/developer-tools/template/developer-tools-template.ts @@ -2,10 +2,10 @@ import "@material/mwc-button/mwc-button"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, } from "lit-element"; @@ -48,13 +48,13 @@ class HaPanelDevTemplate extends LitElement { @property() public narrow!: boolean; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _rendering = false; + @state() private _rendering = false; - @internalProperty() private _templateResult?: RenderTemplateResult; + @state() private _templateResult?: RenderTemplateResult; - @internalProperty() private _unsubRenderTemplate?: Promise; + @state() private _unsubRenderTemplate?: Promise; private _template = ""; @@ -240,7 +240,7 @@ class HaPanelDevTemplate extends LitElement { `; } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index ba0fc03517..59b89758c4 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -1,12 +1,6 @@ import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; -import { - css, - internalProperty, - LitElement, - property, - PropertyValues, -} from "lit-element"; +import { css, state, LitElement, property, PropertyValues } from "lit-element"; import { html } from "lit-html"; import { computeRTL } from "../../common/util/compute_rtl"; import "../../components/entity/ha-entity-picker"; @@ -37,7 +31,7 @@ class HaPanelHistory extends LitElement { @property({ reflect: true, type: Boolean }) rtl = false; - @internalProperty() private _ranges?: DateRangePickerRanges; + @state() private _ranges?: DateRangePickerRanges; public constructor() { super(); diff --git a/src/panels/logbook/ha-logbook.ts b/src/panels/logbook/ha-logbook.ts index cb77b90a92..f87af09c26 100644 --- a/src/panels/logbook/ha-logbook.ts +++ b/src/panels/logbook/ha-logbook.ts @@ -1,6 +1,6 @@ import { css, - CSSResultArray, + CSSResultGroup, customElement, eventOptions, html, @@ -254,7 +254,7 @@ class HaLogbook extends LitElement { }); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, haStyleScrollbar, diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts index d8278a5877..b08497a2a9 100644 --- a/src/panels/logbook/ha-panel-logbook.ts +++ b/src/panels/logbook/ha-panel-logbook.ts @@ -5,7 +5,7 @@ import { css, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -49,13 +49,13 @@ export class HaPanelLogbook extends LitElement { @property({ reflect: true, type: Boolean }) rtl = false; - @internalProperty() private _ranges?: DateRangePickerRanges; + @state() private _ranges?: DateRangePickerRanges; private _fetchUserDone?: Promise; - @internalProperty() private _userIdToName = {}; + @state() private _userIdToName = {}; - @internalProperty() private _traceContexts: TraceContexts = {}; + @state() private _traceContexts: TraceContexts = {}; public constructor() { super(); diff --git a/src/panels/lovelace/badges/hui-entity-filter-badge.ts b/src/panels/lovelace/badges/hui-entity-filter-badge.ts index 71ec50e8fc..b89135e7e1 100644 --- a/src/panels/lovelace/badges/hui-entity-filter-badge.ts +++ b/src/panels/lovelace/badges/hui-entity-filter-badge.ts @@ -1,9 +1,4 @@ -import { - internalProperty, - property, - PropertyValues, - UpdatingElement, -} from "lit-element"; +import { state, property, PropertyValues, ReactiveElement } from "lit-element"; import { HomeAssistant } from "../../../types"; import { evaluateFilter } from "../common/evaluate-filter"; import { processConfigEntities } from "../common/process-config-entities"; @@ -12,10 +7,10 @@ import { EntityFilterEntityConfig } from "../entity-rows/types"; import { LovelaceBadge } from "../types"; import { EntityFilterBadgeConfig } from "./types"; -class EntityFilterBadge extends UpdatingElement implements LovelaceBadge { +class EntityFilterBadge extends ReactiveElement implements LovelaceBadge { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _config?: EntityFilterBadgeConfig; + @state() private _config?: EntityFilterBadgeConfig; private _elements?: LovelaceBadge[]; @@ -50,6 +45,10 @@ class EntityFilterBadge extends UpdatingElement implements LovelaceBadge { this._config = config; } + protected createRenderRoot() { + return this; + } + protected shouldUpdate(changedProperties: PropertyValues): boolean { if ( changedProperties.has("_config") || diff --git a/src/panels/lovelace/badges/hui-error-badge.ts b/src/panels/lovelace/badges/hui-error-badge.ts index abb18344ab..e80abd8379 100644 --- a/src/panels/lovelace/badges/hui-error-badge.ts +++ b/src/panels/lovelace/badges/hui-error-badge.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -27,7 +27,7 @@ export const createErrorBadgeConfig = (error) => ({ export class HuiErrorBadge extends LitElement implements LovelaceBadge { public hass?: HomeAssistant; - @internalProperty() private _config?: ErrorBadgeConfig; + @state() private _config?: ErrorBadgeConfig; public setConfig(config: ErrorBadgeConfig): void { this._config = config; @@ -47,7 +47,7 @@ export class HuiErrorBadge extends LitElement implements LovelaceBadge { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { --ha-label-badge-color: var(--label-badge-red, #fce588); diff --git a/src/panels/lovelace/badges/hui-state-label-badge.ts b/src/panels/lovelace/badges/hui-state-label-badge.ts index c95258ba0c..d94354c3a2 100644 --- a/src/panels/lovelace/badges/hui-state-label-badge.ts +++ b/src/panels/lovelace/badges/hui-state-label-badge.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -59,7 +59,7 @@ export class HuiStateLabelBadge extends LitElement implements LovelaceBadge { handleAction(this, this.hass!, this._config!, ev.detail.action!); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-state-label-badge:focus { outline: none; diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index d78203fe15..8d20bf51a2 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -2,10 +2,10 @@ import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -70,7 +70,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: AlarmPanelCardConfig; + @state() private _config?: AlarmPanelCardConfig; @query("#alarmCode") private _input?: PaperInputElement; @@ -173,13 +173,13 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { ? this._config.states! : ["disarm"] ).map( - (state) => html` + (stateAction) => html` - ${this._actionDisplay(state)} + ${this._actionDisplay(stateAction)} ` )} @@ -226,22 +226,22 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { `; } - private _stateIconLabel(state: string): string { - const stateLabel = state.split("_").pop(); + private _stateIconLabel(entityState: string): string { + const stateLabel = entityState.split("_").pop(); return stateLabel === "disarmed" || stateLabel === "triggered" || !stateLabel ? "" - : this._stateDisplay(state); + : this._stateDisplay(entityState); } - private _actionDisplay(state: string): string { - return this.hass!.localize(`ui.card.alarm_control_panel.${state}`); + private _actionDisplay(entityState: string): string { + return this.hass!.localize(`ui.card.alarm_control_panel.${entityState}`); } - private _stateDisplay(state: string): string { + private _stateDisplay(entityState: string): string { return this.hass!.localize( - `component.alarm_control_panel.state._.${state}` + `component.alarm_control_panel.state._.${entityState}` ); } @@ -269,7 +269,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { padding-bottom: 16px; diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts index f8ed4453a7..4f6af27840 100644 --- a/src/panels/lovelace/cards/hui-button-card.ts +++ b/src/panels/lovelace/cards/hui-button-card.ts @@ -4,11 +4,11 @@ import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, eventOptions, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -71,11 +71,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: ButtonCardConfig; + @state() private _config?: ButtonCardConfig; @queryAsync("mwc-ripple") private _ripple!: Promise; - @internalProperty() private _shouldRenderRipple = false; + @state() private _shouldRenderRipple = false; public getCardSize(): number { return ( @@ -247,7 +247,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard { this._rippleHandlers.endFocus(); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { cursor: pointer; diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts index ae3280920f..48e31d5f8c 100644 --- a/src/panels/lovelace/cards/hui-calendar-card.ts +++ b/src/panels/lovelace/cards/hui-calendar-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -62,13 +62,13 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public _events: CalendarEvent[] = []; - @internalProperty() private _config?: CalendarCardConfig; + @state() private _config?: CalendarCardConfig; - @internalProperty() private _calendars: Calendar[] = []; + @state() private _calendars: Calendar[] = []; - @internalProperty() private _narrow = false; + @state() private _narrow = false; - @internalProperty() private _veryNarrow = false; + @state() private _veryNarrow = false; @query("ha-full-calendar", true) private _calendar?: HAFullCalendar; @@ -204,7 +204,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard { this._resizeObserver.observe(card); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { position: relative; diff --git a/src/panels/lovelace/cards/hui-empty-state-card.ts b/src/panels/lovelace/cards/hui-empty-state-card.ts index dce740668b..b56c23201b 100644 --- a/src/panels/lovelace/cards/hui-empty-state-card.ts +++ b/src/panels/lovelace/cards/hui-empty-state-card.ts @@ -1,7 +1,7 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -54,7 +54,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .content { margin-top: -1em; diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index 09cf5f7574..92d05914d6 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, PropertyValues, TemplateResult, @@ -55,7 +55,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { return { type: "entities", entities: foundEntities }; } - @internalProperty() private _config?: EntitiesCardConfig; + @state() private _config?: EntitiesCardConfig; private _hass?: HomeAssistant; @@ -223,7 +223,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { height: 100%; diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts index 7c8c1b9a36..7bb0479984 100644 --- a/src/panels/lovelace/cards/hui-entity-card.ts +++ b/src/panels/lovelace/cards/hui-entity-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -62,7 +62,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityCardConfig; + @state() private _config?: EntityCardConfig; private _footerElement?: HuiErrorCard | LovelaceHeaderFooter; @@ -185,7 +185,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard { fireEvent(this, "hass-more-info", { entityId: this._config!.entity }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { height: 100%; diff --git a/src/panels/lovelace/cards/hui-entity-filter-card.ts b/src/panels/lovelace/cards/hui-entity-filter-card.ts index f6bcdb4307..517b08a13b 100644 --- a/src/panels/lovelace/cards/hui-entity-filter-card.ts +++ b/src/panels/lovelace/cards/hui-entity-filter-card.ts @@ -1,9 +1,4 @@ -import { - internalProperty, - property, - PropertyValues, - UpdatingElement, -} from "lit-element"; +import { state, property, PropertyValues, ReactiveElement } from "lit-element"; import { LovelaceCardConfig } from "../../../data/lovelace"; import { HomeAssistant } from "../../../types"; import { computeCardSize } from "../common/compute-card-size"; @@ -15,7 +10,7 @@ import { EntityFilterEntityConfig } from "../entity-rows/types"; import { LovelaceCard } from "../types"; import { EntityFilterCardConfig } from "./types"; -class EntityFilterCard extends UpdatingElement implements LovelaceCard { +class EntityFilterCard extends ReactiveElement implements LovelaceCard { public static getStubConfig( hass: HomeAssistant, entities: string[], @@ -46,7 +41,7 @@ class EntityFilterCard extends UpdatingElement implements LovelaceCard { @property() public editMode = false; - @internalProperty() private _config?: EntityFilterCardConfig; + @state() private _config?: EntityFilterCardConfig; private _element?: LovelaceCard; @@ -92,6 +87,10 @@ class EntityFilterCard extends UpdatingElement implements LovelaceCard { this._element = this._createCardElement(this._baseCardConfig); } + protected createRenderRoot() { + return this; + } + protected shouldUpdate(changedProps: PropertyValues): boolean { if (this._element) { this._element.hass = this.hass; diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts index 1e9b0fc779..14f1ceabae 100644 --- a/src/panels/lovelace/cards/hui-error-card.ts +++ b/src/panels/lovelace/cards/hui-error-card.ts @@ -1,10 +1,10 @@ import { safeDump } from "js-yaml"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -16,7 +16,7 @@ import { ErrorCardConfig } from "./types"; export class HuiErrorCard extends LitElement implements LovelaceCard { public hass?: HomeAssistant; - @internalProperty() private _config?: ErrorCardConfig; + @state() private _config?: ErrorCardConfig; public getCardSize(): number { return 4; @@ -46,7 +46,7 @@ export class HuiErrorCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index 770706a861..a6bcf33024 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -1,10 +1,10 @@ import { HassEntity } from "home-assistant-js-websocket/dist/types"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -63,7 +63,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: GaugeCardConfig; + @state() private _config?: GaugeCardConfig; public getCardSize(): number { return 4; @@ -95,7 +95,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { `; } - const state = Number(stateObj.state); + const entityState = Number(stateObj.state); if (stateObj.state === UNAVAILABLE) { return html` @@ -109,7 +109,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { `; } - if (isNaN(state)) { + if (isNaN(entityState)) { return html` ${this.hass.localize( @@ -135,7 +135,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { .unit_of_measurement || ""} style=${styleMap({ - "--gauge-color": this._computeSeverity(state), + "--gauge-color": this._computeSeverity(entityState), })} >
@@ -206,7 +206,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { fireEvent(this, "hass-more-info", { entityId: this._config!.entity }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { cursor: pointer; diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index e59d0dd4ac..88ed26415d 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -64,7 +64,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: GlanceCardConfig; + @state() private _config?: GlanceCardConfig; private _configEntities?: GlanceConfigEntity[]; @@ -184,7 +184,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { height: 100%; diff --git a/src/panels/lovelace/cards/hui-grid-card.ts b/src/panels/lovelace/cards/hui-grid-card.ts index b7880b2f6d..b2033890fd 100644 --- a/src/panels/lovelace/cards/hui-grid-card.ts +++ b/src/panels/lovelace/cards/hui-grid-card.ts @@ -1,4 +1,4 @@ -import { css, CSSResult } from "lit-element"; +import { css, CSSResultGroup } from "lit-element"; import { computeCardSize } from "../common/compute-card-size"; import { HuiStackCard } from "./hui-stack-card"; import { GridCardConfig } from "./types"; @@ -64,7 +64,7 @@ class HuiGridCard extends HuiStackCard { this.toggleAttribute("square", this.square); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ super.sharedStyles, css` diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts index d034811e07..69b230718f 100644 --- a/src/panels/lovelace/cards/hui-history-graph-card.ts +++ b/src/panels/lovelace/cards/hui-history-graph-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -36,9 +36,9 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _stateHistory?: HistoryResult; + @state() private _stateHistory?: HistoryResult; - @internalProperty() private _config?: HistoryGraphCardConfig; + @state() private _config?: HistoryGraphCardConfig; private _configEntities?: EntityConfig[]; @@ -169,7 +169,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { height: 100%; diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts index efe402d52d..6f3b18bb82 100644 --- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts +++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts @@ -1,4 +1,4 @@ -import { css, CSSResult } from "lit-element"; +import { css, CSSResultGroup } from "lit-element"; import { computeCardSize } from "../common/compute-card-size"; import { HuiStackCard } from "./hui-stack-card"; @@ -19,7 +19,7 @@ class HuiHorizontalStackCard extends HuiStackCard { return Math.max(...results); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ super.sharedStyles, css` diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts index db983222df..c6c5651f01 100644 --- a/src/panels/lovelace/cards/hui-humidifier-card.ts +++ b/src/panels/lovelace/cards/hui-humidifier-card.ts @@ -2,10 +2,10 @@ import "@thomasloven/round-slider"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -54,9 +54,9 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: HumidifierCardConfig; + @state() private _config?: HumidifierCardConfig; - @internalProperty() private _setHum?: number; + @state() private _setHum?: number; public getCardSize(): number { return 6; @@ -268,7 +268,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts index 30a226848d..fe97a15281 100644 --- a/src/panels/lovelace/cards/hui-iframe-card.ts +++ b/src/panels/lovelace/cards/hui-iframe-card.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -84,7 +84,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host([ispanel]) ha-card { width: 100%; diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index bd493d84fc..9f75785bcc 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -2,10 +2,10 @@ import { mdiDotsVertical } from "@mdi/js"; import "@thomasloven/round-slider"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -60,7 +60,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: LightCardConfig; + @state() private _config?: LightCardConfig; private _brightnessTimout?: number; @@ -254,7 +254,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { height: 100%; diff --git a/src/panels/lovelace/cards/hui-logbook-card.ts b/src/panels/lovelace/cards/hui-logbook-card.ts index 29e7adbee8..077d30bd09 100644 --- a/src/panels/lovelace/cards/hui-logbook-card.ts +++ b/src/panels/lovelace/cards/hui-logbook-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -55,13 +55,13 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: LogbookCardConfig; + @state() private _config?: LogbookCardConfig; - @internalProperty() private _logbookEntries?: LogbookEntry[]; + @state() private _logbookEntries?: LogbookEntry[]; - @internalProperty() private _persons = {}; + @state() private _persons = {}; - @internalProperty() private _configEntities?: EntityConfig[]; + @state() private _configEntities?: EntityConfig[]; private _lastLogbookDate?: Date; @@ -266,7 +266,7 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard { }); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ css` ha-card { diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index 9683445600..8f94a5c32a 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -11,7 +11,7 @@ import { } from "leaflet"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -653,7 +653,7 @@ class HuiMapCard extends LitElement implements LovelaceCard { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { overflow: hidden; diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts index 8aaedc76a9..36b81354ca 100644 --- a/src/panels/lovelace/cards/hui-markdown-card.ts +++ b/src/panels/lovelace/cards/hui-markdown-card.ts @@ -1,10 +1,10 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -39,11 +39,11 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: MarkdownCardConfig; + @state() private _config?: MarkdownCardConfig; - @internalProperty() private _templateResult?: RenderTemplateResult; + @state() private _templateResult?: RenderTemplateResult; - @internalProperty() private _unsubRenderTemplate?: Promise; + @state() private _unsubRenderTemplate?: Promise; public getCardSize(): number { return this._config === undefined @@ -166,7 +166,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { height: 100%; diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index c1fd6788d9..ad34cdf56f 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -4,10 +4,10 @@ import "@polymer/paper-progress/paper-progress"; import type { PaperProgressElement } from "@polymer/paper-progress/paper-progress"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -75,21 +75,21 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _config?: MediaControlCardConfig; + @state() private _config?: MediaControlCardConfig; - @internalProperty() private _foregroundColor?: string; + @state() private _foregroundColor?: string; - @internalProperty() private _backgroundColor?: string; + @state() private _backgroundColor?: string; - @internalProperty() private _narrow = false; + @state() private _narrow = false; - @internalProperty() private _veryNarrow = false; + @state() private _veryNarrow = false; - @internalProperty() private _cardHeight = 0; + @state() private _cardHeight = 0; @query("paper-progress") private _progressBar?: PaperProgressElement; - @internalProperty() private _marqueeActive = false; + @state() private _marqueeActive = false; private _progressInterval?: number; @@ -172,17 +172,20 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { width: `${this._cardHeight}px`, }; - const state = stateObj.state; + const entityState = stateObj.state; - const isOffState = state === "off"; + const isOffState = entityState === "off"; const isUnavailable = - UNAVAILABLE_STATES.includes(state) || - (state === "off" && !supportsFeature(stateObj, SUPPORT_TURN_ON)); + UNAVAILABLE_STATES.includes(entityState) || + (entityState === "off" && !supportsFeature(stateObj, SUPPORT_TURN_ON)); const hasNoImage = !this._image; const controls = computeMediaControls(stateObj); const showControls = controls && - (!this._veryNarrow || isOffState || state === "idle" || state === "on"); + (!this._veryNarrow || + isOffState || + entityState === "idle" || + entityState === "on"); const mediaDescription = computeMediaDescription(stateObj); @@ -552,7 +555,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { overflow: hidden; diff --git a/src/panels/lovelace/cards/hui-picture-card.ts b/src/panels/lovelace/cards/hui-picture-card.ts index 6da862a137..7c7bab7aa7 100644 --- a/src/panels/lovelace/cards/hui-picture-card.ts +++ b/src/panels/lovelace/cards/hui-picture-card.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -107,7 +107,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { overflow: hidden; diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts index 0905c84f0f..3b3cb165df 100644 --- a/src/panels/lovelace/cards/hui-picture-elements-card.ts +++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -22,7 +22,7 @@ import { PictureElementsCardConfig } from "./types"; class HuiPictureElementsCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _elements?: LovelaceElement[]; + @state() private _elements?: LovelaceElement[]; public static getStubConfig( hass: HomeAssistant, @@ -54,7 +54,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { }; } - @internalProperty() private _config?: PictureElementsCardConfig; + @state() private _config?: PictureElementsCardConfig; public getCardSize(): number { return 4; @@ -138,7 +138,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` #root { position: relative; diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts index 0329de6ba8..92a87b8b6f 100644 --- a/src/panels/lovelace/cards/hui-picture-entity-card.ts +++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -59,7 +59,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: PictureEntityCardConfig; + @state() private _config?: PictureEntityCardConfig; public getCardSize(): number { return 3; @@ -122,7 +122,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { } const name = this._config.name || computeStateName(stateObj); - const state = computeStateDisplay( + const entityState = computeStateDisplay( this.hass!.localize, stateObj, this.hass.locale @@ -133,13 +133,13 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { footer = html`
${name}
-
${state}
+
${entityState}
`; } else if (this._config.show_name) { footer = html`
${name}
`; } else if (this._config.show_state) { - footer = html`
${state}
`; + footer = html`
${entityState}
`; } return html` @@ -174,7 +174,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { min-height: 75px; diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 20e06a2108..d07fc5eebd 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -66,7 +66,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: PictureGlanceCardConfig; + @state() private _config?: PictureGlanceCardConfig; private _entitiesDialog?: PictureGlanceEntityConfig[]; @@ -287,7 +287,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { handleAction(this, this.hass!, config, ev.detail.action!); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { position: relative; diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts index 9019fcd8b7..7c4bd05bdb 100644 --- a/src/panels/lovelace/cards/hui-plant-status-card.ts +++ b/src/panels/lovelace/cards/hui-plant-status-card.ts @@ -1,10 +1,10 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -58,7 +58,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: PlantStatusCardConfig; + @state() private _config?: PlantStatusCardConfig; public getCardSize(): number { return 3; @@ -159,7 +159,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { height: 100%; diff --git a/src/panels/lovelace/cards/hui-safe-mode-card.ts b/src/panels/lovelace/cards/hui-safe-mode-card.ts index ccf58d78ae..fc0b083a08 100644 --- a/src/panels/lovelace/cards/hui-safe-mode-card.ts +++ b/src/panels/lovelace/cards/hui-safe-mode-card.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -42,7 +42,7 @@ export class HuiSafeModeCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { --ha-card-header-color: var(--primary-color); diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts index ea0af2a6d1..9edd46344b 100644 --- a/src/panels/lovelace/cards/hui-shopping-list-card.ts +++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts @@ -4,10 +4,10 @@ import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -50,15 +50,15 @@ class HuiShoppingListCard @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: ShoppingListCardConfig; + @state() private _config?: ShoppingListCardConfig; - @internalProperty() private _uncheckedItems?: ShoppingListItem[]; + @state() private _uncheckedItems?: ShoppingListItem[]; - @internalProperty() private _checkedItems?: ShoppingListItem[]; + @state() private _checkedItems?: ShoppingListItem[]; - @internalProperty() private _reordering = false; + @state() private _reordering = false; - @internalProperty() private _renderEmptySortable = false; + @state() private _renderEmptySortable = false; private _sortable?; @@ -348,7 +348,7 @@ class HuiShoppingListCard }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-card { padding: 16px; diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts index 2262eea996..47bbc7933b 100644 --- a/src/panels/lovelace/cards/hui-stack-card.ts +++ b/src/panels/lovelace/cards/hui-stack-card.ts @@ -1,8 +1,8 @@ import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -32,7 +32,7 @@ export abstract class HuiStackCard @property() protected _cards?: LovelaceCard[]; - @internalProperty() protected _config?: T; + @state() protected _config?: T; public getCardSize(): number | Promise { return 1; @@ -81,7 +81,7 @@ export abstract class HuiStackCard `; } - static get sharedStyles(): CSSResult { + static get sharedStyles(): CSSResultGroup { return css` .card-header { color: var(--ha-card-header-color, --primary-text-color); diff --git a/src/panels/lovelace/cards/hui-starting-card.ts b/src/panels/lovelace/cards/hui-starting-card.ts index d7f90b2b2f..ad08ee6747 100644 --- a/src/panels/lovelace/cards/hui-starting-card.ts +++ b/src/panels/lovelace/cards/hui-starting-card.ts @@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button"; import { STATE_NOT_RUNNING } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -53,7 +53,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index 50012c5573..30abc46264 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -3,10 +3,10 @@ import "@thomasloven/round-slider"; import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -74,9 +74,9 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: ThermostatCardConfig; + @state() private _config?: ThermostatCardConfig; - @internalProperty() private _setTemp?: number | number[]; + @state() private _setTemp?: number | number[]; @query("ha-card") private _card?: HaCard; @@ -421,7 +421,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts index dfb01c4a84..dbd9ea53ac 100644 --- a/src/panels/lovelace/cards/hui-vertical-stack-card.ts +++ b/src/panels/lovelace/cards/hui-vertical-stack-card.ts @@ -1,4 +1,4 @@ -import { css, CSSResult } from "lit-element"; +import { css, CSSResultGroup } from "lit-element"; import { computeCardSize } from "../common/compute-card-size"; import { HuiStackCard } from "./hui-stack-card"; @@ -19,7 +19,7 @@ class HuiVerticalStackCard extends HuiStackCard { return results.reduce((partial_sum, a) => partial_sum + a, 0); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ super.sharedStyles, css` diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index af35cb18e3..5a1d7865f9 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -74,7 +74,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: WeatherForecastCardConfig; + @state() private _config?: WeatherForecastCardConfig; @property({ type: Boolean, reflect: true, attribute: "veryverynarrow" }) private _veryVeryNarrow = false; @@ -390,7 +390,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { this._veryVeryNarrow = card.offsetWidth < 245; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ weatherSVGStyles, css` diff --git a/src/panels/lovelace/common/directives/action-handler-directive.ts b/src/panels/lovelace/common/directives/action-handler-directive.ts index 3b0ea378c8..234471d17e 100644 --- a/src/panels/lovelace/common/directives/action-handler-directive.ts +++ b/src/panels/lovelace/common/directives/action-handler-directive.ts @@ -1,6 +1,14 @@ +/* eslint-disable max-classes-per-file */ import "@material/mwc-ripple"; import type { Ripple } from "@material/mwc-ripple"; -import { directive, PropertyPart } from "lit-html"; +import { noChange } from "lit-html"; +import { + AttributePart, + directive, + Directive, + DirectiveParameters, + // eslint-disable-next-line import/extensions +} from "lit-html/directive.js"; import { fireEvent } from "../../../../common/dom/fire_event"; import { deepEqual } from "../../../../common/util/deep-equal"; import { @@ -15,7 +23,7 @@ const isTouch = interface ActionHandler extends HTMLElement { holdTime: number; - bind(element: Element, options): void; + bind(element: Element, options?: ActionHandlerOptions): void; } interface ActionHandlerElement extends HTMLElement { actionHandler?: { @@ -90,7 +98,10 @@ class ActionHandler extends HTMLElement implements ActionHandler { }); } - public bind(element: ActionHandlerElement, options: ActionHandlerOptions) { + public bind( + element: ActionHandlerElement, + options: ActionHandlerOptions = {} + ) { if ( element.actionHandler && deepEqual(options, element.actionHandler.options) @@ -240,7 +251,7 @@ const getActionHandler = (): ActionHandler => { export const actionHandlerBind = ( element: ActionHandlerElement, - options: ActionHandlerOptions + options?: ActionHandlerOptions ) => { const actionhandler: ActionHandler = getActionHandler(); if (!actionhandler) { @@ -250,7 +261,12 @@ export const actionHandlerBind = ( }; export const actionHandler = directive( - (options: ActionHandlerOptions = {}) => (part: PropertyPart) => { - actionHandlerBind(part.committer.element as ActionHandlerElement, options); + class extends Directive { + update(part: AttributePart, [options]: DirectiveParameters) { + actionHandlerBind(part.element as ActionHandlerElement, options); + return noChange; + } + + render(_options?: ActionHandlerOptions) {} } ); diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts index d523877435..60e5af1cda 100644 --- a/src/panels/lovelace/components/hui-action-editor.ts +++ b/src/panels/lovelace/components/hui-action-editor.ts @@ -6,7 +6,7 @@ import "@polymer/paper-listbox/paper-listbox"; import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -209,7 +209,7 @@ export class HuiActionEditor extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .dropdown { display: flex; diff --git a/src/panels/lovelace/components/hui-buttons-base.ts b/src/panels/lovelace/components/hui-buttons-base.ts index 919b5058e8..dce093d045 100644 --- a/src/panels/lovelace/components/hui-buttons-base.ts +++ b/src/panels/lovelace/components/hui-buttons-base.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -82,7 +82,7 @@ export class HuiButtonsBase extends LitElement { handleAction(this, this._hass!, config, ev.detail.action!); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index c627c3b838..656640391b 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -5,7 +5,7 @@ import "@material/mwc-list/mwc-list-item"; import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -113,7 +113,7 @@ export class HuiCardOptions extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host(:hover) { outline: 2px solid var(--primary-color); diff --git a/src/panels/lovelace/components/hui-conditional-base.ts b/src/panels/lovelace/components/hui-conditional-base.ts index 46446558df..5b9cb1cd71 100644 --- a/src/panels/lovelace/components/hui-conditional-base.ts +++ b/src/panels/lovelace/components/hui-conditional-base.ts @@ -2,7 +2,7 @@ import { customElement, property, PropertyValues, - UpdatingElement, + ReactiveElement, } from "lit-element"; import { HomeAssistant } from "../../../types"; import { ConditionalCardConfig } from "../cards/types"; @@ -14,7 +14,7 @@ import { ConditionalRowConfig, LovelaceRow } from "../entity-rows/types"; import { LovelaceCard } from "../types"; @customElement("hui-conditional-base") -export class HuiConditionalBase extends UpdatingElement { +export class HuiConditionalBase extends ReactiveElement { @property({ attribute: false }) public hass?: HomeAssistant; @property() public editMode?: boolean; @@ -23,6 +23,10 @@ export class HuiConditionalBase extends UpdatingElement { protected _element?: LovelaceCard | LovelaceRow; + protected createRenderRoot() { + return this; + } + protected validateConfig( config: ConditionalCardConfig | ConditionalRowConfig ): void { diff --git a/src/panels/lovelace/components/hui-entities-toggle.ts b/src/panels/lovelace/components/hui-entities-toggle.ts index 6af1483d66..db28bc76f6 100644 --- a/src/panels/lovelace/components/hui-entities-toggle.ts +++ b/src/panels/lovelace/components/hui-entities-toggle.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -22,7 +22,7 @@ class HuiEntitiesToggle extends LitElement { @property({ attribute: false }) protected hass?: HomeAssistant; - @internalProperty() private _toggleEntities?: string[]; + @state() private _toggleEntities?: string[]; public updated(changedProperties: PropertyValues): void { super.updated(changedProperties); @@ -54,7 +54,7 @@ class HuiEntitiesToggle extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { width: 38px; diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts index 25df30a13e..79e844f9e0 100644 --- a/src/panels/lovelace/components/hui-entity-editor.ts +++ b/src/panels/lovelace/components/hui-entity-editor.ts @@ -1,10 +1,10 @@ import { mdiDrag } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -32,9 +32,9 @@ export class HuiEntityEditor extends LitElement { @property() protected label?: string; - @internalProperty() private _attached = false; + @state() private _attached = false; - @internalProperty() private _renderEmptySortable = false; + @state() private _renderEmptySortable = false; private _sortable?: Sortable; @@ -181,7 +181,7 @@ export class HuiEntityEditor extends LitElement { fireEvent(this, "entities-changed", { entities: newConfigEntities }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ sortableStyles, css` diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts index 2449ddf277..c752061414 100644 --- a/src/panels/lovelace/components/hui-generic-entity-row.ts +++ b/src/panels/lovelace/components/hui-generic-entity-row.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, html, LitElement, property, @@ -156,7 +156,7 @@ class HuiGenericEntityRow extends LitElement { handleAction(this, this.hass!, this.config!, ev.detail.action!); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/panels/lovelace/components/hui-graph-base.ts b/src/panels/lovelace/components/hui-graph-base.ts index 5aff518758..dfac5001b3 100644 --- a/src/panels/lovelace/components/hui-graph-base.ts +++ b/src/panels/lovelace/components/hui-graph-base.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -17,7 +17,7 @@ import { getPath } from "../common/graph/get-path"; export class HuiGraphBase extends LitElement { @property() public coordinates?: any; - @internalProperty() private _path?: string; + @state() private _path?: string; protected render(): TemplateResult { return html` @@ -59,7 +59,7 @@ export class HuiGraphBase extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/panels/lovelace/components/hui-image.ts b/src/panels/lovelace/components/hui-image.ts index 9cfe450762..c9a6fc66f3 100644 --- a/src/panels/lovelace/components/hui-image.ts +++ b/src/panels/lovelace/components/hui-image.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -50,9 +50,9 @@ export class HuiImage extends LitElement { @property() public darkModeFilter?: string; - @internalProperty() private _loadError?: boolean; + @state() private _loadError?: boolean; - @internalProperty() private _cameraImageSrc?: string; + @state() private _cameraImageSrc?: string; @query("img") private _image!: HTMLImageElement; @@ -78,7 +78,7 @@ export class HuiImage extends LitElement { } const ratio = this.aspectRatio ? parseAspectRatio(this.aspectRatio) : null; const stateObj = this.entity ? this.hass.states[this.entity] : undefined; - const state = stateObj ? stateObj.state : UNAVAILABLE; + const entityState = stateObj ? stateObj.state : UNAVAILABLE; // Figure out image source to use let imageSrc: string | undefined; @@ -93,7 +93,7 @@ export class HuiImage extends LitElement { imageSrc = this._cameraImageSrc; } } else if (this.stateImage) { - const stateImage = this.stateImage[state]; + const stateImage = this.stateImage[entityState]; if (stateImage) { imageSrc = stateImage; @@ -118,12 +118,12 @@ export class HuiImage extends LitElement { filter += this.darkModeFilter; } - if (this.stateFilter && this.stateFilter[state]) { - filter += this.stateFilter[state]; + if (this.stateFilter && this.stateFilter[entityState]) { + filter += this.stateFilter[entityState]; } if (!filter && this.entity) { - const isOff = !stateObj || STATES_OFF.includes(state); + const isOff = !stateObj || STATES_OFF.includes(entityState); filter = isOff && imageFallback ? DEFAULT_FILTER : ""; } @@ -237,7 +237,7 @@ export class HuiImage extends LitElement { ); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` img { display: block; diff --git a/src/panels/lovelace/components/hui-input-list-editor.ts b/src/panels/lovelace/components/hui-input-list-editor.ts index 1f56afd279..9abd746444 100644 --- a/src/panels/lovelace/components/hui-input-list-editor.ts +++ b/src/panels/lovelace/components/hui-input-list-editor.ts @@ -1,7 +1,7 @@ import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -97,7 +97,7 @@ export class HuiInputListEditor extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-icon-button { --mdc-icon-button-size: 24px; diff --git a/src/panels/lovelace/components/hui-marquee.ts b/src/panels/lovelace/components/hui-marquee.ts index 29bd5bd0da..93782397c7 100644 --- a/src/panels/lovelace/components/hui-marquee.ts +++ b/src/panels/lovelace/components/hui-marquee.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -66,7 +66,7 @@ class HuiMarquee extends LitElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/panels/lovelace/components/hui-theme-select-editor.ts b/src/panels/lovelace/components/hui-theme-select-editor.ts index ce5d9200aa..43e7a7c0cb 100644 --- a/src/panels/lovelace/components/hui-theme-select-editor.ts +++ b/src/panels/lovelace/components/hui-theme-select-editor.ts @@ -4,7 +4,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -55,7 +55,7 @@ export class HuiThemeSelectEditor extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` paper-dropdown-menu { width: 100%; diff --git a/src/panels/lovelace/components/hui-timestamp-display.ts b/src/panels/lovelace/components/hui-timestamp-display.ts index 04663d12ae..19c73c37dc 100644 --- a/src/panels/lovelace/components/hui-timestamp-display.ts +++ b/src/panels/lovelace/components/hui-timestamp-display.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -32,7 +32,7 @@ class HuiTimestampDisplay extends LitElement { @property() public format?: TimestampRenderingFormats; - @internalProperty() private _relative?: string; + @state() private _relative?: string; private _connected?: boolean; diff --git a/src/panels/lovelace/components/hui-views-list.ts b/src/panels/lovelace/components/hui-views-list.ts index 7307369601..7604d0bf16 100644 --- a/src/panels/lovelace/components/hui-views-list.ts +++ b/src/panels/lovelace/components/hui-views-list.ts @@ -2,10 +2,10 @@ import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -24,9 +24,9 @@ declare global { @customElement("hui-views-list") class HuiViewsList extends LitElement { - @internalProperty() private lovelaceConfig?: LovelaceConfig | undefined; + @state() private lovelaceConfig?: LovelaceConfig | undefined; - @internalProperty() private selected?: number | undefined; + @state() private selected?: number | undefined; protected render(): TemplateResult { if (!this.lovelaceConfig) { @@ -67,7 +67,7 @@ class HuiViewsList extends LitElement { fireEvent(this, "view-selected", { view }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` paper-listbox { padding-top: 0; diff --git a/src/panels/lovelace/components/hui-warning-element.ts b/src/panels/lovelace/components/hui-warning-element.ts index bd3b1ad45e..43ee7c7079 100644 --- a/src/panels/lovelace/components/hui-warning-element.ts +++ b/src/panels/lovelace/components/hui-warning-element.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -17,7 +17,7 @@ export class HuiWarningElement extends LitElement { return html` `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-icon { color: #fce588; diff --git a/src/panels/lovelace/components/hui-warning.ts b/src/panels/lovelace/components/hui-warning.ts index 96b9dab9ea..7be082b5e4 100644 --- a/src/panels/lovelace/components/hui-warning.ts +++ b/src/panels/lovelace/components/hui-warning.ts @@ -1,7 +1,7 @@ import { STATE_NOT_RUNNING } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -27,7 +27,7 @@ export class HuiWarning extends LitElement { return html` `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index 75c9a95bc5..a032ee1ffd 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -3,10 +3,10 @@ import "@material/mwc-tab/mwc-tab"; import Fuse from "fuse.js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -50,17 +50,17 @@ interface CardElement { export class HuiCardPicker extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _cards: CardElement[] = []; + @state() private _cards: CardElement[] = []; public lovelace?: LovelaceConfig; public cardPicked?: (cardConf: LovelaceCardConfig) => void; - @internalProperty() private _filter = ""; + @state() private _filter = ""; - @internalProperty() private _width?: number; + @state() private _width?: number; - @internalProperty() private _height?: number; + @state() private _height?: number; private _unusedEntities?: string[]; @@ -333,7 +333,7 @@ export class HuiCardPicker extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ css` search-input { diff --git a/src/panels/lovelace/editor/card-editor/hui-card-preview.ts b/src/panels/lovelace/editor/card-editor/hui-card-preview.ts index 9cb7882655..66bacbe61d 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-preview.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-preview.ts @@ -1,5 +1,5 @@ import "@polymer/paper-input/paper-textarea"; -import { property, PropertyValues, UpdatingElement } from "lit-element"; +import { property, PropertyValues, ReactiveElement } from "lit-element"; import { computeRTL } from "../../../../common/util/compute_rtl"; import { LovelaceCardConfig } from "../../../../data/lovelace"; import { HomeAssistant } from "../../../../types"; @@ -7,7 +7,7 @@ import { createCardElement } from "../../create-element/create-card-element"; import { createErrorCardConfig } from "../../create-element/create-element-base"; import { LovelaceCard } from "../../types"; -export class HuiCardPreview extends UpdatingElement { +export class HuiCardPreview extends ReactiveElement { @property({ attribute: false }) public hass?: HomeAssistant; @property() public config?: LovelaceCardConfig; @@ -28,6 +28,10 @@ export class HuiCardPreview extends UpdatingElement { }); } + protected createRenderRoot() { + return this; + } + protected update(changedProperties: PropertyValues) { super.update(changedProperties); diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts index a1790a9e95..56f0b173d3 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts @@ -2,10 +2,10 @@ import "@material/mwc-tab-bar/mwc-tab-bar"; import "@material/mwc-tab/mwc-tab"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -45,13 +45,13 @@ export class HuiCreateDialogCard implements HassDialog { @property({ attribute: false }) protected hass!: HomeAssistant; - @internalProperty() private _params?: CreateCardDialogParams; + @state() private _params?: CreateCardDialogParams; - @internalProperty() private _viewConfig!: LovelaceViewConfig; + @state() private _viewConfig!: LovelaceViewConfig; - @internalProperty() private _selectedEntities: string[] = []; + @state() private _selectedEntities: string[] = []; - @internalProperty() private _currTabIndex = 0; + @state() private _currTabIndex = 0; public async showDialog(params: CreateCardDialogParams): Promise { this._params = params; @@ -151,7 +151,7 @@ export class HuiCreateDialogCard ev.stopPropagation(); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts index 28f006e32d..6dded9ea6c 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts @@ -2,10 +2,10 @@ import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import deepFreeze from "deep-freeze"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -24,9 +24,9 @@ import type { DeleteCardDialogParams } from "./show-delete-card-dialog"; export class HuiDialogDeleteCard extends LitElement { @property() protected hass!: HomeAssistant; - @internalProperty() private _params?: DeleteCardDialogParams; + @state() private _params?: DeleteCardDialogParams; - @internalProperty() private _cardConfig?: LovelaceCardConfig; + @state() private _cardConfig?: LovelaceCardConfig; @query("ha-paper-dialog", true) private _dialog!: HaPaperDialog; @@ -72,7 +72,7 @@ export class HuiDialogDeleteCard extends LitElement { `; } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index 83da1e44ae..ac497b42a1 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -2,10 +2,10 @@ import { mdiHelpCircle } from "@mdi/js"; import deepFreeze from "deep-freeze"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -55,26 +55,26 @@ export class HuiDialogEditCard @property({ type: Boolean, reflect: true }) public large = false; - @internalProperty() private _params?: EditCardDialogParams; + @state() private _params?: EditCardDialogParams; - @internalProperty() private _cardConfig?: LovelaceCardConfig; + @state() private _cardConfig?: LovelaceCardConfig; - @internalProperty() private _viewConfig!: LovelaceViewConfig; + @state() private _viewConfig!: LovelaceViewConfig; - @internalProperty() private _saving = false; + @state() private _saving = false; - @internalProperty() private _error?: string; + @state() private _error?: string; - @internalProperty() private _guiModeAvailable? = true; + @state() private _guiModeAvailable? = true; @query("hui-card-element-editor") private _cardEditorEl?: HuiCardElementEditor; - @internalProperty() private _GUImode = true; + @state() private _GUImode = true; - @internalProperty() private _documentationURL?: string; + @state() private _documentationURL?: string; - @internalProperty() private _dirty = false; + @state() private _dirty = false; public async showDialog(params: EditCardDialogParams): Promise { this._params = params; @@ -353,7 +353,7 @@ export class HuiDialogEditCard this.closeDialog(); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts index a8e2d4bfc4..ed4b56428f 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts @@ -2,10 +2,10 @@ import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import deepFreeze from "deep-freeze"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -28,11 +28,11 @@ import { SuggestCardDialogParams } from "./show-suggest-card-dialog"; export class HuiDialogSuggestCard extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _params?: SuggestCardDialogParams; + @state() private _params?: SuggestCardDialogParams; - @internalProperty() private _cardConfig?: LovelaceCardConfig[]; + @state() private _cardConfig?: LovelaceCardConfig[]; - @internalProperty() private _saving = false; + @state() private _saving = false; @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor; @@ -123,7 +123,7 @@ export class HuiDialogSuggestCard extends LitElement { `; } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts b/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts index e38c05a6d0..dc95e6afc2 100644 --- a/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts +++ b/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -136,7 +136,7 @@ export class HuiEntityPickerTable extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-data-table { --data-table-border-width: 0; diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts index 895d668ac5..96be619150 100644 --- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts @@ -3,10 +3,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -38,7 +38,7 @@ export class HuiAlarmPanelCardEditor implements LovelaceCardEditor { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: AlarmPanelCardConfig; + @state() private _config?: AlarmPanelCardConfig; public setConfig(config: AlarmPanelCardConfig): void { assert(config, cardConfigStruct); @@ -94,9 +94,9 @@ export class HuiAlarmPanelCardEditor @value-changed="${this._valueChanged}" > Used States ${this._states.map( - (state, index) => html` + (entityState, index) => html`
- ${state} + ${entityState} - ${states.map((state) => html` ${state} `)} + ${states.map( + (entityState) => html` ${entityState} ` + )} { @property({ attribute: false }) protected hass!: HomeAssistant; - @internalProperty() private _params?: CreateHeaderFooterDialogParams; + @state() private _params?: CreateHeaderFooterDialogParams; public async showDialog( params: CreateHeaderFooterDialogParams @@ -117,7 +117,7 @@ export class HuiCreateDialogHeaderFooter this.closeDialog(); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts index dc064f7ddd..033d0fef1b 100644 --- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts +++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts @@ -4,7 +4,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -110,7 +110,7 @@ export class HuiHeaderFooterEditor extends LitElement { fireEvent(this, "value-changed", { value: "" }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { font-size: 16px; diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts index acf32993e4..c6d89e63b6 100644 --- a/src/panels/lovelace/editor/hui-dialog-save-config.ts +++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts @@ -3,10 +3,10 @@ import "@material/mwc-icon-button/mwc-icon-button"; import { mdiHelpCircle } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -33,11 +33,11 @@ const EMPTY_CONFIG: LovelaceConfig = { views: [{ title: "Home" }] }; export class HuiSaveConfig extends LitElement implements HassDialog { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _params?: SaveDialogParams; + @state() private _params?: SaveDialogParams; - @internalProperty() private _emptyConfig = false; + @state() private _emptyConfig = false; - @internalProperty() private _saving: boolean; + @state() private _saving: boolean; public constructor() { super(); @@ -201,7 +201,7 @@ export class HuiSaveConfig extends LitElement implements HassDialog { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts index d87c072e00..2173dd0716 100644 --- a/src/panels/lovelace/editor/hui-element-editor.ts +++ b/src/panels/lovelace/editor/hui-element-editor.ts @@ -2,9 +2,9 @@ import "@material/mwc-button"; import { safeDump, safeLoad } from "js-yaml"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -55,25 +55,25 @@ export abstract class HuiElementEditor extends LitElement { @property({ attribute: false }) public lovelace?: LovelaceConfig; - @internalProperty() private _yaml?: string; + @state() private _yaml?: string; - @internalProperty() private _config?: T; + @state() private _config?: T; - @internalProperty() private _configElement?: LovelaceGenericElementEditor; + @state() private _configElement?: LovelaceGenericElementEditor; - @internalProperty() private _configElementType?: string; + @state() private _configElementType?: string; - @internalProperty() private _guiMode = true; + @state() private _guiMode = true; // Error: Configuration broken - do not save - @internalProperty() private _errors?: string[]; + @state() private _errors?: string[]; // Warning: GUI editor can't handle configuration - ok to save - @internalProperty() private _warnings?: string[]; + @state() private _warnings?: string[]; - @internalProperty() private _guiSupported?: boolean; + @state() private _guiSupported?: boolean; - @internalProperty() private _loading = false; + @state() private _loading = false; @query("ha-code-editor") _yamlEditor?: HaCodeEditor; @@ -351,7 +351,7 @@ export abstract class HuiElementEditor extends LitElement { ev.stopPropagation(); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts index e093fcc0c2..ab8374bf8f 100644 --- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts +++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts @@ -2,10 +2,10 @@ import "@material/mwc-icon-button"; import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -41,9 +41,9 @@ export class HuiEntitiesCardRowEditor extends LitElement { @property() protected label?: string; - @internalProperty() private _attached = false; + @state() private _attached = false; - @internalProperty() private _renderEmptySortable = false; + @state() private _renderEmptySortable = false; private _sortable?: Sortable; @@ -250,7 +250,7 @@ export class HuiEntitiesCardRowEditor extends LitElement { }); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ sortableStyles, css` diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts index c382ed0570..8af704b9e6 100644 --- a/src/panels/lovelace/editor/hui-sub-element-editor.ts +++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts @@ -3,10 +3,10 @@ import "@material/mwc-icon-button"; import { mdiArrowLeft } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, query, @@ -34,9 +34,9 @@ export class HuiSubElementEditor extends LitElement { @property({ attribute: false }) public config!: SubElementEditorConfig; - @internalProperty() private _guiModeAvailable = true; + @state() private _guiModeAvailable = true; - @internalProperty() private _guiMode = true; + @state() private _guiMode = true; @query(".editor") private _editorElement?: HuiElementEditor< LovelaceRowConfig | LovelaceHeaderFooterConfig @@ -109,7 +109,7 @@ export class HuiSubElementEditor extends LitElement { this._guiModeAvailable = ev.detail.guiModeAvailable; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .header { display: flex; diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts index 219824378f..ccf3a8e9ad 100644 --- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts +++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts @@ -2,10 +2,10 @@ import "@material/mwc-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -24,7 +24,7 @@ import { fireEvent } from "../../../../common/dom/fire_event"; export class HuiDialogEditLovelace extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _lovelace?: Lovelace; + @state() private _lovelace?: Lovelace; private _config?: LovelaceConfig; @@ -135,7 +135,7 @@ export class HuiDialogEditLovelace extends LitElement { return JSON.stringify(this._config) !== JSON.stringify(lovelaceConfig); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts b/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts index dff6c618a4..c91d53df54 100644 --- a/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts +++ b/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts @@ -1,6 +1,6 @@ import "@polymer/paper-input/paper-input"; import { - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -72,7 +72,7 @@ export class HuiLovelaceEditor extends LitElement { fireEvent(this, "lovelace-config-changed", { config: newConfig }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return configElementStyle; } } 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 55cedc9626..e0b9c0b95c 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,10 +1,10 @@ import "@polymer/paper-item/paper-item"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -27,13 +27,13 @@ import type { SelectViewDialogParams } from "./show-select-view-dialog"; export class HuiDialogSelectView extends LitElement { public hass!: HomeAssistant; - @internalProperty() private _params?: SelectViewDialogParams; + @state() private _params?: SelectViewDialogParams; - @internalProperty() private _dashboards: LovelaceDashboard[] = []; + @state() private _dashboards: LovelaceDashboard[] = []; - @internalProperty() private _urlPath?: string | null; + @state() private _urlPath?: string | null; - @internalProperty() private _config?: LovelaceConfig; + @state() private _config?: LovelaceConfig; public showDialog(params: SelectViewDialogParams): void { this._config = params.lovelaceConfig; @@ -138,7 +138,7 @@ export class HuiDialogSelectView extends LitElement { this.closeDialog(); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts index 9a74ed6958..6042780053 100644 --- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts +++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts @@ -1,10 +1,10 @@ import { mdiPlus } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -33,9 +33,9 @@ export class HuiUnusedEntities extends LitElement { @property({ type: Boolean }) public narrow?: boolean; - @internalProperty() private _unusedEntities: string[] = []; + @state() private _unusedEntities: string[] = []; - @internalProperty() private _selectedEntities: string[] = []; + @state() private _selectedEntities: string[] = []; private get _config(): LovelaceConfig { return this.lovelace.config; @@ -153,7 +153,7 @@ export class HuiUnusedEntities extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { background: var(--lovelace-background); diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts index 5041bd3b60..6a6f46a86a 100644 --- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts @@ -3,10 +3,10 @@ import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tabs"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -44,17 +44,17 @@ import { EditViewDialogParams } from "./show-edit-view-dialog"; export class HuiDialogEditView extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _params?: EditViewDialogParams; + @state() private _params?: EditViewDialogParams; - @internalProperty() private _config?: LovelaceViewConfig; + @state() private _config?: LovelaceViewConfig; - @internalProperty() private _badges?: LovelaceBadgeConfig[]; + @state() private _badges?: LovelaceBadgeConfig[]; - @internalProperty() private _cards?: LovelaceCardConfig[]; + @state() private _cards?: LovelaceCardConfig[]; - @internalProperty() private _saving = false; + @state() private _saving = false; - @internalProperty() private _curTab?: string; + @state() private _curTab?: string; private _curTabIndex = 0; @@ -347,7 +347,7 @@ export class HuiDialogEditView extends LitElement { return this._params!.viewIndex === undefined; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts index 9ea6d9bc21..dec02719ee 100644 --- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts +++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts @@ -1,10 +1,10 @@ import "@polymer/paper-input/paper-input"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -35,7 +35,7 @@ export class HuiViewEditor extends LitElement { @property() public isNew!: boolean; - @internalProperty() private _config!: LovelaceViewConfig; + @state() private _config!: LovelaceViewConfig; private _suggestedPath = false; @@ -181,7 +181,7 @@ export class HuiViewEditor extends LitElement { fireEvent(this, "view-config-changed", { config }); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ configElementStyle, css` diff --git a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts index bed9698288..74010608a5 100644 --- a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts +++ b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts @@ -2,10 +2,10 @@ import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -40,9 +40,9 @@ export class HuiViewVisibilityEditor extends LitElement { @property() public _config!: LovelaceViewConfig; - @internalProperty() private _users!: User[]; + @state() private _users!: User[]; - @internalProperty() private _visible!: boolean | ShowViewConfig[]; + @state() private _visible!: boolean | ShowViewConfig[]; private _sortedUsers = memoizeOne((users: User[]) => users.sort((a, b) => compare(a.name, b.name)) @@ -134,7 +134,7 @@ export class HuiViewVisibilityEditor extends LitElement { fireEvent(this, "view-visibility-changed", { visible: this._visible }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts index 5c934ce593..bf28c07ea4 100644 --- a/src/panels/lovelace/elements/hui-icon-element.ts +++ b/src/panels/lovelace/elements/hui-icon-element.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -21,7 +21,7 @@ import { IconElementConfig, LovelaceElement } from "./types"; export class HuiIconElement extends LitElement implements LovelaceElement { public hass?: HomeAssistant; - @internalProperty() private _config?: IconElementConfig; + @state() private _config?: IconElementConfig; public setConfig(config: IconElementConfig): void { if (!config.icon) { @@ -56,7 +56,7 @@ export class HuiIconElement extends LitElement implements LovelaceElement { handleAction(this, this.hass!, this._config!, ev.detail.action!); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { cursor: pointer; diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts index ab4d328d71..30452b0a6c 100644 --- a/src/panels/lovelace/elements/hui-image-element.ts +++ b/src/panels/lovelace/elements/hui-image-element.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -22,7 +22,7 @@ import { ImageElementConfig, LovelaceElement } from "./types"; export class HuiImageElement extends LitElement implements LovelaceElement { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: ImageElementConfig; + @state() private _config?: ImageElementConfig; public setConfig(config: ImageElementConfig): void { if (!config) { @@ -66,7 +66,7 @@ export class HuiImageElement extends LitElement implements LovelaceElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host(.clickable) { cursor: pointer; diff --git a/src/panels/lovelace/elements/hui-service-button-element.ts b/src/panels/lovelace/elements/hui-service-button-element.ts index 3c0b880e45..6d43e889ba 100644 --- a/src/panels/lovelace/elements/hui-service-button-element.ts +++ b/src/panels/lovelace/elements/hui-service-button-element.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -17,7 +17,7 @@ export class HuiServiceButtonElement implements LovelaceElement { public hass?: HomeAssistant; - @internalProperty() private _config?: ServiceButtonElementConfig; + @state() private _config?: ServiceButtonElementConfig; private _domain?: string; @@ -57,7 +57,7 @@ export class HuiServiceButtonElement `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-call-service-button { color: var(--primary-color); diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts index 7677e45e57..7ec9f40313 100644 --- a/src/panels/lovelace/elements/hui-state-badge-element.ts +++ b/src/panels/lovelace/elements/hui-state-badge-element.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -26,7 +26,7 @@ export class HuiStateBadgeElement implements LovelaceElement { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: StateBadgeElementConfig; + @state() private _config?: StateBadgeElementConfig; public setConfig(config: StateBadgeElementConfig): void { if (!config.entity) { diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts index 7ec7fdcdf4..56865680a3 100644 --- a/src/panels/lovelace/elements/hui-state-icon-element.ts +++ b/src/panels/lovelace/elements/hui-state-icon-element.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -26,7 +26,7 @@ import { LovelaceElement, StateIconElementConfig } from "./types"; export class HuiStateIconElement extends LitElement implements LovelaceElement { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: StateIconElementConfig; + @state() private _config?: StateIconElementConfig; public setConfig(config: StateIconElementConfig): void { if (!config.entity) { @@ -77,7 +77,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { cursor: pointer; diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts index 8b78064d82..d8d0b454ca 100644 --- a/src/panels/lovelace/elements/hui-state-label-element.ts +++ b/src/panels/lovelace/elements/hui-state-label-element.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -26,7 +26,7 @@ import { LovelaceElement, StateLabelElementConfig } from "./types"; class HuiStateLabelElement extends LitElement implements LovelaceElement { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: StateLabelElementConfig; + @state() private _config?: StateLabelElementConfig; public setConfig(config: StateLabelElementConfig): void { if (!config.entity) { @@ -95,7 +95,7 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement { handleAction(this, this.hass!, this._config!, ev.detail.action!); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { cursor: pointer; diff --git a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts index f4c44a5633..383b139228 100644 --- a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -20,7 +20,7 @@ import { EntityConfig, LovelaceRow } from "./types"; class HuiClimateEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; public setConfig(config: EntityConfig): void { if (!config || !config.entity) { @@ -59,7 +59,7 @@ class HuiClimateEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-climate-state { text-align: right; diff --git a/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts b/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts index 4fe7860a95..0c1d0cd969 100644 --- a/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -22,7 +22,7 @@ import { EntityConfig, LovelaceRow } from "./types"; class HuiCoverEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; public setConfig(config: EntityConfig): void { if (!config) { @@ -69,7 +69,7 @@ class HuiCoverEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-cover-controls, ha-cover-tilt-controls { diff --git a/src/panels/lovelace/entity-rows/hui-group-entity-row.ts b/src/panels/lovelace/entity-rows/hui-group-entity-row.ts index 89e9813c3a..29c01c3441 100644 --- a/src/panels/lovelace/entity-rows/hui-group-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-group-entity-row.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -21,7 +21,7 @@ import { EntityConfig, LovelaceRow } from "./types"; class HuiGroupEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; private _computeCanToggle(hass: HomeAssistant, entityIds: string[]): boolean { return entityIds.some((entityId) => { diff --git a/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts index fbc6ce31ff..1bca3bf3d3 100644 --- a/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -24,7 +24,7 @@ import type { EntityConfig, LovelaceRow } from "./types"; class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; @query("paper-time-input") private _timeInputEl?: PaperTimeInput; diff --git a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts index 92583cffbc..e8256b3f2f 100644 --- a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts @@ -1,10 +1,10 @@ import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -25,7 +25,7 @@ import { EntityConfig, LovelaceRow } from "./types"; class HuiInputNumberEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; private _loaded?: boolean; @@ -120,7 +120,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .flex { display: flex; diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts index aa2ca5c4dc..ebc2606dab 100644 --- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts @@ -2,10 +2,10 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -39,7 +39,7 @@ import { LovelaceRow } from "./types"; class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntitiesCardEntityConfig; + @state() private _config?: EntitiesCardEntityConfig; public setConfig(config: EntitiesCardEntityConfig): void { if (!config || !config.entity) { @@ -136,7 +136,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { handleAction(this, this.hass!, this._config!, ev.detail.action!); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts index 38d6e8058e..1ff1550174 100644 --- a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts @@ -1,10 +1,10 @@ import { PaperInputElement } from "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -22,7 +22,7 @@ import { EntityConfig, LovelaceRow } from "./types"; class HuiInputTextEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; public setConfig(config: EntityConfig): void { if (!config) { @@ -83,7 +83,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow { ev.target.blur(); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { cursor: pointer; diff --git a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts index f8b8b66291..ad30ff2349 100644 --- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -21,7 +21,7 @@ import { EntityConfig, LovelaceRow } from "./types"; class HuiLockEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; public setConfig(config: EntityConfig): void { if (!config) { @@ -64,7 +64,7 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` mwc-button { margin-right: -0.57em; diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts index e86402dab3..95ab9a1186 100644 --- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts @@ -1,10 +1,10 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -42,11 +42,11 @@ import type { EntityConfig, LovelaceRow } from "./types"; class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; - @internalProperty() private _narrow?: boolean = false; + @state() private _narrow?: boolean = false; - @internalProperty() private _veryNarrow?: boolean = false; + @state() private _veryNarrow?: boolean = false; private _resizeObserver?: ResizeObserver; @@ -91,11 +91,11 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { `; } - const state = stateObj.state; + const entityState = stateObj.state; const buttons = html` ${!this._narrow && - state === "playing" && + entityState === "playing" && supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK) ? html` ` : ""} - ${(state === "playing" && + ${(entityState === "playing" && (supportsFeature(stateObj, SUPPORT_PAUSE) || supportsFeature(stateObj, SUPPORT_STOP))) || - ((state === "paused" || state === "idle") && + ((entityState === "paused" || entityState === "idle") && supportsFeature(stateObj, SUPPORT_PLAY)) || - (state === "on" && + (entityState === "on" && (supportsFeature(stateObj, SUPPORT_PLAY) || supportsFeature(stateObj, SUPPORT_PAUSE))) ? html` @@ -119,7 +119,8 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { > ` : ""} - ${state === "playing" && supportsFeature(stateObj, SUPPORT_NEXT_TRACK) + ${entityState === "playing" && + supportsFeature(stateObj, SUPPORT_NEXT_TRACK) ? html`
${supportsFeature(stateObj, SUPPORT_TURN_ON) && - state === "off" && - !UNAVAILABLE_STATES.includes(state) + entityState === "off" && + !UNAVAILABLE_STATES.includes(entityState) ? html` ${(supportsFeature(stateObj, SUPPORT_VOLUME_SET) || supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)) && - ![UNAVAILABLE, UNKNOWN, "off"].includes(state) + ![UNAVAILABLE, UNKNOWN, "off"].includes(entityState) ? html`
@@ -308,7 +309,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts index 40e748ec76..5854a7d0c7 100644 --- a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts @@ -1,12 +1,12 @@ import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, property, - internalProperty, + state, PropertyValues, TemplateResult, } from "lit-element"; @@ -25,7 +25,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa class HuiNumberEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; private _loaded?: boolean; @@ -120,7 +120,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .flex { display: flex; diff --git a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts index e0eec27805..f0013e74c3 100644 --- a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -23,7 +23,7 @@ import { ActionRowConfig, LovelaceRow } from "./types"; class HuiSceneEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _config?: ActionRowConfig; + @state() private _config?: ActionRowConfig; public setConfig(config: ActionRowConfig): void { if (!config) { @@ -65,7 +65,7 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` mwc-button { margin-right: -0.57em; diff --git a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts index 3be834a4b0..5eb34cfb82 100644 --- a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -22,7 +22,7 @@ import { ActionRowConfig, LovelaceRow } from "./types"; class HuiScriptEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: ActionRowConfig; + @state() private _config?: ActionRowConfig; public setConfig(config: ActionRowConfig): void { if (!config) { @@ -78,7 +78,7 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` mwc-button:last-child { margin-right: -0.57em; diff --git a/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts b/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts index 758c8570e3..5987344bdd 100644 --- a/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -33,7 +33,7 @@ interface SensorEntityConfig extends EntitiesCardEntityConfig { class HuiSensorEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: SensorEntityConfig; + @state() private _config?: SensorEntityConfig; public setConfig(config: SensorEntityConfig): void { if (!config) { @@ -95,7 +95,7 @@ class HuiSensorEntityRow extends LitElement implements LovelaceRow { handleAction(this, this.hass!, this._config!, ev.detail.action); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` div { text-align: right; diff --git a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts index 1fb732ca5c..68762e39b5 100644 --- a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -28,7 +28,7 @@ import { LovelaceRow } from "./types"; class HuiTextEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntitiesCardEntityConfig; + @state() private _config?: EntitiesCardEntityConfig; public setConfig(config: EntitiesCardEntityConfig): void { if (!config) { @@ -87,7 +87,7 @@ class HuiTextEntityRow extends LitElement implements LovelaceRow { handleAction(this, this.hass!, this._config!, ev.detail.action); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` div { text-align: right; diff --git a/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts b/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts index 448ccc4574..f6238c4e87 100644 --- a/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts @@ -2,7 +2,7 @@ import { HassEntity } from "home-assistant-js-websocket"; import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -20,9 +20,9 @@ import { EntityConfig } from "./types"; class HuiTimerEntityRow extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; - @internalProperty() private _timeRemaining?: number; + @state() private _timeRemaining?: number; private _interval?: number; diff --git a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts index 08fb08f86f..0daf0c4088 100644 --- a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -20,7 +20,7 @@ import { EntityConfig, LovelaceRow } from "./types"; class HuiToggleEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntityConfig; + @state() private _config?: EntityConfig; public setConfig(config: EntityConfig): void { if (!config) { diff --git a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts index 1d4a23f185..c7693c9526 100644 --- a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -41,7 +41,7 @@ import type { LovelaceRow } from "./types"; class HuiWeatherEntityRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: EntitiesCardEntityConfig; + @state() private _config?: EntitiesCardEntityConfig; public setConfig(config: EntitiesCardEntityConfig): void { if (!config?.entity) { @@ -133,7 +133,7 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow { handleAction(this, this.hass!, this._config!, ev.detail.action!); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ weatherSVGStyles, css` diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts index 43aa5c8d45..9b5e0b6769 100644 --- a/src/panels/lovelace/ha-panel-lovelace.ts +++ b/src/panels/lovelace/ha-panel-lovelace.ts @@ -1,12 +1,6 @@ import "@material/mwc-button"; import deepFreeze from "deep-freeze"; -import { - html, - internalProperty, - LitElement, - property, - TemplateResult, -} from "lit-element"; +import { html, state, LitElement, property, TemplateResult } from "lit-element"; import { constructUrlCurrentPath } from "../../common/url/construct-url"; import { addSearchParam, @@ -53,11 +47,12 @@ class LovelacePanel extends LitElement { @property() public route?: Route; @property() - private _state?: "loading" | "loaded" | "error" | "yaml-editor" = "loading"; + private _panelState?: "loading" | "loaded" | "error" | "yaml-editor" = + "loading"; - @internalProperty() private _errorMsg?: string; + @state() private _errorMsg?: string; - @internalProperty() private lovelace?: Lovelace; + @state() private lovelace?: Lovelace; private _ignoreNextUpdateEvent = false; @@ -86,7 +81,7 @@ class LovelacePanel extends LitElement { } else if (this.lovelace && this.lovelace.mode === "generated") { // When lovelace is generated, we re-generate each time a user goes // to the states panel to make sure new entities are shown. - this._state = "loading"; + this._panelState = "loading"; this._regenerateConfig(); } else if (this._fetchConfigOnConnect) { // Config was changed when we were not at the lovelace panel @@ -103,9 +98,9 @@ class LovelacePanel extends LitElement { } protected render(): TemplateResult | void { - const state = this._state!; + const panelState = this._panelState!; - if (state === "loaded") { + if (panelState === "loaded") { return html` { // If we use a strategy for dashboard, we cannot show the edit UI diff --git a/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts b/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts index 2d237225c4..14ca1a81d3 100644 --- a/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -23,7 +23,7 @@ export class HuiButtonsHeaderFooter @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _configEntities?: EntityConfig[]; + @state() private _configEntities?: EntityConfig[]; public getCardSize(): number { return 3; diff --git a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts index f86d2645c1..93eff825be 100644 --- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts @@ -1,10 +1,10 @@ import { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -62,7 +62,7 @@ export class HuiGraphHeaderFooter @property() protected _config?: GraphHeaderFooterConfig; - @internalProperty() private _coordinates?: number[][]; + @state() private _coordinates?: number[][]; private _date?: Date; @@ -202,7 +202,7 @@ export class HuiGraphHeaderFooter this._fetching = false; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` ha-circular-progress { position: absolute; diff --git a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts index 5a6ccfd350..19d01504e4 100644 --- a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -80,7 +80,7 @@ export class HuiPictureHeaderFooter `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` img.clickable { cursor: pointer; diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index d0e6dc2004..1b62dc23ee 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -5,10 +5,10 @@ import "@polymer/app-layout/app-toolbar/app-toolbar"; import { safeDump, safeLoad } from "js-yaml"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -47,9 +47,9 @@ class LovelaceFullConfigEditor extends LitElement { @property() public closeEditor?: () => void; - @internalProperty() private _saving?: boolean; + @state() private _saving?: boolean; - @internalProperty() private _changed?: boolean; + @state() private _changed?: boolean; protected render(): TemplateResult | void { return html` @@ -136,7 +136,7 @@ class LovelaceFullConfigEditor extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 199c979e66..5afeadc87f 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -24,9 +24,9 @@ import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tabs"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -85,7 +85,7 @@ class HUIRoot extends LitElement { @property() public route?: { path: string; prefix: string }; - @internalProperty() private _curView?: number | "hass-unused-entities"; + @state() private _curView?: number | "hass-unused-entities"; @query("ha-app-layout", true) private _appLayout!: haAppLayout; @@ -853,7 +853,7 @@ class HUIRoot extends LitElement { fireEvent(this, "iron-resize"); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/lovelace/special-rows/hui-attribute-row.ts b/src/panels/lovelace/special-rows/hui-attribute-row.ts index ce215b0f2e..2f3a317b58 100644 --- a/src/panels/lovelace/special-rows/hui-attribute-row.ts +++ b/src/panels/lovelace/special-rows/hui-attribute-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -22,7 +22,7 @@ import { AttributeRowConfig, LovelaceRow } from "../entity-rows/types"; class HuiAttributeRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _config?: AttributeRowConfig; + @state() private _config?: AttributeRowConfig; public setConfig(config: AttributeRowConfig): void { if (!config) { @@ -81,7 +81,7 @@ class HuiAttributeRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` div { text-align: right; diff --git a/src/panels/lovelace/special-rows/hui-button-row.ts b/src/panels/lovelace/special-rows/hui-button-row.ts index 8622503329..a32c417721 100644 --- a/src/panels/lovelace/special-rows/hui-button-row.ts +++ b/src/panels/lovelace/special-rows/hui-button-row.ts @@ -1,10 +1,10 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -24,7 +24,7 @@ import { ButtonRowConfig, LovelaceRow } from "../entity-rows/types"; export class HuiButtonRow extends LitElement implements LovelaceRow { public hass?: HomeAssistant; - @internalProperty() private _config?: ButtonRowConfig; + @state() private _config?: ButtonRowConfig; public setConfig(config: ButtonRowConfig): void { if (!config) { @@ -81,7 +81,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/panels/lovelace/special-rows/hui-buttons-row.ts b/src/panels/lovelace/special-rows/hui-buttons-row.ts index 58ed5f4a84..23ea52aa56 100644 --- a/src/panels/lovelace/special-rows/hui-buttons-row.ts +++ b/src/panels/lovelace/special-rows/hui-buttons-row.ts @@ -1,7 +1,7 @@ import { customElement, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -25,7 +25,7 @@ export class HuiButtonsRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass?: HomeAssistant; - @internalProperty() private _configEntities?: EntityConfig[]; + @state() private _configEntities?: EntityConfig[]; public setConfig(config: ButtonsRowConfig): void { this._configEntities = processConfigEntities(config.entities).map( diff --git a/src/panels/lovelace/special-rows/hui-cast-row.ts b/src/panels/lovelace/special-rows/hui-cast-row.ts index 851b4430d0..7021658174 100644 --- a/src/panels/lovelace/special-rows/hui-cast-row.ts +++ b/src/panels/lovelace/special-rows/hui-cast-row.ts @@ -1,10 +1,10 @@ import "@material/mwc-button/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -24,11 +24,11 @@ import { CastConfig, LovelaceRow } from "../entity-rows/types"; class HuiCastRow extends LitElement implements LovelaceRow { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _config?: CastConfig; + @state() private _config?: CastConfig; - @internalProperty() private _castManager?: CastManager | null; + @state() private _castManager?: CastManager | null; - @internalProperty() private _noHTTPS = false; + @state() private _noHTTPS = false; public setConfig(config: CastConfig): void { if (!config || config.view === undefined || config.view === null) { @@ -129,7 +129,7 @@ class HuiCastRow extends LitElement implements LovelaceRow { ); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/panels/lovelace/special-rows/hui-divider-row.ts b/src/panels/lovelace/special-rows/hui-divider-row.ts index 9949fa53d1..3763f21257 100644 --- a/src/panels/lovelace/special-rows/hui-divider-row.ts +++ b/src/panels/lovelace/special-rows/hui-divider-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -15,7 +15,7 @@ import { DividerConfig, LovelaceRow } from "../entity-rows/types"; class HuiDividerRow extends LitElement implements LovelaceRow { public hass?: HomeAssistant; - @internalProperty() private _config?: DividerConfig; + @state() private _config?: DividerConfig; public setConfig(config): void { if (!config) { @@ -33,7 +33,7 @@ class HuiDividerRow extends LitElement implements LovelaceRow { return html`
`; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` div { height: 1px; diff --git a/src/panels/lovelace/special-rows/hui-section-row.ts b/src/panels/lovelace/special-rows/hui-section-row.ts index 4052921bb6..045256a6ab 100644 --- a/src/panels/lovelace/special-rows/hui-section-row.ts +++ b/src/panels/lovelace/special-rows/hui-section-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -15,7 +15,7 @@ import { LovelaceRow, SectionConfig } from "../entity-rows/types"; class HuiSectionRow extends LitElement implements LovelaceRow { public hass?: HomeAssistant; - @internalProperty() private _config?: SectionConfig; + @state() private _config?: SectionConfig; public setConfig(config: SectionConfig): void { if (!config) { @@ -38,7 +38,7 @@ class HuiSectionRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` .label { color: var(--section-header-text-color, var(--primary-text-color)); diff --git a/src/panels/lovelace/special-rows/hui-text-row.ts b/src/panels/lovelace/special-rows/hui-text-row.ts index 6f12ce2eec..1e43ab303d 100644 --- a/src/panels/lovelace/special-rows/hui-text-row.ts +++ b/src/panels/lovelace/special-rows/hui-text-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -12,7 +12,7 @@ import { LovelaceRow, TextConfig } from "../entity-rows/types"; @customElement("hui-text-row") class HuiTextRow extends LitElement implements LovelaceRow { - @internalProperty() private _config?: TextConfig; + @state() private _config?: TextConfig; public setConfig(config: TextConfig): void { if (!config || !config.name || !config.text) { @@ -34,7 +34,7 @@ class HuiTextRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: flex; diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.ts b/src/panels/lovelace/special-rows/hui-weblink-row.ts index 6cdf9cc983..d475d8c4e5 100644 --- a/src/panels/lovelace/special-rows/hui-weblink-row.ts +++ b/src/panels/lovelace/special-rows/hui-weblink-row.ts @@ -1,9 +1,9 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, TemplateResult, } from "lit-element"; @@ -16,7 +16,7 @@ import { LovelaceRow, WeblinkConfig } from "../entity-rows/types"; class HuiWeblinkRow extends LitElement implements LovelaceRow { public hass?: HomeAssistant; - @internalProperty() private _config?: WeblinkConfig; + @state() private _config?: WeblinkConfig; public setConfig(config: WeblinkConfig): void { if (!config || !config.url) { @@ -48,7 +48,7 @@ class HuiWeblinkRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` a { display: flex; diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index c29130e46a..b99f4d9b16 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -1,9 +1,9 @@ import { mdiPlus } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -61,7 +61,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement { @property({ attribute: false }) public badges: LovelaceBadge[] = []; - @internalProperty() private _columns?: number; + @state() private _columns?: number; private _createColumnsIteration = 0; @@ -260,7 +260,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement { ); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts index 23898074aa..450e54c353 100644 --- a/src/panels/lovelace/views/hui-panel-view.ts +++ b/src/panels/lovelace/views/hui-panel-view.ts @@ -1,9 +1,9 @@ import { mdiPlus } from "@mdi/js"; import { css, - CSSResult, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -37,10 +37,7 @@ export class PanelView extends LitElement implements LovelaceViewElement { LovelaceCard | HuiErrorCard > = []; - @internalProperty() private _card?: - | LovelaceCard - | HuiWarning - | HuiCardOptions; + @state() private _card?: LovelaceCard | HuiWarning | HuiCardOptions; public setConfig(_config: LovelaceViewConfig): void {} @@ -138,7 +135,7 @@ export class PanelView extends LitElement implements LovelaceViewElement { } } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts index 938662e24a..ca81631685 100644 --- a/src/panels/lovelace/views/hui-view.ts +++ b/src/panels/lovelace/views/hui-view.ts @@ -1,9 +1,9 @@ import { customElement, - internalProperty, + state, property, PropertyValues, - UpdatingElement, + ReactiveElement, } from "lit-element"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import "../../../components/entity/ha-state-label-badge"; @@ -39,7 +39,7 @@ declare global { } @customElement("hui-view") -export class HUIView extends UpdatingElement { +export class HUIView extends ReactiveElement { @property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public lovelace!: Lovelace; @@ -48,9 +48,9 @@ export class HUIView extends UpdatingElement { @property({ type: Number }) public index!: number; - @internalProperty() private _cards: Array = []; + @state() private _cards: Array = []; - @internalProperty() private _badges: LovelaceBadge[] = []; + @state() private _badges: LovelaceBadge[] = []; private _layoutElementType?: string; @@ -89,6 +89,10 @@ export class HUIView extends UpdatingElement { return element; } + protected createRenderRoot() { + return this; + } + protected updated(changedProperties: PropertyValues): void { super.updated(changedProperties); diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts index fd2cebb721..10d51ee00b 100644 --- a/src/panels/media-browser/ha-panel-media-browser.ts +++ b/src/panels/media-browser/ha-panel-media-browser.ts @@ -3,7 +3,7 @@ import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -129,7 +129,7 @@ class PanelMediaBrowser extends LitElement { }); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/media-browser/hui-dialog-select-media-player.ts b/src/panels/media-browser/hui-dialog-select-media-player.ts index 46865415da..5d587206d1 100644 --- a/src/panels/media-browser/hui-dialog-select-media-player.ts +++ b/src/panels/media-browser/hui-dialog-select-media-player.ts @@ -4,7 +4,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -81,7 +81,7 @@ export class HuiDialogSelectMediaPlayer extends LitElement { this.closeDialog(); } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/media-browser/hui-dialog-web-browser-play-media.ts b/src/panels/media-browser/hui-dialog-web-browser-play-media.ts index 9a68172b11..df945275ad 100644 --- a/src/panels/media-browser/hui-dialog-web-browser-play-media.ts +++ b/src/panels/media-browser/hui-dialog-web-browser-play-media.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -91,7 +91,7 @@ export class HuiDialogWebBrowserPlayMedia extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/my/ha-panel-my.ts b/src/panels/my/ha-panel-my.ts index 9beeb01c87..f64c58fd7b 100644 --- a/src/panels/my/ha-panel-my.ts +++ b/src/panels/my/ha-panel-my.ts @@ -1,10 +1,4 @@ -import { - customElement, - html, - internalProperty, - LitElement, - property, -} from "lit-element"; +import { customElement, html, state, LitElement, property } from "lit-element"; import { sanitizeUrl } from "@braintree/sanitize-url"; import { navigate } from "../../common/navigate"; import { HomeAssistant, Route } from "../../types"; @@ -167,7 +161,7 @@ class HaPanelMy extends LitElement { @property() public route!: Route; - @internalProperty() public _error?: string; + @state() public _error?: string; connectedCallback() { super.connectedCallback(); diff --git a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts index bb3aa67587..6f81e6c8d9 100644 --- a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts +++ b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts @@ -1,9 +1,9 @@ import "@material/mwc-button"; import { css, - CSSResult, + CSSResultGroup, customElement, - internalProperty, + state, LitElement, property, } from "lit-element"; @@ -26,21 +26,21 @@ let instance = 0; class HaMfaModuleSetupFlow extends LitElement { @property() public hass!: HomeAssistant; - @internalProperty() private _dialogClosedCallback?: (params: { + @state() private _dialogClosedCallback?: (params: { flowFinished: boolean; }) => void; - @internalProperty() private _instance?: number; + @state() private _instance?: number; - @internalProperty() private _loading = false; + @state() private _loading = false; - @internalProperty() private _opened = false; + @state() private _opened = false; - @internalProperty() private _stepData: any = {}; + @state() private _stepData: any = {}; - @internalProperty() private _step?: DataEntryFlowStep; + @state() private _step?: DataEntryFlowStep; - @internalProperty() private _errorMessage?: string; + @state() private _errorMessage?: string; public showDialog({ continueFlowId, mfaModuleId, dialogClosedCallback }) { this._instance = instance++; @@ -151,7 +151,7 @@ class HaMfaModuleSetupFlow extends LitElement { `; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyleDialog, css` diff --git a/src/panels/profile/ha-advanced-mode-row.ts b/src/panels/profile/ha-advanced-mode-row.ts index 4f5744e52a..67fabfa082 100644 --- a/src/panels/profile/ha-advanced-mode-row.ts +++ b/src/panels/profile/ha-advanced-mode-row.ts @@ -1,6 +1,6 @@ import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -55,7 +55,7 @@ class AdvancedModeRow extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` a { color: var(--primary-color); diff --git a/src/panels/profile/ha-change-password-card.ts b/src/panels/profile/ha-change-password-card.ts index a54cb4eff3..775b59f1ba 100644 --- a/src/panels/profile/ha-change-password-card.ts +++ b/src/panels/profile/ha-change-password-card.ts @@ -3,10 +3,10 @@ import "@polymer/paper-dialog/paper-dialog"; import "@polymer/paper-input/paper-input"; import { css, - CSSResult, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -21,17 +21,17 @@ import type { HomeAssistant } from "../../types"; class HaChangePasswordCard extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _loading = false; + @state() private _loading = false; - @internalProperty() private _statusMsg?: string; + @state() private _statusMsg?: string; - @internalProperty() private _errorMsg?: string; + @state() private _errorMsg?: string; - @internalProperty() private _currentPassword?: string; + @state() private _currentPassword?: string; - @internalProperty() private _password?: string; + @state() private _password?: string; - @internalProperty() private _passwordConfirm?: string; + @state() private _passwordConfirm?: string; protected render(): TemplateResult { return html` @@ -170,7 +170,7 @@ class HaChangePasswordCard extends LitElement { this._passwordConfirm = undefined; } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.ts b/src/panels/profile/ha-long-lived-access-tokens-card.ts index 99ea0bd7bd..2468c84724 100644 --- a/src/panels/profile/ha-long-lived-access-tokens-card.ts +++ b/src/panels/profile/ha-long-lived-access-tokens-card.ts @@ -3,7 +3,7 @@ import "@material/mwc-icon-button/mwc-icon-button"; import { mdiDelete } from "@mdi/js"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -173,7 +173,7 @@ class HaLongLivedTokens extends LitElement { } } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/profile/ha-mfa-modules-card.ts b/src/panels/profile/ha-mfa-modules-card.ts index f5680cb127..5ccef7f050 100644 --- a/src/panels/profile/ha-mfa-modules-card.ts +++ b/src/panels/profile/ha-mfa-modules-card.ts @@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -48,7 +48,7 @@ class HaMfaModulesCard extends LitElement { `; } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` mwc-button { margin-right: -0.57em; diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts index cca363678c..382a4b9a6b 100644 --- a/src/panels/profile/ha-panel-profile.ts +++ b/src/panels/profile/ha-panel-profile.ts @@ -6,9 +6,9 @@ import "@polymer/paper-item/paper-item-body"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, - CSSResultArray, + CSSResultGroup, html, - internalProperty, + state, LitElement, property, TemplateResult, @@ -46,9 +46,9 @@ class HaPanelProfile extends LitElement { @property({ type: Boolean }) public narrow!: boolean; - @internalProperty() private _refreshTokens?: RefreshToken[]; + @state() private _refreshTokens?: RefreshToken[]; - @internalProperty() private _coreUserData?: CoreFrontendUserData | null; + @state() private _coreUserData?: CoreFrontendUserData | null; private _unsubCoreData?: UnsubscribeFunc; @@ -228,7 +228,7 @@ class HaPanelProfile extends LitElement { }); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/profile/ha-pick-dashboard-row.ts b/src/panels/profile/ha-pick-dashboard-row.ts index ba749ee6ea..da2c83622d 100644 --- a/src/panels/profile/ha-pick-dashboard-row.ts +++ b/src/panels/profile/ha-pick-dashboard-row.ts @@ -3,7 +3,7 @@ import "@polymer/paper-listbox/paper-listbox"; import { customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -21,7 +21,7 @@ class HaPickDashboardRow extends LitElement { @property() public narrow!: boolean; - @internalProperty() private _dashboards: LovelaceDashboard[] = []; + @state() private _dashboards: LovelaceDashboard[] = []; protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts index aeb3f85324..9ba8ee47d8 100644 --- a/src/panels/profile/ha-pick-theme-row.ts +++ b/src/panels/profile/ha-pick-theme-row.ts @@ -4,9 +4,9 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, - internalProperty, + state, LitElement, property, PropertyValues, @@ -27,9 +27,9 @@ export class HaPickThemeRow extends LitElement { @property({ type: Boolean }) public narrow!: boolean; - @internalProperty() _themes: string[] = []; + @state() _themes: string[] = []; - @internalProperty() _selectedTheme = 0; + @state() _selectedTheme = 0; protected render(): TemplateResult { const hasThemes = @@ -208,7 +208,7 @@ export class HaPickThemeRow extends LitElement { fireEvent(this, "settheme", { theme }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` a { color: var(--primary-color); diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts index 044dfa630d..faad31d988 100644 --- a/src/panels/profile/ha-refresh-tokens-card.ts +++ b/src/panels/profile/ha-refresh-tokens-card.ts @@ -3,7 +3,7 @@ import { mdiDelete } from "@mdi/js"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, LitElement, @@ -142,7 +142,7 @@ class HaRefreshTokens extends LitElement { } } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/panels/shopping-list/ha-panel-shopping-list.ts b/src/panels/shopping-list/ha-panel-shopping-list.ts index dabeae5082..99779d0cba 100644 --- a/src/panels/shopping-list/ha-panel-shopping-list.ts +++ b/src/panels/shopping-list/ha-panel-shopping-list.ts @@ -3,10 +3,10 @@ import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import { css, - CSSResultArray, + CSSResultGroup, customElement, html, - internalProperty, + state, LitElement, property, PropertyValues, @@ -29,7 +29,7 @@ class PanelShoppingList extends LitElement { @property({ type: Boolean, reflect: true }) public narrow!: boolean; - @internalProperty() private _card!: LovelaceCard | HuiErrorCard; + @state() private _card!: LovelaceCard | HuiErrorCard; private _conversation = memoizeOne((_components) => isComponentLoaded(this.hass, "conversation") @@ -85,7 +85,7 @@ class PanelShoppingList extends LitElement { showVoiceCommandDialog(this); } - static get styles(): CSSResultArray { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/state-summary/state-card-display.ts b/src/state-summary/state-card-display.ts index c89668cfe2..aec040baf9 100755 --- a/src/state-summary/state-card-display.ts +++ b/src/state-summary/state-card-display.ts @@ -2,7 +2,7 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -75,7 +75,7 @@ export class StateCardDisplay extends LitElement { } } - static get styles(): CSSResult[] { + static get styles(): CSSResultGroup { return [ haStyle, css` diff --git a/src/state-summary/state-card-input_select.ts b/src/state-summary/state-card-input_select.ts index 7b82d9767d..1c45e41b57 100644 --- a/src/state-summary/state-card-input_select.ts +++ b/src/state-summary/state-card-input_select.ts @@ -4,7 +4,7 @@ import type { PaperItemElement } from "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; import { css, - CSSResult, + CSSResultGroup, customElement, html, LitElement, @@ -61,7 +61,7 @@ class StateCardInputSelect extends LitElement { await setInputSelectOption(this.hass, this.stateObj.entity_id, option); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return css` :host { display: block; diff --git a/src/state-summary/state-card-script.ts b/src/state-summary/state-card-script.ts index afd839c569..579036e07e 100644 --- a/src/state-summary/state-card-script.ts +++ b/src/state-summary/state-card-script.ts @@ -1,12 +1,12 @@ import "@material/mwc-button"; import { HassEntity } from "home-assistant-js-websocket"; import { - CSSResult, customElement, - html, LitElement, property, + CSSResultGroup, } from "lit-element"; +import { html } from "lit-html"; import "../components/entity/ha-entity-toggle"; import "../components/entity/state-info"; import { UNAVAILABLE_STATES } from "../data/entity"; @@ -72,7 +72,7 @@ export class StateCardScript extends LitElement { }); } - static get styles(): CSSResult { + static get styles(): CSSResultGroup { return haStyle; } } diff --git a/src/state/quick-bar-mixin.ts b/src/state/quick-bar-mixin.ts index c09ce80402..7431a1e9f8 100644 --- a/src/state/quick-bar-mixin.ts +++ b/src/state/quick-bar-mixin.ts @@ -1,10 +1,10 @@ -import type { Constructor, PropertyValues } from "lit-element"; +import type { PropertyValues } from "lit-element"; import tinykeys from "tinykeys"; import { QuickBarParams, showQuickBar, } from "../dialogs/quick-bar/show-dialog-quick-bar"; -import { HomeAssistant } from "../types"; +import { Constructor, HomeAssistant } from "../types"; import { storeState } from "../util/ha-pref-storage"; import { HassElement } from "./hass-element"; diff --git a/src/state/url-sync-mixin.ts b/src/state/url-sync-mixin.ts index 2a9efa8d05..b6ae356ac3 100644 --- a/src/state/url-sync-mixin.ts +++ b/src/state/url-sync-mixin.ts @@ -1,5 +1,5 @@ /* eslint-disable no-console */ -import { UpdatingElement } from "lit-element"; +import { ReactiveElement } from "lit-element"; import { HASSDomEvent } from "../common/dom/fire_event"; import { closeDialog, @@ -13,7 +13,7 @@ import { Constructor } from "../types"; const DEBUG = false; export const urlSyncMixin = < - T extends Constructor + T extends Constructor >( superClass: T ) => diff --git a/src/styles/polymer-ha-style-dialog.ts b/src/styles/polymer-ha-style-dialog.ts index 04e28b93e1..22e239b470 100644 --- a/src/styles/polymer-ha-style-dialog.ts +++ b/src/styles/polymer-ha-style-dialog.ts @@ -1,4 +1,5 @@ import "@polymer/polymer/lib/elements/dom-module"; +import { CSSResult } from "lit-element"; import { haStyleDialog } from "../resources/styles"; const documentContainer = document.createElement("template"); @@ -7,7 +8,7 @@ documentContainer.setAttribute("style", "display: none;"); documentContainer.innerHTML = ` `; diff --git a/src/styles/polymer-ha-style.ts b/src/styles/polymer-ha-style.ts index 22d8c38cc6..ea6c98d829 100644 --- a/src/styles/polymer-ha-style.ts +++ b/src/styles/polymer-ha-style.ts @@ -1,4 +1,5 @@ import "@polymer/polymer/lib/elements/dom-module"; +import { CSSResult } from "lit-element"; import { haStyle } from "../resources/styles"; const documentContainer = document.createElement("template"); @@ -7,7 +8,7 @@ documentContainer.setAttribute("style", "display: none;"); documentContainer.innerHTML = ` `; diff --git a/yarn.lock b/yarn.lock index 1b7f205fdf..86cb516b9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8739,17 +8739,17 @@ lit-analyzer@1.2.1, lit-analyzer@^1.2.1: vscode-html-languageservice "3.1.0" web-component-analyzer "~1.1.1" -lit-element@2.5.0, lit-element@^2.0.0, lit-element@^2.2.1, lit-element@^2.3.0, lit-element@^2.5.0: - version "2.5.0" - resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.5.0.tgz#218773185d30cab8cb7baabcddd9182f6e7bc14b" - integrity sha512-SS6Bmm7FYw/RVeD6YD3gAjrT0ss6rOQHaacUnDCyVE3sDuUpEmr+Gjl0QUHnD8+0mM5apBbnA60NkFJ2kqcOMA== +lit-element@2.5.1, lit-element@^2.0.0, lit-element@^2.2.1, lit-element@^2.3.0: + version "2.5.1" + resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.5.1.tgz#3fa74b121a6cd22902409ae3859b7847d01aa6b6" + integrity sha512-ogu7PiJTA33bEK0xGu1dmaX5vhcRjBXCFexPja0e7P7jqLhTpNKYRPmE+GmiCaRVAbiQKGkUgkh/i6+bh++dPQ== dependencies: lit-html "^1.1.1" -lit-html@1.4.0, lit-html@^1.0.0, lit-html@^1.1.1, lit-html@^1.1.2, lit-html@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.4.0.tgz#5f18c08d11b52b1d01ceb263df42f115aecef5ca" - integrity sha512-cgaqPSgqHRaTH/P1DnWD/dQxudtrHqD0xo1AoyOGJZir2rXgsvTg77z6Pitwk9B+kL23EakD62HV3x8sT01aWQ== +lit-html@1.4.1, lit-html@^1.0.0, lit-html@^1.1.1, lit-html@^1.1.2: + version "1.4.1" + resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.4.1.tgz#0c6f3ee4ad4eb610a49831787f0478ad8e9ae5e0" + integrity sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA== lit-virtualizer@^0.4.2: version "0.4.2"