@3t-transform/threeteeui 1.9.61 → 1.9.63

package/dist/collection/components/molecules/tttx-chart/tttx-chart.css

@@ -0,0 +1,61 @@
+.chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+canvas {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.export-buttons {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.chart-loading {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.error-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.error-content .error-heading {
+  color: var(--Text-Default-Default, #111);
+  text-align: center;
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+}
+.error-content .error-message {
+  color: var(--Text-Neutral-Default, #737373);
+  text-align: center;
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+.error-content .error-actions {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}

package/dist/collection/components/molecules/tttx-chart/tttx-chart.js

@@ -0,0 +1,383 @@
+import { h } from '@stencil/core';
+import Chart from 'chart.js/auto';
+export class TttxChart {
+  constructor() {
+    this.chartType = undefined;
+    this.chartData = undefined;
+    this.chartOptions = undefined;
+    this.loading = false;
+    this.error = undefined;
+    this.fallbackText = 'No data available';
+    this.width = '100%';
+    this.height = 'auto';
+    this.exportable = false;
+    this.chartInstance = undefined;
+    this.showPngSvgExport = false;
+  }
+  handleUpdate() {
+    this.renderChart();
+  }
+  componentDidLoad() {
+    this.renderChart();
+  }
+  disconnectedCallback() {
+    this.destroyChart();
+  }
+  renderChart() {
+    var _a, _b;
+    if (!this.canvasEl || !this.chartData || !this.chartType)
+      return;
+    this.destroyChart();
+    const config = {
+      type: this.getChartJsType(),
+      data: this.chartData,
+      options: this.getChartOptions(),
+      plugins: []
+    };
+    if (this.chartType === 'doughnut' || this.chartType === 'semi-gauge') {
+      const total = ((_b = (_a = this.chartData.datasets[0]) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.map((d) => Number(d) || 0).reduce((a, b) => a + b, 0)) || 0;
+      config.plugins.push(this.getCenterTextPlugin(total.toLocaleString()));
+    }
+    this.chartInstance = new Chart(this.canvasEl, config);
+  }
+  destroyChart() {
+    if (this.chartInstance) {
+      this.chartInstance.destroy();
+    }
+  }
+  getChartJsType() {
+    if (this.chartType === 'semi-gauge')
+      return 'doughnut';
+    return this.chartType;
+  }
+  getBaseOptions() {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: true,
+          position: 'bottom',
+          labels: {
+            usePointStyle: true,
+            pointStyle: 'circle',
+          },
+        },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `${ctx.label || ctx.dataset.label}: ${ctx.formattedValue}`,
+          },
+        },
+      },
+    };
+  }
+  getLineChartConfig() {
+    return {
+      plugins: {
+        legend: {
+          labels: { usePointStyle: true, pointStyle: 'line' },
+        },
+        tooltip: {
+          callbacks: {
+            label: (ctx) => `${ctx.dataset.label}: ${ctx.formattedValue}%`,
+          },
+        },
+      },
+      scales: {
+        x: { grid: { color: '#e5e5e5' } },
+        y: {
+          beginAtZero: true,
+          max: 100,
+          ticks: { callback: (val) => `${val}%` },
+          grid: { color: '#e5e5e5' },
+        },
+      },
+    };
+  }
+  getDoughnutChartConfig() {
+    return {
+      plugins: {
+        legend: { labels: { pointStyle: 'circle', padding: 16, } },
+      },
+      cutout: '60%'
+    };
+  }
+  getCenterTextPlugin(value) {
+    return {
+      id: 'centerText',
+      afterDatasetsDraw: (chart) => {
+        const { ctx } = chart;
+        ctx.save();
+        const x = chart.getDatasetMeta(0).data[0].x;
+        let y = chart.getDatasetMeta(0).data[0].y;
+        if (this.chartType === 'semi-gauge') {
+          y -= 20;
+        }
+        ctx.font = 'bold 20px Roboto';
+        ctx.fillStyle = '#111';
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(value, x, y);
+      },
+    };
+  }
+  getSemiGaugeChartConfig() {
+    return {
+      plugins: {
+        legend: { labels: { pointStyle: 'circle', padding: 16, } },
+      },
+      rotation: -90,
+      circumference: 180,
+      cutout: '70%',
+    };
+  }
+  merge(target, source) {
+    if (typeof target !== 'object' || typeof source !== 'object')
+      return source;
+    for (const key of Object.keys(source)) {
+      if (source[key] instanceof Object && key in target) {
+        target[key] = this.merge(Object.assign({}, target[key]), source[key]);
+      }
+      else {
+        target[key] = source[key];
+      }
+    }
+    return target;
+  }
+  getChartOptions() {
+    const base = this.getBaseOptions();
+    let specific = {};
+    if (this.chartType === 'line')
+      specific = this.getLineChartConfig();
+    else if (this.chartType === 'doughnut')
+      specific = this.getDoughnutChartConfig();
+    else if (this.chartType === 'semi-gauge')
+      specific = this.getSemiGaugeChartConfig();
+    return this.merge(this.merge(base, specific), this.chartOptions || {});
+  }
+  exportChart(format) {
+    if (!this.chartInstance)
+      return;
+    const link = document.createElement('a');
+    link.download = `chart-export.${format}`;
+    if (format === 'png') {
+      link.href = this.chartInstance.toBase64Image('image/png');
+    }
+    else {
+      const svgData = new XMLSerializer().serializeToString(this.canvasEl);
+      const blob = new Blob([svgData], { type: 'image/svg+xml' });
+      link.href = URL.createObjectURL(blob);
+    }
+    link.click();
+  }
+  getErrorContent() {
+    return this.commonContent('warning', 'Something went wrong', 'We ran into an issue while trying to load this widget.', '#DC0000', true);
+  }
+  getNoDataContent() {
+    return this.commonContent('ssid_chart', 'No data available', 'There is currently no data available to show performance trends.', '#111');
+  }
+  commonContent(iconName, heading, message, iconColor, showActions = false) {
+    return (h("div", { class: "error-content" }, h("tttx-icon_1_9_63", { icon: iconName, color: iconColor, size: 48 }), h("span", { class: 'error-heading' }, heading), h("span", { class: 'error-message' }, message), showActions && h("div", { class: "error-actions" }, h("tttx-button_1_9_63", { class: 'reload-btn', icon: "refresh", design: 'default', onClick: () => this.renderChart() }, "Reload data"), h("tttx-button_1_9_63", { class: 'support-btn', icon: "help", design: "primary", onClick: () => this.renderChart() }, "Contact support"))));
+  }
+  render() {
+    var _a, _b, _c;
+    return (h("div", { class: "chart-wrapper", style: { width: this.width, height: this.height } }, this.loading && h("div", { class: "chart-loading" }, h("tttx-loading-spinner_1_9_63", { size: 'large', color: '#2b9ab7' })), this.error && this.getErrorContent(), !this.loading && !this.error && (!this.chartData || !((_a = this.chartData.datasets) === null || _a === void 0 ? void 0 : _a.length)) && (this.getNoDataContent()), !this.loading && !this.error && ((_c = (_b = this.chartData) === null || _b === void 0 ? void 0 : _b.datasets) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("canvas", { ref: el => (this.canvasEl = el), "aria-label": "Chart canvas", role: "img" })), this.exportable && !this.loading && !this.error && (h("div", { class: "export-buttons" }, this.showPngSvgExport && h("tttx-button_1_9_63", { class: 'export-png', design: "primary", onClick: () => this.exportChart('png') }, "Export PNG"), this.showPngSvgExport && h("tttx-button_1_9_63", { class: 'export-svg', design: "primary", onClick: () => this.exportChart('svg') }, "Export SVG"), h("tttx-button_1_9_63", { class: 'export-csv', design: "primary", onClick: () => this.exportCSV.emit({ name: this.chartType }) }, "Export CSV")))));
+  }
+  static get is() { return "tttx-chart_1_9_63"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-chart.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-chart.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "chartType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'line' | 'doughnut' | 'semi-gauge'",
+          "resolved": "\"doughnut\" | \"line\" | \"semi-gauge\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "chart-type",
+        "reflect": false
+      },
+      "chartData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartData",
+          "resolved": "ChartData<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>",
+          "references": {
+            "ChartData": {
+              "location": "import",
+              "path": "chart.js"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "chartOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ChartOptions",
+          "resolved": "{ datasets?: _DeepPartialObject<{ line: LineControllerDatasetOptions & FillerControllerDatasetOptions; bar: BarControllerDatasetOptions; scatter: LineControllerDatasetOptions; bubble: BubbleControllerDatasetOptions; pie: DoughnutControllerDatasetOptions; doughnut: DoughnutControllerDatasetOptions; polarArea: PolarAreaControllerDatasetOptions; radar: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }>; indexAxis?: \"x\" | \"y\"; clip?: number | false | _DeepPartialObject<ChartArea>; color?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); backgroundColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); borderColor?: string | _DeepPartialObject<CanvasGradient> | _DeepPartialObject<CanvasPattern> | ((ctx: ScriptableContext<keyof ChartTypeRegistry>, options: AnyObject) => Color); font?: _DeepPartialObject<Partial<FontSpec>>; responsive?: boolean; maintainAspectRatio?: boolean; resizeDelay?: number; aspectRatio?: number; locale?: string; onResize?: (chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>, size: { width: number; height: number; }) => void; devicePixelRatio?: number; interaction?: _DeepPartialObject<CoreInteractionOptions>; hover?: _DeepPartialObject<CoreInteractionOptions>; events?: _DeepPartialArray<keyof HTMLElementEventMap>; onHover?: (event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>) => void; onClick?: (event: ChartEvent, elements: ActiveElement[], chart: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>) => void; layout?: _DeepPartialObject<Partial<{ autoPadding: boolean; padding: Scriptable<Padding, ScriptableContext<keyof ChartTypeRegistry>>; }>>; parsing?: false | _DeepPartialObject<{ [key: string]: string; }>; normalized?: boolean; animation?: false | _DeepPartialObject<AnimationSpec<keyof ChartTypeRegistry> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | Point | [number, number] | BubbleDataPoint)[], unknown>, event: AnimationEvent) => void; }>; animations?: _DeepPartialObject<AnimationsSpec<keyof ChartTypeRegistry>>; transitions?: _DeepPartialObject<TransitionsSpec<keyof ChartTypeRegistry>>; elements?: _DeepPartialObject<ElementOptionsByType<keyof ChartTypeRegistry>>; plugins?: _DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>; line?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions & FillerControllerDatasetOptions; }>; bar?: _DeepPartialObject<{ datasets: BarControllerDatasetOptions; }>; scatter?: _DeepPartialObject<{ datasets: LineControllerDatasetOptions; }>; bubble?: _DeepPartialObject<{ datasets: BubbleControllerDatasetOptions; }>; pie?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }>; doughnut?: _DeepPartialObject<{ datasets: DoughnutControllerDatasetOptions; }>; polarArea?: _DeepPartialObject<{ datasets: PolarAreaControllerDatasetOptions; }>; radar?: _DeepPartialObject<{ datasets: RadarControllerDatasetOptions & FillerControllerDatasetOptions; }>; scales?: _DeepPartialObject<{ [key: string]: ScaleOptionsByType<\"radialLinear\" | keyof CartesianScaleTypeRegistry>; }>; }",
+          "references": {
+            "ChartOptions": {
+              "location": "import",
+              "path": "chart.js"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "error": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "fallbackText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fallback-text",
+        "reflect": false,
+        "defaultValue": "'No data available'"
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "'100%'"
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "exportable": {},
+      "chartInstance": {},
+      "showPngSvgExport": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "exportCSV",
+        "name": "exportCSV",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ name: string }",
+          "resolved": "{ name: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "chartData",
+        "methodName": "handleUpdate"
+      }, {
+        "propName": "chartOptions",
+        "methodName": "handleUpdate"
+      }];
+  }
+}

package/dist/collection/components/molecules/tttx-chart/tttx-chart.stories.js

@@ -0,0 +1,112 @@
+import { action } from '@storybook/addon-actions';
+export default {
+  title: 'molecules/Charts',
+  component: 'tttx-chart_1_9_63',
+  parameters: {
+    layout: 'centered',
+  },
+};
+const Template = ({ width, height, chartData, loading, error }) => {
+  const el = document.createElement('tttx-chart_1_9_63');
+  el.chartType = 'line';
+  el.width = width;
+  el.height = height;
+  el.chartData = chartData;
+  el.loading = loading;
+  el.error = error;
+  el.addEventListener('exportCSV', (e) => {
+    action('exportCSV event')(e);
+  });
+  return el;
+};
+export const LineChart = Template.bind({});
+LineChart.args = {
+  width: '600px',
+  height: '300px',
+  loading: false,
+  chartData: {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    datasets: [
+      {
+        label: 'Overall',
+        data: [35, 50, 70, 65, 60, 80, 85, 90, 95, 0, 0, 0],
+        borderColor: '#1579C6',
+        borderWidth: 2,
+        tension: 0.35,
+      },
+      {
+        label: 'Safety Critical',
+        data: [20, 30, 40, 30, 20, 35, 45, 65, 85, 0, 0, 0],
+        borderColor: '#146EB3',
+        borderWidth: 2,
+        borderDash: [6, 6],
+        tension: 0.35,
+      },
+    ],
+  },
+  error: false,
+};
+const DonutChartTemplate = ({ width, height, chartData, loading, error }) => {
+  const el = document.createElement('tttx-chart_1_9_63');
+  el.chartType = 'doughnut';
+  el.width = width;
+  el.height = height;
+  el.chartData = chartData;
+  el.loading = loading;
+  el.error = error;
+  el.addEventListener('exportCSV', (e) => {
+    action('exportCSV event')(e);
+  });
+  return el;
+};
+export const DonutChart = DonutChartTemplate.bind({});
+DonutChart.args = {
+  width: '600px',
+  height: '400px',
+  loading: false,
+  chartData: {
+    labels: ['Worker', 'Assessor', 'Verifier', 'Admin'],
+    datasets: [
+      {
+        data: [4000, 2500, 2000, 1154],
+        backgroundColor: ['#1579C6', '#146EB3', '#1464A2', '#C2DAEE'],
+        borderWidth: 0,
+        borderRadius: 4,
+        offset: 16
+      },
+    ],
+  },
+  error: false
+};
+const semiGaugeChartTemplate = ({ width, height, chartData, loading, error }) => {
+  const el = document.createElement('tttx-chart_1_9_63');
+  el.chartType = 'semi-gauge';
+  el.width = width;
+  el.height = height;
+  el.chartData = chartData;
+  el.loading = loading;
+  el.error = error;
+  el.addEventListener('exportCSV', (e) => {
+    action('exportCSV event')(e);
+  });
+  return el;
+};
+export const SemiGaugeChart = semiGaugeChartTemplate.bind({});
+SemiGaugeChart.args = {
+  width: '600px',
+  height: '400px',
+  loading: false,
+  chartData: {
+    labels: ['Worker', 'Assessor', 'Verifier', 'Admin'],
+    datasets: [
+      {
+        data: [4000, 2500, 2000, 1154],
+        backgroundColor: ['#1579C6', '#146EB3', '#1464A2', '#C2DAEE'],
+        borderWidth: 0,
+        borderRadius: 4,
+        offset: 16
+      },
+    ],
+  },
+  error: false
+};

package/dist/collection/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-caption.js

@@ -3,7 +3,7 @@ export class TttxCheckboxGroupCaption {
   render() {
     return (h(Host, null, h("div", { class: 'tttx-checkbox-group__caption' }, h("slot", null))));
   }
-  static get is() { return "tttx-checkbox-group-caption_1_9_61"; }
+  static get is() { return "tttx-checkbox-group-caption_1_9_63"; }
   static get originalStyleUrls() {
     return {
       "$": ["../tttx-checkbox-group.scss"]

package/dist/collection/components/molecules/tttx-checkbox-group/components/tttx-checkbox-group-heading.js

@@ -3,7 +3,7 @@ export class TttxCheckboxGroupHeading {
   render() {
     return (h(Host, null, h("div", { class: 'tttx-checkbox-group__heading' }, h("slot", null))));
   }
-  static get is() { return "tttx-checkbox-group-heading_1_9_61"; }
+  static get is() { return "tttx-checkbox-group-heading_1_9_63"; }
   static get originalStyleUrls() {
     return {
       "$": ["../tttx-checkbox-group.scss"]

package/dist/collection/components/molecules/tttx-checkbox-group/tttx-checkbox-group.js

@@ -3,7 +3,7 @@ export class TttxCheckboxGroup {
   render() {
     return (h(Host, null, h("div", { class: 'tttx-checkbox-group' }, h("slot", null))));
   }
-  static get is() { return "tttx-checkbox-group_1_9_61"; }
+  static get is() { return "tttx-checkbox-group_1_9_63"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

package/dist/collection/components/molecules/tttx-checkbox-group/tttx-checkbox-group.stories.js

@@ -10,38 +10,38 @@ export default {
 };
 const CheckboxGroupTemplate = ({ heading, checkboxData, captionTop, captionBottom }) => {
   return `
-        <tttx-checkbox-group_1_9_61 >           
+        <tttx-checkbox-group_1_9_63 >           
              ${heading ? `
-                <tttx-checkbox-group-heading_1_9_61>
+                <tttx-checkbox-group-heading_1_9_63>
                     ${heading}
-                </tttx-checkbox-group-heading_1_9_61>
+                </tttx-checkbox-group-heading_1_9_63>
             ` : ''}
 
             ${captionTop ? `
-                <tttx-checkbox-group-caption_1_9_61>
+                <tttx-checkbox-group-caption_1_9_63>
                     ${captionTop}
-                </tttx-checkbox-group-caption_1_9_61>
+                </tttx-checkbox-group-caption_1_9_63>
             ` : ''}
 
             ${checkboxData.map(checkboxInfo => {
     const { label, checked, inline, indeterminate } = checkboxInfo;
     return `
-                        <tttx-checkbox_1_9_61 
+                        <tttx-checkbox_1_9_63 
                             checkbox-id="checkbox" 
                             label="${label}" 
                             ${inline && 'inline'} 
                             ${indeterminate && 'indeterminate'} 
                             ${checked && 'checked'} 
                         >
-                        </tttx-checkbox_1_9_61> `;
+                        </tttx-checkbox_1_9_63> `;
   }).join('')}
 
             ${captionBottom ? `
-                <tttx-checkbox-group-caption_1_9_61>
+                <tttx-checkbox-group-caption_1_9_63>
                     ${captionBottom}
-                </tttx-checkbox-group-caption_1_9_61>
+                </tttx-checkbox-group-caption_1_9_63>
             ` : ''}       
-        </tttx-checkbox-group_1_9_61>
+        </tttx-checkbox-group_1_9_63>
     `;
 };
 export const singleCheckbox = CheckboxGroupTemplate.bind({});