UNPKG

@duoduo-oba/ng-devui

Version:

DevUI components based on Angular

1 lines 4.7 kB
{"__symbolic":"module","version":4,"metadata":{"ProgressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"exports":[{"__symbolic":"reference","name":"ProgressComponent"}],"declarations":[{"__symbolic":"reference","name":"ProgressComponent"}],"providers":[]}]}],"members":{}},"ProgressComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"d-progress","template":"<div *ngIf=\"!isCircle\" class=\"devui-progress\" [ngStyle]=\"{ height: height }\">\r\n <div\r\n class=\"devui-progress-bar\"\r\n role=\"progressbar\"\r\n aria-valuenow=\"60\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n [style.background-color]=\"barbgcolor\"\r\n [style.width]=\"percentage + '%'\"\r\n ></div>\r\n <span [style.line-height]=\"height\">{{ percentageText }}</span>\r\n</div>\r\n<div *ngIf=\"isCircle\" class=\"devui-progress-circle\">\r\n <svg class=\"devui-progress-circle \" viewBox=\"0 0 100 100\">\r\n <path\r\n class=\"devui-progress-circle-trail\"\r\n fill-opacity=\"0\"\r\n [attr.stroke-width]=\"strokeWidth\"\r\n [ngStyle]=\"trailPath\"\r\n [attr.d]=\"pathString\"\r\n ></path>\r\n <path\r\n class=\"devui-progress-circle-path\"\r\n [attr.d]=\"pathString\"\r\n [attr.stroke-linecap]=\"'round'\"\r\n fill-opacity=\"0\"\r\n [attr.stroke]=\"barbgcolor\"\r\n [attr.stroke-width]=\"percentage ? strokeWidth : 0\"\r\n [ngStyle]=\"strokePath\"\r\n ></path>\r\n </svg>\r\n <ng-template\r\n *ngIf=\"customViewTemplate\"\r\n [ngTemplateOutlet]=\"customViewTemplate\"\r\n [ngTemplateOutletContext]=\"{$implicit: this, percentage:percentage}\"\r\n ></ng-template>\r\n <span *ngIf=\"!customViewTemplate\" class=\"devui-progress-circle-text\">{{ percentage }}%</span>\r\n</div>\r\n","styles":[":host{display:block}.devui-progress{position:relative;border-radius:100px;background:#dfe1e6}.devui-progress .devui-progress-bar{width:0;height:100%;box-shadow:inset 0 -1px 0 rgba(41,48,64,.2);-webkit-transition:width .6s;transition:width .6s;border-radius:100px;background-color:#5e7ce0}.devui-progress>span{display:block;white-space:nowrap;color:#fff;text-align:center;position:absolute;left:0;top:0;height:100%;width:100%;font-size:12px}.devui-progress-circle{position:relative}.devui-progress-circle-text{position:absolute;top:50%;left:50%;width:100%;margin:0;padding:0;color:#252b3a;line-height:1;white-space:normal;text-align:center;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.devui-progress-circle-trail{stroke:#dfe1e6}.devui-progress-circle-path{stroke:#5e7ce0}"]}]}],"members":{"percentage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"percentageText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"barbgcolor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"strokeWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"isCircle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"customViewTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":22,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":22,"character":16},{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setCircleProgress":[{"__symbolic":"method"}]}}},"origins":{"ProgressModule":"./progress.module","ProgressComponent":"./progress.component"},"importAs":"ng-devui/progress"}