diff --git a/demo/src/entrypoint.ts b/demo/src/entrypoint.ts index 54feef73d5..456bba9de4 100644 --- a/demo/src/entrypoint.ts +++ b/demo/src/entrypoint.ts @@ -2,8 +2,3 @@ import "../../src/resources/ha-style"; import "../../src/resources/roboto"; import "../../src/resources/safari-14-attachshadow-patch"; import "./ha-demo"; - -/* polyfill for paper-dropdown */ -setTimeout(() => { - import("web-animations-js/web-animations-next-lite.min"); -}, 1000); diff --git a/hassio/src/addon-view/config/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts index ff8480609b..7f7c8d3f2c 100644 --- a/hassio/src/addon-view/config/hassio-addon-audio.ts +++ b/hassio/src/addon-view/config/hassio-addon-audio.ts @@ -110,8 +110,7 @@ class HassioAddonAudio extends LitElement { hassioStyle, css` :host, - ha-card, - paper-dropdown-menu { + ha-card { display: block; } paper-item { diff --git a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts index d903651898..4bad79ca7f 100644 --- a/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts +++ b/hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts @@ -156,7 +156,7 @@ class HassioDatadiskDialog extends LitElement { haStyle, haStyleDialog, css` - paper-dropdown-menu { + mwc-select { width: 100%; } ha-circular-progress { diff --git a/src/entrypoints/authorize.ts b/src/entrypoints/authorize.ts index 36954a3fcf..fef05a7219 100644 --- a/src/entrypoints/authorize.ts +++ b/src/entrypoints/authorize.ts @@ -5,9 +5,3 @@ import "../resources/ha-style"; import "../resources/roboto"; import "../resources/safari-14-attachshadow-patch"; import "../resources/array.flat.polyfill"; - -/* polyfill for paper-dropdown */ -setTimeout( - () => import("web-animations-js/web-animations-next-lite.min"), - 2000 -); diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts index 7142419b8f..f75efdb624 100644 --- a/src/layouts/home-assistant.ts +++ b/src/layouts/home-assistant.ts @@ -78,8 +78,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) { super.firstUpdated(changedProps); this._initializeHass(); setTimeout(() => registerServiceWorker(this), 1000); - /* polyfill for paper-dropdown */ - import("web-animations-js/web-animations-next-lite.min"); + this.addEventListener("hass-suspend-when-hidden", (ev) => { this._updateHass({ suspendWhenHidden: ev.detail.suspend }); storeState(this.hass!); diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts index d6874a6ae8..01c53f3952 100644 --- a/src/onboarding/onboarding-integrations.ts +++ b/src/onboarding/onboarding-integrations.ts @@ -140,8 +140,6 @@ class OnboardingIntegrations extends LitElement { this._scanUSBDevices(); loadConfigFlowDialog(); this._loadConfigEntries(); - /* polyfill for paper-dropdown */ - import("web-animations-js/web-animations-next-lite.min"); } private _createFlow() { diff --git a/src/panels/config/integrations/integration-panels/zha/types.ts b/src/panels/config/integrations/integration-panels/zha/types.ts index dd09861ad9..79e38cbbf9 100644 --- a/src/panels/config/integrations/integration-panels/zha/types.ts +++ b/src/panels/config/integrations/integration-panels/zha/types.ts @@ -1,11 +1,8 @@ +import { Select } from "@material/mwc-select"; import { Cluster, ZHADevice } from "../../../../../data/zha"; -export interface PickerTarget extends EventTarget { - selected: number; -} - export interface ItemSelectedEvent { - target?: PickerTarget; + target?: Select; } export interface ZHADeviceRemovedEvent { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts index e6e75915b4..e1cf97995c 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts @@ -1,9 +1,8 @@ import "@material/mwc-button"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select"; import { mdiHelpCircle } from "@mdi/js"; -import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-input/paper-input"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, @@ -13,6 +12,7 @@ import { TemplateResult, } from "lit"; import { property, state } from "lit/decorators"; +import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/ha-card"; import "../../../../../components/ha-icon-button"; @@ -48,7 +48,7 @@ export class ZHAClusterAttributes extends LitElement { @state() private _attributes: Attribute[] = []; - @state() private _selectedAttributeIndex = -1; + @state() private _selectedAttributeId?: number; @state() private _attributeValue?: any = ""; @@ -60,7 +60,7 @@ export class ZHAClusterAttributes extends LitElement { protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("selectedCluster")) { this._attributes = []; - this._selectedAttributeIndex = -1; + this._selectedAttributeId = undefined; this._attributeValue = ""; this._fetchAttributesForCluster(); } @@ -92,29 +92,25 @@ export class ZHAClusterAttributes extends LitElement {
- - - ${this._attributes.map( - (entry) => html` - ${entry.name + - " (id: " + - formatAsPaddedHex(entry.id) + - ")"} - ` - )} - - + ${this._attributes.map( + (entry) => html` + + ${entry.name + " (id: " + formatAsPaddedHex(entry.id) + ")"} + + ` + )} +
${this.showHelp ? html` @@ -125,7 +121,7 @@ export class ZHAClusterAttributes extends LitElement { ` : ""} - ${this._selectedAttributeIndex !== -1 + ${this._selectedAttributeId !== undefined ? this._renderAttributeInteractions() : ""} @@ -218,7 +214,7 @@ export class ZHAClusterAttributes extends LitElement { endpoint_id: this.selectedCluster!.endpoint_id, cluster_id: this.selectedCluster!.id, cluster_type: this.selectedCluster!.type, - attribute: this._attributes[this._selectedAttributeIndex].id, + attribute: this._selectedAttributeId!, manufacturer: this._manufacturerCodeOverride ? parseInt(this._manufacturerCodeOverride as string, 10) : undefined, @@ -236,7 +232,7 @@ export class ZHAClusterAttributes extends LitElement { endpoint_id: this.selectedCluster!.endpoint_id, cluster_id: this.selectedCluster!.id, cluster_type: this.selectedCluster!.type, - attribute: this._attributes[this._selectedAttributeIndex].id, + attribute: this._selectedAttributeId!, value: this._attributeValue, manufacturer: this._manufacturerCodeOverride ? parseInt(this._manufacturerCodeOverride as string, 10) @@ -266,7 +262,7 @@ export class ZHAClusterAttributes extends LitElement { } private _selectedAttributeChanged(event: ItemSelectedEvent): void { - this._selectedAttributeIndex = event.target!.selected; + this._selectedAttributeId = Number(event.target!.value); this._attributeValue = ""; } @@ -274,6 +270,10 @@ export class ZHAClusterAttributes extends LitElement { return [ haStyle, css` + mwc-select { + margin-top: 16px; + } + .menu { width: 100%; } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts index d00e672d5f..4af410898b 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts @@ -1,8 +1,7 @@ +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select"; import { mdiHelpCircle } from "@mdi/js"; -import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-input/paper-input"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, @@ -12,6 +11,7 @@ import { TemplateResult, } from "lit"; import { property, state } from "lit/decorators"; +import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/ha-card"; import "../../../../../components/ha-icon-button"; @@ -26,11 +26,7 @@ import { haStyle } from "../../../../../resources/styles"; import { HomeAssistant } from "../../../../../types"; import "../../../ha-config-section"; import { formatAsPaddedHex } from "./functions"; -import { - ChangeEvent, - IssueCommandServiceData, - ItemSelectedEvent, -} from "./types"; +import { ChangeEvent, IssueCommandServiceData } from "./types"; export class ZHAClusterCommands extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; @@ -45,7 +41,7 @@ export class ZHAClusterCommands extends LitElement { @state() private _commands: Command[] = []; - @state() private _selectedCommandIndex = -1; + @state() private _selectedCommandId?: number; @state() private _manufacturerCodeOverride?: number; @@ -55,7 +51,7 @@ export class ZHAClusterCommands extends LitElement { protected updated(changedProperties: PropertyValues): void { if (changedProperties.has("selectedCluster")) { this._commands = []; - this._selectedCommandIndex = -1; + this._selectedCommandId = undefined; this._fetchCommandsForCluster(); } super.update(changedProperties); @@ -86,29 +82,25 @@ export class ZHAClusterCommands extends LitElement {
- - - ${this._commands.map( - (entry) => html` - ${entry.name + - " (id: " + - formatAsPaddedHex(entry.id) + - ")"} - ` - )} - - + ${this._commands.map( + (entry) => html` + + ${entry.name + " (id: " + formatAsPaddedHex(entry.id) + ")"} + + ` + )} +
${this._showHelp ? html` @@ -119,7 +111,7 @@ export class ZHAClusterCommands extends LitElement { ` : ""} - ${this._selectedCommandIndex !== -1 + ${this._selectedCommandId !== undefined ? html`
command.id === this._selectedCommandId + )!.type, }; } @@ -202,8 +196,8 @@ export class ZHAClusterCommands extends LitElement { this._showHelp = !this._showHelp; } - private _selectedCommandChanged(event: ItemSelectedEvent): void { - this._selectedCommandIndex = event.target!.selected; + private _selectedCommandChanged(event): void { + this._selectedCommandId = Number(event.target.value); this._issueClusterCommandServiceData = this._computeIssueClusterCommandServiceData(); } @@ -212,6 +206,9 @@ export class ZHAClusterCommands extends LitElement { return [ haStyle, css` + mwc-select { + margin-top: 16px; + } .menu { width: 100%; } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts index 89935bc8ab..e9e20a2899 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts @@ -1,7 +1,6 @@ +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select"; import { mdiHelpCircle } from "@mdi/js"; -import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, @@ -12,6 +11,7 @@ import { } from "lit"; import { property, state } from "lit/decorators"; import { fireEvent } from "../../../../../common/dom/fire_event"; +import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import "../../../../../components/buttons/ha-call-service-button"; import "../../../../../components/ha-card"; import "../../../../../components/ha-icon-button"; @@ -25,7 +25,6 @@ import { haStyle } from "../../../../../resources/styles"; import { HomeAssistant } from "../../../../../types"; import "../../../ha-config-section"; import { computeClusterKey } from "./functions"; -import { ItemSelectedEvent } from "./types"; declare global { // for fire event @@ -79,24 +78,25 @@ export class ZHAClusters extends LitElement {
- - - ${this._clusters.map( - (entry) => html` - ${computeClusterKey(entry)} - ` - )} - - + ${this._clusters.map( + (entry, idx) => html` + ${computeClusterKey(entry)} + ` + )} +
${this.showHelp ? html` @@ -122,8 +122,8 @@ export class ZHAClusters extends LitElement { } } - private _selectedClusterChanged(event: ItemSelectedEvent): void { - this._selectedClusterIndex = event.target!.selected; + private _selectedClusterChanged(event): void { + this._selectedClusterIndex = Number(event.target!.value); fireEvent(this, "zha-cluster-selected", { cluster: this._clusters[this._selectedClusterIndex], }); @@ -137,6 +137,9 @@ export class ZHAClusters extends LitElement { return [ haStyle, css` + mwc-select { + margin-top: 16px; + } .menu { width: 100%; } diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts index 024e35db24..4ff919838e 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts @@ -1,8 +1,7 @@ import "@material/mwc-button/mwc-button"; import { mdiHelpCircle } from "@mdi/js"; -import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select"; import { css, CSSResultGroup, @@ -21,6 +20,7 @@ import { haStyle } from "../../../../../resources/styles"; import { HomeAssistant } from "../../../../../types"; import "../../../ha-config-section"; import { ItemSelectedEvent } from "./types"; +import { stopPropagation } from "../../../../../common/dom/stop_propagation"; @customElement("zha-device-binding-control") export class ZHADeviceBindingControl extends LitElement { @@ -62,23 +62,25 @@ export class ZHADeviceBindingControl extends LitElement {
- - - ${this.bindableDevices.map( - (device) => html` - ${device.user_given_name - ? device.user_given_name - : device.name} - ` - )} - - + + ${this.bindableDevices.map( + (device, idx) => html` + + ${device.user_given_name + ? device.user_given_name + : device.name} + + ` + )} +
${this._showHelp ? html` @@ -111,7 +113,7 @@ export class ZHADeviceBindingControl extends LitElement { } private _bindTargetIndexChanged(event: ItemSelectedEvent): void { - this._bindTargetIndex = event.target!.selected; + this._bindTargetIndex = Number(event.target!.value); this._deviceToBind = this._bindTargetIndex === -1 ? undefined diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts index 47466a42e5..f5d284ea5c 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts @@ -1,8 +1,5 @@ import "@material/mwc-button/mwc-button"; import { mdiHelpCircle } from "@mdi/js"; -import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, @@ -13,6 +10,7 @@ import { } from "lit"; import { customElement, property, state, query } from "lit/decorators"; import type { HASSDomEvent } from "../../../../../common/dom/fire_event"; +import { stopPropagation } from "../../../../../common/dom/stop_propagation"; import "../../../../../components/buttons/ha-call-service-button"; import { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table"; import "../../../../../components/ha-card"; @@ -95,22 +93,24 @@ export class ZHAGroupBindingControl extends LitElement {
- - - ${this.groups.map( - (group) => html` ${group.name} ` - )} - - + ${this.groups.map( + (group, idx) => + html`${group.name} ` + )} +
${this._showHelp ? html` @@ -179,7 +179,7 @@ export class ZHAGroupBindingControl extends LitElement { } private _bindTargetIndexChanged(event: ItemSelectedEvent): void { - this._bindTargetIndex = event.target!.selected; + this._bindTargetIndex = Number(event.target!.value); this._groupToBind = this._bindTargetIndex === -1 ? undefined diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts index 05e23fade9..779df732af 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts @@ -440,19 +440,15 @@ export class ZHANetworkVisualizationPage extends LitElement { search-input { flex: 1; + display: block; } search-input.header { - display: block; - position: relative; - top: -2px; color: var(--secondary-text-color); } ha-device-picker { flex: 1; - position: relative; - top: -4px; } .controls { diff --git a/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js b/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js index 91081d5158..865d808f66 100644 --- a/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js +++ b/src/panels/config/integrations/integration-panels/zwave/ha-config-zwave.js @@ -513,6 +513,7 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) { ready() { super.ready(); + import("web-animations-js/web-animations-next-lite.min"); this.addEventListener("hass-service-called", (ev) => this.serviceCalled(ev) );