@scania/tegel 1.0.0 → 1.0.3

package/dist/collection/components/side-menu/side-menu.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import readmeSideMenuUser from "./side-menu-user/readme.md";
 import readmeSideMenuOverlay from "./side-menu-overlay/readme.md";
@@ -64,152 +64,152 @@ export default {
     collapsible: false,
   },
 };
-const Template = ({ persistent, collapsible }) => formatHtmlPreview(`
-    <script>
-    /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
-    window.demoSideMenu = document.querySelector('#demo-side-menu');
-  </script>
-  <style>
-    :root {
-      --app-bar-height: 64px;
-    }
-
-    /* Note: to make the layout fill the entire viewport height you'll need to set the */
-    /* height of the parent element and all of its ancestors to 100%. */
-    /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
-    .demo-layout {
-      min-height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-    .demo-header {
-      position: sticky;
-      top: 0;
-    }
-    .demo-wrap-side-menu-and-main {
-      display: flex;
-      flex-grow: 1;
-    }
+const Template = ({ persistent, collapsible }) => formatHtmlPreview(`
+    <script>
+    /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
+    window.demoSideMenu = document.querySelector('#demo-side-menu');
+  </script>
+  <style>
+    :root {
+      --app-bar-height: 64px;
+    }
+
+    /* Note: to make the layout fill the entire viewport height you'll need to set the */
+    /* height of the parent element and all of its ancestors to 100%. */
+    /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
+    .demo-layout {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .demo-header {
+      position: sticky;
+      top: 0;
+    }
+    .demo-wrap-side-menu-and-main {
+      display: flex;
+      flex-grow: 1;
+    }
     ${persistent
-  ? `
-        /* the lg breakpoint is used here to match the breakpoint used in the Header */
-    @media (min-width: 992px) {
-      #demo-side-menu {
-        /* We suggest you attach the persistent Side Menu to your layout like this: */
-        height: calc(100vh - var(--app-bar-height));
-        position: sticky;
-        top: var(--app-bar-height);
-        left: 0px;
-      }
+  ? `
+        /* the lg breakpoint is used here to match the breakpoint used in the Header */
+    @media (min-width: 992px) {
+      #demo-side-menu {
+        /* We suggest you attach the persistent Side Menu to your layout like this: */
+        height: calc(100vh - var(--app-bar-height));
+        position: sticky;
+        top: var(--app-bar-height);
+        left: 0px;
+      }
     }`
-  : ''}
-    /* If an extra button in the Header is required except on */
-    /* very narrow screens, you can use classes like these: */
-    .demo-hide {
-      display: none;
-    }
-
-    /* https://tegel.scania.com/components/header#:~:text=breakpoints%20larger%20than-,%24small%2D375.,-On%20smaller%20breakpoints */
-    @media (min-width: 375px) {
-      .demo-xs-hide {
-        display: none;
-      }
-      .demo-xs-show {
-        display: block;
-      }
-    }
-  </style>
-
-  <div class="demo-layout">
-    <tds-header class="demo-header">
-      <tds-header-hamburger onclick="demoSideMenu.open = true;" aria-expanded="false" aria-label="Open application drawer" aria-haspopup="true"></tds-header-hamburger>
-
-      <tds-header-title>
-        My Application
-      </tds-header-title>
-
-      <i style="color:white">Header items omitted for brevity. See patterns/navigation</i>
-
-      <tds-header-brand-symbol slot="end">
-        <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
-      </tds-header-brand-symbol>
-    </tds-header>
-
-    <div class="demo-wrap-side-menu-and-main">
-      <!-- Note: the "persistent" property keeps the menu open on desktop -->
-      <tds-side-menu aria-label="Side menu" id="demo-side-menu" ${persistent ? 'persistent' : ''}>
-        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;"></tds-side-menu-overlay>
-
-        <tds-side-menu-close-button slot="close-button" aria-label="Close drawer menu" onclick="demoSideMenu.open = false;"></tds-side-menu-close-button>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="timer" size="24px"></tds-icon>
-            About us
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="truck" size="24px"></tds-icon>
-            Trucks
-          </button>
-        </tds-side-menu-item>
-
-        <tds-side-menu-dropdown default-open selected>
-          <tds-icon slot="icon" name="profile" size="24px"></tds-icon>
-          <span slot="label">
-            Wheel types
-          </span>
-          <tds-side-menu-dropdown-list>
-            <tds-side-menu-dropdown-list-item>
-              <a href="https://www.scania.com">
-                Hub-centric wheel
-              </a>
-            </tds-side-menu-dropdown-list-item>
-            <tds-side-menu-dropdown-list-item selected>
-              <a href="https://www.scania.com" aria-current="page">
-                Rim wheel
-              </a>
-            </tds-side-menu-dropdown-list-item>
-          </tds-side-menu-dropdown-list>
-        </tds-side-menu-dropdown>
-
-        <tds-side-menu-item>
-          <button>
-            <tds-icon name="star" size="24px"></tds-icon>
-            Values
-          </button>
-        </tds-side-menu-item>
-
+  : ''}
+    /* If an extra button in the Header is required except on */
+    /* very narrow screens, you can use classes like these: */
+    .demo-hide {
+      display: none;
+    }
+
+    /* https://tegel.scania.com/components/header#:~:text=breakpoints%20larger%20than-,%24small%2D375.,-On%20smaller%20breakpoints */
+    @media (min-width: 375px) {
+      .demo-xs-hide {
+        display: none;
+      }
+      .demo-xs-show {
+        display: block;
+      }
+    }
+  </style>
+
+  <div class="demo-layout">
+    <tds-header class="demo-header">
+      <tds-header-hamburger onclick="demoSideMenu.open = true;" aria-expanded="false" aria-label="Open application drawer" aria-haspopup="true"></tds-header-hamburger>
+
+      <tds-header-title>
+        My Application
+      </tds-header-title>
+
+      <i style="color:white">Header items omitted for brevity. See patterns/navigation</i>
+
+      <tds-header-brand-symbol slot="end">
+        <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
+      </tds-header-brand-symbol>
+    </tds-header>
+
+    <div class="demo-wrap-side-menu-and-main">
+      <!-- Note: the "persistent" property keeps the menu open on desktop -->
+      <tds-side-menu aria-label="Side menu" id="demo-side-menu" ${persistent ? 'persistent' : ''}>
+        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;"></tds-side-menu-overlay>
+
+        <tds-side-menu-close-button slot="close-button" aria-label="Close drawer menu" onclick="demoSideMenu.open = false;"></tds-side-menu-close-button>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="timer" size="24px"></tds-icon>
+            About us
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="truck" size="24px"></tds-icon>
+            Trucks
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-dropdown default-open selected>
+          <tds-icon slot="icon" name="profile" size="24px"></tds-icon>
+          <span slot="label">
+            Wheel types
+          </span>
+          <tds-side-menu-dropdown-list>
+            <tds-side-menu-dropdown-list-item>
+              <a href="https://www.scania.com">
+                Hub-centric wheel
+              </a>
+            </tds-side-menu-dropdown-list-item>
+            <tds-side-menu-dropdown-list-item selected>
+              <a href="https://www.scania.com" aria-current="page">
+                Rim wheel
+              </a>
+            </tds-side-menu-dropdown-list-item>
+          </tds-side-menu-dropdown-list>
+        </tds-side-menu-dropdown>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="star" size="24px"></tds-icon>
+            Values
+          </button>
+        </tds-side-menu-item>
+
         ${collapsible
-  ? `<tds-side-menu-collapse-button slot="sticky-end">
-          Collapse  
+  ? `<tds-side-menu-collapse-button slot="sticky-end">
+          Collapse  
         </tds-side-menu-collapse-button>`
-  : ''}
-
-      </tds-side-menu>
-
-      <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
-        <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
-        <br/>In that case they should be placed in a persistent Side Menu — which is always visible on large screens.</p>
-
-        <p><i>Note: The Side Menu is sticky, and should not scroll with the main content of the page.</i></p>
-
-        <p><i>Note: The collapse button is optional.</i></p>
-        <button id="test">Toggle the collapsed state programatically</button>
-      </main>
-    </div>
-  </div>
-  <script>
-    sideMenu = document.querySelector('tds-side-menu')
-    document.querySelector('#test')?.addEventListener('click', ()=> {
-      sideMenu.collapsed = !sideMenu.collapsed;
-    })
-
-    document.querySelector('tds-side-menu-collapse-button')?.addEventListener('tdsCollapse', (event) => {
-      console.log(event)
-    })
-  </script>
+  : ''}
+
+      </tds-side-menu>
+
+      <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
+        <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
+        <br/>In that case they should be placed in a persistent Side Menu — which is always visible on large screens.</p>
+
+        <p><i>Note: The Side Menu is sticky, and should not scroll with the main content of the page.</i></p>
+
+        <p><i>Note: The collapse button is optional.</i></p>
+        <button id="test">Toggle the collapsed state programatically</button>
+      </main>
+    </div>
+  </div>
+  <script>
+    sideMenu = document.querySelector('tds-side-menu')
+    document.querySelector('#test')?.addEventListener('click', ()=> {
+      sideMenu.collapsed = !sideMenu.collapsed;
+    })
+
+    document.querySelector('tds-side-menu-collapse-button')?.addEventListener('tdsCollapse', (event) => {
+      console.log(event)
+    })
+  </script>
   `);
 export const Default = Template.bind({});

package/dist/collection/components/slider/slider.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { generateUniqueId } from "../../utils/utils";
+import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsSlider {
   constructor() {
     this.wrapperElement = null;
@@ -13,7 +13,6 @@ export class TdsSlider {
     this.thumbGrabbed = false;
     this.thumbLeft = 0;
     this.tickValues = [];
-    this.readonlyState = false;
     this.useControls = false;
     this.useInput = false;
     this.useSmall = false;
@@ -91,6 +90,11 @@ export class TdsSlider {
     }
     this.thumbCore(event);
   }
+  handleValueUpdate(newVal) {
+    this.calculateThumbLeftFromValue(newVal);
+    this.updateValueForced(newVal);
+    this.updateTrack();
+  }
   updateSupposedValueSlot(localLeft) {
     const numTicks = parseInt(this.ticks);
     const trackWidth = this.getTrackWidth();
@@ -237,7 +241,7 @@ export class TdsSlider {
     this.updateTrack();
   }
   grabThumb() {
-    if (this.readonlyState) {
+    if (this.readOnly) {
       return;
     }
     this.thumbGrabbed = true;
@@ -247,7 +251,7 @@ export class TdsSlider {
     return this.max.length;
   }
   controlsStep(delta) {
-    if (this.readonlyState || this.disabled) {
+    if (this.readOnly || this.disabled) {
       return;
     }
     const numTicks = parseInt(this.ticks);
@@ -297,7 +301,6 @@ export class TdsSlider {
       }
       this.tickValues.push(this.getMax());
     }
-    this.readonlyState = this.readOnly;
     this.useInput = false;
     this.useControls = false;
     if (this.controls) {
@@ -316,7 +319,7 @@ export class TdsSlider {
     }
   }
   render() {
-    return (h("div", { class: `tds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: {
+    return (h("div", { class: `tds-slider-wrapper ${this.readOnly ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: {
         'tds-slider': true,
         'disabled': this.disabled,
         'tds-slider-small': this.useSmall,
@@ -337,7 +340,7 @@ export class TdsSlider {
       } })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;
       }, class: "tds-slider__input-value" }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { onFocus: (e) => {
-        if (this.readonlyState) {
+        if (this.readOnly) {
           e.preventDefault();
           this.inputElement.blur();
         }
@@ -662,7 +665,7 @@ export class TdsSlider {
           "text": "Sends the value of the slider when changed."
         },
         "complexType": {
-          "original": "{\r\n    value: string;\r\n  }",
+          "original": "{\n    value: string;\n  }",
           "resolved": "{ value: string; }",
           "references": {}
         }
@@ -689,6 +692,12 @@ export class TdsSlider {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "handleValueUpdate"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "keydown",

package/dist/collection/components/slider/slider.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
@@ -201,43 +201,43 @@ const sizeLookUp = {
   Large: 'lg',
   Small: 'sm',
 };
-const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, }) => formatHtmlPreview(`
- <!-- Style code below is just for demo purposes -->
-    <style>
-      .demo-wrapper {
-          width: 500px;
-          margin-left: 150px;
-      }
-    </style>
-
-   <div class="demo-wrapper">
-     <tds-slider 
-        min="${min}"
-        max="${max}"
-        ${showControls && step ? `step="${step}"` : ''}
-        value="${initialValue}"
-        ${showTicks ? `ticks="${numTicks}"` : ''}
-        ${showTickNumbers ? 'show-tick-numbers' : ''}
-        ${snapToTicks ? 'snap' : ''}
-        ${showLabel ? `label="${labelText}"` : ''}
-        ${showTooltip ? 'tooltip' : ''}
-        ${showControls ? 'controls' : ''}
-        ${showInput ? 'input' : ''}
-        ${disabled ? 'disabled' : ''}
-        thumb-size="${sizeLookUp[thumbSize]}"
-        ${readonly ? 'read-only' : ''}
-        >
-      </tds-slider>
-    </div>
-
-     <!-- Script tag for demo purposes -->
-    <script>
-      slider = document.querySelector('tds-slider')
-
-      slider.removeEventListener('tdsChange', null)
-      slider.addEventListener('tdsChange', (event) => {
-        console.log(event);
-      });
-    </script>
+const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, numTicks, showTickNumbers, snapToTicks, showTooltip, showControls, step, showInput, thumbSize, readonly, disabled, }) => formatHtmlPreview(`
+ <!-- Style code below is just for demo purposes -->
+    <style>
+      .demo-wrapper {
+          width: 500px;
+          margin-left: 150px;
+      }
+    </style>
+
+   <div class="demo-wrapper">
+     <tds-slider 
+        min="${min}"
+        max="${max}"
+        ${showControls && step ? `step="${step}"` : ''}
+        value="${initialValue}"
+        ${showTicks ? `ticks="${numTicks}"` : ''}
+        ${showTickNumbers ? 'show-tick-numbers' : ''}
+        ${snapToTicks ? 'snap' : ''}
+        ${showLabel ? `label="${labelText}"` : ''}
+        ${showTooltip ? 'tooltip' : ''}
+        ${showControls ? 'controls' : ''}
+        ${showInput ? 'input' : ''}
+        ${disabled ? 'disabled' : ''}
+        thumb-size="${sizeLookUp[thumbSize]}"
+        ${readonly ? 'read-only' : ''}
+        >
+      </tds-slider>
+    </div>
+    
+     <!-- Script tag for demo purposes -->
+    <script>
+      slider = document.querySelector('tds-slider')
+      
+      slider.removeEventListener('tdsChange', null)
+      slider.addEventListener('tdsChange', (event) => {
+        console.log(event);
+      });
+    </script>
   `);
 export const Default = Template.bind({});

package/dist/collection/components/spinner/spinner.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
@@ -51,11 +51,11 @@ export default {
 const Template = ({ size, variant }) => {
   const sizeLookup = { 'Large': 'lg', 'Medium': 'md', 'Small': 'sm', 'Extra small': 'xs' };
   const variantLookup = { Standard: 'standard', Inverted: 'inverted' };
-  return formatHtmlPreview(`
-  <tds-spinner 
-    size="${sizeLookup[size]}"  
-    variant="${variantLookup[variant]}">
-  </tds-spinner>
+  return formatHtmlPreview(`
+  <tds-spinner 
+    size="${sizeLookup[size]}"  
+    variant="${variantLookup[variant]}">
+  </tds-spinner>
   `);
 };
 export const Default = Template.bind({});

package/dist/collection/components/stepper/stepper.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { generateUniqueId } from "../../utils/utils";
+import generateUniqueId from "../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the step elements.
  */
@@ -147,7 +147,7 @@ export class TdsStepper {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID used for internal Stepper functionality and events, must be unique.\r\n\r\n**NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,\r\nas the default ID is random and will be different every time."
+          "text": "ID used for internal Stepper functionality and events, must be unique.\n\n**NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,\nas the default ID is random and will be different every time."
         },
         "attribute": "stepper-id",
         "reflect": false,
@@ -172,7 +172,7 @@ export class TdsStepper {
           "references": {
             "InternalTdsStepperPropChange": {
               "location": "local",
-              "path": "C:/Users/nliglf/Repos/tegel/core/src/components/stepper/stepper.tsx",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/packages/core/src/components/stepper/stepper.tsx",
               "id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
             }
           }

package/dist/collection/components/stepper/stepper.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readmeStepper from "./readme.md";
 import readmeStep from "./step/readme.md";
 import { ComponentsFolder } from "../../utils/constants";
@@ -77,19 +77,19 @@ const sizeLookUp = {
   Large: 'lg',
   Small: 'sm',
 };
-const Template = ({ size, orientation, labelPosition, hideLabels }) => formatHtmlPreview(`<tds-stepper ${hideLabels ? 'hide-labels' : ''} size="${sizeLookUp[size]}" ${orientation === 'Horizontal' ? `label-position="${labelPosition === null || labelPosition === void 0 ? void 0 : labelPosition.toLowerCase()}"` : ''} orientation="${orientation.toLowerCase()}">
-    <tds-step state="success" index="1">
-      <div slot="label">Success step</div>
-    </tds-step>
-    <tds-step state="error" index="2">
-      <div slot="label">Error step</div>
-    </tds-step>
-    <tds-step state="current" index="3">
-      <div slot="label">Current step</div>
-    </tds-step>
-    <tds-step index="4">
-      <div slot="label">Upcoming step</div>
-    </tds-step>
-  </tds-stepper>
+const Template = ({ size, orientation, labelPosition, hideLabels }) => formatHtmlPreview(`<tds-stepper ${hideLabels ? 'hide-labels' : ''} size="${sizeLookUp[size]}" ${orientation === 'Horizontal' ? `label-position="${labelPosition === null || labelPosition === void 0 ? void 0 : labelPosition.toLowerCase()}"` : ''} orientation="${orientation.toLowerCase()}">
+    <tds-step state="success" index="1">
+      <div slot="label">Success step</div>
+    </tds-step>
+    <tds-step state="error" index="2">
+      <div slot="label">Error step</div>
+    </tds-step>
+    <tds-step state="current" index="3">
+      <div slot="label">Current step</div>
+    </tds-step>
+    <tds-step index="4">
+      <div slot="label">Upcoming step</div>
+    </tds-step>
+  </tds-stepper>
         `);
 export const Default = Template.bind({});

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

@@ -1,7 +1,7 @@
 // https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js
 // https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641
 import { h, Host, } from "@stencil/core";
-import { generateUniqueId } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the table contents.
  */
@@ -227,7 +227,7 @@ export class TdsTable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID used for internal Table functionality and events, must be unique.\r\n\r\n**NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,\r\nas the default ID is random and will be different every time."
+          "text": "ID used for internal Table functionality and events, must be unique.\n\n**NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,\nas the default ID is random and will be different every time."
         },
         "attribute": "table-id",
         "reflect": false,
@@ -255,7 +255,7 @@ export class TdsTable {
           "references": {
             "InternalTdsTablePropChange": {
               "location": "local",
-              "path": "C:/Users/nliglf/Repos/tegel/core/src/components/table/table/table.tsx",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/packages/core/src/components/table/table/table.tsx",
               "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
             }
           }

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

@@ -110,7 +110,7 @@ export class TdsTableBodyRow {
           "text": "Event emitted when a row is selected/deselected."
         },
         "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-body-row-expandable/table-body-row-expandable.js

@@ -90,7 +90,7 @@ export class TdsTableBodyRowExpandable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "In case that automatic count of columns does not work, user can manually set this one.\r\nTake in mind that expandable control is column too"
+          "text": "In case that automatic count of columns does not work, user can manually set this one.\nTake in mind that expandable control is column too"
         },
         "attribute": "col-span",
         "reflect": false,