@scania/tegel 1.0.0 → 1.0.1

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

@@ -119,78 +119,78 @@ export default {
     column4Width: '',
   },
 };
-const MultiselectTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
-    <tds-table
-        table-id="multiselect-table"
-        multiselect
-        vertical-dividers="${verticalDivider}"
-        compact-design="${compactDesign}"
-        responsive="${responsiveDesign}"
-        ${noMinWidth ? 'no-min-width' : ''}
-        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-          <tds-table-header>
-              <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
-          </tds-table-header>
-          <tds-table-body>
-          <tds-table-body-row>
-          <tds-body-cell cell-key="truck" cell-value="L-series"> </tds-body-cell
-          ><tds-body-cell cell-key="driver" cell-value="Sonya Bruce"></tds-body-cell
-          ><tds-body-cell cell-key="country" cell-value="Brazil"></tds-body-cell
-          ><tds-body-cell cell-key="mileage" cell-value="123987"></tds-body-cell>
-        </tds-table-body-row>
-        <tds-table-body-row 
-          ><tds-body-cell cell-key="truck" cell-value="P-series"></tds-body-cell
-          ><tds-body-cell cell-key="driver" cell-value="Guerra Bowman"></tds-body-cell
-          ><tds-body-cell cell-key="country" cell-value="Sweden"></tds-body-cell
-          ><tds-body-cell cell-key="mileage" cell-value="2000852"></tds-body-cell>
-        </tds-table-body-row>
-        <tds-table-body-row
-          ><tds-body-cell cell-key="truck" cell-value="G-series"></tds-body-cell
-          ><tds-body-cell cell-key="driver" cell-value="Ferrell Wallace"></tds-body-cell
-          ><tds-body-cell cell-key="country" cell-value="Germany"></tds-body-cell
-          ><tds-body-cell cell-key="mileage" cell-value="564"></tds-body-cell>
-        </tds-table-body-row>
-        <tds-table-body-row
-          ><tds-body-cell cell-key="truck" cell-value="R-series"></tds-body-cell
-          ><tds-body-cell cell-key="driver" cell-value="Cox Burris"></tds-body-cell
-          ><tds-body-cell cell-key="country" cell-value="Spain"></tds-body-cell
-          ><tds-body-cell cell-key="mileage" cell-value="1789357"></tds-body-cell>
-        </tds-table-body-row>
-          </tds-table-body>
-  </tds-table>
-  <!-- Note: Code below is just for demo purposes -->
-  <div class="tds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
-  <p class="tds-u-mt0">Note: This box works only in "Canvas" tab.</p>
-    <h5 class="tds-u-mt0 tds-u-mb0">Event test box</h5>
-    <h6 class="tds-u-mt1 tds-u-mb0">Event name:</h6>
-    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
-    <br><br>
-    <h6 class="tds-u-mt0 tds-u-mb0">Events value (aka detail)</h6>
-    <textarea id="event-value-textarea" rows="4" cols="50" readonly></textarea>
-    <br><br>
-    <h6 class="tds-u-mt0 tds-u-mb0">Selected rows</h6>
-    <textarea  id="selected-rows-textarea" rows="4" cols="50" readonly></textarea>
-  </div>  
-  <script>
-  // Note: Script here is only for demo purposes
-
-  window.addEventListener('tdsSelectAll', e => {
-    console.log(e)
-    document.getElementById('event-name-textarea').value = e.type;
-    document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
-    document.getElementById('selected-rows-textarea').value = JSON.stringify(e.detail.selectedRows,null, 2);
-  });
-
-  window.addEventListener('tdsSelect', e => {
-    console.log(e)
-    document.getElementById('event-name-textarea').value = e.type;
-    document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
-    document.getElementById('selected-rows-textarea').value = JSON.stringify(e.detail.selectedRows,null, 2);
-  });
-</script>
+const MultiselectTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+    <tds-table
+        table-id="multiselect-table"
+        multiselect
+        vertical-dividers="${verticalDivider}"
+        compact-design="${compactDesign}"
+        responsive="${responsiveDesign}"
+        ${noMinWidth ? 'no-min-width' : ''}
+        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+          <tds-table-header>
+              <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
+          </tds-table-header>
+          <tds-table-body>
+          <tds-table-body-row>
+          <tds-body-cell cell-key="truck" cell-value="L-series"> </tds-body-cell
+          ><tds-body-cell cell-key="driver" cell-value="Sonya Bruce"></tds-body-cell
+          ><tds-body-cell cell-key="country" cell-value="Brazil"></tds-body-cell
+          ><tds-body-cell cell-key="mileage" cell-value="123987"></tds-body-cell>
+        </tds-table-body-row>
+        <tds-table-body-row 
+          ><tds-body-cell cell-key="truck" cell-value="P-series"></tds-body-cell
+          ><tds-body-cell cell-key="driver" cell-value="Guerra Bowman"></tds-body-cell
+          ><tds-body-cell cell-key="country" cell-value="Sweden"></tds-body-cell
+          ><tds-body-cell cell-key="mileage" cell-value="2000852"></tds-body-cell>
+        </tds-table-body-row>
+        <tds-table-body-row
+          ><tds-body-cell cell-key="truck" cell-value="G-series"></tds-body-cell
+          ><tds-body-cell cell-key="driver" cell-value="Ferrell Wallace"></tds-body-cell
+          ><tds-body-cell cell-key="country" cell-value="Germany"></tds-body-cell
+          ><tds-body-cell cell-key="mileage" cell-value="564"></tds-body-cell>
+        </tds-table-body-row>
+        <tds-table-body-row
+          ><tds-body-cell cell-key="truck" cell-value="R-series"></tds-body-cell
+          ><tds-body-cell cell-key="driver" cell-value="Cox Burris"></tds-body-cell
+          ><tds-body-cell cell-key="country" cell-value="Spain"></tds-body-cell
+          ><tds-body-cell cell-key="mileage" cell-value="1789357"></tds-body-cell>
+        </tds-table-body-row>
+          </tds-table-body>
+  </tds-table>
+  <!-- Note: Code below is just for demo purposes -->
+  <div class="tds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
+  <p class="tds-u-mt0">Note: This box works only in "Canvas" tab.</p>
+    <h5 class="tds-u-mt0 tds-u-mb0">Event test box</h5>
+    <h6 class="tds-u-mt1 tds-u-mb0">Event name:</h6>
+    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
+    <br><br>
+    <h6 class="tds-u-mt0 tds-u-mb0">Events value (aka detail)</h6>
+    <textarea id="event-value-textarea" rows="4" cols="50" readonly></textarea>
+    <br><br>
+    <h6 class="tds-u-mt0 tds-u-mb0">Selected rows</h6>
+    <textarea  id="selected-rows-textarea" rows="4" cols="50" readonly></textarea>
+  </div>  
+  <script>
+  // Note: Script here is only for demo purposes
+
+  window.addEventListener('tdsSelectAll', e => {
+    console.log(e)
+    document.getElementById('event-name-textarea').value = e.type;
+    document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
+    document.getElementById('selected-rows-textarea').value = JSON.stringify(e.detail.selectedRows,null, 2);
+  });
+
+  window.addEventListener('tdsSelect', e => {
+    console.log(e)
+    document.getElementById('event-name-textarea').value = e.type;
+    document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
+    document.getElementById('selected-rows-textarea').value = JSON.stringify(e.detail.selectedRows,null, 2);
+  });
+</script>
   `);
 export const Multiselect = MultiselectTemplate.bind({});

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

@@ -118,77 +118,77 @@ export default {
     column4Width: '',
   },
 };
-const PaginationTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
-    <tds-table
-      table-id='pagination-table'
-      vertical-dividers="${verticalDivider}"
-      compact-design="${compactDesign}"
-      responsive="${responsiveDesign}"
-      ${noMinWidth ? 'no-min-width' : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      >
-          <tds-table-header>
-              <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
-          </tds-table-header>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-          <tds-table-footer pages="4" pagination></tds-table-footer>
-  </tds-table>
-  <!-- Note: Code below is just for demo purposes -->
-  <div class="tds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
-  <p class="tds-u-mt0">Note: This box works only in "Canvas" tab.</p>
-    <h5 class="tds-u-mt0 tds-u-mb0">Event test box</h5>
-    <h6 class="tds-u-mt1 tds-u-mb0">Event name:</h6>
-    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
-    <h6 class="tds-u-mt0 tds-u-mb0">Events value (aka detail)</h6>
-    <br>
-    <textarea id="event-value-textarea" rows="4" cols="50" readonly></textarea>
-  </div>
-  
-
-  <script>
-    window.addEventListener('tdsPagination', e => {
-      document.getElementById('event-name-textarea').value = e.type;
-      document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
-    });
-  </script>
-  
+const PaginationTemplate = ({ modeVariant, compactDesign, responsiveDesign, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+    <tds-table
+      table-id='pagination-table'
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      >
+          <tds-table-header>
+              <tds-header-cell cell-key='truck' cell-value='Truck type' ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='driver' cell-value='Driver name' ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='country' cell-value='Country' ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='mileage' cell-value='Mileage' text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
+          </tds-table-header>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+          <tds-table-footer pages="4" pagination></tds-table-footer>
+  </tds-table>
+  <!-- Note: Code below is just for demo purposes -->
+  <div class="tds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
+  <p class="tds-u-mt0">Note: This box works only in "Canvas" tab.</p>
+    <h5 class="tds-u-mt0 tds-u-mb0">Event test box</h5>
+    <h6 class="tds-u-mt1 tds-u-mb0">Event name:</h6>
+    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
+    <h6 class="tds-u-mt0 tds-u-mb0">Events value (aka detail)</h6>
+    <br>
+    <textarea id="event-value-textarea" rows="4" cols="50" readonly></textarea>
+  </div>
+  
+
+  <script>
+    window.addEventListener('tdsPagination', e => {
+      document.getElementById('event-name-textarea').value = e.type;
+      document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
+    });
+  </script>
+  
   `);
 export const Pagination = PaginationTemplate.bind({});

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

@@ -162,79 +162,79 @@ export default {
     column4Width: '',
   },
 };
-const SortingTemplate = ({ modeVariant, compactDesign, responsiveDesign, column1sortable, column2sortable, column3sortable, column4sortable, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
-    <tds-table
-      table-id='tds-table-sorting-example'
-      vertical-dividers="${verticalDivider}"
-      compact-design="${compactDesign}"
-      responsive="${responsiveDesign}"
-      ${noMinWidth ? 'no-min-width' : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      <tds-table-toolbar table-title="Sorting"></tds-table-toolbar>
-          <tds-table-header>
-              <tds-header-cell cell-key='truck' cell-value='Truck type' sortable="${column1sortable}" ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='driver' cell-value='Driver name' sortable="${column2sortable}" ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='country' cell-value='Country' sortable="${column3sortable}" ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
-              <tds-header-cell cell-key='mileage' cell-value='Mileage' sortable="${column4sortable}" text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
-          </tds-table-header>
-          <tds-table-body>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-            <tds-table-body-row>
-                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
-                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
-            </tds-table-body-row>
-          </tds-table-body>
-  </tds-table>
-  <!-- Note: Code below is just for demo purposes -->
-  <div class="tds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
-  <p class="tds-u-mt0">Note: This box works only in "Canvas" tab.</p>
-    <h5 class="tds-u-mt0 tds-u-mb0">Event test box</h5>
-    <h6 class="tds-u-mt1 tds-u-mb0">Event name:</h6>
-    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
-    <h6 class="tds-u-mt0 tds-u-mb0">Events value (aka detail)</h6>
-    <br>
-    <textarea id="event-value-textarea" rows="4" cols="50" readonly></textarea>
-  </div>
-  
-  
-  <script>    
-    
-    
-  window.addEventListener('tdsSort', e => {
-    document.getElementById('event-name-textarea').value = e.type;
-    document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
-  });
+const SortingTemplate = ({ modeVariant, compactDesign, responsiveDesign, column1sortable, column2sortable, column3sortable, column4sortable, verticalDivider, noMinWidth, column1Width, column2Width, column3Width, column4Width, }) => formatHtmlPreview(`
+    <tds-table
+      table-id='tds-table-sorting-example'
+      vertical-dividers="${verticalDivider}"
+      compact-design="${compactDesign}"
+      responsive="${responsiveDesign}"
+      ${noMinWidth ? 'no-min-width' : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      <tds-table-toolbar table-title="Sorting"></tds-table-toolbar>
+          <tds-table-header>
+              <tds-header-cell cell-key='truck' cell-value='Truck type' sortable="${column1sortable}" ${column1Width ? `custom-width="${column1Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='driver' cell-value='Driver name' sortable="${column2sortable}" ${column2Width ? `custom-width="${column2Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='country' cell-value='Country' sortable="${column3sortable}" ${column3Width ? `custom-width="${column3Width}"` : ''}></tds-header-cell>
+              <tds-header-cell cell-key='mileage' cell-value='Mileage' sortable="${column4sortable}" text-align='right' ${column4Width ? `custom-width="${column4Width}"` : ''}></tds-header-cell>
+          </tds-table-header>
+          <tds-table-body>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 1" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 2" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 3" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 4" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+            <tds-table-body-row>
+                <tds-body-cell cell-value="Test value 5" cell-key="truck"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 6" cell-key="driver"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 7" cell-key="country"></tds-body-cell>
+                <tds-body-cell cell-value="Test value 8" cell-key="mileage"></tds-body-cell>
+            </tds-table-body-row>
+          </tds-table-body>
+  </tds-table>
+  <!-- Note: Code below is just for demo purposes -->
+  <div class="tds-u-mt1" style="width: 500px; background-color: lightblue; padding: 16px;">
+  <p class="tds-u-mt0">Note: This box works only in "Canvas" tab.</p>
+    <h5 class="tds-u-mt0 tds-u-mb0">Event test box</h5>
+    <h6 class="tds-u-mt1 tds-u-mb0">Event name:</h6>
+    <textarea id="event-name-textarea" rows="1" cols="50" readonly></textarea>
+    <h6 class="tds-u-mt0 tds-u-mb0">Events value (aka detail)</h6>
+    <br>
+    <textarea id="event-value-textarea" rows="4" cols="50" readonly></textarea>
+  </div>
+  
+  
+  <script>    
+    
+    
+  window.addEventListener('tdsSort', e => {
+    document.getElementById('event-name-textarea').value = e.type;
+    document.getElementById('event-value-textarea').value = JSON.stringify(e.detail, null, 2);
+  });
   </script>`);
 export const Sorting = SortingTemplate.bind({});

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

@@ -65,13 +65,14 @@
   width: 32px;
   border-radius: 4px;
   transition: background-color 250ms ease;
+  color: var(--tds-table-footer-page-selector-icon);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover {
   background-color: var(--tds-table-footer-btn-hover);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled {
   cursor: default;
-  opacity: 0.38;
+  color: var(--tds-table-footer-page-selector-icon-disabled);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover {
   background-color: transparent;

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

@@ -200,7 +200,7 @@ export class TdsTableFooter {
           "text": "Event to send current page value to tds-table-body component, can also be listened to in order to implement custom pagination logic."
         },
         "complexType": {
-          "original": "{\r\n    tableId: string;\r\n    paginationValue: number;\r\n  }",
+          "original": "{\n    tableId: string;\n    paginationValue: number;\n  }",
           "resolved": "{ tableId: string; paginationValue: number; }",
           "references": {}
         }

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

@@ -145,7 +145,7 @@ export class TdsTableHeaderRow {
           "text": "Event emitted when the status of the select all checkbox changes."
         },
         "complexType": {
-          "original": "{\r\n    tableId: string;\r\n    checked: boolean;\r\n    selectedRows: any[];\r\n  }",
+          "original": "{\n    tableId: string;\n    checked: boolean;\n    selectedRows: any[];\n  }",
           "resolved": "{ tableId: string; checked: boolean; selectedRows: any[]; }",
           "references": {}
         }

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

@@ -251,7 +251,7 @@ export class TdsTableHeaderCell {
           "text": "Sends unique Table identifier, column key and sorting direction to the tds-table-body component, can also be listened to in order to implement custom-sorting logic."
         },
         "complexType": {
-          "original": "{\r\n    tableId: string;\r\n    columnKey: string;\r\n    sortingDirection: 'asc' | 'desc';\r\n  }",
+          "original": "{\n    tableId: string;\n    columnKey: string;\n    sortingDirection: 'asc' | 'desc';\n  }",
           "resolved": "{ tableId: string; columnKey: string; sortingDirection: \"desc\" | \"asc\"; }",
           "references": {}
         }
@@ -269,7 +269,7 @@ export class TdsTableHeaderCell {
           "text": ""
         },
         "complexType": {
-          "original": "{\r\n    tableId: string;\r\n    key: string;\r\n  }",
+          "original": "{\n    tableId: string;\n    key: string;\n  }",
           "resolved": "{ tableId: string; key: string; }",
           "references": {}
         }
@@ -305,7 +305,7 @@ export class TdsTableHeaderCell {
           "text": ""
         },
         "complexType": {
-          "original": "{\r\n    tableId: string;\r\n    key: string;\r\n  }",
+          "original": "{\n    tableId: string;\n    key: string;\n  }",
           "resolved": "{ tableId: string; key: string; }",
           "references": {}
         }

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

@@ -126,10 +126,10 @@ export class TdsTableToolbar {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Used for sending users' input to the main parent tds-table the component,\r\ncan also be listened to in order to implement custom sorting logic."
+          "text": "Used for sending users' input to the main parent tds-table the component,\ncan also be listened to in order to implement custom sorting logic."
         },
         "complexType": {
-          "original": "{\r\n    tableId: string;\r\n    query: string;\r\n  }",
+          "original": "{\n    tableId: string;\n    query: string;\n  }",
           "resolved": "{ tableId: string; query: string; }",
           "references": {}
         }

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -17,7 +17,7 @@ export class TdsFolderTab {
     this.selected = selected;
   }
   render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: `${this.disabled ? 'disabled' : ''}
+    return (h(Host, { role: "listitem" }, h("div", { class: `${this.disabled ? 'disabled' : ''}
                   ${this.selected ? 'selected' : ''}`, style: { width: `${this.tabWidth}px` } }, h("slot", null))));
   }
   static get is() { return "tds-folder-tab"; }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -219,7 +219,7 @@ export class TdsFolderTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the selected Tab.\r\nIf this is set, all Tab changes need to be handled by the user."
+          "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
         },
         "attribute": "selected-index",
         "reflect": true
@@ -245,7 +245,7 @@ export class TdsFolderTabs {
           "text": "Event emitted when the selected Tab is changed."
         },
         "complexType": {
-          "original": "{\r\n    selectedTabIndex: number;\r\n  }",
+          "original": "{\n    selectedTabIndex: number;\n  }",
           "resolved": "{ selectedTabIndex: number; }",
           "references": {}
         }