@scania/tegel 0.0.51 → 0.0.61

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

@@ -3,104 +3,104 @@ import { c as createPopper } from './popper.js';
 
 const popoverMenuCss = ":host{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--sdds-popover-menu-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;display:none;z-index:800}:host *{box-sizing:border-box}:host(.sdds-popover-menu-show){opacity:1;display:block}";
 
-const PopoverMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.selector = '';
-    this.referenceEl = undefined;
-    this.show = false;
-    this.placement = 'auto';
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
-  }
-  handleOutsideClick() {
-    if (this.show) {
-      this.show = false;
-    }
-  }
-  componentDidLoad() {
-    var _a;
-    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-    this.renderedShowValue = this.show;
-    this.popperInstance = createPopper(this.target, this.popoverMenuElement, {
-      strategy: 'fixed',
-      placement: this.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showMenu = () => {
-      this.show = true;
-    };
-    const hideMenu = () => {
-      this.show = false;
-    };
-    this.target.addEventListener('mousedown', (event) => {
-      event.stopPropagation();
-      if (this.show) {
-        hideMenu();
-      }
-      else {
-        showMenu();
-      }
-    });
-    this.popoverMenuElement.addEventListener('mousemove', (event) => {
-      event.stopPropagation();
-    });
-    this.popoverMenuElement.addEventListener('mousedown', (event) => {
-      event.stopPropagation();
-    });
-  }
-  componentDidRender() {
-    if (this.show && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
-    }
-    this.renderedShowValue = this.show;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-  }
-  render() {
-    return (h(Host, { class: `sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}` }, h("slot", null)));
-  }
-  get popoverMenuElement() { return this; }
-  static get style() { return popoverMenuCss; }
-}, [1, "sdds-popover-menu", {
-    "selector": [1],
-    "referenceEl": [16],
-    "show": [4],
-    "placement": [1],
-    "offsetSkidding": [2, "offset-skidding"],
-    "offsetDistance": [2, "offset-distance"],
-    "renderedShowValue": [32],
-    "popperInstance": [32],
-    "target": [32]
-  }, [[9, "mousedown", "handleOutsideClick"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-popover-menu"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-popover-menu":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, PopoverMenu);
-      }
-      break;
-  } });
+const PopoverMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = false;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+  }
+  handleOutsideClick() {
+    if (this.show) {
+      this.show = false;
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+    this.renderedShowValue = this.show;
+    this.popperInstance = createPopper(this.target, this.popoverMenuElement, {
+      strategy: 'fixed',
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [this.offsetSkidding, this.offsetDistance],
+          },
+        },
+      ],
+    });
+    const showMenu = () => {
+      this.show = true;
+    };
+    const hideMenu = () => {
+      this.show = false;
+    };
+    this.target.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+      if (this.show) {
+        hideMenu();
+      }
+      else {
+        showMenu();
+      }
+    });
+    this.popoverMenuElement.addEventListener('mousemove', (event) => {
+      event.stopPropagation();
+    });
+    this.popoverMenuElement.addEventListener('mousedown', (event) => {
+      event.stopPropagation();
+    });
+  }
+  componentDidRender() {
+    if (this.show && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.show;
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  render() {
+    return (h(Host, { class: `sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}` }, h("slot", null)));
+  }
+  get popoverMenuElement() { return this; }
+  static get style() { return popoverMenuCss; }
+}, [1, "sdds-popover-menu", {
+    "selector": [1],
+    "referenceEl": [16],
+    "show": [4],
+    "placement": [1],
+    "offsetSkidding": [2, "offset-skidding"],
+    "offsetDistance": [2, "offset-distance"],
+    "renderedShowValue": [32],
+    "popperInstance": [32],
+    "target": [32]
+  }, [[9, "mousedown", "handleOutsideClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-popover-menu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-popover-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PopoverMenu);
+      }
+      break;
+  } });
 }
 
 const SddsPopoverMenu = PopoverMenu;

package/dist/components/sdds-radio-button.js

