@scania/tegel 0.0.8 → 0.0.9

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

@@ -0,0 +1,25 @@
+/*
+  Contains spacing variables for the layout
+*/
+:host {
+  color: var(--tds-white);
+}
+:host tds-header-item {
+  display: block;
+}
+:host .icon {
+  position: relative;
+  margin-left: -6px;
+  left: 3px;
+  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+@media screen and (min-width: 992px) {
+  :host tds-header-item {
+    display: none;
+  }
+
+  :host([persistent]) tds-header-item {
+    display: block;
+  }
+}

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

@@ -0,0 +1,21 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../utils/utils';
+export class TdsHeaderHamburger {
+  render() {
+    const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("tds-header-item", null, h("button", Object.assign({}, inheritedButtonProps), h("tds-icon", { class: "icon", name: "burger", size: "20px" })))));
+  }
+  static get is() { return "tds-header-hamburger"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-hamburger.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-hamburger.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,41 @@
+: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);
+}

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

@@ -0,0 +1,95 @@
+import { h, Host } from '@stencil/core';
+import { dfs } from '../../../utils/utils';
+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);
+      }
+    }
+  }
+  /**
+   * 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.css

@@ -0,0 +1,38 @@
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host .wrapper {
+  height: var(--tds-header-height);
+  position: relative;
+}
+:host .wrapper .menu {
+  /** Should control only height, position, and overflow here. 
+    Width and appearance are set inside nested components */
+  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: 801;
+}

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

@@ -0,0 +1,77 @@
+import { Host, h } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../utils/utils';
+export class TdsHeaderLauncher {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+    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;
+    }
+  }
+  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
+      }];
+  }
+}

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

@@ -0,0 +1,12 @@
+: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;
+}

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

@@ -0,0 +1,47 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../utils/utils';
+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"; }
+}

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

@@ -0,0 +1,11 @@
+.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;
+}

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

@@ -0,0 +1,46 @@
+import { h, Host } from '@stencil/core';
+import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement } from '../../../utils/utils';
+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;
+    }
+    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"; }
+}

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

@@ -0,0 +1,37 @@
+: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;
+}

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

@@ -0,0 +1,18 @@
+import { h, Host } from '@stencil/core';
+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"]
+    };
+  }
+}

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

@@ -0,0 +1,14 @@
+.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;
+}

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

@@ -0,0 +1,20 @@
+import { h, Host } from '@stencil/core';
+export class TdsHeaderLauncherGridTitle {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("h3", { class: "tds-header-launcher-grid-title", id: `tds-${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

@@ -0,0 +1,10 @@
+import { Host, h } from '@stencil/core';
+export class TdsHeaderLauncherList {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("tds-header-dropdown-list", { type: "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.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
+}

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

@@ -0,0 +1,18 @@
+import { h, Host } from '@stencil/core';
+export class TdsHeaderLauncherListItem {
+  render() {
+    return (h(Host, null, h("tds-header-dropdown-list-item", { type: "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"]
+    };
+  }
+}

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

@@ -0,0 +1,14 @@
+.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;
+}

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

@@ -0,0 +1,21 @@
+import { h, Host } from '@stencil/core';
+export class TdsHeaderLauncherListTitle {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-${this.uuid}` }, h("slot", null))));
+  }
+  static get is() { return "tds-header-launcher-list-title"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-launcher-list-title.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-launcher-list-title.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,21 @@
+: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;
+}

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

@@ -0,0 +1,18 @@
+import { h, Host } from '@stencil/core';
+export class TdsHeaderTitle {
+  render() {
+    return (h(Host, null, h("div", { class: "component" }, h("slot", null))));
+  }
+  static get is() { return "tds-header-title"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-title.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-title.css"]
+    };
+  }
+}