@scania/tegel 0.0.5 → 0.0.6

package/dist/collection/components/message/message.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.stories.js","sourceRoot":"","sources":["../../../src/components/message/message.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,0GAA0G;MACvH,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,aAAa,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;MACvD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE;OACzC;KACF;IACD,mBAAmB,EAAE;MACnB,IAAI,EAAE,kBAAkB;MACxB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,SAAS;MACf,WAAW,EAAE,iBAAiB;MAC9B,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,0DAA0D;MACvE,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,QAAQ,EAAE,eAAe,CAAC;MACpC,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE;MAC7B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE;OAC3C;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,WAAW,EAAE,aAAa;IAC1B,mBAAmB,EAAE,IAAI;IACzB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,eAAe;GAC1B;CACF,CAAC;AAEF,MAAM,oBAAoB,GAAG;EAC3B,WAAW,EAAE,MAAM;EACnB,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,SAAS;EAClB,OAAO,EAAE,MAAM;CAChB,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,QAAQ,EACT,EAAE,EAAE;EACH,MAAM,gBAAgB,GACpB,WAAW,KAAK,aAAa;IAC3B,CAAC,CAAC,+BAA+B;IACjC,CAAC,CAAC,qBAAqB,WAAW,CAAC,WAAW,EAAE,EAAE,CAAC;EACvD,MAAM,SAAS,GACb,WAAW,KAAK,aAAa;IAC3B,CAAC,CAAC,+BAA+B;IACjC,CAAC,CAAC,qBAAqB,WAAW,CAAC,WAAW,EAAE,EAAE,CAAC;EACvD,MAAM,QAAQ,GACZ,QAAQ,KAAK,QAAQ;IACnB,CAAC,CAAC,yCAAyC,SAAS,IAAI,oBAAoB,CAAC,WAAW,CAAC,QAAQ;IACjG,CAAC,CAAC,4CAA4C,SAAS,WAAW,oBAAoB,CAAC,WAAW,CAAC,gCAAgC,CAAC;EAExI,OAAO,iBAAiB,CACtB;;;;;;;MAQE,QAAQ,KAAK,QAAQ;IACnB,CAAC,CAAC;;;aAGG;IACL,CAAC,CAAC,EACN;;iCAE6B,gBAAgB,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,0BAA0B,IACrF,mBAAmB,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EACzD;QACE,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,WAAW,CAAC,WAAW,EAAE,EAAE;QAC7F,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;;QAKtB,mBAAmB;IACjB,CAAC,CAAC,sHAAsH;IACxH,CAAC,CAAC,EACN;;;GAGH,CACA,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Message',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    messageType: {\n      name: 'Message type',\n      description: 'Changes the type of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Error', 'Warning', 'Success'],\n      table: {\n        defaultValue: { summary: 'Information' },\n      },\n    },\n    showExtendedMessage: {\n      name: 'Extended message',\n      description: 'Shows an extended message.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    noIcon: {\n      name: 'No icon',\n      description: 'Hides the icon.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Web Component' },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    messageType: 'Information',\n    showExtendedMessage: true,\n    noIcon: false,\n    iconType: 'Web Component',\n  },\n};\n\nconst nativeIconNameLookup = {\n  Information: 'info',\n  Error: 'error',\n  Warning: 'warning',\n  Success: 'tick',\n};\n\nconst Template = ({ \n  modeVariant, \n  messageType, \n  showExtendedMessage, \n  noIcon, \n  iconType \n}) => {\n  const messageTypeClass =\n    messageType === 'Information'\n      ? 'sdds-message-type-informative'\n      : `sdds-message-type-${messageType.toLowerCase()}`;\n  const iconClass =\n    messageType === 'Information'\n      ? 'sdds-message-icon-informative'\n      : `sdds-message-icon-${messageType.toLowerCase()}`;\n  const iconHtml =\n    iconType === 'Native'\n      ? `<i class=\"sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}\"></i>`\n      : `<div><sdds-icon class=\"sdds-message-icon ${iconClass}\" name=\"${nativeIconNameLookup[messageType]}\" size=\"20\"></sdds-icon></div>`;\n\n  return formatHtmlPreview(\n    `\n    <style>\n      .demo-wrapper {\n        width: 380px;\n      }\n    </style>\n\n    ${\n      iconType === 'Native'\n        ? `<style>\n    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    </style>`\n        : ''\n    }\n    <div class=\"demo-wrapper\">\n      <div class=\"sdds-message ${messageTypeClass} ${noIcon ? '' : 'sdds-message-icon-active'} ${\n        showExtendedMessage ? 'sdds-message-extended-active' : ''\n      } \n      ${modeVariant === 'Inherit from parent' ? '' : `sdds-mode-variant-${modeVariant.toLowerCase()}`}\">\n      ${noIcon ? '' : iconHtml}\n      <h4 class=\"sdds-message-single\">\n        Single line message goes here.\n      </h4>\n      ${\n        showExtendedMessage\n          ? '<p class=\"sdds-message-extended\">Longer message text can be placed here. Longer message text can be placed here.</p>'\n          : ''\n      }\n    </div>\n  </div>\n  `,\n  );\n};\n\nexport const Native = Template.bind({});\n"]}
+{"version":3,"file":"message.stories.js","sourceRoot":"","sources":["../../../src/components/message/message.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Message',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    messageType: {\n      name: 'Message type',\n      description: 'Changes the type of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Information', 'Error', 'Warning', 'Success'],\n      table: {\n        defaultValue: { summary: 'Information' },\n      },\n    },\n    showExtendedMessage: {\n      name: 'Extended message',\n      description: 'Shows an extended message.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: true },\n      },\n    },\n    noIcon: {\n      name: 'No icon',\n      description: 'Hides the icon.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    iconType: {\n      name: 'Icon type',\n      description: 'Switch between showing a native or a web component icon.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Native', 'Web Component'],\n      if: { arg: 'icon', eq: true },\n      table: {\n        defaultValue: { summary: 'Web Component' },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    messageType: 'Information',\n    showExtendedMessage: true,\n    noIcon: false,\n    iconType: 'Web Component',\n  },\n};\n\nconst nativeIconNameLookup = {\n  Information: 'info',\n  Error: 'error',\n  Warning: 'warning',\n  Success: 'tick',\n};\n\nconst Template = ({ modeVariant, messageType, showExtendedMessage, noIcon, iconType }) => {\n  const messageTypeClass =\n    messageType === 'Information'\n      ? 'sdds-message-type-informative'\n      : `sdds-message-type-${messageType.toLowerCase()}`;\n  const iconClass =\n    messageType === 'Information'\n      ? 'sdds-message-icon-informative'\n      : `sdds-message-icon-${messageType.toLowerCase()}`;\n  const iconHtml =\n    iconType === 'Native'\n      ? `<i class=\"sdds-message-icon sdds-icon ${iconClass} ${nativeIconNameLookup[messageType]}\"></i>`\n      : `<div class=\"sdds-message-icon ${iconClass}\"><sdds-icon name=\"${nativeIconNameLookup[messageType]}\" size=\"20\"></sdds-icon></div>`;\n\n  return formatHtmlPreview(\n    `\n    <style>\n      .demo-wrapper {\n        width: 380px;\n      }\n    </style>\n\n    ${\n      iconType === 'Native'\n        ? `<style>\n    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */\n    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');\n    </style>`\n        : ''\n    }\n    <div class=\"demo-wrapper\">\n      <div class=\"sdds-message ${messageTypeClass} ${noIcon ? '' : 'sdds-message-icon-active'} ${\n      showExtendedMessage ? 'sdds-message-extended-active' : ''\n    } \n      ${\n        modeVariant === 'Inherit from parent'\n          ? ''\n          : `sdds-mode-variant-${modeVariant.toLowerCase()}`\n      }\">\n      ${noIcon ? '' : iconHtml}\n      <h4 class=\"sdds-message-single\">\n        Single line message goes here.\n      </h4>\n      ${\n        showExtendedMessage\n          ? '<p class=\"sdds-message-extended\">Longer message text can be placed here. Longer message text can be placed here.</p>'\n          : ''\n      }\n    </div>\n  </div>\n  `,\n  );\n};\n\nexport const Native = Template.bind({});\n"]}

