@scania/tegel 1.0.0 → 1.0.3

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

@@ -1,6 +1,6 @@
 import itemReadme from "./breadcrumb/readme.md";
 import readme from "./readme.md";
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
   title: `${ComponentsFolder}/Breadcrumbs`,
@@ -20,17 +20,17 @@ export default {
     ],
   },
 };
-const Template = () => formatHtmlPreview(`   
-      <tds-breadcrumbs>
-        <tds-breadcrumb>
-          <a href="#">Page 1</a>
-        </tds-breadcrumb>
-        <tds-breadcrumb>
-          <a href="#">Page 2</a>
-        </tds-breadcrumb>
-        <tds-breadcrumb current>
-          <a href="#">Page 3</a>
-        </tds-breadcrumb>
-      </tds-breadcrumbs>
+const Template = () => formatHtmlPreview(`   
+      <tds-breadcrumbs>
+        <tds-breadcrumb>
+          <a href="#">Page 1</a>
+        </tds-breadcrumb>
+        <tds-breadcrumb>
+          <a href="#">Page 2</a>
+        </tds-breadcrumb>
+        <tds-breadcrumb current>
+          <a href="#">Page 3</a>
+        </tds-breadcrumb>
+      </tds-breadcrumbs>
       `);
 export const Default = Template.bind({});

package/dist/collection/components/button/button.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
+import hasSlot from "../../utils/hasSlot";
 /**
  * @slot label - Slot for the text injection. Serves as alternative to text prop.
  * @slot icon - Slot used to display an Icon in the Button.

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { iconsNames } from "../icon/iconsArray";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
@@ -149,36 +149,36 @@ const WebComponentTemplate = ({ modeVariant, type, variant, size, text = 'Button
     Submit: 'submit',
     Reset: 'reset',
   };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper{
-      width: 100%;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-    <tds-button
-      type='${typeLookup[type]}'
-      variant="${variantLookUp[variant]}"
-      size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
-      ${!onlyIcon ? `text="${text}"` : ''}
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper{
+      width: 100%;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+    <tds-button
+      type='${typeLookup[type]}'
+      variant="${variantLookUp[variant]}"
+      size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
+      ${!onlyIcon ? `text="${text}"` : ''}
       ${modeVariant !== 'Inherit from parent'
     ? `mode-variant="${modeVariantLookup[modeVariant]}"`
-    : ''}
-    >
+    : ''}
+    >
         ${onlyIcon || (icon && icon !== 'none')
-    ? `
-            <tds-icon slot="icon" class='tds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></tds-icon>
+    ? `
+            <tds-icon slot="icon" size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></tds-icon>
             `
-    : ''}        
-    </tds-button>
-  </div>
-  <script>
-        document.querySelector('tds-button').addEventListener('click', (event) => {
-          console.log(event)
-        })
-  </script>
+    : ''}        
+    </tds-button>
+  </div>
+  <script>
+        document.querySelector('tds-button').addEventListener('click', (event) => {
+          console.log(event)
+        })
+  </script>
   `);
 };
 /** Button as a web component */

package/dist/collection/components/card/card.css

@@ -78,6 +78,7 @@
 }
 
 button {
+  width: 100%;
   border: none;
   text-align: left;
   padding: 0;

package/dist/collection/components/card/card.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { generateUniqueId, hasSlot } from "../../utils/utils";
+import generateUniqueId from "../../utils/generateUniqueId";
+import hasSlot from "../../utils/hasSlot";
 /**
  * @slot header - Slot for the Card header.
  * @slot subheader - Slot for the Card subheader.
@@ -210,7 +211,7 @@ export class TdsCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID for the Card, must be unique.\r\n\r\n**NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card,\r\nas the default ID is random and will be different every time."
+          "text": "ID for the Card, must be unique.\n\n**NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card,\nas the default ID is random and will be different every time."
         },
         "attribute": "card-id",
         "reflect": false,
@@ -230,7 +231,7 @@ export class TdsCard {
           "text": "Sends unique Card identifier when the Card is clicked, if clickable=true"
         },
         "complexType": {
-          "original": "{\r\n    cardId: string;\r\n  }",
+          "original": "{\n    cardId: string;\n  }",
           "resolved": "{ cardId: string; }",
           "references": {}
         }

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

@@ -1,7 +1,7 @@
 import readme from "./readme.md";
 import CardPlaceholder from "../../stories/assets/image/card-placeholder.png";
 import CardBodyImage from "../../stories/assets/image/card-img.png";
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
   title: `${ComponentsFolder}/Card`,
@@ -122,42 +122,42 @@ export default {
     clickable: false,
   },
 };
-const Template = ({ modeVariant, header, subheader, thumbnail, imagePlacement, bodyImg, bodyContent, bodyDivider, cardActions, clickable, }) => formatHtmlPreview(`<style>
-    /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper {
-        width: 368px;
-    }
-    </style>
-    <div class="demo-wrapper">
-    <tds-card
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    ${header ? `header="${header}"` : ''}
-    image-placement="${imagePlacement.toLowerCase()}-header"
-    ${subheader ? `subheader="${subheader}"` : ''}
-    ${bodyImg ? `body-img="${CardBodyImage}"` : ''}
-    ${clickable ? 'clickable' : ''}
-    ${bodyDivider ? 'body-divider' : ''}
-    >
+const Template = ({ modeVariant, header, subheader, thumbnail, imagePlacement, bodyImg, bodyContent, bodyDivider, cardActions, clickable, }) => formatHtmlPreview(`<style>
+    /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper {
+        width: 368px;
+    }
+    </style>
+    <div class="demo-wrapper">
+    <tds-card
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    ${header ? `header="${header}"` : ''}
+    image-placement="${imagePlacement.toLowerCase()}-header"
+    ${subheader ? `subheader="${subheader}"` : ''}
+    ${bodyImg ? `body-img="${CardBodyImage}"` : ''}
+    ${clickable ? 'clickable' : ''}
+    ${bodyDivider ? 'body-divider' : ''}
+    >
     ${thumbnail
   ? `<img slot="thumbnail" src="${CardPlaceholder}" alt="Thumbnail for the card."/>`
-  : ''}
+  : ''}
   ${bodyContent
-  ? `
-    <div slot="body">
-        ${bodyContent}
+  ? `
+    <div slot="body">
+        ${bodyContent}
     </div>`
-  : ''}
-    ${cardActions ? `${cardActions}` : ''}
-    </tds-card>
-    </div>
+  : ''}
+    ${cardActions ? `${cardActions}` : ''}
+    </tds-card>
+    </div>
     ${clickable
-  ? `
-    <script>
-        document.addEventListener('tdsClick', (event)=>{
-            console.log('Card with id: ', event.detail.cardId, ' was clicked.')
-        })
-    </script>
+  ? `
+    <script>
+        document.addEventListener('tdsClick', (event)=>{
+            console.log('Card with id: ', event.detail.cardId, ' was clicked.')
+        })
+    </script>
     `
-  : ''}
+  : ''}
   `);
 export const Default = Template.bind({});

