Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@calcom/embed-core

Package Overview
Dependencies
Maintainers
3
Versions
25
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@calcom/embed-core - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

dist/embed/assets/embed-d506cdf4.css

89

dist/embed/embed.js

@@ -1,1 +0,88 @@

var t=Object.defineProperty,e=Object.defineProperties,o=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,a=(e,o,r)=>o in e?t(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,s=(t,e)=>{for(var o in e||(e={}))n.call(e,o)&&a(t,o,e[o]);if(r)for(var o of r(e))i.call(e,o)&&a(t,o,e[o]);return t},l=(t,r)=>e(t,o(r));class d extends HTMLElement{static updatedClassString(t,e){return[e.replace(/hidden|md:right-10|md:left-10|left-4|right-4/g,""),"bottom-right"===t?"md:right-10 right-4":"md:left-10 left-4"].join(" ")}static get observedAttributes(){return["data-button-text","data-hide-button-icon","data-button-position","data-button-color","data-button-text-color"]}attributeChangedCallback(t,e,o){var r,n,i,a,s;if("data-button-text"===t){const t=null==(r=this.shadowRoot)?void 0:r.querySelector("#button");if(!t)throw new Error("Button not found");t.innerHTML=o}else if("data-hide-button-icon"===t){const t=null==(n=this.shadowRoot)?void 0:n.querySelector("#button-icon");if(!t)throw new Error("Button not found");t.style.display="true"==o?"none":"block"}else if("data-button-position"===t){const t=null==(i=this.shadowRoot)?void 0:i.querySelector("button");if(!t)throw new Error("Button not found");t.className=d.updatedClassString(o,t.className)}else if("data-button-color"===t){const t=null==(a=this.shadowRoot)?void 0:a.querySelector("button");if(!t)throw new Error("Button not found");t.style.backgroundColor=o}else if("data-button-text-color"===t){const t=null==(s=this.shadowRoot)?void 0:s.querySelector("button");if(!t)throw new Error("Button not found");t.style.color=o}}constructor(){super();const t=this.dataset.buttonText,e=this.dataset.buttonPosition,o=this.dataset.buttonColor,r=this.dataset.buttonTextColor,n=`<style>${window.Cal.__css}</style> ${(({buttonText:t,buttonClasses:e,buttonColor:o,buttonTextColor:r})=>`<button class="hidden fixed md:bottom-6 bottom-4 md:right-10 right-4 md:left-10 left-4 ${e.join(" ")} flex h-16 origin-center bg-red-50 transform cursor-pointer items-center\nrounded-full py-4 px-6 text-base outline-none drop-shadow-md transition focus:outline-none fo\ncus:ring-4 focus:ring-gray-600 focus:ring-opacity-50 active:scale-95" \nstyle="background-color:${o}; color:${r} z-index: 10001">\n<div id="button-icon" class="mr-3 flex items-center justify-center">\n <svg\n\tclass="h-7 w-7"\n\tfill="none"\n\tstroke="currentColor"\n\tviewBox="0 0 24 24"\n\txmlns="http://www.w3.org/2000/svg">\n\t<path\n\t strokeLinecap="round"\n\t strokeLinejoin="round"\n\t strokeWidth="2"\n\t d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>\n </svg>\n</div>\n<div id="button" class="font-semibold leading-5 antialiased">${t}</div>\n</button>`)({buttonText:t,buttonClasses:[d.updatedClassString(e,"")],buttonColor:o,buttonTextColor:r})}`;this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=n}}var c="@-webkit-keyframes loader{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}to{transform:rotate(360deg)}}@keyframes loader{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}to{transform:rotate(360deg)}}@-webkit-keyframes loader-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}to{height:0%}}@keyframes loader-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}to{height:0%}}.loader-inner{vertical-align:top;display:inline-block;width:100%;-webkit-animation:loader-inner 2s infinite ease-in;animation:loader-inner 2s infinite ease-in}.loader{display:block;width:30px;height:30px;position:relative;border-width:4px;border-style:solid;-webkit-animation:loader 2s infinite ease;animation:loader 2s infinite ease}.loader.modal-loader{margin:60px auto}\n";const h=t=>"404"===t?"Error Code: 404. Cal Link seems to be wrong.":`Error Code: ${t}. Something went wrong.`;class u extends HTMLElement{static get observedAttributes(){return["loading"]}attributeChangedCallback(t,e,o){if("loading"===t)if("done"==o)this.shadowRoot.querySelector(".loader").style.display="none";else if("failed"===o){this.shadowRoot.querySelector(".loader").style.display="none",this.shadowRoot.querySelector("#error").style.display="block",this.shadowRoot.querySelector("slot").style.visibility="hidden";const t=h(this.dataset.errorCode);this.shadowRoot.querySelector("#error").innerText=t}}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`<style>${window.Cal.__css}</style><style>${c}</style><div id="wrapper" style="top:calc(50% - 30px); left:calc(50% - 30px)" class="absolute z-highest">\n<div class="loader border-brand dark:border-darkmodebrand">\n\t<span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>\n</div>\n<div id="error" class="hidden">\nSomething went wrong.\n</div>\n</div>\n<slot></slot>`}}class p extends HTMLElement{static get observedAttributes(){return["state"]}show(t){this.shadowRoot.host.style.visibility=t?"visible":"hidden",t||(document.body.style.overflow=p.htmlOverflow)}close(){this.show(!1)}attributeChangedCallback(t,e,o){if("state"===t)if("loaded"==o)this.shadowRoot.querySelector(".loader").style.display="none";else if("started"===o)this.show(!0);else if("closed"==o)this.show(!1);else if("failed"===o){this.shadowRoot.querySelector(".loader").style.display="none",this.shadowRoot.querySelector("#error").style.display="inline-block";const t=h(this.dataset.errorCode);this.shadowRoot.querySelector("#error").innerText=t}}connectedCallback(){const t=this.shadowRoot.querySelector(".close");document.addEventListener("keydown",(t=>{"Escape"===t.key&&this.close()}),{once:!0}),this.shadowRoot.host.addEventListener("click",(t=>{this.close()})),t.onclick=()=>{this.close()}}constructor(){super();const t=`<style>${window.Cal.__css}</style><style>${c}</style><style>\n.my-backdrop {\n position:fixed;\n width:100%;\n height:100%;\n top:0;\n left:0;\n z-index:99999999;\n display:block;\n background-color:rgb(5,5,5, 0.8)\n}\n\n@media only screen and (min-width:600px) {\n .modal-box {\n margin:0 auto;\n margin-top:20px;\n margin-bottom:20px;\n position:absolute;\n width:100%;\n top:50%;\n left:50%;\n transform: translateY(-50%) translateX(-50%);\n overflow: scroll;\n }\n}\n\n@media only screen and (max-width:600px) {\n .modal-box {\n width: 100%;\n height: 80%;\n position:fixed;\n top:50px;\n left:0;\n right: 0;\n margin: 0;\n }\n}\n\n.header {\n position: relative;\n float:right;\n top: 10px;\n}\n.close {\n font-size: 30px;\n left: -20px;\n position: relative;\n color:white;\n cursor: pointer;\n}\n/*Modal background is black only, so hardcode white */\n.loader {\n --cal-brand-color:white;\n}\n</style>\n<div class="my-backdrop">\n<div class="header">\n <span class="close">&times;</span>\n</div>\n<div class="modal-box">\n <div class="body">\n <div id="wrapper" class="z-[999999999999] absolute flex w-full items-center">\n <div class="loader modal-loader border-brand dark:border-darkmodebrand">\n <span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>\n </div>\n </div>\n <div id="error" class="hidden left-1/2 -translate-x-1/2 relative text-white"></div>\n <slot></slot>\n </div>\n</div>\n</div>`;this.attachShadow({mode:"open"}),p.htmlOverflow=document.body.style.overflow,document.body.style.overflow="hidden",this.shadowRoot.innerHTML=t}}function b(t,e){const o=new window.CustomEvent(t,{detail:e});window.dispatchEvent(o)}class m{static parseAction(t){if(!t)return null;const[e,o,r]=t.split(":");return"CAL"!==e?null:{ns:o,type:r}}getFullActionName(t){return this.namespace?`CAL:${this.namespace}:${t}`:`CAL::${t}`}fire(t,e){const o=this.getFullActionName(t),r={type:t,namespace:this.namespace,fullType:o,data:e};b(o,r),b(this.getFullActionName("*"),r)}on(t,e){const o=this.getFullActionName(t);window.addEventListener(o,e)}off(t,e){const o=this.getFullActionName(t);window.removeEventListener(o,e)}constructor(t){t=t||"",this.namespace=t}}customElements.define("cal-modal-box",p),customElements.define("cal-floating-button",d),customElements.define("cal-inline",u);const f=window.Cal;if(!f||!f.q)throw new Error("Cal is not defined. This shouldn't happen");function g(...t){console.log(...t)}function w(t,e){function o(t,e){return"string"==typeof e?typeof t==e:t instanceof e}function r(t){return void 0===t}if(e.required&&r(t))throw new Error("Argument is required");for(const[n,i]of Object.entries(e.props)){if(i.required&&r(t[n]))throw new Error(`"${n}" is required`);let e=!0;if(i.type&&!r(t[n])&&(i.type instanceof Array?i.type.forEach((r=>{e=e||o(t[n],r)})):e=o(t[n],i.type)),!e)throw new Error(`"${n}" is of wrong type.Expected type "${i.type}"`)}}f.fingerprint={}.EMBED_PUBLIC_EMBED_FINGER_PRINT,f.__css="*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e1e1e1}:before,:after{--tw-content: \"\"}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:Roboto Mono,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#acacac}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#acacac}input::placeholder,textarea::placeholder{opacity:1;color:#acacac}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#888;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#2563eb}input::-moz-placeholder,textarea::-moz-placeholder{color:#888;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#888;opacity:1}input::placeholder,textarea::placeholder{color:#888;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23888888' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#888;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #2563eb;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\")}[type=radio]:checked{background-image:url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e\")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e\");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*,:before,:after{--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-4{bottom:1rem}.right-4{right:1rem}.left-4{left:1rem}.left-1\\/2{left:50%}.z-\\[999999999999\\]{z-index:999999999999}.mr-3{margin-right:.75rem}.flex{display:flex}.hidden{display:none}.h-16{height:4rem}.h-7{height:1.75rem}.w-7{width:1.75rem}.w-full{width:100%}.origin-center{transform-origin:center}.-translate-x-1\\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.border-brand{border-color:var(--cal-brand-color, black)}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity))}.bg-brand{background-color:var(--cal-brand-color, black)}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.text-base{font-size:1rem;line-height:1.5rem}.font-semibold{font-weight:600}.leading-5{line-height:1.25rem}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.outline-none{outline:2px solid transparent;outline-offset:2px}.drop-shadow-md{--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@font-face{font-family:Cal Sans;src:url(https://cal.com/cal.ttf)}h1,h2,h3,h4,h5,h6{font-family:Cal Sans;font-weight:400;letter-spacing:normal}html,body,:host{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-gray-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(73 73 73 / var(--tw-ring-opacity))}.focus\\:ring-opacity-50:focus{--tw-ring-opacity: .5}.active\\:scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark .dark\\:border-darkmodebrand{border-color:var(--brand-color-dark-mode)}.dark .dark\\:bg-darkmodebrand{background-color:var(--brand-color-dark-mode)}@media (min-width: 768px){.md\\:bottom-6{bottom:1.5rem}.md\\:right-10{right:2.5rem}.md\\:left-10{left:2.5rem}}\n",document.head.appendChild(document.createElement("style")).innerHTML=".cal-embed{border:0px;min-height:300px;margin:0 auto;width:100%}\n";class y{constructor(t,e){this.iframeDoQueue=[],this.__config={origin:"https://app.cal.com"},this.namespace=t,this.actionManager=new m(t),y.actionsManagers=y.actionsManagers||{},y.actionsManagers[t]=this.actionManager,this.processQueue(e),this.actionManager.on("__dimensionChanged",(t=>{const{data:e}=t.detail,o=this.iframe;if(!o)return;let r="px";e.__unit&&(r=e.__unit),e.iframeHeight&&(o.style.height=e.iframeHeight+r),this.modalBox&&(o.style.maxHeight=window.innerHeight+"px")})),this.actionManager.on("__iframeReady",(t=>{this.iframeReady=!0,this.doInIframe({method:"parentKnowsIframeReady",arg:void 0}),this.iframeDoQueue.forEach((({method:t,arg:e})=>{this.doInIframe({method:t,arg:e})}))})),this.actionManager.on("__routeChanged",(()=>{this.inlineEl&&this.inlineEl.__CalAutoScroll&&this.inlineEl.scrollIntoView()})),this.actionManager.on("linkReady",(t=>{var e,o;null==(e=this.modalBox)||e.setAttribute("state","loaded"),null==(o=this.inlineEl)||o.setAttribute("loading","done")})),this.actionManager.on("linkFailed",(t=>{var e,o,r,n;this.iframe&&(null==(e=this.inlineEl)||e.setAttribute("data-error-code",t.detail.data.code),null==(o=this.modalBox)||o.setAttribute("data-error-code",t.detail.data.code),null==(r=this.inlineEl)||r.setAttribute("loading","failed"),null==(n=this.modalBox)||n.setAttribute("state","failed"))}))}static getQueryObject(t){var e;return l(s({},t=t||{}),{guest:null!=(e=t.guests)?e:void 0})}processInstruction(t){if((t=[].slice.call(t,0))[0]instanceof Array)return void t.forEach((t=>{this.processInstruction(t)}));const[e,...o]=t;this[e]||g(`Instruction ${e} not FOUND`);try{this[e](...o)}catch(r){g("Instruction couldn't be executed",r)}return t}processQueue(t){t.forEach((t=>{this.processInstruction(t)})),t.splice(0),t.push=t=>{this.processInstruction(t)}}createIframe({calLink:t,queryObject:e={}}){const o=this.iframe=document.createElement("iframe");o.className="cal-embed",o.name="cal-embed";const a=this.getConfig(),s=e,{iframeAttrs:l}=s,d=((t,e)=>{var o={};for(var a in t)n.call(t,a)&&e.indexOf(a)<0&&(o[a]=t[a]);if(null!=t&&r)for(var a of r(t))e.indexOf(a)<0&&i.call(t,a)&&(o[a]=t[a]);return o})(s,["iframeAttrs"]);!l||"string"==typeof l||l instanceof Array||o.setAttribute("id",l.id);const c=new URLSearchParams;for(const[r,n]of Object.entries(d))void 0!==n&&(n instanceof Array?n.forEach((t=>c.append(r,t))):c.set(r,n));const h=new URL(`${a.origin}/${t}`);h.searchParams.set("embed",this.namespace),a.debug&&h.searchParams.set("debug",""+a.debug);for(const[r,n]of c)h.searchParams.append(r,n);return o.src=h.toString(),o}init(t,e={}){"string"!=typeof t&&(e=t||{}),(null==e?void 0:e.origin)&&(this.__config.origin=e.origin),this.__config.debug=e.debug}getConfig(){return this.__config}inline({calLink:t,elementOrSelector:e,config:o}){w(arguments[0],{required:!0,props:{calLink:{required:!0,type:"string"},elementOrSelector:{required:!0,type:["string",HTMLElement]},config:{required:!1,type:Object}}}),(o=o||{}).__autoScroll=!!o.__autoScroll,o.embedType="inline";const r=this.createIframe({calLink:t,queryObject:y.getQueryObject(o)});r.style.height="100%",r.style.width="100%";const n=e instanceof HTMLElement?e:document.querySelector(e);if(!n)throw new Error("Element not found");const i=document.createElement("template");i.innerHTML='<cal-inline style="max-height:inherit;height:inherit;min-height:inherit;display:flex;position:relative;flex-wrap:wrap;width:100%"></cal-inline>',this.inlineEl=i.content.children[0],this.inlineEl.__CalAutoScroll=o.__autoScroll,this.inlineEl.appendChild(r),n.appendChild(i.content)}floatingButton({calLink:t,buttonText:e="Book my Cal",hideButtonIcon:o=!1,attributes:r,buttonPosition:n="bottom-right",buttonColor:i="rgb(255, 202, 0)",buttonTextColor:a="rgb(20, 30, 47)"}){let s="",l=null;(null==r?void 0:r.id)&&(s+=` id="${r.id}"`,l=document.getElementById(r.id));let d=l;if(!l){const e=document.createElement("template");e.innerHTML=`<cal-floating-button ${s} data-cal-namespace="${this.namespace}" data-cal-link="${t}"></cal-floating-button>`,d=e.content.children[0],document.body.appendChild(e.content)}e&&d.setAttribute("data-button-text",e),d.setAttribute("data-hide-button-icon",""+o),d.setAttribute("data-button-position",""+n),d.setAttribute("data-button-color",""+i),d.setAttribute("data-button-text-color",""+a)}modal({calLink:t,config:e={},uid:o}){const r=document.querySelector(`cal-modal-box[uid="${o}"]`);if(r)return void r.setAttribute("state","started");e.embedType="modal";const n=this.createIframe({calLink:t,queryObject:y.getQueryObject(e)});n.style.borderRadius="8px",n.style.height="100%",n.style.width="100%";const i=document.createElement("template");i.innerHTML=`<cal-modal-box uid="${o}"></cal-modal-box>`,this.modalBox=i.content.children[0],this.modalBox.appendChild(n),this.actionManager.on("__closeIframe",(()=>{this.modalBox.setAttribute("state","closed")})),document.body.appendChild(i.content)}on({action:t,callback:e}){w(arguments[0],{required:!0,props:{action:{required:!0,type:"string"},callback:{required:!0,type:Function}}}),this.actionManager.on(t,e)}off({action:t,callback:e}){this.actionManager.off(t,e)}preload({calLink:t}){w(arguments[0],{required:!0,props:{calLink:{type:"string",required:!0}}});const e=document.body.appendChild(document.createElement("iframe")),o=this.getConfig(),r=new URL(`${o.origin}/${t}`);r.searchParams.set("prerender","true"),e.src=r.toString(),e.style.width="0",e.style.height="0",e.style.display="none"}ui(t){w(t,{required:!0,props:{theme:{required:!1,type:"string"},styles:{required:!1,type:Object}}}),this.doInIframe({method:"ui",arg:t})}doInIframe({method:t,arg:e}){this.iframeReady?this.iframe.contentWindow.postMessage({originator:"CAL",method:t,arg:e},"*"):this.iframeDoQueue.push({method:t,arg:e})}}f.instance=new y("",f.q);for(const[k,x]of Object.entries(f.ns))x.instance=new y(k,x.q);window.addEventListener("message",(t=>{const e=t.data,o=e.fullType,r=m.parseAction(o);if(!r)return;const n=y.actionsManagers[r.ns];if(f.__logQueue=f.__logQueue||[],f.__logQueue.push(l(s({},r),{data:e.data})),!n)throw new Error("Unhandled Action"+r);n.fire(r.type,e.data)})),document.addEventListener("click",(t=>{const e=t.target;if(!(e instanceof HTMLElement))return;const o=e.dataset.calLink;if(!o)return;const r=e.uniqueId=e.uniqueId||Date.now(),n=e.dataset.calNamespace,i=e.dataset.calConfig||"";let a;try{a=JSON.parse(i)}catch(l){a={}}let s=f;if(n&&(s=f.ns[n]),!s)throw new Error(`Namespace ${n} isn't defined`);s("modal",{calLink:o,config:a,uid:r})}));
!function(){const v=({buttonText:s,buttonClasses:t,buttonColor:r,buttonTextColor:e})=>`<button class="z-[10000000000] hidden fixed md:bottom-6 bottom-4 md:right-10 right-4 md:left-10 left-4 ${t.join(" ")} flex h-16 origin-center bg-red-50 transform cursor-pointer items-center
rounded-full py-4 px-6 text-base outline-none drop-shadow-md transition focus:outline-none fo
cus:ring-4 focus:ring-gray-600 focus:ring-opacity-50 active:scale-95"
style="background-color:${r}; color:${e} z-index: 10001">
<div id="button-icon" class="mr-3 flex items-center justify-center">
<svg
class="h-7 w-7"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
<div id="button" class="font-semibold leading-5 antialiased">${s}</div>
</button>`;class w extends HTMLElement{static updatedClassString(t,r){return[r.replace(/hidden|md:right-10|md:left-10|left-4|right-4/g,""),t==="bottom-right"?"md:right-10 right-4":"md:left-10 left-4"].join(" ")}static get observedAttributes(){return["data-button-text","data-hide-button-icon","data-button-position","data-button-color","data-button-text-color"]}attributeChangedCallback(t,r,e){var o,i,n,l,d;if(t==="data-button-text"){const a=(o=this.shadowRoot)==null?void 0:o.querySelector("#button");if(!a)throw new Error("Button not found");a.innerHTML=e}else if(t==="data-hide-button-icon"){const a=(i=this.shadowRoot)==null?void 0:i.querySelector("#button-icon");if(!a)throw new Error("Button not found");a.style.display=e=="true"?"none":"block"}else if(t==="data-button-position"){const a=(n=this.shadowRoot)==null?void 0:n.querySelector("button");if(!a)throw new Error("Button not found");a.className=w.updatedClassString(e,a.className)}else if(t==="data-button-color"){const a=(l=this.shadowRoot)==null?void 0:l.querySelector("button");if(!a)throw new Error("Button not found");a.style.backgroundColor=e}else if(t==="data-button-text-color"){const a=(d=this.shadowRoot)==null?void 0:d.querySelector("button");if(!a)throw new Error("Button not found");a.style.color=e}}constructor(){super();const t=this.dataset.buttonText,r=this.dataset.buttonPosition,e=this.dataset.buttonColor,o=this.dataset.buttonTextColor,i=`<style>${window.Cal.__css}</style> ${v({buttonText:t,buttonClasses:[w.updatedClassString(r,"")],buttonColor:e,buttonTextColor:o})}`;this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=i}}const b=`@keyframes loader{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}to{transform:rotate(360deg)}}@keyframes loader-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}to{height:0%}}.loader-inner{vertical-align:top;display:inline-block;width:100%;animation:loader-inner 2s infinite ease-in}.loader{display:block;width:30px;height:30px;position:relative;border-width:4px;border-style:solid;animation:loader 2s infinite ease}.loader.modal-loader{margin:60px auto}
`,y=s=>s==="404"?"Error Code: 404. Cal Link seems to be wrong.":`Error Code: ${s}. Something went wrong.`,E=`<div id="wrapper" style="top:50%; left:50%" class="absolute z-highest">
<div style="transform:translate(-50%,-50%)" class="loader border-brand dark:border-darkmodebrand">
<span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>
</div>
<div id="error" style="transform:translate(-50%,-50%)" class="hidden">
Something went wrong.
</div>
</div>
<slot></slot>`;class C extends HTMLElement{static get observedAttributes(){return["loading"]}attributeChangedCallback(t,r,e){if(t==="loading"){if(e=="done")this.shadowRoot.querySelector(".loader").style.display="none";else if(e==="failed"){this.shadowRoot.querySelector(".loader").style.display="none",this.shadowRoot.querySelector("#error").style.display="block",this.shadowRoot.querySelector("slot").style.visibility="hidden";const o=y(this.dataset.errorCode);this.shadowRoot.querySelector("#error").innerText=o}}}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`<style>${window.Cal.__css}</style><style>${b}</style>${E}`}}const S=`<style>
.my-backdrop {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:99999999;
display:block;
background-color:rgb(5,5,5, 0.8)
}
.modal-box {
margin:0 auto;
margin-top:20px;
margin-bottom:20px;
position:absolute;
width:100%;
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
overflow: auto;
}
.header {
position: relative;
float:right;
top: 10px;
}
.close {
font-size: 30px;
left: -20px;
position: relative;
color:white;
cursor: pointer;
}
/*Modal background is black only, so hardcode white */
.loader {
--cal-brand-color:white;
}
</style>
<div class="my-backdrop">
<div class="header">
<span class="close">&times;</span>
</div>
<div class="modal-box">
<div class="body">
<div id="wrapper" class="z-[999999999999] absolute flex w-full items-center">
<div class="loader modal-loader border-brand dark:border-darkmodebrand">
<span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>
</div>
</div>
<div id="error" class="hidden left-1/2 -translate-x-1/2 relative text-white"></div>
<slot></slot>
</div>
</div>
</div>`;class f extends HTMLElement{static get observedAttributes(){return["state"]}assertHasShadowRoot(){if(!this.shadowRoot)throw new Error("No shadow root")}show(t){this.assertHasShadowRoot(),this.shadowRoot.host.style.visibility=t?"visible":"hidden",t||(document.body.style.overflow=f.htmlOverflow)}close(){this.show(!1)}getLoaderElement(){this.assertHasShadowRoot();const t=this.shadowRoot.querySelector(".loader");if(!t)throw new Error("No loader element");return t}getErrorElement(){this.assertHasShadowRoot();const t=this.shadowRoot.querySelector("#error");if(!t)throw new Error("No error element");return t}attributeChangedCallback(t,r,e){if(t==="state"){if(e=="loaded")this.getLoaderElement().style.display="none";else if(e==="started")this.show(!0);else if(e=="closed")this.show(!1);else if(e==="failed"){this.getLoaderElement().style.display="none",this.getErrorElement().style.display="inline-block";const o=y(this.dataset.errorCode);this.getErrorElement().innerText=o}}}connectedCallback(){this.assertHasShadowRoot();const t=this.shadowRoot.querySelector(".close");document.addEventListener("keydown",r=>{r.key==="Escape"&&this.close()},{once:!0}),this.shadowRoot.host.addEventListener("click",()=>{this.close()}),t&&(t.onclick=()=>{this.close()})}constructor(){super();const t=`<style>${window.Cal.__css}</style><style>${b}</style>${S}`;this.attachShadow({mode:"open"}),f.htmlOverflow=document.body.style.overflow,document.body.style.overflow="hidden",this.assertHasShadowRoot(),this.shadowRoot.innerHTML=t}}const z=`.cal-embed{border:0px;min-height:300px;margin:0 auto;width:100%}
`;function m(s,t){const r=new window.CustomEvent(s,{detail:t});window.dispatchEvent(r)}class k{static parseAction(t){if(!t)return null;const[r,e,o]=t.split(":");return r!=="CAL"?null:{ns:e,type:o}}getFullActionName(t){return this.namespace?`CAL:${this.namespace}:${t}`:`CAL::${t}`}fire(t,r){const e=this.getFullActionName(t),o={type:t,namespace:this.namespace,fullType:e,data:r};m(e,o),m(this.getFullActionName("*"),o)}on(t,r){const e=this.getFullActionName(t);window.addEventListener(e,r)}off(t,r){const e=this.getFullActionName(t);window.removeEventListener(e,r)}constructor(t){t=t||"",this.namespace=t}}const A=`*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-inter),ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:Roboto Mono,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem;--tw-shadow: 0 0 #0000}[type=text]:focus,[type=email]:focus,[type=url]:focus,[type=password]:focus,[type=number]:focus,[type=date]:focus,[type=datetime-local]:focus,[type=month]:focus,[type=search]:focus,[type=tel]:focus,[type=time]:focus,[type=week]:focus,[multiple]:focus,textarea:focus,select:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #238BE6;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:#238be6}input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1}input::placeholder,textarea::placeholder{color:#6b7280;opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact}[multiple]{background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block;vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;height:1rem;width:1rem;color:#238be6;background-color:#fff;border-color:#6b7280;border-width:1px;--tw-shadow: 0 0 #0000}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-inset: var(--tw-empty, );--tw-ring-offset-width: 2px;--tw-ring-offset-color: #fff;--tw-ring-color: #238BE6;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}[type=checkbox]:checked,[type=radio]:checked{border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}[type=radio]:checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}[type=checkbox]:checked:hover,[type=checkbox]:checked:focus,[type=radio]:checked:hover,[type=radio]:checked:focus{border-color:transparent;background-color:currentColor}[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat}[type=checkbox]:indeterminate:hover,[type=checkbox]:indeterminate:focus{border-color:transparent;background-color:currentColor}[type=file]{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit}[type=file]:focus{outline:1px solid ButtonText;outline:1px auto -webkit-focus-ring-color}*{scrollbar-color:initial;scrollbar-width:initial}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(51 154 240 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(51 154 240 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-4{bottom:1rem}.right-4{right:1rem}.left-4{left:1rem}.left-1\\/2{left:50%}.z-\\[10000000000\\]{z-index:10000000000}.z-\\[999999999999\\]{z-index:999999999999}.mr-3{margin-right:.75rem}.flex{display:flex}.hidden{display:none}.h-16{height:4rem}.h-7{height:1.75rem}.w-7{width:1.75rem}.w-full{width:100%}.origin-center{transform-origin:center}.-translate-x-1\\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.border-brand{border-color:var(--cal-brand-color, black)}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(255 245 245 / var(--tw-bg-opacity))}.bg-brand{background-color:var(--cal-brand-color, black)}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.text-base{font-size:1rem;line-height:1.5rem}.font-semibold{font-weight:600}.leading-5{line-height:1.25rem}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.outline-none{outline:2px solid transparent;outline-offset:2px}.drop-shadow-md{--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@font-face{font-family:Cal Sans;src:url(https://cal.com/cal.ttf)}h1,h2,h3,h4,h5,h6{font-family:Cal Sans;font-weight:400;letter-spacing:normal}html,body,:host{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-gray-600:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity))}.focus\\:ring-opacity-50:focus{--tw-ring-opacity: .5}.active\\:scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.dark .dark\\:border-darkmodebrand{border-color:var(--brand-color-dark-mode)}.dark .dark\\:bg-darkmodebrand{background-color:var(--brand-color-dark-mode)}@media (min-width: 768px){.md\\:bottom-6{bottom:1.5rem}.md\\:right-10{right:2.5rem}.md\\:left-10{left:2.5rem}}
`,L="https://app.cal.com";customElements.define("cal-modal-box",f);customElements.define("cal-floating-button",w);customElements.define("cal-inline",C);const c=window.Cal;if(!c||!c.q)throw new Error("Cal is not defined. This shouldn't happen");c.fingerprint="40fa383ec";c.__css=A;document.head.appendChild(document.createElement("style")).innerHTML=z;function g(...s){console.log(...s)}function u(s,t){function r(o,i){return typeof i=="string"?typeof o==i:o instanceof i}function e(o){return typeof o>"u"}if(t.required&&e(s))throw new Error("Argument is required");for(const[o,i]of Object.entries(t.props)){if(i.required&&e(s[o]))throw new Error(`"${o}" is required`);let n=!0;if(i.type&&!e(s[o])&&(i.type instanceof Array?i.type.forEach(l=>{n=n||r(s[o],l)}):n=r(s[o],i.type)),!n)throw new Error(`"${o}" is of wrong type.Expected type "${i.type}"`)}}class h{constructor(t,r){this.iframeDoQueue=[],this.__config={origin:L},this.namespace=t,this.actionManager=new k(t),h.actionsManagers=h.actionsManagers||{},h.actionsManagers[t]=this.actionManager,this.processQueue(r),this.actionManager.on("__dimensionChanged",e=>{const{data:o}=e.detail,i=this.iframe;if(!i)return;let n="px";o.__unit&&(n=o.__unit),o.iframeHeight&&(i.style.height=o.iframeHeight+n),this.modalBox&&(i.style.maxHeight=window.innerHeight-100+"px")}),this.actionManager.on("__iframeReady",()=>{this.iframeReady=!0,this.doInIframe({method:"parentKnowsIframeReady",arg:void 0}),this.iframeDoQueue.forEach(({method:e,arg:o})=>{this.doInIframe({method:e,arg:o})})}),this.actionManager.on("__routeChanged",()=>{const{top:e,height:o}=this.inlineEl.getBoundingClientRect();e<0&&Math.abs(e/o)>=.25&&this.inlineEl.scrollIntoView({behavior:"smooth"})}),this.actionManager.on("linkReady",()=>{var e,o;(e=this.modalBox)==null||e.setAttribute("state","loaded"),(o=this.inlineEl)==null||o.setAttribute("loading","done")}),this.actionManager.on("linkFailed",e=>{var i,n,l,d;this.iframe&&((i=this.inlineEl)==null||i.setAttribute("data-error-code",e.detail.data.code),(n=this.modalBox)==null||n.setAttribute("data-error-code",e.detail.data.code),(l=this.inlineEl)==null||l.setAttribute("loading","failed"),(d=this.modalBox)==null||d.setAttribute("state","failed"))})}static getQueryObject(t){return t=t||{},{...t,guest:t.guests??void 0}}processInstruction(t){if(t=[].slice.call(t,0),t[0]instanceof Array){t.forEach(o=>{this.processInstruction(o)});return}const[r,...e]=t;this[r]||g(`Instruction ${r} not FOUND`);try{this[r](...e)}catch(o){g("Instruction couldn't be executed",o)}return t}processQueue(t){t.forEach(r=>{this.processInstruction(r)}),t.splice(0),t.push=r=>{this.processInstruction(r)}}createIframe({calLink:t,queryObject:r={}}){const e=this.iframe=document.createElement("iframe");e.className="cal-embed",e.name="cal-embed";const o=this.getConfig(),{iframeAttrs:i,...n}=r;i&&typeof i!="string"&&!(i instanceof Array)&&e.setAttribute("id",i.id);const l=new URLSearchParams;for(const[a,p]of Object.entries(n))p!==void 0&&(p instanceof Array?p.forEach(x=>l.append(a,x)):l.set(a,p));const d=new URL(`${o.origin}/${t}`);d.pathname.endsWith("embed")||(d.pathname=`${d.pathname}/embed`),d.searchParams.set("embed",this.namespace),o.debug&&d.searchParams.set("debug",""+o.debug),o.uiDebug&&(e.style.border="1px solid green");for(const[a,p]of l)d.searchParams.append(a,p);return e.src=d.toString(),e}init(t,r={}){typeof t!="string"&&(r=t||{});const{origin:e,...o}=r;e&&(this.__config.origin=e),this.__config={...this.__config,...o}}getConfig(){return this.__config}inline({calLink:t,elementOrSelector:r,config:e}){u(arguments[0],{required:!0,props:{calLink:{required:!0,type:"string"},elementOrSelector:{required:!0,type:["string",HTMLElement]},config:{required:!1,type:Object}}}),e=e||{},e.__autoScroll=!!e.__autoScroll,e.embedType="inline";const o=this.createIframe({calLink:t,queryObject:h.getQueryObject(e)});o.style.height="100%",o.style.width="100%";const i=r instanceof HTMLElement?r:document.querySelector(r);if(!i)throw new Error("Element not found");i.classList.add("cal-inline-container");const n=document.createElement("template");n.innerHTML='<cal-inline style="max-height:inherit;height:inherit;min-height:inherit;display:flex;position:relative;flex-wrap:wrap;width:100%"></cal-inline><style>.cal-inline-container::-webkit-scrollbar{display:none}.cal-inline-container{scrollbar-width:none}</style>',this.inlineEl=n.content.children[0],this.inlineEl.__CalAutoScroll=e.__autoScroll,this.inlineEl.appendChild(o),i.appendChild(n.content)}floatingButton({calLink:t,buttonText:r="Book my Cal",hideButtonIcon:e=!1,attributes:o,buttonPosition:i="bottom-right",buttonColor:n="rgb(0, 0, 0)",buttonTextColor:l="rgb(255, 255, 255)"}){let d=null;o!=null&&o.id&&(d=document.getElementById(o.id));let a;d?a=d:(a=document.createElement("cal-floating-button"),a.dataset.calLink=t,a.dataset.calNamespace=this.namespace,o!=null&&o.id&&(a.id=o.id),document.body.appendChild(a)),r&&a.setAttribute("data-button-text",r),a.setAttribute("data-hide-button-icon",""+e),a.setAttribute("data-button-position",""+i),a.setAttribute("data-button-color",""+n),a.setAttribute("data-button-text-color",""+l)}modal({calLink:t,config:r={},uid:e}){const o=document.querySelector(`cal-modal-box[uid="${e}"]`);if(o){o.setAttribute("state","started");return}r.embedType="modal";const i=this.createIframe({calLink:t,queryObject:h.getQueryObject(r)});i.style.borderRadius="8px",i.style.height="100%",i.style.width="100%";const n=document.createElement("template");n.innerHTML=`<cal-modal-box uid="${e}"></cal-modal-box>`,this.modalBox=n.content.children[0],this.modalBox.appendChild(i),this.actionManager.on("__closeIframe",()=>{this.modalBox.setAttribute("state","closed")}),document.body.appendChild(n.content)}on({action:t,callback:r}){u(arguments[0],{required:!0,props:{action:{required:!0,type:"string"},callback:{required:!0,type:Function}}}),this.actionManager.on(t,r)}off({action:t,callback:r}){this.actionManager.off(t,r)}preload({calLink:t}){u(arguments[0],{required:!0,props:{calLink:{type:"string",required:!0}}});const r=document.body.appendChild(document.createElement("iframe")),e=this.getConfig(),o=new URL(`${e.origin}/${t}`);o.searchParams.set("prerender","true"),r.src=o.toString(),r.style.width="0",r.style.height="0",r.style.display="none"}ui(t){u(t,{required:!0,props:{theme:{required:!1,type:"string"},styles:{required:!1,type:Object}}}),this.doInIframe({method:"ui",arg:t})}doInIframe({method:t,arg:r}){if(!this.iframeReady){this.iframeDoQueue.push({method:t,arg:r});return}this.iframe.contentWindow.postMessage({originator:"CAL",method:t,arg:r},"*")}}c.instance=new h("",c.q);for(const[s,t]of Object.entries(c.ns))t.instance=new h(s,t.q);window.addEventListener("message",s=>{const t=s.data,r=t.fullType,e=k.parseAction(r);if(!e)return;const o=h.actionsManagers[e.ns];if(c.__logQueue=c.__logQueue||[],c.__logQueue.push({...e,data:t.data}),!o)throw new Error("Unhandled Action"+e);o.fire(e.type,t.data)});document.addEventListener("click",s=>{const t=s.target;if(!(t instanceof HTMLElement))return;const r=t.dataset.calLink;if(!r)return;const e=t.uniqueId=t.uniqueId||Date.now(),o=t.dataset.calNamespace,i=t.dataset.calConfig||"";let n;try{n=JSON.parse(i)}catch{n={}}let l=c;if(o&&(l=c.ns[o]),!l)throw new Error(`Namespace ${o} isn't defined`);l("modal",{calLink:r,config:n,uid:e})});
}()

