@scania/tegel 0.0.4 → 0.0.6

package/dist/tegel/p-6e54f5a2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownCss","DropdownFilter","componentWillLoad","this","parseData","data","defaultOption","selectedOptionState","newValue","dataOptions","JSON","parse","filteredContent","updateOptionsContent","event","searchTerm","detail","findData","selectOptionHandler","value","selectedLabel","label","selectedValue","setTimeout","searchAsRegEx","RegExp","filter","option","listItem","toLowerCase","searchResultList","match","setOptionsContent","newList","map","obj","h","tabindex","class","length","async","_a","dropdownRef","resetOption","render","Host","ref","el","exportparts","size","disabled","labelPosition","helper","state","placeholder","selectedOption","type"],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-filter&encapsulation=shadow","./src/components/dropdown/dropdown-filter/dropdown-filter.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import './dropdown-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"],"mappings":"kDAAA,MAAMA,EAAc,upkC,MCOPC,EAAc,M,0CACF,G,qBAEI,G,gBAEL,G,+EAOQ,G,kHAeoC,K,YAGxC,M,mBAGiC,W,WAGnC,U,YAGC,G,uCAOQ,c,mBAEA,a,CAEjCC,oBACEC,KAAKC,UAAUD,KAAKE,MAEpB,GAAIF,KAAKG,cAAe,CACtBH,KAAKI,oBAAsBJ,KAAKG,a,EAKpCF,UAAUI,GACR,GAAIA,EAAUL,KAAKM,YAAcC,KAAKC,MAAMH,GAC5CL,KAAKS,gBAAkBT,KAAKM,W,CAI9BI,qBAAqBC,GACnBX,KAAKY,WAAaD,EAAME,OACxBb,KAAKc,U,CAIPC,oBAAoBJ,GAClBX,KAAKI,oBAAsBO,EAAME,OAAOG,MACxChB,KAAKiB,cAAgBN,EAAME,OAAOK,MAClClB,KAAKmB,cAAgBR,EAAME,OAAOG,MAIlCI,YAAW,KACTpB,KAAKS,gBAAkBT,KAAKM,WAAW,GACtC,I,CAGLQ,WACE,MAAMO,EAAgB,IAAIC,OAAOtB,KAAKY,WAAY,OAClDZ,KAAKS,gBAAkBT,KAAKM,YAAYiB,QAAOC,IAC7C,GAAIA,EAAON,MAAO,CAChB,MAAMO,EAAWD,EAAON,MAAMQ,cAC9B,MAAMC,EAAmBF,EAASG,MAAMP,GACxC,GAAIM,EAAkB,CACpB,OAAOA,C,CAET3B,KAAKI,oBAAsB,KAC3BJ,KAAKiB,cAAgB,YACrBjB,KAAKmB,cAAgB,W,KAK3BU,oBACE,MAAMC,EAAU9B,KAAKS,gBAAgBsB,KAAIC,GACvCC,EAAA,wBAAsBC,SAAS,IAAIlB,MAAOgB,EAAIhB,MAAOmB,MAAO,GAAGnC,KAAKI,sBAAwB4B,EAAIhB,MAAQ,WAAa,MAClHgB,EAAId,SAGT,GAAIY,EAAQM,OAAS,EAAG,CACtB,OAAON,C,CAET,OACEG,EAAA,wBAAsBC,SAAS,KAAKlB,MAAM,YAAYmB,MAAM,0BAAwB,Y,CAO9EE,oB,aACFC,EAAAtC,KAAKuC,eAAW,MAAAD,SAAA,SAAAA,EAAEE,c,CAG1BC,SACE,OACER,EAACS,EAAI,kBAAiB1C,KAAKmB,cAAa,gBAAiBnB,KAAKiB,eAC5DgB,EAAA,iBACEU,IAAKC,GAAO5C,KAAKuC,YAAcK,EAC/BC,YAAY,2BACZC,KAAM9C,KAAK8C,KACX5B,MAAOlB,KAAKkB,MACZ6B,SAAU/C,KAAK+C,SACfC,cAAehD,KAAKgD,cACpBC,OAAQjD,KAAKiD,OACbC,MAAOlD,KAAKkD,MACZC,YAAanD,KAAKmD,YAClBhD,cAAeH,KAAKG,cACpBiD,eAAgBpD,KAAKoD,eACrBC,KAAK,SACLnB,SAAUlC,KAAK+C,SAAW,KAAO,MAEhC/C,KAAK6B,qB"}

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

@@ -1,2 +0,0 @@
-import{r as c,c as e,h as s,g as d}from"./p-0b4eba86.js";const o='.sdds-checkbox-webcomponent.sc-sdds-checkbox{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox *.sc-sdds-checkbox{box-sizing:border-box}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{content:"";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox{cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled+label.sc-sdds-checkbox,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox:hover::before{display:none}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}';const b=class{constructor(s){c(this,s);this.sddsChange=e(this,"sddsChange",6);this.sddsFocus=e(this,"sddsFocus",6);this.sddsBlur=e(this,"sddsBlur",6);this.handleChange=()=>{this.checked=!this.checked;this.sddsChange.emit({checkboxId:this.checkboxId,checked:this.checked,value:this.value})};this.name=undefined;this.checkboxId=crypto.randomUUID();this.disabled=false;this.required=false;this.checked=false;this.value=undefined}async toggleCheckbox(){this.checked=!this.checked;return{checkboxId:this.checkboxId,checked:this.checked}}handleFocus(c){this.sddsFocus.emit(c)}handleBlur(c){this.sddsBlur.emit(c)}render(){return s("div",{class:"sdds-checkbox-webcomponent"},s("input",{"aria-checked":this.checked,"aria-required":this.required,"aria-describedby":this.host.getAttribute("aria-describedby"),"aria-labelledby":this.host.getAttribute("aria-labelledby"),required:this.required,type:"checkbox",name:this.name,value:this.value,id:this.checkboxId,checked:this.checked,disabled:this.disabled,onFocus:c=>this.handleFocus(c),onBlur:c=>this.handleBlur(c),onChange:()=>{this.handleChange()}}),s("label",{htmlFor:this.checkboxId},s("slot",null)))}get host(){return d(this)}};b.style=o;export{b as sdds_checkbox};
-//# sourceMappingURL=p-72099402.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sddsCheckboxCss","SddsCheckbox","this","handleChange","checked","sddsChange","emit","checkboxId","value","crypto","randomUUID","async","handleFocus","event","sddsFocus","handleBlur","sddsBlur","render","h","class","required","host","getAttribute","type","name","id","disabled","onFocus","onBlur","onChange","htmlFor"],"sources":["./src/components/checkbox/sdds-checkbox.scss?tag=sdds-checkbox&encapsulation=scoped","./src/components/checkbox/sdds-checkbox.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-checkbox-webcomponent {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-checkbox-text);\n  display: flex;\n  align-items: center;\n  margin-left: -4px;\n\n  input[type='checkbox'] {\n    appearance: none;\n    outline: none;\n    margin: 0;\n    border: 0;\n    border-radius: 2px;\n    width: 24px;\n    height: 24px;\n    position: relative;\n    cursor: pointer;\n\n    + label {\n      color: var(--sdds-checkbox-color);\n      padding-left: var(--sdds-spacing-element-4);\n      padding-top: var(--sdds-spacing-element-4);\n      padding-bottom: var(--sdds-spacing-element-4);\n      cursor: pointer;\n    }\n\n    &::before,\n    &::after {\n      content: '';\n      position: absolute;\n      box-sizing: border-box;\n      border-radius: 2px;\n    }\n\n    &::before {\n      width: 24px;\n      height: 24px;\n      left: 0;\n      top: 0;\n    }\n\n    &::after {\n      border: 1px solid var(--sdds-checkbox-interaction-01);\n      background-color: var(--sdds-checkbox-interaction-02);\n      width: 16px;\n      height: 16px;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:hover {\n      &::before {\n        background-color: var(--sdds-checkbox-background-hover);\n        opacity: 0.12;\n      }\n    }\n\n    &:focus {\n      &::before {\n        background-color: var(--sdds-checkbox-background-focus);\n        opacity: 0.24;\n        transition: opacity 0.2s ease-in-out;\n      }\n    }\n\n    &:disabled,\n    &.disabled {\n      cursor: not-allowed;\n\n      &::after {\n        border-color: var(--sdds-checkbox-border-color-disabled-after);\n      }\n\n      + label {\n        color: var(--sdds-grey-600);\n        cursor: not-allowed;\n      }\n\n      &:hover {\n        &::before {\n          display: none;\n        }\n      }\n    }\n\n    &:checked {\n      &::after {\n        background-image: var(--sdds-checkbox-background-img);\n        background-color: var(--sdds-checkbox-interaction-01);\n        background-repeat: no-repeat;\n        background-position: center;\n      }\n\n      &:hover {\n        &::before {\n          background-color: var(--sdds-checkbox-background-hover);\n          opacity: 0.12;\n        }\n      }\n\n      &:disabled,\n      &.disabled {\n        &:hover::before,\n        &::before {\n          display: block;\n          width: 16px;\n          height: 16px;\n          left: 4px;\n          top: 4px;\n          border: 1px solid #b0b7c4;\n        }\n\n        &::after {\n          background-image: var(--sdds-checkbox-background-img-disabled);\n          background-color: var(--sdds-checkbox-interaction-02);\n          color: var(--sdds-checkbox-color-disabled-after);\n        }\n      }\n    }\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-checkbox',\n  styleUrl: 'sdds-checkbox.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsCheckbox {\n  /** Name for the checkbox's input element. */\n  @Prop() name: string;\n\n  /** ID for the checkbox's input element. Randomly generated if not specified. */\n  @Prop() checkboxId: string = crypto.randomUUID();\n\n  /** Sets the checkbox in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Make the checkbox required */\n  @Prop() required: boolean = false;\n\n  /** Sets the checkbox as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Value for the checkbox */\n  @Prop() value: string;\n\n  @Element() host: HostElement;\n\n  /** Toggles the checked value of the component. */\n  @Method()\n  async toggleCheckbox() {\n    this.checked = !this.checked;\n    return {\n      checkboxId: this.checkboxId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique checkbox identifier and checked status when it is checked/unchecked. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    checkboxId: string;\n    checked: boolean;\n    value?: string;\n  }>;\n\n  handleChange = () => {\n    this.checked = !this.checked;\n    this.sddsChange.emit({\n      checkboxId: this.checkboxId,\n      checked: this.checked,\n      value: this.value,\n    });\n  };\n\n  /** Focus event for the checkbox */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the checkbox */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleBlur(event): void {\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <div class=\"sdds-checkbox-webcomponent\">\n        <input\n          aria-checked={this.checked}\n          aria-required={this.required}\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          value={this.value}\n          id={this.checkboxId}\n          checked={this.checked}\n          disabled={this.disabled}\n          onFocus={(event) => this.handleFocus(event)}\n          onBlur={(event) => this.handleBlur(event)}\n          onChange={() => {\n            this.handleChange();\n          }}\n        />\n        <label htmlFor={this.checkboxId}>\n          <slot></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAkB,m+H,MCSXC,EAAY,M,wIA4CvBC,KAAAC,aAAe,KACbD,KAAKE,SAAWF,KAAKE,QACrBF,KAAKG,WAAWC,KAAK,CACnBC,WAAYL,KAAKK,WACjBH,QAASF,KAAKE,QACdI,MAAON,KAAKM,OACZ,E,oCA7CyBC,OAAOC,a,cAGR,M,cAGA,M,aAGgB,M,qBAS5CC,uBACET,KAAKE,SAAWF,KAAKE,QACrB,MAAO,CACLG,WAAYL,KAAKK,WACjBH,QAASF,KAAKE,Q,CAoClBQ,YAAYC,GACVX,KAAKY,UAAUR,KAAKO,E,CAatBE,WAAWF,GACTX,KAAKc,SAASV,KAAKO,E,CAGrBI,SACE,OACEC,EAAA,OAAKC,MAAM,8BACTD,EAAA,wBACgBhB,KAAKE,QAAO,gBACXF,KAAKkB,SAAQ,mBACVlB,KAAKmB,KAAKC,aAAa,oBAAmB,kBAC3CpB,KAAKmB,KAAKC,aAAa,mBACxCF,SAAUlB,KAAKkB,SACfG,KAAK,WACLC,KAAMtB,KAAKsB,KACXhB,MAAON,KAAKM,MACZiB,GAAIvB,KAAKK,WACTH,QAASF,KAAKE,QACdsB,SAAUxB,KAAKwB,SACfC,QAAUd,GAAUX,KAAKU,YAAYC,GACrCe,OAASf,GAAUX,KAAKa,WAAWF,GACnCgB,SAAU,KACR3B,KAAKC,cAAc,IAGvBe,EAAA,SAAOY,QAAS5B,KAAKK,YACnBW,EAAA,c"}

