@scania/tegel 1.3.3 → 1.4.0

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

@@ -4,95 +4,95 @@ import dfs from "../../../utils/dfs";
  * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
  */
 export class TdsHeaderItem {
-  constructor() {
-    this.active = false;
-    this.selected = false;
-  }
-  updateSlotted(searchPredicate, mutationCallback) {
-    const assignedElements = this.slotEl.assignedElements({ flatten: true });
-    const firstSlottedElement = assignedElements[0];
-    if (firstSlottedElement) {
-      const foundElement = dfs(firstSlottedElement, searchPredicate);
-      if (foundElement) {
-        mutationCallback(foundElement);
-      }
+    constructor() {
+        this.active = false;
+        this.selected = false;
     }
-  }
-  /**
-   * This function is needed because we can't use CSS selectors to style something in the light dom
-   */
-  updateSlottedElements() {
-    if (this.slotEl) {
-      const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
-      const addIconClass = (element) => element.classList.add('__tds-header-item-icon');
-      this.updateSlotted(isIconOrSvg, addIconClass);
-      const isImage = (element) => element.tagName.toLowerCase() === 'img';
-      const addImageClass = (element) => element.classList.add('__tds-header-item-image');
-      this.updateSlotted(isImage, addImageClass);
+    updateSlotted(searchPredicate, mutationCallback) {
+        const assignedElements = this.slotEl.assignedElements({ flatten: true });
+        const firstSlottedElement = assignedElements[0];
+        if (firstSlottedElement) {
+            const foundElement = dfs(firstSlottedElement, searchPredicate);
+            if (foundElement) {
+                mutationCallback(foundElement);
+            }
+        }
     }
-  }
-  componentDidLoad() {
-    this.slotEl = this.host.shadowRoot.querySelector('slot');
-    this.updateSlottedElements();
-    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
-  }
-  render() {
-    return (h(Host, null, h("tds-core-header-item", { class: {
-        'component-active': this.active,
-        'component-selected': this.selected,
-      } }, h("slot", null))));
-  }
-  static get is() { return "tds-header-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "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,
-        "defaultValue": "false"
-      },
-      "selected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the button should appear selected."
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+    /**
+     * This function is needed because we can't use CSS selectors to style something in the light dom
+     */
+    updateSlottedElements() {
+        if (this.slotEl) {
+            const isIconOrSvg = (element) => element.tagName.toLowerCase() === 'tds-icon' || element.tagName.toLowerCase() === 'svg';
+            const addIconClass = (element) => element.classList.add('__tds-header-item-icon');
+            this.updateSlotted(isIconOrSvg, addIconClass);
+            const isImage = (element) => element.tagName.toLowerCase() === 'img';
+            const addImageClass = (element) => element.classList.add('__tds-header-item-image');
+            this.updateSlotted(isImage, addImageClass);
+        }
+    }
+    componentDidLoad() {
+        this.slotEl = this.host.shadowRoot.querySelector('slot');
+        this.updateSlottedElements();
+        this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+    }
+    render() {
+        return (h(Host, null, h("tds-core-header-item", { class: {
+                'component-active': this.active,
+                'component-selected': this.selected,
+            } }, h("slot", null))));
+    }
+    static get is() { return "tds-header-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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,
+                "defaultValue": "false"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If the button should appear selected."
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
 }

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

@@ -5,77 +5,77 @@ import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
  * @slot <default> - <b>Unnamed slot.</b> For a launcher list (or grid) element.
  */
 export class TdsHeaderLauncher {
-  constructor() {
-    this.uuid = generateUniqueId();
-    this.open = false;
-    this.buttonEl = undefined;
-    this.hasListTypeMenu = false;
-  }
-  onAnyClick(event) {
-    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
-    const isClickOutside = !event.composedPath().includes(this.host);
-    if (isClickOutside) {
-      this.open = false;
+    constructor() {
+        this.uuid = generateUniqueId();
+        this.open = false;
+        this.buttonEl = undefined;
+        this.hasListTypeMenu = false;
     }
-  }
-  componentDidLoad() {
-    const slotElement = this.host.shadowRoot.querySelector('slot:not([name])');
-    const slottedElements = slotElement.assignedElements();
-    const hasListTypeMenu = slottedElements.some((element) => element.tagName.toLowerCase() === 'tds-header-launcher-list');
-    if (hasListTypeMenu) {
-      this.hasListTypeMenu = true;
+    onAnyClick(event) {
+        // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+        const isClickOutside = !event.composedPath().includes(this.host);
+        if (isClickOutside) {
+            this.open = false;
+        }
+    }
+    componentDidLoad() {
+        const slotElement = this.host.shadowRoot.querySelector('slot:not([name])');
+        const slottedElements = slotElement.assignedElements();
+        const hasListTypeMenu = slottedElements.some((element) => element.tagName.toLowerCase() === 'tds-header-launcher-list');
+        if (hasListTypeMenu) {
+            this.hasListTypeMenu = true;
+        }
+    }
+    toggleLauncher() {
+        this.open = !this.open;
+    }
+    render() {
+        this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host, ['role']));
+        const buttonAttributes = Object.assign(Object.assign({}, this.ariaAttributes), { 'aria-expanded': `${this.open}`, 'aria-controls': `launcher-${this.uuid}`, 'class': 'button', 'active': this.open, 'onClick': () => {
+                this.toggleLauncher();
+            }, 'ref': (el) => {
+                this.buttonEl = el;
+            } });
+        return (h(Host, null, h("div", { class: {
+                'wrapper': true,
+                'state-open': this.open,
+                'state-list-type-menu': this.hasListTypeMenu,
+            } }, h("tds-header-launcher-button", Object.assign({}, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+                {
+                    name: 'flip',
+                    options: {
+                        fallbackPlacements: [],
+                    },
+                },
+            ] }, h("slot", null))))));
+    }
+    static get is() { return "tds-header-launcher"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header-launcher.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header-launcher.css"]
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "buttonEl": {},
+            "hasListTypeMenu": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onAnyClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
     }
-  }
-  toggleLauncher() {
-    this.open = !this.open;
-  }
-  render() {
-    this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host, ['role']));
-    const buttonAttributes = Object.assign(Object.assign({}, this.ariaAttributes), { 'aria-expanded': `${this.open}`, 'aria-controls': `launcher-${this.uuid}`, 'class': 'button', 'active': this.open, 'onClick': () => {
-        this.toggleLauncher();
-      }, 'ref': (el) => {
-        this.buttonEl = el;
-      } });
-    return (h(Host, null, h("div", { class: {
-        'wrapper': true,
-        'state-open': this.open,
-        'state-list-type-menu': this.hasListTypeMenu,
-      } }, h("tds-header-launcher-button", Object.assign({}, buttonAttributes)), this.buttonEl && (h("tds-popover-canvas", { id: `tds-launcher-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
-        {
-          name: 'flip',
-          options: {
-            fallbackPlacements: [],
-          },
-        },
-      ] }, h("slot", null))))));
-  }
-  static get is() { return "tds-header-launcher"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-launcher.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-launcher.css"]
-    };
-  }
-  static get states() {
-    return {
-      "open": {},
-      "buttonEl": {},
-      "hasListTypeMenu": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "onAnyClick",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

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

@@ -1,47 +1,47 @@
 import { h, Host } from "@stencil/core";
 import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderLauncherButton {
-  constructor() {
-    this.active = false;
-  }
-  render() {
-    this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
-    const buttonProps = Object.assign({}, this.ariaAttributes);
-    return (h(Host, null, h("tds-header-item", { active: this.active }, h("button", Object.assign({}, buttonProps), h("tds-icon", { class: "icon", name: "bento", size: "20px" })))));
-  }
-  static get is() { return "tds-header-launcher-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-launcher-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-launcher-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "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,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+    constructor() {
+        this.active = false;
+    }
+    render() {
+        this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
+        const buttonProps = Object.assign({}, this.ariaAttributes);
+        return (h(Host, null, h("tds-header-item", { active: this.active }, h("button", Object.assign({}, buttonProps), h("tds-icon", { class: "icon", name: "bento", size: "20px" })))));
+    }
+    static get is() { return "tds-header-launcher-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header-launcher-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header-launcher-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
 }

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

@@ -5,46 +5,46 @@ import isHeadingElement from "../../../utils/isHeadingElement";
  * @slot <default> - <b>Unnamed slot.</b> For a grid item element.
  */
 export class TdsHeaderLauncherGrid {
-  constructor() {
-    this.headingElement = undefined;
-  }
-  componentWillLoad() {
-    const listRoot = this.host;
-    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {
-      const e = el;
-      return isHeadingElement(e);
-    });
-    if (headingEl) {
-      this.headingElement = headingEl;
+    constructor() {
+        this.headingElement = undefined;
     }
-    else {
-      console.warn('Heading element for list not found');
+    componentWillLoad() {
+        const listRoot = this.host;
+        const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {
+            const e = el;
+            return isHeadingElement(e);
+        });
+        if (headingEl) {
+            this.headingElement = headingEl;
+        }
+        else {
+            console.warn('Heading element for list not found');
+        }
     }
-  }
-  render() {
-    var _a;
-    const listAttributes = {
-      'class': 'tds-header-launcher-grid',
-      'role': 'list',
-      'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
-    };
-    return (h(Host, null, h("div", Object.assign({}, listAttributes), h("slot", null))));
-  }
-  static get is() { return "tds-header-launcher-grid"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-launcher-grid.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-launcher-grid.css"]
-    };
-  }
-  static get states() {
-    return {
-      "headingElement": {}
-    };
-  }
-  static get elementRef() { return "host"; }
+    render() {
+        var _a;
+        const listAttributes = {
+            'class': 'tds-header-launcher-grid',
+            'role': 'list',
+            'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
+        };
+        return (h(Host, null, h("div", Object.assign({}, listAttributes), h("slot", null))));
+    }
+    static get is() { return "tds-header-launcher-grid"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header-launcher-grid.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header-launcher-grid.css"]
+        };
+    }
+    static get states() {
+        return {
+            "headingElement": {}
+        };
+    }
+    static get elementRef() { return "host"; }
 }

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

@@ -3,19 +3,19 @@ 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)));
-  }
-  static get is() { return "tds-header-launcher-grid-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-launcher-grid-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-launcher-grid-item.css"]
-    };
-  }
+    render() {
+        return (h(Host, { role: "listitem" }, h("slot", null)));
+    }
+    static get is() { return "tds-header-launcher-grid-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header-launcher-grid-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header-launcher-grid-item.css"]
+        };
+    }
 }

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

@@ -4,21 +4,21 @@ import generateUniqueId from "../../../utils/generateUniqueId";
  * @slot <default> - <b>Unnamed slot.</b> For the title text.
  */
 export class TdsHeaderLauncherGridTitle {
-  constructor() {
-    this.uuid = generateUniqueId();
-  }
-  render() {
-    return (h(Host, null, h("h3", { class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", null))));
-  }
-  static get is() { return "tds-header-launcher-grid-title"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-launcher-grid-title.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-launcher-grid-title.css"]
-    };
-  }
+    constructor() {
+        this.uuid = generateUniqueId();
+    }
+    render() {
+        return (h(Host, null, h("h3", { class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", null))));
+    }
+    static get is() { return "tds-header-launcher-grid-title"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header-launcher-grid-title.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header-launcher-grid-title.css"]
+        };
+    }
 }

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

@@ -4,11 +4,11 @@ import generateUniqueId from "../../../utils/generateUniqueId";
  * @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", { size: "lg" }, h("slot", null))));
-  }
-  static get is() { return "tds-header-launcher-list"; }
+    constructor() {
+        this.uuid = generateUniqueId();
+    }
+    render() {
+        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

@@ -3,19 +3,19 @@ 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", { size: "lg" }, h("slot", null))));
-  }
-  static get is() { return "tds-header-launcher-list-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-launcher-list-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-launcher-list-item.css"]
-    };
-  }
+    render() {
+        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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["header-launcher-list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["header-launcher-list-item.css"]
+        };
+    }
 }