package/dist/collection/components/modal/modal.js

@@ -15,7 +15,6 @@ export class Modal {
     this.initializeReferenceElement = (referenceEl) => {
       if (referenceEl) {
         referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
           if (this.isShown) {
             this.handleClose(event);
           }

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

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Element,\n  Method,\n  State,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  @Element() host: HTMLElement;\n\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /** CSS selector for the element that will show the modal. */\n  @Prop() selector: string;\n\n  /** Element that will show the modal (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls whether the modal is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside. */\n  @Prop() show: boolean;\n\n  // State that keeps track of show/closed state for the modal.\n  @State() isShown: boolean = false;\n\n  /** Shows the modal.  */\n  @Method()\n  async showModal() {\n    this.handleShow();\n  }\n\n  /** Closes the modal. */\n  @Method()\n  async closeModal() {\n    this.handleClose();\n  }\n\n  /** Emitts when the modal is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<any>;\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n    this.setDissmissButtons();\n    this.setShowButton();\n  }\n\n  /** Emits a close event and then close the modal if it is not prevented. */\n  handleClose = (event?) => {\n    const closeEvent = this.sddsClose.emit(event);\n    if (!closeEvent.defaultPrevented) {\n      this.isShown = false;\n    }\n  };\n\n  handleShow = () => {\n    this.isShown = true;\n  };\n\n  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */\n  handleOverlayClick(event) {\n    const targetList = event.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.handleClose(event);\n    }\n  }\n\n  /** Adds an event listener to the reference element that shows/closes the modal. */\n  initializeReferenceElement = (referenceEl) => {\n    if (referenceEl) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.handleClose(event);\n        } else {\n          this.handleShow();\n        }\n      });\n    }\n  };\n\n  /** Check if there is a referenceElement or selector and adds event listener to them if so. */\n  setShowButton = () => {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n      if (referenceEl) {\n        this.initializeReferenceElement(referenceEl);\n      }\n    }\n  };\n\n  /** Adds an event listener to the dismiss buttons that closes the modal. */\n  setDissmissButtons() {\n    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {\n      dismissButton.addEventListener('click', (event) => {\n        this.handleClose(event);\n      });\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleOverlayClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button class=\"sdds-modal-close\" aria-label=\"close\" onClick={() => this.handleClose()}>\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/components/modal/modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Element,\n  Method,\n  State,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  @Element() host: HTMLElement;\n\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /** CSS selector for the element that will show the modal. */\n  @Prop() selector: string;\n\n  /** Element that will show the modal (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls whether the modal is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside. */\n  @Prop() show: boolean;\n\n  // State that keeps track of show/closed state for the modal.\n  @State() isShown: boolean = false;\n\n  /** Shows the modal.  */\n  @Method()\n  async showModal() {\n    this.handleShow();\n  }\n\n  /** Closes the modal. */\n  @Method()\n  async closeModal() {\n    this.handleClose();\n  }\n\n  /** Emitts when the modal is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<any>;\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n    this.setDissmissButtons();\n    this.setShowButton();\n  }\n\n  /** Emits a close event and then close the modal if it is not prevented. */\n  handleClose = (event?) => {\n    const closeEvent = this.sddsClose.emit(event);\n    if (!closeEvent.defaultPrevented) {\n      this.isShown = false;\n    }\n  };\n\n  handleShow = () => {\n    this.isShown = true;\n  };\n\n  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */\n  handleOverlayClick(event) {\n    const targetList = event.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.handleClose(event);\n    }\n  }\n\n  /** Adds an event listener to the reference element that shows/closes the modal. */\n  initializeReferenceElement = (referenceEl) => {\n    if (referenceEl) {\n      referenceEl.addEventListener('click', (event) => {\n        if (this.isShown) {\n          this.handleClose(event);\n        } else {\n          this.handleShow();\n        }\n      });\n    }\n  };\n\n  /** Check if there is a referenceElement or selector and adds event listener to them if so. */\n  setShowButton = () => {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n      if (referenceEl) {\n        this.initializeReferenceElement(referenceEl);\n      }\n    }\n  };\n\n  /** Adds an event listener to the dismiss buttons that closes the modal. */\n  setDissmissButtons() {\n    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {\n      dismissButton.addEventListener('click', (event) => {\n        this.handleClose(event);\n      });\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleOverlayClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button class=\"sdds-modal-close\" aria-label=\"close\" onClick={() => this.handleClose()}>\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-button/radio-button-component.stories.js

@@ -61,7 +61,9 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
     ${disabled ? 'disabled' : ''}
     checked="true" 
   >
-    ${label} 1
+    <div slot="label">
+      ${label} 1
+    </div>
   </sdds-radio-button>
 
   <sdds-radio-button
@@ -71,7 +73,9 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
     required=false
     ${disabled ? 'disabled' : ''} 
   >
-    ${label} 2
+    <div slot="label">
+      ${label} 2
+    </div>
   </sdds-radio-button>
     
   </fieldset>
@@ -79,7 +83,7 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
   <!-- Script tag with eventlistener for demo purposes. -->
   <script>
   document.addEventListener('sddsChange', (event) => {
-    console.log('Radio button with id: ', event.detail.radioId, ' with value:', event.detail.value, ' was selected.')
+    console.log(event)
   })
   </script>
   `);

package/dist/collection/components/radio-button/radio-button-component.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-component.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button-component.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sCAAsC;MACnD,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE,CACrC,iBAAiB,CAAC;;;;;;;;;;;;;;;;MAgBd,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;MAG1B,KAAK;;;;;;;;MAQL,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;MAE1B,KAAK;;;;;;;;;;;GAWR,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Radio Button',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label',\n      description: 'Sets the label for the radio button.',\n      controls: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the radio button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    label: 'Label text',\n    disabled: false,\n  },\n};\n\nconst Template = ({label, disabled}) =>\n  formatHtmlPreview(`\n  <style>\n  .demo-fieldset-reset { \n    border: 0;\n    margin: 0;\n    min-width: 0;\n    padding: 0; \n  }\n</style>\n\n  <fieldset class=\"demo-fieldset-reset\">\n  <sdds-radio-button \n    name=\"rb-example\"\n    value=\"option1\"\n    radio-id=\"option-1\"\n    required=false\n    ${disabled ? 'disabled' : ''}\n    checked=\"true\" \n  >\n    ${label} 1\n  </sdds-radio-button>\n\n  <sdds-radio-button\n    name=\"rb-example\"\n    value=\"option2\"\n    radio-id=\"option-2\"\n    required=false\n    ${disabled ? 'disabled' : ''} \n  >\n    ${label} 2\n  </sdds-radio-button>\n    \n  </fieldset>\n\n  <!-- Script tag with eventlistener for demo purposes. -->\n  <script>\n  document.addEventListener('sddsChange', (event) => {\n    console.log('Radio button with id: ', event.detail.radioId, ' with value:', event.detail.value, ' was selected.')\n  })\n  </script>\n  `);\n\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"radio-button-component.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button-component.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sCAAsC;MACnD,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CACvC,iBAAiB,CAAC;;;;;;;;;;;;;;;;MAgBd,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;QAIxB,KAAK;;;;;;;;;MASP,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;QAGxB,KAAK;;;;;;;;;;;;GAYV,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Radio Button',\n  parameters: {\n    notes: readme,\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label',\n      description: 'Sets the label for the radio button.',\n      controls: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the radio button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    label: 'Label text',\n    disabled: false,\n  },\n};\n\nconst Template = ({ label, disabled }) =>\n  formatHtmlPreview(`\n  <style>\n  .demo-fieldset-reset { \n    border: 0;\n    margin: 0;\n    min-width: 0;\n    padding: 0; \n  }\n</style>\n\n  <fieldset class=\"demo-fieldset-reset\">\n  <sdds-radio-button \n    name=\"rb-example\"\n    value=\"option1\"\n    radio-id=\"option-1\"\n    required=false\n    ${disabled ? 'disabled' : ''}\n    checked=\"true\" \n  >\n    <div slot=\"label\">\n      ${label} 1\n    </div>\n  </sdds-radio-button>\n\n  <sdds-radio-button\n    name=\"rb-example\"\n    value=\"option2\"\n    radio-id=\"option-2\"\n    required=false\n    ${disabled ? 'disabled' : ''} \n  >\n    <div slot=\"label\">\n      ${label} 2\n    </div>\n  </sdds-radio-button>\n    \n  </fieldset>\n\n  <!-- Script tag with eventlistener for demo purposes. -->\n  <script>\n  document.addEventListener('sddsChange', (event) => {\n    console.log(event)\n  })\n  </script>\n  `);\n\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1,6 +1,12 @@
 import { h } from '@stencil/core';
 export class RadioButton {
   constructor() {
+    this.handleChange = () => {
+      this.sddsChange.emit({
+        radioId: this.radioId,
+        value: this.value,
+      });
+    };
     this.name = undefined;
     this.value = undefined;
     this.radioId = crypto.randomUUID();
@@ -11,14 +17,9 @@ export class RadioButton {
   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-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))));
