@scania/tegel 0.0.4 → 0.0.6

package/dist/collection/components/chip/sdds-chip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip/sdds-chip.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    inputType: {\n      name: 'Type',\n      description: 'Sets the chip type.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Button', 'Radio', 'Checkbox'],\n      table: {\n        defaultValue: { summary: 'button' },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the chip size.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Small'],\n      table: {\n        defaultValue: { summary: 'Large' },\n      },\n    },\n    label: {\n      name: 'Label text',\n      description: 'Sets the label of the component.',\n      control: {\n        type: 'text',\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Adds an icon to the component.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    iconPosition: {\n      name: 'Icon Position',\n      description: 'Sets the icon position.',\n      if: { arg: 'icon', eq: true },\n      control: {\n        type: 'radio',\n      },\n      options: ['Prefix', 'Suffix'],\n      table: {\n        defaultValue: { summary: 'Prefix' },\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the checkbox.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        // TODO: Remove line below after we make design for disabled state, it hides control\n        disable: true,\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    inputType: 'Button',\n    size: 'Large',\n    label: 'Label',\n    icon: false,\n    iconPosition: 'Prefix',\n    disabled: false,\n  },\n};\n\nconst Template = ({ inputType, size, label, icon, iconPosition }) => {\n  const sizeLookUp = {\n    Large: 'lg',\n    Small: 'sm',\n  };\n\n  return formatHtmlPreview(`\n  ${\n    inputType === 'Button'\n      ? `<sdds-chip type=\"button\" size=\"${sizeLookUp[size]}\">\n            <span slot=\"label\">\n                ${\n                  icon && iconPosition === 'Prefix'\n                    ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n                    : ''\n                }\n                ${label}\n                ${\n                  icon && iconPosition === 'Suffix'\n                    ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n                    : ''\n                }\n            </span>\n        </sdds-chip>\n\n        <!-- Script tag for demo purposes -->\n        <script>\n          document.addEventListener('sddsClick', (event)=>{\n          console.log(event)\n          })\n        </script>`\n      : ''\n  }\n  ${\n    inputType === 'Checkbox'\n      ? ` <style>\n      /* demo-wrapper and demo-styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        gap: 8px;\n      }\n    </style>\n\n    <div class=\"demo-wrapper\">\n      <sdds-chip type=\"checkbox\" size=\"${sizeLookUp[size]}\" checked value=\"checkbox-1-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 1\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip type=\"checkbox\" size=\"${sizeLookUp[size]}\" value=\"checkbox-2-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 2\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip type=\"checkbox\" size=\"${sizeLookUp[size]}\" value=\"checkbox-3-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 3\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n    </div>\n\n    <!-- Script tag for demo purposes -->\n    <script>\n      document.addEventListener('sddsChange', (event)=>{\n          console.log(event)\n      })\n    </script>`\n      : ''\n  }\n  ${\n    inputType === 'Radio'\n      ? ` <style>\n      /* demo-wrapper and demo-styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        gap: 8px;\n      }\n    </style>\n\n    <div class=\"demo-wrapper\">\n      <sdds-chip name=\"test\" type=\"radio\" size=\"${sizeLookUp[size]}\" value=\"radio-1-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 1\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip name=\"test\" type=\"radio\" size=\"${sizeLookUp[size]}\" checked value=\"radio-2-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 2\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n      <sdds-chip name=\"test\" type=\"radio\" size=\"${sizeLookUp[size]}\" value=\"radio-3-value\">\n        <span slot=\"label\">\n          ${\n            icon && iconPosition === 'Prefix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n          ${label} 3\n          ${\n            icon && iconPosition === 'Suffix'\n              ? '<sdds-icon name=\"cross\" size=\"16px\"></sdds-icon>'\n              : ''\n          }\n        </span>\n      </sdds-chip>\n    </div>\n\n    <!-- Script tag for demo purposes -->\n    <script>\n      document.addEventListener('sddsChange', (event)=>{\n          console.log(event)\n      })\n    </script>`\n      : ''\n  }\n\n\n  `);\n};\n\nexport const Chip = Template.bind({});\n"]}

package/dist/collection/components/data-table/native-table.stories.js

