@3t-transform/threeteeui 1.9.101 → 1.9.103

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

@@ -1,34 +1,34 @@
-import { withActions } from '@storybook/addon-actions/decorator';
-import { seed, randNumber, randEmail, randFullName, randColor } from '@ngneat/falso';
-seed('ensure-always-the-same-people-every-time');
-// ---------------------------------------------------------
-// DATA: GROUP PERFORMANCE
-// ---------------------------------------------------------
-const groupPerformanceData = [
-  { group: 'Lorem ipsum text is placeholder text traditionally used in publishing and graphic design to demonstrate the visual form of a document or a typeface without the distraction of meaningful content', training: '91%', competence: '88%', trend: '+14%', safetyCritical: '80%', safetyTrend: '-4%', workers: 156 },
-  { group: 'CCR Operator', training: '85%', competence: '98%', trend: '+3%', safetyCritical: '82%', safetyTrend: '+3%', workers: 73 },
-  { group: 'Electrician', training: '78%', competence: '80%', trend: '-2%', safetyCritical: '85%', safetyTrend: '-2%', workers: 220 },
-  { group: 'Driller', training: '54%', competence: '68%', trend: '+5%', safetyCritical: '90%', safetyTrend: '-3%', workers: 138 },
-  { group: 'First Aider', training: '48%', competence: '89%', trend: '+8%', safetyCritical: '85%', safetyTrend: '+8%', workers: 98 },
-  { group: 'Welder', training: '67%', competence: '73%', trend: '+4%', safetyCritical: '88%', safetyTrend: '+2%', workers: 64 },
-  { group: 'Rigger', training: '72%', competence: '86%', trend: '+1%', safetyCritical: '83%', safetyTrend: '-1%', workers: 112 },
-  { group: 'Mechanic', training: '59%', competence: '78%', trend: '-3%', safetyCritical: '79%', safetyTrend: '-2%', workers: 47 },
-  { group: 'Pump Operator', training: '80%', competence: '78%', trend: '+6%', safetyCritical: '92%', safetyTrend: '+5%', workers: 51 },
-  { group: 'Scaffolder', training: '63%', competence: '78%', trend: '+2%', safetyCritical: '81%', safetyTrend: '+1%', workers: 89 },
-  { group: 'Logistics Coordinator', training: '74%', competence: '81%', trend: '+3%', safetyCritical: '86%', safetyTrend: '+2%', workers: 45 },
-  { group: 'Field Technician', training: '69%', competence: '99%', trend: '-1%', safetyCritical: '84%', safetyTrend: '+1%', workers: 77 },
-  { group: 'Safety Inspector', training: '92%', competence: '76%', trend: '+5%', safetyCritical: '95%', safetyTrend: '+4%', workers: 26 },
-  { group: 'Production Operator', training: '58%', competence: '70%', trend: '+2%', safetyCritical: '78%', safetyTrend: '-1%', workers: 134 },
-  { group: 'Maintenance Supervisor', training: '83%', competence: '48%', trend: '+4%', safetyCritical: '91%', safetyTrend: '+3%', workers: 19 }
-];
-// ---------------------------------------------------------
-// TREND RENDERING
-// ---------------------------------------------------------
-const renderTrend = (value) => {
-  const positive = value.startsWith('+');
-  const bgColor = positive ? '#E4EBC9' : '#FEE2E2';
-  const textColor = positive ? '#4D7C0F' : '#B91C1C';
-  const icon = positive ? 'arrow_upward' : 'arrow_downward';
+import { withActions } from '@storybook/addon-actions/decorator';
+import { seed, randNumber, randEmail, randFullName, randColor } from '@ngneat/falso';
+seed('ensure-always-the-same-people-every-time');
+// ---------------------------------------------------------
+// DATA: GROUP PERFORMANCE
+// ---------------------------------------------------------
+const groupPerformanceData = [
+  { group: 'Lorem ipsum text is placeholder text traditionally used in publishing and graphic design to demonstrate the visual form of a document or a typeface without the distraction of meaningful content', training: '91%', competence: '88%', trend: '+14%', safetyCritical: '80%', safetyTrend: '-4%', workers: 156 },
+  { group: 'CCR Operator', training: '85%', competence: '98%', trend: '+3%', safetyCritical: '82%', safetyTrend: '+3%', workers: 73 },
+  { group: 'Electrician', training: '78%', competence: '80%', trend: '-2%', safetyCritical: '85%', safetyTrend: '-2%', workers: 220 },
+  { group: 'Driller', training: '54%', competence: '68%', trend: '+5%', safetyCritical: '90%', safetyTrend: '-3%', workers: 138 },
+  { group: 'First Aider', training: '48%', competence: '89%', trend: '+8%', safetyCritical: '85%', safetyTrend: '+8%', workers: 98 },
+  { group: 'Welder', training: '67%', competence: '73%', trend: '+4%', safetyCritical: '88%', safetyTrend: '+2%', workers: 64 },
+  { group: 'Rigger', training: '72%', competence: '86%', trend: '+1%', safetyCritical: '83%', safetyTrend: '-1%', workers: 112 },
+  { group: 'Mechanic', training: '59%', competence: '78%', trend: '-3%', safetyCritical: '79%', safetyTrend: '-2%', workers: 47 },
+  { group: 'Pump Operator', training: '80%', competence: '78%', trend: '+6%', safetyCritical: '92%', safetyTrend: '+5%', workers: 51 },
+  { group: 'Scaffolder', training: '63%', competence: '78%', trend: '+2%', safetyCritical: '81%', safetyTrend: '+1%', workers: 89 },
+  { group: 'Logistics Coordinator', training: '74%', competence: '81%', trend: '+3%', safetyCritical: '86%', safetyTrend: '+2%', workers: 45 },
+  { group: 'Field Technician', training: '69%', competence: '99%', trend: '-1%', safetyCritical: '84%', safetyTrend: '+1%', workers: 77 },
+  { group: 'Safety Inspector', training: '92%', competence: '76%', trend: '+5%', safetyCritical: '95%', safetyTrend: '+4%', workers: 26 },
+  { group: 'Production Operator', training: '58%', competence: '70%', trend: '+2%', safetyCritical: '78%', safetyTrend: '-1%', workers: 134 },
+  { group: 'Maintenance Supervisor', training: '83%', competence: '48%', trend: '+4%', safetyCritical: '91%', safetyTrend: '+3%', workers: 19 }
+];
+// ---------------------------------------------------------
+// TREND RENDERING
+// ---------------------------------------------------------
+const renderTrend = (value) => {
+  const positive = value.startsWith('+');
+  const bgColor = positive ? '#E4EBC9' : '#FEE2E2';
+  const textColor = positive ? '#4D7C0F' : '#B91C1C';
+  const icon = positive ? 'arrow_upward' : 'arrow_downward';
   return `
     <div class="custom-tag" style="
       background-color: ${bgColor};
@@ -50,226 +50,226 @@ const renderTrend = (value) => {
       </span>
       ${value}
     </div>
-  `;
-};
-// ---------------------------------------------------------
-// BASE TABLE DATA
-// ---------------------------------------------------------
-const templateData = [
-  { name: 'John', age: 25, email: 'bob@gmail.com' },
-  { name: 'Jane', age: 30, email: 'harry@gmail.com' },
-  { name: 'Rohn', age: 40, email: 'rohn@gmail.com' },
-  { name: 'Willson', age: 40, email: 'willson@gmail.com' },
-  { name: 'Maddy', age: 40, email: 'maddy@gmail.com' }
-];
-const lotsOfData = Array.from({ length: 100 }).map(() => ({
-  name: randFullName(),
-  age: randNumber({ min: 18, max: 80 }),
-  email: randEmail(),
-  faveColor: randColor()
-}));
-const templateHeaders = [
-  { key: 'name', label: 'Name' },
-  { key: 'age', label: 'Age' },
-  { key: 'email', label: 'Email Address', width: '50%' }
-];
-export default {
-  title: 'Molecules/Table',
-  component: 'tttx-table_1_9_101',
-  decorators: [withActions],
-  parameters: {
-    actions: { handles: ['rowClicked', 'headerClicked', 'headerOrderChanged'] }
-  },
-  argTypes: {
-    loading: { control: 'boolean' },
-    selectable: { control: 'boolean' },
-    rowsPerPage: { control: 'number' }
-  }
-};
-const baseTrainingHeaders = [
-  {
-    key: 'group',
+  `;
+};
+// ---------------------------------------------------------
+// BASE TABLE DATA
+// ---------------------------------------------------------
+const templateData = [
+  { name: 'John', age: 25, email: 'bob@gmail.com' },
+  { name: 'Jane', age: 30, email: 'harry@gmail.com' },
+  { name: 'Rohn', age: 40, email: 'rohn@gmail.com' },
+  { name: 'Willson', age: 40, email: 'willson@gmail.com' },
+  { name: 'Maddy', age: 40, email: 'maddy@gmail.com' }
+];
+const lotsOfData = Array.from({ length: 100 }).map(() => ({
+  name: randFullName(),
+  age: randNumber({ min: 18, max: 80 }),
+  email: randEmail(),
+  faveColor: randColor()
+}));
+const templateHeaders = [
+  { key: 'name', label: 'Name' },
+  { key: 'age', label: 'Age' },
+  { key: 'email', label: 'Email Address', width: '50%' }
+];
+export default {
+  title: 'Molecules/Table',
+  component: 'tttx-table_1_9_103',
+  decorators: [withActions],
+  parameters: {
+    actions: { handles: ['rowClicked', 'headerClicked', 'headerOrderChanged'] }
+  },
+  argTypes: {
+    loading: { control: 'boolean' },
+    selectable: { control: 'boolean' },
+    rowsPerPage: { control: 'number' }
+  }
+};
+const baseTrainingHeaders = [
+  {
+    key: 'group',
     label: `
       <span style="font-weight: 600; font-size: 14px; color: #000;">Group</span>
-    `,
-    width: '240px'
-  },
-  {
-    key: 'training',
+    `,
+    width: '240px'
+  },
+  {
+    key: 'training',
     label: `
       <div style="display: flex; align-items: center;">Training
-        <tttx-tooltip_1_9_101 placement="top" text="Overall Training compliance for the specified group">
+        <tttx-tooltip_1_9_103 placement="top" text="Overall Training compliance for the specified group">
           <span class="material-symbols-rounded" style="
             font-family: 'Material Symbols Rounded';
             font-weight: normal;
             font-size: 20px;
             margin: 0 4px 0 8px;
           ">help</span>
-        </tttx-tooltip_1_9_101>
+        </tttx-tooltip_1_9_103>
       </div>
-    `,
-    width: '100px'
-  },
-  {
-    key: 'trend',
+    `,
+    width: '100px'
+  },
+  {
+    key: 'trend',
     label: `
       <div style="display: flex; align-items: center;">Trend
-        <tttx-tooltip_1_9_101 placement="top" text="Since last 30 days">
+        <tttx-tooltip_1_9_103 placement="top" text="Since last 30 days">
           <span class="material-symbols-rounded" style="
             font-family: 'Material Symbols Rounded';
             font-weight: normal;
             font-size: 20px;
             margin: 0 4px 0 8px;
           ">help</span>
-        </tttx-tooltip_1_9_101>
+        </tttx-tooltip_1_9_103>
       </div>
-    `,
-    width: '100px'
-  },
-  {
-    key: 'safetyCritical',
+    `,
+    width: '100px'
+  },
+  {
+    key: 'safetyCritical',
     label: `
       <div style="display: flex; align-items: center;">Safety-Critical
-        <tttx-tooltip_1_9_101 placement="top" text="Overall compliance for activities flagged as ‘Safety-Critical’">
+        <tttx-tooltip_1_9_103 placement="top" text="Overall compliance for activities flagged as ‘Safety-Critical’">
           <span class="material-symbols-rounded" style="
             font-family: 'Material Symbols Rounded';
             font-weight: normal;
             font-size: 20px;
             margin: 0 4px 0 8px;
           ">help</span>
-        </tttx-tooltip_1_9_101>
+        </tttx-tooltip_1_9_103>
       </div>
-    `,
-    width: '120px'
-  },
-  {
-    key: 'safetyTrend',
+    `,
+    width: '120px'
+  },
+  {
+    key: 'safetyTrend',
     label: `
       <div style="display: flex; align-items: center;">Trend
-        <tttx-tooltip_1_9_101 placement="top" text="Since last 30 days">
+        <tttx-tooltip_1_9_103 placement="top" text="Since last 30 days">
           <span class="material-symbols-rounded" style="
             font-family: 'Material Symbols Rounded';
             font-weight: normal;
             font-size: 20px;
             margin: 0 4px 0 8px;
           ">help</span>
-        </tttx-tooltip_1_9_101>
+        </tttx-tooltip_1_9_103>
       </div>
-    `,
-    width: '100px'
-  },
-  {
-    key: 'workers',
+    `,
+    width: '100px'
+  },
+  {
+    key: 'workers',
     label: `
       <div style="display: flex; align-items: center;">Workers
-        <tttx-tooltip_1_9_101 placement="top" text="Number of workers assigned to group">
+        <tttx-tooltip_1_9_103 placement="top" text="Number of workers assigned to group">
           <span class="material-symbols-rounded" style="
             font-family: 'Material Symbols Rounded';
             font-weight: normal;
             font-size: 20px;
             margin: 0 4px 0 8px;
           ">help</span>
-        </tttx-tooltip_1_9_101>
+        </tttx-tooltip_1_9_103>
       </div>
-    `,
-    width: '100px'
-  }
-];
-const baseCompetenceHeaders = [
-  {
-    key: 'group',
+    `,
+    width: '100px'
+  }
+];
+const baseCompetenceHeaders = [
+  {
+    key: 'group',
     label: `
       <span style="font-weight: 600; font-size: 14px; color: #000;">Group</span>
-    `,
-    width: '240px'
-  },
-  {
-    key: 'competence',
+    `,
+    width: '240px'
+  },
+  {
+    key: 'competence',
     label: `
       <div style="display: flex; align-items: center;">Competence
-        <tttx-tooltip_1_9_101 placement="top" text="Overall Competence compliance for the specified group">
+        <tttx-tooltip_1_9_103 placement="top" text="Overall Competence compliance for the specified group">
           <span class="material-symbols-rounded" style="
             font-family: 'Material Symbols Rounded';
             font-weight: normal;
             font-size: 20px;
             margin: 0 4px 0 8px;
           ">help</span>
-        </tttx-tooltip_1_9_101>
+        </tttx-tooltip_1_9_103>
       </div>
-    `,
-    width: '100px'
-  },
-  {
-    key: 'trend',
+    `,
+    width: '100px'
+  },
+  {
+    key: 'trend',
     label: `
       <div style="display: flex; align-items: center;">Trend
-        <tttx-tooltip_1_9_101 placement="top" text="Since last 30 days">
+        <tttx-tooltip_1_9_103 placement="top" text="Since last 30 days">
           <span class="material-symbols-rounded" style="
             font-family: 'Material Symbols Rounded';
             font-weight: normal;
             font-size: 20px;
             margin: 0 4px 0 8px;
           ">help</span>
-        </tttx-tooltip_1_9_101>
+        </tttx-tooltip_1_9_103>
       </div>
-    `,
-    width: '100px'
-  },
-  {
-    key: 'safetyCritical',
+    `,
+    width: '100px'
+  },
+  {
+    key: 'safetyCritical',
     label: `
       <div style="display: flex; align-items: center;">Safety-Critical
-        <tttx-tooltip_1_9_101 placement="top" text="Overall compliance for activities flagged as ‘Safety-Critical’">
+        <tttx-tooltip_1_9_103 placement="top" text="Overall compliance for activities flagged as ‘Safety-Critical’">
           <span class="material-symbols-rounded" style="
             font-family: 'Material Symbols Rounded';
             font-weight: normal;
             font-size: 20px;
             margin: 0 4px 0 8px;
           ">help</span>
-        </tttx-tooltip_1_9_101>
+        </tttx-tooltip_1_9_103>
       </div>
-    `,
-    width: '120px'
-  },
-  {
-    key: 'safetyTrend',
+    `,
+    width: '120px'
+  },
+  {
+    key: 'safetyTrend',
     label: `
       <div style="display: flex; align-items: center;">Trend
-        <tttx-tooltip_1_9_101 placement="top" text="Since last 30 days">
+        <tttx-tooltip_1_9_103 placement="top" text="Since last 30 days">
           <span class="material-symbols-rounded" style="
             font-family: 'Material Symbols Rounded';
             font-weight: normal;
             font-size: 20px;
             margin: 0 4px 0 8px;
           ">help</span>
-        </tttx-tooltip_1_9_101>
+        </tttx-tooltip_1_9_103>
       </div>
-    `,
-    width: '100px'
-  },
-  {
-    key: 'workers',
+    `,
+    width: '100px'
+  },
+  {
+    key: 'workers',
     label: `
       <div style="display: flex; align-items: center;">Workers
-        <tttx-tooltip_1_9_101 placement="top" text="Number of workers assigned to group">
+        <tttx-tooltip_1_9_103 placement="top" text="Number of workers assigned to group">
           <span class="material-symbols-rounded" style="
             font-family: 'Material Symbols Rounded';
             font-weight: normal;
             font-size: 20px;
             margin: 0 4px 0 8px;
           ">help</span>
-        </tttx-tooltip_1_9_101>
+        </tttx-tooltip_1_9_103>
       </div>
-    `,
-    width: '100px'
-  }
-];
-// ---------------------------------------------------------
-// BASE TEMPLATE
-// ---------------------------------------------------------
+    `,
+    width: '100px'
+  }
+];
+// ---------------------------------------------------------
+// BASE TEMPLATE
+// ---------------------------------------------------------
 const TemplateTable = ({ containerWidth = '1024px', headers, data, loading = false, selectable = false, draggableHeaders = false, rowsPerPage = 5 }) => `
   <div style="height: 400px; width: ${containerWidth}; overflow-y: auto;">
-    <tttx-table_1_9_101 id="table"></tttx-table_1_9_101>
+    <tttx-table_1_9_103 id="table"></tttx-table_1_9_103>
   </div>
 
   <script>
@@ -301,18 +301,18 @@ const TemplateTable = ({ containerWidth = '1024px', headers, data, loading = fal
       });
     })();
   </script>
