diff --git a/package.json b/package.json index 9eeac473fb..7b3bf4a013 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "@material/mwc-formfield": "0.25.3", "@material/mwc-icon-button": "patch:@material/mwc-icon-button@0.25.3#./.yarn/patches/@material/mwc-icon-button/remove-icon.patch", "@material/mwc-linear-progress": "0.25.3", - "@material/mwc-list": "0.25.3", + "@material/mwc-list": "^0.25.3", "@material/mwc-menu": "0.25.3", "@material/mwc-radio": "0.25.3", "@material/mwc-ripple": "0.25.3", @@ -88,8 +88,9 @@ "@polymer/paper-tooltip": "^3.0.1", "@polymer/polymer": "3.4.1", "@thomasloven/round-slider": "0.5.4", - "@vaadin/vaadin-combo-box": "^21.0.2", - "@vaadin/vaadin-date-picker": "^21.0.2", + "@vaadin/combo-box": "^22.0.4", + "@vaadin/date-picker": "^22.0.4", + "@vaadin/vaadin-themable-mixin": "^22.0.4", "@vibrant/color": "^3.2.1-alpha.1", "@vibrant/core": "^3.2.1-alpha.1", "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1", @@ -112,7 +113,7 @@ "leaflet": "^1.7.1", "leaflet-draw": "^1.0.4", "lit": "^2.1.2", - "lit-vaadin-helpers": "^0.2.1", + "lit-vaadin-helpers": "^0.3.0", "marked": "^3.0.2", "memoize-one": "^5.2.1", "node-vibrant": "3.2.1-alpha.1", diff --git a/src/components/device/ha-area-devices-picker.ts b/src/components/device/ha-area-devices-picker.ts index f863bacd45..67e01a131d 100644 --- a/src/components/device/ha-area-devices-picker.ts +++ b/src/components/device/ha-area-devices-picker.ts @@ -4,7 +4,7 @@ import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-listbox/paper-listbox"; -import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; +import "@vaadin/combo-box/theme/material/vaadin-combo-box-light"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, diff --git a/src/components/device/ha-device-picker.ts b/src/components/device/ha-device-picker.ts index 3b13c963e1..1161505eeb 100644 --- a/src/components/device/ha-device-picker.ts +++ b/src/components/device/ha-device-picker.ts @@ -1,18 +1,9 @@ -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-item/paper-item-body"; +import "@material/mwc-list/mwc-list-item"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import { - css, - CSSResultGroup, - html, - LitElement, - PropertyValues, - TemplateResult, -} from "lit"; -import { customElement, property, state, query } from "lit/decorators"; -import memoizeOne from "memoize-one"; +import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { ComboBoxLitRenderer } from "lit-vaadin-helpers"; -import { mdiCheck } from "@mdi/js"; +import { customElement, property, query, state } from "lit/decorators"; +import memoizeOne from "memoize-one"; import { fireEvent } from "../../common/dom/fire_event"; import { computeDomain } from "../../common/entity/compute_domain"; import { stringCompare } from "../../common/string/compare"; @@ -46,36 +37,12 @@ export type HaDevicePickerDeviceFilterFunc = ( device: DeviceRegistryEntry ) => boolean; -// eslint-disable-next-line lit/prefer-static-styles -const rowRenderer: ComboBoxLitRenderer = (item) => html` - - - - ${item.name} - ${item.area} - - `; +const rowRenderer: ComboBoxLitRenderer = (item) => html` + ${item.name} + ${item.area} +`; @customElement("ha-device-picker") export class HaDevicePicker extends SubscribeMixin(LitElement) { @@ -335,19 +302,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) { fireEvent(this, "change"); }, 0); } - - static get styles(): CSSResultGroup { - return css` - paper-input > ha-icon-button { - --mdc-icon-button-size: 24px; - padding: 2px; - color: var(--secondary-text-color); - } - [hidden] { - display: none; - } - `; - } } declare global { diff --git a/src/components/entity/ha-entity-attribute-picker.ts b/src/components/entity/ha-entity-attribute-picker.ts index d199c4f7b6..51b17fd53d 100644 --- a/src/components/entity/ha-entity-attribute-picker.ts +++ b/src/components/entity/ha-entity-attribute-picker.ts @@ -1,7 +1,7 @@ import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; -import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; +import "@vaadin/combo-box/theme/material/vaadin-combo-box-light"; import { HassEntity } from "home-assistant-js-websocket"; import { css, diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts index 016684e6c2..a455bb988a 100644 --- a/src/components/entity/ha-entity-picker.ts +++ b/src/components/entity/ha-entity-picker.ts @@ -2,7 +2,7 @@ import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; -import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; +import "@vaadin/combo-box/theme/material/vaadin-combo-box-light"; import { HassEntity } from "home-assistant-js-websocket"; import { css, diff --git a/src/components/entity/ha-statistic-picker.ts b/src/components/entity/ha-statistic-picker.ts index 080a78a252..511b46353a 100644 --- a/src/components/entity/ha-statistic-picker.ts +++ b/src/components/entity/ha-statistic-picker.ts @@ -1,17 +1,8 @@ -import { mdiCheck } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; -import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; import { HassEntity } from "home-assistant-js-websocket"; -import { - css, - CSSResultGroup, - html, - LitElement, - PropertyValues, - TemplateResult, -} from "lit"; +import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { ComboBoxLitRenderer } from "lit-vaadin-helpers"; import { customElement, property, query, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -76,54 +67,24 @@ export class HaStatisticPicker extends LitElement { id: string; name: string; state?: HassEntity; - // eslint-disable-next-line lit/prefer-static-styles - }> = (item) => html` - - - ${item.state - ? html`` - : ""} - - ${item.name} - ${item.id === "" || item.id === "__missing" - ? html`${this.hass.localize( - "ui.components.statistic-picker.learn_more" - )}` - : item.id} - - `; + }> = (item) => html` + ${item.state + ? html`` + : ""} + ${item.name} + ${item.id === "" || item.id === "__missing" + ? html`${this.hass.localize( + "ui.components.statistic-picker.learn_more" + )}` + : item.id} + `; private _getStatistics = memoizeOne( ( @@ -293,19 +254,6 @@ export class HaStatisticPicker extends LitElement { fireEvent(this, "change"); }, 0); } - - static get styles(): CSSResultGroup { - return css` - paper-input > ha-icon-button { - --mdc-icon-button-size: 24px; - padding: 2px; - color: var(--secondary-text-color); - } - [hidden] { - display: none; - } - `; - } } declare global { diff --git a/src/components/entity/ha-statistics-picker.ts b/src/components/entity/ha-statistics-picker.ts index 46e10060d0..08242a5263 100644 --- a/src/components/entity/ha-statistics-picker.ts +++ b/src/components/entity/ha-statistics-picker.ts @@ -1,4 +1,4 @@ -import { html, LitElement, TemplateResult } from "lit"; +import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import type { PolymerChangedEvent } from "../../polymer-types"; @@ -103,6 +103,18 @@ class HaStatisticsPicker extends LitElement { this._updateStatistics([...currentEntities, toAdd]); } + + static get styles(): CSSResultGroup { + return css` + :host { + width: 200px; + display: block; + } + ha-statistic-picker { + width: 100%; + } + `; + } } declare global { diff --git a/src/components/ha-addon-picker.ts b/src/components/ha-addon-picker.ts index c40d874c13..a28f188de9 100644 --- a/src/components/ha-addon-picker.ts +++ b/src/components/ha-addon-picker.ts @@ -1,4 +1,3 @@ -import { mdiCheck } from "@mdi/js"; import { html, LitElement, TemplateResult } from "lit"; import { ComboBoxLitRenderer } from "lit-vaadin-helpers"; import { customElement, property, query, state } from "lit/decorators"; @@ -12,39 +11,12 @@ import { PolymerChangedEvent } from "../polymer-types"; import { HomeAssistant } from "../types"; import { HaComboBox } from "./ha-combo-box"; -// eslint-disable-next-line lit/prefer-static-styles -const rowRenderer: ComboBoxLitRenderer = (item) => html` - - - - ${item.name} - ${item.slug} - - `; +const rowRenderer: ComboBoxLitRenderer = ( + item +) => html` + ${item.name} + ${item.slug} +`; @customElement("ha-addon-picker") class HaAddonPicker extends LitElement { diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts index ed658188df..b6504f9dc1 100644 --- a/src/components/ha-area-picker.ts +++ b/src/components/ha-area-picker.ts @@ -3,7 +3,7 @@ import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-listbox/paper-listbox"; -import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; +import "@vaadin/combo-box/theme/material/vaadin-combo-box-light"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { css, diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts index afcd9c8911..dd2b5d0e27 100644 --- a/src/components/ha-combo-box.ts +++ b/src/components/ha-combo-box.ts @@ -1,25 +1,59 @@ +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-textfield/mwc-textfield"; import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js"; -import "@polymer/paper-input/paper-input"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-listbox/paper-listbox"; -import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; +import "@vaadin/combo-box/theme/material/vaadin-combo-box-light"; +import type { ComboBoxLight } from "@vaadin/combo-box/vaadin-combo-box-light"; +import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers"; -import { customElement, property, query, state } from "lit/decorators"; +import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; import { PolymerChangedEvent } from "../polymer-types"; import { HomeAssistant } from "../types"; import "./ha-icon-button"; -// eslint-disable-next-line lit/prefer-static-styles -const defaultRowRenderer: ComboBoxLitRenderer = (item) => html` - ${item}`; + :host([focused]:not([disabled])) { + background-color: rgba(0, 0, 0, 0.12); + } + :host([selected]:not([disabled])) { + background-color: transparent; + color: var(--mdc-theme-primary); + --mdc-ripple-color: var(--mdc-theme-primary); + --mdc-theme-text-primary-on-background: var(--mdc-theme-primary); + } + :host([selected]:not([disabled])):before { + background-color: var(--mdc-theme-primary); + opacity: 0.12; + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + :host([selected][focused]:not([disabled])):before { + opacity: 0.24; + } + :host(:hover:not([disabled])) { + background-color: transparent; + } + [part="content"] { + width: 100%; + } + [part="checkmark"] { + display: none; + } + ` +); + +const defaultRowRenderer: ComboBoxLitRenderer = (item) => + html`${item}`; @customElement("ha-combo-box") export class HaComboBox extends LitElement { @@ -46,24 +80,25 @@ export class HaComboBox extends LitElement { @property({ type: Boolean }) public disabled?: boolean; - @state() private _opened?: boolean; + @property({ type: Boolean, reflect: true, attribute: "opened" }) + private _opened?: boolean; - @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement; + @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight; public open() { this.updateComplete.then(() => { - (this._comboBox as any)?.open(); + this._comboBox?.open(); }); } public focus() { this.updateComplete.then(() => { - this.shadowRoot?.querySelector("paper-input")?.focus(); + this._comboBox?.inputElement?.focus(); }); } public get selectedItem() { - return (this._comboBox as any).selectedItem; + return this._comboBox.selectedItem; } protected render(): TemplateResult { @@ -72,7 +107,7 @@ export class HaComboBox extends LitElement { .itemValuePath=${this.itemValuePath} .itemIdPath=${this.itemIdPath} .itemLabelPath=${this.itemLabelPath} - .value=${this.value} + .value=${this.value || ""} .items=${this.items} .filteredItems=${this.filteredItems} .allowCustomValue=${this.allowCustomValue} @@ -81,8 +116,9 @@ export class HaComboBox extends LitElement { @opened-changed=${this._openedChanged} @filter-changed=${this._filterChanged} @value-changed=${this._valueChanged} + attr-for-value="value" > - `} > - ${this.value - ? html` - - ` - : ""} - - - + + ${this.value + ? html`` + : ""} + `; } @@ -119,8 +152,20 @@ export class HaComboBox extends LitElement { fireEvent(this, "value-changed", { value: undefined }); } + private _toggleOpen(ev: Event) { + if (this._opened) { + this._comboBox?.close(); + ev.stopPropagation(); + } else { + this._comboBox?.inputElement.focus(); + } + } + private _openedChanged(ev: PolymerChangedEvent) { - this._opened = ev.detail.value; + // delay this so we can handle click event before setting _opened + setTimeout(() => { + this._opened = ev.detail.value; + }, 0); // @ts-ignore fireEvent(this, ev.type, ev.detail); } @@ -141,11 +186,39 @@ export class HaComboBox extends LitElement { static get styles(): CSSResultGroup { return css` - paper-input > ha-icon-button { + :host { + display: block; + width: 100%; + margin-top: 4px; + } + vaadin-combo-box-light { + position: relative; + } + mwc-textfield { + width: 100%; + } + mwc-textfield > ha-icon-button { --mdc-icon-button-size: 24px; padding: 2px; color: var(--secondary-text-color); } + ha-svg-icon { + color: var(--input-dropdown-icon-color); + position: absolute; + cursor: pointer; + } + .toggle-button { + right: 12px; + top: -10px; + } + :host([opened]) .toggle-button { + color: var(--primary-color); + } + .clear-button { + --mdc-icon-size: 20px; + top: -7px; + right: 36px; + } `; } } diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts index 852e4aa4c7..c83f5742c3 100644 --- a/src/components/ha-date-input.ts +++ b/src/components/ha-date-input.ts @@ -1,6 +1,6 @@ import { mdiCalendar } from "@mdi/js"; import "@polymer/paper-input/paper-input"; -import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light"; +import "@vaadin/date-picker/theme/material/vaadin-date-picker-light"; import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import { customElement, property, query } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; diff --git a/src/components/ha-icon-picker.ts b/src/components/ha-icon-picker.ts index 93da7a5d87..972a2f7a61 100644 --- a/src/components/ha-icon-picker.ts +++ b/src/components/ha-icon-picker.ts @@ -2,7 +2,7 @@ import { mdiCheck, mdiMenuDown, mdiMenuUp } from "@mdi/js"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; -import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light"; +import "@vaadin/combo-box/theme/material/vaadin-combo-box-light"; import { css, html, LitElement, TemplateResult } from "lit"; import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers"; import { customElement, property, query, state } from "lit/decorators"; diff --git a/src/components/ha-selector/ha-selector-addon.ts b/src/components/ha-selector/ha-selector-addon.ts index 30214933f1..47bb9c045b 100644 --- a/src/components/ha-selector/ha-selector-addon.ts +++ b/src/components/ha-selector/ha-selector-addon.ts @@ -1,4 +1,4 @@ -import { html, LitElement } from "lit"; +import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators"; import { AddonSelector } from "../../data/selector"; import { HomeAssistant } from "../../types"; @@ -22,6 +22,12 @@ export class HaAddonSelector extends LitElement { allow-custom-entity >`; } + + static styles = css` + ha-addon-picker { + width: 100%; + } + `; } declare global { diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts index 3469982b77..5b9a8a6506 100644 --- a/src/components/ha-service-control.ts +++ b/src/components/ha-service-control.ts @@ -480,6 +480,9 @@ export class HaServiceControl extends LitElement { display: block; margin: var(--service-control-padding, 0 16px); } + ha-service-picker { + padding-top: 16px; + } ha-yaml-editor { padding: 16px 0; } diff --git a/src/components/ha-service-picker.ts b/src/components/ha-service-picker.ts index 196d2902c2..dab0015447 100644 --- a/src/components/ha-service-picker.ts +++ b/src/components/ha-service-picker.ts @@ -1,4 +1,3 @@ -import { mdiCheck } from "@mdi/js"; import { html, LitElement } from "lit"; import { ComboBoxLitRenderer } from "lit-vaadin-helpers"; import { property, state } from "lit/decorators"; @@ -11,39 +10,12 @@ import "./ha-combo-box"; const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = ( item - // eslint-disable-next-line lit/prefer-static-styles -) => html` - - - - ${item.name} - ${item.name === item.service ? "" : item.service} - - `; +) => html` + ${item.name} + ${item.name === item.service ? "" : item.service} +`; class HaServicePicker extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; diff --git a/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts index 2f7477327b..394fcfcd65 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts @@ -127,6 +127,9 @@ export class DialogEnergyBatterySettings ha-dialog { --mdc-dialog-max-width: 430px; } + ha-statistic-picker { + width: 100%; + } `, ]; } diff --git a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts index e0ac123065..6cc3e0bc52 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-device-settings.ts @@ -1,5 +1,5 @@ import { mdiDevices } from "@mdi/js"; -import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; import "../../../../components/ha-dialog"; @@ -109,7 +109,14 @@ export class DialogEnergyDeviceSettings } static get styles(): CSSResultGroup { - return haStyleDialog; + return [ + haStyleDialog, + css` + ha-statistic-picker { + width: 100%; + } + `, + ]; } } diff --git a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts index fa5c9062f7..fea22bc68d 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts @@ -294,6 +294,9 @@ export class DialogEnergyGasSettings ha-formfield { display: block; } + ha-statistic-picker { + width: 100%; + } .price-options { display: block; padding-left: 52px; diff --git a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts index 0bb1ebf34e..4ae094ab52 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts @@ -301,6 +301,9 @@ export class DialogEnergyGridFlowSettings ha-formfield { display: block; } + ha-statistic-picker { + width: 100%; + } .price-options { display: block; padding-left: 52px; diff --git a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts index 25f6073e85..cdd24d513f 100644 --- a/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts +++ b/src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts @@ -248,6 +248,9 @@ export class DialogEnergySolarSettings ha-formfield { display: block; } + ha-statistic-picker { + width: 100%; + } .forecast-options { padding-left: 32px; } diff --git a/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts index 163ea01bd3..89411e668c 100644 --- a/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts @@ -1,5 +1,5 @@ import "@polymer/paper-input/paper-input"; -import { CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { array, @@ -284,7 +284,14 @@ export class HuiStatisticsGraphCardEditor } static get styles(): CSSResultGroup { - return configElementStyle; + return [ + configElementStyle, + css` + ha-statistics-picker { + width: 100%; + } + `, + ]; } } diff --git a/yarn.lock b/yarn.lock index 1a35f14b62..ab7da34845 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2491,7 +2491,7 @@ __metadata: languageName: node linkType: hard -"@material/mwc-list@npm:0.25.3, @material/mwc-list@npm:^0.25.3": +"@material/mwc-list@npm:^0.25.3": version: 0.25.3 resolution: "@material/mwc-list@npm:0.25.3" dependencies: @@ -3059,6 +3059,13 @@ __metadata: languageName: node linkType: hard +"@open-wc/dedupe-mixin@npm:^1.3.0": + version: 1.3.0 + resolution: "@open-wc/dedupe-mixin@npm:1.3.0" + checksum: 6c957d705a0ee96c46282b95267eab0365265e90109b2da95b51c5384b730c4823fb426f99a0cc10465826250bd6466199af80ad7257a4aacdd9bcb997b4cab3 + languageName: node + linkType: hard + "@open-wc/dev-server-hmr@npm:^0.0.2": version: 0.0.2 resolution: "@open-wc/dev-server-hmr@npm:0.0.2" @@ -3103,7 +3110,7 @@ __metadata: languageName: node linkType: hard -"@polymer/iron-a11y-keys-behavior@npm:^3.0.0, @polymer/iron-a11y-keys-behavior@npm:^3.0.0-pre.26": +"@polymer/iron-a11y-keys-behavior@npm:^3.0.0-pre.26": version: 3.0.1 resolution: "@polymer/iron-a11y-keys-behavior@npm:3.0.1" dependencies: @@ -3216,18 +3223,6 @@ __metadata: languageName: node linkType: hard -"@polymer/iron-list@npm:^3.0.0": - version: 3.0.2 - resolution: "@polymer/iron-list@npm:3.0.2" - dependencies: - "@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26 - "@polymer/iron-resizable-behavior": ^3.0.0-pre.26 - "@polymer/iron-scroll-target-behavior": ^3.0.0-pre.26 - "@polymer/polymer": ^3.0.0 - checksum: 6f3f9db546120776b4efedc3986c4399a4a28d3951cc6a1d5920e1d9b9eab26c6a92e2194dc4bdbb4dd148c727ac8aa20c7323a576a46600e6cd15bb0ad5ccce - languageName: node - linkType: hard - "@polymer/iron-media-query@npm:^3.0.0, @polymer/iron-media-query@npm:^3.0.0-pre.26": version: 3.0.1 resolution: "@polymer/iron-media-query@npm:3.0.1" @@ -4235,67 +4230,120 @@ __metadata: languageName: node linkType: hard -"@vaadin/vaadin-button@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-button@npm:21.0.2" +"@vaadin/button@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/button@npm:22.0.4" dependencies: "@polymer/polymer": ^3.0.0 - "@vaadin/vaadin-control-state-mixin": ^21.0.2 - "@vaadin/vaadin-element-mixin": ^21.0.2 - "@vaadin/vaadin-lumo-styles": ^21.0.2 - "@vaadin/vaadin-material-styles": ^21.0.2 - "@vaadin/vaadin-themable-mixin": ^21.0.2 - checksum: d95a682edc68a2cce6a08272e9cb0340517484ec39b3ced368390b6a171fb8f6ae19308d793af6947dc2525bf70f62c766ad7a50ed82eceff0699171b3b58768 + "@vaadin/component-base": ^22.0.4 + "@vaadin/vaadin-lumo-styles": ^22.0.4 + "@vaadin/vaadin-material-styles": ^22.0.4 + "@vaadin/vaadin-themable-mixin": ^22.0.4 + checksum: 70f8eeddd7c8d19eb859f2dd5f848e9b6b83f1f4bc8cb3d1fdc613f0637df9c04f0f91e49d23c4d390ce4ffa8a301ea77c364c29de278e8c32e5e7ccbcaf8f67 languageName: node linkType: hard -"@vaadin/vaadin-combo-box@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-combo-box@npm:21.0.2" +"@vaadin/combo-box@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/combo-box@npm:22.0.4" dependencies: - "@polymer/iron-a11y-announcer": ^3.0.0 - "@polymer/iron-list": ^3.0.0 + "@open-wc/dedupe-mixin": ^1.3.0 "@polymer/iron-resizable-behavior": ^3.0.0 "@polymer/polymer": ^3.0.0 - "@vaadin/vaadin-control-state-mixin": ^21.0.2 - "@vaadin/vaadin-element-mixin": ^21.0.2 - "@vaadin/vaadin-item": ^21.0.2 - "@vaadin/vaadin-lumo-styles": ^21.0.2 - "@vaadin/vaadin-material-styles": ^21.0.2 - "@vaadin/vaadin-overlay": ^21.0.2 - "@vaadin/vaadin-text-field": ^21.0.2 - "@vaadin/vaadin-themable-mixin": ^21.0.2 - checksum: 3c12f3c01d5c9b04efa011c57cee7ac3ec7d7f47d2d59a9ce71537f3a4f12177bcf4e049e03403c1f6693ef9a4717095dd7eb8435a83f4376bcf255a56a1aaa7 + "@vaadin/component-base": ^22.0.4 + "@vaadin/field-base": ^22.0.4 + "@vaadin/input-container": ^22.0.4 + "@vaadin/item": ^22.0.4 + "@vaadin/vaadin-lumo-styles": ^22.0.4 + "@vaadin/vaadin-material-styles": ^22.0.4 + "@vaadin/vaadin-overlay": ^22.0.4 + "@vaadin/vaadin-themable-mixin": ^22.0.4 + checksum: a3cde710d1187bba8e9e7eeb7f6397e6e1158befa3412c3aa684b3b45a1425cdee28d408d5e4dc4f586e1f6881db8850fc51c38f4658c4eb65c51a26a9623c56 languageName: node linkType: hard -"@vaadin/vaadin-control-state-mixin@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-control-state-mixin@npm:21.0.2" +"@vaadin/component-base@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/component-base@npm:22.0.4" dependencies: + "@open-wc/dedupe-mixin": ^1.3.0 "@polymer/polymer": ^3.0.0 - checksum: a6ed433dc8750afdff410c9046637f12ebbcd79f46c8a9d294ab4d3c18c1dd1c9b465b83c63671a804e10319123375f1e3ee55dfd5dd2b60f44f8593af7e2ee6 + "@vaadin/vaadin-development-mode-detector": ^2.0.0 + "@vaadin/vaadin-usage-statistics": ^2.1.0 + lit: ^2.0.0 + checksum: d18e7cebdd2928e33641ee035927540239e8a65d23521aca2e35d9992a44060d951e877af09088de0ffa88daa11f86a02b86a087cb29b51d9ada574009159509 languageName: node linkType: hard -"@vaadin/vaadin-date-picker@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-date-picker@npm:21.0.2" +"@vaadin/date-picker@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/date-picker@npm:22.0.4" dependencies: + "@open-wc/dedupe-mixin": ^1.3.0 "@polymer/iron-a11y-announcer": ^3.0.0 - "@polymer/iron-a11y-keys-behavior": ^3.0.0 "@polymer/iron-media-query": ^3.0.0 - "@polymer/iron-resizable-behavior": ^3.0.0 "@polymer/polymer": ^3.2.0 - "@vaadin/vaadin-button": ^21.0.2 - "@vaadin/vaadin-control-state-mixin": ^21.0.2 - "@vaadin/vaadin-element-mixin": ^21.0.2 - "@vaadin/vaadin-lumo-styles": ^21.0.2 - "@vaadin/vaadin-material-styles": ^21.0.2 - "@vaadin/vaadin-overlay": ^21.0.2 - "@vaadin/vaadin-text-field": ^21.0.2 - "@vaadin/vaadin-themable-mixin": ^21.0.2 - checksum: 0b1ee406540d59d3cc8bf37b47575adc9c2bc50e15f3e3adb1d95486d58c8b377b153f4f19c76258b27ea814188c024312b704961cf609120a7649943666552e + "@vaadin/button": ^22.0.4 + "@vaadin/component-base": ^22.0.4 + "@vaadin/field-base": ^22.0.4 + "@vaadin/input-container": ^22.0.4 + "@vaadin/vaadin-lumo-styles": ^22.0.4 + "@vaadin/vaadin-material-styles": ^22.0.4 + "@vaadin/vaadin-overlay": ^22.0.4 + "@vaadin/vaadin-themable-mixin": ^22.0.4 + checksum: bfc0bc3a9bec920d7a0b0d2b3968f6c5ca17cea752f37b7d707e8912b8c35e2780b1a78d4cdca1094519cb70554f95ee5ab69f212c677482935a7a4fc3b42a43 + languageName: node + linkType: hard + +"@vaadin/field-base@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/field-base@npm:22.0.4" + dependencies: + "@open-wc/dedupe-mixin": ^1.3.0 + "@polymer/polymer": ^3.0.0 + "@vaadin/component-base": ^22.0.4 + lit: ^2.0.0 + checksum: 4ca54ea3efd1bad2cea6ada97484e24f77f7ebb2ab5da7de5b9b7949d624b049d357c7f6f69206f1f10023b1711dc7b8bde9f6dfad774578efec00e1907c4763 + languageName: node + linkType: hard + +"@vaadin/icon@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/icon@npm:22.0.4" + dependencies: + "@polymer/polymer": ^3.0.0 + "@vaadin/component-base": ^22.0.4 + "@vaadin/vaadin-lumo-styles": ^22.0.4 + "@vaadin/vaadin-themable-mixin": ^22.0.4 + lit: ^2.0.0 + checksum: 65e5195a8eb6f8ce24471c3f52ffdd7edc49249e39922e945eb8f02fc2b277d8d527a1538241b9660ca568a87663912b1be9c82fa8a841f286e713630d52f3db + languageName: node + linkType: hard + +"@vaadin/input-container@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/input-container@npm:22.0.4" + dependencies: + "@polymer/polymer": ^3.0.0 + "@vaadin/component-base": ^22.0.4 + "@vaadin/vaadin-lumo-styles": ^22.0.4 + "@vaadin/vaadin-material-styles": ^22.0.4 + "@vaadin/vaadin-themable-mixin": ^22.0.4 + checksum: 718cb7d8f715427d9085feee8a0df987440511059c5bbfcaa80d63ecd989a693f8f50af9da0f483555396aece21b75eff280921eda7cf0b6358e67518e53ba85 + languageName: node + linkType: hard + +"@vaadin/item@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/item@npm:22.0.4" + dependencies: + "@open-wc/dedupe-mixin": ^1.3.0 + "@polymer/polymer": ^3.0.0 + "@vaadin/component-base": ^22.0.4 + "@vaadin/vaadin-lumo-styles": ^22.0.4 + "@vaadin/vaadin-material-styles": ^22.0.4 + "@vaadin/vaadin-themable-mixin": ^22.0.4 + checksum: ef8c253668852a129656e083149b3866327dfae8671e30bb1bf78b39f969bd1db74892f090c7632b64fd91c25334f0542ad9dc6848486609de4350da5e5ea44c languageName: node linkType: hard @@ -4306,100 +4354,49 @@ __metadata: languageName: node linkType: hard -"@vaadin/vaadin-element-mixin@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-element-mixin@npm:21.0.2" - dependencies: - "@polymer/polymer": ^3.0.0 - "@vaadin/vaadin-development-mode-detector": ^2.0.0 - "@vaadin/vaadin-usage-statistics": ^2.1.0 - checksum: 8d18ff9f1e430ff4ed7461fe948b171f78bf43ba2f263c7f7cc4f4161e0486c7ad8a8d57c8cbb9443883ee6fedfae84bbbb562e2e3bb2161d33625b2adde8ebe - languageName: node - linkType: hard - -"@vaadin/vaadin-icon@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-icon@npm:21.0.2" - dependencies: - "@polymer/polymer": ^3.0.0 - "@vaadin/vaadin-element-mixin": ^21.0.2 - "@vaadin/vaadin-lumo-styles": ^21.0.2 - "@vaadin/vaadin-themable-mixin": ^21.0.2 - lit: ^2.0.0 - checksum: 993cd6d8bb6f52cc7ba0e1958824c77a3d56f3a3537ded361412d971174e3bb080780c039487390f7807faebe19f17b56aa1ffc63ad7672cf575d02664ee5880 - languageName: node - linkType: hard - -"@vaadin/vaadin-item@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-item@npm:21.0.2" - dependencies: - "@polymer/polymer": ^3.0.0 - "@vaadin/vaadin-element-mixin": ^21.0.2 - "@vaadin/vaadin-lumo-styles": ^21.0.2 - "@vaadin/vaadin-material-styles": ^21.0.2 - "@vaadin/vaadin-themable-mixin": ^21.0.2 - checksum: b4ff73c0e4f6823f3eb06e3c79df4654e0485740d5928d5bbe95add0b70f4e7cf8abe03cf160c7fe9db2cd474689d0ba5ae3278e85de32bb31d8ab8f90b74e09 - languageName: node - linkType: hard - -"@vaadin/vaadin-lumo-styles@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-lumo-styles@npm:21.0.2" +"@vaadin/vaadin-lumo-styles@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/vaadin-lumo-styles@npm:22.0.4" dependencies: "@polymer/iron-icon": ^3.0.0 "@polymer/iron-iconset-svg": ^3.0.0 "@polymer/polymer": ^3.0.0 - "@vaadin/vaadin-icon": ^21.0.2 - "@vaadin/vaadin-themable-mixin": ^21.0.2 - checksum: 99058edf60d4989a9eeef4651ff4d95fd901dafd91314e9a7ce02656466f1cb304f0225da4259dada2eaf257ff83bffed8c24730444e45a1b21a303a1b9a2a00 + "@vaadin/icon": ^22.0.4 + "@vaadin/vaadin-themable-mixin": ^22.0.4 + checksum: 15e9becd675e0d12024fbdfaecedd03f55841f685932ff5cf8a2143641f895309f21b84f378f1fca3af538c3aba26dad81421f05a28f31ad7bb5550ede8a3aea languageName: node linkType: hard -"@vaadin/vaadin-material-styles@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-material-styles@npm:21.0.2" +"@vaadin/vaadin-material-styles@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/vaadin-material-styles@npm:22.0.4" dependencies: "@polymer/polymer": ^3.0.0 - "@vaadin/vaadin-themable-mixin": ^21.0.2 - checksum: 0d5c5aa82cdaa09bb153333bdbd272ad3d137de6046a0a5e69245cb01394f7fb7a2a98b26a6e1b36d38736d32e3134c05cb00b35e5b39b410b31fc78aa55ff0e + "@vaadin/vaadin-themable-mixin": ^22.0.4 + checksum: 0e341e03eab9641cc317a9cbf6d57e7d026539d7bc77159226625aad63a379f31cd70da5e02f10a3d79e9fe0cba1b058935beb2c5d98f146bfb9dd45d8634ee6 languageName: node linkType: hard -"@vaadin/vaadin-overlay@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-overlay@npm:21.0.2" +"@vaadin/vaadin-overlay@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/vaadin-overlay@npm:22.0.4" dependencies: "@polymer/polymer": ^3.0.0 - "@vaadin/vaadin-element-mixin": ^21.0.2 - "@vaadin/vaadin-lumo-styles": ^21.0.2 - "@vaadin/vaadin-material-styles": ^21.0.2 - "@vaadin/vaadin-themable-mixin": ^21.0.2 - checksum: a1d9556de019912bfc135bbf6e0b6062ac479047ed26d1db28a8255011826c94fa8df5c115d210d94e59c0f58bf444775422c92f8ff004bd2659720d4d33c8b3 + "@vaadin/component-base": ^22.0.4 + "@vaadin/vaadin-lumo-styles": ^22.0.4 + "@vaadin/vaadin-material-styles": ^22.0.4 + "@vaadin/vaadin-themable-mixin": ^22.0.4 + checksum: 1b012ff0beac7879da498cf50ee0974d4c3e5637ebea7f7834b9bfc45b9f02e80c61267794c0f3f4e1d4853aa2f35113e1d94bc187d9fe072f37a03eb99f3ab6 languageName: node linkType: hard -"@vaadin/vaadin-text-field@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-text-field@npm:21.0.2" +"@vaadin/vaadin-themable-mixin@npm:^22.0.4": + version: 22.0.4 + resolution: "@vaadin/vaadin-themable-mixin@npm:22.0.4" dependencies: - "@polymer/polymer": ^3.0.0 - "@vaadin/vaadin-control-state-mixin": ^21.0.2 - "@vaadin/vaadin-element-mixin": ^21.0.2 - "@vaadin/vaadin-lumo-styles": ^21.0.2 - "@vaadin/vaadin-material-styles": ^21.0.2 - "@vaadin/vaadin-themable-mixin": ^21.0.2 - checksum: 8b7e08298e8d04ec9f7fede5c1f92dc5503a41004f421c8dae7e4fe69715225e74328caa232ba50d8164f8d9bf635806056f58af9f897c4b9913a95594d0b117 - languageName: node - linkType: hard - -"@vaadin/vaadin-themable-mixin@npm:^21.0.2": - version: 21.0.2 - resolution: "@vaadin/vaadin-themable-mixin@npm:21.0.2" - dependencies: - "@polymer/polymer": ^3.0.0 + "@open-wc/dedupe-mixin": ^1.3.0 lit: ^2.0.0 - checksum: 1a3db436b2e08f5c68343380da03ac80e2d42cd108b152065c43e12acff3fc57ed595109b1e5a31efa092be7fc7f8f654342c29b8345e985dc89899154edfa8b + checksum: 0b2dce09626c92b85ff2d2ad48c8130239bf41fd95147a5fd4490cab4767f074ba9d1008d732d9e90b9219cb1ac0509f4a5fc8637eb5847d6d33e14b20552186 languageName: node linkType: hard @@ -9111,7 +9108,7 @@ fsevents@^1.2.7: "@material/mwc-formfield": 0.25.3 "@material/mwc-icon-button": "patch:@material/mwc-icon-button@0.25.3#./.yarn/patches/@material/mwc-icon-button/remove-icon.patch" "@material/mwc-linear-progress": 0.25.3 - "@material/mwc-list": 0.25.3 + "@material/mwc-list": ^0.25.3 "@material/mwc-menu": 0.25.3 "@material/mwc-radio": 0.25.3 "@material/mwc-ripple": 0.25.3 @@ -9160,8 +9157,9 @@ fsevents@^1.2.7: "@types/webspeechapi": ^0.0.29 "@typescript-eslint/eslint-plugin": ^4.32.0 "@typescript-eslint/parser": ^4.32.0 - "@vaadin/vaadin-combo-box": ^21.0.2 - "@vaadin/vaadin-date-picker": ^21.0.2 + "@vaadin/combo-box": ^22.0.4 + "@vaadin/date-picker": ^22.0.4 + "@vaadin/vaadin-themable-mixin": ^22.0.4 "@vibrant/color": ^3.2.1-alpha.1 "@vibrant/core": ^3.2.1-alpha.1 "@vibrant/quantizer-mmcq": ^3.2.1-alpha.1 @@ -9214,7 +9212,7 @@ fsevents@^1.2.7: lint-staged: ^11.1.2 lit: ^2.1.2 lit-analyzer: ^1.2.1 - lit-vaadin-helpers: ^0.2.1 + lit-vaadin-helpers: ^0.3.0 lodash.template: ^4.5.0 magic-string: ^0.25.7 map-stream: ^0.0.7 @@ -10820,12 +10818,12 @@ fsevents@^1.2.7: languageName: node linkType: hard -"lit-vaadin-helpers@npm:^0.2.1": - version: 0.2.1 - resolution: "lit-vaadin-helpers@npm:0.2.1" +"lit-vaadin-helpers@npm:^0.3.0": + version: 0.3.0 + resolution: "lit-vaadin-helpers@npm:0.3.0" dependencies: lit: ^2.0.0 - checksum: 140a0e7fbf9cdd8ffe780ffb0ff44227553e4764ae73408a93ed3ef0a6d996d7646e3dbf05a1624ae0ad9ad152d2f43adb4a78cf61cd4f4b6f86cbe4e2252bb4 + checksum: c96df23272442b3f6c38273721306eb650ea27876fade53ccfbb0158eef838865b1727b9657d35a80f55d94b1418106be63794adb064b79f35dfe3014fb435ff languageName: node linkType: hard