@scania/tegel 0.0.5 → 0.0.6

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

@@ -0,0 +1,78 @@
+import { Host, h } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../../utils/utils';
+export class HeaderLauncher {
+  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() === 'sdds-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("sdds-header-launcher-button", Object.assign({}, buttonAttributes)), this.buttonEl && (h("sdds-popover-canvas", { id: `sdds-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 "sdds-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
+      }];
+  }
+}
+//# sourceMappingURL=header-launcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher/header-launcher.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAc,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAO5E,MAAM,OAAO,cAAc;;IASjB,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;gBANlB,KAAK;;2BAIH,KAAK;;EAOhC,UAAU,CAAC,KAAiB;IAC1B,oGAAoG;IACpG,MAAM,cAAc,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAW,CAAC,CAAC;IACxE,IAAI,cAAc,EAAE;MAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;EACH,CAAC;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAoB,CAAC;IAC9F,MAAM,eAAe,GAAG,WAAW,CAAC,gBAAgB,EAAE,CAAC;IACvD,MAAM,eAAe,GAAG,eAAe,CAAC,IAAI,CAC1C,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,2BAA2B,CAC3E,CAAC;IAEF,IAAI,eAAe,EAAE;MACnB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;EACH,CAAC;EAED,cAAc;IACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,qBAAqB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC;IAEhG,MAAM,gBAAgB,mCACjB,IAAI,CAAC,cAAc,KACtB,eAAe,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EAC/B,eAAe,EAAE,YAAY,IAAI,CAAC,IAAI,EAAE,EACxC,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,IAAI,CAAC,IAAI,EACnB,SAAS,EAAE,GAAG,EAAE;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;MACxB,CAAC,EACD,KAAK,EAAE,CAAC,EAAuC,EAAE,EAAE;QACjD,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;MACrB,CAAC,GACF,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,SAAS,EAAE,IAAI;UACf,YAAY,EAAE,IAAI,CAAC,IAAI;UACvB,sBAAsB,EAAE,IAAI,CAAC,eAAe;SAC7C;QAED,mDAAiC,gBAAgB,EAAgC;QAEhF,IAAI,CAAC,QAAQ,IAAI,CAChB,2BACE,EAAE,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE,EAChC,KAAK,EAAC,MAAM,EACZ,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,SAAS,EAAC,cAAc,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,cAAc,EAAE,CAAC,EACjB,SAAS,EAAE;YACT;cACE,IAAI,EAAE,MAAM;cACZ,OAAO,EAAE;gBACP,kBAAkB,EAAE,EAAE;eACvB;aACF;WACF;UAED,eAAa,CACO,CACvB,CACG,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Listen, State } from '@stencil/core';\nimport { Attributes, inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher',\n  styleUrl: 'header-launcher.scss',\n  shadow: true,\n})\nexport class HeaderLauncher {\n  @Element() host: HTMLElement;\n\n  @State() open: boolean = false;\n\n  @State() buttonEl?: HTMLSddsHeaderLauncherButtonElement;\n\n  @State() hasListTypeMenu = false;\n\n  private uuid: string = crypto.randomUUID();\n\n  private ariaAttributes: Attributes;\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n    const isClickOutside = !event.composedPath().includes(this.host as any);\n    if (isClickOutside) {\n      this.open = false;\n    }\n  }\n\n  componentDidLoad() {\n    const slotElement = this.host.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n    const slottedElements = slotElement.assignedElements();\n    const hasListTypeMenu = slottedElements.some(\n      (element) => element.tagName.toLowerCase() === 'sdds-header-launcher-list',\n    );\n\n    if (hasListTypeMenu) {\n      this.hasListTypeMenu = true;\n    }\n  }\n\n  toggleLauncher() {\n    this.open = !this.open;\n  }\n\n  render() {\n    this.ariaAttributes = { ...this.ariaAttributes, ...inheritAriaAttributes(this.host, ['role']) };\n\n    const buttonAttributes = {\n      ...this.ariaAttributes,\n      'aria-expanded': `${this.open}`,\n      'aria-controls': `launcher-${this.uuid}`,\n      'class': 'button',\n      'active': this.open,\n      'onClick': () => {\n        this.toggleLauncher();\n      },\n      'ref': (el: HTMLSddsHeaderLauncherButtonElement) => {\n        this.buttonEl = el;\n      },\n    };\n\n    return (\n      <Host>\n        <div\n          class={{\n            'wrapper': true,\n            'state-open': this.open,\n            'state-list-type-menu': this.hasListTypeMenu,\n          }}\n        >\n          <sdds-header-launcher-button {...buttonAttributes}></sdds-header-launcher-button>\n\n          {this.buttonEl && (\n            <sdds-popover-canvas\n              id={`sdds-launcher-${this.uuid}`}\n              class=\"menu\"\n              referenceEl={this.buttonEl}\n              placement=\"bottom-start\"\n              show={this.open}\n              offsetDistance={0}\n              modifiers={[\n                {\n                  name: 'flip',\n                  options: {\n                    fallbackPlacements: [],\n                  },\n                },\n              ]}\n            >\n              <slot></slot>\n            </sdds-popover-canvas>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+}
+:host sdds-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/webcomponent/header-launcher-button/header-launcher-button.js

