Drop polymer from authorize and onboarding entrypoint (#15760)

* Drop polymer from authorize and onboarding entrypoint

* Update ha-icon.ts

* dedupe
This commit is contained in:
Bram Kragten 2023-03-29 12:17:42 +02:00 committed by GitHub
parent 4d52913a01
commit 0f5320c6fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 407 additions and 173 deletions

View File

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

View File

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

View File

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

View File

@ -48,6 +48,7 @@
"@lit-labs/context": "0.2.0",
"@lit-labs/motion": "1.0.3",
"@lit-labs/virtualizer": "1.0.1",
"@lrnwebcomponents/simple-tooltip": "4.1.0",
"@material/chips": "=14.0.0-canary.53b3cad2f.0",
"@material/data-table": "=14.0.0-canary.53b3cad2f.0",
"@material/mwc-button": "0.27.0",
@ -77,17 +78,14 @@
"@mdi/svg": "7.2.96",
"@polymer/app-layout": "3.1.0",
"@polymer/iron-flex-layout": "3.0.1",
"@polymer/iron-icon": "3.0.1",
"@polymer/iron-input": "3.0.1",
"@polymer/iron-resizable-behavior": "3.0.1",
"@polymer/paper-input": "3.2.1",
"@polymer/paper-item": "3.0.1",
"@polymer/paper-listbox": "3.0.1",
"@polymer/paper-slider": "3.0.1",
"@polymer/paper-styles": "3.0.1",
"@polymer/paper-tabs": "3.1.0",
"@polymer/paper-toast": "3.0.1",
"@polymer/paper-tooltip": "3.0.1",
"@polymer/polymer": "3.5.1",
"@thomasloven/round-slider": "0.6.0",
"@vaadin/combo-box": "23.3.9",

View File

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

View File

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

View File

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

View File

@ -1,4 +1,4 @@
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
@ -76,11 +76,11 @@ export class HaAnalytics extends LitElement {
</ha-switch>
${!baseEnabled
? html`
<paper-tooltip animation-delay="0" position="right">
<simple-tooltip animation-delay="0" position="right">
${this.hass.localize(
`ui.panel.${this.translationKeyPanel}.analytics.need_base_enabled`
)}
</paper-tooltip>
</simple-tooltip>
`
: ""}
</span>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,5 +1,5 @@
import "@material/mwc-button";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { formatDateTime } from "../../common/datetime/format_date_time";
@ -33,9 +33,9 @@ export class HuiPersistentNotificationItem extends LitElement {
.datetime=${this.notification.created_at}
capitalize
></ha-relative-time>
<paper-tooltip animation-delay="0">
<simple-tooltip animation-delay="0">
${this._computeTooltip(this.hass, this.notification)}
</paper-tooltip>
</simple-tooltip>
</span>
</div>

View File

@ -1,5 +1,5 @@
import "@material/mwc-button/mwc-button";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";

View File

@ -553,9 +553,9 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
</a>
${!entityState.attributes.id
? html`
<paper-tooltip animation-delay="0">
<simple-tooltip animation-delay="0">
${this.hass.localize("ui.panel.config.devices.cant_edit")}
</paper-tooltip>
</simple-tooltip>
`
: ""}
</div>`;
@ -577,9 +577,9 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
</a>
${!entityState.attributes.id
? html`
<paper-tooltip animation-delay="0">
<simple-tooltip animation-delay="0">
${this.hass.localize("ui.panel.config.devices.cant_edit")}
</paper-tooltip>
</simple-tooltip>
`
: ""}
</div>`;

View File

@ -10,7 +10,7 @@ import {
mdiStopCircleOutline,
mdiTransitConnection,
} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -159,11 +159,11 @@ class HaAutomationPicker extends LitElement {
template: (disabled: boolean) =>
disabled
? html`
<paper-tooltip animation-delay="0" position="left">
<simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.automation.picker.disabled"
)}
</paper-tooltip>
</simple-tooltip>
<ha-svg-icon
.path=${mdiCancel}
style="color: var(--secondary-text-color)"

View File

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

View File

@ -5,7 +5,7 @@ import {
mdiRobot,
mdiShareVariant,
} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
CSSResultGroup,
html,

View File

@ -8,7 +8,7 @@ import {
mdiPencil,
mdiPlusCircle,
} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
@ -403,11 +403,11 @@ export class HaConfigDevicePage extends LitElement {
</a>
${!entityState.attributes.id
? html`
<paper-tooltip animation-delay="0">
<simple-tooltip animation-delay="0">
${this.hass.localize(
"ui.panel.config.devices.cant_edit"
)}
</paper-tooltip>
</simple-tooltip>
`
: ""}
</div> `
@ -497,11 +497,11 @@ export class HaConfigDevicePage extends LitElement {
</a>
${!entityState.attributes.id
? html`
<paper-tooltip animation-delay="0">
<simple-tooltip animation-delay="0">
${this.hass.localize(
"ui.panel.config.devices.cant_edit"
)}
</paper-tooltip>
</simple-tooltip>
`
: ""}
</div>

View File

@ -1,6 +1,6 @@
import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
import { mdiCancel, mdiFilterVariant, mdiPlus } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -370,9 +370,9 @@ export class HaConfigDeviceDashboard extends LitElement {
style="display:inline-block; position: relative;"
>
<ha-svg-icon .path=${mdiCancel}></ha-svg-icon>
<paper-tooltip animation-delay="0" position="left">
<simple-tooltip animation-delay="0" position="left">
${this.hass.localize("ui.panel.config.devices.disabled")}
</paper-tooltip>
</simple-tooltip>
</div>`
: "—",
};

View File

@ -10,7 +10,7 @@ import {
mdiRestoreAlert,
mdiUndo,
} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
@ -276,7 +276,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
? mdiEyeOff
: mdiPencilOff}
></ha-svg-icon>
<paper-tooltip animation-delay="0" position="left">
<simple-tooltip animation-delay="0" position="left">
${entity.restored
? this.hass.localize(
"ui.panel.config.entities.picker.status.restored"
@ -296,7 +296,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
: this.hass.localize(
"ui.panel.config.entities.picker.status.readonly"
)}
</paper-tooltip>
</simple-tooltip>
</div>
`
: "—",
@ -576,33 +576,33 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
.path=${mdiUndo}
.label=${this.hass.localize("ui.common.enable")}
></ha-icon-button>
<paper-tooltip animation-delay="0" for="enable-btn">
<simple-tooltip animation-delay="0" for="enable-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.button"
)}
</paper-tooltip>
</simple-tooltip>
<ha-icon-button
id="disable-btn"
@click=${this._disableSelected}
.path=${mdiCancel}
.label=${this.hass.localize("ui.common.disable")}
></ha-icon-button>
<paper-tooltip animation-delay="0" for="disable-btn">
<simple-tooltip animation-delay="0" for="disable-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.button"
)}
</paper-tooltip>
</simple-tooltip>
<ha-icon-button
id="hide-btn"
@click=${this._hideSelected}
.path=${mdiEyeOff}
.label=${this.hass.localize("ui.common.hide")}
></ha-icon-button>
<paper-tooltip animation-delay="0" for="hide-btn">
<simple-tooltip animation-delay="0" for="hide-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.hide_selected.button"
)}
</paper-tooltip>
</simple-tooltip>
<ha-icon-button
class="warning"
id="remove-btn"
@ -610,11 +610,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
.path=${mdiDelete}
.label=${this.hass.localize("ui.common.remove")}
></ha-icon-button>
<paper-tooltip animation-delay="0" for="remove-btn">
<simple-tooltip animation-delay="0" for="remove-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button"
)}
</paper-tooltip>
</simple-tooltip>
`}
</div>
</div>

View File

@ -1,7 +1,6 @@
import "@material/mwc-button/mwc-button";
import { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item-base";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
css,
CSSResultGroup,
@ -199,12 +198,12 @@ export class DialogHelperDetail extends LitElement {
</ha-list-item>
${!isLoaded
? html`
<paper-tooltip animation-delay="0"
<simple-tooltip animation-delay="0"
>${this.hass.localize(
"ui.dialogs.helper_settings.platform_not_loaded",
"platform",
domain
)}</paper-tooltip
)}</simple-tooltip
>
`
: ""}

View File

@ -1,5 +1,5 @@
import { mdiPencilOff, mdiPlus } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -139,11 +139,11 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
style="display:inline-block; position: relative;"
>
<ha-svg-icon .path=${mdiPencilOff}></ha-svg-icon>
<paper-tooltip animation-delay="0" position="left">
<simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.entities.picker.status.readonly"
)}
</paper-tooltip>
</simple-tooltip>
</div>
`
: ""}

