@scania/tegel 0.0.2 → 0.0.5

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

@@ -0,0 +1 @@
+{"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":"+kBAAA,MAAMA,EAAe,8dCerB,MAAMC,EAA6D,CACjE,oBACA,wB,MAQWC,EAAS,M,oPA8HpBC,KAAAC,WAAa,KACXD,KAAKE,mBAAqB,MAC1BF,KAAKG,+BAA+BC,KAAK,CAACJ,KAAKK,QAASL,KAAKE,qBAC7DF,KAAKM,2BAA2BF,KAAK,CAACJ,KAAKK,QAASL,KAAKE,oBAAoB,EAyB/EF,KAAAO,qBAAuB,KACrB,MAAMC,EAAeR,KAAKS,KAAKC,uBAAuB,6BAEtDV,KAAKW,iBAAmB,GACxB,IAAK,IAAIC,EAAI,EAAGA,EAAIJ,EAAaK,OAAQD,IAAK,CAC5C,MAAME,EAAWN,EAAaI,GAAGG,qBAAqB,kBACtD,MAAMC,EAAiB,GACvB,IAAK,IAAIC,EAAI,EAAGA,EAAIH,EAASD,OAAQI,IAAK,CACxC,MAAMC,EAAiBJ,EAASG,GAAGE,aAAa,YAChD,MAAMC,EAAmBN,EAASG,GAAGE,aAAa,cAClDH,EAAeE,GAAkBE,C,CAEnCpB,KAAKW,iBAAiBU,KAAKL,E,CAE7BhB,KAAKsB,qBAAuBC,KAAKC,UAAUxB,KAAKW,iBAAiB,EAWnEX,KAAAyB,oBAAsB,KACpB,MAAMC,EAAe1B,KAAKS,KAAKC,uBAAuB,mBAAmBG,OAEzE,MAAMc,EAAuB3B,KAAKS,KAAKC,uBACrC,6BACAG,OAEFb,KAAKE,mBAAqBwB,IAAiBC,EAE3C3B,KAAKG,+BAA+BC,KAAK,CAACJ,KAAKK,QAASL,KAAKE,qBAE7DF,KAAKO,sBAAsB,E,8BA5Le,M,4BAGF,M,6CAMP,M,eAETgB,KAAKC,UAAUI,G,iBAIV,E,uBAEO,M,+BAEQ,M,0BAEL,K,mBAEhB,G,yBAEM,G,sBAEH,G,sBAEA,G,4DAIW,M,mBAEN,E,uBAEK,M,mBAEL,E,qBAEE,E,2BAEO,M,0BAED,M,aAEd,E,CAK3BC,iBAAiBC,GACf,UAAWA,IAAa,SAAU,CAChC9B,KAAK+B,cAAgBR,KAAKS,MAAMF,E,KAC3B,CACL9B,KAAK+B,cAAgBD,C,CAEvB9B,KAAKiC,oBAAsB,IAAIjC,KAAK+B,eACpC/B,KAAKkC,iBAAmB,IAAIlC,KAAK+B,c,CA+BnCI,+BAA+BC,GAC7B,GAAIpC,KAAKK,UAAY+B,EAAMC,OAAOhC,QAAS,CACzC+B,EAAMC,OAAOC,QACVC,QAAQC,GAAgB1C,EAAmB2C,SAASD,KACpDE,SAASF,IACR,UAAWxC,KAAKwC,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElDxC,KAAKwC,GAAeJ,EAAMC,OAAOG,EAAY,G,EAKrDI,qBAAqBC,EAAKC,EAAQ,OAChC,OAAO,SAASC,EAAUC,EAAGC,GAE3B,IAAKD,EAAEE,eAAeL,KAASI,EAAEC,eAAeL,GAAM,CAEpD,OAAO,C,CAGT,MAAMM,SAAcH,EAAEH,KAAS,SAAWG,EAAEH,GAAKO,cAAgBJ,EAAEH,GACnE,MAAMQ,SAAcJ,EAAEJ,KAAS,SAAWI,EAAEJ,GAAKO,cAAgBH,EAAEJ,GAEnE,IAAIS,EAAa,EACjB,GAAIH,EAAOE,EAAM,CACfC,EAAa,C,MACR,GAAIH,EAAOE,EAAM,CACtBC,GAAc,C,CAEhB,OAAOR,IAAU,OAASQ,GAAc,EAAIA,C,EAUhDC,SAASC,EAAUC,GACjB,IAAKzD,KAAK0D,uBAAwB,CAChC,GAAI1D,KAAK2D,kBAAmB,CAE1B3D,KAAKC,Y,CAIPD,KAAKiC,oBAAsB,IAAIjC,KAAKiC,qBACpCjC,KAAKiC,oBAAoB2B,KAAK7D,EAAU8D,cAAcL,EAAUC,G,EAMpEK,qBAAqB1B,GACnB,MAAO2B,EAAYC,EAAkBC,GAA4B7B,EAAMC,OACvE,GAAIrC,KAAKK,UAAY0D,EAAY,CAC/B/D,KAAKuD,SAASS,EAAkBC,E,EAsBpCC,qBAAqB9B,GACnB,GAAIpC,KAAKK,UAAY+B,EAAMC,OAAO,GAAI,EACpC,CAAGrC,KAAKE,oBAAsBkC,EAAMC,OACpCrC,KAAKO,sB,EAoBT4D,uBACEnE,KAAKyB,qB,CAGP2C,eAAeC,GACb,IAAKrE,KAAKsE,yBAA0B,CAoBlC,MAAMC,EAAoBvE,KAAKS,KAAK+D,iBAAiB,uBAErD,GAAIH,EAAWxD,OAAS,EAAG,CACzB,GAAIb,KAAKyE,0BAA2B,CAClCzE,KAAK0E,sBAAwB,I,CAG/BH,EAAkB7B,SAASiC,IACzB,MAAMC,EAAQD,EAAKH,iBAAiB,kBACpC,MAAMK,EAAkB,GAGxBD,EAAMlC,SAASoC,IACb,MAAMC,EAAYD,EAAS3D,aAAa,cAAc6D,cACtDH,EAAgBxD,KAAK0D,EAAU,IAIjC,MAAME,EAAeJ,EAAgBK,MAAMC,GAAYA,EAAQ1C,SAAS4B,KAGxE,GAAIY,EAAc,CAChBN,EAAKS,UAAUC,OAAO,0B,KACjB,CACLV,EAAKS,UAAUE,IAAI,0B,KAIvBtF,KAAKuF,kBAAoB,KACzBvF,KAAKwF,0BAA0BpF,KAAK,CAACJ,KAAKK,QAASL,KAAKuF,oBAExD,MAAME,EAAiBzF,KAAKS,KAAK+D,iBAAiB,4BAGlDxE,KAAK0F,qBAAuBD,EAAe5E,SAAW0D,EAAkB1D,M,KACnE,CACL,GAAIb,KAAKyE,0BAA2B,CAClCzE,KAAK0E,sBAAwB,K,CAI/B,GAAI1E,KAAKyE,+BAEF,CACLF,EAAkB7B,SAASiC,IACzBA,EAAKS,UAAUC,OAAO,0BAA0B,G,CAIpDrF,KAAKuF,kBAAoB,MACzBvF,KAAKwF,0BAA0BpF,KAAK,CAACJ,KAAKK,QAASL,KAAKuF,mB,GAO9DI,mBAAmBvD,GACjB,GAAIpC,KAAKK,UAAY+B,EAAMC,OAAO,GAAI,CACpCrC,KAAKoE,eAAehC,EAAMC,OAAO,G,EAIrCuD,oBACE5F,KAAK6F,QAAU7F,KAAKS,KAAKqF,QAAQ,cACjC9F,KAAKK,QAAUL,KAAK6F,QAAQxF,O,CAG9B0F,oBACEjG,EAAmB4C,SAASsD,IAC1BhG,KAAKgG,GAAiBhG,KAAK6F,QAAQG,EAAc,IAGnD,GAAIhG,KAAKiG,gBAAiB,CACxBjG,KAAKkG,SAAWlG,KAAK4B,S,MAChB,GAAI5B,KAAKkG,SAAU,CACxBlG,KAAK6B,iBAAiB7B,KAAKkG,S,EAI/BC,sBACE,MAAMC,EACJpG,KAAKS,KAAK4F,cAAcC,cAAc,qBAAqBC,SAAS1F,OAGtE,GAAIb,KAAK2D,mBAAqB3D,KAAKwG,qBAAsB,CACvDxG,KAAKyG,cAAgBL,EAAkB,C,KAClC,CACLpG,KAAKyG,cAAgBL,C,EAIzBM,SACE,OACEC,EAACC,EAAI,sBAAqB5G,KAAKsB,sBAC5BtB,KAAKiC,oBAAoB4E,KAAKC,GAC7BH,EAAA,2BACGI,OAAOC,KAAKF,GAAKD,KAAKI,GACrBN,EAAA,6BAA0BM,EAAQ,aAAcH,EAAIG,UAIzDjH,KAAK0F,sBACJiB,EAAA,UACEA,EAAA,MAAIO,MAAM,2BAA2BC,QAASnH,KAAKyG,eAAa,uDAKpEE,EAAA,a"}

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1 @@
+{"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-58bc7a27.entry.js

@@ -0,0 +1,2 @@
+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::input-placeholder{color:transparent}.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::input-placeholder{color:transparent}.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::input-placeholder{color:transparent}.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)}.form-textfield-error slot[name=sdds-prefix].sc-sdds-textfield-s>sdds-icon,.form-textfield-error slot[name=sdds-suffix].sc-sdds-textfield-s>sdds-icon{color:var(--sdds-textfield-icon-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{align-self:center}.textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-left:16px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield sdds-icon.sc-sdds-textfield,.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield .icon.sc-sdds-textfield{color:var(--sdds-negative)}.textfield-slot-wrap-suffix.sc-sdds-textfield{align-self:center}.textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin-right:16px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield sdds-icon.sc-sdds-textfield,.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield .icon.sc-sdds-textfield{color:var(--sdds-negative)}slot[name=sdds-prefix].sc-sdds-textfield-s>sdds-icon,slot[name=sdds-suffix].sc-sdds-textfield-s>sdds-icon{font-size:24px;line-height:0}slot[name=sdds-prefix].sc-sdds-textfield-s>*{padding-left:var(--sdds-spacing-element-20)}slot[name=sdds-prefix].sc-sdds-textfield-s~.textfield-input{padding-left:var(--sdds-spacing-element-12)}slot[name=sdds-suffix].sc-sdds-textfield-s>*{padding-right:var(--sdds-spacing-element-20)}';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-58bc7a27.entry.js.map

package/dist/tegel/p-58bc7a27.entry.js.map

@@ -0,0 +1 @@
+{"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/* slot[name=\"sdds-label\"]::slotted(*) {\n  @include type-style(\"detail-05\");\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textfield-label-color);\n} */\n\n//Textfield label\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  &::input-placeholder {\n    color: transparent;\n  }\n\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  slot[name='sdds-prefix']::slotted(sdds-icon),\n  slot[name='sdds-suffix']::slotted(sdds-icon) {\n    color: var(--sdds-textfield-icon-error);\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/* slot[name=\"sdds-prefix\"]::slotted(*),\nslot[name=\"sdds-suffix\"]::slotted(*) {\n  @include type-style(\"detail-02\");\n  align-self: center;\n  color: var(--sdds-textfield-ps-color);\n} */\n\n.textfield-slot-wrap-prefix {\n  align-self: center;\n\n  > * {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    margin-left: 16px;\n    color: var(--sdds-textfield-ps-color);\n  }\n\n  &.textfield-error {\n    sdds-icon,\n    .icon {\n      color: var(--sdds-negative);\n    }\n  }\n}\n\n.textfield-slot-wrap-suffix {\n  align-self: center;\n\n  > * {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    margin-right: 16px;\n    color: var(--sdds-textfield-ps-color);\n  }\n\n  &.textfield-error {\n    sdds-icon,\n    .icon {\n      color: var(--sdds-negative);\n    }\n  }\n}\n\n//TODO: When new icons are avaliable have a look at this one\nslot[name='sdds-prefix']::slotted(sdds-icon),\nslot[name='sdds-suffix']::slotted(sdds-icon) {\n  font-size: 24px; //FIXME: When new icons is avaliable it should be 16x16\n  line-height: 0;\n}\n\n//Text gerenerated infront of the input field\nslot[name='sdds-prefix']::slotted(*) {\n  padding-left: var(--sdds-spacing-element-20);\n\n  & ~ .textfield-input {\n    padding-left: var(--sdds-spacing-element-12);\n  }\n}\n\n//Text generated after the input field\nslot[name='sdds-suffix']::slotted(*) {\n  padding-right: var(--sdds-spacing-element-20);\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\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,o+a,MCQRC,EAAS,M,uLAKiC,O,mBAGM,W,WAGnC,G,uCAMM,G,WAGW,G,cAGb,M,cAGA,M,UAGO,K,iBAIY,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-5dc33f45.entry.js

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1 @@
+{"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":"gEAAA,MAAMA,EAAqB,6nGCa3B,MAAMC,EAA6D,CACjE,oBACA,uBACA,gBACA,aACA,oB,MAQWC,EAAe,M,0LAoI1BC,KAAAC,gBAAmBC,IAEjB,GAAIF,KAAKG,mBAAqB,MAAO,CACnCH,KAAKG,iBAAmB,K,KACnB,CACLH,KAAKG,iBAAmB,M,CAG1BH,KAAKI,cAAgB,KAErBJ,KAAKK,eAAeC,KAAK,CAACN,KAAKO,QAASL,EAAKF,KAAKG,kBAAkB,EAGtEH,KAAAQ,kBAAoB,KAClB,GAAIR,KAAKS,WAAaT,KAAKU,kBAAmB,CAC5C,OACEC,EAAA,UACEC,MAAM,4BACNC,QAAS,IAAMb,KAAKC,gBAAgBD,KAAKc,YAEzCH,EAAA,QAAMC,MAAM,iCAAiCG,MAAO,CAAEC,UAAWhB,KAAKiB,iBACnEjB,KAAKkB,aAGPlB,KAAKG,mBAAqB,IACzBQ,EAAA,OACEC,MAAM,iCACNO,KAAK,eACLC,MAAM,6BACNC,QAAQ,aAERV,EAAA,oBACY,UAAS,YACT,UACVW,EAAE,6CAEJX,EAAA,oBACY,UAAS,YACT,UACVW,EAAE,qLAEJX,EAAA,oBACY,UAAS,YACT,UACVW,EAAE,+IAKPtB,KAAKG,mBAAqB,IACzBQ,EAAA,OACEC,MAAO,kCACLZ,KAAKG,mBAAqB,OAAS,yCAA2C,KAEhFgB,KAAK,eACLC,MAAM,6BACNC,QAAQ,aAERV,EAAA,oBACY,UAAS,YACT,UACVW,EAAE,0J,CAOd,OACEX,EAAA,KAAGC,MAAM,0BAA0BG,MAAO,CAAEC,UAAWhB,KAAKiB,iBACzDjB,KAAKkB,YACJ,EAIRlB,KAAAuB,gBAAmBrB,IACjBF,KAAKwB,kBAAkBlB,KAAK,CAACN,KAAKO,QAASL,GAAK,E,6FArMtB,M,6EAOQ,G,mBAEF,M,uBAEI,M,sBAED,M,mBAEH,M,gBAEH,M,uBAEO,M,yBAEE,M,aAEb,G,0BAEc,K,CAkCzCuB,+BAA+BC,GAC7B,GAAI1B,KAAKO,UAAYmB,EAAMC,OAAOpB,QAAS,CACzCmB,EAAMC,OAAOC,QACVC,QAAQC,GAAgBhC,EAAmBiC,SAASD,KACpDE,SAASF,IACR,UAAW9B,KAAK8B,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElD9B,KAAK8B,GAAeJ,EAAMC,OAAOG,EAAY,G,EAOrDI,kCAAkCR,GAChC,MAAOS,EAAYC,GAAyBV,EAAMC,OAClD,GAAI3B,KAAKO,UAAY4B,EAAY,CAC/BnC,KAAKU,kBAAoB0B,C,EAM7BC,qBAAqBX,GACnB,GAAI1B,KAAKO,UAAYmB,EAAMC,OAAO,GAAI,CAEpC,GAAI3B,KAAKc,YAAcY,EAAMC,OAAO,GAAI,CACtC3B,KAAKI,cAAgB,MAErBkC,YAAW,KACTtC,KAAKG,iBAAmB,EAAE,GACzB,I,GAKToC,oBACEvC,KAAKwC,QAAUxC,KAAKyC,KAAKC,QAAQ,cACjC1C,KAAKO,QAAUP,KAAKwC,QAAQjC,O,CAG9BoC,oBACE7C,EAAmBkC,SAASY,IAC1B5C,KAAK4C,GAAiB5C,KAAKwC,QAAQI,EAAc,G,CAIrDC,sBAEE,GAAI7C,KAAKgB,YAAc,SAAWhB,KAAKgB,YAAc,MAAO,CAC1DhB,KAAKiB,eAAiB,O,KACjB,CACLjB,KAAKiB,eAAiB,M,CAGxBjB,KAAK8C,sBAAsBxC,KAAK,CAACN,KAAKO,QAASP,KAAKc,UAAWd,KAAKiB,iBAEpEjB,KAAK+C,oBACH/C,KAAKyC,KAAKC,QAAQ,cAAcM,qBAAqB,sBAAsBC,QAAU,C,CAkFzFC,SACE,OACEvC,EAACwC,EAAI,CACHvC,MAAO,CACL,0BAA2B,KAC3B,oCAAqCZ,KAAKS,SAC1C,qCAAsCT,KAAKI,cAC3C,wCAAyCJ,KAAKoD,cAAgB,GAC9D,uCAAwCpD,KAAKiB,iBAAmB,QAChE,sBAAuBjB,KAAKqD,cAC5B,sBAAuBrD,KAAKsD,iBAC5B,2BAA4BtD,KAAKuD,WACjC,2BAA4BvD,KAAKwD,mBAAqBxD,KAAKyD,qBAC3D,gCAAiCzD,KAAK+C,qBAExChC,MAAO,CAAE2C,MAAO1D,KAAKoD,aAErBO,YAAa,IAAM3D,KAAKuB,gBAAgBvB,KAAKc,WAC7C8C,aAAc,IAAM5D,KAAKuB,gBAAgB,KAExCvB,KAAKQ,oB"}

package/dist/tegel/p-64dd37d4.entry.js

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

package/dist/tegel/p-64dd37d4.entry.js.map

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

package/dist/tegel/p-750b7e5f.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as e}from"./p-387e1798.js";const n="a{cursor:pointer;outline:none;color:var(--sdds-link)}a:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}a:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}a:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}a:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}a.disabled{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}a.no-underline{text-decoration:none}a.no-underline:hover{text-decoration:none}";const s=class{constructor(e){o(this,e);this.href=undefined;this.target="_self";this.disabled=false;this.underline=true;this.rel="noopener"}render(){return e("a",{class:`\n        ${this.disabled?"disabled":""}\n        ${this.underline?"":"no-underline"}\n        \n        `,href:this.href,target:this.target,rel:this.rel},e("slot",null))}};s.style=n;export{s as sdds_link};
+//# sourceMappingURL=p-750b7e5f.entry.js.map

package/dist/tegel/p-750b7e5f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsLinkCss","SddsLink","render","h","class","this","disabled","underline","href","target","rel"],"sources":["./src/components/link/sdds-link.scss?tag=sdds-link","./src/components/link/sdds-link.tsx"],"sourcesContent":["a {\n  cursor: pointer;\n  outline: none;\n  color: var(--sdds-link);\n\n  &:active {\n    color: var(--sdds-link);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link);\n  }\n\n  &:hover {\n    color: var(--sdds-link-hover);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link-hover);\n  }\n\n  &:visited {\n    color: var(--sdds-link-visited);\n    text-decoration-color: var(--sdds-link-visited);\n  }\n\n  &:focus {\n    color: var(--sdds-link-focus);\n    text-decoration: none;\n    outline: 2px solid var(--sdds-link-focus);\n    outline-offset: -2px;\n  }\n\n  &.disabled {\n    color: var(--sdds-link-disabled);\n    text-decoration-color: var(--sdds-link-disabled);\n    pointer-events: none;\n  }\n\n  &.no-underline {\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** URL for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  render() {\n    return (\n      <a\n        class={`\n        ${this.disabled ? 'disabled' : ''}\n        ${this.underline ? '' : 'no-underline'}\n        \n        `}\n        href={this.href}\n        target={this.target}\n        rel={this.rel}\n      >\n        <slot></slot>\n      </a>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAc,ipB,MCOPC,EAAQ,M,yDAKuC,Q,cAG9B,M,eAGC,K,SAGP,U,CAEtBC,SACE,OACEC,EAAA,KACEC,MAAO,aACLC,KAAKC,SAAW,WAAa,eAC7BD,KAAKE,UAAY,GAAK,qCAGxBC,KAAMH,KAAKG,KACXC,OAAQJ,KAAKI,OACbC,IAAKL,KAAKK,KAEVP,EAAA,a"}

package/dist/tegel/p-792e8c5d.entry.js

@@ -0,0 +1,2 @@
+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.linkHref=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.linkHref},o("slot",null)))}get host(){return t(this)}};i.style=e;export{i as sdds_footer_link};
+//# sourceMappingURL=p-792e8c5d.entry.js.map