@@ -2,132 +2,110 @@ import { formatHtmlPreview } from '../../utils/utils';
 export default {
   title: 'Components/Data Table/Native',
   argTypes: {
-    tableTitle: {
-      name: 'Table title',
-      description: 'Text that appears in table caption area.',
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
-        type: 'text',
+        type: 'radio',
       },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: {
-          summary: '',
-        },
+        defaultValue: { summary: 'Inherit from parent' },
       },
     },
-    isCompact: {
+    compactDesign: {
       name: 'Compact design',
       description: 'Enables compact design of the table, rows with less height.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
-    dividers: {
-      name: 'Vertical dividers',
-      description: 'When enabled, table has vertical dividers between columns.',
+    responsiveDesign: {
+      name: 'Responsive table',
+      description: 'Enables table to take 100% of available width. For column values less than 192px, "No minimum width" has to be enabled too.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'The mode variant of the component',
+    tableTitle: {
+      name: 'Table title',
+      description: 'Sets text that appears in table caption area.',
       control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
-      table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        type: 'text',
       },
     },
-    responsiveTable: {
-      name: 'Responsive table',
-      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between table columns.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
-    noMinWidthArg: {
+    noMinWidth: {
       name: 'No minimum width',
-      description: 'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns width will show here.',
+      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',
       control: {
         type: 'boolean',
       },
       table: {
-        defaultValue: {
-          summary: false,
-        },
+        defaultValue: { summary: false },
       },
     },
     column1Width: {
       name: 'Column 1 width',
-      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
+      description: 'Value of width for column 1. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
       },
-      if: { arg: 'noMinWidthArg', eq: true },
+      if: { arg: 'noMinWidth', eq: true },
     },
     column2Width: {
       name: 'Column 2 width',
-      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
+      description: 'Value of width for column 2. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
       },
-      if: { arg: 'noMinWidthArg', eq: true },
+      if: { arg: 'noMinWidth', eq: true },
     },
     column3Width: {
       name: 'Column 3 width',
-      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: '192px',
-        },
+      description: 'Value of width for column 3. In order to work correctly "No minimum width" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',
+      control: {
+        type: 'text',
       },
-      if: { arg: 'noMinWidthArg', eq: true },
+      if: { arg: 'noMinWidth', eq: true },
     },
   },
   args: {
     modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    responsiveDesign: false,
     tableTitle: 'Native table',
-    isCompact: false,
-    dividers: false,
-    noMinWidthArg: false,
-    responsiveTable: false,
+    verticalDivider: false,
+    noMinWidth: false,
     column1Width: '',
     column2Width: '',
     column3Width: '',
   },
 };
