@postnord/web-components/components/pn-toggle-switch.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as t,HTMLElement as n,h as i,Host as o}from"@stencil/core/internal/client";import{u as l}from"./helpers.js";import{d as g}from"./pn-spinner2.js";const r=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost()}id="pn-toggle-"+l();idHelper=this.id+"-helper";get hostElement(){return this}label;helpertext;value=null;name=null;checked=!1;required=!1;disabled=!1;small=!1;large=!1;loading=!1;pnId;pnAriaLabel;pnAriaLabelledby;toggleid;handleHelperId(){this.idHelper=this.getId()+"-helper"}getId(){return this.pnId||this.toggleid||this.id}getSpinnerSize(){return this.small?1:this.large?1.25:1.125}hasHelpertextProp(){return!!this.helpertext}hasHelpertextSlot(){return!!this.hostElement.querySelector('[slot="helpertext"]')}showHelpertext(){return this.hasHelpertextProp()||this.hasHelpertextSlot()}describedBy(){return this.showHelpertext()?this.idHelper:null}displayLabel(){return!!this.label}getAriaLabel(){return this.displayLabel()||this.pnAriaLabelledby?null:this.pnAriaLabel}getAriaLabelledby(){return this.displayLabel()||this.pnAriaLabel?null:this.pnAriaLabelledby}render(){return i(o,{key:"e6a6de7ded1a69b16843133338ba8a1ae1294b19"},i("div",{key:"142125dd53902df30a93a5e5257650a7841a1644",class:"pn-toggle"},i("div",{key:"d4e35ed179dc5f1423cdf59cf0481ecbcb33021f",class:"pn-toggle-content"},this.label&&i("label",{key:"f38bdb380fb05349909e386dd6e22d841c0caf56",htmlFor:this.getId(),class:"pn-toggle-label"},i("span",{key:"94a35b2682a039613dd0814a25ba30f954018dc6"},this.label)),i("p",{key:"c621112acea7f18b7943d9d07c0af52dd7455329",id:this.idHelper,class:"pn-toggle-helper",hidden:!this.showHelpertext()},this.hasHelpertextProp()&&i("span",{key:"1959f88dbe079595e3cd6bbb48098e2777ab642e"},this.helpertext),i("slot",{key:"e493dcb3022bd31c4ecfb349756d3d83bf51bf9a",name:"helpertext"}))),i("div",{key:"1f13bb2bcb798b5221d06e55640848034ad2b260",class:"pn-toggle-button","data-small":this.small,"data-large":this.large,"data-loading":this.loading},i("input",{key:"ebf1c43df4b75f8df0769d2d458c04fbf17385f6",id:this.getId(),class:"pn-toggle-element",type:"checkbox",name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,"aria-label":this.getAriaLabel(),"aria-labelledby":this.getAriaLabelledby(),"aria-describedby":this.describedBy()}),i("div",{key:"51c67cb5c61e3d3b93bd49013594109772b7d796",class:"pn-toggle-bg"}),i("div",{key:"1932ea8d92b8ab57a47fdd3ced9795be78cc1620",class:"pn-toggle-circle"},i("svg",{key:"67e5adc0818d3fe76de4dffa45bc8c1d5c9fba45",class:"pn-toggle-check",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},i("polyline",{key:"f1722e0d19629ea38eac2faa6d2ccaf007e78463",points:"4,12 9,17 20,6","stroke-width":"3"})),i("pn-spinner",{key:"60ab6b2fea45ddbc8793b06f18032df94c858a9d",size:this.getSpinnerSize()})))))}static get watchers(){return{pnId:[{handleHelperId:0}],toggleid:[{handleHelperId:1}]}}static get style(){return`${e("pn-toggle-switch")}{display:inline-block;position:relative}${e("pn-toggle-switch")} .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}${e("pn-toggle-switch")} .pn-toggle-label{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-end;font-weight:500;color:#2d2013;margin:0;gap:0.5em;-webkit-tap-highlight-color:transparent;transition-property:color, transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-label{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-label>span{font-size:1em}${e("pn-toggle-switch")} .pn-toggle-helper{color:#5e554a;font-size:0.875em;font-weight:400;margin:0.25em 0 0 0;display:flex;flex-direction:column;gap:0.25em}${e("pn-toggle-switch")} .pn-toggle-content{flex:1 0}${e("pn-toggle-switch")} .pn-toggle-button{position:relative;font-size:1em;width:3.625em;height:2em;padding:0.1875em;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-button{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-button{-webkit-tap-highlight-color:transparent}${e("pn-toggle-switch")} .pn-toggle-button[data-small]{width:2.625em;height:1.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}${e("pn-toggle-switch")} .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-large]{width:4.625em;height:2.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}${e("pn-toggle-switch")} .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-circle,${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke-dashoffset:23;transition-delay:0s}${e("pn-toggle-switch")} .pn-toggle-button[data-loading] ${e("pn-spinner")}{opacity:1;transform:translate(-50%, -50%);position:absolute;top:50%;left:50%}${e("pn-toggle-switch")} .pn-toggle-bg{position:absolute;top:0;left:50%;width:100%;height:100%;z-index:0;border-radius:2em;background-color:#969087;transform:translateX(-50%);outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:width, background-color, outline-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-bg{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-circle{position:relative;z-index:1;width:1.625em;height:1.625em;background-color:#ffffff;box-shadow:0 0.25em 0.5em rgba(0, 0, 0, 0.1);border-radius:50%;padding:0.25em;transform:translateX(0%);transition-property:transform, background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-element{position:absolute;z-index:3;top:0;left:0;cursor:pointer;width:100%;height:100%;opacity:0;margin:0;}${e("pn-toggle-switch")} .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}${e("pn-toggle-switch")} .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}${e("pn-toggle-switch")} .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}${e("pn-toggle-switch")} .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}${e("pn-toggle-switch")} .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}${e("pn-toggle-switch")} .pn-toggle-element:disabled{cursor:not-allowed}${e("pn-toggle-switch")} .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${e("pn-spinner")} .pn-spinner-circle{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled~.pn-toggle-circle ${e("pn-spinner")} .pn-spinner-dot{fill:#969087}${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover+.pn-toggle-bg,${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,${e("pn-toggle-switch")} .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}${e("pn-toggle-switch")} .pn-toggle-check{position:absolute;left:50%;top:50%;height:1.5em;width:1.5em;padding:0.25em;transform:translate(-50%, -50%);opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-check{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle-check polyline{stroke:#005d92;stroke-linecap:round;stroke-dasharray:23;stroke-dashoffset:23;transition-property:stroke-dashoffset, stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle-check polyline{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")}{opacity:0;transition-property:opacity;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")}{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-circle{transition-property:stroke;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-circle{transition-duration:0s;transition-delay:0s}}${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-dot{transition-property:fill;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${e("pn-toggle-switch")} .pn-toggle ${e("pn-spinner")} .pn-spinner-dot{transition-duration:0s;transition-delay:0s}}`}},[772,"pn-toggle-switch",{label:[1],helpertext:[1],value:[1],name:[1],checked:[1028],required:[4],disabled:[4],small:[4],large:[4],loading:[4],pnId:[1,"pn-id"],pnAriaLabel:[1,"pn-aria-label"],pnAriaLabelledby:[1,"pn-aria-labelledby"],toggleid:[1]},void 0,{pnId:[{handleHelperId:0}],toggleid:[{handleHelperId:1}]}]),s=r,a=function(){"undefined"!=typeof customElements&&["pn-toggle-switch","pn-spinner"].forEach((t=>{switch(t){case"pn-toggle-switch":customElements.get(e(e(t)))||customElements.define(e(e(t)),r);break;case"pn-spinner":customElements.get(e(e(t)))||g()}}))};export{s as PnToggleSwitch,a as defineCustomElement}