@scania/tegel 0.0.52 → 0.0.71-beta

package/dist/tegel/p-4499e5cd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sddsToastCss","SddsToast","this","getIconName","type","handleClose","sddsCloseEvent","sddsClose","emit","toastId","defaultPrevented","hidden","getHeaderClasses","hasSubheader","hasLink","crypto","randomUUID","async","connectedCallback","children","Array","from","host","some","childElement","slot","render","h","Host","toastRole","getAttribute","class","name","size","header","onClick"],"sources":["./src/components/toast/sdds-toast.scss?tag=sdds-toast&encapsulation=shadow","./src/components/toast/sdds-toast.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n@import '../../mixins/z-index';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host {\n  z-index: z(toast);\n\n  .toast-wrapper {\n    display: flex;\n    width: calc(352px - 4px);\n    background-color: var(--sdds-toast-background-color);\n    border-radius: 4px;\n\n    &.information {\n      border-left: 4px solid var(--sdds-information);\n\n      sdds-icon {\n        color: var(--sdds-information);\n      }\n    }\n\n    &.success {\n      border-left: 4px solid var(--sdds-positive);\n\n      sdds-icon {\n        color: var(--sdds-positive);\n      }\n    }\n\n    &.error {\n      border-left: 4px solid var(--sdds-negative);\n\n      sdds-icon {\n        color: var(--sdds-negative);\n      }\n    }\n\n    &.warning {\n      border-left: 4px solid var(--sdds-warning);\n\n      sdds-icon {\n        color: var(--sdds-warning);\n      }\n    }\n\n    button.toast-close {\n      height: 20px;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: 14px 14px 0 0;\n      border: none;\n      background: transparent;\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n\n      sdds-icon {\n        color: var(--sdds-toast-dissmiss-color);\n        padding: 0;\n      }\n    }\n  }\n\n  sdds-icon {\n    padding: 14px 0 0 12px;\n  }\n\n  .toast-content {\n    padding: 16px 0 16px 10px;\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    .toast-header {\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-toast-headline-color);\n\n      &.no-subheader {\n        margin-bottom: 4px;\n      }\n\n      &.only-header {\n        margin-bottom: 0;\n      }\n    }\n\n    .toast-subheader {\n      slot::slotted(*) {\n        margin-top: 4px;\n        color: var(--sdds-toast-subheadline-color);\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding-bottom: 16px;\n        max-width: 252px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &.no-link {\n        slot::slotted(*) {\n          padding-bottom: 0;\n        }\n      }\n    }\n  }\n\n  slot[name='toast-link']::slotted(*) {\n    color: var(--sdds-toast-link-color);\n  }\n\n  .sdds-mode-variant-primary {\n    --sdds-toast-background: var(--sdds-toast-background-primary);\n  }\n\n  .sdds-mode-variant-secondary {\n    --sdds-toast-background: var(--sdds-toast-background-secondary);\n  }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-toast',\n  styleUrl: 'sdds-toast.scss',\n  shadow: true,\n})\nexport class SddsToast {\n  /** ID for the toast. Randomly generated if not specified. */\n  @Prop() toastId: string = crypto.randomUUID();\n\n  /** Header text for the component. */\n  @Prop() header: string;\n\n  /** Subheader text for the component. */\n  @Prop() subheader: string;\n\n  /** Type of toast. */\n  @Prop() type: 'information' | 'error' | 'warning' | 'success' = 'information';\n\n  /** Hides the toast. */\n  @Prop() hidden: boolean = false;\n\n  /** ARIA role for the toast. */\n  @Prop() toastRole: 'alert' | 'log' | 'status' = 'alert';\n\n  @Element() host: HostElement;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  /** Hides the toast. */\n  @Method()\n  async hideToast() {\n    this.hidden = true;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Shows the toast. */\n  @Method()\n  async showToast() {\n    this.hidden = false;\n    return {\n      toastId: this.toastId,\n    };\n  }\n\n  /** Sends unique toast identifier component is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    toastId: string;\n  }>;\n\n  getIconName = () => {\n    switch (this.type) {\n      case 'information':\n        return 'info';\n      case 'error':\n        return 'error';\n      case 'warning':\n        return 'warning';\n      case 'success':\n        return 'tick';\n      default:\n        return 'info';\n    }\n  };\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      toastId: this.toastId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  connectedCallback() {\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');\n  }\n\n  getHeaderClasses = () => {\n    if (!this.hasSubheader && !this.hasLink) {\n      return 'only-header';\n    }\n    if (!this.hasSubheader) {\n      return 'no-subheader';\n    }\n    return '';\n  };\n\n  render() {\n    return (\n      <Host\n        toastRole={this.toastRole}\n        aria-describedby={this.host.getAttribute('aria-describedby')}\n        class={`${this.hidden ? 'hide' : 'show'}`}\n      >\n        <div\n          class={`\n            toast-wrapper\n            ${this.type}\n            `}\n        >\n          <sdds-icon name={this.getIconName()} size=\"20px\"></sdds-icon>\n          <div class={`toast-content`}>\n            <div\n              class={`toast-header\n              ${this.getHeaderClasses()}\n              `}\n            >\n              {this.header}\n            </div>\n            <div class={`toast-subheader ${this.hasLink ? '' : 'no-link'}`}>\n              <slot name=\"toast-subheader\"></slot>\n            </div>\n            <slot name=\"toast-link\"></slot>\n          </div>\n          <button\n            onClick={() => {\n              this.handleClose();\n            }}\n            class={`toast-close`}\n          >\n            <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,wpE,MCQRC,EAAS,M,8DAsDpBC,KAAAC,YAAc,KACZ,OAAQD,KAAKE,MACX,IAAK,cACH,MAAO,OACT,IAAK,QACH,MAAO,QACT,IAAK,UACH,MAAO,UACT,IAAK,UACH,MAAO,OACT,QACE,MAAO,O,EAIbF,KAAAG,YAAc,KACZ,MAAMC,EAAiBJ,KAAKK,UAAUC,KAAK,CACzCC,QAASP,KAAKO,UAEhB,IAAKH,EAAeI,iBAAkB,CACpCR,KAAKS,OAAS,I,GAUlBT,KAAAU,iBAAmB,KACjB,IAAKV,KAAKW,eAAiBX,KAAKY,QAAS,CACvC,MAAO,a,CAET,IAAKZ,KAAKW,aAAc,CACtB,MAAO,c,CAET,MAAO,EAAE,E,aAzFeE,OAAOC,a,yDAS+B,c,YAGtC,M,eAGsB,Q,mDAUhDC,kBACEf,KAAKS,OAAS,KACd,MAAO,CACLF,QAASP,KAAKO,Q,CAMlBQ,kBACEf,KAAKS,OAAS,MACd,MAAO,CACLF,QAASP,KAAKO,Q,CAuClBS,oBACE,MAAMC,EAAWC,MAAMC,KAAKnB,KAAKoB,KAAKH,UACtCjB,KAAKW,aAAeM,EAASI,MAAMC,GAAiBA,EAAaC,OAAS,oBAC1EvB,KAAKY,QAAUK,EAASI,MAAMC,GAAiBA,EAAaC,OAAS,c,CAavEC,SACE,OACEC,EAACC,EAAI,CACHC,UAAW3B,KAAK2B,UAAS,mBACP3B,KAAKoB,KAAKQ,aAAa,oBACzCC,MAAO,GAAG7B,KAAKS,OAAS,OAAS,UAEjCgB,EAAA,OACEI,MAAO,4CAEH7B,KAAKE,sBAGTuB,EAAA,aAAWK,KAAM9B,KAAKC,cAAe8B,KAAK,SAC1CN,EAAA,OAAKI,MAAO,iBACVJ,EAAA,OACEI,MAAO,+BACL7B,KAAKU,sCAGNV,KAAKgC,QAERP,EAAA,OAAKI,MAAO,mBAAmB7B,KAAKY,QAAU,GAAK,aACjDa,EAAA,QAAMK,KAAK,qBAEbL,EAAA,QAAMK,KAAK,gBAEbL,EAAA,UACEQ,QAAS,KACPjC,KAAKG,aAAa,EAEpB0B,MAAO,eAEPJ,EAAA,aAAWK,KAAK,QAAQC,KAAK,W"}

package/dist/tegel/p-479b1c4e.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as e,H as i,g as r}from"./p-387e1798.js";const h=[{truck:"L-series",driver:"Sonya Bruce",country:"Brazil",mileage:123987},{truck:"P-series",driver:"Guerra Bowman",country:"Sweden",mileage:2000852},{truck:"G-series",driver:"Ferrell Wallace",country:"Germany",mileage:564},{truck:"R-series",driver:"Cox Burris",country:"Spain",mileage:1789357},{truck:"S-series",driver:"Montgomery Cervantes",country:"Croatia",mileage:65},{truck:"L-series",driver:"Sheryl Nielsen",country:"Greece",mileage:365784},{truck:"G-series",driver:"Benton Gomez",country:"France",mileage:80957}];const a=":host,sdds-table-body{box-sizing:border-box;display:table-row-group}:host *,sdds-table-body *{box-sizing:border-box}:host .sdds-table__info-message,sdds-table-body .sdds-table__info-message{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}";const o=["enableMultiselect","enableExpandableRows"];const l=class{constructor(e){s(this,e);this.internalSddsSortingChange=t(this,"internalSddsSortingChange",7);this.internalSddsCheckboxChange=t(this,"internalSddsCheckboxChange",7);this.internalSddsMainCheckboxChange=t(this,"internalSddsMainCheckboxChange",7);this.uncheckAll=()=>{this.mainCheckboxStatus=false;this.internalSddsMainCheckboxChange.emit([this.tableId,this.mainCheckboxStatus]);this.internalSddsCheckboxChange.emit([this.tableId,this.mainCheckboxStatus])};this.selectedDataExporter=()=>{const s=this.host.getElementsByClassName("sdds-table__row--selected");this.multiselectArray=[];for(let t=0;t<s.length;t++){const e=s[t].getElementsByTagName("sdds-body-cell");const i={};for(let s=0;s<e.length;s++){const t=e[s].getAttribute("cell-key");const r=e[s].getAttribute("cell-value");i[t]=r}this.multiselectArray.push(i)}this.multiselectArrayJSON=JSON.stringify(this.multiselectArray)};this.bodyCheckBoxClicked=()=>{const s=this.host.getElementsByClassName("sdds-table__row").length;const t=this.host.getElementsByClassName("sdds-table__row--selected").length;this.mainCheckboxStatus=s===t;this.internalSddsMainCheckboxChange.emit([this.tableId,this.mainCheckboxStatus]);this.selectedDataExporter()};this.disableFilteringFunction=false;this.disableSortingFunction=false;this.bodyData=undefined;this.enableDummyData=false;this.dummyData=JSON.stringify(h);this.rowsPerPage=1;this.enableMultiselect=false;this.enablePaginationTableBody=false;this.enableExpandableRows=true;this.innerBodyData=[];this.bodyDataManipulated=[];this.bodyDataOriginal=[];this.multiselectArray=[];this.multiselectArrayJSON=undefined;this.mainCheckboxStatus=false;this.columnsNumber=0;this.disableAllSorting=false;this.numberOfPages=0;this.paginationValue=1;this.tempPaginationDisable=false;this.showNoResultsMessage=false;this.tableId=""}arrayDataWatcher(s){if(typeof s==="string"){this.innerBodyData=JSON.parse(s)}else{this.innerBodyData=s}this.bodyDataManipulated=[...this.innerBodyData];this.bodyDataOriginal=[...this.innerBodyData]}internalSddsPropChangeListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>o.includes(s))).forEach((t=>{if(typeof this[t]==="undefined"){throw new Error(`Table prop is not supported: ${t}`)}this[t]=s.detail[t]}))}}static compareValues(s,t="asc"){return function e(i,r){if(!i.hasOwnProperty(s)||!r.hasOwnProperty(s)){return 0}const h=typeof i[s]==="string"?i[s].toUpperCase():i[s];const a=typeof r[s]==="string"?r[s].toUpperCase():r[s];let o=0;if(h>a){o=1}else if(h<a){o=-1}return t==="desc"?o*-1:o}}sortData(s,t){if(!this.disableSortingFunction){if(this.enableMultiselect){this.uncheckAll()}this.bodyDataManipulated=[...this.bodyDataManipulated];this.bodyDataManipulated.sort(l.compareValues(s,t))}}updateOptionsContent(s){const[t,e,i]=s.detail;if(this.tableId===t){this.sortData(e,i)}}headCheckboxListener(s){if(this.tableId===s.detail[0]){[,this.mainCheckboxStatus]=s.detail;this.selectedDataExporter()}}bodyCheckboxListener(){this.bodyCheckBoxClicked()}searchFunction(s){if(!this.disableFilteringFunction){const t=this.host.querySelectorAll("sdds-table-body-row");if(s.length>0){if(this.enablePaginationTableBody){this.tempPaginationDisable=true}t.forEach((t=>{const e=t.querySelectorAll("sdds-body-cell");const i=[];e.forEach((s=>{const t=s.getAttribute("cell-value").toLowerCase();i.push(t)}));const r=i.find((t=>t.includes(s)));if(r){t.classList.remove("sdds-table__row--hidden")}else{t.classList.add("sdds-table__row--hidden")}}));this.disableAllSorting=true;this.internalSddsSortingChange.emit([this.tableId,this.disableAllSorting]);const e=this.host.querySelectorAll(".sdds-table__row--hidden");this.showNoResultsMessage=e.length===t.length}else{if(this.enablePaginationTableBody){this.tempPaginationDisable=false}if(this.enablePaginationTableBody);else{t.forEach((s=>{s.classList.remove("sdds-table__row--hidden")}))}this.disableAllSorting=false;this.internalSddsSortingChange.emit([this.tableId,this.disableAllSorting])}}}sddsFilterListener(s){if(this.tableId===s.detail[0]){this.searchFunction(s.detail[1])}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){o.forEach((s=>{this[s]=this.tableEl[s]}));if(this.enableDummyData){this.bodyData=this.dummyData}else if(this.bodyData){this.arrayDataWatcher(this.bodyData)}}componentWillRender(){const s=this.host.parentElement.querySelector("sdds-table-header").children.length;if(this.enableMultiselect||this.enableExpandableRows){this.columnsNumber=s+1}else{this.columnsNumber=s}}render(){return e(i,{"data-selected-rows":this.multiselectArrayJSON},this.bodyDataManipulated.map((s=>e("sdds-table-body-row",null,Object.keys(s).map((t=>e("sdds-body-cell",{"cell-key":t,"cell-value":s[t]})))))),this.showNoResultsMessage&&e("tr",null,e("td",{class:"sdds-table__info-message",colSpan:this.columnsNumber},"Unfortunately, no data matches your search term 😕")),e("slot",null))}get host(){return r(this)}static get watchers(){return{bodyData:["arrayDataWatcher"]}}};l.style=a;export{l as sdds_table_body};
-//# sourceMappingURL=p-479b1c4e.entry.js.map

