@scania/tegel 0.0.61 → 0.0.72

package/dist/esm/sdds-core-header-item_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-core-header-item.sdds-header-item.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,8YAA8Y;;MCO3Z,cAAc;;;;EACzB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,MAAM,IACf,eAAa,CACT,CACD,EACP;GACH;;;;AChBH,MAAM,aAAa,GAAG,uqCAAuqC;;MCQhrC,UAAU;;;kBAKK,KAAK;oBAGH,KAAK;;EAIjC,aAAa,CACX,eAAkD,EAClD,gBAAgD;IAEhD,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzE,MAAM,mBAAmB,GAAG,gBAAgB,CAAC,CAAC,CAAgB,CAAC;IAC/D,IAAI,mBAAmB,EAAE;MACvB,MAAM,YAAY,GAAG,GAAG,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;MAC/D,IAAI,YAAY,EAAE;QAChB,gBAAgB,CAAC,YAAY,CAAC,CAAC;OAChC;KACF;GACF;;;;EAKD,qBAAqB;IACnB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAM,WAAW,GAAG,CAAC,OAAO,KAC1B,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MAC3F,MAAM,YAAY,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;MACnF,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;MAE9C,MAAM,OAAO,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;MACrE,MAAM,aAAa,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;MACrF,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;KAC5C;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC7B,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;GACxE;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,6BACE,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI,CAAC,MAAM;QAC/B,oBAAoB,EAAE,IAAI,CAAC,QAAQ;OACpC,IAED,eAAa,CACS,CACnB,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/core-header-item/core-header-item.scss?tag=sdds-core-header-item&encapsulation=shadow","./src/components/header/webcomponent/core-header-item/core-header-item.tsx","./src/components/header/webcomponent/header-item/header-item.scss?tag=sdds-header-item&encapsulation=shadow","./src/components/header/webcomponent/header-item/header-item.tsx"],"sourcesContent":["@import '../../../../mixins/box-sizing';\n\n:host {\n  font: var(--sdds-headline-07);\n  letter-spacing: var(--sdds-headline-07-ls);\n  color: var(--sdds-header-nav-item-color);\n\n  .item {\n    all: unset;\n    @include sdds-box-sizing;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-width: var(--sdds-header-height);\n    height: var(--sdds-header-height);\n    margin: 0;\n  }\n\n  slot {\n    white-space: nowrap;\n  }\n\n  ::slotted(svg) {\n    font-size: 20px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-core-header-item',\n  styleUrl: 'core-header-item.scss',\n  shadow: true,\n})\nexport class CoreHeaderItem {\n  render() {\n    return (\n      <Host>\n        <div class=\"item\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../../../mixins/box-sizing';\n@import '../../../../mixins/focus-state';\n\n:host {\n  ::slotted(button),\n  ::slotted(a) {\n    all: unset;\n    @include sdds-box-sizing;\n\n    background-color: var(--sdds-header-background);\n    border-right: 1px solid var(--sdds-header--basic-element-border);\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n    padding: 0 24px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  ::slotted(button:hover),\n  ::slotted(a:hover) {\n    background-color: var(--sdds-header--basic-element-background-hover);\n  }\n\n  ::slotted(button:focus-visible),\n  ::slotted(a:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n  .component-active {\n    ::slotted(button),\n    ::slotted(a) {\n      background-color: var(--sdds-header--basic-element-background-open);\n      color: var(--sdds-header-nav-item-dropdown-opened-color);\n      border-color: var(--sdds-header--basic-element-border-open);\n    }\n  }\n\n  .component-selected:not(.component-active) {\n    ::slotted(button),\n    ::slotted(a) {\n      background-color: var(--sdds-header--basic-element-background-selected);\n      padding-top: 4px;\n      border-bottom-style: solid;\n      border-bottom-width: 4px;\n      border-bottom-color: var(--sdds-nav-item-border-color-active);\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { dfs } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-item',\n  styleUrl: 'header-item.scss',\n  shadow: true,\n})\nexport class HeaderItem {\n  @Element() host: HTMLElement;\n\n  /** If the button should appear active. Can be used when the button is\n   * triggering a dropdown, and the dropdown is open, for example. */\n  @Prop() active: boolean = false;\n\n  /** If the button should appear selected. */\n  @Prop() selected: boolean = false;\n\n  private slotEl: HTMLSlotElement;\n\n  updateSlotted(\n    searchPredicate: (element: HTMLElement) => boolean,\n    mutationCallback: (element: HTMLElement) => void,\n  ) {\n    const assignedElements = this.slotEl.assignedElements({ flatten: true });\n    const firstSlottedElement = assignedElements[0] as HTMLElement;\n    if (firstSlottedElement) {\n      const foundElement = dfs(firstSlottedElement, searchPredicate);\n      if (foundElement) {\n        mutationCallback(foundElement);\n      }\n    }\n  }\n\n  /**\n   * This function is needed because we can't use CSS selectors to style something in the light dom\n   */\n  updateSlottedElements() {\n    if (this.slotEl) {\n      const isIconOrSvg = (element) =>\n        element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';\n      const addIconClass = (element) => element.classList.add('__sdds-header-item-icon');\n      this.updateSlotted(isIconOrSvg, addIconClass);\n\n      const isImage = (element) => element.tagName.toLowerCase() === 'img';\n      const addImageClass = (element) => element.classList.add('__sdds-header-item-image');\n      this.updateSlotted(isImage, addImageClass);\n    }\n  }\n\n  componentDidLoad() {\n    this.slotEl = this.host.shadowRoot.querySelector('slot');\n    this.updateSlottedElements();\n    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);\n  }\n\n  render() {\n    return (\n      <Host>\n        <sdds-core-header-item\n          class={{\n            'component-active': this.active,\n            'component-selected': this.selected,\n          }}\n        >\n          <slot></slot>\n        </sdds-core-header-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-datetime.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-datetime.entry.js","mappings":"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","names":[],"sources":["./src/components/datetime/datetime.scss?tag=sdds-datetime&encapsulation=scoped","./src/components/datetime/datetime.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@mixin datetime-base {\n  @include sdds-box-sizing;\n\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-datetime-color);\n  background-color: var(--sdds-datetime-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-datetime-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-datetime-placeholder-color-focus);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-datetime-background-disabled);\n    color: var(--sdds-datetime-color-disabled);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-datetime-placeholder-disabled);\n    }\n\n    ~ .sdds-datetime-label-inside {\n      color: var(--sdds-datetime-label-disabled);\n    }\n  }\n}\n\n// icons\n\n.sdds-datetime-input,\n.sdds-datetime-input-md,\n.sdds-datetime-input-sm {\n  &[type='datetime-local'] {\n    ~ .icon-time {\n      display: none;\n    }\n  }\n\n  &[type='date'] {\n    ~ .icon-time {\n      display: none;\n    }\n  }\n\n  &[type='time'] {\n    ~ .icon-datetime-local {\n      display: none;\n    }\n  }\n}\n\n//Sizes\n.sdds-datetime-input {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-md {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-sm {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-datetime-container {\n  border-radius: 4px 4px 0 0;\n  display: flex;\n  position: relative;\n  height: 56px;\n  box-sizing: border-box;\n  background-color: var(--sdds-datetime-background);\n  border-bottom: 1px solid var(--sdds-datetime-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  &:hover {\n    border-bottom-color: var(--sdds-datetime-border-bottom-hover);\n  }\n\n  .sdds-form-datetime-md & {\n    height: 48px;\n  }\n\n  .sdds-form-datetime-sm & {\n    height: 40px;\n  }\n}\n\n.sdds-datetime-input-container {\n  position: relative;\n  width: 100%;\n\n  .datetime-icon {\n    height: 20px;\n    width: 20px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 18px;\n    pointer-events: none;\n\n    path {\n      fill: var(--sdds-datetime-icon);\n    }\n  }\n}\n\n.sdds-datetime-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-datetime-label-color);\n}\n\n.sdds-datetime-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  position: absolute;\n  pointer-events: none;\n  color: var(--sdds-datetime-label-inside-color);\n  left: 16px;\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  &::input-placeholder {\n    color: transparent;\n  }\n\n  &:placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-datetime-placeholder-color-focus);\n  }\n}\n\n@mixin label-inside-transition {\n  transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-datetime {\n  display: block;\n  min-width: 208px;\n  background: unset;\n\n  &-nomin {\n    min-width: auto;\n  }\n}\n\n//datetime container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-datetime.sdds-datetime-container-label-inside {\n  .sdds-datetime-input {\n    padding-top: var(--sdds-spacing-element-24);\n    padding-bottom: 15px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 20px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-datetime-input-md {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-datetime-input-sm {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  &.sdds-datetime-focus,\n  &.sdds-datetime-data {\n    .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-datetime-input-md ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-datetime-input ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 12px;\n    }\n  }\n}\n\n//datetime bottom bar when in focus\n.sdds-datetime-bar {\n  position: absolute;\n  width: 100%;\n\n  &::before,\n  &::after {\n    content: '';\n    height: 2px;\n    top: 54px;\n    width: 0;\n    position: absolute;\n    background: var(--sdds-datetime-bar);\n    transition: 0.35s ease all;\n\n    .sdds-form-datetime-md & {\n      top: 46px;\n    }\n\n    .sdds-form-datetime-sm & {\n      top: 40px;\n    }\n  }\n\n  &::before {\n    left: 50%;\n  }\n\n  &::after {\n    right: 50%;\n  }\n\n  .sdds-datetime-focus &::before,\n  .sdds-datetime-focus &::after {\n    width: 50%;\n  }\n}\n\n//Helper text\n.sdds-datetime-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  flex-basis: 100%;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-datetime-helper);\n\n  .sdds-helper {\n    display: inline-flex;\n    gap: 8px;\n  }\n}\n\n//Disabled state\n.sdds-form-datetime-disabled {\n  .sdds-datetime-container {\n    border-bottom-color: transparent;\n  }\n\n  .datetime-icon {\n    sdds-icon {\n      color: var(--sdds-datetime-icon-disabled);\n    }\n  }\n\n  .sdds-datetime-label {\n    color: var(--sdds-datetime-label-disabled);\n    cursor: not-allowed;\n  }\n}\n\n//Success state\n.sdds-form-datetime-success {\n  .sdds-datetime-container {\n    border-bottom-color: var(--sdds-datetime-border-bottom-success);\n    color: var(--sdds-datetime-color-success);\n  }\n\n  .sdds-datetime-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-datetime-bar-sucess);\n    }\n  }\n}\n\n//Error State\n.sdds-form-datetime-error {\n  .sdds-datetime-helper {\n    color: var(--sdds-datetime-helper-error);\n  }\n\n  .sdds-datetime-container {\n    border-bottom-color: var(--sdds-datetime-border-bottom-error);\n  }\n\n  .sdds-datetime-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-datetime-bar-error);\n    }\n  }\n\n  .datetime-icon {\n    sdds-icon {\n      color: var(--sdds-datetime-icon-error);\n    }\n  }\n}\n\n.sdds-datetime-textcounter {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-datetime-textcounter);\n  float: right;\n\n  & .sdds-datetime-textcounter-divider {\n    // font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-datetime-textcounter-divider);\n  }\n}\n\n/* datetime picker icon remove testing */\n\ninput[type='datetime-local']::-webkit-inner-spin-button,\ninput[type='datetime-local']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n\ninput[type='date']::-webkit-inner-spin-button,\ninput[type='date']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n\ninput[type='time']::-webkit-inner-spin-button,\ninput[type='time']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n\n.sdds-mode-variant-primary {\n  --sdds-datetime-background: var(--sdds-datetime-background-primary);\n}\n\n.sdds-mode-variant-secondary {\n  --sdds-datetime-background: var(--sdds-datetime-background-secondary);\n}\n","import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-datetime',\n  styleUrl: 'datetime.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class Datetime {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'datetime-local' | 'date' | 'time' = 'datetime-local';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value = '';\n\n  /** Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM */\n  @Prop() defaultValue: string | 'none' = 'none';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Resets min width rule */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Set the variant of the datetime component. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: string;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Label text for the component */\n  @Prop() label: string = '';\n\n  /** Helper text for the component */\n  @Prop() helper: string = '';\n\n  /** Listen to the focus state of the input */\n  @State() focusInput: boolean;\n\n  /** Change event for the datetime */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  /** Blur event for the datetime */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Focus event for the datetime */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  getDefaultValue = () => {\n    const dateTimeObj = {\n      year: this.defaultValue.slice(0, 4),\n      month: this.defaultValue.slice(5, 7),\n      day: this.defaultValue.slice(8, 10),\n      hours: this.defaultValue.slice(11, 13),\n      minutes: this.defaultValue.slice(14, 16),\n    };\n    switch (this.type) {\n      case 'datetime-local':\n        return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n      case 'date':\n        return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n      case 'time':\n        return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n      default:\n        throw new Error('Invalid type.');\n    }\n  };\n\n  componentWillLoad() {\n    if (this.defaultValue !== 'none') {\n      this.value = this.getDefaultValue();\n    }\n  }\n\n  // Listener if input enters focus state\n  @Listen('focus')\n  handleFocusIn() {\n    this.focusInput = true;\n  }\n\n  // Listener if input leaves focus state\n  @Listen('focusout')\n  handleFocusOut() {\n    this.focusInput = false;\n  }\n\n  // Data input event in value prop\n  handleInput(e): void {\n    this.value = e.target.value;\n    this.sddsChange.emit(e);\n  }\n\n  // Change event isn't a composed:true by default in for input\n  handleChange(e: Event): void {\n    this.sddsChange.emit(e);\n  }\n\n  /** Set the input as focus when clicking the whole datetime with suffix/prefix */\n  handleFocusClick(e): void {\n    this.textInput.focus();\n    this.sddsFocus.emit(e);\n  }\n\n  /** Set the input as focus when clicking the whole datetime with suffix/prefix */\n  handleBlur(e): void {\n    this.textInput.blur();\n    this.sddsBlur.emit(e);\n  }\n\n  render() {\n    let className = ' sdds-datetime-input';\n    if (this.size === 'md') {\n      className += `${className}-md`;\n    }\n    if (this.size === 'sm') {\n      className += `${className}-sm`;\n    }\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}\n        ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n        ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n        ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n        ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n        ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n        ${\n          this.state === 'error' || this.state === 'success'\n            ? `sdds-form-datetime-${this.state}`\n            : ''\n        }\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        `}\n      >\n        {this.label && (\n          <label htmlFor={this.name} class=\"sdds-datetime-label\">\n            {this.label}\n          </label>\n        )}\n        <div\n          onClick={(e) => this.handleFocusClick(e)}\n          class=\"sdds-datetime-container sdds-datetime-container\"\n        >\n          <div class=\"sdds-datetime-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={className}\n              type={this.type}\n              disabled={this.disabled}\n              value={this.value}\n              autofocus={this.autofocus}\n              name={this.name}\n              onInput={(e) => this.handleInput(e)}\n              onBlur={(e) => this.handleBlur(e)}\n              onChange={(e) => this.handleChange(e)}\n            />\n\n            <div class=\"datetime-icon icon-datetime-local\">\n              <sdds-icon size=\"20px\" name=\"calendar\"></sdds-icon>\n            </div>\n\n            <div class=\"datetime-icon icon-time\">\n              <sdds-icon size=\"20px\" name=\"clock\"></sdds-icon>\n            </div>\n          </div>\n          <div class=\"sdds-datetime-bar\"></div>\n        </div>\n\n        <div class=\"sdds-datetime-helper\">\n          {this.helper && (\n            <div class=\"sdds-helper\">\n              {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n              {this.helper}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-divider.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-divider.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,oPAAoP;;MCOnQ,OAAO;;;uBAE+B,YAAY;;EAE7D,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAC,WAAW,sBACE,IAAI,CAAC,WAAW,KAAK,UAAU,GAAG,UAAU,GAAG,SAAS,IAE1E,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,WAAW,EAAE,GAAI,CACxC,EACP;GACH;;;;;;","names":[],"sources":["./src/components/divider/divider-component.scss?tag=sdds-divider&encapsulation=shadow","./src/components/divider/divider.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.divider {\n  @include sdds-box-sizing;\n\n  &.horizontal {\n    background-color: var(--sdds-divider-background);\n    width: 100%;\n    height: 1px;\n  }\n\n  &.vertical {\n    background-color: var(--sdds-divider-background);\n    height: 100%;\n    width: 1px;\n  }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-divider',\n  styleUrl: 'divider-component.scss',\n  shadow: true,\n})\nexport class Divider {\n  /** Orientation of the Divider, horizontal if not specified. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    return (\n      <Host\n        role=\"separator\"\n        aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n      >\n        <div class={`divider ${this.orientation}`} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-dropdown-filter.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-dropdown-filter.entry.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-filter&encapsulation=shadow","./src/components/dropdown/dropdown-filter/dropdown-filter.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import '../../global/scania-fonts-vars.scss';\n\n@import '../checkbox/checkbox.scss';\n@import '../../mixins/box-sizing';\n\n:host,\n::slotted(*) {\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n  @include sdds-box-sizing;\n}\n\n:host,\n::slotted(*) {\n  .sdds-dropdown-label-outside {\n    color: var(--sdds-dropdown-label-outside);\n    text-decoration: none;\n  } \n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  z-index: auto;\n\n  &::part(dropdown-filter-disabled) {\n    cursor: not-allowed;\n    caret-color: transparent;\n    pointer-events: none;\n    color: var(--sdds-dropdown-disabled);\n    border: none;\n\n    &::placeholder {\n      color: var(--sdds-dropdown-disabled);\n    }\n  }\n}\n\n.sdds-dropdown {\n  position: relative;\n  display: flex;\n  flex-flow: column wrap;\n  width: 100%;\n  border: 0;\n\n  &,\n  * {\n    box-sizing: border-box;\n  }\n\n  .sdds-dropdown-toggle {\n    @include dropdown-wrapper;\n\n    display: flex;\n    align-items: center;\n\n    &-lg {\n      padding: 20px 16px;\n    }\n\n    &-md {\n      padding: 16px;\n    }\n\n    &-sm {\n      padding: 12px 16px;\n    }\n\n    &.sdds-dropdown-toggle-label-inside {\n      &-lg {\n        padding: 20px 16px 16px;\n      }\n\n      &-md {\n        padding: 16px 16px 12px;\n      }\n    }\n  }\n\n  .sdds-dropdown-toggle--selected:not(:focus) {\n    border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);\n  }\n\n  .sdds-dropdown-arrow {\n    width: 20px;\n    position: absolute;\n    right: 16px;\n    color: inherit;\n    transform: rotate(0);\n    transition: transform ease 250ms;\n  }\n\n  .sdds-dropdown-placeholder {\n    color: var(--sdds-grey-700);\n  }\n\n  .sdds-dropdown-label {\n    display: grid;\n    width: calc(100% - 25px);\n  }\n\n  .sdds-dropdown-label-container {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.sdds-dropdown.sdds-dropdown-sm {\n    .sdds-dropdown-label-container--label-inside {\n      padding-bottom: 12px;\n    }\n  }\n\n  .sdds-dropdown-filter {\n    border: 0;\n    outline: none;\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-dropdown-link);\n    width: 100%;\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--sdds-grey-700);\n      opacity: 1;\n    }\n  }\n\n  .sdds-dropdown-menu {\n    z-index: z(dropdown);\n\n    @include sdds-scrollbar;\n\n    background-color: var(--sdds-dropdown-background);\n    position: absolute;\n    top: 100%;\n    left: 0;\n    min-width: 100%;\n    max-height: 360px; // max 7 option items, then add scroll\n    border-color: transparent;\n    border-style: solid;\n    border-width: 0 1px 1px;\n    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%);\n    border-left-color: var(--sdds-dropdown-border);\n    border-right-color: var(--sdds-dropdown-border);\n    overflow-x: hidden;\n    overflow-y: auto;\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 250ms ease;\n  }\n\n  // Size lg\n  &.sdds-dropdown-lg {\n    .sdds-dropdown-toggle {\n      height: 56px;\n    }\n  }\n\n  // Size md\n  &.sdds-dropdown-md {\n    .sdds-dropdown-toggle {\n      height: 48px;\n    }\n  }\n\n  // Size sm\n  &.sdds-dropdown-sm {\n    .sdds-dropdown-toggle {\n      height: 40px;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  .sdds-dropdown {\n    .sdds-dropdown-menu {\n      top: auto;\n      bottom: 100%;\n      box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 10%);\n      transform-origin: bottom;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards[label-position='outside']) {\n  span.sdds-dropdown-menu {\n    bottom: calc(100% - 24px);\n  }\n}\n\n:host([disabled='true']) {\n  cursor: not-allowed;\n\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      pointer-events: none;\n      color: var(--sdds-dropdown-option-disabled-color);\n      border: none;\n      padding: 0 16px;\n\n      .sdds-dropdown-placeholder {\n        color: var(--sdds-dropdown-placeholder);\n      }\n\n      .sdds-dropdown-label-inside {\n        color: var(--sdds-dropdown-label-inside);\n      }\n\n      &:focus {\n        &::before {\n          content: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.sdds-dropdown--error) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      border-color: var(--sdds-negative);\n\n      &:focus {\n        &::before {\n          border-color: var(--sdds-negative);\n        }\n      }\n    }\n  }\n\n  .sdds-dropdown-helper {\n    color: var(--sdds-negative);\n\n    .sdds-dropdown-error-icon {\n      display: flex;\n    }\n  }\n}\n\n// dropdown option\n:host {\n  ::slotted(sdds-dropdown-option) {\n    display: flex;\n    padding: var(--sdds-spacing-element-16);\n    background-color: var(--sdds-dropdown-background);\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n    opacity: 0;\n    visibility: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n    color: var(--sdds-dropdown-option-color);\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px;\n  }\n\n  ::slotted(sdds-dropdown-option:hover),\n  ::slotted(sdds-dropdown-option:focus) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:focus) {\n    outline: none;\n  }\n\n  ::slotted(sdds-dropdown-option:focus) {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown--selected),\n  ::slotted(sdds-dropdown-option.selected),\n  ::slotted(sdds-dropdown-option.active),\n  ::slotted(sdds-dropdown-option:active) {\n    background-color: var(--sdds-dropdown-background-hover);\n    border-top: 1px solid var(--sdds-dropdown-border);\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-option--no-result) {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),\n  ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {\n    cursor: not-allowed;\n    color: var(--sdds-dropdown-option-disabled-color);\n    background-color: var(--sdds-dropdown-background-disabled);\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  ::slotted(sdds-dropdown-option:first-child) {\n    border-radius: 4px 4px 0 0;\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-radius: 0;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n}\n\n.sdds-option-label {\n  margin: auto 0;\n  display: flex;\n  align-content: center;\n  text-decoration: none;\n  flex-grow: 2;\n}\n\n.sdds-option-checkmark {\n  color: inherit;\n  opacity: 0;\n  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n  margin-left: var(--sdds-spacing-element-16);\n\n  path {\n    color: var(--sdds-dropdown-option-color);\n  }\n}\n\n:host([size='sm']) {\n  ::slotted(sdds-dropdown-option) {\n    padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);\n  }\n}\n\n:host(.sdds-dropdown--open) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      box-shadow: 0 -1px 3px -1px rgb(0 0 0 / 10%);\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      // TODO: what is this? it doesnt seem to do anything.\n      &.is-filter {\n        &::before {\n          content: ' ';\n          position: absolute;\n          z-index: 2;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 1px solid var(--sdds-blue-400);\n        }\n      }\n    }\n\n    .sdds-dropdown-arrow {\n      transform: rotate(180deg);\n    }\n\n    .sdds-dropdown-menu {\n      transform: scaleY(1);\n    }\n  }\n\n  ::slotted(sdds-dropdown-option) {\n    visibility: visible;\n    opacity: 1;\n  }\n}\n\n:host(.selected) {\n  .sdds-option-checkmark {\n    opacity: 1;\n  }\n}\n\n.sdds-dropdown-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-dropdown-label-inside);\n  position: absolute;\n  transition: transform 250ms ease, color 200ms ease;\n  width: calc(100% - 63px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transform: translate(0, -10px);\n  font-size: 10px;\n}\n\n.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside {\n  .sdds-dropdown-placeholder {\n    display: block;\n    padding-top: 4px;\n  }\n}\n\n.sdds-dropdown-lg {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 16px;\n  }\n}\n\n.sdds-dropdown-md {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 12px;\n  }\n}\n\n.sdds-dropdown.sdds-dropdown-sm {\n  .sdds-dropdown-label-inside {\n    display: none;\n  }\n}\n\n.sdds-dropdown-multiselect-result {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sdds-option-checkbox {\n  margin-right: 8px;\n}\n\n.sdds-form-label {\n  display: flex;\n}\n","import { Component, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown-filter',\n  shadow: true,\n  styleUrl: './../dropdown.scss',\n})\nexport class DropdownFilter {\n  @State() dataOptions = [];\n\n  @State() filteredContent = [];\n\n  @State() searchTerm = '';\n\n  @State() selectedOptionState: any;\n\n  @State() dropdownRef?: HTMLSddsDropdownElement;\n\n  /** Set the variant of the dropdown. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placeholder text for dropdown with no selected item */\n  @Prop() placeholder: string = '';\n\n  /** Label for dropdown with no selected item */\n  @Prop() label: string;\n\n  /** Add the value of the option to set it as default */\n  @Prop() defaultOption: string;\n\n   /** Direction that the dropdown will open. Default is auto. */\n   @Prop() openDirection: 'down' | 'up' | 'auto' = 'auto';\n\n  /** Add the value of the option as string to set it as new selected value */\n  @Prop() selectedOption: string;\n\n  /** Add the value of the option to set it as default */\n  @Prop() disabled: boolean = false;\n\n  /** Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' = 'lg';\n\n  /** Set to true to make the width following the label text length */\n  @Prop() inline: boolean = false;\n\n  /** Position of label */\n  @Prop() labelPosition: 'no-label' | 'outside' = 'no-label';\n\n  /** Support `error` state */\n  @Prop() state: boolean = false;\n\n  /** Add helper text in the bottom of dropdown */\n  @Prop() helper: string = '';\n\n  /** Data is an array of objects that contains label and value\n   * `data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`\n   */\n  @Prop() data: string;\n\n  @State() selectedLabel: string = 'no-selected';\n\n  @State() selectedValue: string = 'no-selected';\n\n  componentWillLoad() {\n    this.parseData(this.data);\n\n    if (this.defaultOption) {\n      this.selectedOptionState = this.defaultOption;\n    }\n  }\n\n  @Watch('data')\n  parseData(newValue: string) {\n    if (newValue) this.dataOptions = JSON.parse(newValue);\n    this.filteredContent = this.dataOptions;\n  }\n\n  @Listen('internalSddsSearch')\n  updateOptionsContent(event: CustomEvent<any>) {\n    this.searchTerm = event.detail;\n    this.findData();\n  }\n\n  @Listen('internalSddsSelect')\n  selectOptionHandler(event: CustomEvent<any>) {\n    this.selectedOptionState = event.detail.value;\n    this.selectedLabel = event.detail.label;\n    this.selectedValue = event.detail.value;\n\n    // Reset list when search is done and user have selected one option\n    // To match with animation time for option list to fadeout first\n    setTimeout(() => {\n      this.filteredContent = this.dataOptions;\n    }, 200);\n  }\n\n  findData() {\n    const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');\n    this.filteredContent = this.dataOptions.filter((option) => {\n      if (option.label) {\n        const listItem = option.label.toLowerCase();\n        const searchResultList = listItem.match(searchAsRegEx);\n        if (searchResultList) {\n          return searchResultList;\n        }\n        this.selectedOptionState = null;\n        this.selectedLabel = 'no-result';\n        this.selectedValue = 'no-result';\n      }\n    });\n  }\n\n  setOptionsContent() {\n    const newList = this.filteredContent.map((obj) => (\n      <sdds-dropdown-option\n        tabindex=\"0\"\n        value={obj.value}\n        class={`${this.selectedOptionState === obj.value ? 'selected' : ''}`}\n      >\n        {obj.label}\n      </sdds-dropdown-option>\n    ));\n    if (newList.length > 0) {\n      return newList;\n    }\n    return (\n      <sdds-dropdown-option tabindex=\"-1\" value=\"no-result\" class=\"sdds-option--no-result\">\n        No result\n      </sdds-dropdown-option>\n    );\n  }\n\n  /** Use this method to reset the dropdown. Then it will go back to its initial state. */\n  @Method() async resetOption() {\n    await this.dropdownRef?.resetOption();\n  }\n\n  render() {\n    return (\n      <Host\n        selected-value={this.selectedValue}\n        selected-text={this.selectedLabel}\n        class={`\n      ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n     `}\n      >\n        <sdds-dropdown\n          ref={(el) => (this.dropdownRef = el)}\n          exportparts=\"dropdown-filter-disabled\"\n          size={this.size}\n          label={this.label}\n          disabled={this.disabled}\n          labelPosition={this.labelPosition}\n          helper={this.helper}\n          state={this.state}\n          placeholder={this.placeholder}\n          defaultOption={this.defaultOption}\n          selectedOption={this.selectedOption}\n          type=\"filter\"\n          tabindex={this.disabled ? '-1' : null}\n          openDirection={this.openDirection}\n        >\n          {this.setOptionsContent()}\n        </sdds-dropdown>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-dropdown_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-dropdown.sdds-dropdown-option.entry.js","mappings":"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","names":["dropdownCss"],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.tsx","./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-option&encapsulation=shadow","./src/components/dropdown/dropdown-option/dropdown-option.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import '../../global/scania-fonts-vars.scss';\n\n@import '../checkbox/checkbox.scss';\n@import '../../mixins/box-sizing';\n\n:host,\n::slotted(*) {\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n  @include sdds-box-sizing;\n}\n\n:host,\n::slotted(*) {\n  .sdds-dropdown-label-outside {\n    color: var(--sdds-dropdown-label-outside);\n    text-decoration: none;\n  } \n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  z-index: auto;\n\n  &::part(dropdown-filter-disabled) {\n    cursor: not-allowed;\n    caret-color: transparent;\n    pointer-events: none;\n    color: var(--sdds-dropdown-disabled);\n    border: none;\n\n    &::placeholder {\n      color: var(--sdds-dropdown-disabled);\n    }\n  }\n}\n\n.sdds-dropdown {\n  position: relative;\n  display: flex;\n  flex-flow: column wrap;\n  width: 100%;\n  border: 0;\n\n  &,\n  * {\n    box-sizing: border-box;\n  }\n\n  .sdds-dropdown-toggle {\n    @include dropdown-wrapper;\n\n    display: flex;\n    align-items: center;\n\n    &-lg {\n      padding: 20px 16px;\n    }\n\n    &-md {\n      padding: 16px;\n    }\n\n    &-sm {\n      padding: 12px 16px;\n    }\n\n    &.sdds-dropdown-toggle-label-inside {\n      &-lg {\n        padding: 20px 16px 16px;\n      }\n\n      &-md {\n        padding: 16px 16px 12px;\n      }\n    }\n  }\n\n  .sdds-dropdown-toggle--selected:not(:focus) {\n    border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);\n  }\n\n  .sdds-dropdown-arrow {\n    width: 20px;\n    position: absolute;\n    right: 16px;\n    color: inherit;\n    transform: rotate(0);\n    transition: transform ease 250ms;\n  }\n\n  .sdds-dropdown-placeholder {\n    color: var(--sdds-grey-700);\n  }\n\n  .sdds-dropdown-label {\n    display: grid;\n    width: calc(100% - 25px);\n  }\n\n  .sdds-dropdown-label-container {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.sdds-dropdown.sdds-dropdown-sm {\n    .sdds-dropdown-label-container--label-inside {\n      padding-bottom: 12px;\n    }\n  }\n\n  .sdds-dropdown-filter {\n    border: 0;\n    outline: none;\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-dropdown-link);\n    width: 100%;\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--sdds-grey-700);\n      opacity: 1;\n    }\n  }\n\n  .sdds-dropdown-menu {\n    z-index: z(dropdown);\n\n    @include sdds-scrollbar;\n\n    background-color: var(--sdds-dropdown-background);\n    position: absolute;\n    top: 100%;\n    left: 0;\n    min-width: 100%;\n    max-height: 360px; // max 7 option items, then add scroll\n    border-color: transparent;\n    border-style: solid;\n    border-width: 0 1px 1px;\n    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%);\n    border-left-color: var(--sdds-dropdown-border);\n    border-right-color: var(--sdds-dropdown-border);\n    overflow-x: hidden;\n    overflow-y: auto;\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 250ms ease;\n  }\n\n  // Size lg\n  &.sdds-dropdown-lg {\n    .sdds-dropdown-toggle {\n      height: 56px;\n    }\n  }\n\n  // Size md\n  &.sdds-dropdown-md {\n    .sdds-dropdown-toggle {\n      height: 48px;\n    }\n  }\n\n  // Size sm\n  &.sdds-dropdown-sm {\n    .sdds-dropdown-toggle {\n      height: 40px;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  .sdds-dropdown {\n    .sdds-dropdown-menu {\n      top: auto;\n      bottom: 100%;\n      box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 10%);\n      transform-origin: bottom;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards[label-position='outside']) {\n  span.sdds-dropdown-menu {\n    bottom: calc(100% - 24px);\n  }\n}\n\n:host([disabled='true']) {\n  cursor: not-allowed;\n\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      pointer-events: none;\n      color: var(--sdds-dropdown-option-disabled-color);\n      border: none;\n      padding: 0 16px;\n\n      .sdds-dropdown-placeholder {\n        color: var(--sdds-dropdown-placeholder);\n      }\n\n      .sdds-dropdown-label-inside {\n        color: var(--sdds-dropdown-label-inside);\n      }\n\n      &:focus {\n        &::before {\n          content: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.sdds-dropdown--error) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      border-color: var(--sdds-negative);\n\n      &:focus {\n        &::before {\n          border-color: var(--sdds-negative);\n        }\n      }\n    }\n  }\n\n  .sdds-dropdown-helper {\n    color: var(--sdds-negative);\n\n    .sdds-dropdown-error-icon {\n      display: flex;\n    }\n  }\n}\n\n// dropdown option\n:host {\n  ::slotted(sdds-dropdown-option) {\n    display: flex;\n    padding: var(--sdds-spacing-element-16);\n    background-color: var(--sdds-dropdown-background);\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n    opacity: 0;\n    visibility: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n    color: var(--sdds-dropdown-option-color);\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px;\n  }\n\n  ::slotted(sdds-dropdown-option:hover),\n  ::slotted(sdds-dropdown-option:focus) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:focus) {\n    outline: none;\n  }\n\n  ::slotted(sdds-dropdown-option:focus) {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown--selected),\n  ::slotted(sdds-dropdown-option.selected),\n  ::slotted(sdds-dropdown-option.active),\n  ::slotted(sdds-dropdown-option:active) {\n    background-color: var(--sdds-dropdown-background-hover);\n    border-top: 1px solid var(--sdds-dropdown-border);\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-option--no-result) {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),\n  ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {\n    cursor: not-allowed;\n    color: var(--sdds-dropdown-option-disabled-color);\n    background-color: var(--sdds-dropdown-background-disabled);\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  ::slotted(sdds-dropdown-option:first-child) {\n    border-radius: 4px 4px 0 0;\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-radius: 0;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n}\n\n.sdds-option-label {\n  margin: auto 0;\n  display: flex;\n  align-content: center;\n  text-decoration: none;\n  flex-grow: 2;\n}\n\n.sdds-option-checkmark {\n  color: inherit;\n  opacity: 0;\n  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n  margin-left: var(--sdds-spacing-element-16);\n\n  path {\n    color: var(--sdds-dropdown-option-color);\n  }\n}\n\n:host([size='sm']) {\n  ::slotted(sdds-dropdown-option) {\n    padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);\n  }\n}\n\n:host(.sdds-dropdown--open) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      box-shadow: 0 -1px 3px -1px rgb(0 0 0 / 10%);\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      // TODO: what is this? it doesnt seem to do anything.\n      &.is-filter {\n        &::before {\n          content: ' ';\n          position: absolute;\n          z-index: 2;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 1px solid var(--sdds-blue-400);\n        }\n      }\n    }\n\n    .sdds-dropdown-arrow {\n      transform: rotate(180deg);\n    }\n\n    .sdds-dropdown-menu {\n      transform: scaleY(1);\n    }\n  }\n\n  ::slotted(sdds-dropdown-option) {\n    visibility: visible;\n    opacity: 1;\n  }\n}\n\n:host(.selected) {\n  .sdds-option-checkmark {\n    opacity: 1;\n  }\n}\n\n.sdds-dropdown-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-dropdown-label-inside);\n  position: absolute;\n  transition: transform 250ms ease, color 200ms ease;\n  width: calc(100% - 63px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transform: translate(0, -10px);\n  font-size: 10px;\n}\n\n.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside {\n  .sdds-dropdown-placeholder {\n    display: block;\n    padding-top: 4px;\n  }\n}\n\n.sdds-dropdown-lg {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 16px;\n  }\n}\n\n.sdds-dropdown-md {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 12px;\n  }\n}\n\n.sdds-dropdown.sdds-dropdown-sm {\n  .sdds-dropdown-label-inside {\n    display: none;\n  }\n}\n\n.sdds-dropdown-multiselect-result {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sdds-option-checkbox {\n  margin-right: 8px;\n}\n\n.sdds-form-label {\n  display: flex;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n  Host,\n  Event,\n  EventEmitter,\n  Watch,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  textInput?: HTMLInputElement;\n\n  /** Set the variant of the dropdown. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placeholder text for dropdown with no selectedLabel item */\n  @Prop() placeholder: string;\n\n  /** Add the value of the option as string to set it as default */\n  @Prop() defaultOption: string;\n\n  /** Add the value of the option as string to set it as new selected value */\n  @Prop() selectedOption: string;\n\n  /** Set to true for disabled states */\n  @Prop() disabled: boolean = false;\n\n  /** `Controls type of dropdown. */\n  @Prop() type: 'default' | 'multiselect' | 'filter' = 'default';\n\n  /** Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' = 'lg';\n\n  /** Set to true to make the width following the label text length */\n  @Prop() inline: boolean = false;\n\n  /** Controls position of label */\n  @Prop() labelPosition: 'no-label' | 'inside' | 'outside' = 'no-label';\n\n  /** Label text for label inside & outside */\n  @Prop() label: string;\n\n  /** Support `error` state */\n  @Prop() state: boolean = false;\n\n  /** Add helper text in the bottom of dropdown */\n  @Prop() helper: string = '';\n\n  /** Direction that the dropdown will open. Default is auto. */\n  @Prop() openDirection: 'down' | 'up' | 'auto' = 'auto';\n\n  @State() optionValues: Array<any> = [];\n\n  @State() optionLabels: Array<any> = [];\n\n  @State() open: boolean = false;\n\n  @State() node: HTMLElement;\n\n  @State() selectedLabel: string = '';\n\n  @State() selectedValue: string = '';\n\n  @State() selectedValuesArray: Array<any> = [];\n\n  @State() selectedLabelsArray: Array<any> = [];\n\n  @State() dropdownUniqueClass: string = '';\n\n  @State() openUpwards: boolean = false;\n\n  @State() dropdownMenuHeight: number = 0;\n\n  @State() dropdownMenuSelector: HTMLElement;\n\n  @State() listItemIndex: any = -1;\n\n  @State() listItemArray: any;\n\n  @State() listItemObject: any;\n\n  @Element() host: HTMLElement;\n\n  componentWillLoad() {\n    // If default option is set, update the default selectedLabel value\n    // this.host.children is a HTMLCollection type, cannot use forEach\n    this.listItemObject = this.host.children;\n    this.listItemArray = Array.from(this.listItemObject);\n    this.listItemArray.map((listItem) => {\n      this.optionValues.push(listItem.value);\n      this.optionLabels.push(listItem.innerText.trim());\n    });\n    this.setOptionFromOutside(this.defaultOption);\n\n    if (this.size === 'small') {\n      this.size = 'sm';\n      console.warn('size=\"small\" is deprecated, use size=\"sm\" instead');\n    }\n    if (this.size === 'medium') {\n      this.size = 'md';\n      console.warn('size=\"medium\" is deprecated, use size=\"md\" instead');\n    }\n    if (this.size === 'large') {\n      this.size = 'lg';\n      console.warn('size=\"large\" is deprecated, use size=\"lg\" instead');\n    }\n  }\n\n  setOptionFromOutside(optionValue) {\n    if (optionValue) {\n      this.deselectAll();\n      // TODO\n      // eslint-disable-next-line no-param-reassign\n      optionValue = optionValue.split(',');\n      for (let i = 0; i < this.host.children.length; i++) {\n        // Todo - specify type\n        const el: any = this.host.children[i];\n        if (optionValue.includes(el.value.trim())) {\n          this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];\n          this.selectedValuesArray = [...this.selectedValuesArray, el.value];\n          this.selectedLabel = el.textContent;\n          this.selectedValue = el.value;\n          el.setAttribute('selectedLabel', 'true');\n          el.setAttribute('selected', 'true');\n        } else {\n          el.setAttribute('selectedLabel', 'false');\n          el.setAttribute('selected', 'false');\n        }\n      }\n    }\n  }\n\n  @Watch('selectedOption')\n  changeSelectedOption() {\n    if (this.selectedValuesArray.includes(this.selectedOption)) {\n      this.resetOption();\n    }\n    this.setOptionFromOutside(this.selectedOption);\n    this.host.setAttribute('selected-option', '');\n  }\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(ev) {\n    // To stop bubble click\n    ev.stopPropagation();\n    const target = ev ? ev.composedPath()[0] : window.event.target[0];\n    if (this.node !== undefined && this.node.contains(target)) {\n      if (typeof this.textInput !== 'undefined' || this.textInput === null) {\n        this.textInput.focus();\n      }\n    } else {\n      this.tabbingLabelReset();\n      this.open = false;\n    }\n  }\n\n  @Listen('keydown')\n  keyListener(ev: KeyboardEvent) {\n    if (!this.disabled) {\n      switch (ev.key) {\n        case 'ArrowDown':\n          if (this.open) {\n            ev.preventDefault();\n            if (this.listItemIndex < this.listItemArray.length - 1) {\n              this.listItemIndex++;\n            } else {\n              this.listItemIndex = 0;\n            }\n            (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n          }\n          break;\n        case 'ArrowUp':\n          if (this.open) {\n            ev.preventDefault();\n            if (this.listItemIndex > 0) {\n              this.listItemIndex--;\n            } else {\n              this.listItemIndex = this.listItemArray.length - 1;\n            }\n            (this.listItemObject[this.listItemIndex] as HTMLElement).focus();\n          }\n          break;\n\n        case 'Tab':\n          this.open = false;\n          break;\n\n        case 'Escape':\n          this.open = false;\n          this.node.focus();\n          break;\n\n        default:\n          break;\n      }\n    }\n  }\n\n  handleClick() {\n    this.open = this.open === false;\n    if (this.openDirection === 'auto') {\n      this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;\n      const distanceToBottom = this.host.getBoundingClientRect().top;\n      const viewportHeight = window.innerHeight;\n      this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;\n      // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards\n      // Additional 57px is added as compensation for dropdown element own input/button height\n      // It is added on handleClick due to possible dynamic injection of data when component is already rendered\n    } else {\n      this.openUpwards = this.openDirection === 'up';\n    }\n  }\n\n  tabbingLabelReset() {\n    if (typeof this.textInput !== 'undefined' || this.textInput === null) {\n      if (!this.selectedLabel && this.selectedLabel.length <= 0) {\n        this.textInput.value = '';\n        this.internalSddsSearch.emit('');\n      }\n      if (this.selectedLabel !== this.textInput.value) {\n        this.textInput.value = this.selectedLabel;\n      }\n    }\n  }\n\n  @Listen('internalSddsSelect')\n  selectOptionHandler(event: CustomEvent<any>) {\n    this.open = this.type === 'multiselect';\n    if (this.type !== 'multiselect') {\n      this.selectedLabel = event.detail.label;\n      this.selectedValue = event.detail.value;\n      this.tabbingLabelReset();\n    } else {\n      if (this.selectedValuesArray.includes(event.detail.value)) {\n        const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);\n        this.selectedValuesArray = this.selectedValuesArray.filter(\n          (_value, index) => index !== itemIndex,\n        );\n        this.selectedLabelsArray = this.selectedLabelsArray.filter(\n          (_value, index) => index !== itemIndex,\n        );\n      } else {\n        this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];\n        this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];\n      }\n    }\n  }\n\n  /** @internal Search event that is emitted to the sdds-dropdown-filter */\n  @Event({\n    eventName: 'internalSddsSearch',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsSearch: EventEmitter<any>;\n\n  handleSearch(ev) {\n    const searchTerm = ev.target.value;\n    this.internalSddsSearch.emit(searchTerm);\n    this.open = true;\n  }\n\n  deselectAll() {\n    this.selectedLabel = '';\n    this.selectedValue = '';\n    this.selectedLabelsArray = [];\n    this.selectedValuesArray = [];\n    this.listItemArray = this.listItemArray.map((optionItem) => ({\n      ...optionItem,\n      selected: false,\n    }));\n  }\n\n  @Method() async resetOption() {\n    this.deselectAll();\n    this.open = false;\n\n    if (this.defaultOption) {\n      this.setOptionFromOutside(this.defaultOption);\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={`\n        ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}\n        ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}\n        ${this.inline ? 'sdds-dropdown-inline' : ''}\n        ${\n          this.selectedLabel.length > 0 || this.selectedLabel === ''\n            ? 'sdds-dropdown--selected'\n            : ''\n        }\n        ${this.state ? 'sdds-dropdown--error' : ''}\n        ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}\n        ${\n          this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0\n            ? 'sdds-dropdown--label-inside-position'\n            : ''\n        }\n       `}\n        selected-value={this.selectedValue}\n        selected-text={this.selectedLabel}\n        multi-selected-values={JSON.stringify(this.selectedValuesArray)}\n        multi-selected-labels={JSON.stringify(this.selectedLabelsArray)}\n      >\n        <span class={`sdds-dropdown sdds-dropdown-${this.size}`}>\n          {this.labelPosition === 'outside' && this.label.length > 0 ? (\n            <span class=\"sdds-dropdown-label-outside\">{this.label}</span>\n          ) : (\n            ''\n          )}\n          <button\n            part={this.disabled ? 'dropdown-filter-disabled' : ''}\n            disabled={this.disabled}\n            tabindex={this.disabled ? '-1' : null}\n            class={`sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${\n              this.selectedValue !== '' || this.selectedLabelsArray.length > 0\n                ? 'sdds-dropdown-toggle--selected'\n                : ''\n            }\n                ${\n                  this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'\n                    ? `sdds-dropdown-toggle-label-inside-${this.size}`\n                    : `sdds-dropdown-toggle-${this.size}`\n                }`}\n            type=\"button\"\n            onClick={() => this.handleClick()}\n            ref={(node) => (this.node = node)}\n          >\n            <span class=\"sdds-dropdown-label\">\n              {this.type === 'filter' ? (\n                <input\n                  part={this.disabled ? 'dropdown-filter-disabled' : ''}\n                  disabled={this.disabled}\n                  tabindex=\"-1\"\n                  ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n                  class=\"sdds-dropdown-filter\"\n                  type=\"text\"\n                  placeholder={this.placeholder}\n                  value={this.selectedLabel}\n                  onInput={(event) => this.handleSearch(event)}\n                  autoComplete=\"off\"\n                />\n              ) : (\n                <span\n                  class={{\n                    'sdds-dropdown-label-container': true,\n                    'sdds-dropdown-label-container--label-inside':\n                      this.labelPosition === 'inside' &&\n                      this.size !== 'sm' &&\n                      (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),\n                  }}\n                >\n                  {this.size !== 'sm' &&\n                    (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&\n                    this.labelPosition === 'inside' &&\n                    this.label.length > 0 && (\n                      <span class=\"sdds-dropdown-label-inside\">{this.label}</span>\n                    )}\n                  <span\n                    class={`sdds-dropdown-label-main ${\n                      (this.selectedLabel.length === 0 ||\n                        (this.labelPosition === 'inside' && this.label.length < 0)) &&\n                      'sdds-dropdown-placeholder'\n                    }`}\n                  >\n                    {this.selectedLabel.length > 0 &&\n                      this.type !== 'multiselect' &&\n                      this.selectedLabel}\n\n                    {this.type === 'multiselect' && (\n                      <span class=\"sdds-dropdown-multiselect-result\">\n                        {this.labelPosition !== 'inside' &&\n                          this.selectedLabelsArray.toString().length < 1 &&\n                          this.placeholder}\n                        {this.selectedLabelsArray.toString().length > 0 &&\n                          this.selectedLabelsArray.toString().split(',').join(', ')}\n                      </span>\n                    )}\n                    {!this.selectedLabel &&\n                      this.labelPosition === 'inside' &&\n                      this.size !== 'sm' &&\n                      this.label}\n\n                    {!this.selectedLabel &&\n                      this.type !== 'multiselect' &&\n                      this.labelPosition !== 'inside' &&\n                      this.placeholder}\n\n                    {!this.selectedLabel &&\n                      this.size === 'sm' &&\n                      this.labelPosition === 'inside' &&\n                      this.placeholder}\n                  </span>\n                </span>\n              )}\n            </span>\n            <svg\n              class=\"sdds-dropdown-arrow\"\n              width=\"12\"\n              height=\"7\"\n              viewBox=\"0 0 12 7\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 1L6 6L11 1\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.25\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </button>\n          <span\n            class=\"sdds-dropdown-menu\"\n            // Need to have reference in order to calc height and distance from bottom\n            ref={(dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu)}\n          >\n            <slot />\n          </span>\n        </span>\n        <p class=\"sdds-dropdown-helper\">\n          <svg\n            class=\"sdds-dropdown-error-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 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z\"\n              fill=\"currentColor\"\n            />\n            <path\n              d=\"M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n          <span>{this.helper}</span>\n        </p>\n      </Host>\n    );\n  }\n}\n","@import '../../mixins/z-index';\n@import './dropdown-core';\n@import '../../global/scania-fonts-vars.scss';\n\n@import '../checkbox/checkbox.scss';\n@import '../../mixins/box-sizing';\n\n:host,\n::slotted(*) {\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n  @include sdds-box-sizing;\n}\n\n:host,\n::slotted(*) {\n  .sdds-dropdown-label-outside {\n    color: var(--sdds-dropdown-label-outside);\n    text-decoration: none;\n  } \n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  z-index: auto;\n\n  &::part(dropdown-filter-disabled) {\n    cursor: not-allowed;\n    caret-color: transparent;\n    pointer-events: none;\n    color: var(--sdds-dropdown-disabled);\n    border: none;\n\n    &::placeholder {\n      color: var(--sdds-dropdown-disabled);\n    }\n  }\n}\n\n.sdds-dropdown {\n  position: relative;\n  display: flex;\n  flex-flow: column wrap;\n  width: 100%;\n  border: 0;\n\n  &,\n  * {\n    box-sizing: border-box;\n  }\n\n  .sdds-dropdown-toggle {\n    @include dropdown-wrapper;\n\n    display: flex;\n    align-items: center;\n\n    &-lg {\n      padding: 20px 16px;\n    }\n\n    &-md {\n      padding: 16px;\n    }\n\n    &-sm {\n      padding: 12px 16px;\n    }\n\n    &.sdds-dropdown-toggle-label-inside {\n      &-lg {\n        padding: 20px 16px 16px;\n      }\n\n      &-md {\n        padding: 16px 16px 12px;\n      }\n    }\n  }\n\n  .sdds-dropdown-toggle--selected:not(:focus) {\n    border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);\n  }\n\n  .sdds-dropdown-arrow {\n    width: 20px;\n    position: absolute;\n    right: 16px;\n    color: inherit;\n    transform: rotate(0);\n    transition: transform ease 250ms;\n  }\n\n  .sdds-dropdown-placeholder {\n    color: var(--sdds-grey-700);\n  }\n\n  .sdds-dropdown-label {\n    display: grid;\n    width: calc(100% - 25px);\n  }\n\n  .sdds-dropdown-label-container {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.sdds-dropdown.sdds-dropdown-sm {\n    .sdds-dropdown-label-container--label-inside {\n      padding-bottom: 12px;\n    }\n  }\n\n  .sdds-dropdown-filter {\n    border: 0;\n    outline: none;\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-dropdown-link);\n    width: 100%;\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--sdds-grey-700);\n      opacity: 1;\n    }\n  }\n\n  .sdds-dropdown-menu {\n    z-index: z(dropdown);\n\n    @include sdds-scrollbar;\n\n    background-color: var(--sdds-dropdown-background);\n    position: absolute;\n    top: 100%;\n    left: 0;\n    min-width: 100%;\n    max-height: 360px; // max 7 option items, then add scroll\n    border-color: transparent;\n    border-style: solid;\n    border-width: 0 1px 1px;\n    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%);\n    border-left-color: var(--sdds-dropdown-border);\n    border-right-color: var(--sdds-dropdown-border);\n    overflow-x: hidden;\n    overflow-y: auto;\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 250ms ease;\n  }\n\n  // Size lg\n  &.sdds-dropdown-lg {\n    .sdds-dropdown-toggle {\n      height: 56px;\n    }\n  }\n\n  // Size md\n  &.sdds-dropdown-md {\n    .sdds-dropdown-toggle {\n      height: 48px;\n    }\n  }\n\n  // Size sm\n  &.sdds-dropdown-sm {\n    .sdds-dropdown-toggle {\n      height: 40px;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  .sdds-dropdown {\n    .sdds-dropdown-menu {\n      top: auto;\n      bottom: 100%;\n      box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 10%);\n      transform-origin: bottom;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards[label-position='outside']) {\n  span.sdds-dropdown-menu {\n    bottom: calc(100% - 24px);\n  }\n}\n\n:host([disabled='true']) {\n  cursor: not-allowed;\n\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      pointer-events: none;\n      color: var(--sdds-dropdown-option-disabled-color);\n      border: none;\n      padding: 0 16px;\n\n      .sdds-dropdown-placeholder {\n        color: var(--sdds-dropdown-placeholder);\n      }\n\n      .sdds-dropdown-label-inside {\n        color: var(--sdds-dropdown-label-inside);\n      }\n\n      &:focus {\n        &::before {\n          content: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.sdds-dropdown--error) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      border-color: var(--sdds-negative);\n\n      &:focus {\n        &::before {\n          border-color: var(--sdds-negative);\n        }\n      }\n    }\n  }\n\n  .sdds-dropdown-helper {\n    color: var(--sdds-negative);\n\n    .sdds-dropdown-error-icon {\n      display: flex;\n    }\n  }\n}\n\n// dropdown option\n:host {\n  ::slotted(sdds-dropdown-option) {\n    display: flex;\n    padding: var(--sdds-spacing-element-16);\n    background-color: var(--sdds-dropdown-background);\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n    opacity: 0;\n    visibility: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n    color: var(--sdds-dropdown-option-color);\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px;\n  }\n\n  ::slotted(sdds-dropdown-option:hover),\n  ::slotted(sdds-dropdown-option:focus) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:focus) {\n    outline: none;\n  }\n\n  ::slotted(sdds-dropdown-option:focus) {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown--selected),\n  ::slotted(sdds-dropdown-option.selected),\n  ::slotted(sdds-dropdown-option.active),\n  ::slotted(sdds-dropdown-option:active) {\n    background-color: var(--sdds-dropdown-background-hover);\n    border-top: 1px solid var(--sdds-dropdown-border);\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-option--no-result) {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),\n  ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {\n    cursor: not-allowed;\n    color: var(--sdds-dropdown-option-disabled-color);\n    background-color: var(--sdds-dropdown-background-disabled);\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  ::slotted(sdds-dropdown-option:first-child) {\n    border-radius: 4px 4px 0 0;\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-radius: 0;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n}\n\n.sdds-option-label {\n  margin: auto 0;\n  display: flex;\n  align-content: center;\n  text-decoration: none;\n  flex-grow: 2;\n}\n\n.sdds-option-checkmark {\n  color: inherit;\n  opacity: 0;\n  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n  margin-left: var(--sdds-spacing-element-16);\n\n  path {\n    color: var(--sdds-dropdown-option-color);\n  }\n}\n\n:host([size='sm']) {\n  ::slotted(sdds-dropdown-option) {\n    padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);\n  }\n}\n\n:host(.sdds-dropdown--open) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      box-shadow: 0 -1px 3px -1px rgb(0 0 0 / 10%);\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      // TODO: what is this? it doesnt seem to do anything.\n      &.is-filter {\n        &::before {\n          content: ' ';\n          position: absolute;\n          z-index: 2;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 1px solid var(--sdds-blue-400);\n        }\n      }\n    }\n\n    .sdds-dropdown-arrow {\n      transform: rotate(180deg);\n    }\n\n    .sdds-dropdown-menu {\n      transform: scaleY(1);\n    }\n  }\n\n  ::slotted(sdds-dropdown-option) {\n    visibility: visible;\n    opacity: 1;\n  }\n}\n\n:host(.selected) {\n  .sdds-option-checkmark {\n    opacity: 1;\n  }\n}\n\n.sdds-dropdown-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-dropdown-label-inside);\n  position: absolute;\n  transition: transform 250ms ease, color 200ms ease;\n  width: calc(100% - 63px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transform: translate(0, -10px);\n  font-size: 10px;\n}\n\n.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside {\n  .sdds-dropdown-placeholder {\n    display: block;\n    padding-top: 4px;\n  }\n}\n\n.sdds-dropdown-lg {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 16px;\n  }\n}\n\n.sdds-dropdown-md {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 12px;\n  }\n}\n\n.sdds-dropdown.sdds-dropdown-sm {\n  .sdds-dropdown-label-inside {\n    display: none;\n  }\n}\n\n.sdds-dropdown-multiselect-result {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sdds-option-checkbox {\n  margin-right: 8px;\n}\n\n.sdds-form-label {\n  display: flex;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Host,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown-option',\n  styleUrl: './../dropdown.scss',\n  shadow: true,\n})\nexport class DropdownOption {\n  @Element() host: HTMLElement;\n\n  // Used as a fallback if value prop is not recognized to match handleClick\n  @State() innerValue: string;\n\n  /** Selected set to true if selected */\n  @Prop() selected: boolean = false;\n\n  /** Sets option to disabled state if true */\n  @Prop() disabled: boolean = false;\n\n  /** Value is a unique string that will be used for application logic */\n  @Prop({ reflect: true }) value: string;\n\n  /** @internal Fires on click on one of the dropdown items */\n  @Event({\n    eventName: 'internalSddsSelect',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsSelect: EventEmitter<{\n    value: string | number;\n    label: string | number;\n    parent: HTMLSddsDropdownElement;\n  }>;\n\n  isMultiSelectOption: boolean;\n\n  @Listen('mouseover')\n  changeFocusHandler() {\n    this.host.focus();\n  }\n\n  @Listen('mouseout')\n  removeFocusHandler() {\n    this.host.blur();\n  }\n\n  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter') {\n      this.handleClick({\n        value: this.value,\n        label: this.host.innerText,\n        parent: this.host.parentNode,\n      });\n    }\n  }\n\n  componentWillLoad() {\n    this.innerValue = this.value;\n    this.isMultiSelectOption = this.host\n      .closest('sdds-dropdown')\n      .classList.contains('sdds-dropdown-multiselect');\n  }\n\n  handleClick(value) {\n    if (!this.disabled) {\n      const listOptions = value.parent.childNodes;\n      this.internalSddsSelect.emit(value);\n      if (!this.isMultiSelectOption) {\n        listOptions.forEach((optionEl) => {\n          optionEl.selected = false;\n        });\n      }\n      const optionCheckbox = this.host.shadowRoot.querySelector('input');\n\n      if (this.selected) {\n        this.selected = false;\n        if (optionCheckbox) {\n          optionCheckbox.checked = false;\n        }\n      } else {\n        this.selected = true;\n        if (optionCheckbox) {\n          optionCheckbox.checked = true;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          if (this.isMultiSelectOption) {\n            event.stopPropagation();\n          }\n          return this.handleClick({\n            value: this.value,\n            label: this.host.innerText,\n            parent: event.target.parentNode,\n          });\n        }}\n        class={{\n          'selected': this.selected,\n          'sdds-dropdown-option-disabled': this.disabled,\n        }}\n        tabindex=\"-1\"\n        aria-disabled={this.disabled}\n      >\n        {this.isMultiSelectOption && (\n          <div class=\"sdds-checkbox-item sdds-option-checkbox\">\n            <label class=\"sdds-form-label\">\n              <input\n                class=\"sdds-form-input\"\n                type=\"checkbox\"\n                checked={this.selected}\n                disabled={this.disabled}\n              />\n            </label>\n          </div>\n        )}\n        <span class=\"sdds-option-label\">\n          <slot />\n        </span>\n        {!this.isMultiSelectOption && (\n          <span class=\"sdds-option-checkmark\">\n            <svg\n              width=\"10\"\n              height=\"7\"\n              viewBox=\"0 0 10 7\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 3L4 6L9 1\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.25\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-folder-tab.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-folder-tab.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,yjDAAyjD;;MCOrkD,aAAa;;;oBAEI,KAAK;oBAEJ,KAAK;;;;EAMlC,MAAM,WAAW,CAAC,KAAa;IAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;GACvB;;EAID,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,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;oBAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;iBAClC,EACP,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,IAEtC,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.scss?tag=sdds-folder-tab&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tab/sdds-folder-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  position: relative;\n\n  ::slotted(*) {\n    all: unset;\n    min-width: 142px;\n    display: block;\n    width: calc(100% - 32px);\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    cursor: pointer;\n    padding: 16px;\n    white-space: nowrap;\n    text-decoration: none;\n    text-align: left;\n    outline: none;\n    border: none;\n    border-left: 1px solid;\n    border-left-color: transparent;\n  }\n\n  div:not(.selected) {\n    background-color: var(--sdds-folder-tab-background);\n\n    ::slotted(*) {\n      border-left-color: var(--sdds-folder-tab-divider-color);\n      border-top: 2px solid var(--sdds-folder-tab-background);\n      color: var(--sdds-folder-tab-item-color);\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tab-background-hover);\n      cursor: pointer;\n\n      ::slotted(*) {\n        border-top-color: var(--sdds-folder-tab-background-hover);\n        color: var(--sdds-folder-tab-color);\n      }\n    }\n  }\n\n  ::slotted(*:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n  .disabled {\n    pointer-events: none;\n\n    ::slotted(*) {\n      color: var(--sdds-folder-tab-item-color-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n    }\n  }\n\n  .selected {\n    background-color: var(--sdds-folder-tab-background-selected);\n    border-top: 2px solid var(--sdds-folder-tab-border-selected);\n\n    &::after {\n      content: ' ';\n      background-color: var(--sdds-folder-tab-background-selected);\n      width: 1px;\n      top: 0;\n      bottom: 0;\n      right: -1px;\n      display: block;\n      position: absolute;\n      z-index: 1;\n    }\n\n    ::slotted(*) {\n      color: var(--sdds-folder-tab-color);\n    }\n  }\n}\n\n:host(.first) {\n  :not(.selected) {\n    ::slotted(*) {\n      border-left-color: transparent;\n    }\n  }\n}\n","import { Component, Host, h, Method, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tab',\n  styleUrl: 'sdds-folder-tab.scss',\n  shadow: true,\n})\nexport class SddsFolderTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  @State() tabWidth: number;\n\n  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setTabWidth(width: number) {\n    this.tabWidth = width;\n  }\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={`${this.disabled ? 'disabled' : ''}\n                  ${this.selected ? 'selected' : ''}\n                `}\n          style={{ width: `${this.tabWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-folder-tabs.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-folder-tabs.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ytCAAytC;;MCiBluC,UAAU;;;;IAmBb,sBAAiB,GAAgB,IAAI,CAAC;IAEtC,mBAAc,GAAW,CAAC,CAAC;IAE3B,iBAAY,GAAW,CAAC,CAAC;IAEzB,gBAAW,GAAW,CAAC,CAAC;IAyEhC,sBAAiB,GAAG;MAClB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO;QAChD,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK;UACpB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;UAC/C,IAAI,YAAY,GAAG,CAAC,CAAC;UAErB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;UAClD,UAAU,CAAC,OAAO,CAAC,CAAC,SAAsB;YACxC,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;YACjD,YAAY;cACV,SAAS,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;WACxF,CAAC,CAAC;UAEH,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;UACrC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;UACjC,IAAI,CAAC,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;UAEjD,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;YAC3C,IAAI,CAAC,qBAAqB,EAAE,CAAC;WAC9B;eAAM;YACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;WAC9B;SACF,CAAC,CAAC;OACJ,CAAC,CAAC;MAEH,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAChD,CAAC;IAEF,2BAAsB,GAAG;MACrB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAoC,CAAC;MAClF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;QAC5C,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;UAC7B,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAC3C,gBAAgB,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;WAC9C,CAAC,CAAC;UAEH,IAAG,CAAC,eAAe,CAAC,gBAAgB,EAAE;YACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;cAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;cAC/D,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;cACvB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;aAC5B;WACF;SACF,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;OACb,CAAC,CAAC;KAEN,CAAC;uBA9I6C,IAAI;gCAGZ,CAAC;;uBAMT,CAAC;0BAEG,KAAK;2BAEJ,KAAK;;;EAyBzC,MAAM,SAAS,CAAC,QAAgB;IAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE;MACrC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC;MAC/D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK;QAC/C,IAAI,KAAK,KAAK,QAAQ,EAAE;UACtB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;UAC1B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;SAC/B;QACD,OAAO,OAAO,CAAC;OAChB,CAAC,CAAC;KACJ;IACD,OAAO;MACL,gBAAgB,EAAE,IAAI,CAAC,aAAa;KACrC,CAAC;GACH;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAA6B;MAC9D,IAAI,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,EAAE;QACtC,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,WAAW,CAAC;OACpC;MACD,OAAO,GAAG,CAAC;KACZ,CAAC,CAAC;IACH,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG;MACxB,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACnC,CAAC,CAAC;GACJ;EAED,WAAW;IACT,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IACjD,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;IAC9D,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,UAAU;IACR,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IACjD,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;IAC9D,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,qBAAqB;IACnB,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IAEjD,IAAI,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;MAC9B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;IAED,IAAI,MAAM,IAAI,CAAC,EAAE;MACf,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;GACF;EAoDD,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAoC,CAAC;IAClF,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACxC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;GAC/D;EAED,gBAAgB;IACd,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;MACpC,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAC9B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;MAC3D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC;MAC/C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,gBAAgB,EAAE,IAAI,CAAC,aAAa;OACrC,CAAC,CAAC;KACJ;SAAM;MACL,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;MACpD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,gBAAgB,EAAE,IAAI,CAAC,aAAa;OACrC,CAAC,CAAC;KACJ;IACD,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAED,kBAAkB;IAChB,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;MAC3C,IAAI,CAAC,qBAAqB,EAAE,CAAC;KAC9B;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;MAC5B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,IAE3E,WACE,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,CAAC,EAAE;QACN,IAAI,CAAC,iBAAiB,GAAG,EAAoB,CAAC;OAC/C,IAED,cACE,KAAK,EAAE,sBAAsB,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,EAAE,EAAE,EAChE,QAAQ,EAAE,CAAC,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAEhC,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAChD,EACT,eAAa,EACb,cACE,KAAK,EAAE,uBAAuB,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,EAAE,EAAE,EAClE,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAEjC,iBAAW,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,MAAM,GAAa,CACjD,CACL,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/tabs/folder-tabs/folder-tabs.scss?tag=sdds-folder-tabs&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-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  overflow: hidden;\n  outline: 0;\n\n  .wrapper {\n    display: flex;\n    overflow-x: scroll;\n    scrollbar-width: none;\n    position: relative;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .scroll-right-button {\n    z-index: calc(z(tab) + 1);\n    right: 0;\n  }\n\n  .scroll-left-button {\n    z-index: calc(z(tab) + 1);\n    left: 0;\n  }\n\n  .scroll-right-button,\n  .scroll-left-button {\n    height: 50px;\n    color: var(--sdds-folder-tabs-scroll-btn-color);\n    cursor: pointer;\n    border: 0;\n    width: 0;\n    background-color: var(--sdds-folder-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  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tabs',\n  styleUrl: 'folder-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  @Element() host: HTMLElement;\n\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\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  @State() buttonWidth: number = 0;\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<HTMLSddsFolderTabElement>;\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  /** 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  calculateButtonWidth() {\n    this.children = this.children.map((tab: HTMLSddsFolderTabElement) => {\n      if (tab.offsetWidth > this.buttonWidth) {\n        this.buttonWidth = tab.offsetWidth;\n      }\n      return tab;\n    });\n    this.children.forEach((tab) => {\n      tab.setTabWidth(this.buttonWidth);\n    });\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\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\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\n    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  addEventListenerToTabs = () => {\n      this.children = Array.from(this.host.children) as Array<HTMLSddsFolderTabElement>;\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\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            }\n          }\n        });\n        return item;\n      });\n    \n  };\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<HTMLSddsFolderTabElement>;\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    this.calculateButtonWidth();\n  }\n\n  componentDidUpdate() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidRender() {\n    if (this.buttonsWidth > this.componentWidth) {\n      this.evaluateScrollButtons();\n    } else {\n      this.showLeftScroll = false;\n      this.showRightScroll = false;\n    }\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 HTMLDivElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            disabled={!this.showLeftScroll}\n            onClick={() => this.scrollLeft()}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot></slot>\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            disabled={!this.showRightScroll}\n            onClick={() => this.scrollRight()}\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/esm/sdds-footer-group.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-footer-group.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,gmDAAgmD;;MCQ9mD,eAAe;;;;IAUlB,gBAAW,GAAqB,IAAI,CAAC;;IAGrC,iBAAY,GAAY,KAAK,CAAC;;gBANb,KAAK;;EAQ9B,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;IAC3D,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;KACrF;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,KAClC,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,EAEA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,KAClC,cACE,OAAO,EAAE;QACP,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;OACxB,EACD,KAAK,EAAE,4BAA4B,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,QAAQ,EAAE,IAErE,IAAI,CAAC,SAAS,EACf,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAChD,CACV,EACD,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,EAAE;cAC9C,IAAI,CAAC,YAAY,GAAG,gBAAgB,GAAG,EAAE;cACzC,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,QAAQ,EAAE,IAEvC,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.scss?tag=sdds-footer-group&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer-group/sdds-footer-group.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n:host {\n  display: block;\n\n  .footer-top-title {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    opacity: var(--sdds-footer-top-title-opacity);\n    color: var(--sdds-footer-top-links);\n    padding-bottom: 8px;\n  }\n\n  button.footer-top-title-button {\n    display: none;\n    border: none;\n    width: 100%;\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-footer-top-links);\n    background-color: transparent;\n    text-align: left;\n    padding: 19px 24px;\n    justify-content: space-between;\n    border-bottom: 1px solid var(--sdds-footer-top-divider);\n\n    &.expanded {\n      border-bottom: none;\n\n      sdds-icon {\n        transform: rotateZ(180deg);\n      }\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:active {\n      background-color: var(--sdds-footer-top-button-active);\n    }\n\n    &:focus-visible {\n      @include sdds-focus-state;\n    }\n\n    sdds-icon {\n      transition: transform 0.2s ease-in-out;\n    }\n  }\n\n  [role='list'] {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    gap: 8px;\n\n    &.left,\n    &.right {\n      gap: 24px;\n    }\n\n    &.top-part-child {\n      flex-direction: column;\n    }\n  }\n\n  @media all and (max-width: 992px) {\n    [role='list'].left:not(.top-part-child) {\n      flex-direction: column;\n\n      &.left,\n      &.right {\n        gap: 8px;\n      }\n    }\n\n    [role='list'].top-part-child.closed {\n      display: none;\n    }\n\n    [role='list'].top-part-child {\n      gap: 0;\n    }\n\n    .footer-top-title {\n      display: none;\n    }\n\n    button.footer-top-title-button {\n      display: flex;\n      align-items: center;\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer-group',\n  styleUrl: 'sdds-footer-group.scss',\n  shadow: true,\n})\nexport class SddsFooterGroup {\n  @Element() host: HostElement;\n\n  /** Title text for the link group, only valid on top part of footer. */\n  @Prop() titleText: string;\n\n  /** In mobile, this indicates when the group (if it's in the top part) is opened/closed. */\n  @State() open: boolean = false;\n\n  /** If the group is placed in the main part of the footer it can have either left or right as a slot position otherwise undefined. */\n  private slotPostion: 'left' | 'right' = null;\n\n  /** Indicates the if group is part of the top part of the footer. */\n  private topPartGroup: boolean = false;\n\n  connectedCallback() {\n    this.topPartGroup = this.host.parentElement.slot === 'top';\n    if (!this.topPartGroup) {\n      this.slotPostion = this.host.parentElement.slot === 'main-right' ? 'right' : 'left';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.titleText && this.topPartGroup && (\n          <div class=\"footer-top-title\">{this.titleText}</div>\n        )}\n\n        {this.titleText && this.topPartGroup && (\n          <button\n            onClick={() => {\n              this.open = !this.open;\n            }}\n            class={`footer-top-title-button  ${this.open ? 'expanded' : 'closed'}`}\n          >\n            {this.titleText}\n            <sdds-icon name=\"chevron_down\" size=\"20px\"></sdds-icon>\n          </button>\n        )}\n        <div\n          role=\"list\"\n          class={`${this.slotPostion ? this.slotPostion : ''}\n            ${this.topPartGroup ? 'top-part-child' : ''}\n            ${this.open ? 'expanded' : 'closed'}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-footer-item.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-footer-item.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,6qCAA6qC;;MCQ1rC,cAAc;EAL3B;;IAQU,oBAAe,GAAY,KAAK,CAAC;GAa1C;EAXC,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;GAC5F;EAED,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,GAAG,gBAAgB,GAAG,EAAE,EAAE,IAC3E,eAAa,CACT,EACN;GACH;;;;;;;","names":[],"sources":["./src/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.scss?tag=sdds-footer-item&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n[role='listitem'] {\n  ::slotted(*) {\n    font: var(--sdds-headline-06);\n    letter-spacing: var(--sdds-headline-06-ls);\n    color: var(--sdds-footer-main-links);\n    opacity: var(--sdds-footer-main-links-opacity);\n    text-decoration: none;\n\n  }\n\n  ::slotted(*:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n\n  ::slotted(*:hover) {\n    text-decoration: underline;\n    }\n\n  &.top-part-child {\n    ::slotted(*) {\n      color: var(--sdds-footer-top-links);\n      font-family: 'Scania Sans Semi Condensed', 'Scania Sans Condensed', arial, helvetica,\n        sans-serif;\n      font-weight: bold;\n      font-size: 14px;\n      line-height: 18px;\n    }\n\n    ::slotted(*:focus-visible) {\n      @include sdds-focus-state;\n    }\n  }\n}\n\n@media all and (max-width: 992px) {\n  [role='listitem'].top-part-child {\n    border-bottom: 1px solid var(--sdds-footer-top-divider);\n\n    ::slotted(*) {\n      display: block;\n      height: 100%;\n      padding: 19px 40px;\n      font-weight: normal;\n    }\n\n\n    ::slotted(*:hover){\n        text-decoration: underline;\n        background-color: var(--sdds-footer-top-links-background-hover);\n    }\n\n    ::slotted(*:focus-visible){\n      @include sdds-focus-state;\n    }\n  }\n}\n","import { Component, Element, h } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer-item',\n  styleUrl: 'sdds-footer-item.scss',\n  shadow: true,\n})\nexport class SddsFooterItem {\n  @Element() host: HostElement;\n\n  private parentIsTopPart: boolean = false;\n\n  connectedCallback() {\n    this.parentIsTopPart = this.host.closest('sdds-footer-group').parentElement.slot === 'top';\n  }\n\n  render() {\n    return (\n      <div role=\"listitem\" class={`${this.parentIsTopPart ? 'top-part-child' : ''}`}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-footer.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-footer.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ghDAAghD;;MCQzhD,UAAU;;;uBAI0B,IAAI;;;EAKnD,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;GAC5F;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,IAC/E,kBACG,IAAI,CAAC,UAAU,KACd,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACP,EACD,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,EACN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,aAAO,KAAK,EAAC,WAAW,yBAAmB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,YAAgB,EACnF,WAAK,KAAK,EAAC,OAAO,IAChB,sBAAa,CACT,CACF,CACF,CACC,CACJ,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/footer/webcomponent/sdds-footer.scss?tag=sdds-footer&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  $grid-lg: 992px;\n\n  .footer-top {\n    background-color: var(--sdds-footer-top-background);\n    padding: 40px;\n\n    ::slotted(*) {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr 1fr;\n      row-gap: 40px;\n      width: 100%;\n    }\n  }\n\n  .footer-main {\n    background-color: var(--sdds-footer-main-background);\n    padding: 0 40px;\n  }\n\n  .footer-main-top {\n    padding: 40px 0;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .footer-bottom-right,\n  .footer-bottom-left {\n    ::slotted(*) {\n      display: flex;\n      column-gap: 24px;\n    }\n  }\n\n  .footer-main-bottom {\n    padding: 40px 0;\n    display: flex;\n    justify-content: space-between;\n    border-top: 1px solid var(--sdds-footer-main-divider);\n\n    small.copyright {\n      margin: 0;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      color: var(--sdds-footer-main-copyright);\n    }\n\n    .brand {\n      background-image: var(--sdds-background-image-scania-wordmark-white-svg);\n      background-repeat: no-repeat;\n      background-size: 117px;\n      background-position: right;\n      width: 117px;\n      height: 20px;\n\n      p {\n        color: transparent;\n        padding: 0;\n        margin: 0;\n        height: 100%;\n        visibility: hidden;\n      }\n    }\n  }\n\n  @media all and (max-width: $grid-lg) {\n    .footer-top {\n      padding: 0;\n\n      ::slotted(*) {\n        display: block;\n        width: 100%;\n      }\n    }\n\n    .footer-main {\n      padding: 0 24px;\n    }\n\n    .footer-main-top {\n      flex-direction: column;\n      row-gap: 48px;\n      padding: 24px 0;\n    }\n\n    .footer-bottom-left {\n      ::slotted(*) {\n        flex-direction: column;\n        gap: 8px;\n      }\n    }\n\n    .footer-main-bottom {\n      flex-direction: column;\n      padding-bottom: 32px;\n\n      p.copyright {\n        padding-bottom: 96px;\n      }\n\n      .brand {\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, h, State, Element } from '@stencil/core';\nimport { Host, HostElement, Prop } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer',\n  styleUrl: 'sdds-footer.scss',\n  shadow: true,\n})\nexport class SddsFooter {\n  @Element() host: HostElement;\n\n  /** Mode variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Indictes whether or not the footer has a top part. */\n  @State() hasTopPart: boolean;\n\n  connectedCallback() {\n    this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <footer>\n          {this.hasTopPart && (\n            <div class=\"footer-top\">\n              <slot name=\"top\"></slot>\n            </div>\n          )}\n          <div class=\"footer-main\">\n            <div class=\"footer-main-top\">\n              <div class=\"footer-bottom-left\">\n                <slot name=\"main-left\"></slot>\n              </div>\n              <div class=\"footer-bottom-right\">\n                <slot name=\"main-right\"></slot>\n              </div>\n            </div>\n            <div class=\"footer-main-bottom\">\n              <small class=\"copyright\">Copyright &#169; {new Date().getFullYear()} Scania</small>\n              <div class=\"brand\">\n                <p>Scania</p>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-brand-symbol.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-brand-symbol.entry.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,gUAAgU;;MCQhV,iBAAiB;;;oBAID,wBAAwB;;EAEnD,MAAM;IACJ,MAAM,kBAAkB,qBACnB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACF,QACE,EAAC,IAAI,QACH,4BACE,yBAAO,kBAAkB,IAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAM,CACnC,CACd,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-brand-symbol/header-brand-symbol.scss?tag=sdds-header-brand-symbol&encapsulation=shadow","./src/components/header/webcomponent/header-brand-symbol/header-brand-symbol.tsx"],"sourcesContent":[":host {\n  // \"On smaller breakpoints, starting from the width 520px, the Scania symbol is removed.\"\n  // (tegel.scania.com, 2023-03-01)\n  sdds-header-item {\n    display: none;\n  }\n\n  sdds-header-item a {\n    background-image: var(--sdds-background-image-scania-symbol-svg),\n      var(--sdds-background-image-scania-symbol-png);\n    background-size: 30px auto;\n    background-position: center;\n    background-repeat: no-repeat;\n  }\n\n  @media (min-width: 521px) {\n    sdds-header-item {\n      display: block;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-brand-symbol',\n  styleUrl: 'header-brand-symbol.scss',\n  shadow: true,\n})\nexport class HeaderBrandSymbol {\n  @Element() host: HTMLElement;\n\n  /** The href for the logo link. */\n  @Prop() linkHref: string = 'https://www.scania.com';\n\n  render() {\n    const inheritedLinkProps = {\n      ...inheritAriaAttributes(this.host),\n    };\n    return (\n      <Host>\n        <sdds-header-item>\n          <a {...inheritedLinkProps} href={this.linkHref}></a>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-cell.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-cell.entry.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-header-cell/table-header-cell.scss?tag=sdds-header-cell&encapsulation=shadow","./src/components/data-table/table-header-cell/table-header-cell.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__header-cell) {\n  @include sdds-box-sizing;\n\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-header-background-hover);\n  padding: 0;\n  height: 48px;\n  min-width: 192px;\n  box-sizing: border-box;\n  vertical-align: middle;\n  overflow: hidden;\n  transition: background-color 200ms ease;\n\n  .sdds-table__header-text {\n    padding: 0 16px;\n    margin: 0;\n  }\n}\n\n:host(.sdds-table__header-cell--sortable) {\n  .sdds-table__header-button {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    justify-content: start;\n    flex-direction: row;\n    width: 100%;\n    height: 100%;\n    padding: 0 16px;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: background-color 200ms ease;\n\n    &:focus {\n      outline: 2px solid var(--sdds-data-table-header-btn-focus);\n      outline-offset: -2px;\n\n      .sdds-table__header-button-icon {\n        opacity: 1;\n      }\n    }\n\n    .sdds-table__header-button-text {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      text-align: left;\n      color: var(--sdds-data-table-header-btn-color);\n    }\n\n    .sdds-table__header-button-icon {\n      /* not to shrink on lot of text */\n      flex: 0 0 16px;\n      height: 16px;\n      opacity: 0;\n      transform-origin: center;\n      transition: opacity 200ms ease-in, transform 200ms ease;\n      fill: var(--sdds-data-table-color);\n    }\n\n    &:hover {\n      .sdds-table__header-button-icon {\n        opacity: 1;\n      }\n    }\n  }\n}\n\n:host(.sdds-table__header-cell--right-align) {\n  .sdds-table__header-button {\n    text-align: right;\n    justify-content: end;\n    flex-direction: row-reverse;\n  }\n}\n\n:host(.sdds-table__header-cell--is-sorted) {\n  .sdds-table__header-button {\n    background-color: var(--sdds-data-table-header-btn-background);\n\n    &:hover {\n      background-color: var(--sdds-data-table-header-btn-background-hover);\n    }\n\n    .sdds-table__header-button-icon {\n      opacity: 1;\n    }\n\n    .sdds-table__header-button-icon--rotate {\n      transform: rotate(180deg);\n    }\n  }\n}\n\n:host(.sdds-table--compact) {\n  height: 33px;\n}\n\n:host(.sdds-table--divider) {\n  border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n  border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n  min-width: unset;\n}\n\n// border-radius style control\n// it depends id multiselect si on or off, same for if toolbar is there or not\n:host(.sdds-table__header-cell:first-of-type) {\n  border-top-left-radius: 4px;\n}\n\n:host(.sdds-table__header-cell:last-of-type) {\n  border-top-right-radius: 4px;\n}\n\n:host(.sdds-table--extra-column:first-of-type) {\n  border-top-left-radius: 0;\n}\n\n:host(.sdds-table--toolbar-available) {\n  border-radius: 0;\n}\n\n:host(.sdds-table--extra-column.sdds-table--toolbar-available) {\n  border-radius: 0;\n}\n\n:host(.sdds-table__header-cell.sdds-table--toolbar-available:first-of-type) {\n  border-top-left-radius: 0;\n}\n\n:host(.sdds-table__header-cell.sdds-table--toolbar-available:last-of-type) {\n  border-top-right-radius: 0;\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Event,\n  EventEmitter,\n  State,\n  Listen,\n  Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\n@Component({\n  tag: 'sdds-header-cell',\n  styleUrl: 'table-header-cell.scss',\n  shadow: true,\n})\nexport class TableHeaderCell {\n  /** Value of column key, usually comes from JSON, needed for sorting */\n  @Prop({ reflect: true }) columnKey: string;\n\n  /** Text that displays in column cell */\n  @Prop({ reflect: true }) columnTitle: string;\n\n  /** In case noMinWidth setting, user has to specify width value for each column, for example \"150px\" */\n  @Prop({ reflect: true }) customWidth: string;\n\n  /** If passed as prop, enables sorting on that column */\n  @Prop() sortable: boolean = false;\n\n  /** Setting for text align, default is left, but user can pass \"right\" as string - useful for numeric values */\n  @Prop({ reflect: true }) textAlign: string;\n\n  @State() textAlignState: string;\n\n  @State() sortingDirection: string = '';\n\n  @State() sortedByMyKey: boolean = false;\n\n  @State() disableSortingBtn: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() enableMultiselect: boolean = false;\n\n  @State() enableToolbarDesign: boolean = false;\n\n  @State() tableId: string = '';\n\n  @State() enableExpandableRows: boolean = false;\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Sends unique table identifier,column key and sorting direction to the sdds-table-body component, can also be listened to in order to implement custom sorting logic. */\n  @Event({\n    eventName: 'sddsSortChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsSortChange: EventEmitter<any>;\n\n  /** @internal Sends unique table identifier, column key and text align value so the body cells with same key take the same text alignment as header cell */\n  @Event({\n    eventName: 'internalSddsTextAlign',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsTextAlign: EventEmitter<any>;\n\n  /** @internal Sends unique table identifier, column key so the body cells with the same key change background when user hovers over header cell */\n  @Event({\n    eventName: 'internalSddsHover',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsHover: EventEmitter<any>;\n\n  @Listen('internalSddsPropChange', { 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 to parent data-table if sorting is allowed\n  @Listen('internalSddsSortingChange', { target: 'body' })\n  internalSddsSortingChangeListener(event: CustomEvent<any>) {\n    const [receivedID, receivedSortingStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.disableSortingBtn = receivedSortingStatus;\n    }\n  }\n\n  // target is set to body so other instances of same component \"listen\" and react to the change\n  @Listen('sddsSortChange', { target: 'body' })\n  updateOptionsContent(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      // grab only value at position 1 as it is the \"key\"\n      if (this.columnKey !== event.detail[1]) {\n        this.sortedByMyKey = false;\n        // To sync with CSS transition timing\n        setTimeout(() => {\n          this.sortingDirection = '';\n        }, 200);\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  componentWillRender() {\n    // enable only right or left text align\n    if (this.textAlign === 'right' || this.textAlign === 'end') {\n      this.textAlignState = 'right';\n    } else {\n      this.textAlignState = 'left';\n    }\n    // To enable body cells text align per rules set in head cell\n    this.internalSddsTextAlign.emit([this.tableId, this.columnKey, this.textAlignState]);\n\n    this.enableToolbarDesign =\n      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n  }\n\n  sortButtonClick = (key) => {\n    // Toggling direction of sorting as we only use one button for sorting\n    if (this.sortingDirection !== 'asc') {\n      this.sortingDirection = 'asc';\n    } else {\n      this.sortingDirection = 'desc';\n    }\n    // Setting to true we can set enable CSS class for \"active\" state of column\n    this.sortedByMyKey = true;\n    // Use array to send both key and sorting direction\n    this.sddsSortChange.emit([this.tableId, key, this.sortingDirection]);\n  };\n\n  headerCellContent = () => {\n    if (this.sortable && !this.disableSortingBtn) {\n      return (\n        <button\n          class=\"sdds-table__header-button\"\n          onClick={() => this.sortButtonClick(this.columnKey)}\n        >\n          <span class=\"sdds-table__header-button-text\" style={{ textAlign: this.textAlignState }}>\n            {this.columnTitle}\n          </span>\n\n          {this.sortingDirection === '' && (\n            <svg\n              class=\"sdds-table__header-button-icon\"\n              fill=\"currentColor\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 12 15\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z\"\n              />\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z\"\n              />\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z\"\n              />\n            </svg>\n          )}\n          {/* First icon is arrow down as first set direction is ascending, clicking it again rotates the icon as we set descending order */}\n          {this.sortingDirection !== '' && (\n            <svg\n              class={`sdds-table__header-button-icon ${\n                this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''\n              }`}\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=\"M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z\"\n              />\n            </svg>\n          )}\n        </button>\n      );\n    }\n    return (\n      <p class=\"sdds-table__header-text\" style={{ textAlign: this.textAlignState }}>\n        {this.columnTitle}\n      </p>\n    );\n  };\n\n  onHeadCellHover = (key) => {\n    this.internalSddsHover.emit([this.tableId, key]);\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__header-cell': true,\n          'sdds-table__header-cell--sortable': this.sortable,\n          'sdds-table__header-cell--is-sorted': this.sortedByMyKey,\n          'sdds-table__header-cell--custom-width': this.customWidth !== '',\n          'sdds-table__header-cell--right-align': this.textAlignState === 'right',\n          'sdds-table--compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--no-min-width': this.noMinWidth,\n          'sdds-table--extra-column': this.enableMultiselect || this.enableExpandableRows,\n          'sdds-table--toolbar-available': this.enableToolbarDesign,\n        }}\n        style={{ width: this.customWidth }}\n        // Calling actions from here to enable hover functionality for both sortable and un-sortable tables\n        onMouseOver={() => this.onHeadCellHover(this.columnKey)}\n        onMouseLeave={() => this.onHeadCellHover('')}\n      >\n        {this.headerCellContent()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-dropdown-list-item.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-dropdown-list-item.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,ozCAAozC;;MCOz0C,sBAAsB;;;oBAIL,KAAK;gBAGY,IAAI;;EAEjD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;OACpC,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.scss?tag=sdds-header-dropdown-list-item&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  height: var(--sdds-header-list-item-md-height);\n  width: 100%;\n\n  .component {\n    height: 100%;\n\n    ::slotted(a),\n    ::slotted(button) {\n      all: unset;\n      box-sizing: border-box;\n      border: none;\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    }\n\n    ::slotted(a: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    &-selected {\n      background-color: var(--sdds-nav-item-background-selected);\n      padding-right: 4px;\n      border-left-width: 4px;\n      border-left-style: solid;\n      border-left-color: var(--sdds-nav-item-border-color-active);\n\n      ::slotted(a),\n      ::slotted(button) {\n        background-color: var(--sdds-nav-item-background-selected);\n      }\n    }\n  }\n}\n\n:host(:not(:last-child)) {\n  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n}\n\n:host([type='lg']) {\n  height: var(--sdds-header-height);\n\n  ::slotted(a),\n  ::slotted(button) {\n    padding: 0 16px;\n    color: var(--sdds-header-app-launcher-item-color);\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown-list-item',\n  styleUrl: 'header-dropdown-list-item.scss',\n  shadow: true,\n})\nexport class HeaderDropdownListItem {\n  @Element() host: HTMLElement;\n\n  /** If the link should appear selected. */\n  @Prop() selected: boolean = false;\n\n  /** The type of the list. */\n  @Prop({ reflect: true }) type: 'md' | 'lg' = 'md';\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'component': true,\n            'component-selected': this.selected,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-dropdown-list-user.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-dropdown-list-user.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,gnBAAgnB;;MCOroB,wBAAwB;;;;;;;;EAenC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,MAAM,IAAI,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAI,EAC3D,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,OAAO,EACb,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,WAAW,IACnB,IAAI,CAAC,UAAU,EAChB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.scss?tag=sdds-header-dropdown-list-user&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.tsx"],"sourcesContent":[":host {\n  background-color: var(--sdds-header-avatar-item-background);\n  display: flex;\n  height: 84px;\n\n  .user-box {\n    gap: 16px;\n    width: 100%;\n    padding: 0 16px;\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n  }\n\n  img,\n  slot[name='image']::slotted(*) {\n    width: 34px;\n    border-radius: 100%;\n  }\n\n  .user-content {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n\n    .header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n    }\n\n    .subheader {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-header-avatar-item-color);\n    }\n  }\n}\n","import { Component, h, Prop, Element, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown-list-user',\n  styleUrl: 'header-dropdown-list-user.scss',\n  shadow: true,\n})\nexport class HeaderDropdownListLgUser {\n  /** Image URL. */\n  @Prop() imgUrl: string;\n\n  /** Image alt text. */\n  @Prop() imgAlt: string;\n\n  /** Heading, usually the users first name and last name. */\n  @Prop() heading: string;\n\n  /** Subheading. */\n  @Prop() subheading: string;\n\n  @Element() host: HTMLElement;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div class=\"user-box\">\n          {this.imgUrl && <img src={this.imgUrl} alt={this.imgAlt} />}\n          <slot name=\"image\"></slot>\n          <div class=\"user-content\">\n            <div class=\"header\">\n              {this.heading}\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"subheader\">\n              {this.subheading}\n              <slot name=\"subheading\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-dropdown-list.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-dropdown-list.entry.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,mOAAmO;;MCWpP,kBAAkB;;;;IAIrB,kBAAa,GAAwC,IAAI,GAAG,EAAE,CAAC;gBAE1B,IAAI;;;EAIjD,iBAAiB;IACf,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;;IAG/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAQ,CAAC;MAEjC,IAAI,MAAM,IAAI,KAAK,EAAE;QACnB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;OACxB;KACF;IAED,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IACzB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,2BAA2B,EAAE;MACjF,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;KACpC;IAED,MAAM,SAAS,GAAG,wCAAwC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAEvF,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;KACjC;SAAM;MACL,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;KACpD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,IAAqB;;MAE1E,MAAM,YAAY,GAAkB,CAAC,CAAQ;QAC3C,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;OAC3D,CAAC;MAEF,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;MAElD,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAsB,CAAC,CAAC;;MAGnD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KAC5C,CAAC,CAAC;GACJ;EAED,uBAAuB,CAAC,IAAqB;IAC3C,MAAM,KAAK,GAAc,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACjD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAa;;MAE1B,IACE,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI;QACnC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,MAAM;QACrC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,UAAU,EACxC;QACA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;OACvC;;MAGD,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,MAAM,EAAE;QACzC,IAAI,CAAC,uBAAuB,CAAC,IAAuB,CAAC,CAAC;OACvD;KACF,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAuB,EAAE,IAAqB;;MAExE,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;MACjD,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KACjC,CAAC,CAAC;GACJ;EAED,MAAM;;IACJ,MAAM,UAAU,GAAG;MACjB,MAAM,EAAE,MAAM;MACd,iBAAiB,EAAE,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE;KAC3C,CAAC;IAEF,QACE,EAAC,IAAI,oBAAK,UAAU,GAClB,eAAa,CACR,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown-list/header-dropdown-list.scss?tag=sdds-header-dropdown-list&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list/header-dropdown-list.tsx"],"sourcesContent":["@import '../../../../global/_variables.scss';\n\n:host {\n  display: block;\n  width: 190px;\n\n  @media all and (max-width: $media-fullwidth) {\n    width: 100vw;\n  }\n\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:host([type='lg']) {\n  width: 320px;\n}\n","import { Component, Element, Host, h, Prop, State } from '@stencil/core';\nimport {\n  getPreviousNestedChildOfSiblingsMatching,\n  isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-dropdown-list',\n  styleUrl: 'header-dropdown-list.scss',\n  shadow: true,\n})\nexport class HeaderDropdownList {\n  @Element() host: HTMLElement;\n\n  // A Map to store the slots and their associated slotchange listeners.\n  private slotListeners: Map<HTMLSlotElement, EventListener> = new Map();\n\n  @Prop({ reflect: true }) type: 'lg' | 'md' = 'md';\n\n  @State() headingElement: HTMLElement;\n\n  componentWillLoad() {\n    const { children } = this.host;\n\n    // Set the type prop for each child, if they have such a property\n    for (let i = 0; i < children.length; i++) {\n      const child = children[i] as any;\n\n      if ('type' in child) {\n        child.type = this.type;\n      }\n    }\n\n    let listRoot = this.host;\n    if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {\n      listRoot = this.host.parentElement;\n    }\n\n    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);\n\n    if (headingEl) {\n      this.headingElement = headingEl;\n    } else {\n      console.warn('Heading element for list not found');\n    }\n  }\n\n  componentDidLoad() {\n    this.host.shadowRoot.querySelectorAll('slot').forEach((slot: HTMLSlotElement) => {\n      // Add the slotchange event listener.\n      const onSlotChange: EventListener = (e: Event) => {\n        this.processAssignedElements(e.target as HTMLSlotElement);\n      };\n\n      slot.addEventListener('slotchange', onSlotChange);\n\n      onSlotChange({ target: slot } as unknown as Event);\n\n      // Store the slot and its listener in the Map.\n      this.slotListeners.set(slot, onSlotChange);\n    });\n  }\n\n  processAssignedElements(slot: HTMLSlotElement): void {\n    const nodes: Element[] = slot.assignedElements();\n    nodes.forEach((node: Element) => {\n      // Add a listitem role to the assigned element if needed.\n      if (\n        node.tagName.toLowerCase() !== 'li' &&\n        node.tagName.toLowerCase() !== 'slot' &&\n        node.getAttribute('role') !== 'listitem'\n      ) {\n        node.setAttribute('role', 'listitem');\n      }\n\n      // If the assigned element is a slot, process its assigned elements recursively.\n      if (node.tagName.toLowerCase() === 'slot') {\n        this.processAssignedElements(node as HTMLSlotElement);\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.slotListeners.forEach((listener: EventListener, slot: HTMLSlotElement) => {\n      // Remove the slotchange event listener and delete the entry from the Map.\n      slot.removeEventListener('slotchange', listener);\n      this.slotListeners.delete(slot);\n    });\n  }\n\n  render() {\n    const attributes = {\n      'role': 'list',\n      'aria-labelledby': this.headingElement?.id,\n    };\n\n    return (\n      <Host {...attributes}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-dropdown.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-dropdown.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,ynBAAynB;;MCOtoB,cAAc;;;IAiBjB,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;;0BATT,KAAK;oBAGX,KAAK;gBAER,KAAK;;;EAO9B,UAAU,CAAC,KAAiB;;IAE1B,MAAM,cAAc,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAW,CAAC,CAAC;IACxE,IAAI,cAAc,EAAE;MAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;GACF;EAED,cAAc;IACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;GACxB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,IAAI;OACxB,IAED,wBAAkB,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACzE,cACE,GAAG,EAAE,CAAC,EAAE;QACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;OACpB,mBACc,GAAG,IAAI,CAAC,IAAI,EAAE,mBACd,YAAY,IAAI,CAAC,IAAI,EAAE,kBACxB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,OAAO,EAClD,OAAO,EAAE;QACP,IAAI,CAAC,cAAc,EAAE,CAAC;OACvB,IAED,YAAM,IAAI,EAAC,aAAa,GAAQ,EAC/B,IAAI,CAAC,WAAW,EACjB,YAAM,IAAI,EAAC,cAAc,GAAQ,EAChC,CAAC,IAAI,CAAC,cAAc,KACnB,iBAAW,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAC9E,CACM,CACQ,EAClB,IAAI,CAAC,QAAQ,KACZ,2BACE,EAAE,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE,EAChC,KAAK,EAAC,MAAM,EACZ,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,SAAS,EAAC,cAAc,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,cAAc,EAAE,CAAC,EACjB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,MAAM;UACZ,OAAO,EAAE;YACP,kBAAkB,EAAE,EAAE;WACvB;SACF;OACF,IAED,eAAa,CACO,CACvB,CACG,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown/header-dropdown.scss?tag=sdds-header-dropdown&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown/header-dropdown.tsx"],"sourcesContent":["@import '../../../../mixins/scrollbar';\n@import '../../../../mixins/z-index';\n\n:host {\n  height: var(--sdds-header-height);\n  position: relative;\n\n  .menu {\n    flex-direction: column;\n\n    @include sdds-scrollbar;\n\n    overflow-y: auto;\n    max-height: calc(100vh - var(--sdds-header-height));\n    box-shadow: var(--sdds-nav-dropdown-menu-box);\n    background-color: var(--sdds-header-app-launcher-menu-background);\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n\n  .state-open {\n    .dropdown-icon {\n      transform: rotateZ(180deg);\n    }\n\n    .button {\n      position: relative;\n      z-index: z(tooltip) + 1;\n    }\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown',\n  styleUrl: 'header-dropdown.scss',\n  shadow: true,\n})\nexport class HeaderDropdown {\n  @Element() host: HTMLElement;\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 dropdown icon (downwards chevron) should be hidden. */\n  @Prop() noDropdownIcon: boolean = false;\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() buttonEl?: HTMLButtonElement;\n\n  private uuid: string = crypto.randomUUID();\n\n  @Listen('click', { target: 'document' })\n  onAnyClick(event: MouseEvent) {\n    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n    const isClickOutside = !event.composedPath().includes(this.host as any);\n    if (isClickOutside) {\n      this.open = false;\n    }\n  }\n\n  toggleDropdown() {\n    this.open = !this.open;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'state-open': this.open,\n          }}\n        >\n          <sdds-header-item class=\"button\" active={this.open} selected={this.selected}>\n            <button\n              ref={(el) => {\n                this.buttonEl = el;\n              }}\n              aria-expanded={`${this.open}`}\n              aria-controls={`launcher-${this.uuid}`}\n              aria-current={this.selected ? 'location' : 'false'}\n              onClick={() => {\n                this.toggleDropdown();\n              }}\n            >\n              <slot name=\"button-icon\"></slot>\n              {this.buttonLabel}\n              <slot name=\"button-label\"></slot>\n              {!this.noDropdownIcon && (\n                <sdds-icon class=\"dropdown-icon\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n              )}\n            </button>\n          </sdds-header-item>\n          {this.buttonEl && (\n            <sdds-popover-canvas\n              id={`sdds-dropdown-${this.uuid}`}\n              class=\"menu\"\n              referenceEl={this.buttonEl}\n              placement=\"bottom-start\"\n              show={this.open}\n              offsetDistance={0}\n              modifiers={[\n                {\n                  name: 'flip',\n                  options: {\n                    fallbackPlacements: [],\n                  },\n                },\n              ]}\n            >\n              <slot></slot>\n            </sdds-popover-canvas>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-hamburger.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-hamburger.entry.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,0RAA0R;;MCQxS,eAAe;;;;EAG1B,MAAM;IACJ,MAAM,oBAAoB,qBACrB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,4BACE,8BAAY,oBAAoB,GAC9B,iBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,GAAa,CACvD,CACQ,CACd,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-hamburger/header-hamburger.scss?tag=sdds-header-hamburger&encapsulation=shadow","./src/components/header/webcomponent/header-hamburger/header-hamburger.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n\n:host {\n  color: var(--sdds-white);\n\n  sdds-header-item {\n    display: block;\n  }\n\n  .icon {\n    position: relative;\n    margin-left: -6px;\n    left: 3px;\n    transition: all 0.2s ease-in-out;\n  }\n}\n\n@media screen and (min-width: $grid-lg) {\n  :host sdds-header-item {\n    display: none;\n  }\n\n  :host([persistent]) sdds-header-item {\n    display: block;\n  }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-hamburger',\n  styleUrl: 'header-hamburger.scss',\n  shadow: true,\n})\nexport class HeaderHamburger {\n  @Element() host: HTMLElement;\n\n  render() {\n    const inheritedButtonProps = {\n      ...inheritAriaAttributes(this.host),\n    };\n\n    return (\n      <Host>\n        <sdds-header-item>\n          <button {...inheritedButtonProps}>\n            <sdds-icon class=\"icon\" name=\"burger\" size=\"20px\"></sdds-icon>\n          </button>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-button.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-launcher-button.entry.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,mJAAmJ;;MCQtK,oBAAoB;;;kBAKd,KAAK;;EAItB,MAAM;IACJ,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAC;IACtF,MAAM,WAAW,qBACZ,IAAI,CAAC,cAAc,CACvB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,wBAAkB,MAAM,EAAE,IAAI,CAAC,MAAM,IACnC,8BAAY,WAAW,GACrB,iBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACtD,CACQ,CACd,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-button/header-launcher-button.scss?tag=sdds-header-launcher-button&encapsulation=shadow","./src/components/header/webcomponent/header-launcher-button/header-launcher-button.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  sdds-header-item {\n    display: block; // launcher button is always visible, regular header buttons are not.\n  }\n\n  .icon {\n    position: relative;\n    margin-left: -6px;\n    left: 3px;\n    transition: all 0.2s ease-in-out;\n  }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { Attributes, inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher-button',\n  styleUrl: 'header-launcher-button.scss',\n  shadow: true,\n})\nexport class HeaderLauncherButton {\n  @Element() host: HTMLElement;\n\n  /** If the button should appear active. Can be used when the button is\n   * triggering a dropdown, and the dropdown is open, for example. */\n  @Prop() active = false;\n\n  private ariaAttributes: Attributes;\n\n  render() {\n    this.ariaAttributes = { ...this.ariaAttributes, ...inheritAriaAttributes(this.host) };\n    const buttonProps = {\n      ...this.ariaAttributes,\n    };\n\n    return (\n      <Host>\n        <sdds-header-item active={this.active}>\n          <button {...buttonProps}>\n            <sdds-icon class=\"icon\" name=\"bento\" size=\"20px\"></sdds-icon>\n          </button>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-grid-item.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-launcher-grid-item.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,wwBAAwwB;;MCO7xB,sBAAsB;;;;EACjC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,eAAa,CACR,EACP;GACH;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.scss?tag=sdds-header-launcher-grid-item&encapsulation=shadow","./src/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n:host {\n  display: block;\n  width: 96px;\n  height: 96px;\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    width: 100%;\n    height: 100%;\n    border: none;\n    padding: 0 12px;\n    display: flex;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    gap: 8px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    background-color: var(--sdds-header-app-launcher-menu-bg);\n    color: var(--sdds-grey-800);\n    border-radius: 4px;\n    transition: background-color 150ms ease;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover) {\n    background-color: var(--sdds-grey-100);\n    cursor: pointer;\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\n    @include sdds-focus-state;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-grid-item',\n  styleUrl: 'header-launcher-grid-item.scss',\n  shadow: true,\n})\nexport class HeaderLauncherGridItem {\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-grid-title.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-launcher-grid-title.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,sWAAsW;;MCO5X,uBAAuB;EALpC;;IAMU,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAW5C;EATC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,UAAI,KAAK,EAAC,iCAAiC,EAAC,EAAE,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,IACjE,eAAa,CACV,CACA,EACP;GACH;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.scss?tag=sdds-header-launcher-grid-title","./src/components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.tsx"],"sourcesContent":[".sdds-header-launcher-grid-title {\n  all: unset;\n  box-sizing: border-box;\n  font: var(--sdds-detail-04);\n  letter-spacing: var(--sdds-detail-04-ls);\n  color: var(--sdds-header-app-launcher-grid-category-title-color);\n  text-transform: uppercase;\n  height: 48px;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n  margin: 0;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-grid-title',\n  styleUrl: 'header-launcher-grid-title.scss',\n  shadow: false,\n})\nexport class HeaderLauncherGridTitle {\n  private uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <h3 class=\"sdds-header-launcher-grid-title\" id={`sdds-${this.uuid}`}>\n          <slot></slot>\n        </h3>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-grid.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-launcher-grid.entry.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,8KAA8K;;MCW/L,kBAAkB;;;;;EAK7B,iBAAiB;IACf,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IAE3B,MAAM,SAAS,GAAG,wCAAwC,CAAC,QAAQ,EAAE,CAAC,EAAE;MACtE,MAAM,CAAC,GAAG,EAAE,CAAC;MACb,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC;KAC5B,CAAC,CAAC;IAEH,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;KACjC;SAAM;MACL,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;KACpD;GACF;EAED,MAAM;;IACJ,MAAM,cAAc,GAAG;MACrB,OAAO,EAAE,2BAA2B;MACpC,MAAM,EAAE,MAAM;MACd,iBAAiB,EAAE,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE;KAC3C,CAAC;IACF,QACE,EAAC,IAAI,QACH,2BAAS,cAAc,GACrB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-grid/header-launcher-grid.scss?tag=sdds-header-launcher-grid","./src/components/header/webcomponent/header-launcher-grid/header-launcher-grid.tsx"],"sourcesContent":[".sdds-header-launcher-grid {\n  box-sizing: border-box;\n  padding: 12px;\n  margin: 0;\n  list-style: none;\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  gap: 4px;\n  border-radius: none;\n}\n","import { Component, Element, h, Host, State } from '@stencil/core';\nimport {\n  getPreviousNestedChildOfSiblingsMatching,\n  isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher-grid',\n  styleUrl: 'header-launcher-grid.scss',\n  shadow: false,\n})\nexport class HeaderLauncherGrid {\n  @Element() host: HTMLElement;\n\n  @State() headingElement: HTMLElement;\n\n  componentWillLoad() {\n    const listRoot = this.host;\n\n    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {\n      const e = el;\n      return isHeadingElement(e);\n    });\n\n    if (headingEl) {\n      this.headingElement = headingEl;\n    } else {\n      console.warn('Heading element for list not found');\n    }\n  }\n\n  render() {\n    const listAttributes = {\n      'class': 'sdds-header-launcher-grid',\n      'role': 'list',\n      'aria-labelledby': this.headingElement?.id,\n    };\n    return (\n      <Host>\n        <div {...listAttributes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-list-item.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-launcher-list-item.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,yFAAyF;;MCO9G,sBAAsB;;;;EACjC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,sCAAgC,IAAI,EAAC,IAAI,IACvC,eAAa,CACkB,CAC5B,EACP;GACH;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.scss?tag=sdds-header-launcher-list-item&encapsulation=shadow","./src/components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.tsx"],"sourcesContent":[":host {\n  display: block;\n  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list-item',\n  styleUrl: 'header-launcher-list-item.scss',\n  shadow: true,\n})\nexport class HeaderLauncherListItem {\n  render() {\n    return (\n      <Host>\n        <sdds-header-dropdown-list-item type=\"lg\">\n          <slot></slot>\n        </sdds-header-dropdown-list-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-list-title.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-launcher-list-title.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,iWAAiW;;MCOvX,uBAAuB;EALpC;;IAQU,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAW5C;EATC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,UAAI,KAAK,EAAC,iCAAiC,EAAC,EAAE,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,IACjE,eAAa,CACV,CACA,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.scss?tag=sdds-header-launcher-list-title","./src/components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.tsx"],"sourcesContent":[".sdds-header-launcher-list-title {\n  all: unset;\n  box-sizing: border-box;\n  font: var(--sdds-detail-06);\n  letter-spacing: var(--sdds-detail-06-ls);\n  color: var(--sdds-header-app-launcher-category-title-color);\n  text-transform: uppercase;\n  height: 48px;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n  margin: 0;\n}\n","import { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list-title',\n  styleUrl: 'header-launcher-list-title.scss',\n  shadow: false,\n})\nexport class HeaderLauncherListTitle {\n  @Element() host: HTMLElement;\n\n  private uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <h3 class=\"sdds-header-launcher-list-title\" id={`sdds-${this.uuid}`}>\n          <slot></slot>\n        </h3>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-list.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-launcher-list.entry.js","mappings":";;MAMa,kBAAkB;EAJ/B;;IAKE,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAWpC;EATC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,iCAA2B,IAAI,EAAC,IAAI,IAClC,eAAa,CACa,CACvB,EACP;GACH;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-list/header-launcher-list.tsx"],"sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-list',\n  shadow: false,\n})\nexport class HeaderLauncherList {\n  uuid: string = crypto.randomUUID();\n\n  render() {\n    return (\n      <Host>\n        <sdds-header-dropdown-list type=\"lg\">\n          <slot></slot>\n        </sdds-header-dropdown-list>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-launcher.entry.js","mappings":";;;AAAA,MAAM,iBAAiB,GAAG,6uBAA6uB;;MCQ1vB,cAAc;;;IASjB,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;gBANlB,KAAK;;2BAIH,KAAK;;EAOhC,UAAU,CAAC,KAAiB;;IAE1B,MAAM,cAAc,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAW,CAAC,CAAC;IACxE,IAAI,cAAc,EAAE;MAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;GACF;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAoB,CAAC;IAC9F,MAAM,eAAe,GAAG,WAAW,CAAC,gBAAgB,EAAE,CAAC;IACvD,MAAM,eAAe,GAAG,eAAe,CAAC,IAAI,CAC1C,CAAC,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,2BAA2B,CAC3E,CAAC;IAEF,IAAI,eAAe,EAAE;MACnB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;GACF;EAED,cAAc;IACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;GACxB;EAED,MAAM;IACJ,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,qBAAqB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAE,CAAC;IAEhG,MAAM,gBAAgB,mCACjB,IAAI,CAAC,cAAc,KACtB,eAAe,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,EAC/B,eAAe,EAAE,YAAY,IAAI,CAAC,IAAI,EAAE,EACxC,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,IAAI,CAAC,IAAI,EACnB,SAAS,EAAE;QACT,IAAI,CAAC,cAAc,EAAE,CAAC;OACvB,EACD,KAAK,EAAE,CAAC,EAAuC;QAC7C,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;OACpB,GACF,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,SAAS,EAAE,IAAI;QACf,YAAY,EAAE,IAAI,CAAC,IAAI;QACvB,sBAAsB,EAAE,IAAI,CAAC,eAAe;OAC7C,IAED,mDAAiC,gBAAgB,EAAgC,EAEhF,IAAI,CAAC,QAAQ,KACZ,2BACE,EAAE,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE,EAChC,KAAK,EAAC,MAAM,EACZ,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,SAAS,EAAC,cAAc,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,cAAc,EAAE,CAAC,EACjB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,MAAM;UACZ,OAAO,EAAE;YACP,kBAAkB,EAAE,EAAE;WACvB;SACF;OACF,IAED,eAAa,CACO,CACvB,CACG,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher/header-launcher.scss?tag=sdds-header-launcher&encapsulation=shadow","./src/components/header/webcomponent/header-launcher/header-launcher.tsx"],"sourcesContent":["@import '../../../../mixins/scrollbar';\n@import '../../../../mixins/z-index';\n@import '../../../../global/_variables.scss';\n\n:host {\n  .wrapper {\n    height: var(--sdds-header-height);\n    position: relative;\n\n    .menu {\n      /** Should control only height, position, and overflow here. \n        Width and appearance are set inside nested components */\n      flex-direction: column;\n\n      @include sdds-scrollbar;\n\n      overflow-y: auto;\n      max-height: calc(100vh - var(--sdds-header-height));\n      box-shadow: var(--sdds-nav-dropdown-menu-box);\n      background-color: var(--sdds-header-app-launcher-menu-background);\n      border-radius: 0;\n\n      @media all and (max-width: $media-fullwidth) {\n        width: 100vw;\n      }\n    }\n\n    &.state-list-type-menu {\n      .menu {\n        height: calc(100vh - var(--sdds-header-height));\n      }\n    }\n\n    &.state-open {\n      .button {\n        position: relative;\n        z-index: z(tooltip) + 1;\n      }\n    }\n  }\n}\n","import { Component, Host, h, Element, Listen, State } from '@stencil/core';\nimport { Attributes, inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher',\n  styleUrl: 'header-launcher.scss',\n  shadow: true,\n})\nexport class HeaderLauncher {\n  @Element() host: HTMLElement;\n\n  @State() open: boolean = false;\n\n  @State() buttonEl?: HTMLSddsHeaderLauncherButtonElement;\n\n  @State() hasListTypeMenu = false;\n\n  private uuid: string = crypto.randomUUID();\n\n  private ariaAttributes: Attributes;\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n    const isClickOutside = !event.composedPath().includes(this.host as any);\n    if (isClickOutside) {\n      this.open = false;\n    }\n  }\n\n  componentDidLoad() {\n    const slotElement = this.host.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n    const slottedElements = slotElement.assignedElements();\n    const hasListTypeMenu = slottedElements.some(\n      (element) => element.tagName.toLowerCase() === 'sdds-header-launcher-list',\n    );\n\n    if (hasListTypeMenu) {\n      this.hasListTypeMenu = true;\n    }\n  }\n\n  toggleLauncher() {\n    this.open = !this.open;\n  }\n\n  render() {\n    this.ariaAttributes = { ...this.ariaAttributes, ...inheritAriaAttributes(this.host, ['role']) };\n\n    const buttonAttributes = {\n      ...this.ariaAttributes,\n      'aria-expanded': `${this.open}`,\n      'aria-controls': `launcher-${this.uuid}`,\n      'class': 'button',\n      'active': this.open,\n      'onClick': () => {\n        this.toggleLauncher();\n      },\n      'ref': (el: HTMLSddsHeaderLauncherButtonElement) => {\n        this.buttonEl = el;\n      },\n    };\n\n    return (\n      <Host>\n        <div\n          class={{\n            'wrapper': true,\n            'state-open': this.open,\n            'state-list-type-menu': this.hasListTypeMenu,\n          }}\n        >\n          <sdds-header-launcher-button {...buttonAttributes}></sdds-header-launcher-button>\n\n          {this.buttonEl && (\n            <sdds-popover-canvas\n              id={`sdds-launcher-${this.uuid}`}\n              class=\"menu\"\n              referenceEl={this.buttonEl}\n              placement=\"bottom-start\"\n              show={this.open}\n              offsetDistance={0}\n              modifiers={[\n                {\n                  name: 'flip',\n                  options: {\n                    fallbackPlacements: [],\n                  },\n                },\n              ]}\n            >\n              <slot></slot>\n            </sdds-popover-canvas>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header-title.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header-title.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,0fAA0f;;MCOpgB,WAAW;;;;EACtB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,WAAW,IACpB,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-title/header-title.scss?tag=sdds-header-title&encapsulation=shadow","./src/components/header/webcomponent/header-title/header-title.tsx"],"sourcesContent":["@import '../../../../mixins/flex-center';\n\n:host {\n  display: block;\n  flex-shrink: 1;\n  box-sizing: border-box;\n  color: var(--sdds-header-nav-item-color);\n  font-weight: normal;\n  font-family: var(--sdds-font-family-headline);\n  letter-spacing: normal;\n  position: relative;\n\n  .component {\n    // FIXME this doesnt work\n    ::after {\n      content: ' ';\n      display: block;\n      height: 100%;\n      width: 24px;\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: linear-gradient(to right, transparent, var(--sdds-header-background));\n    }\n  }\n\n  slot {\n    min-width: inherit;\n    display: block;\n    align-items: center;\n    white-space: nowrap;\n    text-overflow: fade;\n    padding: 0 24px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-title',\n  styleUrl: 'header-title.scss',\n  shadow: true,\n})\nexport class HeaderTitle {\n  render() {\n    return (\n      <Host>\n        <div class=\"component\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/sdds-header.entry.js.map

@@ -1 +0,0 @@
-{"file":"sdds-header.entry.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,00BAA00B;;MCQx1B,UAAU;EAKrB;;IACE,MAAM,QAAQ,GAAqB,CAAC,aAAa;MAC/C,aAAa,CAAC,OAAO,CAAC,CAAC,QAAQ;QAC7B,IAAI,QAAQ,CAAC,IAAI,KAAK,WAAW,EAAE;UACjC,uBAAuB,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;SAC1C;OACF,CAAC,CAAC;KACJ,CAAC;IAEF,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC;GAChD;EAED,gBAAgB;IACd,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;IAC9B,MAAM,UAAU,GAAG,WAAW,CAAC,aAAa,CAAC,6BAA6B,CAAC,CAAC;IAE5E,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE;MAChC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,uBAAuB,CAAC,UAAU,CAAC,CAAC;GACrC;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;GAC5B;EAED,MAAM;IACJ,MAAM,aAAa,qBACd,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,YAAM,IAAI,EAAC,WAAW,GAAQ,EAC9B,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,2BAAS,aAAa,GACpB,UAAI,KAAK,EAAC,4BAA4B,IACpC,eAAa,EACb,UAAI,KAAK,EAAC,2BAA2B,GAAM,EAC3C,YAAM,IAAI,EAAC,KAAK,GAAQ,CACrB,CACD,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-component.scss?tag=sdds-header","./src/components/header/webcomponent/header-component.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/flex-center';\n@import '../../../mixins/scrollbar';\n@import '../../../mixins/z-index';\n\nsdds-header {\n  display: block;\n  height: var(--sdds-header-height);\n  background-color: var(--sdds-header-background);\n  width: 100%;\n  z-index: z(header);\n}\n\nnav {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-header-background);\n  width: 100%;\n  display: block;\n\n  .sdds-header-component-list {\n    height: var(--sdds-header-height);\n    all: unset;\n    display: flex;\n    justify-content: start;\n    align-items: center;\n  }\n\n  sdds-header-dropdown,\n  sdds-header-item {\n    display: none;\n  }\n\n  .sdds-header-middle-spacer {\n    all: unset;\n    display: block;\n    flex-grow: 1;\n    height: var(--sdds-header-height);\n    border-right: 1px solid var(--sdds-header--basic-element-border);\n  }\n\n  @media screen and (min-width: $grid-lg) {\n    sdds-header-dropdown,\n    sdds-header-item {\n      display: block;\n    }\n  }\n\n  sdds-header-item:nth-child(3),\n  sdds-header-dropdown:nth-child(3) {\n    /* Adds a left border to the button after the title, if any */\n    border-left: 1px solid var(--sdds-header--basic-element-border);\n  }\n}\n","import { Component, h, Host, Element } from '@stencil/core';\nimport { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header',\n  styleUrl: 'header-component.scss',\n  shadow: false,\n})\nexport class SddsHeader {\n  @Element() host: HTMLElement;\n\n  private observer: MutationObserver;\n\n  constructor() {\n    const callback: MutationCallback = (mutationsList) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          updateListChildrenRoles(mutation.target);\n        }\n      });\n    };\n\n    this.observer = new MutationObserver(callback);\n  }\n\n  componentDidLoad() {\n    const hostElement = this.host;\n    const navElement = hostElement.querySelector('.sdds-header-component-list');\n\n    this.observer.observe(navElement, {\n      childList: true,\n      subtree: false,\n    });\n\n    updateListChildrenRoles(navElement);\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  render() {\n    const navAttributes = {\n      ...inheritAriaAttributes(this.host),\n    };\n\n    return (\n      <Host>\n        <slot name=\"hamburger\"></slot>\n        <slot name=\"title\"></slot>\n        <nav {...navAttributes}>\n          <ul class=\"sdds-header-component-list\">\n            <slot></slot>\n            <li class=\"sdds-header-middle-spacer\"></li>\n            <slot name=\"end\"></slot>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}