@lunaeme/circe-modal
Version:
Circe :: Angular Modal Component
210 lines (204 loc) • 9.84 kB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ElementRef, Input, Output, NgModule } from '@angular/core';
import { EventsService, BoxModelService } from '@lunaeme/circe-core';
import { BrowserModule } from '@angular/platform-browser';
import { ClickOutsideModule } from '@lunaeme/circe-click-outside';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ModalComponent {
/**
* @param {?} ev
* @param {?} _el
* @param {?} _bm
*/
constructor(ev, _el, _bm) {
this.ev = ev;
this._el = _el;
this._bm = _bm;
this.clickOutside = false;
this.clickOutsideExceptions = [];
this.close = new EventEmitter();
this._element = _el.nativeElement;
}
/**
* @private
* @return {?}
*/
_adjustContentBody() {
/** @type {?} */
const _modalContentBody = this._bm.getElement('content__body');
if (this._element.contains(_modalContentBody)) {
/** @type {?} */
const _contentBody = this._bm.getBoxModel('content__body');
/** @type {?} */
let _headerAggregated = 0;
if (this.title || this.closeButton) {
/** @type {?} */
const _contentHeader = this._bm.getBoxModel('content__header');
_headerAggregated = _contentHeader.boxModelAggregated;
}
/** @type {?} */
const _cssCalcHeight = `calc(100% - ${_headerAggregated}px + ${_contentBody.boxModelAdditions}px)`;
((/** @type {?} */ (_modalContentBody))).style.height = _cssCalcHeight;
((/** @type {?} */ (_modalContentBody))).style.minHeight = _cssCalcHeight;
}
}
/**
* @return {?}
*/
ngOnInit() {
this.titleAddClass = {
[this.titleClass]: !!this.titleClass
};
}
/**
* @return {?}
*/
ngAfterViewInit() {
/** @type {?} */
const _modalComponent = document.getElementsByClassName('modal-component').item(0);
/** @type {?} */
const _modalCanvas = document.getElementsByClassName('modal__canvas').item(0);
if (this._element.contains(_modalComponent) && this._element.contains(_modalCanvas)) {
/** @type {?} */
const _modalComponentRect = _modalComponent.getBoundingClientRect();
/** @type {?} */
const _modalCanvasRect = _modalCanvas.getBoundingClientRect();
/** @type {?} */
const _fixed = this._bm.processSizeString(this.fixed);
if (_fixed && Object.keys(_fixed)) {
/** @type {?} */
const _modalCanvasWidth = (_fixed.with.unit === '%') ?
_modalComponentRect.width * _fixed.with.value / 100 : _fixed.with.value;
/** @type {?} */
const _modalCanvasHeight = (_fixed.height.unit === '%') ?
_modalComponentRect.height * _fixed.height.value / 100 : _fixed.height.value;
((/** @type {?} */ (_modalCanvas))).style.width = _modalCanvasWidth + 'px';
((/** @type {?} */ (_modalCanvas))).style.minWidth = _modalCanvasWidth + 'px';
((/** @type {?} */ (_modalCanvas))).style.height = _modalCanvasHeight + 'px';
((/** @type {?} */ (_modalCanvas))).style.minHeight = _modalCanvasHeight + 'px';
this._adjustContentBody();
}
else {
/** @type {?} */
const _modalCanvasMaxWidth = _modalComponentRect.width * 0.9;
/** @type {?} */
const _modalCanvasMaxHeight = _modalComponentRect.height * 0.9;
if (_modalCanvasRect.width > _modalCanvasMaxWidth) {
((/** @type {?} */ (_modalCanvas))).style.width = _modalCanvasMaxWidth + 'px';
((/** @type {?} */ (_modalCanvas))).style.minWidth = _modalCanvasMaxWidth + 'px';
}
if (_modalCanvasRect.height > _modalCanvasMaxHeight) {
((/** @type {?} */ (_modalCanvas))).style.height = _modalCanvasMaxHeight + 'px';
((/** @type {?} */ (_modalCanvas))).style.minHeight = _modalCanvasMaxHeight + 'px';
}
}
}
}
/**
* @return {?}
*/
ngOnDestroy() { }
}
ModalComponent.decorators = [
{ type: 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: 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}"]
}] }
];
/** @nocollapse */
ModalComponent.ctorParameters = () => [
{ type: EventsService },
{ type: ElementRef },
{ type: BoxModelService }
];
ModalComponent.propDecorators = {
title: [{ type: Input }],
titleClass: [{ type: Input }],
titleBackground: [{ type: Input }],
closeButton: [{ type: Input }],
modalBackground: [{ type: Input }],
clickOutside: [{ type: Input }],
clickOutsideExceptions: [{ type: Input }],
fixed: [{ type: Input }],
noPadding: [{ type: Input }],
close: [{ type: Output }]
};
if (false) {
/** @type {?} */
ModalComponent.prototype.title;
/** @type {?} */
ModalComponent.prototype.titleClass;
/** @type {?} */
ModalComponent.prototype.titleBackground;
/** @type {?} */
ModalComponent.prototype.closeButton;
/** @type {?} */
ModalComponent.prototype.modalBackground;
/** @type {?} */
ModalComponent.prototype.clickOutside;
/** @type {?} */
ModalComponent.prototype.clickOutsideExceptions;
/** @type {?} */
ModalComponent.prototype.fixed;
/** @type {?} */
ModalComponent.prototype.noPadding;
/** @type {?} */
ModalComponent.prototype.close;
/** @type {?} */
ModalComponent.prototype.titleAddClass;
/**
* @type {?}
* @private
*/
ModalComponent.prototype._element;
/** @type {?} */
ModalComponent.prototype.ev;
/**
* @type {?}
* @private
*/
ModalComponent.prototype._el;
/**
* @type {?}
* @private
*/
ModalComponent.prototype._bm;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ModalModule {
}
ModalModule.decorators = [
{ type: NgModule, args: [{
exports: [
ModalComponent
],
declarations: [
ModalComponent
],
imports: [
BrowserModule,
ClickOutsideModule
],
providers: [
BoxModelService,
EventsService
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ModalComponent, ModalModule };
//# sourceMappingURL=lunaeme-circe-modal.js.map