@scania/tegel 0.0.34 → 0.0.52

package/dist/tegel/p-626434af.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","Dropdown","componentWillLoad","this","listItemObject","host","children","listItemArray","Array","from","map","listItem","optionValues","push","value","optionLabels","innerText","trim","setOptionFromOutside","defaultOption","size","console","warn","optionValue","deselectAll","split","i","length","el","includes","selectedLabelsArray","textContent","selectedValuesArray","selectedLabel","selectedValue","setAttribute","changeSelectedOption","selectedOption","resetOption","handleDocClick","ev","stopPropagation","target","composedPath","window","event","node","undefined","contains","textInput","focus","tabbingLabelReset","open","keyListener","disabled","key","preventDefault","listItemIndex","handleClick","openDirection","dropdownMenuHeight","dropdownMenuSelector","offsetHeight","distanceToBottom","getBoundingClientRect","top","viewportHeight","innerHeight","openUpwards","inputSearch","emit","selectOptionHandler","type","detail","label","itemIndex","indexOf","filter","_value","index","handleSearch","searchTerm","optionItem","Object","assign","selected","async","render","h","Host","class","modeVariant","inline","state","labelPosition","JSON","stringify","part","tabindex","onClick","ref","inputEl","placeholder","onInput","autoComplete","toString","join","width","height","viewBox","fill","xmlns","d","stroke","dropdownMenu","helper","DropdownOption","changeFocusHandler","removeFocusHandler","blur","onKeyDown","code","parent","parentNode","innerValue","isMultiSelectOption","closest","classList","listOptions","childNodes","internalSddsSelect","forEach","optionEl","optionCheckbox","shadowRoot","querySelector","checked"],"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: var(--sdds-dropdown-label-outside);\n  --sdds-dropdown-label-outside-text-decoration: none;\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.inputSearch.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  @Event({\n    eventName: 'inputSearch',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  inputSearch: EventEmitter<any>;\n\n  handleSearch(ev) {\n    const searchTerm = ev.target.value;\n    this.inputSearch.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: var(--sdds-dropdown-label-outside);\n  --sdds-dropdown-label-outside-text-decoration: none;\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"],"mappings":"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"}

package/dist/tegel/{p-847f81ac.entry.js → p-64dd37d4.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as d,H as s}from"./p-1b74896d.js";const c=":host{display:block;box-sizing:border-box}:host *{box-sizing:border-box}:host .sdds-accordion-header-icon-start,:host .sdds-accordion-header-icon-end{position:relative}:host(:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-focus);outline:none}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start::after,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end::after{border-color:var(--sdds-accordion-border-focus)}:host(:focus) .disabled,:host(:focus) .disabled *{cursor:not-allowed}:host(:focus) .disabled .sdds-accordion-header-icon-start,:host(:focus) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:focus) .disabled .sdds-accordion-header-icon-start::after,:host(:focus) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-active);outline:none}:host(:active) .disabled,:host(:active) .disabled *{cursor:not-allowed}:host(:active) .disabled .sdds-accordion-header-icon-start,:host(:active) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:active) .disabled .sdds-accordion-header-icon-start::after,:host(:active) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:last-child){border-bottom:1px solid var(--sdds-accordion-border)}";const r=class{constructor(d){o(this,d);this.divider=true;this.modeVariant=null}render(){return d(s,{class:`sdds-accordion ${this.divider?"sdds-accordion-divider":""} ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},d("slot",null))}};r.style=c;export{r as sdds_accordion};
-//# sourceMappingURL=p-847f81ac.entry.js.map
+import{r as o,h as d,H as s}from"./p-387e1798.js";const c=":host{display:block;box-sizing:border-box}:host *{box-sizing:border-box}:host .sdds-accordion-header-icon-start,:host .sdds-accordion-header-icon-end{position:relative}:host(:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-focus);outline:none}:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start::after,:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end::after{border-color:var(--sdds-accordion-border-focus)}:host(:focus) .disabled,:host(:focus) .disabled *{cursor:not-allowed}:host(:focus) .disabled .sdds-accordion-header-icon-start,:host(:focus) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:focus) .disabled .sdds-accordion-header-icon-start::after,:host(:focus) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-active);outline:none}:host(:active) .disabled,:host(:active) .disabled *{cursor:not-allowed}:host(:active) .disabled .sdds-accordion-header-icon-start,:host(:active) .disabled .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}:host(:active) .disabled .sdds-accordion-header-icon-start::after,:host(:active) .disabled .sdds-accordion-header-icon-end::after{border-color:transparent}:host(:last-child){border-bottom:1px solid var(--sdds-accordion-border)}";const r=class{constructor(d){o(this,d);this.modeVariant=null}render(){return d(s,{class:`sdds-accordion ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},d("slot",null))}};r.style=c;export{r as sdds_accordion};
+//# sourceMappingURL=p-64dd37d4.entry.js.map

package/dist/tegel/p-64dd37d4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["accordionCss","Accordion","render","h","Host","class","this","modeVariant"],"sources":["./src/components/accordion/accordion.scss?tag=sdds-accordion&encapsulation=shadow","./src/components/accordion/accordion.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/disabled-style';\n@import '../../mixins/box-sizing';\n\n:host {\n  display: block;\n  @include sdds-box-sizing;\n\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    position: relative;\n  }\n}\n\n:host(:focus) {\n  @include sdds-focus-state;\n\n  .sdds-accordion-item {\n    .sdds-accordion-header-icon-start,\n    .sdds-accordion-header-icon-end {\n      background-color: var(--sdds-accordion-background-focus);\n      outline: none;\n\n      &::after {\n        border-color: var(--sdds-accordion-border-focus);\n      }\n    }\n  }\n\n  .disabled {\n    @include disabledStyle;\n  }\n}\n\n:host(:active) {\n  .sdds-accordion-header-icon-start,\n  .sdds-accordion-header-icon-end {\n    background-color: var(--sdds-accordion-background-active);\n    outline: none;\n  }\n\n  .disabled {\n    @include disabledStyle;\n  }\n}\n\n:host(:last-child) {\n  border-bottom: 1px solid var(--sdds-accordion-border);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  /** Set the variant of the the accordion. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  render() {\n    return (\n      <Host\n        class={`sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,irD,MCORC,EAAS,M,0CAE2B,I,CAE/CC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,kBAAkBC,KAAKC,cAAgB,KAAO,qBAAqBD,KAAKC,cAAe,MAE9FJ,EAAA,a"}

package/dist/tegel/p-68e4c190.entry.js

@@ -0,0 +1,2 @@
+import{r as d,h as s,H as o}from"./p-387e1798.js";const e=':root{--sdds-headline-01:normal normal bold 40px/40px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,\n    sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px "Scania Sans Headline", arial,\n    helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px "Scania Sans Headline", arial,\n    helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,\n    sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-mode-light{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-958);--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100);--sdds-dropdown-disabled:var(--sdds-grey-400);--sdds-dropdown-border:var(--sdds-grey-100);--sdds-dropdown-label-inside:var(--sdds-grey-700);--sdds-dropdown-label-outside:var(--sdds-grey-958);--sdds-dropdown-placeholder:var(--sdds-grey-700);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-900);--sdds-dropdown-option-disabled-color:var(--sdds-grey-400);--sdds-dropdown-background-disabled:var(--sdds-dropdown-background)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-50);--sdds-dropdown-background-hover:var(--sdds-grey-100)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-white);--sdds-dropdown-background-hover:var(--sdds-grey-50)}.sdds-mode-dark{--sdds-link-text-decoration:none;--sdds-dropdown-color:var(--sdds-grey-400);--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800);--sdds-dropdown-disabled:var(--sdds-grey-800);--sdds-dropdown-border:var(--sdds-grey-800);--sdds-dropdown-label-inside:var(--sdds-grey-400);--sdds-dropdown-label-outside:var(--sdds-grey-100);--sdds-dropdown-placeholder:var(--sdds-grey-400);--sdds-dropdown-border-not-focused:var(--sdds-grey-600);--sdds-dropdown-option-color:var(--sdds-grey-50);--sdds-dropdown-option-disabled-color:var(--sdds-grey-800);--sdds-dropdown-background-disabled:var(--sdds-dropdown-background)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-dropdown-background:var(--sdds-grey-868);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-dropdown-background:var(--sdds-grey-900);--sdds-dropdown-background-hover:var(--sdds-grey-800)}.sdds-dropdown-helper{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);color:var(--sdds-grey-700);margin-top:var(--sdds-spacing-element-4);display:flex}.sdds-dropdown-helper .sdds-dropdown-error-icon{width:16px;height:16px;padding-right:9px;display:none}.sdds-dropdown-label-inside{font:var(--sdds-detail-ex-07);letter-spacing:var(--sdds-detail-ex-07-ls);color:var(--sdds-dropdown-label-inside)}.sdds-dropdown-label-outside{font:var(--sdds-detail-ex-05);letter-spacing:var(--sdds-detail-ex-05-ls);display:block;color:var(--sdds-dropdown-label-outside);margin-bottom:var(--sdds-spacing-element-8)}:root{--sdds-headline-01:normal normal bold 40px/40px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-01-ls:0;--sdds-headline-02:normal normal bold 32px/32px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-02-ls:-0.04em;--sdds-headline-03:normal normal bold 24px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-03-ls:-0.03em;--sdds-headline-04:normal normal bold 20px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-04-ls:-0.02em;--sdds-headline-05:normal normal bold 14px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-05-ls:-0.02em;--sdds-headline-06:normal normal bold 14px/16px "Scania Sans", arial, helvetica, sans-serif;--sdds-headline-06-ls:-0.02em;--sdds-headline-07:normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,\n    sans-serif;--sdds-headline-07-ls:-0.01em;--sdds-paragraph-01:normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;--sdds-paragraph-01-ls:-0.03em;--sdds-paragraph-02:normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-paragraph-02-ls:-0.01em;--sdds-body-01:normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-body-01-ls:-0.02em;--sdds-body-02:normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;--sdds-body-02-ls:-0.02em;--sdds-detail-01:normal normal normal 16px/24px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-01-ls:-0.01em;--sdds-detail-02:normal normal normal 14px/16px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-02-ls:-0.01em;--sdds-detail-03:normal normal normal 14px/20px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-03-ls:-0.01em;--sdds-detail-04:normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;--sdds-detail-04-ls:0.08em;--sdds-detail-04-tt:uppercase;--sdds-detail-05:normal normal normal 12px/16px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-05-ls:0;--sdds-detail-06:normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;--sdds-detail-06-ls:0.08em;--sdds-detail-06-tt:uppercase;--sdds-detail-07:normal normal normal 10px/8px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-07-ls:0;--sdds-expressive-headline-01:normal normal bold 80px/80px "Scania Sans Headline", arial,\n    helvetica, sans-serif;--sdds-expressive-headline-01-ls:0;--sdds-expressive-headline-02:normal normal bold 56px/56px "Scania Sans Headline", arial,\n    helvetica, sans-serif;--sdds-expressive-headline-02-ls:0;--sdds-headline-ex-01:normal normal bold 40px/40px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-01-ls:0;--sdds-headline-ex-02:normal normal bold 32px/32px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-02-ls:-0.04em;--sdds-headline-ex-03:normal normal bold 24px/24px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-03-ls:-0.03em;--sdds-headline-ex-04:normal normal bold 20px/24px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-04-ls:-0.01em;--sdds-headline-ex-05:normal normal bold 16px/24px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-05-ls:-0.02em;--sdds-headline-ex-06:normal normal bold 14px/16px "Scania Sans Headline", arial, helvetica,\n    sans-serif;--sdds-headline-ex-06-ls:-0.02em;--sdds-headline-ex-07:normal normal bold 14px/16px "Scania Sans Semi Condensed", arial, helvetica,\n    sans-serif;--sdds-headline-ex-07-ls:-0.01em;--sdds-paragraph-ex-01:normal normal normal 24px/32px "Scania Sans", arial, helvetica, sans-serif;--sdds-paragraph-ex-01-ls:-0.03em;--sdds-paragraph-ex-02:normal normal normal 20px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-paragraph-ex-02-ls:-0.01em;--sdds-body-ex-01:normal normal normal 16px/24px "Scania Sans", arial, helvetica, sans-serif;--sdds-body-ex-01-ls:-0.02em;--sdds-body-ex-02:normal normal normal 14px/20px "Scania Sans", arial, helvetica, sans-serif;--sdds-body-ex-02-ls:-0.01em;--sdds-detail-ex-01:normal normal normal 16px/24px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-ex-01-ls:-0.01em;--sdds-detail-ex-02:normal normal normal 14px/16px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-ex-02-ls:-0.01em;--sdds-detail-ex-03:normal normal normal 14px/20px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-ex-03-ls:-0.01em;--sdds-detail-ex-04:normal normal bold 12px/16px "Scania Sans", arial, helvetica, sans-serif;--sdds-detail-ex-04-ls:0.08em;--sdds-detail-ex-04-tt:uppercase;--sdds-detail-ex-05:normal normal normal 12px/16px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-ex-05-ls:0;--sdds-detail-ex-06:normal normal bold 10px/16px "Scania Sans", arial, helvetica, sans-serif;--sdds-detail-ex-06-ls:0.08em;--sdds-detail-ex-06-tt:uppercase;--sdds-detail-ex-07:normal normal normal 10px/8px "Scania Sans Semi Condensed",\n    "Scania Sans Condensed", arial, helvetica, sans-serif;--sdds-detail-ex-07-ls:0}:root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-background-opacity-hover:0.12;--sdds-checkbox-background-opacity-focus:0.24;--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url("data:image/svg+xml;utf8,<svg width=\'8\' height=\'6\' viewBox=\'0 0 8 6\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'> <path d=\'M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1\' stroke=\'%23ffffff\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/></svg>");--sdds-checkbox-background-img-disabled:url("data:image/svg+xml;utf8,<svg width=\'8\' height=\'6\' viewBox=\'0 0 8 6\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'> <path d=\'M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1\' stroke=\'%23b0b7c4\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/></svg>");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:var(--sdds-grey-600);--sdds-checkbox-background-focus:var(--sdds-grey-600);--sdds-checkbox-background-opacity-hover:0.48;--sdds-checkbox-background-opacity-focus:0.72;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url("data:image/svg+xml;utf8,<svg width=\'8\' height=\'6\' viewBox=\'0 0 8 6\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'> <path d=\'M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1\' stroke=\'%230D0F13\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/></svg>");--sdds-checkbox-background-img-disabled:url("data:image/svg+xml;utf8,<svg width=\'8\' height=\'6\' viewBox=\'0 0 8 6\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'> <path d=\'M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1\' stroke=\'%2356657A\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/></svg>");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:"";position:absolute;box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:var(--sdds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host,::slotted(*){color:var(--sdds-grey-958);box-sizing:border-box;box-sizing:border-box}:host *,::slotted(*) *{box-sizing:border-box}:host,::slotted(*){--sdds-dropdown-label-outside:var(--sdds-dropdown-label-outside);--sdds-dropdown-label-outside-text-decoration:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-grey-958);box-sizing:border-box}:host{position:relative;z-index:auto}:host::part(dropdown-filter-disabled){cursor:not-allowed;caret-color:transparent;pointer-events:none;color:var(--sdds-dropdown-disabled);border:none}:host::part(dropdown-filter-disabled)::placeholder{color:var(--sdds-dropdown-disabled)}.sdds-dropdown{position:relative;display:flex;flex-flow:column wrap;width:100%;border:0}.sdds-dropdown,.sdds-dropdown *{box-sizing:border-box}.sdds-dropdown .sdds-dropdown-toggle{font:var(--sdds-detail-ex-02);letter-spacing:var(--sdds-detail-ex-02-ls);color:var(--sdds-dropdown-color);display:flex;align-items:center;background-color:var(--sdds-dropdown-background);cursor:pointer;transition:box-shadow 0.1s ease-in, border-bottom-color 150ms ease;border-radius:4px 4px 0 0;border:none;border-bottom:1px solid var(--sdds-dropdown-border-not-focused);box-shadow:none;width:100%;text-align:left;outline:none;padding:20px 16px;display:flex;align-items:center}.sdds-dropdown .sdds-dropdown-toggle:hover{border-bottom-color:var(--sdds-grey-600)}.sdds-dropdown .sdds-dropdown-toggle:focus::before{content:" ";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:2px solid var(--sdds-blue-400)}.sdds-dropdown .sdds-dropdown-toggle:active,.sdds-dropdown .sdds-dropdown-toggle.active .sdds-dropdown .sdds-dropdown-toggle.selected{border-bottom-color:var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-toggle.is-filter{transition:border 0.1s ease-in 0.1s;cursor:text}.sdds-dropdown .sdds-dropdown-toggle-lg{padding:20px 16px}.sdds-dropdown .sdds-dropdown-toggle-md{padding:16px}.sdds-dropdown .sdds-dropdown-toggle-sm{padding:12px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-lg{padding:20px 16px 16px}.sdds-dropdown .sdds-dropdown-toggle.sdds-dropdown-toggle-label-inside-md{padding:16px 16px 12px}.sdds-dropdown .sdds-dropdown-toggle--selected:not(:focus){border-bottom:1px solid var(--sdds-dropdown-border-not-focused)}.sdds-dropdown .sdds-dropdown-arrow{width:20px;position:absolute;right:16px;color:inherit;transform:rotate(0);transition:transform ease 250ms}.sdds-dropdown .sdds-dropdown-placeholder{color:var(--sdds-grey-700)}.sdds-dropdown .sdds-dropdown-label{display:grid;width:calc(100% - 25px)}.sdds-dropdown .sdds-dropdown-label-container{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-dropdown.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-container--label-inside{padding-bottom:12px}.sdds-dropdown .sdds-dropdown-filter{border:0;outline:none;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-link);width:100%;background:transparent}.sdds-dropdown .sdds-dropdown-filter:focus{outline:none}.sdds-dropdown .sdds-dropdown-filter::placeholder{color:var(--sdds-grey-700);opacity:1}.sdds-dropdown .sdds-dropdown-menu{z-index:100;background-color:var(--sdds-dropdown-background);position:absolute;top:100%;left:0;min-width:100%;max-height:360px;border-color:transparent;border-style:solid;border-width:0 1px 1px;box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.1);border-left-color:var(--sdds-dropdown-border);border-right-color:var(--sdds-dropdown-border);overflow-x:hidden;overflow-y:auto;transform:scaleY(0);transform-origin:top;transition:transform 250ms ease}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar{width:4px;background-color:inherit}.sdds-dropdown .sdds-dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}.sdds-dropdown .sdds-dropdown-menu ::-webkit-scrollbar-button{height:0;width:0}.sdds-dropdown.sdds-dropdown-lg .sdds-dropdown-toggle{height:56px}.sdds-dropdown.sdds-dropdown-md .sdds-dropdown-toggle{height:48px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-toggle{height:40px}:host(.sdds-dropdown--open-upwards) .sdds-dropdown .sdds-dropdown-menu{top:auto;bottom:100%;box-shadow:0 -1px 3px 0 rgba(0, 0, 0, 0.1);transform-origin:bottom}:host(.sdds-dropdown--open-upwards[label-position=outside]) span.sdds-dropdown-menu{bottom:calc(100% - 24px)}:host([disabled=true]){cursor:not-allowed}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle{pointer-events:none;color:var(--sdds-dropdown-option-disabled-color);border:none;padding:0 16px}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-placeholder{color:var(--sdds-dropdown-placeholder)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle .sdds-dropdown-label-inside{color:var(--sdds-dropdown-label-inside)}:host([disabled=true]) .sdds-dropdown .sdds-dropdown-toggle:focus::before{content:none}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown .sdds-dropdown-toggle:focus::before{border-color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper{color:var(--sdds-negative)}:host(.sdds-dropdown--error) .sdds-dropdown-helper .sdds-dropdown-error-icon{display:flex}:host ::slotted(sdds-dropdown-option){display:flex;padding:var(--sdds-spacing-element-16);background-color:var(--sdds-dropdown-background);border-top:1px solid transparent;border-bottom:1px solid var(--sdds-dropdown-border);opacity:0;visibility:hidden;cursor:pointer;box-sizing:border-box;color:var(--sdds-dropdown-option-color)}:host ::slotted(sdds-dropdown-option:last-child){border-bottom-color:transparent;border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::slotted(sdds-dropdown-option:hover),:host ::slotted(sdds-dropdown-option:focus){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)){background-color:var(--sdds-dropdown-background-hover)}:host ::slotted(sdds-dropdown-option:hover:focus){outline:none}:host ::slotted(sdds-dropdown-option:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host ::slotted(sdds-dropdown-option.sdds-dropdown--selected),:host ::slotted(sdds-dropdown-option.selected),:host ::slotted(sdds-dropdown-option.active),:host ::slotted(sdds-dropdown-option:active){background-color:var(--sdds-dropdown-background-hover);border-top:1px solid var(--sdds-dropdown-border);border-bottom:1px solid var(--sdds-dropdown-border)}:host ::slotted(sdds-dropdown-option.sdds-option--no-result){cursor:not-allowed;pointer-events:none}:host ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),:host ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled){cursor:not-allowed;color:var(--sdds-dropdown-option-disabled-color);background-color:var(--sdds-dropdown-background-disabled)}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:first-child){border-radius:4px 4px 0 0}:host(.sdds-dropdown--open-upwards) ::slotted(sdds-dropdown-option:last-child){border-radius:0;border-bottom:1px solid var(--sdds-dropdown-border)}.sdds-option-label{margin:auto 0;display:flex;align-content:center;text-decoration:none;flex-grow:2}.sdds-option-checkmark{color:inherit;opacity:0;transition:opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);margin-left:var(--sdds-spacing-element-16)}.sdds-option-checkmark path{color:var(--sdds-dropdown-option-color)}:host([size=sm]) ::slotted(sdds-dropdown-option){padding:var(--sdds-spacing-element-12) var(--sdds-spacing-element-16)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle{box-shadow:0 -1px 3px -1px rgba(0, 0, 0, 0.1);border-bottom-left-radius:0;border-bottom-right-radius:0}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-toggle.is-filter::before{content:" ";position:absolute;z-index:2;bottom:0;left:0;width:100%;border-bottom:1px solid var(--sdds-blue-400)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-arrow{transform:rotate(180deg)}:host(.sdds-dropdown--open) .sdds-dropdown .sdds-dropdown-menu{transform:scaleY(1)}:host(.sdds-dropdown--open) ::slotted(sdds-dropdown-option){visibility:visible;opacity:1}:host(.selected) .sdds-option-checkmark{opacity:1}.sdds-dropdown-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-dropdown-label-inside);position:absolute;transition:transform 250ms ease, color 200ms ease;width:calc(100% - 63px);overflow:hidden;text-overflow:ellipsis;transform:translate(0, -10px);font-size:10px}.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside .sdds-dropdown-placeholder{display:block;padding-top:4px}.sdds-dropdown-lg .sdds-dropdown-label-inside{display:block;top:16px}.sdds-dropdown-md .sdds-dropdown-label-inside{display:block;top:12px}.sdds-dropdown.sdds-dropdown-sm .sdds-dropdown-label-inside{display:none}.sdds-dropdown-multiselect-result{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sdds-option-checkbox{margin-right:8px}.sdds-form-label{display:flex}';const a=class{constructor(s){d(this,s);this.dataOptions=[];this.filteredContent=[];this.searchTerm="";this.selectedOptionState=undefined;this.dropdownRef=undefined;this.modeVariant=null;this.placeholder="";this.label=undefined;this.defaultOption=undefined;this.selectedOption=undefined;this.disabled=false;this.size="lg";this.inline=false;this.labelPosition="no-label";this.state=false;this.helper="";this.data=undefined;this.selectedLabel="no-selected";this.selectedValue="no-selected"}componentWillLoad(){this.parseData(this.data);if(this.defaultOption){this.selectedOptionState=this.defaultOption}}parseData(d){if(d)this.dataOptions=JSON.parse(d);this.filteredContent=this.dataOptions}updateOptionsContent(d){this.searchTerm=d.detail;this.findData()}selectOptionHandler(d){this.selectedOptionState=d.detail.value;this.selectedLabel=d.detail.label;this.selectedValue=d.detail.value;setTimeout((()=>{this.filteredContent=this.dataOptions}),200)}findData(){const d=new RegExp(this.searchTerm,"gmi");this.filteredContent=this.dataOptions.filter((s=>{if(s.label){const o=s.label.toLowerCase();const e=o.match(d);if(e){return e}this.selectedOptionState=null;this.selectedLabel="no-result";this.selectedValue="no-result"}}))}setOptionsContent(){const d=this.filteredContent.map((d=>s("sdds-dropdown-option",{tabindex:"0",value:d.value,class:`${this.selectedOptionState===d.value?"selected":""}`},d.label)));if(d.length>0){return d}return s("sdds-dropdown-option",{tabindex:"-1",value:"no-result",class:"sdds-option--no-result"},"No result")}async resetOption(){var d;await((d=this.dropdownRef)===null||d===void 0?void 0:d.resetOption())}render(){return s(o,{"selected-value":this.selectedValue,"selected-text":this.selectedLabel,class:`\n      ${this.modeVariant?`sdds-mode-variant-${this.modeVariant}`:""}\n     `},s("sdds-dropdown",{ref:d=>this.dropdownRef=d,exportparts:"dropdown-filter-disabled",size:this.size,label:this.label,disabled:this.disabled,labelPosition:this.labelPosition,helper:this.helper,state:this.state,placeholder:this.placeholder,defaultOption:this.defaultOption,selectedOption:this.selectedOption,type:"filter",tabindex:this.disabled?"-1":null},this.setOptionsContent()))}static get watchers(){return{data:["parseData"]}}};a.style=e;export{a as sdds_dropdown_filter};
+//# sourceMappingURL=p-68e4c190.entry.js.map

package/dist/tegel/p-68e4c190.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","DropdownFilter","componentWillLoad","this","parseData","data","defaultOption","selectedOptionState","newValue","dataOptions","JSON","parse","filteredContent","updateOptionsContent","event","searchTerm","detail","findData","selectOptionHandler","value","selectedLabel","label","selectedValue","setTimeout","searchAsRegEx","RegExp","filter","option","listItem","toLowerCase","searchResultList","match","setOptionsContent","newList","map","obj","h","tabindex","class","length","async","_a","dropdownRef","resetOption","render","Host","modeVariant","ref","el","exportparts","size","disabled","labelPosition","helper","state","placeholder","selectedOption","type"],"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: var(--sdds-dropdown-label-outside);\n  --sdds-dropdown-label-outside-text-decoration: none;\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  /** 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('inputSearch')\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 selected-value={this.selectedValue} selected-text={this.selectedLabel} class={`\n      ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}\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        >\n          {this.setOptionsContent()}\n        </sdds-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,iy2B,MCOPC,EAAc,M,0CACF,G,qBAEI,G,gBAEL,G,+EAOyB,K,iBAGjB,G,8FAYF,M,UAGsC,K,YAGxC,M,mBAGsB,W,WAGvB,M,YAGA,G,uCAOQ,c,mBAEA,a,CAEjCC,oBACEC,KAAKC,UAAUD,KAAKE,MAEpB,GAAIF,KAAKG,cAAe,CACtBH,KAAKI,oBAAsBJ,KAAKG,a,EAKpCF,UAAUI,GACR,GAAIA,EAAUL,KAAKM,YAAcC,KAAKC,MAAMH,GAC5CL,KAAKS,gBAAkBT,KAAKM,W,CAI9BI,qBAAqBC,GACnBX,KAAKY,WAAaD,EAAME,OACxBb,KAAKc,U,CAIPC,oBAAoBJ,GAClBX,KAAKI,oBAAsBO,EAAME,OAAOG,MACxChB,KAAKiB,cAAgBN,EAAME,OAAOK,MAClClB,KAAKmB,cAAgBR,EAAME,OAAOG,MAIlCI,YAAW,KACTpB,KAAKS,gBAAkBT,KAAKM,WAAW,GACtC,I,CAGLQ,WACE,MAAMO,EAAgB,IAAIC,OAAOtB,KAAKY,WAAY,OAClDZ,KAAKS,gBAAkBT,KAAKM,YAAYiB,QAAQC,IAC9C,GAAIA,EAAON,MAAO,CAChB,MAAMO,EAAWD,EAAON,MAAMQ,cAC9B,MAAMC,EAAmBF,EAASG,MAAMP,GACxC,GAAIM,EAAkB,CACpB,OAAOA,C,CAET3B,KAAKI,oBAAsB,KAC3BJ,KAAKiB,cAAgB,YACrBjB,KAAKmB,cAAgB,W,KAK3BU,oBACE,MAAMC,EAAU9B,KAAKS,gBAAgBsB,KAAKC,GACxCC,EAAA,wBACEC,SAAS,IACTlB,MAAOgB,EAAIhB,MACXmB,MAAO,GAAGnC,KAAKI,sBAAwB4B,EAAIhB,MAAQ,WAAa,MAE/DgB,EAAId,SAGT,GAAIY,EAAQM,OAAS,EAAG,CACtB,OAAON,C,CAET,OACEG,EAAA,wBAAsBC,SAAS,KAAKlB,MAAM,YAAYmB,MAAM,0BAAwB,Y,CAO9EE,oB,aACFC,EAAAtC,KAAKuC,eAAW,MAAAD,SAAA,SAAAA,EAAEE,c,CAG1BC,SACE,OACER,EAACS,EAAI,kBAAiB1C,KAAKmB,cAAa,gBAAiBnB,KAAKiB,cAAekB,MAAO,WAClFnC,KAAK2C,YAAc,qBAAqB3C,KAAK2C,cAAgB,aAE7DV,EAAA,iBACEW,IAAMC,GAAQ7C,KAAKuC,YAAcM,EACjCC,YAAY,2BACZC,KAAM/C,KAAK+C,KACX7B,MAAOlB,KAAKkB,MACZ8B,SAAUhD,KAAKgD,SACfC,cAAejD,KAAKiD,cACpBC,OAAQlD,KAAKkD,OACbC,MAAOnD,KAAKmD,MACZC,YAAapD,KAAKoD,YAClBjD,cAAeH,KAAKG,cACpBkD,eAAgBrD,KAAKqD,eACrBC,KAAK,SACLpB,SAAUlC,KAAKgD,SAAW,KAAO,MAEhChD,KAAK6B,qB"}

package/dist/tegel/{p-f9d14b96.entry.js → p-750b7e5f.entry.js}

@@ -1,2 +1,2 @@
-import{r as o,h as e}from"./p-1b74896d.js";const n="a{cursor:pointer;outline:none;color:var(--sdds-link)}a:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}a:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}a:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}a:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}a.disabled{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}a.no-underline{text-decoration:none}a.no-underline:hover{text-decoration:none}";const s=class{constructor(e){o(this,e);this.href=undefined;this.target="_self";this.disabled=false;this.underline=true;this.rel="noopener"}render(){return e("a",{class:`\n        ${this.disabled?"disabled":""}\n        ${this.underline?"":"no-underline"}\n        \n        `,href:this.href,target:this.target,rel:this.rel},e("slot",null))}};s.style=n;export{s as sdds_link};
-//# sourceMappingURL=p-f9d14b96.entry.js.map
+import{r as o,h as e}from"./p-387e1798.js";const n="a{cursor:pointer;outline:none;color:var(--sdds-link)}a:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}a:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}a:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}a:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}a.disabled{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}a.no-underline{text-decoration:none}a.no-underline:hover{text-decoration:none}";const s=class{constructor(e){o(this,e);this.href=undefined;this.target="_self";this.disabled=false;this.underline=true;this.rel="noopener"}render(){return e("a",{class:`\n        ${this.disabled?"disabled":""}\n        ${this.underline?"":"no-underline"}\n        \n        `,href:this.href,target:this.target,rel:this.rel},e("slot",null))}};s.style=n;export{s as sdds_link};
+//# sourceMappingURL=p-750b7e5f.entry.js.map

package/dist/tegel/{p-94c6ef69.entry.js → p-7991d22f.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as i,H as o,g as t}from"./p-1b74896d.js";import{c as e}from"./p-ec26fc38.js";const d=":host{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--sdds-popover-menu-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;display:none;z-index:800}:host *{box-sizing:border-box}:host(.sdds-popover-menu-show){opacity:1;display:block}";const n=class{constructor(i){s(this,i);this.selector="";this.referenceEl=undefined;this.show=false;this.placement="auto";this.offsetSkidding=0;this.offsetDistance=8;this.renderedShowValue=false;this.popperInstance=undefined;this.target=undefined}handleOutsideClick(){if(this.show){this.show=false}}componentDidLoad(){var s;this.target=(s=this.referenceEl)!==null&&s!==void 0?s:document.querySelector(this.selector);this.renderedShowValue=this.show;this.popperInstance=e(this.target,this.popoverMenuElement,{strategy:"fixed",placement:this.placement,modifiers:[{name:"offset",options:{offset:[this.offsetSkidding,this.offsetDistance]}}]});const i=()=>{this.show=true};const o=()=>{this.show=false};this.target.addEventListener("mousedown",(s=>{s.stopPropagation();if(this.show){o()}else{i()}}));this.popoverMenuElement.addEventListener("mousemove",(s=>{s.stopPropagation()}));this.popoverMenuElement.addEventListener("mousedown",(s=>{s.stopPropagation()}))}componentDidRender(){if(this.show&&!this.renderedShowValue){this.popperInstance.update()}this.renderedShowValue=this.show}disconnectedCallback(){var s;(s=this.popperInstance)===null||s===void 0?void 0:s.destroy()}render(){return i(o,{class:`sdds-popover-menu ${this.show?"sdds-popover-menu-show":""}`},i("slot",null))}get popoverMenuElement(){return t(this)}};n.style=d;export{n as sdds_popover_menu};
-//# sourceMappingURL=p-94c6ef69.entry.js.map
+import{r as s,h as i,H as o,g as t}from"./p-387e1798.js";import{c as e}from"./p-ec26fc38.js";const d=":host{box-sizing:border-box;overflow:hidden;width:160px;background-color:var(--sdds-popover-menu-background);padding:16px;box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;display:none;z-index:800}:host *{box-sizing:border-box}:host(.sdds-popover-menu-show){opacity:1;display:block}";const n=class{constructor(i){s(this,i);this.selector="";this.referenceEl=undefined;this.show=false;this.placement="auto";this.offsetSkidding=0;this.offsetDistance=8;this.renderedShowValue=false;this.popperInstance=undefined;this.target=undefined}handleOutsideClick(){if(this.show){this.show=false}}componentDidLoad(){var s;this.target=(s=this.referenceEl)!==null&&s!==void 0?s:document.querySelector(this.selector);this.renderedShowValue=this.show;this.popperInstance=e(this.target,this.popoverMenuElement,{strategy:"fixed",placement:this.placement,modifiers:[{name:"offset",options:{offset:[this.offsetSkidding,this.offsetDistance]}}]});const i=()=>{this.show=true};const o=()=>{this.show=false};this.target.addEventListener("mousedown",(s=>{s.stopPropagation();if(this.show){o()}else{i()}}));this.popoverMenuElement.addEventListener("mousemove",(s=>{s.stopPropagation()}));this.popoverMenuElement.addEventListener("mousedown",(s=>{s.stopPropagation()}))}componentDidRender(){if(this.show&&!this.renderedShowValue){this.popperInstance.update()}this.renderedShowValue=this.show}disconnectedCallback(){var s;(s=this.popperInstance)===null||s===void 0?void 0:s.destroy()}render(){return i(o,{class:`sdds-popover-menu ${this.show?"sdds-popover-menu-show":""}`},i("slot",null))}get popoverMenuElement(){return t(this)}};n.style=d;export{n as sdds_popover_menu};
+//# sourceMappingURL=p-7991d22f.entry.js.map

package/dist/tegel/p-7f10356d.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as i,g as e}from"./p-387e1798.js";const o=":host [role=list]{display:flex;justify-content:space-evenly}:host [role=list].vertical{height:100%;flex-direction:column;justify-content:unset;gap:48px}:host [role=list].vertical.sm{gap:36px}";const l=class{constructor(s){t(this,s);this.direction="horizontal";this.labelPosition="below";this.size="lg";this.hideLabels=false;this.width=0}componentWillLoad(){this.host.children[0].classList.add("first");this.host.children[this.host.children.length-1].classList.add("last");if(this.direction==="vertical"){this.labelPosition="aside"}}componentDidLoad(){if(this.labelPosition==="below"){this.children=Array.from(this.host.children);this.children.forEach((t=>{if(t.offsetWidth>this.width){this.width=t.offsetWidth}}));this.children.forEach((t=>t.setWidth(this.width)))}}render(){return s(i,null,s("ol",{role:"list",class:`${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}`},s("slot",null)))}get host(){return e(this)}};l.style=o;export{l as sdds_stepper};
+//# sourceMappingURL=p-7f10356d.entry.js.map

package/dist/tegel/p-7f10356d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsStepperCss","SddsStepper","componentWillLoad","this","host","children","classList","add","length","direction","labelPosition","componentDidLoad","Array","from","forEach","item","offsetWidth","width","setWidth","render","h","Host","role","class","size"],"sources":["./src/components/stepper/sdds-stepper.scss?tag=sdds-stepper&encapsulation=shadow","./src/components/stepper/sdds-stepper.tsx"],"sourcesContent":[":host {\n  [role='list'] {\n    display: flex;\n    justify-content: space-evenly;\n\n    &.vertical {\n      height: 100%;\n      flex-direction: column;\n      justify-content: unset;\n      gap: 48px;\n    }\n\n    &.vertical.sm {\n      gap: 36px;\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-stepper',\n  styleUrl: 'sdds-stepper.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** The direction the children are layed out. */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** Text position, only available on direction:horizontal */\n  @Prop() labelPosition: 'aside' | 'below' = 'below';\n\n  /** Size of the component and it's children. */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Hides the label for the child components if true. */\n  @Prop() hideLabels: boolean = false;\n\n  @State() width: number = 0;\n\n  @Element() host: HostElement;\n\n  children: Array<HTMLSddsStepperItemElement>;\n\n  componentWillLoad() {\n    this.host.children[0].classList.add('first');\n    this.host.children[this.host.children.length - 1].classList.add('last');\n    if (this.direction === 'vertical') {\n      this.labelPosition = 'aside';\n    }\n  }\n\n  componentDidLoad() {\n    if (this.labelPosition === 'below') {\n      this.children = Array.from(this.host.children) as Array<HTMLSddsStepperItemElement>;\n      this.children.forEach((item) => {\n        if (item.offsetWidth > this.width) {\n          this.width = item.offsetWidth;\n        }\n      });\n      this.children.forEach((item) => item.setWidth(this.width));\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ol\n          role=\"list\"\n          class={`${this.direction} sdds-stepper-text-position-${this.labelPosition} ${this.size}`}\n        >\n          <slot></slot>\n        </ol>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,kM,MCQVC,EAAW,M,wCAEyB,a,mBAGJ,Q,UAGf,K,gBAGE,M,WAEL,C,CAMzBC,oBACEC,KAAKC,KAAKC,SAAS,GAAGC,UAAUC,IAAI,SACpCJ,KAAKC,KAAKC,SAASF,KAAKC,KAAKC,SAASG,OAAS,GAAGF,UAAUC,IAAI,QAChE,GAAIJ,KAAKM,YAAc,WAAY,CACjCN,KAAKO,cAAgB,O,EAIzBC,mBACE,GAAIR,KAAKO,gBAAkB,QAAS,CAClCP,KAAKE,SAAWO,MAAMC,KAAKV,KAAKC,KAAKC,UACrCF,KAAKE,SAASS,SAASC,IACrB,GAAIA,EAAKC,YAAcb,KAAKc,MAAO,CACjCd,KAAKc,MAAQF,EAAKC,W,KAGtBb,KAAKE,SAASS,SAASC,GAASA,EAAKG,SAASf,KAAKc,Q,EAIvDE,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,MACEE,KAAK,OACLC,MAAO,GAAGpB,KAAKM,wCAAwCN,KAAKO,iBAAiBP,KAAKqB,QAElFJ,EAAA,c"}

package/dist/tegel/p-7f22cee6.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as i,H as t,g as o}from"./p-387e1798.js";import{c as e}from"./p-ec26fc38.js";const n=":host{box-sizing:border-box;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){display:block}";const h=class{constructor(i){s(this,i);this.initialize=s=>{this.popperInstance=e(s,this.host,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[this.offsetSkidding,this.offsetDistance]}},...this.modifiers]});if(this.show===null){s.addEventListener("click",(s=>{s.stopPropagation();if(this.isShown){this.isShown=false}else{this.isShown=true}}))}};this.selector="";this.referenceEl=undefined;this.show=null;this.placement="auto";this.offsetSkidding=0;this.offsetDistance=8;this.modifiers=[];this.renderedShowValue=false;this.popperInstance=undefined;this.target=undefined;this.isShown=false}onShowChange(s){this.isShown=s}onReferenceElChange(s,i){var t;if(s!==i){(t=this.popperInstance)===null||t===void 0?void 0:t.destroy();if(s){this.initialize(s)}}}onAnyClick(s){if(this.isShown&&this.show===null){const i=!s.composedPath().includes(this.host);if(i){this.isShown=false}}}connectedCallback(){if(this.show!==null){this.isShown=this.show}}componentDidLoad(){var s;if(this.selector||this.referenceEl){const i=(s=this.referenceEl)!==null&&s!==void 0?s:document.querySelector(this.selector);if(i){this.initialize(i)}else{console.error(`Could not initialize popover-canvas: element with selector '${this.selector}' not found.`)}}}componentDidRender(){if(this.isShown&&!this.renderedShowValue){this.popperInstance.update()}this.renderedShowValue=this.isShown}disconnectedCallback(){var s;(s=this.popperInstance)===null||s===void 0?void 0:s.destroy()}render(){return i(t,{class:`sdds-popover-canvas ${this.isShown?"sdds-popover-canvas-show":""}`},i("slot",null))}get host(){return o(this)}static get watchers(){return{show:["onShowChange"],referenceEl:["onReferenceElChange"]}}};h.style=n;export{h as sdds_popover_canvas};
+//# sourceMappingURL=p-7f22cee6.entry.js.map