package/dist/tegel/p-792e8c5d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsFooterLinkCss","SddsFooterLink","this","parentIsTopPart","connectedCallback","host","closest","parentElement","slot","render","h","role","class","target","rel","href","linkHref"],"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() linkHref: 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.linkHref}>\n          <slot></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,84C,MCSbC,EAAc,M,yBAYzBC,KAAAC,gBAA2B,M,oCAP+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,KAAKc,UAChDN,EAAA,c"}

package/dist/tegel/p-7991d22f.entry.js

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

package/dist/tegel/p-7991d22f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["popoverMenuCss","PopoverMenu","handleOutsideClick","this","show","componentDidLoad","target","_a","referenceEl","document","querySelector","selector","renderedShowValue","popperInstance","createPopper","popoverMenuElement","strategy","placement","modifiers","name","options","offset","offsetSkidding","offsetDistance","showMenu","hideMenu","addEventListener","event","stopPropagation","componentDidRender","update","disconnectedCallback","destroy","render","h","Host","class"],"sources":["./src/components/popover-menu/popover-menu.scss?tag=sdds-popover-menu&encapsulation=shadow","./src/components/popover-menu/popover-menu.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  overflow: hidden;\n  width: 160px;\n  background-color: var(--sdds-popover-menu-background);\n  padding: 16px;\n  box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n  border-radius: 4px;\n  display: none;\n  z-index: z(tooltip);\n}\n\n:host(.sdds-popover-menu-show) {\n  opacity: 1;\n  display: block;\n}\n","import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-menu',\n  styleUrl: 'popover-menu.scss',\n  shadow: true,\n})\nexport class PopoverMenu {\n  @Element() popoverMenuElement!: HTMLElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Decides if the Popover Menu should be visible from the start */\n  @Prop() show: boolean = false;\n\n  /** Decides the placement of the Popover Menu */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @Listen('mousedown', { target: 'window' })\n  handleOutsideClick() {\n    if (this.show) {\n      this.show = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n    this.renderedShowValue = this.show;\n\n    this.popperInstance = createPopper(this.target, this.popoverMenuElement, {\n      strategy: 'fixed',\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showMenu = () => {\n      this.show = true;\n    };\n\n    const hideMenu = () => {\n      this.show = false;\n    };\n\n    this.target.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n\n      if (this.show) {\n        hideMenu();\n      } else {\n        showMenu();\n      }\n    });\n\n    this.popoverMenuElement.addEventListener('mousemove', (event) => {\n      event.stopPropagation();\n    });\n\n    this.popoverMenuElement.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n    });\n  }\n\n  componentDidRender() {\n    if (this.show && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.show;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,qU,MCSVC,EAAW,M,uCAIK,G,qCAMH,M,eAGO,O,oBAGE,E,oBAGA,E,uBAEK,M,oDAOtCC,qBACE,GAAIC,KAAKC,KAAM,CACbD,KAAKC,KAAO,K,EAIhBC,mB,MACEF,KAAKG,QAASC,EAAAJ,KAAKK,eAAW,MAAAD,SAAA,EAAAA,EAAIE,SAASC,cAAcP,KAAKQ,UAC9DR,KAAKS,kBAAoBT,KAAKC,KAE9BD,KAAKU,eAAiBC,EAAaX,KAAKG,OAAQH,KAAKY,mBAAoB,CACvEC,SAAU,QACVC,UAAWd,KAAKc,UAChBC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAAClB,KAAKmB,eAAgBnB,KAAKoB,qBAM3C,MAAMC,EAAW,KACfrB,KAAKC,KAAO,IAAI,EAGlB,MAAMqB,EAAW,KACftB,KAAKC,KAAO,KAAK,EAGnBD,KAAKG,OAAOoB,iBAAiB,aAAcC,IACzCA,EAAMC,kBAEN,GAAIzB,KAAKC,KAAM,CACbqB,G,KACK,CACLD,G,KAIJrB,KAAKY,mBAAmBW,iBAAiB,aAAcC,IACrDA,EAAMC,iBAAiB,IAGzBzB,KAAKY,mBAAmBW,iBAAiB,aAAcC,IACrDA,EAAMC,iBAAiB,G,CAI3BC,qBACE,GAAI1B,KAAKC,OAASD,KAAKS,kBAAmB,CAGxCT,KAAKU,eAAeiB,Q,CAEtB3B,KAAKS,kBAAoBT,KAAKC,I,CAGhC2B,uB,OACExB,EAAAJ,KAAKU,kBAAc,MAAAN,SAAA,SAAAA,EAAEyB,S,CAGvBC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,qBAAqBjC,KAAKC,KAAO,yBAA2B,MACvE8B,EAAA,a"}