package/dist/tegel/p-479b1c4e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tableBodyCss","relevantTableProps","TableBody","this","uncheckAll","mainCheckboxStatus","internalSddsMainCheckboxChange","emit","tableId","internalSddsCheckboxChange","selectedDataExporter","selectedRows","host","getElementsByClassName","multiselectArray","j","length","rowCells","getElementsByTagName","selectedObject","i","currentCellKey","getAttribute","currentCellValue","push","multiselectArrayJSON","JSON","stringify","bodyCheckBoxClicked","numberOfRows","numberOfRowsSelected","dummyData","arrayDataWatcher","newValue","innerBodyData","parse","bodyDataManipulated","bodyDataOriginal","internalSddsPropChangeListener","event","detail","changed","filter","changedProp","includes","forEach","Error","static","key","order","innerSort","a","b","hasOwnProperty","varA","toUpperCase","varB","comparison","sortData","keyValue","sortingDirection","disableSortingFunction","enableMultiselect","sort","compareValues","updateOptionsContent","receivedID","receivedKeyValue","receivedSortingDirection","headCheckboxListener","bodyCheckboxListener","searchFunction","searchTerm","disableFilteringFunction","dataRowsFiltering","querySelectorAll","enablePaginationTableBody","tempPaginationDisable","item","cells","cellValuesArray","cellItem","cellValue","toLowerCase","matchCounter","find","element","classList","remove","add","disableAllSorting","internalSddsSortingChange","dataRowsHidden","showNoResultsMessage","sddsFilterListener","connectedCallback","tableEl","closest","componentWillLoad","tablePropName","enableDummyData","bodyData","componentWillRender","headerColumnsNo","parentElement","querySelector","children","enableExpandableRows","columnsNumber","render","h","Host","map","row","Object","keys","cellData","class","colSpan"],"sources":["./src/components/data-table/table-body/table-body.scss?tag=sdds-table-body","./src/components/data-table/table-body/table-body.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\nsdds-table-body {\n  @include sdds-box-sizing;\n\n  display: table-row-group;\n\n  .sdds-table__info-message {\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","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport dummyData from './dummy-data.json';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n];\n\n@Component({\n  tag: 'sdds-table-body',\n  styleUrl: 'table-body.scss',\n  shadow: false,\n})\nexport class TableBody {\n  /** Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term */\n  @Prop() disableFilteringFunction: boolean = false;\n\n  /** Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting */\n  @Prop() disableSortingFunction: boolean = false;\n\n  /** Prop to pass JSON string which enables automatic rendering of table rows and cells  */\n  @Prop() bodyData: any;\n\n  /** Prop for showcase of rendering JSON in body-data, just for presentation purposes */\n  @Prop() enableDummyData: boolean = false;\n\n  @State() dummyData: any = JSON.stringify(dummyData);\n\n  @Element() host: HTMLElement;\n\n  @State() rowsPerPage: number = 1;\n\n  @State() enableMultiselect: boolean = false;\n\n  @State() enablePaginationTableBody: boolean = false;\n\n  @State() enableExpandableRows: boolean = true;\n\n  @State() innerBodyData = [];\n\n  @State() bodyDataManipulated = [];\n\n  @State() bodyDataOriginal = [];\n\n  @State() multiselectArray = [];\n\n  @State() multiselectArrayJSON: string;\n\n  @State() mainCheckboxStatus: boolean = false;\n\n  @State() columnsNumber: number = 0;\n\n  @State() disableAllSorting: boolean = false;\n\n  @State() numberOfPages: number = 0;\n\n  @State() paginationValue: number = 1;\n\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() showNoResultsMessage: boolean = false;\n\n  @State() tableId: string = '';\n\n  tableEl: HTMLSddsTableElement;\n\n  @Watch('bodyData')\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.innerBodyData = JSON.parse(newValue);\n    } else {\n      this.innerBodyData = newValue;\n    }\n    this.bodyDataManipulated = [...this.innerBodyData];\n    this.bodyDataOriginal = [...this.innerBodyData];\n  }\n\n  /** @internal Event that sends unique table identifier and enable/disable status for sorting functionality */\n  @Event({\n    eventName: 'internalSddsSortingChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsSortingChange: EventEmitter<any>;\n\n  /** @internal Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled */\n  @Event({\n    eventName: 'internalSddsCheckboxChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsCheckboxChange: EventEmitter<any>;\n\n  /** @internal Sends unique table identifier and status if mainCheckbox should change its state based on selection status of single rows when multiselect feature is used */\n  @Event({\n    eventName: 'internalSddsMainCheckboxChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsMainCheckboxChange: EventEmitter<any>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\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  static compareValues(key, order = 'asc') {\n    return function innerSort(a, b) {\n      // eslint-disable-next-line no-prototype-builtins\n      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {\n        // property doesn't exist on either object\n        return 0;\n      }\n\n      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];\n      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];\n\n      let comparison = 0;\n      if (varA > varB) {\n        comparison = 1;\n      } else if (varA < varB) {\n        comparison = -1;\n      }\n      return order === 'desc' ? comparison * -1 : comparison;\n    };\n  }\n\n  uncheckAll = () => {\n    this.mainCheckboxStatus = false;\n    this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n    this.internalSddsCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n  };\n\n  sortData(keyValue, sortingDirection) {\n    if (!this.disableSortingFunction) {\n      if (this.enableMultiselect) {\n        // Uncheck all checkboxes as state of checkbox is lost on sorting. Do it only in case multiSelect is True.\n        this.uncheckAll();\n      }\n\n      // use spread operator to make enable sorting and modifying array, same as using .slice()\n      this.bodyDataManipulated = [...this.bodyDataManipulated];\n      this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));\n    }\n  }\n\n  // Listen to sortColumnData from data-table-header-element - TODO\n  @Listen('sddsSortChange', { target: 'body' })\n  updateOptionsContent(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;\n    if (this.tableId === receivedID) {\n      this.sortData(receivedKeyValue, receivedSortingDirection);\n    }\n  }\n\n  selectedDataExporter = () => {\n    const selectedRows = this.host.getElementsByClassName('sdds-table__row--selected');\n\n    this.multiselectArray = [];\n    for (let j = 0; j < selectedRows.length; j++) {\n      const rowCells = selectedRows[j].getElementsByTagName('sdds-body-cell');\n      const selectedObject = {};\n      for (let i = 0; i < rowCells.length; i++) {\n        const currentCellKey = rowCells[i].getAttribute('cell-key');\n        const currentCellValue = rowCells[i].getAttribute('cell-value');\n        selectedObject[currentCellKey] = currentCellValue;\n      }\n      this.multiselectArray.push(selectedObject);\n    }\n    this.multiselectArrayJSON = JSON.stringify(this.multiselectArray);\n  };\n\n  @Listen('internalSddsMainCheckboxChange', { target: 'body' }) // -\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      [, this.mainCheckboxStatus] = event.detail;\n      this.selectedDataExporter();\n    }\n  }\n\n  bodyCheckBoxClicked = () => {\n    const numberOfRows = this.host.getElementsByClassName('sdds-table__row').length;\n\n    const numberOfRowsSelected = this.host.getElementsByClassName(\n      'sdds-table__row--selected',\n    ).length;\n\n    this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;\n\n    this.internalSddsMainCheckboxChange.emit([this.tableId, this.mainCheckboxStatus]);\n\n    this.selectedDataExporter();\n  };\n\n  // No need to read the value, event is here just to trigger another function\n  @Listen('internalSddsRowChange', { target: 'body' })\n  bodyCheckboxListener() {\n    this.bodyCheckBoxClicked();\n  }\n\n  searchFunction(searchTerm) {\n    if (!this.disableFilteringFunction) {\n      /*\n      // Logic for filtering JSON data on all columns\n      // Really nice solution, do not delete, might be needed in future\n      // Reason to go with upper one is not to lose selected state on checkboxes\n      if (searchTerm.length > 0) {\n        this.bodyDataManipulated = this.bodyDataOriginal.filter((option) =>\n          Object.keys(option).some(\n            (key) =>\n              String(option[key] ?? '')\n                .toLowerCase()\n                .indexOf(searchTerm) >= 0\n          )\n        );\n      } else {\n        this.bodyDataManipulated = this.bodyDataOriginal;\n      }\n  */\n\n      // grab all rows in body\n      const dataRowsFiltering = this.host.querySelectorAll('sdds-table-body-row');\n\n      if (searchTerm.length > 0) {\n        if (this.enablePaginationTableBody) {\n          this.tempPaginationDisable = true;\n        }\n\n        dataRowsFiltering.forEach((item) => {\n          const cells = item.querySelectorAll('sdds-body-cell');\n          const cellValuesArray = [];\n\n          // go through cells and save cell-values in array\n          cells.forEach((cellItem) => {\n            const cellValue = cellItem.getAttribute('cell-value').toLowerCase();\n            cellValuesArray.push(cellValue);\n          });\n\n          // iterate over array of values and see if one matches search string\n          const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));\n\n          // if matches, show parent row, otherwise hide the row\n          if (matchCounter) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        });\n\n        this.disableAllSorting = true;\n        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);\n\n        const dataRowsHidden = this.host.querySelectorAll('.sdds-table__row--hidden');\n\n        // If same, info message will be shown\n        this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;\n      } else {\n        if (this.enablePaginationTableBody) {\n          this.tempPaginationDisable = false;\n        }\n\n        // Check if pagination is ON in order to prevent showing all rows\n        if (this.enablePaginationTableBody) {\n          // TODO: EMIT PAGINATION\n        } else {\n          dataRowsFiltering.forEach((item) => {\n            item.classList.remove('sdds-table__row--hidden');\n          });\n        }\n\n        this.disableAllSorting = false;\n        this.internalSddsSortingChange.emit([this.tableId, this.disableAllSorting]);\n      }\n    }\n  }\n\n  // Listen to sddsFilter from tableToolbar component\n  @Listen('sddsFilter', { target: 'body' })\n  sddsFilterListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.searchFunction(event.detail[1]);\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    if (this.enableDummyData) {\n      this.bodyData = this.dummyData;\n    } else if (this.bodyData) {\n      this.arrayDataWatcher(this.bodyData);\n    }\n  }\n\n  componentWillRender() {\n    const headerColumnsNo =\n      this.host.parentElement.querySelector('sdds-table-header').children.length;\n\n    // multiselect and expended features requires one extra column for controls...\n    if (this.enableMultiselect || this.enableExpandableRows) {\n      this.columnsNumber = headerColumnsNo + 1;\n    } else {\n      this.columnsNumber = headerColumnsNo;\n    }\n  }\n\n  render() {\n    return (\n      <Host data-selected-rows={this.multiselectArrayJSON}>\n        {this.bodyDataManipulated.map((row) => (\n          <sdds-table-body-row>\n            {Object.keys(row).map((cellData) => (\n              <sdds-body-cell cell-key={cellData} cell-value={row[cellData]}></sdds-body-cell>\n            ))}\n          </sdds-table-body-row>\n        ))}\n        {this.showNoResultsMessage && (\n          <tr>\n            <td class=\"sdds-table__info-message\" colSpan={this.columnsNumber}>\n              Unfortunately, no data matches your search term &#128533;\n            </td>\n          </tr>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/tegel/p-4dee91c9.entry.js

@@ -1,2 +0,0 @@
-import{r as o,h as e,H as s}from"./p-387e1798.js";const t=':host{box-sizing:border-box;display:block;position:relative;z-index:200}:host *{box-sizing:border-box}:host a{min-width:142px;display:block;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none;border-right:1px solid;border-right-color:transparent;color:var(--sdds-folder-tab-color);border-top:2px solid var(--sdds-folder-tab-background);background-color:var(--sdds-folder-tab-background)}:host a .label{opacity:var(--sdds-folder-tab-color-opacity)}:host a.selected{background-color:var(--sdds-folder-tab-background-selected);border-top:2px solid var(--sdds-folder-tab-border-selected)}:host a.selected::before{content:" ";background-color:var(--sdds-folder-tab-background-selected);width:1px;top:0;bottom:0;left:-1px;display:block;position:absolute}:host a.selected .label{opacity:var(--sdds-folder-tab-color-opacity-selected)}:host a:not(.selected){border-right-color:var(--sdds-folder-tab-divider-color)}:host a:not(.selected):hover{background-color:var(--sdds-folder-tab-background-hover)}:host a:not(.selected):hover .label{opacity:var(--sdds-folder-tab-color-opacity-hover)}:host a.disabled{pointer-events:none}:host a.disabled .label{opacity:var(--sdds-folder-tab-color-opacity-disabled)}:host a.disabled:focus-visible{outline:none}:host a.disabled:focus-visible .label{opacity:var(--sdds-folder-tab-color-opacity-disabled)}:host a:focus-visible{outline:2px solid var(--sdds-blue-400);outline-offset:-2px;opacity:var(--sdds-folder-tab-color-opacity-focus)}:host(.last) a:not(.selected){border-right-color:transparent}';const d=class{constructor(e){o(this,e);this.disabled=false;this.selected=false;this.href=undefined;this.target="_self";this.rel="noopener";this.tabWidth=undefined}async setTabWidth(o){this.tabWidth=o}render(){return e(s,{role:"listitem"},e("a",{style:{width:`${this.tabWidth}px`},class:`\n        ${this.selected?"selected":""}\n        ${this.disabled?"disabled":""}\n        `,href:this.href,target:this.target,rel:this.rel},e("div",{class:"label"},e("slot",{name:"label"}))))}};d.style=t;export{d as sdds_folder_tabs_link};
-//# sourceMappingURL=p-4dee91c9.entry.js.map

package/dist/tegel/p-4dee91c9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sddsFolderTabsLinkCss","SddsFolderTabsLink","async","width","this","tabWidth","render","h","Host","role","style","class","selected","disabled","href","target","rel","name"],"sources":["./src/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.scss?tag=sdds-folder-tabs-link&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: block;\n  position: relative;\n  z-index: z(tab);\n\n  a {\n    min-width: 142px;\n    display: block;\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    cursor: pointer;\n    padding: 16px;\n    white-space: nowrap;\n    text-decoration: none;\n    text-align: left;\n    outline: none;\n    border: none;\n    border-right: 1px solid;\n    border-right-color: transparent;\n    color: var(--sdds-folder-tab-color);\n    border-top: 2px solid var(--sdds-folder-tab-background);\n    background-color: var(--sdds-folder-tab-background);\n\n    .label {\n      opacity: var(--sdds-folder-tab-color-opacity);\n    }\n\n    &.selected {\n      background-color: var(--sdds-folder-tab-background-selected);\n      border-top: 2px solid var(--sdds-folder-tab-border-selected);\n\n      &::before {\n        content: ' ';\n        background-color: var(--sdds-folder-tab-background-selected);\n        width: 1px;\n        top: 0;\n        bottom: 0;\n        left: -1px;\n        display: block;\n        position: absolute;\n      }\n\n      .label {\n        opacity: var(--sdds-folder-tab-color-opacity-selected);\n      }\n    }\n\n    &:not(.selected) {\n      border-right-color: var(--sdds-folder-tab-divider-color);\n\n      &:hover {\n        background-color: var(--sdds-folder-tab-background-hover);\n\n        .label {\n          opacity: var(--sdds-folder-tab-color-opacity-hover);\n        }\n      }\n    }\n\n    &.disabled {\n      pointer-events: none;\n\n      .label {\n        opacity: var(--sdds-folder-tab-color-opacity-disabled);\n      }\n\n      &:focus-visible {\n        .label {\n          opacity: var(--sdds-folder-tab-color-opacity-disabled);\n        }\n\n        outline: none;\n      }\n    }\n\n    &:focus-visible {\n      @include sdds-focus-state;\n\n      opacity: var(--sdds-folder-tab-color-opacity-focus);\n    }\n  }\n}\n\n:host(.last) {\n  a:not(.selected) {\n    border-right-color: transparent;\n  }\n}\n","import { Component, Host, h, Prop, State, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-folder-tabs-link',\n  styleUrl: 'sdds-folder-tabs-link.scss',\n  shadow: true,\n})\nexport class SddsFolderTabsLink {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  @State() tabWidth: number;\n\n  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */\n  @Method()\n  async setTabWidth(width: number) {\n    this.tabWidth = width;\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          style={{ width: `${this.tabWidth}px` }}\n          class={`\n        ${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}\n        `}\n          href={this.href}\n          target={this.target}\n          rel={this.rel}\n        >\n          <div class=\"label\">\n            <slot name=\"label\"></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAwB,qnD,MCOjBC,EAAkB,M,uCAED,M,cAGA,M,gCAM8B,Q,SAGpC,W,wBAMtBC,kBAAkBC,GAChBC,KAAKC,SAAWF,C,CAGlBG,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,KACEG,MAAO,CAAEP,MAAO,GAAGC,KAAKC,cACxBM,MAAO,aACPP,KAAKQ,SAAW,WAAa,eAC7BR,KAAKS,SAAW,WAAa,eAE7BC,KAAMV,KAAKU,KACXC,OAAQX,KAAKW,OACbC,IAAKZ,KAAKY,KAEVT,EAAA,OAAKI,MAAM,SACTJ,EAAA,QAAMU,KAAK,Y"}

package/dist/tegel/p-52ecce88.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as d,H as e,g as a}from"./p-387e1798.js";const o=":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .sdds-table__row,:host .sdds-table__row-extend{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:hover,:host .sdds-table__row-extend:hover{background-color:var(--sdds-data-table-body-row-background-hover)}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .sdds-table__expand-control-container .sdds-table__expand-input{all:unset;position:absolute;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .sdds-table__expand-control-container .sdds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__row-expand{display:none;transition:background-color 200ms ease}:host .sdds-table__row-expand .sdds-table__cell-expand{padding:16px 16px 16px 66px;color:var(--sdds-data-table-color)}:host(.sdds-table__row-expand--active) .sdds-table__row{background-color:var(--sdds-data-table-body-row-background-selected)}:host(.sdds-table__row-expand--active) .sdds-table__expand-control-container .sdds-expendable-row-icon{transform:rotate(180deg)}:host(.sdds-table__row-expand--active) .sdds-table__row-expand{background-color:var(--sdds-data-table-body-row-background-selected);display:table-row}:host(.sdds-table__compact) .sdds-table__expand-control-container{height:30px}:host(.sdds-table__compact) .sdds-table__row-expand .sdds-table__cell-expand{padding:8px 16px 8px 66px}:host(.sdds-table--divider) .sdds-table__cell--expand{border-right:1px solid var(--sdds-data-table-divider)}";const l=["verticalDividers","compactDesign","noMinWidth","modeVariant"];const n=class{constructor(d){s(this,d);this.internalSddsRowExpanded=t(this,"internalSddsRowExpanded",7);this.internalSddsPagination=t(this,"internalSddsPagination",7);this.colSpan=null;this.isExpanded=false;this.tableId="";this.columnsNumber=null;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.modeVariant=null}internalSddsPropChangeListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>l.includes(s))).forEach((t=>{if(typeof this[t]==="undefined"){throw new Error(`Table prop is not supported: ${t}`)}this[t]=s.detail[t]}))}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){l.forEach((s=>{this[s]=this.tableEl[s]}))}componentDidLoad(){this.internalSddsPagination.emit(this.tableId)}componentWillRender(){if(this.colSpan!==null){this.columnsNumber=this.colSpan}else{this.columnsNumber=this.tableEl.querySelector("sdds-table-header").childElementCount+1}}sendValue(){this.internalSddsRowExpanded.emit([this.tableId,this.isExpanded])}onChangeHandler(s){this.isExpanded=s.currentTarget.checked===true;this.sendValue()}render(){return d(e,{class:{"sdds-table__row":true,"sdds-table__row-expand--active":this.isExpanded,"sdds-table__compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-mode-variant-primary":this.modeVariant==="primary","sdds-mode-variant-secondary":this.modeVariant==="secondary"}},d("tr",{class:"sdds-table__row"},d("td",{class:"sdds-table__cell sdds-table__cell--expand"},d("label",{class:"sdds-table__expand-control-container"},d("input",{class:"sdds-table__expand-input",type:"checkbox",onChange:s=>this.onChangeHandler(s),checked:this.isExpanded}),d("span",{class:"sdds-expendable-row-icon"},d("svg",{fill:"none",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},d("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z",fill:"currentColor"}))))),d("slot",null)),d("tr",{class:"sdds-table__row-expand"},d("td",{class:"sdds-table__cell-expand",colSpan:this.columnsNumber},d("slot",{name:"expand-row"}))))}get host(){return a(this)}};n.style=o;export{n as sdds_table_body_row_expandable};
-//# sourceMappingURL=p-52ecce88.entry.js.map