package/dist/tegel/p-7f22cee6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["popoverCanvasCss","PopoverCanvas","this","initialize","referenceEl","popperInstance","createPopper","host","placement","modifiers","name","options","offset","offsetSkidding","offsetDistance","show","addEventListener","event","stopPropagation","isShown","onShowChange","newValue","onReferenceElChange","oldValue","_a","destroy","onAnyClick","isClickOutside","composedPath","includes","connectedCallback","componentDidLoad","selector","document","querySelector","console","error","componentDidRender","renderedShowValue","update","disconnectedCallback","render","h","Host","class"],"sources":["./src/components/popover-canvas/popover-canvas.scss?tag=sdds-popover-canvas&encapsulation=shadow","./src/components/popover-canvas/popover-canvas.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  color: var(--sdds-popover-canvas-color);\n  background-color: var(--sdds-popover-canvas-background);\n  box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n  border-radius: 4px;\n  z-index: z(tooltip);\n  display: none;\n}\n\n:host(.sdds-popover-canvas-show) {\n  display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() host!: HTMLSddsPopoverCanvasElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls wether the popover is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside.\n   */\n  @Prop() show: boolean = null;\n\n  /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */\n  @Prop() modifiers: Object[] = [];\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @State() isShown: boolean = false;\n\n  @Watch('show')\n  onShowChange(newValue: boolean) {\n    this.isShown = newValue;\n  }\n\n  @Watch('referenceEl')\n  onReferenceElChange(newValue: HTMLElement, oldValue: HTMLElement) {\n    if (newValue !== oldValue) {\n      this.popperInstance?.destroy();\n\n      if (newValue) {\n        this.initialize(newValue);\n      }\n    }\n  }\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    if (this.isShown && this.show === null) {\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.isShown = false;\n      }\n    }\n  }\n\n  initialize = (referenceEl) => {\n    this.popperInstance = createPopper(referenceEl, this.host, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n        ...this.modifiers,\n      ],\n    });\n\n    if (this.show === null) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.isShown = false;\n        } else {\n          this.isShown = true;\n        }\n      });\n    }\n  };\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n\n      if (referenceEl) {\n        this.initialize(referenceEl);\n      } else {\n        console.error(\n          `Could not initialize popover-canvas: element with selector '${this.selector}' not found.`,\n        );\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (this.isShown && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.isShown;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,6T,MCSZC,EAAa,M,yBA6DxBC,KAAAC,WAAcC,IACZF,KAAKG,eAAiBC,EAAaF,EAAaF,KAAKK,KAAM,CACzDC,UAAWN,KAAKM,UAChBC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAACV,KAAKW,eAAgBX,KAAKY,qBAGpCZ,KAAKO,aAIZ,GAAIP,KAAKa,OAAS,KAAM,CACtBX,EAAYY,iBAAiB,SAAUC,IACrCA,EAAMC,kBACN,GAAIhB,KAAKiB,QAAS,CAChBjB,KAAKiB,QAAU,K,KACV,CACLjB,KAAKiB,QAAU,I,qBA7EI,G,qCAQH,K,eAGO,O,oBAGE,E,oBAGA,E,eAGH,G,uBAEQ,M,iEAMV,K,CAG5BC,aAAaC,GACXnB,KAAKiB,QAAUE,C,CAIjBC,oBAAoBD,EAAuBE,G,MACzC,GAAIF,IAAaE,EAAU,EACzBC,EAAAtB,KAAKG,kBAAc,MAAAmB,SAAA,SAAAA,EAAEC,UAErB,GAAIJ,EAAU,CACZnB,KAAKC,WAAWkB,E,GAMtBK,WAAWT,GACT,GAAIf,KAAKiB,SAAWjB,KAAKa,OAAS,KAAM,CAEtC,MAAMY,GAAkBV,EAAMW,eAAeC,SAAS3B,KAAKK,MAC3D,GAAIoB,EAAgB,CAClBzB,KAAKiB,QAAU,K,GA+BrBW,oBACE,GAAI5B,KAAKa,OAAS,KAAM,CACtBb,KAAKiB,QAAUjB,KAAKa,I,EAIxBgB,mB,MACE,GAAI7B,KAAK8B,UAAY9B,KAAKE,YAAa,CACrC,MAAMA,GAAcoB,EAAAtB,KAAKE,eAAW,MAAAoB,SAAA,EAAAA,EAAIS,SAASC,cAAchC,KAAK8B,UAEpE,GAAI5B,EAAa,CACfF,KAAKC,WAAWC,E,KACX,CACL+B,QAAQC,MACN,+DAA+DlC,KAAK8B,uB,GAM5EK,qBACE,GAAInC,KAAKiB,UAAYjB,KAAKoC,kBAAmB,CAG3CpC,KAAKG,eAAekC,Q,CAEtBrC,KAAKoC,kBAAoBpC,KAAKiB,O,CAGhCqB,uB,OACEhB,EAAAtB,KAAKG,kBAAc,MAAAmB,SAAA,SAAAA,EAAEC,S,CAGvBgB,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,uBAAuB1C,KAAKiB,QAAU,2BAA6B,MAC9EuB,EAAA,a"}

