@scania/tegel 1.3.3 → 1.4.0

package/dist/esm/tds-header-launcher-button.entry.js

@@ -1,20 +1,20 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7dc8c41f.js';
-import { i as inheritAriaAttributes } from './inheritAriaAttributes-d4dfca6b.js';
-import './inheritAttributes-8bb09af0.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6e6ff771.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
+import './inheritAttributes-d21e267b.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 = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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 getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
 };
 TdsHeaderLauncherButton.style = headerLauncherButtonCss;
 

package/dist/esm/tds-header-launcher-grid-item.entry.js

@@ -1,14 +1,14 @@
-import { r as registerInstance, h, H as Host } from './index-7dc8c41f.js';
+import { r as registerInstance, h, H as Host } from './index-6e6ff771.js';
 
 const headerLauncherGridItemCss = ":host{display:block;width:96px;height:96px}:host ::slotted(a),:host ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--tds-nav-item-border-color);width:100%;height:100%;border:none;padding:0 12px;display:flex;text-align:center;justify-content:center;align-items:center;flex-direction:column;gap:8px;font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);background-color:var(--tds-header-app-launcher-menu-bg);color:var(--tds-header-app-launcher-grid-color);border-radius:4px;transition:background-color 150ms ease}:host ::slotted(a:hover),:host ::slotted(button:hover){background-color:var(--tds-header-app-launcher-grid-hover-background);cursor:pointer}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
 
 const TdsHeaderLauncherGridItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("slot", null)));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { role: "listitem" }, h("slot", null)));
+    }
 };
 TdsHeaderLauncherGridItem.style = headerLauncherGridItemCss;
 

package/dist/esm/tds-header-launcher-grid-title.entry.js

@@ -1,16 +1,16 @@
-import { r as registerInstance, h, H as Host } from './index-7dc8c41f.js';
-import { g as generateUniqueId } from './generateUniqueId-c96c8ee6.js';
+import { r as registerInstance, h, H as Host } from './index-6e6ff771.js';
+import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 
 const headerLauncherGridTitleCss = ".tds-header-launcher-grid-title{all:unset;box-sizing:border-box;font:var(--tds-detail-04);letter-spacing:var(--tds-detail-04-ls);color:var(--tds-header-app-launcher-grid-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";
 
 const TdsHeaderLauncherGridTitle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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))));
+    }
 };
 TdsHeaderLauncherGridTitle.style = headerLauncherGridTitleCss;
 

package/dist/esm/tds-header-launcher-grid.entry.js

@@ -1,37 +1,37 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7dc8c41f.js';
-import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './isHeadingElement-2c158fc4.js';
-import './dfs-3f5bd9e8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6e6ff771.js';
+import { g as getPreviousNestedChildOfSiblingsMatching, i as isHeadingElement } from './isHeadingElement-8efea284.js';
+import './dfs-1e574d5f.js';
 
 const headerLauncherGridCss = ".tds-header-launcher-grid{box-sizing:border-box;padding:12px;margin:0;list-style:none;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;border-radius:none}";
 
 const TdsHeaderLauncherGrid = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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(hostRef) {
+        registerInstance(this, hostRef);
+        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))));
-  }
-  get host() { return getElement(this); }
+    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))));
+    }
+    get host() { return getElement(this); }
 };
 TdsHeaderLauncherGrid.style = headerLauncherGridCss;
 

package/dist/esm/tds-header-launcher-list-item.entry.js

@@ -1,14 +1,14 @@
-import { r as registerInstance, h, H as Host } from './index-7dc8c41f.js';
+import { r as registerInstance, h, H as Host } from './index-6e6ff771.js';
 
 const headerLauncherListItemCss = ":host{display:block;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color)}";
 
 const TdsHeaderLauncherListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("tds-header-dropdown-list-item", { size: "lg" }, h("slot", null))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, null, h("tds-header-dropdown-list-item", { size: "lg" }, h("slot", null))));
