diff --git a/demo/src/configs/jimpower/theme.ts b/demo/src/configs/jimpower/theme.ts index 7e304eb6c6b1..246b3b22bde4 100644 --- a/demo/src/configs/jimpower/theme.ts +++ b/demo/src/configs/jimpower/theme.ts @@ -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", diff --git a/demo/src/configs/kernehed/theme.ts b/demo/src/configs/kernehed/theme.ts index ffb2f0edfe13..28433aba5de1 100644 --- a/demo/src/configs/kernehed/theme.ts +++ b/demo/src/configs/kernehed/theme.ts @@ -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", diff --git a/demo/src/configs/teachingbirds/theme.ts b/demo/src/configs/teachingbirds/theme.ts index 34687a23f104..f61654406c5d 100644 --- a/demo/src/configs/teachingbirds/theme.ts +++ b/demo/src/configs/teachingbirds/theme.ts @@ -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", diff --git a/gallery/src/pages/components/ha-control-circular-slider.ts b/gallery/src/pages/components/ha-control-circular-slider.ts index f85f210dd028..4a856fe31b15 100644 --- a/gallery/src/pages/components/ha-control-circular-slider.ts +++ b/gallery/src/pages/components/ha-control-circular-slider.ts @@ -49,11 +49,11 @@ export class DemoHaCircularSlider extends LitElement {

Current

${this.current} °C

diff --git a/gallery/src/pages/components/ha-hs-color-picker.ts b/gallery/src/pages/components/ha-hs-color-picker.ts index 53eaf2187687..7092c399e8fc 100644 --- a/gallery/src/pages/components/ha-hs-color-picker.ts +++ b/gallery/src/pages/components/ha-hs-color-picker.ts @@ -57,8 +57,8 @@ export class DemoHaHsColorPicker extends LitElement { >

Hue : ${this.value[0]}

Saturation : ${this.value[1]}

Color Brighness : ${this.brightness}

- :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; - } - - -
[[_getTitle()]]
-
-
- - -
- - `; - } - - _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); diff --git a/src/components/ha-labeled-slider.ts b/src/components/ha-labeled-slider.ts new file mode 100644 index 000000000000..366eb4f5555c --- /dev/null +++ b/src/components/ha-labeled-slider.ts @@ -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` +
${this._getTitle()}
+
+
+ ${this.icon ? html`` : nothing} + +
+ ${this.helper + ? html` ${this.helper} ` + : 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; + } +} diff --git a/src/components/ha-selector/ha-selector-color-temp.ts b/src/components/ha-selector/ha-selector-color-temp.ts index 7a99a61261d8..f896c5fc5e5b 100644 --- a/src/components/ha-selector/ha-selector-color-temp.ts +++ b/src/components/ha-selector/ha-selector-color-temp.ts @@ -24,7 +24,7 @@ export class HaColorTempSelector extends LitElement { protected render() { return html` `; } 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); } `; } diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts index 0ed0c0297108..d7242e70759e 100644 --- a/src/components/ha-selector/ha-selector-number.ts +++ b/src/components/ha-selector/ha-selector-number.ts @@ -48,6 +48,7 @@ export class HaNumberSelector extends LitElement { ? html`${this.label}${this.required ? "*" : ""}` : ""} diff --git a/src/components/ha-slider.js b/src/components/ha-slider.js deleted file mode 100644 index 11cda48db133..000000000000 --- a/src/components/ha-slider.js +++ /dev/null @@ -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); diff --git a/src/components/ha-slider.ts b/src/components/ha-slider.ts new file mode 100644 index 000000000000..5a902233e789 --- /dev/null +++ b/src/components/ha-slider.ts @@ -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; + } +} diff --git a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts index 2bf8a5b44b40..de42e5b054c5 100644 --- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts +++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts @@ -115,46 +115,50 @@ class LightRgbColorPicker extends LitElement { ${supportsRgbw || supportsRgbww ? html`` : nothing} ${supportsRgbw ? html` ` : nothing} ${supportsRgbww ? html` ` : 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)) { diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index 044745d78dd4..c779299333b8 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -128,9 +128,8 @@ class MoreInfoMediaPlayer extends LitElement { ${supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET) ? html` ${this.hass.formatEntityState(stateObj)} diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts index 36bc2bb76a39..4bb1f65cfb6c 100644 --- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts @@ -252,11 +252,10 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET) ? html` ` diff --git a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts index 83fabc5f5be8..d6f41ef34a67 100644 --- a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts @@ -89,15 +89,14 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow { ? html`
${this.hass.formatEntityState(stateObj)} diff --git a/src/panels/media-browser/ha-bar-media-player.ts b/src/panels/media-browser/ha-bar-media-player.ts index a365bb97200e..3e0b312f50d3 100644 --- a/src/panels/media-browser/ha-bar-media-player.ts +++ b/src/panels/media-browser/ha-bar-media-player.ts @@ -293,6 +293,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) { .path=${mdiVolumeHigh} > --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 = ` line-height: 20px; }; + direction: ltr; + --direction: ltr; + --float-start: left; + --float-end: right; + ${Object.entries(derivedStyles) .map(([key, value]) => `--${key}: ${value};`) .join("")} diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts index 6d60dcab7d2a..f172d9e69f29 100644 --- a/src/resources/styles-data.ts +++ b/src/resources/styles-data.ts @@ -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)", diff --git a/src/state-summary/state-card-input_number.ts b/src/state-summary/state-card-input_number.ts index 0b3d3b822f19..a389da6bd265 100644 --- a/src/state-summary/state-card-input_number.ts +++ b/src/state-summary/state-card-input_number.ts @@ -57,15 +57,14 @@ class StateCardInputNumber extends LitElement { ? html`
${this.hass.formatEntityState(this.stateObj)} diff --git a/src/state-summary/state-card-number.js b/src/state-summary/state-card-number.js index be4349be64e9..dc59854da25c 100644 --- a/src/state-summary/state-card-number.js +++ b/src/state-summary/state-card-number.js @@ -18,6 +18,7 @@ class StateCardNumber extends mixinBehaviors(