@3t-transform/threeteeui 1.9.101 → 1.9.103

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

@@ -1,209 +1,209 @@
-import { action } from '@storybook/addon-actions';
-export default {
-  title: 'molecules/Charts',
-  component: 'tttx-chart_1_9_101',
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    chartData: { control: 'object' },
-    chartOptions: { control: 'object' },
-    width: { control: 'text' },
-    height: { control: 'text' },
-    loading: { control: 'boolean' },
-    error: { control: 'boolean' },
-    chartType: {
-      control: { type: 'select' },
-      options: ['line', 'doughnut', 'semi-gauge']
-    }
-  }
-};
-const Template = ({ width, height, chartData, loading, error, chartOptions }) => {
-  const container = document.createElement('div');
-  container.style.width = width || '100%';
-  container.style.height = height || '400px';
-  container.style.position = 'relative';
-  // create chart element
-  const el = document.createElement('tttx-chart_1_9_101');
-  el.setAttribute('chart-type', 'line');
-  el.style.width = '100%';
-  el.style.height = '100%';
-  el.chartType = 'line';
-  el.width = width;
-  el.height = height;
-  el.chartData = chartData;
-  el.loading = loading;
-  el.error = error;
-  const defaultOptions = {
-    responsive: true,
-    maintainAspectRatio: false,
-    animation: {
-      duration: 0
-    },
-    elements: {
-      point: {
-        radius: 1.5,
-        hoverRadius: 3
-      }
-    }
-  };
-  el.chartOptions = chartOptions || defaultOptions;
-  el.addEventListener('exportCSV', (e) => {
-    action('exportCSV event')(e);
-  });
-  return el;
-};
-export const LineChart = Template.bind({});
-LineChart.args = {
-  width: '600px',
-  height: '300px',
-  loading: false,
-  chartData: {
-    // use time-based x values (15th of each month) so getLineChartConfig (time axis) renders correctly
-    datasets: [
-      {
-        label: 'Overall',
-        borderColor: '#1579C6',
-        borderWidth: 2,
-        tension: 0.35,
-        pointRadius: 0.8,
-        data: [35, 50, 70, 65, 60, 80, 85, 90, 95, 0, 0, 0].map((v, i) => ({
-          x: new Date(2025, i, 15).getTime(),
-          y: v
-        }))
-      },
-      {
-        label: 'Safety Critical',
-        borderColor: '#416EB3',
-        borderWidth: 2,
-        borderDash: [3, 3],
-        tension: 0.35,
-        pointRadius: 0.8,
-        data: [20, 30, 40, 30, 20, 35, 45, 65, 85, 0, 0, 0].map((v, i) => ({
-          x: new Date(2025, i, 15).getTime(),
-          y: v
-        }))
-      },
-    ],
-  },
-  // provide minimal chartOptions tailored for monthly time axis (component will merge with its getLineChartConfig)
-  chartOptions: {
-    responsive: true,
-    maintainAspectRatio: false,
-    scales: {
-      x: {
-        type: 'time',
-        time: { unit: 'month', tooltipFormat: 'dd MMM yyyy' },
-        grid: { color: '#E5E5E5' },
-        ticks: { maxRotation: 0 }
-      },
-      y: {
-        min: 0,
-        grid: { color: '#E5E5E5' }
-      }
-    }
-  },
-  error: false,
-};
-const DonutChartTemplate = ({ width, height, chartData, loading, error }) => {
-  const el = document.createElement('tttx-chart_1_9_101');
-  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', '#2895e8', '#3dabff', '#69bdff'],
-        borderWidth: 0,
-        borderRadius: 4,
-        offset: 16
-      },
-    ],
-  },
-  error: false
-};
-const DonutV2ChartTemplate = ({ width, height, chartData, loading, error, initialActiveIndex, activeSegmentChangeCallback }) => {
-  const el = document.createElement('tttx-chart_1_9_101');
-  el.chartType = 'doughnut-v2';
-  el.width = width;
-  el.height = height;
-  el.chartData = chartData;
-  el.loading = loading;
-  el.error = error;
-  el.initialActiveIndex = initialActiveIndex;
-  el.activeSegmentChangeCallback = activeSegmentChangeCallback;
-  el.addEventListener('exportCSV', (e) => {
-    action('exportCSV event')(e);
-  });
-  return el;
-};
-export const DonutV2Chart = DonutV2ChartTemplate.bind({});
-DonutV2Chart.args = {
-  width: '600px',
-  height: '400px',
-  loading: false,
-  activeSegmentChangeCallback: action('activeSegmentChangeCallback'),
-  initialActiveIndex: 0,
-  chartData: {
-    labels: ['Worker', 'Assessor', 'Verifier', 'Admin', 'Super Admin'],
-    datasets: [
-      {
-        data: [4000, 2500, 2000, 1154, 800],
-        borderWidth: 0,
-        borderRadius: 4,
-        offset: 16,
-        selectedColors: ['#45C9B0', '#45C9B0', '#45C9B0', '#45C9B0', '#45C9B0'],
-        hoverColors: ['#A3A3A3', '#A3A3A3', '#A3A3A3', '#A3A3A3', '#A3A3A3'],
-        inactiveColors: ['#E5E5E5', '#E5E5E5', '#E5E5E5', '#E5E5E5', '#E5E5E5'],
-      },
-    ],
-  },
-  error: false
-};
-const semiGaugeChartTemplate = ({ width, height, chartData, loading, error }) => {
-  const el = document.createElement('tttx-chart_1_9_101');
-  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'],
-    datasets: [
-      {
-        data: [4000, 2500],
-        backgroundColor: ['#1579c6', '#2895e8'],
-        borderWidth: 0,
-        borderRadius: 4,
-        offset: 16
-      },
-    ],
-  },
-  error: false
-};
+import { action } from '@storybook/addon-actions';
+export default {
+  title: 'molecules/Charts',
+  component: 'tttx-chart_1_9_103',
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    chartData: { control: 'object' },
+    chartOptions: { control: 'object' },
+    width: { control: 'text' },
+    height: { control: 'text' },
+    loading: { control: 'boolean' },
+    error: { control: 'boolean' },
+    chartType: {
+      control: { type: 'select' },
+      options: ['line', 'doughnut', 'semi-gauge']
+    }
+  }
+};
+const Template = ({ width, height, chartData, loading, error, chartOptions }) => {
+  const container = document.createElement('div');
+  container.style.width = width || '100%';
+  container.style.height = height || '400px';
+  container.style.position = 'relative';
+  // create chart element
+  const el = document.createElement('tttx-chart_1_9_103');
+  el.setAttribute('chart-type', 'line');
+  el.style.width = '100%';
+  el.style.height = '100%';
+  el.chartType = 'line';
+  el.width = width;
+  el.height = height;
+  el.chartData = chartData;
+  el.loading = loading;
+  el.error = error;
+  const defaultOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    animation: {
+      duration: 0
+    },
+    elements: {
+      point: {
+        radius: 1.5,
+        hoverRadius: 3
+      }
+    }
+  };
+  el.chartOptions = chartOptions || defaultOptions;
+  el.addEventListener('exportCSV', (e) => {
+    action('exportCSV event')(e);
+  });
+  return el;
+};
+export const LineChart = Template.bind({});
+LineChart.args = {
+  width: '600px',
+  height: '300px',
+  loading: false,
+  chartData: {
+    // use time-based x values (15th of each month) so getLineChartConfig (time axis) renders correctly
+    datasets: [
+      {
+        label: 'Overall',
+        borderColor: '#1579C6',
+        borderWidth: 2,
+        tension: 0.35,
+        pointRadius: 0.8,
+        data: [35, 50, 70, 65, 60, 80, 85, 90, 95, 0, 0, 0].map((v, i) => ({
+          x: new Date(2025, i, 15).getTime(),
+          y: v
+        }))
+      },
+      {
+        label: 'Safety Critical',
+        borderColor: '#416EB3',
+        borderWidth: 2,
+        borderDash: [3, 3],
+        tension: 0.35,
+        pointRadius: 0.8,
+        data: [20, 30, 40, 30, 20, 35, 45, 65, 85, 0, 0, 0].map((v, i) => ({
+          x: new Date(2025, i, 15).getTime(),
+          y: v
+        }))
+      },
+    ],
+  },
+  // provide minimal chartOptions tailored for monthly time axis (component will merge with its getLineChartConfig)
+  chartOptions: {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        type: 'time',
+        time: { unit: 'month', tooltipFormat: 'dd MMM yyyy' },
+        grid: { color: '#E5E5E5' },
+        ticks: { maxRotation: 0 }
+      },
+      y: {
+        min: 0,
+        grid: { color: '#E5E5E5' }
+      }
+    }
+  },
+  error: false,
+};
+const DonutChartTemplate = ({ width, height, chartData, loading, error }) => {
+  const el = document.createElement('tttx-chart_1_9_103');
+  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', '#2895e8', '#3dabff', '#69bdff'],
+        borderWidth: 0,
+        borderRadius: 4,
+        offset: 16
+      },
+    ],
+  },
+  error: false
+};
+const DonutV2ChartTemplate = ({ width, height, chartData, loading, error, initialActiveIndex, activeSegmentChangeCallback }) => {
+  const el = document.createElement('tttx-chart_1_9_103');
+  el.chartType = 'doughnut-v2';
+  el.width = width;
+  el.height = height;
+  el.chartData = chartData;
+  el.loading = loading;
+  el.error = error;
+  el.initialActiveIndex = initialActiveIndex;
+  el.activeSegmentChangeCallback = activeSegmentChangeCallback;
+  el.addEventListener('exportCSV', (e) => {
+    action('exportCSV event')(e);
+  });
+  return el;
+};
+export const DonutV2Chart = DonutV2ChartTemplate.bind({});
+DonutV2Chart.args = {
+  width: '600px',
+  height: '400px',
+  loading: false,
+  activeSegmentChangeCallback: action('activeSegmentChangeCallback'),
+  initialActiveIndex: 0,
+  chartData: {
+    labels: ['Worker', 'Assessor', 'Verifier', 'Admin', 'Super Admin'],
+    datasets: [
+      {
+        data: [4000, 2500, 2000, 1154, 800],
+        borderWidth: 0,
+        borderRadius: 4,
+        offset: 16,
+        selectedColors: ['#45C9B0', '#45C9B0', '#45C9B0', '#45C9B0', '#45C9B0'],
+        hoverColors: ['#A3A3A3', '#A3A3A3', '#A3A3A3', '#A3A3A3', '#A3A3A3'],
+        inactiveColors: ['#E5E5E5', '#E5E5E5', '#E5E5E5', '#E5E5E5', '#E5E5E5'],
+      },
+    ],
+  },
+  error: false
+};
+const semiGaugeChartTemplate = ({ width, height, chartData, loading, error }) => {
+  const el = document.createElement('tttx-chart_1_9_103');
+  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'],
+    datasets: [
+      {
+        data: [4000, 2500],
+        backgroundColor: ['#1579c6', '#2895e8'],
+        borderWidth: 0,
+        borderRadius: 4,
+        offset: 16
+      },
+    ],
+  },
+  error: false
+};

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