@@ -0,0 +1,48 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../../utils/utils';
+export class HeaderLauncherButton {
+  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("sdds-header-item", { active: this.active }, h("button", Object.assign({}, buttonProps), h("sdds-icon", { class: "icon", name: "bento", size: "20px" })))));
+  }
+  static get is() { return "sdds-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"; }
+}
+//# sourceMappingURL=header-launcher-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-button.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-button/header-launcher-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAc,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAO5E,MAAM,OAAO,oBAAoB;;kBAKd,KAAK;;EAItB,MAAM;IACJ,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAC;IACtF,MAAM,WAAW,qBACZ,IAAI,CAAC,cAAc,CACvB,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,wBAAkB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnC,8BAAY,WAAW;UACrB,iBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACtD,CACQ,CACd,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { Attributes, inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher-button',\n  styleUrl: 'header-launcher-button.scss',\n  shadow: true,\n})\nexport class HeaderLauncherButton {\n  @Element() host: HTMLElement;\n\n  /** If the button should appear active. Can be used when the button is\n   * triggering a dropdown, and the dropdown is open, for example. */\n  @Prop() active = false;\n\n  private ariaAttributes: Attributes;\n\n  render() {\n    this.ariaAttributes = { ...this.ariaAttributes, ...inheritAriaAttributes(this.host) };\n    const buttonProps = {\n      ...this.ariaAttributes,\n    };\n\n    return (\n      <Host>\n        <sdds-header-item active={this.active}>\n          <button {...buttonProps}>\n            <sdds-icon class=\"icon\" name=\"bento\" size=\"20px\"></sdds-icon>\n          </button>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,11 @@
+.sdds-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/webcomponent/header-launcher-grid/header-launcher-grid.js

