@scania/tegel 0.0.33 → 0.0.34

package/dist/components/sdds-dropdown-filter.js.map

@@ -1 +1 @@
-{"file":"sdds-dropdown-filter.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-filter&encapsulation=shadow","./src/components/dropdown/dropdown-filter/dropdown-filter.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import './dropdown-theme-vars.scss';\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-grey-400);\n    border: none;\n\n    &::placeholder {\n      color: var(--sdds-grey-400);\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  /** 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;\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' | 'inside' | 'outside' = 'no-label';\n\n  /** Support `error` state */\n  @Prop() state: string = 'default';\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('selectOption')\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 tabindex=\"0\" value={obj.value} class={`${this.selectedOptionState === obj.value ? 'selected' : ''}`}>\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}>\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"],"version":3}
+{"file":"sdds-dropdown-filter.js","mappings":"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","names":[],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-filter&encapsulation=shadow","./src/components/dropdown/dropdown-filter/dropdown-filter.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import './dropdown-theme-vars.scss';\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-grey-400);\n    border: none;\n\n    &::placeholder {\n      color: var(--sdds-grey-400);\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  /** 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;\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' | 'inside' | 'outside' = 'no-label';\n\n  /** Support `error` state */\n  @Prop() state: string = 'default';\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('selectOption')\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 tabindex=\"0\" value={obj.value} class={`${this.selectedOptionState === obj.value ? 'selected' : ''}`}>\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}>\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"],"version":3}

package/dist/components/sdds-header-cell.js

@@ -163,7 +163,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsHeaderCell = TableHeaderCell;
 const defineCustomElement = defineCustomElement$1;

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

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

package/dist/components/sdds-inline-tab.js

@@ -33,7 +33,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsInlineTab = InlineTabsChild;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"sdds-inline-tab.js","mappings":";;AAAA,MAAM,YAAY,GAAG,sBAAsB;;MCO9B,eAAe;;;;;;oBAGE,KAAK;mBAEN,KAAK;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.scss?tag=sdds-inline-tab&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tab',\n  styleUrl: 'inline-tab.scss',\n  shadow: true,\n})\nexport class InlineTabsChild {\n  @Prop() label: string;\n\n  @Prop() disabled: boolean = false;\n\n  @Prop() default: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-inline-tab.js","mappings":";;AAAA,MAAM,YAAY,GAAG,sBAAsB;;MCO9B,eAAe;;;;;;oBAGE,KAAK;mBAEN,KAAK;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.scss?tag=sdds-inline-tab&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tab/inline-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tab',\n  styleUrl: 'inline-tab.scss',\n  shadow: true,\n})\nexport class InlineTabsChild {\n  @Prop() label: string;\n\n  @Prop() disabled: boolean = false;\n\n  @Prop() default: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-inline-tabs-fullbleed.js

@@ -110,7 +110,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsInlineTabsFullbleed = InlineTabsFullbleed;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/sdds-inline-tabs-fullbleed.js.map

