Replace polymer paper-slider (#18168)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Simon Lamon 2023-10-16 13:35:13 +02:00 committed by GitHub
parent 434b9595c0
commit 62d21bea4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 169 additions and 358 deletions

View File

@ -4,16 +4,11 @@ export const demoThemeJimpower = () => ({
"primary-color": "#5294E2",
"label-badge-red": "var(--accent-color)",
"paper-tabs-selection-bar-color": "green",
"paper-slider-knob-color": "var(--accent-color)",
"light-primary-color": "var(--accent-color)",
"primary-background-color": "#383C45",
"primary-text-color": "#FFFFFF",
"paper-item-selected_-_background-color": "#434954",
"paper-slider-active-color": "var(--accent-color)",
"secondary-background-color": "#383C45",
"paper-slider-container-color":
"linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
"paper-slider-disabled-active-color": "var(--disabled-text-color)",
"disabled-text-color": "#7F848E",
"paper-item-icon_-_color": "green",
"paper-grey-200": "#414A59",
@ -32,14 +27,10 @@ export const demoThemeJimpower = () => ({
"switch-unchecked-button-color": "var(--disabled-text-color)",
"label-badge-border-color": "green",
"paper-listbox-color": "var(--primary-color)",
"paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
"card-background-color": "#434954",
"label-badge-text-color": "var(--primary-text-color)",
"paper-slider-knob-start-color": "var(--accent-color)",
"switch-unchecked-track-color": "var(--disabled-text-color)",
"dark-primary-color": "var(--accent-color)",
"paper-slider-secondary-color": "var(--secondary-background-color)",
"paper-slider-pin-color": "var(--accent-color)",
"paper-item-icon-active-color": "#F9C536",
"accent-color": "#E45E65",
"table-row-alternative-background-color": "#3E424B",

View File

@ -5,17 +5,12 @@ export const demoThemeKernehed = () => ({
"primary-color": "#2980b9",
"label-badge-red": "var(--accent-color)",
"paper-tabs-selection-bar-color": "green",
"paper-slider-knob-color": "var(--accent-color)",
"primary-text-color": "#FFFFFF",
"light-primary-color": "var(--accent-color)",
"primary-background-color": "#222222",
"sidebar-icon-color": "#777777",
"paper-item-selected_-_background-color": "#292929",
"paper-slider-active-color": "var(--accent-color)",
"secondary-background-color": "#222222",
"paper-slider-container-color":
"linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
"paper-slider-disabled-active-color": "var(--disabled-text-color)",
"disabled-text-color": "#777777",
"paper-item-icon_-_color": "green",
"paper-grey-200": "#222222",
@ -33,14 +28,10 @@ export const demoThemeKernehed = () => ({
"switch-unchecked-button-color": "var(--disabled-text-color)",
"label-badge-border-color": "green",
"paper-listbox-color": "#777777",
"paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
"card-background-color": "#292929",
"label-badge-text-color": "var(--primary-text-color)",
"paper-slider-knob-start-color": "var(--accent-color)",
"switch-unchecked-track-color": "var(--disabled-text-color)",
"dark-primary-color": "var(--accent-color)",
"paper-slider-secondary-color": "var(--secondary-background-color)",
"paper-slider-pin-color": "var(--accent-color)",
"paper-item-icon-active-color": "#b58e31",
"accent-color": "#2980b9",
"table-row-alternative-background-color": "#292929",

View File

@ -1,6 +1,5 @@
export const demoThemeTeachingbirds = () => ({
"paper-card-header-color": "var(--paper-item-icon-color)",
"paper-slider-pin-color": "var(--primary-color)",
"paper-listbox-background-color": "#202020",
"paper-grey-50": "var(--primary-text-color)",
"paper-item-icon-color": "#d3d3d3",
@ -8,8 +7,6 @@ export const demoThemeTeachingbirds = () => ({
"primary-color": "#389638",
"light-primary-color": "#6f956f",
"label-badge-red": "var(--primary-color)",
"paper-slider-secondary-color": "var(--light-primary-color)",
"paper-slider-knob-color": "var(--primary-color)",
"paper-listbox-color": "#FFFFFF",
"paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
"switch-unchecked-track-color": "var(--primary-text-color)",
@ -17,9 +14,7 @@ export const demoThemeTeachingbirds = () => ({
"label-badge-text-color": "var(--text-primary-color)",
"primary-background-color": "#303030",
"sidebar-icon-color": "var(--paper-item-icon-color)",
"paper-slider-active-color": "#d8bf50",
"secondary-background-color": "#2b2b2b",
"paper-slider-knob-start-color": "var(--primary-color)",
"paper-item-icon-active-color": "#d8bf50",
"switch-checked-color": "var(--primary-color)",
"secondary-text-color": "#389638",

View File

@ -49,11 +49,11 @@ export class DemoHaCircularSlider extends LitElement {
<div class="field">
<p>Current</p>
<ha-slider
labeled
min="10"
max="30"
.value=${this.current}
@change=${this._currentChanged}
pin
></ha-slider>
<p>${this.current} °C</p>
</div>

View File

@ -57,8 +57,8 @@ export class DemoHaHsColorPicker extends LitElement {
></ha-hs-color-picker>
<p>Hue : ${this.value[0]}</p>
<ha-slider
labeled
step="1"
pin
min="0"
max="360"
.value=${this.value[0]}
@ -67,8 +67,8 @@ export class DemoHaHsColorPicker extends LitElement {
</ha-slider>
<p>Saturation : ${this.value[1]}</p>
<ha-slider
labeled
step="0.01"
pin
min="0"
max="1"
.value=${this.value[1]}
@ -77,8 +77,8 @@ export class DemoHaHsColorPicker extends LitElement {
</ha-slider>
<p>Color Brighness : ${this.brightness}</p>
<ha-slider
labeled
step="1"
pin
min="0"
max="255"
.value=${this.brightness}

View File

@ -71,7 +71,6 @@
"@material/mwc-radio": "0.27.0",
"@material/mwc-ripple": "0.27.0",
"@material/mwc-select": "0.27.0",
"@material/mwc-slider": "0.27.0",
"@material/mwc-switch": "0.27.0",
"@material/mwc-tab": "0.27.0",
"@material/mwc-tab-bar": "0.27.0",
@ -89,7 +88,6 @@
"@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-tabs": "3.1.0",
"@polymer/paper-toast": "3.0.1",
"@polymer/polymer": "3.5.1",

View File

@ -57,8 +57,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
`
: ""}
<ha-slider
pin
ignore-bar-touch
labeled
.value=${this._value}
.min=${this.schema.valueMin}
.max=${this.schema.valueMax}

View File

@ -1,90 +0,0 @@
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "./ha-icon";
import "./ha-slider";
class HaLabeledSlider extends PolymerElement {
static get template() {
return html`
<style>
:host {
display: block;
}
.title {
margin: 5px 0 8px;
color: var(--primary-text-color);
}
.slider-container {
display: flex;
}
ha-icon {
margin-top: 4px;
color: var(--secondary-text-color);
}
ha-slider {
flex-grow: 1;
background-image: var(--ha-slider-background);
border-radius: 4px;
}
</style>
<div class="title">[[_getTitle()]]</div>
<div class="extra-container"><slot name="extra"></slot></div>
<div class="slider-container">
<ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
<ha-slider
min="[[min]]"
max="[[max]]"
step="[[step]]"
pin="[[pin]]"
disabled="[[disabled]]"
value="{{value}}"
></ha-slider>
</div>
<template is="dom-if" if="[[helper]]">
<ha-input-helper-text>[[helper]]</ha-input-helper-text>
</template>
`;
}
_getTitle() {
return `${this.caption}${this.caption && this.required ? " *" : ""}`;
}
static get properties() {
return {
caption: String,
disabled: Boolean,
required: Boolean,
min: Number,
max: Number,
pin: Boolean,
step: Number,
helper: String,
extra: {
type: Boolean,
value: false,
},
ignoreBarTouch: {
type: Boolean,
value: true,
},
icon: {
type: String,
value: "",
},
value: {
type: Number,
notify: true,
},
};
}
}
customElements.define("ha-labeled-slider", HaLabeledSlider);

View File

@ -0,0 +1,96 @@
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import "./ha-icon";
import "./ha-slider";
import { fireEvent } from "../common/dom/fire_event";
@customElement("ha-labeled-slider")
class HaLabeledSlider extends LitElement {
@property() public labeled? = false;
@property() public caption?: string;
@property() public disabled?: boolean;
@property() public required?: boolean;
@property() public min: number = 0;
@property() public max: number = 100;
@property() public step: number = 1;
@property() public helper?: string;
@property() public extra = false;
@property() public icon?: string;
@property() public value?: number;
protected render() {
return html`
<div class="title">${this._getTitle()}</div>
<div class="extra-container"><slot name="extra"></slot></div>
<div class="slider-container">
${this.icon ? html`<ha-icon icon=${this.icon}></ha-icon>` : nothing}
<ha-slider
.min=${this.min}
.max=${this.max}
.step=${this.step}
labeled=${this.labeled}
.disabled=${this.disabled}
.value=${this.value}
@change=${this._inputChanged}
></ha-slider>
</div>
${this.helper
? html`<ha-input-helper-text> ${this.helper} </ha-input-helper-text>`
: nothing}
`;
}
private _getTitle(): string {
return `${this.caption}${this.caption && this.required ? " *" : ""}`;
}
private _inputChanged(ev) {
fireEvent(this, "value-changed", {
value: Number((ev.target as any).value),
});
}
static get styles(): CSSResultGroup {
return css`
:host {
display: block;
}
.title {
margin: 5px 0 8px;
color: var(--primary-text-color);
}
.slider-container {
display: flex;
}
ha-icon {
margin-top: 8px;
color: var(--secondary-text-color);
}
ha-slider {
flex-grow: 1;
background-image: var(--ha-slider-background);
border-radius: 4px;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-labeled-slider": HaLabeledSlider;
}
}

View File

@ -24,7 +24,7 @@ export class HaColorTempSelector extends LitElement {
protected render() {
return html`
<ha-labeled-slider
pin
labeled
icon="hass:thermometer"
.caption=${this.label || ""}
.min=${this.selector.color_temp?.min_mireds ?? 153}
@ -33,27 +33,25 @@ export class HaColorTempSelector extends LitElement {
.disabled=${this.disabled}
.helper=${this.helper}
.required=${this.required}
@change=${this._valueChanged}
@value-changed=${this._valueChanged}
></ha-labeled-slider>
`;
}
private _valueChanged(ev: CustomEvent) {
fireEvent(this, "value-changed", {
value: Number((ev.target as any).value),
value: Number((ev.detail as any).value),
});
}
static styles = css`
ha-labeled-slider {
--ha-slider-background: -webkit-linear-gradient(
var(--float-end),
--ha-slider-background: linear-gradient(
to var(--float-end),
rgb(255, 160, 0) 0%,
white 50%,
rgb(166, 209, 255) 100%
);
/* The color temp minimum value shouldn't be rendered differently. It's not "off". */
--paper-slider-knob-start-border-color: var(--primary-color);
}
`;
}

View File

@ -48,6 +48,7 @@ export class HaNumberSelector extends LitElement {
? html`${this.label}${this.required ? "*" : ""}`
: ""}
<ha-slider
labeled
.min=${this.selector.number?.min}
.max=${this.selector.number?.max}
.value=${this.value ?? ""}
@ -56,8 +57,6 @@ export class HaNumberSelector extends LitElement {
: this.selector.number?.step ?? 1}
.disabled=${this.disabled}
.required=${this.required}
pin
ignore-bar-touch
@change=${this._handleSliderChange}
>
</ha-slider>

View File

@ -1,117 +0,0 @@
import "@polymer/paper-slider";
const PaperSliderClass = customElements.get("paper-slider");
let subTemplate;
export class HaSlider extends PaperSliderClass {
static get template() {
if (!subTemplate) {
subTemplate = PaperSliderClass.template.cloneNode(true);
const superStyle = subTemplate.content.querySelector("style");
// append style to add mirroring of pin in RTL
superStyle.appendChild(
document.createTextNode(`
:host([dir="rtl"]) #sliderContainer.pin.expand > .slider-knob > .slider-knob-inner::after {
-webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important;
transform: scale(1) translate(0, -17px) scaleX(-1) !important;
}
.pin > .slider-knob > .slider-knob-inner {
font-size: var(--ha-slider-pin-font-size, 15px);
line-height: normal;
cursor: pointer;
}
.disabled.ring > .slider-knob > .slider-knob-inner {
background-color: var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
border: 2px solid var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
}
.pin > .slider-knob > .slider-knob-inner::before {
top: unset;
margin-left: unset;
bottom: calc(15px + var(--calculated-paper-slider-height)/2);
left: 50%;
width: 2.6em;
height: 2.6em;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-45deg) scale(0) translate(0);
transform: rotate(-45deg) scale(0) translate(0);
}
.pin.expand > .slider-knob > .slider-knob-inner::before {
-webkit-transform: rotate(-45deg) scale(1) translate(7px, -7px);
transform: rotate(-45deg) scale(1) translate(7px, -7px);
}
.pin > .slider-knob > .slider-knob-inner::after {
top: unset;
font-size: unset;
bottom: calc(15px + var(--calculated-paper-slider-height)/2);
left: 50%;
margin-left: -1.3em;
width: 2.6em;
height: 2.5em;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: scale(0) translate(0);
transform: scale(0) translate(0);
}
.pin.expand > .slider-knob > .slider-knob-inner::after {
-webkit-transform: scale(1) translate(0, -10px);
transform: scale(1) translate(0, -10px);
}
.slider-input {
width: 54px;
}
`)
);
}
return subTemplate;
}
_setImmediateValue(newImmediateValue) {
super._setImmediateValue(
this.step >= 1
? Math.round(newImmediateValue)
: Math.round(newImmediateValue * 100) / 100
);
}
_calcStep(value) {
if (!this.step) {
return parseFloat(value);
}
const numSteps = Math.round((value - this.min) / this.step);
const stepStr = this.step.toString();
const stepPointAt = stepStr.indexOf(".");
if (stepPointAt !== -1) {
/**
* For small values of this.step, if we calculate the step using
* For non-integer values of this.step, if we calculate the step using
* `Math.round(value / step) * step` we may hit a precision point issue
* eg. 0.1 * 0.2 = 0.020000000000000004
* http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html
*
* as a work around we can round with the decimal precision of `step`
*/
const precision = 10 ** (stepStr.length - stepPointAt - 1);
return (
Math.round((numSteps * this.step + this.min) * precision) / precision
);
}
return numSteps * this.step + this.min;
}
}
customElements.define("ha-slider", HaSlider);

View File

@ -0,0 +1,26 @@
import { customElement } from "lit/decorators";
import { MdSlider } from "@material/web/slider/slider";
import { CSSResult, css } from "lit";
@customElement("ha-slider")
export class HaSlider extends MdSlider {
static override styles: CSSResult[] = [
...MdSlider.styles,
css`
:host {
--md-sys-color-primary: var(--primary-color);
--md-sys-color-outline: var(--outline-color);
min-width: 100px;
min-inline-size: 100px;
width: 200px;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-slider": HaSlider;
}
}

View File

@ -115,46 +115,50 @@ class LightRgbColorPicker extends LitElement {
</div>
${supportsRgbw || supportsRgbww
? html`<ha-labeled-slider
labeled
.caption=${this.hass.localize("ui.card.light.color_brightness")}
icon="hass:brightness-7"
min="0"
max="100"
.value=${this._colorBrightnessSliderValue}
@change=${this._colorBrightnessSliderChanged}
pin
@value-changed=${this._colorBrightnessSliderChanged}
></ha-labeled-slider>`
: nothing}
${supportsRgbw
? html`
<ha-labeled-slider
labeled
.caption=${this.hass.localize("ui.card.light.white_value")}
icon="hass:file-word-box"
min="0"
max="100"
.name=${"wv"}
.value=${this._wvSliderValue}
@change=${this._wvSliderChanged}
pin
@value-changed=${this._wvSliderChanged}
></ha-labeled-slider>
`
: nothing}
${supportsRgbww
? html`
<ha-labeled-slider
labeled
.caption=${this.hass.localize("ui.card.light.cold_white_value")}
icon="hass:file-word-box-outline"
min="0"
max="100"
.name=${"cw"}
.value=${this._cwSliderValue}
@change=${this._wvSliderChanged}
pin
@value-changed=${this._wvSliderChanged}
></ha-labeled-slider>
<ha-labeled-slider
labeled
.caption=${this.hass.localize("ui.card.light.warm_white_value")}
icon="hass:file-word-box"
min="0"
max="100"
.name=${"ww"}
.value=${this._wwSliderValue}
@change=${this._wvSliderChanged}
pin
@value-changed=${this._wvSliderChanged}
></ha-labeled-slider>
`
: nothing}
@ -302,9 +306,9 @@ class LightRgbColorPicker extends LitElement {
}
private _wvSliderChanged(ev: CustomEvent) {
const target = ev.target as any;
const target = ev.detail as any;
let wv = Number(target.value);
const name = target.name;
const name = (ev.target as any).name;
if (isNaN(wv)) {
return;
@ -351,7 +355,7 @@ class LightRgbColorPicker extends LitElement {
}
private _colorBrightnessSliderChanged(ev: CustomEvent) {
const target = ev.target as any;
const target = ev.detail as any;
let value = Number(target.value);
if (isNaN(value)) {

View File

@ -128,9 +128,8 @@ class MoreInfoMediaPlayer extends LitElement {
${supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET)
? html`
<ha-slider
labeled
id="input"
pin
ignore-bar-touch
.dir=${computeRTLDirection(this.hass!)}
.value=${Number(stateObj.attributes.volume_level) * 100}
@change=${this._selectedValueChanged}
@ -283,8 +282,7 @@ class MoreInfoMediaPlayer extends LitElement {
private _selectedValueChanged(e: Event): void {
this.hass!.callService("media_player", "volume_set", {
entity_id: this.stateObj!.entity_id,
volume_level:
Number((e.currentTarget! as HTMLElement).getAttribute("value")!) / 100,
volume_level: (e.target as any).value / 100,
});
}

View File

@ -85,15 +85,14 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
? html`
<div class="flex">
<ha-slider
.disabled=${isUnavailableState(stateObj.state)}
labeled
.dir=${computeRTLDirection(this.hass)}
.disabled=${isUnavailableState(stateObj.state)}
.step=${Number(stateObj.attributes.step)}
.min=${Number(stateObj.attributes.min)}
.max=${Number(stateObj.attributes.max)}
.value=${stateObj.state}
pin
@change=${this._selectedValueChanged}
ignore-bar-touch
></ha-slider>
<span class="state">
${this.hass.formatEntityState(stateObj)}

View File

@ -252,11 +252,10 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET)
? html`
<ha-slider
labeled
.dir=${computeRTLDirection(this.hass!)}
.value=${Number(stateObj.attributes.volume_level) * 100}
pin
@change=${this._selectedValueChanged}
ignore-bar-touch
id="input"
></ha-slider>
`

View File

@ -89,15 +89,14 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
? html`
<div class="flex">
<ha-slider
labeled
.disabled=${stateObj.state === UNAVAILABLE}
.dir=${computeRTLDirection(this.hass)}
.step=${Number(stateObj.attributes.step)}
.min=${Number(stateObj.attributes.min)}
.max=${Number(stateObj.attributes.max)}
.value=${Number(stateObj.state)}
pin
@change=${this._selectedValueChanged}
ignore-bar-touch
></ha-slider>
<span class="state">
${this.hass.formatEntityState(stateObj)}

View File

@ -293,6 +293,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
.path=${mdiVolumeHigh}
></ha-icon-button>
<ha-slider
labeled
min="0"
max="100"
step="1"

View File

@ -47,7 +47,7 @@ documentContainer.innerHTML = `<custom-style>
--primary-background-color: #fafafa;
--secondary-background-color: #e5e5e5; /* behind the cards on state */
--clear-background-color: #ffffff;
/* for header */
--header-height: 56px;
@ -418,6 +418,11 @@ documentContainer.innerHTML = `<custom-style>
line-height: 20px;
};
direction: ltr;
--direction: ltr;
--float-start: left;
--float-end: right;
${Object.entries(derivedStyles)
.map(([key, value]) => `--${key}: ${value};`)
.join("")}

View File

@ -79,13 +79,6 @@ export const derivedStyles = {
"table-header-background-color": "var(--input-fill-color)",
"table-row-background-color": "var(--primary-background-color)",
"table-row-alternative-background-color": "var(--secondary-background-color)",
"paper-slider-knob-color": "var(--slider-color)",
"paper-slider-knob-start-color": "var(--slider-color)",
"paper-slider-pin-color": "var(--slider-color)",
"paper-slider-pin-start-color": "var(--slider-color)",
"paper-slider-active-color": "var(--slider-color)",
"paper-slider-secondary-color": "var(--slider-secondary-color)",
"paper-slider-container-color": "var(--slider-track-color)",
"data-table-background-color": "var(--card-background-color)",
"markdown-code-background-color": "var(--primary-background-color)",

View File

@ -57,15 +57,14 @@ class StateCardInputNumber extends LitElement {
? html`
<div class="flex">
<ha-slider
.disabled=${isUnavailableState(this.stateObj.state)}
labeled
.dir=${computeRTLDirection(this.hass)}
.disabled=${isUnavailableState(this.stateObj.state)}
.step=${Number(this.stateObj.attributes.step)}
.min=${Number(this.stateObj.attributes.min)}
.max=${Number(this.stateObj.attributes.max)}
.value=${this.stateObj.state}
pin
@change=${this._selectedValueChanged}
ignore-bar-touch
></ha-slider>
<span class="state">
${this.hass.formatEntityState(this.stateObj)}

View File

@ -18,6 +18,7 @@ class StateCardNumber extends mixinBehaviors(
<style>
ha-slider {
margin-left: auto;
flex-grow: 1;
}
.state {
@apply --paper-font-body1;
@ -42,16 +43,15 @@ class StateCardNumber extends mixinBehaviors(
<div class="horizontal justified layout" id="number_card">
${this.stateInfoTemplate}
<ha-slider
labeled
min="[[min]]"
max="[[max]]"
value="{{value}}"
step="[[step]]"
hidden="[[hiddenslider]]"
pin
on-change="selectedValueChanged"
on-click="stopPropagation"
id="slider"
ignore-bar-touch=""
>
</ha-slider>
<ha-textfield
@ -183,12 +183,12 @@ class StateCardNumber extends mixinBehaviors(
this.value = ev.target.value;
}
selectedValueChanged() {
if (this.value === Number(this.stateObj.state)) {
selectedValueChanged(ev) {
if (ev.target.value === Number(this.stateObj.state)) {
return;
}
this.hass.callService("number", "set_value", {
value: this.value,
value: ev.target.value,
entity_id: this.stateObj.entity_id,
});
}

View File

@ -2748,20 +2748,6 @@ __metadata:
languageName: node
linkType: hard
"@material/mwc-slider@npm:0.27.0":
version: 0.27.0
resolution: "@material/mwc-slider@npm:0.27.0"
dependencies:
"@material/dom": =14.0.0-canary.53b3cad2f.0
"@material/mwc-base": ^0.27.0
"@material/mwc-ripple": ^0.27.0
"@material/slider": =14.0.0-canary.53b3cad2f.0
lit: ^2.0.0
tslib: ^2.0.1
checksum: 0e7f9d0d418731fb9ba1ffe99cc88e79a4116e92d048476dc24fa87688f13335945fcdc9fef6d6f699e0c6b16fea5ed7527f71193bcf1365177e7ba7a865b140
languageName: node
linkType: hard
"@material/mwc-switch@npm:0.27.0":
version: 0.27.0
resolution: "@material/mwc-switch@npm:0.27.0"
@ -2988,24 +2974,6 @@ __metadata:
languageName: node
linkType: hard
"@material/slider@npm:=14.0.0-canary.53b3cad2f.0":
version: 14.0.0-canary.53b3cad2f.0
resolution: "@material/slider@npm:14.0.0-canary.53b3cad2f.0"
dependencies:
"@material/animation": 14.0.0-canary.53b3cad2f.0
"@material/base": 14.0.0-canary.53b3cad2f.0
"@material/dom": 14.0.0-canary.53b3cad2f.0
"@material/elevation": 14.0.0-canary.53b3cad2f.0
"@material/feature-targeting": 14.0.0-canary.53b3cad2f.0
"@material/ripple": 14.0.0-canary.53b3cad2f.0
"@material/rtl": 14.0.0-canary.53b3cad2f.0
"@material/theme": 14.0.0-canary.53b3cad2f.0
"@material/typography": 14.0.0-canary.53b3cad2f.0
tslib: ^2.1.0
checksum: 136d6c6f77e4fa586ac375b5a108be06a394f0c55fbb10e73eaa990cd6cb38d2787e278911705571b5336402690e0b88b5fe9de9916704db948247a6b6b0c1fb
languageName: node
linkType: hard
"@material/switch@npm:=14.0.0-canary.53b3cad2f.0":
version: 14.0.0-canary.53b3cad2f.0
resolution: "@material/switch@npm:14.0.0-canary.53b3cad2f.0"
@ -3600,15 +3568,6 @@ __metadata:
languageName: node
linkType: hard
"@polymer/iron-range-behavior@npm:^3.0.0-pre.26":
version: 3.0.1
resolution: "@polymer/iron-range-behavior@npm:3.0.1"
dependencies:
"@polymer/polymer": ^3.0.0
checksum: da2405650bccc2071bebfd30f379e92d930bd95d306e2626da9d92a07b849f0e5cdc08430bfb03a6ae8f5644ab9364ff64252892da1b1ddc01d2f5f1f026e808
languageName: node
linkType: hard
"@polymer/iron-resizable-behavior@npm:3.0.1, @polymer/iron-resizable-behavior@npm:^3.0.0-pre.26":
version: 3.0.1
resolution: "@polymer/iron-resizable-behavior@npm:3.0.1"
@ -3661,7 +3620,7 @@ __metadata:
languageName: node
linkType: hard
"@polymer/paper-input@npm:3.2.1, @polymer/paper-input@npm:^3.0.0-pre.26":
"@polymer/paper-input@npm:3.2.1":
version: 3.2.1
resolution: "@polymer/paper-input@npm:3.2.1"
dependencies:
@ -3700,18 +3659,6 @@ __metadata:
languageName: node
linkType: hard
"@polymer/paper-progress@npm:^3.0.0-pre.26":
version: 3.0.1
resolution: "@polymer/paper-progress@npm:3.0.1"
dependencies:
"@polymer/iron-flex-layout": ^3.0.0-pre.26
"@polymer/iron-range-behavior": ^3.0.0-pre.26
"@polymer/paper-styles": ^3.0.0-pre.26
"@polymer/polymer": ^3.0.0
checksum: 5ae0ce84d05ed777c40c27c82559cedc44f1b4ed523a675932cce4a4d6a82f772ee414b21c67db528ea316686c1ed84b53e1850bbb3a6f5c3964339e2c20289b
languageName: node
linkType: hard
"@polymer/paper-ripple@npm:^3.0.0-pre.26":
version: 3.0.2
resolution: "@polymer/paper-ripple@npm:3.0.2"
@ -3722,23 +3669,6 @@ __metadata:
languageName: node
linkType: hard
"@polymer/paper-slider@npm:3.0.1":
version: 3.0.1
resolution: "@polymer/paper-slider@npm:3.0.1"
dependencies:
"@polymer/iron-a11y-keys-behavior": ^3.0.0-pre.26
"@polymer/iron-behaviors": ^3.0.0-pre.26
"@polymer/iron-flex-layout": ^3.0.0-pre.26
"@polymer/iron-form-element-behavior": ^3.0.0-pre.26
"@polymer/paper-behaviors": ^3.0.0-pre.27
"@polymer/paper-input": ^3.0.0-pre.26
"@polymer/paper-progress": ^3.0.0-pre.26
"@polymer/paper-styles": ^3.0.0-pre.26
"@polymer/polymer": ^3.0.0
checksum: ab915606df8150f77ad9e03c845ce5f600882cd7c0b3bb6a6ea77816ee1b40d01d5b3f72f0d8df6ce5e46fa9f0335d3930c8cc46a23cf8d8dfdbc0aeb9c181a4
languageName: node
linkType: hard
"@polymer/paper-styles@npm:^3.0.0-pre.26":
version: 3.0.1
resolution: "@polymer/paper-styles@npm:3.0.1"
@ -9690,7 +9620,6 @@ __metadata:
"@material/mwc-radio": 0.27.0
"@material/mwc-ripple": 0.27.0
"@material/mwc-select": 0.27.0
"@material/mwc-slider": 0.27.0
"@material/mwc-switch": 0.27.0
"@material/mwc-tab": 0.27.0
"@material/mwc-tab-bar": 0.27.0
@ -9712,7 +9641,6 @@ __metadata:
"@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-tabs": 3.1.0
"@polymer/paper-toast": 3.0.1
"@polymer/polymer": 3.5.1