@scania/tegel 1.0.0 → 1.0.1

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

@@ -41,14 +41,14 @@
   outline-offset: -2px;
 }
 :host .dropdown-option .multiselect {
-  padding: 0 16px;
   width: 100%;
+  height: 100%;
 }
-:host .dropdown-option .multiselect tds-checkbox,
-:host .dropdown-option .multiselect .tds-checkbox-webcomponent,
-:host .dropdown-option .multiselect label {
+:host .dropdown-option .multiselect tds-checkbox {
+  display: flex;
   height: 100%;
   width: 100%;
+  padding: 0 16px;
 }
 :host .dropdown-option:hover {
   background-color: var(--tds-dropdown-option-background-hover);

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -61,10 +61,10 @@ export class TdsDropdownOption {
     this.selected = selected;
   }
   render() {
-    return (h(Host, { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { class: `dropdown-option 
-          ${this.size}
-          ${this.selected ? 'selected' : ''}
-          ${this.disabled ? 'disabled' : ''}
+    return (h(Host, { role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { class: `dropdown-option 
+          ${this.size}
+          ${this.selected ? 'selected' : ''}
+          ${this.disabled ? 'disabled' : ''}
           ` }, this.multiselect ? (h("div", { class: "multiselect", onKeyDown: (event) => {
         if (event.key === 'Escape') {
           this.parentElement.close();
@@ -146,7 +146,7 @@ export class TdsDropdownOption {
           "text": "Click event for the Dropdown option."
         },
         "complexType": {
-          "original": "{\r\n    selected: boolean;\r\n    value: string;\r\n  }",
+          "original": "{\n    selected: boolean;\n    value: string;\n  }",
           "resolved": "{ selected: boolean; value: string; }",
           "references": {}
         }

package/dist/collection/components/dropdown/dropdown.js

@@ -215,11 +215,11 @@ export class TdsDropdown {
   render() {
     var _a, _b, _c, _d;
     appendHiddenInput(this.host, this.name, (_a = this.selection) === null || _a === void 0 ? void 0 : _a.map((item) => item.value).toString(), this.disabled);
-    return (h(Host, { role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: `filter ${this.filterFocus ? 'focus' : ''}
-            ${this.disabled ? 'disabled' : ''}` }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
-                    label-inside-as-placeholder
-                    ${this.size}
-                    ${((_b = this.selection) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
+    return (h(Host, { role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: `filter ${this.filterFocus ? 'focus' : ''}
+            ${this.disabled ? 'disabled' : ''}` }, h("div", { class: "value-wrapper" }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
+                    label-inside-as-placeholder
+                    ${this.size}
+                    ${((_b = this.selection) === null || _b === void 0 ? void 0 : _b.length) ? 'selected' : ''}
                     ` }, this.label)), h("input", {
       // eslint-disable-next-line no-return-assign
       ref: (element) => (this.inputElement = element), class: `${this.labelPosition === 'inside' ? 'placeholder' : ''}`, type: "text", placeholder: this.placeholder, value: this.getValue(), disabled: this.disabled, onInput: (event) => this.handleFilter(event), onBlur: (event) => {
@@ -242,18 +242,18 @@ export class TdsDropdown {
         if (event.key === 'Escape') {
           this.open = false;
         }
-      }, class: `
-                ${this.selection ? 'value' : 'placeholder'}
-                ${this.open ? 'open' : 'closed'}
-                ${this.error ? 'error' : ''}
-                `, disabled: this.disabled }, h("div", { class: `value-wrapper ${this.size}` }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
-                    label-inside-as-placeholder
-                    ${this.size}
-                    ${((_c = this.selection) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.selection) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { ref: (element) => (this.dropdownList = element), class: `dropdown-list
-            ${this.size}
-            ${this.open ? 'open' : 'closed'}
-            ${this.getOpenDirection()}
+      }, class: `
+                ${this.selection ? 'value' : 'placeholder'}
+                ${this.open ? 'open' : 'closed'}
+                ${this.error ? 'error' : ''}
+                `, disabled: this.disabled }, h("div", { class: `value-wrapper ${this.size}` }, this.label && this.labelPosition === 'inside' && this.placeholder && (h("div", { class: `label-inside ${this.size}` }, this.label)), this.label && this.labelPosition === 'inside' && !this.placeholder && (h("div", { class: `
+                    label-inside-as-placeholder
+                    ${this.size}
+                    ${((_c = this.selection) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.selection) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { class: `${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { ref: (element) => (this.dropdownList = element), class: `dropdown-list
+            ${this.size}
+            ${this.open ? 'open' : 'closed'}
+            ${this.getOpenDirection()}
             ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", null), this.filterResult === 0 && (h("div", { class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { name: "error", size: "16px" }), this.helper))));
   }
   static get is() { return "tds-dropdown"; }
@@ -538,7 +538,7 @@ export class TdsDropdown {
           "text": "Change event for the Dropdown."
         },
         "complexType": {
-          "original": "{\r\n    name: string;\r\n    value: string;\r\n  }",
+          "original": "{\n    name: string;\n    value: string;\n  }",
           "resolved": "{ name: string; value: string; }",
           "references": {}
         }

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

@@ -169,68 +169,68 @@ const defaultOptionLookUp = {
   'Option 4': 'option-4',
 };
 const getMultiselectDefaultValue = (multiDefaultOption) => multiDefaultOption.map((item) => defaultOptionLookUp[item]);
-const Template = ({ placeholder, labelText, labelPosition, helperText, size, error, filter, multiselect, openDirection, modeVariant, disabled, defaultOption, multiDefaultOption, }) => formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 300px;
-    height:200px;
-  }
-  </style>
-
-    <div class="demo-wrapper">
-        <tds-dropdown
+const Template = ({ placeholder, labelText, labelPosition, helperText, size, error, filter, multiselect, openDirection, modeVariant, disabled, defaultOption, multiDefaultOption, }) => formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    width: 300px;
+    height:200px;
+  }
+  </style>
+
+    <div class="demo-wrapper">
+        <tds-dropdown
         ${defaultOption && defaultOption !== 'No default'
   ? `default-value="${defaultOptionLookUp[defaultOption]}"`
-  : ''}
+  : ''}
         ${multiDefaultOption
   ? `default-value="${getMultiselectDefaultValue(multiDefaultOption)}"`
-  : ''}
-        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-          name="dropdown"
-          label="${labelText}"
+  : ''}
+        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+          name="dropdown"
+          label="${labelText}"
           ${labelPosition && labelPosition !== 'None'
   ? `label-position="${labelPosition.toLowerCase()}"`
-  : ''}
-          placeholder="${placeholder}"
-          helper="${helperText}"
-          size="${sizeLookUp[size]}"
-          ${error ? 'error' : ''}
-          ${filter ? 'filter' : ''}
-          ${multiselect ? 'multiselect' : ''}
-          ${disabled ? 'disabled' : ''}
-          open-direction="${openDirection.toLowerCase()}"
-          >
-            <tds-dropdown-option value="option-1">
-              Option 1
-            </tds-dropdown-option>
-            <tds-dropdown-option disabled value="option-2">
-              Option 2
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-3">
-              Option 3
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-4">
-              Option 4
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-5">
-              Option 5
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-6">
-              Option 6
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-7">
-              Option 7
-            </tds-dropdown-option>
-        </tds-dropdown>
-    </div>
-
-    <script>
-    dropdown = document.querySelector('tds-dropdown')
-    dropdown.addEventListener('tdsChange', (event) => {
-      console.log(event)
-    })
-    </script>
-        
+  : ''}
+          placeholder="${placeholder}"
+          helper="${helperText}"
+          size="${sizeLookUp[size]}"
+          ${error ? 'error' : ''}
+          ${filter ? 'filter' : ''}
+          ${multiselect ? 'multiselect' : ''}
+          ${disabled ? 'disabled' : ''}
+          open-direction="${openDirection.toLowerCase()}"
+          >
+            <tds-dropdown-option value="option-1">
+              Option 1
+            </tds-dropdown-option>
+            <tds-dropdown-option disabled value="option-2">
+              Option 2
+            </tds-dropdown-option>
+            <tds-dropdown-option value="option-3">
+              Option 3
+            </tds-dropdown-option>
+            <tds-dropdown-option value="option-4">
+              Option 4
+            </tds-dropdown-option>
+            <tds-dropdown-option value="option-5">
+              Option 5
+            </tds-dropdown-option>
+            <tds-dropdown-option value="option-6">
+              Option 6
+            </tds-dropdown-option>
+            <tds-dropdown-option value="option-7">
+              Option 7
+            </tds-dropdown-option>
+        </tds-dropdown>
+    </div>
+
+    <script>
+    dropdown = document.querySelector('tds-dropdown')
+    dropdown.addEventListener('tdsChange', (event) => {
+      console.log(event)
+    })
+    </script>
+        
   `);
 export const Default = Template.bind({});

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

@@ -21,8 +21,8 @@ export class TdsFooterGroup {
   render() {
     return (h(Host, null, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
         this.open = !this.open;
-      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
-            ${this.topPartGroup ? 'top-part-child' : ''}
+      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+            ${this.topPartGroup ? 'top-part-child' : ''}
             ${this.open ? 'expanded' : 'closed'}` }, h("slot", null))));
   }
   static get is() { return "tds-footer-group"; }

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

