From e703750136cc6ebdd50e94258e46023f51bfe661 Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Tue, 14 Jan 2025 21:00:14 +0100 Subject: [PATCH] Add and fix stylistic eslint rules (#23735) * Fix stylistic eslint rules * Fix eslint issues --- cast/src/launcher/layout/hc-cast.ts | 108 ++-- cast/src/launcher/layout/hc-connect.ts | 52 +- cast/src/launcher/layout/hc-layout.ts | 176 +++--- cast/src/receiver/layout/hc-launch-screen.ts | 50 +- cast/src/receiver/layout/hc-lovelace.ts | 34 +- demo/src/configs/demo-configs.ts | 2 +- demo/src/custom-cards/cast-demo-row.ts | 61 +- demo/src/custom-cards/ha-demo-card.ts | 1 + demo/src/stubs/history.ts | 1 + demo/src/stubs/persistent_notification.ts | 1 + demo/src/stubs/template.ts | 1 + demo/src/stubs/todo.ts | 1 + eslint.config.mjs | 1 + .../src/pages/automation/describe-action.ts | 38 +- .../pages/automation/describe-condition.ts | 38 +- .../src/pages/automation/describe-trigger.ts | 38 +- .../src/pages/automation/trace-timeline.ts | 30 +- gallery/src/pages/automation/trace.ts | 42 +- gallery/src/pages/components/ha-alert.ts | 78 ++- gallery/src/pages/components/ha-bar.ts | 26 +- gallery/src/pages/components/ha-chips.ts | 24 +- .../pages/components/ha-circular-progress.ts | 14 +- .../src/pages/components/ha-control-button.ts | 100 ++-- .../components/ha-control-circular-slider.ts | 64 +-- .../components/ha-control-number-buttons.ts | 50 +- .../components/ha-control-select-menu.ts | 58 +- .../src/pages/components/ha-control-select.ts | 70 ++- .../src/pages/components/ha-control-slider.ts | 72 ++- .../src/pages/components/ha-control-switch.ts | 74 ++- .../pages/components/ha-expansion-panel.ts | 12 +- gallery/src/pages/components/ha-faded.ts | 14 +- .../pages/components/ha-hs-color-picker.ts | 40 +- .../src/pages/components/ha-label-badge.ts | 36 +- gallery/src/pages/components/ha-tip.ts | 40 +- .../src/pages/date-time/date-time-numeric.ts | 48 +- .../src/pages/date-time/date-time-seconds.ts | 48 +- .../pages/date-time/date-time-short-year.ts | 48 +- .../src/pages/date-time/date-time-short.ts | 48 +- gallery/src/pages/date-time/date-time.ts | 48 +- gallery/src/pages/date-time/date.ts | 40 +- gallery/src/pages/date-time/time-seconds.ts | 48 +- gallery/src/pages/date-time/time-weekday.ts | 48 +- gallery/src/pages/date-time/time.ts | 48 +- gallery/src/pages/misc/entity-state.ts | 24 +- gallery/src/pages/misc/ha-markdown.ts | 14 +- gallery/src/pages/misc/integration-card.ts | 38 +- hassio/src/addon-store/hassio-addon-store.ts | 58 +- .../addon-view/config/hassio-addon-config.ts | 2 +- .../addon-view/config/hassio-addon-network.ts | 2 +- hassio/src/components/hassio-card-content.ts | 158 +++-- .../components/supervisor-backup-content.ts | 92 ++- .../components/supervisor-formfield-label.ts | 46 +- hassio/src/components/supervisor-metric.ts | 77 ++- hassio/src/hassio-panel.ts | 18 +- .../src/ingress-view/hassio-ingress-view.ts | 80 ++- .../update-available-dashboard.ts | 28 +- src/cast/cast_manager.ts | 2 +- src/common/config/components_with_service.ts | 2 +- src/common/decorators/storage.ts | 6 +- src/common/decorators/transform.ts | 4 +- src/common/dom/ancestors-with-property.ts | 2 +- src/common/dom/apply_themes_on_element.ts | 2 +- src/common/entity/compute_state_name.ts | 2 +- src/common/entity/supports-feature.ts | 4 +- src/common/string/filter/filter.ts | 24 +- src/common/translations/localize.ts | 4 +- src/common/util/group-by.ts | 2 +- .../util/time-cache-entity-promise-func.ts | 4 +- src/components/buttons/ha-progress-button.ts | 100 ++-- src/components/chart/ha-chart-base.ts | 280 +++++---- src/components/chart/ha-sankey-chart.ts | 18 +- .../chart/state-history-chart-line.ts | 6 +- .../chart/state-history-chart-timeline.ts | 14 +- src/components/chart/state-history-charts.ts | 96 ++-- src/components/chart/statistics-chart.ts | 34 +- .../chart/timeline-chart/timeline-color.ts | 2 +- .../data-table/dialog-data-table-settings.ts | 4 +- .../data-table/ha-data-table-icon.ts | 48 +- .../data-table/ha-data-table-labels.ts | 48 +- src/components/data-table/ha-data-table.ts | 17 +- .../device/ha-device-automation-picker.ts | 13 +- src/components/entity/ha-entity-toggle.ts | 38 +- src/components/entity/ha-state-label-badge.ts | 76 ++- src/components/entity/ha-statistics-picker.ts | 25 +- src/components/entity/state-badge.ts | 4 +- src/components/entity/state-info.ts | 107 ++-- src/components/ha-ansi-to-html.ts | 151 +++-- src/components/ha-area-filter.ts | 20 +- src/components/ha-area-floor-picker.ts | 7 +- src/components/ha-assist-chat.ts | 282 +++++---- src/components/ha-assist-pipeline-picker.ts | 14 +- src/components/ha-badge.ts | 212 ++++--- src/components/ha-bar.ts | 38 +- src/components/ha-blueprint-picker.ts | 23 +- src/components/ha-button-menu.ts | 22 +- src/components/ha-button-toggle-group.ts | 148 +++-- src/components/ha-camera-stream.ts | 39 +- src/components/ha-card.ts | 114 ++-- src/components/ha-climate-state.ts | 48 +- src/components/ha-code-editor.ts | 14 +- src/components/ha-color-picker.ts | 30 +- src/components/ha-combo-box.ts | 86 ++- src/components/ha-control-button-group.ts | 80 ++- src/components/ha-control-button.ts | 154 +++-- src/components/ha-control-circular-slider.ts | 288 +++++----- src/components/ha-control-number-buttons.ts | 204 ++++--- src/components/ha-control-select.ts | 290 +++++----- src/components/ha-control-slider.ts | 544 +++++++++--------- src/components/ha-control-switch.ts | 198 ++++--- .../ha-conversation-agent-picker.ts | 28 +- src/components/ha-country-picker.ts | 13 +- src/components/ha-cover-controls.ts | 19 +- src/components/ha-cover-tilt-controls.ts | 19 +- src/components/ha-currency-picker.ts | 13 +- src/components/ha-date-input.ts | 19 +- src/components/ha-date-range-picker.ts | 10 +- src/components/ha-domain-icon.ts | 15 +- src/components/ha-expansion-panel.ts | 148 +++-- src/components/ha-faded.ts | 38 +- src/components/ha-file-upload.ts | 232 ++++---- src/components/ha-filter-blueprints.ts | 2 +- src/components/ha-filter-devices.ts | 2 +- src/components/ha-filter-entities.ts | 2 +- src/components/ha-filter-floor-areas.ts | 4 +- src/components/ha-form/ha-form-boolean.ts | 42 +- src/components/ha-form/ha-form-constant.ts | 20 +- src/components/ha-form/ha-form-expandable.ts | 53 +- src/components/ha-form/ha-form-grid.ts | 32 +- src/components/ha-form/ha-form-integer.ts | 32 +- .../ha-form/ha-form-multi_select.ts | 80 ++- src/components/ha-form/ha-form-string.ts | 50 +- src/components/ha-form/ha-form.ts | 26 +- src/components/ha-form/types.ts | 8 +- src/components/ha-gauge.ts | 84 ++- src/components/ha-grid-size-picker.ts | 2 +- src/components/ha-heading-badge.ts | 51 +- src/components/ha-help-tooltip.ts | 14 +- src/components/ha-hls-player.ts | 38 +- src/components/ha-hs-color-picker.ts | 84 ++- src/components/ha-humidifier-state.ts | 46 +- src/components/ha-icon-button-group.ts | 44 +- src/components/ha-icon-button-toggle.ts | 73 ++- src/components/ha-icon-button.ts | 30 +- src/components/ha-icon-picker.ts | 34 +- src/components/ha-icon.ts | 23 +- src/components/ha-labeled-slider.ts | 45 +- src/components/ha-labels-picker.ts | 4 +- src/components/ha-language-picker.ts | 14 +- src/components/ha-lawn_mower-action-button.ts | 33 +- src/components/ha-logo-svg.ts | 40 +- src/components/ha-markdown.ts | 135 +++-- src/components/ha-md-button-menu.ts | 22 +- src/components/ha-menu-button.ts | 39 +- src/components/ha-metric.ts | 85 ++- src/components/ha-navigation-picker.ts | 32 +- src/components/ha-network.ts | 2 +- .../ha-push-notifications-toggle.ts | 2 +- .../ha-selector/ha-selector-action.ts | 25 +- .../ha-selector/ha-selector-background.ts | 31 +- .../ha-selector/ha-selector-boolean.ts | 41 +- .../ha-selector/ha-selector-condition.ts | 25 +- .../ha-selector/ha-selector-image.ts | 39 +- .../ha-selector/ha-selector-label.ts | 15 +- .../ha-selector/ha-selector-media.ts | 144 +++-- .../ha-selector/ha-selector-number.ts | 46 +- .../ha-selector/ha-selector-selector.ts | 66 ++- .../ha-selector/ha-selector-target.ts | 14 +- .../ha-selector/ha-selector-template.ts | 12 +- .../ha-selector/ha-selector-text.ts | 45 +- .../ha-selector/ha-selector-trigger.ts | 25 +- src/components/ha-service-control.ts | 134 +++-- src/components/ha-settings-row.ts | 183 +++--- src/components/ha-sortable.ts | 6 +- src/components/ha-stt-picker.ts | 14 +- src/components/ha-svg-icon.ts | 54 +- src/components/ha-tab.ts | 94 ++- src/components/ha-theme-picker.ts | 14 +- src/components/ha-timezone-picker.ts | 13 +- src/components/ha-tts-picker.ts | 14 +- src/components/ha-tts-voice-picker.ts | 14 +- src/components/ha-vacuum-state.ts | 9 +- src/components/ha-valve-controls.ts | 25 +- src/components/ha-web-rtc-player.ts | 24 +- src/components/map/ha-entity-marker.ts | 50 +- src/components/map/ha-locations-editor.ts | 20 +- src/components/map/ha-map.ts | 160 +++--- src/components/search-input-outlined.ts | 46 +- src/components/search-input.ts | 48 +- src/components/tile/ha-tile-badge.ts | 46 +- src/components/tile/ha-tile-icon.ts | 70 ++- src/components/tile/ha-tile-image.ts | 49 +- src/components/tile/ha-tile-info.ts | 64 +-- src/components/trace/ha-trace-path-details.ts | 8 +- src/components/trace/hat-graph-branch.ts | 88 ++- src/components/trace/hat-graph-node.ts | 156 +++-- src/components/trace/hat-graph-spacer.ts | 48 +- src/components/trace/hat-trace-timeline.ts | 8 +- src/components/user/ha-person-badge.ts | 63 +- src/components/user/ha-user-badge.ts | 56 +- src/components/user/ha-user-picker.ts | 20 +- src/components/user/ha-users-picker.ts | 21 +- src/data/alarm_control_panel.ts | 4 +- src/data/area_registry.ts | 8 +- src/data/automation.ts | 11 +- src/data/automation_i18n.ts | 6 +- src/data/backup.ts | 8 +- src/data/backup_manager.ts | 16 +- src/data/bootstrap_integrations.ts | 2 +- src/data/cloud.ts | 2 +- src/data/cloud/tts.ts | 4 +- src/data/config.ts | 4 +- src/data/conversation.ts | 6 +- src/data/custom_icons.ts | 4 +- src/data/custom_iconsets.ts | 2 +- src/data/data_table_filters.ts | 17 +- src/data/device_registry.ts | 15 +- src/data/energy.ts | 24 +- src/data/entity_registry.ts | 4 +- src/data/floor_registry.ts | 4 +- src/data/hassio/backup.ts | 8 +- src/data/hassio/docker.ts | 7 +- src/data/hassio/host.ts | 4 +- src/data/hassio/network.ts | 5 +- src/data/hassio/supervisor.ts | 16 +- src/data/history.ts | 10 +- src/data/icons.ts | 31 +- src/data/iconsets.ts | 16 +- src/data/image_upload.ts | 2 +- src/data/integration.ts | 2 +- src/data/integrations.ts | 8 +- src/data/lawn_mower.ts | 6 +- src/data/logbook.ts | 5 +- src/data/lovelace/resource.ts | 8 +- src/data/matter.ts | 4 +- src/data/media-player.ts | 11 +- src/data/number.ts | 4 +- src/data/persistent_notification.ts | 4 +- src/data/recorder.ts | 11 +- src/data/scene.ts | 14 +- src/data/schedule.ts | 2 +- src/data/script.ts | 8 +- src/data/script_i18n.ts | 4 +- src/data/sensor.ts | 8 +- src/data/system_health.ts | 13 +- src/data/thread.ts | 2 +- src/data/trace.ts | 2 +- src/data/weather.ts | 4 +- src/data/zwave_js.ts | 15 +- .../previews/entity-preview-row.ts | 114 ++-- src/dialogs/config-flow/step-flow-loading.ts | 22 +- src/dialogs/enter-code/dialog-enter-code.ts | 117 ++-- src/dialogs/generic/dialog-box.ts | 53 +- src/dialogs/make-dialog-manager.ts | 4 +- .../ha-more-info-control-select-container.ts | 88 ++- .../components/ha-more-info-state-header.ts | 54 +- .../ha-more-info-light-favorite-colors.ts | 152 +++-- .../controls/more-info-automation.ts | 37 +- .../more-info/controls/more-info-camera.ts | 35 +- .../more-info/controls/more-info-counter.ts | 19 +- .../more-info/controls/more-info-date.ts | 17 +- .../more-info/controls/more-info-datetime.ts | 27 +- .../more-info/controls/more-info-image.ts | 21 +- .../controls/more-info-input_datetime.ts | 27 +- .../controls/more-info-lawn_mower.ts | 35 +- .../controls/more-info-media_player.ts | 107 ++-- .../more-info/controls/more-info-person.ts | 31 +- .../more-info/controls/more-info-script.ts | 62 +- .../more-info/controls/more-info-sun.ts | 37 +- .../more-info/controls/more-info-time.ts | 17 +- .../more-info/controls/more-info-timer.ts | 19 +- .../more-info/controls/more-info-update.ts | 175 +++--- .../more-info/controls/more-info-vacuum.ts | 35 +- .../more-info/controls/more-info-weather.ts | 90 ++- src/dialogs/more-info/ha-more-info-dialog.ts | 4 +- .../ha-more-info-history-and-logbook.ts | 21 +- src/dialogs/more-info/ha-more-info-info.ts | 84 ++- .../notification-item-template.ts | 62 +- .../persistent-notification-item.ts | 37 +- src/dialogs/tts-try/dialog-tts-try.ts | 33 +- .../update_backup/dialog-update-backup.ts | 29 +- .../voice-assistant-setup-step-local.ts | 2 +- src/external_app/external_messaging.ts | 6 +- src/fake_data/entity.ts | 6 +- src/fake_data/provide_hass.ts | 6 +- src/layouts/ha-init-page.ts | 56 +- src/layouts/hass-router-page.ts | 5 +- src/layouts/hass-tabs-subpage-data-table.ts | 426 +++++++------- src/layouts/home-assistant-main.ts | 46 +- src/mixins/keyboard-shortcut-mixin.ts | 4 +- src/mixins/prevent-unsaved-mixin.ts | 1 + src/mixins/subscribe-mixin.ts | 6 +- src/onboarding/integration-badge.ts | 54 +- src/onboarding/onboarding-core-config.ts | 96 ++-- src/onboarding/onboarding-integrations.ts | 8 +- src/onboarding/onboarding-loading.ts | 84 ++- src/onboarding/onboarding-welcome-link.ts | 64 +-- src/onboarding/onboarding-welcome-links.ts | 46 +- .../calendar/confirm-event-dialog-box.ts | 67 ++- .../ha-config-application-credentials.ts | 108 ++-- .../config/areas/ha-config-area-page.ts | 4 +- .../config/areas/ha-config-areas-dashboard.ts | 151 +++-- .../action/ha-automation-action-row.ts | 2 +- .../automation/action/ha-automation-action.ts | 82 ++- .../types/ha-automation-action-condition.ts | 12 +- .../types/ha-automation-action-event.ts | 14 +- .../types/ha-automation-action-service.ts | 58 +- .../action/types/ha-automation-action-stop.ts | 15 +- .../ha-automation-action-wait_for_trigger.ts | 23 +- .../add-automation-element-dialog.ts | 4 +- .../condition/ha-automation-condition.ts | 86 ++- .../types/ha-automation-condition-template.ts | 12 +- .../config/automation/ha-automation-picker.ts | 4 +- .../automation/option/ha-automation-option.ts | 82 ++- .../trigger/ha-automation-trigger.ts | 82 ++- .../ha-automation-trigger-conversation.ts | 81 ++- .../types/ha-automation-trigger-event.ts | 13 +- .../types/ha-automation-trigger-tag.ts | 12 +- .../config/ha-backup-config-data.ts | 8 +- .../config/ha-backup-config-schedule.ts | 8 +- .../components/ha-backup-addons-picker.ts | 19 +- .../components/ha-backup-data-picker.ts | 52 +- .../components/ha-backup-formfield-label.ts | 54 +- .../overview/ha-backup-overview-backups.ts | 4 +- .../backup/dialogs/dialog-generate-backup.ts | 4 +- .../backup/dialogs/dialog-restore-backup.ts | 4 +- .../backup/dialogs/dialog-upload-backup.ts | 4 +- .../config/backup/ha-config-backup-backups.ts | 2 +- .../config/backup/ha-config-backup-details.ts | 4 +- src/panels/config/backup/ha-config-backup.ts | 1 - .../config/blueprint/ha-blueprint-overview.ts | 2 +- .../cloud/account/cloud-ice-servers-pref.ts | 47 +- .../config/cloud/account/cloud-remote-pref.ts | 183 +++--- .../config/cloud/account/cloud-tts-pref.ts | 69 ++- .../config/cloud/account/cloud-webhooks.ts | 4 +- .../config/dashboard/dialog-new-dashboard.ts | 4 +- .../config/dashboard/ha-config-dashboard.ts | 2 +- .../device-detail/ha-device-entities-card.ts | 156 +++-- .../ha-device-via-devices-card.ts | 59 +- .../mqtt/mqtt-discovery-payload.ts | 86 ++- .../mqtt/mqtt-messages.ts | 6 +- .../config/devices/ha-config-device-page.ts | 4 +- .../devices/ha-config-devices-dashboard.ts | 6 +- .../config/entities/ha-config-entities.ts | 4 +- src/panels/config/ha-config-section.ts | 168 +++--- src/panels/config/ha-panel-config.ts | 4 +- .../config/hardware/ha-config-hardware.ts | 6 +- .../config/helpers/dialog-helper-detail.ts | 9 +- .../config/helpers/ha-config-helpers.ts | 12 +- src/panels/config/info/ha-config-info.ts | 2 +- .../integrations/dialog-add-integration.ts | 2 +- .../integrations/dialog-yaml-integration.ts | 35 +- .../ha-config-integrations-dashboard.ts | 16 +- .../integrations/ha-config-integrations.ts | 2 +- .../integrations/ha-domain-integrations.ts | 4 +- .../matter-add-device-apple-home.ts | 2 +- .../matter-add-device-generic.ts | 2 +- .../matter-add-device-google-home-fallback.ts | 2 +- .../mqtt/mqtt-subscribe-card.ts | 98 ++-- .../thread/thread-config-panel.ts | 2 +- .../zha/dialog-zha-reconfigure-device.ts | 4 +- .../zha/zha-network-visualization-page.ts | 4 +- .../zwave_js-capability-control-door-lock.ts | 8 +- .../zwave_js/dialog-zwave_js-add-node.ts | 6 +- .../dialog-zwave_js-node-statistics.ts | 2 +- .../zwave_js/dialog-zwave_js-remove-node.ts | 6 +- .../zwave_js/zwave_js-config-dashboard.ts | 2 +- .../zwave_js/zwave_js-custom-param.ts | 66 ++- .../zwave_js/zwave_js-logs.ts | 2 +- src/panels/config/logs/error-log-card.ts | 2 +- src/panels/config/logs/system-log-card.ts | 107 ++-- .../ha-config-lovelace-dashboards.ts | 2 +- .../config/network/ha-config-url-form.ts | 122 ++-- src/panels/config/person/ha-config-person.ts | 41 +- .../repairs/ha-config-repairs-dashboard.ts | 2 +- .../repairs/integrations-startup-time.ts | 40 +- src/panels/config/scene/ha-scene-dashboard.ts | 4 +- src/panels/config/scene/ha-scene-editor.ts | 6 +- .../config/script/ha-script-field-row.ts | 2 +- src/panels/config/script/ha-script-fields.ts | 24 +- src/panels/config/script/ha-script-picker.ts | 4 +- src/panels/config/tags/tag-image.ts | 57 +- .../users/dialog-admin-change-password.ts | 5 +- .../assist-pipeline-detail-config.ts | 51 +- .../assist-pipeline-detail-conversation.ts | 51 +- .../assist-pipeline-detail-stt.ts | 51 +- .../assist-pipeline-detail-tts.ts | 61 +- .../assist-pipeline-detail-wakeword.ts | 60 +- .../config/voice-assistants/assist-pref.ts | 122 ++-- .../voice-assistants/cloud-alexa-pref.ts | 85 ++- .../config/voice-assistants/cloud-discover.ts | 181 +++--- .../voice-assistants/cloud-google-pref.ts | 101 ++-- .../debug/assist-render-pipeline-run.ts | 4 +- .../expose/expose-assistant-icon.ts | 45 +- src/panels/config/zone/ha-config-zone.ts | 109 ++-- .../assist/developer-tools-assist.ts | 4 +- .../event/developer-tools-event.ts | 4 +- .../event/event-subscribe-card.ts | 58 +- .../developer-tools/event/events-list.ts | 30 +- .../state/developer-tools-state.ts | 19 +- .../dialog-statistics-adjust-sum.ts | 3 +- src/panels/logbook/ha-logbook-renderer.ts | 3 +- src/panels/logbook/ha-logbook.ts | 8 +- .../lovelace/badges/hui-entity-badge.ts | 25 +- src/panels/lovelace/badges/hui-error-badge.ts | 37 +- src/panels/lovelace/badges/hui-view-badges.ts | 92 ++- src/panels/lovelace/badges/types.ts | 6 +- .../card-features/hui-card-features.ts | 49 +- .../hui-target-humidity-card-feature.ts | 4 +- src/panels/lovelace/card-features/types.ts | 4 +- .../hui-energy-carbon-consumed-gauge-card.ts | 86 ++- .../cards/energy/hui-energy-compare-card.ts | 14 +- .../energy/hui-energy-date-selection-card.ts | 20 +- .../hui-energy-devices-detail-graph-card.ts | 28 +- .../energy/hui-energy-devices-graph-card.ts | 42 +- .../cards/energy/hui-energy-gas-graph-card.ts | 62 +- .../hui-energy-grid-neutrality-gauge-card.ts | 88 ++- .../hui-energy-self-sufficiency-gauge-card.ts | 88 ++- .../hui-energy-solar-consumed-gauge-card.ts | 88 ++- .../energy/hui-energy-solar-graph-card.ts | 62 +- .../energy/hui-energy-usage-graph-card.ts | 88 ++- .../energy/hui-energy-water-graph-card.ts | 62 +- .../lovelace/cards/hui-alarm-panel-card.ts | 168 +++--- src/panels/lovelace/cards/hui-area-card.ts | 220 ++++--- .../lovelace/cards/hui-calendar-card.ts | 44 +- .../lovelace/cards/hui-empty-state-card.ts | 32 +- .../lovelace/cards/hui-entities-card.ts | 104 ++-- src/panels/lovelace/cards/hui-error-card.ts | 17 +- src/panels/lovelace/cards/hui-gauge-card.ts | 64 +-- src/panels/lovelace/cards/hui-glance-card.ts | 146 +++-- src/panels/lovelace/cards/hui-grid-card.ts | 2 +- src/panels/lovelace/cards/hui-heading-card.ts | 170 +++--- .../lovelace/cards/hui-history-graph-card.ts | 44 +- .../cards/hui-horizontal-stack-card.ts | 2 +- .../lovelace/cards/hui-humidifier-card.ts | 130 +++-- src/panels/lovelace/cards/hui-iframe-card.ts | 47 +- src/panels/lovelace/cards/hui-light-card.ts | 170 +++--- src/panels/lovelace/cards/hui-map-card.ts | 62 +- .../lovelace/cards/hui-markdown-card.ts | 36 +- .../lovelace/cards/hui-media-control-card.ts | 398 +++++++------ src/panels/lovelace/cards/hui-picture-card.ts | 30 +- .../cards/hui-picture-elements-card.ts | 32 +- .../lovelace/cards/hui-picture-entity-card.ts | 84 ++- .../lovelace/cards/hui-picture-glance-card.ts | 142 +++-- .../lovelace/cards/hui-plant-status-card.ts | 146 +++-- .../lovelace/cards/hui-recovery-mode-card.ts | 22 +- src/panels/lovelace/cards/hui-stack-card.ts | 43 +- .../lovelace/cards/hui-starting-card.ts | 37 +- .../cards/hui-statistics-graph-card.ts | 28 +- .../lovelace/cards/hui-thermostat-card.ts | 130 +++-- src/panels/lovelace/cards/hui-tile-card.ts | 269 +++++---- .../lovelace/cards/hui-todo-list-card.ts | 272 +++++---- .../lovelace/cards/hui-vertical-stack-card.ts | 2 +- src/panels/lovelace/cards/types.ts | 20 +- .../lovelace/common/compute-card-grid-size.ts | 4 +- .../common/compute-unused-entities.ts | 4 +- .../directives/action-handler-directive.ts | 1 + src/panels/lovelace/common/find-entities.ts | 4 +- .../common/generate-lovelace-config.ts | 8 +- src/panels/lovelace/common/handle-action.ts | 4 +- .../common/process-config-entities.ts | 2 +- .../lovelace/common/validate-condition.ts | 2 +- .../lovelace/components/hui-action-editor.ts | 78 ++- .../components/hui-badge-edit-mode.ts | 6 +- .../lovelace/components/hui-card-edit-mode.ts | 6 +- .../components/hui-energy-period-selector.ts | 88 ++- .../components/hui-entities-toggle.ts | 24 +- .../lovelace/components/hui-entity-editor.ts | 63 +- .../components/hui-generic-entity-row.ts | 98 ++-- .../lovelace/components/hui-graph-base.ts | 22 +- src/panels/lovelace/components/hui-image.ts | 118 ++-- src/panels/lovelace/components/hui-marquee.ts | 78 ++- .../components/hui-timestamp-display.ts | 11 +- .../components/hui-warning-element.ts | 14 +- .../create-card-feature-element.ts | 2 +- .../create-element/create-element-base.ts | 6 +- .../card-editor/ha-grid-layout-slider.ts | 424 +++++++------- .../card-editor/hui-card-element-editor.ts | 23 +- .../card-editor/hui-entity-picker-table.ts | 16 +- .../types/ha-card-condition-screen.ts | 4 +- .../types/ha-card-condition-state.ts | 4 +- .../types/ha-card-condition-user.ts | 18 +- .../hui-service-button-element-editor.ts | 16 +- .../hui-card-features-editor.ts | 99 ++-- .../hui-entities-card-editor.ts | 4 +- .../hui-generic-entity-row-editor.ts | 2 +- .../hui-heading-badges-editor.ts | 121 ++-- .../hui-state-label-badge-editor.ts | 6 +- src/panels/lovelace/editor/delete-badge.ts | 5 +- src/panels/lovelace/editor/delete-card.ts | 5 +- .../hui-row-element-editor.ts | 2 +- .../hui-header-footer-editor.ts | 52 +- .../lovelace/editor/hui-element-editor.ts | 40 +- .../editor/hui-entities-card-row-editor.ts | 107 ++-- .../hui-picture-elements-card-row-editor.ts | 65 +-- .../lovelace/editor/hui-sub-element-editor.ts | 28 +- src/panels/lovelace/editor/lovelace-path.ts | 8 +- .../hui-section-settings-editor.ts | 4 +- .../show-edit-section-dialog.ts | 4 +- .../hui-dialog-select-dashboard.ts | 2 +- .../unused-entities/hui-unused-entities.ts | 72 ++- .../view-editor/hui-view-background-editor.ts | 13 +- .../view-editor/hui-view-visibility-editor.ts | 14 +- .../lovelace/elements/hui-icon-element.ts | 23 +- .../lovelace/elements/hui-image-element.ts | 33 +- .../elements/hui-service-button-element.ts | 15 +- .../elements/hui-state-icon-element.ts | 24 +- .../elements/hui-state-label-element.ts | 32 +- .../entity-rows/hui-button-entity-row.ts | 18 +- .../entity-rows/hui-climate-entity-row.ts | 14 +- .../entity-rows/hui-cover-entity-row.ts | 20 +- .../entity-rows/hui-datetime-entity-row.ts | 30 +- .../entity-rows/hui-event-entity-row.ts | 26 +- .../entity-rows/hui-humidifier-entity-row.ts | 14 +- .../hui-input-button-entity-row.ts | 18 +- .../hui-input-datetime-entity-row.ts | 30 +- .../hui-input-number-entity-row.ts | 48 +- .../entity-rows/hui-lock-entity-row.ts | 18 +- .../hui-media-player-entity-row.ts | 56 +- .../entity-rows/hui-number-entity-row.ts | 50 +- .../entity-rows/hui-scene-entity-row.ts | 18 +- .../entity-rows/hui-script-entity-row.ts | 18 +- .../entity-rows/hui-select-entity-row.ts | 24 +- .../entity-rows/hui-simple-entity-row.ts | 14 +- .../entity-rows/hui-update-entity-row.ts | 14 +- src/panels/lovelace/entity-rows/types.ts | 6 +- .../header-footer/hui-graph-header-footer.ts | 38 +- .../hui-picture-header-footer.ts | 22 +- src/panels/lovelace/header-footer/types.ts | 2 +- .../hui-entity-heading-badge.ts | 25 +- .../heading-badges/hui-error-heading-badge.ts | 37 +- src/panels/lovelace/heading-badges/types.ts | 4 +- src/panels/lovelace/hui-editor.ts | 2 +- src/panels/lovelace/hui-root.ts | 2 +- .../special-rows/hui-attribute-row.ts | 14 +- .../lovelace/special-rows/hui-button-row.ts | 63 +- .../lovelace/special-rows/hui-cast-row.ts | 84 ++- .../lovelace/special-rows/hui-divider-row.ts | 15 +- .../lovelace/special-rows/hui-section-row.ts | 43 +- .../lovelace/special-rows/hui-text-row.ts | 51 +- .../lovelace/special-rows/hui-weblink-row.ts | 43 +- .../lovelace/strategies/get-strategy.ts | 4 +- .../strategies/iframe/iframe-view-strategy.ts | 4 +- .../strategies/map/map-view-strategy.ts | 4 +- .../original-states-view-strategy.ts | 4 +- src/panels/lovelace/strategies/types.ts | 4 +- src/panels/lovelace/types.ts | 8 +- src/panels/lovelace/views/hui-masonry-view.ts | 125 ++-- src/panels/lovelace/views/hui-panel-view.ts | 51 +- .../lovelace/views/hui-sections-view.ts | 367 ++++++------ src/panels/lovelace/views/hui-sidebar-view.ts | 104 ++-- .../lovelace/views/hui-view-background.ts | 56 +- .../lovelace/views/hui-view-container.ts | 14 +- .../media-browser/ha-bar-media-player.ts | 282 +++++---- src/panels/my/ha-panel-my.ts | 14 +- src/panels/profile/ha-advanced-mode-row.ts | 14 +- src/panels/profile/ha-mfa-modules-card.ts | 24 +- src/panels/profile/ha-pick-theme-row.ts | 56 +- .../profile/ha-push-notifications-row.ts | 12 +- .../polyfills/locale-data-polyfill.ts | 2 +- src/resources/svg-arc.ts | 4 +- ...state-control-alarm_control_panel-modes.ts | 28 +- .../ha-state-control-climate-humidity.ts | 4 +- .../cover/ha-state-control-cover-buttons.ts | 92 ++- .../cover/ha-state-control-cover-position.ts | 30 +- .../cover/ha-state-control-cover-toggle.ts | 74 ++- .../fan/ha-state-control-fan-speed.ts | 49 +- src/state-control/ha-state-control-toggle.ts | 74 ++- .../ha-state-control-humidifier-humidity.ts | 4 +- .../ha-state-control-light-brightness.ts | 32 +- .../lock/ha-state-control-lock-toggle.ts | 96 ++-- .../valve/ha-state-control-valve-buttons.ts | 30 +- .../valve/ha-state-control-valve-position.ts | 30 +- .../valve/ha-state-control-valve-toggle.ts | 74 ++- src/state-summary/state-card-input_number.ts | 48 +- src/state-summary/state-card-input_select.ts | 28 +- src/state-summary/state-card-input_text.ts | 2 +- src/state-summary/state-card-select.ts | 28 +- src/state-summary/state-card-text.ts | 28 +- src/state/hass-base-mixin.ts | 5 + src/state/translations-mixin.ts | 8 +- src/types.ts | 20 +- src/util/hass-media-player-model.ts | 2 +- 582 files changed, 12485 insertions(+), 13451 deletions(-) diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index c2bae5edb9..130926748a 100644 --- a/cast/src/launcher/layout/hc-cast.ts +++ b/cast/src/launcher/layout/hc-cast.ts @@ -3,7 +3,7 @@ import "@material/mwc-list/mwc-list"; import type { ActionDetail } from "@material/mwc-list/mwc-list"; import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js"; import type { Auth, Connection } from "home-assistant-js-websocket"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property, state } from "lit/decorators"; import type { CastManager } from "../../../../src/cast/cast_manager"; @@ -208,69 +208,67 @@ class HcCast extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - .center-item { - display: flex; - justify-content: space-around; - } + static styles = css` + .center-item { + display: flex; + justify-content: space-around; + } - .action-item { - display: flex; - align-items: center; - justify-content: space-between; - } + .action-item { + display: flex; + align-items: center; + justify-content: space-between; + } - .question { - position: relative; - padding: 8px 16px; - } + .question { + position: relative; + padding: 8px 16px; + } - .question:before { - border-radius: 4px; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - pointer-events: none; - content: ""; - background-color: var(--primary-color); - opacity: 0.12; - will-change: opacity; - } + .question:before { + border-radius: 4px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + content: ""; + background-color: var(--primary-color); + opacity: 0.12; + will-change: opacity; + } - .connection, - .connection a { - color: var(--secondary-text-color); - } + .connection, + .connection a { + color: var(--secondary-text-color); + } - mwc-button ha-svg-icon { - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - height: 18px; - } + mwc-button ha-svg-icon { + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + height: 18px; + } - ha-list-item ha-icon, - ha-list-item ha-svg-icon { - padding: 12px; - color: var(--secondary-text-color); - } + ha-list-item ha-icon, + ha-list-item ha-svg-icon { + padding: 12px; + color: var(--secondary-text-color); + } - :host([hide-icons]) ha-icon { - display: none; - } + :host([hide-icons]) ha-icon { + display: none; + } - .spacer { - flex: 1; - } + .spacer { + flex: 1; + } - .card-content a { - color: var(--primary-color); - } - `; - } + .card-content a { + color: var(--primary-color); + } + `; } declare global { diff --git a/cast/src/launcher/layout/hc-connect.ts b/cast/src/launcher/layout/hc-connect.ts index f736b6c7f0..17dee754c7 100644 --- a/cast/src/launcher/layout/hc-connect.ts +++ b/cast/src/launcher/layout/hc-connect.ts @@ -13,7 +13,7 @@ import { ERR_INVALID_HTTPS_TO_HTTP, getAuth, } from "home-assistant-js-websocket"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, state } from "lit/decorators"; import type { CastManager } from "../../../../src/cast/cast_manager"; @@ -293,36 +293,34 @@ export class HcConnect extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - .card-content a { - color: var(--primary-color); - } - .card-actions a { - text-decoration: none; - } - .error { - color: red; - font-weight: bold; - } + static styles = css` + .card-content a { + color: var(--primary-color); + } + .card-actions a { + text-decoration: none; + } + .error { + color: red; + font-weight: bold; + } - .error a { - color: darkred; - } + .error a { + color: darkred; + } - mwc-button ha-svg-icon { - margin-left: 8px; - } + mwc-button ha-svg-icon { + margin-left: 8px; + } - .spacer { - flex: 1; - } + .spacer { + flex: 1; + } - ha-textfield { - width: 100%; - } - `; - } + ha-textfield { + width: 100%; + } + `; } declare global { diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts index 1b8b85e587..87cb2cced1 100644 --- a/cast/src/launcher/layout/hc-layout.ts +++ b/cast/src/launcher/layout/hc-layout.ts @@ -1,6 +1,6 @@ import type { Auth, Connection, HassUser } from "home-assistant-js-websocket"; import { getUser } from "home-assistant-js-websocket"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../../src/components/ha-card"; @@ -63,96 +63,94 @@ class HcLayout extends LitElement { } } - static get styles(): CSSResultGroup { - return css` + static styles = css` + :host { + display: flex; + min-height: 100%; + align-items: center; + justify-content: center; + flex-direction: column; + } + + ha-card { + display: flex; + width: 100%; + max-width: 500px; + } + + .layout { + display: flex; + flex-direction: column; + } + + .card-header { + color: var(--ha-card-header-color, var(--primary-text-color)); + font-family: var(--ha-card-header-font-family, inherit); + font-size: var(--ha-card-header-font-size, 24px); + letter-spacing: -0.012em; + line-height: 32px; + padding: 24px 16px 16px; + display: block; + margin: 0; + } + + .hero { + border-radius: 4px 4px 0 0; + } + .subtitle { + font-size: 14px; + color: var(--secondary-text-color); + line-height: initial; + } + .subtitle a { + color: var(--secondary-text-color); + } + + :host ::slotted(.card-content:not(:first-child)), + slot:not(:first-child)::slotted(.card-content) { + padding-top: 0px; + margin-top: -8px; + } + + :host ::slotted(.section-header) { + font-weight: 500; + padding: 4px 16px; + text-transform: uppercase; + } + + :host ::slotted(.card-content) { + padding: 16px; + flex: 1; + } + + :host ::slotted(.card-actions) { + border-top: 1px solid #e8e8e8; + padding: 5px 16px; + display: flex; + } + + img { + width: 100%; + } + + .footer { + text-align: center; + font-size: 12px; + padding: 8px 0 24px; + color: var(--secondary-text-color); + } + .footer a { + color: var(--secondary-text-color); + } + + @media all and (max-width: 500px) { :host { - display: flex; - min-height: 100%; - align-items: center; - justify-content: center; - flex-direction: column; + justify-content: flex-start; + min-height: 90%; + margin-bottom: 30px; } - - ha-card { - display: flex; - width: 100%; - max-width: 500px; - } - - .layout { - display: flex; - flex-direction: column; - } - - .card-header { - color: var(--ha-card-header-color, var(--primary-text-color)); - font-family: var(--ha-card-header-font-family, inherit); - font-size: var(--ha-card-header-font-size, 24px); - letter-spacing: -0.012em; - line-height: 32px; - padding: 24px 16px 16px; - display: block; - margin: 0; - } - - .hero { - border-radius: 4px 4px 0 0; - } - .subtitle { - font-size: 14px; - color: var(--secondary-text-color); - line-height: initial; - } - .subtitle a { - color: var(--secondary-text-color); - } - - :host ::slotted(.card-content:not(:first-child)), - slot:not(:first-child)::slotted(.card-content) { - padding-top: 0px; - margin-top: -8px; - } - - :host ::slotted(.section-header) { - font-weight: 500; - padding: 4px 16px; - text-transform: uppercase; - } - - :host ::slotted(.card-content) { - padding: 16px; - flex: 1; - } - - :host ::slotted(.card-actions) { - border-top: 1px solid #e8e8e8; - padding: 5px 16px; - display: flex; - } - - img { - width: 100%; - } - - .footer { - text-align: center; - font-size: 12px; - padding: 8px 0 24px; - color: var(--secondary-text-color); - } - .footer a { - color: var(--secondary-text-color); - } - - @media all and (max-width: 500px) { - :host { - justify-content: flex-start; - min-height: 90%; - margin-bottom: 30px; - } - } - `; - } + } + `; } declare global { diff --git a/cast/src/receiver/layout/hc-launch-screen.ts b/cast/src/receiver/layout/hc-launch-screen.ts index b8e738e6c7..cab6840ba4 100644 --- a/cast/src/receiver/layout/hc-launch-screen.ts +++ b/cast/src/receiver/layout/hc-launch-screen.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import type { HomeAssistant } from "../../../../src/types"; @@ -24,31 +24,29 @@ class HcLaunchScreen extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - height: 100vh; - background-color: #f2f4f9; - font-size: 24px; - } - .container { - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - height: 100%; - justify-content: space-evenly; - } - img { - max-width: 80%; - object-fit: cover; - } - .status { - color: #1d2126; - } - `; - } + static styles = css` + :host { + display: block; + height: 100vh; + background-color: #f2f4f9; + font-size: 24px; + } + .container { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + height: 100%; + justify-content: space-evenly; + } + img { + max-width: 80%; + object-fit: cover; + } + .status { + color: #1d2126; + } + `; } declare global { diff --git a/cast/src/receiver/layout/hc-lovelace.ts b/cast/src/receiver/layout/hc-lovelace.ts index b84b052484..c608e8bc06 100644 --- a/cast/src/receiver/layout/hc-lovelace.ts +++ b/cast/src/receiver/layout/hc-lovelace.ts @@ -1,10 +1,4 @@ -import { - css, - type CSSResultGroup, - html, - LitElement, - type TemplateResult, -} from "lit"; +import { css, html, LitElement, type TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../src/common/dom/fire_event"; import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types"; @@ -117,20 +111,18 @@ class HcLovelace extends LitElement { return undefined; } - static get styles(): CSSResultGroup { - return css` - hui-view-container { - display: flex; - position: relative; - min-height: 100vh; - box-sizing: border-box; - } - hui-view { - flex: 1 1 100%; - max-width: 100%; - } - `; - } + static styles = css` + hui-view-container { + display: flex; + position: relative; + min-height: 100vh; + box-sizing: border-box; + } + hui-view { + flex: 1 1 100%; + max-width: 100%; + } + `; } export interface CastViewChanged { diff --git a/demo/src/configs/demo-configs.ts b/demo/src/configs/demo-configs.ts index dc062ddfcf..8bc0f02cf6 100644 --- a/demo/src/configs/demo-configs.ts +++ b/demo/src/configs/demo-configs.ts @@ -3,7 +3,7 @@ import type { Lovelace } from "../../../src/panels/lovelace/types"; import { energyEntities } from "../stubs/entities"; import type { DemoConfig } from "./types"; -export const demoConfigs: Array<() => Promise> = [ +export const demoConfigs: (() => Promise)[] = [ () => import("./sections").then((mod) => mod.demoSections), () => import("./arsaboo").then((mod) => mod.demoArsaboo), () => import("./teachingbirds").then((mod) => mod.demoTeachingbirds), diff --git a/demo/src/custom-cards/cast-demo-row.ts b/demo/src/custom-cards/cast-demo-row.ts index a011cb756e..86bf51035b 100644 --- a/demo/src/custom-cards/cast-demo-row.ts +++ b/demo/src/custom-cards/cast-demo-row.ts @@ -1,5 +1,4 @@ import { mdiTelevision } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import type { CastManager } from "../../../src/cast/cast_manager"; @@ -67,37 +66,35 @@ class CastDemoRow extends LitElement implements LovelaceRow { this.style.display = this._castManager ? "" : "none"; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - } - ha-svg-icon { - padding: 8px; - color: var(--paper-item-icon-color); - } - .flex { - flex: 1; - overflow: hidden; - margin-left: 16px; - display: flex; - justify-content: space-between; - align-items: center; - } - .name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - google-cast-launcher { - cursor: pointer; - display: inline-block; - height: 24px; - width: 24px; - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + } + ha-svg-icon { + padding: 8px; + color: var(--paper-item-icon-color); + } + .flex { + flex: 1; + overflow: hidden; + margin-left: 16px; + display: flex; + justify-content: space-between; + align-items: center; + } + .name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + google-cast-launcher { + cursor: pointer; + display: inline-block; + height: 24px; + width: 24px; + } + `; } declare global { diff --git a/demo/src/custom-cards/ha-demo-card.ts b/demo/src/custom-cards/ha-demo-card.ts index 2a464c2c1b..13f88552f0 100644 --- a/demo/src/custom-cards/ha-demo-card.ts +++ b/demo/src/custom-cards/ha-demo-card.ts @@ -32,6 +32,7 @@ export class HADemoCard extends LitElement implements LovelaceCard { return this._hidden ? 0 : 2; } + // eslint-disable-next-line @typescript-eslint/no-empty-function public setConfig(_config: LovelaceCardConfig) {} protected render() { diff --git a/demo/src/stubs/history.ts b/demo/src/stubs/history.ts index 83cb895e88..4dd809b648 100644 --- a/demo/src/stubs/history.ts +++ b/demo/src/stubs/history.ts @@ -131,6 +131,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => { }); }, 1); + // eslint-disable-next-line @typescript-eslint/no-empty-function return () => {}; } ); diff --git a/demo/src/stubs/persistent_notification.ts b/demo/src/stubs/persistent_notification.ts index 060e660ee2..0aea0897ed 100644 --- a/demo/src/stubs/persistent_notification.ts +++ b/demo/src/stubs/persistent_notification.ts @@ -15,6 +15,7 @@ export const mockPersistentNotification = (hass: MockHomeAssistant) => { }, }, } as PersistentNotificationMessage); + // eslint-disable-next-line @typescript-eslint/no-empty-function return () => {}; }); }; diff --git a/demo/src/stubs/template.ts b/demo/src/stubs/template.ts index 091cff2488..ca77017c1a 100644 --- a/demo/src/stubs/template.ts +++ b/demo/src/stubs/template.ts @@ -11,6 +11,7 @@ export const mockTemplate = (hass: MockHomeAssistant) => { result: msg.template, listeners: { all: false, domains: [], entities: [], time: false }, }); + // eslint-disable-next-line @typescript-eslint/no-empty-function return () => {}; }); }; diff --git a/demo/src/stubs/todo.ts b/demo/src/stubs/todo.ts index e9daab2874..2d30294c18 100644 --- a/demo/src/stubs/todo.ts +++ b/demo/src/stubs/todo.ts @@ -22,5 +22,6 @@ export const mockTodo = (hass: MockHomeAssistant) => { }, ] as TodoItem[], })); + // eslint-disable-next-line @typescript-eslint/no-empty-function hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {}); }; diff --git a/eslint.config.mjs b/eslint.config.mjs index af3ca7abc9..a5986d29af 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -20,6 +20,7 @@ export default [ "airbnb-base", "plugin:@typescript-eslint/recommended", "plugin:@typescript-eslint/strict", + "plugin:@typescript-eslint/stylistic", "plugin:wc/recommended", "plugin:lit/all", "plugin:lit-a11y/recommended", diff --git a/gallery/src/pages/automation/describe-action.ts b/gallery/src/pages/automation/describe-action.ts index 9ea22d5f74..e16cf3df79 100644 --- a/gallery/src/pages/automation/describe-action.ts +++ b/gallery/src/pages/automation/describe-action.ts @@ -177,26 +177,24 @@ export class DemoAutomationDescribeAction extends LitElement { this._action = ev.detail.isValid ? ev.detail.value : undefined; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - .action { - padding: 16px; - display: flex; - align-items: center; - justify-content: space-between; - } - span { - margin-right: 16px; - } - ha-yaml-editor { - width: 50%; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + .action { + padding: 16px; + display: flex; + align-items: center; + justify-content: space-between; + } + span { + margin-right: 16px; + } + ha-yaml-editor { + width: 50%; + } + `; } declare global { diff --git a/gallery/src/pages/automation/describe-condition.ts b/gallery/src/pages/automation/describe-condition.ts index 36b6673f3a..bf37309fdf 100644 --- a/gallery/src/pages/automation/describe-condition.ts +++ b/gallery/src/pages/automation/describe-condition.ts @@ -98,26 +98,24 @@ export class DemoAutomationDescribeCondition extends LitElement { this._condition = ev.detail.isValid ? ev.detail.value : undefined; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - .condition { - padding: 16px; - display: flex; - align-items: center; - justify-content: space-between; - } - span { - margin-right: 16px; - } - ha-yaml-editor { - width: 50%; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + .condition { + padding: 16px; + display: flex; + align-items: center; + justify-content: space-between; + } + span { + margin-right: 16px; + } + ha-yaml-editor { + width: 50%; + } + `; } declare global { diff --git a/gallery/src/pages/automation/describe-trigger.ts b/gallery/src/pages/automation/describe-trigger.ts index 6e3186911c..d02d1a265b 100644 --- a/gallery/src/pages/automation/describe-trigger.ts +++ b/gallery/src/pages/automation/describe-trigger.ts @@ -121,26 +121,24 @@ export class DemoAutomationDescribeTrigger extends LitElement { this._trigger = ev.detail.isValid ? ev.detail.value : undefined; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - .trigger { - padding: 16px; - display: flex; - align-items: center; - justify-content: space-between; - } - span { - margin-right: 16px; - } - ha-yaml-editor { - width: 50%; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + .trigger { + padding: 16px; + display: flex; + align-items: center; + justify-content: space-between; + } + span { + margin-right: 16px; + } + ha-yaml-editor { + width: 50%; + } + `; } declare global { diff --git a/gallery/src/pages/automation/trace-timeline.ts b/gallery/src/pages/automation/trace-timeline.ts index d33b577c77..87cf087da8 100644 --- a/gallery/src/pages/automation/trace-timeline.ts +++ b/gallery/src/pages/automation/trace-timeline.ts @@ -58,22 +58,20 @@ export class DemoAutomationTraceTimeline extends LitElement { hass.updateTranslations("config", "en"); } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px; - } - .card-content { - display: flex; - } - button { - position: absolute; - top: 0; - right: 0; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px; + } + .card-content { + display: flex; + } + button { + position: absolute; + top: 0; + right: 0; + } + `; } declare global { diff --git a/gallery/src/pages/automation/trace.ts b/gallery/src/pages/automation/trace.ts index 2b6549c07f..4952a72455 100644 --- a/gallery/src/pages/automation/trace.ts +++ b/gallery/src/pages/automation/trace.ts @@ -68,28 +68,26 @@ export class DemoAutomationTrace extends LitElement { this._selected = { ...this._selected, [sampleIdx]: ev.detail.path }; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px; - } - .card-content { - display: flex; - } - .card-content > * { - margin-right: 16px; - } - .card-content > *:last-child { - margin-right: 0; - } - button { - position: absolute; - top: 0; - right: 0; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px; + } + .card-content { + display: flex; + } + .card-content > * { + margin-right: 16px; + } + .card-content > *:last-child { + margin-right: 0; + } + button { + position: absolute; + top: 0; + right: 0; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-alert.ts b/gallery/src/pages/components/ha-alert.ts index aa1c304652..ee7cce600d 100644 --- a/gallery/src/pages/components/ha-alert.ts +++ b/gallery/src/pages/components/ha-alert.ts @@ -177,46 +177,44 @@ export class DemoHaAlert extends LitElement { ); } - static get styles() { - return css` - :host { - display: flex; - flex-direction: row; - justify-content: space-between; - } - .dark, - .light { - display: block; - background-color: var(--primary-background-color); - padding: 0 50px; - } - ha-card { - margin: 24px auto; - } - ha-alert { - display: block; - margin: 24px 0; - } - .condition { - padding: 16px; - display: flex; - align-items: center; - justify-content: space-between; - } - .image { - display: inline-flex; - height: 100%; - align-items: center; - } - img { - max-height: 24px; - width: 24px; - } - mwc-button { - --mdc-theme-primary: var(--primary-text-color); - } - `; - } + static styles = css` + :host { + display: flex; + flex-direction: row; + justify-content: space-between; + } + .dark, + .light { + display: block; + background-color: var(--primary-background-color); + padding: 0 50px; + } + ha-card { + margin: 24px auto; + } + ha-alert { + display: block; + margin: 24px 0; + } + .condition { + padding: 16px; + display: flex; + align-items: center; + justify-content: space-between; + } + .image { + display: inline-flex; + height: 100%; + align-items: center; + } + img { + max-height: 24px; + width: 24px; + } + mwc-button { + --mdc-theme-primary: var(--primary-text-color); + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-bar.ts b/gallery/src/pages/components/ha-bar.ts index 31aa5e6f51..510f322b13 100644 --- a/gallery/src/pages/components/ha-bar.ts +++ b/gallery/src/pages/components/ha-bar.ts @@ -63,20 +63,18 @@ export class DemoHaBar extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - .warning { - --ha-bar-primary-color: var(--warning-color); - } - .error { - --ha-bar-primary-color: var(--error-color); - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + .warning { + --ha-bar-primary-color: var(--warning-color); + } + .error { + --ha-bar-primary-color: var(--error-color); + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-chips.ts b/gallery/src/pages/components/ha-chips.ts index 04ea2002ec..e00913fc86 100644 --- a/gallery/src/pages/components/ha-chips.ts +++ b/gallery/src/pages/components/ha-chips.ts @@ -103,19 +103,17 @@ export class DemoHaChips extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - .card-content { - display: flex; - flex-direction: column; - align-items: flex-start; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + .card-content { + display: flex; + flex-direction: column; + align-items: flex-start; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-circular-progress.ts b/gallery/src/pages/components/ha-circular-progress.ts index a3a6763cfd..66873acb32 100644 --- a/gallery/src/pages/components/ha-circular-progress.ts +++ b/gallery/src/pages/components/ha-circular-progress.ts @@ -48,14 +48,12 @@ export class DemoHaCircularProgress extends LitElement { >`; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-control-button.ts b/gallery/src/pages/components/ha-control-button.ts index 247d273988..96f10d9625 100644 --- a/gallery/src/pages/components/ha-control-button.ts +++ b/gallery/src/pages/components/ha-control-button.ts @@ -14,12 +14,12 @@ import "../../../../src/components/ha-card"; import "../../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-control-button-group"; -type Button = { +interface Button { label: string; icon?: string; class?: string; disabled?: boolean; -}; +} const buttons: Button[] = [ { @@ -35,10 +35,10 @@ const buttons: Button[] = [ }, ]; -type ButtonGroup = { +interface ButtonGroup { vertical?: boolean; class?: string; -}; +} const buttonGroups: ButtonGroup[] = [ {}, @@ -137,53 +137,51 @@ export class DemoHaBarButton extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - pre { - margin-top: 0; - margin-bottom: 8px; - } - p { - margin: 0; - } - label { - font-weight: 600; - } - .custom { - --control-button-icon-color: var(--primary-color); - --control-button-background-color: var(--primary-color); - --control-button-background-opacity: 0.2; - --control-button-border-radius: 18px; - height: 100px; - width: 100px; - } - .custom-group { - --control-button-group-thickness: 100px; - --control-button-group-border-radius: 36px; - --control-button-group-spacing: 20px; - } - .custom-group ha-control-button { - --control-button-border-radius: 18px; - --mdc-icon-size: 32px; - } - .vertical-buttons { - height: 300px; - display: flex; - flex-direction: row; - justify-content: space-between; - } - p.title { - margin-bottom: 12px; - } - .vertical-switches > *:not(:last-child) { - margin-right: 4px; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + pre { + margin-top: 0; + margin-bottom: 8px; + } + p { + margin: 0; + } + label { + font-weight: 600; + } + .custom { + --control-button-icon-color: var(--primary-color); + --control-button-background-color: var(--primary-color); + --control-button-background-opacity: 0.2; + --control-button-border-radius: 18px; + height: 100px; + width: 100px; + } + .custom-group { + --control-button-group-thickness: 100px; + --control-button-group-border-radius: 36px; + --control-button-group-spacing: 20px; + } + .custom-group ha-control-button { + --control-button-border-radius: 18px; + --mdc-icon-size: 32px; + } + .vertical-buttons { + height: 300px; + display: flex; + flex-direction: row; + justify-content: space-between; + } + p.title { + margin-bottom: 12px; + } + .vertical-switches > *:not(:last-child) { + margin-right: 4px; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-control-circular-slider.ts b/gallery/src/pages/components/ha-control-circular-slider.ts index ec1561c2fd..bb61e48bc9 100644 --- a/gallery/src/pages/components/ha-control-circular-slider.ts +++ b/gallery/src/pages/components/ha-control-circular-slider.ts @@ -133,39 +133,37 @@ export class DemoHaCircularSlider extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - pre { - margin-top: 0; - margin-bottom: 8px; - } - p { - margin: 0; - } - p.title { - margin-bottom: 12px; - } - ha-control-circular-slider { - --control-circular-slider-color: #ff9800; - } - ha-control-circular-slider[inverted] { - --control-circular-slider-color: #2196f3; - } - ha-control-circular-slider[dual] { - --control-circular-slider-high-color: #2196f3; - --control-circular-slider-low-color: #ff9800; - } - .field { - display: flex; - flex-direction: row; - align-items: center; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + pre { + margin-top: 0; + margin-bottom: 8px; + } + p { + margin: 0; + } + p.title { + margin-bottom: 12px; + } + ha-control-circular-slider { + --control-circular-slider-color: #ff9800; + } + ha-control-circular-slider[inverted] { + --control-circular-slider-color: #2196f3; + } + ha-control-circular-slider[dual] { + --control-circular-slider-high-color: #2196f3; + --control-circular-slider-low-color: #ff9800; + } + .field { + display: flex; + flex-direction: row; + align-items: center; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-control-number-buttons.ts b/gallery/src/pages/components/ha-control-number-buttons.ts index 43c4ccc622..29496fc689 100644 --- a/gallery/src/pages/components/ha-control-number-buttons.ts +++ b/gallery/src/pages/components/ha-control-number-buttons.ts @@ -73,32 +73,30 @@ export class DemoHarControlNumberButtons extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - pre { - margin-top: 0; - margin-bottom: 8px; - } - p { - margin: 0; - } - label { - font-weight: 600; - } - .custom { - color: #2196f3; - --control-number-buttons-color: #2196f3; - --control-number-buttons-background-color: #2196f3; - --control-number-buttons-background-opacity: 0.1; - --control-number-buttons-thickness: 100px; - --control-number-buttons-border-radius: 36px; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + pre { + margin-top: 0; + margin-bottom: 8px; + } + p { + margin: 0; + } + label { + font-weight: 600; + } + .custom { + color: #2196f3; + --control-number-buttons-color: #2196f3; + --control-number-buttons-background-color: #2196f3; + --control-number-buttons-background-opacity: 0.1; + --control-number-buttons-thickness: 100px; + --control-number-buttons-border-radius: 36px; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-control-select-menu.ts b/gallery/src/pages/components/ha-control-select-menu.ts index 30ae5f63e1..638f682b0c 100644 --- a/gallery/src/pages/components/ha-control-select-menu.ts +++ b/gallery/src/pages/components/ha-control-select-menu.ts @@ -8,19 +8,19 @@ import "../../../../src/components/ha-control-select-menu"; import "../../../../src/components/ha-list-item"; import "../../../../src/components/ha-svg-icon"; -type SelectMenuOptions = { +interface SelectMenuOptions { label: string; value: string; icon?: string; -}; +} -type SelectMenu = { +interface SelectMenu { label: string; icon: string; class?: string; disabled?: boolean; options: SelectMenuOptions[]; -}; +} const selects: SelectMenu[] = [ { @@ -112,32 +112,30 @@ export class DemoHaControlSelectMenu extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - pre { - margin-top: 0; - margin-bottom: 8px; - } - p { - margin: 0; - } - label { - font-weight: 600; - } - .custom { - --control-button-icon-color: var(--primary-color); - --control-button-background-color: var(--primary-color); - --control-button-background-opacity: 0.2; - --control-button-border-radius: 18px; - height: 100px; - width: 100px; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + pre { + margin-top: 0; + margin-bottom: 8px; + } + p { + margin: 0; + } + label { + font-weight: 600; + } + .custom { + --control-button-icon-color: var(--primary-color); + --control-button-background-color: var(--primary-color); + --control-button-background-opacity: 0.2; + --control-button-border-radius: 18px; + height: 100px; + width: 100px; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-control-select.ts b/gallery/src/pages/components/ha-control-select.ts index 11cc463208..f3887d0144 100644 --- a/gallery/src/pages/components/ha-control-select.ts +++ b/gallery/src/pages/components/ha-control-select.ts @@ -168,42 +168,40 @@ export class DemoHaControlSelect extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - pre { - margin-top: 0; - margin-bottom: 8px; - } - p { - margin: 0; - } - label { - font-weight: 600; - } - .custom { - --mdc-icon-size: 24px; - --control-select-color: var(--state-fan-active-color); - --control-select-thickness: 130px; - --control-select-border-radius: 36px; - } - .vertical-selects { - height: 300px; - display: flex; - flex-direction: row; - justify-content: space-between; - } - p.title { - margin-bottom: 12px; - } - .vertical-selects > *:not(:last-child) { - margin-right: 4px; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + pre { + margin-top: 0; + margin-bottom: 8px; + } + p { + margin: 0; + } + label { + font-weight: 600; + } + .custom { + --mdc-icon-size: 24px; + --control-select-color: var(--state-fan-active-color); + --control-select-thickness: 130px; + --control-select-border-radius: 36px; + } + .vertical-selects { + height: 300px; + display: flex; + flex-direction: row; + justify-content: space-between; + } + p.title { + margin-bottom: 12px; + } + .vertical-selects > *:not(:last-child) { + margin-right: 4px; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-control-slider.ts b/gallery/src/pages/components/ha-control-slider.ts index 1202137e76..b4af37cb67 100644 --- a/gallery/src/pages/components/ha-control-slider.ts +++ b/gallery/src/pages/components/ha-control-slider.ts @@ -131,43 +131,41 @@ export class DemoHaBarSlider extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - pre { - margin-top: 0; - margin-bottom: 8px; - } - p { - margin: 0; - } - label { - font-weight: 600; - } - .custom { - --control-slider-color: #ffcf4c; - --control-slider-background: #ffcf4c; - --control-slider-background-opacity: 0.2; - --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; - } - .vertical-sliders { - height: 300px; - display: flex; - flex-direction: row; - justify-content: space-between; - } - p.title { - margin-bottom: 12px; - } - .vertical-sliders > *:not(:last-child) { - margin-right: 4px; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + pre { + margin-top: 0; + margin-bottom: 8px; + } + p { + margin: 0; + } + label { + font-weight: 600; + } + .custom { + --control-slider-color: #ffcf4c; + --control-slider-background: #ffcf4c; + --control-slider-background-opacity: 0.2; + --control-slider-thickness: 130px; + --control-slider-border-radius: 36px; + } + .vertical-sliders { + height: 300px; + display: flex; + flex-direction: row; + justify-content: space-between; + } + p.title { + margin-bottom: 12px; + } + .vertical-sliders > *:not(:last-child) { + margin-right: 4px; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-control-switch.ts b/gallery/src/pages/components/ha-control-switch.ts index 206155490a..99ec957e9b 100644 --- a/gallery/src/pages/components/ha-control-switch.ts +++ b/gallery/src/pages/components/ha-control-switch.ts @@ -99,44 +99,42 @@ export class DemoHaControlSwitch extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - pre { - margin-top: 0; - margin-bottom: 8px; - } - p { - margin: 0; - } - label { - font-weight: 600; - } - .custom { - --control-switch-on-color: var(--green-color); - --control-switch-off-color: var(--red-color); - --control-switch-thickness: 130px; - --control-switch-border-radius: 36px; - --control-switch-padding: 6px; - --mdc-icon-size: 24px; - } - .vertical-switches { - height: 300px; - display: flex; - flex-direction: row; - justify-content: space-between; - } - p.title { - margin-bottom: 12px; - } - .vertical-switches > *:not(:last-child) { - margin-right: 4px; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + pre { + margin-top: 0; + margin-bottom: 8px; + } + p { + margin: 0; + } + label { + font-weight: 600; + } + .custom { + --control-switch-on-color: var(--green-color); + --control-switch-off-color: var(--red-color); + --control-switch-thickness: 130px; + --control-switch-border-radius: 36px; + --control-switch-padding: 6px; + --mdc-icon-size: 24px; + } + .vertical-switches { + height: 300px; + display: flex; + flex-direction: row; + justify-content: space-between; + } + p.title { + margin-bottom: 12px; + } + .vertical-switches > *:not(:last-child) { + margin-right: 4px; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-expansion-panel.ts b/gallery/src/pages/components/ha-expansion-panel.ts index 5896ba08ff..0fbbc69694 100644 --- a/gallery/src/pages/components/ha-expansion-panel.ts +++ b/gallery/src/pages/components/ha-expansion-panel.ts @@ -143,13 +143,11 @@ export class DemoHaExpansionPanel extends LitElement { `; } - static get styles() { - return css` - ha-expansion-panel { - margin: -16px; - } - `; - } + static styles = css` + ha-expansion-panel { + margin: -16px; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-faded.ts b/gallery/src/pages/components/ha-faded.ts index e8d66775a5..0664437e30 100644 --- a/gallery/src/pages/components/ha-faded.ts +++ b/gallery/src/pages/components/ha-faded.ts @@ -61,14 +61,12 @@ export class DemoHaFaded extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-hs-color-picker.ts b/gallery/src/pages/components/ha-hs-color-picker.ts index fb69faca00..c97ec7c8df 100644 --- a/gallery/src/pages/components/ha-hs-color-picker.ts +++ b/gallery/src/pages/components/ha-hs-color-picker.ts @@ -91,27 +91,25 @@ export class DemoHaHsColorPicker extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - .card-content { - display: flex; - align-items: center; - flex-direction: column; - } - ha-hs-color-picker { - width: 400px; - } - .value { - font-size: 22px; - font-weight: bold; - margin: 0 0 12px 0; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + .card-content { + display: flex; + align-items: center; + flex-direction: column; + } + ha-hs-color-picker { + width: 400px; + } + .value { + font-size: 22px; + font-weight: bold; + margin: 0 0 12px 0; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-label-badge.ts b/gallery/src/pages/components/ha-label-badge.ts index 7bce55ef56..30fdf9e6a6 100644 --- a/gallery/src/pages/components/ha-label-badge.ts +++ b/gallery/src/pages/components/ha-label-badge.ts @@ -95,25 +95,23 @@ export class DemoHaLabelBadge extends LitElement { `; } - static get styles() { - return css` - ha-card { - max-width: 600px; - margin: 24px auto; - } - pre { - margin-left: 16px; - background-color: var(--markdown-code-background-color); - padding: 8px; - } - .badge { - display: flex; - flex-direction: row; - margin-bottom: 16px; - align-items: center; - } - `; - } + static styles = css` + ha-card { + max-width: 600px; + margin: 24px auto; + } + pre { + margin-left: 16px; + background-color: var(--markdown-code-background-color); + padding: 8px; + } + .badge { + display: flex; + flex-direction: row; + margin-bottom: 16px; + align-items: center; + } + `; } declare global { diff --git a/gallery/src/pages/components/ha-tip.ts b/gallery/src/pages/components/ha-tip.ts index b9d7bdfa7f..7e3a008a0c 100644 --- a/gallery/src/pages/components/ha-tip.ts +++ b/gallery/src/pages/components/ha-tip.ts @@ -48,27 +48,25 @@ export class DemoHaTip extends LitElement { ); } - static get styles() { - return css` - :host { - display: flex; - flex-direction: row; - justify-content: space-between; - } - .dark, - .light { - display: block; - background-color: var(--primary-background-color); - padding: 0 50px; - } - ha-tip { - margin-bottom: 14px; - } - ha-card { - margin: 24px auto; - } - `; - } + static styles = css` + :host { + display: flex; + flex-direction: row; + justify-content: space-between; + } + .dark, + .light { + display: block; + background-color: var(--primary-background-color); + padding: 0 50px; + } + ha-tip { + margin-bottom: 14px; + } + ha-card { + margin: 24px auto; + } + `; } declare global { diff --git a/gallery/src/pages/date-time/date-time-numeric.ts b/gallery/src/pages/date-time/date-time-numeric.ts index 5bb37c758d..a1ead031b8 100644 --- a/gallery/src/pages/date-time/date-time-numeric.ts +++ b/gallery/src/pages/date-time/date-time-numeric.ts @@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeNumeric extends LitElement { `; } - static get styles() { - return css` - ha-control-select { - max-width: 800px; - margin: 12px auto; - } - .header { - font-weight: bold; - } - .center { - text-align: center; - } - .container { - max-width: 900px; - margin: 12px auto; - display: flex; - align-items: center; - justify-content: space-evenly; - } + static styles = css` + ha-control-select { + max-width: 800px; + margin: 12px auto; + } + .header { + font-weight: bold; + } + .center { + text-align: center; + } + .container { + max-width: 900px; + margin: 12px auto; + display: flex; + align-items: center; + justify-content: space-evenly; + } - .container > div { - flex-grow: 1; - width: 20%; - } - `; - } + .container > div { + flex-grow: 1; + width: 20%; + } + `; } declare global { diff --git a/gallery/src/pages/date-time/date-time-seconds.ts b/gallery/src/pages/date-time/date-time-seconds.ts index 3e21900722..0ebb94d07c 100644 --- a/gallery/src/pages/date-time/date-time-seconds.ts +++ b/gallery/src/pages/date-time/date-time-seconds.ts @@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeSeconds extends LitElement { `; } - static get styles() { - return css` - ha-control-select { - max-width: 800px; - margin: 12px auto; - } - .header { - font-weight: bold; - } - .center { - text-align: center; - } - .container { - max-width: 900px; - margin: 12px auto; - display: flex; - align-items: center; - justify-content: space-evenly; - } + static styles = css` + ha-control-select { + max-width: 800px; + margin: 12px auto; + } + .header { + font-weight: bold; + } + .center { + text-align: center; + } + .container { + max-width: 900px; + margin: 12px auto; + display: flex; + align-items: center; + justify-content: space-evenly; + } - .container > div { - flex-grow: 1; - width: 20%; - } - `; - } + .container > div { + flex-grow: 1; + width: 20%; + } + `; } declare global { diff --git a/gallery/src/pages/date-time/date-time-short-year.ts b/gallery/src/pages/date-time/date-time-short-year.ts index f344d0c927..3c0e5b651b 100644 --- a/gallery/src/pages/date-time/date-time-short-year.ts +++ b/gallery/src/pages/date-time/date-time-short-year.ts @@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeShortYear extends LitElement { `; } - static get styles() { - return css` - ha-control-select { - max-width: 800px; - margin: 12px auto; - } - .header { - font-weight: bold; - } - .center { - text-align: center; - } - .container { - max-width: 900px; - margin: 12px auto; - display: flex; - align-items: center; - justify-content: space-evenly; - } + static styles = css` + ha-control-select { + max-width: 800px; + margin: 12px auto; + } + .header { + font-weight: bold; + } + .center { + text-align: center; + } + .container { + max-width: 900px; + margin: 12px auto; + display: flex; + align-items: center; + justify-content: space-evenly; + } - .container > div { - flex-grow: 1; - width: 20%; - } - `; - } + .container > div { + flex-grow: 1; + width: 20%; + } + `; } declare global { diff --git a/gallery/src/pages/date-time/date-time-short.ts b/gallery/src/pages/date-time/date-time-short.ts index 4078470210..9d22f9b3de 100644 --- a/gallery/src/pages/date-time/date-time-short.ts +++ b/gallery/src/pages/date-time/date-time-short.ts @@ -100,32 +100,30 @@ export class DemoDateTimeDateTimeShort extends LitElement { `; } - static get styles() { - return css` - ha-control-select { - max-width: 800px; - margin: 12px auto; - } - .header { - font-weight: bold; - } - .center { - text-align: center; - } - .container { - max-width: 900px; - margin: 12px auto; - display: flex; - align-items: center; - justify-content: space-evenly; - } + static styles = css` + ha-control-select { + max-width: 800px; + margin: 12px auto; + } + .header { + font-weight: bold; + } + .center { + text-align: center; + } + .container { + max-width: 900px; + margin: 12px auto; + display: flex; + align-items: center; + justify-content: space-evenly; + } - .container > div { - flex-grow: 1; - width: 20%; - } - `; - } + .container > div { + flex-grow: 1; + width: 20%; + } + `; } declare global { diff --git a/gallery/src/pages/date-time/date-time.ts b/gallery/src/pages/date-time/date-time.ts index cbdaf51366..d75c5d2459 100644 --- a/gallery/src/pages/date-time/date-time.ts +++ b/gallery/src/pages/date-time/date-time.ts @@ -100,32 +100,30 @@ export class DemoDateTimeDateTime extends LitElement { `; } - static get styles() { - return css` - ha-control-select { - max-width: 800px; - margin: 12px auto; - } - .header { - font-weight: bold; - } - .center { - text-align: center; - } - .container { - max-width: 900px; - margin: 12px auto; - display: flex; - align-items: center; - justify-content: space-evenly; - } + static styles = css` + ha-control-select { + max-width: 800px; + margin: 12px auto; + } + .header { + font-weight: bold; + } + .center { + text-align: center; + } + .container { + max-width: 900px; + margin: 12px auto; + display: flex; + align-items: center; + justify-content: space-evenly; + } - .container > div { - flex-grow: 1; - width: 20%; - } - `; - } + .container > div { + flex-grow: 1; + width: 20%; + } + `; } declare global { diff --git a/gallery/src/pages/date-time/date.ts b/gallery/src/pages/date-time/date.ts index 805460720f..dd115bf25d 100644 --- a/gallery/src/pages/date-time/date.ts +++ b/gallery/src/pages/date-time/date.ts @@ -90,28 +90,26 @@ export class DemoDateTimeDate extends LitElement { `; } - static get styles() { - return css` - .header { - font-weight: bold; - } - .center { - text-align: center; - } - .container { - max-width: 600px; - margin: 12px auto; - display: flex; - align-items: center; - justify-content: space-evenly; - } + static styles = css` + .header { + font-weight: bold; + } + .center { + text-align: center; + } + .container { + max-width: 600px; + margin: 12px auto; + display: flex; + align-items: center; + justify-content: space-evenly; + } - .container > div { - flex-grow: 1; - width: 20%; - } - `; - } + .container > div { + flex-grow: 1; + width: 20%; + } + `; } declare global { diff --git a/gallery/src/pages/date-time/time-seconds.ts b/gallery/src/pages/date-time/time-seconds.ts index 2faaed0010..a00c72a939 100644 --- a/gallery/src/pages/date-time/time-seconds.ts +++ b/gallery/src/pages/date-time/time-seconds.ts @@ -100,32 +100,30 @@ export class DemoDateTimeTimeSeconds extends LitElement { `; } - static get styles() { - return css` - ha-control-select { - max-width: 800px; - margin: 12px auto; - } - .header { - font-weight: bold; - } - .center { - text-align: center; - } - .container { - max-width: 600px; - margin: 12px auto; - display: flex; - align-items: center; - justify-content: space-evenly; - } + static styles = css` + ha-control-select { + max-width: 800px; + margin: 12px auto; + } + .header { + font-weight: bold; + } + .center { + text-align: center; + } + .container { + max-width: 600px; + margin: 12px auto; + display: flex; + align-items: center; + justify-content: space-evenly; + } - .container > div { - flex-grow: 1; - width: 20%; - } - `; - } + .container > div { + flex-grow: 1; + width: 20%; + } + `; } declare global { diff --git a/gallery/src/pages/date-time/time-weekday.ts b/gallery/src/pages/date-time/time-weekday.ts index 93c63939ac..1299324d72 100644 --- a/gallery/src/pages/date-time/time-weekday.ts +++ b/gallery/src/pages/date-time/time-weekday.ts @@ -100,32 +100,30 @@ export class DemoDateTimeTimeWeekday extends LitElement { `; } - static get styles() { - return css` - ha-control-select { - max-width: 800px; - margin: 12px auto; - } - .header { - font-weight: bold; - } - .center { - text-align: center; - } - .container { - max-width: 800px; - margin: 12px auto; - display: flex; - align-items: center; - justify-content: space-evenly; - } + static styles = css` + ha-control-select { + max-width: 800px; + margin: 12px auto; + } + .header { + font-weight: bold; + } + .center { + text-align: center; + } + .container { + max-width: 800px; + margin: 12px auto; + display: flex; + align-items: center; + justify-content: space-evenly; + } - .container > div { - flex-grow: 1; - width: 20%; - } - `; - } + .container > div { + flex-grow: 1; + width: 20%; + } + `; } declare global { diff --git a/gallery/src/pages/date-time/time.ts b/gallery/src/pages/date-time/time.ts index 83df510a7a..0654d838b0 100644 --- a/gallery/src/pages/date-time/time.ts +++ b/gallery/src/pages/date-time/time.ts @@ -100,32 +100,30 @@ export class DemoDateTimeTime extends LitElement { `; } - static get styles() { - return css` - ha-control-select { - max-width: 800px; - margin: 12px auto; - } - .header { - font-weight: bold; - } - .center { - text-align: center; - } - .container { - max-width: 600px; - margin: 12px auto; - display: flex; - align-items: center; - justify-content: space-evenly; - } + static styles = css` + ha-control-select { + max-width: 800px; + margin: 12px auto; + } + .header { + font-weight: bold; + } + .center { + text-align: center; + } + .container { + max-width: 600px; + margin: 12px auto; + display: flex; + align-items: center; + justify-content: space-evenly; + } - .container > div { - flex-grow: 1; - width: 20%; - } - `; - } + .container > div { + flex-grow: 1; + width: 20%; + } + `; } declare global { diff --git a/gallery/src/pages/misc/entity-state.ts b/gallery/src/pages/misc/entity-state.ts index edf541b9b3..d23fb48083 100644 --- a/gallery/src/pages/misc/entity-state.ts +++ b/gallery/src/pages/misc/entity-state.ts @@ -321,13 +321,13 @@ function createEntity( }; } -type EntityRowData = { +interface EntityRowData { stateObj: HassEntity; entity_id: string; state: string; device_class?: string; domain: string; -}; +} function createRowData(stateObj: HassEntity): EntityRowData { return { @@ -429,17 +429,15 @@ export class DemoEntityState extends LitElement { `; } - static get styles() { - return css` - .color { - display: block; - height: 20px; - width: 20px; - border-radius: 10px; - background-color: rgb(--color); - } - `; - } + static styles = css` + .color { + display: block; + height: 20px; + width: 20px; + border-radius: 10px; + background-color: rgb(--color); + } + `; } declare global { diff --git a/gallery/src/pages/misc/ha-markdown.ts b/gallery/src/pages/misc/ha-markdown.ts index 600a9a4f02..3542b847e0 100644 --- a/gallery/src/pages/misc/ha-markdown.ts +++ b/gallery/src/pages/misc/ha-markdown.ts @@ -76,14 +76,12 @@ export class DemoMiscMarkdown extends LitElement { `; } - static get styles() { - return css` - ha-card { - margin: 12px; - padding: 12px; - } - `; - } + static styles = css` + ha-card { + margin: 12px; + padding: 12px; + } + `; } declare global { diff --git a/gallery/src/pages/misc/integration-card.ts b/gallery/src/pages/misc/integration-card.ts index bf71736163..f75826fcc6 100644 --- a/gallery/src/pages/misc/integration-card.ts +++ b/gallery/src/pages/misc/integration-card.ts @@ -135,12 +135,12 @@ const configFlows: DataEntryFlowProgressExtended[] = [ }, ]; -const configEntries: Array<{ +const configEntries: { items: ConfigEntryExtended[]; is_custom?: boolean; disabled?: boolean; highlight?: string; -}> = [ +}[] = [ { items: [loadedEntry] }, { items: [configPanelEntry] }, { items: [optionsFlowEntry] }, @@ -349,26 +349,24 @@ export class DemoIntegrationCard extends LitElement { this.isCloud = !this.isCloud; } - static get styles() { - return css` - .container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-gap: 8px 8px; - padding: 8px 16px 16px; - margin-bottom: 16px; - } + static styles = css` + .container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-gap: 8px 8px; + padding: 8px 16px 16px; + margin-bottom: 16px; + } - .container > * { - max-width: 500px; - } + .container > * { + max-width: 500px; + } - ha-formfield { - margin: 8px 0; - display: block; - } - `; - } + ha-formfield { + margin: 8px 0; + display: block; + } + `; } declare global { diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts index 66aaf84cb2..e33ec23208 100644 --- a/hassio/src/addon-store/hassio-addon-store.ts +++ b/hassio/src/addon-store/hassio-addon-store.ts @@ -1,7 +1,7 @@ import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -211,35 +211,33 @@ export class HassioAddonStore extends LitElement { this._filter = e.detail.value; } - static get styles(): CSSResultGroup { - return css` - hassio-addon-repository { - margin-top: 24px; - } - .search { - position: sticky; - top: 0; - z-index: 2; - } - search-input { - display: block; - --mdc-text-field-fill-color: var(--sidebar-background-color); - --mdc-text-field-idle-line-color: var(--divider-color); - } - .advanced { - padding: 12px; - display: flex; - flex-wrap: wrap; - color: var(--primary-text-color); - } - .advanced a { - margin-left: 0.5em; - margin-inline-start: 0.5em; - margin-inline-end: initial; - color: var(--primary-color); - } - `; - } + static styles = css` + hassio-addon-repository { + margin-top: 24px; + } + .search { + position: sticky; + top: 0; + z-index: 2; + } + search-input { + display: block; + --mdc-text-field-fill-color: var(--sidebar-background-color); + --mdc-text-field-idle-line-color: var(--divider-color); + } + .advanced { + padding: 12px; + display: flex; + flex-wrap: wrap; + color: var(--primary-text-color); + } + .advanced a { + margin-left: 0.5em; + margin-inline-start: 0.5em; + margin-inline-end: initial; + color: var(--primary-color); + } + `; } declare global { diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts index 39c6bb0e72..b7717f0d6e 100644 --- a/hassio/src/addon-view/config/hassio-addon-config.ts +++ b/hassio/src/addon-view/config/hassio-addon-config.ts @@ -299,7 +299,7 @@ class HassioAddonConfig extends LitElement { if (this.addon.schema && this._canShowSchema && !this._yamlMode) { this._valid = true; this._configHasChanged = true; - this._options! = ev.detail.value; + this._options = ev.detail.value; } else { this._configHasChanged = true; this._valid = ev.detail.isValid; diff --git a/hassio/src/addon-view/config/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts index 5cad242dfc..96d5d2f307 100644 --- a/hassio/src/addon-view/config/hassio-addon-network.ts +++ b/hassio/src/addon-view/config/hassio-addon-network.ts @@ -151,7 +151,7 @@ class HassioAddonNetwork extends LitElement { private async _configChanged(ev: CustomEvent): Promise { this._configHasChanged = true; - this._config! = ev.detail.value; + this._config = ev.detail.value; } private async _resetTapped(ev: CustomEvent): Promise { diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts index 8f0b9fc123..dc40207d98 100644 --- a/hassio/src/components/hassio-card-content.ts +++ b/hassio/src/components/hassio-card-content.ts @@ -1,5 +1,5 @@ import { mdiHelpCircle } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../src/components/ha-svg-icon"; @@ -64,86 +64,84 @@ class HassioCardContent extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - direction: ltr; - } + static styles = css` + :host { + direction: ltr; + } - ha-svg-icon { - margin-right: 24px; - margin-left: 8px; - margin-top: 12px; - float: left; - color: var(--secondary-text-color); - } - ha-svg-icon.update { - color: var(--warning-color); - } - ha-svg-icon.running, - ha-svg-icon.installed { - color: var(--success-color); - } - ha-svg-icon.hassupdate, - ha-svg-icon.backup { - color: var(--paper-item-icon-color); - } - ha-svg-icon.not_available { - color: var(--error-color); - } - .title { - color: var(--primary-text-color); - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - } - .addition { - color: var(--secondary-text-color); - overflow: hidden; - position: relative; - height: 2.4em; - line-height: 1.2em; - } - .icon_image img { - max-height: 40px; - max-width: 40px; - margin-top: 4px; - margin-right: 16px; - float: left; - } - .icon_image.stopped, - .icon_image.not_available { - filter: grayscale(1); - } - .dot { - position: absolute; - background-color: var(--warning-color); - width: 12px; - height: 12px; - top: 8px; - right: 8px; - border-radius: 50%; - } - .topbar { - position: absolute; - width: 100%; - height: 2px; - top: 0; - left: 0; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - } - .topbar.installed { - background-color: var(--primary-color); - } - .topbar.update { - background-color: var(--accent-color); - } - .topbar.unavailable { - background-color: var(--error-color); - } - `; - } + ha-svg-icon { + margin-right: 24px; + margin-left: 8px; + margin-top: 12px; + float: left; + color: var(--secondary-text-color); + } + ha-svg-icon.update { + color: var(--warning-color); + } + ha-svg-icon.running, + ha-svg-icon.installed { + color: var(--success-color); + } + ha-svg-icon.hassupdate, + ha-svg-icon.backup { + color: var(--paper-item-icon-color); + } + ha-svg-icon.not_available { + color: var(--error-color); + } + .title { + color: var(--primary-text-color); + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .addition { + color: var(--secondary-text-color); + overflow: hidden; + position: relative; + height: 2.4em; + line-height: 1.2em; + } + .icon_image img { + max-height: 40px; + max-width: 40px; + margin-top: 4px; + margin-right: 16px; + float: left; + } + .icon_image.stopped, + .icon_image.not_available { + filter: grayscale(1); + } + .dot { + position: absolute; + background-color: var(--warning-color); + width: 12px; + height: 12px; + top: 8px; + right: 8px; + border-radius: 50%; + } + .topbar { + position: absolute; + width: 100%; + height: 2px; + top: 0; + left: 0; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + } + .topbar.installed { + background-color: var(--primary-color); + } + .topbar.update { + background-color: var(--accent-color); + } + .topbar.unavailable { + background-color: var(--error-color); + } + `; } declare global { diff --git a/hassio/src/components/supervisor-backup-content.ts b/hassio/src/components/supervisor-backup-content.ts index babc4a7bdd..15fde4f3b0 100644 --- a/hassio/src/components/supervisor-backup-content.ts +++ b/hassio/src/components/supervisor-backup-content.ts @@ -1,5 +1,5 @@ import { mdiFolder, mdiPuzzle } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import { atLeastVersion } from "../../../src/common/config/version"; @@ -283,52 +283,50 @@ export class SupervisorBackupContent extends LitElement { this.homeAssistant = !this.homeAssistant; } - static get styles(): CSSResultGroup { - return css` - .partial-picker ha-formfield { - display: block; - } - .partial-picker ha-checkbox { - --mdc-checkbox-touch-target-size: 32px; - } - .partial-picker { - display: block; - margin: 0px -6px; - } - supervisor-formfield-label { - display: inline-flex; - align-items: center; - } - hr { - border-color: var(--divider-color); - border-bottom: none; - margin: 16px 0; - } - .details { - color: var(--secondary-text-color); - } - .section-content { - display: flex; - flex-direction: column; - margin-left: 30px; - margin-inline-start: 30px; - margin-inline-end: initial; - } - ha-formfield.password { - display: block; - margin: 0 -14px -16px; - } - .backup-types { - display: flex; - margin-left: -13px; - margin-inline-start: -13px; - margin-inline-end: initial; - } - .sub-header { - margin-top: 8px; - } - `; - } + static styles = css` + .partial-picker ha-formfield { + display: block; + } + .partial-picker ha-checkbox { + --mdc-checkbox-touch-target-size: 32px; + } + .partial-picker { + display: block; + margin: 0px -6px; + } + supervisor-formfield-label { + display: inline-flex; + align-items: center; + } + hr { + border-color: var(--divider-color); + border-bottom: none; + margin: 16px 0; + } + .details { + color: var(--secondary-text-color); + } + .section-content { + display: flex; + flex-direction: column; + margin-left: 30px; + margin-inline-start: 30px; + margin-inline-end: initial; + } + ha-formfield.password { + display: block; + margin: 0 -14px -16px; + } + .backup-types { + display: flex; + margin-left: -13px; + margin-inline-start: -13px; + margin-inline-end: initial; + } + .sub-header { + margin-top: 8px; + } + `; public backupDetails(): | HassioPartialBackupCreateParams diff --git a/hassio/src/components/supervisor-formfield-label.ts b/hassio/src/components/supervisor-formfield-label.ts index 10d926e083..ce04c6d8d6 100644 --- a/hassio/src/components/supervisor-formfield-label.ts +++ b/hassio/src/components/supervisor-formfield-label.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../src/components/ha-svg-icon"; @@ -30,29 +30,27 @@ class SupervisorFormfieldLabel extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - } - .label { - margin-right: 4px; - margin-inline-end: 4px; - margin-inline-start: initial; - } - .version { - color: var(--secondary-text-color); - } - .icon { - max-height: 22px; - max-width: 22px; - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + } + .label { + margin-right: 4px; + margin-inline-end: 4px; + margin-inline-start: initial; + } + .version { + color: var(--secondary-text-color); + } + .icon { + max-height: 22px; + max-width: 22px; + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + } + `; } declare global { diff --git a/hassio/src/components/supervisor-metric.ts b/hassio/src/components/supervisor-metric.ts index b960d9bb90..19c33cfbc8 100644 --- a/hassio/src/components/supervisor-metric.ts +++ b/hassio/src/components/supervisor-metric.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -31,46 +31,41 @@ class SupervisorMetric extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-settings-row { - padding: 0; - height: 54px; - width: 100%; - } - ha-settings-row > div[slot="description"] { - white-space: normal; - color: var(--secondary-text-color); - display: flex; - justify-content: space-between; - } - ha-bar { - --ha-bar-primary-color: var( - --hassio-bar-ok-color, - var(--success-color) - ); - } - .target-warning { - --ha-bar-primary-color: var( - --hassio-bar-warning-color, - var(--warning-color) - ); - } - .target-critical { - --ha-bar-primary-color: var( - --hassio-bar-critical-color, - var(--error-color) - ); - } - .value { - width: 48px; - padding-right: 4px; - padding-inline-start: initial; - padding-inline-end: 4px; - flex-shrink: 0; - } - `; - } + static styles = css` + ha-settings-row { + padding: 0; + height: 54px; + width: 100%; + } + ha-settings-row > div[slot="description"] { + white-space: normal; + color: var(--secondary-text-color); + display: flex; + justify-content: space-between; + } + ha-bar { + --ha-bar-primary-color: var(--hassio-bar-ok-color, var(--success-color)); + } + .target-warning { + --ha-bar-primary-color: var( + --hassio-bar-warning-color, + var(--warning-color) + ); + } + .target-critical { + --ha-bar-primary-color: var( + --hassio-bar-critical-color, + var(--error-color) + ); + } + .value { + width: 48px; + padding-right: 4px; + padding-inline-start: initial; + padding-inline-end: 4px; + flex-shrink: 0; + } + `; } declare global { diff --git a/hassio/src/hassio-panel.ts b/hassio/src/hassio-panel.ts index cc2b4c206f..c0922f463d 100644 --- a/hassio/src/hassio-panel.ts +++ b/hassio/src/hassio-panel.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import type { Supervisor } from "../../src/data/supervisor/supervisor"; @@ -39,15 +39,13 @@ class HassioPanel extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - --app-header-background-color: var(--sidebar-background-color); - --app-header-text-color: var(--sidebar-text-color); - --app-header-border-bottom: 1px solid var(--divider-color); - } - `; - } + static styles = css` + :host { + --app-header-background-color: var(--sidebar-background-color); + --app-header-text-color: var(--sidebar-text-color); + --app-header-border-bottom: 1px solid var(--divider-color); + } + `; } declare global { diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts index 6f81fe6c87..1120936fa6 100644 --- a/hassio/src/ingress-view/hassio-ingress-view.ts +++ b/hassio/src/ingress-view/hassio-ingress-view.ts @@ -1,5 +1,5 @@ import { mdiMenu } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../src/common/dom/fire_event"; @@ -325,51 +325,49 @@ class HassioIngressView extends LitElement { fireEvent(this, "hass-toggle-menu"); } - static get styles(): CSSResultGroup { - return css` - iframe { - display: block; - width: 100%; - height: 100%; - border: 0; - } + static styles = css` + iframe { + display: block; + width: 100%; + height: 100%; + border: 0; + } - .header + iframe { - height: calc(100% - 40px); - } + .header + iframe { + height: calc(100% - 40px); + } - .header { - display: flex; - align-items: center; - font-size: 16px; - height: 40px; - padding: 0 16px; - pointer-events: none; - background-color: var(--app-header-background-color); - font-weight: 400; - color: var(--app-header-text-color, white); - border-bottom: var(--app-header-border-bottom, none); - box-sizing: border-box; - --mdc-icon-size: 20px; - } + .header { + display: flex; + align-items: center; + font-size: 16px; + height: 40px; + padding: 0 16px; + pointer-events: none; + background-color: var(--app-header-background-color); + font-weight: 400; + color: var(--app-header-text-color, white); + border-bottom: var(--app-header-border-bottom, none); + box-sizing: border-box; + --mdc-icon-size: 20px; + } - .main-title { - margin: var(--margin-title); - line-height: 20px; - flex-grow: 1; - } + .main-title { + margin: var(--margin-title); + line-height: 20px; + flex-grow: 1; + } - ha-icon-button { - pointer-events: auto; - } + ha-icon-button { + pointer-events: auto; + } - hass-subpage { - --app-header-background-color: var(--sidebar-background-color); - --app-header-text-color: var(--sidebar-text-color); - --app-header-border-bottom: 1px solid var(--divider-color); - } - `; - } + hass-subpage { + --app-header-background-color: var(--sidebar-background-color); + --app-header-text-color: var(--sidebar-text-color); + --app-header-border-bottom: 1px solid var(--divider-color); + } + `; } declare global { diff --git a/hassio/src/update-available/update-available-dashboard.ts b/hassio/src/update-available/update-available-dashboard.ts index 11b35b6d24..137fd1fb2c 100644 --- a/hassio/src/update-available/update-available-dashboard.ts +++ b/hassio/src/update-available/update-available-dashboard.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import type { Supervisor } from "../../../src/data/supervisor/supervisor"; @@ -38,20 +38,18 @@ class UpdateAvailableDashboard extends LitElement { history.back(); } - static get styles(): CSSResultGroup { - return css` - hass-subpage { - --app-header-background-color: var(--primary-background-color); - --app-header-text-color: var(--sidebar-text-color); - } - update-available-card { - margin: auto; - margin-top: 16px; - margin-bottom: 24px; - max-width: 600px; - } - `; - } + static styles = css` + hass-subpage { + --app-header-background-color: var(--primary-background-color); + --app-header-text-color: var(--sidebar-text-color); + } + update-available-card { + margin: auto; + margin-top: 16px; + margin-bottom: 24px; + max-width: 600px; + } + `; } declare global { diff --git a/src/cast/cast_manager.ts b/src/cast/cast_manager.ts index 1407ba845f..58a2fd0f60 100644 --- a/src/cast/cast_manager.ts +++ b/src/cast/cast_manager.ts @@ -32,7 +32,7 @@ export class CastManager { // If the cast connection is connected to our Hass. public status?: ReceiverStatusMessage; - private _eventListeners: { [event: string]: CastEventListener[] } = {}; + private _eventListeners: Record = {}; constructor(auth?: Auth) { this.auth = auth; diff --git a/src/common/config/components_with_service.ts b/src/common/config/components_with_service.ts index dab10f2441..165c3ea1f0 100644 --- a/src/common/config/components_with_service.ts +++ b/src/common/config/components_with_service.ts @@ -4,6 +4,6 @@ import type { HomeAssistant } from "../../types"; export const componentsWithService = ( hass: HomeAssistant, service: string -): Array => +): string[] => hass && Object.keys(hass.services).filter((key) => service in hass.services[key]); diff --git a/src/common/decorators/storage.ts b/src/common/decorators/storage.ts index a461ceb285..b1e62d9bb3 100644 --- a/src/common/decorators/storage.ts +++ b/src/common/decorators/storage.ts @@ -31,11 +31,9 @@ class StorageClass { public storage: globalThis.Storage; - private _storage: { [storageKey: string]: any } = {}; + private _storage: Record = {}; - private _listeners: { - [storageKey: string]: Callback[]; - } = {}; + private _listeners: Record = {}; public addFromStorage(storageKey: any): void { if (!this._storage[storageKey]) { diff --git a/src/common/decorators/transform.ts b/src/common/decorators/transform.ts index 0b947f381c..62f2effc8b 100644 --- a/src/common/decorators/transform.ts +++ b/src/common/decorators/transform.ts @@ -5,9 +5,7 @@ import { shallowEqual } from "../util/shallow-equal"; /** * Transform function type. */ -export interface Transformer { - (value: V): T; -} +export type Transformer = (value: V) => T; type ReactiveTransformElement = ReactiveElement & { _transformers: Map; diff --git a/src/common/dom/ancestors-with-property.ts b/src/common/dom/ancestors-with-property.ts index 6525dcb451..d1beadbc0c 100644 --- a/src/common/dom/ancestors-with-property.ts +++ b/src/common/dom/ancestors-with-property.ts @@ -32,7 +32,7 @@ export const ancestorsWithProperty = ( property: string | symbol, own = DEFAULT_OWN ) => { - const ancestors: Set = new Set(); + const ancestors = new Set(); while (element) { ancestors.add(element); element = closestWithProperty(element, property, own); diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts index 336f8cd756..0fc7061833 100644 --- a/src/common/dom/apply_themes_on_element.ts +++ b/src/common/dom/apply_themes_on_element.ts @@ -13,7 +13,7 @@ import { labBrighten, labDarken } from "../color/lab"; import { rgbContrast } from "../color/rgb"; interface ProcessedTheme { - keys: { [key: string]: "" }; + keys: Record; styles: Record; } diff --git a/src/common/entity/compute_state_name.ts b/src/common/entity/compute_state_name.ts index 9fbe2713a2..4acb52a0c1 100644 --- a/src/common/entity/compute_state_name.ts +++ b/src/common/entity/compute_state_name.ts @@ -3,7 +3,7 @@ import { computeObjectId } from "./compute_object_id"; export const computeStateNameFromEntityAttributes = ( entityId: string, - attributes: { [key: string]: any } + attributes: Record ): string => attributes.friendly_name === undefined ? computeObjectId(entityId).replace(/_/g, " ") diff --git a/src/common/entity/supports-feature.ts b/src/common/entity/supports-feature.ts index c340629267..09887723ff 100644 --- a/src/common/entity/supports-feature.ts +++ b/src/common/entity/supports-feature.ts @@ -6,9 +6,7 @@ export const supportsFeature = ( ): boolean => supportsFeatureFromAttributes(stateObj.attributes, feature); export const supportsFeatureFromAttributes = ( - attributes: { - [key: string]: any; - }, + attributes: Record, feature: number ): boolean => // eslint-disable-next-line no-bitwise diff --git a/src/common/string/filter/filter.ts b/src/common/string/filter/filter.ts index ecaf5b6f95..0065d8183b 100644 --- a/src/common/string/filter/filter.ts +++ b/src/common/string/filter/filter.ts @@ -130,7 +130,7 @@ enum Arrow { * 4. `` etc */ // export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number]; -export type FuzzyScore = Array; +export type FuzzyScore = number[]; export function fuzzyScore( pattern: string, @@ -469,7 +469,7 @@ const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certai const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position const _diag = initTable(); // the length of a contiguous diagonal match const _table = initTable(); -const _arrows = initTable(); +const _arrows = initTable() as Arrow[][]; function initArr(maxLen: number) { const row: number[] = []; @@ -498,17 +498,15 @@ function _fillInMaxWordMatchPos( } } -export interface FuzzyScorer { - ( - pattern: string, - lowPattern: string, - patternPos: number, - word: string, - lowWord: string, - wordPos: number, - firstMatchCanBeWeak: boolean - ): FuzzyScore | undefined; -} +export type FuzzyScorer = ( + pattern: string, + lowPattern: string, + patternPos: number, + word: string, + lowWord: string, + wordPos: number, + firstMatchCanBeWeak: boolean +) => FuzzyScore | undefined; export function createMatches(score: undefined | FuzzyScore): Match[] { if (typeof score === "undefined") { diff --git a/src/common/translations/localize.ts b/src/common/translations/localize.ts index 2675d1c1fe..0afa6c2a93 100644 --- a/src/common/translations/localize.ts +++ b/src/common/translations/localize.ts @@ -56,9 +56,7 @@ export type LocalizeFunc = ( > ) => string; -interface FormatType { - [format: string]: any; -} +type FormatType = Record; export interface FormatsType { number: FormatType; date: FormatType; diff --git a/src/common/util/group-by.ts b/src/common/util/group-by.ts index 0f3f76dfff..a33429acb9 100644 --- a/src/common/util/group-by.ts +++ b/src/common/util/group-by.ts @@ -1,7 +1,7 @@ export const groupBy = ( list: T[], keySelector: (item: T) => string -): { [key: string]: T[] } => { +): Record => { const result = {}; for (const item of list) { const key = keySelector(item); diff --git a/src/common/util/time-cache-entity-promise-func.ts b/src/common/util/time-cache-entity-promise-func.ts index 053b2f9b0e..ed95dc0fef 100644 --- a/src/common/util/time-cache-entity-promise-func.ts +++ b/src/common/util/time-cache-entity-promise-func.ts @@ -1,8 +1,6 @@ import type { HomeAssistant } from "../../types"; -interface ResultCache { - [entityId: string]: Promise | undefined; -} +type ResultCache = Record | undefined>; /** * Call a function with result caching per entity. diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts index fc04a8b6a3..a7c2bab55a 100644 --- a/src/components/buttons/ha-progress-button.ts +++ b/src/components/buttons/ha-progress-button.ts @@ -1,6 +1,6 @@ import "@material/mwc-button"; import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../ha-circular-progress"; @@ -62,64 +62,62 @@ export class HaProgressButton extends LitElement { }, 2000); } - static get styles(): CSSResultGroup { - return css` - :host { - outline: none; - display: inline-block; - position: relative; - pointer-events: none; - } + static styles = css` + :host { + outline: none; + display: inline-block; + position: relative; + pointer-events: none; + } - mwc-button { - transition: all 1s; - pointer-events: initial; - } + mwc-button { + transition: all 1s; + pointer-events: initial; + } - mwc-button.success { - --mdc-theme-primary: white; - background-color: var(--success-color); - transition: none; - border-radius: 4px; - pointer-events: none; - } + mwc-button.success { + --mdc-theme-primary: white; + background-color: var(--success-color); + transition: none; + border-radius: 4px; + pointer-events: none; + } - mwc-button[raised].success { - --mdc-theme-primary: var(--success-color); - --mdc-theme-on-primary: white; - } + mwc-button[raised].success { + --mdc-theme-primary: var(--success-color); + --mdc-theme-on-primary: white; + } - mwc-button.error { - --mdc-theme-primary: white; - background-color: var(--error-color); - transition: none; - border-radius: 4px; - pointer-events: none; - } + mwc-button.error { + --mdc-theme-primary: white; + background-color: var(--error-color); + transition: none; + border-radius: 4px; + pointer-events: none; + } - mwc-button[raised].error { - --mdc-theme-primary: var(--error-color); - --mdc-theme-on-primary: white; - } + mwc-button[raised].error { + --mdc-theme-primary: var(--error-color); + --mdc-theme-on-primary: white; + } - .progress { - bottom: 4px; - position: absolute; - text-align: center; - top: 4px; - width: 100%; - } + .progress { + bottom: 4px; + position: absolute; + text-align: center; + top: 4px; + width: 100%; + } - ha-svg-icon { - color: white; - } + ha-svg-icon { + color: white; + } - mwc-button.success slot, - mwc-button.error slot { - visibility: hidden; - } - `; - } + mwc-button.success slot, + mwc-button.error slot { + visibility: hidden; + } + `; } declare global { diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index 1321a7da21..cf315f9a45 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -6,7 +6,7 @@ import type { TooltipModel, UpdateMode, } from "chart.js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, nothing, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -60,7 +60,7 @@ export class HaChartBase extends LitElement { @state() private _tooltip?: Tooltip; - @state() private _hiddenDatasets: Set = new Set(); + @state() private _hiddenDatasets = new Set(); @state() private _showZoomHint = false; @@ -526,145 +526,143 @@ export class HaChartBase extends LitElement { this._tooltip = undefined; }; - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - position: relative; - } - .chart-container { - position: relative; - } - canvas { - max-height: var(--chart-max-height, 400px); - } - canvas.not-zoomed { - /* allow scrolling if the chart is not zoomed */ - touch-action: pan-y !important; - } - .chart-legend { - text-align: center; - } - .chart-legend li { - cursor: pointer; - display: inline-grid; - grid-auto-flow: column; - padding: 0 8px; - box-sizing: border-box; - align-items: center; - color: var(--secondary-text-color); - } - .chart-legend .hidden { - text-decoration: line-through; - } - .chart-legend .label { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - .chart-legend .bullet, - .chart-tooltip .bullet { - border-width: 1px; - border-style: solid; - border-radius: 50%; - display: inline-block; - height: 16px; - margin-right: 6px; - width: 16px; - flex-shrink: 0; - box-sizing: border-box; - margin-inline-end: 6px; - margin-inline-start: initial; - direction: var(--direction); - } - .chart-tooltip .bullet { - align-self: baseline; - } - .chart-tooltip { - padding: 8px; - font-size: 90%; - position: fixed; - background: rgba(80, 80, 80, 0.9); - color: white; - border-radius: 4px; - pointer-events: none; - z-index: 1; - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - width: 200px; - box-sizing: border-box; - direction: var(--direction); - } - .chart-legend ul, - .chart-tooltip ul { - display: inline-block; - padding: 0 0px; - margin: 8px 0 0 0; - width: 100%; - } - .chart-tooltip ul { - margin: 0 4px; - } - .chart-tooltip li { - display: flex; - white-space: pre-line; - word-break: break-word; - align-items: center; - line-height: 16px; - padding: 4px 0; - } - .chart-tooltip .title { - text-align: center; - font-weight: 500; - word-break: break-word; - direction: ltr; - } - .chart-tooltip .footer { - font-weight: 500; - } - .chart-tooltip .before-body { - text-align: center; - font-weight: 300; - word-break: break-all; - } - .zoom-hint { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); - pointer-events: none; - } - .zoom-hint.visible { - opacity: 1; - } - .zoom-hint > div { - color: white; - font-size: 1.5em; - font-weight: 500; - padding: 8px; - border-radius: 8px; - background: rgba(0, 0, 0, 0.3); - box-shadow: 0 0 32px 32px rgba(0, 0, 0, 0.3); - } - .zoom-reset { - position: absolute; - top: 16px; - right: 4px; - background: var(--card-background-color); - border-radius: 4px; - --mdc-icon-button-size: 32px; - color: var(--primary-color); - border: 1px solid var(--divider-color); - } - `; - } + static styles = css` + :host { + display: block; + position: relative; + } + .chart-container { + position: relative; + } + canvas { + max-height: var(--chart-max-height, 400px); + } + canvas.not-zoomed { + /* allow scrolling if the chart is not zoomed */ + touch-action: pan-y !important; + } + .chart-legend { + text-align: center; + } + .chart-legend li { + cursor: pointer; + display: inline-grid; + grid-auto-flow: column; + padding: 0 8px; + box-sizing: border-box; + align-items: center; + color: var(--secondary-text-color); + } + .chart-legend .hidden { + text-decoration: line-through; + } + .chart-legend .label { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + .chart-legend .bullet, + .chart-tooltip .bullet { + border-width: 1px; + border-style: solid; + border-radius: 50%; + display: inline-block; + height: 16px; + margin-right: 6px; + width: 16px; + flex-shrink: 0; + box-sizing: border-box; + margin-inline-end: 6px; + margin-inline-start: initial; + direction: var(--direction); + } + .chart-tooltip .bullet { + align-self: baseline; + } + .chart-tooltip { + padding: 8px; + font-size: 90%; + position: fixed; + background: rgba(80, 80, 80, 0.9); + color: white; + border-radius: 4px; + pointer-events: none; + z-index: 1; + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + width: 200px; + box-sizing: border-box; + direction: var(--direction); + } + .chart-legend ul, + .chart-tooltip ul { + display: inline-block; + padding: 0 0px; + margin: 8px 0 0 0; + width: 100%; + } + .chart-tooltip ul { + margin: 0 4px; + } + .chart-tooltip li { + display: flex; + white-space: pre-line; + word-break: break-word; + align-items: center; + line-height: 16px; + padding: 4px 0; + } + .chart-tooltip .title { + text-align: center; + font-weight: 500; + word-break: break-word; + direction: ltr; + } + .chart-tooltip .footer { + font-weight: 500; + } + .chart-tooltip .before-body { + text-align: center; + font-weight: 300; + word-break: break-all; + } + .zoom-hint { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1); + pointer-events: none; + } + .zoom-hint.visible { + opacity: 1; + } + .zoom-hint > div { + color: white; + font-size: 1.5em; + font-weight: 500; + padding: 8px; + border-radius: 8px; + background: rgba(0, 0, 0, 0.3); + box-shadow: 0 0 32px 32px rgba(0, 0, 0, 0.3); + } + .zoom-reset { + position: absolute; + top: 16px; + right: 4px; + background: var(--card-background-color); + border-radius: 4px; + --mdc-icon-button-size: 32px; + color: var(--primary-color); + border: 1px solid var(--divider-color); + } + `; } declare global { diff --git a/src/components/chart/ha-sankey-chart.ts b/src/components/chart/ha-sankey-chart.ts index 7dcff4fbc9..bbe8a7f424 100644 --- a/src/components/chart/ha-sankey-chart.ts +++ b/src/components/chart/ha-sankey-chart.ts @@ -4,7 +4,7 @@ import { ResizeController } from "@lit-labs/observers/resize-controller"; import memoizeOne from "memoize-one"; import type { HomeAssistant } from "../../types"; -export type Node = { +export interface Node { id: string; value: number; index: number; // like z-index but for x/y @@ -12,13 +12,17 @@ export type Node = { tooltip?: string; color?: string; passThrough?: boolean; -}; -export type Link = { source: string; target: string; value?: number }; +} +export interface Link { + source: string; + target: string; + value?: number; +} -export type SankeyChartData = { +export interface SankeyChartData { nodes: Node[]; links: Link[]; -}; +} type ProcessedNode = Node & { x: number; @@ -35,13 +39,13 @@ type ProcessedLink = Link & { passThroughNodeIds: string[]; }; -type Section = { +interface Section { nodes: ProcessedNode[]; offset: number; index: number; totalValue: number; statePerPixel: number; -}; +} const MIN_SIZE = 3; const DEFAULT_COLOR = "var(--primary-color)"; diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts index 4dcb43fe59..3380ab116a 100644 --- a/src/components/chart/state-history-chart-line.ts +++ b/src/components/chart/state-history-chart-line.ts @@ -553,11 +553,11 @@ export class StateHistoryChartLine extends LitElement { !states.states || states.states.length === 0 ? 0 : states.states[0].last_changed; - for (let i = 0; i < states.statistics.length; i++) { - if (stopTime && states.statistics[i].last_changed >= stopTime) { + for (const statistic of states.statistics) { + if (stopTime && statistic.last_changed >= stopTime) { break; } - processData(states.statistics[i]); + processData(statistic); } } states.states.forEach((entityState) => { diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts index e57f710a63..a300309956 100644 --- a/src/components/chart/state-history-chart-timeline.ts +++ b/src/components/chart/state-history-chart-timeline.ts @@ -1,6 +1,6 @@ import type { ChartData, ChartDataset, ChartOptions } from "chart.js"; import { getRelativePosition } from "chart.js/helpers"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time"; @@ -319,13 +319,11 @@ export class StateHistoryChartTimeline extends LitElement { }; } - static get styles(): CSSResultGroup { - return css` - ha-chart-base { - --chart-max-height: none; - } - `; - } + static styles = css` + ha-chart-base { + --chart-max-height: none; + } + `; } declare global { diff --git a/src/components/chart/state-history-charts.ts b/src/components/chart/state-history-charts.ts index f0ef5c3887..a389307c22 100644 --- a/src/components/chart/state-history-charts.ts +++ b/src/components/chart/state-history-charts.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, eventOptions, property, state } from "lit/decorators"; import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize"; @@ -272,64 +272,62 @@ export class StateHistoryCharts extends LitElement { this._savedScrollPos = (e.target as HTMLDivElement).scrollTop; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - /* height of single timeline chart = 60px */ - min-height: 60px; - } + static styles = css` + :host { + display: block; + /* height of single timeline chart = 60px */ + min-height: 60px; + } - :host([virtualize]) { - height: 100%; - } + :host([virtualize]) { + height: 100%; + } - .info { - text-align: center; - line-height: 60px; - color: var(--secondary-text-color); - } + .info { + text-align: center; + line-height: 60px; + color: var(--secondary-text-color); + } - .container { - max-height: var(--history-max-height); - } + .container { + max-height: var(--history-max-height); + } - .entry-container { - width: 100%; - } + .entry-container { + width: 100%; + } - .entry-container:hover { - z-index: 1; - } + .entry-container:hover { + z-index: 1; + } - :host([virtualize]) .entry-container { - padding-left: 1px; - padding-right: 1px; - padding-inline-start: 1px; - padding-inline-end: 1px; - } + :host([virtualize]) .entry-container { + padding-left: 1px; + padding-right: 1px; + padding-inline-start: 1px; + padding-inline-end: 1px; + } - .entry-container:not(:first-child) { - border-top: 2px solid var(--divider-color); - margin-top: 16px; - } + .entry-container:not(:first-child) { + border-top: 2px solid var(--divider-color); + margin-top: 16px; + } - .container, - lit-virtualizer { - height: 100%; - width: 100%; - } + .container, + lit-virtualizer { + height: 100%; + width: 100%; + } - lit-virtualizer { - contain: size layout !important; - } + lit-virtualizer { + contain: size layout !important; + } - state-history-chart-timeline, - state-history-chart-line { - width: 100%; - } - `; - } + state-history-chart-timeline, + state-history-chart-line { + width: 100%; + } + `; } declare global { diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts index ff0dd5d0fe..180daa3652 100644 --- a/src/components/chart/statistics-chart.ts +++ b/src/components/chart/statistics-chart.ts @@ -4,7 +4,7 @@ import type { ChartOptions, ChartType, } from "chart.js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -60,7 +60,7 @@ export class StatisticsChart extends LitElement { @property({ attribute: false }) public endTime?: Date; @property({ attribute: false, type: Array }) - public statTypes: Array = ["sum", "min", "mean", "max"]; + public statTypes: StatisticType[] = ["sum", "min", "mean", "max"]; @property({ attribute: false }) public chartType: ChartType = "line"; @@ -372,7 +372,7 @@ export class StatisticsChart extends LitElement { } // array containing [value1, value2, etc] - let prevValues: Array | null = null; + let prevValues: (number | null)[] | null = null; let prevEndTime: Date | undefined; // The datasets for the current statistic @@ -382,7 +382,7 @@ export class StatisticsChart extends LitElement { const pushData = ( start: Date, end: Date, - dataValues: Array | null + dataValues: (number | null)[] | null ) => { if (!dataValues) return; if (start > end) { @@ -494,7 +494,7 @@ export class StatisticsChart extends LitElement { return; } prevDate = startDate; - const dataValues: Array = []; + const dataValues: (number | null)[] = []; statTypes.forEach((type) => { let val: number | null | undefined; if (type === "sum") { @@ -528,19 +528,17 @@ export class StatisticsChart extends LitElement { this._statisticIds = statisticIds; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - min-height: 60px; - } - .info { - text-align: center; - line-height: 60px; - color: var(--secondary-text-color); - } - `; - } + static styles = css` + :host { + display: block; + min-height: 60px; + } + .info { + text-align: center; + line-height: 60px; + color: var(--secondary-text-color); + } + `; } declare global { diff --git a/src/components/chart/timeline-chart/timeline-color.ts b/src/components/chart/timeline-chart/timeline-color.ts index 897c8ac96f..44cd603047 100644 --- a/src/components/chart/timeline-chart/timeline-color.ts +++ b/src/components/chart/timeline-chart/timeline-color.ts @@ -49,7 +49,7 @@ function computeTimelineStateColor( } let colorIndex = 0; -const stateColorMap: Map = new Map(); +const stateColorMap = new Map(); function computeTimeLineGenericColor( state: string, diff --git a/src/components/data-table/dialog-data-table-settings.ts b/src/components/data-table/dialog-data-table-settings.ts index 0469c051ff..1b23e4927c 100644 --- a/src/components/data-table/dialog-data-table-settings.ts +++ b/src/components/data-table/dialog-data-table-settings.ts @@ -218,8 +218,8 @@ export class DialogDataTableSettings extends LitElement { // Array.findLastIndex when supported or core-js polyfill const findLastIndex = ( - arr: Array, - fn: (item: any, index: number, arr: Array) => boolean + arr: any[], + fn: (item: any, index: number, arr: any[]) => boolean ) => { for (let i = arr.length - 1; i >= 0; i--) { if (fn(arr[i], i, arr)) return i; diff --git a/src/components/data-table/ha-data-table-icon.ts b/src/components/data-table/ha-data-table-icon.ts index 0b9757e0e7..9fdda54e40 100644 --- a/src/components/data-table/ha-data-table-icon.ts +++ b/src/components/data-table/ha-data-table-icon.ts @@ -33,31 +33,29 @@ class HaDataTableIcon extends LitElement { this.addEventListener("tap", hide); } - static get styles() { - return css` - :host { - display: inline-block; - position: relative; - } - ha-svg-icon { - color: var(--secondary-text-color); - } - div { - position: absolute; - right: 28px; - inset-inline-end: 28px; - inset-inline-start: initial; - z-index: 1002; - outline: none; - font-size: 10px; - line-height: 1; - background-color: var(--simple-tooltip-background, #616161); - color: var(--simple-tooltip-text-color, white); - padding: 8px; - border-radius: 2px; - } - `; - } + static styles = css` + :host { + display: inline-block; + position: relative; + } + ha-svg-icon { + color: var(--secondary-text-color); + } + div { + position: absolute; + right: 28px; + inset-inline-end: 28px; + inset-inline-start: initial; + z-index: 1002; + outline: none; + font-size: 10px; + line-height: 1; + background-color: var(--simple-tooltip-background, #616161); + color: var(--simple-tooltip-text-color, white); + padding: 8px; + border-radius: 2px; + } + `; } declare global { diff --git a/src/components/data-table/ha-data-table-labels.ts b/src/components/data-table/ha-data-table-labels.ts index b35656be82..ce999fb760 100644 --- a/src/components/data-table/ha-data-table-labels.ts +++ b/src/components/data-table/ha-data-table-labels.ts @@ -98,31 +98,29 @@ class HaDataTableLabels extends LitElement { } } - static get styles() { - return css` - :host { - display: block; - flex-grow: 1; - margin-top: 4px; - height: 22px; - } - ha-chip-set { - position: fixed; - flex-wrap: nowrap; - } - ha-label { - --ha-label-background-color: var(--color, var(--grey-color)); - --ha-label-background-opacity: 0.5; - } - ha-button-menu { - border-radius: 10px; - } - .plus { - --ha-label-background-color: transparent; - border: 1px solid var(--divider-color); - } - `; - } + static styles = css` + :host { + display: block; + flex-grow: 1; + margin-top: 4px; + height: 22px; + } + ha-chip-set { + position: fixed; + flex-wrap: nowrap; + } + ha-label { + --ha-label-background-color: var(--color, var(--grey-color)); + --ha-label-background-opacity: 0.5; + } + ha-button-menu { + border-radius: 10px; + } + .plus { + --ha-label-background-color: transparent; + border: 1px solid var(--divider-color); + } + `; } declare global { diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index af1f1f358b..d65d6214a7 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -48,9 +48,10 @@ export interface SortingChangedEvent { export type SortingDirection = "desc" | "asc" | null; -export interface DataTableColumnContainer { - [key: string]: DataTableColumnData; -} +export type DataTableColumnContainer = Record< + string, + DataTableColumnData +>; export interface DataTableSortColumnData { sortable?: boolean; @@ -94,9 +95,7 @@ export interface DataTableRowData { selectable?: boolean; } -export interface SortableColumnContainer { - [key: string]: ClonedDataTableColumnData; -} +export type SortableColumnContainer = Record; const UNDEFINED_GROUP_KEY = "zzzzz_undefined"; @@ -694,9 +693,9 @@ export class HaDataTable extends LitElement { grouped[UNDEFINED_GROUP_KEY] = grouped.undefined; delete grouped.undefined; } - const sorted: { - [key: string]: DataTableRowData[]; - } = Object.keys(grouped) + const sorted: Record = Object.keys( + grouped + ) .sort((a, b) => { const orderA = groupOrder?.indexOf(a) ?? -1; const orderB = groupOrder?.indexOf(b) ?? -1; diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts index 7582e2d577..b79ac97e41 100644 --- a/src/components/device/ha-device-automation-picker.ts +++ b/src/components/device/ha-device-automation-picker.ts @@ -1,6 +1,5 @@ import { consume } from "@lit-labs/context"; import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -185,11 +184,9 @@ export abstract class HaDeviceAutomationPicker< fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResultGroup { - return css` - ha-select { - display: block; - } - `; - } + static styles = css` + ha-select { + display: block; + } + `; } diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts index f5b6ccee8b..10db5b67e0 100644 --- a/src/components/entity/ha-entity-toggle.ts +++ b/src/components/entity/ha-entity-toggle.ts @@ -1,6 +1,6 @@ import { mdiFlash, mdiFlashOff } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property, state } from "lit/decorators"; import { STATES_OFF } from "../../common/const"; @@ -152,25 +152,23 @@ export class HaEntityToggle extends LitElement { }, 2000); } - static get styles(): CSSResultGroup { - return css` - :host { - white-space: nowrap; - min-width: 38px; - } - ha-icon-button { - --mdc-icon-button-size: 40px; - color: var(--ha-icon-button-inactive-color, var(--primary-text-color)); - transition: color 0.5s; - } - ha-icon-button.state-active { - color: var(--ha-icon-button-active-color, var(--primary-color)); - } - ha-switch { - padding: 13px 5px; - } - `; - } + static styles = css` + :host { + white-space: nowrap; + min-width: 38px; + } + ha-icon-button { + --mdc-icon-button-size: 40px; + color: var(--ha-icon-button-inactive-color, var(--primary-text-color)); + transition: color 0.5s; + } + ha-icon-button.state-active { + color: var(--ha-icon-button-active-color, var(--primary-color)); + } + ha-switch { + padding: 13px 5px; + } + `; } declare global { diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts index 4f02fb94a5..2f136991ba 100644 --- a/src/components/entity/ha-state-label-badge.ts +++ b/src/components/entity/ha-state-label-badge.ts @@ -1,6 +1,6 @@ import { mdiAlert } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -26,7 +26,7 @@ const TRUNCATED_DOMAINS = [ "alarm_control_panel", "device_tracker", "person", -] as const satisfies ReadonlyArray; +] as const satisfies readonly (keyof typeof FIXED_DOMAIN_STATES)[]; type TruncatedDomain = (typeof TRUNCATED_DOMAINS)[number]; type TruncatedKey = { @@ -262,50 +262,48 @@ export class HaStateLabelBadge extends LitElement { this._timerTimeRemaining = timerTimeRemaining(stateObj); } - static get styles(): CSSResultGroup { - return css` - :host { - cursor: pointer; - } - .big { - font-size: 70%; - } - ha-label-badge { - --ha-label-badge-color: var(--label-badge-red); - } - ha-label-badge.has-unit_of_measurement { - --ha-label-badge-label-text-transform: none; - } + static styles = css` + :host { + cursor: pointer; + } + .big { + font-size: 70%; + } + ha-label-badge { + --ha-label-badge-color: var(--label-badge-red); + } + ha-label-badge.has-unit_of_measurement { + --ha-label-badge-label-text-transform: none; + } - ha-label-badge.binary_sensor { - --ha-label-badge-color: var(--label-badge-blue); - } + ha-label-badge.binary_sensor { + --ha-label-badge-color: var(--label-badge-blue); + } - .red { - --ha-label-badge-color: var(--label-badge-red); - } + .red { + --ha-label-badge-color: var(--label-badge-red); + } - .blue { - --ha-label-badge-color: var(--label-badge-blue); - } + .blue { + --ha-label-badge-color: var(--label-badge-blue); + } - .green { - --ha-label-badge-color: var(--label-badge-green); - } + .green { + --ha-label-badge-color: var(--label-badge-green); + } - .yellow { - --ha-label-badge-color: var(--label-badge-yellow); - } + .yellow { + --ha-label-badge-color: var(--label-badge-yellow); + } - .grey { - --ha-label-badge-color: var(--label-badge-grey); - } + .grey { + --ha-label-badge-color: var(--label-badge-grey); + } - .warning { - --ha-label-badge-color: var(--label-badge-yellow); - } - `; - } + .warning { + --ha-label-badge-color: var(--label-badge-yellow); + } + `; } declare global { diff --git a/src/components/entity/ha-statistics-picker.ts b/src/components/entity/ha-statistics-picker.ts index 7726aea143..d731b2ec20 100644 --- a/src/components/entity/ha-statistics-picker.ts +++ b/src/components/entity/ha-statistics-picker.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -172,19 +171,17 @@ class HaStatisticsPicker extends LitElement { this._updateStatistics([...currentEntities, toAdd]); } - static get styles(): CSSResultGroup { - return css` - :host { - width: 200px; - display: block; - } - ha-statistic-picker { - display: block; - width: 100%; - margin-top: 8px; - } - `; - } + static styles = css` + :host { + width: 200px; + display: block; + } + ha-statistic-picker { + display: block; + width: 100%; + margin-top: 8px; + } + `; } declare global { diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts index 924ccc2ba9..f1a4bfd8be 100644 --- a/src/components/entity/state-badge.ts +++ b/src/components/entity/state-badge.ts @@ -35,7 +35,7 @@ export class StateBadge extends LitElement { // @todo Consider reworking to eliminate need for attribute since it is manipulated internally @property({ type: Boolean, reflect: true }) public icon = true; - @state() private _iconStyle: { [name: string]: string | undefined } = {}; + @state() private _iconStyle: Record = {}; connectedCallback(): void { super.connectedCallback(); @@ -108,7 +108,7 @@ export class StateBadge extends LitElement { } const stateObj = this.stateObj; - const iconStyle: { [name: string]: string } = {}; + const iconStyle: Record = {}; let backgroundImage = ""; this.icon = true; diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts index ec994875b3..3061e7aba3 100644 --- a/src/components/entity/state-info.ts +++ b/src/components/entity/state-info.ts @@ -1,6 +1,5 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { computeStateName } from "../../common/entity/compute_state_name"; @@ -75,67 +74,65 @@ class StateInfo extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - min-width: 120px; - white-space: nowrap; - display: flex; - align-items: center; - } + static styles = css` + :host { + min-width: 120px; + white-space: nowrap; + display: flex; + align-items: center; + } - state-badge { - flex: none; - } + state-badge { + flex: none; + } - .info { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - display: flex; - flex-direction: column; - justify-content: center; - height: 100%; - min-width: 0; - text-align: var(--float-start); - position: relative; - } + .info { + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + min-width: 0; + text-align: var(--float-start); + position: relative; + } - .name { - color: var(--primary-text-color); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + .name { + color: var(--primary-text-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - .name.in-dialog, - :host([secondary-line]) .name { - line-height: 20px; - } + .name.in-dialog, + :host([secondary-line]) .name { + line-height: 20px; + } - .time-ago, - .extra-info, - .extra-info > * { - color: var(--secondary-text-color); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + .time-ago, + .extra-info, + .extra-info > * { + color: var(--secondary-text-color); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - .row { - display: flex; - flex-direction: row; - flex-wrap: no-wrap; - width: 100%; - justify-content: space-between; - margin: 0 2px 4px 0; - } + .row { + display: flex; + flex-direction: row; + flex-wrap: no-wrap; + width: 100%; + justify-content: space-between; + margin: 0 2px 4px 0; + } - .row:last-child { - margin-bottom: 0px; - } - `; - } + .row:last-child { + margin-bottom: 0px; + } + `; } declare global { diff --git a/src/components/ha-ansi-to-html.ts b/src/components/ha-ansi-to-html.ts index 852d8c8239..7bfd4ae8dd 100644 --- a/src/components/ha-ansi-to-html.ts +++ b/src/components/ha-ansi-to-html.ts @@ -1,6 +1,5 @@ import { css, - type CSSResultGroup, html, LitElement, type PropertyValues, @@ -47,83 +46,81 @@ export class HaAnsiToHtml extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - pre { - overflow-x: auto; - margin: 0; - } - pre.wrap { - white-space: pre-wrap; - overflow-wrap: break-word; - } - .bold { - font-weight: bold; - } - .italic { - font-style: italic; - } - .underline { - text-decoration: underline; - } - .strikethrough { - text-decoration: line-through; - } - .underline.strikethrough { - text-decoration: underline line-through; - } - .fg-red { - color: var(--error-color); - } - .fg-green { - color: var(--success-color); - } - .fg-yellow { - color: var(--warning-color); - } - .fg-blue { - color: var(--info-color); - } - .fg-magenta { - color: rgb(118, 38, 113); - } - .fg-cyan { - color: rgb(44, 181, 233); - } - .fg-white { - color: rgb(204, 204, 204); - } - .bg-black { - background-color: rgb(0, 0, 0); - } - .bg-red { - background-color: var(--error-color); - } - .bg-green { - background-color: var(--success-color); - } - .bg-yellow { - background-color: var(--warning-color); - } - .bg-blue { - background-color: var(--info-color); - } - .bg-magenta { - background-color: rgb(118, 38, 113); - } - .bg-cyan { - background-color: rgb(44, 181, 233); - } - .bg-white { - background-color: rgb(204, 204, 204); - } + static styles = css` + pre { + overflow-x: auto; + margin: 0; + } + pre.wrap { + white-space: pre-wrap; + overflow-wrap: break-word; + } + .bold { + font-weight: bold; + } + .italic { + font-style: italic; + } + .underline { + text-decoration: underline; + } + .strikethrough { + text-decoration: line-through; + } + .underline.strikethrough { + text-decoration: underline line-through; + } + .fg-red { + color: var(--error-color); + } + .fg-green { + color: var(--success-color); + } + .fg-yellow { + color: var(--warning-color); + } + .fg-blue { + color: var(--info-color); + } + .fg-magenta { + color: rgb(118, 38, 113); + } + .fg-cyan { + color: rgb(44, 181, 233); + } + .fg-white { + color: rgb(204, 204, 204); + } + .bg-black { + background-color: rgb(0, 0, 0); + } + .bg-red { + background-color: var(--error-color); + } + .bg-green { + background-color: var(--success-color); + } + .bg-yellow { + background-color: var(--warning-color); + } + .bg-blue { + background-color: var(--info-color); + } + .bg-magenta { + background-color: rgb(118, 38, 113); + } + .bg-cyan { + background-color: rgb(44, 181, 233); + } + .bg-white { + background-color: rgb(204, 204, 204); + } - ::highlight(search-results) { - background-color: var(--primary-color); - color: var(--text-primary-color); - } - `; - } + ::highlight(search-results) { + background-color: var(--primary-color); + color: var(--text-primary-color); + } + `; /** * add new lines to the log diff --git a/src/components/ha-area-filter.ts b/src/components/ha-area-filter.ts index 83b9c2aa52..b34af2bd51 100644 --- a/src/components/ha-area-filter.ts +++ b/src/components/ha-area-filter.ts @@ -1,5 +1,5 @@ import { mdiTextureBox } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -9,10 +9,10 @@ import "./ha-icon-next"; import "./ha-svg-icon"; import "./ha-textfield"; -export type AreaFilterValue = { +export interface AreaFilterValue { hidden?: string[]; order?: string[]; -}; +} @customElement("ha-area-filter") export class HaAreaPicker extends LitElement { @@ -80,14 +80,12 @@ export class HaAreaPicker extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResultGroup { - return css` - ha-list-item { - --mdc-list-side-padding-left: 8px; - --mdc-list-side-padding-right: 8px; - } - `; - } + static styles = css` + ha-list-item { + --mdc-list-side-padding-left: 8px; + --mdc-list-side-padding-right: 8px; + } + `; } declare global { diff --git a/src/components/ha-area-floor-picker.ts b/src/components/ha-area-floor-picker.ts index 490b73ff80..c5e4a7a3dc 100644 --- a/src/components/ha-area-floor-picker.ts +++ b/src/components/ha-area-floor-picker.ts @@ -345,9 +345,10 @@ export class HaAreaFloorPicker extends LitElement { ); // @ts-ignore - const floorAreaEntries: Array< - [FloorRegistryEntry | undefined, AreaRegistryEntry[]] - > = Object.entries(floorAreaLookup) + const floorAreaEntries: [ + FloorRegistryEntry | undefined, + AreaRegistryEntry[], + ][] = Object.entries(floorAreaLookup) .map(([floorId, floorAreas]) => { const floor = floors.find((fl) => fl.floor_id === floorId)!; return [floor, floorAreas] as const; diff --git a/src/components/ha-assist-chat.ts b/src/components/ha-assist-chat.ts index 21bad3eefa..b6e894fa5d 100644 --- a/src/components/ha-assist-chat.ts +++ b/src/components/ha-assist-chat.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, LitElement, html, nothing } from "lit"; import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js"; import { customElement, property, query, state } from "lit/decorators"; @@ -475,161 +475,159 @@ export class HaAssistChat extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - flex: 1; - display: flex; - flex-direction: column; - min-height: var(--ha-assist-chat-min-height, 415px); - } - ha-textfield { - display: block; - margin: 0 24px 16px; - } - .messages { - flex: 1; - display: block; - box-sizing: border-box; - position: relative; - } - .messages-container { - position: absolute; - bottom: 0px; - right: 0px; - left: 0px; - padding: 24px; - box-sizing: border-box; - overflow-y: auto; - max-height: 100%; - } + static styles = css` + :host { + flex: 1; + display: flex; + flex-direction: column; + min-height: var(--ha-assist-chat-min-height, 415px); + } + ha-textfield { + display: block; + margin: 0 24px 16px; + } + .messages { + flex: 1; + display: block; + box-sizing: border-box; + position: relative; + } + .messages-container { + position: absolute; + bottom: 0px; + right: 0px; + left: 0px; + padding: 24px; + box-sizing: border-box; + overflow-y: auto; + max-height: 100%; + } + .message { + white-space: pre-line; + font-size: 18px; + clear: both; + margin: 8px 0; + padding: 8px; + border-radius: 15px; + } + + @media all and (max-width: 450px), all and (max-height: 500px) { .message { - white-space: pre-line; - font-size: 18px; - clear: both; - margin: 8px 0; - padding: 8px; - border-radius: 15px; + font-size: 16px; } + } - @media all and (max-width: 450px), all and (max-height: 500px) { - .message { - font-size: 16px; - } - } + .message p { + margin: 0; + } + .message p:not(:last-child) { + margin-bottom: 8px; + } - .message p { - margin: 0; - } - .message p:not(:last-child) { - margin-bottom: 8px; - } + .message.user { + margin-left: 24px; + margin-inline-start: 24px; + margin-inline-end: initial; + float: var(--float-end); + text-align: right; + border-bottom-right-radius: 0px; + background-color: var(--primary-color); + color: var(--text-primary-color); + direction: var(--direction); + } - .message.user { - margin-left: 24px; - margin-inline-start: 24px; - margin-inline-end: initial; - float: var(--float-end); - text-align: right; - border-bottom-right-radius: 0px; - background-color: var(--primary-color); - color: var(--text-primary-color); - direction: var(--direction); - } + .message.hass { + margin-right: 24px; + margin-inline-end: 24px; + margin-inline-start: initial; + float: var(--float-start); + border-bottom-left-radius: 0px; + background-color: var(--secondary-background-color); - .message.hass { - margin-right: 24px; - margin-inline-end: 24px; - margin-inline-start: initial; - float: var(--float-start); - border-bottom-left-radius: 0px; - background-color: var(--secondary-background-color); + color: var(--primary-text-color); + direction: var(--direction); + } - color: var(--primary-text-color); - direction: var(--direction); - } + .message.user a { + color: var(--text-primary-color); + } - .message.user a { - color: var(--text-primary-color); - } + .message.hass a { + color: var(--primary-text-color); + } - .message.hass a { - color: var(--primary-text-color); - } + .message.error { + background-color: var(--error-color); + color: var(--text-primary-color); + } - .message.error { - background-color: var(--error-color); - color: var(--text-primary-color); + .bouncer { + width: 48px; + height: 48px; + position: absolute; + } + .double-bounce1, + .double-bounce2 { + width: 48px; + height: 48px; + border-radius: 50%; + background-color: var(--primary-color); + opacity: 0.2; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-bounce 2s infinite ease-in-out; + animation: sk-bounce 2s infinite ease-in-out; + } + .double-bounce2 { + -webkit-animation-delay: -1s; + animation-delay: -1s; + } + @-webkit-keyframes sk-bounce { + 0%, + 100% { + -webkit-transform: scale(0); } + 50% { + -webkit-transform: scale(1); + } + } + @keyframes sk-bounce { + 0%, + 100% { + transform: scale(0); + -webkit-transform: scale(0); + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + } + } - .bouncer { - width: 48px; - height: 48px; - position: absolute; - } - .double-bounce1, - .double-bounce2 { - width: 48px; - height: 48px; - border-radius: 50%; - background-color: var(--primary-color); - opacity: 0.2; - position: absolute; - top: 0; - left: 0; - -webkit-animation: sk-bounce 2s infinite ease-in-out; - animation: sk-bounce 2s infinite ease-in-out; - } - .double-bounce2 { - -webkit-animation-delay: -1s; - animation-delay: -1s; - } - @-webkit-keyframes sk-bounce { - 0%, - 100% { - -webkit-transform: scale(0); - } - 50% { - -webkit-transform: scale(1); - } - } - @keyframes sk-bounce { - 0%, - 100% { - transform: scale(0); - -webkit-transform: scale(0); - } - 50% { - transform: scale(1); - -webkit-transform: scale(1); - } - } + .listening-icon { + position: relative; + color: var(--secondary-text-color); + margin-right: -24px; + margin-inline-end: -24px; + margin-inline-start: initial; + direction: var(--direction); + transform: scaleX(var(--scale-direction)); + } - .listening-icon { - position: relative; - color: var(--secondary-text-color); - margin-right: -24px; - margin-inline-end: -24px; - margin-inline-start: initial; - direction: var(--direction); - transform: scaleX(var(--scale-direction)); - } + .listening-icon[active] { + color: var(--primary-color); + } - .listening-icon[active] { - color: var(--primary-color); - } - - .unsupported { - color: var(--error-color); - position: absolute; - --mdc-icon-size: 16px; - right: 5px; - inset-inline-end: 5px; - inset-inline-start: initial; - top: 0px; - } - `; - } + .unsupported { + color: var(--error-color); + position: absolute; + --mdc-icon-size: 16px; + right: 5px; + inset-inline-end: 5px; + inset-inline-start: initial; + top: 0px; + } + `; } declare global { diff --git a/src/components/ha-assist-pipeline-picker.ts b/src/components/ha-assist-pipeline-picker.ts index ebfd33c691..97013bc507 100644 --- a/src/components/ha-assist-pipeline-picker.ts +++ b/src/components/ha-assist-pipeline-picker.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValueMap } from "lit"; +import type { PropertyValueMap } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -90,13 +90,11 @@ export class HaAssistPipelinePicker extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - ha-select { - width: 100%; - } - `; - } + static styles = css` + ha-select { + width: 100%; + } + `; private _changed(ev): void { const target = ev.target as HaSelect; diff --git a/src/components/ha-badge.ts b/src/components/ha-badge.ts index 46ab2a0dd1..ad6fe7cd79 100644 --- a/src/components/ha-badge.ts +++ b/src/components/ha-badge.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -38,114 +37,109 @@ export class HaBadge extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - --badge-color: var(--secondary-text-color); - -webkit-tap-highlight-color: transparent; - } - .badge { - position: relative; - --ha-ripple-color: var(--badge-color); - --ha-ripple-hover-opacity: 0.04; - --ha-ripple-pressed-opacity: 0.12; - transition: - box-shadow 180ms ease-in-out, - border-color 180ms ease-in-out; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 8px; - height: var(--ha-badge-size, 36px); - min-width: var(--ha-badge-size, 36px); - padding: 0px 12px; - box-sizing: border-box; - width: auto; - border-radius: var( - --ha-badge-border-radius, - calc(var(--ha-badge-size, 36px) / 2) - ); - background: var( - --ha-card-background, - var(--card-background-color, white) - ); - -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none); - backdrop-filter: var(--ha-card-backdrop-filter, none); - border-width: var(--ha-card-border-width, 1px); - box-shadow: var(--ha-card-box-shadow, none); - border-style: solid; - border-color: var( - --ha-card-border-color, - var(--divider-color, #e0e0e0) - ); - } - .badge:focus-visible { - --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent); - --shadow-focus: 0 0 0 1px var(--badge-color); - border-color: var(--badge-color); - box-shadow: var(--shadow-default), var(--shadow-focus); - } - [role="button"] { - cursor: pointer; - } - [role="button"]:focus { - outline: none; - } - .info { - display: flex; - flex-direction: column; - align-items: flex-start; - padding-inline-start: initial; - text-align: center; - } - .label { - font-size: 10px; - font-style: normal; - font-weight: 500; - line-height: 10px; - letter-spacing: 0.1px; - color: var(--secondary-text-color); - } - .content { - font-size: 12px; - font-style: normal; - font-weight: 500; - line-height: 16px; - letter-spacing: 0.1px; - color: var(--primary-text-color); - } - ::slotted([slot="icon"]) { - --mdc-icon-size: 18px; - color: var(--badge-color); - line-height: 0; - margin-left: -4px; - margin-right: 0; - margin-inline-start: -4px; - margin-inline-end: 0; - } - ::slotted(img[slot="icon"]) { - width: 30px; - height: 30px; - border-radius: 50%; - object-fit: cover; - overflow: hidden; - margin-left: -10px; - margin-right: 0; - margin-inline-start: -10px; - margin-inline-end: 0; - } - .badge.icon-only { - padding: 0; - } - .badge.icon-only ::slotted([slot="icon"]) { - margin-left: 0; - margin-right: 0; - margin-inline-start: 0; - margin-inline-end: 0; - } - `; - } + static styles = css` + :host { + --badge-color: var(--secondary-text-color); + -webkit-tap-highlight-color: transparent; + } + .badge { + position: relative; + --ha-ripple-color: var(--badge-color); + --ha-ripple-hover-opacity: 0.04; + --ha-ripple-pressed-opacity: 0.12; + transition: + box-shadow 180ms ease-in-out, + border-color 180ms ease-in-out; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 8px; + height: var(--ha-badge-size, 36px); + min-width: var(--ha-badge-size, 36px); + padding: 0px 12px; + box-sizing: border-box; + width: auto; + border-radius: var( + --ha-badge-border-radius, + calc(var(--ha-badge-size, 36px) / 2) + ); + background: var( + --ha-card-background, + var(--card-background-color, white) + ); + -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none); + backdrop-filter: var(--ha-card-backdrop-filter, none); + border-width: var(--ha-card-border-width, 1px); + box-shadow: var(--ha-card-box-shadow, none); + border-style: solid; + border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0)); + } + .badge:focus-visible { + --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent); + --shadow-focus: 0 0 0 1px var(--badge-color); + border-color: var(--badge-color); + box-shadow: var(--shadow-default), var(--shadow-focus); + } + [role="button"] { + cursor: pointer; + } + [role="button"]:focus { + outline: none; + } + .info { + display: flex; + flex-direction: column; + align-items: flex-start; + padding-inline-start: initial; + text-align: center; + } + .label { + font-size: 10px; + font-style: normal; + font-weight: 500; + line-height: 10px; + letter-spacing: 0.1px; + color: var(--secondary-text-color); + } + .content { + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 16px; + letter-spacing: 0.1px; + color: var(--primary-text-color); + } + ::slotted([slot="icon"]) { + --mdc-icon-size: 18px; + color: var(--badge-color); + line-height: 0; + margin-left: -4px; + margin-right: 0; + margin-inline-start: -4px; + margin-inline-end: 0; + } + ::slotted(img[slot="icon"]) { + width: 30px; + height: 30px; + border-radius: 50%; + object-fit: cover; + overflow: hidden; + margin-left: -10px; + margin-right: 0; + margin-inline-start: -10px; + margin-inline-end: 0; + } + .badge.icon-only { + padding: 0; + } + .badge.icon-only ::slotted([slot="icon"]) { + margin-left: 0; + margin-right: 0; + margin-inline-start: 0; + margin-inline-end: 0; + } + `; } declare global { diff --git a/src/components/ha-bar.ts b/src/components/ha-bar.ts index fc27d61a99..95864e7be7 100644 --- a/src/components/ha-bar.ts +++ b/src/components/ha-bar.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, LitElement, svg } from "lit"; import { customElement, property } from "lit/decorators"; import { @@ -34,25 +34,23 @@ export class HaBar extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - rect { - height: 100%; - } - rect:first-child { - width: 100%; - fill: var(--ha-bar-background-color, var(--secondary-background-color)); - } - rect:last-child { - fill: var(--ha-bar-primary-color, var(--primary-color)); - } - svg { - border-radius: var(--ha-bar-border-radius, 4px); - height: 12px; - width: 100%; - } - `; - } + static styles = css` + rect { + height: 100%; + } + rect:first-child { + width: 100%; + fill: var(--ha-bar-background-color, var(--secondary-background-color)); + } + rect:last-child { + fill: var(--ha-bar-primary-color, var(--primary-color)); + } + svg { + border-radius: var(--ha-bar-border-radius, 4px); + height: 12px; + width: 100%; + } + `; } declare global { diff --git a/src/components/ha-blueprint-picker.ts b/src/components/ha-blueprint-picker.ts index 436ecacf30..3300ea4937 100644 --- a/src/components/ha-blueprint-picker.ts +++ b/src/components/ha-blueprint-picker.ts @@ -1,5 +1,4 @@ import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -95,18 +94,16 @@ class HaBluePrintPicker extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: inline-block; - } - ha-select { - width: 100%; - min-width: 200px; - display: block; - } - `; - } + static styles = css` + :host { + display: inline-block; + } + ha-select { + width: 100%; + min-width: 200px; + display: block; + } + `; } declare global { diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index 96c0e9236c..081e3cea24 100644 --- a/src/components/ha-button-menu.ts +++ b/src/components/ha-button-menu.ts @@ -1,7 +1,7 @@ import type { Button } from "@material/mwc-button"; import "@material/mwc-menu"; import type { Corner, Menu, MenuCorner } from "@material/mwc-menu"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import { mainWindow } from "../common/dom/get_main_window"; @@ -103,17 +103,15 @@ export class HaButtonMenu extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: inline-block; - position: relative; - } - ::slotted([disabled]) { - color: var(--disabled-text-color); - } - `; - } + static styles = css` + :host { + display: inline-block; + position: relative; + } + ::slotted([disabled]) { + color: var(--disabled-text-color); + } + `; } declare global { diff --git a/src/components/ha-button-toggle-group.ts b/src/components/ha-button-toggle-group.ts index c57b5f0d47..f4d371c2e1 100644 --- a/src/components/ha-button-toggle-group.ts +++ b/src/components/ha-button-toggle-group.ts @@ -1,6 +1,6 @@ import "@material/mwc-button/mwc-button"; import type { Button } from "@material/mwc-button/mwc-button"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, queryAll } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -66,80 +66,78 @@ export class HaButtonToggleGroup extends LitElement { fireEvent(this, "value-changed", { value: this.active }); } - static get styles(): CSSResultGroup { - return css` - div { - display: flex; - --mdc-icon-button-size: var(--button-toggle-size, 36px); - --mdc-icon-size: var(--button-toggle-icon-size, 20px); - direction: ltr; - } - mwc-button { - flex: 1; - --mdc-shape-small: 0; - --mdc-button-outline-width: 1px 0 1px 1px; - --mdc-button-outline-color: var(--primary-color); - } - ha-icon-button { - border: 1px solid var(--primary-color); - border-right-width: 0px; - } - ha-icon-button, - mwc-button { - position: relative; - cursor: pointer; - } - ha-icon-button::before, - mwc-button::before { - top: 0; - left: 0; - width: 100%; - height: 100%; - position: absolute; - background-color: var(--primary-color); - opacity: 0; - pointer-events: none; - content: ""; - transition: - opacity 15ms linear, - background-color 15ms linear; - } - ha-icon-button[active]::before, - mwc-button[active]::before { - opacity: 1; - } - ha-icon-button[active] { - --icon-primary-color: var(--text-primary-color); - } - mwc-button[active] { - --mdc-theme-primary: var(--text-primary-color); - } - ha-icon-button:first-child, - mwc-button:first-child { - --mdc-shape-small: 4px 0 0 4px; - border-radius: 4px 0 0 4px; - --mdc-button-outline-width: 1px; - } - mwc-button:first-child::before { - border-radius: 4px 0 0 4px; - } - ha-icon-button:last-child, - mwc-button:last-child { - border-radius: 0 4px 4px 0; - border-right-width: 1px; - --mdc-shape-small: 0 4px 4px 0; - --mdc-button-outline-width: 1px; - } - mwc-button:last-child::before { - border-radius: 0 4px 4px 0; - } - ha-icon-button:only-child, - mwc-button:only-child { - --mdc-shape-small: 4px; - border-right-width: 1px; - } - `; - } + static styles = css` + div { + display: flex; + --mdc-icon-button-size: var(--button-toggle-size, 36px); + --mdc-icon-size: var(--button-toggle-icon-size, 20px); + direction: ltr; + } + mwc-button { + flex: 1; + --mdc-shape-small: 0; + --mdc-button-outline-width: 1px 0 1px 1px; + --mdc-button-outline-color: var(--primary-color); + } + ha-icon-button { + border: 1px solid var(--primary-color); + border-right-width: 0px; + } + ha-icon-button, + mwc-button { + position: relative; + cursor: pointer; + } + ha-icon-button::before, + mwc-button::before { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + background-color: var(--primary-color); + opacity: 0; + pointer-events: none; + content: ""; + transition: + opacity 15ms linear, + background-color 15ms linear; + } + ha-icon-button[active]::before, + mwc-button[active]::before { + opacity: 1; + } + ha-icon-button[active] { + --icon-primary-color: var(--text-primary-color); + } + mwc-button[active] { + --mdc-theme-primary: var(--text-primary-color); + } + ha-icon-button:first-child, + mwc-button:first-child { + --mdc-shape-small: 4px 0 0 4px; + border-radius: 4px 0 0 4px; + --mdc-button-outline-width: 1px; + } + mwc-button:first-child::before { + border-radius: 4px 0 0 4px; + } + ha-icon-button:last-child, + mwc-button:last-child { + border-radius: 0 4px 4px 0; + border-right-width: 1px; + --mdc-shape-small: 0 4px 4px 0; + --mdc-button-outline-width: 1px; + } + mwc-button:last-child::before { + border-radius: 0 4px 4px 0; + } + ha-icon-button:only-child, + mwc-button:only-child { + --mdc-shape-small: 4px; + border-right-width: 1px; + } + `; } declare global { diff --git a/src/components/ha-camera-stream.ts b/src/components/ha-camera-stream.ts index 92e54fe780..229ec729f7 100644 --- a/src/components/ha-camera-stream.ts +++ b/src/components/ha-camera-stream.ts @@ -1,11 +1,4 @@ -import { - css, - type CSSResultGroup, - html, - LitElement, - nothing, - type PropertyValues, -} from "lit"; +import { css, html, LitElement, nothing, type PropertyValues } from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; import memoizeOne from "memoize-one"; @@ -28,10 +21,10 @@ import "./ha-web-rtc-player"; const MJPEG_STREAM = "mjpeg"; -type Stream = { +interface Stream { type: StreamType | typeof MJPEG_STREAM; visible: boolean; -}; +} @customElement("ha-camera-stream") export class HaCameraStream extends LitElement { @@ -256,22 +249,20 @@ export class HaCameraStream extends LitElement { } ); - static get styles(): CSSResultGroup { - return css` - :host, - img { - display: block; - } + static styles = css` + :host, + img { + display: block; + } - img { - width: 100%; - } + img { + width: 100%; + } - .hidden { - display: none; - } - `; - } + .hidden { + display: none; + } + `; } declare global { diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts index 0d5a45130c..5151bbf541 100644 --- a/src/components/ha-card.ts +++ b/src/components/ha-card.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; @@ -8,70 +7,65 @@ export class HaCard extends LitElement { @property({ type: Boolean, reflect: true }) public raised = false; - static get styles(): CSSResultGroup { - return css` - :host { - background: var( - --ha-card-background, - var(--card-background-color, white) - ); - -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none); - backdrop-filter: var(--ha-card-backdrop-filter, none); - box-shadow: var(--ha-card-box-shadow, none); - box-sizing: border-box; - border-radius: var(--ha-card-border-radius, 12px); - border-width: var(--ha-card-border-width, 1px); - border-style: solid; - border-color: var( - --ha-card-border-color, - var(--divider-color, #e0e0e0) - ); - color: var(--primary-text-color); - display: block; - transition: all 0.3s ease-out; - position: relative; - } + static styles = css` + :host { + background: var( + --ha-card-background, + var(--card-background-color, white) + ); + -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none); + backdrop-filter: var(--ha-card-backdrop-filter, none); + box-shadow: var(--ha-card-box-shadow, none); + box-sizing: border-box; + border-radius: var(--ha-card-border-radius, 12px); + border-width: var(--ha-card-border-width, 1px); + border-style: solid; + border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0)); + color: var(--primary-text-color); + display: block; + transition: all 0.3s ease-out; + position: relative; + } - :host([raised]) { - border: none; - box-shadow: var( - --ha-card-box-shadow, - 0px 2px 1px -1px rgba(0, 0, 0, 0.2), - 0px 1px 1px 0px rgba(0, 0, 0, 0.14), - 0px 1px 3px 0px rgba(0, 0, 0, 0.12) - ); - } + :host([raised]) { + border: none; + box-shadow: var( + --ha-card-box-shadow, + 0px 2px 1px -1px rgba(0, 0, 0, 0.2), + 0px 1px 1px 0px rgba(0, 0, 0, 0.14), + 0px 1px 3px 0px rgba(0, 0, 0, 0.12) + ); + } - .card-header, - :host ::slotted(.card-header) { - color: var(--ha-card-header-color, var(--primary-text-color)); - font-family: var(--ha-card-header-font-family, inherit); - font-size: var(--ha-card-header-font-size, 24px); - letter-spacing: -0.012em; - line-height: 48px; - padding: 12px 16px 16px; - display: block; - margin-block-start: 0px; - margin-block-end: 0px; - font-weight: normal; - } + .card-header, + :host ::slotted(.card-header) { + color: var(--ha-card-header-color, var(--primary-text-color)); + font-family: var(--ha-card-header-font-family, inherit); + font-size: var(--ha-card-header-font-size, 24px); + letter-spacing: -0.012em; + line-height: 48px; + padding: 12px 16px 16px; + display: block; + margin-block-start: 0px; + margin-block-end: 0px; + font-weight: normal; + } - :host ::slotted(.card-content:not(:first-child)), - slot:not(:first-child)::slotted(.card-content) { - padding-top: 0px; - margin-top: -8px; - } + :host ::slotted(.card-content:not(:first-child)), + slot:not(:first-child)::slotted(.card-content) { + padding-top: 0px; + margin-top: -8px; + } - :host ::slotted(.card-content) { - padding: 16px; - } + :host ::slotted(.card-content) { + padding: 16px; + } - :host ::slotted(.card-actions) { - border-top: 1px solid var(--divider-color, #e8e8e8); - padding: 5px 16px; - } - `; - } + :host ::slotted(.card-actions) { + border-top: 1px solid var(--divider-color, #e8e8e8); + padding: 5px 16px; + } + `; protected render() { return html` diff --git a/src/components/ha-climate-state.ts b/src/components/ha-climate-state.ts index 23a957c8a8..e99b8f64e1 100644 --- a/src/components/ha-climate-state.ts +++ b/src/components/ha-climate-state.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import type { ClimateEntity } from "../data/climate"; @@ -136,34 +136,32 @@ class HaClimateState extends LitElement { return stateString; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - flex-direction: column; - justify-content: center; - white-space: nowrap; - } + static styles = css` + :host { + display: flex; + flex-direction: column; + justify-content: center; + white-space: nowrap; + } - .target { - color: var(--primary-text-color); - } + .target { + color: var(--primary-text-color); + } - .current { - color: var(--secondary-text-color); - direction: var(--direction); - } + .current { + color: var(--secondary-text-color); + direction: var(--direction); + } - .state-label { - font-weight: bold; - } + .state-label { + font-weight: bold; + } - .unit { - display: inline-block; - direction: ltr; - } - `; - } + .unit { + display: inline-block; + direction: ltr; + } + `; } declare global { diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts index c43fc4ff9a..17003c8e0b 100644 --- a/src/components/ha-code-editor.ts +++ b/src/components/ha-code-editor.ts @@ -7,7 +7,7 @@ import type { import type { Extension, TransactionSpec } from "@codemirror/state"; import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view"; import type { HassEntities } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, ReactiveElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -339,13 +339,11 @@ export class HaCodeEditor extends ReactiveElement { return []; }; - static get styles(): CSSResultGroup { - return css` - :host(.error-state) .cm-gutters { - border-color: var(--error-state-color, red); - } - `; - } + static styles = css` + :host(.error-state) .cm-gutters { + border-color: var(--error-state-color, red); + } + `; } declare global { diff --git a/src/components/ha-color-picker.ts b/src/components/ha-color-picker.ts index ca34ba7561..b071ebe3c8 100644 --- a/src/components/ha-color-picker.ts +++ b/src/components/ha-color-picker.ts @@ -150,22 +150,20 @@ export class HaColorPicker extends LitElement { `; } - static get styles() { - return css` - .circle-color { - display: block; - background-color: var(--circle-color, var(--divider-color)); - border: 1px solid var(--outline-color); - border-radius: 10px; - width: 20px; - height: 20px; - box-sizing: border-box; - } - ha-select { - width: 100%; - } - `; - } + static styles = css` + .circle-color { + display: block; + background-color: var(--circle-color, var(--divider-color)); + border: 1px solid var(--outline-color); + border-radius: 10px; + width: 20px; + height: 20px; + box-sizing: border-box; + } + ha-select { + width: 100%; + } + `; } declare global { diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts index cfca0bc9f5..568eff9912 100644 --- a/src/components/ha-combo-box.ts +++ b/src/components/ha-combo-box.ts @@ -10,7 +10,7 @@ import type { ComboBoxLightValueChangedEvent, } from "@vaadin/combo-box/vaadin-combo-box-light"; import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -324,49 +324,47 @@ export class HaComboBox extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - width: 100%; - } - vaadin-combo-box-light { - position: relative; - --vaadin-combo-box-overlay-max-height: calc(45vh - 56px); - } - ha-textfield { - width: 100%; - } - ha-textfield > ha-icon-button { - --mdc-icon-button-size: 24px; - padding: 2px; - color: var(--secondary-text-color); - } - ha-svg-icon { - color: var(--input-dropdown-icon-color); - position: absolute; - cursor: pointer; - } - .toggle-button { - right: 12px; - top: -10px; - inset-inline-start: initial; - inset-inline-end: 12px; - direction: var(--direction); - } - :host([opened]) .toggle-button { - color: var(--primary-color); - } - .clear-button { - --mdc-icon-size: 20px; - top: -7px; - right: 36px; - inset-inline-start: initial; - inset-inline-end: 36px; - direction: var(--direction); - } - `; - } + static styles = css` + :host { + display: block; + width: 100%; + } + vaadin-combo-box-light { + position: relative; + --vaadin-combo-box-overlay-max-height: calc(45vh - 56px); + } + ha-textfield { + width: 100%; + } + ha-textfield > ha-icon-button { + --mdc-icon-button-size: 24px; + padding: 2px; + color: var(--secondary-text-color); + } + ha-svg-icon { + color: var(--input-dropdown-icon-color); + position: absolute; + cursor: pointer; + } + .toggle-button { + right: 12px; + top: -10px; + inset-inline-start: initial; + inset-inline-end: 12px; + direction: var(--direction); + } + :host([opened]) .toggle-button { + color: var(--primary-color); + } + .clear-button { + --mdc-icon-size: 20px; + top: -7px; + right: 36px; + inset-inline-start: initial; + inset-inline-end: 36px; + direction: var(--direction); + } + `; } declare global { diff --git a/src/components/ha-control-button-group.ts b/src/components/ha-control-button-group.ts index dad718d693..5c59d0801f 100644 --- a/src/components/ha-control-button-group.ts +++ b/src/components/ha-control-button-group.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; @@ -15,46 +15,44 @@ export class HaControlButtonGroup extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - --control-button-group-spacing: 12px; - --control-button-group-thickness: 40px; - height: var(--control-button-group-thickness); - width: auto; - display: block; - } - .container { - display: flex; - flex-direction: row; - width: 100%; - height: 100%; - } - ::slotted(*) { - flex: 1; - height: 100%; - width: 100%; - } - ::slotted(*:not(:last-child)) { - margin-right: var(--control-button-group-spacing); - margin-inline-end: var(--control-button-group-spacing); - margin-inline-start: initial; - direction: var(--direction); - } - :host([vertical]) { - width: var(--control-button-group-thickness); - height: auto; - } - :host([vertical]) .container { - flex-direction: column; - } - :host([vertical]) ::slotted(ha-control-button:not(:last-child)) { - margin-right: initial; - margin-inline-end: initial; - margin-bottom: var(--control-button-group-spacing); - } - `; - } + static styles = css` + :host { + --control-button-group-spacing: 12px; + --control-button-group-thickness: 40px; + height: var(--control-button-group-thickness); + width: auto; + display: block; + } + .container { + display: flex; + flex-direction: row; + width: 100%; + height: 100%; + } + ::slotted(*) { + flex: 1; + height: 100%; + width: 100%; + } + ::slotted(*:not(:last-child)) { + margin-right: var(--control-button-group-spacing); + margin-inline-end: var(--control-button-group-spacing); + margin-inline-start: initial; + direction: var(--direction); + } + :host([vertical]) { + width: var(--control-button-group-thickness); + height: auto; + } + :host([vertical]) .container { + flex-direction: column; + } + :host([vertical]) ::slotted(ha-control-button:not(:last-child)) { + margin-right: initial; + margin-inline-end: initial; + margin-bottom: var(--control-button-group-spacing); + } + `; } declare global { diff --git a/src/components/ha-control-button.ts b/src/components/ha-control-button.ts index 1135ccc2c9..e86026ea3f 100644 --- a/src/components/ha-control-button.ts +++ b/src/components/ha-control-button.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -25,83 +25,81 @@ export class HaControlButton extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - --control-button-icon-color: var(--primary-text-color); - --control-button-background-color: var(--disabled-color); - --control-button-background-opacity: 0.2; - --control-button-border-radius: 10px; - --control-button-padding: 8px; - --mdc-icon-size: 20px; - --ha-ripple-color: var(--secondary-text-color); - color: var(--primary-text-color); - width: 40px; - height: 40px; - -webkit-tap-highlight-color: transparent; - } - .button { - overflow: hidden; - position: relative; - cursor: pointer; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - text-align: center; - width: 100%; - height: 100%; - border-radius: var(--control-button-border-radius); - border: none; - margin: 0; - padding: var(--control-button-padding); - box-sizing: border-box; - line-height: inherit; - font-family: Roboto; - font-weight: 500; - outline: none; - overflow: hidden; - background: none; - /* For safari border-radius overflow */ - z-index: 0; - font-size: inherit; - color: inherit; - } - .button:focus-visible { - --control-button-background-opacity: 0.4; - } - .button::before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: var(--control-button-background-color); - transition: - background-color 180ms ease-in-out, - opacity 180ms ease-in-out; - opacity: var(--control-button-background-opacity); - pointer-events: none; - white-space: normal; - } - .button { - transition: color 180ms ease-in-out; - color: var(--control-button-icon-color); - } - .button ::slotted(*) { - pointer-events: none; - opacity: 0.95; - } - .button:disabled { - cursor: not-allowed; - --control-button-background-color: var(--disabled-color); - --control-button-icon-color: var(--disabled-text-color); - --control-button-background-opacity: 0.2; - } - `; - } + static styles = css` + :host { + display: block; + --control-button-icon-color: var(--primary-text-color); + --control-button-background-color: var(--disabled-color); + --control-button-background-opacity: 0.2; + --control-button-border-radius: 10px; + --control-button-padding: 8px; + --mdc-icon-size: 20px; + --ha-ripple-color: var(--secondary-text-color); + color: var(--primary-text-color); + width: 40px; + height: 40px; + -webkit-tap-highlight-color: transparent; + } + .button { + overflow: hidden; + position: relative; + cursor: pointer; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + text-align: center; + width: 100%; + height: 100%; + border-radius: var(--control-button-border-radius); + border: none; + margin: 0; + padding: var(--control-button-padding); + box-sizing: border-box; + line-height: inherit; + font-family: Roboto; + font-weight: 500; + outline: none; + overflow: hidden; + background: none; + /* For safari border-radius overflow */ + z-index: 0; + font-size: inherit; + color: inherit; + } + .button:focus-visible { + --control-button-background-opacity: 0.4; + } + .button::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: var(--control-button-background-color); + transition: + background-color 180ms ease-in-out, + opacity 180ms ease-in-out; + opacity: var(--control-button-background-opacity); + pointer-events: none; + white-space: normal; + } + .button { + transition: color 180ms ease-in-out; + color: var(--control-button-icon-color); + } + .button ::slotted(*) { + pointer-events: none; + opacity: 0.95; + } + .button:disabled { + cursor: not-allowed; + --control-button-background-color: var(--disabled-color); + --control-button-icon-color: var(--disabled-text-color); + --control-button-background-opacity: 0.2; + } + `; } declare global { diff --git a/src/components/ha-control-circular-slider.ts b/src/components/ha-control-circular-slider.ts index 9af6513437..cde293ae9f 100644 --- a/src/components/ha-control-circular-slider.ts +++ b/src/components/ha-control-circular-slider.ts @@ -6,7 +6,7 @@ import { Tap, TouchMouseInput, } from "@egjs/hammerjs"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing, svg } from "lit"; import { customElement, @@ -683,163 +683,159 @@ export class HaControlCircularSlider extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - --control-circular-slider-color: var(--primary-color); - --control-circular-slider-background: var(--disabled-color); - --control-circular-slider-background-opacity: 0.3; - --control-circular-slider-low-color: var( - --control-circular-slider-color - ); - --control-circular-slider-high-color: var( - --control-circular-slider-color - ); - --control-circular-slider-interaction-margin: 12px; - width: 320px; - display: block; - } - svg { - width: 100%; - display: block; - pointer-events: none; - } - g { - fill: none; - } - #slider { - outline: none; - } - path[data-interaction] { - fill: none; - cursor: pointer; - pointer-events: auto; - stroke: transparent; - stroke-linecap: round; - stroke-width: calc( - 24px + 2 * var(--control-circular-slider-interaction-margin) - ); - } - circle[data-interaction] { - r: calc(12px + var(--control-circular-slider-interaction-margin)); - fill: transparent; - cursor: pointer; - pointer-events: auto; - } - :host([disabled]) [data-interaction], - :host([readonly]) [data-interaction] { - cursor: initial; - pointer-events: none; - } + static styles = css` + :host { + --control-circular-slider-color: var(--primary-color); + --control-circular-slider-background: var(--disabled-color); + --control-circular-slider-background-opacity: 0.3; + --control-circular-slider-low-color: var(--control-circular-slider-color); + --control-circular-slider-high-color: var( + --control-circular-slider-color + ); + --control-circular-slider-interaction-margin: 12px; + width: 320px; + display: block; + } + svg { + width: 100%; + display: block; + pointer-events: none; + } + g { + fill: none; + } + #slider { + outline: none; + } + path[data-interaction] { + fill: none; + cursor: pointer; + pointer-events: auto; + stroke: transparent; + stroke-linecap: round; + stroke-width: calc( + 24px + 2 * var(--control-circular-slider-interaction-margin) + ); + } + circle[data-interaction] { + r: calc(12px + var(--control-circular-slider-interaction-margin)); + fill: transparent; + cursor: pointer; + pointer-events: auto; + } + :host([disabled]) [data-interaction], + :host([readonly]) [data-interaction] { + cursor: initial; + pointer-events: none; + } - .background { - fill: none; - stroke: var(--control-circular-slider-background); - opacity: var(--control-circular-slider-background-opacity); - transition: - stroke 180ms ease-in-out, - opacity 180ms ease-in-out; - stroke-linecap: round; - stroke-width: 24px; - } + .background { + fill: none; + stroke: var(--control-circular-slider-background); + opacity: var(--control-circular-slider-background-opacity); + transition: + stroke 180ms ease-in-out, + opacity 180ms ease-in-out; + stroke-linecap: round; + stroke-width: 24px; + } - .arc { - fill: none; - stroke-linecap: round; - stroke-width: 24px; - transition: - stroke-width 300ms ease-in-out, - stroke-dasharray 300ms ease-in-out, - stroke-dashoffset 300ms ease-in-out, - stroke 180ms ease-in-out, - opacity 180ms ease-in-out; - } + .arc { + fill: none; + stroke-linecap: round; + stroke-width: 24px; + transition: + stroke-width 300ms ease-in-out, + stroke-dasharray 300ms ease-in-out, + stroke-dashoffset 300ms ease-in-out, + stroke 180ms ease-in-out, + opacity 180ms ease-in-out; + } - .target { - fill: none; - stroke-linecap: round; - stroke-width: 18px; - stroke: white; - transition: - stroke-width 300ms ease-in-out, - stroke-dasharray 300ms ease-in-out, - stroke-dashoffset 300ms ease-in-out, - stroke 180ms ease-in-out, - opacity 180ms ease-in-out; - } + .target { + fill: none; + stroke-linecap: round; + stroke-width: 18px; + stroke: white; + transition: + stroke-width 300ms ease-in-out, + stroke-dasharray 300ms ease-in-out, + stroke-dashoffset 300ms ease-in-out, + stroke 180ms ease-in-out, + opacity 180ms ease-in-out; + } - .target-border { - fill: none; - stroke-linecap: round; - stroke-width: 24px; - stroke: white; - transition: - stroke-width 300ms ease-in-out, - stroke-dasharray 300ms ease-in-out, - stroke-dashoffset 300ms ease-in-out, - stroke 180ms ease-in-out, - opacity 180ms ease-in-out; - } + .target-border { + fill: none; + stroke-linecap: round; + stroke-width: 24px; + stroke: white; + transition: + stroke-width 300ms ease-in-out, + stroke-dasharray 300ms ease-in-out, + stroke-dashoffset 300ms ease-in-out, + stroke 180ms ease-in-out, + opacity 180ms ease-in-out; + } - .current { - fill: none; - stroke-linecap: round; - stroke-width: 8px; - stroke: var(--primary-text-color); - opacity: 0.5; - transition: - stroke-width 300ms ease-in-out, - stroke-dasharray 300ms ease-in-out, - stroke-dashoffset 300ms ease-in-out, - stroke 180ms ease-in-out, - opacity 180ms ease-in-out; - } + .current { + fill: none; + stroke-linecap: round; + stroke-width: 8px; + stroke: var(--primary-text-color); + opacity: 0.5; + transition: + stroke-width 300ms ease-in-out, + stroke-dasharray 300ms ease-in-out, + stroke-dashoffset 300ms ease-in-out, + stroke 180ms ease-in-out, + opacity 180ms ease-in-out; + } - .arc-current { - stroke: var(--clear-background-color); - } + .arc-current { + stroke: var(--clear-background-color); + } - .arc-clear { - stroke: var(--clear-background-color); - } - .arc-colored { - opacity: 0.5; - } - .arc-active { - outline: none; - } - .arc-active:focus-visible { - stroke-width: 28px; - } + .arc-clear { + stroke: var(--clear-background-color); + } + .arc-colored { + opacity: 0.5; + } + .arc-active { + outline: none; + } + .arc-active:focus-visible { + stroke-width: 28px; + } - .pressed .arc, - .pressed .target, - .pressed .target-border, - .pressed .current { - transition: - stroke-width 300ms ease-in-out, - stroke 180ms ease-in-out, - opacity 180ms ease-in-out; - } + .pressed .arc, + .pressed .target, + .pressed .target-border, + .pressed .current { + transition: + stroke-width 300ms ease-in-out, + stroke 180ms ease-in-out, + opacity 180ms ease-in-out; + } - .inactive .arc, - .inactive .arc-current { - opacity: 0; - } + .inactive .arc, + .inactive .arc-current { + opacity: 0; + } - .value { - stroke: var(--control-circular-slider-color); - } + .value { + stroke: var(--control-circular-slider-color); + } - .low { - stroke: var(--control-circular-slider-low-color); - } + .low { + stroke: var(--control-circular-slider-low-color); + } - .high { - stroke: var(--control-circular-slider-high-color); - } - `; - } + .high { + stroke: var(--control-circular-slider-high-color); + } + `; } declare global { diff --git a/src/components/ha-control-number-buttons.ts b/src/components/ha-control-number-buttons.ts index 06e0ba1949..50400bf7f8 100644 --- a/src/components/ha-control-number-buttons.ts +++ b/src/components/ha-control-number-buttons.ts @@ -1,6 +1,6 @@ import { ResizeController } from "@lit-labs/observers/resize-controller"; import { mdiMinus, mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -181,110 +181,108 @@ export class HaControlNumberButton extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - --control-number-buttons-focus-color: var(--primary-color); - --control-number-buttons-background-color: var(--disabled-color); - --control-number-buttons-background-opacity: 0.2; - --control-number-buttons-border-radius: 10px; - --mdc-icon-size: 16px; - height: var(--feature-height); - width: 100%; - color: var(--primary-text-color); - -webkit-tap-highlight-color: transparent; - font-style: normal; - font-weight: 500; - transition: color 180ms ease-in-out; - } - :host([disabled]) { - color: var(--disabled-color); - } - .container { - position: relative; - width: 100%; - height: 100%; - container-type: inline-size; - container-name: container; - } - .value { - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - position: relative; - width: 100%; - height: 100%; - padding: 0 44px; - border-radius: var(--control-number-buttons-border-radius); - padding: 0; - margin: 0; - box-sizing: border-box; - line-height: 0; - overflow: hidden; - /* For safari border-radius overflow */ - z-index: 0; - font-size: inherit; - color: inherit; - user-select: none; - -webkit-tap-highlight-color: transparent; - outline: none; - } - .value::before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: var(--control-number-buttons-background-color); - transition: - background-color 180ms ease-in-out, - opacity 180ms ease-in-out; - opacity: var(--control-number-buttons-background-opacity); - } - .value:focus-visible { - box-shadow: 0 0 0 2px var(--control-number-buttons-focus-color); - } - .button { - color: inherit; - position: absolute; - top: 0; - bottom: 0; - padding: 0; - width: 35px; - height: 40px; - border: none; - background: none; - cursor: pointer; - outline: none; - } - .button[disabled] { - opacity: 0.4; - pointer-events: none; - cursor: not-allowed; - } - .button.minus { - left: 0; - inset-inline-start: 0; - inset-inline-end: initial; - } - .button.plus { - right: 0; - inset-inline-start: initial; - inset-inline-end: 0; - } + static styles = css` + :host { + display: block; + --control-number-buttons-focus-color: var(--primary-color); + --control-number-buttons-background-color: var(--disabled-color); + --control-number-buttons-background-opacity: 0.2; + --control-number-buttons-border-radius: 10px; + --mdc-icon-size: 16px; + height: var(--feature-height); + width: 100%; + color: var(--primary-text-color); + -webkit-tap-highlight-color: transparent; + font-style: normal; + font-weight: 500; + transition: color 180ms ease-in-out; + } + :host([disabled]) { + color: var(--disabled-color); + } + .container { + position: relative; + width: 100%; + height: 100%; + container-type: inline-size; + container-name: container; + } + .value { + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + position: relative; + width: 100%; + height: 100%; + padding: 0 44px; + border-radius: var(--control-number-buttons-border-radius); + padding: 0; + margin: 0; + box-sizing: border-box; + line-height: 0; + overflow: hidden; + /* For safari border-radius overflow */ + z-index: 0; + font-size: inherit; + color: inherit; + user-select: none; + -webkit-tap-highlight-color: transparent; + outline: none; + } + .value::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: var(--control-number-buttons-background-color); + transition: + background-color 180ms ease-in-out, + opacity 180ms ease-in-out; + opacity: var(--control-number-buttons-background-opacity); + } + .value:focus-visible { + box-shadow: 0 0 0 2px var(--control-number-buttons-focus-color); + } + .button { + color: inherit; + position: absolute; + top: 0; + bottom: 0; + padding: 0; + width: 35px; + height: 40px; + border: none; + background: none; + cursor: pointer; + outline: none; + } + .button[disabled] { + opacity: 0.4; + pointer-events: none; + cursor: not-allowed; + } + .button.minus { + left: 0; + inset-inline-start: 0; + inset-inline-end: initial; + } + .button.plus { + right: 0; + inset-inline-start: initial; + inset-inline-end: 0; + } + .unit { + white-space: pre; + } + @container container (max-width: 100px) { .unit { - white-space: pre; + display: none; } - @container container (max-width: 100px) { - .unit { - display: none; - } - } - `; - } + } + `; } declare global { diff --git a/src/components/ha-control-select.ts b/src/components/ha-control-select.ts index dbd7e5709a..c3d245b829 100644 --- a/src/components/ha-control-select.ts +++ b/src/components/ha-control-select.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -8,12 +8,12 @@ import { fireEvent } from "../common/dom/fire_event"; import "./ha-icon"; import "./ha-svg-icon"; -export type ControlSelectOption = { +export interface ControlSelectOption { value: string; label?: string; icon?: TemplateResult; path?: string; -}; +} @customElement("ha-control-select") export class HaControlSelect extends LitElement { @@ -186,150 +186,148 @@ export class HaControlSelect extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - --control-select-color: var(--primary-color); - --control-select-focused-opacity: 0.2; - --control-select-selected-opacity: 1; - --control-select-background: var(--disabled-color); - --control-select-background-opacity: 0.2; - --control-select-thickness: 40px; - --control-select-border-radius: 10px; - --control-select-padding: 4px; - --control-select-button-border-radius: calc( - var(--control-select-border-radius) - var(--control-select-padding) - ); - --mdc-icon-size: 20px; - height: var(--control-select-thickness); - width: 100%; - border-radius: var(--control-select-border-radius); - outline: none; - transition: box-shadow 180ms ease-in-out; - font-style: normal; - font-weight: 500; - color: var(--primary-text-color); - user-select: none; - -webkit-tap-highlight-color: transparent; - } - :host(:focus-visible) { - box-shadow: 0 0 0 2px var(--control-select-color); - } - :host([vertical]) { - width: var(--control-select-thickness); - height: 100%; - } - .container { - position: relative; - height: 100%; - width: 100%; - border-radius: var(--control-select-border-radius); - transform: translateZ(0); - overflow: hidden; - display: flex; - flex-direction: row; - padding: var(--control-select-padding); - box-sizing: border-box; - } - .container::before { - position: absolute; - content: ""; - top: 0; - left: 0; - height: 100%; - width: 100%; - background: var(--control-select-background); - opacity: var(--control-select-background-opacity); - } + static styles = css` + :host { + display: block; + --control-select-color: var(--primary-color); + --control-select-focused-opacity: 0.2; + --control-select-selected-opacity: 1; + --control-select-background: var(--disabled-color); + --control-select-background-opacity: 0.2; + --control-select-thickness: 40px; + --control-select-border-radius: 10px; + --control-select-padding: 4px; + --control-select-button-border-radius: calc( + var(--control-select-border-radius) - var(--control-select-padding) + ); + --mdc-icon-size: 20px; + height: var(--control-select-thickness); + width: 100%; + border-radius: var(--control-select-border-radius); + outline: none; + transition: box-shadow 180ms ease-in-out; + font-style: normal; + font-weight: 500; + color: var(--primary-text-color); + user-select: none; + -webkit-tap-highlight-color: transparent; + } + :host(:focus-visible) { + box-shadow: 0 0 0 2px var(--control-select-color); + } + :host([vertical]) { + width: var(--control-select-thickness); + height: 100%; + } + .container { + position: relative; + height: 100%; + width: 100%; + border-radius: var(--control-select-border-radius); + transform: translateZ(0); + overflow: hidden; + display: flex; + flex-direction: row; + padding: var(--control-select-padding); + box-sizing: border-box; + } + .container::before { + position: absolute; + content: ""; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: var(--control-select-background); + opacity: var(--control-select-background-opacity); + } - .container > *:not(:last-child) { - margin-right: var(--control-select-padding); - margin-inline-end: var(--control-select-padding); - margin-inline-start: initial; - direction: var(--direction); - } - .option { - cursor: pointer; - position: relative; - flex: 1; - height: 100%; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - border-radius: var(--control-select-button-border-radius); - overflow: hidden; - /* For safari border-radius overflow */ - z-index: 0; - } - .content > *:not(:last-child) { - margin-bottom: 4px; - } - .option::before { - position: absolute; - content: ""; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: var(--control-select-color); - opacity: 0; - transition: - background-color ease-in-out 180ms, - opacity ease-in-out 80ms; - } - .option.focused::before, - .option:hover::before { - opacity: var(--control-select-focused-opacity); - } - .option.selected { - color: white; - } - .option.selected::before { - opacity: var(--control-select-selected-opacity); - } - .option .content { - position: relative; - pointer-events: none; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - text-align: center; - padding: 2px; - width: 100%; - box-sizing: border-box; - } - .option .content span { - display: block; - width: 100%; - -webkit-hyphens: auto; - -moz-hyphens: auto; - hyphens: auto; - } - :host([vertical]) { - width: var(--control-select-thickness); - height: auto; - } - :host([vertical]) .container { - flex-direction: column; - } - :host([vertical]) .container > *:not(:last-child) { - margin-right: initial; - margin-inline-end: initial; - margin-bottom: var(--control-select-padding); - } - :host([disabled]) { - --control-select-color: var(--disabled-color); - --control-select-focused-opacity: 0; - color: var(--disabled-color); - } - :host([disabled]) .option { - cursor: not-allowed; - } - `; - } + .container > *:not(:last-child) { + margin-right: var(--control-select-padding); + margin-inline-end: var(--control-select-padding); + margin-inline-start: initial; + direction: var(--direction); + } + .option { + cursor: pointer; + position: relative; + flex: 1; + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + border-radius: var(--control-select-button-border-radius); + overflow: hidden; + /* For safari border-radius overflow */ + z-index: 0; + } + .content > *:not(:last-child) { + margin-bottom: 4px; + } + .option::before { + position: absolute; + content: ""; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: var(--control-select-color); + opacity: 0; + transition: + background-color ease-in-out 180ms, + opacity ease-in-out 80ms; + } + .option.focused::before, + .option:hover::before { + opacity: var(--control-select-focused-opacity); + } + .option.selected { + color: white; + } + .option.selected::before { + opacity: var(--control-select-selected-opacity); + } + .option .content { + position: relative; + pointer-events: none; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + padding: 2px; + width: 100%; + box-sizing: border-box; + } + .option .content span { + display: block; + width: 100%; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + :host([vertical]) { + width: var(--control-select-thickness); + height: auto; + } + :host([vertical]) .container { + flex-direction: column; + } + :host([vertical]) .container > *:not(:last-child) { + margin-right: initial; + margin-inline-end: initial; + margin-bottom: var(--control-select-padding); + } + :host([disabled]) { + --control-select-color: var(--disabled-color); + --control-select-focused-opacity: 0; + color: var(--disabled-color); + } + :host([disabled]) .option { + cursor: not-allowed; + } + `; } declare global { diff --git a/src/components/ha-control-slider.ts b/src/components/ha-control-slider.ts index 3d6b7f5817..eb4c2911ac 100644 --- a/src/components/ha-control-slider.ts +++ b/src/components/ha-control-slider.ts @@ -1,5 +1,5 @@ import { DIRECTION_ALL, Manager, Pan, Tap } from "@egjs/hammerjs"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -359,285 +359,277 @@ export class HaControlSlider extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - --control-slider-color: var(--primary-color); - --control-slider-background: var(--disabled-color); - --control-slider-background-opacity: 0.2; - --control-slider-thickness: 40px; - --control-slider-border-radius: 10px; - --control-slider-tooltip-font-size: 14px; - height: var(--control-slider-thickness); - width: 100%; - border-radius: var(--control-slider-border-radius); - outline: none; - transition: box-shadow 180ms ease-in-out; - } - :host(:focus-visible) { - box-shadow: 0 0 0 2px var(--control-slider-color); - } - :host([vertical]) { - width: var(--control-slider-thickness); - height: 100%; - } - .container { - position: relative; - height: 100%; - width: 100%; - --handle-size: 4px; - --handle-margin: calc(var(--control-slider-thickness) / 8); - } - .tooltip { - pointer-events: none; - user-select: none; - position: absolute; - background-color: var(--clear-background-color); - color: var(--primary-text-color); - font-size: var(--control-slider-tooltip-font-size); - border-radius: 0.8em; - padding: 0.2em 0.4em; - opacity: 0; - white-space: nowrap; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - transition: - opacity 180ms ease-in-out, - left 180ms ease-in-out, - bottom 180ms ease-in-out; - --handle-spacing: calc(2 * var(--handle-margin) + var(--handle-size)); - --slider-tooltip-margin: -4px; - --slider-tooltip-range: 100%; - --slider-tooltip-offset: 0px; - --slider-tooltip-position: calc( - min( - max( - var(--value) * var(--slider-tooltip-range) + - var(--slider-tooltip-offset), - 0% - ), - 100% - ) - ); - } - .tooltip.start { - --slider-tooltip-offset: calc(-0.5 * (var(--handle-spacing))); - } - .tooltip.end { - --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); - } - .tooltip.cursor { - --slider-tooltip-range: calc(100% - var(--handle-spacing)); - --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); - } - .tooltip.show-handle { - --slider-tooltip-range: calc(100% - var(--handle-spacing)); - --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); - } - .tooltip.visible { - opacity: 1; - } - .tooltip.top { - transform: translate3d(-50%, -100%, 0); - top: var(--slider-tooltip-margin); - left: 50%; - } - .tooltip.bottom { - transform: translate3d(-50%, 100%, 0); - bottom: var(--slider-tooltip-margin); - left: 50%; - } - .tooltip.left { - transform: translate3d(-100%, 50%, 0); - bottom: 50%; - left: var(--slider-tooltip-margin); - } - .tooltip.right { - transform: translate3d(100%, 50%, 0); - bottom: 50%; - right: var(--slider-tooltip-margin); - } - :host(:not([vertical])) .tooltip.top, - :host(:not([vertical])) .tooltip.bottom { - left: var(--slider-tooltip-position); - } - :host([vertical]) .tooltip.right, - :host([vertical]) .tooltip.left { - bottom: var(--slider-tooltip-position); - } - .slider { - position: relative; - height: 100%; - width: 100%; - border-radius: var(--control-slider-border-radius); - transform: translateZ(0); - overflow: hidden; - cursor: pointer; - } - .slider * { - pointer-events: none; - } - .slider .slider-track-background { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background: var(--control-slider-background); - opacity: var(--control-slider-background-opacity); - } - ::slotted([slot="background"]) { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - } - .slider .slider-track-bar { - --border-radius: var(--control-slider-border-radius); - --slider-size: 100%; - position: absolute; - height: 100%; - width: 100%; - background-color: var(--control-slider-color); - transition: - transform 180ms ease-in-out, - background-color 180ms ease-in-out; - } - .slider .slider-track-bar.show-handle { - --slider-size: calc( - 100% - 2 * var(--handle-margin) - var(--handle-size) - ); - } - .slider .slider-track-bar::after { - display: block; - content: ""; - position: absolute; - margin: auto; - border-radius: var(--handle-size); - background-color: white; - } - .slider .slider-track-bar { - top: 0; - left: 0; - transform: translate3d( - calc((var(--value, 0) - 1) * var(--slider-size)), - 0, - 0 - ); - border-radius: 0 8px 8px 0; - } - .slider .slider-track-bar:after { - top: 0; - bottom: 0; - right: var(--handle-margin); - height: 50%; - width: var(--handle-size); - } - .slider .slider-track-bar.end { - right: 0; - left: initial; - transform: translate3d( - calc(var(--value, 0) * var(--slider-size)), - 0, - 0 - ); - border-radius: 8px 0 0 8px; - } - .slider .slider-track-bar.end::after { - right: initial; - left: var(--handle-margin); - } + static styles = css` + :host { + display: block; + --control-slider-color: var(--primary-color); + --control-slider-background: var(--disabled-color); + --control-slider-background-opacity: 0.2; + --control-slider-thickness: 40px; + --control-slider-border-radius: 10px; + --control-slider-tooltip-font-size: 14px; + height: var(--control-slider-thickness); + width: 100%; + border-radius: var(--control-slider-border-radius); + outline: none; + transition: box-shadow 180ms ease-in-out; + } + :host(:focus-visible) { + box-shadow: 0 0 0 2px var(--control-slider-color); + } + :host([vertical]) { + width: var(--control-slider-thickness); + height: 100%; + } + .container { + position: relative; + height: 100%; + width: 100%; + --handle-size: 4px; + --handle-margin: calc(var(--control-slider-thickness) / 8); + } + .tooltip { + pointer-events: none; + user-select: none; + position: absolute; + background-color: var(--clear-background-color); + color: var(--primary-text-color); + font-size: var(--control-slider-tooltip-font-size); + border-radius: 0.8em; + padding: 0.2em 0.4em; + opacity: 0; + white-space: nowrap; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + transition: + opacity 180ms ease-in-out, + left 180ms ease-in-out, + bottom 180ms ease-in-out; + --handle-spacing: calc(2 * var(--handle-margin) + var(--handle-size)); + --slider-tooltip-margin: -4px; + --slider-tooltip-range: 100%; + --slider-tooltip-offset: 0px; + --slider-tooltip-position: calc( + min( + max( + var(--value) * var(--slider-tooltip-range) + + var(--slider-tooltip-offset), + 0% + ), + 100% + ) + ); + } + .tooltip.start { + --slider-tooltip-offset: calc(-0.5 * (var(--handle-spacing))); + } + .tooltip.end { + --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); + } + .tooltip.cursor { + --slider-tooltip-range: calc(100% - var(--handle-spacing)); + --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); + } + .tooltip.show-handle { + --slider-tooltip-range: calc(100% - var(--handle-spacing)); + --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); + } + .tooltip.visible { + opacity: 1; + } + .tooltip.top { + transform: translate3d(-50%, -100%, 0); + top: var(--slider-tooltip-margin); + left: 50%; + } + .tooltip.bottom { + transform: translate3d(-50%, 100%, 0); + bottom: var(--slider-tooltip-margin); + left: 50%; + } + .tooltip.left { + transform: translate3d(-100%, 50%, 0); + bottom: 50%; + left: var(--slider-tooltip-margin); + } + .tooltip.right { + transform: translate3d(100%, 50%, 0); + bottom: 50%; + right: var(--slider-tooltip-margin); + } + :host(:not([vertical])) .tooltip.top, + :host(:not([vertical])) .tooltip.bottom { + left: var(--slider-tooltip-position); + } + :host([vertical]) .tooltip.right, + :host([vertical]) .tooltip.left { + bottom: var(--slider-tooltip-position); + } + .slider { + position: relative; + height: 100%; + width: 100%; + border-radius: var(--control-slider-border-radius); + transform: translateZ(0); + overflow: hidden; + cursor: pointer; + } + .slider * { + pointer-events: none; + } + .slider .slider-track-background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background: var(--control-slider-background); + opacity: var(--control-slider-background-opacity); + } + ::slotted([slot="background"]) { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + } + .slider .slider-track-bar { + --border-radius: var(--control-slider-border-radius); + --slider-size: 100%; + position: absolute; + height: 100%; + width: 100%; + background-color: var(--control-slider-color); + transition: + transform 180ms ease-in-out, + background-color 180ms ease-in-out; + } + .slider .slider-track-bar.show-handle { + --slider-size: calc(100% - 2 * var(--handle-margin) - var(--handle-size)); + } + .slider .slider-track-bar::after { + display: block; + content: ""; + position: absolute; + margin: auto; + border-radius: var(--handle-size); + background-color: white; + } + .slider .slider-track-bar { + top: 0; + left: 0; + transform: translate3d( + calc((var(--value, 0) - 1) * var(--slider-size)), + 0, + 0 + ); + border-radius: 0 8px 8px 0; + } + .slider .slider-track-bar:after { + top: 0; + bottom: 0; + right: var(--handle-margin); + height: 50%; + width: var(--handle-size); + } + .slider .slider-track-bar.end { + right: 0; + left: initial; + transform: translate3d(calc(var(--value, 0) * var(--slider-size)), 0, 0); + border-radius: 8px 0 0 8px; + } + .slider .slider-track-bar.end::after { + right: initial; + left: var(--handle-margin); + } - :host([vertical]) .slider .slider-track-bar { - bottom: 0; - left: 0; - transform: translate3d( - 0, - calc((1 - var(--value, 0)) * var(--slider-size)), - 0 - ); - border-radius: 8px 8px 0 0; - } - :host([vertical]) .slider .slider-track-bar:after { - top: var(--handle-margin); - right: 0; - left: 0; - bottom: initial; - width: 50%; - height: var(--handle-size); - } - :host([vertical]) .slider .slider-track-bar.end { - top: 0; - bottom: initial; - transform: translate3d( - 0, - calc((0 - var(--value, 0)) * var(--slider-size)), - 0 - ); - border-radius: 0 0 8px 8px; - } - :host([vertical]) .slider .slider-track-bar.end::after { - top: initial; - bottom: var(--handle-margin); - } + :host([vertical]) .slider .slider-track-bar { + bottom: 0; + left: 0; + transform: translate3d( + 0, + calc((1 - var(--value, 0)) * var(--slider-size)), + 0 + ); + border-radius: 8px 8px 0 0; + } + :host([vertical]) .slider .slider-track-bar:after { + top: var(--handle-margin); + right: 0; + left: 0; + bottom: initial; + width: 50%; + height: var(--handle-size); + } + :host([vertical]) .slider .slider-track-bar.end { + top: 0; + bottom: initial; + transform: translate3d( + 0, + calc((0 - var(--value, 0)) * var(--slider-size)), + 0 + ); + border-radius: 0 0 8px 8px; + } + :host([vertical]) .slider .slider-track-bar.end::after { + top: initial; + bottom: var(--handle-margin); + } - .slider .slider-track-cursor:after { - display: block; - content: ""; - background-color: var(--secondary-text-color); - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - margin: auto; - border-radius: var(--handle-size); - } + .slider .slider-track-cursor:after { + display: block; + content: ""; + background-color: var(--secondary-text-color); + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + margin: auto; + border-radius: var(--handle-size); + } - .slider .slider-track-cursor { - --cursor-size: calc(var(--control-slider-thickness) / 4); - position: absolute; - background-color: white; - border-radius: var(--handle-size); - transition: - left 180ms ease-in-out, - bottom 180ms ease-in-out; - top: 0; - bottom: 0; - left: calc(var(--value, 0) * (100% - var(--cursor-size))); - width: var(--cursor-size); - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - } - .slider .slider-track-cursor:after { - height: 50%; - width: var(--handle-size); - } + .slider .slider-track-cursor { + --cursor-size: calc(var(--control-slider-thickness) / 4); + position: absolute; + background-color: white; + border-radius: var(--handle-size); + transition: + left 180ms ease-in-out, + bottom 180ms ease-in-out; + top: 0; + bottom: 0; + left: calc(var(--value, 0) * (100% - var(--cursor-size))); + width: var(--cursor-size); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + } + .slider .slider-track-cursor:after { + height: 50%; + width: var(--handle-size); + } - :host([vertical]) .slider .slider-track-cursor { - top: initial; - right: 0; - left: 0; - bottom: calc(var(--value, 0) * (100% - var(--cursor-size))); - height: var(--cursor-size); - width: 100%; - } - :host([vertical]) .slider .slider-track-cursor:after { - height: var(--handle-size); - width: 50%; - } - .pressed .tooltip { - transition: opacity 180ms ease-in-out; - } - .pressed .slider-track-bar, - .pressed .slider-track-cursor { - transition: none; - } - :host(:disabled) .slider { - cursor: not-allowed; - } - `; - } + :host([vertical]) .slider .slider-track-cursor { + top: initial; + right: 0; + left: 0; + bottom: calc(var(--value, 0) * (100% - var(--cursor-size))); + height: var(--cursor-size); + width: 100%; + } + :host([vertical]) .slider .slider-track-cursor:after { + height: var(--handle-size); + width: 50%; + } + .pressed .tooltip { + transition: opacity 180ms ease-in-out; + } + .pressed .slider-track-bar, + .pressed .slider-track-cursor { + transition: none; + } + :host(:disabled) .slider { + cursor: not-allowed; + } + `; } declare global { diff --git a/src/components/ha-control-switch.ts b/src/components/ha-control-switch.ts index ba14bd5215..23838bb60e 100644 --- a/src/components/ha-control-switch.ts +++ b/src/components/ha-control-switch.ts @@ -5,7 +5,7 @@ import { Swipe, Tap, } from "@egjs/hammerjs"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -147,105 +147,103 @@ export class HaControlSwitch extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - --control-switch-on-color: var(--primary-color); - --control-switch-off-color: var(--disabled-color); - --control-switch-background-opacity: 0.2; - --control-switch-thickness: 40px; - --control-switch-border-radius: 12px; - --control-switch-padding: 4px; - --mdc-icon-size: 20px; - height: var(--control-switch-thickness); - width: 100%; - box-sizing: border-box; - user-select: none; - cursor: pointer; - border-radius: var(--control-switch-border-radius); - outline: none; - transition: box-shadow 180ms ease-in-out; - -webkit-tap-highlight-color: transparent; - } - :host(:focus-visible) { - box-shadow: 0 0 0 2px var(--control-switch-off-color); - } - :host([checked]:focus-visible) { - box-shadow: 0 0 0 2px var(--control-switch-on-color); - } - .switch { - box-sizing: border-box; - position: relative; - height: 100%; - width: 100%; - border-radius: var(--control-switch-border-radius); - overflow: hidden; - padding: var(--control-switch-padding); - display: flex; - } - .switch .background { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: var(--control-switch-off-color); - transition: background-color 180ms ease-in-out; - opacity: var(--control-switch-background-opacity); - } - .switch .button { - width: 50%; - height: 100%; - background: lightgrey; - border-radius: calc( - var(--control-switch-border-radius) - var(--control-switch-padding) - ); - transition: - transform 180ms ease-in-out, - background-color 180ms ease-in-out; - background-color: var(--control-switch-off-color); - color: white; - display: flex; - align-items: center; - justify-content: center; - } - :host([checked]) .switch .background { - background-color: var(--control-switch-on-color); - } - :host([checked]) .switch .button { - transform: translateX(100%); - background-color: var(--control-switch-on-color); - } - :host([reversed]) .switch { - flex-direction: row-reverse; - } - :host([reversed][checked]) .switch .button { - transform: translateX(-100%); - } - :host([vertical]) { - width: var(--control-switch-thickness); - height: 100%; - } - :host([vertical][checked]) .switch .button { - transform: translateY(100%); - } - :host([vertical]) .switch .button { - width: 100%; - height: 50%; - } - :host([vertical][reversed]) .switch { - flex-direction: column-reverse; - } - :host([vertical][reversed][checked]) .switch .button { - transform: translateY(-100%); - } - :host([disabled]) { - opacity: 0.5; - cursor: not-allowed; - } - `; - } + static styles = css` + :host { + display: block; + --control-switch-on-color: var(--primary-color); + --control-switch-off-color: var(--disabled-color); + --control-switch-background-opacity: 0.2; + --control-switch-thickness: 40px; + --control-switch-border-radius: 12px; + --control-switch-padding: 4px; + --mdc-icon-size: 20px; + height: var(--control-switch-thickness); + width: 100%; + box-sizing: border-box; + user-select: none; + cursor: pointer; + border-radius: var(--control-switch-border-radius); + outline: none; + transition: box-shadow 180ms ease-in-out; + -webkit-tap-highlight-color: transparent; + } + :host(:focus-visible) { + box-shadow: 0 0 0 2px var(--control-switch-off-color); + } + :host([checked]:focus-visible) { + box-shadow: 0 0 0 2px var(--control-switch-on-color); + } + .switch { + box-sizing: border-box; + position: relative; + height: 100%; + width: 100%; + border-radius: var(--control-switch-border-radius); + overflow: hidden; + padding: var(--control-switch-padding); + display: flex; + } + .switch .background { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: var(--control-switch-off-color); + transition: background-color 180ms ease-in-out; + opacity: var(--control-switch-background-opacity); + } + .switch .button { + width: 50%; + height: 100%; + background: lightgrey; + border-radius: calc( + var(--control-switch-border-radius) - var(--control-switch-padding) + ); + transition: + transform 180ms ease-in-out, + background-color 180ms ease-in-out; + background-color: var(--control-switch-off-color); + color: white; + display: flex; + align-items: center; + justify-content: center; + } + :host([checked]) .switch .background { + background-color: var(--control-switch-on-color); + } + :host([checked]) .switch .button { + transform: translateX(100%); + background-color: var(--control-switch-on-color); + } + :host([reversed]) .switch { + flex-direction: row-reverse; + } + :host([reversed][checked]) .switch .button { + transform: translateX(-100%); + } + :host([vertical]) { + width: var(--control-switch-thickness); + height: 100%; + } + :host([vertical][checked]) .switch .button { + transform: translateY(100%); + } + :host([vertical]) .switch .button { + width: 100%; + height: 50%; + } + :host([vertical][reversed]) .switch { + flex-direction: column-reverse; + } + :host([vertical][reversed][checked]) .switch .button { + transform: translateY(-100%); + } + :host([disabled]) { + opacity: 0.5; + cursor: not-allowed; + } + `; } declare global { diff --git a/src/components/ha-conversation-agent-picker.ts b/src/components/ha-conversation-agent-picker.ts index e7116b1f80..cc11aed7ed 100644 --- a/src/components/ha-conversation-agent-picker.ts +++ b/src/components/ha-conversation-agent-picker.ts @@ -1,5 +1,5 @@ import { mdiCog } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -190,20 +190,18 @@ export class HaConversationAgentPicker extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - } - ha-select { - width: 100%; - } - ha-icon-button { - color: var(--secondary-text-color); - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + } + ha-select { + width: 100%; + } + ha-icon-button { + color: var(--secondary-text-color); + } + `; private _changed(ev): void { const target = ev.target as HaSelect; diff --git a/src/components/ha-country-picker.ts b/src/components/ha-country-picker.ts index 4e213ad863..2c5091da1e 100644 --- a/src/components/ha-country-picker.ts +++ b/src/components/ha-country-picker.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -335,13 +334,11 @@ export class HaCountryPicker extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-select { - width: 100%; - } - `; - } + static styles = css` + ha-select { + width: 100%; + } + `; private _changed(ev): void { const target = ev.target as HaSelect; diff --git a/src/components/ha-cover-controls.ts b/src/components/ha-cover-controls.ts index 71371a6e11..5645bf50a2 100644 --- a/src/components/ha-cover-controls.ts +++ b/src/components/ha-cover-controls.ts @@ -1,5 +1,4 @@ import { mdiStop } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -77,16 +76,14 @@ class HaCoverControls extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - .state { - white-space: nowrap; - } - .hidden { - visibility: hidden !important; - } - `; - } + static styles = css` + .state { + white-space: nowrap; + } + .hidden { + visibility: hidden !important; + } + `; } declare global { diff --git a/src/components/ha-cover-tilt-controls.ts b/src/components/ha-cover-tilt-controls.ts index a3ae976b4e..e71a5707ea 100644 --- a/src/components/ha-cover-tilt-controls.ts +++ b/src/components/ha-cover-tilt-controls.ts @@ -1,5 +1,4 @@ import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -84,16 +83,14 @@ class HaCoverTiltControls extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - white-space: nowrap; - } - .invisible { - visibility: hidden !important; - } - `; - } + static styles = css` + :host { + white-space: nowrap; + } + .invisible { + visibility: hidden !important; + } + `; } declare global { diff --git a/src/components/ha-currency-picker.ts b/src/components/ha-currency-picker.ts index 06aeb50de7..f208969286 100644 --- a/src/components/ha-currency-picker.ts +++ b/src/components/ha-currency-picker.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -225,13 +224,11 @@ export class HaCurrencyPicker extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-select { - width: 100%; - } - `; - } + static styles = css` + ha-select { + width: 100%; + } + `; private _changed(ev): void { const target = ev.target as HaSelect; diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts index 80b86b7559..2d579b942e 100644 --- a/src/components/ha-date-input.ts +++ b/src/components/ha-date-input.ts @@ -1,6 +1,5 @@ import { mdiCalendar } from "@mdi/js"; import type { HassConfig } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { firstWeekdayIndex } from "../common/datetime/first_weekday"; @@ -111,16 +110,14 @@ export class HaDateInput extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - ha-svg-icon { - color: var(--secondary-text-color); - } - ha-textfield { - display: block; - } - `; - } + static styles = css` + ha-svg-icon { + color: var(--secondary-text-color); + } + ha-textfield { + display: block; + } + `; } declare global { interface HTMLElementTagNameMap { diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts index cbcd95daa6..f207defb63 100644 --- a/src/components/ha-date-range-picker.ts +++ b/src/components/ha-date-range-picker.ts @@ -15,7 +15,7 @@ import { startOfYear, isThisYear, } from "date-fns"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -33,9 +33,7 @@ import "./ha-textarea"; import "./ha-icon-button-next"; import "./ha-icon-button-prev"; -export interface DateRangePickerRanges { - [key: string]: [Date, Date]; -} +export type DateRangePickerRanges = Record; @customElement("ha-date-range-picker") export class HaDateRangePicker extends LitElement { @@ -360,8 +358,7 @@ export class HaDateRangePicker extends LitElement { } } - static get styles(): CSSResultGroup { - return css` + static styles = css` ha-icon-button { direction: var(--direction); @@ -400,7 +397,6 @@ export class HaDateRangePicker extends LitElement { } } `; - } } declare global { diff --git a/src/components/ha-domain-icon.ts b/src/components/ha-domain-icon.ts index 5d71a0c8f8..6994c32c99 100644 --- a/src/components/ha-domain-icon.ts +++ b/src/components/ha-domain-icon.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { until } from "lit/directives/until"; @@ -50,7 +49,7 @@ export class HaDomainIcon extends LitElement { } private _renderFallback() { - if (this.domain! in FALLBACK_DOMAIN_ICONS) { + if (this.domain && this.domain in FALLBACK_DOMAIN_ICONS) { return html` `; @@ -73,13 +72,11 @@ export class HaDomainIcon extends LitElement { return html``; } - static get styles(): CSSResultGroup { - return css` - img { - width: var(--mdc-icon-size, 24px); - } - `; - } + static styles = css` + img { + width: var(--mdc-icon-size, 24px); + } + `; } declare global { diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts index 84da9fc5cc..ae300508cf 100644 --- a/src/components/ha-expansion-panel.ts +++ b/src/components/ha-expansion-panel.ts @@ -1,5 +1,5 @@ import { mdiChevronDown } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -141,92 +141,90 @@ export class HaExpansionPanel extends LitElement { ); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } + static styles = css` + :host { + display: block; + } - .top { - display: flex; - align-items: center; - border-radius: var(--ha-card-border-radius, 12px); - } + .top { + display: flex; + align-items: center; + border-radius: var(--ha-card-border-radius, 12px); + } - .top.expanded { - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - } + .top.expanded { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + } - .top.focused { - background: var(--input-fill-color); - } + .top.focused { + background: var(--input-fill-color); + } - :host([outlined]) { - box-shadow: none; - border-width: 1px; - border-style: solid; - border-color: var(--outline-color); - border-radius: var(--ha-card-border-radius, 12px); - } + :host([outlined]) { + box-shadow: none; + border-width: 1px; + border-style: solid; + border-color: var(--outline-color); + border-radius: var(--ha-card-border-radius, 12px); + } - .summary-icon { - transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); - direction: var(--direction); - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } + .summary-icon { + transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); + direction: var(--direction); + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + } - :host([leftchevron]) .summary-icon { - margin-left: 0; - margin-right: 8px; - margin-inline-start: 0; - margin-inline-end: 8px; - } + :host([leftchevron]) .summary-icon { + margin-left: 0; + margin-right: 8px; + margin-inline-start: 0; + margin-inline-end: 8px; + } - #summary { - flex: 1; - display: flex; - padding: var(--expansion-panel-summary-padding, 0 8px); - min-height: 48px; - align-items: center; - cursor: pointer; - overflow: hidden; - font-weight: 500; - outline: none; - } - #summary.noCollapse { - cursor: default; - } + #summary { + flex: 1; + display: flex; + padding: var(--expansion-panel-summary-padding, 0 8px); + min-height: 48px; + align-items: center; + cursor: pointer; + overflow: hidden; + font-weight: 500; + outline: none; + } + #summary.noCollapse { + cursor: default; + } - .summary-icon.expanded { - transform: rotate(180deg); - } + .summary-icon.expanded { + transform: rotate(180deg); + } - .header, - ::slotted([slot="header"]) { - flex: 1; - } + .header, + ::slotted([slot="header"]) { + flex: 1; + } - .container { - padding: var(--expansion-panel-content-padding, 0 8px); - overflow: hidden; - transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1); - height: 0px; - } + .container { + padding: var(--expansion-panel-content-padding, 0 8px); + overflow: hidden; + transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1); + height: 0px; + } - .container.expanded { - height: auto; - } + .container.expanded { + height: auto; + } - .secondary { - display: block; - color: var(--secondary-text-color); - font-size: 12px; - } - `; - } + .secondary { + display: block; + color: var(--secondary-text-color); + font-size: 12px; + } + `; } declare global { diff --git a/src/components/ha-faded.ts b/src/components/ha-faded.ts index 0e635351a4..c9101b7ffb 100644 --- a/src/components/ha-faded.ts +++ b/src/components/ha-faded.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -55,25 +55,23 @@ class HaFaded extends LitElement { this._contentShown = true; } - static get styles(): CSSResultGroup { - return css` - .container { - display: block; - height: auto; - cursor: default; - } - .faded { - cursor: pointer; - -webkit-mask-image: linear-gradient( - to bottom, - black 25%, - transparent 100% - ); - mask-image: linear-gradient(to bottom, black 25%, transparent 100%); - overflow-y: hidden; - } - `; - } + static styles = css` + .container { + display: block; + height: auto; + cursor: default; + } + .faded { + cursor: pointer; + -webkit-mask-image: linear-gradient( + to bottom, + black 25%, + transparent 100% + ); + mask-image: linear-gradient(to bottom, black 25%, transparent 100%); + overflow-y: hidden; + } + `; } declare global { diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts index dcc22f6974..245331a3b9 100644 --- a/src/components/ha-file-upload.ts +++ b/src/components/ha-file-upload.ts @@ -218,123 +218,121 @@ export class HaFileUpload extends LitElement { fireEvent(this, "files-cleared"); } - static get styles() { - return css` - :host { - display: block; - height: 240px; - } - :host([disabled]) { - pointer-events: none; - color: var(--disabled-text-color); - } - .container { - position: relative; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - border: solid 1px - var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42)); - border-radius: var(--mdc-shape-small, 4px); - height: 100%; - } - label.container { - border: dashed 1px - var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42)); - cursor: pointer; - } - .container .uploading { - display: flex; - flex-direction: column; - width: 100%; - align-items: flex-start; - padding: 0 32px; - box-sizing: border-box; - } - :host([disabled]) .container { - border-color: var(--disabled-color); - } - label:hover, - label.dragged { - border-style: solid; - } - label.dragged { - border-color: var(--primary-color); - } - .dragged:before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: var(--primary-color); - content: ""; - opacity: var(--dark-divider-opacity); - pointer-events: none; - border-radius: var(--mdc-shape-small, 4px); - } - label.value { - cursor: default; - } - label.value.multiple { - justify-content: unset; - overflow: auto; - } - .highlight { - color: var(--primary-color); - } - ha-button { - margin-bottom: 4px; - } - .supports { - color: var(--secondary-text-color); - font-size: 12px; - } - :host([disabled]) .secondary { - color: var(--disabled-text-color); - } - input.file { - display: none; - } - .value { - cursor: pointer; - } - .value ha-svg-icon { - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - } - .big-icon { - --mdc-icon-size: 48px; - margin-bottom: 8px; - } - ha-button { - --mdc-button-outline-color: var(--primary-color); - --mdc-icon-button-size: 24px; - } - mwc-linear-progress { - width: 100%; - padding: 8px 32px; - box-sizing: border-box; - } - .header { - font-weight: 500; - } - .progress { - color: var(--secondary-text-color); - } - button.link { - background: none; - border: none; - padding: 0; - font-size: 14px; - color: var(--primary-color); - text-decoration: underline; - cursor: pointer; - } - `; - } + static styles = css` + :host { + display: block; + height: 240px; + } + :host([disabled]) { + pointer-events: none; + color: var(--disabled-text-color); + } + .container { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: solid 1px + var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42)); + border-radius: var(--mdc-shape-small, 4px); + height: 100%; + } + label.container { + border: dashed 1px + var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42)); + cursor: pointer; + } + .container .uploading { + display: flex; + flex-direction: column; + width: 100%; + align-items: flex-start; + padding: 0 32px; + box-sizing: border-box; + } + :host([disabled]) .container { + border-color: var(--disabled-color); + } + label:hover, + label.dragged { + border-style: solid; + } + label.dragged { + border-color: var(--primary-color); + } + .dragged:before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: var(--primary-color); + content: ""; + opacity: var(--dark-divider-opacity); + pointer-events: none; + border-radius: var(--mdc-shape-small, 4px); + } + label.value { + cursor: default; + } + label.value.multiple { + justify-content: unset; + overflow: auto; + } + .highlight { + color: var(--primary-color); + } + ha-button { + margin-bottom: 4px; + } + .supports { + color: var(--secondary-text-color); + font-size: 12px; + } + :host([disabled]) .secondary { + color: var(--disabled-text-color); + } + input.file { + display: none; + } + .value { + cursor: pointer; + } + .value ha-svg-icon { + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + } + .big-icon { + --mdc-icon-size: 48px; + margin-bottom: 8px; + } + ha-button { + --mdc-button-outline-color: var(--primary-color); + --mdc-icon-button-size: 24px; + } + mwc-linear-progress { + width: 100%; + padding: 8px 32px; + box-sizing: border-box; + } + .header { + font-weight: 500; + } + .progress { + color: var(--secondary-text-color); + } + button.link { + background: none; + border: none; + padding: 0; + font-size: 14px; + color: var(--primary-color); + text-decoration: underline; + cursor: pointer; + } + `; } declare global { diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts index 37ef0c8faf..53c20e079f 100644 --- a/src/components/ha-filter-blueprints.ts +++ b/src/components/ha-filter-blueprints.ts @@ -156,7 +156,7 @@ export class HaFilterBlueprints extends LitElement { } const results = await Promise.all(relatedPromises); - const items: Set = new Set(); + const items = new Set(); for (const result of results) { if (result[this.type!]) { result[this.type!]!.forEach((item) => items.add(item)); diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts index e56fe07469..d8f310c864 100644 --- a/src/components/ha-filter-devices.ts +++ b/src/components/ha-filter-devices.ts @@ -176,7 +176,7 @@ export class HaFilterDevices extends LitElement { } this.value = value; const results = await Promise.all(relatedPromises); - const items: Set = new Set(); + const items = new Set(); for (const result of results) { if (result[this.type!]) { result[this.type!]!.forEach((item) => items.add(item)); diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts index daf5b57f03..271428e36b 100644 --- a/src/components/ha-filter-entities.ts +++ b/src/components/ha-filter-entities.ts @@ -193,7 +193,7 @@ export class HaFilterEntities extends LitElement { } const results = await Promise.all(relatedPromises); - const items: Set = new Set(); + const items = new Set(); for (const result of results) { if (result[this.type!]) { result[this.type!]!.forEach((item) => items.add(item)); diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts index cda53b37e6..b2a7f80a5a 100644 --- a/src/components/ha-filter-floor-areas.ts +++ b/src/components/ha-filter-floor-areas.ts @@ -115,7 +115,7 @@ export class HaFilterFloorAreas extends LitElement { `; } - private _renderArea(area, last: boolean = false) { + private _renderArea(area, last = false) { const hasFloor = !!area.floor_id; return html` = new Set(); + const items = new Set(); for (const result of results) { if (result[this.type!]) { result[this.type!]!.forEach((item) => items.add(item)); diff --git a/src/components/ha-form/ha-form-boolean.ts b/src/components/ha-form/ha-form-boolean.ts index 11c7033e0a..ad06fded0c 100644 --- a/src/components/ha-form/ha-form-boolean.ts +++ b/src/components/ha-form/ha-form-boolean.ts @@ -1,5 +1,5 @@ import "@material/mwc-formfield"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -55,27 +55,25 @@ export class HaFormBoolean extends LitElement implements HaFormElement { }); } - static get styles(): CSSResultGroup { - return css` - ha-formfield { - display: flex; - min-height: 56px; - align-items: center; - --mdc-typography-body2-font-size: 1em; - } - p { - margin: 0; - } - .secondary { - direction: var(--direction); - padding-top: 4px; - box-sizing: border-box; - color: var(--secondary-text-color); - font-size: 0.875rem; - font-weight: var(--mdc-typography-body2-font-weight, 400); - } - `; - } + static styles = css` + ha-formfield { + display: flex; + min-height: 56px; + align-items: center; + --mdc-typography-body2-font-size: 1em; + } + p { + margin: 0; + } + .secondary { + direction: var(--direction); + padding-top: 4px; + box-sizing: border-box; + color: var(--secondary-text-color); + font-size: 0.875rem; + font-weight: var(--mdc-typography-body2-font-weight, 400); + } + `; } declare global { diff --git a/src/components/ha-form/ha-form-constant.ts b/src/components/ha-form/ha-form-constant.ts index 9ba8073de9..43dc9bf754 100644 --- a/src/components/ha-form/ha-form-constant.ts +++ b/src/components/ha-form/ha-form-constant.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import type { HaFormConstantSchema, HaFormElement } from "./types"; @@ -15,16 +15,14 @@ export class HaFormConstant extends LitElement implements HaFormElement { : ""}`; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - .label { - font-weight: 500; - } - `; - } + static styles = css` + :host { + display: block; + } + .label { + font-weight: 500; + } + `; } declare global { diff --git a/src/components/ha-form/ha-form-expandable.ts b/src/components/ha-form/ha-form-expandable.ts index 0f9b838342..ed7e1930df 100644 --- a/src/components/ha-form/ha-form-expandable.ts +++ b/src/components/ha-form/ha-form-expandable.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import type { HomeAssistant } from "../../types"; @@ -98,33 +97,31 @@ export class HaFormExpendable extends LitElement implements HaFormElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex !important; - flex-direction: column; - } - :host ha-form { - display: block; - } - .content { - padding: 12px; - } - .content p { - margin: 0 0 24px; - } - ha-expansion-panel { - display: block; - --expansion-panel-content-padding: 0; - border-radius: 6px; - --ha-card-border-radius: 6px; - } - ha-svg-icon, - ha-icon { - color: var(--secondary-text-color); - } - `; - } + static styles = css` + :host { + display: flex !important; + flex-direction: column; + } + :host ha-form { + display: block; + } + .content { + padding: 12px; + } + .content p { + margin: 0 0 24px; + } + ha-expansion-panel { + display: block; + --expansion-panel-content-padding: 0; + border-radius: 6px; + --ha-card-border-radius: 6px; + } + ha-svg-icon, + ha-icon { + color: var(--secondary-text-color); + } + `; } declare global { diff --git a/src/components/ha-form/ha-form-grid.ts b/src/components/ha-form/ha-form-grid.ts index 37a89b2443..a9bffc7f76 100644 --- a/src/components/ha-form/ha-form-grid.ts +++ b/src/components/ha-form/ha-form-grid.ts @@ -1,5 +1,5 @@ import "./ha-form"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import type { @@ -70,22 +70,20 @@ export class HaFormGrid extends LitElement implements HaFormElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: grid !important; - grid-template-columns: repeat( - var(--form-grid-column-count, auto-fit), - minmax(var(--form-grid-min-width, 200px), 1fr) - ); - grid-column-gap: 8px; - grid-row-gap: 24px; - } - :host > ha-form { - display: block; - } - `; - } + static styles = css` + :host { + display: grid !important; + grid-template-columns: repeat( + var(--form-grid-column-count, auto-fit), + minmax(var(--form-grid-min-width, 200px), 1fr) + ); + grid-column-gap: 8px; + grid-row-gap: 24px; + } + :host > ha-form { + display: block; + } + `; } declare global { diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts index ed2d8a0708..777056c184 100644 --- a/src/components/ha-form/ha-form-integer.ts +++ b/src/components/ha-form/ha-form-integer.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -174,22 +174,20 @@ export class HaFormInteger extends LitElement implements HaFormElement { }); } - static get styles(): CSSResultGroup { - return css` - :host([own-margin]) { - margin-bottom: 5px; - } - .flex { - display: flex; - } - ha-slider { - flex: 1; - } - ha-textfield { - display: block; - } - `; - } + static styles = css` + :host([own-margin]) { + margin-bottom: 5px; + } + .flex { + display: flex; + } + ha-slider { + flex: 1; + } + ha-textfield { + display: block; + } + `; } declare global { diff --git a/src/components/ha-form/ha-form-multi_select.ts b/src/components/ha-form/ha-form-multi_select.ts index f09bad520d..790f437446 100644 --- a/src/components/ha-form/ha-form-multi_select.ts +++ b/src/components/ha-form/ha-form-multi_select.ts @@ -1,5 +1,5 @@ import { mdiMenuDown, mdiMenuUp } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -206,46 +206,44 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement { this.toggleAttribute("opened", false); } - static get styles(): CSSResultGroup { - return css` - :host([own-margin]) { - margin-bottom: 5px; - } - ha-md-button-menu { - display: block; - cursor: pointer; - } - ha-formfield { - display: block; - padding-right: 16px; - padding-inline-end: 16px; - padding-inline-start: initial; - direction: var(--direction); - } - ha-textfield { - display: block; - width: 100%; - pointer-events: none; - } - ha-icon-button { - color: var(--input-dropdown-icon-color); - position: absolute; - right: 1em; - top: 4px; - cursor: pointer; - inset-inline-end: 1em; - inset-inline-start: initial; - direction: var(--direction); - } - :host([opened]) ha-icon-button { - color: var(--primary-color); - } - :host([opened]) ha-md-button-menu { - --mdc-text-field-idle-line-color: var(--input-hover-line-color); - --mdc-text-field-label-ink-color: var(--primary-color); - } - `; - } + static styles = css` + :host([own-margin]) { + margin-bottom: 5px; + } + ha-md-button-menu { + display: block; + cursor: pointer; + } + ha-formfield { + display: block; + padding-right: 16px; + padding-inline-end: 16px; + padding-inline-start: initial; + direction: var(--direction); + } + ha-textfield { + display: block; + width: 100%; + pointer-events: none; + } + ha-icon-button { + color: var(--input-dropdown-icon-color); + position: absolute; + right: 1em; + top: 4px; + cursor: pointer; + inset-inline-end: 1em; + inset-inline-start: initial; + direction: var(--direction); + } + :host([opened]) ha-icon-button { + color: var(--primary-color); + } + :host([opened]) ha-md-button-menu { + --mdc-text-field-idle-line-color: var(--input-hover-line-color); + --mdc-text-field-label-ink-color: var(--primary-color); + } + `; } declare global { diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts index 7cd1a67bbc..306f61bf96 100644 --- a/src/components/ha-form/ha-form-string.ts +++ b/src/components/ha-form/ha-form-string.ts @@ -1,5 +1,5 @@ import { mdiEye, mdiEyeOff } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -131,31 +131,29 @@ export class HaFormString extends LitElement implements HaFormElement { return MASKED_FIELDS.some((field) => this.schema.name.includes(field)); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - position: relative; - } - :host([own-margin]) { - margin-bottom: 5px; - } - ha-textfield { - display: block; - } - ha-icon-button { - position: absolute; - top: 8px; - right: 8px; - inset-inline-start: initial; - inset-inline-end: 8px; - --mdc-icon-button-size: 40px; - --mdc-icon-size: 20px; - color: var(--secondary-text-color); - direction: var(--direction); - } - `; - } + static styles = css` + :host { + display: block; + position: relative; + } + :host([own-margin]) { + margin-bottom: 5px; + } + ha-textfield { + display: block; + } + ha-icon-button { + position: absolute; + top: 8px; + right: 8px; + inset-inline-start: initial; + inset-inline-end: 8px; + --mdc-icon-button-size: 40px; + --mdc-icon-size: 20px; + color: var(--secondary-text-color); + direction: var(--direction); + } + `; } declare global { diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts index 2a71dc739e..258f5cc104 100644 --- a/src/components/ha-form/ha-form.ts +++ b/src/components/ha-form/ha-form.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, ReactiveElement } from "lit"; import { customElement, property } from "lit/decorators"; import { dynamicElement } from "../../common/dom/dynamic-element-directive"; @@ -249,19 +249,17 @@ export class HaForm extends LitElement implements HaFormElement { return this.computeWarning ? this.computeWarning(warning, schema) : warning; } - static get styles(): CSSResultGroup { - return css` - .root > * { - display: block; - } - .root > *:not([own-margin]):not(:last-child) { - margin-bottom: 24px; - } - ha-alert[own-margin] { - margin-bottom: 4px; - } - `; - } + static styles = css` + .root > * { + display: block; + } + .root > *:not([own-margin]):not(:last-child) { + margin-bottom: 24px; + } + ha-alert[own-margin] { + margin-bottom: 4px; + } + `; } declare global { diff --git a/src/components/ha-form/types.ts b/src/components/ha-form/types.ts index 5c5ab10643..cab1faa31c 100644 --- a/src/components/ha-form/types.ts +++ b/src/components/ha-form/types.ts @@ -66,7 +66,7 @@ export interface HaFormIntegerSchema extends HaFormBaseSchema { export interface HaFormSelectSchema extends HaFormBaseSchema { type: "select"; - options: ReadonlyArray; + options: readonly (readonly [string, string])[]; } export interface HaFormMultiSelectSchema extends HaFormBaseSchema { @@ -74,7 +74,7 @@ export interface HaFormMultiSelectSchema extends HaFormBaseSchema { options: | Record | readonly string[] - | ReadonlyArray; + | readonly (readonly [string, string])[]; } export interface HaFormFloatSchema extends HaFormBaseSchema { @@ -104,9 +104,7 @@ export type SchemaUnion< ? SchemaUnion | Schema : Schema; -export interface HaFormDataContainer { - [key: string]: HaFormData; -} +export type HaFormDataContainer = Record; export type HaFormData = | HaFormStringData diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts index 9870e30ae7..4c6e3c50fa 100644 --- a/src/components/ha-gauge.ts +++ b/src/components/ha-gauge.ts @@ -174,49 +174,47 @@ export class HaGauge extends LitElement { return ""; } - static get styles() { - return css` - :host { - position: relative; - } - .dial { - fill: none; - stroke: var(--primary-background-color); - stroke-width: 15; - } - .value { - fill: none; - stroke-width: 15; - stroke: var(--gauge-color); - transition: all 1s ease 0s; - } - .needle { - fill: var(--primary-text-color); - transition: all 1s ease 0s; - } - .level { - fill: none; - stroke-width: 15; - } - .gauge { - display: block; - } - .text { - position: absolute; - max-height: 40%; - max-width: 55%; - left: 50%; - bottom: -6%; - transform: translate(-50%, 0%); - } - .value-text { - font-size: 50px; - fill: var(--primary-text-color); - text-anchor: middle; - direction: ltr; - } - `; - } + static styles = css` + :host { + position: relative; + } + .dial { + fill: none; + stroke: var(--primary-background-color); + stroke-width: 15; + } + .value { + fill: none; + stroke-width: 15; + stroke: var(--gauge-color); + transition: all 1s ease 0s; + } + .needle { + fill: var(--primary-text-color); + transition: all 1s ease 0s; + } + .level { + fill: none; + stroke-width: 15; + } + .gauge { + display: block; + } + .text { + position: absolute; + max-height: 40%; + max-width: 55%; + left: 50%; + bottom: -6%; + transform: translate(-50%, 0%); + } + .value-text { + font-size: 50px; + fill: var(--primary-text-color); + text-anchor: middle; + direction: ltr; + } + `; } declare global { diff --git a/src/components/ha-grid-size-picker.ts b/src/components/ha-grid-size-picker.ts index 866298a20d..a050d81d69 100644 --- a/src/components/ha-grid-size-picker.ts +++ b/src/components/ha-grid-size-picker.ts @@ -30,7 +30,7 @@ export class HaGridSizeEditor extends LitElement { @property({ attribute: false }) public isDefault?: boolean; - @property({ attribute: false }) public step: number = 1; + @property({ attribute: false }) public step = 1; @state() public _localValue?: CardGridSize = { rows: 1, columns: 1 }; diff --git a/src/components/ha-heading-badge.ts b/src/components/ha-heading-badge.ts index f60b3af4b7..8ad3a9ae00 100644 --- a/src/components/ha-heading-badge.ts +++ b/src/components/ha-heading-badge.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -22,32 +21,30 @@ export class HaBadge extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - } - [role="button"] { - cursor: pointer; - } - .heading-badge { - display: flex; - flex-direction: row; - white-space: nowrap; - align-items: center; - gap: 3px; - color: var(--ha-heading-badge-text-color, var(--secondary-text-color)); - font-size: var(--ha-heading-badge-font-size, 14px); - font-weight: var(--ha-heading-badge-font-weight, 400); - line-height: var(--ha-heading-badge-line-height, 20px); - letter-spacing: 0.1px; - --mdc-icon-size: 14px; - } - ::slotted([slot="icon"]) { - --ha-icon-display: block; - color: var(--icon-color, inherit); - } - `; - } + static styles = css` + :host { + } + [role="button"] { + cursor: pointer; + } + .heading-badge { + display: flex; + flex-direction: row; + white-space: nowrap; + align-items: center; + gap: 3px; + color: var(--ha-heading-badge-text-color, var(--secondary-text-color)); + font-size: var(--ha-heading-badge-font-size, 14px); + font-weight: var(--ha-heading-badge-font-weight, 400); + line-height: var(--ha-heading-badge-line-height, 20px); + letter-spacing: 0.1px; + --mdc-icon-size: 14px; + } + ::slotted([slot="icon"]) { + --ha-icon-display: block; + color: var(--icon-color, inherit); + } + `; } declare global { diff --git a/src/components/ha-help-tooltip.ts b/src/components/ha-help-tooltip.ts index dc8e9ff9cf..b6acf428bd 100644 --- a/src/components/ha-help-tooltip.ts +++ b/src/components/ha-help-tooltip.ts @@ -23,14 +23,12 @@ export class HaHelpTooltip extends LitElement { `; } - static get styles() { - return css` - ha-svg-icon { - --mdc-icon-size: var(--ha-help-tooltip-size, 14px); - color: var(--ha-help-tooltip-color, var(--disabled-text-color)); - } - `; - } + static styles = css` + ha-svg-icon { + --mdc-icon-size: var(--ha-help-tooltip-size, 14px); + color: var(--ha-help-tooltip-color, var(--disabled-text-color)); + } + `; } declare global { diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts index 62035fea6c..c9ac9e1571 100644 --- a/src/components/ha-hls-player.ts +++ b/src/components/ha-hls-player.ts @@ -1,5 +1,5 @@ import type HlsType from "hls.js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -382,28 +382,26 @@ class HaHLSPlayer extends LitElement { fireEvent(this, "load"); } - static get styles(): CSSResultGroup { - return css` - :host, - video { - display: block; - } + static styles = css` + :host, + video { + display: block; + } - video { - width: 100%; - max-height: var(--video-max-height, calc(100vh - 97px)); - } + video { + width: 100%; + max-height: var(--video-max-height, calc(100vh - 97px)); + } - .fatal { - display: block; - padding: 100px 16px; - } + .fatal { + display: block; + padding: 100px 16px; + } - .retry { - display: block; - } - `; - } + .retry { + display: block; + } + `; } declare global { diff --git a/src/components/ha-hs-color-picker.ts b/src/components/ha-hs-color-picker.ts index 3f50dbbcc7..b8ccfd3f3d 100644 --- a/src/components/ha-hs-color-picker.ts +++ b/src/components/ha-hs-color-picker.ts @@ -379,49 +379,47 @@ class HaHsColorPicker extends LitElement { `; } - static get styles() { - return css` - :host { - display: block; - outline: none; - } - .container { - position: relative; - width: 100%; - height: 100%; - display: flex; - } - canvas { - width: 100%; - height: 100%; - object-fit: contain; - border-radius: 50%; - cursor: pointer; - } - svg { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - } - circle { - fill: black; - stroke: white; - stroke-width: 2; - filter: url(#marker-shadow); - } - .container:not(.pressed) circle { - transition: - transform 100ms ease-in-out, - fill 100ms ease-in-out; - } - .container:not(.pressed) .cursor { - transition: transform 200ms ease-in-out; - } - `; - } + static styles = css` + :host { + display: block; + outline: none; + } + .container { + position: relative; + width: 100%; + height: 100%; + display: flex; + } + canvas { + width: 100%; + height: 100%; + object-fit: contain; + border-radius: 50%; + cursor: pointer; + } + svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + circle { + fill: black; + stroke: white; + stroke-width: 2; + filter: url(#marker-shadow); + } + .container:not(.pressed) circle { + transition: + transform 100ms ease-in-out, + fill 100ms ease-in-out; + } + .container:not(.pressed) .cursor { + transition: transform 200ms ease-in-out; + } + `; } declare global { diff --git a/src/components/ha-humidifier-state.ts b/src/components/ha-humidifier-state.ts index 6b74be1653..63dec9fc33 100644 --- a/src/components/ha-humidifier-state.ts +++ b/src/components/ha-humidifier-state.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { isUnavailableState, OFF } from "../data/entity"; @@ -86,33 +86,31 @@ class HaHumidifierState extends LitElement { return stateString; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - flex-direction: column; - justify-content: center; - white-space: nowrap; - } + static styles = css` + :host { + display: flex; + flex-direction: column; + justify-content: center; + white-space: nowrap; + } - .target { - color: var(--primary-text-color); - } + .target { + color: var(--primary-text-color); + } - .current { - color: var(--secondary-text-color); - } + .current { + color: var(--secondary-text-color); + } - .state-label { - font-weight: bold; - } + .state-label { + font-weight: bold; + } - .unit { - display: inline-block; - direction: ltr; - } - `; - } + .unit { + display: inline-block; + direction: ltr; + } + `; } declare global { diff --git a/src/components/ha-icon-button-group.ts b/src/components/ha-icon-button-group.ts index 17f2967000..ddb8f08acc 100644 --- a/src/components/ha-icon-button-group.ts +++ b/src/components/ha-icon-button-group.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement } from "lit/decorators"; @@ -8,28 +8,26 @@ export class HaIconButtonGroup extends LitElement { return html``; } - static get styles(): CSSResultGroup { - return css` - :host { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - height: 48px; - border-radius: 28px; - background-color: rgba(139, 145, 151, 0.1); - box-sizing: border-box; - width: auto; - padding: 0; - } - ::slotted(.separator) { - background-color: rgba(var(--rgb-primary-text-color), 0.15); - width: 1px; - margin: 0 1px; - height: 40px; - } - `; - } + static styles = css` + :host { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + height: 48px; + border-radius: 28px; + background-color: rgba(139, 145, 151, 0.1); + box-sizing: border-box; + width: auto; + padding: 0; + } + ::slotted(.separator) { + background-color: rgba(var(--rgb-primary-text-color), 0.15); + width: 1px; + margin: 0 1px; + height: 40px; + } + `; } declare global { diff --git a/src/components/ha-icon-button-toggle.ts b/src/components/ha-icon-button-toggle.ts index 00c70949f5..eeee6e1042 100644 --- a/src/components/ha-icon-button-toggle.ts +++ b/src/components/ha-icon-button-toggle.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css } from "lit"; import { customElement, property } from "lit/decorators"; import { HaIconButton } from "./ha-icon-button"; @@ -7,43 +6,41 @@ import { HaIconButton } from "./ha-icon-button"; export class HaIconButtonToggle extends HaIconButton { @property({ type: Boolean, reflect: true }) selected = false; - static get styles(): CSSResultGroup { - return css` - :host { - position: relative; - } - mwc-icon-button { - position: relative; - transition: color 180ms ease-in-out; - } - mwc-icon-button::before { - opacity: 0; - transition: opacity 180ms ease-in-out; - background-color: var(--primary-text-color); - border-radius: 20px; - height: 40px; - width: 40px; - content: ""; - position: absolute; - top: -10px; - left: -10px; - bottom: -10px; - right: -10px; - margin: auto; - box-sizing: border-box; - } - :host([border-only]) mwc-icon-button::before { - background-color: transparent; - border: 2px solid var(--primary-text-color); - } - :host([selected]) mwc-icon-button { - color: var(--primary-background-color); - } - :host([selected]:not([disabled])) mwc-icon-button::before { - opacity: 1; - } - `; - } + static styles = css` + :host { + position: relative; + } + mwc-icon-button { + position: relative; + transition: color 180ms ease-in-out; + } + mwc-icon-button::before { + opacity: 0; + transition: opacity 180ms ease-in-out; + background-color: var(--primary-text-color); + border-radius: 20px; + height: 40px; + width: 40px; + content: ""; + position: absolute; + top: -10px; + left: -10px; + bottom: -10px; + right: -10px; + margin: auto; + box-sizing: border-box; + } + :host([border-only]) mwc-icon-button::before { + background-color: transparent; + border: 2px solid var(--primary-text-color); + } + :host([selected]) mwc-icon-button { + color: var(--primary-background-color); + } + :host([selected]:not([disabled])) mwc-icon-button::before { + opacity: 1; + } + `; } declare global { diff --git a/src/components/ha-icon-button.ts b/src/components/ha-icon-button.ts index 50490440fd..e4c3f60c88 100644 --- a/src/components/ha-icon-button.ts +++ b/src/components/ha-icon-button.ts @@ -1,6 +1,6 @@ import "@material/mwc-icon-button"; import type { IconButton } from "@material/mwc-icon-button"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -49,21 +49,19 @@ export class HaIconButton extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: inline-block; - outline: none; - } - :host([disabled]) { - pointer-events: none; - } - mwc-icon-button { - --mdc-theme-on-primary: currentColor; - --mdc-theme-text-disabled-on-light: var(--disabled-text-color); - } - `; - } + static styles = css` + :host { + display: inline-block; + outline: none; + } + :host([disabled]) { + pointer-events: none; + } + mwc-icon-button { + --mdc-theme-on-primary: currentColor; + --mdc-theme-text-disabled-on-light: var(--disabled-text-color); + } + `; } declare global { diff --git a/src/components/ha-icon-picker.ts b/src/components/ha-icon-picker.ts index 3ca8703b1e..3d1bb30552 100644 --- a/src/components/ha-icon-picker.ts +++ b/src/components/ha-icon-picker.ts @@ -14,16 +14,16 @@ import "./ha-combo-box"; import "./ha-list-item"; import "./ha-icon"; -type IconItem = { +interface IconItem { icon: string; parts: Set; keywords: string[]; -}; +} -type RankedIcon = { +interface RankedIcon { icon: string; rank: number; -}; +} let ICONS: IconItem[] = []; let ICONS_LOADED = false; @@ -197,20 +197,18 @@ export class HaIconPicker extends LitElement { return this.value || ""; } - static get styles() { - return css` - *[slot="icon"] { - color: var(--primary-text-color); - position: relative; - bottom: 2px; - } - *[slot="prefix"] { - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - } - `; - } + static styles = css` + *[slot="icon"] { + color: var(--primary-text-color); + position: relative; + bottom: 2px; + } + *[slot="prefix"] { + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + } + `; } declare global { diff --git a/src/components/ha-icon.ts b/src/components/ha-icon.ts index b803b41515..5016e38c6a 100644 --- a/src/components/ha-icon.ts +++ b/src/components/ha-icon.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -14,12 +14,13 @@ import { } from "../data/iconsets"; import "./ha-svg-icon"; -interface DeprecatedIcon { - [key: string]: { +type DeprecatedIcon = Record< + string, + { removeIn: string; newName?: string; - }; -} + } +>; const mdiDeprecatedIcons: DeprecatedIcon = {}; @@ -183,13 +184,11 @@ export class HaIcon extends LitElement { cachedIcons[iconName] = iconPack[iconName]; } - static get styles(): CSSResultGroup { - return css` - :host { - fill: currentcolor; - } - `; - } + static styles = css` + :host { + fill: currentcolor; + } + `; } declare global { interface HTMLElementTagNameMap { diff --git a/src/components/ha-labeled-slider.ts b/src/components/ha-labeled-slider.ts index 9e6ffe2f30..8a54a14496 100644 --- a/src/components/ha-labeled-slider.ts +++ b/src/components/ha-labeled-slider.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -62,33 +61,31 @@ class HaLabeledSlider extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } + static styles = css` + :host { + display: block; + } - .title { - margin: 5px 0 8px; - color: var(--primary-text-color); - } + .title { + margin: 5px 0 8px; + color: var(--primary-text-color); + } - .slider-container { - display: flex; - } + .slider-container { + display: flex; + } - ha-icon { - margin-top: 8px; - color: var(--secondary-text-color); - } + ha-icon { + margin-top: 8px; + color: var(--secondary-text-color); + } - ha-slider { - flex-grow: 1; - background-image: var(--ha-slider-background); - border-radius: 4px; - } - `; - } + ha-slider { + flex-grow: 1; + background-image: var(--ha-slider-background); + border-radius: 4px; + } + `; } declare global { diff --git a/src/components/ha-labels-picker.ts b/src/components/ha-labels-picker.ts index c03a698b71..81590f3247 100644 --- a/src/components/ha-labels-picker.ts +++ b/src/components/ha-labels-picker.ts @@ -78,7 +78,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) { @property({ type: Boolean }) public required = false; - @state() private _labels?: { [id: string]: LabelRegistryEntry }; + @state() private _labels?: Record; @query("ha-label-picker", true) public labelPicker!: HaLabelPicker; @@ -107,7 +107,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) { private _sortedLabels = memoizeOne( ( value: string[] | undefined, - labels: { [id: string]: LabelRegistryEntry } | undefined, + labels: Record | undefined, language: string ) => value diff --git a/src/components/ha-language-picker.ts b/src/components/ha-language-picker.ts index b128393085..27776d723d 100644 --- a/src/components/ha-language-picker.ts +++ b/src/components/ha-language-picker.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -167,13 +167,11 @@ export class HaLanguagePicker extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-select { - width: 100%; - } - `; - } + static styles = css` + ha-select { + width: 100%; + } + `; private _changed(ev): void { const target = ev.target as HaSelect; diff --git a/src/components/ha-lawn_mower-action-button.ts b/src/components/ha-lawn_mower-action-button.ts index 5d5fe9113c..95a4314362 100644 --- a/src/components/ha-lawn_mower-action-button.ts +++ b/src/components/ha-lawn_mower-action-button.ts @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import { supportsFeature } from "../common/entity/supports-feature"; @@ -7,11 +6,11 @@ import type { LawnMowerEntity, LawnMowerEntityState } from "../data/lawn_mower"; import { LawnMowerEntityFeature } from "../data/lawn_mower"; import type { HomeAssistant } from "../types"; -type LawnMowerAction = { +interface LawnMowerAction { action: string; service: string; feature: LawnMowerEntityFeature; -}; +} const LAWN_MOWER_ACTIONS: Partial< Record @@ -72,21 +71,19 @@ class HaLawnMowerActionButton extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - mwc-button { - top: 3px; - height: 37px; - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - mwc-button[disabled] { - background-color: transparent; - color: var(--secondary-text-color); - } - `; - } + static styles = css` + mwc-button { + top: 3px; + height: 37px; + margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + } + mwc-button[disabled] { + background-color: transparent; + color: var(--secondary-text-color); + } + `; } declare global { diff --git a/src/components/ha-logo-svg.ts b/src/components/ha-logo-svg.ts index bd526e7e8f..63ad3db21a 100644 --- a/src/components/ha-logo-svg.ts +++ b/src/components/ha-logo-svg.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, LitElement, html } from "lit"; import { customElement } from "lit/decorators"; @@ -17,26 +17,24 @@ export class HaLogoSvg extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: var(--ha-icon-display, inline-flex); - align-items: center; - justify-content: center; - position: relative; - vertical-align: middle; - fill: currentcolor; - width: var(--mdc-icon-size, 24px); - height: var(--mdc-icon-size, 24px); - } - svg { - width: 100%; - height: 100%; - pointer-events: none; - display: block; - } - `; - } + static styles = css` + :host { + display: var(--ha-icon-display, inline-flex); + align-items: center; + justify-content: center; + position: relative; + vertical-align: middle; + fill: currentcolor; + width: var(--mdc-icon-size, 24px); + height: var(--mdc-icon-size, 24px); + } + svg { + width: 100%; + height: 100%; + pointer-events: none; + display: block; + } + `; } declare global { interface HTMLElementTagNameMap { diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts index 0e12ff0f3a..8570260a93 100644 --- a/src/components/ha-markdown.ts +++ b/src/components/ha-markdown.ts @@ -1,5 +1,4 @@ -import type { CSSResultGroup } from "lit"; -import { css, html, LitElement, nothing } from "lit"; +import { css, html, LitElement, nothing, type CSSResultGroup } from "lit"; import { customElement, property } from "lit/decorators"; import "./ha-markdown-element"; @@ -27,73 +26,71 @@ export class HaMarkdown extends LitElement { >`; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - ha-markdown-element { - -ms-user-select: text; - -webkit-user-select: text; - -moz-user-select: text; - } - ha-markdown-element > *:first-child { - margin-top: 0; - } - ha-markdown-element > *:last-child { - margin-bottom: 0; - } - ha-alert { - display: block; - margin: 4px 0; - } - a { - color: var(--primary-color); - } - img { - max-width: 100%; - } - code, - pre { - background-color: var(--markdown-code-background-color, none); - border-radius: 3px; - } - svg { - background-color: var(--markdown-svg-background-color, none); - color: var(--markdown-svg-color, none); - } - code { - font-size: 85%; - padding: 0.2em 0.4em; - } - pre code { - padding: 0; - } - pre { - padding: 16px; - overflow: auto; - line-height: 1.45; - font-family: var(--code-font-family, monospace); - } - h1, - h2, - h3, - h4, - h5, - h6 { - line-height: initial; - } - h2 { - font-size: 1.5em; - font-weight: bold; - } - hr { - border-color: var(--divider-color); - border-bottom: none; - margin: 16px 0; - } - `; - } + static styles = css` + :host { + display: block; + } + ha-markdown-element { + -ms-user-select: text; + -webkit-user-select: text; + -moz-user-select: text; + } + ha-markdown-element > *:first-child { + margin-top: 0; + } + ha-markdown-element > *:last-child { + margin-bottom: 0; + } + ha-alert { + display: block; + margin: 4px 0; + } + a { + color: var(--primary-color); + } + img { + max-width: 100%; + } + code, + pre { + background-color: var(--markdown-code-background-color, none); + border-radius: 3px; + } + svg { + background-color: var(--markdown-svg-background-color, none); + color: var(--markdown-svg-color, none); + } + code { + font-size: 85%; + padding: 0.2em 0.4em; + } + pre code { + padding: 0; + } + pre { + padding: 16px; + overflow: auto; + line-height: 1.45; + font-family: var(--code-font-family, monospace); + } + h1, + h2, + h3, + h4, + h5, + h6 { + line-height: initial; + } + h2 { + font-size: 1.5em; + font-weight: bold; + } + hr { + border-color: var(--divider-color); + border-bottom: none; + margin: 16px 0; + } + ` as CSSResultGroup; } declare global { diff --git a/src/components/ha-md-button-menu.ts b/src/components/ha-md-button-menu.ts index 3d4012397f..ce4e39f173 100644 --- a/src/components/ha-md-button-menu.ts +++ b/src/components/ha-md-button-menu.ts @@ -1,5 +1,5 @@ import type { Button } from "@material/mwc-button"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import { FOCUS_TARGET } from "../dialogs/make-dialog-manager"; @@ -81,17 +81,15 @@ export class HaMdButtonMenu extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: inline-block; - position: relative; - } - ::slotted([disabled]) { - color: var(--disabled-text-color); - } - `; - } + static styles = css` + :host { + display: inline-block; + position: relative; + } + ::slotted([disabled]) { + color: var(--disabled-text-color); + } + `; } declare global { diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts index 8857413533..7e74b3cdf4 100644 --- a/src/components/ha-menu-button.ts +++ b/src/components/ha-menu-button.ts @@ -1,6 +1,5 @@ import { mdiMenu } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -124,26 +123,24 @@ class HaMenuButton extends LitElement { fireEvent(this, "hass-toggle-menu"); } - static get styles(): CSSResultGroup { - return css` - :host { - position: relative; - } - .dot { - pointer-events: none; - position: absolute; - background-color: var(--accent-color); - width: 12px; - height: 12px; - top: 9px; - right: 7px; - inset-inline-end: 7px; - inset-inline-start: initial; - border-radius: 50%; - border: 2px solid var(--app-header-background-color); - } - `; - } + static styles = css` + :host { + position: relative; + } + .dot { + pointer-events: none; + position: absolute; + background-color: var(--accent-color); + width: 12px; + height: 12px; + top: 9px; + right: 7px; + inset-inline-end: 7px; + inset-inline-start: initial; + border-radius: 50%; + border: 2px solid var(--app-header-background-color); + } + `; } declare global { diff --git a/src/components/ha-metric.ts b/src/components/ha-metric.ts index eae3bf1aca..d212162e9c 100644 --- a/src/components/ha-metric.ts +++ b/src/components/ha-metric.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -35,50 +35,45 @@ class HaMetric extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-settings-row { - padding: 0; - height: 54px; - width: 100%; - } - ha-settings-row > div[slot="description"] { - white-space: normal; - color: var(--secondary-text-color); - display: flex; - justify-content: space-between; - } - ha-bar { - --ha-bar-primary-color: var( - --metric-bar-ok-color, - var(--success-color) - ); - } - .target-warning { - --ha-bar-primary-color: var( - --metric-bar-warning-color, - var(--warning-color) - ); - } - .target-critical { - --ha-bar-primary-color: var( - --metric-bar-critical-color, - var(--error-color) - ); - } - .value { - width: 48px; - padding-right: 4px; - padding-inline-end: 4px; - padding-inline-start: initial; - flex-shrink: 0; - } - .value > div { - direction: ltr; - text-align: var(--float-start); - } - `; - } + static styles = css` + ha-settings-row { + padding: 0; + height: 54px; + width: 100%; + } + ha-settings-row > div[slot="description"] { + white-space: normal; + color: var(--secondary-text-color); + display: flex; + justify-content: space-between; + } + ha-bar { + --ha-bar-primary-color: var(--metric-bar-ok-color, var(--success-color)); + } + .target-warning { + --ha-bar-primary-color: var( + --metric-bar-warning-color, + var(--warning-color) + ); + } + .target-critical { + --ha-bar-primary-color: var( + --metric-bar-critical-color, + var(--error-color) + ); + } + .value { + width: 48px; + padding-right: 4px; + padding-inline-end: 4px; + padding-inline-start: initial; + flex-shrink: 0; + } + .value > div { + direction: ltr; + text-align: var(--float-start); + } + `; } declare global { diff --git a/src/components/ha-navigation-picker.ts b/src/components/ha-navigation-picker.ts index 40967c5a3a..c89c274144 100644 --- a/src/components/ha-navigation-picker.ts +++ b/src/components/ha-navigation-picker.ts @@ -12,11 +12,11 @@ import "./ha-combo-box"; import type { HaComboBox } from "./ha-combo-box"; import "./ha-icon"; -type NavigationItem = { +interface NavigationItem { path: string; icon: string; title: string; -}; +} const DEFAULT_ITEMS: NavigationItem[] = []; @@ -196,21 +196,19 @@ export class HaNavigationPicker extends LitElement { return this.value || ""; } - static get styles() { - return css` - ha-icon, - ha-svg-icon { - color: var(--primary-text-color); - position: relative; - bottom: 0px; - } - *[slot="prefix"] { - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - } - `; - } + static styles = css` + ha-icon, + ha-svg-icon { + color: var(--primary-text-color); + position: relative; + bottom: 0px; + } + *[slot="prefix"] { + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + } + `; } declare global { diff --git a/src/components/ha-network.ts b/src/components/ha-network.ts index 187a0b41f4..0841010272 100644 --- a/src/components/ha-network.ts +++ b/src/components/ha-network.ts @@ -27,7 +27,7 @@ const format_addresses = ( const format_auto_detected_interfaces = ( adapters: Adapter[] -): Array => +): (TemplateResult | string)[] => adapters.map((adapter) => adapter.auto ? html`${adapter.name} diff --git a/src/components/ha-push-notifications-toggle.ts b/src/components/ha-push-notifications-toggle.ts index 495cdd5483..d839e4739c 100644 --- a/src/components/ha-push-notifications-toggle.ts +++ b/src/components/ha-push-notifications-toggle.ts @@ -24,7 +24,7 @@ class HaPushNotificationsToggle extends LitElement { @state() private _pushChecked: boolean = "Notification" in window && Notification.permission === "granted"; - @state() private _loading: boolean = true; + @state() private _loading = true; protected render(): TemplateResult { return html` diff --git a/src/components/ha-selector/ha-selector-action.ts b/src/components/ha-selector/ha-selector-action.ts index 90588aacb6..255340b787 100644 --- a/src/components/ha-selector/ha-selector-action.ts +++ b/src/components/ha-selector/ha-selector-action.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -38,19 +37,17 @@ export class HaActionSelector extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-automation-action { - display: block; - margin-bottom: 16px; - } - label { - display: block; - margin-bottom: 4px; - font-weight: 500; - } - `; - } + static styles = css` + ha-automation-action { + display: block; + margin-bottom: 16px; + } + label { + display: block; + margin-bottom: 4px; + font-weight: 500; + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-background.ts b/src/components/ha-selector/ha-selector-background.ts index a603ad6096..0b0cb529c9 100644 --- a/src/components/ha-selector/ha-selector-background.ts +++ b/src/components/ha-selector/ha-selector-background.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -71,22 +70,20 @@ export class HaBackgroundSelector extends LitElement { fireEvent(this, "value-changed", { value: undefined }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - position: relative; - } - div { - display: flex; - flex-direction: column; - } - ha-button { - white-space: nowrap; - --mdc-theme-primary: var(--primary-color); - } - `; - } + static styles = css` + :host { + display: block; + position: relative; + } + div { + display: flex; + flex-direction: column; + } + ha-button { + white-space: nowrap; + --mdc-theme-primary: var(--primary-color); + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-boolean.ts b/src/components/ha-selector/ha-selector-boolean.ts index 94e7ca600f..bffa9ca18a 100644 --- a/src/components/ha-selector/ha-selector-boolean.ts +++ b/src/components/ha-selector/ha-selector-boolean.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -47,27 +46,25 @@ export class HaBooleanSelector extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResultGroup { - return css` - ha-formfield { - display: flex; - min-height: 56px; - align-items: center; - --mdc-typography-body2-font-size: 1em; - } - p { - margin: 0; - } - .secondary { - direction: var(--direction); - padding-top: 4px; - box-sizing: border-box; - color: var(--secondary-text-color); - font-size: 0.875rem; - font-weight: var(--mdc-typography-body2-font-weight, 400); - } - `; - } + static styles = css` + ha-formfield { + display: flex; + min-height: 56px; + align-items: center; + --mdc-typography-body2-font-size: 1em; + } + p { + margin: 0; + } + .secondary { + direction: var(--direction); + padding-top: 4px; + box-sizing: border-box; + color: var(--secondary-text-color); + font-size: 0.875rem; + font-weight: var(--mdc-typography-body2-font-weight, 400); + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-condition.ts b/src/components/ha-selector/ha-selector-condition.ts index 148c5461f1..dafca3f206 100644 --- a/src/components/ha-selector/ha-selector-condition.ts +++ b/src/components/ha-selector/ha-selector-condition.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import type { Condition } from "../../data/automation"; @@ -29,19 +28,17 @@ export class HaConditionSelector extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-automation-condition { - display: block; - margin-bottom: 16px; - } - label { - display: block; - margin-bottom: 4px; - font-weight: 500; - } - `; - } + static styles = css` + ha-automation-condition { + display: block; + margin-bottom: 16px; + } + label { + display: block; + margin-bottom: 4px; + font-weight: 500; + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-image.ts b/src/components/ha-selector/ha-selector-image.ts index 5e01b04c85..9619125aba 100644 --- a/src/components/ha-selector/ha-selector-image.ts +++ b/src/components/ha-selector/ha-selector-image.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -126,26 +125,24 @@ export class HaImageSelector extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - position: relative; - } - div { - display: flex; - flex-direction: column; - } - label { - display: flex; - flex-direction: column; - } - ha-textarea, - ha-textfield { - width: 100%; - } - `; - } + static styles = css` + :host { + display: block; + position: relative; + } + div { + display: flex; + flex-direction: column; + } + label { + display: flex; + flex-direction: column; + } + ha-textarea, + ha-textfield { + width: 100%; + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-label.ts b/src/components/ha-selector/ha-selector-label.ts index d2b4098683..9ca9dc245a 100644 --- a/src/components/ha-selector/ha-selector-label.ts +++ b/src/components/ha-selector/ha-selector-label.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import { ensureArray } from "../../common/array/ensure-array"; @@ -71,14 +70,12 @@ export class HaLabelSelector extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResultGroup { - return css` - ha-labels-picker { - display: block; - width: 100%; - } - `; - } + static styles = css` + ha-labels-picker { + display: block; + width: 100%; + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-media.ts b/src/components/ha-selector/ha-selector-media.ts index 79b2b097e4..6ea72b09f5 100644 --- a/src/components/ha-selector/ha-selector-media.ts +++ b/src/components/ha-selector/ha-selector-media.ts @@ -1,5 +1,5 @@ import { mdiPlayBox, mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -208,78 +208,76 @@ export class HaMediaSelector extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - ha-entity-picker { - display: block; - margin-bottom: 16px; - } - mwc-button { - margin-top: 8px; - } - ha-alert { - display: block; - margin-bottom: 16px; - } - ha-card { - position: relative; - width: 200px; - box-sizing: border-box; - cursor: pointer; - } - ha-card.disabled { - pointer-events: none; - color: var(--disabled-text-color); - } - ha-card .thumbnail { - width: 100%; - position: relative; - box-sizing: border-box; - transition: padding-bottom 0.1s ease-out; - padding-bottom: 100%; - } - ha-card .thumbnail.portrait { - padding-bottom: 150%; - } - ha-card .image { - border-radius: 3px 3px 0 0; - } - .folder { - --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4); - } - .title { - font-size: 16px; - padding-top: 16px; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 16px; - padding-left: 16px; - padding-right: 4px; - padding-inline-start: 16px; - padding-inline-end: 4px; - white-space: nowrap; - } - .image { - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - } - .centered-image { - margin: 0 8px; - background-size: contain; - } - .icon-holder { - display: flex; - justify-content: center; - align-items: center; - } - `; - } + static styles = css` + ha-entity-picker { + display: block; + margin-bottom: 16px; + } + mwc-button { + margin-top: 8px; + } + ha-alert { + display: block; + margin-bottom: 16px; + } + ha-card { + position: relative; + width: 200px; + box-sizing: border-box; + cursor: pointer; + } + ha-card.disabled { + pointer-events: none; + color: var(--disabled-text-color); + } + ha-card .thumbnail { + width: 100%; + position: relative; + box-sizing: border-box; + transition: padding-bottom 0.1s ease-out; + padding-bottom: 100%; + } + ha-card .thumbnail.portrait { + padding-bottom: 150%; + } + ha-card .image { + border-radius: 3px 3px 0 0; + } + .folder { + --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4); + } + .title { + font-size: 16px; + padding-top: 16px; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 16px; + padding-left: 16px; + padding-right: 4px; + padding-inline-start: 16px; + padding-inline-end: 4px; + white-space: nowrap; + } + .image { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + .centered-image { + margin: 0 8px; + background-size: contain; + } + .icon-holder { + display: flex; + justify-content: center; + align-items: center; + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts index 760b0ffef8..3249f96aad 100644 --- a/src/components/ha-selector/ha-selector-number.ts +++ b/src/components/ha-selector/ha-selector-number.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -133,29 +133,27 @@ export class HaNumberSelector extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResultGroup { - return css` - .input { - display: flex; - justify-content: space-between; - align-items: center; - direction: ltr; - } - ha-slider { - flex: 1; - margin-right: 16px; - margin-inline-end: 16px; - margin-inline-start: 0; - } - ha-textfield { - --ha-textfield-input-width: 40px; - } - .single { - --ha-textfield-input-width: unset; - flex: 1; - } - `; - } + static styles = css` + .input { + display: flex; + justify-content: space-between; + align-items: center; + direction: ltr; + } + ha-slider { + flex: 1; + margin-right: 16px; + margin-inline-end: 16px; + margin-inline-start: 0; + } + ha-textfield { + --ha-textfield-input-width: 40px; + } + .single { + --ha-textfield-input-width: unset; + flex: 1; + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-selector.ts b/src/components/ha-selector/ha-selector-selector.ts index 8d6887e096..75f7f888f2 100644 --- a/src/components/ha-selector/ha-selector-selector.ts +++ b/src/components/ha-selector/ha-selector-selector.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -271,39 +271,37 @@ export class HaSelectorSelector extends LitElement { `ui.components.selectors.selector.${schema.name}` as LocalizeKeys ) || schema.name; - static get styles(): CSSResultGroup { - return css` - :host { - --expansion-panel-summary-padding: 0 16px; - } - ha-alert { - display: block; - margin-bottom: 16px; - } - ha-card { - margin: 0 0 16px 0; - } - ha-card.disabled { - pointer-events: none; - color: var(--disabled-text-color); - } - .card-content { - padding: 0px 16px 16px 16px; - } - .title { - font-size: 16px; - padding-top: 16px; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 16px; - padding-left: 16px; - padding-right: 4px; - padding-inline-start: 16px; - padding-inline-end: 4px; - white-space: nowrap; - } - `; - } + static styles = css` + :host { + --expansion-panel-summary-padding: 0 16px; + } + ha-alert { + display: block; + margin-bottom: 16px; + } + ha-card { + margin: 0 0 16px 0; + } + ha-card.disabled { + pointer-events: none; + color: var(--disabled-text-color); + } + .card-content { + padding: 0px 16px 16px 16px; + } + .title { + font-size: 16px; + padding-top: 16px; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 16px; + padding-left: 16px; + padding-right: 4px; + padding-inline-start: 16px; + padding-inline-end: 4px; + white-space: nowrap; + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-target.ts b/src/components/ha-selector/ha-selector-target.ts index 6136203420..00282b2ddb 100644 --- a/src/components/ha-selector/ha-selector-target.ts +++ b/src/components/ha-selector/ha-selector-target.ts @@ -2,7 +2,7 @@ import type { HassEntity, HassServiceTarget, } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -113,13 +113,11 @@ export class HaTargetSelector extends LitElement { ); }; - static get styles(): CSSResultGroup { - return css` - ha-target-picker { - display: block; - } - `; - } + static styles = css` + ha-target-picker { + display: block; + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-template.ts b/src/components/ha-selector/ha-selector-template.ts index e729d160ed..80047498c7 100644 --- a/src/components/ha-selector/ha-selector-template.ts +++ b/src/components/ha-selector/ha-selector-template.ts @@ -77,13 +77,11 @@ export class HaTemplateSelector extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles() { - return css` - p { - margin-top: 0; - } - `; - } + static styles = css` + p { + margin-top: 0; + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts index ada813f6ac..b7c7b60159 100644 --- a/src/components/ha-selector/ha-selector-text.ts +++ b/src/components/ha-selector/ha-selector-text.ts @@ -1,5 +1,4 @@ import { mdiEye, mdiEyeOff } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ensureArray } from "../../common/array/ensure-array"; @@ -126,29 +125,27 @@ export class HaTextSelector extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - position: relative; - } - ha-textarea, - ha-textfield { - width: 100%; - } - ha-icon-button { - position: absolute; - top: 8px; - right: 8px; - inset-inline-start: initial; - inset-inline-end: 8px; - --mdc-icon-button-size: 40px; - --mdc-icon-size: 20px; - color: var(--secondary-text-color); - direction: var(--direction); - } - `; - } + static styles = css` + :host { + display: block; + position: relative; + } + ha-textarea, + ha-textfield { + width: 100%; + } + ha-icon-button { + position: absolute; + top: 8px; + right: 8px; + inset-inline-start: initial; + inset-inline-end: 8px; + --mdc-icon-button-size: 40px; + --mdc-icon-size: 20px; + color: var(--secondary-text-color); + direction: var(--direction); + } + `; } declare global { diff --git a/src/components/ha-selector/ha-selector-trigger.ts b/src/components/ha-selector/ha-selector-trigger.ts index 71378ff889..ffbc98852b 100644 --- a/src/components/ha-selector/ha-selector-trigger.ts +++ b/src/components/ha-selector/ha-selector-trigger.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -38,19 +37,17 @@ export class HaTriggerSelector extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-automation-trigger { - display: block; - margin-bottom: 16px; - } - label { - display: block; - margin-bottom: 4px; - font-weight: 500; - } - `; - } + static styles = css` + ha-automation-trigger { + display: block; + margin-bottom: 16px; + } + label { + display: block; + margin-bottom: 4px; + font-weight: 500; + } + `; } declare global { diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts index 57c5620ec9..70ff1c5f97 100644 --- a/src/components/ha-service-control.ts +++ b/src/components/ha-service-control.ts @@ -4,7 +4,7 @@ import type { HassServices, HassServiceTarget, } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -60,15 +60,13 @@ interface Field extends Omit { } interface ExtHassService extends Omit { - fields: Array< - Omit & { - key: string; - selector?: Selector; - fields?: Record>; - collapsed?: boolean; - } - >; - flatFields: Array; + fields: (Omit & { + key: string; + selector?: Selector; + fields?: Record>; + collapsed?: boolean; + })[]; + flatFields: Field[]; hasSelector: string[]; } @@ -864,65 +862,63 @@ export class HaServiceControl extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - ha-settings-row { - padding: var(--service-control-padding, 0 16px); - } - ha-settings-row { - --paper-time-input-justify-content: flex-end; - --settings-row-content-width: 100%; - --settings-row-prefix-display: contents; - border-top: var( - --service-control-items-border-top, - 1px solid var(--divider-color) - ); - } - ha-service-picker, - ha-entity-picker, - ha-yaml-editor { - display: block; - margin: var(--service-control-padding, 0 16px); - } - ha-yaml-editor { - padding: 16px 0; - } - p { - margin: var(--service-control-padding, 0 16px); - padding: 16px 0; - } - :host([hidePicker]) p { - padding-top: 0; - } - .checkbox-spacer { - width: 32px; - } - ha-checkbox { - margin-left: -16px; - margin-inline-start: -16px; - margin-inline-end: initial; - } - .help-icon { - color: var(--secondary-text-color); - } - .description { - justify-content: space-between; - display: flex; - align-items: center; - padding-right: 2px; - padding-inline-end: 2px; - padding-inline-start: initial; - } - .description p { - direction: ltr; - } - ha-expansion-panel { - --ha-card-border-radius: 0; - --expansion-panel-summary-padding: 0 16px; - --expansion-panel-content-padding: 0; - } - `; - } + static styles = css` + ha-settings-row { + padding: var(--service-control-padding, 0 16px); + } + ha-settings-row { + --paper-time-input-justify-content: flex-end; + --settings-row-content-width: 100%; + --settings-row-prefix-display: contents; + border-top: var( + --service-control-items-border-top, + 1px solid var(--divider-color) + ); + } + ha-service-picker, + ha-entity-picker, + ha-yaml-editor { + display: block; + margin: var(--service-control-padding, 0 16px); + } + ha-yaml-editor { + padding: 16px 0; + } + p { + margin: var(--service-control-padding, 0 16px); + padding: 16px 0; + } + :host([hidePicker]) p { + padding-top: 0; + } + .checkbox-spacer { + width: 32px; + } + ha-checkbox { + margin-left: -16px; + margin-inline-start: -16px; + margin-inline-end: initial; + } + .help-icon { + color: var(--secondary-text-color); + } + .description { + justify-content: space-between; + display: flex; + align-items: center; + padding-right: 2px; + padding-inline-end: 2px; + padding-inline-start: initial; + } + .description p { + direction: ltr; + } + ha-expansion-panel { + --ha-card-border-radius: 0; + --expansion-panel-summary-padding: 0 16px; + --expansion-panel-content-padding: 0; + } + `; } declare global { diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts index 648c4eaf9b..3a2fbefa73 100644 --- a/src/components/ha-settings-row.ts +++ b/src/components/ha-settings-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; @@ -31,100 +31,93 @@ export class HaSettingsRow extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - padding: 0 16px; - align-content: normal; - align-self: auto; - align-items: center; - } - .body { - padding-top: 8px; - padding-bottom: 8px; - padding-left: 0; - padding-inline-start: 0; - padding-right: 16px; - padding-inline-end: 16px; - overflow: hidden; - display: var(--layout-vertical_-_display, flex); - flex-direction: var(--layout-vertical_-_flex-direction, column); - justify-content: var( - --layout-center-justified_-_justify-content, - center - ); - flex: var(--layout-flex_-_flex, 1); - flex-basis: var(--layout-flex_-_flex-basis, 0.000000001px); - } - .body[three-line] { - min-height: var(--paper-item-body-three-line-min-height, 88px); - } - :host(:not([wrap-heading])) body > * { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .body > .secondary { - display: block; - padding-top: 4px; - font-family: var( - --mdc-typography-body2-font-family, - var(--mdc-typography-font-family, Roboto, sans-serif) - ); - -webkit-font-smoothing: antialiased; - font-size: var(--mdc-typography-body2-font-size, 0.875rem); - font-weight: var(--mdc-typography-body2-font-weight, 400); - line-height: normal; - color: var(--secondary-text-color); - } - .body[two-line] { - min-height: calc( - var(--paper-item-body-two-line-min-height, 72px) - 16px - ); - flex: 1; - } - .content { - display: contents; - } - :host(:not([narrow])) .content { - display: var(--settings-row-content-display, flex); - justify-content: flex-end; - flex: 1; - padding: 16px 0; - } - .content ::slotted(*) { - width: var(--settings-row-content-width); - } - :host([narrow]) { - align-items: normal; - flex-direction: column; - border-top: 1px solid var(--divider-color); - padding-bottom: 8px; - } - ::slotted(ha-switch) { - padding: 16px 0; - } - .secondary { - white-space: normal; - } - .prefix-wrap { - display: var(--settings-row-prefix-display); - } - :host([narrow]) .prefix-wrap { - display: flex; - align-items: center; - } - :host([slim]), - :host([slim]) .content, - :host([slim]) ::slotted(ha-switch) { - padding: 0; - } - :host([slim]) .body { - min-height: 0; - } - `; - } + static styles = css` + :host { + display: flex; + padding: 0 16px; + align-content: normal; + align-self: auto; + align-items: center; + } + .body { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 0; + padding-inline-start: 0; + padding-right: 16px; + padding-inline-end: 16px; + overflow: hidden; + display: var(--layout-vertical_-_display, flex); + flex-direction: var(--layout-vertical_-_flex-direction, column); + justify-content: var(--layout-center-justified_-_justify-content, center); + flex: var(--layout-flex_-_flex, 1); + flex-basis: var(--layout-flex_-_flex-basis, 0.000000001px); + } + .body[three-line] { + min-height: var(--paper-item-body-three-line-min-height, 88px); + } + :host(:not([wrap-heading])) body > * { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .body > .secondary { + display: block; + padding-top: 4px; + font-family: var( + --mdc-typography-body2-font-family, + var(--mdc-typography-font-family, Roboto, sans-serif) + ); + -webkit-font-smoothing: antialiased; + font-size: var(--mdc-typography-body2-font-size, 0.875rem); + font-weight: var(--mdc-typography-body2-font-weight, 400); + line-height: normal; + color: var(--secondary-text-color); + } + .body[two-line] { + min-height: calc(var(--paper-item-body-two-line-min-height, 72px) - 16px); + flex: 1; + } + .content { + display: contents; + } + :host(:not([narrow])) .content { + display: var(--settings-row-content-display, flex); + justify-content: flex-end; + flex: 1; + padding: 16px 0; + } + .content ::slotted(*) { + width: var(--settings-row-content-width); + } + :host([narrow]) { + align-items: normal; + flex-direction: column; + border-top: 1px solid var(--divider-color); + padding-bottom: 8px; + } + ::slotted(ha-switch) { + padding: 16px 0; + } + .secondary { + white-space: normal; + } + .prefix-wrap { + display: var(--settings-row-prefix-display); + } + :host([narrow]) .prefix-wrap { + display: flex; + align-items: center; + } + :host([slim]), + :host([slim]) .content, + :host([slim]) ::slotted(ha-switch) { + padding: 0; + } + :host([slim]) .body { + min-height: 0; + } + `; } declare global { interface HTMLElementTagNameMap { diff --git a/src/components/ha-sortable.ts b/src/components/ha-sortable.ts index d65b5a4750..d5bf21638d 100644 --- a/src/components/ha-sortable.ts +++ b/src/components/ha-sortable.ts @@ -37,7 +37,7 @@ export class HaSortable extends LitElement { public disabled = false; @property({ type: Boolean, attribute: "no-style" }) - public noStyle: boolean = false; + public noStyle = false; @property({ type: String, attribute: "draggable-selector" }) public draggableSelector?: string; @@ -56,13 +56,13 @@ export class HaSortable extends LitElement { public group?: string | SortableInstance.GroupOptions; @property({ type: Boolean, attribute: "invert-swap" }) - public invertSwap: boolean = false; + public invertSwap = false; @property({ attribute: false }) public options?: HaSortableOptions; @property({ type: Boolean }) - public rollback: boolean = true; + public rollback = true; protected updated(changedProperties: PropertyValues) { if (changedProperties.has("disabled")) { diff --git a/src/components/ha-stt-picker.ts b/src/components/ha-stt-picker.ts index 47ce2ca6b1..246ba7c650 100644 --- a/src/components/ha-stt-picker.ts +++ b/src/components/ha-stt-picker.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -138,13 +138,11 @@ export class HaSTTPicker extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - ha-select { - width: 100%; - } - `; - } + static styles = css` + ha-select { + width: 100%; + } + `; private _changed(ev): void { const target = ev.target as HaSelect; diff --git a/src/components/ha-svg-icon.ts b/src/components/ha-svg-icon.ts index b950e37786..308ba05af3 100644 --- a/src/components/ha-svg-icon.ts +++ b/src/components/ha-svg-icon.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, SVGTemplateResult } from "lit"; +import type { SVGTemplateResult } from "lit"; import { css, LitElement, nothing, svg } from "lit"; import { customElement, property } from "lit/decorators"; @@ -34,33 +34,31 @@ export class HaSvgIcon extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: var(--ha-icon-display, inline-flex); - align-items: center; - justify-content: center; - position: relative; - vertical-align: middle; - fill: var(--icon-primary-color, currentcolor); - width: var(--mdc-icon-size, 24px); - height: var(--mdc-icon-size, 24px); - } - svg { - width: 100%; - height: 100%; - pointer-events: none; - display: block; - } - path.primary-path { - opacity: var(--icon-primary-opactity, 1); - } - path.secondary-path { - fill: var(--icon-secondary-color, currentcolor); - opacity: var(--icon-secondary-opactity, 0.5); - } - `; - } + static styles = css` + :host { + display: var(--ha-icon-display, inline-flex); + align-items: center; + justify-content: center; + position: relative; + vertical-align: middle; + fill: var(--icon-primary-color, currentcolor); + width: var(--mdc-icon-size, 24px); + height: var(--mdc-icon-size, 24px); + } + svg { + width: 100%; + height: 100%; + pointer-events: none; + display: block; + } + path.primary-path { + opacity: var(--icon-primary-opactity, 1); + } + path.secondary-path { + fill: var(--icon-secondary-color, currentcolor); + opacity: var(--icon-secondary-opactity, 0.5); + } + `; } declare global { interface HTMLElementTagNameMap { diff --git a/src/components/ha-tab.ts b/src/components/ha-tab.ts index 89419a740b..4d34de3005 100644 --- a/src/components/ha-tab.ts +++ b/src/components/ha-tab.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -34,59 +34,57 @@ export class HaTab extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - div { - padding: 0 32px; - display: flex; - flex-direction: column; - text-align: center; - box-sizing: border-box; - align-items: center; - justify-content: center; - width: 100%; - height: var(--header-height); - cursor: pointer; - position: relative; - outline: none; - } + static styles = css` + div { + padding: 0 32px; + display: flex; + flex-direction: column; + text-align: center; + box-sizing: border-box; + align-items: center; + justify-content: center; + width: 100%; + height: var(--header-height); + cursor: pointer; + position: relative; + outline: none; + } - .name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - } + .name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } - :host([active]) { - color: var(--primary-color); - } + :host([active]) { + color: var(--primary-color); + } - :host(:not([narrow])[active]) div { - border-bottom: 2px solid var(--primary-color); - } + :host(:not([narrow])[active]) div { + border-bottom: 2px solid var(--primary-color); + } - :host([narrow]) { - min-width: 0; - display: flex; - justify-content: center; - overflow: hidden; - } + :host([narrow]) { + min-width: 0; + display: flex; + justify-content: center; + overflow: hidden; + } - :host([narrow]) div { - padding: 0 4px; - } + :host([narrow]) div { + padding: 0 4px; + } - div:focus-visible:before { - position: absolute; - display: block; - content: ""; - inset: 0; - background-color: var(--secondary-text-color); - opacity: 0.08; - } - `; - } + div:focus-visible:before { + position: absolute; + display: block; + content: ""; + inset: 0; + background-color: var(--secondary-text-color); + opacity: 0.08; + } + `; } declare global { interface HTMLElementTagNameMap { diff --git a/src/components/ha-theme-picker.ts b/src/components/ha-theme-picker.ts index ebb8a9a1a8..fac1a3198a 100644 --- a/src/components/ha-theme-picker.ts +++ b/src/components/ha-theme-picker.ts @@ -1,5 +1,5 @@ import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, nothing, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -61,13 +61,11 @@ export class HaThemePicker extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-select { - width: 100%; - } - `; - } + static styles = css` + ha-select { + width: 100%; + } + `; private _changed(ev): void { if (!this.hass || ev.target.value === "") { diff --git a/src/components/ha-timezone-picker.ts b/src/components/ha-timezone-picker.ts index 88ffdabab0..6f9cb61ddc 100644 --- a/src/components/ha-timezone-picker.ts +++ b/src/components/ha-timezone-picker.ts @@ -1,5 +1,4 @@ import timezones from "google-timezones-json"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -38,13 +37,11 @@ export class HaTimeZonePicker extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-select { - width: 100%; - } - `; - } + static styles = css` + ha-select { + width: 100%; + } + `; private _changed(ev): void { const target = ev.target as HaSelect; diff --git a/src/components/ha-tts-picker.ts b/src/components/ha-tts-picker.ts index 37867ef08b..73bdea15d5 100644 --- a/src/components/ha-tts-picker.ts +++ b/src/components/ha-tts-picker.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -138,13 +138,11 @@ export class HaTTSPicker extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - ha-select { - width: 100%; - } - `; - } + static styles = css` + ha-select { + width: 100%; + } + `; private _changed(ev): void { const target = ev.target as HaSelect; diff --git a/src/components/ha-tts-voice-picker.ts b/src/components/ha-tts-voice-picker.ts index c35921a3cd..c5ee4ac21a 100644 --- a/src/components/ha-tts-voice-picker.ts +++ b/src/components/ha-tts-voice-picker.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -113,13 +113,11 @@ export class HaTTSVoicePicker extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - ha-select { - width: 100%; - } - `; - } + static styles = css` + ha-select { + width: 100%; + } + `; private _changed(ev): void { const target = ev.target as HaSelect; diff --git a/src/components/ha-vacuum-state.ts b/src/components/ha-vacuum-state.ts index bd77997afe..677b27d822 100644 --- a/src/components/ha-vacuum-state.ts +++ b/src/components/ha-vacuum-state.ts @@ -6,8 +6,9 @@ import type { HassEntity } from "home-assistant-js-websocket"; import { haStyle } from "../resources/styles"; import type { HomeAssistant } from "../types"; -const STATES_INTERCEPTABLE: { - [state: string]: { +const STATES_INTERCEPTABLE: Record< + string, + { action: | "return_to_base" | "start_cleaning" @@ -15,8 +16,8 @@ const STATES_INTERCEPTABLE: { | "turn_off" | "resume_cleaning"; service: string; - }; -} = { + } +> = { cleaning: { action: "return_to_base", service: "return_to_base", diff --git a/src/components/ha-valve-controls.ts b/src/components/ha-valve-controls.ts index cb58d82c69..6f50f505bb 100644 --- a/src/components/ha-valve-controls.ts +++ b/src/components/ha-valve-controls.ts @@ -1,5 +1,4 @@ import { mdiStop, mdiValveClosed, mdiValveOpen } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { LitElement, html, css, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -76,19 +75,17 @@ class HaValveControls extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - .state { - white-space: nowrap; - } - .hidden { - visibility: hidden !important; - } - `; - } + static styles = css` + :host { + display: block; + } + .state { + white-space: nowrap; + } + .hidden { + visibility: hidden !important; + } + `; } declare global { diff --git a/src/components/ha-web-rtc-player.ts b/src/components/ha-web-rtc-player.ts index b6fd851d6d..8ed6cc809d 100644 --- a/src/components/ha-web-rtc-player.ts +++ b/src/components/ha-web-rtc-player.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; @@ -423,19 +423,17 @@ class HaWebRtcPlayer extends LitElement { console.timeLog("WebRTC", msg, ...args); } - static get styles(): CSSResultGroup { - return css` - :host, - video { - display: block; - } + static styles = css` + :host, + video { + display: block; + } - video { - width: 100%; - max-height: var(--video-max-height, calc(100vh - 97px)); - } - `; - } + video { + width: 100%; + max-height: var(--video-max-height, calc(100vh - 97px)); + } + `; } declare global { diff --git a/src/components/map/ha-entity-marker.ts b/src/components/map/ha-entity-marker.ts index c6764015bc..744dc5c13a 100644 --- a/src/components/map/ha-entity-marker.ts +++ b/src/components/map/ha-entity-marker.ts @@ -49,32 +49,30 @@ class HaEntityMarker extends LitElement { } } - static get styles() { - return css` - .marker { - display: flex; - justify-content: center; - text-align: center; - align-items: center; - box-sizing: border-box; - width: 48px; - height: 48px; - font-size: var(--ha-marker-font-size, 1.5em); - border-radius: var(--ha-marker-border-radius, 50%); - border: 1px solid var(--ha-marker-color, var(--primary-color)); - color: var(--primary-text-color); - background-color: var(--card-background-color); - } - .marker.picture { - overflow: hidden; - } - .entity-picture { - background-size: cover; - height: 100%; - width: 100%; - } - `; - } + static styles = css` + .marker { + display: flex; + justify-content: center; + text-align: center; + align-items: center; + box-sizing: border-box; + width: 48px; + height: 48px; + font-size: var(--ha-marker-font-size, 1.5em); + border-radius: var(--ha-marker-border-radius, 50%); + border: 1px solid var(--ha-marker-color, var(--primary-color)); + color: var(--primary-text-color); + background-color: var(--card-background-color); + } + .marker.picture { + overflow: hidden; + } + .entity-picture { + background-size: cover; + height: 100%; + width: 100%; + } + `; } customElements.define("ha-entity-marker", HaEntityMarker); diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts index 9e08a3b068..4dd47750c9 100644 --- a/src/components/map/ha-locations-editor.ts +++ b/src/components/map/ha-locations-editor.ts @@ -7,7 +7,7 @@ import type { Marker, MarkerOptions, } from "leaflet"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -146,8 +146,8 @@ export class HaLocationsEditor extends LitElement { ( circles: Record, markers?: Record - ): Array => { - const layers: Array = []; + ): (Marker | Circle)[] => { + const layers: (Marker | Circle)[] = []; Array.prototype.push.apply(layers, Object.values(circles)); if (markers) { Array.prototype.push.apply(layers, Object.values(markers)); @@ -374,14 +374,12 @@ export class HaLocationsEditor extends LitElement { fireEvent(this, "markers-updated"); } - static get styles(): CSSResultGroup { - return css` - ha-map { - display: block; - height: 100%; - } - `; - } + static styles = css` + ha-map { + display: block; + height: 100%; + } + `; } declare global { diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts index c4da1d7afb..13020419b5 100644 --- a/src/components/map/ha-map.ts +++ b/src/components/map/ha-map.ts @@ -9,7 +9,7 @@ import type { Marker, Polyline, } from "leaflet"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { ReactiveElement, css } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -92,15 +92,15 @@ export class HaMap extends ReactiveElement { private _resizeObserver?: ResizeObserver; - private _mapItems: Array = []; + private _mapItems: (Marker | Circle)[] = []; - private _mapFocusItems: Array = []; + private _mapFocusItems: (Marker | Circle)[] = []; - private _mapZones: Array = []; + private _mapZones: (Marker | Circle)[] = []; - private _mapFocusZones: Array = []; + private _mapFocusZones: (Marker | Circle)[] = []; - private _mapPaths: Array = []; + private _mapPaths: (Polyline | CircleMarker)[] = []; private _clickCount = 0; @@ -576,81 +576,79 @@ export class HaMap extends ReactiveElement { this._resizeObserver.observe(this); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - height: 300px; - } - #map { - height: 100%; - } - #map.clickable { - cursor: pointer; - } - #map.dark { - background: #090909; - } - #map.forced-dark { - color: #ffffff; - --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) - contrast(1.2) saturate(0.3); - } - #map.forced-light { - background: #ffffff; - color: #000000; - --map-filter: invert(0); - } - #map.clickable:active, - #map:active { - cursor: grabbing; - cursor: -moz-grabbing; - cursor: -webkit-grabbing; - } - .leaflet-tile-pane { - filter: var(--map-filter); - } - .dark .leaflet-bar a { - background-color: #1c1c1c; - color: #ffffff; - } - .dark .leaflet-bar a:hover { - background-color: #313131; - } - .leaflet-marker-draggable { - cursor: move !important; - } - .leaflet-edit-resize { - border-radius: 50%; - cursor: nesw-resize !important; - } - .named-icon { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - text-align: center; - color: var(--primary-text-color); - } - .leaflet-pane { - z-index: 0 !important; - } - .leaflet-control, - .leaflet-top, - .leaflet-bottom { - z-index: 1 !important; - } - .leaflet-tooltip { - padding: 8px; - font-size: 90%; - background: rgba(80, 80, 80, 0.9) !important; - color: white !important; - border-radius: 4px; - box-shadow: none !important; - text-align: center; - } - `; - } + static styles = css` + :host { + display: block; + height: 300px; + } + #map { + height: 100%; + } + #map.clickable { + cursor: pointer; + } + #map.dark { + background: #090909; + } + #map.forced-dark { + color: #ffffff; + --map-filter: invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) + saturate(0.3); + } + #map.forced-light { + background: #ffffff; + color: #000000; + --map-filter: invert(0); + } + #map.clickable:active, + #map:active { + cursor: grabbing; + cursor: -moz-grabbing; + cursor: -webkit-grabbing; + } + .leaflet-tile-pane { + filter: var(--map-filter); + } + .dark .leaflet-bar a { + background-color: #1c1c1c; + color: #ffffff; + } + .dark .leaflet-bar a:hover { + background-color: #313131; + } + .leaflet-marker-draggable { + cursor: move !important; + } + .leaflet-edit-resize { + border-radius: 50%; + cursor: nesw-resize !important; + } + .named-icon { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + color: var(--primary-text-color); + } + .leaflet-pane { + z-index: 0 !important; + } + .leaflet-control, + .leaflet-top, + .leaflet-bottom { + z-index: 1 !important; + } + .leaflet-tooltip { + padding: 8px; + font-size: 90%; + background: rgba(80, 80, 80, 0.9) !important; + color: white !important; + border-radius: 4px; + box-shadow: none !important; + text-align: center; + } + `; } declare global { diff --git a/src/components/search-input-outlined.ts b/src/components/search-input-outlined.ts index 05b799eedf..bc43b88ecc 100644 --- a/src/components/search-input-outlined.ts +++ b/src/components/search-input-outlined.ts @@ -1,5 +1,5 @@ import { mdiClose, mdiMagnify } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; @@ -80,29 +80,27 @@ class SearchInputOutlined extends LitElement { this._filterChanged(""); } - static get styles(): CSSResultGroup { - return css` - :host { - display: inline-flex; - /* For iOS */ - z-index: 0; - --mdc-icon-button-size: 24px; - } - ha-outlined-text-field { - display: block; - width: 100%; - --ha-outlined-field-container-color: var(--card-background-color); - } - ha-svg-icon, - ha-icon-button { - display: flex; - color: var(--primary-text-color); - } - ha-svg-icon { - outline: none; - } - `; - } + static styles = css` + :host { + display: inline-flex; + /* For iOS */ + z-index: 0; + --mdc-icon-button-size: 24px; + } + ha-outlined-text-field { + display: block; + width: 100%; + --ha-outlined-field-container-color: var(--card-background-color); + } + ha-svg-icon, + ha-icon-button { + display: flex; + color: var(--primary-text-color); + } + ha-svg-icon { + outline: none; + } + `; } declare global { diff --git a/src/components/search-input.ts b/src/components/search-input.ts index 854d3805be..d347e3e39c 100644 --- a/src/components/search-input.ts +++ b/src/components/search-input.ts @@ -1,5 +1,5 @@ import { mdiClose, mdiMagnify } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import "./ha-icon-button"; @@ -75,30 +75,28 @@ class SearchInput extends LitElement { this._filterChanged(""); } - static get styles(): CSSResultGroup { - return css` - :host { - display: inline-flex; - } - ha-svg-icon, - ha-icon-button { - color: var(--primary-text-color); - } - ha-svg-icon { - outline: none; - } - .clear-button { - --mdc-icon-size: 20px; - } - ha-textfield { - display: inherit; - } - .trailing { - display: flex; - align-items: center; - } - `; - } + static styles = css` + :host { + display: inline-flex; + } + ha-svg-icon, + ha-icon-button { + color: var(--primary-text-color); + } + ha-svg-icon { + outline: none; + } + .clear-button { + --mdc-icon-size: 20px; + } + ha-textfield { + display: inherit; + } + .trailing { + display: flex; + align-items: center; + } + `; } declare global { diff --git a/src/components/tile/ha-tile-badge.ts b/src/components/tile/ha-tile-badge.ts index 8ea4e992db..7ec189f2b5 100644 --- a/src/components/tile/ha-tile-badge.ts +++ b/src/components/tile/ha-tile-badge.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement } from "lit/decorators"; import "../ha-icon"; @@ -13,29 +13,27 @@ export class HaTileBadge extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - --tile-badge-background-color: var(--primary-color); - --tile-badge-icon-color: var(--white-color); - --mdc-icon-size: 12px; - } - .badge { - display: flex; - align-items: center; - justify-content: center; - line-height: 0; - width: 16px; - height: 16px; - border-radius: 8px; - background-color: var(--tile-badge-background-color); - transition: background-color 280ms ease-in-out; - } - .badge ::slotted(*) { - color: var(--tile-badge-icon-color); - } - `; - } + static styles = css` + :host { + --tile-badge-background-color: var(--primary-color); + --tile-badge-icon-color: var(--white-color); + --mdc-icon-size: 12px; + } + .badge { + display: flex; + align-items: center; + justify-content: center; + line-height: 0; + width: 16px; + height: 16px; + border-radius: 8px; + background-color: var(--tile-badge-background-color); + transition: background-color 280ms ease-in-out; + } + .badge ::slotted(*) { + color: var(--tile-badge-icon-color); + } + `; } declare global { diff --git a/src/components/tile/ha-tile-icon.ts b/src/components/tile/ha-tile-icon.ts index 5fcb137bcd..bd26530a59 100644 --- a/src/components/tile/ha-tile-icon.ts +++ b/src/components/tile/ha-tile-icon.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { customElement } from "lit/decorators"; import "../ha-icon"; @@ -14,41 +14,39 @@ export class HaTileIcon extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - --tile-icon-color: var(--disabled-color); - --mdc-icon-size: 22px; - } - .shape::before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: var(--tile-icon-color); - transition: background-color 180ms ease-in-out; - opacity: 0.2; - } - .shape { - position: relative; - width: 36px; - height: 36px; - border-radius: 18px; - display: flex; - align-items: center; - justify-content: center; - transition: color 180ms ease-in-out; - overflow: hidden; - } - .shape ::slotted(*) { - display: flex; - color: var(--tile-icon-color); - transition: color 180ms ease-in-out; - } - `; - } + static styles = css` + :host { + --tile-icon-color: var(--disabled-color); + --mdc-icon-size: 22px; + } + .shape::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: var(--tile-icon-color); + transition: background-color 180ms ease-in-out; + opacity: 0.2; + } + .shape { + position: relative; + width: 36px; + height: 36px; + border-radius: 18px; + display: flex; + align-items: center; + justify-content: center; + transition: color 180ms ease-in-out; + overflow: hidden; + } + .shape ::slotted(*) { + display: flex; + color: var(--tile-icon-color); + transition: color 180ms ease-in-out; + } + `; } declare global { diff --git a/src/components/tile/ha-tile-image.ts b/src/components/tile/ha-tile-image.ts index 51d785dcd9..b1e100b996 100644 --- a/src/components/tile/ha-tile-image.ts +++ b/src/components/tile/ha-tile-image.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -22,31 +21,29 @@ export class HaTileImage extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .image { - position: relative; - width: 36px; - height: 36px; - border-radius: 18px; - display: flex; - flex: none; - align-items: center; - justify-content: center; - overflow: hidden; - } - .image.rounded-square { - border-radius: 8%; - } - .image.square { - border-radius: 0; - } - .image img { - width: 100%; - height: 100%; - } - `; - } + static styles = css` + .image { + position: relative; + width: 36px; + height: 36px; + border-radius: 18px; + display: flex; + flex: none; + align-items: center; + justify-content: center; + overflow: hidden; + } + .image.rounded-square { + border-radius: 8%; + } + .image.square { + border-radius: 0; + } + .image img { + width: 100%; + height: 100%; + } + `; } declare global { diff --git a/src/components/tile/ha-tile-info.ts b/src/components/tile/ha-tile-info.ts index 48910ab133..c7067b5595 100644 --- a/src/components/tile/ha-tile-info.ts +++ b/src/components/tile/ha-tile-info.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { html, css, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; @@ -19,38 +19,36 @@ export class HaTileInfo extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .info { - width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - height: 36px; - } - span { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - width: 100%; - } - .primary { - font-weight: 500; - font-size: 14px; - line-height: 20px; - letter-spacing: 0.1px; - color: var(--primary-text-color); - } - .secondary { - font-weight: 400; - font-size: 12px; - line-height: 16px; - letter-spacing: 0.4px; - color: var(--primary-text-color); - } - `; - } + static styles = css` + .info { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + height: 36px; + } + span { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 100%; + } + .primary { + font-weight: 500; + font-size: 14px; + line-height: 20px; + letter-spacing: 0.1px; + color: var(--primary-text-color); + } + .secondary { + font-weight: 400; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.4px; + color: var(--primary-text-color); + } + `; } declare global { diff --git a/src/components/trace/ha-trace-path-details.ts b/src/components/trace/ha-trace-path-details.ts index 19c8590af4..2645703833 100644 --- a/src/components/trace/ha-trace-path-details.ts +++ b/src/components/trace/ha-trace-path-details.ts @@ -127,11 +127,9 @@ export class HaTracePathDetails extends LitElement { .substring(this.selected.path.length + 1) .split("/"); let currentDetail = this.selected.config; - for (let i = 0; i < nestPath.length; i++) { - if ( - !["undefined", "string"].includes(typeof currentDetail[nestPath[i]]) - ) { - currentDetail = currentDetail[nestPath[i]]; + for (const part of nestPath) { + if (!["undefined", "string"].includes(typeof currentDetail[part])) { + currentDetail = currentDetail[part]; } } diff --git a/src/components/trace/hat-graph-branch.ts b/src/components/trace/hat-graph-branch.ts index 373cfb58d5..c5da464bcf 100644 --- a/src/components/trace/hat-graph-branch.ts +++ b/src/components/trace/hat-graph-branch.ts @@ -132,51 +132,49 @@ export class HatGraphBranch extends LitElement { `; } - static get styles() { - return css` - :host { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - } - :host(:focus) { - outline: none; - } - #branches { - position: relative; - display: flex; - flex-direction: row; - align-items: start; - } - ::slotted(*) { - z-index: 1; - } - ::slotted([slot="head"]) { - margin-bottom: calc(var(--hat-graph-branch-height) / -2); - } - #lines { - position: absolute; - } - #top { - height: var(--hat-graph-branch-height); - } - #bottom { - height: calc(var(--hat-graph-branch-height) + var(--hat-graph-spacing)); - } - path { - stroke: var(--stroke-clr); - stroke-width: 2; - fill: none; - } - path.track { - stroke: var(--track-clr); - } - :host([disabled]) path { - stroke: var(--disabled-clr); - } - `; - } + static styles = css` + :host { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + } + :host(:focus) { + outline: none; + } + #branches { + position: relative; + display: flex; + flex-direction: row; + align-items: start; + } + ::slotted(*) { + z-index: 1; + } + ::slotted([slot="head"]) { + margin-bottom: calc(var(--hat-graph-branch-height) / -2); + } + #lines { + position: absolute; + } + #top { + height: var(--hat-graph-branch-height); + } + #bottom { + height: calc(var(--hat-graph-branch-height) + var(--hat-graph-spacing)); + } + path { + stroke: var(--stroke-clr); + stroke-width: 2; + fill: none; + } + path.track { + stroke: var(--track-clr); + } + :host([disabled]) path { + stroke: var(--disabled-clr); + } + `; } declare global { diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts index 994f1dc68a..330338b7cc 100644 --- a/src/components/trace/hat-graph-node.ts +++ b/src/components/trace/hat-graph-node.ts @@ -102,86 +102,82 @@ export class HatGraphNode extends LitElement { `; } - static get styles() { - return css` - :host { - display: flex; - flex-direction: column; - min-width: calc(var(--hat-graph-node-size) + var(--hat-graph-spacing)); - height: calc( - var(--hat-graph-node-size) + var(--hat-graph-spacing) + 1px - ); - } - :host([graph-start]) { - height: calc(var(--hat-graph-node-size) + 2px); - } - :host([track]) { - --stroke-clr: var(--track-clr); - --icon-clr: var(--default-icon-clr); - } - :host([active]) circle { - --stroke-clr: var(--active-clr); - --icon-clr: var(--default-icon-clr); - } - :host(:focus) { - outline: none; - } - :host(:hover) circle { - --stroke-clr: var(--hover-clr); - --icon-clr: var(--default-icon-clr); - } - :host([notEnabled]) circle { - --stroke-clr: var(--disabled-clr); - } - :host([notEnabled][active]) circle { - --stroke-clr: var(--disabled-active-clr); - } - :host([notEnabled]:hover) circle { - --stroke-clr: var(--disabled-hover-clr); - } - svg:not(.safari) { - width: 100%; - height: 100%; - } - circle, - path.connector { - stroke: var(--stroke-clr); - stroke-width: 2; - fill: none; - } - circle { - fill: var(--background-clr); - stroke: var(--circle-clr, var(--stroke-clr)); - } - .error circle { - fill: var(--error-color); - stroke: none; - stroke-width: 0; - } - .error .exclamation { - fill: var(--text-primary-color); - } - .number circle { - fill: var(--track-clr); - stroke: none; - stroke-width: 0; - } - .number text { - font-size: 10px; - fill: var(--text-primary-color); - } - path.icon { - fill: var(--icon-clr); - } - foreignObject { - width: 24px; - height: 24px; - } - .icon { - color: var(--icon-clr); - } - `; - } + static styles = css` + :host { + display: flex; + flex-direction: column; + min-width: calc(var(--hat-graph-node-size) + var(--hat-graph-spacing)); + height: calc(var(--hat-graph-node-size) + var(--hat-graph-spacing) + 1px); + } + :host([graph-start]) { + height: calc(var(--hat-graph-node-size) + 2px); + } + :host([track]) { + --stroke-clr: var(--track-clr); + --icon-clr: var(--default-icon-clr); + } + :host([active]) circle { + --stroke-clr: var(--active-clr); + --icon-clr: var(--default-icon-clr); + } + :host(:focus) { + outline: none; + } + :host(:hover) circle { + --stroke-clr: var(--hover-clr); + --icon-clr: var(--default-icon-clr); + } + :host([notEnabled]) circle { + --stroke-clr: var(--disabled-clr); + } + :host([notEnabled][active]) circle { + --stroke-clr: var(--disabled-active-clr); + } + :host([notEnabled]:hover) circle { + --stroke-clr: var(--disabled-hover-clr); + } + svg:not(.safari) { + width: 100%; + height: 100%; + } + circle, + path.connector { + stroke: var(--stroke-clr); + stroke-width: 2; + fill: none; + } + circle { + fill: var(--background-clr); + stroke: var(--circle-clr, var(--stroke-clr)); + } + .error circle { + fill: var(--error-color); + stroke: none; + stroke-width: 0; + } + .error .exclamation { + fill: var(--text-primary-color); + } + .number circle { + fill: var(--track-clr); + stroke: none; + stroke-width: 0; + } + .number text { + font-size: 10px; + fill: var(--text-primary-color); + } + path.icon { + fill: var(--icon-clr); + } + foreignObject { + width: 24px; + height: 24px; + } + .icon { + color: var(--icon-clr); + } + `; } declare global { diff --git a/src/components/trace/hat-graph-spacer.ts b/src/components/trace/hat-graph-spacer.ts index 32a91622e8..385605e644 100644 --- a/src/components/trace/hat-graph-spacer.ts +++ b/src/components/trace/hat-graph-spacer.ts @@ -25,32 +25,28 @@ export class HatGraphSpacer extends LitElement { `; } - static get styles() { - return css` - :host { - display: flex; - flex-direction: column; - align-items: center; - } - svg { - width: var(--hat-graph-spacing); - height: calc( - var(--hat-graph-spacing) + var(--hat-graph-node-size) + 1px - ); - } - :host([track]) { - --stroke-clr: var(--track-clr); - } - :host-context([disabled]) { - --stroke-clr: var(--disabled-clr); - } - path { - stroke: var(--stroke-clr); - stroke-width: 2; - fill: none; - } - `; - } + static styles = css` + :host { + display: flex; + flex-direction: column; + align-items: center; + } + svg { + width: var(--hat-graph-spacing); + height: calc(var(--hat-graph-spacing) + var(--hat-graph-node-size) + 1px); + } + :host([track]) { + --stroke-clr: var(--track-clr); + } + :host-context([disabled]) { + --stroke-clr: var(--disabled-clr); + } + path { + stroke: var(--stroke-clr); + stroke-width: 2; + fill: none; + } + `; } declare global { diff --git a/src/components/trace/hat-trace-timeline.ts b/src/components/trace/hat-trace-timeline.ts index cfffbce232..7c330ccde1 100644 --- a/src/components/trace/hat-trace-timeline.ts +++ b/src/components/trace/hat-trace-timeline.ts @@ -94,7 +94,7 @@ class RenderedTimeTracker { class LogbookRenderer { private curIndex: number; - private pendingItems: Array<[Date, LogbookEntry]> = []; + private pendingItems: [Date, LogbookEntry][] = []; constructor( private entries: TemplateResult[], @@ -198,7 +198,7 @@ class ActionRenderer { private hass: HomeAssistant, private entityReg: EntityRegistryEntry[], private labelReg: LabelRegistryEntry[], - private floorReg: { [id: string]: FloorRegistryEntry }, + private floorReg: Record, private entries: TemplateResult[], private trace: AutomationTraceExtended, private logbookRenderer: LogbookRenderer, @@ -231,7 +231,7 @@ class ActionRenderer { const value = this._getItem(index); if (renderAllIterations) { - let i: number = 0; + let i = 0; value.forEach((item) => { i = this._renderIteration(index, item, actionType); }); @@ -689,7 +689,7 @@ export class HaAutomationTracer extends LitElement { @state() @consume({ context: floorsContext, subscribe: true }) - _floorReg!: { [id: string]: FloorRegistryEntry }; + _floorReg!: Record; protected render() { if (!this.trace) { diff --git a/src/components/user/ha-person-badge.ts b/src/components/user/ha-person-badge.ts index 9c25ff8e17..675166c962 100644 --- a/src/components/user/ha-person-badge.ts +++ b/src/components/user/ha-person-badge.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -31,38 +30,36 @@ class PersonBadge extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - width: 40px; - height: 40px; - display: block; - } - .picture { - width: 100%; - height: 100%; - background-size: cover; - border-radius: 50%; - } - .initials { - display: inline-flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - width: 100%; - height: 100%; - border-radius: 50%; - background-color: var(--light-primary-color); - text-decoration: none; - color: var(--text-light-primary-color, var(--primary-text-color)); - overflow: hidden; - font-size: var(--person-badge-font-size, 1em); - } - .initials.long { - font-size: 80%; - } - `; - } + static styles = css` + :host { + width: 40px; + height: 40px; + display: block; + } + .picture { + width: 100%; + height: 100%; + background-size: cover; + border-radius: 50%; + } + .initials { + display: inline-flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + width: 100%; + height: 100%; + border-radius: 50%; + background-color: var(--light-primary-color); + text-decoration: none; + color: var(--text-light-primary-color, var(--primary-text-color)); + overflow: hidden; + font-size: var(--person-badge-font-size, 1em); + } + .initials.long { + font-size: 80%; + } + `; } declare global { diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts index 43ea90596f..421f65468b 100644 --- a/src/components/user/ha-user-badge.ts +++ b/src/components/user/ha-user-badge.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -80,34 +80,32 @@ class UserBadge extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: contents; - } - .picture { - width: 40px; - height: 40px; - background-size: cover; - border-radius: 50%; - } - .initials { - display: inline-block; - box-sizing: border-box; - width: 40px; - line-height: 40px; - border-radius: 50%; - text-align: center; - background-color: var(--light-primary-color); - text-decoration: none; - color: var(--text-light-primary-color, var(--primary-text-color)); - overflow: hidden; - } - .initials.long { - font-size: 80%; - } - `; - } + static styles = css` + :host { + display: contents; + } + .picture { + width: 40px; + height: 40px; + background-size: cover; + border-radius: 50%; + } + .initials { + display: inline-block; + box-sizing: border-box; + width: 40px; + line-height: 40px; + border-radius: 50%; + text-align: center; + background-color: var(--light-primary-color); + text-decoration: none; + color: var(--text-light-primary-color, var(--primary-text-color)); + overflow: hidden; + } + .initials.long { + font-size: 80%; + } + `; } declare global { diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts index 537eb3ef3d..3536d8d542 100644 --- a/src/components/user/ha-user-picker.ts +++ b/src/components/user/ha-user-picker.ts @@ -1,5 +1,5 @@ import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -88,16 +88,14 @@ class HaUserPicker extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: inline-block; - } - mwc-list { - display: block; - } - `; - } + static styles = css` + :host { + display: inline-block; + } + mwc-list { + display: block; + } + `; } customElements.define("ha-user-picker", HaUserPicker); diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts index 9c56402a32..d3160be467 100644 --- a/src/components/user/ha-users-picker.ts +++ b/src/components/user/ha-users-picker.ts @@ -1,5 +1,4 @@ import { mdiClose } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { guard } from "lit/directives/guard"; @@ -154,17 +153,15 @@ class HaUsersPickerLight extends LitElement { this._updateUsers(this._currentUsers.filter((user) => user !== userId)); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - div { - display: flex; - align-items: center; - } - `; - } + static styles = css` + :host { + display: block; + } + div { + display: flex; + align-items: center; + } + `; } declare global { diff --git a/src/data/alarm_control_panel.ts b/src/data/alarm_control_panel.ts index f2378e1951..e5169ff71b 100644 --- a/src/data/alarm_control_panel.ts +++ b/src/data/alarm_control_panel.ts @@ -63,11 +63,11 @@ export type AlarmMode = | "armed_custom_bypass" | "disarmed"; -type AlarmConfig = { +interface AlarmConfig { service: string; feature?: AlarmControlPanelEntityFeature; path: string; -}; +} export const ALARM_MODES: Record = { armed_home: { feature: AlarmControlPanelEntityFeature.ARM_HOME, diff --git a/src/data/area_registry.ts b/src/data/area_registry.ts index 9dd2671a5a..e70230b2e1 100644 --- a/src/data/area_registry.ts +++ b/src/data/area_registry.ts @@ -16,13 +16,9 @@ export interface AreaRegistryEntry extends RegistryEntry { aliases: string[]; } -export interface AreaEntityLookup { - [areaId: string]: EntityRegistryEntry[]; -} +export type AreaEntityLookup = Record; -export interface AreaDeviceLookup { - [areaId: string]: DeviceRegistryEntry[]; -} +export type AreaDeviceLookup = Record; export interface AreaRegistryEntryMutableParams { name: string; diff --git a/src/data/automation.ts b/src/data/automation.ts index f00246ea58..7308e51e34 100644 --- a/src/data/automation.ts +++ b/src/data/automation.ts @@ -291,9 +291,10 @@ export interface ShorthandNotCondition extends ShorthandBaseCondition { not: Condition[]; } -export interface AutomationElementGroup { - [key: string]: { icon?: string; members?: AutomationElementGroup }; -} +export type AutomationElementGroup = Record< + string, + { icon?: string; members?: AutomationElementGroup } +>; export type Condition = | StateCondition @@ -519,8 +520,8 @@ export const testCondition = ( variables, }); -export type AutomationClipboard = { +export interface AutomationClipboard { trigger?: Trigger; condition?: Condition; action?: Action; -}; +} diff --git a/src/data/automation_i18n.ts b/src/data/automation_i18n.ts index 1542d1c000..9a914dcaa9 100644 --- a/src/data/automation_i18n.ts +++ b/src/data/automation_i18n.ts @@ -404,7 +404,7 @@ const tryDescribeTrigger = ( ); } - const invalidParts: Array<"seconds" | "minutes" | "hours"> = []; + const invalidParts: ("seconds" | "minutes" | "hours")[] = []; let secondsChoice: "every" | "every_interval" | "on_the_xth" | "other" = "other"; @@ -737,7 +737,7 @@ const tryDescribeTrigger = ( ? computeStateName(hass.states[trigger.entity_id]) : trigger.entity_id; - let offsetChoice: string = "other"; + let offsetChoice = "other"; let offset: string | string[] = ""; if (trigger.offset) { offsetChoice = trigger.offset.startsWith("-") ? "before" : "after"; @@ -815,7 +815,7 @@ const tryDescribeCondition = ( } if (!condition.condition) { - const shorthands: Array<"and" | "or" | "not"> = ["and", "or", "not"]; + const shorthands: ("and" | "or" | "not")[] = ["and", "or", "not"]; for (const key of shorthands) { if (!(key in condition)) { continue; diff --git a/src/data/backup.ts b/src/data/backup.ts index d1299a2a7e..9b470505a0 100644 --- a/src/data/backup.ts +++ b/src/data/backup.ts @@ -106,7 +106,7 @@ export interface BackupAgentsInfo { agents: BackupAgent[]; } -export type GenerateBackupParams = { +export interface GenerateBackupParams { agent_ids: string[]; include_addons?: string[]; include_all_addons?: boolean; @@ -115,9 +115,9 @@ export type GenerateBackupParams = { include_homeassistant?: boolean; name?: string; password?: string; -}; +} -export type RestoreBackupParams = { +export interface RestoreBackupParams { backup_id: string; agent_id: string; password?: string; @@ -125,7 +125,7 @@ export type RestoreBackupParams = { restore_database?: boolean; restore_folders?: string[]; restore_homeassistant?: boolean; -}; +} export const fetchBackupConfig = (hass: HomeAssistant) => hass.callWS<{ config: BackupConfig }>({ type: "backup/config/info" }); diff --git a/src/data/backup_manager.ts b/src/data/backup_manager.ts index be6e26217a..245a101f91 100644 --- a/src/data/backup_manager.ts +++ b/src/data/backup_manager.ts @@ -36,27 +36,27 @@ export type RestoreBackupStage = export type RestoreBackupState = "completed" | "failed" | "in_progress"; -type IdleEvent = { +interface IdleEvent { manager_state: "idle"; -}; +} -type CreateBackupEvent = { +interface CreateBackupEvent { manager_state: "create_backup"; stage: CreateBackupStage | null; state: CreateBackupState; -}; +} -type ReceiveBackupEvent = { +interface ReceiveBackupEvent { manager_state: "receive_backup"; stage: ReceiveBackupStage | null; state: ReceiveBackupState; -}; +} -type RestoreBackupEvent = { +interface RestoreBackupEvent { manager_state: "restore_backup"; stage: RestoreBackupStage | null; state: RestoreBackupState; -}; +} export type ManagerStateEvent = | IdleEvent diff --git a/src/data/bootstrap_integrations.ts b/src/data/bootstrap_integrations.ts index c1a6134736..f142f50de9 100644 --- a/src/data/bootstrap_integrations.ts +++ b/src/data/bootstrap_integrations.ts @@ -1,6 +1,6 @@ import type { HomeAssistant } from "../types"; -export type BootstrapIntegrationsTimings = { [key: string]: number }; +export type BootstrapIntegrationsTimings = Record; export const subscribeBootstrapIntegrations = ( hass: HomeAssistant, diff --git a/src/data/cloud.ts b/src/data/cloud.ts index 41eae5c341..1a35be028b 100644 --- a/src/data/cloud.ts +++ b/src/data/cloud.ts @@ -23,7 +23,7 @@ export interface CloudPreferences { remote_allow_remote_enable: boolean; strict_connection: StrictConnectionMode; google_secure_devices_pin: string | undefined; - cloudhooks: { [webhookId: string]: CloudWebhook }; + cloudhooks: Record; alexa_report_state: boolean; google_report_state: boolean; tts_default_voice: [string, string]; diff --git a/src/data/cloud/tts.ts b/src/data/cloud/tts.ts index 54dd9cf490..103c389075 100644 --- a/src/data/cloud/tts.ts +++ b/src/data/cloud/tts.ts @@ -2,7 +2,7 @@ import { caseInsensitiveStringCompare } from "../../common/string/compare"; import type { HomeAssistant } from "../../types"; export interface CloudTTSInfo { - languages: Array<[string, string]>; + languages: [string, string][]; } export const getCloudTTSInfo = (hass: HomeAssistant) => @@ -30,7 +30,7 @@ export const getCloudTtsSupportedVoices = ( language: string, info: CloudTTSInfo | undefined ) => { - const voices: Array = []; + const voices: string[] = []; if (!info) { return voices; diff --git a/src/data/config.ts b/src/data/config.ts index adf8f32170..d21f515964 100644 --- a/src/data/config.ts +++ b/src/data/config.ts @@ -12,9 +12,7 @@ interface InvalidConfig { type ValidKeys = "triggers" | "actions" | "conditions"; -export const validateConfig = < - T extends Partial<{ [key in ValidKeys]: unknown }>, ->( +export const validateConfig = >>( hass: HomeAssistant, config: T ): Promise> => diff --git a/src/data/conversation.ts b/src/data/conversation.ts index d9d5b79526..8d46785206 100644 --- a/src/data/conversation.ts +++ b/src/data/conversation.ts @@ -13,11 +13,7 @@ interface IntentTarget { interface IntentResultBase { language: string; - speech: - | { - [SpeechType in "plain" | "ssml"]: { extra_data: any; speech: string }; - } - | null; + speech: Record<"plain" | "ssml", { extra_data: any; speech: string }> | null; } interface IntentResultActionDone extends IntentResultBase { diff --git a/src/data/custom_icons.ts b/src/data/custom_icons.ts index 397b11984c..6000edf51f 100644 --- a/src/data/custom_icons.ts +++ b/src/data/custom_icons.ts @@ -17,9 +17,7 @@ export interface CustomIconHelpers { } export interface CustomIconsWindow { - customIcons?: { - [key: string]: CustomIconHelpers; - }; + customIcons?: Record; } const customIconsWindow = window as CustomIconsWindow; diff --git a/src/data/custom_iconsets.ts b/src/data/custom_iconsets.ts index c2e5170d0e..eff2227064 100644 --- a/src/data/custom_iconsets.ts +++ b/src/data/custom_iconsets.ts @@ -1,7 +1,7 @@ import type { CustomIcon } from "./custom_icons"; interface CustomIconsetsWindow { - customIconsets?: { [key: string]: (name: string) => Promise }; + customIconsets?: Record Promise>; } const customIconsetsWindow = window as CustomIconsetsWindow; diff --git a/src/data/data_table_filters.ts b/src/data/data_table_filters.ts index 03c7cc7c09..8b9a6cdd16 100644 --- a/src/data/data_table_filters.ts +++ b/src/data/data_table_filters.ts @@ -1,19 +1,16 @@ -export interface DataTableFilters { - [key: string]: { +export type DataTableFilters = Record< + string, + { value: DataTableFiltersValue; items: Set | undefined; - }; -} + } +>; export type DataTableFiltersValue = string[] | { key: string[] } | undefined; -export interface DataTableFiltersValues { - [key: string]: DataTableFiltersValue; -} +export type DataTableFiltersValues = Record; -export interface DataTableFiltersItems { - [key: string]: Set | undefined; -} +export type DataTableFiltersItems = Record | undefined>; export const serializeFilters = (value: DataTableFilters) => { const serializedValue = {}; diff --git a/src/data/device_registry.ts b/src/data/device_registry.ts index 958da7c634..9eca8f9865 100644 --- a/src/data/device_registry.ts +++ b/src/data/device_registry.ts @@ -17,8 +17,8 @@ export { export interface DeviceRegistryEntry extends RegistryEntry { id: string; config_entries: string[]; - connections: Array<[string, string]>; - identifiers: Array<[string, string]>; + connections: [string, string][]; + identifiers: [string, string][]; manufacturer: string | null; model: string | null; model_id: string | null; @@ -36,13 +36,12 @@ export interface DeviceRegistryEntry extends RegistryEntry { primary_config_entry: string | null; } -export interface DeviceEntityDisplayLookup { - [deviceId: string]: EntityRegistryDisplayEntry[]; -} +export type DeviceEntityDisplayLookup = Record< + string, + EntityRegistryDisplayEntry[] +>; -export interface DeviceEntityLookup { - [deviceId: string]: EntityRegistryEntry[]; -} +export type DeviceEntityLookup = Record; export interface DeviceRegistryEntryMutableParams { area_id?: string | null; diff --git a/src/data/energy.ts b/src/data/energy.ts index 201d3c2386..0b375a6995 100644 --- a/src/data/energy.ts +++ b/src/data/energy.ts @@ -90,9 +90,7 @@ export const emptyWaterEnergyPreference = interface EnergySolarForecast { wh_hours: Record; } -export type EnergySolarForecasts = { - [config_entry_id: string]: EnergySolarForecast; -}; +export type EnergySolarForecasts = Record; export interface DeviceConsumptionEnergyPreference { // This is an ever increasing value @@ -232,9 +230,7 @@ export const saveEnergyPreferences = async ( return newPrefs; }; -export interface FossilEnergyConsumption { - [date: string]: number; -} +export type FossilEnergyConsumption = Record; export const getFossilEnergyConsumption = async ( hass: HomeAssistant, @@ -801,15 +797,15 @@ export const energyStatisticHelpUrl = "/docs/energy/faq/#troubleshooting-missing-entities"; interface EnergySumData { - to_grid?: { [start: number]: number }; - from_grid?: { [start: number]: number }; - to_battery?: { [start: number]: number }; - from_battery?: { [start: number]: number }; - solar?: { [start: number]: number }; + to_grid?: Record; + from_grid?: Record; + to_battery?: Record; + from_battery?: Record; + solar?: Record; } interface EnergyConsumptionData { - total: { [start: number]: number }; + total: Record; } export const getSummedData = memoizeOne( @@ -880,8 +876,8 @@ const getSummedDataPartial = ( const summedData: EnergySumData = {}; Object.entries(statIds).forEach(([key, subStatIds]) => { - const totalStats: { [start: number]: number } = {}; - const sets: { [statId: string]: { [start: number]: number } } = {}; + const totalStats: Record = {}; + const sets: Record> = {}; subStatIds!.forEach((id) => { const stats = compare ? data.statsCompare[id] : data.stats[id]; if (!stats) { diff --git a/src/data/entity_registry.ts b/src/data/entity_registry.ts index 05659e2766..770d998d7c 100644 --- a/src/data/entity_registry.ts +++ b/src/data/entity_registry.ts @@ -61,7 +61,7 @@ export interface EntityRegistryEntry extends RegistryEntry { unique_id: string; translation_key?: string; options: EntityRegistryOptions | null; - categories: { [scope: string]: string }; + categories: Record; } export interface ExtEntityRegistryEntry extends EntityRegistryEntry { @@ -144,7 +144,7 @@ export interface EntityRegistryEntryUpdateParams { | LightEntityOptions; aliases?: string[]; labels?: string[]; - categories?: { [scope: string]: string | null }; + categories?: Record; } const batteryPriorities = ["sensor", "binary_sensor"]; diff --git a/src/data/floor_registry.ts b/src/data/floor_registry.ts index c5093255cd..8f3bd579c3 100644 --- a/src/data/floor_registry.ts +++ b/src/data/floor_registry.ts @@ -13,9 +13,7 @@ export interface FloorRegistryEntry extends RegistryEntry { aliases: string[]; } -export interface FloorAreaLookup { - [floorId: string]: AreaRegistryEntry[]; -} +export type FloorAreaLookup = Record; export interface FloorRegistryEntryMutableParams { name: string; diff --git a/src/data/hassio/backup.ts b/src/data/hassio/backup.ts index 0257128bf7..d9937e1dce 100644 --- a/src/data/hassio/backup.ts +++ b/src/data/hassio/backup.ts @@ -32,12 +32,12 @@ export interface HassioBackup { export interface HassioBackupDetail extends HassioBackup { size: number; homeassistant: string; - addons: Array<{ + addons: { slug: "ADDON_SLUG"; name: "NAME"; version: "INSTALLED_VERSION"; size: "SIZE_IN_MB"; - }>; + }[]; repositories: string[]; folders: string[]; } @@ -59,9 +59,7 @@ export const fetchHassioBackups = async ( hass: HomeAssistant ): Promise => { if (atLeastVersion(hass.config.version, 2021, 2, 4)) { - const data: { - [key: string]: HassioBackup[]; - } = await hass.callWS({ + const data: Record = await hass.callWS({ type: "supervisor/api", endpoint: `/${ atLeastVersion(hass.config.version, 2021, 9) ? "backups" : "snapshots" diff --git a/src/data/hassio/docker.ts b/src/data/hassio/docker.ts index 9c800e4e0d..c0172ca6eb 100644 --- a/src/data/hassio/docker.ts +++ b/src/data/hassio/docker.ts @@ -3,9 +3,10 @@ import type { HomeAssistant } from "../../types"; import type { HassioResponse } from "./common"; import { hassioApiResultExtractor } from "./common"; -interface HassioDockerRegistries { - [key: string]: { username: string; password?: string }; -} +type HassioDockerRegistries = Record< + string, + { username: string; password?: string } +>; export const fetchHassioDockerRegistries = async ( hass: HomeAssistant diff --git a/src/data/hassio/host.ts b/src/data/hassio/host.ts index f71e8317eb..46452aa212 100644 --- a/src/data/hassio/host.ts +++ b/src/data/hassio/host.ts @@ -3,7 +3,7 @@ import type { HomeAssistant } from "../../types"; import type { HassioResponse } from "./common"; import { hassioApiResultExtractor } from "./common"; -export type HassioHostInfo = { +export interface HassioHostInfo { agent_version: string; chassis: string; cpe: string; @@ -18,7 +18,7 @@ export type HassioHostInfo = { operating_system: string; boot_timestamp: number; startup_time: number; -}; +} export interface HassioHassOSInfo { board: string | null; diff --git a/src/data/hassio/network.ts b/src/data/hassio/network.ts index 51cd6b8e37..0107e9b033 100644 --- a/src/data/hassio/network.ts +++ b/src/data/hassio/network.ts @@ -127,10 +127,7 @@ export const formatAddress = (ip: string, mask: string) => `${ip}/${netmaskToCidr(mask)}`; // Helper functions -export const cidrToNetmask = ( - cidr: string, - isIPv6: boolean = false -): string => { +export const cidrToNetmask = (cidr: string, isIPv6 = false): string => { const bits = parseInt(cidr, 10); if (isIPv6) { const fullMask = "ffff:ffff:ffff:ffff:ffff:ffff:ffff:ffff"; diff --git a/src/data/hassio/supervisor.ts b/src/data/hassio/supervisor.ts index a013aab07d..280865210c 100644 --- a/src/data/hassio/supervisor.ts +++ b/src/data/hassio/supervisor.ts @@ -4,7 +4,7 @@ import type { SupervisorArch } from "../supervisor/supervisor"; import type { HassioResponse } from "./common"; import { hassioApiResultExtractor } from "./common"; -export type HassioHomeAssistantInfo = { +export interface HassioHomeAssistantInfo { arch: SupervisorArch; audio_input: string | null; audio_output: string | null; @@ -19,9 +19,9 @@ export type HassioHomeAssistantInfo = { version: string; wait_boot: number; watchdog: boolean; -}; +} -export type HassioSupervisorInfo = { +export interface HassioSupervisorInfo { addons: string[]; addons_repositories: string[]; arch: SupervisorArch; @@ -38,9 +38,9 @@ export type HassioSupervisorInfo = { version: string; version_latest: string; wait_boot: number; -}; +} -export type HassioInfo = { +export interface HassioInfo { arch: SupervisorArch; channel: string; docker: string; @@ -64,11 +64,11 @@ export type HassioInfo = { supported: boolean; supported_arch: SupervisorArch[]; timezone: string; -}; +} -export type HassioBoots = { +export interface HassioBoots { boots: Record; -}; +} export type HassioPanelInfo = PanelInfo< | undefined diff --git a/src/data/history.ts b/src/data/history.ts index 4506097e54..09171d4d8a 100644 --- a/src/data/history.ts +++ b/src/data/history.ts @@ -72,15 +72,13 @@ export interface HistoryResult { timeline: TimelineEntity[]; } -export interface HistoryStates { - [entityId: string]: EntityHistoryState[]; -} +export type HistoryStates = Record; export interface EntityHistoryState { /** state */ s: string; /** attributes */ - a: { [key: string]: any }; + a: Record; /** last_changed; if set, also applies to lu */ lc?: number; /** last_updated */ @@ -406,7 +404,7 @@ const NUMERICAL_DOMAINS = ["counter", "input_number", "number"]; const isNumericFromDomain = (domain: string) => NUMERICAL_DOMAINS.includes(domain); -const isNumericFromAttributes = (attributes: { [key: string]: any }) => +const isNumericFromAttributes = (attributes: Record) => "unit_of_measurement" in attributes || "state_class" in attributes; const isNumericSensorEntity = ( @@ -475,7 +473,7 @@ export const computeHistory = ( splitDeviceClasses = false, forceNumeric = false ): HistoryResult => { - const lineChartDevices: { [unit: string]: HistoryStates } = {}; + const lineChartDevices: Record = {}; const timelineDevices: TimelineEntity[] = []; const localStateHistory: HistoryStates = {}; diff --git a/src/data/icons.ts b/src/data/icons.ts index c46ea561ad..c59224b2a9 100644 --- a/src/data/icons.ts +++ b/src/data/icons.ts @@ -127,7 +127,7 @@ const resources: { }; services: { all?: Promise>; - domains: { [domain: string]: ServiceIcons | Promise }; + domains: Record>; }; } = { entity: {}, @@ -141,8 +141,9 @@ interface IconResources< resources: Record; } -interface PlatformIcons { - [translation_key: string]: { +type PlatformIcons = Record< + string, + { state: Record; state_attributes: Record< string, @@ -152,11 +153,12 @@ interface PlatformIcons { } >; default: string; - }; -} + } +>; -export interface ComponentIcons { - [device_class: string]: { +export type ComponentIcons = Record< + string, + { state?: Record; state_attributes?: Record< string, @@ -166,20 +168,21 @@ export interface ComponentIcons { } >; default: string; - }; -} + } +>; -interface ServiceIcons { - [service: string]: { service: string; sections?: { [name: string]: string } }; -} +type ServiceIcons = Record< + string, + { service: string; sections?: Record } +>; export type IconCategory = "entity" | "entity_component" | "services"; -type CategoryType = { +interface CategoryType { entity: PlatformIcons; entity_component: ComponentIcons; services: ServiceIcons; -}; +} export const getHassIcons = async ( hass: HomeAssistant, diff --git a/src/data/iconsets.ts b/src/data/iconsets.ts index 5bf8f1671e..8dbc53259e 100644 --- a/src/data/iconsets.ts +++ b/src/data/iconsets.ts @@ -4,13 +4,9 @@ import { promiseTimeout } from "../common/util/promise-timeout"; import { iconMetadata } from "../resources/icon-metadata"; import type { IconMeta } from "../types"; -export interface Icons { - [key: string]: string; -} +export type Icons = Record; -export interface Chunks { - [key: string]: Promise; -} +export type Chunks = Record>; const getStore = memoizeOne(async () => { const iconStore = createStore("hass-icon-db", "mdi-icon-store"); @@ -32,9 +28,11 @@ const getStore = memoizeOne(async () => { export const MDI_PREFIXES = ["mdi", "hass", "hassio", "hademo"]; -let toRead: Array< - [string, (iconPath: string | undefined) => void, (e: any) => void] -> = []; +let toRead: [ + string, + (iconPath: string | undefined) => void, + (e: any) => void, +][] = []; // Queue up as many icon fetches in 1 transaction export const getIcon = (iconName: string) => diff --git a/src/data/image_upload.ts b/src/data/image_upload.ts index 2ea6af4ed1..225c473f37 100644 --- a/src/data/image_upload.ts +++ b/src/data/image_upload.ts @@ -32,7 +32,7 @@ export const getIdFromUrl = (url: string): string | undefined => { export const generateImageThumbnailUrl = ( mediaId: string, size?: number, - original: boolean = false + original = false ) => { if (!original && !size) { throw new Error("Size must be provided if original is false"); diff --git a/src/data/integration.ts b/src/data/integration.ts index c293dfc540..1cecc97b75 100644 --- a/src/data/integration.ts +++ b/src/data/integration.ts @@ -33,7 +33,7 @@ export interface IntegrationManifest { after_dependencies?: string[]; codeowners?: string[]; requirements?: string[]; - ssdp?: Array<{ manufacturer?: string; modelName?: string; st?: string }>; + ssdp?: { manufacturer?: string; modelName?: string; st?: string }[]; zeroconf?: string[]; homekit?: { models: string[] }; integration_type?: IntegrationType; diff --git a/src/data/integrations.ts b/src/data/integrations.ts index a006bdb51c..63a572dfb8 100644 --- a/src/data/integrations.ts +++ b/src/data/integrations.ts @@ -15,9 +15,7 @@ export interface Integration { single_config_entry?: boolean; } -export interface Integrations { - [domain: string]: Integration; -} +export type Integrations = Record; export interface Brand { name?: string; @@ -27,9 +25,7 @@ export interface Brand { overwrites_built_in?: boolean; } -export interface Brands { - [domain: string]: Integration | Brand; -} +export type Brands = Record; export interface IntegrationDescriptions { core: { diff --git a/src/data/lawn_mower.ts b/src/data/lawn_mower.ts index 21b0aff59b..fbc2c5875f 100644 --- a/src/data/lawn_mower.ts +++ b/src/data/lawn_mower.ts @@ -17,9 +17,9 @@ export const enum LawnMowerEntityFeature { DOCK = 4, } -interface LawnMowerEntityAttributes extends HassEntityAttributeBase { - [key: string]: any; -} +interface LawnMowerEntityAttributes + extends HassEntityAttributeBase, + Record {} export interface LawnMowerEntity extends HassEntityBase { attributes: LawnMowerEntityAttributes; diff --git a/src/data/logbook.ts b/src/data/logbook.ts index 14a13fca99..ed2c8c2658 100644 --- a/src/data/logbook.ts +++ b/src/data/logbook.ts @@ -148,7 +148,8 @@ export const subscribeLogbook = ( export const createHistoricState = ( currentStateObj: HassEntity, state?: string -): HassEntity => ({ +): HassEntity => + ({ entity_id: currentStateObj.entity_id, state: state, attributes: { @@ -170,7 +171,7 @@ export const createHistoricState = ( ? undefined : currentStateObj?.attributes.entity_picture, }, - }); + }) as unknown as HassEntity; export const localizeTriggerSource = ( localize: LocalizeFunc, diff --git a/src/data/lovelace/resource.ts b/src/data/lovelace/resource.ts index 726a534bb4..f0b877af89 100644 --- a/src/data/lovelace/resource.ts +++ b/src/data/lovelace/resource.ts @@ -1,16 +1,16 @@ import type { Connection } from "home-assistant-js-websocket"; import type { HomeAssistant } from "../../types"; -export type LovelaceResource = { +export interface LovelaceResource { id: string; type: "css" | "js" | "module" | "html"; url: string; -}; +} -export type LovelaceResourcesMutableParams = { +export interface LovelaceResourcesMutableParams { res_type: LovelaceResource["type"]; url: string; -}; +} export const fetchResources = (conn: Connection): Promise => conn.sendMessagePromise({ diff --git a/src/data/matter.ts b/src/data/matter.ts index b08cf0dd05..e67b2e5172 100644 --- a/src/data/matter.ts +++ b/src/data/matter.ts @@ -40,9 +40,7 @@ export interface MatterNodeDiagnostics { active_fabric_index: number; } -export interface MatterPingResult { - [ip_address: string]: boolean; -} +export type MatterPingResult = Record; export interface MatterCommissioningParameters { setup_pin_code: number; diff --git a/src/data/media-player.ts b/src/data/media-player.ts index a5faaa1c32..3f18d26958 100644 --- a/src/data/media-player.ts +++ b/src/data/media-player.ts @@ -108,16 +108,17 @@ export const BROWSER_PLAYER = "browser"; export type MediaPlayerLayoutType = "grid" | "list" | "auto"; -export type MediaClassBrowserSetting = { +export interface MediaClassBrowserSetting { icon: string; thumbnail_ratio?: string; layout?: "grid"; show_list_images?: boolean; -}; +} -export const MediaClassBrowserSettings: { - [type: string]: MediaClassBrowserSetting; -} = { +export const MediaClassBrowserSettings: Record< + string, + MediaClassBrowserSetting +> = { album: { icon: mdiAlbum, layout: "grid" }, app: { icon: mdiApplication, layout: "grid", show_list_images: true }, artist: { icon: mdiAccountMusic, layout: "grid", show_list_images: true }, diff --git a/src/data/number.ts b/src/data/number.ts index 5bdfdbc176..af5de70d1b 100644 --- a/src/data/number.ts +++ b/src/data/number.ts @@ -1,6 +1,8 @@ import type { HomeAssistant } from "../types"; -export type NumberDeviceClassUnits = { units: string[] }; +export interface NumberDeviceClassUnits { + units: string[]; +} export const getNumberDeviceClassConvertibleUnits = ( hass: HomeAssistant, diff --git a/src/data/persistent_notification.ts b/src/data/persistent_notification.ts index 42cd8b81c0..5825473191 100644 --- a/src/data/persistent_notification.ts +++ b/src/data/persistent_notification.ts @@ -19,9 +19,7 @@ export interface PersistentNotification { status: "read" | "unread"; } -export interface PersistentNotifications { - [notificationId: string]: PersistentNotification; -} +export type PersistentNotifications = Record; export interface PersistentNotificationMessage { type: "added" | "removed" | "current" | "updated"; diff --git a/src/data/recorder.ts b/src/data/recorder.ts index b1d29c6e1c..dcfe19480b 100644 --- a/src/data/recorder.ts +++ b/src/data/recorder.ts @@ -14,9 +14,7 @@ export interface RecorderInfo { export type StatisticType = "change" | "state" | "sum" | "min" | "max" | "mean"; -export interface Statistics { - [statisticId: string]: StatisticValue[]; -} +export type Statistics = Record; export interface StatisticValue { start: number; @@ -120,9 +118,10 @@ const _statisticTypes = [ ] as const; export type StatisticsTypes = (typeof _statisticTypes)[number][]; -export interface StatisticsValidationResults { - [statisticId: string]: StatisticsValidationResult[]; -} +export type StatisticsValidationResults = Record< + string, + StatisticsValidationResult[] +>; export const getRecorderInfo = (conn: Connection) => conn.sendMessagePromise({ diff --git a/src/data/scene.ts b/src/data/scene.ts index 750fdf9135..72b5715df0 100644 --- a/src/data/scene.ts +++ b/src/data/scene.ts @@ -55,13 +55,15 @@ export interface SceneConfig { metadata?: SceneMetaData; } -export interface SceneEntities { - [entityId: string]: string | { state: string; [key: string]: any }; -} +export type SceneEntities = Record< + string, + string | { state: string; [key: string]: any } +>; -export interface SceneMetaData { - [entityId: string]: { entity_only?: boolean | undefined }; -} +export type SceneMetaData = Record< + string, + { entity_only?: boolean | undefined } +>; export const activateScene = ( hass: HomeAssistant, diff --git a/src/data/schedule.ts b/src/data/schedule.ts index d69eddfa63..d3b85b571f 100644 --- a/src/data/schedule.ts +++ b/src/data/schedule.ts @@ -15,7 +15,7 @@ export interface ScheduleDay { to: string; } -type ScheduleDays = { [K in (typeof weekdays)[number]]?: ScheduleDay[] }; +type ScheduleDays = Partial>; export interface Schedule extends ScheduleDays { id: string; diff --git a/src/data/script.ts b/src/data/script.ts index 34d9065e94..413b46c164 100644 --- a/src/data/script.ts +++ b/src/data/script.ts @@ -97,9 +97,7 @@ export interface BlueprintScriptConfig extends ManualScriptConfig { use_blueprint: { path: string; input?: BlueprintInput }; } -export interface Fields { - [key: string]: Field; -} +export type Fields = Record; export interface Field { name?: string; @@ -242,9 +240,7 @@ export interface SetConversationResponseAction extends BaseAction { set_conversation_response: string; } -interface UnknownAction extends BaseAction { - [key: string]: unknown; -} +interface UnknownAction extends BaseAction, Record {} export type NonConditionAction = | EventAction diff --git a/src/data/script_i18n.ts b/src/data/script_i18n.ts index a459d23ff4..0e289a9474 100644 --- a/src/data/script_i18n.ts +++ b/src/data/script_i18n.ts @@ -43,7 +43,7 @@ export const describeAction = ( hass: HomeAssistant, entityRegistry: EntityRegistryEntry[], labelRegistry: LabelRegistryEntry[], - floorRegistry: { [id: string]: FloorRegistryEntry }, + floorRegistry: Record, action: ActionTypes[T], actionType?: T, ignoreAlias = false @@ -77,7 +77,7 @@ const tryDescribeAction = ( hass: HomeAssistant, entityRegistry: EntityRegistryEntry[], labelRegistry: LabelRegistryEntry[], - floorRegistry: { [id: string]: FloorRegistryEntry }, + floorRegistry: Record, action: ActionTypes[T], actionType?: T, ignoreAlias = false diff --git a/src/data/sensor.ts b/src/data/sensor.ts index f4ac62a385..1d114881f9 100644 --- a/src/data/sensor.ts +++ b/src/data/sensor.ts @@ -3,7 +3,9 @@ import type { HomeAssistant } from "../types"; export const SENSOR_DEVICE_CLASS_BATTERY = "battery"; export const SENSOR_DEVICE_CLASS_TIMESTAMP = "timestamp"; -export type SensorDeviceClassUnits = { units: string[] }; +export interface SensorDeviceClassUnits { + units: string[]; +} export const getSensorDeviceClassConvertibleUnits = ( hass: HomeAssistant, @@ -14,9 +16,9 @@ export const getSensorDeviceClassConvertibleUnits = ( device_class: deviceClass, }); -export type SensorNumericDeviceClasses = { +export interface SensorNumericDeviceClasses { numeric_device_classes: string[]; -}; +} let sensorNumericDeviceClassesCache: | Promise diff --git a/src/data/system_health.ts b/src/data/system_health.ts index b08f9b779e..60bdc21337 100644 --- a/src/data/system_health.ts +++ b/src/data/system_health.ts @@ -26,14 +26,13 @@ export type SystemCheckValue = | boolean | SystemCheckValueObject; -export interface SystemHealthInfo { - [domain: string]: { +export type SystemHealthInfo = Record< + string, + { manage_url?: string; - info: { - [key: string]: SystemCheckValue; - }; - }; -} + info: Record; + } +>; interface SystemHealthEventInitial { type: "initial"; diff --git a/src/data/thread.ts b/src/data/thread.ts index 92391477e7..c169e8401a 100644 --- a/src/data/thread.ts +++ b/src/data/thread.ts @@ -35,7 +35,7 @@ export interface ThreadRouterDiscoveryEvent { } class DiscoveryStream { - routers: { [key: string]: ThreadRouter }; + routers: Record; constructor() { this.routers = {}; diff --git a/src/data/trace.ts b/src/data/trace.ts index 8f2d474880..a8f20cf41f 100644 --- a/src/data/trace.ts +++ b/src/data/trace.ts @@ -151,7 +151,7 @@ export const loadTraces = ( hass: HomeAssistant, domain: T, item_id: string -): Promise> => +): Promise => hass.callWS({ type: "trace/list", domain, diff --git a/src/data/weather.ts b/src/data/weather.ts index 609f83ba83..ef5cefeaff 100644 --- a/src/data/weather.ts +++ b/src/data/weather.ts @@ -562,13 +562,13 @@ const isForecastTwiceDaily = ( return undefined; }; -export type WeatherUnits = { +export interface WeatherUnits { precipitation_unit: string[]; pressure_unit: string[]; temperature_unit: string[]; visibility_unit: string[]; wind_speed_unit: string[]; -}; +} export const getWeatherConvertibleUnits = ( hass: HomeAssistant diff --git a/src/data/zwave_js.ts b/src/data/zwave_js.ts index 981426a013..5a4887e92f 100644 --- a/src/data/zwave_js.ts +++ b/src/data/zwave_js.ts @@ -209,9 +209,10 @@ export interface ZWaveJSNodeStatus { has_firmware_update_cc: boolean; } -export type ZWaveJSNodeCapabilities = { - [endpoint: number]: ZWaveJSEndpointCapability[]; -}; +export type ZWaveJSNodeCapabilities = Record< + number, + ZWaveJSEndpointCapability[] +>; export interface ZWaveJSEndpointCapability { id: number; @@ -235,9 +236,7 @@ export interface ZwaveJSNodeAlerts { is_embedded: boolean | null; } -export interface ZWaveJSNodeConfigParams { - [key: string]: ZWaveJSNodeConfigParam; -} +export type ZWaveJSNodeConfigParams = Record; export interface ZWaveJSNodeComment { level: "info" | "warning" | "error"; @@ -262,7 +261,7 @@ export interface ZWaveJSNodeConfigParamMetadata { writeable: boolean; type: string; unit: string; - states: { [key: number]: string }; + states: Record; default: any; } @@ -302,7 +301,7 @@ export interface ZWaveJSRefreshNodeStatusMessage { export interface ZWaveJSRebuildRoutesStatusMessage { event: string; - rebuild_routes_status: { [key: number]: string }; + rebuild_routes_status: Record; } export interface ZWaveJSControllerStatisticsUpdatedMessage { diff --git a/src/dialogs/config-flow/previews/entity-preview-row.ts b/src/dialogs/config-flow/previews/entity-preview-row.ts index 4bb8f68af0..61eac841b1 100644 --- a/src/dialogs/config-flow/previews/entity-preview-row.ts +++ b/src/dialogs/config-flow/previews/entity-preview-row.ts @@ -1,5 +1,5 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -45,63 +45,61 @@ class EntityPreviewRow extends LitElement {
${this._renderEntityState(stateObj)}
`; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - flex-direction: row; - } - .name { - margin-left: 16px; - margin-right: 8px; - margin-inline-start: 16px; - margin-inline-end: 8px; - flex: 1 1 30%; - } - .value { - direction: ltr; - } - .numberflex { - display: flex; - align-items: center; - justify-content: flex-end; - flex-grow: 2; - } - .numberstate { - min-width: 45px; - text-align: end; - } - ha-textfield { - text-align: end; - direction: ltr !important; - } - ha-slider { - width: 100%; - max-width: 200px; - } - ha-time-input { - margin-left: 4px; - margin-inline-start: 4px; - margin-inline-end: initial; - direction: var(--direction); - } - .datetimeflex { - display: flex; - justify-content: flex-end; - width: 100%; - } - mwc-button { - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - img { - display: block; - width: 100%; - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + flex-direction: row; + } + .name { + margin-left: 16px; + margin-right: 8px; + margin-inline-start: 16px; + margin-inline-end: 8px; + flex: 1 1 30%; + } + .value { + direction: ltr; + } + .numberflex { + display: flex; + align-items: center; + justify-content: flex-end; + flex-grow: 2; + } + .numberstate { + min-width: 45px; + text-align: end; + } + ha-textfield { + text-align: end; + direction: ltr !important; + } + ha-slider { + width: 100%; + max-width: 200px; + } + ha-time-input { + margin-left: 4px; + margin-inline-start: 4px; + margin-inline-end: initial; + direction: var(--direction); + } + .datetimeflex { + display: flex; + justify-content: flex-end; + width: 100%; + } + mwc-button { + margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + } + img { + display: block; + width: 100%; + } + `; private _renderEntityState(stateObj: HassEntity): TemplateResult | string { const domain = stateObj.entity_id.split(".", 1)[0]; diff --git a/src/dialogs/config-flow/step-flow-loading.ts b/src/dialogs/config-flow/step-flow-loading.ts index 1ff4534f0d..450f9d0b12 100644 --- a/src/dialogs/config-flow/step-flow-loading.ts +++ b/src/dialogs/config-flow/step-flow-loading.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../../components/ha-circular-progress"; @@ -33,17 +33,15 @@ class StepFlowLoading extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .init-spinner { - padding: 50px 100px; - text-align: center; - } - ha-circular-progress { - margin-top: 16px; - } - `; - } + static styles = css` + .init-spinner { + padding: 50px 100px; + text-align: center; + } + ha-circular-progress { + margin-top: 16px; + } + `; } declare global { diff --git a/src/dialogs/enter-code/dialog-enter-code.ts b/src/dialogs/enter-code/dialog-enter-code.ts index 75986b6c06..5a76df3e64 100644 --- a/src/dialogs/enter-code/dialog-enter-code.ts +++ b/src/dialogs/enter-code/dialog-enter-code.ts @@ -1,5 +1,4 @@ import { mdiCheck, mdiClose } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -178,70 +177,68 @@ export class DialogEnterCode `; } - static get styles(): CSSResultGroup { - return css` - ha-dialog { - /* Place above other dialogs */ - --dialog-z-index: 104; - } - ha-textfield { - width: 100%; - max-width: 300px; - margin: auto; - } - .container { - display: flex; - align-items: center; - flex-direction: column; - } + static styles = css` + ha-dialog { + /* Place above other dialogs */ + --dialog-z-index: 104; + } + ha-textfield { + width: 100%; + max-width: 300px; + margin: auto; + } + .container { + display: flex; + align-items: center; + flex-direction: column; + } + .keypad { + --keypad-columns: 3; + margin-top: 12px; + padding: 12px; + display: grid; + grid-template-columns: repeat(var(--keypad-columns), auto); + grid-auto-rows: auto; + grid-gap: 24px; + justify-items: center; + align-items: center; + } + .clear { + grid-row-start: 4; + grid-column-start: 0; + } + @media all and (max-height: 450px) { .keypad { - --keypad-columns: 3; - margin-top: 12px; - padding: 12px; - display: grid; - grid-template-columns: repeat(var(--keypad-columns), auto); - grid-auto-rows: auto; - grid-gap: 24px; - justify-items: center; - align-items: center; + --keypad-columns: 6; } .clear { - grid-row-start: 4; - grid-column-start: 0; - } - @media all and (max-height: 450px) { - .keypad { - --keypad-columns: 6; - } - .clear { - grid-row-start: 1; - grid-column-start: 6; - } + grid-row-start: 1; + grid-column-start: 6; } + } - ha-control-button { - width: 56px; - height: 56px; - --control-button-border-radius: 28px; - --mdc-icon-size: 24px; - font-size: 24px; - } - .submit { - --control-button-background-color: var(--green-color); - --control-button-icon-color: var(--green-color); - } - .clear { - --control-button-background-color: var(--red-color); - --control-button-icon-color: var(--red-color); - } - .hidden { - display: none; - } - .buttons { - margin-top: 12px; - } - `; - } + ha-control-button { + width: 56px; + height: 56px; + --control-button-border-radius: 28px; + --mdc-icon-size: 24px; + font-size: 24px; + } + .submit { + --control-button-background-color: var(--green-color); + --control-button-icon-color: var(--green-color); + } + .clear { + --control-button-background-color: var(--red-color); + --control-button-icon-color: var(--red-color); + } + .hidden { + display: none; + } + .buttons { + margin-top: 12px; + } + `; } declare global { diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts index 212c181c27..fa4277b025 100644 --- a/src/dialogs/generic/dialog-box.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -1,5 +1,4 @@ import { mdiAlertOutline } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -158,33 +157,31 @@ class DialogBox extends LitElement { this._params = undefined; } - static get styles(): CSSResultGroup { - return css` - :host([inert]) { - pointer-events: initial !important; - cursor: initial !important; - } - a { - color: var(--primary-color); - } - p { - margin: 0; - color: var(--primary-text-color); - } - .no-bottom-padding { - padding-bottom: 0; - } - .secondary { - color: var(--secondary-text-color); - } - .destructive { - --mdc-theme-primary: var(--error-color); - } - ha-textfield { - width: 100%; - } - `; - } + static styles = css` + :host([inert]) { + pointer-events: initial !important; + cursor: initial !important; + } + a { + color: var(--primary-color); + } + p { + margin: 0; + color: var(--primary-text-color); + } + .no-bottom-padding { + padding-bottom: 0; + } + .secondary { + color: var(--secondary-text-color); + } + .destructive { + --mdc-theme-primary: var(--error-color); + } + ha-textfield { + width: 100%; + } + `; } declare global { diff --git a/src/dialogs/make-dialog-manager.ts b/src/dialogs/make-dialog-manager.ts index f34d22c310..792fc4caa7 100644 --- a/src/dialogs/make-dialog-manager.ts +++ b/src/dialogs/make-dialog-manager.ts @@ -50,9 +50,7 @@ interface LoadedDialogInfo { closedFocusTargets?: Set; } -interface LoadedDialogsDict { - [tag: string]: LoadedDialogInfo; -} +type LoadedDialogsDict = Record; const LOADED: LoadedDialogsDict = {}; const OPEN_DIALOG_STACK: DialogState[] = []; diff --git a/src/dialogs/more-info/components/ha-more-info-control-select-container.ts b/src/dialogs/more-info/components/ha-more-info-control-select-container.ts index 61bebda8d0..2de2b17a59 100644 --- a/src/dialogs/more-info/components/ha-more-info-control-select-container.ts +++ b/src/dialogs/more-info/components/ha-more-info-control-select-container.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -22,55 +22,53 @@ export class HaMoreInfoControlSelectContainer extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .controls { - display: flex; - flex-direction: row; - justify-content: center; - } + static styles = css` + .controls { + display: flex; + flex-direction: row; + justify-content: center; + } + .controls-scroll { + display: flex; + flex-direction: row; + justify-content: flex-start; + gap: 12px; + margin: auto; + overflow: auto; + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + margin: 0 -24px; + padding: 0 24px; + } + .controls-scroll::-webkit-scrollbar { + display: none; + } + + ::slotted(*) { + min-width: 120px; + max-width: 160px; + flex: none; + } + + @media all and (hover: hover), + all and (min-width: 600px) and (min-height: 501px) { .controls-scroll { - display: flex; - flex-direction: row; - justify-content: flex-start; - gap: 12px; - margin: auto; - overflow: auto; - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ - margin: 0 -24px; - padding: 0 24px; + justify-content: center; + flex-wrap: wrap; + width: 100%; + max-width: 450px; } - .controls-scroll::-webkit-scrollbar { - display: none; + .controls-scroll.items-4 { + max-width: 300px; } - - ::slotted(*) { - min-width: 120px; - max-width: 160px; - flex: none; + .controls-scroll.items-3 ::slotted(*) { + max-width: 140px; } - - @media all and (hover: hover), - all and (min-width: 600px) and (min-height: 501px) { - .controls-scroll { - justify-content: center; - flex-wrap: wrap; - width: 100%; - max-width: 450px; - } - .controls-scroll.items-4 { - max-width: 300px; - } - .controls-scroll.items-3 ::slotted(*) { - max-width: 140px; - } - .multiline ::slotted(*) { - width: 140px; - } + .multiline ::slotted(*) { + width: 140px; } - `; - } + } + `; } declare global { diff --git a/src/dialogs/more-info/components/ha-more-info-state-header.ts b/src/dialogs/more-info/components/ha-more-info-state-header.ts index ee65a9d490..e166517bab 100644 --- a/src/dialogs/more-info/components/ha-more-info-state-header.ts +++ b/src/dialogs/more-info/components/ha-more-info-state-header.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-absolute-time"; @@ -67,33 +67,31 @@ export class HaMoreInfoStateHeader extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - p { - text-align: center; - margin: 0; - } - .state { - font-style: normal; - font-weight: 400; - font-size: 36px; - line-height: 44px; - } - .last-changed { - font-style: normal; - font-weight: 500; - font-size: 16px; - line-height: 24px; - letter-spacing: 0.1px; - padding: 4px 0; - margin-bottom: 20px; - cursor: pointer; - user-select: none; - -webkit-user-select: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - } - `; - } + static styles = css` + p { + text-align: center; + margin: 0; + } + .state { + font-style: normal; + font-weight: 400; + font-size: 36px; + line-height: 44px; + } + .last-changed { + font-style: normal; + font-weight: 500; + font-size: 16px; + line-height: 24px; + letter-spacing: 0.1px; + padding: 4px 0; + margin-bottom: 20px; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + `; } declare global { diff --git a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts index 0e69f23743..6c070539d4 100644 --- a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts +++ b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts @@ -1,5 +1,5 @@ import { mdiCheck, mdiMinus, mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -248,89 +248,87 @@ export class HaMoreInfoLightFavoriteColors extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .container { - position: relative; - display: flex; - align-items: center; - justify-content: center; - margin: -8px; - flex-wrap: wrap; - max-width: 250px; - user-select: none; - } + static styles = css` + .container { + position: relative; + display: flex; + align-items: center; + justify-content: center; + margin: -8px; + flex-wrap: wrap; + max-width: 250px; + user-select: none; + } - .container > * { - margin: 8px; - } + .container > * { + margin: 8px; + } - .color { - display: block; - } + .color { + display: block; + } - .color .color-bubble.shake { - position: relative; - display: block; - animation: shake 0.45s linear infinite; - } - .color:nth-child(3n + 1) .color-bubble.shake { - animation-delay: 0.15s; - } - .color:nth-child(3n + 2) .color-bubble.shake { - animation-delay: 0.3s; - } + .color .color-bubble.shake { + position: relative; + display: block; + animation: shake 0.45s linear infinite; + } + .color:nth-child(3n + 1) .color-bubble.shake { + animation-delay: 0.15s; + } + .color:nth-child(3n + 2) .color-bubble.shake { + animation-delay: 0.3s; + } - .sortable-ghost { - opacity: 0.4; - } - .sortable-fallback { - display: none; - } + .sortable-ghost { + opacity: 0.4; + } + .sortable-fallback { + display: none; + } - @keyframes shake { - 0% { - transform: rotateZ(0deg) translateX(-1px) translateY(0) scale(1); - } - 20% { - transform: rotateZ(-3deg) translateX(0) translateY(); - } - 40% { - transform: rotateZ(0deg) translateX(1px) translateY(0); - } - 60% { - transform: rotateZ(3deg) translateX(0) translateY(0); - } - 100% { - transform: rotateZ(0deg) translateX(-1px) translateY(0); - } + @keyframes shake { + 0% { + transform: rotateZ(0deg) translateX(-1px) translateY(0) scale(1); } + 20% { + transform: rotateZ(-3deg) translateX(0) translateY(); + } + 40% { + transform: rotateZ(0deg) translateX(1px) translateY(0); + } + 60% { + transform: rotateZ(3deg) translateX(0) translateY(0); + } + 100% { + transform: rotateZ(0deg) translateX(-1px) translateY(0); + } + } - .delete { - position: absolute; - top: -6px; - right: -6px; - inset-inline-end: -6px; - inset-inline-start: initial; - width: 20px; - height: 20px; - outline: none; - background-color: var(--secondary-background-color); - padding: 0; - border-radius: 10px; - border: none; - cursor: pointer; - display: block; - } - .delete { - --mdc-icon-size: 12px; - color: var(--primary-text-color); - } - .delete * { - pointer-events: none; - } - `; - } + .delete { + position: absolute; + top: -6px; + right: -6px; + inset-inline-end: -6px; + inset-inline-start: initial; + width: 20px; + height: 20px; + outline: none; + background-color: var(--secondary-background-color); + padding: 0; + border-radius: 10px; + border: none; + cursor: pointer; + display: block; + } + .delete { + --mdc-icon-size: 12px; + color: var(--primary-text-color); + } + .delete * { + pointer-events: none; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-automation.ts b/src/dialogs/more-info/controls/more-info-automation.ts index fb31a1d27c..0f554e2fd9 100644 --- a/src/dialogs/more-info/controls/more-info-automation.ts +++ b/src/dialogs/more-info/controls/more-info-automation.ts @@ -1,6 +1,5 @@ import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-relative-time"; @@ -45,25 +44,23 @@ class MoreInfoAutomation extends LitElement { triggerAutomationActions(this.hass, this.stateObj!.entity_id); } - static get styles(): CSSResultGroup { - return css` - .flex { - display: flex; - justify-content: space-between; - } - .actions { - margin: 8px 0; - display: flex; - flex-wrap: wrap; - justify-content: center; - } - hr { - border-color: var(--divider-color); - border-bottom: none; - margin: 16px 0; - } - `; - } + static styles = css` + .flex { + display: flex; + justify-content: space-between; + } + .actions { + margin: 8px 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + } + hr { + border-color: var(--divider-color); + border-bottom: none; + margin: 16px 0; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts index 57c7d53211..e45fe3a633 100644 --- a/src/dialogs/more-info/controls/more-info-camera.ts +++ b/src/dialogs/more-info/controls/more-info-camera.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { property, state } from "lit/decorators"; import "../../../components/ha-camera-stream"; @@ -93,25 +92,23 @@ class MoreInfoCamera extends LitElement { button.actionSuccess(); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } + static styles = css` + :host { + display: block; + } - .actions { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-end; - box-sizing: border-box; - padding: 12px; - z-index: 1; - gap: 8px; - } - `; - } + .actions { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; + box-sizing: border-box; + padding: 12px; + z-index: 1; + gap: 8px; + } + `; } customElements.define("more-info-camera", MoreInfoCamera); diff --git a/src/dialogs/more-info/controls/more-info-counter.ts b/src/dialogs/more-info/controls/more-info-counter.ts index ef78c455ed..2eb4a9763f 100644 --- a/src/dialogs/more-info/controls/more-info-counter.ts +++ b/src/dialogs/more-info/controls/more-info-counter.ts @@ -1,6 +1,5 @@ import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { isUnavailableState } from "../../../data/entity"; @@ -55,16 +54,14 @@ class MoreInfoCounter extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - .actions { - margin: 8px 0; - display: flex; - flex-wrap: wrap; - justify-content: center; - } - `; - } + static styles = css` + .actions { + margin: 8px 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-date.ts b/src/dialogs/more-info/controls/more-info-date.ts index 3faed61f49..590abce941 100644 --- a/src/dialogs/more-info/controls/more-info-date.ts +++ b/src/dialogs/more-info/controls/more-info-date.ts @@ -1,5 +1,4 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-date-input"; @@ -38,15 +37,13 @@ class MoreInfoDate extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - justify-content: flex-end; - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + justify-content: flex-end; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-datetime.ts b/src/dialogs/more-info/controls/more-info-datetime.ts index 5389d3dbae..4be1a2f756 100644 --- a/src/dialogs/more-info/controls/more-info-datetime.ts +++ b/src/dialogs/more-info/controls/more-info-datetime.ts @@ -1,6 +1,5 @@ import { format } from "date-fns"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-date-input"; @@ -66,20 +65,18 @@ class MoreInfoDatetime extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - justify-content: flex-end; - } - ha-date-input + ha-time-input { - margin-left: 4px; - margin-inline-start: 4px; - margin-inline-end: initial; - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + justify-content: flex-end; + } + ha-date-input + ha-time-input { + margin-left: 4px; + margin-inline-start: 4px; + margin-inline-end: initial; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-image.ts b/src/dialogs/more-info/controls/more-info-image.ts index a7cc5ab857..a3f3aef1b9 100644 --- a/src/dialogs/more-info/controls/more-info-image.ts +++ b/src/dialogs/more-info/controls/more-info-image.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-camera-stream"; @@ -22,17 +21,15 @@ class MoreInfoImage extends LitElement { /> `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - text-align: center; - } - img { - max-width: 100%; - } - `; - } + static styles = css` + :host { + display: block; + text-align: center; + } + img { + max-width: 100%; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-input_datetime.ts b/src/dialogs/more-info/controls/more-info-input_datetime.ts index 22be070cd9..403763c653 100644 --- a/src/dialogs/more-info/controls/more-info-input_datetime.ts +++ b/src/dialogs/more-info/controls/more-info-input_datetime.ts @@ -1,5 +1,4 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-date-input"; @@ -78,20 +77,18 @@ class MoreInfoInputDatetime extends LitElement { ); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - justify-content: flex-end; - } - ha-date-input + ha-time-input { - margin-left: 4px; - margin-inline-start: 4px; - margin-inline-end: initial; - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + justify-content: flex-end; + } + ha-date-input + ha-time-input { + margin-left: 4px; + margin-inline-start: 4px; + margin-inline-end: initial; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-lawn_mower.ts b/src/dialogs/more-info/controls/more-info-lawn_mower.ts index 5af81e5a21..399e2c348c 100644 --- a/src/dialogs/more-info/controls/more-info-lawn_mower.ts +++ b/src/dialogs/more-info/controls/more-info-lawn_mower.ts @@ -1,5 +1,4 @@ import { mdiHomeImportOutline, mdiPause, mdiPlay } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -177,24 +176,22 @@ class MoreInfoLawnMower extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - line-height: 1.5; - } - .status-subtitle { - color: var(--secondary-text-color); - } - .flex-horizontal { - display: flex; - flex-direction: row; - justify-content: space-between; - } - .space-around { - justify-content: space-around; - } - `; - } + static styles = css` + :host { + line-height: 1.5; + } + .status-subtitle { + color: var(--secondary-text-color); + } + .flex-horizontal { + display: flex; + flex-direction: row; + justify-content: space-between; + } + .space-around { + justify-content: space-around; + } + `; } declare global { 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 b2da9c6a9a..eeaa19d25e 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -9,7 +9,6 @@ import { mdiVolumeOff, mdiVolumePlus, } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { stopPropagation } from "../../../common/dom/stop_propagation"; @@ -205,69 +204,67 @@ class MoreInfoMediaPlayer extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-slider { - flex-grow: 1; - } + static styles = css` + ha-slider { + flex-grow: 1; + } - ha-icon-button[action="turn_off"], - ha-icon-button[action="turn_on"] { - margin-right: auto; - margin-left: inherit; - margin-inline-start: inherit; - margin-inline-end: auto; - } + ha-icon-button[action="turn_off"], + ha-icon-button[action="turn_on"] { + margin-right: auto; + margin-left: inherit; + margin-inline-start: inherit; + margin-inline-end: auto; + } - .controls { - display: flex; - flex-wrap: wrap; - align-items: center; - --mdc-theme-primary: currentColor; - direction: ltr; - } + .controls { + display: flex; + flex-wrap: wrap; + align-items: center; + --mdc-theme-primary: currentColor; + direction: ltr; + } - .basic-controls { - display: inline-flex; - flex-grow: 1; - } + .basic-controls { + display: inline-flex; + flex-grow: 1; + } - .volume { - direction: ltr; - } + .volume { + direction: ltr; + } - .source-input, - .sound-input { - direction: var(--direction); - } + .source-input, + .sound-input { + direction: var(--direction); + } - .volume, - .source-input, - .sound-input { - display: flex; - align-items: center; - justify-content: space-between; - } + .volume, + .source-input, + .sound-input { + display: flex; + align-items: center; + justify-content: space-between; + } - .source-input ha-select, - .sound-input ha-select { - margin-left: 10px; - flex-grow: 1; - margin-inline-start: 10px; - margin-inline-end: initial; - direction: var(--direction); - } + .source-input ha-select, + .sound-input ha-select { + margin-left: 10px; + flex-grow: 1; + margin-inline-start: 10px; + margin-inline-end: initial; + direction: var(--direction); + } - .tts { - margin-top: 16px; - font-style: italic; - } + .tts { + margin-top: 16px; + font-style: italic; + } - mwc-button > ha-svg-icon { - vertical-align: text-bottom; - } - `; - } + mwc-button > ha-svg-icon { + vertical-align: text-bottom; + } + `; private _handleClick(e: MouseEvent): void { handleMediaControlClick( diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts index d70101ad46..c364786eb2 100644 --- a/src/dialogs/more-info/controls/more-info-person.ts +++ b/src/dialogs/more-info/controls/more-info-person.ts @@ -1,6 +1,5 @@ import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -63,22 +62,20 @@ class MoreInfoPerson extends LitElement { fireEvent(this, "hass-more-info", { entityId: null }); } - static get styles(): CSSResultGroup { - return css` - .flex { - display: flex; - justify-content: space-between; - } - .actions { - margin: 8px 0; - text-align: right; - } - ha-map { - margin-top: 16px; - margin-bottom: 16px; - } - `; - } + static styles = css` + .flex { + display: flex; + justify-content: space-between; + } + .actions { + margin: 8px 0; + text-align: right; + } + ha-map { + margin-top: 16px; + margin-bottom: 16px; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts index aba8253a0e..473a8d8f59 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 { mdiPlay, mdiStop } from "@mdi/js"; import "@material/mwc-button"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-relative-time"; @@ -199,37 +199,35 @@ class MoreInfoScript extends LitElement { return false; } - static get styles(): CSSResultGroup { - return css` - .queue { - visibility: hidden; - color: var(--secondary-text-color); - text-align: center; - margin-bottom: 16px; - height: 21px; - } - .queue.has-queue { - visibility: visible; - } - .fields { - padding: 16px; - border: 1px solid var(--divider-color); - border-radius: 8px; - margin-bottom: 16px; - } - .fields .title { - font-weight: bold; - } - ha-control-button ha-svg-icon { - z-index: -1; - margin-right: 4px; - } - ha-service-control { - --service-control-padding: 0; - --service-control-items-border-top: none; - } - `; - } + static styles = css` + .queue { + visibility: hidden; + color: var(--secondary-text-color); + text-align: center; + margin-bottom: 16px; + height: 21px; + } + .queue.has-queue { + visibility: visible; + } + .fields { + padding: 16px; + border: 1px solid var(--divider-color); + border-radius: 8px; + margin-bottom: 16px; + } + .fields .title { + font-weight: bold; + } + ha-control-button ha-svg-icon { + z-index: -1; + margin-right: 4px; + } + ha-service-control { + --service-control-padding: 0; + --service-control-items-border-top: none; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-sun.ts b/src/dialogs/more-info/controls/more-info-sun.ts index 8eaf1d97bd..784e50dc84 100644 --- a/src/dialogs/more-info/controls/more-info-sun.ts +++ b/src/dialogs/more-info/controls/more-info-sun.ts @@ -1,5 +1,4 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { formatTime } from "../../../common/datetime/format_time"; @@ -70,25 +69,23 @@ class MoreInfoSun extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .row { - margin: 0; - display: flex; - flex-direction: row; - justify-content: space-between; - } - ha-relative-time { - display: inline-block; - white-space: nowrap; - } - hr { - border-color: var(--divider-color); - border-bottom: none; - margin: 16px 0; - } - `; - } + static styles = css` + .row { + margin: 0; + display: flex; + flex-direction: row; + justify-content: space-between; + } + ha-relative-time { + display: inline-block; + white-space: nowrap; + } + hr { + border-color: var(--divider-color); + border-bottom: none; + margin: 16px 0; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-time.ts b/src/dialogs/more-info/controls/more-info-time.ts index dd01305c70..f41ef15197 100644 --- a/src/dialogs/more-info/controls/more-info-time.ts +++ b/src/dialogs/more-info/controls/more-info-time.ts @@ -1,5 +1,4 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-date-input"; @@ -42,15 +41,13 @@ class MoreInfoTime extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - justify-content: flex-end; - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + justify-content: flex-end; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts index 4302787ff4..3f5c729752 100644 --- a/src/dialogs/more-info/controls/more-info-timer.ts +++ b/src/dialogs/more-info/controls/more-info-timer.ts @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-attributes"; @@ -59,16 +58,14 @@ class MoreInfoTimer extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - .actions { - margin: 8px 0; - display: flex; - flex-wrap: wrap; - justify-content: center; - } - `; - } + static styles = css` + .actions { + margin: 8px 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-update.ts b/src/dialogs/more-info/controls/more-info-update.ts index 9b9d1ea306..577aa63103 100644 --- a/src/dialogs/more-info/controls/more-info-update.ts +++ b/src/dialogs/more-info/controls/more-info-update.ts @@ -1,5 +1,4 @@ import "@material/mwc-linear-progress/mwc-linear-progress"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { BINARY_STATE_OFF } from "../../../common/const"; @@ -244,100 +243,98 @@ class MoreInfoUpdate extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - flex-direction: column; - flex: 1; - justify-content: space-between; - } - hr { - border-color: var(--divider-color); - border-bottom: none; - margin: 16px 0; - } - ha-expansion-panel { - margin: 16px 0; - } + static styles = css` + :host { + display: flex; + flex-direction: column; + flex: 1; + justify-content: space-between; + } + hr { + border-color: var(--divider-color); + border-bottom: none; + margin: 16px 0; + } + ha-expansion-panel { + margin: 16px 0; + } - .summary { - margin-bottom: 16px; - } + .summary { + margin-bottom: 16px; + } - .row { - margin: 0; - display: flex; - flex-direction: row; - justify-content: space-between; - } + .row { + margin: 0; + display: flex; + flex-direction: row; + justify-content: space-between; + } - .footer { - border-top: 1px solid var(--divider-color); - background: var( - --ha-dialog-surface-background, - var(--mdc-theme-surface, #fff) - ); - position: sticky; - bottom: 0; - margin: 0 -24px 0 -24px; - margin-bottom: calc(-1 * max(env(safe-area-inset-bottom), 24px)); - padding-bottom: env(safe-area-inset-bottom); - box-sizing: border-box; - display: flex; - flex-direction: column; - align-items: center; - overflow: hidden; - z-index: 10; - } + .footer { + border-top: 1px solid var(--divider-color); + background: var( + --ha-dialog-surface-background, + var(--mdc-theme-surface, #fff) + ); + position: sticky; + bottom: 0; + margin: 0 -24px 0 -24px; + margin-bottom: calc(-1 * max(env(safe-area-inset-bottom), 24px)); + padding-bottom: env(safe-area-inset-bottom); + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + overflow: hidden; + z-index: 10; + } - ha-settings-row { - width: 100%; - padding: 0 24px; - box-sizing: border-box; - margin-bottom: -16px; - margin-top: -4px; - } + ha-settings-row { + width: 100%; + padding: 0 24px; + box-sizing: border-box; + margin-bottom: -16px; + margin-top: -4px; + } - .actions { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-end; - box-sizing: border-box; - padding: 12px; - z-index: 1; - gap: 8px; - } + .actions { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-end; + box-sizing: border-box; + padding: 12px; + z-index: 1; + gap: 8px; + } - a { - color: var(--primary-color); - } - .flex.center { - display: flex; - justify-content: center; - align-items: center; - } - mwc-linear-progress { - margin-bottom: -8px; - margin-top: 4px; - } - ha-markdown { - direction: ltr; - padding-bottom: 16px; - box-sizing: border-box; - } - ha-markdown.hidden { - display: none; - } - .loader { - height: 80px; - box-sizing: border-box; - padding-bottom: 16px; - } - `; - } + a { + color: var(--primary-color); + } + .flex.center { + display: flex; + justify-content: center; + align-items: center; + } + mwc-linear-progress { + margin-bottom: -8px; + margin-top: 4px; + } + ha-markdown { + direction: ltr; + padding-bottom: 16px; + box-sizing: border-box; + } + ha-markdown.hidden { + display: none; + } + .loader { + height: 80px; + box-sizing: border-box; + padding-bottom: 16px; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts index 066ef3e889..066e6145bc 100644 --- a/src/dialogs/more-info/controls/more-info-vacuum.ts +++ b/src/dialogs/more-info/controls/more-info-vacuum.ts @@ -9,7 +9,6 @@ import { mdiStop, mdiTargetVariant, } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -316,24 +315,22 @@ class MoreInfoVacuum extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - line-height: 1.5; - } - .status-subtitle { - color: var(--secondary-text-color); - } - .flex-horizontal { - display: flex; - flex-direction: row; - justify-content: space-between; - } - .space-around { - justify-content: space-around; - } - `; - } + static styles = css` + :host { + line-height: 1.5; + } + .status-subtitle { + color: var(--secondary-text-color); + } + .flex-horizontal { + display: flex; + flex-direction: row; + justify-content: space-between; + } + .space-around { + justify-content: space-around; + } + `; } declare global { diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index 6dfaeb3ed4..d881d7f6b8 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -7,7 +7,7 @@ import { mdiWaterPercent, mdiWeatherWindy, } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -321,58 +321,56 @@ class MoreInfoWeather extends LitElement { ]; } - static get styles(): CSSResultGroup { - return css` - ha-svg-icon { - color: var(--paper-item-icon-color); - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } + static styles = css` + ha-svg-icon { + color: var(--paper-item-icon-color); + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + } - mwc-tab-bar { - margin-bottom: 4px; - } + mwc-tab-bar { + margin-bottom: 4px; + } - .section { - margin: 16px 0 8px 0; - font-size: 1.2em; - } + .section { + margin: 16px 0 8px 0; + font-size: 1.2em; + } - .flex { - display: flex; - height: 32px; - align-items: center; - } - .flex > div:last-child { - direction: ltr; - } + .flex { + display: flex; + height: 32px; + align-items: center; + } + .flex > div:last-child { + direction: ltr; + } - .main { - flex: 1; - margin-left: 24px; - margin-inline-start: 24px; - margin-inline-end: initial; - } + .main { + flex: 1; + margin-left: 24px; + margin-inline-start: 24px; + margin-inline-end: initial; + } - .temp, - .templow { - min-width: 48px; - text-align: right; - direction: ltr; - } + .temp, + .templow { + min-width: 48px; + text-align: right; + direction: ltr; + } - .templow { - margin: 0 16px; - color: var(--secondary-text-color); - } + .templow { + margin: 0 16px; + color: var(--secondary-text-color); + } - .attribution { - color: var(--secondary-text-color); - text-align: center; - } - `; - } + .attribution { + color: var(--secondary-text-color); + text-align: center; + } + `; private _showValue(item: number | string | undefined): boolean { return typeof item !== "undefined" && item !== null; diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index c9ce19bae3..793cf78cd2 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -61,12 +61,12 @@ export interface MoreInfoDialogParams { type View = "info" | "history" | "settings" | "related"; -type ChildView = { +interface ChildView { viewTag: string; viewTitle?: string; viewImport?: () => Promise; viewParams?: any; -}; +} declare global { interface HASSDomEvents { diff --git a/src/dialogs/more-info/ha-more-info-history-and-logbook.ts b/src/dialogs/more-info/ha-more-info-history-and-logbook.ts index 624022c992..bb442c44e1 100644 --- a/src/dialogs/more-info/ha-more-info-history-and-logbook.ts +++ b/src/dialogs/more-info/ha-more-info-history-and-logbook.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import type { HomeAssistant } from "../../types"; @@ -53,17 +52,15 @@ export class MoreInfoHistoryAndLogbook extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-more-info-history, - ha-more-info-logbook { - display: block; - } - ha-more-info-history + ha-more-info-logbook { - margin-top: 16px; - } - `; - } + static styles = css` + ha-more-info-history, + ha-more-info-logbook { + display: block; + } + ha-more-info-history + ha-more-info-logbook { + margin-top: 16px; + } + `; } declare global { diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts index a460b30ce4..a87d3d06f8 100644 --- a/src/dialogs/more-info/ha-more-info-info.ts +++ b/src/dialogs/more-info/ha-more-info-info.ts @@ -111,54 +111,52 @@ export class MoreInfoInfo extends LitElement { `; } - static get styles() { - return css` - :host { - display: flex; - flex-direction: column; - flex: 1; - } - .container { - display: flex; - flex-direction: column; - flex: 1; - } + static styles = css` + :host { + display: flex; + flex-direction: column; + flex: 1; + } + .container { + display: flex; + flex-direction: column; + flex: 1; + } - .content { - display: flex; - flex-direction: column; - flex: 1; - padding: 24px; - padding-bottom: max(env(safe-area-inset-bottom), 24px); - } + .content { + display: flex; + flex-direction: column; + flex: 1; + padding: 24px; + padding-bottom: max(env(safe-area-inset-bottom), 24px); + } - [data-domain="camera"] .content { - padding: 0; - /* max height of the video is full screen, minus the height of the header of the dialog and the padding of the dialog (mdc-dialog-max-height: calc(100% - 72px)) */ - --video-max-height: calc(100vh - 65px - 72px); - } + [data-domain="camera"] .content { + padding: 0; + /* max height of the video is full screen, minus the height of the header of the dialog and the padding of the dialog (mdc-dialog-max-height: calc(100% - 72px)) */ + --video-max-height: calc(100vh - 65px - 72px); + } - more-info-content { - position: relative; - display: flex; - flex-direction: column; - } - more-info-content[full-height] { - flex: 1; - } + more-info-content { + position: relative; + display: flex; + flex-direction: column; + } + more-info-content[full-height] { + flex: 1; + } - state-card-content, - ha-more-info-history, - ha-more-info-logbook:not(:last-child) { - display: block; - margin-bottom: 16px; - } + state-card-content, + ha-more-info-history, + ha-more-info-logbook:not(:last-child) { + display: block; + margin-bottom: 16px; + } - ha-alert { - display: block; - } - `; - } + ha-alert { + display: block; + } + `; } declare global { diff --git a/src/dialogs/notifications/notification-item-template.ts b/src/dialogs/notifications/notification-item-template.ts index a86040d3c1..44080be56b 100644 --- a/src/dialogs/notifications/notification-item-template.ts +++ b/src/dialogs/notifications/notification-item-template.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement } from "lit/decorators"; import "../../components/ha-card"; @@ -15,41 +15,39 @@ export class HuiNotificationItemTemplate extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .contents { - padding: 16px; - -ms-user-select: text; - -webkit-user-select: text; - -moz-user-select: text; - user-select: text; - } + static styles = css` + .contents { + padding: 16px; + -ms-user-select: text; + -webkit-user-select: text; + -moz-user-select: text; + user-select: text; + } - ha-card .header { - /* start paper-font-headline style */ - font-family: "Roboto", "Noto", sans-serif; - -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */ - text-rendering: optimizeLegibility; - font-size: 24px; - font-weight: 400; - letter-spacing: -0.012em; - line-height: 32px; - /* end paper-font-headline style */ + ha-card .header { + /* start paper-font-headline style */ + font-family: "Roboto", "Noto", sans-serif; + -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */ + text-rendering: optimizeLegibility; + font-size: 24px; + font-weight: 400; + letter-spacing: -0.012em; + line-height: 32px; + /* end paper-font-headline style */ - color: var(--primary-text-color); - padding: 16px 16px 0; - } + color: var(--primary-text-color); + padding: 16px 16px 0; + } - .actions { - border-top: 1px solid var(--divider-color, #e8e8e8); - padding: 5px 16px; - } + .actions { + border-top: 1px solid var(--divider-color, #e8e8e8); + padding: 5px 16px; + } - ::slotted(.primary) { - color: var(--primary-color); - } - `; - } + ::slotted(.primary) { + color: var(--primary-color); + } + `; } declare global { diff --git a/src/dialogs/notifications/persistent-notification-item.ts b/src/dialogs/notifications/persistent-notification-item.ts index f549591e67..e162ced888 100644 --- a/src/dialogs/notifications/persistent-notification-item.ts +++ b/src/dialogs/notifications/persistent-notification-item.ts @@ -1,6 +1,5 @@ import "@material/mwc-button"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { formatDateTime } from "../../common/datetime/format_date_time"; @@ -49,25 +48,23 @@ export class HuiPersistentNotificationItem extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .time { - position: relative; - display: flex; - justify-content: flex-end; - margin-top: 6px; - } - ha-relative-time { - color: var(--secondary-text-color); - } - a { - color: var(--primary-color); - } - ha-markdown { - overflow-wrap: break-word; - } - `; - } + static styles = css` + .time { + position: relative; + display: flex; + justify-content: flex-end; + margin-top: 6px; + } + ha-relative-time { + color: var(--secondary-text-color); + } + a { + color: var(--primary-color); + } + ha-markdown { + overflow-wrap: break-word; + } + `; private _handleDismiss(): void { this.hass!.callService("persistent_notification", "dismiss", { diff --git a/src/dialogs/tts-try/dialog-tts-try.ts b/src/dialogs/tts-try/dialog-tts-try.ts index c0dacf7219..6df6fcdc07 100644 --- a/src/dialogs/tts-try/dialog-tts-try.ts +++ b/src/dialogs/tts-try/dialog-tts-try.ts @@ -1,5 +1,4 @@ import { mdiPlayCircleOutline } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { storage } from "../../common/decorators/storage"; @@ -163,23 +162,21 @@ export class TTSTryDialog extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - ha-dialog { - --mdc-dialog-max-width: 500px; - } - ha-textarea, - ha-select { - width: 100%; - } - ha-select { - margin-top: 8px; - } - .loading { - height: 36px; - } - `; - } + static styles = css` + ha-dialog { + --mdc-dialog-max-width: 500px; + } + ha-textarea, + ha-select { + width: 100%; + } + ha-select { + margin-top: 8px; + } + .loading { + height: 36px; + } + `; } declare global { diff --git a/src/dialogs/update_backup/dialog-update-backup.ts b/src/dialogs/update_backup/dialog-update-backup.ts index e87739568d..ef59d4d778 100644 --- a/src/dialogs/update_backup/dialog-update-backup.ts +++ b/src/dialogs/update_backup/dialog-update-backup.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -67,23 +66,21 @@ class DialogBox extends LitElement { fireEvent(this, "dialog-closed", { dialog: this.localName }); } - static get styles(): CSSResultGroup { - return css` - p { - margin: 0; - color: var(--primary-text-color); - } + static styles = css` + p { + margin: 0; + color: var(--primary-text-color); + } + ha-dialog { + /* Place above other dialogs */ + --dialog-z-index: 104; + } + @media all and (min-width: 600px) { ha-dialog { - /* Place above other dialogs */ - --dialog-z-index: 104; + --mdc-dialog-min-width: 400px; } - @media all and (min-width: 600px) { - ha-dialog { - --mdc-dialog-min-width: 400px; - } - } - `; - } + } + `; } declare global { diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts index 2f482e770d..04cc0799e9 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-step-local.ts @@ -391,7 +391,7 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement { }); } - private async _findEntitiesAndCreatePipeline(tryNo: number = 0) { + private async _findEntitiesAndCreatePipeline(tryNo = 0) { this._findLocalEntities(); if (!this._localTts?.length || !this._localStt?.length) { if (tryNo > 3) { diff --git a/src/external_app/external_messaging.ts b/src/external_app/external_messaging.ts index a89b626e39..773182c248 100644 --- a/src/external_app/external_messaging.ts +++ b/src/external_app/external_messaging.ts @@ -69,12 +69,12 @@ interface EMOutgoingMessageImportThreadCredentials extends EMMessage { type: "thread/import_credentials"; } -type EMOutgoingMessageWithAnswer = { +interface EMOutgoingMessageWithAnswer { "config/get": { request: EMOutgoingMessageConfigGet; response: ExternalConfig; }; -}; +} interface EMOutgoingMessageExoplayerPlayHLS extends EMMessage { type: "exoplayer/play_hls"; @@ -298,7 +298,7 @@ export interface ExternalConfig { export class ExternalMessaging { public config!: ExternalConfig; - public commands: { [msgId: number]: CommandInFlight } = {}; + public commands: Record = {}; public msgId = 0; diff --git a/src/fake_data/entity.ts b/src/fake_data/entity.ts index 259a4d1a4d..3f4a523a62 100644 --- a/src/fake_data/entity.ts +++ b/src/fake_data/entity.ts @@ -485,9 +485,9 @@ export const getEntity = ( type LimitedEntity = Pick; -export const convertEntities = (states: { - [entityId: string]: LimitedEntity; -}): Entity[] => +export const convertEntities = ( + states: Record +): Entity[] => Object.keys(states).map((entId) => { const stateObj = states[entId]; const [domain, objectId] = entId.split(".", 2); diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts index a0767d88c4..3bd34ac071 100644 --- a/src/fake_data/provide_hass.ts +++ b/src/fake_data/provide_hass.ts @@ -69,10 +69,8 @@ export const provideHass = ( const hass = (): MockHomeAssistant => elements[0].hass; const wsCommands = {}; - const restResponses: Array<[string | RegExp, MockRestCallback]> = []; - const eventListeners: { - [event: string]: Array<(event) => void>; - } = {}; + const restResponses: [string | RegExp, MockRestCallback][] = []; + const eventListeners: Record void)[]> = {}; const entities = {}; async function updateTranslations( diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index 6b15a84122..c7967bb37d 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { property, state } from "lit/decorators"; @@ -88,34 +88,32 @@ class HaInitPage extends LitElement { location.reload(); } - static get styles(): CSSResultGroup { - return css` - :host { - flex: 0; - display: flex; - flex-direction: column; - align-items: center; - } - #progress-indicator-wrapper { - display: flex; - align-items: center; - margin: 25px 0; - height: 50px; - } - a { - color: var(--primary-color); - } - .retry-text { - margin-top: 0; - } - p, - #loading-text { - max-width: 350px; - color: var(--primary-text-color); - text-align: center; - } - `; - } + static styles = css` + :host { + flex: 0; + display: flex; + flex-direction: column; + align-items: center; + } + #progress-indicator-wrapper { + display: flex; + align-items: center; + margin: 25px 0; + height: 50px; + } + a { + color: var(--primary-color); + } + .retry-text { + margin-top: 0; + } + p, + #loading-text { + max-width: 350px; + color: var(--primary-text-color); + text-align: center; + } + `; } customElements.define("ha-init-page", HaInitPage); diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts index 7952c9e5ca..02ce432f5f 100644 --- a/src/layouts/hass-router-page.ts +++ b/src/layouts/hass-router-page.ts @@ -37,10 +37,7 @@ export interface RouterOptions { // Hook that is called before rendering a new route. Allowing redirects. // If string returned, that page will be rendered instead. beforeRender?: (page: string) => string | undefined; - routes: { - // If it's a string, it is another route whose options should be adopted. - [route: string]: RouteOptions | string; - }; + routes: Record; } // Time to wait for code to load before we show loading screen. diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index 3807b8c292..89f135118f 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -13,7 +13,7 @@ import { mdiUnfoldLessHorizontal, mdiUnfoldMoreHorizontal, } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -698,235 +698,233 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { fireEvent(this, "search-changed", { value: this.filter }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - height: 100%; - } + static styles = css` + :host { + display: block; + height: 100%; + } - ha-data-table { - width: 100%; - height: 100%; - --data-table-border-width: 0; - } - :host(:not([narrow])) ha-data-table, - .pane { - height: calc(100vh - 1px - var(--header-height)); - display: block; - } + ha-data-table { + width: 100%; + height: 100%; + --data-table-border-width: 0; + } + :host(:not([narrow])) ha-data-table, + .pane { + height: calc(100vh - 1px - var(--header-height)); + display: block; + } - .pane-content { - height: calc(100vh - 1px - var(--header-height) - var(--header-height)); - display: flex; - flex-direction: column; - } + .pane-content { + height: calc(100vh - 1px - var(--header-height) - var(--header-height)); + display: flex; + flex-direction: column; + } - :host([narrow]) hass-tabs-subpage { - --main-title-margin: 0; - } - :host([narrow]) { - --expansion-panel-summary-padding: 0 16px; - } - .table-header { - display: flex; - align-items: center; - --mdc-shape-small: 0; - height: 56px; - width: 100%; - justify-content: space-between; - padding: 0 16px; - gap: 16px; - box-sizing: border-box; - background: var(--primary-background-color); - border-bottom: 1px solid var(--divider-color); - } - search-input-outlined { - flex: 1; - } - .search-toolbar { - display: flex; - align-items: center; - color: var(--secondary-text-color); - } - .filters { - --mdc-text-field-fill-color: var(--input-fill-color); - --mdc-text-field-idle-line-color: var(--input-idle-line-color); - --mdc-shape-small: 4px; - --text-field-overflow: initial; - display: flex; - justify-content: flex-end; - color: var(--primary-text-color); - } - .active-filters { - color: var(--primary-text-color); - position: relative; - display: flex; - align-items: center; - padding: 2px 2px 2px 8px; - margin-left: 4px; - margin-inline-start: 4px; - margin-inline-end: initial; - font-size: 14px; - width: max-content; - cursor: initial; - direction: var(--direction); - } - .active-filters ha-svg-icon { - color: var(--primary-color); - } - .active-filters mwc-button { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - direction: var(--direction); - } - .active-filters::before { - background-color: var(--primary-color); - opacity: 0.12; - border-radius: 4px; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - content: ""; - } - .badge { - min-width: 20px; - box-sizing: border-box; - border-radius: 50%; - font-weight: 400; - background-color: var(--primary-color); - line-height: 20px; - text-align: center; - padding: 0px 4px; - color: var(--text-primary-color); - position: absolute; - right: 0; - inset-inline-end: 0; - inset-inline-start: initial; - top: 4px; - font-size: 0.65em; - } - .center { - display: flex; - align-items: center; - justify-content: center; - text-align: center; - box-sizing: border-box; - height: 100%; - width: 100%; - padding: 16px; - } + :host([narrow]) hass-tabs-subpage { + --main-title-margin: 0; + } + :host([narrow]) { + --expansion-panel-summary-padding: 0 16px; + } + .table-header { + display: flex; + align-items: center; + --mdc-shape-small: 0; + height: 56px; + width: 100%; + justify-content: space-between; + padding: 0 16px; + gap: 16px; + box-sizing: border-box; + background: var(--primary-background-color); + border-bottom: 1px solid var(--divider-color); + } + search-input-outlined { + flex: 1; + } + .search-toolbar { + display: flex; + align-items: center; + color: var(--secondary-text-color); + } + .filters { + --mdc-text-field-fill-color: var(--input-fill-color); + --mdc-text-field-idle-line-color: var(--input-idle-line-color); + --mdc-shape-small: 4px; + --text-field-overflow: initial; + display: flex; + justify-content: flex-end; + color: var(--primary-text-color); + } + .active-filters { + color: var(--primary-text-color); + position: relative; + display: flex; + align-items: center; + padding: 2px 2px 2px 8px; + margin-left: 4px; + margin-inline-start: 4px; + margin-inline-end: initial; + font-size: 14px; + width: max-content; + cursor: initial; + direction: var(--direction); + } + .active-filters ha-svg-icon { + color: var(--primary-color); + } + .active-filters mwc-button { + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + direction: var(--direction); + } + .active-filters::before { + background-color: var(--primary-color); + opacity: 0.12; + border-radius: 4px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + content: ""; + } + .badge { + min-width: 20px; + box-sizing: border-box; + border-radius: 50%; + font-weight: 400; + background-color: var(--primary-color); + line-height: 20px; + text-align: center; + padding: 0px 4px; + color: var(--text-primary-color); + position: absolute; + right: 0; + inset-inline-end: 0; + inset-inline-start: initial; + top: 4px; + font-size: 0.65em; + } + .center { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + box-sizing: border-box; + height: 100%; + width: 100%; + padding: 16px; + } - .badge { - position: absolute; - top: -4px; - right: -4px; - inset-inline-end: -4px; - inset-inline-start: initial; - min-width: 16px; - box-sizing: border-box; - border-radius: 50%; - font-weight: 400; - font-size: 11px; - background-color: var(--primary-color); - line-height: 16px; - text-align: center; - padding: 0px 2px; - color: var(--text-primary-color); - } + .badge { + position: absolute; + top: -4px; + right: -4px; + inset-inline-end: -4px; + inset-inline-start: initial; + min-width: 16px; + box-sizing: border-box; + border-radius: 50%; + font-weight: 400; + font-size: 11px; + background-color: var(--primary-color); + line-height: 16px; + text-align: center; + padding: 0px 2px; + color: var(--text-primary-color); + } - .narrow-header-row { - display: flex; - align-items: center; - min-width: 100%; - gap: 16px; - padding: 0 16px; - box-sizing: border-box; - overflow-x: scroll; - -ms-overflow-style: none; - scrollbar-width: none; - } + .narrow-header-row { + display: flex; + align-items: center; + min-width: 100%; + gap: 16px; + padding: 0 16px; + box-sizing: border-box; + overflow-x: scroll; + -ms-overflow-style: none; + scrollbar-width: none; + } - .narrow-header-row .flex { - flex: 1; - margin-left: -16px; - } + .narrow-header-row .flex { + flex: 1; + margin-left: -16px; + } - .selection-bar { - background: rgba(var(--rgb-primary-color), 0.1); - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: space-between; - padding: 8px 12px; - box-sizing: border-box; - font-size: 14px; - --ha-assist-chip-container-color: var(--card-background-color); - } + .selection-bar { + background: rgba(var(--rgb-primary-color), 0.1); + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 12px; + box-sizing: border-box; + font-size: 14px; + --ha-assist-chip-container-color: var(--card-background-color); + } - .selection-controls { - display: flex; - align-items: center; - gap: 8px; - } + .selection-controls { + display: flex; + align-items: center; + gap: 8px; + } - .selection-controls p { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } + .selection-controls p { + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + } - .center-vertical { - display: flex; - align-items: center; - gap: 8px; - } + .center-vertical { + display: flex; + align-items: center; + gap: 8px; + } - .relative { - position: relative; - } + .relative { + position: relative; + } - ha-assist-chip { - --ha-assist-chip-container-shape: 10px; - --ha-assist-chip-container-color: var(--card-background-color); - } + ha-assist-chip { + --ha-assist-chip-container-shape: 10px; + --ha-assist-chip-container-color: var(--card-background-color); + } - .select-mode-chip { - --md-assist-chip-icon-label-space: 0; - --md-assist-chip-trailing-space: 8px; - } + .select-mode-chip { + --md-assist-chip-icon-label-space: 0; + --md-assist-chip-trailing-space: 8px; + } - ha-dialog { - --mdc-dialog-min-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) - ); - --mdc-dialog-max-width: calc( - 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) - ); - --mdc-dialog-min-height: 100%; - --mdc-dialog-max-height: 100%; - --vertical-align-dialog: flex-end; - --ha-dialog-border-radius: 0; - --dialog-content-padding: 0; - } + ha-dialog { + --mdc-dialog-min-width: calc( + 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + ); + --mdc-dialog-max-width: calc( + 100vw - env(safe-area-inset-right) - env(safe-area-inset-left) + ); + --mdc-dialog-min-height: 100%; + --mdc-dialog-max-height: 100%; + --vertical-align-dialog: flex-end; + --ha-dialog-border-radius: 0; + --dialog-content-padding: 0; + } - .filter-dialog-content { - height: calc(100vh - 1px - 61px - var(--header-height)); - display: flex; - flex-direction: column; - } + .filter-dialog-content { + height: calc(100vh - 1px - 61px - var(--header-height)); + display: flex; + flex-direction: column; + } - #sort-by-anchor, - #group-by-anchor, - ha-md-button-menu ha-assist-chip { - --md-assist-chip-trailing-space: 8px; - } - `; - } + #sort-by-anchor, + #group-by-anchor, + ha-md-button-menu ha-assist-chip { + --md-assist-chip-trailing-space: 8px; + } + `; } declare global { diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index 5445fa9c58..831ac020c8 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import type { HASSDomEvent } from "../common/dom/fire_event"; @@ -163,29 +163,27 @@ export class HomeAssistantMain extends LitElement { this._sidebarEditMode = false; } - static get styles(): CSSResultGroup { - return css` - :host { - color: var(--primary-text-color); - /* remove the grey tap highlights in iOS on the fullscreen touch targets */ - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - --mdc-drawer-width: 56px; - --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width)); - } - :host([expanded]) { - --mdc-drawer-width: calc(256px + env(safe-area-inset-left)); - } - :host([modal]) { - --mdc-drawer-width: unset; - --mdc-top-app-bar-width: unset; - } - partial-panel-resolver, - ha-sidebar { - /* allow a light tap highlight on the actual interface elements */ - -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); - } - `; - } + static styles = css` + :host { + color: var(--primary-text-color); + /* remove the grey tap highlights in iOS on the fullscreen touch targets */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + --mdc-drawer-width: 56px; + --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width)); + } + :host([expanded]) { + --mdc-drawer-width: calc(256px + env(safe-area-inset-left)); + } + :host([modal]) { + --mdc-drawer-width: unset; + --mdc-top-app-bar-width: unset; + } + partial-panel-resolver, + ha-sidebar { + /* allow a light tap highlight on the actual interface elements */ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); + } + `; } declare global { diff --git a/src/mixins/keyboard-shortcut-mixin.ts b/src/mixins/keyboard-shortcut-mixin.ts index ac73c1fa20..6b89a443aa 100644 --- a/src/mixins/keyboard-shortcut-mixin.ts +++ b/src/mixins/keyboard-shortcut-mixin.ts @@ -2,9 +2,7 @@ import type { LitElement } from "lit"; import type { Constructor } from "../types"; declare global { - interface SupportedShortcuts { - [key: string]: () => void; - } + type SupportedShortcuts = Record void>; } export const KeyboardShortcutMixin = >( diff --git a/src/mixins/prevent-unsaved-mixin.ts b/src/mixins/prevent-unsaved-mixin.ts index 352710ba4e..b89bf286e7 100644 --- a/src/mixins/prevent-unsaved-mixin.ts +++ b/src/mixins/prevent-unsaved-mixin.ts @@ -47,6 +47,7 @@ export const PreventUnsavedMixin = >( this._removeListeners(); } + // eslint-disable-next-line @typescript-eslint/class-literal-property-style protected get isDirty(): boolean { return false; } diff --git a/src/mixins/subscribe-mixin.ts b/src/mixins/subscribe-mixin.ts index 5e4c10dd45..d7fa371b85 100644 --- a/src/mixins/subscribe-mixin.ts +++ b/src/mixins/subscribe-mixin.ts @@ -16,7 +16,7 @@ export const SubscribeMixin = >( // we wait with subscribing till these properties are set on the host element protected hassSubscribeRequiredHostProps?: string[]; - private __unsubs?: Array>; + private __unsubs?: (UnsubscribeFunc | Promise)[]; public connectedCallback() { super.connectedCallback(); @@ -55,9 +55,7 @@ export const SubscribeMixin = >( } } - protected hassSubscribe(): Array< - UnsubscribeFunc | Promise - > { + protected hassSubscribe(): (UnsubscribeFunc | Promise)[] { return []; } diff --git a/src/onboarding/integration-badge.ts b/src/onboarding/integration-badge.ts index 8e8affcb1b..6416e0ff83 100644 --- a/src/onboarding/integration-badge.ts +++ b/src/onboarding/integration-badge.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../components/ha-svg-icon"; @@ -35,36 +35,34 @@ class IntegrationBadge extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: inline-flex; - flex-direction: column; - text-align: center; - color: var(--primary-text-color); - } + static styles = css` + :host { + display: inline-flex; + flex-direction: column; + text-align: center; + color: var(--primary-text-color); + } - img { - max-width: 100%; - max-height: 100%; - } + img { + max-width: 100%; + max-height: 100%; + } - .icon { - position: relative; - margin: 0 auto 8px; - height: 40px; - width: 40px; - display: flex; - align-items: center; - justify-content: center; - } + .icon { + position: relative; + margin: 0 auto 8px; + height: 40px; + width: 40px; + display: flex; + align-items: center; + justify-content: center; + } - .title { - min-height: 2.3em; - word-break: break-word; - } - `; - } + .title { + min-height: 2.3em; + word-break: break-word; + } + `; } declare global { diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts index e12201317a..3c1f968c39 100644 --- a/src/onboarding/onboarding-core-config.ts +++ b/src/onboarding/onboarding-core-config.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { LOCAL_TIME_ZONE } from "../common/datetime/resolve-time-zone"; @@ -174,64 +174,62 @@ class OnboardingCoreConfig extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - .row { - display: flex; - flex-direction: row; - margin: 0 -8px; - align-items: center; - --ha-select-min-width: 100px; - } + static styles = css` + .row { + display: flex; + flex-direction: row; + margin: 0 -8px; + align-items: center; + --ha-select-min-width: 100px; + } - .secondary { - color: var(--secondary-text-color); - } + .secondary { + color: var(--secondary-text-color); + } - p { - font-size: 14px; - line-height: 20px; - } + p { + font-size: 14px; + line-height: 20px; + } - ha-textfield { - display: block; - } + ha-textfield { + display: block; + } - .flex { - flex: 1; - } + .flex { + flex: 1; + } - .middle-text { - margin: 16px 0; - } + .middle-text { + margin: 16px 0; + } - .row { - margin-top: 16px; - } + .row { + margin-top: 16px; + } - .center { - justify-content: center; - } + .center { + justify-content: center; + } - .row > * { - margin: 0 8px; - } + .row > * { + margin: 0 8px; + } - .radio-group { - display: flex; - flex-direction: column; - flex: 1; - } + .radio-group { + display: flex; + flex-direction: column; + flex: 1; + } - .footer { - margin-top: 16px; - text-align: right; - } - a { - color: var(--primary-color); - } - `; - } + .footer { + margin-top: 16px; + text-align: right; + } + a { + color: var(--primary-color); + } + `; } declare global { diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts index 83961b8523..eb01504801 100644 --- a/src/onboarding/onboarding-integrations.ts +++ b/src/onboarding/onboarding-integrations.ts @@ -37,7 +37,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { @state() private _discoveredDomains?: Set; - public hassSubscribe(): Array> { + public hassSubscribe(): (UnsubscribeFunc | Promise)[] { return [ subscribeConfigFlowInProgress(this.hass, (flows) => { this._discoveredDomains = new Set( @@ -55,7 +55,7 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { (messages) => { let fullUpdate = false; const newEntries: ConfigEntry[] = []; - const integrations: Set = new Set(); + const integrations = new Set(); messages.forEach((message) => { if (message.type === null || message.type === "added") { if (HIDDEN_DOMAINS.has(message.entry.domain)) { @@ -97,12 +97,12 @@ class OnboardingIntegrations extends SubscribeMixin(LitElement) { return nothing; } // Render discovered and existing entries together sorted by localized title. - let uniqueDomains: Set = new Set(); + let uniqueDomains = new Set(); this._entries.forEach((entry) => { uniqueDomains.add(entry.domain); }); uniqueDomains = new Set([...uniqueDomains, ...this._discoveredDomains]); - let domains: Array<[string, string]> = []; + let domains: [string, string][] = []; for (const domain of uniqueDomains.values()) { domains.push([domain, domainToName(this.hass.localize, domain)]); } diff --git a/src/onboarding/onboarding-loading.ts b/src/onboarding/onboarding-loading.ts index 8670ed98cd..6f8c4157e8 100644 --- a/src/onboarding/onboarding-loading.ts +++ b/src/onboarding/onboarding-loading.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement } from "lit/decorators"; @@ -8,52 +8,50 @@ class OnboardingLoading extends LitElement { return html`
`; } - static get styles(): CSSResultGroup { - return css` - /* MIT License (MIT). Copyright (c) 2014 Luke Haas */ - .loader, - .loader:after { - border-radius: 50%; - width: 40px; - height: 40px; + static styles = css` + /* MIT License (MIT). Copyright (c) 2014 Luke Haas */ + .loader, + .loader:after { + border-radius: 50%; + width: 40px; + height: 40px; + } + .loader { + margin: 60px auto; + font-size: 4px; + position: relative; + text-indent: -9999em; + border-top: 1.1em solid rgba(3, 169, 244, 0.2); + border-right: 1.1em solid rgba(3, 169, 244, 0.2); + border-bottom: 1.1em solid rgba(3, 169, 244, 0.2); + border-left: 1.1em solid rgb(3, 168, 244); + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load8 1.4s infinite linear; + animation: load8 1.4s infinite linear; + } + @-webkit-keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } - .loader { - margin: 60px auto; - font-size: 4px; - position: relative; - text-indent: -9999em; - border-top: 1.1em solid rgba(3, 169, 244, 0.2); - border-right: 1.1em solid rgba(3, 169, 244, 0.2); - border-bottom: 1.1em solid rgba(3, 169, 244, 0.2); - border-left: 1.1em solid rgb(3, 168, 244); - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - transform: translateZ(0); - -webkit-animation: load8 1.4s infinite linear; - animation: load8 1.4s infinite linear; + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } - @-webkit-keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } + } + @keyframes load8 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } - @keyframes load8 { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } - `; - } + } + `; } declare global { diff --git a/src/onboarding/onboarding-welcome-link.ts b/src/onboarding/onboarding-welcome-link.ts index a6397d280f..40e8503fd5 100644 --- a/src/onboarding/onboarding-welcome-link.ts +++ b/src/onboarding/onboarding-welcome-link.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import "../components/ha-card"; @@ -32,38 +32,36 @@ class OnboardingWelcomeLink extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - cursor: pointer; - } - ha-card { - overflow: hidden; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - font-weight: 500; - padding: 32px 16px; - height: 100%; - } - ha-svg-icon { - color: var(--text-primary-color); - background: var(--welcome-link-color, var(--primary-color)); - border-radius: 50%; - padding: 8px; - margin-bottom: 16px; - } - ha-card:focus-visible:before { - position: absolute; - display: block; - content: ""; - inset: 0; - background-color: var(--secondary-text-color); - opacity: 0.08; - } - `; - } + static styles = css` + :host { + cursor: pointer; + } + ha-card { + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + font-weight: 500; + padding: 32px 16px; + height: 100%; + } + ha-svg-icon { + color: var(--text-primary-color); + background: var(--welcome-link-color, var(--primary-color)); + border-radius: 50%; + padding: 8px; + margin-bottom: 16px; + } + ha-card:focus-visible:before { + position: absolute; + display: block; + content: ""; + inset: 0; + background-color: var(--secondary-text-color); + opacity: 0.08; + } + `; } declare global { diff --git a/src/onboarding/onboarding-welcome-links.ts b/src/onboarding/onboarding-welcome-links.ts index 33c06b53d9..c52a3f075d 100644 --- a/src/onboarding/onboarding-welcome-links.ts +++ b/src/onboarding/onboarding-welcome-links.ts @@ -1,5 +1,5 @@ import { mdiAccountGroup, mdiFileDocument, mdiTabletCellphone } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import type { LocalizeFunc } from "../common/translations/localize"; @@ -59,31 +59,29 @@ class OnboardingWelcomeLinks extends LitElement { showAppDialog(this, { localize: this.localize }); } - static get styles(): CSSResultGroup { - return css` + static styles = css` + :host { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + margin-top: 16px; + column-gap: 16px; + row-gap: 16px; + } + @media (max-width: 550px) { :host { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - margin-top: 16px; - column-gap: 16px; - row-gap: 16px; + grid-template-columns: 1fr; } - @media (max-width: 550px) { - :host { - grid-template-columns: 1fr; - } - } - .community { - --welcome-link-color: #008142; - } - .app { - --welcome-link-color: #6e41ab; - } - a { - text-decoration: none; - } - `; - } + } + .community { + --welcome-link-color: #008142; + } + .app { + --welcome-link-color: #6e41ab; + } + a { + text-decoration: none; + } + `; } declare global { diff --git a/src/panels/calendar/confirm-event-dialog-box.ts b/src/panels/calendar/confirm-event-dialog-box.ts index 119a0f33fc..00207f94a9 100644 --- a/src/panels/calendar/confirm-event-dialog-box.ts +++ b/src/panels/calendar/confirm-event-dialog-box.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -103,42 +102,40 @@ class ConfirmEventDialogBox extends LitElement { fireEvent(this, "dialog-closed", { dialog: this.localName }); } - static get styles(): CSSResultGroup { - return css` - :host([inert]) { - pointer-events: initial !important; - cursor: initial !important; - } - a { - color: var(--primary-color); - } - p { - margin: 0; - color: var(--primary-text-color); - } - .no-bottom-padding { - padding-bottom: 0; - } - .secondary { - color: var(--secondary-text-color); - } - .destructive { - --mdc-theme-primary: var(--error-color); - } + static styles = css` + :host([inert]) { + pointer-events: initial !important; + cursor: initial !important; + } + a { + color: var(--primary-color); + } + p { + margin: 0; + color: var(--primary-text-color); + } + .no-bottom-padding { + padding-bottom: 0; + } + .secondary { + color: var(--secondary-text-color); + } + .destructive { + --mdc-theme-primary: var(--error-color); + } + ha-dialog { + /* Place above other dialogs */ + --dialog-z-index: 104; + } + @media all and (min-width: 600px) { ha-dialog { - /* Place above other dialogs */ - --dialog-z-index: 104; + --mdc-dialog-min-width: 400px; } - @media all and (min-width: 600px) { - ha-dialog { - --mdc-dialog-min-width: 400px; - } - } - ha-textfield { - width: 100%; - } - `; - } + } + ha-textfield { + width: 100%; + } + `; } declare global { diff --git a/src/panels/config/application_credentials/ha-config-application-credentials.ts b/src/panels/config/application_credentials/ha-config-application-credentials.ts index c790bb67ff..e252d2c46b 100644 --- a/src/panels/config/application_credentials/ha-config-application-credentials.ts +++ b/src/panels/config/application_credentials/ha-config-application-credentials.ts @@ -1,5 +1,5 @@ import { mdiDelete, mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -308,60 +308,58 @@ export class HaConfigApplicationCredentials extends LitElement { this._filter = ev.detail.value; } - static get styles(): CSSResultGroup { - return css` - .table-header { - display: flex; - justify-content: space-between; - align-items: center; - height: 56px; - background-color: var(--mdc-text-field-fill-color, whitesmoke); - border-bottom: 1px solid - var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42)); - box-sizing: border-box; - } - .header-toolbar { - display: flex; - justify-content: space-between; - align-items: center; - color: var(--secondary-text-color); - position: relative; - top: -4px; - } - .selected-txt { - font-weight: bold; - padding-left: 16px; - padding-inline-start: 16px; - direction: var(--direction); - } - .table-header .selected-txt { - margin-top: 20px; - } - .header-toolbar .selected-txt { - font-size: 16px; - } - .header-toolbar .header-btns { - margin-right: -12px; - margin-inline-end: -12px; - margin-inline-start: initial; - } - .header-btns { - display: flex; - } - .header-btns > mwc-button, - .header-btns > ha-icon-button { - margin: 8px; - } - ha-button-menu { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } - .warning { - --mdc-theme-primary: var(--error-color); - } - `; - } + static styles = css` + .table-header { + display: flex; + justify-content: space-between; + align-items: center; + height: 56px; + background-color: var(--mdc-text-field-fill-color, whitesmoke); + border-bottom: 1px solid + var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42)); + box-sizing: border-box; + } + .header-toolbar { + display: flex; + justify-content: space-between; + align-items: center; + color: var(--secondary-text-color); + position: relative; + top: -4px; + } + .selected-txt { + font-weight: bold; + padding-left: 16px; + padding-inline-start: 16px; + direction: var(--direction); + } + .table-header .selected-txt { + margin-top: 20px; + } + .header-toolbar .selected-txt { + font-size: 16px; + } + .header-toolbar .header-btns { + margin-right: -12px; + margin-inline-end: -12px; + margin-inline-start: initial; + } + .header-btns { + display: flex; + } + .header-btns > mwc-button, + .header-btns > ha-icon-button { + margin: 8px; + } + ha-button-menu { + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + } + .warning { + --mdc-theme-primary: var(--error-color); + } + `; } declare global { diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index 1ace9c9940..ccca5de10e 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/src/panels/config/areas/ha-config-area-page.ts @@ -53,10 +53,10 @@ import { showAreaRegistryDetailDialog, } from "./show-dialog-area-registry-detail"; -declare type NameAndEntity = { +declare interface NameAndEntity { name: string; entity: EntityType; -}; +} @customElement("ha-config-area-page") class HaConfigAreaPage extends LitElement { diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts index b86009a610..ede068b9ff 100644 --- a/src/panels/config/areas/ha-config-areas-dashboard.ts +++ b/src/panels/config/areas/ha-config-areas-dashboard.ts @@ -7,7 +7,6 @@ import { mdiPlus, } from "@mdi/js"; import { - type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult, @@ -442,82 +441,80 @@ export class HaConfigAreasDashboard extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - .container { - padding: 8px 16px 16px; - margin: 0 auto 64px auto; - } - .header { - display: flex; - align-items: center; - justify-content: space-between; - color: var(--secondary-text-color); - padding-inline-start: 8px; - } - .header h2 { - font-size: 14px; - font-weight: 500; - margin-top: 28px; - } - .header ha-icon { - margin-inline-end: 8px; - } - .areas { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - grid-gap: 16px 16px; - max-width: 2000px; - margin-bottom: 16px; - } - .areas > * { - max-width: 500px; - } - ha-card { - overflow: hidden; - } - a { - text-decoration: none; - } - h1 { - padding-bottom: 0; - } - .picture { - height: 150px; - width: 100%; - background-size: cover; - background-position: center; - position: relative; - } - .placeholder { - display: flex; - align-items: center; - justify-content: center; - --mdc-icon-size: 48px; - } - .picture.placeholder::before { - position: absolute; - content: ""; - width: 100%; - height: 100%; - background-color: var(--sidebar-selected-icon-color); - opacity: 0.12; - } - .card-content { - min-height: 16px; - color: var(--secondary-text-color); - } - .card-header { - display: flex; - justify-content: space-between; - align-items: center; - overflow-wrap: anywhere; - } - .warning { - color: var(--error-color); - } - `; - } + static styles = css` + .container { + padding: 8px 16px 16px; + margin: 0 auto 64px auto; + } + .header { + display: flex; + align-items: center; + justify-content: space-between; + color: var(--secondary-text-color); + padding-inline-start: 8px; + } + .header h2 { + font-size: 14px; + font-weight: 500; + margin-top: 28px; + } + .header ha-icon { + margin-inline-end: 8px; + } + .areas { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + grid-gap: 16px 16px; + max-width: 2000px; + margin-bottom: 16px; + } + .areas > * { + max-width: 500px; + } + ha-card { + overflow: hidden; + } + a { + text-decoration: none; + } + h1 { + padding-bottom: 0; + } + .picture { + height: 150px; + width: 100%; + background-size: cover; + background-position: center; + position: relative; + } + .placeholder { + display: flex; + align-items: center; + justify-content: center; + --mdc-icon-size: 48px; + } + .picture.placeholder::before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + background-color: var(--sidebar-selected-icon-color); + opacity: 0.12; + } + .card-content { + min-height: 16px; + color: var(--secondary-text-color); + } + .card-header { + display: flex; + justify-content: space-between; + align-items: center; + overflow-wrap: anywhere; + } + .warning { + color: var(--error-color); + } + `; } declare global { 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 c36f1be56f..feada8f6b6 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -150,7 +150,7 @@ export default class HaAutomationActionRow extends LitElement { @state() @consume({ context: floorsContext, subscribe: true }) - _floorReg!: { [id: string]: FloorRegistryEntry }; + _floorReg!: Record; @state() private _warnings?: string[]; diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts index 19629e1deb..8603ec411b 100644 --- a/src/panels/config/automation/action/ha-automation-action.ts +++ b/src/panels/config/automation/action/ha-automation-action.ts @@ -1,6 +1,6 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -32,7 +32,7 @@ export default class HaAutomationAction extends LitElement { @property({ attribute: false }) public actions!: Action[]; - @state() private _showReorder: boolean = false; + @state() private _showReorder = false; @storage({ key: "automationClipboard", @@ -281,46 +281,44 @@ export default class HaAutomationAction extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - .actions { - padding: 16px; - margin: -16px; - display: flex; - flex-direction: column; - gap: 16px; - } - .sortable-ghost { - background: none; - border-radius: var(--ha-card-border-radius, 12px); - } - .sortable-drag { - background: none; - } - ha-automation-action-row { - display: block; - scroll-margin-top: 48px; - } - ha-svg-icon { - height: 20px; - } - .handle { - padding: 12px; - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - } - .handle ha-svg-icon { - pointer-events: none; - height: 24px; - } - .buttons { - display: flex; - flex-wrap: wrap; - gap: 8px; - order: 1; - } - `; - } + static styles = css` + .actions { + padding: 16px; + margin: -16px; + display: flex; + flex-direction: column; + gap: 16px; + } + .sortable-ghost { + background: none; + border-radius: var(--ha-card-border-radius, 12px); + } + .sortable-drag { + background: none; + } + ha-automation-action-row { + display: block; + scroll-margin-top: 48px; + } + ha-svg-icon { + height: 20px; + } + .handle { + padding: 12px; + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + } + .handle ha-svg-icon { + pointer-events: none; + height: 24px; + } + .buttons { + display: flex; + flex-wrap: wrap; + gap: 8px; + order: 1; + } + `; } declare global { diff --git a/src/panels/config/automation/action/types/ha-automation-action-condition.ts b/src/panels/config/automation/action/types/ha-automation-action-condition.ts index a1da3ea45d..5e77983bc7 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-condition.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-condition.ts @@ -99,13 +99,11 @@ export class HaConditionAction extends LitElement implements ActionElement { } } - static get styles() { - return css` - ha-select { - margin-bottom: 24px; - } - `; - } + static styles = css` + ha-select { + margin-bottom: 24px; + } + `; } declare global { diff --git a/src/panels/config/automation/action/types/ha-automation-action-event.ts b/src/panels/config/automation/action/types/ha-automation-action-event.ts index 05c962afa9..2bfdc7ddd3 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-event.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-event.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; @@ -81,13 +81,11 @@ export class HaEventAction extends LitElement implements ActionElement { }); } - static get styles(): CSSResultGroup { - return css` - ha-textfield { - display: block; - } - `; - } + static styles = css` + ha-textfield { + display: block; + } + `; } declare global { 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 4f5e444c85..8543cfb93e 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,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -195,35 +195,33 @@ export class HaServiceAction extends LitElement implements ActionElement { } } - static get styles(): CSSResultGroup { - return css` - ha-service-control { - display: block; - margin: 0 -16px; - } - ha-settings-row { - margin: 0 -16px; - padding: var(--service-control-padding, 0 16px); - } - ha-settings-row { - --paper-time-input-justify-content: flex-end; - --settings-row-content-width: 100%; - --settings-row-prefix-display: contents; - border-top: var( - --service-control-items-border-top, - 1px solid var(--divider-color) - ); - } - ha-checkbox { - margin-left: -16px; - margin-inline-start: -16px; - margin-inline-end: initial; - } - .checkbox-spacer { - width: 32px; - } - `; - } + static styles = css` + ha-service-control { + display: block; + margin: 0 -16px; + } + ha-settings-row { + margin: 0 -16px; + padding: var(--service-control-padding, 0 16px); + } + ha-settings-row { + --paper-time-input-justify-content: flex-end; + --settings-row-content-width: 100%; + --settings-row-prefix-display: contents; + border-top: var( + --service-control-items-border-top, + 1px solid var(--divider-color) + ); + } + ha-checkbox { + margin-left: -16px; + margin-inline-start: -16px; + margin-inline-end: initial; + } + .checkbox-spacer { + width: 32px; + } + `; } declare global { diff --git a/src/panels/config/automation/action/types/ha-automation-action-stop.ts b/src/panels/config/automation/action/types/ha-automation-action-stop.ts index 333feae3af..c8d15c3e95 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-stop.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-stop.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; @@ -77,14 +76,12 @@ export class HaStopAction extends LitElement implements ActionElement { }); } - static get styles(): CSSResultGroup { - return css` - ha-textfield { - display: block; - margin-bottom: 24px; - } - `; - } + static styles = css` + ha-textfield { + display: block; + margin-bottom: 24px; + } + `; } declare global { diff --git a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts index 7d6e74fd79..24f227380e 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { ensureArray } from "../../../../../common/array/ensure-array"; @@ -82,18 +81,16 @@ export class HaWaitForTriggerAction handleChangeEvent(this, ev); } - static get styles(): CSSResultGroup { - return css` - ha-duration-input { - display: block; - margin-bottom: 24px; - } - ha-automation-trigger { - display: block; - margin-top: 24px; - } - `; - } + static styles = css` + ha-duration-input { + display: block; + margin-bottom: 24px; + } + ha-automation-trigger { + display: block; + margin-top: 24px; + } + `; } declare global { diff --git a/src/panels/config/automation/add-automation-element-dialog.ts b/src/panels/config/automation/add-automation-element-dialog.ts index 4e9920d086..81963a0da4 100644 --- a/src/panels/config/automation/add-automation-element-dialog.ts +++ b/src/panels/config/automation/add-automation-element-dialog.ts @@ -70,9 +70,7 @@ interface ListItem { group: boolean; } -interface DomainManifestLookup { - [domain: string]: IntegrationManifest; -} +type DomainManifestLookup = Record; const ENTITY_DOMAINS_OTHER = new Set([ "date", diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index 603b6ea7b7..77348cf308 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -1,6 +1,6 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -32,7 +32,7 @@ export default class HaAutomationCondition extends LitElement { @property({ type: Boolean }) public disabled = false; - @state() private _showReorder: boolean = false; + @state() private _showReorder = false; @storage({ key: "automationClipboard", @@ -306,48 +306,46 @@ export default class HaAutomationCondition extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - .conditions { - padding: 16px; - margin: -16px; - display: flex; - flex-direction: column; - gap: 16px; - } - .sortable-ghost { - background: none; - border-radius: var(--ha-card-border-radius, 12px); - } - .sortable-drag { - background: none; - } - ha-automation-condition-row { - display: block; - scroll-margin-top: 48px; - } - .buttons { - order: 1; - } - ha-svg-icon { - height: 20px; - } - .handle { - padding: 12px; - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - } - .handle ha-svg-icon { - pointer-events: none; - height: 24px; - } - .buttons { - display: flex; - flex-wrap: wrap; - gap: 8px; - } - `; - } + static styles = css` + .conditions { + padding: 16px; + margin: -16px; + display: flex; + flex-direction: column; + gap: 16px; + } + .sortable-ghost { + background: none; + border-radius: var(--ha-card-border-radius, 12px); + } + .sortable-drag { + background: none; + } + ha-automation-condition-row { + display: block; + scroll-margin-top: 48px; + } + .buttons { + order: 1; + } + ha-svg-icon { + height: 20px; + } + .handle { + padding: 12px; + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + } + .handle ha-svg-icon { + pointer-events: none; + height: 24px; + } + .buttons { + display: flex; + flex-wrap: wrap; + gap: 8px; + } + `; } declare global { diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-template.ts b/src/panels/config/automation/condition/types/ha-automation-condition-template.ts index b5749bb075..588ac881e7 100644 --- a/src/panels/config/automation/condition/types/ha-automation-condition-template.ts +++ b/src/panels/config/automation/condition/types/ha-automation-condition-template.ts @@ -43,13 +43,11 @@ export class HaTemplateCondition extends LitElement { handleChangeEvent(this, ev); } - static get styles() { - return css` - p { - margin-top: 0; - } - `; - } + static styles = css` + p { + margin-top: 0; + } + `; } declare global { diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 87d2768903..f6975f1d7a 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -963,7 +963,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { Array.isArray(filter.value) && filter.value.length ) { - const categoryItems: Set = new Set(); + const categoryItems = new Set(); this.automations .filter( (automation) => @@ -988,7 +988,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) { Array.isArray(filter.value) && filter.value.length ) { - const labelItems: Set = new Set(); + const labelItems = new Set(); this.automations .filter((automation) => this._entityReg diff --git a/src/panels/config/automation/option/ha-automation-option.ts b/src/panels/config/automation/option/ha-automation-option.ts index b77006b57d..0bbe6e919d 100644 --- a/src/panels/config/automation/option/ha-automation-option.ts +++ b/src/panels/config/automation/option/ha-automation-option.ts @@ -1,6 +1,6 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -27,7 +27,7 @@ export default class HaAutomationOption extends LitElement { @property({ attribute: false }) public options!: Option[]; - @state() private _showReorder: boolean = false; + @state() private _showReorder = false; @storage({ key: "automationClipboard", @@ -235,46 +235,44 @@ export default class HaAutomationOption extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - .options { - padding: 16px; - margin: -16px; - display: flex; - flex-direction: column; - gap: 16px; - } - .sortable-ghost { - background: none; - border-radius: var(--ha-card-border-radius, 12px); - } - .sortable-drag { - background: none; - } - ha-automation-option-row { - display: block; - scroll-margin-top: 48px; - } - ha-svg-icon { - height: 20px; - } - .handle { - padding: 12px; - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - } - .handle ha-svg-icon { - pointer-events: none; - height: 24px; - } - .buttons { - display: flex; - flex-wrap: wrap; - gap: 8px; - order: 1; - } - `; - } + static styles = css` + .options { + padding: 16px; + margin: -16px; + display: flex; + flex-direction: column; + gap: 16px; + } + .sortable-ghost { + background: none; + border-radius: var(--ha-card-border-radius, 12px); + } + .sortable-drag { + background: none; + } + ha-automation-option-row { + display: block; + scroll-margin-top: 48px; + } + ha-svg-icon { + height: 20px; + } + .handle { + padding: 12px; + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + } + .handle ha-svg-icon { + pointer-events: none; + height: 24px; + } + .buttons { + display: flex; + flex-wrap: wrap; + gap: 8px; + order: 1; + } + `; } declare global { diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index a92f78878f..49e53723b3 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -1,6 +1,6 @@ import { mdiDrag, mdiPlus } from "@mdi/js"; import deepClone from "deep-clone-simple"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -34,7 +34,7 @@ export default class HaAutomationTrigger extends LitElement { @property({ type: Boolean }) public disabled = false; - @state() private _showReorder: boolean = false; + @state() private _showReorder = false; @storage({ key: "automationClipboard", @@ -266,46 +266,44 @@ export default class HaAutomationTrigger extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - .triggers { - padding: 16px; - margin: -16px; - display: flex; - flex-direction: column; - gap: 16px; - } - .sortable-ghost { - background: none; - border-radius: var(--ha-card-border-radius, 12px); - } - .sortable-drag { - background: none; - } - ha-automation-trigger-row { - display: block; - scroll-margin-top: 48px; - } - ha-svg-icon { - height: 20px; - } - .handle { - padding: 12px; - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - } - .handle ha-svg-icon { - pointer-events: none; - height: 24px; - } - .buttons { - display: flex; - flex-wrap: wrap; - gap: 8px; - order: 1; - } - `; - } + static styles = css` + .triggers { + padding: 16px; + margin: -16px; + display: flex; + flex-direction: column; + gap: 16px; + } + .sortable-ghost { + background: none; + border-radius: var(--ha-card-border-radius, 12px); + } + .sortable-drag { + background: none; + } + ha-automation-trigger-row { + display: block; + scroll-margin-top: 48px; + } + ha-svg-icon { + height: 20px; + } + .handle { + padding: 12px; + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + } + .handle ha-svg-icon { + pointer-events: none; + height: 24px; + } + .buttons { + display: flex; + flex-wrap: wrap; + gap: 8px; + order: 1; + } + `; } declare global { diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts index f9d9590cbc..4317f48007 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-conversation.ts @@ -1,5 +1,4 @@ import { mdiClose } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import { ensureArray } from "../../../../../common/array/ensure-array"; @@ -145,47 +144,45 @@ export class HaConversationTrigger }); } - static get styles(): CSSResultGroup { - return css` - .layout { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: center; - justify-content: flex-start; - } - .option { - margin-top: 4px; - } - mwc-button { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } - ha-textfield { - display: block; - margin-bottom: 8px; - --textfield-icon-trailing-padding: 0; - } - ha-textfield > ha-icon-button { - position: relative; - right: -8px; - --mdc-icon-button-size: 36px; - --mdc-icon-size: 20px; - color: var(--secondary-text-color); - inset-inline-start: initial; - inset-inline-end: -8px; - direction: var(--direction); - } - #option_input { - margin-top: 8px; - } - .header { - margin-top: 8px; - margin-bottom: 8px; - } - `; - } + static styles = css` + .layout { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + } + .option { + margin-top: 4px; + } + mwc-button { + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + } + ha-textfield { + display: block; + margin-bottom: 8px; + --textfield-icon-trailing-padding: 0; + } + ha-textfield > ha-icon-button { + position: relative; + right: -8px; + --mdc-icon-button-size: 36px; + --mdc-icon-size: 20px; + color: var(--secondary-text-color); + inset-inline-start: initial; + inset-inline-end: -8px; + direction: var(--direction); + } + #option_input { + margin-top: 8px; + } + .header { + margin-top: 8px; + margin-bottom: 8px; + } + `; } declare global { diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts index 7b482573c3..d0bd8ee870 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; @@ -102,13 +101,11 @@ export class HaEventTrigger extends LitElement implements TriggerElement { }); } - static get styles(): CSSResultGroup { - return css` - ha-textfield { - display: block; - } - `; - } + static styles = css` + ha-textfield { + display: block; + } + `; } declare global { diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts index 07a02db1f7..f582ce329a 100644 --- a/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts +++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts @@ -80,13 +80,11 @@ export class HaTagTrigger extends LitElement implements TriggerElement { }); } - static get styles() { - return css` - ha-select { - display: block; - } - `; - } + static styles = css` + ha-select { + display: block; + } + `; } declare global { diff --git a/src/panels/config/backup/components/config/ha-backup-config-data.ts b/src/panels/config/backup/components/config/ha-backup-config-data.ts index 345ff8449e..d1ebb6e67a 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-data.ts +++ b/src/panels/config/backup/components/config/ha-backup-config-data.ts @@ -25,7 +25,7 @@ import type { HomeAssistant } from "../../../../../types"; import "../ha-backup-addons-picker"; import type { BackupAddonItem } from "../ha-backup-addons-picker"; -export type FormData = { +export interface FormData { homeassistant: boolean; database: boolean; media: boolean; @@ -33,7 +33,7 @@ export type FormData = { local_addons: boolean; addons_mode: "all" | "custom" | "none"; addons: string[]; -}; +} const INITIAL_FORM_DATA: FormData = { homeassistant: false, @@ -45,13 +45,13 @@ const INITIAL_FORM_DATA: FormData = { addons: [], }; -export type BackupConfigData = { +export interface BackupConfigData { include_homeassistant?: boolean; include_database: boolean; include_folders?: string[]; include_all_addons: boolean; include_addons?: string[]; -}; +} declare global { interface HASSDomEvents { diff --git a/src/panels/config/backup/components/config/ha-backup-config-schedule.ts b/src/panels/config/backup/components/config/ha-backup-config-schedule.ts index 2e7ba79063..ca5bb2cf18 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-schedule.ts +++ b/src/panels/config/backup/components/config/ha-backup-config-schedule.ts @@ -30,10 +30,10 @@ enum RetentionPreset { CUSTOM = "custom", } -type RetentionData = { +interface RetentionData { type: "copies" | "days"; value: number; -}; +} const RETENTION_PRESETS: Record< Exclude, @@ -71,14 +71,14 @@ const computeRetentionPreset = ( return RetentionPreset.CUSTOM; }; -type FormData = { +interface FormData { enabled: boolean; schedule: BackupScheduleState; retention: { type: "copies" | "days"; value: number; }; -}; +} const INITIAL_FORM_DATA: FormData = { enabled: false, diff --git a/src/panels/config/backup/components/ha-backup-addons-picker.ts b/src/panels/config/backup/components/ha-backup-addons-picker.ts index d4ab56eab1..e298a870f9 100644 --- a/src/panels/config/backup/components/ha-backup-addons-picker.ts +++ b/src/panels/config/backup/components/ha-backup-addons-picker.ts @@ -1,5 +1,4 @@ import { mdiPuzzle } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -12,13 +11,13 @@ import "../../../../components/ha-svg-icon"; import type { HomeAssistant } from "../../../../types"; import "./ha-backup-formfield-label"; -export type BackupAddonItem = { +export interface BackupAddonItem { slug: string; name: string; version?: string; icon?: boolean; iconPath?: string; -}; +} @customElement("ha-backup-addons-picker") export class HaBackupAddonsPicker extends LitElement { @@ -78,14 +77,12 @@ export class HaBackupAddonsPicker extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResultGroup { - return css` - .items { - display: flex; - flex-direction: column; - } - `; - } + static styles = css` + .items { + display: flex; + flex-direction: column; + } + `; } declare global { diff --git a/src/panels/config/backup/components/ha-backup-data-picker.ts b/src/panels/config/backup/components/ha-backup-data-picker.ts index 4b5cfa86df..622d4b8241 100644 --- a/src/panels/config/backup/components/ha-backup-data-picker.ts +++ b/src/panels/config/backup/components/ha-backup-data-picker.ts @@ -5,7 +5,7 @@ import { mdiPlayBoxMultiple, mdiPuzzle, } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -25,11 +25,11 @@ import "./ha-backup-addons-picker"; import type { BackupAddonItem } from "./ha-backup-addons-picker"; import "./ha-backup-formfield-label"; -type CheckBoxItem = { +interface CheckBoxItem { label: string; id: string; version?: string; -}; +} const ITEM_ICONS = { config: mdiCog, @@ -38,10 +38,10 @@ const ITEM_ICONS = { share: mdiFolder, }; -type SelectedItems = { +interface SelectedItems { homeassistant: string[]; addons: string[]; -}; +} @customElement("ha-backup-data-picker") export class HaBackupDataPicker extends LitElement { @@ -305,28 +305,26 @@ export class HaBackupDataPicker extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .section { - margin-left: -16px; - margin-inline-start: -16px; - margin-inline-end: initial; - } - .items { - padding-left: 40px; - padding-inline-start: 40px; - padding-inline-end: initial; - display: flex; - flex-direction: column; - } - ha-backup-addons-picker { - display: block; - padding-left: 40px; - padding-inline-start: 40px; - padding-inline-end: initial; - } - `; - } + static styles = css` + .section { + margin-left: -16px; + margin-inline-start: -16px; + margin-inline-end: initial; + } + .items { + padding-left: 40px; + padding-inline-start: 40px; + padding-inline-end: initial; + display: flex; + flex-direction: column; + } + ha-backup-addons-picker { + display: block; + padding-left: 40px; + padding-inline-start: 40px; + padding-inline-end: initial; + } + `; } declare global { diff --git a/src/panels/config/backup/components/ha-backup-formfield-label.ts b/src/panels/config/backup/components/ha-backup-formfield-label.ts index def87edf35..d77c659851 100644 --- a/src/panels/config/backup/components/ha-backup-formfield-label.ts +++ b/src/panels/config/backup/components/ha-backup-formfield-label.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../../components/ha-svg-icon"; @@ -31,33 +31,31 @@ class SupervisorFormfieldLabel extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - flex-direction: row; - gap: 16px; - align-items: center; - } - .label { - margin-right: 4px; - margin-inline-end: 4px; - margin-inline-start: initial; - font-size: 14px; - font-weight: 400; - line-height: 24px; - letter-spacing: 0.5px; - } - .version { - color: var(--secondary-text-color); - } - .icon { - --mdi-icon-size: 24px; - width: 24px; - height: 24px; - } - `; - } + static styles = css` + :host { + display: flex; + flex-direction: row; + gap: 16px; + align-items: center; + } + .label { + margin-right: 4px; + margin-inline-end: 4px; + margin-inline-start: initial; + font-size: 14px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0.5px; + } + .version { + color: var(--secondary-text-color); + } + .icon { + --mdi-icon-size: 24px; + width: 24px; + height: 24px; + } + `; } declare global { diff --git a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts index 3f7ccf5545..550d34cae6 100644 --- a/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts +++ b/src/panels/config/backup/components/overview/ha-backup-overview-backups.ts @@ -13,10 +13,10 @@ import { haStyle } from "../../../../../resources/styles"; import type { HomeAssistant } from "../../../../../types"; import { bytesToString } from "../../../../../util/bytes-to-string"; -type BackupStats = { +interface BackupStats { count: number; size: number; -}; +} const computeBackupStats = (backups: BackupContent[]): BackupStats => backups.reduce( diff --git a/src/panels/config/backup/dialogs/dialog-generate-backup.ts b/src/panels/config/backup/dialogs/dialog-generate-backup.ts index d0ffe909eb..8c952514c3 100644 --- a/src/panels/config/backup/dialogs/dialog-generate-backup.ts +++ b/src/panels/config/backup/dialogs/dialog-generate-backup.ts @@ -35,12 +35,12 @@ import type { BackupConfigData } from "../components/config/ha-backup-config-dat import "../components/ha-backup-agents-picker"; import type { GenerateBackupDialogParams } from "./show-dialog-generate-backup"; -type FormData = { +interface FormData { name: string; agents_mode: "all" | "custom"; agent_ids: string[]; data: BackupConfigData; -}; +} const INITIAL_DATA: FormData = { data: { diff --git a/src/panels/config/backup/dialogs/dialog-restore-backup.ts b/src/panels/config/backup/dialogs/dialog-restore-backup.ts index 55e1621482..0e17ffa33f 100644 --- a/src/panels/config/backup/dialogs/dialog-restore-backup.ts +++ b/src/panels/config/backup/dialogs/dialog-restore-backup.ts @@ -29,10 +29,10 @@ import type { } from "../../../../data/backup_manager"; import { subscribeBackupEvents } from "../../../../data/backup_manager"; -type FormData = { +interface FormData { encryption_key_type: "config" | "custom"; custom_encryption_key: string; -}; +} const INITIAL_DATA: FormData = { encryption_key_type: "config", diff --git a/src/panels/config/backup/dialogs/dialog-upload-backup.ts b/src/panels/config/backup/dialogs/dialog-upload-backup.ts index 7356f9df34..66f9dcfaaa 100644 --- a/src/panels/config/backup/dialogs/dialog-upload-backup.ts +++ b/src/panels/config/backup/dialogs/dialog-upload-backup.ts @@ -24,9 +24,9 @@ import type { UploadBackupDialogParams } from "./show-dialog-upload-backup"; const SUPPORTED_FORMAT = "application/x-tar"; -type FormData = { +interface FormData { file?: File; -}; +} const INITIAL_DATA: FormData = { file: undefined, diff --git a/src/panels/config/backup/ha-config-backup-backups.ts b/src/panels/config/backup/ha-config-backup-backups.ts index 18682cd054..f129900cf0 100644 --- a/src/panels/config/backup/ha-config-backup-backups.ts +++ b/src/panels/config/backup/ha-config-backup-backups.ts @@ -71,7 +71,7 @@ interface BackupRow extends DataTableRowData, BackupContent { type BackupType = "automatic" | "manual"; -const TYPE_ORDER: Array = ["automatic", "manual"]; +const TYPE_ORDER: BackupType[] = ["automatic", "manual"]; @customElement("ha-config-backup-backups") class HaConfigBackupBackups extends SubscribeMixin(LitElement) { diff --git a/src/panels/config/backup/ha-config-backup-details.ts b/src/panels/config/backup/ha-config-backup-details.ts index 158573bb88..66a3e1357a 100644 --- a/src/panels/config/backup/ha-config-backup-details.ts +++ b/src/panels/config/backup/ha-config-backup-details.ts @@ -43,10 +43,10 @@ import "./components/ha-backup-data-picker"; import { showRestoreBackupDialog } from "./dialogs/show-dialog-restore-backup"; import { fireEvent } from "../../../common/dom/fire_event"; -type Agent = { +interface Agent { id: string; success: boolean; -}; +} const computeAgents = (agent_ids: string[], failed_agent_ids: string[]) => [ diff --git a/src/panels/config/backup/ha-config-backup.ts b/src/panels/config/backup/ha-config-backup.ts index 899c2e448d..c4e323656b 100644 --- a/src/panels/config/backup/ha-config-backup.ts +++ b/src/panels/config/backup/ha-config-backup.ts @@ -119,7 +119,6 @@ class HaConfigBackup extends SubscribeMixin(HassRouterPage) { pageEl.config = this._config; pageEl.fetching = this._fetching; - pageEl.addEventListener("reload", () => {}); if ( (!changedProps || changedProps.has("route")) && this._currentPage === "details" diff --git a/src/panels/config/blueprint/ha-blueprint-overview.ts b/src/panels/config/blueprint/ha-blueprint-overview.ts index e44b4a571d..89c81f2473 100644 --- a/src/panels/config/blueprint/ha-blueprint-overview.ts +++ b/src/panels/config/blueprint/ha-blueprint-overview.ts @@ -125,7 +125,7 @@ class HaBlueprintOverview extends LitElement { state: true, subscribe: false, }) - private _filter: string = ""; + private _filter = ""; private _processedBlueprints = memoizeOne( ( diff --git a/src/panels/config/cloud/account/cloud-ice-servers-pref.ts b/src/panels/config/cloud/account/cloud-ice-servers-pref.ts index 76fc62ac22..785c6b514f 100644 --- a/src/panels/config/cloud/account/cloud-ice-servers-pref.ts +++ b/src/panels/config/cloud/account/cloud-ice-servers-pref.ts @@ -1,5 +1,4 @@ import { mdiHelpCircle } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -78,30 +77,28 @@ export class CloudICEServersPref extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - a { - color: var(--primary-color); - } - .header-actions { - position: absolute; - right: 16px; - inset-inline-end: 16px; - inset-inline-start: initial; - top: 24px; - display: flex; - flex-direction: row; - } - .header-actions .icon-link { - margin-top: -16px; - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - direction: var(--direction); - color: var(--secondary-text-color); - } - `; - } + static styles = css` + a { + color: var(--primary-color); + } + .header-actions { + position: absolute; + right: 16px; + inset-inline-end: 16px; + inset-inline-start: initial; + top: 24px; + display: flex; + flex-direction: row; + } + .header-actions .icon-link { + margin-top: -16px; + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + direction: var(--direction); + color: var(--secondary-text-color); + } + `; } declare global { diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts index 1b0cd900f6..60ddbd50a0 100644 --- a/src/panels/config/cloud/account/cloud-remote-pref.ts +++ b/src/panels/config/cloud/account/cloud-remote-pref.ts @@ -1,5 +1,4 @@ import { mdiContentCopy, mdiEye, mdiEyeOff, mdiHelpCircle } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -277,98 +276,96 @@ export class CloudRemotePref extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - .preparing { - padding: 0 16px 16px; - } - a { - color: var(--primary-color); - } - .header-actions { - position: absolute; - right: 16px; - inset-inline-end: 16px; - inset-inline-start: initial; - top: 24px; - display: flex; - flex-direction: row; - } - .header-actions .icon-link { - margin-top: -16px; - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - direction: var(--direction); - color: var(--secondary-text-color); - } - .warning { - font-weight: bold; - margin-bottom: 1em; - } - .break-word { - overflow-wrap: break-word; - } - .connection-status { - position: absolute; - right: 24px; - top: 24px; - inset-inline-end: 24px; - inset-inline-start: initial; - } - .card-actions { - display: flex; - } - .card-actions a { - text-decoration: none; - } - ha-expansion-panel { - margin-top: 16px; - } - ha-settings-row { - padding: 0; - border-top: none !important; - } - ha-expansion-panel { - --expansion-panel-content-padding: 0 16px; - --expansion-panel-summary-padding: 0 16px; - } - ha-alert { - display: block; - margin-bottom: 16px; - } - .url-container { - display: flex; - align-items: center; - gap: 8px; - margin-top: 8px; - } - .textfield-container { - position: relative; - flex: 1; - } - .textfield-container ha-textfield { - display: block; - } - .toggle-unmasked-url { - position: absolute; - top: 8px; - right: 8px; - inset-inline-start: initial; - inset-inline-end: 8px; - --mdc-icon-button-size: 40px; - --mdc-icon-size: 20px; - color: var(--secondary-text-color); - direction: var(--direction); - } - hr { - border: none; - height: 1px; - background-color: var(--divider-color); - margin: 8px 0; - } - `; - } + static styles = css` + .preparing { + padding: 0 16px 16px; + } + a { + color: var(--primary-color); + } + .header-actions { + position: absolute; + right: 16px; + inset-inline-end: 16px; + inset-inline-start: initial; + top: 24px; + display: flex; + flex-direction: row; + } + .header-actions .icon-link { + margin-top: -16px; + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + direction: var(--direction); + color: var(--secondary-text-color); + } + .warning { + font-weight: bold; + margin-bottom: 1em; + } + .break-word { + overflow-wrap: break-word; + } + .connection-status { + position: absolute; + right: 24px; + top: 24px; + inset-inline-end: 24px; + inset-inline-start: initial; + } + .card-actions { + display: flex; + } + .card-actions a { + text-decoration: none; + } + ha-expansion-panel { + margin-top: 16px; + } + ha-settings-row { + padding: 0; + border-top: none !important; + } + ha-expansion-panel { + --expansion-panel-content-padding: 0 16px; + --expansion-panel-summary-padding: 0 16px; + } + ha-alert { + display: block; + margin-bottom: 16px; + } + .url-container { + display: flex; + align-items: center; + gap: 8px; + margin-top: 8px; + } + .textfield-container { + position: relative; + flex: 1; + } + .textfield-container ha-textfield { + display: block; + } + .toggle-unmasked-url { + position: absolute; + top: 8px; + right: 8px; + inset-inline-start: initial; + inset-inline-end: 8px; + --mdc-icon-button-size: 40px; + --mdc-icon-size: 20px; + color: var(--secondary-text-color); + direction: var(--direction); + } + hr { + border: none; + height: 1px; + background-color: var(--divider-color); + margin: 8px 0; + } + `; } declare global { diff --git a/src/panels/config/cloud/account/cloud-tts-pref.ts b/src/panels/config/cloud/account/cloud-tts-pref.ts index 2a8e2c0661..3b24665c2c 100644 --- a/src/panels/config/cloud/account/cloud-tts-pref.ts +++ b/src/panels/config/cloud/account/cloud-tts-pref.ts @@ -1,6 +1,5 @@ import "@material/mwc-button"; import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -176,41 +175,39 @@ export class CloudTTSPref extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - a { - color: var(--primary-color); - } - .example { - position: absolute; - right: 16px; - inset-inline-end: 16px; - inset-inline-start: initial; - top: 16px; - } - .row { - display: flex; - } - .row > * { - flex: 1; - width: 0; - } - .row > *:first-child { - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - } - .row > *:last-child { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } - .card-actions { - display: flex; - flex-direction: row-reverse; - } - `; - } + static styles = css` + a { + color: var(--primary-color); + } + .example { + position: absolute; + right: 16px; + inset-inline-end: 16px; + inset-inline-start: initial; + top: 16px; + } + .row { + display: flex; + } + .row > * { + flex: 1; + width: 0; + } + .row > *:first-child { + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + } + .row > *:last-child { + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + } + .card-actions { + display: flex; + flex-direction: row-reverse; + } + `; } declare global { diff --git a/src/panels/config/cloud/account/cloud-webhooks.ts b/src/panels/config/cloud/account/cloud-webhooks.ts index 0c2a89574e..1dfa6b2db0 100644 --- a/src/panels/config/cloud/account/cloud-webhooks.ts +++ b/src/panels/config/cloud/account/cloud-webhooks.ts @@ -22,9 +22,7 @@ export class CloudWebhooks extends LitElement { @property({ type: Boolean }) public narrow = false; - @state() private _cloudHooks?: { - [webhookId: string]: CloudWebhook; - }; + @state() private _cloudHooks?: Record; @state() private _localHooks?: Webhook[]; diff --git a/src/panels/config/dashboard/dialog-new-dashboard.ts b/src/panels/config/dashboard/dialog-new-dashboard.ts index 2207efdadf..6f9ff9a34d 100644 --- a/src/panels/config/dashboard/dialog-new-dashboard.ts +++ b/src/panels/config/dashboard/dialog-new-dashboard.ts @@ -16,10 +16,10 @@ import type { NewDashboardDialogParams } from "./show-dialog-new-dashboard"; const EMPTY_CONFIG: LovelaceRawConfig = { views: [{ title: "Home" }] }; -type Strategy = { +interface Strategy { type: string; iconPath: string; -}; +} const STRATEGIES = [ { diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 281d3670a9..335d84a7ac 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -168,7 +168,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) { total: repairsIssues.length, }; - const integrations: Set = new Set(); + const integrations = new Set(); for (const issue of this._repairsIssues.issues) { integrations.add(issue.domain); } 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 1bac107628..70441cca27 100644 --- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts @@ -1,5 +1,5 @@ import "@material/mwc-list/mwc-list"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -45,7 +45,7 @@ export class HaDeviceEntitiesCard extends LitElement { ExtEntityRegistryEntry >; - private _entityRows: Array = []; + private _entityRows: (LovelaceRow | HuiErrorCard)[] = []; protected shouldUpdate(changedProps: PropertyValues) { if (changedProps.has("hass") && changedProps.size === 1) { @@ -247,83 +247,81 @@ export class HaDeviceEntitiesCard extends LitElement { ); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - ha-icon { - margin-left: -8px; - } - .entity-id { - color: var(--secondary-text-color); - } - .buttons { - text-align: right; - margin: 0 0 0 8px; - } - .disabled-entry { - color: var(--secondary-text-color); - } - .move-up { - margin-top: -13px; - } - .move-up:has(> mwc-list) { - margin-top: -24px; - } - :not(.move-up) > mwc-list { - margin-top: -24px; - } - mwc-list + button.show-more, - .move-up + :not(:has(mwc-list)) > button.show-more { - margin-top: -12px; - } - #entities > mwc-list { - margin: 0 16px 0 8px; - } - #entities > paper-icon-item { - margin: 0; - } - paper-icon-item { - min-height: 40px; - padding: 0 16px; - cursor: pointer; - --paper-item-icon-width: 48px; - } - .name { - font-size: 14px; - } - .name:dir(rtl) { - margin-inline-start: 8px; - } - .empty { - text-align: center; - } - button.show-more { - color: var(--primary-color); - text-align: left; - cursor: pointer; - background: none; - border-width: initial; - border-style: none; - border-color: initial; - border-image: initial; - padding: 16px; - font: inherit; - } - button.show-more:focus { - outline: none; - text-decoration: underline; - } - mwc-list > * { - margin: 8px 0px; - } - ha-list-item { - height: 40px; - --mdc-ripple-color: transparent; - } - `; - } + static styles = css` + :host { + display: block; + } + ha-icon { + margin-left: -8px; + } + .entity-id { + color: var(--secondary-text-color); + } + .buttons { + text-align: right; + margin: 0 0 0 8px; + } + .disabled-entry { + color: var(--secondary-text-color); + } + .move-up { + margin-top: -13px; + } + .move-up:has(> mwc-list) { + margin-top: -24px; + } + :not(.move-up) > mwc-list { + margin-top: -24px; + } + mwc-list + button.show-more, + .move-up + :not(:has(mwc-list)) > button.show-more { + margin-top: -12px; + } + #entities > mwc-list { + margin: 0 16px 0 8px; + } + #entities > paper-icon-item { + margin: 0; + } + paper-icon-item { + min-height: 40px; + padding: 0 16px; + cursor: pointer; + --paper-item-icon-width: 48px; + } + .name { + font-size: 14px; + } + .name:dir(rtl) { + margin-inline-start: 8px; + } + .empty { + text-align: center; + } + button.show-more { + color: var(--primary-color); + text-align: left; + cursor: pointer; + background: none; + border-width: initial; + border-style: none; + border-color: initial; + border-image: initial; + padding: 16px; + font: inherit; + } + button.show-more:focus { + outline: none; + text-decoration: underline; + } + mwc-list > * { + margin: 8px 0px; + } + ha-list-item { + height: 40px; + --mdc-ripple-color: transparent; + } + `; } declare global { diff --git a/src/panels/config/devices/device-detail/ha-device-via-devices-card.ts b/src/panels/config/devices/device-detail/ha-device-via-devices-card.ts index 021652bedc..3df155ab37 100644 --- a/src/panels/config/devices/device-detail/ha-device-via-devices-card.ts +++ b/src/panels/config/devices/device-detail/ha-device-via-devices-card.ts @@ -1,5 +1,4 @@ import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -81,39 +80,37 @@ export class HaDeviceViaDevicesCard extends LitElement { this._showAll = !this._showAll; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } + static styles = css` + :host { + display: block; + } - .card-header { - padding-bottom: 0; - } + .card-header { + padding-bottom: 0; + } - a { - text-decoration: none; - color: var(--primary-text-color); - } + a { + text-decoration: none; + color: var(--primary-text-color); + } - button.show-more { - color: var(--primary-color); - text-align: left; - cursor: pointer; - background: none; - border-width: initial; - border-style: none; - border-color: initial; - border-image: initial; - padding: 16px; - font: inherit; - } - button.show-more:focus { - outline: none; - text-decoration: underline; - } - `; - } + button.show-more { + color: var(--primary-color); + text-align: left; + cursor: pointer; + background: none; + border-width: initial; + border-style: none; + border-color: initial; + border-image: initial; + padding: 16px; + font: inherit; + } + button.show-more:focus { + outline: none; + text-decoration: underline; + } + `; } declare global { 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 63c8a9a9ab..9cce42676b 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,5 +1,5 @@ import { dump } from "js-yaml"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -42,49 +42,47 @@ class MQTTDiscoveryPayload extends LitElement { this._open = !this._open; } - static get styles(): CSSResultGroup { - return css` - .expander { - cursor: pointer; - position: relative; - padding: 8px; - padding-left: 29px; - padding-inline-start: 29px; - padding-inline-end: initial; - border: 1px solid var(--divider-color); - } - .expander:before { - content: ""; - position: absolute; - border-right: 2px solid var(--primary-text-color); - border-bottom: 2px solid var(--primary-text-color); - width: 5px; - height: 5px; - top: 50%; - left: 12px; - transform: translateY(-50%) rotate(-45deg); - } - .expander.open:before { - transform: translateY(-50%) rotate(45deg); - } - .payload { - border: 1px solid var(--divider-color); - border-top: 0; - padding-left: 16px; - padding-inline-start: 16px; - padding-inline-end: initial; - } - pre { - display: inline-block; - font-size: 0.9em; - padding-left: 4px; - padding-right: 4px; - padding-inline-start: 4px; - padding-inline-end: 4px; - font-family: var(--code-font-family, monospace); - } - `; - } + static styles = css` + .expander { + cursor: pointer; + position: relative; + padding: 8px; + padding-left: 29px; + padding-inline-start: 29px; + padding-inline-end: initial; + border: 1px solid var(--divider-color); + } + .expander:before { + content: ""; + position: absolute; + border-right: 2px solid var(--primary-text-color); + border-bottom: 2px solid var(--primary-text-color); + width: 5px; + height: 5px; + top: 50%; + left: 12px; + transform: translateY(-50%) rotate(-45deg); + } + .expander.open:before { + transform: translateY(-50%) rotate(45deg); + } + .payload { + border: 1px solid var(--divider-color); + border-top: 0; + padding-left: 16px; + padding-inline-start: 16px; + padding-inline-end: initial; + } + pre { + display: inline-block; + font-size: 0.9em; + padding-left: 4px; + padding-right: 4px; + padding-inline-start: 4px; + padding-inline-end: 4px; + font-family: var(--code-font-family, monospace); + } + `; } declare global { 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 be65215bf9..7cd8134e60 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,5 +1,5 @@ import { dump } from "js-yaml"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -131,8 +131,7 @@ class MQTTMessages extends LitElement { this._open = !this._open; } - static get styles(): CSSResultGroup { - return css` + static styles = css` .expander { cursor: pointer; position: relative; @@ -179,7 +178,6 @@ class MQTTMessages extends LitElement { font-family: var(--code-font-family, monospace); } `; - } } declare global { diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index bdd1623594..ad7e23738f 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -144,11 +144,11 @@ export class HaConfigDevicePage extends LitElement { entries: ConfigEntry[], manifests: IntegrationManifest[] ): ConfigEntry[] => { - const entryLookup: { [entryId: string]: ConfigEntry } = {}; + const entryLookup: Record = {}; for (const entry of entries) { entryLookup[entry.entry_id] = entry; } - const manifestLookup: { [domain: string]: IntegrationManifest } = {}; + const manifestLookup: Record = {}; for (const manifest of manifests) { manifestLookup[manifest.domain] = manifest; } diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index c0ba1f330e..a2f601fb78 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -296,12 +296,12 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) { deviceEntityLookup[entity.device_id].push(entity); } - const entryLookup: { [entryId: string]: ConfigEntry } = {}; + const entryLookup: Record = {}; for (const entry of entries) { entryLookup[entry.entry_id] = entry; } - const manifestLookup: { [domain: string]: IntegrationManifest } = {}; + const manifestLookup: Record = {}; for (const manifest of manifests) { manifestLookup[manifest.domain] = manifest; } @@ -947,7 +947,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) { if ( filteredDomains.size === 1 && - (PROTOCOL_INTEGRATIONS as ReadonlyArray).includes( + (PROTOCOL_INTEGRATIONS as readonly string[]).includes( [...filteredDomains][0] ) ) { diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 5cdcfa6488..d3436e5aaa 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -694,7 +694,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { const includeAddDeviceFab = filteredDomains.size === 1 && - (PROTOCOL_INTEGRATIONS as ReadonlyArray).includes( + (PROTOCOL_INTEGRATIONS as readonly string[]).includes( [...filteredDomains][0] ); @@ -1397,7 +1397,7 @@ ${rejected ); if ( filteredDomains.size === 1 && - (PROTOCOL_INTEGRATIONS as ReadonlyArray).includes( + (PROTOCOL_INTEGRATIONS as readonly string[]).includes( [...filteredDomains][0] ) ) { diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts index f4c170ae6b..d0b95d4f62 100644 --- a/src/panels/config/ha-config-section.ts +++ b/src/panels/config/ha-config-section.ts @@ -34,104 +34,102 @@ export class HaConfigSection extends LitElement { `; } - static get styles() { - return css` - :host { - display: block; - } - .content { - padding: 28px 20px 0; - max-width: 1040px; - margin: 0 auto; - } + static styles = css` + :host { + display: block; + } + .content { + padding: 28px 20px 0; + max-width: 1040px; + margin: 0 auto; + } - .layout { - display: flex; - } + .layout { + display: flex; + } - .horizontal { - flex-direction: row; - } + .horizontal { + flex-direction: row; + } - .vertical { - flex-direction: column; - } + .vertical { + flex-direction: column; + } - .flex-auto { - flex: 1 1 auto; - } + .flex-auto { + flex: 1 1 auto; + } - .header { - font-family: var(--paper-font-headline_-_font-family); - -webkit-font-smoothing: var( - --paper-font-headline_-_-webkit-font-smoothing - ); - font-size: var(--paper-font-headline_-_font-size); - font-weight: var(--paper-font-headline_-_font-weight); - letter-spacing: var(--paper-font-headline_-_letter-spacing); - line-height: var(--paper-font-headline_-_line-height); - opacity: var(--dark-primary-opacity); - } + .header { + font-family: var(--paper-font-headline_-_font-family); + -webkit-font-smoothing: var( + --paper-font-headline_-_-webkit-font-smoothing + ); + font-size: var(--paper-font-headline_-_font-size); + font-weight: var(--paper-font-headline_-_font-weight); + letter-spacing: var(--paper-font-headline_-_letter-spacing); + line-height: var(--paper-font-headline_-_line-height); + opacity: var(--dark-primary-opacity); + } - .together { - margin-top: var(--config-section-content-together-margin-top, 32px); - } + .together { + margin-top: var(--config-section-content-together-margin-top, 32px); + } - .intro { - font-family: var(--paper-font-subhead_-_font-family); - -webkit-font-smoothing: var( - --paper-font-subhead_-_-webkit-font-smoothing - ); - font-weight: var(--paper-font-subhead_-_font-weight); - line-height: var(--paper-font-subhead_-_line-height); - width: 100%; - opacity: var(--dark-primary-opacity); - font-size: 14px; - padding-bottom: 20px; - } + .intro { + font-family: var(--paper-font-subhead_-_font-family); + -webkit-font-smoothing: var( + --paper-font-subhead_-_-webkit-font-smoothing + ); + font-weight: var(--paper-font-subhead_-_font-weight); + line-height: var(--paper-font-subhead_-_line-height); + width: 100%; + opacity: var(--dark-primary-opacity); + font-size: 14px; + padding-bottom: 20px; + } - .horizontal .intro { - max-width: 400px; - margin-right: 40px; - margin-inline-end: 40px; - margin-inline-start: initial; - } + .horizontal .intro { + max-width: 400px; + margin-right: 40px; + margin-inline-end: 40px; + margin-inline-start: initial; + } - .panel { - margin-top: -24px; - } + .panel { + margin-top: -24px; + } - .panel ::slotted(*) { - margin-top: 24px; - display: block; - } + .panel ::slotted(*) { + margin-top: 24px; + display: block; + } - .narrow.content { - max-width: 640px; - } - .narrow .together { - margin-top: var( - --config-section-narrow-content-together-margin-top, - var(--config-section-content-together-margin-top, 20px) - ); - } - .narrow .intro { - padding-bottom: 20px; - margin-right: 0; - margin-inline-end: 0; - margin-inline-start: initial; - max-width: 500px; - } + .narrow.content { + max-width: 640px; + } + .narrow .together { + margin-top: var( + --config-section-narrow-content-together-margin-top, + var(--config-section-content-together-margin-top, 20px) + ); + } + .narrow .intro { + padding-bottom: 20px; + margin-right: 0; + margin-inline-end: 0; + margin-inline-start: initial; + max-width: 500px; + } - .full-width { - padding: 0; - } + .full-width { + padding: 0; + } - .full-width .layout { - flex-direction: column; - } - `; - } + .full-width .layout { + flex-direction: column; + } + `; } declare global { diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index d88ef1b16a..4bd03c7b37 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -57,7 +57,7 @@ declare global { } } -export const configSections: { [name: string]: PageNavigation[] } = { +export const configSections: Record = { dashboard: [ { path: "/config/integrations", @@ -562,7 +562,7 @@ class HaPanelConfig extends SubscribeMixin(HassRouterPage) { @state() private _cloudStatus?: CloudStatus; - private _listeners: Array<() => void> = []; + private _listeners: (() => void)[] = []; public connectedCallback() { super.connectedCallback(); diff --git a/src/panels/config/hardware/ha-config-hardware.ts b/src/panels/config/hardware/ha-config-hardware.ts index e3c9d8e4e1..ec7119e85e 100644 --- a/src/panels/config/hardware/ha-config-hardware.ts +++ b/src/panels/config/hardware/ha-config-hardware.ts @@ -66,13 +66,13 @@ class HaConfigHardware extends SubscribeMixin(LitElement) { @state() private _systemStatusData?: SystemStatusStreamMessage; - @state() private _configEntries?: { [id: string]: ConfigEntry }; + @state() private _configEntries?: Record; private _memoryEntries: { x: number; y: number | null }[] = []; private _cpuEntries: { x: number; y: number | null }[] = []; - public hassSubscribe(): Array> { + public hassSubscribe(): (UnsubscribeFunc | Promise)[] { const subs = [ subscribeConfigEntries( this.hass, @@ -103,7 +103,7 @@ class HaConfigHardware extends SubscribeMixin(LitElement) { ...(fullUpdate ? [] : Object.values(this._configEntries || {})), ...newEntries, ]; - const configEntries: { [id: string]: ConfigEntry } = {}; + const configEntries: Record = {}; for (const entry of entries) { configEntries[entry.entry_id] = entry; } diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index bcbcfd74a8..7bf463fb0e 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/src/panels/config/helpers/dialog-helper-detail.ts @@ -34,8 +34,9 @@ import { isHelperDomain } from "./const"; import type { ShowDialogHelperDetailParams } from "./show-dialog-helper-detail"; import { fireEvent } from "../../../common/dom/fire_event"; -type HelperCreators = { - [domain in HelperDomain]: { +type HelperCreators = Record< + HelperDomain, + { create: ( hass: HomeAssistant, // Not properly typed because there is currently a mismatch for this._item between: @@ -45,8 +46,8 @@ type HelperCreators = { params: any ) => Promise; import: () => Promise; - }; -}; + } +>; const HELPERS: HelperCreators = { input_boolean: { diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts index e1205b9d74..5e27a71f1f 100644 --- a/src/panels/config/helpers/ha-config-helpers.ts +++ b/src/panels/config/helpers/ha-config-helpers.ts @@ -110,7 +110,7 @@ import { showLabelDetailDialog } from "../labels/show-dialog-label-detail"; import { isHelperDomain } from "./const"; import { showHelperDetailDialog } from "./show-dialog-helper-detail"; -type HelperItem = { +interface HelperItem { id: string; name: string; icon?: string; @@ -122,7 +122,7 @@ type HelperItem = { category: string | undefined; label_entries: LabelRegistryEntry[]; disabled?: boolean; -}; +} // This groups items by a key but only returns last entry per key. const groupByOne = ( @@ -204,7 +204,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) { @state() private _activeFilters?: string[]; - @state() private _helperManifests?: { [domain: string]: IntegrationManifest }; + @state() private _helperManifests?: Record; @storage({ storage: "sessionStorage", @@ -875,7 +875,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) { Array.isArray(filter) && filter.length ) { - const labelItems: Set = new Set(); + const labelItems = new Set(); this._stateItems .filter((stateItem) => this._entityReg @@ -901,7 +901,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) { Array.isArray(filter) && filter.length ) { - const categoryItems: Set = new Set(); + const categoryItems = new Set(); this._stateItems .filter( (stateItem) => @@ -1043,7 +1043,7 @@ ${rejected fetchIntegrationManifests(this.hass), ]); - const manifests: { [domain: string]: IntegrationManifest } = {}; + const manifests: Record = {}; for (const manifest of fetchedManifests) { if (manifest.integration_type === "helper") { diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts index 688ccb6f89..f638bf338c 100644 --- a/src/panels/config/info/ha-config-info.ts +++ b/src/panels/config/info/ha-config-info.ts @@ -95,7 +95,7 @@ class HaConfigInfo extends LitElement { protected render(): TemplateResult { const hass = this.hass; - const customUiList: Array<{ name: string; url: string; version: string }> = + const customUiList: { name: string; url: string; version: string }[] = (window as any).CUSTOM_UI_LIST || []; return html` diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts index 16c1a0615c..21d6a24aff 100644 --- a/src/panels/config/integrations/dialog-add-integration.ts +++ b/src/panels/config/integrations/dialog-add-integration.ts @@ -564,7 +564,7 @@ class AddIntegrationDialog extends LitElement { } if ( - (PROTOCOL_INTEGRATIONS as ReadonlyArray).includes( + (PROTOCOL_INTEGRATIONS as readonly string[]).includes( integration.domain ) && isComponentLoaded(this.hass, integration.domain) diff --git a/src/panels/config/integrations/dialog-yaml-integration.ts b/src/panels/config/integrations/dialog-yaml-integration.ts index d27c09f0bd..ca57b6dc07 100644 --- a/src/panels/config/integrations/dialog-yaml-integration.ts +++ b/src/panels/config/integrations/dialog-yaml-integration.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -67,26 +66,24 @@ export class DialogYamlIntegration extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host([inert]) { - pointer-events: initial !important; - cursor: initial !important; - } - a { - text-decoration: none; - } + static styles = css` + :host([inert]) { + pointer-events: initial !important; + cursor: initial !important; + } + a { + text-decoration: none; + } + ha-dialog { + /* Place above other dialogs */ + --dialog-z-index: 104; + } + @media all and (min-width: 600px) { ha-dialog { - /* Place above other dialogs */ - --dialog-z-index: 104; + --mdc-dialog-min-width: 400px; } - @media all and (min-width: 600px) { - ha-dialog { - --mdc-dialog-min-width: 400px; - } - } - `; - } + } + `; } declare global { diff --git a/src/panels/config/integrations/ha-config-integrations-dashboard.ts b/src/panels/config/integrations/ha-config-integrations-dashboard.ts index 9735a6af72..85937d6d56 100644 --- a/src/panels/config/integrations/ha-config-integrations-dashboard.ts +++ b/src/panels/config/integrations/ha-config-integrations-dashboard.ts @@ -109,8 +109,10 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( @property({ attribute: false }) public configEntriesInProgress?: DataEntryFlowProgressExtended[]; - @state() private _improvDiscovered: Map = - new Map(); + @state() private _improvDiscovered = new Map< + string, + ImprovDiscoveredDevice + >(); @state() private _entityRegistryEntries: EntityRegistryEntry[] = []; @@ -134,9 +136,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( @state() private _diagnosticHandlers?: Record; - @state() private _logInfos?: { - [integration: string]: IntegrationLogInfo; - }; + @state() private _logInfos?: Record; @query("search-input-outlined") private _searchInput!: HTMLElement; @@ -152,13 +152,13 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( ); } - public hassSubscribe(): Array> { + public hassSubscribe(): (UnsubscribeFunc | Promise)[] { return [ subscribeEntityRegistry(this.hass.connection, (entries) => { this._entityRegistryEntries = entries; }), subscribeLogInfo(this.hass.connection, (log_infos) => { - const logInfoLookup: { [integration: string]: IntegrationLogInfo } = {}; + const logInfoLookup: Record = {}; for (const log_info of log_infos) { logInfoLookup[log_info.domain] = log_info; } @@ -896,7 +896,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( ), confirm: async () => { if ( - (PROTOCOL_INTEGRATIONS as ReadonlyArray).includes( + (PROTOCOL_INTEGRATIONS as readonly string[]).includes( integration.supported_by! ) ) { diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index b8268cfcc4..d93cf28bb7 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -123,7 +123,7 @@ class HaConfigIntegrations extends SubscribeMixin(HassRouterPage) { { type: ["device", "hub", "service"] } ), subscribeConfigFlowInProgress(this.hass, async (flowsInProgress) => { - const integrations: Set = new Set(); + const integrations = new Set(); flowsInProgress.forEach((flow) => { // To render title placeholders if (flow.context.title_placeholders) { diff --git a/src/panels/config/integrations/ha-domain-integrations.ts b/src/panels/config/integrations/ha-domain-integrations.ts index 826c2cac77..f2473e098c 100644 --- a/src/panels/config/integrations/ha-domain-integrations.ts +++ b/src/panels/config/integrations/ha-domain-integrations.ts @@ -84,7 +84,7 @@ class HaDomainIntegrations extends LitElement { ${this.integration?.iot_standards ? this.integration.iot_standards .filter((standard) => - (PROTOCOL_INTEGRATIONS as ReadonlyArray).includes( + (PROTOCOL_INTEGRATIONS as readonly string[]).includes( standardToDomain[standard] || standard ) ) @@ -153,7 +153,7 @@ class HaDomainIntegrations extends LitElement { ` ) : ""} - ${(PROTOCOL_INTEGRATIONS as ReadonlyArray).includes(this.domain) + ${(PROTOCOL_INTEGRATIONS as readonly string[]).includes(this.domain) ? html` void; - @state() private _messages: Array<{ + @state() private _messages: { id: number; message: MQTTMessage; payload: string; time: Date; - }> = []; + }[] = []; private _messageCount = 0; @@ -187,57 +187,55 @@ class MqttSubscribeCard extends LitElement { ]; } - static get styles(): CSSResultGroup { - return css` - form { - display: block; - padding: 16px; - } - .events { - margin: -16px 0; - padding: 0 16px; - } - .event { - border-bottom: 1px solid var(--divider-color); - padding-bottom: 16px; - margin: 16px 0; - } - .event:last-child { - border-bottom: 0; - } - .bottom { - font-size: 80%; - color: var(--secondary-text-color); - } - pre { - font-family: var(--code-font-family, monospace); - } - .panel-dev-mqtt-subscribe-fields { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - } + static styles = css` + form { + display: block; + padding: 16px; + } + .events { + margin: -16px 0; + padding: 0 16px; + } + .event { + border-bottom: 1px solid var(--divider-color); + padding-bottom: 16px; + margin: 16px 0; + } + .event:last-child { + border-bottom: 0; + } + .bottom { + font-size: 80%; + color: var(--secondary-text-color); + } + pre { + font-family: var(--code-font-family, monospace); + } + .panel-dev-mqtt-subscribe-fields { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + } + ha-select { + width: 96px; + margin: 0 8px; + } + ha-textfield { + flex: 1; + } + @media screen and (max-width: 600px) { ha-select { - width: 96px; - margin: 0 8px; + margin-left: 0px; + margin-top: 8px; + margin-inline-start: 0px; + margin-inline-end: initial; } ha-textfield { - flex: 1; + flex: auto; + width: 100%; } - @media screen and (max-width: 600px) { - ha-select { - margin-left: 0px; - margin-top: 8px; - margin-inline-start: 0px; - margin-inline-end: initial; - } - ha-textfield { - flex: auto; - width: 100%; - } - } - `; - } + } + `; } declare global { diff --git a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts b/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts index 90b69dc114..921bc8f33d 100644 --- a/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts +++ b/src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts @@ -396,7 +396,7 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) { datasets: ThreadDataSet[] ): { preferred?: ThreadNetwork; networks: ThreadNetwork[] } => { let preferred: ThreadNetwork | undefined; - const networks: { [key: string]: ThreadNetwork } = {}; + const networks: Record = {}; for (const router of routers) { const network = router.extended_pan_id; if (network in networks) { 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 4592e3289f..ca9b353bb8 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 @@ -34,10 +34,10 @@ class DialogZHAReconfigureDevice extends LitElement { @state() private _stages?: string[]; - @state() private _clusterConfigurationStatuses?: Map< + @state() private _clusterConfigurationStatuses? = new Map< number, ClusterConfigurationStatus - > = new Map(); + >(); @state() private _params: ZHAReconfigureDeviceDialogParams | undefined = undefined; 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 ac32a166ae..adf0cd4dd8 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 @@ -43,10 +43,10 @@ export class ZHANetworkVisualizationPage extends LitElement { private _visualization?: HTMLElement; @state() - private _devices: Map = new Map(); + private _devices = new Map(); @state() - private _devicesByDeviceId: Map = new Map(); + private _devicesByDeviceId = new Map(); @state() private _nodes: Node[] = []; diff --git a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-door-lock.ts b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-door-lock.ts index 2c5b5082a0..e0fda6c928 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-door-lock.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/capability-controls/zwave_js-capability-control-door-lock.ts @@ -18,7 +18,7 @@ import { extractApiErrorMessage } from "../../../../../../data/hassio/common"; type DoorHandleStatus = [boolean, boolean, boolean, boolean]; -type DoorLockConfiguration = { +interface DoorLockConfiguration { operationType: number; outsideHandlesCanOpenDoorConfiguration: DoorHandleStatus; insideHandlesCanOpenDoorConfiguration: DoorHandleStatus; @@ -27,7 +27,7 @@ type DoorLockConfiguration = { holdAndReleaseTime?: number; twistAssist?: boolean; blockToBlock?: boolean; -}; +} enum DoorLockMode { Unsecured = 0x00, @@ -40,14 +40,14 @@ enum DoorLockMode { Secured = 0xff, } -type DoorLockCapabilities = { +interface DoorLockCapabilities { supportedOperationTypes: number[]; supportedDoorLockModes: DoorLockMode[]; blockToBlockSupported?: boolean; twistAssistSupported?: boolean; holdAndReleaseSupported?: boolean; autoRelockSupported?: boolean; -}; +} const TIMED_MODES = [ DoorLockMode.UnsecuredWithTimeout, 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 fd74444f7b..ce17f60db5 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 @@ -90,7 +90,7 @@ class DialogZWaveJSAddNode extends LitElement { private _addNodeTimeoutHandle?: number; - private _subscribed?: Promise; + private _subscribed?: Promise; private _qrProcessing = false; @@ -857,7 +857,7 @@ class DialogZWaveJSAddNode extends LitElement { ).catch((err) => { this._error = err.message; this._status = "failed"; - return () => {}; + return undefined; }); this._addNodeTimeoutHandle = window.setTimeout(() => { this._unsubscribe(); @@ -874,7 +874,7 @@ class DialogZWaveJSAddNode extends LitElement { private _unsubscribe(): void { if (this._subscribed) { - this._subscribed.then((unsub) => unsub()); + this._subscribed.then((unsub) => unsub && unsub()); this._subscribed = undefined; } if (this._entryId) { diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts index f25d61f54c..5085f86eb1 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-node-statistics.ts @@ -46,7 +46,7 @@ class DialogZWaveJSNodeStatistics extends LitElement { rssi_translated?: TemplateResult | string; }; - @state() private _deviceIDsToName: { [key: string]: string } = {}; + @state() private _deviceIDsToName: Record = {}; @state() private _workingRoutes: { lwr?: WorkingRouteStatistics; 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 03f7ed50cb..6e11b0e69d 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 @@ -32,7 +32,7 @@ class DialogZWaveJSRemoveNode extends LitElement { private _removeNodeTimeoutHandle?: number; - private _subscribed?: Promise; + private _subscribed?: Promise; @state() private _error?: string; @@ -167,7 +167,7 @@ class DialogZWaveJSRemoveNode extends LitElement { .catch((err) => { this._status = "failed"; this._error = err.message; - return () => {}; + return undefined; }); this._status = "started"; this._removeNodeTimeoutHandle = window.setTimeout( @@ -202,7 +202,7 @@ class DialogZWaveJSRemoveNode extends LitElement { private _unsubscribe(): void { if (this._subscribed) { - this._subscribed.then((unsub) => unsub()); + this._subscribed.then((unsub) => unsub && unsub()); this._subscribed = undefined; } if (this._status === "started") { 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 77bb839d5a..96b91b41f2 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 @@ -91,7 +91,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { } } - public hassSubscribe(): Array> { + public hassSubscribe(): (UnsubscribeFunc | Promise)[] { return [ subscribeZwaveControllerStatistics( this.hass, diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts index b250c4cd38..d7aded1985 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-custom-param.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css, type CSSResultGroup, nothing } from "lit"; +import { LitElement, html, css, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { mdiCloseCircle } from "@mdi/js"; import "../../../../../components/ha-textfield"; @@ -222,48 +222,46 @@ class ZWaveJSCustomParam extends LitElement { } } - static get styles(): CSSResultGroup { - return css` + static styles = css` + .custom-config-form { + display: flex; + flex-wrap: wrap; + gap: 16px; + margin-bottom: 8px; + } + + ha-textfield, + ha-select { + flex-grow: 1; + flex-basis: calc(50% - 8px); + min-width: 120px; + } + + @media (min-width: 681px) { .custom-config-form { - display: flex; - flex-wrap: wrap; - gap: 16px; - margin-bottom: 8px; + flex-wrap: nowrap; } ha-textfield, ha-select { - flex-grow: 1; - flex-basis: calc(50% - 8px); - min-width: 120px; + flex-basis: 0; } + } - @media (min-width: 681px) { - .custom-config-form { - flex-wrap: nowrap; - } + .custom-config-buttons { + display: flex; + justify-content: flex-end; + align-items: center; + } - ha-textfield, - ha-select { - flex-basis: 0; - } - } + .error { + color: var(--error-color); + } - .custom-config-buttons { - display: flex; - justify-content: flex-end; - align-items: center; - } - - .error { - color: var(--error-color); - } - - .error-icon { - margin-right: 8px; - } - `; - } + .error-icon { + margin-right: 8px; + } + `; } declare global { 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 84f8749d50..12d0183fd6 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 @@ -34,7 +34,7 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) { @query("textarea", true) private _textarea?: HTMLTextAreaElement; - public hassSubscribe(): Array> { + public hassSubscribe(): (UnsubscribeFunc | Promise)[] { return [ subscribeZWaveJSLogs(this.hass, this.configEntryId, (update) => { if (!this.hasUpdated) { diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts index 0f551df687..4cb20a0c15 100644 --- a/src/panels/config/logs/error-log-card.ts +++ b/src/panels/config/logs/error-log-card.ts @@ -121,7 +121,7 @@ class ErrorLogCard extends LitElement { @state() private _loadingPrevState?: "loading" | "end" | "loaded"; - @state() private _noSearchResults: boolean = false; + @state() private _noSearchResults = false; @state() private _numberOfLines?: number; diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts index cb8d019b87..47dc292aeb 100644 --- a/src/panels/config/logs/system-log-card.ts +++ b/src/panels/config/logs/system-log-card.ts @@ -1,6 +1,5 @@ import "@material/mwc-list/mwc-list"; import { mdiDotsVertical, mdiDownload, mdiRefresh, mdiText } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -241,70 +240,68 @@ export class SystemLogCard extends LitElement { showSystemLogDetailDialog(this, { item }); } - static get styles(): CSSResultGroup { - return css` - ha-card { - padding-top: 8px; - } + static styles = css` + ha-card { + padding-top: 8px; + } - :host { - direction: var(--direction); - } - mwc-list { - direction: ltr; - } + :host { + direction: var(--direction); + } + mwc-list { + direction: ltr; + } - .header { - display: flex; - justify-content: space-between; - padding: 0 16px; - } + .header { + display: flex; + justify-content: space-between; + padding: 0 16px; + } - .header-buttons { - display: flex; - align-items: center; - } + .header-buttons { + display: flex; + align-items: center; + } - .card-header { - color: var(--ha-card-header-color, var(--primary-text-color)); - font-family: var(--ha-card-header-font-family, inherit); - font-size: var(--ha-card-header-font-size, 24px); - letter-spacing: -0.012em; - line-height: 48px; - display: block; - margin-block-start: 0px; - margin-block-end: 0px; - font-weight: normal; - } + .card-header { + color: var(--ha-card-header-color, var(--primary-text-color)); + font-family: var(--ha-card-header-font-family, inherit); + font-size: var(--ha-card-header-font-size, 24px); + letter-spacing: -0.012em; + line-height: 48px; + display: block; + margin-block-start: 0px; + margin-block-end: 0px; + font-weight: normal; + } - .system-log-intro { - margin: 16px; - } + .system-log-intro { + margin: 16px; + } - .loading-container { - height: 100px; - display: flex; - align-items: center; - justify-content: center; - } + .loading-container { + height: 100px; + display: flex; + align-items: center; + justify-content: center; + } - .error { - color: var(--error-color); - } + .error { + color: var(--error-color); + } - .warning { - color: var(--warning-color); - } + .warning { + color: var(--warning-color); + } - .card-content { - border-top: 1px solid var(--divider-color); - } + .card-content { + border-top: 1px solid var(--divider-color); + } - .row-secondary { - text-align: left; - } - `; - } + .row-secondary { + text-align: left; + } + `; } declare global { 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 d1e0f7e866..82e3b1ea89 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -79,7 +79,7 @@ export class HaConfigLovelaceDashboards extends LitElement { state: true, subscribe: false, }) - private _filter: string = ""; + private _filter = ""; @storage({ key: "lovelace-dashboards-table-sort", diff --git a/src/panels/config/network/ha-config-url-form.ts b/src/panels/config/network/ha-config-url-form.ts index a6c4dc49e6..1daab56bd3 100644 --- a/src/panels/config/network/ha-config-url-form.ts +++ b/src/panels/config/network/ha-config-url-form.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { mdiContentCopy, mdiEyeOff, mdiEye } from "@mdi/js"; @@ -33,9 +33,9 @@ class ConfigUrlForm extends LitElement { @state() private _urls?: NetworkUrls; - @state() private _external_url: string = ""; + @state() private _external_url = ""; - @state() private _internal_url: string = ""; + @state() private _internal_url = ""; @state() private _cloudStatus?: CloudStatus | null; @@ -384,72 +384,70 @@ class ConfigUrlForm extends LitElement { this._external_url = this._urls?.external ?? ""; } - static get styles(): CSSResultGroup { - return css` - .description { - margin-bottom: 1em; - } - .row { - display: flex; - flex-direction: row; - margin: 0 -8px; - align-items: center; - padding: 8px 0; - } + static styles = css` + .description { + margin-bottom: 1em; + } + .row { + display: flex; + flex-direction: row; + margin: 0 -8px; + align-items: center; + padding: 8px 0; + } - .secondary { - color: var(--secondary-text-color); - } + .secondary { + color: var(--secondary-text-color); + } - .flex { - flex: 1; - } + .flex { + flex: 1; + } - .row > * { - margin: 0 8px; - } + .row > * { + margin: 0 8px; + } - ha-alert { - display: block; - margin: 16px 0; - } + ha-alert { + display: block; + margin: 16px 0; + } - .card-actions { - display: flex; - flex-direction: row-reverse; - } + .card-actions { + display: flex; + flex-direction: row-reverse; + } - a { - color: var(--primary-color); - text-decoration: none; - } + a { + color: var(--primary-color); + text-decoration: none; + } - .url-container { - display: flex; - align-items: center; - gap: 8px; - margin-top: 8px; - } - .textfield-container { - position: relative; - flex: 1; - } - .textfield-container ha-textfield { - display: block; - } - .toggle-unmasked-url { - position: absolute; - top: 8px; - right: 8px; - inset-inline-start: initial; - inset-inline-end: 8px; - --mdc-icon-button-size: 40px; - --mdc-icon-size: 20px; - color: var(--secondary-text-color); - direction: var(--direction); - } - `; - } + .url-container { + display: flex; + align-items: center; + gap: 8px; + margin-top: 8px; + } + .textfield-container { + position: relative; + flex: 1; + } + .textfield-container ha-textfield { + display: block; + } + .toggle-unmasked-url { + position: absolute; + top: 8px; + right: 8px; + inset-inline-start: initial; + inset-inline-end: 8px; + --mdc-icon-button-size: 40px; + --mdc-icon-size: 20px; + color: var(--secondary-text-color); + direction: var(--direction); + } + `; } declare global { diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index 72a2c39a3c..3a5ba2ae21 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -1,6 +1,5 @@ import { mdiPlus } from "@mdi/js"; import "@material/mwc-list/mwc-list"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { stringCompare } from "../../../common/string/compare"; @@ -278,27 +277,25 @@ export class HaConfigPerson extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - a { - color: var(--primary-color); - } - ha-card { - max-width: 600px; - margin: 16px auto; - overflow: hidden; - } - .empty { - padding: 8px; - display: flex; - align-items: center; - justify-content: space-around; - } - mwc-list:has(+ .empty) { - display: none; - } - `; - } + static styles = css` + a { + color: var(--primary-color); + } + ha-card { + max-width: 600px; + margin: 16px auto; + overflow: hidden; + } + .empty { + padding: 8px; + display: flex; + align-items: center; + justify-content: space-around; + } + mwc-list:has(+ .empty) { + display: none; + } + `; } declare global { diff --git a/src/panels/config/repairs/ha-config-repairs-dashboard.ts b/src/panels/config/repairs/ha-config-repairs-dashboard.ts index aa49368d32..5aabf9a51c 100644 --- a/src/panels/config/repairs/ha-config-repairs-dashboard.ts +++ b/src/panels/config/repairs/ha-config-repairs-dashboard.ts @@ -57,7 +57,7 @@ class HaConfigRepairsDashboard extends SubscribeMixin(LitElement) { this._repairsIssues = repairs.issues.sort( (a, b) => severitySort[a.severity] - severitySort[b.severity] ); - const integrations: Set = new Set(); + const integrations = new Set(); for (const issue of this._repairsIssues) { integrations.add(issue.domain); } diff --git a/src/panels/config/repairs/integrations-startup-time.ts b/src/panels/config/repairs/integrations-startup-time.ts index 3927e35370..3c3082929b 100644 --- a/src/panels/config/repairs/integrations-startup-time.ts +++ b/src/panels/config/repairs/integrations-startup-time.ts @@ -1,5 +1,5 @@ import "@material/mwc-list/mwc-list"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-card"; @@ -23,9 +23,7 @@ class IntegrationsStartupTime extends LitElement { @property({ type: Boolean }) public narrow = false; - @state() private _manifests?: { - [domain: string]: IntegrationManifest; - }; + @state() private _manifests?: Record; @state() private _setups?: IntegrationSetup[]; @@ -110,24 +108,22 @@ class IntegrationsStartupTime extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - ha-clickable-list-item { - --mdc-list-item-meta-size: 64px; - --mdc-typography-caption-font-size: 12px; - } - img { - display: block; - max-height: 40px; - max-width: 40px; - } - div[slot="meta"] { - display: flex; - justify-content: center; - align-items: center; - } - `; - } + static styles = css` + ha-clickable-list-item { + --mdc-list-item-meta-size: 64px; + --mdc-typography-caption-font-size: 12px; + } + img { + display: block; + max-height: 40px; + max-width: 40px; + } + div[slot="meta"] { + display: flex; + justify-content: center; + align-items: center; + } + `; } declare global { diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index de76e4be13..5d727990f4 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -844,7 +844,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) { Array.isArray(filter.value) && filter.value.length ) { - const categoryItems: Set = new Set(); + const categoryItems = new Set(); this.scenes .filter( (scene) => @@ -868,7 +868,7 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) { Array.isArray(filter.value) && filter.value.length ) { - const labelItems: Set = new Set(); + const labelItems = new Set(); this.scenes .filter((scene) => this._entityReg diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 57159669b8..e33497cd38 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -85,9 +85,7 @@ interface DeviceEntities { entities: string[]; } -interface DeviceEntitiesLookup { - [deviceId: string]: string[]; -} +type DeviceEntitiesLookup = Record; @customElement("ha-scene-editor") export class HaSceneEditor extends PreventUnsavedMixin( @@ -175,7 +173,7 @@ export class HaSceneEditor extends PreventUnsavedMixin( const outputDevices: DeviceEntities[] = []; if (devices.length) { - const deviceLookup: { [deviceId: string]: DeviceRegistryEntry } = {}; + const deviceLookup: Record = {}; for (const device of deviceRegs) { deviceLookup[device.id] = device; } diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts index f214216c84..9363dc1784 100644 --- a/src/panels/config/script/ha-script-field-row.ts +++ b/src/panels/config/script/ha-script-field-row.ts @@ -40,7 +40,7 @@ export default class HaScriptFieldRow extends LitElement { @state() private _yamlError?: undefined | "yaml_error" | "key_not_unique"; - @state() private _yamlMode: boolean = false; + @state() private _yamlMode = false; private _errorKey?: string; diff --git a/src/panels/config/script/ha-script-fields.ts b/src/panels/config/script/ha-script-fields.ts index 3510f08385..66bbb1f2dc 100644 --- a/src/panels/config/script/ha-script-fields.ts +++ b/src/panels/config/script/ha-script-fields.ts @@ -1,6 +1,6 @@ import "@material/mwc-button"; import { mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -134,18 +134,16 @@ export default class HaScriptFields extends LitElement { return key; } - static get styles(): CSSResultGroup { - return css` - ha-script-field-row { - display: block; - margin-bottom: 16px; - scroll-margin-top: 48px; - } - ha-svg-icon { - height: 20px; - } - `; - } + static styles = css` + ha-script-field-row { + display: block; + margin-bottom: 16px; + scroll-margin-top: 48px; + } + ha-svg-icon { + height: 20px; + } + `; } declare global { diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 9bfbed2fa8..91225898ce 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -855,7 +855,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) { Array.isArray(filter.value) && filter.value.length ) { - const categoryItems: Set = new Set(); + const categoryItems = new Set(); this.scripts .filter( (script) => @@ -879,7 +879,7 @@ class HaScriptPicker extends SubscribeMixin(LitElement) { Array.isArray(filter.value) && filter.value.length ) { - const labelItems: Set = new Set(); + const labelItems = new Set(); this.scripts .filter((script) => this._entityReg diff --git a/src/panels/config/tags/tag-image.ts b/src/panels/config/tags/tag-image.ts index ab5bff3dca..2d440eaaf4 100644 --- a/src/panels/config/tags/tag-image.ts +++ b/src/panels/config/tags/tag-image.ts @@ -1,5 +1,4 @@ import { mdiNfcVariant } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-svg-icon"; @@ -47,38 +46,36 @@ export class HaTagImage extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .image { - height: 100%; - width: 100%; - background-size: cover; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; + static styles = css` + .image { + height: 100%; + width: 100%; + background-size: cover; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + } + .container { + height: 40px; + width: 40px; + border-radius: 50%; + } + :host(.just-scanned) .container { + animation: glow 10s; + } + @keyframes glow { + 0% { + box-shadow: 0px 0px 24px 0px rgba(var(--rgb-primary-color), 0); } - .container { - height: 40px; - width: 40px; - border-radius: 50%; + 10% { + box-shadow: 0px 0px 24px 0px rgba(var(--rgb-primary-color), 1); } - :host(.just-scanned) .container { - animation: glow 10s; + 100% { + box-shadow: 0px 0px 24px 0px rgba(var(--rgb-primary-color), 0); } - @keyframes glow { - 0% { - box-shadow: 0px 0px 24px 0px rgba(var(--rgb-primary-color), 0); - } - 10% { - box-shadow: 0px 0px 24px 0px rgba(var(--rgb-primary-color), 1); - } - 100% { - box-shadow: 0px 0px 24px 0px rgba(var(--rgb-primary-color), 0); - } - } - `; - } + } + `; } declare global { diff --git a/src/panels/config/users/dialog-admin-change-password.ts b/src/panels/config/users/dialog-admin-change-password.ts index 558f4145ce..b51ba5cde3 100644 --- a/src/panels/config/users/dialog-admin-change-password.ts +++ b/src/panels/config/users/dialog-admin-change-password.ts @@ -37,7 +37,10 @@ const SCHEMA = [ }, ] as const; -type FormData = { new_password?: string; password_confirm?: string }; +interface FormData { + new_password?: string; + password_confirm?: string; +} @customElement("dialog-admin-change-password") class DialogAdminChangePassword extends LitElement { diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts index c51f03b031..c85ea484d5 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-config.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -84,32 +83,30 @@ export class AssistPipelineDetailConfig extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .section { - border: 1px solid var(--divider-color); - border-radius: 8px; - box-sizing: border-box; - padding: 16px; - } - .intro { - margin-bottom: 16px; - } - h3 { - font-weight: normal; - font-size: 22px; - line-height: 28px; - margin-top: 0; - margin-bottom: 4px; - } - p { - color: var(--secondary-text-color); - font-size: var(--mdc-typography-body2-font-size, 0.875rem); - margin-top: 0; - margin-bottom: 0; - } - `; - } + static styles = css` + .section { + border: 1px solid var(--divider-color); + border-radius: 8px; + box-sizing: border-box; + padding: 16px; + } + .intro { + margin-bottom: 16px; + } + h3 { + font-weight: normal; + font-size: 22px; + line-height: 28px; + margin-top: 0; + margin-bottom: 4px; + } + p { + color: var(--secondary-text-color); + font-size: var(--mdc-typography-body2-font-size, 0.875rem); + margin-top: 0; + margin-bottom: 0; + } + `; } declare global { diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts index 1fb3871614..0e69b0c9b5 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-conversation.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -121,32 +120,30 @@ export class AssistPipelineDetailConversation extends LitElement { this._supportedLanguages = ev.detail.value; } - static get styles(): CSSResultGroup { - return css` - .section { - border: 1px solid var(--divider-color); - border-radius: 8px; - box-sizing: border-box; - padding: 16px; - } - .intro { - margin-bottom: 16px; - } - h3 { - font-weight: normal; - font-size: 22px; - line-height: 28px; - margin-top: 0; - margin-bottom: 4px; - } - p { - color: var(--secondary-text-color); - font-size: var(--mdc-typography-body2-font-size, 0.875rem); - margin-top: 0; - margin-bottom: 0; - } - `; - } + static styles = css` + .section { + border: 1px solid var(--divider-color); + border-radius: 8px; + box-sizing: border-box; + padding: 16px; + } + .intro { + margin-bottom: 16px; + } + h3 { + font-weight: normal; + font-size: 22px; + line-height: 28px; + margin-top: 0; + margin-bottom: 4px; + } + p { + color: var(--secondary-text-color); + font-size: var(--mdc-typography-body2-font-size, 0.875rem); + margin-top: 0; + margin-bottom: 0; + } + `; } declare global { diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts index 6ae3f463d0..3836faa222 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-stt.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -81,32 +80,30 @@ export class AssistPipelineDetailSTT extends LitElement { this._supportedLanguages = ev.detail.value; } - static get styles(): CSSResultGroup { - return css` - .section { - border: 1px solid var(--divider-color); - border-radius: 8px; - box-sizing: border-box; - padding: 16px; - } - .intro { - margin-bottom: 16px; - } - h3 { - font-weight: normal; - font-size: 22px; - line-height: 28px; - margin-top: 0; - margin-bottom: 4px; - } - p { - color: var(--secondary-text-color); - font-size: var(--mdc-typography-body2-font-size, 0.875rem); - margin-top: 0; - margin-bottom: 0; - } - `; - } + static styles = css` + .section { + border: 1px solid var(--divider-color); + border-radius: 8px; + box-sizing: border-box; + padding: 16px; + } + .intro { + margin-bottom: 16px; + } + h3 { + font-weight: normal; + font-size: 22px; + line-height: 28px; + margin-top: 0; + margin-bottom: 4px; + } + p { + color: var(--secondary-text-color); + font-size: var(--mdc-typography-body2-font-size, 0.875rem); + margin-top: 0; + margin-bottom: 0; + } + `; } declare global { diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts index f3d7d01400..a8dc5cb6bb 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-tts.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -127,37 +126,35 @@ export class AssistPipelineDetailTTS extends LitElement { this._supportedLanguages = ev.detail.value; } - static get styles(): CSSResultGroup { - return css` - .section { - border: 1px solid var(--divider-color); - border-radius: 8px; - } - .content { - padding: 16px; - } - .intro { - margin-bottom: 16px; - } - h3 { - font-weight: normal; - font-size: 22px; - line-height: 28px; - margin-top: 0; - margin-bottom: 4px; - } - p { - color: var(--secondary-text-color); - font-size: var(--mdc-typography-body2-font-size, 0.875rem); - margin-top: 0; - margin-bottom: 0; - } - .footer { - border-top: 1px solid var(--divider-color); - padding: 8px 16px; - } - `; - } + static styles = css` + .section { + border: 1px solid var(--divider-color); + border-radius: 8px; + } + .content { + padding: 16px; + } + .intro { + margin-bottom: 16px; + } + h3 { + font-weight: normal; + font-size: 22px; + line-height: 28px; + margin-top: 0; + margin-bottom: 4px; + } + p { + color: var(--secondary-text-color); + font-size: var(--mdc-typography-body2-font-size, 0.875rem); + margin-top: 0; + margin-bottom: 0; + } + .footer { + border-top: 1px solid var(--divider-color); + padding: 8px 16px; + } + `; } declare global { diff --git a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts index d151abba21..549900b7fb 100644 --- a/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts +++ b/src/panels/config/voice-assistants/assist-pipeline-detail/assist-pipeline-detail-wakeword.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -133,36 +133,34 @@ export class AssistPipelineDetailWakeWord extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - .section { - border: 1px solid var(--divider-color); - border-radius: 8px; - } - .content { - padding: 16px; - } - .intro { - margin-bottom: 16px; - } - h3 { - font-weight: normal; - font-size: 22px; - line-height: 28px; - margin-top: 0; - margin-bottom: 4px; - } - p { - color: var(--secondary-text-color); - font-size: var(--mdc-typography-body2-font-size, 0.875rem); - margin-top: 0; - margin-bottom: 0; - } - a { - color: var(--primary-color); - } - `; - } + static styles = css` + .section { + border: 1px solid var(--divider-color); + border-radius: 8px; + } + .content { + padding: 16px; + } + .intro { + margin-bottom: 16px; + } + h3 { + font-weight: normal; + font-size: 22px; + line-height: 28px; + margin-top: 0; + margin-bottom: 4px; + } + p { + color: var(--secondary-text-color); + font-size: var(--mdc-typography-body2-font-size, 0.875rem); + margin-top: 0; + margin-bottom: 0; + } + a { + color: var(--primary-color); + } + `; } declare global { diff --git a/src/panels/config/voice-assistants/assist-pref.ts b/src/panels/config/voice-assistants/assist-pref.ts index 5406745e0d..4cffd08612 100644 --- a/src/panels/config/voice-assistants/assist-pref.ts +++ b/src/panels/config/voice-assistants/assist-pref.ts @@ -8,7 +8,7 @@ import { mdiStar, mdiTrashCan, } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -352,71 +352,69 @@ export class AssistPref extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - a { - color: var(--primary-color); - } - .header-actions { - position: absolute; - right: 0px; - inset-inline-end: 0px; - inset-inline-start: initial; - top: 24px; - display: flex; - flex-direction: row; - } - .header-actions .icon-link { - margin-top: -16px; - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - direction: var(--direction); - color: var(--secondary-text-color); - } - ha-list-item { - --mdc-list-item-meta-size: auto; - --mdc-list-item-meta-display: flex; - --mdc-list-side-padding-right: 8px; - --mdc-list-side-padding-left: 16px; - } + static styles = css` + a { + color: var(--primary-color); + } + .header-actions { + position: absolute; + right: 0px; + inset-inline-end: 0px; + inset-inline-start: initial; + top: 24px; + display: flex; + flex-direction: row; + } + .header-actions .icon-link { + margin-top: -16px; + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + direction: var(--direction); + color: var(--secondary-text-color); + } + ha-list-item { + --mdc-list-item-meta-size: auto; + --mdc-list-item-meta-display: flex; + --mdc-list-side-padding-right: 8px; + --mdc-list-side-padding-left: 16px; + } - ha-list-item.danger { - color: var(--error-color); - border-top: 1px solid var(--divider-color); - } + ha-list-item.danger { + color: var(--error-color); + border-top: 1px solid var(--divider-color); + } - ha-button-menu a { - text-decoration: none; - } + ha-button-menu a { + text-decoration: none; + } - ha-svg-icon { - color: currentColor; - width: 16px; - } + ha-svg-icon { + color: currentColor; + width: 16px; + } - .add { - margin: 0 16px 16px; - } - .card-actions { - display: flex; - } - .card-actions a { - text-decoration: none; - } - .card-header { - display: flex; - align-items: center; - padding-bottom: 0; - } - img { - height: 28px; - margin-right: 16px; - margin-inline-end: 16px; - margin-inline-start: initial; - } - `; - } + .add { + margin: 0 16px 16px; + } + .card-actions { + display: flex; + } + .card-actions a { + text-decoration: none; + } + .card-header { + display: flex; + align-items: center; + padding-bottom: 0; + } + img { + height: 28px; + margin-right: 16px; + margin-inline-end: 16px; + margin-inline-start: initial; + } + `; } declare global { diff --git a/src/panels/config/voice-assistants/cloud-alexa-pref.ts b/src/panels/config/voice-assistants/cloud-alexa-pref.ts index 89237c0f5a..daf86c8ed4 100644 --- a/src/panels/config/voice-assistants/cloud-alexa-pref.ts +++ b/src/panels/config/voice-assistants/cloud-alexa-pref.ts @@ -1,6 +1,5 @@ import "@material/mwc-button"; import { mdiHelpCircle } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -249,49 +248,47 @@ export class CloudAlexaPref extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - a { - color: var(--primary-color); - } - ha-settings-row { - padding: 0; - } - .header-actions { - position: absolute; - right: 24px; - inset-inline-end: 24px; - inset-inline-start: initial; - top: 24px; - display: flex; - flex-direction: row; - } - .header-actions .icon-link { - margin-top: -16px; - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - direction: var(--direction); - color: var(--secondary-text-color); - } - .card-actions { - display: flex; - } - .card-actions a { - text-decoration: none; - } - .card-header { - display: flex; - align-items: center; - } - img { - height: 28px; - margin-right: 16px; - margin-inline-end: 16px; - margin-inline-start: initial; - } - `; - } + static styles = css` + a { + color: var(--primary-color); + } + ha-settings-row { + padding: 0; + } + .header-actions { + position: absolute; + right: 24px; + inset-inline-end: 24px; + inset-inline-start: initial; + top: 24px; + display: flex; + flex-direction: row; + } + .header-actions .icon-link { + margin-top: -16px; + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + direction: var(--direction); + color: var(--secondary-text-color); + } + .card-actions { + display: flex; + } + .card-actions a { + text-decoration: none; + } + .card-header { + display: flex; + align-items: center; + } + img { + height: 28px; + margin-right: 16px; + margin-inline-end: 16px; + margin-inline-start: initial; + } + `; } declare global { diff --git a/src/panels/config/voice-assistants/cloud-discover.ts b/src/panels/config/voice-assistants/cloud-discover.ts index a770149e25..2142a911eb 100644 --- a/src/panels/config/voice-assistants/cloud-discover.ts +++ b/src/panels/config/voice-assistants/cloud-discover.ts @@ -1,5 +1,4 @@ import { mdiMicrophoneMessage, mdiOpenInNew } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-card"; @@ -114,101 +113,99 @@ export class CloudDiscover extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-card { - display: flex; - flex-direction: column; - } - .card-content { - padding: 24px 16px; - } - .card-actions { - display: flex; - justify-content: space-between; - } + static styles = css` + ha-card { + display: flex; + flex-direction: column; + } + .card-content { + padding: 24px 16px; + } + .card-actions { + display: flex; + justify-content: space-between; + } + .header { + font-weight: 400; + font-size: 28px; + line-height: 36px; + text-align: center; + max-width: 600px; + margin: 0 auto 8px auto; + } + @media (min-width: 800px) { .header { - font-weight: 400; - font-size: 28px; - line-height: 36px; - text-align: center; - max-width: 600px; - margin: 0 auto 8px auto; - } - @media (min-width: 800px) { - .header { - font-size: 32px; - line-height: 40px; - margin-bottom: 16px; - } + font-size: 32px; + line-height: 40px; + margin-bottom: 16px; } + } + .features { + display: grid; + grid-template-columns: auto; + grid-gap: 16px; + padding: 16px; + } + @media (min-width: 600px) { .features { - display: grid; - grid-template-columns: auto; - grid-gap: 16px; - padding: 16px; + grid-template-columns: repeat(2, 1fr); } - @media (min-width: 600px) { - .features { - grid-template-columns: repeat(2, 1fr); - } - } - .feature { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - margin-bottom: 16px; - } - .feature .logos { - margin-bottom: 16px; - } - .feature .logos > * { - width: 40px; - height: 40px; - margin: 0 4px; - } - .round-icon { - border-radius: 50%; - color: #6e41ab; - background-color: #e8dcf7; - display: flex; - align-items: center; - justify-content: center; - font-size: 24px; - } - .feature h2 { - font-weight: 500; - font-size: 16px; - line-height: 24px; - margin-top: 0; - margin-bottom: 8px; - } - .feature p { - font-weight: 400; - font-size: 14px; - line-height: 20px; - margin: 0; - } - .more { - display: flex; - align-items: center; - justify-content: center; - } - .more a { - text-decoration: none; - color: var(--primary-color); - font-weight: 500; - font-size: 14px; - } - .more a ha-svg-icon { - --mdc-icon-size: 16px; - } - .no-wrap { - white-space: nowrap; - } - `; - } + } + .feature { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + margin-bottom: 16px; + } + .feature .logos { + margin-bottom: 16px; + } + .feature .logos > * { + width: 40px; + height: 40px; + margin: 0 4px; + } + .round-icon { + border-radius: 50%; + color: #6e41ab; + background-color: #e8dcf7; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + } + .feature h2 { + font-weight: 500; + font-size: 16px; + line-height: 24px; + margin-top: 0; + margin-bottom: 8px; + } + .feature p { + font-weight: 400; + font-size: 14px; + line-height: 20px; + margin: 0; + } + .more { + display: flex; + align-items: center; + justify-content: center; + } + .more a { + text-decoration: none; + color: var(--primary-color); + font-weight: 500; + font-size: 14px; + } + .more a ha-svg-icon { + --mdc-icon-size: 16px; + } + .no-wrap { + white-space: nowrap; + } + `; } declare global { diff --git a/src/panels/config/voice-assistants/cloud-google-pref.ts b/src/panels/config/voice-assistants/cloud-google-pref.ts index f268829988..cae962e1ac 100644 --- a/src/panels/config/voice-assistants/cloud-google-pref.ts +++ b/src/panels/config/voice-assistants/cloud-google-pref.ts @@ -1,6 +1,5 @@ import "@material/mwc-button"; import { mdiHelpCircle } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -321,57 +320,55 @@ export class CloudGooglePref extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - a { - color: var(--primary-color); - } - .header-actions { - position: absolute; - right: 24px; - inset-inline-end: 24px; - inset-inline-start: initial; - top: 24px; - display: flex; - flex-direction: row; - } - .header-actions .icon-link { - margin-top: -16px; - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - direction: var(--direction); - color: var(--secondary-text-color); - } - ha-settings-row { - padding: 0; - } - ha-textfield { - width: 250px; - display: block; - margin-top: 8px; - } - .card-actions { - display: flex; - } - .card-actions a { - text-decoration: none; - } - .warning { - color: var(--error-color); - } - .card-header { - display: flex; - align-items: center; - } - img { - height: 28px; - margin-right: 16px; - margin-inline-end: 16px; - margin-inline-start: initial; - } - `; - } + static styles = css` + a { + color: var(--primary-color); + } + .header-actions { + position: absolute; + right: 24px; + inset-inline-end: 24px; + inset-inline-start: initial; + top: 24px; + display: flex; + flex-direction: row; + } + .header-actions .icon-link { + margin-top: -16px; + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + direction: var(--direction); + color: var(--secondary-text-color); + } + ha-settings-row { + padding: 0; + } + ha-textfield { + width: 250px; + display: block; + margin-top: 8px; + } + .card-actions { + display: flex; + } + .card-actions a { + text-decoration: none; + } + .warning { + color: var(--error-color); + } + .card-header { + display: flex; + align-items: center; + } + img { + height: 28px; + margin-right: 16px; + margin-inline-end: 16px; + margin-inline-start: initial; + } + `; } declare global { diff --git a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts index 26c4a88ac4..92f6d8b17c 100644 --- a/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts +++ b/src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts @@ -73,7 +73,7 @@ const renderProgress = ( hass: HomeAssistant, pipelineRun: PipelineRun, stage: PipelineRun["stage"], - start_suffix: string = "-start" + start_suffix = "-start" ) => { const startEvent = pipelineRun.events.find( (ev) => ev.type === `${stage}` + start_suffix @@ -148,7 +148,7 @@ export class AssistPipelineDebug extends LitElement { ) || "ready" : "ready"; - const messages: Array<{ from: string; text: string }> = []; + const messages: { from: string; text: string }[] = []; const userMessage = (this.pipelineRun.init_options && diff --git a/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts b/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts index 7438d782fd..4bb6f61ec5 100644 --- a/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts +++ b/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts @@ -1,6 +1,5 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiAlertCircle } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -76,29 +75,27 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - .container { - position: relative; - } - .logo { - position: relative; - height: 24px; - margin-right: 16px; - margin-inline-end: 16px; - margin-inline-start: initial; - } - .unsupported { - color: var(--error-color); - position: absolute; - --mdc-icon-size: 16px; - right: 10px; - top: -7px; - inset-inline-end: 10px; - inset-inline-start: initial; - } - `; - } + static styles = css` + .container { + position: relative; + } + .logo { + position: relative; + height: 24px; + margin-right: 16px; + margin-inline-end: 16px; + margin-inline-start: initial; + } + .unsupported { + color: var(--error-color); + position: absolute; + --mdc-icon-size: 16px; + right: 10px; + top: -7px; + inset-inline-end: 10px; + inset-inline-start: initial; + } + `; } declare global { diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index 935a32787f..14c95f4231 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -2,7 +2,7 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@material/mwc-list/mwc-list"; import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js"; import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -452,7 +452,6 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { showAlertDialog(this, { title: this.hass.localize("ui.panel.config.zone.can_not_edit"), text: this.hass.localize("ui.panel.config.zone.configured_in_yaml"), - confirm: () => {}, }); return; } @@ -538,60 +537,58 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { }); } - static get styles(): CSSResultGroup { - return css` - hass-loading-screen { - --app-header-background-color: var(--sidebar-background-color); - --app-header-text-color: var(--sidebar-text-color); - } - ha-list-item { - --mdc-list-item-meta-size: 48px; - } - a { - color: var(--primary-color); - } - ha-card { - margin: 16px auto; - overflow: hidden; - } - ha-icon, - ha-icon-button:not([disabled]) { - color: var(--secondary-text-color); - } - ha-icon-button { - --mdc-theme-text-disabled-on-light: var(--disabled-text-color); - } - .empty { - text-align: center; - padding: 8px; - } - .flex { - display: flex; - height: 100%; - } - .overflow { - height: 100%; - overflow: auto; - } - ha-locations-editor { - flex-grow: 1; - height: 100%; - } - .flex mwc-list { - padding-bottom: 64px; - } - .flex mwc-list, - .flex .empty { - border-left: 1px solid var(--divider-color); - width: 250px; - min-height: 100%; - box-sizing: border-box; - } - ha-card { - margin-bottom: 100px; - } - `; - } + static styles = css` + hass-loading-screen { + --app-header-background-color: var(--sidebar-background-color); + --app-header-text-color: var(--sidebar-text-color); + } + ha-list-item { + --mdc-list-item-meta-size: 48px; + } + a { + color: var(--primary-color); + } + ha-card { + margin: 16px auto; + overflow: hidden; + } + ha-icon, + ha-icon-button:not([disabled]) { + color: var(--secondary-text-color); + } + ha-icon-button { + --mdc-theme-text-disabled-on-light: var(--disabled-text-color); + } + .empty { + text-align: center; + padding: 8px; + } + .flex { + display: flex; + height: 100%; + } + .overflow { + height: 100%; + overflow: auto; + } + ha-locations-editor { + flex-grow: 1; + height: 100%; + } + .flex mwc-list { + padding-bottom: 64px; + } + .flex mwc-list, + .flex .empty { + border-left: 1px solid var(--divider-color); + width: 250px; + min-height: 100%; + box-sizing: border-box; + } + ha-card { + margin-bottom: 100px; + } + `; } declare global { diff --git a/src/panels/developer-tools/assist/developer-tools-assist.ts b/src/panels/developer-tools/assist/developer-tools-assist.ts index ad541bb8be..a5c923b287 100644 --- a/src/panels/developer-tools/assist/developer-tools-assist.ts +++ b/src/panels/developer-tools/assist/developer-tools-assist.ts @@ -19,11 +19,11 @@ import { haStyle } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import { fileDownload } from "../../../util/file_download"; -type SentenceParsingResult = { +interface SentenceParsingResult { sentence: string; language: string; result: AssitDebugResult | null; -}; +} @customElement("developer-tools-assist") class HaPanelDevAssist extends SubscribeMixin(LitElement) { diff --git a/src/panels/developer-tools/event/developer-tools-event.ts b/src/panels/developer-tools/event/developer-tools-event.ts index 0c56e20204..abad0c3701 100644 --- a/src/panels/developer-tools/event/developer-tools-event.ts +++ b/src/panels/developer-tools/event/developer-tools-event.ts @@ -19,11 +19,11 @@ class HaPanelDevEvent extends LitElement { @property({ type: Boolean }) public narrow = false; - @state() private _eventType: string = ""; + @state() private _eventType = ""; @state() private _eventData: object = {}; - @state() private _isValid: boolean = true; + @state() private _isValid = true; protected render(): TemplateResult { return html` diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts index bc6a19a12d..fb429b8a83 100644 --- a/src/panels/developer-tools/event/event-subscribe-card.ts +++ b/src/panels/developer-tools/event/event-subscribe-card.ts @@ -1,5 +1,5 @@ import type { HassEvent } from "home-assistant-js-websocket"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -19,10 +19,10 @@ class EventSubscribeCard extends LitElement { @state() private _subscribed?: () => void; - @state() private _events: Array<{ + @state() private _events: { id: number; event: HassEvent; - }> = []; + }[] = []; @state() private _error?: string; @@ -156,33 +156,31 @@ class EventSubscribeCard extends LitElement { this._error = undefined; } - static get styles(): CSSResultGroup { - return css` - ha-textfield { - display: block; - margin-bottom: 16px; - } - .error-message { - margin-top: 8px; - } - .event { - border-top: 1px solid var(--divider-color); - padding-top: 8px; - padding-bottom: 8px; - margin: 16px 0; - } - .event:last-child { - border-bottom: 0; - margin-bottom: 0; - } - pre { - font-family: var(--code-font-family, monospace); - } - ha-card { - margin-bottom: 5px; - } - `; - } + static styles = css` + ha-textfield { + display: block; + margin-bottom: 16px; + } + .error-message { + margin-top: 8px; + } + .event { + border-top: 1px solid var(--divider-color); + padding-top: 8px; + padding-bottom: 8px; + margin: 16px 0; + } + .event:last-child { + border-bottom: 0; + margin-bottom: 0; + } + pre { + font-family: var(--code-font-family, monospace); + } + ha-card { + margin-bottom: 5px; + } + `; } declare global { diff --git a/src/panels/developer-tools/event/events-list.ts b/src/panels/developer-tools/event/events-list.ts index fb3af7bb0f..f0f61f8369 100644 --- a/src/panels/developer-tools/event/events-list.ts +++ b/src/panels/developer-tools/event/events-list.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { stringCompare } from "../../../common/string/compare"; @@ -56,23 +56,21 @@ class EventsList extends LitElement { fireEvent(this, "event-selected", { eventType: event }); } - static get styles(): CSSResultGroup { - return css` - ul { - margin: 0; - padding: 0; - } + static styles = css` + ul { + margin: 0; + padding: 0; + } - li { - list-style: none; - line-height: 2em; - } + li { + list-style: none; + line-height: 2em; + } - a { - color: var(--primary-color); - } - `; - } + a { + color: var(--primary-color); + } + `; } declare global { diff --git a/src/panels/developer-tools/state/developer-tools-state.ts b/src/panels/developer-tools/state/developer-tools-state.ts index d9204e0bdf..3137674b23 100644 --- a/src/panels/developer-tools/state/developer-tools-state.ts +++ b/src/panels/developer-tools/state/developer-tools-state.ts @@ -38,27 +38,26 @@ import type { HomeAssistant } from "../../../types"; class HaPanelDevState extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @state() private _error: string = ""; + @state() private _error = ""; - @state() private _entityId: string = ""; + @state() private _entityId = ""; - @state() private _entityFilter: string = ""; + @state() private _entityFilter = ""; - @state() private _stateFilter: string = ""; + @state() private _stateFilter = ""; - @state() private _attributeFilter: string = ""; + @state() private _attributeFilter = ""; @state() private _entity?: HassEntity; - @state() private _state: string = ""; + @state() private _state = ""; - @state() private _stateAttributes: HassEntityAttributeBase & { - [key: string]: any; - } = {}; + @state() private _stateAttributes: HassEntityAttributeBase & + Record = {}; @state() private _expanded = false; - @state() private _validJSON: boolean = true; + @state() private _validJSON = true; @storage({ key: "devToolsShowAttributes", diff --git a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts index 7b4b05944d..47705baf77 100644 --- a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts +++ b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts @@ -145,8 +145,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement { this._params!.statistic ); const rows: TemplateResult[] = []; - for (let i = 0; i < data.length; i++) { - const stat = data[i]; + for (const stat of data) { const growth = Math.round(stat.change! * 100) / 100; rows.push(html` { + return { now: now, startTime: this.time.range[0], endTime: this.time.range[1], purgeBeforePythonTime: undefined, - }; + } as LogbookTimePeriod; } if ("recent" in this.time) { const purgeBeforePythonTime = findStartOfRecentTime( now, this.time.recent ); - return { + return { now: now, startTime: new Date(purgeBeforePythonTime * 1000), // end streaming one year from now endTime: new Date(now.getTime() + 86400 * 365 * 1000), purgeBeforePythonTime: findStartOfRecentTime(now, this.time.recent), - }; + } as LogbookTimePeriod; } throw new Error("Unexpected time specified"); } diff --git a/src/panels/lovelace/badges/hui-entity-badge.ts b/src/panels/lovelace/badges/hui-entity-badge.ts index 093e8f92af..b7d04e1a30 100644 --- a/src/panels/lovelace/badges/hui-entity-badge.ts +++ b/src/panels/lovelace/badges/hui-entity-badge.ts @@ -1,6 +1,5 @@ import { mdiAlertCircle } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -237,19 +236,17 @@ export class HuiEntityBadge extends LitElement implements LovelaceBadge { handleAction(this, this.hass!, this._config!, ev.detail.action!); } - static get styles(): CSSResultGroup { - return css` - ha-badge { - --badge-color: var(--state-inactive-color); - } - ha-badge.error { - --badge-color: var(--red-color); - } - ha-badge.active { - --badge-color: var(--primary-color); - } - `; - } + static styles = css` + ha-badge { + --badge-color: var(--state-inactive-color); + } + ha-badge.error { + --badge-color: var(--red-color); + } + ha-badge.active { + --badge-color: var(--primary-color); + } + `; } declare global { diff --git a/src/panels/lovelace/badges/hui-error-badge.ts b/src/panels/lovelace/badges/hui-error-badge.ts index c9eadc224f..329819a6d0 100644 --- a/src/panels/lovelace/badges/hui-error-badge.ts +++ b/src/panels/lovelace/badges/hui-error-badge.ts @@ -1,6 +1,5 @@ import { mdiAlertCircle } from "@mdi/js"; import { dump } from "js-yaml"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import "../../../components/ha-badge"; @@ -67,25 +66,23 @@ export class HuiErrorBadge extends LitElement implements LovelaceBadge { `; } - static get styles(): CSSResultGroup { - return css` - ha-badge { - --badge-color: var(--error-color); - --ha-card-border-color: var(--error-color); - } - .content { - max-width: 100px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - pre { - font-family: var(--code-font-family, monospace); - white-space: break-spaces; - user-select: text; - } - `; - } + static styles = css` + ha-badge { + --badge-color: var(--error-color); + --ha-card-border-color: var(--error-color); + } + .content { + max-width: 100px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + pre { + font-family: var(--code-font-family, monospace); + white-space: break-spaces; + user-select: text; + } + `; } declare global { diff --git a/src/panels/lovelace/badges/hui-view-badges.ts b/src/panels/lovelace/badges/hui-view-badges.ts index a8b609e5f0..ee16386cc3 100644 --- a/src/panels/lovelace/badges/hui-view-badges.ts +++ b/src/panels/lovelace/badges/hui-view-badges.ts @@ -1,5 +1,5 @@ import { mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -163,55 +163,53 @@ export class HuiViewBadges extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host([hidden]) { - display: none !important; - } + static styles = css` + :host([hidden]) { + display: none !important; + } - .badges { - display: flex; - align-items: flex-start; - flex-wrap: wrap; - justify-content: center; - gap: 8px; - margin: 0; - } + .badges { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + justify-content: center; + gap: 8px; + margin: 0; + } - hui-badge-edit-mode { - display: block; - position: relative; - min-width: 36px; - min-height: 36px; - } + hui-badge-edit-mode { + display: block; + position: relative; + min-width: 36px; + min-height: 36px; + } - .add { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - gap: 8px; - height: 36px; - padding: 6px 20px 6px 20px; - box-sizing: border-box; - width: auto; - border-radius: 18px; - background-color: transparent; - border-width: 2px; - border-style: dashed; - border-color: var(--primary-color); - --mdc-icon-size: 18px; - cursor: pointer; - color: var(--primary-text-color); - --ha-ripple-color: var(--primary-color); - --ha-ripple-hover-opacity: 0.04; - --ha-ripple-pressed-opacity: 0.12; - } - .add:focus { - border-style: solid; - } - `; - } + .add { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + height: 36px; + padding: 6px 20px 6px 20px; + box-sizing: border-box; + width: auto; + border-radius: 18px; + background-color: transparent; + border-width: 2px; + border-style: dashed; + border-color: var(--primary-color); + --mdc-icon-size: 18px; + cursor: pointer; + color: var(--primary-text-color); + --ha-ripple-color: var(--primary-color); + --ha-ripple-hover-opacity: 0.04; + --ha-ripple-pressed-opacity: 0.12; + } + .add:focus { + border-style: solid; + } + `; } declare global { diff --git a/src/panels/lovelace/badges/types.ts b/src/panels/lovelace/badges/types.ts index 6a5b479943..ef98a7e24f 100644 --- a/src/panels/lovelace/badges/types.ts +++ b/src/panels/lovelace/badges/types.ts @@ -7,9 +7,9 @@ import type { DisplayType } from "./hui-entity-badge"; export interface EntityFilterBadgeConfig extends LovelaceBadgeConfig { type: "entity-filter"; - entities: Array; - state_filter?: Array; - conditions?: Array; + entities: (EntityFilterEntityConfig | string)[]; + state_filter?: LegacyStateFilter[]; + conditions?: Condition[]; } export interface ErrorBadgeConfig extends LovelaceBadgeConfig { diff --git a/src/panels/lovelace/card-features/hui-card-features.ts b/src/panels/lovelace/card-features/hui-card-features.ts index c9d1569568..49e578a697 100644 --- a/src/panels/lovelace/card-features/hui-card-features.ts +++ b/src/panels/lovelace/card-features/hui-card-features.ts @@ -1,5 +1,4 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import type { HomeAssistant } from "../../../types"; @@ -36,31 +35,29 @@ export class HuiCardFeatures extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - --feature-color: var(--state-icon-color); - --feature-padding: 12px; - --feature-height: 42px; - --feature-border-radius: 12px; - --feature-button-spacing: 12px; - position: relative; - width: 100%; - } - .container { - position: relative; - display: flex; - flex-direction: column; - padding: var(--feature-padding); - padding-top: 0px; - gap: var(--feature-padding); - width: 100%; - height: 100%; - box-sizing: border-box; - justify-content: space-evenly; - } - `; - } + static styles = css` + :host { + --feature-color: var(--state-icon-color); + --feature-padding: 12px; + --feature-height: 42px; + --feature-border-radius: 12px; + --feature-button-spacing: 12px; + position: relative; + width: 100%; + } + .container { + position: relative; + display: flex; + flex-direction: column; + padding: var(--feature-padding); + padding-top: 0px; + gap: var(--feature-padding); + width: 100%; + height: 100%; + box-sizing: border-box; + justify-content: space-evenly; + } + `; } declare global { diff --git a/src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts b/src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts index f077112c17..f4650a66ad 100644 --- a/src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts +++ b/src/panels/lovelace/card-features/hui-target-humidity-card-feature.ts @@ -49,9 +49,7 @@ class HuiTargetHumidityCardFeature } } - private get _step() { - return 1; - } + private _step = 1; private get _min() { return this.stateObj!.attributes.min_humidity ?? 0; diff --git a/src/panels/lovelace/card-features/types.ts b/src/panels/lovelace/card-features/types.ts index 2a031af808..24349dfe31 100644 --- a/src/panels/lovelace/card-features/types.ts +++ b/src/panels/lovelace/card-features/types.ts @@ -174,6 +174,6 @@ export type LovelaceCardFeatureConfig = | VacuumCommandsCardFeatureConfig | WaterHeaterOperationModesCardFeatureConfig; -export type LovelaceCardFeatureContext = { +export interface LovelaceCardFeatureContext { entity_id?: string; -}; +} diff --git a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts index 84fafa3336..626418032f 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts @@ -1,7 +1,7 @@ import { mdiInformation } from "@mdi/js"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -179,52 +179,50 @@ class HuiEnergyCarbonGaugeCard return severityMap.normal; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - overflow: hidden; - padding: 16px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - box-sizing: border-box; - } + static styles = css` + ha-card { + height: 100%; + overflow: hidden; + padding: 16px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + box-sizing: border-box; + } - ha-gauge { - width: 100%; - max-width: 250px; - } + ha-gauge { + width: 100%; + max-width: 250px; + } - .name { - text-align: center; - line-height: initial; - color: var(--primary-text-color); - width: 100%; - font-size: 15px; - margin-top: 8px; - } + .name { + text-align: center; + line-height: initial; + color: var(--primary-text-color); + width: 100%; + font-size: 15px; + margin-top: 8px; + } - ha-svg-icon { - position: absolute; - right: 4px; - inset-inline-end: 4px; - inset-inline-start: initial; - top: 4px; - color: var(--secondary-text-color); - } - simple-tooltip > span { - font-size: 12px; - line-height: 12px; - } - simple-tooltip { - width: 80%; - max-width: 250px; - top: 8px !important; - } - `; - } + ha-svg-icon { + position: absolute; + right: 4px; + inset-inline-end: 4px; + inset-inline-start: initial; + top: 4px; + color: var(--secondary-text-color); + } + simple-tooltip > span { + font-size: 12px; + line-height: 12px; + } + simple-tooltip { + width: 80%; + max-width: 250px; + top: 8px !important; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts index ada941bbe3..6e7c58772d 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-compare-card.ts @@ -1,6 +1,6 @@ import { differenceInDays, endOfDay } from "date-fns"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { formatDate } from "../../../../common/datetime/format_date"; @@ -117,13 +117,11 @@ export class HuiEnergyCompareCard energyCollection.refresh(); } - static get styles(): CSSResultGroup { - return css` - mwc-button { - width: max-content; - } - `; - } + static styles = css` + mwc-button { + width: max-content; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts b/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts index 5e021d53da..ca7440b93c 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-date-selection-card.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../../components/ha-card"; @@ -57,16 +57,14 @@ export class HuiEnergyDateSelectionCard `; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - } - `; - } + static styles = css` + ha-card { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts index bb27c9e0da..ba78c2a259 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts @@ -6,7 +6,7 @@ import type { } from "chart.js"; import { endOfToday, startOfToday } from "date-fns"; import type { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -356,7 +356,7 @@ export class HuiEnergyDevicesDetailGraphCard consumptionData, compare: boolean ): { dataset; datasetExtra } { - const totalDeviceConsumption: { [start: number]: number } = {}; + const totalDeviceConsumption: Record = {}; processedData.forEach((device) => { device.data.forEach((datapoint) => { @@ -477,19 +477,17 @@ export class HuiEnergyDevicesDetailGraphCard return { data, dataExtras }; } - static get styles(): CSSResultGroup { - return css` - .card-header { - padding-bottom: 0; - } - .content { - padding: 16px; - } - .has-header { - padding-top: 0; - } - `; - } + static styles = css` + .card-header { + padding-bottom: 0; + } + .content { + padding: 16px; + } + .has-header { + padding-top: 0; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts index a776cef506..f6f493b267 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts @@ -7,7 +7,7 @@ import type { } from "chart.js"; import { getRelativePosition } from "chart.js/helpers"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -189,11 +189,11 @@ export class HuiEnergyDevicesGraphCard const data = energyData.stats; const compareData = energyData.statsCompare; - const chartData: Array>["data"]> = - []; - const chartDataCompare: Array< - ChartDataset<"bar", ParsedDataType<"bar">>["data"] - > = []; + const chartData: ChartDataset<"bar", ParsedDataType<"bar">>["data"][] = []; + const chartDataCompare: ChartDataset< + "bar", + ParsedDataType<"bar"> + >["data"][] = []; const borderColor: string[] = []; const borderColorCompare: string[] = []; const backgroundColor: string[] = []; @@ -281,22 +281,20 @@ export class HuiEnergyDevicesGraphCard this._chart?.updateChart("none"); } - static get styles(): CSSResultGroup { - return css` - .card-header { - padding-bottom: 0; - } - .content { - padding: 16px; - } - .has-header { - padding-top: 0; - } - ha-chart-base { - --chart-max-height: none; - } - `; - } + static styles = css` + .card-header { + padding-bottom: 0; + } + .content { + padding: 16px; + } + .has-header { + padding-top: 0; + } + ha-chart-base { + --chart-max-height: none; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts index 3c23f2fb94..30cebd3d12 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts @@ -6,7 +6,7 @@ import type { } from "chart.js"; import { endOfToday, isToday, startOfToday } from "date-fns"; import type { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -308,37 +308,35 @@ export class HuiEnergyGasGraphCard return data; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - } - .card-header { - padding-bottom: 0; - } - .content { - padding: 16px; - } - .has-header { - padding-top: 0; - } - .no-data { - position: absolute; - height: 100%; - top: 0; - left: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - padding: 20%; - margin-left: 32px; - margin-inline-start: 32px; - margin-inline-end: initial; - box-sizing: border-box; - } - `; - } + static styles = css` + ha-card { + height: 100%; + } + .card-header { + padding-bottom: 0; + } + .content { + padding: 16px; + } + .has-header { + padding-top: 0; + } + .no-data { + position: absolute; + height: 100%; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + padding: 20%; + margin-left: 32px; + margin-inline-start: 32px; + margin-inline-end: initial; + box-sizing: border-box; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts index 83af78a7be..761a1a2dc9 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts @@ -1,7 +1,7 @@ import { mdiInformation } from "@mdi/js"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { formatNumber } from "../../../../common/number/format_number"; @@ -155,53 +155,51 @@ class HuiEnergyGridGaugeCard `; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - overflow: hidden; - padding: 16px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - box-sizing: border-box; - } + static styles = css` + ha-card { + height: 100%; + overflow: hidden; + padding: 16px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + box-sizing: border-box; + } - ha-gauge { - width: 100%; - max-width: 250px; - direction: ltr; - } + ha-gauge { + width: 100%; + max-width: 250px; + direction: ltr; + } - .name { - text-align: center; - line-height: initial; - color: var(--primary-text-color); - width: 100%; - font-size: 15px; - margin-top: 8px; - } + .name { + text-align: center; + line-height: initial; + color: var(--primary-text-color); + width: 100%; + font-size: 15px; + margin-top: 8px; + } - ha-svg-icon { - position: absolute; - right: 4px; - inset-inline-end: 4px; - inset-inline-start: initial; - top: 4px; - color: var(--secondary-text-color); - } - simple-tooltip > span { - font-size: 12px; - line-height: 12px; - } - simple-tooltip { - width: 80%; - max-width: 250px; - top: 8px !important; - } - `; - } + ha-svg-icon { + position: absolute; + right: 4px; + inset-inline-end: 4px; + inset-inline-start: initial; + top: 4px; + color: var(--secondary-text-color); + } + simple-tooltip > span { + font-size: 12px; + line-height: 12px; + } + simple-tooltip { + width: 80%; + max-width: 250px; + top: 8px !important; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts index 98995134b7..cfc6c2d84b 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-self-sufficiency-gauge-card.ts @@ -1,7 +1,7 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiInformation } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -218,53 +218,51 @@ class HuiEnergySelfSufficiencyGaugeCard return severityMap.normal; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - overflow: hidden; - padding: 16px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - box-sizing: border-box; - } + static styles = css` + ha-card { + height: 100%; + overflow: hidden; + padding: 16px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + box-sizing: border-box; + } - ha-gauge { - width: 100%; - max-width: 250px; - direction: ltr; - } + ha-gauge { + width: 100%; + max-width: 250px; + direction: ltr; + } - .name { - text-align: center; - line-height: initial; - color: var(--primary-text-color); - width: 100%; - font-size: 15px; - margin-top: 8px; - } + .name { + text-align: center; + line-height: initial; + color: var(--primary-text-color); + width: 100%; + font-size: 15px; + margin-top: 8px; + } - ha-svg-icon { - position: absolute; - right: 4px; - inset-inline-end: 4px; - inset-inline-start: initial; - top: 4px; - color: var(--secondary-text-color); - } - simple-tooltip > span { - font-size: 12px; - line-height: 12px; - } - simple-tooltip { - width: 80%; - max-width: 250px; - top: 8px !important; - } - `; - } + ha-svg-icon { + position: absolute; + right: 4px; + inset-inline-end: 4px; + inset-inline-start: initial; + top: 4px; + color: var(--secondary-text-color); + } + simple-tooltip > span { + font-size: 12px; + line-height: 12px; + } + simple-tooltip { + width: 80%; + max-width: 250px; + top: 8px !important; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts index 9b18724c0f..64db0b50c0 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts @@ -1,7 +1,7 @@ import { mdiInformation } from "@mdi/js"; import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -157,53 +157,51 @@ class HuiEnergySolarGaugeCard return severityMap.normal; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - overflow: hidden; - padding: 16px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - box-sizing: border-box; - } + static styles = css` + ha-card { + height: 100%; + overflow: hidden; + padding: 16px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + box-sizing: border-box; + } - ha-gauge { - width: 100%; - max-width: 250px; - direction: ltr; - } + ha-gauge { + width: 100%; + max-width: 250px; + direction: ltr; + } - .name { - text-align: center; - line-height: initial; - color: var(--primary-text-color); - width: 100%; - font-size: 15px; - margin-top: 8px; - } + .name { + text-align: center; + line-height: initial; + color: var(--primary-text-color); + width: 100%; + font-size: 15px; + margin-top: 8px; + } - ha-svg-icon { - position: absolute; - right: 4px; - inset-inline-end: 4px; - inset-inline-start: initial; - top: 4px; - color: var(--secondary-text-color); - } - simple-tooltip > span { - font-size: 12px; - line-height: 12px; - } - simple-tooltip { - width: 80%; - max-width: 250px; - top: 8px !important; - } - `; - } + ha-svg-icon { + position: absolute; + right: 4px; + inset-inline-end: 4px; + inset-inline-start: initial; + top: 4px; + color: var(--secondary-text-color); + } + simple-tooltip > span { + font-size: 12px; + line-height: 12px; + } + simple-tooltip { + width: 80%; + max-width: 250px; + top: 8px !important; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts index 1137345d45..d8b4699e94 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts @@ -6,7 +6,7 @@ import type { } from "chart.js"; import { differenceInDays, endOfToday, isToday, startOfToday } from "date-fns"; import type { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -425,37 +425,35 @@ export class HuiEnergySolarGraphCard return data; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - } - .card-header { - padding-bottom: 0; - } - .content { - padding: 16px; - } - .has-header { - padding-top: 0; - } - .no-data { - position: absolute; - height: 100%; - top: 0; - left: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - padding: 20%; - margin-left: 32px; - margin-inline-start: 32px; - margin-inline-end: initial; - box-sizing: border-box; - } - `; - } + static styles = css` + ha-card { + height: 100%; + } + .card-header { + padding-bottom: 0; + } + .content { + padding: 16px; + } + .has-header { + padding-top: 0; + } + .no-data { + position: absolute; + height: 100%; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + padding: 20%; + margin-left: 32px; + margin-inline-start: 32px; + margin-inline-end: initial; + box-sizing: border-box; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts index b6b8243a94..6dba19c24c 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts @@ -6,7 +6,7 @@ import type { } from "chart.js"; import { endOfToday, isToday, startOfToday } from "date-fns"; import type { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -352,20 +352,20 @@ export class HuiEnergyUsageGraphCard const data: ChartDataset<"bar", ScatterDataPoint[]>[] = []; const combinedData: { - to_grid?: { [statId: string]: { [start: number]: number } }; - to_battery?: { [statId: string]: { [start: number]: number } }; - from_grid?: { [statId: string]: { [start: number]: number } }; - used_grid?: { [statId: string]: { [start: number]: number } }; - used_solar?: { [statId: string]: { [start: number]: number } }; - used_battery?: { [statId: string]: { [start: number]: number } }; + to_grid?: Record>; + to_battery?: Record>; + from_grid?: Record>; + used_grid?: Record>; + used_solar?: Record>; + used_battery?: Record>; } = {}; const summedData: { - to_grid?: { [start: number]: number }; - from_grid?: { [start: number]: number }; - to_battery?: { [start: number]: number }; - from_battery?: { [start: number]: number }; - solar?: { [start: number]: number }; + to_grid?: Record; + from_grid?: Record; + to_battery?: Record; + from_battery?: Record; + solar?: Record; } = {}; let pointEndTime; @@ -378,8 +378,8 @@ export class HuiEnergyUsageGraphCard "from_battery", ].includes(key); const add = !["solar", "from_battery"].includes(key); - const totalStats: { [start: number]: number } = {}; - const sets: { [statId: string]: { [start: number]: number } } = {}; + const totalStats: Record = {}; + const sets: Record> = {}; statIds!.forEach((id) => { const stats = statistics[id]; if (!stats) { @@ -552,37 +552,35 @@ export class HuiEnergyUsageGraphCard return data; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - } - .card-header { - padding-bottom: 0; - } - .content { - padding: 16px; - } - .has-header { - padding-top: 0; - } - .no-data { - position: absolute; - height: 100%; - top: 0; - left: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - padding: 20%; - margin-left: 32px; - margin-inline-start: 32px; - margin-inline-end: initial; - box-sizing: border-box; - } - `; - } + static styles = css` + ha-card { + height: 100%; + } + .card-header { + padding-bottom: 0; + } + .content { + padding: 16px; + } + .has-header { + padding-top: 0; + } + .no-data { + position: absolute; + height: 100%; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + padding: 20%; + margin-left: 32px; + margin-inline-start: 32px; + margin-inline-end: initial; + box-sizing: border-box; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts index a37ea179c5..d6cc800d34 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts @@ -6,7 +6,7 @@ import type { } from "chart.js"; import { endOfToday, isToday, startOfToday } from "date-fns"; import type { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -306,37 +306,35 @@ export class HuiEnergyWaterGraphCard return data; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - } - .card-header { - padding-bottom: 0; - } - .content { - padding: 16px; - } - .has-header { - padding-top: 0; - } - .no-data { - position: absolute; - height: 100%; - top: 0; - left: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - padding: 20%; - margin-left: 32px; - margin-inline-start: 32px; - margin-inline-end: initial; - box-sizing: border-box; - } - `; - } + static styles = css` + ha-card { + height: 100%; + } + .card-header { + padding-bottom: 0; + } + .content { + padding: 16px; + } + .has-header { + padding-top: 0; + } + .no-data { + position: absolute; + height: 100%; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; + align-items: center; + padding: 20%; + margin-left: 32px; + margin-inline-start: 32px; + margin-inline-end: initial; + box-sizing: border-box; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index 5ab9b68801..9eebb8a0ce 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -1,5 +1,5 @@ import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -348,103 +348,101 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { }); } - static get styles(): CSSResultGroup { - return css` - ha-card { - padding-bottom: 16px; - position: relative; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - box-sizing: border-box; - --alarm-state-color: var(--state-inactive-color); - } + static styles = css` + ha-card { + padding-bottom: 16px; + position: relative; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + box-sizing: border-box; + --alarm-state-color: var(--state-inactive-color); + } - ha-assist-chip { - --ha-assist-chip-filled-container-color: var(--alarm-state-color); - --primary-text-color: var(--text-primary-color); - } + ha-assist-chip { + --ha-assist-chip-filled-container-color: var(--alarm-state-color); + --primary-text-color: var(--text-primary-color); + } - .card-header { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - box-sizing: border-box; - } + .card-header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + box-sizing: border-box; + } - .triggered, - .arming, - .pending { - animation: pulse 1s infinite; - } + .triggered, + .arming, + .pending { + animation: pulse 1s infinite; + } - @keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } + @keyframes pulse { + 0% { + opacity: 1; } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } + } - ha-textfield { - display: block; - margin: 8px; - max-width: 150px; - text-align: center; - } + ha-textfield { + display: block; + margin: 8px; + max-width: 150px; + text-align: center; + } - .state { - margin-left: 16px; - margin-inline-start: 16px; - margin-inline-end: initial; - position: relative; - bottom: 16px; - color: var(--alarm-state-color); - animation: none; - } + .state { + margin-left: 16px; + margin-inline-start: 16px; + margin-inline-end: initial; + position: relative; + bottom: 16px; + color: var(--alarm-state-color); + animation: none; + } - #keypad { - display: flex; - justify-content: center; - flex-wrap: wrap; - margin: auto; - width: 100%; - max-width: 300px; - direction: ltr; - } + #keypad { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin: auto; + width: 100%; + max-width: 300px; + direction: ltr; + } - #keypad mwc-button { - padding: 8px; - width: 30%; - box-sizing: border-box; - } + #keypad mwc-button { + padding: 8px; + width: 30%; + box-sizing: border-box; + } - .actions { - margin: 0; - display: flex; - flex-wrap: wrap; - justify-content: center; - } + .actions { + margin: 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + } - .actions mwc-button { - margin: 0 4px 4px; - } + .actions mwc-button { + margin: 0 4px 4px; + } - mwc-button#disarm { - color: var(--error-color); - } + mwc-button#disarm { + color: var(--error-color); + } - mwc-button.numberkey { - --mdc-typography-button-font-size: var(--keypad-font-size, 0.875rem); - } - `; - } + mwc-button.numberkey { + --mdc-typography-button-font-size: var(--keypad-font-size, 0.875rem); + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-area-card.ts b/src/panels/lovelace/cards/hui-area-card.ts index e8c0eb8cea..af2f82fbeb 100644 --- a/src/panels/lovelace/cards/hui-area-card.ts +++ b/src/panels/lovelace/cards/hui-area-card.ts @@ -9,7 +9,7 @@ import { mdiWaterAlert, } from "@mdi/js"; import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -104,7 +104,7 @@ export class HuiAreaCard @state() private _areas?: AreaRegistryEntry[]; - private _deviceClasses: { [key: string]: string[] } = DEVICE_CLASSES; + private _deviceClasses: Record = DEVICE_CLASSES; private _ratio: { w: number; @@ -116,7 +116,7 @@ export class HuiAreaCard areaId: string, devicesInArea: Set, registryEntities: EntityRegistryEntry[], - deviceClasses: { [key: string]: string[] }, + deviceClasses: Record, states: HomeAssistant["states"] ) => { const entitiesInArea = registryEntities @@ -130,7 +130,7 @@ export class HuiAreaCard ) .map((entry) => entry.entity_id); - const entitiesByDomain: { [domain: string]: HassEntity[] } = {}; + const entitiesByDomain: Record = {}; for (const entity of entitiesInArea) { const domain = computeDomain(entity); @@ -542,127 +542,125 @@ export class HuiAreaCard }; } - static get styles(): CSSResultGroup { - return css` - ha-card { - overflow: hidden; - position: relative; - background-size: cover; - height: 100%; - } + static styles = css` + ha-card { + overflow: hidden; + position: relative; + background-size: cover; + height: 100%; + } - .container { - display: flex; - flex-direction: column; - justify-content: space-between; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient( - 0, - rgba(33, 33, 33, 0.9) 0%, - rgba(33, 33, 33, 0) 45% - ); - } + .container { + display: flex; + flex-direction: column; + justify-content: space-between; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: linear-gradient( + 0, + rgba(33, 33, 33, 0.9) 0%, + rgba(33, 33, 33, 0) 45% + ); + } - ha-card:not(.image) .container::before { - position: absolute; - content: ""; - width: 100%; - height: 100%; - background-color: var(--sidebar-selected-icon-color); - opacity: 0.12; - } + ha-card:not(.image) .container::before { + position: absolute; + content: ""; + width: 100%; + height: 100%; + background-color: var(--sidebar-selected-icon-color); + opacity: 0.12; + } - .image hui-image { - height: 100%; - } + .image hui-image { + height: 100%; + } - .icon-container { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: center; - } + .icon-container { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + } - .icon-container ha-icon { - --mdc-icon-size: 60px; - color: var(--sidebar-selected-icon-color); - } + .icon-container ha-icon { + --mdc-icon-size: 60px; + color: var(--sidebar-selected-icon-color); + } - .sensors { - color: #e3e3e3; - font-size: 16px; - --mdc-icon-size: 24px; - opacity: 0.6; - margin-top: 8px; - } + .sensors { + color: #e3e3e3; + font-size: 16px; + --mdc-icon-size: 24px; + opacity: 0.6; + margin-top: 8px; + } - .sensor { - white-space: nowrap; - float: left; - margin-right: 4px; - margin-inline-end: 4px; - margin-inline-start: initial; - } + .sensor { + white-space: nowrap; + float: left; + margin-right: 4px; + margin-inline-end: 4px; + margin-inline-start: initial; + } - .alerts { - padding: 16px; - } + .alerts { + padding: 16px; + } - ha-state-icon { - display: inline-flex; - align-items: center; - justify-content: center; - position: relative; - } + ha-state-icon { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + } - .alerts ha-state-icon { - background: var(--accent-color); - color: var(--text-accent-color, var(--text-primary-color)); - padding: 8px; - margin-right: 8px; - margin-inline-end: 8px; - margin-inline-start: initial; - border-radius: 50%; - } + .alerts ha-state-icon { + background: var(--accent-color); + color: var(--text-accent-color, var(--text-primary-color)); + padding: 8px; + margin-right: 8px; + margin-inline-end: 8px; + margin-inline-start: initial; + border-radius: 50%; + } - .name { - color: white; - font-size: 24px; - } + .name { + color: white; + font-size: 24px; + } - .bottom { - display: flex; - justify-content: space-between; - align-items: center; - padding: 16px; - } + .bottom { + display: flex; + justify-content: space-between; + align-items: center; + padding: 16px; + } - .navigate { - cursor: pointer; - } + .navigate { + cursor: pointer; + } - ha-icon-button { - color: white; - background-color: var(--area-button-color, #727272b2); - border-radius: 50%; - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - --mdc-icon-button-size: 44px; - } - .on { - color: var(--state-light-active-color); - } - `; - } + ha-icon-button { + color: white; + background-color: var(--area-button-color, #727272b2); + border-radius: 50%; + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + --mdc-icon-button-size: 44px; + } + .on { + color: var(--state-light-active-color); + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts index 110d28378d..c09835c4e1 100644 --- a/src/panels/lovelace/cards/hui-calendar-card.ts +++ b/src/panels/lovelace/cards/hui-calendar-card.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { getColorByIndex } from "../../../common/color/colors"; @@ -212,30 +212,28 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard { this._resizeObserver.observe(card); } - static get styles(): CSSResultGroup { - return css` - ha-card { - position: relative; - padding: 0 8px 8px; - box-sizing: border-box; - height: 100%; - } + static styles = css` + ha-card { + position: relative; + padding: 0 8px 8px; + box-sizing: border-box; + height: 100%; + } - .header { - color: var(--ha-card-header-color, var(--primary-text-color)); - font-size: var(--ha-card-header-font-size, 24px); - line-height: 1.2; - padding-top: 16px; - padding-left: 8px; - padding-inline-start: 8px; - direction: var(--direction); - } + .header { + color: var(--ha-card-header-color, var(--primary-text-color)); + font-size: var(--ha-card-header-font-size, 24px); + line-height: 1.2; + padding-top: 16px; + padding-left: 8px; + padding-inline-start: 8px; + direction: var(--direction); + } - ha-full-calendar { - --calendar-height: 400px; - } - `; - } + ha-full-calendar { + --calendar-height: 400px; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-empty-state-card.ts b/src/panels/lovelace/cards/hui-empty-state-card.ts index 87928ffab3..5a183e5f63 100644 --- a/src/panels/lovelace/cards/hui-empty-state-card.ts +++ b/src/panels/lovelace/cards/hui-empty-state-card.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-card"; @@ -15,6 +14,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard { return 2; } + // eslint-disable-next-line @typescript-eslint/no-empty-function public setConfig(_config: EmptyStateCardConfig): void {} protected render() { @@ -46,24 +46,22 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - .content { - margin-top: -1em; - padding: 16px; - } + static styles = css` + .content { + margin-top: -1em; + padding: 16px; + } - .card-actions a { - text-decoration: none; - } + .card-actions a { + text-decoration: none; + } - mwc-button { - margin-left: -8px; - margin-inline-start: -8px; - margin-inline-end: initial; - } - `; - } + mwc-button { + margin-left: -8px; + margin-inline-start: -8px; + margin-inline-end: initial; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index cceec3645d..387d5a3e46 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import { DOMAINS_TOGGLE } from "../../../common/const"; @@ -224,68 +224,66 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - display: flex; - flex-direction: column; - justify-content: space-between; - } - .card-header { - display: flex; - justify-content: space-between; - } + static styles = css` + ha-card { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + } + .card-header { + display: flex; + justify-content: space-between; + } - .card-header .name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } + .card-header .name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - #states { - flex: 1; - } + #states { + flex: 1; + } - #states > * { - margin: 8px 0; - } + #states > * { + margin: 8px 0; + } - #states > *:first-child { - margin-top: 0; - } + #states > *:first-child { + margin-top: 0; + } - #states > *:last-child { - margin-bottom: 0; - } + #states > *:last-child { + margin-bottom: 0; + } - #states > div > * { - overflow: clip visible; - } + #states > div > * { + overflow: clip visible; + } - #states > div { - position: relative; - } + #states > div { + position: relative; + } - .icon { - padding: 0px 18px 0px 8px; - } + .icon { + padding: 0px 18px 0px 8px; + } - .header { - border-top-left-radius: var(--ha-card-border-radius, 12px); - border-top-right-radius: var(--ha-card-border-radius, 12px); - margin-bottom: 16px; - overflow: hidden; - } + .header { + border-top-left-radius: var(--ha-card-border-radius, 12px); + border-top-right-radius: var(--ha-card-border-radius, 12px); + margin-bottom: 16px; + overflow: hidden; + } - .footer { - border-bottom-left-radius: var(--ha-card-border-radius, 12px); - border-bottom-right-radius: var(--ha-card-border-radius, 12px); - margin-top: -16px; - overflow: hidden; - } - `; - } + .footer { + border-bottom-left-radius: var(--ha-card-border-radius, 12px); + border-bottom-right-radius: var(--ha-card-border-radius, 12px); + margin-top: -16px; + overflow: hidden; + } + `; private _renderEntity(entityConf: LovelaceRowConfig): TemplateResult { const element = createRowElement( diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts index 779bf3a5d7..59efd46c74 100644 --- a/src/panels/lovelace/cards/hui-error-card.ts +++ b/src/panels/lovelace/cards/hui-error-card.ts @@ -1,5 +1,4 @@ import { dump } from "js-yaml"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-alert"; @@ -43,15 +42,13 @@ export class HuiErrorCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - pre { - font-family: var(--code-font-family, monospace); - white-space: break-spaces; - user-select: text; - } - `; - } + static styles = css` + pre { + font-family: var(--code-font-family, monospace); + white-space: break-spaces; + user-select: text; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts index f43af8f06d..62f7e16d2c 100644 --- a/src/panels/lovelace/cards/hui-gauge-card.ts +++ b/src/panels/lovelace/cards/hui-gauge-card.ts @@ -1,5 +1,5 @@ import type { HassEntity } from "home-assistant-js-websocket/dist/types"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -271,42 +271,40 @@ class HuiGaugeCard extends LitElement implements LovelaceCard { handleAction(this, this.hass!, this._config!, ev.detail.action!); } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - overflow: hidden; - padding: 16px; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - box-sizing: border-box; - } + static styles = css` + ha-card { + height: 100%; + overflow: hidden; + padding: 16px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + box-sizing: border-box; + } - ha-card.action { - cursor: pointer; - } + ha-card.action { + cursor: pointer; + } - ha-card:focus { - outline: none; - } + ha-card:focus { + outline: none; + } - ha-gauge { - width: 100%; - max-width: 250px; - } + ha-gauge { + width: 100%; + max-width: 250px; + } - .name { - text-align: center; - line-height: initial; - color: var(--primary-text-color); - width: 100%; - font-size: 15px; - margin-top: 8px; - } - `; - } + .name { + text-align: center; + line-height: initial; + color: var(--primary-text-color); + width: 100%; + font-size: 15px; + margin-top: 8px; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts index 4811238e9c..fe8b4cd5f0 100644 --- a/src/panels/lovelace/cards/hui-glance-card.ts +++ b/src/panels/lovelace/cards/hui-glance-card.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -156,79 +156,77 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard { } } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - } - .entities { - display: flex; - padding: 0 16px 4px; - flex-wrap: wrap; - box-sizing: border-box; - align-items: center; - align-content: center; - } - .entities.no-header { - padding-top: 16px; - } - .entity { - box-sizing: border-box; - padding: 0 4px; - display: flex; - flex-direction: column; - align-items: center; - margin-bottom: 12px; - width: var(--glance-column-width, 20%); - } - .entity.action { - cursor: pointer; - } - .entity:focus { - outline: none; - background: var(--divider-color); - border-radius: 14px; - padding: 4px; - margin-top: -4px; - margin-bottom: 8px; - } - .entity div { - width: 100%; - text-align: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .name { - min-height: var(--paper-font-body1_-_line-height, 20px); - } - .warning { - cursor: default; - position: relative; - padding: 8px; - width: calc(var(--glance-column-width, 20%) - 4px); - margin: 0 2px; - } - .warning::before { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - opacity: 0.12; - pointer-events: none; - content: ""; - border-radius: 4px; - background-color: var(--warning-color); - } - state-badge { - margin: 8px 0; - } - hui-warning-element { - padding: 8px; - } - `; - } + static styles = css` + ha-card { + height: 100%; + } + .entities { + display: flex; + padding: 0 16px 4px; + flex-wrap: wrap; + box-sizing: border-box; + align-items: center; + align-content: center; + } + .entities.no-header { + padding-top: 16px; + } + .entity { + box-sizing: border-box; + padding: 0 4px; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 12px; + width: var(--glance-column-width, 20%); + } + .entity.action { + cursor: pointer; + } + .entity:focus { + outline: none; + background: var(--divider-color); + border-radius: 14px; + padding: 4px; + margin-top: -4px; + margin-bottom: 8px; + } + .entity div { + width: 100%; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .name { + min-height: var(--paper-font-body1_-_line-height, 20px); + } + .warning { + cursor: default; + position: relative; + padding: 8px; + width: calc(var(--glance-column-width, 20%) - 4px); + margin: 0 2px; + } + .warning::before { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0.12; + pointer-events: none; + content: ""; + border-radius: 4px; + background-color: var(--warning-color); + } + state-badge { + margin: 8px 0; + } + hui-warning-element { + padding: 8px; + } + `; private _renderEntity(entityConf: GlanceConfigEntity): TemplateResult { const stateObj = this.hass!.states[entityConf.entity]; diff --git a/src/panels/lovelace/cards/hui-grid-card.ts b/src/panels/lovelace/cards/hui-grid-card.ts index 1e04ea81fb..00ec6623de 100644 --- a/src/panels/lovelace/cards/hui-grid-card.ts +++ b/src/panels/lovelace/cards/hui-grid-card.ts @@ -33,7 +33,7 @@ class HuiGridCard extends HuiStackCard { ); } - const promises: Array | number> = []; + const promises: (Promise | number)[] = []; for (const element of this._cards) { promises.push(computeCardSize(element)); diff --git a/src/panels/lovelace/cards/hui-heading-card.ts b/src/panels/lovelace/cards/hui-heading-card.ts index 307fc6bfdb..68337d45d8 100644 --- a/src/panels/lovelace/cards/hui-heading-card.ts +++ b/src/panels/lovelace/cards/hui-heading-card.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -127,93 +126,88 @@ export class HuiHeadingCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - ha-card { - background: none; - backdrop-filter: none; - -webkit-backdrop-filter: none; - border: none; - box-shadow: none; - padding: 0; - display: flex; - flex-direction: column; - justify-content: flex-end; - height: 100%; - } - [role="button"] { - cursor: pointer; - } - ha-icon-next { - display: inline-block; - transition: transform 180ms ease-in-out; - } - .container { - padding: 2px 4px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - overflow: hidden; - gap: 8px; - } - .content:hover ha-icon-next { - transform: translateX(calc(4px * var(--scale-direction))); - } - .container .content { - flex: 1 0 fill; - min-width: 100px; - } - .container .content:not(:has(p)) { - min-width: fit-content; - } - .container .badges { - flex: 0 0; - } - .content { - display: flex; - flex-direction: row; - align-items: center; - gap: 8px; - color: var(--ha-heading-card-title-color, var(--primary-text-color)); - font-size: var(--ha-heading-card-title-font-size, 16px); - font-weight: var(--ha-heading-card-title-font-weight, 400); - line-height: var(--ha-heading-card-title-line-height, 24px); - letter-spacing: 0.1px; - --mdc-icon-size: 18px; - } - .content ha-icon, - .content ha-icon-next { - display: flex; - flex: none; - } - .content p { - margin: 0; - font-style: normal; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex-shrink: 1; - min-width: 0; - } - .content.subtitle { - color: var( - --ha-heading-card-subtitle-color, - var(--secondary-text-color) - ); - font-size: var(--ha-heading-card-subtitle-font-size, 14px); - font-weight: var(--ha-heading-card-subtitle-font-weight, 500); - line-height: var(--ha-heading-card-subtitle-line-height, 20px); - } - .badges { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; - gap: 4px 10px; - } - `; - } + static styles = css` + ha-card { + background: none; + backdrop-filter: none; + -webkit-backdrop-filter: none; + border: none; + box-shadow: none; + padding: 0; + display: flex; + flex-direction: column; + justify-content: flex-end; + height: 100%; + } + [role="button"] { + cursor: pointer; + } + ha-icon-next { + display: inline-block; + transition: transform 180ms ease-in-out; + } + .container { + padding: 2px 4px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + overflow: hidden; + gap: 8px; + } + .content:hover ha-icon-next { + transform: translateX(calc(4px * var(--scale-direction))); + } + .container .content { + flex: 1 0 fill; + min-width: 100px; + } + .container .content:not(:has(p)) { + min-width: fit-content; + } + .container .badges { + flex: 0 0; + } + .content { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + color: var(--ha-heading-card-title-color, var(--primary-text-color)); + font-size: var(--ha-heading-card-title-font-size, 16px); + font-weight: var(--ha-heading-card-title-font-weight, 400); + line-height: var(--ha-heading-card-title-line-height, 24px); + letter-spacing: 0.1px; + --mdc-icon-size: 18px; + } + .content ha-icon, + .content ha-icon-next { + display: flex; + flex: none; + } + .content p { + margin: 0; + font-style: normal; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + flex-shrink: 1; + min-width: 0; + } + .content.subtitle { + color: var(--ha-heading-card-subtitle-color, var(--secondary-text-color)); + font-size: var(--ha-heading-card-subtitle-font-size, 14px); + font-weight: var(--ha-heading-card-subtitle-font-weight, 500); + line-height: var(--ha-heading-card-subtitle-line-height, 20px); + } + .badges { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-end; + gap: 4px 10px; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts index 08aa541e25..51b0d52372 100644 --- a/src/panels/lovelace/cards/hui-history-graph-card.ts +++ b/src/panels/lovelace/cards/hui-history-graph-card.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -287,28 +287,26 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - } - .card-header { - justify-content: space-between; - display: flex; - } - .card-header ha-icon-next { - --mdc-icon-button-size: 24px; - line-height: 24px; - color: var(--primary-text-color); - } - .content { - padding: 16px; - } - .has-header { - padding-top: 0; - } - `; - } + static styles = css` + ha-card { + height: 100%; + } + .card-header { + justify-content: space-between; + display: flex; + } + .card-header ha-icon-next { + --mdc-icon-button-size: 24px; + line-height: 24px; + color: var(--primary-text-color); + } + .content { + padding: 16px; + } + .has-header { + padding-top: 0; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts index aec415dd26..9448c65c82 100644 --- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts +++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts @@ -11,7 +11,7 @@ export class HuiHorizontalStackCard extends HuiStackCard { return 0; } - const promises: Array | number> = []; + const promises: (Promise | number)[] = []; for (const element of this._cards) { promises.push(computeCardSize(element)); diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts index 15bee2a43d..3a6921f091 100644 --- a/src/panels/lovelace/cards/hui-humidifier-card.ts +++ b/src/panels/lovelace/cards/hui-humidifier-card.ts @@ -1,6 +1,6 @@ import { ResizeController } from "@lit-labs/observers/resize-controller"; import { mdiDotsVertical } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -189,77 +189,75 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard { }; } - static get styles(): CSSResultGroup { - return css` - :host { - position: relative; - display: block; - height: 100%; - } - ha-card { - position: relative; - height: 100%; - width: 100%; - padding: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - } + static styles = css` + :host { + position: relative; + display: block; + height: 100%; + } + ha-card { + position: relative; + height: 100%; + width: 100%; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + } - .title { - width: 100%; - font-size: 18px; - line-height: 36px; - padding: 8px 30px 8px 30px; - margin: 0; - text-align: center; - box-sizing: border-box; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: none; - } + .title { + width: 100%; + font-size: 18px; + line-height: 36px; + padding: 8px 30px 8px 30px; + margin: 0; + text-align: center; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: none; + } - .container { - display: flex; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - max-width: 100%; - box-sizing: border-box; - flex: 1; - } + .container { + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + max-width: 100%; + box-sizing: border-box; + flex: 1; + } - .container:before { - content: ""; - display: block; - padding-top: 100%; - } + .container:before { + content: ""; + display: block; + padding-top: 100%; + } - .container > * { - padding: 8px; - } + .container > * { + padding: 8px; + } - .more-info { - position: absolute; - cursor: pointer; - top: 0; - right: 0; - inset-inline-end: 0px; - inset-inline-start: initial; - border-radius: 100%; - color: var(--secondary-text-color); - direction: var(--direction); - } + .more-info { + position: absolute; + cursor: pointer; + top: 0; + right: 0; + inset-inline-end: 0px; + inset-inline-start: initial; + border-radius: 100%; + color: var(--secondary-text-color); + direction: var(--direction); + } - hui-card-features { - width: 100%; - flex: none; - } - `; - } + hui-card-features { + width: 100%; + flex: none; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts index 72188af3ba..7438372335 100644 --- a/src/panels/lovelace/cards/hui-iframe-card.ts +++ b/src/panels/lovelace/cards/hui-iframe-card.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -122,32 +121,30 @@ export class HuiIframeCard extends LitElement implements LovelaceCard { }; } - static get styles(): CSSResultGroup { - return css` - ha-card { - overflow: hidden; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - } + static styles = css` + ha-card { + overflow: hidden; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + } - #root { - width: 100%; - height: 100%; - position: relative; - } + #root { + width: 100%; + height: 100%; + position: relative; + } - iframe { - position: absolute; - border: none; - width: 100%; - height: 100%; - top: 0; - left: 0; - } - `; - } + iframe { + position: absolute; + border: none; + width: 100%; + height: 100%; + top: 0; + left: 0; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts index 9a5e4d54d6..f8ca1282dd 100644 --- a/src/panels/lovelace/cards/hui-light-card.ts +++ b/src/panels/lovelace/cards/hui-light-card.ts @@ -1,6 +1,6 @@ import { mdiDotsVertical } from "@mdi/js"; import "@thomasloven/round-slider"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -247,102 +247,100 @@ export class HuiLightCard extends LitElement implements LovelaceCard { }); } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - box-sizing: border-box; - position: relative; - overflow: hidden; - text-align: center; - --name-font-size: 1.2rem; - --brightness-font-size: 1.2rem; - } + static styles = css` + ha-card { + height: 100%; + box-sizing: border-box; + position: relative; + overflow: hidden; + text-align: center; + --name-font-size: 1.2rem; + --brightness-font-size: 1.2rem; + } - .more-info { - position: absolute; - cursor: pointer; - top: 0; - right: 0; - inset-inline-start: initial; - inset-inline-end: 0; - border-radius: 100%; - color: var(--secondary-text-color); - z-index: 1; - direction: var(--direction); - } + .more-info { + position: absolute; + cursor: pointer; + top: 0; + right: 0; + inset-inline-start: initial; + inset-inline-end: 0; + border-radius: 100%; + color: var(--secondary-text-color); + z-index: 1; + direction: var(--direction); + } - .content { - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - } + .content { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + } - #controls { - display: flex; - justify-content: center; - padding: 16px; - position: relative; - } + #controls { + display: flex; + justify-content: center; + padding: 16px; + position: relative; + } - #slider { - height: 100%; - width: 100%; - position: relative; - max-width: 200px; - min-width: 100px; - } + #slider { + height: 100%; + width: 100%; + position: relative; + max-width: 200px; + min-width: 100px; + } - round-slider { - --round-slider-path-color: var(--slider-track-color); - --round-slider-bar-color: var(--primary-color); - padding-bottom: 10%; - } + round-slider { + --round-slider-path-color: var(--slider-track-color); + --round-slider-bar-color: var(--primary-color); + padding-bottom: 10%; + } - .light-button { - color: var(--paper-item-icon-color, #44739e); - width: 60%; - height: auto; - position: absolute; - max-width: calc(100% - 40px); - box-sizing: border-box; - border-radius: 100%; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - --mdc-icon-button-size: 100%; - --mdc-icon-size: 100%; - } + .light-button { + color: var(--paper-item-icon-color, #44739e); + width: 60%; + height: auto; + position: absolute; + max-width: calc(100% - 40px); + box-sizing: border-box; + border-radius: 100%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + --mdc-icon-button-size: 100%; + --mdc-icon-size: 100%; + } - .light-button.state-on { - color: var(--state-light-active-color); - } + .light-button.state-on { + color: var(--state-light-active-color); + } - .light-button.state-unavailable { - color: var(--state-unavailable-color); - } + .light-button.state-unavailable { + color: var(--state-unavailable-color); + } - #info { - text-align: center; - margin-top: -56px; - padding: 16px; - font-size: var(--name-font-size); - } + #info { + text-align: center; + margin-top: -56px; + padding: 16px; + font-size: var(--name-font-size); + } - .brightness { - font-size: var(--brightness-font-size); - opacity: 0; - transition: opacity 0.5s ease-in-out; - -moz-transition: opacity 0.5s ease-in-out; - -webkit-transition: opacity 0.5s ease-in-out; - } + .brightness { + font-size: var(--brightness-font-size); + opacity: 0; + transition: opacity 0.5s ease-in-out; + -moz-transition: opacity 0.5s ease-in-out; + -webkit-transition: opacity 0.5s ease-in-out; + } - .show_brightness { - opacity: 1; - } - `; - } + .show_brightness { + opacity: 1; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts index d6b1141722..f8104b1b74 100644 --- a/src/panels/lovelace/cards/hui-map-card.ts +++ b/src/panels/lovelace/cards/hui-map-card.ts @@ -1,7 +1,7 @@ import { mdiImageFilterCenterFocus } from "@mdi/js"; import type { HassEntities } from "home-assistant-js-websocket"; import type { LatLngTuple } from "leaflet"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -442,40 +442,38 @@ class HuiMapCard extends LitElement implements LovelaceCard { }; } - static get styles(): CSSResultGroup { - return css` - ha-card { - overflow: hidden; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - } + static styles = css` + ha-card { + overflow: hidden; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + } - ha-map { - z-index: 0; - border: none; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: inherit; - } + ha-map { + z-index: 0; + border: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: inherit; + } - ha-icon-button { - position: absolute; - top: 75px; - left: 3px; - outline: none; - } + ha-icon-button { + position: absolute; + top: 75px; + left: 3px; + outline: none; + } - #root { - position: relative; - height: 100%; - } - `; - } + #root { + position: relative; + height: 100%; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts index 7660c3f416..7bc53af091 100644 --- a/src/panels/lovelace/cards/hui-markdown-card.ts +++ b/src/panels/lovelace/cards/hui-markdown-card.ts @@ -1,5 +1,5 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -186,29 +186,27 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard { return; } - this._unsubRenderTemplate.then((unsub) => unsub()).catch(() => {}); + this._unsubRenderTemplate.then((unsub) => unsub()).catch(/* ignore */); this._unsubRenderTemplate = undefined; this._error = undefined; this._errorLevel = undefined; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - } - ha-alert { - margin-bottom: 8px; - } - ha-markdown { - padding: 0 16px 16px; - word-wrap: break-word; - } - ha-markdown.no-header { - padding-top: 16px; - } - `; - } + static styles = css` + ha-card { + height: 100%; + } + ha-alert { + margin-bottom: 8px; + } + ha-markdown { + padding: 0 16px 16px; + word-wrap: break-word; + } + ha-markdown.no-header { + padding-top: 16px; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index b110fcb857..7b3c3df6c7 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -1,7 +1,7 @@ import "@material/mwc-linear-progress/mwc-linear-progress"; import type { LinearProgress } from "@material/mwc-linear-progress/mwc-linear-progress"; import { mdiDotsVertical, mdiPlayBoxMultiple } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -578,235 +578,233 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } } - static get styles(): CSSResultGroup { - return css` - ha-card { - overflow: hidden; - height: 100%; - } + static styles = css` + ha-card { + overflow: hidden; + height: 100%; + } - .background { - display: flex; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - transition: filter 0.8s; - } + .background { + display: flex; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + transition: filter 0.8s; + } - .color-block { - background-color: var(--primary-color); - transition: background-color 0.8s; - width: 100%; - } + .color-block { + background-color: var(--primary-color); + transition: background-color 0.8s; + width: 100%; + } - .color-gradient { - position: absolute; - background-image: linear-gradient( - to right, - var(--primary-color), - transparent - ); - height: 100%; - right: 0; + .color-gradient { + position: absolute; + background-image: linear-gradient( + to right, + var(--primary-color), + transparent + ); + height: 100%; + right: 0; - opacity: 1; - transition: - width 0.8s, - opacity 0.8s linear 0.8s; - } + opacity: 1; + transition: + width 0.8s, + opacity 0.8s linear 0.8s; + } - .image { - background-color: var(--primary-color); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - position: absolute; - right: 0; - height: 100%; - opacity: 1; - transition: - width 0.8s, - background-image 0.8s, - background-color 0.8s, - background-size 0.8s, - opacity 0.8s linear 0.8s; - } + .image { + background-color: var(--primary-color); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + position: absolute; + right: 0; + height: 100%; + opacity: 1; + transition: + width 0.8s, + background-image 0.8s, + background-color 0.8s, + background-size 0.8s, + opacity 0.8s linear 0.8s; + } - .no-image .image { - opacity: 0; - } + .no-image .image { + opacity: 0; + } - .no-img { - background-color: var(--primary-color); - background-size: initial; - background-repeat: no-repeat; - background-position: center center; - padding-bottom: 0; - position: absolute; - right: 0; - height: 100%; - background-image: url("/static/images/card_media_player_bg.png"); - width: 50%; - transition: - opacity 0.8s, - background-color 0.8s; - } + .no-img { + background-color: var(--primary-color); + background-size: initial; + background-repeat: no-repeat; + background-position: center center; + padding-bottom: 0; + position: absolute; + right: 0; + height: 100%; + background-image: url("/static/images/card_media_player_bg.png"); + width: 50%; + transition: + opacity 0.8s, + background-color 0.8s; + } - .off .image, - .off .color-gradient { - opacity: 0; - transition: - opacity 0s, - width 0.8s; - width: 0; - } + .off .image, + .off .color-gradient { + opacity: 0; + transition: + opacity 0s, + width 0.8s; + width: 0; + } - .unavailable .no-img, - .background:not(.off):not(.no-image) .no-img { - opacity: 0; - } + .unavailable .no-img, + .background:not(.off):not(.no-image) .no-img { + opacity: 0; + } - .player { - position: relative; - padding: 16px; - height: 100%; - box-sizing: border-box; - display: flex; - flex-direction: column; - justify-content: space-between; - color: var(--text-primary-color); - transition-property: color, padding; - transition-duration: 0.4s; - } + .player { + position: relative; + padding: 16px; + height: 100%; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; + color: var(--text-primary-color); + transition-property: color, padding; + transition-duration: 0.4s; + } - .controls { - padding: 8px 8px 8px 0; - display: flex; - justify-content: flex-start; - align-items: center; - transition: padding, color; - transition-duration: 0.4s; - margin-left: -12px; - margin-inline-start: -12px; - margin-inline-end: initial; - padding-inline-start: 0; - padding-inline-end: 8px; - direction: ltr; - } + .controls { + padding: 8px 8px 8px 0; + display: flex; + justify-content: flex-start; + align-items: center; + transition: padding, color; + transition-duration: 0.4s; + margin-left: -12px; + margin-inline-start: -12px; + margin-inline-end: initial; + padding-inline-start: 0; + padding-inline-end: 8px; + direction: ltr; + } - .controls > div { - display: flex; - align-items: center; - } + .controls > div { + display: flex; + align-items: center; + } - .controls ha-icon-button { - --mdc-icon-button-size: 44px; - --mdc-icon-size: 30px; - } + .controls ha-icon-button { + --mdc-icon-button-size: 44px; + --mdc-icon-size: 30px; + } - ha-icon-button[action="media_play"], - ha-icon-button[action="media_play_pause"], - ha-icon-button[action="media_pause"], - ha-icon-button[action="media_stop"], - ha-icon-button[action="turn_on"], - ha-icon-button[action="turn_off"] { - --mdc-icon-button-size: 56px; - --mdc-icon-size: 40px; - } + ha-icon-button[action="media_play"], + ha-icon-button[action="media_play_pause"], + ha-icon-button[action="media_pause"], + ha-icon-button[action="media_stop"], + ha-icon-button[action="turn_on"], + ha-icon-button[action="turn_off"] { + --mdc-icon-button-size: 56px; + --mdc-icon-size: 40px; + } - ha-icon-button.browse-media { - position: absolute; - right: 4px; - --mdc-icon-size: 24px; - inset-inline-end: 4px; - inset-inline-start: initial; - } + ha-icon-button.browse-media { + position: absolute; + right: 4px; + --mdc-icon-size: 24px; + inset-inline-end: 4px; + inset-inline-start: initial; + } - .top-info { - display: flex; - justify-content: space-between; - } + .top-info { + display: flex; + justify-content: space-between; + } - .icon-name { - display: flex; - height: fit-content; - align-items: center; - } + .icon-name { + display: flex; + height: fit-content; + align-items: center; + } - .icon-name ha-state-icon { - padding-right: 8px; - padding-inline-start: initial; - padding-inline-end: 8px; - direction: var(--direction); - } + .icon-name ha-state-icon { + padding-right: 8px; + padding-inline-start: initial; + padding-inline-end: 8px; + direction: var(--direction); + } - .more-info { - position: absolute; - top: 4px; - right: 4px; - inset-inline-start: initial; - inset-inline-end: 4px; - direction: var(--direction); - } + .more-info { + position: absolute; + top: 4px; + right: 4px; + inset-inline-start: initial; + inset-inline-end: 4px; + direction: var(--direction); + } - .media-info { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } + .media-info { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } - hui-marquee { - font-size: 1.2em; - margin: 0px 0 4px; - } + hui-marquee { + font-size: 1.2em; + margin: 0px 0 4px; + } - .title-controls { - padding-top: 16px; - } + .title-controls { + padding-top: 16px; + } - mwc-linear-progress { - width: 100%; - margin-top: 4px; - --mdc-linear-progress-buffer-color: rgba(200, 200, 200, 0.5); - } + mwc-linear-progress { + width: 100%; + margin-top: 4px; + --mdc-linear-progress-buffer-color: rgba(200, 200, 200, 0.5); + } - .no-image .controls { - padding: 0; - } + .no-image .controls { + padding: 0; + } - .off.background { - filter: grayscale(1); - } + .off.background { + filter: grayscale(1); + } - .narrow .controls, - .no-progress .controls { - padding-bottom: 0; - } + .narrow .controls, + .no-progress .controls { + padding-bottom: 0; + } - .narrow ha-icon-button { - --mdc-icon-button-size: 40px; - --mdc-icon-size: 28px; - } + .narrow ha-icon-button { + --mdc-icon-button-size: 40px; + --mdc-icon-size: 28px; + } - .narrow ha-icon-button[action="media_play"], - .narrow ha-icon-button[action="media_play_pause"], - .narrow ha-icon-button[action="media_pause"], - .narrow ha-icon-button[action="turn_on"] { - --mdc-icon-button-size: 50px; - --mdc-icon-size: 36px; - } + .narrow ha-icon-button[action="media_play"], + .narrow ha-icon-button[action="media_play_pause"], + .narrow ha-icon-button[action="media_pause"], + .narrow ha-icon-button[action="turn_on"] { + --mdc-icon-button-size: 50px; + --mdc-icon-size: 36px; + } - .narrow ha-icon-button.browse-media { - --mdc-icon-size: 24px; - } + .narrow ha-icon-button.browse-media { + --mdc-icon-size: 24px; + } - .no-progress.player:not(.no-controls) { - padding-bottom: 0px; - } - `; - } + .no-progress.player:not(.no-controls) { + padding-bottom: 0px; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-picture-card.ts b/src/panels/lovelace/cards/hui-picture-card.ts index 53b51ca1ce..d7575775bb 100644 --- a/src/panels/lovelace/cards/hui-picture-card.ts +++ b/src/panels/lovelace/cards/hui-picture-card.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -152,23 +152,21 @@ export class HuiPictureCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - ha-card { - overflow: hidden; - height: 100%; - } + static styles = css` + ha-card { + overflow: hidden; + height: 100%; + } - ha-card.clickable { - cursor: pointer; - } + ha-card.clickable { + cursor: pointer; + } - img { - display: block; - width: 100%; - } - `; - } + img { + display: block; + width: 100%; + } + `; private _handleAction(ev: ActionHandlerEvent) { handleAction(this, this.hass!, this._config!, ev.detail.action!); diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts index 1f09b477f1..cea7d6824c 100644 --- a/src/panels/lovelace/cards/hui-picture-elements-card.ts +++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; @@ -156,24 +156,22 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - #root { - position: relative; - } + static styles = css` + #root { + position: relative; + } - .element { - position: absolute; - transform: translate(-50%, -50%); - } + .element { + position: absolute; + transform: translate(-50%, -50%); + } - ha-card { - overflow: hidden; - height: 100%; - box-sizing: border-box; - } - `; - } + ha-card { + overflow: hidden; + height: 100%; + box-sizing: border-box; + } + `; private _createElement( elementConfig: LovelaceElementConfig diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts index dc79940ef5..8d6bcb273c 100644 --- a/src/panels/lovelace/cards/hui-picture-entity-card.ts +++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -175,53 +175,51 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - ha-card { - min-height: 75px; - overflow: hidden; - position: relative; - height: 100%; - box-sizing: border-box; - } + static styles = css` + ha-card { + min-height: 75px; + overflow: hidden; + position: relative; + height: 100%; + box-sizing: border-box; + } - hui-image { - cursor: pointer; - height: 100%; - } + hui-image { + cursor: pointer; + height: 100%; + } - .footer { - /* start paper-font-common-nowrap style */ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - /* end paper-font-common-nowrap style */ + .footer { + /* start paper-font-common-nowrap style */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* end paper-font-common-nowrap style */ - position: absolute; - left: 0; - right: 0; - bottom: 0; - background-color: var( - --ha-picture-card-background-color, - rgba(0, 0, 0, 0.3) - ); - padding: 16px; - font-size: 16px; - line-height: 16px; - color: var(--ha-picture-card-text-color, white); - pointer-events: none; - } + position: absolute; + left: 0; + right: 0; + bottom: 0; + background-color: var( + --ha-picture-card-background-color, + rgba(0, 0, 0, 0.3) + ); + padding: 16px; + font-size: 16px; + line-height: 16px; + color: var(--ha-picture-card-text-color, white); + pointer-events: none; + } - .both { - display: flex; - justify-content: space-between; - } + .both { + display: flex; + justify-content: space-between; + } - .single { - text-align: center; - } - `; - } + .single { + text-align: center; + } + `; private _handleAction(ev: ActionHandlerEvent) { handleAction(this, this.hass!, this._config!, ev.detail.action!); diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts index 79c380c195..a71eb3375c 100644 --- a/src/panels/lovelace/cards/hui-picture-glance-card.ts +++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -315,83 +315,81 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard { handleAction(this, this.hass!, config, ev.detail.action!); } - static get styles(): CSSResultGroup { - return css` - ha-card { - position: relative; - min-height: 48px; - overflow: hidden; - height: 100%; - box-sizing: border-box; - } + static styles = css` + ha-card { + position: relative; + min-height: 48px; + overflow: hidden; + height: 100%; + box-sizing: border-box; + } - hui-image.clickable { - cursor: pointer; - } + hui-image.clickable { + cursor: pointer; + } - .box { - /* start paper-font-common-nowrap style */ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - /* end paper-font-common-nowrap style */ + .box { + /* start paper-font-common-nowrap style */ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + /* end paper-font-common-nowrap style */ - position: absolute; - left: 0; - right: 0; - bottom: 0; - background-color: var( - --ha-picture-card-background-color, - rgba(0, 0, 0, 0.3) - ); - padding: 4px 8px; - font-size: 16px; - line-height: 40px; - color: var(--ha-picture-card-text-color, white); - display: flex; - justify-content: space-between; - flex-direction: row; - } + position: absolute; + left: 0; + right: 0; + bottom: 0; + background-color: var( + --ha-picture-card-background-color, + rgba(0, 0, 0, 0.3) + ); + padding: 4px 8px; + font-size: 16px; + line-height: 40px; + color: var(--ha-picture-card-text-color, white); + display: flex; + justify-content: space-between; + flex-direction: row; + } - .box .title { - font-weight: 500; - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - } + .box .title { + font-weight: 500; + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + } - ha-icon-button { - --mdc-icon-button-size: 40px; - --disabled-text-color: currentColor; - color: var(--ha-picture-icon-button-color, #a9a9a9); - } + ha-icon-button { + --mdc-icon-button-size: 40px; + --disabled-text-color: currentColor; + color: var(--ha-picture-icon-button-color, #a9a9a9); + } - ha-icon-button.state-on { - color: var(--ha-picture-icon-button-on-color, white); - } - hui-warning-element { - padding: 0 8px; - } - .state { - display: block; - font-size: 12px; - text-align: center; - line-height: 12px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .row { - display: flex; - flex-direction: row; - } - .wrapper { - display: flex; - flex-direction: column; - width: 40px; - } - `; - } + ha-icon-button.state-on { + color: var(--ha-picture-icon-button-on-color, white); + } + hui-warning-element { + padding: 0 8px; + } + .state { + display: block; + font-size: 12px; + text-align: center; + line-height: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .row { + display: flex; + flex-direction: row; + } + .wrapper { + display: flex; + flex-direction: column; + width: 40px; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts index 64307a1583..5dc3c94f6b 100644 --- a/src/panels/lovelace/cards/hui-plant-status-card.ts +++ b/src/panels/lovelace/cards/hui-plant-status-card.ts @@ -5,7 +5,7 @@ import { mdiWhiteBalanceSunny, } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; @@ -159,92 +159,90 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - box-sizing: border-box; - } - .banner { - display: flex; - align-items: flex-end; - background-repeat: no-repeat; - background-size: cover; - background-position: center; - padding-top: 12px; - } + static styles = css` + ha-card { + height: 100%; + box-sizing: border-box; + } + .banner { + display: flex; + align-items: flex-end; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + padding-top: 12px; + } - .has-plant-image .banner { - padding-top: 30%; - } + .has-plant-image .banner { + padding-top: 30%; + } - .header { - /* start paper-font-headline style */ - font-family: "Roboto", "Noto", sans-serif; - -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */ - text-rendering: optimizeLegibility; - font-size: 24px; - font-weight: 400; - letter-spacing: -0.012em; - /* end paper-font-headline style */ + .header { + /* start paper-font-headline style */ + font-family: "Roboto", "Noto", sans-serif; + -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */ + text-rendering: optimizeLegibility; + font-size: 24px; + font-weight: 400; + letter-spacing: -0.012em; + /* end paper-font-headline style */ - line-height: 40px; - padding: 8px 16px; - } + line-height: 40px; + padding: 8px 16px; + } - .has-plant-image .header { - font-size: 16px; - font-weight: 500; - line-height: 16px; - padding: 16px; - color: white; - width: 100%; - background: rgba(0, 0, 0, var(--dark-secondary-opacity)); - } + .has-plant-image .header { + font-size: 16px; + font-weight: 500; + line-height: 16px; + padding: 16px; + color: white; + width: 100%; + background: rgba(0, 0, 0, var(--dark-secondary-opacity)); + } - .content { - display: flex; - justify-content: space-between; - padding: 16px 32px 24px 32px; - } + .content { + display: flex; + justify-content: space-between; + padding: 16px 32px 24px 32px; + } - .has-plant-image .content { - padding-bottom: 16px; - } + .has-plant-image .content { + padding-bottom: 16px; + } - .icon { - margin-bottom: 8px; - } + .icon { + margin-bottom: 8px; + } - ha-icon, - ha-svg-icon { - color: var(--paper-item-icon-color); - } + ha-icon, + ha-svg-icon { + color: var(--paper-item-icon-color); + } - .attributes { - cursor: pointer; - } + .attributes { + cursor: pointer; + } - .attributes:focus { - outline: none; - background: var(--divider-color); - border-radius: 100%; - } + .attributes:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } - .attributes div { - text-align: center; - } + .attributes div { + text-align: center; + } - .problem { - color: var(--error-color); - font-weight: bold; - } + .problem { + color: var(--error-color); + font-weight: bold; + } - .uom { - color: var(--secondary-text-color); - } - `; - } + .uom { + color: var(--secondary-text-color); + } + `; private _computeAttributes(stateObj: HassEntity): string[] { return Object.keys(SENSOR_ICONS).filter( diff --git a/src/panels/lovelace/cards/hui-recovery-mode-card.ts b/src/panels/lovelace/cards/hui-recovery-mode-card.ts index 37d979dc19..ed09372c20 100644 --- a/src/panels/lovelace/cards/hui-recovery-mode-card.ts +++ b/src/panels/lovelace/cards/hui-recovery-mode-card.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-card"; @@ -36,17 +36,15 @@ export class HuiRecoveryModeCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - ha-card { - --ha-card-header-color: var(--primary-color); - } - error-log-card { - display: block; - padding-bottom: 16px; - } - `; - } + static styles = css` + ha-card { + --ha-card-header-color: var(--primary-color); + } + error-log-card { + display: block; + padding-bottom: 16px; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts index c38c202ff4..2127302e66 100644 --- a/src/panels/lovelace/cards/hui-stack-card.ts +++ b/src/panels/lovelace/cards/hui-stack-card.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { property, state } from "lit/decorators"; import { computeRTLDirection } from "../../../common/util/compute_rtl"; @@ -92,26 +91,24 @@ export abstract class HuiStackCard `; } - static get sharedStyles(): CSSResultGroup { - return css` - .card-header { - color: var(--ha-card-header-color, var(--primary-text-color)); - text-align: var(--ha-stack-title-text-align, start); - font-family: var(--ha-card-header-font-family, inherit); - font-size: var(--ha-card-header-font-size, 24px); - font-weight: normal; - margin-block-start: 0px; - margin-block-end: 0px; - letter-spacing: -0.012em; - line-height: 32px; - display: block; - padding: 24px 16px 16px; - } - :host([ispanel]) #root { - --ha-card-border-radius: var(--restore-card-border-radius); - --ha-card-border-width: var(--restore-card-border-width); - --ha-card-box-shadow: var(--restore-card-box-shadow); - } - `; - } + static sharedStyles = css` + .card-header { + color: var(--ha-card-header-color, var(--primary-text-color)); + text-align: var(--ha-stack-title-text-align, start); + font-family: var(--ha-card-header-font-family, inherit); + font-size: var(--ha-card-header-font-size, 24px); + font-weight: normal; + margin-block-start: 0px; + margin-block-end: 0px; + letter-spacing: -0.012em; + line-height: 32px; + display: block; + padding: 24px 16px 16px; + } + :host([ispanel]) #root { + --ha-card-border-radius: var(--restore-card-border-radius); + --ha-card-border-width: var(--restore-card-border-width); + --ha-card-box-shadow: var(--restore-card-box-shadow); + } + `; } diff --git a/src/panels/lovelace/cards/hui-starting-card.ts b/src/panels/lovelace/cards/hui-starting-card.ts index 1fd1f3526d..bb8c9d3980 100644 --- a/src/panels/lovelace/cards/hui-starting-card.ts +++ b/src/panels/lovelace/cards/hui-starting-card.ts @@ -1,6 +1,6 @@ import "@material/mwc-button/mwc-button"; import { STATE_NOT_RUNNING } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -18,6 +18,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard { return 2; } + // eslint-disable-next-line @typescript-eslint/no-empty-function public setConfig(_config: LovelaceCardConfig): void {} protected updated(changedProperties: PropertyValues) { @@ -44,24 +45,22 @@ export class HuiStartingCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - height: calc(100vh - var(--header-height)); - } - ha-circular-progress { - margin-bottom: 20px; - } - .content { - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - `; - } + static styles = css` + :host { + display: block; + height: calc(100vh - var(--header-height)); + } + ha-circular-progress { + margin-bottom: 20px; + } + .content { + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-statistics-graph-card.ts b/src/panels/lovelace/cards/hui-statistics-graph-card.ts index 80bdad61fb..cb8a351493 100644 --- a/src/panels/lovelace/cards/hui-statistics-graph-card.ts +++ b/src/panels/lovelace/cards/hui-statistics-graph-card.ts @@ -1,6 +1,6 @@ import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import { subHours, differenceInDays } from "date-fns"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -70,7 +70,7 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard { private _interval?: number; - private _statTypes?: Array; + private _statTypes?: StatisticType[]; private _energySub?: UnsubscribeFunc; @@ -350,19 +350,17 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard { } } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - } - .content { - padding: 16px; - } - .has-header { - padding-top: 0; - } - `; - } + static styles = css` + ha-card { + height: 100%; + } + .content { + padding: 16px; + } + .has-header { + padding-top: 0; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index f33d1dbdfe..c2154bb148 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -1,6 +1,6 @@ import { ResizeController } from "@lit-labs/observers/resize-controller"; import { mdiDotsVertical } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -181,77 +181,75 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { }; } - static get styles(): CSSResultGroup { - return css` - :host { - position: relative; - display: block; - height: 100%; - } - ha-card { - position: relative; - height: 100%; - width: 100%; - padding: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - } + static styles = css` + :host { + position: relative; + display: block; + height: 100%; + } + ha-card { + position: relative; + height: 100%; + width: 100%; + padding: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + } - .title { - width: 100%; - font-size: 18px; - line-height: 36px; - padding: 8px 30px 8px 30px; - margin: 0; - text-align: center; - box-sizing: border-box; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - flex: none; - } + .title { + width: 100%; + font-size: 18px; + line-height: 36px; + padding: 8px 30px 8px 30px; + margin: 0; + text-align: center; + box-sizing: border-box; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex: none; + } - .container { - display: flex; - align-items: center; - justify-content: center; - position: relative; - overflow: hidden; - max-width: 100%; - box-sizing: border-box; - flex: 1; - } + .container { + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + max-width: 100%; + box-sizing: border-box; + flex: 1; + } - .container:before { - content: ""; - display: block; - padding-top: 100%; - } + .container:before { + content: ""; + display: block; + padding-top: 100%; + } - .container > * { - padding: 8px; - } + .container > * { + padding: 8px; + } - .more-info { - position: absolute; - cursor: pointer; - top: 0; - right: 0; - inset-inline-end: 0px; - inset-inline-start: initial; - border-radius: 100%; - color: var(--secondary-text-color); - direction: var(--direction); - } + .more-info { + position: absolute; + cursor: pointer; + top: 0; + right: 0; + inset-inline-end: 0px; + inset-inline-start: initial; + border-radius: 100%; + color: var(--secondary-text-color); + direction: var(--direction); + } - hui-card-features { - width: 100%; - flex: none; - } - `; - } + hui-card-features { + width: 100%; + flex: none; + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts index 457363681f..f4385b63ab 100644 --- a/src/panels/lovelace/cards/hui-tile-card.ts +++ b/src/panels/lovelace/cards/hui-tile-card.ts @@ -1,6 +1,5 @@ import { mdiExclamationThick, mdiHelp } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -336,145 +335,143 @@ export class HuiTileCard extends LitElement implements LovelaceCard { `; } - static get styles(): CSSResultGroup { - return css` - :host { - --tile-color: var(--state-inactive-color); - -webkit-tap-highlight-color: transparent; - } - ha-card:has(.background:focus-visible) { - --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent); - --shadow-focus: 0 0 0 1px var(--tile-color); - border-color: var(--tile-color); - box-shadow: var(--shadow-default), var(--shadow-focus); - } - ha-card { - --ha-ripple-color: var(--tile-color); - --ha-ripple-hover-opacity: 0.04; - --ha-ripple-pressed-opacity: 0.12; - height: 100%; - transition: - box-shadow 180ms ease-in-out, - border-color 180ms ease-in-out; - display: flex; - flex-direction: column; - justify-content: space-between; - } - ha-card.active { - --tile-color: var(--state-icon-color); - } - [role="button"] { - cursor: pointer; - } - [role="button"]:focus { - outline: none; - } - .background { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - border-radius: var(--ha-card-border-radius, 12px); - margin: calc(-1 * var(--ha-card-border-width, 1px)); - overflow: hidden; - } - .container { - margin: calc(-1 * var(--ha-card-border-width, 1px)); - display: flex; - flex-direction: column; - flex: 1; - } - .content { - position: relative; - display: flex; - flex-direction: row; - align-items: center; - padding: 10px; - flex: 1; - box-sizing: border-box; - pointer-events: none; - } - .vertical { - flex-direction: column; - text-align: center; - justify-content: center; - } - .vertical .icon-container { - margin-bottom: 10px; - margin-right: 0; - margin-inline-start: initial; - margin-inline-end: initial; - } - .vertical ha-tile-info { - width: 100%; - flex: none; - } - .icon-container { - position: relative; - flex: none; - margin-right: 10px; - margin-inline-start: initial; - margin-inline-end: 10px; - direction: var(--direction); - transition: transform 180ms ease-in-out; - } - .icon-container ha-tile-icon, - .icon-container ha-tile-image { - --tile-icon-color: var(--tile-color); - user-select: none; - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - } - .icon-container ha-tile-badge { - position: absolute; - top: -3px; - right: -3px; - inset-inline-end: -3px; - inset-inline-start: initial; - } - .icon-container[role="button"] { - pointer-events: auto; - } - .icon-container[role="button"]:focus-visible, - .icon-container[role="button"]:active { - transform: scale(1.2); - } - ha-tile-info { - position: relative; - min-width: 0; - transition: background-color 180ms ease-in-out; - box-sizing: border-box; - } - hui-card-features { - --feature-color: var(--tile-color); - } + static styles = css` + :host { + --tile-color: var(--state-inactive-color); + -webkit-tap-highlight-color: transparent; + } + ha-card:has(.background:focus-visible) { + --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent); + --shadow-focus: 0 0 0 1px var(--tile-color); + border-color: var(--tile-color); + box-shadow: var(--shadow-default), var(--shadow-focus); + } + ha-card { + --ha-ripple-color: var(--tile-color); + --ha-ripple-hover-opacity: 0.04; + --ha-ripple-pressed-opacity: 0.12; + height: 100%; + transition: + box-shadow 180ms ease-in-out, + border-color 180ms ease-in-out; + display: flex; + flex-direction: column; + justify-content: space-between; + } + ha-card.active { + --tile-color: var(--state-icon-color); + } + [role="button"] { + cursor: pointer; + } + [role="button"]:focus { + outline: none; + } + .background { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: var(--ha-card-border-radius, 12px); + margin: calc(-1 * var(--ha-card-border-width, 1px)); + overflow: hidden; + } + .container { + margin: calc(-1 * var(--ha-card-border-width, 1px)); + display: flex; + flex-direction: column; + flex: 1; + } + .content { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + padding: 10px; + flex: 1; + box-sizing: border-box; + pointer-events: none; + } + .vertical { + flex-direction: column; + text-align: center; + justify-content: center; + } + .vertical .icon-container { + margin-bottom: 10px; + margin-right: 0; + margin-inline-start: initial; + margin-inline-end: initial; + } + .vertical ha-tile-info { + width: 100%; + flex: none; + } + .icon-container { + position: relative; + flex: none; + margin-right: 10px; + margin-inline-start: initial; + margin-inline-end: 10px; + direction: var(--direction); + transition: transform 180ms ease-in-out; + } + .icon-container ha-tile-icon, + .icon-container ha-tile-image { + --tile-icon-color: var(--tile-color); + user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + } + .icon-container ha-tile-badge { + position: absolute; + top: -3px; + right: -3px; + inset-inline-end: -3px; + inset-inline-start: initial; + } + .icon-container[role="button"] { + pointer-events: auto; + } + .icon-container[role="button"]:focus-visible, + .icon-container[role="button"]:active { + transform: scale(1.2); + } + ha-tile-info { + position: relative; + min-width: 0; + transition: background-color 180ms ease-in-out; + box-sizing: border-box; + } + hui-card-features { + --feature-color: var(--tile-color); + } - ha-tile-icon[data-domain="alarm_control_panel"][data-state="pending"], - ha-tile-icon[data-domain="alarm_control_panel"][data-state="arming"], - ha-tile-icon[data-domain="alarm_control_panel"][data-state="triggered"], - ha-tile-icon[data-domain="lock"][data-state="jammed"] { - animation: pulse 1s infinite; - } + ha-tile-icon[data-domain="alarm_control_panel"][data-state="pending"], + ha-tile-icon[data-domain="alarm_control_panel"][data-state="arming"], + ha-tile-icon[data-domain="alarm_control_panel"][data-state="triggered"], + ha-tile-icon[data-domain="lock"][data-state="jammed"] { + animation: pulse 1s infinite; + } - ha-tile-badge.not-found { - --tile-badge-background-color: var(--red-color); - } + ha-tile-badge.not-found { + --tile-badge-background-color: var(--red-color); + } - @keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } + @keyframes pulse { + 0% { + opacity: 1; } - `; - } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-todo-list-card.ts b/src/panels/lovelace/cards/hui-todo-list-card.ts index 7c41a16df5..21acb32898 100644 --- a/src/panels/lovelace/cards/hui-todo-list-card.ts +++ b/src/panels/lovelace/cards/hui-todo-list-card.ts @@ -11,7 +11,7 @@ import { } from "@mdi/js"; import { endOfDay, isSameDay } from "date-fns"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValueMap, PropertyValues } from "lit"; +import type { PropertyValueMap, PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -592,170 +592,168 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard { await moveItem(this.hass!, this._entityId!, item.uid, prevItem?.uid); } - static get styles(): CSSResultGroup { - return css` - ha-card { - height: 100%; - box-sizing: border-box; - } + static styles = css` + ha-card { + height: 100%; + box-sizing: border-box; + } - .has-header { - padding-top: 0; - } + .has-header { + padding-top: 0; + } - .addRow { - padding: 16px; - padding-bottom: 0; - position: relative; - } + .addRow { + padding: 16px; + padding-bottom: 0; + position: relative; + } - .addRow ha-icon-button { - position: absolute; - right: 16px; - inset-inline-start: initial; - inset-inline-end: 16px; - } + .addRow ha-icon-button { + position: absolute; + right: 16px; + inset-inline-start: initial; + inset-inline-end: 16px; + } - .addRow, - .header { - display: flex; - flex-direction: row; - align-items: center; - } + .addRow, + .header { + display: flex; + flex-direction: row; + align-items: center; + } - .header { - padding-left: 30px; - padding-right: 16px; - padding-inline-start: 30px; - padding-inline-end: 16px; - margin-top: 8px; - justify-content: space-between; - direction: var(--direction); - } + .header { + padding-left: 30px; + padding-right: 16px; + padding-inline-start: 30px; + padding-inline-end: 16px; + margin-top: 8px; + justify-content: space-between; + direction: var(--direction); + } - .header h2 { - color: var(--primary-text-color); - font-size: inherit; - font-weight: 500; - } + .header h2 { + color: var(--primary-text-color); + font-size: inherit; + font-weight: 500; + } - .empty { - padding: 16px 32px; - display: inline-block; - } + .empty { + padding: 16px 32px; + display: inline-block; + } - .item { - margin-top: 8px; - } + .item { + margin-top: 8px; + } - ha-check-list-item { - --mdc-list-item-meta-size: 56px; - min-height: 56px; - height: auto; - } + ha-check-list-item { + --mdc-list-item-meta-size: 56px; + min-height: 56px; + height: auto; + } - ha-check-list-item.multiline { - align-items: flex-start; - --check-list-item-graphic-margin-top: 8px; - } + ha-check-list-item.multiline { + align-items: flex-start; + --check-list-item-graphic-margin-top: 8px; + } - .row { - display: flex; - justify-content: space-between; - } + .row { + display: flex; + justify-content: space-between; + } - .multiline .column { - display: flex; - flex-direction: column; - margin-top: 18px; - margin-bottom: 12px; - } + .multiline .column { + display: flex; + flex-direction: column; + margin-top: 18px; + margin-bottom: 12px; + } - .completed .summary { - text-decoration: line-through; - } + .completed .summary { + text-decoration: line-through; + } - .description, - .due { - font-size: 12px; - color: var(--secondary-text-color); - } + .description, + .due { + font-size: 12px; + color: var(--secondary-text-color); + } - .description { - white-space: initial; - overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 3; - line-clamp: 3; - -webkit-box-orient: vertical; - } + .description { + white-space: initial; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 3; + line-clamp: 3; + -webkit-box-orient: vertical; + } - .description p { - margin: 0; - } + .description p { + margin: 0; + } - .description a { - color: var(--primary-color); - } + .description a { + color: var(--primary-color); + } - .due { - display: flex; - align-items: center; - } + .due { + display: flex; + align-items: center; + } - .due ha-svg-icon { - margin-right: 4px; - margin-inline-end: 4px; - margin-inline-start: initial; - --mdc-icon-size: 14px; - } + .due ha-svg-icon { + margin-right: 4px; + margin-inline-end: 4px; + margin-inline-start: initial; + --mdc-icon-size: 14px; + } - .due.overdue { - color: var(--warning-color); - } + .due.overdue { + color: var(--warning-color); + } - .completed .due.overdue { - color: var(--secondary-text-color); - } + .completed .due.overdue { + color: var(--secondary-text-color); + } - .handle { - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - height: 24px; - padding: 16px 4px; - } + .handle { + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + height: 24px; + padding: 16px 4px; + } - .deleteItemButton { - position: relative; - left: 8px; - inset-inline-start: 8px; - inset-inline-end: initial; - } + .deleteItemButton { + position: relative; + left: 8px; + inset-inline-start: 8px; + inset-inline-end: initial; + } - ha-textfield { - flex-grow: 1; - } + ha-textfield { + flex-grow: 1; + } - .divider { - height: 1px; - background-color: var(--divider-color); - margin: 10px 0; - } + .divider { + height: 1px; + background-color: var(--divider-color); + margin: 10px 0; + } - .clearall { - cursor: pointer; - } + .clearall { + cursor: pointer; + } - .todoList { - display: block; - padding: 8px; - } + .todoList { + display: block; + padding: 8px; + } - .warning { - color: var(--error-color); - } - `; - } + .warning { + color: var(--error-color); + } + `; } declare global { diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts index 7e479a203e..e259211b47 100644 --- a/src/panels/lovelace/cards/hui-vertical-stack-card.ts +++ b/src/panels/lovelace/cards/hui-vertical-stack-card.ts @@ -9,7 +9,7 @@ class HuiVerticalStackCard extends HuiStackCard { return 0; } - const promises: Array | number> = []; + const promises: (Promise | number)[] = []; for (const element of this._cards) { promises.push(computeCardSize(element)); diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts index 36b5345784..1c84c986ba 100644 --- a/src/panels/lovelace/cards/types.ts +++ b/src/panels/lovelace/cards/types.ts @@ -91,7 +91,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig { type: "entities"; show_header_toggle?: boolean; title?: string; - entities: Array; + entities: (LovelaceRowConfig | string)[]; theme?: string; icon?: string; header?: LovelaceHeaderFooterConfig; @@ -204,9 +204,9 @@ export interface EnergySankeyCardConfig extends EnergyCardBaseConfig { export interface EntityFilterCardConfig extends LovelaceCardConfig { type: "entity-filter"; - entities: Array; - state_filter?: Array; - conditions: Array; + entities: (EntityFilterEntityConfig | string)[]; + state_filter?: LegacyStateFilter[]; + conditions: Condition[]; card?: Partial; show_empty?: boolean; } @@ -326,9 +326,9 @@ export interface MapCardConfig extends LovelaceCardConfig { auto_fit?: boolean; fit_zones?: boolean; default_zoom?: number; - entities?: Array; + entities?: (EntityConfig | string)[]; hours_to_show?: number; - geo_location_sources?: Array; + geo_location_sources?: (GeoLocationSourceConfig | string)[]; dark_mode?: boolean; theme_mode?: ThemeMode; } @@ -349,7 +349,7 @@ export interface MediaControlCardConfig extends LovelaceCardConfig { } export interface HistoryGraphCardConfig extends LovelaceCardConfig { - entities: Array; + entities: (EntityConfig | string)[]; hours_to_show?: number; title?: string; show_names?: boolean; @@ -362,7 +362,7 @@ export interface HistoryGraphCardConfig extends LovelaceCardConfig { export interface StatisticsGraphCardConfig extends EnergyCardBaseConfig { title?: string; - entities: Array; + entities: (EntityConfig | string)[]; unit?: string; days_to_show?: number; period?: "5minute" | "hour" | "day" | "month"; @@ -378,7 +378,7 @@ export interface StatisticsGraphCardConfig extends EnergyCardBaseConfig { export interface StatisticCardConfig extends LovelaceCardConfig { name?: string; - entities: Array; + entities: (EntityConfig | string)[]; period: { fixed_period?: { start: string; end: string }; calendar?: { period: string; offset: number }; @@ -432,7 +432,7 @@ export interface PictureEntityCardConfig extends LovelaceCardConfig { } export interface PictureGlanceCardConfig extends LovelaceCardConfig { - entities: Array; + entities: (string | PictureGlanceEntityConfig)[]; title?: string; image?: string; image_entity?: string; diff --git a/src/panels/lovelace/common/compute-card-grid-size.ts b/src/panels/lovelace/common/compute-card-grid-size.ts index 49bc4946ca..0b8d49f17d 100644 --- a/src/panels/lovelace/common/compute-card-grid-size.ts +++ b/src/panels/lovelace/common/compute-card-grid-size.ts @@ -32,10 +32,10 @@ export const DEFAULT_GRID_SIZE = { rows: "auto", } as CardGridSize; -export type CardGridSize = { +export interface CardGridSize { rows: number | "auto"; columns: number | "full"; -}; +} export const isPreciseMode = (options: LovelaceGridOptions) => typeof options.columns === "number" && options.columns % 3 !== 0; diff --git a/src/panels/lovelace/common/compute-unused-entities.ts b/src/panels/lovelace/common/compute-unused-entities.ts index 32fec3b874..4938b432d8 100755 --- a/src/panels/lovelace/common/compute-unused-entities.ts +++ b/src/panels/lovelace/common/compute-unused-entities.ts @@ -20,7 +20,7 @@ const addFromAction = (entities: Set, actionConfig: ActionConfig) => { if (!Array.isArray(entityIds)) { entityIds = [entityIds]; } - for (const entityId of entityIds as Array) { + for (const entityId of entityIds as string[]) { entities.add(entityId); } }; @@ -84,7 +84,7 @@ export const calcUnusedEntities = ( hass: HomeAssistant, usedEntities: Set ): Set => { - const unusedEntities: Set = new Set(); + const unusedEntities = new Set(); for (const entity of Object.keys(hass.states)) { if ( diff --git a/src/panels/lovelace/common/directives/action-handler-directive.ts b/src/panels/lovelace/common/directives/action-handler-directive.ts index f78c1312d2..2b4fff7c92 100644 --- a/src/panels/lovelace/common/directives/action-handler-directive.ts +++ b/src/panels/lovelace/common/directives/action-handler-directive.ts @@ -256,6 +256,7 @@ export const actionHandler = directive( return noChange; } + // eslint-disable-next-line @typescript-eslint/no-empty-function render(_options?: ActionHandlerOptions) {} } ); diff --git a/src/panels/lovelace/common/find-entities.ts b/src/panels/lovelace/common/find-entities.ts index e41e0f4f4f..8901ba4bb1 100644 --- a/src/panels/lovelace/common/find-entities.ts +++ b/src/panels/lovelace/common/find-entities.ts @@ -4,7 +4,7 @@ import type { HomeAssistant } from "../../../types"; const arrayFilter = ( array: any[], - conditions: Array<(value: any) => boolean>, + conditions: ((value: any) => boolean)[], maxSize: number ) => { if (!maxSize || maxSize > array.length) { @@ -39,7 +39,7 @@ export const findEntities = ( includeDomains?: string[], entityFilter?: (stateObj: HassEntity) => boolean ) => { - const conditions: Array<(value: string) => boolean> = []; + const conditions: ((value: string) => boolean)[] = []; if (includeDomains?.length) { conditions.push((eid) => includeDomains!.includes(computeDomain(eid))); diff --git a/src/panels/lovelace/common/generate-lovelace-config.ts b/src/panels/lovelace/common/generate-lovelace-config.ts index f3ff1f2cdf..2ac9cb0dbe 100644 --- a/src/panels/lovelace/common/generate-lovelace-config.ts +++ b/src/panels/lovelace/common/generate-lovelace-config.ts @@ -53,8 +53,8 @@ const HIDE_DOMAIN = new Set([ const HIDE_PLATFORM = new Set(["mobile_app"]); interface SplittedByAreaDevice { - areasWithEntities: { [areaId: string]: HassEntity[] }; - devicesWithEntities: { [deviceId: string]: HassEntity[] }; + areasWithEntities: Record; + devicesWithEntities: Record; otherEntities: HassEntities; } @@ -132,7 +132,7 @@ export const computeCards = ( const cards: LovelaceCardConfig[] = []; // For entity card - const entitiesConf: Array = []; + const entitiesConf: (string | EntityConfig)[] = []; const titlePrefix = entityCardOptions.title ? entityCardOptions.title.toLowerCase() @@ -365,7 +365,7 @@ export const generateViewConfig = ( icon: string | undefined, entities: HassEntities ): LovelaceViewConfig => { - const ungroupedEntitites: { [domain: string]: string[] } = {}; + const ungroupedEntitites: Record = {}; // Organize ungrouped entities in ungrouped things for (const entityId of Object.keys(entities)) { diff --git a/src/panels/lovelace/common/handle-action.ts b/src/panels/lovelace/common/handle-action.ts index e7337ab51c..7434f75f5d 100644 --- a/src/panels/lovelace/common/handle-action.ts +++ b/src/panels/lovelace/common/handle-action.ts @@ -15,14 +15,14 @@ declare global { } } -export type ActionConfigParams = { +export interface ActionConfigParams { entity?: string; camera_image?: string; image_entity?: string; hold_action?: ActionConfig; tap_action?: ActionConfig; double_tap_action?: ActionConfig; -}; +} export const handleAction = async ( node: HTMLElement, diff --git a/src/panels/lovelace/common/process-config-entities.ts b/src/panels/lovelace/common/process-config-entities.ts index da2a4076d9..c51e28ebf8 100644 --- a/src/panels/lovelace/common/process-config-entities.ts +++ b/src/panels/lovelace/common/process-config-entities.ts @@ -5,7 +5,7 @@ import type { EntityConfig, LovelaceRowConfig } from "../entity-rows/types"; export const processConfigEntities = < T extends EntityConfig | LovelaceRowConfig, >( - entities: Array, + entities: (T | string)[], checkEntityId = true ): T[] => { if (!entities || !Array.isArray(entities)) { diff --git a/src/panels/lovelace/common/validate-condition.ts b/src/panels/lovelace/common/validate-condition.ts index e0cf6792fb..cea0baec88 100644 --- a/src/panels/lovelace/common/validate-condition.ts +++ b/src/panels/lovelace/common/validate-condition.ts @@ -188,7 +188,7 @@ export function checkConditionsMet( export function extractConditionEntityIds( conditions: Condition[] ): Set { - const entityIds: Set = new Set(); + const entityIds = new Set(); for (const condition of conditions) { if (condition.condition === "numeric_state") { if ( diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts index 951e85d787..cd1f466840 100644 --- a/src/panels/lovelace/components/hui-action-editor.ts +++ b/src/panels/lovelace/components/hui-action-editor.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -315,45 +315,43 @@ export class HuiActionEditor extends LitElement { fireEvent(this, "value-changed", { value }); } - static get styles(): CSSResultGroup { - return css` - .dropdown { - position: relative; - } - ha-help-tooltip { - position: absolute; - right: 40px; - top: 16px; - inset-inline-start: initial; - inset-inline-end: 40px; - direction: var(--direction); - } - ha-select, - ha-textfield { - width: 100%; - } - ha-service-control, - ha-navigation-picker, - ha-form { - display: block; - } - ha-textfield, - ha-service-control, - ha-navigation-picker, - ha-form { - margin-top: 8px; - } - ha-service-control { - --service-control-padding: 0; - } - ha-formfield { - display: flex; - height: 56px; - align-items: center; - --mdc-typography-body2-font-size: 1em; - } - `; - } + static styles = css` + .dropdown { + position: relative; + } + ha-help-tooltip { + position: absolute; + right: 40px; + top: 16px; + inset-inline-start: initial; + inset-inline-end: 40px; + direction: var(--direction); + } + ha-select, + ha-textfield { + width: 100%; + } + ha-service-control, + ha-navigation-picker, + ha-form { + display: block; + } + ha-textfield, + ha-service-control, + ha-navigation-picker, + ha-form { + margin-top: 8px; + } + ha-service-control { + --service-control-padding: 0; + } + ha-formfield { + display: flex; + height: 56px; + align-items: center; + --mdc-typography-body2-font-size: 1em; + } + `; } declare global { diff --git a/src/panels/lovelace/components/hui-badge-edit-mode.ts b/src/panels/lovelace/components/hui-badge-edit-mode.ts index 9ea28818e8..c765b3e8a5 100644 --- a/src/panels/lovelace/components/hui-badge-edit-mode.ts +++ b/src/panels/lovelace/components/hui-badge-edit-mode.ts @@ -43,13 +43,13 @@ export class HuiBadgeEditMode extends LitElement { public hiddenOverlay = false; @state() - public _menuOpened: boolean = false; + public _menuOpened = false; @state() - public _hover: boolean = false; + public _hover = false; @state() - public _focused: boolean = false; + public _focused = false; @storage({ key: "dashboardBadgeClipboard", diff --git a/src/panels/lovelace/components/hui-card-edit-mode.ts b/src/panels/lovelace/components/hui-card-edit-mode.ts index e6d3921845..ff22edd0c5 100644 --- a/src/panels/lovelace/components/hui-card-edit-mode.ts +++ b/src/panels/lovelace/components/hui-card-edit-mode.ts @@ -49,13 +49,13 @@ export class HuiCardEditMode extends LitElement { public noDuplicate = false; @state() - public _menuOpened: boolean = false; + public _menuOpened = false; @state() - public _hover: boolean = false; + public _hover = false; @state() - public _focused: boolean = false; + public _focused = false; @storage({ key: "dashboardCardClipboard", diff --git a/src/panels/lovelace/components/hui-energy-period-selector.ts b/src/panels/lovelace/components/hui-energy-period-selector.ts index d7419f7db8..503196c629 100644 --- a/src/panels/lovelace/components/hui-energy-period-selector.ts +++ b/src/panels/lovelace/components/hui-energy-period-selector.ts @@ -20,7 +20,7 @@ import { subDays, } from "date-fns"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -541,50 +541,48 @@ export class HuiEnergyPeriodSelector extends SubscribeMixin(LitElement) { energyCollection.refresh(); } - static get styles(): CSSResultGroup { - return css` - .row { - display: flex; - align-items: center; - } - :host .time-handle { - display: flex; - justify-content: flex-end; - align-items: center; - } - :host([narrow]) .time-handle { - margin-left: auto; - margin-inline-start: auto; - margin-inline-end: initial; - } - .label { - display: flex; - align-items: center; - justify-content: flex-end; - font-size: 20px; - margin-left: auto; - margin-inline-start: auto; - margin-inline-end: initial; - } - :host([narrow]) .label { - margin-left: unset; - margin-inline-start: unset; - margin-inline-end: initial; - } - mwc-button { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - flex-shrink: 0; - --mdc-button-outline-color: currentColor; - --primary-color: currentColor; - --mdc-theme-primary: currentColor; - --mdc-theme-on-primary: currentColor; - --mdc-button-disabled-outline-color: var(--disabled-text-color); - --mdc-button-disabled-ink-color: var(--disabled-text-color); - } - `; - } + static styles = css` + .row { + display: flex; + align-items: center; + } + :host .time-handle { + display: flex; + justify-content: flex-end; + align-items: center; + } + :host([narrow]) .time-handle { + margin-left: auto; + margin-inline-start: auto; + margin-inline-end: initial; + } + .label { + display: flex; + align-items: center; + justify-content: flex-end; + font-size: 20px; + margin-left: auto; + margin-inline-start: auto; + margin-inline-end: initial; + } + :host([narrow]) .label { + margin-left: unset; + margin-inline-start: unset; + margin-inline-end: initial; + } + mwc-button { + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + flex-shrink: 0; + --mdc-button-outline-color: currentColor; + --primary-color: currentColor; + --mdc-theme-primary: currentColor; + --mdc-theme-on-primary: currentColor; + --mdc-button-disabled-outline-color: var(--disabled-text-color); + --mdc-button-disabled-ink-color: var(--disabled-text-color); + } + `; } declare global { diff --git a/src/panels/lovelace/components/hui-entities-toggle.ts b/src/panels/lovelace/components/hui-entities-toggle.ts index a4379b0821..76a2758698 100644 --- a/src/panels/lovelace/components/hui-entities-toggle.ts +++ b/src/panels/lovelace/components/hui-entities-toggle.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { DOMAINS_TOGGLE } from "../../../common/const"; @@ -46,18 +46,16 @@ class HuiEntitiesToggle extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - width: 38px; - display: block; - } - ha-switch { - padding: 13px 5px; - margin: -4px -8px; - } - `; - } + static styles = css` + :host { + width: 38px; + display: block; + } + ha-switch { + padding: 13px 5px; + margin: -4px -8px; + } + `; private _callService(ev: MouseEvent): void { forwardHaptic("light"); diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts index 7a8e94f119..7e77ffa041 100644 --- a/src/panels/lovelace/components/hui-entity-editor.ts +++ b/src/panels/lovelace/components/hui-entity-editor.ts @@ -1,5 +1,4 @@ import { mdiDrag } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -120,38 +119,36 @@ export class HuiEntityEditor extends LitElement { fireEvent(this, "entities-changed", { entities: newConfigEntities }); } - static get styles(): CSSResultGroup { - return css` - ha-entity-picker { - margin-top: 8px; - } - .add-entity { - display: block; - margin-left: 31px; - margin-inline-start: 31px; - margin-inline-end: initial; - direction: var(--direction); - } - .entity { - display: flex; - align-items: center; - } - .entity .handle { - padding-right: 8px; - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - padding-inline-end: 8px; - padding-inline-start: initial; - direction: var(--direction); - } - .entity .handle > * { - pointer-events: none; - } - .entity ha-entity-picker { - flex-grow: 1; - } - `; - } + static styles = css` + ha-entity-picker { + margin-top: 8px; + } + .add-entity { + display: block; + margin-left: 31px; + margin-inline-start: 31px; + margin-inline-end: initial; + direction: var(--direction); + } + .entity { + display: flex; + align-items: center; + } + .entity .handle { + padding-right: 8px; + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + padding-inline-end: 8px; + padding-inline-start: initial; + direction: var(--direction); + } + .entity .handle > * { + pointer-events: none; + } + .entity ha-entity-picker { + flex-grow: 1; + } + `; } declare global { diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts index d24800bd7b..9a38709b47 100644 --- a/src/panels/lovelace/components/hui-generic-entity-row.ts +++ b/src/panels/lovelace/components/hui-generic-entity-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -188,55 +188,53 @@ export class HuiGenericEntityRow extends LitElement { handleAction(this, this.hass!, this.config!, ev.detail.action!); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - flex-direction: row; - } - .info { - margin-left: 16px; - margin-right: 8px; - margin-inline-start: 16px; - margin-inline-end: 8px; - flex: 1 1 30%; - } - .info, - .info > * { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .flex ::slotted(*) { - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - min-width: 0; - } - .flex ::slotted([slot="secondary"]) { - margin-left: 0; - margin-inline-start: 0; - margin-inline-end: initial; - } - .secondary, - ha-relative-time { - color: var(--secondary-text-color); - } - state-badge { - flex: 0 0 40px; - } - .pointer { - cursor: pointer; - } - .state { - text-align: var(--float-end); - } - .value { - direction: ltr; - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + flex-direction: row; + } + .info { + margin-left: 16px; + margin-right: 8px; + margin-inline-start: 16px; + margin-inline-end: 8px; + flex: 1 1 30%; + } + .info, + .info > * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .flex ::slotted(*) { + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + min-width: 0; + } + .flex ::slotted([slot="secondary"]) { + margin-left: 0; + margin-inline-start: 0; + margin-inline-end: initial; + } + .secondary, + ha-relative-time { + color: var(--secondary-text-color); + } + state-badge { + flex: 0 0 40px; + } + .pointer { + cursor: pointer; + } + .state { + text-align: var(--float-end); + } + .value { + direction: ltr; + } + `; } declare global { diff --git a/src/panels/lovelace/components/hui-graph-base.ts b/src/panels/lovelace/components/hui-graph-base.ts index 7034f88388..e82f9e8548 100644 --- a/src/panels/lovelace/components/hui-graph-base.ts +++ b/src/panels/lovelace/components/hui-graph-base.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, svg } from "lit"; import { customElement, property, state } from "lit/decorators"; import { strokeWidth } from "../../../data/graph"; @@ -50,17 +50,15 @@ export class HuiGraphBase extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - width: 100%; - } - .fill { - opacity: 0.1; - } - `; - } + static styles = css` + :host { + display: flex; + width: 100%; + } + .fill { + opacity: 0.1; + } + `; } declare global { diff --git a/src/panels/lovelace/components/hui-image.ts b/src/panels/lovelace/components/hui-image.ts index 81f38a0acb..7766446567 100644 --- a/src/panels/lovelace/components/hui-image.ts +++ b/src/panels/lovelace/components/hui-image.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -28,9 +28,7 @@ const enum LoadState { Error = 3, } -export interface StateSpecificConfig { - [state: string]: string; -} +export type StateSpecificConfig = Record; @customElement("hui-image") export class HuiImage extends LitElement { @@ -389,70 +387,68 @@ export class HuiImage extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } + static styles = css` + :host { + display: block; + } - .container { - transition: filter 0.2s linear; - height: 100%; - } + .container { + transition: filter 0.2s linear; + height: 100%; + } - img { - display: block; - height: 100%; - width: 100%; - object-fit: cover; - } + img { + display: block; + height: 100%; + width: 100%; + object-fit: cover; + } - .progress-container { - display: flex; - justify-content: center; - align-items: center; - } + .progress-container { + display: flex; + justify-content: center; + align-items: center; + } - .ratio { - position: relative; - width: 100%; - height: 0; - background-position: center; - background-size: cover; - } - .ratio.fill { - background-size: 100% 100%; - } - .ratio.contain { - background-size: contain; - background-repeat: no-repeat; - } - .fill img { - object-fit: fill; - } - .contain img { - object-fit: contain; - } + .ratio { + position: relative; + width: 100%; + height: 0; + background-position: center; + background-size: cover; + } + .ratio.fill { + background-size: 100% 100%; + } + .ratio.contain { + background-size: contain; + background-repeat: no-repeat; + } + .fill img { + object-fit: fill; + } + .contain img { + object-fit: contain; + } - .ratio img, - .ratio div { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } + .ratio img, + .ratio div { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } - .ratio img { - visibility: hidden; - } + .ratio img { + visibility: hidden; + } - #brokenImage { - background: grey url("/static/images/image-broken.svg") center/36px - no-repeat; - } - `; - } + #brokenImage { + background: grey url("/static/images/image-broken.svg") center/36px + no-repeat; + } + `; } declare global { diff --git a/src/panels/lovelace/components/hui-marquee.ts b/src/panels/lovelace/components/hui-marquee.ts index 2f3a3afb10..4cf37569f9 100644 --- a/src/panels/lovelace/components/hui-marquee.ts +++ b/src/panels/lovelace/components/hui-marquee.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; @@ -58,51 +58,49 @@ class HuiMarquee extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - position: relative; - align-items: center; - height: 1.2em; - contain: strict; - } + static styles = css` + :host { + display: flex; + position: relative; + align-items: center; + height: 1.2em; + contain: strict; + } - .marquee-inner { - position: absolute; - left: 0; - right: 0; - text-overflow: ellipsis; - overflow: hidden; - } + .marquee-inner { + position: absolute; + left: 0; + right: 0; + text-overflow: ellipsis; + overflow: hidden; + } - :host(.hovering) .marquee-inner { - text-overflow: initial; - overflow: initial; - } + :host(.hovering) .marquee-inner { + text-overflow: initial; + overflow: initial; + } - :host([animating]) .marquee-inner { - left: initial; - right: initial; - animation: marquee 10s linear infinite; - } + :host([animating]) .marquee-inner { + left: initial; + right: initial; + animation: marquee 10s linear infinite; + } - :host([animating]) .marquee-inner span { - padding-right: 16px; - padding-inline-end: 16px; - padding-inline-start: initial; - } + :host([animating]) .marquee-inner span { + padding-right: 16px; + padding-inline-end: 16px; + padding-inline-start: initial; + } - @keyframes marquee { - 0% { - transform: translateX(0%); - } - 100% { - transform: translateX(-50%); - } + @keyframes marquee { + 0% { + transform: translateX(0%); } - `; - } + 100% { + transform: translateX(-50%); + } + } + `; } declare global { diff --git a/src/panels/lovelace/components/hui-timestamp-display.ts b/src/panels/lovelace/components/hui-timestamp-display.ts index 84d5cde3ae..cc7ed22f47 100644 --- a/src/panels/lovelace/components/hui-timestamp-display.ts +++ b/src/panels/lovelace/components/hui-timestamp-display.ts @@ -11,13 +11,10 @@ import type { FrontendLocaleData } from "../../../data/translation"; import type { HomeAssistant } from "../../../types"; import type { TimestampRenderingFormat } from "./types"; -const FORMATS: { - [key: string]: ( - ts: Date, - lang: FrontendLocaleData, - config: HassConfig - ) => string; -} = { +const FORMATS: Record< + string, + (ts: Date, lang: FrontendLocaleData, config: HassConfig) => string +> = { date: formatDate, datetime: formatDateTime, time: formatTime, diff --git a/src/panels/lovelace/components/hui-warning-element.ts b/src/panels/lovelace/components/hui-warning-element.ts index dc9c4ab376..b8a9e86097 100644 --- a/src/panels/lovelace/components/hui-warning-element.ts +++ b/src/panels/lovelace/components/hui-warning-element.ts @@ -1,5 +1,5 @@ import { mdiAlertOutline } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../../../components/ha-svg-icon"; @@ -14,13 +14,11 @@ export class HuiWarningElement extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-svg-icon { - color: var(--warning-color); - } - `; - } + static styles = css` + ha-svg-icon { + color: var(--warning-color); + } + `; } declare global { diff --git a/src/panels/lovelace/create-element/create-card-feature-element.ts b/src/panels/lovelace/create-element/create-card-feature-element.ts index 6c9799d18b..8cad72f8a8 100644 --- a/src/panels/lovelace/create-element/create-card-feature-element.ts +++ b/src/panels/lovelace/create-element/create-card-feature-element.ts @@ -32,7 +32,7 @@ import { getLovelaceElementClass, } from "./create-element-base"; -const TYPES: Set = new Set([ +const TYPES = new Set([ "alarm-modes", "climate-fan-modes", "climate-swing-modes", diff --git a/src/panels/lovelace/create-element/create-element-base.ts b/src/panels/lovelace/create-element/create-element-base.ts index 8cf097f775..d509c18a85 100644 --- a/src/panels/lovelace/create-element/create-element-base.ts +++ b/src/panels/lovelace/create-element/create-element-base.ts @@ -232,7 +232,7 @@ export const createLovelaceElement = ( tagSuffix: T, config: CreateElementConfigTypes[T]["config"], alwaysLoadTypes?: Set, - lazyLoadTypes?: { [domain: string]: () => Promise }, + lazyLoadTypes?: Record Promise>, // Allow looking at "entity" in config and mapping that to a type domainTypes?: { _domain_not_found: string; [domain: string]: string }, // Default type if no type given. If given, entity types will not work. @@ -260,7 +260,7 @@ export const tryCreateLovelaceElement = < tagSuffix: T, config: CreateElementConfigTypes[T]["config"], alwaysLoadTypes?: Set, - lazyLoadTypes?: { [domain: string]: () => Promise }, + lazyLoadTypes?: Record Promise>, // Allow looking at "entity" in config and mapping that to a type domainTypes?: { _domain_not_found: string; [domain: string]: string }, // Default type if no type given. If given, entity types will not work. @@ -321,7 +321,7 @@ export const getLovelaceElementClass = async < type: string, tagSuffix: T, alwaysLoadTypes?: Set, - lazyLoadTypes?: { [domain: string]: () => Promise } + lazyLoadTypes?: Record Promise> ): Promise => { const customTag = _getCustomTag(type); diff --git a/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts b/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts index c152db3e1e..e0e8e9605f 100644 --- a/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts +++ b/src/panels/lovelace/editor/card-editor/ha-grid-layout-slider.ts @@ -1,5 +1,5 @@ import { DIRECTION_ALL, Manager, Pan, Tap } from "@egjs/hammerjs"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -337,220 +337,218 @@ export class HaGridLayoutSlider extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - --grid-layout-slider: 36px; - height: var(--grid-layout-slider); - width: 100%; - outline: none; - transition: box-shadow 180ms ease-in-out; - } - :host(:focus-visible) { - box-shadow: 0 0 0 2px var(--primary-color); - } - :host([vertical]) { - width: var(--grid-layout-slider); - height: 100%; - } - .container { - position: relative; - height: 100%; - width: 100%; - } - .slider { - position: relative; - height: 100%; - width: 100%; - transform: translateZ(0); - overflow: visible; - cursor: pointer; - } - .slider * { - pointer-events: none; - user-select: none; - } - .track { - position: absolute; - inset: 0; - margin: auto; - height: 16px; - width: 100%; - border-radius: 8px; - overflow: hidden; - } - :host([vertical]) .track { - width: 16px; - height: 100%; - } - .background { - position: absolute; - inset: 0; - background: var(--disabled-color); - opacity: 0.4; - } - .active { - position: absolute; - background: var(--primary-color); - top: 0; - right: calc(var(--max) * 100%); - bottom: 0; - left: calc(var(--min) * 100%); - } - :host([vertical]) .active { - top: calc(var(--min) * 100%); - right: 0; - bottom: calc(var(--max) * 100%); - left: 0; - } - .handle { - position: absolute; - top: 0; - height: 100%; - width: 16px; - transform: translate(-50%, 0); - background: var(--card-background-color); - left: calc(var(--value, 0%) * 100%); - transition: - left 180ms ease-in-out, - top 180ms ease-in-out; - } - :host([vertical]) .handle { - transform: translate(0, -50%); - left: 0; - top: calc(var(--value, 0%) * 100%); - height: 16px; - width: 100%; - } - .dot { - position: absolute; - top: 0; - bottom: 0; - opacity: 0.6; - margin: auto; - width: 4px; - height: 4px; - flex-shrink: 0; - transform: translate(-50%, 0); - background: var(--card-background-color); - left: calc(var(--value, 0%) * 100%); - border-radius: 2px; - } - :host([vertical]) .dot { - transform: translate(0, -50%); - left: 0; - right: 0; - bottom: inherit; - top: calc(var(--value, 0%) * 100%); - } - .handle::after { - position: absolute; - inset: 0; - width: 4px; - border-radius: 2px; - height: 100%; - margin: auto; - background: var(--primary-color); - content: ""; - } - :host([vertical]) .handle::after { - height: 4px; - width: 100%; - } - :host(:disabled) .slider { - cursor: not-allowed; - } - :host(:disabled) .handle:after { - background: var(--disabled-color); - } - :host(:disabled) .active { - background: var(--disabled-color); - } + static styles = css` + :host { + display: block; + --grid-layout-slider: 36px; + height: var(--grid-layout-slider); + width: 100%; + outline: none; + transition: box-shadow 180ms ease-in-out; + } + :host(:focus-visible) { + box-shadow: 0 0 0 2px var(--primary-color); + } + :host([vertical]) { + width: var(--grid-layout-slider); + height: 100%; + } + .container { + position: relative; + height: 100%; + width: 100%; + } + .slider { + position: relative; + height: 100%; + width: 100%; + transform: translateZ(0); + overflow: visible; + cursor: pointer; + } + .slider * { + pointer-events: none; + user-select: none; + } + .track { + position: absolute; + inset: 0; + margin: auto; + height: 16px; + width: 100%; + border-radius: 8px; + overflow: hidden; + } + :host([vertical]) .track { + width: 16px; + height: 100%; + } + .background { + position: absolute; + inset: 0; + background: var(--disabled-color); + opacity: 0.4; + } + .active { + position: absolute; + background: var(--primary-color); + top: 0; + right: calc(var(--max) * 100%); + bottom: 0; + left: calc(var(--min) * 100%); + } + :host([vertical]) .active { + top: calc(var(--min) * 100%); + right: 0; + bottom: calc(var(--max) * 100%); + left: 0; + } + .handle { + position: absolute; + top: 0; + height: 100%; + width: 16px; + transform: translate(-50%, 0); + background: var(--card-background-color); + left: calc(var(--value, 0%) * 100%); + transition: + left 180ms ease-in-out, + top 180ms ease-in-out; + } + :host([vertical]) .handle { + transform: translate(0, -50%); + left: 0; + top: calc(var(--value, 0%) * 100%); + height: 16px; + width: 100%; + } + .dot { + position: absolute; + top: 0; + bottom: 0; + opacity: 0.6; + margin: auto; + width: 4px; + height: 4px; + flex-shrink: 0; + transform: translate(-50%, 0); + background: var(--card-background-color); + left: calc(var(--value, 0%) * 100%); + border-radius: 2px; + } + :host([vertical]) .dot { + transform: translate(0, -50%); + left: 0; + right: 0; + bottom: inherit; + top: calc(var(--value, 0%) * 100%); + } + .handle::after { + position: absolute; + inset: 0; + width: 4px; + border-radius: 2px; + height: 100%; + margin: auto; + background: var(--primary-color); + content: ""; + } + :host([vertical]) .handle::after { + height: 4px; + width: 100%; + } + :host(:disabled) .slider { + cursor: not-allowed; + } + :host(:disabled) .handle:after { + background: var(--disabled-color); + } + :host(:disabled) .active { + background: var(--disabled-color); + } - .tooltip { - position: absolute; - background-color: var(--clear-background-color); - color: var(--primary-text-color); - font-size: var(--control-slider-tooltip-font-size); - border-radius: 0.8em; - padding: 0.2em 0.4em; - opacity: 0; - white-space: nowrap; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - transition: - opacity 180ms ease-in-out, - left 180ms ease-in-out, - bottom 180ms ease-in-out; - --handle-spacing: calc(2 * var(--handle-margin) + var(--handle-size)); - --slider-tooltip-margin: 0px; - --slider-tooltip-range: 100%; - --slider-tooltip-offset: 0px; - --slider-tooltip-position: calc( - min( - max( - var(--value) * var(--slider-tooltip-range) + - var(--slider-tooltip-offset), - 0% - ), - 100% - ) - ); - } - .tooltip.start { - --slider-tooltip-offset: calc(-0.5 * (var(--handle-spacing))); - } - .tooltip.end { - --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); - } - .tooltip.cursor { - --slider-tooltip-range: calc(100% - var(--handle-spacing)); - --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); - } - .tooltip.show-handle { - --slider-tooltip-range: calc(100% - var(--handle-spacing)); - --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); - } - .tooltip.visible { - opacity: 1; - } - .tooltip.top { - transform: translate3d(-50%, -100%, 0); - top: var(--slider-tooltip-margin); - left: 50%; - } - .tooltip.bottom { - transform: translate3d(-50%, 100%, 0); - bottom: var(--slider-tooltip-margin); - left: 50%; - } - .tooltip.left { - transform: translate3d(-100%, -50%, 0); - top: 50%; - left: var(--slider-tooltip-margin); - } - .tooltip.right { - transform: translate3d(100%, -50%, 0); - top: 50%; - right: var(--slider-tooltip-margin); - } - :host(:not([vertical])) .tooltip.top, - :host(:not([vertical])) .tooltip.bottom { - left: var(--slider-tooltip-position); - } - :host([vertical]) .tooltip.right, - :host([vertical]) .tooltip.left { - top: var(--slider-tooltip-position); - } + .tooltip { + position: absolute; + background-color: var(--clear-background-color); + color: var(--primary-text-color); + font-size: var(--control-slider-tooltip-font-size); + border-radius: 0.8em; + padding: 0.2em 0.4em; + opacity: 0; + white-space: nowrap; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + transition: + opacity 180ms ease-in-out, + left 180ms ease-in-out, + bottom 180ms ease-in-out; + --handle-spacing: calc(2 * var(--handle-margin) + var(--handle-size)); + --slider-tooltip-margin: 0px; + --slider-tooltip-range: 100%; + --slider-tooltip-offset: 0px; + --slider-tooltip-position: calc( + min( + max( + var(--value) * var(--slider-tooltip-range) + + var(--slider-tooltip-offset), + 0% + ), + 100% + ) + ); + } + .tooltip.start { + --slider-tooltip-offset: calc(-0.5 * (var(--handle-spacing))); + } + .tooltip.end { + --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); + } + .tooltip.cursor { + --slider-tooltip-range: calc(100% - var(--handle-spacing)); + --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); + } + .tooltip.show-handle { + --slider-tooltip-range: calc(100% - var(--handle-spacing)); + --slider-tooltip-offset: calc(0.5 * (var(--handle-spacing))); + } + .tooltip.visible { + opacity: 1; + } + .tooltip.top { + transform: translate3d(-50%, -100%, 0); + top: var(--slider-tooltip-margin); + left: 50%; + } + .tooltip.bottom { + transform: translate3d(-50%, 100%, 0); + bottom: var(--slider-tooltip-margin); + left: 50%; + } + .tooltip.left { + transform: translate3d(-100%, -50%, 0); + top: 50%; + left: var(--slider-tooltip-margin); + } + .tooltip.right { + transform: translate3d(100%, -50%, 0); + top: 50%; + right: var(--slider-tooltip-margin); + } + :host(:not([vertical])) .tooltip.top, + :host(:not([vertical])) .tooltip.bottom { + left: var(--slider-tooltip-position); + } + :host([vertical]) .tooltip.right, + :host([vertical]) .tooltip.left { + top: var(--slider-tooltip-position); + } - .pressed .handle { - transition: none; - } - .pressed .tooltip { - transition: opacity 180ms ease-in-out; - } - `; - } + .pressed .handle { + transition: none; + } + .pressed .tooltip { + transition: opacity 180ms ease-in-out; + } + `; } declare global { diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts index a46dda6304..c794c783da 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts @@ -1,6 +1,6 @@ import "@material/mwc-tab-bar/mwc-tab-bar"; import "@material/mwc-tab/mwc-tab"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card"; @@ -118,18 +118,15 @@ export class HuiCardElementEditor extends HuiTypedElementEditor [m, b])); -type ScreenConditionData = { +interface ScreenConditionData { breakpoints: Breakpoint[]; -}; +} @customElement("ha-card-condition-screen") export class HaCardConditionScreen extends LitElement { diff --git a/src/panels/lovelace/editor/conditions/types/ha-card-condition-state.ts b/src/panels/lovelace/editor/conditions/types/ha-card-condition-state.ts index e6012b983f..66338de79a 100644 --- a/src/panels/lovelace/editor/conditions/types/ha-card-condition-state.ts +++ b/src/panels/lovelace/editor/conditions/types/ha-card-condition-state.ts @@ -20,12 +20,12 @@ const stateConditionStruct = object({ state_not: optional(string()), }); -type StateConditionData = { +interface StateConditionData { condition: "state"; entity?: string; invert: "true" | "false"; state?: string | string[]; -}; +} @customElement("ha-card-condition-state") export class HaCardConditionState extends LitElement { diff --git a/src/panels/lovelace/editor/conditions/types/ha-card-condition-user.ts b/src/panels/lovelace/editor/conditions/types/ha-card-condition-user.ts index f2cbded7bc..abeb281d4e 100644 --- a/src/panels/lovelace/editor/conditions/types/ha-card-condition-user.ts +++ b/src/panels/lovelace/editor/conditions/types/ha-card-condition-user.ts @@ -105,16 +105,14 @@ export class HaCardConditionUser extends LitElement { fireEvent(this, "value-changed", { value: condition }); } - static get styles() { - return css` - :host { - display: block; - } - mwc-list { - --mdc-list-vertical-padding: 0; - } - `; - } + static styles = css` + :host { + display: block; + } + mwc-list { + --mdc-list-vertical-padding: 0; + } + `; } declare global { diff --git a/src/panels/lovelace/editor/config-elements/elements/hui-service-button-element-editor.ts b/src/panels/lovelace/editor/config-elements/elements/hui-service-button-element-editor.ts index bae96f0a61..9cd2088342 100644 --- a/src/panels/lovelace/editor/config-elements/elements/hui-service-button-element-editor.ts +++ b/src/panels/lovelace/editor/config-elements/elements/hui-service-button-element-editor.ts @@ -106,15 +106,13 @@ export class HuiServiceButtonElementEditor this.hass!.localize(`ui.panel.lovelace.editor.elements.${schema.name}`) || schema.name; - static get styles() { - return css` - ha-service-control { - display: block; - margin-top: 16px; - --service-control-padding: 0; - } - `; - } + static styles = css` + ha-service-control { + display: block; + margin-top: 16px; + --service-control-padding: 0; + } + `; } declare global { diff --git a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts index 8018de2344..32170317b1 100644 --- a/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts @@ -1,6 +1,5 @@ import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -400,61 +399,59 @@ export class HuiCardFeaturesEditor extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex !important; - flex-direction: column; - } - ha-button-menu { - margin-top: 8px; - } - .feature { - display: flex; - align-items: center; - } - .feature .handle { - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - padding-right: 8px; - padding-inline-end: 8px; - padding-inline-start: initial; - direction: var(--direction); - } - .feature .handle > * { - pointer-events: none; - } + static styles = css` + :host { + display: flex !important; + flex-direction: column; + } + ha-button-menu { + margin-top: 8px; + } + .feature { + display: flex; + align-items: center; + } + .feature .handle { + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + padding-right: 8px; + padding-inline-end: 8px; + padding-inline-start: initial; + direction: var(--direction); + } + .feature .handle > * { + pointer-events: none; + } - .feature-content { - height: 60px; - font-size: 16px; - display: flex; - align-items: center; - justify-content: space-between; - flex-grow: 1; - } + .feature-content { + height: 60px; + font-size: 16px; + display: flex; + align-items: center; + justify-content: space-between; + flex-grow: 1; + } - .feature-content div { - display: flex; - flex-direction: column; - } + .feature-content div { + display: flex; + flex-direction: column; + } - .remove-icon, - .edit-icon { - --mdc-icon-button-size: 36px; - color: var(--secondary-text-color); - } + .remove-icon, + .edit-icon { + --mdc-icon-button-size: 36px; + color: var(--secondary-text-color); + } - .secondary { - font-size: 12px; - color: var(--secondary-text-color); - } + .secondary { + font-size: 12px; + color: var(--secondary-text-color); + } - li[divider] { - border-bottom-color: var(--divider-color); - } - `; - } + li[divider] { + border-bottom-color: var(--divider-color); + } + `; } declare global { diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts index de46a95c03..47b172d615 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts @@ -320,8 +320,8 @@ export class HuiEntitiesCardEditor : target.value || ev.detail.config || ev.detail.value; if ( - (configValue! === "title" && target.value === this._title) || - (configValue! === "theme" && target.value === this._theme) + (configValue === "title" && target.value === this._title) || + (configValue === "theme" && target.value === this._theme) ) { return; } diff --git a/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts b/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts index a54c81c001..70d8c9b6ae 100644 --- a/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts @@ -68,7 +68,7 @@ export class HuiGenericEntityRowEditor !("domains" in SECONDARY_INFO_VALUES[info]) || ("domains" in SECONDARY_INFO_VALUES[info] && SECONDARY_INFO_VALUES[info].domains!.includes(domain)) - ) as Array + ) as (keyof typeof SECONDARY_INFO_VALUES)[] ).map((info) => ({ value: info, label: localize( diff --git a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts index f15b389522..0b597a3d41 100644 --- a/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts @@ -1,6 +1,5 @@ import { mdiDelete, mdiDrag, mdiPencil, mdiPlus } from "@mdi/js"; import type { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -225,75 +224,73 @@ export class HuiHeadingBadgesEditor extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex !important; - flex-direction: column; - } - ha-button { - margin-top: 8px; - } - .badge { - display: flex; - align-items: center; - } - .badge .handle { - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - padding-right: 8px; - padding-inline-end: 8px; - padding-inline-start: initial; - direction: var(--direction); - } - .badge .handle > * { - pointer-events: none; - } + static styles = css` + :host { + display: flex !important; + flex-direction: column; + } + ha-button { + margin-top: 8px; + } + .badge { + display: flex; + align-items: center; + } + .badge .handle { + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + padding-right: 8px; + padding-inline-end: 8px; + padding-inline-start: initial; + direction: var(--direction); + } + .badge .handle > * { + pointer-events: none; + } - .badge-content { - height: 60px; - font-size: 16px; - display: flex; - align-items: center; - justify-content: space-between; - flex-grow: 1; - } + .badge-content { + height: 60px; + font-size: 16px; + display: flex; + align-items: center; + justify-content: space-between; + flex-grow: 1; + } - .badge-content div { - display: flex; - flex-direction: column; - } + .badge-content div { + display: flex; + flex-direction: column; + } - .remove-icon, - .edit-icon { - --mdc-icon-button-size: 36px; - color: var(--secondary-text-color); - } + .remove-icon, + .edit-icon { + --mdc-icon-button-size: 36px; + color: var(--secondary-text-color); + } - .secondary { - font-size: 12px; - color: var(--secondary-text-color); - } + .secondary { + font-size: 12px; + color: var(--secondary-text-color); + } - li[divider] { - border-bottom-color: var(--divider-color); - } + li[divider] { + border-bottom-color: var(--divider-color); + } - .add-container { - position: relative; - width: 100%; - } + .add-container { + position: relative; + width: 100%; + } - mwc-menu-surface { - --mdc-menu-min-width: 100%; - } + mwc-menu-surface { + --mdc-menu-min-width: 100%; + } - ha-entity-picker { - display: block; - width: 100%; - } - `; - } + ha-entity-picker { + display: block; + width: 100%; + } + `; } declare global { diff --git a/src/panels/lovelace/editor/config-elements/hui-state-label-badge-editor.ts b/src/panels/lovelace/editor/config-elements/hui-state-label-badge-editor.ts index 8c5d047bf5..e76179b176 100644 --- a/src/panels/lovelace/editor/config-elements/hui-state-label-badge-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-state-label-badge-editor.ts @@ -1,7 +1,10 @@ import { customElement } from "lit/decorators"; import { assert, assign, boolean, object, optional, string } from "superstruct"; import "../../../../components/ha-form/ha-form"; -import type { EntityBadgeConfig } from "../../badges/types"; +import type { + EntityBadgeConfig, + StateLabelBadgeConfig, +} from "../../badges/types"; import "../hui-sub-element-editor"; import { actionConfigStruct } from "../structs/action-struct"; import { baseLovelaceBadgeConfig } from "../structs/base-badge-struct"; @@ -33,7 +36,6 @@ export class HuiStateLabelBadgeEditor extends HuiEntityBadgeEditor { show_name: config.show_name ?? true, }; - // @ts-ignore super.setConfig(entityBadgeConfig); } } diff --git a/src/panels/lovelace/editor/delete-badge.ts b/src/panels/lovelace/editor/delete-badge.ts index d08c93c170..8ee3c1eba7 100644 --- a/src/panels/lovelace/editor/delete-badge.ts +++ b/src/panels/lovelace/editor/delete-badge.ts @@ -3,7 +3,10 @@ import type { Lovelace } from "../types"; import { deleteBadge } from "./config-util"; import type { LovelaceCardPath } from "./lovelace-path"; -export type DeleteBadgeParams = { path: LovelaceCardPath; silent: boolean }; +export interface DeleteBadgeParams { + path: LovelaceCardPath; + silent: boolean; +} export async function performDeleteBadge( hass: HomeAssistant, diff --git a/src/panels/lovelace/editor/delete-card.ts b/src/panels/lovelace/editor/delete-card.ts index 48def747c9..71c37b85e3 100644 --- a/src/panels/lovelace/editor/delete-card.ts +++ b/src/panels/lovelace/editor/delete-card.ts @@ -3,7 +3,10 @@ import type { Lovelace } from "../types"; import { deleteCard } from "./config-util"; import type { LovelaceCardPath } from "./lovelace-path"; -export type DeleteCardParams = { path: LovelaceCardPath; silent: boolean }; +export interface DeleteCardParams { + path: LovelaceCardPath; + silent: boolean; +} export async function performDeleteCard( hass: HomeAssistant, diff --git a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts index a60f634ccc..bb497c4fb4 100644 --- a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts +++ b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts @@ -22,7 +22,7 @@ export class HuiRowElementEditor extends HuiTypedElementEditor { - if (this.configElementType! === GENERIC_ROW_TYPE) { + if (this.configElementType === GENERIC_ROW_TYPE) { return document.createElement("hui-generic-entity-row-editor"); } 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 b0ac33caa0..17f3f2cfb9 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 @@ -1,5 +1,5 @@ import { mdiClose, mdiPencil, mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; @@ -97,35 +97,33 @@ export class HuiHeaderFooterEditor extends LitElement { fireEvent(this, "value-changed", { value: "" }); } - static get styles(): CSSResultGroup { - return css` - :host { - font-size: 16px; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - padding-bottom: 12px; - } + static styles = css` + :host { + font-size: 16px; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + padding-bottom: 12px; + } - :host > div { - display: flex; - align-items: center; - } + :host > div { + display: flex; + align-items: center; + } - ha-icon-button, - .header-footer-icon { - --mdc-icon-button-size: 36px; - color: var(--secondary-text-color); - } + ha-icon-button, + .header-footer-icon { + --mdc-icon-button-size: 36px; + color: var(--secondary-text-color); + } - .header-footer-icon { - padding-right: 8px; - padding-inline-end: 8px; - padding-inline-start: initial; - } - `; - } + .header-footer-icon { + padding-right: 8px; + padding-inline-end: 8px; + padding-inline-start: initial; + } + `; } declare global { diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts index 8032004b6c..e181dd8dcc 100644 --- a/src/panels/lovelace/editor/hui-element-editor.ts +++ b/src/panels/lovelace/editor/hui-element-editor.ts @@ -456,25 +456,23 @@ export abstract class HuiElementEditor< ev.stopPropagation(); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - } - .wrapper { - width: 100%; - } - .gui-editor, - .yaml-editor { - padding: 8px 0px; - } - ha-code-editor { - --code-mirror-max-height: calc(100vh - 245px); - } - ha-circular-progress { - display: block; - margin: auto; - } - `; - } + static styles = css` + :host { + display: flex; + } + .wrapper { + width: 100%; + } + .gui-editor, + .yaml-editor { + padding: 8px 0px; + } + ha-code-editor { + --code-mirror-max-height: calc(100vh - 245px); + } + ha-circular-progress { + display: block; + margin: auto; + } + ` as CSSResultGroup; } 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 1fe8292f5f..06d9ab0f35 100644 --- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts +++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts @@ -1,5 +1,4 @@ import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -180,66 +179,64 @@ export class HuiEntitiesCardRowEditor extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - ha-entity-picker { - margin-top: 8px; - } - .add-entity { - display: block; - margin-left: 31px; - margin-right: 71px; - margin-inline-start: 31px; - margin-inline-end: 71px; - direction: var(--direction); - } - .entity { - display: flex; - align-items: center; - } + static styles = css` + ha-entity-picker { + margin-top: 8px; + } + .add-entity { + display: block; + margin-left: 31px; + margin-right: 71px; + margin-inline-start: 31px; + margin-inline-end: 71px; + direction: var(--direction); + } + .entity { + display: flex; + align-items: center; + } - .entity .handle { - padding-right: 8px; - cursor: move; /* fallback if grab cursor is unsupported */ - cursor: grab; - padding-inline-end: 8px; - padding-inline-start: initial; - direction: var(--direction); - } - .entity .handle > * { - pointer-events: none; - } + .entity .handle { + padding-right: 8px; + cursor: move; /* fallback if grab cursor is unsupported */ + cursor: grab; + padding-inline-end: 8px; + padding-inline-start: initial; + direction: var(--direction); + } + .entity .handle > * { + pointer-events: none; + } - .entity ha-entity-picker { - flex-grow: 1; - } + .entity ha-entity-picker { + flex-grow: 1; + } - .special-row { - height: 60px; - font-size: 16px; - display: flex; - align-items: center; - justify-content: space-between; - flex-grow: 1; - } + .special-row { + height: 60px; + font-size: 16px; + display: flex; + align-items: center; + justify-content: space-between; + flex-grow: 1; + } - .special-row div { - display: flex; - flex-direction: column; - } + .special-row div { + display: flex; + flex-direction: column; + } - .remove-icon, - .edit-icon { - --mdc-icon-button-size: 36px; - color: var(--secondary-text-color); - } + .remove-icon, + .edit-icon { + --mdc-icon-button-size: 36px; + color: var(--secondary-text-color); + } - .secondary { - font-size: 12px; - color: var(--secondary-text-color); - } - `; - } + .secondary { + font-size: 12px; + color: var(--secondary-text-color); + } + `; } declare global { diff --git a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts index d76e65ff77..c81f09c8cc 100644 --- a/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts +++ b/src/panels/lovelace/editor/hui-picture-elements-card-row-editor.ts @@ -1,6 +1,5 @@ import deepClone from "deep-clone-simple"; import { mdiClose, mdiPencil, mdiContentDuplicate } from "@mdi/js"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -230,44 +229,42 @@ export class HuiPictureElementsCardRowEditor extends LitElement { fireEvent(this, "elements-changed", { elements: newElements }); } - static get styles(): CSSResultGroup { - return css` - .element { - display: flex; - align-items: center; - } + static styles = css` + .element { + display: flex; + align-items: center; + } - .element-row { - height: 60px; - font-size: 16px; - display: flex; - align-items: center; - justify-content: space-between; - flex-grow: 1; - } + .element-row { + height: 60px; + font-size: 16px; + display: flex; + align-items: center; + justify-content: space-between; + flex-grow: 1; + } - .element-row div { - display: flex; - flex-direction: column; - } + .element-row div { + display: flex; + flex-direction: column; + } - .remove-icon, - .edit-icon, - .duplicate-icon { - --mdc-icon-button-size: 36px; - color: var(--secondary-text-color); - } + .remove-icon, + .edit-icon, + .duplicate-icon { + --mdc-icon-button-size: 36px; + color: var(--secondary-text-color); + } - .secondary { - font-size: 12px; - color: var(--secondary-text-color); - } + .secondary { + font-size: 12px; + color: var(--secondary-text-color); + } - ha-select { - width: 100%; - } - `; - } + ha-select { + width: 100%; + } + `; } declare global { diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts index 0716a68c20..99ef0f0991 100644 --- a/src/panels/lovelace/editor/hui-sub-element-editor.ts +++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts @@ -1,5 +1,5 @@ import { mdiCodeBraces, mdiListBoxOutline } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import type { HASSDomEvent } from "../../../common/dom/fire_event"; @@ -161,20 +161,18 @@ export class HuiSubElementEditor extends LitElement { this._guiModeAvailable = ev.detail.guiModeAvailable; } - static get styles(): CSSResultGroup { - return css` - .header { - display: flex; - justify-content: space-between; - align-items: center; - } - .back-title { - display: flex; - align-items: center; - font-size: 18px; - } - `; - } + static styles = css` + .header { + display: flex; + justify-content: space-between; + align-items: center; + } + .back-title { + display: flex; + align-items: center; + font-size: 18px; + } + `; } declare global { diff --git a/src/panels/lovelace/editor/lovelace-path.ts b/src/panels/lovelace/editor/lovelace-path.ts index 7021fb48d6..259a2ce54e 100644 --- a/src/panels/lovelace/editor/lovelace-path.ts +++ b/src/panels/lovelace/editor/lovelace-path.ts @@ -43,14 +43,14 @@ export const getLovelaceContainerPath = ( path: LovelaceCardPath ): LovelaceContainerPath => path.slice(0, -1) as LovelaceContainerPath; -type FindLovelaceContainer = { +interface FindLovelaceContainer { (config: LovelaceConfig, path: [number]): LovelaceViewRawConfig; (config: LovelaceConfig, path: [number, number]): LovelaceSectionRawConfig; ( config: LovelaceConfig, path: LovelaceContainerPath ): LovelaceViewRawConfig | LovelaceSectionRawConfig; -}; +} export const findLovelaceContainer: FindLovelaceContainer = ( config: LovelaceConfig, path: LovelaceContainerPath @@ -121,10 +121,10 @@ export const updateLovelaceContainer = ( }; }; -type LovelaceItemKeys = { +interface LovelaceItemKeys { cards: LovelaceCardConfig[]; badges: (Partial | string)[]; -}; +} export const updateLovelaceItems = ( key: T, diff --git a/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts b/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts index b19627e33b..4bf53b4f1e 100644 --- a/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts +++ b/src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts @@ -11,9 +11,9 @@ import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/ import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import type { HomeAssistant } from "../../../../types"; -type SettingsData = { +interface SettingsData { column_span?: number; -}; +} @customElement("hui-section-settings-editor") export class HuiDialogEditSection extends LitElement { diff --git a/src/panels/lovelace/editor/section-editor/show-edit-section-dialog.ts b/src/panels/lovelace/editor/section-editor/show-edit-section-dialog.ts index 82650e9e38..ebfcfcea45 100644 --- a/src/panels/lovelace/editor/section-editor/show-edit-section-dialog.ts +++ b/src/panels/lovelace/editor/section-editor/show-edit-section-dialog.ts @@ -1,12 +1,12 @@ import { fireEvent } from "../../../../common/dom/fire_event"; import type { LovelaceConfig } from "../../../../data/lovelace/config/types"; -export type EditSectionDialogParams = { +export interface EditSectionDialogParams { lovelaceConfig: LovelaceConfig; saveConfig: (config: LovelaceConfig) => void; viewIndex: number; sectionIndex: number; -}; +} const importEditSectionDialog = () => import("./hui-dialog-edit-section"); diff --git a/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts b/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts index 7e251c47b7..37d0129bda 100644 --- a/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts +++ b/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts @@ -161,7 +161,7 @@ export class HuiDialogSelectDashboard extends LitElement { private async _selectDashboard() { this._saving = true; - if (this._toUrlPath! === "lovelace") { + if (this._toUrlPath === "lovelace") { this._toUrlPath = null; } this._params!.dashboardSelectedCallback(this._toUrlPath!); 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 fd3279cc5f..a63d3e3a50 100644 --- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts +++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts @@ -1,5 +1,5 @@ import { mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -158,42 +158,40 @@ export class HuiUnusedEntities extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - overflow: hidden; - } - .container { - display: flex; - flex-direction: column; - height: 100%; - } - ha-card { - --ha-card-box-shadow: none; - --ha-card-border-radius: 0; - } - hui-entity-picker-table { - flex-grow: 1; - } - .fab { - position: sticky; - float: var(--float-end); - right: calc(16px + env(safe-area-inset-right)); - bottom: calc(16px + env(safe-area-inset-bottom)); - inset-inline-end: calc(16px + env(safe-area-inset-right)); - inset-inline-start: initial; - z-index: 1; - } - ha-fab { - position: relative; - bottom: calc(-80px - env(safe-area-inset-bottom)); - transition: bottom 0.3s; - } - .fab.selected ha-fab { - bottom: 0; - } - `; - } + static styles = css` + :host { + overflow: hidden; + } + .container { + display: flex; + flex-direction: column; + height: 100%; + } + ha-card { + --ha-card-box-shadow: none; + --ha-card-border-radius: 0; + } + hui-entity-picker-table { + flex-grow: 1; + } + .fab { + position: sticky; + float: var(--float-end); + right: calc(16px + env(safe-area-inset-right)); + bottom: calc(16px + env(safe-area-inset-bottom)); + inset-inline-end: calc(16px + env(safe-area-inset-right)); + inset-inline-start: initial; + z-index: 1; + } + ha-fab { + position: relative; + bottom: calc(-80px - env(safe-area-inset-bottom)); + transition: bottom 0.3s; + } + .fab.selected ha-fab { + bottom: 0; + } + `; } declare global { diff --git a/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts index d4ff9efe91..1e341d4ded 100644 --- a/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts +++ b/src/panels/lovelace/editor/view-editor/hui-view-background-editor.ts @@ -1,5 +1,4 @@ import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup } from "lit"; import memoizeOne from "memoize-one"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -192,13 +191,11 @@ export class HuiViewBackgroundEditor extends LitElement { } }; - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - `; - } + static styles = css` + :host { + display: block; + } + `; } declare global { 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 88ae1d72c5..6b445d4831 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 @@ -1,5 +1,5 @@ import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -133,13 +133,11 @@ export class HuiViewVisibilityEditor extends LitElement { fireEvent(this, "view-visibility-changed", { visible: this._visible }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - `; - } + static styles = css` + :host { + display: block; + } + `; } declare global { diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts index 6ab35b8b1d..4b93e0677d 100644 --- a/src/panels/lovelace/elements/hui-icon-element.ts +++ b/src/panels/lovelace/elements/hui-icon-element.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -60,18 +59,16 @@ export class HuiIconElement extends LitElement implements LovelaceElement { handleAction(this, this.hass!, this._config!, ev.detail.action!); } - static get styles(): CSSResultGroup { - return css` - :host { - cursor: pointer; - } - ha-icon:focus { - outline: none; - background: var(--divider-color); - border-radius: 100%; - } - `; - } + static styles = css` + :host { + cursor: pointer; + } + ha-icon:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } + `; } declare global { diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts index e98ccae02f..f36006df20 100644 --- a/src/panels/lovelace/elements/hui-image-element.ts +++ b/src/panels/lovelace/elements/hui-image-element.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -73,23 +72,21 @@ export class HuiImageElement extends LitElement implements LovelaceElement { `; } - static get styles(): CSSResultGroup { - return css` - :host(.clickable) { - cursor: pointer; - overflow: hidden; - -webkit-touch-callout: none !important; - } - hui-image { - -webkit-user-select: none !important; - } - hui-image:focus { - outline: none; - background: var(--divider-color); - border-radius: 100%; - } - `; - } + static styles = css` + :host(.clickable) { + cursor: pointer; + overflow: hidden; + -webkit-touch-callout: none !important; + } + hui-image { + -webkit-user-select: none !important; + } + hui-image:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } + `; private _handleAction(ev: ActionHandlerEvent) { handleAction(this, this.hass!, this._config!, ev.detail.action!); diff --git a/src/panels/lovelace/elements/hui-service-button-element.ts b/src/panels/lovelace/elements/hui-service-button-element.ts index 21343932af..ed2a173e78 100644 --- a/src/panels/lovelace/elements/hui-service-button-element.ts +++ b/src/panels/lovelace/elements/hui-service-button-element.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import "../../../components/buttons/ha-call-service-button"; @@ -83,14 +82,12 @@ export class HuiServiceButtonElement `; } - static get styles(): CSSResultGroup { - return css` - ha-call-service-button { - color: var(--primary-color); - white-space: nowrap; - } - `; - } + static styles = css` + ha-call-service-button { + color: var(--primary-color); + white-space: nowrap; + } + `; } declare global { diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts index b6b7578e72..e151850569 100644 --- a/src/panels/lovelace/elements/hui-state-icon-element.ts +++ b/src/panels/lovelace/elements/hui-state-icon-element.ts @@ -1,5 +1,5 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -102,18 +102,16 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - cursor: pointer; - } - state-badge:focus { - outline: none; - background: var(--divider-color); - border-radius: 100%; - } - `; - } + static styles = css` + :host { + cursor: pointer; + } + state-badge:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } + `; private _handleAction(ev: ActionHandlerEvent) { handleAction(this, this.hass!, this._config!, ev.detail.action!); diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts index d762b76514..56a3cf0bf4 100644 --- a/src/panels/lovelace/elements/hui-state-label-element.ts +++ b/src/panels/lovelace/elements/hui-state-label-element.ts @@ -1,5 +1,5 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -115,22 +115,20 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement { handleAction(this, this.hass!, this._config!, ev.detail.action!); } - static get styles(): CSSResultGroup { - return css` - :host { - cursor: pointer; - } - div { - padding: 8px; - white-space: nowrap; - } - div:focus { - outline: none; - background: var(--divider-color); - border-radius: 100%; - } - `; - } + static styles = css` + :host { + cursor: pointer; + } + div { + padding: 8px; + white-space: nowrap; + } + div:focus { + outline: none; + background: var(--divider-color); + border-radius: 100%; + } + `; } declare global { diff --git a/src/panels/lovelace/entity-rows/hui-button-entity-row.ts b/src/panels/lovelace/entity-rows/hui-button-entity-row.ts index 19c27ee955..e41c4de02d 100644 --- a/src/panels/lovelace/entity-rows/hui-button-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-button-entity-row.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { UNAVAILABLE } from "../../../data/entity"; @@ -54,15 +54,13 @@ class HuiButtonEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - mwc-button:last-child { - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - `; - } + static styles = css` + mwc-button:last-child { + margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + } + `; private async _pressButton(ev): Promise { ev.stopPropagation(); 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 255b2abda2..82b1a3a25f 100644 --- a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-climate-state"; @@ -49,13 +49,11 @@ class HuiClimateEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - ha-climate-state { - text-align: right; - } - `; - } + static styles = css` + ha-climate-state { + text-align: right; + } + `; } declare global { 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 4065605acd..7658be502e 100644 --- a/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-cover-controls"; @@ -62,16 +62,14 @@ class HuiCoverEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - ha-cover-controls, - ha-cover-tilt-controls { - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - `; - } + static styles = css` + ha-cover-controls, + ha-cover-tilt-controls { + margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + } + `; } declare global { diff --git a/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts b/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts index 8c63d4cfa2..f2de95979a 100644 --- a/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/ha-date-input"; @@ -106,21 +106,19 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow { } } - static get styles(): CSSResultGroup { - return css` - ha-time-input { - margin-left: 4px; - margin-inline-start: 4px; - margin-inline-end: initial; - direction: var(--direction); - } - div { - display: flex; - justify-content: flex-end; - width: 100%; - } - `; - } + static styles = css` + ha-time-input { + margin-left: 4px; + margin-inline-start: 4px; + margin-inline-end: initial; + direction: var(--direction); + } + div { + display: flex; + justify-content: flex-end; + width: 100%; + } + `; } declare global { diff --git a/src/panels/lovelace/entity-rows/hui-event-entity-row.ts b/src/panels/lovelace/entity-rows/hui-event-entity-row.ts index 6d0173dc9e..8e73f757cf 100644 --- a/src/panels/lovelace/entity-rows/hui-event-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-event-entity-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isUnavailableState } from "../../../data/entity"; @@ -84,19 +84,17 @@ class HuiEventEntityRow extends LitElement implements LovelaceRow { handleAction(this, this.hass!, this._config!, ev.detail.action); } - static get styles(): CSSResultGroup { - return css` - div { - text-align: right; - } - .when { - color: var(--primary-text-color); - } - .what { - color: var(--secondary-text-color); - } - `; - } + static styles = css` + div { + text-align: right; + } + .when { + color: var(--primary-text-color); + } + .what { + color: var(--secondary-text-color); + } + `; } declare global { diff --git a/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts b/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts index 3f8440b664..b8c14a8d64 100644 --- a/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/entity/ha-entity-toggle"; @@ -51,13 +51,11 @@ class HuiHumidifierEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - ha-humidifier-state { - text-align: right; - } - `; - } + static styles = css` + ha-humidifier-state { + text-align: right; + } + `; } declare global { diff --git a/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts index 1d3bf07265..d869d98abd 100644 --- a/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-button-entity-row.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { UNAVAILABLE } from "../../../data/entity"; @@ -54,15 +54,13 @@ class HuiInputButtonEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - mwc-button:last-child { - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - `; - } + static styles = css` + mwc-button:last-child { + margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + } + `; private async _pressButton(ev): Promise { ev.stopPropagation(); 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 f65f3a8e9b..623f07a7b0 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,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { computeStateName } from "../../../common/entity/compute_state_name"; @@ -118,21 +118,19 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow { ); } - static get styles(): CSSResultGroup { - return css` - ha-date-input + ha-time-input { - margin-left: 4px; - margin-inline-start: 4px; - margin-inline-end: initial; - direction: var(--direction); - } - div.both { - display: flex; - justify-content: flex-end; - width: 100%; - } - `; - } + static styles = css` + ha-date-input + ha-time-input { + margin-left: 4px; + margin-inline-start: 4px; + margin-inline-end: initial; + direction: var(--direction); + } + div.both { + display: flex; + justify-content: flex-end; + width: 100%; + } + `; } declare global { 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 a1c2808691..2508d5efd9 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,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { debounce } from "../../../common/util/debounce"; @@ -110,30 +110,28 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - .flex { - display: flex; - align-items: center; - justify-content: flex-end; - flex-grow: 2; - } - .state { - min-width: 45px; - text-align: end; - } - ha-textfield { - text-align: end; - } - ha-slider { - width: 100%; - max-width: 200px; - } - `; - } + static styles = css` + :host { + display: block; + } + .flex { + display: flex; + align-items: center; + justify-content: flex-end; + flex-grow: 2; + } + .state { + min-width: 45px; + text-align: end; + } + ha-textfield { + text-align: end; + } + ha-slider { + width: 100%; + max-width: 200px; + } + `; private async _initialLoad(): Promise { this._loaded = true; 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 a428d3c7cf..6832139051 100644 --- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isUnavailableState } from "../../../data/entity"; @@ -58,15 +58,13 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - mwc-button { - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - `; - } + static styles = css` + mwc-button { + margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + } + `; private async _callService(ev): Promise { ev.stopPropagation(); 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 11965837e1..b08504c470 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 @@ -12,7 +12,7 @@ import { mdiVolumePlus, } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { stateActive } from "../../../common/entity/state_active"; @@ -395,34 +395,32 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - .flex { - display: flex; - align-items: center; - justify-content: space-between; - } - .volume { - display: flex; - align-items: center; - flex-grow: 2; - flex-shrink: 2; - } - .controls { - white-space: nowrap; - direction: ltr; - } - ha-slider { - flex-grow: 2; - flex-shrink: 2; - width: 100%; - margin: 0 -8px 0 1px; - } - `; - } + static styles = css` + :host { + display: block; + } + .flex { + display: flex; + align-items: center; + justify-content: space-between; + } + .volume { + display: flex; + align-items: center; + flex-grow: 2; + flex-shrink: 2; + } + .controls { + white-space: nowrap; + direction: ltr; + } + ha-slider { + flex-grow: 2; + flex-shrink: 2; + width: 100%; + margin: 0 -8px 0 1px; + } + `; } declare global { 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 b4aaba1cad..311f4493f7 100644 --- a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { debounce } from "../../../common/util/debounce"; @@ -114,31 +114,29 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - } - .flex { - display: flex; - align-items: center; - justify-content: flex-end; - flex-grow: 2; - } - .state { - min-width: 45px; - text-align: end; - } - ha-textfield { - text-align: end; - direction: ltr !important; - } - ha-slider { - width: 100%; - max-width: 200px; - } - `; - } + static styles = css` + :host { + display: block; + } + .flex { + display: flex; + align-items: center; + justify-content: flex-end; + flex-grow: 2; + } + .state { + min-width: 45px; + text-align: end; + } + ha-textfield { + text-align: end; + direction: ltr !important; + } + ha-slider { + width: 100%; + max-width: 200px; + } + `; private async _initialLoad(): Promise { this._loaded = true; 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 8bada660cc..55b8e62b86 100644 --- a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import "../../../components/entity/ha-entity-toggle"; @@ -58,15 +58,13 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - mwc-button { - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - `; - } + static styles = css` + mwc-button { + margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + } + `; private async _callService(ev: Event): Promise { ev.stopPropagation(); 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 a7731d7c04..bbf1fba097 100644 --- a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isUnavailableState } from "../../../data/entity"; @@ -72,15 +72,13 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - mwc-button:last-child { - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - `; - } + static styles = css` + mwc-button:last-child { + margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + } + `; private _cancelScript(ev): void { ev.stopPropagation(); diff --git a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts index 05fad8e7eb..7ff61c285f 100644 --- a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts @@ -1,5 +1,5 @@ import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { stopPropagation } from "../../../common/dom/stop_propagation"; @@ -81,18 +81,16 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - hui-generic-entity-row { - display: flex; - align-items: center; - } - ha-select { - width: 100%; - --ha-select-min-width: 0; - } - `; - } + static styles = css` + hui-generic-entity-row { + display: flex; + align-items: center; + } + ha-select { + width: 100%; + --ha-select-min-width: 0; + } + `; private _handleAction(ev): void { const stateObj = this.hass!.states[ diff --git a/src/panels/lovelace/entity-rows/hui-simple-entity-row.ts b/src/panels/lovelace/entity-rows/hui-simple-entity-row.ts index 1396e0251c..00c8f2910e 100644 --- a/src/panels/lovelace/entity-rows/hui-simple-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-simple-entity-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import type { HomeAssistant } from "../../../types"; @@ -47,13 +47,11 @@ class HuiSimpleEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - div { - text-align: right; - } - `; - } + static styles = css` + div { + text-align: right; + } + `; } declare global { diff --git a/src/panels/lovelace/entity-rows/hui-update-entity-row.ts b/src/panels/lovelace/entity-rows/hui-update-entity-row.ts index 4d4e79d3a1..2ad19e2274 100644 --- a/src/panels/lovelace/entity-rows/hui-update-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-update-entity-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import type { UpdateEntity } from "../../../data/update"; @@ -51,13 +51,11 @@ class HuiUpdateEntityRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - div { - text-align: right; - } - `; - } + static styles = css` + div { + text-align: right; + } + `; } declare global { diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts index b8dd9c8d4c..a5ca00a3fc 100644 --- a/src/panels/lovelace/entity-rows/types.ts +++ b/src/panels/lovelace/entity-rows/types.ts @@ -23,8 +23,8 @@ export interface ActionRowConfig extends ConfirmableRowConfig { action_name?: string; } export interface EntityFilterEntityConfig extends EntityConfig { - state_filter?: Array; - conditions?: Array; + state_filter?: LegacyStateFilter[]; + conditions?: Condition[]; } export interface DividerConfig { type: "divider"; @@ -76,7 +76,7 @@ export interface CastConfig { } export interface ButtonsRowConfig { type: "buttons"; - entities: Array; + entities: (string | EntityConfig)[]; } export type LovelaceRowConfig = | EntityConfig 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 7a13840939..72f2016b12 100644 --- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts @@ -1,5 +1,5 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; @@ -214,25 +214,23 @@ export class HuiGraphHeaderFooter } } - static get styles(): CSSResultGroup { - return css` - ha-circular-progress { - position: absolute; - top: calc(50% - 14px); - } - .container { - display: flex; - justify-content: center; - position: relative; - padding-bottom: 20%; - } - .info { - position: absolute; - top: calc(50% - 16px); - color: var(--secondary-text-color); - } - `; - } + static styles = css` + ha-circular-progress { + position: absolute; + top: calc(50% - 14px); + } + .container { + display: flex; + justify-content: center; + position: relative; + padding-bottom: 20%; + } + .info { + position: absolute; + top: calc(50% - 16px); + color: var(--secondary-text-color); + } + `; } declare global { 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 3ba732318b..3f02690776 100644 --- a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -77,18 +77,16 @@ export class HuiPictureHeaderFooter `; } - static get styles(): CSSResultGroup { - return css` - img.clickable { - cursor: pointer; - } + static styles = css` + img.clickable { + cursor: pointer; + } - img { - display: block; - width: 100%; - } - `; - } + img { + display: block; + width: 100%; + } + `; private _handleAction(ev: ActionHandlerEvent) { handleAction(this, this.hass!, this._config!, ev.detail.action!); diff --git a/src/panels/lovelace/header-footer/types.ts b/src/panels/lovelace/header-footer/types.ts index 2611d2b73e..5f13b5cc94 100644 --- a/src/panels/lovelace/header-footer/types.ts +++ b/src/panels/lovelace/header-footer/types.ts @@ -7,7 +7,7 @@ export interface LovelaceHeaderFooterConfig { export interface ButtonsHeaderFooterConfig extends LovelaceHeaderFooterConfig { type: "buttons"; - entities: Array; + entities: (string | EntitiesCardEntityConfig)[]; } export interface GraphHeaderFooterConfig extends LovelaceHeaderFooterConfig { diff --git a/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts b/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts index e4a56daab9..38b5aacdd4 100644 --- a/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts +++ b/src/panels/lovelace/heading-badges/hui-entity-heading-badge.ts @@ -1,6 +1,5 @@ import { mdiAlertCircle } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -164,19 +163,17 @@ export class HuiEntityHeadingBadge `; } - static get styles(): CSSResultGroup { - return css` - [role="button"] { - cursor: pointer; - } - ha-heading-badge { - --state-inactive-color: initial; - } - ha-heading-badge.error { - --icon-color: var(--red-color); - } - `; - } + static styles = css` + [role="button"] { + cursor: pointer; + } + ha-heading-badge { + --state-inactive-color: initial; + } + ha-heading-badge.error { + --icon-color: var(--red-color); + } + `; } declare global { diff --git a/src/panels/lovelace/heading-badges/hui-error-heading-badge.ts b/src/panels/lovelace/heading-badges/hui-error-heading-badge.ts index 8d41fd8ad5..537314a0b3 100644 --- a/src/panels/lovelace/heading-badges/hui-error-heading-badge.ts +++ b/src/panels/lovelace/heading-badges/hui-error-heading-badge.ts @@ -1,6 +1,5 @@ import { mdiAlertCircle } from "@mdi/js"; import { dump } from "js-yaml"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import "../../../components/ha-badge"; @@ -67,25 +66,23 @@ export class HuiErrorHeadingBadge extends LitElement implements LovelaceBadge { `; } - static get styles(): CSSResultGroup { - return css` - ha-heading-badge { - --icon-color: var(--error-color); - color: var(--error-color); - } - .content { - max-width: 70px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - pre { - font-family: var(--code-font-family, monospace); - white-space: break-spaces; - user-select: text; - } - `; - } + static styles = css` + ha-heading-badge { + --icon-color: var(--error-color); + color: var(--error-color); + } + .content { + max-width: 70px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + pre { + font-family: var(--code-font-family, monospace); + white-space: break-spaces; + user-select: text; + } + `; } declare global { diff --git a/src/panels/lovelace/heading-badges/types.ts b/src/panels/lovelace/heading-badges/types.ts index 45055824ee..7ec069ddc3 100644 --- a/src/panels/lovelace/heading-badges/types.ts +++ b/src/panels/lovelace/heading-badges/types.ts @@ -1,11 +1,11 @@ import type { ActionConfig } from "../../../data/lovelace/config/action"; import type { Condition } from "../common/validate-condition"; -export type LovelaceHeadingBadgeConfig = { +export interface LovelaceHeadingBadgeConfig { type?: string; [key: string]: any; visibility?: Condition[]; -}; +} export interface ErrorBadgeConfig extends LovelaceHeadingBadgeConfig { type: string; diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index 166b1055c2..ba4a585de8 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -63,7 +63,7 @@ class LovelaceFullConfigEditor extends LitElement { slot="actionItems" class="save-button ${classMap({ - saved: this._saving! === false || this._changed === true, + saved: this._saving === false || this._changed === true, })}" > ${this._changed diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts index 277257e230..8a56f7a9cf 100644 --- a/src/panels/lovelace/hui-root.ts +++ b/src/panels/lovelace/hui-root.ts @@ -97,7 +97,7 @@ class HUIRoot extends LitElement { @state() private _curView?: number | "hass-unused-entities"; - private _viewCache?: { [viewId: string]: HUIView }; + private _viewCache?: Record; private _debouncedConfigChanged: () => void; diff --git a/src/panels/lovelace/special-rows/hui-attribute-row.ts b/src/panels/lovelace/special-rows/hui-attribute-row.ts index 7900066a0c..6ad3e3d75a 100644 --- a/src/panels/lovelace/special-rows/hui-attribute-row.ts +++ b/src/panels/lovelace/special-rows/hui-attribute-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import checkValidDate from "../../../common/datetime/check_valid_date"; @@ -80,13 +80,11 @@ class HuiAttributeRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - div { - text-align: right; - } - `; - } + static styles = css` + div { + text-align: right; + } + `; } declare global { diff --git a/src/panels/lovelace/special-rows/hui-button-row.ts b/src/panels/lovelace/special-rows/hui-button-row.ts index 9db0e3bdf1..3eccfbc982 100644 --- a/src/panels/lovelace/special-rows/hui-button-row.ts +++ b/src/panels/lovelace/special-rows/hui-button-row.ts @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import { DOMAINS_TOGGLE } from "../../../common/const"; @@ -76,38 +75,36 @@ export class HuiButtonRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - } - ha-state-icon { - padding: 8px; - color: var(--paper-item-icon-color); - } - .flex { - flex: 1; - overflow: hidden; - margin-left: 16px; - margin-inline-start: 16px; - margin-inline-end: initial; - display: flex; - justify-content: space-between; - align-items: center; - } - .flex div { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - mwc-button { - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + } + ha-state-icon { + padding: 8px; + color: var(--paper-item-icon-color); + } + .flex { + flex: 1; + overflow: hidden; + margin-left: 16px; + margin-inline-start: 16px; + margin-inline-end: initial; + display: flex; + justify-content: space-between; + align-items: center; + } + .flex div { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + mwc-button { + margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + } + `; private _handleAction(ev: ActionHandlerEvent) { handleAction(this, this.hass!, this._config!, ev.detail.action!); diff --git a/src/panels/lovelace/special-rows/hui-cast-row.ts b/src/panels/lovelace/special-rows/hui-cast-row.ts index 33893c834a..2503886a6e 100644 --- a/src/panels/lovelace/special-rows/hui-cast-row.ts +++ b/src/panels/lovelace/special-rows/hui-cast-row.ts @@ -1,5 +1,5 @@ import "@material/mwc-button/mwc-button"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -119,48 +119,46 @@ class HuiCastRow extends LitElement implements LovelaceRow { ); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - } - ha-icon { - padding: 8px; - color: var(--paper-item-icon-color); - } - .flex { - flex: 1; - margin-left: 16px; - margin-inline-start: 16px; - margin-inline-end: initial; - display: flex; - justify-content: space-between; - align-items: center; - } - .name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .controls { - display: flex; - align-items: center; - } - google-cast-launcher { - margin-right: 0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - cursor: pointer; - display: inline-block; - height: 24px; - width: 24px; - } - .inactive { - padding: 0 4px; - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + } + ha-icon { + padding: 8px; + color: var(--paper-item-icon-color); + } + .flex { + flex: 1; + margin-left: 16px; + margin-inline-start: 16px; + margin-inline-end: initial; + display: flex; + justify-content: space-between; + align-items: center; + } + .name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .controls { + display: flex; + align-items: center; + } + google-cast-launcher { + margin-right: 0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + cursor: pointer; + display: inline-block; + height: 24px; + width: 24px; + } + .inactive { + padding: 0 4px; + } + `; } declare global { diff --git a/src/panels/lovelace/special-rows/hui-divider-row.ts b/src/panels/lovelace/special-rows/hui-divider-row.ts index 15662944b4..7ceab1d563 100644 --- a/src/panels/lovelace/special-rows/hui-divider-row.ts +++ b/src/panels/lovelace/special-rows/hui-divider-row.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -29,14 +28,12 @@ class HuiDividerRow extends LitElement implements LovelaceRow { >`; } - static get styles(): CSSResultGroup { - return css` - div { - height: 1px; - background-color: var(--entities-divider-color, var(--divider-color)); - } - `; - } + static styles = css` + div { + height: 1px; + background-color: var(--entities-divider-color, var(--divider-color)); + } + `; } declare global { diff --git a/src/panels/lovelace/special-rows/hui-section-row.ts b/src/panels/lovelace/special-rows/hui-section-row.ts index 893b368358..64eeb7cac4 100644 --- a/src/panels/lovelace/special-rows/hui-section-row.ts +++ b/src/panels/lovelace/special-rows/hui-section-row.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import type { HomeAssistant } from "../../../types"; @@ -35,28 +34,26 @@ class HuiSectionRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - .label { - color: var(--section-header-text-color, var(--primary-text-color)); - margin-left: 8px; - margin-inline-start: 8px; - margin-inline-end: initial; - margin-bottom: 8px; - margin-top: 16px; - font-weight: 500; - } - .divider { - height: 1px; - background-color: var(--entities-divider-color, var(--divider-color)); - margin-left: -16px; - margin-right: -16px; - margin-inline-start: -16px; - margin-inline-end: -16px; - margin-top: 8px; - } - `; - } + static styles = css` + .label { + color: var(--section-header-text-color, var(--primary-text-color)); + margin-left: 8px; + margin-inline-start: 8px; + margin-inline-end: initial; + margin-bottom: 8px; + margin-top: 16px; + font-weight: 500; + } + .divider { + height: 1px; + background-color: var(--entities-divider-color, var(--divider-color)); + margin-left: -16px; + margin-right: -16px; + margin-inline-start: -16px; + margin-inline-end: -16px; + margin-top: 8px; + } + `; } declare global { diff --git a/src/panels/lovelace/special-rows/hui-text-row.ts b/src/panels/lovelace/special-rows/hui-text-row.ts index 0eb8fda71f..fc47ce7d1f 100644 --- a/src/panels/lovelace/special-rows/hui-text-row.ts +++ b/src/panels/lovelace/special-rows/hui-text-row.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import "../../../components/ha-icon"; @@ -28,32 +27,30 @@ class HuiTextRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - align-items: center; - } - ha-icon { - padding: 8px; - color: var(--paper-item-icon-color); - } - div { - flex: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .name { - margin-left: 16px; - margin-inline-start: 16px; - margin-inline-end: initial; - } - .text { - text-align: var(--float-end); - } - `; - } + static styles = css` + :host { + display: flex; + align-items: center; + } + ha-icon { + padding: 8px; + color: var(--paper-item-icon-color); + } + div { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .name { + margin-left: 16px; + margin-inline-start: 16px; + margin-inline-end: initial; + } + .text { + text-align: var(--float-end); + } + `; } declare global { diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.ts b/src/panels/lovelace/special-rows/hui-weblink-row.ts index 7a6b3e2e4d..783cf59010 100644 --- a/src/panels/lovelace/special-rows/hui-weblink-row.ts +++ b/src/panels/lovelace/special-rows/hui-weblink-row.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, state } from "lit/decorators"; import { ifDefined } from "lit/directives/if-defined"; @@ -42,28 +41,26 @@ class HuiWeblinkRow extends LitElement implements LovelaceRow { `; } - static get styles(): CSSResultGroup { - return css` - a { - display: flex; - align-items: center; - color: var(--primary-color); - } - ha-icon { - padding: 8px; - color: var(--paper-item-icon-color); - } - div { - flex: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-left: 16px; - margin-inline-start: 16px; - margin-inline-end: initial; - } - `; - } + static styles = css` + a { + display: flex; + align-items: center; + color: var(--primary-color); + } + ha-icon { + padding: 8px; + color: var(--paper-item-icon-color); + } + div { + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-left: 16px; + margin-inline-start: 16px; + margin-inline-end: initial; + } + `; protected _computeTargetValue(): string | undefined { return this._config && diff --git a/src/panels/lovelace/strategies/get-strategy.ts b/src/panels/lovelace/strategies/get-strategy.ts index fc4fbcf948..5d7cafe896 100644 --- a/src/panels/lovelace/strategies/get-strategy.ts +++ b/src/panels/lovelace/strategies/get-strategy.ts @@ -37,11 +37,11 @@ const STRATEGIES: Record> = { export type LovelaceStrategyConfigType = "dashboard" | "view" | "section"; -type Strategies = { +interface Strategies { dashboard: LovelaceDashboardStrategy; view: LovelaceViewStrategy; section: LovelaceSectionStrategy; -}; +} type StrategyConfig = AsyncReturnType< Strategies[T]["generate"] diff --git a/src/panels/lovelace/strategies/iframe/iframe-view-strategy.ts b/src/panels/lovelace/strategies/iframe/iframe-view-strategy.ts index a5682de213..fa695d86d3 100644 --- a/src/panels/lovelace/strategies/iframe/iframe-view-strategy.ts +++ b/src/panels/lovelace/strategies/iframe/iframe-view-strategy.ts @@ -3,11 +3,11 @@ import { customElement } from "lit/decorators"; import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import type { IframeCardConfig } from "../../cards/types"; -export type IframeViewStrategyConfig = { +export interface IframeViewStrategyConfig { type: "iframe"; url: string; title?: string; -}; +} @customElement("iframe-view-strategy") export class IframeViewStrategy extends ReactiveElement { diff --git a/src/panels/lovelace/strategies/map/map-view-strategy.ts b/src/panels/lovelace/strategies/map/map-view-strategy.ts index be60f615a1..f065e69afd 100644 --- a/src/panels/lovelace/strategies/map/map-view-strategy.ts +++ b/src/panels/lovelace/strategies/map/map-view-strategy.ts @@ -5,9 +5,9 @@ import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import type { HomeAssistant } from "../../../../types"; import type { MapCardConfig } from "../../cards/types"; -export type MapViewStrategyConfig = { +export interface MapViewStrategyConfig { type: "map"; -}; +} const getMapEntities = (hass: HomeAssistant) => { const personSources = new Set(); diff --git a/src/panels/lovelace/strategies/original-states/original-states-view-strategy.ts b/src/panels/lovelace/strategies/original-states/original-states-view-strategy.ts index 9df36259d6..a128f79730 100644 --- a/src/panels/lovelace/strategies/original-states/original-states-view-strategy.ts +++ b/src/panels/lovelace/strategies/original-states/original-states-view-strategy.ts @@ -8,12 +8,12 @@ import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view"; import type { HomeAssistant } from "../../../../types"; import { generateDefaultViewConfig } from "../../common/generate-lovelace-config"; -export type OriginalStatesViewStrategyConfig = { +export interface OriginalStatesViewStrategyConfig { type: "original-states"; areas?: AreaFilterValue; hide_entities_without_area?: boolean; hide_energy?: boolean; -}; +} @customElement("original-states-view-strategy") export class OriginalStatesViewStrategy extends ReactiveElement { diff --git a/src/panels/lovelace/strategies/types.ts b/src/panels/lovelace/strategies/types.ts index 420fd31690..d28ec6563f 100644 --- a/src/panels/lovelace/strategies/types.ts +++ b/src/panels/lovelace/strategies/types.ts @@ -5,12 +5,12 @@ import type { LovelaceViewConfig } from "../../../data/lovelace/config/view"; import type { HomeAssistant } from "../../../types"; import type { LovelaceGenericElementEditor } from "../types"; -export type LovelaceStrategy = { +export interface LovelaceStrategy { generate(config: LovelaceStrategyConfig, hass: HomeAssistant): Promise; getConfigElement?: () => LovelaceStrategyEditor; noEditor?: boolean; configRequired?: boolean; -}; +} export interface LovelaceDashboardStrategy extends LovelaceStrategy {} diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts index dd50866687..05d1ee101f 100644 --- a/src/panels/lovelace/types.ts +++ b/src/panels/lovelace/types.ts @@ -43,23 +43,23 @@ export interface LovelaceBadge extends HTMLElement { setConfig(config: LovelaceBadgeConfig): void; } -export type LovelaceLayoutOptions = { +export interface LovelaceLayoutOptions { grid_columns?: number | "full"; grid_rows?: number | "auto"; grid_max_columns?: number; grid_min_columns?: number; grid_min_rows?: number; grid_max_rows?: number; -}; +} -export type LovelaceGridOptions = { +export interface LovelaceGridOptions { columns?: number | "full"; rows?: number | "auto"; max_columns?: number; min_columns?: number; min_rows?: number; max_rows?: number; -}; +} export interface LovelaceCard extends HTMLElement { hass?: HomeAssistant; diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts index 5748c06d13..cb2f29609e 100644 --- a/src/panels/lovelace/views/hui-masonry-view.ts +++ b/src/panels/lovelace/views/hui-masonry-view.ts @@ -1,5 +1,5 @@ import { mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -70,6 +70,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement { this._mqls = undefined; } + // eslint-disable-next-line @typescript-eslint/no-empty-function public setConfig(_config: LovelaceViewConfig): void {} protected render(): TemplateResult { @@ -281,74 +282,72 @@ export class MasonryView extends LitElement implements LovelaceViewElement { this._createColumns(); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - padding-top: 4px; - } + static styles = css` + :host { + display: block; + padding-top: 4px; + } - hui-view-badges { - display: block; - margin: 4px 8px 4px 8px; - font-size: 85%; - } + hui-view-badges { + display: block; + margin: 4px 8px 4px 8px; + font-size: 85%; + } - #columns { - display: flex; - flex-direction: row; - justify-content: center; - margin-left: 4px; - margin-right: 4px; - } + #columns { + display: flex; + flex-direction: row; + justify-content: center; + margin-left: 4px; + margin-right: 4px; + } - #columns.edit-mode { - margin-bottom: 72px; - } + #columns.edit-mode { + margin-bottom: 72px; + } + .column { + flex: 1 0 0; + max-width: 500px; + min-width: 0; + } + + /* Fix for safari */ + .column:has(> *) { + flex-grow: 1; + } + + .column:not(:has(> *:not([hidden]))) { + flex-grow: 0; + } + + .column > *:not([hidden]) { + display: block; + margin: var(--masonry-view-card-margin, 4px 4px 8px); + } + + ha-fab { + position: fixed; + right: calc(16px + env(safe-area-inset-right)); + bottom: calc(16px + env(safe-area-inset-bottom)); + inset-inline-end: calc(16px + env(safe-area-inset-right)); + inset-inline-start: initial; + z-index: 1; + } + + @media (max-width: 500px) { + .column > * { + margin-left: 0; + margin-right: 0; + } + } + + @media (max-width: 599px) { .column { - flex: 1 0 0; - max-width: 500px; - min-width: 0; + max-width: 600px; } - - /* Fix for safari */ - .column:has(> *) { - flex-grow: 1; - } - - .column:not(:has(> *:not([hidden]))) { - flex-grow: 0; - } - - .column > *:not([hidden]) { - display: block; - margin: var(--masonry-view-card-margin, 4px 4px 8px); - } - - ha-fab { - position: fixed; - right: calc(16px + env(safe-area-inset-right)); - bottom: calc(16px + env(safe-area-inset-bottom)); - inset-inline-end: calc(16px + env(safe-area-inset-right)); - inset-inline-start: initial; - z-index: 1; - } - - @media (max-width: 500px) { - .column > * { - margin-left: 0; - margin-right: 0; - } - } - - @media (max-width: 599px) { - .column { - max-width: 600px; - } - } - `; - } + } + `; } declare global { diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts index bdfdcfc70c..17b091a3e3 100644 --- a/src/panels/lovelace/views/hui-panel-view.ts +++ b/src/panels/lovelace/views/hui-panel-view.ts @@ -1,5 +1,5 @@ import { mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -28,6 +28,7 @@ export class PanelView extends LitElement implements LovelaceViewElement { @state() private _card?: HuiCard | HuiWarning | HuiCardOptions; + // eslint-disable-next-line @typescript-eslint/no-empty-function public setConfig(_config: LovelaceViewConfig): void {} public willUpdate(changedProperties: PropertyValues): void { @@ -117,33 +118,31 @@ export class PanelView extends LitElement implements LovelaceViewElement { this._card = wrapper; } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - height: 100%; - --restore-card-border-radius: var(--ha-card-border-radius, 12px); - --restore-card-border-width: var(--ha-card-border-width, 1px); - --restore-card-box-shadow: var(--ha-card-box-shadow, none); - } + static styles = css` + :host { + display: block; + height: 100%; + --restore-card-border-radius: var(--ha-card-border-radius, 12px); + --restore-card-border-width: var(--ha-card-border-width, 1px); + --restore-card-box-shadow: var(--ha-card-box-shadow, none); + } - * { - --ha-card-border-radius: 0; - --ha-card-border-width: 0; - --ha-card-box-shadow: none; - } + * { + --ha-card-border-radius: 0; + --ha-card-border-width: 0; + --ha-card-box-shadow: none; + } - ha-fab { - position: fixed; - right: calc(16px + env(safe-area-inset-right)); - bottom: calc(16px + env(safe-area-inset-bottom)); - z-index: 1; - float: var(--float-end); - inset-inline-end: calc(16px + env(safe-area-inset-right)); - inset-inline-start: initial; - } - `; - } + ha-fab { + position: fixed; + right: calc(16px + env(safe-area-inset-right)); + bottom: calc(16px + env(safe-area-inset-bottom)); + z-index: 1; + float: var(--float-end); + inset-inline-end: calc(16px + env(safe-area-inset-right)); + inset-inline-start: initial; + } + `; } declare global { diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts index 9532489e27..21f108aa7e 100644 --- a/src/panels/lovelace/views/hui-sections-view.ts +++ b/src/panels/lovelace/views/hui-sections-view.ts @@ -6,7 +6,7 @@ import { mdiPencil, mdiViewGridPlus, } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -423,212 +423,207 @@ export class SectionsView extends LitElement implements LovelaceViewElement { this.lovelace!.saveConfig(newConfig); } - static get styles(): CSSResultGroup { - return css` + static styles = css` + :host { + --row-height: var(--ha-view-sections-row-height, 56px); + --row-gap: var(--ha-view-sections-row-gap, 8px); + --column-gap: var(--ha-view-sections-column-gap, 32px); + --column-max-width: var(--ha-view-sections-column-max-width, 500px); + --column-min-width: var(--ha-view-sections-column-min-width, 320px); + display: block; + } + + @media (max-width: 600px) { :host { - --row-height: var(--ha-view-sections-row-height, 56px); - --row-gap: var(--ha-view-sections-row-gap, 8px); - --column-gap: var(--ha-view-sections-column-gap, 32px); - --column-max-width: var(--ha-view-sections-column-max-width, 500px); - --column-min-width: var(--ha-view-sections-column-min-width, 320px); - display: block; + --column-gap: var(--row-gap); } + } - @media (max-width: 600px) { - :host { - --column-gap: var(--row-gap); - } - } + .container > * { + position: relative; + width: 100%; + } - .container > * { - position: relative; - width: 100%; - } + .section { + border-radius: var(--ha-card-border-radius, 12px); + grid-column: span var(--column-span); + grid-row: span var(--row-span); + } - .section { - border-radius: var(--ha-card-border-radius, 12px); - grid-column: span var(--column-span); - grid-row: span var(--row-span); - } + .section:has(hui-section[hidden]) { + display: none; + } - .section:has(hui-section[hidden]) { - display: none; - } + .container { + --column-count: min(var(--max-column-count), var(--total-section-count)); + display: grid; + align-items: start; + justify-content: center; + grid-template-columns: repeat(var(--column-count), 1fr); + grid-auto-flow: row; + gap: var(--row-gap) var(--column-gap); + padding: var(--row-gap) var(--column-gap); + box-sizing: content-box; + margin: 0 auto; + max-width: calc( + var(--column-count) * var(--column-max-width) + + (var(--column-count) - 1) * var(--column-gap) + ); + } + .container.dense { + grid-auto-flow: row dense; + } - .container { - --column-count: min( - var(--max-column-count), - var(--total-section-count) - ); - display: grid; - align-items: start; - justify-content: center; - grid-template-columns: repeat(var(--column-count), 1fr); - grid-auto-flow: row; - gap: var(--row-gap) var(--column-gap); - padding: var(--row-gap) var(--column-gap); - box-sizing: content-box; - margin: 0 auto; - max-width: calc( - var(--column-count) * var(--column-max-width) + - (var(--column-count) - 1) * var(--column-gap) - ); - } - .container.dense { - grid-auto-flow: row dense; - } + .handle { + cursor: grab; + padding: 8px; + } - .handle { - cursor: grab; - padding: 8px; - } + .create-section-container { + position: relative; + display: flex; + flex-direction: column; + margin-top: 36px; + } - .create-section-container { - position: relative; - display: flex; - flex-direction: column; - margin-top: 36px; - } + .create-section-container .card { + display: none; + } - .create-section-container .card { - display: none; - } + .create-section-container:has(.card) .drop-helper { + display: flex; + } + .create-section-container:has(.card) .create-section { + display: none; + } - .create-section-container:has(.card) .drop-helper { - display: flex; - } - .create-section-container:has(.card) .create-section { - display: none; - } + .drop-helper { + display: none; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + outline: none; + background: none; + cursor: pointer; + border-radius: var(--ha-card-border-radius, 12px); + border: 2px dashed var(--primary-color); + height: calc(var(--row-height) + 2 * (var(--row-gap) + 2px)); + padding: 8px; + box-sizing: border-box; + width: 100%; + --ha-ripple-color: var(--primary-color); + --ha-ripple-hover-opacity: 0.04; + --ha-ripple-pressed-opacity: 0.12; + } - .drop-helper { - display: none; - flex-direction: column; - align-items: center; - justify-content: center; - position: relative; - outline: none; - background: none; - cursor: pointer; - border-radius: var(--ha-card-border-radius, 12px); - border: 2px dashed var(--primary-color); - height: calc(var(--row-height) + 2 * (var(--row-gap) + 2px)); - padding: 8px; - box-sizing: border-box; - width: 100%; - --ha-ripple-color: var(--primary-color); - --ha-ripple-hover-opacity: 0.04; - --ha-ripple-pressed-opacity: 0.12; - } + .drop-helper p { + color: var(--primary-text-color); + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-align: center; + } - .drop-helper p { - color: var(--primary-text-color); - font-size: 16px; - font-weight: 400; - line-height: 24px; - text-align: center; - } + .create-section { + display: block; + position: relative; + outline: none; + background: none; + cursor: pointer; + border-radius: var(--ha-card-border-radius, 12px); + border: 2px dashed var(--primary-color); + order: 1; + height: calc(var(--row-height) + 2 * (var(--row-gap) + 2px)); + padding: 8px; + box-sizing: border-box; + width: 100%; + --ha-ripple-color: var(--primary-color); + --ha-ripple-hover-opacity: 0.04; + --ha-ripple-pressed-opacity: 0.12; + } - .create-section { - display: block; - position: relative; - outline: none; - background: none; - cursor: pointer; - border-radius: var(--ha-card-border-radius, 12px); - border: 2px dashed var(--primary-color); - order: 1; - height: calc(var(--row-height) + 2 * (var(--row-gap) + 2px)); - padding: 8px; - box-sizing: border-box; - width: 100%; - --ha-ripple-color: var(--primary-color); - --ha-ripple-hover-opacity: 0.04; - --ha-ripple-pressed-opacity: 0.12; - } + .create-section:focus { + border: 2px solid var(--primary-color); + } - .create-section:focus { - border: 2px solid var(--primary-color); - } + .sortable-ghost { + border-radius: var(--ha-card-border-radius, 12px); + } - .sortable-ghost { - border-radius: var(--ha-card-border-radius, 12px); - } + hui-view-badges { + display: block; + text-align: center; + padding: 0 var(--column-gap); + padding-top: var(--row-gap); + margin: auto; + max-width: calc( + var(--max-column-count) * var(--column-max-width) + + (var(--max-column-count) - 1) * var(--column-gap) + ); + } - hui-view-badges { - display: block; - text-align: center; - padding: 0 var(--column-gap); - padding-top: var(--row-gap); - margin: auto; - max-width: calc( - var(--max-column-count) * var(--column-max-width) + - (var(--max-column-count) - 1) * var(--column-gap) - ); - } + .section-header { + position: relative; + height: 34px; + display: flex; + flex-direction: column; + justify-content: flex-end; + } - .section-header { - position: relative; - height: 34px; - display: flex; - flex-direction: column; - justify-content: flex-end; - } + .section-actions { + position: absolute; + height: 36px; + bottom: -2px; + right: 0; + inset-inline-end: 0; + inset-inline-start: initial; + opacity: 1; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.2s ease-in-out; + border-radius: var(--ha-card-border-radius, 12px); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + background: var(--secondary-background-color); + --mdc-icon-button-size: 36px; + --mdc-icon-size: 20px; + color: var(--primary-text-color); + } - .section-actions { - position: absolute; - height: 36px; - bottom: -2px; - right: 0; - inset-inline-end: 0; - inset-inline-start: initial; - opacity: 1; - display: flex; - align-items: center; - justify-content: center; - transition: opacity 0.2s ease-in-out; - border-radius: var(--ha-card-border-radius, 12px); - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; - background: var(--secondary-background-color); - --mdc-icon-button-size: 36px; - --mdc-icon-size: 20px; - color: var(--primary-text-color); - } + .imported-cards { + --column-span: var(--column-count); + --row-span: 1; + order: 2; + } - .imported-cards { - --column-span: var(--column-count); - --row-span: 1; - order: 2; - } + .imported-card-header { + margin-top: 36px; + padding: 32px 0 16px 0; + border-top: 4px dotted var(--divider-color); + } - .imported-card-header { - margin-top: 36px; - padding: 32px 0 16px 0; - border-top: 4px dotted var(--divider-color); - } - - .imported-card-header .title { - margin: 0; - color: var(--primary-text-color); - font-size: 16px; - font-weight: 400; - line-height: 24px; - --mdc-icon-size: 18px; - display: flex; - align-items: center; - gap: 12px; - margin-bottom: 8px; - } - .imported-card-header .subtitle { - margin: 0; - color: var(--secondary-text-color); - font-size: 14px; - font-weight: 400; - line-height: 20px; - } - `; - } + .imported-card-header .title { + margin: 0; + color: var(--primary-text-color); + font-size: 16px; + font-weight: 400; + line-height: 24px; + --mdc-icon-size: 18px; + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 8px; + } + .imported-card-header .subtitle { + margin: 0; + color: var(--secondary-text-color); + font-size: 14px; + font-weight: 400; + line-height: 20px; + } + `; } declare global { diff --git a/src/panels/lovelace/views/hui-sidebar-view.ts b/src/panels/lovelace/views/hui-sidebar-view.ts index f91ce3b2cc..52569fa7fc 100644 --- a/src/panels/lovelace/views/hui-sidebar-view.ts +++ b/src/panels/lovelace/views/hui-sidebar-view.ts @@ -1,5 +1,5 @@ import { mdiArrowLeft, mdiArrowRight, mdiPlus } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { property, state } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; @@ -188,68 +188,66 @@ export class SideBarView extends LitElement implements LovelaceViewElement { }); } - static get styles(): CSSResultGroup { - return css` - :host { - display: block; - padding-top: 4px; - } + static styles = css` + :host { + display: block; + padding-top: 4px; + } - hui-view-badges { - display: block; - margin: 4px 8px 4px 8px; - font-size: 85%; - } + hui-view-badges { + display: block; + margin: 4px 8px 4px 8px; + font-size: 85%; + } - .container { - display: flex; - justify-content: center; - margin-left: 4px; - margin-right: 4px; - } + .container { + display: flex; + justify-content: center; + margin-left: 4px; + margin-right: 4px; + } - .container.edit-mode { - margin-bottom: 72px; - } + .container.edit-mode { + margin-bottom: 72px; + } - #main { - max-width: 1620px; - flex-grow: 2; - } + #main { + max-width: 1620px; + flex-grow: 2; + } - #sidebar { - flex-grow: 1; - flex-shrink: 0; - max-width: 380px; - } + #sidebar { + flex-grow: 1; + flex-shrink: 0; + max-width: 380px; + } - .container > div { - min-width: 0; - box-sizing: border-box; - } + .container > div { + min-width: 0; + box-sizing: border-box; + } - .container > div > *:not([hidden]) { - display: block; - margin: var(--masonry-view-card-margin, 4px 4px 8px); - } + .container > div > *:not([hidden]) { + display: block; + margin: var(--masonry-view-card-margin, 4px 4px 8px); + } - @media (max-width: 500px) { - .container > div > * { - margin-left: 0; - margin-right: 0; - } + @media (max-width: 500px) { + .container > div > * { + margin-left: 0; + margin-right: 0; } + } - ha-fab { - position: fixed; - right: calc(16px + env(safe-area-inset-right)); - bottom: calc(16px + env(safe-area-inset-bottom)); - inset-inline-end: calc(16px + env(safe-area-inset-right)); - inset-inline-start: initial; - z-index: 1; - } - `; - } + ha-fab { + position: fixed; + right: calc(16px + env(safe-area-inset-right)); + bottom: calc(16px + env(safe-area-inset-bottom)); + inset-inline-end: calc(16px + env(safe-area-inset-right)); + inset-inline-start: initial; + z-index: 1; + } + `; } declare global { diff --git a/src/panels/lovelace/views/hui-view-background.ts b/src/panels/lovelace/views/hui-view-background.ts index 06b7439298..a00a7fe967 100644 --- a/src/panels/lovelace/views/hui-view-background.ts +++ b/src/panels/lovelace/views/hui-view-background.ts @@ -1,5 +1,5 @@ import { css, LitElement, nothing } from "lit"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { customElement, property } from "lit/decorators"; import type { HomeAssistant } from "../../../types"; import type { LovelaceViewBackgroundConfig } from "../../../data/lovelace/config/view"; @@ -93,34 +93,32 @@ export class HUIViewBackground extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - /* Fixed background hack for Safari iOS */ - :host([fixed-background]) { - display: block; - z-index: -1; - position: fixed; - background-attachment: scroll !important; - } - :host(:not([fixed-background])) { - z-index: -1; - position: absolute; - } - :host { - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - background: var( - --view-background, - var(--lovelace-background, var(--primary-background-color)) - ); - opacity: var(--view-background-opacity); - } - `; - } + static styles = css` + /* Fixed background hack for Safari iOS */ + :host([fixed-background]) { + display: block; + z-index: -1; + position: fixed; + background-attachment: scroll !important; + } + :host(:not([fixed-background])) { + z-index: -1; + position: absolute; + } + :host { + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + background: var( + --view-background, + var(--lovelace-background, var(--primary-background-color)) + ); + opacity: var(--view-background-opacity); + } + `; } declare global { diff --git a/src/panels/lovelace/views/hui-view-container.ts b/src/panels/lovelace/views/hui-view-container.ts index 5a344b93b2..8746d44c0d 100644 --- a/src/panels/lovelace/views/hui-view-container.ts +++ b/src/panels/lovelace/views/hui-view-container.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; @@ -74,13 +74,11 @@ class HuiViewContainer extends LitElement { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: relative; - } - `; - } + static styles = css` + :host { + display: relative; + } + `; } declare global { diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index e5f64db7e8..db3b3ccf23 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -9,7 +9,7 @@ import { mdiStop, mdiVolumeHigh, } from "@mdi/js"; -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -560,173 +560,171 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { } } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - height: 100px; - box-sizing: border-box; - background: var( - --ha-card-background, - var(--card-background-color, white) - ); - border-top: 1px solid var(--divider-color); - padding-bottom: env(safe-area-inset-bottom); - } + static styles = css` + :host { + display: flex; + height: 100px; + box-sizing: border-box; + background: var( + --ha-card-background, + var(--card-background-color, white) + ); + border-top: 1px solid var(--divider-color); + padding-bottom: env(safe-area-inset-bottom); + } - mwc-linear-progress { - width: 100%; - padding: 0 4px; - --mdc-theme-primary: var(--secondary-text-color); - } + mwc-linear-progress { + width: 100%; + padding: 0 4px; + --mdc-theme-primary: var(--secondary-text-color); + } - ha-button-menu ha-button[slot="trigger"] { - line-height: 1; - --mdc-theme-primary: var(--primary-text-color); - --mdc-icon-size: 16px; - } + ha-button-menu ha-button[slot="trigger"] { + line-height: 1; + --mdc-theme-primary: var(--primary-text-color); + --mdc-icon-size: 16px; + } - .info { - flex: 1; - display: flex; - align-items: center; - width: 100%; - margin-right: 16px; - margin-inline-end: 16px; - margin-inline-start: initial; + .info { + flex: 1; + display: flex; + align-items: center; + width: 100%; + margin-right: 16px; + margin-inline-end: 16px; + margin-inline-start: initial; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } - .pointer { - cursor: pointer; - } + .pointer { + cursor: pointer; + } - .secondary, - .progress { - color: var(--secondary-text-color); - } + .secondary, + .progress { + color: var(--secondary-text-color); + } - .choose-player { - flex: 1; - display: flex; - justify-content: flex-end; - align-items: center; - padding: 16px; - } + .choose-player { + flex: 1; + display: flex; + justify-content: flex-end; + align-items: center; + padding: 16px; + } - .controls { - height: 48px; - padding-bottom: 4px; - } + .controls { + height: 48px; + padding-bottom: 4px; + } - .controls-progress { - flex: 2; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - direction: ltr; - } + .controls-progress { + flex: 2; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + direction: ltr; + } - .progress { - display: flex; - width: 100%; - align-items: center; - } + .progress { + display: flex; + width: 100%; + align-items: center; + } - mwc-linear-progress[wide] { - margin: 0 4px; - } + mwc-linear-progress[wide] { + margin: 0 4px; + } - .media-info { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - padding-left: 16px; - padding-inline-start: 16px; - padding-inline-end: initial; - width: 100%; - } + .media-info { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + padding-left: 16px; + padding-inline-start: 16px; + padding-inline-end: initial; + width: 100%; + } - hui-marquee { - font-size: 1.2em; - margin: 0px 0 4px; - } + hui-marquee { + font-size: 1.2em; + margin: 0px 0 4px; + } - img { - height: 100%; - } + img { + height: 100%; + } - .app img { - height: 68px; - margin: 16px 0 16px 16px; - } + .app img { + height: 68px; + margin: 16px 0 16px 16px; + } - :host([narrow]) { - height: 57px; - } + :host([narrow]) { + height: 57px; + } - :host([narrow]) .controls-progress { - flex: unset; - min-width: 48px; - } + :host([narrow]) .controls-progress { + flex: unset; + min-width: 48px; + } - :host([narrow]) .controls-progress.buffering { - flex: 1; - } + :host([narrow]) .controls-progress.buffering { + flex: 1; + } - :host([narrow]) .media-info { - padding-left: 8px; - padding-inline-start: 8px; - padding-inline-end: initial; - } + :host([narrow]) .media-info { + padding-left: 8px; + padding-inline-start: 8px; + padding-inline-end: initial; + } - :host([narrow]) .controls { - display: flex; - padding-bottom: 0; - --mdc-icon-size: 30px; - } + :host([narrow]) .controls { + display: flex; + padding-bottom: 0; + --mdc-icon-size: 30px; + } - :host([narrow]) .choose-player { - padding-left: 0; - padding-right: 8px; - padding-inline-start: 0; - padding-inline-end: 8px; - min-width: 48px; - flex: unset; - justify-content: center; - } + :host([narrow]) .choose-player { + padding-left: 0; + padding-right: 8px; + padding-inline-start: 0; + padding-inline-end: 8px; + min-width: 48px; + flex: unset; + justify-content: center; + } - :host([narrow]) .choose-player.browser { - justify-content: flex-end; - } + :host([narrow]) .choose-player.browser { + justify-content: flex-end; + } - :host([narrow]) mwc-linear-progress { - padding: 0; - position: absolute; - top: -4px; - left: 0; - } + :host([narrow]) mwc-linear-progress { + padding: 0; + position: absolute; + top: -4px; + left: 0; + } - ha-list-item[selected] { - font-weight: bold; - } + ha-list-item[selected] { + font-weight: bold; + } - span[slot="icon"] { - display: flex; - align-items: center; - } + span[slot="icon"] { + display: flex; + align-items: center; + } - ha-svg-icon[slot="trailingIcon"] { - margin-inline-start: 8px !important; - margin-inline-end: 0px !important; - direction: var(--direction); - } - `; - } + ha-svg-icon[slot="trailingIcon"] { + margin-inline-start: 8px !important; + margin-inline-end: 0px !important; + direction: var(--direction); + } + `; } declare global { diff --git a/src/panels/my/ha-panel-my.ts b/src/panels/my/ha-panel-my.ts index db68c52244..e8c76e53a7 100644 --- a/src/panels/my/ha-panel-my.ts +++ b/src/panels/my/ha-panel-my.ts @@ -291,18 +291,14 @@ const getRedirect = (path: string): Redirect | undefined => export type ParamType = "url" | "string" | "string?"; -export type Redirects = { [key: string]: Redirect }; +export type Redirects = Record; export interface Redirect { redirect: string; // Set to True to use browser redirect instead of frontend navigation navigate_outside_spa?: boolean; component?: string; - params?: { - [key: string]: ParamType; - }; - optional_params?: { - [key: string]: ParamType; - }; + params?: Record; + optional_params?: Record; } @customElement("ha-panel-my") @@ -354,9 +350,7 @@ class HaPanelMy extends LitElement { this.hass.loadBackendTranslation("title", this._redirect.component); this._error = "no_component"; const component = this._redirect.component; - if ( - (PROTOCOL_INTEGRATIONS as ReadonlyArray).includes(component) - ) { + if ((PROTOCOL_INTEGRATIONS as readonly string[]).includes(component)) { const params = extractSearchParamsObject(); this.hass .loadFragmentTranslation("config") diff --git a/src/panels/profile/ha-advanced-mode-row.ts b/src/panels/profile/ha-advanced-mode-row.ts index 0fd0e84c53..b67e98d26a 100644 --- a/src/panels/profile/ha-advanced-mode-row.ts +++ b/src/panels/profile/ha-advanced-mode-row.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "../../components/ha-card"; @@ -47,13 +47,11 @@ class AdvancedModeRow extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - a { - color: var(--primary-color); - } - `; - } + static styles = css` + a { + color: var(--primary-color); + } + `; } declare global { diff --git a/src/panels/profile/ha-mfa-modules-card.ts b/src/panels/profile/ha-mfa-modules-card.ts index d6219f045d..1f15f6be54 100644 --- a/src/panels/profile/ha-mfa-modules-card.ts +++ b/src/panels/profile/ha-mfa-modules-card.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -39,18 +39,16 @@ class HaMfaModulesCard extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - mwc-button { - margin-right: -0.57em; - margin-inline-end: -0.57em; - margin-inline-start: initial; - } - ha-list-item { - --mdc-list-item-meta-size: auto; - } - `; - } + static styles = css` + mwc-button { + margin-right: -0.57em; + margin-inline-end: -0.57em; + margin-inline-start: initial; + } + ha-list-item { + --mdc-list-item-meta-size: auto; + } + `; private _enable(ev) { showMfaModuleSetupFlowDialog(this, { diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts index c3c78e80a3..d37471f938 100644 --- a/src/panels/profile/ha-pick-theme-row.ts +++ b/src/panels/profile/ha-pick-theme-row.ts @@ -1,6 +1,6 @@ import "@material/mwc-button/mwc-button"; import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; @@ -224,34 +224,32 @@ export class HaPickThemeRow extends LitElement { }); } - static get styles(): CSSResultGroup { - return css` - a { - color: var(--primary-color); - } - .inputs { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - margin: 0 12px; - } - ha-formfield { - margin: 0 4px; - } - .color-pickers { - display: flex; - justify-content: flex-end; - align-items: center; - flex-grow: 1; - } - ha-textfield { - --text-field-padding: 8px; - min-width: 75px; - flex-grow: 1; - margin: 0 4px; - } - `; - } + static styles = css` + a { + color: var(--primary-color); + } + .inputs { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 0 12px; + } + ha-formfield { + margin: 0 4px; + } + .color-pickers { + display: flex; + justify-content: flex-end; + align-items: center; + flex-grow: 1; + } + ha-textfield { + --text-field-padding: 8px; + min-width: 75px; + flex-grow: 1; + margin: 0 4px; + } + `; } declare global { diff --git a/src/panels/profile/ha-push-notifications-row.ts b/src/panels/profile/ha-push-notifications-row.ts index 0077516781..dd9abe6ef1 100644 --- a/src/panels/profile/ha-push-notifications-row.ts +++ b/src/panels/profile/ha-push-notifications-row.ts @@ -57,13 +57,11 @@ class HaPushNotificationsRow extends LitElement { `; } - static get styles() { - return css` - a { - color: var(--primary-color); - } - `; - } + static styles = css` + a { + color: var(--primary-color); + } + `; } declare global { diff --git a/src/resources/polyfills/locale-data-polyfill.ts b/src/resources/polyfills/locale-data-polyfill.ts index 3aa8908fe3..179c1b5066 100644 --- a/src/resources/polyfills/locale-data-polyfill.ts +++ b/src/resources/polyfills/locale-data-polyfill.ts @@ -9,7 +9,7 @@ const INTL_POLYFILLS = [ "RelativeTimeFormat", ] as const satisfies readonly (keyof typeof Intl)[]; -const loadedLocales: Set = new Set(); +const loadedLocales = new Set(); const addData = async ( obj: (typeof INTL_POLYFILLS)[number], diff --git a/src/resources/svg-arc.ts b/src/resources/svg-arc.ts index fabf19185e..f00463e706 100644 --- a/src/resources/svg-arc.ts +++ b/src/resources/svg-arc.ts @@ -16,14 +16,14 @@ const addVector = ([a1, a2]: Vector, [b1, b2]: Vector): Vector => [ export const toRadian = (angle: number) => (angle / 180) * Math.PI; -type ArcOptions = { +interface ArcOptions { x: number; y: number; r: number; start: number; end: number; rotate?: number; -}; +} export const svgArc = (options: ArcOptions) => { const { x, y, r, start, end, rotate = 0 } = options; diff --git a/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts b/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts index ebbc8cddb1..7cc31275f1 100644 --- a/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts +++ b/src/state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues } from "lit"; +import type { PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -95,20 +95,18 @@ export class HaStateControlAlarmControlPanelModes extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-control-select { - height: 45vh; - max-height: max(320px, var(--modes-count, 1) * 80px); - min-height: max(200px, var(--modes-count, 1) * 80px); - --control-select-thickness: 130px; - --control-select-border-radius: 36px; - --control-select-color: var(--primary-color); - --control-select-background: var(--disabled-color); - --control-select-background-opacity: 0.2; - } - `; - } + static styles = css` + ha-control-select { + height: 45vh; + max-height: max(320px, var(--modes-count, 1) * 80px); + min-height: max(200px, var(--modes-count, 1) * 80px); + --control-select-thickness: 130px; + --control-select-border-radius: 36px; + --control-select-color: var(--primary-color); + --control-select-background: var(--disabled-color); + --control-select-background-opacity: 0.2; + } + `; } declare global { diff --git a/src/state-control/climate/ha-state-control-climate-humidity.ts b/src/state-control/climate/ha-state-control-climate-humidity.ts index 83871d4221..a6bfba7daa 100644 --- a/src/state-control/climate/ha-state-control-climate-humidity.ts +++ b/src/state-control/climate/ha-state-control-climate-humidity.ts @@ -45,9 +45,7 @@ export class HaStateControlClimateHumidity extends LitElement { } } - private get _step() { - return 1; - } + private _step = 1; private get _min() { return this.stateObj.attributes.min_humidity ?? 0; diff --git a/src/state-control/cover/ha-state-control-cover-buttons.ts b/src/state-control/cover/ha-state-control-cover-buttons.ts index 8a498b0499..da0f1efffc 100644 --- a/src/state-control/cover/ha-state-control-cover-buttons.ts +++ b/src/state-control/cover/ha-state-control-cover-buttons.ts @@ -1,5 +1,5 @@ import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -33,10 +33,10 @@ type CoverButton = | "close-tilt" | "none"; -type CoverLayout = { +interface CoverLayout { type: "line" | "cross"; buttons: CoverButton[]; -}; +} export const getCoverLayout = memoizeOne( (stateObj: CoverEntity): CoverLayout => { @@ -242,50 +242,48 @@ export class HaStateControlCoverButtons extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-control-button-group { - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-button-group-spacing: 10px; - --control-button-group-thickness: 100px; - } - .cross-container { - height: 45vh; - max-height: 320px; - min-height: 200px; - display: grid; - gap: 10px; - grid-template-columns: repeat(3, min(100px, 25vw, 15vh)); - grid-template-rows: repeat(3, min(100px, 25vw, 15vh)); - grid-template-areas: ". open ." "close-tilt stop open-tilt" ". close ."; - } - .cross-container > * { - width: 100%; - height: 100%; - } - .cross-container > [data-button="open"] { - grid-area: open; - } - .cross-container > [data-button="close"] { - grid-area: close; - } - .cross-container > [data-button="open-tilt"] { - grid-area: open-tilt; - } - .cross-container > [data-button="close-tilt"] { - grid-area: close-tilt; - } - .cross-container > [data-button="stop"] { - grid-area: stop; - } - ha-control-button { - --control-button-border-radius: 36px; - --mdc-icon-size: 24px; - } - `; - } + static styles = css` + ha-control-button-group { + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-button-group-spacing: 10px; + --control-button-group-thickness: 100px; + } + .cross-container { + height: 45vh; + max-height: 320px; + min-height: 200px; + display: grid; + gap: 10px; + grid-template-columns: repeat(3, min(100px, 25vw, 15vh)); + grid-template-rows: repeat(3, min(100px, 25vw, 15vh)); + grid-template-areas: ". open ." "close-tilt stop open-tilt" ". close ."; + } + .cross-container > * { + width: 100%; + height: 100%; + } + .cross-container > [data-button="open"] { + grid-area: open; + } + .cross-container > [data-button="close"] { + grid-area: close; + } + .cross-container > [data-button="open-tilt"] { + grid-area: open-tilt; + } + .cross-container > [data-button="close-tilt"] { + grid-area: close-tilt; + } + .cross-container > [data-button="stop"] { + grid-area: stop; + } + ha-control-button { + --control-button-border-radius: 36px; + --mdc-icon-size: 24px; + } + `; } declare global { diff --git a/src/state-control/cover/ha-state-control-cover-position.ts b/src/state-control/cover/ha-state-control-cover-position.ts index 35344eff4e..5608ed92b5 100644 --- a/src/state-control/cover/ha-state-control-cover-position.ts +++ b/src/state-control/cover/ha-state-control-cover-position.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -70,21 +70,19 @@ export class HaStateControlCoverPosition extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-control-slider { - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; - --control-slider-color: var(--primary-color); - --control-slider-background: var(--disabled-color); - --control-slider-background-opacity: 0.2; - --control-slider-tooltip-font-size: 20px; - } - `; - } + static styles = css` + ha-control-slider { + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 36px; + --control-slider-color: var(--primary-color); + --control-slider-background: var(--disabled-color); + --control-slider-background-opacity: 0.2; + --control-slider-tooltip-font-size: 20px; + } + `; } declare global { diff --git a/src/state-control/cover/ha-state-control-cover-toggle.ts b/src/state-control/cover/ha-state-control-cover-toggle.ts index 613e146f69..071c15c758 100644 --- a/src/state-control/cover/ha-state-control-cover-toggle.ts +++ b/src/state-control/cover/ha-state-control-cover-toggle.ts @@ -1,5 +1,5 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -137,43 +137,41 @@ export class HaStateControlCoverToggle extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-control-switch { - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-switch-thickness: 130px; - --control-switch-border-radius: 36px; - --control-switch-padding: 6px; - --mdc-icon-size: 24px; - } - .buttons { - display: flex; - flex-direction: column; - width: 130px; - height: 45vh; - max-height: 320px; - min-height: 200px; - padding: 6px; - box-sizing: border-box; - } - ha-control-button { - flex: 1; - width: 100%; - --control-button-border-radius: 36px; - --mdc-icon-size: 24px; - } - ha-control-button.active { - --control-button-icon-color: white; - --control-button-background-color: var(--color); - --control-button-background-opacity: 1; - } - ha-control-button:not(:last-child) { - margin-bottom: 6px; - } - `; - } + static styles = css` + ha-control-switch { + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-switch-thickness: 130px; + --control-switch-border-radius: 36px; + --control-switch-padding: 6px; + --mdc-icon-size: 24px; + } + .buttons { + display: flex; + flex-direction: column; + width: 130px; + height: 45vh; + max-height: 320px; + min-height: 200px; + padding: 6px; + box-sizing: border-box; + } + ha-control-button { + flex: 1; + width: 100%; + --control-button-border-radius: 36px; + --mdc-icon-size: 24px; + } + ha-control-button.active { + --control-button-icon-color: white; + --control-button-background-color: var(--color); + --control-button-background-opacity: 1; + } + ha-control-button:not(:last-child) { + margin-bottom: 6px; + } + `; } declare global { diff --git a/src/state-control/fan/ha-state-control-fan-speed.ts b/src/state-control/fan/ha-state-control-fan-speed.ts index 61f0132253..8ed0d15baf 100644 --- a/src/state-control/fan/ha-state-control-fan-speed.ts +++ b/src/state-control/fan/ha-state-control-fan-speed.ts @@ -1,4 +1,3 @@ -import type { CSSResultGroup } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -136,31 +135,29 @@ export class HaStateControlFanSpeed extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-control-slider { - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; - --control-slider-color: var(--primary-color); - --control-slider-background: var(--disabled-color); - --control-slider-background-opacity: 0.2; - --control-slider-tooltip-font-size: 20px; - } - ha-control-select { - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-select-thickness: 130px; - --control-select-border-radius: 36px; - --control-select-color: var(--primary-color); - --control-select-background: var(--disabled-color); - --control-select-background-opacity: 0.2; - } - `; - } + static styles = css` + ha-control-slider { + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 36px; + --control-slider-color: var(--primary-color); + --control-slider-background: var(--disabled-color); + --control-slider-background-opacity: 0.2; + --control-slider-tooltip-font-size: 20px; + } + ha-control-select { + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-select-thickness: 130px; + --control-select-border-radius: 36px; + --control-select-color: var(--primary-color); + --control-select-background: var(--disabled-color); + --control-select-background-opacity: 0.2; + } + `; } declare global { diff --git a/src/state-control/ha-state-control-toggle.ts b/src/state-control/ha-state-control-toggle.ts index 51dd950199..bcf01ad8c2 100644 --- a/src/state-control/ha-state-control-toggle.ts +++ b/src/state-control/ha-state-control-toggle.ts @@ -1,6 +1,6 @@ import { mdiFlash, mdiFlashOff } from "@mdi/js"; import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -128,43 +128,41 @@ export class HaStateControlToggle extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-control-switch { - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-switch-thickness: 130px; - --control-switch-border-radius: 36px; - --control-switch-padding: 6px; - --mdc-icon-size: 24px; - } - .buttons { - display: flex; - flex-direction: column; - width: 130px; - height: 45vh; - max-height: 320px; - min-height: 200px; - padding: 6px; - box-sizing: border-box; - } - ha-control-button { - flex: 1; - width: 100%; - --control-button-border-radius: 36px; - --mdc-icon-size: 24px; - } - ha-control-button.active { - --control-button-icon-color: white; - --control-button-background-color: var(--color); - --control-button-background-opacity: 1; - } - ha-control-button:not(:last-child) { - margin-bottom: 6px; - } - `; - } + static styles = css` + ha-control-switch { + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-switch-thickness: 130px; + --control-switch-border-radius: 36px; + --control-switch-padding: 6px; + --mdc-icon-size: 24px; + } + .buttons { + display: flex; + flex-direction: column; + width: 130px; + height: 45vh; + max-height: 320px; + min-height: 200px; + padding: 6px; + box-sizing: border-box; + } + ha-control-button { + flex: 1; + width: 100%; + --control-button-border-radius: 36px; + --mdc-icon-size: 24px; + } + ha-control-button.active { + --control-button-icon-color: white; + --control-button-background-color: var(--color); + --control-button-background-opacity: 1; + } + ha-control-button:not(:last-child) { + margin-bottom: 6px; + } + `; } declare global { diff --git a/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts b/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts index a840aa9bf0..3072710d2c 100644 --- a/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts +++ b/src/state-control/humidifier/ha-state-control-humidifier-humidity.ts @@ -50,9 +50,7 @@ export class HaStateControlHumidifierHumidity extends LitElement { } } - private get _step() { - return 1; - } + private _step = 1; private get _min() { return this.stateObj.attributes.min_humidity ?? 0; diff --git a/src/state-control/light/ha-state-control-light-brightness.ts b/src/state-control/light/ha-state-control-light-brightness.ts index 941904677e..ce649782ea 100644 --- a/src/state-control/light/ha-state-control-light-brightness.ts +++ b/src/state-control/light/ha-state-control-light-brightness.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -83,22 +83,20 @@ export class HaStateControlLightBrightness extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-control-slider { - position: relative; - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; - --control-slider-color: var(--primary-color); - --control-slider-background: var(--disabled-color); - --control-slider-background-opacity: 0.2; - --control-slider-tooltip-font-size: 20px; - } - `; - } + static styles = css` + ha-control-slider { + position: relative; + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 36px; + --control-slider-color: var(--primary-color); + --control-slider-background: var(--disabled-color); + --control-slider-background-opacity: 0.2; + --control-slider-tooltip-font-size: 20px; + } + `; } declare global { diff --git a/src/state-control/lock/ha-state-control-lock-toggle.ts b/src/state-control/lock/ha-state-control-lock-toggle.ts index 5e0996d9a8..6e9c4ba548 100644 --- a/src/state-control/lock/ha-state-control-lock-toggle.ts +++ b/src/state-control/lock/ha-state-control-lock-toggle.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; +import type { PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -145,57 +145,55 @@ export class HaStateControlLockToggle extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - @keyframes pulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } + static styles = css` + @keyframes pulse { + 0% { + opacity: 1; } - ha-control-switch { - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-switch-thickness: 130px; - --control-switch-border-radius: 36px; - --control-switch-padding: 6px; - --mdc-icon-size: 24px; + 50% { + opacity: 0; } - .pulse { - animation: pulse 1s infinite; + 100% { + opacity: 1; } - .buttons { - display: flex; - flex-direction: column; - width: 130px; - height: 45vh; - max-height: 320px; - min-height: 200px; - padding: 6px; - box-sizing: border-box; - } - ha-control-button { - flex: 1; - width: 100%; - --control-button-border-radius: 36px; - --mdc-icon-size: 24px; - } - ha-control-button.active { - --control-button-icon-color: white; - --control-button-background-color: var(--color); - --control-button-background-opacity: 1; - } - ha-control-button:not(:last-child) { - margin-bottom: 6px; - } - `; - } + } + ha-control-switch { + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-switch-thickness: 130px; + --control-switch-border-radius: 36px; + --control-switch-padding: 6px; + --mdc-icon-size: 24px; + } + .pulse { + animation: pulse 1s infinite; + } + .buttons { + display: flex; + flex-direction: column; + width: 130px; + height: 45vh; + max-height: 320px; + min-height: 200px; + padding: 6px; + box-sizing: border-box; + } + ha-control-button { + flex: 1; + width: 100%; + --control-button-border-radius: 36px; + --mdc-icon-size: 24px; + } + ha-control-button.active { + --control-button-icon-color: white; + --control-button-background-color: var(--color); + --control-button-background-opacity: 1; + } + ha-control-button:not(:last-child) { + margin-bottom: 6px; + } + `; } declare global { diff --git a/src/state-control/valve/ha-state-control-valve-buttons.ts b/src/state-control/valve/ha-state-control-valve-buttons.ts index 14fc74a96e..897cc64ba3 100644 --- a/src/state-control/valve/ha-state-control-valve-buttons.ts +++ b/src/state-control/valve/ha-state-control-valve-buttons.ts @@ -1,5 +1,5 @@ import { mdiStop, mdiValveClosed, mdiValveOpen } from "@mdi/js"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; @@ -115,21 +115,19 @@ export class HaStateControlValveButtons extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-control-button-group { - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-button-group-spacing: 10px; - --control-button-group-thickness: 100px; - } - ha-control-button { - --control-button-border-radius: 36px; - --mdc-icon-size: 24px; - } - `; - } + static styles = css` + ha-control-button-group { + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-button-group-spacing: 10px; + --control-button-group-thickness: 100px; + } + ha-control-button { + --control-button-border-radius: 36px; + --mdc-icon-size: 24px; + } + `; } declare global { diff --git a/src/state-control/valve/ha-state-control-valve-position.ts b/src/state-control/valve/ha-state-control-valve-position.ts index 947e6a9c32..45808adc61 100644 --- a/src/state-control/valve/ha-state-control-valve-position.ts +++ b/src/state-control/valve/ha-state-control-valve-position.ts @@ -1,4 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; @@ -66,21 +66,19 @@ export class HaStateControlValvePosition extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-control-slider { - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-slider-thickness: 130px; - --control-slider-border-radius: 36px; - --control-slider-color: var(--primary-color); - --control-slider-background: var(--disabled-color); - --control-slider-background-opacity: 0.2; - --control-slider-tooltip-font-size: 20px; - } - `; - } + static styles = css` + ha-control-slider { + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-slider-thickness: 130px; + --control-slider-border-radius: 36px; + --control-slider-color: var(--primary-color); + --control-slider-background: var(--disabled-color); + --control-slider-background-opacity: 0.2; + --control-slider-tooltip-font-size: 20px; + } + `; } declare global { diff --git a/src/state-control/valve/ha-state-control-valve-toggle.ts b/src/state-control/valve/ha-state-control-valve-toggle.ts index 7d38dbf332..e06f3ae9d6 100644 --- a/src/state-control/valve/ha-state-control-valve-toggle.ts +++ b/src/state-control/valve/ha-state-control-valve-toggle.ts @@ -1,5 +1,5 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; @@ -137,43 +137,41 @@ export class HaStateControlValveToggle extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - ha-control-switch { - height: 45vh; - max-height: 320px; - min-height: 200px; - --control-switch-thickness: 130px; - --control-switch-border-radius: 36px; - --control-switch-padding: 6px; - --mdc-icon-size: 24px; - } - .buttons { - display: flex; - flex-direction: column; - width: 130px; - height: 45vh; - max-height: 320px; - min-height: 200px; - padding: 6px; - box-sizing: border-box; - } - ha-control-button { - flex: 1; - width: 100%; - --control-button-border-radius: 36px; - --mdc-icon-size: 24px; - } - ha-control-button.active { - --control-button-icon-color: white; - --control-button-background-color: var(--color); - --control-button-background-opacity: 1; - } - ha-control-button:not(:last-child) { - margin-bottom: 6px; - } - `; - } + static styles = css` + ha-control-switch { + height: 45vh; + max-height: 320px; + min-height: 200px; + --control-switch-thickness: 130px; + --control-switch-border-radius: 36px; + --control-switch-padding: 6px; + --mdc-icon-size: 24px; + } + .buttons { + display: flex; + flex-direction: column; + width: 130px; + height: 45vh; + max-height: 320px; + min-height: 200px; + padding: 6px; + box-sizing: border-box; + } + ha-control-button { + flex: 1; + width: 100%; + --control-button-border-radius: 36px; + --mdc-icon-size: 24px; + } + ha-control-button.active { + --control-button-icon-color: white; + --control-button-background-color: var(--color); + --control-button-background-opacity: 1; + } + ha-control-button:not(:last-child) { + margin-bottom: 6px; + } + `; } declare global { diff --git a/src/state-summary/state-card-input_number.ts b/src/state-summary/state-card-input_number.ts index ae3c46348e..39497ead04 100644 --- a/src/state-summary/state-card-input_number.ts +++ b/src/state-summary/state-card-input_number.ts @@ -1,5 +1,5 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { debounce } from "../common/util/debounce"; @@ -88,30 +88,28 @@ class StateCardInputNumber extends LitElement { `; } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - } - .flex { - display: flex; - align-items: center; - justify-content: flex-end; - flex-grow: 2; - } - .state { - min-width: 45px; - text-align: end; - } - ha-textfield { - text-align: end; - } - ha-slider { - width: 100%; - max-width: 200px; - } - `; - } + static styles = css` + :host { + display: flex; + } + .flex { + display: flex; + align-items: center; + justify-content: flex-end; + flex-grow: 2; + } + .state { + min-width: 45px; + text-align: end; + } + ha-textfield { + text-align: end; + } + ha-slider { + width: 100%; + max-width: 200px; + } + `; private async _initialLoad(): Promise { this._loaded = true; diff --git a/src/state-summary/state-card-input_select.ts b/src/state-summary/state-card-input_select.ts index 5c02b150bb..9a719ec450 100644 --- a/src/state-summary/state-card-input_select.ts +++ b/src/state-summary/state-card-input_select.ts @@ -1,6 +1,6 @@ import "@material/mwc-list/mwc-list-item"; import "../components/ha-select"; -import type { CSSResultGroup, TemplateResult, PropertyValues } from "lit"; +import type { TemplateResult, PropertyValues } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property, query } from "lit/decorators"; import { stopPropagation } from "../common/dom/stop_propagation"; @@ -63,22 +63,20 @@ class StateCardInputSelect extends LitElement { await setInputSelectOption(this.hass, this.stateObj.entity_id, option); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - } + static styles = css` + :host { + display: flex; + } - state-badge { - float: left; - margin-top: 10px; - } + state-badge { + float: left; + margin-top: 10px; + } - ha-select { - width: 100%; - } - `; - } + ha-select { + width: 100%; + } + `; } declare global { diff --git a/src/state-summary/state-card-input_text.ts b/src/state-summary/state-card-input_text.ts index f6f0695d47..29f4bf98be 100644 --- a/src/state-summary/state-card-input_text.ts +++ b/src/state-summary/state-card-input_text.ts @@ -16,7 +16,7 @@ class StateCardInputText extends LitElement { @property({ attribute: "in-dialog", type: Boolean }) public inDialog = false; - @state() public value: string = ""; + @state() public value = ""; protected render(): TemplateResult { return html` diff --git a/src/state-summary/state-card-select.ts b/src/state-summary/state-card-select.ts index 321a428378..f87081b2a2 100644 --- a/src/state-summary/state-card-select.ts +++ b/src/state-summary/state-card-select.ts @@ -1,5 +1,5 @@ import "@material/mwc-list/mwc-list-item"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { stopPropagation } from "../common/dom/stop_propagation"; @@ -48,22 +48,20 @@ class StateCardSelect extends LitElement { setSelectOption(this.hass, this.stateObj.entity_id, option); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - } + static styles = css` + :host { + display: flex; + } - state-badge { - float: left; - margin-top: 10px; - } + state-badge { + float: left; + margin-top: 10px; + } - ha-select { - width: 100%; - } - `; - } + ha-select { + width: 100%; + } + `; } declare global { diff --git a/src/state-summary/state-card-text.ts b/src/state-summary/state-card-text.ts index 6fa3967148..e7b45da80f 100644 --- a/src/state-summary/state-card-text.ts +++ b/src/state-summary/state-card-text.ts @@ -1,5 +1,5 @@ import "../components/ha-textfield"; -import type { CSSResultGroup, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { computeStateName } from "../common/entity/compute_state_name"; @@ -50,22 +50,20 @@ class StateCardText extends LitElement { setValue(this.hass!, this.stateObj.entity_id, value); } - static get styles(): CSSResultGroup { - return css` - :host { - display: flex; - } + static styles = css` + :host { + display: flex; + } - state-badge { - float: left; - margin-top: 10px; - } + state-badge { + float: left; + margin-top: 10px; + } - ha-textfield { - width: 100%; - } - `; - } + ha-textfield { + width: 100%; + } + `; } declare global { diff --git a/src/state/hass-base-mixin.ts b/src/state/hass-base-mixin.ts index fc4c44d90d..977f72df9c 100644 --- a/src/state/hass-base-mixin.ts +++ b/src/state/hass-base-mixin.ts @@ -21,14 +21,19 @@ export class HassBaseEl extends LitElement { } // Exists so all methods can safely call super method + // eslint-disable-next-line @typescript-eslint/no-empty-function protected hassConnected() {} + // eslint-disable-next-line @typescript-eslint/no-empty-function protected hassReconnected() {} + // eslint-disable-next-line @typescript-eslint/no-empty-function protected hassDisconnected() {} + // eslint-disable-next-line @typescript-eslint/no-empty-function protected panelUrlChanged(_newPanelUrl) {} + // eslint-disable-next-line @typescript-eslint/no-empty-function protected checkDataBaseMigration() {} protected hassChanged(hass, _oldHass) { diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts index e7bb4db8e2..6d84bb0825 100644 --- a/src/state/translations-mixin.ts +++ b/src/state/translations-mixin.ts @@ -75,12 +75,10 @@ export default >(superClass: T) => // eslint-disable-next-line: variable-name private __coreProgress?: string; - private __loadedFragmentTranslations: Set = new Set(); + private __loadedFragmentTranslations = new Set(); - private __loadedTranslations: { - // track what things have been loaded - [category: string]: LoadedTranslationCategory; - } = {}; + private __loadedTranslations: Record = + {}; protected firstUpdated(changedProps) { super.firstUpdated(changedProps); diff --git a/src/types.ts b/src/types.ts index f5373fdcf1..02d50a82ab 100644 --- a/src/types.ts +++ b/src/types.ts @@ -136,9 +136,7 @@ export interface PanelInfo | null> { config_panel_domain?: string; } -export interface Panels { - [name: string]: PanelInfo; -} +export type Panels = Record; export interface CalendarViewChanged { end: Date; @@ -168,9 +166,7 @@ export interface Translation { export interface TranslationMetadata { fragments: string[]; - translations: { - [lang: string]: Translation; - }; + translations: Record; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports @@ -194,9 +190,7 @@ export interface Notification { created_at: string; } -export interface Resources { - [language: string]: Record; -} +export type Resources = Record>; export interface Context { id: string; @@ -221,10 +215,10 @@ export interface HomeAssistant { connection: Connection; connected: boolean; states: HassEntities; - entities: { [id: string]: EntityRegistryDisplayEntry }; - devices: { [id: string]: DeviceRegistryEntry }; - areas: { [id: string]: AreaRegistryEntry }; - floors: { [id: string]: FloorRegistryEntry }; + entities: Record; + devices: Record; + areas: Record; + floors: Record; services: HassServices; config: HassConfig; themes: Themes; diff --git a/src/util/hass-media-player-model.ts b/src/util/hass-media-player-model.ts index 0d4c90fb60..852fe1baad 100644 --- a/src/util/hass-media-player-model.ts +++ b/src/util/hass-media-player-model.ts @@ -8,7 +8,7 @@ export default class MediaPlayerEntity { public stateObj: HassEntity; - private _attr: { [key: string]: any }; + private _attr: Record; constructor(hass: HomeAssistant, stateObj: HassEntity) { this.hass = hass;