@scania/tegel 0.0.5 → 0.0.6

package/dist/collection/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-dropdown.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Fragment, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\n\n@Component({\n  tag: 'sdds-side-menu-dropdown',\n  styleUrl: 'side-menu-dropdown.scss',\n  shadow: true,\n})\nexport class SideMenuDropdown {\n  @Element() host: HTMLElement;\n\n  /** If the dropdown should be open from the start. */\n  @Prop() defaultOpen: boolean = false;\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 button that opens the dropdown should appear selected. */\n  @Prop() selected: boolean = false;\n\n  @State() open: boolean = false;\n\n  @State() hoverState: { isHovered: boolean; updatedAt: number };\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n  }\n\n  @Listen('pointerenter')\n  onEventPointerEnter() {\n    this.setHoverStateOpen();\n  }\n\n  @Listen('focusin')\n  onEventFocus() {\n    this.setHoverStateOpen();\n  }\n\n  @Listen('pointerleave')\n  onEventPointerLeave() {\n    this.setHoverStateClosed();\n  }\n\n  @Listen('focusout')\n  onEventBlur() {\n    this.setHoverStateClosed();\n  }\n\n  setHoverStateOpen() {\n    this.hoverState = { isHovered: true, updatedAt: Date.now() };\n  }\n\n  setHoverStateClosed() {\n    const leftAt = Date.now();\n    const toleranceInMilliseconds = 150;\n    setTimeout(() => {\n      if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {\n        this.hoverState = { isHovered: false, updatedAt: Date.now() };\n      }\n    }, toleranceInMilliseconds);\n  }\n\n  getIsOpenState() {\n    return this.collapsed ? this.hoverState?.isHovered : this.open;\n  }\n\n  connectedCallback() {\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl.collapsed;\n    this.open = this.defaultOpen;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'wrapper': true,\n            'state-open': this.getIsOpenState(),\n            'state-collapsed': this.collapsed,\n          }}\n        >\n          <sdds-side-menu-item\n            class=\"button\"\n            active={this.getIsOpenState()}\n            selected={this.selected}\n            onClick={() => {\n              this.open = !this.open;\n            }}\n          >\n            <button>\n              <slot name=\"button-icon\"></slot>\n              {!this.collapsed && (\n                <Fragment>\n                  {this.buttonLabel}\n                  <slot name=\"button-label\"></slot>\n                  <sdds-icon class=\"dropdown-icon\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n                </Fragment>\n              )}\n            </button>\n          </sdds-side-menu-item>\n          <div class=\"menu\">\n            {this.collapsed && (\n              <h3 class=\"heading-collapsed\">\n                {this.buttonLabel}\n                <slot name=\"button-label\"></slot>\n              </h3>\n            )}\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.css