View File

@ -22,7 +22,7 @@ import {
} from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
@ -192,11 +192,11 @@ export class HaIntegrationCard extends LitElement {
class="info"
.path=${mdiProgressHelper}
></ha-svg-icon
><paper-tooltip animation-delay="0" position="left">
><simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
`ui.panel.config.integrations.config_entry.state.setup_in_progress`
)}
</paper-tooltip>
</simple-tooltip>
</span>`
: ""}
${ERROR_STATES.includes(item.state)
@ -207,11 +207,11 @@ export class HaIntegrationCard extends LitElement {
? mdiReloadAlert
: mdiAlertCircle}
></ha-svg-icon
><paper-tooltip animation-delay="0" position="left">
><simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
`ui.panel.config.integrations.config_entry.state.${item.state}`
)}
</paper-tooltip>
</simple-tooltip>
</span>`
: ""}
<ha-icon-next></ha-icon-next>

View File

@ -1,5 +1,5 @@
import { mdiBugPlay, mdiCloud, mdiPackageVariant, mdiSyncOff } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-svg-icon";
@ -115,8 +115,8 @@ export class HaIntegrationHeader extends LitElement {
([icon, description]) => html`
<span>
<ha-svg-icon .path=${icon}></ha-svg-icon>
<paper-tooltip animation-delay="0"
>${description}</paper-tooltip
<simple-tooltip animation-delay="0"
>${description}</simple-tooltip
>
</span>
`
@ -203,7 +203,7 @@ export class HaIntegrationHeader extends LitElement {
height: 20px;
margin: 4px;
}
paper-tooltip {
simple-tooltip {
white-space: nowrap;
}
`;

View File

@ -72,20 +72,20 @@ export class HaIntegrationListItem extends ListItemBase {
${this.integration.cloud
? html`<span
><ha-svg-icon .path=${mdiCloudOutline}></ha-svg-icon
><paper-tooltip animation-delay="0" position="left"
><simple-tooltip animation-delay="0" position="left"
>${this.hass.localize(
"ui.panel.config.integrations.config_entry.depends_on_cloud"
)}</paper-tooltip
)}</simple-tooltip
></span
>`
: ""}
${!this.integration.is_built_in
? html`<span
><ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon
><paper-tooltip animation-delay="0" position="left"
><simple-tooltip animation-delay="0" position="left"
>${this.hass.localize(
"ui.panel.config.integrations.config_entry.provided_by_custom_integration"
)}</paper-tooltip
)}</simple-tooltip
></span
>`
: ""}
@ -93,10 +93,10 @@ export class HaIntegrationListItem extends ListItemBase {
!this.integration.integrations &&
!this.integration.iot_standards
? html`<span
><paper-tooltip animation-delay="0" position="left"
><simple-tooltip animation-delay="0" position="left"
>${this.hass.localize(
"ui.panel.config.integrations.config_entry.yaml_only"
)}</paper-tooltip
)}</simple-tooltip
><ha-svg-icon
.path=${mdiOpenInNew}
class="open-in-new"