2

dist/embed/preview.js

@@ -1,1 +0,1 @@

!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver((e=>{for(const n of e)if("childList"===n.type)for(const e of n.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&t(e)})).observe(document,{childList:!0,subtree:!0})}function t(e){if(e.ep)return;e.ep=!0;const t=function(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?t.credentials="include":"anonymous"===e.crossorigin?t.credentials="omit":t.credentials="same-origin",t}(e);fetch(e.href,t)}}();window.fingerprint={}.EMBED_PUBLIC_EMBED_FINGER_PRINT,function(e,t,n){const i=function(e,t){e.q.push(t)},o=e.document;e.Cal=e.Cal||function(){const r=e.Cal,c=arguments;if(r.loaded||(r.ns={},r.q=r.q||[],o.head.appendChild(o.createElement("script")).src=t,r.loaded=!0),c[0]===n){const e=function(){i(e,arguments)},t=c[1];return e.q=e.q||[],void("string"==typeof t?(r.ns[t]=e)&&i(e,c):i(r,c))}i(r,c)}}(window,"http://localhost:3000/embed/embed.js","init");const e=window;e.Cal("init",{origin:"https://app.cal.com"});const t=new URL(document.URL).searchParams,n=t.get("embedType"),i=t.get("calLink");if("inline"===n)e.Cal("inline",{elementOrSelector:"#my-embed",calLink:i});else if("floating-popup"===n)e.Cal("floatingButton",{calLink:i,attributes:{id:"my-floating-button"}});else if("element-click"===n){const e=document.createElement("button");e.setAttribute("data-cal-link",i),e.innerHTML="I am a button that exists on your website",document.body.appendChild(e)}e.addEventListener("message",(e=>{const t=e.data;if("cal:preview"!==t.mode)return;const n=window.Cal;if(!n)throw new Error("Cal is not defined yet");if("instruction"==t.type&&n(t.instruction.name,t.instruction.arg),"inlineEmbedDimensionUpdate"==t.type){const e=document.querySelector("#my-embed");e&&(e.style.width=t.data.width,e.style.height=t.data.height)}}));
(function(){const n=document.createElement("link").relList;if(n&&n.supports&&n.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))o(t);new MutationObserver(t=>{for(const e of t)if(e.type==="childList")for(const r of e.addedNodes)r.tagName==="LINK"&&r.rel==="modulepreload"&&o(r)}).observe(document,{childList:!0,subtree:!0});function s(t){const e={};return t.integrity&&(e.integrity=t.integrity),t.referrerPolicy&&(e.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?e.credentials="include":t.crossOrigin==="anonymous"?e.credentials="omit":e.credentials="same-origin",e}function o(t){if(t.ep)return;t.ep=!0;const e=s(t);fetch(t.href,e)}})();const m="https://app.cal.com",p="http://localhost:3000/embed/embed.js";window.fingerprint="40fa383ec";(function(i,n,s){const o=function(e,r){e.q.push(r)},t=i.document;i.Cal=i.Cal||function(){const e=i.Cal,r=arguments;if(e.loaded||(e.ns={},e.q=e.q||[],t.head.appendChild(t.createElement("script")).src=n,e.loaded=!0),r[0]===s){const c=function(){o(c,arguments)},u=r[1];c.q=c.q||[],typeof u=="string"?(e.ns[u]=c)&&o(c,r):o(e,r);return}o(e,r)}})(window,p,"init");const a=window;a.Cal("init",{origin:m});const f=new URL(document.URL).searchParams,l=f.get("embedType"),d=f.get("calLink");if(l==="inline")a.Cal("inline",{elementOrSelector:"#my-embed",calLink:d});else if(l==="floating-popup")a.Cal("floatingButton",{calLink:d,attributes:{id:"my-floating-button"}});else if(l==="element-click"){const i=document.createElement("button");i.setAttribute("data-cal-link",d),i.innerHTML="I am a button that exists on your website",document.body.appendChild(i)}a.addEventListener("message",i=>{const n=i.data;if(n.mode!=="cal:preview")return;const s=window.Cal;if(!s)throw new Error("Cal is not defined yet");if(n.type=="instruction"&&s(n.instruction.name,n.instruction.arg),n.type=="inlineEmbedDimensionUpdate"){const o=document.querySelector("#my-embed");o&&(o.style.width=n.data.width,o.style.height=n.data.height)}});