@@ -0,0 +1,14 @@
+:host {
+  display: block;
+  width: 190px;
+}
+:host [role=list] {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  border-radius: none;
+  background-color: var(--sdds-header-app-launcher-menu-bg);
+}
+:host .state-collapsed ::slotted(*) {
+  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.js

@@ -0,0 +1,46 @@
+import { Host, h } from '@stencil/core';
+export class SideMenuDropdownList {
+  constructor() {
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "list" }, h("div", { class: {
+        'state-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-side-menu-dropdown-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-dropdown-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-dropdown-list.css"]
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=side-menu-dropdown-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-dropdown-list.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ3E,MAAM,OAAO,oBAAoB;;qBAGD,KAAK;;EAKnC,6BAA6B,CAAC,KAAkC;IAC9D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;EAC7C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,MAAM;MACf,WACE,KAAK,EAAE;UACL,iBAAiB,EAAE,IAAI,CAAC,SAAS;SAClC;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Listen, Element, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\n\n@Component({\n  tag: 'sdds-side-menu-dropdown-list',\n  styleUrl: 'side-menu-dropdown-list.scss',\n  shadow: true,\n})\nexport class SideMenuDropdownList {\n  @Element() host: HTMLElement;\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n  }\n\n  connectedCallback() {\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl.collapsed;\n  }\n\n  render() {\n    return (\n      <Host role=\"list\">\n        <div\n          class={{\n            'state-collapsed': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,45 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  height: 48px;
+  width: 100%;
+}
+:host .component {
+  height: 100%;
+  width: 100%;
+}
+:host .component ::slotted(a),
+:host .component ::slotted(button) {
+  all: unset;
+  box-sizing: border-box;
+  border-right: 1px solid var(--sdds-nav-item-border-color);
+  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);
+  border: none;
+}
+:host .component ::slotted(a:hover),
+:host .component ::slotted(button: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.component-selected ::slotted(a),
+:host .component.component-selected ::slotted(button) {
+  border-left: 4px solid var(--sdds-nav-item-border-color-active);
+  padding-left: 20px;
+  background-color: var(--sdds-nav-item-background-selected);
+}
+:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(a),
+:host .component.component-dropdown-has-icon:not(.component-collapsed) ::slotted(button) {
+  padding-left: 56px;
+}

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

@@ -0,0 +1,85 @@
+import { h, Host } from '@stencil/core';
+export class SideMenuDropdownListItem {
+  constructor() {
+    this.selected = false;
+    this.dropdownHasIcon = false;
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandeler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  componentDidLoad() {
+    var _a;
+    const dropdownEl = this.host.closest('sdds-side-menu-dropdown');
+    const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector('slot[name="button-icon"]');
+    const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();
+    const hasBtnIcon = (btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls.length) > 0;
+    const btnIconIsUserImage = ((_a = btnIconSlottedEls === null || btnIconSlottedEls === void 0 ? void 0 : btnIconSlottedEls[0]) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'sdds-side-menu-user-image';
+    if (hasBtnIcon && !btnIconIsUserImage) {
+      this.dropdownHasIcon = true;
+    }
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+        'component-dropdown-has-icon': this.dropdownHasIcon,
+        'component-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-side-menu-dropdown-list-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-dropdown-list-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-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 item should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dropdownHasIcon": {},
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandeler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=side-menu-dropdown-list-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-dropdown-list-item.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-dropdown-list-item/side-menu-dropdown-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,wBAAwB;;oBAIP,KAAK;2BAEG,KAAK;qBAEX,KAAK;;EAKnC,8BAA8B,CAAC,KAAkC;IAC/D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;EAC7C,CAAC;EAED,gBAAgB;;IACd,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;IAChE,MAAM,qBAAqB,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAC/D,0BAA0B,CACR,CAAC;IACrB,MAAM,iBAAiB,GAAG,qBAAqB,CAAC,gBAAgB,EAAE,CAAC;IACnE,MAAM,UAAU,GAAG,CAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,MAAM,IAAG,CAAC,CAAC;IACjD,MAAM,kBAAkB,GACtB,CAAA,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,CAAC,CAAC,0CAAE,OAAO,CAAC,WAAW,EAAE,MAAK,2BAA2B,CAAC;IAEhF,IAAI,UAAU,IAAI,CAAC,kBAAkB,EAAE;MACrC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU;MACnB,WACE,KAAK,EAAE;UACL,WAAW,EAAE,IAAI;UACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;UACnC,6BAA6B,EAAE,IAAI,CAAC,eAAe;UACnD,qBAAqB,EAAE,IAAI,CAAC,SAAS;SACtC;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\n\n@Component({\n  tag: 'sdds-side-menu-dropdown-list-item',\n  styleUrl: 'side-menu-dropdown-list-item.scss',\n  shadow: true,\n})\nexport class SideMenuDropdownListItem {\n  @Element() host: HTMLElement;\n\n  /** If the item should appear selected. */\n  @Prop() selected: boolean = false;\n\n  @State() dropdownHasIcon: boolean = false;\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandeler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n  }\n\n  connectedCallback() {\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl.collapsed;\n  }\n\n  componentDidLoad() {\n    const dropdownEl = this.host.closest('sdds-side-menu-dropdown');\n    const dropdownBtnIconSlotEl = dropdownEl.shadowRoot.querySelector(\n      'slot[name=\"button-icon\"]',\n    ) as HTMLSlotElement;\n    const btnIconSlottedEls = dropdownBtnIconSlotEl.assignedElements();\n    const hasBtnIcon = btnIconSlottedEls?.length > 0;\n    const btnIconIsUserImage =\n      btnIconSlottedEls?.[0]?.tagName.toLowerCase() === 'sdds-side-menu-user-image';\n\n    if (hasBtnIcon && !btnIconIsUserImage) {\n      this.dropdownHasIcon = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={{\n            'component': true,\n            'component-selected': this.selected,\n            'component-dropdown-has-icon': this.dropdownHasIcon,\n            'component-collapsed': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/side-menu/webcomponent/side-menu-item/side-menu-item.css

@@ -0,0 +1,53 @@
+/*
+  Contains spacing variables for the layout
+*/
+:host {
+  display: block;
+}
+:host .component ::slotted(a),
+:host .component ::slotted(button) {
+  all: unset;
+  box-sizing: border-box;
+  height: 68px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 24px;
+  border: none;
+  background-color: var(--sdds-sidebar-side-menu-background-cover);
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-sidebar-side-menu-single-item-color);
+}
+:host .component ::slotted(a:focus-visible),
+:host .component ::slotted(button:focus-visible) {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+:host .component:hover ::slotted(a),
+:host .component:hover ::slotted(button) {
+  cursor: pointer;
+  background-color: var(--sdds-sidebar-item-state-hover);
+}
+:host .component-collapsed ::slotted(a),
+:host .component-collapsed ::slotted(button) {
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+:host .component-selected:not(:host .component-active) ::slotted(a),
+:host .component-selected:not(:host .component-active) ::slotted(button) {
+  border-left: 4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);
+  padding-left: 20px;
+  background-color: var(--sdds-sidebar-item-state-selected);
+}
+
+@media (min-width: 992px) {
+  :host .component.component-collapsed ::slotted(a),
+:host .component.component-collapsed ::slotted(button) {
+    color: rgba(90, 90, 90, 0);
+    overflow: hidden;
+  }
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-item/side-menu-item.js

@@ -0,0 +1,129 @@
+import { h, Host } from '@stencil/core';
+import { dfs } from '../../../../utils/utils';
+export class SddsSideMenuItem {
+  constructor() {
+    this.selected = false;
+    this.active = false;
+    this.collapsed = 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-side-menu-item-icon');
+        if (this.collapsed) {
+          element.classList.add('__sdds-side-menu-item-icon-collapsed');
+        }
+        else {
+          element.classList.remove('__sdds-side-menu-item-icon-collapsed');
+        }
+      };
+      this.updateSlotted(isIconOrSvg, addIconClass);
+    }
+  }
+  connectedCallback() {
+    var _a;
+    // closest() will return null if side-menu-item is inside a shadowRoot that
+    // does not contain a side-menu. This is the case for the side-menu-dropdown.
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = (_a = this.sideMenuEl) === null || _a === void 0 ? void 0 : _a.collapsed;
+  }
+  componentDidLoad() {
+    this.slotEl = this.host.shadowRoot.querySelector('slot');
+    this.updateSlottedElements();
+    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);
+  }
+  collapsedSideMenuEventHandeler(event) {
+    this.collapsed = event.detail.collapsed;
+    this.updateSlottedElements();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+        'component-active': this.active,
+        'component-collapsed': this.collapsed,
+      } }, h("slot", null))));
+  }
+  static get is() { return "sdds-side-menu-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-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 item should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the item should appear active. Can be used when the item is\ntriggering a dropdown, and the dropdown is open, for example."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandeler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=side-menu-item.js.map

package/dist/collection/components/side-menu/webcomponent/side-menu-item/side-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-item.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-item/side-menu-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAO9C,MAAM,OAAO,gBAAgB;;oBAIC,KAAK;kBAIP,KAAK;qBAED,KAAK;;EAMnC,aAAa,CACX,eAAkD,EAClD,gBAAgD;IAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzE,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,CAAC,CAAgB,CAAC;IAC/D,IAAI,mBAAmB,EAAE;MACvB,MAAM,YAAY,GAAG,GAAG,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;MAC/D,IAAI,YAAY,EAAE;QAChB,gBAAgB,CAAC,YAAY,CAAC,CAAC;OAChC;KACF;EACH,CAAC;EAED;;KAEG;EACH,qBAAqB;IACnB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,EAAE,CAC9B,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MAC3F,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,EAAE;QAC/B,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;QACpD,IAAI,IAAI,CAAC,SAAS,EAAE;UAClB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAC;SAC/D;aAAM;UACL,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,sCAAsC,CAAC,CAAC;SAClE;MACH,CAAC,CAAC;MACF,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;KAC/C;EACH,CAAC;EAED,iBAAiB;;IACf,2EAA2E;IAC3E,6EAA6E;IAC7E,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,SAAS,CAAC;EAC9C,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC7B,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;EACzE,CAAC;EAGD,8BAA8B,CAAC,KAAkC;IAC/D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;IACxC,IAAI,CAAC,qBAAqB,EAAE,CAAC;EAC/B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,WAAW,EAAE,IAAI;UACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;UACnC,kBAAkB,EAAE,IAAI,CAAC,MAAM;UAC/B,qBAAqB,EAAE,IAAI,CAAC,SAAS;SACtC;QAED,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Element, Listen, Prop, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\nimport { dfs } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-side-menu-item',\n  styleUrl: 'side-menu-item.scss',\n  shadow: true,\n})\nexport class SddsSideMenuItem {\n  @Element() host: HTMLSddsSideMenuItemElement;\n\n  /** If the item should appear selected. */\n  @Prop() selected: boolean = false;\n\n  /** If the item should appear active. Can be used when the item is\n   * triggering a dropdown, and the dropdown is open, for example. */\n  @Prop() active: boolean = false;\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  private slotEl: HTMLSlotElement;\n\n  updateSlotted(\n    searchPredicate: (element: HTMLElement) => boolean,\n    mutationCallback: (element: HTMLElement) => void,\n  ) {\n    const assignedElements = this.slotEl.assignedElements({ flatten: true });\n    const firstSlottedElement = assignedElements[0] as HTMLElement;\n    if (firstSlottedElement) {\n      const foundElement = dfs(firstSlottedElement, searchPredicate);\n      if (foundElement) {\n        mutationCallback(foundElement);\n      }\n    }\n  }\n\n  /**\n   * This function is needed because we can't use CSS selectors to style something in the light dom\n   */\n  updateSlottedElements() {\n    if (this.slotEl) {\n      const isIconOrSvg = (element) =>\n        element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';\n      const addIconClass = (element) => {\n        element.classList.add('__sdds-side-menu-item-icon');\n        if (this.collapsed) {\n          element.classList.add('__sdds-side-menu-item-icon-collapsed');\n        } else {\n          element.classList.remove('__sdds-side-menu-item-icon-collapsed');\n        }\n      };\n      this.updateSlotted(isIconOrSvg, addIconClass);\n    }\n  }\n\n  connectedCallback() {\n    // closest() will return null if side-menu-item is inside a shadowRoot that\n    // does not contain a side-menu. This is the case for the side-menu-dropdown.\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl?.collapsed;\n  }\n\n  componentDidLoad() {\n    this.slotEl = this.host.shadowRoot.querySelector('slot');\n    this.updateSlottedElements();\n    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);\n  }\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandeler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n    this.updateSlottedElements();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'component': true,\n            'component-selected': this.selected,\n            'component-active': this.active,\n            'component-collapsed': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.css

@@ -0,0 +1,8 @@
+:host {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  transition: opacity 0.4s linear;
+  opacity: 0;
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.js

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

package/dist/collection/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-overlay.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,eAAe;EAC1B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,cAAW,CACN,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-side-menu-overlay',\n  styleUrl: 'side-menu-overlay.scss',\n  shadow: true,\n})\nexport class SideMenuOverlay {\n  render() {\n    return (\n      <Host>\n        <div></div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/side-menu/webcomponent/side-menu-user/side-menu-user.css

@@ -0,0 +1,9 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 68px;
+}
+:host sdds-side-menu-user-image {
+  margin-left: -4px;
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-user/side-menu-user.js

@@ -0,0 +1,97 @@
+import { h, Host } from '@stencil/core';
+export class SideMenuUser {
+  constructor() {
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.imgSrc = undefined;
+    this.imgAlt = undefined;
+  }
+  render() {
+    return (h(Host, null, h("sdds-side-menu-user-image", { src: this.imgSrc, alt: this.imgAlt }, h("slot", { name: "image" })), h("sdds-side-menu-user-label", { heading: this.heading, subheading: this.subheading })));
+  }
+  static get is() { return "sdds-side-menu-user"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-user.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-user.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The heading text."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "subheading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The subheading text."
+        },
+        "attribute": "subheading",
+        "reflect": false
+      },
+      "imgSrc": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The image source."
+        },
+        "attribute": "img-src",
+        "reflect": false
+      },
+      "imgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The image alt text."
+        },
+        "attribute": "img-alt",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=side-menu-user.js.map

package/dist/collection/components/side-menu/webcomponent/side-menu-user/side-menu-user.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-user.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-user/side-menu-user.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,YAAY;;;;;;;EAavB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,iCAA2B,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM;QAC3D,YAAM,IAAI,EAAC,OAAO,GAAQ,CACA;MAC5B,iCACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,UAAU,EAAE,IAAI,CAAC,UAAU,GACA,CACxB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-side-menu-user',\n  styleUrl: 'side-menu-user.scss',\n  shadow: true,\n})\nexport class SideMenuUser {\n  /** The heading text. */\n  @Prop() heading!: string;\n\n  /** The subheading text. */\n  @Prop() subheading: string;\n\n  /** The image source. */\n  @Prop() imgSrc: string;\n\n  /** The image alt text. */\n  @Prop() imgAlt: string;\n\n  render() {\n    return (\n      <Host>\n        <sdds-side-menu-user-image src={this.imgSrc} alt={this.imgAlt}>\n          <slot name=\"image\"></slot>\n        </sdds-side-menu-user-image>\n        <sdds-side-menu-user-label\n          heading={this.heading}\n          subheading={this.subheading}\n        ></sdds-side-menu-user-label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.css

@@ -0,0 +1,6 @@
+:host img,
+:host ::slotted(*) {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.js

@@ -0,0 +1,63 @@
+import { h, Host } from '@stencil/core';
+// TODO this component is just for the dropdown detecting that it should
+// change layout
+export class SideMenuUserImage {
+  constructor() {
+    this.src = undefined;
+    this.alt = undefined;
+  }
+  render() {
+    return (h(Host, null, h("slot", null), this.src && h("img", { src: this.src, alt: this.alt })));
+  }
+  static get is() { return "sdds-side-menu-user-image"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-user-image.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-user-image.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "src": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The image source."
+        },
+        "attribute": "src",
+        "reflect": false
+      },
+      "alt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The image alt text."
+        },
+        "attribute": "alt",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=side-menu-user-image.js.map

package/dist/collection/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-user-image.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD,wEAAwE;AACxE,gBAAgB;AAMhB,MAAM,OAAO,iBAAiB;;;;;EAO5B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa;MACZ,IAAI,CAAC,GAAG,IAAI,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAC7C,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n// TODO this component is just for the dropdown detecting that it should\n// change layout\n@Component({\n  tag: 'sdds-side-menu-user-image',\n  styleUrl: 'side-menu-user-image.scss',\n  shadow: true,\n})\nexport class SideMenuUserImage {\n  /** The image source. */\n  @Prop() src: string;\n\n  /** The image alt text. */\n  @Prop() alt: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        {this.src && <img src={this.src} alt={this.alt} />}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.css

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-sidebar-side-menu-single-item-color);
+}
+:host .subheading {
+  color: var(--sdds-grey-500);
+}