@@ -0,0 +1,47 @@
+import { h, Host } from '@stencil/core';
+import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement, } from '../../../../utils/utils';
+export class HeaderLauncherGrid {
+  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': 'sdds-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 "sdds-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"; }
+}
+//# sourceMappingURL=header-launcher-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-grid.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-grid/header-launcher-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,wCAAwC,EACxC,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AAOjC,MAAM,OAAO,kBAAkB;;;;EAK7B,iBAAiB;IACf,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IAE3B,MAAM,SAAS,GAAG,wCAAwC,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;MAC1E,MAAM,CAAC,GAAG,EAAE,CAAC;MACb,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;KACjC;SAAM;MACL,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;KACpD;EACH,CAAC;EAED,MAAM;;IACJ,MAAM,cAAc,GAAG;MACrB,OAAO,EAAE,2BAA2B;MACpC,MAAM,EAAE,MAAM;MACd,iBAAiB,EAAE,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE;KAC3C,CAAC;IACF,OAAO,CACL,EAAC,IAAI;MACH,2BAAS,cAAc;QACrB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, State } from '@stencil/core';\nimport {\n  getPreviousNestedChildOfSiblingsMatching,\n  isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher-grid',\n  styleUrl: 'header-launcher-grid.scss',\n  shadow: false,\n})\nexport class HeaderLauncherGrid {\n  @Element() host: HTMLElement;\n\n  @State() headingElement: HTMLElement;\n\n  componentWillLoad() {\n    const listRoot = this.host;\n\n    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {\n      const e = el;\n      return isHeadingElement(e);\n    });\n\n    if (headingEl) {\n      this.headingElement = headingEl;\n    } else {\n      console.warn('Heading element for list not found');\n    }\n  }\n\n  render() {\n    const listAttributes = {\n      'class': 'sdds-header-launcher-grid',\n      'role': 'list',\n      'aria-labelledby': this.headingElement?.id,\n    };\n    return (\n      <Host>\n        <div {...listAttributes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/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(--sdds-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(--sdds-detail-05);
+  letter-spacing: var(--sdds-detail-05-ls);
+  background-color: var(--sdds-header-app-launcher-menu-bg);
+  color: var(--sdds-grey-800);
+  border-radius: 4px;
+  transition: background-color 150ms ease;
+}
+:host ::slotted(a:hover),
+:host ::slotted(button:hover) {
+  background-color: var(--sdds-grey-100);
+  cursor: pointer;
+}
+:host ::slotted(a:focus-visible),
+:host ::slotted(button:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}

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

@@ -0,0 +1,19 @@
+import { h, Host } from '@stencil/core';
+export class HeaderLauncherGridItem {
+  render() {
+    return (h(Host, { role: "listitem" }, h("slot", null)));
+  }
+  static get is() { return "sdds-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"]
+    };
+  }
+}
+//# sourceMappingURL=header-launcher-grid-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-grid-item.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,sBAAsB;EACjC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-grid-item',\n  styleUrl: 'header-launcher-grid-item.scss',\n  shadow: true,\n})\nexport class HeaderLauncherGridItem {\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,14 @@
+.sdds-header-launcher-grid-title {
+  all: unset;
+  box-sizing: border-box;
+  font: var(--sdds-detail-04);
+  letter-spacing: var(--sdds-detail-04-ls);
+  color: var(--sdds-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(--sdds-nav-dropdown-item-border-color);
+  margin: 0;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-grid-title.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,uBAAuB;EALpC;IAMU,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAW5C;EATC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,UAAI,KAAK,EAAC,iCAAiC,EAAC,EAAE,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjE,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-grid-title',\n  styleUrl: 'header-launcher-grid-title.scss',\n  shadow: false,\n})\nexport class HeaderLauncherGridTitle {\n  private uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <h3 class=\"sdds-header-launcher-grid-title\" id={`sdds-${this.uuid}`}>\n          <slot></slot>\n        </h3>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,11 @@
+import { Host, h } from '@stencil/core';
+export class HeaderLauncherList {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("sdds-header-dropdown-list", { type: "lg" }, h("slot", null))));
+  }
+  static get is() { return "sdds-header-launcher-list"; }
+}
+//# sourceMappingURL=header-launcher-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-list.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-list/header-launcher-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAMnD,MAAM,OAAO,kBAAkB;EAJ/B;IAKE,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAWpC;EATC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,iCAA2B,IAAI,EAAC,IAAI;QAClC,eAAa,CACa,CACvB,CACR,CAAC;EACJ,CAAC;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list',\n  shadow: false,\n})\nexport class HeaderLauncherList {\n  uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <sdds-header-dropdown-list type=\"lg\">\n          <slot></slot>\n        </sdds-header-dropdown-list>\n      </Host>\n    );\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,19 @@
+import { h, Host } from '@stencil/core';
+export class HeaderLauncherListItem {
+  render() {
+    return (h(Host, null, h("sdds-header-dropdown-list-item", { type: "lg" }, h("slot", null))));
+  }
+  static get is() { return "sdds-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"]
+    };
+  }
+}
+//# sourceMappingURL=header-launcher-list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-list-item.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,sBAAsB;EACjC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,sCAAgC,IAAI,EAAC,IAAI;QACvC,eAAa,CACkB,CAC5B,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list-item',\n  styleUrl: 'header-launcher-list-item.scss',\n  shadow: true,\n})\nexport class HeaderLauncherListItem {\n  render() {\n    return (\n      <Host>\n        <sdds-header-dropdown-list-item type=\"lg\">\n          <slot></slot>\n        </sdds-header-dropdown-list-item>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,14 @@
+.sdds-header-launcher-list-title {
+  all: unset;
+  box-sizing: border-box;
+  font: var(--sdds-detail-06);
+  letter-spacing: var(--sdds-detail-06-ls);
+  color: var(--sdds-header-app-launcher-category-title-color);
+  text-transform: uppercase;
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);
+  margin: 0;
+}

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

