npm - @ind-ds/core - Versions diffs - 0.1.1 → 0.2.1 - Mend

@ind-ds/core 0.1.1 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1426) hide show

package/dist/esm/ind-motor-control-panel.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-motor-control-panel.entry.js","sources":["src/components/organisms/_shared/panel.css?tag=ind-motor-control-panel&encapsulation=shadow","src/components/organisms/_shared/control-panel.css?tag=ind-motor-control-panel&encapsulation=shadow","src/components/organisms/motor-control-panel/motor-control-panel.css?tag=ind-motor-control-panel&encapsulation=shadow","src/components/organisms/motor-control-panel/motor-control-panel.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n display: flex;\n flex-direction: column;\n background: var(--ind-surface-panel);\n border: 1px solid var(--ind-surface-border-default);\n border-radius: var(--ind-radius-md, 3px);\n font-family: var(--ind-font-family-sans);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n box-sizing: border-box;\n overflow: hidden;\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-4, 8px);\n padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n border-bottom: 1px solid var(--ind-surface-border-subtle);\n background: var(--ind-surface-raised);\n flex: 0 0 auto;\n}\n\n.panel-titles {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.panel-title {\n font-size: var(--ind-font-size-md, 13px);\n font-weight: var(--ind-font-weight-semibold, 600);\n line-height: 1.2;\n}\n\n.panel-subtitle {\n font-size: var(--ind-font-size-xs, 10px);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n display: flex;\n flex-direction: column;\n gap: var(--ind-spacing-4, 8px);\n padding: var(--ind-spacing-5, 12px);\n min-height: 0;\n}\n\n.panel-toolbar {\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-3, 6px);\n padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n border-bottom: 1px solid var(--ind-surface-border-subtle);\n flex: 0 0 auto;\n}\n\n.panel-list {\n display: flex;\n flex-direction: column;\n overflow: auto;\n}\n\n.panel-grid {\n display: grid;\n gap: var(--ind-spacing-4, 8px);\n padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n padding: var(--ind-spacing-7, 20px);\n text-align: center;\n color: var(--ind-surface-text-muted);\n font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n flex: 1 1 auto;\n}\n","/* Flatten the faceplate / control molecules when embedded in a control panel,\n * so the panel provides the single card chrome. */\n.panel-body > ind-motor-card,\n.panel-body > ind-pump-card,\n.panel-body > ind-valve-card,\n.panel-body > ind-start-stop-control,\n.panel-body > ind-setpoint-control,\n.panel-body > ind-speed-control,\n.panel-body > ind-mode-selector,\n.panel-body > ind-recipe-selector {\n border: 0;\n padding: 0;\n background: transparent;\n min-width: 0;\n}\n",":host {\n min-width: 280px;\n}\n","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"],"names":[],"mappings":"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"}

package/dist/esm/ind-motor.entry.js ADDED Viewed