+      required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
   }
   static get is() { return "sdds-radio-button"; }
   static get encapsulation() { return "scoped"; }
@@ -147,7 +148,7 @@ export class RadioButton {
         "method": "sddsChange",
         "name": "sddsChange",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AASjF,MAAM,OAAO,WAAW;;;;mBAiBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,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;QAE1B,8DAA8D;QAC9D,yCAAyC;QACzC,gEAAgE;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,GAAG,EAAE;UACb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAClB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;WACnB,CAAC,CAAA;QACJ,CAAC,GAAI;MACL,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO;QAC1B,eAAa,CACP,CACF,CACT,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AASjF,MAAM,OAAO,WAAW;;IAyCtB,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;;;mBA9BwB,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAuBjC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,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;QAC1B,8DAA8D;QAC9D,wCAAwC;QACxC,gEAAgE;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GACnC;MACF,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO;QAC1B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/side-menu/side-menu.stories.js

@@ -108,7 +108,7 @@ const Template = ({ showIcons, collapsed }) => {
           </li>
         </ul>
       </li>
-      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__extended">
+      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__item--selected sdds-sidebar-nav__extended">
       <button class="sdds-sidebar-nav__item-link">
       <div>
         <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
@@ -179,5 +179,5 @@ const Template = ({ showIcons, collapsed }) => {
 </script>
   `);
 };
-export const Default = Template.bind({});
+export const Native = Template.bind({});
 //# sourceMappingURL=side-menu.stories.js.map

package/dist/collection/components/side-menu/side-menu.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-menu.stories.js","sourceRoot":"","sources":["../../../src/components/side-menu/side-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,sDAAsD;MACnE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE;KACpC;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;GACjB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE;EAC5C,MAAM,KAAK,GAAG,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;EAE1E,OAAO,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;uCAyBY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;;;;;yDAMV,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqG3D,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Side Menu',\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    collapsed: {\n      name: 'Collapsed',\n      description: 'Toggle the side menus collapsed state.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    showIcons: {\n      name: 'Show icons',\n      description: 'Toggle if icons for side menu options are displayed.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'collapsed', neq: true },\n    },\n  },\n  args: {\n    collapsed: false,\n    showIcons: false,\n  },\n};\n\nconst Template = ({ showIcons, collapsed }) => {\n  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';\n\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    align-items: stretch;\n    height: 100vh;\n  }\n  .sdds-container {\n    overflow-y: auto;\n    max-width: 10000px;\n  }\n</style>\n\n<nav class=\"sdds-nav\">\n  <div class=\"sdds-nav__left\">\n    <button class=\"sdds-nav__mob-menu-btn\">\n      <sdds-icon name=\"burger\" size=\"20px\"></sdds-icon>\n    </button>\n    <div class=\"sdds-nav__app-name\">My application</div>\n  </div>\n  <div class=\"sdds-nav__right\">\n    <a class=\"sdds-nav__item sdds-nav__app-logo\" href=\"#\"></a>\n  </div>\n</nav>\n<div class=\"sdds-push demo-wrapper\">\n  <div class=\"sdds-sidebar side-menu ${collapsed ? 'collapsed' : ''}\">\n    <div class=\"sdds-sidebar-mheader\">\n    <button class=\"sdds-sidebar-mheader__close\">\n      <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n    </button>\n    </div>\n    <ul class=\"sdds-sidebar-nav sdds-sidebar-nav--main ${icons}\">\n      <li class=\"sdds-sidebar-nav__item sdds-sidebar-nav__extended\">\n        <button class=\"sdds-sidebar-nav__item-link\">\n          <div>\n            <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n          </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Sub-menu</span>\n          <div>\n            <sdds-icon class=\"sdds-sidebar-nav__chevron\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n          </div>\n        </button>\n        <ul class=\"sdds-sidebar-nav-subnav\">\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <span class=\"sdds-sidebar-nav__item-title\">Sub-menu</span>\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n        </ul>\n      </li>\n      <li class=\"sdds-sidebar-nav__item sdds-sidebar-nav__extended\">\n      <button class=\"sdds-sidebar-nav__item-link\">\n      <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n      <span class=\"sdds-sidebar-nav__item-text\">Sub-menu</span>\n      <div>\n        <sdds-icon class=\"sdds-sidebar-nav__chevron\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n      </div>\n      </button>\n        <ul class=\"sdds-sidebar-nav-subnav\">\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <span class=\"sdds-sidebar-nav__item-title\">Sub-menu</span>\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n        </ul>\n      </li>\n      <li class=\"sdds-sidebar-nav__item\">\n        <a class=\"sdds-sidebar-nav__item-link\" href=\"#\">\n        <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Page link</span>\n        </a>\n      </li>\n      <li class=\"sdds-sidebar-nav__item\">\n        <a class=\"sdds-sidebar-nav__item-link\" href=\"#\">\n        <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Page link</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"sdds-container\" style=\"padding-top: 30px\">\n  </div>\n</div>\n\n\n<script>\n    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n  document.querySelector('button.sdds-nav__mob-menu-btn').addEventListener('click', () => {\n    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')\n  })\n  document.querySelector('button.sdds-sidebar-mheader__close').addEventListener('click', () => {\n    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')\n  })\n  expandableListItems = document.getElementsByClassName('sdds-sidebar-nav__extended');\n  for (let i = 0; i < expandableListItems.length; i++) {\n    expandableListItems[i].addEventListener('click', () => {\n      document.getElementsByClassName('sdds-sidebar-nav__extended')[i].classList.toggle('subnav-open');\n    });\n  }\n</script>\n  `);\n};\n\nexport const Default = Template.bind({});\n"]}
+{"version":3,"file":"side-menu.stories.js","sourceRoot":"","sources":["../../../src/components/side-menu/side-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,sDAAsD;MACnE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE;KACpC;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;GACjB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE;EAC5C,MAAM,KAAK,GAAG,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;EAE1E,OAAO,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;uCAyBY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;;;;;yDAMV,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqG3D,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Side Menu',\n  parameters: {\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    collapsed: {\n      name: 'Collapsed',\n      description: 'Toggle the side menus collapsed state.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    showIcons: {\n      name: 'Show icons',\n      description: 'Toggle if icons for side menu options are displayed.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'collapsed', neq: true },\n    },\n  },\n  args: {\n    collapsed: false,\n    showIcons: false,\n  },\n};\n\nconst Template = ({ showIcons, collapsed }) => {\n  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';\n\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    align-items: stretch;\n    height: 100vh;\n  }\n  .sdds-container {\n    overflow-y: auto;\n    max-width: 10000px;\n  }\n</style>\n\n<nav class=\"sdds-nav\">\n  <div class=\"sdds-nav__left\">\n    <button class=\"sdds-nav__mob-menu-btn\">\n      <sdds-icon name=\"burger\" size=\"20px\"></sdds-icon>\n    </button>\n    <div class=\"sdds-nav__app-name\">My application</div>\n  </div>\n  <div class=\"sdds-nav__right\">\n    <a class=\"sdds-nav__item sdds-nav__app-logo\" href=\"#\"></a>\n  </div>\n</nav>\n<div class=\"sdds-push demo-wrapper\">\n  <div class=\"sdds-sidebar side-menu ${collapsed ? 'collapsed' : ''}\">\n    <div class=\"sdds-sidebar-mheader\">\n    <button class=\"sdds-sidebar-mheader__close\">\n      <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n    </button>\n    </div>\n    <ul class=\"sdds-sidebar-nav sdds-sidebar-nav--main ${icons}\">\n      <li class=\"sdds-sidebar-nav__item sdds-sidebar-nav__extended\">\n        <button class=\"sdds-sidebar-nav__item-link\">\n          <div>\n            <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n          </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Sub-menu</span>\n          <div>\n            <sdds-icon class=\"sdds-sidebar-nav__chevron\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n          </div>\n        </button>\n        <ul class=\"sdds-sidebar-nav-subnav\">\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <span class=\"sdds-sidebar-nav__item-title\">Sub-menu</span>\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n        </ul>\n      </li>\n      <li class=\"sdds-sidebar-nav__item sdds-sidebar-nav__item--selected sdds-sidebar-nav__extended\">\n      <button class=\"sdds-sidebar-nav__item-link\">\n      <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n      <span class=\"sdds-sidebar-nav__item-text\">Sub-menu</span>\n      <div>\n        <sdds-icon class=\"sdds-sidebar-nav__chevron\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n      </div>\n      </button>\n        <ul class=\"sdds-sidebar-nav-subnav\">\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <span class=\"sdds-sidebar-nav__item-title\">Sub-menu</span>\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n        </ul>\n      </li>\n      <li class=\"sdds-sidebar-nav__item\">\n        <a class=\"sdds-sidebar-nav__item-link\" href=\"#\">\n        <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Page link</span>\n        </a>\n      </li>\n      <li class=\"sdds-sidebar-nav__item\">\n        <a class=\"sdds-sidebar-nav__item-link\" href=\"#\">\n        <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Page link</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"sdds-container\" style=\"padding-top: 30px\">\n  </div>\n</div>\n\n\n<script>\n    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n  document.querySelector('button.sdds-nav__mob-menu-btn').addEventListener('click', () => {\n    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')\n  })\n  document.querySelector('button.sdds-sidebar-mheader__close').addEventListener('click', () => {\n    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')\n  })\n  expandableListItems = document.getElementsByClassName('sdds-sidebar-nav__extended');\n  for (let i = 0; i < expandableListItems.length; i++) {\n    expandableListItems[i].addEventListener('click', () => {\n      document.getElementsByClassName('sdds-sidebar-nav__extended')[i].classList.toggle('subnav-open');\n    });\n  }\n</script>\n  `);\n};\n\nexport const Native = Template.bind({});\n"]}

package/dist/collection/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.css

@@ -0,0 +1,26 @@
+: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);
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.js