13

dist/src/embed-iframe.d.ts

@@ -1,3 +0,4 @@

import { CSSProperties } from "react";
import type { CSSProperties } from "react";
export interface UiConfig {
hideEventTypeDetails?: boolean;
theme?: "dark" | "light" | "auto";

@@ -13,3 +14,6 @@ styles?: EmbedStyles;

CalComPageStatus: string;
CalComPlan: string;
isEmbed: () => boolean;
resetEmbedStatus: () => void;
getEmbedNamespace: () => string | null;
getEmbedTheme: () => "dark" | "light" | null;
}

@@ -39,2 +43,3 @@ }

export declare const useEmbedTheme: () => string | null;
export declare const useEmbedUiConfig: () => Omit<UiConfig, "styles" | "theme">;
export declare const useEmbedStyles: (elementName: keyof EmbedStyles) => Pick<CSSProperties, "background">;

@@ -62,6 +67,6 @@ export declare const useEmbedNonStylesConfig: (elementName: keyof EmbedNonStylesConfig) => "left" | {

};
export declare const useIsEmbed: () => boolean;
export declare const useIsEmbed: (embedSsr?: boolean) => boolean | undefined;
export declare const useEmbedType: () => string | null | undefined;
export declare const methods: {
ui: (uiConfig: UiConfig) => number | undefined;
ui: (uiConfig: UiConfig) => void;
parentKnowsIframeReady: () => void;

@@ -68,0 +73,0 @@ };

