ng2-widgets
Version:
Angular Widgets includes a variety of components that you can easily use in your applications.
1 lines • 7.46 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"Ng2WidgetsService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"Ng2WidgetsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"lib-ng2-widgets","template":"\n <p>\n ng2-widgets works!\n </p>\n ","styles":["@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css);"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"Ng2WidgetsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"Ng2WidgetsComponent"}],"imports":[],"exports":[{"__symbolic":"reference","name":"Ng2WidgetsComponent"}]}]}],"members":{}},"WidgetCurrencyModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"WidgetCurrencyComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":4}],"exports":[{"__symbolic":"reference","name":"WidgetCurrencyComponent"}]}]}],"members":{}},"WidgetCurrencyComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"widget-currency","template":"<div class=\"widget-currency-container {{ status ? 'success' : 'danger' }} {{ customClass }}\"\n [ngStyle]=\"{ 'background-color': bgColor, 'color': textColor, 'border-bottom-width': borderBottomWidth, 'border-bottom-color': borderBottomColor }\">\n <div class=\"currency-icon-container\" [ngStyle]=\"{ 'background-color': iconBgColor, 'color': iconColor }\">\n <i class=\"{{ currencyIcon }}\"></i>\n </div>\n <div class=\"currency-info-container\">\n <div class=\"currency-value-container\">\n <span class=\"currency-title\" [ngStyle]=\"{ 'color': currencyTitleColor }\">{{ currencyTitle }}</span>\n <strong class=\"currency-value\">{{ currencyValue }}</strong>\n </div>\n <div class=\"currency-status-container\">\n <span class=\"currency-status\" *ngIf=\"status !== undefined\"><i class=\"{{ status ? 'fas fa-caret-up' : 'fas fa-caret-down' }}\"></i></span>\n <span class=\"currency-percent\" *ngIf=\"currencyPercent\">%{{ currencyPercent }}</span>\n </div>\n </div>\n</div>\n\n","styles":["@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css);.widget-currency-container{display:flex;padding:15px;align-items:center;border-bottom-style:solid}.widget-currency-container .currency-icon-container{width:40px;height:40px;margin-right:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 2px 4px rgba(59,64,69,.1);transition:.3s}.widget-currency-container .currency-info-container{display:flex;align-items:center;justify-content:space-between;flex:1}.widget-currency-container .currency-info-container .currency-value-container{display:flex;flex-direction:column;flex:1}.widget-currency-container .currency-info-container .currency-value-container .currency-title{font-size:13px;font-weight:500;text-transform:uppercase}.widget-currency-container .currency-info-container .currency-status-container{display:flex;flex-direction:column;align-items:center}.widget-currency-container .currency-info-container .currency-status-container .currency-status{font-size:35px;line-height:21px;margin-bottom:3px}.widget-currency-container .currency-info-container .currency-status-container .currency-status i{line-height:0}.widget-currency-container .currency-info-container .currency-status-container .currency-percent{font-size:11px}.widget-currency-container.success .currency-percent,.widget-currency-container.success .currency-status{color:green!important}.widget-currency-container.danger .currency-percent,.widget-currency-container.danger .currency-status{color:red!important}.widget-currency-container:hover .currency-icon-container{box-shadow:0 4px 8px rgba(59,64,69,.2)}"]}]}],"members":{"status":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"currencyIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"currencyTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"currencyValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"currencyPercent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"customClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"bgColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"iconBgColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"iconColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"currencyTitleColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}}]}],"borderBottomWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"borderBottomColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"Ng2WidgetsService":"./lib/ng2-widgets.service","Ng2WidgetsComponent":"./lib/ng2-widgets.component","Ng2WidgetsModule":"./lib/ng2-widgets.module","WidgetCurrencyModule":"./lib/widgets/widget-currency/widget-currency.module","WidgetCurrencyComponent":"./lib/widgets/widget-currency/widget-currency.component"},"importAs":"ng2-widgets"}