@scania/tegel 0.0.72 → 1.0.0

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

@@ -1,122 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class HeaderDropdown {
-  constructor() {
-    this.uuid = crypto.randomUUID();
-    this.buttonLabel = undefined;
-    this.noDropdownIcon = false;
-    this.selected = false;
-    this.open = false;
-    this.buttonEl = undefined;
-  }
-  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;
-    }
-  }
-  toggleDropdown() {
-    this.open = !this.open;
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'state-open': this.open,
-      } }, h("sdds-header-item", { class: "button", active: this.open, selected: this.selected }, h("button", { ref: (el) => {
-        this.buttonEl = el;
-      }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
-        this.toggleDropdown();
-      } }, h("slot", { name: "button-icon" }), this.buttonLabel, h("slot", { name: "button-label" }), !this.noDropdownIcon && (h("sdds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("sdds-popover-canvas", { id: `sdds-dropdown-${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 "sdds-header-dropdown"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "buttonLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the button-label slot."
-        },
-        "attribute": "button-label",
-        "reflect": false
-      },
-      "noDropdownIcon": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the dropdown icon (downwards chevron) should be hidden."
-        },
-        "attribute": "no-dropdown-icon",
-        "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 that opens the dropdown should appear selected."
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {},
-      "buttonEl": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "onAnyClick",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

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

@@ -1,19 +0,0 @@
-/** The breakpoint at which the layout changes from fixed size to full-width. */
-:host {
-  display: block;
-  width: 190px;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  border-radius: none;
-  background-color: var(--sdds-header-app-launcher-menu-bg);
-}
-@media all and (max-width: 384px) {
-  :host {
-    width: 100vw;
-  }
-}
-
-:host([type=lg]) {
-  width: 320px;
-}

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

@@ -1,113 +0,0 @@
-import { Host, h } from '@stencil/core';
-import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement, } from '../../../../utils/utils';
-export class HeaderDropdownList {
-  constructor() {
-    // A Map to store the slots and their associated slotchange listeners.
-    this.slotListeners = new Map();
-    this.type = 'md';
-    this.headingElement = undefined;
-  }
-  componentWillLoad() {
-    const { children } = this.host;
-    // Set the type 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;
-      }
-    }
-    let listRoot = this.host;
-    if (this.host.parentElement.tagName.toLowerCase() === 'sdds-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');
-    }
-  }
-  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)));
-  }
-  static get is() { return "sdds-header-dropdown-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-dropdown-list.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-dropdown-list.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'lg' | 'md'",
-          "resolved": "\"lg\" | \"md\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "'md'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "headingElement": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-}

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