-const Template = ({ modeVariant, tableTitle, isCompact, dividers, noMinWidthArg, responsiveTable, column1Width, column2Width, column3Width, }) => formatHtmlPreview(`
+const Template = ({ modeVariant, compactDesign, responsiveDesign, tableTitle, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, }) => formatHtmlPreview(`
     <table class="
         sdds-table
         ${modeVariant === 'Primary' ? 'sdds-mode-variant-primary' : ''}
         ${modeVariant === 'Secondary' ? 'sdds-mode-variant-secondary' : ''}
-        ${isCompact ? 'sdds-table--compact' : ''}
-        ${dividers ? 'sdds-table--divider' : ''}
-        ${noMinWidthArg ? 'sdds-table--no-min-width' : ''}
-        ${responsiveTable ? 'sdds-table--responsive' : ''}
+        ${compactDesign ? 'sdds-table--compact' : ''}
+        ${verticalDivider ? 'sdds-table--divider' : ''}
+        ${noMinWidth ? 'sdds-table--no-min-width' : ''}
+        ${responsiveDesign ? 'sdds-table--responsive' : ''}
     ">
     ${tableTitle && `<caption>${tableTitle}</caption>`}
     <thead>
@@ -157,5 +135,4 @@ const Template = ({ modeVariant, tableTitle, isCompact, dividers, noMinWidthArg,
   </table>
     `);
 export const Default = Template.bind({});
-Default.args = {};
 //# sourceMappingURL=native-table.stories.js.map

package/dist/collection/components/data-table/native-table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"native-table.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/native-table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Data Table/Native',\n  argTypes: {\n    tableTitle: {\n      name: 'Table title',\n      description: 'Text that appears in table caption area.',\n      control: {\n        type: 'text',\n      },\n      table: {\n        defaultValue: {\n          summary: '',\n        },\n      },\n    },\n    isCompact: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    dividers: {\n      name: 'Vertical dividers',\n      description: 'When enabled, table has vertical dividers between columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'The mode variant of the component',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    responsiveTable: {\n      name: 'Responsive table',\n      description:\n        'Table takes 100% of available width. For column values less then 192px, \"No minimum width\" has to be enabled too. ',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    noMinWidthArg: {\n      name: 'No minimum width',\n      description:\n        'Resets min-width rule and enabled setting column width value less then 192px which is default one. When enabled, controls for columns width will show here.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: false,\n        },\n      },\n    },\n    column1Width: {\n      name: 'Column 1 width',\n      description:\n        'Value of width for column 1. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidthArg', eq: true },\n    },\n    column2Width: {\n      name: 'Column 2 width',\n      description:\n        'Value of width for column 2. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidthArg', eq: true },\n    },\n    column3Width: {\n      name: 'Column 3 width',\n      description:\n        'Value of width for column 3. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit too next tot the value, eg. 200px.',\n      type: 'string',\n      table: {\n        defaultValue: {\n          summary: '192px',\n        },\n      },\n      if: { arg: 'noMinWidthArg', eq: true },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    tableTitle: 'Native table',\n    isCompact: false,\n    dividers: false,\n    noMinWidthArg: false,\n    responsiveTable: false,\n    column1Width: '',\n    column2Width: '',\n    column3Width: '',\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  tableTitle,\n  isCompact,\n  dividers,\n  noMinWidthArg,\n  responsiveTable,\n  column1Width,\n  column2Width,\n  column3Width,\n}) =>\n  formatHtmlPreview(`\n    <table class=\"\n        sdds-table\n        ${modeVariant === 'Primary' ? 'sdds-mode-variant-primary' : ''}\n        ${modeVariant === 'Secondary' ? 'sdds-mode-variant-secondary' : ''}\n        ${isCompact ? 'sdds-table--compact' : ''}\n        ${dividers ? 'sdds-table--divider' : ''}\n        ${noMinWidthArg ? 'sdds-table--no-min-width' : ''}\n        ${responsiveTable ? 'sdds-table--responsive' : ''}\n    \">\n    ${tableTitle && `<caption>${tableTitle}</caption>`}\n    <thead>\n      <tr>\n        <th ${column1Width ? `style=\"width: ${column1Width};\"` : ''}>Header</th>\n        <th ${column2Width ? `style=\"width: ${column2Width};\"` : ''}>Header</th>\n        <th ${column3Width ? `style=\"width: ${column3Width};\"` : ''}>Header</th>\n      </tr>\n    </thead>\n     <tbody>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n    </tbody>\n  </table>\n    `);\n\nexport const Default = Template.bind({});\nDefault.args = {};\n"]}
+{"version":3,"file":"native-table.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/native-table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Data Table/Native',\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    compactDesign: {\n      name: 'Compact design',\n      description: 'Enables compact design of the table, rows with less height.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    responsiveDesign: {\n      name: 'Responsive table',\n      description: 'Enables table to take 100% of available width. For column values less than 192px, \"No minimum width\" has to be enabled too.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    tableTitle: {\n      name: 'Table title',\n      description: 'Sets text that appears in table caption area.',\n      control: {\n        type: 'text',\n      },\n    },\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'Enables vertical dividers between table columns.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    noMinWidth: {\n      name: 'No minimum width',\n      description: 'Resets min-width rule and enables setting column width value to less than 192px which is the default. When enabled, controls for column width will show here.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    column1Width: {\n      name: 'Column 1 width',\n      description:'Value of width for column 1. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column2Width: {\n      name: 'Column 2 width',\n      description: 'Value of width for column 2. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column3Width: {\n      name: 'Column 3 width',\n      description: 'Value of width for column 3. In order to work correctly \"No minimum width\" has to be enabled too. When editing please provide a unit next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    responsiveDesign: false,\n    tableTitle: 'Native table',\n    verticalDivider: false,\n    noMinWidth: false,\n    column1Width: '',\n    column2Width: '',\n    column3Width: '',\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  compactDesign,\n  responsiveDesign,\n  tableTitle,\n  verticalDivider,\n  noMinWidth,\n  column1Width,\n  column2Width,\n  column3Width,\n}) =>\n  formatHtmlPreview(`\n    <table class=\"\n        sdds-table\n        ${modeVariant === 'Primary' ? 'sdds-mode-variant-primary' : ''}\n        ${modeVariant === 'Secondary' ? 'sdds-mode-variant-secondary' : ''}\n        ${compactDesign ? 'sdds-table--compact' : ''}\n        ${verticalDivider ? 'sdds-table--divider' : ''}\n        ${noMinWidth ? 'sdds-table--no-min-width' : ''}\n        ${responsiveDesign ? 'sdds-table--responsive' : ''}\n    \">\n    ${tableTitle && `<caption>${tableTitle}</caption>`}\n    <thead>\n      <tr>\n        <th ${column1Width ? `style=\"width: ${column1Width};\"` : ''}>Header</th>\n        <th ${column2Width ? `style=\"width: ${column2Width};\"` : ''}>Header</th>\n        <th ${column3Width ? `style=\"width: ${column3Width};\"` : ''}>Header</th>\n      </tr>\n    </thead>\n     <tbody>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n      <tr>\n        <td>Text</td>\n        <td>Text</td>\n        <td>Text</td>\n      </tr>\n    </tbody>\n  </table>\n    `);\n\nexport const Default = Template.bind({});"]}

