@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
25 lines (21 loc) • 15.7 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { r as registerInstance, c as createEvent, h } from './index-C4h1muVj.js';
const twoPosControllerCss = "slot-fb[hidden],slot[hidden]{display:initial !important}.thermostat-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:2rem 1rem 1rem;gap:1.5rem}.temp-display{position:relative;width:100%;max-width:340px;height:200px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin:0 auto;gap:1rem}.temp-ring{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:200px;height:200px;border-radius:50%;background:linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.03) 100%);-webkit-box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 8px 32px -8px rgba(0, 0, 0, 0.15);box-shadow:inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 8px 32px -8px rgba(0, 0, 0, 0.15);-webkit-transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1)}.temp-ring::before{content:\"\";position:absolute;inset:12px;border-radius:50%;background:var(--lar-background-color, #000);-webkit-box-shadow:0 4px 16px -4px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.1);box-shadow:0 4px 16px -4px rgba(0, 0, 0, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.1)}.temp-content{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:2;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:0.3rem}.temp-value{font-size:4rem;font-weight:700;line-height:1;letter-spacing:-0.03em;text-shadow:0 2px 4px rgba(0, 0, 0, 0.1), 0 0 1px rgba(255, 255, 255, 0.1);-webkit-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.temp-label{font-size:0.85rem;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;opacity:0.6}.temp-controls{position:relative;z-index:3;display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}.temp-controls lar-button{width:3.5rem;height:3.5rem;border-radius:50%;font-size:1.8rem;font-weight:400;-webkit-box-shadow:0 4px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);box-shadow:0 4px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.temp-controls lar-button:active{-webkit-transform:scale(0.92);transform:scale(0.92)}lar-button-group{display:-ms-flexbox;display:flex;gap:0.5rem;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;max-width:400px;padding:0.4rem;background:rgba(0, 0, 0, 0.03);border-radius:0.8rem;-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(255, 255, 255, 0.5)}lar-button-group lar-button{-ms-flex:1;flex:1;min-height:3rem;font-weight:600;font-size:0.95rem;text-transform:uppercase;letter-spacing:0.05em;border-radius:0.5rem;-webkit-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);-webkit-box-shadow:0 2px 8px -2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px -2px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1)}lar-button-group lar-button:active{-webkit-transform:scale(0.97);transform:scale(0.97)}lar-button-group.setpoint{background:transparent;-webkit-box-shadow:none;box-shadow:none;padding:0;max-width:none}.value{padding:var(--lar-button-padding-top, 1rem) var(--lar-button-padding-right, 1rem) var(--lar-button-padding-bottom, 1rem) var(--lar-button-padding-left, 1rem);background-color:var(--lar-background-color-step-150, rgb(38.25, 38.25, 38.25));font-size:var(--lar-button-font-size, 1.2rem);width:25%;display:inline-block;color:var(--lar-text-color, #fff);text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden !important}.lar-color-primary .temp-ring{background:linear-gradient(135deg, rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.08) 0%, rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0) 50%, rgba(0, 0, 0, 0.03) 100%);-webkit-box-shadow:inset 0 0 0 3px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15);box-shadow:inset 0 0 0 3px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15)}.lar-color-primary .temp-value{color:var(--lar-color-primary, #780bb7);text-shadow:0 2px 4px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.2), 0 0 2px rgba(var(--lar-color-primary-rgb, 120, 11, 183), 0.1)}.lar-color-secondary .temp-ring{background:linear-gradient(135deg, rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.08) 0%, rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0) 50%, rgba(0, 0, 0, 0.03) 100%);-webkit-box-shadow:inset 0 0 0 3px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15);box-shadow:inset 0 0 0 3px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15)}.lar-color-secondary .temp-value{color:var(--lar-color-secondary, #7fb800);text-shadow:0 2px 4px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.2), 0 0 2px rgba(var(--lar-color-secondary-rgb, 127, 184, 0), 0.1)}.lar-color-tertiary .temp-ring{background:linear-gradient(135deg, rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.08) 0%, rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0) 50%, rgba(0, 0, 0, 0.03) 100%);-webkit-box-shadow:inset 0 0 0 3px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15);box-shadow:inset 0 0 0 3px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15)}.lar-color-tertiary .temp-value{color:var(--lar-color-tertiary, #00a6ed);text-shadow:0 2px 4px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.2), 0 0 2px rgba(var(--lar-color-tertiary-rgb, 0, 166, 237), 0.1)}.lar-color-success .temp-ring{background:linear-gradient(135deg, rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.08) 0%, rgba(var(--lar-color-success-rgb, 127, 184, 0), 0) 50%, rgba(0, 0, 0, 0.03) 100%);-webkit-box-shadow:inset 0 0 0 3px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15);box-shadow:inset 0 0 0 3px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15)}.lar-color-success .temp-value{color:var(--lar-color-success, #7fb800);text-shadow:0 2px 4px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.2), 0 0 2px rgba(var(--lar-color-success-rgb, 127, 184, 0), 0.1)}.lar-color-warning .temp-ring{background:linear-gradient(135deg, rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.08) 0%, rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0) 50%, rgba(0, 0, 0, 0.03) 100%);-webkit-box-shadow:inset 0 0 0 3px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15);box-shadow:inset 0 0 0 3px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15)}.lar-color-warning .temp-value{color:var(--lar-color-warning, #ffb400);text-shadow:0 2px 4px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.2), 0 0 2px rgba(var(--lar-color-warning-rgb, 255, 180, 0), 0.1)}.lar-color-danger .temp-ring{background:linear-gradient(135deg, rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.08) 0%, rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0) 50%, rgba(0, 0, 0, 0.03) 100%);-webkit-box-shadow:inset 0 0 0 3px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15);box-shadow:inset 0 0 0 3px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15)}.lar-color-danger .temp-value{color:var(--lar-color-danger, #f6511d);text-shadow:0 2px 4px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.2), 0 0 2px rgba(var(--lar-color-danger-rgb, 246, 81, 29), 0.1)}.lar-color-light .temp-ring{background:linear-gradient(135deg, rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.08) 0%, rgba(var(--lar-color-light-rgb, 244, 245, 248), 0) 50%, rgba(0, 0, 0, 0.03) 100%);-webkit-box-shadow:inset 0 0 0 3px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15);box-shadow:inset 0 0 0 3px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15)}.lar-color-light .temp-value{color:var(--lar-color-light, #f4f5f8);text-shadow:0 2px 4px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.2), 0 0 2px rgba(var(--lar-color-light-rgb, 244, 245, 248), 0.1)}.lar-color-medium .temp-ring{background:linear-gradient(135deg, rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.08) 0%, rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0) 50%, rgba(0, 0, 0, 0.03) 100%);-webkit-box-shadow:inset 0 0 0 3px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15);box-shadow:inset 0 0 0 3px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15)}.lar-color-medium .temp-value{color:var(--lar-color-medium, #d6d6d6);text-shadow:0 2px 4px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.2), 0 0 2px rgba(var(--lar-color-medium-rgb, 214, 214, 214), 0.1)}.lar-color-dark .temp-ring{background:linear-gradient(135deg, rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.08) 0%, rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0) 50%, rgba(0, 0, 0, 0.03) 100%);-webkit-box-shadow:inset 0 0 0 3px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15);box-shadow:inset 0 0 0 3px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.15), inset 0 2px 8px rgba(0, 0, 0, 0.1), inset 0 -2px 4px rgba(255, 255, 255, 0.05), 0 0 24px -8px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.2), 0 8px 32px -8px rgba(0, 0, 0, 0.15)}.lar-color-dark .temp-value{color:var(--lar-color-dark, #222428);text-shadow:0 2px 4px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.2), 0 0 2px rgba(var(--lar-color-dark-rgb, 34, 36, 40), 0.1)}";
const SlidingDoorContent = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.changemode = createEvent(this, "changemode");
this.changesetpoint = createEvent(this, "changesetpoint");
}
render() {
const secondaryButtonColor = (this.color) === 'dark' ? 'light' : 'dark';
const colorClass = this.color ? `lar-color-${this.color}` : '';
return (h("div", { key: '27edab5df8b5af8ed99268df8cf2b75c3a39834e', class: `thermostat-container ${colorClass}` }, h("div", { key: '23060d34ba7d7723efe81cbb73bc321a88a6df5f', class: "temp-display" }, h("div", { key: 'c707a787240ccb06e63f921d95088a3d8f50ce23', class: "temp-ring" }), h("div", { key: '8ce81816cb6f50013db34027229ce3fab772f53c', class: "temp-content" }, h("div", { key: 'bc995c527463dd88fc1ab38fda807aa752652d6e', class: "temp-value" }, this.setpoint), h("div", { key: 'f2a78a24f75ad6d5dbc16fb6e51e2612319a7b7a', class: "temp-label" }, h("lar-translate", { key: 'fea5cce1d206e40b717ba2309d0f89d656ecf2e3', t: "twoPosController.target" }))), h("div", { key: '2762480fb6b7492968640f2bf5398c9d89384690', class: "temp-controls" }, h("lar-button", { key: 'edc64f843c0849e2adf34b6f5f8b3886fb22ff39', disabled: (this.min && this.setpoint <= this.min) || this.disabled, color: this.color, onClick: () => this.changesetpoint.emit(false) }, "-"), h("lar-button", { key: 'daddf95af6c1387690b66a47b0e6ca8c36c2a7ef', disabled: (this.max && this.setpoint >= this.max) || this.disabled, color: this.color, onClick: () => this.changesetpoint.emit(true) }, "+"))), this.manualcontrols &&
h("lar-button-group", { key: 'a7f708ff181ec9d86119660cbc9ac70b0a7cd177' }, h("lar-button", { key: '44064cb9ad420d3a5a2a6bf639ad3fdfd662a84d', disabled: this.disabled, color: this.mode === 'on' ? this.color : secondaryButtonColor, onClick: () => this.changemode.emit('on') }, h("lar-translate", { key: '6981089f82cbcd15ea7a2ac4f8485e147c343895', t: "twoPosController.on" })), h("lar-button", { key: '1e63130fdd3163b61e0e728961e37d7f749f6de0', disabled: this.disabled, color: this.mode === 'off' ? this.color : secondaryButtonColor, onClick: () => this.changemode.emit('off') }, h("lar-translate", { key: 'b0dec73255ab6ea53d03da8844624c1c3eb38cca', t: "twoPosController.off" })), h("lar-button", { key: 'a23435bf20927c4702de8be1c7bb1c754e010146', disabled: this.disabled, color: this.mode === 'auto' ? this.color : secondaryButtonColor, onClick: () => this.changemode.emit('auto') }, h("lar-translate", { key: '5995675823453eb0ed773cb962d05f4f19c9193c', t: "twoPosController.auto" })))));
}
};
SlidingDoorContent.style = twoPosControllerCss;
export { SlidingDoorContent as two_pos_controller_content };
//# sourceMappingURL=two-pos-controller-content.entry.js.map