package/dist/tegel/p-77a4950d.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as d,H as e,g as o,c as t}from"./p-0b4eba86.js";const i=":host(.sdds-table__body-cell){box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--sdds-data-table-color);padding:var(--sdds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.sdds-table__body-cell) *{box-sizing:border-box}:host(.sdds-table__body-cell--no-padding){padding:0}:host(.sdds-table__body-cell--hover){background-color:var(--sdds-data-table-body-cell-background-hover)}:host(.sdds-table__compact){padding:var(--sdds-spacing-element-8) var(--sdds-spacing-element-16)}:host(.sdds-table--divider){border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--divider:last-of-type){border-right:none}:host(.sdds-table--no-min-width){min-width:unset}";const r=["verticalDividers","compactDesign","noMinWidth"];const a=class{constructor(d){s(this,d);this.cellValue=undefined;this.cellKey=undefined;this.disablePadding=false;this.textAlignState=undefined;this.activeSorting=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.whiteBackground=false;this.tableId=""}tablePropsChangedEventListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>r.includes(s))).forEach((d=>{if(typeof this[d]==="undefined"){throw new Error(`Table prop is not supported: ${d}`)}this[d]=s.detail[d]}))}}headCellHoverEventListener(s){const[d,e]=s.detail;if(this.tableId===d){this.activeSorting=this.cellKey===e}}textAlignEventListener(s){const[d,e,o]=s.detail;if(this.tableId===d){if(this.cellKey===e){this.textAlignState=o}}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){r.forEach((s=>{this[s]=this.tableEl[s]}))}render(){return d(e,{class:{"sdds-table__body-cell":true,"sdds-table__body-cell--hover":this.activeSorting,"sdds-table__compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--no-min-width":this.noMinWidth,"sdds-table__body-cell--no-padding":this.disablePadding},style:{textAlign:this.textAlignState}},this.cellValue,d("slot",null))}get host(){return o(this)}};a.style=i;const c=":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:white;--sdds-checkbox-background-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host(.sdds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--sdds-data-table-divider);background-color:var(--sdds-data-table-body-row-background);transition:background-color 200ms ease;color:var(--sdds-data-table-color)}:host(.sdds-table__row) *{box-sizing:border-box}:host(.sdds-table__row) .sdds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.sdds-table__row:hover){background-color:var(--sdds-data-table-body-row-background-hover)}:host(.sdds-table__row--selected){background-color:var(--sdds-data-table-body-row-background-active)}:host(.sdds-table__row--selected:hover){background-color:var(--sdds-data-table-body-row-background-active-hover)}:host(.sdds-table__row--hidden){display:none}:host(.sdds-table__row--expended){width:100%;background-color:pink}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.sdds-table__compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__body-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}";const l=["enableMultiselect","verticalDividers","compactDesign","modeVariant"];const b=class{constructor(d){s(this,d);this.bodyRowToTable=t(this,"bodyRowToTable",7);this.runPaginationEvent=t(this,"runPaginationEvent",7);this.enableMultiselect=false;this.bodyCheckBoxStatus=false;this.mainCheckBoxStatus=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.modeVariant=null;this.tableId=""}bodyCheckBoxClicked(s){const d=this.host;this.bodyCheckBoxStatus=s.currentTarget.checked;if(this.bodyCheckBoxStatus===true){d.classList.add("sdds-table__row--selected")}else{d.classList.remove("sdds-table__row--selected")}this.bodyRowToTable.emit(this.bodyCheckBoxStatus)}bodyCheckBoxStatusUpdater(s){this.mainCheckBoxStatus=s;this.bodyCheckBoxStatus=this.mainCheckBoxStatus;const d=this.host;if(this.bodyCheckBoxStatus===true){d.classList.add("sdds-table__row--selected")}else{d.classList.remove("sdds-table__row--selected")}this.bodyRowToTable.emit(this.bodyCheckBoxStatus)}tablePropsChangedEventListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>l.includes(s))).forEach((d=>{if(typeof this[d]==="undefined"){throw new Error(`Table prop is not supported: ${d}`)}this[d]=s.detail[d]}))}}headCheckboxListener(s){if(this.tableId===s.detail[0]){this.bodyCheckBoxStatusUpdater(s.detail[1])}}updateBodyCheckboxesEventListener(s){const[d,e]=s.detail;if(this.tableId===d){this.bodyCheckBoxStatusUpdater(e)}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){l.forEach((s=>{this[s]=this.tableEl[s]}))}componentDidLoad(){this.runPaginationEvent.emit(this.tableId)}render(){return d(e,{class:{"sdds-table__row":true,"sdds-table__compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-mode-variant-primary":this.modeVariant==="primary","sdds-mode-variant-secondary":this.modeVariant==="secondary"}},this.enableMultiselect&&d("td",{class:"sdds-table__body-cell sdds-table__body-cell--checkbox"},d("div",{class:"sdds-checkbox-item"},d("label",{class:"sdds-form-label sdds-form-label--data-table"},d("input",{class:"sdds-form-input",type:"checkbox",onChange:s=>this.bodyCheckBoxClicked(s),checked:this.bodyCheckBoxStatus})))),d("slot",null))}get host(){return o(this)}};b.style=c;export{a as sdds_body_cell,b as sdds_table_body_row};
-//# sourceMappingURL=p-77a4950d.entry.js.map

package/dist/tegel/p-77a4950d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tableBodyCellCss","relevantTableProps","TableBodyCell","tablePropsChangedEventListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","headCellHoverEventListener","receivedID","receivedKeyValue","activeSorting","cellKey","textAlignEventListener","receivedKey","receivedTextAlign","textAlignState","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","render","h","Host","class","compactDesign","verticalDividers","noMinWidth","disablePadding","style","textAlign","cellValue","tableBodyRowCss","TableBodyRow","bodyCheckBoxClicked","row","bodyCheckBoxStatus","currentTarget","checked","classList","add","remove","bodyRowToTable","emit","bodyCheckBoxStatusUpdater","status","mainCheckBoxStatus","headCheckboxListener","updateBodyCheckboxesEventListener","receivedBodyCheckboxStatus","componentDidLoad","runPaginationEvent","modeVariant","enableMultiselect","type","onChange"],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx","./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: table-cell;\n  box-sizing: border-box;\n  color: var(--sdds-data-table-color);\n  padding: var(--sdds-spacing-element-16);\n  min-width: 192px;\n  vertical-align: top;\n  background-color: transparent;\n  transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n  padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n  background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\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","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n@Component({\n  tag: 'sdds-body-cell',\n  styleUrl: 'table-body-cell.scss',\n  shadow: true,\n})\nexport class TableBodyCell {\n  /** Value that will be presented as text inside a cell */\n  @Prop({ reflect: true }) cellValue: string | number;\n\n  /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */\n  @Prop({ reflect: true }) cellKey: any;\n\n  /** Disables internal padding. Useful when passing other components to cell. */\n  @Prop({ reflect: true }) disablePadding: boolean = false;\n\n  @State() textAlignState: string;\n\n  @State() activeSorting: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  @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 headKey from data-table-header-element\n  @Listen('headCellHoverEvent', { target: 'body' })\n  headCellHoverEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue] = event.detail;\n\n    if (this.tableId === receivedID) {\n      this.activeSorting = this.cellKey === receivedKeyValue;\n    }\n  }\n\n  // Listen to textAlignEvent from data-table-header-element\n  @Listen('textAlignEvent', { target: 'body' })\n  textAlignEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n    if (this.tableId === receivedID) {\n      if (this.cellKey === receivedKey) {\n        this.textAlignState = receivedTextAlign;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__body-cell': true,\n          'sdds-table__body-cell--hover': this.activeSorting,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--no-min-width': this.noMinWidth,\n          'sdds-table__body-cell--no-padding': this.disablePadding,\n        }}\n        style={{ textAlign: this.textAlignState }}\n      >\n        {this.cellValue}\n        <slot />\n      </Host>\n    );\n  }\n}\n","/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n  @include sdds-box-sizing;\n\n  display: table-row;\n  border-bottom: 1px solid var(--sdds-data-table-divider);\n  background-color: var(--sdds-data-table-body-row-background);\n  transition: background-color 200ms ease;\n  color: var(--sdds-data-table-color);\n\n  .sdds-table__body-cell--checkbox {\n    min-width: 48px;\n    width: 48px;\n    padding: 0;\n  }\n}\n\n:host(.sdds-table__row:hover) {\n  background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n  background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n  background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n  display: none;\n}\n\n:host(.sdds-table__row--expended) {\n  width: 100%;\n  background-color: pink;\n}\n\n:host {\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n}\n\n:host(.sdds-table__compact) {\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__body-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'enableMultiselect',\n  'verticalDividers',\n  'compactDesign',\n  'modeVariant',\n];\n\n@Component({\n  tag: 'sdds-table-body-row',\n  styleUrl: 'table-body-row.scss',\n  shadow: true,\n})\nexport class TableBodyRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() bodyCheckBoxStatus: boolean = false;\n\n  @State() mainCheckBoxStatus: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  bodyCheckBoxClicked(event) {\n    const row = this.host;\n    this.bodyCheckBoxStatus = event.currentTarget.checked;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n  }\n\n  bodyCheckBoxStatusUpdater(status) {\n    this.mainCheckBoxStatus = status;\n    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n    const row = this.host;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.bodyRowToTable.emit(this.bodyCheckBoxStatus);\n  }\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  /** Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */\n  @Event({\n    eventName: 'bodyRowToTable',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  bodyRowToTable: EventEmitter<boolean>;\n\n  /** Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'runPaginationEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  runPaginationEvent: EventEmitter<string>;\n\n  @Listen('mainCheckboxSelectedEvent', { target: 'body' })\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.bodyCheckBoxStatusUpdater(event.detail[1]);\n    }\n  }\n\n  @Listen('updateBodyCheckboxesEvent', { target: 'body' })\n  updateBodyCheckboxesEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.runPaginationEvent.emit(this.tableId);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        {this.enableMultiselect && (\n          <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n            <div class=\"sdds-checkbox-item\">\n              <label class=\"sdds-form-label sdds-form-label--data-table\">\n                <input\n                  class=\"sdds-form-input\"\n                  type=\"checkbox\"\n                  onChange={(event) => this.bodyCheckBoxClicked(event)}\n                  checked={this.bodyCheckBoxStatus}\n                />\n              </label>\n            </div>\n          </td>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAmB,q0BCGzB,MAAMC,EAAwD,CAC5D,mBACA,gBACA,c,MAOWC,EAAa,M,6FAQ2B,M,iDAIjB,M,sBAEG,M,mBAEH,M,gBAEH,M,qBAEK,M,aAET,E,CAO3BC,+BAA+BC,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAOD,QAAS,CACzCF,EAAMG,OAAOC,QACVC,QAAQC,GAAgBT,EAAmBU,SAASD,KACpDE,SAASF,IACR,UAAWL,KAAKK,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElDL,KAAKK,GAAeN,EAAMG,OAAOG,EAAY,G,EAOrDI,2BAA2BV,GACzB,MAAOW,EAAYC,GAAoBZ,EAAMG,OAE7C,GAAIF,KAAKC,UAAYS,EAAY,CAC/BV,KAAKY,cAAgBZ,KAAKa,UAAYF,C,EAM1CG,uBAAuBf,GACrB,MAAOW,EAAYK,EAAaC,GAAqBjB,EAAMG,OAE3D,GAAIF,KAAKC,UAAYS,EAAY,CAC/B,GAAIV,KAAKa,UAAYE,EAAa,CAChCf,KAAKiB,eAAiBD,C,GAK5BE,oBACElB,KAAKmB,QAAUnB,KAAKoB,KAAKC,QAAQ,cACjCrB,KAAKC,QAAUD,KAAKmB,QAAQlB,O,CAG9BqB,oBACE1B,EAAmBW,SAASgB,IAC1BvB,KAAKuB,GAAiBvB,KAAKmB,QAAQI,EAAc,G,CAIrDC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,wBAAyB,KACzB,+BAAgC3B,KAAKY,cACrC,sBAAuBZ,KAAK4B,cAC5B,sBAAuB5B,KAAK6B,iBAC5B,2BAA4B7B,KAAK8B,WACjC,oCAAqC9B,KAAK+B,gBAE5CC,MAAO,CAAEC,UAAWjC,KAAKiB,iBAExBjB,KAAKkC,UACNT,EAAA,a,uCCtGR,MAAMU,EAAkB,29LCGxB,MAAMvC,EAAwD,CAC5D,oBACA,mBACA,gBACA,e,MAQWwC,EAAY,M,sJACe,M,wBAEC,M,wBAEA,M,sBAEF,M,mBAEH,M,gBAEH,M,iBAEiB,K,aAErB,E,CAM3BC,oBAAoBtC,GAClB,MAAMuC,EAAMtC,KAAKoB,KACjBpB,KAAKuC,mBAAqBxC,EAAMyC,cAAcC,QAC9C,GAAIzC,KAAKuC,qBAAuB,KAAM,CACpCD,EAAII,UAAUC,IAAI,4B,KACb,CACLL,EAAII,UAAUE,OAAO,4B,CAEvB5C,KAAK6C,eAAeC,KAAK9C,KAAKuC,mB,CAGhCQ,0BAA0BC,GACxBhD,KAAKiD,mBAAqBD,EAC1BhD,KAAKuC,mBAAqBvC,KAAKiD,mBAC/B,MAAMX,EAAMtC,KAAKoB,KACjB,GAAIpB,KAAKuC,qBAAuB,KAAM,CACpCD,EAAII,UAAUC,IAAI,4B,KACb,CACLL,EAAII,UAAUE,OAAO,4B,CAEvB5C,KAAK6C,eAAeC,KAAK9C,KAAKuC,mB,CAIhCzC,+BAA+BC,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAOD,QAAS,CACzCF,EAAMG,OAAOC,QACVC,QAAQC,GAAgBT,EAAmBU,SAASD,KACpDE,SAASF,IACR,UAAWL,KAAKK,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElDL,KAAKK,GAAeN,EAAMG,OAAOG,EAAY,G,EAwBrD6C,qBAAqBnD,GACnB,GAAIC,KAAKC,UAAYF,EAAMG,OAAO,GAAI,CACpCF,KAAK+C,0BAA0BhD,EAAMG,OAAO,G,EAKhDiD,kCAAkCpD,GAChC,MAAOW,EAAY0C,GAA8BrD,EAAMG,OACvD,GAAIF,KAAKC,UAAYS,EAAY,CAC/BV,KAAK+C,0BAA0BK,E,EAInClC,oBACElB,KAAKmB,QAAUnB,KAAKoB,KAAKC,QAAQ,cACjCrB,KAAKC,QAAUD,KAAKmB,QAAQlB,O,CAG9BqB,oBACE1B,EAAmBW,SAASgB,IAC1BvB,KAAKuB,GAAiBvB,KAAKmB,QAAQI,EAAc,G,CAIrD8B,mBACErD,KAAKsD,mBAAmBR,KAAK9C,KAAKC,Q,CAGpCuB,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,kBAAmB,KACnB,sBAAuB3B,KAAK4B,cAC5B,sBAAuB5B,KAAK6B,iBAC5B,4BAA6B7B,KAAKuD,cAAgB,UAClD,8BAA+BvD,KAAKuD,cAAgB,cAGrDvD,KAAKwD,mBACJ/B,EAAA,MAAIE,MAAM,yDACRF,EAAA,OAAKE,MAAM,sBACTF,EAAA,SAAOE,MAAM,+CACXF,EAAA,SACEE,MAAM,kBACN8B,KAAK,WACLC,SAAW3D,GAAUC,KAAKqC,oBAAoBtC,GAC9C0C,QAASzC,KAAKuC,wBAMxBd,EAAA,a"}

