@ind-ds/core 0.1.1 → 0.2.1

package/dist/collection/components/organisms/motor-control-panel/motor-control-panel.js

@@ -0,0 +1,281 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Motor control panel: live `<ind-motor-card>` faceplate plus start/stop,
+ * speed setpoint and mode selection.
+ */
+export class IndMotorControlPanel {
+    heading = 'Motor';
+    tag;
+    state = 'stopped';
+    speed;
+    current;
+    load;
+    /** Speed setpoint (two-way), in percent. */
+    speedSetpoint = 0;
+    mode;
+    indStart;
+    indStop;
+    indSpeed;
+    indMode;
+    runState() {
+        if (this.state === 'running')
+            return 'running';
+        if (this.state === 'fault')
+            return 'fault';
+        return 'stopped';
+    }
+    onSpeed = (e) => {
+        e.stopPropagation();
+        this.speedSetpoint = e.detail;
+        this.indSpeed.emit(e.detail);
+    };
+    onMode = (e) => {
+        e.stopPropagation();
+        this.indMode.emit(e.detail);
+    };
+    render() {
+        return (h(Host, { key: 'aa9cbabc5c0cfca6f3a40ad007644f9be2bab696' }, h("div", { key: '803290dd446cabe5ee0f359b837b2e967bd8d827', class: "panel-head" }, h("div", { key: '062e906a61e9d4dfee2535b89fa1b83ae077596e', class: "panel-titles" }, h("span", { key: 'f7cd17b073e057d1d19a277510b8f559bc57a856', class: "panel-title", part: "heading" }, this.heading), this.tag && h("span", { key: 'a91e201967ce6167328df4453586141ba212b665', class: "panel-subtitle" }, this.tag))), h("div", { key: '8fccc430ed03534f496cd87e3d636964b517e1b0', class: "panel-body" }, h("ind-motor-card", { key: '997e568d414587072900160088a1a1d85859c649', tag: this.tag, label: this.heading, state: this.state, speed: this.speed, current: this.current, load: this.load }), h("ind-start-stop-control", { key: '05327d42c5e8a9970c8ac845c6721eee1bcea317', label: this.heading, state: this.runState(), onIndStart: () => this.indStart.emit(), onIndStop: () => this.indStop.emit() }), h("ind-speed-control", { key: '46d6380f0e12cc54de1ae28a5f57c446347a8019', label: "Speed setpoint", value: this.speedSetpoint, unit: "%", onIndChange: this.onSpeed }), h("ind-mode-selector", { key: '84ca78cf0ece4142d09867b0ae31ce604c913938', value: this.mode, onIndChange: this.onMode }))));
+    }
+    static get is() { return "ind-motor-control-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "../_shared/control-panel.css", "motor-control-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "../_shared/control-panel.css", "motor-control-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Motor'"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "EquipmentState",
+                    "resolved": "\"fault\" | \"maintenance\" | \"running\" | \"stopped\" | \"warning\"",
+                    "references": {
+                        "EquipmentState": {
+                            "location": "import",
+                            "path": "../../atoms/_equipment/types",
+                            "id": "src/components/atoms/_equipment/types.ts::EquipmentState",
+                            "referenceLocation": "EquipmentState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'stopped'"
+            },
+            "speed": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "speed"
+            },
+            "current": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current"
+            },
+            "load": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "load"
+            },
+            "speedSetpoint": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Speed setpoint (two-way), in percent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "speed-setpoint",
+                "defaultValue": "0"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indStart",
+                "name": "indStart",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "indStop",
+                "name": "indStop",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "indSpeed",
+                "name": "indSpeed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "indMode",
+                "name": "indMode",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=motor-control-panel.js.map

