@postnord/web-components/postnord-web-components/p-a4df55c4.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{r as e,g as t,h as n,a as i}from"./p-43660913.js";import{u as o}from"./p-f64d17a6.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);-webkit-tap-highlight-color:transparent}@media (prefers-reduced-motion: reduce){pn-toggle-switch .pn-toggle-button{transition-duration:0s;transition-delay:0s}}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);transform:translateX(0%)}@media (prefers-reduced-motion: reduce){pn-toggle-switch .pn-toggle-circle{transition-duration:0s;transition-delay:0s}}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=g;const s=class{constructor(t){e(this,t);this.label=undefined;this.helpertext=undefined;this.checked=false;this.toggleid=this.id;this.name=null;this.value=null;this.small=false;this.large=false;this.disabled=false;this.loading=false}id=`pn-toggle-${o()}`;idHelper=`${this.id}-helper`;get hostElement(){return t(this)}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(i,{key:"9806bc50780935f442660701539941efd05d92d5"},n("div",{key:"a2babfadbf6443da619b35f9d8cb09a7b0bd4a59",class:"pn-toggle"},this.label&&n("div",{key:"525510807f8f7e505b589c8055f277b196f813cd",class:"pn-toggle-content"},n("label",{key:"cc58536e57de5a852762de90c5edf0ad2f92a05f",htmlFor:this.toggleid,class:"pn-toggle-label"},n("span",{key:"a43dba51d8becebf1f508300ccb72530400535c7"},this.label)),n("p",{key:"d86c250e53ceb45830444a13a8f2c609173542de",id:this.idHelper,class:"pn-toggle-helper",hidden:!this.showHelpertext()},this.hasHelpertextProp()&&n("span",{key:"02a55f8a4c9da87b33b31ecd3d30ad6a73d70714"},this.helpertext),n("slot",{key:"065675c0046d2cbdd581ef0c5ec745a5b03393eb",name:"helpertext"}))),n("div",{key:"6cbc83780caacb03d778aa2b9f882858231206ca",class:"pn-toggle-button","data-small":this.small,"data-large":this.large,"data-loading":this.loading},n("input",{key:"1a7062923c2668cb41b4c4b14f948c4074cf416e",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:"3a85ff013cb29f5c7bef3d088ec782a53b3924ac",class:"pn-toggle-bg"}),n("div",{key:"955a78cfd16980bd437e03e51f3cde49185fe954",class:"pn-toggle-circle"},n("svg",{key:"fc0802cf056f5413c1228584c53abae8b21a8813",class:"pn-toggle-check",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none"},n("polyline",{key:"e881ac5ae0b5838293ac2e5af74a0c56ddd85687",points:"4,12 9,17 20,6","stroke-width":"3"})),n("pn-spinner",{key:"78e5dd0484be70fc75315475daffed5b2e63c8bb",size:1.125})))))}static get watchers(){return{toggleid:["handleHelperId"]}}};s.style=l;export{s as pn_toggle_switch};
//# sourceMappingURL=p-a4df55c4.entry.js.map