@crediblefinance/credible-ui
Version:
Credible's standard UI library
34 lines • 9.68 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CfCardComponent {
stat = '';
subtitle = '';
heading = '';
type = 'large';
theme = 'dark';
fullWidth = false;
fullHeight = false;
constructor() { }
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfCardComponent, selector: "cf-card", inputs: { stat: "stat", subtitle: "subtitle", heading: "heading", type: "type", theme: "theme", fullWidth: "fullWidth", fullHeight: "fullHeight" }, ngImport: i0, template: "<div class=\"container-fluid cf-card-large\" *ngIf=\"type === 'large'\" [ngClass]=\"theme\">\n <div class=\"row\">\n <span class=\"stat\">{{ stat }}</span>\n </div>\n <div class=\"row\">\n <span class=\"subtitle\">{{ subtitle }}</span>\n </div>\n <div class=\"row\">\n <span class=\"heading\">{{ heading }}</span>\n </div>\n</div>\n\n<div class=\"container-fluid cf-card-compact\" *ngIf=\"type === 'compact'\" [ngClass]=\"theme\">\n <div class=\"row\">\n <span class=\"stat\">{{ stat }}</span>\n </div>\n <div class=\"row\">\n <span class=\"subtitle\">{{ subtitle }}</span>\n </div>\n <div class=\"row\">\n <span class=\"heading\">{{ heading }}</span>\n </div>\n</div>\n\n<div class=\"container-fluid cf-card-large\" *ngIf=\"type === 'empty'\" [ngClass]=\"theme\"\n [ngStyle]=\"{'width': fullWidth ? '100%' : null, 'height': fullHeight ? '100%' : null}\">\n <ng-content> </ng-content>\n</div>", styles: [".cf-card-large{display:grid;padding:1rem;border-radius:9px;height:max-content;display:block}.cf-card-large .stat{font-size:2rem;text-align:center}.cf-card-large .subtitle{font-size:1.2rem;margin-top:.8rem;text-align:center}.cf-card-large .heading{font-size:.8rem;margin-top:1rem;text-align:center}.cf-card-large.dark{background:#1D1E22;box-shadow:0 1px 9px -6px gray}.cf-card-large.dark .stat{color:#fff}.cf-card-large.dark .subtitle,.cf-card-large.dark .heading{color:gray}.cf-card-large.light{background:white;box-shadow:0 1px 9px -6px gray}.cf-card-large.light .stat{color:#000}.cf-card-large.light .subtitle{color:gray}.cf-card-large.light .heading{color:#000}.cf-card-compact{display:grid;border-radius:9px;padding:1rem;box-shadow:0 1px 9px -6px gray;background:#1D1E22}.cf-card-compact .stat{font-size:1.5rem;color:#fff;text-align:center}.cf-card-compact .subtitle{font-size:1rem;margin-top:.3rem;text-align:center}.cf-card-compact .heading{font-size:.8rem;margin-top:.3rem;text-align:center}.cf-card-compact.dark{background:#1D1E22;box-shadow:0 1px 9px -6px gray}.cf-card-compact.dark .stat{color:#fff}.cf-card-compact.dark .subtitle,.cf-card-compact.dark .heading{color:gray}.cf-card-compact.light{background:white;box-shadow:0 1px 9px -6px gray}.cf-card-compact.light .stat{color:#000}.cf-card-compact.light .subtitle{color:gray}.cf-card-compact.light .heading{color:#000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCardComponent, decorators: [{
type: Component,
args: [{ selector: 'cf-card', template: "<div class=\"container-fluid cf-card-large\" *ngIf=\"type === 'large'\" [ngClass]=\"theme\">\n <div class=\"row\">\n <span class=\"stat\">{{ stat }}</span>\n </div>\n <div class=\"row\">\n <span class=\"subtitle\">{{ subtitle }}</span>\n </div>\n <div class=\"row\">\n <span class=\"heading\">{{ heading }}</span>\n </div>\n</div>\n\n<div class=\"container-fluid cf-card-compact\" *ngIf=\"type === 'compact'\" [ngClass]=\"theme\">\n <div class=\"row\">\n <span class=\"stat\">{{ stat }}</span>\n </div>\n <div class=\"row\">\n <span class=\"subtitle\">{{ subtitle }}</span>\n </div>\n <div class=\"row\">\n <span class=\"heading\">{{ heading }}</span>\n </div>\n</div>\n\n<div class=\"container-fluid cf-card-large\" *ngIf=\"type === 'empty'\" [ngClass]=\"theme\"\n [ngStyle]=\"{'width': fullWidth ? '100%' : null, 'height': fullHeight ? '100%' : null}\">\n <ng-content> </ng-content>\n</div>", styles: [".cf-card-large{display:grid;padding:1rem;border-radius:9px;height:max-content;display:block}.cf-card-large .stat{font-size:2rem;text-align:center}.cf-card-large .subtitle{font-size:1.2rem;margin-top:.8rem;text-align:center}.cf-card-large .heading{font-size:.8rem;margin-top:1rem;text-align:center}.cf-card-large.dark{background:#1D1E22;box-shadow:0 1px 9px -6px gray}.cf-card-large.dark .stat{color:#fff}.cf-card-large.dark .subtitle,.cf-card-large.dark .heading{color:gray}.cf-card-large.light{background:white;box-shadow:0 1px 9px -6px gray}.cf-card-large.light .stat{color:#000}.cf-card-large.light .subtitle{color:gray}.cf-card-large.light .heading{color:#000}.cf-card-compact{display:grid;border-radius:9px;padding:1rem;box-shadow:0 1px 9px -6px gray;background:#1D1E22}.cf-card-compact .stat{font-size:1.5rem;color:#fff;text-align:center}.cf-card-compact .subtitle{font-size:1rem;margin-top:.3rem;text-align:center}.cf-card-compact .heading{font-size:.8rem;margin-top:.3rem;text-align:center}.cf-card-compact.dark{background:#1D1E22;box-shadow:0 1px 9px -6px gray}.cf-card-compact.dark .stat{color:#fff}.cf-card-compact.dark .subtitle,.cf-card-compact.dark .heading{color:gray}.cf-card-compact.light{background:white;box-shadow:0 1px 9px -6px gray}.cf-card-compact.light .stat{color:#000}.cf-card-compact.light .subtitle{color:gray}.cf-card-compact.light .heading{color:#000}\n"] }]
}], ctorParameters: () => [], propDecorators: { stat: [{
type: Input
}], subtitle: [{
type: Input
}], heading: [{
type: Input
}], type: [{
type: Input
}], theme: [{
type: Input
}], fullWidth: [{
type: Input
}], fullHeight: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2YtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLWNhcmQvY2YtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLWNhcmQvY2YtY2FyZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsU0FBUyxFQUFFLEtBQUssRUFDbkIsTUFBTSxlQUFlLENBQUM7OztBQVF2QixNQUFNLE9BQU8sZUFBZTtJQUNmLElBQUksR0FBVyxFQUFFLENBQUM7SUFDbEIsUUFBUSxHQUFXLEVBQUUsQ0FBQztJQUN0QixPQUFPLEdBQVcsRUFBRSxDQUFDO0lBQ3JCLElBQUksR0FBVyxPQUFPLENBQUM7SUFDdkIsS0FBSyxHQUFXLE1BQU0sQ0FBQztJQUN2QixTQUFTLEdBQVksS0FBSyxDQUFDO0lBQzNCLFVBQVUsR0FBWSxLQUFLLENBQUM7SUFFckMsZ0JBQWdCLENBQUM7dUdBVFIsZUFBZTsyRkFBZixlQUFlLG1NQ1Y1QixrOUJBMkJNOzsyRkRqQk8sZUFBZTtrQkFOM0IsU0FBUzsrQkFFSSxTQUFTO3dEQUtWLElBQUk7c0JBQVosS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LCBJbnB1dFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgICBzZWxlY3RvcjogJ2NmLWNhcmQnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9jZi1jYXJkLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9jZi1jYXJkLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ2ZDYXJkQ29tcG9uZW50IHtcbiAgICBASW5wdXQoKSBzdGF0OiBzdHJpbmcgPSAnJztcbiAgICBASW5wdXQoKSBzdWJ0aXRsZTogc3RyaW5nID0gJyc7XG4gICAgQElucHV0KCkgaGVhZGluZzogc3RyaW5nID0gJyc7XG4gICAgQElucHV0KCkgdHlwZTogc3RyaW5nID0gJ2xhcmdlJztcbiAgICBASW5wdXQoKSB0aGVtZTogc3RyaW5nID0gJ2RhcmsnO1xuICAgIEBJbnB1dCgpIGZ1bGxXaWR0aDogYm9vbGVhbiA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIGZ1bGxIZWlnaHQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIGNvbnN0cnVjdG9yKCkgeyB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY29udGFpbmVyLWZsdWlkIGNmLWNhcmQtbGFyZ2VcIiAqbmdJZj1cInR5cGUgPT09ICdsYXJnZSdcIiBbbmdDbGFzc109XCJ0aGVtZVwiPlxuICAgIDxkaXYgY2xhc3M9XCJyb3dcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzdGF0XCI+e3sgc3RhdCB9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwicm93XCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwic3VidGl0bGVcIj57eyBzdWJ0aXRsZSB9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwicm93XCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiaGVhZGluZ1wiPnt7IGhlYWRpbmcgfX08L3NwYW4+XG4gICAgPC9kaXY+XG48L2Rpdj5cblxuPGRpdiBjbGFzcz1cImNvbnRhaW5lci1mbHVpZCBjZi1jYXJkLWNvbXBhY3RcIiAqbmdJZj1cInR5cGUgPT09ICdjb21wYWN0J1wiIFtuZ0NsYXNzXT1cInRoZW1lXCI+XG4gICAgPGRpdiBjbGFzcz1cInJvd1wiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInN0YXRcIj57eyBzdGF0IH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJyb3dcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzdWJ0aXRsZVwiPnt7IHN1YnRpdGxlIH19PC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJyb3dcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJoZWFkaW5nXCI+e3sgaGVhZGluZyB9fTwvc3Bhbj5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwiY29udGFpbmVyLWZsdWlkIGNmLWNhcmQtbGFyZ2VcIiAqbmdJZj1cInR5cGUgPT09ICdlbXB0eSdcIiBbbmdDbGFzc109XCJ0aGVtZVwiXG4gICAgW25nU3R5bGVdPVwieyd3aWR0aCc6IGZ1bGxXaWR0aCA/ICcxMDAlJyA6IG51bGwsICdoZWlnaHQnOiBmdWxsSGVpZ2h0ID8gJzEwMCUnIDogbnVsbH1cIj5cbiAgICA8bmctY29udGVudD4gPC9uZy1jb250ZW50PlxuPC9kaXY+Il19