mirror of
https://github.com/home-assistant/frontend.git
synced 2025-11-08 18:39:40 +00:00
Add target temperature tile feature for climate and water heater (#17697)
This commit is contained in:
Paul Bottein
258
src/components/ha-control-number-buttons.ts
Normal file
258
src/components/ha-control-number-buttons.ts
Normal file
@@ -0,0 +1,258 @@
|
||||
import { mdiMinus, mdiPlus } from "@mdi/js";
|
||||
import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
|
||||
import { customElement, property, query } from "lit/decorators";
|
||||
import { ifDefined } from "lit/directives/if-defined";
|
||||
import { conditionalClamp } from "../common/number/clamp";
|
||||
import { formatNumber } from "../common/number/format_number";
|
||||
import { FrontendLocaleData } from "../data/translation";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
|
||||
const A11Y_KEY_CODES = new Set([
|
||||
"ArrowRight",
|
||||
"ArrowUp",
|
||||
"ArrowLeft",
|
||||
"ArrowDown",
|
||||
"PageUp",
|
||||
"PageDown",
|
||||
"Home",
|
||||
"End",
|
||||
]);
|
||||
|
||||
@customElement("ha-control-number-buttons")
|
||||
export class HaControlNumberButton extends LitElement {
|
||||
@property({ attribute: false }) public locale?: FrontendLocaleData;
|
||||
|
||||
@property({ type: Boolean, reflect: true }) disabled = false;
|
||||
|
||||
@property() public label?: string;
|
||||
|
||||
@property({ type: Number }) public step?: number;
|
||||
|
||||
@property({ type: Number }) public value?: number;
|
||||
|
||||
@property({ type: Number }) public min?: number;
|
||||
|
||||
@property({ type: Number }) public max?: number;
|
||||
|
||||
@property({ attribute: "false" })
|
||||
public formatOptions: Intl.NumberFormatOptions = {};
|
||||
|
||||
@query("#input") _input!: HTMLDivElement;
|
||||
|
||||
private boundedValue(value: number) {
|
||||
const clamped = conditionalClamp(value, this.min, this.max);
|
||||
return Math.round(clamped / this._step) * this._step;
|
||||
}
|
||||
|
||||
private get _step() {
|
||||
return this.step ?? 1;
|
||||
}
|
||||
|
||||
private get _value() {
|
||||
return this.value ?? 0;
|
||||
}
|
||||
|
||||
private get _tenPercentStep() {
|
||||
if (this.max == null || this.min == null) return this._step;
|
||||
const range = this.max - this.min / 10;
|
||||
|
||||
if (range <= this._step) return this._step;
|
||||
return Math.max(range / 10);
|
||||
}
|
||||
|
||||
private _handlePlusButton() {
|
||||
this._increment();
|
||||
fireEvent(this, "value-changed", { value: this.value });
|
||||
this._input.focus();
|
||||
}
|
||||
|
||||
private _handleMinusButton() {
|
||||
this._decrement();
|
||||
fireEvent(this, "value-changed", { value: this.value });
|
||||
this._input.focus();
|
||||
}
|
||||
|
||||
private _increment() {
|
||||
this.value = this.boundedValue(this._value + this._step);
|
||||
}
|
||||
|
||||
private _decrement() {
|
||||
this.value = this.boundedValue(this._value - this._step);
|
||||
}
|
||||
|
||||
_handleKeyDown(e: KeyboardEvent) {
|
||||
if (!A11Y_KEY_CODES.has(e.code)) return;
|
||||
e.preventDefault();
|
||||
switch (e.code) {
|
||||
case "ArrowRight":
|
||||
case "ArrowUp":
|
||||
this._increment();
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
case "ArrowDown":
|
||||
this._decrement();
|
||||
break;
|
||||
case "PageUp":
|
||||
this.value = this.boundedValue(this._value + this._tenPercentStep);
|
||||
break;
|
||||
case "PageDown":
|
||||
this.value = this.boundedValue(this._value - this._tenPercentStep);
|
||||
break;
|
||||
case "Home":
|
||||
if (this.min != null) {
|
||||
this.value = this.min;
|
||||
}
|
||||
break;
|
||||
case "End":
|
||||
if (this.max != null) {
|
||||
this.value = this.max;
|
||||
}
|
||||
break;
|
||||
}
|
||||
fireEvent(this, "value-changed", { value: this.value });
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
const displayedValue =
|
||||
this.value != null
|
||||
? formatNumber(this.value, this.locale, this.formatOptions)
|
||||
: "-";
|
||||
|
||||
return html`
|
||||
<div class="container">
|
||||
<div
|
||||
id="input"
|
||||
class="value"
|
||||
role="number-button"
|
||||
tabindex="0"
|
||||
aria-valuenow=${this.value}
|
||||
aria-valuemin=${this.min}
|
||||
aria-valuemax=${this.max}
|
||||
aria-label=${ifDefined(this.label)}
|
||||
.disabled=${this.disabled}
|
||||
@keydown=${this._handleKeyDown}
|
||||
>
|
||||
${displayedValue}
|
||||
</div>
|
||||
<button
|
||||
class="button minus"
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
aria-label="decrement"
|
||||
@click=${this._handleMinusButton}
|
||||
.disabled=${this.disabled ||
|
||||
(this.min != null && this._value <= this.min)}
|
||||
>
|
||||
<ha-svg-icon aria-hidden .path=${mdiMinus}></ha-svg-icon>
|
||||
</button>
|
||||
<button
|
||||
class="button plus"
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
aria-label="increment"
|
||||
@click=${this._handlePlusButton}
|
||||
.disabled=${this.disabled ||
|
||||
(this.max != null && this._value >= this.max)}
|
||||
>
|
||||
<ha-svg-icon aria-hidden .path=${mdiPlus}></ha-svg-icon>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
--control-number-buttons-focus-color: var(--primary-color);
|
||||
--control-number-buttons-background-color: var(--disabled-color);
|
||||
--control-number-buttons-background-opacity: 0.2;
|
||||
--control-number-buttons-border-radius: 10px;
|
||||
--mdc-icon-size: 16px;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
color: var(--primary-text-color);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
transition: color 180ms ease-in-out;
|
||||
}
|
||||
:host([disabled]) {
|
||||
color: var(--disabled-color);
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 44px;
|
||||
border-radius: var(--control-number-buttons-border-radius);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
line-height: 0;
|
||||
overflow: hidden;
|
||||
/* For safari border-radius overflow */
|
||||
z-index: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
.value::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--control-number-buttons-background-color);
|
||||
transition:
|
||||
background-color 180ms ease-in-out,
|
||||
opacity 180ms ease-in-out;
|
||||
opacity: var(--control-number-buttons-background-opacity);
|
||||
}
|
||||
.value:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--control-number-buttons-focus-color);
|
||||
}
|
||||
.button {
|
||||
color: inherit;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
width: 35px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
.button[disabled] {
|
||||
opacity: 0.4;
|
||||
pointer-events: none;
|
||||
}
|
||||
.button.minus {
|
||||
left: 0;
|
||||
}
|
||||
.button.plus {
|
||||
right: 0;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-control-number-buttons": HaControlNumberButton;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user