package/dist/collection/components/data-table/table/table.js

@@ -12,30 +12,30 @@ export class Table {
     this.modeVariant = null;
     this.tableId = crypto.randomUUID();
   }
-  emitTablePropsChangedEvent(changedValueName, changedValue) {
-    this.tablePropsChangedEvent.emit({
+  emitInternalSddsPropChange(changedValueName, changedValue) {
+    this.internalSddsTablePropChange.emit({
       tableId: this.tableId,
       changed: [changedValueName],
       [changedValueName]: changedValue,
     });
   }
   enableMultiselectChanged(newValue) {
-    this.emitTablePropsChangedEvent('enableMultiselect', newValue);
+    this.emitInternalSddsPropChange('enableMultiselect', newValue);
   }
   enableExpandableRowsChanged(newValue) {
-    this.emitTablePropsChangedEvent('enableExpandableRows', newValue);
+    this.emitInternalSddsPropChange('enableExpandableRows', newValue);
   }
   compactDesignChanged(newValue) {
-    this.emitTablePropsChangedEvent('compactDesign', newValue);
+    this.emitInternalSddsPropChange('compactDesign', newValue);
   }
   verticalDividersChanged(newValue) {
-    this.emitTablePropsChangedEvent('verticalDividers', newValue);
+    this.emitInternalSddsPropChange('verticalDividers', newValue);
   }
   noMinWidthChanged(newValue) {
-    this.emitTablePropsChangedEvent('noMinWidth', newValue);
+    this.emitInternalSddsPropChange('noMinWidth', newValue);
   }
   modeVariantChanged(newValue) {
-    this.emitTablePropsChangedEvent('modeVariant', newValue);
+    this.emitInternalSddsPropChange('modeVariant', newValue);
   }
   render() {
     return (h(Host, { class: { 'sdds-table--responsive': this.enableResponsive } }, h("table", { class: {
@@ -207,22 +207,25 @@ export class Table {
   }
   static get events() {
     return [{
-        "method": "tablePropsChangedEvent",
-        "name": "tablePropsChangedEvent",
+        "method": "internalSddsTablePropChange",
+        "name": "internalSddsTablePropChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Broadcasts changes to the tables props"
+          "tags": [{
+              "name": "internal",
+              "text": "Broadcasts changes to the tables props"
+            }],
+          "text": ""
         },
         "complexType": {
-          "original": "TablePropsChangedEvent",
+          "original": "InternalSddsTablePropChange",
           "resolved": "{ tableId: string; changed: (keyof Props)[]; } & Partial<Props>",
           "references": {
-            "TablePropsChangedEvent": {
+            "InternalSddsTablePropChange": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/sdds/tegel/src/components/data-table/table/table.tsx"
+              "path": "/Users/johnny/dev/scania/sdds/tegel/src/components/data-table/table/table.tsx"
             }
           }
         }

package/dist/collection/components/data-table/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/data-table/table/table.tsx"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,sFAAsF;AAEtF,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAsB9F,MAAM,OAAO,KAAK;;4BAEqC,KAAK;yBAGR,KAAK;;6BAOD,KAAK;gCAGF,KAAK;4BAGT,KAAK;uBAGM,IAAI;mBAM1C,MAAM,CAAC,UAAU,EAAE;;EAa7C,0BAA0B,CAAC,gBAA6B,EAAE,YAAgC;IACxF,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;MAC/B,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,CAAC,gBAAgB,CAAC;MAC3B,CAAC,gBAAgB,CAAC,EAAE,YAAY;KACjC,CAAC,CAAC;EACL,CAAC;EAGD,wBAAwB,CAAC,QAAiB;IACxC,IAAI,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;EACjE,CAAC;EAGD,2BAA2B,CAAC,QAAiB;IAC3C,IAAI,CAAC,0BAA0B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;EACpE,CAAC;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,0BAA0B,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;EAC7D,CAAC;EAGD,uBAAuB,CAAC,QAAiB;IACvC,IAAI,CAAC,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;EAChE,CAAC;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;EAC1D,CAAC;EAGD,kBAAkB,CAAC,QAAwC;IACzD,IAAI,CAAC,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;EAC3D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE;MAC9D,aACE,KAAK,EAAE;UACL,YAAY,EAAE,IAAI;UAClB,qBAAqB,EAAE,IAAI,CAAC,aAAa;UACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;UAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;UAC3C,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;SAChD;QAED,eAAQ,CACF,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n  verticalDividers: boolean;\n  compactDesign: boolean;\n  noMinWidth: boolean;\n  enableMultiselect: boolean;\n  enableExpandableRows: boolean;\n  enableResponsive: boolean;\n  modeVariant: 'primary' | 'secondary' | null;\n};\n\nexport type TablePropsChangedEvent = {\n  tableId: string;\n  changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n  tag: 'sdds-table',\n  styleUrl: 'table.scss',\n  shadow: true,\n})\nexport class Table {\n  /** Enables style with vertical dividers between columns */\n  @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n  /** Enables style where data-table toolbar, rows and footer are less high */\n  @Prop({ reflect: true }) compactDesign: boolean = false;\n\n  /** Enables to customise width on data-table columns */\n  @Prop({ reflect: true }) noMinWidth: boolean;\n  // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n  /** Enables multiselect feature of data-table */\n  @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n  /** Enables extended row feature of data-table */\n  @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n  /** Enables table to take 100% available width with equal spacing of columns */\n  @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n  /** Variant of the component, based on current mode. */\n  @Prop({ reflect: true }) modeVariant: 'primary' | 'secondary' = null;\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n   */\n  @Prop() tableId: string = crypto.randomUUID();\n\n  @Element() host: HTMLElement;\n\n  /** Broadcasts changes to the tables props */\n  @Event({\n    eventName: 'tablePropsChangedEvent',\n    bubbles: true,\n    composed: true,\n    cancelable: true,\n  })\n  tablePropsChangedEvent: EventEmitter<TablePropsChangedEvent>;\n\n  emitTablePropsChangedEvent(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n    this.tablePropsChangedEvent.emit({\n      tableId: this.tableId,\n      changed: [changedValueName],\n      [changedValueName]: changedValue,\n    });\n  }\n\n  @Watch('enableMultiselect')\n  enableMultiselectChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('enableMultiselect', newValue);\n  }\n\n  @Watch('enableExpandableRows')\n  enableExpandableRowsChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('enableExpandableRows', newValue);\n  }\n\n  @Watch('compactDesign')\n  compactDesignChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('compactDesign', newValue);\n  }\n\n  @Watch('verticalDividers')\n  verticalDividersChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('verticalDividers', newValue);\n  }\n\n  @Watch('noMinWidth')\n  noMinWidthChanged(newValue: boolean) {\n    this.emitTablePropsChangedEvent('noMinWidth', newValue);\n  }\n\n  @Watch('modeVariant')\n  modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n    this.emitTablePropsChangedEvent('modeVariant', newValue);\n  }\n\n  render() {\n    return (\n      <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n        <table\n          class={{\n            'sdds-table': true,\n            'sdds-table--compact': this.compactDesign,\n            'sdds-table--divider': this.verticalDividers,\n            'sdds-table--no-min-width': this.noMinWidth,\n            'sdds-table--responsive': this.enableResponsive,\n          }}\n        >\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/data-table/table/table.tsx"],"names":[],"mappings":"AAAA,iGAAiG;AACjG,sFAAsF;AAEtF,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9F,MAAM,OAAO,KAAK;;4BAEqC,KAAK;yBAGR,KAAK;;6BAOD,KAAK;gCAGF,KAAK;4BAGT,KAAK;uBAGM,IAAI;mBAM1C,MAAM,CAAC,UAAU,EAAE;;EAa7C,0BAA0B,CAAC,gBAA6B,EAAE,YAAgC;IACxF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;MACpC,OAAO,EAAE,IAAI,CAAC,OAAO;MACrB,OAAO,EAAE,CAAC,gBAAgB,CAAC;MAC3B,CAAC,gBAAgB,CAAC,EAAE,YAAY;KACjC,CAAC,CAAC;EACL,CAAC;EAGD,wBAAwB,CAAC,QAAiB;IACxC,IAAI,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;EACjE,CAAC;EAGD,2BAA2B,CAAC,QAAiB;IAC3C,IAAI,CAAC,0BAA0B,CAAC,sBAAsB,EAAE,QAAQ,CAAC,CAAC;EACpE,CAAC;EAGD,oBAAoB,CAAC,QAAiB;IACpC,IAAI,CAAC,0BAA0B,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC;EAC7D,CAAC;EAGD,uBAAuB,CAAC,QAAiB;IACvC,IAAI,CAAC,0BAA0B,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;EAChE,CAAC;EAGD,iBAAiB,CAAC,QAAiB;IACjC,IAAI,CAAC,0BAA0B,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;EAC1D,CAAC;EAGD,kBAAkB,CAAC,QAAwC;IACzD,IAAI,CAAC,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;EAC3D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,CAAC,gBAAgB,EAAE;MAC9D,aACE,KAAK,EAAE;UACL,YAAY,EAAE,IAAI;UAClB,qBAAqB,EAAE,IAAI,CAAC,aAAa;UACzC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB;UAC5C,0BAA0B,EAAE,IAAI,CAAC,UAAU;UAC3C,wBAAwB,EAAE,IAAI,CAAC,gBAAgB;SAChD;QAED,eAAQ,CACF,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js\n// https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641\n\nimport { Component, Prop, h, Host, Event, EventEmitter, Element, Watch } from '@stencil/core';\n\ntype Props = {\n  verticalDividers: boolean;\n  compactDesign: boolean;\n  noMinWidth: boolean;\n  enableMultiselect: boolean;\n  enableExpandableRows: boolean;\n  enableResponsive: boolean;\n  modeVariant: 'primary' | 'secondary' | null;\n  textAlign: string;\n};\n\nexport type InternalSddsTablePropChange = {\n  tableId: string;\n  changed: Array<keyof Props>;\n} & Partial<Props>;\n\n@Component({\n  tag: 'sdds-table',\n  styleUrl: 'table.scss',\n  shadow: true,\n})\nexport class Table {\n  /** Enables style with vertical dividers between columns */\n  @Prop({ reflect: true }) verticalDividers: boolean = false;\n\n  /** Enables style where data-table toolbar, rows and footer are less high */\n  @Prop({ reflect: true }) compactDesign: boolean = false;\n\n  /** Enables to customise width on data-table columns */\n  @Prop({ reflect: true }) noMinWidth: boolean;\n  // TODO: Due to unknown reason, one of this items has to be left as is. If all are false, it seems like emitting is not properly done and it affects other events in data table. Try setting it and observe text-align set on header cell\n\n  /** Enables multiselect feature of data-table */\n  @Prop({ reflect: true }) enableMultiselect: boolean = false;\n\n  /** Enables extended row feature of data-table */\n  @Prop({ reflect: true }) enableExpandableRows: boolean = false;\n\n  /** Enables table to take 100% available width with equal spacing of columns */\n  @Prop({ reflect: true }) enableResponsive: boolean = false;\n\n  /** Variant of the component, based on current mode. */\n  @Prop({ reflect: true }) modeVariant: 'primary' | 'secondary' = null;\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for table events you need to set this ID yourself to identify the table, as the default ID is random and will be different every time.\n   */\n  @Prop() tableId: string = crypto.randomUUID();\n\n  @Element() host: HTMLElement;\n\n  /** @internal Broadcasts changes to the tables props */\n  @Event({\n    eventName: 'internalSddsTablePropChange',\n    bubbles: true,\n    composed: true,\n    cancelable: false,\n  })\n  internalSddsTablePropChange: EventEmitter<InternalSddsTablePropChange>;\n\n  emitInternalSddsPropChange(changedValueName: keyof Props, changedValue: Props[keyof Props]) {\n    this.internalSddsTablePropChange.emit({\n      tableId: this.tableId,\n      changed: [changedValueName],\n      [changedValueName]: changedValue,\n    });\n  }\n\n  @Watch('enableMultiselect')\n  enableMultiselectChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('enableMultiselect', newValue);\n  }\n\n  @Watch('enableExpandableRows')\n  enableExpandableRowsChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('enableExpandableRows', newValue);\n  }\n\n  @Watch('compactDesign')\n  compactDesignChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('compactDesign', newValue);\n  }\n\n  @Watch('verticalDividers')\n  verticalDividersChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('verticalDividers', newValue);\n  }\n\n  @Watch('noMinWidth')\n  noMinWidthChanged(newValue: boolean) {\n    this.emitInternalSddsPropChange('noMinWidth', newValue);\n  }\n\n  @Watch('modeVariant')\n  modeVariantChanged(newValue: 'primary' | 'secondary' | null) {\n    this.emitInternalSddsPropChange('modeVariant', newValue);\n  }\n\n  render() {\n    return (\n      <Host class={{ 'sdds-table--responsive': this.enableResponsive }}>\n        <table\n          class={{\n            'sdds-table': true,\n            'sdds-table--compact': this.compactDesign,\n            'sdds-table--divider': this.verticalDividers,\n            'sdds-table--no-min-width': this.noMinWidth,\n            'sdds-table--responsive': this.enableResponsive,\n          }}\n        >\n          <slot />\n        </table>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/data-table/table-body/table-body.js

@@ -1,5 +1,48 @@
 import { h, Host, } from '@stencil/core';
-import dummyData from './dummy-data.json';
+const jsonData = [
+  {
+    truck: 'L-series',
+    driver: 'Sonya Bruce',
+    country: 'Brazil',
+    mileage: 123987,
+  },
+  {
+    truck: 'P-series',
+    driver: 'Guerra Bowman',
+    country: 'Sweden',
+    mileage: 2000852,
+  },
+  {
+    truck: 'G-series',
+    driver: 'Ferrell Wallace',
+    country: 'Germany',
+    mileage: 564,
+  },
+  {
+    truck: 'R-series',
+    driver: 'Cox Burris',
+    country: 'Spain',
+    mileage: 1789357,
+  },
+  {
+    truck: 'S-series',
+    driver: 'Montgomery Cervantes',
+    country: 'Croatia',
+    mileage: 65,
+  },
+  {
+    truck: 'L-series',
+    driver: 'Sheryl Nielsen',
+    country: 'Greece',
+    mileage: 365784,
+  },
+  {
+    truck: 'G-series',
+    driver: 'Benton Gomez',
+    country: 'France',
+    mileage: 80957,
+  },
+];
 const relevantTableProps = [
   'enableMultiselect',
   'enableExpandableRows',
@@ -8,8 +51,8 @@ export class TableBody {
   constructor() {
     this.uncheckAll = () => {
       this.mainCheckboxStatus = false;
-      this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);
-      this.updateBodyCheckboxesEvent.emit([this.tableId, this.mainCheckboxStatus]);
+      this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);
+      this.internalSddsCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);
     };
     this.selectedDataExporter = () => {
       const selectedRows = this.host.getElementsByClassName('sdds-table__row--selected');
@@ -30,14 +73,14 @@ export class TableBody {
       const numberOfRows = this.host.getElementsByClassName('sdds-table__row').length;
       const numberOfRowsSelected = this.host.getElementsByClassName('sdds-table__row--selected').length;
       this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
-      this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);
+      this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);
       this.selectedDataExporter();
     };
     this.disableFilteringFunction = false;
     this.disableSortingFunction = false;
     this.bodyData = undefined;
     this.enableDummyData = false;
-    this.dummyData = JSON.stringify(dummyData);
+    this.jsonData = JSON.stringify(jsonData);
     this.rowsPerPage = 1;
     this.enableMultiselect = false;
     this.enablePaginationTableBody = false;
@@ -66,7 +109,7 @@ export class TableBody {
     this.bodyDataManipulated = [...this.innerBodyData];
     this.bodyDataOriginal = [...this.innerBodyData];
   }
-  tablePropsChangedEventListener(event) {
+  internalSddsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
       event.detail.changed
         .filter((changedProp) => relevantTableProps.includes(changedProp))
@@ -108,7 +151,7 @@ export class TableBody {
       this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));
     }
   }
-  // Listen to sortColumnData from data-table-header-element
+  // Listen to sortColumnData from data-table-header-element - TODO
   updateOptionsContent(event) {
     const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;
     if (this.tableId === receivedID) {
@@ -169,7 +212,7 @@ export class TableBody {
           }
         });
         this.disableAllSorting = true;
-        this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);
+        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);
         const dataRowsHidden = this.host.querySelectorAll('.sdds-table__row--hidden');
         // If same, info message will be shown
         this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;
@@ -188,12 +231,12 @@ export class TableBody {
           });
         }
         this.disableAllSorting = false;
-        this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);
+        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);
       }
     }
   }
-  // Listen to tableFilteringTerm from tableToolbar component
-  tableFilteringTermListener(event) {
+  // Listen to sddsFilter from tableToolbar component
+  sddsFilterListener(event) {
     if (this.tableId === event.detail[0]) {
       this.searchFunction(event.detail[1]);
     }
@@ -207,7 +250,7 @@ export class TableBody {
       this[tablePropName] = this.tableEl[tablePropName];
     });
     if (this.enableDummyData) {
-      this.bodyData = this.dummyData;
+      this.bodyData = this.jsonData;
     }
     else if (this.bodyData) {
       this.arrayDataWatcher(this.bodyData);
@@ -277,7 +320,7 @@ export class TableBody {
       },
       "bodyData": {
         "type": "any",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -314,7 +357,7 @@ export class TableBody {
   }
   static get states() {
     return {
-      "dummyData": {},
+      "jsonData": {},
       "rowsPerPage": {},
       "enableMultiselect": {},
       "enablePaginationTableBody": {},
@@ -336,14 +379,17 @@ export class TableBody {
   }
   static get events() {
     return [{
-        "method": "sortingSwitcherEvent",
-        "name": "sortingSwitcherEvent",
+        "method": "internalSddsSortingChange",
+        "name": "internalSddsSortingChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Event that sends unique table identifier and enable/disable status for sorting functionality"
+          "tags": [{
+              "name": "internal",
+              "text": "Event that sends unique table identifier and enable/disable status for sorting functionality"
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "any",
@@ -351,14 +397,17 @@ export class TableBody {
           "references": {}
         }
       }, {
-        "method": "updateBodyCheckboxesEvent",
-        "name": "updateBodyCheckboxesEvent",
+        "method": "internalSddsCheckboxChange",
+        "name": "internalSddsCheckboxChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled"
+          "tags": [{
+              "name": "internal",
+              "text": "Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled"
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "any",
@@ -366,14 +415,17 @@ export class TableBody {
           "references": {}
         }
       }, {
-        "method": "updateMainCheckboxEvent",
-        "name": "updateMainCheckboxEvent",
+        "method": "internalSddsMainCheckboxChange",
+        "name": "internalSddsMainCheckboxChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Sends unique table identifier and status if mainCheckbox should change its state based on selection status of single rows when multiselect feature is used"
+          "tags": [{
+              "name": "internal",
+              "text": "Sends unique table identifier and status if mainCheckbox should change its state based on selection status of single rows when multiselect feature is used"
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "any",
@@ -391,32 +443,32 @@ export class TableBody {
   }
   static get listeners() {
     return [{
-        "name": "tablePropsChangedEvent",
-        "method": "tablePropsChangedEventListener",
+        "name": "internalSddsTablePropChange",
+        "method": "internalSddsPropChangeListener",
         "target": "body",
         "capture": false,
         "passive": false
       }, {
-        "name": "sortColumnDataEvent",
+        "name": "sddsSortChange",
         "method": "updateOptionsContent",
         "target": "body",
         "capture": false,
         "passive": false
       }, {
-        "name": "mainCheckboxSelectedEvent",
+        "name": "internalSddsMainCheckboxChange",
         "method": "headCheckboxListener",
         "target": "body",
         "capture": false,
         "passive": false
       }, {
-        "name": "bodyRowToTable",
+        "name": "internalSddsRowChange",
         "method": "bodyCheckboxListener",
         "target": "body",
         "capture": false,
         "passive": false
       }, {
-        "name": "tableFilteringTerm",
-        "method": "tableFilteringTermListener",
+        "name": "sddsFilter",
+        "method": "sddsFilterListener",
         "target": "body",
         "capture": false,
         "passive": false