@scania/tegel 1.3.3 → 1.5.0

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

@@ -3,37 +3,37 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--tds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-nav-dropdown-item-background);color:var(--tds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--tds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--tds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--tds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--tds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}:host([size=lg]){height:var(--tds-header-height)}:host([size=lg]) ::slotted(a),:host([size=lg]) ::slotted(button){padding:0 16px;color:var(--tds-header-app-launcher-item-color)}";
 
 const TdsHeaderDropdownListItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownListItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.selected = false;
-    this.size = 'md';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'component': true,
-        'component-selected': this.selected,
-      } }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get style() { return headerDropdownListItemCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.selected = false;
+        this.size = 'md';
+    }
+    render() {
+        return (h(Host, null, h("div", { class: {
+                'component': true,
+                'component-selected': this.selected,
+            } }, h("slot", null))));
+    }
+    get host() { return this; }
+    static get style() { return headerDropdownListItemCss; }
 }, [1, "tds-header-dropdown-list-item", {
-    "selected": [4],
-    "size": [513]
-  }]);
+        "selected": [4],
+        "size": [513]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-header-dropdown-list-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-header-dropdown-list-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsHeaderDropdownListItem);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-header-dropdown-list-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-header-dropdown-list-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsHeaderDropdownListItem);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

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

@@ -4,96 +4,96 @@ import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement }
 const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:unset;background-color:var(--tds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([size=lg]){width:320px}";
 
 const TdsHeaderDropdownList = /*@__PURE__*/ proxyCustomElement(class TdsHeaderDropdownList extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    // A Map to store the slots and their associated slotchange listeners.
-    this.slotListeners = new Map();
-    this.size = 'md';
-    this.headingElement = undefined;
-  }
-  componentWillLoad() {
-    const { children } = this.host;
-    // 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 ('size' in child) {
-        child.size = this.size;
-      }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // A Map to store the slots and their associated slotchange listeners.
+        this.slotListeners = new Map();
+        this.size = 'md';
+        this.headingElement = undefined;
     }
-    let listRoot = this.host;
-    if (this.host.parentElement.tagName.toLowerCase() === 'tds-header-launcher-list') {
-      listRoot = this.host.parentElement;
+    componentWillLoad() {
+        const { children } = this.host;
+        // 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 ('size' in child) {
+                child.size = this.size;
+            }
+        }
+        let listRoot = this.host;
+        if (this.host.parentElement.tagName.toLowerCase() === 'tds-header-launcher-list') {
+            listRoot = this.host.parentElement;
+        }
+        const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);
+        if (headingEl) {
+            this.headingElement = headingEl;
+        }
+        else {
+            console.warn('Heading element for list not found');
+        }
     }
