@lunaeme/circe-modal
Version:
Circe :: Angular Modal Component
1 lines • 6.22 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"ModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"cc-modal","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":17,"character":19},"member":"OnPush"},"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","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}"]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"titleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"titleBackground":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"closeButton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"modalBackground":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"clickOutside":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"clickOutsideExceptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"fixed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"noPadding":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"close":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@lunaeme/circe-core","name":"EventsService","line":35,"character":25},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":53},{"__symbolic":"reference","module":"@lunaeme/circe-core","name":"BoxModelService","line":35,"character":78}]}],"_adjustContentBody":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"ModalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"exports":[{"__symbolic":"reference","name":"ModalComponent"}],"declarations":[{"__symbolic":"reference","name":"ModalComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":14,"character":4},{"__symbolic":"reference","module":"@lunaeme/circe-click-outside","name":"ClickOutsideModule","line":15,"character":4}],"providers":[{"__symbolic":"reference","module":"@lunaeme/circe-core","name":"BoxModelService","line":18,"character":4},{"__symbolic":"reference","module":"@lunaeme/circe-core","name":"EventsService","line":19,"character":4}]}]}],"members":{}}},"origins":{"ModalComponent":"./lib/modal.component","ModalModule":"./lib/modal.module"},"importAs":"@lunaeme/circe-modal"}