@@ -2,52 +2,53 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 
 const radioButtonComponentCss = ".sc-sdds-radio-button:root,.sdds-mode-light.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-grey-958);--sdds-radio-button-interaction-01:var(--sdds-blue-800);--sdds-radio-button-interaction-02:var(--sdds-white);--sdds-radio-button-background-hover:var(--sdds-blue-800);--sdds-radio-button-background-focus:var(--sdds-blue-800);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-before:var(--sdds-grey-700)}.sdds-mode-dark.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-white);--sdds-radio-button-interaction-01:var(--sdds-white);--sdds-radio-button-interaction-02:var(--sdds-grey-958);--sdds-radio-button-background-hover:var(--sdds-white);--sdds-radio-button-background-focus:var(--sdds-white);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700)}.sdds-radio-button.sc-sdds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-radio-button-color)}.sdds-radio-button.sc-sdds-radio-button *.sc-sdds-radio-button{box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button+label.sc-sdds-radio-button{padding:var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4) var(--sdds-spacing-element-4);cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{content:\"\";position:absolute;border-radius:50%;box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before{width:24px;height:24px;left:0;top:0}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{border:1px solid var(--sdds-radio-button-interaction-01);background-color:var(--sdds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:hover::before{background-color:var(--sdds-radio-button-background-hover);opacity:0.12}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:focus::before{background-color:var(--sdds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button{cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button::after{border-color:var(--sdds-radio-button-border-color-disabled-after);background-color:var(--sdds-radio-button-interaction-02)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled+label.sc-sdds-radio-button,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button+label.sc-sdds-radio-button{color:var(--sdds-radio-button-disabled);cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button:hover::before{display:none;opacity:1}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked::after{border:4px solid var(--sdds-radio-button-interaction-01)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--sdds-radio-button-color-disabled-before);box-sizing:content-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::after{border:4px solid var(--sdds-radio-button-interaction-02);background-color:var(--sdds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}";
 
-const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.sddsChange = createEvent(this, "sddsChange", 7);
-    this.name = undefined;
-    this.value = undefined;
-    this.radioId = crypto.randomUUID();
-    this.checked = false;
-    this.required = false;
-    this.disabled = false;
-  }
-  render() {
-    return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked,
-      // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!
-      // aria-labelledby={this.ariaLabelledBy} 
-      // aria-describedby={this.host.getAttribute('aria-describedby')}
-      required: this.required, disabled: this.disabled, onChange: () => {
-        this.sddsChange.emit({
-          radioId: this.radioId,
-          value: this.value,
-        });
-      } }), h("label", { htmlFor: this.radioId }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get style() { return radioButtonComponentCss; }
-}, [6, "sdds-radio-button", {
-    "name": [1],
-    "value": [1],
-    "radioId": [1, "radio-id"],
-    "checked": [516],
-    "required": [4],
-    "disabled": [4]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-radio-button"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-radio-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, RadioButton);
-      }
-      break;
-  } });
+const RadioButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sddsChange = createEvent(this, "sddsChange", 6);
+    this.handleChange = () => {
+      this.sddsChange.emit({
+        radioId: this.radioId,
+        value: this.value,
+      });
+    };
+    this.name = undefined;
+    this.value = undefined;
+    this.radioId = crypto.randomUUID();
+    this.checked = false;
+    this.required = false;
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked,
+      // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!
+      // aria-labelledby={this.ariaLabelledBy}
+      // aria-describedby={this.host.getAttribute('aria-describedby')}
+      required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
+  }
+  get host() { return this; }
+  static get style() { return radioButtonComponentCss; }
+}, [6, "sdds-radio-button", {
+    "name": [1],
+    "value": [1],
+    "radioId": [1, "radio-id"],
+    "checked": [516],
+    "required": [4],
+    "disabled": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-radio-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-radio-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, RadioButton);
+      }
+      break;
+  } });
 }
 
 const SddsRadioButton = RadioButton;

package/dist/components/sdds-radio-button.js.map

