From a7b1c45c00792031986bd3bca5c2e00636d88874 Mon Sep 17 00:00:00 2001 From: Wendelin <12148533+wendevlin@users.noreply.github.com> Date: Tue, 25 Feb 2025 14:58:38 +0100 Subject: [PATCH] Replace simple-tooltip with ha-tooltip (#24384) * Start with simple-tooltip migration * Remove simple-tooltip * Fix tooltip in hassio-repositories * Remove space * Update hassio/src/dialogs/repositories/dialog-hassio-repositories.ts Co-authored-by: Bram Kragten * Update src/components/ha-icon-overflow-menu.ts Co-authored-by: Bram Kragten * Update src/components/ha-target-picker.ts Co-authored-by: Bram Kragten * Update src/components/media-player/ha-media-player-browse.ts Co-authored-by: Bram Kragten * Update src/components/ha-target-picker.ts Co-authored-by: Bram Kragten * Fix content props * Use ha-tooltip in data-table-icon * Update src/panels/config/areas/ha-config-area-page.ts Co-authored-by: Bram Kragten * Update src/panels/config/devices/ha-config-device-page.ts Co-authored-by: Bram Kragten * Update src/panels/config/integrations/ha-integration-card.ts Co-authored-by: Bram Kragten * Update src/panels/config/integrations/ha-integration-card.ts Co-authored-by: Bram Kragten * Update src/panels/config/integrations/ha-integration-list-item.ts Co-authored-by: Bram Kragten * Update src/panels/config/integrations/ha-integration-list-item.ts Co-authored-by: Bram Kragten --------- Co-authored-by: Bram Kragten --- hassio/src/backups/hassio-backups.ts | 4 - .../dialog-hassio-repositories.ts | 45 +++++---- package.json | 1 - .../data-table/ha-data-table-icon.ts | 41 ++------- src/components/entity/state-info.ts | 18 ++-- src/components/ha-help-tooltip.ts | 26 ++++-- src/components/ha-icon-overflow-menu.ts | 21 ++--- src/components/ha-network.ts | 1 - src/components/ha-target-picker.ts | 62 +++++++------ .../media-player/ha-media-player-browse.ts | 11 +-- src/dialogs/config-flow/step-flow-form.ts | 1 - .../more-info/controls/more-info-weather.ts | 18 ++-- src/layouts/hass-tabs-subpage-data-table.ts | 1 - .../config/areas/ha-config-area-page.ts | 31 +++---- .../action/ha-automation-action-row.ts | 18 ++-- .../config/automation/ha-automation-picker.ts | 2 - .../config/backup/ha-config-backup-backups.ts | 6 -- .../config/blueprint/ha-blueprint-overview.ts | 1 - .../config/devices/ha-config-device-page.ts | 44 ++++----- .../devices/ha-config-devices-dashboard.ts | 1 - .../config/entities/ha-config-entities.ts | 38 ++++---- .../config/helpers/dialog-helper-detail.ts | 66 ++++++------- .../config/helpers/ha-config-helpers.ts | 12 ++- .../ha-config-integration-page.ts | 1 - .../integrations/ha-integration-card.ts | 44 ++++----- .../integrations/ha-integration-list-item.ts | 49 +++++----- .../zha/dialog-zha-reconfigure-device.ts | 19 ++-- .../zwave_js/zwave_js-config-dashboard.ts | 1 - .../config/logs/dialog-system-log-detail.ts | 1 - .../ha-config-lovelace-dashboards.ts | 20 ++-- src/panels/config/scene/ha-scene-dashboard.ts | 20 ++-- src/panels/config/users/ha-config-users.ts | 1 - .../expose/expose-assistant-icon.ts | 92 +++++++++---------- .../ha-config-voice-assistants-expose.ts | 48 +++++----- src/panels/config/zone/ha-config-zone.ts | 29 +++--- .../hui-energy-carbon-consumed-gauge-card.ts | 29 +++--- .../hui-energy-grid-neutrality-gauge-card.ts | 40 ++++---- .../hui-energy-self-sufficiency-gauge-card.ts | 29 +++--- .../hui-energy-solar-consumed-gauge-card.ts | 36 +++----- src/panels/profile/ha-refresh-tokens-card.ts | 1 - tsconfig.json | 5 +- yarn.lock | 10 -- 42 files changed, 426 insertions(+), 518 deletions(-) diff --git a/hassio/src/backups/hassio-backups.ts b/hassio/src/backups/hassio-backups.ts index 9a81163941..57c5fba4bf 100644 --- a/hassio/src/backups/hassio-backups.ts +++ b/hassio/src/backups/hassio-backups.ts @@ -253,13 +253,9 @@ export class HassioBackups extends LitElement { "backup.delete_selected" )} .path=${mdiDelete} - id="delete-btn" class="warning" @click=${this._deleteSelected} > - - ${this.supervisor.localize("backup.delete_selected")} - `} ` diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index e2769703f6..19b348d401 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -1,6 +1,5 @@ import "@material/mwc-button/mwc-button"; import { mdiDelete, mdiDeleteOff } from "@mdi/js"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; @@ -8,6 +7,7 @@ import memoizeOne from "memoize-one"; import { fireEvent } from "../../../../src/common/dom/fire_event"; import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare"; import "../../../../src/components/ha-alert"; +import "../../../../src/components/ha-tooltip"; import "../../../../src/components/ha-circular-progress"; import { createCloseHeading } from "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-icon-button"; @@ -118,28 +118,27 @@ class HassioRepositoriesDialog extends LitElement {
${repo.maintainer}
${repo.url}
-
- - - - ${this._dialogParams!.supervisor.localize( - usedRepositories.includes(repo.slug) - ? "dialog.repositories.used" - : "dialog.repositories.remove" - )} - -
+ +
+ + +
+ ` ) diff --git a/package.json b/package.json index bbce73f054..3506aefb1c 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,6 @@ "@lit-labs/motion": "1.0.8", "@lit-labs/observers": "2.0.5", "@lit-labs/virtualizer": "2.1.0", - "@lrnwebcomponents/simple-tooltip": "8.0.2", "@material/chips": "=14.0.0-canary.53b3cad2f.0", "@material/data-table": "=14.0.0-canary.53b3cad2f.0", "@material/mwc-base": "0.27.0", diff --git a/src/components/data-table/ha-data-table-icon.ts b/src/components/data-table/ha-data-table-icon.ts index 9fdda54e40..a4b797d82f 100644 --- a/src/components/data-table/ha-data-table-icon.ts +++ b/src/components/data-table/ha-data-table-icon.ts @@ -1,7 +1,8 @@ -import type { PropertyValues, TemplateResult } from "lit"; +import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; -import { customElement, property, state } from "lit/decorators"; +import { customElement, property } from "lit/decorators"; import "../ha-svg-icon"; +import "../ha-tooltip"; @customElement("ha-data-table-icon") class HaDataTableIcon extends LitElement { @@ -9,30 +10,14 @@ class HaDataTableIcon extends LitElement { @property() public path!: string; - @state() private _hovered = false; - protected render(): TemplateResult { return html` - ${this._hovered ? html`
${this.tooltip}
` : ""} - + + + `; } - protected override firstUpdated(changedProps: PropertyValues): void { - super.firstUpdated(changedProps); - const show = () => { - this._hovered = true; - }; - const hide = () => { - this._hovered = false; - }; - this.addEventListener("mouseenter", show); - this.addEventListener("focus", show); - this.addEventListener("mouseleave", hide); - this.addEventListener("blur", hide); - this.addEventListener("tap", hide); - } - static styles = css` :host { display: inline-block; @@ -41,20 +26,6 @@ class HaDataTableIcon extends LitElement { 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; - } `; } diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts index 3061e7aba3..15d274bb21 100644 --- a/src/components/entity/state-info.ts +++ b/src/components/entity/state-info.ts @@ -1,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { HassEntity } from "home-assistant-js-websocket"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; @@ -6,6 +5,7 @@ import { computeStateName } from "../../common/entity/compute_state_name"; import type { HomeAssistant } from "../../types"; import "../ha-relative-time"; import "./state-badge"; +import "../ha-tooltip"; @customElement("state-info") class StateInfo extends LitElement { @@ -36,13 +36,13 @@ class StateInfo extends LitElement { ${this.inDialog ? html`
- - -
+ + +
${this.hass.localize( @@ -68,7 +68,7 @@ class StateInfo extends LitElement { >
- +
` : html`
`}
`; diff --git a/src/components/ha-help-tooltip.ts b/src/components/ha-help-tooltip.ts index b6acf428bd..1d88cd748d 100644 --- a/src/components/ha-help-tooltip.ts +++ b/src/components/ha-help-tooltip.ts @@ -1,25 +1,33 @@ import { mdiHelpCircle } from "@mdi/js"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { TemplateResult } from "lit"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import "./ha-svg-icon"; +import "./ha-tooltip"; @customElement("ha-help-tooltip") export class HaHelpTooltip extends LitElement { @property() public label!: string; - @property() public position = "top"; + @property() public position: + | "top" + | "bottom" + | "left" + | "right" + | "top-start" + | "top-end" + | "right-start" + | "right-end" + | "bottom-start" + | "bottom-end" + | "left-start" + | "left-end" = "top"; protected render(): TemplateResult { return html` - - ${this.label} + + + `; } diff --git a/src/components/ha-icon-overflow-menu.ts b/src/components/ha-icon-overflow-menu.ts index f7ebc3e9e9..baa5db8fcf 100644 --- a/src/components/ha-icon-overflow-menu.ts +++ b/src/components/ha-icon-overflow-menu.ts @@ -1,7 +1,6 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiDotsVertical } from "@mdi/js"; import type { TemplateResult } from "lit"; -import { css, html, LitElement } from "lit"; +import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { haStyle } from "../resources/styles"; @@ -10,6 +9,7 @@ import "./ha-button-menu"; import "./ha-icon-button"; import "./ha-list-item"; import "./ha-svg-icon"; +import "./ha-tooltip"; export interface IconOverflowMenuItem { [key: string]: any; @@ -70,25 +70,20 @@ export class HaIconOverflowMenu extends LitElement { ${this.items.map((item) => item.narrowOnly - ? "" + ? nothing : item.divider ? html`
` - : html`
- ${item.tooltip - ? html` - ${item.tooltip} - ` - : ""} + : html` -
` + ` )} `} `; diff --git a/src/components/ha-network.ts b/src/components/ha-network.ts index f46bf00ced..00c8f521c7 100644 --- a/src/components/ha-network.ts +++ b/src/components/ha-network.ts @@ -1,5 +1,4 @@ import { mdiStar } from "@mdi/js"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index 19efb2167d..17d108b637 100644 --- a/src/components/ha-target-picker.ts +++ b/src/components/ha-target-picker.ts @@ -1,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; // @ts-ignore import chipStyles from "@material/chips/dist/mdc.chips.min.css"; import "@material/mwc-button/mwc-button"; @@ -47,6 +46,7 @@ import { floorDefaultIconPath } from "./ha-floor-icon"; import "./ha-icon-button"; import "./ha-input-helper-text"; import "./ha-svg-icon"; +import "./ha-tooltip"; @customElement("ha-target-picker") export class HaTargetPicker extends SubscribeMixin(LitElement) { @@ -339,38 +339,40 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { ${type === "entity_id" ? "" : html` - - ${this.hass.localize( + + + `} - - ${this.hass.localize( + + + `; @@ -828,9 +830,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { .mdc-chip:hover { z-index: 5; } - simple-tooltip.expand { - min-width: 200px; - } :host([disabled]) .mdc-chip { opacity: var(--light-disabled-opacity); pointer-events: none; @@ -844,6 +843,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { display: block; width: 100%; } + ha-tooltip { + --ha-tooltip-arrow-size: 0; + } `; } } diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index 580828b6f4..58a12fb0de 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -4,7 +4,6 @@ import "@material/mwc-button/mwc-button"; import "@material/mwc-list/mwc-list"; import "@material/mwc-list/mwc-list-item"; import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { @@ -50,6 +49,7 @@ import "../ha-circular-progress"; import "../ha-fab"; import "../ha-icon-button"; import "../ha-svg-icon"; +import "../ha-tooltip"; import "./ha-browse-media-tts"; import type { TtsMediaPickedEvent } from "./ha-browse-media-tts"; import { loadVirtualizer } from "../../resources/virtualizer"; @@ -603,12 +603,9 @@ export class HaMediaPlayerBrowse extends LitElement { ` : ""} -
- ${child.title} - ${child.title} -
+ +
${child.title}
+ `; diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts index 9994ec3faa..323ed5f86b 100644 --- a/src/dialogs/config-flow/step-flow-form.ts +++ b/src/dialogs/config-flow/step-flow-form.ts @@ -1,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@material/mwc-button"; import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts index edf30a2baf..3b245c601c 100644 --- a/src/dialogs/more-info/controls/more-info-weather.ts +++ b/src/dialogs/more-info/controls/more-info-weather.ts @@ -9,6 +9,7 @@ import { formatDateWeekdayShort } from "../../../common/datetime/format_date"; import { formatTime } from "../../../common/datetime/format_time"; import { formatNumber } from "../../../common/number/format_number"; import "../../../components/ha-svg-icon"; +import "../../../components/ha-tooltip"; import type { ForecastEvent, ModernForecastType, @@ -157,14 +158,13 @@ class MoreInfoWeather extends LitElement { ${this.hass.formatEntityState(this.stateObj)}
- - -
+ + +
${this.hass.localize( @@ -190,7 +190,7 @@ class MoreInfoWeather extends LitElement { >
- +
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index fed2ea2275..db63c30c7c 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -1,5 +1,4 @@ import { ResizeController } from "@lit-labs/observers/resize-controller"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@material/mwc-button/mwc-button"; import { mdiArrowDown, diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index ccca5de10e..398bedb30c 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/src/panels/config/areas/ha-config-area-page.ts @@ -20,6 +20,7 @@ import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; import "../../../components/ha-list-item"; import "../../../components/ha-button-menu"; +import "../../../components/ha-tooltip"; import type { AreaRegistryEntry } from "../../../data/area_registry"; import { deleteAreaRegistryEntry, @@ -549,7 +550,11 @@ class HaConfigAreaPage extends LitElement { } private _renderScene(name: string, entityState: SceneEntity) { - return html`
+ return html` - ${!entityState.attributes.id - ? html` - - ${this.hass.localize("ui.panel.config.devices.cant_edit")} - - ` - : ""} -
`; + `; } private _renderAutomation(name: string, entityState: AutomationEntity) { - return html`
+ return html` - ${!entityState.attributes.id - ? html` - - ${this.hass.localize("ui.panel.config.devices.cant_edit")} - - ` - : ""} -
`; + `; } private _renderScript(name: string, entityState: ScriptEntity) { 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 eb7b13ea5b..dd0b868a13 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -33,6 +33,7 @@ import "../../../../components/ha-card"; import "../../../../components/ha-expansion-panel"; import "../../../../components/ha-icon-button"; import "../../../../components/ha-service-icon"; +import "../../../../components/ha-tooltip"; import type { HaYamlEditor } from "../../../../components/ha-yaml-editor"; import { ACTION_ICONS, YAML_ONLY_ACTION_TYPES } from "../../../../data/action"; import type { AutomationClipboard } from "../../../../data/automation"; @@ -231,14 +232,14 @@ export default class HaAutomationActionRow extends LitElement { ${type !== "condition" && (this.action as NonConditionAction).continue_on_error === true - ? html`
+ ? html` - - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.continue_on_error" - )} - -
` + ` : nothing} ha-svg-icon { --mdc-icon-size: 24px; } + ha-tooltip { + cursor: default; + } `, ]; } diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index 6f90b1df7d..d0f12f5fe4 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -1,6 +1,5 @@ import { consume } from "@lit-labs/context"; import { ResizeController } from "@lit-labs/observers/resize-controller"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiChevronRight, mdiCog, @@ -58,7 +57,6 @@ import "../../../components/ha-filter-entities"; import "../../../components/ha-filter-floor-areas"; import "../../../components/ha-filter-labels"; import "../../../components/ha-icon-button"; -import "../../../components/ha-icon-overflow-menu"; import "../../../components/ha-md-menu-item"; import type { HaMdMenuItem } from "../../../components/ha-md-menu-item"; import "../../../components/ha-menu"; diff --git a/src/panels/config/backup/ha-config-backup-backups.ts b/src/panels/config/backup/ha-config-backup-backups.ts index fe1920fb45..937bd82749 100644 --- a/src/panels/config/backup/ha-config-backup-backups.ts +++ b/src/panels/config/backup/ha-config-backup-backups.ts @@ -428,15 +428,9 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) { "ui.panel.config.backup.backups.delete_selected" )} .path=${mdiDelete} - id="delete-btn" class="warning" @click=${this._deleteSelected} > - - ${this.hass.localize( - "ui.panel.config.backup.backups.delete_selected" - )} - `}
diff --git a/src/panels/config/blueprint/ha-blueprint-overview.ts b/src/panels/config/blueprint/ha-blueprint-overview.ts index 89c81f2473..6b329ff8e6 100644 --- a/src/panels/config/blueprint/ha-blueprint-overview.ts +++ b/src/panels/config/blueprint/ha-blueprint-overview.ts @@ -1,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiAlertCircle, mdiDelete, diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index 84d72920e0..58e7273bca 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -1,5 +1,4 @@ import { consume } from "@lit-labs/context"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiCog, mdiDelete, @@ -30,6 +29,7 @@ import "../../../components/ha-icon-button"; import "../../../components/ha-icon-next"; import "../../../components/ha-svg-icon"; import "../../../components/ha-expansion-panel"; +import "../../../components/ha-tooltip"; import { getSignedPath } from "../../../data/auth"; import type { ConfigEntry, @@ -444,7 +444,13 @@ export class HaConfigDevicePage extends LitElement { ${this._related.automation.map((automation) => { const entityState = this.hass.states[automation]; return entityState - ? html`
+ ? html` - ${!entityState.attributes.id - ? html` - - ${this.hass.localize( - "ui.panel.config.devices.cant_edit" - )} - - ` - : ""} -
` - : ""; + ` + : nothing; })} ` @@ -536,7 +533,13 @@ export class HaConfigDevicePage extends LitElement { const entityState = this.hass.states[scene]; return entityState ? html` -
+ - ${!entityState.attributes.id - ? html` - - ${this.hass.localize( - "ui.panel.config.devices.cant_edit" - )} - - ` - : ""} -
+ ` - : ""; + : nothing; })} ` diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index 456385107b..daa06bc459 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -1,5 +1,4 @@ import { consume } from "@lit-labs/context"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiChevronRight, mdiDotsVertical, diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index b8f283f18c..51884252a6 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -1,5 +1,4 @@ import { consume } from "@lit-labs/context"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiAlertCircle, mdiCancel, @@ -66,6 +65,7 @@ import "../../../components/ha-icon-button"; import "../../../components/ha-md-menu-item"; import "../../../components/ha-sub-menu"; import "../../../components/ha-svg-icon"; +import "../../../components/ha-tooltip"; import type { ConfigEntry, SubEntry } from "../../../data/config_entries"; import { getConfigEntries, getSubEntries } from "../../../data/config_entries"; import { fullEntitiesContext } from "../../../data/context"; @@ -367,22 +367,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { tabindex="0" style="display:inline-block; position: relative;" > - - - ${entry.restored + + > + + ` : "—", diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts index 96a7ba6b8f..a3ffc316f0 100644 --- a/src/panels/config/helpers/dialog-helper-detail.ts +++ b/src/panels/config/helpers/dialog-helper-detail.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { CSSResultGroup, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; @@ -10,6 +9,7 @@ import { dynamicElement } from "../../../common/dom/dynamic-element-directive"; import "../../../components/ha-circular-progress"; import { createCloseHeading } from "../../../components/ha-dialog"; import "../../../components/ha-list-item"; +import "../../../components/ha-tooltip"; import { getConfigFlowHandlers } from "../../../data/config_flow"; import { createCounter } from "../../../data/counter"; import { createInputBoolean } from "../../../data/input_boolean"; @@ -210,39 +210,39 @@ export class DialogHelperDetail extends LitElement { const isLoaded = !(domain in HELPERS) || isComponentLoaded(this.hass, domain); return html` - - - ${label} - - - ${!isLoaded - ? html` - ${this.hass.localize( - "ui.dialogs.helper_settings.platform_not_loaded", - { platform: domain } - )} - ` - : ""} +
+ + + ${label} + + +
+ `; })} diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts index 8e906f69f1..878f5bc61c 100644 --- a/src/panels/config/helpers/ha-config-helpers.ts +++ b/src/panels/config/helpers/ha-config-helpers.ts @@ -1,6 +1,5 @@ import { consume } from "@lit-labs/context"; import { ResizeController } from "@lit-labs/observers/resize-controller"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiAlertCircle, mdiCancel, @@ -52,6 +51,7 @@ import "../../../components/ha-icon-overflow-menu"; import "../../../components/ha-md-divider"; import "../../../components/ha-state-icon"; import "../../../components/ha-svg-icon"; +import "../../../components/ha-tooltip"; import type { CategoryRegistryEntry } from "../../../data/category_registry"; import { createCategoryRegistryEntry, @@ -359,12 +359,14 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) { tabindex="0" style="display:inline-block; position: relative;" > - - - ${this.hass.localize( + + > + + ` : ""} diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts index c83baa5efe..7fc583ad28 100644 --- a/src/panels/config/integrations/ha-config-integration-page.ts +++ b/src/panels/config/integrations/ha-config-integration-page.ts @@ -1,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import "@material/mwc-list/mwc-list"; import { mdiAlertCircle, diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts index 0187a94690..c3125dcc02 100644 --- a/src/panels/config/integrations/ha-integration-card.ts +++ b/src/panels/config/integrations/ha-integration-card.ts @@ -1,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiFileCodeOutline, mdiPackageVariant, mdiWeb } from "@mdi/js"; import type { CSSResultGroup, TemplateResult } from "lit"; import { LitElement, css, html, nothing } from "lit"; @@ -10,6 +9,7 @@ import "../../../components/ha-button"; import "../../../components/ha-card"; import "../../../components/ha-ripple"; import "../../../components/ha-svg-icon"; +import "../../../components/ha-tooltip"; import type { ConfigEntry } from "../../../data/config_entries"; import { ERROR_STATES } from "../../../data/config_entries"; import type { DeviceRegistryEntry } from "../../../data/device_registry"; @@ -162,43 +162,40 @@ export class HaIntegrationCard extends LitElement { ? "overwrites" : "custom"}" > - - ${this.hass.localize( + + + ` : nothing} ${this.manifest && this.manifest.iot_class?.startsWith("cloud_") ? html`
- - ${this.hass.localize( + + +
` : nothing} ${this.manifest && !this.manifest?.config_flow ? html`
- - ${this.hass.localize( + +
` : nothing} @@ -367,9 +364,6 @@ export class HaIntegrationCard extends LitElement { height: 24px; display: block; } - simple-tooltip { - white-space: nowrap; - } .spacer { height: 36px; } diff --git a/src/panels/config/integrations/ha-integration-list-item.ts b/src/panels/config/integrations/ha-integration-list-item.ts index 175fb05fab..b7275412c9 100644 --- a/src/panels/config/integrations/ha-integration-list-item.ts +++ b/src/panels/config/integrations/ha-integration-list-item.ts @@ -12,6 +12,7 @@ import { brandsUrl } from "../../../util/brands-url"; import type { IntegrationListItem } from "./dialog-add-integration"; import "../../../components/ha-svg-icon"; import "../../../components/ha-icon-next"; +import "../../../components/ha-tooltip"; @customElement("ha-integration-list-item") export class HaIntegrationListItem extends ListItemBase { @@ -73,43 +74,45 @@ export class HaIntegrationListItem extends ListItemBase { } return html` ${this.integration.cloud - ? html`${this.hass.localize( - "ui.panel.config.integrations.config_entry.depends_on_cloud" - )}` - : ""} + >` + : nothing} ${!this.integration.is_built_in ? html`${this.hass.localize( + >` - : ""} + )} + >` + : nothing} ${!this.integration.config_flow && !this.integration.integrations && !this.integration.iot_standards - ? html`${this.hass.localize( - "ui.panel.config.integrations.config_entry.yaml_only" - )} + ` + > + ` : html``} `; } 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 ca9b353bb8..1fd53ab466 100644 --- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts +++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts @@ -1,5 +1,4 @@ import "@material/mwc-button/mwc-button"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { CSSResultGroup } from "lit"; @@ -9,6 +8,7 @@ import { fireEvent } from "../../../../../common/dom/fire_event"; import "../../../../../components/ha-circular-progress"; import { createCloseHeading } from "../../../../../components/ha-dialog"; import "../../../../../components/ha-svg-icon"; +import "../../../../../components/ha-tooltip"; import type { AttributeConfigurationStatus, Cluster, @@ -295,16 +295,15 @@ class DialogZHAReconfigureDevice extends LitElement { ` : html` - - ${attribute.status} - - + + `} 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 bcd16badd0..9416e60535 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 @@ -15,7 +15,6 @@ import { classMap } from "lit/directives/class-map"; import "../../../../../components/ha-card"; import "../../../../../components/ha-expansion-panel"; import "../../../../../components/ha-fab"; -import "../../../../../components/ha-help-tooltip"; import "../../../../../components/ha-icon-button"; import "../../../../../components/ha-icon-next"; import "../../../../../components/ha-svg-icon"; diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts index 30c469de0a..243216304c 100644 --- a/src/panels/config/logs/dialog-system-log-detail.ts +++ b/src/panels/config/logs/dialog-system-log-detail.ts @@ -1,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiClose, mdiContentCopy } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; 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 82e3b1ea89..033668a24e 100644 --- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts +++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts @@ -1,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiCheck, mdiCheckCircleOutline, @@ -24,6 +23,7 @@ import "../../../../components/ha-fab"; import "../../../../components/ha-icon"; import "../../../../components/ha-icon-button"; import "../../../../components/ha-svg-icon"; +import "../../../../components/ha-tooltip"; import type { LovelacePanelConfig } from "../../../../data/lovelace"; import type { LovelaceRawConfig } from "../../../../data/lovelace/config/types"; import { @@ -153,17 +153,19 @@ export class HaConfigLovelaceDashboards extends LitElement { ${dashboard.title} ${dashboard.default ? html` - - - ${this.hass.localize( + + placement="right" + > + + ` - : ""} + : nothing} `, }, }; diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index c83b82c00a..14ab765b5a 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -1,6 +1,5 @@ import { consume } from "@lit-labs/context"; import { ResizeController } from "@lit-labs/observers/resize-controller"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiChevronRight, mdiCog, @@ -57,6 +56,7 @@ import "../../../components/ha-md-menu-item"; import "../../../components/ha-state-icon"; import "../../../components/ha-sub-menu"; import "../../../components/ha-svg-icon"; +import "../../../components/ha-tooltip"; import { createAreaRegistryEntry } from "../../../data/area_registry"; import type { CategoryRegistryEntry } from "../../../data/category_registry"; import { @@ -314,17 +314,19 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) { template: (scene) => !scene.attributes.id ? html` - - ${this.hass.localize( + - + > + + ` - : "", + : nothing, }, actions: { title: "", diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts index a93e481d2d..c647ec809a 100644 --- a/src/panels/config/users/ha-config-users.ts +++ b/src/panels/config/users/ha-config-users.ts @@ -12,7 +12,6 @@ import type { } from "../../../components/data-table/ha-data-table"; import "../../../components/data-table/ha-data-table-icon"; import "../../../components/ha-fab"; -import "../../../components/ha-help-tooltip"; import "../../../components/ha-svg-icon"; import type { User } from "../../../data/user"; import { 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 4bb6f61ec5..4eb905b9ea 100644 --- a/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts +++ b/src/panels/config/voice-assistants/expose/expose-assistant-icon.ts @@ -1,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiAlertCircle } from "@mdi/js"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; @@ -7,6 +6,7 @@ import { voiceAssistants } from "../../../../data/expose"; import type { HomeAssistant } from "../../../../types"; import { brandsUrl } from "../../../../util/brands-url"; import "../../../../components/ha-svg-icon"; +import "../../../../components/ha-tooltip"; @customElement("voice-assistants-expose-assistant-icon") export class VoiceAssistantExposeAssistantIcon extends LitElement { @@ -25,53 +25,49 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement { if (!this.assistant || !voiceAssistants[this.assistant]) return nothing; return html` -
- - ${this.unsupported - ? html` - - ` - : nothing} - ${this.manual || this.unsupported - ? html` - - ${this.unsupported - ? this.hass.localize( - "ui.panel.config.voice_assistants.expose.not_supported" - ) - : ""} - ${this.unsupported && this.manual ? html`
` : nothing} - ${this.manual - ? this.hass.localize( - "ui.panel.config.voice_assistants.expose.manually_configured" - ) - : nothing} - - ` - : ""} -
+ +
+ + ${this.unsupported + ? html` + + ` + : nothing} +
+ + ${this.unsupported + ? this.hass.localize( + "ui.panel.config.voice_assistants.expose.not_supported" + ) + : ""} + ${this.unsupported && this.manual ? html`
` : nothing} + ${this.manual + ? this.hass.localize( + "ui.panel.config.voice_assistants.expose.manually_configured" + ) + : nothing} + + `; } diff --git a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts index 2f4a740366..79e853718d 100644 --- a/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts +++ b/src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts @@ -1,5 +1,4 @@ import { consume } from "@lit-labs/context"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiCloseBoxMultiple, mdiCloseCircleOutline, @@ -28,6 +27,7 @@ import type { SortingChangedEvent, } from "../../../components/data-table/ha-data-table"; import "../../../components/ha-fab"; +import "../../../components/ha-tooltip"; import type { AlexaEntity } from "../../../data/alexa"; import { fetchCloudAlexaEntities } from "../../../data/alexa"; import type { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud"; @@ -599,32 +599,34 @@ export class VoiceAssistantsExpose extends LitElement { > ` : html` - - - ${this.hass.localize( - "ui.panel.config.voice_assistants.expose.expose" - )} - - + + + - - ${this.hass.localize( - "ui.panel.config.voice_assistants.expose.unexpose" - )} - + placement="left" + > + + `} ` diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index 14c95f4231..626bccfc2f 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -1,4 +1,3 @@ -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"; @@ -15,6 +14,7 @@ import "../../../components/ha-fab"; import "../../../components/ha-icon-button"; import "../../../components/ha-list-item"; import "../../../components/ha-svg-icon"; +import "../../../components/ha-tooltip"; import "../../../components/map/ha-locations-editor"; import type { HaLocationsEditor, @@ -199,7 +199,15 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { stateObject.entity_id === "zone.home" && !this._canEditCore ? nothing - : html`
+ : html` - ${stateObject.entity_id !== "zone.home" - ? html` - - ${hass.localize( - "ui.panel.config.zone.configured_in_yaml" - )} - - ` - : ""} -
`} + `} ` )} @@ -588,6 +584,9 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { ha-card { margin-bottom: 100px; } + ha-tooltip { + display: block; + } `; } 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 626418032f..52bf1cad74 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,5 +1,4 @@ import { mdiInformation } from "@mdi/js"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -9,6 +8,7 @@ import { round } from "../../../../common/number/round"; import "../../../../components/ha-card"; import "../../../../components/ha-gauge"; import "../../../../components/ha-svg-icon"; +import "../../../../components/ha-tooltip"; import type { EnergyData } from "../../../../data/energy"; import { energySourcesByType, @@ -134,14 +134,6 @@ class HuiEnergyCarbonGaugeCard ${value !== undefined ? html` - - - - ${this.hass.localize( - "ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used" - )} - - + + +
${this.hass.localize( "ui.panel.lovelace.cards.energy.carbon_consumed_gauge.low_carbon_energy_consumed" @@ -213,14 +213,9 @@ class HuiEnergyCarbonGaugeCard 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-tooltip::part(base__popup) { + margin-top: 4px; } `; } 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 761a1a2dc9..646b90f638 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,5 +1,4 @@ import { mdiInformation } from "@mdi/js"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -9,6 +8,7 @@ import "../../../../components/ha-card"; import "../../../../components/ha-gauge"; import type { LevelDefinition } from "../../../../components/ha-gauge"; import "../../../../components/ha-svg-icon"; +import "../../../../components/ha-tooltip"; import type { EnergyData, GridSourceTypeEnergyPreference, @@ -31,7 +31,7 @@ class HuiEnergyGridGaugeCard extends SubscribeMixin(LitElement) implements LovelaceCard { - @property({ attribute: false }) public hass?: HomeAssistant; + @property({ attribute: false }) public hass!: HomeAssistant; @state() private _config?: EnergyGridNeutralityGaugeCardConfig; @@ -111,19 +111,6 @@ class HuiEnergyGridGaugeCard ${value !== undefined ? html` - - - - ${this.hass.localize( - "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency" - )} -

- ${this.hass.localize( - "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain" - )} - - - + + + ${this.hass.localize( + "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency" + )} +

+ ${this.hass.localize( + "ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain" + )} + + +
${returnedToGrid! >= consumedFromGrid! ? this.hass.localize( @@ -190,14 +189,9 @@ class HuiEnergyGridGaugeCard 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-tooltip::part(base__popup) { + margin-top: 4px; } `; } 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 cfc6c2d84b..a5f9cc84ce 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,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import { mdiInformation } from "@mdi/js"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; @@ -8,6 +7,7 @@ import { styleMap } from "lit/directives/style-map"; import "../../../../components/ha-card"; import "../../../../components/ha-gauge"; import "../../../../components/ha-svg-icon"; +import "../../../../components/ha-tooltip"; import type { EnergyData } from "../../../../data/energy"; import { energySourcesByType, @@ -176,14 +176,6 @@ class HuiEnergySelfSufficiencyGaugeCard ${value !== undefined ? html` - - - - ${this.hass.localize( - "ui.panel.lovelace.cards.energy.self_sufficiency_gauge.card_indicates_self_sufficiency_quota" - )} - - + + +
${this.hass.localize( "ui.panel.lovelace.cards.energy.self_sufficiency_gauge.self_sufficiency_quota" @@ -253,14 +253,9 @@ class HuiEnergySelfSufficiencyGaugeCard 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-tooltip::part(base__popup) { + margin-top: 4px; } `; } 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 64db0b50c0..c91801255b 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,5 +1,4 @@ import { mdiInformation } from "@mdi/js"; -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { css, html, LitElement, nothing } from "lit"; @@ -107,18 +106,6 @@ class HuiEnergySolarGaugeCard ${value !== undefined ? html` - - - - ${this.hass.localize( - "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used" - )} -

- ${this.hass.localize( - "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat" - )} - - + + + ${this.hass.localize( + "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used" + )} +

+ ${this.hass.localize( + "ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat" + )} + + +
${this.hass.localize( "ui.panel.lovelace.cards.energy.solar_consumed_gauge.self_consumed_solar_energy" @@ -192,14 +191,9 @@ class HuiEnergySolarGaugeCard 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-tooltip::part(base__popup) { + margin-top: 4px; } `; } diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts index eb13da303f..eba7a50837 100644 --- a/src/panels/profile/ha-refresh-tokens-card.ts +++ b/src/panels/profile/ha-refresh-tokens-card.ts @@ -1,4 +1,3 @@ -import "@lrnwebcomponents/simple-tooltip/simple-tooltip"; import type { ActionDetail } from "@material/mwc-list"; import { mdiAndroid, diff --git a/tsconfig.json b/tsconfig.json index 7c24087739..cc74354d22 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -44,10 +44,7 @@ // CSS "no-invalid-css": "off" // warning does not work }, - "globalTags": ["google-cast-launcher"], - "customHtmlData": [ - "./node_modules/@lrnwebcomponents/simple-tooltip/custom-elements.json" - ] + "globalTags": ["google-cast-launcher"] } ], "paths": { diff --git a/yarn.lock b/yarn.lock index 67fa995bab..57f7e21f66 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2310,15 +2310,6 @@ __metadata: languageName: node linkType: hard -"@lrnwebcomponents/simple-tooltip@npm:8.0.2": - version: 8.0.2 - resolution: "@lrnwebcomponents/simple-tooltip@npm:8.0.2" - dependencies: - lit: "npm:^3.1.2" - checksum: 10/cc432c516ed176f1b99a04071f500bea2c1620a2b505e60867f3464e2a9cf54b78b4c84ac3ed85ac34e3579d8671112953d085bb37c2ff7202a1639e6ae0db4e - languageName: node - linkType: hard - "@marijn/find-cluster-break@npm:^1.0.0": version: 1.0.2 resolution: "@marijn/find-cluster-break@npm:1.0.2" @@ -9432,7 +9423,6 @@ __metadata: "@lit-labs/observers": "npm:2.0.5" "@lit-labs/virtualizer": "npm:2.1.0" "@lokalise/node-api": "npm:13.2.1" - "@lrnwebcomponents/simple-tooltip": "npm:8.0.2" "@material/chips": "npm:=14.0.0-canary.53b3cad2f.0" "@material/data-table": "npm:=14.0.0-canary.53b3cad2f.0" "@material/mwc-base": "npm:0.27.0"