angular-custom-modal/angular-custom-modal.metadata.json

Angular2+ Modal / Dialog (with inner component support).

{"__symbolic":"module","version":3,"metadata":{"ModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"modal","template":"\n    <div \n      class=\"modal fade\"\n      role=\"dialog\"\n      tabindex=\"-1\"\n      [class.in]=\"visibleAnimate\"\n      *ngIf=\"visible\">\n      <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n          <div class=\"modal-header\">\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\n            <button class=\"close\" data-dismiss=\"modal\" type=\"button\" aria-label=\"Close\" (click)=\"close()\">×</button>\n          </div>\n          <div class=\"modal-body\">\n            <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n          </div>\n          <div class=\"modal-footer\">\n            <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  ","styles":["\n    /**\n     * A more specific selector overwrites bootstrap display properties, but they still enable users\n     * to overwite them on their apps.\n     */\n    /deep/ modal .modal {\n      display: -webkit-box;\n      display: -ms-flexbox;\n      display: flex;\n      -webkit-box-flex: 1;\n          -ms-flex: 1;\n              flex: 1;\n      -webkit-box-align: center;\n          -ms-flex-align: center;\n              align-items: center;\n      -webkit-box-pack: center;\n          -ms-flex-pack: center;\n              justify-content: center; }\n\n    /deep/ .modal {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100%;\n      min-height: 100%;\n      background-color: rgba(0, 0, 0, 0.15);\n      z-index: 42; }\n\n    /deep/ .modal.in {\n      opacity: 1; }\n  "]}]}],"members":{"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["modalHeader"]}]}],"body":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["modalBody"]}]}],"footer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild"},"arguments":["modalFooter"]}]}],"closeOnOutsideClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"}]}],"ngOnDestroy":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"onContainerClicked":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["click",["$event"]]}]}],"onKeyDownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}],"isTopMost":[{"__symbolic":"method"}]}},"ModalModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule"}],"exports":[{"__symbolic":"reference","name":"ModalComponent"}],"declarations":[{"__symbolic":"reference","name":"ModalComponent"}],"providers":[]}]}],"members":{}}},"origins":{"ModalComponent":"./modal.component","ModalModule":"./modal.module"},"importAs":"angular-custom-modal"}