@@ -0,0 +1,22 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../../utils/utils';
+export class SideMenuCloseButton {
+  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" }))));
+  }
+  static get is() { return "sdds-side-menu-close-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-close-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-close-button.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=side-menu-close-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-close-button.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAOhE,MAAM,OAAO,mBAAmB;EAG9B,MAAM;IACJ,MAAM,WAAW,mBACf,YAAY,EAAE,OAAO,IAClB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACF,OAAO,CACL,EAAC,IAAI;MACH,8BAAY,WAAW;QACrB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.css

@@ -0,0 +1,30 @@
+/*
+  Contains spacing variables for the layout
+*/
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+: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;
+  }
+}

package/dist/collection/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.js

@@ -0,0 +1,49 @@
+import { h, Host } from '@stencil/core';
+export class SideMenuCollapseButton {
+  constructor() {
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "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")))));
+  }
+  static get is() { return "sdds-side-menu-collapse-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.css"]
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=side-menu-collapse-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-collapse-button.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ3E,MAAM,OAAO,sBAAsB;;qBAGH,KAAK;;EAKnC,6BAA6B,CAAC,KAAkC;IAC9D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;EAC7C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG;MAC9B,WACE,KAAK,EAAE;UACL,SAAS,EAAE,IAAI;UACf,iBAAiB,EAAE,IAAI,CAAC,SAAS;SAClC;QAED,2BACE,KAAK,EAAE;YACL,MAAM,EAAE,IAAI;WACb;UAED;YACE,WACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW;cAEnB,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,2NAA2N,EAC7N,IAAI,EAAC,cAAc,GACnB,CACE;uBAEJ,CACgB,CAClB,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1,42 @@
+: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;
+}

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

@@ -0,0 +1,167 @@
+import { Fragment, h, Host } from '@stencil/core';
+export class SideMenuDropdown {
+  constructor() {
+    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)))));
+  }
+  static get is() { return "sdds-side-menu-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "defaultOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the dropdown should be open from the start."
+        },
+        "attribute": "default-open",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "buttonLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the button-label slot."
+        },
+        "attribute": "button-label",
+        "reflect": false
+      },
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the button that opens the dropdown should appear selected."
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "hoverState": {},
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "pointerenter",
+        "method": "onEventPointerEnter",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "focusin",
+        "method": "onEventFocus",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "pointerleave",
+        "method": "onEventPointerLeave",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "focusout",
+        "method": "onEventBlur",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=side-menu-dropdown.js.map