+    }
 };
 TdsHeaderLauncherListItem.style = headerLauncherListItemCss;
 

package/dist/esm/tds-header-launcher-list-title.entry.js

@@ -1,17 +1,17 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7dc8c41f.js';
-import { g as generateUniqueId } from './generateUniqueId-c96c8ee6.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6e6ff771.js';
+import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 
 const headerLauncherListTitleCss = ".tds-header-launcher-list-title{all:unset;box-sizing:border-box;font:var(--tds-detail-06);letter-spacing:var(--tds-detail-06-ls);color:var(--tds-header-app-launcher-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--tds-nav-dropdown-item-border-color);margin:0}";
 
 const TdsHeaderLauncherListTitle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.uuid = generateUniqueId();
-  }
-  render() {
-    return (h(Host, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", null))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.uuid = generateUniqueId();
+    }
+    render() {
+        return (h(Host, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", null))));
+    }
+    get host() { return getElement(this); }
 };
 TdsHeaderLauncherListTitle.style = headerLauncherListTitleCss;
 

package/dist/esm/tds-header-launcher-list.entry.js

@@ -1,14 +1,14 @@
-import { r as registerInstance, h, H as Host } from './index-7dc8c41f.js';
-import { g as generateUniqueId } from './generateUniqueId-c96c8ee6.js';
+import { r as registerInstance, h, H as Host } from './index-6e6ff771.js';
+import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
 
 const TdsHeaderLauncherList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.uuid = generateUniqueId();
-  }
-  render() {
-    return (h(Host, null, h("tds-header-dropdown-list", { size: "lg" }, h("slot", null))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.uuid = generateUniqueId();
+    }
+    render() {
+        return (h(Host, null, h("tds-header-dropdown-list", { size: "lg" }, h("slot", null))));
+    }
 };
 
 export { TdsHeaderLauncherList as tds_header_launcher_list };

package/dist/esm/tds-header-launcher.entry.js

@@ -1,57 +1,57 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7dc8c41f.js';
-import { g as generateUniqueId } from './generateUniqueId-c96c8ee6.js';
-import { i as inheritAriaAttributes } from './inheritAriaAttributes-d4dfca6b.js';
-import './inheritAttributes-8bb09af0.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6e6ff771.js';
+import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
+import './inheritAttributes-d21e267b.js';
 
 const headerLauncherCss = ":host .wrapper{height:var(--tds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--tds-header-height));box-shadow:var(--tds-nav-dropdown-menu-box);background-color:var(--tds-header-app-launcher-menu-background);border-radius:0}:host .wrapper .menu::-webkit-scrollbar{width:4px;background-color:inherit}:host .wrapper .menu::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .wrapper .menu ::-webkit-scrollbar-button{height:0;width:0}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--tds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:901}";
 
 const TdsHeaderLauncher = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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(hostRef) {
+        registerInstance(this, hostRef);
+        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;
+        }
     }
-  }
-  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))))));
-  }
-  get host() { return getElement(this); }
+    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))))));
+    }
+    get host() { return getElement(this); }
 };
 TdsHeaderLauncher.style = headerLauncherCss;
 

package/dist/esm/tds-header-title.entry.js

@@ -1,14 +1,14 @@
-import { r as registerInstance, h, H as Host } from './index-7dc8c41f.js';
+import { r as registerInstance, h, H as Host } from './index-6e6ff771.js';
 
 const headerTitleCss = ":host{display:block;flex-shrink:1;box-sizing:border-box;color:var(--tds-header-nav-item-color);font-weight:normal;font-family:var(--tds-font-family-headline);letter-spacing:normal;position:relative;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host slot{display:block;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:0 32px 0 16px}";
 
 const TdsHeaderTitle = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "component" }, h("slot", null))));
-  }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, null, h("div", { class: "component" }, h("slot", null))));
+    }
 };
 TdsHeaderTitle.style = headerTitleCss;
 

package/dist/esm/tds-header.entry.js