package/dist/tegel/p-7d2f2f58.entry.js

@@ -0,0 +1,2 @@
+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",null))))}};d.style=t;export{d as sdds_folder_tabs_link};
+//# sourceMappingURL=p-7d2f2f58.entry.js.map

package/dist/tegel/p-7d2f2f58.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsFolderTabsLinkCss","SddsFolderTabsLink","async","width","this","tabWidth","render","h","Host","role","style","class","selected","disabled","href","target","rel"],"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></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,e"}

package/dist/tegel/p-7f10356d.entry.js

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

package/dist/tegel/p-7f10356d.entry.js.map

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

package/dist/tegel/p-7f22cee6.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as i,H as t,g as o}from"./p-387e1798.js";import{c as e}from"./p-ec26fc38.js";const n=":host{box-sizing:border-box;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){display:block}";const h=class{constructor(i){s(this,i);this.initialize=s=>{this.popperInstance=e(s,this.host,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[this.offsetSkidding,this.offsetDistance]}},...this.modifiers]});if(this.show===null){s.addEventListener("click",(s=>{s.stopPropagation();if(this.isShown){this.isShown=false}else{this.isShown=true}}))}};this.selector="";this.referenceEl=undefined;this.show=null;this.placement="auto";this.offsetSkidding=0;this.offsetDistance=8;this.modifiers=[];this.renderedShowValue=false;this.popperInstance=undefined;this.target=undefined;this.isShown=false}onShowChange(s){this.isShown=s}onReferenceElChange(s,i){var t;if(s!==i){(t=this.popperInstance)===null||t===void 0?void 0:t.destroy();if(s){this.initialize(s)}}}onAnyClick(s){if(this.isShown&&this.show===null){const i=!s.composedPath().includes(this.host);if(i){this.isShown=false}}}connectedCallback(){if(this.show!==null){this.isShown=this.show}}componentDidLoad(){var s;if(this.selector||this.referenceEl){const i=(s=this.referenceEl)!==null&&s!==void 0?s:document.querySelector(this.selector);if(i){this.initialize(i)}else{console.error(`Could not initialize popover-canvas: element with selector '${this.selector}' not found.`)}}}componentDidRender(){if(this.isShown&&!this.renderedShowValue){this.popperInstance.update()}this.renderedShowValue=this.isShown}disconnectedCallback(){var s;(s=this.popperInstance)===null||s===void 0?void 0:s.destroy()}render(){return i(t,{class:`sdds-popover-canvas ${this.isShown?"sdds-popover-canvas-show":""}`},i("slot",null))}get host(){return o(this)}static get watchers(){return{show:["onShowChange"],referenceEl:["onReferenceElChange"]}}};h.style=n;export{h as sdds_popover_canvas};
+//# sourceMappingURL=p-7f22cee6.entry.js.map

