@lunaeme/circe-modal
Version:
Circe :: Angular Modal Component
2 lines • 5.32 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@lunaeme/circe-core"),require("@angular/platform-browser"),require("@lunaeme/circe-click-outside")):"function"==typeof define&&define.amd?define("@lunaeme/circe-modal",["exports","@angular/core","@lunaeme/circe-core","@angular/platform-browser","@lunaeme/circe-click-outside"],t):t(((e=e||self).lunaeme=e.lunaeme||{},e.lunaeme["circe-modal"]={}),e.ng.core,e["@lunaeme/circe-core"],e.ng.platformBrowser,e["@lunaeme/circe-click-outside"])}(this,(function(e,t,n,o,i){"use strict";var l=function(){function e(e,n,o){this.ev=e,this._el=n,this._bm=o,this.clickOutside=!1,this.clickOutsideExceptions=[],this.close=new t.EventEmitter,this._element=n.nativeElement}return e.prototype._adjustContentBody=function(){var e=this._bm.getElement("content__body");if(this._element.contains(e)){var t=this._bm.getBoxModel("content__body"),n=0;if(this.title||this.closeButton)n=this._bm.getBoxModel("content__header").boxModelAggregated;var o="calc(100% - "+n+"px + "+t.boxModelAdditions+"px)";e.style.height=o,e.style.minHeight=o}},e.prototype.ngOnInit=function(){var e;this.titleAddClass=((e={})[this.titleClass]=!!this.titleClass,e)},e.prototype.ngAfterViewInit=function(){var e=document.getElementsByClassName("modal-component").item(0),t=document.getElementsByClassName("modal__canvas").item(0);if(this._element.contains(e)&&this._element.contains(t)){var n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),i=this._bm.processSizeString(this.fixed);if(i&&Object.keys(i)){var l="%"===i.with.unit?n.width*i.with.value/100:i.with.value,a="%"===i.height.unit?n.height*i.height.value/100:i.height.value;t.style.width=l+"px",t.style.minWidth=l+"px",t.style.height=a+"px",t.style.minHeight=a+"px",this._adjustContentBody()}else{var c=.9*n.width,s=.9*n.height;o.width>c&&(t.style.width=c+"px",t.style.minWidth=c+"px"),o.height>s&&(t.style.height=s+"px",t.style.minHeight=s+"px")}}},e.prototype.ngOnDestroy=function(){},e.decorators=[{type:t.Component,args:[{selector:"cc-modal",template:'<div class="medea-tpl__layer modal-component" [ngClass]="{noModalBg: !modalBackground}">\n <div\n class="modal__canvas"\n ccClickOutside\n [apply]="clickOutside"\n [exceptions]="clickOutsideExceptions"\n (clickOutside)="close.emit()">\n <div class="modal__content">\n <div class="content__header" *ngIf="title || closeButton" [ngClass]="{noBg: !titleBackground}">\n <div class="header__left mda-fs__22" [ngClass]="titleAddClass">{{title}}</div>\n <div class="header__right">\n <i\n class="mda-icon icon-cross mda-fs__18 modal__close"\n *ngIf="closeButton"\n (click)="ev.preventNoNeededEvent($event); close.emit();"\n title="Close">\n </i>\n </div>\n </div>\n <div\n class="content__body"\n [ngStyle]="{\n padding: (noPadding) ? \'0\' : (!titleBackground) ? \'0 20px 20px 20px\' : \'20px\',\n \'box-sizing\': (!titleBackground) ? \'content-box\' : \'border-box\'\n }">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n',changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".modal-component{display:flex;display:-ms-flexbox;flex-flow:row nowrap;flex-shrink:0;-webkit-flex-shrink:0;align-items:center;-webkit-align-items:center;-ms-flex-align:center;justify-content:center;-webkit-justify-content:center;position:absolute;z-index:10;left:0;top:0;width:100%;height:100%;background-color:rgba(17,17,17,.3);overflow:hidden}.modal-component.noModalBg{background-color:transparent}.modal-component .modal__canvas{background-color:#fff;border:1px solid #fff;border-radius:5px;box-shadow:0 1px 10px 0 rgba(85,85,85,.8)}.modal-component .modal__canvas .modal__content{overflow:hidden;width:100%;min-width:100%;height:100%;min-height:100%}.modal-component .modal__canvas .modal__content .content__header{display:flex;display:-ms-flexbox;flex-flow:row nowrap;flex-shrink:0;-webkit-flex-shrink:0;align-items:center;-webkit-align-items:center;-ms-flex-align:center;justify-content:space-between;-webkit-justify-content:space-between;padding:20px;background-color:#f4f4f4}.modal-component .modal__canvas .modal__content .content__header.noBg{background-color:#fff}.modal-component .modal__canvas .modal__content .content__header .header__right .modal__close{margin-left:15px;cursor:pointer}.modal-component .modal__canvas .modal__content .content__body{padding:20px;position:relative}"]}]}],e.ctorParameters=function(){return[{type:n.EventsService},{type:t.ElementRef},{type:n.BoxModelService}]},e.propDecorators={title:[{type:t.Input}],titleClass:[{type:t.Input}],titleBackground:[{type:t.Input}],closeButton:[{type:t.Input}],modalBackground:[{type:t.Input}],clickOutside:[{type:t.Input}],clickOutsideExceptions:[{type:t.Input}],fixed:[{type:t.Input}],noPadding:[{type:t.Input}],close:[{type:t.Output}]},e}();var a=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{exports:[l],declarations:[l],imports:[o.BrowserModule,i.ClickOutsideModule],providers:[n.BoxModelService,n.EventsService]}]}],e}();e.ModalComponent=l,e.ModalModule=a,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=lunaeme-circe-modal.umd.min.js.map