package/dist/tegel/p-52ecce88.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tableBodyRowExpandableCss","relevantTableProps","TableBodyRowExpandable","internalSddsPropChangeListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","componentDidLoad","internalSddsPagination","emit","componentWillRender","colSpan","columnsNumber","querySelector","childElementCount","sendValue","internalSddsRowExpanded","isExpanded","onChangeHandler","currentTarget","checked","render","h","Host","class","compactDesign","verticalDividers","modeVariant","type","onChange","fill","xmlns","viewBox","d","name"],"sources":["./src/components/data-table/table-body-row-expandable/table-body-row-expandable.scss?tag=sdds-table-body-row-expandable&encapsulation=shadow","./src/components/data-table/table-body-row-expandable/table-body-row-expandable.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n@import '../../../mixins/focus-state';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: contents;\n\n  .sdds-table__row,\n  .sdds-table__row-extend {\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\n  .sdds-table__row:hover,\n  .sdds-table__row-extend:hover {\n    background-color: var(--sdds-data-table-body-row-background-hover);\n  }\n\n  .sdds-table__expand-control-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 46px;\n    cursor: pointer;\n    padding: 0 16px;\n    position: relative;\n\n    .sdds-table__expand-input {\n      all: unset;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      cursor: pointer;\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n    }\n\n    .sdds-expendable-row-icon {\n      height: 16px;\n      width: 16px;\n      transition: transform 200ms ease;\n      transform: rotate(0);\n    }\n  }\n\n  .sdds-table__row-expand {\n    display: none;\n    transition: background-color 200ms ease;\n\n    .sdds-table__cell-expand {\n      padding: 16px 16px 16px 66px;\n      color: var(--sdds-data-table-color);\n    }\n  }\n}\n\n:host(.sdds-table__row-expand--active) {\n  .sdds-table__row {\n    background-color: var(--sdds-data-table-body-row-background-selected);\n  }\n\n  .sdds-table__expand-control-container {\n    .sdds-expendable-row-icon {\n      transform: rotate(180deg);\n    }\n  }\n\n  .sdds-table__row-expand {\n    background-color: var(--sdds-data-table-body-row-background-selected);\n    display: table-row;\n  }\n}\n\n// test\n:host(.sdds-table__compact) {\n  .sdds-table__expand-control-container {\n    height: 30px;\n  }\n\n  .sdds-table__row-expand {\n    .sdds-table__cell-expand {\n      padding: 8px 16px 8px 66px;\n    }\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__cell--expand {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n  'modeVariant',\n];\n@Component({\n  tag: 'sdds-table-body-row-expandable',\n  styleUrl: 'table-body-row-expandable.scss',\n  shadow: true,\n})\nexport class TableBodyRowExpandable {\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() colSpan: number = null;\n\n  @State() isExpanded: boolean = false;\n\n  @State() tableId: string = '';\n\n  @State() columnsNumber: number = null;\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  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** @internal Sends out expanded status which is used by the table header component */\n  @Event({\n    eventName: 'internalSddsRowExpanded',\n    bubbles: true,\n    cancelable: true,\n    composed: true,\n  })\n  internalSddsRowExpanded: EventEmitter<any>;\n\n  /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'internalSddsPagination',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsPagination: EventEmitter<string>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\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\n  componentDidLoad() {\n    this.internalSddsPagination.emit(this.tableId);\n  }\n\n  componentWillRender() {\n    if (this.colSpan !== null) {\n      this.columnsNumber = this.colSpan;\n    } else {\n      this.columnsNumber = this.tableEl.querySelector('sdds-table-header').childElementCount + 1;\n    }\n  }\n\n  sendValue() {\n    this.internalSddsRowExpanded.emit([this.tableId, this.isExpanded]);\n  }\n\n  onChangeHandler(event) {\n    this.isExpanded = event.currentTarget.checked === true;\n    this.sendValue();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__row-expand--active': this.isExpanded,\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        <tr class=\"sdds-table__row\">\n          <td class=\"sdds-table__cell sdds-table__cell--expand\">\n            <label class=\"sdds-table__expand-control-container\">\n              <input\n                class=\"sdds-table__expand-input\"\n                type=\"checkbox\"\n                onChange={(event) => this.onChangeHandler(event)}\n                checked={this.isExpanded}\n              />\n              <span class=\"sdds-expendable-row-icon\">\n                <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                  <path\n                    fill-rule=\"evenodd\"\n                    clip-rule=\"evenodd\"\n                    d=\"M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </span>\n            </label>\n          </td>\n          <slot />\n        </tr>\n\n        <tr class=\"sdds-table__row-expand\">\n          <td class=\"sdds-table__cell-expand\" colSpan={this.columnsNumber}>\n            <slot name=\"expand-row\" />\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAA4B,+6DCalC,MAAMC,EAA6D,CACjE,mBACA,gBACA,aACA,e,MAOWC,EAAsB,M,sKAEP,K,gBAEK,M,aAEJ,G,mBAEM,K,sBAEI,M,mBAEH,M,gBAEH,M,iBAEiB,I,CAyBhDC,+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,EAKrDI,oBACET,KAAKU,QAAUV,KAAKW,KAAKC,QAAQ,cACjCZ,KAAKC,QAAUD,KAAKU,QAAQT,O,CAG9BY,oBACEjB,EAAmBW,SAASO,IAC1Bd,KAAKc,GAAiBd,KAAKU,QAAQI,EAAc,G,CAIrDC,mBACEf,KAAKgB,uBAAuBC,KAAKjB,KAAKC,Q,CAGxCiB,sBACE,GAAIlB,KAAKmB,UAAY,KAAM,CACzBnB,KAAKoB,cAAgBpB,KAAKmB,O,KACrB,CACLnB,KAAKoB,cAAgBpB,KAAKU,QAAQW,cAAc,qBAAqBC,kBAAoB,C,EAI7FC,YACEvB,KAAKwB,wBAAwBP,KAAK,CAACjB,KAAKC,QAASD,KAAKyB,Y,CAGxDC,gBAAgB3B,GACdC,KAAKyB,WAAa1B,EAAM4B,cAAcC,UAAY,KAClD5B,KAAKuB,W,CAGPM,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,kBAAmB,KACnB,iCAAkChC,KAAKyB,WACvC,sBAAuBzB,KAAKiC,cAC5B,sBAAuBjC,KAAKkC,iBAC5B,4BAA6BlC,KAAKmC,cAAgB,UAClD,8BAA+BnC,KAAKmC,cAAgB,cAGtDL,EAAA,MAAIE,MAAM,mBACRF,EAAA,MAAIE,MAAM,6CACRF,EAAA,SAAOE,MAAM,wCACXF,EAAA,SACEE,MAAM,2BACNI,KAAK,WACLC,SAAWtC,GAAUC,KAAK0B,gBAAgB3B,GAC1C6B,QAAS5B,KAAKyB,aAEhBK,EAAA,QAAME,MAAM,4BACVF,EAAA,OAAKQ,KAAK,OAAOC,MAAM,6BAA6BC,QAAQ,aAC1DV,EAAA,oBACY,UAAS,YACT,UACVW,EAAE,oKACFH,KAAK,qBAMfR,EAAA,cAGFA,EAAA,MAAIE,MAAM,0BACRF,EAAA,MAAIE,MAAM,0BAA0Bb,QAASnB,KAAKoB,eAChDU,EAAA,QAAMY,KAAK,iB"}