@@ -1,53 +1,53 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7dc8c41f.js';
-import { i as inheritAriaAttributes } from './inheritAriaAttributes-d4dfca6b.js';
-import './inheritAttributes-8bb09af0.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-6e6ff771.js';
+import { i as inheritAriaAttributes } from './inheritAriaAttributes-04f2f252.js';
+import './inheritAttributes-d21e267b.js';
 
 /**
  * Loop through the children and add the 'listitem' role if needed.
  * @param {Node} targetNode The node being updated.
  * */
 const updateListChildrenRoles = (targetNode) => {
-  targetNode.childNodes.forEach((node) => {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const element = node;
-      if (element.tagName.toLowerCase() !== 'li' && element.getAttribute('role') !== 'listitem') {
-        element.setAttribute('role', 'listitem');
-      }
-    }
-  });
+    targetNode.childNodes.forEach((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node;
+            if (element.tagName.toLowerCase() !== 'li' && element.getAttribute('role') !== 'listitem') {
+                element.setAttribute('role', 'listitem');
+            }
+        }
+    });
 };
 
 const headerCss = "html,:root{--tds-nav-dropdown-menu-box:0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);--tds-nav-dropdown-item-border-radius:0 0 4px 4px;--tds-font-family-headline:\"Scania Sans Headline\", arial, helvetica, sans-serif}tds-header{display:block;height:var(--tds-header-height);background-color:var(--tds-header-background);width:100%;z-index:300}nav{box-sizing:border-box;background-color:var(--tds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .tds-header-component-list{height:var(--tds-header-height);all:unset;display:flex;justify-content:start;align-items:center}nav tds-header-dropdown,nav tds-header-item{display:none}nav .tds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--tds-header-height);border-right:1px solid var(--tds-header--basic-element-border)}@media screen and (min-width: 992px){nav tds-header-dropdown,nav tds-header-item{display:block}}nav tds-header-item:nth-child(3),nav tds-header-dropdown:nth-child(3){border-left:1px solid var(--tds-header--basic-element-border)}";
 
 const TdsHeader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    const callback = (mutationsList) => {
-      mutationsList.forEach((mutation) => {
-        if (mutation.type === 'childList') {
-          updateListChildrenRoles(mutation.target);
-        }
-      });
-    };
-    this.observer = new MutationObserver(callback);
-  }
-  componentDidLoad() {
-    const hostElement = this.host;
-    const navElement = hostElement.querySelector('.tds-header-component-list');
-    this.observer.observe(navElement, {
-      childList: true,
-      subtree: false,
-    });
-    updateListChildrenRoles(navElement);
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-  }
-  render() {
-    const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
-    return (h(Host, null, h("slot", { name: "hamburger" }), h("slot", { name: "title" }), h("nav", Object.assign({}, navAttributes), h("ul", { class: "tds-header-component-list" }, h("slot", null), h("li", { class: "tds-header-middle-spacer" }), h("slot", { name: "end" })))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        const callback = (mutationsList) => {
+            mutationsList.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    updateListChildrenRoles(mutation.target);
+                }
+            });
+        };
+        this.observer = new MutationObserver(callback);
+    }
+    componentDidLoad() {
+        const hostElement = this.host;
+        const navElement = hostElement.querySelector('.tds-header-component-list');
+        this.observer.observe(navElement, {
+            childList: true,
+            subtree: false,
+        });
+        updateListChildrenRoles(navElement);
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+    render() {
+        const navAttributes = Object.assign({}, inheritAriaAttributes(this.host));
+        return (h(Host, null, h("slot", { name: "hamburger" }), h("slot", { name: "title" }), h("nav", Object.assign({}, navAttributes), h("ul", { class: "tds-header-component-list" }, h("slot", null), h("li", { class: "tds-header-middle-spacer" }), h("slot", { name: "end" })))));
+    }
+    get host() { return getElement(this); }
 };
 TdsHeader.style = headerCss;