package/dist/tegel/p-88ba44a7.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as r}from"./p-387e1798.js";const t='@charset "UTF-8";[role=listitem]{display:flex;align-items:center;color:var(--sdds-breadcrumb-color)}[role=listitem] a{color:var(--sdds-breadcrumb-color);text-decoration:none}[role=listitem]:hover{cursor:pointer}[role=listitem]:hover a{color:var(--sdds-breadcrumb-color-hover);text-decoration:underline}[role=listitem].disabled{pointer-events:none}[role=listitem].disabled a,[role=listitem].current a,[role=listitem] [aria-current=page] a{cursor:default;color:var(--sdds-breadcrumb-color-disabled)}[role=listitem].disabled:hover a,[role=listitem].current:hover a,[role=listitem] [aria-current=page]:hover a{color:var(--sdds-breadcrumb-color-disabled);text-decoration:none}[role=listitem] ::slotted(*)::after{content:"›";color:var(--sdds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}:host(.last) ::slotted(*)::after{display:none}';const o=class{constructor(r){e(this,r);this.current=false;this.href=undefined;this.target="_self";this.rel="noopener";this.disabled=false}render(){return r("div",{role:"listitem",class:`${this.current?"current":""} \n      ${this.disabled?"disabled":""}`},r("a",{href:!this.disabled?this.href:null,target:this.target,rel:this.rel},r("slot",{name:"label"})))}};o.style=t;export{o as sdds_breadcrumb_link};
+//# sourceMappingURL=p-88ba44a7.entry.js.map

