@scania/tegel 0.0.10 → 0.0.12

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

@@ -1,5 +1,8 @@
 import { Host, h } from '@stencil/core';
 import { appendChildElement, appendHiddenInput, findNextFocusableItem, findPreviousFocusableItem, } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For dropdown option elements.
+ */
 export class TdsDropdown {
   constructor() {
     this.connectedCallback = () => {
@@ -7,28 +10,37 @@ export class TdsDropdown {
         this.children = Array.from(this.host.children);
       }
     };
+    this.componentWillRender = () => {
+      if (!this.options) {
+        this.children = Array.from(this.host.children);
+      }
+    };
     this.setDefaultOption = () => {
       this.children = this.children.map((element) => {
         if (this.multiselect) {
-          this.defaultValue.split(',').forEach((defaultValue) => {
-            if (defaultValue === element.value) {
+          this.defaultValue.split(',').forEach((value) => {
+            if (value === element.value) {
               element.setSelected(true);
               this.selection = this.selection
                 ? [...this.selection, { value: element.value, label: element.textContent }]
                 : [{ value: element.value, label: element.textContent }];
             }
+            else {
+              element.setSelected(false);
+            }
           });
         }
         else {
           if (this.defaultValue === element.value) {
-            this.reset();
             element.setSelected(true);
             this.selection = [{ value: element.value, label: element.textContent }];
           }
+          else {
+            element.setSelected(false);
+          }
         }
         return element;
       });
-      this.handleChange();
     };
     this.getOpenDirection = () => {
       var _a, _b, _c, _d, _e;
@@ -53,14 +65,14 @@ export class TdsDropdown {
     this.handleFilter = (event) => {
       this.tdsInput.emit(event);
       const query = event.target.value.toLowerCase();
-      /* Check if the query is empty, and if so show all options */
+      /* Check if the query is empty, and if so, show all options */
       if (query === '') {
         this.children = this.children.map((element) => {
           element.removeAttribute('hidden');
           return element;
         });
         this.filterResult = null;
-        /* Hide the options that does not match the query */
+        /* Hide the options that do not match the query */
       }
       else {
         this.filterResult = this.children.filter((element) => {
@@ -107,10 +119,16 @@ export class TdsDropdown {
     this.filterResult = undefined;
     this.filterFocus = undefined;
   }
-  /** Method that resets the Dropdown. */
+  /** Method that resets the Dropdown, marks all children as non-selected and resets the value to null. */
   async reset() {
-    this.children.forEach((element) => element.setSelected(false));
+    this.children = Array.from(this.host.children)
+      .filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION')
+      .map((element) => {
+      element.setSelected(false);
+      return element;
+    });
     this.selection = null;
+    this.host.setAttribute('value', null);
     this.handleChange();
   }
   /** Method for setting the value of the Dropdown. */
@@ -122,7 +140,9 @@ export class TdsDropdown {
     }
     else {
       this.selection = [{ value: newValue, label: newValueLabel }];
-      this.children = this.children.map((element) => {
+      this.children = Array.from(this.host.children)
+        .filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION')
+        .map((element) => {
         if (element.value !== newValue) {
           element.setSelected(false);
         }
@@ -130,16 +150,20 @@ export class TdsDropdown {
       });
     }
     this.handleChange();
+    this.host.setAttribute('value', this.selection.map((selection) => selection.value).toString());
     return this.selection;
   }
   /** Method for removing a selected value in the Dropdown. */
   async removeValue(oldValue) {
     if (this.multiselect) {
-      this.children.forEach((element) => {
+      this.children = Array.from(this.host.children)
+        .filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION')
+        .map((element) => {
         if (element.value === oldValue) {
           this.selection = this.selection.filter((item) => item.value !== element.value);
           element.setSelected(false);
         }
+        return element;
       });
     }
     else {
@@ -168,7 +192,7 @@ export class TdsDropdown {
       return;
     }
     if (event.key === 'ArrowDown') {
-      /* Get the index of the currently focus index, if there is no
+      /* Get the index of the current focus index, if there is no
       nextElementSibling return the index for the first child in our Dropdown.  */
       const startingIndex = activeElement.nextElementSibling
         ? this.children.findIndex((element) => element === activeElement.nextElementSibling)
@@ -177,7 +201,7 @@ export class TdsDropdown {
       this.children[elementIndex].focus();
     }
     else if (event.key === 'ArrowUp') {
-      /* Get the index of the currently focus index, if there is no
+      /* Get the index of the current focus index, if there is no
       previousElementSibling return the index for the first last in our Dropdown.  */
       const startingIndex = activeElement.nextElementSibling
         ? this.children.findIndex((element) => element === activeElement.previousElementSibling)
@@ -189,7 +213,8 @@ export class TdsDropdown {
       this.open = false;
     }
   }
-  // If the Dropdown gets closed this sets the value of the drodpown to the current selection labels or null if no selection is made.
+  // If the Dropdown gets closed,
+  // this sets the value of the dropdown to the current selection labels or null if no selection is made.
   handleOpenState() {
     var _a, _b;
     if (this.filter && this.multiselect) {
@@ -630,12 +655,15 @@ export class TdsDropdown {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "HTMLTdsDropdownOptionElement": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Method that resets the Dropdown.",
+          "text": "Method that resets the Dropdown, marks all children as non-selected and resets the value to null.",
           "tags": []
         }
       },
@@ -674,6 +702,9 @@ export class TdsDropdown {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "HTMLTdsDropdownOptionElement": {
+              "location": "global"
             }
           },
           "return": "Promise<{ value: string; label: string; }[]>"

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

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For footer items.
+ */
 export class TdsFooterGroup {
   constructor() {
     /** If the group is placed in the main part of the Footer,

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

@@ -1,4 +1,7 @@
 import { h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For slotting a link, button, or similar.
+ */
 export class TdsFooterItem {
   constructor() {
     this.parentIsTopPart = false;

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

@@ -2,6 +2,7 @@
   display: block;
 }
 :host slot[name=top]::slotted(*) {
+  box-sizing: border-box;
   background-color: var(--tds-footer-top-background);
   padding: 40px;
   display: grid;

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

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For content.
+ */
 export class TdsCoreHeaderItem {
   render() {
     return (h(Host, null, h("div", { class: "item" }, h("slot", null))));

package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.js

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link.
+ */
 export class TdsHeaderBrandSymbol {
   render() {
     return (h(Host, null, h("tds-header-item", null, h("slot", null))));

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

@@ -27,5 +27,5 @@
 }
 :host .state-open .button {
   position: relative;
-  z-index: 801;
+  z-index: 901;
 }

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

@@ -1,6 +1,7 @@
 import { h, Host } from '@stencil/core';
 import { generateUniqueId } from '../../../utils/utils';
 /**
+ * @slot <default> - <b>Unnamed slot.</b> For injecting a dropdown list.
  * @slot icon - Slot for an Icon in the dropdown button.
  * @slot label - Slot for a label text in the dropdown button.
  */

package/dist/collection/components/header/header-dropdown-list/header-dropdown-list.css

@@ -5,7 +5,7 @@
   padding: 0;
   margin: 0;
   list-style: none;
-  border-radius: none;
+  border-radius: unset;
   background-color: var(--tds-header-app-launcher-menu-bg);
 }
 @media all and (max-width: 384px) {
@@ -14,6 +14,6 @@
   }
 }
 
-:host([type=lg]) {
+:host([size=lg]) {
   width: 320px;
 }

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

@@ -1,19 +1,22 @@
 import { Host, h } from '@stencil/core';
 import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a dropdown list item.
+ */
 export class TdsHeaderDropdownList {
   constructor() {
     // A Map to store the slots and their associated slotchange listeners.
     this.slotListeners = new Map();
-    this.type = 'md';
+    this.size = 'md';
     this.headingElement = undefined;
   }
   componentWillLoad() {
     const { children } = this.host;
-    // Set the type prop for each child, if they have such a property
+    // Set the size prop for each child, if they have such a property
     for (let i = 0; i < children.length; i++) {
       const child = children[i];
-      if ('type' in child) {
-        child.type = this.type;
+      if ('size' in child) {
+        child.size = this.size;
       }
     }
     let listRoot = this.host;
@@ -84,7 +87,7 @@ export class TdsHeaderDropdownList {
   }
   static get properties() {
     return {
-      "type": {
+      "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -96,9 +99,9 @@ export class TdsHeaderDropdownList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The size of the component."
         },
-        "attribute": "type",
+        "attribute": "size",
         "reflect": true,
         "defaultValue": "'md'"
       }

package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css

@@ -46,11 +46,11 @@
   border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
 }
 
-:host([type=lg]) {
+:host([size=lg]) {
   height: var(--tds-header-height);
 }
-:host([type=lg]) ::slotted(a),
-:host([type=lg]) ::slotted(button) {
+:host([size=lg]) ::slotted(a),
+:host([size=lg]) ::slotted(button) {
   padding: 0 16px;
   color: var(--tds-header-app-launcher-item-color);
 }

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

@@ -1,8 +1,11 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
 export class TdsHeaderDropdownListItem {
   constructor() {
     this.selected = false;
-    this.type = 'md';
+    this.size = 'md';
   }
   render() {
     return (h(Host, null, h("div", { class: {
@@ -42,7 +45,7 @@ export class TdsHeaderDropdownListItem {
         "reflect": false,
         "defaultValue": "false"
       },
-      "type": {
+      "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -54,9 +57,9 @@ export class TdsHeaderDropdownListItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The type of the list."
+          "text": "The size of the component."
         },
-        "attribute": "type",
+        "attribute": "size",
         "reflect": true,
         "defaultValue": "'md'"
       }

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

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
 import { dfs } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
 export class TdsHeaderItem {
   constructor() {
     this.active = false;

package/dist/collection/components/header/header-launcher/header-launcher.css

@@ -34,5 +34,5 @@
 }
 :host .wrapper.state-open .button {
   position: relative;
-  z-index: 801;
+  z-index: 901;
 }

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

@@ -1,5 +1,8 @@
 import { Host, h } from '@stencil/core';
 import { generateUniqueId, inheritAriaAttributes } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a launcher list (or grid) element.
+ */
 export class TdsHeaderLauncher {
   constructor() {
     this.uuid = generateUniqueId();

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

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
 import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a grid item element.
+ */
 export class TdsHeaderLauncherGrid {
   constructor() {
     this.headingElement = undefined;

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

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
 export class TdsHeaderLauncherGridItem {
   render() {
     return (h(Host, { role: "listitem" }, h("slot", null)));

package/dist/collection/components/header/header-launcher-grid-title/header-launcher-grid-title.js

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
 import { generateUniqueId } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the title text.
+ */
 export class TdsHeaderLauncherGridTitle {
   constructor() {
     this.uuid = generateUniqueId();

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

@@ -1,11 +1,14 @@
 import { Host, h } from '@stencil/core';
 import { generateUniqueId } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For list items.
+ */
 export class TdsHeaderLauncherList {
   constructor() {
     this.uuid = generateUniqueId();
   }
   render() {
-    return (h(Host, null, h("tds-header-dropdown-list", { type: "lg" }, h("slot", null))));
+    return (h(Host, null, h("tds-header-dropdown-list", { size: "lg" }, h("slot", null))));
   }
   static get is() { return "tds-header-launcher-list"; }
 }

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

@@ -1,7 +1,10 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
 export class TdsHeaderLauncherListItem {
   render() {
-    return (h(Host, null, h("tds-header-dropdown-list-item", { type: "lg" }, h("slot", null))));
+    return (h(Host, null, h("tds-header-dropdown-list-item", { size: "lg" }, h("slot", null))));
   }
   static get is() { return "tds-header-launcher-list-item"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-launcher-list-title/header-launcher-list-title.js

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
 import { generateUniqueId } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the title text.
+ */
 export class TdsHeaderLauncherListTitle {
   constructor() {
     this.uuid = generateUniqueId();

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

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the header title text.
+ */
 export class TdsHeaderTitle {
   render() {
     return (h(Host, null, h("div", { class: "component" }, h("slot", null))));

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

@@ -1,6 +1,7 @@
 import { h, Host } from '@stencil/core';
 import { inheritAriaAttributes, updateListChildrenRoles } from '../../utils/utils';
 /**
+ * @slot <default> - <b>Unnamed slot.</b> Slot for the left-aligned content consisting of buttons, dropdowns, links, etc.
  * @slot hamburger - Slot for the hamburger button for opening the mobile menu.
  * @slot title - Slot for the title.
  * @slot end - Slot for the end (right side) of the header.

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

@@ -7,6 +7,7 @@ import readmeDropdown from './header-dropdown/readme.md';
 import readmeDropdownList from './header-dropdown-list/readme.md';
 import readmeDropdownListItem from './header-dropdown-list-item/readme.md';
 import readmeDropdownListUser from './header-dropdown-list-user/readme.md';
+import readmeBrandSymbol from './header-brand-symbol/readme.md';
 import readmeLauncher from './header-launcher/readme.md';
 import { ComponentsFolder } from '../../utils/constants';
 export default {
@@ -22,6 +23,7 @@ export default {
       'Header dropdown list item': readmeDropdownListItem,
       'Header dropdown list user': readmeDropdownListUser,
       'Header launcher': readmeLauncher,
+      'Header brand symbol': readmeBrandSymbol,
     },
     layout: 'fullscreen',
     docs: {

package/dist/collection/components/link/link.js

@@ -1,4 +1,7 @@
 import { h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link element. Eg. <code>&lt;a><a></code>.
+ */
 export class TdsLink {
   constructor() {
     this.disabled = false;
@@ -8,7 +11,7 @@ export class TdsLink {
     this.host.children[0].classList.add('tds-link-component');
   }
   render() {
-    return (h("div", { class: `
+    return (h("span", { class: `        
           ${this.disabled ? 'disabled' : ''}
           ${!this.underline ? 'no-underline' : ''}
           ` }, h("slot", null)));

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

@@ -47,11 +47,13 @@ export default {
   },
 };
 const Template = ({ underline, disabled }) => formatHtmlPreview(`
-    <tds-link
+    <p class='tds-body-02'>The <tds-link
         ${disabled ? 'disabled' : ''}
         ${underline ? '' : 'underline="false"'}
         >
-        <a href="#">This is a link.</a>
-    </tds-link>
+        <a href="https://tegel.scania.com/home" target='_blank'>Tegel</a>
+    </tds-link> Design System is for digital products and services at Scania.
+     It enables an efficient development process and ensures a premium experience across all of Scania's digital touchpoints.    
+    </p>  
   `);
 export const Default = Template.bind({});

package/dist/collection/components/message/message.js

@@ -1,11 +1,11 @@
 import { Host, h } from '@stencil/core';
 /**
- * @slot <default> - Default slot for the extended message section.
+ * @slot <default> - <b>Unnamed slot.</b> For the extended message. Not visible on minimal messages.
  */
 export class TdsMessage {
   constructor() {
     this.getIconName = () => {
-      switch (this.type) {
+      switch (this.variant) {
         case 'information':
           return 'info';
         case 'error':
@@ -20,13 +20,13 @@ export class TdsMessage {
     };
     this.header = undefined;
     this.modeVariant = null;
-    this.type = 'information';
+    this.variant = 'information';
     this.noIcon = false;
     this.minimal = false;
   }
   render() {
     return (h(Host, null, h("div", { class: `
-        wrapper ${this.type}
+        wrapper ${this.variant}
         ${this.minimal ? 'minimal' : ''}
         ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, this.header && h("div", { class: "header" }, this.header), !this.minimal && (h("div", { class: "extended-message" }, h("slot", null)))))));
   }
@@ -79,7 +79,7 @@ export class TdsMessage {
         "reflect": false,
         "defaultValue": "null"
       },
-      "type": {
+      "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -91,9 +91,9 @@ export class TdsMessage {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Type of Message."
+          "text": "Variant of Message."
         },
-        "attribute": "type",
+        "attribute": "variant",
         "reflect": false,
         "defaultValue": "'information'"
       },

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

@@ -31,9 +31,9 @@ export default {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
-    messageType: {
-      name: 'Message type',
-      description: 'Changes the type of the component.',
+    messageVariant: {
+      name: 'Message variant',
+      description: 'Changes the variant of the component.',
       control: {
         type: 'radio',
       },
@@ -79,14 +79,14 @@ export default {
   },
   args: {
     modeVariant: 'Inherit from parent',
-    messageType: 'Information',
+    messageVariant: 'Information',
     header: 'Message header',
     extendedMessage: 'Longer Message text can be placed here. Longer Message text can be placed here.',
     minimal: false,
     noIcon: false,
   },
 };
-const Template = ({ modeVariant, messageType, header, extendedMessage, minimal, noIcon }) => formatHtmlPreview(`
+const Template = ({ modeVariant, messageVariant, header, extendedMessage, minimal, noIcon }) => formatHtmlPreview(`
     <style>
       .demo-wrapper {
         width: 380px;
@@ -94,7 +94,7 @@ const Template = ({ modeVariant, messageType, header, extendedMessage, minimal,
     </style>
     <div class="demo-wrapper">
       <tds-message
-          type="${messageType.toLowerCase()}"
+          variant="${messageVariant.toLowerCase()}"
           header="${header}"
           ${noIcon ? 'no-icon' : ''}
           ${minimal ? 'minimal' : ''}

package/dist/collection/components/modal/modal.css

@@ -224,7 +224,7 @@ slot[name=header]::slotted(*) {
   position: fixed;
   height: 100%;
   width: 100%;
-  z-index: 600;
+  z-index: 700;
   background-color: var(--tds-modal-backdrop);
   padding: 0 16px;
 }
@@ -303,7 +303,7 @@ button.tds-modal-close {
   position: fixed;
   height: 100%;
   width: 100%;
-  z-index: 600;
+  z-index: 700;
   background-color: var(--tds-modal-backdrop);
   padding: 0 16px;
 }

package/dist/collection/components/popover-canvas/popover-canvas.css

@@ -1,16 +1,12 @@
-:host {
+.tds-popover-canvas {
   box-sizing: border-box;
+  display: inline-block;
   color: var(--tds-popover-canvas-color);
   background-color: var(--tds-popover-canvas-background);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
-  z-index: 800;
-  display: none;
+  z-index: 900;
 }
-:host * {
+.tds-popover-canvas * {
   box-sizing: border-box;
-}
-
-:host(.tds-popover-canvas-show) {
-  display: block;
 }