@@ -1 +1 @@
-{"file":"sdds-inline-tabs-fullbleed.js","mappings":"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","names":[],"sources":["./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.scss?tag=sdds-inline-tabs-fullbleed&encapsulation=shadow","./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n.sdds-inline-tabs-fullbleed {\n  @include sdds-box-sizing;\n\n  display: flex;\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-fullbleed-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    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--forward,\n  &--back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n    svg{\n      fill:var(--sdds-inline-tabs-scroll-btn-color);\n    }\n  }\n\n  &-centered {\n    justify-content: center;\n  }\n\n  /* tab */\n  ::slotted(&--tab) {\n    //fixme: headline-07 has a line-height that is not matching old storybook\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-inline-tabs-fullbleed-tab-color);\n    opacity: 0.6;\n    padding: 16px 0;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out;\n    white-space: nowrap;\n    text-align: left;\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-fullbleed-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n  \n  ::slotted(&--tab__active) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-active);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n      background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active);\n    }\n  }\n\n  ::slotted(&--tab:first-child) {\n    margin-left: 32px;\n  }\n\n  ::slotted(&--tab:last-child) {\n    margin-right: 32px;\n  }\n\n  /* tab states */\n  ::slotted(&--tab:hover) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-hover);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n    }\n  }\n\n  ::slotted(&--tab:focus) {\n    @include sdds-focus-state;\n\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-focus);\n    opacity:1;\n    \n    &::after {\n      width: 0;\n    }\n  }\n\n  ::slotted(&--tab__active:focus)::after {\n    width: 100%;\n  }\n\n  ::slotted(&--tab__disabled) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-disabled);\n    pointer-events: none;\n    opacity: var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled);\n  }\n}\n\n.sdds-inline-tabs-fullbleed {\n  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n\n  .sdds-inline-tabs-fullbleed--forward {\n    background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n  }\n\n  .sdds-inline-tabs-fullbleed--back {\n    background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n  }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-fullbleed',\n  styleUrl: 'inline-tabs-fullbleed.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HTMLElement;\n\n  @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  componentDidRender() {\n    this.calculateButtonWidth();\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    this.calculateButtonWidth();\n  }\n\n  calculateButtonWidth() {\n    let best = 0;\n    const navButtons = Array.from(this.host.children);\n    navButtons.forEach((navButton: HTMLElement) => {\n      const style = window.getComputedStyle(navButton);\n      const width =\n        navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n      if (width > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs-fullbleed`}>\n          <div\n            class=\"sdds-inline-tabs-fullbleed-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-inline-tabs-fullbleed-navigation\">\n            <button\n              class={`sdds-inline-tabs-fullbleed--forward ${\n                this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollRight()}\n              disabled={!this.showRightScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-inline-tabs-fullbleed--back ${\n                this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollLeft()}\n              disabled={!this.showLeftScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-inline-tabs-fullbleed.js","mappings":"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","names":[],"sources":["./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.scss?tag=sdds-inline-tabs-fullbleed&encapsulation=shadow","./src/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n.sdds-inline-tabs-fullbleed {\n  @include sdds-box-sizing;\n\n  display: flex;\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-fullbleed-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    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--forward,\n  &--back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n    svg{\n      fill:var(--sdds-inline-tabs-scroll-btn-color);\n    }\n  }\n\n  &-centered {\n    justify-content: center;\n  }\n\n  /* tab */\n  ::slotted(&--tab) {\n    //fixme: headline-07 has a line-height that is not matching old storybook\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-inline-tabs-fullbleed-tab-color);\n    opacity: 0.6;\n    padding: 16px 0;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out;\n    white-space: nowrap;\n    text-align: left;\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-fullbleed-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n  \n  ::slotted(&--tab__active) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-active);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n      background-color: var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active);\n    }\n  }\n\n  ::slotted(&--tab:first-child) {\n    margin-left: 32px;\n  }\n\n  ::slotted(&--tab:last-child) {\n    margin-right: 32px;\n  }\n\n  /* tab states */\n  ::slotted(&--tab:hover) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-hover);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n    }\n  }\n\n  ::slotted(&--tab:focus) {\n    @include sdds-focus-state;\n\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-focus);\n    opacity:1;\n    \n    &::after {\n      width: 0;\n    }\n  }\n\n  ::slotted(&--tab__active:focus)::after {\n    width: 100%;\n  }\n\n  ::slotted(&--tab__disabled) {\n    color: var(--sdds-inline-tabs-fullbleed-tab-color-disabled);\n    pointer-events: none;\n    opacity: var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled);\n  }\n}\n\n.sdds-inline-tabs-fullbleed {\n  background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n\n  .sdds-inline-tabs-fullbleed--forward {\n    background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n  }\n\n  .sdds-inline-tabs-fullbleed--back {\n    background-color: var(--sdds-inline-tabs-fullbleed-tab-background);\n  }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-inline-tabs-fullbleed',\n  styleUrl: 'inline-tabs-fullbleed.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HTMLElement;\n\n  @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  componentDidRender() {\n    this.calculateButtonWidth();\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    this.calculateButtonWidth();\n  }\n\n  calculateButtonWidth() {\n    let best = 0;\n    const navButtons = Array.from(this.host.children);\n    navButtons.forEach((navButton: HTMLElement) => {\n      const style = window.getComputedStyle(navButton);\n      const width =\n        navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n      if (width > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs-fullbleed`}>\n          <div\n            class=\"sdds-inline-tabs-fullbleed-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-inline-tabs-fullbleed-navigation\">\n            <button\n              class={`sdds-inline-tabs-fullbleed--forward ${\n                this.showRightScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollRight()}\n              disabled={!this.showRightScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-inline-tabs-fullbleed--back ${\n                this.showLeftScroll ? 'sdds-inline-tabs-fullbleed--back__show' : ''\n              }`}\n              onClick={() => this.scrollLeft()}\n              disabled={!this.showLeftScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-inline-tabs.js

@@ -238,7 +238,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsInlineTabs = InlineTabs;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"sdds-inline-tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/inline-tabs-default/inline-tabs.scss?tag=sdds-inline-tabs&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n:host {\n  outline: 0 !important;\n  @include sdds-box-sizing;\n}\n\n.sdds-inline-tabs {\n  overflow: hidden;\n  outline: 0;\n\n  &-header {\n    position: relative;\n  }\n\n  &-main {\n    background-color: var(--sdds-inline-tabs-main-background);\n    padding: 24px 24px 48px;\n  }\n\n  &-wrapper {\n    display: flex;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--forward,\n  &--back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    top: 0;\n    background-color: var(--sdds-inline-tabs-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-inline-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n    svg{\n      fill:var(--sdds-inline-tabs-scroll-btn-color);\n    }\n  }\n\n  &--back {\n    left: 0;\n  }\n\n  &--forward {\n    right: 0;\n  }\n\n  &--tab {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    cursor: pointer;\n    border: 0;\n    color: var(--sdds-inline-tabs-tab-color);\n    background-color: var(--sdds-inline-tabs-tab-background);\n    padding: 16px;\n    min-width: 142px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;\n    white-space: nowrap;\n    flex-shrink: 0;\n    text-align: left;\n    outline: none;\n\n    & > * {\n      opacity: 0.6;\n    }\n\n    &:not(:last-child) {\n      border-right: 1px solid var(--sdds-inline-tabs-tab-border-color);\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      top: 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);\n      transition: width 0.15s ease-in-out;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-tab-background-hover);\n      color: var(--sdds-inline-tabs-tab-color-hover);\n      text-decoration: none;\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    &__active {\n      background-color: var(--sdds-inline-tabs-tab-background-active);\n      color: var(--sdds-inline-tabs-tab-color-active);\n      cursor: initial;\n      border-right: 1px solid transparent !important;\n\n      & > * {\n        opacity: 1;\n      }\n\n      &:hover {\n        background-color: var(--sdds-inline-tabs-tab-background-active);\n      }\n\n      &::after {\n        width: calc(100% + 2px);\n        left: -1px;\n        background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n      }\n\n      &::before {\n        content: ' ';\n        background-color: var(--sdds-inline-tabs-tab-background-active);\n        width: 1px;\n        top: 0;\n        bottom: 0;\n        left: -1px;\n        display: block;\n        position: absolute;\n      }\n\n      &:first-child {\n        &:focus {\n          &::before {\n            left: 0;\n          }\n        }\n      }\n    }\n\n    &:disabled,\n    &__disabled {\n      cursor: initial;\n      color: var(--sdds-navigation-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      & > * {\n        opacity: 0.16;\n      }\n    }\n  }\n}\n\n  .sdds-inline-tabs--tab__active {\n    background-color: var(--sdds-inline-tabs-tab-background-active);\n  }\n\n  .sdds-inline-tabs-main {\n    background-color: var(--sdds-inline-tabs-main-background);\n  }\n","import { Component, Host, State, Element, Prop, h, Method } from '@stencil/core';\n\nfunction generateKeyFromName(name: string) {\n  return name\n    .replace(/\\s/g, '-')\n    .replace(/[^a-z0-9-]/gi, '')\n    .toLowerCase();\n}\n\n@Component({\n  tag: 'sdds-inline-tabs',\n  styleUrl: 'inline-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  @Element() host: HTMLElement;\n\n  /** either use this (default-tab=\"...\") or read attribute \"default\" from one of the slotted children. */\n  @Prop() defaultTab: string = '';\n\n  /** different height settings. right now only supports \"auto\", otherwise ignored */\n  @Prop() autoHeight: boolean = false;\n\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** array with metadata for slotted children */\n  @State() tabs: Array<any> = [];\n\n  /** current calculated width of each nav button (calculated from the largest one) */\n  @State() buttonWidth: number = 0;\n\n  /** current calculated tab height (calculated from the one with the most height) */\n  @State() tabHeight: number = 0;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  /** used for switching to a tab programmatically */\n  @Method()\n  async showTab(key: string) {\n    this.switchToTab(key);\n  }\n\n  startingTab: string = null; // name of the tab to show by default (infered from either \"default-tab\"-prop (on component) or \"default\"-prop (on a slotted child)\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  tabWrapperElement: HTMLElement = null; // reference to container with slotted children\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  useAutoHeight: boolean = false; // set height for slotted children or not\n\n  componentWillLoad() {\n    this.initComponent();\n  }\n\n  initComponent(createInitialState = true) {\n    if (this.autoHeight) {\n      this.useAutoHeight = true;\n    }\n\n    this.tabs = Array.from(this.host.children).map((item: HTMLSddsInlineTabElement, index) => {\n      const name = item.label ? item.label : item.getAttribute('name') || `Tab ${index + 1}`;\n      const key = generateKeyFromName(name);\n      if (item.default) {\n        this.startingTab = key;\n      }\n      let disabled = false;\n      if (item.disabled) {\n        disabled = true;\n      }\n      return {\n        name,\n        key,\n        element: item,\n        disabled,\n        visible: true,\n        initialDisplay: window.getComputedStyle(item).display,\n      };\n    });\n\n    if (createInitialState) {\n      this.setInitialState();\n    }\n    this.tabs = Array.from(this.tabs);\n  }\n\n  calculateButtonWidth() {\n    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');\n    let best = 0;\n    Array.from(navButtons).forEach((navButton: HTMLElement) => {\n      const oldStyle = navButton.style.width;\n      // eslint-disable-next-line no-param-reassign\n      navButton.style.width = '';\n      const width = navButton.clientWidth;\n      // eslint-disable-next-line no-param-reassign\n      navButton.style.width = oldStyle;\n\n      if (navButton.clientWidth > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  calculateTabHeight() {\n    let best = 0;\n    this.tabs.forEach((_, tabIndex) => {\n      const tab = this.tabs[tabIndex];\n      // TODO: add comment on what this does\n      const oldStyle = tab.element.style.display;\n      tab.element.style.display = '';\n      const height = tab.element.clientHeight;\n      tab.element.style.display = oldStyle;\n\n      if (height > best) {\n        best = height;\n      }\n    });\n\n    this.tabHeight = best;\n  }\n\n  componentDidRender() {\n    this.calculateTabHeight();\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\n    const mutationObserver = new MutationObserver((/* mutations, observer */) => {\n      const visibleTab = this.tabs.find((tab) => tab.visible);\n      this.initComponent(false);\n      this.calculateTabHeight();\n      this.calculateButtonWidth();\n      if (visibleTab) {\n        this.switchToTab(visibleTab.key);\n      }\n    });\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');\n        Array.from(navButtons).forEach((navButton: HTMLElement) => {\n          buttonsWidth += navButton.clientWidth;\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        this.calculateTabHeight();\n      });\n    });\n\n    mutationObserver.observe(this.host, {\n      childList: true,\n      attributes: true,\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n\n    this.calculateButtonWidth();\n    this.calculateTabHeight();\n  }\n\n  setInitialState() {\n    if (this.defaultTab) {\n      this.startingTab = this.defaultTab;\n    }\n\n    this.tabs.forEach((tab, index) => {\n      if (this.startingTab) {\n        if (tab.key !== this.startingTab) {\n          this.hideTab(index);\n        }\n      } else {\n        if (index > 0) {\n          this.hideTab(index);\n        }\n      }\n    });\n  }\n\n  unhideTab(tabIndex) {\n    const tab = this.tabs[tabIndex];\n    tab.element.style.display = '';\n    tab.visible = true;\n  }\n\n  hideTab(tabIndex) {\n    const tab = this.tabs[tabIndex];\n    tab.element.style.display = 'none';\n    tab.visible = false;\n  }\n\n  switchToTab(key: string) {\n    this.tabs.forEach((tab, index) => {\n      if (tab.key === key) {\n        this.unhideTab(index);\n      } else {\n        this.hideTab(index);\n      }\n    });\n\n    this.tabs = Array.from(this.tabs);\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    const style: Record<string, string> = {};\n    if (this.useAutoHeight) {\n      style.height = `${this.tabHeight}px`;\n    }\n\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs sdds-inline-tabs`}>\n          <nav class=\"sdds-inline-tabs-header\">\n            <div\n              ref={(el) => {\n                this.navWrapperElement = el as HTMLDivElement;\n              }}\n              class=\"sdds-inline-tabs-wrapper\"\n            >\n              {this.tabs.map((tab) => (\n                <button\n                  style={{ width: `${this.buttonWidth}px` }}\n                  disabled={tab.disabled}\n                  class={`sdds-inline-tabs--tab ${\n                    tab.visible ? 'sdds-inline-tabs--tab__active' : ''\n                  }`}\n                  onClick={() => this.switchToTab(tab.key)}\n                >\n                  <span>{tab.name}</span>\n                </button>\n              ))}\n            </div>\n            <div class=\"sdds-inline-tabs-header-navigation\">\n              <button\n                class={`sdds-inline-tabs--forward ${\n                  this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''\n                }`}\n                disabled={!this.showRightScroll}\n                onClick={() => this.scrollRight()}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                  />\n                </svg>\n              </button>\n              <button\n                class={`sdds-inline-tabs--back ${\n                  this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''\n                }`}\n                disabled={!this.showLeftScroll}\n                onClick={() => this.scrollLeft()}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                  />\n                </svg>\n              </button>\n            </div>\n          </nav>\n          <div\n            ref={(el) => {\n              this.tabWrapperElement = el as HTMLElement;\n            }}\n            class=\"sdds-inline-tabs-main\"\n            style={style}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-inline-tabs.js","mappings":";;AAAA,MAAM,aAAa,GAAG,w8GAAw8G;;ACE99G,SAAS,mBAAmB,CAAC,IAAY;EACvC,OAAO,IAAI;KACR,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC;KACnB,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC;KAC3B,WAAW,EAAE,CAAC;AACnB,CAAC;MAOY,UAAU;;;;;IA+BrB,gBAAW,GAAW,IAAI,CAAC;IAE3B,sBAAiB,GAAgB,IAAI,CAAC;IAEtC,sBAAiB,GAAgB,IAAI,CAAC;IAEtC,mBAAc,GAAW,CAAC,CAAC;IAE3B,iBAAY,GAAW,CAAC,CAAC;IAEzB,gBAAW,GAAW,CAAC,CAAC;IAExB,kBAAa,GAAY,KAAK,CAAC;sBAvCF,EAAE;sBAGD,KAAK;uBAGY,IAAI;gBAGvB,EAAE;uBAGC,CAAC;qBAGH,CAAC;0BAEK,KAAK;2BAEJ,KAAK;;;EAIzC,MAAM,OAAO,CAAC,GAAW;IACvB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;GACvB;EAgBD,iBAAiB;IACf,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,aAAa,CAAC,kBAAkB,GAAG,IAAI;IACrC,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B;IAED,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAA8B,EAAE,KAAK;MACnF,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,OAAO,KAAK,GAAG,CAAC,EAAE,CAAC;MACvF,MAAM,GAAG,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;MACtC,IAAI,IAAI,CAAC,OAAO,EAAE;QAChB,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;OACxB;MACD,IAAI,QAAQ,GAAG,KAAK,CAAC;MACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,QAAQ,GAAG,IAAI,CAAC;OACjB;MACD,OAAO;QACL,IAAI;QACJ,GAAG;QACH,OAAO,EAAE,IAAI;QACb,QAAQ;QACR,OAAO,EAAE,IAAI;QACb,cAAc,EAAE,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,OAAO;OACtD,CAAC;KACH,CAAC,CAAC;IAEH,IAAI,kBAAkB,EAAE;MACtB,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IACD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CAAC;IAC3F,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,SAAsB;MACpD,MAAM,QAAQ,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC;;MAEvC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;MAC3B,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC;;MAEpC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC;MAEjC,IAAI,SAAS,CAAC,WAAW,GAAG,IAAI,EAAE;QAChC,IAAI,GAAG,KAAK,CAAC;OACd;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;GACzB;EAED,kBAAkB;IAChB,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ;MAC5B,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;;MAEhC,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC;MAC3C,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;MAC/B,MAAM,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,YAAY,CAAC;MACxC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAC;MAErC,IAAI,MAAM,GAAG,IAAI,EAAE;QACjB,IAAI,GAAG,MAAM,CAAC;OACf;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;GACvB;EAED,kBAAkB;IAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;GAC7B;EAED,gBAAgB;IACd,MAAM,gBAAgB,GAAG,IAAI,gBAAgB,CAAC;MAC5C,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC,CAAC;MACxD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MAC1B,IAAI,CAAC,kBAAkB,EAAE,CAAC;MAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,IAAI,UAAU,EAAE;QACd,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;OAClC;KACF,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO;MAChD,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK;QACpB,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;QAC/C,IAAI,YAAY,GAAG,CAAC,CAAC;QAErB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CAAC;QACjF,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,SAAsB;UACpD,YAAY,IAAI,SAAS,CAAC,WAAW,CAAC;SACvC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;QACrC,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACjC,IAAI,CAAC,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;QAEjD,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,EAAE;UAC3C,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAC9B;aAAM;UACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;UAC5B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;SAC9B;QAED,IAAI,CAAC,kBAAkB,EAAE,CAAC;OAC3B,CAAC,CAAC;KACJ,CAAC,CAAC;IAEH,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,IAAI;KACjB,CAAC,CAAC;IAEH,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAE/C,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC5B,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,eAAe;IACb,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC;KACpC;IAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK;MAC3B,IAAI,IAAI,CAAC,WAAW,EAAE;QACpB,IAAI,GAAG,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,EAAE;UAChC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SACrB;OACF;WAAM;QACL,IAAI,KAAK,GAAG,CAAC,EAAE;UACb,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SACrB;OACF;KACF,CAAC,CAAC;GACJ;EAED,SAAS,CAAC,QAAQ;IAChB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;IAC/B,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;GACpB;EAED,OAAO,CAAC,QAAQ;IACd,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;IACnC,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;GACrB;EAED,WAAW,CAAC,GAAW;IACrB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK;MAC3B,IAAI,GAAG,CAAC,GAAG,KAAK,GAAG,EAAE;QACnB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;OACvB;WAAM;QACL,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;OACrB;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAED,WAAW;IACT,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IACjD,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;IAE9D,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,UAAU;IACR,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IACjD,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;IAE9D,IAAI,CAAC,qBAAqB,EAAE,CAAC;GAC9B;EAED,qBAAqB;IACnB,MAAM,MAAM,GAAG,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IAEjD,IAAI,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;MAC9B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;SAAM;MACL,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;KAC7B;IAED,IAAI,MAAM,IAAI,CAAC,EAAE;MACf,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,KAAK,GAA2B,EAAE,CAAC;IACzC,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC;KACtC;IAED,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IACvF,WAAK,KAAK,EAAE,mCAAmC,IAC7C,WAAK,KAAK,EAAC,yBAAyB,IAClC,WACE,GAAG,EAAE,CAAC,EAAE;QACN,IAAI,CAAC,iBAAiB,GAAG,EAAoB,CAAC;OAC/C,EACD,KAAK,EAAC,0BAA0B,IAE/B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MACjB,cACE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,EACzC,QAAQ,EAAE,GAAG,CAAC,QAAQ,EACtB,KAAK,EAAE,yBACL,GAAG,CAAC,OAAO,GAAG,+BAA+B,GAAG,EAClD,EAAE,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,IAExC,gBAAO,GAAG,CAAC,IAAI,CAAQ,CAChB,CACV,CAAC,CACE,EACN,WAAK,KAAK,EAAC,oCAAoC,IAC7C,cACE,KAAK,EAAE,6BACL,IAAI,CAAC,eAAe,GAAG,8BAA8B,GAAG,EAC1D,EAAE,EACF,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,EAC/B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAEjC,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAElC,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,2WAA2W,GAC7W,CACE,CACC,EACT,cACE,KAAK,EAAE,0BACL,IAAI,CAAC,cAAc,GAAG,8BAA8B,GAAG,EACzD,EAAE,EACF,QAAQ,EAAE,CAAC,IAAI,CAAC,cAAc,EAC9B,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAEhC,WACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAElC,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,iXAAiX,GACnX,CACE,CACC,CACL,CACF,EACN,WACE,GAAG,EAAE,CAAC,EAAE;QACN,IAAI,CAAC,iBAAiB,GAAG,EAAiB,CAAC;OAC5C,EACD,KAAK,EAAC,uBAAuB,EAC7B,KAAK,EAAE,KAAK,IAEZ,eAAQ,CACJ,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/inline-tabs-default/inline-tabs.scss?tag=sdds-inline-tabs&encapsulation=shadow","./src/components/tabs/inline-tabs-default/inline-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n:host {\n  outline: 0 !important;\n  @include sdds-box-sizing;\n}\n\n.sdds-inline-tabs {\n  overflow: hidden;\n  outline: 0;\n\n  &-header {\n    position: relative;\n  }\n\n  &-main {\n    background-color: var(--sdds-inline-tabs-main-background);\n    padding: 24px 24px 48px;\n  }\n\n  &-wrapper {\n    display: flex;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--forward,\n  &--back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    top: 0;\n    background-color: var(--sdds-inline-tabs-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-inline-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n    svg{\n      fill:var(--sdds-inline-tabs-scroll-btn-color);\n    }\n  }\n\n  &--back {\n    left: 0;\n  }\n\n  &--forward {\n    right: 0;\n  }\n\n  &--tab {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    cursor: pointer;\n    border: 0;\n    color: var(--sdds-inline-tabs-tab-color);\n    background-color: var(--sdds-inline-tabs-tab-background);\n    padding: 16px;\n    min-width: 142px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;\n    white-space: nowrap;\n    flex-shrink: 0;\n    text-align: left;\n    outline: none;\n\n    & > * {\n      opacity: 0.6;\n    }\n\n    &:not(:last-child) {\n      border-right: 1px solid var(--sdds-inline-tabs-tab-border-color);\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      top: 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);\n      transition: width 0.15s ease-in-out;\n    }\n\n    &:hover {\n      background-color: var(--sdds-inline-tabs-tab-background-hover);\n      color: var(--sdds-inline-tabs-tab-color-hover);\n      text-decoration: none;\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    &__active {\n      background-color: var(--sdds-inline-tabs-tab-background-active);\n      color: var(--sdds-inline-tabs-tab-color-active);\n      cursor: initial;\n      border-right: 1px solid transparent !important;\n\n      & > * {\n        opacity: 1;\n      }\n\n      &:hover {\n        background-color: var(--sdds-inline-tabs-tab-background-active);\n      }\n\n      &::after {\n        width: calc(100% + 2px);\n        left: -1px;\n        background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n      }\n\n      &::before {\n        content: ' ';\n        background-color: var(--sdds-inline-tabs-tab-background-active);\n        width: 1px;\n        top: 0;\n        bottom: 0;\n        left: -1px;\n        display: block;\n        position: absolute;\n      }\n\n      &:first-child {\n        &:focus {\n          &::before {\n            left: 0;\n          }\n        }\n      }\n    }\n\n    &:disabled,\n    &__disabled {\n      cursor: initial;\n      color: var(--sdds-navigation-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      & > * {\n        opacity: 0.16;\n      }\n    }\n  }\n}\n\n  .sdds-inline-tabs--tab__active {\n    background-color: var(--sdds-inline-tabs-tab-background-active);\n  }\n\n  .sdds-inline-tabs-main {\n    background-color: var(--sdds-inline-tabs-main-background);\n  }\n","import { Component, Host, State, Element, Prop, h, Method } from '@stencil/core';\n\nfunction generateKeyFromName(name: string) {\n  return name\n    .replace(/\\s/g, '-')\n    .replace(/[^a-z0-9-]/gi, '')\n    .toLowerCase();\n}\n\n@Component({\n  tag: 'sdds-inline-tabs',\n  styleUrl: 'inline-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  @Element() host: HTMLElement;\n\n  /** either use this (default-tab=\"...\") or read attribute \"default\" from one of the slotted children. */\n  @Prop() defaultTab: string = '';\n\n  /** different height settings. right now only supports \"auto\", otherwise ignored */\n  @Prop() autoHeight: boolean = false;\n\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** array with metadata for slotted children */\n  @State() tabs: Array<any> = [];\n\n  /** current calculated width of each nav button (calculated from the largest one) */\n  @State() buttonWidth: number = 0;\n\n  /** current calculated tab height (calculated from the one with the most height) */\n  @State() tabHeight: number = 0;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  /** used for switching to a tab programmatically */\n  @Method()\n  async showTab(key: string) {\n    this.switchToTab(key);\n  }\n\n  startingTab: string = null; // name of the tab to show by default (infered from either \"default-tab\"-prop (on component) or \"default\"-prop (on a slotted child)\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  tabWrapperElement: HTMLElement = null; // reference to container with slotted children\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  useAutoHeight: boolean = false; // set height for slotted children or not\n\n  componentWillLoad() {\n    this.initComponent();\n  }\n\n  initComponent(createInitialState = true) {\n    if (this.autoHeight) {\n      this.useAutoHeight = true;\n    }\n\n    this.tabs = Array.from(this.host.children).map((item: HTMLSddsInlineTabElement, index) => {\n      const name = item.label ? item.label : item.getAttribute('name') || `Tab ${index + 1}`;\n      const key = generateKeyFromName(name);\n      if (item.default) {\n        this.startingTab = key;\n      }\n      let disabled = false;\n      if (item.disabled) {\n        disabled = true;\n      }\n      return {\n        name,\n        key,\n        element: item,\n        disabled,\n        visible: true,\n        initialDisplay: window.getComputedStyle(item).display,\n      };\n    });\n\n    if (createInitialState) {\n      this.setInitialState();\n    }\n    this.tabs = Array.from(this.tabs);\n  }\n\n  calculateButtonWidth() {\n    const navButtons = this.navWrapperElement.querySelectorAll('button.sdds-inline-tabs--tab');\n    let best = 0;\n    Array.from(navButtons).forEach((navButton: HTMLElement) => {\n      const oldStyle = navButton.style.width;\n      // eslint-disable-next-line no-param-reassign\n      navButton.style.width = '';\n      const width = navButton.clientWidth;\n      // eslint-disable-next-line no-param-reassign\n      navButton.style.width = oldStyle;\n\n      if (navButton.clientWidth > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  calculateTabHeight() {\n    let best = 0;\n    this.tabs.forEach((_, tabIndex) => {\n      const tab = this.tabs[tabIndex];\n      // TODO: add comment on what this does\n      const oldStyle = tab.element.style.display;\n      tab.element.style.display = '';\n      const height = tab.element.clientHeight;\n      tab.element.style.display = oldStyle;\n\n      if (height > best) {\n        best = height;\n      }\n    });\n\n    this.tabHeight = best;\n  }\n\n  componentDidRender() {\n    this.calculateTabHeight();\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\n    const mutationObserver = new MutationObserver((/* mutations, observer */) => {\n      const visibleTab = this.tabs.find((tab) => tab.visible);\n      this.initComponent(false);\n      this.calculateTabHeight();\n      this.calculateButtonWidth();\n      if (visibleTab) {\n        this.switchToTab(visibleTab.key);\n      }\n    });\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = entry.target.querySelectorAll('button.sdds-inline-tabs--tab');\n        Array.from(navButtons).forEach((navButton: HTMLElement) => {\n          buttonsWidth += navButton.clientWidth;\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        this.calculateTabHeight();\n      });\n    });\n\n    mutationObserver.observe(this.host, {\n      childList: true,\n      attributes: true,\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n\n    this.calculateButtonWidth();\n    this.calculateTabHeight();\n  }\n\n  setInitialState() {\n    if (this.defaultTab) {\n      this.startingTab = this.defaultTab;\n    }\n\n    this.tabs.forEach((tab, index) => {\n      if (this.startingTab) {\n        if (tab.key !== this.startingTab) {\n          this.hideTab(index);\n        }\n      } else {\n        if (index > 0) {\n          this.hideTab(index);\n        }\n      }\n    });\n  }\n\n  unhideTab(tabIndex) {\n    const tab = this.tabs[tabIndex];\n    tab.element.style.display = '';\n    tab.visible = true;\n  }\n\n  hideTab(tabIndex) {\n    const tab = this.tabs[tabIndex];\n    tab.element.style.display = 'none';\n    tab.visible = false;\n  }\n\n  switchToTab(key: string) {\n    this.tabs.forEach((tab, index) => {\n      if (tab.key === key) {\n        this.unhideTab(index);\n      } else {\n        this.hideTab(index);\n      }\n    });\n\n    this.tabs = Array.from(this.tabs);\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    const style: Record<string, string> = {};\n    if (this.useAutoHeight) {\n      style.height = `${this.tabHeight}px`;\n    }\n\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class={`sdds-inline-tabs sdds-inline-tabs`}>\n          <nav class=\"sdds-inline-tabs-header\">\n            <div\n              ref={(el) => {\n                this.navWrapperElement = el as HTMLDivElement;\n              }}\n              class=\"sdds-inline-tabs-wrapper\"\n            >\n              {this.tabs.map((tab) => (\n                <button\n                  style={{ width: `${this.buttonWidth}px` }}\n                  disabled={tab.disabled}\n                  class={`sdds-inline-tabs--tab ${\n                    tab.visible ? 'sdds-inline-tabs--tab__active' : ''\n                  }`}\n                  onClick={() => this.switchToTab(tab.key)}\n                >\n                  <span>{tab.name}</span>\n                </button>\n              ))}\n            </div>\n            <div class=\"sdds-inline-tabs-header-navigation\">\n              <button\n                class={`sdds-inline-tabs--forward ${\n                  this.showRightScroll ? 'sdds-inline-tabs--back__show' : ''\n                }`}\n                disabled={!this.showRightScroll}\n                onClick={() => this.scrollRight()}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                  />\n                </svg>\n              </button>\n              <button\n                class={`sdds-inline-tabs--back ${\n                  this.showLeftScroll ? 'sdds-inline-tabs--back__show' : ''\n                }`}\n                disabled={!this.showLeftScroll}\n                onClick={() => this.scrollLeft()}\n              >\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                  />\n                </svg>\n              </button>\n            </div>\n          </nav>\n          <div\n            ref={(el) => {\n              this.tabWrapperElement = el as HTMLElement;\n            }}\n            class=\"sdds-inline-tabs-main\"\n            style={style}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-link2.js

@@ -40,7 +40,6 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { SddsLink as S, defineCustomElement as d };
 

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

@@ -1 +1 @@
-{"file":"sdds-link2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gpBAAgpB;;MCOvpB,QAAQ;;;;;kBAKuC,OAAO;oBAGrC,KAAK;qBAGJ,IAAI;eAGX,UAAU;;EAEhC,MAAM;IACJ,QACE,SACE,KAAK,EAAE;UACL,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,cAAc;;SAErC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/link/sdds-link.scss?tag=sdds-link","./src/components/link/sdds-link.tsx"],"sourcesContent":["a {\n  cursor: pointer;\n  outline: none;\n  color: var(--sdds-link);\n\n  &:active {\n    color: var(--sdds-link);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link);\n  }\n\n  &:hover {\n    color: var(--sdds-link-hover);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link-hover);\n  }\n\n  &:visited {\n    color: var(--sdds-link-visited);\n    text-decoration-color: var(--sdds-link-visited);\n  }\n\n  &:focus {\n    color: var(--sdds-link-focus);\n    text-decoration: none;\n    outline: 2px solid var(--sdds-link-focus);\n    outline-offset: -2px;\n  }\n\n  &.disabled {\n    color: var(--sdds-link-disabled);\n    text-decoration-color: var(--sdds-link-disabled);\n    pointer-events: none;\n  }\n\n  &.no-underline {\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** URL 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  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\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      <a\n        class={`\n        ${this.disabled ? 'disabled' : ''}\n        ${this.underline ? '' : 'no-underline'}\n        \n        `}\n        href={this.href}\n        target={this.target}\n        rel={this.rel}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-link2.js","mappings":";;AAAA,MAAM,WAAW,GAAG,gpBAAgpB;;MCOvpB,QAAQ;;;;;kBAKuC,OAAO;oBAGrC,KAAK;qBAGJ,IAAI;eAGX,UAAU;;EAEhC,MAAM;IACJ,QACE,SACE,KAAK,EAAE;UACL,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,cAAc;;SAErC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,eAAa,CACX,EACJ;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/link/sdds-link.scss?tag=sdds-link","./src/components/link/sdds-link.tsx"],"sourcesContent":["a {\n  cursor: pointer;\n  outline: none;\n  color: var(--sdds-link);\n\n  &:active {\n    color: var(--sdds-link);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link);\n  }\n\n  &:hover {\n    color: var(--sdds-link-hover);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link-hover);\n  }\n\n  &:visited {\n    color: var(--sdds-link-visited);\n    text-decoration-color: var(--sdds-link-visited);\n  }\n\n  &:focus {\n    color: var(--sdds-link-focus);\n    text-decoration: none;\n    outline: 2px solid var(--sdds-link-focus);\n    outline-offset: -2px;\n  }\n\n  &.disabled {\n    color: var(--sdds-link-disabled);\n    text-decoration-color: var(--sdds-link-disabled);\n    pointer-events: none;\n  }\n\n  &.no-underline {\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** URL 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  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\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      <a\n        class={`\n        ${this.disabled ? 'disabled' : ''}\n        ${this.underline ? '' : 'no-underline'}\n        \n        `}\n        href={this.href}\n        target={this.target}\n        rel={this.rel}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-message.js

@@ -60,7 +60,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsMessage = SddsMessage$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"sdds-message.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ooDAAooD;;MCO9oDA,aAAW;;;;;IAgBtB,gBAAW,GAAG;MACZ,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;KACF,CAAC;;uBAxB6C,IAAI;gBAGa,aAAa;kBAGnD,KAAK;mBAGJ,KAAK;;EAiBhC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;0BACS,IAAI,CAAC,IAAI;UACzB,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,EAAE;UACrC,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAExE,CAAC,IAAI,CAAC,MAAM,IAAI,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa,EAC9E,WAAK,KAAK,EAAE,iBAAiB,IAC1B,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,MAAM,CAAO,EAC9D,CAAC,IAAI,CAAC,OAAO,KACZ,WAAK,KAAK,EAAC,0BAA0B,IACnC,eAAa,CACT,CACP,CACG,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsMessage"],"sources":["./src/components/message/sdds-message.scss?tag=sdds-message&encapsulation=shadow","./src/components/message/sdds-message.tsx"],"sourcesContent":[":host {\n  .message-wrapper {\n    display: flex;\n    padding: 16px;\n    background-color: var(--sdds-message-background);\n    border-radius: 4px;\n\n    &.information {\n      border-left: 4px solid var(--sdds-information);\n\n      sdds-icon {\n        color: var(--sdds-information);\n      }\n    }\n\n    &.success {\n      border-left: 4px solid var(--sdds-positive);\n\n      sdds-icon {\n        color: var(--sdds-positive);\n      }\n    }\n\n    &.error {\n      background-color: var(--sdds-message-type-error-background);\n      border-left: 4px solid var(--sdds-negative);\n\n      sdds-icon {\n        color: var(--sdds-negative);\n      }\n    }\n\n    &.warning {\n      border-left: 4px solid var(--sdds-warning);\n\n      sdds-icon {\n        color: var(--sdds-warning);\n      }\n    }\n\n    &.message-minimal {\n      border: none;\n      display: flex;\n      align-items: center;\n      padding: 0;\n      background-color: transparent;\n\n      .message-header {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n      }\n\n      sdds-icon {\n        padding-right: 8px;\n      }\n    }\n  }\n\n  sdds-icon {\n    padding-right: 16px;\n  }\n\n  .message-content {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    color: var(--sdds-message-color);\n    padding: 2px 0;\n\n    .message-header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n    }\n\n    .message-extended-message {\n      color: var(--sdds-message-color);\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n    }\n  }\n\n  .sdds-mode-variant-primary {\n    --sdds-message-background: var(--sdds-message-background-primary);\n  }\n\n  .sdds-mode-variant-secondary {\n    --sdds-message-background: var(--sdds-message-background-secondary);\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-message',\n  styleUrl: 'sdds-message.scss',\n  shadow: true,\n})\nexport class SddsMessage {\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Type of message. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Removes the icon in the message. */\n  @Prop() noIcon: boolean = false;\n\n  /** Minimal message styling. */\n  @Prop() minimal: boolean = false;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`\n        message-wrapper ${this.type}\n        ${this.minimal ? 'message-minimal' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n        >\n          {!this.noIcon && <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>}\n          <div class={`message-content`}>\n            {this.header && <div class=\"message-header\">{this.header}</div>}\n            {!this.minimal && (\n              <div class=\"message-extended-message\">\n                <slot></slot>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-message.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,ooDAAooD;;MCO9oDA,aAAW;;;;;IAgBtB,gBAAW,GAAG;MACZ,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,aAAa;UAChB,OAAO,MAAM,CAAC;QAChB,KAAK,OAAO;UACV,OAAO,OAAO,CAAC;QACjB,KAAK,SAAS;UACZ,OAAO,SAAS,CAAC;QACnB,KAAK,SAAS;UACZ,OAAO,MAAM,CAAC;QAChB;UACE,OAAO,MAAM,CAAC;OACjB;KACF,CAAC;;uBAxB6C,IAAI;gBAGa,aAAa;kBAGnD,KAAK;mBAGJ,KAAK;;EAiBhC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;0BACS,IAAI,CAAC,IAAI;UACzB,IAAI,CAAC,OAAO,GAAG,iBAAiB,GAAG,EAAE;UACrC,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IAExE,CAAC,IAAI,CAAC,MAAM,IAAI,iBAAW,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,MAAM,GAAa,EAC9E,WAAK,KAAK,EAAE,iBAAiB,IAC1B,IAAI,CAAC,MAAM,IAAI,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,MAAM,CAAO,EAC9D,CAAC,IAAI,CAAC,OAAO,KACZ,WAAK,KAAK,EAAC,0BAA0B,IACnC,eAAa,CACT,CACP,CACG,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SddsMessage"],"sources":["./src/components/message/sdds-message.scss?tag=sdds-message&encapsulation=shadow","./src/components/message/sdds-message.tsx"],"sourcesContent":[":host {\n  .message-wrapper {\n    display: flex;\n    padding: 16px;\n    background-color: var(--sdds-message-background);\n    border-radius: 4px;\n\n    &.information {\n      border-left: 4px solid var(--sdds-information);\n\n      sdds-icon {\n        color: var(--sdds-information);\n      }\n    }\n\n    &.success {\n      border-left: 4px solid var(--sdds-positive);\n\n      sdds-icon {\n        color: var(--sdds-positive);\n      }\n    }\n\n    &.error {\n      background-color: var(--sdds-message-type-error-background);\n      border-left: 4px solid var(--sdds-negative);\n\n      sdds-icon {\n        color: var(--sdds-negative);\n      }\n    }\n\n    &.warning {\n      border-left: 4px solid var(--sdds-warning);\n\n      sdds-icon {\n        color: var(--sdds-warning);\n      }\n    }\n\n    &.message-minimal {\n      border: none;\n      display: flex;\n      align-items: center;\n      padding: 0;\n      background-color: transparent;\n\n      .message-header {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n      }\n\n      sdds-icon {\n        padding-right: 8px;\n      }\n    }\n  }\n\n  sdds-icon {\n    padding-right: 16px;\n  }\n\n  .message-content {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    color: var(--sdds-message-color);\n    padding: 2px 0;\n\n    .message-header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n    }\n\n    .message-extended-message {\n      color: var(--sdds-message-color);\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n    }\n  }\n\n  .sdds-mode-variant-primary {\n    --sdds-message-background: var(--sdds-message-background-primary);\n  }\n\n  .sdds-mode-variant-secondary {\n    --sdds-message-background: var(--sdds-message-background-secondary);\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-message',\n  styleUrl: 'sdds-message.scss',\n  shadow: true,\n})\nexport class SddsMessage {\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Type of message. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Removes the icon in the message. */\n  @Prop() noIcon: boolean = false;\n\n  /** Minimal message styling. */\n  @Prop() minimal: boolean = false;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`\n        message-wrapper ${this.type}\n        ${this.minimal ? 'message-minimal' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n        >\n          {!this.noIcon && <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>}\n          <div class={`message-content`}>\n            {this.header && <div class=\"message-header\">{this.header}</div>}\n            {!this.minimal && (\n              <div class=\"message-extended-message\">\n                <slot></slot>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sdds-modal.js

@@ -70,7 +70,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsModal = Modal;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"sdds-modal.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8+MAA8+M;;MCOl/M,KAAK;;;;;mBAEW,KAAK;gBAGU,IAAI;mBAGP,QAAQ;gBAGvB,KAAK;;;EAQ7B,MAAM,SAAS;IACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;GAClB;EAED,kBAAkB;IAChB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAE/D,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE;MACpD,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;OACnB,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EAED,WAAW,CAAC,CAAC;IACX,MAAM,UAAU,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;IACpC,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IAC7B,IACE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,kBAAkB;OACzC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,qBAAqB,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,EACzE;MACA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,OAAO,EAAE,CAAC,KAAK;QACb,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;OACzB,EACD,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,MAAM,EAAE,IAE3D,WACE,KAAK,EAAE,cAAc,IAAI,CAAC,OAAO,GAAG,uBAAuB,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAC5E,IAAI,CAAC,IAAI,GAAG,cAAc,IAAI,CAAC,IAAI,EAAE,GAAG,EAC1C,GAAG,IAEH,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,qBAAqB,GAAQ,EACxC,cACE,KAAK,EAAC,kBAAkB,gBACb,OAAO,EAClB,GAAG,EAAE,CAAC,EAAE;QACN,IAAI,CAAC,aAAa,GAAG,EAAiB,CAAC;OACxC,IAED,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,EAEN,WAAK,KAAK,EAAC,iBAAiB,IAC1B,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EAEN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,oBAAoB,GAAQ,CACnC,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-theme-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n  $screen-s: (\n    xs: 100%,\n    sm: 100%,\n    md: 100%,\n    lg: 100%,\n  ),\n  $screen-md: (\n    xs: 75%,\n    sm: 62.5%,\n    md: 75%,\n    lg: 100%,\n  ),\n  $screen-l: (\n    xs: 31.25%,\n    sm: 43.75%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xl: (\n    xs: 31.25%,\n    sm: 37.5%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xxl: (\n    xs: 25%,\n    sm: 37.5%,\n    md: 50%,\n    lg: 75%,\n  ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n  }\n}\n\n@mixin modal-scroll-outer {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n    border-radius: 0 1em 1em 0;\n  }\n}\n\n@mixin modal-host {\n  left: 0;\n  top: 0;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  z-index: z(modal);\n  background-color: var(--sdds-modal-backdrop);\n  padding: 0 16px;\n\n  @media (max-width: $screen-s) {\n    padding: 0;\n  }\n\n  &.show {\n    display: flex;\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n\n@mixin modal-header {\n  display: flex;\n  padding-bottom: var(--sdds-spacing-element-8);\n  position: sticky;\n  top: 0;\n  background-color: var(--sdds-modal-background);\n  z-index: 1;\n\n  &::before {\n    content: ' ';\n    position: absolute;\n    height: 16px;\n    top: -16px;\n    width: 100%;\n    background-color: var(--sdds-modal-background);\n  }\n}\n\n@mixin modal-headline {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-headline-05);\n  letter-spacing: var(--sdds-headline-05-ls);\n  margin: 0;\n  flex: 1;\n}\n\n@mixin modal-body {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-body-01);\n  letter-spacing: var(--sdds-body-01-ls);\n  padding-bottom: 40px;\n  overflow-y: visible;\n  padding-right: 16px;\n  @include modal-scroll-inner;\n\n  @media (min-width: $screen-l) {\n    padding-right: 64px;\n  }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-modal-background);\n  margin: auto;\n  position: relative;\n  border-radius: 4px;\n  padding: 16px;\n  max-height: 85vh;\n  overflow-y: auto;\n\n  @include modal-scroll-outer;\n\n  &__actions-sticky {\n    overflow: hidden;\n\n    .sdds-modal-body {\n      font: var(--sdds-body-01);\n      letter-spacing: var(--sdds-body-01-ls);\n      padding-bottom: 96px;\n      margin: 0 -16px 0 0;\n      max-height: calc(85vh - 36px);\n      overflow-y: auto;\n    }\n\n    .sdds-modal-actions {\n      position: absolute;\n      bottom: -1px;\n      left: 0;\n      right: 0;\n      background-color: var(--sdds-modal-background);\n      padding: var(--sdds-spacing-element-16);\n      display: flex;\n      gap: 16px;\n    }\n  }\n\n  &__actions-static {\n    .sdds-modal-actions {\n      background-color: var(--sdds-modal-background);\n      display: flex;\n      gap: 16px;\n    }\n  }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n  @media (min-width: $screen) {\n    @each $modal, $value in $modals {\n      .sdds-modal-#{$modal} {\n        width: $value;\n      }\n    }\n  }\n}\n\n@media (max-width: $screen-s) {\n  .sdds-modal-md,\n  .sdds-modal-lg,\n  .sdds-modal-sm {\n    height: 100%;\n\n    slot[name='sdds-modal-actions']::slotted(*) {\n      display: flex;\n    }\n  }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n  @include modal-header;\n}\n\n.sdds-modal-headline {\n  @include modal-headline;\n\n  color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n  @include modal-body;\n}\n\n.sdds-modal-backdrop {\n  @include sdds-box-sizing;\n  @include modal-host;\n}\n\nbutton.sdds-modal-close {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  appearance: unset;\n}\n\n.sdds-modal-close {\n  display: inline-block;\n  height: auto;\n  color: var(--sdds-modal-icon);\n  cursor: pointer;\n\n  &:focus {\n    @include sdds-focus-state;\n  }\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n  display: inline-block;\n  height: auto;\n  background-repeat: no-repeat;\n  cursor: pointer;\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n\n  svg {\n    fill: var(--sdds-modal-icon);\n  }\n}\n\n.sdds-modal-overflow {\n  overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n  @include modal-host;\n\n  .sdds-modal-close {\n    border: none;\n    background-color: transparent;\n  }\n\n  .sdds-modal-close-btn {\n    border: none;\n    background-color: transparent;\n  }\n}\n\n:host(.show) {\n  display: flex;\n}\n\n:host(.hide) {\n  display: none;\n}\n","import { Component, h, Host, Prop, Element, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /* Opens or closes the modal. */\n  @Prop() open: boolean = false;\n\n  @Element() el: HTMLElement;\n\n  closeButtonEl: HTMLElement;\n\n  /** Shows the modal  */\n  @Method()\n  async openModal() {\n    this.open = true;\n  }\n\n  setDissmissButtons() {\n    const nodes = this.el.querySelectorAll('[data-dismiss-modal]');\n\n    [...Array.from(nodes), this.closeButtonEl].forEach((el) => {\n      el.addEventListener('click', () => {\n        this.open = false;\n      });\n    });\n  }\n\n  handleClick(e) {\n    const targetList = e.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.open = false;\n    }\n  }\n\n  componentDidRender() {\n    this.setDissmissButtons();\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.open ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button\n              class=\"sdds-modal-close\"\n              aria-label=\"close\"\n              ref={(el) => {\n                this.closeButtonEl = el as HTMLElement;\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sdds-modal.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,8+MAA8+M;;MCOl/M,KAAK;;;;;mBAEW,KAAK;gBAGU,IAAI;mBAGP,QAAQ;gBAGvB,KAAK;;;EAQ7B,MAAM,SAAS;IACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;GAClB;EAED,kBAAkB;IAChB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;IAE/D,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE;MACpD,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE;QAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;OACnB,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EAED,WAAW,CAAC,CAAC;IACX,MAAM,UAAU,GAAG,CAAC,CAAC,YAAY,EAAE,CAAC;IACpC,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IAC7B,IACE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,kBAAkB;OACzC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,qBAAqB,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,CAAC,EACzE;MACA,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,OAAO,EAAE,CAAC,KAAK;QACb,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;OACzB,EACD,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,MAAM,EAAE,IAE3D,WACE,KAAK,EAAE,cAAc,IAAI,CAAC,OAAO,GAAG,uBAAuB,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAC5E,IAAI,CAAC,IAAI,GAAG,cAAc,IAAI,CAAC,IAAI,EAAE,GAAG,EAC1C,GAAG,IAEH,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,qBAAqB,GAAQ,EACxC,cACE,KAAK,EAAC,kBAAkB,gBACb,OAAO,EAClB,GAAG,EAAE,CAAC,EAAE;QACN,IAAI,CAAC,aAAa,GAAG,EAAiB,CAAC;OACxC,IAED,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACL,EAEN,WAAK,KAAK,EAAC,iBAAiB,IAC1B,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CAChC,EAEN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,oBAAoB,GAAQ,CACnC,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-theme-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n  $screen-s: (\n    xs: 100%,\n    sm: 100%,\n    md: 100%,\n    lg: 100%,\n  ),\n  $screen-md: (\n    xs: 75%,\n    sm: 62.5%,\n    md: 75%,\n    lg: 100%,\n  ),\n  $screen-l: (\n    xs: 31.25%,\n    sm: 43.75%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xl: (\n    xs: 31.25%,\n    sm: 37.5%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xxl: (\n    xs: 25%,\n    sm: 37.5%,\n    md: 50%,\n    lg: 75%,\n  ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n  }\n}\n\n@mixin modal-scroll-outer {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n    border-radius: 0 1em 1em 0;\n  }\n}\n\n@mixin modal-host {\n  left: 0;\n  top: 0;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  z-index: z(modal);\n  background-color: var(--sdds-modal-backdrop);\n  padding: 0 16px;\n\n  @media (max-width: $screen-s) {\n    padding: 0;\n  }\n\n  &.show {\n    display: flex;\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n\n@mixin modal-header {\n  display: flex;\n  padding-bottom: var(--sdds-spacing-element-8);\n  position: sticky;\n  top: 0;\n  background-color: var(--sdds-modal-background);\n  z-index: 1;\n\n  &::before {\n    content: ' ';\n    position: absolute;\n    height: 16px;\n    top: -16px;\n    width: 100%;\n    background-color: var(--sdds-modal-background);\n  }\n}\n\n@mixin modal-headline {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-headline-05);\n  letter-spacing: var(--sdds-headline-05-ls);\n  margin: 0;\n  flex: 1;\n}\n\n@mixin modal-body {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-body-01);\n  letter-spacing: var(--sdds-body-01-ls);\n  padding-bottom: 40px;\n  overflow-y: visible;\n  padding-right: 16px;\n  @include modal-scroll-inner;\n\n  @media (min-width: $screen-l) {\n    padding-right: 64px;\n  }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-modal-background);\n  margin: auto;\n  position: relative;\n  border-radius: 4px;\n  padding: 16px;\n  max-height: 85vh;\n  overflow-y: auto;\n\n  @include modal-scroll-outer;\n\n  &__actions-sticky {\n    overflow: hidden;\n\n    .sdds-modal-body {\n      font: var(--sdds-body-01);\n      letter-spacing: var(--sdds-body-01-ls);\n      padding-bottom: 96px;\n      margin: 0 -16px 0 0;\n      max-height: calc(85vh - 36px);\n      overflow-y: auto;\n    }\n\n    .sdds-modal-actions {\n      position: absolute;\n      bottom: -1px;\n      left: 0;\n      right: 0;\n      background-color: var(--sdds-modal-background);\n      padding: var(--sdds-spacing-element-16);\n      display: flex;\n      gap: 16px;\n    }\n  }\n\n  &__actions-static {\n    .sdds-modal-actions {\n      background-color: var(--sdds-modal-background);\n      display: flex;\n      gap: 16px;\n    }\n  }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n  @media (min-width: $screen) {\n    @each $modal, $value in $modals {\n      .sdds-modal-#{$modal} {\n        width: $value;\n      }\n    }\n  }\n}\n\n@media (max-width: $screen-s) {\n  .sdds-modal-md,\n  .sdds-modal-lg,\n  .sdds-modal-sm {\n    height: 100%;\n\n    slot[name='sdds-modal-actions']::slotted(*) {\n      display: flex;\n    }\n  }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n  @include modal-header;\n}\n\n.sdds-modal-headline {\n  @include modal-headline;\n\n  color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n  @include modal-body;\n}\n\n.sdds-modal-backdrop {\n  @include sdds-box-sizing;\n  @include modal-host;\n}\n\nbutton.sdds-modal-close {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  appearance: unset;\n}\n\n.sdds-modal-close {\n  display: inline-block;\n  height: auto;\n  color: var(--sdds-modal-icon);\n  cursor: pointer;\n\n  &:focus {\n    @include sdds-focus-state;\n  }\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n  display: inline-block;\n  height: auto;\n  background-repeat: no-repeat;\n  cursor: pointer;\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n\n  svg {\n    fill: var(--sdds-modal-icon);\n  }\n}\n\n.sdds-modal-overflow {\n  overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n  @include modal-host;\n\n  .sdds-modal-close {\n    border: none;\n    background-color: transparent;\n  }\n\n  .sdds-modal-close-btn {\n    border: none;\n    background-color: transparent;\n  }\n}\n\n:host(.show) {\n  display: flex;\n}\n\n:host(.hide) {\n  display: none;\n}\n","import { Component, h, Host, Prop, Element, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /* Opens or closes the modal. */\n  @Prop() open: boolean = false;\n\n  @Element() el: HTMLElement;\n\n  closeButtonEl: HTMLElement;\n\n  /** Shows the modal  */\n  @Method()\n  async openModal() {\n    this.open = true;\n  }\n\n  setDissmissButtons() {\n    const nodes = this.el.querySelectorAll('[data-dismiss-modal]');\n\n    [...Array.from(nodes), this.closeButtonEl].forEach((el) => {\n      el.addEventListener('click', () => {\n        this.open = false;\n      });\n    });\n  }\n\n  handleClick(e) {\n    const targetList = e.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.open = false;\n    }\n  }\n\n  componentDidRender() {\n    this.setDissmissButtons();\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.open ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button\n              class=\"sdds-modal-close\"\n              aria-label=\"close\"\n              ref={(el) => {\n                this.closeButtonEl = el as HTMLElement;\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -110,7 +110,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SddsNavigationTabs = NavigationTabs;
 const defineCustomElement = defineCustomElement$1;