-    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);
-    if (headingEl) {
-      this.headingElement = headingEl;
+    componentDidLoad() {
+        this.host.shadowRoot.querySelectorAll('slot').forEach((slot) => {
+            // Add the slotchange event listener.
+            const onSlotChange = (e) => {
+                this.processAssignedElements(e.target);
+            };
+            slot.addEventListener('slotchange', onSlotChange);
+            onSlotChange({ target: slot });
+            // Store the slot and its listener in the Map.
+            this.slotListeners.set(slot, onSlotChange);
+        });
     }
-    else {
-      console.warn('Heading element for list not found');
+    processAssignedElements(slot) {
+        const nodes = slot.assignedElements();
+        nodes.forEach((node) => {
+            // Add a listitem role to the assigned element if needed.
+            if (node.tagName.toLowerCase() !== 'li' &&
+                node.tagName.toLowerCase() !== 'slot' &&
+                node.getAttribute('role') !== 'listitem') {
+                node.setAttribute('role', 'listitem');
+            }
+            // If the assigned element is a slot, process its assigned elements recursively.
+            if (node.tagName.toLowerCase() === 'slot') {
+                this.processAssignedElements(node);
+            }
+        });
     }
-  }
-  componentDidLoad() {
-    this.host.shadowRoot.querySelectorAll('slot').forEach((slot) => {
-      // Add the slotchange event listener.
-      const onSlotChange = (e) => {
-        this.processAssignedElements(e.target);
-      };
-      slot.addEventListener('slotchange', onSlotChange);
-      onSlotChange({ target: slot });
-      // Store the slot and its listener in the Map.
-      this.slotListeners.set(slot, onSlotChange);
-    });
-  }
-  processAssignedElements(slot) {
-    const nodes = slot.assignedElements();
-    nodes.forEach((node) => {
-      // Add a listitem role to the assigned element if needed.
-      if (node.tagName.toLowerCase() !== 'li' &&
-        node.tagName.toLowerCase() !== 'slot' &&
-        node.getAttribute('role') !== 'listitem') {
-        node.setAttribute('role', 'listitem');
-      }
-      // If the assigned element is a slot, process its assigned elements recursively.
-      if (node.tagName.toLowerCase() === 'slot') {
-        this.processAssignedElements(node);
-      }
-    });
-  }
-  disconnectedCallback() {
-    this.slotListeners.forEach((listener, slot) => {
-      // Remove the slotchange event listener and delete the entry from the Map.
-      slot.removeEventListener('slotchange', listener);
-      this.slotListeners.delete(slot);
-    });
-  }
-  render() {
-    var _a;
-    const attributes = {
-      'role': 'list',
-      'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
-    };
-    return (h(Host, Object.assign({}, attributes), h("slot", null)));
-  }
-  get host() { return this; }
-  static get style() { return headerDropdownListCss; }
+    disconnectedCallback() {
+        this.slotListeners.forEach((listener, slot) => {
+            // Remove the slotchange event listener and delete the entry from the Map.
+            slot.removeEventListener('slotchange', listener);
+            this.slotListeners.delete(slot);
+        });
+    }
+    render() {
+        var _a;
+        const attributes = {
+            'role': 'list',
+            'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
+        };
+        return (h(Host, Object.assign({}, attributes), h("slot", null)));
+    }
+    get host() { return this; }
+    static get style() { return headerDropdownListCss; }
 }, [1, "tds-header-dropdown-list", {
-    "size": [513],
-    "headingElement": [32]
-  }]);
+        "size": [513],
+        "headingElement": [32]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-header-dropdown-list"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-header-dropdown-list":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsHeaderDropdownList);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-header-dropdown-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-header-dropdown-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsHeaderDropdownList);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/header-item.js

@@ -5,70 +5,70 @@ import { d as defineCustomElement$1 } from './core-header-item.js';
 const headerItemCss = ":host ::slotted(button),:host ::slotted(a){all:unset;box-sizing:border-box;background-color:var(--tds-header-background);border-right:1px solid var(--tds-header--basic-element-border);width:100%;height:100%;cursor:pointer;padding:0 24px;display:flex;align-items:center;gap:8px}:host ::slotted(button) *,:host ::slotted(a) *{box-sizing:border-box}:host ::slotted(button:hover),:host ::slotted(a:hover){background-color:var(--tds-header-item-hover)}:host ::slotted(button:focus-visible),:host ::slotted(a:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}:host .component-active ::slotted(button),:host .component-active ::slotted(a){background-color:var(--tds-header--basic-element-background-open);color:var(--tds-header-nav-item-dropdown-opened-color);border-color:var(--tds-header--basic-element-border-open)}:host .component-selected:not(.component-active) ::slotted(button),:host .component-selected:not(.component-active) ::slotted(a){background-color:var(--tds-header--basic-element-background-selected);padding-top:4px;border-bottom-style:solid;border-bottom-width:4px;border-bottom-color:var(--tds-nav-item-border-color-active)}";
 
 const TdsHeaderItem = /*@__PURE__*/ proxyCustomElement(class TdsHeaderItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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))));
