@ixfx/components 0.2.3 → 0.2.5

package/dist/led.d.ts

@@ -0,0 +1,25 @@
+import * as _$lit from "lit";
+import { LitElement } from "lit";
+
+//#region src/led.d.ts
+declare class LedElement extends LitElement {
+  #private;
+  value: number;
+  lit: boolean;
+  color: string;
+  blinking: boolean;
+  rate: number;
+  willUpdate(changedProperties: Map<string, unknown>): void;
+  updated(changedProperties: Map<string, unknown>): void;
+  disconnectedCallback(): void;
+  protected render(): _$lit.TemplateResult<1>;
+  static styles: _$lit.CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ixfx-led": LedElement;
+  }
+} //# sourceMappingURL=led.d.ts.map
+//#endregion
+export { LedElement };
+//# sourceMappingURL=led.d.ts.map

package/dist/led.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"led.d.ts","names":[],"sources":["../src/led.ts"],"mappings":";;;;cAIa,UAAA,SAAmB,UAAA;EAAA;EAE9B,KAAA;EAGA,GAAA;EAGA,KAAA;EAGA,QAAA;EAGA,IAAA;EAIA,UAAA,CAAW,iBAAA,EAAmB,GAAA;EAe9B,OAAA,CAAQ,iBAAA,EAAmB,GAAA;EAM3B,oBAAA,CAAA;EAAA,UAwBU,MAAA,CAAA,GA9BoB,KAAA,CA8Bd,cAAA;EAAA,OAIT,MAAA,EAJS,KAAA,CAIH,SAAA;AAAA;AAAA,QAqBP,MAAA;EAAA,UACI,qBAAA;IACR,UAAA,EAAY,UAAA;EAAA;AAAA"}

package/dist/led.js

@@ -0,0 +1,92 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/led.ts
+let LedElement = class LedElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = 0;
+		this.lit = false;
+		this.color = `oklch(50% 0.15 25)`;
+		this.blinking = false;
+		this.rate = 500;
+	}
+	#blinkInterval;
+	willUpdate(changedProperties) {
+		if (changedProperties.has(`value`)) this.style.setProperty(`--value`, String(this.value));
+		if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) this.#updateBlinking();
+		if (changedProperties.has(`rate`)) {
+			const transitionMs = this.rate < 300 ? this.rate * .5 : 150;
+			this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);
+		}
+	}
+	updated(changedProperties) {
+		if (changedProperties.has(`lit`)) this.value = this.lit ? 1 : 0;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#stopBlinking();
+	}
+	#updateBlinking() {
+		if (this.blinking && this.rate > 0) {
+			this.#stopBlinking();
+			this.#blinkInterval = window.setInterval(() => {
+				this.value = this.value === 0 ? 1 : 0;
+			}, this.rate);
+		} else {
+			this.#stopBlinking();
+			this.value = 0;
+		}
+	}
+	#stopBlinking() {
+		if (this.#blinkInterval !== void 0) {
+			clearInterval(this.#blinkInterval);
+			this.#blinkInterval = void 0;
+		}
+	}
+	render() {
+		return html`<div part="circle"></div>`;
+	}
+	static {
+		this.styles = css`
+    :host {
+      --_size: var(--size, 1ex);
+      display: inline-block;
+      min-width: 1ex;
+      min-height: 1ex;
+      width: var(--_size);
+      height: var(--_size);
+      vertical-align: middle;
+    }
+
+    div {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));
+      transition: background var(--transition-duration, 150ms) ease-out;
+    }
+  `;
+	}
+};
+__decorate([property({ type: Number })], LedElement.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `lit`,
+	reflect: true
+})], LedElement.prototype, "lit", void 0);
+__decorate([property({ type: String })], LedElement.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `blinking`,
+	reflect: true
+})], LedElement.prototype, "blinking", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `rate`
+})], LedElement.prototype, "rate", void 0);
+LedElement = __decorate([customElement(`ixfx-led`)], LedElement);
+//#endregion
+export { LedElement };
+
+//# sourceMappingURL=led.js.map

