@zonos/elements 1.5.0 → 1.5.2

package/dist/zonos-elements/p-59fc32af.entry.js

@@ -0,0 +1 @@
+import{r as o,d as s,h as e,a as t}from"./p-_lt63o7c.js";import{a}from"./p-CqB9AfBf.js";import{c as n}from"./p-BJHSB96f.js";import{g as r}from"./p-r-YGHhLa.js";import{i}from"./p-YdrG78th.js";import"./p-BJmZPrZl.js";const l=["blue","cyan","green","orange","purple","red","gray","glass"];let h=0;const c=class{constructor(e){o(this,e),this.checkboxSelected=s(this,"checkboxSelected",7),this.inputId="zonos--checkbox-"+ ++h,this.backgroundColor="blue",this.isChecked=!1,this.isDisabled=!1,this.size=12,this.fontSize="base"}onClick(){this.isDisabled||this.checkboxSelected.emit(!this.isChecked)}render(){const o=l.includes(this.backgroundColor),s=o?`var(--zonos-elements-${this.backgroundColor}-600)`:this.backgroundColor,h=o?`var(--zonos-elements-${this.backgroundColor}-200)`:i(s)?"var(--zonos-elements-gray-0)":"var(--zonos-elements-gray-800)",c=r({customRoundRadius:"4px",overrideBorderStyle:this.borderStyle});return e(t,{key:"fc12195af264aaca9a9738f594316d5357f8ebb1",class:n(["zonos--elements zonos--checkbox"]),style:{"--zonos--background-color":s,"--zonos--border-radius":c,"--zonos--font-family":a(),"--zonos--size":`${this.size}px`}},e("label",{key:"0db316fec272f3409d2525b4102e8bc6b51b5447",class:n([this.isDisabled&&"disabled"]),htmlFor:this.inputId},e("input",{key:"6e72a3e543dc6a0faa300d94adb226167a6f1114",checked:this.isChecked,disabled:this.isDisabled,hidden:!0,id:this.inputId,onChange:o=>{this.checkboxSelected.emit(o.target.checked)},type:"checkbox"}),e("span",{key:"7703e044bb17535afaf7d1f559e6808e0f7a0777",class:"checkmark-container"},e("svg",{key:"d6a0c3349d79e0d209c69e098f0b410a7ac67f98",class:"checkmark",color:h,fill:"none",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"e12f7a8f0ee87eb72ba9fd9d6f6dbca4e2757e14","clip-rule":"evenodd",d:"M17.456 7.404a.75.75 0 0 1 .14 1.052l-6.5 8.5a.75.75 0 0 1-1.126.074l-4-4a.75.75 0 0 1 1.06-1.06l3.395 3.394 5.98-7.82a.75.75 0 0 1 1.05-.14Z",fill:"currentColor","fill-rule":"evenodd"}))),this.label&&e("zonos-text",{key:"dd53f7c4c37e21c745450476b69051ea65b03833",size:this.fontSize},this.label)))}};c.style=":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer}:host label{display:-ms-inline-flexbox;display:inline-flex;position:relative;gap:8px;-ms-flex-align:center;align-items:center}:host label.disabled{cursor:not-allowed;opacity:0.6}:host input[type=checkbox]{opacity:0;position:absolute;left:0;width:0;height:0;top:0;z-index:-99999}:host svg{opacity:0}:host .checkmark-container{height:var(--zonos--size);width:var(--zonos--size);background-color:transparent;border:1.5px solid var(--zonos-elements-gray-400);position:relative;border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-4))}:host .checkmark{opacity:0;position:absolute;top:-1.5px;left:-1.5px;right:-1.5px;bottom:-1.5px;width:calc(100% + 3px);-webkit-transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);transition:0.3s all cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transform:scale(0.4);transform:scale(0.4);background-color:var(--zonos--background-color);border-radius:var(--zonos--border-radius, var(--zonos-elements-radius-4))}:host input[type=checkbox]:checked~.checkmark-container .checkmark{opacity:1;-webkit-transform:scale(1);transform:scale(1)}";const d=class{constructor(e){o(this,e),this.toggleChanged=s(this,"toggleChanged",7),this.options=[]}render(){return e(t,{key:"ad5de3fba6f9f7a5d0820f95c809c6fd9e6d4ca7",class:n(["zonos--elements zonos--toggle"]),style:{"--zonos--font-family":a()}},e("div",{key:"d3d4321651c434734e86c470d6861241fcac361b",class:"wrapper"},this.options.map((o=>e("button",{class:n(["zonos--option",o.value===this.value&&"selected"]),key:o.value,onClick:()=>{this.toggleChanged.emit(o.value)}},o.label)))))}};d.style=":host{font-family:var(--zonos--font-family, Inter), Inter;display:block;white-space:normal}:host *{font-family:var(--zonos--font-family, Inter), Inter}:host img{max-width:100%}:host dl,:host dd,:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host hr,:host figure,:host p,:host pre{margin:0}:host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}:host{display:-ms-inline-flexbox;display:inline-flex}:host .wrapper{position:relative;border-radius:6px;background-color:var(--zonos-elements-gray-50);display:-ms-flexbox;display:flex}:host .zonos--toggle-selected-slider{z-index:1;position:absolute;background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}:host .zonos--option{background:transparent;border:0;z-index:2;cursor:pointer;padding:4px 12px;border-radius:6px;-webkit-transition:var(--zonos-elements-transition);transition:var(--zonos-elements-transition);font-size:var(--zonos-elements-font-size-base);font-weight:500;color:var(--zonos-elements-text-color-secondary)}:host .zonos--option:focus{outline:none}:host .zonos--option:hover:not(.selected){color:var(--zonos-elements-text-color)}:host .zonos--option.selected{color:var(--zonos-elements-text-color);background-color:var(--zonos-elements-raised-surface-color);height:100%;-webkit-box-shadow:var(--zonos-elements-shadow-button-standard);box-shadow:var(--zonos-elements-shadow-button-standard);border-radius:6px;-webkit-animation:translate 0.3s ease-in-out;animation:translate 0.3s ease-in-out}";export{c as zonos_checkbox,d as zonos_toggle}