@scania/tegel 1.0.0 → 1.0.3

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import tdsTable from "./table/readme.md";
 import tdsTableToolbar from "./table-toolbar/readme.md";
 import tdsHeader from "./table-header/readme.md";
@@ -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": {}
         }

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

@@ -1,7 +1,7 @@
-import { formatHtmlPreview } from "../../../utils/utils";
 import readme from "./readme.md";
 import readmeItem from "./folder-tab/readme.md";
 import { ComponentsFolder } from "../../../utils/constants";
+import formatHtmlPreview from "../../../stories/formatHtmlPreview";
 export default {
   title: `${ComponentsFolder}/Tabs`,
   parameters: {
@@ -67,39 +67,39 @@ export default {
     selectedIndex: 'None',
   },
 };
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-    <tds-folder-tabs
-      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      <tds-folder-tab>
-        <button>First tab</button>
-      </tds-folder-tab>
-      <tds-folder-tab>
-        <button>Second tab is much longer</button>
-      </tds-folder-tab>
-      <tds-folder-tab>
-        <button>Third tab</button>
-      </tds-folder-tab>
-      <tds-folder-tab disabled>
-        <button>Fourth tab</button>
-      </tds-folder-tab>
-    </tds-folder-tabs>
-
-    <!-- Demo container. -->
-    <div class="demo-container">
-      <h4 class="tds-headline-04">Selected tab index: <span class="selectedTabIndex"></span></h4>
-    </div>
-    
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-    tabs = document.querySelector('tds-folder-tabs');
-  
-    tabs.addEventListener('tdsChange', (event) => {
-      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-      console.log(event)
-    })
-    </script>
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
+    <tds-folder-tabs
+      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <tds-folder-tab>
+        <button>First tab</button>
+      </tds-folder-tab>
+      <tds-folder-tab>
+        <button>Second tab is much longer</button>
+      </tds-folder-tab>
+      <tds-folder-tab>
+        <button>Third tab</button>
+      </tds-folder-tab>
+      <tds-folder-tab disabled>
+        <button>Fourth tab</button>
+      </tds-folder-tab>
+    </tds-folder-tabs>
+
+    <!-- Demo container. -->
+    <div class="demo-container">
+      <h4 class="tds-headline-04">Selected tab index: <span class="selectedTabIndex"></span></h4>
+    </div>
+    
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+    tabs = document.querySelector('tds-folder-tabs');
+  
+    tabs.addEventListener('tdsChange', (event) => {
+      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+      console.log(event)
+    })
+    </script>
 `);
 export const FolderTabs = Template.bind({});

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

@@ -12,7 +12,7 @@ export class TdsInlineTab {
     this.selected = selected;
   }
   render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: `inline-tab-item  ${this.selected ? 'selected' : ''}
+    return (h(Host, { role: "listitem" }, h("div", { class: `inline-tab-item  ${this.selected ? 'selected' : ''}
            ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
   }
   static get is() { return "tds-inline-tab"; }

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

@@ -44,9 +44,6 @@ export class TdsInlineTabs {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;
-              this.tdsChange.emit({
-                selectedTabIndex: this.selectedIndex,
-              });
             }
           }
         });
@@ -68,9 +65,6 @@ export class TdsInlineTabs {
         if (index === tabIndex) {
           element.setSelected(true);
           this.selectedIndex = tabIndex;
-          this.tdsChange.emit({
-            selectedTabIndex: this.selectedIndex,
-          });
         }
         return element;
       });
@@ -209,7 +203,7 @@ export class TdsInlineTabs {
         "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
@@ -235,7 +229,7 @@ export class TdsInlineTabs {
           "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": {}
         }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import readmeTab from "./inline-tab/readme.md";
 import { ComponentsFolder } from "../../../utils/constants";
@@ -61,39 +61,39 @@ export default {
     selectedIndex: 'None',
   },
 };
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-  <tds-inline-tabs
-    ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-    ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-    <tds-inline-tab>
-      <button>First tab</button>
-    </tds-inline-tab>
-    <tds-inline-tab>
-      <button>Second tab is much longer</button>
-    </tds-inline-tab>
-    <tds-inline-tab>
-      <button>Third tab</button>
-    </tds-inline-tab>
-    <tds-inline-tab disabled>
-      <button>Fourth tab</button>
-    </tds-inline-tab>
-   </tds-inline-tabs>
-
-   <!-- Demo container. -->
-   <div class="demo-container">
-     <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
-   </div>
-
-   <!-- Script tag with eventlistener for demo purposes. -->
-   <script>
-   selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-   tabs = document.querySelector('tds-inline-tabs');
-   
-   tabs.addEventListener('tdsChange', (event) => {
-     selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-     console.log(event)
-    })
-   </script>
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
+  <tds-inline-tabs
+    ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+    ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+    <tds-inline-tab>
+      <button>First tab</button>
+    </tds-inline-tab>
+    <tds-inline-tab>
+      <button>Second tab is much longer</button>
+    </tds-inline-tab>
+    <tds-inline-tab>
+      <button>Third tab</button>
+    </tds-inline-tab>
+    <tds-inline-tab disabled>
+      <button>Fourth tab</button>
+    </tds-inline-tab>
+   </tds-inline-tabs>
+
+   <!-- Demo container. -->
+   <div class="demo-container">
+     <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
+   </div>
+
+   <!-- Script tag with eventlistener for demo purposes. -->
+   <script>
+   selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+   tabs = document.querySelector('tds-inline-tabs');
+   
+   tabs.addEventListener('tdsChange', (event) => {
+     selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+     console.log(event)
+    })
+   </script>
 `);
 export const InlineTabs = Template.bind({});

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

@@ -12,7 +12,7 @@ export class TdsNavigationTab {
     this.selected = selected;
   }
   render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+    return (h(Host, { role: "listitem" }, h("div", { class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
            ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
   }
   static get is() { return "tds-navigation-tab"; }

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

@@ -46,9 +46,6 @@ export class TdsNavigationTabs {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;
-              this.tdsChange.emit({
-                selectedTabIndex: this.selectedIndex,
-              });
             }
           }
         });
@@ -200,7 +197,7 @@ export class TdsNavigationTabs {
         "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
@@ -225,7 +222,7 @@ export class TdsNavigationTabs {
           "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": {}
         }

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import readmeTab from "./navigation-tab/readme.md";
 import { ComponentsFolder } from "../../../utils/constants";
@@ -61,41 +61,41 @@ export default {
     selectedIndex: 'None',
   },
 };
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-    <tds-navigation-tabs
-      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? ` mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      <tds-navigation-tab>
-        <button>First tab</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab>
-        <button>Second tab is much longer</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab>
-        <button>Third tab</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab disabled>
-        <button>Fourth tab</button>
-      </tds-navigation-tab>
-    </tds-navigation-tabs>
-
-    <!-- Demo container. -->
-    <div class="demo-container">
-      <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
-    </div>
- 
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-    selectedTab = document.getElementsByClassName('selectedTab')[0]
-    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-    tabs = document.querySelector('tds-navigation-tabs');
-    
-    tabs.addEventListener('tdsChange', (event) => {
-      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-      console.log(event)
-    })
-    </script>
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
+    <tds-navigation-tabs
+      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? ` mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      <tds-navigation-tab>
+        <button>First tab</button>
+      </tds-navigation-tab>
+      <tds-navigation-tab>
+        <button>Second tab is much longer</button>
+      </tds-navigation-tab>
+      <tds-navigation-tab>
+        <button>Third tab</button>
+      </tds-navigation-tab>
+      <tds-navigation-tab disabled>
+        <button>Fourth tab</button>
+      </tds-navigation-tab>
+    </tds-navigation-tabs>
+
+    <!-- Demo container. -->
+    <div class="demo-container">
+      <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
+    </div>
+ 
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+    selectedTab = document.getElementsByClassName('selectedTab')[0]
+    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+    tabs = document.querySelector('tds-navigation-tabs');
+    
+    tabs.addEventListener('tdsChange', (event) => {
+      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+      console.log(event)
+    })
+    </script>
     `);
 export const NavigationTabs = Template.bind({});