mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
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:
parent
4d52913a01
commit
0f5320c6fb
@ -114,9 +114,6 @@ class HassioAddonAudio extends LitElement {
|
||||
ha-card {
|
||||
display: block;
|
||||
}
|
||||
paper-item {
|
||||
width: 450px;
|
||||
}
|
||||
.card-actions {
|
||||
text-align: right;
|
||||
}
|
||||
|
@ -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> `
|
||||
|
@ -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>
|
||||
`
|
||||
|
@ -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",
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>`;
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
>
|
||||
`;
|
||||
}
|
||||
|
@ -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}
|
||||
|
@ -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}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { mdiStar } from "@mdi/js";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
|
@ -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
|
||||
);
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import "@material/mwc-button";
|
||||
import "@polymer/paper-tooltip/paper-tooltip";
|
||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
|
@ -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>
|
||||
|
||||
|
@ -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";
|
||||
|
@ -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>`;
|
||||
|
@ -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)"
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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>`
|
||||
: "—",
|
||||
};
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
>
|
||||
`
|
||||
: ""}
|
||||
|
@ -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>
|
||||
`
|
||||
: ""}
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
@ -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"
|
||||
|
@ -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";
|
||||
|
@ -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>
|
||||
`
|
||||
: ""}
|
||||
`;
|
||||
|
@ -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)"
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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("")}
|
||||
|
29
yarn.lock
29
yarn.lock
@ -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:
|
||||
|
Loading…
x
Reference in New Issue
Block a user