@coreui/angular
Version:
CoreUI Components Library for Angular
55 lines • 11.8 kB
JavaScript
import { Component, computed, contentChildren, effect, input } from '@angular/core';
import { TemplateIdDirective } from '../../shared';
import { CardBodyComponent, CardComponent } from '../../card';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
export class WidgetStatAComponent extends CardComponent {
constructor() {
super(...arguments);
/**
* Sets the color context of the component to one of CoreUI’s themed colors.
* @type Colors
*/
// override readonly color = input<Colors>();
/**
* Title of the widget to display
* @type string
*/
this.title = input();
/**
* Value for your widget to display
* @type string
*/
this.value = input();
this.templates = {};
this.contentTemplates = contentChildren(TemplateIdDirective, { descendants: true });
this.contentTemplatesEffect = effect(() => {
this.contentTemplates().forEach((child) => {
this.templates[child.id] = child.templateRef;
});
});
this.hostClasses = computed(() => {
const color = this.color();
return {
card: true,
[`bg-${color}`]: !!color,
'text-white': !!color
};
});
}
get bodyClasses() {
return {
'pb-0': true,
'd-flex': true,
'justify-content-between': true,
'align-items-start': true
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WidgetStatAComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: WidgetStatAComponent, isStandalone: true, selector: "c-widget-stat-a", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "card" }, queries: [{ propertyName: "contentTemplates", predicate: TemplateIdDirective, descendants: true, isSignal: true }], exportAs: ["cWidgetStatA"], usesInheritance: true, ngImport: i0, template: "<ng-container>\n <c-card-body [ngClass]=\"bodyClasses\">\n <div>\n @if (!!value() || templates?.['widgetValueTemplate']) {\n <div class=\"fs-4 fw-semibold\">\n <ng-container *ngTemplateOutlet=\"templates?.['widgetValueTemplate'] || defaultWidgetValueTemplate\" />\n </div>\n }\n @if (!!title() || templates?.['widgetTitleTemplate']) {\n <div>\n <ng-container *ngTemplateOutlet=\"templates?.['widgetTitleTemplate'] || defaultWidgetTitleTemplate\" />\n </div>\n }\n </div>\n <ng-container *ngTemplateOutlet=\"templates?.['widgetActionTemplate'] || defaultWidgetActionTemplate\" />\n </c-card-body>\n <ng-container *ngTemplateOutlet=\"templates?.['widgetChartTemplate'] || defaultWidgetChartTemplate\" />\n</ng-container>\n\n<ng-template #defaultWidgetTitleTemplate>\n {{ title() }}\n</ng-template>\n\n<ng-template #defaultWidgetValueTemplate>\n {{ value() }}\n</ng-template>\n\n<ng-template #defaultWidgetChartTemplate>\n <ng-content select=\".chart-wrapper\" />\n</ng-template>\n\n<ng-template #defaultWidgetActionTemplate>\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: WidgetStatAComponent, decorators: [{
type: Component,
args: [{ selector: 'c-widget-stat-a', exportAs: 'cWidgetStatA', imports: [CardBodyComponent, NgClass, NgTemplateOutlet], standalone: true, host: { class: 'card', '[class]': 'hostClasses()' }, template: "<ng-container>\n <c-card-body [ngClass]=\"bodyClasses\">\n <div>\n @if (!!value() || templates?.['widgetValueTemplate']) {\n <div class=\"fs-4 fw-semibold\">\n <ng-container *ngTemplateOutlet=\"templates?.['widgetValueTemplate'] || defaultWidgetValueTemplate\" />\n </div>\n }\n @if (!!title() || templates?.['widgetTitleTemplate']) {\n <div>\n <ng-container *ngTemplateOutlet=\"templates?.['widgetTitleTemplate'] || defaultWidgetTitleTemplate\" />\n </div>\n }\n </div>\n <ng-container *ngTemplateOutlet=\"templates?.['widgetActionTemplate'] || defaultWidgetActionTemplate\" />\n </c-card-body>\n <ng-container *ngTemplateOutlet=\"templates?.['widgetChartTemplate'] || defaultWidgetChartTemplate\" />\n</ng-container>\n\n<ng-template #defaultWidgetTitleTemplate>\n {{ title() }}\n</ng-template>\n\n<ng-template #defaultWidgetValueTemplate>\n {{ value() }}\n</ng-template>\n\n<ng-template #defaultWidgetChartTemplate>\n <ng-content select=\".chart-wrapper\" />\n</ng-template>\n\n<ng-template #defaultWidgetActionTemplate>\n <ng-content />\n</ng-template>\n" }]
}] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2lkZ2V0LXN0YXQtYS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JldWktYW5ndWxhci9zcmMvbGliL3dpZGdldC93aWRnZXQtc3RhdC1hL3dpZGdldC1zdGF0LWEuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZXVpLWFuZ3VsYXIvc3JjL2xpYi93aWRnZXQvd2lkZ2V0LXN0YXQtYS93aWRnZXQtc3RhdC1hLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsUUFBUSxFQUFFLGVBQWUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUE0QixNQUFNLGVBQWUsQ0FBQztBQUc5RyxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDbkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLGFBQWEsRUFBRSxNQUFNLFlBQVksQ0FBQztBQUM5RCxPQUFPLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBVTVELE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxhQUFhO0lBUnZEOztRQVNFOzs7V0FHRztRQUNILDZDQUE2QztRQUU3Qzs7O1dBR0c7UUFDTSxVQUFLLEdBQW9DLEtBQUssRUFBRSxDQUFDO1FBRTFEOzs7V0FHRztRQUNNLFVBQUssR0FBb0MsS0FBSyxFQUFVLENBQUM7UUFFbEUsY0FBUyxHQUFxQyxFQUFFLENBQUM7UUFFeEMscUJBQWdCLEdBQUcsZUFBZSxDQUFDLG1CQUFtQixFQUFFLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxDQUFDLENBQUM7UUFFL0UsMkJBQXNCLEdBQUcsTUFBTSxDQUFDLEdBQUcsRUFBRTtZQUM1QyxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxLQUEwQixFQUFFLEVBQUU7Z0JBQzdELElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQUM7WUFDL0MsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztRQUVlLGdCQUFXLEdBQUcsUUFBUSxDQUFDLEdBQUcsRUFBRTtZQUM1QyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDM0IsT0FBTztnQkFDTCxJQUFJLEVBQUUsSUFBSTtnQkFDVixDQUFDLE1BQU0sS0FBSyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsS0FBSztnQkFDeEIsWUFBWSxFQUFFLENBQUMsQ0FBQyxLQUFLO2FBQ0ssQ0FBQztRQUMvQixDQUFDLENBQUMsQ0FBQztLQVVKO0lBUkMsSUFBSSxXQUFXO1FBQ2IsT0FBTztZQUNMLE1BQU0sRUFBRSxJQUFJO1lBQ1osUUFBUSxFQUFFLElBQUk7WUFDZCx5QkFBeUIsRUFBRSxJQUFJO1lBQy9CLG1CQUFtQixFQUFFLElBQUk7U0FDMUIsQ0FBQztJQUNKLENBQUM7K0dBN0NVLG9CQUFvQjttR0FBcEIsb0JBQW9CLG9iQXFCYSxtQkFBbUIsbUhDcENqRSxxbkNBa0NBLDRDRHZCWSxpQkFBaUIsdUVBQUUsT0FBTyxvRkFBRSxnQkFBZ0I7OzRGQUkzQyxvQkFBb0I7a0JBUmhDLFNBQVM7K0JBQ0UsaUJBQWlCLFlBRWpCLGNBQWMsV0FDZixDQUFDLGlCQUFpQixFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsQ0FBQyxjQUMzQyxJQUFJLFFBQ1YsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxlQUFlLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIGNvbXB1dGVkLCBjb250ZW50Q2hpbGRyZW4sIGVmZmVjdCwgaW5wdXQsIElucHV0U2lnbmFsLCBUZW1wbGF0ZVJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBDb2xvcnMgfSBmcm9tICcuLi8uLi9jb3JldWkudHlwZXMnO1xuaW1wb3J0IHsgVGVtcGxhdGVJZERpcmVjdGl2ZSB9IGZyb20gJy4uLy4uL3NoYXJlZCc7XG5pbXBvcnQgeyBDYXJkQm9keUNvbXBvbmVudCwgQ2FyZENvbXBvbmVudCB9IGZyb20gJy4uLy4uL2NhcmQnO1xuaW1wb3J0IHsgTmdDbGFzcywgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Mtd2lkZ2V0LXN0YXQtYScsXG4gIHRlbXBsYXRlVXJsOiAnLi93aWRnZXQtc3RhdC1hLmNvbXBvbmVudC5odG1sJyxcbiAgZXhwb3J0QXM6ICdjV2lkZ2V0U3RhdEEnLFxuICBpbXBvcnRzOiBbQ2FyZEJvZHlDb21wb25lbnQsIE5nQ2xhc3MsIE5nVGVtcGxhdGVPdXRsZXRdLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBob3N0OiB7IGNsYXNzOiAnY2FyZCcsICdbY2xhc3NdJzogJ2hvc3RDbGFzc2VzKCknIH1cbn0pXG5leHBvcnQgY2xhc3MgV2lkZ2V0U3RhdEFDb21wb25lbnQgZXh0ZW5kcyBDYXJkQ29tcG9uZW50IHtcbiAgLyoqXG4gICAqIFNldHMgdGhlIGNvbG9yIGNvbnRleHQgb2YgdGhlIGNvbXBvbmVudCB0byBvbmUgb2YgQ29yZVVJ4oCZcyB0aGVtZWQgY29sb3JzLlxuICAgKiBAdHlwZSBDb2xvcnNcbiAgICovXG4gIC8vIG92ZXJyaWRlIHJlYWRvbmx5IGNvbG9yID0gaW5wdXQ8Q29sb3JzPigpO1xuXG4gIC8qKlxuICAgKiBUaXRsZSBvZiB0aGUgd2lkZ2V0IHRvIGRpc3BsYXlcbiAgICogQHR5cGUgc3RyaW5nXG4gICAqL1xuICByZWFkb25seSB0aXRsZTogSW5wdXRTaWduYWw8c3RyaW5nIHwgdW5kZWZpbmVkPiA9IGlucHV0KCk7XG5cbiAgLyoqXG4gICAqIFZhbHVlIGZvciB5b3VyIHdpZGdldCB0byBkaXNwbGF5XG4gICAqIEB0eXBlIHN0cmluZ1xuICAgKi9cbiAgcmVhZG9ubHkgdmFsdWU6IElucHV0U2lnbmFsPHN0cmluZyB8IHVuZGVmaW5lZD4gPSBpbnB1dDxzdHJpbmc+KCk7XG5cbiAgdGVtcGxhdGVzOiBSZWNvcmQ8c3RyaW5nLCBUZW1wbGF0ZVJlZjxhbnk+PiA9IHt9O1xuXG4gIHJlYWRvbmx5IGNvbnRlbnRUZW1wbGF0ZXMgPSBjb250ZW50Q2hpbGRyZW4oVGVtcGxhdGVJZERpcmVjdGl2ZSwgeyBkZXNjZW5kYW50czogdHJ1ZSB9KTtcblxuICByZWFkb25seSBjb250ZW50VGVtcGxhdGVzRWZmZWN0ID0gZWZmZWN0KCgpID0+IHtcbiAgICB0aGlzLmNvbnRlbnRUZW1wbGF0ZXMoKS5mb3JFYWNoKChjaGlsZDogVGVtcGxhdGVJZERpcmVjdGl2ZSkgPT4ge1xuICAgICAgdGhpcy50ZW1wbGF0ZXNbY2hpbGQuaWRdID0gY2hpbGQudGVtcGxhdGVSZWY7XG4gICAgfSk7XG4gIH0pO1xuXG4gIG92ZXJyaWRlIHJlYWRvbmx5IGhvc3RDbGFzc2VzID0gY29tcHV0ZWQoKCkgPT4ge1xuICAgIGNvbnN0IGNvbG9yID0gdGhpcy5jb2xvcigpO1xuICAgIHJldHVybiB7XG4gICAgICBjYXJkOiB0cnVlLFxuICAgICAgW2BiZy0ke2NvbG9yfWBdOiAhIWNvbG9yLFxuICAgICAgJ3RleHQtd2hpdGUnOiAhIWNvbG9yXG4gICAgfSBhcyBSZWNvcmQ8c3RyaW5nLCBib29sZWFuPjtcbiAgfSk7XG5cbiAgZ2V0IGJvZHlDbGFzc2VzKCkge1xuICAgIHJldHVybiB7XG4gICAgICAncGItMCc6IHRydWUsXG4gICAgICAnZC1mbGV4JzogdHJ1ZSxcbiAgICAgICdqdXN0aWZ5LWNvbnRlbnQtYmV0d2Vlbic6IHRydWUsXG4gICAgICAnYWxpZ24taXRlbXMtc3RhcnQnOiB0cnVlXG4gICAgfTtcbiAgfVxufVxuIiwiPG5nLWNvbnRhaW5lcj5cbiAgPGMtY2FyZC1ib2R5IFtuZ0NsYXNzXT1cImJvZHlDbGFzc2VzXCI+XG4gICAgPGRpdj5cbiAgICAgIEBpZiAoISF2YWx1ZSgpIHx8IHRlbXBsYXRlcz8uWyd3aWRnZXRWYWx1ZVRlbXBsYXRlJ10pIHtcbiAgICAgICAgPGRpdiBjbGFzcz1cImZzLTQgZnctc2VtaWJvbGRcIj5cbiAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwidGVtcGxhdGVzPy5bJ3dpZGdldFZhbHVlVGVtcGxhdGUnXSB8fCBkZWZhdWx0V2lkZ2V0VmFsdWVUZW1wbGF0ZVwiIC8+XG4gICAgICAgIDwvZGl2PlxuICAgICAgfVxuICAgICAgQGlmICghIXRpdGxlKCkgfHwgdGVtcGxhdGVzPy5bJ3dpZGdldFRpdGxlVGVtcGxhdGUnXSkge1xuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0ZW1wbGF0ZXM/Llsnd2lkZ2V0VGl0bGVUZW1wbGF0ZSddIHx8IGRlZmF1bHRXaWRnZXRUaXRsZVRlbXBsYXRlXCIgLz5cbiAgICAgICAgPC9kaXY+XG4gICAgICB9XG4gICAgPC9kaXY+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRlbXBsYXRlcz8uWyd3aWRnZXRBY3Rpb25UZW1wbGF0ZSddIHx8IGRlZmF1bHRXaWRnZXRBY3Rpb25UZW1wbGF0ZVwiIC8+XG4gIDwvYy1jYXJkLWJvZHk+XG4gIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0ZW1wbGF0ZXM/Llsnd2lkZ2V0Q2hhcnRUZW1wbGF0ZSddIHx8IGRlZmF1bHRXaWRnZXRDaGFydFRlbXBsYXRlXCIgLz5cbjwvbmctY29udGFpbmVyPlxuXG48bmctdGVtcGxhdGUgI2RlZmF1bHRXaWRnZXRUaXRsZVRlbXBsYXRlPlxuICB7eyB0aXRsZSgpIH19XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2RlZmF1bHRXaWRnZXRWYWx1ZVRlbXBsYXRlPlxuICB7eyB2YWx1ZSgpIH19XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2RlZmF1bHRXaWRnZXRDaGFydFRlbXBsYXRlPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCIuY2hhcnQtd3JhcHBlclwiIC8+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2RlZmF1bHRXaWRnZXRBY3Rpb25UZW1wbGF0ZT5cbiAgPG5nLWNvbnRlbnQgLz5cbjwvbmctdGVtcGxhdGU+XG4iXX0=