package/dist/tegel/p-7f22cee6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["popoverCanvasCss","PopoverCanvas","this","initialize","referenceEl","popperInstance","createPopper","host","placement","modifiers","name","options","offset","offsetSkidding","offsetDistance","show","addEventListener","event","stopPropagation","isShown","onShowChange","newValue","onReferenceElChange","oldValue","_a","destroy","onAnyClick","isClickOutside","composedPath","includes","connectedCallback","componentDidLoad","selector","document","querySelector","console","error","componentDidRender","renderedShowValue","update","disconnectedCallback","render","h","Host","class"],"sources":["./src/components/popover-canvas/popover-canvas.scss?tag=sdds-popover-canvas&encapsulation=shadow","./src/components/popover-canvas/popover-canvas.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  color: var(--sdds-popover-canvas-color);\n  background-color: var(--sdds-popover-canvas-background);\n  box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n  border-radius: 4px;\n  z-index: z(tooltip);\n  display: none;\n}\n\n:host(.sdds-popover-canvas-show) {\n  display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() host!: HTMLSddsPopoverCanvasElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls wether the popover is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside.\n   */\n  @Prop() show: boolean = null;\n\n  /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */\n  @Prop() modifiers: Object[] = [];\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @State() isShown: boolean = false;\n\n  @Watch('show')\n  onShowChange(newValue: boolean) {\n    this.isShown = newValue;\n  }\n\n  @Watch('referenceEl')\n  onReferenceElChange(newValue: HTMLElement, oldValue: HTMLElement) {\n    if (newValue !== oldValue) {\n      this.popperInstance?.destroy();\n\n      if (newValue) {\n        this.initialize(newValue);\n      }\n    }\n  }\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    if (this.isShown && this.show === null) {\n      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n      const isClickOutside = !event.composedPath().includes(this.host as any);\n      if (isClickOutside) {\n        this.isShown = false;\n      }\n    }\n  }\n\n  initialize = (referenceEl) => {\n    this.popperInstance = createPopper(referenceEl, this.host, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n        ...this.modifiers,\n      ],\n    });\n\n    if (this.show === null) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.isShown = false;\n        } else {\n          this.isShown = true;\n        }\n      });\n    }\n  };\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n\n      if (referenceEl) {\n        this.initialize(referenceEl);\n      } else {\n        console.error(\n          `Could not initialize popover-canvas: element with selector '${this.selector}' not found.`,\n        );\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (this.isShown && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.isShown;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,6T,MCSZC,EAAa,M,yBA6DxBC,KAAAC,WAAcC,IACZF,KAAKG,eAAiBC,EAAaF,EAAaF,KAAKK,KAAM,CACzDC,UAAWN,KAAKM,UAChBC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAACV,KAAKW,eAAgBX,KAAKY,qBAGpCZ,KAAKO,aAIZ,GAAIP,KAAKa,OAAS,KAAM,CACtBX,EAAYY,iBAAiB,SAAUC,IACrCA,EAAMC,kBACN,GAAIhB,KAAKiB,QAAS,CAChBjB,KAAKiB,QAAU,K,KACV,CACLjB,KAAKiB,QAAU,I,qBA7EI,G,qCAQH,K,eAGO,O,oBAGE,E,oBAGA,E,eAGH,G,uBAEQ,M,iEAMV,K,CAG5BC,aAAaC,GACXnB,KAAKiB,QAAUE,C,CAIjBC,oBAAoBD,EAAuBE,G,MACzC,GAAIF,IAAaE,EAAU,EACzBC,EAAAtB,KAAKG,kBAAc,MAAAmB,SAAA,SAAAA,EAAEC,UAErB,GAAIJ,EAAU,CACZnB,KAAKC,WAAWkB,E,GAMtBK,WAAWT,GACT,GAAIf,KAAKiB,SAAWjB,KAAKa,OAAS,KAAM,CAEtC,MAAMY,GAAkBV,EAAMW,eAAeC,SAAS3B,KAAKK,MAC3D,GAAIoB,EAAgB,CAClBzB,KAAKiB,QAAU,K,GA+BrBW,oBACE,GAAI5B,KAAKa,OAAS,KAAM,CACtBb,KAAKiB,QAAUjB,KAAKa,I,EAIxBgB,mB,MACE,GAAI7B,KAAK8B,UAAY9B,KAAKE,YAAa,CACrC,MAAMA,GAAcoB,EAAAtB,KAAKE,eAAW,MAAAoB,SAAA,EAAAA,EAAIS,SAASC,cAAchC,KAAK8B,UAEpE,GAAI5B,EAAa,CACfF,KAAKC,WAAWC,E,KACX,CACL+B,QAAQC,MACN,+DAA+DlC,KAAK8B,uB,GAM5EK,qBACE,GAAInC,KAAKiB,UAAYjB,KAAKoC,kBAAmB,CAG3CpC,KAAKG,eAAekC,Q,CAEtBrC,KAAKoC,kBAAoBpC,KAAKiB,O,CAGhCqB,uB,OACEhB,EAAAtB,KAAKG,kBAAc,MAAAmB,SAAA,SAAAA,EAAEC,S,CAGvBgB,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,uBAAuB1C,KAAKiB,QAAU,2BAA6B,MAC9EuB,EAAA,a"}

package/dist/tegel/p-872bef70.entry.js

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

package/dist/tegel/p-872bef70.entry.js.map

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

package/dist/tegel/p-8ee9e2f5.entry.js

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

package/dist/tegel/p-8ee9e2f5.entry.js.map

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