@@ -0,0 +1,29 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+const equipmentCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_w:48px;--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([size="sm"]){--_w:32px}:host([size="md"]){--_w:48px}:host([size="lg"]){--_w:72px}:host([state="running"]){--_stroke:var(--ind-state-running-border, #4ade80);--_fill:var(--ind-state-running-bg, #16a34a);--_accent:var(--ind-state-running-bg, #16a34a)}:host([state="stopped"]){--_stroke:var(--ind-state-stopped-border, #8390a0);--_fill:var(--ind-state-stopped-bg, #5a6776);--_accent:var(--ind-state-stopped-bg, #5a6776)}:host([state="fault"]){--_stroke:var(--ind-state-fault-border, #f87171);--_fill:var(--ind-state-fault-bg, #dc2626);--_accent:var(--ind-state-fault-bg, #dc2626)}:host([state="warning"]){--_stroke:var(--ind-state-warning-border, #fcd34d);--_fill:var(--ind-state-warning-bg, #f59e0b);--_accent:var(--ind-state-warning-bg, #f59e0b)}:host([state="maintenance"]){--_stroke:var(--ind-state-maintenance-border, #60a5fa);--_fill:var(--ind-state-maintenance-bg, #2563eb);--_accent:var(--ind-state-maintenance-bg, #2563eb)}.symbol{display:block;width:var(--_w);height:auto;overflow:visible}.body{fill:color-mix(in srgb, var(--_fill) 22%, transparent);stroke:var(--_stroke);stroke-width:1.5;vector-effect:non-scaling-stroke}.accent{fill:var(--_accent);stroke:none}.stroke{fill:none;stroke:var(--_stroke);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}.caption{display:flex;flex-direction:column;align-items:center;line-height:var(--ind-font-line-height-tight, 1.1)}.tag{font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.label{color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font-size:var(--ind-font-size-xs, 10px)}@media (prefers-reduced-motion: reduce){.spin,.pulse{animation:none !important}}`;
+const motorCss = () => `.glyph{fill:var(--_stroke);font-family:var(--ind-font-family-sans, system-ui, sans-serif);font-weight:var(--ind-font-weight-bold, 700);font-size:14px}.run-ring{fill:none;stroke:var(--_accent);stroke-width:2;stroke-dasharray:6 6;opacity:0;transform-origin:22px 24px}:host([state="running"]) .run-ring{opacity:1;animation:ind-motor-spin 3s linear infinite}@keyframes ind-motor-spin{to{transform:rotate(360deg)}}`;
+const IndMotor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Process state. */
+    state = 'stopped';
+    /** Visual size. */
+    size = 'md';
+    /** Equipment tag (e.g. "M-201"). */
+    tag;
+    /** Human label. */
+    label;
+    render() {
+        const name = this.label ?? this.tag ?? 'motor';
+        return (h(Host, { key: '1ee3962dd285d6202145155fde4296009c759444', role: "img", "aria-label": `${name} — ${this.state}` }, h("svg", { key: '07b47dd2b80f9d32ec4a54f82208cbf2fe1b6646', class: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, h("circle", { key: 'cf5b7ab9ab0e379c73f88708aae2388e344b29f1', class: "body", cx: "22", cy: "24", r: "14" }), h("line", { key: 'bc02e341f6aa878c14b2de8abb022ca1d0cbdb15', class: "stroke", x1: "36", y1: "24", x2: "44", y2: "24" }), h("text", { key: '5d9165f5bfe7054ceda5807868198d03aed36829', class: "glyph", x: "22", y: "24", "text-anchor": "middle", "dominant-baseline": "central" }, "M"), h("circle", { key: 'cade6157f921fbf0d4281ba80e8991ebcb261c1e', class: "run-ring", cx: "22", cy: "24", r: "14" })), (this.tag || this.label) && (h("div", { key: '91d7a976ce7a5404243345155502e4f25a6d7990', class: "caption" }, this.tag && h("span", { key: 'fc438469150d3430dda1c7eaa4d12c045c2fa184', class: "tag" }, this.tag), this.label && h("span", { key: '5980fecb73e38cc38bb266178a97937b0ad0abec', class: "label" }, this.label)))));
+    }
+};
+IndMotor.style = equipmentCss() + motorCss();
+export { IndMotor as ind_motor };
+//# sourceMappingURL=ind-motor.entry.js.map
+//# sourceMappingURL=ind-motor.entry.js.map

package/dist/esm/ind-motor.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-motor.entry.js","sources":["src/components/atoms/_equipment/equipment.css?tag=ind-motor&encapsulation=shadow","src/components/atoms/motor/motor.css?tag=ind-motor&encapsulation=shadow","src/components/atoms/motor/motor.tsx"],"sourcesContent":["/* Shared base styles for ind-ds process-equipment symbols.\n * Referenced via styleUrls alongside each component's own CSS. */\n:host {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: var(--ind-spacing-2, 4px);\n font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n --_w: 48px;\n --_stroke: var(--ind-state-stopped-border, #8390a0);\n --_fill: var(--ind-state-stopped-bg, #5a6776);\n --_accent: var(--ind-state-stopped-bg, #5a6776);\n}\n\n:host([size=\"sm\"]) { --_w: 32px; }\n:host([size=\"md\"]) { --_w: 48px; }\n:host([size=\"lg\"]) { --_w: 72px; }\n\n:host([state=\"running\"]) { --_stroke: var(--ind-state-running-border, #4ade80); --_fill: var(--ind-state-running-bg, #16a34a); --_accent: var(--ind-state-running-bg, #16a34a); }\n:host([state=\"stopped\"]) { --_stroke: var(--ind-state-stopped-border, #8390a0); --_fill: var(--ind-state-stopped-bg, #5a6776); --_accent: var(--ind-state-stopped-bg, #5a6776); }\n:host([state=\"fault\"]) { --_stroke: var(--ind-state-fault-border, #f87171); --_fill: var(--ind-state-fault-bg, #dc2626); --_accent: var(--ind-state-fault-bg, #dc2626); }\n:host([state=\"warning\"]) { --_stroke: var(--ind-state-warning-border, #fcd34d); --_fill: var(--ind-state-warning-bg, #f59e0b); --_accent: var(--ind-state-warning-bg, #f59e0b); }\n:host([state=\"maintenance\"]) { --_stroke: var(--ind-state-maintenance-border, #60a5fa); --_fill: var(--ind-state-maintenance-bg, #2563eb); --_accent: var(--ind-state-maintenance-bg, #2563eb); }\n\n.symbol {\n display: block;\n width: var(--_w);\n height: auto;\n overflow: visible;\n}\n\n.body {\n fill: color-mix(in srgb, var(--_fill) 22%, transparent);\n stroke: var(--_stroke);\n stroke-width: 1.5;\n vector-effect: non-scaling-stroke;\n}\n\n.accent {\n fill: var(--_accent);\n stroke: none;\n}\n\n.stroke {\n fill: none;\n stroke: var(--_stroke);\n stroke-width: 1.5;\n stroke-linecap: round;\n vector-effect: non-scaling-stroke;\n}\n\n.caption {\n display: flex;\n flex-direction: column;\n align-items: center;\n line-height: var(--ind-font-line-height-tight, 1.1);\n}\n\n.tag {\n font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n font-weight: var(--ind-font-weight-semibold, 600);\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.label {\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n font-size: var(--ind-font-size-xs, 10px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .spin, .pulse { animation: none !important; }\n}\n",".glyph {\n fill: var(--_stroke);\n font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n font-weight: var(--ind-font-weight-bold, 700);\n font-size: 14px;\n}\n\n.run-ring {\n fill: none;\n stroke: var(--_accent);\n stroke-width: 2;\n stroke-dasharray: 6 6;\n opacity: 0;\n transform-origin: 22px 24px;\n}\n\n:host([state=\"running\"]) .run-ring {\n opacity: 1;\n animation: ind-motor-spin 3s linear infinite;\n}\n\n@keyframes ind-motor-spin {\n to { transform: rotate(360deg); }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { EquipmentState, EquipmentSize } from '../_equipment/types';\n\n@Component({\n tag: 'ind-motor',\n styleUrls: ['../_equipment/equipment.css', 'motor.css'],\n shadow: true,\n})\nexport class IndMotor {\n /** Process state. */\n @Prop({ reflect: true }) state: EquipmentState = 'stopped';\n /** Visual size. */\n @Prop({ reflect: true }) size: EquipmentSize = 'md';\n /** Equipment tag (e.g. \"M-201\"). */\n @Prop() tag?: string;\n /** Human label. */\n @Prop() label?: string;\n\n render() {\n const name = this.label ?? this.tag ?? 'motor';\n return (\n <Host role=\"img\" aria-label={`${name} — ${this.state}`}>\n {/* ISA motor: circle with shaft and \"M\". */}\n <svg class=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n <circle class=\"body\" cx=\"22\" cy=\"24\" r=\"14\" />\n <line class=\"stroke\" x1=\"36\" y1=\"24\" x2=\"44\" y2=\"24\" />\n <text class=\"glyph\" x=\"22\" y=\"24\" text-anchor=\"middle\" dominant-baseline=\"central\">M</text>\n <circle class=\"run-ring\" cx=\"22\" cy=\"24\" r=\"14\" />\n </svg>\n {(this.tag || this.label) && (\n <div class=\"caption\">\n {this.tag && <span class=\"tag\">{this.tag}</span>}\n {this.label && <span class=\"label\">{this.label}</span>}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,ypEAAypE,CAAC;;ACAtrE,MAAM,QAAQ,GAAG,MAAM,CAAC,yZAAyZ,CAAC;;MCQra,QAAQ,GAAA,MAAA;;;;;IAEM,KAAK,GAAmB,SAAS;;IAEjC,IAAI,GAAkB,IAAI;;AAE3C,IAAA,GAAG;;AAEH,IAAA,KAAK;IAEb,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,OAAO;QAC9C,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAA,GAAA,EAAM,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAEpD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAA,EACxD,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,CAAG,EAC9C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAA,CAAG,EACvD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,aAAA,EAAa,QAAQ,EAAA,mBAAA,EAAmB,SAAS,EAAA,EAAA,GAAA,CAAS,EAC3F,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,CAC9C,EACL,CAAC,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,MACtB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EACjB,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,EAC/C,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClD,CACP,CACI;;;;;;;"}

package/dist/esm/ind-mqtt-monitor.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-D2yNiL0d.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bls_NlWP.js';
 const mqttMonitorCss = () => `: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}`;
@@ -57,7 +57,7 @@ const IndMqttMonitor = class {
         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 watchers() { return {
         "log": [{

package/dist/esm/ind-mqtt-tag-binding.entry.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+const cardCss = () => `: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))}: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))}`;
+const bindingCss = () => `.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}`;
+const mqttTagBindingCss = () => `:host{min-width:220px}`;
+const IndMqttTagBinding = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Friendly label (e.g. "Tank level"). */
+    label;
+    /** MQTT topic (e.g. "plant/line2/tank/level"). */
+    topic;
+    /** Last received value. */
+    value;
+    /** Engineering unit. */
+    unit;
+    /** Quality of Service level. */
+    qos = 0;
+    /** Retained message flag. */
+    retained = false;
+    /** Broker connection state. */
+    state = 'disconnected';
+    render() {
+        const v = this.value !== undefined ? String(this.value) : '—';
+        return (h(Host, { key: '91e10cb05ff15d0433c21671217755a07a8cf839', role: "group", "aria-label": `MQTT ${this.topic}` }, h("div", { key: '6c6e89543957fc8a46ea7453c3d635a434682ba9', class: "card-head" }, h("span", { key: '66c5e517be5affa4884a3cc17684604e3f31155d', class: "card-title", part: "label" }, this.label ?? 'MQTT'), h("ind-connection-indicator", { key: '45424df1e2ae710564e27c07cec08efbe756a793', state: this.state, size: "sm" })), h("code", { key: 'c75951ebdfd0ebd1bbaab8320d4e0f6444687a00', class: "address", part: "topic" }, this.topic), h("div", { key: '94d6cc331ee1ff28ec16c27d3cff3fc144d6cf35', class: "readout", part: "readout" }, h("span", { key: '5e0b8f02e7efa155f7902f432687896557052d9a', class: "value", part: "value" }, v, this.unit ? ` ${this.unit}` : ''), h("span", { key: '2d48d247486292a2ed3ff510ae0708e8fc195d9a', class: "flags", part: "flags" }, h("span", { key: '7d403bb7af76c35aafd529bcea1ca7ca13752640', class: "flag", part: "qos" }, "QoS ", this.qos), this.retained && h("span", { key: 'a4357d910b2aa15a9fa9e782f0dd8402db60f172', class: "flag", part: "retain" }, "retained")))));
+    }
+};
+IndMqttTagBinding.style = cardCss() + (bindingCss() + mqttTagBindingCss());
+export { IndMqttTagBinding as ind_mqtt_tag_binding };
+//# sourceMappingURL=ind-mqtt-tag-binding.entry.js.map
+//# sourceMappingURL=ind-mqtt-tag-binding.entry.js.map

package/dist/esm/ind-mqtt-tag-binding.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-mqtt-tag-binding.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-mqtt-tag-binding&encapsulation=shadow","src/components/molecules/_shared/binding.css?tag=ind-mqtt-tag-binding&encapsulation=shadow","src/components/molecules/mqtt-tag-binding/mqtt-tag-binding.css?tag=ind-mqtt-tag-binding&encapsulation=shadow","src/components/molecules/mqtt-tag-binding/mqtt-tag-binding.tsx"],"sourcesContent":["/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n display: flex;\n flex-direction: column;\n gap: var(--ind-spacing-3, 6px);\n padding: var(--ind-spacing-5, 12px);\n background: var(--ind-surface-panel);\n border: 1px solid var(--ind-surface-border-default);\n border-radius: var(--ind-radius-md, 3px);\n font-family: var(--ind-font-family-sans);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.card-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n font-size: var(--ind-font-size-xs, 10px);\n font-weight: var(--ind-font-weight-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n border-color: var(--ind-state-fault-bg, #dc2626);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n","/* Shared chrome for protocol tag-binding cards (MQTT, OPC UA). */\n.card-head {\n align-items: center;\n}\n\n.address {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n background: var(--ind-surface-sunken);\n padding: 3px 6px;\n border-radius: var(--ind-radius-sm, 2px);\n word-break: break-all;\n}\n\n.readout {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ind-spacing-4, 8px);\n}\n\n.value {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-lg, 14px);\n font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n.flags {\n display: inline-flex;\n gap: var(--ind-spacing-2, 4px);\n}\n\n.flag {\n font-size: var(--ind-font-size-xs, 10px);\n color: var(--ind-surface-text-muted);\n background: var(--ind-surface-raised);\n border-radius: var(--ind-radius-sm, 2px);\n padding: 1px 5px;\n white-space: nowrap;\n}\n",":host {\n min-width: 220px;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { ConnectionState } from '../../atoms/connection-indicator/connection-indicator';\n\n/**\n * Visualises the binding between an MQTT topic and a process value: topic,\n * last value, QoS, retain flag and the broker connection state.\n */\n@Component({\n tag: 'ind-mqtt-tag-binding',\n styleUrls: ['../_shared/card.css', '../_shared/binding.css', 'mqtt-tag-binding.css'],\n shadow: true,\n})\nexport class IndMqttTagBinding {\n /** Friendly label (e.g. \"Tank level\"). */\n @Prop() label?: string;\n /** MQTT topic (e.g. \"plant/line2/tank/level\"). */\n @Prop() topic!: string;\n /** Last received value. */\n @Prop() value?: number | string;\n /** Engineering unit. */\n @Prop() unit?: string;\n /** Quality of Service level. */\n @Prop() qos: 0 | 1 | 2 = 0;\n /** Retained message flag. */\n @Prop() retained: boolean = false;\n /** Broker connection state. */\n @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n\n render() {\n const v = this.value !== undefined ? String(this.value) : '—';\n return (\n <Host role=\"group\" aria-label={`MQTT ${this.topic}`}>\n <div class=\"card-head\">\n <span class=\"card-title\" part=\"label\">{this.label ?? 'MQTT'}</span>\n <ind-connection-indicator state={this.state} size=\"sm\" />\n </div>\n <code class=\"address\" part=\"topic\">{this.topic}</code>\n <div class=\"readout\" part=\"readout\">\n <span class=\"value\" part=\"value\">{v}{this.unit ? ` ${this.unit}` : ''}</span>\n <span class=\"flags\" part=\"flags\">\n <span class=\"flag\" part=\"qos\">QoS {this.qos}</span>\n {this.retained && <span class=\"flag\" part=\"retain\">retained</span>}\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,UAAU,GAAG,MAAM,CAAC,yxBAAyxB,CAAC;;ACApzB,MAAM,iBAAiB,GAAG,MAAM,CAAC,sBAAsB,CAAC;;MCY3C,iBAAiB,GAAA,MAAA;;;;;AAEpB,IAAA,KAAK;;AAEL,IAAA,KAAK;;AAEL,IAAA,KAAK;;AAEL,IAAA,IAAI;;IAEJ,GAAG,GAAc,CAAC;;IAElB,QAAQ,GAAY,KAAK;;IAER,KAAK,GAAoB,cAAc;IAEhE,MAAM,GAAA;QACJ,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG;QAC7D,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,KAAA,EAAQ,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EACjD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,CAAQ,EACnE,CAAA,CAAA,0BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA0B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,CACrD,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACtD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,EAAE,CAAQ,EAC7E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAA,UAAM,IAAI,CAAC,GAAG,CAAQ,EAClD,IAAI,CAAC,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAA,EAAA,UAAA,CAAgB,CAC7D,CACH,CACD;;;;;;;"}

package/dist/esm/ind-nav-item.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-D2yNiL0d.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.js';
 const navItemCss = () => `:host{display:block;font-family:var(--ind-font-family-sans)}.item{position:relative;display:flex;align-items:center;gap:var(--ind-spacing-3, 6px);width:100%;height:var(--ind-nav-item-height, 38px);padding:0 var(--ind-spacing-5, 12px);background:transparent;border:none;color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));font:inherit;font-size:var(--ind-font-size-base, 12px);text-align:left;text-decoration:none;cursor:pointer;user-select:none;box-sizing:border-box;transition:background-color var(--ind-motion-duration-fast, 120ms),     color            var(--ind-motion-duration-fast, 120ms)}.indicator{width:10px;font-size:9px;color:var(--ind-feedback-info-bg, #0891b2);opacity:0;transition:opacity var(--ind-motion-duration-fast, 120ms);text-align:center}.content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{font-size:var(--ind-font-size-xs, 10px);font-family:var(--ind-font-family-mono);font-weight:var(--ind-font-weight-bold, 700);font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1);padding:1px var(--ind-spacing-2, 4px);min-width:16px;text-align:center;border-radius:var(--ind-radius-sm, 2px);background:var(--ind-feedback-error-bg, #dc2626);color:var(--ind-feedback-error-fg, #ffffff);line-height:1.2}.item:hover:not(:disabled):not([aria-disabled="true"]){background:var(--ind-surface-raised);color:var(--ind-surface-text-primary)}.item:focus-visible{outline:2px solid var(--ind-surface-focus-ring, #22d3ee);outline-offset:-2px}:host([active]) .item{background:var(--ind-surface-raised);color:var(--ind-surface-text-primary);font-weight:var(--ind-font-weight-semibold, 600)}:host([active]) .indicator{opacity:1}:host([disabled]){opacity:0.4;pointer-events:none}`;
@@ -31,11 +31,11 @@ const IndNavItem = class {
         const ariaCurrent = this.active ? 'page' : undefined;
         const showBadge = this.badge !== undefined && this.badge !== '' && this.badge !== null;
         const inner = [
-            h("span", { key: 'ad9e90d0aab88711ff9e5f5db2cd988a76520c3c', class: "indicator", part: "indicator", "aria-hidden": "true" }, "\u25B6"),
-            h("span", { key: '33fa94a1e111cfc992dbd20ec1c8cfc9a30b18c5', class: "content", part: "content" }, h("slot", { key: 'bfc5072816f07d0fc276d67621efa09d4ce421f4' }, this.label)),
+            h("span", { key: 'eff40a1126717fd21592eca3f809c1cf0c3b510d', class: "indicator", part: "indicator", "aria-hidden": "true" }, "\u25B6"),
+            h("span", { key: '87b50e12513279369e4acfe97ea65cdb30f70237', class: "content", part: "content" }, h("slot", { key: '0ade4bc1a93ad8ca42f82141bbfc3b33848d4e04' }, this.label)),
             showBadge ? h("span", { class: "badge", part: "badge" }, this.badge) : null,
         ];
-        return (h(Host, { key: '895afdd6a1a347adadb7213e4b42ece2d3e32c65' }, this.href ? (h("a", { class: "item", part: "item", href: this.href, "aria-current": ariaCurrent, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "item", part: "item", disabled: this.disabled, "aria-current": ariaCurrent, onClick: this.onClick }, inner))));
+        return (h(Host, { key: 'fd2006e3f0b3653dc76c1f28d24279994feda1b7' }, this.href ? (h("a", { class: "item", part: "item", href: this.href, "aria-current": ariaCurrent, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, inner)) : (h("button", { type: "button", class: "item", part: "item", disabled: this.disabled, "aria-current": ariaCurrent, onClick: this.onClick }, inner))));
     }
 };
 IndNavItem.style = navItemCss();

package/dist/esm/ind-network-status-card.entry.js ADDED Viewed

@@ -0,0 +1,37 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+const cardCss = () => `: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))}: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))}`;
+const networkStatusCardCss = () => `:host{min-width:200px}:host([state="error"]){border-color:var(--ind-state-fault-bg, #dc2626)}.signal{display:flex;align-items:center;gap:var(--ind-spacing-4, 8px)}.address{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.throughput{display:flex;gap:var(--ind-spacing-6, 16px);font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-primary)}.arrow{color:var(--ind-surface-text-muted)}`;
+const IndNetworkStatusCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Link label (e.g. "Cellular WAN"). */
+    label = 'Network';
+    /** Signal level 0–4 for the bars. */
+    level = 0;
+    /** IP / address. */
+    address;
+    /** Downlink throughput (kbit/s). */
+    rxKbps;
+    /** Uplink throughput (kbit/s). */
+    txKbps;
+    /** Overall link state. */
+    state = 'disconnected';
+    fmt(kbps) {
+        if (kbps === undefined)
+            return '—';
+        return kbps >= 1000 ? `${(kbps / 1000).toFixed(1)} Mb/s` : `${Math.round(kbps)} kb/s`;
+    }
+    render() {
+        return (h(Host, { key: '1751b85b43388f16fae5f172f6f8df561fd8a629', role: "group", "aria-label": `${this.label} ${this.state}` }, h("div", { key: '8135d6bbfbee58a33abc67fc14da817444ea598d', class: "card-head" }, h("span", { key: 'cc6baee0b2673ea8d460352f011417d8aa009366', class: "card-title", part: "label" }, this.label), h("ind-connection-indicator", { key: 'b80f177558c359d38a945b5a19d3320a4e90eefe', state: this.state, size: "sm" })), h("div", { key: '64e367c87acb2589e46ca50fd7eac63107d80a8a', class: "signal", part: "signal" }, h("ind-signal-quality", { key: 'b0751c2aecf1d0c3c8cb9a6ec3eccdad8ab17e3c', level: this.level, size: "md" }), this.address && h("code", { key: 'fb6ac7d8631724723ea2adc6907bc38d38bfa12b', class: "address", part: "address" }, this.address)), h("div", { key: '962d4cacd7e5e44531e2f4181b5686c40b99799f', class: "throughput", part: "throughput" }, h("span", { key: 'f1a5b4fd42b426591195dce0c6fe36e8b6649765', class: "tp" }, h("span", { key: '75b92dc90ab7663deddf37570a8a842aaaf75e13', class: "arrow", "aria-hidden": "true" }, "\u2193"), " ", this.fmt(this.rxKbps)), h("span", { key: '9faa7be07797784f537d60348497499409a3aaf2', class: "tp" }, h("span", { key: '03fe2661325064012b3f7bd033e386e5baccff21', class: "arrow", "aria-hidden": "true" }, "\u2191"), " ", this.fmt(this.txKbps)))));
+    }
+};
+IndNetworkStatusCard.style = cardCss() + networkStatusCardCss();
+export { IndNetworkStatusCard as ind_network_status_card };
+//# sourceMappingURL=ind-network-status-card.entry.js.map
+//# sourceMappingURL=ind-network-status-card.entry.js.map

package/dist/esm/ind-network-status-card.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-network-status-card.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-network-status-card&encapsulation=shadow","src/components/molecules/network-status-card/network-status-card.css?tag=ind-network-status-card&encapsulation=shadow","src/components/molecules/network-status-card/network-status-card.tsx"],"sourcesContent":["/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n display: flex;\n flex-direction: column;\n gap: var(--ind-spacing-3, 6px);\n padding: var(--ind-spacing-5, 12px);\n background: var(--ind-surface-panel);\n border: 1px solid var(--ind-surface-border-default);\n border-radius: var(--ind-radius-md, 3px);\n font-family: var(--ind-font-family-sans);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.card-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n font-size: var(--ind-font-size-xs, 10px);\n font-weight: var(--ind-font-weight-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n border-color: var(--ind-state-fault-bg, #dc2626);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n",":host {\n min-width: 200px;\n}\n\n:host([state=\"error\"]) {\n border-color: var(--ind-state-fault-bg, #dc2626);\n}\n\n.signal {\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-4, 8px);\n}\n\n.address {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary);\n}\n\n.throughput {\n display: flex;\n gap: var(--ind-spacing-6, 16px);\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-primary);\n}\n\n.arrow {\n color: var(--ind-surface-text-muted);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { ConnectionState } from '../../atoms/connection-indicator/connection-indicator';\n\n/**\n * Network link summary: signal quality, address and throughput, with the\n * overall link state. Suits a wireless gateway or cellular modem panel.\n */\n@Component({\n tag: 'ind-network-status-card',\n styleUrls: ['../_shared/card.css', 'network-status-card.css'],\n shadow: true,\n})\nexport class IndNetworkStatusCard {\n /** Link label (e.g. \"Cellular WAN\"). */\n @Prop() label: string = 'Network';\n /** Signal level 0–4 for the bars. */\n @Prop() level: number = 0;\n /** IP / address. */\n @Prop() address?: string;\n /** Downlink throughput (kbit/s). */\n @Prop() rxKbps?: number;\n /** Uplink throughput (kbit/s). */\n @Prop() txKbps?: number;\n /** Overall link state. */\n @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n\n private fmt(kbps?: number): string {\n if (kbps === undefined) return '—';\n return kbps >= 1000 ? `${(kbps / 1000).toFixed(1)} Mb/s` : `${Math.round(kbps)} kb/s`;\n }\n\n render() {\n return (\n <Host role=\"group\" aria-label={`${this.label} ${this.state}`}>\n <div class=\"card-head\">\n <span class=\"card-title\" part=\"label\">{this.label}</span>\n <ind-connection-indicator state={this.state} size=\"sm\" />\n </div>\n <div class=\"signal\" part=\"signal\">\n <ind-signal-quality level={this.level} size=\"md\" />\n {this.address && <code class=\"address\" part=\"address\">{this.address}</code>}\n </div>\n <div class=\"throughput\" part=\"throughput\">\n <span class=\"tp\"><span class=\"arrow\" aria-hidden=\"true\">↓</span> {this.fmt(this.rxKbps)}</span>\n <span class=\"tp\"><span class=\"arrow\" aria-hidden=\"true\">↑</span> {this.fmt(this.txKbps)}</span>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,oBAAoB,GAAG,MAAM,CAAC,6fAA6f,CAAC;;MCYrhB,oBAAoB,GAAA,MAAA;;;;;IAEvB,KAAK,GAAW,SAAS;;IAEzB,KAAK,GAAW,CAAC;;AAEjB,IAAA,OAAO;;AAEP,IAAA,MAAM;;AAEN,IAAA,MAAM;;IAEW,KAAK,GAAoB,cAAc;AAExD,IAAA,GAAG,CAAC,IAAa,EAAA;QACvB,IAAI,IAAI,KAAK,SAAS;AAAE,YAAA,OAAO,GAAG;AAClC,QAAA,OAAO,IAAI,IAAI,IAAI,GAAG,CAAA,EAAG,CAAC,IAAI,GAAG,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA,KAAA,CAAO,GAAG,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;;IAGvF,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,EACzD,CAAA,CAAA,0BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA0B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,CACrD,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC/B,CAAA,CAAA,oBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAoB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,EAClD,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CACvE,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,YAAY,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,IAAI,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAA,aAAA,EAAa,MAAM,EAAA,EAAA,QAAA,CAAS,OAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAC/F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,IAAI,EAAA,EAAC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAA,aAAA,EAAa,MAAM,EAAA,EAAA,QAAA,CAAS,OAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,CAC3F,CACD;;;;;;;"}

package/dist/esm/ind-oee-dashboard.entry.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+const panelCss = () => `: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}`;
+const oeeDashboardCss = () => `:host{min-width:460px}.headline{margin-left:auto;display:flex;align-items:baseline;gap:var(--ind-spacing-2, 4px)}.headline-value{font-family:var(--ind-font-family-mono);font-size:var(--ind-font-size-3xl, 28px);font-weight:var(--ind-font-weight-bold, 700);line-height:1}.headline-unit{font-size:var(--ind-font-size-sm, 11px);color:var(--ind-surface-text-secondary)}.gauges{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--ind-spacing-4, 8px);padding:var(--ind-spacing-5, 12px);justify-items:center}`;
+const IndOeeDashboard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    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" }))));
+    }
+};
+IndOeeDashboard.style = panelCss() + oeeDashboardCss();
+export { IndOeeDashboard as ind_oee_dashboard };
+//# sourceMappingURL=ind-oee-dashboard.entry.js.map
+//# sourceMappingURL=ind-oee-dashboard.entry.js.map

package/dist/esm/ind-oee-dashboard.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-oee-dashboard.entry.js","sources":["src/components/organisms/_shared/panel.css?tag=ind-oee-dashboard&encapsulation=shadow","src/components/organisms/oee-dashboard/oee-dashboard.css?tag=ind-oee-dashboard&encapsulation=shadow","src/components/organisms/oee-dashboard/oee-dashboard.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n display: flex;\n flex-direction: column;\n background: var(--ind-surface-panel);\n border: 1px solid var(--ind-surface-border-default);\n border-radius: var(--ind-radius-md, 3px);\n font-family: var(--ind-font-family-sans);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n box-sizing: border-box;\n overflow: hidden;\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-4, 8px);\n padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n border-bottom: 1px solid var(--ind-surface-border-subtle);\n background: var(--ind-surface-raised);\n flex: 0 0 auto;\n}\n\n.panel-titles {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.panel-title {\n font-size: var(--ind-font-size-md, 13px);\n font-weight: var(--ind-font-weight-semibold, 600);\n line-height: 1.2;\n}\n\n.panel-subtitle {\n font-size: var(--ind-font-size-xs, 10px);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n display: flex;\n flex-direction: column;\n gap: var(--ind-spacing-4, 8px);\n padding: var(--ind-spacing-5, 12px);\n min-height: 0;\n}\n\n.panel-toolbar {\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-3, 6px);\n padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n border-bottom: 1px solid var(--ind-surface-border-subtle);\n flex: 0 0 auto;\n}\n\n.panel-list {\n display: flex;\n flex-direction: column;\n overflow: auto;\n}\n\n.panel-grid {\n display: grid;\n gap: var(--ind-spacing-4, 8px);\n padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n padding: var(--ind-spacing-7, 20px);\n text-align: center;\n color: var(--ind-surface-text-muted);\n font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n flex: 1 1 auto;\n}\n",":host {\n min-width: 460px;\n}\n\n.headline {\n margin-left: auto;\n display: flex;\n align-items: baseline;\n gap: var(--ind-spacing-2, 4px);\n}\n\n.headline-value {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-3xl, 28px);\n font-weight: var(--ind-font-weight-bold, 700);\n line-height: 1;\n}\n\n.headline-unit {\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary);\n}\n\n.gauges {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--ind-spacing-4, 8px);\n padding: var(--ind-spacing-5, 12px);\n justify-items: center;\n}\n","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"],"names":[],"mappings":"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"}

package/dist/esm/ind-opcua-tag-binding.entry.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+const cardCss = () => `: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))}: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))}`;
+const bindingCss = () => `.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}`;
+const opcuaTagBindingCss = () => `:host{min-width:240px}.quality-good{color:var(--ind-state-running-bg, #16a34a)}.quality-uncertain{color:var(--ind-state-warning-bg, #f59e0b)}.quality-bad{color:var(--ind-state-fault-bg, #dc2626)}`;
+const QUALITY_LABEL = {
+    good: 'Good',
+    uncertain: 'Uncertain',
+    bad: 'Bad',
+};
+const IndOpcuaTagBinding = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Friendly label. */
+    label;
+    /** OPC UA node id (e.g. "ns=2;s=Channel1.Device1.Tag1"). */
+    nodeId;
+    /** Last value. */
+    value;
+    /** Engineering unit. */
+    unit;
+    /** OPC UA data quality. */
+    quality = 'good';
+    /** Session connection state. */
+    state = 'disconnected';
+    render() {
+        const v = this.value !== undefined ? String(this.value) : '—';
+        return (h(Host, { key: '26f858e3df518f2fe80a5cbeb59795e4ed37ad3f', role: "group", "aria-label": `OPC UA ${this.nodeId}` }, h("div", { key: 'f31f9254e702f62fead7512729a263962b4ca367', class: "card-head" }, h("span", { key: '9db34364812e44fb1b97280307c3272d39af20c1', class: "card-title", part: "label" }, this.label ?? 'OPC UA'), h("ind-connection-indicator", { key: 'd86586072da78417f77876fe72f775803eef9a08', state: this.state, size: "sm" })), h("code", { key: 'e88b589b63b314ea472d7bb1e49391bd2bf6e1b4', class: "address", part: "node-id" }, this.nodeId), h("div", { key: 'a96a356955875ee22a2380963cae2b335a217c1c', class: "readout", part: "readout" }, h("span", { key: 'dafe6819c30f5e8fc4fa2c3d1ec74fe7d45688cc', class: "value", part: "value" }, v, this.unit ? ` ${this.unit}` : ''), h("span", { key: '7fb82abd9f0acc310e882c415ac63ef7c45e417d', class: `flag quality quality-${this.quality}`, part: "quality" }, QUALITY_LABEL[this.quality]))));
+    }
+};
+IndOpcuaTagBinding.style = cardCss() + (bindingCss() + opcuaTagBindingCss());
+export { IndOpcuaTagBinding as ind_opcua_tag_binding };
+//# sourceMappingURL=ind-opcua-tag-binding.entry.js.map
+//# sourceMappingURL=ind-opcua-tag-binding.entry.js.map

package/dist/esm/ind-opcua-tag-binding.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-opcua-tag-binding.entry.js","sources":["src/components/molecules/_shared/card.css?tag=ind-opcua-tag-binding&encapsulation=shadow","src/components/molecules/_shared/binding.css?tag=ind-opcua-tag-binding&encapsulation=shadow","src/components/molecules/opcua-tag-binding/opcua-tag-binding.css?tag=ind-opcua-tag-binding&encapsulation=shadow","src/components/molecules/opcua-tag-binding/opcua-tag-binding.tsx"],"sourcesContent":["/* Shared chrome for molecule \"card\" components. Pulled in first via\n * `styleUrls: ['../_shared/card.css', 'xxx.css']` so each card can override. */\n:host {\n display: flex;\n flex-direction: column;\n gap: var(--ind-spacing-3, 6px);\n padding: var(--ind-spacing-5, 12px);\n background: var(--ind-surface-panel);\n border: 1px solid var(--ind-surface-border-default);\n border-radius: var(--ind-radius-md, 3px);\n font-family: var(--ind-font-family-sans);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n box-sizing: border-box;\n min-width: 160px;\n}\n\n.card-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ind-spacing-3, 6px);\n}\n\n.card-title {\n font-size: var(--ind-font-size-xs, 10px);\n font-weight: var(--ind-font-weight-bold, 700);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-tag {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n\n.card-detail {\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n/* Fault chrome cue, opt-in by reflecting state=\"fault\" on the host. */\n:host([state=\"fault\"]) {\n border-color: var(--ind-state-fault-bg, #dc2626);\n box-shadow: 0 0 0 1px color-mix(in srgb, var(--ind-state-fault-bg, #dc2626) 30%, transparent);\n}\n:host([state=\"warning\"]) {\n border-color: color-mix(in srgb, var(--ind-state-warning-bg, #f59e0b) 60%, var(--ind-surface-border-default));\n}\n","/* Shared chrome for protocol tag-binding cards (MQTT, OPC UA). */\n.card-head {\n align-items: center;\n}\n\n.address {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n background: var(--ind-surface-sunken);\n padding: 3px 6px;\n border-radius: var(--ind-radius-sm, 2px);\n word-break: break-all;\n}\n\n.readout {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ind-spacing-4, 8px);\n}\n\n.value {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-lg, 14px);\n font-weight: var(--ind-font-weight-semibold, 600);\n}\n\n.flags {\n display: inline-flex;\n gap: var(--ind-spacing-2, 4px);\n}\n\n.flag {\n font-size: var(--ind-font-size-xs, 10px);\n color: var(--ind-surface-text-muted);\n background: var(--ind-surface-raised);\n border-radius: var(--ind-radius-sm, 2px);\n padding: 1px 5px;\n white-space: nowrap;\n}\n",":host {\n min-width: 240px;\n}\n\n.quality-good { color: var(--ind-state-running-bg, #16a34a); }\n.quality-uncertain { color: var(--ind-state-warning-bg, #f59e0b); }\n.quality-bad { color: var(--ind-state-fault-bg, #dc2626); }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { ConnectionState } from '../../atoms/connection-indicator/connection-indicator';\nimport type { DataQuality } from '../historical-value-row/historical-value-row';\n\nconst QUALITY_LABEL: Record<DataQuality, string> = {\n good: 'Good',\n uncertain: 'Uncertain',\n bad: 'Bad',\n};\n\n/**\n * Visualises the binding to an OPC UA node: node id, last value, data quality\n * and the session connection state.\n */\n@Component({\n tag: 'ind-opcua-tag-binding',\n styleUrls: ['../_shared/card.css', '../_shared/binding.css', 'opcua-tag-binding.css'],\n shadow: true,\n})\nexport class IndOpcuaTagBinding {\n /** Friendly label. */\n @Prop() label?: string;\n /** OPC UA node id (e.g. \"ns=2;s=Channel1.Device1.Tag1\"). */\n @Prop() nodeId!: string;\n /** Last value. */\n @Prop() value?: number | string;\n /** Engineering unit. */\n @Prop() unit?: string;\n /** OPC UA data quality. */\n @Prop({ reflect: true }) quality: DataQuality = 'good';\n /** Session connection state. */\n @Prop({ reflect: true }) state: ConnectionState = 'disconnected';\n\n render() {\n const v = this.value !== undefined ? String(this.value) : '—';\n return (\n <Host role=\"group\" aria-label={`OPC UA ${this.nodeId}`}>\n <div class=\"card-head\">\n <span class=\"card-title\" part=\"label\">{this.label ?? 'OPC UA'}</span>\n <ind-connection-indicator state={this.state} size=\"sm\" />\n </div>\n <code class=\"address\" part=\"node-id\">{this.nodeId}</code>\n <div class=\"readout\" part=\"readout\">\n <span class=\"value\" part=\"value\">{v}{this.unit ? ` ${this.unit}` : ''}</span>\n <span class={`flag quality quality-${this.quality}`} part=\"quality\">{QUALITY_LABEL[this.quality]}</span>\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,2zCAA2zC,CAAC;;ACAn1C,MAAM,UAAU,GAAG,MAAM,CAAC,yxBAAyxB,CAAC;;ACApzB,MAAM,kBAAkB,GAAG,MAAM,CAAC,mMAAmM,CAAC;;ACItO,MAAM,aAAa,GAAgC;AACjD,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,GAAG,EAAE,KAAK;CACX;MAWY,kBAAkB,GAAA,MAAA;;;;;AAErB,IAAA,KAAK;;AAEL,IAAA,MAAM;;AAEN,IAAA,KAAK;;AAEL,IAAA,IAAI;;IAEa,OAAO,GAAgB,MAAM;;IAE7B,KAAK,GAAoB,cAAc;IAEhE,MAAM,GAAA;QACJ,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG;QAC7D,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,YAAA,EAAa,UAAU,IAAI,CAAC,MAAM,CAAA,CAAE,EAAA,EACpD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAQ,EACrE,CAAA,CAAA,0BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAA0B,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAA,CAAG,CACrD,EACN,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,MAAM,CAAQ,EACzD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAQ,EAC7E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,qBAAA,EAAwB,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS,IAAE,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CACpG,CACD;;;;;;;"}

package/dist/esm/ind-pipe.entry.js ADDED Viewed

@@ -0,0 +1,35 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+const pipeCss = () => `:host{display:inline-block;--_thickness:8px;--_fluid:var(--ind-surface-border-strong, #5a6776)}:host([orientation="horizontal"]){width:64px;height:var(--_thickness)}:host([orientation="vertical"]){width:var(--_thickness);height:64px}:host([tone="running"]){--_fluid:var(--ind-state-running-bg, #16a34a)}:host([tone="fault"]){--_fluid:var(--ind-state-fault-bg, #dc2626)}:host([tone="warning"]){--_fluid:var(--ind-state-warning-bg, #f59e0b)}.pipe{position:relative;display:block;width:100%;height:100%;background:var(--ind-surface-raised, #1b222c);border:1px solid var(--ind-surface-border-strong, #5a6776);border-radius:2px;overflow:hidden}.flow{position:absolute;inset:0;background:var(--_fluid);opacity:0.85}:host([flow="forward"]) .flow,:host([flow="reverse"]) .flow{background-image:repeating-linear-gradient(     var(--_angle, 90deg),     color-mix(in srgb, #fff 28%, transparent) 0 4px,     transparent 4px 10px   );background-color:var(--_fluid);background-size:14px 14px}:host([orientation="horizontal"]) .flow{--_angle:90deg}:host([orientation="vertical"]) .flow{--_angle:0deg}:host([flow="forward"][orientation="horizontal"]) .flow{animation:ind-pipe-x 0.7s linear infinite}:host([flow="reverse"][orientation="horizontal"]) .flow{animation:ind-pipe-x 0.7s linear infinite reverse}:host([flow="forward"][orientation="vertical"]) .flow{animation:ind-pipe-y 0.7s linear infinite}:host([flow="reverse"][orientation="vertical"]) .flow{animation:ind-pipe-y 0.7s linear infinite reverse}@keyframes ind-pipe-x{to{background-position:14px 0}}@keyframes ind-pipe-y{to{background-position:0 14px}}@media (prefers-reduced-motion: reduce){.flow{animation:none !important}}`;
+const IndPipe = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Run direction of the segment. */
+    orientation = 'horizontal';
+    /** Flow animation. `none` = static. */
+    flow = 'none';
+    /** Color tone of the fluid. */
+    tone = 'neutral';
+    /** Pipe thickness in px. */
+    thickness = 8;
+    /** Length in px (along the orientation). Defaults to filling the host. */
+    length;
+    /** Accessible label (decorative by default). */
+    label;
+    render() {
+        const horizontal = this.orientation === 'horizontal';
+        const style = { '--_thickness': `${this.thickness}px` };
+        if (this.length !== undefined) {
+            style[horizontal ? 'width' : 'height'] = `${this.length}px`;
+        }
+        return (h(Host, { key: '3120dcbff81eec57ff6d8cb4c8aa375783ed7121', role: this.label ? 'img' : 'presentation', "aria-label": this.label, "aria-hidden": this.label ? undefined : 'true', style: style }, h("span", { key: '3e3d0e87990f290ee93a87af9df619dcac2869bd', class: "pipe", part: "pipe" }, h("span", { key: '0f54ffc6f3737abb2aa86a0b6c0a71cc1f6cb153', class: "flow", part: "flow" }))));
+    }
+};
+IndPipe.style = pipeCss();
+export { IndPipe as ind_pipe };
+//# sourceMappingURL=ind-pipe.entry.js.map
+//# sourceMappingURL=ind-pipe.entry.js.map

package/dist/esm/ind-pipe.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-pipe.entry.js","sources":["src/components/atoms/pipe/pipe.css?tag=ind-pipe&encapsulation=shadow","src/components/atoms/pipe/pipe.tsx"],"sourcesContent":[":host {\n display: inline-block;\n --_thickness: 8px;\n --_fluid: var(--ind-surface-border-strong, #5a6776);\n}\n\n:host([orientation=\"horizontal\"]) { width: 64px; height: var(--_thickness); }\n:host([orientation=\"vertical\"]) { width: var(--_thickness); height: 64px; }\n\n:host([tone=\"running\"]) { --_fluid: var(--ind-state-running-bg, #16a34a); }\n:host([tone=\"fault\"]) { --_fluid: var(--ind-state-fault-bg, #dc2626); }\n:host([tone=\"warning\"]) { --_fluid: var(--ind-state-warning-bg, #f59e0b); }\n\n.pipe {\n position: relative;\n display: block;\n width: 100%;\n height: 100%;\n background: var(--ind-surface-raised, #1b222c);\n border: 1px solid var(--ind-surface-border-strong, #5a6776);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.flow {\n position: absolute;\n inset: 0;\n background: var(--_fluid);\n opacity: 0.85;\n}\n\n/* Dashed overlay conveys flow motion. */\n:host([flow=\"forward\"]) .flow,\n:host([flow=\"reverse\"]) .flow {\n background-image: repeating-linear-gradient(\n var(--_angle, 90deg),\n color-mix(in srgb, #fff 28%, transparent) 0 4px,\n transparent 4px 10px\n );\n background-color: var(--_fluid);\n background-size: 14px 14px;\n}\n\n:host([orientation=\"horizontal\"]) .flow { --_angle: 90deg; }\n:host([orientation=\"vertical\"]) .flow { --_angle: 0deg; }\n\n:host([flow=\"forward\"][orientation=\"horizontal\"]) .flow { animation: ind-pipe-x 0.7s linear infinite; }\n:host([flow=\"reverse\"][orientation=\"horizontal\"]) .flow { animation: ind-pipe-x 0.7s linear infinite reverse; }\n:host([flow=\"forward\"][orientation=\"vertical\"]) .flow { animation: ind-pipe-y 0.7s linear infinite; }\n:host([flow=\"reverse\"][orientation=\"vertical\"]) .flow { animation: ind-pipe-y 0.7s linear infinite reverse; }\n\n@keyframes ind-pipe-x { to { background-position: 14px 0; } }\n@keyframes ind-pipe-y { to { background-position: 0 14px; } }\n\n@media (prefers-reduced-motion: reduce) {\n .flow { animation: none !important; }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type PipeOrientation = 'horizontal' | 'vertical';\nexport type PipeFlow = 'none' | 'forward' | 'reverse';\nexport type PipeTone = 'neutral' | 'running' | 'fault' | 'warning';\n\n@Component({\n tag: 'ind-pipe',\n styleUrl: 'pipe.css',\n shadow: true,\n})\nexport class IndPipe {\n /** Run direction of the segment. */\n @Prop({ reflect: true }) orientation: PipeOrientation = 'horizontal';\n /** Flow animation. `none` = static. */\n @Prop({ reflect: true }) flow: PipeFlow = 'none';\n /** Color tone of the fluid. */\n @Prop({ reflect: true }) tone: PipeTone = 'neutral';\n /** Pipe thickness in px. */\n @Prop() thickness: number = 8;\n /** Length in px (along the orientation). Defaults to filling the host. */\n @Prop() length?: number;\n /** Accessible label (decorative by default). */\n @Prop() label?: string;\n\n render() {\n const horizontal = this.orientation === 'horizontal';\n const style: Record<string, string> = { '--_thickness': `${this.thickness}px` };\n if (this.length !== undefined) {\n style[horizontal ? 'width' : 'height'] = `${this.length}px`;\n }\n return (\n <Host\n role={this.label ? 'img' : 'presentation'}\n aria-label={this.label}\n aria-hidden={this.label ? undefined : 'true'}\n style={style}\n >\n <span class=\"pipe\" part=\"pipe\">\n <span class=\"flow\" part=\"flow\" />\n </span>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,ooDAAooD,CAAC;;MCW/oD,OAAO,GAAA,MAAA;;;;;IAEO,WAAW,GAAoB,YAAY;;IAE3C,IAAI,GAAa,MAAM;;IAEvB,IAAI,GAAa,SAAS;;IAE3C,SAAS,GAAW,CAAC;;AAErB,IAAA,MAAM;;AAEN,IAAA,KAAK;IAEb,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,KAAK,YAAY;QACpD,MAAM,KAAK,GAA2B,EAAE,cAAc,EAAE,CAAA,EAAG,IAAI,CAAC,SAAS,CAAA,EAAA,CAAI,EAAE;AAC/E,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE;AAC7B,YAAA,KAAK,CAAC,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAA,EAAG,IAAI,CAAC,MAAM,IAAI;;AAE7D,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAE,IAAI,CAAC,KAAK,GAAG,KAAK,GAAG,cAAc,EAAA,YAAA,EAC7B,IAAI,CAAC,KAAK,EAAA,aAAA,EACT,IAAI,CAAC,KAAK,GAAG,SAAS,GAAG,MAAM,EAC5C,KAAK,EAAE,KAAK,EAAA,EAEZ,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,CAAG,CAC5B,CACF;;;;;;;"}

package/dist/esm/ind-process-control-panel.entry.js ADDED Viewed

@@ -0,0 +1,55 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bls_NlWP.js';
+const panelCss = () => `: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}`;
+const processControlPanelCss = () => `:host{min-width:280px}.panel-body ind-start-stop-control,.panel-body ind-setpoint-control,.panel-body ind-mode-selector{border:0;padding:0;background:transparent;min-width:0}`;
+const IndProcessControlPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.indStart = createEvent(this, "indStart");
+        this.indStop = createEvent(this, "indStop");
+        this.indSetpoint = createEvent(this, "indSetpoint");
+        this.indMode = createEvent(this, "indMode");
+    }
+    heading;
+    /** Loop tag (e.g. "PIC-101"). */
+    tag;
+    /** Run state. */
+    state = 'stopped';
+    /** Operating mode value. */
+    mode;
+    /** Setpoint (two-way). */
+    setpoint = 0;
+    /** Process value. */
+    pv;
+    min = 0;
+    max = 100;
+    step = 0.1;
+    precision = 1;
+    unit;
+    indStart;
+    indStop;
+    /** Fires with the committed setpoint. */
+    indSetpoint;
+    /** Fires with the selected mode. */
+    indMode;
+    onSetpoint = (e) => {
+        e.stopPropagation();
+        this.setpoint = e.detail;
+        this.indSetpoint.emit(e.detail);
+    };
+    onMode = (e) => {
+        e.stopPropagation();
+        this.indMode.emit(e.detail);
+    };
+    render() {
+        return (h(Host, { key: 'fc6e08112ee9e379316418afd4596562f7bac74c' }, h("div", { key: 'd0439b53f9886f432fca303a32c19f455b98662c', class: "panel-head" }, h("div", { key: '5869ad8f92f0ad1f93e44a2e87494b1efdac685b', class: "panel-titles" }, h("span", { key: '04ad4fc17be186bc8455d35552d96a0585890324', class: "panel-title", part: "heading" }, this.heading), this.tag && h("span", { key: '3e86d67a8ac2edf7bf160522c11446f26331d467', class: "panel-subtitle" }, this.tag))), h("div", { key: '9073f4782be57e9ae933eb7cffb67e3a2522be8a', class: "panel-body" }, h("ind-start-stop-control", { key: 'd5253ca3d2f9e550043c0aa2f054e8596fc99e17', label: this.heading, state: this.state, onIndStart: () => this.indStart.emit(), onIndStop: () => this.indStop.emit() }), h("ind-setpoint-control", { key: '9999ec5f12c57015a712e2a00aefd532888e9e31', label: "Setpoint", tag: this.tag, value: this.setpoint, pv: this.pv, min: this.min, max: this.max, step: this.step, precision: this.precision, unit: this.unit, onIndChange: this.onSetpoint }), h("ind-mode-selector", { key: '9d00be76326f3012c9ac98a45b4239f796f9061d', value: this.mode, onIndChange: this.onMode }), h("slot", { key: 'd349c3b7d5f5855a383605054be7dd05b4a6e133' }))));
+    }
+};
+IndProcessControlPanel.style = panelCss() + processControlPanelCss();
+export { IndProcessControlPanel as ind_process_control_panel };
+//# sourceMappingURL=ind-process-control-panel.entry.js.map
+//# sourceMappingURL=ind-process-control-panel.entry.js.map

package/dist/esm/ind-process-control-panel.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-process-control-panel.entry.js","sources":["src/components/organisms/_shared/panel.css?tag=ind-process-control-panel&encapsulation=shadow","src/components/organisms/process-control-panel/process-control-panel.css?tag=ind-process-control-panel&encapsulation=shadow","src/components/organisms/process-control-panel/process-control-panel.tsx"],"sourcesContent":["/* Shared chrome for organism panels. Pulled in first via\n * `styleUrls: ['../_shared/panel.css', 'xxx.css']`. */\n:host {\n display: flex;\n flex-direction: column;\n background: var(--ind-surface-panel);\n border: 1px solid var(--ind-surface-border-default);\n border-radius: var(--ind-radius-md, 3px);\n font-family: var(--ind-font-family-sans);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n box-sizing: border-box;\n overflow: hidden;\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.panel-head {\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-4, 8px);\n padding: var(--ind-spacing-4, 8px) var(--ind-spacing-5, 12px);\n border-bottom: 1px solid var(--ind-surface-border-subtle);\n background: var(--ind-surface-raised);\n flex: 0 0 auto;\n}\n\n.panel-titles {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.panel-title {\n font-size: var(--ind-font-size-md, 13px);\n font-weight: var(--ind-font-weight-semibold, 600);\n line-height: 1.2;\n}\n\n.panel-subtitle {\n font-size: var(--ind-font-size-xs, 10px);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));\n}\n\n.panel-tag {\n font-family: var(--ind-font-family-mono);\n font-size: var(--ind-font-size-sm, 11px);\n color: var(--ind-surface-text-secondary);\n}\n\n.panel-actions {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-3, 6px);\n}\n\n.panel-body {\n display: flex;\n flex-direction: column;\n gap: var(--ind-spacing-4, 8px);\n padding: var(--ind-spacing-5, 12px);\n min-height: 0;\n}\n\n.panel-toolbar {\n display: flex;\n align-items: center;\n gap: var(--ind-spacing-3, 6px);\n padding: var(--ind-spacing-3, 6px) var(--ind-spacing-5, 12px);\n border-bottom: 1px solid var(--ind-surface-border-subtle);\n flex: 0 0 auto;\n}\n\n.panel-list {\n display: flex;\n flex-direction: column;\n overflow: auto;\n}\n\n.panel-grid {\n display: grid;\n gap: var(--ind-spacing-4, 8px);\n padding: var(--ind-spacing-5, 12px);\n}\n\n.panel-empty {\n padding: var(--ind-spacing-7, 20px);\n text-align: center;\n color: var(--ind-surface-text-muted);\n font-size: var(--ind-font-size-sm, 11px);\n}\n\n.panel-spacer {\n flex: 1 1 auto;\n}\n",":host {\n min-width: 280px;\n}\n\n/* The faceplate children already have their own card chrome, so flatten them. */\n.panel-body ind-start-stop-control,\n.panel-body ind-setpoint-control,\n.panel-body ind-mode-selector {\n border: 0;\n padding: 0;\n background: transparent;\n min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { RunState } from '../../molecules/start-stop-control/start-stop-control';\n\n/**\n * Generic single-loop control panel: run command, setpoint vs PV and an\n * operating-mode selector. Re-emits the child commands so a parent can drive\n * the controller.\n */\n@Component({\n tag: 'ind-process-control-panel',\n styleUrls: ['../_shared/panel.css', 'process-control-panel.css'],\n shadow: true,\n})\nexport class IndProcessControlPanel {\n @Prop() heading!: string;\n /** Loop tag (e.g. \"PIC-101\"). */\n @Prop() tag?: string;\n /** Run state. */\n @Prop({ reflect: true }) state: RunState = 'stopped';\n /** Operating mode value. */\n @Prop() mode?: string;\n /** Setpoint (two-way). */\n @Prop({ mutable: true }) setpoint: number = 0;\n /** Process value. */\n @Prop() pv?: number;\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() step: number = 0.1;\n @Prop() precision: number = 1;\n @Prop() unit?: string;\n\n @Event() indStart!: EventEmitter<void>;\n @Event() indStop!: EventEmitter<void>;\n /** Fires with the committed setpoint. */\n @Event() indSetpoint!: EventEmitter<number>;\n /** Fires with the selected mode. */\n @Event() indMode!: EventEmitter<string>;\n\n private onSetpoint = (e: CustomEvent<number>) => {\n e.stopPropagation();\n this.setpoint = e.detail;\n this.indSetpoint.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-start-stop-control\n label={this.heading}\n state={this.state}\n onIndStart={() => this.indStart.emit()}\n onIndStop={() => this.indStop.emit()}\n />\n <ind-setpoint-control\n label=\"Setpoint\"\n tag={this.tag}\n value={this.setpoint}\n pv={this.pv}\n min={this.min}\n max={this.max}\n step={this.step}\n precision={this.precision}\n unit={this.unit}\n onIndChange={this.onSetpoint}\n />\n <ind-mode-selector value={this.mode} onIndChange={this.onMode} />\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,yzDAAyzD,CAAC;;ACAl1D,MAAM,sBAAsB,GAAG,MAAM,CAAC,8KAA8K,CAAC;;MCaxM,sBAAsB,GAAA,MAAA;;;;;;;;AACzB,IAAA,OAAO;;AAEP,IAAA,GAAG;;IAEc,KAAK,GAAa,SAAS;;AAE5C,IAAA,IAAI;;IAEa,QAAQ,GAAW,CAAC;;AAErC,IAAA,EAAE;IACF,GAAG,GAAW,CAAC;IACf,GAAG,GAAW,GAAG;IACjB,IAAI,GAAW,GAAG;IAClB,SAAS,GAAW,CAAC;AACrB,IAAA,IAAI;AAEH,IAAA,QAAQ;AACR,IAAA,OAAO;;AAEP,IAAA,WAAW;;AAEX,IAAA,OAAO;AAER,IAAA,UAAU,GAAG,CAAC,CAAsB,KAAI;QAC9C,CAAC,CAAC,eAAe,EAAE;AACnB,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,MAAM;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AACjC,KAAC;AACO,IAAA,MAAM,GAAG,CAAC,CAAsB,KAAI;QAC1C,CAAC,CAAC,eAAe,EAAE;QACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;AAC7B,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,EAC7D,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CACvD,CACF,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,wBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EACtC,SAAS,EAAE,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAA,CACpC,EACF,CAAA,CAAA,sBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,UAAU,EAChB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,QAAQ,EACpB,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,UAAU,EAAA,CAC5B,EACF,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,MAAM,EAAA,CAAI,EACjE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACD;;;;;;;"}

package/dist/esm/ind-process-symbol.entry.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { r as registerInstance, h, H as Host } from './index-Bls_NlWP.js';
+const processSymbolCss = () => `:host{display:inline-flex;flex-direction:column;align-items:center;gap:var(--ind-spacing-2, 4px);font-family:var(--ind-font-family-sans, system-ui, sans-serif);color:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));--_w:44px;--_stroke:var(--ind-surface-border-strong, #5a6776)}:host([size="sm"]){--_w:32px}:host([size="lg"]){--_w:60px}:host([state="running"]){--_stroke:var(--ind-state-running-border, #4ade80)}:host([state="fault"]){--_stroke:var(--ind-state-fault-border, #f87171)}:host([state="warning"]){--_stroke:var(--ind-state-warning-border, #fcd34d)}:host([state="maintenance"]){--_stroke:var(--ind-state-maintenance-border, #60a5fa)}.symbol{width:var(--_w);height:var(--_w);display:block}.outline{fill:var(--ind-surface-sunken, light-dark(#fff, #000));stroke:var(--_stroke);stroke-width:1.5;vector-effect:non-scaling-stroke}.tag{fill:var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));font-family:var(--ind-font-family-mono, ui-monospace, monospace);font-weight:var(--ind-font-weight-semibold, 600);font-size:10px;font-feature-settings:var(--ind-font-feature-tabular, "tnum" 1)}.label{font-size:var(--ind-font-size-xs, 10px);color:var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2))}`;
+const IndProcessSymbol = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** ISA-5.1 instrument balloon shape. */
+    shape = 'circle';
+    /** Status coloring. */
+    state = 'normal';
+    /** Tag text rendered inside (e.g. "PT 101"). */
+    tag;
+    /** Caption rendered below the symbol. */
+    label;
+    /** Size. */
+    size = 'md';
+    shapeEl() {
+        switch (this.shape) {
+            case 'square':
+                return h("rect", { class: "outline", part: "outline", x: "4", y: "4", width: "40", height: "40", rx: "2" });
+            case 'diamond':
+                return h("polygon", { class: "outline", part: "outline", points: "24,3 45,24 24,45 3,24" });
+            case 'hexagon':
+                return h("polygon", { class: "outline", part: "outline", points: "14,6 34,6 45,24 34,42 14,42 3,24" });
+            case 'circle':
+            default:
+                return h("circle", { class: "outline", part: "outline", cx: "24", cy: "24", r: "20" });
+        }
+    }
+    render() {
+        const name = this.label ?? this.tag ?? 'instrument';
+        return (h(Host, { key: '24aef7364a542acddb8cb29fbf404faf7aa8972e', role: "img", "aria-label": `${name}${this.state !== 'normal' ? ' — ' + this.state : ''}` }, h("svg", { key: 'c5c4936c45d0d0ace90a5b86a593ae3f97c9f599', class: "symbol", part: "symbol", viewBox: "0 0 48 48", "aria-hidden": "true" }, this.shapeEl(), this.tag && (h("text", { key: '987ede87e53bd367f7af62f7903eef1c8661330a', class: "tag", x: "24", y: "24", "text-anchor": "middle", "dominant-baseline": "central" }, this.tag))), this.label && h("span", { key: '0ba6f143afefa065bf938fcc79cbf2faef393e51', class: "label", part: "label" }, this.label)));
+    }
+};
+IndProcessSymbol.style = processSymbolCss();
+export { IndProcessSymbol as ind_process_symbol };
+//# sourceMappingURL=ind-process-symbol.entry.js.map
+//# sourceMappingURL=ind-process-symbol.entry.js.map

package/dist/esm/ind-process-symbol.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ind-process-symbol.entry.js","sources":["src/components/atoms/process-symbol/process-symbol.css?tag=ind-process-symbol&encapsulation=shadow","src/components/atoms/process-symbol/process-symbol.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n gap: var(--ind-spacing-2, 4px);\n font-family: var(--ind-font-family-sans, system-ui, sans-serif);\n color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n --_w: 44px;\n --_stroke: var(--ind-surface-border-strong, #5a6776);\n}\n\n:host([size=\"sm\"]) { --_w: 32px; }\n:host([size=\"lg\"]) { --_w: 60px; }\n\n:host([state=\"running\"]) { --_stroke: var(--ind-state-running-border, #4ade80); }\n:host([state=\"fault\"]) { --_stroke: var(--ind-state-fault-border, #f87171); }\n:host([state=\"warning\"]) { --_stroke: var(--ind-state-warning-border, #fcd34d); }\n:host([state=\"maintenance\"]) { --_stroke: var(--ind-state-maintenance-border, #60a5fa); }\n\n.symbol {\n width: var(--_w);\n height: var(--_w);\n display: block;\n}\n\n.outline {\n fill: var(--ind-surface-sunken, light-dark(#fff, #000));\n stroke: var(--_stroke);\n stroke-width: 1.5;\n vector-effect: non-scaling-stroke;\n}\n\n.tag {\n fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));\n font-family: var(--ind-font-family-mono, ui-monospace, monospace);\n font-weight: var(--ind-font-weight-semibold, 600);\n font-size: 10px;\n font-feature-settings: var(--ind-font-feature-tabular, \"tnum\" 1);\n}\n\n.label {\n font-size: var(--ind-font-size-xs, 10px);\n color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type ProcessSymbolShape = 'circle' | 'square' | 'diamond' | 'hexagon';\nexport type ProcessSymbolState = 'normal' | 'running' | 'fault' | 'warning' | 'maintenance';\nexport type ProcessSymbolSize = 'sm' | 'md' | 'lg';\n\n@Component({\n tag: 'ind-process-symbol',\n styleUrl: 'process-symbol.css',\n shadow: true,\n})\nexport class IndProcessSymbol {\n /** ISA-5.1 instrument balloon shape. */\n @Prop({ reflect: true }) shape: ProcessSymbolShape = 'circle';\n /** Status coloring. */\n @Prop({ reflect: true }) state: ProcessSymbolState = 'normal';\n /** Tag text rendered inside (e.g. \"PT 101\"). */\n @Prop() tag?: string;\n /** Caption rendered below the symbol. */\n @Prop() label?: string;\n /** Size. */\n @Prop({ reflect: true }) size: ProcessSymbolSize = 'md';\n\n private shapeEl() {\n switch (this.shape) {\n case 'square':\n return <rect class=\"outline\" part=\"outline\" x=\"4\" y=\"4\" width=\"40\" height=\"40\" rx=\"2\" />;\n case 'diamond':\n return <polygon class=\"outline\" part=\"outline\" points=\"24,3 45,24 24,45 3,24\" />;\n case 'hexagon':\n return <polygon class=\"outline\" part=\"outline\" points=\"14,6 34,6 45,24 34,42 14,42 3,24\" />;\n case 'circle':\n default:\n return <circle class=\"outline\" part=\"outline\" cx=\"24\" cy=\"24\" r=\"20\" />;\n }\n }\n\n render() {\n const name = this.label ?? this.tag ?? 'instrument';\n return (\n <Host role=\"img\" aria-label={`${name}${this.state !== 'normal' ? ' — ' + this.state : ''}`}>\n <svg class=\"symbol\" part=\"symbol\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n {this.shapeEl()}\n {this.tag && (\n <text class=\"tag\" x=\"24\" y=\"24\" text-anchor=\"middle\" dominant-baseline=\"central\">{this.tag}</text>\n )}\n </svg>\n {this.label && <span class=\"label\" part=\"label\">{this.label}</span>}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,6sCAA6sC,CAAC;;MCWjuC,gBAAgB,GAAA,MAAA;;;;;IAEF,KAAK,GAAuB,QAAQ;;IAEpC,KAAK,GAAuB,QAAQ;;AAErD,IAAA,GAAG;;AAEH,IAAA,KAAK;;IAEY,IAAI,GAAsB,IAAI;IAE/C,OAAO,GAAA;AACb,QAAA,QAAQ,IAAI,CAAC,KAAK;AAChB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG;AAC1F,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,CAAA,CAAA,SAAA,EAAA,EAAS,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,uBAAuB,GAAG;AAClF,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,CAAA,CAAA,SAAA,EAAA,EAAS,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,MAAM,EAAC,kCAAkC,GAAG;AAC7F,YAAA,KAAK,QAAQ;AACb,YAAA;gBACE,OAAO,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,CAAG;;;IAI7E,MAAM,GAAA;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,YAAY;AACnD,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,KAAK,EAAA,YAAA,EAAa,CAAA,EAAG,IAAI,CAAA,EAAG,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA,CAAE,EAAA,EACxF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAA,aAAA,EAAa,MAAM,EAAA,EACrE,IAAI,CAAC,OAAO,EAAE,EACd,IAAI,CAAC,GAAG,KACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAA,aAAA,EAAa,QAAQ,EAAA,mBAAA,EAAmB,SAAS,EAAA,EAAE,IAAI,CAAC,GAAG,CAAQ,CACnG,CACG,EACL,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC9D;;;;;;;"}