@3t-transform/threeteeui 1.9.62 → 1.9.64

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_64", { 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_64", { class: 'reload-btn', icon: "refresh", design: 'default', onClick: () => this.renderChart() }, "Reload data"), h("tttx-button_1_9_64", { 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_64", { 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_64", { class: 'export-png', design: "primary", onClick: () => this.exportChart('png') }, "Export PNG"), this.showPngSvgExport && h("tttx-button_1_9_64", { class: 'export-svg', design: "primary", onClick: () => this.exportChart('svg') }, "Export SVG"), h("tttx-button_1_9_64", { class: 'export-csv', design: "primary", onClick: () => this.exportCSV.emit({ name: this.chartType }) }, "Export CSV")))));
+  }
+  static get is() { return "tttx-chart_1_9_64"; }
+  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_64',
+  parameters: {
+    layout: 'centered',
+  },
+};
+const Template = ({ width, height, chartData, loading, error }) => {
+  const el = document.createElement('tttx-chart_1_9_64');
+  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_64');
+  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_64');
+  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_62"; }
+  static get is() { return "tttx-checkbox-group-caption_1_9_64"; }
   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_62"; }
+  static get is() { return "tttx-checkbox-group-heading_1_9_64"; }
   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_62"; }
+  static get is() { return "tttx-checkbox-group_1_9_64"; }
   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_62 >           
+        <tttx-checkbox-group_1_9_64 >           
              ${heading ? `
-                <tttx-checkbox-group-heading_1_9_62>
+                <tttx-checkbox-group-heading_1_9_64>
                     ${heading}
-                </tttx-checkbox-group-heading_1_9_62>
+                </tttx-checkbox-group-heading_1_9_64>
             ` : ''}
 
             ${captionTop ? `
-                <tttx-checkbox-group-caption_1_9_62>
+                <tttx-checkbox-group-caption_1_9_64>
                     ${captionTop}
-                </tttx-checkbox-group-caption_1_9_62>
+                </tttx-checkbox-group-caption_1_9_64>
             ` : ''}
 
             ${checkboxData.map(checkboxInfo => {
     const { label, checked, inline, indeterminate } = checkboxInfo;
     return `
-                        <tttx-checkbox_1_9_62 
+                        <tttx-checkbox_1_9_64 
                             checkbox-id="checkbox" 
                             label="${label}" 
                             ${inline && 'inline'} 
                             ${indeterminate && 'indeterminate'} 
                             ${checked && 'checked'} 
                         >
-                        </tttx-checkbox_1_9_62> `;
+                        </tttx-checkbox_1_9_64> `;
   }).join('')}
 
             ${captionBottom ? `
-                <tttx-checkbox-group-caption_1_9_62>
+                <tttx-checkbox-group-caption_1_9_64>
                     ${captionBottom}
-                </tttx-checkbox-group-caption_1_9_62>
+                </tttx-checkbox-group-caption_1_9_64>
             ` : ''}       
-        </tttx-checkbox-group_1_9_62>
+        </tttx-checkbox-group_1_9_64>
     `;
 };
 export const singleCheckbox = CheckboxGroupTemplate.bind({});

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

@@ -72,7 +72,7 @@ export class TttxComments {
       }
       unreadDividerRendered = unreadDividerRendered || nextIsUnread;
       return [
-        h("div", { class: bubbleClass, style: topComment }, firstComment && topDivider, h("div", { class: "bubbleHeader" }, h("div", { class: "bubble-header-inner" }, h("span", { class: "commentName" }, comment.createdByFullName), this.isUnread(comment) && (h("tttx-icon_1_9_62", { class: "unread-symbol", icon: "error", color: "blue", style: { height: '18px' }, size: 18 }))), ((_a = comment.metadata) === null || _a === void 0 ? void 0 : _a.contextString) && (h("span", { class: "commentContext" }, "(", comment.metadata.contextString, ")"))), h("div", { class: `bubbleText ${comment.isDeleted ? 'deleted-comment' : ''}` }, this.renderCommentInner(comment)), h("div", { class: "bubbleFooter" }, !this.readonly && this.allowEditing && isCurrentUser && !comment.isDeleted && !!comment.id && (h("div", null, !this.isFileComment(comment) && (h(Fragment, null, h("span", { class: "clickable", onClick: this.onEdit.bind(this, comment) }, "Edit"), " | ")), h("span", { class: "clickable", onClick: this.onRemove.bind(this, comment) }, "Remove"))), h("span", { class: "comment-date" }, !!comment.lastUpdatedAt && !comment.isDeleted && `Edited ${new Date(comment.lastUpdatedAt).toLocaleString(undefined, timestampOptions)}`, !!comment.lastUpdatedAt && comment.isDeleted && `Removed ${new Date(comment.lastUpdatedAt).toLocaleString(undefined, timestampOptions)}`, !comment.lastUpdatedAt && `${new Date(comment.createdAt).toLocaleString(undefined, timestampOptions)}`)), !divider && !isLastComment && h("hr", { class: "commentDivider" }), divider)
+        h("div", { class: bubbleClass, style: topComment }, firstComment && topDivider, h("div", { class: "bubbleHeader" }, h("div", { class: "bubble-header-inner" }, h("span", { class: "commentName" }, comment.createdByFullName), this.isUnread(comment) && (h("tttx-icon_1_9_64", { class: "unread-symbol", icon: "error", color: "blue", style: { height: '18px' }, size: 18 }))), ((_a = comment.metadata) === null || _a === void 0 ? void 0 : _a.contextString) && (h("span", { class: "commentContext" }, "(", comment.metadata.contextString, ")"))), h("div", { class: `bubbleText ${comment.isDeleted ? 'deleted-comment' : ''}` }, this.renderCommentInner(comment)), h("div", { class: "bubbleFooter" }, !this.readonly && this.allowEditing && isCurrentUser && !comment.isDeleted && !!comment.id && (h("div", null, !this.isFileComment(comment) && (h(Fragment, null, h("span", { class: "clickable", onClick: this.onEdit.bind(this, comment) }, "Edit"), " | ")), h("span", { class: "clickable", onClick: this.onRemove.bind(this, comment) }, "Remove"))), h("span", { class: "comment-date" }, !!comment.lastUpdatedAt && !comment.isDeleted && `Edited ${new Date(comment.lastUpdatedAt).toLocaleString(undefined, timestampOptions)}`, !!comment.lastUpdatedAt && comment.isDeleted && `Removed ${new Date(comment.lastUpdatedAt).toLocaleString(undefined, timestampOptions)}`, !comment.lastUpdatedAt && `${new Date(comment.createdAt).toLocaleString(undefined, timestampOptions)}`)), !divider && !isLastComment && h("hr", { class: "commentDivider" }), divider)
       ];
     })));
   }