18

dist/src/embed.d.ts

@@ -1,11 +0,12 @@

import { methods, UiConfig } from "./embed-iframe";
import type { methods, UiConfig } from "./embed-iframe";
import { SdkActionManager } from "./sdk-action-manager";
declare module "*.css";
declare type Namespace = string;
declare type Config = {
type Namespace = string;
type Config = {
origin: string;
debug?: boolean;
uiDebug?: boolean;
};
export declare type Instruction = [method: string, argument: any] | [method: string, argument: any][];
export declare type InstructionQueue = Instruction[];
export type Instruction = [method: string, argument: any] | [method: string, argument: any][];
export type InstructionQueue = Instruction[];
export declare class Cal {

@@ -71,3 +72,3 @@ iframe?: HTMLIFrameElement;

method: "ui";
arg: Parameters<typeof methods["ui"]>[0];
arg: Parameters<(typeof methods)["ui"]>[0];
} | {

@@ -92,2 +93,7 @@ method: "parentKnowsIframeReady";

}
declare global {
interface Window {
Cal?: GlobalCal;
}
}
export interface CalWindow extends Window {

@@ -94,0 +100,0 @@ Cal?: GlobalCal;

2

dist/src/Inline/inlineHtml.d.ts

@@ -1,3 +0,3 @@

declare const html = "<div id=\"wrapper\" style=\"top:calc(50% - 30px); left:calc(50% - 30px)\" class=\"absolute z-highest\">\n<div class=\"loader border-brand dark:border-darkmodebrand\">\n\t<span class=\"loader-inner bg-brand dark:bg-darkmodebrand\"></span>\n</div>\n<div id=\"error\" class=\"hidden\">\nSomething went wrong.\n</div>\n</div>\n<slot></slot>";
declare const html = "<div id=\"wrapper\" style=\"top:50%; left:50%\" class=\"absolute z-highest\">\n<div style=\"transform:translate(-50%,-50%)\" class=\"loader border-brand dark:border-darkmodebrand\">\n\t<span class=\"loader-inner bg-brand dark:bg-darkmodebrand\"></span>\n</div>\n<div id=\"error\" style=\"transform:translate(-50%,-50%)\" class=\"hidden\">\nSomething went wrong.\n</div>\n</div>\n<slot></slot>";
export default html;
//# sourceMappingURL=inlineHtml.d.ts.map

11

dist/src/ModalBox/ModalBox.d.ts

@@ -0,6 +1,16 @@

type ShadowRootWithStyle = ShadowRoot & {
host: HTMLElement & {
style: CSSStyleDeclaration;
};
};
export declare class ModalBox extends HTMLElement {
static htmlOverflow: string;
static get observedAttributes(): string[];
assertHasShadowRoot(): asserts this is HTMLElement & {
shadowRoot: ShadowRootWithStyle;
};
show(show: boolean): void;
close(): void;
getLoaderElement(): HTMLElement;
getErrorElement(): HTMLElement;
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;

@@ -10,2 +20,3 @@ connectedCallback(): void;

}
export {};
//# sourceMappingURL=ModalBox.d.ts.map

2

dist/src/ModalBox/ModalBoxHtml.d.ts

@@ -1,3 +0,3 @@

declare const html = "<style>\n.my-backdrop {\n position:fixed;\n width:100%;\n height:100%;\n top:0;\n left:0;\n z-index:99999999;\n display:block;\n background-color:rgb(5,5,5, 0.8)\n}\n\n@media only screen and (min-width:600px) {\n .modal-box {\n margin:0 auto;\n margin-top:20px;\n margin-bottom:20px;\n position:absolute;\n width:100%;\n top:50%;\n left:50%;\n transform: translateY(-50%) translateX(-50%);\n overflow: scroll;\n }\n}\n\n@media only screen and (max-width:600px) {\n .modal-box {\n width: 100%;\n height: 80%;\n position:fixed;\n top:50px;\n left:0;\n right: 0;\n margin: 0;\n }\n}\n\n.header {\n position: relative;\n float:right;\n top: 10px;\n}\n.close {\n font-size: 30px;\n left: -20px;\n position: relative;\n color:white;\n cursor: pointer;\n}\n/*Modal background is black only, so hardcode white */\n.loader {\n --cal-brand-color:white;\n}\n</style>\n<div class=\"my-backdrop\">\n<div class=\"header\">\n <span class=\"close\">&times;</span>\n</div>\n<div class=\"modal-box\">\n <div class=\"body\">\n <div id=\"wrapper\" class=\"z-[999999999999] absolute flex w-full items-center\">\n <div class=\"loader modal-loader border-brand dark:border-darkmodebrand\">\n <span class=\"loader-inner bg-brand dark:bg-darkmodebrand\"></span>\n </div>\n </div>\n <div id=\"error\" class=\"hidden left-1/2 -translate-x-1/2 relative text-white\"></div>\n <slot></slot>\n </div>\n</div>\n</div>";
declare const html = "<style>\n.my-backdrop {\n position:fixed;\n width:100%;\n height:100%;\n top:0;\n left:0;\n z-index:99999999;\n display:block;\n background-color:rgb(5,5,5, 0.8)\n}\n\n.modal-box {\n margin:0 auto;\n margin-top:20px;\n margin-bottom:20px;\n position:absolute;\n width:100%;\n top:50%;\n left:50%;\n transform: translateY(-50%) translateX(-50%);\n overflow: auto;\n}\n\n.header {\n position: relative;\n float:right;\n top: 10px;\n}\n.close {\n font-size: 30px;\n left: -20px;\n position: relative;\n color:white;\n cursor: pointer;\n}\n/*Modal background is black only, so hardcode white */\n.loader {\n --cal-brand-color:white;\n}\n</style>\n<div class=\"my-backdrop\">\n<div class=\"header\">\n <span class=\"close\">&times;</span>\n</div>\n<div class=\"modal-box\">\n <div class=\"body\">\n <div id=\"wrapper\" class=\"z-[999999999999] absolute flex w-full items-center\">\n <div class=\"loader modal-loader border-brand dark:border-darkmodebrand\">\n <span class=\"loader-inner bg-brand dark:bg-darkmodebrand\"></span>\n </div>\n </div>\n <div id=\"error\" class=\"hidden left-1/2 -translate-x-1/2 relative text-white\"></div>\n <slot></slot>\n </div>\n</div>\n</div>";
export default html;
//# sourceMappingURL=ModalBoxHtml.d.ts.map

4

dist/src/sdk-action-manager.d.ts

@@ -1,3 +0,3 @@

declare type Namespace = string;
declare type CustomEventDetail = Record<string, any>;
type Namespace = string;
type CustomEventDetail = Record<string, any>;
export declare class SdkActionManager {

@@ -4,0 +4,0 @@ namespace: Namespace;

22

package.json
{
"name": "@calcom/embed-core",
"version": "1.1.2",
"version": "1.1.3",
"description": "This is the vanilla JS core script that embeds Cal Link",

@@ -27,2 +27,3 @@ "main": "./dist/embed/embed.js",

"lint": "eslint --ext .ts,.js src",
"lint:fix": "eslint --ext .ts,.js src --fix",
"embed-tests": "yarn playwright test --config=playwright/config/playwright.config.ts",

@@ -32,3 +33,4 @@ "embed-tests-quick": "QUICK=true yarn embed-tests",

"prepare": "NEXT_PUBLIC_WEBAPP_URL='https://app.cal.com' yarn build",
"publish-prod:patch": "yarn publish --access public --patch"
"publish-prod:patch": "yarn publish --access public --patch",
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf ../../../apps/web/public/embed"
},

@@ -46,10 +48,10 @@ "files": [

"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "^8.15.0",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24",
"typescript": "^4.6.4",
"vite": "^2.9.9"
},
"dependencies": {}
"autoprefixer": "^10.4.12",
"eslint": "^8.34.0",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"typescript": "^4.9.4",
"vite": "^4.1.2"
}
}

43

README.md

@@ -6,2 +6,3 @@ # embed-core

## How to use embed on any webpage no matter what framework
See <https://developer.cal.com/embed/install-with-javascript>

@@ -21,8 +22,17 @@

Ensure that App is running on port 3000 already and then run following command:
Ensure that the main App is running on port 3000 (e.g. yarn dx) already. Also ensure dev server for embed-core is running and then run the following command:
Start the server on 3100 port
```bash
yarn test-playwright
yarn dev
```
And from another terminal you can run the following command to execute tests:
```bash
yarn embed-tests-quick
```
Note: `getEmbedIframe` and `addEmbedListeners` work as a team but they only support opening up embed in a fresh load. Opening an embed closing it and then opening another embed isn't supported yet.
## Shipping to Production

@@ -40,2 +50,8 @@

## Steps to make a page compatible with Embed
- Define `main` class on the element that has the entire content of the page with no auto margins
- Adding `main` class allows iframe height to adjust according to it, making sure that the content within `main` is visible without scrolling as long as device dimensions permit it.
- It also becomes the area beyond which if the user clicks, modal-box would close.
## Known Bugs and Upcoming Improvements

@@ -47,9 +63,11 @@

- Accessibility and UI/UX Issues
- let user choose the loader for ModalBox
- If website owner links the booking page directly for an event, should the user be able to go to events-listing page using back button ?
- Let user specify both dark and light theme colors. Right now the colors specified are for light theme.
let the user choose the loader for ModalBox
If the website owner links the booking page directly for an event, should the user be able to go to events-listing page using back button ?
Let the user specify both dark and light theme colors. Right now the colors specified are for light theme.
- Transparent support is not properly done for team links
- Maybe don't set border radius in inline mode or give option to configure border radius.
- Maybe don't set border-radius in inline mode or give an option to configure border-radius.
- Branding
- Powered by Cal.com and 'Try it for free'. Should they be shown only for FREE account.

@@ -59,5 +77,7 @@ - Branding at the bottom has been removed for UI improvements, need to see where to add it.

- API
- Allow loader color customization using UI command itself too. Right now it's possible using CSS only.
- Automation Tests
- Run automation tests in CI

@@ -67,5 +87,7 @@ - Automation Tests are using snapshots of Booking Page which has current month which requires us to regenerate snapshots every month.

- Bundling Related
- Comments in CSS aren't stripped off
- Debuggability
- Send log messages from iframe to parent so that all logs can exist in a single queue forming a timeline.

@@ -77,5 +99,7 @@ - user should be able to use "on" instruction to understand what's going on in the system

- Color Scheme
- Need to reduce the number of colors on booking page, so that UI configuration is simpler
- Dev Experience/Ease of Installation
- Do we need a one liner(like `window.dataLayer.push`) to inform SDK of something even if snippet is not yet on the page but would be there e.g. through GTM it would come late on the page ?

@@ -86,2 +110,3 @@

- Release Issues
- Compatibility Issue - When embed-iframe.js is updated in such a way that it is not compatible with embed.js, doing a release might break the embed for some time. e.g. iframeReady event let's say get's changed to something else

@@ -94,2 +119,3 @@ - Best Case scenario - App and Website goes live at the same time. A website using embed loads the same updated and thus compatible versions of embed.js and embed-iframe.js

- UI Config Features
- How would the user add on hover styles just using style attribute ?

@@ -101,3 +127,3 @@

- `onClick` support with automatic preloading
- Shadow DOM is currently in open state, which probably means that any styling change on website can possibly impact loader.
- Shadow DOM is currently in open state, which probably means that any styling change on website can impact loader.

@@ -110,4 +136,5 @@ ## Pending Documentation

- Feature Documentation
- Inline mode doesn't cause any scroll in iframe by default. It more looks like it is part of the website.
- Inline mode doesn't cause any scroll in iframe by default. It looks like it is part of the website.
- docs.cal.com
- A complete document on how to use embed

@@ -114,0 +141,0 @@ 

dist/embed/assets/embed.b3d19b4f.css
dist/embed/assets/embed.fafd800f.css
dist/embed/preview.html

Sorry, the diff of this file is not supported yet

dist/src/embed-iframe.d.ts.map

Sorry, the diff of this file is not supported yet

dist/src/embed.d.ts.map

Sorry, the diff of this file is not supported yet

dist/src/FloatingButton/FloatingButton.d.ts.map

Sorry, the diff of this file is not supported yet

dist/src/Inline/inline.d.ts.map

Sorry, the diff of this file is not supported yet

dist/src/Inline/inlineHtml.d.ts.map

Sorry, the diff of this file is not supported yet

dist/src/ModalBox/ModalBox.d.ts.map

Sorry, the diff of this file is not supported yet

dist/src/ModalBox/ModalBoxHtml.d.ts.map

Sorry, the diff of this file is not supported yet

dist/src/sdk-action-manager.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc