@scania/tegel 0.0.5 → 0.0.6

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

@@ -0,0 +1,66 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sideMenuDropdownListItemCss = ":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}";
+
+const SideMenuDropdownListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuDropdownListItemCss; }
+}, [1, "sdds-side-menu-dropdown-list-item", {
+    "selected": [4],
+    "dropdownHasIcon": [32],
+    "collapsed": [32]
+  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandeler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-dropdown-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-dropdown-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuDropdownListItem);
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuDropdownListItem = SideMenuDropdownListItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuDropdownListItem, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-dropdown-list-item.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-dropdown-list-item.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,qsCAAqsC;;MCQ5tC,wBAAwB;;;;;oBAIP,KAAK;2BAEG,KAAK;qBAEX,KAAK;;EAKnC,8BAA8B,CAAC,KAAkC;IAC/D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;GACzC;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;GAC5C;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;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;QACnC,6BAA6B,EAAE,IAAI,CAAC,eAAe;QACnD,qBAAqB,EAAE,IAAI,CAAC,SAAS;OACtC,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-dropdown-list-item/side-menu-dropdown-list-item.scss?tag=sdds-side-menu-dropdown-list-item&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-dropdown-list-item/side-menu-dropdown-list-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  height: 48px;\n  width: 100%;\n\n  .component {\n    height: 100%;\n    width: 100%;\n\n    ::slotted(a),\n    ::slotted(button) {\n      all: unset;\n      box-sizing: border-box;\n      border-right: 1px solid var(--sdds-nav-item-border-color);\n      display: flex;\n      align-items: center;\n      height: 100%;\n      padding: 0 24px;\n      width: 100%;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      background-color: var(--sdds-header-nav-item-dropdown-opened-background);\n      color: var(--sdds-header-nav-item-dropdown-opened-color);\n      border: none;\n    }\n\n    ::slotted(a:hover),\n    ::slotted(button:hover) {\n      background-color: var(--sdds-nav-item-background-hover);\n      cursor: pointer;\n    }\n\n    ::slotted(a:focus-visible) {\n      @include sdds-focus-state;\n    }\n  }\n\n  .component.component-selected {\n    ::slotted(a),\n    ::slotted(button) {\n      border-left: 4px solid var(--sdds-nav-item-border-color-active);\n      padding-left: 20px;\n      background-color: var(--sdds-nav-item-background-selected);\n    }\n  }\n\n  .component.component-dropdown-has-icon {\n    &:not(.component-collapsed) {\n      ::slotted(a),\n      ::slotted(button) {\n        padding-left: 56px;\n      }\n    }\n  }\n}\n","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"],"version":3}

package/dist/components/sdds-side-menu-dropdown-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuDropdownList extends Components.SddsSideMenuDropdownList, HTMLElement {}
+export const SddsSideMenuDropdownList: {
+  prototype: SddsSideMenuDropdownList;
+  new (): SddsSideMenuDropdownList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-side-menu-dropdown-list.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sideMenuDropdownListCss = ":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)}";
+
+const SideMenuDropdownList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuDropdownListCss; }
+}, [1, "sdds-side-menu-dropdown-list", {
+    "collapsed": [32]
+  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-dropdown-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-dropdown-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuDropdownList);
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuDropdownList = SideMenuDropdownList;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuDropdownList, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-dropdown-list.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-dropdown-list.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,oRAAoR;;MCQvS,oBAAoB;;;;;qBAGD,KAAK;;EAKnC,6BAA6B,CAAC,KAAkC;IAC9D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;GACzC;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;GAC5C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,MAAM,IACf,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI,CAAC,SAAS;OAClC,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.scss?tag=sdds-side-menu-dropdown-list&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 190px;\n\n  [role='list'] {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    border-radius: none;\n    background-color: var(--sdds-header-app-launcher-menu-bg);\n  }\n\n  .state-collapsed {\n    ::slotted(*) {\n      border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n    }\n  }\n}\n","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"],"version":3}

