@tapsellorg/angular-material-library/fesm2022/tapsellorg-angular-material-library-src-lib-stats-box.mjs

Angular library for Tapsell

import * as i0 from '@angular/core';
import { input, signal, ViewEncapsulation, Component, NgModule } from '@angular/core';
import * as i1 from '@tapsellorg/angular-material-library/src/lib/help-indicator';
import { PghHelpIndicatorModule } from '@tapsellorg/angular-material-library/src/lib/help-indicator';
import * as i2 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i3 from '@tapsellorg/angular-material-library/src/lib/loader';
import { PghLoaderModule } from '@tapsellorg/angular-material-library/src/lib/loader';
import * as i4 from '@angular/common';
import { CommonModule } from '@angular/common';

class PghStatsBoxComponent {
    constructor() {
        this.name = input.required();
        this.value = input();
        this.percent = input();
        this.showPercent = input(true);
        this.desc = input();
        this.tooltip = input();
        this.loader = input();
        this.isValueNumber = signal(false);
    }
    ngOnInit() { }
    ngOnChanges(changes) {
        if (changes.value) {
            this.isValueNumber.set(typeof this.value() === 'number');
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghStatsBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: PghStatsBoxComponent, isStandalone: false, selector: "pgh-stats-box", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null }, showPercent: { classPropertyName: "showPercent", publicName: "showPercent", isSignal: true, isRequired: false, transformFunction: null }, desc: { classPropertyName: "desc", publicName: "desc", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pgh-stats-box box\" [pghLoader]=\"loader()\">\n  <div class=\"pgh-stats-box-name\">\n    <span class=\"me-2\">{{ name() }}</span>\n    <pgh-help-indicator [tooltip]=\"tooltip()\"></pgh-help-indicator>\n  </div>\n  <div class=\"pgh-stats-box-value\">{{ isValueNumber() ? (value() | number) : value() }}</div>\n  <div class=\"pgh-stats-box-bottom\">\n    <ng-content select=\"[pgh-footer]\"></ng-content>\n    @if (percent()) {\n    <div\n      class=\"pgh-stats-box-progress\"\n      [class.text-success]=\"percent()! > 0\"\n      [class.text-danger]=\"percent()! < 0\"\n    >\n      @if (percent()! < 0) {\n      <mat-icon svgIcon=\"arrow_drop_down\"></mat-icon>\n      } @if (percent()! > 0) {\n      <mat-icon svgIcon=\"arrow_drop_up\"></mat-icon>\n      } @if (percent()! === 0) {\n      <mat-icon svgIcon=\"pause\" class=\"square-16 me-1\"></mat-icon>\n      } @if(showPercent()) {\n      <span>{{ percent()! | percent }}</span>\n      }\n    </div>\n    } @if (desc()) {\n    <div class=\"pgh-stats-box-desc\">{{ desc() }}</div>\n    }\n  </div>\n\n  <div class=\"pgh-stats-box-thumbnail\">\n    <ng-content select=\"[pgh-left]\"></ng-content>\n  </div>\n</div>\n", styles: [".font-monospaced-numbers{font-feature-settings:\"ss03\"!important}.font-english-numbers{font-feature-settings:normal!important}.font-weight-light{font-weight:300}.font-weight-normal{font-weight:400}.font-weight-bold{font-weight:600}.black-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-0),50%)!important}.white-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-1000),50%)!important}.pgh-stats-box{display:grid;grid-template-columns:1fr auto;grid-gap:.5rem;border-radius:var(--box-radius);grid-template-rows:auto 1fr auto;grid-template-areas:\"title thumbnail\" \"value thumbnail\" \"desc thumbnail\";padding-block:1rem .75rem;padding-inline:.75rem;min-height:6.875rem;height:100%}.pgh-stats-box-name{font-size:.75rem;font-weight:600;line-height:1.33;color:var(--444);grid-area:title}.pgh-stats-box-value{font-size:1.5rem;font-weight:600;line-height:1;color:var(--222);grid-area:value}.pgh-stats-box-bottom{display:flex;align-items:center;flex-wrap:wrap;min-height:1.5rem;grid-area:desc}.pgh-stats-box-progress{display:inline-flex;margin-inline:-.25rem .5rem;flex:0 0 auto;align-items:center}.pgh-stats-box-desc{font-size:.75rem;flex:1 1 100px;color:var(--gray)}.pgh-stats-box-thumbnail{grid-area:thumbnail}\n"], dependencies: [{ kind: "component", type: i1.PghHelpIndicatorComponent, selector: "pgh-help-indicator, [pghHelpIndicator]", inputs: ["tooltip", "pghHelpIndicator"], outputs: ["tooltipChange"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3.PghLoaderDirective, selector: "[pghLoader]", inputs: ["pghLoader", "color", "pghDisabledWhileLoading", "pghLoaderType"], exportAs: ["pghLoader"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.PercentPipe, name: "percent" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghStatsBoxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'pgh-stats-box', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"pgh-stats-box box\" [pghLoader]=\"loader()\">\n  <div class=\"pgh-stats-box-name\">\n    <span class=\"me-2\">{{ name() }}</span>\n    <pgh-help-indicator [tooltip]=\"tooltip()\"></pgh-help-indicator>\n  </div>\n  <div class=\"pgh-stats-box-value\">{{ isValueNumber() ? (value() | number) : value() }}</div>\n  <div class=\"pgh-stats-box-bottom\">\n    <ng-content select=\"[pgh-footer]\"></ng-content>\n    @if (percent()) {\n    <div\n      class=\"pgh-stats-box-progress\"\n      [class.text-success]=\"percent()! > 0\"\n      [class.text-danger]=\"percent()! < 0\"\n    >\n      @if (percent()! < 0) {\n      <mat-icon svgIcon=\"arrow_drop_down\"></mat-icon>\n      } @if (percent()! > 0) {\n      <mat-icon svgIcon=\"arrow_drop_up\"></mat-icon>\n      } @if (percent()! === 0) {\n      <mat-icon svgIcon=\"pause\" class=\"square-16 me-1\"></mat-icon>\n      } @if(showPercent()) {\n      <span>{{ percent()! | percent }}</span>\n      }\n    </div>\n    } @if (desc()) {\n    <div class=\"pgh-stats-box-desc\">{{ desc() }}</div>\n    }\n  </div>\n\n  <div class=\"pgh-stats-box-thumbnail\">\n    <ng-content select=\"[pgh-left]\"></ng-content>\n  </div>\n</div>\n", styles: [".font-monospaced-numbers{font-feature-settings:\"ss03\"!important}.font-english-numbers{font-feature-settings:normal!important}.font-weight-light{font-weight:300}.font-weight-normal{font-weight:400}.font-weight-bold{font-weight:600}.black-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-0),50%)!important}.white-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-1000),50%)!important}.pgh-stats-box{display:grid;grid-template-columns:1fr auto;grid-gap:.5rem;border-radius:var(--box-radius);grid-template-rows:auto 1fr auto;grid-template-areas:\"title thumbnail\" \"value thumbnail\" \"desc thumbnail\";padding-block:1rem .75rem;padding-inline:.75rem;min-height:6.875rem;height:100%}.pgh-stats-box-name{font-size:.75rem;font-weight:600;line-height:1.33;color:var(--444);grid-area:title}.pgh-stats-box-value{font-size:1.5rem;font-weight:600;line-height:1;color:var(--222);grid-area:value}.pgh-stats-box-bottom{display:flex;align-items:center;flex-wrap:wrap;min-height:1.5rem;grid-area:desc}.pgh-stats-box-progress{display:inline-flex;margin-inline:-.25rem .5rem;flex:0 0 auto;align-items:center}.pgh-stats-box-desc{font-size:.75rem;flex:1 1 100px;color:var(--gray)}.pgh-stats-box-thumbnail{grid-area:thumbnail}\n"] }]
        }], ctorParameters: () => [] });

class PghStatsBoxModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghStatsBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: PghStatsBoxModule, declarations: [PghStatsBoxComponent], imports: [CommonModule, PghHelpIndicatorModule, MatIconModule, PghLoaderModule], exports: [PghStatsBoxComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghStatsBoxModule, imports: [CommonModule, PghHelpIndicatorModule, MatIconModule, PghLoaderModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PghStatsBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [PghStatsBoxComponent],
                    imports: [CommonModule, PghHelpIndicatorModule, MatIconModule, PghLoaderModule],
                    exports: [PghStatsBoxComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { PghStatsBoxComponent, PghStatsBoxModule };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-stats-box.mjs.map