@ind-ds/core 0.1.0 → 0.2.0

package/dist/collection/components/molecules/alarm-row/alarm-row.css

@@ -0,0 +1,42 @@
+:host {
+  grid-template-columns: 28px auto 1fr auto auto;
+}
+
+:host([acknowledged]) {
+  opacity: 0.6;
+}
+
+.prio {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--ind-font-weight-bold, 700);
+  font-size: var(--ind-font-size-xs, 10px);
+  border-radius: var(--ind-radius-sm, 2px);
+  padding: 2px 0;
+  color: var(--ind-color-palette-neutral-1000, #fff);
+}
+
+.prio-high-high { background: var(--ind-alarm-high-high-bg, #dc2626); }
+.prio-high { background: var(--ind-alarm-high-bg, #f59e0b); color: var(--ind-alarm-high-fg, #000); }
+.prio-low { background: var(--ind-alarm-low-bg, #0891b2); }
+.prio-low-low { background: var(--ind-alarm-low-low-bg, #7c3aed); }
+
+.acked {
+  font-size: var(--ind-font-size-xs, 10px);
+  color: var(--ind-state-running-bg, #16a34a);
+  white-space: nowrap;
+}
+
+/* Unacknowledged high-high pulses to draw the eye. */
+:host([priority="high-high"]:not([acknowledged])) .prio {
+  animation: ind-alarm-row-pulse var(--ind-motion-blink-slow, 1000ms) ease-in-out infinite;
+}
+
+@keyframes ind-alarm-row-pulse {
+  50% { opacity: 0.45; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([priority="high-high"]:not([acknowledged])) .prio { animation: none; }
+}

package/dist/collection/components/molecules/alarm-row/alarm-row.js

@@ -0,0 +1,166 @@
+import { h, Host } from "@stencil/core";
+const PRIORITY_LABEL = {
+    'high-high': 'HH',
+    high: 'H',
+    low: 'L',
+    'low-low': 'LL',
+};
+/**
+ * One line in an alarm summary / list. Shows the ISA-18.2 priority, the tag,
+ * the message, a timestamp and an acknowledge button. Emits `indAck`.
+ */
+export class IndAlarmRow {
+    /** Alarm priority. */
+    priority = 'high';
+    /** Source tag (e.g. "PT-101"). */
+    tag;
+    /** Alarm message. */
+    message;
+    /** Pre-formatted timestamp string. */
+    time;
+    /** Acknowledged state — dims the row and hides the ack button. */
+    acknowledged = false;
+    /** Fires when the operator acknowledges this alarm. */
+    indAck;
+    render() {
+        return (h(Host, { key: 'c361a5cc2d2d1839f81d90a883af3a9ec53085cb', role: "row", "aria-label": `${PRIORITY_LABEL[this.priority]} alarm ${this.tag ?? ''} ${this.message}`, "aria-live": this.priority === 'high-high' && !this.acknowledged ? 'assertive' : 'polite' }, h("span", { key: '6471d9f6b21a764ba85d89f371e6a3d6fccb60de', class: `prio prio-${this.priority}`, part: "priority" }, PRIORITY_LABEL[this.priority]), this.tag && h("span", { key: '907433595d8628dacf0815d18556920efe617dd2', class: "tag", part: "tag" }, this.tag), h("span", { key: '971b318c306e65089ac3687fcbdde2f98b6708b7', class: "msg", part: "message" }, this.message), this.time && h("span", { key: '3ccae3c4fff8f219320899a8d635b672f145aa40', class: "time", part: "time" }, this.time), !this.acknowledged ? (h("ind-button", { class: "ack", part: "ack", variant: "ghost", size: "sm", label: "ACK", onIndActivate: () => this.indAck.emit() })) : (h("span", { class: "acked", part: "acked" }, "ACK \u2713"))));
+    }
+    static get is() { return "ind-alarm-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/row.css", "alarm-row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/row.css", "alarm-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "priority": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AlarmRowPriority",
+                    "resolved": "\"high\" | \"high-high\" | \"low\" | \"low-low\"",
+                    "references": {
+                        "AlarmRowPriority": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/molecules/alarm-row/alarm-row.tsx",
+                            "id": "src/components/molecules/alarm-row/alarm-row.tsx::AlarmRowPriority"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alarm priority."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "priority",
+                "defaultValue": "'high'"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Source tag (e.g. \"PT-101\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alarm message."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message"
+            },
+            "time": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-formatted timestamp string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time"
+            },
+            "acknowledged": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Acknowledged state \u2014 dims the row and hides the ack button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "acknowledged",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indAck",
+                "name": "indAck",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the operator acknowledges this alarm."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=alarm-row.js.map

package/dist/collection/components/molecules/alarm-row/alarm-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alarm-row.js","sourceRoot":"","sources":["../../../../src/components/molecules/alarm-row/alarm-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI9E,MAAM,cAAc,GAAqC;IACvD,WAAW,EAAE,IAAI;IACjB,IAAI,EAAE,GAAG;IACT,GAAG,EAAE,GAAG;IACR,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF;;;GAGG;AAMH,MAAM,OAAO,WAAW;IACtB,sBAAsB;IACG,QAAQ,GAAqB,MAAM,CAAC;IAC7D,kCAAkC;IAC1B,GAAG,CAAU;IACrB,qBAAqB;IACb,OAAO,CAAU;IACzB,sCAAsC;IAC9B,IAAI,CAAU;IACtB,kEAAkE;IACzC,YAAY,GAAY,KAAK,CAAC;IAEvD,uDAAuD;IAC9C,MAAM,CAAsB;IAErC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,gBACE,GAAG,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,IAAI,CAAC,GAAG,IAAI,EAAE,IAAI,IAAI,CAAC,OAAO,EAAE,eAC3E,IAAI,CAAC,QAAQ,KAAK,WAAW,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ;YAEvF,6DAAM,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAC,UAAU,IAAE,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAQ;YAChG,IAAI,CAAC,GAAG,IAAI,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,IAAE,IAAI,CAAC,GAAG,CAAQ;YAC3D,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAQ;YACrD,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ;YAC9D,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CACpB,kBACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,KAAK,EACX,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GACvC,CACH,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,iBAAa,CAC9C,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type AlarmRowPriority = 'high-high' | 'high' | 'low' | 'low-low';\n\nconst PRIORITY_LABEL: Record<AlarmRowPriority, string> = {\n  'high-high': 'HH',\n  high: 'H',\n  low: 'L',\n  'low-low': 'LL',\n};\n\n/**\n * One line in an alarm summary / list. Shows the ISA-18.2 priority, the tag,\n * the message, a timestamp and an acknowledge button. Emits `indAck`.\n */\n@Component({\n  tag: 'ind-alarm-row',\n  styleUrls: ['../_shared/row.css', 'alarm-row.css'],\n  shadow: true,\n})\nexport class IndAlarmRow {\n  /** Alarm priority. */\n  @Prop({ reflect: true }) priority: AlarmRowPriority = 'high';\n  /** Source tag (e.g. \"PT-101\"). */\n  @Prop() tag?: string;\n  /** Alarm message. */\n  @Prop() message!: string;\n  /** Pre-formatted timestamp string. */\n  @Prop() time?: string;\n  /** Acknowledged state — dims the row and hides the ack button. */\n  @Prop({ reflect: true }) acknowledged: boolean = false;\n\n  /** Fires when the operator acknowledges this alarm. */\n  @Event() indAck!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host\n        role=\"row\"\n        aria-label={`${PRIORITY_LABEL[this.priority]} alarm ${this.tag ?? ''} ${this.message}`}\n        aria-live={this.priority === 'high-high' && !this.acknowledged ? 'assertive' : 'polite'}\n      >\n        <span class={`prio prio-${this.priority}`} part=\"priority\">{PRIORITY_LABEL[this.priority]}</span>\n        {this.tag && <span class=\"tag\" part=\"tag\">{this.tag}</span>}\n        <span class=\"msg\" part=\"message\">{this.message}</span>\n        {this.time && <span class=\"time\" part=\"time\">{this.time}</span>}\n        {!this.acknowledged ? (\n          <ind-button\n            class=\"ack\"\n            part=\"ack\"\n            variant=\"ghost\"\n            size=\"sm\"\n            label=\"ACK\"\n            onIndActivate={() => this.indAck.emit()}\n          />\n        ) : (\n          <span class=\"acked\" part=\"acked\">ACK ✓</span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/audit-row/audit-row.css

@@ -0,0 +1,19 @@
+:host {
+  grid-template-columns: auto auto auto 1fr;
+}
+
+.user {
+  font-weight: var(--ind-font-weight-semibold, 600);
+  white-space: nowrap;
+}
+
+.action {
+  color: var(--ind-surface-text-secondary);
+  white-space: nowrap;
+}
+
+.detail {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-muted);
+}

package/dist/collection/components/molecules/audit-row/audit-row.js

@@ -0,0 +1,111 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One line in an audit trail (21 CFR Part 11 style): timestamp, user, action
+ * and an optional before/after detail. Read-only.
+ */
+export class IndAuditRow {
+    /** Pre-formatted timestamp. */
+    time;
+    /** Operator / account that performed the action. */
+    user;
+    /** Action performed (e.g. "Setpoint change"). */
+    action;
+    /** Detail / before→after (e.g. "PIC-101: 3.2 → 4.0 bar"). */
+    detail;
+    render() {
+        return (h(Host, { key: '356b5a563a71a434a20861f89bb4432226a01f75', role: "row", "aria-label": `${this.user} ${this.action}` }, this.time && h("span", { key: '980265f527805524e74f0e6ab9860666c748140d', class: "time", part: "time" }, this.time), h("span", { key: '9ebb03e648474ea6f2dd85f3fd6985b54b226e29', class: "user", part: "user" }, this.user), h("span", { key: '081a06916ecf269bc6d4615fe41d5206bb2d89ac', class: "action", part: "action" }, this.action), this.detail && h("span", { key: '1418ee8d918d9d368847c6f0f0e046bc4d90f6e5', class: "msg detail", part: "detail" }, this.detail)));
+    }
+    static get is() { return "ind-audit-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/row.css", "audit-row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/row.css", "audit-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "time": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-formatted timestamp."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time"
+            },
+            "user": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Operator / account that performed the action."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "user"
+            },
+            "action": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Action performed (e.g. \"Setpoint change\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "action"
+            },
+            "detail": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Detail / before\u2192after (e.g. \"PIC-101: 3.2 \u2192 4.0 bar\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "detail"
+            }
+        };
+    }
+}
+//# sourceMappingURL=audit-row.js.map

package/dist/collection/components/molecules/audit-row/audit-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audit-row.js","sourceRoot":"","sources":["../../../../src/components/molecules/audit-row/audit-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,WAAW;IACtB,+BAA+B;IACvB,IAAI,CAAU;IACtB,oDAAoD;IAC5C,IAAI,CAAU;IACtB,iDAAiD;IACzC,MAAM,CAAU;IACxB,6DAA6D;IACrD,MAAM,CAAU;IAExB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE;YACvD,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ;YAC/D,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ;YACjD,6DAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ;YACtD,IAAI,CAAC,MAAM,IAAI,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACtE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * One line in an audit trail (21 CFR Part 11 style): timestamp, user, action\n * and an optional before/after detail. Read-only.\n */\n@Component({\n  tag: 'ind-audit-row',\n  styleUrls: ['../_shared/row.css', 'audit-row.css'],\n  shadow: true,\n})\nexport class IndAuditRow {\n  /** Pre-formatted timestamp. */\n  @Prop() time?: string;\n  /** Operator / account that performed the action. */\n  @Prop() user!: string;\n  /** Action performed (e.g. \"Setpoint change\"). */\n  @Prop() action!: string;\n  /** Detail / before→after (e.g. \"PIC-101: 3.2 → 4.0 bar\"). */\n  @Prop() detail?: string;\n\n  render() {\n    return (\n      <Host role=\"row\" aria-label={`${this.user} ${this.action}`}>\n        {this.time && <span class=\"time\" part=\"time\">{this.time}</span>}\n        <span class=\"user\" part=\"user\">{this.user}</span>\n        <span class=\"action\" part=\"action\">{this.action}</span>\n        {this.detail && <span class=\"msg detail\" part=\"detail\">{this.detail}</span>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/batch-parameter-row/batch-parameter-row.css

@@ -0,0 +1,35 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-4, 8px);
+  padding: var(--ind-spacing-3, 6px) var(--ind-spacing-4, 8px);
+  font-family: var(--ind-font-family-sans);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  border-bottom: 1px solid var(--ind-surface-border-subtle);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+  box-sizing: border-box;
+}
+
+.label {
+  flex: 1 1 auto;
+  font-size: var(--ind-font-size-base, 12px);
+}
+
+.field {
+  flex: 0 0 96px;
+}
+
+.unit {
+  flex: 0 0 auto;
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-secondary);
+  min-width: 2.4em;
+}
+
+.target {
+  flex: 0 0 auto;
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-muted);
+}
+
+:host([invalid]) .label { color: var(--ind-state-fault-bg, #dc2626); }