@@ -1,56 +0,0 @@
-:host {
-  display: block;
-  box-sizing: border-box;
-  height: var(--sdds-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(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  background-color: var(--sdds-nav-dropdown-item-background);
-  color: var(--sdds-header-nav-item-dropdown-opened-color);
-}
-:host .component ::slotted(a:hover) {
-  background-color: var(--sdds-nav-item-background-hover);
-  cursor: pointer;
-}
-:host .component ::slotted(a:focus-visible) {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-:host .component-selected {
-  background-color: var(--sdds-nav-item-background-selected);
-  padding-right: 4px;
-  border-left-width: 4px;
-  border-left-style: solid;
-  border-left-color: var(--sdds-nav-item-border-color-active);
-}
-:host .component-selected ::slotted(a),
-:host .component-selected ::slotted(button) {
-  background-color: var(--sdds-nav-item-background-selected);
-}
-
-:host(:not(:last-child)) {
-  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);
-}
-
-:host([type=lg]) {
-  height: var(--sdds-header-height);
-}
-:host([type=lg]) ::slotted(a),
-:host([type=lg]) ::slotted(button) {
-  padding: 0 16px;
-  color: var(--sdds-header-app-launcher-item-color);
-}

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

@@ -1,66 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class HeaderDropdownListItem {
-  constructor() {
-    this.selected = false;
-    this.type = 'md';
-  }
-  render() {
-    return (h(Host, null, h("div", { class: {
-        'component': true,
-        'component-selected': this.selected,
-      } }, h("slot", null))));
-  }
-  static get is() { return "sdds-header-dropdown-list-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-dropdown-list-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-dropdown-list-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "selected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If the link should appear selected."
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The type of the list."
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "'md'"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}

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

@@ -1,32 +0,0 @@
-:host {
-  background-color: var(--sdds-header-avatar-item-background);
-  display: flex;
-  height: 84px;
-}
-:host .user-box {
-  gap: 16px;
-  width: 100%;
-  padding: 0 16px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);
-}
-:host img,
-:host slot[name=image]::slotted(*) {
-  width: 34px;
-  border-radius: 100%;
-}
-:host .user-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-:host .user-content .header {
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-}
-:host .user-content .subheader {
-  font: var(--sdds-headline-07);
-  letter-spacing: var(--sdds-headline-07-ls);
-  color: var(--sdds-header-avatar-item-color);
-}

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

@@ -1,97 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class HeaderDropdownListLgUser {
-  constructor() {
-    this.imgUrl = undefined;
-    this.imgAlt = undefined;
-    this.heading = undefined;
-    this.subheading = undefined;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: "user-box" }, this.imgUrl && h("img", { src: this.imgUrl, alt: this.imgAlt }), h("slot", { name: "image" }), h("div", { class: "user-content" }, h("div", { class: "header" }, this.heading, h("slot", { name: "heading" })), h("div", { class: "subheader" }, this.subheading, h("slot", { name: "subheading" }))))));
-  }
-  static get is() { return "sdds-header-dropdown-list-user"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["header-dropdown-list-user.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["header-dropdown-list-user.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "imgUrl": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Image URL."
-        },
-        "attribute": "img-url",
-        "reflect": false
-      },
-      "imgAlt": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Image alt text."
-        },
-        "attribute": "img-alt",
-        "reflect": false
-      },
-      "heading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Heading, usually the users first name and last name."
-        },
-        "attribute": "heading",
-        "reflect": false
-      },
-      "subheading": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Subheading."
-        },
-        "attribute": "subheading",
-        "reflect": false
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-}

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

@@ -1,25 +0,0 @@
-/*
-  Contains spacing variables for the layout
-*/
-:host {
-  color: var(--sdds-white);
-}
-:host sdds-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 sdds-header-item {
-    display: none;
-  }
-
-  :host([persistent]) sdds-header-item {
-    display: block;
-  }
-}

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

@@ -1,21 +0,0 @@
-import { h, Host } from '@stencil/core';
-import { inheritAriaAttributes } from '../../../../utils/utils';
-export class HeaderHamburger {
-  render() {
-    const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
-    return (h(Host, null, h("sdds-header-item", null, h("button", Object.assign({}, inheritedButtonProps), h("sdds-icon", { class: "icon", name: "burger", size: "20px" })))));
-  }
-  static get is() { return "sdds-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/webcomponent/header-item/header-item.css

@@ -1,41 +0,0 @@
-:host ::slotted(button),
-:host ::slotted(a) {
-  all: unset;
-  box-sizing: border-box;
-  background-color: var(--sdds-header-background);
-  border-right: 1px solid var(--sdds-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(--sdds-header-item-hover);
-}
-:host ::slotted(button:focus-visible),
-:host ::slotted(a:focus-visible) {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-:host .component-active ::slotted(button),
-:host .component-active ::slotted(a) {
-  background-color: var(--sdds-header--basic-element-background-open);
-  color: var(--sdds-header-nav-item-dropdown-opened-color);
-  border-color: var(--sdds-header--basic-element-border-open);
-}
-:host .component-selected:not(.component-active) ::slotted(button),
-:host .component-selected:not(.component-active) ::slotted(a) {
-  background-color: var(--sdds-header--basic-element-background-selected);
-  padding-top: 4px;
-  border-bottom-style: solid;
-  border-bottom-width: 4px;
-  border-bottom-color: var(--sdds-nav-item-border-color-active);
-}

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

@@ -1,95 +0,0 @@
-import { h, Host } from '@stencil/core';
-import { dfs } from '../../../../utils/utils';
-export class HeaderItem {
-  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() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';
-      const addIconClass = (element) => element.classList.add('__sdds-header-item-icon');
-      this.updateSlotted(isIconOrSvg, addIconClass);
-      const isImage = (element) => element.tagName.toLowerCase() === 'img';
-      const addImageClass = (element) => element.classList.add('__sdds-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("sdds-core-header-item", { class: {
-        'component-active': this.active,
-        'component-selected': this.selected,
-      } }, h("slot", null))));
-  }
-  static get is() { return "sdds-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"; }
-}