@scania/tegel 0.0.6 → 0.0.7

package/dist/components/sdds-modal.js.map

@@ -1 +0,0 @@
-{"file":"sdds-modal.js","mappings":"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","names":[],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n  $screen-s: (\n    xs: 100%,\n    sm: 100%,\n    md: 100%,\n    lg: 100%,\n  ),\n  $screen-md: (\n    xs: 75%,\n    sm: 62.5%,\n    md: 75%,\n    lg: 100%,\n  ),\n  $screen-l: (\n    xs: 31.25%,\n    sm: 43.75%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xl: (\n    xs: 31.25%,\n    sm: 37.5%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xxl: (\n    xs: 25%,\n    sm: 37.5%,\n    md: 50%,\n    lg: 75%,\n  ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n  }\n}\n\n@mixin modal-scroll-outer {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n    border-radius: 0 1em 1em 0;\n  }\n}\n\n@mixin modal-host {\n  left: 0;\n  top: 0;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  z-index: z(modal);\n  background-color: var(--sdds-modal-backdrop);\n  padding: 0 16px;\n\n  @media (max-width: $screen-s) {\n    padding: 0;\n  }\n\n  &.show {\n    display: flex;\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n\n@mixin modal-header {\n  display: flex;\n  padding-bottom: var(--sdds-spacing-element-8);\n  position: sticky;\n  top: 0;\n  background-color: var(--sdds-modal-background);\n  z-index: 1;\n\n  &::before {\n    content: ' ';\n    position: absolute;\n    height: 16px;\n    top: -16px;\n    width: 100%;\n    background-color: var(--sdds-modal-background);\n  }\n}\n\n@mixin modal-headline {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-headline-05);\n  letter-spacing: var(--sdds-headline-05-ls);\n  margin: 0;\n  flex: 1;\n}\n\n@mixin modal-body {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-body-01);\n  letter-spacing: var(--sdds-body-01-ls);\n  padding-bottom: 40px;\n  overflow-y: visible;\n  padding-right: 16px;\n  @include modal-scroll-inner;\n\n  @media (min-width: $screen-l) {\n    padding-right: 64px;\n  }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-modal-background);\n  margin: auto;\n  position: relative;\n  border-radius: 4px;\n  padding: 16px;\n  max-height: 85vh;\n  overflow-y: auto;\n\n  @include modal-scroll-outer;\n\n  &__actions-sticky {\n    overflow: hidden;\n\n    .sdds-modal-body {\n      font: var(--sdds-body-01);\n      letter-spacing: var(--sdds-body-01-ls);\n      padding-bottom: 96px;\n      margin: 0 -16px 0 0;\n      max-height: calc(85vh - 36px);\n      overflow-y: auto;\n    }\n\n    .sdds-modal-actions {\n      position: absolute;\n      bottom: -1px;\n      left: 0;\n      right: 0;\n      background-color: var(--sdds-modal-background);\n      padding: var(--sdds-spacing-element-16);\n      display: flex;\n      gap: 16px;\n    }\n  }\n\n  &__actions-static {\n    .sdds-modal-actions {\n      background-color: var(--sdds-modal-background);\n      display: flex;\n      gap: 16px;\n    }\n  }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n  @media (min-width: $screen) {\n    @each $modal, $value in $modals {\n      .sdds-modal-#{$modal} {\n        width: $value;\n      }\n    }\n  }\n}\n\n@media (max-width: $screen-s) {\n  .sdds-modal-md,\n  .sdds-modal-lg,\n  .sdds-modal-sm {\n    height: 100%;\n\n    slot[name='sdds-modal-actions']::slotted(*) {\n      display: flex;\n    }\n  }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n  @include modal-header;\n}\n\n.sdds-modal-headline {\n  @include modal-headline;\n\n  color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n  @include modal-body;\n}\n\n.sdds-modal-backdrop {\n  @include sdds-box-sizing;\n  @include modal-host;\n}\n\nbutton.sdds-modal-close {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  appearance: unset;\n}\n\n.sdds-modal-close {\n  display: inline-block;\n  height: auto;\n  color: var(--sdds-modal-icon);\n  cursor: pointer;\n\n  &:focus {\n    @include sdds-focus-state;\n  }\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n  display: inline-block;\n  height: auto;\n  background-repeat: no-repeat;\n  cursor: pointer;\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n\n  svg {\n    fill: var(--sdds-modal-icon);\n  }\n}\n\n.sdds-modal-overflow {\n  overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n  @include modal-host;\n\n  .sdds-modal-close {\n    border: none;\n    background-color: transparent;\n  }\n\n  .sdds-modal-close-btn {\n    border: none;\n    background-color: transparent;\n  }\n}\n\n:host(.show) {\n  display: flex;\n}\n\n:host(.hide) {\n  display: none;\n}\n","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"],"version":3}

package/dist/components/sdds-navigation-tab.js.map

@@ -1 +0,0 @@
-{"file":"sdds-navigation-tab.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,w1CAAw1C;;MCOx2CA,mBAAiB;;;;;oBAEA,KAAK;oBAEJ,KAAK;;;EAIlC,MAAM,WAAW,CAAC,QAAiB;IACjC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;GAC1B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,WACE,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;aAC3D,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAEpC,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsNavigationTab"],"sources":["./src/components/tabs/navigation-tabs/navigation-tab/sdds-navigation-tab.scss?tag=sdds-navigation-tab&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tab/sdds-navigation-tab.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  z-index: z(tab);\n  display: block;\n\n  ::slotted(*) {\n    all: unset;\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out 0s;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n    width: 100%;\n    margin: 26px 4px;\n  }\n\n  ::slotted(*:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n  .navigation-tab-item {\n    position: relative;\n    margin-right: 32px;\n\n    &:hover {\n      cursor: pointer;\n\n      &::after {\n        width: 100%;\n      }\n    }\n  }\n\n  .navigation-tab-item::after {\n    content: ' ';\n    position: absolute;\n    bottom: -26px;\n    right: 0;\n    left: 0;\n    margin-left: auto;\n    width: 0%;\n    margin-right: auto;\n    height: 2px;\n    background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n    transition: width 0.15s ease-in-out 0s;\n    z-index: 1;\n  }\n\n  .selected {\n    ::slotted(*) {\n      color: var(--sdds-navigation-tabs-tab-color-selected);\n    }\n\n    &::after {\n      width: 100%;\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n    }\n  }\n\n  .disabled {\n    color: var(--sdds-navigation-tabs-tab-color-disabled);\n    pointer-events: none;\n\n    ::slotted(*) {\n      opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n    }\n  }\n}\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}\n","import { Component, Host, h, Prop, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tab',\n  styleUrl: 'sdds-navigation-tab.scss',\n  shadow: true,\n})\nexport class SddsNavigationTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setSelected(selected: boolean) {\n    this.selected = selected;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={`navigation-tab-item  ${this.selected ? 'selected' : ''}\n           ${this.disabled ? 'disabled' : ''}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-navigation-tabs.js.map

@@ -1 +0,0 @@
-{"file":"sdds-navigation-tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs.scss?tag=sdds-navigation-tabs&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: flex;\n  background-color: var(--sdds-inline-tabs-background);\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .scroll-right-button {\n    right: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-left-button {\n    left: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-right-button,\n  .scroll-left-button {\n    color: var(--sdds-folder-tabs-scroll-btn-color);\n    cursor: pointer;\n    border: 0;\n    width: 0;\n    background-color: var(--sdds-inline-tabs-scroll-btn-background);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n    position: sticky;\n\n    &.show {\n      min-width: 48px;\n      display: block;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    svg {\n      fill: var(--sdds-folder-tabs-scroll-btn-color);\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  State,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs',\n  styleUrl: 'navigation-tabs.scss',\n  shadow: true,\n})\nexport class NavigationTabs {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = 'primary';\n\n  /** Sets the default selected tab. */\n  @Prop() defaultSelectedIndex: number = 0;\n\n  /** Sets the selected tab.\n   * If this is set all tab changes needs to be handled by the user. */\n  @Prop({ reflect: true }) selectedIndex: number;\n\n  @Element() host: HTMLElement;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  private componentWidth: number = 0; // visible width of this component\n\n  private buttonsWidth: number = 0; // total width of all nav items combined\n\n  private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  private children: Array<HTMLSddsNavigationTabElement>;\n\n  /** Sets the passed tabindex as the selected tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.setSelected(false));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setSelected(true);\n          this.selectedIndex = tabIndex;\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTabIndex: this.selectedIndex,\n    };\n  }\n\n  /** Event emitted when the selected tab is changed. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTabIndex: number;\n  }>;\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  addResizeObserver = () => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-navigation-tabs-tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  addEventListenerToTabs = () => {\n    this.children = Array.from(this.host.children) as Array<HTMLSddsNavigationTabElement>;\n    this.children = this.children.map((item, index) => {\n      item.addEventListener('click', () => {\n        const sddsChangeEvent = this.sddsChange.emit({\n          selectedTabIndex: this.children.indexOf(item)\n        });\n        if(!sddsChangeEvent.defaultPrevented) {\n          if (!item.disabled) {\n            this.children.forEach((element) => element.setSelected(false));\n            item.setSelected(true);\n            this.selectedIndex = index;\n            this.sddsChange.emit({\n              selectedTabIndex: this.selectedIndex,\n            });\n          }\n        }\n      });\n      return item;\n    });\n  };\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<any>;\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad = () => {\n    if (this.selectedIndex === undefined) {\n      this.addEventListenerToTabs();\n      this.children[this.defaultSelectedIndex].setSelected(true);\n      this.selectedIndex = this.defaultSelectedIndex;\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    } else {\n      this.children[this.selectedIndex].setSelected(true);\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    }\n  };\n\n  componentDidRender() {\n    this.addResizeObserver();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"list\"\n        class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}\n      >\n        <div\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            onClick={() => this.scrollLeft()}\n            disabled={!this.showLeftScroll}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot />\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            onClick={() => this.scrollRight()}\n            disabled={!this.showRightScroll}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-popover-canvas.js.map

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

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

@@ -1 +0,0 @@
-{"file":"sdds-popover-menu.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,oUAAoU;;MCS9U,WAAW;;;;;oBAIK,EAAE;;gBAML,KAAK;qBAGE,MAAM;0BAGJ,CAAC;0BAGD,CAAC;6BAEI,KAAK;;;;EAO3C,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;GACF;EAED,gBAAgB;;IACd,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;IAEnC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE;MACvE,QAAQ,EAAE,OAAO;MACjB,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;WACnD;SACF;OACF;KACF,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG;MACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB,CAAC;IAEF,MAAM,QAAQ,GAAG;MACf,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB,CAAC;IAEF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,IAAI,CAAC,IAAI,EAAE;QACb,QAAQ,EAAE,CAAC;OACZ;WAAM;QACL,QAAQ,EAAE,CAAC;OACZ;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK;MAC1D,KAAK,CAAC,eAAe,EAAE,CAAC;KACzB,CAAC,CAAC;GACJ;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;;;MAGxC,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;GACpC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;GAChC;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI,GAAG,wBAAwB,GAAG,EAAE,EAAE,IAC3E,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/popover-menu/popover-menu.scss?tag=sdds-popover-menu&encapsulation=shadow","./src/components/popover-menu/popover-menu.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  overflow: hidden;\n  width: 160px;\n  background-color: var(--sdds-popover-menu-background);\n  padding: 16px;\n  box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n  border-radius: 4px;\n  display: none;\n  z-index: z(tooltip);\n}\n\n:host(.sdds-popover-menu-show) {\n  opacity: 1;\n  display: block;\n}\n","import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-menu',\n  styleUrl: 'popover-menu.scss',\n  shadow: true,\n})\nexport class PopoverMenu {\n  @Element() popoverMenuElement!: HTMLElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Decides if the Popover Menu should be visible from the start */\n  @Prop() show: boolean = false;\n\n  /** Decides the placement of the Popover Menu */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @Listen('mousedown', { target: 'window' })\n  handleOutsideClick() {\n    if (this.show) {\n      this.show = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n    this.renderedShowValue = this.show;\n\n    this.popperInstance = createPopper(this.target, this.popoverMenuElement, {\n      strategy: 'fixed',\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showMenu = () => {\n      this.show = true;\n    };\n\n    const hideMenu = () => {\n      this.show = false;\n    };\n\n    this.target.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n\n      if (this.show) {\n        hideMenu();\n      } else {\n        showMenu();\n      }\n    });\n\n    this.popoverMenuElement.addEventListener('mousemove', (event) => {\n      event.stopPropagation();\n    });\n\n    this.popoverMenuElement.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n    });\n  }\n\n  componentDidRender() {\n    if (this.show && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.show;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"file":"sdds-side-menu-dropdown-list.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,oRAAoR;;MCQvS,oBAAoB;;;;;qBAGD,KAAK;;EAKnC,6BAA6B,CAAC,KAAkC;IAC9D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;GAC5C;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,MAAM,IACf,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI,CAAC,SAAS;OAClC,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.scss?tag=sdds-side-menu-dropdown-list&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 190px;\n\n  [role='list'] {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    border-radius: none;\n    background-color: var(--sdds-header-app-launcher-menu-bg);\n  }\n\n  .state-collapsed {\n    ::slotted(*) {\n      border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n    }\n  }\n}\n","import { Component, Host, h, Listen, Element, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\n\n@Component({\n  tag: 'sdds-side-menu-dropdown-list',\n  styleUrl: 'side-menu-dropdown-list.scss',\n  shadow: true,\n})\nexport class SideMenuDropdownList {\n  @Element() host: HTMLElement;\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n  }\n\n  connectedCallback() {\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl.collapsed;\n  }\n\n  render() {\n    return (\n      <Host role=\"list\">\n        <div\n          class={{\n            'state-collapsed': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"sdds-side-menu-dropdown.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,+2BAA+2B;;MCQ93B,gBAAgB;;;;;uBAII,KAAK;;oBAOR,KAAK;gBAER,KAAK;;qBAIA,KAAK;;EAKnC,6BAA6B,CAAC,KAAkC;IAC9D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;GACzC;EAGD,mBAAmB;IACjB,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAGD,YAAY;IACV,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAGD,mBAAmB;IACjB,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAGD,WAAW;IACT,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;GAC9D;EAED,mBAAmB;IACjB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IAC1B,MAAM,uBAAuB,GAAG,GAAG,CAAC;IACpC,UAAU,CAAC;MACT,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,MAAM,EAAE;QACnE,IAAI,CAAC,UAAU,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;OAC/D;KACF,EAAE,uBAAuB,CAAC,CAAC;GAC7B;EAED,cAAc;;IACZ,OAAO,IAAI,CAAC,SAAS,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC;GAChE;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;IAC3C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;GAC9B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,YAAY,EAAE,IAAI,CAAC,cAAc,EAAE;QACnC,iBAAiB,EAAE,IAAI,CAAC,SAAS;OAClC,IAED,2BACE,KAAK,EAAC,QAAQ,EACd,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE;QACP,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;OACxB,IAED,kBACE,YAAM,IAAI,EAAC,aAAa,GAAQ,EAC/B,CAAC,IAAI,CAAC,SAAS,KACd,EAAC,QAAQ,QACN,IAAI,CAAC,WAAW,EACjB,YAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,iBAAW,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACpE,CACZ,CACM,CACW,EACtB,WAAK,KAAK,EAAC,MAAM,IACd,IAAI,CAAC,SAAS,KACb,UAAI,KAAK,EAAC,mBAAmB,IAC1B,IAAI,CAAC,WAAW,EACjB,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC9B,CACN,EACD,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.scss?tag=sdds-side-menu-dropdown&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .dropdown-icon {\n    margin-left: auto;\n    transition: all 0.2s ease-in-out;\n  }\n\n  .state-open {\n    .dropdown-icon {\n      transform: rotateZ(180deg);\n    }\n\n    .menu {\n      display: block;\n    }\n  }\n\n  .state-collapsed {\n    .menu {\n      --side-menu-width: 68px;\n\n      position: absolute;\n      left: var(--side-menu-width);\n      box-shadow: var(--sdds-nav-dropdown-menu-box);\n      background-color: var(--sdds-header-app-launcher-menu-background);\n\n      .heading-collapsed {\n        all: unset;\n        box-sizing: border-box;\n        padding: 16px 24px 15px;\n        min-height: 48px;\n        display: flex;\n        align-items: center;\n        border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n        font: var(--sdds-headline-07);\n        letter-spacing: var(--sdds-headline-07-ls);\n      }\n    }\n  }\n\n  :not(.state-collapsed) {\n    .menu {\n      ::slotted(sdds-side-menu-dropdown-list) {\n        width: 100%;\n      }\n    }\n  }\n\n  .menu {\n    display: none;\n    flex-direction: column;\n  }\n}\n","import { Component, Element, Fragment, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\n\n@Component({\n  tag: 'sdds-side-menu-dropdown',\n  styleUrl: 'side-menu-dropdown.scss',\n  shadow: true,\n})\nexport class SideMenuDropdown {\n  @Element() host: HTMLElement;\n\n  /** If the dropdown should be open from the start. */\n  @Prop() defaultOpen: boolean = false;\n\n  /** The label of the button that opens the dropdown.\n   * This is an alternative to the button-label slot. */\n  @Prop() buttonLabel: string;\n\n  /** If the button that opens the dropdown should appear selected. */\n  @Prop() selected: boolean = false;\n\n  @State() open: boolean = false;\n\n  @State() hoverState: { isHovered: boolean; updatedAt: number };\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n  }\n\n  @Listen('pointerenter')\n  onEventPointerEnter() {\n    this.setHoverStateOpen();\n  }\n\n  @Listen('focusin')\n  onEventFocus() {\n    this.setHoverStateOpen();\n  }\n\n  @Listen('pointerleave')\n  onEventPointerLeave() {\n    this.setHoverStateClosed();\n  }\n\n  @Listen('focusout')\n  onEventBlur() {\n    this.setHoverStateClosed();\n  }\n\n  setHoverStateOpen() {\n    this.hoverState = { isHovered: true, updatedAt: Date.now() };\n  }\n\n  setHoverStateClosed() {\n    const leftAt = Date.now();\n    const toleranceInMilliseconds = 150;\n    setTimeout(() => {\n      if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {\n        this.hoverState = { isHovered: false, updatedAt: Date.now() };\n      }\n    }, toleranceInMilliseconds);\n  }\n\n  getIsOpenState() {\n    return this.collapsed ? this.hoverState?.isHovered : this.open;\n  }\n\n  connectedCallback() {\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl.collapsed;\n    this.open = this.defaultOpen;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'wrapper': true,\n            'state-open': this.getIsOpenState(),\n            'state-collapsed': this.collapsed,\n          }}\n        >\n          <sdds-side-menu-item\n            class=\"button\"\n            active={this.getIsOpenState()}\n            selected={this.selected}\n            onClick={() => {\n              this.open = !this.open;\n            }}\n          >\n            <button>\n              <slot name=\"button-icon\"></slot>\n              {!this.collapsed && (\n                <Fragment>\n                  {this.buttonLabel}\n                  <slot name=\"button-label\"></slot>\n                  <sdds-icon class=\"dropdown-icon\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n                </Fragment>\n              )}\n            </button>\n          </sdds-side-menu-item>\n          <div class=\"menu\">\n            {this.collapsed && (\n              <h3 class=\"heading-collapsed\">\n                {this.buttonLabel}\n                <slot name=\"button-label\"></slot>\n              </h3>\n            )}\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

@@ -1 +0,0 @@
-{"file":"sdds-side-menu-overlay.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,iHAAiH;;MCO/H,eAAe;;;;;;EAC1B,MAAM;IACJ,QACE,EAAC,IAAI,QACH,cAAW,CACN,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.scss?tag=sdds-side-menu-overlay&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: black;\n  transition: opacity 0.4s linear;\n  opacity: 0;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-side-menu-overlay',\n  styleUrl: 'side-menu-overlay.scss',\n  shadow: true,\n})\nexport class SideMenuOverlay {\n  render() {\n    return (\n      <Host>\n        <div></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

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

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

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

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

@@ -1 +0,0 @@
-{"file":"sdds-side-menu-user.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,8GAA8G;;MCOzH,YAAY;;;;;;;;;;EAavB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,iCAA2B,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,IAC3D,YAAM,IAAI,EAAC,OAAO,GAAQ,CACA,EAC5B,iCACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,UAAU,EAAE,IAAI,CAAC,UAAU,GACA,CACxB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/side-menu/webcomponent/side-menu-user/side-menu-user.scss?tag=sdds-side-menu-user&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-user/side-menu-user.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  height: 68px;\n\n  sdds-side-menu-user-image {\n    margin-left: -4px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-side-menu-user',\n  styleUrl: 'side-menu-user.scss',\n  shadow: true,\n})\nexport class SideMenuUser {\n  /** The heading text. */\n  @Prop() heading!: string;\n\n  /** The subheading text. */\n  @Prop() subheading: string;\n\n  /** The image source. */\n  @Prop() imgSrc: string;\n\n  /** The image alt text. */\n  @Prop() imgAlt: string;\n\n  render() {\n    return (\n      <Host>\n        <sdds-side-menu-user-image src={this.imgSrc} alt={this.imgAlt}>\n          <slot name=\"image\"></slot>\n        </sdds-side-menu-user-image>\n        <sdds-side-menu-user-label\n          heading={this.heading}\n          subheading={this.subheading}\n        ></sdds-side-menu-user-label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"sdds-side-menu.js","mappings":"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","names":["SddsSideMenu"],"sources":["./src/components/side-menu/webcomponent/side-menu.scss?tag=sdds-side-menu&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n@import '../../../mixins/scrollbar';\n@import '../../../mixins/z-index';\n@import '../../../global/variables';\n\n:host([open]) {\n  pointer-events: auto;\n  z-index: z(header) + 1;\n}\n\n:host {\n  pointer-events: none;\n  display: block;\n  position: fixed;\n  top: 0;\n  width: 100%;\n  height: 100%;\n\n  .wrapper {\n    height: inherit;\n\n    /* default slot */\n    slot:not([name])::slotted(*) {\n      border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n    }\n\n    /* 'end' slot */\n    ::slotted([slot='end']) {\n      border-top: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n    }\n\n    .sdds-side-menu-list-end {\n      margin-top: 68px;\n    }\n  }\n\n  .state-closed {\n    display: none;\n  }\n\n  .state-open {\n    slot[name='overlay']::slotted(sdds-side-menu-overlay) {\n      opacity: 0.4;\n    }\n\n    slot[name='close-button']::slotted(sdds-side-menu-close-button) {\n      opacity: 1;\n    }\n\n    .sdds-side-menu-wrapper {\n      transform: scaleY(1);\n    }\n  }\n\n  .state-upper-slot-empty {\n    .sdds-side-menu-list-upper {\n      display: none;\n    }\n\n    .sdds-side-menu-list-end {\n      margin-top: 0;\n    }\n\n    ::slotted([slot='end']) {\n      border-top: none;\n      border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n    }\n  }\n}\n\n@media (min-width: $grid-lg) {\n  :host([persistent]) {\n    pointer-events: auto;\n    position: static;\n    width: 272px;\n    height: auto;\n    border-right: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n\n    .wrapper {\n      slot[name='overlay']::slotted(sdds-side-menu-overlay) {\n        display: none;\n      }\n\n      slot[name='close-button']::slotted(sdds-side-menu-close-button) {\n        display: none;\n      }\n\n      .sdds-side-menu-wrapper {\n        transform: none;\n      }\n    }\n\n    .menu {\n      width: 272px;\n    }\n\n    .state-closed {\n      display: block;\n    }\n\n    &:host([collapsed]) {\n      width: 69px; // 68 + 1px for border\n\n      .menu {\n        width: 68px;\n      }\n    }\n\n    slot[name='end']::slotted(*) {\n      display: none;\n    }\n  }\n}\n\n.menu {\n  * {\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n  }\n\n  width: 80%;\n  height: inherit;\n  position: relative;\n  left: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n@media (max-width: $media-fullwidth) {\n  .menu {\n    width: 100%;\n  }\n}\n\naside {\n  .sdds-side-menu-wrapper {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n    flex-grow: 1;\n    background-color: var(--sdds-sidebar-side-menu-background-cover);\n    transition: transform 250ms ease;\n    transform-origin: top;\n    transform: scaleY(0);\n\n    @include sdds-scrollbar;\n\n    overflow-y: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { dfs, isFocusable } from '../../../utils/utils';\n\nexport interface CollapsedEvent {\n  collapsed: boolean;\n}\n\nconst GRID_LG_BREAKPOINT = '992px';\nconst OPENING_ANIMATION_DURATION = 400;\nconst INITIALIZE_ANIMATION_DELAY = 500;\n\n@Component({\n  tag: 'sdds-side-menu',\n  styleUrl: 'side-menu.scss',\n  shadow: true,\n})\nexport class SddsSideMenu {\n  @Element() host: HTMLSddsSideMenuElement;\n\n  /** Broadcasts collapsed state to child components. */\n  @Event({\n    eventName: 'sddsSideMenuCollapsed',\n    bubbles: true,\n    composed: true,\n    cancelable: true,\n  })\n  collapsedEventEmitter: EventEmitter<CollapsedEvent>;\n\n  /** If the side menu is open or not. */\n  @Prop({ reflect: true }) open: boolean = false;\n\n  /** If the side menu should always be shown on desktop screens to the side. */\n  @Prop({ reflect: true }) persistent: boolean = false;\n\n  /** If the side menu is collapsed. Only a persistent desktop menu can be collapsed. */\n  @Prop({ reflect: true }) collapsed: boolean = false;\n\n  @State() isUpperSlotEmpty: boolean = false;\n\n  @State() isClosed: boolean = true;\n\n  @State() isOpen: boolean = false;\n\n  @State() isClosing: boolean = false;\n\n  @State() isOpening: boolean = false;\n\n  private matchesLgBreakpointMq: MediaQueryList;\n\n  handleMatchesLgBreakpointChange: (e: MediaQueryListEvent) => void = (e) => {\n    const isBelowLg = !e.matches;\n    if (isBelowLg) {\n      this.collapsed = false;\n    }\n  };\n\n  connectedCallback() {\n    this.collapsedEventEmitter.emit({\n      collapsed: this.collapsed,\n    });\n\n    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);\n    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);\n  }\n\n  componentDidLoad() {\n    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);\n\n    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n    const upperSlotElements = upperSlot.assignedElements();\n    const hasUpperSlotElements = upperSlotElements?.length > 0;\n\n    if (!hasUpperSlotElements) {\n      this.isUpperSlotEmpty = true;\n    }\n  }\n\n  disconnectedCallback() {\n    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);\n  }\n\n  @Watch('open')\n  onOpenChange(newVal: boolean, oldVal?: boolean) {\n    if (newVal && !oldVal) {\n      this.setOpening();\n    }\n    if (!newVal && oldVal) {\n      this.setClosing();\n    }\n  }\n\n  @Watch('collapsed')\n  onCollapsedChange(newVal: boolean) {\n    this.collapsedEventEmitter.emit({\n      collapsed: newVal,\n    });\n  }\n\n  @Watch('isOpening')\n  onIsOpenChange(newVal: boolean) {\n    if (newVal) {\n      const firstFocusableElement = dfs(this.host, isFocusable, true);\n      firstFocusableElement.focus();\n    }\n  }\n\n  async setOpening() {\n    this.isClosed = false;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, 0);\n    });\n    this.isOpening = true;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, OPENING_ANIMATION_DURATION);\n    });\n    this.isOpening = false;\n    this.isOpen = true;\n  }\n\n  async setClosing() {\n    this.isOpen = false;\n    this.isClosing = true;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, OPENING_ANIMATION_DURATION);\n    });\n    this.isClosing = false;\n    this.isClosed = true;\n  }\n\n  render() {\n    return (\n      <Host role=\"navigation\">\n        <div\n          class={{\n            'wrapper': true,\n            'state-upper-slot-empty': this.isUpperSlotEmpty,\n            'state-open': this.isOpen || this.isOpening,\n            'state-closed': this.isClosed,\n          }}\n        >\n          <slot name=\"overlay\"></slot>\n          <aside class={`menu`}>\n            <slot name=\"close-button\"></slot>\n            <div class=\"sdds-side-menu-wrapper\">\n              <ul class={`sdds-side-menu-list sdds-side-menu-list-upper`}>\n                <slot></slot>\n              </ul>\n              <ul class={`sdds-side-menu-list sdds-side-menu-list-end`}>\n                <slot name=\"end\"></slot>\n              </ul>\n            </div>\n            <slot name=\"sticky-end\"></slot>\n          </aside>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-slider.js.map

@@ -1 +0,0 @@
-{"file":"sdds-slider.js","mappings":"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","names":[],"sources":["./src/components/slider/slider.scss?tag=sdds-slider","./src/components/slider/slider.tsx"],"sourcesContent":["@import 'slider-vars';\n@import '../../mixins/box-sizing';\n\nsdds-slider {\n  @include sdds-box-sizing;\n\n  width: 100%;\n\n  input[type='range'].sdds-slider-native-element {\n    display: none;\n  }\n}\n\n.sdds-slider-wrapper {\n  width: 100%;\n\n  &.read-only {\n    pointer-events: none;\n  }\n}\n\n.sdds-slider {\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  padding-top: 65px;\n\n  .sdds-slider-inner {\n    width: 100%;\n    height: 20px;\n    position: relative;\n  }\n\n  .sdds-slider__controls {\n    position: relative;\n    top: -25px;\n\n    .sdds-slider__control {\n      cursor: pointer;\n\n      &.sdds-slider__control-minus {\n        padding: 18px 18px 18px 0;\n      }\n\n      &.sdds-slider__control-plus {\n        padding: 18px 0 18px 18px;\n      }\n    }\n  }\n\n  .sdds-slider__input-values {\n    position: relative;\n    top: -25px;\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n\n    .sdds-slider__input-value {\n      user-select: none;\n      padding: 18px;\n      color: var(--sdds-grey-700);\n\n      //@include type-style('detail-02');\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n\n      &.min-value {\n        padding-left: 0px;\n      }\n    }\n\n    .sdds-slider__input-field-wrapper {\n      background-color: var(--sdds-slider-inputfield-background);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 4px 4px 0 0;\n\n      input.sdds-slider__input-field {\n        // @include type-style('detail-02');\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        color: var(--sdds-slider-input-inputfield-color);\n        border: 0;\n        background-color: transparent;\n        text-align: center;\n        padding: 12px;\n        box-shadow: inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);\n        border-radius: 4px 4px 0 0;\n\n        &:hover {\n          box-shadow: inset 0 -1px 0 var(--sdds-grey-600);\n        }\n\n        &:focus {\n          box-shadow: inset 0 -2px 0 var(--sdds-blue-400);\n          outline: 0;\n        }\n      }\n    }\n  }\n\n  label {\n    // @include type-style('detail-05');\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    user-select: none;\n    position: absolute;\n    color: var(--sdds-slider-label-color);\n    padding-bottom: 16px;\n    transform: translateY(-100%);\n\n    &.offset {\n      padding-bottom: 34px;\n    }\n  }\n\n  .sdds-slider__value {\n    // @include type-style('detail-01');\n    font: var(--sdds-detail-01);\n    letter-spacing: var(--sdds-detail-01-ls);\n    user-select: none;\n    border-radius: 4px;\n    padding: 8px;\n    position: absolute;\n    transform: translate(-50%, -100%);\n    top: -24px;\n    background-color: var(--sdds-slider-value-tooltip-background);\n    color: var(--sdds-slider-value-tooltip-color);\n\n    svg {\n      color: var(--sdds-slider-value-tooltip-background);\n      position: absolute;\n      left: 50%;\n      transform: translateX(-50%);\n      top: 34px;\n    }\n  }\n\n  .sdds-slider__scrubber {\n    position: absolute;\n\n    .sdds-slider__scrubber-inner {\n      width: 20px;\n      height: 20px;\n      border-radius: 100%;\n      background-color: var(--sdds-slider-thumb-color);\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      cursor: pointer;\n\n      &::before {\n        content: ' ';\n        display: none;\n        width: 48px;\n        height: 48px;\n        background-color: var(--sdds-slider-thumb-color);\n        position: absolute;\n        border-radius: 100%;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      &:hover {\n        &::before {\n          display: block;\n          opacity: 0.08;\n        }\n      }\n\n      &.pressed {\n        width: 24px;\n        height: 24px;\n\n        &::before {\n          display: block;\n          opacity: 0.16 !important;\n        }\n      }\n    }\n  }\n\n  .sdds-slider__value-dividers-wrapper {\n    position: relative;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  .sdds-slider__value-dividers {\n    pointer-events: none;\n    position: absolute;\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n\n    .sdds-slider__value-divider {\n      transform: translateY(-50%);\n      height: 16px;\n      background-color: var(--sdds-slider-divider-color);\n      color: var(--sdds-slider-divider-values-color);\n      width: 1px;\n\n      span {\n        display: block;\n        user-select: none;\n        color: var(-sdds-grey-700);\n\n        // @include type-style('detail-05');\n        font: var(--sdds-detail-05);\n        letter-spacing: var(--sdds-detail-05-ls);\n        position: relative;\n        top: -7px;\n        left: 50%;\n        transform: translate(-50%, -100%);\n        width: 50px;\n        text-align: center;\n      }\n    }\n  }\n\n  .sdds-slider__track {\n    width: 100%;\n    height: 2px;\n    border-radius: 1px;\n    background-color: var(--sdds-slider-track-color);\n    position: relative;\n\n    &:focus {\n      outline: 0;\n\n      .sdds-slider__scrubber {\n        .sdds-slider__scrubber-inner {\n          width: 24px;\n          height: 24px;\n\n          &::before {\n            display: block;\n            opacity: 0.08;\n          }\n        }\n      }\n    }\n\n    .sdds-slider__track-fill {\n      background-color: var(--sdds-slider-track-fill-color);\n      border-radius: 2px;\n      height: 4px;\n      position: absolute;\n      left: 0;\n      top: -1px;\n    }\n  }\n\n  &.disabled {\n    // pointer-events: none;\n    cursor: not-allowed;\n\n    > * {\n      pointer-events: none;\n    }\n\n    label {\n      color: var(--sdds-slider-disabled);\n    }\n\n    .sdds-slider__controls {\n      .sdds-slider__control {\n        cursor: default;\n\n        &.sdds-slider__control-minus,\n        &.sdds-slider__control-plus {\n          svg {\n            fill: var(--sdds-slider-disabled);\n          }\n        }\n      }\n    }\n\n    .sdds-slider__input-values {\n      .sdds-slider__input-value {\n        color: var(--sdds-slider-disabled);\n      }\n\n      .sdds-slider__input-field-wrapper {\n        pointer-events: none;\n\n        input.sdds-slider__input-field {\n          color: var(--sdds-slider-disabled);\n          pointer-events: none;\n        }\n      }\n    }\n\n    .sdds-slider__value {\n      display: none;\n    }\n\n    .sdds-slider__track {\n      .sdds-slider__track-fill {\n        background-color: var(--sdds-slider-disabled);\n      }\n    }\n\n    .sdds-slider__value-dividers {\n      .sdds-slider__value-divider {\n        span {\n          color: var(--sdds-slider-disabled);\n        }\n      }\n    }\n\n    .sdds-slider__scrubber {\n      pointer-events: none;\n\n      .sdds-slider__scrubber-inner {\n        background-color: var(--sdds-slider-disabled);\n        cursor: default;\n      }\n    }\n  }\n\n  &.sdds-slider-small {\n    .sdds-slider__scrubber {\n      .sdds-slider__scrubber-inner {\n        width: 16px;\n        height: 16px;\n\n        &::before {\n          width: 40px;\n          height: 40px;\n        }\n\n        &.pressed {\n          width: 20px;\n          height: 20px;\n        }\n      }\n    }\n  }\n}\n\n.sdds-slider {\n  .sdds-slider__controls {\n    .sdds-slider__control {\n      cursor: default;\n\n      &.sdds-slider__control-minus,\n      &.sdds-slider__control-plus {\n        sdds-icon {\n          color: var(--sdds-slider-controls-color);\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    .sdds-slider__controls {\n      .sdds-slider__control {\n        cursor: default;\n\n        &.sdds-slider__control-minus,\n        &.sdds-slider__control-plus {\n          sdds-icon {\n            color: var(--sdds-slider-disabled);\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, h, Prop, Listen, EventEmitter, Event, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-slider',\n  styleUrl: 'slider.scss',\n  shadow: false,\n})\nexport class Slider {\n  /** Text for label */\n  @Prop() label: string = '';\n\n  /** Initial value */\n  @Prop() value: string = '0';\n\n  /** Minimum value */\n  @Prop() min: string = '0';\n\n  /** Maximum value */\n  @Prop() max: string = '100';\n\n  /** Number of tick markers (tick for min- and max-value will be added automatically) */\n  @Prop() ticks: string = '0';\n\n  /** Decide to show numbers above the tick markers or not  */\n  @Prop() showTickNumbers: boolean = false;\n\n  /** Decide to show the tooltip or not */\n  @Prop() tooltip: boolean = false;\n\n  /** Sets the disabled state for the whole component  */\n  @Prop() disabled: boolean = false;\n\n  /** Sets the read only state for the whole component  */\n  @Prop() readOnly: boolean = false;\n\n  /** Decide to show the controls or not */\n  @Prop() controls: boolean = false;\n\n  /** Decide to show the input field or not */\n  @Prop() input: boolean = false;\n\n  /** Defines how much to increment/decrement the value when using controls */\n  @Prop() step: string = '1';\n\n  /** Name property (will be inherited by the native slider component) */\n  @Prop() name: string = '';\n\n  /** Sets the size of the scrubber */\n  @Prop() scrubberSize: 'sm' | 'lg' = 'lg';\n\n  /** Snap to the ticks grid */\n  @Prop() snap: boolean = false;\n\n  /** ID for the sliders input element, randomly generated if not specified. */\n  @Prop() sliderId: string = crypto.randomUUID();\n\n  private wrapperElement: HTMLElement = null;\n\n  private scrubberElement: HTMLElement = null;\n\n  private scrubberInnerElement: HTMLElement = null;\n\n  private trackElement: HTMLElement = null;\n\n  private trackFillElement: HTMLElement = null;\n\n  private minusElement: HTMLElement = null;\n\n  private plusElement: HTMLElement = null;\n\n  private inputElement: HTMLInputElement = null;\n\n  private scrubberGrabbed: boolean = false;\n\n  private scrubberLeft: number = 0;\n\n  private tickValues: Array<number> = [];\n\n  private disabledState: boolean = false;\n\n  private readonlyState: boolean = false;\n\n  private useControls: boolean = false;\n\n  private useInput: boolean = false;\n\n  private useSmall: boolean = false;\n\n  private useSnapping: boolean = false;\n\n  private supposedValueSlot: number = -1;\n\n  private eventListenersAdded: boolean = false;\n\n  private resizeObserverAdded: boolean = false;\n\n  /** Sends the value of the slider when changed. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    value: string;\n  }>;\n\n  /** Public method to re-initialise the slider if some configuration props are changed */\n  @Method() async reset() {\n    // @TODO: maybe refactor to use watch-decorators instead\n    this.componentWillLoad();\n    this.componentDidLoad();\n  }\n\n  @Listen('keydown')\n  handleKeydown(event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        this.stepLeft();\n        break;\n\n      case 'ArrowRight':\n        this.stepRight();\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  @Listen('mouseup', { target: 'window' })\n  handleMouseUp() {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    this.scrubberGrabbed = false;\n    this.scrubberInnerElement.classList.remove('pressed');\n    this.updateValue();\n\n    this.trackElement.focus();\n  }\n\n  @Listen('touchend', { target: 'window' })\n  handleTouchEnd() {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    this.scrubberGrabbed = false;\n    this.scrubberInnerElement.classList.remove('pressed');\n    this.updateValue();\n\n    this.trackElement.focus();\n  }\n\n  @Listen('mousemove', { target: 'window' })\n  handleMouseMove(event) {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    this.scrubberCore(event);\n  }\n\n  @Listen('touchmove', { target: 'window' })\n  handleTouchMove(event) {\n    event.preventDefault();\n\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    this.scrubberCore(event);\n  }\n\n  scrubberCore(event) {\n    const numTicks = parseInt(this.ticks);\n    const trackRect = this.trackElement.getBoundingClientRect();\n    let localLeft = 0;\n    if (event.type === 'mousemove') {\n      localLeft = event.clientX - trackRect.left;\n    } else if (event.type === 'touchmove') {\n      localLeft = event.touches[0].clientX - trackRect.left;\n    } else console.warn('Slider component: Unsupported event!');\n\n    this.supposedValueSlot = -1;\n\n    if (this.useSnapping && numTicks > 0) {\n      const trackWidth = this.getTrackWidth();\n      const distanceBetweenTicks = Math.round(trackWidth / (numTicks + 1));\n      localLeft = Math.round(localLeft / distanceBetweenTicks) * distanceBetweenTicks;\n\n      let scrubberPositionPX = 0;\n      if (localLeft >= 0 && localLeft <= trackWidth) {\n        scrubberPositionPX = localLeft;\n      } else if (localLeft > trackWidth) {\n        scrubberPositionPX = trackWidth;\n      } else if (localLeft < 0) {\n        scrubberPositionPX = 0;\n      }\n      this.supposedValueSlot = Math.round(scrubberPositionPX / distanceBetweenTicks);\n    }\n\n    this.scrubberLeft = this.constrainScrubber(localLeft);\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n    this.updateValue();\n    this.updateTrack();\n  }\n\n  updateTrack() {\n    const trackWidth = this.getTrackWidth();\n    const percentageFilled = (this.scrubberLeft / trackWidth) * 100;\n    this.trackFillElement.style.width = `${percentageFilled}%`;\n  }\n\n  dispatchChangeEvent() {\n    this.sddsChange.emit({ value: this.value });\n  }\n\n  updateValue() {\n    const trackWidth = this.getTrackWidth();\n\n    /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding)  */\n    if (this.supposedValueSlot > 0) {\n      const supposedValue = this.tickValues[this.supposedValueSlot];\n      this.value = `${supposedValue}`;\n    } else {\n      const percentage = this.scrubberLeft / trackWidth;\n      this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;\n    }\n\n    this.dispatchChangeEvent();\n  }\n\n  updateValueForced(value) {\n    this.value = value;\n    this.dispatchChangeEvent();\n  }\n\n  getMin() {\n    return parseFloat(this.min);\n  }\n\n  getMax() {\n    return parseFloat(this.max);\n  }\n\n  constrainScrubber(x) {\n    const width = this.getTrackWidth();\n\n    if (x < 0) {\n      return 0;\n    }\n\n    if (x > width) {\n      return width;\n    }\n\n    return x;\n  }\n\n  getTrackWidth() {\n    const trackRect = this.trackElement.getBoundingClientRect();\n    return trackRect.right - trackRect.left;\n  }\n\n  calculateScrubberLeftFromValue(value) {\n    const initValue = value;\n    const trackWidth = this.getTrackWidth();\n\n    const normalizedValue = initValue - this.getMin();\n    const normalizedMax = this.getMax() - this.getMin();\n\n    const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;\n\n    this.scrubberLeft = calculatedLeft;\n\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n  }\n\n  componentDidLoad() {\n    if (!this.resizeObserverAdded) {\n      this.resizeObserverAdded = true;\n\n      const resizeObserver = new ResizeObserver((/* entries */) => {\n        this.calculateScrubberLeftFromValue(this.value);\n        this.updateTrack();\n      });\n\n      resizeObserver.observe(this.wrapperElement);\n    }\n\n    if (!this.eventListenersAdded) {\n      this.eventListenersAdded = true;\n\n      this.scrubberElement.addEventListener('mousedown', (event) => {\n        event.preventDefault();\n        this.grabScrubber();\n      });\n\n      this.scrubberElement.addEventListener('touchstart', () => {\n        this.grabScrubber();\n      });\n\n      if (this.useControls) {\n        this.minusElement.addEventListener('click', () => {\n          this.stepLeft();\n        });\n\n        this.plusElement.addEventListener('click', () => {\n          this.stepRight();\n        });\n      }\n\n      if (this.inputElement) {\n        this.inputElement.addEventListener('keydown', (event) => {\n          event.stopPropagation();\n\n          if (event.key === 'Enter') {\n            let newValue = parseInt(this.inputElement.value);\n\n            if (newValue < this.getMin()) {\n              newValue = this.getMin();\n            } else if (newValue > this.getMax()) {\n              newValue = this.getMax();\n            }\n\n            this.calculateScrubberLeftFromValue(newValue);\n            this.updateValueForced(newValue);\n            this.updateTrack();\n\n            this.inputElement.blur();\n            this.wrapperElement.focus();\n          }\n        });\n      }\n    }\n\n    this.calculateScrubberLeftFromValue(this.value);\n    this.updateTrack();\n  }\n\n  grabScrubber() {\n    if (this.readonlyState) {\n      return;\n    }\n    this.scrubberGrabbed = true;\n    this.scrubberInnerElement.classList.add('pressed');\n  }\n\n  calculateInputSizeFromMax() {\n    return this.max.length;\n  }\n\n  controlsStep(delta) {\n    if (this.readonlyState || this.disabled) {\n      return;\n    }\n\n    const trackWidth = this.getTrackWidth();\n    const percentage = this.scrubberLeft / trackWidth;\n    const numTicks = parseInt(this.ticks);\n\n    let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());\n\n    currentValue += delta;\n\n    if (currentValue < this.getMin()) {\n      currentValue = this.getMin();\n    } else if (currentValue > this.getMax()) {\n      currentValue = this.getMax();\n    }\n\n    this.value = `${currentValue}`;\n\n    /* if snapping is enabled, instead just increment or decrement the current \"fixed\" value from our ticknumber array */\n    if (this.useSnapping && numTicks > 0) {\n      const stepDir = delta > 0 ? 1 : -1;\n      this.supposedValueSlot += stepDir;\n\n      if (this.supposedValueSlot < 0) {\n        this.supposedValueSlot = 0;\n      } else if (this.supposedValueSlot > numTicks + 1) {\n        this.supposedValueSlot = numTicks + 1;\n      }\n    }\n\n    this.calculateScrubberLeftFromValue(currentValue);\n    this.updateTrack();\n    this.updateValue();\n  }\n\n  stepLeft() {\n    this.controlsStep(-parseInt(this.step));\n  }\n\n  stepRight() {\n    this.controlsStep(parseInt(this.step));\n  }\n\n  componentWillLoad() {\n    const numTicks = parseInt(this.ticks);\n\n    if (numTicks > 0) {\n      this.tickValues = [this.getMin()];\n\n      const step = (this.getMax() - this.getMin()) / (numTicks + 1);\n\n      for (let i = 1; i < numTicks + 1; i++) {\n        this.tickValues.push(this.getMin() + Math.round(step * i));\n      }\n\n      this.tickValues.push(this.getMax());\n    }\n\n    if (this.disabled) {\n      this.disabledState = true;\n    } else {\n      this.disabledState = false;\n    }\n\n    if (this.readOnly) {\n      this.readonlyState = true;\n    } else {\n      this.readonlyState = false;\n    }\n\n    this.useInput = false;\n    this.useControls = false;\n\n    if (this.controls) {\n      this.useControls = true;\n    } else if (this.input) {\n      this.useInput = true;\n    }\n\n    this.useSmall = false;\n\n    if (this.scrubberSize === 'sm') {\n      this.useSmall = true;\n    }\n\n    this.useSnapping = false;\n\n    if (this.snap) {\n      this.useSnapping = true;\n    }\n\n    const min = this.getMin();\n    const max = this.getMax();\n\n    if (min > max) {\n      console.warn(\n        'min-prop must have a higher value than max-prop for the component to work correctly.',\n      );\n      this.disabledState = true;\n    }\n  }\n\n  render() {\n    return (\n      <div class={`sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}`}>\n        <input\n          class=\"sdds-slider-native-element\"\n          type=\"range\"\n          value={this.value}\n          name={this.name}\n          min={this.min}\n          max={this.max}\n          disabled={this.disabled}\n        ></input>\n\n        <div\n          class={`sdds-slider ${this.disabledState ? 'disabled' : ''} ${\n            this.useSmall ? 'sdds-slider-small' : ''\n          }`}\n          ref={(el) => {\n            this.wrapperElement = el as HTMLElement;\n          }}\n        >\n          <label class={this.showTickNumbers && 'offset'}>{this.label}</label>\n\n          {this.useInput && (\n            <div class=\"sdds-slider__input-values\">\n              <div\n                ref={(el) => {\n                  this.minusElement = el as HTMLElement;\n                }}\n                class=\"sdds-slider__input-value min-value\"\n              >\n                {this.min}\n              </div>\n            </div>\n          )}\n\n          {this.useControls && (\n            <div class=\"sdds-slider__controls\">\n              <div\n                ref={(el) => (this.minusElement = el as HTMLElement)}\n                class=\"sdds-slider__control sdds-slider__control-minus\"\n              >\n                <sdds-icon name=\"minus\" size=\"16px\"></sdds-icon>\n              </div>\n            </div>\n          )}\n\n          <div class=\"sdds-slider-inner\">\n            {this.tickValues.length > 0 && (\n              <div class=\"sdds-slider__value-dividers-wrapper\">\n                <div class=\"sdds-slider__value-dividers\">\n                  {this.tickValues.map((value) => (\n                    <div class=\"sdds-slider__value-divider\">\n                      {this.showTickNumbers && <span>{value}</span>}\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n\n            <div\n              class=\"sdds-slider__track\"\n              ref={(el) => {\n                this.trackElement = el as HTMLElement;\n              }}\n              tabindex={this.disabled ? '-1' : '0'}\n            >\n              <div\n                class=\"sdds-slider__track-fill\"\n                ref={(el) => {\n                  this.trackFillElement = el as HTMLElement;\n                }}\n              ></div>\n\n              <div\n                class=\"sdds-slider__scrubber\"\n                ref={(el) => {\n                  this.scrubberElement = el as HTMLElement;\n                }}\n              >\n                {this.tooltip && (\n                  <div class=\"sdds-slider__value\">\n                    {this.value}\n                    <svg\n                      width=\"18\"\n                      height=\"14\"\n                      viewBox=\"0 0 18 14\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z\"\n                        fill=\"currentColor\"\n                      />\n                    </svg>\n                  </div>\n                )}\n\n                <div\n                  class=\"sdds-slider__scrubber-inner\"\n                  ref={(el) => {\n                    this.scrubberInnerElement = el as HTMLElement;\n                  }}\n                ></div>\n              </div>\n            </div>\n          </div>\n\n          {this.useInput && (\n            <div class=\"sdds-slider__input-values\">\n              <div\n                ref={(el) => {\n                  this.minusElement = el as HTMLElement;\n                }}\n                class=\"sdds-slider__input-value\"\n              >\n                {this.max}\n              </div>\n              <div class=\"sdds-slider__input-field-wrapper\">\n                <input\n                  onFocus={(e) => {\n                    if (this.readonlyState) {\n                      e.preventDefault();\n                      this.inputElement.blur();\n                    }\n                  }}\n                  size={this.calculateInputSizeFromMax()}\n                  class=\"sdds-slider__input-field\"\n                  value={this.value}\n                  ref={(el) => {\n                    this.inputElement = el as HTMLInputElement;\n                  }}\n                />\n              </div>\n            </div>\n          )}\n\n          {this.useControls && (\n            <div class=\"sdds-slider__controls\">\n              <div\n                ref={(el) => (this.plusElement = el as HTMLElement)}\n                class=\"sdds-slider__control sdds-slider__control-plus\"\n              >\n                <sdds-icon name=\"plus\" size=\"16px\"></sdds-icon>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-spinner.js.map

@@ -1 +0,0 @@
-{"file":"sdds-spinner.js","mappings":";;AAAA,MAAM,UAAU,GAAG,+wEAA+wE;;MCOrxE,OAAO;;;;gBAEwB,IAAI;mBAGH,UAAU;;EAErD,MAAM;IACJ,QACE,wBAAe,WAAW,EAAC,IAAI,EAAC,QAAQ,gBAAY,SAAS,IAC3D,WAAK,KAAK,EAAE,qCAAqC,IAAI,CAAC,IAAI,EAAE,iBAAc,MAAM,IAC9E,cAAQ,KAAK,EAAE,2CAA2C,IAAI,CAAC,OAAO,EAAE,GAAI,CACxE,CACF,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/spinner/spinner.scss?tag=sdds-spinner","./src/components/spinner/spinner.tsx"],"sourcesContent":["@import './spinner-vars.scss';\n@import '../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: block;\n}\n\n.sdds-spinner-svg {\n  width: calc(var(--sdds-spinner-radius) * 2);\n  height: calc(var(--sdds-spinner-radius) * 2);\n  transform: scale(-1, 1) rotate(-90deg);\n\n  &-xs {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-xs);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-xs);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n  }\n\n  &-sm {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-sm);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-sm);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n  }\n\n  &-md {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-md);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-md);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n  }\n\n  &-lg {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-lg);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed-lg);\n  }\n}\n\n.sdds-spinner-circle {\n  cx: var(--sdds-spinner-radius);\n  cy: var(--sdds-spinner-radius);\n  r: calc(var(--sdds-spinner-radius) - (var(--sdds-spinner-stroke-width) / 2));\n  stroke-width: var(--sdds-spinner-stroke-width);\n  fill: none;\n\n  //Calculation for lenght of dash\n  --sdds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--sdds-spinner-radius));\n\n  stroke-dasharray: var(--sdds-spinner-stroke-dash);\n  stroke-width: var(--sdds-spinner-stroke-width);\n  animation: dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;\n\n  &-standard {\n    stroke: var(--sdds-spinner-background);\n  }\n\n  &-inverted {\n    stroke: var(--sdds-spinner-background-inverted);\n  }\n}\n\n@keyframes dash {\n  from {\n    stroke-dashoffset: calc(-1 * var(--sdds-spinner-stroke-dash));\n  }\n\n  to {\n    stroke-dashoffset: var(--sdds-spinner-stroke-dash);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: false,\n})\nexport class Spinner {\n  /** Size of spinner */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Variant of spinner */\n  @Prop() variant: 'standard' | 'inverted' = 'standard';\n\n  render() {\n    return (\n      <div aria-live=\"assertive\" role=\"status\" aria-label=\"loading\">\n        <svg class={`sdds-spinner-svg sdds-spinner-svg-${this.size}`} aria-hidden=\"true\">\n          <circle class={`sdds-spinner-circle sdds-spinner-circle-${this.variant}`} />\n        </svg>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-stepper-item.js.map

@@ -1 +0,0 @@
-{"file":"sdds-stepper-item.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,opIAAopI;;MCQlqI,WAAW;;;;;;iBAKwC,UAAU;;;;;;;EAiBxE,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;IACjD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC;IAC9C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC;IAClD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC;IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC;GAC3C;EAGD,iBAAiB,CAAC,KAAiD;IACjE,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;MAC7C,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,WAAW;QACvC,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,UAAU,EAAE;UACtF,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;SAC9B;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACJ;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,SAAS,IAAI,CAAC,aAAa,IAChE,IAAI,CAAC,SAAS,GAAG,aAAa,GAAG,EACnC,EAAE,IAEF,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,oBAAoB,IAC1C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,IACjD,iBACE,IAAI,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,EACnD,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,MAAM,GAC/B,KAEb,IAAI,CAAC,KAAK,CACX,CACG,EACL,CAAC,IAAI,CAAC,SAAS,KACd,WAAK,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,IAC5C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACP,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/stepper/stepper-item/sdds-stepper-item.scss?tag=sdds-stepper-item&encapsulation=shadow","./src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"sourcesContent":["@mixin divider {\n  content: ' ';\n  position: absolute;\n  background-color: var(--sdds-stepper-icon-step-background-after);\n  opacity: 0.16;\n}\n\n:host {\n  position: relative;\n  display: table-cell;\n\n  sdds-icon {\n    line-height: 1;\n  }\n\n  [role='listItem'] {\n    display: flex;\n    justify-content: start;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n\n    &.text-below {\n      flex-direction: column;\n    }\n\n    &.lg {\n      padding: 0 20px;\n      font: var(--sdds-detail-01);\n      letter-spacing: var(--sdds-detail-01-ls);\n\n      .content-container {\n        height: 30px;\n        min-width: 30px;\n      }\n\n      &.vertical {\n        &::after {\n          @include divider;\n\n          height: 36px;\n          width: 1px;\n          top: 40px;\n          left: 36px;\n        }\n      }\n\n      &.horizontal {\n        &::after {\n          @include divider;\n\n          height: 1px;\n          left: calc(50% + 24px);\n          right: 0;\n          top: 18px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 1px;\n          right: calc(50% + 24px);\n          left: 0;\n          top: 18px;\n        }\n\n        &.text-aside {\n          &:not(.hide-labels) {\n            &::after {\n              @include divider;\n\n              height: 1px;\n              top: 16px;\n              width: 10px;\n              left: auto;\n              right: -10px;\n            }\n\n            &::before {\n              @include divider;\n\n              height: 1px;\n              top: 16px;\n              width: 10px;\n              left: -10px;\n              right: auto;\n            }\n          }\n        }\n      }\n    }\n\n    &.sm {\n      padding: 0 20px;\n      font: var(--sdds-detail-05);\n      letter-spacing: var(--sdds-detail-05-ls);\n\n      .content-container {\n        height: 24px;\n        min-width: 24px;\n      }\n\n      &.vertical {\n        &::after {\n          @include divider;\n\n          height: 20px;\n          width: 1px;\n          top: 34px;\n          left: 32px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 20px;\n          width: 1px;\n          top: 34px;\n          left: 32px;\n        }\n      }\n\n      &.horizontal {\n        &::after {\n          @include divider;\n\n          height: 1px;\n          left: calc(50% + 16px + 8px);\n          right: 0;\n          top: 13px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 1px;\n          left: 0;\n          right: calc(50% + 24px);\n          top: 13px;\n        }\n\n        &.text-aside {\n          &:not(.hide-labels) {\n            &::after {\n              @include divider;\n\n              height: 1px;\n              top: 13px;\n              width: 10px;\n              left: auto;\n              right: -10px;\n            }\n\n            &::before {\n              @include divider;\n\n              height: 1px;\n              top: 13px;\n              width: 10px;\n              left: -10px;\n              right: auto;\n            }\n          }\n        }\n      }\n    }\n\n    .content-container {\n      border-radius: 100px;\n      border: 1px solid var(--sdds-stepper-icon-background);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: relative;\n\n      &.error {\n        border-color: var(--sdds-negative);\n        color: var(--sdds-negative);\n      }\n\n      &.success {\n        background-color: var(--sdds-positive);\n        border-color: var(--sdds-positive);\n        color: var(--sdds-white);\n      }\n\n      &.upcoming {\n        background-color: transparent;\n        border-color: var(--sdds-stepper-label-border-color-upcoming);\n        color: var(--sdds-stepper-label-text-color-upcoming);\n        opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n      }\n    }\n\n    .label {\n      text-align: center;\n\n      &.lg {\n        font: var(--sdds-detail-01);\n        letter-spacing: var(--sdds-detail-01-ls);\n      }\n\n      &.sm {\n        font: var(--sdds-detail-05);\n        letter-spacing: var(--sdds-detail-05-ls);\n      }\n\n      &.upcoming {\n        color: var(--sdds-stepper-label-text-color-upcoming);\n        opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n      }\n    }\n  }\n}\n\n:host(.last) {\n  [role='listItem'] {\n    &.sm,\n    &.lg {\n      &::after {\n        display: none;\n      }\n    }\n  }\n\n  [role='listItem'] {\n    &.sm {\n      &.vertical {\n        &::before {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.first) {\n  [role='listItem'] {\n    &.sm,\n    &.lg {\n      &::before {\n        display: none;\n      }\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element, State, Listen } from '@stencil/core';\nimport { InternalSddsStepperPropChange } from '../sdds-stepper';\n\n@Component({\n  tag: 'sdds-stepper-item',\n  styleUrl: 'sdds-stepper-item.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** Index of the step. Will be displayed in the step if state is current/upcoming. */\n  @Prop() index: string;\n\n  /** State of the stepper-item */\n  @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';\n\n  @State() hideLabel: boolean;\n\n  @State() size: 'sm' | 'lg';\n\n  @State() orientation: 'horizontal' | 'vertical';\n\n  @State() labelPosition: 'aside' | 'below';\n\n  @Element() el: HTMLElement;\n\n  private stepperEl: HTMLSddsStepperElement;\n\n  private stepperId: string;\n\n  /* Needs to be onload to do this on any updates. */\n  componentWillLoad() {\n    this.stepperEl = this.el.closest('sdds-stepper');\n    this.orientation = this.stepperEl.orientation;\n    this.labelPosition = this.stepperEl.labelPosition;\n    this.size = this.stepperEl.size;\n    this.hideLabel = this.stepperEl.hideLabels;\n    this.stepperId = this.stepperEl.stepperId;\n  }\n\n  @Listen('internalSddsPropsChange', { target: 'body' })\n  handlePropsChange(event: CustomEvent<InternalSddsStepperPropChange>) {\n    if (this.stepperId === event.detail.stepperId) {\n      event.detail.changed.forEach((changedProp) => {\n        if (typeof this[changedProp] === 'undefined') {\n          throw new Error(`Table prop is not supported: ${changedProp}`);\n        }\n        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {\n          this.labelPosition = 'aside';\n        }\n        this[changedProp] = event.detail[changedProp];\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"listItem\"\n          class={`${this.size} ${this.orientation} text-${this.labelPosition} ${\n            this.hideLabel ? 'hide-labels' : ''\n          }`}\n        >\n          <div class={`${this.state} content-container`}>\n            {this.state === 'success' || this.state === 'error' ? (\n              <sdds-icon\n                name={this.state === 'success' ? 'tick' : 'warning'}\n                size={this.size === 'lg' ? '20px' : '16px'}\n              ></sdds-icon>\n            ) : (\n              this.index\n            )}\n          </div>\n          {!this.hideLabel && (\n            <div class={`label ${this.size} ${this.state}`}>\n              <slot name=\"label\"></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-stepper.js.map

@@ -1 +0,0 @@
-{"file":"sdds-stepper.js","mappings":";;AAAA,MAAM,cAAc,GAAG,qUAAqU;;MCoB/UA,aAAW;;;;;;uBAI2B,YAAY;yBAGlB,OAAO;gBAGtB,IAAI;sBAGF,KAAK;qBAMP,MAAM,CAAC,UAAU,EAAE;;EAE/C,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,WAAW,KAAK,UAAU,EAAE;MACnC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;KAC9B;GACF;EAWD,qBAAqB;IACnB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,aAAa,CAAC;MACxB,WAAW,EAAE,IAAI,CAAC,WAAW;KAC9B,CAAC,CAAC;GACJ;EAGD,yBAAyB;IACvB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,eAAe,CAAC;MAC1B,aAAa,EAAE,IAAI,CAAC,aAAa;KAClC,CAAC,CAAC;GACJ;EAGD,gBAAgB;IACd,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,MAAM,CAAC;MACjB,IAAI,EAAE,IAAI,CAAC,IAAI;KAChB,CAAC,CAAC;GACJ;EAGD,sBAAsB;IACpB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;MAChC,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,OAAO,EAAE,CAAC,YAAY,CAAC;MACvB,UAAU,EAAE,IAAI,CAAC,UAAU;KAC5B,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,kBAAkB,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,IAE7E,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsStepper"],"sources":["./src/components/stepper/sdds-stepper.scss?tag=sdds-stepper&encapsulation=shadow","./src/components/stepper/sdds-stepper.tsx"],"sourcesContent":[":host {\n  [role='list'] {\n    &:not(.text-position-aside) {\n      display: table;\n      table-layout: fixed;\n      width: 100%;\n      list-style: none;\n    }\n\n    display: flex;\n    justify-content: space-evenly;\n    min-width: 100%;\n\n    &.vertical {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: unset;\n      gap: 52px;\n    }\n\n    &.vertical.sm {\n      gap: 36px;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element, Event } from '@stencil/core';\nimport { EventEmitter, HostElement, Watch } from '@stencil/core/internal';\n\ntype SddsStepperProps = {\n  orientation: 'horizontal' | 'vertical';\n  labelPosition: 'aside' | 'below';\n  size: 'sm' | 'lg';\n  hideLabels: boolean;\n};\n\nexport type InternalSddsStepperPropChange = {\n  stepperId: string;\n  changed: Array<keyof SddsStepperProps>;\n} & Partial<SddsStepperProps>;\n\n@Component({\n  tag: 'sdds-stepper',\n  styleUrl: 'sdds-stepper.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  @Element() host: HostElement;\n\n  /** The orientation the children are layed out. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Text position, only available on direction:horizontal */\n  @Prop() labelPosition: 'aside' | 'below' = 'below';\n\n  /** Size of the component and it's children. */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Hides the label for the child components if true. */\n  @Prop() hideLabels: boolean = false;\n\n  /** ID used for internal stepper functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for stepper events you need to set this ID yourself to identify the stepper, as the default ID is random and will be different every time.\n   */\n  @Prop() stepperId: string = crypto.randomUUID();\n\n  componentWillLoad() {\n    this.host.children[0].classList.add('first');\n    this.host.children[this.host.children.length - 1].classList.add('last');\n    if (this.orientation === 'vertical') {\n      this.labelPosition = 'aside';\n    }\n  }\n\n  @Event({\n    eventName: 'internalSddsPropsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  internalSddsPropsChange: EventEmitter<InternalSddsStepperPropChange>;\n\n  @Watch('orientation')\n  handleDirectionChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['orientation'],\n      orientation: this.orientation,\n    });\n  }\n\n  @Watch('labelPosition')\n  handleLabelPositionChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['labelPosition'],\n      labelPosition: this.labelPosition,\n    });\n  }\n\n  @Watch('size')\n  handleSizeChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['size'],\n      size: this.size,\n    });\n  }\n\n  @Watch('hideLabels')\n  handleHideLabelsChange() {\n    this.internalSddsPropsChange.emit({\n      stepperId: this.stepperId,\n      changed: ['hideLabels'],\n      hideLabels: this.hideLabels,\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"list\"\n          class={`${this.orientation} text-position-${this.labelPosition} ${this.size}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-table-body-row-expandable.js.map

@@ -1 +0,0 @@
-{"file":"sdds-table-body-row-expandable.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-body-row-expandable/table-body-row-expandable.scss?tag=sdds-table-body-row-expandable&encapsulation=shadow","./src/components/data-table/table-body-row-expandable/table-body-row-expandable.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n@import '../../../mixins/focus-state';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: contents;\n\n  .sdds-table__row,\n  .sdds-table__row-extend {\n    display: table-row;\n    border-bottom: 1px solid var(--sdds-data-table-divider);\n    background-color: var(--sdds-data-table-body-row-background);\n    transition: background-color 200ms ease;\n    color: var(--sdds-data-table-color);\n  }\n\n  .sdds-table__row:hover,\n  .sdds-table__row-extend:hover {\n    background-color: var(--sdds-data-table-body-row-background-hover);\n  }\n\n  .sdds-table__expand-control-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 46px;\n    cursor: pointer;\n    padding: 0 16px;\n    position: relative;\n\n    .sdds-table__expand-input {\n      all: unset;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      cursor: pointer;\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n    }\n\n    .sdds-expendable-row-icon {\n      height: 16px;\n      width: 16px;\n      transition: transform 200ms ease;\n      transform: rotate(0);\n    }\n  }\n\n  .sdds-table__row-expand {\n    display: none;\n    transition: background-color 200ms ease;\n\n    .sdds-table__cell-expand {\n      padding: 16px 16px 16px 66px;\n      color: var(--sdds-data-table-color);\n    }\n  }\n}\n\n:host(.sdds-table__row-expand--active) {\n  .sdds-table__row {\n    background-color: var(--sdds-data-table-body-row-background-selected);\n  }\n\n  .sdds-table__expand-control-container {\n    .sdds-expendable-row-icon {\n      transform: rotate(180deg);\n    }\n  }\n\n  .sdds-table__row-expand {\n    background-color: var(--sdds-data-table-body-row-background-selected);\n    display: table-row;\n  }\n}\n\n// test\n:host(.sdds-table__compact) {\n  .sdds-table__expand-control-container {\n    height: 30px;\n  }\n\n  .sdds-table__row-expand {\n    .sdds-table__cell-expand {\n      padding: 8px 16px 8px 66px;\n    }\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__cell--expand {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n  'modeVariant',\n];\n@Component({\n  tag: 'sdds-table-body-row-expandable',\n  styleUrl: 'table-body-row-expandable.scss',\n  shadow: true,\n})\nexport class TableBodyRowExpandable {\n  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n  @Prop() colSpan: number = null;\n\n  @State() isExpanded: boolean = false;\n\n  @State() tableId: string = '';\n\n  @State() columnsNumber: number = null;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** @internal Sends out expanded status which is used by the table header component */\n  @Event({\n    eventName: 'internalSddsRowExpanded',\n    bubbles: true,\n    cancelable: false,\n    composed: true,\n  })\n  internalSddsRowExpanded: EventEmitter<any>;\n\n  /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'internalSddsPagination',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsPagination: EventEmitter<string>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.internalSddsPagination.emit(this.tableId);\n  }\n\n  componentWillRender() {\n    if (this.colSpan !== null) {\n      this.columnsNumber = this.colSpan;\n    } else {\n      this.columnsNumber = this.tableEl.querySelector('sdds-table-header').childElementCount + 1;\n    }\n  }\n\n  sendValue() {\n    this.internalSddsRowExpanded.emit([this.tableId, this.isExpanded]);\n  }\n\n  onChangeHandler(event) {\n    this.isExpanded = event.currentTarget.checked === true;\n    this.sendValue();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__row-expand--active': this.isExpanded,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        <tr class=\"sdds-table__row\">\n          <td class=\"sdds-table__cell sdds-table__cell--expand\">\n            <label class=\"sdds-table__expand-control-container\">\n              <input\n                class=\"sdds-table__expand-input\"\n                type=\"checkbox\"\n                onChange={(event) => this.onChangeHandler(event)}\n                checked={this.isExpanded}\n              />\n              <span class=\"sdds-expendable-row-icon\">\n                <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </span>\n            </label>\n          </td>\n          <slot />\n        </tr>\n\n        <tr class=\"sdds-table__row-expand\">\n          <td class=\"sdds-table__cell-expand\" colSpan={this.columnsNumber}>\n            <slot name=\"expand-row\" />\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-table-body-row.js.map

@@ -1 +0,0 @@
-{"file":"sdds-table-body-row.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/sdds-table-body.js.map

@@ -1 +0,0 @@
-{"file":"sdds-table-body.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-body/table-body.scss?tag=sdds-table-body","./src/components/data-table/table-body/table-body.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\nsdds-table-body {\n  @include sdds-box-sizing;\n\n  display: table-row-group;\n\n  .sdds-table__info-message {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    display: table-cell;\n    box-sizing: border-box;\n    color: var(--sdds-data-table-color);\n    padding: var(--sdds-spacing-element-16);\n    min-width: 192px;\n    vertical-align: top;\n    background-color: transparent;\n    transition: background-color 200ms ease;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst jsonData = [\n  {\n    truck: 'L-series',\n    driver: 'Sonya Bruce',\n    country: 'Brazil',\n    mileage: 123987,\n  },\n  {\n    truck: 'P-series',\n    driver: 'Guerra Bowman',\n    country: 'Sweden',\n    mileage: 2000852,\n  },\n  {\n    truck: 'G-series',\n    driver: 'Ferrell Wallace',\n    country: 'Germany',\n    mileage: 564,\n  },\n  {\n    truck: 'R-series',\n    driver: 'Cox Burris',\n    country: 'Spain',\n    mileage: 1789357,\n  },\n  {\n    truck: 'S-series',\n    driver: 'Montgomery Cervantes',\n    country: 'Croatia',\n    mileage: 65,\n  },\n  {\n    truck: 'L-series',\n    driver: 'Sheryl Nielsen',\n    country: 'Greece',\n    mileage: 365784,\n  },\n  {\n    truck: 'G-series',\n    driver: 'Benton Gomez',\n    country: 'France',\n    mileage: 80957,\n  },\n];\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n];\n\n@Component({\n  tag: 'sdds-table-body',\n  styleUrl: 'table-body.scss',\n  shadow: false,\n})\nexport class TableBody {\n  /** Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term */\n  @Prop() disableFilteringFunction: boolean = false;\n\n  /** Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting */\n  @Prop() disableSortingFunction: boolean = false;\n\n  /** Prop to pass JSON string which enables automatic rendering of table rows and cells  */\n  @Prop({ mutable: true }) bodyData: any;\n\n  /** Prop for showcase of rendering JSON in body-data, just for presentation purposes */\n  @Prop() enableDummyData: boolean = false;\n\n  @State() jsonData: any = JSON.stringify(jsonData);\n\n  @Element() host: HTMLElement;\n\n  @State() rowsPerPage: number = 1;\n\n  @State() enableMultiselect: boolean = false;\n\n  @State() enablePaginationTableBody: boolean = false;\n\n  @State() enableExpandableRows: boolean = true;\n\n  @State() innerBodyData = [];\n\n  @State() bodyDataManipulated = [];\n\n  @State() bodyDataOriginal = [];\n\n  @State() multiselectArray = [];\n\n  @State() multiselectArrayJSON: string;\n\n  @State() mainCheckboxStatus: boolean = false;\n\n  @State() columnsNumber: number = 0;\n\n  @State() disableAllSorting: boolean = false;\n\n  @State() numberOfPages: number = 0;\n\n  @State() paginationValue: number = 1;\n\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() showNoResultsMessage: boolean = false;\n\n  @State() tableId: string = '';\n\n  tableEl: HTMLSddsTableElement;\n\n  @Watch('bodyData')\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.innerBodyData = JSON.parse(newValue);\n    } else {\n      this.innerBodyData = newValue;\n    }\n    this.bodyDataManipulated = [...this.innerBodyData];\n    this.bodyDataOriginal = [...this.innerBodyData];\n  }\n\n  /** @internal Event that sends unique table identifier and enable/disable status for sorting functionality */\n  @Event({\n    eventName: 'internalSddsSortingChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsSortingChange: EventEmitter<any>;\n\n  /** @internal Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled */\n  @Event({\n    eventName: 'internalSddsCheckboxChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsCheckboxChange: EventEmitter<any>;\n\n  /** @internal Sends unique table identifier and status if mainCheckbox should change its state based on selection status of single rows when multiselect feature is used */\n  @Event({\n    eventName: 'internalSddsMainCheckboxChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsMainCheckboxChange: EventEmitter<any>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  static compareValues(key, order = 'asc') {\n    return function innerSort(a, b) {\n      // eslint-disable-next-line no-prototype-builtins\n      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {\n        // property doesn't exist on either object\n        return 0;\n      }\n\n      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];\n      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];\n\n      let comparison = 0;\n      if (varA > varB) {\n        comparison = 1;\n      } else if (varA < varB) {\n        comparison = -1;\n      }\n      return order === 'desc' ? comparison * -1 : comparison;\n    };\n  }\n\n  uncheckAll = () => {\n    this.mainCheckboxStatus = false;\n    this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n    this.internalSddsCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n  };\n\n  sortData(keyValue, sortingDirection) {\n    if (!this.disableSortingFunction) {\n      if (this.enableMultiselect) {\n        // Uncheck all checkboxes as state of checkbox is lost on sorting. Do it only in case multiSelect is True.\n        this.uncheckAll();\n      }\n\n      // use spread operator to make enable sorting and modifying array, same as using .slice()\n      this.bodyDataManipulated = [...this.bodyDataManipulated];\n      this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));\n    }\n  }\n\n  // Listen to sortColumnData from data-table-header-element - TODO\n  @Listen('sddsSortChange', { target: 'body' })\n  updateOptionsContent(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;\n    if (this.tableId === receivedID) {\n      this.sortData(receivedKeyValue, receivedSortingDirection);\n    }\n  }\n\n  selectedDataExporter = () => {\n    const selectedRows = this.host.getElementsByClassName('sdds-table__row--selected');\n\n    this.multiselectArray = [];\n    for (let j = 0; j < selectedRows.length; j++) {\n      const rowCells = selectedRows[j].getElementsByTagName('sdds-body-cell');\n      const selectedObject = {};\n      for (let i = 0; i < rowCells.length; i++) {\n        const currentCellKey = rowCells[i].getAttribute('cell-key');\n        const currentCellValue = rowCells[i].getAttribute('cell-value');\n        selectedObject[currentCellKey] = currentCellValue;\n      }\n      this.multiselectArray.push(selectedObject);\n    }\n    this.multiselectArrayJSON = JSON.stringify(this.multiselectArray);\n  };\n\n  @Listen('internalSddsMainCheckboxChange', { target: 'body' }) // -\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      [, this.mainCheckboxStatus] = event.detail;\n      this.selectedDataExporter();\n    }\n  }\n\n  bodyCheckBoxClicked = () => {\n    const numberOfRows = this.host.getElementsByClassName('sdds-table__row').length;\n\n    const numberOfRowsSelected = this.host.getElementsByClassName(\n      'sdds-table__row--selected',\n    ).length;\n\n    this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;\n\n    this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n\n    this.selectedDataExporter();\n  };\n\n  // No need to read the value, event is here just to trigger another function\n  @Listen('internalSddsRowChange', { target: 'body' })\n  bodyCheckboxListener() {\n    this.bodyCheckBoxClicked();\n  }\n\n  searchFunction(searchTerm) {\n    if (!this.disableFilteringFunction) {\n      /*\n      // Logic for filtering JSON data on all columns\n      // Really nice solution, do not delete, might be needed in future\n      // Reason to go with upper one is not to lose selected state on checkboxes\n      if (searchTerm.length > 0) {\n        this.bodyDataManipulated = this.bodyDataOriginal.filter((option) =>\n          Object.keys(option).some(\n            (key) =>\n              String(option[key] ?? '')\n                .toLowerCase()\n                .indexOf(searchTerm) >= 0\n          )\n        );\n      } else {\n        this.bodyDataManipulated = this.bodyDataOriginal;\n      }\n  */\n\n      // grab all rows in body\n      const dataRowsFiltering = this.host.querySelectorAll('sdds-table-body-row');\n\n      if (searchTerm.length > 0) {\n        if (this.enablePaginationTableBody) {\n          this.tempPaginationDisable = true;\n        }\n\n        dataRowsFiltering.forEach((item) => {\n          const cells = item.querySelectorAll('sdds-body-cell');\n          const cellValuesArray = [];\n\n          // go through cells and save cell-values in array\n          cells.forEach((cellItem) => {\n            const cellValue = cellItem.getAttribute('cell-value').toLowerCase();\n            cellValuesArray.push(cellValue);\n          });\n\n          // iterate over array of values and see if one matches search string\n          const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));\n\n          // if matches, show parent row, otherwise hide the row\n          if (matchCounter) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        });\n\n        this.disableAllSorting = true;\n        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);\n\n        const dataRowsHidden = this.host.querySelectorAll('.sdds-table__row--hidden');\n\n        // If same, info message will be shown\n        this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;\n      } else {\n        if (this.enablePaginationTableBody) {\n          this.tempPaginationDisable = false;\n        }\n\n        // Check if pagination is ON in order to prevent showing all rows\n        if (this.enablePaginationTableBody) {\n          // TODO: EMIT PAGINATION\n        } else {\n          dataRowsFiltering.forEach((item) => {\n            item.classList.remove('sdds-table__row--hidden');\n          });\n        }\n\n        this.disableAllSorting = false;\n        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);\n      }\n    }\n  }\n\n  // Listen to sddsFilter from tableToolbar component\n  @Listen('sddsFilter', { target: 'body' })\n  sddsFilterListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.searchFunction(event.detail[1]);\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n\n    if (this.enableDummyData) {\n      this.bodyData = this.jsonData;\n    } else if (this.bodyData) {\n      this.arrayDataWatcher(this.bodyData);\n    }\n  }\n\n  componentWillRender() {\n    const headerColumnsNo =\n      this.host.parentElement.querySelector('sdds-table-header').children.length;\n\n    // multiselect and expended features requires one extra column for controls...\n    if (this.enableMultiselect || this.enableExpandableRows) {\n      this.columnsNumber = headerColumnsNo + 1;\n    } else {\n      this.columnsNumber = headerColumnsNo;\n    }\n  }\n\n  render() {\n    return (\n      <Host data-selected-rows={this.multiselectArrayJSON}>\n        {this.bodyDataManipulated.map((row) => (\n          <sdds-table-body-row>\n            {Object.keys(row).map((cellData) => (\n              <sdds-body-cell cell-key={cellData} cell-value={row[cellData]}></sdds-body-cell>\n            ))}\n          </sdds-table-body-row>\n        ))}\n        {this.showNoResultsMessage && (\n          <tr>\n            <td class=\"sdds-table__info-message\" colSpan={this.columnsNumber}>\n              Unfortunately, no data matches your search term &#128533;\n            </td>\n          </tr>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-table-footer.js.map

@@ -1 +0,0 @@
-{"file":"sdds-table-footer.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-footer/table-footer.scss?tag=sdds-table-footer&encapsulation=shadow","./src/components/data-table/table-footer/table-footer.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-footer-group;\n  height: 48px;\n\n  .sdds-table__footer-row {\n    background-color: var(--sdds-data-table-footer-background);\n    color: var(--sdds-data-table-color);\n  }\n\n  .sdds-table__footer-cell {\n    padding: 0 16px;\n\n    .sdds-table__pagination {\n      height: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      .sdds-table__row-selector,\n      .sdds-table__page-selector {\n        display: flex;\n        align-items: center;\n      }\n\n      .sdds-table__page-selector-input {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        background-color: var(--sdds-data-table-footer-page-selector-input-background);\n        color: var(--sdds-data-table-color);\n        width: 36px;\n        height: 30px;\n        border: none;\n        border-radius: 4px;\n        transition: background-color 250ms ease;\n        margin-right: 4px;\n        padding-right: 8px;\n\n        &:hover {\n          background-color: var(--sdds-data-table-footer-page-selector-input-background-hover);\n        }\n\n        &:disabled {\n          color: var(--sdds-data-table-footer-page-selector-input-color-disabled);\n        }\n      }\n\n      .sdds-table__page-selector-input--shake {\n        animation: sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      }\n\n      .sdds-table__footer-text {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding: 1px 8px 0 0;\n      }\n\n      .sdds-table__footer-btn {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border: none;\n        background-color: transparent;\n        cursor: pointer;\n        height: 32px;\n        width: 32px;\n        border-radius: 4px;\n        transition: background-color 250ms ease;\n\n        &:hover {\n          background-color: var(--sdds-data-table-footer-btn-hover);\n        }\n\n        &:disabled {\n          cursor: default;\n          opacity: 0.38;\n\n          &:hover {\n            background-color: transparent;\n          }\n        }\n      }\n\n      .sdds-table__footer-btn-svg {\n        height: 20px;\n        width: 20px;\n        fill: var(--sdds-data-table-color)\n      }\n    }\n  }\n}\n\n:host(.sdds-table--compact) {\n  height: 32px;\n\n  .sdds-table__footer-cell {\n    .sdds-table__pagination {\n      height: 32px;\n\n      .sdds-table__page-selector-input {\n        height: 24px;\n      }\n\n      .sdds-table__footer-btn {\n        height: 28px;\n        width: 28px;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Listen,\n  State,\n  Event,\n  EventEmitter,\n  Prop,\n  Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\nfunction removeShakeAnimation(e: AnimationEvent & { target: HTMLElement }) {\n  e.target.classList.remove('sdds-table__page-selector-input--shake');\n}\n\n@Component({\n  tag: 'sdds-table-footer',\n  styleUrl: 'table-footer.scss',\n  shadow: true,\n})\nexport class TableFooter {\n  /** Enable pagination and show pagination controls  */\n  @Prop({ reflect: true }) enablePagination: boolean = false;\n\n  /** Sets how many rows to display when pagination is enabled */\n  @Prop({ reflect: true }) rowsPerPage: number = 5;\n\n  /** Prop to enable client controlled pagination  */\n  @Prop({ reflect: true }) enableClientPagination: boolean = false;\n\n  /** Prop for client to set current page number */\n  @Prop({ reflect: true }) clientPaginationValue: number = 1;\n\n  /** Prop for client to set max number of pages */\n  @Prop({ reflect: true }) clientMaxPages: number = 1;\n\n  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n  @Prop() clientSetColumnsNumber: number = null;\n\n  /** Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component */\n  @Prop() disablePaginationFunction: boolean = false;\n\n  /** State that memorize number of columns to display colSpan correctly - set from parent level */\n  @State() columnsNumber: number = 0;\n\n  /** Total number of pages, number of the rows divided with number of rows per page */\n  @State() numberOfPages: number = 0;\n\n  /** Initial value for pagination in input element */\n  @State() paginationValue: number = 1;\n\n  /** Temporarily disable pagination - due to search - set from parent level */\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** @internal Event that footer sends out in order to receive other necessary information from other subcomponents */\n  @Event({\n    eventName: 'internalSddsEnablePagination',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsEnablePagination: EventEmitter<any>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n\n    const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;\n\n    const numberOfColumns =\n      this.host.parentElement.querySelector('sdds-table-header').childElementCount;\n\n    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);\n\n    if (this.clientSetColumnsNumber !== null) {\n      this.columnsNumber = this.clientSetColumnsNumber;\n    } else {\n      this.columnsNumber = numberOfColumns;\n    }\n\n    this.internalSddsEnablePagination.emit(this.tableId);\n  }\n\n  paginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.paginationValue >= 2) {\n      this.paginationValue--;\n      this.runPagination();\n    }\n  };\n\n  paginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.paginationValue <= this.numberOfPages) {\n      this.paginationValue++;\n      this.runPagination();\n    }\n  };\n\n  paginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.numberOfPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.paginationValue = event.target.max;\n    } else {\n      this.paginationValue = event.target.value;\n    }\n    this.runPagination();\n  }\n\n  @Listen('internalSddsPagination', { target: 'body' })\n  sddsPaginationListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail) {\n      this.runPagination();\n    }\n  }\n\n  runPagination = () => {\n    if (!this.disablePaginationFunction) {\n      // grab all rows in body\n      const dataRowsPagination = this.host.parentNode\n        .querySelector('sdds-table-body')\n        .querySelectorAll('.sdds-table__row');\n\n      dataRowsPagination.forEach((item, i) => {\n        // for making logic easier 1st result, 2nd result...\n        const index = i + 1;\n\n        if (this.tempPaginationDisable) {\n          this.paginationValue = 1;\n        } else {\n          const lastResult = this.rowsPerPage * this.paginationValue;\n          const firstResult = lastResult - this.rowsPerPage;\n\n          if (index > firstResult && index <= lastResult) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        }\n      });\n    }\n  };\n\n  /* Client based functions below */\n\n  /** Event to send current page value back to sdds-table-body component, can also be listened to in order to implement custom pagination logic. */\n  @Event({\n    eventName: 'sddsPageChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsPageChange: EventEmitter<any>;\n\n  sendPaginationValue(value) {\n    this.sddsPageChange.emit([this.tableId, value]);\n  }\n\n  clientPaginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.clientPaginationValue >= 2) {\n      this.clientPaginationValue--;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.clientPaginationValue <= this.clientMaxPages) {\n      this.clientPaginationValue++;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.clientMaxPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.clientPaginationValue = event.target.max;\n    } else {\n      this.clientPaginationValue = event.target.value;\n    }\n    this.sendPaginationValue(this.clientPaginationValue);\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <tr class=\"sdds-table__footer-row\">\n          <td class=\"sdds-table__footer-cell\" colSpan={this.columnsNumber}>\n            {this.enablePagination && !this.enableClientPagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.numberOfPages}\n                    value={this.paginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.paginationInputChange(event)}\n                    onFocusout={(event) => this.paginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                    disabled={this.tempPaginationDisable}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.tempPaginationDisable ? 1 : this.numberOfPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.paginationValue <= 1 || this.tempPaginationDisable}\n                    onClick={(event) => this.paginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\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=\"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={\n                      this.paginationValue >= this.numberOfPages || this.tempPaginationDisable\n                    }\n                    onClick={(event) => this.paginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\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=\"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n            {this.enableClientPagination && !this.enablePagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.clientMaxPages}\n                    value={this.clientPaginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.clientPaginationInputChange(event)}\n                    onFocusout={(event) => this.clientPaginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.clientMaxPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue <= 1}\n                    onClick={(event) => this.clientPaginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\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=\"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue >= this.clientMaxPages}\n                    onClick={(event) => this.clientPaginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\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=\"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-table-header.js.map

@@ -1 +0,0 @@
-{"file":"sdds-table-header.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-header/table-header.scss?tag=sdds-table-header&encapsulation=shadow","./src/components/data-table/table-header/table-header.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-header-group;\n\n  .sdds-table__header-cell--checkbox {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    display: table-cell;\n    text-align: left;\n    color: var(--sdds-data-table-color);\n    background-color: var(--sdds-data-table-header-background);\n    border-bottom: 1px solid var(--sdds-data-table-divider);\n    height: 48px;\n    box-sizing: border-box;\n\n    // To fix issues with border-radius propagating up from button\n    overflow: hidden;\n    transition: background-color 200ms ease;\n    min-width: unset;\n    width: 48px;\n    padding: 0;\n    border-top-left-radius: 4px;\n  }\n\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .sdds-table__expand-control-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 48px;\n    cursor: pointer;\n\n    .sdds-table__expand-input {\n      display: none;\n    }\n\n    .sdds-expandable-row-icon {\n      height: 20px;\n      width: 20px;\n      transition: transform 200ms ease;\n      transform: rotate(0);\n    }\n\n    .sdds-expandable-row-icon--opened {\n      transform: rotate(180deg);\n    }\n  }\n\n  ::slotted(sdds-header-cell:hover) {\n    background-color: var(--sdds-data-table-header-background-hover);\n  }\n}\n\n:host(.sdds-table--compact) {\n  .sdds-table__header-cell--checkbox {\n    height: 32px;\n  }\n\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__header-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n\n:host(.sdds-table--toolbar-available) {\n  .sdds-table__header-cell--checkbox {\n    border-top-left-radius: 0;\n  }\n}\n","import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n\n@Component({\n  tag: 'sdds-table-header',\n  styleUrl: 'table-header.scss',\n  shadow: true,\n})\nexport class TableHeaderRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() enableExpandableRows: boolean = false;\n\n  @State() mainCheckboxSelected: boolean = false;\n\n  @State() mainExpendSelected: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() enableToolbarDesign: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** @internal Send status of main checkbox in header to the parent, sdds-table component */\n  @Event({\n    eventName: 'internalSddsMainCheckboxSelect',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsMainCheckboxSelect: EventEmitter<any>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  @Listen('internalSddsMainCheckboxChange', { target: 'body' })\n  internalSddsMainCheckboxChangeListener(event: CustomEvent<any>) {\n    const [receivedID, receivedMainCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.mainCheckboxSelected = receivedMainCheckboxStatus;\n    }\n  }\n\n  @Listen('internalSddsRowExpanded', { target: 'body' })\n  internalSddsRowExpandedListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      // TODO: Improve this logic. Why we get late repose in DOM?\n      setTimeout(() => {\n        this.bodyExpandClicked();\n      }, 100);\n    }\n  }\n\n  bodyExpandClicked() {\n    const numberOfExtendRowsActive = this.host.parentElement\n      .querySelector('sdds-table-body')\n      .getElementsByClassName('sdds-table__row-extend--active').length;\n    const numberOfExtendRows = this.host.parentElement\n      .querySelector('sdds-table-body')\n      .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n    if (numberOfExtendRows === numberOfExtendRowsActive) {\n      this.mainExpendSelected = true;\n    } else {\n      this.mainExpendSelected = false;\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentWillRender() {\n    this.enableToolbarDesign =\n      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n  }\n\n  headCheckBoxClicked(event) {\n    this.mainCheckboxSelected = event.currentTarget.checked;\n    this.internalSddsMainCheckboxSelect.emit([this.tableId, this.mainCheckboxSelected]);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table--compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--toolbar-available': this.enableToolbarDesign,\n        }}\n      >\n        <tr>\n          {this.enableMultiselect && (\n            <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n              <div class=\"sdds-checkbox-item\">\n                <label class=\"sdds-form-label sdds-form-label--data-table\">\n                  <input\n                    class=\"sdds-form-input\"\n                    type=\"checkbox\"\n                    onChange={(e) => this.headCheckBoxClicked(e)}\n                    checked={this.mainCheckboxSelected}\n                  />\n                </label>\n              </div>\n            </th>\n          )}\n          {this.enableExpandableRows && (\n            <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n          )}\n          <slot></slot>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-table-toolbar.js.map

@@ -1 +0,0 @@
-{"file":"sdds-table-toolbar.js","mappings":";;AAAA,MAAM,eAAe,GAAG,4nEAA4nE;;ACappE,MAAM,kBAAkB,GAA2C;EACjE,eAAe;EACf,YAAY;EACZ,kBAAkB;CACnB,CAAC;MAOW,YAAY;;;;;;sBAEuB,EAAE;2BAGI,KAAK;4BAEpB,KAAK;yBAER,KAAK;sBAER,KAAK;2BAEA,KAAK;mBAEd,EAAE;;EAgB7B,8BAA8B,CAAC,KAA+C;IAC5E,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;MACzC,KAAK,CAAC,MAAM,CAAC,OAAO;SACjB,MAAM,CAAC,CAAC,WAAW,KAAK,kBAAkB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;SACjE,OAAO,CAAC,CAAC,WAAW;QACnB,IAAI,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,WAAW,EAAE;UAC5C,MAAM,IAAI,KAAK,CAAC,gCAAgC,WAAW,EAAE,CAAC,CAAC;SAChE;QACD,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;OAC/C,CAAC,CAAC;KACN;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;GACrC;EAED,iBAAiB;IACf,kBAAkB,CAAC,OAAO,CAAC,CAAC,aAAa;MACvC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;KACnD,CAAC,CAAC;GACJ;EAED,cAAc,CAAC,KAAK;IAClB,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;IAC3D,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IAE7D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjD,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;MACzB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;KACnE;SAAM;MACL,kBAAkB,CAAC,SAAS,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC;KACtE;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,aAAa,GAAG,qBAAqB,GAAG,EAAE,IAC1D,WAAK,KAAK,EAAC,4BAA4B,IACrC,eAAS,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,UAAU,CAAW,EAC9D,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,eAAe,KACnB,WAAK,KAAK,EAAC,uBAAuB,IAChC,aACE,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAC9C,EACF,YAAM,KAAK,EAAC,4BAA4B,IACtC,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,IACrE,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0SAA0S,EAC5S,IAAI,EAAC,cAAc,GACnB,CACE,CACD,CACH,CACP,EACD,YAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/data-table/table-toolbar/table-toolbar.scss?tag=sdds-table-toolbar&encapsulation=shadow","./src/components/data-table/table-toolbar/table-toolbar.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-caption;\n  position: relative;\n  background-color: var(--sdds-data-table-toolbar-background);\n  color: var(--sdds-data-table-color);\n  padding: 0 var(--sdds-spacing-element-16);\n  height: 64px;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n\n  .sdds-table__upper-bar-flex {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .sdds-table__title {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    padding-top: var(--sdds-spacing-element-16);\n    text-align: left;\n  }\n\n  .sdds-table__actionbar {\n    display: flex;\n    align-self: center;\n    gap: 8px;\n  }\n\n  .sdds-table__searchbar {\n    display: flex;\n    align-self: center;\n    position: relative;\n    height: 40px;\n    width: 40px;\n    border-radius: 4px 4px 0 0;\n    transition: background-color 250ms ease, width 250ms ease;\n    overflow: hidden;\n    background-color: transparent;\n\n    &::after {\n      content: '';\n      width: 100%;\n      height: 2px;\n      position: absolute;\n      bottom: 0;\n      background-color: var(--sdds-blue-400);\n      transform: scaleX(0);\n      transition: transform 150ms ease;\n    }\n\n    &:focus-within {\n      &::after {\n        transform: scaleX(100%);\n      }\n    }\n\n    &:focus-within,\n    &.sdds-table__searchbar--active {\n      width: 208px;\n      background-color: var(--sdds-data-table-toolbar-searchbar-background);\n\n      &:hover {\n        background-color: var(--sdds-data-table-toolbar-searchbar-background);\n      }\n    }\n\n    .sdds-table__searchbar-input {\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      color: var(--sdds-data-table-color);\n      z-index: 1;\n      width: 100%;\n      height: 100%;\n      border: none;\n      padding: 0 36px 0 16px;\n      background-color: transparent;\n      outline: none;\n      cursor: pointer;\n\n      :focus {\n        background-color: var(--sdds-data-table-toolbar-searchbar-background);\n      }\n    }\n\n    &:hover {\n      background-color: var(--sdds-data-table-toolbar-searchbar-background-hover);\n    }\n\n    .sdds-table__searchbar-icon {\n      z-index: 0;\n      position: absolute;\n      right: 9px;\n      top: 9px;\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n\n:host(.sdds-table--compact) {\n  height: 56px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\n@Component({\n  tag: 'sdds-table-toolbar',\n  styleUrl: 'table-toolbar.scss',\n  shadow: true,\n})\nexport class TableToolbar {\n  /** Adds title to the data-table */\n  @Prop({ reflect: true }) tableTitle: string = '';\n\n  /** Enables preview of searchbar */\n  @Prop({ reflect: true }) enableFiltering: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Used for sending users input to main parent <sdds-table> component, can also be listened to in order to implement custom sorting logic. */\n  @Event({\n    eventName: 'sddsFilter',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsFilter: EventEmitter<any>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  searchFunction(event) {\n    const searchTerm = event.currentTarget.value.toLowerCase();\n    const sddsTableSearchBar = event.currentTarget.parentElement;\n\n    this.sddsFilter.emit([this.tableId, searchTerm]);\n\n    if (searchTerm.length > 0) {\n      sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n    } else {\n      sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <div class=\"sdds-table__upper-bar-flex\">\n          <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n          <div class=\"sdds-table__actionbar\">\n            {this.enableFiltering && (\n              <div class=\"sdds-table__searchbar\">\n                <input\n                  class=\"sdds-table__searchbar-input\"\n                  type=\"text\"\n                  onKeyUp={(event) => this.searchFunction(event)}\n                />\n                <span class=\"sdds-table__searchbar-icon\">\n                  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                    <path\n                      fill-rule=\"evenodd\"\n                      clip-rule=\"evenodd\"\n                      d=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </span>\n              </div>\n            )}\n            <slot name=\"sdds-table__actionbar\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}