@@ -46,100 +46,100 @@ export default {
     topPart: false,
   },
 };
-const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
-    <main>
-      <div class="tds-u-p3 ">
-        <div class="tds-body-01">
-          Resize the window to see how the Footer behaves on smaller/bigger screens.
-        </div>
-      </div>
-    </main>
-    <tds-footer
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
+const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
+    <main>
+      <div class="tds-u-p3 ">
+        <div class="tds-body-01">
+          Resize the window to see how the Footer behaves on smaller/bigger screens.
+        </div>
+      </div>
+    </main>
+    <tds-footer
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
       ${topPart
-  ? `
-      <div slot="top">
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-      </div>
+  ? `
+      <div slot="top">
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+      </div>
       `
-  : ''}
-      <div slot="start">
-        <tds-footer-group>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-      </div>
-      <div slot="end">
-        <tds-footer-group>
-          <tds-footer-item >
-            <a href="#"> <tds-icon name="truck"></tds-icon></a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> <tds-icon name="truck"></tds-icon></a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> <tds-icon name="truck"></tds-icon></a>
-          </tds-footer-item>
-        </tds-footer-group>
-      </div>
-    </tds-footer>
-  
+  : ''}
+      <div slot="start">
+        <tds-footer-group>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+      </div>
+      <div slot="end">
+        <tds-footer-group>
+          <tds-footer-item >
+            <a href="#"> <tds-icon name="truck"></tds-icon></a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> <tds-icon name="truck"></tds-icon></a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> <tds-icon name="truck"></tds-icon></a>
+          </tds-footer-item>
+        </tds-footer-group>
+      </div>
+    </tds-footer>
+  
   `);
 export const Default = Template.bind({});

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

