@ind-ds/core 0.1.0 → 0.2.0

package/dist/collection/components/atoms/xy-point/xy-point.css

@@ -0,0 +1,49 @@
+:host {
+  display: inline-block;
+  width: var(--ind-xy-size, 120px);
+  height: var(--ind-xy-size, 120px);
+  --_accent: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+}
+
+:host([variant="running"]) { --_accent: var(--ind-state-running-bg, #16a34a); }
+:host([variant="warning"])  { --_accent: var(--ind-state-warning-bg, #f59e0b); }
+:host([variant="fault"])    { --_accent: var(--ind-state-fault-bg, #dc2626); }
+
+.plot {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.field {
+  fill: var(--ind-surface-sunken, light-dark(#fff, #000));
+  stroke: var(--ind-surface-border-default, #2a3340);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.axis {
+  stroke: var(--ind-surface-border-subtle, #2a3340);
+  stroke-width: 1;
+  stroke-dasharray: 2 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.trail {
+  fill: none;
+  stroke: color-mix(in srgb, var(--_accent) 50%, transparent);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.point {
+  fill: var(--_accent);
+  stroke: var(--ind-surface-panel, #11161c);
+  stroke-width: 1.5;
+  transition: cx var(--ind-motion-duration-base, 200ms) ease, cy var(--ind-motion-duration-base, 200ms) ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .point { transition: none; }
+}

package/dist/collection/components/atoms/xy-point/xy-point.js

@@ -0,0 +1,237 @@
+import { h, Host } from "@stencil/core";
+export class IndXyPoint {
+    /** X value of the operating point. */
+    x = 0;
+    /** Y value of the operating point. */
+    y = 0;
+    /** X axis bounds. */
+    xMin = 0;
+    xMax = 100;
+    /** Y axis bounds. */
+    yMin = 0;
+    yMax = 100;
+    /** Optional trail of past points, oldest → newest, as [x, y] pairs. Pass as a property. */
+    trail = [];
+    /** Color intent of the point. */
+    variant = 'default';
+    /** Accessible label. */
+    label;
+    w = 100;
+    hh = 100;
+    mapX(v) {
+        const span = this.xMax - this.xMin || 1;
+        return ((v - this.xMin) / span) * this.w;
+    }
+    mapY(v) {
+        const span = this.yMax - this.yMin || 1;
+        return this.hh - ((v - this.yMin) / span) * this.hh;
+    }
+    render() {
+        const px = this.mapX(this.x);
+        const py = this.mapY(this.y);
+        const trailPath = (this.trail ?? [])
+            .map((p, i) => `${i === 0 ? 'M' : 'L'}${this.mapX(p[0]).toFixed(1)},${this.mapY(p[1]).toFixed(1)}`)
+            .join(' ');
+        return (h(Host, { key: '34f5e9950ed30202bb232b92a0757d0fb8d336b5', role: "img", "aria-label": this.label ?? `operating point x ${this.x}, y ${this.y}` }, h("svg", { key: 'b0fcac199aa93ea9c9f43e7f4165e9dd440f04b9', class: "plot", part: "plot", viewBox: "0 0 100 100", "aria-hidden": "true" }, h("rect", { key: '8e84e601506d8ae9e7bdbcf086e594bc8dc095d1', class: "field", x: "0", y: "0", width: "100", height: "100" }), h("line", { key: '9dadfed6703161fade8bbbb7e5ab00b18a56f211', class: "axis", x1: "0", y1: "50", x2: "100", y2: "50" }), h("line", { key: '23600a64369f6d09c0b145d9452898163cd290cc', class: "axis", x1: "50", y1: "0", x2: "50", y2: "100" }), trailPath && h("path", { key: '4f68cdc008ce9658ae8e6590121a6a2aeaaf9661', class: "trail", part: "trail", d: trailPath }), h("circle", { key: 'a9304647f41f7d338f77fd52c6b3dd746c545c21', class: "point", part: "point", cx: px, cy: py, r: "3.5" }))));
+    }
+    static get is() { return "ind-xy-point"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xy-point.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xy-point.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "x": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "X value of the operating point."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "x",
+                "defaultValue": "0"
+            },
+            "y": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Y value of the operating point."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "y",
+                "defaultValue": "0"
+            },
+            "xMin": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "X axis bounds."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "x-min",
+                "defaultValue": "0"
+            },
+            "xMax": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "x-max",
+                "defaultValue": "100"
+            },
+            "yMin": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Y axis bounds."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "y-min",
+                "defaultValue": "0"
+            },
+            "yMax": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "y-max",
+                "defaultValue": "100"
+            },
+            "trail": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "[number, number][]",
+                    "resolved": "[number, number][]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional trail of past points, oldest \u2192 newest, as [x, y] pairs. Pass as a property."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "XyVariant",
+                    "resolved": "\"default\" | \"fault\" | \"running\" | \"warning\"",
+                    "references": {
+                        "XyVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/xy-point/xy-point.tsx",
+                            "id": "src/components/atoms/xy-point/xy-point.tsx::XyVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color intent of the point."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=xy-point.js.map

package/dist/collection/components/atoms/xy-point/xy-point.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xy-point.js","sourceRoot":"","sources":["../../../../src/components/atoms/xy-point/xy-point.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type XyVariant = 'default' | 'running' | 'warning' | 'fault';\n\n@Component({\n  tag: 'ind-xy-point',\n  styleUrl: 'xy-point.css',\n  shadow: true,\n})\nexport class IndXyPoint {\n  /** X value of the operating point. */\n  @Prop() x: number = 0;\n  /** Y value of the operating point. */\n  @Prop() y: number = 0;\n  /** X axis bounds. */\n  @Prop() xMin: number = 0;\n  @Prop() xMax: number = 100;\n  /** Y axis bounds. */\n  @Prop() yMin: number = 0;\n  @Prop() yMax: number = 100;\n  /** Optional trail of past points, oldest → newest, as [x, y] pairs. Pass as a property. */\n  @Prop() trail: [number, number][] = [];\n  /** Color intent of the point. */\n  @Prop({ reflect: true }) variant: XyVariant = 'default';\n  /** Accessible label. */\n  @Prop() label?: string;\n\n  private readonly w = 100;\n  private readonly hh = 100;\n\n  private mapX(v: number): number {\n    const span = this.xMax - this.xMin || 1;\n    return ((v - this.xMin) / span) * this.w;\n  }\n  private mapY(v: number): number {\n    const span = this.yMax - this.yMin || 1;\n    return this.hh - ((v - this.yMin) / span) * this.hh;\n  }\n\n  render() {\n    const px = this.mapX(this.x);\n    const py = this.mapY(this.y);\n    const trailPath = (this.trail ?? [])\n      .map((p, i) => `${i === 0 ? 'M' : 'L'}${this.mapX(p[0]).toFixed(1)},${this.mapY(p[1]).toFixed(1)}`)\n      .join(' ');\n    return (\n      <Host role=\"img\" aria-label={this.label ?? `operating point x ${this.x}, y ${this.y}`}>\n        <svg class=\"plot\" part=\"plot\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n          <rect class=\"field\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" />\n          <line class=\"axis\" x1=\"0\" y1=\"50\" x2=\"100\" y2=\"50\" />\n          <line class=\"axis\" x1=\"50\" y1=\"0\" x2=\"50\" y2=\"100\" />\n          {trailPath && <path class=\"trail\" part=\"trail\" d={trailPath} />}\n          <circle class=\"point\" part=\"point\" cx={px} cy={py} r=\"3.5\" />\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/_shared/binding.css

@@ -0,0 +1,41 @@
+/* Shared chrome for protocol tag-binding cards (MQTT, OPC UA). */
+.card-head {
+  align-items: center;
+}
+
+.address {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+  background: var(--ind-surface-sunken);
+  padding: 3px 6px;
+  border-radius: var(--ind-radius-sm, 2px);
+  word-break: break-all;
+}
+
+.readout {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--ind-spacing-4, 8px);
+}
+
+.value {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-lg, 14px);
+  font-weight: var(--ind-font-weight-semibold, 600);
+}
+
+.flags {
+  display: inline-flex;
+  gap: var(--ind-spacing-2, 4px);
+}
+
+.flag {
+  font-size: var(--ind-font-size-xs, 10px);
+  color: var(--ind-surface-text-muted);
+  background: var(--ind-surface-raised);
+  border-radius: var(--ind-radius-sm, 2px);
+  padding: 1px 5px;
+  white-space: nowrap;
+}

package/dist/collection/components/molecules/_shared/card.css

@@ -0,0 +1,51 @@
+/* Shared chrome for molecule "card" components. Pulled in first via
+ * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ind-spacing-3, 6px);
+  padding: var(--ind-spacing-5, 12px);
+  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));
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+  box-sizing: border-box;
+  min-width: 160px;
+}
+
+.card-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--ind-spacing-3, 6px);
+}
+
+.card-title {
+  font-size: var(--ind-font-size-xs, 10px);
+  font-weight: var(--ind-font-weight-bold, 700);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+}
+
+.card-tag {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+}
+
+.card-detail {
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+}
+
+/* Fault chrome cue, opt-in by reflecting state="fault" on the host. */
+:host([state="fault"]) {
+  border-color: var(--ind-state-fault-bg, #dc2626);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);
+}
+:host([state="warning"]) {
+  border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));
+}

package/dist/collection/components/molecules/_shared/equipment-card.css

@@ -0,0 +1,20 @@
+/* Shared layout for the equipment faceplate cards (motor, pump, valve, tank).
+ * Loaded after card.css and before each component's own sheet. */
+.body {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-5, 12px);
+}
+
+.symbol {
+  flex: 0 0 auto;
+}
+
+.metrics {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ind-spacing-2, 4px);
+  margin-left: auto;
+  align-items: flex-end;
+  text-align: right;
+}

package/dist/collection/components/molecules/_shared/row.css

@@ -0,0 +1,34 @@
+/* Shared chrome for log-style molecule rows (alarm, event, audit, historical).
+ * Each component sets its own grid-template-columns. */
+:host {
+  display: grid;
+  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);
+  font-size: var(--ind-font-size-base, 12px);
+  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
+  border-bottom: 1px solid var(--ind-surface-border-subtle);
+  box-sizing: border-box;
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.time {
+  font-family: var(--ind-font-family-mono);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
+  white-space: nowrap;
+}
+
+.tag {
+  font-family: var(--ind-font-family-mono);
+  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
+  white-space: nowrap;
+}
+
+.msg {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/collection/components/molecules/alarm-badge-group/alarm-badge-group.css

@@ -0,0 +1,43 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ind-spacing-2, 4px);
+  font-family: var(--ind-font-family-sans);
+  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
+}
+
+.pill {
+  display: inline-flex;
+  align-items: stretch;
+  border-radius: var(--ind-radius-sm, 2px);
+  overflow: hidden;
+  font-size: var(--ind-font-size-sm, 11px);
+  font-weight: var(--ind-font-weight-bold, 700);
+  line-height: 1;
+  border: 1px solid transparent;
+}
+
+.pill-label {
+  padding: 3px 5px;
+  color: var(--ind-color-palette-neutral-1000, #fff);
+}
+
+.pill-count {
+  padding: 3px 6px;
+  background: var(--ind-surface-raised);
+  color: var(--ind-surface-text-primary);
+  min-width: 1.2em;
+  text-align: center;
+}
+
+.pill-high-high .pill-label { background: var(--ind-alarm-high-high-bg, #dc2626); }
+.pill-high-high { border-color: var(--ind-alarm-high-high-border, #f87171); }
+.pill-high .pill-label { background: var(--ind-alarm-high-bg, #f59e0b); color: var(--ind-alarm-high-fg, #000); }
+.pill-high { border-color: var(--ind-alarm-high-border, #fcd34d); }
+.pill-low .pill-label { background: var(--ind-alarm-low-bg, #0891b2); }
+.pill-low { border-color: var(--ind-alarm-low-border, #22d3ee); }
+.pill-low-low .pill-label { background: var(--ind-alarm-low-low-bg, #7c3aed); }
+.pill-low-low { border-color: var(--ind-alarm-low-low-border, #a78bfa); }
+
+.pill-total .pill-label { background: var(--ind-surface-border-strong, #5a6776); }
+.pill-total { border-color: var(--ind-surface-border-strong, #5a6776); }

package/dist/collection/components/molecules/alarm-badge-group/alarm-badge-group.js

@@ -0,0 +1,168 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Row of ISA-18.2 priority counters (HH / H / L / LL). Gives an at-a-glance
+ * alarm summary for a unit or the whole plant, colored by priority.
+ */
+export class IndAlarmBadgeGroup {
+    /** High-high count. */
+    highHigh = 0;
+    /** High count. */
+    high = 0;
+    /** Low count. */
+    low = 0;
+    /** Low-low count. */
+    lowLow = 0;
+    /** Hide priorities whose count is zero. */
+    hideZero = false;
+    /** Append a total pill. */
+    showTotal = false;
+    get total() {
+        return this.highHigh + this.high + this.low + this.lowLow;
+    }
+    render() {
+        const items = [
+            { key: 'high-high', label: 'HH', count: this.highHigh },
+            { key: 'high', label: 'H', count: this.high },
+            { key: 'low', label: 'L', count: this.low },
+            { key: 'low-low', label: 'LL', count: this.lowLow },
+        ].filter((i) => !this.hideZero || i.count > 0);
+        return (h(Host, { key: '201a3706da7e4d7861c46d089f0640c2b9fb23f4', role: "group", "aria-label": `${this.total} active alarms` }, items.map((i) => (h("span", { class: `pill pill-${i.key}`, part: "pill", key: i.key }, h("span", { class: "pill-label", part: "pill-label" }, i.label), h("span", { class: "pill-count", part: "pill-count" }, i.count)))), this.showTotal && (h("span", { key: '12adde650a7be127226d5d65b6981008d3e72484', class: "pill pill-total", part: "total" }, h("span", { key: '624406d463a074110c7e11bb26af668e85a6ed71', class: "pill-label" }, "\u03A3"), h("span", { key: '23b0c696feb5cb9dbb38c41d9185e6f1e8c4ee4d', class: "pill-count" }, this.total)))));
+    }
+    static get is() { return "ind-alarm-badge-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["alarm-badge-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["alarm-badge-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "highHigh": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "High-high count."
+                },
+                "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": "High count."
+                },
+                "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": "Low count."
+                },
+                "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": "Low-low count."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "low-low",
+                "defaultValue": "0"
+            },
+            "hideZero": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide priorities whose count is zero."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-zero",
+                "defaultValue": "false"
+            },
+            "showTotal": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Append a total pill."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-total",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=alarm-badge-group.js.map

package/dist/collection/components/molecules/alarm-badge-group/alarm-badge-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alarm-badge-group.js","sourceRoot":"","sources":["../../../../src/components/molecules/alarm-badge-group/alarm-badge-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,kBAAkB;IAC7B,uBAAuB;IACf,QAAQ,GAAW,CAAC,CAAC;IAC7B,kBAAkB;IACV,IAAI,GAAW,CAAC,CAAC;IACzB,iBAAiB;IACT,GAAG,GAAW,CAAC,CAAC;IACxB,qBAAqB;IACb,MAAM,GAAW,CAAC,CAAC;IAC3B,2CAA2C;IACnC,QAAQ,GAAY,KAAK,CAAC;IAClC,2BAA2B;IACnB,SAAS,GAAY,KAAK,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,MAAM,KAAK,GAAG;YACZ,EAAE,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;YACvD,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE;YAC7C,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE;YAC3C,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE;SACpD,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAE/C,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,GAAG,IAAI,CAAC,KAAK,gBAAgB;YACzD,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAChB,YAAM,KAAK,EAAE,aAAa,CAAC,CAAC,GAAG,EAAE,EAAE,IAAI,EAAC,MAAM,EAAC,GAAG,EAAE,CAAC,CAAC,GAAG;gBACvD,YAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY,IAAE,CAAC,CAAC,KAAK,CAAQ;gBAC3D,YAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY,IAAE,CAAC,CAAC,KAAK,CAAQ,CACtD,CACR,CAAC;YACD,IAAI,CAAC,SAAS,IAAI,CACjB,6DAAM,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO;gBACxC,6DAAM,KAAK,EAAC,YAAY,aAAS;gBACjC,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CACvC,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * Row of ISA-18.2 priority counters (HH / H / L / LL). Gives an at-a-glance\n * alarm summary for a unit or the whole plant, colored by priority.\n */\n@Component({\n  tag: 'ind-alarm-badge-group',\n  styleUrl: 'alarm-badge-group.css',\n  shadow: true,\n})\nexport class IndAlarmBadgeGroup {\n  /** High-high count. */\n  @Prop() highHigh: number = 0;\n  /** High count. */\n  @Prop() high: number = 0;\n  /** Low count. */\n  @Prop() low: number = 0;\n  /** Low-low count. */\n  @Prop() lowLow: number = 0;\n  /** Hide priorities whose count is zero. */\n  @Prop() hideZero: boolean = false;\n  /** Append a total pill. */\n  @Prop() showTotal: boolean = false;\n\n  private get total(): number {\n    return this.highHigh + this.high + this.low + this.lowLow;\n  }\n\n  render() {\n    const items = [\n      { key: 'high-high', label: 'HH', count: this.highHigh },\n      { key: 'high', label: 'H', count: this.high },\n      { key: 'low', label: 'L', count: this.low },\n      { key: 'low-low', label: 'LL', count: this.lowLow },\n    ].filter((i) => !this.hideZero || i.count > 0);\n\n    return (\n      <Host role=\"group\" aria-label={`${this.total} active alarms`}>\n        {items.map((i) => (\n          <span class={`pill pill-${i.key}`} part=\"pill\" key={i.key}>\n            <span class=\"pill-label\" part=\"pill-label\">{i.label}</span>\n            <span class=\"pill-count\" part=\"pill-count\">{i.count}</span>\n          </span>\n        ))}\n        {this.showTotal && (\n          <span class=\"pill pill-total\" part=\"total\">\n            <span class=\"pill-label\">Σ</span>\n            <span class=\"pill-count\">{this.total}</span>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}