-  }
-  get host() { return this; }
-  static get style() { return headerItemCss; }
+    /**
+     * 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))));
+    }
+    get host() { return this; }
+    static get style() { return headerItemCss; }
 }, [1, "tds-header-item", {
-    "active": [4],
-    "selected": [4]
-  }]);
+        "active": [4],
+        "selected": [4]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-header-item", "tds-core-header-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-header-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsHeaderItem);
-      }
-      break;
-    case "tds-core-header-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-header-item", "tds-core-header-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-header-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsHeaderItem);
+            }
+            break;
+        case "tds-core-header-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

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

@@ -7,49 +7,49 @@ import { d as defineCustomElement$1 } from './icon.js';
 const headerLauncherButtonCss = ":host{display:block}:host tds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
 
 const TdsHeaderLauncherButton = /*@__PURE__*/ proxyCustomElement(class TdsHeaderLauncherButton extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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" })))));
-  }
-  get host() { return this; }
-  static get style() { return headerLauncherButtonCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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" })))));
+    }
+    get host() { return this; }
+    static get style() { return headerLauncherButtonCss; }
 }, [1, "tds-header-launcher-button", {
-    "active": [4]
-  }]);
+        "active": [4]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-header-launcher-button", "tds-core-header-item", "tds-header-item", "tds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-header-launcher-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TdsHeaderLauncherButton);
-      }
-      break;
-    case "tds-core-header-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "tds-header-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "tds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-header-launcher-button", "tds-core-header-item", "tds-header-item", "tds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-header-launcher-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TdsHeaderLauncherButton);
+            }
+            break;
+        case "tds-core-header-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "tds-header-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "tds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/icon.js

@@ -6,57 +6,59 @@ const iconsCollection =
 const iconCss = ":host{display:inline-block;vertical-align:middle;line-height:0}:host,:host *,:host *::before,:host *::after{box-sizing:border-box}:host svg{fill:currentcolor}";
 
 const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.setIcons = () => this.arrayOfIcons.map((element) => {
-      var _a;
-      if (element.name === this.name) {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, h("title", null, (_a = this.svgTitle) !== null && _a !== void 0 ? _a : `${element.name} icon`), h("path", { fill: "currentColor", d: element.definition })));
-      }
-    });
-    this.name = 'truck';
-    this.size = '16px';
-    this.svgTitle = undefined;
-    this.icons_object = iconsCollection;
-    this.arrayOfIcons = [];
-  }
-  componentWillLoad() {
-    this.arrayDataWatcher(this.icons_object);
-  }
-  arrayDataWatcher(newValue) {
-    if (typeof newValue === 'string') {
-      this.arrayOfIcons = JSON.parse(newValue);
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.setIcons = () => this.arrayOfIcons.map((element) => {
+            var _a, _b;
+            if (element.name === this.name) {
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": (_a = this.svgTitle) !== null && _a !== void 0 ? _a : `${element.name} icon`, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, h("title", null, (_b = this.svgTitle) !== null && _b !== void 0 ? _b : `${element.name} icon`), this.svgDescription && h("desc", null, this.svgDescription), h("path", { fill: "currentColor", d: element.definition })));
+            }
+        });
+        this.name = 'truck';
+        this.size = '16px';
+        this.svgTitle = undefined;
+        this.svgDescription = undefined;
+        this.icons_object = iconsCollection;
+        this.arrayOfIcons = [];
     }
-    else {
-      this.arrayOfIcons = newValue;
+    componentWillLoad() {
+        this.arrayDataWatcher(this.icons_object);
     }
-    this.arrayOfIcons = [...this.arrayOfIcons];
-  }
-  render() {
-    return h(Host, null, this.setIcons());
-  }
-  static get style() { return iconCss; }
+    arrayDataWatcher(newValue) {
+        if (typeof newValue === 'string') {
+            this.arrayOfIcons = JSON.parse(newValue);
+        }
+        else {
+            this.arrayOfIcons = newValue;
+        }
+        this.arrayOfIcons = [...this.arrayOfIcons];
+    }
+    render() {
+        return h(Host, null, this.setIcons());
+    }
+    static get style() { return iconCss; }
 }, [1, "tds-icon", {
-    "name": [513],
-    "size": [513],
-    "svgTitle": [1, "svg-title"],
-    "icons_object": [32],
-    "arrayOfIcons": [32]
-  }]);
+        "name": [513],
+        "size": [513],
+        "svgTitle": [1, "svg-title"],
+        "svgDescription": [1, "svg-description"],
+        "icons_object": [32],
+        "arrayOfIcons": [32]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tds-icon":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Icon);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["tds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "tds-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Icon);
+            }
+            break;
+    } });
 }
 defineCustomElement();