package/dist/collection/components/organisms/motor-control-panel/motor-control-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motor-control-panel.js","sourceRoot":"","sources":["../../../../src/components/organisms/motor-control-panel/motor-control-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI9E;;;GAGG;AAMH,MAAM,OAAO,oBAAoB;IACvB,OAAO,GAAW,OAAO,CAAC;IAC1B,GAAG,CAAU;IACI,KAAK,GAAmB,SAAS,CAAC;IACnD,KAAK,CAAU;IACf,OAAO,CAAU;IACjB,IAAI,CAAU;IACtB,4CAA4C;IACnB,aAAa,GAAW,CAAC,CAAC;IAC3C,IAAI,CAAU;IAEb,QAAQ,CAAsB;IAC9B,OAAO,CAAsB;IAC7B,QAAQ,CAAwB;IAChC,OAAO,CAAwB;IAEhC,QAAQ;QACd,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;YAAE,OAAO,SAAS,CAAC;QAC/C,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO;YAAE,OAAO,OAAO,CAAC;QAC3C,OAAO,SAAS,CAAC;IACnB,CAAC;IAEO,OAAO,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC3C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,MAAM,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC,CAAC;IACM,MAAM,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC1C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,YAAY;gBACrB,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ;oBAC7D,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,GAAG,CAAQ,CACvD,CACF;YACN,4DAAK,KAAK,EAAC,YAAY;gBACrB,uEACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,GACf;gBACF,+EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EACtB,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EACtC,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,GACpC;gBACF,0EACE,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,IAAI,EAAC,GAAG,EACR,WAAW,EAAE,IAAI,CAAC,OAAO,GACzB;gBACF,0EAAmB,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,GAAI,CAC7D,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { EquipmentState } from '../../atoms/_equipment/types';\nimport type { RunState } from '../../molecules/start-stop-control/start-stop-control';\n\n/**\n * Motor control panel: live `<ind-motor-card>` faceplate plus start/stop,\n * speed setpoint and mode selection.\n */\n@Component({\n  tag: 'ind-motor-control-panel',\n  styleUrls: ['../_shared/panel.css', '../_shared/control-panel.css', 'motor-control-panel.css'],\n  shadow: true,\n})\nexport class IndMotorControlPanel {\n  @Prop() heading: string = 'Motor';\n  @Prop() tag?: string;\n  @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n  @Prop() speed?: number;\n  @Prop() current?: number;\n  @Prop() load?: number;\n  /** Speed setpoint (two-way), in percent. */\n  @Prop({ mutable: true }) speedSetpoint: number = 0;\n  @Prop() mode?: string;\n\n  @Event() indStart!: EventEmitter<void>;\n  @Event() indStop!: EventEmitter<void>;\n  @Event() indSpeed!: EventEmitter<number>;\n  @Event() indMode!: EventEmitter<string>;\n\n  private runState(): RunState {\n    if (this.state === 'running') return 'running';\n    if (this.state === 'fault') return 'fault';\n    return 'stopped';\n  }\n\n  private onSpeed = (e: CustomEvent<number>) => {\n    e.stopPropagation();\n    this.speedSetpoint = e.detail;\n    this.indSpeed.emit(e.detail);\n  };\n  private onMode = (e: CustomEvent<string>) => {\n    e.stopPropagation();\n    this.indMode.emit(e.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <div class=\"panel-titles\">\n            <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n            {this.tag && <span class=\"panel-subtitle\">{this.tag}</span>}\n          </div>\n        </div>\n        <div class=\"panel-body\">\n          <ind-motor-card\n            tag={this.tag}\n            label={this.heading}\n            state={this.state}\n            speed={this.speed}\n            current={this.current}\n            load={this.load}\n          />\n          <ind-start-stop-control\n            label={this.heading}\n            state={this.runState()}\n            onIndStart={() => this.indStart.emit()}\n            onIndStop={() => this.indStop.emit()}\n          />\n          <ind-speed-control\n            label=\"Speed setpoint\"\n            value={this.speedSetpoint}\n            unit=\"%\"\n            onIndChange={this.onSpeed}\n          />\n          <ind-mode-selector value={this.mode} onIndChange={this.onMode} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/mqtt-monitor/mqtt-monitor.css

@@ -1,96 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  font-family: var(--ind-font-family-sans);
-  background: var(--ind-surface-panel);
-  border: 1px solid var(--ind-surface-border-default);
-  border-radius: var(--ind-radius-md, 3px);
-  overflow: hidden;
-  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
-}
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: var(--ind-spacing-4, 8px);
-  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);
-  border-bottom: 1px solid var(--ind-surface-border-default);
-  flex-wrap: wrap;
-}
-
-.filter {
-  flex: 1;
-  min-width: 200px;
-  height: var(--ind-size-input-sm, 24px);
-  padding: 0 var(--ind-spacing-4, 8px);
-  background: var(--ind-surface-sunken);
-  border: 1px solid var(--ind-surface-border-default);
-  border-radius: var(--ind-radius-md, 3px);
-  font: inherit;
-  font-size: var(--ind-font-size-sm, 11px);
-  color: inherit;
-  outline: none;
-  box-sizing: border-box;
-}
-.filter::placeholder {
-  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
-}
-.filter:focus {
-  border-color: var(--ind-surface-focus-ring);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring) 35%, transparent);
-}
-
-.check {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ind-spacing-2, 4px);
-  font-size: var(--ind-font-size-sm, 11px);
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-}
-
-.spacer { flex: 1; }
-
-.counter {
-  font-family: var(--ind-font-family-mono);
-  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
-  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
-  font-size: var(--ind-font-size-sm, 11px);
-  white-space: nowrap;
-}
-
-.clear {
-  height: var(--ind-size-button-sm, 26px);
-  padding: 0 var(--ind-spacing-5, 12px);
-  background: var(--ind-button-default-bg);
-  color: var(--ind-button-default-fg);
-  border: 1px solid var(--ind-button-default-border);
-  border-radius: var(--ind-radius-md, 3px);
-  font: inherit;
-  font-size: var(--ind-font-size-sm, 11px);
-  font-weight: var(--ind-font-weight-semibold, 600);
-  cursor: pointer;
-}
-.clear:hover { background: var(--ind-button-default-bg-hover); }
-.clear:focus-visible {
-  outline: 2px solid var(--ind-surface-focus-ring);
-  outline-offset: 2px;
-}
-
-.log {
-  flex: 1;
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);
-  background: var(--ind-color-palette-neutral-0, #000);
-  color: var(--ind-color-palette-neutral-800, #d0d7e0);
-  border: none;
-  outline: none;
-  font-family: var(--ind-font-family-mono);
-  font-size: var(--ind-font-size-sm, 11px);
-  line-height: var(--ind-font-line-height-normal, 1.4);
-  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
-  resize: vertical;
-  cursor: default;
-}

package/dist/collection/components/organisms/mqtt-monitor/mqtt-monitor.js

@@ -48,7 +48,7 @@ export class IndMqttMonitor {
         const total = this.log ? this.log.split('\n').filter((l) => l.length > 0).length : 0;
         const visible = filtered.filter((l) => l.length > 0).length;
         const countLabel = this.filterValue ? `${visible} / ${total} msg` : `${total} msg`;
-        return (h(Host, { key: '611c593c0c13009b372c0f3d8077c363c9801b97' }, h("div", { key: '6552180414c9c06bf728b6d94eaa4ec282f9ecc9', class: "toolbar", part: "toolbar" }, h("input", { key: '715c06c1dcd91764b619093804bd52dd9ebb512c', class: "filter", part: "filter", type: "search", placeholder: "Filter topic / payload...", value: this.filterValue, onInput: this.onFilter }), h("label", { key: 'c7fc734cd7d0e08d28191804852ef7bf11ed01c7', class: "check" }, h("input", { key: '6b250678c32e5e83b2925275cdd44579cf682933', type: "checkbox", checked: this.paused, onChange: this.onPause }), h("span", { key: '77f2a59bd50c2a8c48c27a719730ba2efc5e5b9e' }, "Pause")), h("span", { key: 'eb60e89a998c60548f62d982691ffbdc1ce08eb7', class: "spacer" }), h("span", { key: '298521f0328cb32523d63dd3a45248575313b6f6', class: "counter", part: "counter" }, countLabel), h("button", { key: '32a5aa35b0e622e8fac010a79bbd30cb434ba09e', type: "button", class: "clear", part: "clear", onClick: () => this.indClear.emit() }, "Clear")), h("textarea", { key: '7ca66e1a42cdd672faae4d14004af23c2cae7bae', class: "log", part: "log", readonly: true, rows: this.rows }, filtered.join('\n'))));
+        return (h(Host, { key: 'fde4e0cf9ab24365b155f7497c18f704669b6789' }, h("div", { key: 'de63978fd49ac92d6f6ba72351b0309d8d1bed0a', class: "toolbar", part: "toolbar" }, h("input", { key: '4b15c9ca91e979444364f5b9ae5ad7e1e414bb09', class: "filter", part: "filter", type: "search", placeholder: "Filter topic / payload...", value: this.filterValue, onInput: this.onFilter }), h("label", { key: '43afbc5455f8f5711c47da954900b745f9b25e8b', class: "check" }, h("input", { key: '3af747f4c0ec5240d8fc7fae6030396fe0b3ec51', type: "checkbox", checked: this.paused, onChange: this.onPause }), h("span", { key: '54789aaadeb3b54360b44a8cd12bd52ed260c4ac' }, "Pause")), h("span", { key: '3ad3873914538089402893883f5c1e1cd1c52606', class: "spacer" }), h("span", { key: '410327c79b9b0090f9bf3f4e43d6c14dd7e9136d', class: "counter", part: "counter" }, countLabel), h("button", { key: '594b493e5ccee295a061bd100ed5d0333890c23f', type: "button", class: "clear", part: "clear", onClick: () => this.indClear.emit() }, "Clear")), h("textarea", { key: 'a31c38c4968befd04635ed26d381a444a839769f', class: "log", part: "log", readonly: true, rows: this.rows }, filtered.join('\n'))));
     }
     static get is() { return "ind-mqtt-monitor"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/organisms/oee-dashboard/oee-dashboard.js

@@ -0,0 +1,167 @@
+import { h, Host } from "@stencil/core";
+/**
+ * OEE dashboard: the headline OEE figure plus its three factors
+ * (Availability × Performance × Quality) as radial gauges.
+ */
+export class IndOeeDashboard {
+    heading = 'OEE';
+    /** Availability % (0–100). */
+    availability = 0;
+    /** Performance % (0–100). */
+    performance = 0;
+    /** Quality % (0–100). */
+    quality = 0;
+    /** Override the computed OEE (A×P×Q). */
+    oee;
+    /** Context subtitle. */
+    subtitle;
+    computedOee() {
+        if (this.oee !== undefined)
+            return this.oee;
+        return (this.availability * this.performance * this.quality) / 10000;
+    }
+    render() {
+        const oee = this.computedOee();
+        const zones = [
+            { from: 0, to: 60, color: 'var(--ind-state-fault-bg, #dc2626)' },
+            { from: 60, to: 85, color: 'var(--ind-state-warning-bg, #f59e0b)' },
+            { from: 85, to: 100, color: 'var(--ind-state-running-bg, #16a34a)' },
+        ];
+        return (h(Host, { key: '816f601703acbac5fb094e67c629cf49ee5aadb1' }, h("div", { key: 'a14f65ecf9fe2ca429e704429d68504d19cc676d', class: "panel-head" }, h("div", { key: 'e8a6a4a95843d1cc98f534b58f875f9ddd5d9066', class: "panel-titles" }, h("span", { key: 'b4b7943e39bdfb7a920e05e00edb7332e71cde10', class: "panel-title", part: "heading" }, this.heading), this.subtitle && h("span", { key: '2c7e7580381ccf7cc9e7a46c6986b7f6a9035dd1', class: "panel-subtitle" }, this.subtitle)), h("div", { key: '4e2985de1af2d2b7cfe2a992c23052d91a8e4f2a', class: "headline", part: "headline" }, h("span", { key: 'd73edb0699180ff95cc395415369abf9fd65f29b', class: "headline-value" }, oee.toFixed(1)), h("span", { key: 'cda1e64d86541b2960e9471be9d87d795e19d006', class: "headline-unit" }, "% OEE"))), h("div", { key: '0625b176811332057b07de1b6908a451341bd824', class: "gauges", part: "gauges" }, h("ind-gauge", { key: '387c8e169ba8efdec0d54a3db13b9d20c1564ffb', value: this.availability, min: 0, max: 100, unit: "%", label: "Availability", precision: 0, zones: zones, size: "md" }), h("ind-gauge", { key: 'bc9c826ee797e31654623610ed3a934e7382701f', value: this.performance, min: 0, max: 100, unit: "%", label: "Performance", precision: 0, zones: zones, size: "md" }), h("ind-gauge", { key: 'e97452d8d21fe59814b32ece038486d21db58d31', value: this.quality, min: 0, max: 100, unit: "%", label: "Quality", precision: 0, zones: zones, size: "md" }))));
+    }
+    static get is() { return "ind-oee-dashboard"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "oee-dashboard.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "oee-dashboard.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'OEE'"
+            },
+            "availability": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Availability % (0\u2013100)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "availability",
+                "defaultValue": "0"
+            },
+            "performance": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Performance % (0\u2013100)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "performance",
+                "defaultValue": "0"
+            },
+            "quality": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Quality % (0\u2013100)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "quality",
+                "defaultValue": "0"
+            },
+            "oee": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Override the computed OEE (A\u00D7P\u00D7Q)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "oee"
+            },
+            "subtitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Context subtitle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subtitle"
+            }
+        };
+    }
+}
+//# sourceMappingURL=oee-dashboard.js.map

