@ind-ds/core 0.1.1 → 0.2.0

package/dist/collection/components/molecules/valve-card/valve-card.js

@@ -0,0 +1,127 @@
+import { h, Host } from "@stencil/core";
+const STATE_LABEL = {
+    open: 'Open',
+    closed: 'Closed',
+    transit: 'In transit',
+    fault: 'Fault',
+};
+/**
+ * Valve faceplate: ISA `<ind-valve>` symbol plus open/closed state and an
+ * optional position (%) for modulating valves.
+ */
+export class IndValveCard {
+    /** Equipment tag (e.g. "FV-12"). */
+    tag;
+    /** Human label (e.g. "Discharge valve"). */
+    label;
+    /** Valve state — drives the symbol and fault chrome. */
+    state = 'closed';
+    /** Modulating position 0–100 %. Omit for on/off valves. */
+    position;
+    render() {
+        const name = this.label ?? this.tag ?? 'Valve';
+        const stateLabel = STATE_LABEL[this.state];
+        return (h(Host, { key: 'c11f424cdec484a92d55249e9bc2bf8d57ff37ff', role: "group", "aria-label": `${name} — ${stateLabel}` }, h("div", { key: 'd06530840195cf64a2dfa42bee2d75181a1f6b8a', class: "card-head" }, h("span", { key: '40f60181a5004a6775c075d1ddb8a1b8bef7fecc', class: "card-title", part: "label" }, name), this.tag && h("span", { key: 'a792bce6c1d47e9dfc55b4eeaecc33e12937de0a', class: "card-tag", part: "tag" }, this.tag)), h("div", { key: '959d680892bd242eb4f0bd7f3caa26608899dd3a', class: "body", part: "body" }, h("ind-valve", { key: '89179d37066242d82cb63c829d085746926b03c2', class: "symbol", state: this.state, size: "md" }), h("div", { key: '23fb8ecd64f0f119498e6de5eebdb8b092f82a3b', class: "metrics", part: "metrics" }, h("span", { key: '3b30ab720f8a36a012f9eda7187e13c5f5a8f77b', class: `state-label state-${this.state}`, part: "state-label" }, stateLabel), this.position !== undefined && (h("ind-value", { key: '2d9bd688111fcd2c2a0b8e2c0d6826bc807b682e', value: this.position, unit: "%", precision: 0, label: "Position", size: "sm" }))))));
+    }
+    static get is() { return "ind-valve-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/card.css", "../_shared/equipment-card.css", "valve-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/card.css", "../_shared/equipment-card.css", "valve-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Equipment tag (e.g. \"FV-12\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Human label (e.g. \"Discharge valve\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValveState",
+                    "resolved": "\"closed\" | \"fault\" | \"open\" | \"transit\"",
+                    "references": {
+                        "ValveState": {
+                            "location": "import",
+                            "path": "../../atoms/valve/valve",
+                            "id": "src/components/atoms/valve/valve.tsx::ValveState",
+                            "referenceLocation": "ValveState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valve state \u2014 drives the symbol and fault chrome."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'closed'"
+            },
+            "position": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Modulating position 0\u2013100 %. Omit for on/off valves."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position"
+            }
+        };
+    }
+}
+//# sourceMappingURL=valve-card.js.map