package/dist/tegel/p-84e5d141.entry.js

@@ -1,2 +0,0 @@
-import{r as d,h as s,H as o,g as a}from"./p-0b4eba86.js";const l=":root,.sdds-mode-light{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-white);--sdds-modal-text:var(--sdds-grey-958);--sdds-modal-icon:var(--sdds-black);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-grey-900);--sdds-modal-text:var(--sdds-grey-50);--sdds-modal-icon:var(--sdds-white);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-modal{box-sizing:border-box;background-color:var(--sdds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.sdds-modal *{box-sizing:border-box}.sdds-modal::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-track{background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500);border-radius:0 1em 1em 0}.sdds-modal__actions-sticky{overflow:hidden}.sdds-modal__actions-sticky .sdds-modal-body{font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.sdds-modal__actions-sticky .sdds-modal-actions{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--sdds-modal-background);padding:var(--sdds-spacing-element-16);display:flex;gap:16px}.sdds-modal__actions-static .sdds-modal-actions{background-color:var(--sdds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.sdds-modal-xs{width:100%}.sdds-modal-sm{width:100%}.sdds-modal-md{width:100%}.sdds-modal-lg{width:100%}}@media (min-width: 672px){.sdds-modal-xs{width:75%}.sdds-modal-sm{width:62.5%}.sdds-modal-md{width:75%}.sdds-modal-lg{width:100%}}@media (min-width: 1056px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:43.75%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1312px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1584px){.sdds-modal-xs{width:25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:50%}.sdds-modal-lg{width:75%}}@media (max-width: 320px){.sdds-modal-md,.sdds-modal-lg,.sdds-modal-sm{height:100%}.sdds-modal-md slot[name=sdds-modal-actions]::slotted(*),.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(*),.sdds-modal-sm slot[name=sdds-modal-actions]::slotted(*){display:flex}}.sdds-modal-header{display:flex;padding-bottom:var(--sdds-spacing-element-8);position:sticky;top:0;background-color:var(--sdds-modal-background);z-index:1}.sdds-modal-header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--sdds-modal-background)}.sdds-modal-headline{color:var(--sdds-modal-text);font:var(--sdds-headline-05);letter-spacing:var(--sdds-headline-05-ls);margin:0;flex:1;color:var(--sdds-modal-text)}.sdds-modal-body{color:var(--sdds-modal-text);font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.sdds-modal-body::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-track{background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500)}@media (min-width: 1056px){.sdds-modal-body{padding-right:64px}}.sdds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}.sdds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.sdds-modal-backdrop{padding:0}}.sdds-modal-backdrop.show{display:flex}.sdds-modal-backdrop.hide{display:none}button.sdds-modal-close{background-color:transparent;border:0;padding:0;appearance:unset}.sdds-modal-close{display:inline-block;height:auto;color:var(--sdds-modal-icon);cursor:pointer}.sdds-modal-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media (min-width: 320px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn svg{fill:var(--sdds-modal-icon)}.sdds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .sdds-modal-close{border:none;background-color:transparent}:host .sdds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";const i=class{constructor(s){d(this,s);this.prevent=false;this.size="md";this.actions="static";this.open=false}async openModal(){this.open=true}setDissmissButtons(){const d=this.el.querySelectorAll("[data-dismiss-modal]");[...Array.from(d),this.closeButtonEl].forEach((d=>{d.addEventListener("click",(()=>{this.open=false}))}))}handleClick(d){const s=d.composedPath();const o=s[0];if(o.classList[0]==="sdds-modal-close"||o.classList[0]==="sdds-modal-backdrop"&&this.prevent===false){this.open=false}}componentDidRender(){this.setDissmissButtons()}render(){return s(o,{onClick:d=>{this.handleClick(d)},class:`sdds-modal-backdrop ${this.open?"show":"hide"}`},s("div",{class:`sdds-modal ${this.actions?`sdds-modal__actions-${this.actions}`:""} ${this.size?`sdds-modal-${this.size}`:""} `},s("div",{class:"sdds-modal-header"},s("slot",{name:"sdds-modal-headline"}),s("button",{class:"sdds-modal-close","aria-label":"close",ref:d=>{this.closeButtonEl=d}},s("sdds-icon",{name:"cross",size:"20px"}))),s("div",{class:"sdds-modal-body"},s("slot",{name:"sdds-modal-body"})),s("div",{class:"sdds-modal-actions"},s("slot",{name:"sdds-modal-actions"}))))}get el(){return a(this)}};i.style=l;export{i as sdds_modal};
-//# sourceMappingURL=p-84e5d141.entry.js.map

package/dist/tegel/p-84e5d141.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["modalCss","Modal","async","this","open","setDissmissButtons","nodes","el","querySelectorAll","Array","from","closeButtonEl","forEach","addEventListener","handleClick","e","targetList","composedPath","target","classList","prevent","componentDidRender","render","h","Host","onClick","event","class","actions","size","name","ref"],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n  $screen-s: (\n    xs: 100%,\n    sm: 100%,\n    md: 100%,\n    lg: 100%,\n  ),\n  $screen-md: (\n    xs: 75%,\n    sm: 62.5%,\n    md: 75%,\n    lg: 100%,\n  ),\n  $screen-l: (\n    xs: 31.25%,\n    sm: 43.75%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xl: (\n    xs: 31.25%,\n    sm: 37.5%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xxl: (\n    xs: 25%,\n    sm: 37.5%,\n    md: 50%,\n    lg: 75%,\n  ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n  }\n}\n\n@mixin modal-scroll-outer {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n    border-radius: 0 1em 1em 0;\n  }\n}\n\n@mixin modal-host {\n  left: 0;\n  top: 0;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  z-index: z(modal);\n  background-color: var(--sdds-modal-backdrop);\n  padding: 0 16px;\n\n  @media (max-width: $screen-s) {\n    padding: 0;\n  }\n\n  &.show {\n    display: flex;\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n\n@mixin modal-header {\n  display: flex;\n  padding-bottom: var(--sdds-spacing-element-8);\n  position: sticky;\n  top: 0;\n  background-color: var(--sdds-modal-background);\n  z-index: 1;\n\n  &::before {\n    content: ' ';\n    position: absolute;\n    height: 16px;\n    top: -16px;\n    width: 100%;\n    background-color: var(--sdds-modal-background);\n  }\n}\n\n@mixin modal-headline {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-headline-05);\n  letter-spacing: var(--sdds-headline-05-ls);\n  margin: 0;\n  flex: 1;\n}\n\n@mixin modal-body {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-body-01);\n  letter-spacing: var(--sdds-body-01-ls);\n  padding-bottom: 40px;\n  overflow-y: visible;\n  padding-right: 16px;\n  @include modal-scroll-inner;\n\n  @media (min-width: $screen-l) {\n    padding-right: 64px;\n  }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-modal-background);\n  margin: auto;\n  position: relative;\n  border-radius: 4px;\n  padding: 16px;\n  max-height: 85vh;\n  overflow-y: auto;\n\n  @include modal-scroll-outer;\n\n  &__actions-sticky {\n    overflow: hidden;\n\n    .sdds-modal-body {\n      font: var(--sdds-body-01);\n      letter-spacing: var(--sdds-body-01-ls);\n      padding-bottom: 96px;\n      margin: 0 -16px 0 0;\n      max-height: calc(85vh - 36px);\n      overflow-y: auto;\n    }\n\n    .sdds-modal-actions {\n      position: absolute;\n      bottom: -1px;\n      left: 0;\n      right: 0;\n      background-color: var(--sdds-modal-background);\n      padding: var(--sdds-spacing-element-16);\n      display: flex;\n      gap: 16px;\n    }\n  }\n\n  &__actions-static {\n    .sdds-modal-actions {\n      background-color: var(--sdds-modal-background);\n      display: flex;\n      gap: 16px;\n    }\n  }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n  @media (min-width: $screen) {\n    @each $modal, $value in $modals {\n      .sdds-modal-#{$modal} {\n        width: $value;\n      }\n    }\n  }\n}\n\n@media (max-width: $screen-s) {\n  .sdds-modal-md,\n  .sdds-modal-lg,\n  .sdds-modal-sm {\n    height: 100%;\n\n    slot[name='sdds-modal-actions']::slotted(*) {\n      display: flex;\n    }\n  }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n  @include modal-header;\n}\n\n.sdds-modal-headline {\n  @include modal-headline;\n\n  color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n  @include modal-body;\n}\n\n.sdds-modal-backdrop {\n  @include sdds-box-sizing;\n  @include modal-host;\n}\n\nbutton.sdds-modal-close {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  appearance: unset;\n}\n\n.sdds-modal-close {\n  display: inline-block;\n  height: auto;\n  color: var(--sdds-modal-icon);\n  cursor: pointer;\n\n  &:focus {\n    @include sdds-focus-state;\n  }\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n  display: inline-block;\n  height: auto;\n  background-repeat: no-repeat;\n  cursor: pointer;\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n\n  svg {\n    fill: var(--sdds-modal-icon);\n  }\n}\n\n.sdds-modal-overflow {\n  overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n  @include modal-host;\n\n  .sdds-modal-close {\n    border: none;\n    background-color: transparent;\n  }\n\n  .sdds-modal-close-btn {\n    border: none;\n    background-color: transparent;\n  }\n}\n\n:host(.show) {\n  display: flex;\n}\n\n:host(.hide) {\n  display: none;\n}\n","import { 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"],"mappings":"yDAAA,MAAMA,EAAW,++M,MCOJC,EAAK,M,sCAEW,M,UAGe,K,aAGH,S,UAGf,K,CAQxBC,kBACEC,KAAKC,KAAO,I,CAGdC,qBACE,MAAMC,EAAQH,KAAKI,GAAGC,iBAAiB,wBAEvC,IAAIC,MAAMC,KAAKJ,GAAQH,KAAKQ,eAAeC,SAASL,IAClDA,EAAGM,iBAAiB,SAAS,KAC3BV,KAAKC,KAAO,KAAK,GACjB,G,CAINU,YAAYC,GACV,MAAMC,EAAaD,EAAEE,eACrB,MAAMC,EAASF,EAAW,GAC1B,GACEE,EAAOC,UAAU,KAAO,oBACvBD,EAAOC,UAAU,KAAO,uBAAyBhB,KAAKiB,UAAY,MACnE,CACAjB,KAAKC,KAAO,K,EAIhBiB,qBACElB,KAAKE,oB,CAGPiB,SACE,OACEC,EAACC,EAAI,CACHC,QAAUC,IACRvB,KAAKW,YAAYY,EAAM,EAEzBC,MAAO,uBAAuBxB,KAAKC,KAAO,OAAS,UAEnDmB,EAAA,OACEI,MAAO,cAAcxB,KAAKyB,QAAU,uBAAuBzB,KAAKyB,UAAY,MAC1EzB,KAAK0B,KAAO,cAAc1B,KAAK0B,OAAS,OAG1CN,EAAA,OAAKI,MAAM,qBACTJ,EAAA,QAAMO,KAAK,wBACXP,EAAA,UACEI,MAAM,mBAAkB,aACb,QACXI,IAAMxB,IACJJ,KAAKQ,cAAgBJ,CAAiB,GAGxCgB,EAAA,aAAWO,KAAK,QAAQD,KAAK,WAIjCN,EAAA,OAAKI,MAAM,mBACTJ,EAAA,QAAMO,KAAK,qBAGbP,EAAA,OAAKI,MAAM,sBACTJ,EAAA,QAAMO,KAAK,yB"}

package/dist/tegel/p-913cb5e9.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,H as a,g as o}from"./p-0b4eba86.js";const i='.sdds-navigation-tabs{box-sizing:border-box;background-color:var(--sdds-navigation-tabs-background);position:relative;display:flex;}.sdds-navigation-tabs *{box-sizing:border-box}.sdds-navigation-tabs::after{content:" ";display:block;border-bottom:1px solid var(--sdds-navigation-tabs-horizontal-divider-background);opacity:var(--sdds-navigation-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-navigation-tabs-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-navigation-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-navigation-tabs-forward{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-forward__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-forward:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover);text-decoration:none}.sdds-navigation-tabs-forward:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-forward:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-navigation-tabs-back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;left:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-back__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-back:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover)}.sdds-navigation-tabs-back:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}::slotted(.sdds-navigation-tabs-tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);opacity:0.6;padding:26px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}::slotted(.sdds-navigation-tabs-tab)::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}::slotted(.sdds-navigation-tabs-tab:first-child){margin-left:32px}::slotted(.sdds-navigation-tabs-tab:last-child){margin-right:32px}::slotted(.sdds-navigation-tabs-tab:hover){color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}::slotted(.sdds-navigation-tabs-tab:hover)::after{width:100%}::slotted(.sdds-navigation-tabs-tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-navigation-tabs-tab-color-focus);opacity:1}::slotted(.sdds-navigation-tabs-tab:focus)::after{width:0}::slotted(.sdds-navigation-tabs-tab-active){color:var(--sdds-navigation-tabs-tab-color-active);opacity:1}::slotted(.sdds-navigation-tabs-tab-active)::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}::slotted(.sdds-navigation-tabs-tab-active:focus)::after{width:100%}::slotted(.sdds-navigation-tabs-tab-disabled){color:var(--sdds-navigation-tabs-tab-color-disabled);opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled);pointer-events:none}';const n=class{constructor(s){t(this,s);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.buttonWidth=0;this.tabs=[];this.showLeftScroll=false;this.showRightScroll=false;this.modeVariant=null}componentDidRender(){this.calculateButtonWidth()}componentDidLoad(){const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let a=0;const o=Array.from(this.host.children);o.forEach((t=>{const s=window.getComputedStyle(t);a+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight);t.classList.add("sdds-navigation-tabs-tab")}));this.componentWidth=s;this.buttonsWidth=a;this.scrollWidth=a-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));t.observe(this.navWrapperElement);this.calculateButtonWidth()}calculateButtonWidth(){let t=0;const s=Array.from(this.host.children);s.forEach((s=>{const a=window.getComputedStyle(s);const o=s.clientWidth+parseFloat(a.marginLeft)+parseFloat(a.marginRight);if(o>t){t=o}}));this.buttonWidth=t}scrollRight(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t+this.buttonWidth;this.evaluateScrollButtons()}scrollLeft(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t-this.buttonWidth;this.evaluateScrollButtons()}evaluateScrollButtons(){const t=this.navWrapperElement.scrollLeft;if(t>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(t<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}render(){return s(a,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("div",{class:"sdds-navigation-tabs"},s("div",{class:"sdds-navigation-tabs-wrapper",ref:t=>{this.navWrapperElement=t}},s("slot",null)),s("div",{class:"sdds-navigation-tabs-navigation"},s("button",{class:`sdds-navigation-tabs-forward ${this.showRightScroll?"sdds-navigation-tabs-forward-show":""}`,onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",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",fill:"#0D0F13"}))),s("button",{class:`sdds-navigation-tabs-back ${this.showLeftScroll?"sdds-navigation-tabs-back-show":""}`,onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",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",fill:"#0D0F13"}))))))}get host(){return o(this)}};n.style=i;export{n as sdds_navigation_tabs};
-//# sourceMappingURL=p-913cb5e9.entry.js.map