package/dist/components/sdds-side-menu-dropdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuDropdown extends Components.SddsSideMenuDropdown, HTMLElement {}
+export const SddsSideMenuDropdown: {
+  prototype: SddsSideMenuDropdown;
+  new (): SddsSideMenuDropdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-side-menu-dropdown.js

@@ -0,0 +1,103 @@
+import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './side-menu-item.js';
+
+const sideMenuDropdownCss = ":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:68px;position:absolute;left:var(--side-menu-width);box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-header-app-launcher-menu-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(sdds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";
+
+const SideMenuDropdown = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.defaultOpen = false;
+    this.buttonLabel = undefined;
+    this.selected = false;
+    this.open = false;
+    this.hoverState = undefined;
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  onEventPointerEnter() {
+    this.setHoverStateOpen();
+  }
+  onEventFocus() {
+    this.setHoverStateOpen();
+  }
+  onEventPointerLeave() {
+    this.setHoverStateClosed();
+  }
+  onEventBlur() {
+    this.setHoverStateClosed();
+  }
+  setHoverStateOpen() {
+    this.hoverState = { isHovered: true, updatedAt: Date.now() };
+  }
+  setHoverStateClosed() {
+    const leftAt = Date.now();
+    const toleranceInMilliseconds = 150;
+    setTimeout(() => {
+      if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {
+        this.hoverState = { isHovered: false, updatedAt: Date.now() };
+      }
+    }, toleranceInMilliseconds);
+  }
+  getIsOpenState() {
+    var _a;
+    return this.collapsed ? (_a = this.hoverState) === null || _a === void 0 ? void 0 : _a.isHovered : this.open;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+    this.open = this.defaultOpen;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'wrapper': true,
+        'state-open': this.getIsOpenState(),
+        'state-collapsed': this.collapsed,
+      } }, h("sdds-side-menu-item", { class: "button", active: this.getIsOpenState(), selected: this.selected, onClick: () => {
+        this.open = !this.open;
+      } }, h("button", null, h("slot", { name: "button-icon" }), !this.collapsed && (h(Fragment, null, this.buttonLabel, h("slot", { name: "button-label" }), h("sdds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" }))))), h("div", { class: "menu" }, this.collapsed && (h("h3", { class: "heading-collapsed" }, this.buttonLabel, h("slot", { name: "button-label" }))), h("slot", null)))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuDropdownCss; }
+}, [1, "sdds-side-menu-dropdown", {
+    "defaultOpen": [4, "default-open"],
+    "buttonLabel": [1, "button-label"],
+    "selected": [4],
+    "open": [32],
+    "hoverState": [32],
+    "collapsed": [32]
+  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandler"], [1, "pointerenter", "onEventPointerEnter"], [0, "focusin", "onEventFocus"], [1, "pointerleave", "onEventPointerLeave"], [0, "focusout", "onEventBlur"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-dropdown", "sdds-icon", "sdds-side-menu-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-dropdown":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuDropdown);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "sdds-side-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuDropdown = SideMenuDropdown;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuDropdown, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-dropdown.js.map

package/dist/components/sdds-side-menu-dropdown.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-dropdown.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,+2BAA+2B;;MCQ93B,gBAAgB;;;;;uBAII,KAAK;;oBAOR,KAAK;gBAER,KAAK;;qBAIA,KAAK;;EAKnC,6BAA6B,CAAC,KAAkC;IAC9D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;GACzC;EAGD,mBAAmB;IACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAGD,YAAY;IACV,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAGD,mBAAmB;IACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAGD,WAAW;IACT,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;GAC9D;EAED,mBAAmB;IACjB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IAC1B,MAAM,uBAAuB,GAAG,GAAG,CAAC;IACpC,UAAU,CAAC;MACT,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,MAAM,EAAE;QACnE,IAAI,CAAC,UAAU,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;OAC/D;KACF,EAAE,uBAAuB,CAAC,CAAC;GAC7B;EAED,cAAc;;IACZ,OAAO,IAAI,CAAC,SAAS,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;GAChE;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;IAC3C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;GAC9B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,YAAY,EAAE,IAAI,CAAC,cAAc,EAAE;QACnC,iBAAiB,EAAE,IAAI,CAAC,SAAS;OAClC,IAED,2BACE,KAAK,EAAC,QAAQ,EACd,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE;QACP,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;OACxB,IAED,kBACE,YAAM,IAAI,EAAC,aAAa,GAAQ,EAC/B,CAAC,IAAI,CAAC,SAAS,KACd,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,EACjB,YAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,iBAAW,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACpE,CACZ,CACM,CACW,EACtB,WAAK,KAAK,EAAC,MAAM,IACd,IAAI,CAAC,SAAS,KACb,UAAI,KAAK,EAAC,mBAAmB,IAC1B,IAAI,CAAC,WAAW,EACjB,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC9B,CACN,EACD,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.scss?tag=sdds-side-menu-dropdown&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .dropdown-icon {\n    margin-left: auto;\n    transition: all 0.2s ease-in-out;\n  }\n\n  .state-open {\n    .dropdown-icon {\n      transform: rotateZ(180deg);\n    }\n\n    .menu {\n      display: block;\n    }\n  }\n\n  .state-collapsed {\n    .menu {\n      --side-menu-width: 68px;\n\n      position: absolute;\n      left: var(--side-menu-width);\n      box-shadow: var(--sdds-nav-dropdown-menu-box);\n      background-color: var(--sdds-header-app-launcher-menu-background);\n\n      .heading-collapsed {\n        all: unset;\n        box-sizing: border-box;\n        padding: 16px 24px 15px;\n        min-height: 48px;\n        display: flex;\n        align-items: center;\n        border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n        font: var(--sdds-headline-07);\n        letter-spacing: var(--sdds-headline-07-ls);\n      }\n    }\n  }\n\n  :not(.state-collapsed) {\n    .menu {\n      ::slotted(sdds-side-menu-dropdown-list) {\n        width: 100%;\n      }\n    }\n  }\n\n  .menu {\n    display: none;\n    flex-direction: column;\n  }\n}\n","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"],"version":3}