package/dist/collection/components/organisms/oee-dashboard/oee-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"oee-dashboard.js","sourceRoot":"","sources":["../../../../src/components/organisms/oee-dashboard/oee-dashboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,eAAe;IAClB,OAAO,GAAW,KAAK,CAAC;IAChC,8BAA8B;IACtB,YAAY,GAAW,CAAC,CAAC;IACjC,6BAA6B;IACrB,WAAW,GAAW,CAAC,CAAC;IAChC,yBAAyB;IACjB,OAAO,GAAW,CAAC,CAAC;IAC5B,yCAAyC;IACjC,GAAG,CAAU;IACrB,wBAAwB;IAChB,QAAQ,CAAU;IAElB,WAAW;QACjB,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC;QAC5C,OAAO,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC;IACvE,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QAC/B,MAAM,KAAK,GAAG;YACZ,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,oCAAoC,EAAE;YAChE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,sCAAsC,EAAE;YACnE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,sCAAsC,EAAE;SACrE,CAAC;QACF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,YAAY;gBACrB,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ;oBAC7D,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,QAAQ,CAAQ,CACjE;gBACN,4DAAK,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU;oBACnC,6DAAM,KAAK,EAAC,gBAAgB,IAAE,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAQ;oBACpD,6DAAM,KAAK,EAAC,eAAe,YAAa,CACpC,CACF;YACN,4DAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;gBAC/B,kEAAW,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,cAAc,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,GAAa;gBACvI,kEAAW,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,GAAa;gBACrI,kEAAW,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,GAAa,CACzH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * OEE dashboard: the headline OEE figure plus its three factors\n * (Availability × Performance × Quality) as radial gauges.\n */\n@Component({\n  tag: 'ind-oee-dashboard',\n  styleUrls: ['../_shared/panel.css', 'oee-dashboard.css'],\n  shadow: true,\n})\nexport class IndOeeDashboard {\n  @Prop() heading: string = 'OEE';\n  /** Availability % (0–100). */\n  @Prop() availability: number = 0;\n  /** Performance % (0–100). */\n  @Prop() performance: number = 0;\n  /** Quality % (0–100). */\n  @Prop() quality: number = 0;\n  /** Override the computed OEE (A×P×Q). */\n  @Prop() oee?: number;\n  /** Context subtitle. */\n  @Prop() subtitle?: string;\n\n  private computedOee(): number {\n    if (this.oee !== undefined) return this.oee;\n    return (this.availability * this.performance * this.quality) / 10000;\n  }\n\n  render() {\n    const oee = this.computedOee();\n    const zones = [\n      { from: 0, to: 60, color: 'var(--ind-state-fault-bg, #dc2626)' },\n      { from: 60, to: 85, color: 'var(--ind-state-warning-bg, #f59e0b)' },\n      { from: 85, to: 100, color: 'var(--ind-state-running-bg, #16a34a)' },\n    ];\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <div class=\"panel-titles\">\n            <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n            {this.subtitle && <span class=\"panel-subtitle\">{this.subtitle}</span>}\n          </div>\n          <div class=\"headline\" part=\"headline\">\n            <span class=\"headline-value\">{oee.toFixed(1)}</span>\n            <span class=\"headline-unit\">% OEE</span>\n          </div>\n        </div>\n        <div class=\"gauges\" part=\"gauges\">\n          <ind-gauge value={this.availability} min={0} max={100} unit=\"%\" label=\"Availability\" precision={0} zones={zones} size=\"md\"></ind-gauge>\n          <ind-gauge value={this.performance} min={0} max={100} unit=\"%\" label=\"Performance\" precision={0} zones={zones} size=\"md\"></ind-gauge>\n          <ind-gauge value={this.quality} min={0} max={100} unit=\"%\" label=\"Quality\" precision={0} zones={zones} size=\"md\"></ind-gauge>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}