package/dist/tegel/p-5812ec42.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as d}from"./p-387e1798.js";const s='.textfield-input-lg.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.textfield-input-lg.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-lg.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-lg.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-md.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.textfield-input-md.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-md.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-md.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-md.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-md.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-sm.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.textfield-input-sm.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-sm.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-sm.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-container.sc-sdds-textfield{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-textfield-background);border-bottom:1px solid var(--sdds-textfield-border-bottom);transition:border-bottom-color 200ms ease}.textfield-container.sc-sdds-textfield:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.form-textfield-md.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:48px}.form-textfield-sm.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:40px}.textfield-input-container.sc-sdds-textfield{position:relative;width:100%}.textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textfield-label-color)}.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-textfield-label-inside-color);left:16px}.form-textfield.sc-sdds-textfield{display:block;min-width:208px}.form-textfield-nomin.sc-sdds-textfield{min-width:auto}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:20px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.textfield-bar.sc-sdds-textfield{position:absolute;width:100%}.textfield-bar.sc-sdds-textfield::before,.textfield-bar.sc-sdds-textfield::after{content:"";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:46px}.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:40px}.textfield-bar.sc-sdds-textfield::before{left:50%}.textfield-bar.sc-sdds-textfield::after{right:50%}.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{width:50%}.textfield-helper.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textfield-helper)}.textfield-helper.sc-sdds-textfield .textfield-textcounter.sc-sdds-textfield{margin-left:auto}.form-textfield-disabled.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:transparent}.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield,.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-disabled)}.form-textfield-disabled.sc-sdds-textfield .textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-icon__readonly.sc-sdds-textfield{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.textfield-icon__readonly-label.sc-sdds-textfield{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--sdds-textfield-icon-read-only-label-background)}.form-textfield-readonly.sc-sdds-textfield{pointer-events:none}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield:hover~.textfield-icon__readonly-label.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-input.sc-sdds-textfield{padding-right:54px;background-color:transparent}.form-textfield-success.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.form-textfield-error.sc-sdds-textfield .textfield-helper.sc-sdds-textfield{color:var(--sdds-textfield-helper-error)}.form-textfield-error.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{background:var(--sdds-textfield-bar-error)}.textfield-helper-error-state.sc-sdds-textfield{display:flex;gap:8px;flex-wrap:nowrap}.textfield-textcounter.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.textfield-textcounter.sc-sdds-textfield .textfield-textcounter-divider.sc-sdds-textfield{color:var(--sdds-textfield-textcounter-divider)}.textfield-slot-wrap-prefix.sc-sdds-textfield,.textfield-slot-wrap-suffix.sc-sdds-textfield{align-self:center;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin:0 0 0 14px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-prefix.sc-sdds-textfield-s>:not(sdds-icon),.textfield-slot-wrap-suffix.sc-sdds-textfield-s>:not(sdds-icon){margin:0 0 0 2px}.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield,.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-error)}.textfield-slot-wrap-suffix.sc-sdds-textfield{margin:0 14px 0 0}.textfield-slot-wrap-suffix.sc-sdds-textfield-s>:not(sdds-icon){margin:0 2px 0 0}';const i=class{constructor(d){e(this,d);this.sddsChange=t(this,"sddsChange",6);this.sddsInput=t(this,"sddsInput",6);this.sddsFocus=t(this,"sddsFocus",6);this.sddsBlur=t(this,"sddsBlur",6);this.type="text";this.labelPosition="no-label";this.label="";this.helper=undefined;this.placeholder="";this.value="";this.disabled=false;this.readOnly=false;this.size="lg";this.modeVariant=null;this.noMinWidth=false;this.name="";this.state="default";this.maxLength=undefined;this.autofocus=false;this.focusInput=undefined}handleChange(e){this.sddsChange.emit(e)}handleInput(e){this.sddsInput.emit(e);this.value=e.target.value}handleFocus(e){this.textInput.focus();this.focusInput=true;this.sddsFocus.emit(e)}handleBlur(e){this.focusInput=false;this.sddsBlur.emit(e)}render(){var e;return d("div",{class:`\n        ${this.noMinWidth?"form-textfield-nomin":""}\n        ${this.focusInput&&!this.disabled?"form-textfield textfield-focus":" form-textfield"}\n        ${this.value?"textfield-data":""}\n        ${this.labelPosition==="inside"&&this.size!=="sm"?"textfield-container-label-inside":""}\n        ${this.disabled?"form-textfield-disabled":""}\n        ${this.readOnly?"form-textfield-readonly":""}\n        ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}\n        ${this.size==="md"?"form-textfield-md":""}\n        ${this.size==="sm"?"form-textfield-sm":""}\n        ${this.state==="error"||this.state==="success"?`form-textfield-${this.state}`:""}\n        `},this.labelPosition==="outside"&&d("div",{class:"textfield-label-outside"},d("div",null,this.label)),d("div",{onClick:()=>this.textInput.focus(),class:"textfield-container"},d("div",{class:`textfield-slot-wrap-prefix textfield-${this.state}`},d("slot",{name:"prefix"})),d("div",{class:"textfield-input-container"},d("input",{ref:e=>this.textInput=e,class:`textfield-input textfield-input-${this.size}`,type:this.type,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,autofocus:this.autofocus,maxlength:this.maxLength,name:this.name,onInput:e=>this.handleInput(e),onChange:e=>this.handleChange(e),onFocus:e=>{if(!this.readOnly){this.handleFocus(e)}},onBlur:e=>{if(!this.readOnly){this.handleBlur(e)}}}),this.labelPosition==="inside"&&this.size!=="sm"&&d("label",{class:"textfield-label-inside"},this.label)),d("div",{class:"textfield-bar"}),d("div",{class:`textfield-slot-wrap-suffix textfield-${this.state}`},d("slot",{name:"suffix"})),d("span",{class:"textfield-icon__readonly"},d("sdds-icon",{name:"edit_inactive",size:"20px"})),d("span",{class:"textfield-icon__readonly-label"},"This field is non-editable")),d("div",{class:"textfield-helper"},this.state==="error"&&d("div",{class:"textfield-helper-error-state"},d("sdds-icon",{name:"error",size:"16px"}),this.helper),this.state!=="error"&&this.helper,this.maxLength>0&&d("div",{class:"textfield-textcounter"},this.value===null?0:(e=this.value)===null||e===void 0?void 0:e.length,d("span",{class:"textfield-textcounter-divider"}," / "),this.maxLength)))}};i.style=s;export{i as sdds_textfield};
-//# sourceMappingURL=p-5812ec42.entry.js.map

