@scania/tegel 0.0.51 → 0.0.61

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["sddsFolderTabsButtonCss","SddsFolderTabsButton","async","width","this","tabWidth","render","h","Host","role","style","class","selected","disabled","name"],"sources":["./src/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.scss?tag=sdds-folder-tabs-button&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.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  button {\n    min-width: 142px;\n    height: 100%;\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    cursor: pointer;\n    color: var(--sdds-folder-tab-color);\n    padding: 16px;\n    white-space: nowrap;\n    text-decoration: none;\n    text-align: left;\n    outline: none;\n    border: none;\n    border-top: 2px solid var(--sdds-folder-tab-background);\n    background-color: var(--sdds-folder-tab-background);\n    border-right: none;\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        // This ::before element hides the border-right of the tab to the left of the selected tab\n        content: ' ';\n        background-color: var(--sdds-folder-tab-background);\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-width: 1px;\n      border-right-style: solid;\n      border-right-color: var(--sdds-folder-tab-divider-color);\n\n      &:hover {\n        border-top-color: var(--sdds-folder-tab-background-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  button: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-button',\n  styleUrl: 'sdds-folder-tabs-button.scss',\n  shadow: true,\n})\nexport class SddsFolderTabsButton {\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  @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        <button\n          style={{ width: `${this.tabWidth}px` }}\n          class={`${this.selected ? 'selected' : ''}\n          ${this.disabled ? 'disabled' : ''}`}\n          disabled={this.disabled}\n        >\n          <div class=\"label\">\n            <slot name=\"label\"></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA0B,qvD,MCOnBC,EAAoB,M,uCAEH,M,cAGA,M,wBAM5BC,kBAAkBC,GAChBC,KAAKC,SAAWF,C,CAGlBG,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,UACEG,MAAO,CAAEP,MAAO,GAAGC,KAAKC,cACxBM,MAAO,GAAGP,KAAKQ,SAAW,WAAa,iBACrCR,KAAKS,SAAW,WAAa,KAC/BA,SAAUT,KAAKS,UAEfN,EAAA,OAAKI,MAAM,SACTJ,EAAA,QAAMO,KAAK,Y"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["modalCss","Modal","this","handleClose","event","closeEvent","sddsClose","emit","defaultPrevented","isShown","handleShow","initializeReferenceElement","referenceEl","addEventListener","stopPropagation","setShowButton","selector","_a","document","querySelector","async","connectedCallback","show","setDissmissButtons","handleOverlayClick","targetList","composedPath","target","classList","prevent","host","querySelectorAll","forEach","dismissButton","render","h","Host","onClick","class","actions","size","name"],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n  $screen-s: (\n    xs: 100%,\n    sm: 100%,\n    md: 100%,\n    lg: 100%,\n  ),\n  $screen-md: (\n    xs: 75%,\n    sm: 62.5%,\n    md: 75%,\n    lg: 100%,\n  ),\n  $screen-l: (\n    xs: 31.25%,\n    sm: 43.75%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xl: (\n    xs: 31.25%,\n    sm: 37.5%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xxl: (\n    xs: 25%,\n    sm: 37.5%,\n    md: 50%,\n    lg: 75%,\n  ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n  }\n}\n\n@mixin modal-scroll-outer {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n    border-radius: 0 1em 1em 0;\n  }\n}\n\n@mixin modal-host {\n  left: 0;\n  top: 0;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  z-index: z(modal);\n  background-color: var(--sdds-modal-backdrop);\n  padding: 0 16px;\n\n  @media (max-width: $screen-s) {\n    padding: 0;\n  }\n\n  &.show {\n    display: flex;\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n\n@mixin modal-header {\n  display: flex;\n  padding-bottom: var(--sdds-spacing-element-8);\n  position: sticky;\n  top: 0;\n  background-color: var(--sdds-modal-background);\n  z-index: 1;\n\n  &::before {\n    content: ' ';\n    position: absolute;\n    height: 16px;\n    top: -16px;\n    width: 100%;\n    background-color: var(--sdds-modal-background);\n  }\n}\n\n@mixin modal-headline {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-headline-05);\n  letter-spacing: var(--sdds-headline-05-ls);\n  margin: 0;\n  flex: 1;\n}\n\n@mixin modal-body {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-body-01);\n  letter-spacing: var(--sdds-body-01-ls);\n  padding-bottom: 40px;\n  overflow-y: visible;\n  padding-right: 16px;\n  @include modal-scroll-inner;\n\n  @media (min-width: $screen-l) {\n    padding-right: 64px;\n  }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-modal-background);\n  margin: auto;\n  position: relative;\n  border-radius: 4px;\n  padding: 16px;\n  max-height: 85vh;\n  overflow-y: auto;\n\n  @include modal-scroll-outer;\n\n  &__actions-sticky {\n    overflow: hidden;\n\n    .sdds-modal-body {\n      font: var(--sdds-body-01);\n      letter-spacing: var(--sdds-body-01-ls);\n      padding-bottom: 96px;\n      margin: 0 -16px 0 0;\n      max-height: calc(85vh - 36px);\n      overflow-y: auto;\n    }\n\n    .sdds-modal-actions {\n      position: absolute;\n      bottom: -1px;\n      left: 0;\n      right: 0;\n      background-color: var(--sdds-modal-background);\n      padding: var(--sdds-spacing-element-16);\n      display: flex;\n      gap: 16px;\n    }\n  }\n\n  &__actions-static {\n    .sdds-modal-actions {\n      background-color: var(--sdds-modal-background);\n      display: flex;\n      gap: 16px;\n    }\n  }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n  @media (min-width: $screen) {\n    @each $modal, $value in $modals {\n      .sdds-modal-#{$modal} {\n        width: $value;\n      }\n    }\n  }\n}\n\n@media (max-width: $screen-s) {\n  .sdds-modal-md,\n  .sdds-modal-lg,\n  .sdds-modal-sm {\n    height: 100%;\n\n    slot[name='sdds-modal-actions']::slotted(*) {\n      display: flex;\n    }\n  }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n  @include modal-header;\n}\n\n.sdds-modal-headline {\n  @include modal-headline;\n\n  color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n  @include modal-body;\n}\n\n.sdds-modal-backdrop {\n  @include sdds-box-sizing;\n  @include modal-host;\n}\n\nbutton.sdds-modal-close {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  appearance: unset;\n}\n\n.sdds-modal-close {\n  display: inline-block;\n  height: auto;\n  color: var(--sdds-modal-icon);\n  cursor: pointer;\n\n  &:focus {\n    @include sdds-focus-state;\n  }\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n  display: inline-block;\n  height: auto;\n  background-repeat: no-repeat;\n  cursor: pointer;\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n\n  svg {\n    fill: var(--sdds-modal-icon);\n  }\n}\n\n.sdds-modal-overflow {\n  overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n  @include modal-host;\n\n  .sdds-modal-close {\n    border: none;\n    background-color: transparent;\n  }\n\n  .sdds-modal-close-btn {\n    border: none;\n    background-color: transparent;\n  }\n}\n\n:host(.show) {\n  display: flex;\n}\n\n:host(.hide) {\n  display: none;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Element,\n  Method,\n  State,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  @Element() host: HTMLElement;\n\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /** CSS selector for the element that will show the modal. */\n  @Prop() selector: string;\n\n  /** Element that will show the modal (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls whether the modal 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  @Prop() show: boolean;\n\n  // State that keeps track of show/closed state for the modal.\n  @State() isShown: boolean = false;\n\n  /** Shows the modal.  */\n  @Method()\n  async showModal() {\n    this.handleShow();\n  }\n\n  /** Closes the modal. */\n  @Method()\n  async closeModal() {\n    this.handleClose();\n  }\n\n  /** Emitts when the modal is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<any>;\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n    this.setDissmissButtons();\n    this.setShowButton();\n  }\n\n  /** Emits a close event and then close the modal if it is not prevented. */\n  handleClose = (event?) => {\n    const closeEvent = this.sddsClose.emit(event);\n    if (!closeEvent.defaultPrevented) {\n      this.isShown = false;\n    }\n  };\n\n  handleShow = () => {\n    this.isShown = true;\n  };\n\n  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */\n  handleOverlayClick(event) {\n    const targetList = event.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.handleClose(event);\n    }\n  }\n\n  /** Adds an event listener to the reference element that shows/closes the modal. */\n  initializeReferenceElement = (referenceEl) => {\n    if (referenceEl) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.handleClose(event);\n        } else {\n          this.handleShow();\n        }\n      });\n    }\n  };\n\n  /** Check if there is a referenceElement or selector and adds event listener to them if so. */\n  setShowButton = () => {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n      if (referenceEl) {\n        this.initializeReferenceElement(referenceEl);\n      }\n    }\n  };\n\n  /** Adds an event listener to the dismiss buttons that closes the modal. */\n  setDissmissButtons() {\n    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {\n      dismissButton.addEventListener('click', (event) => {\n        this.handleClose(event);\n      });\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleOverlayClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button class=\"sdds-modal-close\" aria-label=\"close\" onClick={() => this.handleClose()}>\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,++M,MCiBJC,EAAK,M,8DAuDhBC,KAAAC,YAAeC,IACb,MAAMC,EAAaH,KAAKI,UAAUC,KAAKH,GACvC,IAAKC,EAAWG,iBAAkB,CAChCN,KAAKO,QAAU,K,GAInBP,KAAAQ,WAAa,KACXR,KAAKO,QAAU,IAAI,EAgBrBP,KAAAS,2BAA8BC,IAC5B,GAAIA,EAAa,CACfA,EAAYC,iBAAiB,SAAUT,IACrCA,EAAMU,kBACN,GAAIZ,KAAKO,QAAS,CAChBP,KAAKC,YAAYC,E,KACZ,CACLF,KAAKQ,Y,OAObR,KAAAa,cAAgB,K,MACd,GAAIb,KAAKc,UAAYd,KAAKU,YAAa,CACrC,MAAMA,GAAcK,EAAAf,KAAKU,eAAW,MAAAK,SAAA,EAAAA,EAAIC,SAASC,cAAcjB,KAAKc,UACpE,GAAIJ,EAAa,CACfV,KAAKS,2BAA2BC,E,iBA7FX,M,UAGe,K,aAGH,S,oFAaX,K,CAI5BQ,kBACElB,KAAKQ,Y,CAKPU,mBACElB,KAAKC,a,CAYPkB,oBACE,GAAInB,KAAKoB,OAAS,KAAM,CACtBpB,KAAKO,QAAUP,KAAKoB,I,CAEtBpB,KAAKqB,qBACLrB,KAAKa,e,CAgBPS,mBAAmBpB,GACjB,MAAMqB,EAAarB,EAAMsB,eACzB,MAAMC,EAASF,EAAW,GAC1B,GACEE,EAAOC,UAAU,KAAO,oBACvBD,EAAOC,UAAU,KAAO,uBAAyB1B,KAAK2B,UAAY,MACnE,CACA3B,KAAKC,YAAYC,E,EA6BrBmB,qBACErB,KAAK4B,KAAKC,iBAAiB,wBAAwBC,SAASC,IAC1DA,EAAcpB,iBAAiB,SAAUT,IACvCF,KAAKC,YAAYC,EAAM,GACvB,G,CAIN8B,SACE,OACEC,EAACC,EAAI,CACHC,QAAUjC,IACRF,KAAKsB,mBAAmBpB,EAAM,EAEhCkC,MAAO,uBAAuBpC,KAAKO,QAAU,OAAS,UAEtD0B,EAAA,OACEG,MAAO,cAAcpC,KAAKqC,QAAU,uBAAuBrC,KAAKqC,UAAY,MAC1ErC,KAAKsC,KAAO,cAActC,KAAKsC,OAAS,OAG1CL,EAAA,OAAKG,MAAM,qBACTH,EAAA,QAAMM,KAAK,wBACXN,EAAA,UAAQG,MAAM,mBAAkB,aAAY,QAAQD,QAAS,IAAMnC,KAAKC,eACtEgC,EAAA,aAAWM,KAAK,QAAQD,KAAK,WAIjCL,EAAA,OAAKG,MAAM,mBACTH,EAAA,QAAMM,KAAK,qBAGbN,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMM,KAAK,yB"}

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

@@ -1,2 +0,0 @@
-import{r as e,h as r}from"./p-387e1798.js";const t='@charset "UTF-8";[role=listitem]{display:flex;align-items:center;color:var(--sdds-breadcrumb-color)}[role=listitem] a{color:var(--sdds-breadcrumb-color);text-decoration:none}[role=listitem]:hover{cursor:pointer}[role=listitem]:hover a{color:var(--sdds-breadcrumb-color-hover);text-decoration:underline}[role=listitem].disabled{pointer-events:none}[role=listitem].disabled a,[role=listitem].current a,[role=listitem] [aria-current=page] a{cursor:default;color:var(--sdds-breadcrumb-color-disabled)}[role=listitem].disabled:hover a,[role=listitem].current:hover a,[role=listitem] [aria-current=page]:hover a{color:var(--sdds-breadcrumb-color-disabled);text-decoration:none}[role=listitem] a::after{content:"›";color:var(--sdds-breadcrumb-separator-color);margin-right:4px;margin-left:4px;display:inline-block;width:4px;height:8px}:host(.last) a::after{display:none}';const o=class{constructor(r){e(this,r);this.current=false;this.href=undefined;this.target="_self";this.rel="noopener";this.disabled=false}render(){return r("div",{role:"listitem",class:`${this.current?"current":""} \n      ${this.disabled?"disabled":""}`},r("a",{href:!this.disabled?this.href:null,target:this.target,rel:this.rel},r("slot",null)))}};o.style=t;export{o as sdds_breadcrumb_link};
-//# sourceMappingURL=p-d87ce5e9.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["sddsBreadcrumbLinkCss","SddsBreadcrumbLink","render","h","role","class","this","current","disabled","href","target","rel"],"sources":["./src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.scss?tag=sdds-breadcrumb-link&encapsulation=shadow","./src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n\n[role='listitem'] {\n  display: flex;\n  align-items: center;\n  color: var(--sdds-breadcrumb-color);\n\n  a {\n    color: var(--sdds-breadcrumb-color);\n    text-decoration: none;\n  }\n\n  &:hover {\n    a {\n      color: var(--sdds-breadcrumb-color-hover);\n      text-decoration: underline;\n    }\n\n    cursor: pointer;\n  }\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  &.disabled,\n  &.current,\n  [aria-current='page'] {\n    a {\n      cursor: default;\n      color: var(--sdds-breadcrumb-color-disabled);\n    }\n\n    &:hover {\n      a {\n        color: var(--sdds-breadcrumb-color-disabled);\n        text-decoration: none;\n      }\n    }\n  }\n\n  a::after {\n    content: '\\203A';\n    color: var(--sdds-breadcrumb-separator-color);\n    margin-right: 4px;\n    margin-left: 4px;\n    display: inline-block;\n    width: 4px;\n    height: 8px;\n  }\n}\n\n:host(.last) {\n  a::after {\n    display: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-link',\n  styleUrl: 'sdds-breadcrumb-link.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbLink {\n  /** Boolean for the current link */\n  @Prop() current: 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  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <div\n        role=\"listitem\"\n        class={`${this.current ? 'current' : ''} \n      ${this.disabled ? 'disabled' : ''}`}\n      >\n        <a href={!this.disabled ? this.href : null} target={this.target} rel={this.rel}>\n          <slot></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"],"mappings":"2CAAA,MAAMA,EAAwB,k2B,MCOjBC,EAAkB,M,sCAEF,M,gCAM+B,Q,SAGpC,W,cAGM,K,CAE5BC,SACE,OACEC,EAAA,OACEC,KAAK,WACLC,MAAO,GAAGC,KAAKC,QAAU,UAAY,cACrCD,KAAKE,SAAW,WAAa,MAE7BL,EAAA,KAAGM,MAAOH,KAAKE,SAAWF,KAAKG,KAAO,KAAMC,OAAQJ,KAAKI,OAAQC,IAAKL,KAAKK,KACzER,EAAA,c"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["sddsNavigationTabsLinkCss","SddsNavigationTabsLink","render","h","Host","role","class","this","selected","disabled","href","target","rel","name"],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.scss?tag=sdds-navigation-tabs-link&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  a {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    padding: 18px 0;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n\n    &.selected {\n      color: var(--sdds-navigation-tabs-tab-color-selected);\n\n      &::after {\n        width: 100%;\n        background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n      }\n    }\n\n    .label {\n      padding: 8px 4px;\n    }\n\n    &:focus-visible {\n      outline: none;\n\n      .label {\n        @include sdds-focus-state;\n      }\n    }\n\n    &:hover {\n      color: var(--sdds-navigation-tabs-tab-color-hover);\n      opacity: 1;\n\n      &::after {\n        width: 100%;\n      }\n    }\n\n    &.disabled {\n      color: var(--sdds-navigation-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      .label {\n        opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n      }\n    }\n\n    &::after {\n      content: ' ';\n      position: absolute;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin-left: auto;\n      width: 0;\n      margin-right: auto;\n      height: 2px;\n      background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out;\n      z-index: 1;\n    }\n  }\n}\n\n:host(.first) {\n  margin-left: 32px;\n}\n\n:host(.last) {\n  margin-right: 32px;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-navigation-tabs-link',\n  styleUrl: 'sdds-navigation-tabs-link.scss',\n  shadow: true,\n})\nexport class SddsNavigationTabsLink {\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  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          class={`\n        ${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}\n        `}\n          href={this.href}\n          target={this.target}\n          rel={this.rel}\n        >\n          <div class=\"label\">\n            <slot name=\"label\"></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA4B,uwC,MCOrBC,EAAsB,M,uCAEL,M,cAGA,M,gCAM8B,Q,SAGpC,U,CAEtBC,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,KACEG,MAAO,aACPC,KAAKC,SAAW,WAAa,eAC7BD,KAAKE,SAAW,WAAa,eAE7BC,KAAMH,KAAKG,KACXC,OAAQJ,KAAKI,OACbC,IAAKL,KAAKK,KAEVT,EAAA,OAAKG,MAAM,SACTH,EAAA,QAAMU,KAAK,Y"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["tableFooterCss","relevantTableProps","removeShakeAnimation","e","target","classList","remove","TableFooter","this","paginationPrev","event","preventDefault","paginationValue","runPagination","paginationNext","numberOfPages","disablePaginationFunction","dataRowsPagination","host","parentNode","querySelector","querySelectorAll","forEach","item","i","index","tempPaginationDisable","lastResult","rowsPerPage","firstResult","add","clientPaginationPrev","clientPaginationValue","sendPaginationValue","clientPaginationNext","clientMaxPages","internalSddsPropChangeListener","tableId","detail","changed","filter","changedProp","includes","Error","connectedCallback","tableEl","closest","componentWillLoad","tablePropName","numberOfRows","parentElement","childElementCount","numberOfColumns","Math","ceil","clientSetColumnsNumber","columnsNumber","internalSddsEnablePagination","emit","paginationInputChange","insertedValue","value","max","sddsPaginationListener","sddsPageChange","clientPaginationInputChange","render","h","Host","class","compactDesign","colSpan","enablePagination","enableClientPagination","type","min","pattern","dir","onChange","onFocusout","onAnimationEnd","disabled","onClick","fill","xmlns","viewBox","d"],"sources":["./src/components/data-table/table-footer/table-footer.scss?tag=sdds-table-footer&encapsulation=shadow","./src/components/data-table/table-footer/table-footer.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-footer-group;\n  height: 48px;\n\n  .sdds-table__footer-row {\n    background-color: var(--sdds-data-table-footer-background);\n    color: var(--sdds-data-table-color);\n  }\n\n  .sdds-table__footer-cell {\n    padding: 0 16px;\n\n    .sdds-table__pagination {\n      height: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      .sdds-table__row-selector,\n      .sdds-table__page-selector {\n        display: flex;\n        align-items: center;\n      }\n\n      .sdds-table__page-selector-input {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        background-color: var(--sdds-data-table-footer-page-selector-input-background);\n        color: var(--sdds-data-table-color);\n        width: 36px;\n        height: 30px;\n        border: none;\n        border-radius: 4px;\n        transition: background-color 250ms ease;\n        margin-right: 4px;\n        padding-right: 8px;\n\n        &:hover {\n          background-color: var(--sdds-data-table-footer-page-selector-input-background-hover);\n        }\n\n        &:disabled {\n          color: var(--sdds-data-table-footer-page-selector-input-color-disabled);\n        }\n      }\n\n      .sdds-table__page-selector-input--shake {\n        animation: sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      }\n\n      .sdds-table__footer-text {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding: 1px 8px 0 0;\n      }\n\n      .sdds-table__footer-btn {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border: none;\n        background-color: transparent;\n        cursor: pointer;\n        height: 32px;\n        width: 32px;\n        border-radius: 4px;\n        transition: background-color 250ms ease;\n\n        &:hover {\n          background-color: var(--sdds-data-table-footer-btn-hover);\n        }\n\n        &:disabled {\n          cursor: default;\n          opacity: 0.38;\n\n          &:hover {\n            background-color: transparent;\n          }\n        }\n      }\n\n      .sdds-table__footer-btn-svg {\n        height: 20px;\n        width: 20px;\n        fill: var(--sdds-data-table-color)\n      }\n    }\n  }\n}\n\n:host(.sdds-table--compact) {\n  height: 32px;\n\n  .sdds-table__footer-cell {\n    .sdds-table__pagination {\n      height: 32px;\n\n      .sdds-table__page-selector-input {\n        height: 24px;\n      }\n\n      .sdds-table__footer-btn {\n        height: 28px;\n        width: 28px;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Listen,\n  State,\n  Event,\n  EventEmitter,\n  Prop,\n  Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\nfunction removeShakeAnimation(e: AnimationEvent & { target: HTMLElement }) {\n  e.target.classList.remove('sdds-table__page-selector-input--shake');\n}\n\n@Component({\n  tag: 'sdds-table-footer',\n  styleUrl: 'table-footer.scss',\n  shadow: true,\n})\nexport class TableFooter {\n  /** Enable pagination and show pagination controls  */\n  @Prop({ reflect: true }) enablePagination: boolean = false;\n\n  /** Sets how many rows to display when pagination is enabled */\n  @Prop({ reflect: true }) rowsPerPage: number = 5;\n\n  /** Prop to enable client controlled pagination  */\n  @Prop({ reflect: true }) enableClientPagination: boolean = false;\n\n  /** Prop for client to set current page number */\n  @Prop({ reflect: true }) clientPaginationValue: number = 1;\n\n  /** Prop for client to set max number of pages */\n  @Prop({ reflect: true }) clientMaxPages: number = 1;\n\n  /** In case that automatic count of columns does not work, user can manually set this one. Take in mind that expandable control is column too */\n  @Prop() clientSetColumnsNumber: number = null;\n\n  /** Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component */\n  @Prop() disablePaginationFunction: boolean = false;\n\n  /** State that memorize number of columns to display colSpan correctly - set from parent level */\n  @State() columnsNumber: number = 0;\n\n  /** Total number of pages, number of the rows divided with number of rows per page */\n  @State() numberOfPages: number = 0;\n\n  /** Initial value for pagination in input element */\n  @State() paginationValue: number = 1;\n\n  /** Temporarily disable pagination - due to search - set from parent level */\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** @internal Event that footer sends out in order to receive other necessary information from other subcomponents */\n  @Event({\n    eventName: 'internalSddsEnablePagination',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsEnablePagination: 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  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n\n    const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;\n\n    const numberOfColumns =\n      this.host.parentElement.querySelector('sdds-table-header').childElementCount;\n\n    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);\n\n    if (this.clientSetColumnsNumber !== null) {\n      this.columnsNumber = this.clientSetColumnsNumber;\n    } else {\n      this.columnsNumber = numberOfColumns;\n    }\n\n    this.internalSddsEnablePagination.emit(this.tableId);\n  }\n\n  paginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.paginationValue >= 2) {\n      this.paginationValue--;\n      this.runPagination();\n    }\n  };\n\n  paginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.paginationValue <= this.numberOfPages) {\n      this.paginationValue++;\n      this.runPagination();\n    }\n  };\n\n  paginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.numberOfPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.paginationValue = event.target.max;\n    } else {\n      this.paginationValue = event.target.value;\n    }\n    this.runPagination();\n  }\n\n  @Listen('internalSddsPagination', { target: 'body' })\n  sddsPaginationListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail) {\n      this.runPagination();\n    }\n  }\n\n  runPagination = () => {\n    if (!this.disablePaginationFunction) {\n      // grab all rows in body\n      const dataRowsPagination = this.host.parentNode\n        .querySelector('sdds-table-body')\n        .querySelectorAll('.sdds-table__row');\n\n      dataRowsPagination.forEach((item, i) => {\n        // for making logic easier 1st result, 2nd result...\n        const index = i + 1;\n\n        if (this.tempPaginationDisable) {\n          this.paginationValue = 1;\n        } else {\n          const lastResult = this.rowsPerPage * this.paginationValue;\n          const firstResult = lastResult - this.rowsPerPage;\n\n          if (index > firstResult && index <= lastResult) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        }\n      });\n    }\n  };\n\n  /* Client based functions below */\n\n  /** Event to send current page value back to sdds-table-body component, can also be listened to in order to implement custom pagination logic. */\n  @Event({\n    eventName: 'sddsPageChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsPageChange: EventEmitter<any>;\n\n  sendPaginationValue(value) {\n    this.sddsPageChange.emit([this.tableId, value]);\n  }\n\n  clientPaginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.clientPaginationValue >= 2) {\n      this.clientPaginationValue--;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.clientPaginationValue <= this.clientMaxPages) {\n      this.clientPaginationValue++;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.clientMaxPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.clientPaginationValue = event.target.max;\n    } else {\n      this.clientPaginationValue = event.target.value;\n    }\n    this.sendPaginationValue(this.clientPaginationValue);\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <tr class=\"sdds-table__footer-row\">\n          <td class=\"sdds-table__footer-cell\" colSpan={this.columnsNumber}>\n            {this.enablePagination && !this.enableClientPagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.numberOfPages}\n                    value={this.paginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.paginationInputChange(event)}\n                    onFocusout={(event) => this.paginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                    disabled={this.tempPaginationDisable}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.tempPaginationDisable ? 1 : this.numberOfPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.paginationValue <= 1 || this.tempPaginationDisable}\n                    onClick={(event) => this.paginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={\n                      this.paginationValue >= this.numberOfPages || this.tempPaginationDisable\n                    }\n                    onClick={(event) => this.paginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n            {this.enableClientPagination && !this.enablePagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.clientMaxPages}\n                    value={this.clientPaginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.clientPaginationInputChange(event)}\n                    onFocusout={(event) => this.clientPaginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.clientMaxPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue <= 1}\n                    onClick={(event) => this.clientPaginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue >= this.clientMaxPages}\n                    onClick={(event) => this.clientPaginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        d=\"M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

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

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

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

package/dist/types/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.d.ts

@@ -1,13 +0,0 @@
-export declare class SddsBreadcrumbLink {
-  /** Boolean for the current link */
-  current: boolean;
-  /** Href for the link */
-  href: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
-  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
-  /** Toggle the disabled state for the breadcrumb */
-  disabled: boolean;
-  render(): any;
-}

package/dist/types/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.d.ts

@@ -1,13 +0,0 @@
-import { HostElement } from '../../../../stencil-public-runtime';
-export declare class SddsFooterLink {
-  /** URL for the link */
-  linkHref: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
-  /** 'noopener' is a security measure for legacy browsers that prevents the opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
-  host: HostElement;
-  parentIsTopPart: boolean;
-  connectedCallback(): void;
-  render(): any;
-}

package/dist/types/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.d.ts

@@ -1,11 +0,0 @@
-import { HostElement } from '../../../../stencil-public-runtime';
-export declare class SddsFooterLinkGroup {
-  /** Title text for the link group, only valid on top part of footer. */
-  titleText: string;
-  host: HostElement;
-  open: boolean;
-  rightSlot: boolean;
-  parentIsTopPart: boolean;
-  connectedCallback(): void;
-  render(): any;
-}

package/dist/types/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.d.ts

@@ -1,16 +0,0 @@
-export declare class SddsFolderTabsLink {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  /** Href for the link */
-  href: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
-  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
-  tabWidth: number;
-  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
-  setTabWidth(width: number): Promise<void>;
-  render(): any;
-}

package/dist/types/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.d.ts

@@ -1,7 +0,0 @@
-export declare class SddsInlineTabsButton {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  render(): any;
-}

package/dist/types/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.d.ts

@@ -1,13 +0,0 @@
-export declare class SddsInlineTabsLink {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  /** Href for the link */
-  href: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
-  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
-  render(): any;
-}

package/dist/types/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.d.ts

@@ -1,7 +0,0 @@
-export declare class SddsNavigationTabsButton {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  render(): any;
-}

package/dist/types/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.d.ts

@@ -1,13 +0,0 @@
-export declare class SddsNavigationTabsLink {
-  /** Disables the tab. */
-  disabled: boolean;
-  /** Marks the tab as the selected one. */
-  selected: boolean;
-  /** Href for the link */
-  href: string;
-  /** Where to open the linked URL */
-  target: '_self' | '_blank' | '_parent' | '_top';
-  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */
-  rel: string;
-  render(): any;
-}