@coreui/angular
Version:
CoreUI Components Library for Angular
71 lines • 12.8 kB
JavaScript
import { booleanAttribute, Component, computed, contentChildren, effect, input } from '@angular/core';
import { CardBodyComponent, CardComponent } from '../../card';
import { TemplateIdDirective } from '../../shared';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
export class WidgetStatCComponent extends CardComponent {
constructor() {
super();
/**
* Icon for your component.
* @type string
*/
this.icon = input();
/**
* Title of the widget to display
* @type string
*/
this.title = input();
/**
* Value for your widget to display
* @type string|number
*/
this.value = input();
/**
* Invert colors from their default dark shade.
* @type boolean
*/
this.inverse = input(false, { transform: booleanAttribute });
this.templates = {};
this.contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
this.contentTemplatesEffect = effect(() => {
this.contentTemplates().forEach((child) => {
this.templates[child.id] = child.templateRef;
});
});
this.hostExtendedClass = computed(() => {
return { ...this.hostClasses(), 'text-white': this.inverse() };
});
this.titleClasses = computed(() => {
const inverse = this.inverse();
return {
'text-body-secondary': !inverse,
'text-white': inverse,
'text-opacity-75': inverse,
[`text-${this.textColor()}`]: !!this.textColor()
};
});
this.valueClasses = computed(() => {
return {
'fs-4': !this.textColor(),
'fw-semibold': true,
...this.titleClasses(),
'text-opacity-75': false
};
});
this.iconClasses = computed(() => {
return {
'mb-4': !this.textColor(),
'text-end': true,
...this.titleClasses()
};
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WidgetStatCComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: WidgetStatCComponent, isStandalone: true, selector: "c-widget-stat-c", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, inverse: { classPropertyName: "inverse", publicName: "inverse", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostExtendedClass()" } }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], exportAs: ["cWidgetStatC"], usesInheritance: true, ngImport: i0, template: "<c-card-body>\n @if (icon() || templates?.['widgetIconTemplate']) {\n <div [ngClass]=\"iconClasses()\">\n <ng-container *ngTemplateOutlet=\"templates?.['widgetIconTemplate'] || defaultWidgetIconTemplate\" />\n </div>\n }\n @if (!!value()) {\n <div [ngClass]=\"valueClasses()\">\n {{ value() }}\n </div>\n }\n @if (!!title()) {\n <div [ngClass]=\"titleClasses()\">\n {{ title() }}\n </div>\n }\n @if (templates?.['widgetProgressTemplate']) {\n <ng-container *ngTemplateOutlet=\"templates?.['widgetProgressTemplate'] || defaultWidgetProgressTemplate\" />\n }\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n {{ icon() }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n <ng-content />\n</ng-template>\n", dependencies: [{ kind: "component", type: CardBodyComponent, selector: "c-card-body, [c-card-body]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WidgetStatCComponent, decorators: [{
type: Component,
args: [{ selector: 'c-widget-stat-c', exportAs: 'cWidgetStatC', standalone: true, imports: [CardBodyComponent, NgClass, NgTemplateOutlet], host: { '[class]': 'hostExtendedClass()' }, template: "<c-card-body>\n @if (icon() || templates?.['widgetIconTemplate']) {\n <div [ngClass]=\"iconClasses()\">\n <ng-container *ngTemplateOutlet=\"templates?.['widgetIconTemplate'] || defaultWidgetIconTemplate\" />\n </div>\n }\n @if (!!value()) {\n <div [ngClass]=\"valueClasses()\">\n {{ value() }}\n </div>\n }\n @if (!!title()) {\n <div [ngClass]=\"titleClasses()\">\n {{ title() }}\n </div>\n }\n @if (templates?.['widgetProgressTemplate']) {\n <ng-container *ngTemplateOutlet=\"templates?.['widgetProgressTemplate'] || defaultWidgetProgressTemplate\" />\n }\n</c-card-body>\n\n<ng-template #defaultWidgetIconTemplate>\n {{ icon() }}\n</ng-template>\n\n<ng-template #defaultWidgetProgressTemplate>\n <ng-content />\n</ng-template>\n" }]
}], ctorParameters: () => [] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2lkZ2V0LXN0YXQtYy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JldWktYW5ndWxhci9zcmMvbGliL3dpZGdldC93aWRnZXQtc3RhdC1jL3dpZGdldC1zdGF0LWMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZXVpLWFuZ3VsYXIvc3JjL2xpYi93aWRnZXQvd2lkZ2V0LXN0YXQtYy93aWRnZXQtc3RhdC1jLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLGVBQWUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFlLE1BQU0sZUFBZSxDQUFDO0FBRW5ILE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxhQUFhLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFDOUQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ25ELE9BQU8sRUFBRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFVNUQsTUFBTSxPQUFPLG9CQUFxQixTQUFRLGFBQWE7SUFDckQ7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQUdWOzs7V0FHRztRQUNNLFNBQUksR0FBRyxLQUFLLEVBQVUsQ0FBQztRQUVoQzs7O1dBR0c7UUFDTSxVQUFLLEdBQUcsS0FBSyxFQUFVLENBQUM7UUFFakM7OztXQUdHO1FBQ00sVUFBSyxHQUFHLEtBQUssRUFBbUIsQ0FBQztRQUUxQzs7O1dBR0c7UUFDTSxZQUFPLEdBQUcsS0FBSyxDQUFDLEtBQUssRUFBRSxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxDQUFDLENBQUM7UUFFakUsY0FBUyxHQUFxQyxFQUFFLENBQUM7UUFDeEMscUJBQWdCLEdBQUcsZUFBZSxDQUFDLG1CQUFtQixFQUFFLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7UUFFL0UsMkJBQXNCLEdBQUcsTUFBTSxDQUFDLEdBQUcsRUFBRTtZQUM1QyxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUEwQixFQUFFLEVBQUU7Z0JBQzdELElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQUM7WUFDL0MsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztRQUVNLHNCQUFpQixHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDekMsT0FBTyxFQUFFLEdBQUcsSUFBSSxDQUFDLFdBQVcsRUFBRSxFQUFFLFlBQVksRUFBRSxJQUFJLENBQUMsT0FBTyxFQUFFLEVBQTZCLENBQUM7UUFDNUYsQ0FBQyxDQUFDLENBQUM7UUFFTSxpQkFBWSxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7WUFDcEMsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQy9CLE9BQU87Z0JBQ0wscUJBQXFCLEVBQUUsQ0FBQyxPQUFPO2dCQUMvQixZQUFZLEVBQUUsT0FBTztnQkFDckIsaUJBQWlCLEVBQUUsT0FBTztnQkFDMUIsQ0FBQyxRQUFRLElBQUksQ0FBQyxTQUFTLEVBQUUsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7YUFDdEIsQ0FBQztRQUMvQixDQUFDLENBQUMsQ0FBQztRQUVNLGlCQUFZLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUNwQyxPQUFPO2dCQUNMLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUU7Z0JBQ3pCLGFBQWEsRUFBRSxJQUFJO2dCQUNuQixHQUFHLElBQUksQ0FBQyxZQUFZLEVBQUU7Z0JBQ3RCLGlCQUFpQixFQUFFLEtBQUs7YUFDRSxDQUFDO1FBQy9CLENBQUMsQ0FBQyxDQUFDO1FBRU0sZ0JBQVcsR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFO1lBQ25DLE9BQU87Z0JBQ0wsTUFBTSxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRTtnQkFDekIsVUFBVSxFQUFFLElBQUk7Z0JBQ2hCLEdBQUcsSUFBSSxDQUFDLFlBQVksRUFBRTthQUNJLENBQUM7UUFDL0IsQ0FBQyxDQUFDLENBQUM7SUFoRUgsQ0FBQzsrR0FIVSxvQkFBb0I7bUdBQXBCLG9CQUFvQixxcEJBOEJhLG1CQUFtQixtSEM1Q2pFLDB3QkE0QkEsNENEakJZLGlCQUFpQix1RUFBRSxPQUFPLG9GQUFFLGdCQUFnQjs7NEZBRzNDLG9CQUFvQjtrQkFSaEMsU0FBUzsrQkFDRSxpQkFBaUIsWUFFakIsY0FBYyxjQUNaLElBQUksV0FDUCxDQUFDLGlCQUFpQixFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsQ0FBQyxRQUNqRCxFQUFFLFNBQVMsRUFBRSxxQkFBcUIsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGJvb2xlYW5BdHRyaWJ1dGUsIENvbXBvbmVudCwgY29tcHV0ZWQsIGNvbnRlbnRDaGlsZHJlbiwgZWZmZWN0LCBpbnB1dCwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQ2FyZEJvZHlDb21wb25lbnQsIENhcmRDb21wb25lbnQgfSBmcm9tICcuLi8uLi9jYXJkJztcbmltcG9ydCB7IFRlbXBsYXRlSWREaXJlY3RpdmUgfSBmcm9tICcuLi8uLi9zaGFyZWQnO1xuaW1wb3J0IHsgTmdDbGFzcywgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Mtd2lkZ2V0LXN0YXQtYycsXG4gIHRlbXBsYXRlVXJsOiAnLi93aWRnZXQtc3RhdC1jLmNvbXBvbmVudC5odG1sJyxcbiAgZXhwb3J0QXM6ICdjV2lkZ2V0U3RhdEMnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ2FyZEJvZHlDb21wb25lbnQsIE5nQ2xhc3MsIE5nVGVtcGxhdGVPdXRsZXRdLFxuICBob3N0OiB7ICdbY2xhc3NdJzogJ2hvc3RFeHRlbmRlZENsYXNzKCknIH1cbn0pXG5leHBvcnQgY2xhc3MgV2lkZ2V0U3RhdENDb21wb25lbnQgZXh0ZW5kcyBDYXJkQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IoKSB7XG4gICAgc3VwZXIoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBJY29uIGZvciB5b3VyIGNvbXBvbmVudC5cbiAgICogQHR5cGUgc3RyaW5nXG4gICAqL1xuICByZWFkb25seSBpY29uID0gaW5wdXQ8c3RyaW5nPigpO1xuXG4gIC8qKlxuICAgKiBUaXRsZSBvZiB0aGUgd2lkZ2V0IHRvIGRpc3BsYXlcbiAgICogQHR5cGUgc3RyaW5nXG4gICAqL1xuICByZWFkb25seSB0aXRsZSA9IGlucHV0PHN0cmluZz4oKTtcblxuICAvKipcbiAgICogVmFsdWUgZm9yIHlvdXIgd2lkZ2V0IHRvIGRpc3BsYXlcbiAgICogQHR5cGUgc3RyaW5nfG51bWJlclxuICAgKi9cbiAgcmVhZG9ubHkgdmFsdWUgPSBpbnB1dDxzdHJpbmcgfCBudW1iZXI+KCk7XG5cbiAgLyoqXG4gICAqIEludmVydCBjb2xvcnMgZnJvbSB0aGVpciBkZWZhdWx0IGRhcmsgc2hhZGUuXG4gICAqIEB0eXBlIGJvb2xlYW5cbiAgICovXG4gIHJlYWRvbmx5IGludmVyc2UgPSBpbnB1dChmYWxzZSwgeyB0cmFuc2Zvcm06IGJvb2xlYW5BdHRyaWJ1dGUgfSk7XG5cbiAgdGVtcGxhdGVzOiBSZWNvcmQ8c3RyaW5nLCBUZW1wbGF0ZVJlZjxhbnk+PiA9IHt9O1xuICByZWFkb25seSBjb250ZW50VGVtcGxhdGVzID0gY29udGVudENoaWxkcmVuKFRlbXBsYXRlSWREaXJlY3RpdmUsIHsgZGVzY2VuZGFudHM6IHRydWUgfSk7XG5cbiAgcmVhZG9ubHkgY29udGVudFRlbXBsYXRlc0VmZmVjdCA9IGVmZmVjdCgoKSA9PiB7XG4gICAgdGhpcy5jb250ZW50VGVtcGxhdGVzKCkuZm9yRWFjaCgoY2hpbGQ6IFRlbXBsYXRlSWREaXJlY3RpdmUpID0+IHtcbiAgICAgIHRoaXMudGVtcGxhdGVzW2NoaWxkLmlkXSA9IGNoaWxkLnRlbXBsYXRlUmVmO1xuICAgIH0pO1xuICB9KTtcblxuICByZWFkb25seSBob3N0RXh0ZW5kZWRDbGFzcyA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICByZXR1cm4geyAuLi50aGlzLmhvc3RDbGFzc2VzKCksICd0ZXh0LXdoaXRlJzogdGhpcy5pbnZlcnNlKCkgfSBhcyBSZWNvcmQ8c3RyaW5nLCBib29sZWFuPjtcbiAgfSk7XG5cbiAgcmVhZG9ubHkgdGl0bGVDbGFzc2VzID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIGNvbnN0IGludmVyc2UgPSB0aGlzLmludmVyc2UoKTtcbiAgICByZXR1cm4ge1xuICAgICAgJ3RleHQtYm9keS1zZWNvbmRhcnknOiAhaW52ZXJzZSxcbiAgICAgICd0ZXh0LXdoaXRlJzogaW52ZXJzZSxcbiAgICAgICd0ZXh0LW9wYWNpdHktNzUnOiBpbnZlcnNlLFxuICAgICAgW2B0ZXh0LSR7dGhpcy50ZXh0Q29sb3IoKX1gXTogISF0aGlzLnRleHRDb2xvcigpXG4gICAgfSBhcyBSZWNvcmQ8c3RyaW5nLCBib29sZWFuPjtcbiAgfSk7XG5cbiAgcmVhZG9ubHkgdmFsdWVDbGFzc2VzID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIHJldHVybiB7XG4gICAgICAnZnMtNCc6ICF0aGlzLnRleHRDb2xvcigpLFxuICAgICAgJ2Z3LXNlbWlib2xkJzogdHJ1ZSxcbiAgICAgIC4uLnRoaXMudGl0bGVDbGFzc2VzKCksXG4gICAgICAndGV4dC1vcGFjaXR5LTc1JzogZmFsc2VcbiAgICB9IGFzIFJlY29yZDxzdHJpbmcsIGJvb2xlYW4+O1xuICB9KTtcblxuICByZWFkb25seSBpY29uQ2xhc3NlcyA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICByZXR1cm4ge1xuICAgICAgJ21iLTQnOiAhdGhpcy50ZXh0Q29sb3IoKSxcbiAgICAgICd0ZXh0LWVuZCc6IHRydWUsXG4gICAgICAuLi50aGlzLnRpdGxlQ2xhc3NlcygpXG4gICAgfSBhcyBSZWNvcmQ8c3RyaW5nLCBib29sZWFuPjtcbiAgfSk7XG59XG4iLCI8Yy1jYXJkLWJvZHk+XG4gIEBpZiAoaWNvbigpIHx8IHRlbXBsYXRlcz8uWyd3aWRnZXRJY29uVGVtcGxhdGUnXSkge1xuICAgIDxkaXYgW25nQ2xhc3NdPVwiaWNvbkNsYXNzZXMoKVwiPlxuICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRlbXBsYXRlcz8uWyd3aWRnZXRJY29uVGVtcGxhdGUnXSB8fCBkZWZhdWx0V2lkZ2V0SWNvblRlbXBsYXRlXCIgLz5cbiAgICA8L2Rpdj5cbiAgfVxuICBAaWYgKCEhdmFsdWUoKSkge1xuICAgIDxkaXYgW25nQ2xhc3NdPVwidmFsdWVDbGFzc2VzKClcIj5cbiAgICAgIHt7IHZhbHVlKCkgfX1cbiAgICA8L2Rpdj5cbiAgfVxuICBAaWYgKCEhdGl0bGUoKSkge1xuICAgIDxkaXYgW25nQ2xhc3NdPVwidGl0bGVDbGFzc2VzKClcIj5cbiAgICAgIHt7IHRpdGxlKCkgfX1cbiAgICA8L2Rpdj5cbiAgfVxuICBAaWYgKHRlbXBsYXRlcz8uWyd3aWRnZXRQcm9ncmVzc1RlbXBsYXRlJ10pIHtcbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVzPy5bJ3dpZGdldFByb2dyZXNzVGVtcGxhdGUnXSB8fCBkZWZhdWx0V2lkZ2V0UHJvZ3Jlc3NUZW1wbGF0ZVwiIC8+XG4gIH1cbjwvYy1jYXJkLWJvZHk+XG5cbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdFdpZGdldEljb25UZW1wbGF0ZT5cbiAge3sgaWNvbigpIH19XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2RlZmF1bHRXaWRnZXRQcm9ncmVzc1RlbXBsYXRlPlxuICA8bmctY29udGVudCAvPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==