package/dist/components/sdds-side-menu-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuItem extends Components.SddsSideMenuItem, HTMLElement {}
+export const SddsSideMenuItem: {
+  prototype: SddsSideMenuItem;
+  new (): SddsSideMenuItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-side-menu-item.js

@@ -0,0 +1,8 @@
+import { S as SddsSideMenuItem$1, d as defineCustomElement$1 } from './side-menu-item.js';
+
+const SddsSideMenuItem = SddsSideMenuItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuItem, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-item.js.map

package/dist/components/sdds-side-menu-item.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sdds-side-menu-overlay.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuOverlay extends Components.SddsSideMenuOverlay, HTMLElement {}
+export const SddsSideMenuOverlay: {
+  prototype: SddsSideMenuOverlay;
+  new (): SddsSideMenuOverlay;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-side-menu-overlay.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sideMenuOverlayCss = ":host{position:absolute;width:100%;height:100%;background-color:black;transition:opacity 0.4s linear;opacity:0}";
+
+const SideMenuOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("div", null)));
+  }
+  static get style() { return sideMenuOverlayCss; }
+}, [1, "sdds-side-menu-overlay"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-overlay"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-overlay":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuOverlay);
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuOverlay = SideMenuOverlay;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuOverlay, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-overlay.js.map

package/dist/components/sdds-side-menu-overlay.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-overlay.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,iHAAiH;;MCO/H,eAAe;;;;;;EAC1B,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cAAW,CACN,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.scss?tag=sdds-side-menu-overlay&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: black;\n  transition: opacity 0.4s linear;\n  opacity: 0;\n}\n","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"],"version":3}

