@blackbaud/skyux
Version:
SKY UX built on Angular 2
1 lines • 11.6 kB
JSON
[{"__symbolic":"module","version":3,"metadata":{"SkyModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-modal","template":"<!--\n Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n class=\"sky-modal-dialog\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n (window:resize)=\"windowResize()\"\n>\n <div class=\"sky-modal\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small' : isSmallSize,\n 'sky-modal-medium' : isMediumSize,\n 'sky-modal-large' : isLargeSize\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\">\n\n <div class=\"sky-modal-header\" [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\">\n <div [attr.id]=\"modalHeaderId\" class=\"sky-modal-header-content\" #headerContent>\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n\n <button type=\"button\" class=\"sky-btn sky-modal-btn-close\" [attr.aria-label]=\"'modal_close' | skyResources\" (click)=\"closeButtonClick()\">\n\n <i class=\"fa fa-close\"></i>\n </button>\n </div>\n\n </div>\n <div [attr.id]=\"modalContentId\" class=\"sky-modal-content\">\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div class=\"sky-modal-footer\">\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n</div>\n</div>\n","styles":[".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:0px 0px 5px 0 rgba(0,0,0,0.3);position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-medium{width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}}.sky-modal-content{background-color:#fff;padding:15px}.sky-modal-header{padding-left:15px;padding-top:9px;padding-bottom:9px;padding-right:3px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons .sky-btn{border:none;color:#686c73}.sky-modal-header-buttons .sky-btn:hover{color:#282b31;transition:color 150ms}.sky-modal-header-content{flex-grow:1;color:#282b31;font-weight:600;font-size:16px}.sky-modal-header{flex-shrink:0}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0}.sky-modal-footer /deep/ sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer /deep/ sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer /deep/ .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer /deep/ .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-content{color:#282b31;font-weight:300;font-size:26px;font-stretch:condensed}.sky-modal-full-page .sky-modal-header-buttons .fa-close{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}\n"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["modalState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"1.0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0.0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0.0"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[150]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[150,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0.0"}]}]}]]}]]}],"providers":[{"__symbolic":"reference","module":"./modal-component-adapter.service","name":"SkyModalComponentAdapterService"}]}]}],"members":{"onDocumentKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./modal-host.service","name":"SkyModalHostService"},{"__symbolic":"reference","module":"./modal-configuration","name":"SkyModalConfiguration"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./modal-component-adapter.service","name":"SkyModalComponentAdapterService"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"closeButtonClick":[{"__symbolic":"method"}],"windowResize":[{"__symbolic":"method"}],"isSizeEqual":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyModalComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-modal","template":"<!--\n Animations are broken in Chrome v52. Angular 2 RC5 will fix it.\n https://github.com/angular/angular/issues/10245\n-->\n<!--<div @modalState=\"modalState\">-->\n\n<div\n class=\"sky-modal-dialog\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-labelledby]=\"ariaLabelledBy\"\n (window:resize)=\"windowResize()\"\n>\n <div class=\"sky-modal\"\n [ngClass]=\"{\n 'sky-modal-full-page': modalFullPage,\n 'sky-modal-small' : isSmallSize,\n 'sky-modal-medium' : isMediumSize,\n 'sky-modal-large' : isLargeSize\n }\"\n [ngStyle]=\"{\n zIndex: modalZIndex\n }\">\n\n <div class=\"sky-modal-header\" [hidden]=\"!headerContent || !headerContent.children || headerContent.children.length < 1\">\n <div [attr.id]=\"modalHeaderId\" class=\"sky-modal-header-content\" #headerContent>\n <ng-content select=\"sky-modal-header\"></ng-content>\n </div>\n <div class=\"sky-modal-header-buttons\">\n\n <button type=\"button\" class=\"sky-btn sky-modal-btn-close\" [attr.aria-label]=\"'modal_close' | skyResources\" (click)=\"closeButtonClick()\">\n\n <i class=\"fa fa-close\"></i>\n </button>\n </div>\n\n </div>\n <div [attr.id]=\"modalContentId\" class=\"sky-modal-content\">\n <ng-content select=\"sky-modal-content\"></ng-content>\n </div>\n <div class=\"sky-modal-footer\">\n <ng-content select=\"sky-modal-footer\"></ng-content>\n </div>\n</div>\n</div>\n","styles":[".sky-modal{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;box-shadow:0px 0px 5px 0 rgba(0,0,0,0.3);position:fixed;width:auto;left:0;right:0;top:20px;margin:10px;display:flex;flex-direction:column}@media (min-width: 768px){.sky-modal:not(.sky-modal-large){margin:0 auto}.sky-modal-small{width:300px}.sky-modal-medium{width:600px}}@media (min-width: 920px){.sky-modal-large{margin:0 auto;width:900px}}.sky-modal-content{background-color:#fff;padding:15px}.sky-modal-header{padding-left:15px;padding-top:9px;padding-bottom:9px;padding-right:3px;background-color:#fff;display:flex;align-items:baseline;border-bottom:1px solid #e2e3e4}.sky-modal-header-buttons .sky-btn{border:none;color:#686c73}.sky-modal-header-buttons .sky-btn:hover{color:#282b31;transition:color 150ms}.sky-modal-header-content{flex-grow:1;color:#282b31;font-weight:600;font-size:16px}.sky-modal-header{flex-shrink:0}.sky-modal-content{overflow-y:auto}.sky-modal-footer{flex-shrink:0}.sky-modal-footer /deep/ sky-tabset-nav-button+sky-tabset-nav-button{margin-left:10px}.sky-modal-footer /deep/ sky-tabset-nav-button+.sky-btn{margin-left:10px}.sky-modal-footer /deep/ .sky-btn+.sky-btn{margin-left:10px}.sky-modal-footer /deep/ .sky-btn+.sky-btn-link{margin-left:-2px}.sky-modal-full-page{width:100%;top:0;margin:0}.sky-modal-full-page .sky-modal-header-content{color:#282b31;font-weight:300;font-size:26px;font-stretch:condensed}.sky-modal-full-page .sky-modal-header-buttons .fa-close{font-size:20px}.sky-modal-full-page .sky-modal-content{flex-grow:1}\n"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["modalState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["in",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"1.0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["out",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0.0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["void => *",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0.0"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[150]}]]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["* => void",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":[150,{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"opacity":"0.0"}]}]}]]}]]}],"providers":[{"__symbolic":"reference","module":"./modal-component-adapter.service","name":"SkyModalComponentAdapterService"}]}]}],"members":{"onDocumentKeyDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["document:keydown",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"./modal-host.service","name":"SkyModalHostService"},{"__symbolic":"reference","module":"./modal-configuration","name":"SkyModalConfiguration"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"./modal-component-adapter.service","name":"SkyModalComponentAdapterService"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"closeButtonClick":[{"__symbolic":"method"}],"windowResize":[{"__symbolic":"method"}],"isSizeEqual":[{"__symbolic":"method"}]}}}}]