package/dist/collection/components/checkbox/checkbox.css

@@ -1,3 +1,9 @@
+:host {
+  align-items: center;
+  position: relative;
+  box-sizing: border-box;
+}
+
 .tds-checkbox {
   box-sizing: border-box;
   font: var(--tds-detail-02);
@@ -32,6 +38,14 @@
   display: flex;
   align-items: center;
 }
+.tds-checkbox input[type=checkbox] + label::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
 .tds-checkbox input[type=checkbox]::before, .tds-checkbox input[type=checkbox]::after {
   content: "";
   position: absolute;

package/dist/collection/components/checkbox/checkbox.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { generateUniqueId } from "../../utils/utils";
+import generateUniqueId from "../../utils/generateUniqueId";
 /**
  * @slot label - Slot for the label text.
  */
@@ -175,7 +175,7 @@ export class TdsCheckbox {
           "text": "Sends unique Checkbox identifier and checked status when it is checked/unchecked."
         },
         "complexType": {
-          "original": "{\r\n    checkboxId: string;\r\n    checked: boolean;\r\n    value?: string;\r\n  }",
+          "original": "{\n    checkboxId: string;\n    checked: boolean;\n    value?: string;\n  }",
           "resolved": "{ checkboxId: string; checked: boolean; value?: string; }",
           "references": {}
         }

package/dist/collection/components/checkbox/checkbox.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 {
@@ -54,27 +54,27 @@ export default {
     disabled: false,
   },
 };
-const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
-    <tds-checkbox
-        ${checked ? 'checked' : ''}
-        ${disabled ? 'disabled' : ''}
-        value="checkbox-value"
-        >
-        <div slot="label">${label}</div>
-    </tds-checkbox>
-    
-    <!-- Script tag with event listener for demo purposes. -->
-    <script>
-        checkboxElement = document.querySelector('tds-checkbox')
-        checkboxElement.addEventListener('tdsChange', (event) => {
-            console.log('Checkbox with id: ', event.detail.checkboxId, ' is ', event.detail.checked)
-        })
-        checkboxElement.addEventListener('tdsFocus',(event) => {
-          console.log(event)
-        })
-        checkboxElement.addEventListener('tdsBlur',(event) => {
-          console.log(event)
-        })
-    </script>
+const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
+    <tds-checkbox
+        ${checked ? 'checked' : ''}
+        ${disabled ? 'disabled' : ''}
+        value="checkbox-value"
+        >
+        <div slot="label">${label}</div>
+    </tds-checkbox>
+    
+    <!-- Script tag with event listener for demo purposes. -->
+    <script>
+        checkboxElement = document.querySelector('tds-checkbox')
+        checkboxElement.addEventListener('tdsChange', (event) => {
+            console.log('Checkbox with id: ', event.detail.checkboxId, ' is ', event.detail.checked)
+        })
+        checkboxElement.addEventListener('tdsFocus',(event) => {
+          console.log(event)
+        })
+        checkboxElement.addEventListener('tdsBlur',(event) => {
+          console.log(event)
+        })
+    </script>
   `);
 export const Default = Template.bind({});

package/dist/collection/components/chip/chip.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { generateUniqueId, hasSlot } from "../../utils/utils";
+import generateUniqueId from "../../utils/generateUniqueId";
+import hasSlot from "../../utils/hasSlot";
 /**
  * @slot prefix - Slot for the prefix icon.
  * @slot label - Slot for the label text.
@@ -115,7 +116,7 @@ export class TdsChip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "ID used for internal Chip functionality and events, must be unique.\r\n\r\n**NOTE**: If you're listening for input events, you need to set this ID yourself to identify the input,\r\nas the default ID is random and will be different every time."
+          "text": "ID used for internal Chip functionality and events, must be unique.\n\n**NOTE**: If you're listening for input events, you need to set this ID yourself to identify the input,\nas the default ID is random and will be different every time."
         },
         "attribute": "chip-id",
         "reflect": false,
@@ -184,10 +185,10 @@ export class TdsChip {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique Chip identifier and value when it is changed (checked/unchecked).\r\nValid only for type checkbox and radio.\r\nIf no ID is specified, a random one will be generated.\r\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
+          "text": "Sends unique Chip identifier and value when it is changed (checked/unchecked).\nValid only for type checkbox and radio.\nIf no ID is specified, a random one will be generated.\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
         },
         "complexType": {
-          "original": "{\r\n    chipId: string;\r\n    value: string;\r\n    checked?: boolean;\r\n  }",
+          "original": "{\n    chipId: string;\n    value: string;\n    checked?: boolean;\n  }",
           "resolved": "{ chipId: string; value: string; checked?: boolean; }",
           "references": {}
         }
@@ -199,10 +200,10 @@ export class TdsChip {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique Chip identifier when Chip is clicked.\r\nValid only for type button.\r\nIf no ID is specified, a random one will be generated.\r\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
+          "text": "Sends unique Chip identifier when Chip is clicked.\nValid only for type button.\nIf no ID is specified, a random one will be generated.\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
         },
         "complexType": {
-          "original": "{\r\n    chipId: string;\r\n  }",
+          "original": "{\n    chipId: string;\n  }",
           "resolved": "{ chipId: string; }",
           "references": {}
         }

package/dist/collection/components/chip/chip.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 {
@@ -98,133 +98,133 @@ const Template = ({ inputType, size, label, icon, iconPosition }) => {
     Large: 'lg',
     Small: 'sm',
   };
-  return formatHtmlPreview(`
+  return formatHtmlPreview(`
   ${inputType === 'Button'
-    ? `<tds-chip type="button" size="${sizeLookUp[size]}">        
+    ? `<tds-chip type="button" size="${sizeLookUp[size]}">        
             ${icon && iconPosition === 'Prefix'
       ? '<tds-icon slot="prefix" name="star" size="16px"></tds-icon>'
-      : ''}           
-            <span slot="label">                
-                ${label}                
-            </span>         
+      : ''}           
+            <span slot="label">                
+                ${label}                
+            </span>         
             ${icon && iconPosition === 'Suffix'
       ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-      : ''}          
-        </tds-chip>
-
-        <!-- Script tag for demo purposes -->
-        <script>
-          document.addEventListener('tdsClick', (event)=>{
-          console.log(event)
-          })
+      : ''}          
+        </tds-chip>
+
+        <!-- Script tag for demo purposes -->
+        <script>
+          document.addEventListener('tdsClick', (event)=>{
+          console.log(event)
+          })
         </script>`
-    : ''}
+    : ''}
   ${inputType === 'Checkbox'
-    ? ` <style>
-      /* demo-wrapper and demo-styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        gap: 8px;
-      }
-    </style>
-
-    <div class="demo-wrapper">
-      <tds-chip type="checkbox" size="${sizeLookUp[size]}" checked value="checkbox-1-value">        
+    ? ` <style>
+      /* demo-wrapper and demo-styles is for demonstration purposes only */
+      .demo-wrapper {
+        display: flex;
+        gap: 8px;
+      }
+    </style>
+
+    <div class="demo-wrapper">
+      <tds-chip type="checkbox" size="${sizeLookUp[size]}" checked value="checkbox-1-value">        
           ${icon && iconPosition === 'Prefix'
       ? '<tds-icon slot="prefix" name="heart" size="16px"></tds-icon>'
-      : ''}
-          <span slot="label">
-            ${label} 1
-          </span>
+      : ''}
+          <span slot="label">
+            ${label} 1
+          </span>
           ${icon && iconPosition === 'Suffix'
       ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-      : ''}        