package/dist/tegel/p-88ba44a7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsBreadcrumbLinkCss","SddsBreadcrumbLink","render","h","role","class","this","current","disabled","href","target","rel","name"],"sources":["./src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.scss?tag=sdds-breadcrumb-link&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n\n[role='listitem'] {\n  display: flex;\n  align-items: center;\n  color: var(--sdds-breadcrumb-color);\n\n  a {\n    color: var(--sdds-breadcrumb-color);\n    text-decoration: none;\n  }\n\n  &:hover {\n    a {\n      color: var(--sdds-breadcrumb-color-hover);\n      text-decoration: underline;\n    }\n\n    cursor: pointer;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  &.disabled,\n  &.current,\n  [aria-current='page'] {\n    a {\n      cursor: default;\n      color: var(--sdds-breadcrumb-color-disabled);\n    }\n\n    &:hover {\n      a {\n        color: var(--sdds-breadcrumb-color-disabled);\n        text-decoration: none;\n      }\n    }\n  }\n\n  ::slotted(*)::after {\n    content: '\\203A';\n    color: var(--sdds-breadcrumb-separator-color);\n    margin-right: 4px;\n    margin-left: 4px;\n    display: inline-block;\n    width: 4px;\n    height: 8px;\n  }\n}\n\n:host(.last) {\n  ::slotted(*)::after {\n    display: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-link',\n  styleUrl: 'sdds-breadcrumb-link.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbLink {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <div\n        role=\"listitem\"\n        class={`${this.current ? 'current' : ''} \n      ${this.disabled ? 'disabled' : ''}`}\n      >\n        <a href={!this.disabled ? this.href : null} target={this.target} rel={this.rel}>\n          <slot name=\"label\"></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAwB,w3B,MCOjBC,EAAkB,M,sCAEF,M,gCAM+B,Q,SAGpC,W,cAGM,K,CAE5BC,SACE,OACEC,EAAA,OACEC,KAAK,WACLC,MAAO,GAAGC,KAAKC,QAAU,UAAY,cACrCD,KAAKE,SAAW,WAAa,MAE7BL,EAAA,KAAGM,MAAOH,KAAKE,SAAWF,KAAKG,KAAO,KAAMC,OAAQJ,KAAKI,OAAQC,IAAKL,KAAKK,KACzER,EAAA,QAAMS,KAAK,W"}

package/dist/tegel/p-8b807df5.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,H as s}from"./p-387e1798.js";const e=':host{box-sizing:border-box;display:block;position:relative;z-index:200}:host *{box-sizing:border-box}:host button{all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-tab-color);padding:8px 4px;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0}:host button .label{margin:12px 0}:host button:hover{cursor:pointer}:host button:hover::after{width:100%}:host button:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host button::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host button.selected{color:var(--sdds-inline-tabs-tab-color-selected)}:host button.selected::after{width:100%;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}:host button.disabled{color:var(--sdds-inline-tabs-tab-color-disabled);pointer-events:none}:host button.disabled .label{opacity:var(--sdds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}';const i=class{constructor(o){t(this,o);this.disabled=false;this.selected=false}render(){return o(s,{role:"listitem"},o("button",{class:`${this.selected?"selected":""}\n        ${this.disabled?"disabled":""}`,disabled:this.disabled},o("div",{class:"label"},o("slot",{name:"label"}))))}};i.style=e;export{i as sdds_inline_tabs_button};
+//# sourceMappingURL=p-8b807df5.entry.js.map

package/dist/tegel/p-8b807df5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsInlineTabsButtonCss","SddsInlineTabsButton","render","h","Host","role","class","this","selected","disabled","name"],"sources":["./src/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.scss?tag=sdds-inline-tabs-button&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.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  display: block;\n  position: relative;\n  z-index: z(tab);\n\n  button {\n    all: unset;\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-inline-tabs-tab-color);\n    padding: 8px 4px;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out 0s;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n\n    .label {\n      margin: 12px 0;\n    }\n\n    &:hover {\n      cursor: pointer;\n\n      &::after {\n        width: 100%;\n      }\n    }\n\n    &:focus-visible {\n      .label {\n        @include sdds-focus-state;\n      }\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0%;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-inline-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out 0s;\n      z-index: 1;\n    }\n\n    &.selected {\n      color: var(--sdds-inline-tabs-tab-color-selected);\n\n      &::after {\n        width: 100%;\n        background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n      }\n    }\n\n    &.disabled {\n      color: var(--sdds-inline-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      .label {\n        opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);\n      }\n    }\n  }\n}\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-button',\n  styleUrl: 'sdds-inline-tabs-button.scss',\n  shadow: true,\n})\nexport class SddsInlineTabsButton {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class={`${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}`}\n          disabled={this.disabled}\n        >\n          <div class=\"label\">\n            <slot name=\"label\"></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA0B,6wC,MCOnBC,EAAoB,M,uCAEH,M,cAGA,K,CAE5BC,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,UACEG,MAAO,GAAGC,KAAKC,SAAW,WAAa,eACvCD,KAAKE,SAAW,WAAa,KAC7BA,SAAUF,KAAKE,UAEfN,EAAA,OAAKG,MAAM,SACTH,EAAA,QAAMO,KAAK,Y"}