@@ -66,7 +66,7 @@ export class TdsHeaderDropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The label of the button that opens the dropdown.\r\nThis is an alternative to the label slot."
+          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
         },
         "attribute": "label",
         "reflect": false

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

@@ -68,7 +68,7 @@ export class TdsHeaderItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If the button should appear active. Can be used when the button is\r\ntriggering a dropdown, and the dropdown is open, for example."
+          "text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
         },
         "attribute": "active",
         "reflect": false,

package/dist/collection/components/header/header-launcher-button/header-launcher-button.js

@@ -35,7 +35,7 @@ export class TdsHeaderLauncherButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If the button should appear active. Can be used when the button is\r\ntriggering a dropdown, and the dropdown is open, for example."
+          "text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
         },
         "attribute": "active",
         "reflect": false,

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

@@ -47,36 +47,36 @@ export default {
   argTypes: {},
   args: {},
 };
-const Template = () => formatHtmlPreview(`
-  <tds-header>
-    <tds-header-title>
-      Example: default
-    </tds-header-title>
-
-    <tds-header-launcher slot="end">
-      <tds-header-launcher-list-title>Cool apps</tds-header-launcher-list-title>
-      <tds-header-launcher-list>
-        <tds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Trucklyfe</a>
-        </tds-header-launcher-list-item>
-        <tds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">HaulHub</a>
-        </tds-header-launcher-list-item>
-        <tds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">WheelWizz</a>
-        </tds-header-launcher-list-item>
-      </tds-header-launcher-list>
-    </tds-header-launcher>
-
-
-    <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>
-  
-  <main class="tds-u-w-100 tds-u-p3" style="box-sizing: border-box;">
-    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
-  </main>
+const Template = () => formatHtmlPreview(`
+  <tds-header>
+    <tds-header-title>
+      Example: default
+    </tds-header-title>
+
+    <tds-header-launcher slot="end">
+      <tds-header-launcher-list-title>Cool apps</tds-header-launcher-list-title>
+      <tds-header-launcher-list>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Trucklyfe</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">HaulHub</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">WheelWizz</a>
+        </tds-header-launcher-list-item>
+      </tds-header-launcher-list>
+    </tds-header-launcher>
+
+
+    <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>
+  
+  <main class="tds-u-w-100 tds-u-p3" style="box-sizing: border-box;">
+    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
+  </main>
   `);
 export const Default = Template.bind({});

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

@@ -42,7 +42,7 @@ export default {
     icon: 'truck',
   },
 };
-const IconTemplate = (args) => formatHtmlPreview(`
-  <tds-icon name="${args.icon}" size="${`${args.size.toString()}px`}"></tds-icon> 
+const IconTemplate = (args) => formatHtmlPreview(`
+  <tds-icon name="${args.icon}" size="${`${args.size.toString()}px`}"></tds-icon> 
   `);
 export const Icons = IconTemplate.bind({});