package/dist/tegel/p-5812ec42.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textfieldCss","Textfield","handleChange","event","this","sddsChange","emit","handleInput","sddsInput","value","target","handleFocus","textInput","focus","focusInput","sddsFocus","handleBlur","sddsBlur","render","h","class","noMinWidth","disabled","labelPosition","size","readOnly","modeVariant","state","label","onClick","name","ref","inputEl","type","readonly","placeholder","autofocus","maxlength","maxLength","onInput","onChange","onFocus","onBlur","helper","_a","length"],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield&encapsulation=scoped","./src/components/textfield/textfield.tsx"],"sourcesContent":["@mixin textfield-base {\n  all: unset;\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-textfield-color);\n  background-color: var(--sdds-textfield-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textfield-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--sdds-textfield-background-disabled);\n    color: var(--sdds-textfield-color-disabled);\n\n    &::placeholder {\n      color: var(--sdds-textfield-placeholder-disabled);\n    }\n\n    ~ .textfield-label-inside {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Sizes\n.textfield-input-lg {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.textfield-input-md {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n.textfield-input-sm {\n  @include textfield-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.textfield-container {\n  border-radius: 4px 4px 0 0;\n  display: flex;\n  position: relative;\n  height: 56px;\n  box-sizing: border-box;\n  background-color: var(--sdds-textfield-background);\n  border-bottom: 1px solid var(--sdds-textfield-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  &:hover {\n    border-bottom-color: var(--sdds-textfield-border-bottom-hover);\n  }\n\n  .form-textfield-md & {\n    height: 48px;\n  }\n\n  .form-textfield-sm & {\n    height: 40px;\n  }\n}\n\n.textfield-input-container {\n  position: relative;\n  width: 100%;\n}\n\n//Textfield label\n\n.textfield-label-outside > * {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textfield-label-color);\n}\n\n.textfield-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  position: absolute;\n  pointer-events: none;\n  color: var(--sdds-textfield-label-inside-color);\n  left: 16px;\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n}\n\n@mixin label-inside-transition {\n  transition: 0.1s ease all;\n}\n\n//Form control\n.form-textfield {\n  display: block;\n  min-width: 208px;\n\n  &-nomin {\n    min-width: auto;\n  }\n}\n\n//Textfield container with label inside\n//Handling position, focus and transition for label inside\n.form-textfield.textfield-container-label-inside {\n  .textfield-input-lg {\n    padding-top: var(--sdds-spacing-element-24);\n    padding-bottom: 15px;\n\n    ~ .textfield-label-inside {\n      top: 20px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .textfield-input-md {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .textfield-input-sm {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  &.textfield-focus,\n  &.textfield-data {\n    .textfield-input-sm ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .textfield-input-md ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .textfield-input-lg ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 12px;\n    }\n  }\n}\n\n//Textfield bottom bar when in focus\n.textfield-bar {\n  position: absolute;\n  width: 100%;\n\n  &::before,\n  &::after {\n    content: '';\n    height: 2px;\n    top: 54px;\n    width: 0;\n    position: absolute;\n    background: var(--sdds-textfield-bar);\n    transition: 0.35s ease all;\n\n    .form-textfield-md & {\n      top: 46px;\n    }\n\n    .form-textfield-sm & {\n      top: 40px;\n    }\n  }\n\n  &::before {\n    left: 50%;\n  }\n\n  &::after {\n    right: 50%;\n  }\n\n  .textfield-focus &::before,\n  .textfield-focus &::after {\n    width: 50%;\n  }\n}\n\n//Helper text\n.textfield-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n\n  & .textfield-textcounter {\n    margin-left: auto;\n  }\n\n  flex-basis: 100%;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textfield-helper);\n}\n\n//Disabled state\n.form-textfield-disabled {\n  .textfield-container {\n    border-bottom-color: transparent;\n  }\n\n  .textfield-slot-wrap-prefix,\n  .textfield-slot-wrap-suffix {\n    > * {\n      color: var(--sdds-textfield-ps-color-disabled);\n    }\n  }\n\n  .textfield-label-outside {\n    > * {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Read only state\n\n.textfield-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textfield-icon-read-only-label-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n    background-color: var(--sdds-textfield-icon-read-only-label-background);\n  }\n}\n\n.form-textfield-readonly {\n  pointer-events: none;\n\n  .textfield-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .textfield-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n}\n\n//Success state\n.form-textfield-success {\n  .textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-success);\n  }\n}\n\n//Error State\n.form-textfield-error {\n  .textfield-helper {\n    color: var(--sdds-textfield-helper-error);\n  }\n\n  .textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-error);\n  }\n\n  .textfield-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-textfield-bar-error);\n    }\n  }\n}\n\n// .textfield-textcounter {\n.textfield-helper-error-state {\n  display: flex;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n.textfield-textcounter {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textfield-textcounter);\n  float: right;\n\n  & .textfield-textcounter-divider {\n    // @include type-style('detail-05');\n    color: var(--sdds-textfield-textcounter-divider);\n  }\n}\n\n.textfield-slot-wrap-prefix,\n.textfield-slot-wrap-suffix {\n  align-self: center;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  margin: 0 0 0 14px;\n  color: var(--sdds-textfield-ps-color);\n\n  &::slotted(:not(sdds-icon)) {\n    margin: 0 0 0 2px;\n  }\n\n  &.textfield-error {\n    color: var(--sdds-textfield-ps-color-error);\n  }\n}\n\n.textfield-slot-wrap-suffix {\n  margin: 0 14px 0 0;\n\n  &::slotted(:not(sdds-icon)) {\n    margin: 0 2px 0 0;\n  }\n}\n","import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textfield',\n  styleUrl: 'textfield.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class Textfield {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'text' | 'password' = 'text';\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Mode variant of the textfield */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textfield */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Input event for the textfield */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textfield */\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.textInput.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the textfield */\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.focusInput = false;\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'form-textfield-nomin' : ''}\n        ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}\n        ${this.value ? 'textfield-data' : ''}\n        ${\n          this.labelPosition === 'inside' && this.size !== 'sm'\n            ? 'textfield-container-label-inside'\n            : ''\n        }\n        ${this.disabled ? 'form-textfield-disabled' : ''}\n        ${this.readOnly ? 'form-textfield-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.size === 'md' ? 'form-textfield-md' : ''}\n        ${this.size === 'sm' ? 'form-textfield-sm' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `form-textfield-${this.state}` : ''}\n        `}\n      >\n        {this.labelPosition === 'outside' && (\n          <div class=\"textfield-label-outside\">\n            <div>{this.label}</div>\n          </div>\n        )}\n        <div onClick={() => this.textInput.focus()} class=\"textfield-container\">\n          <div class={`textfield-slot-wrap-prefix textfield-${this.state}`}>\n            <slot name=\"prefix\" />\n          </div>\n\n          <div class=\"textfield-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={`textfield-input textfield-input-${this.size}`}\n              type={this.type}\n              disabled={this.disabled}\n              readonly={this.readOnly}\n              placeholder={this.placeholder}\n              value={this.value}\n              autofocus={this.autofocus}\n              maxlength={this.maxLength}\n              name={this.name}\n              onInput={(event) => this.handleInput(event)}\n              onChange={(event) => this.handleChange(event)}\n              onFocus={(event) => {\n                if (!this.readOnly) {\n                  this.handleFocus(event);\n                }\n              }}\n              onBlur={(event) => {\n                if (!this.readOnly) {\n                  this.handleBlur(event);\n                }\n              }}\n            />\n\n            {this.labelPosition === 'inside' && this.size !== 'sm' && (\n              <label class=\"textfield-label-inside\">{this.label}</label>\n            )}\n          </div>\n          <div class=\"textfield-bar\"></div>\n\n          <div class={`textfield-slot-wrap-suffix textfield-${this.state}`}>\n            <slot name=\"suffix\" />\n          </div>\n          <span class=\"textfield-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n          </span>\n          <span class=\"textfield-icon__readonly-label\">This field is non-editable</span>\n        </div>\n\n        <div class=\"textfield-helper\">\n          {this.state === 'error' && (\n            <div class=\"textfield-helper-error-state\">\n              <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n              {this.helper}\n            </div>\n          )}\n          {this.state !== 'error' && this.helper}\n\n          {this.maxLength > 0 && (\n            <div class=\"textfield-textcounter\">\n              {this.value === null ? 0 : this.value?.length}\n              <span class=\"textfield-textcounter-divider\"> / </span>\n              {this.maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,02X,MCQRC,EAAS,M,uLAKiC,O,mBAGM,W,WAGnC,G,uCAMM,G,WAGW,G,cAGb,M,cAGA,M,UAGO,K,iBAGY,K,gBAGjB,M,UAGf,G,WAGkC,U,wCAMpB,M,0BAc7BC,aAAaC,GACXC,KAAKC,WAAWC,KAAKH,E,CAavBI,YAAYJ,GACVC,KAAKI,UAAUF,KAAKH,GACpBC,KAAKK,MAAQN,EAAMO,OAAOD,K,CAa5BE,YAAYR,GACVC,KAAKQ,UAAUC,QACfT,KAAKU,WAAa,KAClBV,KAAKW,UAAUT,KAAKH,E,CAatBa,WAAWb,GACTC,KAAKU,WAAa,MAClBV,KAAKa,SAASX,KAAKH,E,CAGrBe,S,MACE,OACEC,EAAA,OACEC,MAAO,aACLhB,KAAKiB,WAAa,uBAAyB,eAC3CjB,KAAKU,aAAeV,KAAKkB,SAAW,iCAAmC,8BACvElB,KAAKK,MAAQ,iBAAmB,eAEhCL,KAAKmB,gBAAkB,UAAYnB,KAAKoB,OAAS,KAC7C,mCACA,eAEJpB,KAAKkB,SAAW,0BAA4B,eAC5ClB,KAAKqB,SAAW,0BAA4B,eAC5CrB,KAAKsB,cAAgB,KAAO,qBAAqBtB,KAAKsB,cAAgB,eACtEtB,KAAKoB,OAAS,KAAO,oBAAsB,eAC3CpB,KAAKoB,OAAS,KAAO,oBAAsB,eAC3CpB,KAAKuB,QAAU,SAAWvB,KAAKuB,QAAU,UAAY,kBAAkBvB,KAAKuB,QAAU,gBAGvFvB,KAAKmB,gBAAkB,WACtBJ,EAAA,OAAKC,MAAM,2BACTD,EAAA,WAAMf,KAAKwB,QAGfT,EAAA,OAAKU,QAAS,IAAMzB,KAAKQ,UAAUC,QAASO,MAAM,uBAChDD,EAAA,OAAKC,MAAO,wCAAwChB,KAAKuB,SACvDR,EAAA,QAAMW,KAAK,YAGbX,EAAA,OAAKC,MAAM,6BACTD,EAAA,SACEY,IAAMC,GAAa5B,KAAKQ,UAAYoB,EACpCZ,MAAO,mCAAmChB,KAAKoB,OAC/CS,KAAM7B,KAAK6B,KACXX,SAAUlB,KAAKkB,SACfY,SAAU9B,KAAKqB,SACfU,YAAa/B,KAAK+B,YAClB1B,MAAOL,KAAKK,MACZ2B,UAAWhC,KAAKgC,UAChBC,UAAWjC,KAAKkC,UAChBR,KAAM1B,KAAK0B,KACXS,QAAUpC,GAAUC,KAAKG,YAAYJ,GACrCqC,SAAWrC,GAAUC,KAAKF,aAAaC,GACvCsC,QAAUtC,IACR,IAAKC,KAAKqB,SAAU,CAClBrB,KAAKO,YAAYR,E,GAGrBuC,OAASvC,IACP,IAAKC,KAAKqB,SAAU,CAClBrB,KAAKY,WAAWb,E,KAKrBC,KAAKmB,gBAAkB,UAAYnB,KAAKoB,OAAS,MAChDL,EAAA,SAAOC,MAAM,0BAA0BhB,KAAKwB,QAGhDT,EAAA,OAAKC,MAAM,kBAEXD,EAAA,OAAKC,MAAO,wCAAwChB,KAAKuB,SACvDR,EAAA,QAAMW,KAAK,YAEbX,EAAA,QAAMC,MAAM,4BACVD,EAAA,aAAWW,KAAK,gBAAgBN,KAAK,UAEvCL,EAAA,QAAMC,MAAM,kCAAgC,+BAG9CD,EAAA,OAAKC,MAAM,oBACRhB,KAAKuB,QAAU,SACdR,EAAA,OAAKC,MAAM,gCACTD,EAAA,aAAWW,KAAK,QAAQN,KAAK,SAC5BpB,KAAKuC,QAGTvC,KAAKuB,QAAU,SAAWvB,KAAKuC,OAE/BvC,KAAKkC,UAAY,GAChBnB,EAAA,OAAKC,MAAM,yBACRhB,KAAKK,QAAU,KAAO,GAAImC,EAAAxC,KAAKK,SAAK,MAAAmC,SAAA,SAAAA,EAAEC,OACvC1B,EAAA,QAAMC,MAAM,iCAA+B,OAC1ChB,KAAKkC,Y"}