-      </tds-chip>
-      <tds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-2-value">
+      : ''}        
+      </tds-chip>
+      <tds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-2-value">
         ${icon && iconPosition === 'Prefix'
       ? '<tds-icon slot="prefix" name="email" size="16px"></tds-icon>'
-      : ''}
-          <span slot="label">
-            ${label} 2
-          </span>
+      : ''}
+          <span slot="label">
+            ${label} 2
+          </span>
           ${icon && iconPosition === 'Suffix'
       ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-      : ''} 
-      </tds-chip>
-      <tds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-3-value">
+      : ''} 
+      </tds-chip>
+      <tds-chip type="checkbox" size="${sizeLookUp[size]}" value="checkbox-3-value">
         ${icon && iconPosition === 'Prefix'
       ? '<tds-icon slot="prefix" name="smartphone" size="16px"></tds-icon>'
-      : ''}
-          <span slot="label">
-            ${label} 3
-          </span>
+      : ''}
+          <span slot="label">
+            ${label} 3
+          </span>
           ${icon && iconPosition === 'Suffix'
       ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-      : ''} 
-      </tds-chip>
-    </div>
-
-    <!-- Script tag for demo purposes -->
-    <script>
-      document.addEventListener('tdsChange', (event)=>{
-          console.log(event)
-      })
+      : ''} 
+      </tds-chip>
+    </div>
+
+    <!-- Script tag for demo purposes -->
+    <script>
+      document.addEventListener('tdsChange', (event)=>{
+          console.log(event)
+      })
     </script>`
-    : ''}
+    : ''}
   ${inputType === 'Radio'
-    ? ` <style>
-      /* demo-wrapper and demo-styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        gap: 8px;
-      }
-    </style>
-
-    <div class="demo-wrapper">
-      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-1-value">
+    ? ` <style>
+      /* demo-wrapper and demo-styles is for demonstration purposes only */
+      .demo-wrapper {
+        display: flex;
+        gap: 8px;
+      }
+    </style>
+
+    <div class="demo-wrapper">
+      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-1-value">
         ${icon && iconPosition === 'Prefix'
       ? '<tds-icon slot="prefix" name="sorting" size="16px"></tds-icon>'
-      : ''}
-          <span slot="label">
-            ${label} 1
-          </span>
+      : ''}
+          <span slot="label">
+            ${label} 1
+          </span>
           ${icon && iconPosition === 'Suffix'
       ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-      : ''} 