@@ -1,17 +1,17 @@
-import { Host, h } from '@stencil/core';
-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_101"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../tttx-checkbox-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../tttx-checkbox-group.css"]
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+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_103"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../tttx-checkbox-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../tttx-checkbox-group.css"]
+    };
+  }
+}

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

@@ -1,17 +1,17 @@
-import { Host, h } from '@stencil/core';
-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_101"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../tttx-checkbox-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../tttx-checkbox-group.css"]
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+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_103"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["../tttx-checkbox-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../tttx-checkbox-group.css"]
+    };
+  }
+}

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

@@ -1,18 +1,18 @@
-import { Host, h } from '@stencil/core';
-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_101"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["tttx-checkbox-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["tttx-checkbox-group.css"]
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+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_103"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["tttx-checkbox-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tttx-checkbox-group.css"]
+    };
+  }
+}

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

@@ -1,83 +1,83 @@
-export default {
-  title: 'Molecules/CheckboxGroup',
-  component: 'tttx-checkbox-group',
-  argTypes: {
-    checkboxGroupHeading: {
-      control: { type: 'text' },
-      default: 'Checkbox Group',
-    },
-  },
-};
-const CheckboxGroupTemplate = ({ heading, checkboxData, captionTop, captionBottom }) => {
+export default {
+  title: 'Molecules/CheckboxGroup',
+  component: 'tttx-checkbox-group',
+  argTypes: {
+    checkboxGroupHeading: {
+      control: { type: 'text' },
+      default: 'Checkbox Group',
+    },
+  },
+};
+const CheckboxGroupTemplate = ({ heading, checkboxData, captionTop, captionBottom }) => {
   return `
-        <tttx-checkbox-group_1_9_101 >           
+        <tttx-checkbox-group_1_9_103 >           
              ${heading ? `
-                <tttx-checkbox-group-heading_1_9_101>
+                <tttx-checkbox-group-heading_1_9_103>
                     ${heading}
-                </tttx-checkbox-group-heading_1_9_101>
+                </tttx-checkbox-group-heading_1_9_103>
             ` : ''}
 
             ${captionTop ? `
-                <tttx-checkbox-group-caption_1_9_101>
+                <tttx-checkbox-group-caption_1_9_103>
                     ${captionTop}
-                </tttx-checkbox-group-caption_1_9_101>
+                </tttx-checkbox-group-caption_1_9_103>
             ` : ''}
 
-            ${checkboxData.map(checkboxInfo => {
-    const { label, checked, inline, indeterminate } = checkboxInfo;
+            ${checkboxData.map(checkboxInfo => {
+    const { label, checked, inline, indeterminate } = checkboxInfo;
     return `
-                        <tttx-checkbox_1_9_101 
+                        <tttx-checkbox_1_9_103 
                             checkbox-id="checkbox" 
                             label="${label}" 
                             ${inline && 'inline'} 
                             ${indeterminate && 'indeterminate'} 
                             ${checked && 'checked'} 
                         >
-                        </tttx-checkbox_1_9_101> `;
+                        </tttx-checkbox_1_9_103> `;
   }).join('')}
 
             ${captionBottom ? `
-                <tttx-checkbox-group-caption_1_9_101>
+                <tttx-checkbox-group-caption_1_9_103>
                     ${captionBottom}
-                </tttx-checkbox-group-caption_1_9_101>
+                </tttx-checkbox-group-caption_1_9_103>
             ` : ''}       
