@ebuilding/bi 2.3.9

package/fesm2022/bi.border.mjs

@@ -0,0 +1,1383 @@
+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);
+        }
+    }
+    /**
+     * 透明度
+     * @returns
+     */
+    get opacity() {
+        let res = Number((this.data.border.bgOpacity / 100).toFixed(2));
+        return res;
+    }
+    constructor(globalSrv) {
+        this.globalSrv = globalSrv;
+    }
+    ngOnDestroy() {
+    }
+    initPageData(value) {
+        if (value) {
+            let x = parseFloat((value.width / this.width).toFixed(2));
+            let y = parseFloat((value.height / this.height).toFixed(2));
+            this.transform = `scale(${x}, ${y})`;
+        }
+    }
+    /**
+     * 渐变色
+     * @returns
+     */
+    generateGradientData() {
+        let template = "";
+        let direction = this.data.border.bgDirection;
+        if (this.data.border.bgColorType == "single" || direction == undefined || direction == null || direction == "") {
+            return "";
+        }
+        switch (direction) {
+            case "to right": //从左到右
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to left": //从右到左
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="100%" y1="0%" x2="0%" y2="0%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to bottom": //从上到下
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="0%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to top": //从下到上
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="0%" y1="100%" x2="0%" y2="0%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to bottom right": //从左上到右下
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to bottom left": //从右上到左下
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="100%" y1="0%" x2="0%" y2="100%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to top right": //从左下到右上
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="0%" y1="100%" x2="100%" y2="0%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+            case "to top left": //从右下到左上
+                template = `
+        <defs>
+            <linearGradient id="borderBgjSWcehpx" x1="100%" y1="100%" x2="0%" y2="0%">
+                <stop offset="0%" stop-color="${this.data.border.bgColor0}"></stop>
+                <stop offset="100%" stop-color="${this.data.border.bgColor1}"></stop>
+            </linearGradient>
+        </defs>
+        `;
+                break;
+        }
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicService, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: BasicService, isStandalone: true, inputs: { data: "data", rd: "rd" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BasicService, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }], propDecorators: { data: [{
+                type: Input
+            }], rd: [{
+                type: Input
+            }] } });
+
+class BorderComponent1 extends BasicService {
+    globalSrv;
+    width = 450;
+    height = 320;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        let coordinates = this.generateCoordinates();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+            <svg width="${this.data.width}" height="${this.data.height}" class="border" style="opacity: ${this.opacity};">
+                ${defs}
+                <polygon fill="${fill}" points="${coordinates}"></polygon>
+            </svg>
+            <svg width="150px" height="150px" class="left-top border">
+                <polygon
+                    points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};${this.data.border.mainColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="${this.data.border.secondColor}">
+                    <animate attributeName="fill" values="${this.data.border.secondColor};${this.data.border.mainColor};${this.data.border.secondColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};transparent" dur="1s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+            </svg>
+            <svg width="150px" height="150px" class="right-top border">
+                <polygon
+                    points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};${this.data.border.mainColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="${this.data.border.secondColor}">
+                    <animate attributeName="fill" values="${this.data.border.secondColor};${this.data.border.mainColor};${this.data.border.secondColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};transparent" dur="1s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+            </svg>
+            <svg width="150px" height="150px" class="left-bottom border">
+                <polygon
+                    points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};${this.data.border.mainColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="${this.data.border.secondColor}">
+                    <animate attributeName="fill" values="${this.data.border.secondColor};${this.data.border.mainColor};${this.data.border.secondColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};transparent" dur="1s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+            </svg>
+            <svg width="150px" height="150px" class="right-bottom border">
+                <polygon
+                    points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};${this.data.border.mainColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" fill="${this.data.border.secondColor}">
+                    <animate attributeName="fill" values="${this.data.border.secondColor};${this.data.border.mainColor};${this.data.border.secondColor}" dur="0.5s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+                <polygon points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+                    fill="${this.data.border.mainColor}">
+                    <animate attributeName="fill" values="${this.data.border.mainColor};${this.data.border.secondColor};transparent" dur="1s" begin="0s" repeatCount="indefinite">
+                    </animate>
+                </polygon>
+            </svg>
+        `;
+        return template;
+    }
+    generateCoordinates() {
+        // 基准宽度和高度（从给出的第一个449x319的坐标中提取）
+        const baseWidth = 449;
+        const baseHeight = 319;
+        // 原始坐标（基于449x319的初始坐标值）
+        const baseCoordinates = [
+            [10, 27], [10, 292], [13, 295], [13, 298], [24, 308],
+            [38, 308], [41, 311], [73, 311], [75, 309], [81, 309],
+            [85, 313], [364, 313], [368, 309], [374, 309], [376, 311],
+            [408, 311], [411, 308], [425, 308], [436, 298], [436, 295],
+            [439, 292], [439, 27], [436, 25], [436, 21], [425, 11],
+            [411, 11], [408, 8], [376, 8], [374, 10], [368, 10],
+            [364, 6], [85, 6], [81, 10], [75, 10], [73, 8],
+            [41, 8], [38, 11], [24, 11], [13, 21], [13, 24]
+        ];
+        // 宽度和高度的缩放因子
+        const widthScale = this.data.width / baseWidth;
+        const heightScale = this.data.height / baseHeight;
+        // 根据缩放因子调整坐标值
+        const scaledCoordinates = baseCoordinates.map(([x, y]) => {
+            const scaledX = Math.round(x * widthScale);
+            const scaledY = Math.round(y * heightScale);
+            return `${scaledX}, ${scaledY}`;
+        });
+        // 将坐标数组转换为逗号分隔的字符串
+        return scaledCoordinates.join(" ");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent1, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent1, isStandalone: true, selector: "border1", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{transform-origin:unset}:host ::ng-deep .right-top{right:0;top:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);transform-origin:top}:host ::ng-deep .right-bottom{right:0;bottom:0;transform:rotateX(180deg) rotateY(180deg) translate(150px,150px);transform-origin:right bottom}:host ::ng-deep .left-bottom{bottom:0;left:0;-webkit-transform:rotateX(180deg);transform:rotateX(180deg);transform-origin:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent1, decorators: [{
+            type: Component,
+            args: [{ selector: 'border1', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep{transform-origin:unset}:host ::ng-deep .right-top{right:0;top:0;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);transform-origin:top}:host ::ng-deep .right-bottom{right:0;bottom:0;transform:rotateX(180deg) rotateY(180deg) translate(150px,150px);transform-origin:right bottom}:host ::ng-deep .left-bottom{bottom:0;left:0;-webkit-transform:rotateX(180deg);transform:rotateX(180deg);transform-origin:left}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent2 extends BasicService {
+    globalSrv;
+    width = 450;
+    height = 320;
+    svgTemplate = ``;
+    points1 = "7, 7 441, 7 441, 311 7, 311";
+    points2 = "2, 2 446 ,2 446, 316 2, 316 2, 2";
+    points3 = "6, 6 442, 6 442, 312 6, 312 6, 6";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        if (this.data && this.data.width && this.data.height) {
+            this.points1 = `7, 7 ${this.data.width - 7}, 7 ${this.data.width - 7}, ${this.data.height - 7} 7, ${this.data.height}`;
+            this.points2 = `2, 2 ${this.data.width - 2} ,2 ${this.data.width - 2}, ${this.data.height - 2} 2, ${this.data.height - 2} 2, 2`;
+            this.points3 = `6, 6 ${this.data.width - 7}, 6 ${this.data.width - 7}, ${this.data.height - 6} 6, ${this.data.height - 6} 6, 6`;
+            this.svgTemplate = this.initTemplate();
+        }
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" class="border"  style="opacity: ${this.opacity};">
+        ${defs}
+        <polygon fill="${fill}" points="${this.points1}"></polygon>
+        <polyline points="${this.points2}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points3}" stroke="${this.data.border.secondColor}"></polyline>
+        <circle cx="11" cy="11" r="1" fill="${this.data.border.mainColor}"></circle>
+        <circle cx="${this.data.width - 11}" cy="11" r="1" fill="${this.data.border.mainColor}"></circle>
+        <circle cx="${this.data.width - 11}" cy="${this.data.height - 11}" r="1" fill="${this.data.border.mainColor}"></circle>
+        <circle cx="11" cy="${this.data.height - 11}" r="1" fill="${this.data.border.mainColor}"></circle>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent2, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent2, isStandalone: true, selector: "border2", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent2, decorators: [{
+            type: Component,
+            args: [{ selector: 'border2', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent3 extends BasicService {
+    globalSrv;
+    width = 450;
+    height = 320;
+    svgTemplate = ``;
+    points1 = "23, 23 425, 23 425, 295 23, 295";
+    points2 = "4, 4 427 ,4 427, 297 4, 297 4, 4";
+    points3 = "10, 10 433, 10 433, 303 10, 303 10, 10";
+    points4 = "16, 16 439, 16 439, 309 16, 309 16, 16";
+    points5 = "22, 22 445, 22 445, 315 22, 315 22, 22";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `23, 23 ${this.data.width - 24}, 23 ${this.data.width - 24}, ${this.data.height - 24} 23, ${this.data.height - 24}`;
+        this.points2 = `4, 4 ${this.data.width - 23} ,4 ${this.data.width - 23}, ${this.data.height - 22} 4, ${this.data.height - 22} 4, 4`;
+        this.points3 = `10, 10 ${this.data.width - 16}, 10 ${this.data.width - 16}, ${this.data.height - 16} 10, ${this.data.height - 16} 10, 10`;
+        this.points4 = `16, 16 ${this.data.width - 10}, 16 ${this.data.width - 10},  ${this.data.height - 10} 16,  ${this.data.height - 10} 16, 16`;
+        this.points5 = `22, 22 ${this.data.width - 4}, 22 ${this.data.width - 4},  ${this.data.height - 4} 22,  ${this.data.height - 4} 22, 22`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" class="border"  style="opacity: ${this.opacity};">
+        ${defs}
+        <polygon fill="${fill}" points="${this.points1}"></polygon>
+        <polyline points="${this.points2}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points3}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points4}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points5}" stroke="${this.data.border.secondColor}"></polyline>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent3, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent3, isStandalone: true, selector: "border3", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent3, decorators: [{
+            type: Component,
+            args: [{ selector: 'border3', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent4 extends BasicService {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `
+    434, 22 170, 22 150, 7 40, 7 28, 21 32, 24
+    16, 42 16, 287 41, 312 434, 312
+  `;
+    points2 = `
+    145, 314 40, 314 10, 284
+    10, 40 40, 5 150, 5 170, 20 434, 20
+  `;
+    points3 = "245, 318 36, 318 14, 296 14, 219";
+    points4 = "7, 279 7, 244";
+    points5 = "28, 24 13, 41 13, 64";
+    points6 = "5, 45 5, 140";
+    points7 = "14, 75 14, 180";
+    points8 = "55, 11 147, 11 167, 26 250, 26";
+    points9 = "158, 5 173, 16";
+    points10 = "200, 17 439, 17";
+    points11 = "385, 17 439, 17";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `
+      ${this.data.width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
+      16, 42 16, ${this.data.height - 32} 41, ${this.data.height - 7} ${this.data.width - 15}, ${this.data.height - 7}
+    `;
+        this.points2 = `
+      145, ${this.data.height - 5} 40, ${this.data.height - 5} 10, ${this.data.height - 35}
+      10, 40 40, 5 150, 5 170, 20 ${this.data.width - 5}, 20
+    `;
+        this.points3 = `245, ${this.data.height - 1} 36, ${this.data.height - 1} 14, ${this.data.height - 23} 14, ${this.data.height - 100}`;
+        this.points4 = `7, ${this.data.height - 40} 7, ${this.data.height - 75}`;
+        this.points5 = `28, 24 13, 41 13, 64`;
+        this.points6 = "5, 45 5, 140";
+        this.points7 = "14, 75 14, 180";
+        this.points8 = "55, 11 147, 11 167, 26 250, 26";
+        this.points9 = "158, 5 173, 16";
+        this.points10 = `200, 17 ${this.data.width - 10}, 17`;
+        this.points11 = `385, 17 ${this.data.width - 10}, 17`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" class="border"  style="opacity: ${this.opacity};">
+        ${defs}
+        <polygon fill="${fill}" points="${this.points1}"></polygon>
+        <polyline points="${this.points2}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points3}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points4}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points5}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points6}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points7}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points8}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points9}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points10}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points11}" stroke="${this.data.border.secondColor}"></polyline>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent4, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent4, isStandalone: true, selector: "border4", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent4, decorators: [{
+            type: Component,
+            args: [{ selector: 'border4', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent5 extends BasicService {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `10, 22 427, 22 427, 233 365, 295 10, 295`;
+    points2 = `
+    8, 5 444, 5 444, 219 
+    349, 314 8, 314 8, 5 `;
+    points3 = `
+    3, 5 429, 5 429, 259 
+    375, 314 3, 314 3, 5`;
+    points4 = `50, 13 414, 13`;
+    points5 = `15, 20 414, 20`;
+    points6 = "15, 299 339, 299";
+    points7 = "15, 306 339, 306";
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `10, 22 ${this.data.width - 22}, 22 ${this.data.width - 22}, ${this.data.height - 86} ${this.data.width - 84}, ${this.data.height - 24} 10, ${this.data.height - 24}`;
+        this.points2 = `
+      8, 5 ${this.data.width - 5}, 5 ${this.data.width - 5}, ${this.data.height - 100} 
+      ${this.data.width - 100}, ${this.data.height - 5} 8, ${this.data.height - 5} 8, 5
+    `;
+        this.points3 = `
+      3, 5 ${this.data.width - 20}, 5 ${this.data.width - 20}, ${this.data.height - 60} 
+      ${this.data.width - 74}, ${this.data.height - 5} 3, ${this.data.width - 74} 3, 5
+    `;
+        this.points4 = `50, 13 ${this.data.width - 35}, 13`;
+        this.points5 = `15, 20 ${this.data.width - 35}, 20`;
+        this.points6 = `15, ${this.data.height - 20} ${this.data.width - 110}, ${this.data.height - 20}`;
+        this.points7 = `15, ${this.data.height - 13} ${this.data.width - 110}, ${this.data.height - 13}`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" class="border"  style="opacity: ${this.opacity};">
+        ${defs}
+        <polygon fill="${fill}" points="${this.points1}"></polygon> 
+        <polyline points="${this.points2}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points3}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points4}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points5}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points6}" stroke="${this.data.border.secondColor}"></polyline>
+        <polyline points="${this.points7}" stroke="${this.data.border.secondColor}"></polyline>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent5, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent5, isStandalone: true, selector: "border5", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n  <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent5, decorators: [{
+            type: Component,
+            args: [{ selector: 'border5', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n  <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent6 extends BasicService {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `9, 7 440, 7 440, 312 9, 312`;
+    points2 = `10, 4 439, 4`;
+    points3 = `10, 315 439, 315`;
+    points4 = `5, 70 5, 249`;
+    points5 = `444, 70 444, 249`;
+    points6 = "3, 10, 3, 50";
+    points7 = "7, 30 7, 80";
+    points8 = `446, 10 446, 50`;
+    points9 = `442, 30 442, 80`;
+    points10 = `3, 309 3, 269`;
+    points11 = `7, 289 7, 239`;
+    points12 = `446, 309 446, 269`;
+    points13 = `442, 289 442, 239`;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `9, 7 ${this.data.width - 9}, 7 ${this.data.width - 9}, ${this.data.height - 7} 9, ${this.data.height - 7}`;
+        this.points2 = `10, 4  ${this.data.width - 10}, 4`;
+        this.points3 = `10,  ${this.data.height - 4}  ${this.data.width - 10}, ${this.data.height - 4}`;
+        this.points4 = `5, 70 5, ${this.data.height - 70}`;
+        this.points5 = `${this.data.width - 5}, 70 ${this.data.width - 5}, ${this.data.height - 70}`;
+        this.points6 = "3, 10, 3, 50";
+        this.points7 = "7, 30 7, 80";
+        this.points8 = `${this.data.width - 3}, 10 ${this.data.width - 3}, 50`;
+        this.points9 = `${this.data.width - 7}, 30 ${this.data.width - 7}, 80`;
+        this.points10 = `3, ${this.data.height - 10} 3, ${this.data.height - 50}`;
+        this.points11 = `7, ${this.data.height - 30} 7, ${this.data.height - 80}`;
+        this.points12 = `${this.data.width - 3}, ${this.data.height - 10} ${this.data.width - 3}, ${this.data.height - 50}`;
+        this.points13 = `${this.data.width - 7}, ${this.data.height - 30} ${this.data.width - 7}, ${this.data.height - 80}`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" class="border"  style="opacity: ${this.opacity};">
+        ${defs}
+        <polygon fill="${fill}" points="${this.points1}"></polygon> 
+        <circle cx="5" cy="5" r="2" fill="${this.data.border.secondColor}"></circle>
+        <circle cx="444" cy="5" r="2" fill="${this.data.border.secondColor}"></circle>
+        <circle cx="444" cy="314" r="2" fill="${this.data.border.secondColor}"></circle>
+        <circle cx="5" cy="314" r="2" fill="${this.data.border.secondColor}"></circle>
+        <polyline points="${this.points2}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points3}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points4}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points5}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points6}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points7}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points8}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points9}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points10}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points11}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points12}" stroke="${this.data.border.mainColor}"></polyline>
+        <polyline points="${this.points13}" stroke="${this.data.border.mainColor}"></polyline>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent6, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent6, isStandalone: true, selector: "border6", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent6, decorators: [{
+            type: Component,
+            args: [{ selector: 'border6', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent7 extends BasicService {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `0, 25 0, 0 25, 0`;
+    points2 = `422, 0 447, 0 447, 25`;
+    points3 = `422, 317 447, 317 447, 292`;
+    points4 = `0, 292 0, 317 25, 317`;
+    points5 = `0, 10 0, 0 10, 0`;
+    points6 = "437, 0 447, 0 447, 10";
+    points7 = `437, 317 447, 317 447, 307`;
+    points8 = `0, 307 0, 317 10, 317`;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        let w = this.data.width;
+        let h = this.data.height;
+        this.points1 = `0, 25 0, 0 25, 0`;
+        this.points2 = `${w - 25}, 0 ${w}, 0 ${w}, 25`;
+        this.points3 = `${w - 25}, ${h} ${w}, ${h} ${w}, ${h - 25}`;
+        this.points4 = `0, ${h - 25} 0, ${h} 25, ${h}`;
+        this.points5 = `0, 10 0, 0 10, 0`;
+        this.points6 = `${w - 10}, 0 ${w}, 0 ${w}, 10`;
+        this.points7 = `${w - 10}, ${h} ${w}, ${h} ${w}, ${h - 10}`;
+        this.points8 = `0, ${h - 10} 0, ${h} 10, ${h}`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let bgColor = "transparent";
+        let svgBgColor = "";
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                bgColor = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            let direction = this.data.border.bgDirection;
+            if (direction != undefined && direction != null && direction != "") {
+                svgBgColor = `background:linear-gradient(${this.data.border.bgDirection}, ${this.data.border.bgColor0}, ${this.data.border.bgColor1})`;
+            }
+        }
+        let template = `
+      <div class="border-box" style="width:${this.data.width}px;height:${this.data.height}px;background-color:${bgColor};box-shadow: ${this.data.border.mainColor} 0px 0px 40px inset;border: 1px solid ${this.data.border.mainColor};">
+        <svg width="${this.data.width}" height="${this.data.height}" style="opacity:${this.opacity};${svgBgColor}">
+            <polyline points="${this.points1}" stroke="${this.data.border.mainColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points2}" stroke="${this.data.border.mainColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points3}" stroke="${this.data.border.mainColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points4}" stroke="${this.data.border.mainColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points5}" stroke="${this.data.border.secondColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points6}" stroke="${this.data.border.secondColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points7}" stroke="${this.data.border.secondColor}" class="dv-line-width"></polyline>
+            <polyline points="${this.points8}" stroke="${this.data.border.secondColor}" class="dv-line-width"></polyline>
+        </svg>
+    </div>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent7, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent7, isStandalone: true, selector: "border7", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-linecap:round}:host ::ng-deep .dv-line-width{stroke-width:4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent7, decorators: [{
+            type: Component,
+            args: [{ selector: 'border7', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-linecap:round}:host ::ng-deep .dv-line-width{stroke-width:4}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent8 extends BasicService {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `5, 5 444, 5 444 314 5, 314`;
+    points2 = `M2.5, 2.5 L446.5, 2.5 L446.5, 316.5 L2.5, 316.5 L2.5, 2.5`;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `5, 5 ${this.data.width - 5}, 5 ${this.data.width - 5} ${this.data.height - 3} 5, ${this.data.height - 3}`;
+        this.points2 = `M2.5, 2.5 L${this.data.width - 1.5}, 2.5 L${this.data.width - 1.5}, ${this.data.height - 0.5} L2.5, ${this.data.height - 0.5} L2.5, 2.5`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let id = Guid.createId();
+        let template = `
+    <svg width="${this.data.width}" height="${this.data.height}" class="dv-border-svg-container" style="opacity: ${this.opacity};">
+      ${defs}
+      <defs>
+          <path id="border-box-8-path-${id}"
+              d="${this.points2}" fill="transparent"></path>
+          <radialGradient id="border-box-8-gradient-${id}" cx="50%" cy="50%" r="50%">
+              <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop>
+              <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop>
+          </radialGradient>
+          <mask id="border-box-8-mask-${id}">
+              <circle cx="0" cy="0" r="150" fill="url(#border-box-8-gradient-${id})">
+                  <animateMotion dur="3s" path="M2.5, 2.5 L446.5, 2.5 L446.5, 316.5 L2.5, 316.5 L2.5, 2.5" rotate="auto"
+                      repeatCount="indefinite"></animateMotion>
+              </circle>
+          </mask>
+      </defs>
+      <polygon fill="${fill}" points="${this.points1}"></polygon>
+      <use stroke-width="1" xlink:href="#border-box-8-path-${id}" stroke="${this.data.border.mainColor}"></use>
+      <use stroke-width="3" xlink:href="#border-box-8-path-${id}"
+          mask="url(#border-box-8-mask-${id})" stroke="${this.data.border.secondColor}">
+          <animate attributeName="stroke-dasharray" from="0, 1526" to="1526, 0" dur="3s" repeatCount="indefinite">
+          </animate>
+      </use>
+    </svg> 
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent8, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent8, isStandalone: true, selector: "border8", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent8, decorators: [{
+            type: Component,
+            args: [{ selector: 'border8', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent9 extends BasicService {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `
+  15, 9 45.900000000000006, 9 48.900000000000006, 6 235.48000000000002, 6
+  239.48000000000002, 10 253.41999999999996, 10 258.41999999999996, 6
+  406.1, 6 410.1, 10 439, 10 439, 25.900000000000002
+  443, 30.900000000000002 443, 256.20000000000005 439, 261.20000000000005
+  439, 309 420.08000000000004, 309  415.08000000000004, 313
+  11, 313 11, 45.85 15, 40.85
+  `;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.generateSvg();
+    }
+    generateSvg() {
+        // 定义原始尺寸
+        const originalWidth = 449;
+        const originalHeight = 319;
+        // 计算缩放比例
+        const widthRatio = this.data.width / originalWidth;
+        const heightRatio = this.data.height / originalHeight;
+        // 定义固定边框宽度
+        const borderWidth = 3; // 固定边框宽度
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let id = Guid.createId();
+        // 返回 SVG 字符串
+        return `
+    <svg width="${this.data.width}" height="${this.data.height}" class="dv-border-svg-container">
+      ${defs}
+      <defs>
+        <linearGradient id="border-box-gradient-${id}" x1="0%" y1="0%" x2="100%" y2="100%">
+          <animate attributeName="x1" values="0%;100%;0%" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+          <animate attributeName="x2" values="100%;0%;100%" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+          <stop offset="0%" stop-color="${this.data.border.mainColor}">
+            <animate attributeName="stop-color" values="${this.data.border.mainColor};${this.data.border.secondColor};${this.data.border.mainColor}" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+          </stop>
+          <stop offset="100%" stop-color="${this.data.border.secondColor}">
+            <animate attributeName="stop-color" values="${this.data.border.secondColor};${this.data.border.mainColor};${this.data.border.secondColor}" dur="10s" begin="0s" repeatCount="indefinite"></animate>
+          </stop>
+        </linearGradient>
+        <mask id="border-box-mask-${id}">
+          <polyline stroke="#fff" stroke-width="${borderWidth}" fill="transparent"
+            points="${8}, ${127.6 * heightRatio} ${8}, ${3}
+            ${186.6 * widthRatio}, ${3}"></polyline>
+          <polyline fill="#fff"
+            points="${8}, ${47.85 * heightRatio} ${8}, ${3}
+            ${51.9 * widthRatio}, ${3} ${44.9 * widthRatio}, ${8}
+            ${14}, ${8} ${14}, ${40.85 * heightRatio}"></polyline>
+          <polyline stroke="#fff" stroke-width="${borderWidth}" fill="transparent"
+            points="${224.5 * widthRatio}, ${3} ${446 * widthRatio}, ${3}
+            ${446 * widthRatio}, ${79.75 * heightRatio}"></polyline>
+          <polyline fill="#fff"
+            points="${233.48 * widthRatio}, ${3} ${260.42 * widthRatio}, ${3}
+            ${253.42 * widthRatio}, ${9} ${240.48 * widthRatio}, ${9}"></polyline>
+          
+          <polyline fill="#fff"
+            points="${404 * widthRatio}, ${3} ${446 * widthRatio}, ${3}
+            ${446 * widthRatio}, ${30.2 * heightRatio} ${443.2 * widthRatio}, ${24.9 * heightRatio}
+            ${443 * widthRatio}, ${9} ${411.1 * widthRatio}, ${9}"></polyline>
+
+          <polyline stroke="#fff" stroke-width="${borderWidth}" fill="transparent"
+            points="${8}, ${159.5 * heightRatio} ${8}, ${316 * heightRatio}
+            ${141.7 * widthRatio}, ${316 * heightRatio}"></polyline>
+          <polyline fill="#fff"
+            points="${8}, ${175.45 * heightRatio} ${8}, ${223.3 * heightRatio}
+            ${2}, ${216.3 * heightRatio} ${2}, ${182.45 * heightRatio}"></polyline>
+          <polyline stroke="#fff" stroke-width="${borderWidth}" fill="transparent"
+            points="${157.15 * widthRatio}, ${316 * heightRatio} ${446 * widthRatio}, ${316 * heightRatio}
+            ${446 * widthRatio}, ${111.65 * heightRatio}"></polyline>
+            
+          <polyline fill="#fff"
+            points="${413.08 * widthRatio}, ${316 * heightRatio} ${446 * widthRatio}, ${316 * heightRatio}
+            ${446 * widthRatio}, ${255.2 * heightRatio} ${443 * widthRatio}, ${262.2 * heightRatio}
+            ${443 * widthRatio}, ${313 * heightRatio} ${420.08 * widthRatio}, ${313 * heightRatio}"></polyline>
+        </mask>
+      </defs>
+      <polygon fill="${fill}"
+        points="${15 * widthRatio}, ${9 * heightRatio} ${45.9 * widthRatio}, ${9 * heightRatio}
+        ${48.9 * widthRatio}, ${6 * heightRatio} ${235.48 * widthRatio}, ${6 * heightRatio}
+        ${239.48 * widthRatio}, ${10 * heightRatio} ${253.42 * widthRatio}, ${10 * heightRatio}
+        ${258.42 * widthRatio}, ${6 * heightRatio} ${406.1 * widthRatio}, ${6 * heightRatio}
+        ${410.1 * widthRatio}, ${10 * heightRatio} ${439 * widthRatio}, ${10 * heightRatio}
+        ${439 * widthRatio}, ${25.9 * heightRatio} ${443 * widthRatio}, ${30.9 * heightRatio}
+        ${443 * widthRatio}, ${256.2 * heightRatio} ${439 * widthRatio}, ${261.2 * heightRatio}
+        ${439 * widthRatio}, ${309 * heightRatio} ${420.08 * widthRatio}, ${309 * heightRatio}
+        ${415.08 * widthRatio}, ${313 * heightRatio} ${11 * widthRatio}, ${313 * heightRatio}
+        ${11 * widthRatio}, ${45.85 * heightRatio} ${15 * widthRatio}, ${40.85 * heightRatio}"></polygon>
+      <rect x="0" y="0" width="${this.data.width}" height="${this.data.height}"
+        fill="url(#border-box-gradient)" mask="url(#border-box-mask)"></rect>
+    </svg>
+  `;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent9, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent9, isStandalone: true, selector: "border9", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent9, decorators: [{
+            type: Component,
+            args: [{ selector: 'border9', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent10 extends BasicService {
+    globalSrv;
+    width = 450;
+    height = 320;
+    svgTemplate = ``;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.svgTemplate = this.generateSvg();
+    }
+    generateSvg() {
+        // 计算缩放因子
+        const widthScale = this.data.width / 449; // 原始SVG宽度
+        const heightScale = this.data.height / 319; // 原始SVG高度
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let id = Guid.createId();
+        return `
+      <svg width="${this.data.width}" height="${this.data.height}" class="dv-border-svg-container" style="opacity: ${this.opacity};">
+        ${defs}
+        <defs>
+          <filter id="border-box-10-filterId-${id}" height="150%" width="150%" x="-25%" y="-25%">
+            <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken"></feMorphology>
+            <feGaussianBlur in="thicken" stdDeviation="3" result="blurred"></feGaussianBlur>
+            <feFlood result="glowColor" flood-color="${this.data.border.secondColor}"></feFlood>
+            <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored"></feComposite>
+            <feMerge>
+              <feMergeNode in="softGlowColored"></feMergeNode>
+              <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+          </filter>
+        </defs>
+        <polygon fill="${fill}" points="
+          ${20 * widthScale}, ${32 * heightScale}
+          ${99.5 * widthScale}, ${32 * heightScale}
+          ${119.5 * widthScale}, ${53 * heightScale}
+          ${329.5 * widthScale}, ${53 * heightScale}
+          ${349.5 * widthScale}, ${32 * heightScale}
+          ${429 * widthScale}, ${32 * heightScale}
+          ${441 * widthScale}, ${48 * heightScale}
+          ${441 * widthScale}, ${294 * heightScale}
+          ${429 * widthScale}, ${311 * heightScale}
+          ${20 * widthScale}, ${311 * heightScale}
+          ${8 * widthScale}, ${294 * heightScale}
+          ${8 * widthScale}, ${50 * heightScale}
+        "></polygon>
+        <polyline filter="url(#border-box-11-filterId)" points="
+          ${99.5 * widthScale}, ${30 * heightScale}
+          ${20 * widthScale}, ${30 * heightScale}
+          ${7 * widthScale}, ${50 * heightScale}
+          ${7 * widthScale}, ${126 * heightScale}
+          ${13 * widthScale}, ${131 * heightScale}
+          ${13 * widthScale}, ${211 * heightScale}
+          ${7 * widthScale}, ${216 * heightScale}
+          ${7 * widthScale}, ${292 * heightScale}
+          ${20 * widthScale}, ${312 * heightScale}
+          ${429 * widthScale}, ${312 * heightScale}
+          ${442 * widthScale}, ${292 * heightScale}
+          ${442 * widthScale}, ${216 * heightScale}
+          ${436 * widthScale}, ${211 * heightScale}
+          ${436 * widthScale}, ${131 * heightScale}
+          ${442 * widthScale}, ${126 * heightScale}
+          ${442 * widthScale}, ${50 * heightScale}
+          ${429 * widthScale}, ${30 * heightScale}
+          ${349.5 * widthScale}, ${30 * heightScale}
+          ${329.5 * widthScale}, ${7 * heightScale}
+          ${119.5 * widthScale}, ${7 * heightScale}
+          ${99.5 * widthScale}, ${30 * heightScale}
+          ${119.5 * widthScale}, ${52 * heightScale}
+          ${329.5 * widthScale}, ${52 * heightScale}
+          ${349.5 * widthScale}, ${30 * heightScale}
+        " stroke="${this.data.border.mainColor}"></polyline>
+        <polygon fill="transparent" points="
+          ${344.5 * widthScale}, ${30 * heightScale}
+          ${328.5 * widthScale}, ${11 * heightScale}
+          ${322.5 * widthScale}, ${11 * heightScale}
+          ${341.5 * widthScale}, ${34 * heightScale}
+        " stroke="${this.data.border.mainColor}"></polygon>
+        <polygon fill="transparent" points="
+          ${104.5 * widthScale}, ${30 * heightScale}
+          ${121.5 * widthScale}, ${49 * heightScale}
+          ${127.5 * widthScale}, ${49 * heightScale}
+          ${107.5 * widthScale}, ${26 * heightScale}
+        " stroke="${this.data.border.mainColor}"></polygon>
+        <polygon fill="rgba(0,206,209,0.3)" filter="url(#border-box-11-filterId)" points="
+          ${338.5 * widthScale}, ${37 * heightScale}
+          ${317.5 * widthScale}, ${11 * heightScale}
+          ${122.5 * widthScale}, ${11 * heightScale}
+          ${110.5 * widthScale}, ${23 * heightScale}
+          ${132.5 * widthScale}, ${49 * heightScale}
+          ${327.5 * widthScale}, ${49 * heightScale}
+        " stroke="${this.data.border.mainColor}"></polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="1" points="
+          ${89.5 * widthScale}, ${37 * heightScale}
+          ${68.5 * widthScale}, ${37 * heightScale}
+          ${74.5 * widthScale}, ${46 * heightScale}
+          ${95.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="0.7" points="
+          ${59.5 * widthScale}, ${37 * heightScale}
+          ${38.5 * widthScale}, ${37 * heightScale}
+          ${44.5 * widthScale}, ${46 * heightScale}
+          ${65.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="0.5" points="
+          ${29.5 * widthScale}, ${37 * heightScale}
+          ${8.5 * widthScale}, ${37 * heightScale}
+          ${14.5 * widthScale}, ${46 * heightScale}
+          ${35.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="1" points="
+          ${379.5 * widthScale}, ${37 * heightScale}
+          ${358.5 * widthScale}, ${37 * heightScale}
+          ${352.5 * widthScale}, ${46 * heightScale}
+          ${373.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="1;0.7;1" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="0.7" points="
+          ${409.5 * widthScale}, ${37 * heightScale}
+          ${388.5 * widthScale}, ${37 * heightScale}
+          ${382.5 * widthScale}, ${46 * heightScale}
+          ${403.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="0.7;0.4;0.7" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <polygon filter="url(#border-box-11-filterId)" opacity="0.5" points="
+          ${439.5 * widthScale}, ${37 * heightScale}
+          ${418.5 * widthScale}, ${37 * heightScale}
+          ${412.5 * widthScale}, ${46 * heightScale}
+          ${433.5 * widthScale}, ${46 * heightScale}
+        " fill="${this.data.border.mainColor}">
+          <animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" begin="0s" repeatCount="indefinite"></animate>
+        </polygon>
+        <text x="${224.5 * widthScale}" y="${32 * heightScale}" fill="#fff" font-size="${18 * heightScale}" text-anchor="middle" dominant-baseline="middle" class="dv-border-box-11-title"></text>
+        
+      </svg>
+    `;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent10, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent10, isStandalone: true, selector: "border10", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent10, decorators: [{
+            type: Component,
+            args: [{ selector: 'border10', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\"></div>\r\n</ng-container>", styles: [":host ::ng-deep polyline{fill:none;stroke-width:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent11 extends BasicService {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `
+    M15 5 L 434 5 Q 444 5, 444 15
+    L 444 304 Q 444 314, 434 314
+    L 15, 314 Q 5 314 5 304 L 5 15
+    Q 5 5 15 5
+  `;
+    points2 = `M 429 5 L 434 5 Q 444 5 444 15 L 444 20`;
+    points3 = `
+    M 429 314 L 434 314
+    Q 444 314 444 304
+    L 444 299
+  `;
+    points4 = `
+    M 20 314 L 15 314
+    Q 5 314 5 304
+    L 5 299
+  `;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `
+      M15 5 L ${this.data.width - 15} 5 Q ${this.data.width - 5} 5, ${this.data.width - 5} 15
+      L ${this.data.width - 5} ${this.data.height - 15} Q ${this.data.width - 5} ${this.data.height - 5}, ${this.data.width - 15} ${this.data.height - 5}
+      L 15, ${this.data.height - 5} Q 5 ${this.data.height - 5} 5 ${this.data.height - 15} L 5 15
+      Q 5 5 15 5
+    `;
+        this.points2 = `M ${this.data.width - 20} 5 L ${this.data.width - 15} 5 Q ${this.data.width - 5} 5 ${this.data.width - 5} 15 L ${this.data.width - 5} 20`;
+        this.points3 = `
+      M ${this.data.width - 20} ${this.data.height - 5} L ${this.data.width - 15} ${this.data.height - 5}
+      Q ${this.data.width - 5} ${this.data.height - 5} ${this.data.width - 5} ${this.data.height - 15}
+      L ${this.data.width - 5} ${this.data.height - 20}
+    `;
+        this.points4 = `
+      M 20  ${this.data.height - 5} L 15  ${this.data.height - 5}
+      Q 5  ${this.data.height - 5} 5  ${this.data.height - 15}
+      L 5 ${this.data.height - 20}
+    `;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let id = Guid.createId();
+        let template = `
+    <svg width="${this.data.width}" height="${this.data.height}"  style="opacity: ${this.opacity};">
+      ${defs}
+      <defs>
+        <filter id="borderr-box-11-filterId-${id}" height="150%" width="150%" x="-25%"
+          y="-25%">
+          <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken"></feMorphology>
+          <feGaussianBlur in="thicken" stdDeviation="2" result="blurred"></feGaussianBlur>
+          <feFlood flood-color="rgba(0,206,209,0.7)" result="glowColor">
+            <animate attributeName="flood-color" values="
+              rgba(0,206,209,0.7);
+              rgba(0,206,209,0.3);
+              rgba(0,206,209,0.7);
+            " dur="3s" begin="0s" repeatCount="indefinite"></animate>
+          </feFlood>
+          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored"></feComposite>
+          <feMerge>
+            <feMergeNode in="softGlowColored"></feMergeNode>
+            <feMergeNode in="SourceGraphic"></feMergeNode>
+          </feMerge>
+        </filter>
+      </defs>
+      <path fill="${fill}" stroke-width="2" stroke="${this.data.border.mainColor}" d="${this.points1}"></path>
+      <path stroke-width="2" fill="transparent" stroke-linecap="round"
+        filter="url(#borderr-box-11-filterId-${id})" d="M 20 5 L 15 5 Q 5 5 5 15 L 5 20"
+        stroke="${this.data.border.secondColor}"></path>
+      <path stroke-width="2" fill="transparent" stroke-linecap="round"
+        filter="url(#borderr-box-11-filterId-${id})" d="${this.points2}" stroke="${this.data.border.secondColor}">
+      </path>
+      <path stroke-width="2" fill="transparent" stroke-linecap="round"
+        filter="url(#borderr-box-11-filterId-${id})" d="${this.points3}" stroke="${this.data.border.secondColor}">
+      </path>
+      <path stroke-width="2" fill="transparent" stroke-linecap="round"
+        filter="url(#borderr-box-11-filterId-${id})" d="${this.points4}" stroke="${this.data.border.secondColor}">
+      </path>
+    </svg>
+  `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent11, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent11, isStandalone: true, selector: "border11", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n  <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent11, decorators: [{
+            type: Component,
+            args: [{ selector: 'border11', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n  <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+class BorderComponent12 extends BasicService {
+    globalSrv;
+    svgTemplate = ``;
+    width = 450;
+    height = 320;
+    points1 = `
+    M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+    L 429 10 L 444 25
+    L 444 314 L 20 314
+    L 5 299 L 5 20
+  `;
+    points2 = `M 444 289 L 444 314 L 419 314`;
+    constructor(globalSrv) {
+        super(globalSrv);
+        this.globalSrv = globalSrv;
+    }
+    ngOnInit() {
+    }
+    initPageData(value) {
+        this.points1 = `
+      M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+      L ${this.data.width - 20} 10 L ${this.data.width - 5} 25
+      L ${this.data.width - 5} ${this.data.height - 5} L 20 ${this.data.height - 5}
+      L 5 ${this.data.height - 20} L 5 20
+    `;
+        this.points2 = `M ${this.data.width - 5} ${this.data.height - 30} L ${this.data.width - 5} ${this.data.height - 5} L ${this.data.width - 30} ${this.data.height - 5}`;
+        this.svgTemplate = this.initTemplate();
+    }
+    initTemplate() {
+        let fill = "transparent";
+        let defs = this.generateGradientData();
+        if (this.data.border.bgColorType == "single") {
+            if (this.data.border.bgColor) {
+                fill = this.data.border.bgColor;
+            }
+        }
+        else if (this.data.border.bgColorType == "gradient") {
+            fill = "url(#borderBgjSWcehpx)";
+        }
+        let template = `
+      <svg width="${this.data.width}" height="${this.data.height}" style="opacity: ${this.opacity};">
+        ${defs}
+        <path fill="${fill}" d="${this.points1}" stroke="${this.data.border.mainColor}"></path>
+        <path fill="transparent" stroke-width="3" stroke-linecap="round" stroke-dasharray="10, 5" d="M 16 9 L 61 9"
+            stroke="${this.data.border.mainColor}"></path>
+        <path fill="transparent" d="M 5 20 L 5 10 L 12 3  L 60 3 L 68 10" stroke="${this.data.border.secondColor}"></path>
+        <path fill="transparent" d="${this.points2}" stroke="${this.data.border.secondColor}"></path>
+      </svg>
+    `;
+        return template;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent12, deps: [{ token: i1.GramGlobalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: BorderComponent12, isStandalone: true, selector: "border12", providers: [], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: GramPipeModule }, { kind: "pipe", type: i3.SafeHtmlPipe, name: "safeHtml" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: BorderComponent12, decorators: [{
+            type: Component,
+            args: [{ selector: 'border12', imports: [
+                        CommonModule,
+                        FormsModule, ReactiveFormsModule,
+                        GramPipeModule
+                    ], providers: [], template: "<ng-container *ngIf=\"data!!\">\r\n    <div [innerHTML]=\"svgTemplate | safeHtml\" class=\"dv-border-box\"></div>\r\n</ng-container>" }]
+        }], ctorParameters: () => [{ type: i1.GramGlobalService }] });
+
+const dynamicComponents = {
+    border1: BorderComponent1,
+    border2: BorderComponent2,
+    border3: BorderComponent3,
+    border4: BorderComponent4,
+    border5: BorderComponent5,
+    border6: BorderComponent6,
+    border7: BorderComponent7,
+    border8: BorderComponent8,
+    border9: BorderComponent9,
+    border10: BorderComponent10,
+    border11: BorderComponent11,
+    border12: BorderComponent12
+};
+class GramBiBorderComponent {
+    componentFactoryResolver;
+    _data = null;
+    type = null;
+    component;
+    set data(value) {
+        this._data = value;
+        this.renderComponent();
+    }
+    get data() {
+        return this._data;
+    }
+    set rd(value) {
+        if (this.component) {
+            this.component.instance['rd'] = value;
+        }
+    }
+    /**
+     * 动态子组件
+     */
+    componentHost;
+    ngOnInit() { }
+    constructor(componentFactoryResolver) {
+        this.componentFactoryResolver = componentFactoryResolver;
+    }
+    renderComponent() {
+        if (this.data.secondType) {
+            this.type = this.data.secondType;
+        }
+        if (this.type) {
+            if (this.componentHost) {
+                this.componentHost.clear();
+                const compFactory = this.componentFactoryResolver.resolveComponentFactory(dynamicComponents[this.type]);
+                this.component = this.componentHost.createComponent(compFactory);
+                this.component.instance['data'] = this.data;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GramBiBorderComponent, isStandalone: true, selector: "gram-bi-border", inputs: { data: "data", rd: "rd" }, viewQueries: [{ propertyName: "componentHost", first: true, predicate: ["componentHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<ng-container #componentHost></ng-container>", styles: [":host ::ng-deep{width:100%;height:100%;display:inline-block}:host ::ng-deep svg{transform-origin:left top}:host ::ng-deep .dv-border-box{position:relative;height:100%;width:100%}:host ::ng-deep .border-box{display:inline-block;position:relative}:host ::ng-deep .border{position:absolute;display:block;border:0!important}:host ::ng-deep polyline{fill:none;stroke-width:1}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'gram-bi-border', template: "<ng-container #componentHost></ng-container>", styles: [":host ::ng-deep{width:100%;height:100%;display:inline-block}:host ::ng-deep svg{transform-origin:left top}:host ::ng-deep .dv-border-box{position:relative;height:100%;width:100%}:host ::ng-deep .border-box{display:inline-block;position:relative}:host ::ng-deep .border{position:absolute;display:block;border:0!important}:host ::ng-deep polyline{fill:none;stroke-width:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { data: [{
+                type: Input
+            }], rd: [{
+                type: Input
+            }], componentHost: [{
+                type: ViewChild,
+                args: ['componentHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
+const COMPONENTS = [GramBiBorderComponent];
+const COMPONENTS_NOROUNT = [
+    BorderComponent1,
+    BorderComponent2,
+    BorderComponent3,
+    BorderComponent4,
+    BorderComponent5,
+    BorderComponent6,
+    BorderComponent7,
+    BorderComponent8,
+    BorderComponent9,
+    BorderComponent10,
+    BorderComponent11,
+    BorderComponent12
+];
+class GramBiBorderModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderModule, imports: [GramBiBorderComponent, BorderComponent1,
+            BorderComponent2,
+            BorderComponent3,
+            BorderComponent4,
+            BorderComponent5,
+            BorderComponent6,
+            BorderComponent7,
+            BorderComponent8,
+            BorderComponent9,
+            BorderComponent10,
+            BorderComponent11,
+            BorderComponent12], exports: [GramBiBorderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderModule, imports: [COMPONENTS_NOROUNT] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GramBiBorderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...COMPONENTS, ...COMPONENTS_NOROUNT],
+                    exports: [...COMPONENTS],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GramBiBorderComponent, GramBiBorderModule };
+//# sourceMappingURL=bi.border.mjs.map