@@ -1 +1 @@
-{"file":"sdds-radio-button.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,smKAAsmK;;MCSznK,WAAW;;;;;;;mBAiBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,aACA,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;;;;MAK1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE;QACR,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UAClB,OAAO,EAAE,IAAI,CAAC,OAAO;UACrB,KAAK,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CAAA;OACH,GAAI,EACL,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,eAAa,CACP,CACF,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/radio-button/radio-button-component.scss?tag=sdds-radio-button&encapsulation=scoped","./src/components/radio-button/radio-button.tsx"],"sourcesContent":["@import './radio-button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-radio-button {\n  @include sdds-box-sizing;\n\n  display: flex;\n  align-items: center;\n  margin-left: -4px;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-radio-button-color);\n\n  .sdds-form-input[type='radio'] {\n    appearance: none;\n    outline: none;\n    margin: 0;\n    border: 0;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    position: relative;\n    cursor: pointer;\n\n    + label {\n      padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4)\n        var(--sdds-spacing-element-4);\n      cursor: pointer;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: 50%;\n      box-sizing: border-box;\n    }\n\n    &::before {\n      width: 24px;\n      height: 24px;\n      left: 0;\n      top: 0;\n    }\n\n    &::after {\n      border: 1px solid var(--sdds-radio-button-interaction-01);\n      background-color: var(--sdds-radio-button-interaction-02);\n      width: 16px;\n      height: 16px;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:hover {\n      &::before {\n        background-color: var(--sdds-radio-button-background-hover);\n        opacity: 0.12;\n      }\n    }\n\n    &:focus {\n      &::before {\n        background-color: var(--sdds-radio-button-background-focus);\n        opacity: 0.24;\n        animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      cursor: not-allowed;\n\n      &::after {\n        border-color: var(--sdds-radio-button-border-color-disabled-after);\n        background-color: var(--sdds-radio-button-interaction-02);\n      }\n\n      + label {\n        color: var(--sdds-radio-button-disabled);\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        &::before {\n          display: none;\n          opacity: 1;\n        }\n      }\n    }\n  }\n\n  .sdds-form-input[type='radio']:checked {\n    &::after {\n      border: 4px solid var(--sdds-radio-button-interaction-01);\n    }\n\n    &:disabled,\n    &.disabled {\n      &:hover::before,\n      &::before {\n        display: block;\n        width: 16px;\n        height: 16px;\n        left: 4px;\n        top: 4px;\n        border: 1px solid var(--sdds-radio-button-color-disabled-before);\n        box-sizing: content-box;\n      }\n\n      &::after {\n        border: 4px solid var(--sdds-radio-button-interaction-02);\n        background-color: var(--sdds-radio-button-color-disabled-after);\n        left: calc(4px + 1px);\n        top: calc(4px + 1px);\n      }\n    }\n  }\n\n  @keyframes rb-focus {\n    0% {\n      transform: scale(0);\n      opacity: 0;\n    }\n\n    100% {\n      transform: scale(1);\n      opacity: 0.24;\n    }\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n  \n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n  \n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n  \n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input \n        class=\"sdds-form-input\" \n        type=\"radio\" \n        name={this.name}\n        id={this.radioId} \n        value={this.value}\n        checked={this.checked} \n        aria-checked={this.checked} \n\n        // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n        // aria-labelledby={this.ariaLabelledBy} \n        // aria-describedby={this.host.getAttribute('aria-describedby')}\n        required={this.required} \n        disabled={this.disabled}\n        onChange={() => {\n          this.sddsChange.emit({\n             radioId: this.radioId,\n             value: this.value,\n          })\n        }} />\n        <label htmlFor={this.radioId}>\n          <slot></slot>\n        </label>\n        </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-radio-button.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,smKAAsmK;;MCSznK,WAAW;;;;;IAyCtB,iBAAY,GAAG;MACb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC;;;mBA9BwB,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAuBjC,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC5B,aACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;;;;MAI1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GACnC,EACF,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/radio-button/radio-button-component.scss?tag=sdds-radio-button&encapsulation=scoped","./src/components/radio-button/radio-button.tsx"],"sourcesContent":["@import './radio-button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-radio-button {\n  @include sdds-box-sizing;\n\n  display: flex;\n  align-items: center;\n  margin-left: -4px;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-radio-button-color);\n\n  .sdds-form-input[type='radio'] {\n    appearance: none;\n    outline: none;\n    margin: 0;\n    border: 0;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    position: relative;\n    cursor: pointer;\n\n    + label {\n      padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4)\n        var(--sdds-spacing-element-4);\n      cursor: pointer;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: 50%;\n      box-sizing: border-box;\n    }\n\n    &::before {\n      width: 24px;\n      height: 24px;\n      left: 0;\n      top: 0;\n    }\n\n    &::after {\n      border: 1px solid var(--sdds-radio-button-interaction-01);\n      background-color: var(--sdds-radio-button-interaction-02);\n      width: 16px;\n      height: 16px;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:hover {\n      &::before {\n        background-color: var(--sdds-radio-button-background-hover);\n        opacity: 0.12;\n      }\n    }\n\n    &:focus {\n      &::before {\n        background-color: var(--sdds-radio-button-background-focus);\n        opacity: 0.24;\n        animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      cursor: not-allowed;\n\n      &::after {\n        border-color: var(--sdds-radio-button-border-color-disabled-after);\n        background-color: var(--sdds-radio-button-interaction-02);\n      }\n\n      + label {\n        color: var(--sdds-radio-button-disabled);\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        &::before {\n          display: none;\n          opacity: 1;\n        }\n      }\n    }\n  }\n\n  .sdds-form-input[type='radio']:checked {\n    &::after {\n      border: 4px solid var(--sdds-radio-button-interaction-01);\n    }\n\n    &:disabled,\n    &.disabled {\n      &:hover::before,\n      &::before {\n        display: block;\n        width: 16px;\n        height: 16px;\n        left: 4px;\n        top: 4px;\n        border: 1px solid var(--sdds-radio-button-color-disabled-before);\n        box-sizing: content-box;\n      }\n\n      &::after {\n        border: 4px solid var(--sdds-radio-button-interaction-02);\n        background-color: var(--sdds-radio-button-color-disabled-after);\n        left: calc(4px + 1px);\n        top: calc(4px + 1px);\n      }\n    }\n  }\n\n  @keyframes rb-focus {\n    0% {\n      transform: scale(0);\n      opacity: 0;\n    }\n\n    100% {\n      transform: scale(1);\n      opacity: 0.24;\n    }\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n\n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n\n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  handleChange = () => {\n    this.sddsChange.emit({\n      radioId: this.radioId,\n      value: this.value,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input\n          class=\"sdds-form-input\"\n          type=\"radio\"\n          name={this.name}\n          id={this.radioId}\n          value={this.value}\n          checked={this.checked}\n          aria-checked={this.checked}\n          // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n          // aria-labelledby={this.ariaLabelledBy}\n          // aria-describedby={this.host.getAttribute('aria-describedby')}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={() => this.handleChange()}\n        />\n        <label htmlFor={this.radioId}>\n          <slot name=\"label\"></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './utils.js';
+import { d as defineCustomElement$2 } from './icon.js';
+
+const sideMenuCloseButtonCss = ":host{opacity:0;transition:opacity 0.15s ease}:host button{height:64px;width:100%;text-align:left;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);display:flex;align-items:center;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host button:hover{cursor:pointer;background-color:var(--sdds-sidebar-item-state-hover)}:host button:focus-visible{cursor:pointer;border:1px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color)}";
+
+const SideMenuCloseButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("sdds-icon", { name: "cross", size: "20px" }))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuCloseButtonCss; }
+}, [1, "sdds-side-menu-close-button"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-close-button", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-close-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuCloseButton);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuCloseButton = SideMenuCloseButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuCloseButton, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-close-button.js.map

package/dist/components/sdds-side-menu-close-button.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-close-button.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,+nBAA+nB;;MCQjpB,mBAAmB;;;;;;EAG9B,MAAM;IACJ,MAAM,WAAW,mBACf,YAAY,EAAE,OAAO,IAClB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACF,QACE,EAAC,IAAI,QACH,8BAAY,WAAW,GACrB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACJ,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.scss?tag=sdds-side-menu-close-button&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.tsx"],"sourcesContent":[":host {\n  opacity: 0;\n  transition: opacity 0.15s ease;\n\n  button {\n    height: 64px;\n    width: 100%;\n    text-align: left;\n    padding: 0 24px;\n    border: none;\n    background-color: var(--sdds-sidebar-side-menu-background-cover);\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-sidebar-side-menu-single-item-color);\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n\n    &:hover {\n      cursor: pointer;\n      background-color: var(--sdds-sidebar-item-state-hover);\n    }\n\n    &:focus-visible {\n      cursor: pointer;\n      border: 1px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);\n    }\n  }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-side-menu-close-button',\n  styleUrl: 'side-menu-close-button.scss',\n  shadow: true,\n})\nexport class SideMenuCloseButton {\n  @Element() host: HTMLElement;\n\n  render() {\n    const buttonProps = {\n      'aria-label': 'Close',\n      ...inheritAriaAttributes(this.host),\n    };\n    return (\n      <Host>\n        <button {...buttonProps}>\n          <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './side-menu-item.js';
+
+const sideMenuCollapseButtonCss = ":host{position:sticky;bottom:0;display:none;height:68px;border-top:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top)}:host .icon{transform:rotateZ(90deg);transition:all 0.2s ease-in-out;width:20px;height:20px}:host .state-collapsed .icon{transform:translateX(-50%) rotateZ(90deg) rotateX(180deg);color:var(--sdds-sidebar-side-menu-single-item-color);margin-left:0;position:absolute;left:50%}@media (min-width: 992px){:host{display:block}}";
+
+const SideMenuCollapseButton = /*@__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: "button", tabindex: "0" }, h("div", { class: {
+        'wrapper': true,
+        'state-collapsed': this.collapsed,
+      } }, h("sdds-side-menu-item", { class: {
+        button: true,
+      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), "Collapse")))));
+  }
+  get host() { return this; }
+  static get style() { return sideMenuCollapseButtonCss; }
+}, [1, "sdds-side-menu-collapse-button", {
+    "collapsed": [32]
+  }, [[16, "sddsSideMenuCollapsed", "collapsedSideMenuEventHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-side-menu-collapse-button", "sdds-side-menu-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-side-menu-collapse-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SideMenuCollapseButton);
+      }
+      break;
+    case "sdds-side-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsSideMenuCollapseButton = SideMenuCollapseButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsSideMenuCollapseButton, defineCustomElement };
+
+//# sourceMappingURL=sdds-side-menu-collapse-button.js.map

package/dist/components/sdds-side-menu-collapse-button.js.map

@@ -0,0 +1 @@
+{"file":"sdds-side-menu-collapse-button.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,qcAAqc;;MCQ1d,sBAAsB;;;;;qBAGH,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,QAAQ,EAAC,QAAQ,EAAC,GAAG,IAC9B,WACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,iBAAiB,EAAE,IAAI,CAAC,SAAS;OAClC,IAED,2BACE,KAAK,EAAE;QACL,MAAM,EAAE,IAAI;OACb,IAED,aACE,WACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,IAEnB,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,2NAA2N,EAC7N,IAAI,EAAC,cAAc,GACnB,CACE,aAEJ,CACgB,CAClB,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.scss?tag=sdds-side-menu-collapse-button&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n@import '../../../../global/_variables.scss';\n\n:host {\n  position: sticky;\n  bottom: 0;\n  display: none;\n  height: 68px;\n  border-top: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n\n  .icon {\n    transform: rotateZ(90deg);\n    transition: all 0.2s ease-in-out;\n    width: 20px;\n    height: 20px;\n  }\n\n  .state-collapsed {\n    .icon {\n      transform: translateX(-50%) rotateZ(90deg) rotateX(180deg);\n      color: var(--sdds-sidebar-side-menu-single-item-color);\n      margin-left: 0;\n      position: absolute;\n      left: 50%;\n    }\n  }\n}\n\n@media (min-width: $grid-lg) {\n  :host {\n    display: block;\n  }\n}\n","import { Component, Element, h, Host, Listen, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\n\n@Component({\n  tag: 'sdds-side-menu-collapse-button',\n  styleUrl: 'side-menu-collapse-button.scss',\n  shadow: true,\n})\nexport class SideMenuCollapseButton {\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=\"button\" tabindex=\"0\">\n        <div\n          class={{\n            'wrapper': true,\n            'state-collapsed': this.collapsed,\n          }}\n        >\n          <sdds-side-menu-item\n            class={{\n              button: true,\n            }}\n          >\n            <a>\n              <svg\n                class=\"icon\"\n                slot=\"icon\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 32 32\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Collapse\n            </a>\n          </sdds-side-menu-item>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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;