@ind-ds/core 0.1.1 → 0.2.0

package/dist/collection/components/molecules/historical-value-row/historical-value-row.js

@@ -0,0 +1,153 @@
+import { h, Host } from "@stencil/core";
+const QUALITY_LABEL = {
+    good: 'Good',
+    uncertain: 'Uncertain',
+    bad: 'Bad',
+};
+/**
+ * One sample in a historical / trend table: timestamp, value with unit and an
+ * OPC-style data quality flag. Read-only.
+ */
+export class IndHistoricalValueRow {
+    /** Pre-formatted timestamp. */
+    time;
+    /** Sample value. */
+    value;
+    /** Engineering unit. */
+    unit;
+    /** Decimal places when numeric. */
+    precision;
+    /** Data quality flag. */
+    quality = 'good';
+    formatted() {
+        if (typeof this.value === 'string')
+            return this.value;
+        if (!Number.isFinite(this.value))
+            return '--';
+        if (this.precision !== undefined)
+            return this.value.toFixed(this.precision);
+        return String(this.value);
+    }
+    render() {
+        return (h(Host, { key: '0f9964bb0b57a48ec321af617c73c49bbdba379f', role: "row", "aria-label": `${this.time}: ${this.formatted()} ${this.unit ?? ''}, ${QUALITY_LABEL[this.quality]}` }, h("span", { key: '17f0412c066e28d2c00c8a87296aeb0898b4e1b0', class: "time", part: "time" }, this.time), h("span", { key: '01a0b99d35321fe7fbc2579b75dc34b438aa695b', class: "value", part: "value" }, this.formatted(), this.unit && h("span", { key: 'b778bcf0adcf60bd0c6826bc886b31a2dfc1e92b', class: "unit", part: "unit" }, " ", this.unit)), h("span", { key: '9145c8be49a4e8f4f8f000a0888a61fe06858dfa', class: `quality quality-${this.quality}`, part: "quality" }, QUALITY_LABEL[this.quality])));
+    }
+    static get is() { return "ind-historical-value-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/row.css", "historical-value-row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/row.css", "historical-value-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "time": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-formatted timestamp."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sample value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Engineering unit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit"
+            },
+            "precision": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Decimal places when numeric."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "precision"
+            },
+            "quality": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DataQuality",
+                    "resolved": "\"bad\" | \"good\" | \"uncertain\"",
+                    "references": {
+                        "DataQuality": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/molecules/historical-value-row/historical-value-row.tsx",
+                            "id": "src/components/molecules/historical-value-row/historical-value-row.tsx::DataQuality"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data quality flag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "quality",
+                "defaultValue": "'good'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=historical-value-row.js.map

package/dist/collection/components/molecules/historical-value-row/historical-value-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"historical-value-row.js","sourceRoot":"","sources":["../../../../src/components/molecules/historical-value-row/historical-value-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,WAAW;IACtB,GAAG,EAAE,KAAK;CACX,CAAC;AAEF;;;GAGG;AAMH,MAAM,OAAO,qBAAqB;IAChC,+BAA+B;IACvB,IAAI,CAAU;IACtB,oBAAoB;IACZ,KAAK,CAAmB;IAChC,wBAAwB;IAChB,IAAI,CAAU;IACtB,mCAAmC;IAC3B,SAAS,CAAU;IAC3B,yBAAyB;IACA,OAAO,GAAgB,MAAM,CAAC;IAE/C,SAAS;QACf,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;QACtD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAC9C,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC5E,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,EAAE,IAAI,IAAI,CAAC,IAAI,IAAI,EAAE,KAAK,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACjH,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ;YACjD,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC7B,IAAI,CAAC,SAAS,EAAE;gBAChB,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;;oBAAG,IAAI,CAAC,IAAI,CAAQ,CAC3D;YACP,6DAAM,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS,IAAE,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CAC9F,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type DataQuality = 'good' | 'uncertain' | 'bad';\n\nconst QUALITY_LABEL: Record<DataQuality, string> = {\n  good: 'Good',\n  uncertain: 'Uncertain',\n  bad: 'Bad',\n};\n\n/**\n * One sample in a historical / trend table: timestamp, value with unit and an\n * OPC-style data quality flag. Read-only.\n */\n@Component({\n  tag: 'ind-historical-value-row',\n  styleUrls: ['../_shared/row.css', 'historical-value-row.css'],\n  shadow: true,\n})\nexport class IndHistoricalValueRow {\n  /** Pre-formatted timestamp. */\n  @Prop() time!: string;\n  /** Sample value. */\n  @Prop() value!: number | string;\n  /** Engineering unit. */\n  @Prop() unit?: string;\n  /** Decimal places when numeric. */\n  @Prop() precision?: number;\n  /** Data quality flag. */\n  @Prop({ reflect: true }) quality: DataQuality = 'good';\n\n  private formatted(): string {\n    if (typeof this.value === 'string') return this.value;\n    if (!Number.isFinite(this.value)) return '--';\n    if (this.precision !== undefined) return this.value.toFixed(this.precision);\n    return String(this.value);\n  }\n\n  render() {\n    return (\n      <Host role=\"row\" aria-label={`${this.time}: ${this.formatted()} ${this.unit ?? ''}, ${QUALITY_LABEL[this.quality]}`}>\n        <span class=\"time\" part=\"time\">{this.time}</span>\n        <span class=\"value\" part=\"value\">\n          {this.formatted()}\n          {this.unit && <span class=\"unit\" part=\"unit\"> {this.unit}</span>}\n        </span>\n        <span class={`quality quality-${this.quality}`} part=\"quality\">{QUALITY_LABEL[this.quality]}</span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/kpi-card/kpi-card.css

@@ -0,0 +1,31 @@
+:host {
+  min-width: 150px;
+}
+
+.readout {
+  display: flex;
+  align-items: baseline;
+  gap: var(--ind-spacing-2, 4px);
+}
+
+.number {
+  font-size: var(--ind-font-size-3xl, 28px);
+  font-weight: var(--ind-font-weight-bold, 700);
+  line-height: 1;
+}
+
+.unit {
+  font-size: var(--ind-font-size-lg, 14px);
+  color: var(--ind-surface-text-secondary);
+}
+
+.delta {
+  display: flex;
+  align-items: center;
+  gap: var(--ind-spacing-2, 4px);
+  font-size: var(--ind-font-size-sm, 11px);
+  color: var(--ind-surface-text-muted);
+}
+
+:host([variant="good"]) .delta { color: var(--ind-state-running-bg, #16a34a); }
+:host([variant="bad"])  .delta { color: var(--ind-state-fault-bg, #dc2626); }

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

@@ -0,0 +1,199 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Headline KPI: a large value with an optional delta and trend arrow. The
+ * `variant` colors the delta (good = green, bad = red) independently of the
+ * arrow direction, since "down" is not always bad.
+ */
+export class IndKpiCard {
+    /** KPI name (e.g. "OEE", "Throughput"). */
+    label;
+    /** Primary value. */
+    value;
+    /** Engineering unit (e.g. "%", "u/h"). */
+    unit;
+    /** Decimal places when numeric. */
+    precision;
+    /** Delta caption (e.g. "+2.3 % vs last shift"). */
+    delta;
+    /** Trend direction shown as an arrow. */
+    trend = 'none';
+    /** Semantic color of the delta. */
+    variant = 'neutral';
+    formatted() {
+        if (typeof this.value === 'string')
+            return this.value;
+        if (!Number.isFinite(this.value))
+            return '--';
+        if (this.precision !== undefined)
+            return this.value.toFixed(this.precision);
+        return String(this.value);
+    }
+    render() {
+        const arrow = this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : this.trend === 'flat' ? '▬' : '';
+        return (h(Host, { key: '508d714f7c810c81fcc5a46ce67779f078a1d0a6', role: "group", "aria-label": `${this.label}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}` }, h("div", { key: '1b3290a2fb4aa79077a663f71d488795db70047a', class: "card-title", part: "label" }, this.label), h("div", { key: 'c521f3a3150bb6f4e385f503155958d1d9f70d5e', class: "readout", part: "readout" }, h("span", { key: 'aa697fb0c472b480ec586ea837ef21e5dd0853a2', class: "number", part: "number" }, this.formatted()), this.unit && h("span", { key: 'b6fc91609382367aa00d997b26ec0433d89ed7c9', class: "unit", part: "unit" }, this.unit)), (this.delta || arrow) && (h("div", { key: '594d4fc821d89474db61b618b17e04e390fb8280', class: "delta", part: "delta" }, arrow && h("span", { key: 'a9af0dbaef647345a955f50ad392958860a16a4a', class: "arrow", part: "arrow", "aria-hidden": "true" }, arrow), this.delta && h("span", { key: '0b674c45d8921de1559ad91f1123e56a1a980a64', class: "delta-text" }, this.delta)))));
+    }
+    static get is() { return "ind-kpi-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/card.css", "kpi-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/card.css", "kpi-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "KPI name (e.g. \"OEE\", \"Throughput\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | string",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Engineering unit (e.g. \"%\", \"u/h\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "unit"
+            },
+            "precision": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Decimal places when numeric."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "precision"
+            },
+            "delta": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Delta caption (e.g. \"+2.3 % vs last shift\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "delta"
+            },
+            "trend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KpiTrend",
+                    "resolved": "\"down\" | \"flat\" | \"none\" | \"up\"",
+                    "references": {
+                        "KpiTrend": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/molecules/kpi-card/kpi-card.tsx",
+                            "id": "src/components/molecules/kpi-card/kpi-card.tsx::KpiTrend"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Trend direction shown as an arrow."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trend",
+                "defaultValue": "'none'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KpiVariant",
+                    "resolved": "\"bad\" | \"good\" | \"neutral\"",
+                    "references": {
+                        "KpiVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/molecules/kpi-card/kpi-card.tsx",
+                            "id": "src/components/molecules/kpi-card/kpi-card.tsx::KpiVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic color of the delta."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'neutral'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=kpi-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kpi-card.js","sourceRoot":"","sources":["../../../../src/components/molecules/kpi-card/kpi-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IACrB,2CAA2C;IACnC,KAAK,CAAU;IACvB,qBAAqB;IACb,KAAK,CAAmB;IAChC,0CAA0C;IAClC,IAAI,CAAU;IACtB,mCAAmC;IAC3B,SAAS,CAAU;IAC3B,mDAAmD;IAC3C,KAAK,CAAU;IACvB,yCAAyC;IACjC,KAAK,GAAa,MAAM,CAAC;IACjC,mCAAmC;IACV,OAAO,GAAe,SAAS,CAAC;IAEjD,SAAS;QACf,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;QACtD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAC9C,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC5E,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;QACzG,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;YACpG,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO;YACvD,4DAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS;gBACjC,6DAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,SAAS,EAAE,CAAQ;gBAC3D,IAAI,CAAC,IAAI,IAAI,6DAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,CAC3D;YACL,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CACxB,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC5B,KAAK,IAAI,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,iBAAa,MAAM,IAAE,KAAK,CAAQ;gBAC3E,IAAI,CAAC,KAAK,IAAI,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CACvD,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type KpiTrend = 'none' | 'up' | 'down' | 'flat';\nexport type KpiVariant = 'neutral' | 'good' | 'bad';\n\n/**\n * Headline KPI: a large value with an optional delta and trend arrow. The\n * `variant` colors the delta (good = green, bad = red) independently of the\n * arrow direction, since \"down\" is not always bad.\n */\n@Component({\n  tag: 'ind-kpi-card',\n  styleUrls: ['../_shared/card.css', 'kpi-card.css'],\n  shadow: true,\n})\nexport class IndKpiCard {\n  /** KPI name (e.g. \"OEE\", \"Throughput\"). */\n  @Prop() label!: string;\n  /** Primary value. */\n  @Prop() value!: number | string;\n  /** Engineering unit (e.g. \"%\", \"u/h\"). */\n  @Prop() unit?: string;\n  /** Decimal places when numeric. */\n  @Prop() precision?: number;\n  /** Delta caption (e.g. \"+2.3 % vs last shift\"). */\n  @Prop() delta?: string;\n  /** Trend direction shown as an arrow. */\n  @Prop() trend: KpiTrend = 'none';\n  /** Semantic color of the delta. */\n  @Prop({ reflect: true }) variant: KpiVariant = 'neutral';\n\n  private formatted(): string {\n    if (typeof this.value === 'string') return this.value;\n    if (!Number.isFinite(this.value)) return '--';\n    if (this.precision !== undefined) return this.value.toFixed(this.precision);\n    return String(this.value);\n  }\n\n  render() {\n    const arrow = this.trend === 'up' ? '▲' : this.trend === 'down' ? '▼' : this.trend === 'flat' ? '▬' : '';\n    return (\n      <Host role=\"group\" aria-label={`${this.label}: ${this.formatted()}${this.unit ? ' ' + this.unit : ''}`}>\n        <div class=\"card-title\" part=\"label\">{this.label}</div>\n        <div class=\"readout\" part=\"readout\">\n          <span class=\"number\" part=\"number\">{this.formatted()}</span>\n          {this.unit && <span class=\"unit\" part=\"unit\">{this.unit}</span>}\n        </div>\n        {(this.delta || arrow) && (\n          <div class=\"delta\" part=\"delta\">\n            {arrow && <span class=\"arrow\" part=\"arrow\" aria-hidden=\"true\">{arrow}</span>}\n            {this.delta && <span class=\"delta-text\">{this.delta}</span>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mode-selector/mode-selector.css

@@ -0,0 +1,4 @@
+:host {
+  min-width: 180px;
+  align-items: flex-start;
+}

package/dist/collection/components/molecules/mode-selector/mode-selector.js

@@ -0,0 +1,148 @@
+import { h, Host } from "@stencil/core";
+const DEFAULT_POSITIONS = [
+    { value: 'off', label: 'Off' },
+    { value: 'manual', label: 'Manual' },
+    { value: 'auto', label: 'Auto' },
+];
+/**
+ * Operating-mode selector (Off / Manual / Auto by default). A labelled wrapper
+ * around `<ind-selector-switch>` that re-emits the chosen mode.
+ */
+export class IndModeSelector {
+    /** Control label. */
+    label = 'Mode';
+    /** Selectable positions. */
+    positions = DEFAULT_POSITIONS;
+    /** Current mode value (two-way). */
+    value;
+    disabled = false;
+    /** Fires with the selected mode value. */
+    indChange;
+    onChange = (e) => {
+        e.stopPropagation();
+        this.value = e.detail;
+        this.indChange.emit(e.detail);
+    };
+    render() {
+        return (h(Host, { key: '1f4da9abae27080579e40bdb9ab8644ba65aed21' }, h("span", { key: 'c367ccb30a97cadd8320a9cb84ad2a739873f89a', class: "card-title", part: "label" }, this.label), h("ind-selector-switch", { key: 'baf57e95fad4f6914e60b9d764aa80f373cca201', part: "switch", positions: this.positions, value: this.value, disabled: this.disabled, label: this.label, onIndChange: this.onChange })));
+    }
+    static get is() { return "ind-mode-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../_shared/card.css", "mode-selector.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../_shared/card.css", "mode-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Control label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Mode'"
+            },
+            "positions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectorPosition[]",
+                    "resolved": "SelectorPosition[]",
+                    "references": {
+                        "SelectorPosition": {
+                            "location": "import",
+                            "path": "../../atoms/selector-switch/selector-switch",
+                            "id": "src/components/atoms/selector-switch/selector-switch.tsx::SelectorPosition",
+                            "referenceLocation": "SelectorPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Selectable positions."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[\n  { value: 'off', label: 'Off' },\n  { value: 'manual', label: 'Manual' },\n  { value: 'auto', label: 'Auto' },\n]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current mode value (two-way)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the selected mode value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=mode-selector.js.map

package/dist/collection/components/molecules/mode-selector/mode-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode-selector.js","sourceRoot":"","sources":["../../../../src/components/molecules/mode-selector/mode-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG9E,MAAM,iBAAiB,GAAuB;IAC5C,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;IAC9B,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;CACjC,CAAC;AAEF;;;GAGG;AAMH,MAAM,OAAO,eAAe;IAC1B,qBAAqB;IACb,KAAK,GAAW,MAAM,CAAC;IAC/B,4BAA4B;IACpB,SAAS,GAAuB,iBAAiB,CAAC;IAC1D,oCAAoC;IACX,KAAK,CAAU;IAChC,QAAQ,GAAY,KAAK,CAAC;IAElC,0CAA0C;IACjC,SAAS,CAAwB;IAElC,QAAQ,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ;YACzD,4EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,QAAQ,GAC1B,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { SelectorPosition } from '../../atoms/selector-switch/selector-switch';\n\nconst DEFAULT_POSITIONS: SelectorPosition[] = [\n  { value: 'off', label: 'Off' },\n  { value: 'manual', label: 'Manual' },\n  { value: 'auto', label: 'Auto' },\n];\n\n/**\n * Operating-mode selector (Off / Manual / Auto by default). A labelled wrapper\n * around `<ind-selector-switch>` that re-emits the chosen mode.\n */\n@Component({\n  tag: 'ind-mode-selector',\n  styleUrls: ['../_shared/card.css', 'mode-selector.css'],\n  shadow: true,\n})\nexport class IndModeSelector {\n  /** Control label. */\n  @Prop() label: string = 'Mode';\n  /** Selectable positions. */\n  @Prop() positions: SelectorPosition[] = DEFAULT_POSITIONS;\n  /** Current mode value (two-way). */\n  @Prop({ mutable: true }) value?: string;\n  @Prop() disabled: boolean = false;\n\n  /** Fires with the selected mode value. */\n  @Event() indChange!: EventEmitter<string>;\n\n  private onChange = (e: CustomEvent<string>) => {\n    e.stopPropagation();\n    this.value = e.detail;\n    this.indChange.emit(e.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <span class=\"card-title\" part=\"label\">{this.label}</span>\n        <ind-selector-switch\n          part=\"switch\"\n          positions={this.positions}\n          value={this.value}\n          disabled={this.disabled}\n          label={this.label}\n          onIndChange={this.onChange}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/motor-card/motor-card.css

@@ -0,0 +1,3 @@
+:host {
+  min-width: 200px;
+}