@ind-ds/core 0.1.1 → 0.2.1

package/dist/collection/components/atoms/scara-canvas/scara-canvas.css

@@ -1,100 +0,0 @@
-:host {
-  display: block;
-  width: var(--ind-size-canvas-robot-width, 320px);
-  height: var(--ind-size-canvas-robot-height, 220px);
-  font-family: var(--ind-font-family-mono);
-}
-
-svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));
-  border: 1px solid var(--ind-surface-border-default);
-  border-radius: var(--ind-radius-md, 3px);
-}
-
-.envelope {
-  fill: none;
-  stroke: var(--ind-surface-border-subtle);
-  stroke-dasharray: 2 4;
-}
-
-.envelope-inner {
-  stroke-dasharray: 1 3;
-  opacity: 0.6;
-}
-
-.axis {
-  stroke: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
-  stroke-width: 1;
-}
-
-.axis-label {
-  font-family: var(--ind-font-family-mono);
-  font-size: 9px;
-  fill: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
-}
-
-.link {
-  stroke-width: 5;
-  stroke-linecap: round;
-  transition: stroke 240ms;
-}
-.link-1 { stroke: var(--ind-state-running-bg, #16a34a); }
-.link-2 { stroke: var(--ind-state-running-border, #4ade80); }
-
-.wrist {
-  stroke: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
-  stroke-width: 2;
-  stroke-linecap: round;
-}
-
-.joint {
-  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
-  stroke: var(--ind-surface-border-strong);
-  stroke-width: 1;
-}
-
-.joint.base {
-  fill: var(--ind-state-stopped-bg, #5a6776);
-  stroke: var(--ind-state-stopped-border, #8390a0);
-}
-
-.joint.effector {
-  fill: var(--ind-state-warning-bg, #f59e0b);
-  stroke: var(--ind-state-warning-border, #fcd34d);
-}
-
-.readout text {
-  font-size: 9px;
-  fill: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
-  font-feature-settings: "tnum" 1;
-}
-.readout tspan {
-  fill: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
-  font-weight: 700;
-}
-
-:host([state="moving"]) .link {
-  stroke-dasharray: 4 2;
-  animation: ind-scara-move 1.2s linear infinite;
-}
-
-:host([state="fault"]) .link,
-:host([state="fault"]) .wrist {
-  stroke: var(--ind-state-fault-bg, #dc2626);
-}
-:host([state="fault"]) .joint {
-  stroke: var(--ind-state-fault-border, #f87171);
-}
-
-@keyframes ind-scara-move {
-  to { stroke-dashoffset: -12; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :host([state="moving"]) .link {
-    animation: none;
-  }
-}

package/dist/collection/components/atoms/scara-canvas/scara-canvas.js

@@ -50,7 +50,7 @@ export class IndScaraCanvas {
         const wy = eey + wlen * Math.sin(j1r + j2r + j3r);
         const fmt = (n) => n.toFixed(1);
         const fmt0 = (n) => n.toFixed(0);
-        return (h(Host, { key: '0634f9fc9b197f66bf334c43c38e85c19066d090', role: "img", "aria-label": `SCARA arm: J1 ${fmt(j1)}°, J2 ${fmt(j2)}°, J3 ${fmt(j3)}°` }, h("svg", { key: 'c16607c36459cfad670b9ab913d46c23daf99883', viewBox: "0 0 320 220", part: "svg" }, h("circle", { key: '4fc539c4f5a658ffbb4a2a9594a864e04cd6e9fe', cx: cx, cy: cy, r: l1 + l2, class: "envelope envelope-outer" }), h("circle", { key: 'b493720a1f306e75dedf48dbd1ccb53850248230', cx: cx, cy: cy, r: Math.max(0, l1 - l2), class: "envelope envelope-inner" }), h("line", { key: 'e28c6dc2ac8e73bac4381bba4dfb4cdb983097c7', x1: "10", y1: cy, x2: "22", y2: cy, class: "axis" }), h("line", { key: '5f460ffa1860dd1484100e972d043fd9a1491621', x1: cx, y1: "6", x2: cx, y2: "18", class: "axis" }), h("text", { key: 'f4cb4f52a3279f7924aea8d8e642a91be18c38a5', x: "24", y: cy + 3, class: "axis-label" }, "X"), h("text", { key: 'd3d18e860674380af133295b763c52bc0adf591b', x: cx + 4, y: "14", class: "axis-label" }, "Y"), h("line", { key: 'cfad2277909207ee8a0f99fc73cc823db20f4f8e', x1: cx, y1: cy, x2: ex, y2: ey, class: "link link-1" }), h("line", { key: '2ea11a2363123b2f6876179a2519dc38e9882126', x1: ex, y1: ey, x2: eex, y2: eey, class: "link link-2" }), h("line", { key: 'ad0a714279eea710da7e72a2141aab8165576c34', x1: eex, y1: eey, x2: wx, y2: wy, class: "wrist" }), h("circle", { key: '89f2b18ca37ed7b0e67b0dee6ed28e0702cafa54', cx: cx, cy: cy, r: "8", class: "joint base" }), h("circle", { key: '44129fff9afa9becab60e20ab86933e4a111f854', cx: ex, cy: ey, r: "6", class: "joint elbow" }), h("circle", { key: 'bfa99f679b71e28f58c244267e5876c73c9cd6aa', cx: eex, cy: eey, r: "7", class: "joint effector" }), h("g", { key: '3753b9117625a70389a12c518330660d943a237f', class: "readout" }, h("text", { key: '420f362c46c764ea86fbf12128727600a1454e51', x: "10", y: "198" }, "J1 ", h("tspan", { key: '4f1afe52d964043034d93d02eb27b4fc4e7b7f3c' }, fmt(j1), "\u00B0")), h("text", { key: '185d3d66158b63322153d59a97d79792e5105957', x: "74", y: "198" }, "J2 ", h("tspan", { key: '9c6802f9ee9b2bb8ae3154880e2b7b1ffaf21167' }, fmt(j2), "\u00B0")), h("text", { key: 'b6d0a5aa47c925997cc7efa0c1cadd067f184243', x: "138", y: "198" }, "J3 ", h("tspan", { key: '5c06a24d477670deeceb6f80e3fb707b39b1b1e3' }, fmt(j3), "\u00B0")), h("text", { key: '99c96bf07d28555af967c4cb22a2856c1bdb46fb', x: "202", y: "198" }, "X ", h("tspan", { key: '4097b0a431bed9c608f5a43994ad213bfdd56663' }, fmt0(eex - cx))), h("text", { key: '56ccbac660ea805f260977c0e64fdf424f1d40fe', x: "254", y: "198" }, "Y ", h("tspan", { key: 'd4cfa6e17fc0da8494f8f526e7d5f27cf233dc22' }, fmt0(eey - cy)))))));
+        return (h(Host, { key: 'e220c57195ecb3c211223a9c678ad6a832c584cd', role: "img", "aria-label": `SCARA arm: J1 ${fmt(j1)}°, J2 ${fmt(j2)}°, J3 ${fmt(j3)}°` }, h("svg", { key: '7a04466cdcedb3e90bb45d0e86ee1d846f16d2fe', viewBox: "0 0 320 220", part: "svg" }, h("circle", { key: '9f1c589063eae5f24c60017e12b45afe5f44a714', cx: cx, cy: cy, r: l1 + l2, class: "envelope envelope-outer" }), h("circle", { key: 'a6228d89177c0dca40aaf37e85a08e59a04a2488', cx: cx, cy: cy, r: Math.max(0, l1 - l2), class: "envelope envelope-inner" }), h("line", { key: '21e8c9bbf7cf19afa8dd88f909c94e1b458c928d', x1: "10", y1: cy, x2: "22", y2: cy, class: "axis" }), h("line", { key: 'bd2a5eca21b2e7fc73828a601870c730cc153bbd', x1: cx, y1: "6", x2: cx, y2: "18", class: "axis" }), h("text", { key: 'dab2bdb3cd08468e10220174102d9d198658b26b', x: "24", y: cy + 3, class: "axis-label" }, "X"), h("text", { key: '66581ab90a79151eeb64522a5525de10e151d0ad', x: cx + 4, y: "14", class: "axis-label" }, "Y"), h("line", { key: '0f8c1214d584f7c9e062927af7ca0425242e6e2b', x1: cx, y1: cy, x2: ex, y2: ey, class: "link link-1" }), h("line", { key: 'e19107929c6f87d3b3e47042f017a73193714b30', x1: ex, y1: ey, x2: eex, y2: eey, class: "link link-2" }), h("line", { key: 'a4cb08318e5c5df59494f6b38477307477313378', x1: eex, y1: eey, x2: wx, y2: wy, class: "wrist" }), h("circle", { key: '25f7d34a6cc339b46a59437809bce8b7e5b4015b', cx: cx, cy: cy, r: "8", class: "joint base" }), h("circle", { key: '0fd90ea8c7b17654d927be0627ad2a0bcdb54c93', cx: ex, cy: ey, r: "6", class: "joint elbow" }), h("circle", { key: '528398188bef093e0d931bb23877022fd94900cf', cx: eex, cy: eey, r: "7", class: "joint effector" }), h("g", { key: '3fafeb02e9001d091436addbe37c53cfa5281df5', class: "readout" }, h("text", { key: '3d5c879baea3c1ef177fbd53153d846eb1158411', x: "10", y: "198" }, "J1 ", h("tspan", { key: 'df726f043b2a33357c2525c68a6f23861def214d' }, fmt(j1), "\u00B0")), h("text", { key: '68565b08ced6589ecd0a2d84cd738535ebe9fc63', x: "74", y: "198" }, "J2 ", h("tspan", { key: '65a013c07a5f9412b603557e39409d34ba5b4812' }, fmt(j2), "\u00B0")), h("text", { key: '88712594e3a0ac5e8e506ce467192d0bbcbf4a7f', x: "138", y: "198" }, "J3 ", h("tspan", { key: '31f1c81c381841747057257d6e4ee1af9d213dd8' }, fmt(j3), "\u00B0")), h("text", { key: '42d91dc495775b5bf29cc455e6d6404c72e2839f', x: "202", y: "198" }, "X ", h("tspan", { key: '00d7e9336de136e9ec0dd21ec85fd2a7a9b3ebf9' }, fmt0(eex - cx))), h("text", { key: '8ba2b283b6cd83942747e5df2c93d51b4dcb85bd', x: "254", y: "198" }, "Y ", h("tspan", { key: '767695ce2b72564dec42536bc618835070d4b1a7' }, fmt0(eey - cy)))))));
     }
     static get is() { return "ind-scara-canvas"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/select/select.css

@@ -1,88 +0,0 @@
-:host {
-  display: inline-block;
-  font-family: var(--ind-font-family-sans);
-  color: var(--ind-surface-text-primary, light-dark(#11161c, #eef1f5));
-  --_h: var(--ind-size-input-md, 32px);
-}
-
-:host([size="sm"]) { --_h: var(--ind-size-input-sm, 24px); }
-:host([size="md"]) { --_h: var(--ind-size-input-md, 32px); }
-:host([size="lg"]) { --_h: var(--ind-size-input-lg, 40px); }
-
-.wrap {
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--ind-spacing-2, 4px);
-  min-width: 160px;
-}
-
-.label {
-  font-size: var(--ind-font-size-sm, 11px);
-  font-weight: var(--ind-font-weight-medium, 500);
-  color: var(--ind-surface-text-secondary, light-dark(#2a3340, #aab5c2));
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.field {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  height: var(--_h);
-  background: var(--ind-surface-sunken, light-dark(#ffffff, #000000));
-  border: 1px solid var(--ind-surface-border-default, #2a3340);
-  border-radius: var(--ind-radius-md, 3px);
-  transition:
-    border-color var(--ind-motion-duration-fast, 120ms),
-    box-shadow   var(--ind-motion-duration-fast, 120ms);
-}
-
-.field:focus-within {
-  border-color: var(--ind-surface-focus-ring, #22d3ee);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-surface-focus-ring, #22d3ee) 35%, transparent);
-}
-
-.native {
-  appearance: none;
-  -webkit-appearance: none;
-  flex: 1;
-  height: 100%;
-  background: transparent;
-  border: none;
-  outline: none;
-  padding: 0 calc(var(--ind-spacing-7, 20px) + 8px) 0 var(--ind-spacing-4, 8px);
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  font-feature-settings: var(--ind-font-feature-tabular, "tnum" 1);
-}
-
-.native::-ms-expand { display: none; }
-
-/* Native option styling: at least give them a dark theme bg when
- * the OS picker honors it (Chrome/Edge mostly do). */
-.native option {
-  background: var(--ind-surface-panel);
-  color: var(--ind-surface-text-primary);
-}
-
-.caret {
-  position: absolute;
-  right: var(--ind-spacing-4, 8px);
-  font-size: var(--ind-font-size-base, 12px);
-  color: var(--ind-surface-text-muted, light-dark(#5a6776, #8390a0));
-  pointer-events: none;
-  line-height: 1;
-}
-
-:host([invalid]) .field {
-  border-color: var(--ind-feedback-error-bg, #dc2626);
-}
-:host([invalid]) .field:focus-within {
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ind-feedback-error-bg, #dc2626) 40%, transparent);
-}
-
-:host([disabled]) {
-  opacity: 0.55;
-  pointer-events: none;
-}

package/dist/collection/components/atoms/select/select.js

@@ -35,7 +35,7 @@ export class IndSelect {
     };
     render() {
         const opts = this.parseOptions();
-        return (h(Host, { key: '283d3e72b726d0b04958b452629df4e579907f05' }, h("label", { key: 'dcbfc48d00c096cd6b709e4eb16b687cd07dd350', class: "wrap", part: "wrap" }, this.label && h("span", { key: '011fa524c21bfc749cedc70f6ec810ca90a73be2', class: "label", part: "label" }, this.label), h("span", { key: '8fc35e3db2cbf2bd9cb780d8e1e1ee395c022d1a', class: "field", part: "field" }, h("select", { key: 'a8944a8a82162e4f1b36e9384145dd4e0399afaf', class: "native", part: "native", disabled: this.disabled, name: this.name, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.onChange }, this.placeholder && (h("option", { key: '8da45f0c3d932005210e61a216f7f9dfa9581767', value: "", disabled: true, selected: this.value === '' }, this.placeholder)), opts.map((o) => (h("option", { value: o.value, disabled: o.disabled, selected: o.value === this.value }, o.label)))), h("span", { key: 'ca2db8e41ee4fe3a8ef1a51458189face0450541', class: "caret", part: "caret", "aria-hidden": "true" }, "\u25BE")))));
+        return (h(Host, { key: 'b13f8d8cba0dcd5a588b0bbfc6cc776d7d793755' }, h("label", { key: '4de3dcf49f2545cebdf6e54e8b902d2bac7edb08', class: "wrap", part: "wrap" }, this.label && h("span", { key: 'ed9e56dc5a8fbf6ed04c6f404c5b040124e9b45a', class: "label", part: "label" }, this.label), h("span", { key: 'f142c37fc9eda28a25416688f9e26126741eb067', class: "field", part: "field" }, h("select", { key: '0637c1a84e23da489c038a69d03677c715826a02', class: "native", part: "native", disabled: this.disabled, name: this.name, "aria-invalid": this.invalid ? 'true' : 'false', onChange: this.onChange }, this.placeholder && (h("option", { key: '7d708bcabecc6295b6b2fe05080399612c7b0041', value: "", disabled: true, selected: this.value === '' }, this.placeholder)), opts.map((o) => (h("option", { value: o.value, disabled: o.disabled, selected: o.value === this.value }, o.label)))), h("span", { key: 'a74a19b4fa9dd5593ae61e502340ad2839d188c9', class: "caret", part: "caret", "aria-hidden": "true" }, "\u25BE")))));
     }
     static get is() { return "ind-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/atoms/selector-switch/selector-switch.js

@@ -0,0 +1,154 @@
+import { h, Host } from "@stencil/core";
+export class IndSelectorSwitch {
+    /** Discrete positions, e.g. OFF / HAND / AUTO. Pass as a property. */
+    positions = [];
+    /** Selected position value. */
+    value;
+    /** Disabled. */
+    disabled = false;
+    /** Group label. */
+    label;
+    /** Fires when a position is selected. */
+    indChange;
+    select(value) {
+        if (this.disabled || value === this.value)
+            return;
+        this.value = value;
+        this.indChange.emit(value);
+    }
+    onKey = (e) => {
+        const pos = this.positions ?? [];
+        if (pos.length === 0)
+            return;
+        const idx = pos.findIndex((p) => p.value === this.value);
+        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.select(pos[Math.min(pos.length - 1, idx + 1)]?.value ?? pos[0].value);
+        }
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.select(pos[Math.max(0, idx - 1)]?.value ?? pos[0].value);
+        }
+    };
+    render() {
+        const positions = this.positions ?? [];
+        return (h(Host, { key: '9fdb192691776ef8692939e70840c679b495b002' }, this.label && h("span", { key: 'f2f1b7541177cae7565a435e3a3effaf1a96a314', class: "group-label", part: "group-label" }, this.label), h("div", { key: 'b197eca164ed807d22aaab23bb3686d59641137e', class: "switch", part: "switch", role: "radiogroup", "aria-label": this.label, "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? undefined : '0', onKeyDown: this.onKey }, positions.map((p) => (h("button", { type: "button", class: { pos: true, 'is-active': p.value === this.value }, part: "position", role: "radio", "aria-checked": p.value === this.value ? 'true' : 'false', disabled: this.disabled, tabindex: "-1", onClick: () => this.select(p.value) }, p.label))))));
+    }
+    static get is() { return "ind-selector-switch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["selector-switch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["selector-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "positions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectorPosition[]",
+                    "resolved": "SelectorPosition[]",
+                    "references": {
+                        "SelectorPosition": {
+                            "location": "local",
+                            "path": "/home/runner/work/ind-ds/ind-ds/packages/core/src/components/atoms/selector-switch/selector-switch.tsx",
+                            "id": "src/components/atoms/selector-switch/selector-switch.tsx::SelectorPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Discrete positions, e.g. OFF / HAND / AUTO. Pass as a property."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Selected position value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Group label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "indChange",
+                "name": "indChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a position is selected."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=selector-switch.js.map

package/dist/collection/components/atoms/selector-switch/selector-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selector-switch.js","sourceRoot":"","sources":["../../../../src/components/atoms/selector-switch/selector-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface SelectorPosition {\n  value: string;\n  label: string;\n}\n\n@Component({\n  tag: 'ind-selector-switch',\n  styleUrl: 'selector-switch.css',\n  shadow: true,\n})\nexport class IndSelectorSwitch {\n  /** Discrete positions, e.g. OFF / HAND / AUTO. Pass as a property. */\n  @Prop() positions: SelectorPosition[] = [];\n  /** Selected position value. */\n  @Prop({ mutable: true, reflect: true }) value?: string;\n  /** Disabled. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Group label. */\n  @Prop() label?: string;\n\n  /** Fires when a position is selected. */\n  @Event() indChange!: EventEmitter<string>;\n\n  private select(value: string) {\n    if (this.disabled || value === this.value) return;\n    this.value = value;\n    this.indChange.emit(value);\n  }\n\n  private onKey = (e: KeyboardEvent) => {\n    const pos = this.positions ?? [];\n    if (pos.length === 0) return;\n    const idx = pos.findIndex((p) => p.value === this.value);\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      this.select(pos[Math.min(pos.length - 1, idx + 1)]?.value ?? pos[0].value);\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      this.select(pos[Math.max(0, idx - 1)]?.value ?? pos[0].value);\n    }\n  };\n\n  render() {\n    const positions = this.positions ?? [];\n    return (\n      <Host>\n        {this.label && <span class=\"group-label\" part=\"group-label\">{this.label}</span>}\n        <div\n          class=\"switch\"\n          part=\"switch\"\n          role=\"radiogroup\"\n          aria-label={this.label}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabindex={this.disabled ? undefined : '0'}\n          onKeyDown={this.onKey}\n        >\n          {positions.map((p) => (\n            <button\n              type=\"button\"\n              class={{ pos: true, 'is-active': p.value === this.value }}\n              part=\"position\"\n              role=\"radio\"\n              aria-checked={p.value === this.value ? 'true' : 'false'}\n              disabled={this.disabled}\n              tabindex=\"-1\"\n              onClick={() => this.select(p.value)}\n            >\n              {p.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}