@@ -0,0 +1,22 @@
+import { h, Host } from '@stencil/core';
+export class HeaderLauncherListTitle {
+  constructor() {
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("h3", { class: "sdds-header-launcher-list-title", id: `sdds-${this.uuid}` }, h("slot", null))));
+  }
+  static get is() { return "sdds-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"; }
+}
+//# sourceMappingURL=header-launcher-list-title.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-launcher-list-title.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO5D,MAAM,OAAO,uBAAuB;EALpC;IAQU,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAW5C;EATC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,UAAI,KAAK,EAAC,iCAAiC,EAAC,EAAE,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE;QACjE,eAAa,CACV,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list-title',\n  styleUrl: 'header-launcher-list-title.scss',\n  shadow: false,\n})\nexport class HeaderLauncherListTitle {\n  @Element() host: HTMLElement;\n\n  private uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <h3 class=\"sdds-header-launcher-list-title\" id={`sdds-${this.uuid}`}>\n          <slot></slot>\n        </h3>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  flex-shrink: 1;
+  box-sizing: border-box;
+  color: var(--sdds-header-nav-item-color);
+  font-weight: normal;
+  font-family: var(--sdds-font-family-headline);
+  letter-spacing: normal;
+  position: relative;
+}
+:host .component ::after {
+  content: " ";
+  display: block;
+  height: 100%;
+  width: 24px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: linear-gradient(to right, transparent, var(--sdds-header-background));
+}
+:host slot {
+  min-width: inherit;
+  display: block;
+  align-items: center;
+  white-space: nowrap;
+  text-overflow: fade;
+  padding: 0 24px;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-title.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-title/header-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;EACtB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAC,WAAW;QACpB,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-title',\n  styleUrl: 'header-title.scss',\n  shadow: true,\n})\nexport class HeaderTitle {\n  render() {\n    return (\n      <Host>\n        <div class=\"component\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/icon/icon.js

@@ -3,7 +3,7 @@ import { h, Host } from '@stencil/core';
 import { iconsCollection } from './iconsArray';
 export class Icon {
   constructor() {
-    this.setIcons = () => this.arrayOfIcons.map(element => {
+    this.setIcons = () => this.arrayOfIcons.map((element) => {
       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 } }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
       }

package/dist/collection/components/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO/C,MAAM,OAAO,IAAI;;IAwBf,aAAQ,GAAG,GAAG,EAAE,CACd,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;MAC9B,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;QAC9B,OAAO,CACL,WAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,qBAAkB,QAAQ,OAAO,CAAC,IAAI,EAAE,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE;UAC5I,iBAAQ,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAS;UACvC,YAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAE,OAAO,CAAC,UAAU,GAAI,CAC/C,CACP,CAAC;OACH;IACH,CAAC,CAAC,CAAC;gBAhCmC,gBAAgB;gBAGhB,MAAM;wBAEd,eAAe;wBAEvB,EAAE;;EAE1B,iBAAiB;IACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC3C,CAAC;EAED,gBAAgB,CAAC,QAAgB;IAC/B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC1C;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IACD,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;EAC7C,CAAC;EAcD,MAAM;IACJ,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,QAAQ,EAAE,CAAQ,CAAC;EACxC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// Check status of webFont solution\n\nimport { Component, h, Prop, State, Host } from '@stencil/core';\n\nimport { iconsCollection } from './iconsArray';\n\n@Component({\n  tag: 'sdds-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /** Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook */\n  @Prop({ reflect: true }) name: string = 'arrow_diagonal';\n\n  /** Pass a size of icon as a string, for example: 32px, 1rem, 4em... */\n  @Prop({ reflect: true }) size: string = '16px';\n\n  @State() icons_object: string = iconsCollection;\n\n  @State() arrayOfIcons = [];\n\n  componentWillLoad() {\n    this.arrayDataWatcher(this.icons_object);\n  }\n\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.arrayOfIcons = JSON.parse(newValue);\n    } else {\n      this.arrayOfIcons = newValue;\n    }\n    this.arrayOfIcons = [...this.arrayOfIcons];\n  }\n\n  setIcons = () =>\n    this.arrayOfIcons.map(element => {\n      if (element.name === this.name) {\n        return (\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\" aria-labelledby={`icon ${element.name}`} role=\"img\" style={{ fontSize: this.size }}>\n            <title>{`icon ${element.name}`}</title>\n            <path fill=\"currentColor\" d={element.definition} />\n          </svg>\n        );\n      }\n    });\n\n  render() {\n    return <Host>{this.setIcons()}</Host>;\n  }\n}\n"]}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,mCAAmC;AAEnC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO/C,MAAM,OAAO,IAAI;;IAwBf,aAAQ,GAAG,GAAG,EAAE,CACd,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;MAChC,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;QAC9B,OAAO,CACL,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,qBACF,QAAQ,OAAO,CAAC,IAAI,EAAE,EACvC,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE;UAE9B,iBAAQ,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAS;UACvC,YAAM,IAAI,EAAC,cAAc,EAAC,CAAC,EAAE,OAAO,CAAC,UAAU,GAAI,CAC/C,CACP,CAAC;OACH;IACH,CAAC,CAAC,CAAC;gBAtCmC,gBAAgB;gBAGhB,MAAM;wBAEd,eAAe;wBAEvB,EAAE;;EAE1B,iBAAiB;IACf,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC3C,CAAC;EAED,gBAAgB,CAAC,QAAgB;IAC/B,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC1C;SAAM;MACL,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;KAC9B;IACD,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;EAC7C,CAAC;EAoBD,MAAM;IACJ,OAAO,EAAC,IAAI,QAAE,IAAI,CAAC,QAAQ,EAAE,CAAQ,CAAC;EACxC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["// Check status of webFont solution\n\nimport { Component, h, Prop, State, Host } from '@stencil/core';\n\nimport { iconsCollection } from './iconsArray';\n\n@Component({\n  tag: 'sdds-icon',\n  styleUrl: 'icon.scss',\n  shadow: true,\n})\nexport class Icon {\n  /** Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook */\n  @Prop({ reflect: true }) name: string = 'arrow_diagonal';\n\n  /** Pass a size of icon as a string, for example: 32px, 1rem, 4em... */\n  @Prop({ reflect: true }) size: string = '16px';\n\n  @State() icons_object: string = iconsCollection;\n\n  @State() arrayOfIcons = [];\n\n  componentWillLoad() {\n    this.arrayDataWatcher(this.icons_object);\n  }\n\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.arrayOfIcons = JSON.parse(newValue);\n    } else {\n      this.arrayOfIcons = newValue;\n    }\n    this.arrayOfIcons = [...this.arrayOfIcons];\n  }\n\n  setIcons = () =>\n    this.arrayOfIcons.map((element) => {\n      if (element.name === this.name) {\n        return (\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 32 32\"\n            aria-labelledby={`icon ${element.name}`}\n            role=\"img\"\n            style={{ fontSize: this.size }}\n          >\n            <title>{`icon ${element.name}`}</title>\n            <path fill=\"currentColor\" d={element.definition} />\n          </svg>\n        );\n      }\n    });\n\n  render() {\n    return <Host>{this.setIcons()}</Host>;\n  }\n}\n"]}