package/dist/collection/components/molecules/valve-card/valve-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"valve-card.js","sourceRoot":"","sources":["../../../../src/components/molecules/valve-card/valve-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,WAAW,GAA+B;IAC9C,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,YAAY;IACrB,KAAK,EAAE,OAAO;CACf,CAAC;AAEF;;;GAGG;AAMH,MAAM,OAAO,YAAY;IACvB,oCAAoC;IAC5B,GAAG,CAAU;IACrB,4CAA4C;IACpC,KAAK,CAAU;IACvB,wDAAwD;IAC/B,KAAK,GAAe,QAAQ,CAAC;IACtD,2DAA2D;IACnD,QAAQ,CAAU;IAE1B,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO,CAAC;QAC/C,MAAM,UAAU,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,GAAG,IAAI,MAAM,UAAU,EAAE;YACtD,4DAAK,KAAK,EAAC,WAAW;gBACpB,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAQ;gBAClD,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ,CAC5D;YACN,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;gBAC3B,kEAAW,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,GAAG;gBACzD,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBACjC,6DAAM,KAAK,EAAE,qBAAqB,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAC,aAAa,IAAE,UAAU,CAAQ;oBACrF,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CAC9B,kEAAW,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,CAAC,EAAE,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,GAAG,CACtF,CACG,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { ValveState } from '../../atoms/valve/valve';\n\nconst STATE_LABEL: Record<ValveState, string> = {\n  open: 'Open',\n  closed: 'Closed',\n  transit: 'In transit',\n  fault: 'Fault',\n};\n\n/**\n * Valve faceplate: ISA `<ind-valve>` symbol plus open/closed state and an\n * optional position (%) for modulating valves.\n */\n@Component({\n  tag: 'ind-valve-card',\n  styleUrls: ['../_shared/card.css', '../_shared/equipment-card.css', 'valve-card.css'],\n  shadow: true,\n})\nexport class IndValveCard {\n  /** Equipment tag (e.g. \"FV-12\"). */\n  @Prop() tag?: string;\n  /** Human label (e.g. \"Discharge valve\"). */\n  @Prop() label?: string;\n  /** Valve state — drives the symbol and fault chrome. */\n  @Prop({ reflect: true }) state: ValveState = 'closed';\n  /** Modulating position 0–100 %. Omit for on/off valves. */\n  @Prop() position?: number;\n\n  render() {\n    const name = this.label ?? this.tag ?? 'Valve';\n    const stateLabel = STATE_LABEL[this.state];\n    return (\n      <Host role=\"group\" aria-label={`${name} — ${stateLabel}`}>\n        <div class=\"card-head\">\n          <span class=\"card-title\" part=\"label\">{name}</span>\n          {this.tag && <span class=\"card-tag\" part=\"tag\">{this.tag}</span>}\n        </div>\n        <div class=\"body\" part=\"body\">\n          <ind-valve class=\"symbol\" state={this.state} size=\"md\" />\n          <div class=\"metrics\" part=\"metrics\">\n            <span class={`state-label state-${this.state}`} part=\"state-label\">{stateLabel}</span>\n            {this.position !== undefined && (\n              <ind-value value={this.position} unit=\"%\" precision={0} label=\"Position\" size=\"sm\" />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/_shared/control-panel.css

@@ -0,0 +1,15 @@
+/* Flatten the faceplate / control molecules when embedded in a control panel,
+ * so the panel provides the single card chrome. */
+.panel-body > ind-motor-card,
+.panel-body > ind-pump-card,
+.panel-body > ind-valve-card,
+.panel-body > ind-start-stop-control,
+.panel-body > ind-setpoint-control,
+.panel-body > ind-speed-control,
+.panel-body > ind-mode-selector,
+.panel-body > ind-recipe-selector {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  min-width: 0;
+}

package/dist/collection/components/organisms/_shared/panel.css

@@ -0,0 +1,96 @@
+/* Shared chrome for organism panels. Pulled in first via
+ * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */
+:host {
+  display: flex;
+  flex-direction: column;
+  background: var(--ind-surface-panel);
+  border: 1px solid var(--ind-surface-border-default);
+  border-radius: var(--ind-radius-md, 3px);
+  font-family: var(--ind-font-family-sans);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  box-sizing: border-box;
+  overflow: hidden;
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-4, 8px);
+  padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);
+  border-bottom: 1px solid var(--ind-surface-border-subtle);
+  background: var(--ind-surface-raised);
+  flex: 0 0 auto;
+}
+
+.panel-titles {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.panel-title {
+  font-size: var(--ind-font-size-md, 13px);
+  font-weight: var(--ind-font-weight-semibold, 600);
+  line-height: 1.2;
+}
+
+.panel-subtitle {
+  font-size: var(--ind-font-size-xs, 10px);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+}
+
+.panel-tag {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-secondary);
+}
+
+.panel-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+}
+
+.panel-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ind-spacing-4, 8px);
+  padding: var(--ind-spacing-5, 12px);
+  min-height: 0;
+}
+
+.panel-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-3, 6px);
+  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);
+  border-bottom: 1px solid var(--ind-surface-border-subtle);
+  flex: 0 0 auto;
+}
+
+.panel-list {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.panel-grid {
+  display: grid;
+  gap: var(--ind-spacing-4, 8px);
+  padding: var(--ind-spacing-5, 12px);
+}
+
+.panel-empty {
+  padding: var(--ind-spacing-7, 20px);
+  text-align: center;
+  color: var(--ind-surface-text-muted);
+  font-size: var(--ind-font-size-sm, 11px);
+}
+
+.panel-spacer {
+  flex: 1 1 auto;
+}

package/dist/collection/components/organisms/alarm-panel/alarm-panel.css

@@ -0,0 +1,7 @@
+:host {
+  min-width: 360px;
+}
+
+.panel-list {
+  max-height: 420px;
+}

package/dist/collection/components/organisms/alarm-panel/alarm-panel.js

@@ -0,0 +1,152 @@
+import { h, Host } from "@stencil/core";
+const PRIORITY_RANK = {
+    'high-high': 0,
+    high: 1,
+    low: 2,
+    'low-low': 3,
+};
+/**
+ * Active alarm list with a toolbar: shows unacknowledged-first, ISA-18.2
+ * sorted `<ind-alarm-row>`s and an "ACK all" command. Emits `indAck` (per
+ * alarm) and `indAckAll`.
+ */
+export class IndAlarmPanel {
+    /** Panel heading. */
+    heading = 'Alarms';
+    /** Alarm rows. */
+    alarms = [];
+    /** Hide already-acknowledged alarms. */
+    hideAcknowledged = false;
+    /** Fires with the alarm id when a single alarm is acknowledged. */
+    indAck;
+    /** Fires when the operator acknowledges all visible alarms. */
+    indAckAll;
+    sorted() {
+        const list = this.hideAcknowledged ? this.alarms.filter((a) => !a.acknowledged) : this.alarms;
+        return [...list].sort((a, b) => {
+            const ack = Number(a.acknowledged ?? false) - Number(b.acknowledged ?? false);
+            if (ack !== 0)
+                return ack;
+            return PRIORITY_RANK[a.priority] - PRIORITY_RANK[b.priority];
+        });
+    }
+    render() {
+        const rows = this.sorted();
+        const unacked = this.alarms.filter((a) => !a.acknowledged).length;
+        return (h(Host, { key: '0dfd3cce47c2bb9367fe44374890f64fe8e6cd35' }, h("div", { key: '5fb96dd5aba1723905467f0b97df8808cfe60362', class: "panel-head" }, h("div", { key: '4df0bf8cb769f781920c69cdd81dcdf0f22721b5', class: "panel-titles" }, h("span", { key: '41bd0d8955b5bb89107b5abf350f82cd6b54b160', class: "panel-title", part: "heading" }, this.heading), h("span", { key: 'b8143a078e6ac7fca073713f19e44554b72a3b3c', class: "panel-subtitle" }, unacked, " unacknowledged \u00B7 ", this.alarms.length, " total")), h("div", { key: '9c660b78dad715003000c61b9ed532e280950193', class: "panel-actions" }, h("ind-button", { key: '37ae9d3d64083f360a8292d17e33346c6ae60ee6', variant: "default", size: "sm", label: "ACK all", disabled: unacked === 0, onIndActivate: () => this.indAckAll.emit() }))), h("div", { key: '65b366bc7cd87378fa18af0610d9796cbdc6bbfb', class: "panel-list", part: "list" }, rows.length === 0 ? (h("div", { class: "panel-empty" }, "No active alarms")) : (rows.map((a) => (h("ind-alarm-row", { key: a.id, priority: a.priority, tag: a.tag, message: a.message, time: a.time, acknowledged: a.acknowledged, onIndAck: () => this.indAck.emit(a.id) })))))));
+    }
+    static get is() { return "ind-alarm-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "alarm-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "alarm-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Alarms'"
+            },
+            "alarms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlarmPanelItem[]",
+                    "resolved": "AlarmPanelItem[]",
+                    "references": {
+                        "AlarmPanelItem": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/organisms/alarm-panel/alarm-panel.tsx",
+                            "id": "src/components/organisms/alarm-panel/alarm-panel.tsx::AlarmPanelItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alarm rows."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "hideAcknowledged": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide already-acknowledged alarms."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-acknowledged",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indAck",
+                "name": "indAck",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the alarm id when a single alarm is acknowledged."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "indAckAll",
+                "name": "indAckAll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the operator acknowledges all visible alarms."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=alarm-panel.js.map

package/dist/collection/components/organisms/alarm-panel/alarm-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alarm-panel.js","sourceRoot":"","sources":["../../../../src/components/organisms/alarm-panel/alarm-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { AlarmRowPriority } from '../../molecules/alarm-row/alarm-row';\n\nexport interface AlarmPanelItem {\n  id: string;\n  priority: AlarmRowPriority;\n  tag?: string;\n  message: string;\n  time?: string;\n  acknowledged?: boolean;\n}\n\nconst PRIORITY_RANK: Record<AlarmRowPriority, number> = {\n  'high-high': 0,\n  high: 1,\n  low: 2,\n  'low-low': 3,\n};\n\n/**\n * Active alarm list with a toolbar: shows unacknowledged-first, ISA-18.2\n * sorted `<ind-alarm-row>`s and an \"ACK all\" command. Emits `indAck` (per\n * alarm) and `indAckAll`.\n */\n@Component({\n  tag: 'ind-alarm-panel',\n  styleUrls: ['../_shared/panel.css', 'alarm-panel.css'],\n  shadow: true,\n})\nexport class IndAlarmPanel {\n  /** Panel heading. */\n  @Prop() heading: string = 'Alarms';\n  /** Alarm rows. */\n  @Prop() alarms: AlarmPanelItem[] = [];\n  /** Hide already-acknowledged alarms. */\n  @Prop() hideAcknowledged: boolean = false;\n\n  /** Fires with the alarm id when a single alarm is acknowledged. */\n  @Event() indAck!: EventEmitter<string>;\n  /** Fires when the operator acknowledges all visible alarms. */\n  @Event() indAckAll!: EventEmitter<void>;\n\n  private sorted(): AlarmPanelItem[] {\n    const list = this.hideAcknowledged ? this.alarms.filter((a) => !a.acknowledged) : this.alarms;\n    return [...list].sort((a, b) => {\n      const ack = Number(a.acknowledged ?? false) - Number(b.acknowledged ?? false);\n      if (ack !== 0) return ack;\n      return PRIORITY_RANK[a.priority] - PRIORITY_RANK[b.priority];\n    });\n  }\n\n  render() {\n    const rows = this.sorted();\n    const unacked = this.alarms.filter((a) => !a.acknowledged).length;\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            <span class=\"panel-subtitle\">{unacked} unacknowledged · {this.alarms.length} total</span>\n          </div>\n          <div class=\"panel-actions\">\n            <ind-button\n              variant=\"default\"\n              size=\"sm\"\n              label=\"ACK all\"\n              disabled={unacked === 0}\n              onIndActivate={() => this.indAckAll.emit()}\n            />\n          </div>\n        </div>\n        <div class=\"panel-list\" part=\"list\">\n          {rows.length === 0 ? (\n            <div class=\"panel-empty\">No active alarms</div>\n          ) : (\n            rows.map((a) => (\n              <ind-alarm-row\n                key={a.id}\n                priority={a.priority}\n                tag={a.tag}\n                message={a.message}\n                time={a.time}\n                acknowledged={a.acknowledged}\n                onIndAck={() => this.indAck.emit(a.id)}\n              />\n            ))\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/alarm-summary/alarm-summary.css

@@ -0,0 +1,30 @@
+:host {
+  min-width: 220px;
+}
+
+.figures {
+  display: flex;
+  gap: var(--ind-spacing-7, 20px);
+}
+
+.figure {
+  display: flex;
+  flex-direction: column;
+}
+
+.figure-value {
+  font-size: var(--ind-font-size-3xl, 28px);
+  font-weight: var(--ind-font-weight-bold, 700);
+  line-height: 1;
+}
+
+.figure-label {
+  font-size: var(--ind-font-size-xs, 10px);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ind-surface-text-muted);
+}
+
+.figure-alert .figure-value {
+  color: var(--ind-state-fault-bg, #dc2626);
+}

package/dist/collection/components/organisms/alarm-summary/alarm-summary.js

@@ -0,0 +1,158 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Compact alarm KPI block: total + unacknowledged headline figures and the
+ * ISA-18.2 priority breakdown via `<ind-alarm-badge-group>`. For a dashboard
+ * tile or the top of an alarm page.
+ */
+export class IndAlarmSummary {
+    heading = 'Alarm summary';
+    highHigh = 0;
+    high = 0;
+    low = 0;
+    lowLow = 0;
+    /** Number still requiring acknowledgement. */
+    unacknowledged = 0;
+    get total() {
+        return this.highHigh + this.high + this.low + this.lowLow;
+    }
+    render() {
+        return (h(Host, { key: 'c5992c482be7f6a3ba7a60895206a99b66b0b170' }, h("div", { key: '99469823afd889f6f1a80df3cf08130fccc00147', class: "panel-head" }, h("span", { key: 'b2e722e717ce05485f7dbf295295e183f7b2303f', class: "panel-title", part: "heading" }, this.heading)), h("div", { key: 'c247452858019863759a9de52c0ba64eadb19e0e', class: "panel-body" }, h("div", { key: '03aee42078dd1ff605a427f81b25f54801af740c', class: "figures", part: "figures" }, h("div", { key: '4d432a006fc1ff02eb5a9fef06a4699f2e4ac354', class: "figure" }, h("span", { key: 'd44e91c6aedd0ffb1753786ea14d913e63dff493', class: "figure-value", part: "total" }, this.total), h("span", { key: 'bba93e5f7341eff4432a092647b2ded64ec9d0d8', class: "figure-label" }, "Active")), h("div", { key: '0ba8ec3802ce0a710b7af437e7520bff89f3dce9', class: `figure ${this.unacknowledged > 0 ? 'figure-alert' : ''}` }, h("span", { key: '18e126c37406b250b87c598f83bccaaf8c443034', class: "figure-value", part: "unacked" }, this.unacknowledged), h("span", { key: '6bcb83b6a06add5d0905411cc308d17e200944a3', class: "figure-label" }, "Unacked"))), h("ind-alarm-badge-group", { key: 'aaad73d149fcf1e861fa95a6199806b8046cd897', part: "badges", highHigh: this.highHigh, high: this.high, low: this.low, lowLow: this.lowLow }))));
+    }
+    static get is() { return "ind-alarm-summary"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "alarm-summary.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/panel.css", "alarm-summary.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": "'Alarm summary'"
+            },
+            "highHigh": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "high-high",
+                "defaultValue": "0"
+            },
+            "high": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "high",
+                "defaultValue": "0"
+            },
+            "low": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "low",
+                "defaultValue": "0"
+            },
+            "lowLow": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "low-low",
+                "defaultValue": "0"
+            },
+            "unacknowledged": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number still requiring acknowledgement."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unacknowledged",
+                "defaultValue": "0"
+            }
+        };
+    }
+}
+//# sourceMappingURL=alarm-summary.js.map

package/dist/collection/components/organisms/alarm-summary/alarm-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alarm-summary.js","sourceRoot":"","sources":["../../../../src/components/organisms/alarm-summary/alarm-summary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;GAIG;AAMH,MAAM,OAAO,eAAe;IAClB,OAAO,GAAW,eAAe,CAAC;IAClC,QAAQ,GAAW,CAAC,CAAC;IACrB,IAAI,GAAW,CAAC,CAAC;IACjB,GAAG,GAAW,CAAC,CAAC;IAChB,MAAM,GAAW,CAAC,CAAC;IAC3B,8CAA8C;IACtC,cAAc,GAAW,CAAC,CAAC;IAEnC,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,YAAY;gBACrB,6DAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ,CAC1D;YACN,4DAAK,KAAK,EAAC,YAAY;gBACrB,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;oBACjC,4DAAK,KAAK,EAAC,QAAQ;wBACjB,6DAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;wBAC3D,6DAAM,KAAK,EAAC,cAAc,aAAc,CACpC;oBACN,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE;wBACnE,6DAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,cAAc,CAAQ;wBACtE,6DAAM,KAAK,EAAC,cAAc,cAAe,CACrC,CACF;gBACN,8EACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Compact alarm KPI block: total + unacknowledged headline figures and the\n * ISA-18.2 priority breakdown via `<ind-alarm-badge-group>`. For a dashboard\n * tile or the top of an alarm page.\n */\n@Component({\n  tag: 'ind-alarm-summary',\n  styleUrls: ['../_shared/panel.css', 'alarm-summary.css'],\n  shadow: true,\n})\nexport class IndAlarmSummary {\n  @Prop() heading: string = 'Alarm summary';\n  @Prop() highHigh: number = 0;\n  @Prop() high: number = 0;\n  @Prop() low: number = 0;\n  @Prop() lowLow: number = 0;\n  /** Number still requiring acknowledgement. */\n  @Prop() unacknowledged: number = 0;\n\n  private get total(): number {\n    return this.highHigh + this.high + this.low + this.lowLow;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-head\">\n          <span class=\"panel-title\" part=\"heading\">{this.heading}</span>\n        </div>\n        <div class=\"panel-body\">\n          <div class=\"figures\" part=\"figures\">\n            <div class=\"figure\">\n              <span class=\"figure-value\" part=\"total\">{this.total}</span>\n              <span class=\"figure-label\">Active</span>\n            </div>\n            <div class={`figure ${this.unacknowledged > 0 ? 'figure-alert' : ''}`}>\n              <span class=\"figure-value\" part=\"unacked\">{this.unacknowledged}</span>\n              <span class=\"figure-label\">Unacked</span>\n            </div>\n          </div>\n          <ind-alarm-badge-group\n            part=\"badges\"\n            highHigh={this.highHigh}\n            high={this.high}\n            low={this.low}\n            lowLow={this.lowLow}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/organisms/app-header/app-header.js

@@ -21,7 +21,7 @@ export class IndAppHeader {
     indChangeMachine;
     indDisconnect;
     render() {
-        return (h(Host, { key: 'c65d79c697786cf1e17f3d13a1f5475da46e66ac', role: "banner" }, h("div", { key: '4c17ab40581251748f4bfbdceb8553d736b9288b', class: "brand", part: "brand" }, h("slot", { key: '2e4a11be914770ce6cf3b2e2a4cf7e92fbd95702', name: "logo" }, h("span", { key: 'ff2a98d37c5153a9169b188a2e77d24f49a505e5', class: "brand-logo", "aria-hidden": "true" }, "\u2B22")), h("div", { key: 'a679a938ab050aa8e2c326a88e905563134fbbc5', class: "brand-text" }, h("span", { key: '19b941fba9c4d7dbbda39242f3c6afb543c5ef6a', class: "brand-name" }, this.brand), this.subBrand && h("span", { key: 'd77217db67b0384df179638cbf98ae38697a7071', class: "brand-sub" }, this.subBrand))), this.machineId && (h("div", { key: '1e40da6c490185efe7423b1b82d5a5e56cd4cb9a', class: "machine", part: "machine" }, h("span", { key: '5ca76acc4d270e8f6adc12d0077f1371e136aded', class: "machine-label" }, "Machine"), h("span", { key: 'a10840b72441bb7adabd0f152332bfa9e081eff5', class: "machine-id" }, this.machineId))), h("div", { key: '5cfbdeb0e191cdbfa679fd0a1e205c4544065b10', class: "mqtt", part: "mqtt" }, h("ind-status-dot", { key: 'b80758c2a80a27b362651cd1251c92d3b510212e', state: this.mqttState, size: "md" }), this.mqttLabel && h("span", { key: 'a443524b51f9950e068bc815bc4e89f52bc9c296', class: "mqtt-label" }, this.mqttLabel)), h("span", { key: '84028540ba07e5f4b400e9694a2c102c0ffcb618', class: "spacer" }), h("div", { key: '42e07d1726547c318367423708e9fd7078a771ed', class: "meta", part: "meta" }, this.version && h("span", { key: '9fc02e0f44f50126554fa70e127bf5e1819b09ee', class: "version" }, this.version), this.docsUrl && (h("a", { key: '3839f6149b334591551124f4bb5eb296d0f4a296', class: "docs", href: this.docsUrl, target: "_blank", rel: "noopener noreferrer" }, "Documentation"))), h("div", { key: '4265851f62d3f66518a9e07b32933974a301376b', class: "actions", part: "actions" }, h("slot", { key: 'dffb5909cf929b3c04e47d598e746a6caf8d55f5', name: "actions" }, !this.hideChangeMachine && (h("button", { key: '824c0c0b5419753e50d8ba002dee057ba2ec2b46', type: "button", class: "action", onClick: () => this.indChangeMachine.emit() }, "Change machine")), !this.hideDisconnect && (h("button", { key: '5269a1bed2754ca7f7bfd83f0f431cae2d4c1bf5', type: "button", class: "action action--danger", onClick: () => this.indDisconnect.emit() }, "Disconnect"))))));
+        return (h(Host, { key: '33a1b8dac7bd4feab37a77bf79032897b0bbe4a1', role: "banner" }, h("div", { key: 'e21411d4c6f29102909f56322e6a58b59c2ad248', class: "brand", part: "brand" }, h("slot", { key: '44c3459a36950ad2a3694a2d29d27975c1de8e7f', name: "logo" }, h("span", { key: 'bb0939402521c478da8f0ecd551b7db3ccf765ec', class: "brand-logo", "aria-hidden": "true" }, "\u2B22")), h("div", { key: '85b3c26d915ea4e0e572edfc0893e9c79bb2c4ee', class: "brand-text" }, h("span", { key: '016479b1ce9a6337112f88bd0058641874f41d39', class: "brand-name" }, this.brand), this.subBrand && h("span", { key: 'ece4c7a28e13aaa10a78f9ce4b44487eeaf7cd42', class: "brand-sub" }, this.subBrand))), this.machineId && (h("div", { key: 'f9d16ec7b7b753ea6c5e61b960cf541234bf6004', class: "machine", part: "machine" }, h("span", { key: '43585929ef3a8b0354f5dbac37337d0eff783a47', class: "machine-label" }, "Machine"), h("span", { key: 'cc0643c35bf18d6b5f94cb54e0ef1581c5c1c40e', class: "machine-id" }, this.machineId))), h("div", { key: '05c18fe1c2156e319e6b0dfc84a6f81195a39f43', class: "mqtt", part: "mqtt" }, h("ind-status-dot", { key: 'a996efe70d20d6b4e959bd561ea0b630041ea1d5', state: this.mqttState, size: "md" }), this.mqttLabel && h("span", { key: '581bbb1e39b55a6dd62ba5934889c9081f315933', class: "mqtt-label" }, this.mqttLabel)), h("span", { key: '0d1b3d6cae7d50d0a53d7faa7c355b9ae448a4c6', class: "spacer" }), h("div", { key: 'd07097da54bb7c4131794b7968fe2dc636a33155', class: "meta", part: "meta" }, this.version && h("span", { key: '54b37c493d4560788c3b21f6b9578f8e4fb07060', class: "version" }, this.version), this.docsUrl && (h("a", { key: 'b910f3b11e15f53c88476220cef17570c252c98a', class: "docs", href: this.docsUrl, target: "_blank", rel: "noopener noreferrer" }, "Documentation"))), h("div", { key: 'b014dfd65ae0b40838b2f8ca028121f6a5def777', class: "actions", part: "actions" }, h("slot", { key: '692d5aaeff691d0b4e276d725514b9ae77b421a6', name: "actions" }, !this.hideChangeMachine && (h("button", { key: 'f814337835093319db4fd627f91b24eac116e1cc', type: "button", class: "action", onClick: () => this.indChangeMachine.emit() }, "Change machine")), !this.hideDisconnect && (h("button", { key: 'f6a03e8bd9f1972f65e805e92a8259ff6a61217c', type: "button", class: "action action--danger", onClick: () => this.indDisconnect.emit() }, "Disconnect"))))));
     }
     static get is() { return "ind-app-header"; }
     static get encapsulation() { return "shadow"; }