@@ -83,7 +83,7 @@ export class TttxComments {
     return this.isFileComment(comment) ? this.renderFileLink(comment.metadata) : comment.text;
   }
   renderFileLink(metadata) {
-    return (h("div", { class: "file-link-container" }, h("tttx-icon_1_9_62", { icon: "attach_file", color: "black", style: { height: '20px' }, size: 20 }), h("button", { class: "linkButton", type: "button", value: metadata.key, onClick: this.onFileDownloadRequest.bind(this) }, metadata.filename)));
+    return (h("div", { class: "file-link-container" }, h("tttx-icon_1_9_64", { icon: "attach_file", color: "black", style: { height: '20px' }, size: 20 }), h("button", { class: "linkButton", type: "button", value: metadata.key, onClick: this.onFileDownloadRequest.bind(this) }, metadata.filename)));
   }
   onFormSubmit(event) {
     // get comment text
@@ -177,9 +177,9 @@ export class TttxComments {
     this.requestCommentRemoval.emit(comment);
   }
   render() {
-    return (h(Host, null, h("article", { id: "comment-container" }, (!Array.isArray(this._comments) || this._comments.length === 0) && (h("div", { class: "no-comments" }, h("tttx-icon_1_9_62", { class: 'mt-s', icon: "chat_bubble_outline", color: "grey" }), h("span", null, "No comments have been added"))), h("section", { id: "comment-bubbles-section" }, h("div", { id: "scroll-container", ref: el => this._scrollContainer = el }, this.renderCommentBubble())), h("section", { id: "input-section" }, !this.readonly && h("form", { onSubmit: this.onFormSubmit.bind(this) }, this.editingComment && (h("div", { class: "cancel-edit-container" }, h("span", { class: "cancel-edit-button clickable", onClick: this.onFinishEdit.bind(this) }, "x"))), h("fieldset", null, h("textarea", { ref: el => this.textInput = el, name: "commentText", required: true, maxlength: `${this.messageLimit}`, placeholder: this.placeholder, onInput: (e) => this.onCommentFieldChange(e), style: { '--textarea-max-height': `${this.inputBoxHeight}px` }, class: "comment-textarea", value: this.value, onBlur: this.handleBlur.bind(this) })), this.showError && (h("span", { class: 'errorBubble visible' }, h("span", { class: "material-symbols-rounded" }, "warning"), " ", `${this.messageLimit} character limit is reached.`)), h("fieldset", null, this.editingComment && (h("span", { class: 'editing-sub-text' }, "Editing comment")), !this.disableFile && (h("button", { id: "attach-file", class: "flex-right-align clickable", type: "button", value: "File", onClick: this.onFileUploadRequest.bind(this) }, h("tttx-icon_1_9_62", { color: "black", icon: "attach_file" }))), h("input", { class: (this.disableFile ? 'flex-right-align ' : '') + 'clickable', style: { width: 'fit-content' }, type: "submit", value: this._saveButtonText })))))));
+    return (h(Host, null, h("article", { id: "comment-container" }, (!Array.isArray(this._comments) || this._comments.length === 0) && (h("div", { class: "no-comments" }, h("tttx-icon_1_9_64", { class: 'mt-s', icon: "chat_bubble_outline", color: "grey" }), h("span", null, "No comments have been added"))), h("section", { id: "comment-bubbles-section" }, h("div", { id: "scroll-container", ref: el => this._scrollContainer = el }, this.renderCommentBubble())), h("section", { id: "input-section" }, !this.readonly && h("form", { onSubmit: this.onFormSubmit.bind(this) }, this.editingComment && (h("div", { class: "cancel-edit-container" }, h("span", { class: "cancel-edit-button clickable", onClick: this.onFinishEdit.bind(this) }, "x"))), h("fieldset", null, h("textarea", { ref: el => this.textInput = el, name: "commentText", required: true, maxlength: `${this.messageLimit}`, placeholder: this.placeholder, onInput: (e) => this.onCommentFieldChange(e), style: { '--textarea-max-height': `${this.inputBoxHeight}px` }, class: "comment-textarea", value: this.value, onBlur: this.handleBlur.bind(this) })), this.showError && (h("span", { class: 'errorBubble visible' }, h("span", { class: "material-symbols-rounded" }, "warning"), " ", `${this.messageLimit} character limit is reached.`)), h("fieldset", null, this.editingComment && (h("span", { class: 'editing-sub-text' }, "Editing comment")), !this.disableFile && (h("button", { id: "attach-file", class: "flex-right-align clickable", type: "button", value: "File", onClick: this.onFileUploadRequest.bind(this) }, h("tttx-icon_1_9_64", { color: "black", icon: "attach_file" }))), h("input", { class: (this.disableFile ? 'flex-right-align ' : '') + 'clickable', style: { width: 'fit-content' }, type: "submit", value: this._saveButtonText })))))));
   }
-  static get is() { return "tttx-comments_1_9_62"; }
+  static get is() { return "tttx-comments_1_9_64"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

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

@@ -8,12 +8,12 @@ const myUser = { id: '42069232-8c58-47fc-8825-f33c0c33ab97', userName: 'john.doe
 const otherUser = { id: '8c23e87b-f005-4a5a-bab5-de89b9bf4ab6', userName: 'robert.doe@example.com' };
 const Default = ({ currentUser, comments, allowEditing }) => `
 <section style="width: 300px; display: inline-block; height: calc(100vh - 50px)">
-    <tttx-comments_1_9_62
+    <tttx-comments_1_9_64
         currentuser="${currentUser}"
         comments='${JSON.stringify(comments)}'
         allow-editing=${allowEditing}
     >
-    </tttx-comments_1_9_62>
+    </tttx-comments_1_9_64>
 </section>
 `;
 export const DefaultComments = Default.bind({});
@@ -95,12 +95,12 @@ DefaultComments.args = {
 };
 const Unread = ({ currentUser, comments, allowEditing }) => `
 <section style="width: 300px; display: inline-block; height: calc(100vh - 50px)">
-    <tttx-comments_1_9_62
+    <tttx-comments_1_9_64
         currentuser="${currentUser}"
         comments='${JSON.stringify(comments)}'
         allow-editing=${allowEditing}
     >
-    </tttx-comments_1_9_62>
+    </tttx-comments_1_9_64>
 </section>
 `;
 export const UnreadComments = Unread.bind({});

package/dist/collection/components/molecules/tttx-date-range-picker/tttx-date-range-picker.js

@@ -203,7 +203,7 @@ export class TttxDateRangePicker {
     return (h(Host, null, h("div", { class: "date-range-input", tabIndex: 0, "aria-haspopup": "dialog", "aria-expanded": this.showCalendar ? 'true' : 'false', ref: el => (this.inputRef = el), onClick: this.handleInputClick }, h("span", { class: {
         'range-text': true,
         'is-placeholder': !(this.startDate || this.endDate),
-      } }, rangeText), (this.startDate || this.endDate) && (h("button", { class: "clear-btn", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), h("span", { class: "calendar-icon", "aria-hidden": "true" }, h("tttx-icon_1_9_62", { icon: 'calendar_month' }))), this.showCalendar && (h("div", { class: "calendar-popup single" }, this.renderCalendar(this.currentYear, this.currentMonth, this.handleDateClick.bind(this))))));
+      } }, rangeText), (this.startDate || this.endDate) && (h("button", { class: "clear-btn", "aria-label": "Clear", onClick: this.handleClear }, "\u00D7")), h("span", { class: "calendar-icon", "aria-hidden": "true" }, h("tttx-icon_1_9_64", { icon: 'calendar_month' }))), this.showCalendar && (h("div", { class: "calendar-popup single" }, this.renderCalendar(this.currentYear, this.currentMonth, this.handleDateClick.bind(this))))));
   }
   static get is() { return "tttx-date-range-picker"; }
   static get encapsulation() { return "shadow"; }