-        </tttx-checkbox-group_1_9_101>
-    `;
-};
-export const singleCheckbox = CheckboxGroupTemplate.bind({});
-singleCheckbox.args = {
-  heading: 'Safety-critical',
-  captionTop: 'This tags selected activities as safety-critical and can be changed indivudually once added',
-  checkboxData: [
-    {
-      checkboxId: 'checkbox-id',
-      label: 'Tag as safety-critical',
-    }
-  ]
-};
-export const multipleCheckboxes = CheckboxGroupTemplate.bind({});
-multipleCheckboxes.args = {
-  heading: 'Favorite Cartoon Dad',
-  captionTop: 'This is a primary judge of character',
-  checkboxData: [
-    {
-      checkboxId: 'checkbox-id',
-      label: 'Homer Sampson',
-      checked: true
-    },
-    {
-      checkboxId: 'checkbox-id',
-      label: 'Fred Flinrock',
-      indeterminate: true
-    },
-    {
-      checkboxId: 'checkbox-id',
-      label: 'George Aeroplanesone',
-    },
-    {
-      checkboxId: 'checkbox-id',
-      label: 'Other',
-    }
-  ],
-  captionBottom: 'Only messing',
-};
+        </tttx-checkbox-group_1_9_103>
+    `;
+};
+export const singleCheckbox = CheckboxGroupTemplate.bind({});
+singleCheckbox.args = {
+  heading: 'Safety-critical',
+  captionTop: 'This tags selected activities as safety-critical and can be changed indivudually once added',
+  checkboxData: [
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Tag as safety-critical',
+    }
+  ]
+};
+export const multipleCheckboxes = CheckboxGroupTemplate.bind({});
+multipleCheckboxes.args = {
+  heading: 'Favorite Cartoon Dad',
+  captionTop: 'This is a primary judge of character',
+  checkboxData: [
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Homer Sampson',
+      checked: true
+    },
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Fred Flinrock',
+      indeterminate: true
+    },
+    {
+      checkboxId: 'checkbox-id',
+      label: 'George Aeroplanesone',
+    },
+    {
+      checkboxId: 'checkbox-id',
+      label: 'Other',
+    }
+  ],
+  captionBottom: 'Only messing',
+};