package/dist/tegel/p-595c05f4.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,H as s}from"./p-387e1798.js";const a=':host{box-sizing:border-box}:host *{box-sizing:border-box}:host button{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);padding:18px 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}:host button.selected{color:var(--sdds-navigation-tabs-tab-color-selected)}:host button.selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host button .label{padding:8px 4px}:host button:focus-visible{outline:none}:host button:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host button:hover{color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}:host button:hover::after{width:100%}:host button.disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host button.disabled .label{opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host button::after{content:" ";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}:host(.first){margin-left:32px}:host(.last){margin-right:32px}';const i=class{constructor(o){t(this,o);this.disabled=false;this.selected=false}render(){return o(s,{role:"listitem"},o("button",{class:`${this.selected?"selected":""}\n         ${this.disabled?"disabled":""}`,disabled:this.disabled},o("div",{class:"label"},o("slot",{name:"label"}))))}};i.style=a;export{i as sdds_navigation_tabs_button};
-//# sourceMappingURL=p-595c05f4.entry.js.map

package/dist/tegel/p-595c05f4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sddsNavigationTabsButtonCss","SddsNavigationTabsButton","render","h","Host","role","class","this","selected","disabled","name"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.scss?tag=sdds-navigation-tabs-button&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  button {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    padding: 18px 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    &.selected {\n      color: var(--sdds-navigation-tabs-tab-color-selected);\n\n      &::after {\n        width: 100%;\n        background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n      }\n    }\n\n    .label {\n      padding: 8px 4px;\n    }\n\n    &:focus-visible {\n      outline: none;\n\n      .label {\n        @include sdds-focus-state;\n      }\n    }\n\n    &:hover {\n      color: var(--sdds-navigation-tabs-tab-color-hover);\n      opacity: 1;\n\n      &::after {\n        width: 100%;\n      }\n    }\n\n    &.disabled {\n      color: var(--sdds-navigation-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      .label {\n        opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n      }\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n}\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs-button',\n  styleUrl: 'sdds-navigation-tabs-button.scss',\n  shadow: true,\n})\nexport class SddsNavigationTabsButton {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class={`${this.selected ? 'selected' : ''}\n         ${this.disabled ? 'disabled' : ''}`}\n          disabled={this.disabled}\n        >\n          <div class=\"label\">\n            <slot name=\"label\"></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA8B,8zC,MCOvBC,EAAwB,M,uCAEP,M,cAGA,K,CAE5BC,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,UACEG,MAAO,GAAGC,KAAKC,SAAW,WAAa,gBACtCD,KAAKE,SAAW,WAAa,KAC9BA,SAAUF,KAAKE,UAEfN,EAAA,OAAKG,MAAM,SACTH,EAAA,QAAMO,KAAK,Y"}

