@ebuilding/bi 2.3.9

package/fesm2022/bi.basic.mjs

@@ -0,0 +1,888 @@
+import * as i0 from '@angular/core';
+import { Input, Directive, Component, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule, DecimalPipe, DatePipe } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@ebuilding/base/shared.pipe';
+import { GramPipeModule } from '@ebuilding/base/shared.pipe';
+import * as i1 from '@ebuilding/base/shared.srv/global.event';
+
+class BasicService {
+    globalSrv;
+    _data = null;
+    transform = null;
+    width = 0;
+    height = 0;
+    set data(value) {
+        this._data = value;
+        this.initPageData(value);
+    }
+    get data() {
+        return this._data;
+    }
+    set rd(value) {
+        if (value != undefined && value != null) {
+            this.initPageData(this.data);
+        }
+    }
+    constructor(globalSrv) {
+        this.globalSrv = globalSrv;
+    }
+    ngOnDestroy() {
+    }
+    initPageData(value) {
+        if (value) {
+        }
+    }
+    initStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font.type) {
+                template = `${template} font-style: ${this.data.font.type};`;
+            }
+            if (this.data.font.spacing) {
+                template = `${template} letter-spacing: ${this.data.font.spacing}px;`;
+            }
+            if (this.data.font.size) {
+                template = `${template} font-size: ${this.data.font.size}px;`;
+            }
+            if (this.data.font.weight) {
+                template = `${template} font-weight: ${this.data.font.weight};`;
+            }
+            if (this.data.font.align) {
+                template = `${template} text-align: ${this.data.font.align};`;
+            }
+            if (this.data.font.colorType == 'single') {
+                template = `${template} color: ${this.data.font.color}; `;
+            }
+            else {
+                template = `${template} background: linear-gradient(${this.data.font.direction},${this.data.font.color0},${this.data.font.color1});-webkit-background-clip: text !important; -webkit-text-fill-color: transparent;`;
+            }
+        }
+        return template;
+    }
+    getPageValue() {
+        let value = "";
+        if (this.data.source.type == 'dynamic') {
+            if (this.data?.source?.value != undefined && this.data?.source?.value != null && this.data?.source?.value != "") {
+                value = this.data?.source?.value;
+            }
+        }
+        else {
+            if (this.data?.source?.staticValue != undefined && this.data?.source?.staticValue != null && this.data?.source?.staticValue != "") {
+                value = this.data?.source?.staticValue;
+            }
+        }
+        if (value == undefined || value == null) {
+            value = "";
+        }
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicService, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: BasicService, isStandalone: true, inputs: { data: "data", rd: "rd" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicService, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }], propDecorators: { data: [{
+                type: Input
+            }], rd: [{
+                type: Input
+            }] } });
+
+class BasicTextComponent extends BasicService {
+    globalSrv;
+    width = 200;
+    height = 60;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let value = this.getPageValue();
+        let template = `<div style="${this.initStyle()}">${value}</div>`;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicTextComponent, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicTextComponent, isStandalone: true, selector: "basic-text", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"content-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .content-box{width:100%;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-text', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"content-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .content-box{width:100%;text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BasicNumberComponent extends BasicService {
+    decimalPipe;
+    globalSrv;
+    width = 200;
+    height = 60;
+    svgTemplate = ``;
+    constructor(decimalPipe, globalSrv) {
+        super(globalSrv);
+        this.decimalPipe = decimalPipe;
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let value = this.getPageValue();
+        if (value != undefined && value != null && value != "") {
+            if (this.data?.font?.thousands == true) {
+                let formattedNumber = this.decimalPipe.transform(value, '1.0-0');
+                return `<div style="${this.initStyle()}">${formattedNumber}</div>`;
+            }
+            else {
+                return `<div style="${this.initStyle()}">${value}</div>`;
+            }
+        }
+        else {
+            return "";
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicNumberComponent, deps: [{ token: i2.DecimalPipe }, { token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicNumberComponent, isStandalone: true, selector: "basic-number", providers: [DecimalPipe], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .control-box{width:100%;text-align:center;font-family:ds-digitalbold}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicNumberComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-number', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [DecimalPipe], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .control-box{width:100%;text-align:center;font-family:ds-digitalbold}\n"] }]
+        }], ctorParameters: () => [{ type: i2.DecimalPipe }, { type: i1.GramGlobalService }] });
+
+class BasicLine1Component extends BasicService {
+    globalSrv;
+    width = 300;
+    height = 40;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicLine1Component, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicLine1Component, isStandalone: true, selector: "basic-line1", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div class=\"custom-border-box\"\r\n        style=\"height: 4px; opacity: 100; background-image: linear-gradient(to right, rgb(131, 191, 246), rgb(24, 141, 240));\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep .control-box{width:100%;text-align:center;-webkit-background-clip:text;-webkit-text-fill-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicLine1Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-line1', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div class=\"custom-border-box\"\r\n        style=\"height: 4px; opacity: 100; background-image: linear-gradient(to right, rgb(131, 191, 246), rgb(24, 141, 240));\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep .control-box{width:100%;text-align:center;-webkit-background-clip:text;-webkit-text-fill-color:transparent}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BasicLine2Component extends BasicService {
+    globalSrv;
+    width = 40;
+    height = 300;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicLine2Component, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicLine2Component, isStandalone: true, selector: "basic-line2", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div class=\"custom-border-box\"\r\n        style=\"width: 4px; opacity: 100; background-image: linear-gradient(rgb(131, 191, 246), rgb(24, 141, 240));\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep .control-box{width:100%;text-align:center;-webkit-background-clip:text;-webkit-text-fill-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicLine2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-line2', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div class=\"custom-border-box\"\r\n        style=\"width: 4px; opacity: 100; background-image: linear-gradient(rgb(131, 191, 246), rgb(24, 141, 240));\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep .control-box{width:100%;text-align:center;-webkit-background-clip:text;-webkit-text-fill-color:transparent}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BasicCardComponent1 extends BasicService {
+    globalSrv;
+    width = 300;
+    height = 120;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let value = this.getPageValue();
+        let template = `
+    <div class="info-box" style="${this.initBgStyle()}">
+      <div class="info-value" style="${this.initValueStyle()}">${value}</div>
+      <div class="info-second" style="${this.initSecondStyle()}">${this.data.source?.secondValue}</div>
+    </div>
+    `;
+        return template;
+    }
+    initBgStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.bgColorType == 'single') {
+                template = `background: ${this.data.font.color};`;
+            }
+            else {
+                template = `background-image: linear-gradient(${this.data.font?.bgDirection},${this.data.font?.bgColor0},${this.data.font?.bgColor1});`;
+            }
+            template = `${template} width:${this.data.width}px;height:${this.data.height}px;display: flex;`;
+        }
+        return template;
+    }
+    initValueStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.type) {
+                template = `${template} font-style: ${this.data.font.type};`;
+            }
+            if (this.data.font?.size) {
+                template = `${template} font-size: ${this.data.font.size}px;`;
+            }
+            if (this.data.font?.weight) {
+                template = `${template} font-weight: ${this.data.font.weight};`;
+            }
+            if (this.data.font?.color) {
+                template = `${template} color: ${this.data.font.color};`;
+            }
+            if (this.data.font?.lineDistance) {
+                template = `${template} margin-bottom: ${this.data.font.lineDistance}px;`;
+            }
+        }
+        return template;
+    }
+    initSecondStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.secondType) {
+                template = `${template} font-style: ${this.data.font.secondType};`;
+            }
+            if (this.data.font?.secondSize) {
+                template = `${template} font-size: ${this.data.font.secondSize}px;`;
+            }
+            if (this.data.font?.secondWeight) {
+                template = `${template} font-weight: ${this.data.font.secondWeight};`;
+            }
+            if (this.data.font?.secondColor) {
+                template = `${template} color: ${this.data.font.secondColor};`;
+            }
+        }
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicCardComponent1, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicCardComponent1, isStandalone: true, selector: "basic-card1", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;width:100%;height:100%}:host ::ng-deep .control-box{display:flex;flex:1;width:100%;height:100%}:host ::ng-deep .info-box{display:flex;flex:1;width:100%;height:100%;justify-content:center;flex-direction:column;text-align:center}:host ::ng-deep .info-value{font-family:ds-digitalbold}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicCardComponent1, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-card1', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;width:100%;height:100%}:host ::ng-deep .control-box{display:flex;flex:1;width:100%;height:100%}:host ::ng-deep .info-box{display:flex;flex:1;width:100%;height:100%;justify-content:center;flex-direction:column;text-align:center}:host ::ng-deep .info-value{font-family:ds-digitalbold}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BasicCardComponent2 extends BasicService {
+    globalSrv;
+    width = 300;
+    height = 120;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let value = this.getPageValue();
+        let template = `
+    <div class="info-box" style="${this.initBgStyle()}">
+      <div class="info-second" style="${this.initSecondStyle()}">${this.data.source?.secondValue}</div>
+      <div class="info-value" style="${this.initValueStyle()}">${value}</div>
+    </div>
+    `;
+        return template;
+    }
+    initBgStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.bgColorType == 'single') {
+                template = `background: ${this.data.font.color};`;
+            }
+            else {
+                template = `background-image: linear-gradient(${this.data.font?.bgDirection},${this.data.font?.bgColor0},${this.data.font?.bgColor1});`;
+            }
+            template = `${template} width:${this.data.width}px;height:${this.data.height}px;display: flex;`;
+        }
+        return template;
+    }
+    initValueStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.type) {
+                template = `${template} font-style: ${this.data.font.type};`;
+            }
+            if (this.data.font?.size) {
+                template = `${template} font-size: ${this.data.font.size}px;`;
+            }
+            if (this.data.font?.weight) {
+                template = `${template} font-weight: ${this.data.font.weight};`;
+            }
+            if (this.data.font?.color) {
+                template = `${template} color: ${this.data.font.color};`;
+            }
+        }
+        return template;
+    }
+    initSecondStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.secondType) {
+                template = `${template} font-style: ${this.data.font.secondType};`;
+            }
+            if (this.data.font?.secondSize) {
+                template = `${template} font-size: ${this.data.font.secondSize}px;`;
+            }
+            if (this.data.font?.secondWeight) {
+                template = `${template} font-weight: ${this.data.font.secondWeight};`;
+            }
+            if (this.data.font?.secondColor) {
+                template = `${template} color: ${this.data.font.secondColor};`;
+            }
+            if (this.data.font?.lineDistance) {
+                template = `${template} margin-bottom: ${this.data.font.lineDistance}px;`;
+            }
+        }
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicCardComponent2, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicCardComponent2, isStandalone: true, selector: "basic-card2", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;width:100%;height:100%}:host ::ng-deep .control-box{display:flex;flex:1;width:100%;height:100%}:host ::ng-deep .info-box{display:flex;flex:1;width:100%;height:100%;justify-content:center;flex-direction:column;text-align:center}:host ::ng-deep .info-value{font-family:ds-digitalbold}:host ::ng-deep .info-second{padding:15px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicCardComponent2, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-card2', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;width:100%;height:100%}:host ::ng-deep .control-box{display:flex;flex:1;width:100%;height:100%}:host ::ng-deep .info-box{display:flex;flex:1;width:100%;height:100%;justify-content:center;flex-direction:column;text-align:center}:host ::ng-deep .info-value{font-family:ds-digitalbold}:host ::ng-deep .info-second{padding:15px 0 0}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BasicCardComponent3 extends BasicService {
+    globalSrv;
+    width = 300;
+    height = 120;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let value = this.getPageValue();
+        let template = `
+    <div class="info-box" style="${this.initBgStyle()}">
+      <div class="info-box-left">
+        <div style="width: 60px; height: 60px;">
+            <img src="/assets/images/design/basic/cardicon.png" style="object-fit: contain;">
+        </div>
+      </div> 
+      <div class="info-box-right">
+        <div class="info-value" style="${this.initValueStyle()}">${value}</div>
+        <div class="info-second" style="${this.initSecondStyle()}">${this.data.source?.secondValue}</div>
+      </div>
+    </div>
+    `;
+        return template;
+    }
+    initBgStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.bgColorType == 'single') {
+                template = `background: ${this.data.font.color};`;
+            }
+            else {
+                template = `background-image: linear-gradient(${this.data.font?.bgDirection},${this.data.font?.bgColor0},${this.data.font?.bgColor1});`;
+            }
+            template = `${template} width:${this.data.width}px;height:${this.data.height}px;display: flex;`;
+        }
+        return template;
+    }
+    initValueStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.type) {
+                template = `${template} font-style: ${this.data.font.type};`;
+            }
+            if (this.data.font?.size) {
+                template = `${template} font-size: ${this.data.font.size}px;`;
+            }
+            if (this.data.font?.weight) {
+                template = `${template} font-weight: ${this.data.font.weight};`;
+            }
+            if (this.data.font?.color) {
+                template = `${template} color: ${this.data.font.color};`;
+            }
+            if (this.data.font?.lineDistance) {
+                template = `${template} margin-bottom: ${this.data.font.lineDistance}px;`;
+            }
+        }
+        return template;
+    }
+    initSecondStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.secondType) {
+                template = `${template} font-style: ${this.data.font.secondType};`;
+            }
+            if (this.data.font?.secondSize) {
+                template = `${template} font-size: ${this.data.font.secondSize}px;`;
+            }
+            if (this.data.font?.secondWeight) {
+                template = `${template} font-weight: ${this.data.font.secondWeight};`;
+            }
+            if (this.data.font?.secondColor) {
+                template = `${template} color: ${this.data.font.secondColor};`;
+            }
+        }
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicCardComponent3, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicCardComponent3, isStandalone: true, selector: "basic-card3", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;width:100%;height:100%}:host ::ng-deep .control-box{display:flex;flex:1;width:100%;height:100%}:host ::ng-deep .info-box{display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative}:host ::ng-deep .info-box-left{margin-right:30px;display:flex;flex-direction:row;height:100%;align-items:center}:host ::ng-deep .info-box-left img{width:100%;height:100%}:host ::ng-deep .info-box-right{position:relative;display:flex;flex-direction:column;height:100%;justify-content:center}:host ::ng-deep .info-value{font-family:ds-digitalbold}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicCardComponent3, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-card3', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;width:100%;height:100%}:host ::ng-deep .control-box{display:flex;flex:1;width:100%;height:100%}:host ::ng-deep .info-box{display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative}:host ::ng-deep .info-box-left{margin-right:30px;display:flex;flex-direction:row;height:100%;align-items:center}:host ::ng-deep .info-box-left img{width:100%;height:100%}:host ::ng-deep .info-box-right{position:relative;display:flex;flex-direction:column;height:100%;justify-content:center}:host ::ng-deep .info-value{font-family:ds-digitalbold}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BasicCardComponent4 extends BasicService {
+    globalSrv;
+    width = 300;
+    height = 120;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let value = this.getPageValue();
+        let template = `
+    <div class="info-box" style="${this.initBgStyle()}">
+      <div class="info-box-left">
+        <div style="width: 60px; height: 60px;">
+            <img src="/assets/images/design/basic/cardicon.png" style="object-fit: contain;">
+        </div>
+      </div> 
+      <div class="info-box-right">
+        <div class="info-second" style="${this.initSecondStyle()}">${this.data.source?.secondValue}</div>
+        <div class="info-value" style="${this.initValueStyle()}">${value}</div>
+      </div>
+    </div>
+    `;
+        return template;
+    }
+    initBgStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.bgColorType == 'single') {
+                template = `background: ${this.data.font.color};`;
+            }
+            else {
+                template = `background-image: linear-gradient(${this.data.font?.bgDirection},${this.data.font?.bgColor0},${this.data.font?.bgColor1});`;
+            }
+            template = `${template} width:${this.data.width}px;height:${this.data.height}px;display: flex;`;
+        }
+        return template;
+    }
+    initValueStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.type) {
+                template = `${template} font-style: ${this.data.font.type};`;
+            }
+            if (this.data.font?.size) {
+                template = `${template} font-size: ${this.data.font.size}px;`;
+            }
+            if (this.data.font?.weight) {
+                template = `${template} font-weight: ${this.data.font.weight};`;
+            }
+            if (this.data.font?.color) {
+                template = `${template} color: ${this.data.font.color};`;
+            }
+        }
+        return template;
+    }
+    initSecondStyle() {
+        let template = '';
+        if (this.data && this.data.font) {
+            if (this.data.font?.secondType) {
+                template = `${template} font-style: ${this.data.font.secondType};`;
+            }
+            if (this.data.font?.secondSize) {
+                template = `${template} font-size: ${this.data.font.secondSize}px;`;
+            }
+            if (this.data.font?.secondWeight) {
+                template = `${template} font-weight: ${this.data.font.secondWeight};`;
+            }
+            if (this.data.font?.secondColor) {
+                template = `${template} color: ${this.data.font.secondColor};`;
+            }
+            if (this.data.font?.lineDistance) {
+                template = `${template} margin-bottom: ${this.data.font.lineDistance}px;`;
+            }
+        }
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicCardComponent4, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicCardComponent4, isStandalone: true, selector: "basic-card4", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;width:100%;height:100%}:host ::ng-deep .control-box{display:flex;flex:1;width:100%;height:100%}:host ::ng-deep .info-box{display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative}:host ::ng-deep .info-box-left{margin-right:30px;display:flex;flex-direction:row;height:100%;align-items:center}:host ::ng-deep .info-box-left img{width:100%;height:100%}:host ::ng-deep .info-box-right{position:relative;display:flex;flex-direction:column;height:100%;justify-content:center}:host ::ng-deep .info-value{font-family:ds-digitalbold}:host ::ng-deep .info-second{padding:15px 0 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicCardComponent4, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-card4', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\">\r\n    </div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;width:100%;height:100%}:host ::ng-deep .control-box{display:flex;flex:1;width:100%;height:100%}:host ::ng-deep .info-box{display:flex;flex-direction:row;align-items:center;justify-content:center;position:relative}:host ::ng-deep .info-box-left{margin-right:30px;display:flex;flex-direction:row;height:100%;align-items:center}:host ::ng-deep .info-box-left img{width:100%;height:100%}:host ::ng-deep .info-box-right{position:relative;display:flex;flex-direction:column;height:100%;justify-content:center}:host ::ng-deep .info-value{font-family:ds-digitalbold}:host ::ng-deep .info-second{padding:15px 0 0}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+//当前时间
+class BasicTimeComponent1 extends BasicService {
+    datePipe;
+    globalSrv;
+    width = 300;
+    height = 60;
+    currentTime;
+    interval;
+    svgTemplate = ``;
+    constructor(datePipe, globalSrv) {
+        super(globalSrv);
+        this.datePipe = datePipe;
+        this.globalSrv = globalSrv;
+        this.updateTime();
+    }
+    ngOnInit() {
+        this.interval = setInterval(() => {
+            this.updateTime();
+        }, 1000);
+    }
+    updateTime() {
+        const now = new Date();
+        this.currentTime = this.datePipe.transform(now, 'yyyy-MM-dd HH:mm:ss');
+        this.initPageData(null);
+    }
+    // 清理定时器
+    ngOnDestroy() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+    }
+    initPageData(value) {
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let template = `<div style="${this.initStyle()}">${this.currentTime}</div>`;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicTimeComponent1, deps: [{ token: i2.DatePipe }, { token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicTimeComponent1, isStandalone: true, selector: "basic-time1", providers: [DatePipe], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .control-box{width:100%;text-align:center;font-family:ds-digitalbold}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicTimeComponent1, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-time1', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [DatePipe], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .control-box{width:100%;text-align:center;font-family:ds-digitalbold}\n"] }]
+        }], ctorParameters: () => [{ type: i2.DatePipe }, { type: i1.GramGlobalService }] });
+
+//倒计时
+class BasicTimeComponent2 extends BasicService {
+    globalSrv;
+    width = 300;
+    height = 60;
+    countdown = 0; //172800; // 设置倒计时总秒数（例如2天 = 172800秒）
+    displayTime = '';
+    interval;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+        this.startCountdown();
+    }
+    // 开始倒计时
+    startCountdown() {
+        this.updateDisplayTime();
+        this.interval = setInterval(() => {
+            if (this.countdown > 0) {
+                this.countdown--; // 每秒减少1秒
+                this.updateDisplayTime();
+            }
+            else {
+                clearInterval(this.interval);
+            }
+        }, 1000);
+    }
+    // 更新显示的时间
+    updateDisplayTime() {
+        if (this.data?.endTime) {
+            const currentTime = new Date().getTime();
+            const targetDate = new Date(this.data.endTime).getTime();
+            const timeDifference = targetDate - currentTime;
+            if (timeDifference > 0) {
+                this.countdown = Math.floor(timeDifference / 1000);
+                const days = Math.floor(this.countdown / 86400); // 天数
+                const hours = Math.floor((this.countdown % 86400) / 3600); // 小时数
+                const minutes = Math.floor((this.countdown % 3600) / 60); // 分钟数
+                const seconds = this.countdown % 60; // 秒数
+                this.displayTime = `${this.padZero(days)}天 ${this.padZero(hours)}小时 ${this.padZero(minutes)}分钟 ${this.padZero(seconds)}秒`;
+            }
+            else {
+                this.displayTime = `<span style="color:red;">已过期</span>`;
+            }
+        }
+        else {
+            this.displayTime = "";
+        }
+        this.initPageData(null);
+    }
+    // 补零函数，保证时间格式为 2 位数
+    padZero(num) {
+        return num < 10 ? '0' + num : num.toString();
+    }
+    // 清理定时器
+    ngOnDestroy() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+    }
+    initPageData(value) {
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let template = `<div style="${this.initStyle()}">${this.displayTime}</div>`;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicTimeComponent2, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicTimeComponent2, isStandalone: true, selector: "basic-time2", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .control-box{width:100%;text-align:center;font-family:ds-digitalbold}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicTimeComponent2, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-time2', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"control-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .control-box{width:100%;text-align:center;font-family:ds-digitalbold}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BasicImageComponent extends BasicService {
+    globalSrv;
+    width = 280;
+    height = 200;
+    svgTemplate = ``;
+    src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAFBklEQVR4nO3dz08jZRzHcaYtpS2FAmUTL7KJHBVNVkIU1gPyD0jC3+A/YEw8ejf+H8ZwMISLJoSDgl7WixrXhCbGJbsmGoFSKWWmUz/PZseQhfaZaefH8/D9vBLSZyZkl873zZR2GnDGSDQGIBwDEI4BCMcAhGMAwjEA4RiAcAxAOAYgHAMQjgEIxwCEYwDCMQDhGIBwDEA4BiAcAxCOAQinDWB7e/vj8fHxt3K53JzjOAXsIsP1ej2v2+3+5Xnez1tbW59hV1/aAHZ2dr5Qw8eSLOP7/j8I4ZPNzc3fx/rQBrC7u/sNbshSrut+yAAEK5fLn25sbBxieSsGcMclFsDx8XGp0WhM5vP53tLSUrNWq3nYfUPcn0fRJBbA3t7ePdw8h2G5y8vLp1jeEPfnUTQMQLjEAlCn7KOjo2qhUPAHnbLj/jyKJrEAyA4MQDgGIBwDEI4BCDdyAAcHBx/hhiyFK7lfrqysPMHyVgzgjmMAwjEA4RiAcAxAOAYgHAMQjgEIxwCEYwDCMQDhGIBwDEA4BiAcAxCOAQjHAIRjAMIxAOEYgHDWBdDr9YoXFxevXV1d3fd9v4xdY47jeLgjTyuVym/5fP5f7KKQcNzsCUAN//T09CEGP43NG1QIU1NT3+JOnWGTQsCxsieAk5OT9/sNP6AiqNVq+zwThGNNAO12ewGn/gdYauFOPZmenn6EJWngWNkRwNnZ2Tue572CpZY6C8zNze1iSRrWBBDm9H9dvV7/CjekYU0A+OHvvW63W8cyFAYQjjUBNJvNt13XfRVLrVwu156dnf0aS9KwJgA8758/Pz9/iKVWqVR6PDk5+RhL0rAmACXMWQDf/c2ZmZnv8IPgFTZJw6oAlEERcPjRWReAoh4OLi8v1UvBFWyqp31usVh8Wi6X/8AmRWBlABQfBiAcAxCOAQjHAIRjAMIxgCGoN6Z0Op06rk7O4/pEDbv+VygU/sZT0mc4sFa8KQVfJwMISw2+1Wq9gdchFrA5EF6UauMl6V9Nf22CAYSk3pCCjzcRQaQ/jadCqFarP+BAG3lGwNfFAHRwEepBmO/6fvBKpVepVB7hjPAMm0ZhABqjDv86RPCjaQ8JDGCAOIcfMC0CBtBHEsMPmBQBA7hFksMPmBIBA3hJGsMPmBABA7gmzeEHso6AAbyQxfADWUbAACDL4QeyikB8ACYMP5BFBKIDMGn4gbQjEBuAicMPpBmByABMHn4grQjEBWDD8ANpRGB0ABjUPC7BLna73XvBZVh1ZQ1f9FC/Dsam4QdwPxONAMfSzABardZSp9NZxLKvKAfHxuEHotzPqIwMIMqwJiYmGtVq9Scsb4UzR7HZbK6ot29h01pJRWBcAFGGH1DvukEIR/j4M3hYcF23hjPIAv6t+70XDx+2SyICowIYZvjSxB2BMQFw+OHFGYERAXD40cUVQeYBcPjDiyOCTAPg8Ec3agSZBcDhx2eUCDIJgMOP37ARpB4Ah5+cYSJINQAOP3lRI0gtAA4/PVEiSCUADj99YSNIPAAOPzthIlhbW/scN31pAzg8PPwAF1sWsbyBw8/eoAgcx2msrq4O/KXa2gD29/dL+A/e9X3/dYQwgV3PcfjmeDkCDL6DK6i/tNvt79fX1y+xqy9tAHS3MQDhGIBwDEA4BiAcAxCOAQjHAIRjAMIxAOEYgHAMQDgGIBwDEI4BCMcAhGMAwjEA4RiAcAxAuP8A/aX6rh4U9AMAAAAASUVORK5CYII=";
+    src2 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAFBklEQVR4nO3dz08jZRzHcaYtpS2FAmUTL7KJHBVNVkIU1gPyD0jC3+A/YEw8ejf+H8ZwMISLJoSDgl7WixrXhCbGJbsmGoFSKWWmUz/PZseQhfaZaefH8/D9vBLSZyZkl873zZR2GnDGSDQGIBwDEI4BCMcAhGMAwjEA4RiAcAxAOAYgHAMQjgEIxwCEYwDCMQDhGIBwDEA4BiAcAxCOAQinDWB7e/vj8fHxt3K53JzjOAXsIsP1ej2v2+3+5Xnez1tbW59hV1/aAHZ2dr5Qw8eSLOP7/j8I4ZPNzc3fx/rQBrC7u/sNbshSrut+yAAEK5fLn25sbBxieSsGcMclFsDx8XGp0WhM5vP53tLSUrNWq3nYfUPcn0fRJBbA3t7ePdw8h2G5y8vLp1jeEPfnUTQMQLjEAlCn7KOjo2qhUPAHnbLj/jyKJrEAyA4MQDgGIBwDEI4BCDdyAAcHBx/hhiyFK7lfrqysPMHyVgzgjmMAwjEA4RiAcAxAOAYgHAMQjgEIxwCEYwDCMQDhGIBwDEA4BiAcAxCOAQjHAIRjAMIxAOEYgHDWBdDr9YoXFxevXV1d3fd9v4xdY47jeLgjTyuVym/5fP5f7KKQcNzsCUAN//T09CEGP43NG1QIU1NT3+JOnWGTQsCxsieAk5OT9/sNP6AiqNVq+zwThGNNAO12ewGn/gdYauFOPZmenn6EJWngWNkRwNnZ2Tue572CpZY6C8zNze1iSRrWBBDm9H9dvV7/CjekYU0A+OHvvW63W8cyFAYQjjUBNJvNt13XfRVLrVwu156dnf0aS9KwJgA8758/Pz9/iKVWqVR6PDk5+RhL0rAmACXMWQDf/c2ZmZnv8IPgFTZJw6oAlEERcPjRWReAoh4OLi8v1UvBFWyqp31usVh8Wi6X/8AmRWBlABQfBiAcAxCOAQjHAIRjAMIxgCGoN6Z0Op06rk7O4/pEDbv+VygU/sZT0mc4sFa8KQVfJwMISw2+1Wq9gdchFrA5EF6UauMl6V9Nf22CAYSk3pCCjzcRQaQ/jadCqFarP+BAG3lGwNfFAHRwEepBmO/6fvBKpVepVB7hjPAMm0ZhABqjDv86RPCjaQ8JDGCAOIcfMC0CBtBHEsMPmBQBA7hFksMPmBIBA3hJGsMPmBABA7gmzeEHso6AAbyQxfADWUbAACDL4QeyikB8ACYMP5BFBKIDMGn4gbQjEBuAicMPpBmByABMHn4grQjEBWDD8ANpRGB0ABjUPC7BLna73XvBZVh1ZQ1f9FC/Dsam4QdwPxONAMfSzABardZSp9NZxLKvKAfHxuEHotzPqIwMIMqwJiYmGtVq9Scsb4UzR7HZbK6ot29h01pJRWBcAFGGH1DvukEIR/j4M3hYcF23hjPIAv6t+70XDx+2SyICowIYZvjSxB2BMQFw+OHFGYERAXD40cUVQeYBcPjDiyOCTAPg8Ec3agSZBcDhx2eUCDIJgMOP37ARpB4Ah5+cYSJINQAOP3lRI0gtAA4/PVEiSCUADj99YSNIPAAOPzthIlhbW/scN31pAzg8PPwAF1sWsbyBw8/eoAgcx2msrq4O/KXa2gD29/dL+A/e9X3/dYQwgV3PcfjmeDkCDL6DK6i/tNvt79fX1y+xqy9tAHS3MQDhGIBwDEA4BiAcAxCOAQjHAIRjAMIxAOEYgHAMQDgGIBwDEI4BCMcAhGMAwjEA4RiAcAxAuP8A/aX6rh4U9AMAAAAASUVORK5CYII=";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        if (this.data?.image?.url) {
+            this.src = this.data?.image?.url;
+        }
+        else {
+            this.src = this.src2;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicImageComponent, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicImageComponent, isStandalone: true, selector: "basic-image", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"control-image\" [ngStyle]=\"{'opacity':data?.image?.opacity}\">\r\n    <img [src]=\"src\" style=\"object-fit: fill;\">\r\n</div>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .control-image{width:100%;height:100%;opacity:1;position:relative;display:inline-block;overflow:hidden}:host ::ng-deep img{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-image', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule
+                    ], providers: [], template: "<div class=\"control-image\" [ngStyle]=\"{'opacity':data?.image?.opacity}\">\r\n    <img [src]=\"src\" style=\"object-fit: fill;\">\r\n</div>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .control-image{width:100%;height:100%;opacity:1;position:relative;display:inline-block;overflow:hidden}:host ::ng-deep img{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BasicTableComponent extends BasicService {
+    globalSrv;
+    width = 600;
+    height = 400;
+    headerData = ["排名", "关键词", "用户数", "搜索次数"];
+    bodyData = [
+        { index: 1, keyWord: "中国", userCnt: "110", searchCnt: 1927 },
+        { index: 2, keyWord: "朝鲜", userCnt: "81", searchCnt: 1000 },
+        { index: 3, keyWord: "美国", userCnt: "63", searchCnt: 8547 },
+        { index: 4, keyWord: "法国", userCnt: "55", searchCnt: 7896 },
+        { index: 5, keyWord: "印度", userCnt: "88", searchCnt: 1234 },
+        { index: 6, keyWord: "日本", userCnt: "10", searchCnt: 3214 },
+        { index: 7, keyWord: "乌克兰", userCnt: "12", searchCnt: 6542 },
+        { index: 8, keyWord: "俄罗斯", userCnt: "16", searchCnt: 3785 },
+        { index: 9, keyWord: "英格兰", userCnt: "33", searchCnt: 1025 },
+        { index: 10, keyWord: "巴基斯坦", userCnt: "44", searchCnt: 9999 }
+    ];
+    getKeys(item) {
+        return Object.keys(item);
+    }
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+    }
+    initTemplate() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicTableComponent, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BasicTableComponent, isStandalone: true, selector: "basic-table", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"control-table\">\r\n    <table>\r\n        <thead>\r\n            <ng-container *ngFor=\"let item of headerData\">\r\n                <th\r\n                    [ngStyle]=\"{'background-color':data?.table?.headerBgColor,'font-size':data?.table?.headerFontSize+'px','color':data?.table?.headerFontColor}\">\r\n                    {{item}}\r\n                </th>\r\n            </ng-container>\r\n        </thead>\r\n        <tbody [ngStyle]=\"{'background-color':data?.table?.bodyBgColor}\">\r\n            <ng-container *ngFor=\"let item of bodyData; let i = index\">\r\n                <tr [ngStyle]=\" {'background-color': i % 2===0 ? data?.table?.evenBgColor : data?.table?.oddBgColor}\">\r\n                    <ng-container *ngFor=\"let key of getKeys(item)\">\r\n                        <td [ngStyle]=\"{'font-size':data?.table?.bodyFontSize+'px','color':data?.table?.bodyFontColor}\">\r\n                            {{item[key]}}</td>\r\n                    </ng-container>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .control-table{width:100%;height:100%}:host ::ng-deep table{width:100%;height:100%}:host ::ng-deep table th{font-weight:500;padding:15px 0;background-color:#232832}:host ::ng-deep table th,:host ::ng-deep table td{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'basic-table', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule
+                    ], providers: [], template: "<div class=\"control-table\">\r\n    <table>\r\n        <thead>\r\n            <ng-container *ngFor=\"let item of headerData\">\r\n                <th\r\n                    [ngStyle]=\"{'background-color':data?.table?.headerBgColor,'font-size':data?.table?.headerFontSize+'px','color':data?.table?.headerFontColor}\">\r\n                    {{item}}\r\n                </th>\r\n            </ng-container>\r\n        </thead>\r\n        <tbody [ngStyle]=\"{'background-color':data?.table?.bodyBgColor}\">\r\n            <ng-container *ngFor=\"let item of bodyData; let i = index\">\r\n                <tr [ngStyle]=\" {'background-color': i % 2===0 ? data?.table?.evenBgColor : data?.table?.oddBgColor}\">\r\n                    <ng-container *ngFor=\"let key of getKeys(item)\">\r\n                        <td [ngStyle]=\"{'font-size':data?.table?.bodyFontSize+'px','color':data?.table?.bodyFontColor}\">\r\n                            {{item[key]}}</td>\r\n                    </ng-container>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>", styles: [":host ::ng-deep{display:flex;justify-content:center;align-items:center;height:100%;width:100%}:host ::ng-deep .control-table{width:100%;height:100%}:host ::ng-deep table{width:100%;height:100%}:host ::ng-deep table th{font-weight:500;padding:15px 0;background-color:#232832}:host ::ng-deep table th,:host ::ng-deep table td{text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+const dynamicComponents = {
+    text: BasicTextComponent,
+    number: BasicNumberComponent,
+    line1: BasicLine1Component,
+    line2: BasicLine2Component,
+    card1: BasicCardComponent1,
+    card2: BasicCardComponent2,
+    card3: BasicCardComponent3,
+    card4: BasicCardComponent4,
+    time1: BasicTimeComponent1,
+    time2: BasicTimeComponent2,
+    image: BasicImageComponent,
+    table: BasicTableComponent
+};
+class GramBiBasicComponent {
+    componentFactoryResolver;
+    _data = null;
+    component;
+    //@Input() data: any;
+    set data(value) {
+        this._data = value;
+        this.renderComponent();
+    }
+    get data() {
+        return this._data;
+    }
+    /**
+     * 动态子组件
+     */
+    componentHost;
+    ngOnInit() { }
+    constructor(componentFactoryResolver) {
+        this.componentFactoryResolver = componentFactoryResolver;
+    }
+    ngOnChanges(changes) {
+        // console.log("[]", this.data);
+        // if (changes["data"]) {
+        //   console.log(this.data);
+        //   if (this.data && this.data?.secondType) {
+        //     this.renderComponent();
+        //   }
+        // }
+    }
+    renderComponent() {
+        if (this.componentHost && this.data && this.data?.secondType) {
+            this.componentHost.clear();
+            const compFactory = this.componentFactoryResolver.resolveComponentFactory(dynamicComponents[this.data.secondType]);
+            this.component = this.componentHost.createComponent(compFactory);
+            this.component.instance['data'] = this.data;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBasicComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GramBiBasicComponent, isStandalone: true, selector: "gram-bi-basic", inputs: { data: "data" }, viewQueries: [{ propertyName: "componentHost", first: true, predicate: ["componentHost"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #componentHost></ng-container>", styles: [":host ::ng-deep{width:100%;height:100%;display:inline-block}:host ::ng-deep svg{transform-origin:left top}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBasicComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gram-bi-basic', template: "<ng-container #componentHost></ng-container>", styles: [":host ::ng-deep{width:100%;height:100%;display:inline-block}:host ::ng-deep svg{transform-origin:left top}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { data: [{
+                type: Input
+            }], componentHost: [{
+                type: ViewChild,
+                args: ['componentHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+const COMPONENTS = [GramBiBasicComponent];
+const COMPONENTS_NOROUNT = [
+    BasicTextComponent,
+    BasicNumberComponent,
+    BasicLine1Component,
+    BasicLine2Component,
+    BasicCardComponent1,
+    BasicCardComponent2,
+    BasicCardComponent3,
+    BasicCardComponent4,
+    BasicTimeComponent1,
+    BasicTimeComponent2,
+    BasicImageComponent,
+    BasicTableComponent
+];
+class GramBiBasicModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBasicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: GramBiBasicModule, imports: [GramBiBasicComponent, BasicTextComponent,
+            BasicNumberComponent,
+            BasicLine1Component,
+            BasicLine2Component,
+            BasicCardComponent1,
+            BasicCardComponent2,
+            BasicCardComponent3,
+            BasicCardComponent4,
+            BasicTimeComponent1,
+            BasicTimeComponent2,
+            BasicImageComponent,
+            BasicTableComponent], exports: [GramBiBasicComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBasicModule, imports: [COMPONENTS_NOROUNT] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBasicModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...COMPONENTS, ...COMPONENTS_NOROUNT],
+                    exports: [...COMPONENTS],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GramBiBasicComponent, GramBiBasicModule };
+//# sourceMappingURL=bi.basic.mjs.map