@scania/tegel 0.0.1-beta.9 → 0.0.4

package/dist/tegel/p-5e50ce81.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tableFooterCss","relevantTableProps","removeShakeAnimation","e","target","classList","remove","TableFooter","this","paginationPrev","event","preventDefault","paginationValue","runPagination","paginationNext","numberOfPages","disablePaginationFunction","dataRowsPagination","host","parentNode","querySelector","querySelectorAll","forEach","item","i","index","tempPaginationDisable","lastResult","rowsPerPage","firstResult","add","clientPaginationPrev","clientPaginationValue","sendPaginationValue","clientPaginationNext","clientMaxPages","tablePropsChangedEventListener","tableId","detail","changed","filter","changedProp","includes","Error","connectedCallback","tableEl","closest","componentWillLoad","tablePropName","numberOfRows","parentElement","childElementCount","numberOfColumns","Math","ceil","clientSetColumnsNumber","columnsNumber","enablePaginationEvent","emit","paginationInputChange","insertedValue","value","max","runPaginationEventListener","currentPageValueEvent","clientPaginationInputChange","render","h","Host","class","compactDesign","colSpan","enablePagination","enableClientPagination","type","min","pattern","dir","onChange","onFocusout","onAnimationEnd","disabled","onClick","fill","xmlns","viewBox","d"],"sources":["./src/components/data-table/table-footer/table-footer.scss?tag=sdds-table-footer&encapsulation=shadow","./src/components/data-table/table-footer/table-footer.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-footer-group;\n  height: 48px;\n\n  .sdds-table__footer-row {\n    background-color: var(--sdds-data-table-footer-background);\n    color: var(--sdds-data-table-color);\n  }\n\n  .sdds-table__footer-cell {\n    padding: 0 16px;\n\n    .sdds-table__pagination {\n      height: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      .sdds-table__row-selector,\n      .sdds-table__page-selector {\n        display: flex;\n        align-items: center;\n      }\n\n      .sdds-table__page-selector-input {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        background-color: var(--sdds-data-table-footer-page-selector-input-background);\n        color: var(--sdds-data-table-color);\n        width: 36px;\n        height: 30px;\n        border: none;\n        border-radius: 4px;\n        transition: background-color 250ms ease;\n        margin-right: 4px;\n        padding-right: 8px;\n\n        &:hover {\n          background-color: var(--sdds-data-table-footer-page-selector-input-background-hover);\n        }\n\n        &:disabled {\n          color: var(--sdds-data-table-footer-page-selector-input-color-disabled);\n        }\n      }\n\n      .sdds-table__page-selector-input--shake {\n        animation: sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      }\n\n      .sdds-table__footer-text {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding: 1px 8px 0 0;\n      }\n\n      .sdds-table__footer-btn {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border: none;\n        background-color: transparent;\n        cursor: pointer;\n        height: 32px;\n        width: 32px;\n        border-radius: 4px;\n        transition: background-color 250ms ease;\n\n        &:hover {\n          background-color: var(--sdds-data-table-footer-btn-hover);\n        }\n\n        &:disabled {\n          cursor: default;\n          opacity: 0.38;\n\n          &:hover {\n            background-color: transparent;\n          }\n        }\n      }\n\n      .sdds-table__footer-btn-svg {\n        height: 20px;\n        width: 20px;\n        fill: var(--sdds-data-table-color)\n      }\n    }\n  }\n}\n\n:host(.sdds-table--compact) {\n  height: 32px;\n\n  .sdds-table__footer-cell {\n    .sdds-table__pagination {\n      height: 32px;\n\n      .sdds-table__page-selector-input {\n        height: 24px;\n      }\n\n      .sdds-table__footer-btn {\n        height: 28px;\n        width: 28px;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Listen,\n  State,\n  Event,\n  EventEmitter,\n  Prop,\n  Element,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\nfunction removeShakeAnimation(e: AnimationEvent & { target: HTMLElement }) {\n  e.target.classList.remove('sdds-table__page-selector-input--shake');\n}\n\n@Component({\n  tag: 'sdds-table-footer',\n  styleUrl: 'table-footer.scss',\n  shadow: true,\n})\nexport class TableFooter {\n  /** Enable pagination and show pagination controls  */\n  @Prop({ reflect: true }) enablePagination: boolean = false;\n\n  /** Sets how many rows to display when pagination is enabled */\n  @Prop({ reflect: true }) rowsPerPage: number = 5;\n\n  /** Prop to enable client controlled pagination  */\n  @Prop({ reflect: true }) enableClientPagination: boolean = false;\n\n  /** Prop for client to set current page number */\n  @Prop({ reflect: true }) clientPaginationValue: number = 1;\n\n  /** Prop for client to set max number of pages */\n  @Prop({ reflect: true }) clientMaxPages: number = 1;\n\n  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n  @Prop() clientSetColumnsNumber: number = null;\n\n  /** Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component */\n  @Prop() disablePaginationFunction: boolean = false;\n\n  /** State that memorize number of columns to display colSpan correctly - set from parent level */\n  @State() columnsNumber: number = 0;\n\n  /** Total number of pages, number of the rows divided with number of rows per page */\n  @State() numberOfPages: number = 0;\n\n  /** Initial value for pagination in input element */\n  @State() paginationValue: number = 1;\n\n  /** Temporarily disable pagination - due to search - set from parent level */\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Event that footer sends out in order to receive other necessary information from other subcomponents */\n  @Event({\n    eventName: 'enablePaginationEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  enablePaginationEvent: EventEmitter<any>;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n\n    const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;\n\n    const numberOfColumns =\n      this.host.parentElement.querySelector('sdds-table-header').childElementCount;\n\n    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);\n\n    if (this.clientSetColumnsNumber !== null) {\n      this.columnsNumber = this.clientSetColumnsNumber;\n    } else {\n      this.columnsNumber = numberOfColumns;\n    }\n\n    this.enablePaginationEvent.emit(this.tableId);\n  }\n\n  paginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.paginationValue >= 2) {\n      this.paginationValue--;\n      this.runPagination();\n    }\n  };\n\n  paginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.paginationValue <= this.numberOfPages) {\n      this.paginationValue++;\n      this.runPagination();\n    }\n  };\n\n  paginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.numberOfPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.paginationValue = event.target.max;\n    } else {\n      this.paginationValue = event.target.value;\n    }\n    this.runPagination();\n  }\n\n  @Listen('runPaginationEvent', { target: 'body' })\n  runPaginationEventListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail) {\n      this.runPagination();\n    }\n  }\n\n  runPagination = () => {\n    if (!this.disablePaginationFunction) {\n      // grab all rows in body\n      const dataRowsPagination = this.host.parentNode\n        .querySelector('sdds-table-body')\n        .querySelectorAll('.sdds-table__row');\n\n      dataRowsPagination.forEach((item, i) => {\n        // for making logic easier 1st result, 2nd result...\n        const index = i + 1;\n\n        if (this.tempPaginationDisable) {\n          this.paginationValue = 1;\n        } else {\n          const lastResult = this.rowsPerPage * this.paginationValue;\n          const firstResult = lastResult - this.rowsPerPage;\n\n          if (index > firstResult && index <= lastResult) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        }\n      });\n    }\n  };\n\n  /* Client based functions below */\n\n  /** Event to send current page value back to sdds-table-body component */\n  @Event({\n    eventName: 'currentPageValueEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  currentPageValueEvent: EventEmitter<any>;\n\n  sendPaginationValue(value) {\n    this.currentPageValueEvent.emit([this.tableId, value]);\n  }\n\n  clientPaginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.clientPaginationValue >= 2) {\n      this.clientPaginationValue--;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.clientPaginationValue <= this.clientMaxPages) {\n      this.clientPaginationValue++;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.clientMaxPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.clientPaginationValue = event.target.max;\n    } else {\n      this.clientPaginationValue = event.target.value;\n    }\n    this.sendPaginationValue(this.clientPaginationValue);\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <tr class=\"sdds-table__footer-row\">\n          <td class=\"sdds-table__footer-cell\" colSpan={this.columnsNumber}>\n            {this.enablePagination && !this.enableClientPagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.numberOfPages}\n                    value={this.paginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.paginationInputChange(event)}\n                    onFocusout={(event) => this.paginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                    disabled={this.tempPaginationDisable}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.tempPaginationDisable ? 1 : this.numberOfPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.paginationValue <= 1 || this.tempPaginationDisable}\n                    onClick={(event) => this.paginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"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\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={\n                      this.paginationValue >= this.numberOfPages || this.tempPaginationDisable\n                    }\n                    onClick={(event) => this.paginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"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\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n            {this.enableClientPagination && !this.enablePagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.clientMaxPages}\n                    value={this.clientPaginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.clientPaginationInputChange(event)}\n                    onFocusout={(event) => this.clientPaginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.clientMaxPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue <= 1}\n                    onClick={(event) => this.clientPaginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"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\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue >= this.clientMaxPages}\n                    onClick={(event) => this.clientPaginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"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\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAiB,21FCavB,MAAMC,EAAwD,CAC5D,gBACA,aACA,oBAGF,SAASC,EAAqBC,GAC5BA,EAAEC,OAAOC,UAAUC,OAAO,yCAC5B,C,MAOaC,EAAW,M,mJAiGtBC,KAAAC,eAAkBC,IAChBA,EAAMC,iBAEN,GAAIH,KAAKI,iBAAmB,EAAG,CAC7BJ,KAAKI,kBACLJ,KAAKK,e,GAITL,KAAAM,eAAkBJ,IAChBA,EAAMC,iBAEN,GAAIH,KAAKI,iBAAmBJ,KAAKO,cAAe,CAC9CP,KAAKI,kBACLJ,KAAKK,e,GAuBTL,KAAAK,cAAgB,KACd,IAAKL,KAAKQ,0BAA2B,CAEnC,MAAMC,EAAqBT,KAAKU,KAAKC,WAClCC,cAAc,mBACdC,iBAAiB,oBAEpBJ,EAAmBK,SAAQ,CAACC,EAAMC,KAEhC,MAAMC,EAAQD,EAAI,EAElB,GAAIhB,KAAKkB,sBAAuB,CAC9BlB,KAAKI,gBAAkB,C,KAClB,CACL,MAAMe,EAAanB,KAAKoB,YAAcpB,KAAKI,gBAC3C,MAAMiB,EAAcF,EAAanB,KAAKoB,YAEtC,GAAIH,EAAQI,GAAeJ,GAASE,EAAY,CAC9CJ,EAAKlB,UAAUC,OAAO,0B,KACjB,CACLiB,EAAKlB,UAAUyB,IAAI,0B,QAsB7BtB,KAAAuB,qBAAwBrB,IACtBA,EAAMC,iBAEN,GAAIH,KAAKwB,uBAAyB,EAAG,CACnCxB,KAAKwB,wBACLxB,KAAKyB,oBAAoBzB,KAAKwB,sB,GAIlCxB,KAAA0B,qBAAwBxB,IACtBA,EAAMC,iBAEN,GAAIH,KAAKwB,uBAAyBxB,KAAK2B,eAAgB,CACrD3B,KAAKwB,wBACLxB,KAAKyB,oBAAoBzB,KAAKwB,sB,yBA5LmB,M,iBAGN,E,4BAGY,M,2BAGF,E,oBAGP,E,4BAGT,K,+BAGI,M,mBAGZ,E,mBAGA,E,qBAGE,E,2BAGO,M,sBAEL,M,mBAEH,M,gBAEH,M,qBAEK,M,aAET,E,CAgB3BI,+BAA+B1B,GAC7B,GAAIF,KAAK6B,UAAY3B,EAAM4B,OAAOD,QAAS,CACzC3B,EAAM4B,OAAOC,QACVC,QAAQC,GAAgBxC,EAAmByC,SAASD,KACpDnB,SAASmB,IACR,UAAWjC,KAAKiC,KAAiB,YAAa,CAC5C,MAAM,IAAIE,MAAM,gCAAgCF,I,CAElDjC,KAAKiC,GAAe/B,EAAM4B,OAAOG,EAAY,G,EAKrDG,oBACEpC,KAAKqC,QAAUrC,KAAKU,KAAK4B,QAAQ,cACjCtC,KAAK6B,QAAU7B,KAAKqC,QAAQR,O,CAG9BU,oBACE9C,EAAmBqB,SAAS0B,IAC1BxC,KAAKwC,GAAiBxC,KAAKqC,QAAQG,EAAc,IAGnD,MAAMC,EAAezC,KAAKU,KAAKgC,cAAc9B,cAAc,mBAAmB+B,kBAE9E,MAAMC,EACJ5C,KAAKU,KAAKgC,cAAc9B,cAAc,qBAAqB+B,kBAE7D3C,KAAKO,cAAgBsC,KAAKC,KAAKL,EAAezC,KAAKoB,aAEnD,GAAIpB,KAAK+C,yBAA2B,KAAM,CACxC/C,KAAKgD,cAAgBhD,KAAK+C,sB,KACrB,CACL/C,KAAKgD,cAAgBJ,C,CAGvB5C,KAAKiD,sBAAsBC,KAAKlD,KAAK6B,Q,CAqBvCsB,sBAAsBjD,GACpB,MAAMkD,EAAgBlD,EAAMN,OAAOyD,MAEnC,GAAID,EAAgBpD,KAAKO,eAAiB6C,EAAgB,EAAG,CAC3DlD,EAAMN,OAAOC,UAAUyB,IAAI,0CAC3BtB,KAAKI,gBAAkBF,EAAMN,OAAO0D,G,KAC/B,CACLtD,KAAKI,gBAAkBF,EAAMN,OAAOyD,K,CAEtCrD,KAAKK,e,CAIPkD,2BAA2BrD,GACzB,GAAIF,KAAK6B,UAAY3B,EAAM4B,OAAQ,CACjC9B,KAAKK,e,EA0CToB,oBAAoB4B,GAClBrD,KAAKwD,sBAAsBN,KAAK,CAAClD,KAAK6B,QAASwB,G,CAqBjDI,4BAA4BvD,GAC1B,MAAMkD,EAAgBlD,EAAMN,OAAOyD,MAEnC,GAAID,EAAgBpD,KAAK2B,gBAAkByB,EAAgB,EAAG,CAC5DlD,EAAMN,OAAOC,UAAUyB,IAAI,0CAC3BtB,KAAKwB,sBAAwBtB,EAAMN,OAAO0D,G,KACrC,CACLtD,KAAKwB,sBAAwBtB,EAAMN,OAAOyD,K,CAE5CrD,KAAKyB,oBAAoBzB,KAAKwB,sB,CAGhCkC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO7D,KAAK8D,cAAgB,sBAAwB,IACxDH,EAAA,MAAIE,MAAM,0BACRF,EAAA,MAAIE,MAAM,0BAA0BE,QAAS/D,KAAKgD,eAC/ChD,KAAKgE,mBAAqBhE,KAAKiE,wBAC9BN,EAAA,OAAKE,MAAM,0BACTF,EAAA,OAAKE,MAAM,6BACXF,EAAA,OAAKE,MAAM,6BACTF,EAAA,SACEE,MAAM,kCACNK,KAAK,SACLC,IAAI,IACJb,IAAKtD,KAAKO,cACV8C,MAAOrD,KAAKI,gBACZgE,QAAQ,SACRC,IAAI,MACJC,SAAWpE,GAAUF,KAAKmD,sBAAsBjD,GAChDqE,WAAarE,GAAUF,KAAKmD,sBAAsBjD,GAClDsE,eAAgB9E,EAChB+E,SAAUzE,KAAKkB,wBAEjByC,EAAA,KAAGE,MAAM,2BAAyB,MAC7BF,EAAA,YAAO3D,KAAKkB,sBAAwB,EAAIlB,KAAKO,eAAqB,UAEvEoD,EAAA,UACEE,MAAM,yBACNY,SAAUzE,KAAKI,iBAAmB,GAAKJ,KAAKkB,sBAC5CwD,QAAUxE,GAAUF,KAAKC,eAAeC,IAExCyD,EAAA,OACEE,MAAM,6BACNc,KAAK,eACLC,MAAM,6BACNC,QAAQ,aAERlB,EAAA,oBACY,UAAS,YACT,UACVmB,EAAE,yKAIRnB,EAAA,UACEE,MAAM,yBACNY,SACEzE,KAAKI,iBAAmBJ,KAAKO,eAAiBP,KAAKkB,sBAErDwD,QAAUxE,GAAUF,KAAKM,eAAeJ,IAExCyD,EAAA,OACEE,MAAM,6BACNc,KAAK,eACLC,MAAM,6BACNC,QAAQ,aAERlB,EAAA,oBACY,UAAS,YACT,UACVmB,EAAE,0KAOb9E,KAAKiE,yBAA2BjE,KAAKgE,kBACpCL,EAAA,OAAKE,MAAM,0BACTF,EAAA,OAAKE,MAAM,6BACXF,EAAA,OAAKE,MAAM,6BACTF,EAAA,SACEE,MAAM,kCACNK,KAAK,SACLC,IAAI,IACJb,IAAKtD,KAAK2B,eACV0B,MAAOrD,KAAKwB,sBACZ4C,QAAQ,SACRC,IAAI,MACJC,SAAWpE,GAAUF,KAAKyD,4BAA4BvD,GACtDqE,WAAarE,GAAUF,KAAKyD,4BAA4BvD,GACxDsE,eAAgB9E,IAElBiE,EAAA,KAAGE,MAAM,2BAAyB,MAC7BF,EAAA,YAAO3D,KAAK2B,gBAAsB,UAEvCgC,EAAA,UACEE,MAAM,yBACNY,SAAUzE,KAAKwB,uBAAyB,EACxCkD,QAAUxE,GAAUF,KAAKuB,qBAAqBrB,IAE9CyD,EAAA,OACEE,MAAM,6BACNc,KAAK,eACLC,MAAM,6BACNC,QAAQ,aAERlB,EAAA,oBACY,UAAS,YACT,UACVmB,EAAE,yKAIRnB,EAAA,UACEE,MAAM,yBACNY,SAAUzE,KAAKwB,uBAAyBxB,KAAK2B,eAC7C+C,QAAUxE,GAAUF,KAAK0B,qBAAqBxB,IAE9CyD,EAAA,OACEE,MAAM,6BACNc,KAAK,eACLC,MAAM,6BACNC,QAAQ,aAERlB,EAAA,oBACY,UAAS,YACT,UACVmB,EAAE,4K"}

package/dist/tegel/p-62ed6fdc.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as n,h as e,H as i,g as d}from"./p-0b4eba86.js";const r=":root,.sdds-mode-light{--sdds-link:var(--sdds-blue-500);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-grey-900);--sdds-link-disabled:var(--sdds-grey-400)}.sdds-mode-dark{--sdds-link:var(--sdds-blue-300);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-blue-400);--sdds-link-disabled:var(--sdds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--sdds-banner-background-error)}:host(.information){background-color:var(--sdds-banner-background-info)}:host{display:flex;background-color:var(--sdds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--sdds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--sdds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--sdds-banner-prefix-info-color)}:host .banner-content{color:var(--sdds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .banner-content.no-icon{padding-left:16px}:host .banner-content .banner-header{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls)}:host .banner-content .banner-subheader{margin-top:4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .banner-content sdds-link{width:fit-content;margin-top:16px}:host .banner-close{color:var(--sdds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus{outline:none}:host .banner-close button:focus sdds-icon{outline:2px solid var(--sdds-link-focus)}";const t=class{constructor(e){s(this,e);this.sddsClose=n(this,"sddsClose",7);this.handleClose=()=>{const s=this.sddsClose.emit({bannerId:this.bannerId,hidden:this.hidden});if(!s.defaultPrevented){this.hidden=true}};this.icon=undefined;this.header=undefined;this.subheader=undefined;this.linkText=undefined;this.href=undefined;this.linkTarget="_self";this.linkRel="noopener";this.type="none";this.bannerId=crypto.randomUUID();this.persistent=false;this.hidden=false}async hideBanner(){const s=this.sddsClose.emit({bannerId:this.bannerId,hidden:this.hidden});if(!s.defaultPrevented){this.hidden=true}return{bannerId:this.bannerId,hidden:true}}async showBanner(){const s=this.sddsClose.emit({bannerId:this.bannerId,hidden:this.hidden});if(!s.defaultPrevented){this.hidden=false}return{bannerId:this.bannerId,hidden:false}}connectedCallback(){if(this.type==="error"){this.icon="error"}else if(this.type==="information"){this.icon="info"}}render(){return e(i,{role:"banner","aria-hidden":`${this.hidden}`,"aria-live":this.host.getAttribute("aria-live")?this.host.getAttribute("aria-live"):"polite","aria-atomic":this.host.getAttribute("aria-atomic"),class:`${this.type} ${this.hidden?"hide":"show"}`},this.icon&&e("div",{class:`banner-icon ${this.type}`},e("sdds-icon",{name:this.icon,size:"20px"})),e("div",{class:`banner-content ${this.type} ${!this.icon?"no-icon":""}`},this.header&&e("span",{class:`banner-header`},this.header),this.subheader&&e("span",{class:`banner-subheader`},this.subheader),this.linkText&&this.href&&e("sdds-link",{"link-href":this.href,rel:this.linkRel,"link-target":this.linkTarget},this.linkText)),!this.persistent&&e("div",{class:`banner-close`},e("button",{onClick:()=>{this.handleClose()}},e("sdds-icon",{name:"cross",size:"20px"}))))}get host(){return d(this)}};t.style=r;export{t as sdds_banner};
+//# sourceMappingURL=p-62ed6fdc.entry.js.map

package/dist/tegel/p-62ed6fdc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsBannerCss","SddsBanner","this","handleClose","sddsCloseEvent","sddsClose","emit","bannerId","hidden","defaultPrevented","crypto","randomUUID","async","connectedCallback","type","icon","render","h","Host","role","host","getAttribute","class","name","size","header","subheader","linkText","href","rel","linkRel","linkTarget","persistent","onClick"],"sources":["./src/components/banner/sdds-banner.scss?tag=sdds-banner&encapsulation=shadow","./src/components/banner/sdds-banner.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import '../../mixins/box-sizing';\n@import '../link/link-vars.scss';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host(.error) {\n  background-color: var(--sdds-banner-background-error);\n}\n\n:host(.information) {\n  background-color: var(--sdds-banner-background-info);\n}\n\n:host {\n  display: flex;\n  background-color: var(--sdds-banner-background-default);\n  z-index: z(banner);\n\n  .banner-icon {\n    padding-left: 20px;\n    padding-top: 14px;\n    padding-right: 12px;\n    color: var(--sdds-banner-prefix-default-color);\n\n    &.error {\n      color: var(--sdds-banner-prefix-error-color);\n    }\n\n    &.information {\n      color: var(--sdds-banner-prefix-info-color);\n    }\n  }\n\n  .banner-content {\n    color: var(--sdds-banner-text-color);\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding: 16px 0;\n\n    &.no-icon {\n      padding-left: 16px;\n    }\n\n    .banner-header {\n      font: var(--sdds-headline-06);\n      letter-spacing: var(--sdds-headline-06-ls);\n    }\n\n    .banner-subheader {\n      margin-top: 4px;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n    }\n\n    sdds-link {\n      width: fit-content;\n      margin-top: 16px;\n    }\n  }\n\n  .banner-close {\n    color: var(--sdds-banner-x-color);\n\n    button {\n      padding-right: 16px;\n      padding-top: 14px;\n      background-color: transparent;\n      border: none;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        outline: none;\n\n        sdds-icon {\n          outline: 2px solid var(--sdds-link-focus);\n        }\n      }\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-banner',\n  styleUrl: 'sdds-banner.scss',\n  shadow: true,\n})\nexport class SddsBanner {\n  /** Name of the icon for the component. For error and information type the icon is predefined. */\n  @Prop() icon: string;\n\n  /** Header text. */\n  @Prop() header: string;\n\n  /** Subheader text. */\n  @Prop() subheader: string;\n\n  /** Link text. */\n  @Prop() linkText: string;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() linkTarget: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() linkRel: string = 'noopener';\n\n  /** Type of banner */\n  @Prop() type: 'error' | 'information' | 'none' = 'none';\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n   */\n  @Prop() bannerId: string = crypto.randomUUID();\n\n  /** Removes the close button on the banner. */\n  @Prop() persistent: boolean = false;\n\n  /** Hides the banner */\n  @Prop() hidden = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    bannerId: string;\n    hidden: boolean;\n  }>;\n\n  /** Hides the banner. */\n  @Method()\n  async hideBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: true,\n    };\n  }\n\n  /** Shows the banner */\n  @Method()\n  async showBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: false,\n    };\n  }\n\n  connectedCallback() {\n    if (this.type === 'error') {\n      this.icon = 'error';\n    } else if (this.type === 'information') {\n      this.icon = 'info';\n    }\n  }\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"banner\"\n        aria-hidden={`${this.hidden}`}\n        aria-live={\n          this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n        }\n        aria-atomic={this.host.getAttribute('aria-atomic')}\n        class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n      >\n        {this.icon && (\n          <div class={`banner-icon ${this.type}`}>\n            <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n          </div>\n        )}\n        <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n          {this.header && <span class={`banner-header`}>{this.header}</span>}\n          {this.subheader && <span class={`banner-subheader`}>{this.subheader}</span>}\n          {this.linkText && this.href && (\n            <sdds-link link-href={this.href} rel={this.linkRel} link-target={this.linkTarget}>\n              {this.linkText}\n            </sdds-link>\n          )}\n        </div>\n        {!this.persistent && (\n          <div class={`banner-close`}>\n            <button\n              onClick={() => {\n                this.handleClose();\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,guD,MCQTC,EAAU,M,8DA2FrBC,KAAAC,YAAc,KACZ,MAAMC,EAAiBF,KAAKG,UAAUC,KAAK,CACzCC,SAAUL,KAAKK,SACfC,OAAQN,KAAKM,SAEf,IAAKJ,EAAeK,iBAAkB,CACpCP,KAAKM,OAAS,I,kIAhF4C,Q,aAGpC,W,UAGuB,O,cAMtBE,OAAOC,a,gBAGJ,M,YAGb,K,CAkBjBC,mBACE,MAAMR,EAAiBF,KAAKG,UAAUC,KAAK,CACzCC,SAAUL,KAAKK,SACfC,OAAQN,KAAKM,SAEf,IAAKJ,EAAeK,iBAAkB,CACpCP,KAAKM,OAAS,I,CAEhB,MAAO,CACLD,SAAUL,KAAKK,SACfC,OAAQ,K,CAMZI,mBACE,MAAMR,EAAiBF,KAAKG,UAAUC,KAAK,CACzCC,SAAUL,KAAKK,SACfC,OAAQN,KAAKM,SAEf,IAAKJ,EAAeK,iBAAkB,CACpCP,KAAKM,OAAS,K,CAEhB,MAAO,CACLD,SAAUL,KAAKK,SACfC,OAAQ,M,CAIZK,oBACE,GAAIX,KAAKY,OAAS,QAAS,CACzBZ,KAAKa,KAAO,O,MACP,GAAIb,KAAKY,OAAS,cAAe,CACtCZ,KAAKa,KAAO,M,EAchBC,SACE,OACEC,EAACC,EAAI,CACHC,KAAK,SAAQ,cACA,GAAGjB,KAAKM,SAAQ,YAE3BN,KAAKkB,KAAKC,aAAa,aAAenB,KAAKkB,KAAKC,aAAa,aAAe,SAAQ,cAEzEnB,KAAKkB,KAAKC,aAAa,eACpCC,MAAO,GAAGpB,KAAKY,QAAQZ,KAAKM,OAAS,OAAS,UAE7CN,KAAKa,MACJE,EAAA,OAAKK,MAAO,eAAepB,KAAKY,QAC9BG,EAAA,aAAWM,KAAMrB,KAAKa,KAAMS,KAAK,UAGrCP,EAAA,OAAKK,MAAO,kBAAkBpB,KAAKY,SAASZ,KAAKa,KAAO,UAAY,MACjEb,KAAKuB,QAAUR,EAAA,QAAMK,MAAO,iBAAkBpB,KAAKuB,QACnDvB,KAAKwB,WAAaT,EAAA,QAAMK,MAAO,oBAAqBpB,KAAKwB,WACzDxB,KAAKyB,UAAYzB,KAAK0B,MACrBX,EAAA,yBAAsBf,KAAK0B,KAAMC,IAAK3B,KAAK4B,QAAO,cAAe5B,KAAK6B,YACnE7B,KAAKyB,YAIVzB,KAAK8B,YACLf,EAAA,OAAKK,MAAO,gBACVL,EAAA,UACEgB,QAAS,KACP/B,KAAKC,aAAa,GAGpBc,EAAA,aAAWM,KAAK,QAAQC,KAAK,W"}

package/dist/tegel/p-675d10c6.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as e,h as d,g as o}from"./p-0b4eba86.js";const t='.sdds-toggle-webcomponent.sc-sdds-toggle .toggle-headline.sc-sdds-toggle{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-toggle-headline);margin-bottom:12px}.sdds-toggle-webcomponent.sc-sdds-toggle .toggle-headline.disabled.sc-sdds-toggle{color:var(--sdds-toggle-headline-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle{margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::after,.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::before{content:"";position:absolute;box-sizing:border-box;transition:all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--sdds-toggle-off-slider);left:0}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle::after{width:16px;height:16px;background-color:var(--sdds-toggle-switch);border-radius:50%;left:4px;top:4px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:focus{outline:none}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:focus::before{background-color:var(--sdds-toggle-off-slider-focus);border:1px solid var(--sdds-toggle-off-border-focus)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:checked::before{background-color:var(--sdds-toggle-on-slider);border:1px solid var(--sdds-toggle-on-border-focus)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:checked::after{left:24px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled::before{background-color:var(--sdds-toggle-slider-disabled);border:1px solid var(--sdds-toggle-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled:checked::before{background-color:var(--sdds-toggle-on-slider-disabled);border:1px solid var(--sdds-toggle-on-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sc-sdds-toggle:disabled:checked::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle{width:28px;height:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle::before{width:28px;height:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle::after{width:8px;height:8px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:checked::before{background-color:var(--sdds-toggle-on-slider)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:checked::after{left:16px}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:disabled::before{background-color:var(--sdds-toggle-slider-disabled);border:1px solid var(--sdds-toggle-slider-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle input[type=checkbox].sm.sc-sdds-toggle:disabled::after{background-color:var(--sdds-toggle-switch-disabled)}.sdds-toggle-webcomponent.sc-sdds-toggle label.sc-sdds-toggle{display:inline-block;vertical-align:middle;font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);color:var(--sdds-toggle-label-color);padding-left:8px}.sdds-toggle-webcomponent.sc-sdds-toggle label.disabled.sc-sdds-toggle{color:var(--sdds-toggle-label-color-disabled)}';const g=class{constructor(d){s(this,d);this.sddsToggle=e(this,"sddsToggle",6);this.handleToggle=()=>{this.checked=!this.checked;this.sddsToggle.emit({toggleId:this.toggleId,checked:this.checked})};this.checked=false;this.required=false;this.size="lg";this.name=undefined;this.headline=undefined;this.disabled=false;this.toggleId=crypto.randomUUID()}async toggle(){this.checked=!this.checked;return{toggleId:this.toggleId,checked:this.checked}}render(){return d("div",{class:"sdds-toggle-webcomponent"},this.headline&&d("div",{class:`toggle-headline ${this.disabled?"disabled":""}`},this.headline),d("input",{"aria-describedby":this.host.getAttribute("aria-describedby"),"aria-labelledby":this.host.getAttribute("aria-labelledby"),"aria-checked":this.checked,"aria-required":this.required,onChange:()=>this.handleToggle(),class:`${this.size}`,checked:this.checked,disabled:this.disabled,required:this.required,type:"checkbox",name:this.name,id:this.toggleId,role:"switch"}),d("label",{class:`${this.disabled?"disabled":""}`,htmlFor:this.toggleId},d("slot",null)))}get host(){return o(this)}};g.style=t;export{g as sdds_toggle};
+//# sourceMappingURL=p-675d10c6.entry.js.map

package/dist/tegel/p-675d10c6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsToggleCss","SddsToggle","this","handleToggle","checked","sddsToggle","emit","toggleId","crypto","randomUUID","async","render","h","class","headline","disabled","host","getAttribute","required","onChange","size","type","name","id","role","htmlFor"],"sources":["./src/components/toggle/sdds-toggle.scss?tag=sdds-toggle&encapsulation=scoped","./src/components/toggle/sdds-toggle.tsx"],"sourcesContent":[".sdds-toggle-webcomponent {\n  .toggle-headline {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-toggle-headline);\n    margin-bottom: 12px;\n\n    &.disabled {\n      color: var(--sdds-toggle-headline-disabled);\n    }\n  }\n\n  input[type='checkbox'] {\n    margin: 0;\n    width: 44px;\n    height: 24px;\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n\n    &::after,\n    &::before {\n      content: '';\n      position: absolute;\n      box-sizing: border-box;\n      transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);\n    }\n\n    &::before {\n      /* Slider */\n      width: 44px;\n      height: 24px;\n      border-radius: 16px;\n      background-color: var(--sdds-toggle-off-slider);\n      left: 0;\n    }\n\n    /* Switch */\n    &::after {\n      width: 16px;\n      height: 16px;\n      background-color: var(--sdds-toggle-switch);\n      border-radius: 50%;\n      left: 4px;\n      top: 4px;\n    }\n\n    &:focus {\n      outline: none;\n\n      &::before {\n        background-color: var(--sdds-toggle-off-slider-focus);\n        border: 1px solid var(--sdds-toggle-off-border-focus);\n      }\n    }\n\n    &:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider);\n        border: 1px solid var(--sdds-toggle-on-border-focus);\n      }\n\n      &::after {\n        left: calc(44px - 20px);\n      }\n    }\n\n    &:disabled {\n      &::before {\n        background-color: var(--sdds-toggle-slider-disabled);\n        border: 1px solid var(--sdds-toggle-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &:disabled:checked {\n      &::before {\n        background-color: var(--sdds-toggle-on-slider-disabled);\n        border: 1px solid var(--sdds-toggle-on-slider-disabled);\n      }\n\n      &::after {\n        background-color: var(--sdds-toggle-switch-disabled);\n      }\n    }\n\n    &.sm {\n      width: 28px;\n      height: 16px;\n\n      &::before {\n        width: 28px;\n        height: 16px;\n      }\n\n      &::after {\n        width: 8px;\n        height: 8px;\n      }\n\n      &:checked {\n        &::before {\n          background-color: var(--sdds-toggle-on-slider);\n        }\n\n        &::after {\n          left: calc(44px - 28px); // slider width - switch width - padding\n        }\n      }\n\n      &:disabled {\n        &::before {\n          background-color: var(--sdds-toggle-slider-disabled);\n          border: 1px solid var(--sdds-toggle-slider-disabled);\n        }\n\n        &::after {\n          background-color: var(--sdds-toggle-switch-disabled);\n        }\n      }\n    }\n  }\n\n  label {\n    display: inline-block;\n    vertical-align: middle;\n    font: var(--sdds-detail-01);\n    letter-spacing: var(--sdds-detail-01-ls);\n    color: var(--sdds-toggle-label-color);\n    padding-left: 8px;\n\n    &.disabled {\n      color: var(--sdds-toggle-label-color-disabled);\n    }\n  }\n}\n","import { Component, h, Prop, Event, Element, EventEmitter, Method } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toggle',\n  styleUrl: 'sdds-toggle.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsToggle {\n  /** Sets the toggle as checked */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Make the toggle required */\n  @Prop() required: boolean = false;\n\n  /** Size of the toggle */\n  @Prop() size: 'sm' | 'lg' = 'lg';\n\n  /** Name of the toggles input element */\n  @Prop() name: string;\n\n  /** Headline for the toggle */\n  @Prop() headline: string;\n\n  /** Sets the toggle in a disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** ID of the toggles input element, if not specifed it's randomly generated */\n  @Prop() toggleId: string = crypto.randomUUID();\n\n  @Element() host: HostElement;\n\n  /** Toggles the toggle. */\n  @Method()\n  async toggle() {\n    this.checked = !this.checked;\n    return {\n      toggleId: this.toggleId,\n      checked: this.checked,\n    };\n  }\n\n  /** Sends unique toggle identifier and status when it is toggled. */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<{\n    toggleId: string;\n    checked: boolean;\n  }>;\n\n  handleToggle = () => {\n    this.checked = !this.checked;\n    this.sddsToggle.emit({\n      toggleId: this.toggleId,\n      checked: this.checked,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-toggle-webcomponent\">\n        {this.headline && (\n          <div class={`toggle-headline ${this.disabled ? 'disabled' : ''}`}>{this.headline}</div>\n        )}\n        <input\n          aria-describedby={this.host.getAttribute('aria-describedby')}\n          aria-labelledby={this.host.getAttribute('aria-labelledby')}\n          aria-checked={this.checked}\n          aria-required={this.required}\n          onChange={() => this.handleToggle()}\n          class={`${this.size}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          required={this.required}\n          type=\"checkbox\"\n          name={this.name}\n          id={this.toggleId}\n          role=\"switch\"\n        />\n        <label class={`${this.disabled ? 'disabled' : ''}`} htmlFor={this.toggleId}>\n          <slot></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,wmH,MCSTC,EAAU,M,gEA8CrBC,KAAAC,aAAe,KACbD,KAAKE,SAAWF,KAAKE,QACrBF,KAAKG,WAAWC,KAAK,CACnBC,SAAUL,KAAKK,SACfH,QAASF,KAAKE,SACd,E,aAjDwC,M,cAGhB,M,UAGA,K,0DASA,M,cAGDI,OAAOC,Y,CAMlCC,eACER,KAAKE,SAAWF,KAAKE,QACrB,MAAO,CACLG,SAAUL,KAAKK,SACfH,QAASF,KAAKE,Q,CAwBlBO,SACE,OACEC,EAAA,OAAKC,MAAM,4BACRX,KAAKY,UACJF,EAAA,OAAKC,MAAO,mBAAmBX,KAAKa,SAAW,WAAa,MAAOb,KAAKY,UAE1EF,EAAA,4BACoBV,KAAKc,KAAKC,aAAa,oBAAmB,kBAC3Cf,KAAKc,KAAKC,aAAa,mBAAkB,eAC5Cf,KAAKE,QAAO,gBACXF,KAAKgB,SACpBC,SAAU,IAAMjB,KAAKC,eACrBU,MAAO,GAAGX,KAAKkB,OACfhB,QAASF,KAAKE,QACdW,SAAUb,KAAKa,SACfG,SAAUhB,KAAKgB,SACfG,KAAK,WACLC,KAAMpB,KAAKoB,KACXC,GAAIrB,KAAKK,SACTiB,KAAK,WAEPZ,EAAA,SAAOC,MAAO,GAAGX,KAAKa,SAAW,WAAa,KAAMU,QAASvB,KAAKK,UAChEK,EAAA,c"}

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

@@ -0,0 +1,2 @@
+import{r as s,h as d}from"./p-0b4eba86.js";const r=":root,html{--sdds-spinner-background:var(--sdds-blue-400);--sdds-spinner-background-inverted:var(--sdds-white);--sdds-spinner-speed:1.8s;--sdds-spinner-speed-lg:2s;--sdds-spinner-radius-xs:8px;--sdds-spinner-radius-sm:12px;--sdds-spinner-radius-md:26px;--sdds-spinner-radius-lg:42px;--sdds-spinner-radius:var(--sdds-spinner-radius-lg);--sdds-spinner-stroke-width-xs:3px;--sdds-spinner-stroke-width-sm:4px;--sdds-spinner-stroke-width-md:6px;--sdds-spinner-stroke-width-lg:8px;--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-lg);--PI:3.14159265358979}:host{box-sizing:border-box;display:block}:host *{box-sizing:border-box}.sdds-spinner-svg{width:calc(var(--sdds-spinner-radius) * 2);height:calc(var(--sdds-spinner-radius) * 2);transform:scale(-1, 1) rotate(-90deg)}.sdds-spinner-svg-xs{--sdds-spinner-radius:var(--sdds-spinner-radius-xs);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-xs);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-sm{--sdds-spinner-radius:var(--sdds-spinner-radius-sm);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-sm);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-md{--sdds-spinner-radius:var(--sdds-spinner-radius-md);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-md);--sdds-spinner-animation-speed:var(--sdds-spinner-speed)}.sdds-spinner-svg-lg{--sdds-spinner-radius:var(--sdds-spinner-radius-lg);--sdds-spinner-stroke-width:var(--sdds-spinner-stroke-width-lg);--sdds-spinner-animation-speed:var(--sdds-spinner-speed-lg)}.sdds-spinner-circle{cx:var(--sdds-spinner-radius);cy:var(--sdds-spinner-radius);r:calc(var(--sdds-spinner-radius) - var(--sdds-spinner-stroke-width) / 2);stroke-width:var(--sdds-spinner-stroke-width);fill:none;--sdds-spinner-stroke-dash:calc((2 * var(--PI)) * var(--sdds-spinner-radius));stroke-dasharray:var(--sdds-spinner-stroke-dash);stroke-width:var(--sdds-spinner-stroke-width);animation:dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite}.sdds-spinner-circle-standard{stroke:var(--sdds-spinner-background)}.sdds-spinner-circle-inverted{stroke:var(--sdds-spinner-background-inverted)}@keyframes dash{from{stroke-dashoffset:calc(-1 * var(--sdds-spinner-stroke-dash))}to{stroke-dashoffset:var(--sdds-spinner-stroke-dash)}}";const n=class{constructor(d){s(this,d);this.size="lg";this.variant="standard"}render(){return d("div",{"aria-live":"assertive",role:"status","aria-label":"loading"},d("svg",{class:`sdds-spinner-svg sdds-spinner-svg-${this.size}`,"aria-hidden":"true"},d("circle",{class:`sdds-spinner-circle sdds-spinner-circle-${this.variant}`})))}};n.style=r;export{n as sdds_spinner};
+//# sourceMappingURL=p-68fca08c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["spinnerCss","Spinner","render","h","role","class","this","size","variant"],"sources":["./src/components/spinner/spinner.scss?tag=sdds-spinner","./src/components/spinner/spinner.tsx"],"sourcesContent":["@import './spinner-vars.scss';\n@import '../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: block;\n}\n\n.sdds-spinner-svg {\n  width: calc(var(--sdds-spinner-radius) * 2);\n  height: calc(var(--sdds-spinner-radius) * 2);\n  transform: scale(-1, 1) rotate(-90deg);\n\n  &-xs {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-xs);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-xs);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n  }\n\n  &-sm {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-sm);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-sm);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n  }\n\n  &-md {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-md);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-md);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed);\n  }\n\n  &-lg {\n    --sdds-spinner-radius: var(--sdds-spinner-radius-lg);\n    --sdds-spinner-stroke-width: var(--sdds-spinner-stroke-width-lg);\n    --sdds-spinner-animation-speed: var(--sdds-spinner-speed-lg);\n  }\n}\n\n.sdds-spinner-circle {\n  cx: var(--sdds-spinner-radius);\n  cy: var(--sdds-spinner-radius);\n  r: calc(var(--sdds-spinner-radius) - (var(--sdds-spinner-stroke-width) / 2));\n  stroke-width: var(--sdds-spinner-stroke-width);\n  fill: none;\n\n  //Calculation for lenght of dash\n  --sdds-spinner-stroke-dash: calc((2 * var(--PI)) * var(--sdds-spinner-radius));\n\n  stroke-dasharray: var(--sdds-spinner-stroke-dash);\n  stroke-width: var(--sdds-spinner-stroke-width);\n  animation: dash var(--sdds-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;\n\n  &-standard {\n    stroke: var(--sdds-spinner-background);\n  }\n\n  &-inverted {\n    stroke: var(--sdds-spinner-background-inverted);\n  }\n}\n\n@keyframes dash {\n  from {\n    stroke-dashoffset: calc(-1 * var(--sdds-spinner-stroke-dash));\n  }\n\n  to {\n    stroke-dashoffset: var(--sdds-spinner-stroke-dash);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: false,\n})\nexport class Spinner {\n  /** Size of spinner */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Variant of spinner */\n  @Prop() variant: 'standard' | 'inverted' = 'standard';\n\n  render() {\n    return (\n      <div aria-live=\"assertive\" role=\"status\" aria-label=\"loading\">\n        <svg class={`sdds-spinner-svg sdds-spinner-svg-${this.size}`} aria-hidden=\"true\">\n          <circle class={`sdds-spinner-circle sdds-spinner-circle-${this.variant}`} />\n        </svg>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAa,gxE,MCONC,EAAO,M,mCAEwB,K,aAGC,U,CAE3CC,SACE,OACEC,EAAA,mBAAe,YAAYC,KAAK,SAAQ,aAAY,WAClDD,EAAA,OAAKE,MAAO,qCAAqCC,KAAKC,OAAM,cAAc,QACxEJ,EAAA,UAAQE,MAAO,2CAA2CC,KAAKE,a"}

package/dist/tegel/p-6bdce8c1.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as d}from"./p-0b4eba86.js";const e=":host{--sdds-badges-background-color:var(--sdds-negative);--sdds-badges-color-text:var(--sdds-white);box-sizing:border-box;display:block}:host *{box-sizing:border-box}.sdds-badges{display:block;border-radius:12px;background-color:var(--sdds-badges-background-color);text-align:center}.sdds-badges.sdds-badges-sm{height:8px;width:8px;line-height:8px}.sdds-badges.sdds-badges-lg{height:20px;line-height:20px;width:20px}.sdds-badges.sdds-badges-pill{display:inline-block;width:unset;padding-left:8px;padding-right:8px}.sdds-badges.sdds-badges-hidden{display:none}.sdds-badges-text{font-family:var(--sdds-font-family-semi-condensed-bold);font-size:12px;color:var(--sdds-badges-color-text);font-weight:bold}";const t=class{constructor(d){s(this,d);this.value="";this.hidden=false;this.isSmall=false;this.size="lg";this.shape="";this.text=""}watchProps(){this.checkProps()}componentWillLoad(){this.checkProps();if(this.isSmall){this.size="sm";console.warn('Prop isSmall is deprecated. Use size"small" instead')}}checkProps(){const s=parseInt(this.value);if(!Number.isNaN(s)&&this.size!=="sm"){this.shape=this.value.toString().length>=2?"pill":"";this.size="lg";this.text=s.toString().length>=3?"99+":s.toString()}else{this.value!==""&&this.size!=="sm"?console.warn("The provided value is either empty or string, please provide value as number."):""}}render(){return d("host",{class:`sdds-badges sdds-badges-${this.size} ${this.shape==="pill"?"sdds-badges-pill":""} ${this.hidden?"sdds-badges-hidden":""}`},d("div",{class:"sdds-badges-text"},this.text))}static get watchers(){return{value:["watchProps"],isSmall:["watchProps"],size:["watchProps"]}}};t.style=e;export{t as sdds_badges};
+//# sourceMappingURL=p-6bdce8c1.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["badgesCss","SddsBadges","watchProps","this","checkProps","componentWillLoad","isSmall","size","console","warn","valueAsNumber","parseInt","value","Number","isNaN","shape","toString","length","text","render","h","class","hidden"],"sources":["./src/components/badge/badges.scss?tag=sdds-badges&encapsulation=shadow","./src/components/badge/badges.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n// This component does not have dark version so all css is in this file\n\n:host {\n  // Variables\n  --sdds-badges-background-color: var(--sdds-negative);\n  --sdds-badges-color-text: var(--sdds-white);\n\n  // Styling\n  @include sdds-box-sizing;\n\n  display: block;\n}\n\n.sdds-badges {\n  display: block;\n  border-radius: 12px;\n  background-color: var(--sdds-badges-background-color);\n  text-align: center;\n\n  &.sdds-badges-sm {\n    height: 8px;\n    width: 8px;\n    line-height: 8px;\n  }\n\n  &.sdds-badges-lg {\n    height: 20px;\n    line-height: 20px;\n    width: 20px;\n  }\n\n  &.sdds-badges-pill {\n    display: inline-block;\n    width: unset;\n    padding-left: 8px;\n    padding-right: 8px;\n  }\n\n  &.sdds-badges-hidden {\n    display: none;\n  }\n}\n\n.sdds-badges-text {\n  font-family: var(--sdds-font-family-semi-condensed-bold);\n  font-size: 12px;\n  color: var(--sdds-badges-color-text);\n  font-weight: bold;\n}\n","import { Component, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-badges',\n  styleUrl: 'badges.scss',\n  shadow: true,\n})\nexport class SddsBadges {\n  /** Value shown in badge */\n  @Prop() value: string = '';\n  // TODO: Make upper prop accepts numbers too ?\n\n  /** Changes visibility of badge */\n  @Prop() hidden: boolean = false;\n\n  /** @deprecated Use size prop instead. Changes badge from large to small size */\n  @Prop() isSmall: boolean = false;\n\n  /** Sets component size. */\n  @Prop() size: 'lg' | 'sm' = 'lg';\n\n  @State() shape: string = '';\n\n  @State() text: string = '';\n\n  @Watch('value')\n  @Watch('isSmall')\n  @Watch('size')\n  watchProps() {\n    this.checkProps();\n  }\n\n  componentWillLoad() {\n    this.checkProps();\n    if (this.isSmall) {\n      this.size = 'sm';\n      console.warn('Prop isSmall is deprecated. Use size\"small\" instead');\n    }\n  }\n\n  checkProps() {\n    const valueAsNumber = parseInt(this.value);\n    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {\n      this.shape = this.value.toString().length >= 2 ? 'pill' : '';\n      this.size = 'lg';\n      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();\n    } else {\n      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions\n      this.value !== '' && this.size !== 'sm'\n        ? console.warn(\n            'The provided value is either empty or string, please provide value as number.',\n          )\n        : '';\n    }\n  }\n\n  render() {\n    return (\n      <host\n        class={`sdds-badges sdds-badges-${this.size} ${\n          this.shape === 'pill' ? 'sdds-badges-pill' : ''\n        } ${this.hidden ? 'sdds-badges-hidden' : ''}`}\n      >\n        <div class=\"sdds-badges-text\">{this.text}</div>\n      </host>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAY,isB,MCOLC,EAAU,M,oCAEG,G,YAIE,M,aAGC,M,UAGC,K,WAEH,G,UAED,E,CAKxBC,aACEC,KAAKC,Y,CAGPC,oBACEF,KAAKC,aACL,GAAID,KAAKG,QAAS,CAChBH,KAAKI,KAAO,KACZC,QAAQC,KAAK,sD,EAIjBL,aACE,MAAMM,EAAgBC,SAASR,KAAKS,OACpC,IAAKC,OAAOC,MAAMJ,IAAkBP,KAAKI,OAAS,KAAM,CACtDJ,KAAKY,MAAQZ,KAAKS,MAAMI,WAAWC,QAAU,EAAI,OAAS,GAC1Dd,KAAKI,KAAO,KACZJ,KAAKe,KAAOR,EAAcM,WAAWC,QAAU,EAAI,MAAQP,EAAcM,U,KACpE,CAELb,KAAKS,QAAU,IAAMT,KAAKI,OAAS,KAC/BC,QAAQC,KACN,iFAEF,E,EAIRU,SACE,OACEC,EAAA,QACEC,MAAO,2BAA2BlB,KAAKI,QACrCJ,KAAKY,QAAU,OAAS,mBAAqB,MAC3CZ,KAAKmB,OAAS,qBAAuB,MAEzCF,EAAA,OAAKC,MAAM,oBAAoBlB,KAAKe,M"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","DropdownFilter","componentWillLoad","this","parseData","data","defaultOption","selectedOptionState","newValue","dataOptions","JSON","parse","filteredContent","updateOptionsContent","event","searchTerm","detail","findData","selectOptionHandler","value","selectedLabel","label","selectedValue","setTimeout","searchAsRegEx","RegExp","filter","option","listItem","toLowerCase","searchResultList","match","setOptionsContent","newList","map","obj","h","tabindex","class","length","async","_a","dropdownRef","resetOption","render","Host","ref","el","exportparts","size","disabled","labelPosition","helper","state","placeholder","selectedOption","type"],"sources":["./src/components/dropdown/dropdown.scss?tag=sdds-dropdown-filter&encapsulation=shadow","./src/components/dropdown/dropdown-filter/dropdown-filter.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import './dropdown-core';\n@import './dropdown-vars.scss';\n@import '../../global/scania-fonts-vars.scss';\n\n@import '../checkbox/checkbox.scss';\n@import '../../mixins/box-sizing';\n\n:host,\n::slotted(*) {\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n  @include sdds-box-sizing;\n}\n\n:host,\n::slotted(*) {\n  --sdds-dropdown-label-outside: var(--sdds-dropdown-label-outside);\n  --sdds-dropdown-label-outside-text-decoration: none;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-grey-958);\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n  z-index: auto;\n\n  &::part(dropdown-filter-disabled) {\n    cursor: not-allowed;\n    caret-color: transparent;\n    pointer-events: none;\n    color: var(--sdds-grey-400);\n    border: none;\n\n    &::placeholder {\n      color: var(--sdds-grey-400);\n    }\n  }\n}\n\n.sdds-dropdown {\n  position: relative;\n  display: flex;\n  flex-flow: column wrap;\n  width: 100%;\n  border: 0;\n\n  &,\n  * {\n    box-sizing: border-box;\n  }\n\n  .sdds-dropdown-toggle {\n    @include dropdown-wrapper;\n\n    display: flex;\n    align-items: center;\n\n    &-lg {\n      padding: 20px 16px;\n    }\n\n    &-md {\n      padding: 16px;\n    }\n\n    &-sm {\n      padding: 12px 16px;\n    }\n\n    &.sdds-dropdown-toggle-label-inside {\n      &-lg {\n        padding: 20px 16px 16px;\n      }\n\n      &-md {\n        padding: 16px 16px 12px;\n      }\n    }\n  }\n\n  .sdds-dropdown-toggle--selected:not(:focus) {\n    border-bottom: 1px solid var(--sdds-dropdown-border-not-focused);\n  }\n\n  .sdds-dropdown-arrow {\n    width: 20px;\n    position: absolute;\n    right: 16px;\n    color: inherit;\n    transform: rotate(0);\n    transition: transform ease 250ms;\n  }\n\n  .sdds-dropdown-placeholder {\n    color: var(--sdds-grey-700);\n  }\n\n  .sdds-dropdown-label {\n    display: grid;\n    width: calc(100% - 25px);\n  }\n\n  .sdds-dropdown-label-container {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.sdds-dropdown.sdds-dropdown-sm {\n    .sdds-dropdown-label-container--label-inside {\n      padding-bottom: 12px;\n    }\n  }\n\n  .sdds-dropdown-filter {\n    border: 0;\n    outline: none;\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    color: var(--sdds-dropdown-link);\n    width: 100%;\n    background: transparent;\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: var(--sdds-grey-700);\n      opacity: 1;\n    }\n  }\n\n  .sdds-dropdown-menu {\n    z-index: z(dropdown);\n\n    @include sdds-scrollbar;\n\n    background-color: var(--sdds-dropdown-background);\n    position: absolute;\n    top: 100%;\n    left: 0;\n    min-width: 100%;\n    max-height: 360px; // max 7 option items, then add scroll\n    border-color: transparent;\n    border-style: solid;\n    border-width: 0 1px 1px;\n    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 10%);\n    border-left-color: var(--sdds-dropdown-border);\n    border-right-color: var(--sdds-dropdown-border);\n    overflow-x: hidden;\n    overflow-y: auto;\n    transform: scaleY(0);\n    transform-origin: top;\n    transition: transform 250ms ease;\n  }\n\n  // Size lg\n  &.sdds-dropdown-lg {\n    .sdds-dropdown-toggle {\n      height: 56px;\n    }\n  }\n\n  // Size md\n  &.sdds-dropdown-md {\n    .sdds-dropdown-toggle {\n      height: 48px;\n    }\n  }\n\n  // Size sm\n  &.sdds-dropdown-sm {\n    .sdds-dropdown-toggle {\n      height: 40px;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  .sdds-dropdown {\n    .sdds-dropdown-menu {\n      top: auto;\n      bottom: 100%;\n      box-shadow: 0 -1px 3px 0 rgb(0 0 0 / 10%);\n      transform-origin: bottom;\n    }\n  }\n}\n\n:host(.sdds-dropdown--open-upwards[label-position='outside']) {\n  span.sdds-dropdown-menu {\n    bottom: calc(100% - 24px);\n  }\n}\n\n:host([disabled='true']) {\n  cursor: not-allowed;\n\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      pointer-events: none;\n      color: var(--sdds-dropdown-option-disabled-color);\n      border: none;\n      padding: 0 16px;\n\n      .sdds-dropdown-placeholder {\n        color: var(--sdds-dropdown-placeholder);\n      }\n\n      .sdds-dropdown-label-inside {\n        color: var(--sdds-dropdown-label-inside);\n      }\n\n      &:focus {\n        &::before {\n          content: none;\n        }\n      }\n    }\n  }\n}\n\n:host(.sdds-dropdown--error) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      border-color: var(--sdds-negative);\n\n      &:focus {\n        &::before {\n          border-color: var(--sdds-negative);\n        }\n      }\n    }\n  }\n\n  .sdds-dropdown-helper {\n    color: var(--sdds-negative);\n\n    .sdds-dropdown-error-icon {\n      display: flex;\n    }\n  }\n}\n\n// dropdown option\n:host {\n  ::slotted(sdds-dropdown-option) {\n    display: flex;\n    padding: var(--sdds-spacing-element-16);\n    background-color: var(--sdds-dropdown-background);\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n    opacity: 0;\n    visibility: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n    color: var(--sdds-dropdown-option-color);\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-bottom-color: transparent;\n    border-bottom-left-radius: 4px;\n    border-bottom-right-radius: 4px;\n  }\n\n  ::slotted(sdds-dropdown-option:hover),\n  ::slotted(sdds-dropdown-option:focus) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:not(:focus):not(sdds-dropdown-option.selected)) {\n    background-color: var(--sdds-dropdown-background-hover);\n  }\n\n  ::slotted(sdds-dropdown-option:hover:focus) {\n    outline: none;\n  }\n\n  ::slotted(sdds-dropdown-option:focus) {\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown--selected),\n  ::slotted(sdds-dropdown-option.selected),\n  ::slotted(sdds-dropdown-option.active),\n  ::slotted(sdds-dropdown-option:active) {\n    background-color: var(--sdds-dropdown-background-hover);\n    border-top: 1px solid var(--sdds-dropdown-border);\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-option--no-result) {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  ::slotted(sdds-dropdown-option.sdds-dropdown-option-disabled),\n  ::slotted(sdds-dropdown-option.selected.sdds-dropdown-option-disabled) {\n    cursor: not-allowed;\n    color: var(--sdds-dropdown-option-disabled-color);\n    background-color: var(--sdds-dropdown-background-disabled);\n  }\n}\n\n:host(.sdds-dropdown--open-upwards) {\n  ::slotted(sdds-dropdown-option:first-child) {\n    border-radius: 4px 4px 0 0;\n  }\n\n  ::slotted(sdds-dropdown-option:last-child) {\n    border-radius: 0;\n    border-bottom: 1px solid var(--sdds-dropdown-border);\n  }\n}\n\n.sdds-option-label {\n  margin: auto 0;\n  display: flex;\n  align-content: center;\n  text-decoration: none;\n  flex-grow: 2;\n}\n\n.sdds-option-checkmark {\n  color: inherit;\n  opacity: 0;\n  transition: opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);\n  margin-left: var(--sdds-spacing-element-16);\n\n  path {\n    color: var(--sdds-dropdown-option-color);\n  }\n}\n\n:host([size='sm']) {\n  ::slotted(sdds-dropdown-option) {\n    padding: var(--sdds-spacing-element-12) var(--sdds-spacing-element-16);\n  }\n}\n\n:host(.sdds-dropdown--open) {\n  .sdds-dropdown {\n    .sdds-dropdown-toggle {\n      box-shadow: 0 -1px 3px -1px rgb(0 0 0 / 10%);\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n\n      // TODO: what is this? it doesnt seem to do anything.\n      &.is-filter {\n        &::before {\n          content: ' ';\n          position: absolute;\n          z-index: 2;\n          bottom: 0;\n          left: 0;\n          width: 100%;\n          border-bottom: 1px solid var(--sdds-blue-400);\n        }\n      }\n    }\n\n    .sdds-dropdown-arrow {\n      transform: rotate(180deg);\n    }\n\n    .sdds-dropdown-menu {\n      transform: scaleY(1);\n    }\n  }\n\n  ::slotted(sdds-dropdown-option) {\n    visibility: visible;\n    opacity: 1;\n  }\n}\n\n:host(.selected) {\n  .sdds-option-checkmark {\n    opacity: 1;\n  }\n}\n\n.sdds-dropdown-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  color: var(--sdds-dropdown-label-inside);\n  position: absolute;\n  transition: transform 250ms ease, color 200ms ease;\n  width: calc(100% - 63px);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  transform: translate(0, -10px);\n  font-size: 10px;\n}\n\n.sdds-dropdown-label-container.sdds-dropdown-label-container--label-inside {\n  .sdds-dropdown-placeholder {\n    display: block;\n    padding-top: 4px;\n  }\n}\n\n.sdds-dropdown-lg {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 16px;\n  }\n}\n\n.sdds-dropdown-md {\n  .sdds-dropdown-label-inside {\n    display: block;\n    top: 12px;\n  }\n}\n\n.sdds-dropdown.sdds-dropdown-sm {\n  .sdds-dropdown-label-inside {\n    display: none;\n  }\n}\n\n.sdds-dropdown-multiselect-result {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sdds-option-checkbox {\n  margin-right: 8px;\n}\n\n.sdds-form-label {\n  display: flex;\n}\n","import { Component, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown-filter',\n  shadow: true,\n  styleUrl: './../dropdown.scss',\n})\nexport class DropdownFilter {\n  @State() dataOptions = [];\n\n  @State() filteredContent = [];\n\n  @State() searchTerm = '';\n\n  @State() selectedOptionState: any;\n\n  @State() dropdownRef?: HTMLSddsDropdownElement;\n\n  /** Placeholder text for dropdown with no selected item */\n  @Prop() placeholder: string = '';\n\n  /** Label for dropdown with no selected item */\n  @Prop() label: string;\n\n  /** Add the value of the option to set it as default */\n  @Prop() defaultOption: string;\n\n  /** Add the value of the option as string to set it as new selected value */\n  @Prop() selectedOption: string;\n\n  /** Add the value of the option to set it as default */\n  @Prop() disabled: boolean;\n\n  /** Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' = 'lg';\n\n  /** Set to true to make the width following the label text length */\n  @Prop() inline: boolean = false;\n\n  /** Position of label */\n  @Prop() labelPosition: 'no-label' | 'inside' | 'outside' = 'no-label';\n\n  /** Support `error` state */\n  @Prop() state: string = 'default';\n\n  /** Add helper text in the bottom of dropdown */\n  @Prop() helper: string = '';\n\n  /** Data is an array of objects that contains label and value\n   * `data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`\n   */\n  @Prop() data: string;\n\n  @State() selectedLabel: string = 'no-selected';\n\n  @State() selectedValue: string = 'no-selected';\n\n  componentWillLoad() {\n    this.parseData(this.data);\n\n    if (this.defaultOption) {\n      this.selectedOptionState = this.defaultOption;\n    }\n  }\n\n  @Watch('data')\n  parseData(newValue: string) {\n    if (newValue) this.dataOptions = JSON.parse(newValue);\n    this.filteredContent = this.dataOptions;\n  }\n\n  @Listen('inputSearch')\n  updateOptionsContent(event: CustomEvent<any>) {\n    this.searchTerm = event.detail;\n    this.findData();\n  }\n\n  @Listen('selectOption')\n  selectOptionHandler(event: CustomEvent<any>) {\n    this.selectedOptionState = event.detail.value;\n    this.selectedLabel = event.detail.label;\n    this.selectedValue = event.detail.value;\n\n    // Reset list when search is done and user have selected one option\n    // To match with animation time for option list to fadeout first\n    setTimeout(() => {\n      this.filteredContent = this.dataOptions;\n    }, 200);\n  }\n\n  findData() {\n    const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');\n    this.filteredContent = this.dataOptions.filter(option => {\n      if (option.label) {\n        const listItem = option.label.toLowerCase();\n        const searchResultList = listItem.match(searchAsRegEx);\n        if (searchResultList) {\n          return searchResultList;\n        }\n        this.selectedOptionState = null;\n        this.selectedLabel = 'no-result';\n        this.selectedValue = 'no-result';\n      }\n    });\n  }\n\n  setOptionsContent() {\n    const newList = this.filteredContent.map(obj => (\n      <sdds-dropdown-option tabindex=\"0\" value={obj.value} class={`${this.selectedOptionState === obj.value ? 'selected' : ''}`}>\n        {obj.label}\n      </sdds-dropdown-option>\n    ));\n    if (newList.length > 0) {\n      return newList;\n    }\n    return (\n      <sdds-dropdown-option tabindex=\"-1\" value=\"no-result\" class=\"sdds-option--no-result\">\n        No result\n      </sdds-dropdown-option>\n    );\n  }\n\n  /** Use this method to reset the dropdown. Then it will go back to its initial state. */\n  @Method() async resetOption() {\n    await this.dropdownRef?.resetOption();\n  }\n\n  render() {\n    return (\n      <Host selected-value={this.selectedValue} selected-text={this.selectedLabel}>\n        <sdds-dropdown\n          ref={el => (this.dropdownRef = el)}\n          exportparts=\"dropdown-filter-disabled\"\n          size={this.size}\n          label={this.label}\n          disabled={this.disabled}\n          labelPosition={this.labelPosition}\n          helper={this.helper}\n          state={this.state}\n          placeholder={this.placeholder}\n          defaultOption={this.defaultOption}\n          selectedOption={this.selectedOption}\n          type=\"filter\"\n          tabindex={this.disabled ? '-1' : null}\n        >\n          {this.setOptionsContent()}\n        </sdds-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,upkC,MCOPC,EAAc,M,0CACF,G,qBAEI,G,gBAEL,G,+EAOQ,G,kHAeoC,K,YAGxC,M,mBAGiC,W,WAGnC,U,YAGC,G,uCAOQ,c,mBAEA,a,CAEjCC,oBACEC,KAAKC,UAAUD,KAAKE,MAEpB,GAAIF,KAAKG,cAAe,CACtBH,KAAKI,oBAAsBJ,KAAKG,a,EAKpCF,UAAUI,GACR,GAAIA,EAAUL,KAAKM,YAAcC,KAAKC,MAAMH,GAC5CL,KAAKS,gBAAkBT,KAAKM,W,CAI9BI,qBAAqBC,GACnBX,KAAKY,WAAaD,EAAME,OACxBb,KAAKc,U,CAIPC,oBAAoBJ,GAClBX,KAAKI,oBAAsBO,EAAME,OAAOG,MACxChB,KAAKiB,cAAgBN,EAAME,OAAOK,MAClClB,KAAKmB,cAAgBR,EAAME,OAAOG,MAIlCI,YAAW,KACTpB,KAAKS,gBAAkBT,KAAKM,WAAW,GACtC,I,CAGLQ,WACE,MAAMO,EAAgB,IAAIC,OAAOtB,KAAKY,WAAY,OAClDZ,KAAKS,gBAAkBT,KAAKM,YAAYiB,QAAOC,IAC7C,GAAIA,EAAON,MAAO,CAChB,MAAMO,EAAWD,EAAON,MAAMQ,cAC9B,MAAMC,EAAmBF,EAASG,MAAMP,GACxC,GAAIM,EAAkB,CACpB,OAAOA,C,CAET3B,KAAKI,oBAAsB,KAC3BJ,KAAKiB,cAAgB,YACrBjB,KAAKmB,cAAgB,W,KAK3BU,oBACE,MAAMC,EAAU9B,KAAKS,gBAAgBsB,KAAIC,GACvCC,EAAA,wBAAsBC,SAAS,IAAIlB,MAAOgB,EAAIhB,MAAOmB,MAAO,GAAGnC,KAAKI,sBAAwB4B,EAAIhB,MAAQ,WAAa,MAClHgB,EAAId,SAGT,GAAIY,EAAQM,OAAS,EAAG,CACtB,OAAON,C,CAET,OACEG,EAAA,wBAAsBC,SAAS,KAAKlB,MAAM,YAAYmB,MAAM,0BAAwB,Y,CAO9EE,oB,aACFC,EAAAtC,KAAKuC,eAAW,MAAAD,SAAA,SAAAA,EAAEE,c,CAG1BC,SACE,OACER,EAACS,EAAI,kBAAiB1C,KAAKmB,cAAa,gBAAiBnB,KAAKiB,eAC5DgB,EAAA,iBACEU,IAAKC,GAAO5C,KAAKuC,YAAcK,EAC/BC,YAAY,2BACZC,KAAM9C,KAAK8C,KACX5B,MAAOlB,KAAKkB,MACZ6B,SAAU/C,KAAK+C,SACfC,cAAehD,KAAKgD,cACpBC,OAAQjD,KAAKiD,OACbC,MAAOlD,KAAKkD,MACZC,YAAanD,KAAKmD,YAClBhD,cAAeH,KAAKG,cACpBiD,eAAgBpD,KAAKoD,eACrBC,KAAK,SACLnB,SAAUlC,KAAK+C,SAAW,KAAO,MAEhC/C,KAAK6B,qB"}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as a,g as o}from"./p-0b4eba86.js";const i='.sdds-navigation-tabs{box-sizing:border-box;background-color:var(--sdds-navigation-tabs-background);position:relative;display:flex;}.sdds-navigation-tabs *{box-sizing:border-box}.sdds-navigation-tabs::after{content:" ";display:block;border-bottom:1px solid var(--sdds-navigation-tabs-horizontal-divider-background);opacity:var(--sdds-navigation-tabs-horizontal-divider-opacity);left:0;right:0;bottom:0;position:absolute}.sdds-navigation-tabs-wrapper{display:flex;flex-wrap:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none}.sdds-navigation-tabs-wrapper::-webkit-scrollbar{display:none}.sdds-navigation-tabs-forward{cursor:pointer;width:48px;height:100%;border:0;position:absolute;right:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-forward__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-forward:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover);text-decoration:none}.sdds-navigation-tabs-forward:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-forward:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-navigation-tabs-back{cursor:pointer;width:48px;height:100%;border:0;position:absolute;left:0;top:0;background-color:var(--sdds-navigation-tabs-scroll-btn-background);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none}.sdds-navigation-tabs-back__show{opacity:1;pointer-events:all}.sdds-navigation-tabs-back:hover{background-color:var(--sdds-navigation-tabs-scroll-btn-background-hover)}.sdds-navigation-tabs-back:active{background-color:var(--sdds-navigation-tabs-scroll-btn-background-active)}.sdds-navigation-tabs-back:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}::slotted(.sdds-navigation-tabs-tab){font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);opacity:0.6;padding:26px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}::slotted(.sdds-navigation-tabs-tab)::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}::slotted(.sdds-navigation-tabs-tab:first-child){margin-left:32px}::slotted(.sdds-navigation-tabs-tab:last-child){margin-right:32px}::slotted(.sdds-navigation-tabs-tab:hover){color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}::slotted(.sdds-navigation-tabs-tab:hover)::after{width:100%}::slotted(.sdds-navigation-tabs-tab:focus){outline:2px solid var(--sdds-blue-400);outline-offset:-2px;color:var(--sdds-navigation-tabs-tab-color-focus);opacity:1}::slotted(.sdds-navigation-tabs-tab:focus)::after{width:0}::slotted(.sdds-navigation-tabs-tab-active){color:var(--sdds-navigation-tabs-tab-color-active);opacity:1}::slotted(.sdds-navigation-tabs-tab-active)::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}::slotted(.sdds-navigation-tabs-tab-active:focus)::after{width:100%}::slotted(.sdds-navigation-tabs-tab-disabled){color:var(--sdds-navigation-tabs-tab-color-disabled);opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled);pointer-events:none}';const n=class{constructor(s){t(this,s);this.navWrapperElement=null;this.componentWidth=0;this.buttonsWidth=0;this.scrollWidth=0;this.buttonWidth=0;this.tabs=[];this.showLeftScroll=false;this.showRightScroll=false;this.modeVariant=null}componentDidRender(){this.calculateButtonWidth()}componentDidLoad(){const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let a=0;const o=Array.from(this.host.children);o.forEach((t=>{const s=window.getComputedStyle(t);a+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight);t.classList.add("sdds-navigation-tabs-tab")}));this.componentWidth=s;this.buttonsWidth=a;this.scrollWidth=a-s;if(this.buttonsWidth>this.componentWidth){this.evaluateScrollButtons()}else{this.showLeftScroll=false;this.showRightScroll=false}}))}));t.observe(this.navWrapperElement);this.calculateButtonWidth()}calculateButtonWidth(){let t=0;const s=Array.from(this.host.children);s.forEach((s=>{const a=window.getComputedStyle(s);const o=s.clientWidth+parseFloat(a.marginLeft)+parseFloat(a.marginRight);if(o>t){t=o}}));this.buttonWidth=t}scrollRight(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t+this.buttonWidth;this.evaluateScrollButtons()}scrollLeft(){const t=this.navWrapperElement.scrollLeft;this.navWrapperElement.scrollLeft=t-this.buttonWidth;this.evaluateScrollButtons()}evaluateScrollButtons(){const t=this.navWrapperElement.scrollLeft;if(t>=this.scrollWidth){this.showRightScroll=false}else{this.showRightScroll=true}if(t<=0){this.showLeftScroll=false}else{this.showLeftScroll=true}}render(){return s(a,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("div",{class:"sdds-navigation-tabs"},s("div",{class:"sdds-navigation-tabs-wrapper",ref:t=>{this.navWrapperElement=t}},s("slot",null)),s("div",{class:"sdds-navigation-tabs-navigation"},s("button",{class:`sdds-navigation-tabs-forward ${this.showRightScroll?"sdds-navigation-tabs-forward-show":""}`,onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z",fill:"#0D0F13"}))),s("button",{class:`sdds-navigation-tabs-back ${this.showLeftScroll?"sdds-navigation-tabs-back-show":""}`,onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},s("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z",fill:"#0D0F13"}))))))}get host(){return o(this)}};n.style=i;export{n as sdds_navigation_tabs};
+//# sourceMappingURL=p-913cb5e9.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["navigationTabsCss","NavigationTabs","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","buttonWidth","componentDidRender","calculateButtonWidth","componentDidLoad","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","classList","add","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","best","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","ref","el","onClick","disabled","height","viewBox","fill","xmlns","d"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs.scss?tag=sdds-navigation-tabs&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n\n\n.sdds-navigation-tabs {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-navigation-tabs-background);\n  position: relative;\n  display: flex;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-navigation-tabs-horizontal-divider-background);\n    opacity: var(--sdds-navigation-tabs-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  &-wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &-forward {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n    background-color: var(--sdds-navigation-tabs-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);\n      text-decoration: none;\n    }\n\n    &:active {\n      background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n  }\n\n  &-back {\n    cursor: pointer;\n    width: 48px;\n    height: 100%;\n    border: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: var(--sdds-navigation-tabs-scroll-btn-background);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n\n    &__show {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-navigation-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-navigation-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n  }\n\n  /* tab */\n  ::slotted(&-tab) {\n    //fixme: headline-07 has a line-height that is not matching old storybook\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    opacity:0.6;\n    padding: 26px 0;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n\n  ::slotted(&-tab:first-child) {\n    margin-left: 32px;\n  }\n\n  ::slotted(&-tab:last-child) {\n    margin-right: 32px;\n  }\n\n  /* tab states */\n  ::slotted(&-tab:hover) {\n    color: var(--sdds-navigation-tabs-tab-color-hover);\n    opacity: 1;\n\n    &::after {\n      width: 100%;\n    }\n  }\n\n  ::slotted(&-tab:focus) {\n    @include sdds-focus-state;\n\n    color: var(--sdds-navigation-tabs-tab-color-focus);\n    opacity: 1;\n\n    &::after {\n      width: 0;\n    }\n  }\n\n  ::slotted(&-tab-active) {\n    color: var(--sdds-navigation-tabs-tab-color-active);\n    opacity:1;\n\n    &::after {\n      width: 100%;\n\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n    }\n  }\n\n  ::slotted(&-tab-active:focus)::after {\n    width: 100%;\n  }\n\n  ::slotted(&-tab-disabled) {\n    color: var(--sdds-navigation-tabs-tab-color-disabled);\n    opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n    pointer-events: none;\n  }\n}\n","import { Component, Host, State, Element, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs',\n  styleUrl: 'navigation-tabs.scss',\n  shadow: true,\n})\nexport class NavigationTabs {\n  @Element() host: HTMLElement;\n\n  @State() tabs: Array<any> = []; // array with metadata for slotted children\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n  \n   /** Variant of the tabs, primary= on white, secondary= on grey50 */\n   @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  componentWidth: number = 0; // visible width of this component\n\n  buttonsWidth: number = 0; // total width of all nav items combined\n\n  scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  componentDidRender() {\n    this.calculateButtonWidth();\n  }\n\n  componentDidLoad() {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-navigation-tabs-tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n\n    this.calculateButtonWidth();\n  }\n\n  calculateButtonWidth() {\n    let best = 0;\n    const navButtons = Array.from(this.host.children);\n    navButtons.forEach((navButton: HTMLElement) => {\n      const style = window.getComputedStyle(navButton);\n      const width =\n        navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n      if (width > best) {\n        best = width;\n      }\n    });\n\n    this.buttonWidth = best;\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - this.buttonWidth;\n\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host  class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n        <div class=\"sdds-navigation-tabs\">\n          <div\n            class=\"sdds-navigation-tabs-wrapper\"\n            ref={(el) => {\n              this.navWrapperElement = el as HTMLElement;\n            }}\n          >\n            <slot />\n          </div>\n          <div class=\"sdds-navigation-tabs-navigation\">\n            <button\n              class={`sdds-navigation-tabs-forward ${\n                this.showRightScroll ? 'sdds-navigation-tabs-forward-show' : ''\n              }`}\n              onClick={() => this.scrollRight()}\n              disabled={!this.showRightScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M6.1147 17.3291C5.87062 17.0851 5.87062 16.6893 6.1147 16.4453L12.2948 10.2652C12.4412 10.1187 12.4412 9.8813 12.2948 9.73485L6.1147 3.55476C5.87062 3.31068 5.87062 2.91496 6.1147 2.67088C6.35878 2.4268 6.75451 2.4268 6.99858 2.67088L13.1787 8.85097C13.8133 9.48557 13.8133 10.5145 13.1787 11.1491L6.99858 17.3291C6.75451 17.5732 6.35878 17.5732 6.1147 17.3291Z\"\n                  fill=\"#0D0F13\"\n                ></path>\n              </svg>\n            </button>\n            <button\n              class={`sdds-navigation-tabs-back ${\n                this.showLeftScroll ? 'sdds-navigation-tabs-back-show' : ''\n              }`}\n              onClick={() => this.scrollLeft()}\n              disabled={!this.showLeftScroll}\n            >\n              <svg\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 20 20\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M13.8853 2.67085C14.1294 2.91493 14.1294 3.31066 13.8853 3.55473L7.70522 9.73482C7.55878 9.88127 7.55878 10.1187 7.70522 10.2652L13.8853 16.4452C14.1294 16.6893 14.1294 17.085 13.8853 17.3291C13.6412 17.5732 13.2455 17.5732 13.0014 17.3291L6.82134 11.149C6.18674 10.5144 6.18674 9.48554 6.82134 8.85094L13.0014 2.67085C13.2455 2.42677 13.6412 2.42677 13.8853 2.67085Z\"\n                  fill=\"#0D0F13\"\n                ></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,m7G,MCObC,EAAc,M,yBAYzBC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EAEtBJ,KAAAK,YAAsB,E,UAjBM,G,oBAEO,M,qBAEC,M,iBAGY,I,CAYhDC,qBACEN,KAAKO,sB,CAGPC,mBACE,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMX,EAAiBW,EAAMC,YAAYC,MACzC,IAAIZ,EAAe,EAEnB,MAAMa,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtClB,GACEkB,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1EP,EAAUQ,UAAUC,IAAI,2BAA2B,IAGrD9B,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK+B,uB,KACA,CACL/B,KAAKgC,eAAiB,MACtBhC,KAAKiC,gBAAkB,K,IAEzB,IAGJxB,EAAeyB,QAAQlC,KAAKC,mBAE5BD,KAAKO,sB,CAGPA,uBACE,IAAI4B,EAAO,EACX,MAAMnB,EAAaC,MAAMC,KAAKlB,KAAKmB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtC,MAAMN,EACJM,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1E,GAAIb,EAAQoB,EAAM,CAChBA,EAAOpB,C,KAIXf,KAAKK,YAAc8B,C,CAGrBC,cACE,MAAMC,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPO,aACE,MAAMD,EAASrC,KAAKC,kBAAkBqC,WACtCtC,KAAKC,kBAAkBqC,WAAaD,EAASrC,KAAKK,YAElDL,KAAK+B,uB,CAGPA,wBACE,MAAMM,EAASrC,KAAKC,kBAAkBqC,WAEtC,GAAID,GAAUrC,KAAKI,YAAa,CAC9BJ,KAAKiC,gBAAkB,K,KAClB,CACLjC,KAAKiC,gBAAkB,I,CAGzB,GAAII,GAAU,EAAG,CACfrC,KAAKgC,eAAiB,K,KACjB,CACLhC,KAAKgC,eAAiB,I,EAI1BO,SACE,OACEC,EAACC,EAAI,CAAEC,MAAO,GAAG1C,KAAK2C,cAAgB,KAAO,qBAAqB3C,KAAK2C,cAAe,MACpFH,EAAA,OAAKE,MAAM,wBACTF,EAAA,OACEE,MAAM,+BACNE,IAAMC,IACJ7C,KAAKC,kBAAoB4C,CAAiB,GAG5CL,EAAA,cAEFA,EAAA,OAAKE,MAAM,mCACTF,EAAA,UACEE,MAAO,gCACL1C,KAAKiC,gBAAkB,oCAAsC,KAE/Da,QAAS,IAAM9C,KAAKoC,cACpBW,UAAW/C,KAAKiC,iBAEhBO,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,4WACFF,KAAK,cAIXV,EAAA,UACEE,MAAO,6BACL1C,KAAKgC,eAAiB,iCAAmC,KAE3Dc,QAAS,IAAM9C,KAAKsC,aACpBS,UAAW/C,KAAKgC,gBAEhBQ,EAAA,OACEzB,MAAM,KACNiC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENX,EAAA,oBACY,UAAS,YACT,UACVY,EAAE,kXACFF,KAAK,gB"}