View File

@ -1,5 +1,5 @@
import { mdiClose, mdiContentCopy } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";

View File

@ -5,7 +5,7 @@ import {
mdiOpenInNew,
mdiPlus,
} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { html, LitElement, nothing, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
@ -91,11 +91,11 @@ export class HaConfigLovelaceDashboards extends LitElement {
style="padding-left: 10px; padding-inline-start: 10px; direction: var(--direction);"
.path=${mdiCheckCircleOutline}
></ha-svg-icon>
<paper-tooltip animation-delay="0">
<simple-tooltip animation-delay="0">
${this.hass.localize(
`ui.panel.config.lovelace.dashboards.default_dashboard`
)}
</paper-tooltip>
</simple-tooltip>
`
: ""}
`;

View File

@ -7,7 +7,7 @@ import {
mdiPlay,
mdiPlus,
} from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -131,11 +131,11 @@ class HaSceneDashboard extends LitElement {
template: (_info, scene: any) =>
!scene.attributes.id
? html`
<paper-tooltip animation-delay="0" position="left">
<simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.scene.picker.only_editable"
)}
</paper-tooltip>
</simple-tooltip>
<ha-svg-icon
.path=${mdiPencilOff}
style="color: var(--secondary-text-color)"

View File

@ -1,5 +1,5 @@
import "@material/mwc-button";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -169,11 +169,11 @@ class DialogUserDetail extends LitElement {
</mwc-button>
${user.system_generated
? html`
<paper-tooltip animation-delay="0" position="right">
<simple-tooltip animation-delay="0" position="right">
${this.hass.localize(
"ui.panel.config.users.editor.system_generated_users_not_removable"
)}
</paper-tooltip>
</simple-tooltip>
`
: ""}
${!user.system_generated && this.hass.user?.is_owner
@ -196,11 +196,11 @@ class DialogUserDetail extends LitElement {
</mwc-button>
${user.system_generated
? html`
<paper-tooltip animation-delay="0" position="left">
<simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.users.editor.system_generated_users_not_editable"
)}
</paper-tooltip>
</simple-tooltip>
`
: ""}
</div>

View File

@ -2,7 +2,7 @@ import { mdiCog, mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
@ -200,11 +200,11 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
></ha-icon-button>
${stateObject.entity_id !== "zone.home"
? html`
<paper-tooltip animation-delay="0" position="left">
<simple-tooltip animation-delay="0" position="left">
${hass.localize(
"ui.panel.config.zone.configured_in_yaml"
)}
</paper-tooltip>
</simple-tooltip>
`
: ""}
</div>

View File

@ -1,5 +1,5 @@
import { mdiInformation } from "@mdi/js";
import "@polymer/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -118,13 +118,13 @@ class HuiEnergyCarbonGaugeCard
${value !== undefined
? html`
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
<simple-tooltip animation-delay="0" for="info" position="left">
<span>
${this.hass.localize(
"ui.panel.lovelace.cards.energy.carbon_consumed_gauge.card_indicates_energy_used"
)}
</span>
</paper-tooltip>
</simple-tooltip>
<ha-gauge
min="0"
max="100"
@ -194,11 +194,11 @@ class HuiEnergyCarbonGaugeCard
top: 4px;
color: var(--secondary-text-color);
}
paper-tooltip > span {
simple-tooltip > span {
font-size: 12px;
line-height: 12px;
}
paper-tooltip {
simple-tooltip {
width: 80%;
max-width: 250px;
top: 8px !important;

View File

@ -1,5 +1,5 @@
import { mdiInformation } from "@mdi/js";
import "@polymer/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -102,7 +102,7 @@ class HuiEnergyGridGaugeCard
${value !== undefined
? html`
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
<simple-tooltip animation-delay="0" for="info" position="left">
<span>
${this.hass.localize(
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.energy_dependency"
@ -112,7 +112,7 @@ class HuiEnergyGridGaugeCard
"ui.panel.lovelace.cards.energy.grid_neutrality_gauge.color_explain"
)}
</span>
</paper-tooltip>
</simple-tooltip>
<ha-gauge
min="-1"
@ -179,11 +179,11 @@ class HuiEnergyGridGaugeCard
top: 4px;
color: var(--secondary-text-color);
}
paper-tooltip > span {
simple-tooltip > span {
font-size: 12px;
line-height: 12px;
}
paper-tooltip {
simple-tooltip {
width: 80%;
max-width: 250px;
top: 8px !important;

View File

@ -1,5 +1,5 @@
import { mdiInformation } from "@mdi/js";
import "@polymer/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
@ -93,7 +93,7 @@ class HuiEnergySolarGaugeCard
${value !== undefined
? html`
<ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
<paper-tooltip animation-delay="0" for="info" position="left">
<simple-tooltip animation-delay="0" for="info" position="left">
<span>
${this.hass.localize(
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used"
@ -103,7 +103,7 @@ class HuiEnergySolarGaugeCard
"ui.panel.lovelace.cards.energy.solar_consumed_gauge.card_indicates_solar_energy_used_charge_home_bat"
)}
</span>
</paper-tooltip>
</simple-tooltip>
<ha-gauge
min="0"
max="100"
@ -175,11 +175,11 @@ class HuiEnergySolarGaugeCard
top: 4px;
color: var(--secondary-text-color);
}
paper-tooltip > span {
simple-tooltip > span {
font-size: 12px;
line-height: 12px;
}
paper-tooltip {
simple-tooltip {
width: 80%;
max-width: 250px;
top: 8px !important;

View File

@ -1,6 +1,4 @@
import "@material/mwc-button";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
@ -19,11 +17,9 @@ class HaMfaModulesCard extends LitElement {
return html`
<ha-card .header=${this.hass.localize("ui.panel.profile.mfa.header")}>
${this.mfaModules.map(
(module) => html`<paper-item>
<paper-item-body two-line="">
<div>${module.name}</div>
<div secondary>${module.id}</div>
</paper-item-body>
(module) => html`<ha-settings-row two-line>
<span slot="heading">${module.name}</span>
<span slot="description">${module.id}</span>
${module.enabled
? html`<mwc-button .module=${module} @click=${this._disable}
>${this.hass.localize(
@ -35,7 +31,7 @@ class HaMfaModulesCard extends LitElement {
"ui.panel.profile.mfa.enable"
)}</mwc-button
>`}
</paper-item>`
</ha-settings-row>`
)}
</ha-card>
`;
@ -46,6 +42,9 @@ class HaMfaModulesCard extends LitElement {
mwc-button {
margin-right: -0.57em;
}
ha-list-item {
--mdc-list-item-meta-size: auto;
}
`;
}

View File

@ -1,5 +1,5 @@
import { mdiDelete } from "@mdi/js";
import "@polymer/paper-tooltip/paper-tooltip";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one";
@ -86,11 +86,11 @@ class HaRefreshTokens extends LitElement {
</div>
<div>
${token.is_current
? html`<paper-tooltip animation-delay="0" position="left">
? html`<simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.profile.refresh_tokens.current_token_tooltip"
)}
</paper-tooltip>`
</simple-tooltip>`
: ""}
<ha-icon-button
.token=${token}
@ -141,6 +141,8 @@ class HaRefreshTokens extends LitElement {
css`
ha-settings-row {
padding: 0;
--settings-row-prefix-display: contents;
--settings-row-content-display: contents;
}
ha-icon-button {
color: var(--primary-text-color);

View File

@ -1,4 +1,3 @@
import "@polymer/paper-styles/paper-styles";
import "@polymer/polymer/lib/elements/custom-style";
import { derivedStyles } from "./styles";
@ -201,6 +200,214 @@ documentContainer.innerHTML = `<custom-style>
--material-caption-font-size: 0.75rem;
--material-button-font-size: 0.875rem;
/* Paper shadow */
--shadow-transition: {
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
};
--shadow-none: {
box-shadow: none;
};
/* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
--shadow-elevation-2dp: {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
};
--shadow-elevation-3dp: {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
0 1px 8px 0 rgba(0, 0, 0, 0.12),
0 3px 3px -2px rgba(0, 0, 0, 0.4);
};
--shadow-elevation-4dp: {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.4);
};
--shadow-elevation-6dp: {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
0 1px 18px 0 rgba(0, 0, 0, 0.12),
0 3px 5px -1px rgba(0, 0, 0, 0.4);
};
--shadow-elevation-8dp: {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.4);
};
--shadow-elevation-12dp: {
box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
0 4px 22px 3px rgba(0, 0, 0, 0.12),
0 6px 7px -4px rgba(0, 0, 0, 0.4);
};
--shadow-elevation-16dp: {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
0 6px 30px 5px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.4);
};
--shadow-elevation-24dp: {
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
0 9px 46px 8px rgba(0, 0, 0, 0.12),
0 11px 15px -7px rgba(0, 0, 0, 0.4);
};
/* Paper typography Styles */
--paper-font-common-base: {
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
};
--paper-font-common-code: {
font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
-webkit-font-smoothing: antialiased;
};
--paper-font-common-expensive-kerning: {
text-rendering: optimizeLegibility;
};
--paper-font-common-nowrap: {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
};
/* Material Font Styles */
--paper-font-display4: {
@apply --paper-font-common-base;
@apply --paper-font-common-nowrap;
font-size: 112px;
font-weight: 300;
letter-spacing: -.044em;
line-height: 120px;
};
--paper-font-display3: {
@apply --paper-font-common-base;
@apply --paper-font-common-nowrap;
font-size: 56px;
font-weight: 400;
letter-spacing: -.026em;
line-height: 60px;
};
--paper-font-display2: {
@apply --paper-font-common-base;
font-size: 45px;
font-weight: 400;
letter-spacing: -.018em;
line-height: 48px;
};
--paper-font-display1: {
@apply --paper-font-common-base;
font-size: 34px;
font-weight: 400;
letter-spacing: -.01em;
line-height: 40px;
};
--paper-font-headline: {
@apply --paper-font-common-base;
font-size: 24px;
font-weight: 400;
letter-spacing: -.012em;
line-height: 32px;
};
--paper-font-title: {
@apply --paper-font-common-base;
@apply --paper-font-common-nowrap;
font-size: 20px;
font-weight: 500;
line-height: 28px;
};
--paper-font-subhead: {
@apply --paper-font-common-base;
font-size: 16px;
font-weight: 400;
line-height: 24px;
};
--paper-font-body2: {
@apply --paper-font-common-base;
font-size: 14px;
font-weight: 500;
line-height: 24px;
};
--paper-font-body1: {
@apply --paper-font-common-base;
font-size: 14px;
font-weight: 400;
line-height: 20px;
};
--paper-font-caption: {
@apply --paper-font-common-base;
@apply --paper-font-common-nowrap;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.011em;
line-height: 20px;
};
--paper-font-menu: {
@apply --paper-font-common-base;
@apply --paper-font-common-nowrap;
font-size: 13px;
font-weight: 500;
line-height: 24px;
};
--paper-font-button: {
@apply --paper-font-common-base;
@apply --paper-font-common-nowrap;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.018em;
line-height: 24px;
text-transform: uppercase;
};
--paper-font-code2: {
@apply --paper-font-common-code;
font-size: 14px;
font-weight: 700;
line-height: 20px;
};
--paper-font-code1: {
@apply --paper-font-common-code;
font-size: 14px;
font-weight: 500;
line-height: 20px;
};
${Object.entries(derivedStyles)
.map(([key, value]) => `--${key}: ${value};`)
.join("")}

View File

@ -2001,6 +2001,15 @@ __metadata:
languageName: node
linkType: hard
"@lrnwebcomponents/simple-tooltip@npm:4.1.0":
version: 4.1.0
resolution: "@lrnwebcomponents/simple-tooltip@npm:4.1.0"
dependencies:
lit: ^2.2.8
checksum: 30af8e317fae1c04912ade8613b26bb6323164ddb5d6a01413a2e1555a637d34f88e6a079af16e912ed5f9b3990b9b7d98147a63fc1bdc5dde336fab8c32cbdc
languageName: node
linkType: hard
"@material/animation@npm:14.0.0-canary.53b3cad2f.0":
version: 14.0.0-canary.53b3cad2f.0
resolution: "@material/animation@npm:14.0.0-canary.53b3cad2f.0"
@ -3397,7 +3406,7 @@ __metadata:
languageName: node
linkType: hard
"@polymer/iron-icon@npm:3.0.1, @polymer/iron-icon@npm:^3.0.0, @polymer/iron-icon@npm:^3.0.0-pre.26":
"@polymer/iron-icon@npm:^3.0.0, @polymer/iron-icon@npm:^3.0.0-pre.26":
version: 3.0.1
resolution: "@polymer/iron-icon@npm:3.0.1"
dependencies:
@ -3619,7 +3628,7 @@ __metadata:
languageName: node
linkType: hard
"@polymer/paper-styles@npm:3.0.1, @polymer/paper-styles@npm:^3.0.0-pre.26":
"@polymer/paper-styles@npm:^3.0.0-pre.26":
version: 3.0.1
resolution: "@polymer/paper-styles@npm:3.0.1"
dependencies:
@ -3660,16 +3669,6 @@ __metadata:
languageName: node
linkType: hard
"@polymer/paper-tooltip@npm:3.0.1":
version: 3.0.1
resolution: "@polymer/paper-tooltip@npm:3.0.1"
dependencies:
"@polymer/paper-styles": ^3.0.0-pre.26
"@polymer/polymer": ^3.0.0
checksum: 74a4328527a80a42fde9fb35def7b711251b2b40fa25a0c3609ea393bd2901f987cf5c7c1119a5e7ca35d52fdd8a02d9bb857e37b6c07399c6a10a324ba1088e
languageName: node
linkType: hard
"@polymer/polymer@npm:3.5.1":
version: 3.5.1
resolution: "@polymer/polymer@npm:3.5.1"
@ -9429,6 +9428,7 @@ __metadata:
"@lit-labs/context": 0.2.0
"@lit-labs/motion": 1.0.3
"@lit-labs/virtualizer": 1.0.1
"@lrnwebcomponents/simple-tooltip": 4.1.0
"@material/chips": =14.0.0-canary.53b3cad2f.0
"@material/data-table": =14.0.0-canary.53b3cad2f.0
"@material/mwc-button": 0.27.0
@ -9461,17 +9461,14 @@ __metadata:
"@open-wc/dev-server-hmr": 0.1.4
"@polymer/app-layout": 3.1.0
"@polymer/iron-flex-layout": 3.0.1
"@polymer/iron-icon": 3.0.1
"@polymer/iron-input": 3.0.1
"@polymer/iron-resizable-behavior": 3.0.1
"@polymer/paper-input": 3.2.1
"@polymer/paper-item": 3.0.1
"@polymer/paper-listbox": 3.0.1
"@polymer/paper-slider": 3.0.1
"@polymer/paper-styles": 3.0.1
"@polymer/paper-tabs": 3.1.0
"@polymer/paper-toast": 3.0.1
"@polymer/paper-tooltip": 3.0.1
"@polymer/polymer": 3.5.1
"@rollup/plugin-babel": 6.0.3
"@rollup/plugin-commonjs": 24.0.1
@ -11241,7 +11238,7 @@ __metadata:
languageName: node
linkType: hard
"lit@npm:2.7.0, lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.3.0, lit@npm:^2.5.0":
"lit@npm:2.7.0, lit@npm:^2.0.0, lit@npm:^2.0.0-rc.2, lit@npm:^2.2.1, lit@npm:^2.2.8, lit@npm:^2.3.0, lit@npm:^2.5.0":
version: 2.7.0
resolution: "lit@npm:2.7.0"
dependencies: