@postnord/web-components/postnord-web-components/p-40186d6e.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as e,g as t,h as n,a as o}from"./p-C247oTEA.js";import{uuidv4 as i}from"./index.esm.js";const g="pn-toggle-switch{display:inline-block;position:relative}pn-toggle-switch .pn-toggle{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1em}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;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-toggle-switch .pn-toggle-label{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle-label>span{font-size:1em}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}pn-toggle-switch .pn-toggle-content{flex:1 0}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){pn-toggle-switch .pn-toggle-button{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle-button{-webkit-tap-highlight-color:transparent}pn-toggle-switch .pn-toggle-button[data-small]{width:2.625em;height:1.5em}pn-toggle-switch .pn-toggle-button[data-small] .pn-toggle-circle{width:1.125em;height:1.125em}pn-toggle-switch .pn-toggle-button[data-small][data-loading]>.pn-toggle-bg{width:1.5em}pn-toggle-switch .pn-toggle-button[data-large]{width:4.625em;height:2.5em}pn-toggle-switch .pn-toggle-button[data-large] .pn-toggle-circle{width:2.125em;height:2.125em}pn-toggle-switch .pn-toggle-button[data-large][data-loading]>.pn-toggle-bg{width:2.5em}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-bg{width:2em}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-circle,pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(50%)}pn-toggle-switch .pn-toggle-button[data-loading] .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:0}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}pn-toggle-switch .pn-toggle-button[data-loading] pn-spinner{opacity:1}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){pn-toggle-switch .pn-toggle-bg{transition-duration:0s;transition-delay:0s}}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;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){pn-toggle-switch .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle-circle{transform:translateX(0%)}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;}pn-toggle-switch .pn-toggle-element:focus-visible+.pn-toggle-bg{outline-color:#005d92}pn-toggle-switch .pn-toggle-element:hover+.pn-toggle-bg{background-color:#5e554a}pn-toggle-switch .pn-toggle-element:hover:checked+.pn-toggle-bg{background-color:#0d234b}pn-toggle-switch .pn-toggle-element:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#0d234b}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-bg{background-color:#005d92}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-circle{transform:translateX(100%)}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check{opacity:1}pn-toggle-switch .pn-toggle-element:checked~.pn-toggle-circle .pn-toggle-check polyline{transition-delay:0.2s, 0s;stroke-dashoffset:0}pn-toggle-switch .pn-toggle-element:disabled{cursor:not-allowed}pn-toggle-switch .pn-toggle-element:disabled+.pn-toggle-bg{background-color:#d3cecb;box-shadow:none}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle{background-color:#f3f2f2}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle pn-spinner .pn-spinner-circle{stroke:#969087}pn-toggle-switch .pn-toggle-element:disabled~.pn-toggle-circle pn-spinner .pn-spinner-dot{fill:#969087}pn-toggle-switch .pn-toggle-element:disabled:hover+.pn-toggle-bg,pn-toggle-switch .pn-toggle-element:disabled:hover:checked+.pn-toggle-bg{background-color:#d3cecb}pn-toggle-switch .pn-toggle-element:disabled:hover~.pn-toggle-circle .pn-toggle-check polyline,pn-toggle-switch .pn-toggle-element:disabled:hover:checked~.pn-toggle-circle .pn-toggle-check polyline{stroke:#969087}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){pn-toggle-switch .pn-toggle-check{transition-duration:0s;transition-delay:0s}}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){pn-toggle-switch .pn-toggle-check polyline{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle 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){pn-toggle-switch .pn-toggle pn-spinner{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle 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){pn-toggle-switch .pn-toggle pn-spinner .pn-spinner-circle{transition-duration:0s;transition-delay:0s}}pn-toggle-switch .pn-toggle 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){pn-toggle-switch .pn-toggle pn-spinner .pn-spinner-dot{transition-duration:0s;transition-delay:0s}}";const l=class{constructor(t){e(this,t)}id=`pn-toggle-${i()}`;idHelper=`${this.id}-helper`;get hostElement(){return t(this)}label;helpertext;checked=false;toggleid=this.id;name=null;value=null;small=false;large=false;disabled=false;loading=false;handleHelperId(){if(this.id!==this.toggleid)this.idHelper=`${this.toggleid}-helper`}componentWillLoad(){this.handleHelperId()}hasHelpertextProp(){return!!this.helpertext}hasHelpertextSlot(){return!!this.hostElement.querySelector('[slot="helpertext"]')}showHelpertext(){return this.hasHelpertextProp()||this.hasHelpertextSlot()}describedBy(){return this.showHelpertext()?this.idHelper:null}render(){return n(o,{key:"a973c6a9f9fbed25f5d38e63d00cd941b2e1be84"},n("div",{key:"22a384bdc6dca8c1e8ea2b80ceceeaee43d9e687",class:"pn-toggle"},this.label&&n("div",{key:"fa557c54b0595d5a584be638efc4a42cc979c2c3",class:"pn-toggle-content"},n("label",{key:"59b59744756525ff9aa4479e49a9c641818355f5",htmlFor:this.toggleid,class:"pn-toggle-label"},n("span",{key:"4d0a27cfbf2990e8d58ca359e34df34a9babaa29"},this.label)),n("p",{key:"372744ddd0b0cc337018f558b2fedeb713e62a79",id:this.idHelper,class:"pn-toggle-helper",hidden:!this.showHelpertext()},this.hasHelpertextProp()&&n("span",{key:"b6a70380e155c07b091a9c2a98449e270b681929"},this.helpertext),n("slot",{key:"03548d1a69a251d7b9482205608c13e3d82bc036",name:"helpertext"}))),n("div",{key:"0f0391fd0afbe63ceeb99fcc02d02b464a35c264",class:"pn-toggle-button","data-small":this.small,"data-large":this.large,"data-loading":this.loading},n("input",{key:"527c97d894b32d8c24bfc0db7930f5398ee7af2b",id:this.toggleid,class:"pn-toggle-element",type:"checkbox",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,"aria-describedby":this.describedBy()}),n("div",{key:"3455a84e83d79cb106a100b9041adf6810c5dae1",class:"pn-toggle-bg"}),n("div",{key:"90fd0a3aac16ad0d6ca522bc3a987d0b5db667c0",class:"pn-toggle-circle"},n("svg",{key:"29b6b5a9f15bcf3eb1a4f846ca9df70666df6da8",class:"pn-toggle-check",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},n("polyline",{key:"f1fb78ac9de78c42896ea183746be4436c3ed808",points:"4,12 9,17 20,6","stroke-width":"3"})),n("pn-spinner",{key:"c459049d56e383e4ec8dddee5d175bcb77cd80e9",size:1.125})))))}static get watchers(){return{toggleid:["handleHelperId"]}}};l.style=g;export{l as pn_toggle_switch};
//# sourceMappingURL=p-40186d6e.entry.js.map