@scania/tegel 0.0.4 → 0.0.5

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"}

package/dist/tegel/{p-9904d7ec.entry.js → p-90af19c6.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as d,h as s,H as o,g as t}from"./p-0b4eba86.js";const r=":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-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{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .sdds-table__header-cell--checkbox{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-data-table-color);background-color:var(--sdds-data-table-header-background);border-bottom:1px solid var(--sdds-data-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input{display:none}:host .sdds-table__expand-control-container .sdds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__expand-control-container .sdds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(sdds-header-cell:hover){background-color:var(--sdds-data-table-header-background-hover)}:host(.sdds-table--compact) .sdds-table__header-cell--checkbox{height:32px}:host(.sdds-table--compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__header-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--toolbar-available) .sdds-table__header-cell--checkbox{border-top-left-radius:0}";const a=["enableMultiselect","enableExpandableRows","verticalDividers","compactDesign","noMinWidth"];const c=class{constructor(s){e(this,s);this.mainCheckboxSelectedEvent=d(this,"mainCheckboxSelectedEvent",7);this.enableMultiselect=false;this.enableExpandableRows=false;this.mainCheckboxSelected=false;this.mainExpendSelected=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.whiteBackground=false;this.enableToolbarDesign=false;this.tableId=""}tablePropsChangedEventListener(e){if(this.tableId===e.detail.tableId){e.detail.changed.filter((e=>a.includes(e))).forEach((d=>{if(typeof this[d]==="undefined"){throw new Error(`Table prop is not supported: ${d}`)}this[d]=e.detail[d]}))}}updateMainCheckboxEventListener(e){const[d,s]=e.detail;if(this.tableId===d){this.mainCheckboxSelected=s}}singleRowExpandedEventListener(e){if(this.tableId===e.detail[0]){setTimeout((()=>{this.bodyExpandClicked()}),100)}}bodyExpandClicked(){const e=this.host.parentElement.querySelector("sdds-table-body").getElementsByClassName("sdds-table__row-extend--active").length;const d=this.host.parentElement.querySelector("sdds-table-body").getElementsByTagName("sdds-table-body-row-expendable").length;if(d===e){this.mainExpendSelected=true}else{this.mainExpendSelected=false}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){a.forEach((e=>{this[e]=this.tableEl[e]}))}componentWillRender(){this.enableToolbarDesign=this.host.closest("sdds-table").getElementsByTagName("sdds-table-toolbar").length>=1}headCheckBoxClicked(e){this.mainCheckboxSelected=e.currentTarget.checked;this.mainCheckboxSelectedEvent.emit([this.tableId,this.mainCheckboxSelected])}render(){return s(o,{class:{"sdds-table--compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--toolbar-available":this.enableToolbarDesign}},s("tr",null,this.enableMultiselect&&s("th",{class:"sdds-table__header-cell sdds-table__header-cell--checkbox"},s("div",{class:"sdds-checkbox-item"},s("label",{class:"sdds-form-label sdds-form-label--data-table"},s("input",{class:"sdds-form-input",type:"checkbox",onChange:e=>this.headCheckBoxClicked(e),checked:this.mainCheckboxSelected})))),this.enableExpandableRows&&s("th",{class:"sdds-table__header-cell sdds-table__header-cell--checkbox"}),s("slot",null)))}get host(){return t(this)}};c.style=r;export{c as sdds_table_header};
-//# sourceMappingURL=p-9904d7ec.entry.js.map
+import{r as e,c as d,h as s,H as o,g as t}from"./p-387e1798.js";const r=":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-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{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .sdds-table__header-cell--checkbox{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-data-table-color);background-color:var(--sdds-data-table-header-background);border-bottom:1px solid var(--sdds-data-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input{display:none}:host .sdds-table__expand-control-container .sdds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__expand-control-container .sdds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(sdds-header-cell:hover){background-color:var(--sdds-data-table-header-background-hover)}:host(.sdds-table--compact) .sdds-table__header-cell--checkbox{height:32px}:host(.sdds-table--compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__header-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--toolbar-available) .sdds-table__header-cell--checkbox{border-top-left-radius:0}";const a=["enableMultiselect","enableExpandableRows","verticalDividers","compactDesign","noMinWidth"];const c=class{constructor(s){e(this,s);this.internalSddsMainCheckboxSelect=d(this,"internalSddsMainCheckboxSelect",7);this.enableMultiselect=false;this.enableExpandableRows=false;this.mainCheckboxSelected=false;this.mainExpendSelected=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.whiteBackground=false;this.enableToolbarDesign=false;this.tableId=""}internalSddsPropChangeListener(e){if(this.tableId===e.detail.tableId){e.detail.changed.filter((e=>a.includes(e))).forEach((d=>{if(typeof this[d]==="undefined"){throw new Error(`Table prop is not supported: ${d}`)}this[d]=e.detail[d]}))}}internalSddsMainCheckboxChangeListener(e){const[d,s]=e.detail;if(this.tableId===d){this.mainCheckboxSelected=s}}internalSddsRowExpandedListener(e){if(this.tableId===e.detail[0]){setTimeout((()=>{this.bodyExpandClicked()}),100)}}bodyExpandClicked(){const e=this.host.parentElement.querySelector("sdds-table-body").getElementsByClassName("sdds-table__row-extend--active").length;const d=this.host.parentElement.querySelector("sdds-table-body").getElementsByTagName("sdds-table-body-row-expendable").length;if(d===e){this.mainExpendSelected=true}else{this.mainExpendSelected=false}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){a.forEach((e=>{this[e]=this.tableEl[e]}))}componentWillRender(){this.enableToolbarDesign=this.host.closest("sdds-table").getElementsByTagName("sdds-table-toolbar").length>=1}headCheckBoxClicked(e){this.mainCheckboxSelected=e.currentTarget.checked;this.internalSddsMainCheckboxSelect.emit([this.tableId,this.mainCheckboxSelected])}render(){return s(o,{class:{"sdds-table--compact":this.compactDesign,"sdds-table--divider":this.verticalDividers,"sdds-table--toolbar-available":this.enableToolbarDesign}},s("tr",null,this.enableMultiselect&&s("th",{class:"sdds-table__header-cell sdds-table__header-cell--checkbox"},s("div",{class:"sdds-checkbox-item"},s("label",{class:"sdds-form-label sdds-form-label--data-table"},s("input",{class:"sdds-form-input",type:"checkbox",onChange:e=>this.headCheckBoxClicked(e),checked:this.mainCheckboxSelected})))),this.enableExpandableRows&&s("th",{class:"sdds-table__header-cell sdds-table__header-cell--checkbox"}),s("slot",null)))}get host(){return t(this)}};c.style=r;export{c as sdds_table_header};
+//# sourceMappingURL=p-90af19c6.entry.js.map

package/dist/tegel/p-90af19c6.entry.js.map

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

package/dist/tegel/{p-262dca00.entry.js → p-a2cbef2c.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,h as e,H as a}from"./p-0b4eba86.js";const r=":host .message-wrapper{display:flex;padding:16px;background-color:var(--sdds-message-background);border-radius:4px}:host .message-wrapper.information{border-left:4px solid var(--sdds-information)}:host .message-wrapper.information sdds-icon{color:var(--sdds-information)}:host .message-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .message-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .message-wrapper.error{background-color:var(--sdds-message-type-error-background);border-left:4px solid var(--sdds-negative)}:host .message-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .message-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .message-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .message-wrapper.message-minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .message-wrapper.message-minimal .message-header{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .message-wrapper.message-minimal sdds-icon{padding-right:8px}:host sdds-icon{padding-right:16px}:host .message-content{display:flex;flex-direction:column;gap:4px;color:var(--sdds-message-color);padding:2px 0}:host .message-content .message-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host .message-content .message-extended-message{color:var(--sdds-message-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .sdds-mode-variant-primary{--sdds-message-background:var(--sdds-message-background-primary)}:host .sdds-mode-variant-secondary{--sdds-message-background:var(--sdds-message-background-secondary)}";const d=class{constructor(e){s(this,e);this.getIconName=()=>{switch(this.type){case"information":return"info";case"error":return"error";case"warning":return"warning";case"success":return"tick";default:return"info"}};this.header=undefined;this.modeVariant=null;this.type="information";this.noIcon=false;this.minimal=false}render(){return e(a,null,e("div",{class:`\n        message-wrapper ${this.type}\n        ${this.minimal?"message-minimal":""}\n        ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},!this.noIcon&&e("sdds-icon",{name:this.getIconName(),size:"20px"}),e("div",{class:`message-content`},this.header&&e("div",{class:"message-header"},this.header),!this.minimal&&e("div",{class:"message-extended-message"},e("slot",null)))))}};d.style=r;export{d as sdds_message};
-//# sourceMappingURL=p-262dca00.entry.js.map
+import{r as s,h as e,H as a}from"./p-387e1798.js";const r=":host .message-wrapper{display:flex;padding:16px;background-color:var(--sdds-message-background);border-radius:4px}:host .message-wrapper.information{border-left:4px solid var(--sdds-information)}:host .message-wrapper.information sdds-icon{color:var(--sdds-information)}:host .message-wrapper.success{border-left:4px solid var(--sdds-positive)}:host .message-wrapper.success sdds-icon{color:var(--sdds-positive)}:host .message-wrapper.error{background-color:var(--sdds-message-type-error-background);border-left:4px solid var(--sdds-negative)}:host .message-wrapper.error sdds-icon{color:var(--sdds-negative)}:host .message-wrapper.warning{border-left:4px solid var(--sdds-warning)}:host .message-wrapper.warning sdds-icon{color:var(--sdds-warning)}:host .message-wrapper.message-minimal{border:none;display:flex;align-items:center;padding:0;background-color:transparent}:host .message-wrapper.message-minimal .message-header{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .message-wrapper.message-minimal sdds-icon{padding-right:8px}:host sdds-icon{padding-right:16px}:host .message-content{display:flex;flex-direction:column;gap:4px;color:var(--sdds-message-color);padding:2px 0}:host .message-content .message-header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host .message-content .message-extended-message{color:var(--sdds-message-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .sdds-mode-variant-primary{--sdds-message-background:var(--sdds-message-background-primary)}:host .sdds-mode-variant-secondary{--sdds-message-background:var(--sdds-message-background-secondary)}";const d=class{constructor(e){s(this,e);this.getIconName=()=>{switch(this.type){case"information":return"info";case"error":return"error";case"warning":return"warning";case"success":return"tick";default:return"info"}};this.header=undefined;this.modeVariant=null;this.type="information";this.noIcon=false;this.minimal=false}render(){return e(a,null,e("div",{class:`\n        message-wrapper ${this.type}\n        ${this.minimal?"message-minimal":""}\n        ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},!this.noIcon&&e("sdds-icon",{name:this.getIconName(),size:"20px"}),e("div",{class:`message-content`},this.header&&e("div",{class:"message-header"},this.header),!this.minimal&&e("div",{class:"message-extended-message"},e("slot",null)))))}};d.style=r;export{d as sdds_message};
+//# sourceMappingURL=p-a2cbef2c.entry.js.map