package/dist/tegel/p-5ca26ce8.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as o,g as t}from"./p-387e1798.js";const e='[role=listitem].sc-sdds-footer-link a.sc-sdds-footer-link{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls);color:var(--sdds-footer-main-links);opacity:var(--sdds-footer-main-links-opacity);text-decoration:none}[role=listitem].sc-sdds-footer-link a.sc-sdds-footer-link:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}[role=listitem].sc-sdds-footer-link a.sc-sdds-footer-link:hover{text-decoration:underline}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link{color:var(--sdds-footer-top-links);font-family:"Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;font-weight:bold;font-size:14px;line-height:18px}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media all and (max-width: 992px){[role=listitem].top-part-child.sc-sdds-footer-link{border-bottom:1px solid var(--sdds-footer-top-divider)}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link{display:block;height:100%;padding:19px 40px;font-weight:normal}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link:hover{text-decoration:underline;background-color:var(--sdds-footer-top-links-background-hover)}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}}';const i=class{constructor(o){s(this,o);this.parentIsTopPart=false;this.href=undefined;this.target="_self";this.rel="noopener"}connectedCallback(){this.parentIsTopPart=this.host.closest("sdds-footer-link-group").parentElement.slot==="top"}render(){return o("div",{role:"listitem",class:`${this.parentIsTopPart?"top-part-child":""}`},o("a",{target:this.target,rel:this.rel,href:this.href},o("slot",null)))}get host(){return t(this)}};i.style=e;export{i as sdds_footer_link};
-//# sourceMappingURL=p-5ca26ce8.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sddsFooterLinkCss","SddsFooterLink","this","parentIsTopPart","connectedCallback","host","closest","parentElement","slot","render","h","role","class","target","rel","href"],"sources":["./src/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.scss?tag=sdds-footer-link&encapsulation=scoped","./src/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n[role='listitem'] {\n  a {\n    font: var(--sdds-headline-06);\n    letter-spacing: var(--sdds-headline-06-ls);\n    color: var(--sdds-footer-main-links);\n    opacity: var(--sdds-footer-main-links-opacity);\n    text-decoration: none;\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  &.top-part-child {\n    a {\n      color: var(--sdds-footer-top-links);\n      font-family: 'Scania Sans Semi Condensed', 'Scania Sans Condensed', arial, helvetica,\n        sans-serif;\n      font-weight: bold;\n      font-size: 14px;\n      line-height: 18px;\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n    }\n  }\n}\n\n@media all and (max-width: 992px) {\n  [role='listitem'].top-part-child {\n    border-bottom: 1px solid var(--sdds-footer-top-divider);\n\n    a {\n      display: block;\n      height: 100%;\n      padding: 19px 40px;\n      font-weight: normal;\n\n      &:hover {\n        text-decoration: underline;\n        background-color: var(--sdds-footer-top-links-background-hover);\n      }\n\n      &:focus {\n        @include sdds-focus-state;\n      }\n    }\n  }\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer-link',\n  styleUrl: 'sdds-footer-link.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class SddsFooterLink {\n  /** URL for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that prevents the opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  @Element() host: HostElement;\n\n  parentIsTopPart: boolean = false;\n\n  connectedCallback() {\n    this.parentIsTopPart = this.host.closest('sdds-footer-link-group').parentElement.slot === 'top';\n  }\n\n  render() {\n    return (\n      <div role=\"listitem\" class={`${this.parentIsTopPart ? 'top-part-child' : ''}`}>\n        <a target={this.target} rel={this.rel} href={this.href}>\n          <slot></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,84C,MCSbC,EAAc,M,yBAYzBC,KAAAC,gBAA2B,M,gCAP+B,Q,SAGpC,U,CAMtBC,oBACEF,KAAKC,gBAAkBD,KAAKG,KAAKC,QAAQ,0BAA0BC,cAAcC,OAAS,K,CAG5FC,SACE,OACEC,EAAA,OAAKC,KAAK,WAAWC,MAAO,GAAGV,KAAKC,gBAAkB,iBAAmB,MACvEO,EAAA,KAAGG,OAAQX,KAAKW,OAAQC,IAAKZ,KAAKY,IAAKC,KAAMb,KAAKa,MAChDL,EAAA,c"}

