@scania/tegel 0.0.4 → 0.0.6

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

@@ -1 +1 @@
-{"version":3,"file":"table-component-pagination.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-pagination.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\n  argTypes: {\n    verticalDivider: {\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    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: {\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    responsiveDesign: {\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    noMinWidth: {\n      name: 'No column minimum width limitation',\n      description: 'Enable columns to shrink below width 192px.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: 'false',\n        },\n      },\n    },\n    rowsPerPageControl: {\n      name: 'Rows per page',\n      description: 'Specify how many rows per page user would like to see',\n      control: {\n        type: 'number',\n      },\n      table: {\n        defaultValue: {\n          summary: 4,\n        },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    verticalDivider: false,\n    responsiveDesign: false,\n    rowsPerPageControl: 4,\n    noMinWidth: false,\n  },\n};\n\nconst PaginationTemplate = ({\n  verticalDivider,\n  compactDesign,\n  modeVariant,\n  rowsPerPageControl,\n  responsiveDesign,\n  noMinWidth,\n}) =>\n  formatHtmlPreview(`\n    <sdds-table\n      vertical-dividers=\"${verticalDivider}\"\n      compact-design=\"${compactDesign}\"\n      enable-responsive=\"${responsiveDesign}\"\n      ${noMinWidth ? 'no-min-width' : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n      >\n          <sdds-table-header>\n              <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>\n              <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>\n              <sdds-header-cell column-key='country' column-title='Country'></sdds-header-cell>\n              <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right'></sdds-header-cell>\n          </sdds-table-header>\n          <sdds-table-body enable-dummy-data>\n          </sdds-table-body>\n          <sdds-table-footer enable-pagination rows-per-page=\"${rowsPerPageControl}\"></sdds-table-footer>\n  </sdds-table>`);\n\nexport const Pagination = PaginationTemplate.bind({});\nPagination.args = {};\n"]}
+{"version":3,"file":"table-component-pagination.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-pagination.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\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    rowsPerPageControl: {\n      name: 'Rows per page',\n      description: 'Specifies how many rows are shown per page.',\n      control: {\n        type: 'number',\n      },\n      table: {\n        defaultValue: { summary: 5 },\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    },\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    column4Width: {\n      name: 'Column 4 width',\n      description: 'Value of width for column 4. 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    rowsPerPageControl: 4,\n    verticalDivider: false,\n    noMinWidth: false,\n    column1Width: '',\n    column2Width: '',\n    column3Width: '',\n    column4Width: '',\n  },\n};\n\nconst PaginationTemplate = ({\n  modeVariant,\n  compactDesign,\n  responsiveDesign,\n  rowsPerPageControl,\n  verticalDivider,\n  noMinWidth,\n  column1Width,\n  column2Width,\n  column3Width,\n  column4Width,\n}) =>\n  formatHtmlPreview(`\n    <sdds-table\n      vertical-dividers=\"${verticalDivider}\"\n      compact-design=\"${compactDesign}\"\n      enable-responsive=\"${responsiveDesign}\"\n      ${noMinWidth ? 'no-min-width' : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n      >\n          <sdds-table-header>\n              <sdds-header-cell column-key='truck' column-title='Truck type' ${\n                column1Width ? `custom-width=\"${column1Width}\"` : ''\n              }></sdds-header-cell>\n              <sdds-header-cell column-key='driver' column-title='Driver name' ${\n                column2Width ? `custom-width=\"${column2Width}\"` : ''\n              }></sdds-header-cell>\n              <sdds-header-cell column-key='country' column-title='Country' ${\n                column3Width ? `custom-width=\"${column3Width}\"` : ''\n              }></sdds-header-cell>\n              <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right' ${\n                column4Width ? `custom-width=\"${column4Width}\"` : ''\n              }></sdds-header-cell>\n          </sdds-table-header>\n          <sdds-table-body enable-dummy-data>\n          </sdds-table-body>\n          <sdds-table-footer enable-pagination rows-per-page=\"${rowsPerPageControl}\"></sdds-table-footer>\n  </sdds-table>`);\n\nexport const Pagination = PaginationTemplate.bind({});"]}

package/dist/collection/components/data-table/table-component-sorting.stories.js

@@ -24,11 +24,15 @@ export default {
     },
   },
   argTypes: {
-    verticalDivider: {
-      name: 'Vertical dividers',
-      description: 'When enabled, table has vertical dividers between columns.',
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
-        type: 'boolean',
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
       },
     },
     compactDesign: {
@@ -37,74 +41,127 @@ export default {
       control: {
         type: 'boolean',
       },
-    },
-    modeVariant: {
-      name: 'Mode variant',
-      description: 'The mode variant of the component',
-      control: {
-        type: 'radio',
-      },
-      options: ['Inherit from parent', 'Primary', 'Secondary'],
       table: {
-        defaultValue: { summary: 'Inherit from parent' },
+        defaultValue: { summary: false },
       },
     },
     responsiveDesign: {
       name: 'Responsive design',
-      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too.',
+      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',
       },
-    },
-    noMinWidth: {
-      name: 'No column minimum width limitation',
-      description: 'Enable columns to shrink below width 192px.',
-      control: {
-        type: 'boolean',
+      table: {
+        defaultValue: { summary: false },
       },
     },
     column1sortable: {
       name: 'Column 1 is sortable',
-      description: 'Enabling column 1 to be sorted alphabetically.',
+      description: 'Enables column 1 to be sorted alphabetically.',
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
     column2sortable: {
       name: 'Column 2 is sortable',
-      description: 'Enabling column 2 to be sorted alphabetically.',
+      description: 'Enables column 2 to be sorted alphabetically.',
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
     column3sortable: {
       name: 'Column 3 is sortable',
-      description: 'Enabling column 3 to be sorted alphabetically.',
+      description: 'Enables column 3 to be sorted alphabetically.',
       control: {
         type: 'boolean',
       },
+      table: {
+        defaultValue: { summary: false },
+      },
     },
     column4sortable: {
       name: 'Column 4 is sortable',
-      description: 'Enabling column 4 to be sorted alphabetically.',
+      description: 'Enables column 4 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'Enables vertical dividers between table columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      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',
       },
     },
+    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 next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      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 next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      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 next to the value, eg. 200px.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'noMinWidth', eq: true },
+    },
+    column4Width: {
+      name: 'Column 4 width',
+      description: 'Value of width for column 4. 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: 'noMinWidth', eq: true },
+    },
   },
   args: {
     modeVariant: 'Inherit from parent',
-    verticalDivider: false,
     compactDesign: false,
     responsiveDesign: false,
     column1sortable: true,
     column2sortable: true,
     column3sortable: true,
     column4sortable: true,
+    verticalDivider: false,
     noMinWidth: false,
+    column1Width: '',
+    column2Width: '',
+    column3Width: '',
+    column4Width: '',
   },
 };
-const SortingTemplate = ({ verticalDivider, compactDesign, modeVariant, responsiveDesign, column1sortable, column2sortable, column3sortable, column4sortable, noMinWidth, }) => formatHtmlPreview(`
+const SortingTemplate = ({ modeVariant, compactDesign, responsiveDesign, column1sortable, column2sortable, column3sortable, column4sortable, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
     <sdds-table
       vertical-dividers="${verticalDivider}"
       compact-design="${compactDesign}"
@@ -114,14 +171,13 @@ const SortingTemplate = ({ verticalDivider, compactDesign, modeVariant, responsi
     >
       <sdds-table-toolbar table-title="Sorting"></sdds-table-toolbar>
           <sdds-table-header>
-              <sdds-header-cell column-key='truck' column-title='Truck type' sortable="${column1sortable}"></sdds-header-cell>
-              <sdds-header-cell column-key='driver' column-title='Driver name' sortable="${column2sortable}"></sdds-header-cell>
-              <sdds-header-cell column-key='country' column-title='Country' sortable="${column3sortable}"></sdds-header-cell>
-              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable="${column4sortable}" text-align='right'></sdds-header-cell>
+              <sdds-header-cell column-key='truck' column-title='Truck type' sortable="${column1sortable}" ${column1Width ? `custom-width="${column1Width}"` : ''}></sdds-header-cell>
+              <sdds-header-cell column-key='driver' column-title='Driver name' sortable="${column2sortable}" ${column2Width ? `custom-width="${column2Width}"` : ''}></sdds-header-cell>
+              <sdds-header-cell column-key='country' column-title='Country' sortable="${column3sortable}" ${column3Width ? `custom-width="${column3Width}"` : ''}></sdds-header-cell>
+              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable="${column4sortable}" text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></sdds-header-cell>
           </sdds-table-header>
           <sdds-table-body enable-dummy-data>
           </sdds-table-body>
   </sdds-table>`);
 export const Sorting = SortingTemplate.bind({});
-Sorting.args = {};
 //# sourceMappingURL=table-component-sorting.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table-component-sorting.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-sorting.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\n  argTypes: {\n    verticalDivider: {\n      name: 'Vertical dividers',\n      description: 'When enabled, table has vertical dividers between columns.',\n      control: {\n        type: 'boolean',\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    },\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    responsiveDesign: {\n      name: 'Responsive design',\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    },\n    noMinWidth: {\n      name: 'No column minimum width limitation',\n      description: 'Enable columns to shrink below width 192px.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    column1sortable: {\n      name: 'Column 1 is sortable',\n      description: 'Enabling column 1 to be sorted alphabetically.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    column2sortable: {\n      name: 'Column 2 is sortable',\n      description: 'Enabling column 2 to be sorted alphabetically.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    column3sortable: {\n      name: 'Column 3 is sortable',\n      description: 'Enabling column 3 to be sorted alphabetically.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    column4sortable: {\n      name: 'Column 4 is sortable',\n      description: 'Enabling column 4 to be sorted alphabetically.',\n      control: {\n        type: 'boolean',\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    verticalDivider: false,\n    compactDesign: false,\n    responsiveDesign: false,\n    column1sortable: true,\n    column2sortable: true,\n    column3sortable: true,\n    column4sortable: true,\n    noMinWidth: false,\n  },\n};\n\nconst SortingTemplate = ({\n  verticalDivider,\n  compactDesign,\n  modeVariant,\n  responsiveDesign,\n  column1sortable,\n  column2sortable,\n  column3sortable,\n  column4sortable,\n  noMinWidth,\n}) =>\n  formatHtmlPreview(`\n    <sdds-table\n      vertical-dividers=\"${verticalDivider}\"\n      compact-design=\"${compactDesign}\"\n      enable-responsive=\"${responsiveDesign}\"\n      ${noMinWidth ? 'no-min-width' : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n    >\n      <sdds-table-toolbar table-title=\"Sorting\"></sdds-table-toolbar>\n          <sdds-table-header>\n              <sdds-header-cell column-key='truck' column-title='Truck type' sortable=\"${column1sortable}\"></sdds-header-cell>\n              <sdds-header-cell column-key='driver' column-title='Driver name' sortable=\"${column2sortable}\"></sdds-header-cell>\n              <sdds-header-cell column-key='country' column-title='Country' sortable=\"${column3sortable}\"></sdds-header-cell>\n              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable=\"${column4sortable}\" text-align='right'></sdds-header-cell>\n          </sdds-table-header>\n          <sdds-table-body enable-dummy-data>\n          </sdds-table-body>\n  </sdds-table>`);\n\nexport const Sorting = SortingTemplate.bind({});\nSorting.args = {};\n"]}
+{"version":3,"file":"table-component-sorting.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-sorting.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport sddsTable from './table/readme.md';\nimport sddsTableToolbar from './table-toolbar/readme.md';\nimport sddsHeader from './table-header/readme.md';\nimport sddsHeaderCell from './table-header-cell/readme.md';\nimport sddsTableBody from './table-body/readme.md';\nimport sddsBodyRow from './table-body-row/readme.md';\nimport sddsBodyRowExpandable from './table-body-row-expandable/readme.md';\nimport sddsBodyCell from './table-body-cell/readme.md';\nimport sddsTableFooter from './table-footer/readme.md';\n\nexport default {\n  title: 'Components/Data Table/Web Component',\n  parameters: {\n    notes: {\n      'sdds-table': sddsTable,\n      'sdds-table-toolbar': sddsTableToolbar,\n      'sdds-header': sddsHeader,\n      'sdds-header-cell': sddsHeaderCell,\n      'sdds-table-body': sddsTableBody,\n      'sdds-body-row': sddsBodyRow,\n      'sdds-body-row-expandable': sddsBodyRowExpandable,\n      'sdds-body-cell': sddsBodyCell,\n      'sdds-table-footer': sddsTableFooter,\n    },\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        '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 design',\n      description:\n        '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    column1sortable: {\n      name: 'Column 1 is sortable',\n      description: 'Enables column 1 to be sorted alphabetically.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    column2sortable: {\n      name: 'Column 2 is sortable',\n      description: 'Enables column 2 to be sorted alphabetically.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    column3sortable: {\n      name: 'Column 3 is sortable',\n      description: 'Enables column 3 to be sorted alphabetically.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    column4sortable: {\n      name: 'Column 4 is sortable',\n      description: 'Enables column 4 to be sorted alphabetically.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\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:\n        '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    },\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 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:\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 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:\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 next to the value, eg. 200px.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'noMinWidth', eq: true },\n    },\n    column4Width: {\n      name: 'Column 4 width',\n      description:\n        'Value of width for column 4. 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    column1sortable: true,\n    column2sortable: true,\n    column3sortable: true,\n    column4sortable: true,\n    verticalDivider: false,\n    noMinWidth: false,\n    column1Width: '',\n    column2Width: '',\n    column3Width: '',\n    column4Width: '',\n  },\n};\n\nconst SortingTemplate = ({\n  modeVariant,\n  compactDesign,\n  responsiveDesign,\n  column1sortable,\n  column2sortable,\n  column3sortable,\n  column4sortable,\n  verticalDivider,\n  noMinWidth,\n  column1Width,\n  column2Width,\n  column3Width,\n  column4Width,\n}) =>\n  formatHtmlPreview(`\n    <sdds-table\n      vertical-dividers=\"${verticalDivider}\"\n      compact-design=\"${compactDesign}\"\n      enable-responsive=\"${responsiveDesign}\"\n      ${noMinWidth ? 'no-min-width' : ''}\n      ${modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''}\n    >\n      <sdds-table-toolbar table-title=\"Sorting\"></sdds-table-toolbar>\n          <sdds-table-header>\n              <sdds-header-cell column-key='truck' column-title='Truck type' sortable=\"${column1sortable}\" ${\n    column1Width ? `custom-width=\"${column1Width}\"` : ''\n  }></sdds-header-cell>\n              <sdds-header-cell column-key='driver' column-title='Driver name' sortable=\"${column2sortable}\" ${\n    column2Width ? `custom-width=\"${column2Width}\"` : ''\n  }></sdds-header-cell>\n              <sdds-header-cell column-key='country' column-title='Country' sortable=\"${column3sortable}\" ${\n    column3Width ? `custom-width=\"${column3Width}\"` : ''\n  }></sdds-header-cell>\n              <sdds-header-cell column-key='mileage' column-title='Mileage' sortable=\"${column4sortable}\" text-align='right' ${\n    column4Width ? `custom-width=\"${column4Width}\"` : ''\n  }></sdds-header-cell>\n          </sdds-table-header>\n          <sdds-table-body enable-dummy-data>\n          </sdds-table-body>\n  </sdds-table>`);\n\nexport const Sorting = SortingTemplate.bind({});\n"]}

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

@@ -83,7 +83,7 @@ export class TableFooter {
     this.whiteBackground = false;
     this.tableId = '';
   }
-  tablePropsChangedEventListener(event) {
+  internalSddsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
       event.detail.changed
         .filter((changedProp) => relevantTableProps.includes(changedProp))
@@ -112,7 +112,7 @@ export class TableFooter {
     else {
       this.columnsNumber = numberOfColumns;
     }
-    this.enablePaginationEvent.emit(this.tableId);
+    this.internalSddsEnablePagination.emit(this.tableId);
   }
   paginationInputChange(event) {
     const insertedValue = event.target.value;
@@ -125,13 +125,13 @@ export class TableFooter {
     }
     this.runPagination();
   }
-  runPaginationEventListener(event) {
+  sddsPaginationListener(event) {
     if (this.tableId === event.detail) {
       this.runPagination();
     }
   }
   sendPaginationValue(value) {
-    this.currentPageValueEvent.emit([this.tableId, value]);
+    this.sddsPageChange.emit([this.tableId, value]);
   }
   clientPaginationInputChange(event) {
     const insertedValue = event.target.value;
@@ -304,14 +304,17 @@ export class TableFooter {
   }
   static get events() {
     return [{
-        "method": "enablePaginationEvent",
-        "name": "enablePaginationEvent",
+        "method": "internalSddsEnablePagination",
+        "name": "internalSddsEnablePagination",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Event that footer sends out in order to receive other necessary information from other subcomponents"
+          "tags": [{
+              "name": "internal",
+              "text": "Event that footer sends out in order to receive other necessary information from other subcomponents"
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "any",
@@ -319,14 +322,14 @@ export class TableFooter {
           "references": {}
         }
       }, {
-        "method": "currentPageValueEvent",
-        "name": "currentPageValueEvent",
+        "method": "sddsPageChange",
+        "name": "sddsPageChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event to send current page value back to sdds-table-body component"
+          "text": "Event to send current page value back to sdds-table-body component, can also be listened to in order to implement custom pagination logic."
         },
         "complexType": {
           "original": "any",
@@ -338,14 +341,14 @@ export class TableFooter {
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{
-        "name": "tablePropsChangedEvent",
-        "method": "tablePropsChangedEventListener",
+        "name": "internalSddsTablePropChange",
+        "method": "internalSddsPropChangeListener",
         "target": "body",
         "capture": false,
         "passive": false
       }, {
-        "name": "runPaginationEvent",
-        "method": "runPaginationEventListener",
+        "name": "internalSddsPagination",
+        "method": "sddsPaginationListener",
         "target": "body",
         "capture": false,
         "passive": false

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

@@ -1 +1 @@
-{"version":3,"file":"table-footer.js","sourceRoot":"","sources":["../../../../src/components/data-table/table-footer/table-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Host,\n  Listen,\n  State,\n  Event,\n  EventEmitter,\n  Prop,\n  Element,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\nfunction removeShakeAnimation(e: AnimationEvent & { target: HTMLElement }) {\n  e.target.classList.remove('sdds-table__page-selector-input--shake');\n}\n\n@Component({\n  tag: 'sdds-table-footer',\n  styleUrl: 'table-footer.scss',\n  shadow: true,\n})\nexport class TableFooter {\n  /** Enable pagination and show pagination controls  */\n  @Prop({ reflect: true }) enablePagination: boolean = false;\n\n  /** Sets how many rows to display when pagination is enabled */\n  @Prop({ reflect: true }) rowsPerPage: number = 5;\n\n  /** Prop to enable client controlled pagination  */\n  @Prop({ reflect: true }) enableClientPagination: boolean = false;\n\n  /** Prop for client to set current page number */\n  @Prop({ reflect: true }) clientPaginationValue: number = 1;\n\n  /** Prop for client to set max number of pages */\n  @Prop({ reflect: true }) clientMaxPages: number = 1;\n\n  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n  @Prop() clientSetColumnsNumber: number = null;\n\n  /** Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component */\n  @Prop() disablePaginationFunction: boolean = false;\n\n  /** State that memorize number of columns to display colSpan correctly - set from parent level */\n  @State() columnsNumber: number = 0;\n\n  /** Total number of pages, number of the rows divided with number of rows per page */\n  @State() numberOfPages: number = 0;\n\n  /** Initial value for pagination in input element */\n  @State() paginationValue: number = 1;\n\n  /** Temporarily disable pagination - due to search - set from parent level */\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Event that footer sends out in order to receive other necessary information from other subcomponents */\n  @Event({\n    eventName: 'enablePaginationEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  enablePaginationEvent: EventEmitter<any>;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n\n    const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;\n\n    const numberOfColumns =\n      this.host.parentElement.querySelector('sdds-table-header').childElementCount;\n\n    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);\n\n    if (this.clientSetColumnsNumber !== null) {\n      this.columnsNumber = this.clientSetColumnsNumber;\n    } else {\n      this.columnsNumber = numberOfColumns;\n    }\n\n    this.enablePaginationEvent.emit(this.tableId);\n  }\n\n  paginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.paginationValue >= 2) {\n      this.paginationValue--;\n      this.runPagination();\n    }\n  };\n\n  paginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.paginationValue <= this.numberOfPages) {\n      this.paginationValue++;\n      this.runPagination();\n    }\n  };\n\n  paginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.numberOfPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.paginationValue = event.target.max;\n    } else {\n      this.paginationValue = event.target.value;\n    }\n    this.runPagination();\n  }\n\n  @Listen('runPaginationEvent', { target: 'body' })\n  runPaginationEventListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail) {\n      this.runPagination();\n    }\n  }\n\n  runPagination = () => {\n    if (!this.disablePaginationFunction) {\n      // grab all rows in body\n      const dataRowsPagination = this.host.parentNode\n        .querySelector('sdds-table-body')\n        .querySelectorAll('.sdds-table__row');\n\n      dataRowsPagination.forEach((item, i) => {\n        // for making logic easier 1st result, 2nd result...\n        const index = i + 1;\n\n        if (this.tempPaginationDisable) {\n          this.paginationValue = 1;\n        } else {\n          const lastResult = this.rowsPerPage * this.paginationValue;\n          const firstResult = lastResult - this.rowsPerPage;\n\n          if (index > firstResult && index <= lastResult) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        }\n      });\n    }\n  };\n\n  /* Client based functions below */\n\n  /** Event to send current page value back to sdds-table-body component */\n  @Event({\n    eventName: 'currentPageValueEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  currentPageValueEvent: EventEmitter<any>;\n\n  sendPaginationValue(value) {\n    this.currentPageValueEvent.emit([this.tableId, value]);\n  }\n\n  clientPaginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.clientPaginationValue >= 2) {\n      this.clientPaginationValue--;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.clientPaginationValue <= this.clientMaxPages) {\n      this.clientPaginationValue++;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.clientMaxPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.clientPaginationValue = event.target.max;\n    } else {\n      this.clientPaginationValue = event.target.value;\n    }\n    this.sendPaginationValue(this.clientPaginationValue);\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <tr class=\"sdds-table__footer-row\">\n          <td class=\"sdds-table__footer-cell\" colSpan={this.columnsNumber}>\n            {this.enablePagination && !this.enableClientPagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.numberOfPages}\n                    value={this.paginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.paginationInputChange(event)}\n                    onFocusout={(event) => this.paginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                    disabled={this.tempPaginationDisable}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.tempPaginationDisable ? 1 : this.numberOfPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.paginationValue <= 1 || this.tempPaginationDisable}\n                    onClick={(event) => this.paginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={\n                      this.paginationValue >= this.numberOfPages || this.tempPaginationDisable\n                    }\n                    onClick={(event) => this.paginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n            {this.enableClientPagination && !this.enablePagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.clientMaxPages}\n                    value={this.clientPaginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.clientPaginationInputChange(event)}\n                    onFocusout={(event) => this.clientPaginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.clientMaxPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue <= 1}\n                    onClick={(event) => this.clientPaginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue >= this.clientMaxPages}\n                    onClick={(event) => this.clientPaginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"table-footer.js","sourceRoot":"","sources":["../../../../src/components/data-table/table-footer/table-footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Host,\n  Listen,\n  State,\n  Event,\n  EventEmitter,\n  Prop,\n  Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\nfunction removeShakeAnimation(e: AnimationEvent & { target: HTMLElement }) {\n  e.target.classList.remove('sdds-table__page-selector-input--shake');\n}\n\n@Component({\n  tag: 'sdds-table-footer',\n  styleUrl: 'table-footer.scss',\n  shadow: true,\n})\nexport class TableFooter {\n  /** Enable pagination and show pagination controls  */\n  @Prop({ reflect: true }) enablePagination: boolean = false;\n\n  /** Sets how many rows to display when pagination is enabled */\n  @Prop({ reflect: true }) rowsPerPage: number = 5;\n\n  /** Prop to enable client controlled pagination  */\n  @Prop({ reflect: true }) enableClientPagination: boolean = false;\n\n  /** Prop for client to set current page number */\n  @Prop({ reflect: true }) clientPaginationValue: number = 1;\n\n  /** Prop for client to set max number of pages */\n  @Prop({ reflect: true }) clientMaxPages: number = 1;\n\n  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n  @Prop() clientSetColumnsNumber: number = null;\n\n  /** Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component */\n  @Prop() disablePaginationFunction: boolean = false;\n\n  /** State that memorize number of columns to display colSpan correctly - set from parent level */\n  @State() columnsNumber: number = 0;\n\n  /** Total number of pages, number of the rows divided with number of rows per page */\n  @State() numberOfPages: number = 0;\n\n  /** Initial value for pagination in input element */\n  @State() paginationValue: number = 1;\n\n  /** Temporarily disable pagination - due to search - set from parent level */\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** @internal Event that footer sends out in order to receive other necessary information from other subcomponents */\n  @Event({\n    eventName: 'internalSddsEnablePagination',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsEnablePagination: EventEmitter<any>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n\n    const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;\n\n    const numberOfColumns =\n      this.host.parentElement.querySelector('sdds-table-header').childElementCount;\n\n    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);\n\n    if (this.clientSetColumnsNumber !== null) {\n      this.columnsNumber = this.clientSetColumnsNumber;\n    } else {\n      this.columnsNumber = numberOfColumns;\n    }\n\n    this.internalSddsEnablePagination.emit(this.tableId);\n  }\n\n  paginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.paginationValue >= 2) {\n      this.paginationValue--;\n      this.runPagination();\n    }\n  };\n\n  paginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.paginationValue <= this.numberOfPages) {\n      this.paginationValue++;\n      this.runPagination();\n    }\n  };\n\n  paginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.numberOfPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.paginationValue = event.target.max;\n    } else {\n      this.paginationValue = event.target.value;\n    }\n    this.runPagination();\n  }\n\n  @Listen('internalSddsPagination', { target: 'body' })\n  sddsPaginationListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail) {\n      this.runPagination();\n    }\n  }\n\n  runPagination = () => {\n    if (!this.disablePaginationFunction) {\n      // grab all rows in body\n      const dataRowsPagination = this.host.parentNode\n        .querySelector('sdds-table-body')\n        .querySelectorAll('.sdds-table__row');\n\n      dataRowsPagination.forEach((item, i) => {\n        // for making logic easier 1st result, 2nd result...\n        const index = i + 1;\n\n        if (this.tempPaginationDisable) {\n          this.paginationValue = 1;\n        } else {\n          const lastResult = this.rowsPerPage * this.paginationValue;\n          const firstResult = lastResult - this.rowsPerPage;\n\n          if (index > firstResult && index <= lastResult) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        }\n      });\n    }\n  };\n\n  /* Client based functions below */\n\n  /** Event to send current page value back to sdds-table-body component, can also be listened to in order to implement custom pagination logic. */\n  @Event({\n    eventName: 'sddsPageChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsPageChange: EventEmitter<any>;\n\n  sendPaginationValue(value) {\n    this.sddsPageChange.emit([this.tableId, value]);\n  }\n\n  clientPaginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.clientPaginationValue >= 2) {\n      this.clientPaginationValue--;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.clientPaginationValue <= this.clientMaxPages) {\n      this.clientPaginationValue++;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.clientMaxPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.clientPaginationValue = event.target.max;\n    } else {\n      this.clientPaginationValue = event.target.value;\n    }\n    this.sendPaginationValue(this.clientPaginationValue);\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <tr class=\"sdds-table__footer-row\">\n          <td class=\"sdds-table__footer-cell\" colSpan={this.columnsNumber}>\n            {this.enablePagination && !this.enableClientPagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.numberOfPages}\n                    value={this.paginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.paginationInputChange(event)}\n                    onFocusout={(event) => this.paginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                    disabled={this.tempPaginationDisable}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.tempPaginationDisable ? 1 : this.numberOfPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.paginationValue <= 1 || this.tempPaginationDisable}\n                    onClick={(event) => this.paginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={\n                      this.paginationValue >= this.numberOfPages || this.tempPaginationDisable\n                    }\n                    onClick={(event) => this.paginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n            {this.enableClientPagination && !this.enablePagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.clientMaxPages}\n                    value={this.clientPaginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.clientPaginationInputChange(event)}\n                    onFocusout={(event) => this.clientPaginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.clientMaxPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue <= 1}\n                    onClick={(event) => this.clientPaginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue >= this.clientMaxPages}\n                    onClick={(event) => this.clientPaginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/data-table/table-header/table-header.css

@@ -6,6 +6,8 @@
   --sdds-checkbox-interaction-02: var(--sdds-white);
   --sdds-checkbox-background-hover: var(--sdds-blue-800);
   --sdds-checkbox-background-focus: var(--sdds-blue-800);
+  --sdds-checkbox-background-opacity-hover: 0.12;
+  --sdds-checkbox-background-opacity-focus: 0.24;
   --sdds-checkbox-disabled: var(--sdds-grey-400);
   --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
@@ -17,8 +19,10 @@
   --sdds-checkbox-color: var(--sdds-white);
   --sdds-checkbox-interaction-01: var(--sdds-white);
   --sdds-checkbox-interaction-02: var(--sdds-grey-958);
-  --sdds-checkbox-background-hover: white;
-  --sdds-checkbox-background-focus: white;
+  --sdds-checkbox-background-hover: var(--sdds-grey-600);
+  --sdds-checkbox-background-focus: var(--sdds-grey-600);
+  --sdds-checkbox-background-opacity-hover: 0.48;
+  --sdds-checkbox-background-opacity-focus: 0.72;
   --sdds-checkbox-disabled: white;
   --sdds-checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
   --sdds-checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
@@ -60,13 +64,13 @@
   content: "";
   position: absolute;
   box-sizing: border-box;
-  border-radius: 2px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]::before {
   width: 24px;
   height: 24px;
   left: 0;
   top: 0;
+  border-radius: 4px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
   border: 1px solid var(--sdds-checkbox-interaction-01);
@@ -75,14 +79,15 @@
   height: 16px;
   left: 4px;
   top: 4px;
+  border-radius: 2px;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before {
   background-color: var(--sdds-checkbox-background-hover);
-  opacity: 0.12;
+  opacity: var(--sdds-checkbox-background-opacity-hover);
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before {
   background-color: var(--sdds-checkbox-background-focus);
-  opacity: 0.24;
+  opacity: var(--sdds-checkbox-background-opacity-focus);
   transition: opacity 0.2s ease-in-out;
 }
 .sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled, .sdds-checkbox-item .sdds-form-input[type=checkbox].disabled {

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

@@ -19,7 +19,7 @@ export class TableHeaderRow {
     this.enableToolbarDesign = false;
     this.tableId = '';
   }
-  tablePropsChangedEventListener(event) {
+  internalSddsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
       event.detail.changed
         .filter((changedProp) => relevantTableProps.includes(changedProp))
@@ -31,13 +31,13 @@ export class TableHeaderRow {
       });
     }
   }
-  updateMainCheckboxEventListener(event) {
+  internalSddsMainCheckboxChangeListener(event) {
     const [receivedID, receivedMainCheckboxStatus] = event.detail;
     if (this.tableId === receivedID) {
       this.mainCheckboxSelected = receivedMainCheckboxStatus;
     }
   }
-  singleRowExpandedEventListener(event) {
+  internalSddsRowExpandedListener(event) {
     if (this.tableId === event.detail[0]) {
       // TODO: Improve this logic. Why we get late repose in DOM?
       setTimeout(() => {
@@ -74,7 +74,7 @@ export class TableHeaderRow {
   }
   headCheckBoxClicked(event) {
     this.mainCheckboxSelected = event.currentTarget.checked;
-    this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);
+    this.internalSddsMainCheckboxSelect.emit([this.tableId, this.mainCheckboxSelected]);
   }
   render() {
     return (h(Host, { class: {
@@ -111,14 +111,17 @@ export class TableHeaderRow {
   }
   static get events() {
     return [{
-        "method": "mainCheckboxSelectedEvent",
-        "name": "mainCheckboxSelectedEvent",
+        "method": "internalSddsMainCheckboxSelect",
+        "name": "internalSddsMainCheckboxSelect",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Send status of main checkbox in header to the parent, sdds-table component"
+          "tags": [{
+              "name": "internal",
+              "text": "Send status of main checkbox in header to the parent, sdds-table component"
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "any",
@@ -130,20 +133,20 @@ export class TableHeaderRow {
   static get elementRef() { return "host"; }
   static get listeners() {
     return [{
-        "name": "tablePropsChangedEvent",
-        "method": "tablePropsChangedEventListener",
+        "name": "internalSddsTablePropChange",
+        "method": "internalSddsPropChangeListener",
         "target": "body",
         "capture": false,
         "passive": false
       }, {
-        "name": "updateMainCheckboxEvent",
-        "method": "updateMainCheckboxEventListener",
+        "name": "internalSddsMainCheckboxChange",
+        "method": "internalSddsMainCheckboxChangeListener",
         "target": "body",
         "capture": false,
         "passive": false
       }, {
-        "name": "singleRowExpandedEvent",
-        "method": "singleRowExpandedEventListener",
+        "name": "internalSddsRowExpanded",
+        "method": "internalSddsRowExpandedListener",
         "target": "body",
         "capture": false,
         "passive": false