-      </tds-chip>
-      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" checked value="radio-2-value">
+      : ''} 
+      </tds-chip>
+      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" checked value="radio-2-value">
         ${icon && iconPosition === 'Prefix'
       ? '<tds-icon slot="prefix" name="cart" size="16px"></tds-icon>'
-      : ''}
-          <span slot="label">
-            ${label} 2
-          </span>
+      : ''}
+          <span slot="label">
+            ${label} 2
+          </span>
           ${icon && iconPosition === 'Suffix'
       ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-      : ''} 
-      </tds-chip>
-      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-3-value">
+      : ''} 
+      </tds-chip>
+      <tds-chip name="test" type="radio" size="${sizeLookUp[size]}" value="radio-3-value">
         ${icon && iconPosition === 'Prefix'
       ? '<tds-icon slot="prefix" name="star" size="16px"></tds-icon>'
-      : ''}
-          <span slot="label">
-            ${label} 3
-          </span>
+      : ''}
+          <span slot="label">
+            ${label} 3
+          </span>
           ${icon && iconPosition === 'Suffix'
       ? '<tds-icon slot="suffix" name="cross" size="16px"></tds-icon>'
-      : ''} 
-      </tds-chip>
-    </div>
-
-    <!-- Script tag for demo purposes -->
-    <script>
-      document.addEventListener('tdsChange', (event)=>{
-          console.log(event)
-      })
+      : ''} 
+      </tds-chip>
+    </div>
+
+    <!-- Script tag for demo purposes -->
+    <script>
+      document.addEventListener('tdsChange', (event)=>{
+          console.log(event)
+      })
     </script>`
-    : ''}
-
-
+    : ''}
+
+
   `);
 };
 export const Default = Template.bind({});

package/dist/collection/components/datetime/datetime.js

@@ -76,17 +76,17 @@ export class TdsDatetime {
     if (this.size === 'sm') {
       className += `${className}-sm`;
     }
-    return (h("div", { class: `
-        ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
-        ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
-        ${this.value.length > 0 ? 'tds-datetime-data' : ''}
-        ${this.disabled ? 'tds-form-datetime-disabled' : ''}
-        ${this.size === 'md' ? 'tds-form-datetime-md' : ''}
-        ${this.size === 'sm' ? 'tds-form-datetime-sm' : ''}
+    return (h("div", { class: `
+        ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
+        ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
+        ${this.value.length > 0 ? 'tds-datetime-data' : ''}
+        ${this.disabled ? 'tds-form-datetime-disabled' : ''}
+        ${this.size === 'md' ? 'tds-form-datetime-md' : ''}
+        ${this.size === 'sm' ? 'tds-form-datetime-sm' : ''}
         ${this.state === 'error' || this.state === 'success'
         ? `tds-form-datetime-${this.state}`
-        : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), h("div", { class: "tds-datetime-helper" }, this.helper && (h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
+        : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), this.helper && (h("div", { class: "tds-datetime-helper" }, h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
   }
   static get is() { return "tds-datetime"; }
   static get encapsulation() { return "scoped"; }