@scania/tegel 0.0.51 → 0.0.61

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

@@ -0,0 +1,49 @@
+/*
+  Contains spacing variables for the layout
+*/
+sdds-header {
+  display: block;
+  height: var(--sdds-header-height);
+  background-color: var(--sdds-header-background);
+  width: 100%;
+  z-index: 300;
+}
+
+nav {
+  box-sizing: border-box;
+  background-color: var(--sdds-header-background);
+  width: 100%;
+  display: block;
+}
+nav * {
+  box-sizing: border-box;
+}
+nav .sdds-header-component-list {
+  height: var(--sdds-header-height);
+  all: unset;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+nav sdds-header-dropdown,
+nav sdds-header-item {
+  display: none;
+}
+nav .sdds-header-middle-spacer {
+  all: unset;
+  display: block;
+  flex-grow: 1;
+  height: var(--sdds-header-height);
+  border-right: 1px solid var(--sdds-header--basic-element-border);
+}
+@media screen and (min-width: 992px) {
+  nav sdds-header-dropdown,
+nav sdds-header-item {
+    display: block;
+  }
+}
+nav sdds-header-item:nth-child(3),
+nav sdds-header-dropdown:nth-child(3) {
+  /* Adds a left border to the button after the title, if any */
+  border-left: 1px solid var(--sdds-header--basic-element-border);
+}

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

@@ -0,0 +1,43 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';
+export class SddsHeader {
+  constructor() {
+    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('.sdds-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: "sdds-header-component-list" }, h("slot", null), h("li", { class: "sdds-header-middle-spacer" }), h("slot", { name: "end" })))));
+  }
+  static get is() { return "sdds-header"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["header-component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header-component.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=header-component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-component.js","sourceRoot":"","sources":["../../../../src/components/header/webcomponent/header-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAOtF,MAAM,OAAO,UAAU;EAKrB;IACE,MAAM,QAAQ,GAAqB,CAAC,aAAa,EAAE,EAAE;MACnD,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;QACjC,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;UACjC,uBAAuB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SAC1C;MACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC;EACjD,CAAC;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;IAC9B,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAE5E,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE;MAChC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,uBAAuB,CAAC,UAAU,CAAC,CAAC;EACtC,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;EAC7B,CAAC;EAED,MAAM;IACJ,MAAM,aAAa,qBACd,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,YAAM,IAAI,EAAC,WAAW,GAAQ;MAC9B,YAAM,IAAI,EAAC,OAAO,GAAQ;MAC1B,2BAAS,aAAa;QACpB,UAAI,KAAK,EAAC,4BAA4B;UACpC,eAAa;UACb,UAAI,KAAK,EAAC,2BAA2B,GAAM;UAC3C,YAAM,IAAI,EAAC,KAAK,GAAQ,CACrB,CACD,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Element } from '@stencil/core';\nimport { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header',\n  styleUrl: 'header-component.scss',\n  shadow: false,\n})\nexport class SddsHeader {\n  @Element() host: HTMLElement;\n\n  private observer: MutationObserver;\n\n  constructor() {\n    const callback: MutationCallback = (mutationsList) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          updateListChildrenRoles(mutation.target);\n        }\n      });\n    };\n\n    this.observer = new MutationObserver(callback);\n  }\n\n  componentDidLoad() {\n    const hostElement = this.host;\n    const navElement = hostElement.querySelector('.sdds-header-component-list');\n\n    this.observer.observe(navElement, {\n      childList: true,\n      subtree: false,\n    });\n\n    updateListChildrenRoles(navElement);\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  render() {\n    const navAttributes = {\n      ...inheritAriaAttributes(this.host),\n    };\n\n    return (\n      <Host>\n        <slot name=\"hamburger\"></slot>\n        <slot name=\"title\"></slot>\n        <nav {...navAttributes}>\n          <ul class=\"sdds-header-component-list\">\n            <slot></slot>\n            <li class=\"sdds-header-middle-spacer\"></li>\n            <slot name=\"end\"></slot>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/header/webcomponent/header-default.stories.js

@@ -0,0 +1,79 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+import readmeHamburger from './header-hamburger/readme.md';
+import readmeTitle from './header-title/readme.md';
+import readmeItem from './header-item/readme.md';
+import readmeDropdown from './header-dropdown/readme.md';
+import readmeDropdownList from './header-dropdown-list/readme.md';
+import readmeDropdownListItem from './header-dropdown-list-item/readme.md';
+import readmeDropdownListUser from './header-dropdown-list-user/readme.md';
+import readmeLauncher from './header-launcher/readme.md';
+export default {
+  title: 'Components/Header/Web Component',
+  parameters: {
+    notes: {
+      'Header': readme,
+      'Header hamburger': readmeHamburger,
+      'Header title': readmeTitle,
+      'Header item': readmeItem,
+      'Header dropdown': readmeDropdown,
+      'Header dropdown list': readmeDropdownList,
+      'Header dropdown list item': readmeDropdownListItem,
+      'Header dropdown list user': readmeDropdownListUser,
+      'Header launcher': readmeLauncher,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {},
+  args: {},
+};
+const Template = () => formatHtmlPreview(`
+  <sdds-header>
+    <sdds-header-title>
+      Example: default
+    </sdds-header-title>
+
+    <sdds-header-launcher slot="end">
+      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>
+      <sdds-header-launcher-list>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Trucklyfe</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">HaulHub</a>
+        </sdds-header-launcher-list-item>
+        <sdds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">WheelWizz</a>
+        </sdds-header-launcher-list-item>
+      </sdds-header-launcher-list>
+    </sdds-header-launcher>
+
+
+    <sdds-header-brand-symbol slot="end" link-href="https://scania.com" aria-label="Scania - red gryphon on blue shield">
+    </sdds-header-brand-symbol>
+
+  </sdds-header>
+  
+  <main class="sdds-u-w-100 sdds-u-p3" style="box-sizing: border-box;">
+    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
+  </main>
+  `);
+export const Default = Template.bind({});
+//# sourceMappingURL=header-default.stories.js.map

package/dist/collection/components/header/webcomponent/header-default.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-default.stories.js","sourceRoot":"","sources":["../../../../src/components/header/webcomponent/header-default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,kBAAkB,MAAM,kCAAkC,CAAC;AAClE,OAAO,sBAAsB,MAAM,uCAAuC,CAAC;AAC3E,OAAO,sBAAsB,MAAM,uCAAuC,CAAC;AAC3E,OAAO,cAAc,MAAM,6BAA6B,CAAC;AAEzD,eAAe;EACb,KAAK,EAAE,iCAAiC;EACxC,UAAU,EAAE;IACV,KAAK,EAAE;MACL,QAAQ,EAAE,MAAM;MAChB,kBAAkB,EAAE,eAAe;MACnC,cAAc,EAAE,WAAW;MAC3B,aAAa,EAAE,UAAU;MACzB,iBAAiB,EAAE,cAAc;MACjC,sBAAsB,EAAE,kBAAkB;MAC1C,2BAA2B,EAAE,sBAAsB;MACnD,2BAA2B,EAAE,sBAAsB;MACnD,iBAAiB,EAAE,cAAc;KAClC;IACD,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE,EAAE;EACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BD,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\nimport readmeHamburger from './header-hamburger/readme.md';\nimport readmeTitle from './header-title/readme.md';\nimport readmeItem from './header-item/readme.md';\nimport readmeDropdown from './header-dropdown/readme.md';\nimport readmeDropdownList from './header-dropdown-list/readme.md';\nimport readmeDropdownListItem from './header-dropdown-list-item/readme.md';\nimport readmeDropdownListUser from './header-dropdown-list-user/readme.md';\nimport readmeLauncher from './header-launcher/readme.md';\n\nexport default {\n  title: 'Components/Header/Web Component',\n  parameters: {\n    notes: {\n      'Header': readme,\n      'Header hamburger': readmeHamburger,\n      'Header title': readmeTitle,\n      'Header item': readmeItem,\n      'Header dropdown': readmeDropdown,\n      'Header dropdown list': readmeDropdownList,\n      'Header dropdown list item': readmeDropdownListItem,\n      'Header dropdown list user': readmeDropdownListUser,\n      'Header launcher': readmeLauncher,\n    },\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {},\n  args: {},\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `\n  <sdds-header>\n    <sdds-header-title>\n      Example: default\n    </sdds-header-title>\n\n    <sdds-header-launcher slot=\"end\">\n      <sdds-header-launcher-list-title>Cool apps</sdds-header-launcher-list-title>\n      <sdds-header-launcher-list>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">Trucklyfe</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">HaulHub</a>\n        </sdds-header-launcher-list-item>\n        <sdds-header-launcher-list-item>\n          <a href=\"https://tegel.scania.com\">WheelWizz</a>\n        </sdds-header-launcher-list-item>\n      </sdds-header-launcher-list>\n    </sdds-header-launcher>\n\n\n    <sdds-header-brand-symbol slot=\"end\" link-href=\"https://scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n    </sdds-header-brand-symbol>\n\n  </sdds-header>\n  \n  <main class=\"sdds-u-w-100 sdds-u-p3\" style=\"box-sizing: border-box;\">\n    <p>Find complete examples under the <a href=\"/?path=/story/patterns-navigation--basic\">Patterns section</a>.</p>\n  </main>\n  `,\n  );\n\nexport const Default = Template.bind({});\n"]}

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

@@ -0,0 +1,31 @@
+:host {
+  height: var(--sdds-header-height);
+  position: relative;
+}
+:host .menu {
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: calc(100vh - var(--sdds-header-height));
+  box-shadow: var(--sdds-nav-dropdown-menu-box);
+  background-color: var(--sdds-header-app-launcher-menu-background);
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+:host .menu::-webkit-scrollbar {
+  width: 4px;
+  background-color: inherit;
+}
+:host .menu::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-300);
+}
+:host .menu ::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+:host .state-open .dropdown-icon {
+  transform: rotateZ(180deg);
+}
+:host .state-open .button {
+  position: relative;
+  z-index: 801;
+}

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

@@ -0,0 +1,123 @@
+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
+      }];
+  }
+}
+//# sourceMappingURL=header-dropdown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-dropdown.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-dropdown/header-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,cAAc;;IAiBjB,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;;0BATT,KAAK;oBAGX,KAAK;gBAER,KAAK;;;EAO9B,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,cAAc;IACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,YAAY,EAAE,IAAI,CAAC,IAAI;SACxB;QAED,wBAAkB,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;UACzE,cACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE;cACV,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;YACrB,CAAC,mBACc,GAAG,IAAI,CAAC,IAAI,EAAE,mBACd,YAAY,IAAI,CAAC,IAAI,EAAE,kBACxB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,EAClD,OAAO,EAAE,GAAG,EAAE;cACZ,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,CAAC;YAED,YAAM,IAAI,EAAC,aAAa,GAAQ;YAC/B,IAAI,CAAC,WAAW;YACjB,YAAM,IAAI,EAAC,cAAc,GAAQ;YAChC,CAAC,IAAI,CAAC,cAAc,IAAI,CACvB,iBAAW,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAC9E,CACM,CACQ;QAClB,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, Element, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown',\n  styleUrl: 'header-dropdown.scss',\n  shadow: true,\n})\nexport class HeaderDropdown {\n  @Element() host: HTMLElement;\n\n  /** The label of the button that opens the dropdown.\n   * This is an alternative to the button-label slot. */\n  @Prop() buttonLabel: string;\n\n  /** If the dropdown icon (downwards chevron) should be hidden. */\n  @Prop() noDropdownIcon: boolean = false;\n\n  /** If the button that opens the dropdown should appear selected. */\n  @Prop() selected: boolean = false;\n\n  @State() open: boolean = false;\n\n  @State() buttonEl?: HTMLButtonElement;\n\n  private uuid: string = crypto.randomUUID();\n\n  @Listen('click', { target: 'document' })\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  toggleDropdown() {\n    this.open = !this.open;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'state-open': this.open,\n          }}\n        >\n          <sdds-header-item class=\"button\" active={this.open} selected={this.selected}>\n            <button\n              ref={(el) => {\n                this.buttonEl = el;\n              }}\n              aria-expanded={`${this.open}`}\n              aria-controls={`launcher-${this.uuid}`}\n              aria-current={this.selected ? 'location' : 'false'}\n              onClick={() => {\n                this.toggleDropdown();\n              }}\n            >\n              <slot name=\"button-icon\"></slot>\n              {this.buttonLabel}\n              <slot name=\"button-label\"></slot>\n              {!this.noDropdownIcon && (\n                <sdds-icon class=\"dropdown-icon\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n              )}\n            </button>\n          </sdds-header-item>\n          {this.buttonEl && (\n            <sdds-popover-canvas\n              id={`sdds-dropdown-${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-dropdown-list/header-dropdown-list.css

@@ -0,0 +1,19 @@
+/** 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

@@ -0,0 +1,114 @@
+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"; }
+}
+//# sourceMappingURL=header-dropdown-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-dropdown-list.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-dropdown-list/header-dropdown-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, State } from '@stencil/core';\nimport {\n  getPreviousNestedChildOfSiblingsMatching,\n  isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-dropdown-list',\n  styleUrl: 'header-dropdown-list.scss',\n  shadow: true,\n})\nexport class HeaderDropdownList {\n  @Element() host: HTMLElement;\n\n  // A Map to store the slots and their associated slotchange listeners.\n  private slotListeners: Map<HTMLSlotElement, EventListener> = new Map();\n\n  @Prop({ reflect: true }) type: 'lg' | 'md' = 'md';\n\n  @State() headingElement: HTMLElement;\n\n  componentWillLoad() {\n    const { children } = this.host;\n\n    // Set the type prop for each child, if they have such a property\n    for (let i = 0; i < children.length; i++) {\n      const child = children[i] as any;\n\n      if ('type' in child) {\n        child.type = this.type;\n      }\n    }\n\n    let listRoot = this.host;\n    if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {\n      listRoot = this.host.parentElement;\n    }\n\n    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);\n\n    if (headingEl) {\n      this.headingElement = headingEl;\n    } else {\n      console.warn('Heading element for list not found');\n    }\n  }\n\n  componentDidLoad() {\n    this.host.shadowRoot.querySelectorAll('slot').forEach((slot: HTMLSlotElement) => {\n      // Add the slotchange event listener.\n      const onSlotChange: EventListener = (e: Event) => {\n        this.processAssignedElements(e.target as HTMLSlotElement);\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      onSlotChange({ target: slot } as unknown as Event);\n\n      // Store the slot and its listener in the Map.\n      this.slotListeners.set(slot, onSlotChange);\n    });\n  }\n\n  processAssignedElements(slot: HTMLSlotElement): void {\n    const nodes: Element[] = slot.assignedElements();\n    nodes.forEach((node: Element) => {\n      // Add a listitem role to the assigned element if needed.\n      if (\n        node.tagName.toLowerCase() !== 'li' &&\n        node.tagName.toLowerCase() !== 'slot' &&\n        node.getAttribute('role') !== 'listitem'\n      ) {\n        node.setAttribute('role', 'listitem');\n      }\n\n      // If the assigned element is a slot, process its assigned elements recursively.\n      if (node.tagName.toLowerCase() === 'slot') {\n        this.processAssignedElements(node as HTMLSlotElement);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.slotListeners.forEach((listener: EventListener, slot: HTMLSlotElement) => {\n      // Remove the slotchange event listener and delete the entry from the Map.\n      slot.removeEventListener('slotchange', listener);\n      this.slotListeners.delete(slot);\n    });\n  }\n\n  render() {\n    const attributes = {\n      'role': 'list',\n      'aria-labelledby': this.headingElement?.id,\n    };\n\n    return (\n      <Host {...attributes}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,56 @@
+: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-header-nav-item-dropdown-opened-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

@@ -0,0 +1,67 @@
+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"; }
+}
+//# sourceMappingURL=header-dropdown-list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header-dropdown-list-item.js","sourceRoot":"","sources":["../../../../../src/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,sBAAsB;;oBAIL,KAAK;gBAGY,IAAI;;EAEjD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,WAAW,EAAE,IAAI;UACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;SACpC;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown-list-item',\n  styleUrl: 'header-dropdown-list-item.scss',\n  shadow: true,\n})\nexport class HeaderDropdownListItem {\n  @Element() host: HTMLElement;\n\n  /** If the link should appear selected. */\n  @Prop() selected: boolean = false;\n\n  /** The type of the list. */\n  @Prop({ reflect: true }) type: 'md' | 'lg' = 'md';\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'component': true,\n            'component-selected': this.selected,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}