@scania/tegel/dist/components/tds-toggle.js

Tegel Design System

import{t,p as e,H as s,c as o,h as d}from"./index.js";import{g}from"./p-Cn4f8w1e.js";const l=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.tdsToggle=o(this,"tdsToggle",6),this.checked=!1,this.required=!1,this.size="lg",this.disabled=!1,this.toggleId=g(),this.handleToggle=()=>{this.checked=!this.checked,this.tdsToggle.emit({toggleId:this.toggleId,checked:this.checked})}}async toggle(){return this.checked=!this.checked,{toggleId:this.toggleId,checked:this.checked}}async focusElement(){this.inputElement&&this.inputElement.focus()}componentWillLoad(){this.labelSlot=this.host.querySelector("[slot='label']")}render(){return d("div",{key:"c1aa9475d114ceed43404e5782281f8890b98722",class:"tds-toggle"},this.headline&&d("div",{key:"7734e6fec341d4b89857ad6d7d114c57684e7730",class:{"toggle-headline":!0,disabled:this.disabled}},this.headline),d("input",{key:"6a6420579c616daea95b0b07a194a0e4cc206c47",ref:t=>{t&&(this.inputElement=t)},"aria-label":this.tdsAriaLabel,"aria-describedby":this.host.getAttribute("aria-describedby"),"aria-labelledby":this.host.getAttribute("aria-labelledby"),"aria-checked":this.checked,"aria-required":this.required,onChange:()=>this.handleToggle(),class:""+this.size,checked:this.checked,disabled:this.disabled,required:this.required,type:"checkbox",name:this.name,id:this.toggleId,role:"switch"}),this.labelSlot&&d("label",{key:"f6120cfbd981949507274eb628b6c84af4fecfd1",class:{disabled:this.disabled},htmlFor:this.toggleId},d("slot",{key:"0998bb02cf4626f7589556c4bb2ce9846e4028de",name:"label"})))}get host(){return this}static get style(){return'.tds-toggle.sc-tds-toggle .disabled.sc-tds-toggle{cursor:not-allowed}.tds-toggle.sc-tds-toggle .toggle-headline.sc-tds-toggle{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-toggle-headline);margin-bottom:12px}.tds-toggle.sc-tds-toggle .toggle-headline.disabled.sc-tds-toggle{color:var(--tds-toggle-headline-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle{appearance:initial;margin:0;width:44px;height:24px;position:relative;display:inline-block;vertical-align:middle;cursor:pointer}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after,.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{content:"";position:absolute;box-sizing:border-box;transition:all var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-scania)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::before{width:44px;height:24px;border-radius:16px;background-color:var(--tds-toggle-off-slider);left:0;border:1px solid transparent}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle::after{width:16px;height:16px;background-color:var(--tds-toggle-switch);border-radius:50%;left:4px;top:4px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus-visible{outline:none;outline:2px solid var(--tds-toggle-border-outline);border-radius:16px;outline-offset:-2px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:focus-visible::before{width:40px;height:20px;left:2px;top:2px;background-color:var(--tds-toggle-off-slider-focus);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:hover::before{background-color:var(--tds-toggle-off-slider-hover)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:active::before{background-color:var(--tds-toggle-off-slider-pressed)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked:focus-visible::before{background-color:var(--tds-toggle-on-slider-focus);border:1px solid var(--tds-toggle-on-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked:hover::before{background-color:var(--tds-toggle-on-slider-hover)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked:active::before{background-color:var(--tds-toggle-on-slider-pressed)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:checked::after{left:24px}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled{cursor:not-allowed}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::before{background-color:var(--tds-toggle-on-slider-disabled);border:1px solid var(--tds-toggle-on-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sc-tds-toggle:disabled:checked::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::before{width:28px;height:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle::after{width:8px;height:8px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:focus-visible::before{width:24px;height:12px;left:2px;top:2px;background-color:var(--tds-toggle-off-slider-focus);border:1px solid var(--tds-toggle-off-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:focus-visible:active::before{background-color:var(--tds-toggle-off-slider-pressed)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:active::before{background-color:var(--tds-toggle-off-slider-pressed)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::before{background-color:var(--tds-toggle-on-slider)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked:focus-visible::before{background-color:var(--tds-toggle-on-slider-focus);border:1px solid var(--tds-toggle-on-border-focus)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked:hover::before{background-color:var(--tds-toggle-on-slider-hover)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked:active::before{background-color:var(--tds-toggle-on-slider-pressed)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:checked::after{left:16px}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::before{background-color:var(--tds-toggle-slider-disabled);border:1px solid var(--tds-toggle-slider-disabled)}.tds-toggle.sc-tds-toggle input[type=checkbox].sm.sc-tds-toggle:disabled::after{background-color:var(--tds-toggle-switch-disabled)}.tds-toggle.sc-tds-toggle label.sc-tds-toggle{display:inline-block;vertical-align:middle;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);color:var(--tds-toggle-label-color);padding-left:8px;cursor:pointer}.tds-toggle.sc-tds-toggle label.disabled.sc-tds-toggle{color:var(--tds-toggle-label-color-disabled)}'}},[262,"tds-toggle",{checked:[516],required:[4],size:[1],name:[1],headline:[1],disabled:[4],toggleId:[1,"toggle-id"],tdsAriaLabel:[1,"tds-aria-label"],toggle:[64],focusElement:[64]}]);function c(){"undefined"!=typeof customElements&&["tds-toggle"].forEach((e=>{"tds-toggle"===e&&(customElements.get(t(e))||customElements.define(t(e),l))}))}c();const r=l,i=c;export{r as TdsToggle,i as defineCustomElement}