@freshworks/crayons/dist/crayons/p-25e58531.entry.js

Crayons Web Components library

import{r as t,c as i,h as s,i as o}from"./p-c5706edf.js";import{g as e}from"./p-c9855591.js";import{i as a}from"./p-965d32ba.js";var l=function(t,i,s,o){var e,a=arguments.length,l=a<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,i,s,o);else for(var r=t.length-1;r>=0;r--)(e=t[r])&&(l=(a<3?e(l):a>3?e(i,s,l):e(i,s))||l);return a>3&&l&&Object.defineProperty(i,s,l),l};let r=class{constructor(s){t(this,s),this.fwSubmit=i(this,"fwSubmit",7),this.fwOpen=i(this,"fwOpen",7),this.fwClose=i(this,"fwClose",7),this.hasCloseIconButton=!0,this.icon="",this.size="standard",this.submitText="",this.cancelText="",this.submitDisabled=!1,this.submitColor="primary",this.hideFooter=!1,this.slider=!1,this.isOpen=!1,this.modalContainer=null,this.modalContainerHandler=null,this.firstFocusableElement=null,this.firstFocusableElementHandler=null,this.lastFocusableElement=null,this.lastFocusableElementHandler=null,this.modalOpenFocusElement=null,this.accessibilityAdded=!1,this.escapeHandler=null,this.styleVariation={closeColor:{modal:"#475867",slider:"#FFFFFF"},closeSize:{modal:10,slider:12},closeName:{modal:"cross",slider:"cross-big"}}}componentWillLoad(){if(this.modalTitle||(this.modalTitle=this.el.querySelector("fw-modal-title")),this.modalFooter||(this.modalFooter=this.el.querySelector("fw-modal-footer"),this.modalFooter&&(this.modalFooter.submit=this.submit.bind(this),this.modalFooter.close=this.close.bind(this))),this.modalContent||(this.modalContent=this.el.querySelector("fw-modal-content")),this.hideFooter&&this.modalFooter&&(this.modalFooter.style.display="none"),!this.modalContent&&(this.modalTitle||this.modalFooter))throw new Error("Composition Error: fw-modal component must have fw-modal-content component when          either fw-modal-header or fw-modal-footer components are used for modal composition")}componentDidLoad(){this.isOpen&&!this.accessibilityAdded&&(document.body.style.overflow="hidden",this.addAccesibilityEvents())}disconnectedCallback(){this.isOpen&&(document.body.style.overflow="auto",this.removeAccesibilityEvents())}visibilityChange(t){t?(document.body.style.overflow="hidden",this.addAccesibilityEvents(),this.fwOpen.emit()):(document.body.style.overflow="auto",this.removeAccesibilityEvents(),this.fwClose.emit())}footerVisibilityChange(t){this.modalFooter&&(this.modalFooter.style.display=t?"none":"block")}async close(){return this.isOpen=!1,!0}async open(){return this.isOpen=!0,!0}submit(){this.fwSubmit.emit()}addAccesibilityEvents(){var t,i,s;this.accessibilityAdded&&(null===(t=this.firstFocusableElement)||void 0===t?void 0:t.parentNode)&&(null===(i=this.modalOpenFocusElement)||void 0===i?void 0:i.parentNode)&&(null===(s=this.lastFocusableElement)||void 0===s?void 0:s.parentNode)||(this.modalContainerHandler&&this.modalContainer.removeEventListener("animationend",this.modalContainerHandler),this.modalContainerHandler=(()=>{this.firstFocusableElementHandler&&this.firstFocusableElement.removeEventListener("keydown",this.firstFocusableElementHandler),this.lastFocusableElementHandler&&this.lastFocusableElement.removeEventListener("keydown",this.lastFocusableElementHandler);const t=e(this.el);t.length&&(this.firstFocusableElement=t[0],this.lastFocusableElement=t[t.length-1],this.modalOpenFocusElement=t.length>1&&this.firstFocusableElement.classList.contains("close-btn")?t[1]:this.firstFocusableElement,this.lastFocusableElementHandler=(t=>{t.shiftKey||9!==t.keyCode||(t.preventDefault(),this.focusElement(this.firstFocusableElement))}).bind(this),this.firstFocusableElementHandler=(t=>{t.shiftKey&&9===t.keyCode&&(t.preventDefault(),this.focusElement(this.lastFocusableElement))}).bind(this),this.lastFocusableElement.addEventListener("keydown",this.lastFocusableElementHandler),this.firstFocusableElement.addEventListener("keydown",this.firstFocusableElementHandler)),this.isOpen&&this.modalOpenFocusElement&&this.focusElement(this.modalOpenFocusElement)}).bind(this),this.modalContainer&&this.modalContainer.addEventListener("animationend",this.modalContainerHandler),this.accessibilityAdded=!0),this.escapeHandler=(t=>{27===t.keyCode&&(this.isOpen=!1)}).bind(this),document.addEventListener("keydown",this.escapeHandler)}removeAccesibilityEvents(){this.escapeHandler&&(document.removeEventListener("keydown",this.escapeHandler),this.escapeHandler=null)}focusElement(t){try{t.setFocus?t.setFocus():t.focus()}catch(i){console.log(i)}}renderIcon(){return s("fw-icon",{class:"icon",name:this.icon,size:16})}renderTitle(){return s("fw-modal-title",{icon:this.icon,titleText:this.titleText,description:this.description})}renderContent(){return s("fw-modal-content",null,s("slot",null))}renderFooter(){return s("fw-modal-footer",{submitText:this.submitText,cancelText:this.cancelText,submitDisabled:this.submitDisabled,submitColor:this.submitColor,submit:this.submit.bind(this),close:this.close.bind(this),style:{display:this.hideFooter?"none":"block"}})}render(){const t=this.styleVariation;return s("div",{class:{"modal-overlay":!0,visible:this.isOpen,slider:this.slider}},s("div",{class:{modal:!0,[this.size]:!0},"aria-modal":"true",ref:t=>this.modalContainer=t},this.hasCloseIconButton&&s("button",{class:"close-btn",onClick:()=>this.close()},s("fw-icon",{name:this.slider?t.closeName.slider:t.closeName.modal,library:"system",color:this.slider?t.closeColor.slider:t.closeColor.modal,size:this.slider?t.closeSize.slider:t.closeSize.modal})),s("div",{class:"modal-container"},this.modalTitle?"":this.titleText?this.renderTitle():"",this.modalContent?s("slot",null):this.renderContent(),this.modalFooter?"":this.renderFooter())))}get el(){return o(this)}static get watchers(){return{isOpen:["visibilityChange"],hideFooter:["footerVisibilityChange"]}}};l([a({keyName:"modal.ok"})],r.prototype,"submitText",void 0),l([a({keyName:"modal.cancel"})],r.prototype,"cancelText",void 0),r.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}.modal-overlay{height:100vh;width:100vw;position:fixed;top:0;right:0;bottom:0;left:0;display:none;z-index:990;background-color:rgba(18, 52, 77, 0.5);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:all 0.3s linear;transition:all 0.3s linear}.modal{position:relative;display:-ms-flexbox;display:flex;max-height:70vh;background:#fff;-webkit-box-shadow:0px 2px 18px rgba(18, 52, 77, 0.2);box-shadow:0px 2px 18px rgba(18, 52, 77, 0.2);border-radius:4px;z-index:999;-webkit-animation:"modal-entry" 0.5s 1;animation:"modal-entry" 0.5s 1;overflow-wrap:anywhere;word-break:break-word;white-space:normal}.modal .modal-container{position:relative;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.modal .modal-container .content{padding:0px 32px 32px;overflow:visible;-webkit-box-sizing:border-box;box-sizing:border-box}.modal .close-btn{background-color:transparent;background-image:none;border:1px solid transparent;color:#264966;padding:4px 6px;min-width:16px;height:24px;position:absolute;top:8px;right:8px;-webkit-transition:all 0.3s;transition:all 0.3s;z-index:1}.modal .close-btn:hover,.modal .close-btn:focus{background-color:#ebeff3;border-radius:4px;border-color:#ebeff3;cursor:pointer}.standard{width:512px}.small{width:424px}.large{width:800px}.modal-overlay.slider{-ms-flex-pack:end;justify-content:flex-end}.modal-overlay.slider .modal{height:100vh;max-height:100vh;border-radius:0px;width:600px;-webkit-animation:"modal-entry-right" 0.5s 1;animation:"modal-entry-right" 0.5s 1}.modal-overlay.slider .modal .close-btn{height:24px;width:24px;-webkit-box-sizing:border-box;box-sizing:border-box;top:0px;right:600px;background-color:#12344d;border-radius:2px 0px 0px 2px;padding:0px;margin:0px;line-height:24px;text-align:center}.modal-overlay.slider .modal .close-btn:hover,.modal-overlay.slider .modal .close-btn:focus,.modal-overlay.slider .modal .close-btn:focus-visible{background-color:#12344d;border-radius:2px 0px 0px 2px;border-color:#12344d;outline:0px}.modal-overlay.slider .modal .close-btn:focus,.modal-overlay.slider .modal .close-btn:focus-visible{border:1px solid #2c5cc5;-webkit-box-shadow:#2c5cc5 0px 0px 0px 1px;box-shadow:#2c5cc5 0px 0px 0px 1px}.modal-overlay.slider .modal .close-btn fw-icon{height:12px;width:12px}.modal-overlay.slider .modal.small,.modal-overlay.slider .modal.standard,.modal-overlay.slider .modal.large{width:600px}.visible{display:-ms-flexbox;display:flex}@-webkit-keyframes modal-entry{0%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes modal-entry{0%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes modal-entry-right{0%{-webkit-transform:translateX(calc(100% - 520px));transform:translateX(calc(100% - 520px))}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes modal-entry-right{0%{-webkit-transform:translateX(calc(100% - 520px));transform:translateX(calc(100% - 520px))}100%{-webkit-transform:translateX(0);transform:translateX(0)}}';export{r as fw_modal}