@scania/tegel 0.0.51 → 0.0.52

package/dist/tegel/p-1df2e987.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as d,h as i}from"./p-387e1798.js";const e=':root,.sdds-mode-light{--sdds-slider-label-color:var(--sdds-grey-958);--sdds-slider-thumb-color:var(--sdds-blue-800);--sdds-slider-divider-color:var(--sdds-grey-400);--sdds-slider-track-color:var(--sdds-grey-400);--sdds-slider-track-fill-color:var(--sdds-blue-800);--sdds-slider-input-inputfield-color:var(--sdds-grey-700);--sdds-slider-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-958);--sdds-slider-inputfield-background:var(--sdds-white);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-400);--sdds-slider-divider-values-color:var(--sdds-grey-958);--sdds-slider-disabled:var(--sdds-grey-400);--sdds-slider-value-tooltip-background:var(--sdds-grey-800);--sdds-slider-value-tooltip-color:var(--sdds-white)}.sdds-mode-dark{--sdds-slider-label-color:var(--sdds-grey-100);--sdds-slider-thumb-color:var(--sdds-grey-100);--sdds-slider-divider-color:var(--sdds-grey-700);--sdds-slider-track-color:var(--sdds-grey-700);--sdds-slider-track-fill-color:var(--sdds-grey-100);--sdds-slider-inputfield-color:var(--sdds-grey-700);--sdds-slider-input-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-100);--sdds-slider-inputfield-background:var(--sdds-grey-900);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-800);--sdds-slider-divider-values-color:var(--sdds-grey-100);--sdds-slider-disabled:var(--sdds-grey-700);--sdds-slider-value-tooltip-background:var(--sdds-grey-200);--sdds-slider-value-tooltip-color:var(--sdds-grey-958)}sdds-slider{box-sizing:border-box;width:100%}sdds-slider *{box-sizing:border-box}sdds-slider input[type=range].sdds-slider-native-element{display:none}.sdds-slider-wrapper{width:100%}.sdds-slider-wrapper.read-only{pointer-events:none}.sdds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.sdds-slider .sdds-slider-inner{width:100%;height:20px;position:relative}.sdds-slider .sdds-slider__controls{position:relative;top:-25px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:pointer}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus{padding:18px 18px 18px 0}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus{padding:18px 0 18px 18px}.sdds-slider .sdds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-value{user-select:none;padding:18px;color:var(--sdds-grey-700);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper{background-color:var(--sdds-slider-inputfield-background);display:flex;align-items:center;justify-content:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--sdds-grey-600)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--sdds-blue-400);outline:0}.sdds-slider label{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);user-select:none;position:absolute;color:var(--sdds-slider-label-color);top:-16px;transform:translateY(-100%)}.sdds-slider label.offset{top:-35px}.sdds-slider .sdds-slider__value{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--sdds-slider-value-tooltip-background);color:var(--sdds-slider-value-tooltip-color)}.sdds-slider .sdds-slider__value svg{color:var(--sdds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.sdds-slider .sdds-slider__scrubber{position:absolute}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:20px;height:20px;border-radius:100%;background-color:var(--sdds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{content:" ";display:none;width:48px;height:48px;background-color:var(--sdds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:24px;height:24px}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before{display:block;opacity:0.16 !important}.sdds-slider .sdds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.sdds-slider .sdds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--sdds-slider-divider-color);color:var(--sdds-slider-divider-values-color);width:1px}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span{display:block;user-select:none;color:var(-sdds-grey-700);font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.sdds-slider .sdds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--sdds-slider-track-color);position:relative}.sdds-slider .sdds-slider__track:focus{outline:0}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:24px;height:24px}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.sdds-slider.disabled{cursor:not-allowed}.sdds-slider.disabled>*{pointer-events:none}.sdds-slider.disabled label{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg{fill:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper{pointer-events:none}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{color:var(--sdds-slider-disabled);pointer-events:none}.sdds-slider.disabled .sdds-slider__value{display:none}.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__scrubber{pointer-events:none}.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner{background-color:var(--sdds-slider-disabled);cursor:default}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:16px;height:16px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{width:40px;height:40px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:20px;height:20px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-disabled)}';const r=class{constructor(i){s(this,i);this.sddsChange=d(this,"sddsChange",7);this.wrapperElement=null;this.scrubberElement=null;this.scrubberInnerElement=null;this.dividersElement=null;this.trackElement=null;this.trackFillElement=null;this.minusElement=null;this.plusElement=null;this.inputElement=null;this.nativeRangeInputElement=null;this.scrubberGrabPos={x:0,y:0};this.scrubberGrabbed=false;this.scrubberLeft=0;this.tickValues=[];this.disabledState=false;this.readonlyState=false;this.useControls=false;this.useInput=false;this.useSmall=false;this.useSnapping=false;this.supposedValueSlot=-1;this.eventListenersAdded=false;this.resizeObserverAdded=false;this.label="";this.value="0";this.min="0";this.max="100";this.ticks="0";this.showTickNumbers=false;this.tooltip=false;this.disabled=false;this.readOnly=false;this.controls=false;this.input=false;this.step="1";this.name="";this.scrubberSize="lg";this.snap=false;this.sliderId=crypto.randomUUID()}async reset(){this.componentWillLoad();this.componentDidLoad()}handleKeydown(s){switch(s.key){case"ArrowLeft":this.stepLeft();break;case"ArrowRight":this.stepRight();break}}handleMouseUp(){if(!this.scrubberGrabbed){return}this.scrubberGrabbed=false;this.scrubberInnerElement.classList.remove("pressed");this.updateValue();this.trackElement.focus()}handleTouchEnd(){if(!this.scrubberGrabbed){return}this.scrubberGrabbed=false;this.scrubberInnerElement.classList.remove("pressed");this.updateValue();this.trackElement.focus()}handleMouseMove(s){if(!this.scrubberGrabbed){return}const d=parseInt(this.ticks);const i=this.trackElement.getBoundingClientRect();let e=s.clientX-i.left;this.supposedValueSlot=-1;if(this.useSnapping&&d>0){const s=Math.round(this.getTrackWidth()/(d+1));e=Math.round(e/s)*s;this.supposedValueSlot=Math.round(e/s)}this.scrubberLeft=this.constrainScrubber(e);this.scrubberElement.style.left=`${this.scrubberLeft}px`;this.updateValue();this.updateTrack()}handleTouchMove(s){s.preventDefault();if(!this.scrubberGrabbed){return}const d=parseInt(this.ticks);const i=this.trackElement.getBoundingClientRect();let e=s.touches[0].clientX-i.left;this.supposedValueSlot=-1;if(this.useSnapping&&d>0){const s=Math.round(this.getTrackWidth()/(d+1));e=Math.round(e/s)*s;this.supposedValueSlot=Math.round(e/s)}this.scrubberLeft=this.constrainScrubber(e);this.scrubberElement.style.left=`${this.scrubberLeft}px`;this.updateValue();this.updateTrack()}updateTrack(){const s=this.getTrackWidth();const d=this.scrubberLeft/s*100;this.trackFillElement.style.width=`${d}%`}dispatchChangeEvent(){this.sddsChange.emit({value:this.value})}updateValue(){const s=this.getTrackWidth();if(this.supposedValueSlot>0){const s=this.tickValues[this.supposedValueSlot];this.value=`${s}`}else{const d=this.scrubberLeft/s;this.value=`${Math.trunc(this.getMin()+d*(this.getMax()-this.getMin()))}`}this.dispatchChangeEvent()}updateValueForced(s){this.value=s;this.dispatchChangeEvent()}getMin(){return parseFloat(this.min)}getMax(){return parseFloat(this.max)}constrainScrubber(s){const d=this.getTrackWidth();if(s<0){return 0}if(s>d){return d}return s}getTrackWidth(){const s=this.trackElement.getBoundingClientRect();return s.right-s.left}calculateScrubberLeftFromValue(s){const d=s;const i=this.getTrackWidth();const e=d-this.getMin();const r=this.getMax()-this.getMin();const t=e/r*i;this.scrubberLeft=t;this.scrubberElement.style.left=`${this.scrubberLeft}px`}componentDidLoad(){if(!this.resizeObserverAdded){this.resizeObserverAdded=true;const s=new ResizeObserver((()=>{this.calculateScrubberLeftFromValue(this.value);this.updateTrack()}));s.observe(this.wrapperElement)}if(!this.eventListenersAdded){this.eventListenersAdded=true;this.scrubberElement.addEventListener("mousedown",(s=>{s.preventDefault();this.grabScrubber(s.offsetX,s.offsetY)}));this.scrubberElement.addEventListener("touchstart",(s=>{const d=this.scrubberElement.getBoundingClientRect();const i=s.targetTouches[0].pageX-d.left;const e=s.targetTouches[0].pageY-d.top;this.grabScrubber(i,e)}));if(this.useControls){this.minusElement.addEventListener("click",(()=>{this.stepLeft()}));this.plusElement.addEventListener("click",(()=>{this.stepRight()}))}if(this.inputElement){this.inputElement.addEventListener("keydown",(s=>{s.stopPropagation();if(s.key==="Enter"){let s=parseInt(this.inputElement.value);if(s<this.getMin()){s=this.getMin()}else if(s>this.getMax()){s=this.getMax()}this.calculateScrubberLeftFromValue(s);this.updateValueForced(s);this.updateTrack();this.inputElement.blur();this.wrapperElement.focus()}}))}}this.calculateScrubberLeftFromValue(this.value);this.updateTrack()}grabScrubber(s,d){if(this.readonlyState){return}this.scrubberGrabPos={x:s,y:d};this.scrubberGrabbed=true;this.scrubberInnerElement.classList.add("pressed")}calculateInputSizeFromMax(){return this.max.length}controlsStep(s){if(this.readonlyState||this.disabled){return}const d=this.getTrackWidth();const i=this.scrubberLeft/d;const e=parseInt(this.ticks);let r=this.getMin()+i*(this.getMax()-this.getMin());r+=s;if(r<this.getMin()){r=this.getMin()}else if(r>this.getMax()){r=this.getMax()}this.value=`${r}`;if(this.useSnapping&&e>0){const d=s>0?1:-1;this.supposedValueSlot+=d;if(this.supposedValueSlot<0){this.supposedValueSlot=0}else if(this.supposedValueSlot>e+1){this.supposedValueSlot=e+1}}this.calculateScrubberLeftFromValue(r);this.updateTrack();this.updateValue()}stepLeft(){this.controlsStep(-parseInt(this.step))}stepRight(){this.controlsStep(parseInt(this.step))}componentWillLoad(){const s=parseInt(this.ticks);if(s>0){this.tickValues=[this.getMin()];const d=(this.getMax()-this.getMin())/(s+1);for(let i=1;i<s+1;i++){this.tickValues.push(this.getMin()+Math.round(d*i))}this.tickValues.push(this.getMax())}if(this.disabled){this.disabledState=true}else{this.disabledState=false}if(this.readOnly){this.readonlyState=true}else{this.readonlyState=false}this.useInput=false;this.useControls=false;if(this.controls){this.useControls=true}else if(this.input){this.useInput=true}this.useSmall=false;if(this.scrubberSize==="sm"){this.useSmall=true}this.useSnapping=false;if(this.snap){this.useSnapping=true}const d=this.getMin();const i=this.getMax();if(d>i){console.warn("min-prop must have a higher value than max-prop for the component to work correctly.");this.disabledState=true}}render(){return i("div",{class:`sdds-slider-wrapper ${this.readonlyState?"read-only":""}`},i("input",{ref:s=>{this.nativeRangeInputElement=s},class:"sdds-slider-native-element",type:"range",value:this.value,name:this.name,min:this.min,max:this.max,disabled:this.disabled}),i("div",{class:`sdds-slider ${this.disabledState?"disabled":""} ${this.useSmall?"sdds-slider-small":""}`,ref:s=>{this.wrapperElement=s}},this.useInput&&i("div",{class:"sdds-slider__input-values"},i("div",{ref:s=>{this.minusElement=s},class:"sdds-slider__input-value"},this.min)),this.useControls&&i("div",{class:"sdds-slider__controls"},i("div",{ref:s=>this.minusElement=s,class:"sdds-slider__control sdds-slider__control-minus"},i("sdds-icon",{name:"minus",size:"16px"}))),i("div",{class:"sdds-slider-inner"},i("label",{class:this.tickValues.length>0&&"offset"},this.label),this.tickValues.length>0&&i("div",{class:"sdds-slider__value-dividers-wrapper"},i("div",{ref:s=>{this.dividersElement=s},class:"sdds-slider__value-dividers"},this.tickValues.map((s=>i("div",{class:"sdds-slider__value-divider"},this.showTickNumbers&&i("span",null,s)))))),i("div",{class:"sdds-slider__track",ref:s=>{this.trackElement=s},tabindex:this.disabled?"-1":"0"},i("div",{class:"sdds-slider__track-fill",ref:s=>{this.trackFillElement=s}}),i("div",{class:"sdds-slider__scrubber",ref:s=>{this.scrubberElement=s}},this.tooltip&&i("div",{class:"sdds-slider__value"},this.value,i("svg",{width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z",fill:"currentColor"}))),i("div",{class:"sdds-slider__scrubber-inner",ref:s=>{this.scrubberInnerElement=s}})))),this.useInput&&i("div",{class:"sdds-slider__input-values"},i("div",{ref:s=>{this.minusElement=s},class:"sdds-slider__input-value"},this.max),i("div",{class:"sdds-slider__input-field-wrapper"},i("input",{onFocus:s=>{if(this.readonlyState){s.preventDefault();this.inputElement.blur()}},size:this.calculateInputSizeFromMax(),class:"sdds-slider__input-field",value:this.value,ref:s=>{this.inputElement=s}}))),this.useControls&&i("div",{class:"sdds-slider__controls"},i("div",{ref:s=>this.plusElement=s,class:"sdds-slider__control sdds-slider__control-plus"},i("sdds-icon",{name:"plus",size:"16px"})))))}};r.style=e;export{r as sdds_slider};
+//# sourceMappingURL=p-1df2e987.entry.js.map

package/dist/tegel/p-1df2e987.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sliderCss","Slider","this","wrapperElement","scrubberElement","scrubberInnerElement","dividersElement","trackElement","trackFillElement","minusElement","plusElement","inputElement","nativeRangeInputElement","scrubberGrabPos","x","y","scrubberGrabbed","scrubberLeft","tickValues","disabledState","readonlyState","useControls","useInput","useSmall","useSnapping","supposedValueSlot","eventListenersAdded","resizeObserverAdded","crypto","randomUUID","async","componentWillLoad","componentDidLoad","handleKeydown","event","key","stepLeft","stepRight","handleMouseUp","classList","remove","updateValue","focus","handleTouchEnd","handleMouseMove","numTicks","parseInt","ticks","trackRect","getBoundingClientRect","localLeft","clientX","left","v","Math","round","getTrackWidth","constrainScrubber","style","updateTrack","handleTouchMove","preventDefault","touches","trackWidth","percentageFilled","width","dispatchChangeEvent","sddsChange","emit","value","supposedValue","percentage","trunc","getMin","getMax","updateValueForced","parseFloat","min","max","right","calculateScrubberLeftFromValue","initValue","normalizedValue","normalizedMax","calculatedLeft","resizeObserver","ResizeObserver","observe","addEventListener","grabScrubber","offsetX","offsetY","rect","targetTouches","pageX","pageY","top","stopPropagation","newValue","blur","xOffset","yOffset","add","calculateInputSizeFromMax","length","controlsStep","delta","disabled","currentValue","stepDir","step","i","push","readOnly","controls","input","scrubberSize","snap","console","warn","render","h","class","ref","el","type","name","size","label","map","showTickNumbers","tabindex","tooltip","height","viewBox","fill","xmlns","d","onFocus","e"],"sources":["./src/components/slider/slider.scss?tag=sdds-slider","./src/components/slider/slider.tsx"],"sourcesContent":["@import 'slider-vars';\n@import '../../mixins/box-sizing';\n\nsdds-slider {\n  @include sdds-box-sizing;\n\n  width: 100%;\n\n  input[type='range'].sdds-slider-native-element {\n    display: none;\n  }\n}\n\n.sdds-slider-wrapper {\n  width: 100%;\n\n  &.read-only {\n    pointer-events: none;\n  }\n}\n\n.sdds-slider {\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  padding-top: 65px;\n\n  .sdds-slider-inner {\n    width: 100%;\n    height: 20px;\n    position: relative;\n  }\n\n  .sdds-slider__controls {\n    position: relative;\n    top: -25px;\n\n    .sdds-slider__control {\n      cursor: pointer;\n\n      &.sdds-slider__control-minus {\n        padding: 18px 18px 18px 0;\n      }\n\n      &.sdds-slider__control-plus {\n        padding: 18px 0 18px 18px;\n      }\n    }\n  }\n\n  .sdds-slider__input-values {\n    position: relative;\n    top: -25px;\n    display: flex;\n    flex-wrap: nowrap;\n    align-items: center;\n\n    .sdds-slider__input-value {\n      user-select: none;\n      padding: 18px;\n      color: var(--sdds-grey-700);\n\n      //@include type-style('detail-02');\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n    }\n\n    .sdds-slider__input-field-wrapper {\n      background-color: var(--sdds-slider-inputfield-background);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      input.sdds-slider__input-field {\n        // @include type-style('detail-02');\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        color: var(--sdds-slider-input-inputfield-color);\n        border: 0;\n        background-color: transparent;\n        text-align: center;\n        padding: 12px;\n        box-shadow: inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);\n        border-radius: 4px 4px 0 0;\n\n        &:hover {\n          box-shadow: inset 0 -1px 0 var(--sdds-grey-600);\n        }\n\n        &:focus {\n          box-shadow: inset 0 -2px 0 var(--sdds-blue-400);\n          outline: 0;\n        }\n      }\n    }\n  }\n\n  label {\n    // @include type-style('detail-05');\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    user-select: none;\n    position: absolute;\n    color: var(--sdds-slider-label-color);\n    top: -16px;\n    transform: translateY(-100%);\n\n    &.offset {\n      top: -35px;\n    }\n  }\n\n  .sdds-slider__value {\n    // @include type-style('detail-01');\n    font: var(--sdds-detail-01);\n    letter-spacing: var(--sdds-detail-01-ls);\n    user-select: none;\n    border-radius: 4px;\n    padding: 8px;\n    position: absolute;\n    transform: translate(-50%, -100%);\n    top: -24px;\n    background-color: var(--sdds-slider-value-tooltip-background);\n    color: var(--sdds-slider-value-tooltip-color);\n\n    svg {\n      color: var(--sdds-slider-value-tooltip-background);\n      position: absolute;\n      left: 50%;\n      transform: translateX(-50%);\n      top: 34px;\n    }\n  }\n\n  .sdds-slider__scrubber {\n    position: absolute;\n\n    .sdds-slider__scrubber-inner {\n      width: 20px;\n      height: 20px;\n      border-radius: 100%;\n      background-color: var(--sdds-slider-thumb-color);\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      cursor: pointer;\n\n      &::before {\n        content: ' ';\n        display: none;\n        width: 48px;\n        height: 48px;\n        background-color: var(--sdds-slider-thumb-color);\n        position: absolute;\n        border-radius: 100%;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n      }\n\n      &:hover {\n        &::before {\n          display: block;\n          opacity: 0.08;\n        }\n      }\n\n      &.pressed {\n        width: 24px;\n        height: 24px;\n\n        &::before {\n          display: block;\n          opacity: 0.16 !important;\n        }\n      }\n    }\n  }\n\n  .sdds-slider__value-dividers-wrapper {\n    position: relative;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  .sdds-slider__value-dividers {\n    pointer-events: none;\n    position: absolute;\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n\n    .sdds-slider__value-divider {\n      transform: translateY(-50%);\n      height: 16px;\n      background-color: var(--sdds-slider-divider-color);\n      color: var(--sdds-slider-divider-values-color);\n      width: 1px;\n\n      span {\n        display: block;\n        user-select: none;\n        color: var(-sdds-grey-700);\n\n        // @include type-style('detail-05');\n        font: var(--sdds-detail-05);\n        letter-spacing: var(--sdds-detail-05-ls);\n        position: relative;\n        top: -7px;\n        left: 50%;\n        transform: translate(-50%, -100%);\n        width: 50px;\n        text-align: center;\n      }\n    }\n  }\n\n  .sdds-slider__track {\n    width: 100%;\n    height: 2px;\n    border-radius: 1px;\n    background-color: var(--sdds-slider-track-color);\n    position: relative;\n\n    &:focus {\n      outline: 0;\n\n      .sdds-slider__scrubber {\n        .sdds-slider__scrubber-inner {\n          width: 24px;\n          height: 24px;\n\n          &::before {\n            display: block;\n            opacity: 0.08;\n          }\n        }\n      }\n    }\n\n    .sdds-slider__track-fill {\n      background-color: var(--sdds-slider-track-fill-color);\n      border-radius: 2px;\n      height: 4px;\n      position: absolute;\n      left: 0;\n      top: -1px;\n    }\n  }\n\n  &.disabled {\n    // pointer-events: none;\n    cursor: not-allowed;\n\n    > * {\n      pointer-events: none;\n    }\n\n    label {\n      color: var(--sdds-slider-disabled);\n    }\n\n    .sdds-slider__controls {\n      .sdds-slider__control {\n        cursor: default;\n\n        &.sdds-slider__control-minus,\n        &.sdds-slider__control-plus {\n          svg {\n            fill: var(--sdds-slider-disabled);\n          }\n        }\n      }\n    }\n\n    .sdds-slider__input-values {\n      .sdds-slider__input-value {\n        color: var(--sdds-slider-disabled);\n      }\n\n      .sdds-slider__input-field-wrapper {\n        pointer-events: none;\n\n        input.sdds-slider__input-field {\n          color: var(--sdds-slider-disabled);\n          pointer-events: none;\n        }\n      }\n    }\n\n    .sdds-slider__value {\n      display: none;\n    }\n\n    .sdds-slider__track {\n      .sdds-slider__track-fill {\n        background-color: var(--sdds-slider-disabled);\n      }\n    }\n\n    .sdds-slider__value-dividers {\n      .sdds-slider__value-divider {\n        span {\n          color: var(--sdds-slider-disabled);\n        }\n      }\n    }\n\n    .sdds-slider__scrubber {\n      pointer-events: none;\n\n      .sdds-slider__scrubber-inner {\n        background-color: var(--sdds-slider-disabled);\n        cursor: default;\n      }\n    }\n  }\n\n  &.sdds-slider-small {\n    .sdds-slider__scrubber {\n      .sdds-slider__scrubber-inner {\n        width: 16px;\n        height: 16px;\n\n        &::before {\n          width: 40px;\n          height: 40px;\n        }\n\n        &.pressed {\n          width: 20px;\n          height: 20px;\n        }\n      }\n    }\n  }\n}\n\n.sdds-slider {\n  .sdds-slider__controls {\n    .sdds-slider__control {\n      cursor: default;\n\n      &.sdds-slider__control-minus,\n      &.sdds-slider__control-plus {\n        sdds-icon {\n          color: var(--sdds-slider-controls-color);\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    .sdds-slider__controls {\n      .sdds-slider__control {\n        cursor: default;\n\n        &.sdds-slider__control-minus,\n        &.sdds-slider__control-plus {\n          sdds-icon {\n            color: var(--sdds-slider-disabled);\n          }\n        }\n      }\n    }\n  }\n}\n","import { Component, h, Prop, Listen, EventEmitter, Event, Method } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-slider',\n  styleUrl: 'slider.scss',\n  shadow: false,\n})\nexport class Slider {\n  /** Text for label */\n  @Prop() label: string = '';\n\n  /** Initial value */\n  @Prop() value: string = '0';\n\n  /** Minimum value */\n  @Prop() min: string = '0';\n\n  /** Maximum value */\n  @Prop() max: string = '100';\n\n  /** Number of tick markers (tick for min- and max-value will be added automatically) */\n  @Prop() ticks: string = '0';\n\n  /** Decide to show numbers above the tick markers or not  */\n  @Prop() showTickNumbers: boolean = false;\n\n  /** Decide to show the tooltip or not */\n  @Prop() tooltip: boolean = false;\n\n  /** Sets the disabled state for the whole component  */\n  @Prop() disabled: boolean = false;\n\n  /** Sets the read only state for the whole component  */\n  @Prop() readOnly: boolean = false;\n\n  /** Decide to show the controls or not */\n  @Prop() controls: boolean = false;\n\n  /** Decide to show the input field or not */\n  @Prop() input: boolean = false;\n\n  /** Defines how much to increment/decrement the value when using controls */\n  @Prop() step: string = '1';\n\n  /** Name property (will be inherited by the native slider component) */\n  @Prop() name: string = '';\n\n  /** Sets the size of the scrubber */\n  @Prop() scrubberSize: 'sm' | 'lg' = 'lg';\n\n  /** Snap to the ticks grid */\n  @Prop() snap: boolean = false;\n\n  /** Id for the sliders input element, randomly generated if not specified. */\n  @Prop() sliderId: string = crypto.randomUUID();\n\n  wrapperElement: HTMLElement = null;\n\n  scrubberElement: HTMLElement = null;\n\n  scrubberInnerElement: HTMLElement = null;\n\n  dividersElement: HTMLElement = null;\n\n  trackElement: HTMLElement = null;\n\n  trackFillElement: HTMLElement = null;\n\n  minusElement: HTMLElement = null;\n\n  plusElement: HTMLElement = null;\n\n  inputElement: HTMLInputElement = null;\n\n  nativeRangeInputElement: HTMLInputElement = null;\n\n  scrubberGrabPos: object = { x: 0, y: 0 };\n\n  scrubberGrabbed: boolean = false;\n\n  scrubberLeft: number = 0;\n\n  tickValues: Array<number> = [];\n\n  disabledState: boolean = false;\n\n  readonlyState: boolean = false;\n\n  useControls: boolean = false;\n\n  useInput: boolean = false;\n\n  useSmall: boolean = false;\n\n  useSnapping: boolean = false;\n\n  supposedValueSlot: number = -1;\n\n  eventListenersAdded: boolean = false;\n\n  resizeObserverAdded: boolean = false;\n\n  /** Sends the value of the slider when changed. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    value: string;\n  }>;\n\n  /** Public method to re-initialise the slider if some configuration props are changed */\n  @Method() async reset() {\n    // @TODO: maybe refactor to use watch-decorators instead\n    this.componentWillLoad();\n    this.componentDidLoad();\n  }\n\n  @Listen('keydown')\n  handleKeydown(event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        this.stepLeft();\n        break;\n\n      case 'ArrowRight':\n        this.stepRight();\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  @Listen('mouseup', { target: 'window' })\n  handleMouseUp() {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    this.scrubberGrabbed = false;\n    this.scrubberInnerElement.classList.remove('pressed');\n    this.updateValue();\n\n    this.trackElement.focus();\n  }\n\n  @Listen('touchend', { target: 'window' })\n  handleTouchEnd() {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    this.scrubberGrabbed = false;\n    this.scrubberInnerElement.classList.remove('pressed');\n    this.updateValue();\n\n    this.trackElement.focus();\n  }\n\n  @Listen('mousemove', { target: 'window' })\n  handleMouseMove(event) {\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    const numTicks = parseInt(this.ticks);\n    const trackRect = this.trackElement.getBoundingClientRect();\n    let localLeft = event.clientX - trackRect.left;\n    this.supposedValueSlot = -1;\n\n    if (this.useSnapping && numTicks > 0) {\n      const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n      localLeft = Math.round(localLeft / v) * v;\n\n      this.supposedValueSlot = Math.round(localLeft / v);\n    }\n\n    this.scrubberLeft = this.constrainScrubber(localLeft);\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n    this.updateValue();\n    this.updateTrack();\n  }\n\n  @Listen('touchmove', { target: 'window' })\n  handleTouchMove(event) {\n    event.preventDefault();\n\n    if (!this.scrubberGrabbed) {\n      return;\n    }\n\n    const numTicks = parseInt(this.ticks);\n    const trackRect = this.trackElement.getBoundingClientRect();\n    let localLeft = event.touches[0].clientX - trackRect.left;\n\n    this.supposedValueSlot = -1;\n\n    if (this.useSnapping && numTicks > 0) {\n      const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n      localLeft = Math.round(localLeft / v) * v;\n\n      this.supposedValueSlot = Math.round(localLeft / v);\n    }\n\n    this.scrubberLeft = this.constrainScrubber(localLeft);\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n    this.updateValue();\n    this.updateTrack();\n  }\n\n  updateTrack() {\n    const trackWidth = this.getTrackWidth();\n    const percentageFilled = (this.scrubberLeft / trackWidth) * 100;\n\n    this.trackFillElement.style.width = `${percentageFilled}%`;\n  }\n\n  dispatchChangeEvent() {\n    this.sddsChange.emit({ value: this.value });\n  }\n\n  updateValue() {\n    const trackWidth = this.getTrackWidth();\n\n    /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding)  */\n    if (this.supposedValueSlot > 0) {\n      const supposedValue = this.tickValues[this.supposedValueSlot];\n      this.value = `${supposedValue}`;\n    } else {\n      const percentage = this.scrubberLeft / trackWidth;\n      this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;\n    }\n\n    this.dispatchChangeEvent();\n  }\n\n  updateValueForced(value) {\n    this.value = value;\n    this.dispatchChangeEvent();\n  }\n\n  getMin() {\n    return parseFloat(this.min);\n  }\n\n  getMax() {\n    return parseFloat(this.max);\n  }\n\n  constrainScrubber(x) {\n    const width = this.getTrackWidth();\n\n    if (x < 0) {\n      return 0;\n    }\n\n    if (x > width) {\n      return width;\n    }\n\n    return x;\n  }\n\n  getTrackWidth() {\n    const trackRect = this.trackElement.getBoundingClientRect();\n    return trackRect.right - trackRect.left;\n  }\n\n  calculateScrubberLeftFromValue(value) {\n    const initValue = value;\n    const trackWidth = this.getTrackWidth();\n\n    const normalizedValue = initValue - this.getMin();\n    const normalizedMax = this.getMax() - this.getMin();\n\n    const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;\n\n    this.scrubberLeft = calculatedLeft;\n\n    this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n  }\n\n  componentDidLoad() {\n    if (!this.resizeObserverAdded) {\n      this.resizeObserverAdded = true;\n\n      const resizeObserver = new ResizeObserver((/* entries */) => {\n        this.calculateScrubberLeftFromValue(this.value);\n        this.updateTrack();\n      });\n\n      resizeObserver.observe(this.wrapperElement);\n    }\n\n    if (!this.eventListenersAdded) {\n      this.eventListenersAdded = true;\n\n      this.scrubberElement.addEventListener('mousedown', (event) => {\n        event.preventDefault();\n        this.grabScrubber(event.offsetX, event.offsetY);\n      });\n\n      this.scrubberElement.addEventListener('touchstart', (event) => {\n        const rect = this.scrubberElement.getBoundingClientRect();\n        const x = event.targetTouches[0].pageX - rect.left;\n        const y = event.targetTouches[0].pageY - rect.top;\n        this.grabScrubber(x, y);\n      });\n\n      if (this.useControls) {\n        this.minusElement.addEventListener('click', () => {\n          this.stepLeft();\n        });\n\n        this.plusElement.addEventListener('click', () => {\n          this.stepRight();\n        });\n      }\n\n      if (this.inputElement) {\n        this.inputElement.addEventListener('keydown', (event) => {\n          event.stopPropagation();\n\n          if (event.key === 'Enter') {\n            let newValue = parseInt(this.inputElement.value);\n\n            if (newValue < this.getMin()) {\n              newValue = this.getMin();\n            } else if (newValue > this.getMax()) {\n              newValue = this.getMax();\n            }\n\n            this.calculateScrubberLeftFromValue(newValue);\n            this.updateValueForced(newValue);\n            this.updateTrack();\n\n            this.inputElement.blur();\n            this.wrapperElement.focus();\n          }\n        });\n      }\n    }\n\n    this.calculateScrubberLeftFromValue(this.value);\n    this.updateTrack();\n  }\n\n  grabScrubber(xOffset, yOffset) {\n    if (this.readonlyState) {\n      return;\n    }\n\n    this.scrubberGrabPos = {\n      x: xOffset,\n      y: yOffset,\n    };\n\n    this.scrubberGrabbed = true;\n    this.scrubberInnerElement.classList.add('pressed');\n  }\n\n  calculateInputSizeFromMax() {\n    return this.max.length;\n  }\n\n  controlsStep(delta) {\n    if (this.readonlyState || this.disabled) {\n      return;\n    }\n\n    const trackWidth = this.getTrackWidth();\n    const percentage = this.scrubberLeft / trackWidth;\n    const numTicks = parseInt(this.ticks);\n\n    let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());\n\n    currentValue += delta;\n\n    if (currentValue < this.getMin()) {\n      currentValue = this.getMin();\n    } else if (currentValue > this.getMax()) {\n      currentValue = this.getMax();\n    }\n\n    this.value = `${currentValue}`;\n\n    /* if snapping is enabled, instead just increment or decrement the current \"fixed\" value from our ticknumber array */\n    if (this.useSnapping && numTicks > 0) {\n      const stepDir = delta > 0 ? 1 : -1;\n      this.supposedValueSlot += stepDir;\n\n      if (this.supposedValueSlot < 0) {\n        this.supposedValueSlot = 0;\n      } else if (this.supposedValueSlot > numTicks + 1) {\n        this.supposedValueSlot = numTicks + 1;\n      }\n    }\n\n    this.calculateScrubberLeftFromValue(currentValue);\n    this.updateTrack();\n    this.updateValue();\n  }\n\n  stepLeft() {\n    this.controlsStep(-parseInt(this.step));\n  }\n\n  stepRight() {\n    this.controlsStep(parseInt(this.step));\n  }\n\n  componentWillLoad() {\n    const numTicks = parseInt(this.ticks);\n\n    if (numTicks > 0) {\n      this.tickValues = [this.getMin()];\n\n      const step = (this.getMax() - this.getMin()) / (numTicks + 1);\n\n      for (let i = 1; i < numTicks + 1; i++) {\n        this.tickValues.push(this.getMin() + Math.round(step * i));\n      }\n\n      this.tickValues.push(this.getMax());\n    }\n\n    if (this.disabled) {\n      this.disabledState = true;\n    } else {\n      this.disabledState = false;\n    }\n\n    if (this.readOnly) {\n      this.readonlyState = true;\n    } else {\n      this.readonlyState = false;\n    }\n\n    this.useInput = false;\n    this.useControls = false;\n\n    if (this.controls) {\n      this.useControls = true;\n    } else if (this.input) {\n      this.useInput = true;\n    }\n\n    this.useSmall = false;\n\n    if (this.scrubberSize === 'sm') {\n      this.useSmall = true;\n    }\n\n    this.useSnapping = false;\n\n    if (this.snap) {\n      this.useSnapping = true;\n    }\n\n    const min = this.getMin();\n    const max = this.getMax();\n\n    if (min > max) {\n      console.warn(\n        'min-prop must have a higher value than max-prop for the component to work correctly.',\n      );\n      this.disabledState = true;\n    }\n  }\n\n  render() {\n    return (\n      <div class={`sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}`}>\n        <input\n          ref={(el) => {\n            this.nativeRangeInputElement = el as HTMLInputElement;\n          }}\n          class=\"sdds-slider-native-element\"\n          type=\"range\"\n          value={this.value}\n          name={this.name}\n          min={this.min}\n          max={this.max}\n          disabled={this.disabled}\n        ></input>\n\n        <div\n          class={`sdds-slider ${this.disabledState ? 'disabled' : ''} ${\n            this.useSmall ? 'sdds-slider-small' : ''\n          }`}\n          ref={(el) => {\n            this.wrapperElement = el as HTMLElement;\n          }}\n        >\n          {this.useInput && (\n            <div class=\"sdds-slider__input-values\">\n              <div\n                ref={(el) => {\n                  this.minusElement = el as HTMLElement;\n                }}\n                class=\"sdds-slider__input-value\"\n              >\n                {this.min}\n              </div>\n            </div>\n          )}\n\n          {this.useControls && (\n            <div class=\"sdds-slider__controls\">\n              <div\n                ref={(el) => (this.minusElement = el as HTMLElement)}\n                class=\"sdds-slider__control sdds-slider__control-minus\"\n              >\n                <sdds-icon name=\"minus\" size=\"16px\"></sdds-icon>\n              </div>\n            </div>\n          )}\n\n          <div class=\"sdds-slider-inner\">\n            <label class={this.tickValues.length > 0 && 'offset'}>{this.label}</label>\n\n            {this.tickValues.length > 0 && (\n              <div class=\"sdds-slider__value-dividers-wrapper\">\n                <div\n                  ref={(el) => {\n                    this.dividersElement = el as HTMLElement;\n                  }}\n                  class=\"sdds-slider__value-dividers\"\n                >\n                  {this.tickValues.map((value) => (\n                    <div class=\"sdds-slider__value-divider\">\n                      {this.showTickNumbers && <span>{value}</span>}\n                    </div>\n                  ))}\n                </div>\n              </div>\n            )}\n\n            <div\n              class=\"sdds-slider__track\"\n              ref={(el) => {\n                this.trackElement = el as HTMLElement;\n              }}\n              tabindex={this.disabled ? '-1' : '0'}\n            >\n              <div\n                class=\"sdds-slider__track-fill\"\n                ref={(el) => {\n                  this.trackFillElement = el as HTMLElement;\n                }}\n              ></div>\n\n              <div\n                class=\"sdds-slider__scrubber\"\n                ref={(el) => {\n                  this.scrubberElement = el as HTMLElement;\n                }}\n              >\n                {this.tooltip && (\n                  <div class=\"sdds-slider__value\">\n                    {this.value}\n                    <svg\n                      width=\"18\"\n                      height=\"14\"\n                      viewBox=\"0 0 18 14\"\n                      fill=\"none\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                    >\n                      <path\n                        d=\"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z\"\n                        fill=\"currentColor\"\n                      />\n                    </svg>\n                  </div>\n                )}\n\n                <div\n                  class=\"sdds-slider__scrubber-inner\"\n                  ref={(el) => {\n                    this.scrubberInnerElement = el as HTMLElement;\n                  }}\n                ></div>\n              </div>\n            </div>\n          </div>\n\n          {this.useInput && (\n            <div class=\"sdds-slider__input-values\">\n              <div\n                ref={(el) => {\n                  this.minusElement = el as HTMLElement;\n                }}\n                class=\"sdds-slider__input-value\"\n              >\n                {this.max}\n              </div>\n              <div class=\"sdds-slider__input-field-wrapper\">\n                <input\n                  onFocus={(e) => {\n                    if (this.readonlyState) {\n                      e.preventDefault();\n                      this.inputElement.blur();\n                    }\n                  }}\n                  size={this.calculateInputSizeFromMax()}\n                  class=\"sdds-slider__input-field\"\n                  value={this.value}\n                  ref={(el) => {\n                    this.inputElement = el as HTMLInputElement;\n                  }}\n                />\n              </div>\n            </div>\n          )}\n\n          {this.useControls && (\n            <div class=\"sdds-slider__controls\">\n              <div\n                ref={(el) => (this.plusElement = el as HTMLElement)}\n                class=\"sdds-slider__control sdds-slider__control-plus\"\n              >\n                <sdds-icon name=\"plus\" size=\"16px\"></sdds-icon>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,g7Q,MCOLC,EAAM,M,gEAiDjBC,KAAAC,eAA8B,KAE9BD,KAAAE,gBAA+B,KAE/BF,KAAAG,qBAAoC,KAEpCH,KAAAI,gBAA+B,KAE/BJ,KAAAK,aAA4B,KAE5BL,KAAAM,iBAAgC,KAEhCN,KAAAO,aAA4B,KAE5BP,KAAAQ,YAA2B,KAE3BR,KAAAS,aAAiC,KAEjCT,KAAAU,wBAA4C,KAE5CV,KAAAW,gBAA0B,CAAEC,EAAG,EAAGC,EAAG,GAErCb,KAAAc,gBAA2B,MAE3Bd,KAAAe,aAAuB,EAEvBf,KAAAgB,WAA4B,GAE5BhB,KAAAiB,cAAyB,MAEzBjB,KAAAkB,cAAyB,MAEzBlB,KAAAmB,YAAuB,MAEvBnB,KAAAoB,SAAoB,MAEpBpB,KAAAqB,SAAoB,MAEpBrB,KAAAsB,YAAuB,MAEvBtB,KAAAuB,mBAA6B,EAE7BvB,KAAAwB,oBAA+B,MAE/BxB,KAAAyB,oBAA+B,M,WA3FP,G,WAGA,I,SAGF,I,SAGA,M,WAGE,I,qBAGW,M,aAGR,M,cAGC,M,cAGA,M,cAGA,M,WAGH,M,UAGF,I,UAGA,G,kBAGa,K,UAGZ,M,cAGGC,OAAOC,Y,CA4DxBC,cAER5B,KAAK6B,oBACL7B,KAAK8B,kB,CAIPC,cAAcC,GACZ,OAAQA,EAAMC,KACZ,IAAK,YACHjC,KAAKkC,WACL,MAEF,IAAK,aACHlC,KAAKmC,YACL,M,CAQNC,gBACE,IAAKpC,KAAKc,gBAAiB,CACzB,M,CAGFd,KAAKc,gBAAkB,MACvBd,KAAKG,qBAAqBkC,UAAUC,OAAO,WAC3CtC,KAAKuC,cAELvC,KAAKK,aAAamC,O,CAIpBC,iBACE,IAAKzC,KAAKc,gBAAiB,CACzB,M,CAGFd,KAAKc,gBAAkB,MACvBd,KAAKG,qBAAqBkC,UAAUC,OAAO,WAC3CtC,KAAKuC,cAELvC,KAAKK,aAAamC,O,CAIpBE,gBAAgBV,GACd,IAAKhC,KAAKc,gBAAiB,CACzB,M,CAGF,MAAM6B,EAAWC,SAAS5C,KAAK6C,OAC/B,MAAMC,EAAY9C,KAAKK,aAAa0C,wBACpC,IAAIC,EAAYhB,EAAMiB,QAAUH,EAAUI,KAC1ClD,KAAKuB,mBAAqB,EAE1B,GAAIvB,KAAKsB,aAAeqB,EAAW,EAAG,CACpC,MAAMQ,EAAIC,KAAKC,MAAMrD,KAAKsD,iBAAmBX,EAAW,IACxDK,EAAYI,KAAKC,MAAML,EAAYG,GAAKA,EAExCnD,KAAKuB,kBAAoB6B,KAAKC,MAAML,EAAYG,E,CAGlDnD,KAAKe,aAAef,KAAKuD,kBAAkBP,GAC3ChD,KAAKE,gBAAgBsD,MAAMN,KAAO,GAAGlD,KAAKe,iBAE1Cf,KAAKuC,cACLvC,KAAKyD,a,CAIPC,gBAAgB1B,GACdA,EAAM2B,iBAEN,IAAK3D,KAAKc,gBAAiB,CACzB,M,CAGF,MAAM6B,EAAWC,SAAS5C,KAAK6C,OAC/B,MAAMC,EAAY9C,KAAKK,aAAa0C,wBACpC,IAAIC,EAAYhB,EAAM4B,QAAQ,GAAGX,QAAUH,EAAUI,KAErDlD,KAAKuB,mBAAqB,EAE1B,GAAIvB,KAAKsB,aAAeqB,EAAW,EAAG,CACpC,MAAMQ,EAAIC,KAAKC,MAAMrD,KAAKsD,iBAAmBX,EAAW,IACxDK,EAAYI,KAAKC,MAAML,EAAYG,GAAKA,EAExCnD,KAAKuB,kBAAoB6B,KAAKC,MAAML,EAAYG,E,CAGlDnD,KAAKe,aAAef,KAAKuD,kBAAkBP,GAC3ChD,KAAKE,gBAAgBsD,MAAMN,KAAO,GAAGlD,KAAKe,iBAE1Cf,KAAKuC,cACLvC,KAAKyD,a,CAGPA,cACE,MAAMI,EAAa7D,KAAKsD,gBACxB,MAAMQ,EAAoB9D,KAAKe,aAAe8C,EAAc,IAE5D7D,KAAKM,iBAAiBkD,MAAMO,MAAQ,GAAGD,I,CAGzCE,sBACEhE,KAAKiE,WAAWC,KAAK,CAAEC,MAAOnE,KAAKmE,O,CAGrC5B,cACE,MAAMsB,EAAa7D,KAAKsD,gBAGxB,GAAItD,KAAKuB,kBAAoB,EAAG,CAC9B,MAAM6C,EAAgBpE,KAAKgB,WAAWhB,KAAKuB,mBAC3CvB,KAAKmE,MAAQ,GAAGC,G,KACX,CACL,MAAMC,EAAarE,KAAKe,aAAe8C,EACvC7D,KAAKmE,MAAQ,GAAGf,KAAKkB,MAAMtE,KAAKuE,SAAWF,GAAcrE,KAAKwE,SAAWxE,KAAKuE,Y,CAGhFvE,KAAKgE,qB,CAGPS,kBAAkBN,GAChBnE,KAAKmE,MAAQA,EACbnE,KAAKgE,qB,CAGPO,SACE,OAAOG,WAAW1E,KAAK2E,I,CAGzBH,SACE,OAAOE,WAAW1E,KAAK4E,I,CAGzBrB,kBAAkB3C,GAChB,MAAMmD,EAAQ/D,KAAKsD,gBAEnB,GAAI1C,EAAI,EAAG,CACT,OAAO,C,CAGT,GAAIA,EAAImD,EAAO,CACb,OAAOA,C,CAGT,OAAOnD,C,CAGT0C,gBACE,MAAMR,EAAY9C,KAAKK,aAAa0C,wBACpC,OAAOD,EAAU+B,MAAQ/B,EAAUI,I,CAGrC4B,+BAA+BX,GAC7B,MAAMY,EAAYZ,EAClB,MAAMN,EAAa7D,KAAKsD,gBAExB,MAAM0B,EAAkBD,EAAY/E,KAAKuE,SACzC,MAAMU,EAAgBjF,KAAKwE,SAAWxE,KAAKuE,SAE3C,MAAMW,EAAkBF,EAAkBC,EAAiBpB,EAE3D7D,KAAKe,aAAemE,EAEpBlF,KAAKE,gBAAgBsD,MAAMN,KAAO,GAAGlD,KAAKe,gB,CAG5Ce,mBACE,IAAK9B,KAAKyB,oBAAqB,CAC7BzB,KAAKyB,oBAAsB,KAE3B,MAAM0D,EAAiB,IAAIC,gBAAe,KACxCpF,KAAK8E,+BAA+B9E,KAAKmE,OACzCnE,KAAKyD,aAAa,IAGpB0B,EAAeE,QAAQrF,KAAKC,e,CAG9B,IAAKD,KAAKwB,oBAAqB,CAC7BxB,KAAKwB,oBAAsB,KAE3BxB,KAAKE,gBAAgBoF,iBAAiB,aAActD,IAClDA,EAAM2B,iBACN3D,KAAKuF,aAAavD,EAAMwD,QAASxD,EAAMyD,QAAQ,IAGjDzF,KAAKE,gBAAgBoF,iBAAiB,cAAetD,IACnD,MAAM0D,EAAO1F,KAAKE,gBAAgB6C,wBAClC,MAAMnC,EAAIoB,EAAM2D,cAAc,GAAGC,MAAQF,EAAKxC,KAC9C,MAAMrC,EAAImB,EAAM2D,cAAc,GAAGE,MAAQH,EAAKI,IAC9C9F,KAAKuF,aAAa3E,EAAGC,EAAE,IAGzB,GAAIb,KAAKmB,YAAa,CACpBnB,KAAKO,aAAa+E,iBAAiB,SAAS,KAC1CtF,KAAKkC,UAAU,IAGjBlC,KAAKQ,YAAY8E,iBAAiB,SAAS,KACzCtF,KAAKmC,WAAW,G,CAIpB,GAAInC,KAAKS,aAAc,CACrBT,KAAKS,aAAa6E,iBAAiB,WAAYtD,IAC7CA,EAAM+D,kBAEN,GAAI/D,EAAMC,MAAQ,QAAS,CACzB,IAAI+D,EAAWpD,SAAS5C,KAAKS,aAAa0D,OAE1C,GAAI6B,EAAWhG,KAAKuE,SAAU,CAC5ByB,EAAWhG,KAAKuE,Q,MACX,GAAIyB,EAAWhG,KAAKwE,SAAU,CACnCwB,EAAWhG,KAAKwE,Q,CAGlBxE,KAAK8E,+BAA+BkB,GACpChG,KAAKyE,kBAAkBuB,GACvBhG,KAAKyD,cAELzD,KAAKS,aAAawF,OAClBjG,KAAKC,eAAeuC,O,MAM5BxC,KAAK8E,+BAA+B9E,KAAKmE,OACzCnE,KAAKyD,a,CAGP8B,aAAaW,EAASC,GACpB,GAAInG,KAAKkB,cAAe,CACtB,M,CAGFlB,KAAKW,gBAAkB,CACrBC,EAAGsF,EACHrF,EAAGsF,GAGLnG,KAAKc,gBAAkB,KACvBd,KAAKG,qBAAqBkC,UAAU+D,IAAI,U,CAG1CC,4BACE,OAAOrG,KAAK4E,IAAI0B,M,CAGlBC,aAAaC,GACX,GAAIxG,KAAKkB,eAAiBlB,KAAKyG,SAAU,CACvC,M,CAGF,MAAM5C,EAAa7D,KAAKsD,gBACxB,MAAMe,EAAarE,KAAKe,aAAe8C,EACvC,MAAMlB,EAAWC,SAAS5C,KAAK6C,OAE/B,IAAI6D,EAAe1G,KAAKuE,SAAWF,GAAcrE,KAAKwE,SAAWxE,KAAKuE,UAEtEmC,GAAgBF,EAEhB,GAAIE,EAAe1G,KAAKuE,SAAU,CAChCmC,EAAe1G,KAAKuE,Q,MACf,GAAImC,EAAe1G,KAAKwE,SAAU,CACvCkC,EAAe1G,KAAKwE,Q,CAGtBxE,KAAKmE,MAAQ,GAAGuC,IAGhB,GAAI1G,KAAKsB,aAAeqB,EAAW,EAAG,CACpC,MAAMgE,EAAUH,EAAQ,EAAI,GAAK,EACjCxG,KAAKuB,mBAAqBoF,EAE1B,GAAI3G,KAAKuB,kBAAoB,EAAG,CAC9BvB,KAAKuB,kBAAoB,C,MACpB,GAAIvB,KAAKuB,kBAAoBoB,EAAW,EAAG,CAChD3C,KAAKuB,kBAAoBoB,EAAW,C,EAIxC3C,KAAK8E,+BAA+B4B,GACpC1G,KAAKyD,cACLzD,KAAKuC,a,CAGPL,WACElC,KAAKuG,cAAc3D,SAAS5C,KAAK4G,M,CAGnCzE,YACEnC,KAAKuG,aAAa3D,SAAS5C,KAAK4G,M,CAGlC/E,oBACE,MAAMc,EAAWC,SAAS5C,KAAK6C,OAE/B,GAAIF,EAAW,EAAG,CAChB3C,KAAKgB,WAAa,CAAChB,KAAKuE,UAExB,MAAMqC,GAAQ5G,KAAKwE,SAAWxE,KAAKuE,WAAa5B,EAAW,GAE3D,IAAK,IAAIkE,EAAI,EAAGA,EAAIlE,EAAW,EAAGkE,IAAK,CACrC7G,KAAKgB,WAAW8F,KAAK9G,KAAKuE,SAAWnB,KAAKC,MAAMuD,EAAOC,G,CAGzD7G,KAAKgB,WAAW8F,KAAK9G,KAAKwE,S,CAG5B,GAAIxE,KAAKyG,SAAU,CACjBzG,KAAKiB,cAAgB,I,KAChB,CACLjB,KAAKiB,cAAgB,K,CAGvB,GAAIjB,KAAK+G,SAAU,CACjB/G,KAAKkB,cAAgB,I,KAChB,CACLlB,KAAKkB,cAAgB,K,CAGvBlB,KAAKoB,SAAW,MAChBpB,KAAKmB,YAAc,MAEnB,GAAInB,KAAKgH,SAAU,CACjBhH,KAAKmB,YAAc,I,MACd,GAAInB,KAAKiH,MAAO,CACrBjH,KAAKoB,SAAW,I,CAGlBpB,KAAKqB,SAAW,MAEhB,GAAIrB,KAAKkH,eAAiB,KAAM,CAC9BlH,KAAKqB,SAAW,I,CAGlBrB,KAAKsB,YAAc,MAEnB,GAAItB,KAAKmH,KAAM,CACbnH,KAAKsB,YAAc,I,CAGrB,MAAMqD,EAAM3E,KAAKuE,SACjB,MAAMK,EAAM5E,KAAKwE,SAEjB,GAAIG,EAAMC,EAAK,CACbwC,QAAQC,KACN,wFAEFrH,KAAKiB,cAAgB,I,EAIzBqG,SACE,OACEC,EAAA,OAAKC,MAAO,uBAAuBxH,KAAKkB,cAAgB,YAAc,MACpEqG,EAAA,SACEE,IAAMC,IACJ1H,KAAKU,wBAA0BgH,CAAsB,EAEvDF,MAAM,6BACNG,KAAK,QACLxD,MAAOnE,KAAKmE,MACZyD,KAAM5H,KAAK4H,KACXjD,IAAK3E,KAAK2E,IACVC,IAAK5E,KAAK4E,IACV6B,SAAUzG,KAAKyG,WAGjBc,EAAA,OACEC,MAAO,eAAexH,KAAKiB,cAAgB,WAAa,MACtDjB,KAAKqB,SAAW,oBAAsB,KAExCoG,IAAMC,IACJ1H,KAAKC,eAAiByH,CAAiB,GAGxC1H,KAAKoB,UACJmG,EAAA,OAAKC,MAAM,6BACTD,EAAA,OACEE,IAAMC,IACJ1H,KAAKO,aAAemH,CAAiB,EAEvCF,MAAM,4BAELxH,KAAK2E,MAKX3E,KAAKmB,aACJoG,EAAA,OAAKC,MAAM,yBACTD,EAAA,OACEE,IAAMC,GAAQ1H,KAAKO,aAAemH,EAClCF,MAAM,mDAEND,EAAA,aAAWK,KAAK,QAAQC,KAAK,WAKnCN,EAAA,OAAKC,MAAM,qBACTD,EAAA,SAAOC,MAAOxH,KAAKgB,WAAWsF,OAAS,GAAK,UAAWtG,KAAK8H,OAE3D9H,KAAKgB,WAAWsF,OAAS,GACxBiB,EAAA,OAAKC,MAAM,uCACTD,EAAA,OACEE,IAAMC,IACJ1H,KAAKI,gBAAkBsH,CAAiB,EAE1CF,MAAM,+BAELxH,KAAKgB,WAAW+G,KAAK5D,GACpBoD,EAAA,OAAKC,MAAM,8BACRxH,KAAKgI,iBAAmBT,EAAA,YAAOpD,QAO1CoD,EAAA,OACEC,MAAM,qBACNC,IAAMC,IACJ1H,KAAKK,aAAeqH,CAAiB,EAEvCO,SAAUjI,KAAKyG,SAAW,KAAO,KAEjCc,EAAA,OACEC,MAAM,0BACNC,IAAMC,IACJ1H,KAAKM,iBAAmBoH,CAAiB,IAI7CH,EAAA,OACEC,MAAM,wBACNC,IAAMC,IACJ1H,KAAKE,gBAAkBwH,CAAiB,GAGzC1H,KAAKkI,SACJX,EAAA,OAAKC,MAAM,sBACRxH,KAAKmE,MACNoD,EAAA,OACExD,MAAM,KACNoE,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENf,EAAA,QACEgB,EAAE,6LACFF,KAAK,mBAMbd,EAAA,OACEC,MAAM,8BACNC,IAAMC,IACJ1H,KAAKG,qBAAuBuH,CAAiB,OAOtD1H,KAAKoB,UACJmG,EAAA,OAAKC,MAAM,6BACTD,EAAA,OACEE,IAAMC,IACJ1H,KAAKO,aAAemH,CAAiB,EAEvCF,MAAM,4BAELxH,KAAK4E,KAER2C,EAAA,OAAKC,MAAM,oCACTD,EAAA,SACEiB,QAAUC,IACR,GAAIzI,KAAKkB,cAAe,CACtBuH,EAAE9E,iBACF3D,KAAKS,aAAawF,M,GAGtB4B,KAAM7H,KAAKqG,4BACXmB,MAAM,2BACNrD,MAAOnE,KAAKmE,MACZsD,IAAMC,IACJ1H,KAAKS,aAAeiH,CAAsB,MAOnD1H,KAAKmB,aACJoG,EAAA,OAAKC,MAAM,yBACTD,EAAA,OACEE,IAAMC,GAAQ1H,KAAKQ,YAAckH,EACjCF,MAAM,kDAEND,EAAA,aAAWK,KAAK,OAAOC,KAAK,Y"}

package/dist/tegel/p-1e196fff.entry.js

@@ -0,0 +1,2 @@
+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}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.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;border-radius:2px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:var(--sdds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.sdds-checkbox-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:var(--sdds-checkbox-background-opacity-hover)}.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",{name:"label"})))}get host(){return d(this)}};b.style=o;export{b as sdds_checkbox};
+//# sourceMappingURL=p-1e196fff.entry.js.map

package/dist/tegel/p-1e196fff.entry.js.map

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

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

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

package/dist/tegel/{p-cfacd8e6.entry.js.map → p-23998948.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["tableBodyCellCss","relevantTableProps","TableBodyCell","internalSddsPropChangeListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","internalSddsHoverListener","receivedID","receivedKeyValue","activeSorting","cellKey","internalSddsTextAlignListener","receivedKey","receivedTextAlign","textAlignState","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","render","h","Host","class","compactDesign","verticalDividers","noMinWidth","disablePadding","style","textAlign","cellValue","tableBodyRowCss","TableBodyRow","bodyCheckBoxClicked","row","bodyCheckBoxStatus","currentTarget","checked","classList","add","remove","internalSddsRowChange","emit","bodyCheckBoxStatusUpdater","status","mainCheckBoxStatus","headCheckboxListener","internalSddsCheckboxChangeListener","receivedBodyCheckboxStatus","componentDidLoad","internalSddsPagination","modeVariant","enableMultiselect","type","onChange"],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx","./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: table-cell;\n  box-sizing: border-box;\n  color: var(--sdds-data-table-color);\n  padding: var(--sdds-spacing-element-16);\n  min-width: 192px;\n  vertical-align: top;\n  background-color: transparent;\n  transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n  padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n  background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n  border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n  border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n  min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n@Component({\n  tag: 'sdds-body-cell',\n  styleUrl: 'table-body-cell.scss',\n  shadow: true,\n})\nexport class TableBodyCell {\n  /** Value that will be presented as text inside a cell */\n  @Prop({ reflect: true }) cellValue: string | number;\n\n  /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */\n  @Prop({ reflect: true }) cellKey: any;\n\n  /** Disables internal padding. Useful when passing other components to cell. */\n  @Prop({ reflect: true }) disablePadding: boolean = false;\n\n  @State() textAlignState: string;\n\n  @State() activeSorting: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  @Listen('internalSddsPropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  // Listen to headKey from data-table-header-element\n  @Listen('internalSddsHover', { target: 'body' })\n  internalSddsHoverListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue] = event.detail;\n\n    if (this.tableId === receivedID) {\n      this.activeSorting = this.cellKey === receivedKeyValue;\n    }\n  }\n\n  // Listen to internalSddsTextAlign from data-table-header-element\n  @Listen('internalSddsTextAlign', { target: 'body' })\n  internalSddsTextAlignListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n    if (this.tableId === receivedID) {\n      if (this.cellKey === receivedKey) {\n        this.textAlignState = receivedTextAlign;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__body-cell': true,\n          'sdds-table__body-cell--hover': this.activeSorting,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--no-min-width': this.noMinWidth,\n          'sdds-table__body-cell--no-padding': this.disablePadding,\n        }}\n        style={{ textAlign: this.textAlignState }}\n      >\n        {this.cellValue}\n        <slot />\n      </Host>\n    );\n  }\n}\n","/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n  @include sdds-box-sizing;\n\n  display: table-row;\n  border-bottom: 1px solid var(--sdds-data-table-divider);\n  background-color: var(--sdds-data-table-body-row-background);\n  transition: background-color 200ms ease;\n  color: var(--sdds-data-table-color);\n\n  .sdds-table__body-cell--checkbox {\n    min-width: 48px;\n    width: 48px;\n    padding: 0;\n  }\n}\n\n:host(.sdds-table__row:hover) {\n  background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n  background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n  background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n  display: none;\n}\n\n:host(.sdds-table__row--expended) {\n  width: 100%;\n  background-color: pink;\n}\n\n:host {\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n}\n\n:host(.sdds-table__compact) {\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__body-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'enableMultiselect',\n  'verticalDividers',\n  'compactDesign',\n  'modeVariant',\n];\n\n@Component({\n  tag: 'sdds-table-body-row',\n  styleUrl: 'table-body-row.scss',\n  shadow: true,\n})\nexport class TableBodyRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() bodyCheckBoxStatus: boolean = false;\n\n  @State() mainCheckBoxStatus: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  bodyCheckBoxClicked(event) {\n    const row = this.host;\n    this.bodyCheckBoxStatus = event.currentTarget.checked;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n  }\n\n  bodyCheckBoxStatusUpdater(status) {\n    this.mainCheckBoxStatus = status;\n    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n    const row = this.host;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n  }\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  /** @internal Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */\n  @Event({\n    eventName: 'internalSddsRowChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsRowChange: EventEmitter<boolean>;\n\n  /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'internalSddsPagination',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsPagination: EventEmitter<string>;\n\n  @Listen('internalSddsMainCheckboxSelect', { target: 'body' })\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.bodyCheckBoxStatusUpdater(event.detail[1]);\n    }\n  }\n\n  @Listen('internalSddsCheckboxChange', { target: 'body' })\n  internalSddsCheckboxChangeListener(event: CustomEvent<any>) {\n    const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.internalSddsPagination.emit(this.tableId);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        {this.enableMultiselect && (\n          <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n            <div class=\"sdds-checkbox-item\">\n              <label class=\"sdds-form-label sdds-form-label--data-table\">\n                <input\n                  class=\"sdds-form-input\"\n                  type=\"checkbox\"\n                  onChange={(event) => this.bodyCheckBoxClicked(event)}\n                  checked={this.bodyCheckBoxStatus}\n                />\n              </label>\n            </div>\n          </td>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["tableBodyCellCss","relevantTableProps","TableBodyCell","internalSddsPropChangeListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","internalSddsHoverListener","receivedID","receivedKeyValue","activeSorting","cellKey","internalSddsTextAlignListener","receivedKey","receivedTextAlign","textAlignState","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","render","h","Host","class","compactDesign","verticalDividers","noMinWidth","disablePadding","style","textAlign","cellValue","tableBodyRowCss","TableBodyRow","bodyCheckBoxClicked","row","bodyCheckBoxStatus","currentTarget","checked","classList","add","remove","internalSddsRowChange","emit","bodyCheckBoxStatusUpdater","status","mainCheckBoxStatus","headCheckboxListener","internalSddsCheckboxChangeListener","receivedBodyCheckboxStatus","componentDidLoad","internalSddsPagination","modeVariant","enableMultiselect","type","onChange"],"sources":["./src/components/data-table/table-body-cell/table-body-cell.scss?tag=sdds-body-cell&encapsulation=shadow","./src/components/data-table/table-body-cell/table-body-cell.tsx","./src/components/data-table/table-body-row/table-body-row.scss?tag=sdds-table-body-row&encapsulation=shadow","./src/components/data-table/table-body-row/table-body-row.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__body-cell) {\n  @include sdds-box-sizing;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  display: table-cell;\n  box-sizing: border-box;\n  color: var(--sdds-data-table-color);\n  padding: var(--sdds-spacing-element-16);\n  min-width: 192px;\n  vertical-align: top;\n  background-color: transparent;\n  transition: background-color 200ms ease;\n}\n\n:host(.sdds-table__body-cell--no-padding) {\n  padding: 0;\n}\n\n:host(.sdds-table__body-cell--hover) {\n  background-color: var(--sdds-data-table-body-cell-background-hover);\n}\n\n:host(.sdds-table__compact) {\n  padding: var(--sdds-spacing-element-8) var(--sdds-spacing-element-16);\n}\n\n:host(.sdds-table--divider) {\n  border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n  border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n  min-width: unset;\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n@Component({\n  tag: 'sdds-body-cell',\n  styleUrl: 'table-body-cell.scss',\n  shadow: true,\n})\nexport class TableBodyCell {\n  /** Value that will be presented as text inside a cell */\n  @Prop({ reflect: true }) cellValue: string | number;\n\n  /** Passing same cell key for all body cells which is used in head cell enables features of text align and hovering */\n  @Prop({ reflect: true }) cellKey: any;\n\n  /** Disables internal padding. Useful when passing other components to cell. */\n  @Prop({ reflect: true }) disablePadding: boolean = false;\n\n  @State() textAlignState: string;\n\n  @State() activeSorting: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  @Listen('internalSddsPropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  // Listen to headKey from data-table-header-element\n  @Listen('internalSddsHover', { target: 'body' })\n  internalSddsHoverListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue] = event.detail;\n\n    if (this.tableId === receivedID) {\n      this.activeSorting = this.cellKey === receivedKeyValue;\n    }\n  }\n\n  // Listen to internalSddsTextAlign from data-table-header-element\n  @Listen('internalSddsTextAlign', { target: 'body' })\n  internalSddsTextAlignListener(event: CustomEvent<any>) {\n    const [receivedID, receivedKey, receivedTextAlign] = event.detail;\n\n    if (this.tableId === receivedID) {\n      if (this.cellKey === receivedKey) {\n        this.textAlignState = receivedTextAlign;\n      }\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__body-cell': true,\n          'sdds-table__body-cell--hover': this.activeSorting,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--no-min-width': this.noMinWidth,\n          'sdds-table__body-cell--no-padding': this.disablePadding,\n        }}\n        style={{ textAlign: this.textAlignState }}\n      >\n        {this.cellValue}\n        <slot />\n      </Host>\n    );\n  }\n}\n","/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__row) {\n  @include sdds-box-sizing;\n\n  display: table-row;\n  border-bottom: 1px solid var(--sdds-data-table-divider);\n  background-color: var(--sdds-data-table-body-row-background);\n  transition: background-color 200ms ease;\n  color: var(--sdds-data-table-color);\n\n  .sdds-table__body-cell--checkbox {\n    min-width: 48px;\n    width: 48px;\n    padding: 0;\n  }\n}\n\n:host(.sdds-table__row:hover) {\n  background-color: var(--sdds-data-table-body-row-background-hover);\n}\n\n:host(.sdds-table__row--selected) {\n  background-color: var(--sdds-data-table-body-row-background-active);\n}\n\n:host(.sdds-table__row--selected:hover) {\n  background-color: var(--sdds-data-table-body-row-background-active-hover);\n}\n\n:host(.sdds-table__row--hidden) {\n  display: none;\n}\n\n:host(.sdds-table__row--expended) {\n  width: 100%;\n  background-color: pink;\n}\n\n:host {\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n}\n\n:host(.sdds-table__compact) {\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__body-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n","import { Component, Element, h, Host, State, Event, EventEmitter, Listen } from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'enableMultiselect',\n  'verticalDividers',\n  'compactDesign',\n  'modeVariant',\n];\n\n@Component({\n  tag: 'sdds-table-body-row',\n  styleUrl: 'table-body-row.scss',\n  shadow: true,\n})\nexport class TableBodyRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() bodyCheckBoxStatus: boolean = false;\n\n  @State() mainCheckBoxStatus: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() modeVariant: 'primary' | 'secondary' = null;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  bodyCheckBoxClicked(event) {\n    const row = this.host;\n    this.bodyCheckBoxStatus = event.currentTarget.checked;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n  }\n\n  bodyCheckBoxStatusUpdater(status) {\n    this.mainCheckBoxStatus = status;\n    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;\n    const row = this.host;\n    if (this.bodyCheckBoxStatus === true) {\n      row.classList.add('sdds-table__row--selected');\n    } else {\n      row.classList.remove('sdds-table__row--selected');\n    }\n    this.internalSddsRowChange.emit(this.bodyCheckBoxStatus);\n  }\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  /** @internal Send status of single row to the parent, sdds-table component that hold logic for data export and main checkbox control */\n  @Event({\n    eventName: 'internalSddsRowChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsRowChange: EventEmitter<boolean>;\n\n  /** @internal Event that triggers pagination function. Needed as first rows have to be rendered in order for pagination to run */\n  @Event({\n    eventName: 'internalSddsPagination',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  internalSddsPagination: EventEmitter<string>;\n\n  @Listen('internalSddsMainCheckboxSelect', { target: 'body' })\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.bodyCheckBoxStatusUpdater(event.detail[1]);\n    }\n  }\n\n  @Listen('internalSddsCheckboxChange', { target: 'body' })\n  internalSddsCheckboxChangeListener(event: CustomEvent<any>) {\n    const [receivedID, receivedBodyCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentDidLoad() {\n    this.internalSddsPagination.emit(this.tableId);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table__row': true,\n          'sdds-table__compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-mode-variant-primary': this.modeVariant === 'primary',\n          'sdds-mode-variant-secondary': this.modeVariant === 'secondary',\n        }}\n      >\n        {this.enableMultiselect && (\n          <td class=\"sdds-table__body-cell sdds-table__body-cell--checkbox\">\n            <div class=\"sdds-checkbox-item\">\n              <label class=\"sdds-form-label sdds-form-label--data-table\">\n                <input\n                  class=\"sdds-form-input\"\n                  type=\"checkbox\"\n                  onChange={(event) => this.bodyCheckBoxClicked(event)}\n                  checked={this.bodyCheckBoxStatus}\n                />\n              </label>\n            </div>\n          </td>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/tegel/p-29bcd369.entry.js

@@ -0,0 +1,2 @@
+import{r as d,h as s,H as r,g as o}from"./p-387e1798.js";const n=":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:var(--sdds-blue-700);--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 / 48%);--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-400);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-400);--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-color-focus:var(--sdds-black);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--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-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:var(--sdds-red-700);--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-400);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-secondary-outline-color:var(--sdds-white);--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-color-focus:var(--sdds-white);--sdds-btn-icon-secondary-fill-focus:var(--sdds-white);--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:none}.sdds-btn:focus-visible{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-visible{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-visible{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-visible{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-visible{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-visible{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-visible .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-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-visible{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-visible .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:rgba(0, 0, 0, 0.38)}.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-visible{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-visible .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:rgba(0, 0, 0, 0.38)}.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-visible{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-visible .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)}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(r,{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 o(this)}};t.style=n;export{t as sdds_button};
+//# sourceMappingURL=p-29bcd369.entry.js.map

package/dist/tegel/p-29bcd369.entry.js.map

@@ -0,0 +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    outline: none;\n  }\n\n  &:focus-visible {\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-visible {\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-visible {\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-visible {\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-visible {\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-visible {\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\n        @if $type == 'ghost' or $type == 'secondary' {\n          .sdds-btn-icon,\n          &.sdds-btn-icon {\n            color: rgb(0 0 0 / 38%);\n          }\n        } @else {\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,u+tB,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-3a93619e.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as s,h as e,H as r,g as i}from"./p-387e1798.js";const d=":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 slot[name=banner-subheader]{display:block;margin-top:4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .banner-content .banner-link slot[name=banner-link]{display:block;width:fit-content;margin-top:16px}:host .banner-content .banner-link.no-subheader slot[name=banner-link]{margin-top:4px}: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 o=class{constructor(e){n(this,e);this.sddsClose=s(this,"sddsClose",7);this.handleClose=()=>{const n=this.sddsClose.emit({bannerId:this.bannerId,hidden:this.hidden});if(!n.defaultPrevented){this.hidden=true}};this.icon=undefined;this.header=undefined;this.type="none";this.bannerId=crypto.randomUUID();this.persistent=false;this.hidden=false;this.hasSubheader=undefined;this.hasLink=undefined}async hideBanner(){const n=this.sddsClose.emit({bannerId:this.bannerId,hidden:this.hidden});if(!n.defaultPrevented){this.hidden=true}return{bannerId:this.bannerId,hidden:true}}async showBanner(){const n=this.sddsClose.emit({bannerId:this.bannerId,hidden:this.hidden});if(!n.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"}const n=Array.from(this.host.children);this.hasSubheader=n.some((n=>n.slot==="banner-subheader"));this.hasLink=n.some((n=>n.slot==="banner-link"))}render(){return e(r,{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.hasSubheader&&e("slot",{name:"banner-subheader"}),this.hasLink&&e("div",{class:`banner-link ${!this.hasSubheader?"no-subheader":""}`},e("slot",{name:"banner-link"}))),!this.persistent&&e("div",{class:`banner-close`},e("button",{onClick:()=>{this.handleClose()}},e("sdds-icon",{name:"cross",size:"20px"}))))}get host(){return i(this)}};o.style=d;export{o as sdds_banner};
+//# sourceMappingURL=p-3a93619e.entry.js.map

package/dist/tegel/p-3a93619e.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","children","Array","from","host","hasSubheader","some","childElement","slot","hasLink","render","h","Host","role","getAttribute","class","name","size","header","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    slot[name='banner-subheader'] {\n      display: block;\n      margin-top: 4px;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n    }\n\n    .banner-link {\n      slot[name='banner-link'] {\n        display: block;\n        width: fit-content;\n        margin-top: 16px;\n      }\n\n      &.no-subheader {\n        slot[name='banner-link'] {\n          margin-top: 4px;\n        }\n      }\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, State } 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  /** 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  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\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    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'banner-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'banner-link');\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.hasSubheader && <slot name=\"banner-subheader\"></slot>}\n          {this.hasLink && (\n            <div class={`banner-link ${!this.hasSubheader ? 'no-subheader' : ''}`}>\n              <slot name=\"banner-link\"></slot>\n            </div>\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,u5D,MCQTC,EAAU,M,8DAmFrBC,KAAAC,YAAc,KACZ,MAAMC,EAAiBF,KAAKG,UAAUC,KAAK,CACzCC,SAAUL,KAAKK,SACfC,OAAQN,KAAKM,SAEf,IAAKJ,EAAeK,iBAAkB,CACpCP,KAAKM,OAAS,I,uDAjF+B,O,cAMtBE,OAAOC,a,gBAGJ,M,YAGb,M,mDAsBjBC,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,CAEd,MAAMC,EAAWC,MAAMC,KAAKhB,KAAKiB,KAAKH,UACtCd,KAAKkB,aAAeJ,EAASK,MAAMC,GAAiBA,EAAaC,OAAS,qBAC1ErB,KAAKsB,QAAUR,EAASK,MAAMC,GAAiBA,EAAaC,OAAS,e,CAavEE,SACE,OACEC,EAACC,EAAI,CACHC,KAAK,SAAQ,cACA,GAAG1B,KAAKM,SAAQ,YAE3BN,KAAKiB,KAAKU,aAAa,aAAe3B,KAAKiB,KAAKU,aAAa,aAAe,SAAQ,cAEzE3B,KAAKiB,KAAKU,aAAa,eACpCC,MAAO,GAAG5B,KAAKY,QAAQZ,KAAKM,OAAS,OAAS,UAE7CN,KAAKa,MACJW,EAAA,OAAKI,MAAO,eAAe5B,KAAKY,QAC9BY,EAAA,aAAWK,KAAM7B,KAAKa,KAAMiB,KAAK,UAGrCN,EAAA,OAAKI,MAAO,kBAAkB5B,KAAKY,SAASZ,KAAKa,KAAO,UAAY,MACjEb,KAAK+B,QAAUP,EAAA,QAAMI,MAAO,iBAAkB5B,KAAK+B,QACnD/B,KAAKkB,cAAgBM,EAAA,QAAMK,KAAK,qBAChC7B,KAAKsB,SACJE,EAAA,OAAKI,MAAO,gBAAgB5B,KAAKkB,aAAe,eAAiB,MAC/DM,EAAA,QAAMK,KAAK,mBAIf7B,KAAKgC,YACLR,EAAA,OAAKI,MAAO,gBACVJ,EAAA,UACES,QAAS,KACPjC,KAAKC,aAAa,GAGpBuB,EAAA,aAAWK,KAAK,QAAQC,KAAK,W"}

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

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

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

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

package/dist/tegel/{p-792e8c5d.entry.js → p-5ca26ce8.entry.js}

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

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

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

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

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