package/dist/components/sdds-side-menu-user-image.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuUserImage extends Components.SddsSideMenuUserImage, HTMLElement {}
+export const SddsSideMenuUserImage: {
+  prototype: SddsSideMenuUserImage;
+  new (): SddsSideMenuUserImage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-side-menu-user-image.js

@@ -0,0 +1,8 @@
+import { S as SideMenuUserImage, d as defineCustomElement$1 } from './side-menu-user-image.js';
+
+const SddsSideMenuUserImage = SideMenuUserImage;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuUserImage, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-user-image.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-user-image.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sdds-side-menu-user-label.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuUserLabel extends Components.SddsSideMenuUserLabel, HTMLElement {}
+export const SddsSideMenuUserLabel: {
+  prototype: SddsSideMenuUserLabel;
+  new (): SddsSideMenuUserLabel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-side-menu-user-label.js

@@ -0,0 +1,8 @@
+import { S as SideMenuUserLabel, d as defineCustomElement$1 } from './side-menu-user-label.js';
+
+const SddsSideMenuUserLabel = SideMenuUserLabel;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuUserLabel, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-user-label.js.map

package/dist/components/sdds-side-menu-user-label.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-user-label.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sdds-side-menu-user.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenuUser extends Components.SddsSideMenuUser, HTMLElement {}
+export const SddsSideMenuUser: {
+  prototype: SddsSideMenuUser;
+  new (): SddsSideMenuUser;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-side-menu-user.js

@@ -0,0 +1,56 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './side-menu-user-image.js';
+import { d as defineCustomElement$2 } from './side-menu-user-label.js';
+
+const sideMenuUserCss = ":host{display:flex;align-items:center;gap:12px;height:68px}:host sdds-side-menu-user-image{margin-left:-4px}";
+
+const SideMenuUser = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 style() { return sideMenuUserCss; }
+}, [1, "sdds-side-menu-user", {
+    "heading": [1],
+    "subheading": [1],
+    "imgSrc": [1, "img-src"],
+    "imgAlt": [1, "img-alt"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-user", "sdds-side-menu-user-image", "sdds-side-menu-user-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-user":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuUser);
+      }
+      break;
+    case "sdds-side-menu-user-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "sdds-side-menu-user-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuUser = SideMenuUser;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuUser, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-user.js.map

package/dist/components/sdds-side-menu-user.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-user.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,8GAA8G;;MCOzH,YAAY;;;;;;;;;;EAavB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,iCAA2B,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,IAC3D,YAAM,IAAI,EAAC,OAAO,GAAQ,CACA,EAC5B,iCACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,UAAU,EAAE,IAAI,CAAC,UAAU,GACA,CACxB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-user/side-menu-user.scss?tag=sdds-side-menu-user&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-user/side-menu-user.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  height: 68px;\n\n  sdds-side-menu-user-image {\n    margin-left: -4px;\n  }\n}\n","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"],"version":3}

package/dist/components/sdds-side-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsSideMenu extends Components.SddsSideMenu, HTMLElement {}
+export const SddsSideMenu: {
+  prototype: SddsSideMenu;
+  new (): SddsSideMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-side-menu.js

@@ -0,0 +1,133 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as dfs, b as isFocusable } from './utils.js';
+
+const sideMenuCss = ":host([open]){pointer-events:auto;z-index:301}:host{pointer-events:none;display:block;position:fixed;top:0;width:100%;height:100%}:host .wrapper{height:inherit;}:host .wrapper slot:not([name])::slotted(*){border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper ::slotted([slot=end]){border-top:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host .wrapper .sdds-side-menu-list-end{margin-top:68px}:host .state-closed{display:none}:host .state-open slot[name=overlay]::slotted(sdds-side-menu-overlay){opacity:0.4}:host .state-open slot[name=close-button]::slotted(sdds-side-menu-close-button){opacity:1}:host .state-open .sdds-side-menu-wrapper{transform:scaleY(1)}:host .state-upper-slot-empty .sdds-side-menu-list-upper{display:none}:host .state-upper-slot-empty .sdds-side-menu-list-end{margin-top:0}:host .state-upper-slot-empty ::slotted([slot=end]){border-top:none;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}@media (min-width: 992px){:host([persistent]){pointer-events:auto;position:static;width:272px;height:auto;border-right:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host([persistent]) .wrapper slot[name=overlay]::slotted(sdds-side-menu-overlay){display:none}:host([persistent]) .wrapper slot[name=close-button]::slotted(sdds-side-menu-close-button){display:none}:host([persistent]) .wrapper .sdds-side-menu-wrapper{transform:none}:host([persistent]) .menu{width:272px}:host([persistent]) .state-closed{display:block}:host([persistent]):host([collapsed]){width:69px}:host([persistent]):host([collapsed]) .menu{width:68px}:host([persistent]) slot[name=end]::slotted(*){display:none}}.menu{width:80%;height:inherit;position:relative;left:0;display:flex;flex-direction:column;justify-content:space-between}.menu *{padding:0;margin:0;box-sizing:border-box}@media (max-width: 384px){.menu{width:100%}}aside .sdds-side-menu-wrapper{display:flex;justify-content:space-between;flex-direction:column;flex-grow:1;background-color:var(--sdds-sidebar-side-menu-background-cover);transition:transform 250ms ease;transform-origin:top;transform:scaleY(0);overflow-y:auto}aside .sdds-side-menu-wrapper::-webkit-scrollbar{width:4px;background-color:inherit}aside .sdds-side-menu-wrapper::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}aside .sdds-side-menu-wrapper ::-webkit-scrollbar-button{height:0;width:0}";
+
+const GRID_LG_BREAKPOINT = '992px';
+const OPENING_ANIMATION_DURATION = 400;
+const INITIALIZE_ANIMATION_DELAY = 500;
+const SddsSideMenu$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.collapsedEventEmitter = createEvent(this, "sddsSideMenuCollapsed", 7);
+    this.handleMatchesLgBreakpointChange = (e) => {
+      const isBelowLg = !e.matches;
+      if (isBelowLg) {
+        this.collapsed = false;
+      }
+    };
+    this.open = false;
+    this.persistent = false;
+    this.collapsed = false;
+    this.isUpperSlotEmpty = false;
+    this.isClosed = true;
+    this.isOpen = false;
+    this.isClosing = false;
+    this.isOpening = false;
+  }
+  connectedCallback() {
+    this.collapsedEventEmitter.emit({
+      collapsed: this.collapsed,
+    });
+    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);
+    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
+  }
+  componentDidLoad() {
+    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);
+    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+    const upperSlotElements = upperSlot.assignedElements();
+    const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
+    if (!hasUpperSlotElements) {
+      this.isUpperSlotEmpty = true;
+    }
+  }
+  disconnectedCallback() {
+    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+  }
+  onOpenChange(newVal, oldVal) {
+    if (newVal && !oldVal) {
+      this.setOpening();
+    }
+    if (!newVal && oldVal) {
+      this.setClosing();
+    }
+  }
+  onCollapsedChange(newVal) {
+    this.collapsedEventEmitter.emit({
+      collapsed: newVal,
+    });
+  }
+  onIsOpenChange(newVal) {
+    if (newVal) {
+      const firstFocusableElement = dfs(this.host, isFocusable, true);
+      firstFocusableElement.focus();
+    }
+  }
+  async setOpening() {
+    this.isClosed = false;
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0);
+    });
+    this.isOpening = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isOpening = false;
+    this.isOpen = true;
+  }
+  async setClosing() {
+    this.isOpen = false;
+    this.isClosing = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isClosing = false;
+    this.isClosed = true;
+  }
+  render() {
+    return (h(Host, { role: "navigation" }, h("div", { class: {
+        'wrapper': true,
+        'state-upper-slot-empty': this.isUpperSlotEmpty,
+        'state-open': this.isOpen || this.isOpening,
+        'state-closed': this.isClosed,
+      } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "sdds-side-menu-wrapper" }, h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "open": ["onOpenChange"],
+    "collapsed": ["onCollapsedChange"],
+    "isOpening": ["onIsOpenChange"]
+  }; }
+  static get style() { return sideMenuCss; }
+}, [1, "sdds-side-menu", {
+    "open": [516],
+    "persistent": [516],
+    "collapsed": [516],
+    "isUpperSlotEmpty": [32],
+    "isClosed": [32],
+    "isOpen": [32],
+    "isClosing": [32],
+    "isOpening": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsSideMenu$1);
+      }
+      break;
+  } });
+}
+
+const SddsSideMenu = SddsSideMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenu, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu.js.map