UNPKG

ng2-widgets

Version:

Angular Widgets includes a variety of components that you can easily use in your applications.

175 lines (166 loc) 9.82 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) : typeof define === 'function' && define.amd ? define('ng2-widgets', ['exports', '@angular/core', '@angular/common'], factory) : (global = global || self, factory(global['ng2-widgets'] = {}, global.ng.core, global.ng.common)); }(this, function (exports, core, common) { 'use strict'; /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var Ng2WidgetsService = /** @class */ (function () { function Ng2WidgetsService() { } Ng2WidgetsService.decorators = [ { type: core.Injectable, args: [{ providedIn: 'root' },] } ]; /** @nocollapse */ Ng2WidgetsService.ctorParameters = function () { return []; }; /** @nocollapse */ Ng2WidgetsService.ngInjectableDef = core.ɵɵdefineInjectable({ factory: function Ng2WidgetsService_Factory() { return new Ng2WidgetsService(); }, token: Ng2WidgetsService, providedIn: "root" }); return Ng2WidgetsService; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var Ng2WidgetsComponent = /** @class */ (function () { function Ng2WidgetsComponent() { } /** * @return {?} */ Ng2WidgetsComponent.prototype.ngOnInit = /** * @return {?} */ function () { }; Ng2WidgetsComponent.decorators = [ { type: core.Component, args: [{ 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);"] }] } ]; /** @nocollapse */ Ng2WidgetsComponent.ctorParameters = function () { return []; }; return Ng2WidgetsComponent; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var Ng2WidgetsModule = /** @class */ (function () { function Ng2WidgetsModule() { } Ng2WidgetsModule.decorators = [ { type: core.NgModule, args: [{ declarations: [Ng2WidgetsComponent], imports: [], exports: [Ng2WidgetsComponent] },] } ]; return Ng2WidgetsModule; }()); /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var WidgetCurrencyComponent = /** @class */ (function () { function WidgetCurrencyComponent() { this.bgColor = '#e8e9c9'; this.textColor = '#3e3e3c'; this.iconBgColor = '#44524b'; this.iconColor = '#ffffff'; this.currencyTitleColor = '#44524b'; this.borderBottomWidth = '3px'; this.borderBottomColor = '#9da09f'; } /** * @return {?} */ WidgetCurrencyComponent.prototype.ngOnInit = /** * @return {?} */ function () { }; WidgetCurrencyComponent.decorators = [ { type: core.Component, args: [{ 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)}"] }] } ]; /** @nocollapse */ WidgetCurrencyComponent.ctorParameters = function () { return []; }; WidgetCurrencyComponent.propDecorators = { status: [{ type: core.Input }], currencyIcon: [{ type: core.Input }], currencyTitle: [{ type: core.Input }], currencyValue: [{ type: core.Input }], currencyPercent: [{ type: core.Input }], customClass: [{ type: core.Input }], bgColor: [{ type: core.Input }], textColor: [{ type: core.Input }], iconBgColor: [{ type: core.Input }], iconColor: [{ type: core.Input }], currencyTitleColor: [{ type: core.Input }], borderBottomWidth: [{ type: core.Input }], borderBottomColor: [{ type: core.Input }] }; return WidgetCurrencyComponent; }()); if (false) { /** @type {?} */ WidgetCurrencyComponent.prototype.status; /** @type {?} */ WidgetCurrencyComponent.prototype.currencyIcon; /** @type {?} */ WidgetCurrencyComponent.prototype.currencyTitle; /** @type {?} */ WidgetCurrencyComponent.prototype.currencyValue; /** @type {?} */ WidgetCurrencyComponent.prototype.currencyPercent; /** @type {?} */ WidgetCurrencyComponent.prototype.customClass; /** @type {?} */ WidgetCurrencyComponent.prototype.bgColor; /** @type {?} */ WidgetCurrencyComponent.prototype.textColor; /** @type {?} */ WidgetCurrencyComponent.prototype.iconBgColor; /** @type {?} */ WidgetCurrencyComponent.prototype.iconColor; /** @type {?} */ WidgetCurrencyComponent.prototype.currencyTitleColor; /** @type {?} */ WidgetCurrencyComponent.prototype.borderBottomWidth; /** @type {?} */ WidgetCurrencyComponent.prototype.borderBottomColor; } /** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ var WidgetCurrencyModule = /** @class */ (function () { function WidgetCurrencyModule() { } WidgetCurrencyModule.decorators = [ { type: core.NgModule, args: [{ declarations: [WidgetCurrencyComponent], imports: [ common.CommonModule ], exports: [WidgetCurrencyComponent] },] } ]; return WidgetCurrencyModule; }()); exports.Ng2WidgetsComponent = Ng2WidgetsComponent; exports.Ng2WidgetsModule = Ng2WidgetsModule; exports.Ng2WidgetsService = Ng2WidgetsService; exports.WidgetCurrencyComponent = WidgetCurrencyComponent; exports.WidgetCurrencyModule = WidgetCurrencyModule; Object.defineProperty(exports, '__esModule', { value: true }); })); //# sourceMappingURL=ng2-widgets.umd.js.map