@ebuilding/bi 2.3.9

package/fesm2022/bi.decorator.mjs

@@ -0,0 +1,1340 @@
+import * as i0 from '@angular/core';
+import { Input, Directive, Component, ViewContainerRef, ViewChild, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } 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';
+
+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 { GramBiDecoratorComponent, GramBiDecoratorModule };
+//# sourceMappingURL=bi.decorator.mjs.map