@ebuilding/bi 2.3.9

package/fesm2022/ebuilding-bi.mjs

@@ -0,0 +1,3580 @@
+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';
+import { Guid } from '@ebuilding/base/shared.util/guid';
+
+let BasicService$2 = 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$2, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }], propDecorators: { data: [{
+                type: Input
+            }], rd: [{
+                type: Input
+            }] } });
+
+class BasicTextComponent extends BasicService$2 {
+    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$2 {
+    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$2 {
+    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$2 {
+    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$2 {
+    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$2 {
+    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$2 {
+    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$2 {
+    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$2 {
+    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$2 {
+    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$2 {
+    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$2 {
+    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$2 = {
+    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$2[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$2 = [GramBiBasicComponent];
+const COMPONENTS_NOROUNT$2 = [
+    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$2] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBasicModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...COMPONENTS$2, ...COMPONENTS_NOROUNT$2],
+                    exports: [...COMPONENTS$2],
+                }]
+        }] });
+
+let BasicService$1 = 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);
+        }
+    }
+    /**
+     * 透明度
+     * @returns
+     */
+    get opacity() {
+        let res = Number((this.data.border.bgOpacity / 100).toFixed(2));
+        return res;
+    }
+    constructor(globalSrv) {
+        this.globalSrv = globalSrv;
+    }
+    ngOnDestroy() {
+    }
+    initPageData(value) {
+        if (value) {
+            let x = parseFloat((value.width / this.width).toFixed(2));
+            let y = parseFloat((value.height / this.height).toFixed(2));
+            this.transform = `scale(${x}, ${y})`;
+        }
+    }
+    /**
+     * 渐变色
+     * @returns
+     */
+    generateGradientData() {
+        let template = "";
+        let direction = this.data.border.bgDirection;
+        if (this.data.border.bgColorType == "single" || direction == undefined || direction == null || direction == "") {
+            return "";
+        }
+        switch (direction) {
+            case "to right": //从左到右
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to left": //从右到左
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="100%" y1="0%" x2="0%" y2="0%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to bottom": //从上到下
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to top": //从下到上
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="0%" y1="100%" x2="0%" y2="0%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to bottom right": //从左上到右下
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to bottom left": //从右上到左下
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="100%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to top right": //从左下到右上
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="0%" y1="100%" x2="100%" y2="0%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to top left": //从右下到左上
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="100%" y1="100%" x2="0%" y2="0%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+        }
+        return template;
+    }
+    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$1, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }], propDecorators: { data: [{
+                type: Input
+            }], rd: [{
+                type: Input
+            }] } });
+
+class BorderComponent1 extends BasicService$1 {
+    globalSrv;
+    width = 450;
+    height = 320;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        let coordinates = this.generateCoordinates();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+            <svg width="${this.data.width}" height="${this.data.height}" class="border" style="opacity: ${this.opacity};">
+                ${defs}
+                <polygon fill="${fill}" points="${coordinates}"></polygon>
+            </svg>
+            <svg width="150px" height="150px" class="left-top border">
+                <polygon
+                    points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};${this.data.border.mainColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="${this.data.border.secondColor}">
+                    <animate attributeName="fill" values="${this.data.border.secondColor};${this.data.border.mainColor};${this.data.border.secondColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};transparent" dur="1s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+            </svg>
+            <svg width="150px" height="150px" class="right-top border">
+                <polygon
+                    points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};${this.data.border.mainColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="${this.data.border.secondColor}">
+                    <animate attributeName="fill" values="${this.data.border.secondColor};${this.data.border.mainColor};${this.data.border.secondColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};transparent" dur="1s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+            </svg>
+            <svg width="150px" height="150px" class="left-bottom border">
+                <polygon
+                    points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};${this.data.border.mainColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="${this.data.border.secondColor}">
+                    <animate attributeName="fill" values="${this.data.border.secondColor};${this.data.border.mainColor};${this.data.border.secondColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};transparent" dur="1s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+            </svg>
+            <svg width="150px" height="150px" class="right-bottom border">
+                <polygon
+                    points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};${this.data.border.mainColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="${this.data.border.secondColor}">
+                    <animate attributeName="fill" values="${this.data.border.secondColor};${this.data.border.mainColor};${this.data.border.secondColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};transparent" dur="1s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+            </svg>
+        `;
+        return template;
+    }
+    generateCoordinates() {
+        // 基准宽度和高度（从给出的第一个449x319的坐标中提取）
+        const baseWidth = 449;
+        const baseHeight = 319;
+        // 原始坐标（基于449x319的初始坐标值）
+        const baseCoordinates = [
+            [10, 27], [10, 292], [13, 295], [13, 298], [24, 308],
+            [38, 308], [41, 311], [73, 311], [75, 309], [81, 309],
+            [85, 313], [364, 313], [368, 309], [374, 309], [376, 311],
+            [408, 311], [411, 308], [425, 308], [436, 298], [436, 295],
+            [439, 292], [439, 27], [436, 25], [436, 21], [425, 11],
+            [411, 11], [408, 8], [376, 8], [374, 10], [368, 10],
+            [364, 6], [85, 6], [81, 10], [75, 10], [73, 8],
+            [41, 8], [38, 11], [24, 11], [13, 21], [13, 24]
+        ];
+        // 宽度和高度的缩放因子
+        const widthScale = this.data.width / baseWidth;
+        const heightScale = this.data.height / baseHeight;
+        // 根据缩放因子调整坐标值
+        const scaledCoordinates = baseCoordinates.map(([x, y]) => {
+            const scaledX = Math.round(x * widthScale);
+            const scaledY = Math.round(y * heightScale);
+            return `${scaledX}, ${scaledY}`;
+        });
+        // 将坐标数组转换为逗号分隔的字符串
+        return scaledCoordinates.join(" ");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent1, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent1, isStandalone: true, selector: "border1", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{transform-origin:unset}:host ::ng-deep .right-top{right:0;top:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);transform-origin:top}:host ::ng-deep .right-bottom{right:0;bottom:0;transform:rotateX(180deg) rotateY(180deg) translate(150px,150px);transform-origin:right bottom}:host ::ng-deep .left-bottom{bottom:0;left:0;-webkit-transform:rotateX(180deg);transform:rotateX(180deg);transform-origin:left}\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: BorderComponent1, decorators: [{
+            type: Component,
+            args: [{ selector: 'border1', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{transform-origin:unset}:host ::ng-deep .right-top{right:0;top:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);transform-origin:top}:host ::ng-deep .right-bottom{right:0;bottom:0;transform:rotateX(180deg) rotateY(180deg) translate(150px,150px);transform-origin:right bottom}:host ::ng-deep .left-bottom{bottom:0;left:0;-webkit-transform:rotateX(180deg);transform:rotateX(180deg);transform-origin:left}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent2 extends BasicService$1 {
+    globalSrv;
+    width = 450;
+    height = 320;
+    svgTemplate = ``;
+    points1 = "7, 7 441, 7 441, 311 7, 311";
+    points2 = "2, 2 446 ,2 446, 316 2, 316 2, 2";
+    points3 = "6, 6 442, 6 442, 312 6, 312 6, 6";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        if (this.data && this.data.width && this.data.height) {
+            this.points1 = `7, 7 ${this.data.width - 7}, 7 ${this.data.width - 7}, ${this.data.height - 7} 7, ${this.data.height}`;
+            this.points2 = `2, 2 ${this.data.width - 2} ,2 ${this.data.width - 2}, ${this.data.height - 2} 2, ${this.data.height - 2} 2, 2`;
+            this.points3 = `6, 6 ${this.data.width - 7}, 6 ${this.data.width - 7}, ${this.data.height - 6} 6, ${this.data.height - 6} 6, 6`;
+            this.svgTemplate = this.initTemplate();
+        }
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" class="border"  style="opacity: ${this.opacity};">
+        ${defs}
+        <polygon fill="${fill}" points="${this.points1}"></polygon>
+        <polyline points="${this.points2}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points3}" stroke="${this.data.border.secondColor}"></polyline>
+        <circle cx="11" cy="11" r="1" fill="${this.data.border.mainColor}"></circle>
+        <circle cx="${this.data.width - 11}" cy="11" r="1" fill="${this.data.border.mainColor}"></circle>
+        <circle cx="${this.data.width - 11}" cy="${this.data.height - 11}" r="1" fill="${this.data.border.mainColor}"></circle>
+        <circle cx="11" cy="${this.data.height - 11}" r="1" fill="${this.data.border.mainColor}"></circle>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent2, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent2, isStandalone: true, selector: "border2", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], 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: BorderComponent2, decorators: [{
+            type: Component,
+            args: [{ selector: 'border2', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent3 extends BasicService$1 {
+    globalSrv;
+    width = 450;
+    height = 320;
+    svgTemplate = ``;
+    points1 = "23, 23 425, 23 425, 295 23, 295";
+    points2 = "4, 4 427 ,4 427, 297 4, 297 4, 4";
+    points3 = "10, 10 433, 10 433, 303 10, 303 10, 10";
+    points4 = "16, 16 439, 16 439, 309 16, 309 16, 16";
+    points5 = "22, 22 445, 22 445, 315 22, 315 22, 22";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `23, 23 ${this.data.width - 24}, 23 ${this.data.width - 24}, ${this.data.height - 24} 23, ${this.data.height - 24}`;
+        this.points2 = `4, 4 ${this.data.width - 23} ,4 ${this.data.width - 23}, ${this.data.height - 22} 4, ${this.data.height - 22} 4, 4`;
+        this.points3 = `10, 10 ${this.data.width - 16}, 10 ${this.data.width - 16}, ${this.data.height - 16} 10, ${this.data.height - 16} 10, 10`;
+        this.points4 = `16, 16 ${this.data.width - 10}, 16 ${this.data.width - 10},  ${this.data.height - 10} 16,  ${this.data.height - 10} 16, 16`;
+        this.points5 = `22, 22 ${this.data.width - 4}, 22 ${this.data.width - 4},  ${this.data.height - 4} 22,  ${this.data.height - 4} 22, 22`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" class="border"  style="opacity: ${this.opacity};">
+        ${defs}
+        <polygon fill="${fill}" points="${this.points1}"></polygon>
+        <polyline points="${this.points2}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points3}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points4}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points5}" stroke="${this.data.border.secondColor}"></polyline>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent3, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent3, isStandalone: true, selector: "border3", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], 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: BorderComponent3, decorators: [{
+            type: Component,
+            args: [{ selector: 'border3', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent4 extends BasicService$1 {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `
+    434, 22 170, 22 150, 7 40, 7 28, 21 32, 24
+    16, 42 16, 287 41, 312 434, 312
+  `;
+    points2 = `
+    145, 314 40, 314 10, 284
+    10, 40 40, 5 150, 5 170, 20 434, 20
+  `;
+    points3 = "245, 318 36, 318 14, 296 14, 219";
+    points4 = "7, 279 7, 244";
+    points5 = "28, 24 13, 41 13, 64";
+    points6 = "5, 45 5, 140";
+    points7 = "14, 75 14, 180";
+    points8 = "55, 11 147, 11 167, 26 250, 26";
+    points9 = "158, 5 173, 16";
+    points10 = "200, 17 439, 17";
+    points11 = "385, 17 439, 17";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `
+      ${this.data.width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
+      16, 42 16, ${this.data.height - 32} 41, ${this.data.height - 7} ${this.data.width - 15}, ${this.data.height - 7}
+    `;
+        this.points2 = `
+      145, ${this.data.height - 5} 40, ${this.data.height - 5} 10, ${this.data.height - 35}
+      10, 40 40, 5 150, 5 170, 20 ${this.data.width - 5}, 20
+    `;
+        this.points3 = `245, ${this.data.height - 1} 36, ${this.data.height - 1} 14, ${this.data.height - 23} 14, ${this.data.height - 100}`;
+        this.points4 = `7, ${this.data.height - 40} 7, ${this.data.height - 75}`;
+        this.points5 = `28, 24 13, 41 13, 64`;
+        this.points6 = "5, 45 5, 140";
+        this.points7 = "14, 75 14, 180";
+        this.points8 = "55, 11 147, 11 167, 26 250, 26";
+        this.points9 = "158, 5 173, 16";
+        this.points10 = `200, 17 ${this.data.width - 10}, 17`;
+        this.points11 = `385, 17 ${this.data.width - 10}, 17`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" class="border"  style="opacity: ${this.opacity};">
+        ${defs}
+        <polygon fill="${fill}" points="${this.points1}"></polygon>
+        <polyline points="${this.points2}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points3}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points4}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points5}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points6}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points7}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points8}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points9}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points10}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points11}" stroke="${this.data.border.secondColor}"></polyline>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent4, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent4, isStandalone: true, selector: "border4", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], 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: BorderComponent4, decorators: [{
+            type: Component,
+            args: [{ selector: 'border4', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent5 extends BasicService$1 {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `10, 22 427, 22 427, 233 365, 295 10, 295`;
+    points2 = `
+    8, 5 444, 5 444, 219 
+    349, 314 8, 314 8, 5 `;
+    points3 = `
+    3, 5 429, 5 429, 259 
+    375, 314 3, 314 3, 5`;
+    points4 = `50, 13 414, 13`;
+    points5 = `15, 20 414, 20`;
+    points6 = "15, 299 339, 299";
+    points7 = "15, 306 339, 306";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `10, 22 ${this.data.width - 22}, 22 ${this.data.width - 22}, ${this.data.height - 86} ${this.data.width - 84}, ${this.data.height - 24} 10, ${this.data.height - 24}`;
+        this.points2 = `
+      8, 5 ${this.data.width - 5}, 5 ${this.data.width - 5}, ${this.data.height - 100} 
+      ${this.data.width - 100}, ${this.data.height - 5} 8, ${this.data.height - 5} 8, 5
+    `;
+        this.points3 = `
+      3, 5 ${this.data.width - 20}, 5 ${this.data.width - 20}, ${this.data.height - 60} 
+      ${this.data.width - 74}, ${this.data.height - 5} 3, ${this.data.width - 74} 3, 5
+    `;
+        this.points4 = `50, 13 ${this.data.width - 35}, 13`;
+        this.points5 = `15, 20 ${this.data.width - 35}, 20`;
+        this.points6 = `15, ${this.data.height - 20} ${this.data.width - 110}, ${this.data.height - 20}`;
+        this.points7 = `15, ${this.data.height - 13} ${this.data.width - 110}, ${this.data.height - 13}`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" class="border"  style="opacity: ${this.opacity};">
+        ${defs}
+        <polygon fill="${fill}" points="${this.points1}"></polygon> 
+        <polyline points="${this.points2}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points3}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points4}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points5}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points6}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points7}" stroke="${this.data.border.secondColor}"></polyline>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent5, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent5, isStandalone: true, selector: "border5", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n  <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\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: BorderComponent5, decorators: [{
+            type: Component,
+            args: [{ selector: 'border5', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n  <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent6 extends BasicService$1 {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `9, 7 440, 7 440, 312 9, 312`;
+    points2 = `10, 4 439, 4`;
+    points3 = `10, 315 439, 315`;
+    points4 = `5, 70 5, 249`;
+    points5 = `444, 70 444, 249`;
+    points6 = "3, 10, 3, 50";
+    points7 = "7, 30 7, 80";
+    points8 = `446, 10 446, 50`;
+    points9 = `442, 30 442, 80`;
+    points10 = `3, 309 3, 269`;
+    points11 = `7, 289 7, 239`;
+    points12 = `446, 309 446, 269`;
+    points13 = `442, 289 442, 239`;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `9, 7 ${this.data.width - 9}, 7 ${this.data.width - 9}, ${this.data.height - 7} 9, ${this.data.height - 7}`;
+        this.points2 = `10, 4  ${this.data.width - 10}, 4`;
+        this.points3 = `10,  ${this.data.height - 4}  ${this.data.width - 10}, ${this.data.height - 4}`;
+        this.points4 = `5, 70 5, ${this.data.height - 70}`;
+        this.points5 = `${this.data.width - 5}, 70 ${this.data.width - 5}, ${this.data.height - 70}`;
+        this.points6 = "3, 10, 3, 50";
+        this.points7 = "7, 30 7, 80";
+        this.points8 = `${this.data.width - 3}, 10 ${this.data.width - 3}, 50`;
+        this.points9 = `${this.data.width - 7}, 30 ${this.data.width - 7}, 80`;
+        this.points10 = `3, ${this.data.height - 10} 3, ${this.data.height - 50}`;
+        this.points11 = `7, ${this.data.height - 30} 7, ${this.data.height - 80}`;
+        this.points12 = `${this.data.width - 3}, ${this.data.height - 10} ${this.data.width - 3}, ${this.data.height - 50}`;
+        this.points13 = `${this.data.width - 7}, ${this.data.height - 30} ${this.data.width - 7}, ${this.data.height - 80}`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" class="border"  style="opacity: ${this.opacity};">
+        ${defs}
+        <polygon fill="${fill}" points="${this.points1}"></polygon> 
+        <circle cx="5" cy="5" r="2" fill="${this.data.border.secondColor}"></circle>
+        <circle cx="444" cy="5" r="2" fill="${this.data.border.secondColor}"></circle>
+        <circle cx="444" cy="314" r="2" fill="${this.data.border.secondColor}"></circle>
+        <circle cx="5" cy="314" r="2" fill="${this.data.border.secondColor}"></circle>
+        <polyline points="${this.points2}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points3}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points4}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points5}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points6}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points7}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points8}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points9}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points10}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points11}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points12}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points13}" stroke="${this.data.border.mainColor}"></polyline>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent6, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent6, isStandalone: true, selector: "border6", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\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: BorderComponent6, decorators: [{
+            type: Component,
+            args: [{ selector: 'border6', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent7 extends BasicService$1 {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `0, 25 0, 0 25, 0`;
+    points2 = `422, 0 447, 0 447, 25`;
+    points3 = `422, 317 447, 317 447, 292`;
+    points4 = `0, 292 0, 317 25, 317`;
+    points5 = `0, 10 0, 0 10, 0`;
+    points6 = "437, 0 447, 0 447, 10";
+    points7 = `437, 317 447, 317 447, 307`;
+    points8 = `0, 307 0, 317 10, 317`;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        let w = this.data.width;
+        let h = this.data.height;
+        this.points1 = `0, 25 0, 0 25, 0`;
+        this.points2 = `${w - 25}, 0 ${w}, 0 ${w}, 25`;
+        this.points3 = `${w - 25}, ${h} ${w}, ${h} ${w}, ${h - 25}`;
+        this.points4 = `0, ${h - 25} 0, ${h} 25, ${h}`;
+        this.points5 = `0, 10 0, 0 10, 0`;
+        this.points6 = `${w - 10}, 0 ${w}, 0 ${w}, 10`;
+        this.points7 = `${w - 10}, ${h} ${w}, ${h} ${w}, ${h - 10}`;
+        this.points8 = `0, ${h - 10} 0, ${h} 10, ${h}`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let bgColor = "transparent";
+        let svgBgColor = "";
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                bgColor = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            let direction = this.data.border.bgDirection;
+            if (direction != undefined && direction != null && direction != "") {
+                svgBgColor = `background:linear-gradient(${this.data.border.bgDirection}, ${this.data.border.bgColor0}, ${this.data.border.bgColor1})`;
+            }
+        }
+        let template = `
+      <div class="border-box" style="width:${this.data.width}px;height:${this.data.height}px;background-color:${bgColor};box-shadow: ${this.data.border.mainColor} 0px 0px 40px inset;border: 1px solid ${this.data.border.mainColor};">
+        <svg width="${this.data.width}" height="${this.data.height}" style="opacity:${this.opacity};${svgBgColor}">
+            <polyline points="${this.points1}" stroke="${this.data.border.mainColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points2}" stroke="${this.data.border.mainColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points3}" stroke="${this.data.border.mainColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points4}" stroke="${this.data.border.mainColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points5}" stroke="${this.data.border.secondColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points6}" stroke="${this.data.border.secondColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points7}" stroke="${this.data.border.secondColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points8}" stroke="${this.data.border.secondColor}" class="dv-line-width"></polyline>
+        </svg>
+    </div>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent7, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent7, isStandalone: true, selector: "border7", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-linecap:round}:host ::ng-deep .dv-line-width{stroke-width:4}\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: BorderComponent7, decorators: [{
+            type: Component,
+            args: [{ selector: 'border7', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-linecap:round}:host ::ng-deep .dv-line-width{stroke-width:4}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent8 extends BasicService$1 {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `5, 5 444, 5 444 314 5, 314`;
+    points2 = `M2.5, 2.5 L446.5, 2.5 L446.5, 316.5 L2.5, 316.5 L2.5, 2.5`;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `5, 5 ${this.data.width - 5}, 5 ${this.data.width - 5} ${this.data.height - 3} 5, ${this.data.height - 3}`;
+        this.points2 = `M2.5, 2.5 L${this.data.width - 1.5}, 2.5 L${this.data.width - 1.5}, ${this.data.height - 0.5} L2.5, ${this.data.height - 0.5} L2.5, 2.5`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let id = Guid.createId();
+        let template = `
+    <svg width="${this.data.width}" height="${this.data.height}" class="dv-border-svg-container" style="opacity: ${this.opacity};">
+      ${defs}
+      <defs>
+          <path id="border-box-8-path-${id}"
+              d="${this.points2}" fill="transparent"></path>
+          <radialGradient id="border-box-8-gradient-${id}" cx="50%" cy="50%" r="50%">
+              <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
+              <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
+          </radialGradient>
+          <mask id="border-box-8-mask-${id}">
+              <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-${id})">
+                  <animateMotion dur="3s" path="M2.5, 2.5 L446.5, 2.5 L446.5, 316.5 L2.5, 316.5 L2.5, 2.5" rotate="auto"
+                      repeatCount="indefinite"></animateMotion>
+              </circle>
+          </mask>
+      </defs>
+      <polygon fill="${fill}" points="${this.points1}"></polygon>
+      <use stroke-width="1" xlink:href="#border-box-8-path-${id}" stroke="${this.data.border.mainColor}"></use>
+      <use stroke-width="3" xlink:href="#border-box-8-path-${id}"
+          mask="url(#border-box-8-mask-${id})" stroke="${this.data.border.secondColor}">
+          <animate attributeName="stroke-dasharray" from="0, 1526" to="1526, 0" dur="3s" repeatCount="indefinite">
+          </animate>
+      </use>
+    </svg> 
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent8, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent8, isStandalone: true, selector: "border8", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], 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: BorderComponent8, decorators: [{
+            type: Component,
+            args: [{ selector: 'border8', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent9 extends BasicService$1 {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `
+  15, 9 45.900000000000006, 9 48.900000000000006, 6 235.48000000000002, 6
+  239.48000000000002, 10 253.41999999999996, 10 258.41999999999996, 6
+  406.1, 6 410.1, 10 439, 10 439, 25.900000000000002
+  443, 30.900000000000002 443, 256.20000000000005 439, 261.20000000000005
+  439, 309 420.08000000000004, 309  415.08000000000004, 313
+  11, 313 11, 45.85 15, 40.85
+  `;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.generateSvg();
+    }
+    generateSvg() {
+        // 定义原始尺寸
+        const originalWidth = 449;
+        const originalHeight = 319;
+        // 计算缩放比例
+        const widthRatio = this.data.width / originalWidth;
+        const heightRatio = this.data.height / originalHeight;
+        // 定义固定边框宽度
+        const borderWidth = 3; // 固定边框宽度
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let id = Guid.createId();
+        // 返回 SVG 字符串
+        return `
+    <svg width="${this.data.width}" height="${this.data.height}" class="dv-border-svg-container">
+      ${defs}
+      <defs>
+        <linearGradient id="border-box-gradient-${id}" x1="0%" y1="0%" x2="100%" y2="100%">
+          <animate attributeName="x1" values="0%;100%;0%" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+          <animate attributeName="x2" values="100%;0%;100%" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+          <stop offset="0%" stop-color="${this.data.border.mainColor}">
+            <animate attributeName="stop-color" values="${this.data.border.mainColor};${this.data.border.secondColor};${this.data.border.mainColor}" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+          </stop>
+          <stop offset="100%" stop-color="${this.data.border.secondColor}">
+            <animate attributeName="stop-color" values="${this.data.border.secondColor};${this.data.border.mainColor};${this.data.border.secondColor}" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+          </stop>
+        </linearGradient>
+        <mask id="border-box-mask-${id}">
+          <polyline stroke="#fff" stroke-width="${borderWidth}" fill="transparent"
+            points="${8}, ${127.6 * heightRatio} ${8}, ${3}
+            ${186.6 * widthRatio}, ${3}"></polyline>
+          <polyline fill="#fff"
+            points="${8}, ${47.85 * heightRatio} ${8}, ${3}
+            ${51.9 * widthRatio}, ${3} ${44.9 * widthRatio}, ${8}
+            ${14}, ${8} ${14}, ${40.85 * heightRatio}"></polyline>
+          <polyline stroke="#fff" stroke-width="${borderWidth}" fill="transparent"
+            points="${224.5 * widthRatio}, ${3} ${446 * widthRatio}, ${3}
+            ${446 * widthRatio}, ${79.75 * heightRatio}"></polyline>
+          <polyline fill="#fff"
+            points="${233.48 * widthRatio}, ${3} ${260.42 * widthRatio}, ${3}
+            ${253.42 * widthRatio}, ${9} ${240.48 * widthRatio}, ${9}"></polyline>
+          
+          <polyline fill="#fff"
+            points="${404 * widthRatio}, ${3} ${446 * widthRatio}, ${3}
+            ${446 * widthRatio}, ${30.2 * heightRatio} ${443.2 * widthRatio}, ${24.9 * heightRatio}
+            ${443 * widthRatio}, ${9} ${411.1 * widthRatio}, ${9}"></polyline>
+
+          <polyline stroke="#fff" stroke-width="${borderWidth}" fill="transparent"
+            points="${8}, ${159.5 * heightRatio} ${8}, ${316 * heightRatio}
+            ${141.7 * widthRatio}, ${316 * heightRatio}"></polyline>
+          <polyline fill="#fff"
+            points="${8}, ${175.45 * heightRatio} ${8}, ${223.3 * heightRatio}
+            ${2}, ${216.3 * heightRatio} ${2}, ${182.45 * heightRatio}"></polyline>
+          <polyline stroke="#fff" stroke-width="${borderWidth}" fill="transparent"
+            points="${157.15 * widthRatio}, ${316 * heightRatio} ${446 * widthRatio}, ${316 * heightRatio}
+            ${446 * widthRatio}, ${111.65 * heightRatio}"></polyline>
+            
+          <polyline fill="#fff"
+            points="${413.08 * widthRatio}, ${316 * heightRatio} ${446 * widthRatio}, ${316 * heightRatio}
+            ${446 * widthRatio}, ${255.2 * heightRatio} ${443 * widthRatio}, ${262.2 * heightRatio}
+            ${443 * widthRatio}, ${313 * heightRatio} ${420.08 * widthRatio}, ${313 * heightRatio}"></polyline>
+        </mask>
+      </defs>
+      <polygon fill="${fill}"
+        points="${15 * widthRatio}, ${9 * heightRatio} ${45.9 * widthRatio}, ${9 * heightRatio}
+        ${48.9 * widthRatio}, ${6 * heightRatio} ${235.48 * widthRatio}, ${6 * heightRatio}
+        ${239.48 * widthRatio}, ${10 * heightRatio} ${253.42 * widthRatio}, ${10 * heightRatio}
+        ${258.42 * widthRatio}, ${6 * heightRatio} ${406.1 * widthRatio}, ${6 * heightRatio}
+        ${410.1 * widthRatio}, ${10 * heightRatio} ${439 * widthRatio}, ${10 * heightRatio}
+        ${439 * widthRatio}, ${25.9 * heightRatio} ${443 * widthRatio}, ${30.9 * heightRatio}
+        ${443 * widthRatio}, ${256.2 * heightRatio} ${439 * widthRatio}, ${261.2 * heightRatio}
+        ${439 * widthRatio}, ${309 * heightRatio} ${420.08 * widthRatio}, ${309 * heightRatio}
+        ${415.08 * widthRatio}, ${313 * heightRatio} ${11 * widthRatio}, ${313 * heightRatio}
+        ${11 * widthRatio}, ${45.85 * heightRatio} ${15 * widthRatio}, ${40.85 * heightRatio}"></polygon>
+      <rect x="0" y="0" width="${this.data.width}" height="${this.data.height}"
+        fill="url(#border-box-gradient)" mask="url(#border-box-mask)"></rect>
+    </svg>
+  `;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent9, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent9, isStandalone: true, selector: "border9", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [""], 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: BorderComponent9, decorators: [{
+            type: Component,
+            args: [{ selector: 'border9', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent10 extends BasicService$1 {
+    globalSrv;
+    width = 450;
+    height = 320;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.generateSvg();
+    }
+    generateSvg() {
+        // 计算缩放因子
+        const widthScale = this.data.width / 449; // 原始SVG宽度
+        const heightScale = this.data.height / 319; // 原始SVG高度
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let id = Guid.createId();
+        return `
+      <svg width="${this.data.width}" height="${this.data.height}" class="dv-border-svg-container" style="opacity: ${this.opacity};">
+        ${defs}
+        <defs>
+          <filter id="border-box-10-filterId-${id}" height="150%" width="150%" x="-25%" y="-25%">
+            <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken"></feMorphology>
+            <feGaussianBlur in="thicken" stdDeviation="3" result="blurred"></feGaussianBlur>
+            <feFlood result="glowColor" flood-color="${this.data.border.secondColor}"></feFlood>
+            <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored"></feComposite>
+            <feMerge>
+              <feMergeNode in="softGlowColored"></feMergeNode>
+              <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+          </filter>
+        </defs>
+        <polygon fill="${fill}" points="
+          ${20 * widthScale}, ${32 * heightScale}
+          ${99.5 * widthScale}, ${32 * heightScale}
+          ${119.5 * widthScale}, ${53 * heightScale}
+          ${329.5 * widthScale}, ${53 * heightScale}
+          ${349.5 * widthScale}, ${32 * heightScale}
+          ${429 * widthScale}, ${32 * heightScale}
+          ${441 * widthScale}, ${48 * heightScale}
+          ${441 * widthScale}, ${294 * heightScale}
+          ${429 * widthScale}, ${311 * heightScale}
+          ${20 * widthScale}, ${311 * heightScale}
+          ${8 * widthScale}, ${294 * heightScale}
+          ${8 * widthScale}, ${50 * heightScale}
+        "></polygon>
+        <polyline filter="url(#border-box-11-filterId)" points="
+          ${99.5 * widthScale}, ${30 * heightScale}
+          ${20 * widthScale}, ${30 * heightScale}
+          ${7 * widthScale}, ${50 * heightScale}
+          ${7 * widthScale}, ${126 * heightScale}
+          ${13 * widthScale}, ${131 * heightScale}
+          ${13 * widthScale}, ${211 * heightScale}
+          ${7 * widthScale}, ${216 * heightScale}
+          ${7 * widthScale}, ${292 * heightScale}
+          ${20 * widthScale}, ${312 * heightScale}
+          ${429 * widthScale}, ${312 * heightScale}
+          ${442 * widthScale}, ${292 * heightScale}
+          ${442 * widthScale}, ${216 * heightScale}
+          ${436 * widthScale}, ${211 * heightScale}
+          ${436 * widthScale}, ${131 * heightScale}
+          ${442 * widthScale}, ${126 * heightScale}
+          ${442 * widthScale}, ${50 * heightScale}
+          ${429 * widthScale}, ${30 * heightScale}
+          ${349.5 * widthScale}, ${30 * heightScale}
+          ${329.5 * widthScale}, ${7 * heightScale}
+          ${119.5 * widthScale}, ${7 * heightScale}
+          ${99.5 * widthScale}, ${30 * heightScale}
+          ${119.5 * widthScale}, ${52 * heightScale}
+          ${329.5 * widthScale}, ${52 * heightScale}
+          ${349.5 * widthScale}, ${30 * heightScale}
+        " stroke="${this.data.border.mainColor}"></polyline>
+        <polygon fill="transparent" points="
+          ${344.5 * widthScale}, ${30 * heightScale}
+          ${328.5 * widthScale}, ${11 * heightScale}
+          ${322.5 * widthScale}, ${11 * heightScale}
+          ${341.5 * widthScale}, ${34 * heightScale}
+        " stroke="${this.data.border.mainColor}"></polygon>
+        <polygon fill="transparent" points="
+          ${104.5 * widthScale}, ${30 * heightScale}
+          ${121.5 * widthScale}, ${49 * heightScale}
+          ${127.5 * widthScale}, ${49 * heightScale}
+          ${107.5 * widthScale}, ${26 * heightScale}
+        " stroke="${this.data.border.mainColor}"></polygon>
+        <polygon fill="rgba(0,206,209,0.3)" filter="url(#border-box-11-filterId)" points="
+          ${338.5 * widthScale}, ${37 * heightScale}
+          ${317.5 * widthScale}, ${11 * heightScale}
+          ${122.5 * widthScale}, ${11 * heightScale}
+          ${110.5 * widthScale}, ${23 * heightScale}
+          ${132.5 * widthScale}, ${49 * heightScale}
+          ${327.5 * widthScale}, ${49 * heightScale}
+        " stroke="${this.data.border.mainColor}"></polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="1" points="
+          ${89.5 * widthScale}, ${37 * heightScale}
+          ${68.5 * widthScale}, ${37 * heightScale}
+          ${74.5 * widthScale}, ${46 * heightScale}
+          ${95.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="0.7" points="
+          ${59.5 * widthScale}, ${37 * heightScale}
+          ${38.5 * widthScale}, ${37 * heightScale}
+          ${44.5 * widthScale}, ${46 * heightScale}
+          ${65.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="0.5" points="
+          ${29.5 * widthScale}, ${37 * heightScale}
+          ${8.5 * widthScale}, ${37 * heightScale}
+          ${14.5 * widthScale}, ${46 * heightScale}
+          ${35.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="1" points="
+          ${379.5 * widthScale}, ${37 * heightScale}
+          ${358.5 * widthScale}, ${37 * heightScale}
+          ${352.5 * widthScale}, ${46 * heightScale}
+          ${373.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="0.7" points="
+          ${409.5 * widthScale}, ${37 * heightScale}
+          ${388.5 * widthScale}, ${37 * heightScale}
+          ${382.5 * widthScale}, ${46 * heightScale}
+          ${403.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="0.5" points="
+          ${439.5 * widthScale}, ${37 * heightScale}
+          ${418.5 * widthScale}, ${37 * heightScale}
+          ${412.5 * widthScale}, ${46 * heightScale}
+          ${433.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <text x="${224.5 * widthScale}" y="${32 * heightScale}" fill="#fff" font-size="${18 * heightScale}" text-anchor="middle" dominant-baseline="middle" class="dv-border-box-11-title"></text>
+        
+      </svg>
+    `;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent10, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent10, isStandalone: true, selector: "border10", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\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: BorderComponent10, decorators: [{
+            type: Component,
+            args: [{ selector: 'border10', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent11 extends BasicService$1 {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `
+    M15 5 L 434 5 Q 444 5, 444 15
+    L 444 304 Q 444 314, 434 314
+    L 15, 314 Q 5 314 5 304 L 5 15
+    Q 5 5 15 5
+  `;
+    points2 = `M 429 5 L 434 5 Q 444 5 444 15 L 444 20`;
+    points3 = `
+    M 429 314 L 434 314
+    Q 444 314 444 304
+    L 444 299
+  `;
+    points4 = `
+    M 20 314 L 15 314
+    Q 5 314 5 304
+    L 5 299
+  `;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `
+      M15 5 L ${this.data.width - 15} 5 Q ${this.data.width - 5} 5, ${this.data.width - 5} 15
+      L ${this.data.width - 5} ${this.data.height - 15} Q ${this.data.width - 5} ${this.data.height - 5}, ${this.data.width - 15} ${this.data.height - 5}
+      L 15, ${this.data.height - 5} Q 5 ${this.data.height - 5} 5 ${this.data.height - 15} L 5 15
+      Q 5 5 15 5
+    `;
+        this.points2 = `M ${this.data.width - 20} 5 L ${this.data.width - 15} 5 Q ${this.data.width - 5} 5 ${this.data.width - 5} 15 L ${this.data.width - 5} 20`;
+        this.points3 = `
+      M ${this.data.width - 20} ${this.data.height - 5} L ${this.data.width - 15} ${this.data.height - 5}
+      Q ${this.data.width - 5} ${this.data.height - 5} ${this.data.width - 5} ${this.data.height - 15}
+      L ${this.data.width - 5} ${this.data.height - 20}
+    `;
+        this.points4 = `
+      M 20  ${this.data.height - 5} L 15  ${this.data.height - 5}
+      Q 5  ${this.data.height - 5} 5  ${this.data.height - 15}
+      L 5 ${this.data.height - 20}
+    `;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let id = Guid.createId();
+        let template = `
+    <svg width="${this.data.width}" height="${this.data.height}"  style="opacity: ${this.opacity};">
+      ${defs}
+      <defs>
+        <filter id="borderr-box-11-filterId-${id}" height="150%" width="150%" x="-25%"
+          y="-25%">
+          <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken"></feMorphology>
+          <feGaussianBlur in="thicken" stdDeviation="2" result="blurred"></feGaussianBlur>
+          <feFlood flood-color="rgba(0,206,209,0.7)" result="glowColor">
+            <animate attributeName="flood-color" values="
+              rgba(0,206,209,0.7);
+              rgba(0,206,209,0.3);
+              rgba(0,206,209,0.7);
+            " dur="3s" begin="0s" repeatCount="indefinite"></animate>
+          </feFlood>
+          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored"></feComposite>
+          <feMerge>
+            <feMergeNode in="softGlowColored"></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+      </defs>
+      <path fill="${fill}" stroke-width="2" stroke="${this.data.border.mainColor}" d="${this.points1}"></path>
+      <path stroke-width="2" fill="transparent" stroke-linecap="round"
+        filter="url(#borderr-box-11-filterId-${id})" d="M 20 5 L 15 5 Q 5 5 5 15 L 5 20"
+        stroke="${this.data.border.secondColor}"></path>
+      <path stroke-width="2" fill="transparent" stroke-linecap="round"
+        filter="url(#borderr-box-11-filterId-${id})" d="${this.points2}" stroke="${this.data.border.secondColor}">
+      </path>
+      <path stroke-width="2" fill="transparent" stroke-linecap="round"
+        filter="url(#borderr-box-11-filterId-${id})" d="${this.points3}" stroke="${this.data.border.secondColor}">
+      </path>
+      <path stroke-width="2" fill="transparent" stroke-linecap="round"
+        filter="url(#borderr-box-11-filterId-${id})" d="${this.points4}" stroke="${this.data.border.secondColor}">
+      </path>
+    </svg>
+  `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent11, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent11, isStandalone: true, selector: "border11", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n  <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], 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: BorderComponent11, decorators: [{
+            type: Component,
+            args: [{ selector: 'border11', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n  <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent12 extends BasicService$1 {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `
+    M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+    L 429 10 L 444 25
+    L 444 314 L 20 314
+    L 5 299 L 5 20
+  `;
+    points2 = `M 444 289 L 444 314 L 419 314`;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `
+      M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+      L ${this.data.width - 20} 10 L ${this.data.width - 5} 25
+      L ${this.data.width - 5} ${this.data.height - 5} L 20 ${this.data.height - 5}
+      L 5 ${this.data.height - 20} L 5 20
+    `;
+        this.points2 = `M ${this.data.width - 5} ${this.data.height - 30} L ${this.data.width - 5} ${this.data.height - 5} L ${this.data.width - 30} ${this.data.height - 5}`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" style="opacity: ${this.opacity};">
+        ${defs}
+        <path fill="${fill}" d="${this.points1}" stroke="${this.data.border.mainColor}"></path>
+        <path fill="transparent" stroke-width="3" stroke-linecap="round" stroke-dasharray="10, 5" d="M 16 9 L 61 9"
+            stroke="${this.data.border.mainColor}"></path>
+        <path fill="transparent" d="M 5 20 L 5 10 L 12 3  L 60 3 L 68 10" stroke="${this.data.border.secondColor}"></path>
+        <path fill="transparent" d="${this.points2}" stroke="${this.data.border.secondColor}"></path>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent12, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent12, isStandalone: true, selector: "border12", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], 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: BorderComponent12, decorators: [{
+            type: Component,
+            args: [{ selector: 'border12', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+const dynamicComponents$1 = {
+    border1: BorderComponent1,
+    border2: BorderComponent2,
+    border3: BorderComponent3,
+    border4: BorderComponent4,
+    border5: BorderComponent5,
+    border6: BorderComponent6,
+    border7: BorderComponent7,
+    border8: BorderComponent8,
+    border9: BorderComponent9,
+    border10: BorderComponent10,
+    border11: BorderComponent11,
+    border12: BorderComponent12
+};
+class GramBiBorderComponent {
+    componentFactoryResolver;
+    _data = null;
+    type = null;
+    component;
+    set data(value) {
+        this._data = value;
+        this.renderComponent();
+    }
+    get data() {
+        return this._data;
+    }
+    set rd(value) {
+        if (this.component) {
+            this.component.instance['rd'] = value;
+        }
+    }
+    /**
+     * 动态子组件
+     */
+    componentHost;
+    ngOnInit() { }
+    constructor(componentFactoryResolver) {
+        this.componentFactoryResolver = componentFactoryResolver;
+    }
+    renderComponent() {
+        if (this.data.secondType) {
+            this.type = this.data.secondType;
+        }
+        if (this.type) {
+            if (this.componentHost) {
+                this.componentHost.clear();
+                const compFactory = this.componentFactoryResolver.resolveComponentFactory(dynamicComponents$1[this.type]);
+                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: GramBiBorderComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GramBiBorderComponent, isStandalone: true, selector: "gram-bi-border", inputs: { data: "data", rd: "rd" }, viewQueries: [{ propertyName: "componentHost", first: true, predicate: ["componentHost"], descendants: true, read: ViewContainerRef, static: 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}:host ::ng-deep .dv-border-box{position:relative;height:100%;width:100%}:host ::ng-deep .border-box{display:inline-block;position:relative}:host ::ng-deep .border{position:absolute;display:block;border:0!important}:host ::ng-deep polyline{fill:none;stroke-width:1}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gram-bi-border', 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}:host ::ng-deep .dv-border-box{position:relative;height:100%;width:100%}:host ::ng-deep .border-box{display:inline-block;position:relative}:host ::ng-deep .border{position:absolute;display:block;border:0!important}:host ::ng-deep polyline{fill:none;stroke-width:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { data: [{
+                type: Input
+            }], rd: [{
+                type: Input
+            }], componentHost: [{
+                type: ViewChild,
+                args: ['componentHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+const COMPONENTS$1 = [GramBiBorderComponent];
+const COMPONENTS_NOROUNT$1 = [
+    BorderComponent1,
+    BorderComponent2,
+    BorderComponent3,
+    BorderComponent4,
+    BorderComponent5,
+    BorderComponent6,
+    BorderComponent7,
+    BorderComponent8,
+    BorderComponent9,
+    BorderComponent10,
+    BorderComponent11,
+    BorderComponent12
+];
+class GramBiBorderModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderModule, imports: [GramBiBorderComponent, BorderComponent1,
+            BorderComponent2,
+            BorderComponent3,
+            BorderComponent4,
+            BorderComponent5,
+            BorderComponent6,
+            BorderComponent7,
+            BorderComponent8,
+            BorderComponent9,
+            BorderComponent10,
+            BorderComponent11,
+            BorderComponent12], exports: [GramBiBorderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderModule, imports: [COMPONENTS_NOROUNT$1] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...COMPONENTS$1, ...COMPONENTS_NOROUNT$1],
+                    exports: [...COMPONENTS$1],
+                }]
+        }] });
+
+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 (this.data) {
+            let x = parseFloat((this.data.width / this.width).toFixed(2));
+            let y = parseFloat((this.data.height / this.height).toFixed(2));
+            this.transform = `scale(${x}, ${y})`;
+            this.initDecorator();
+        }
+    }
+    initDecorator() { }
+    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 DecoratorComponent1 extends BasicService {
+    globalSrv;
+    width = 200;
+    height = 50;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initDecorator() {
+        let template = `
+    <svg width="${this.data.width}" height="${this.data.height}" style="transform:${this.transform}">
+        <rect fill="${this.data.decorator.mainColor}" x="17.797619047619047" y="8.75" width="2.5" height="2.5">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};transparent" dur="1s" begin="1.4007378824996928"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="36.845238095238095" y="8.75" width="2.5" height="2.5">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};transparent" dur="1s" begin="1.2703866789872844"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="65.41666666666667" y="8.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="93.98809523809524" y="8.75" width="2.5" height="2.5"></rect>
+
+        <rect fill="${this.data.decorator.mainColor}" x="160.6547619047619" y="8.75" width="2.5" height="2.5"></rect>
+
+        <rect fill="${this.data.decorator.mainColor}" x="17.797619047619047" y="18.75" width="2.5" height="2.5">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};transparent" dur="1s" begin="1.585853099066676"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="46.36904761904762" y="18.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="74.94047619047619" y="18.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="93.98809523809524" y="18.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="103.51190476190476" y="18.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="132.08333333333334" y="18.75" width="2.5" height="2.5"></rect>
+
+        <rect fill="${this.data.decorator.mainColor}" x="8.273809523809524" y="28.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="36.845238095238095" y="28.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="46.36904761904762" y="28.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="55.89285714285714" y="28.75" width="2.5" height="2.5"></rect>
+
+        <rect fill="${this.data.decorator.mainColor}" x="170.17857142857142" y="28.75" width="2.5" height="2.5">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};transparent" dur="1s" begin="1.7408332360887258"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="189.22619047619048" y="28.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="8.273809523809524" y="38.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="27.32142857142857" y="38.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="46.36904761904762" y="38.75" width="2.5" height="2.5">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};transparent" dur="1s" begin="1.6532613131714866"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="74.94047619047619" y="38.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="113.03571428571428" y="38.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="151.13095238095238" y="38.75" width="2.5" height="2.5">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};transparent" dur="1s" begin="1.7141722761264608"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="170.17857142857142" y="38.75" width="2.5" height="2.5">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};transparent" dur="1s" begin="1.6865071622280947"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="179.70238095238096" y="38.75" width="2.5" height="2.5"></rect>
+        <rect fill="${this.data.decorator.secondColor}" x="187.97619047619048" y="17.5" width="5" height="5">
+            <animate attributeName="width" values="0;5" dur="2s" repeatCount="indefinite"></animate>
+            <animate attributeName="height" values="0;5" dur="2s" repeatCount="indefinite"></animate>
+            <animate attributeName="x" values="190.47619047619048;187.97619047619048" dur="2s" repeatCount="indefinite">
+            </animate>
+            <animate attributeName="y" values="20;17.5" dur="2s" repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.secondColor}" x="131.42857142857142" y="17.5" width="40" height="5">
+            <animate attributeName="width" values="0;40;0" dur="2s" repeatCount="indefinite"></animate>
+            <animate attributeName="x" values="171.42857142857142;131.42857142857142;171.42857142857142" dur="2s"
+                repeatCount="indefinite"></animate>
+        </rect>
+      </svg>
+    `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent1, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent1, isStandalone: true, selector: "decorator1", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{width:100%;height:100%;display:inline-block}\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: DecoratorComponent1, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator1', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{width:100%;height:100%;display:inline-block}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent2 extends BasicService {
+    globalSrv;
+    width = 300;
+    height = 35;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initDecorator() {
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" style="transform:${this.transform}">
+        <rect fill="${this.data.decorator.mainColor}" x="8.038461538461538" y="8.166666666666666" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.6939015385550487s" begin="1.9399920856617765"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="19.576923076923077" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="31.115384615384613" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="42.65384615384615" y="8.166666666666666" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.6181223528378998s" begin="1.5813407003554452"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="54.19230769230769" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="65.73076923076923" y="8.166666666666666" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.420212821915367s" begin="0.8615430854946635"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="77.26923076923077" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="88.8076923076923" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="100.34615384615384" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="111.88461538461539" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="123.42307692307692" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="134.96153846153845" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="146.5" y="8.166666666666666" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.7653535115838577s" begin="1.7287632898666847"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="158.03846153846155" y="8.166666666666666" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.4374089631940516s" begin="1.434960418461435"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="169.57692307692307" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="181.1153846153846" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="192.65384615384616" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="204.19230769230768" y="8.166666666666666" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.7547544598305156s" begin="0.6558397303658849"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="215.73076923076923" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="227.26923076923077" y="8.166666666666666" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.899278341715892s" begin="0.5640319508514504"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="238.8076923076923" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="250.34615384615384" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="261.88461538461536" y="8.166666666666666" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.0292146042175951s" begin="0.5538660426504616"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="273.4230769230769" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="284.96153846153845" y="8.166666666666666" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="8.038461538461538" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="19.576923076923077" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="31.115384615384613" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.3077290555388084s" begin="1.644163162106782"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="42.65384615384615" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="54.19230769230769" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="65.73076923076923" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.1502139679254386s" begin="0.22088420935450337"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="77.26923076923077" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.171898936715557s" begin="0.9231688099502069"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="88.8076923076923" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="100.34615384615384" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="111.88461538461539" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.8944443495945935s" begin="1.19309272707756"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="123.42307692307692" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="134.96153846153845" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.5989992208642025s" begin="0.9616475491226768"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="146.5" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="158.03846153846155" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.843108956648455s" begin="1.7204124524000197"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="169.57692307692307" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.3020330862923748s" begin="0.20708535541848638"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="181.1153846153846" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="192.65384615384616" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.4420630346486827s" begin="1.3803983202132302"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="204.19230769230768" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="215.73076923076923" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="227.26923076923077" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="238.8076923076923" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.2935452210855247s" begin="1.7862024994711616"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="250.34615384615384" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.7415724566618818s" begin="1.512871624416912"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="261.88461538461536" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.8337454556888064s" begin="0.7800928194202288"
+                repeatCount="indefinite"></animate>
+        </rect>
+        <rect fill="${this.data.decorator.mainColor}" x="273.4230769230769" y="19.833333333333332" width="7" height="7"></rect>
+        <rect fill="${this.data.decorator.mainColor}" x="284.96153846153845" y="19.833333333333332" width="7" height="7">
+            <animate attributeName="fill" values="${this.data.decorator.mainColor};${this.data.decorator.secondColor}" dur="1.2381779599767428s" begin="0.4759196513841868"
+                repeatCount="indefinite"></animate>
+        </rect>
+      </svg>
+    `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent2, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent2, isStandalone: true, selector: "decorator2", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent2, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator2', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent3 extends BasicService {
+    globalSrv;
+    width = 350;
+    height = 20;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initDecorator() {
+        let template = `
+      <svg width="${this.data}" heigh]="${this.data.height}">
+        <rect x="0" y="${this.data.height / 2}" width="${this.data.width}" height="1" fill="${this.data.decorator.mainColor}">
+            <animate attributeName="width" from="0" to="${this.data.width}" dur="${this.data.decorator.dur}s" calcMode="spline" keyTimes="0;1"
+                keySplines=".42,0,.58,1" repeatCount="indefinite"></animate>
+        </rect>
+        <rect x="0" y="${this.data.height / 2}" width="1" height="1" fill="#fff">
+            <animate attributeName="x" from="0" to="${this.data.width}" dur="${this.data.decorator.dur}s" calcMode="spline" keyTimes="0;1"
+                keySplines="0.42,0,0.58,1" repeatCount="indefinite"></animate>
+        </rect>
+      </svg>
+    `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent3, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent3, isStandalone: true, selector: "decorator3", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent3, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator3', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent4 extends BasicService {
+    globalSrv;
+    width = 20;
+    height = 350;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initDecorator() {
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}">
+        <rect x="${this.data.width / 2}" y="0" width="1" height="${this.data.height}" fill="${this.data.decorator.mainColor}">
+            <animate attributeName="height" from="0" to="${this.data.height}" dur="${this.data.decorator.dur}s" calcMode="spline" keyTimes="0;1"
+                keySplines=".42,0,.58,1" repeatCount="indefinite"></animate>
+        </rect>
+        <rect x="${this.data.width / 2}" y="0" width="1" height="1">
+            <animate attributeName="y" from="0" to="${this.data.height}" dur="${this.data.decorator.dur}s" calcMode="spline" keyTimes="0;1"
+                keySplines="0.42,0,0.58,1" repeatCount="indefinite"></animate>
+        </rect>
+      </svg>
+    `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent4, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent4, isStandalone: true, selector: "decorator4", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent4, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator4', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent5 extends BasicService {
+    globalSrv;
+    width = 5;
+    height = 320;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        let template = `
+      <div style="width: 5px; height: ${this.data.height}px; animation-dur: ${this.data.decorator.dur}s;">
+        <svg width="5" height="${this.data.height}">
+          <polyline points="2.5, 0 2.5, ${this.data.height}" stroke="${this.data.decorator.mainColor}"></polyline>
+          <polyline stroke-width="3" stroke-dasharray="20, 80" stroke-dashoffset="-30" points="2.5, 0 2.5, ${this.data.height}" class="bold-line" stroke="${this.data.decorator.secondColor}"></polyline>
+        </svg>
+      </div>
+    `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent5, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent5, isStandalone: true, selector: "decorator5", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep .dv-border-box{position:relative;width:100%;height:100%}:host ::ng-deep .dv-border-box div{width:5px;height:320px;animation-dur:3s;animation:ani-height ease-in-out infinite;left:50%;margin-left:-2px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden;position:absolute;-webkit-box-flex:1;-webkit-flex:1}\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: DecoratorComponent5, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator5', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep .dv-border-box{position:relative;width:100%;height:100%}:host ::ng-deep .dv-border-box div{width:5px;height:320px;animation-dur:3s;animation:ani-height ease-in-out infinite;left:50%;margin-left:-2px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;overflow:hidden;position:absolute;-webkit-box-flex:1;-webkit-flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent6 extends BasicService {
+    globalSrv;
+    width = 320;
+    height = 5;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        let template = `
+      <div style="width: ${this.data.width}px; height: 5px; animation-dur: ${this.data.decorator.dur}s;">
+        <svg width="${this.data.width}" height="5">
+            <polyline points="0, 2.5 ${this.data.width}, 2.5" stroke="${this.data.decorator.mainColor}"></polyline>
+            <polyline stroke-width="3" stroke-dasharray="20, 80" stroke-dashoffset="-30" points="0, 2.5 ${this.data.width}, 2.5"
+                class="bold-line" stroke="${this.data.decorator.secondColor}"></polyline>
+        </svg>
+      </div>
+    `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent6, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent6, isStandalone: true, selector: "decorator6", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent6, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator6', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent7 extends BasicService {
+    globalSrv;
+    width = 350;
+    height = 50;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.generateSvg();
+    }
+    generateSvg() {
+        // 生成 SVG 字符串
+        return `
+      <svg width="${this.data.width}" height="${this.data.height}">
+      ${this.generatePolyline1(this.data.width, this.data.height)}
+      ${this.generatePolyline2(this.data.width, this.data.height)}
+      </svg>`;
+    }
+    generatePolyline1(width, height) {
+        const scaleX = width / 349;
+        const scaleY = height / 49;
+        const startX = width * 1.101594414139372;
+        const polyline = `
+      <polyline fill="transparent" stroke-width="3"
+      points="0,${scaleY * 9.8} ${scaleX * 62.82},${scaleY * 9.8} ${scaleX * 69.8},${scaleY * 19.6} ${scaleX * 87.25},${scaleY * 19.6} ${scaleX * 94.23},${scaleY * 29.4} ${scaleX * 251.28},${scaleY * 29.4} ${scaleX * 261.75},${scaleY * 19.6} ${scaleX * 279.2},${scaleY * 19.6} ${scaleX * 286.18},${scaleY * 9.8} ${scaleX * 349},${scaleY * 9.8}"
+      stroke="${this.data.decorator.mainColor}">
+      <animate attributeName="stroke-dasharray" attributeType="XML"
+          from="0, ${startX / 2}, 0, ${startX / 2}" to="0, 0, ${startX}, 0" dur="${this.data.decorator.dur}s" begin="0s"
+          calcMode="spline" keyTimes="0;1" keySplines="0.4,1,0.49,0.98" repeatCount="indefinite"></animate>
+    </polyline>
+    `;
+        return polyline.trim();
+    }
+    generatePolyline2(width, height) {
+        const startX = (width) * 0.3999999999997135;
+        const dashArrayFrom = `0, ${startX / 2}, 0, ${startX / 2}`;
+        const dashArrayTo = `0, 0, ${startX}, 0`;
+        const points = `${width * 0.3},${height * 0.8} ${width * 0.6999999999971347},${height * 0.8}`;
+        // 创建 polyline 元素的字符串
+        const polyline = `
+        <polyline fill="transparent" stroke-width="2" points="${points}" stroke="${this.data.decorator.secondColor}">
+            <animate attributeName="stroke-dasharray" attributeType="XML"
+               from="${dashArrayFrom}" to="${dashArrayTo}"
+                dur="${this.data.decorator.dur}s" begin="0s" calcMode="spline" keyTimes="0;1" keySplines=".4,1,.49,.98" repeatCount="indefinite">
+            </animate>
+        </polyline>
+    `;
+        return polyline.trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent7, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent7, isStandalone: true, selector: "decorator7", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent7, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator7', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent8 extends BasicService {
+    globalSrv;
+    width = 300;
+    height = 35;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initDecorator() {
+        let template = `
+        <svg width="300px" height="35px" style="transform: ${this.transform};">
+            <rect fill="${this.data.decorator.secondColor}" x="3.8170731707317076" y="13" width="7" height="9">
+                <animate attributeName="y" values="16.22372575208566;13;16.22372575208566" dur="1.9193014841319482s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="2.552548495828684;9;2.552548495828684" dur="1.9193014841319482s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="11.134146341463415" y="11.5" width="7" height="12">
+                <animate attributeName="y" values="14.587694746499118;11.5;14.587694746499118" dur="1.9574817329592584s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="5.824610507001764;12;5.824610507001764" dur="1.9574817329592584s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="18.451219512195124" y="9.5" width="7" height="16">
+                <animate attributeName="y" values="9.684908096502733;9.5;9.684908096502733" dur="1.879920899418064s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="15.630183806994534;16;15.630183806994534" dur="1.879920899418064s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="25.76829268292683" y="5.5" width="7" height="24">
+                <animate attributeName="y" values="8.31138669149416;5.5;8.31138669149416" dur="2.279891112806586s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="18.37722661701168;24;18.37722661701168" dur="2.279891112806586s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="33.08536585365854" y="13" width="7" height="9">
+                <animate attributeName="y" values="17.484301435131716;13;17.484301435131716" dur="1.8820786211494718s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="0.03139712973656894;9;0.03139712973656894" dur="1.8820786211494718s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="40.40243902439025" y="13.5" width="7" height="8">
+                <animate attributeName="y" values="15.636474751626057;13.5;15.636474751626057" dur="1.8882143222931982s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="3.7270504967478875;8;3.7270504967478875" dur="1.8882143222931982s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="47.71951219512195" y="1.5" width="7" height="32">
+                <animate attributeName="y" values="6.765480306699441;1.5;6.765480306699441" dur="1.874184294326255s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="21.469039386601118;32;21.469039386601118" dur="1.874184294326255s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="55.03658536585366" y="14" width="7" height="7">
+                <animate attributeName="y" values="17.02110302527124;14;17.02110302527124" dur="2.490206927917178s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="0.9577939494575174;7;0.9577939494575174" dur="2.490206927917178s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="62.35365853658537" y="11.5" width="7" height="12">
+                <animate attributeName="y" values="16.433842195954014;11.5;16.433842195954014" dur="2.2406112100804476s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="2.132315608091975;12;2.132315608091975" dur="2.2406112100804476s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="69.67073170731707" y="12.5" width="7" height="10">
+                <animate attributeName="y" values="17.198717591613022;12.5;17.198717591613022" dur="2.3863669196404134s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="0.6025648167739561;10;0.6025648167739561" dur="2.3863669196404134s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="76.98780487804878" y="12.5" width="7" height="10">
+                <animate attributeName="y" values="13.854121210216467;12.5;13.854121210216467" dur="1.5496906432252497s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="7.291757579567064;10;7.291757579567064" dur="1.5496906432252497s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="84.3048780487805" y="12.5" width="7" height="10">
+                <animate attributeName="y" values="13.749541962152952;12.5;13.749541962152952" dur="2.0326781748109966s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="7.500916075694097;10;7.500916075694097" dur="2.0326781748109966s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="91.6219512195122" y="10.5" width="7" height="14">
+                <animate attributeName="y" values="13.549514124252724;10.5;13.549514124252724" dur="1.8720409701842267s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="7.90097175149455;14;7.90097175149455" dur="1.8720409701842267s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="98.9390243902439" y="10" width="7" height="15">
+                <animate attributeName="y" values="13.842004977727129;10;13.842004977727129" dur="2.4551927018408337s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="7.315990044545742;15;7.315990044545742" dur="2.4551927018408337s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="106.25609756097562" y="13" width="7" height="9">
+                <animate attributeName="y" values="13.445357718840306;13;13.445357718840306" dur="1.733430691288683s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="8.10928456231939;9;8.10928456231939" dur="1.733430691288683s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="113.57317073170732" y="13" width="7" height="9">
+                <animate attributeName="y" values="14.3642583245489;13;14.3642583245489" dur="2.2936049720379597s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="6.2714833509022005;9;6.2714833509022005" dur="2.2936049720379597s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="120.89024390243902" y="12.5" width="7" height="10">
+                <animate attributeName="y" values="15.053352616841154;12.5;15.053352616841154" dur="1.9977746678159636s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="4.893294766317691;10;4.893294766317691" dur="1.9977746678159636s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="128.20731707317074" y="11.5" width="7" height="12">
+                <animate attributeName="y" values="14.77633280938325;11.5;14.77633280938325" dur="2.0809742365917954s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="5.4473343812335004;12;5.4473343812335004" dur="2.0809742365917954s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="135.52439024390245" y="9" width="7" height="17">
+                <animate attributeName="y" values="10.215099993280838;9;10.215099993280838" dur="2.2482195293409166s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="14.569800013438325;17;14.569800013438325" dur="2.2482195293409166s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="142.84146341463415" y="12" width="7" height="11">
+                <animate attributeName="y" values="16.475468126383543;12;16.475468126383543" dur="2.422039959221712s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="2.049063747232915;11;2.049063747232915" dur="2.422039959221712s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="150.15853658536585" y="12" width="7" height="11">
+                <animate attributeName="y" values="12.765530243869248;12;12.765530243869248" dur="1.5758380000109493s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="9.468939512261503;11;9.468939512261503" dur="1.5758380000109493s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="157.47560975609755" y="8.5" width="7" height="18">
+                <animate attributeName="y" values="11.247619232410663;8.5;11.247619232410663" dur="1.9101922020253537s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="12.504761535178671;18;12.504761535178671" dur="1.9101922020253537s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="164.7926829268293" y="0" width="7" height="35">
+                <animate attributeName="y" values="11.07117879104485;0;11.07117879104485" dur="1.5050324774960475s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="12.857642417910299;35;12.857642417910299" dur="1.5050324774960475s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="172.109756097561" y="10" width="7" height="15">
+                <animate attributeName="y" values="11.547147204786938;10;11.547147204786938" dur="1.9113600258811372s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="11.905705590426122;15;11.905705590426122" dur="1.9113600258811372s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="179.4268292682927" y="13" width="7" height="9">
+                <animate attributeName="y" values="16.23244066387419;13;16.23244066387419" dur="1.6576201023396238s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="2.5351186722516204;9;2.5351186722516204" dur="1.6576201023396238s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="186.7439024390244" y="1.5" width="7" height="32">
+                <animate attributeName="y" values="4.589717285817084;1.5;4.589717285817084" dur="1.7669509673758628s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="25.820565428365832;32;25.820565428365832" dur="1.7669509673758628s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="194.0609756097561" y="9.5" width="7" height="16">
+                <animate attributeName="y" values="12.922910612143342;9.5;12.922910612143342" dur="2.3921373525736804s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="9.154178775713316;16;9.154178775713316" dur="2.3921373525736804s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="201.3780487804878" y="14" width="7" height="7">
+                <animate attributeName="y" values="15.464522095356593;14;15.464522095356593" dur="1.6164308478978615s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="4.070955809286815;7;4.070955809286815" dur="1.6164308478978615s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="208.69512195121953" y="10" width="7" height="15">
+                <animate attributeName="y" values="16.35600823348775;10;16.35600823348775" dur="2.0604276018369085s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="2.2879835330245046;15;2.2879835330245046" dur="2.0604276018369085s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="216.01219512195124" y="4" width="7" height="27">
+                <animate attributeName="y" values="11.112288451861373;4;11.112288451861373" dur="2.3171665982951763s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="12.775423096277255;27;12.775423096277255" dur="2.3171665982951763s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="223.32926829268294" y="10" width="7" height="15">
+                <animate attributeName="y" values="15.123181886550437;10;15.123181886550437" dur="2.4536445934424487s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="4.753636226899127;15;4.753636226899127" dur="2.4536445934424487s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="230.64634146341464" y="11" width="7" height="13">
+                <animate attributeName="y" values="11.153864165479337;11;11.153864165479337" dur="2.026570396437095s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="12.692271669041324;13;12.692271669041324" dur="2.026570396437095s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="237.96341463414635" y="9.5" width="7" height="16">
+                <animate attributeName="y" values="10.205849402676597;9.5;10.205849402676597" dur="1.9311692847667918s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="14.588301194646807;16;14.588301194646807" dur="1.9311692847667918s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="245.28048780487805" y="10.5" width="7" height="14">
+                <animate attributeName="y" values="16.180877579111698;10.5;16.180877579111698" dur="1.9705155570401023s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="2.6382448417766033;14;2.6382448417766033" dur="1.9705155570401023s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="252.59756097560978" y="11" width="7" height="13">
+                <animate attributeName="y" values="14.803937070734275;11;14.803937070734275" dur="1.536264553364164s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="5.39212585853145;13;5.39212585853145" dur="1.536264553364164s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="259.9146341463415" y="12" width="7" height="11">
+                <animate attributeName="y" values="12.862610930654657;12;12.862610930654657" dur="2.1036543751583303s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="9.274778138690683;11;9.274778138690683" dur="2.1036543751583303s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="267.2317073170732" y="11.5" width="7" height="12">
+                <animate attributeName="y" values="14.215797285058805;11.5;14.215797285058805" dur="1.7326305696266322s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="6.568405429882388;12;6.568405429882388" dur="1.7326305696266322s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="274.5487804878049" y="13" width="7" height="9">
+                <animate attributeName="y" values="15.080354180507161;13;15.080354180507161" dur="2.033946295131261s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="4.839291638985678;9;4.839291638985678" dur="2.033946295131261s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.secondColor}" x="281.8658536585366" y="11.5" width="7" height="12">
+                <animate attributeName="y" values="15.599631345992517;11.5;15.599631345992517" dur="2.3347658396495947s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="3.800737308014967;12;3.800737308014967" dur="2.3347658396495947s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+            <rect fill="${this.data.decorator.mainColor}" x="289.1829268292683" y="9" width="7" height="17">
+                <animate attributeName="y" values="9.44779313792679;9;9.44779313792679" dur="1.907553220791245s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+                <animate attributeName="height" values="16.10441372414642;17;16.10441372414642" dur="1.907553220791245s"
+                    keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1" begin="0s"
+                    repeatCount="indefinite"></animate>
+            </rect>
+        </svg>
+        `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent8, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent8, isStandalone: true, selector: "decorator8", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent8, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator8', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent9 extends BasicService {
+    globalSrv;
+    width = 350;
+    height = 50;
+    svgTemplate = ``;
+    points1 = "";
+    points2 = "";
+    points3 = "";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        const centerX = this.data.width / this.width;
+        this.points1 = `0, 0 30, ${24.5 * centerX}`;
+        this.points2 = `20, 0 50, ${24.5 * centerX} ${this.data.width},  ${24.5 * centerX}`;
+        this.points3 = `0, ${this.data.height - 3}, 200, ${this.data.height - 3}`;
+        this.initDecorator();
+    }
+    initDecorator() {
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}">
+          <polyline stroke-width="2" fill="transparent" points="${this.points1}" stroke="${this.data.decorator.mainColor}"></polyline>
+          <polyline stroke-width="2" fill="transparent" points="${this.points2}" stroke="${this.data.decorator.mainColor}"></polyline>
+          <polyline fill="transparent" stroke-width="3" points="${this.points3}" stroke="${this.data.decorator.secondColor}"></polyline>
+      </svg>
+    `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent9, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent9, isStandalone: true, selector: "decorator9", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent9, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator9', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent10 extends BasicService {
+    globalSrv;
+    width = 350;
+    height = 50;
+    points1 = "";
+    points2 = "";
+    points3 = "";
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        const centerX = this.data.width / this.width;
+        this.points1 = `${this.data.width}, 0 ${this.data.width - 30}, ${centerX * 24.5}`;
+        this.points2 = `${this.data.width - 20}, 0 ${this.data.width - 50}, ${centerX * 24.5} 0, ${centerX * 24.5}`;
+        this.points3 = `${this.data.width}, ${this.data.height * 0.97}, ${this.data.width - 200}, ${this.data.height * 0.97}`;
+        this.initDecorator();
+    }
+    initDecorator() {
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}">
+        <polyline stroke-width="2" fill="transparent" points="${this.points1}" stroke="${this.data.decorator.mainColor}"></polyline>
+        <polyline stroke-width="2" fill="transparent" points="${this.points2}" stroke="${this.data.decorator.mainColor}"></polyline>
+        <polyline fill="transparent" stroke-width="3" points="${this.points3}" stroke="${this.data.decorator.secondColor}"></polyline>
+      </svg>
+    `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent10, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent10, isStandalone: true, selector: "decorator10", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent10, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator10', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent11 extends BasicService {
+    globalSrv;
+    width = 100;
+    height = 100;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initDecorator() {
+        let template = `
+      <svg width="100px" height="100px" style="transform: ${this.transform};">
+        <defs>
+            <polygon id="decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3"
+                points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5"></polygon>
+        </defs>
+        <circle cx="50" cy="50" r="45" fill="transparent" stroke-width="10" stroke-dasharray="80, 100, 30, 100"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}"
+                repeatCount="indefinite"></animateTransform>
+        </circle>
+        <circle cx="50" cy="50" r="45" fill="transparent" stroke-width="6" stroke-dasharray="50, 66, 100, 66"
+            stroke="${this.data.decorator.mainColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;-360 50 50" dur="${this.data.decorator.dur}"
+                repeatCount="indefinite"></animateTransform>
+        </circle>
+        <circle cx="50" cy="50" r="38" fill="transparent" stroke="rgba(3,166,224,0.3)" stroke-width="1"
+            stroke-dasharray="5, 1"></circle>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="${this.data.decorator.mainColor}"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="0s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="${this.data.decorator.mainColor}"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="0.15s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="${this.data.decorator.mainColor}"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="0.${this.data.decorator.dur}"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" stroke="${this.data.decorator.secondColor}"
+            fill="transparent">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="0.45s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="transparent"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="0.6s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="transparent"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="0.75s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" stroke="${this.data.decorator.secondColor}"
+            fill="transparent">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="0.9s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="transparent"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="1.05s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" stroke="${this.data.decorator.secondColor}"
+            fill="transparent">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="1.2s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="transparent"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="1.35s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" stroke="${this.data.decorator.secondColor}"
+            fill="transparent">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="1.5s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="${this.data.decorator.mainColor}"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="1.65s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="transparent"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="1.8s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="transparent"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="1.95s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" stroke="${this.data.decorator.secondColor}"
+            fill="transparent">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="2.1s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="transparent"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="2.25s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" stroke="${this.data.decorator.secondColor}"
+            fill="${this.data.decorator.mainColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="2.4s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" stroke="${this.data.decorator.secondColor}"
+            fill="${this.data.decorator.mainColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="2.55s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="${this.data.decorator.mainColor}"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="2.7s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <use xlink:href="#decoration-9-polygon-8276782a24494d2fb35734d912a2c8b3" fill="${this.data.decorator.mainColor}"
+            stroke="${this.data.decorator.secondColor}">
+            <animateTransform attributeName="transform" type="rotate" values="0 50 50;360 50 50" dur="${this.data.decorator.dur}" begin="2.85s"
+                repeatCount="indefinite"></animateTransform>
+        </use>
+        <circle cx="50" cy="50" r="26" fill="transparent" stroke="rgba(3,166,224,0.3)" stroke-width="1"
+            stroke-dasharray="5, 1"></circle>
+      </svg>
+      `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent11, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent11, isStandalone: true, selector: "decorator11", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent11, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator11', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent12 extends BasicService {
+    globalSrv;
+    width = 350;
+    height = 50;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initDecorator() {
+        let id1 = Guid.createId();
+        let id2 = Guid.createId();
+        let id3 = Guid.createId();
+        let id4 = Guid.createId();
+        let id5 = Guid.createId();
+        let id6 = Guid.createId();
+        let id7 = Guid.createId();
+        let template = `
+    <svg width="${this.data.width}" height="${this.data.height}" style="transform: ${this.transform}">
+        <polyline stroke-width="2" points="0, 24.5 349, 24.5" stroke="${this.data.decorator.secondColor}"></polyline>
+        <polyline stroke-width="2" points="5, 24.5 66.8, 24.5" stroke-dasharray="0, 69.8" fill="freeze"
+            stroke="${this.data.decorator.mainColor}">
+            <animate id="${id1}" attributeName="stroke-dasharray"
+                values="0, 69.8;69.8, 0;" dur="3s" begin="${id3}.end" fill="freeze">
+            </animate>
+            <animate attributeName="stroke-dasharray" values="69.8, 0;0, 69.8" dur="0.01s"
+                begin="${id2}.end" fill="freeze"></animate>
+        </polyline>
+        <polyline stroke-width="2" points="72.8, 24.5 276.2, 24.5" stroke-dasharray="0, 209.4" stroke="${this.data.decorator.mainColor}">
+            <animate id="${id4}" attributeName="stroke-dasharray"
+                values="0, 209.4;209.4, 0" dur="3s" begin="${id5}.end + 1s"
+                fill="freeze"></animate>
+            <animate attributeName="stroke-dasharray" values="209.4, 0;0, 209.4" dur="0.01s"
+                begin="${id2}.end" fill="freeze"></animate>
+        </polyline>
+        <polyline stroke-width="2" points="282.2, 24.5 344, 24.5" stroke-dasharray="0, 69.8" stroke="${this.data.decorator.mainColor}">
+            <animate id="${id6}" attributeName="stroke-dasharray"
+                values="0, 69.8;69.8, 0" dur="3s" begin="${id7}.end + 1s"
+                fill="freeze"></animate>
+            <animate attributeName="stroke-dasharray" values="69.8, 0;0, 104.7" dur="0.01s"
+                begin="${id2}.end" fill="freeze"></animate>
+        </polyline>
+        <circle cx="2" cy="24.5" r="2" fill="${this.data.decorator.secondColor}">
+            <animate id="${id3}" attributeName="fill"
+                values="${this.data.decorator.secondColor};${this.data.decorator.mainColor}" begin="0s;${id2}.end"
+                dur="0.3s" fill="freeze"></animate>
+        </circle>
+        <circle cx="69.8" cy="24.5" r="2" fill="${this.data.decorator.secondColor}">
+            <animate id="${id5}" attributeName="fill"
+                values="${this.data.decorator.secondColor};${this.data.decorator.mainColor}" begin="${id1}.end" dur="0.3s"
+                fill="freeze"></animate>
+            <animate attributeName="fill" values="${this.data.decorator.secondColor};${this.data.decorator.secondColor}" dur="0.01s"
+                begin="${id2}.end" fill="freeze"></animate>
+        </circle>
+        <circle cx="279.2" cy="24.5" r="2" fill="${this.data.decorator.secondColor}">
+            <animate id="${id7}" attributeName="fill"
+                values="${this.data.decorator.secondColor};${this.data.decorator.mainColor}" begin="${id4}.end" dur="0.3s"
+                fill="freeze"></animate>
+            <animate attributeName="fill" values="${this.data.decorator.secondColor};${this.data.decorator.secondColor}" dur="0.01s"
+                begin="${id2}.end" fill="freeze"></animate>
+        </circle>
+        <circle cx="347" cy="24.5" r="2" fill="${this.data.decorator.secondColor}">
+            <animate id="${id2}" attributeName="fill"
+                values="${this.data.decorator.secondColor};${this.data.decorator.mainColor}" begin="${id6}.end" dur="0.3s"
+                fill="freeze"></animate>
+            <animate attributeName="fill" values="${this.data.decorator.secondColor};${this.data.decorator.secondColor}" dur="0.01s"
+                begin="${id2}.end" fill="freeze"></animate>
+        </circle>
+    </svg>
+    `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent12, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent12, isStandalone: true, selector: "decorator12", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent12, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator12', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class DecoratorComponent13 extends BasicService {
+    globalSrv;
+    width = 349;
+    height = 49;
+    svgTemplate = ``;
+    points1 = "20 39, 25 45, 55 45 60 39";
+    points2 = "329 10, 324 4, 294 4 289 10";
+    points3 = "329 39, 324 45, 294 45 289 39";
+    points4 = `
+  20 10, 5 24.5 20 39
+  329 39 344 24.5 329 10
+  `;
+    points5 = "25 18, 15 24.5 25 31";
+    points6 = "324 18, 334 24.5 324 31";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `20 ${this.data.height - 10}, 25 ${this.data.height - 4}, 55 ${this.data.height - 4} 60 ${this.data.height - 10}`;
+        this.points2 = `${this.data.width - 20} 10, ${this.data.width - 25} 4, ${this.data.width - 55} 4 ${this.data.width - 60} 10`;
+        this.points3 = `${this.data.width - 20} ${this.data.height - 10}, ${this.data.width - 25} ${this.data.height - 4}, ${this.data.width - 55} ${this.data.height - 4} ${this.data.width - 60} ${this.data.height - 10}`;
+        this.points4 = `
+    20 10, 5 ${this.data.height / 2} 20 ${this.data.height - 10} 
+    ${this.data.width - 20} ${this.data.height - 10} ${this.data.width - 5} ${this.data.height / 2} ${this.data.width - 20} 10
+    `;
+        this.points5 = `25 18, 15 ${this.data.height / 2} 25 ${this.data.height - 18}`;
+        this.points6 = `${this.data.width - 25} 18, ${this.data.width - 15} ${this.data.height / 2} ${this.data.width - 25} ${this.data.height - 18}`;
+        this.initDecorator();
+    }
+    initDecorator() {
+        let template = `
+    <svg width="${this.data.width}" height="${this.data.height}">
+      <polygon fill="rgba(44,247,254,0.1)" points="20 10, 25 4, 55 4 60 10" stroke="${this.data.decorator.secondColor}"></polygon>
+      <polygon fill="rgba(44,247,254,0.1)" points="${this.points1}" stroke="${this.data.decorator.secondColor}"></polygon>
+      <polygon fill="rgba(44,247,254,0.1)" points="${this.points2}" stroke="${this.data.decorator.secondColor}"></polygon>
+      <polygon fill="rgba(44,247,254,0.1)" points="${this.points3}" stroke="${this.data.decorator.secondColor}"></polygon>
+      
+      <polygon fill="rgba(26,152,252,0.2)" points="${this.points4}" stroke="${this.data.decorator.mainColor}"></polygon>
+      
+      <polyline fill="transparent" stroke="${this.data.decorator.mainColor}" points="${this.points5}"></polyline>
+      <polyline fill="transparent" stroke="${this.data.decorator.mainColor}" points="${this.points6}"></polyline>
+    </svg>
+    `;
+        this.svgTemplate = template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecoratorComponent13, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DecoratorComponent13, isStandalone: true, selector: "decorator13", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n  <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [""], 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: DecoratorComponent13, decorators: [{
+            type: Component,
+            args: [{ selector: 'decorator13', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n  <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+const dynamicComponents = {
+    decorator1: DecoratorComponent1,
+    decorator2: DecoratorComponent2,
+    decorator3: DecoratorComponent3,
+    decorator4: DecoratorComponent4,
+    decorator5: DecoratorComponent5,
+    decorator6: DecoratorComponent6,
+    decorator7: DecoratorComponent7,
+    decorator8: DecoratorComponent8,
+    decorator9: DecoratorComponent9,
+    decorator10: DecoratorComponent10,
+    decorator11: DecoratorComponent11,
+    decorator12: DecoratorComponent12,
+    decorator13: DecoratorComponent13
+};
+class GramBiDecoratorComponent {
+    componentFactoryResolver;
+    _data = null;
+    type = null;
+    component;
+    set data(value) {
+        this._data = value;
+        this.renderComponent();
+    }
+    get data() {
+        return this._data;
+    }
+    set rd(value) {
+        if (this.component) {
+            this.component.instance['rd'] = value;
+        }
+    }
+    /**
+     * 动态子组件
+     */
+    componentHost;
+    ngOnInit() { }
+    constructor(componentFactoryResolver) {
+        this.componentFactoryResolver = componentFactoryResolver;
+    }
+    renderComponent() {
+        if (this.data.secondType) {
+            this.type = this.data.secondType;
+        }
+        if (this.type) {
+            if (this.componentHost) {
+                this.componentHost.clear();
+                const compFactory = this.componentFactoryResolver.resolveComponentFactory(dynamicComponents[this.type]);
+                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: GramBiDecoratorComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GramBiDecoratorComponent, isStandalone: true, selector: "gram-bi-decorator", inputs: { data: "data", rd: "rd" }, viewQueries: [{ propertyName: "componentHost", first: true, predicate: ["componentHost"], descendants: true, read: ViewContainerRef, static: 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: GramBiDecoratorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gram-bi-decorator', 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
+            }], rd: [{
+                type: Input
+            }], componentHost: [{
+                type: ViewChild,
+                args: ['componentHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+const COMPONENTS = [GramBiDecoratorComponent];
+const COMPONENTS_NOROUNT = [
+    DecoratorComponent1,
+    DecoratorComponent2,
+    DecoratorComponent3,
+    DecoratorComponent4,
+    DecoratorComponent5,
+    DecoratorComponent6,
+    DecoratorComponent7,
+    DecoratorComponent8,
+    DecoratorComponent9,
+    DecoratorComponent10,
+    DecoratorComponent11,
+    DecoratorComponent12,
+    DecoratorComponent13
+];
+class GramBiDecoratorModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiDecoratorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: GramBiDecoratorModule, imports: [GramBiDecoratorComponent, DecoratorComponent1,
+            DecoratorComponent2,
+            DecoratorComponent3,
+            DecoratorComponent4,
+            DecoratorComponent5,
+            DecoratorComponent6,
+            DecoratorComponent7,
+            DecoratorComponent8,
+            DecoratorComponent9,
+            DecoratorComponent10,
+            DecoratorComponent11,
+            DecoratorComponent12,
+            DecoratorComponent13], exports: [GramBiDecoratorComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiDecoratorModule, imports: [COMPONENTS_NOROUNT] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiDecoratorModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...COMPONENTS, ...COMPONENTS_NOROUNT],
+                    exports: [...COMPONENTS],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GramBiBasicComponent, GramBiBasicModule, GramBiBorderComponent, GramBiBorderModule, GramBiDecoratorComponent, GramBiDecoratorModule };
+//# sourceMappingURL=ebuilding-bi.mjs.map