package/dist/tegel/p-913cb5e9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["navigationTabsCss","NavigationTabs","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","buttonWidth","componentDidRender","calculateButtonWidth","componentDidLoad","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","classList","add","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","best","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","ref","el","onClick","disabled","height","viewBox","fill","xmlns","d"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs.scss?tag=sdds-navigation-tabs&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n\n.sdds-navigation-tabs {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-navigation-tabs-background);\n  position: relative;\n  display: flex;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-navigation-tabs-horizontal-divider-background);\n    opacity: var(--sdds-navigation-tabs-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  &-wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &-forward {\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-navigation-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-navigation-tabs-scroll-btn-background-hover);\n      text-decoration: none;\n    }\n\n    &:active {\n      background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n  }\n\n  &-back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: var(--sdds-navigation-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-navigation-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\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-navigation-tabs-tab-color);\n    opacity:0.6;\n    padding: 26px 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    background-color: transparent;\n    border: 0;\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-navigation-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\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-navigation-tabs-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-navigation-tabs-tab-color-focus);\n    opacity: 1;\n\n    &::after {\n      width: 0;\n    }\n  }\n\n  ::slotted(&-tab-active) {\n    color: var(--sdds-navigation-tabs-tab-color-active);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n    }\n  }\n\n  ::slotted(&-tab-active:focus)::after {\n    width: 100%;\n  }\n\n  ::slotted(&-tab-disabled) {\n    color: var(--sdds-navigation-tabs-tab-color-disabled);\n    opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n    pointer-events: none;\n  }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs',\n  styleUrl: 'navigation-tabs.scss',\n  shadow: true,\n})\nexport class NavigationTabs {\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   /** Variant of the tabs, primary= on white, secondary= on grey50 */\n   @Prop() modeVariant: 'primary' | 'secondary' = null;\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-navigation-tabs-tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\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-navigation-tabs\">\n          <div\n            class=\"sdds-navigation-tabs-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-navigation-tabs-navigation\">\n            <button\n              class={`sdds-navigation-tabs-forward ${\n                this.showRightScroll ? 'sdds-navigation-tabs-forward-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=\"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                  fill=\"#0D0F13\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-navigation-tabs-back ${\n                this.showLeftScroll ? 'sdds-navigation-tabs-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=\"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                  fill=\"#0D0F13\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,m7G,MCObC,EAAc,M,yBAYzBC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EAEtBJ,KAAAK,YAAsB,E,UAjBM,G,oBAEO,M,qBAEC,M,iBAGY,I,CAYhDC,qBACEN,KAAKO,sB,CAGPC,mBACE,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMX,EAAiBW,EAAMC,YAAYC,MACzC,IAAIZ,EAAe,EAEnB,MAAMa,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtClB,GACEkB,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1EP,EAAUQ,UAAUC,IAAI,2BAA2B,IAGrD9B,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK+B,uB,KACA,CACL/B,KAAKgC,eAAiB,MACtBhC,KAAKiC,gBAAkB,K,IAEzB,IAGJxB,EAAeyB,QAAQlC,KAAKC,mBAE5BD,KAAKO,sB,CAGPA,uBACE,IAAI4B,EAAO,EACX,MAAMnB,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtC,MAAMN,EACJM,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1E,GAAIb,EAAQoB,EAAM,CAChBA,EAAOpB,C,KAIXf,KAAKK,YAAc8B,C,CAGrBC,cACE,MAAMC,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPO,aACE,MAAMD,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPA,wBACE,MAAMM,EAASrC,KAAKC,kBAAkBqC,WAEtC,GAAID,GAAUrC,KAAKI,YAAa,CAC9BJ,KAAKiC,gBAAkB,K,KAClB,CACLjC,KAAKiC,gBAAkB,I,CAGzB,GAAII,GAAU,EAAG,CACfrC,KAAKgC,eAAiB,K,KACjB,CACLhC,KAAKgC,eAAiB,I,EAI1BO,SACE,OACEC,EAACC,EAAI,CAAEC,MAAO,GAAG1C,KAAK2C,cAAgB,KAAO,qBAAqB3C,KAAK2C,cAAe,MACpFH,EAAA,OAAKE,MAAM,wBACTF,EAAA,OACEE,MAAM,+BACNE,IAAMC,IACJ7C,KAAKC,kBAAoB4C,CAAiB,GAG5CL,EAAA,cAEFA,EAAA,OAAKE,MAAM,mCACTF,EAAA,UACEE,MAAO,gCACL1C,KAAKiC,gBAAkB,oCAAsC,KAE/Da,QAAS,IAAM9C,KAAKoC,cACpBW,UAAW/C,KAAKiC,iBAEhBO,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,4WACFF,KAAK,cAIXV,EAAA,UACEE,MAAO,6BACL1C,KAAKgC,eAAiB,iCAAmC,KAE3Dc,QAAS,IAAM9C,KAAKsC,aACpBS,UAAW/C,KAAKgC,gBAEhBQ,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,kXACFF,KAAK,gB"}

package/dist/tegel/p-92869ad1.entry.js

@@ -1,2 +0,0 @@
-import{r as d,h as s,H as n,g as r}from"./p-0b4eba86.js";const o=":root,.sdds-mode-light{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-primary-background-disabled-secondary:var(--sdds-white);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-black);--sdds-btn-secondary-border-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-black);--sdds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-black);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-icon-secondary-fill-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-color-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--sdds-btn-icon-secondary-color-focus:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-black);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-black);--sdds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-black);--sdds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-black);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-danger-background-disabled-secondary:var(--sdds-white);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-mode-dark{--sdds-btn-primary-background:var(--sdds-blue-400);--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-background-active:var(--sdds-blue-300);--sdds-btn-primary-background-focus:var(--sdds-blue-600);--sdds-btn-primary-border-color-focus:var(--sdds-blue-400);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-primary-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-600);--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-white);--sdds-btn-secondary-border-color:var(--sdds-white);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-white);--sdds-btn-secondary-border-color-active:var(--sdds-white);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-white);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:var(--sdds-white);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-grey-50);--sdds-btn-icon-secondary-color:var(--sdds-grey-50);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-white);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-white);--sdds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-white);--sdds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-white);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-grey-50);--sdds-btn-icon-ghost-color:var(--sdds-grey-50);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-danger-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-on-white-bg{--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-secondary-disabled);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-secondary-disabled)}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:16px;line-height:1;position:absolute;right:0}.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:16px;line-height:1.25}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-primary-icon-fill);color:var(--sdds-btn-primary-icon-color);font-size:16px}.sdds-btn{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--sdds-spacing-element-20);border:1px solid}.sdds-btn *{box-sizing:border-box}.sdds-btn:disabled,.sdds-btn.disabled{cursor:unset}.sdds-btn:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16);width:20px;height:20px;line-height:0}.sdds-btn.sdds-btn-xs{padding:var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}.sdds-btn.sdds-btn-xs:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm{padding:var(--sdds-spacing-element-12);height:40px}.sdds-btn.sdds-btn-sm.sdds-btn-only-icon{padding:11px}.sdds-btn.sdds-btn-sm:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-24);width:16px;height:16px}.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-12)}.sdds-btn.sdds-btn-md{padding:var(--sdds-spacing-element-16);height:48px}.sdds-btn.sdds-btn-md.sdds-btn-only-icon{padding:13px}.sdds-btn.sdds-btn-md:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-md span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-20)}.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-lg{padding:var(--sdds-spacing-element-20);height:56px}.sdds-btn.sdds-btn-lg.sdds-btn-only-icon{padding:17px}.sdds-btn.sdds-btn-lg:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-lg span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:28px}.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-fullbleed{width:inherit;display:flex;justify-content:center}.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon,.sdds-btn.sdds-btn-fullbleed.sdds-btn-icon{margin-left:var(--sdds-spacing-element-8)}.sdds-btn span.sdds-btn-text{align-self:baseline}.sdds-btn.sdds-btn-primary{background:var(--sdds-btn-primary-background);border-color:var(--sdds-btn-primary-border-color);color:var(--sdds-btn-primary-color);outline-color:var(--sdds-btn-primary-outline-color)}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill);color:var(--sdds-btn-icon-primary-fill);fill:var(--sdds-btn-icon-primary-color);color:var(--sdds-btn-icon-primary-color);font-size:16px}.sdds-btn.sdds-btn-primary:hover{background:var(--sdds-btn-primary-background-hover);border-color:var(--sdds-btn-primary-border-color-hover);color:var(--sdds-btn-primary-color-hover);outline-color:var(--sdds-btn-primary-outline-color-hover)}.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-hover);color:var(--sdds-btn-icon-primary-fill-hover);fill:var(--sdds-btn-icon-primary-color-hover);color:var(--sdds-btn-icon-primary-color-hover)}.sdds-btn.sdds-btn-primary:focus{background:var(--sdds-btn-primary-background-focus);border-color:var(--sdds-btn-primary-border-color-focus);color:var(--sdds-btn-primary-color-focus);outline-color:var(--sdds-btn-primary-outline-color-focus)}.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-focus);color:var(--sdds-btn-icon-primary-fill-focus);fill:var(--sdds-btn-icon-primary-color-focus);color:var(--sdds-btn-icon-primary-color-focus)}.sdds-btn.sdds-btn-primary:active,.sdds-btn.sdds-btn-primary.active{background:var(--sdds-btn-primary-background-active);border-color:var(--sdds-btn-primary-border-color-active);color:var(--sdds-btn-primary-color-active);outline-color:var(--sdds-btn-primary-outline-color-active)}.sdds-btn.sdds-btn-primary.disabled,.sdds-btn.sdds-btn-primary:disabled{cursor:not-allowed;background:var(--sdds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-primary-outline-color-disabled)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary{background:var(--sdds-btn-secondary-background);border-color:var(--sdds-btn-secondary-border-color);color:var(--sdds-btn-secondary-color);outline-color:var(--sdds-btn-secondary-outline-color)}.sdds-btn.sdds-btn-secondary .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill);color:var(--sdds-btn-icon-secondary-fill);fill:var(--sdds-btn-icon-secondary-color);color:var(--sdds-btn-icon-secondary-color);font-size:16px}.sdds-btn.sdds-btn-secondary:hover{background:var(--sdds-btn-secondary-background-hover);border-color:var(--sdds-btn-secondary-border-color-hover);color:var(--sdds-btn-secondary-color-hover);outline-color:var(--sdds-btn-secondary-outline-color-hover)}.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-hover);color:var(--sdds-btn-icon-secondary-fill-hover);fill:var(--sdds-btn-icon-secondary-color-hover);color:var(--sdds-btn-icon-secondary-color-hover)}.sdds-btn.sdds-btn-secondary:focus{background:var(--sdds-btn-secondary-background-focus);border-color:var(--sdds-btn-secondary-border-color-focus);color:var(--sdds-btn-secondary-color-focus);outline-color:var(--sdds-btn-secondary-outline-color-focus)}.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-focus);color:var(--sdds-btn-icon-secondary-fill-focus);fill:var(--sdds-btn-icon-secondary-color-focus);color:var(--sdds-btn-icon-secondary-color-focus)}.sdds-btn.sdds-btn-secondary:active,.sdds-btn.sdds-btn-secondary.active{background:var(--sdds-btn-secondary-background-active);border-color:var(--sdds-btn-secondary-border-color-active);color:var(--sdds-btn-secondary-color-active);outline-color:var(--sdds-btn-secondary-outline-color-active)}.sdds-btn.sdds-btn-secondary.disabled,.sdds-btn.sdds-btn-secondary:disabled{cursor:not-allowed;background:var(--sdds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-secondary-outline-color-disabled)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost{background:var(--sdds-btn-ghost-background);border-color:var(--sdds-btn-ghost-border-color);color:var(--sdds-btn-ghost-color);outline-color:var(--sdds-btn-ghost-outline-color)}.sdds-btn.sdds-btn-ghost .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill);color:var(--sdds-btn-icon-ghost-fill);fill:var(--sdds-btn-icon-ghost-color);color:var(--sdds-btn-icon-ghost-color);font-size:16px}.sdds-btn.sdds-btn-ghost:hover{background:var(--sdds-btn-ghost-background-hover);border-color:var(--sdds-btn-ghost-border-color-hover);color:var(--sdds-btn-ghost-color-hover);outline-color:var(--sdds-btn-ghost-outline-color-hover)}.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-hover);color:var(--sdds-btn-icon-ghost-fill-hover);fill:var(--sdds-btn-icon-ghost-color-hover);color:var(--sdds-btn-icon-ghost-color-hover)}.sdds-btn.sdds-btn-ghost:focus{background:var(--sdds-btn-ghost-background-focus);border-color:var(--sdds-btn-ghost-border-color-focus);color:var(--sdds-btn-ghost-color-focus);outline-color:var(--sdds-btn-ghost-outline-color-focus)}.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-focus);color:var(--sdds-btn-icon-ghost-fill-focus);fill:var(--sdds-btn-icon-ghost-color-focus);color:var(--sdds-btn-icon-ghost-color-focus)}.sdds-btn.sdds-btn-ghost:active,.sdds-btn.sdds-btn-ghost.active{background:var(--sdds-btn-ghost-background-active);border-color:var(--sdds-btn-ghost-border-color-active);color:var(--sdds-btn-ghost-color-active);outline-color:var(--sdds-btn-ghost-outline-color-active)}.sdds-btn.sdds-btn-ghost.disabled,.sdds-btn.sdds-btn-ghost:disabled{cursor:not-allowed;background:var(--sdds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-ghost-outline-color-disabled)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger{background:var(--sdds-btn-danger-background);border-color:var(--sdds-btn-danger-border-color);color:var(--sdds-btn-danger-color);outline-color:var(--sdds-btn-danger-outline-color)}.sdds-btn.sdds-btn-danger .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill);color:var(--sdds-btn-icon-danger-fill);fill:var(--sdds-btn-icon-danger-color);color:var(--sdds-btn-icon-danger-color);font-size:16px}.sdds-btn.sdds-btn-danger:hover{background:var(--sdds-btn-danger-background-hover);border-color:var(--sdds-btn-danger-border-color-hover);color:var(--sdds-btn-danger-color-hover);outline-color:var(--sdds-btn-danger-outline-color-hover)}.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-hover);color:var(--sdds-btn-icon-danger-fill-hover);fill:var(--sdds-btn-icon-danger-color-hover);color:var(--sdds-btn-icon-danger-color-hover)}.sdds-btn.sdds-btn-danger:focus{background:var(--sdds-btn-danger-background-focus);border-color:var(--sdds-btn-danger-border-color-focus);color:var(--sdds-btn-danger-color-focus);outline-color:var(--sdds-btn-danger-outline-color-focus)}.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-focus);color:var(--sdds-btn-icon-danger-fill-focus);fill:var(--sdds-btn-icon-danger-color-focus);color:var(--sdds-btn-icon-danger-color-focus)}.sdds-btn.sdds-btn-danger:active,.sdds-btn.sdds-btn-danger.active{background:var(--sdds-btn-danger-background-active);border-color:var(--sdds-btn-danger-border-color-active);color:var(--sdds-btn-danger-color-active);outline-color:var(--sdds-btn-danger-outline-color-active)}.sdds-btn.sdds-btn-danger.disabled,.sdds-btn.sdds-btn-danger:disabled{cursor:not-allowed;background:var(--sdds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-danger-outline-color-disabled)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}i.sdds-btn-icon[slot=icon]{line-height:1}:host(sdds-button){display:flex;align-items:center}:host(sdds-button) ::slotted([slot=icon]){width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]){width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button[fullbleed]){width:inherit;justify-content:center}:host(sdds-button[only-icon]) .sdds-btn-sm{padding:11px}:host(sdds-button[only-icon]) .sdds-btn-md{padding:13px}:host(sdds-button[only-icon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([only-icon])){display:flex;align-items:center}:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-24);width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-12)}:host(sdds-button:not([only-icon])) .sdds-btn-md ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-20);width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .sdds-btn-lg ::slotted([slot=icon]){margin-left:28px;width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}";const t=class{constructor(s){d(this,s);this.text="";this.type="primary";this.size="lg";this.disabled=false;this.fullbleed=false;this.modeVariant=null;this.onlyIcon=false}componentWillLoad(){if(this.text===""){this.onlyIcon=true;this.host.setAttribute("only-icon","")}}render(){return s(n,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("button",{class:`sdds-btn sdds-btn-${this.type} \n        ${`sdds-btn-${this.size}`}\n        ${this.disabled?"disabled":""}\n        ${this.fullbleed?"sdds-btn-fullbleed":""}\n        ${this.onlyIcon?"sdds-btn-only-icon":""}`},s("span",{class:"sdds-btn-text"},this.text),s("slot",{name:"icon"})))}get host(){return r(this)}};t.style=o;export{t as sdds_button};
-//# sourceMappingURL=p-92869ad1.entry.js.map

package/dist/tegel/p-92869ad1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonCss","SddsButton","componentWillLoad","this","text","onlyIcon","host","setAttribute","render","h","Host","class","modeVariant","type","size","disabled","fullbleed","name"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  border: none;\n  box-shadow: none;\n  position: relative;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.sdds-btn-lg {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 20px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 20px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn-md {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 20px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 20px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn-sm {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 16px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 16px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n  fill: var(--sdds-btn-primary-icon-fill);\n  color: var(--sdds-btn-primary-icon-color);\n  font-size: 16px;\n}\n\n.sdds-btn {\n  @include button-base;\n\n  height: $btn-lg-height;\n  padding: var(--sdds-spacing-element-20);\n  border: 1px solid;\n\n  &:disabled,\n  &.disabled {\n    cursor: unset;\n  }\n\n  &:focus {\n    // TODO: decide on what tod o with these @include sdds-focus-state;\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  span.sdds-btn-text + .sdds-btn-icon {\n    margin-left: var(--sdds-spacing-element-16);\n    width: 20px;\n    height: 20px;\n    line-height: 0;\n  }\n\n  &.sdds-btn-xs {\n    padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n    height: $btn-xs-height;\n    font-size: 12px;\n    border-radius: 2px;\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n  }\n\n  &.sdds-btn-sm {\n    padding: var(--sdds-spacing-element-12);\n    height: $btn-sm-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-sm-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: var(--sdds-spacing-element-24);\n      width: 16px;\n      height: 16px;\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin: unset;\n        margin-left: var(--sdds-spacing-element-12);\n      }\n    }\n  }\n\n  &.sdds-btn-md {\n    padding: var(--sdds-spacing-element-16);\n    height: $btn-md-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-md-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  &.sdds-btn-lg {\n    padding: var(--sdds-spacing-element-20);\n    height: $btn-lg-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-lg-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: 28px;\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  &.sdds-btn-fullbleed {\n    width: inherit;\n    display: flex;\n    justify-content: center;\n\n    .sdds-btn-icon,\n    &.sdds-btn-icon {\n      margin-left: var(--sdds-spacing-element-8);\n    }\n  }\n\n  span.sdds-btn-text {\n    align-self: baseline;\n  }\n\n  @each $type in $types {\n    &.sdds-btn-#{$type} {\n      @each $prop in $props {\n        #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n      }\n\n      .sdds-btn-icon {\n        @each $prop in $iconProps {\n          fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n          color: var(--sdds-btn-icon-#{$type}-#{$prop});\n        }\n\n        font-size: 16px; //16px\n      }\n\n      &:hover {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n        }\n\n        .sdds-btn-icon {\n          @each $prop in $iconProps {\n            fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n            color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n          }\n        }\n      }\n\n      &:focus {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n        }\n\n        .sdds-btn-icon {\n          @each $prop in $iconProps {\n            fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n            color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n          }\n        }\n      }\n\n      &:active,\n      &.active {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n        }\n      }\n\n      &.disabled,\n      &:disabled {\n        @each $prop in $props {\n          cursor: not-allowed;\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n\n          .sdds-btn-icon,\n          &.sdds-btn-icon {\n            color: var(--sdds-grey-300);\n          }\n        }\n      }\n    }\n  }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n  line-height: 1;\n}\n\n:host(sdds-button) {\n  display: flex;\n  align-items: center;\n\n  ::slotted([slot='icon']) {\n    width: var(--sdds-spacing-element-20);\n    height: var(--sdds-spacing-element-20);\n  }\n\n  .sdds-btn-sm {\n    ::slotted([slot='icon']) {\n      width: var(--sdds-spacing-element-16);\n      height: var(--sdds-spacing-element-16);\n    }\n  }\n}\n\n:host(sdds-button[fullbleed]) {\n  width: inherit;\n  justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n  .sdds-btn-sm {\n    padding: $btn-sm-only-icon-padding;\n  }\n\n  .sdds-btn-md {\n    padding: $btn-md-only-icon-padding;\n  }\n\n  .sdds-btn-lg {\n    padding: $btn-lg-only-icon-padding;\n  }\n}\n\n:host(sdds-button:not([only-icon])) {\n  display: flex;\n  align-items: center;\n\n  .sdds-btn-sm {\n    ::slotted([slot='icon']) {\n      margin-left: var(--sdds-spacing-element-24);\n      width: var(--sdds-spacing-element-16);\n      height: var(--sdds-spacing-element-16);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-12);\n      }\n    }\n  }\n\n  .sdds-btn-md {\n    ::slotted([slot='icon']) {\n      margin-left: var(--sdds-spacing-element-20);\n      width: var(--sdds-spacing-element-20);\n      height: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  .sdds-btn-lg {\n    ::slotted([slot='icon']) {\n      // TODO - This should be a var value\n      margin-left: 28px;\n      width: var(--sdds-spacing-element-20);\n      height: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class SddsButton {\n  // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n  /** Text inside a button */\n  @Prop() text: string = '';\n\n  /** Type of button */\n  @Prop() type: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary';\n\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Control for disabled state of component */\n  @Prop() disabled: boolean = false;\n\n  /** When enabled, makes button take 100% width */\n  @Prop() fullbleed: boolean = false;\n\n  /** Set the mode variant of the the button. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() onlyIcon: boolean = false;\n\n  @Element() host: HostElement;\n\n  componentWillLoad() {\n    if (this.text === '') {\n      this.onlyIcon = true;\n      this.host.setAttribute('only-icon', '');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n      <button\n        class={`sdds-btn sdds-btn-${this.type} \n        ${`sdds-btn-${this.size}`}\n        ${this.disabled ? 'disabled' : ''}\n        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n      >\n        <span class=\"sdds-btn-text\">{this.text}</span>\n        <slot name=\"icon\" />\n      </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,y1yB,MCQLC,EAAU,M,mCAGE,G,UAGsC,U,UAEnB,K,cAGd,M,eAGC,M,iBAGkB,K,cAElB,K,CAI7BC,oBACE,GAAIC,KAAKC,OAAS,GAAI,CACpBD,KAAKE,SAAW,KAChBF,KAAKG,KAAKC,aAAa,YAAa,G,EAIxCC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAGR,KAAKS,cAAgB,KAAO,qBAAqBT,KAAKS,cAAe,MACrFH,EAAA,UACEE,MAAO,qBAAqBR,KAAKU,kBAC/B,YAAYV,KAAKW,mBACjBX,KAAKY,SAAW,WAAa,eAC7BZ,KAAKa,UAAY,qBAAuB,eACxCb,KAAKE,SAAW,qBAAuB,MAEzCI,EAAA,QAAME,MAAM,iBAAiBR,KAAKC,MAClCK,EAAA,QAAMQ,KAAK,U"}

package/dist/tegel/p-93571e36.entry.js

@@ -1,2 +0,0 @@
-import{r as l,h as s,H as e,g as t}from"./p-0b4eba86.js";const i='.sdds-inline-tabs-fullbleed{box-sizing:border-box;display:flex;position:relative;}.sdds-inline-tabs-fullbleed *{box-sizing:border-box}.sdds-inline-tabs-fullbleed::after{content:" ";display:block;border-bottom:1px solid var(--sdds-inline-tabs-fullbleed-horizontal-divider-background);opacity:var(--sdds-inline-tabs-fullbleed-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-inline-tabs-fullbleed-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-inline-tabs-fullbleed-wrapper::-webkit-scrollbar{display:none}.sdds-inline-tabs-fullbleed--forward,.sdds-inline-tabs-fullbleed--back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-inline-tabs-fullbleed--forward__show,.sdds-inline-tabs-fullbleed--back__show{opacity:1;pointer-events:all}.sdds-inline-tabs-fullbleed--forward:hover,.sdds-inline-tabs-fullbleed--back:hover{background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background-hover)}.sdds-inline-tabs-fullbleed--forward:active,.sdds-inline-tabs-fullbleed--back:active{background-color:var(--sdds-inline-tabs-fullbleed-scroll-btn-background-active)}.sdds-inline-tabs-fullbleed--forward:focus,.sdds-inline-tabs-fullbleed--back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-inline-tabs-fullbleed--forward svg,.sdds-inline-tabs-fullbleed--back svg{fill:var(--sdds-inline-tabs-scroll-btn-color)}.sdds-inline-tabs-fullbleed-centered{justify-content:center}::slotted(.sdds-inline-tabs-fullbleed--tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-fullbleed-tab-color);opacity:0.6;padding:16px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;text-align:left}::slotted(.sdds-inline-tabs-fullbleed--tab)::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-fullbleed-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}::slotted(.sdds-inline-tabs-fullbleed--tab__active){color:var(--sdds-inline-tabs-fullbleed-tab-color-active);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab__active)::after{width:100%;background-color:var(--sdds-inline-tabs-fullbleed-tab-indicator-background-active)}::slotted(.sdds-inline-tabs-fullbleed--tab:first-child){margin-left:32px}::slotted(.sdds-inline-tabs-fullbleed--tab:last-child){margin-right:32px}::slotted(.sdds-inline-tabs-fullbleed--tab:hover){color:var(--sdds-inline-tabs-fullbleed-tab-color-hover);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab:hover)::after{width:100%}::slotted(.sdds-inline-tabs-fullbleed--tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-inline-tabs-fullbleed-tab-color-focus);opacity:1}::slotted(.sdds-inline-tabs-fullbleed--tab:focus)::after{width:0}::slotted(.sdds-inline-tabs-fullbleed--tab__active:focus)::after{width:100%}::slotted(.sdds-inline-tabs-fullbleed--tab__disabled){color:var(--sdds-inline-tabs-fullbleed-tab-color-disabled);pointer-events:none;opacity:var(--sdds-inline-tabs-fullbleed-tab-color-opacity-disabled)}.sdds-inline-tabs-fullbleed{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--forward{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}.sdds-inline-tabs-fullbleed .sdds-inline-tabs-fullbleed--back{background-color:var(--sdds-inline-tabs-fullbleed-tab-background)}';const d=class{constructor(s){l(this,s);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.buttonWidth=0;this.modeVariant=null;this.tabs=[];this.showLeftScroll=false;this.showRightScroll=false}componentDidRender(){this.calculateButtonWidth()}componentDidLoad(){const l=new ResizeObserver((l=>{l.forEach((l=>{const s=l.contentRect.width;let e=0;const t=Array.from(this.host.children);t.forEach((l=>{const s=window.getComputedStyle(l);e+=l.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight);l.classList.add("sdds-inline-tabs-fullbleed--tab")}));this.componentWidth=s;this.buttonsWidth=e;this.scrollWidth=e-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));l.observe(this.navWrapperElement);this.calculateButtonWidth()}calculateButtonWidth(){let l=0;const s=Array.from(this.host.children);s.forEach((s=>{const e=window.getComputedStyle(s);const t=s.clientWidth+parseFloat(e.marginLeft)+parseFloat(e.marginRight);if(t>l){l=t}}));this.buttonWidth=l}scrollRight(){const l=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=l+this.buttonWidth;this.evaluateScrollButtons()}scrollLeft(){const l=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=l-this.buttonWidth;this.evaluateScrollButtons()}evaluateScrollButtons(){const l=this.navWrapperElement.scrollLeft;if(l>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(l<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}render(){return s(e,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("div",{class:`sdds-inline-tabs-fullbleed`},s("div",{class:"sdds-inline-tabs-fullbleed-wrapper",ref:l=>{this.navWrapperElement=l}},s("slot",null)),s("div",{class:"sdds-inline-tabs-fullbleed-navigation"},s("button",{class:`sdds-inline-tabs-fullbleed--forward ${this.showRightScroll?"sdds-inline-tabs-fullbleed--back__show":""}`,onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",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"}))),s("button",{class:`sdds-inline-tabs-fullbleed--back ${this.showLeftScroll?"sdds-inline-tabs-fullbleed--back__show":""}`,onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",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"}))))))}get host(){return t(this)}};d.style=i;export{d as sdds_inline_tabs_fullbleed};
-//# sourceMappingURL=p-93571e36.entry.js.map

package/dist/tegel/p-93571e36.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["inlineTabsFullbleedCss","InlineTabsFullbleed","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","buttonWidth","componentDidRender","calculateButtonWidth","componentDidLoad","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","classList","add","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","best","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","ref","el","onClick","disabled","height","viewBox","fill","xmlns","d"],"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"],"mappings":"yDAAA,MAAMA,EAAyB,mqH,MCOlBC,EAAmB,M,yBAY9BC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EAEtBJ,KAAAK,YAAsB,E,iBAlByB,K,UAInB,G,oBAEO,M,qBAEC,K,CAYpCC,qBACEN,KAAKO,sB,CAGPC,mBACE,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMX,EAAiBW,EAAMC,YAAYC,MACzC,IAAIZ,EAAe,EAEnB,MAAMa,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtClB,GACEkB,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1EP,EAAUQ,UAAUC,IAAI,kCAAkC,IAG5D9B,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK+B,uB,KACA,CACL/B,KAAKgC,eAAiB,MACtBhC,KAAKiC,gBAAkB,K,IAEzB,IAGJxB,EAAeyB,QAAQlC,KAAKC,mBAE5BD,KAAKO,sB,CAGPA,uBACE,IAAI4B,EAAO,EACX,MAAMnB,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtC,MAAMN,EACJM,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1E,GAAIb,EAAQoB,EAAM,CAChBA,EAAOpB,C,KAIXf,KAAKK,YAAc8B,C,CAGrBC,cACE,MAAMC,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPO,aACE,MAAMD,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPA,wBACE,MAAMM,EAASrC,KAAKC,kBAAkBqC,WAEtC,GAAID,GAAUrC,KAAKI,YAAa,CAC9BJ,KAAKiC,gBAAkB,K,KAClB,CACLjC,KAAKiC,gBAAkB,I,CAGzB,GAAII,GAAU,EAAG,CACfrC,KAAKgC,eAAiB,K,KACjB,CACLhC,KAAKgC,eAAiB,I,EAI1BO,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAG1C,KAAK2C,cAAgB,KAAO,qBAAqB3C,KAAK2C,cAAe,MACnFH,EAAA,OAAKE,MAAO,8BACVF,EAAA,OACEE,MAAM,qCACNE,IAAMC,IACJ7C,KAAKC,kBAAoB4C,CAAiB,GAG5CL,EAAA,cAEFA,EAAA,OAAKE,MAAM,yCACTF,EAAA,UACEE,MAAO,uCACL1C,KAAKiC,gBAAkB,yCAA2C,KAEpEa,QAAS,IAAM9C,KAAKoC,cACpBW,UAAW/C,KAAKiC,iBAEhBO,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,gXAIRZ,EAAA,UACEE,MAAO,oCACL1C,KAAKgC,eAAiB,yCAA2C,KAEnEc,QAAS,IAAM9C,KAAKsC,aACpBS,UAAW/C,KAAKgC,gBAEhBQ,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,eACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,wX"}

package/dist/tegel/p-9904d7ec.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as d,h as s,H as o,g as t}from"./p-0b4eba86.js";const r=":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:white;--sdds-checkbox-background-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .sdds-table__header-cell--checkbox{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-data-table-color);background-color:var(--sdds-data-table-header-background);border-bottom:1px solid var(--sdds-data-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input{display:none}:host .sdds-table__expand-control-container .sdds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__expand-control-container .sdds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(sdds-header-cell:hover){background-color:var(--sdds-data-table-header-background-hover)}:host(.sdds-table--compact) .sdds-table__header-cell--checkbox{height:32px}:host(.sdds-table--compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__header-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--toolbar-available) .sdds-table__header-cell--checkbox{border-top-left-radius:0}";const a=["enableMultiselect","enableExpandableRows","verticalDividers","compactDesign","noMinWidth"];const c=class{constructor(s){e(this,s);this.mainCheckboxSelectedEvent=d(this,"mainCheckboxSelectedEvent",7);this.enableMultiselect=false;this.enableExpandableRows=false;this.mainCheckboxSelected=false;this.mainExpendSelected=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.whiteBackground=false;this.enableToolbarDesign=false;this.tableId=""}tablePropsChangedEventListener(e){if(this.tableId===e.detail.tableId){e.detail.changed.filter((e=>a.includes(e))).forEach((d=>{if(typeof this[d]==="undefined"){throw new Error(`Table prop is not supported: ${d}`)}this[d]=e.detail[d]}))}}updateMainCheckboxEventListener(e){const[d,s]=e.detail;if(this.tableId===d){this.mainCheckboxSelected=s}}singleRowExpandedEventListener(e){if(this.tableId===e.detail[0]){setTimeout((()=>{this.bodyExpandClicked()}),100)}}bodyExpandClicked(){const e=this.host.parentElement.querySelector("sdds-table-body").getElementsByClassName("sdds-table__row-extend--active").length;const d=this.host.parentElement.querySelector("sdds-table-body").getElementsByTagName("sdds-table-body-row-expendable").length;if(d===e){this.mainExpendSelected=true}else{this.mainExpendSelected=false}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){a.forEach((e=>{this[e]=this.tableEl[e]}))}componentWillRender(){this.enableToolbarDesign=this.host.closest("sdds-table").getElementsByTagName("sdds-table-toolbar").length>=1}headCheckBoxClicked(e){this.mainCheckboxSelected=e.currentTarget.checked;this.mainCheckboxSelectedEvent.emit([this.tableId,this.mainCheckboxSelected])}render(){return s(o,{class:{"sdds-table--compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--toolbar-available":this.enableToolbarDesign}},s("tr",null,this.enableMultiselect&&s("th",{class:"sdds-table__header-cell sdds-table__header-cell--checkbox"},s("div",{class:"sdds-checkbox-item"},s("label",{class:"sdds-form-label sdds-form-label--data-table"},s("input",{class:"sdds-form-input",type:"checkbox",onChange:e=>this.headCheckBoxClicked(e),checked:this.mainCheckboxSelected})))),this.enableExpandableRows&&s("th",{class:"sdds-table__header-cell sdds-table__header-cell--checkbox"}),s("slot",null)))}get host(){return t(this)}};c.style=r;export{c as sdds_table_header};
-//# sourceMappingURL=p-9904d7ec.entry.js.map

package/dist/tegel/p-9904d7ec.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tableHeaderCss","relevantTableProps","TableHeaderRow","tablePropsChangedEventListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","updateMainCheckboxEventListener","receivedID","receivedMainCheckboxStatus","mainCheckboxSelected","singleRowExpandedEventListener","setTimeout","bodyExpandClicked","numberOfExtendRowsActive","host","parentElement","querySelector","getElementsByClassName","length","numberOfExtendRows","getElementsByTagName","mainExpendSelected","connectedCallback","tableEl","closest","componentWillLoad","tablePropName","componentWillRender","enableToolbarDesign","headCheckBoxClicked","currentTarget","checked","mainCheckboxSelectedEvent","emit","render","h","Host","class","compactDesign","verticalDividers","enableMultiselect","type","onChange","e","enableExpandableRows"],"sources":["./src/components/data-table/table-header/table-header.scss?tag=sdds-table-header&encapsulation=shadow","./src/components/data-table/table-header/table-header.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-header-group;\n\n  .sdds-table__header-cell--checkbox {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    display: table-cell;\n    text-align: left;\n    color: var(--sdds-data-table-color);\n    background-color: var(--sdds-data-table-header-background);\n    border-bottom: 1px solid var(--sdds-data-table-divider);\n    height: 48px;\n    box-sizing: border-box;\n\n    // To fix issues with border-radius propagating up from button\n    overflow: hidden;\n    transition: background-color 200ms ease;\n    min-width: unset;\n    width: 48px;\n    padding: 0;\n    border-top-left-radius: 4px;\n  }\n\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .sdds-table__expand-control-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 48px;\n    cursor: pointer;\n\n    .sdds-table__expand-input {\n      display: none;\n    }\n\n    .sdds-expandable-row-icon {\n      height: 20px;\n      width: 20px;\n      transition: transform 200ms ease;\n      transform: rotate(0);\n    }\n\n    .sdds-expandable-row-icon--opened {\n      transform: rotate(180deg);\n    }\n  }\n\n  ::slotted(sdds-header-cell:hover) {\n    background-color: var(--sdds-data-table-header-background-hover);\n  }\n}\n\n:host(.sdds-table--compact) {\n  .sdds-table__header-cell--checkbox {\n    height: 32px;\n  }\n\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__header-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n\n:host(.sdds-table--toolbar-available) {\n  .sdds-table__header-cell--checkbox {\n    border-top-left-radius: 0;\n  }\n}\n","import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n\n@Component({\n  tag: 'sdds-table-header',\n  styleUrl: 'table-header.scss',\n  shadow: true,\n})\nexport class TableHeaderRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() enableExpandableRows: boolean = false;\n\n  @State() mainCheckboxSelected: boolean = false;\n\n  @State() mainExpendSelected: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() enableToolbarDesign: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Send status of main checkbox in header to the parent, sdds-table component */\n  @Event({\n    eventName: 'mainCheckboxSelectedEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  mainCheckboxSelectedEvent: 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('updateMainCheckboxEvent', { target: 'body' })\n  updateMainCheckboxEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedMainCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.mainCheckboxSelected = receivedMainCheckboxStatus;\n    }\n  }\n\n  @Listen('singleRowExpandedEvent', { target: 'body' })\n  singleRowExpandedEventListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      // TODO: Improve this logic. Why we get late repose in DOM?\n      setTimeout(() => {\n        this.bodyExpandClicked();\n      }, 100);\n    }\n  }\n\n  bodyExpandClicked() {\n    const numberOfExtendRowsActive = this.host.parentElement\n      .querySelector('sdds-table-body')\n      .getElementsByClassName('sdds-table__row-extend--active').length;\n    const numberOfExtendRows = this.host.parentElement\n      .querySelector('sdds-table-body')\n      .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n    if (numberOfExtendRows === numberOfExtendRowsActive) {\n      this.mainExpendSelected = true;\n    } else {\n      this.mainExpendSelected = false;\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentWillRender() {\n    this.enableToolbarDesign =\n      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n  }\n\n  headCheckBoxClicked(event) {\n    this.mainCheckboxSelected = event.currentTarget.checked;\n    this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table--compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--toolbar-available': this.enableToolbarDesign,\n        }}\n      >\n        <tr>\n          {this.enableMultiselect && (\n            <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n              <div class=\"sdds-checkbox-item\">\n                <label class=\"sdds-form-label sdds-form-label--data-table\">\n                  <input\n                    class=\"sdds-form-input\"\n                    type=\"checkbox\"\n                    onChange={(e) => this.headCheckBoxClicked(e)}\n                    checked={this.mainCheckboxSelected}\n                  />\n                </label>\n              </div>\n            </th>\n          )}\n          {this.enableExpandableRows && (\n            <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n          )}\n          <slot></slot>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAiB,g6MCGvB,MAAMC,EAAwD,CAC5D,oBACA,uBACA,mBACA,gBACA,c,MAQWC,EAAc,M,qHACa,M,0BAEG,M,0BAEA,M,wBAEF,M,sBAEF,M,mBAEH,M,gBAEH,M,qBAEK,M,yBAEI,M,aAEb,E,CAgB3BC,+BAA+BC,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAOD,QAAS,CACzCF,EAAMG,OAAOC,QACVC,QAAQC,GAAgBT,EAAmBU,SAASD,KACpDE,SAASF,IACR,UAAWL,KAAKK,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElDL,KAAKK,GAAeN,EAAMG,OAAOG,EAAY,G,EAMrDI,gCAAgCV,GAC9B,MAAOW,EAAYC,GAA8BZ,EAAMG,OACvD,GAAIF,KAAKC,UAAYS,EAAY,CAC/BV,KAAKY,qBAAuBD,C,EAKhCE,+BAA+Bd,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAO,GAAI,CAEpCY,YAAW,KACTd,KAAKe,mBAAmB,GACvB,I,EAIPA,oBACE,MAAMC,EAA2BhB,KAAKiB,KAAKC,cACxCC,cAAc,mBACdC,uBAAuB,kCAAkCC,OAC5D,MAAMC,EAAqBtB,KAAKiB,KAAKC,cAClCC,cAAc,mBACdI,qBAAqB,kCAAkCF,OAE1D,GAAIC,IAAuBN,EAA0B,CACnDhB,KAAKwB,mBAAqB,I,KACrB,CACLxB,KAAKwB,mBAAqB,K,EAI9BC,oBACEzB,KAAK0B,QAAU1B,KAAKiB,KAAKU,QAAQ,cACjC3B,KAAKC,QAAUD,KAAK0B,QAAQzB,O,CAG9B2B,oBACEhC,EAAmBW,SAASsB,IAC1B7B,KAAK6B,GAAiB7B,KAAK0B,QAAQG,EAAc,G,CAIrDC,sBACE9B,KAAK+B,oBACH/B,KAAKiB,KAAKU,QAAQ,cAAcJ,qBAAqB,sBAAsBF,QAAU,C,CAGzFW,oBAAoBjC,GAClBC,KAAKY,qBAAuBb,EAAMkC,cAAcC,QAChDlC,KAAKmC,0BAA0BC,KAAK,CAACpC,KAAKC,QAASD,KAAKY,sB,CAG1DyB,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,sBAAuBxC,KAAKyC,cAC5B,sBAAuBzC,KAAK0C,iBAC5B,gCAAiC1C,KAAK+B,sBAGxCO,EAAA,UACGtC,KAAK2C,mBACJL,EAAA,MAAIE,MAAM,6DACRF,EAAA,OAAKE,MAAM,sBACTF,EAAA,SAAOE,MAAM,+CACXF,EAAA,SACEE,MAAM,kBACNI,KAAK,WACLC,SAAWC,GAAM9C,KAAKgC,oBAAoBc,GAC1CZ,QAASlC,KAAKY,0BAMvBZ,KAAK+C,sBACJT,EAAA,MAAIE,MAAM,8DAEZF,EAAA,c"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["popoverCanvasCss","PopoverCanvas","handleOutsideClick","this","show","componentDidLoad","target","_a","referenceEl","document","querySelector","selector","renderedShowValue","popperInstance","createPopper","popoverCanvasElement","placement","modifiers","name","options","offset","offsetSkidding","offsetDistance","showCanvas","hideCanvas","addEventListener","event","stopPropagation","componentDidRender","update","disconnectedCallback","destroy","render","h","Host","class"],"sources":["./src/components/popover-canvas/popover-canvas.scss?tag=sdds-popover-canvas&encapsulation=shadow","./src/components/popover-canvas/popover-canvas.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  min-width: 160px;\n  min-height: 160px;\n  color: var(--sdds-popover-canvas-color);\n  background-color: var(--sdds-popover-canvas-background);\n  padding: 16px;\n  box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n  border-radius: 4px;\n  z-index: z(tooltip);\n  display: none;\n}\n\n:host(.sdds-popover-canvas-show) {\n  opacity: 1;\n  display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() popoverCanvasElement!: HTMLElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Decides if the Popover Canvas should be visible from the start */\n  @Prop() show: boolean = false;\n\n  /** Decides the placement of the Popover Canvas */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @Listen('mousedown', { target: 'window' })\n  handleOutsideClick() {\n    if (this.show) {\n      this.show = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n    this.renderedShowValue = this.show;\n\n    this.popperInstance = createPopper(this.target, this.popoverCanvasElement, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showCanvas = () => {\n      this.show = true;\n    };\n\n    const hideCanvas = () => {\n      this.show = false;\n    };\n\n    this.target.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n\n      if (this.show) {\n        hideCanvas();\n      } else {\n        showCanvas();\n      }\n    });\n\n    this.popoverCanvasElement.addEventListener('mousemove', (event) => {\n      event.stopPropagation();\n    });\n\n    this.popoverCanvasElement.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n    });\n  }\n\n  componentDidRender() {\n    if (this.show && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.show;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,qX,MCSZC,EAAa,M,uCAIG,G,qCAMH,M,eAGO,O,oBAGE,E,oBAGA,E,uBAEK,M,oDAOtCC,qBACE,GAAIC,KAAKC,KAAM,CACbD,KAAKC,KAAO,K,EAIhBC,mB,MACEF,KAAKG,QAASC,EAAAJ,KAAKK,eAAW,MAAAD,SAAA,EAAAA,EAAIE,SAASC,cAAcP,KAAKQ,UAC9DR,KAAKS,kBAAoBT,KAAKC,KAE9BD,KAAKU,eAAiBC,EAAaX,KAAKG,OAAQH,KAAKY,qBAAsB,CACzEC,UAAWb,KAAKa,UAChBC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAACjB,KAAKkB,eAAgBlB,KAAKmB,qBAM3C,MAAMC,EAAa,KACjBpB,KAAKC,KAAO,IAAI,EAGlB,MAAMoB,EAAa,KACjBrB,KAAKC,KAAO,KAAK,EAGnBD,KAAKG,OAAOmB,iBAAiB,aAAcC,IACzCA,EAAMC,kBAEN,GAAIxB,KAAKC,KAAM,CACboB,G,KACK,CACLD,G,KAIJpB,KAAKY,qBAAqBU,iBAAiB,aAAcC,IACvDA,EAAMC,iBAAiB,IAGzBxB,KAAKY,qBAAqBU,iBAAiB,aAAcC,IACvDA,EAAMC,iBAAiB,G,CAI3BC,qBACE,GAAIzB,KAAKC,OAASD,KAAKS,kBAAmB,CAGxCT,KAAKU,eAAegB,Q,CAEtB1B,KAAKS,kBAAoBT,KAAKC,I,CAGhC0B,uB,OACEvB,EAAAJ,KAAKU,kBAAc,MAAAN,SAAA,SAAAA,EAAEwB,S,CAGvBC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,uBAAuBhC,KAAKC,KAAO,2BAA6B,MAC3E6B,EAAA,a"}

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

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as o,g as s}from"./p-0b4eba86.js";const i=':host{position:relative}:host sdds-icon{line-height:1}:host [role=listItem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listItem].text-below{flex-direction:column}:host [role=listItem].lg{padding:0 20px;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem].lg .content-container{height:30px;width:30px}:host [role=listItem].lg.vertical::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:36px;width:1px;top:40px;left:36px}:host [role=listItem].lg.horizontal::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 24px);right:0;top:16px}:host [role=listItem].lg.horizontal::before{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;right:calc(50% + 24px);left:0;top:16px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listItem].lg.horizontal.text-aside:not(.hide-labels)::before{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listItem].sm{padding:0 20px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem].sm .content-container{height:24px;width:24px}:host [role=listItem].sm.vertical::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.vertical::before{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:20px;width:1px;top:34px;left:32px}:host [role=listItem].sm.horizontal::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listItem].sm.horizontal::before{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::after{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listItem].sm.horizontal.text-aside:not(.hide-labels)::before{content:" ";position:absolute;background-color:var(--sdds-stepper-icon-step-background-after);opacity:0.16;height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listItem] .content-container{border-radius:100px;border:1px solid var(--sdds-stepper-icon-background);display:flex;justify-content:center;align-items:center;position:relative}:host [role=listItem] .content-container.error{border-color:var(--sdds-negative);color:var(--sdds-negative)}:host [role=listItem] .content-container.success{background-color:var(--sdds-positive);border-color:var(--sdds-positive);color:var(--sdds-white)}:host [role=listItem] .content-container.upcoming{background-color:transparent;border-color:var(--sdds-stepper-label-border-color-upcoming);color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host [role=listItem] .label{text-align:center}:host [role=listItem] .label.lg{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls)}:host [role=listItem] .label.sm{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls)}:host [role=listItem] .label.upcoming{color:var(--sdds-stepper-label-text-color-upcoming);opacity:var(--sdds-stepper-label-text-opacity-upcoming)}:host(.last) [role=listItem].sm::after,:host(.last) [role=listItem].lg::after{display:none}:host(.last) [role=listItem].sm.vertical::before{display:none}:host(.first) [role=listItem].sm::before,:host(.first) [role=listItem].lg::before{display:none}';const r=class{constructor(e){t(this,e);this.labelText="";this.state="upcoming";this.hideLabel=undefined;this.size=undefined;this.iconSize=undefined;this.direction=undefined;this.labelPosition=undefined}componentWillLoad(){this.stepperEl=this.el.closest("sdds-stepper");this.direction=this.stepperEl.direction;this.labelPosition=this.stepperEl.labelPosition;this.size=this.stepperEl.size;this.hideLabel=this.stepperEl.hideLabels}async setWidth(t){this.el.style.width=`${t}px`}render(){return e(o,null,e("div",{role:"listItem",class:`${this.size} ${this.direction} text-${this.labelPosition} ${this.hideLabel?"hide-labels":""}`},e("div",{class:`${this.state} content-container`},this.state==="success"||this.state==="error"?e("sdds-icon",{name:this.state==="success"?"tick":"warning",size:this.size==="lg"?"20px":"16px"}):e("div",{class:"number sdds-detail-05"},e("slot",null))),!this.hideLabel&&e("div",{class:`label ${this.size} ${this.state}`},this.labelText)))}get el(){return s(this)}};r.style=i;export{r as sdds_stepper_item};
-//# sourceMappingURL=p-a4127075.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sddsStepperItemCss","SddsStepper","componentWillLoad","this","stepperEl","el","closest","direction","labelPosition","size","hideLabel","hideLabels","async","width","style","render","h","Host","role","class","state","name","labelText"],"sources":["./src/components/stepper/stepper-item/sdds-stepper-item.scss?tag=sdds-stepper-item&encapsulation=shadow","./src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"sourcesContent":["@mixin divider {\n  content: ' ';\n  position: absolute;\n  background-color: var(--sdds-stepper-icon-step-background-after);\n  opacity: 0.16;\n}\n\n:host {\n  position: relative;\n\n  sdds-icon {\n    line-height: 1;\n  }\n\n  [role='listItem'] {\n    display: flex;\n    justify-content: start;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n\n    &.text-below {\n      flex-direction: column;\n    }\n\n    &.lg {\n      padding: 0 20px;\n      font: var(--sdds-detail-01);\n      letter-spacing: var(--sdds-detail-01-ls);\n\n      .content-container {\n        height: 30px;\n        width: 30px;\n      }\n\n      &.vertical {\n        &::after {\n          @include divider;\n\n          height: 36px;\n          width: 1px;\n          top: 40px;\n          left: 36px;\n        }\n      }\n\n      &.horizontal {\n        &::after {\n          @include divider;\n\n          height: 1px;\n          left: calc(50% + 24px);\n          right: 0;\n          top: 16px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 1px;\n          right: calc(50% + 24px);\n          left: 0;\n          top: 16px;\n        }\n\n        &.text-aside {\n          &:not(.hide-labels) {\n            &::after {\n              @include divider;\n\n              height: 1px;\n              top: 16px;\n              width: 10px;\n              left: auto;\n              right: -10px;\n            }\n\n            &::before {\n              @include divider;\n\n              height: 1px;\n              top: 16px;\n              width: 10px;\n              left: -10px;\n              right: auto;\n            }\n          }\n        }\n      }\n    }\n\n    &.sm {\n      padding: 0 20px;\n      font: var(--sdds-detail-05);\n      letter-spacing: var(--sdds-detail-05-ls);\n\n      .content-container {\n        height: 24px;\n        width: 24px;\n      }\n\n      &.vertical {\n        &::after {\n          @include divider;\n\n          height: 20px;\n          width: 1px;\n          top: 34px;\n          left: 32px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 20px;\n          width: 1px;\n          top: 34px;\n          left: 32px;\n        }\n      }\n\n      &.horizontal {\n        &::after {\n          @include divider;\n\n          height: 1px;\n          left: calc(50% + 16px + 8px);\n          right: 0;\n          top: 13px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 1px;\n          left: 0;\n          right: calc(50% + 24px);\n          top: 13px;\n        }\n\n        &.text-aside {\n          &:not(.hide-labels) {\n            &::after {\n              @include divider;\n\n              height: 1px;\n              top: 13px;\n              width: 10px;\n              left: auto;\n              right: -10px;\n            }\n\n            &::before {\n              @include divider;\n\n              height: 1px;\n              top: 13px;\n              width: 10px;\n              left: -10px;\n              right: auto;\n            }\n          }\n        }\n      }\n    }\n\n    .content-container {\n      border-radius: 100px;\n      border: 1px solid var(--sdds-stepper-icon-background);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: relative;\n\n      &.error {\n        border-color: var(--sdds-negative);\n        color: var(--sdds-negative);\n      }\n\n      &.success {\n        background-color: var(--sdds-positive);\n        border-color: var(--sdds-positive);\n        color: var(--sdds-white);\n      }\n\n      &.upcoming {\n        background-color: transparent;\n        border-color: var(--sdds-stepper-label-border-color-upcoming);\n        color: var(--sdds-stepper-label-text-color-upcoming);\n        opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n      }\n    }\n\n    .label {\n      text-align: center;\n\n      &.lg {\n        font: var(--sdds-detail-01);\n        letter-spacing: var(--sdds-detail-01-ls);\n      }\n\n      &.sm {\n        font: var(--sdds-detail-05);\n        letter-spacing: var(--sdds-detail-05-ls);\n      }\n\n      &.upcoming {\n        color: var(--sdds-stepper-label-text-color-upcoming);\n        opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n      }\n    }\n  }\n}\n\n:host(.last) {\n  [role='listItem'] {\n    &.sm,\n    &.lg {\n      &::after {\n        display: none;\n      }\n    }\n  }\n\n  [role='listItem'] {\n    &.sm {\n      &.vertical {\n        &::before {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.first) {\n  [role='listItem'] {\n    &.sm,\n    &.lg {\n      &::before {\n        display: none;\n      }\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-stepper-item',\n  styleUrl: 'sdds-stepper-item.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** Label text for the stepper-item. */\n  @Prop() labelText: string = '';\n\n  /** State of the stepper-item */\n  @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';\n\n  @State() hideLabel: boolean;\n\n  @State() size: string;\n\n  @State() iconSize: string;\n\n  @State() direction: string;\n\n  @State() labelPosition: string;\n\n  @Element() el: HTMLElement;\n\n  stepperEl: HTMLSddsStepperElement;\n\n  componentWillLoad() {\n    this.stepperEl = this.el.closest('sdds-stepper');\n    this.direction = this.stepperEl.direction;\n    this.labelPosition = this.stepperEl.labelPosition;\n    this.size = this.stepperEl.size;\n    this.hideLabel = this.stepperEl.hideLabels;\n  }\n\n  /** Method to set the width if the stepper item based on its siblings widht, used by the parent element. */\n  @Method()\n  async setWidth(width) {\n    this.el.style.width = `${width}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"listItem\"\n          class={`${this.size} ${this.direction} text-${this.labelPosition} ${\n            this.hideLabel ? 'hide-labels' : ''\n          }`}\n        >\n          <div class={`${this.state} content-container`}>\n            {this.state === 'success' || this.state === 'error' ? (\n              <sdds-icon\n                name={this.state === 'success' ? 'tick' : 'warning'}\n                size={this.size === 'lg' ? '20px' : '16px'}\n              ></sdds-icon>\n            ) : (\n              <div class=\"number sdds-detail-05\">\n                <slot></slot>\n              </div>\n            )}\n          </div>\n          {!this.hideLabel && (\n            <div class={`label ${this.size} ${this.state}`}>{this.labelText}</div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,omI,MCOdC,EAAW,M,wCAEM,G,WAGkC,W,2HAgB9DC,oBACEC,KAAKC,UAAYD,KAAKE,GAAGC,QAAQ,gBACjCH,KAAKI,UAAYJ,KAAKC,UAAUG,UAChCJ,KAAKK,cAAgBL,KAAKC,UAAUI,cACpCL,KAAKM,KAAON,KAAKC,UAAUK,KAC3BN,KAAKO,UAAYP,KAAKC,UAAUO,U,CAKlCC,eAAeC,GACbV,KAAKE,GAAGS,MAAMD,MAAQ,GAAGA,K,CAG3BE,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,KAAK,WACLC,MAAO,GAAGhB,KAAKM,QAAQN,KAAKI,kBAAkBJ,KAAKK,iBACjDL,KAAKO,UAAY,cAAgB,MAGnCM,EAAA,OAAKG,MAAO,GAAGhB,KAAKiB,2BACjBjB,KAAKiB,QAAU,WAAajB,KAAKiB,QAAU,QAC1CJ,EAAA,aACEK,KAAMlB,KAAKiB,QAAU,UAAY,OAAS,UAC1CX,KAAMN,KAAKM,OAAS,KAAO,OAAS,SAGtCO,EAAA,OAAKG,MAAM,yBACTH,EAAA,gBAIJb,KAAKO,WACLM,EAAA,OAAKG,MAAO,SAAShB,KAAKM,QAAQN,KAAKiB,SAAUjB,KAAKmB,Y"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["sddsFooterCss","SddsFooter","connectedCallback","children","Array","from","this","host","hasTopPart","some","element","slot","render","h","Host","class","modeVariant","name","Date","getFullYear"],"sources":["./src/components/footer/webcomponent/sdds-footer.scss?tag=sdds-footer&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  $grid-xs: 0;\n  $grid-sm: 608px;\n  $grid-md: 800px;\n  $grid-lg: 992px;\n  $grid-xlg: 1184px;\n  $grid-xxlg: 1376px;\n  $grid-max: 1584px;\n\n  .footer-top {\n    background-color: var(--sdds-footer-top-background);\n    padding: 40px;\n\n    ::slotted(*) {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr 1fr;\n      row-gap: 40px;\n      width: 100%;\n    }\n  }\n\n  .footer-main {\n    background-color: var(--sdds-footer-main-background);\n    padding: 0 40px;\n  }\n\n  .footer-main-top {\n    padding: 40px 0;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .footer-bottom-right,\n  .footer-bottom-left {\n    ::slotted(*) {\n      display: flex;\n      column-gap: 24px;\n    }\n  }\n\n  .footer-main-bottom {\n    padding: 40px 0;\n    display: flex;\n    justify-content: space-between;\n    border-top: 1px solid var(--sdds-footer-main-divider);\n\n    small.copyright {\n      margin: 0;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      color: var(--sdds-footer-main-copyright);\n    }\n\n    .brand {\n      background-image: var(--sdds-background-image-scania-wordmark-white-svg);\n      background-repeat: no-repeat;\n      background-size: 117px;\n      background-position: right;\n      width: 117px;\n      height: 20px;\n\n      p {\n        color: transparent;\n        padding: 0;\n        margin: 0;\n        height: 100%;\n        visibility: hidden;\n      }\n    }\n  }\n\n  @media all and (max-width: $grid-lg) {\n    .footer-top {\n      padding: 0;\n\n      ::slotted(*) {\n        display: block;\n        width: 100%;\n      }\n    }\n\n    .footer-main {\n      padding: 0 24px;\n    }\n\n    .footer-main-top {\n      flex-direction: column;\n      row-gap: 48px;\n      padding: 24px 0;\n    }\n\n    .footer-bottom-left {\n      ::slotted(*) {\n        flex-direction: column;\n        gap: 8px;\n      }\n    }\n\n    .footer-main-bottom {\n      flex-direction: column;\n      padding-bottom: 32px;\n\n      p.copyright {\n        padding-bottom: 96px;\n      }\n\n      .brand {\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, h, State, Element } from '@stencil/core';\nimport { Host, HostElement, Prop } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer',\n  styleUrl: 'sdds-footer.scss',\n  shadow: true,\n})\nexport class SddsFooter {\n  /** Mode variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() hasTopPart: boolean;\n\n  @Element() host: HostElement;\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasTopPart = children.some((element) => element.slot === 'top');\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <footer>\n          {this.hasTopPart && (\n            <div class=\"footer-top\">\n              <slot name=\"top\"></slot>\n            </div>\n          )}\n          <div class=\"footer-main\">\n            <div class=\"footer-main-top\">\n              <div class=\"footer-bottom-left\">\n                <slot name=\"main-left\"></slot>\n              </div>\n              <div class=\"footer-bottom-right\">\n                <slot name=\"main-right\"></slot>\n              </div>\n            </div>\n            <div class=\"footer-main-bottom\">\n              <small class=\"copyright\">Copyright &#169; {new Date().getFullYear()} Scania</small>\n              <div class=\"brand\">\n                <p>Scania</p>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,ihD,MCQTC,EAAU,M,0CAE0B,K,0BAM/CC,oBACE,MAAMC,EAAWC,MAAMC,KAAKC,KAAKC,KAAKJ,UACtCG,KAAKE,WAAaL,EAASM,MAAMC,GAAYA,EAAQC,OAAS,O,CAGhEC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAGT,KAAKU,YAAc,qBAAqBV,KAAKU,cAAgB,MAC3EH,EAAA,cACGP,KAAKE,YACJK,EAAA,OAAKE,MAAM,cACTF,EAAA,QAAMI,KAAK,SAGfJ,EAAA,OAAKE,MAAM,eACTF,EAAA,OAAKE,MAAM,mBACTF,EAAA,OAAKE,MAAM,sBACTF,EAAA,QAAMI,KAAK,eAEbJ,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMI,KAAK,iBAGfJ,EAAA,OAAKE,MAAM,sBACTF,EAAA,SAAOE,MAAM,aAAW,gBAAmB,IAAIG,MAAOC,cAAa,WACnEN,EAAA,OAAKE,MAAM,SACTF,EAAA,uB"}

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

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

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

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

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

@@ -1,2 +0,0 @@
-import{r,h as d,g as s}from"./p-0b4eba86.js";const e=":root,.sdds-mode-light{--sdds-breadcrumb-color:var(--sdds-grey-900);--sdds-breadcrumb-color-hover:var(--sdds-grey-700);--sdds-breadcrumb-color-focus:var(--sdds-grey-700);--sdds-breadcrumb-color-disabled:var(--sdds-grey-500);--sdds-breadcrumb-separator-color:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-breadcrumb-color:var(--sdds-grey-300);--sdds-breadcrumb-color-hover:var(--sdds-grey-500);--sdds-breadcrumb-color-focus:var(--sdds-grey-500);--sdds-breadcrumb-color-disabled:var(--sdds-grey-700);--sdds-breadcrumb-separator-color:var(--sdds-grey-700)}nav ol.sdds-breadcrumb{box-sizing:border-box;padding:0;margin:0;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;flex-wrap:wrap;list-style-type:none}nav ol.sdds-breadcrumb *{box-sizing:border-box}";const a=class{constructor(d){r(this,d)}connectedCallback(){this.el.children[this.el.children.length-1].classList.add("sdds-breadcrumb-item-last")}render(){return d("nav",null,d("ol",{class:"sdds-breadcrumb"},d("slot",null)))}get el(){return s(this)}};a.style=e;export{a as sdds_breadcrumb};
-//# sourceMappingURL=p-ba975249.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sddsBreadcrumbCss","SddsBreadcrumb","connectedCallback","this","el","children","length","classList","add","render","h","class"],"sources":["./src/components/breadcrumb/sdds-breadcrumb.scss?tag=sdds-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb.tsx"],"sourcesContent":["@import 'breadcrumb-vars';\n@import '../../mixins/box-sizing';\n\nnav ol.sdds-breadcrumb {\n  @include sdds-box-sizing;\n\n  padding: 0;\n  margin: 0;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: flex;\n  flex-wrap: wrap;\n  list-style-type: none;\n}\n","import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb',\n  styleUrl: 'sdds-breadcrumb.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumb {\n  @Element() el: HTMLElement;\n\n  connectedCallback() {\n    this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');\n  }\n\n  render() {\n    return (\n      <nav>\n        <ol class={'sdds-breadcrumb'}>\n          <slot></slot>\n        </ol>\n      </nav>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAoB,6wB,MCObC,EAAc,M,yBAGzBC,oBACEC,KAAKC,GAAGC,SAASF,KAAKC,GAAGC,SAASC,OAAS,GAAGC,UAAUC,IAAI,4B,CAG9DC,SACE,OACEC,EAAA,WACEA,EAAA,MAAIC,MAAO,mBACTD,EAAA,c"}