mgx-circular-progress-bar/mgx-circular-progress-bar.metadata.json

A library for circular progress bars components, an elegant way to rappresent your percentages.

{"__symbolic":"module","version":4,"metadata":{"MgxCircularProgressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":4},{"__symbolic":"reference","name":"MgxCircularProgressBarModule"},{"__symbolic":"reference","name":"MgxCircularProgressPieModule"},{"__symbolic":"reference","name":"MgxCircularProgressFullBarModule"}],"exports":[{"__symbolic":"reference","name":"MgxCircularProgressBarModule"},{"__symbolic":"reference","name":"MgxCircularProgressPieModule"},{"__symbolic":"reference","name":"MgxCircularProgressFullBarModule"}]}]}],"members":{}},"MgxCircularProgressBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":5,"character":14}],"declarations":[{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"MgxCircularProgressFullBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":5,"character":14}],"declarations":[{"__symbolic":"reference","name":"ɵc"}],"exports":[{"__symbolic":"reference","name":"ɵc"}]}]}],"members":{}},"MgxCircularProgressPieModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":5,"character":14}],"declarations":[{"__symbolic":"reference","name":"ɵb"}],"exports":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"mgx-circular-progress-bar","template":"\n  <div class=\"contain\">\n    <svg  xmlns=\"http://www.w3.org/2000/svg\" x=\"0\" y=\"0\" [ngStyle]=\"{'width.px': diameter, 'height.px': diameter }\" viewBox=\"0 0 200 200\">\n        <circle id=\"base-circle\" [attr.stroke]=\"bgColor\" fill=\"none\" stroke-width=\"15\" cx=\"100\" cy=\"100\"\n            [attr.r]=\"radius\" />\n        <circle id=\"path\" #circlePath [attr.stroke]=\"color\" fill=\"none\" stroke-width=\"15\" cx=\"100\" cy=\"100\"\n            [attr.r]=\"radius\" rotate=\"50\" />\n    </svg>\n    <div class=\"label\">\n        <ng-container *ngIf=\"contentTemplate; else projectContent\">\n            <ng-template *ngTemplateOutlet=\"contentTemplate; context: context\"></ng-template>\n        </ng-container>\n        <ng-template #projectContent>\n            <div #contentRef>\n                <ng-content></ng-content>\n            </div>\n            <div *ngIf=\"!contentRef?.childNodes?.length\" [style.font-size]=\"getFontSize()\">\n                {{percentual}}<span [style.font-size]=\"getFontSize(1.2)\">&#37;</span>\n            </div>\n        </ng-template>\n    </div>\n</div>","styles":[".contain{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;box-sizing:border-box;position:relative}#path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg);transform-origin:center center;-webkit-transform-origin:center center;-ms-transform-origin:center center;-moz-transform-origin:center center;transition:stroke-dashoffset .3s ease-in-out;-webkit-transition:stroke-dashoffset .3s ease-in-out;-ms-transition:stroke-dashoffset .3s ease-in-out;-moz-transition:stroke-dashoffset .3s ease-in-out}#pie-path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg)}.label{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;font-family:Kreon VariableFont;color:#7f8c8d}"]}]}],"members":{"total":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"barValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"percentage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"diameter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"fontSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"bgColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"circlePath":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":46,"character":3},"arguments":["circlePath"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}],"showWarnings":[{"__symbolic":"method"}],"getFontSize":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"mgx-circular-progress-pie","template":"<div class=\"contain\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0\" y=\"0\" [ngStyle]=\"{'width.px': diameter, 'height.px': diameter }\"\n        viewBox=\"-1 -1 2 2\">\n        <circle id=\"base-circle\" [attr.stroke]=\"bgColor\" [attr.fill]=\"bgColor\" cx=\"0\" cy=\"0\" [attr.r]=\"bgSize / 20\" />\n        <path id=\"pie-path\" [attr.fill]=\"color\" [attr.d]=\"pathData\" rotate=\"50\"></path>\n    </svg>\n    <div class=\"label\">\n        <ng-container *ngIf=\"contentTemplate; else projectContent\">\n            <ng-template *ngTemplateOutlet=\"contentTemplate\"></ng-template>\n        </ng-container>\n        <ng-template #projectContent>\n            <div #contentRef>\n                <ng-content></ng-content>\n            </div>\n            <div *ngIf=\"!contentRef?.childNodes?.length\" [style.font-size]=\"getFontSize()\">\n                {{percentual}}<span [style.font-size]=\"getFontSize(1.2)\">&#37;</span>\n            </div>\n        </ng-template>\n    </div>\n</div>","styles":[".contain{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;box-sizing:border-box;position:relative}#path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg);transform-origin:center center;-webkit-transform-origin:center center;-ms-transform-origin:center center;-moz-transform-origin:center center;transition:stroke-dashoffset .3s ease-in-out;-webkit-transition:stroke-dashoffset .3s ease-in-out;-ms-transition:stroke-dashoffset .3s ease-in-out;-moz-transition:stroke-dashoffset .3s ease-in-out}#pie-path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg)}.label{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;font-family:Kreon VariableFont;color:#7f8c8d}"]}]}],"members":{"total":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"barValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"percentage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"diameter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"fontSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"bgColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"bgSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}],"setSlice":[{"__symbolic":"method"}],"getCoordinatesForPercent":[{"__symbolic":"method"}],"showWarnings":[{"__symbolic":"method"}],"getFontSize":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"mgx-circular-progress-full-bar","template":"<div class=\"contain\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0\" y=\"0\" [ngStyle]=\"{'width.px': diameter, 'height.px': diameter }\"\n        viewBox=\"0 0 200 200\">\n        <circle id=\"base-circle\" [attr.fill]=\"bgColor\" stroke-width=\"15\" cx=\"100\" cy=\"100\" [attr.r]=\"contentSize\" />\n        <circle id=\"path\" #circlePath [attr.stroke]=\"color\" fill=\"none\" stroke-width=\"15\" cx=\"100\" cy=\"100\"\n            [attr.r]=\"pathPosition\" rotate=\"50\" />\n    </svg>\n    <div class=\"label\">\n        <ng-container *ngIf=\"contentTemplate; else projectContent\">\n            <ng-template *ngTemplateOutlet=\"contentTemplate; context: context\"></ng-template>\n        </ng-container>\n        <ng-template #projectContent>\n            <div #contentRef>\n                <ng-content></ng-content>\n            </div>\n            <div *ngIf=\"!contentRef?.childNodes?.length\" [style.font-size]=\"getFontSize()\">{{percentual}}<span\n                    [style.font-size]=\"getFontSize(1.2)\">&#37;</span></div>\n        </ng-template>\n    </div>\n</div>","styles":[".contain{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;box-sizing:border-box;position:relative}#path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg);transform-origin:center center;-webkit-transform-origin:center center;-ms-transform-origin:center center;-moz-transform-origin:center center;transition:stroke-dashoffset .3s ease-in-out;-webkit-transition:stroke-dashoffset .3s ease-in-out;-ms-transition:stroke-dashoffset .3s ease-in-out;-moz-transition:stroke-dashoffset .3s ease-in-out}#pie-path{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-moz-transform:rotate(-90deg)}.label{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-box;display:flex;flex-wrap:wrap;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;font-family:Kreon VariableFont;color:#7f8c8d}"]}]}],"members":{"total":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"barValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"percentage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"contentTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"diameter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"fontSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"bgColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"contentSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"pathPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"circlePath":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":3},"arguments":["circlePath"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnChanges":[{"__symbolic":"method"}],"showWarnings":[{"__symbolic":"method"}],"getFontSize":[{"__symbolic":"method"}]}}},"origins":{"MgxCircularProgressModule":"./lib/mgx-circular-progress-bar.module","MgxCircularProgressBarModule":"./lib/mgx-circular-progress-bar/mgx-circular-progress-bar.module","MgxCircularProgressFullBarModule":"./lib/mgx-circular-progress-full-bar/mgx-circular-progress-full-bar.module","MgxCircularProgressPieModule":"./lib/mgx-circular-progress-pie/mgx-circular-progress-pie.module","ɵa":"./lib/mgx-circular-progress-bar/mgx-circular-progress-bar.component","ɵb":"./lib/mgx-circular-progress-pie/mgx-circular-progress-pie.component","ɵc":"./lib/mgx-circular-progress-full-bar/mgx-circular-progress-full-bar.component"},"importAs":"mgx-circular-progress-bar"}