@scania/tegel 0.0.1-beta.9 → 0.0.31

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-component-multiselect.stories.js","sourceRoot":"","sources":["../../../src/components/data-table/table-component-multiselect.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    enableMultiselect: {\n      name: 'Enable multiselect',\n      description: 'Enable row selection.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: {\n          summary: true,\n        },\n      },\n    },\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  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    compactDesign: false,\n    verticalDivider: false,\n    responsiveDesign: false,\n    noMinWidth: false,\n    enableMultiselect: true,\n  },\n};\n\nconst MultiselectTemplate = ({\n  verticalDivider,\n  compactDesign,\n  modeVariant,\n  responsiveDesign,\n  enableMultiselect,\n  noMinWidth,\n}) =>\n  formatHtmlPreview(`\n<script>\n// Note: Script here is only for demo purposes\n  function getValue() {\n    const element = document.querySelector('#multiselect-table > sdds-table-body');\n    const textArea = document.getElementById('selected-rows-value-textarea');\n    const observer = new MutationObserver(mutations => {\n      mutations.forEach(mutation => {\n        if (mutation.type === 'attributes') {\n          textArea.value = element.getAttribute('data-selected-rows');\n        }\n      });\n    });\n    observer.observe(element, {\n      attributes: true,\n    });\n  }\n  window.addEventListener('click', () => {\n    getValue();\n  });\n\n</script>\n\n    <sdds-table\n        id=\"multiselect-table\"\n        ${enableMultiselect ? 'enable-multiselect' : ''}\n        vertical-dividers=\"${verticalDivider}\"\n        compact-design=\"${compactDesign}\"\n        enable-responsive=\"${responsiveDesign}\"\n        ${noMinWidth ? 'no-min-width' : ''}\n        ${\n          modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''\n        }\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>\n\n  <!-- Note: Code below is just for demo purposes -->\n  <div class=\"sdds-u-mt1\" style=\"width: 450px; background-color: lightblue; padding: 16px;\">\n    <p class=\"sdds-u-mt0\">Note: This box works only in \"Canvas\" tab.</p>\n    <h6 class=\"sdds-u-pb0 sdds-u-mb0 sdds-u-mt0\">Selected rows data</h6>\n    <small>Values here are values found in data-selected-rows attribute of sdds-table-body element. They are shown here just for presentation purposes.</small>\n    <textarea id=\"selected-rows-value-textarea\" rows=\"5\" cols=\"50\" readonly></textarea>\n  </div>`);\n\nexport const Multiselect = MultiselectTemplate.bind({});\nMultiselect.args = {};\n"]}

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

@@ -0,0 +1,128 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import sddsTable from './table/readme.md';
+import sddsTableToolbar from './table-toolbar/readme.md';
+import sddsHeader from './table-header/readme.md';
+import sddsHeaderCell from './table-header-cell/readme.md';
+import sddsTableBody from './table-body/readme.md';
+import sddsBodyRow from './table-body-row/readme.md';
+import sddsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import sddsBodyCell from './table-body-cell/readme.md';
+import sddsTableFooter from './table-footer/readme.md';
+export default {
+  title: 'Components/Data Table/Web Component',
+  parameters: {
+    notes: {
+      'sdds-table': sddsTable,
+      'sdds-table-toolbar': sddsTableToolbar,
+      'sdds-header': sddsHeader,
+      'sdds-header-cell': sddsHeaderCell,
+      'sdds-table-body': sddsTableBody,
+      'sdds-body-row': sddsBodyRow,
+      'sdds-body-row-expandable': sddsBodyRowExpandable,
+      'sdds-body-cell': sddsBodyCell,
+      'sdds-table-footer': sddsTableFooter,
+    },
+  },
+  argTypes: {
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'When enabled, table has vertical dividers between columns.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    compactDesign: {
+      name: 'Compact design',
+      description: 'Enables compact design of the table, rows with less height.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    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' },
+      },
+    },
+    responsiveDesign: {
+      name: 'Responsive table',
+      description: 'Table takes 100% of available width. For column values less then 192px, "No minimum width" has to be enabled too. ',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    noMinWidth: {
+      name: 'No column minimum width limitation',
+      description: 'Enable columns to shrink below width 192px.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+    rowsPerPageControl: {
+      name: 'Rows per page',
+      description: 'Specify how many rows per page user would like to see',
+      control: {
+        type: 'number',
+      },
+      table: {
+        defaultValue: {
+          summary: 4,
+        },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    compactDesign: false,
+    verticalDivider: false,
+    responsiveDesign: false,
+    rowsPerPageControl: 4,
+    noMinWidth: false,
+  },
+};
+const PaginationTemplate = ({ verticalDivider, compactDesign, modeVariant, rowsPerPageControl, responsiveDesign, noMinWidth, }) => formatHtmlPreview(`
+    <sdds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      enable-responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      >
+          <sdds-table-header>
+              <sdds-header-cell column-key='truck' column-title='Truck type'></sdds-header-cell>
+              <sdds-header-cell column-key='driver' column-title='Driver name'></sdds-header-cell>
+              <sdds-header-cell column-key='country' column-title='Country'></sdds-header-cell>
+              <sdds-header-cell column-key='mileage' column-title='Mileage' text-align='right'></sdds-header-cell>
+          </sdds-table-header>
+          <sdds-table-body enable-dummy-data>
+          </sdds-table-body>
+          <sdds-table-footer enable-pagination rows-per-page="${rowsPerPageControl}"></sdds-table-footer>
+  </sdds-table>`);
+export const Pagination = PaginationTemplate.bind({});
+Pagination.args = {};
+//# sourceMappingURL=table-component-pagination.stories.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,127 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import sddsTable from './table/readme.md';
+import sddsTableToolbar from './table-toolbar/readme.md';
+import sddsHeader from './table-header/readme.md';
+import sddsHeaderCell from './table-header-cell/readme.md';
+import sddsTableBody from './table-body/readme.md';
+import sddsBodyRow from './table-body-row/readme.md';
+import sddsBodyRowExpandable from './table-body-row-expandable/readme.md';
+import sddsBodyCell from './table-body-cell/readme.md';
+import sddsTableFooter from './table-footer/readme.md';
+export default {
+  title: 'Components/Data Table/Web Component',
+  parameters: {
+    notes: {
+      'sdds-table': sddsTable,
+      'sdds-table-toolbar': sddsTableToolbar,
+      'sdds-header': sddsHeader,
+      'sdds-header-cell': sddsHeaderCell,
+      'sdds-table-body': sddsTableBody,
+      'sdds-body-row': sddsBodyRow,
+      'sdds-body-row-expandable': sddsBodyRowExpandable,
+      'sdds-body-cell': sddsBodyCell,
+      'sdds-table-footer': sddsTableFooter,
+    },
+  },
+  argTypes: {
+    verticalDivider: {
+      name: 'Vertical dividers',
+      description: 'When enabled, table has vertical dividers between columns.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    compactDesign: {
+      name: 'Compact Design',
+      description: 'Enables compact design of the table, rows with less height.',
+      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' },
+      },
+    },
+    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.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    noMinWidth: {
+      name: 'No column minimum width limitation',
+      description: 'Enable columns to shrink below width 192px.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column1sortable: {
+      name: 'Column 1 is sortable',
+      description: 'Enabling column 1 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column2sortable: {
+      name: 'Column 2 is sortable',
+      description: 'Enabling column 2 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column3sortable: {
+      name: 'Column 3 is sortable',
+      description: 'Enabling column 3 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    column4sortable: {
+      name: 'Column 4 is sortable',
+      description: 'Enabling column 4 to be sorted alphabetically.',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    verticalDivider: false,
+    compactDesign: false,
+    responsiveDesign: false,
+    column1sortable: true,
+    column2sortable: true,
+    column3sortable: true,
+    column4sortable: true,
+    noMinWidth: false,
+  },
+};
+const SortingTemplate = ({ verticalDivider, compactDesign, modeVariant, responsiveDesign, column1sortable, column2sortable, column3sortable, column4sortable, noMinWidth, }) => formatHtmlPreview(`
+    <sdds-table
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      enable-responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      <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-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

@@ -0,0 +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"]}

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

@@ -0,0 +1,97 @@
+:host {
+  box-sizing: border-box;
+  display: table-footer-group;
+  height: 48px;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host .sdds-table__footer-row {
+  background-color: var(--sdds-data-table-footer-background);
+  color: var(--sdds-data-table-color);
+}
+:host .sdds-table__footer-cell {
+  padding: 0 16px;
+}
+:host .sdds-table__footer-cell .sdds-table__pagination {
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__row-selector,
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector {
+  display: flex;
+  align-items: center;
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  background-color: var(--sdds-data-table-footer-page-selector-input-background);
+  color: var(--sdds-data-table-color);
+  width: 36px;
+  height: 30px;
+  border: none;
+  border-radius: 4px;
+  transition: background-color 250ms ease;
+  margin-right: 4px;
+  padding-right: 8px;
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:hover {
+  background-color: var(--sdds-data-table-footer-page-selector-input-background-hover);
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:disabled {
+  color: var(--sdds-data-table-footer-page-selector-input-color-disabled);
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input--shake {
+  animation: sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  transform: translate3d(0, 0, 0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-text {
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  padding: 1px 8px 0 0;
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  height: 32px;
+  width: 32px;
+  border-radius: 4px;
+  transition: background-color 250ms ease;
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:hover {
+  background-color: var(--sdds-data-table-footer-btn-hover);
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled {
+  cursor: default;
+  opacity: 0.38;
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled:hover {
+  background-color: transparent;
+}
+:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn-svg {
+  height: 20px;
+  width: 20px;
+  fill: var(--sdds-data-table-color);
+}
+
+:host(.sdds-table--compact) {
+  height: 32px;
+}
+:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination {
+  height: 32px;
+}
+:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input {
+  height: 24px;
+}
+:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn {
+  height: 28px;
+  width: 28px;
+}