package/dist/led.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"led.js","names":["#updateBlinking","#stopBlinking","#blinkInterval"],"sources":["../src/led.ts"],"sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\n@customElement(`ixfx-led`)\nexport class LedElement extends LitElement {\n  @property({ type: Number })\n  value = 0;\n\n  @property({ type: Boolean, attribute: `lit`, reflect: true })\n  lit = false;\n\n  @property({ type: String })\n  color = `oklch(50% 0.15 25)`;\n\n  @property({ type: Boolean, attribute: `blinking`, reflect: true })\n  blinking = false;\n\n  @property({ type: Number, attribute: `rate` })\n  rate = 500;\n\n  #blinkInterval: number | undefined;\n\n  willUpdate(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(`value`)) {\n      this.style.setProperty(`--value`, String(this.value));\n    }\n\n    if (changedProperties.has(`blinking`) || changedProperties.has(`rate`)) {\n      this.#updateBlinking();\n    }\n\n    if (changedProperties.has(`rate`)) {\n      const transitionMs = this.rate < 300 ? this.rate * 0.5 : 150;\n      this.style.setProperty(`--transition-duration`, `${transitionMs}ms`);\n    }\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has(`lit`)) {\n      this.value = this.lit ? 1 : 0;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#stopBlinking();\n  }\n\n  #updateBlinking() {\n    if (this.blinking && this.rate > 0) {\n      this.#stopBlinking();\n      this.#blinkInterval = window.setInterval(() => {\n        this.value = this.value === 0 ? 1 : 0;\n      }, this.rate);\n    } else {\n      this.#stopBlinking();\n      this.value = 0;\n    }\n  }\n\n  #stopBlinking() {\n    if (this.#blinkInterval !== undefined) {\n      clearInterval(this.#blinkInterval);\n      this.#blinkInterval = undefined;\n    }\n  }\n\n  protected render() {\n    return html`<div part=\"circle\"></div>`;\n  }\n\n  static styles = css`\n    :host {\n      --_size: var(--size, 1ex);\n      display: inline-block;\n      min-width: 1ex;\n      min-height: 1ex;\n      width: var(--_size);\n      height: var(--_size);\n      vertical-align: middle;\n    }\n\n    div {\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      background: color-mix(in oklch, var(--colour, oklch(50% 0.15 25)), white calc((1 - var(--value, 0)) * 50%));\n      transition: background var(--transition-duration, 150ms) ease-out;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-led\": LedElement;\n  }\n}\n"],"mappings":";;;;AAIO,IAAA,aAAA,MAAM,mBAAmB,WAAW;;;eAEjC;aAGF;eAGE;kBAGG;cAGJ;;CAEP;CAEA,WAAW,mBAAyC;AAClD,MAAI,kBAAkB,IAAI,QAAQ,CAChC,MAAK,MAAM,YAAY,WAAW,OAAO,KAAK,MAAM,CAAC;AAGvD,MAAI,kBAAkB,IAAI,WAAW,IAAI,kBAAkB,IAAI,OAAO,CACpE,OAAA,gBAAsB;AAGxB,MAAI,kBAAkB,IAAI,OAAO,EAAE;GACjC,MAAM,eAAe,KAAK,OAAO,MAAM,KAAK,OAAO,KAAM;AACzD,QAAK,MAAM,YAAY,yBAAyB,GAAG,aAAa,IAAI;;;CAIxE,QAAQ,mBAAyC;AAC/C,MAAI,kBAAkB,IAAI,MAAM,CAC9B,MAAK,QAAQ,KAAK,MAAM,IAAI;;CAIhC,uBAAuB;AACrB,QAAM,sBAAsB;AAC5B,QAAA,cAAoB;;CAGtB,kBAAkB;AAChB,MAAI,KAAK,YAAY,KAAK,OAAO,GAAG;AAClC,SAAA,cAAoB;AACpB,SAAA,gBAAsB,OAAO,kBAAkB;AAC7C,SAAK,QAAQ,KAAK,UAAU,IAAI,IAAI;MACnC,KAAK,KAAK;SACR;AACL,SAAA,cAAoB;AACpB,QAAK,QAAQ;;;CAIjB,gBAAgB;AACd,MAAI,MAAA,kBAAwB,KAAA,GAAW;AACrC,iBAAc,MAAA,cAAoB;AAClC,SAAA,gBAAsB,KAAA;;;CAI1B,SAAmB;AACjB,SAAO,IAAI;;;gBAGG,GAAG;;;;;;;;;;;;;;;;;;;;;YAlElB,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,WAAA,WAAA,SAAA,KAAA,EAAA;YAG1B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAO,SAAS;CAAM,CAAC,CAAA,EAAA,WAAA,WAAA,OAAA,KAAA,EAAA;YAG5D,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,WAAA,WAAA,SAAA,KAAA,EAAA;YAG1B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAY,SAAS;CAAM,CAAC,CAAA,EAAA,WAAA,WAAA,YAAA,KAAA,EAAA;YAGjE,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAQ,CAAC,CAAA,EAAA,WAAA,WAAA,QAAA,KAAA,EAAA;yBAd/C,cAAc,WAAW,CAAA,EAAA,WAAA"}