@freshworks/crayons/dist/esm-es5/fw-modal.entry.js

Crayons Web Components library

var __awaiter=this&&this.__awaiter||function(e,t,o,i){function n(e){return e instanceof o?e:new o((function(t){t(e)}))}return new(o||(o=Promise))((function(o,l){function s(e){try{a(i.next(e))}catch(t){l(t)}}function r(e){try{a(i["throw"](e))}catch(t){l(t)}}function a(e){e.done?o(e.value):n(e.value).then(s,r)}a((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var o={label:0,sent:function(){if(l[0]&1)throw l[1];return l[1]},trys:[],ops:[]},i,n,l,s;return s={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function r(e){return function(t){return a([e,t])}}function a(s){if(i)throw new TypeError("Generator is already executing.");while(o)try{if(i=1,n&&(l=s[0]&2?n["return"]:s[0]?n["throw"]||((l=n["return"])&&l.call(n),0):n.next)&&!(l=l.call(n,s[1])).done)return l;if(n=0,l)s=[s[0]&2,l.value];switch(s[0]){case 0:case 1:l=s;break;case 4:o.label++;return{value:s[1],done:false};case 5:o.label++;n=s[1];s=[0];continue;case 7:s=o.ops.pop();o.trys.pop();continue;default:if(!(l=o.trys,l=l.length>0&&l[l.length-1])&&(s[0]===6||s[0]===2)){o=0;continue}if(s[0]===3&&(!l||s[1]>l[0]&&s[1]<l[3])){o.label=s[1];break}if(s[0]===6&&o.label<l[1]){o.label=l[1];l=s;break}if(l&&o.label<l[2]){o.label=l[2];o.ops.push(s);break}if(l[2])o.ops.pop();o.trys.pop();continue}s=t.call(e,o)}catch(r){s=[6,r];n=0}finally{i=l=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,i as getElement}from"./index-25bc21e4.js";import{g as getFocusableChildren}from"./index-04e9b0fa.js";import{i as i18n}from"./Translation-f65767b0.js";var modalCss=':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)}}';var __decorate=undefined&&undefined.__decorate||function(e,t,o,i){var n=arguments.length,l=n<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,o):i,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")l=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)if(s=e[r])l=(n<3?s(l):n>3?s(t,o,l):s(t,o))||l;return n>3&&l&&Object.defineProperty(t,o,l),l};var Modal=function(){function e(e){registerInstance(this,e);this.fwSubmit=createEvent(this,"fwSubmit",7);this.fwOpen=createEvent(this,"fwOpen",7);this.fwClose=createEvent(this,"fwClose",7);this.hasCloseIconButton=true;this.icon="";this.size="standard";this.submitText="";this.cancelText="";this.submitDisabled=false;this.submitColor="primary";this.hideFooter=false;this.slider=false;this.isOpen=false;this.modalContainer=null;this.modalContainerHandler=null;this.firstFocusableElement=null;this.firstFocusableElementHandler=null;this.lastFocusableElement=null;this.lastFocusableElementHandler=null;this.modalOpenFocusElement=null;this.accessibilityAdded=false;this.escapeHandler=null;this.styleVariation={closeColor:{modal:"#475867",slider:"#FFFFFF"},closeSize:{modal:10,slider:12},closeName:{modal:"cross",slider:"cross-big"}}}e.prototype.componentWillLoad=function(){if(!this.modalTitle){this.modalTitle=this.el.querySelector("fw-modal-title")}if(!this.modalFooter){this.modalFooter=this.el.querySelector("fw-modal-footer");if(this.modalFooter){this.modalFooter.submit=this.submit.bind(this);this.modalFooter.close=this.close.bind(this)}}if(!this.modalContent){this.modalContent=this.el.querySelector("fw-modal-content")}if(this.hideFooter&&this.modalFooter){this.modalFooter.style.display="none"}if(!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")}};e.prototype.componentDidLoad=function(){if(this.isOpen&&!this.accessibilityAdded){document.body.style.overflow="hidden";this.addAccesibilityEvents()}};e.prototype.disconnectedCallback=function(){if(this.isOpen){document.body.style.overflow="auto";this.removeAccesibilityEvents()}};e.prototype.visibilityChange=function(e){if(!e){document.body.style.overflow="auto";this.removeAccesibilityEvents();this.fwClose.emit()}else{document.body.style.overflow="hidden";this.addAccesibilityEvents();this.fwOpen.emit()}};e.prototype.footerVisibilityChange=function(e){if(this.modalFooter){if(e){this.modalFooter.style.display="none"}else{this.modalFooter.style.display="block"}}};e.prototype.close=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.isOpen=false;return[2,true]}))}))};e.prototype.open=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.isOpen=true;return[2,true]}))}))};e.prototype.submit=function(){this.fwSubmit.emit()};e.prototype.addAccesibilityEvents=function(){var e=this;var t,o,i;if(!this.accessibilityAdded||!((t=this.firstFocusableElement)===null||t===void 0?void 0:t.parentNode)||!((o=this.modalOpenFocusElement)===null||o===void 0?void 0:o.parentNode)||!((i=this.lastFocusableElement)===null||i===void 0?void 0:i.parentNode)){this.modalContainerHandler&&this.modalContainer.removeEventListener("animationend",this.modalContainerHandler);this.modalContainerHandler=function(){e.firstFocusableElementHandler&&e.firstFocusableElement.removeEventListener("keydown",e.firstFocusableElementHandler);e.lastFocusableElementHandler&&e.lastFocusableElement.removeEventListener("keydown",e.lastFocusableElementHandler);var t=getFocusableChildren(e.el);if(t.length){e.firstFocusableElement=t[0];e.lastFocusableElement=t[t.length-1];e.modalOpenFocusElement=t.length>1&&e.firstFocusableElement.classList.contains("close-btn")?t[1]:e.firstFocusableElement;e.lastFocusableElementHandler=function(t){if(!t.shiftKey&&t.keyCode===9){t.preventDefault();e.focusElement(e.firstFocusableElement)}}.bind(e);e.firstFocusableElementHandler=function(t){if(t.shiftKey&&t.keyCode===9){t.preventDefault();e.focusElement(e.lastFocusableElement)}}.bind(e);e.lastFocusableElement.addEventListener("keydown",e.lastFocusableElementHandler);e.firstFocusableElement.addEventListener("keydown",e.firstFocusableElementHandler)}if(e.isOpen&&e.modalOpenFocusElement){e.focusElement(e.modalOpenFocusElement)}}.bind(this);this.modalContainer&&this.modalContainer.addEventListener("animationend",this.modalContainerHandler);this.accessibilityAdded=true}this.escapeHandler=function(t){if(t.keyCode===27){e.isOpen=false}}.bind(this);document.addEventListener("keydown",this.escapeHandler)};e.prototype.removeAccesibilityEvents=function(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}};e.prototype.focusElement=function(e){try{if(e.setFocus){e.setFocus()}else{e.focus()}}catch(t){console.log(t)}};e.prototype.renderIcon=function(){return h("fw-icon",{class:"icon",name:this.icon,size:16})};e.prototype.renderTitle=function(){return h("fw-modal-title",{icon:this.icon,titleText:this.titleText,description:this.description})};e.prototype.renderContent=function(){return h("fw-modal-content",null,h("slot",null))};e.prototype.renderFooter=function(){return h("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"}})};e.prototype.render=function(){var e;var t=this;var o=this.styleVariation;return h("div",{class:{"modal-overlay":true,visible:this.isOpen,slider:this.slider}},h("div",{class:(e={modal:true},e[this.size]=true,e),"aria-modal":"true",ref:function(e){return t.modalContainer=e}},this.hasCloseIconButton&&h("button",{class:"close-btn",onClick:function(){return t.close()}},h("fw-icon",{name:this.slider?o.closeName.slider:o.closeName.modal,library:"system",color:this.slider?o.closeColor.slider:o.closeColor.modal,size:this.slider?o.closeSize.slider:o.closeSize.modal})),h("div",{class:"modal-container"},this.modalTitle?"":this.titleText?this.renderTitle():"",this.modalContent?h("slot",null):this.renderContent(),this.modalFooter?"":this.renderFooter())))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{isOpen:["visibilityChange"],hideFooter:["footerVisibilityChange"]}},enumerable:false,configurable:true});return e}();__decorate([i18n({keyName:"modal.ok"})],Modal.prototype,"submitText",void 0);__decorate([i18n({keyName:"modal.cancel"})],Modal.prototype,"cancelText",void 0);Modal.style=modalCss;export{Modal as fw_modal};