package/dist/tegel/{p-c46e2117.entry.js → p-a2cbef2c.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as e,H as a}from"./p-1b74896d.js";const r=":host .message-wrapper{display:flex;padding:16px;background-color:var(--sdds-message-background);border-radius:4px}:host .message-wrapper.information{border-left:4px solid var(--sdds-information)}:host .message-wrapper.information sdds-icon{color:var(--sdds-information)}:host .message-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .message-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .message-wrapper.error{background-color:var(--sdds-message-type-error-background);border-left:4px solid var(--sdds-negative)}:host .message-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .message-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .message-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .message-wrapper.message-minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .message-wrapper.message-minimal .message-header{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .message-wrapper.message-minimal sdds-icon{padding-right:8px}:host sdds-icon{padding-right:16px}:host .message-content{display:flex;flex-direction:column;gap:4px;color:var(--sdds-message-color);padding:2px 0}:host .message-content .message-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host .message-content .message-extended-message{color:var(--sdds-message-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .sdds-mode-variant-primary{--sdds-message-background:var(--sdds-message-background-primary)}:host .sdds-mode-variant-secondary{--sdds-message-background:var(--sdds-message-background-secondary)}";const d=class{constructor(e){s(this,e);this.getIconName=()=>{switch(this.type){case"information":return"info";case"error":return"error";case"warning":return"warning";case"success":return"tick";default:return"info"}};this.header=undefined;this.modeVariant=null;this.type="information";this.noIcon=false;this.minimal=false}render(){return e(a,null,e("div",{class:`\n        message-wrapper ${this.type}\n        ${this.minimal?"message-minimal":""}\n        ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},!this.noIcon&&e("sdds-icon",{name:this.getIconName(),size:"20px"}),e("div",{class:`message-content`},this.header&&e("div",{class:"message-header"},this.header),!this.minimal&&e("div",{class:"message-extended-message"},e("slot",null)))))}};d.style=r;export{d as sdds_message};
-//# sourceMappingURL=p-c46e2117.entry.js.map
+import{r as s,h as e,H as a}from"./p-387e1798.js";const r=":host .message-wrapper{display:flex;padding:16px;background-color:var(--sdds-message-background);border-radius:4px}:host .message-wrapper.information{border-left:4px solid var(--sdds-information)}:host .message-wrapper.information sdds-icon{color:var(--sdds-information)}:host .message-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .message-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .message-wrapper.error{background-color:var(--sdds-message-type-error-background);border-left:4px solid var(--sdds-negative)}:host .message-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .message-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .message-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .message-wrapper.message-minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .message-wrapper.message-minimal .message-header{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .message-wrapper.message-minimal sdds-icon{padding-right:8px}:host sdds-icon{padding-right:16px}:host .message-content{display:flex;flex-direction:column;gap:4px;color:var(--sdds-message-color);padding:2px 0}:host .message-content .message-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host .message-content .message-extended-message{color:var(--sdds-message-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .sdds-mode-variant-primary{--sdds-message-background:var(--sdds-message-background-primary)}:host .sdds-mode-variant-secondary{--sdds-message-background:var(--sdds-message-background-secondary)}";const d=class{constructor(e){s(this,e);this.getIconName=()=>{switch(this.type){case"information":return"info";case"error":return"error";case"warning":return"warning";case"success":return"tick";default:return"info"}};this.header=undefined;this.modeVariant=null;this.type="information";this.noIcon=false;this.minimal=false}render(){return e(a,null,e("div",{class:`\n        message-wrapper ${this.type}\n        ${this.minimal?"message-minimal":""}\n        ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},!this.noIcon&&e("sdds-icon",{name:this.getIconName(),size:"20px"}),e("div",{class:`message-content`},this.header&&e("div",{class:"message-header"},this.header),!this.minimal&&e("div",{class:"message-extended-message"},e("slot",null)))))}};d.style=r;export{d as sdds_message};
+//# sourceMappingURL=p-a2cbef2c.entry.js.map

package/dist/tegel/p-a5cd0006.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as t,H as a,g as s}from"./p-387e1798.js";const i=":host{display:block}:host .footer-top{background-color:var(--sdds-footer-top-background);padding:40px}:host .footer-top ::slotted(*){display:grid;grid-template-columns:1fr 1fr 1fr 1fr;row-gap:40px;width:100%}:host .footer-main{background-color:var(--sdds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host .footer-bottom-right ::slotted(*),:host .footer-bottom-left ::slotted(*){display:flex;column-gap:24px}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--sdds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--sdds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host .footer-top{padding:0}:host .footer-top ::slotted(*){display:block;width:100%}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host .footer-bottom-left ::slotted(*){flex-direction:column;gap:8px}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";const r=class{constructor(t){o(this,t);this.modeVariant=null;this.hasTopPart=undefined}connectedCallback(){const o=Array.from(this.host.children);this.hasTopPart=o.some((o=>o.slot==="top"))}render(){return t(a,{class:`${this.modeVariant?`sdds-mode-variant-${this.modeVariant}`:""}`},t("footer",null,this.hasTopPart&&t("div",{class:"footer-top"},t("slot",{name:"top"})),t("div",{class:"footer-main"},t("div",{class:"footer-main-top"},t("div",{class:"footer-bottom-left"},t("slot",{name:"main-left"})),t("div",{class:"footer-bottom-right"},t("slot",{name:"main-right"}))),t("div",{class:"footer-main-bottom"},t("small",{class:"copyright"},"Copyright © ",(new Date).getFullYear()," Scania"),t("div",{class:"brand"},t("p",null,"Scania"))))))}get host(){return s(this)}};r.style=i;export{r as sdds_footer};
+//# sourceMappingURL=p-a5cd0006.entry.js.map

package/dist/tegel/p-a5cd0006.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsFooterCss","SddsFooter","connectedCallback","children","Array","from","this","host","hasTopPart","some","element","slot","render","h","Host","class","modeVariant","name","Date","getFullYear"],"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-xs: 0;\n  $grid-sm: 608px;\n  $grid-md: 800px;\n  $grid-lg: 992px;\n  $grid-xlg: 1184px;\n  $grid-xxlg: 1376px;\n  $grid-max: 1584px;\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  /** Mode variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() hasTopPart: boolean;\n\n  @Element() host: HostElement;\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasTopPart = 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"],"mappings":"yDAAA,MAAMA,EAAgB,ihD,MCQTC,EAAU,M,0CAE0B,K,0BAM/CC,oBACE,MAAMC,EAAWC,MAAMC,KAAKC,KAAKC,KAAKJ,UACtCG,KAAKE,WAAaL,EAASM,MAAMC,GAAYA,EAAQC,OAAS,O,CAGhEC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAGT,KAAKU,YAAc,qBAAqBV,KAAKU,cAAgB,MAC3EH,EAAA,cACGP,KAAKE,YACJK,EAAA,OAAKE,MAAM,cACTF,EAAA,QAAMI,KAAK,SAGfJ,EAAA,OAAKE,MAAM,eACTF,EAAA,OAAKE,MAAM,mBACTF,EAAA,OAAKE,MAAM,sBACTF,EAAA,QAAMI,KAAK,eAEbJ,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMI,KAAK,iBAGfJ,EAAA,OAAKE,MAAM,sBACTF,EAAA,SAAOE,MAAM,aAAW,gBAAmB,IAAIG,MAAOC,cAAa,WACnEN,EAAA,OAAKE,MAAM,SACTF,EAAA,uB"}

package/dist/tegel/{p-35146934.entry.js → p-ad3439b8.entry.js}

@@ -1,2 +1,2 @@
-import{r as d,c as s,h as o,g as t}from"./p-1b74896d.js";const r='.sc-sdds-radio-button:root,.sdds-mode-light.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-grey-958);--sdds-radio-button-interaction-01:var(--sdds-blue-800);--sdds-radio-button-interaction-02:var(--sdds-white);--sdds-radio-button-background-hover:var(--sdds-blue-800);--sdds-radio-button-background-focus:var(--sdds-blue-800);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-before:var(--sdds-grey-700)}.sdds-mode-dark.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-white);--sdds-radio-button-interaction-01:var(--sdds-white);--sdds-radio-button-interaction-02:var(--sdds-grey-958);--sdds-radio-button-background-hover:var(--sdds-white);--sdds-radio-button-background-focus:var(--sdds-white);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700)}.sdds-radio-button.sc-sdds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-radio-button-color)}.sdds-radio-button.sc-sdds-radio-button *.sc-sdds-radio-button{box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button+label.sc-sdds-radio-button{padding:var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4) var(--sdds-spacing-element-4);cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{content:"";position:absolute;border-radius:50%;box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before{width:24px;height:24px;left:0;top:0}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{border:1px solid var(--sdds-radio-button-interaction-01);background-color:var(--sdds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:hover::before{background-color:var(--sdds-radio-button-background-hover);opacity:0.12}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:focus::before{background-color:var(--sdds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button{cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button::after{border-color:var(--sdds-radio-button-border-color-disabled-after);background-color:var(--sdds-radio-button-interaction-02)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled+label.sc-sdds-radio-button,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button+label.sc-sdds-radio-button{color:var(--sdds-radio-button-disabled);cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button:hover::before{display:none;opacity:1}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked::after{border:4px solid var(--sdds-radio-button-interaction-01)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--sdds-radio-button-color-disabled-before);box-sizing:content-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::after{border:4px solid var(--sdds-radio-button-interaction-02);background-color:var(--sdds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}';const i=class{constructor(o){d(this,o);this.sddsChange=s(this,"sddsChange",7);this.name=undefined;this.value=undefined;this.radioId=crypto.randomUUID();this.checked=false;this.required=false;this.disabled=false}render(){return o("div",{class:"sdds-radio-button"},o("input",{class:"sdds-form-input",type:"radio",name:this.name,id:this.radioId,value:this.value,checked:this.checked,"aria-checked":this.checked,"aria-describedby":this.host.getAttribute("aria-describedby"),required:this.required,disabled:this.disabled,onChange:()=>{this.sddsChange.emit({radioId:this.radioId,value:this.value})}}),o("label",{htmlFor:this.radioId},o("slot",null)))}get host(){return t(this)}};i.style=r;export{i as sdds_radio_button};
-//# sourceMappingURL=p-35146934.entry.js.map
+import{r as d,c as s,h as o,g as t}from"./p-387e1798.js";const r='.sc-sdds-radio-button:root,.sdds-mode-light.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-grey-958);--sdds-radio-button-interaction-01:var(--sdds-blue-800);--sdds-radio-button-interaction-02:var(--sdds-white);--sdds-radio-button-background-hover:var(--sdds-blue-800);--sdds-radio-button-background-focus:var(--sdds-blue-800);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-before:var(--sdds-grey-700)}.sdds-mode-dark.sc-sdds-radio-button{--sdds-radio-button-color:var(--sdds-white);--sdds-radio-button-interaction-01:var(--sdds-white);--sdds-radio-button-interaction-02:var(--sdds-grey-958);--sdds-radio-button-background-hover:var(--sdds-white);--sdds-radio-button-background-focus:var(--sdds-white);--sdds-radio-button-disabled:var(--sdds-grey-600);--sdds-radio-button-border-color-disabled-after:var(--sdds-grey-700);--sdds-radio-button-color-disabled-after:var(--sdds-grey-700)}.sdds-radio-button.sc-sdds-radio-button{box-sizing:border-box;display:flex;align-items:center;margin-left:-4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-radio-button-color)}.sdds-radio-button.sc-sdds-radio-button *.sc-sdds-radio-button{box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button{appearance:none;outline:none;margin:0;border:0;width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button+label.sc-sdds-radio-button{padding:var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4) var(--sdds-spacing-element-4);cursor:pointer}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{content:"";position:absolute;border-radius:50%;box-sizing:border-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::before{width:24px;height:24px;left:0;top:0}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button::after{border:1px solid var(--sdds-radio-button-interaction-01);background-color:var(--sdds-radio-button-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:hover::before{background-color:var(--sdds-radio-button-background-hover);opacity:0.12}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:focus::before{background-color:var(--sdds-radio-button-background-focus);opacity:0.24;animation:rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button{cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button::after{border-color:var(--sdds-radio-button-border-color-disabled-after);background-color:var(--sdds-radio-button-interaction-02)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled+label.sc-sdds-radio-button,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button+label.sc-sdds-radio-button{color:var(--sdds-radio-button-disabled);cursor:not-allowed}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].disabled.sc-sdds-radio-button:hover::before{display:none;opacity:1}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked::after{border:4px solid var(--sdds-radio-button-interaction-01)}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled:hover::before,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid var(--sdds-radio-button-color-disabled-before);box-sizing:content-box}.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked:disabled::after,.sdds-radio-button.sc-sdds-radio-button .sdds-form-input[type=radio].sc-sdds-radio-button:checked.disabled::after{border:4px solid var(--sdds-radio-button-interaction-02);background-color:var(--sdds-radio-button-color-disabled-after);left:5px;top:5px}@keyframes rb-focus{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:0.24}}';const i=class{constructor(o){d(this,o);this.sddsChange=s(this,"sddsChange",7);this.name=undefined;this.value=undefined;this.radioId=crypto.randomUUID();this.checked=false;this.required=false;this.disabled=false}render(){return o("div",{class:"sdds-radio-button"},o("input",{class:"sdds-form-input",type:"radio",name:this.name,id:this.radioId,value:this.value,checked:this.checked,"aria-checked":this.checked,required:this.required,disabled:this.disabled,onChange:()=>{this.sddsChange.emit({radioId:this.radioId,value:this.value})}}),o("label",{htmlFor:this.radioId},o("slot",{name:"label"})))}get host(){return t(this)}};i.style=r;export{i as sdds_radio_button};
+//# sourceMappingURL=p-ad3439b8.entry.js.map

package/dist/tegel/p-ad3439b8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["radioButtonComponentCss","RadioButton","crypto","randomUUID","render","h","class","type","name","this","id","radioId","value","checked","required","disabled","onChange","sddsChange","emit","htmlFor"],"sources":["./src/components/radio-button/radio-button-component.scss?tag=sdds-radio-button&encapsulation=scoped","./src/components/radio-button/radio-button.tsx"],"sourcesContent":["@import './radio-button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-radio-button {\n  @include sdds-box-sizing;\n\n  display: flex;\n  align-items: center;\n  margin-left: -4px;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-radio-button-color);\n\n  .sdds-form-input[type='radio'] {\n    appearance: none;\n    outline: none;\n    margin: 0;\n    border: 0;\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n    position: relative;\n    cursor: pointer;\n\n    + label {\n      padding: var(--sdds-spacing-element-4) 0 var(--sdds-spacing-element-4)\n        var(--sdds-spacing-element-4);\n      cursor: pointer;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      border-radius: 50%;\n      box-sizing: border-box;\n    }\n\n    &::before {\n      width: 24px;\n      height: 24px;\n      left: 0;\n      top: 0;\n    }\n\n    &::after {\n      border: 1px solid var(--sdds-radio-button-interaction-01);\n      background-color: var(--sdds-radio-button-interaction-02);\n      width: 16px;\n      height: 16px;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:hover {\n      &::before {\n        background-color: var(--sdds-radio-button-background-hover);\n        opacity: 0.12;\n      }\n    }\n\n    &:focus {\n      &::before {\n        background-color: var(--sdds-radio-button-background-focus);\n        opacity: 0.24;\n        animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      cursor: not-allowed;\n\n      &::after {\n        border-color: var(--sdds-radio-button-border-color-disabled-after);\n        background-color: var(--sdds-radio-button-interaction-02);\n      }\n\n      + label {\n        color: var(--sdds-radio-button-disabled);\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        &::before {\n          display: none;\n          opacity: 1;\n        }\n      }\n    }\n  }\n\n  .sdds-form-input[type='radio']:checked {\n    &::after {\n      border: 4px solid var(--sdds-radio-button-interaction-01);\n    }\n\n    &:disabled,\n    &.disabled {\n      &:hover::before,\n      &::before {\n        display: block;\n        width: 16px;\n        height: 16px;\n        left: 4px;\n        top: 4px;\n        border: 1px solid var(--sdds-radio-button-color-disabled-before);\n        box-sizing: content-box;\n      }\n\n      &::after {\n        border: 4px solid var(--sdds-radio-button-interaction-02);\n        background-color: var(--sdds-radio-button-color-disabled-after);\n        left: calc(4px + 1px);\n        top: calc(4px + 1px);\n      }\n    }\n  }\n\n  @keyframes rb-focus {\n    0% {\n      transform: scale(0);\n      opacity: 0;\n    }\n\n    100% {\n      transform: scale(1);\n      opacity: 0.24;\n    }\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n\n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n\n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input\n          class=\"sdds-form-input\"\n          type=\"radio\"\n          name={this.name}\n          id={this.radioId}\n          value={this.value}\n          checked={this.checked}\n          aria-checked={this.checked}\n          // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n          // aria-labelledby={this.ariaLabelledBy}\n          // aria-describedby={this.host.getAttribute('aria-describedby')}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={() => {\n            this.sddsChange.emit({\n              radioId: this.radioId,\n              value: this.value,\n            });\n          }}\n        />\n        <label htmlFor={this.radioId}>\n          <slot name=\"label\"></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAA0B,qmK,MCSnBC,EAAW,M,sHAgBIC,OAAOC,a,aAGW,M,cAGhB,M,cAGA,K,CAgB5BC,SACE,OACEC,EAAA,OAAKC,MAAM,qBACTD,EAAA,SACEC,MAAM,kBACNC,KAAK,QACLC,KAAMC,KAAKD,KACXE,GAAID,KAAKE,QACTC,MAAOH,KAAKG,MACZC,QAASJ,KAAKI,QAAO,eACPJ,KAAKI,QAInBC,SAAUL,KAAKK,SACfC,SAAUN,KAAKM,SACfC,SAAU,KACRP,KAAKQ,WAAWC,KAAK,CACnBP,QAASF,KAAKE,QACdC,MAAOH,KAAKG,OACZ,IAGNP,EAAA,SAAOc,QAASV,KAAKE,SACnBN,EAAA,QAAMG,KAAK,W"}

package/dist/tegel/p-ae631412.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as i,H as e,g as o}from"./p-387e1798.js";const l=':host{box-sizing:border-box;display:flex;background-color:var(--sdds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:" ";display:block;border-bottom:1px solid var(--sdds-inline-tabs-horizontal-divider-background);opacity:var(--sdds-inline-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:201}:host .scroll-left-button{left:0;z-index:201}:host .scroll-right-button,:host .scroll-left-button{color:var(--sdds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--sdds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--sdds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--sdds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--sdds-folder-tabs-scroll-btn-color)}';const r=class{constructor(i){t(this,i);this.sddsChange=s(this,"sddsChange",7);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.addResizeObserver=()=>{const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let i=0;const e=Array.from(this.host.children);e.forEach((t=>{const s=window.getComputedStyle(t);i+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)}));this.componentWidth=s;this.buttonsWidth=i;this.scrollWidth=i-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));t.observe(this.navWrapperElement)};this.modeVariant="primary";this.showLeftScroll=false;this.showRightScroll=false;this.selectedTab=undefined;this.buttonWidth=0}async selectTab(t){if(!this.children[t].disabled){this.children.forEach((t=>t.removeAttribute("selected")));this.children=this.children.map(((s,i)=>{if(i===t){s.setAttribute("selected","");this.selectedTab={tab:s.innerText,tabIndex:i}}return s}))}return{selectedTab:this.selectedTab.tab,selectedTabIndex:this.selectedTab.tabIndex}}handleSelectedTabChange(){this.host.setAttribute("selected-tab",this.selectedTab.tab);this.host.setAttribute("selected-tab-index",`${this.selectedTab.tabIndex}`);this.sddsChange.emit({selectedTab:this.selectedTab})}connectedCallback(){this.children=Array.from(this.host.children);this.children=this.children.map(((t,s)=>{t.addEventListener("click",(()=>{if(!t.disabled){this.children.forEach((t=>t.removeAttribute("selected")));t.setAttribute("selected","");this.selectedTab={tab:t.innerText,tabIndex:s}}}));if(t.selected){this.selectedTab={tab:t.innerText,tabIndex:s}}return t}));this.children[0].classList.add("first");this.children[this.children.length-1].classList.add("last")}componentDidLoad(){const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let i=0;const e=Array.from(this.host.children);e.forEach((t=>{const s=window.getComputedStyle(t);i+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight);t.classList.add("sdds-inline-tabs-fullbleed--tab")}));this.componentWidth=s;this.buttonsWidth=i;this.scrollWidth=i-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));t.observe(this.navWrapperElement)}componentWillRender(){if(!this.selectedTab){this.children=Array.from(this.host.children);this.children=this.children.map(((t,s)=>{if(t.selected){this.selectedTab={tab:t.innerText,tabIndex:s}}return t}))}}componentDidRender(){if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}this.addResizeObserver()}scrollRight(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t+95;this.evaluateScrollButtons()}scrollLeft(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t-10;this.evaluateScrollButtons()}evaluateScrollButtons(){const t=this.navWrapperElement.scrollLeft;if(t>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(t<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}render(){return i(e,{class:`${this.modeVariant?`sdds-mode-variant-${this.modeVariant}`:""}`},i("div",{role:"list",class:"wrapper",ref:t=>{this.navWrapperElement=t}},i("button",{class:`scroll-left-button ${this.showLeftScroll?"show":""}`,onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},i("sdds-icon",{name:"chevron_left",size:"20px"})),i("slot",null),i("button",{class:`scroll-right-button ${this.showRightScroll?"show":""}`,onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},i("sdds-icon",{name:"chevron_right",size:"20px"}))))}get host(){return o(this)}static get watchers(){return{selectedTab:["handleSelectedTabChange"]}}};r.style=l;export{r as sdds_inline_tabs};
+//# sourceMappingURL=p-ae631412.entry.js.map

package/dist/tegel/p-ae631412.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inlineTabsCss","InlineTabsFullbleed","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","addResizeObserver","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","async","tabIndex","disabled","element","removeAttribute","map","index","setAttribute","selectedTab","tab","innerText","selectedTabIndex","handleSelectedTabChange","sddsChange","emit","connectedCallback","item","addEventListener","selected","classList","add","length","componentDidLoad","componentWillRender","componentDidRender","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","role","ref","el","onClick","name","size"],"sources":["./src/components/tabs/inline-tabs/inline-tabs.scss?tag=sdds-inline-tabs&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: flex;\n  background-color: var(--sdds-inline-tabs-background);\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .scroll-right-button {\n    right: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-left-button {\n    left: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-right-button,\n  .scroll-left-button {\n    color: var(--sdds-folder-tabs-scroll-btn-color);\n    cursor: pointer;\n    border: 0;\n    width: 0;\n    background-color: var(--sdds-inline-tabs-scroll-btn-background);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n    position: sticky;\n\n    &.show {\n      min-width: 48px;\n      display: block;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    svg {\n      fill: var(--sdds-folder-tabs-scroll-btn-color);\n    }\n  }\n}\n","import { Component, Host, State, Element, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, Watch } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-inline-tabs',\n  styleUrl: 'inline-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = 'primary';\n\n  @Element() host: HostElement;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  @State() selectedTab: {\n    tab: string;\n    tabIndex: number;\n  };\n\n  @State() buttonWidth: number = 0; // current calculated width of the largest nav button\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<HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement>;\n\n  /** Selects a tab based on tabindex, will not select a disabled tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.removeAttribute('selected'));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setAttribute('selected', '');\n          this.selectedTab = {\n            tab: element.innerText,\n            tabIndex: index,\n          };\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTab: this.selectedTab.tab,\n      selectedTabIndex: this.selectedTab.tabIndex,\n    };\n  }\n\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTab: {\n      tab: string;\n      tabIndex: number;\n    };\n  }>;\n\n  @Watch('selectedTab')\n  handleSelectedTabChange() {\n    this.host.setAttribute('selected-tab', this.selectedTab.tab);\n    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);\n    this.sddsChange.emit({\n      selectedTab: this.selectedTab,\n    });\n  }\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<\n      HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement\n    >;\n    this.children = this.children.map((item, index) => {\n      item.addEventListener('click', () => {\n        if (!item.disabled) {\n          this.children.forEach((element) => element.removeAttribute('selected'));\n          item.setAttribute('selected', '');\n          this.selectedTab = {\n            tab: item.innerText,\n            tabIndex: index,\n          };\n        }\n      });\n      if (item.selected) {\n        this.selectedTab = {\n          tab: item.innerText,\n          tabIndex: index,\n        };\n      }\n      return item;\n    });\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad() {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n  }\n\n  componentWillRender() {\n    if (!this.selectedTab) {\n      this.children = Array.from(this.host.children) as Array<\n        HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement\n      >;\n      this.children = this.children.map((item, index) => {\n        if (item.selected) {\n          this.selectedTab = {\n            tab: item.innerText,\n            tabIndex: index,\n          };\n        }\n        return item;\n      });\n    }\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  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + 95;\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - 10;\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  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <div\n          role=\"list\"\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            onClick={() => this.scrollLeft()}\n            disabled={!this.showLeftScroll}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot />\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            onClick={() => this.scrollRight()}\n            disabled={!this.showRightScroll}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/tegel/p-b8d838d1.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as o}from"./p-387e1798.js";const e=':host{box-sizing:border-box;display:block;position:relative;z-index:200}:host *{box-sizing:border-box}:host a{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-tab-color);padding:8px 4px;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0}:host a .label{margin:12px 0}:host a:hover{cursor:pointer}:host a:hover::after{width:100%}:host a:focus-visible{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host a::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host a.selected{color:var(--sdds-inline-tabs-tab-color-selected)}:host a.selected .label{opacity:var(--sdds-inline-tab-color-opacity-selected)}:host a.selected::after{width:100%;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}:host a.disabled{color:var(--sdds-inline-tabs-tab-color-disabled);pointer-events:none}:host a.disabled .label{opacity:var(--sdds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}';const a=class{constructor(s){t(this,s);this.disabled=false;this.selected=false;this.href=undefined;this.target="_self";this.rel="noopener"}render(){return s(o,{role:"listitem"},s("a",{class:`\n        ${this.selected?"selected":""}\n        ${this.disabled?"disabled":""}\n        `,href:this.href,target:this.target,rel:this.rel},s("div",{class:"label"},s("slot",{name:"label"}))))}};a.style=e;export{a as sdds_inline_tabs_link};
+//# sourceMappingURL=p-b8d838d1.entry.js.map

package/dist/tegel/p-b8d838d1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsInlineTabsLinkCss","SddsInlineTabsLink","render","h","Host","role","class","this","selected","disabled","href","target","rel","name"],"sources":["./src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.scss?tag=sdds-inline-tabs-link&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.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  display: block;\n  position: relative;\n  z-index: z(tab);\n\n  a {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-inline-tabs-tab-color);\n    padding: 8px 4px;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out 0s;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n    \n    .label {\n      margin: 12px 0;\n    }\n\n    &:hover {\n      cursor: pointer;\n\n      &::after {\n        width: 100%;\n      }\n    }\n\n    &:focus-visible {\n      @include sdds-focus-state;\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0%;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-inline-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out 0s;\n      z-index: 1;\n    }\n\n    &.selected {\n      color: var(--sdds-inline-tabs-tab-color-selected);\n\n      .label {\n        opacity: var(--sdds-inline-tab-color-opacity-selected);\n      }\n\n      &::after {\n        width: 100%;\n        background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n      }\n    }\n\n    &.disabled {\n      color: var(--sdds-inline-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      .label {\n        opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);\n      }\n    }\n  }\n}\n\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-link',\n  styleUrl: 'sdds-inline-tabs-link.scss',\n  shadow: true,\n})\nexport class SddsInlineTabsLink {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          class={`\n        ${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}\n        `}\n          href={this.href}\n          target={this.target}\n          rel={this.rel}\n        >\n          <div class=\"label\">\n            <slot name=\"label\"></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAwB,wxC,MCOjBC,EAAkB,M,uCAED,M,cAGA,M,gCAM8B,Q,SAGpC,U,CAEtBC,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,KACEG,MAAO,aACPC,KAAKC,SAAW,WAAa,eAC7BD,KAAKE,SAAW,WAAa,eAE7BC,KAAMH,KAAKG,KACXC,OAAQJ,KAAKI,OACbC,IAAKL,KAAKK,KAEVT,EAAA,OAAKG,MAAM,SACTH,EAAA,QAAMU,KAAK,Y"}