-`;
-export const BasicTable = TemplateTable.bind({});
-BasicTable.args = { headers: templateHeaders, data: templateData };
-export const TableSelectable = TemplateTable.bind({});
-TableSelectable.args = { headers: templateHeaders, data: templateData, selectable: true };
-export const TableLargeDataset = TemplateTable.bind({});
-TableLargeDataset.args = { headers: templateHeaders, data: lotsOfData, rowsPerPage: 5 };
-// ---------------------------------------------------------
-// GROUP PERFORMANCE VIEW (Training / Competence Switch)
-// ---------------------------------------------------------
-// Default args for Storybook controls
-const renderGroupText = (text) => {
+`;
+export const BasicTable = TemplateTable.bind({});
+BasicTable.args = { headers: templateHeaders, data: templateData };
+export const TableSelectable = TemplateTable.bind({});
+TableSelectable.args = { headers: templateHeaders, data: templateData, selectable: true };
+export const TableLargeDataset = TemplateTable.bind({});
+TableLargeDataset.args = { headers: templateHeaders, data: lotsOfData, rowsPerPage: 5 };
+// ---------------------------------------------------------
+// GROUP PERFORMANCE VIEW (Training / Competence Switch)
+// ---------------------------------------------------------
+// Default args for Storybook controls
+const renderGroupText = (text) => {
   return `
     <div class="group-text-clamped" style="
         line-height: 1.25em; /* Define line height for consistent two-line display */
@@ -330,19 +330,19 @@ const renderGroupText = (text) => {
         font-family: 'Roboto', sans-serif;
         font-size: 14px; 
     ">${text}</div>
-  `;
-};
-export const GroupPerformanceTable = ({ containerWidth = '1200px', trainingHeaders = baseTrainingHeaders, competenceHeaders = baseCompetenceHeaders, data = groupPerformanceData, selectable = true, rowsPerPage = 5, draggableHeaders = false, loading = false }) => {
-  const processedData = data.map(r => (Object.assign(Object.assign({}, r), {
-    // *** FIX: Wrap the Group text in the clamping container ***
-    group: renderGroupText(r.group), trend: renderTrend(r.trend), safetyTrend: renderTrend(r.safetyTrend)
-  })));
-  const id = `gp-${Math.random().toString(36).slice(2)}`;
+  `;
+};
+export const GroupPerformanceTable = ({ containerWidth = '1200px', trainingHeaders = baseTrainingHeaders, competenceHeaders = baseCompetenceHeaders, data = groupPerformanceData, selectable = true, rowsPerPage = 5, draggableHeaders = false, loading = false }) => {
+  const processedData = data.map(r => (Object.assign(Object.assign({}, r), {
+    // *** FIX: Wrap the Group text in the clamping container ***
+    group: renderGroupText(r.group), trend: renderTrend(r.trend), safetyTrend: renderTrend(r.safetyTrend)
+  })));
+  const id = `gp-${Math.random().toString(36).slice(2)}`;
   return `
     <style>
       /* Base styles to allow wrapping */
-      tttx-table_1_9_101 th,
-      tttx-table_1_9_101 td {
+      tttx-table_1_9_103 th,
+      tttx-table_1_9_103 td {
         white-space: normal !important;
         word-break: break-word !important;
         overflow-wrap: anywhere !important;
@@ -378,7 +378,7 @@ export const GroupPerformanceTable = ({ containerWidth = '1200px', trainingHeade
         <button class="switch-btn" data-type="competence">Competence</button>
       </div>
 
-      <tttx-table_1_9_101 id="${id}-table" allow-html></tttx-table_1_9_101>
+      <tttx-table_1_9_103 id="${id}-table" allow-html></tttx-table_1_9_103>
 
       <script>
         (function(){
@@ -416,16 +416,16 @@ export const GroupPerformanceTable = ({ containerWidth = '1200px', trainingHeade
         })();
       </script>
     </div>
-  `;
-};
-// Default args for Storybook controls
-GroupPerformanceTable.args = {
-  containerWidth: '1200px',
-  trainingHeaders: baseTrainingHeaders,
-  competenceHeaders: baseCompetenceHeaders,
-  data: groupPerformanceData,
-  selectable: true,
-  rowsPerPage: 5,
-  draggableHeaders: false,
-  loading: false
-};
+  `;
+};
+// Default args for Storybook controls
+GroupPerformanceTable.args = {
+  containerWidth: '1200px',
+  trainingHeaders: baseTrainingHeaders,
+  competenceHeaders: baseCompetenceHeaders,
+  data: groupPerformanceData,
+  selectable: true,
+  rowsPerPage: 5,
+  draggableHeaders: false,
+  loading: false
+};

package/dist/collection/components/molecules/tttx-table/tttx-table.types.js

@@ -1 +1 @@
-export {};
+export {};