@freshworks/crayons/dist/crayons/p-013c5876.entry.js

Crayons Web Components library

import{r as t,c as e,h as n,e as i,i as o}from"./p-c5706edf.js";import{t as a,h as s,a as r}from"./p-c9855591.js";import{w as l,a as f,g as b,f as d,b as c,c as h}from"./p-bf17fa59.js";import"./p-1dfe71f8.js";import"./p-a9ded7f3.js";import"./p-112455b1.js";import"./p-d5540224.js";let w=class{constructor(n){t(this,n),this.fwClick=e(this,"fwClick",7),this.fwFocus=e(this,"fwFocus",7),this.fwBlur=e(this,"fwBlur",7),this.type="button",this.color="primary",this.size="normal",this.disabled=!1,this.loading=!1,this.showCaretIcon=!1,this.modalTriggerId="",this.fileUploaderId="",this.throttleDelay=200,this.hasLabel=!1,this.hasBeforeLabel=!1,this.hasAfterLabel=!1}async setFocus(){this.button.focus()}onFocus(){this.fwFocus.emit()}onBlur(){this.fwBlur.emit()}connectedCallback(){this.handleClickWithThrottle=a(this.handleClick,this,this.throttleDelay)}handlePreventDefault(t){t.preventDefault(),t.stopPropagation()}handleClick(t){""!==this.modalTriggerId&&this.modalTrigger(),""!==this.fileUploaderId?this.fileSubmit():"submit"===this.type&&this.fakeSubmit(t),this.fwClick.emit()}async fileSubmit(){const t=document.querySelector(`fw-file-uploader#${this.fileUploaderId}`);null==t||t.uploadFiles()}async modalTrigger(){const t=document.querySelector(`fw-modal#${this.modalTriggerId}`);null==t||t.open()}async fakeSubmit(t){const e=this.host.closest("form");if(e){t.preventDefault();const n=document.createElement("button");n.type="submit",n.style.display="none",e.appendChild(n),n.click(),n.remove()}}componentWillLoad(){this.handleSlotChange()}handleSlotChange(){this.hasLabel=s(this.host),this.hasBeforeLabel=s(this.host,"before-label"),this.hasAfterLabel=s(this.host,"after-label")}render(){return n(i,null,n("button",{type:this.type,class:`\n            fw-btn fw-btn--${this.color.toLowerCase()}\n            fw-btn--${this.size.toLowerCase()}\n            ${this.loading?"fw-btn--loading":""}\n            ${this.hasLabel?"fw-btn--has-label":""}\n            ${this.hasBeforeLabel?"fw-btn--has-before":""}\n            ${this.hasAfterLabel?"fw-btn--has-after":""}\n            ${this.showCaretIcon?"fw-btn--caret":""}\n          `,onClick:this.disabled||this.loading?this.handlePreventDefault:this.handleClickWithThrottle,onFocus:()=>this.onFocus(),onBlur:()=>this.onBlur(),ref:t=>this.button=t,"aria-disabled":this.disabled,disabled:this.disabled},n("span",{class:"fw-btn--before"},n("slot",{onSlotchange:()=>this.handleSlotChange(),name:"before-label"})),n("span",{class:"fw-btn--label"},n("slot",{onSlotchange:()=>this.handleSlotChange()})),n("span",{class:"fw-btn--after"},n("slot",{onSlotchange:()=>this.handleSlotChange(),name:"after-label"})),this.loading?n("fw-spinner",{class:"fw-btn--loader"}):"",this.showCaretIcon?n("fw-icon",{name:"chevron-down",library:"system"}):""))}get host(){return o(this)}};w.style=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (prefers-reduced-motion: reduce){.fw-btn,.fw-btn--label,.fw-btn--loader{-webkit-transition:none;transition:none}}:host{display:inline-block;width:auto;cursor:pointer}.fw-btn{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;border-style:solid;border-width:1px;font-weight:600;font-family:inherit;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;cursor:inherit;letter-spacing:0;outline:0;border-radius:4px;--fw-icon-color:currentColor}.fw-btn .fw-btn--label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.fw-btn:active:not(.fw-btn--loading){-webkit-box-shadow:inset 0 0 4px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 0 4px 0 rgba(0, 0, 0, 0.25)}.fw-btn:focus{border:1px solid #2c5cc5;-webkit-box-shadow:0 0 0 1px #2c5cc5;box-shadow:0 0 0 1px #2c5cc5}.fw-btn.disabled,.fw-btn[disabled]{cursor:not-allowed}.fw-btn--primary{background-color:#264966;color:#fff;border-color:#12344d;background-image:-webkit-gradient(linear, left top, left bottom, from(#264966), to(#12344d));background-image:linear-gradient(to bottom, #264966, #12344d)}.fw-btn--primary:active{border-color:#264966}.fw-btn--primary:focus:not([disabled]),.fw-btn--primary:hover:not([disabled]){background-color:#12344d;background-image:none}.fw-btn--primary.disabled,.fw-btn--primary[disabled]{background-image:-webkit-gradient(linear, left top, left bottom, from(#92a2b1), to(#7b8e9f));background-image:linear-gradient(to bottom, #92a2b1, #7b8e9f);border-color:#7b8e9f;color:rgba(255, 255, 255, 0.5)}.fw-btn--secondary{background-color:#f5f7f9;color:#12344d;border-color:#cfd7df;background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f7f9));background-image:linear-gradient(to bottom, #fff, #f5f7f9)}.fw-btn--secondary:active{border-color:#ebeff3}.fw-btn--secondary:focus:not([disabled]),.fw-btn--secondary:hover:not([disabled]){background-color:#f5f7f9;background-image:none}.fw-btn--secondary.disabled,.fw-btn--secondary[disabled]{background:#ebeff3;border-color:#cfd7df;color:#92a2b1}.fw-btn--danger{color:#fff;background-color:#d72d30;border-color:#c82124;background-image:-webkit-gradient(linear, left top, left bottom, from(#d72d30), to(#c82124));background-image:linear-gradient(to bottom, #d72d30, #c82124)}.fw-btn--danger:focus:not([disabled]),.fw-btn--danger:hover:not([disabled]){background-color:#c82124;background-image:none}.fw-btn--danger.disabled,.fw-btn--danger[disabled]{background-image:-webkit-gradient(linear, left top, left bottom, from(#f89fa1), to(#f2797b));background-image:linear-gradient(to bottom, #f89fa1, #f2797b);border-color:#f2797b;color:rgba(255, 255, 255, 0.5)}.fw-btn--link{background-color:transparent;background-image:none;border:1px solid transparent;color:#2c5cc5}.fw-btn--text{background-color:transparent;background-image:none;border:1px solid transparent;color:#264966}.fw-btn--text:focus:not([disabled]),.fw-btn--text:hover:not([disabled]){background-color:#ebeff3}.fw-btn--text:focus:not([disabled]),.fw-btn--text:hover:not([disabled]),.fw-btn--link:focus:not([disabled]),.fw-btn--link:hover:not([disabled]){border-color:#2c5cc5;-webkit-box-shadow:0 0 0 1px #2c5cc5;box-shadow:0 0 0 1px #2c5cc5}.fw-btn--text.disabled,.fw-btn--text[disabled],.fw-btn--link.disabled,.fw-btn--link[disabled]{opacity:0.5}.fw-btn--mini{height:16px;line-height:calc(16px - 1px * 2)}.fw-btn--mini .fw-btn--label{font-size:10px}.fw-btn--mini fw-spinner{-webkit-transform:scale(0.5);transform:scale(0.5)}.fw-btn--small{height:24px;line-height:calc(24px - 1px * 2)}.fw-btn--small .fw-btn--label{font-size:12px}.fw-btn--small fw-spinner{-webkit-transform:scale(0.75);transform:scale(0.75)}.fw-btn--normal{min-width:var(--fw-button-min-width, 80px);height:32px;line-height:calc(32px - 1px * 2)}.fw-btn--icon{min-width:32px;width:32px;height:32px;padding:0;line-height:calc(32px - 1px * 2)}.fw-btn--icon-small{min-width:24px;width:24px;height:22px;padding:0;line-height:calc(22px - 1px * 2)}.fw-btn--before,.fw-btn--after,.fw-btn--caret{-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.fw-btn--normal ::slotted(fw-icon){--fw-icon-size:12px}.fw-btn--small ::slotted(fw-icon){--fw-icon-size:10px}.fw-btn--mini ::slotted(fw-icon){--fw-icon-size:8px}.fw-btn--has-label.fw-btn--normal .fw-btn--label{padding:0 var(--fw-button-label-vertical-padding, 12px)}.fw-btn--has-before.fw-btn--normal{padding-left:8px}.fw-btn--has-before.fw-btn--normal .fw-btn--label{padding-left:8px}.fw-btn--has-after.fw-btn--normal,.fw-btn--caret.fw-btn--normal{padding-right:8px}.fw-btn--has-after.fw-btn--normal .fw-btn--label,.fw-btn--caret.fw-btn--normal .fw-btn--label{padding-right:8px}.fw-btn--has-label.fw-btn--small .fw-btn--label{padding:0 var(--fw-button-label-vertical-padding, 8px)}.fw-btn--has-before.fw-btn--small{padding-left:6px}.fw-btn--has-before.fw-btn--small .fw-btn--label{padding-left:6px}.fw-btn--has-after.fw-btn--small,.fw-btn--caret.fw-btn--small{padding-right:6px}.fw-btn--has-after.fw-btn--small .fw-btn--label,.fw-btn--caret.fw-btn--small .fw-btn--label{padding-right:6px}.fw-btn--has-label.fw-btn--mini .fw-btn--label{padding:0 var(--fw-button-label-vertical-padding, 6px)}.fw-btn--has-before.fw-btn--mini{padding-left:4px}.fw-btn--has-before.fw-btn--mini .fw-btn--label{padding-left:4px}.fw-btn--has-after.fw-btn--mini,.fw-btn--caret.fw-btn--mini{padding-right:4px}.fw-btn--has-after.fw-btn--mini .fw-btn--label,.fw-btn--caret.fw-btn--mini .fw-btn--label{padding-right:4px}.fw-btn--caret fw-icon{--fw-icon-size:9px}.fw-btn--caret.fw-btn--mini fw-icon{--fw-icon-size:6px}.fw-btn--loading{position:relative;cursor:wait}.fw-btn--loading .fw-btn--label,.fw-btn--loading .fw-btn--before,.fw-btn--loading .fw-btn--after,.fw-btn--loading .fw-btn--caret{opacity:0}.fw-btn--loading .fw-btn--loader{--fw-spinner-color:currentColor;opacity:1;line-height:0}.fw-btn--label,.fw-btn--loader{-webkit-transition:opacity 0.3s ease-out;transition:opacity 0.3s ease-out}.fw-btn--loader{opacity:0;position:absolute;font-size:1em;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em);margin-top:-1px;margin-left:-1px}:host(.fw-button-group__button--first:not(.fw-button-group__button--last)) .fw-btn{border-top-right-radius:0;border-bottom-right-radius:0}:host(.fw-button-group__button--inner) .fw-btn{border-radius:0;border-left:0}:host(.fw-button-group__button--last:not(.fw-button-group__button--first)) .fw-btn{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}';let p=class{constructor(e){t(this,e),this.dataSvg="",this.xRootMargin="50px",this.color="",this.library="crayons",this.lazy=!1,this.setElVisible=!1,this.visible=!1}async componentWillLoad(){this.visible=!this.lazy||this.setElVisible,this.visible&&this.applyIconPropstoState()}connectedCallback(){h(this),this.lazy&&l(this.intersectionObserver,this.xRootMargin,this.el,(()=>{this.setElVisible=!0,this.applyIconPropstoState()}))}nameChangeHandler(){this.applyIconPropstoState()}disconnectedCallback(){f(this),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=void 0)}async applyIconPropstoState(){const{name:t,dataSvg:e,library:n}=this;try{if(!t&&e)this.svg=e;else{if(!t)throw console.error("Please provide valid props either 'name' or 'data-svg'.Check the usage docs."),"-invalid props-";{const e=this.getIconUrl(t,n);this.svg=await this.drawIcon(e)}}}catch(i){console.error(i.message),this.loadFallbackImage()}}async drawIcon(t){const{name:e,library:n}=this;try{const i=await b(t);return this.applySVGMutation(n,e,i),i.outerHTML}catch(i){throw new Error(`Exception occured while drawing Icon- ${e} : ${i.message}`)}}redrawIcon(){this.applyIconPropstoState()}async loadFallbackImage(){this.svg=await d(this.getIconUrlfromlib("image","system"))}getIconUrl(t,e){let n="";if(this.src)n=`${this.src}/${this.name}.svg`;else if(n=this.getIconUrlfromlib(t,e),void 0===n)return void console.error(`Error while resolving url for ${this.name}|${this.library}. Please check the lib registration/resolver function.`);return n}getIconUrlfromlib(t,e){const n=c(e);return t&&n?n.resolver(t):void console.error(`Icon ${t}/${e} not registered.Check the Implementation.`)}applySVGMutation(t,e,n){const i=c(t);i&&i.mutator&&i.mutator(n,e)}render(){const t={},e={"aria-hidden":!0};return"string"==typeof this.label&&this.label.length>0&&(e.role="img",e["aria-label"]=this.label),void 0!==this.size&&(t["--fw-icon-size"]=`${this.size}px`),void 0!==this.color&&(t["--fw-icon-color"]=this.color),n("div",Object.assign({class:"icon"},e,{style:Object.assign({height:` ${this.height}px`,width:`${this.width}px`},t),innerHTML:this.svg}))}static get assetsDirs(){return["icon-assets"]}get el(){return o(this)}static get watchers(){return{name:["nameChangeHandler"]}}};p.style=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}:host{display:inline-block}.icon{display:block;color:var(--fw-icon-color, #12344d);height:var(--fw-icon-size, 12px);width:var(--fw-icon-size, 12px)}.icon svg{display:block;width:100%;height:100%}';let m=class{constructor(e){t(this,e),this.size="default",this.color="",this.sizeMap={small:12,default:16,medium:24,large:32}}getSize(){return this.sizeMap[this.size]||16}render(){const t=this.getSize();return n(i,null,n("svg",{class:`spinner ${this.size}`,style:{width:`${t}px`,height:`${t}px`,"--fw-spinner-color":`${this.color}`},viewBox:"0 0 50 50"},n("circle",{class:"path",cx:"25",cy:"25",r:"18",fill:"none","stroke-width":"8"})))}};m.style=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (prefers-reduced-motion: reduce){.spinner{-webkit-animation:none;animation:none}}@media screen and (prefers-reduced-motion: reduce) and (prefers-reduced-motion: reduce){.spinner .path{-webkit-animation:none;animation:none}}.spinner{-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;z-index:2}@media screen and (prefers-reduced-motion: reduce){.spinner .path{stroke:var(--fw-spinner-color, #2c5cc5);stroke-linecap:round;-webkit-animation:none;animation:none}}.spinner .path{stroke:var(--fw-spinner-color, #2c5cc5);stroke-linecap:round;-webkit-animation:dash 1s ease-in-out infinite;animation:dash 1s ease-in-out infinite}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}';const g={error:"#e43538",warning:"#c7502f",info:"#264966",success:"#00795b"};let u=class{constructor(n){t(this,n),this.fwLinkClick=e(this,"fwLinkClick",7),this.fwRemoveToast=e(this,"fwRemoveToast",7),this.open=!1,this.isTimedOut=!1,this.fadeOut=!1,this.iconSize=16,this.type="warning",this.timeout=4e3,this.actionLinkText="",this.sticky=!1}openChanged(t){t&&this.setUpToast()}async componentWillLoad(){this.open&&this.setUpToast()}async setUpToast(){this.fadeOut=!1,this.isTimedOut=!1,this.timerId=setTimeout((async()=>{this.sticky||((!this.pauseOnHover||this.pauseOnHover&&!this.isMouseHovered)&&await this.closeToast(),this.isTimedOut=!0)}),this.timeout)}async mouseHover(t=!1){this.isMouseHovered=t,this.isTimedOut&&!this.isMouseHovered&&await this.closeToast()}closingAnimation(){return this.fadeOut=!0,new Promise((t=>setTimeout((()=>{this.open=!1,this.fwRemoveToast.emit(this.controllerEl),t()}),500)))}async closeToast(){this.timerId&&clearTimeout(this.timerId),await this.closingAnimation()}disconnectedCallback(){this.fwRemoveToast.emit(this.controllerEl),this.timerId&&clearTimeout(this.timerId)}render(){return n(i,{onmouseover:()=>this.mouseHover(!0),onmouseout:()=>this.mouseHover(!1),"aria-hidden":this.open?"false":"true"},n("div",{class:`toast ${this.type} ${this.open?"is-open":""} ${this.fadeOut?"fade-out":""}`,"aria-hidden":this.open?"false":"true"},n("div",{class:"toast-container"},"inprogress"===this.type?n("fw-spinner",{class:"icon"}):n("fw-icon",{class:"icon",size:this.iconSize,name:this.type,color:g[this.type]}),n("div",{class:"content"},n("slot",null),this.content,this.actionLinkText.length>0?n("div",{class:"action-link",role:"button",tabindex:"0",onClick:()=>this.fwLinkClick.emit(),onKeyDown:r((()=>this.fwLinkClick.emit()))},this.actionLinkText):""),n("fw-icon",{size:10,name:"cross",class:"remove",color:"#183247",onClick:()=>this.closeToast(),library:"system"}))))}get controllerEl(){return o(this)}static get watchers(){return{open:["openChanged"]}}};u.style=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}@media screen and (prefers-reduced-motion: reduce){.toast.is-open{-webkit-animation:none;animation:none}}.toast.is-open{display:block;-webkit-animation-duration:0.5s;animation-duration:0.5s;-webkit-animation-name:fadeIn;animation-name:fadeIn;z-index:999}.toast{display:none;position:relative;top:10px;width:400px;padding:0px 0px 16px 0px;border:1px solid #ebeff3;border-radius:4px;background-color:#fff;margin-bottom:16px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:0px 2px 4px rgba(18, 52, 77, 0.06), 0px 2px 16px rgba(18, 52, 77, 0.16);box-shadow:0px 2px 4px rgba(18, 52, 77, 0.06), 0px 2px 16px rgba(18, 52, 77, 0.16);overflow-wrap:anywhere;word-break:break-word;white-space:normal}.toast.success{border-top:5px solid #00a886}.toast.error{border-top:5px solid #d72d30}.toast.warning{border-top:5px solid #f8ab59}.toast.inprogress{border-top:5px solid #2c5cc5}.toast-container{margin-top:16px;display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;place-content:center}.toast-container .content{color:#12344d;line-height:20px;-ms-flex:1 1 auto;flex:1 1 auto;font-size:14px;font-weight:500;vertical-align:top}.toast-container .icon{margin:5px 16px 0px 16px}.toast-container .remove{margin:5px 12px 0px 12px}.action-link{color:#2c5cc5;line-height:14px;cursor:pointer;font-size:12px;font-weight:600;padding:8px 0px}@-webkit-keyframes fadeOut{100%{top:-600px}}@keyframes fadeOut{100%{top:-600px}}@-webkit-keyframes fadeIn{0%{top:-600px}100%{top:10px}}@keyframes fadeIn{0%{top:-600px}100%{top:10px}}@media screen and (prefers-reduced-motion: reduce){.toast.fade-out{-webkit-animation:none;animation:none}}.toast.fade-out{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-name:fadeOut;animation-name:fadeOut}';export{w as fw_button,p as fw_icon,m as fw_spinner,u as fw_toast_message}