@scania/tegel 0.0.61 → 0.0.71-beta

package/dist/tegel/p-1803edc6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sddsStepperItemCss","SddsStepper","componentWillLoad","this","stepperEl","el","closest","orientation","labelPosition","size","hideLabel","hideLabels","stepperId","handlePropsChange","event","detail","changed","forEach","changedProp","Error","render","h","Host","role","class","state","name"],"sources":["./src/components/stepper/stepper-item/sdds-stepper-item.scss?tag=sdds-stepper-item&encapsulation=shadow","./src/components/stepper/stepper-item/sdds-stepper-item.tsx"],"sourcesContent":["@mixin divider {\n  content: ' ';\n  position: absolute;\n  background-color: var(--sdds-stepper-icon-step-background-after);\n  opacity: 0.16;\n}\n\n:host {\n  position: relative;\n  display: table-cell;\n\n  sdds-icon {\n    line-height: 1;\n  }\n\n  [role='listItem'] {\n    display: flex;\n    justify-content: start;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n\n    &.text-below {\n      flex-direction: column;\n    }\n\n    &.lg {\n      padding: 0 20px;\n      font: var(--sdds-detail-01);\n      letter-spacing: var(--sdds-detail-01-ls);\n\n      .content-container {\n        height: 30px;\n        min-width: 30px;\n      }\n\n      &.vertical {\n        &::after {\n          @include divider;\n\n          height: 36px;\n          width: 1px;\n          top: 40px;\n          left: 36px;\n        }\n      }\n\n      &.horizontal {\n        &::after {\n          @include divider;\n\n          height: 1px;\n          left: calc(50% + 24px);\n          right: 0;\n          top: 18px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 1px;\n          right: calc(50% + 24px);\n          left: 0;\n          top: 18px;\n        }\n\n        &.text-aside {\n          &:not(.hide-labels) {\n            &::after {\n              @include divider;\n\n              height: 1px;\n              top: 16px;\n              width: 10px;\n              left: auto;\n              right: -10px;\n            }\n\n            &::before {\n              @include divider;\n\n              height: 1px;\n              top: 16px;\n              width: 10px;\n              left: -10px;\n              right: auto;\n            }\n          }\n        }\n      }\n    }\n\n    &.sm {\n      padding: 0 20px;\n      font: var(--sdds-detail-05);\n      letter-spacing: var(--sdds-detail-05-ls);\n\n      .content-container {\n        height: 24px;\n        min-width: 24px;\n      }\n\n      &.vertical {\n        &::after {\n          @include divider;\n\n          height: 20px;\n          width: 1px;\n          top: 34px;\n          left: 32px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 20px;\n          width: 1px;\n          top: 34px;\n          left: 32px;\n        }\n      }\n\n      &.horizontal {\n        &::after {\n          @include divider;\n\n          height: 1px;\n          left: calc(50% + 16px + 8px);\n          right: 0;\n          top: 13px;\n        }\n\n        &::before {\n          @include divider;\n\n          height: 1px;\n          left: 0;\n          right: calc(50% + 24px);\n          top: 13px;\n        }\n\n        &.text-aside {\n          &:not(.hide-labels) {\n            &::after {\n              @include divider;\n\n              height: 1px;\n              top: 13px;\n              width: 10px;\n              left: auto;\n              right: -10px;\n            }\n\n            &::before {\n              @include divider;\n\n              height: 1px;\n              top: 13px;\n              width: 10px;\n              left: -10px;\n              right: auto;\n            }\n          }\n        }\n      }\n    }\n\n    .content-container {\n      border-radius: 100px;\n      border: 1px solid var(--sdds-stepper-icon-background);\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      position: relative;\n\n      &.error {\n        border-color: var(--sdds-negative);\n        color: var(--sdds-negative);\n      }\n\n      &.success {\n        background-color: var(--sdds-positive);\n        border-color: var(--sdds-positive);\n        color: var(--sdds-white);\n      }\n\n      &.upcoming {\n        background-color: transparent;\n        border-color: var(--sdds-stepper-label-border-color-upcoming);\n        color: var(--sdds-stepper-label-text-color-upcoming);\n        opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n      }\n    }\n\n    .label {\n      text-align: center;\n\n      &.lg {\n        font: var(--sdds-detail-01);\n        letter-spacing: var(--sdds-detail-01-ls);\n      }\n\n      &.sm {\n        font: var(--sdds-detail-05);\n        letter-spacing: var(--sdds-detail-05-ls);\n      }\n\n      &.upcoming {\n        color: var(--sdds-stepper-label-text-color-upcoming);\n        opacity: var(--sdds-stepper-label-text-opacity-upcoming);\n      }\n    }\n  }\n}\n\n:host(.last) {\n  [role='listItem'] {\n    &.sm,\n    &.lg {\n      &::after {\n        display: none;\n      }\n    }\n  }\n\n  [role='listItem'] {\n    &.sm {\n      &.vertical {\n        &::before {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.first) {\n  [role='listItem'] {\n    &.sm,\n    &.lg {\n      &::before {\n        display: none;\n      }\n    }\n  }\n}\n","import { Component, Host, h, Prop, Element, State, Listen } from '@stencil/core';\nimport { InternalSddsStepperPropChange } from '../sdds-stepper';\n\n@Component({\n  tag: 'sdds-stepper-item',\n  styleUrl: 'sdds-stepper-item.scss',\n  shadow: true,\n})\nexport class SddsStepper {\n  /** Index of the step. Will be displayed in the step if state is current/upcoming. */\n  @Prop() index: string;\n\n  /** State of the stepper-item */\n  @Prop() state: 'current' | 'error' | 'success' | 'upcoming' = 'upcoming';\n\n  @State() hideLabel: boolean;\n\n  @State() size: 'sm' | 'lg';\n\n  @State() orientation: 'horizontal' | 'vertical';\n\n  @State() labelPosition: 'aside' | 'below';\n\n  @Element() el: HTMLElement;\n\n  private stepperEl: HTMLSddsStepperElement;\n\n  private stepperId: string;\n\n  /* Needs to be onload to do this on any updates. */\n  componentWillLoad() {\n    this.stepperEl = this.el.closest('sdds-stepper');\n    this.orientation = this.stepperEl.orientation;\n    this.labelPosition = this.stepperEl.labelPosition;\n    this.size = this.stepperEl.size;\n    this.hideLabel = this.stepperEl.hideLabels;\n    this.stepperId = this.stepperEl.stepperId;\n  }\n\n  @Listen('internalSddsPropsChange', { target: 'body' })\n  handlePropsChange(event: CustomEvent<InternalSddsStepperPropChange>) {\n    if (this.stepperId === event.detail.stepperId) {\n      event.detail.changed.forEach((changedProp) => {\n        if (typeof this[changedProp] === 'undefined') {\n          throw new Error(`Table prop is not supported: ${changedProp}`);\n        }\n        if (this[changedProp] === this.orientation && event.detail[changedProp] === 'vertical') {\n          this.labelPosition = 'aside';\n        }\n        this[changedProp] = event.detail[changedProp];\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          role=\"listItem\"\n          class={`${this.size} ${this.orientation} text-${this.labelPosition} ${\n            this.hideLabel ? 'hide-labels' : ''\n          }`}\n        >\n          <div class={`${this.state} content-container`}>\n            {this.state === 'success' || this.state === 'error' ? (\n              <sdds-icon\n                name={this.state === 'success' ? 'tick' : 'warning'}\n                size={this.size === 'lg' ? '20px' : '16px'}\n              ></sdds-icon>\n            ) : (\n              this.index\n            )}\n          </div>\n          {!this.hideLabel && (\n            <div class={`label ${this.size} ${this.state}`}>\n              <slot name=\"label\"></slot>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,+nI,MCQdC,EAAW,M,yDAKwC,W,qGAiB9DC,oBACEC,KAAKC,UAAYD,KAAKE,GAAGC,QAAQ,gBACjCH,KAAKI,YAAcJ,KAAKC,UAAUG,YAClCJ,KAAKK,cAAgBL,KAAKC,UAAUI,cACpCL,KAAKM,KAAON,KAAKC,UAAUK,KAC3BN,KAAKO,UAAYP,KAAKC,UAAUO,WAChCR,KAAKS,UAAYT,KAAKC,UAAUQ,S,CAIlCC,kBAAkBC,GAChB,GAAIX,KAAKS,YAAcE,EAAMC,OAAOH,UAAW,CAC7CE,EAAMC,OAAOC,QAAQC,SAASC,IAC5B,UAAWf,KAAKe,KAAiB,YAAa,CAC5C,MAAM,IAAIC,MAAM,gCAAgCD,I,CAElD,GAAIf,KAAKe,KAAiBf,KAAKI,aAAeO,EAAMC,OAAOG,KAAiB,WAAY,CACtFf,KAAKK,cAAgB,O,CAEvBL,KAAKe,GAAeJ,EAAMC,OAAOG,EAAY,G,EAKnDE,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,KAAK,WACLC,MAAO,GAAGrB,KAAKM,QAAQN,KAAKI,oBAAoBJ,KAAKK,iBACnDL,KAAKO,UAAY,cAAgB,MAGnCW,EAAA,OAAKG,MAAO,GAAGrB,KAAKsB,2BACjBtB,KAAKsB,QAAU,WAAatB,KAAKsB,QAAU,QAC1CJ,EAAA,aACEK,KAAMvB,KAAKsB,QAAU,UAAY,OAAS,UAC1ChB,KAAMN,KAAKM,OAAS,KAAO,OAAS,SAGtCN,KAAU,QAGZA,KAAKO,WACLW,EAAA,OAAKG,MAAO,SAASrB,KAAKM,QAAQN,KAAKsB,SACrCJ,EAAA,QAAMK,KAAK,Y"}

package/dist/tegel/p-1cadd6ec.entry.js

@@ -1,2 +0,0 @@
-import{r as d,h as s,H as r,g as o}from"./p-0a99765f.js";const n=":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:var(--sdds-blue-700);--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 / 48%);--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-400);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-400);--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-color-focus:var(--sdds-black);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--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-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:var(--sdds-red-700);--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-400);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-secondary-outline-color:var(--sdds-white);--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-color-focus:var(--sdds-white);--sdds-btn-icon-secondary-fill-focus:var(--sdds-white);--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:inline-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:none}.sdds-btn:focus-visible{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-visible{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-visible{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-visible{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-visible{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-visible{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-visible .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-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-visible{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-visible .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:rgba(0, 0, 0, 0.38)}.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-visible{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-visible .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:rgba(0, 0, 0, 0.38)}.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-visible{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-visible .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)}i.sdds-btn-icon[slot=icon]{line-height:1}:host(sdds-button){display:inline-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:100%;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:inline-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(r,{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 o(this)}};t.style=n;export{t as sdds_button};
-//# sourceMappingURL=p-1cadd6ec.entry.js.map

package/dist/tegel/p-1cadd6ec.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: inline-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    outline: none;\n  }\n\n  &:focus-visible {\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-visible {\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-visible {\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-visible {\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-visible {\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-visible {\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\n        @if $type == 'ghost' or $type == 'secondary' {\n          .sdds-btn-icon,\n          &.sdds-btn-icon {\n            color: rgb(0 0 0 / 38%);\n          }\n        } @else {\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: inline-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: 100%;\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: inline-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,4/tB,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-202dffdc.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s}from"./p-0a99765f.js";import{c as o}from"./p-ec26fc38.js";const i=":root,.sdds-mode-light{--sdds-tooltip-background:var(--sdds-grey-800);--sdds-tooltip-color:var(--sdds-white)}.sdds-mode-dark{--sdds-tooltip-background:var(--sdds-grey-200);--sdds-tooltip-color:var(--sdds-grey-958)}.sdds-tooltip{box-sizing:border-box;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-tooltip-color);background-color:var(--sdds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;max-width:192px;z-index:800;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.sdds-tooltip *{box-sizing:border-box}.sdds-tooltip.sdds-tooltip-top-left{border-radius:0 4px 4px}.sdds-tooltip.sdds-tooltip-top-right{border-radius:4px 0 4px 4px}.sdds-tooltip.sdds-tooltip-bottom-right{border-radius:4px 4px 0}.sdds-tooltip.sdds-tooltip-bottom-left{border-radius:4px 4px 4px 0}.sdds-tooltip-show{opacity:1;visibility:visible}";const d=class{constructor(s){t(this,s);this.offsetSkidding=0;this.offsetDistance=8;this.text="";this.selector="";this.referenceEl=undefined;this.mouseOverTooltip=false;this.show=false;this.placement="bottom";this.popperInstance=undefined;this.target=undefined}componentDidLoad(){var t;this.target=(t=this.referenceEl)!==null&&t!==void 0?t:document.querySelector(this.selector);const s=this;this.popperInstance=o(this.target,this.tooltip,{placement:s.placement,modifiers:[{name:"positionCalc",enabled:true,phase:"main",fn({state:t}){if(t.placement==="bottom-start"||t.placement==="right-start"){s.border="top-left"}else if(t.placement==="bottom-end"||t.placement==="left-start"){s.border="top-right"}else if(t.placement==="top-end"||t.placement==="left-end"){s.border="bottom-right"}else if(t.placement==="top-start"||t.placement==="right-end"){s.border="bottom-left"}else if(t.placement==="bottom"||t.placement==="top"){s.border="default"}}},{name:"offset",options:{offset:[this.offsetSkidding,this.offsetDistance]}}]});const i=()=>{this.show=true};const d=()=>{this.show=false};this.target.addEventListener("focusin",(()=>{i()}));this.target.addEventListener("focusout",(()=>{d()}));this.target.addEventListener("mouseenter",(()=>{i()}));this.target.addEventListener("mouseleave",(()=>{d()}));if(this.mouseOverTooltip===true){this.tooltip.addEventListener("mouseenter",(()=>{i()}));this.tooltip.addEventListener("mouseleave",(()=>{d()}))}}disconnectedCallback(){var t;(t=this.popperInstance)===null||t===void 0?void 0:t.destroy()}render(){return s("span",{ref:t=>{this.tooltip=t},class:`sdds-tooltip sdds-tooltip-${this.border} ${this.show?"sdds-tooltip-show":""}`},this.text,s("slot",null))}};d.style=i;export{d as sdds_tooltip};
-//# sourceMappingURL=p-202dffdc.entry.js.map

package/dist/tegel/p-202dffdc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tooltipCss","Tooltip","this","offsetSkidding","offsetDistance","componentDidLoad","target","_a","referenceEl","document","querySelector","selector","thisValue","popperInstance","createPopper","tooltip","placement","modifiers","name","enabled","phase","fn","state","border","options","offset","showTooltip","show","hideTooltip","addEventListener","mouseOverTooltip","disconnectedCallback","destroy","render","h","ref","el","class","text"],"sources":["./src/components/tooltip/tooltip.scss?tag=sdds-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './tooltip-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-tooltip {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-tooltip-color);\n  background-color: var(--sdds-tooltip-background);\n  border-radius: 4px;\n  padding: 8px;\n  word-wrap: break-word;\n  max-width: 192px;\n  z-index: z(tooltip);\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 200ms ease-in, visibility 200ms ease-in;\n\n  &.sdds-tooltip-top-left {\n    border-radius: 0 4px 4px;\n  }\n\n  &.sdds-tooltip-top-right {\n    border-radius: 4px 0 4px 4px;\n  }\n\n  &.sdds-tooltip-bottom-right {\n    border-radius: 4px 4px 0;\n  }\n\n  &.sdds-tooltip-bottom-left {\n    border-radius: 4px 4px 4px 0;\n  }\n}\n\n.sdds-tooltip-show {\n  opacity: 1;\n  visibility: visible;\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  /** In case tooltip contains only text, no HTML, text can be passed by this prop */\n  @Prop() text: string = '';\n\n  /** The CSS-selector for an element that will trigger the tooltip */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the tooltip (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button. */\n  @Prop() mouseOverTooltip: boolean = false;\n\n  /** Prop in control of showing and hiding prop */\n  @Prop({ mutable: true }) show: boolean = false;\n\n  /** Placement of tooltip. */\n  @Prop() placement: Placement = 'bottom';\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  border: string;\n\n  offsetSkidding: number = 0;\n\n  offsetDistance: number = 8;\n\n  tooltip!: HTMLInputElement;\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n\n    const thisValue = this;\n    this.popperInstance = createPopper(this.target, this.tooltip, {\n      placement: thisValue.placement,\n      modifiers: [\n        {\n          name: 'positionCalc',\n          enabled: true,\n          phase: 'main',\n          fn({ state }) {\n            if (state.placement === 'bottom-start' || state.placement === 'right-start') {\n              thisValue.border = 'top-left';\n            } else if (state.placement === 'bottom-end' || state.placement === 'left-start') {\n              thisValue.border = 'top-right';\n            } else if (state.placement === 'top-end' || state.placement === 'left-end') {\n              thisValue.border = 'bottom-right';\n            } else if (state.placement === 'top-start' || state.placement === 'right-end') {\n              thisValue.border = 'bottom-left';\n            } else if (state.placement === 'bottom' || state.placement === 'top') {\n              thisValue.border = 'default';\n            }\n          },\n        },\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showTooltip = () => {\n      this.show = true;\n    };\n\n    const hideTooltip = () => {\n      this.show = false;\n    };\n\n    // For tabbing over element\n    this.target.addEventListener('focusin', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('focusout', () => {\n      hideTooltip();\n    });\n\n    // For hovering over element with selector\n    this.target.addEventListener('mouseenter', () => {\n      showTooltip();\n    });\n\n    this.target.addEventListener('mouseleave', () => {\n      hideTooltip();\n    });\n\n    // For hovering over tooltip itself:\n    if (this.mouseOverTooltip === true) {\n      this.tooltip.addEventListener('mouseenter', () => {\n        showTooltip();\n      });\n\n      this.tooltip.addEventListener('mouseleave', () => {\n        hideTooltip();\n      });\n    }\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  /* Slot on line 118 is added to support adding HTML elements to component */\n  render() {\n    return (\n      <span\n        ref={(el) => {\n          this.tooltip = el as HTMLInputElement;\n        }}\n        class={`sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}`}\n      >\n        {this.text}\n        <slot />\n      </span>\n    );\n  }\n}\n"],"mappings":"+EAAA,MAAMA,EAAa,44B,MCSNC,EAAO,M,yBAyBlBC,KAAAC,eAAyB,EAEzBD,KAAAE,eAAyB,E,UAzBF,G,cAGI,G,iDAMS,M,UAGK,M,eAGV,S,oDAc/BC,mB,MACEH,KAAKI,QAASC,EAAAL,KAAKM,eAAW,MAAAD,SAAA,EAAAA,EAAIE,SAASC,cAAcR,KAAKS,UAE9D,MAAMC,EAAYV,KAClBA,KAAKW,eAAiBC,EAAaZ,KAAKI,OAAQJ,KAAKa,QAAS,CAC5DC,UAAWJ,EAAUI,UACrBC,UAAW,CACT,CACEC,KAAM,eACNC,QAAS,KACTC,MAAO,OACPC,IAAGC,MAAEA,IACH,GAAIA,EAAMN,YAAc,gBAAkBM,EAAMN,YAAc,cAAe,CAC3EJ,EAAUW,OAAS,U,MACd,GAAID,EAAMN,YAAc,cAAgBM,EAAMN,YAAc,aAAc,CAC/EJ,EAAUW,OAAS,W,MACd,GAAID,EAAMN,YAAc,WAAaM,EAAMN,YAAc,WAAY,CAC1EJ,EAAUW,OAAS,c,MACd,GAAID,EAAMN,YAAc,aAAeM,EAAMN,YAAc,YAAa,CAC7EJ,EAAUW,OAAS,a,MACd,GAAID,EAAMN,YAAc,UAAYM,EAAMN,YAAc,MAAO,CACpEJ,EAAUW,OAAS,S,IAIzB,CACEL,KAAM,SACNM,QAAS,CACPC,OAAQ,CAACvB,KAAKC,eAAgBD,KAAKE,qBAM3C,MAAMsB,EAAc,KAClBxB,KAAKyB,KAAO,IAAI,EAGlB,MAAMC,EAAc,KAClB1B,KAAKyB,KAAO,KAAK,EAInBzB,KAAKI,OAAOuB,iBAAiB,WAAW,KACtCH,GAAa,IAGfxB,KAAKI,OAAOuB,iBAAiB,YAAY,KACvCD,GAAa,IAIf1B,KAAKI,OAAOuB,iBAAiB,cAAc,KACzCH,GAAa,IAGfxB,KAAKI,OAAOuB,iBAAiB,cAAc,KACzCD,GAAa,IAIf,GAAI1B,KAAK4B,mBAAqB,KAAM,CAClC5B,KAAKa,QAAQc,iBAAiB,cAAc,KAC1CH,GAAa,IAGfxB,KAAKa,QAAQc,iBAAiB,cAAc,KAC1CD,GAAa,G,EAKnBG,uB,OACExB,EAAAL,KAAKW,kBAAc,MAAAN,SAAA,SAAAA,EAAEyB,S,CAIvBC,SACE,OACEC,EAAA,QACEC,IAAMC,IACJlC,KAAKa,QAAUqB,CAAsB,EAEvCC,MAAO,6BAA6BnC,KAAKqB,UAAUrB,KAAKyB,KAAO,oBAAsB,MAEpFzB,KAAKoC,KACNJ,EAAA,a"}

package/dist/tegel/p-20beb7c0.entry.js

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

package/dist/tegel/p-20beb7c0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["navigationTabsCss","NavigationTabs","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","addResizeObserver","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","classList","add","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","addEventListenerToTabs","map","item","index","addEventListener","sddsChangeEvent","sddsChange","emit","selectedTabIndex","indexOf","defaultPrevented","disabled","element","setSelected","selectedIndex","componentDidLoad","undefined","defaultSelectedIndex","async","tabIndex","scrollRight","scroll","scrollLeft","connectedCallback","length","componentDidRender","render","h","Host","role","class","modeVariant","ref","el","onClick","name","size"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs.scss?tag=sdds-navigation-tabs&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: flex;\n  background-color: var(--sdds-inline-tabs-background);\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .scroll-right-button {\n    right: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-left-button {\n    left: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-right-button,\n  .scroll-left-button {\n    color: var(--sdds-folder-tabs-scroll-btn-color);\n    cursor: pointer;\n    border: 0;\n    width: 0;\n    background-color: var(--sdds-inline-tabs-scroll-btn-background);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n    position: sticky;\n\n    &.show {\n      min-width: 48px;\n      display: block;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    svg {\n      fill: var(--sdds-folder-tabs-scroll-btn-color);\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  State,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs',\n  styleUrl: 'navigation-tabs.scss',\n  shadow: true,\n})\nexport class NavigationTabs {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = 'primary';\n\n  /** Sets the default selected tab. */\n  @Prop() defaultSelectedIndex: number = 0;\n\n  /** Sets the selected tab.\n   * If this is set all tab changes needs to be handled by the user. */\n  @Prop({ reflect: true }) selectedIndex: number;\n\n  @Element() host: HTMLElement;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  private componentWidth: number = 0; // visible width of this component\n\n  private buttonsWidth: number = 0; // total width of all nav items combined\n\n  private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  private children: Array<HTMLSddsNavigationTabElement>;\n\n  /** Sets the passed tabindex as the selected tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.setSelected(false));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setSelected(true);\n          this.selectedIndex = tabIndex;\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTabIndex: this.selectedIndex,\n    };\n  }\n\n  /** Event emitted when the selected tab is changed. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTabIndex: number;\n  }>;\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonsWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonsWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  addResizeObserver = () => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-navigation-tabs-tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  addEventListenerToTabs = () => {\n    this.children = Array.from(this.host.children) as Array<HTMLSddsNavigationTabElement>;\n    this.children = this.children.map((item, index) => {\n      item.addEventListener('click', () => {\n        const sddsChangeEvent = this.sddsChange.emit({\n          selectedTabIndex: this.children.indexOf(item)\n        });\n        if(!sddsChangeEvent.defaultPrevented) {\n          if (!item.disabled) {\n            this.children.forEach((element) => element.setSelected(false));\n            item.setSelected(true);\n            this.selectedIndex = index;\n            this.sddsChange.emit({\n              selectedTabIndex: this.selectedIndex,\n            });\n          }\n        }\n      });\n      return item;\n    });\n  };\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<any>;\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad = () => {\n    if (this.selectedIndex === undefined) {\n      this.addEventListenerToTabs();\n      this.children[this.defaultSelectedIndex].setSelected(true);\n      this.selectedIndex = this.defaultSelectedIndex;\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    } else {\n      this.children[this.selectedIndex].setSelected(true);\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    }\n  };\n\n  componentDidRender() {\n    this.addResizeObserver();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"list\"\n        class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}\n      >\n        <div\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            onClick={() => this.scrollLeft()}\n            disabled={!this.showLeftScroll}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot />\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            onClick={() => this.scrollRight()}\n            disabled={!this.showRightScroll}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAoB,8/C,MCiBbC,EAAc,M,gEAiBjBC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EA+D9BJ,KAAAK,kBAAoB,KAClB,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMR,EAAiBQ,EAAMC,YAAYC,MACzC,IAAIT,EAAe,EAEnB,MAAMU,EAAaC,MAAMC,KAAKf,KAAKgB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtCf,GACEe,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1EP,EAAUQ,UAAUC,IAAI,2BAA2B,IAGrD3B,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK4B,uB,KACA,CACL5B,KAAK6B,eAAiB,MACtB7B,KAAK8B,gBAAkB,K,IAEzB,IAEJxB,EAAeyB,QAAQ/B,KAAKC,kBAAkB,EAGhDD,KAAAgC,uBAAyB,KACvBhC,KAAKiB,SAAWH,MAAMC,KAAKf,KAAKgB,KAAKC,UACrCjB,KAAKiB,SAAWjB,KAAKiB,SAASgB,KAAI,CAACC,EAAMC,KACvCD,EAAKE,iBAAiB,SAAS,KAC7B,MAAMC,EAAkBrC,KAAKsC,WAAWC,KAAK,CAC3CC,iBAAkBxC,KAAKiB,SAASwB,QAAQP,KAE1C,IAAIG,EAAgBK,iBAAkB,CACpC,IAAKR,EAAKS,SAAU,CAClB3C,KAAKiB,SAASR,SAASmC,GAAYA,EAAQC,YAAY,SACvDX,EAAKW,YAAY,MACjB7C,KAAK8C,cAAgBX,EACrBnC,KAAKsC,WAAWC,KAAK,CACnBC,iBAAkBxC,KAAK8C,e,MAK/B,OAAOZ,CAAI,GACX,EASJlC,KAAA+C,iBAAmB,KACjB,GAAI/C,KAAK8C,gBAAkBE,UAAW,CACpChD,KAAKgC,yBACLhC,KAAKiB,SAASjB,KAAKiD,sBAAsBJ,YAAY,MACrD7C,KAAK8C,cAAgB9C,KAAKiD,qBAC1BjD,KAAKsC,WAAWC,KAAK,CACnBC,iBAAkBxC,KAAK8C,e,KAEpB,CACL9C,KAAKiB,SAASjB,KAAK8C,eAAeD,YAAY,MAC9C7C,KAAKsC,WAAWC,KAAK,CACnBC,iBAAkBxC,KAAK8C,e,oBAzJkB,U,0BAGR,E,iDAQJ,M,qBAEC,K,CAcpCI,gBAAgBC,GACd,IAAKnD,KAAKiB,SAASkC,GAAUR,SAAU,CACrC3C,KAAKiB,SAASR,SAASmC,GAAYA,EAAQC,YAAY,SACvD7C,KAAKiB,SAAWjB,KAAKiB,SAASgB,KAAI,CAACW,EAAST,KAC1C,GAAIA,IAAUgB,EAAU,CACtBP,EAAQC,YAAY,MACpB7C,KAAK8C,cAAgBK,C,CAEvB,OAAOP,CAAO,G,CAGlB,MAAO,CACLJ,iBAAkBxC,KAAK8C,c,CAe3BM,cACE,MAAMC,EAASrD,KAAKC,kBAAkBqD,WACtCtD,KAAKC,kBAAkBqD,WAAaD,EAASrD,KAAKG,aAElDH,KAAK4B,uB,CAGP0B,aACE,MAAMD,EAASrD,KAAKC,kBAAkBqD,WACtCtD,KAAKC,kBAAkBqD,WAAaD,EAASrD,KAAKG,aAElDH,KAAK4B,uB,CAGPA,wBACE,MAAMyB,EAASrD,KAAKC,kBAAkBqD,WAEtC,GAAID,GAAUrD,KAAKI,YAAa,CAC9BJ,KAAK8B,gBAAkB,K,KAClB,CACL9B,KAAK8B,gBAAkB,I,CAGzB,GAAIuB,GAAU,EAAG,CACfrD,KAAK6B,eAAiB,K,KACjB,CACL7B,KAAK6B,eAAiB,I,EAwD1B0B,oBACEvD,KAAKiB,SAAWH,MAAMC,KAAKf,KAAKgB,KAAKC,UACrCjB,KAAKiB,SAAS,GAAGS,UAAUC,IAAI,SAC/B3B,KAAKiB,SAASjB,KAAKiB,SAASuC,OAAS,GAAG9B,UAAUC,IAAI,O,CAmBxD8B,qBACEzD,KAAKK,mB,CAGPqD,SACE,OACEC,EAACC,EAAI,CACHC,KAAK,OACLC,MAAO,GAAG9D,KAAK+D,YAAc,qBAAqB/D,KAAK+D,cAAgB,MAEvEJ,EAAA,OACEG,MAAM,UACNE,IAAMC,IACJjE,KAAKC,kBAAoBgE,CAAiB,GAG5CN,EAAA,UACEG,MAAO,sBAAsB9D,KAAK6B,eAAiB,OAAS,KAC5DqC,QAAS,IAAMlE,KAAKsD,aACpBX,UAAW3C,KAAK6B,gBAEhB8B,EAAA,aAAWQ,KAAK,eAAeC,KAAK,UAEtCT,EAAA,aACAA,EAAA,UACEG,MAAO,uBAAuB9D,KAAK8B,gBAAkB,OAAS,KAC9DoC,QAAS,IAAMlE,KAAKoD,cACpBT,UAAW3C,KAAK8B,iBAEhB6B,EAAA,aAAWQ,KAAK,gBAAgBC,KAAK,W"}

package/dist/tegel/p-256e0c83.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,H as o,g as e}from"./p-0a99765f.js";const l=":host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:201;right:0}:host .scroll-left-button{z-index:201;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--sdds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--sdds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--sdds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--sdds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--sdds-folder-tabs-scroll-btn-color)}";const h=class{constructor(i){t(this,i);this.sddsChange=s(this,"sddsChange",7);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.addResizeObserver=()=>{const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let i=0;const o=Array.from(this.host.children);o.forEach((t=>{const s=window.getComputedStyle(t);i+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)}));this.componentWidth=s;this.buttonsWidth=i;this.scrollWidth=i-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));t.observe(this.navWrapperElement)};this.addEventListenerToTabs=()=>{this.children=Array.from(this.host.children);this.children=this.children.map(((t,s)=>{t.addEventListener("click",(()=>{const i=this.sddsChange.emit({selectedTabIndex:this.children.indexOf(t)});if(!i.defaultPrevented){if(!t.disabled){this.children.forEach((t=>t.setSelected(false)));t.setSelected(true);this.selectedIndex=s}}}));return t}))};this.modeVariant=null;this.defaultSelectedIndex=0;this.selectedIndex=undefined;this.buttonWidth=0;this.showLeftScroll=false;this.showRightScroll=false}async selectTab(t){if(!this.children[t].disabled){this.children.forEach((t=>t.setSelected(false)));this.children=this.children.map(((s,i)=>{if(i===t){s.setSelected(true);this.selectedIndex=t}return s}))}return{selectedTabIndex:this.selectedIndex}}calculateButtonWidth(){this.children=this.children.map((t=>{if(t.offsetWidth>this.buttonWidth){this.buttonWidth=t.offsetWidth}return t}));this.children.forEach((t=>{t.setTabWidth(this.buttonWidth)}))}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}}connectedCallback(){this.children=Array.from(this.host.children);this.children[0].classList.add("first");this.children[this.children.length-1].classList.add("last")}componentDidLoad(){if(this.selectedIndex===undefined){this.addEventListenerToTabs();this.children[this.defaultSelectedIndex].setSelected(true);this.selectedIndex=this.defaultSelectedIndex;this.sddsChange.emit({selectedTabIndex:this.selectedIndex})}else{this.children[this.selectedIndex].setSelected(true);this.sddsChange.emit({selectedTabIndex:this.selectedIndex})}this.calculateButtonWidth()}componentDidUpdate(){this.calculateButtonWidth()}componentDidRender(){if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}this.addResizeObserver()}render(){return i(o,{role:"list",class:`${this.modeVariant?`sdds-mode-variant-${this.modeVariant}`:""}`},i("div",{class:"wrapper",ref:t=>{this.navWrapperElement=t}},i("button",{class:`scroll-left-button ${this.showLeftScroll?"show":""}`,disabled:!this.showLeftScroll,onClick:()=>this.scrollLeft()},i("sdds-icon",{name:"chevron_left",size:"20px"})),i("slot",null),i("button",{class:`scroll-right-button ${this.showRightScroll?"show":""}`,disabled:!this.showRightScroll,onClick:()=>this.scrollRight()},i("sdds-icon",{name:"chevron_right",size:"20px"}))))}get host(){return e(this)}};h.style=l;export{h as sdds_folder_tabs};
-//# sourceMappingURL=p-256e0c83.entry.js.map

package/dist/tegel/p-256e0c83.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["folderTabsCss","InlineTabs","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","addResizeObserver","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","addEventListenerToTabs","map","item","index","addEventListener","sddsChangeEvent","sddsChange","emit","selectedTabIndex","indexOf","defaultPrevented","disabled","element","setSelected","selectedIndex","async","tabIndex","calculateButtonWidth","tab","offsetWidth","buttonWidth","setTabWidth","scrollRight","scroll","scrollLeft","connectedCallback","classList","add","length","componentDidLoad","undefined","defaultSelectedIndex","componentDidUpdate","componentDidRender","render","h","Host","role","class","modeVariant","ref","el","onClick","name","size"],"sources":["./src/components/tabs/folder-tabs/folder-tabs.scss?tag=sdds-folder-tabs&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  overflow: hidden;\n  outline: 0;\n\n  .wrapper {\n    display: flex;\n    overflow-x: scroll;\n    scrollbar-width: none;\n    position: relative;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .scroll-right-button {\n    z-index: calc(z(tab) + 1);\n    right: 0;\n  }\n\n  .scroll-left-button {\n    z-index: calc(z(tab) + 1);\n    left: 0;\n  }\n\n  .scroll-right-button,\n  .scroll-left-button {\n    height: 50px;\n    color: var(--sdds-folder-tabs-scroll-btn-color);\n    cursor: pointer;\n    border: 0;\n    width: 0;\n    background-color: var(--sdds-folder-tabs-scroll-btn-background);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n    position: sticky;\n\n    &.show {\n      min-width: 48px;\n      display: block;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    svg {\n      fill: var(--sdds-folder-tabs-scroll-btn-color);\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  State,\n  Element,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tabs',\n  styleUrl: 'folder-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabs {\n  @Element() host: HTMLElement;\n\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Sets the default selected tab. */\n  @Prop() defaultSelectedIndex: number = 0;\n\n  /** Sets the selected tab.\n   * If this is set all tab changes needs to be handled by the user. */\n  @Prop({ reflect: true }) selectedIndex: number;\n\n  @State() buttonWidth: number = 0;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  private componentWidth: number = 0; // visible width of this component\n\n  private buttonsWidth: number = 0; // total width of all nav items combined\n\n  private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  private children: Array<HTMLSddsFolderTabElement>;\n\n  /** Event emitted when the selected tab is changed. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTabIndex: number;\n  }>;\n\n  /** Sets the passed tabindex as the selected tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.setSelected(false));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setSelected(true);\n          this.selectedIndex = tabIndex;\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTabIndex: this.selectedIndex,\n    };\n  }\n\n  calculateButtonWidth() {\n    this.children = this.children.map((tab: HTMLSddsFolderTabElement) => {\n      if (tab.offsetWidth > this.buttonWidth) {\n        this.buttonWidth = tab.offsetWidth;\n      }\n      return tab;\n    });\n    this.children.forEach((tab) => {\n      tab.setTabWidth(this.buttonWidth);\n    });\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  addResizeObserver = () => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  addEventListenerToTabs = () => {\n      this.children = Array.from(this.host.children) as Array<HTMLSddsFolderTabElement>;\n      this.children = this.children.map((item, index) => {\n        item.addEventListener('click', () => {\n          const sddsChangeEvent = this.sddsChange.emit({\n            selectedTabIndex: this.children.indexOf(item)\n          });\n\n          if(!sddsChangeEvent.defaultPrevented) {\n            if (!item.disabled) {\n              this.children.forEach((element) => element.setSelected(false));\n              item.setSelected(true);\n              this.selectedIndex = index;\n            }\n          }\n        });\n        return item;\n      });\n    \n  };\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<HTMLSddsFolderTabElement>;\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad() {\n    if (this.selectedIndex === undefined) {\n      this.addEventListenerToTabs();\n      this.children[this.defaultSelectedIndex].setSelected(true);\n      this.selectedIndex = this.defaultSelectedIndex;\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    } else {\n      this.children[this.selectedIndex].setSelected(true);\n      this.sddsChange.emit({\n        selectedTabIndex: this.selectedIndex,\n      });\n    }\n    this.calculateButtonWidth();\n  }\n\n  componentDidUpdate() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidRender() {\n    if (this.buttonsWidth > this.componentWidth) {\n      this.evaluateScrollButtons();\n    } else {\n      this.showLeftScroll = false;\n      this.showRightScroll = false;\n    }\n    this.addResizeObserver();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"list\"\n        class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}\n      >\n        <div\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLDivElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            disabled={!this.showLeftScroll}\n            onClick={() => this.scrollLeft()}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot></slot>\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            disabled={!this.showRightScroll}\n            onClick={() => this.scrollRight()}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,0tC,MCiBTC,EAAU,M,gEAmBbC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EAyE9BJ,KAAAK,kBAAoB,KAClB,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMR,EAAiBQ,EAAMC,YAAYC,MACzC,IAAIT,EAAe,EAEnB,MAAMU,EAAaC,MAAMC,KAAKf,KAAKgB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtCf,GACEe,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,YAAY,IAGxFzB,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK0B,uB,KACA,CACL1B,KAAK2B,eAAiB,MACtB3B,KAAK4B,gBAAkB,K,IAEzB,IAGJtB,EAAeuB,QAAQ7B,KAAKC,kBAAkB,EAGhDD,KAAA8B,uBAAyB,KACrB9B,KAAKiB,SAAWH,MAAMC,KAAKf,KAAKgB,KAAKC,UACrCjB,KAAKiB,SAAWjB,KAAKiB,SAASc,KAAI,CAACC,EAAMC,KACvCD,EAAKE,iBAAiB,SAAS,KAC7B,MAAMC,EAAkBnC,KAAKoC,WAAWC,KAAK,CAC3CC,iBAAkBtC,KAAKiB,SAASsB,QAAQP,KAG1C,IAAIG,EAAgBK,iBAAkB,CACpC,IAAKR,EAAKS,SAAU,CAClBzC,KAAKiB,SAASR,SAASiC,GAAYA,EAAQC,YAAY,SACvDX,EAAKW,YAAY,MACjB3C,KAAK4C,cAAgBX,C,MAI3B,OAAOD,CAAI,GACX,E,iBA5IyC,K,0BAGR,E,8CAMR,E,oBAEI,M,qBAEC,K,CAyBpCa,gBAAgBC,GACd,IAAK9C,KAAKiB,SAAS6B,GAAUL,SAAU,CACrCzC,KAAKiB,SAASR,SAASiC,GAAYA,EAAQC,YAAY,SACvD3C,KAAKiB,SAAWjB,KAAKiB,SAASc,KAAI,CAACW,EAAST,KAC1C,GAAIA,IAAUa,EAAU,CACtBJ,EAAQC,YAAY,MACpB3C,KAAK4C,cAAgBE,C,CAEvB,OAAOJ,CAAO,G,CAGlB,MAAO,CACLJ,iBAAkBtC,KAAK4C,c,CAI3BG,uBACE/C,KAAKiB,SAAWjB,KAAKiB,SAASc,KAAKiB,IACjC,GAAIA,EAAIC,YAAcjD,KAAKkD,YAAa,CACtClD,KAAKkD,YAAcF,EAAIC,W,CAEzB,OAAOD,CAAG,IAEZhD,KAAKiB,SAASR,SAASuC,IACrBA,EAAIG,YAAYnD,KAAKkD,YAAY,G,CAIrCE,cACE,MAAMC,EAASrD,KAAKC,kBAAkBqD,WACtCtD,KAAKC,kBAAkBqD,WAAaD,EAASrD,KAAKkD,YAClDlD,KAAK0B,uB,CAGP4B,aACE,MAAMD,EAASrD,KAAKC,kBAAkBqD,WACtCtD,KAAKC,kBAAkBqD,WAAaD,EAASrD,KAAKkD,YAClDlD,KAAK0B,uB,CAGPA,wBACE,MAAM2B,EAASrD,KAAKC,kBAAkBqD,WAEtC,GAAID,GAAUrD,KAAKI,YAAa,CAC9BJ,KAAK4B,gBAAkB,K,KAClB,CACL5B,KAAK4B,gBAAkB,I,CAGzB,GAAIyB,GAAU,EAAG,CACfrD,KAAK2B,eAAiB,K,KACjB,CACL3B,KAAK2B,eAAiB,I,EAsD1B4B,oBACEvD,KAAKiB,SAAWH,MAAMC,KAAKf,KAAKgB,KAAKC,UACrCjB,KAAKiB,SAAS,GAAGuC,UAAUC,IAAI,SAC/BzD,KAAKiB,SAASjB,KAAKiB,SAASyC,OAAS,GAAGF,UAAUC,IAAI,O,CAGxDE,mBACE,GAAI3D,KAAK4C,gBAAkBgB,UAAW,CACpC5D,KAAK8B,yBACL9B,KAAKiB,SAASjB,KAAK6D,sBAAsBlB,YAAY,MACrD3C,KAAK4C,cAAgB5C,KAAK6D,qBAC1B7D,KAAKoC,WAAWC,KAAK,CACnBC,iBAAkBtC,KAAK4C,e,KAEpB,CACL5C,KAAKiB,SAASjB,KAAK4C,eAAeD,YAAY,MAC9C3C,KAAKoC,WAAWC,KAAK,CACnBC,iBAAkBtC,KAAK4C,e,CAG3B5C,KAAK+C,sB,CAGPe,qBACE9D,KAAK+C,sB,CAGPgB,qBACE,GAAI/D,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK0B,uB,KACA,CACL1B,KAAK2B,eAAiB,MACtB3B,KAAK4B,gBAAkB,K,CAEzB5B,KAAKK,mB,CAGP2D,SACE,OACEC,EAACC,EAAI,CACHC,KAAK,OACLC,MAAO,GAAGpE,KAAKqE,YAAc,qBAAqBrE,KAAKqE,cAAgB,MAEvEJ,EAAA,OACEG,MAAM,UACNE,IAAMC,IACJvE,KAAKC,kBAAoBsE,CAAoB,GAG/CN,EAAA,UACEG,MAAO,sBAAsBpE,KAAK2B,eAAiB,OAAS,KAC5Dc,UAAWzC,KAAK2B,eAChB6C,QAAS,IAAMxE,KAAKsD,cAEpBW,EAAA,aAAWQ,KAAK,eAAeC,KAAK,UAEtCT,EAAA,aACAA,EAAA,UACEG,MAAO,uBAAuBpE,KAAK4B,gBAAkB,OAAS,KAC9Da,UAAWzC,KAAK4B,gBAChB4C,QAAS,IAAMxE,KAAKoD,eAEpBa,EAAA,aAAWQ,KAAK,gBAAgBC,KAAK,W"}

package/dist/tegel/p-25bb13c6.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as e,H as t}from"./p-0a99765f.js";const s=':host{box-sizing:border-box;position:relative}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;min-width:142px;display:block;width:calc(100% - 32px);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none;border-left:1px solid;border-left-color:transparent}:host div:not(.selected){background-color:var(--sdds-folder-tab-background)}:host div:not(.selected) ::slotted(*){border-left-color:var(--sdds-folder-tab-divider-color);border-top:2px solid var(--sdds-folder-tab-background);color:var(--sdds-folder-tab-item-color)}:host div:not(.selected):hover{background-color:var(--sdds-folder-tab-background-hover);cursor:pointer}:host div:not(.selected):hover ::slotted(*){border-top-color:var(--sdds-folder-tab-background-hover);color:var(--sdds-folder-tab-color)}:host ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .disabled{pointer-events:none}:host .disabled ::slotted(*){color:var(--sdds-folder-tab-item-color-disabled)}:host .disabled:focus-visible{outline:none}:host .selected{background-color:var(--sdds-folder-tab-background-selected);border-top:2px solid var(--sdds-folder-tab-border-selected)}:host .selected::after{content:" ";background-color:var(--sdds-folder-tab-background-selected);width:1px;top:0;bottom:0;right:-1px;display:block;position:absolute;z-index:1}:host .selected ::slotted(*){color:var(--sdds-folder-tab-color)}:host(.first) :not(.selected) ::slotted(*){border-left-color:transparent}';const d=class{constructor(e){o(this,e);this.disabled=false;this.selected=false;this.tabWidth=undefined}async setTabWidth(o){this.tabWidth=o}async setSelected(o){this.selected=o}render(){return e(t,{role:"listitem"},e("div",{class:`${this.disabled?"disabled":""}\n                  ${this.selected?"selected":""}\n                `,style:{width:`${this.tabWidth}px`}},e("slot",null)))}};d.style=s;export{d as sdds_folder_tab};
-//# sourceMappingURL=p-25bb13c6.entry.js.map

package/dist/tegel/p-25bb13c6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sddsFolderTabCss","SddsFolderTab","async","width","this","tabWidth","selected","render","h","Host","role","class","disabled","style"],"sources":["./src/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.scss?tag=sdds-folder-tab&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tab/sdds-folder-tab.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  position: relative;\n\n  ::slotted(*) {\n    all: unset;\n    min-width: 142px;\n    display: block;\n    width: calc(100% - 32px);\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    cursor: pointer;\n    padding: 16px;\n    white-space: nowrap;\n    text-decoration: none;\n    text-align: left;\n    outline: none;\n    border: none;\n    border-left: 1px solid;\n    border-left-color: transparent;\n  }\n\n  div:not(.selected) {\n    background-color: var(--sdds-folder-tab-background);\n\n    ::slotted(*) {\n      border-left-color: var(--sdds-folder-tab-divider-color);\n      border-top: 2px solid var(--sdds-folder-tab-background);\n      color: var(--sdds-folder-tab-item-color);\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tab-background-hover);\n      cursor: pointer;\n\n      ::slotted(*) {\n        border-top-color: var(--sdds-folder-tab-background-hover);\n        color: var(--sdds-folder-tab-color);\n      }\n    }\n  }\n\n  ::slotted(*:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n  .disabled {\n    pointer-events: none;\n\n    ::slotted(*) {\n      color: var(--sdds-folder-tab-item-color-disabled);\n    }\n\n    &:focus-visible {\n      outline: none;\n    }\n  }\n\n  .selected {\n    background-color: var(--sdds-folder-tab-background-selected);\n    border-top: 2px solid var(--sdds-folder-tab-border-selected);\n\n    &::after {\n      content: ' ';\n      background-color: var(--sdds-folder-tab-background-selected);\n      width: 1px;\n      top: 0;\n      bottom: 0;\n      right: -1px;\n      display: block;\n      position: absolute;\n      z-index: 1;\n    }\n\n    ::slotted(*) {\n      color: var(--sdds-folder-tab-color);\n    }\n  }\n}\n\n:host(.first) {\n  :not(.selected) {\n    ::slotted(*) {\n      border-left-color: transparent;\n    }\n  }\n}\n","import { Component, Host, h, Method, State, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tab',\n  styleUrl: 'sdds-folder-tab.scss',\n  shadow: true,\n})\nexport class SddsFolderTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  @State() tabWidth: number;\n\n  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setTabWidth(width: number) {\n    this.tabWidth = width;\n  }\n\n  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setSelected(selected: boolean) {\n    this.selected = selected;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={`${this.disabled ? 'disabled' : ''}\n                  ${this.selected ? 'selected' : ''}\n                `}\n          style={{ width: `${this.tabWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAmB,wjD,MCOZC,EAAa,M,uCAEI,M,cAEC,M,wBAM7BC,kBAAkBC,GAChBC,KAAKC,SAAWF,C,CAKlBD,kBAAkBI,GAChBF,KAAKE,SAAWA,C,CAGlBC,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,OACEG,MAAO,GAAGP,KAAKQ,SAAW,WAAa,yBAC7BR,KAAKE,SAAW,WAAa,uBAEvCO,MAAO,CAAEV,MAAO,GAAGC,KAAKC,eAExBG,EAAA,c"}

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

@@ -1,2 +0,0 @@
-import{r as t,h as o,H as s}from"./p-0a99765f.js";const e=":host{display:block;width:96px;height:96px}:host ::slotted(a),:host ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--sdds-nav-item-border-color);width:100%;height:100%;border:none;padding:0 12px;display:flex;text-align:center;justify-content:center;align-items:center;flex-direction:column;gap:8px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);background-color:var(--sdds-header-app-launcher-menu-bg);color:var(--sdds-grey-800);border-radius:4px;transition:background-color 150ms ease}:host ::slotted(a:hover),:host ::slotted(button:hover){background-color:var(--sdds-grey-100);cursor:pointer}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}";const r=class{constructor(o){t(this,o)}render(){return o(s,{role:"listitem"},o("slot",null))}};r.style=e;export{r as sdds_header_launcher_grid_item};
-//# sourceMappingURL=p-26940899.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["headerLauncherGridItemCss","HeaderLauncherGridItem","render","h","Host","role"],"sources":["./src/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.scss?tag=sdds-header-launcher-grid-item&encapsulation=shadow","./src/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n:host {\n  display: block;\n  width: 96px;\n  height: 96px;\n\n  ::slotted(a),\n  ::slotted(button) {\n    all: unset;\n    box-sizing: border-box;\n    border-right: 1px solid var(--sdds-nav-item-border-color);\n    width: 100%;\n    height: 100%;\n    border: none;\n    padding: 0 12px;\n    display: flex;\n    text-align: center;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    gap: 8px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    background-color: var(--sdds-header-app-launcher-menu-bg);\n    color: var(--sdds-grey-800);\n    border-radius: 4px;\n    transition: background-color 150ms ease;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover) {\n    background-color: var(--sdds-grey-100);\n    cursor: pointer;\n  }\n\n  ::slotted(a:focus-visible),\n  ::slotted(button:focus-visible) {\n    @include sdds-focus-state;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-launcher-grid-item',\n  styleUrl: 'header-launcher-grid-item.scss',\n  shadow: true,\n})\nexport class HeaderLauncherGridItem {\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA4B,ywB,MCOrBC,EAAsB,M,yBACjCC,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,a"}

package/dist/tegel/p-27e1c35d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,H as a}from"./p-0a99765f.js";const s=':host{box-sizing:border-box;z-index:200;display:block}:host *{box-sizing:border-box}:host ::slotted(*){all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0;width:100%;margin:26px 4px}:host ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .navigation-tab-item{position:relative;margin-right:32px}:host .navigation-tab-item:hover{cursor:pointer}:host .navigation-tab-item:hover::after{width:100%}:host .navigation-tab-item::after{content:" ";position:absolute;bottom:-26px;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 0s;z-index:1}:host .selected ::slotted(*){color:var(--sdds-navigation-tabs-tab-color-selected)}:host .selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host .disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host .disabled ::slotted(*){opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}';const i=class{constructor(o){t(this,o);this.disabled=false;this.selected=false}async setSelected(t){this.selected=t}render(){return o(a,{role:"listitem"},o("div",{class:`navigation-tab-item  ${this.selected?"selected":""}\n           ${this.disabled?"disabled":""}`},o("slot",null)))}};i.style=s;export{i as sdds_navigation_tab};
-//# sourceMappingURL=p-27e1c35d.entry.js.map

package/dist/tegel/p-27e1c35d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sddsNavigationTabCss","SddsNavigationTab","async","selected","this","render","h","Host","role","class","disabled"],"sources":["./src/components/tabs/navigation-tabs/navigation-tab/sdds-navigation-tab.scss?tag=sdds-navigation-tab&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tab/sdds-navigation-tab.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  z-index: z(tab);\n  display: block;\n\n  ::slotted(*) {\n    all: unset;\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out 0s;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n    width: 100%;\n    margin: 26px 4px;\n  }\n\n  ::slotted(*:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n  .navigation-tab-item {\n    position: relative;\n    margin-right: 32px;\n\n    &:hover {\n      cursor: pointer;\n\n      &::after {\n        width: 100%;\n      }\n    }\n  }\n\n  .navigation-tab-item::after {\n    content: ' ';\n    position: absolute;\n    bottom: -26px;\n    right: 0;\n    left: 0;\n    margin-left: auto;\n    width: 0%;\n    margin-right: auto;\n    height: 2px;\n    background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n    transition: width 0.15s ease-in-out 0s;\n    z-index: 1;\n  }\n\n  .selected {\n    ::slotted(*) {\n      color: var(--sdds-navigation-tabs-tab-color-selected);\n    }\n\n    &::after {\n      width: 100%;\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n    }\n  }\n\n  .disabled {\n    color: var(--sdds-navigation-tabs-tab-color-disabled);\n    pointer-events: none;\n\n    ::slotted(*) {\n      opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n    }\n  }\n}\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}\n","import { Component, Host, h, Prop, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tab',\n  styleUrl: 'sdds-navigation-tab.scss',\n  shadow: true,\n})\nexport class SddsNavigationTab {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  @State() selected: boolean = false;\n\n  /** @internal Method to set the tab as selected. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setSelected(selected: boolean) {\n    this.selected = selected;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div\n          class={`navigation-tab-item  ${this.selected ? 'selected' : ''}\n           ${this.disabled ? 'disabled' : ''}`}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAuB,u1C,MCOhBC,EAAiB,M,uCAEA,M,cAEC,K,CAI7BC,kBAAkBC,GAChBC,KAAKD,SAAWA,C,CAGlBE,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,OACEG,MAAO,wBAAwBL,KAAKD,SAAW,WAAa,kBACzDC,KAAKM,SAAW,WAAa,MAEhCJ,EAAA,c"}

package/dist/tegel/p-28855cf0.entry.js

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

package/dist/tegel/p-28855cf0.entry.js.map

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

package/dist/tegel/p-294cc3eb.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as e,H as i}from"./p-0a99765f.js";const d=":host{display:flex;align-items:center;gap:12px;height:68px}:host sdds-side-menu-user-image{margin-left:-4px}";const n=class{constructor(e){s(this,e);this.heading=undefined;this.subheading=undefined;this.imgSrc=undefined;this.imgAlt=undefined}render(){return e(i,null,e("sdds-side-menu-user-image",{src:this.imgSrc,alt:this.imgAlt},e("slot",{name:"image"})),e("sdds-side-menu-user-label",{heading:this.heading,subheading:this.subheading}))}};n.style=d;export{n as sdds_side_menu_user};
-//# sourceMappingURL=p-294cc3eb.entry.js.map

package/dist/tegel/p-294cc3eb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sideMenuUserCss","SideMenuUser","render","h","Host","src","this","imgSrc","alt","imgAlt","name","heading","subheading"],"sources":["./src/components/side-menu/webcomponent/side-menu-user/side-menu-user.scss?tag=sdds-side-menu-user&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-user/side-menu-user.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  height: 68px;\n\n  sdds-side-menu-user-image {\n    margin-left: -4px;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-side-menu-user',\n  styleUrl: 'side-menu-user.scss',\n  shadow: true,\n})\nexport class SideMenuUser {\n  /** The heading text. */\n  @Prop() heading!: string;\n\n  /** The subheading text. */\n  @Prop() subheading: string;\n\n  /** The image source. */\n  @Prop() imgSrc: string;\n\n  /** The image alt text. */\n  @Prop() imgAlt: string;\n\n  render() {\n    return (\n      <Host>\n        <sdds-side-menu-user-image src={this.imgSrc} alt={this.imgAlt}>\n          <slot name=\"image\"></slot>\n        </sdds-side-menu-user-image>\n        <sdds-side-menu-user-label\n          heading={this.heading}\n          subheading={this.subheading}\n        ></sdds-side-menu-user-label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,+G,MCOXC,EAAY,M,sHAavBC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,6BAA2BE,IAAKC,KAAKC,OAAQC,IAAKF,KAAKG,QACrDN,EAAA,QAAMO,KAAK,WAEbP,EAAA,6BACEQ,QAASL,KAAKK,QACdC,WAAYN,KAAKM,a"}

package/dist/tegel/p-2a322776.entry.js

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

package/dist/tegel/p-2a322776.entry.js.map

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

package/dist/tegel/p-2d727a59.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as e,H as t,g as d}from"./p-0a99765f.js";const a=":host{background-color:var(--sdds-header-avatar-item-background);display:flex;height:84px}:host .user-box{gap:16px;width:100%;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color)}:host img,:host slot[name=image]::slotted(*){width:34px;border-radius:100%}:host .user-content{display:flex;flex-direction:column;gap:4px}:host .user-content .header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host .user-content .subheader{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-header-avatar-item-color)}";const r=class{constructor(e){s(this,e);this.imgUrl=undefined;this.imgAlt=undefined;this.heading=undefined;this.subheading=undefined}render(){return e(t,{role:"listitem"},e("div",{class:"user-box"},this.imgUrl&&e("img",{src:this.imgUrl,alt:this.imgAlt}),e("slot",{name:"image"}),e("div",{class:"user-content"},e("div",{class:"header"},this.heading,e("slot",{name:"heading"})),e("div",{class:"subheader"},this.subheading,e("slot",{name:"subheading"})))))}get host(){return d(this)}};r.style=a;export{r as sdds_header_dropdown_list_user};
-//# sourceMappingURL=p-2d727a59.entry.js.map

package/dist/tegel/p-2d727a59.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["headerDropdownListUserCss","HeaderDropdownListLgUser","render","h","Host","role","class","this","imgUrl","src","alt","imgAlt","name","heading","subheading"],"sources":["./src/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.scss?tag=sdds-header-dropdown-list-user&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.tsx"],"sourcesContent":[":host {\n  background-color: var(--sdds-header-avatar-item-background);\n  display: flex;\n  height: 84px;\n\n  .user-box {\n    gap: 16px;\n    width: 100%;\n    padding: 0 16px;\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n  }\n\n  img,\n  slot[name='image']::slotted(*) {\n    width: 34px;\n    border-radius: 100%;\n  }\n\n  .user-content {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n\n    .header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n    }\n\n    .subheader {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-header-avatar-item-color);\n    }\n  }\n}\n","import { Component, h, Prop, Element, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown-list-user',\n  styleUrl: 'header-dropdown-list-user.scss',\n  shadow: true,\n})\nexport class HeaderDropdownListLgUser {\n  /** Image URL. */\n  @Prop() imgUrl: string;\n\n  /** Image alt text. */\n  @Prop() imgAlt: string;\n\n  /** Heading, usually the users first name and last name. */\n  @Prop() heading: string;\n\n  /** Subheading. */\n  @Prop() subheading: string;\n\n  @Element() host: HTMLElement;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <div class=\"user-box\">\n          {this.imgUrl && <img src={this.imgUrl} alt={this.imgAlt} />}\n          <slot name=\"image\"></slot>\n          <div class=\"user-content\">\n            <div class=\"header\">\n              {this.heading}\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"subheader\">\n              {this.subheading}\n              <slot name=\"subheading\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAA4B,inB,MCOrBC,EAAwB,M,sHAenCC,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,OAAKG,MAAM,YACRC,KAAKC,QAAUL,EAAA,OAAKM,IAAKF,KAAKC,OAAQE,IAAKH,KAAKI,SACjDR,EAAA,QAAMS,KAAK,UACXT,EAAA,OAAKG,MAAM,gBACTH,EAAA,OAAKG,MAAM,UACRC,KAAKM,QACNV,EAAA,QAAMS,KAAK,aAEbT,EAAA,OAAKG,MAAM,aACRC,KAAKO,WACNX,EAAA,QAAMS,KAAK,kB"}

package/dist/tegel/p-2f9e1702.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as d,H as s,g as a}from"./p-0a99765f.js";import{u as r,i as t}from"./p-5e9e9d8a.js";const n="sdds-header{display:block;height:var(--sdds-header-height);background-color:var(--sdds-header-background);width:100%;z-index:300}nav{box-sizing:border-box;background-color:var(--sdds-header-background);width:100%;display:block}nav *{box-sizing:border-box}nav .sdds-header-component-list{height:var(--sdds-header-height);all:unset;display:flex;justify-content:start;align-items:center}nav sdds-header-dropdown,nav sdds-header-item{display:none}nav .sdds-header-middle-spacer{all:unset;display:block;flex-grow:1;height:var(--sdds-header-height);border-right:1px solid var(--sdds-header--basic-element-border)}@media screen and (min-width: 992px){nav sdds-header-dropdown,nav sdds-header-item{display:block}}nav sdds-header-item:nth-child(3),nav sdds-header-dropdown:nth-child(3){border-left:1px solid var(--sdds-header--basic-element-border)}";const o=class{constructor(d){e(this,d);const s=e=>{e.forEach((e=>{if(e.type==="childList"){r(e.target)}}))};this.observer=new MutationObserver(s)}componentDidLoad(){const e=this.host;const d=e.querySelector(".sdds-header-component-list");this.observer.observe(d,{childList:true,subtree:false});r(d)}disconnectedCallback(){this.observer.disconnect()}render(){const e=Object.assign({},t(this.host));return d(s,null,d("slot",{name:"hamburger"}),d("slot",{name:"title"}),d("nav",Object.assign({},e),d("ul",{class:"sdds-header-component-list"},d("slot",null),d("li",{class:"sdds-header-middle-spacer"}),d("slot",{name:"end"}))))}get host(){return a(this)}};o.style=n;export{o as sdds_header};
-//# sourceMappingURL=p-2f9e1702.entry.js.map

package/dist/tegel/p-2f9e1702.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["headerComponentCss","SddsHeader","constructor","hostRef","callback","mutationsList","forEach","mutation","type","updateListChildrenRoles","target","this","observer","MutationObserver","componentDidLoad","hostElement","host","navElement","querySelector","observe","childList","subtree","disconnectedCallback","disconnect","render","navAttributes","Object","assign","inheritAriaAttributes","h","Host","name","class"],"sources":["./src/components/header/webcomponent/header-component.scss?tag=sdds-header","./src/components/header/webcomponent/header-component.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/flex-center';\n@import '../../../mixins/scrollbar';\n@import '../../../mixins/z-index';\n\nsdds-header {\n  display: block;\n  height: var(--sdds-header-height);\n  background-color: var(--sdds-header-background);\n  width: 100%;\n  z-index: z(header);\n}\n\nnav {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-header-background);\n  width: 100%;\n  display: block;\n\n  .sdds-header-component-list {\n    height: var(--sdds-header-height);\n    all: unset;\n    display: flex;\n    justify-content: start;\n    align-items: center;\n  }\n\n  sdds-header-dropdown,\n  sdds-header-item {\n    display: none;\n  }\n\n  .sdds-header-middle-spacer {\n    all: unset;\n    display: block;\n    flex-grow: 1;\n    height: var(--sdds-header-height);\n    border-right: 1px solid var(--sdds-header--basic-element-border);\n  }\n\n  @media screen and (min-width: $grid-lg) {\n    sdds-header-dropdown,\n    sdds-header-item {\n      display: block;\n    }\n  }\n\n  sdds-header-item:nth-child(3),\n  sdds-header-dropdown:nth-child(3) {\n    /* Adds a left border to the button after the title, if any */\n    border-left: 1px solid var(--sdds-header--basic-element-border);\n  }\n}\n","import { Component, h, Host, Element } from '@stencil/core';\nimport { inheritAriaAttributes, updateListChildrenRoles } from '../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header',\n  styleUrl: 'header-component.scss',\n  shadow: false,\n})\nexport class SddsHeader {\n  @Element() host: HTMLElement;\n\n  private observer: MutationObserver;\n\n  constructor() {\n    const callback: MutationCallback = (mutationsList) => {\n      mutationsList.forEach((mutation) => {\n        if (mutation.type === 'childList') {\n          updateListChildrenRoles(mutation.target);\n        }\n      });\n    };\n\n    this.observer = new MutationObserver(callback);\n  }\n\n  componentDidLoad() {\n    const hostElement = this.host;\n    const navElement = hostElement.querySelector('.sdds-header-component-list');\n\n    this.observer.observe(navElement, {\n      childList: true,\n      subtree: false,\n    });\n\n    updateListChildrenRoles(navElement);\n  }\n\n  disconnectedCallback() {\n    this.observer.disconnect();\n  }\n\n  render() {\n    const navAttributes = {\n      ...inheritAriaAttributes(this.host),\n    };\n\n    return (\n      <Host>\n        <slot name=\"hamburger\"></slot>\n        <slot name=\"title\"></slot>\n        <nav {...navAttributes}>\n          <ul class=\"sdds-header-component-list\">\n            <slot></slot>\n            <li class=\"sdds-header-middle-spacer\"></li>\n            <slot name=\"end\"></slot>\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAqB,20B,MCQdC,EAAU,MAKrBC,YAAAC,G,UACE,MAAMC,EAA8BC,IAClCA,EAAcC,SAASC,IACrB,GAAIA,EAASC,OAAS,YAAa,CACjCC,EAAwBF,EAASG,O,IAEnC,EAGJC,KAAKC,SAAW,IAAIC,iBAAiBT,E,CAGvCU,mBACE,MAAMC,EAAcJ,KAAKK,KACzB,MAAMC,EAAaF,EAAYG,cAAc,+BAE7CP,KAAKC,SAASO,QAAQF,EAAY,CAChCG,UAAW,KACXC,QAAS,QAGXZ,EAAwBQ,E,CAG1BK,uBACEX,KAAKC,SAASW,Y,CAGhBC,SACE,MAAMC,EAAaC,OAAAC,OAAA,GACdC,EAAsBjB,KAAKK,OAGhC,OACEa,EAACC,EAAI,KACHD,EAAA,QAAME,KAAK,cACXF,EAAA,QAAME,KAAK,UACXF,EAAA,MAAAH,OAAAC,OAAA,GAASF,GACPI,EAAA,MAAIG,MAAM,8BACRH,EAAA,aACAA,EAAA,MAAIG,MAAM,8BACVH,EAAA,QAAME,KAAK,U"}

package/dist/tegel/p-3b2a2b40.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as t,F as e,H as o,g as n}from"./p-0a99765f.js";const i=":host{display:block}:host .wrapper{display:flex;flex-direction:column}:host .dropdown-icon{margin-left:auto;transition:all 0.2s ease-in-out}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .menu{display:block}:host .state-collapsed .menu{--side-menu-width:68px;position:absolute;left:var(--side-menu-width);box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-header-app-launcher-menu-background)}:host .state-collapsed .menu .heading-collapsed{all:unset;box-sizing:border-box;padding:16px 24px 15px;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host :not(.state-collapsed) .menu ::slotted(sdds-side-menu-dropdown-list){width:100%}:host .menu{display:none;flex-direction:column}";const d=class{constructor(t){s(this,t);this.defaultOpen=false;this.buttonLabel=undefined;this.selected=false;this.open=false;this.hoverState=undefined;this.collapsed=false}collapsedSideMenuEventHandler(s){this.collapsed=s.detail.collapsed}onEventPointerEnter(){this.setHoverStateOpen()}onEventFocus(){this.setHoverStateOpen()}onEventPointerLeave(){this.setHoverStateClosed()}onEventBlur(){this.setHoverStateClosed()}setHoverStateOpen(){this.hoverState={isHovered:true,updatedAt:Date.now()}}setHoverStateClosed(){const s=Date.now();const t=150;setTimeout((()=>{if(this.hoverState.isHovered&&this.hoverState.updatedAt<s){this.hoverState={isHovered:false,updatedAt:Date.now()}}}),t)}getIsOpenState(){var s;return this.collapsed?(s=this.hoverState)===null||s===void 0?void 0:s.isHovered:this.open}connectedCallback(){this.sideMenuEl=this.host.closest("sdds-side-menu");this.collapsed=this.sideMenuEl.collapsed;this.open=this.defaultOpen}render(){return t(o,null,t("div",{class:{wrapper:true,"state-open":this.getIsOpenState(),"state-collapsed":this.collapsed}},t("sdds-side-menu-item",{class:"button",active:this.getIsOpenState(),selected:this.selected,onClick:()=>{this.open=!this.open}},t("button",null,t("slot",{name:"button-icon"}),!this.collapsed&&t(e,null,this.buttonLabel,t("slot",{name:"button-label"}),t("sdds-icon",{class:"dropdown-icon",name:"chevron_down",size:"16px"})))),t("div",{class:"menu"},this.collapsed&&t("h3",{class:"heading-collapsed"},this.buttonLabel,t("slot",{name:"button-label"})),t("slot",null))))}get host(){return n(this)}};d.style=i;export{d as sdds_side_menu_dropdown};
-//# sourceMappingURL=p-3b2a2b40.entry.js.map

package/dist/tegel/p-3b2a2b40.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sideMenuDropdownCss","SideMenuDropdown","collapsedSideMenuEventHandler","event","this","collapsed","detail","onEventPointerEnter","setHoverStateOpen","onEventFocus","onEventPointerLeave","setHoverStateClosed","onEventBlur","hoverState","isHovered","updatedAt","Date","now","leftAt","toleranceInMilliseconds","setTimeout","getIsOpenState","_a","open","connectedCallback","sideMenuEl","host","closest","defaultOpen","render","h","Host","class","wrapper","active","selected","onClick","name","Fragment","buttonLabel","size"],"sources":["./src/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.scss?tag=sdds-side-menu-dropdown&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .dropdown-icon {\n    margin-left: auto;\n    transition: all 0.2s ease-in-out;\n  }\n\n  .state-open {\n    .dropdown-icon {\n      transform: rotateZ(180deg);\n    }\n\n    .menu {\n      display: block;\n    }\n  }\n\n  .state-collapsed {\n    .menu {\n      --side-menu-width: 68px;\n\n      position: absolute;\n      left: var(--side-menu-width);\n      box-shadow: var(--sdds-nav-dropdown-menu-box);\n      background-color: var(--sdds-header-app-launcher-menu-background);\n\n      .heading-collapsed {\n        all: unset;\n        box-sizing: border-box;\n        padding: 16px 24px 15px;\n        min-height: 48px;\n        display: flex;\n        align-items: center;\n        border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);\n        font: var(--sdds-headline-07);\n        letter-spacing: var(--sdds-headline-07-ls);\n      }\n    }\n  }\n\n  :not(.state-collapsed) {\n    .menu {\n      ::slotted(sdds-side-menu-dropdown-list) {\n        width: 100%;\n      }\n    }\n  }\n\n  .menu {\n    display: none;\n    flex-direction: column;\n  }\n}\n","import { Component, Element, Fragment, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\n\n@Component({\n  tag: 'sdds-side-menu-dropdown',\n  styleUrl: 'side-menu-dropdown.scss',\n  shadow: true,\n})\nexport class SideMenuDropdown {\n  @Element() host: HTMLElement;\n\n  /** If the dropdown should be open from the start. */\n  @Prop() defaultOpen: boolean = false;\n\n  /** The label of the button that opens the dropdown.\n   * This is an alternative to the button-label slot. */\n  @Prop() buttonLabel: string;\n\n  /** If the button that opens the dropdown should appear selected. */\n  @Prop() selected: boolean = false;\n\n  @State() open: boolean = false;\n\n  @State() hoverState: { isHovered: boolean; updatedAt: number };\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n  }\n\n  @Listen('pointerenter')\n  onEventPointerEnter() {\n    this.setHoverStateOpen();\n  }\n\n  @Listen('focusin')\n  onEventFocus() {\n    this.setHoverStateOpen();\n  }\n\n  @Listen('pointerleave')\n  onEventPointerLeave() {\n    this.setHoverStateClosed();\n  }\n\n  @Listen('focusout')\n  onEventBlur() {\n    this.setHoverStateClosed();\n  }\n\n  setHoverStateOpen() {\n    this.hoverState = { isHovered: true, updatedAt: Date.now() };\n  }\n\n  setHoverStateClosed() {\n    const leftAt = Date.now();\n    const toleranceInMilliseconds = 150;\n    setTimeout(() => {\n      if (this.hoverState.isHovered && this.hoverState.updatedAt < leftAt) {\n        this.hoverState = { isHovered: false, updatedAt: Date.now() };\n      }\n    }, toleranceInMilliseconds);\n  }\n\n  getIsOpenState() {\n    return this.collapsed ? this.hoverState?.isHovered : this.open;\n  }\n\n  connectedCallback() {\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl.collapsed;\n    this.open = this.defaultOpen;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'wrapper': true,\n            'state-open': this.getIsOpenState(),\n            'state-collapsed': this.collapsed,\n          }}\n        >\n          <sdds-side-menu-item\n            class=\"button\"\n            active={this.getIsOpenState()}\n            selected={this.selected}\n            onClick={() => {\n              this.open = !this.open;\n            }}\n          >\n            <button>\n              <slot name=\"button-icon\"></slot>\n              {!this.collapsed && (\n                <Fragment>\n                  {this.buttonLabel}\n                  <slot name=\"button-label\"></slot>\n                  <sdds-icon class=\"dropdown-icon\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n                </Fragment>\n              )}\n            </button>\n          </sdds-side-menu-item>\n          <div class=\"menu\">\n            {this.collapsed && (\n              <h3 class=\"heading-collapsed\">\n                {this.buttonLabel}\n                <slot name=\"button-label\"></slot>\n              </h3>\n            )}\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAsB,g3B,MCQfC,EAAgB,M,0CAII,M,yCAOH,M,UAEH,M,yCAIK,K,CAK9BC,8BAA8BC,GAC5BC,KAAKC,UAAYF,EAAMG,OAAOD,S,CAIhCE,sBACEH,KAAKI,mB,CAIPC,eACEL,KAAKI,mB,CAIPE,sBACEN,KAAKO,qB,CAIPC,cACER,KAAKO,qB,CAGPH,oBACEJ,KAAKS,WAAa,CAAEC,UAAW,KAAMC,UAAWC,KAAKC,M,CAGvDN,sBACE,MAAMO,EAASF,KAAKC,MACpB,MAAME,EAA0B,IAChCC,YAAW,KACT,GAAIhB,KAAKS,WAAWC,WAAaV,KAAKS,WAAWE,UAAYG,EAAQ,CACnEd,KAAKS,WAAa,CAAEC,UAAW,MAAOC,UAAWC,KAAKC,M,IAEvDE,E,CAGLE,iB,MACE,OAAOjB,KAAKC,WAAYiB,EAAAlB,KAAKS,cAAU,MAAAS,SAAA,SAAAA,EAAER,UAAYV,KAAKmB,I,CAG5DC,oBACEpB,KAAKqB,WAAarB,KAAKsB,KAAKC,QAAQ,kBACpCvB,KAAKC,UAAYD,KAAKqB,WAAWpB,UACjCD,KAAKmB,KAAOnB,KAAKwB,W,CAGnBC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACLC,QAAW,KACX,aAAc7B,KAAKiB,iBACnB,kBAAmBjB,KAAKC,YAG1ByB,EAAA,uBACEE,MAAM,SACNE,OAAQ9B,KAAKiB,iBACbc,SAAU/B,KAAK+B,SACfC,QAAS,KACPhC,KAAKmB,MAAQnB,KAAKmB,IAAI,GAGxBO,EAAA,cACEA,EAAA,QAAMO,KAAK,iBACTjC,KAAKC,WACLyB,EAACQ,EAAQ,KACNlC,KAAKmC,YACNT,EAAA,QAAMO,KAAK,iBACXP,EAAA,aAAWE,MAAM,gBAAgBK,KAAK,eAAeG,KAAK,YAKlEV,EAAA,OAAKE,MAAM,QACR5B,KAAKC,WACJyB,EAAA,MAAIE,MAAM,qBACP5B,KAAKmC,YACNT,EAAA,QAAMO,KAAK,kBAGfP,EAAA,e"}

package/dist/tegel/p-446b9edc.entry.js

@@ -1,2 +0,0 @@
-import{r as d,c as s,h as a,H as t,g as i}from"./p-0a99765f.js";const r=".card{box-shadow:var(--sdds-card-box);background-color:var(--sdds-card-background);display:block;border-radius:4px;max-width:368px;overflow:hidden;width:100%}.card.clickable:hover{box-shadow:var(--sdds-card-box-hover);cursor:pointer}.card .card-top{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-top img.card-top-image{width:36px;height:36px;border-radius:100%}.card .card-top .card-top-header{padding-left:16px;display:flex;flex-direction:column;row-gap:4px}.card .card-top .card-top-header.no-header-img{padding-left:0}.card .card-top .card-top-header.single-line-header{row-gap:0}.card .card-top.below{padding-top:16px}.card .card-header{color:var(--sdds-card-headline)}.card .card-subheader{color:var(--sdds-card-sub-headline)}.card .card-body-img{width:100%}.card .sdds-divider{margin:16px 16px 0;background-color:var(--sdds-card-divider);height:1px}.card slot[name=card-body]::slotted(*){font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls);color:var(--sdds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px}.card slot[name=card-bottom]::slotted(*){display:flex;padding:16px;color:var(--sdds-card-icon-color)}button{border:none;text-align:left;padding:0}button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--sdds-card-box-pressed)}";const e=class{constructor(t){d(this,t);this.sddsClick=s(this,"sddsClick",6);this.handleClick=()=>{this.sddsClick.emit({cardId:this.cardId})};this.getCardContent=()=>a("div",null,this.headerPlacement==="above"&&a("div",{class:`card-top ${this.headerPlacement}`},this.headerImg&&a("img",{class:`card-top-image`,src:this.headerImg,alt:this.headerImgAlt})," ",a("div",{class:`\n          card-top-header\n          ${!this.headerImg?"no-header-img":""}\n          ${!this.header||!this.subheader?"single-line-header":""}\n          `},a("span",{class:`card-header`},this.header),a("span",{class:`card-subheader`},this.subheader))),a("div",{class:`card-body`},this.bodyImg&&a("img",{class:`card-body-img`,src:this.bodyImg,alt:this.bodyImgAlt}),this.headerPlacement==="below"&&(this.headerImg||this.header||this.subheader)&&a("div",{class:`card-top ${this.headerPlacement}`},this.headerImg&&a("img",{class:`card-top-image`,src:this.headerImg,alt:this.headerImgAlt}),a("div",{class:`\n            card-top-header\n            ${!this.headerImg?"no-header-img":""}\n            ${!this.header||!this.subheader?"single-line-header":""}\n            `},a("span",{class:`card-header`},this.header),a("span",{class:`card-subheader`},this.subheader))),this.bodyDivider&&a("div",{class:`sdds-divider`}),a("slot",{name:"card-body"})),a("div",{class:`card-bottom`},this.hasCardBottomSlot&&a("slot",{name:`card-bottom`})));this.modeVariant=null;this.headerPlacement="above";this.header=undefined;this.subheader=undefined;this.headerImg=undefined;this.headerImgAlt=undefined;this.bodyImg=undefined;this.bodyImgAlt=undefined;this.bodyDivider=false;this.clickable=false;this.cardId=crypto.randomUUID();this.hasCardBottomSlot=false;this.hasCardBodySlot=false}connectedCallback(){this.hasCardBottomSlot=!!this.hostElement.querySelector('[slot="card-bottom"]');this.hasCardBodySlot=!!this.hostElement.querySelector('[slot="card-body"]')}render(){return a(t,{class:this.modeVariant&&`sdds-mode-variant-${this.modeVariant}`},this.clickable?a("button",{class:`card ${this.clickable?"clickable":""} ${this.headerPlacement}`,onClick:()=>{if(this.clickable){this.handleClick()}}},this.getCardContent()):a("div",{class:`card ${this.clickable?"clickable":""} ${this.headerPlacement}`},this.getCardContent()))}get hostElement(){return i(this)}};e.style=r;export{e as sdds_card};
-//# sourceMappingURL=p-446b9edc.entry.js.map

package/dist/tegel/p-446b9edc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sddsCardCss","SddsCard","this","handleClick","sddsClick","emit","cardId","getCardContent","h","headerPlacement","class","headerImg","src","alt","headerImgAlt","header","subheader","bodyImg","bodyImgAlt","bodyDivider","name","hasCardBottomSlot","crypto","randomUUID","connectedCallback","hostElement","querySelector","hasCardBodySlot","render","Host","modeVariant","clickable","onClick"],"sources":["./src/components/card/sdds-card.scss?tag=sdds-card&encapsulation=shadow","./src/components/card/sdds-card.tsx"],"sourcesContent":[".card {\n  box-shadow: var(--sdds-card-box);\n  background-color: var(--sdds-card-background);\n  display: block;\n  border-radius: 4px;\n  max-width: 368px;\n  overflow: hidden;\n  width: 100%;\n\n  &.clickable {\n    &:hover {\n      box-shadow: var(--sdds-card-box-hover);\n      cursor: pointer;\n    }\n  }\n\n  .card-top {\n    font: var(--sdds-headline-06);\n    letter-spacing: var(--sdds-headline-06-ls);\n    padding: 16px;\n    display: flex;\n    align-items: center;\n\n    img.card-top-image {\n      width: 36px;\n      height: 36px;\n      border-radius: 100%;\n    }\n\n    .card-top-header {\n      padding-left: 16px;\n      display: flex;\n      flex-direction: column;\n      row-gap: 4px;\n\n      &.no-header-img {\n        padding-left: 0;\n      }\n\n      &.single-line-header {\n        row-gap: 0;\n      }\n    }\n\n    &.below {\n      padding-top: 16px;\n    }\n  }\n\n  .card-header {\n    color: var(--sdds-card-headline);\n  }\n\n  .card-subheader {\n    color: var(--sdds-card-sub-headline);\n  }\n\n  .card-body-img {\n    width: 100%;\n  }\n\n  .sdds-divider {\n    margin: 16px 16px 0;\n    background-color: var(--sdds-card-divider);\n    height: 1px;\n  }\n\n  slot[name='card-body']::slotted(*) {\n    font: var(--sdds-detail-03);\n    letter-spacing: var(--sdds-detail-03-ls);\n    color: var(--sdds-card-body-color);\n    padding: 0 16px;\n    margin-bottom: 16px;\n    margin-top: 16px;\n  }\n\n  slot[name='card-bottom']::slotted(*) {\n    display: flex;\n    padding: 16px;\n    color: var(--sdds-card-icon-color);\n  } \n}\n\nbutton {\n  border: none;\n  text-align: left;\n  padding: 0;\n\n  &:focus {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  &:active {\n    box-shadow: var(--sdds-card-box-pressed);\n  }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-card',\n  styleUrl: 'sdds-card.scss',\n  shadow: true,\n})\nexport class SddsCard {\n  /** Variant of the card based on the theme used. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Placement of the header */\n  @Prop() headerPlacement: 'above' | 'below' = 'above';\n\n  /** Text in the header */\n  @Prop() header: string;\n\n  /** Subheader text in the header */\n  @Prop() subheader: string;\n\n  /** Header image src */\n  @Prop() headerImg: string;\n\n  /** Alt text for the header image */\n  @Prop() headerImgAlt: string;\n\n  /** Body image src */\n  @Prop() bodyImg: string;\n\n  /** Alt text for the body image */\n  @Prop() bodyImgAlt: string;\n\n  /** Divider for the body */\n  @Prop() bodyDivider: boolean = false;\n\n  /** Makes the card clickable. */\n  @Prop() clickable: boolean = false;\n\n  /** ID for the card, must be unique.\n   *\n   * **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n   */\n  @Prop() cardId: string = crypto.randomUUID();\n\n  /** Sends unique card identifier when the card is clicked, if clickable=true */\n  @Event({\n    eventName: 'sddsClick',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsClick: EventEmitter<{\n    cardId: string;\n  }>;\n\n  @Element() hostElement: HTMLSddsCardElement;\n\n  @State() hasCardBottomSlot: boolean = false;\n\n  @State() hasCardBodySlot: boolean = false;\n\n  connectedCallback() {\n    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n  }\n\n  handleClick = () => {\n    this.sddsClick.emit({\n      cardId: this.cardId,\n    });\n  };\n\n  getCardContent = () => (\n    <div>\n      {this.headerPlacement === 'above' && (\n        <div class={`card-top ${this.headerPlacement}`}>\n          {this.headerImg && (\n            <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n          )}{' '}\n          <div\n            class={`\n          card-top-header\n          ${!this.headerImg ? 'no-header-img' : ''}\n          ${!this.header || !this.subheader ? 'single-line-header' : ''}\n          `}\n          >\n            <span class={`card-header`}>{this.header}</span>\n            <span class={`card-subheader`}>{this.subheader}</span>\n          </div>\n        </div>\n      )}\n      <div class={`card-body`}>\n        {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n        {this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (\n          <div class={`card-top ${this.headerPlacement}`}>\n            {this.headerImg && (\n              <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n            )}\n            <div\n              class={`\n            card-top-header\n            ${!this.headerImg ? 'no-header-img' : ''}\n            ${!this.header || !this.subheader ? 'single-line-header' : ''}\n            `}\n            >\n              <span class={`card-header`}>{this.header}</span>\n              <span class={`card-subheader`}>{this.subheader}</span>\n            </div>\n          </div>\n        )}\n        {this.bodyDivider && <div class={`sdds-divider`}></div>}\n        <slot name=\"card-body\"></slot>\n      </div>\n      <div class={`card-bottom`}>\n        {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n      </div>\n    </div>\n  );\n\n  render() {\n    return (\n      <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n        {this.clickable ? (\n          <button\n            class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n            onClick={() => {\n              if (this.clickable) {\n                this.handleClick();\n              }\n            }}\n          >\n            {this.getCardContent()}\n          </button>\n        ) : (\n          <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n            {this.getCardContent()}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAc,y3C,MCOPC,EAAQ,M,8DA2DnBC,KAAAC,YAAc,KACZD,KAAKE,UAAUC,KAAK,CAClBC,OAAQJ,KAAKI,QACb,EAGJJ,KAAAK,eAAiB,IACfC,EAAA,WACGN,KAAKO,kBAAoB,SACxBD,EAAA,OAAKE,MAAO,YAAYR,KAAKO,mBAC1BP,KAAKS,WACJH,EAAA,OAAKE,MAAO,iBAAkBE,IAAKV,KAAKS,UAAWE,IAAKX,KAAKY,eAC5D,IACHN,EAAA,OACEE,MAAO,2CAENR,KAAKS,UAAY,gBAAkB,kBACnCT,KAAKa,SAAWb,KAAKc,UAAY,qBAAuB,kBAGzDR,EAAA,QAAME,MAAO,eAAgBR,KAAKa,QAClCP,EAAA,QAAME,MAAO,kBAAmBR,KAAKc,aAI3CR,EAAA,OAAKE,MAAO,aACTR,KAAKe,SAAWT,EAAA,OAAKE,MAAO,gBAAiBE,IAAKV,KAAKe,QAASJ,IAAKX,KAAKgB,aAC1EhB,KAAKO,kBAAoB,UAAYP,KAAKS,WAAaT,KAAKa,QAAUb,KAAKc,YAC1ER,EAAA,OAAKE,MAAO,YAAYR,KAAKO,mBAC1BP,KAAKS,WACJH,EAAA,OAAKE,MAAO,iBAAkBE,IAAKV,KAAKS,UAAWE,IAAKX,KAAKY,eAE/DN,EAAA,OACEE,MAAO,+CAENR,KAAKS,UAAY,gBAAkB,oBACnCT,KAAKa,SAAWb,KAAKc,UAAY,qBAAuB,oBAGzDR,EAAA,QAAME,MAAO,eAAgBR,KAAKa,QAClCP,EAAA,QAAME,MAAO,kBAAmBR,KAAKc,aAI1Cd,KAAKiB,aAAeX,EAAA,OAAKE,MAAO,iBACjCF,EAAA,QAAMY,KAAK,eAEbZ,EAAA,OAAKE,MAAO,eACTR,KAAKmB,mBAAqBb,EAAA,QAAMY,KAAM,kB,iBAzGE,K,qBAGF,Q,sKAqBd,M,eAGF,M,YAMJE,OAAOC,a,uBAeM,M,qBAEF,K,CAEpCC,oBACEtB,KAAKmB,oBAAsBnB,KAAKuB,YAAYC,cAAc,wBAC1DxB,KAAKyB,kBAAoBzB,KAAKuB,YAAYC,cAAc,qB,CAwD1DE,SACE,OACEpB,EAACqB,EAAI,CAACnB,MAAOR,KAAK4B,aAAe,qBAAqB5B,KAAK4B,eACxD5B,KAAK6B,UACJvB,EAAA,UACEE,MAAO,QAAQR,KAAK6B,UAAY,YAAc,MAAM7B,KAAKO,kBACzDuB,QAAS,KACP,GAAI9B,KAAK6B,UAAW,CAClB7B,KAAKC,a,IAIRD,KAAKK,kBAGRC,EAAA,OAAKE,MAAO,QAAQR,KAAK6B,UAAY,YAAc,MAAM7B,KAAKO,mBAC3DP,KAAKK,kB"}

package/dist/tegel/p-4485989d.entry.js

@@ -1,2 +0,0 @@
-import{r,h as i,H as d}from"./p-0a99765f.js";const o=".divider{box-sizing:border-box}.divider *{box-sizing:border-box}.divider.horizontal{background-color:var(--sdds-divider-background);width:100%;height:1px}.divider.vertical{background-color:var(--sdds-divider-background);height:100%;width:1px}";const e=class{constructor(i){r(this,i);this.orientation="horizontal"}render(){return i(d,{role:"separator","aria-orientation":this.orientation==="vertical"?"vertical":undefined},i("div",{class:`divider ${this.orientation}`}))}};e.style=o;export{e as sdds_divider};
-//# sourceMappingURL=p-4485989d.entry.js.map

package/dist/tegel/p-4485989d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dividerComponentCss","Divider","render","h","Host","role","this","orientation","undefined","class"],"sources":["./src/components/divider/divider-component.scss?tag=sdds-divider&encapsulation=shadow","./src/components/divider/divider.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.divider {\n  @include sdds-box-sizing;\n\n  &.horizontal {\n    background-color: var(--sdds-divider-background);\n    width: 100%;\n    height: 1px;\n  }\n\n  &.vertical {\n    background-color: var(--sdds-divider-background);\n    height: 100%;\n    width: 1px;\n  }\n}\n","import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-divider',\n  styleUrl: 'divider-component.scss',\n  shadow: true,\n})\nexport class Divider {\n  /** Orientation of the Divider, horizontal if not specified. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  render() {\n    return (\n      <Host\n        role=\"separator\"\n        aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n      >\n        <div class={`divider ${this.orientation}`} />\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAsB,qP,MCOfC,EAAO,M,0CAE+B,Y,CAEjDC,SACE,OACEC,EAACC,EAAI,CACHC,KAAK,YAAW,mBACEC,KAAKC,cAAgB,WAAa,WAAaC,WAEjEL,EAAA,OAAKM,MAAO,WAAWH,KAAKC,gB"}

package/dist/tegel/p-44b2b49d.entry.js

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

package/dist/tegel/p-44b2b49d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sddsFooterCss","SddsFooter","connectedCallback","this","hasTopPart","Array","from","host","children","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-lg: 992px;\n\n  .footer-top {\n    background-color: var(--sdds-footer-top-background);\n    padding: 40px;\n\n    ::slotted(*) {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr 1fr;\n      row-gap: 40px;\n      width: 100%;\n    }\n  }\n\n  .footer-main {\n    background-color: var(--sdds-footer-main-background);\n    padding: 0 40px;\n  }\n\n  .footer-main-top {\n    padding: 40px 0;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .footer-bottom-right,\n  .footer-bottom-left {\n    ::slotted(*) {\n      display: flex;\n      column-gap: 24px;\n    }\n  }\n\n  .footer-main-bottom {\n    padding: 40px 0;\n    display: flex;\n    justify-content: space-between;\n    border-top: 1px solid var(--sdds-footer-main-divider);\n\n    small.copyright {\n      margin: 0;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      color: var(--sdds-footer-main-copyright);\n    }\n\n    .brand {\n      background-image: var(--sdds-background-image-scania-wordmark-white-svg);\n      background-repeat: no-repeat;\n      background-size: 117px;\n      background-position: right;\n      width: 117px;\n      height: 20px;\n\n      p {\n        color: transparent;\n        padding: 0;\n        margin: 0;\n        height: 100%;\n        visibility: hidden;\n      }\n    }\n  }\n\n  @media all and (max-width: $grid-lg) {\n    .footer-top {\n      padding: 0;\n\n      ::slotted(*) {\n        display: block;\n        width: 100%;\n      }\n    }\n\n    .footer-main {\n      padding: 0 24px;\n    }\n\n    .footer-main-top {\n      flex-direction: column;\n      row-gap: 48px;\n      padding: 24px 0;\n    }\n\n    .footer-bottom-left {\n      ::slotted(*) {\n        flex-direction: column;\n        gap: 8px;\n      }\n    }\n\n    .footer-main-bottom {\n      flex-direction: column;\n      padding-bottom: 32px;\n\n      p.copyright {\n        padding-bottom: 96px;\n      }\n\n      .brand {\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, h, State, Element } from '@stencil/core';\nimport { Host, HostElement, Prop } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer',\n  styleUrl: 'sdds-footer.scss',\n  shadow: true,\n})\nexport class SddsFooter {\n  @Element() host: HostElement;\n\n  /** Mode variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Indictes whether or not the footer has a top part. */\n  @State() hasTopPart: boolean;\n\n  connectedCallback() {\n    this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <footer>\n          {this.hasTopPart && (\n            <div class=\"footer-top\">\n              <slot name=\"top\"></slot>\n            </div>\n          )}\n          <div class=\"footer-main\">\n            <div class=\"footer-main-top\">\n              <div class=\"footer-bottom-left\">\n                <slot name=\"main-left\"></slot>\n              </div>\n              <div class=\"footer-bottom-right\">\n                <slot name=\"main-right\"></slot>\n              </div>\n            </div>\n            <div class=\"footer-main-bottom\">\n              <small class=\"copyright\">Copyright &#169; {new Date().getFullYear()} Scania</small>\n              <div class=\"brand\">\n                <p>Scania</p>\n              </div>\n            </div>\n          </div>\n        </footer>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,ihD,MCQTC,EAAU,M,0CAI0B,K,0BAK/CC,oBACEC,KAAKC,WAAaC,MAAMC,KAAKH,KAAKI,KAAKC,UAAUC,MAAMC,GAAYA,EAAQC,OAAS,O,CAGtFC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAGZ,KAAKa,YAAc,qBAAqBb,KAAKa,cAAgB,MAC3EH,EAAA,cACGV,KAAKC,YACJS,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-537446ed.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as e,H as a,g as d}from"./p-0a99765f.js";const o=":host{box-sizing:border-box;display:table-footer-group;height:48px}:host *{box-sizing:border-box}:host .sdds-table__footer-row{background-color:var(--sdds-data-table-footer-background);color:var(--sdds-data-table-color)}:host .sdds-table__footer-cell{padding:0 16px}:host .sdds-table__footer-cell .sdds-table__pagination{height:48px;display:flex;align-items:center;justify-content:space-between}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__row-selector,:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector{display:flex;align-items:center}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);background-color:var(--sdds-data-table-footer-page-selector-input-background);color:var(--sdds-data-table-color);width:36px;height:30px;border:none;border-radius:4px;transition:background-color 250ms ease;margin-right:4px;padding-right:8px}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:hover{background-color:var(--sdds-data-table-footer-page-selector-input-background-hover)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:disabled{color:var(--sdds-data-table-footer-page-selector-input-color-disabled)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input--shake{animation:sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-text{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:1px 8px 0 0}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:32px;width:32px;border-radius:4px;transition:background-color 250ms ease}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:hover{background-color:var(--sdds-data-table-footer-btn-hover)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled{cursor:default;opacity:0.38}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled:hover{background-color:transparent}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn-svg{height:20px;width:20px;fill:var(--sdds-data-table-color)}:host(.sdds-table--compact){height:32px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination{height:32px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input{height:24px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn{height:28px;width:28px}";const l=["compactDesign","noMinWidth","verticalDividers"];function i(s){s.target.classList.remove("sdds-table__page-selector-input--shake")}const n=class{constructor(e){s(this,e);this.internalSddsEnablePagination=t(this,"internalSddsEnablePagination",6);this.sddsPageChange=t(this,"sddsPageChange",6);this.paginationPrev=s=>{s.preventDefault();if(this.paginationValue>=2){this.paginationValue--;this.runPagination()}};this.paginationNext=s=>{s.preventDefault();if(this.paginationValue<=this.numberOfPages){this.paginationValue++;this.runPagination()}};this.runPagination=()=>{if(!this.disablePaginationFunction){const s=this.host.parentNode.querySelector("sdds-table-body").querySelectorAll(".sdds-table__row");s.forEach(((s,t)=>{const e=t+1;if(this.tempPaginationDisable){this.paginationValue=1}else{const t=this.rowsPerPage*this.paginationValue;const a=t-this.rowsPerPage;if(e>a&&e<=t){s.classList.remove("sdds-table__row--hidden")}else{s.classList.add("sdds-table__row--hidden")}}}))}};this.clientPaginationPrev=s=>{s.preventDefault();if(this.clientPaginationValue>=2){this.clientPaginationValue--;this.sendPaginationValue(this.clientPaginationValue)}};this.clientPaginationNext=s=>{s.preventDefault();if(this.clientPaginationValue<=this.clientMaxPages){this.clientPaginationValue++;this.sendPaginationValue(this.clientPaginationValue)}};this.enablePagination=false;this.rowsPerPage=5;this.enableClientPagination=false;this.clientPaginationValue=1;this.clientMaxPages=1;this.clientSetColumnsNumber=null;this.disablePaginationFunction=false;this.columnsNumber=0;this.numberOfPages=0;this.paginationValue=1;this.tempPaginationDisable=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.whiteBackground=false;this.tableId=""}internalSddsPropChangeListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>l.includes(s))).forEach((t=>{if(typeof this[t]==="undefined"){throw new Error(`Table prop is not supported: ${t}`)}this[t]=s.detail[t]}))}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){l.forEach((s=>{this[s]=this.tableEl[s]}));const s=this.host.parentElement.querySelector("sdds-table-body").childElementCount;const t=this.host.parentElement.querySelector("sdds-table-header").childElementCount;this.numberOfPages=Math.ceil(s/this.rowsPerPage);if(this.clientSetColumnsNumber!==null){this.columnsNumber=this.clientSetColumnsNumber}else{this.columnsNumber=t}this.internalSddsEnablePagination.emit(this.tableId)}paginationInputChange(s){const t=s.target.value;if(t>this.numberOfPages||t<1){s.target.classList.add("sdds-table__page-selector-input--shake");this.paginationValue=s.target.max}else{this.paginationValue=s.target.value}this.runPagination()}sddsPaginationListener(s){if(this.tableId===s.detail){this.runPagination()}}sendPaginationValue(s){this.sddsPageChange.emit([this.tableId,s])}clientPaginationInputChange(s){const t=s.target.value;if(t>this.clientMaxPages||t<1){s.target.classList.add("sdds-table__page-selector-input--shake");this.clientPaginationValue=s.target.max}else{this.clientPaginationValue=s.target.value}this.sendPaginationValue(this.clientPaginationValue)}render(){return e(a,{class:this.compactDesign?"sdds-table--compact":""},e("tr",{class:"sdds-table__footer-row"},e("td",{class:"sdds-table__footer-cell",colSpan:this.columnsNumber},this.enablePagination&&!this.enableClientPagination&&e("div",{class:"sdds-table__pagination"},e("div",{class:"sdds-table__row-selector"}),e("div",{class:"sdds-table__page-selector"},e("input",{class:"sdds-table__page-selector-input",type:"number",min:"1",max:this.numberOfPages,value:this.paginationValue,pattern:"[0-9]+",dir:"rtl",onChange:s=>this.paginationInputChange(s),onFocusout:s=>this.paginationInputChange(s),onAnimationEnd:i,disabled:this.tempPaginationDisable}),e("p",{class:"sdds-table__footer-text"},"of ",e("span",null,this.tempPaginationDisable?1:this.numberOfPages)," pages"),e("button",{class:"sdds-table__footer-btn",disabled:this.paginationValue<=1||this.tempPaginationDisable,onClick:s=>this.paginationPrev(s)},e("svg",{class:"sdds-table__footer-btn-svg",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},e("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z"}))),e("button",{class:"sdds-table__footer-btn",disabled:this.paginationValue>=this.numberOfPages||this.tempPaginationDisable,onClick:s=>this.paginationNext(s)},e("svg",{class:"sdds-table__footer-btn-svg",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},e("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z"}))))),this.enableClientPagination&&!this.enablePagination&&e("div",{class:"sdds-table__pagination"},e("div",{class:"sdds-table__row-selector"}),e("div",{class:"sdds-table__page-selector"},e("input",{class:"sdds-table__page-selector-input",type:"number",min:"1",max:this.clientMaxPages,value:this.clientPaginationValue,pattern:"[0-9]+",dir:"rtl",onChange:s=>this.clientPaginationInputChange(s),onFocusout:s=>this.clientPaginationInputChange(s),onAnimationEnd:i}),e("p",{class:"sdds-table__footer-text"},"of ",e("span",null,this.clientMaxPages)," pages"),e("button",{class:"sdds-table__footer-btn",disabled:this.clientPaginationValue<=1,onClick:s=>this.clientPaginationPrev(s)},e("svg",{class:"sdds-table__footer-btn-svg",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},e("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z"}))),e("button",{class:"sdds-table__footer-btn",disabled:this.clientPaginationValue>=this.clientMaxPages,onClick:s=>this.clientPaginationNext(s)},e("svg",{class:"sdds-table__footer-btn-svg",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},e("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z"}))))))))}get host(){return d(this)}};n.style=o;export{n as sdds_table_footer};
-//# sourceMappingURL=p-537446ed.entry.js.map