package/dist/tegel/p-5cc6d070.entry.js

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

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

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

package/dist/tegel/p-5dc33f45.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as d,g as o}from"./p-387e1798.js";const r=".sdds-block-webcomponent{box-sizing:border-box;color:var(--sdds-block-color);border-radius:4px;padding:16px;font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);background-color:var(--sdds-block-background)}.sdds-block-webcomponent *{box-sizing:border-box}.sdds-mode-variant-primary{--sdds-block-background:var(--sdds-block-background-primary);--sdds-block-background-nested:var(--sdds-block-background-nested-primary)}.sdds-mode-variant-secondary{--sdds-block-background:var(--sdds-block-background-secondary);--sdds-block-background-nested:var(--sdds-block-background-nested-secondary)}";const a=class{constructor(d){s(this,d);this.modeVariant=null}connectedCallback(){this.children=Array.from(this.host.children).filter((s=>s.tagName==="SDDS-BLOCK"));this.children.forEach((s=>{if(!this.modeVariant){s.setAttribute("mode-variant","secondary")}else{s.setAttribute("mode-variant",this.modeVariant==="primary"?"secondary":"primary")}}))}render(){return d("div",{class:`sdds-block-webcomponent ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},d("slot",null))}get host(){return o(this)}};a.style=r;export{a as sdds_block};
-//# sourceMappingURL=p-5dc33f45.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sddsBlockCss","SddsBlock","connectedCallback","this","children","Array","from","host","filter","item","tagName","forEach","modeVariant","setAttribute","render","h","class"],"sources":["./src/components/block/sdds-block.scss?tag=sdds-block&encapsulation=shadow","./src/components/block/sdds-block.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-block-webcomponent {\n  @include sdds-box-sizing;\n\n  color: var(--sdds-block-color);\n  border-radius: 4px;\n  padding: 16px;\n  font: var(--sdds-body-01);\n  letter-spacing: var(--sdds-body-01-ls);\n  background-color: var(--sdds-block-background);\n\n}\n.sdds-mode-variant-primary {\n  --sdds-block-background: var(--sdds-block-background-primary);\n  --sdds-block-background-nested: var(--sdds-block-background-nested-primary);\n}\n.sdds-mode-variant-secondary {\n  --sdds-block-background: var(--sdds-block-background-secondary);\n  --sdds-block-background-nested: var(--sdds-block-background-nested-secondary);\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-block',\n  styleUrl: 'sdds-block.scss',\n  shadow: true,\n})\nexport class SddsBlock {\n  /** Mode variant of the component, based on current mode. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @Element() host: HostElement;\n\n  children: Array<HTMLSddsBlockElement>;\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children).filter(\n      (item) => item.tagName === 'SDDS-BLOCK',\n    ) as HTMLSddsBlockElement[];\n    this.children.forEach((item) => {\n      if (!this.modeVariant) {\n        item.setAttribute('mode-variant', 'secondary');\n      } else {\n        item.setAttribute('mode-variant', this.modeVariant === 'primary' ? 'secondary' : 'primary');\n      }\n    });\n  }\n\n  render() {\n    return (\n      <div\n        class={`sdds-block-webcomponent ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,ylB,MCQRC,EAAS,M,0CAE2B,I,CAM/CC,oBACEC,KAAKC,SAAWC,MAAMC,KAAKH,KAAKI,KAAKH,UAAUI,QAC5CC,GAASA,EAAKC,UAAY,eAE7BP,KAAKC,SAASO,SAASF,IACrB,IAAKN,KAAKS,YAAa,CACrBH,EAAKI,aAAa,eAAgB,Y,KAC7B,CACLJ,EAAKI,aAAa,eAAgBV,KAAKS,cAAgB,UAAY,YAAc,U,KAKvFE,SACE,OACEC,EAAA,OACEC,MAAO,2BAA2Bb,KAAKS,cAAgB,KAAO,qBAAqBT,KAAKS,cAAe,MAEvGG,EAAA,a"}

package/dist/tegel/p-5f6fe516.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,H as d,g as a}from"./p-387e1798.js";const l=":host(.sdds-table__header-cell){box-sizing:border-box;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-data-table-color);background-color:var(--sdds-data-table-header-background);border-bottom:1px solid var(--sdds-data-table-header-background-hover);padding:0;height:48px;min-width:192px;box-sizing:border-box;vertical-align:middle;overflow:hidden;transition:background-color 200ms ease}:host(.sdds-table__header-cell) *{box-sizing:border-box}:host(.sdds-table__header-cell) .sdds-table__header-text{padding:0 16px;margin:0}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button{display:flex;align-items:center;gap:8px;justify-content:start;flex-direction:row;width:100%;height:100%;padding:0 16px;background-color:transparent;border:none;cursor:pointer;transition:background-color 200ms ease}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button:focus{outline:2px solid var(--sdds-data-table-header-btn-focus);outline-offset:-2px}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button:focus .sdds-table__header-button-icon{opacity:1}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button .sdds-table__header-button-text{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);text-align:left;color:var(--sdds-data-table-header-btn-color)}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button .sdds-table__header-button-icon{flex:0 0 16px;height:16px;opacity:0;transform-origin:center;transition:opacity 200ms ease-in, transform 200ms ease;fill:var(--sdds-data-table-color)}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button:hover .sdds-table__header-button-icon{opacity:1}:host(.sdds-table__header-cell--right-align) .sdds-table__header-button{text-align:right;justify-content:end;flex-direction:row-reverse}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button{background-color:var(--sdds-data-table-header-btn-background)}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button:hover{background-color:var(--sdds-data-table-header-btn-background-hover)}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button .sdds-table__header-button-icon{opacity:1}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button .sdds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.sdds-table--compact){height:33px}: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}:host(.sdds-table__header-cell:first-of-type){border-top-left-radius:4px}:host(.sdds-table__header-cell:last-of-type){border-top-right-radius:4px}:host(.sdds-table--extra-column:first-of-type){border-top-left-radius:0}:host(.sdds-table--toolbar-available){border-radius:0}:host(.sdds-table--extra-column.sdds-table--toolbar-available){border-radius:0}:host(.sdds-table__header-cell.sdds-table--toolbar-available:first-of-type){border-top-left-radius:0}:host(.sdds-table__header-cell.sdds-table--toolbar-available:last-of-type){border-top-right-radius:0}";const i=["enableMultiselect","enableExpandableRows","compactDesign","noMinWidth","verticalDividers"];const r=class{constructor(d){e(this,d);this.sddsSortChange=t(this,"sddsSortChange",7);this.internalSddsTextAlign=t(this,"internalSddsTextAlign",7);this.internalSddsHover=t(this,"internalSddsHover",7);this.sortButtonClick=e=>{if(this.sortingDirection!=="asc"){this.sortingDirection="asc"}else{this.sortingDirection="desc"}this.sortedByMyKey=true;this.sddsSortChange.emit([this.tableId,e,this.sortingDirection])};this.headerCellContent=()=>{if(this.sortable&&!this.disableSortingBtn){return s("button",{class:"sdds-table__header-button",onClick:()=>this.sortButtonClick(this.columnKey)},s("span",{class:"sdds-table__header-button-text",style:{textAlign:this.textAlignState}},this.columnTitle),this.sortingDirection===""&&s("svg",{class:"sdds-table__header-button-icon",fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 12 15"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z"}),s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z"}),s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z"})),this.sortingDirection!==""&&s("svg",{class:`sdds-table__header-button-icon ${this.sortingDirection==="desc"?"sdds-table__header-button-icon--rotate":""}`,fill:"currentColor",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},s("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z"})))}return s("p",{class:"sdds-table__header-text",style:{textAlign:this.textAlignState}},this.columnTitle)};this.onHeadCellHover=e=>{this.internalSddsHover.emit([this.tableId,e])};this.columnKey=undefined;this.columnTitle=undefined;this.customWidth=undefined;this.sortable=false;this.textAlign=undefined;this.textAlignState=undefined;this.sortingDirection="";this.sortedByMyKey=false;this.disableSortingBtn=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.enableMultiselect=false;this.enableToolbarDesign=false;this.tableId="";this.enableExpandableRows=false}internalSddsPropChangeListener(e){if(this.tableId===e.detail.tableId){e.detail.changed.filter((e=>i.includes(e))).forEach((t=>{if(typeof this[t]==="undefined"){throw new Error(`Table prop is not supported: ${t}`)}this[t]=e.detail[t]}))}}internalSddsSortingChangeListener(e){const[t,s]=e.detail;if(this.tableId===t){this.disableSortingBtn=s}}updateOptionsContent(e){if(this.tableId===e.detail[0]){if(this.columnKey!==e.detail[1]){this.sortedByMyKey=false;setTimeout((()=>{this.sortingDirection=""}),200)}}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){i.forEach((e=>{this[e]=this.tableEl[e]}))}componentWillRender(){if(this.textAlign==="right"||this.textAlign==="end"){this.textAlignState="right"}else{this.textAlignState="left"}this.internalSddsTextAlign.emit([this.tableId,this.columnKey,this.textAlignState]);this.enableToolbarDesign=this.host.closest("sdds-table").getElementsByTagName("sdds-table-toolbar").length>=1}render(){return s(d,{class:{"sdds-table__header-cell":true,"sdds-table__header-cell--sortable":this.sortable,"sdds-table__header-cell--is-sorted":this.sortedByMyKey,"sdds-table__header-cell--custom-width":this.customWidth!=="","sdds-table__header-cell--right-align":this.textAlignState==="right","sdds-table--compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--no-min-width":this.noMinWidth,"sdds-table--extra-column":this.enableMultiselect||this.enableExpandableRows,"sdds-table--toolbar-available":this.enableToolbarDesign},style:{width:this.customWidth},onMouseOver:()=>this.onHeadCellHover(this.columnKey),onMouseLeave:()=>this.onHeadCellHover("")},this.headerCellContent())}get host(){return a(this)}};r.style=l;export{r as sdds_header_cell};
-//# sourceMappingURL=p-5f6fe516.entry.js.map

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

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