package/dist/tegel/{p-b2e46497.entry.js → p-a5cd0006.entry.js}

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

package/dist/tegel/{p-72099402.entry.js → p-a61db32b.entry.js}

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["sddsInlineTabsButtonCss","SddsInlineTabsButton","render","h","Host","role","class","this","selected","disabled"],"sources":["./src/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.scss?tag=sdds-inline-tabs-button&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-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    all: unset;\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    color: var(--sdds-navigation-tabs-tab-color);\n    padding: 8px 4px;\n    margin-right: 32px;\n    text-decoration: none;\n    display: block;\n    position: relative;\n    transition: color 0.15s ease-in-out 0s;\n    white-space: nowrap;\n    background-color: transparent;\n    border: 0;\n\n    .label {\n      margin: 12px 0;\n    }\n\n    &:hover {\n      cursor: pointer;\n\n      &::after {\n        width: 100%;\n      }\n    }\n\n    &:focus-visible {\n      .label {\n        @include sdds-focus-state;\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-inline-tabs-tab-indicator-background-hover);\n      transition: width 0.15s ease-in-out 0s;\n      z-index: 1;\n    }\n\n    &.selected {\n      color: var(--sdds-inline-tabs-tab-color-selected);\n\n      &::after {\n        width: 100%;\n        background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n      }\n    }\n\n    &.disabled {\n      color: var(--sdds-inline-tabs-tab-color-disabled);\n      pointer-events: none;\n\n      .label {\n        opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);\n      }\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-inline-tabs-button',\n  styleUrl: 'sdds-inline-tabs-button.scss',\n  shadow: true,\n})\nexport class SddsInlineTabsButton {\n  /** Disables the tab. */\n  @Prop() disabled: boolean = false;\n\n  /** Marks the tab as the selected one. */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class={`${this.selected ? 'selected' : ''}\n        ${this.disabled ? 'disabled' : ''}`}\n          disabled={this.disabled}\n        >\n          <div class=\"label\">\n            <slot></slot>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA0B,ixC,MCOnBC,EAAoB,M,uCAEH,M,cAGA,K,CAE5BC,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,YACTF,EAAA,UACEG,MAAO,GAAGC,KAAKC,SAAW,WAAa,eACvCD,KAAKE,SAAW,WAAa,KAC7BA,SAAUF,KAAKE,UAEfN,EAAA,OAAKG,MAAM,SACTH,EAAA,e"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["inlineTabsCss","InlineTabsFullbleed","this","navWrapperElement","componentWidth","buttonsWidth","scrollWidth","addResizeObserver","resizeObserver","ResizeObserver","entries","forEach","entry","contentRect","width","navButtons","Array","from","host","children","navButton","style","window","getComputedStyle","clientWidth","parseFloat","marginLeft","marginRight","evaluateScrollButtons","showLeftScroll","showRightScroll","observe","async","tabIndex","disabled","element","removeAttribute","map","index","setAttribute","selectedTab","tab","innerText","selectedTabIndex","handleSelectedTabChange","sddsChange","emit","connectedCallback","item","addEventListener","selected","classList","add","length","componentDidLoad","componentWillRender","componentDidRender","scrollRight","scroll","scrollLeft","render","h","Host","class","modeVariant","role","ref","el","onClick","name","size"],"sources":["./src/components/tabs/inline-tabs/inline-tabs.scss?tag=sdds-inline-tabs&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs.tsx"],"sourcesContent":["@import '../../../mixins/focus-state';\n@import '../../../mixins/box-sizing';\n@import '../../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: flex;\n  background-color: var(--sdds-inline-tabs-background);\n  position: relative;\n\n  &::after {\n    content: ' ';\n    display: block;\n    border-bottom: 1px solid var(--sdds-inline-tabs-horizontal-divider-background);\n    opacity: var(--sdds-inline-tabs-horizontal-divider-opacity);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    position: absolute;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-wrap: nowrap;\n    white-space: nowrap;\n    width: 100%;\n    overflow-x: scroll;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .scroll-right-button {\n    right: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-left-button {\n    left: 0;\n    z-index: calc(z(tab) + 1);\n  }\n\n  .scroll-right-button,\n  .scroll-left-button {\n    color: var(--sdds-folder-tabs-scroll-btn-color);\n    cursor: pointer;\n    border: 0;\n    width: 0;\n    background-color: var(--sdds-inline-tabs-scroll-btn-background);\n    display: none;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    pointer-events: none;\n    position: sticky;\n\n    &.show {\n      min-width: 48px;\n      display: block;\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:hover {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-hover);\n    }\n\n    &:active {\n      background-color: var(--sdds-folder-tabs-scroll-btn-background-active);\n    }\n\n    &:focus {\n      @include sdds-focus-state;\n    }\n\n    svg {\n      fill: var(--sdds-folder-tabs-scroll-btn-color);\n    }\n  }\n}\n","import { Component, Host, State, Element, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { HostElement, Method, Watch } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-inline-tabs',\n  styleUrl: 'inline-tabs.scss',\n  shadow: true,\n})\nexport class InlineTabsFullbleed {\n  /** Variant of the tabs, primary= on white, secondary= on grey50 */\n  @Prop() modeVariant: 'primary' | 'secondary' = 'primary';\n\n  @Element() host: HostElement;\n\n  @State() showLeftScroll: boolean = false;\n\n  @State() showRightScroll: boolean = false;\n\n  @State() selectedTab: {\n    tab: string;\n    tabIndex: number;\n  };\n\n  @State() buttonWidth: number = 0; // current calculated width of the largest nav button\n\n  private navWrapperElement: HTMLElement = null; // reference to container with nav buttons\n\n  private componentWidth: number = 0; // visible width of this component\n\n  private buttonsWidth: number = 0; // total width of all nav items combined\n\n  private scrollWidth: number = 0; // total amount that is possible to scroll in the nav wrapper\n\n  private children: Array<HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement>;\n\n  /** Selects a tab based on tabindex, will not select a disabled tab. */\n  @Method()\n  async selectTab(tabIndex: number) {\n    if (!this.children[tabIndex].disabled) {\n      this.children.forEach((element) => element.removeAttribute('selected'));\n      this.children = this.children.map((element, index) => {\n        if (index === tabIndex) {\n          element.setAttribute('selected', '');\n          this.selectedTab = {\n            tab: element.innerText,\n            tabIndex: index,\n          };\n        }\n        return element;\n      });\n    }\n    return {\n      selectedTab: this.selectedTab.tab,\n      selectedTabIndex: this.selectedTab.tabIndex,\n    };\n  }\n\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    selectedTab: {\n      tab: string;\n      tabIndex: number;\n    };\n  }>;\n\n  @Watch('selectedTab')\n  handleSelectedTabChange() {\n    this.host.setAttribute('selected-tab', this.selectedTab.tab);\n    this.host.setAttribute('selected-tab-index', `${this.selectedTab.tabIndex}`);\n    this.sddsChange.emit({\n      selectedTab: this.selectedTab,\n    });\n  }\n\n  connectedCallback() {\n    this.children = Array.from(this.host.children) as Array<\n      HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement\n    >;\n    this.children = this.children.map((item, index) => {\n      item.addEventListener('click', () => {\n        if (!item.disabled) {\n          this.children.forEach((element) => element.removeAttribute('selected'));\n          item.setAttribute('selected', '');\n          this.selectedTab = {\n            tab: item.innerText,\n            tabIndex: index,\n          };\n        }\n      });\n      if (item.selected) {\n        this.selectedTab = {\n          tab: item.innerText,\n          tabIndex: index,\n        };\n      }\n      return item;\n    });\n    this.children[0].classList.add('first');\n    this.children[this.children.length - 1].classList.add('last');\n  }\n\n  componentDidLoad() {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n\n          navButton.classList.add('sdds-inline-tabs-fullbleed--tab');\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n  }\n\n  componentWillRender() {\n    if (!this.selectedTab) {\n      this.children = Array.from(this.host.children) as Array<\n        HTMLSddsInlineTabsButtonElement | HTMLSddsInlineTabsLinkElement\n      >;\n      this.children = this.children.map((item, index) => {\n        if (item.selected) {\n          this.selectedTab = {\n            tab: item.innerText,\n            tabIndex: index,\n          };\n        }\n        return item;\n      });\n    }\n  }\n\n  componentDidRender() {\n    if (this.buttonsWidth > this.componentWidth) {\n      this.evaluateScrollButtons();\n    } else {\n      this.showLeftScroll = false;\n      this.showRightScroll = false;\n    }\n    this.addResizeObserver();\n  }\n\n  scrollRight() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll + 95;\n    this.evaluateScrollButtons();\n  }\n\n  scrollLeft() {\n    const scroll = this.navWrapperElement.scrollLeft;\n    this.navWrapperElement.scrollLeft = scroll - 10;\n    this.evaluateScrollButtons();\n  }\n\n  evaluateScrollButtons() {\n    const scroll = this.navWrapperElement.scrollLeft;\n\n    if (scroll >= this.scrollWidth) {\n      this.showRightScroll = false;\n    } else {\n      this.showRightScroll = true;\n    }\n\n    if (scroll <= 0) {\n      this.showLeftScroll = false;\n    } else {\n      this.showLeftScroll = true;\n    }\n  }\n\n  addResizeObserver = () => {\n    const resizeObserver = new ResizeObserver((entries) => {\n      entries.forEach((entry) => {\n        const componentWidth = entry.contentRect.width;\n        let buttonsWidth = 0;\n\n        const navButtons = Array.from(this.host.children);\n        navButtons.forEach((navButton: HTMLElement) => {\n          const style = window.getComputedStyle(navButton);\n          buttonsWidth +=\n            navButton.clientWidth + parseFloat(style.marginLeft) + parseFloat(style.marginRight);\n        });\n\n        this.componentWidth = componentWidth;\n        this.buttonsWidth = buttonsWidth;\n        this.scrollWidth = buttonsWidth - componentWidth;\n\n        if (this.buttonsWidth > this.componentWidth) {\n          this.evaluateScrollButtons();\n        } else {\n          this.showLeftScroll = false;\n          this.showRightScroll = false;\n        }\n      });\n    });\n\n    resizeObserver.observe(this.navWrapperElement);\n  };\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n        <div\n          role=\"list\"\n          class=\"wrapper\"\n          ref={(el) => {\n            this.navWrapperElement = el as HTMLElement;\n          }}\n        >\n          <button\n            class={`scroll-left-button ${this.showLeftScroll ? 'show' : ''}`}\n            onClick={() => this.scrollLeft()}\n            disabled={!this.showLeftScroll}\n          >\n            <sdds-icon name=\"chevron_left\" size=\"20px\"></sdds-icon>\n          </button>\n          <slot />\n          <button\n            class={`scroll-right-button ${this.showRightScroll ? 'show' : ''}`}\n            onClick={() => this.scrollRight()}\n            disabled={!this.showRightScroll}\n          >\n            <sdds-icon name=\"chevron_right\" size=\"20px\"></sdds-icon>\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,8/C,MCQTC,EAAmB,M,gEAiBtBC,KAAAC,kBAAiC,KAEjCD,KAAAE,eAAyB,EAEzBF,KAAAG,aAAuB,EAEvBH,KAAAI,YAAsB,EAiK9BJ,KAAAK,kBAAoB,KAClB,MAAMC,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMR,EAAiBQ,EAAMC,YAAYC,MACzC,IAAIT,EAAe,EAEnB,MAAMU,EAAaC,MAAMC,KAAKf,KAAKgB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtCf,GACEe,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,YAAY,IAGxFzB,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK0B,uB,KACA,CACL1B,KAAK2B,eAAiB,MACtB3B,KAAK4B,gBAAkB,K,IAEzB,IAGJtB,EAAeuB,QAAQ7B,KAAKC,kBAAkB,E,iBAhND,U,oBAIZ,M,qBAEC,M,4CAOL,C,CAc/B6B,gBAAgBC,GACd,IAAK/B,KAAKiB,SAASc,GAAUC,SAAU,CACrChC,KAAKiB,SAASR,SAASwB,GAAYA,EAAQC,gBAAgB,cAC3DlC,KAAKiB,SAAWjB,KAAKiB,SAASkB,KAAI,CAACF,EAASG,KAC1C,GAAIA,IAAUL,EAAU,CACtBE,EAAQI,aAAa,WAAY,IACjCrC,KAAKsC,YAAc,CACjBC,IAAKN,EAAQO,UACbT,SAAUK,E,CAGd,OAAOH,CAAO,G,CAGlB,MAAO,CACLK,YAAatC,KAAKsC,YAAYC,IAC9BE,iBAAkBzC,KAAKsC,YAAYP,S,CAkBvCW,0BACE1C,KAAKgB,KAAKqB,aAAa,eAAgBrC,KAAKsC,YAAYC,KACxDvC,KAAKgB,KAAKqB,aAAa,qBAAsB,GAAGrC,KAAKsC,YAAYP,YACjE/B,KAAK2C,WAAWC,KAAK,CACnBN,YAAatC,KAAKsC,a,CAItBO,oBACE7C,KAAKiB,SAAWH,MAAMC,KAAKf,KAAKgB,KAAKC,UAGrCjB,KAAKiB,SAAWjB,KAAKiB,SAASkB,KAAI,CAACW,EAAMV,KACvCU,EAAKC,iBAAiB,SAAS,KAC7B,IAAKD,EAAKd,SAAU,CAClBhC,KAAKiB,SAASR,SAASwB,GAAYA,EAAQC,gBAAgB,cAC3DY,EAAKT,aAAa,WAAY,IAC9BrC,KAAKsC,YAAc,CACjBC,IAAKO,EAAKN,UACVT,SAAUK,E,KAIhB,GAAIU,EAAKE,SAAU,CACjBhD,KAAKsC,YAAc,CACjBC,IAAKO,EAAKN,UACVT,SAAUK,E,CAGd,OAAOU,CAAI,IAEb9C,KAAKiB,SAAS,GAAGgC,UAAUC,IAAI,SAC/BlD,KAAKiB,SAASjB,KAAKiB,SAASkC,OAAS,GAAGF,UAAUC,IAAI,O,CAGxDE,mBACE,MAAM9C,EAAiB,IAAIC,gBAAgBC,IACzCA,EAAQC,SAASC,IACf,MAAMR,EAAiBQ,EAAMC,YAAYC,MACzC,IAAIT,EAAe,EAEnB,MAAMU,EAAaC,MAAMC,KAAKf,KAAKgB,KAAKC,UACxCJ,EAAWJ,SAASS,IAClB,MAAMC,EAAQC,OAAOC,iBAAiBH,GACtCf,GACEe,EAAUI,YAAcC,WAAWJ,EAAMK,YAAcD,WAAWJ,EAAMM,aAE1EP,EAAU+B,UAAUC,IAAI,kCAAkC,IAG5DlD,KAAKE,eAAiBA,EACtBF,KAAKG,aAAeA,EACpBH,KAAKI,YAAcD,EAAeD,EAElC,GAAIF,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK0B,uB,KACA,CACL1B,KAAK2B,eAAiB,MACtB3B,KAAK4B,gBAAkB,K,IAEzB,IAGJtB,EAAeuB,QAAQ7B,KAAKC,kB,CAG9BoD,sBACE,IAAKrD,KAAKsC,YAAa,CACrBtC,KAAKiB,SAAWH,MAAMC,KAAKf,KAAKgB,KAAKC,UAGrCjB,KAAKiB,SAAWjB,KAAKiB,SAASkB,KAAI,CAACW,EAAMV,KACvC,GAAIU,EAAKE,SAAU,CACjBhD,KAAKsC,YAAc,CACjBC,IAAKO,EAAKN,UACVT,SAAUK,E,CAGd,OAAOU,CAAI,G,EAKjBQ,qBACE,GAAItD,KAAKG,aAAeH,KAAKE,eAAgB,CAC3CF,KAAK0B,uB,KACA,CACL1B,KAAK2B,eAAiB,MACtB3B,KAAK4B,gBAAkB,K,CAEzB5B,KAAKK,mB,CAGPkD,cACE,MAAMC,EAASxD,KAAKC,kBAAkBwD,WACtCzD,KAAKC,kBAAkBwD,WAAaD,EAAS,GAC7CxD,KAAK0B,uB,CAGP+B,aACE,MAAMD,EAASxD,KAAKC,kBAAkBwD,WACtCzD,KAAKC,kBAAkBwD,WAAaD,EAAS,GAC7CxD,KAAK0B,uB,CAGPA,wBACE,MAAM8B,EAASxD,KAAKC,kBAAkBwD,WAEtC,GAAID,GAAUxD,KAAKI,YAAa,CAC9BJ,KAAK4B,gBAAkB,K,KAClB,CACL5B,KAAK4B,gBAAkB,I,CAGzB,GAAI4B,GAAU,EAAG,CACfxD,KAAK2B,eAAiB,K,KACjB,CACL3B,KAAK2B,eAAiB,I,EAiC1B+B,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAG7D,KAAK8D,YAAc,qBAAqB9D,KAAK8D,cAAgB,MAC3EH,EAAA,OACEI,KAAK,OACLF,MAAM,UACNG,IAAMC,IACJjE,KAAKC,kBAAoBgE,CAAiB,GAG5CN,EAAA,UACEE,MAAO,sBAAsB7D,KAAK2B,eAAiB,OAAS,KAC5DuC,QAAS,IAAMlE,KAAKyD,aACpBzB,UAAWhC,KAAK2B,gBAEhBgC,EAAA,aAAWQ,KAAK,eAAeC,KAAK,UAEtCT,EAAA,aACAA,EAAA,UACEE,MAAO,uBAAuB7D,KAAK4B,gBAAkB,OAAS,KAC9DsC,QAAS,IAAMlE,KAAKuD,cACpBvB,UAAWhC,KAAK4B,iBAEhB+B,EAAA,aAAWQ,KAAK,gBAAgBC,KAAK,W"}

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

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

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

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

package/dist/tegel/{p-92869ad1.entry.js → p-b6fc0de7.entry.js}

@@ -1,2 +1,2 @@
-import{r as d,h as s,H as n,g as r}from"./p-0b4eba86.js";const o=":root,.sdds-mode-light{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-primary-background-disabled-secondary:var(--sdds-white);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-black);--sdds-btn-secondary-border-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-black);--sdds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-black);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-icon-secondary-fill-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-color-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--sdds-btn-icon-secondary-color-focus:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-black);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-black);--sdds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-black);--sdds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-black);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-danger-background-disabled-secondary:var(--sdds-white);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-mode-dark{--sdds-btn-primary-background:var(--sdds-blue-400);--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-background-active:var(--sdds-blue-300);--sdds-btn-primary-background-focus:var(--sdds-blue-600);--sdds-btn-primary-border-color-focus:var(--sdds-blue-400);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-primary-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-600);--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-white);--sdds-btn-secondary-border-color:var(--sdds-white);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-white);--sdds-btn-secondary-border-color-active:var(--sdds-white);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-white);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:var(--sdds-white);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-grey-50);--sdds-btn-icon-secondary-color:var(--sdds-grey-50);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-white);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-white);--sdds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-white);--sdds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-white);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-grey-50);--sdds-btn-icon-ghost-color:var(--sdds-grey-50);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-danger-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-on-white-bg{--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-secondary-disabled);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-secondary-disabled)}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:16px;line-height:1;position:absolute;right:0}.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:16px;line-height:1.25}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-primary-icon-fill);color:var(--sdds-btn-primary-icon-color);font-size:16px}.sdds-btn{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--sdds-spacing-element-20);border:1px solid}.sdds-btn *{box-sizing:border-box}.sdds-btn:disabled,.sdds-btn.disabled{cursor:unset}.sdds-btn:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16);width:20px;height:20px;line-height:0}.sdds-btn.sdds-btn-xs{padding:var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}.sdds-btn.sdds-btn-xs:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm{padding:var(--sdds-spacing-element-12);height:40px}.sdds-btn.sdds-btn-sm.sdds-btn-only-icon{padding:11px}.sdds-btn.sdds-btn-sm:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-24);width:16px;height:16px}.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-12)}.sdds-btn.sdds-btn-md{padding:var(--sdds-spacing-element-16);height:48px}.sdds-btn.sdds-btn-md.sdds-btn-only-icon{padding:13px}.sdds-btn.sdds-btn-md:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-md span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-20)}.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-lg{padding:var(--sdds-spacing-element-20);height:56px}.sdds-btn.sdds-btn-lg.sdds-btn-only-icon{padding:17px}.sdds-btn.sdds-btn-lg:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-lg span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:28px}.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-fullbleed{width:inherit;display:flex;justify-content:center}.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon,.sdds-btn.sdds-btn-fullbleed.sdds-btn-icon{margin-left:var(--sdds-spacing-element-8)}.sdds-btn span.sdds-btn-text{align-self:baseline}.sdds-btn.sdds-btn-primary{background:var(--sdds-btn-primary-background);border-color:var(--sdds-btn-primary-border-color);color:var(--sdds-btn-primary-color);outline-color:var(--sdds-btn-primary-outline-color)}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill);color:var(--sdds-btn-icon-primary-fill);fill:var(--sdds-btn-icon-primary-color);color:var(--sdds-btn-icon-primary-color);font-size:16px}.sdds-btn.sdds-btn-primary:hover{background:var(--sdds-btn-primary-background-hover);border-color:var(--sdds-btn-primary-border-color-hover);color:var(--sdds-btn-primary-color-hover);outline-color:var(--sdds-btn-primary-outline-color-hover)}.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-hover);color:var(--sdds-btn-icon-primary-fill-hover);fill:var(--sdds-btn-icon-primary-color-hover);color:var(--sdds-btn-icon-primary-color-hover)}.sdds-btn.sdds-btn-primary:focus{background:var(--sdds-btn-primary-background-focus);border-color:var(--sdds-btn-primary-border-color-focus);color:var(--sdds-btn-primary-color-focus);outline-color:var(--sdds-btn-primary-outline-color-focus)}.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-focus);color:var(--sdds-btn-icon-primary-fill-focus);fill:var(--sdds-btn-icon-primary-color-focus);color:var(--sdds-btn-icon-primary-color-focus)}.sdds-btn.sdds-btn-primary:active,.sdds-btn.sdds-btn-primary.active{background:var(--sdds-btn-primary-background-active);border-color:var(--sdds-btn-primary-border-color-active);color:var(--sdds-btn-primary-color-active);outline-color:var(--sdds-btn-primary-outline-color-active)}.sdds-btn.sdds-btn-primary.disabled,.sdds-btn.sdds-btn-primary:disabled{cursor:not-allowed;background:var(--sdds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-primary-outline-color-disabled)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary{background:var(--sdds-btn-secondary-background);border-color:var(--sdds-btn-secondary-border-color);color:var(--sdds-btn-secondary-color);outline-color:var(--sdds-btn-secondary-outline-color)}.sdds-btn.sdds-btn-secondary .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill);color:var(--sdds-btn-icon-secondary-fill);fill:var(--sdds-btn-icon-secondary-color);color:var(--sdds-btn-icon-secondary-color);font-size:16px}.sdds-btn.sdds-btn-secondary:hover{background:var(--sdds-btn-secondary-background-hover);border-color:var(--sdds-btn-secondary-border-color-hover);color:var(--sdds-btn-secondary-color-hover);outline-color:var(--sdds-btn-secondary-outline-color-hover)}.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-hover);color:var(--sdds-btn-icon-secondary-fill-hover);fill:var(--sdds-btn-icon-secondary-color-hover);color:var(--sdds-btn-icon-secondary-color-hover)}.sdds-btn.sdds-btn-secondary:focus{background:var(--sdds-btn-secondary-background-focus);border-color:var(--sdds-btn-secondary-border-color-focus);color:var(--sdds-btn-secondary-color-focus);outline-color:var(--sdds-btn-secondary-outline-color-focus)}.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-focus);color:var(--sdds-btn-icon-secondary-fill-focus);fill:var(--sdds-btn-icon-secondary-color-focus);color:var(--sdds-btn-icon-secondary-color-focus)}.sdds-btn.sdds-btn-secondary:active,.sdds-btn.sdds-btn-secondary.active{background:var(--sdds-btn-secondary-background-active);border-color:var(--sdds-btn-secondary-border-color-active);color:var(--sdds-btn-secondary-color-active);outline-color:var(--sdds-btn-secondary-outline-color-active)}.sdds-btn.sdds-btn-secondary.disabled,.sdds-btn.sdds-btn-secondary:disabled{cursor:not-allowed;background:var(--sdds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-secondary-outline-color-disabled)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost{background:var(--sdds-btn-ghost-background);border-color:var(--sdds-btn-ghost-border-color);color:var(--sdds-btn-ghost-color);outline-color:var(--sdds-btn-ghost-outline-color)}.sdds-btn.sdds-btn-ghost .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill);color:var(--sdds-btn-icon-ghost-fill);fill:var(--sdds-btn-icon-ghost-color);color:var(--sdds-btn-icon-ghost-color);font-size:16px}.sdds-btn.sdds-btn-ghost:hover{background:var(--sdds-btn-ghost-background-hover);border-color:var(--sdds-btn-ghost-border-color-hover);color:var(--sdds-btn-ghost-color-hover);outline-color:var(--sdds-btn-ghost-outline-color-hover)}.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-hover);color:var(--sdds-btn-icon-ghost-fill-hover);fill:var(--sdds-btn-icon-ghost-color-hover);color:var(--sdds-btn-icon-ghost-color-hover)}.sdds-btn.sdds-btn-ghost:focus{background:var(--sdds-btn-ghost-background-focus);border-color:var(--sdds-btn-ghost-border-color-focus);color:var(--sdds-btn-ghost-color-focus);outline-color:var(--sdds-btn-ghost-outline-color-focus)}.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-focus);color:var(--sdds-btn-icon-ghost-fill-focus);fill:var(--sdds-btn-icon-ghost-color-focus);color:var(--sdds-btn-icon-ghost-color-focus)}.sdds-btn.sdds-btn-ghost:active,.sdds-btn.sdds-btn-ghost.active{background:var(--sdds-btn-ghost-background-active);border-color:var(--sdds-btn-ghost-border-color-active);color:var(--sdds-btn-ghost-color-active);outline-color:var(--sdds-btn-ghost-outline-color-active)}.sdds-btn.sdds-btn-ghost.disabled,.sdds-btn.sdds-btn-ghost:disabled{cursor:not-allowed;background:var(--sdds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-ghost-outline-color-disabled)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger{background:var(--sdds-btn-danger-background);border-color:var(--sdds-btn-danger-border-color);color:var(--sdds-btn-danger-color);outline-color:var(--sdds-btn-danger-outline-color)}.sdds-btn.sdds-btn-danger .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill);color:var(--sdds-btn-icon-danger-fill);fill:var(--sdds-btn-icon-danger-color);color:var(--sdds-btn-icon-danger-color);font-size:16px}.sdds-btn.sdds-btn-danger:hover{background:var(--sdds-btn-danger-background-hover);border-color:var(--sdds-btn-danger-border-color-hover);color:var(--sdds-btn-danger-color-hover);outline-color:var(--sdds-btn-danger-outline-color-hover)}.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-hover);color:var(--sdds-btn-icon-danger-fill-hover);fill:var(--sdds-btn-icon-danger-color-hover);color:var(--sdds-btn-icon-danger-color-hover)}.sdds-btn.sdds-btn-danger:focus{background:var(--sdds-btn-danger-background-focus);border-color:var(--sdds-btn-danger-border-color-focus);color:var(--sdds-btn-danger-color-focus);outline-color:var(--sdds-btn-danger-outline-color-focus)}.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-focus);color:var(--sdds-btn-icon-danger-fill-focus);fill:var(--sdds-btn-icon-danger-color-focus);color:var(--sdds-btn-icon-danger-color-focus)}.sdds-btn.sdds-btn-danger:active,.sdds-btn.sdds-btn-danger.active{background:var(--sdds-btn-danger-background-active);border-color:var(--sdds-btn-danger-border-color-active);color:var(--sdds-btn-danger-color-active);outline-color:var(--sdds-btn-danger-outline-color-active)}.sdds-btn.sdds-btn-danger.disabled,.sdds-btn.sdds-btn-danger:disabled{cursor:not-allowed;background:var(--sdds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-danger-outline-color-disabled)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}i.sdds-btn-icon[slot=icon]{line-height:1}:host(sdds-button){display:flex;align-items:center}:host(sdds-button) ::slotted([slot=icon]){width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]){width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button[fullbleed]){width:inherit;justify-content:center}:host(sdds-button[only-icon]) .sdds-btn-sm{padding:11px}:host(sdds-button[only-icon]) .sdds-btn-md{padding:13px}:host(sdds-button[only-icon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([only-icon])){display:flex;align-items:center}:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-24);width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-12)}:host(sdds-button:not([only-icon])) .sdds-btn-md ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-20);width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .sdds-btn-lg ::slotted([slot=icon]){margin-left:28px;width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}";const t=class{constructor(s){d(this,s);this.text="";this.type="primary";this.size="lg";this.disabled=false;this.fullbleed=false;this.modeVariant=null;this.onlyIcon=false}componentWillLoad(){if(this.text===""){this.onlyIcon=true;this.host.setAttribute("only-icon","")}}render(){return s(n,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("button",{class:`sdds-btn sdds-btn-${this.type} \n        ${`sdds-btn-${this.size}`}\n        ${this.disabled?"disabled":""}\n        ${this.fullbleed?"sdds-btn-fullbleed":""}\n        ${this.onlyIcon?"sdds-btn-only-icon":""}`},s("span",{class:"sdds-btn-text"},this.text),s("slot",{name:"icon"})))}get host(){return r(this)}};t.style=o;export{t as sdds_button};
-//# sourceMappingURL=p-92869ad1.entry.js.map
+import{r as d,h as s,H as n,g as r}from"./p-387e1798.js";const o=":root,.sdds-mode-light{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-primary-background-disabled-secondary:var(--sdds-white);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-black);--sdds-btn-secondary-border-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-black);--sdds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-black);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-icon-secondary-fill-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-color-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--sdds-btn-icon-secondary-color-focus:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-black);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-black);--sdds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-black);--sdds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-black);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-danger-background-disabled-secondary:var(--sdds-white);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}:root .sdds-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-mode-dark{--sdds-btn-primary-background:var(--sdds-blue-400);--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-background-active:var(--sdds-blue-300);--sdds-btn-primary-background-focus:var(--sdds-blue-600);--sdds-btn-primary-border-color-focus:var(--sdds-blue-400);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-primary-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-600);--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-white);--sdds-btn-secondary-border-color:var(--sdds-white);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-white);--sdds-btn-secondary-border-color-active:var(--sdds-white);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-white);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:var(--sdds-white);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-grey-50);--sdds-btn-icon-secondary-color:var(--sdds-grey-50);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-white);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-white);--sdds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-white);--sdds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-white);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-grey-50);--sdds-btn-icon-ghost-color:var(--sdds-grey-50);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-danger-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-on-white-bg{--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-secondary-disabled);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-secondary-disabled)}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:16px;line-height:1;position:absolute;right:0}.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:16px;line-height:1.25}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-primary-icon-fill);color:var(--sdds-btn-primary-icon-color);font-size:16px}.sdds-btn{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--sdds-spacing-element-20);border:1px solid}.sdds-btn *{box-sizing:border-box}.sdds-btn:disabled,.sdds-btn.disabled{cursor:unset}.sdds-btn:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16);width:20px;height:20px;line-height:0}.sdds-btn.sdds-btn-xs{padding:var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}.sdds-btn.sdds-btn-xs:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm{padding:var(--sdds-spacing-element-12);height:40px}.sdds-btn.sdds-btn-sm.sdds-btn-only-icon{padding:11px}.sdds-btn.sdds-btn-sm:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-24);width:16px;height:16px}.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-12)}.sdds-btn.sdds-btn-md{padding:var(--sdds-spacing-element-16);height:48px}.sdds-btn.sdds-btn-md.sdds-btn-only-icon{padding:13px}.sdds-btn.sdds-btn-md:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-md span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-20)}.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-lg{padding:var(--sdds-spacing-element-20);height:56px}.sdds-btn.sdds-btn-lg.sdds-btn-only-icon{padding:17px}.sdds-btn.sdds-btn-lg:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-lg span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:28px}.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-fullbleed{width:inherit;display:flex;justify-content:center}.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon,.sdds-btn.sdds-btn-fullbleed.sdds-btn-icon{margin-left:var(--sdds-spacing-element-8)}.sdds-btn span.sdds-btn-text{align-self:baseline}.sdds-btn.sdds-btn-primary{background:var(--sdds-btn-primary-background);border-color:var(--sdds-btn-primary-border-color);color:var(--sdds-btn-primary-color);outline-color:var(--sdds-btn-primary-outline-color)}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill);color:var(--sdds-btn-icon-primary-fill);fill:var(--sdds-btn-icon-primary-color);color:var(--sdds-btn-icon-primary-color);font-size:16px}.sdds-btn.sdds-btn-primary:hover{background:var(--sdds-btn-primary-background-hover);border-color:var(--sdds-btn-primary-border-color-hover);color:var(--sdds-btn-primary-color-hover);outline-color:var(--sdds-btn-primary-outline-color-hover)}.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-hover);color:var(--sdds-btn-icon-primary-fill-hover);fill:var(--sdds-btn-icon-primary-color-hover);color:var(--sdds-btn-icon-primary-color-hover)}.sdds-btn.sdds-btn-primary:focus{background:var(--sdds-btn-primary-background-focus);border-color:var(--sdds-btn-primary-border-color-focus);color:var(--sdds-btn-primary-color-focus);outline-color:var(--sdds-btn-primary-outline-color-focus)}.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-focus);color:var(--sdds-btn-icon-primary-fill-focus);fill:var(--sdds-btn-icon-primary-color-focus);color:var(--sdds-btn-icon-primary-color-focus)}.sdds-btn.sdds-btn-primary:active,.sdds-btn.sdds-btn-primary.active{background:var(--sdds-btn-primary-background-active);border-color:var(--sdds-btn-primary-border-color-active);color:var(--sdds-btn-primary-color-active);outline-color:var(--sdds-btn-primary-outline-color-active)}.sdds-btn.sdds-btn-primary.disabled,.sdds-btn.sdds-btn-primary:disabled{cursor:not-allowed;background:var(--sdds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-primary-outline-color-disabled)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary{background:var(--sdds-btn-secondary-background);border-color:var(--sdds-btn-secondary-border-color);color:var(--sdds-btn-secondary-color);outline-color:var(--sdds-btn-secondary-outline-color)}.sdds-btn.sdds-btn-secondary .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill);color:var(--sdds-btn-icon-secondary-fill);fill:var(--sdds-btn-icon-secondary-color);color:var(--sdds-btn-icon-secondary-color);font-size:16px}.sdds-btn.sdds-btn-secondary:hover{background:var(--sdds-btn-secondary-background-hover);border-color:var(--sdds-btn-secondary-border-color-hover);color:var(--sdds-btn-secondary-color-hover);outline-color:var(--sdds-btn-secondary-outline-color-hover)}.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-hover);color:var(--sdds-btn-icon-secondary-fill-hover);fill:var(--sdds-btn-icon-secondary-color-hover);color:var(--sdds-btn-icon-secondary-color-hover)}.sdds-btn.sdds-btn-secondary:focus{background:var(--sdds-btn-secondary-background-focus);border-color:var(--sdds-btn-secondary-border-color-focus);color:var(--sdds-btn-secondary-color-focus);outline-color:var(--sdds-btn-secondary-outline-color-focus)}.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-focus);color:var(--sdds-btn-icon-secondary-fill-focus);fill:var(--sdds-btn-icon-secondary-color-focus);color:var(--sdds-btn-icon-secondary-color-focus)}.sdds-btn.sdds-btn-secondary:active,.sdds-btn.sdds-btn-secondary.active{background:var(--sdds-btn-secondary-background-active);border-color:var(--sdds-btn-secondary-border-color-active);color:var(--sdds-btn-secondary-color-active);outline-color:var(--sdds-btn-secondary-outline-color-active)}.sdds-btn.sdds-btn-secondary.disabled,.sdds-btn.sdds-btn-secondary:disabled{cursor:not-allowed;background:var(--sdds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-secondary-outline-color-disabled)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost{background:var(--sdds-btn-ghost-background);border-color:var(--sdds-btn-ghost-border-color);color:var(--sdds-btn-ghost-color);outline-color:var(--sdds-btn-ghost-outline-color)}.sdds-btn.sdds-btn-ghost .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill);color:var(--sdds-btn-icon-ghost-fill);fill:var(--sdds-btn-icon-ghost-color);color:var(--sdds-btn-icon-ghost-color);font-size:16px}.sdds-btn.sdds-btn-ghost:hover{background:var(--sdds-btn-ghost-background-hover);border-color:var(--sdds-btn-ghost-border-color-hover);color:var(--sdds-btn-ghost-color-hover);outline-color:var(--sdds-btn-ghost-outline-color-hover)}.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-hover);color:var(--sdds-btn-icon-ghost-fill-hover);fill:var(--sdds-btn-icon-ghost-color-hover);color:var(--sdds-btn-icon-ghost-color-hover)}.sdds-btn.sdds-btn-ghost:focus{background:var(--sdds-btn-ghost-background-focus);border-color:var(--sdds-btn-ghost-border-color-focus);color:var(--sdds-btn-ghost-color-focus);outline-color:var(--sdds-btn-ghost-outline-color-focus)}.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-focus);color:var(--sdds-btn-icon-ghost-fill-focus);fill:var(--sdds-btn-icon-ghost-color-focus);color:var(--sdds-btn-icon-ghost-color-focus)}.sdds-btn.sdds-btn-ghost:active,.sdds-btn.sdds-btn-ghost.active{background:var(--sdds-btn-ghost-background-active);border-color:var(--sdds-btn-ghost-border-color-active);color:var(--sdds-btn-ghost-color-active);outline-color:var(--sdds-btn-ghost-outline-color-active)}.sdds-btn.sdds-btn-ghost.disabled,.sdds-btn.sdds-btn-ghost:disabled{cursor:not-allowed;background:var(--sdds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-ghost-outline-color-disabled)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger{background:var(--sdds-btn-danger-background);border-color:var(--sdds-btn-danger-border-color);color:var(--sdds-btn-danger-color);outline-color:var(--sdds-btn-danger-outline-color)}.sdds-btn.sdds-btn-danger .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill);color:var(--sdds-btn-icon-danger-fill);fill:var(--sdds-btn-icon-danger-color);color:var(--sdds-btn-icon-danger-color);font-size:16px}.sdds-btn.sdds-btn-danger:hover{background:var(--sdds-btn-danger-background-hover);border-color:var(--sdds-btn-danger-border-color-hover);color:var(--sdds-btn-danger-color-hover);outline-color:var(--sdds-btn-danger-outline-color-hover)}.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-hover);color:var(--sdds-btn-icon-danger-fill-hover);fill:var(--sdds-btn-icon-danger-color-hover);color:var(--sdds-btn-icon-danger-color-hover)}.sdds-btn.sdds-btn-danger:focus{background:var(--sdds-btn-danger-background-focus);border-color:var(--sdds-btn-danger-border-color-focus);color:var(--sdds-btn-danger-color-focus);outline-color:var(--sdds-btn-danger-outline-color-focus)}.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-focus);color:var(--sdds-btn-icon-danger-fill-focus);fill:var(--sdds-btn-icon-danger-color-focus);color:var(--sdds-btn-icon-danger-color-focus)}.sdds-btn.sdds-btn-danger:active,.sdds-btn.sdds-btn-danger.active{background:var(--sdds-btn-danger-background-active);border-color:var(--sdds-btn-danger-border-color-active);color:var(--sdds-btn-danger-color-active);outline-color:var(--sdds-btn-danger-outline-color-active)}.sdds-btn.sdds-btn-danger.disabled,.sdds-btn.sdds-btn-danger:disabled{cursor:not-allowed;background:var(--sdds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-danger-outline-color-disabled)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}i.sdds-btn-icon[slot=icon]{line-height:1}:host(sdds-button){display:flex;align-items:center}:host(sdds-button) ::slotted([slot=icon]){width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]){width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button[fullbleed]){width:100%;justify-content:center}:host(sdds-button[only-icon]) .sdds-btn-sm{padding:11px}:host(sdds-button[only-icon]) .sdds-btn-md{padding:13px}:host(sdds-button[only-icon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([only-icon])){display:flex;align-items:center}:host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-24);width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-12)}:host(sdds-button:not([only-icon])) .sdds-btn-md ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-20);width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .sdds-btn-lg ::slotted([slot=icon]){margin-left:28px;width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}";const t=class{constructor(s){d(this,s);this.text="";this.type="primary";this.size="lg";this.disabled=false;this.fullbleed=false;this.modeVariant=null;this.onlyIcon=false}componentWillLoad(){if(this.text===""){this.onlyIcon=true;this.host.setAttribute("only-icon","")}}render(){return s(n,{class:`${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}`},s("button",{class:`sdds-btn sdds-btn-${this.type} \n        ${`sdds-btn-${this.size}`}\n        ${this.disabled?"disabled":""}\n        ${this.fullbleed?"sdds-btn-fullbleed":""}\n        ${this.onlyIcon?"sdds-btn-only-icon":""}`},s("span",{class:"sdds-btn-text"},this.text),s("slot",{name:"icon"})))}get host(){return r(this)}};t.style=o;export{t as sdds_button};
+//# sourceMappingURL=p-b6fc0de7.entry.js.map

package/dist/tegel/{p-92869ad1.entry.js.map → p-b6fc0de7.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["buttonCss","SddsButton","componentWillLoad","this","text","onlyIcon","host","setAttribute","render","h","Host","class","modeVariant","type","size","disabled","fullbleed","name"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  border: none;\n  box-shadow: none;\n  position: relative;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.sdds-btn-lg {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 20px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 20px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn-md {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 20px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 20px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn-sm {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 16px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 16px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n  fill: var(--sdds-btn-primary-icon-fill);\n  color: var(--sdds-btn-primary-icon-color);\n  font-size: 16px;\n}\n\n.sdds-btn {\n  @include button-base;\n\n  height: $btn-lg-height;\n  padding: var(--sdds-spacing-element-20);\n  border: 1px solid;\n\n  &:disabled,\n  &.disabled {\n    cursor: unset;\n  }\n\n  &:focus {\n    // TODO: decide on what tod o with these @include sdds-focus-state;\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  span.sdds-btn-text + .sdds-btn-icon {\n    margin-left: var(--sdds-spacing-element-16);\n    width: 20px;\n    height: 20px;\n    line-height: 0;\n  }\n\n  &.sdds-btn-xs {\n    padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n    height: $btn-xs-height;\n    font-size: 12px;\n    border-radius: 2px;\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n  }\n\n  &.sdds-btn-sm {\n    padding: var(--sdds-spacing-element-12);\n    height: $btn-sm-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-sm-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: var(--sdds-spacing-element-24);\n      width: 16px;\n      height: 16px;\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin: unset;\n        margin-left: var(--sdds-spacing-element-12);\n      }\n    }\n  }\n\n  &.sdds-btn-md {\n    padding: var(--sdds-spacing-element-16);\n    height: $btn-md-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-md-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  &.sdds-btn-lg {\n    padding: var(--sdds-spacing-element-20);\n    height: $btn-lg-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-lg-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: 28px;\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  &.sdds-btn-fullbleed {\n    width: inherit;\n    display: flex;\n    justify-content: center;\n\n    .sdds-btn-icon,\n    &.sdds-btn-icon {\n      margin-left: var(--sdds-spacing-element-8);\n    }\n  }\n\n  span.sdds-btn-text {\n    align-self: baseline;\n  }\n\n  @each $type in $types {\n    &.sdds-btn-#{$type} {\n      @each $prop in $props {\n        #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n      }\n\n      .sdds-btn-icon {\n        @each $prop in $iconProps {\n          fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n          color: var(--sdds-btn-icon-#{$type}-#{$prop});\n        }\n\n        font-size: 16px; //16px\n      }\n\n      &:hover {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n        }\n\n        .sdds-btn-icon {\n          @each $prop in $iconProps {\n            fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n            color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n          }\n        }\n      }\n\n      &:focus {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n        }\n\n        .sdds-btn-icon {\n          @each $prop in $iconProps {\n            fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n            color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n          }\n        }\n      }\n\n      &:active,\n      &.active {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n        }\n      }\n\n      &.disabled,\n      &:disabled {\n        @each $prop in $props {\n          cursor: not-allowed;\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n\n          .sdds-btn-icon,\n          &.sdds-btn-icon {\n            color: var(--sdds-grey-300);\n          }\n        }\n      }\n    }\n  }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n  line-height: 1;\n}\n\n:host(sdds-button) {\n  display: flex;\n  align-items: center;\n\n  ::slotted([slot='icon']) {\n    width: var(--sdds-spacing-element-20);\n    height: var(--sdds-spacing-element-20);\n  }\n\n  .sdds-btn-sm {\n    ::slotted([slot='icon']) {\n      width: var(--sdds-spacing-element-16);\n      height: var(--sdds-spacing-element-16);\n    }\n  }\n}\n\n:host(sdds-button[fullbleed]) {\n  width: inherit;\n  justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n  .sdds-btn-sm {\n    padding: $btn-sm-only-icon-padding;\n  }\n\n  .sdds-btn-md {\n    padding: $btn-md-only-icon-padding;\n  }\n\n  .sdds-btn-lg {\n    padding: $btn-lg-only-icon-padding;\n  }\n}\n\n:host(sdds-button:not([only-icon])) {\n  display: flex;\n  align-items: center;\n\n  .sdds-btn-sm {\n    ::slotted([slot='icon']) {\n      margin-left: var(--sdds-spacing-element-24);\n      width: var(--sdds-spacing-element-16);\n      height: var(--sdds-spacing-element-16);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-12);\n      }\n    }\n  }\n\n  .sdds-btn-md {\n    ::slotted([slot='icon']) {\n      margin-left: var(--sdds-spacing-element-20);\n      width: var(--sdds-spacing-element-20);\n      height: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  .sdds-btn-lg {\n    ::slotted([slot='icon']) {\n      // TODO - This should be a var value\n      margin-left: 28px;\n      width: var(--sdds-spacing-element-20);\n      height: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class SddsButton {\n  // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n  /** Text inside a button */\n  @Prop() text: string = '';\n\n  /** Type of button */\n  @Prop() type: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary';\n\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Control for disabled state of component */\n  @Prop() disabled: boolean = false;\n\n  /** When enabled, makes button take 100% width */\n  @Prop() fullbleed: boolean = false;\n\n  /** Set the mode variant of the the button. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() onlyIcon: boolean = false;\n\n  @Element() host: HostElement;\n\n  componentWillLoad() {\n    if (this.text === '') {\n      this.onlyIcon = true;\n      this.host.setAttribute('only-icon', '');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n      <button\n        class={`sdds-btn sdds-btn-${this.type} \n        ${`sdds-btn-${this.size}`}\n        ${this.disabled ? 'disabled' : ''}\n        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n      >\n        <span class=\"sdds-btn-text\">{this.text}</span>\n        <slot name=\"icon\" />\n      </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,y1yB,MCQLC,EAAU,M,mCAGE,G,UAGsC,U,UAEnB,K,cAGd,M,eAGC,M,iBAGkB,K,cAElB,K,CAI7BC,oBACE,GAAIC,KAAKC,OAAS,GAAI,CACpBD,KAAKE,SAAW,KAChBF,KAAKG,KAAKC,aAAa,YAAa,G,EAIxCC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAGR,KAAKS,cAAgB,KAAO,qBAAqBT,KAAKS,cAAe,MACrFH,EAAA,UACEE,MAAO,qBAAqBR,KAAKU,kBAC/B,YAAYV,KAAKW,mBACjBX,KAAKY,SAAW,WAAa,eAC7BZ,KAAKa,UAAY,qBAAuB,eACxCb,KAAKE,SAAW,qBAAuB,MAEzCI,EAAA,QAAME,MAAM,iBAAiBR,KAAKC,MAClCK,EAAA,QAAMQ,KAAK,U"}
+{"version":3,"names":["buttonCss","SddsButton","componentWillLoad","this","text","onlyIcon","host","setAttribute","render","h","Host","class","modeVariant","type","size","disabled","fullbleed","name"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n  --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n  --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  border: none;\n  box-shadow: none;\n  position: relative;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.sdds-btn-lg {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 20px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 20px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn-md {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 20px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 20px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn-sm {\n  &:not(.sdds-btn-only-icon) {\n    i.sdds-btn-icon {\n      position: relative;\n\n      &::before {\n        font-size: 16px;\n        line-height: 1;\n        position: absolute;\n        right: 0;\n      }\n    }\n  }\n\n  &.sdds-btn-only-icon {\n    i.sdds-btn-icon::before {\n      font-size: 16px;\n      line-height: 1.25;\n    }\n  }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n  fill: var(--sdds-btn-primary-icon-fill);\n  color: var(--sdds-btn-primary-icon-color);\n  font-size: 16px;\n}\n\n.sdds-btn {\n  @include button-base;\n\n  height: $btn-lg-height;\n  padding: var(--sdds-spacing-element-20);\n  border: 1px solid;\n\n  &:disabled,\n  &.disabled {\n    cursor: unset;\n  }\n\n  &:focus {\n    // TODO: decide on what tod o with these @include sdds-focus-state;\n    outline: 2px solid var(--sdds-blue-400);\n    outline-offset: -2px;\n  }\n\n  span.sdds-btn-text + .sdds-btn-icon {\n    margin-left: var(--sdds-spacing-element-16);\n    width: 20px;\n    height: 20px;\n    line-height: 0;\n  }\n\n  &.sdds-btn-xs {\n    padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n    height: $btn-xs-height;\n    font-size: 12px;\n    border-radius: 2px;\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n  }\n\n  &.sdds-btn-sm {\n    padding: var(--sdds-spacing-element-12);\n    height: $btn-sm-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-sm-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: var(--sdds-spacing-element-24);\n      width: 16px;\n      height: 16px;\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin: unset;\n        margin-left: var(--sdds-spacing-element-12);\n      }\n    }\n  }\n\n  &.sdds-btn-md {\n    padding: var(--sdds-spacing-element-16);\n    height: $btn-md-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-md-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  &.sdds-btn-lg {\n    padding: var(--sdds-spacing-element-20);\n    height: $btn-lg-height;\n\n    &.sdds-btn-only-icon {\n      padding: $btn-lg-only-icon-padding;\n    }\n\n    &:focus {\n      // TODO: decide on what tod o with these @include sdds-focus-state;\n      outline: 2px solid var(--sdds-blue-400);\n      outline-offset: -2px;\n    }\n\n    span.sdds-btn-text + .sdds-btn-icon {\n      margin: unset;\n      margin-left: 28px;\n    }\n\n    &.sdds-btn-fullbleed {\n      span.sdds-btn-text + .sdds-btn-icon {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  &.sdds-btn-fullbleed {\n    width: inherit;\n    display: flex;\n    justify-content: center;\n\n    .sdds-btn-icon,\n    &.sdds-btn-icon {\n      margin-left: var(--sdds-spacing-element-8);\n    }\n  }\n\n  span.sdds-btn-text {\n    align-self: baseline;\n  }\n\n  @each $type in $types {\n    &.sdds-btn-#{$type} {\n      @each $prop in $props {\n        #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n      }\n\n      .sdds-btn-icon {\n        @each $prop in $iconProps {\n          fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n          color: var(--sdds-btn-icon-#{$type}-#{$prop});\n        }\n\n        font-size: 16px; //16px\n      }\n\n      &:hover {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n        }\n\n        .sdds-btn-icon {\n          @each $prop in $iconProps {\n            fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n            color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n          }\n        }\n      }\n\n      &:focus {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n        }\n\n        .sdds-btn-icon {\n          @each $prop in $iconProps {\n            fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n            color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n          }\n        }\n      }\n\n      &:active,\n      &.active {\n        @each $prop in $props {\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n        }\n      }\n\n      &.disabled,\n      &:disabled {\n        @each $prop in $props {\n          cursor: not-allowed;\n          #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n\n          .sdds-btn-icon,\n          &.sdds-btn-icon {\n            color: var(--sdds-grey-300);\n          }\n        }\n      }\n    }\n  }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n  line-height: 1;\n}\n\n:host(sdds-button) {\n  display: flex;\n  align-items: center;\n\n  ::slotted([slot='icon']) {\n    width: var(--sdds-spacing-element-20);\n    height: var(--sdds-spacing-element-20);\n  }\n\n  .sdds-btn-sm {\n    ::slotted([slot='icon']) {\n      width: var(--sdds-spacing-element-16);\n      height: var(--sdds-spacing-element-16);\n    }\n  }\n}\n\n:host(sdds-button[fullbleed]) {\n  width: 100%;\n  justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n  .sdds-btn-sm {\n    padding: $btn-sm-only-icon-padding;\n  }\n\n  .sdds-btn-md {\n    padding: $btn-md-only-icon-padding;\n  }\n\n  .sdds-btn-lg {\n    padding: $btn-lg-only-icon-padding;\n  }\n}\n\n:host(sdds-button:not([only-icon])) {\n  display: flex;\n  align-items: center;\n\n  .sdds-btn-sm {\n    ::slotted([slot='icon']) {\n      margin-left: var(--sdds-spacing-element-24);\n      width: var(--sdds-spacing-element-16);\n      height: var(--sdds-spacing-element-16);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-12);\n      }\n    }\n  }\n\n  .sdds-btn-md {\n    ::slotted([slot='icon']) {\n      margin-left: var(--sdds-spacing-element-20);\n      width: var(--sdds-spacing-element-20);\n      height: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n\n  .sdds-btn-lg {\n    ::slotted([slot='icon']) {\n      // TODO - This should be a var value\n      margin-left: 28px;\n      width: var(--sdds-spacing-element-20);\n      height: var(--sdds-spacing-element-20);\n    }\n\n    &.sdds-btn-fullbleed {\n      ::slotted([slot='icon']) {\n        margin-left: var(--sdds-spacing-element-16);\n      }\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-button',\n  styleUrl: 'button.scss',\n  shadow: true,\n})\nexport class SddsButton {\n  // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n  /** Text inside a button */\n  @Prop() text: string = '';\n\n  /** Type of button */\n  @Prop() type: 'primary' | 'secondary' | 'ghost' | 'danger' = 'primary';\n\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Control for disabled state of component */\n  @Prop() disabled: boolean = false;\n\n  /** When enabled, makes button take 100% width */\n  @Prop() fullbleed: boolean = false;\n\n  /** Set the mode variant of the the button. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() onlyIcon: boolean = false;\n\n  @Element() host: HostElement;\n\n  componentWillLoad() {\n    if (this.text === '') {\n      this.onlyIcon = true;\n      this.host.setAttribute('only-icon', '');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n      <button\n        class={`sdds-btn sdds-btn-${this.type} \n        ${`sdds-btn-${this.size}`}\n        ${this.disabled ? 'disabled' : ''}\n        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n      >\n        <span class=\"sdds-btn-text\">{this.text}</span>\n        <slot name=\"icon\" />\n      </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,s1yB,MCQLC,EAAU,M,mCAGE,G,UAGsC,U,UAEnB,K,cAGd,M,eAGC,M,iBAGkB,K,cAElB,K,CAI7BC,oBACE,GAAIC,KAAKC,OAAS,GAAI,CACpBD,KAAKE,SAAW,KAChBF,KAAKG,KAAKC,aAAa,YAAa,G,EAIxCC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,GAAGR,KAAKS,cAAgB,KAAO,qBAAqBT,KAAKS,cAAe,MACrFH,EAAA,UACEE,MAAO,qBAAqBR,KAAKU,kBAC/B,YAAYV,KAAKW,mBACjBX,KAAKY,SAAW,WAAa,eAC7BZ,KAAKa,UAAY,qBAAuB,eACxCb,KAAKE,SAAW,qBAAuB,MAEzCI,EAAA,QAAME,MAAM,iBAAiBR,KAAKC,MAClCK,EAAA,QAAMQ,KAAK,U"}

package/dist/tegel/{p-cd08f5f0.entry.js → p-b9b329c0.entry.js}

@@ -1,2 +1,2 @@
-import{r as d,c as o,h as s,H as c}from"./p-0b4eba86.js";const i=".sdds-accordion-item{box-sizing:border-box;list-style:none;color:var(--sdds-accordion-color);position:relative;border-top:1px solid var(--sdds-accordion-border)}.sdds-accordion-item *{box-sizing:border-box}.sdds-accordion-item button.sdds-accordion-header-icon-start,.sdds-accordion-item button.sdds-accordion-header-icon-end{all:unset}.sdds-accordion-item .sdds-accordion-header-icon-start,.sdds-accordion-item .sdds-accordion-header-icon-end,.sdds-accordion-item button.sdds-accordion-header-icon-start,.sdds-accordion-item button.sdds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);padding:var(--sdds-spacing-element-16);background-color:var(--sdds-accordion-background)}.sdds-accordion-item .sdds-accordion-header-icon-start *,.sdds-accordion-item .sdds-accordion-header-icon-end *,.sdds-accordion-item button.sdds-accordion-header-icon-start *,.sdds-accordion-item button.sdds-accordion-header-icon-end *{box-sizing:border-box}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--sdds-accordion-color)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon,.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon{display:block}.sdds-accordion-item .sdds-accordion-title{flex-grow:2}.sdds-accordion-item .sdds-accordion-panel{cursor:default;padding:var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64) var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);display:none;font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls)}.sdds-accordion-item .sdds-accordion-panel p{margin:0;padding:0}.sdds-accordion-item .sdds-accordion-panel--padding-reset{padding-right:var(--sdds-spacing-element-16)}.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon{margin:0 0 0 var(--sdds-spacing-element-32)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-title{order:1}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon{order:0;margin:0 var(--sdds-spacing-element-16) 0 0}.sdds-accordion-item.disabled,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled .sdds-accordion-panel{color:var(--sdds-accordion-color-disabled);cursor:not-allowed}.sdds-accordion-item.disabled .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-panel .sdds-accordion-icon{color:var(--sdds-accordion-color-disabled)}.sdds-accordion-item.disabled:hover,.sdds-accordion-item.disabled:hover *,.sdds-accordion-item.disabled:focus,.sdds-accordion-item.disabled:focus *,.sdds-accordion-item.disabled:active,.sdds-accordion-item.disabled:active *,.sdds-accordion-item.disabled.active,.sdds-accordion-item.disabled.active *{cursor:not-allowed}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end::after{border-color:transparent}.sdds-accordion-item.expanded .sdds-accordion-panel{display:block;padding-bottom:31px}.sdds-accordion-item.expanded .sdds-accordion-icon{transform:rotate(180deg)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-end .sdds-accordion-icon{margin-right:0;margin-left:var(--sdds-spacing-element-32)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-start .sdds-accordion-icon{margin-left:0;margin-right:var(--sdds-spacing-element-16)}.sdds-accordion-item:focus{border-top:1px solid var(--sdds-accordion-border-focus)}.sdds-accordion-item[disabled=true]:focus{border-color:var(--sdds-accordion-border)}:host(:focus) .sdds-accordion-item{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(:hover) .sdds-accordion-header-icon-start,:host(:hover) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-hover)}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-active);outline:none}";const a=class{constructor(s){d(this,s);this.sddsToggle=o(this,"sddsToggle",7);this.header="";this.expandIconPosition="end";this.disabled=false;this.expanded=false;this.paddingReset=false}openAccordion(){this.expanded=!this.expanded;this.sddsToggle.emit(this.expanded)}render(){return s(c,null,s("div",{class:`sdds-accordion-item\n        ${this.disabled?"disabled":""}\n        ${this.expanded?"expanded":""}\n        `},s("button",{type:"button","aria-expanded":this.expanded,class:`sdds-accordion-header-icon-${this.expandIconPosition}`,onClick:()=>this.openAccordion(),disabled:this.disabled},s("div",{class:"sdds-accordion-title"},this.header),s("div",{class:"sdds-accordion-icon"},s("sdds-icon",{name:"chevron_down",size:"16px"}))),s("div",{class:`sdds-accordion-panel\n            ${this.paddingReset?"sdds-accordion-panel--padding-reset ":""}\n            `},s("slot",null))))}};a.style=i;export{a as sdds_accordion_item};
-//# sourceMappingURL=p-cd08f5f0.entry.js.map
+import{r as d,c as o,h as s,H as c}from"./p-387e1798.js";const i=".sdds-accordion-item{box-sizing:border-box;list-style:none;color:var(--sdds-accordion-color);position:relative;border-top:1px solid var(--sdds-accordion-border)}.sdds-accordion-item *{box-sizing:border-box}.sdds-accordion-item button.sdds-accordion-header-icon-start,.sdds-accordion-item button.sdds-accordion-header-icon-end{all:unset}.sdds-accordion-item .sdds-accordion-header-icon-start,.sdds-accordion-item .sdds-accordion-header-icon-end,.sdds-accordion-item button.sdds-accordion-header-icon-start,.sdds-accordion-item button.sdds-accordion-header-icon-end{box-sizing:border-box;cursor:pointer;display:flex;align-items:center;width:100%;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);padding:var(--sdds-spacing-element-16);background-color:var(--sdds-accordion-background)}.sdds-accordion-item .sdds-accordion-header-icon-start *,.sdds-accordion-item .sdds-accordion-header-icon-end *,.sdds-accordion-item button.sdds-accordion-header-icon-start *,.sdds-accordion-item button.sdds-accordion-header-icon-end *{box-sizing:border-box}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon{transform-origin:center;transition:transform 0.15s ease-in-out;color:var(--sdds-accordion-color)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon,.sdds-accordion-item button.sdds-accordion-header-icon-start .sdds-accordion-icon>sdds-icon,.sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon>sdds-icon{display:block}.sdds-accordion-item .sdds-accordion-title{flex-grow:2}.sdds-accordion-item .sdds-accordion-panel{cursor:default;padding:var(--sdds-spacing-element-8) var(--sdds-spacing-layout-64) var(--sdds-spacing-element-32) var(--sdds-spacing-element-16);display:none;font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls)}.sdds-accordion-item .sdds-accordion-panel p{margin:0;padding:0}.sdds-accordion-item .sdds-accordion-panel--padding-reset{padding-right:var(--sdds-spacing-element-16)}.sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon{margin:0 0 0 var(--sdds-spacing-element-32)}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-title{order:1}.sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon{order:0;margin:0 var(--sdds-spacing-element-16) 0 0}.sdds-accordion-item.disabled,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled .sdds-accordion-panel{color:var(--sdds-accordion-color-disabled);cursor:not-allowed}.sdds-accordion-item.disabled .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-end .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-header-icon-start .sdds-accordion-icon,.sdds-accordion-item.disabled .sdds-accordion-panel .sdds-accordion-icon{color:var(--sdds-accordion-color-disabled)}.sdds-accordion-item.disabled:hover,.sdds-accordion-item.disabled:hover *,.sdds-accordion-item.disabled:focus,.sdds-accordion-item.disabled:focus *,.sdds-accordion-item.disabled:active,.sdds-accordion-item.disabled:active *,.sdds-accordion-item.disabled.active,.sdds-accordion-item.disabled.active *{cursor:not-allowed}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-bg);outline:none;pointer-events:none}.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:hover .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:focus .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled:active .sdds-accordion-header-icon-end::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-start::after,.sdds-accordion-item.disabled.active .sdds-accordion-header-icon-end::after{border-color:transparent}.sdds-accordion-item.expanded .sdds-accordion-panel{display:block;padding-bottom:31px}.sdds-accordion-item.expanded .sdds-accordion-icon{transform:rotate(180deg)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-end .sdds-accordion-icon{margin-right:0;margin-left:var(--sdds-spacing-element-32)}.sdds-accordion-item.expanded .sdds-accordion-header-icon-start .sdds-accordion-icon{margin-left:0;margin-right:var(--sdds-spacing-element-16)}.sdds-accordion-item:focus{border-top:1px solid var(--sdds-accordion-border-focus)}.sdds-accordion-item[disabled=true]:focus{border-color:var(--sdds-accordion-border)}:host(:focus) .sdds-accordion-item{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(:hover) .sdds-accordion-header-icon-start,:host(:hover) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-hover)}:host(:active) .sdds-accordion-header-icon-start,:host(:active) .sdds-accordion-header-icon-end{background-color:var(--sdds-accordion-background-active);outline:none}";const a=class{constructor(s){d(this,s);this.sddsToggle=o(this,"sddsToggle",7);this.header="";this.expandIconPosition="end";this.disabled=false;this.expanded=false;this.paddingReset=false}openAccordion(){this.expanded=!this.expanded;this.sddsToggle.emit(this.expanded)}render(){return s(c,null,s("div",{class:`sdds-accordion-item\n        ${this.disabled?"disabled":""}\n        ${this.expanded?"expanded":""}\n        `},s("button",{type:"button","aria-expanded":this.expanded,class:`sdds-accordion-header-icon-${this.expandIconPosition}`,onClick:()=>this.openAccordion(),disabled:this.disabled},s("div",{class:"sdds-accordion-title"},this.header),s("div",{class:"sdds-accordion-icon"},s("sdds-icon",{name:"chevron_down",size:"16px"}))),s("div",{class:`sdds-accordion-panel\n            ${this.paddingReset?"sdds-accordion-panel--padding-reset ":""}\n            `},s("slot",null))))}};a.style=i;export{a as sdds_accordion_item};
+//# sourceMappingURL=p-b9b329c0.entry.js.map