@joker.front/datav 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -1,7 +1,7 @@
 var ue = Object.defineProperty;
 var be = (e, l, o) => l in e ? ue(e, l, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[l] = o;
 var t = (e, l, o) => be(e, typeof l != "symbol" ? l + "" : l, o);
-import { Component as ye, VNode as Re, SCOPE_ID as d, registerGlobalComponent as ve } from "@joker.front/core";
+import { Component as ye, VNode as Re, SCOPE_ID as d, combinedReply as ve, registerGlobalComponent as Ce } from "@joker.front/core";
 function c(e = 32) {
   let l = [], o = [
     "0",
@@ -47,10 +47,10 @@ function c(e = 32) {
   }
   return l.join("");
 }
-function Ce(e, l = "-") {
+function ke(e, l = "-") {
   return e = e || "", e.split(/(?=[A-Z])/).map((i) => i.toLowerCase()).join(l);
 }
-function ke(e, l, o = {}) {
+function Se(e, l, o = {}) {
   let i, r = !1, n = 0, s = () => {
     i && clearTimeout(i);
   }, g = (h) => {
@@ -70,19 +70,21 @@ function ke(e, l, o = {}) {
   }
   return m.cancel = g, m;
 }
-function Se(e, l, o = !1) {
-  return ke(e, l, { debounceMode: o !== !1 });
+function Le(e, l, o = !1) {
+  return Se(e, l, { debounceMode: o !== !1 });
 }
 class a extends ye {
   constructor(...o) {
     super(...o);
     t(this, "container");
-    t(this, "debounceInitWHFun", Se(100, this.initSize.bind(this)));
+    t(this, "debounceInitWHFun", Le(100, this.initSize.bind(this)));
     t(this, "resize");
     t(this, "domObserver");
     this.model.width = 0, this.model.height = 0, this.$on("mounted", () => {
-      var i;
-      this.container = this.$rootVNode.first((r) => r instanceof Re.Element).output, this.container && (this.initSize(), (i = this.resize) == null || i.call(this), this.bindDomResizeCallback());
+      this.$updatedRender(() => {
+        var i;
+        this.container = this.$rootVNode.first((r) => r instanceof Re.Element).output, this.container && (this.initSize(), (i = this.resize) == null || i.call(this), this.bindDomResizeCallback());
+      });
     }), this.$on("beforeDestroy", () => {
       this.unbindDomResizeCallback();
     });
@@ -92,22 +94,26 @@ class a extends ye {
     this.container && (this.model.width = this.container.clientWidth, this.model.height = this.container.clientHeight, (o = this.resize) == null || o.call(this));
   }
   bindDomResizeCallback() {
-    this.container && (this.domObserver = Le(this.container, this.debounceInitWHFun), window.addEventListener("resize", this.debounceInitWHFun));
+    this.container && (this.domObserver = xe(this.container, this.debounceInitWHFun), window.addEventListener("resize", this.debounceInitWHFun));
   }
   unbindDomResizeCallback() {
     this.container && (this.domObserver && (this.domObserver.disconnect(), this.domObserver.takeRecords()), window.removeEventListener("resize", this.debounceInitWHFun));
   }
   fade(o, i) {
+    if (o.startsWith("rgba"))
+      return o;
     o = o.replace("#", "");
     let r = parseInt(o.substring(0, 2), 16), n = parseInt(o.substring(2, 4), 16), s = parseInt(o.substring(4, 6), 16);
+    if (isNaN(r))
+      debugger;
     return `rgba(${r},${n},${s},${i / 100})`;
   }
 }
-function Le(e, l) {
+function xe(e, l) {
   let o = new MutationObserver(l);
   return o.observe(e, { attributes: !0, attributeFilter: ["style"], attributeOldValue: !0 }), o;
 }
-class xe extends a {
+class Ae extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -117,20 +123,20 @@ class xe extends a {
     t(this, "border", ["left-top", "right-top", "left-bottom", "right-bottom"]);
   }
 }
-let Ae = { render: function(e) {
+let Ie = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "border", width: "@model.width", height: "@model.height" }, [e.createElement("polygon", { fill: "@props.backgroundColor", points: "10, 27 10, @(model.height - 27) 13, @(model.height - 24) 13, @(model.height - 21) 24, @(model.height - 11) 38, @(model.height - 11) 41, @(model.height - 8) 73, @(model.height - 8) 75, @(model.height-10) 81, @(model.height - 10) 85, @(model.height - 6) @(model.width - 85), @(model.height - 6) @(model.width - 81), @(model.height - 10) @(model.width - 75), @(model.height - 10) @(model.width - 73), @(model.height - 8) @(model.width - 41), @(model.height - 8) @(model.width-38), @(model.height - 11) @(model.width - 24), @(model.height - 11) @(model.width - 13), @(model.height - 21) @(model.width -13), @(model.height - 24) @(model.width - 10), @(model.height - 27) @(model.width - 10), 27 @(model.width - 13), 25 @(model.width -13), 21 @(model.width - 24), 11 @(model.width - 38), 11 @(model.width - 41), 8 @(model.width - 73), 8 @(model.width -75), 10 @(model.width - 81), 10 @(model.width -85), 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24" }, [])]), e.createCommand("for", "let item of border", [e.createElement("svg", { width: "150px", height: "150px", class: "@item border" }, [e.createElement("polygon", { fill: "@(props.colors[0])", 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" }, [e.createElement("animate", { attributeName: "fill", values: "@(props.colors[0]);@(props.colors[1]);@(props.colors[0])", dur: "0.5s", begin: "0s", repeatCount: "indefinite" }, [])]), e.createElement("polygon", { fill: "@(props.colors[1])", points: "27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8" }, [e.createElement("animate", { attributeName: "fill", values: "@(props.colors[1]);@(props.colors[0]);@(props.colors[1])", dur: "0.5s", begin: "0s", repeatCount: "indefinite" }, [])]), e.createElement("polygon", { fill: "@(props.colors[0])", 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" }, [e.createElement("animate", { attributeName: "fill", values: "@(props.colors[0]);@(props.colors[1]);transparent", dur: "1s", begin: "0s", repeatCount: "indefinite" }, [])])])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, Ie = {
-  component: xe
+} }, Pe = {
+  component: Ae
 };
 var v, C;
-let Pe = class extends (C = Ie.component, v = d, C) {
+let Te = class extends (C = Pe.component, v = d, C) {
   constructor() {
     super(...arguments);
     t(this, v, "2b4d949b");
-    t(this, "template", Ae.render);
+    t(this, "template", Ie.render);
   }
 };
-class Te extends a {
+class Ne extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -139,20 +145,20 @@ class Te extends a {
     });
   }
 }
-let Ne = { render: function(e) {
+let Oe = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "dv-border-svg-container", width: "@model.width", height: "@model.height" }, [e.createElement("polygon", { fill: "@props.backgroundColor", points: "7, 7 @(model.width-7), 7 @(model.width-7), @(model.height-7) 7, @(model.height-7)" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "2, 2 @(model.width-2) ,2 @(model.width-2), @(model.height-2) 2, @(model.height-2) 2, 2" }, []), e.createElement("polyline", { stroke: "@props.colors[1]", points: "6, 6 @(model.width-6), 6 @(model.width-6), @(model.height-6) 6, @(model.height-6) 6, 6" }, []), e.createElement("circle", { fill: "@props.colors[0]", cx: "11", cy: "11", r: "1" }, []), e.createElement("circle", { fill: "@props.colors[0]", cx: "@(model.width - 11)", cy: "11", r: "1" }, []), e.createElement("circle", { fill: "@props.colors[0]", cx: "@(model.width - 11)", cy: "@(model.height - 11)", r: "1" }, []), e.createElement("circle", { fill: "@props.colors[0]", cx: "11", cy: "@(model.height - 11)", r: "1" }, [])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, Oe = {
-  component: Te
+} }, $e = {
+  component: Ne
 };
 var k, S;
-let $e = class extends (S = Oe.component, k = d, S) {
+let Me = class extends (S = $e.component, k = d, S) {
   constructor() {
     super(...arguments);
     t(this, k, "3b9d3fa6");
-    t(this, "template", Ne.render);
+    t(this, "template", Oe.render);
   }
 };
-class Me extends a {
+class De extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -161,20 +167,20 @@ class Me extends a {
     });
   }
 }
-let De = { render: function(e) {
+let Fe = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "dv-border-svg-container", width: "@model.width", height: "@model.height" }, [e.createElement("polygon", { fill: "@props.backgroundColor", points: "23, 23 @(model.width-24), 23 @(model.width-24), @(model.height-24) 23, @(model.height-24)" }, []), e.createElement("polyline", { class: "dv-bb3-line1", stroke: "@props.colors[0]", points: "4, 4 @(model.width-22) ,4 @(model.width-22), @(model.height-22) 4, @(model.height-22) 4, 4" }, []), e.createElement("polyline", { class: "dv-bb3-line2", stroke: "@props.colors[1]", points: "10, 10 @(model.width-16), 10 @(model.width-16), @(model.height-16) 10,  @(model.height-16) 10, 10" }, []), e.createElement("polyline", { class: "dv-bb3-line2", stroke: "@props.colors[1]", points: "16, 16 @(model.width-10), 16 @(model.width-10), @(model.height-10) 16, @(model.height-10) 16, 16" }, []), e.createElement("polyline", { class: "dv-bb3-line2", stroke: "@props.colors[1]", points: "22, 22 @(model.width-4), 22 @(model.width-4), @(model.height-4) 22, @(model.height-4) 22, 22" }, [])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, Fe = {
-  component: Me
+} }, Je = {
+  component: De
 };
 var L, x;
-let Je = class extends (x = Fe.component, L = d, x) {
+let Ke = class extends (x = Je.component, L = d, x) {
   constructor() {
     super(...arguments);
     t(this, L, "113d37b6");
-    t(this, "template", De.render);
+    t(this, "template", Fe.render);
   }
 };
-class Ke extends a {
+class We extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -183,20 +189,20 @@ class Ke extends a {
     });
   }
 }
-let We = { render: function(e) {
+let He = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "dv-border-svg-container @(props.reverse && 'dv-reverse')", width: "@model.width", height: "@model.height" }, [e.createElement("polygon", { fill: "@props.backgroundColor", points: "@(model.width-15), 22 170, 22 150, 7 40, 7 28, 21 32, 24 16, 42 16, @(model.height-32) 41, @(model.height-7) @(model.width-15), @(model.height-7)" }, []), e.createElement("polyline", { class: "dv-bb4-line-1", stroke: "@props.colors[0]", points: "145, @(model.height-5) 40,  @(model.height-5) 10,  @(model.height-35) 10, 40 40, 5 150, 5 170, 20 @(model.width-15), 20" }, []), e.createElement("polyline", { stroke: "@props.colors[1]", class: "dv-bb4-line-2", points: "245,  @(model.height-1) 36, @(model.height-1) 14,@(model.height-23) 14, @(model.height-100)" }, []), e.createElement("polyline", { class: "dv-bb4-line-3", stroke: "@props.colors[0]", points: "7, @(model.height-40) 7, @(model.height-75)" }, []), e.createElement("polyline", { class: "dv-bb4-line-4", stroke: "@props.colors[0]", points: "28, 24 13, 41 13, 64" }, []), e.createElement("polyline", { class: "dv-bb4-line-5", stroke: "@props.colors[0]", points: "5, 45 5, 140" }, []), e.createElement("polyline", { class: "dv-bb4-line-6", stroke: "@props.colors[1]", points: "14, 75 14, 180" }, []), e.createElement("polyline", { class: "dv-bb4-line-7", stroke: "@props.colors[1]", points: "55, 11 147, 11 167, 26 250, 26" }, []), e.createElement("polyline", { class: "dv-bb4-line-8", stroke: "@props.colors[1]", points: "158, 5 173, 16" }, []), e.createElement("polyline", { class: "dv-bb4-line-9", stroke: "@props.colors[0]", points: "200, 17 @(model.width-10), 17" }, []), e.createElement("polyline", { class: "dv-bb4-line-10", stroke: "@props.colors[1]", points: "385, 17 @(model.width-10), 17" }, [])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, He = {
-  component: Ke
+} }, ze = {
+  component: We
 };
 var A, I;
-let ze = class extends (I = He.component, A = d, I) {
+let Be = class extends (I = ze.component, A = d, I) {
   constructor() {
     super(...arguments);
     t(this, A, "237a53e4");
-    t(this, "template", We.render);
+    t(this, "template", He.render);
   }
 };
-class Be extends a {
+class Ge extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -205,20 +211,20 @@ class Be extends a {
     });
   }
 }
-let Ge = { render: function(e) {
+let Xe = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "dv-border-svg-container @(props.reverse && 'dv-reverse')", width: "@model.width", height: "@model.height" }, [e.createElement("polygon", { fill: "@props.backgroundColor", points: "10, 22 @(model.width-22), 22 @(model.width-22), @(model.height-86) @(model.height-84), @(model.height-24) 10, @(model.height-24)" }, []), e.createElement("polyline", { class: "dv-bb5-line-1", stroke: "@props.colors[0]", points: "8, 5 @(model.width-5), 5 @(model.width-5), @(model.height-100) @(model.width-100), @(model.height-5) 8, @(model.height-5) 8, 5" }, []), e.createElement("polyline", { class: "dv-bb5-line-2", stroke: "@props.colors[1]", points: "3, 5 @(model.width-20), 5 @(model.width-20), @(model.height-60) @(model.width-74), @(model.height-5) 3, @(model.height-5) 3, 5" }, []), e.createElement("polyline", { class: "dv-bb5-line-3", stroke: "@props.colors[1]", points: "50, 13 @(model.width-35), 13" }, []), e.createElement("polyline", { class: "dv-bb5-line-4", stroke: "@props.colors[1]", points: "15, 20 @(model.width-35), 20" }, []), e.createElement("polyline", { class: "dv-bb5-line-5", stroke: "@props.colors[1]", points: "15, @(model.height-20) @(model.width-110), @(model.height-20)" }, []), e.createElement("polyline", { class: "dv-bb5-line-6", stroke: "@props.colors[1]", points: "15, @(model.height-13) @(model.width-110), @(model.height-13)" }, [])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, Xe = {
-  component: Be
+} }, Ue = {
+  component: Ge
 };
 var P, T;
-let Ue = class extends (T = Xe.component, P = d, T) {
+let je = class extends (T = Ue.component, P = d, T) {
   constructor() {
     super(...arguments);
     t(this, P, "6fd7b4d4");
-    t(this, "template", Ge.render);
+    t(this, "template", Xe.render);
   }
 };
-class je extends a {
+class Qe extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -227,20 +233,20 @@ class je extends a {
     });
   }
 }
-let Qe = { render: function(e) {
+let Ve = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "dv-border-svg-container", width: "@model.width", height: "@model.height" }, [e.createElement("polygon", { fill: "@props.backgroundColor", points: "9, 7 @(model.width-9), 7 @(model.width-9), @(model.height-7) 9, @(model.height-7)" }, []), e.createElement("circle", { fill: "@props.colors[1]", cx: "5", cy: "5", r: "2" }, []), e.createElement("circle", { fill: "@props.colors[1]", cx: "@(model.width - 5)", cy: "5", r: "2" }, []), e.createElement("circle", { fill: "@props.colors[1]", cx: "@(model.width - 5)", ":cy": "height - 5", r: "2" }, []), e.createElement("circle", { fill: "@props.colors[1]", cx: "5", cy: "@(model.height - 5)", r: "2" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "10, 4 @(model.width - 10), 4" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "10, @(model.height-4) @(model.width - 10), @(model.height-4)" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "5, 70 5, @(model.height-70)" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "@(model.width - 5), 70 @(model.width - 5), @(model.height-70)" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "3, 10, 3, 50" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "7, 30 7, 80" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "@(model.width - 3), 10 @(model.width - 3), 50" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "@(model.width - 7), 30 @(model.width - 7), 80" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "3, @(model.height-10) 3, @(model.height-50)" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "7, @(model.height-30) 7, @(model.height-80)" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "@(model.width-3), @(model.height-10) @(model.width-3), @(model.height-50)" }, []), e.createElement("polyline", { stroke: "@props.colors[0]", points: "@(model.width-7), @(model.height-30) @(model.width-7), @(model.height-80)" }, [])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, Ve = {
-  component: je
+} }, qe = {
+  component: Qe
 };
 var N, O;
-let qe = class extends (O = Ve.component, N = d, O) {
+let Ze = class extends (O = qe.component, N = d, O) {
   constructor() {
     super(...arguments);
     t(this, N, "ebdf6a26");
-    t(this, "template", Qe.render);
+    t(this, "template", Ve.render);
   }
 };
-class Ze extends a {
+class Ye extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -249,20 +255,20 @@ class Ze extends a {
     });
   }
 }
-let Ye = { render: function(e) {
+let et = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "box-shadow: inset 0 0 40px @(props.colors[0]); border: 1px solid @(props.colors[0]); background-color: @(props.backgroundColor)" }, [e.createElement("svg", { class: "dv-border-svg-container", width: "@model.width", height: "@model.height" }, [e.createElement("polyline", { class: "dv-bb7-line-width-2", stroke: "@props.colors[0]", points: "0, 25 0, 0 25, 0" }, []), e.createElement("polyline", { class: "dv-bb7-line-width-2", stroke: "@props.colors[0]", points: "@(model.width-25), 0 @(model.width), 0 @(model.width), 25" }, []), e.createElement("polyline", { class: "dv-bb7-line-width-2", stroke: "@props.colors[0]", points: "@(model.width-25), @(model.height) @(model.width), @(model.height) @(model.width), @(model.height-25)" }, []), e.createElement("polyline", { class: "dv-bb7-line-width-2", stroke: "@props.colors[0]", points: "0, @(model.height-25) 0, @(model.height) 25, @(model.height)" }, []), e.createElement("polyline", { class: "dv-bb7-line-width-5", stroke: "@props.colors[1]", points: "0, 10 0, 0 10, 0" }, []), e.createElement("polyline", { class: "dv-bb7-line-width-5", stroke: "@props.colors[1]", points: "@(model.width-10), 0 @(model.width), 0 @(model.width), 10" }, []), e.createElement("polyline", { class: "dv-bb7-line-width-5", stroke: "@props.colors[1]", points: "@(model.width-10), @(model.height) @(model.width), @(model.height) @(model.width), @(model.height-10)" }, []), e.createElement("polyline", { class: "dv-bb7-line-width-5", stroke: "@props.colors[1]", points: "0, @(model.height-10) 0, @(model.height) 10, @(model.height)" }, [])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, et = {
-  component: Ze
+} }, tt = {
+  component: Ye
 };
 var $, M;
-let tt = class extends (M = et.component, $ = d, M) {
+let ot = class extends (M = tt.component, $ = d, M) {
   constructor() {
     super(...arguments);
     t(this, $, "44fa29fb");
-    t(this, "template", Ye.render);
+    t(this, "template", et.render);
   }
 };
-class ot extends a {
+class lt extends a {
   constructor() {
     super(...arguments);
     t(this, "path", `border-box-8-path-${c()}`);
@@ -281,20 +287,20 @@ class ot extends a {
     return this.props.reverse ? `M 2.5, 2.5 L 2.5, ${this.model.height - 2.5} L ${this.model.width - 2.5}, ${this.model.height - 2.5} L ${this.model.width - 2.5}, 2.5 L 2.5, 2.5` : `M2.5, 2.5 L${this.model.width - 2.5}, 2.5 L${this.model.width - 2.5}, ${this.model.height - 2.5} L2.5, ${this.model.height - 2.5} L2.5, 2.5`;
   }
 }
-let lt = { render: function(e) {
+let it = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "dv-border-svg-container", width: "@model.width", height: "@model.height" }, [e.createElement("defs", {}, [e.createElement("path", { id: "@path", d: "@pathD", fill: "transparent" }, []), e.createElement("radialGradient", { id: "@gradient", cx: "50%", cy: "50%", r: "50%" }, [e.createElement("stop", { offset: "0%", "stop-color": "#fff", "stop-opacity": "1" }, []), e.createElement("stop", { offset: "100%", "stop-color": "#fff", "stop-opacity": "0" }, [])]), e.createElement("mask", { id: "@mask" }, [e.createElement("circle", { cx: "0", cy: "0", r: "150", fill: "url(#@(gradient))" }, [e.createElement("animateMotion", { dur: "@(props.dur)s", path: "@pathD", rotate: "auto", repeatCount: "indefinite" }, [])])])]), e.createElement("polygon", { fill: "@props.backgroundColor", points: "5, 5 @(model.width-5), 5 @(model.width-5) @(model.height-5) 5,@(model.height-5)" }, []), e.createElement("use", { stroke: "@props.colors[0]", "stroke-width": "1", "xlink:href": "#@(path)" }, []), e.createElement("use", { stroke: "@props.colors[1]", "stroke-width": "3", "xlink:href": "#@(path)", mask: "url(#@(mask))" }, [e.createElement("animate", { attributeName: "stroke-dasharray", from: "0, @(length)", to: "@length, 0", dur: "@(props.dur)s", repeatCount: "indefinite" }, [])])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, it = {
-  component: ot
+} }, rt = {
+  component: lt
 };
 var D, F;
-let rt = class extends (F = it.component, D = d, F) {
+let nt = class extends (F = rt.component, D = d, F) {
   constructor() {
     super(...arguments);
     t(this, D, "df10b11e");
-    t(this, "template", lt.render);
+    t(this, "template", it.render);
   }
 };
-class nt extends a {
+class st extends a {
   constructor() {
     super(...arguments);
     t(this, "gradient", `border-box-9-gradient-${c()}`);
@@ -312,20 +318,20 @@ class nt extends a {
     return this.props.reverse ? `M 2.5, 2.5 L 2.5, ${this.model.height - 2.5} L ${this.model.width - 2.5}, ${this.model.height - 2.5} L ${this.model.width - 2.5}, 2.5 L 2.5, 2.5` : `M2.5, 2.5 L${this.model.width - 2.5}, 2.5 L${this.model.width - 2.5}, ${this.model.height - 2.5} L2.5, ${this.model.height - 2.5} L2.5, 2.5`;
   }
 }
-let st = { render: function(e) {
+let dt = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "dv-border-svg-container", width: "@model.width", height: "@model.height" }, [e.createElement("defs", {}, [e.createElement("linearGradient", { id: "@gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, [e.createElement("animate", { attributeName: "x1", values: "0%;100%;0%", dur: "10s", begin: "0s", repeatCount: "indefinite" }, []), e.createElement("animate", { attributeName: "x2", values: "100%;0%;100%", dur: "10s", begin: "0s", repeatCount: "indefinite" }, []), e.createElement("stop", { offset: "0%", "stop-color": "@props.colors[0]" }, [e.createElement("animate", { attributeName: "stop-color", values: "@(props.colors[0]);@(props.colors[1]);@(props.colors[0])", dur: "10s", begin: "0s", repeatCount: "indefinite" }, [])]), e.createElement("stop", { offset: "100%", "stop-color": "@(props.colors[1])" }, [e.createElement("animate", { attributeName: "stop-color", values: "`@(props.colors[1]);@(props.colors[0]);@(props.colors[1])", dur: "10s", begin: "0s", repeatCount: "indefinite" }, [])])]), e.createElement("mask", { id: "@mask" }, [e.createElement("polyline", { stroke: "#fff", "stroke-width": "3", fill: "transparent", points: "8, @(model.height*0.4) 8, 3, @(model.width*0.4+7), 3" }, []), e.createElement("polyline", { fill: "#fff", points: "8, @(model.height*0.15) 8, 3, @(model.width*0.1+7), 3 @(model.width*0.1), 8 14, 8 14, @(model.height*0.15-7)" }, []), e.createElement("polyline", { stroke: "#fff", "stroke-width": "3", fill: "transparent", points: "@(model.width*0.5), 3 @(model.width -3), 3, @(model.width -3), @(model.height*0.25)" }, []), e.createElement("polyline", { fill: "#fff", points: "@(model.width*0.52), 3 @(model.width*0.58), 3 @(model.width*0.58-7), 9 @(model.width*0.52-7), 9" }, []), e.createElement("polyline", { fill: "#fff", points: "@(model.width*0.9), 3 @(model.width -3), 3 @(model.width -3), @(model.height*0.1) @(model.width -9), @(model.height*0.1-7) @(model.width -9), 9 @(model.width *0.9+7), 9" }, []), e.createElement("polyline", { stroke: "#fff", "stroke-width": "3", fill: "transparent", points: "8, @(model.height*0.5) 8, @(model.height -3) @(model.width *0.3 + 7), @(model.height -3)" }, []), e.createElement("polyline", { fill: "#fff", points: "8, @(model.height*0.55) 8, @(model.height*0.7) 2,@(model.height*0.7-7) 2, @(model.height*0.55+7)" }, []), e.createElement("polyline", { stroke: "#fff", "stroke-width": "3", fill: "transparent", points: "@(model.width * 0.35), @(model.height - 3) @(model.width - 3), @(model.height - 3) @(model.width - 3), @(model.height*0.35)" }, []), e.createElement("polyline", { fill: "#fff", points: "@(model.width * 0.92), @(model.height - 3) @(model.width - 3), @(model.height - 3) @(model.width - 3), @(model.height *0.8) @(model.width - 9), @(model.height*0.8 + 7) @(model.width - 9), @(model.height - 9) @(model.width*0.92 +7), @(model.height - 9)" }, [])])]), e.createElement("polygon", { fill: "@props.backgroundColor", points: "15, 9 @(model.width * 0.1 + 1), 9 @(model.width * 0.1 + 4), 6 @(model.width * 0.52 + 2), 6 @(model.width * 0.52 + 6), 10 @(model.width * 0.58 - 7), 10 @(model.width * 0.58 - 2), 6 @(model.width * 0.9 + 2), 6 @(model.width * 0.9 + 6), 10 @(model.width - 10), 10 @(model.width - 10), @(model.height * 0.1 - 6) @(model.width - 6), @(model.height * 0.1 - 1) @(model.width - 6), @(model.height * 0.8 + 1) @(model.width - 10), @(model.height * 0.8 + 6) @(model.width - 10), @(model.height - 10) @(model.width * 0.92 + 7), @(model.height - 10)  @(model.width * 0.92 + 2), @(model.height - 6) 11, @(model.height - 6) 11, @(model.height * 0.15 - 2) 15, @(model.height * 0.15 - 7)" }, []), e.createElement("rect", { x: "0", y: "0", width: "@model.width", height: "@model.height", fill: "url(#@(gradient))", mask: "url(#@(mask))" }, [])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, dt = {
-  component: nt
+} }, at = {
+  component: st
 };
 var J, K;
-let at = class extends (K = dt.component, J = d, K) {
+let mt = class extends (K = at.component, J = d, K) {
   constructor() {
     super(...arguments);
     t(this, J, "e4c62a5f");
-    t(this, "template", st.render);
+    t(this, "template", dt.render);
   }
 };
-class mt extends a {
+class pt extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -335,20 +341,20 @@ class mt extends a {
     t(this, "border", ["left-top", "right-top", "left-bottom", "right-bottom"]);
   }
 }
-let pt = { render: function(e) {
+let ct = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "box-shadow: inset 0 0 25px 3px @(props.colors[0])" }, [e.createElement("svg", { class: "dv-border-svg-container", width: "@model.width", height: "@model.height" }, [e.createElement("polygon", { fill: "@props.backgroundColor", points: "4, 0 @(model.width - 4), 0 @(model.width), 4 @(model.width), @(model.height - 4) @(model.width - 4), @(model.height) 4, @(model.height) 0, @(model.height - 4) 0, 4" }, [])]), e.createCommand("for", "let item of border", [e.createElement("svg", { width: "150px", height: "150px", class: "@item dv-border-svg-container" }, [e.createElement("polygon", { fill: "@(props.colors[1])", points: "40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3" }, [])])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, ct = {
-  component: mt
+} }, ht = {
+  component: pt
 };
 var W, H;
-let ht = class extends (H = ct.component, W = d, H) {
+let gt = class extends (H = ht.component, W = d, H) {
   constructor() {
     super(...arguments);
     t(this, W, "c1b255d6");
-    t(this, "template", pt.render);
+    t(this, "template", ct.render);
   }
 };
-class gt extends a {
+class Et extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -360,20 +366,20 @@ class gt extends a {
     t(this, "filterId", `border-box-11-filterId-${c()}`);
   }
 }
-let Et = { render: function(e) {
+let ft = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "dv-border-svg-container", width: "@model.width", height: "@model.height" }, [e.createElement("defs", {}, [e.createElement("filter", { id: "@filterId", height: "150%", width: "150%", x: "-25%", y: "-25%" }, [e.createElement("feMorphology", { operator: "dilate", radius: "2", in: "SourceAlpha", result: "thicken" }, []), e.createElement("feGaussianBlur", { in: "thicken", stdDeviation: "3", result: "blurred" }, []), e.createElement("feFlood", { "flood-color": "@(props.colors[1])", result: "glowColor" }, []), e.createElement("feComposite", { in: "glowColor", in2: "blurred", operator: "in", result: "softGlowColored" }, []), e.createElement("feMerge", {}, [e.createElement("feMergeNode", { in: "softGlowColored" }, []), e.createElement("feMergeNode", { in: "SourceGraphic" }, [])])])]), e.createElement("polygon", { fill: "@props.backgroundColor", points: "20, 32 @(model.width * 0.5 - props.titleWidth / 2), 32 @(model.width * 0.5 - props.titleWidth / 2 + 20), 53 @(model.width * 0.5 + props.titleWidth / 2 - 20), 53 @(model.width * 0.5 + props.titleWidth / 2), 32 @(model.width - 20), 32 @(model.width - 8), 48 @(model.width - 8), @(model.height - 25) @(model.width - 20), @(model.height - 8) 20, @(model.height - 8) 8, @(model.height - 25) 8, 50" }, []), e.createElement("polyline", { stroke: "@(props.colors[0])", filter: "url(#@(filterId))", points: "@((model.width - props.titleWidth) / 2), 30 20, 30 7, 50 7, @(50 + (model.height - 167) / 2) 13, @(55 + (model.height - 167) / 2) 13, @(135 + (model.height - 167) / 2) 7, @(140 + (model.height - 167) / 2) 7, @(model.height - 27) 20, @(model.height - 7) @(model.width - 20), @(model.height - 7) @(model.width - 7), @(model.height - 27) @(model.width - 7), @(140 + (model.height - 167) / 2) @(model.width - 13), @(135 + (model.height - 167) / 2) @(model.width - 13), @(55 + (model.height - 167) / 2) @(model.width - 7), @(50 + (model.height - 167) / 2) @(model.width - 7), 50 @(model.width - 20), 30 @((model.width + props.titleWidth) / 2), 30 @((model.width + props.titleWidth) / 2 - 20), 7 @((model.width - props.titleWidth) / 2 + 20), 7 @((model.width - props.titleWidth) / 2), 30 @((model.width - props.titleWidth) / 2 + 20), 52 @((model.width + props.titleWidth) / 2 - 20), 52 @((model.width + props.titleWidth) / 2), 30" }, []), e.createElement("polygon", { stroke: "@(props.colors[0])", fill: "transparent", points: "@((model.width + props.titleWidth) / 2 - 5), 30 @((model.width + props.titleWidth) / 2 - 21), 11 @((model.width + props.titleWidth) / 2 - 27), 11 @((model.width + props.titleWidth) / 2 - 8), 34" }, []), e.createElement("polygon", { stroke: "@(props.colors[0])", fill: "transparent", points: "@((model.width - props.titleWidth) / 2 + 5), 30 @((model.width - props.titleWidth) / 2 + 22), 49 @((model.width - props.titleWidth) / 2 + 28), 49 @((model.width - props.titleWidth) / 2 + 8), 26" }, []), e.createElement("polygon", { stroke: "@(props.colors[0])", fill: "@(fade(props.colors[1]), 30)", filter: "url(#@(filterId))", points: "@((model.width + props.titleWidth) / 2 - 11), 37 @((model.width + props.titleWidth) / 2 - 32), 11 @((model.width - props.titleWidth) / 2 + 23), 11 @((model.width - props.titleWidth) / 2 + 11), 23 @((model.width - props.titleWidth) / 2 + 33), 49 @((model.width + props.titleWidth) / 2 - 22), 49" }, []), e.createElement("polygon", { filter: "url(#@(filterId))", fill: "@(props.colors[0])", opacity: "1", points: "@((model.width - props.titleWidth) / 2 - 10), 37 @((model.width - props.titleWidth) / 2 - 31), 37 @((model.width - props.titleWidth) / 2 - 25), 46 @((model.width - props.titleWidth) / 2 - 4), 46" }, [e.createElement("animate", { attributeName: "opacity", values: "1;0.7;1", dur: "2s", begin: "0s", repeatCount: "indefinite" }, [])]), e.createElement("polygon", { filter: "url(#@(filterId))", fill: "@(props.colors[0])", opacity: "0.7", points: "@((model.width - props.titleWidth) / 2 - 40), 37 @((model.width - props.titleWidth) / 2 - 61), 37 @((model.width - props.titleWidth) / 2 - 55), 46 @((model.width - props.titleWidth) / 2 - 34), 46" }, [e.createElement("animate", { attributeName: "opacity", values: "0.7;0.4;0.7", dur: "2s", begin: "0s", repeatCount: "indefinite" }, [])]), e.createElement("polygon", { filter: "url(#@(filterId))", fill: "@(props.colors[0])", opacity: "0.5", points: "@((model.width - props.titleWidth) / 2 - 70), 37 @((model.width - props.titleWidth) / 2 - 91), 37 @((model.width - props.titleWidth) / 2 - 85), 46 @((model.width - props.titleWidth) / 2 - 64), 46" }, [e.createElement("animate", { attributeName: "opacity", values: "0.5;0.2;0.5", dur: "2s", begin: "0s", repeatCount: "indefinite" }, [])]), e.createElement("polygon", { filter: "url(#@(filterId))", fill: "@(props.colors[0])", opacity: "1", points: "@((model.width + props.titleWidth) / 2 + 30), 37 @((model.width + props.titleWidth) / 2 + 9), 37 @((model.width + props.titleWidth) / 2 + 3), 46 @((model.width + props.titleWidth) / 2 + 24), 46" }, [e.createElement("animate", { attributeName: "opacity", values: "1;0.7;1", dur: "2s", begin: "0s", repeatCount: "indefinite" }, [])]), e.createElement("polygon", { filter: "url(#@(filterId))", fill: "@(props.colors[0])", opacity: "0.7", points: "@((model.width + props.titleWidth) / 2 + 60), 37 @((model.width + props.titleWidth) / 2 + 39), 37 @((model.width + props.titleWidth) / 2 + 33), 46 @((model.width + props.titleWidth) / 2 + 54), 46" }, [e.createElement("animate", { attributeName: "opacity", values: "0.7;0.4;0.7", dur: "2s", begin: "0s", repeatCount: "indefinite" }, [])]), e.createElement("polygon", { filter: "url(#@(filterId))", fill: "@(props.colors[0])", opacity: "0.5", points: "@((model.width + props.titleWidth) / 2 + 90), 37 @((model.width + props.titleWidth) / 2 + 69), 37 @((model.width + props.titleWidth) / 2 + 63), 46 @((model.width + props.titleWidth) / 2 + 84), 46" }, [e.createElement("animate", { attributeName: "opacity", values: "0.5;0.2;0.5", dur: "2s", begin: "0s", repeatCount: "indefinite" }, [])]), e.createElement("text", { class: "dv-border-box-11-title", x: "@(model.width / 2)", y: "32", fill: "#fff", "font-size": "18", "text-anchor": "middle", "dominant-baseline": "middle" }, [e.createCodeFunction("props.title")]), e.createElement("polygon", { fill: "@(props.colors[0])", filter: "url(#@(filterId))", points: "7, @(53 + (model.height - 167) / 2) 11, @(57 + (model.height - 167) / 2) 11, @(133 + (model.height - 167) / 2) 7, @(137 + (model.height - 167) / 2)" }, []), e.createElement("polygon", { fill: "@(props.colors[0])", filter: "url(#@(filterId))", points: "@(model.width - 7), @(53 + (model.height - 167) / 2) @(model.width - 11), @(57 + (model.height - 167) / 2) @(model.width - 11), @(133 + (model.height - 167) / 2) @(model.width - 7), @(137 + (model.height - 167) / 2)" }, [])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, ft = {
-  component: gt
+} }, _t = {
+  component: Et
 };
 var z, B;
-let _t = class extends (B = ft.component, z = d, B) {
+let wt = class extends (B = _t.component, z = d, B) {
   constructor() {
     super(...arguments);
     t(this, z, "639f3c2e");
-    t(this, "template", Et.render);
+    t(this, "template", ft.render);
   }
 };
-class wt extends a {
+class ut extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -383,20 +389,20 @@ class wt extends a {
     t(this, "filterId", `borderr-box-12-filterId-${c()}`);
   }
 }
-let ut = { render: function(e) {
+let bt = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "dv-border-svg-container", width: "@model.width", height: "@model.height" }, [e.createElement("defs", {}, [e.createElement("filter", { id: "@filterId", height: "150%", width: "150%", x: "-25%", y: "-25%" }, [e.createElement("feMorphology", { operator: "dilate", radius: "1", in: "SourceAlpha", result: "thicken" }, []), e.createElement("feGaussianBlur", { in: "thicken", stdDeviation: "2", result: "blurred" }, []), e.createElement("feFlood", { "flood-color": "@(fade(props.colors[1]), 70)", result: "glowColor" }, [e.createElement("animate", { attributeName: "flood-color", values: "@(fade(props.colors[1], 70)); @(fade(props.colors[1], 30)); @(fade(props.colors[1], 70));", dur: "3s", begin: "0s", repeatCount: "indefinite" }, [])]), e.createElement("feComposite", { in: "glowColor", in2: "blurred", operator: "in", result: "softGlowColored" }, []), e.createElement("feMerge", {}, [e.createElement("feMergeNode", { in: "softGlowColored" }, []), e.createElement("feMergeNode", { in: "SourceGraphic" }, [])])])]), e.createElement("path", { "v-if": "width && height", fill: "@props.backgroundColor", "stroke-width": "2", stroke: "@(props.colors[0])", d: "M15 5 L @(model.width - 15) 5 Q @(model.width - 5) 5, @(model.width - 5) 15 L @(model.width - 5) @(model.height - 15) Q @(model.width - 5) @(model.height - 5), @(model.width - 15) @(model.height - 5) L 15, @(model.height - 5) Q 5 @(model.height - 5) 5 @(model.height - 15) L 5 15 Q 5 5 15 5" }, []), e.createElement("path", { "stroke-width": "2", fill: "transparent", "stroke-linecap": "round", filter: "url(#@(filterId))", stroke: "@(props.colors[1])", d: "M 20 5 L 15 5 Q 5 5 5 15 L 5 20" }, []), e.createElement("path", { "stroke-width": "2", fill: "transparent", "stroke-linecap": "round", filter: "url(#@(filterId))", stroke: "@(props.colors[1])", d: "M @(model.width - 20) 5 L @(model.width - 15) 5 Q @(model.width - 5) 5 @(model.width - 5) 15 L @(model.width - 5) 20" }, []), e.createElement("path", { "stroke-width": "2", fill: "transparent", "stroke-linecap": "round", filter: "url(#@(filterId))", stroke: "@(props.colors[1])", d: "M @(model.width - 20) @(model.height - 5) L @(model.width - 15) @(model.height - 5) Q @(model.width - 5) @(model.height - 5) @(model.width - 5) @(model.height - 15) L @(model.width - 5) @(model.height - 20)" }, []), e.createElement("path", { "stroke-width": "2", fill: "transparent", "stroke-linecap": "round", filter: "url(#@(filterId))", stroke: "@(props.colors[1])", d: "M 20 @(model.height - 5) L 15 @(model.height - 5) Q 5 @(model.height - 5) 5 @(model.height - 15) L 5 @(model.height - 20)" }, [])]), e.createElement("div", { class: "border-box-content" }, [e.createElement("slot", {}, [])])])];
-} }, bt = {
-  component: wt
+} }, yt = {
+  component: ut
 };
 var G, X;
-let yt = class extends (X = bt.component, G = d, X) {
+let Rt = class extends (X = yt.component, G = d, X) {
   constructor() {
     super(...arguments);
     t(this, G, "9a8985f2");
-    t(this, "template", ut.render);
+    t(this, "template", bt.render);
   }
 };
-class Rt extends a {
+class vt extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -405,20 +411,20 @@ class Rt extends a {
     });
   }
 }
-let vt = { render: function(e) {
+let Ct = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])" }, [e.createElement("svg", { class: "dv-border-svg-container", width: "@model.width", height: "@model.height" }, [e.createElement("path", { fill: "@props.backgroundColor", stroke: "@(props.colors[0])", d: "M 5 20 L 5 10 L 12 3  L 60 3 L 68 10 L @(model.width - 20) 10 L @(model.width - 5) 25 L @(model.width - 5) @(model.height - 5) L 20 @(model.height - 5) L 5 @(model.height - 20) L 5 20" }, []), e.createElement("path", { fill: "transparent", "stroke-width": "3", "stroke-linecap": "round", "stroke-dasharray": "10, 5", stroke: "@(props.colors[0])", d: "M 16 9 L 61 9" }, []), e.createElement("path", { fill: "transparent", stroke: "@(props.colors[1])", d: "M 5 20 L 5 10 L 12 3  L 60 3 L 68 10" }, []), e.createElement("path", { fill: "transparent", stroke: "@(props.colors[1])", d: "M @(model.width - 5) @(model.height - 30) L @(model.width - 5) @(model.height - 5) L @(model.width - 30) @(model.height - 5)" }, [])]), e.createElement("div", { class: "border-box-content" }, [e.createCommand("RenderSection", "")])])];
-} }, Ct = {
-  component: Rt
+} }, kt = {
+  component: vt
 };
 var U, j;
-let kt = class extends (j = Ct.component, U = d, j) {
+let St = class extends (j = kt.component, U = d, j) {
   constructor() {
     super(...arguments);
     t(this, U, "9f1d0629");
-    t(this, "template", vt.render);
+    t(this, "template", Ct.render);
   }
 };
-class St extends a {
+class Lt extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -455,20 +461,20 @@ class St extends a {
     this.model.svgScale = [this.model.width / o, this.model.height / i];
   }
 }
-let Lt = { render: function(e) {
+let xt = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "@(svgWH[0])px", height: "@(svgWH[1])px", style: "transform:scale(@(model.svgScale[0]),@(model.svgScale[1]));" }, [e.createCommand("for", "let point of model.points", [e.createCommand("if", "Math.random() > 0.6", [e.createElement("rect", { fill: "@(props.colors[0])", x: "@(point[0] - halfPointSideLength)", y: "@(point[1] - halfPointSideLength)", width: "@pointSideLength", height: "@pointSideLength" }, [e.createCommand("if", "Math.random() > 0.6", [e.createElement("animate", { attributeName: "fill", values: "@(props.colors[0]);transparent", dur: "1s", begin: "@(Math.random() * 2)", repeatCount: "indefinite" }, [])])])])]), e.createCommand("if", "model.rects[0]", [e.createElement("rect", { fill: "@(props.colors[1])", x: "@(model.rects[0][0] - pointSideLength)", y: "@(model.rects[0][1] - pointSideLength)", width: "@(pointSideLength * 2)", height: "@(pointSideLength * 2)" }, [e.createElement("animate", { attributeName: "width", values: "0;@(pointSideLength * 2)", dur: "2s", repeatCount: "indefinite" }, []), e.createElement("animate", { attributeName: "height", values: "0;@(pointSideLength * 2)", dur: "2s", repeatCount: "indefinite" }, []), e.createElement("animate", { attributeName: "x", values: "@(model.rects[0][0]);@(model.rects[0][0] - pointSideLength)", dur: "2s", repeatCount: "indefinite" }, []), e.createElement("animate", { attributeName: "y", values: "@(model.rects[0][1]);@(model.rects[0][1] - pointSideLength)", dur: "2s", repeatCount: "indefinite" }, [])])]), e.createCommand("if", "model.rects[1]", [e.createElement("rect", { fill: "@(props.colors[1])", x: "@(model.rects[1][0] - 40)", y: "@(model.rects[1][1] - pointSideLength)", width: "40", height: "@(pointSideLength * 2)" }, [e.createElement("animate", { attributeName: "width", values: "0;40;0", dur: "2s", repeatCount: "indefinite" }, []), e.createElement("animate", { attributeName: "x", values: "@(model.rects[1][0]);@(model.rects[1][0] - 40);@(model.rects[1][0])", dur: "2s", repeatCount: "indefinite" }, [])])])])])];
-} }, xt = {
-  component: St
+} }, At = {
+  component: Lt
 };
 var Q, V;
-let At = class extends (V = xt.component, Q = d, V) {
+let It = class extends (V = At.component, Q = d, V) {
   constructor() {
     super(...arguments);
     t(this, Q, "5d2cdceb");
-    t(this, "template", Lt.render);
+    t(this, "template", xt.render);
   }
 };
-class It extends a {
+class Pt extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -491,20 +497,20 @@ class It extends a {
     this.props.reverse ? (this.model.w = 1, this.model.h = this.model.height, this.model.x = this.model.width / 2, this.model.y = 0) : (this.model.w = this.model.width, this.model.h = 1, this.model.x = 0, this.model.y = this.model.height / 2);
   }
 }
-let Pt = { render: function(e) {
+let Tt = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "@(model.width)px", height: "@(model.height)px" }, [e.createElement("rect", { x: "@model.x", y: "@model.y", width: "@model.w", height: "@model.h", fill: "@(props.colors[0])" }, [e.createElement("animate", { attributeName: "@(props.reverse ? 'height' : 'width')", from: "0", to: "@(props.reverse ? model.height : model.width)", dur: "@(props.dur)s", calcMode: "spline", keyTimes: "0;1", keySplines: ".42,0,.58,1", repeatCount: "indefinite" }, [])]), e.createElement("rect", { x: "@model.x", y: "@model.y", width: "1", height: "1", fill: "@(props.colors[1])" }, [e.createElement("animate", { attributeName: "@(props.reverse ? 'y' : 'x')", from: "0", to: "@(props.reverse ? model.height : model.width)", dur: "@(props.dur)s", calcMode: "spline", keyTimes: "0;1", keySplines: "0.42,0,0.58,1", repeatCount: "indefinite" }, [])])])])];
-} }, Tt = {
-  component: It
+} }, Nt = {
+  component: Pt
 };
 var q, Z;
-let Nt = class extends (Z = Tt.component, q = d, Z) {
+let Ot = class extends (Z = Nt.component, q = d, Z) {
   constructor() {
     super(...arguments);
     t(this, q, "2ceeebd3");
-    t(this, "template", Pt.render);
+    t(this, "template", Tt.render);
   }
 };
-class Ot extends a {
+class $t extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -536,20 +542,20 @@ class Ot extends a {
     this.model.svgScale = [this.model.width / o, this.model.height / i];
   }
 }
-let $t = { render: function(e) {
+let Mt = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "@(svgWH[0])px", height: "@(svgWH[1])px", style: "transform:scale(@(model.svgScale[0]),@(model.svgScale[1]));" }, [e.createCommand("for", "let point of model.points", [e.createElement("rect", { fill: "@(props.colors[0])", x: "@(point[0] - halfPointSideLength)", y: "@(point[1] - halfPointSideLength)", width: "@pointSideLength", height: "@pointSideLength" }, [e.createElement("animate", { attributeName: "fill", values: "@(props.colors.join(';'))", dur: "@(Math.random() + 1)s", begin: "@(Math.random() * 2)", repeatCount: "indefinite" }, [])])])])])];
-} }, Mt = {
-  component: Ot
+} }, Dt = {
+  component: $t
 };
 var Y, ee;
-let Dt = class extends (ee = Mt.component, Y = d, ee) {
+let Ft = class extends (ee = Dt.component, Y = d, ee) {
   constructor() {
     super(...arguments);
     t(this, Y, "e4dd1f59");
-    t(this, "template", $t.render);
+    t(this, "template", Mt.render);
   }
 };
-class Ft extends a {
+class Jt extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -558,17 +564,17 @@ class Ft extends a {
     });
   }
 }
-let Jt = { render: function(e) {
+let Kt = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("div", { class: "container-bar @(props.reverse ? 'reverse' : 'normal')", style: "@({ width: props.reverse ? model.width + 'px' : '5px', height: props.reverse ? '5px' : model.height + 'px', animationDuration: props.dur + 's' })" }, [e.createElement("svg", { width: "@(props.reverse ? model.width : 5)", height: "@(props.reverse ? 5 : model.height)" }, [e.createElement("polyline", { stroke: "@(props.colors[0])", points: "@(props.reverse ? `0, 2.5 ${model.width}, 2.5` : `2.5, 0 2.5, ${model.height}`)" }, []), e.createElement("polyline", { class: "bold-line", stroke: "@(props.colors[1])", "stroke-width": "3", "stroke-dasharray": "20, 80", "stroke-dashoffset": "-30", points: "@(props.reverse ? `0, 2.5 ${model.width}, 2.5` : `2.5, 0 2.5, ${model.height}`)" }, [])])])])];
-} }, Kt = {
-  component: Ft
+} }, Wt = {
+  component: Jt
 };
 var te, oe;
-let Wt = class extends (oe = Kt.component, te = d, oe) {
+let Ht = class extends (oe = Wt.component, te = d, oe) {
   constructor() {
     super(...arguments);
     t(this, te, "820e3df4");
-    t(this, "template", Jt.render);
+    t(this, "template", Kt.render);
   }
 };
 function b(e) {
@@ -585,7 +591,7 @@ function y(e, l) {
 function w(e, l, o, i) {
   return [e + Math.cos(i) * o, l + Math.sin(i) * o];
 }
-class Ht extends a {
+class zt extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -623,20 +629,20 @@ class Ht extends a {
     this.model.line1Points = r.map((m) => m.join(",")).join(" "), this.model.line2Points = n.map((m) => m.join(",")).join(" "), this.model.line1Length = s, this.model.line2Length = g;
   }
 }
-let zt = { render: function(e) {
+let Bt = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "@model.width", height: "@model.height" }, [e.createElement("polyline", { fill: "transparent", stroke: "@(props.colors[0])", "stroke-width": "3", points: "@model.line1Points" }, [e.createElement("animate", { attributeName: "stroke-dasharray", attributeType: "XML", from: "0, @(model.line1Length / 2), 0, @(model.line1Length / 2)", to: "0, 0, @(model.line1Length), 0", dur: "@(props.dur)s", begin: "0s", calcMode: "spline", keyTimes: "0;1", keySplines: "0.4,1,0.49,0.98", repeatCount: "indefinite" }, [])]), e.createElement("polyline", { fill: "transparent", stroke: "@(props.colors[1])", "stroke-width": "2", points: "@model.line2Points" }, [e.createElement("animate", { attributeName: "stroke-dasharray", attributeType: "XML", from: "0, @(model.line2Length / 2), 0, @(model.line2Length / 2)", to: "0, 0, @(model.line2Length), 0", dur: "@(props.dur)s", begin: "0s", calcMode: "spline", keyTimes: "0;1", keySplines: ".4,1,.49,.98", repeatCount: "indefinite" }, [])])])])];
-} }, Bt = {
-  component: Ht
+} }, Gt = {
+  component: zt
 };
 var le, ie;
-let Gt = class extends (ie = Bt.component, le = d, ie) {
+let Xt = class extends (ie = Gt.component, le = d, ie) {
   constructor() {
     super(...arguments);
-    t(this, le, "165a82cd");
-    t(this, "template", zt.render);
+    t(this, le, "919d71b1");
+    t(this, "template", Bt.render);
   }
 };
-class Xt extends a {
+class Ut extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -661,32 +667,35 @@ class Xt extends a {
     });
   }
   calcPointsPosition() {
-    let { svgWH: o, rowNum: i, rowPoints: r } = this, [n, s] = o, g = n / (r + 1), m = s / (i + 1), h = new Array(i).fill(0).map(
-      (p, f) => new Array(r).fill(0).map((_, u) => [g * (u + 1), m * (f + 1)])
-    );
-    this.model.points = h.reduce((p, f) => [...p, ...f], []);
-    let E = this.model.heights = new Array(i * r).fill(0).map((p) => Math.random() > 0.8 ? y(0.7 * s, s) : y(0.2 * s, 0.5 * s));
-    this.model.minHeights = new Array(i * r).fill(0).map((p, f) => E[f] * Math.random()), this.model.randoms = new Array(i * r).fill(0).map((p) => Math.random() + 1.5);
+    let { svgWH: o, rowNum: i, rowPoints: r } = this, [n, s] = o, g = n / (r + 1), m = s / (i + 1);
+    ve(() => {
+      let h = new Array(i).fill(0).map(
+        (p, f) => new Array(r).fill(0).map((_, u) => [g * (u + 1), m * (f + 1)])
+      );
+      this.model.points = h.reduce((p, f) => [...p, ...f], []);
+      let E = this.model.heights = new Array(i * r).fill(0).map((p) => Math.random() > 0.8 ? y(0.7 * s, s) : y(0.2 * s, 0.5 * s));
+      this.model.minHeights = new Array(i * r).fill(0).map((p, f) => E[f] * Math.random()), this.model.randoms = new Array(i * r).fill(0).map((p) => Math.random() + 1.5);
+    });
   }
   calcScale() {
     let [o, i] = this.svgWH;
     this.model.svgScale = [this.model.width / o, this.model.height / i];
   }
 }
-let Ut = { render: function(e) {
+let jt = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "@(svgWH[0])px", height: "@(svgWH[1])px", style: "transform:scale(@(model.svgScale[0]),@(model.svgScale[1]));" }, [e.createCommand("for", "let (i,point) in model.points", [e.createElement("rect", { fill: "@(props.colors[Math.random() > 0.5 ? 0 : 1])", x: "@(point[0] - halfRectWidth)", y: "@(point[1] - model.heights[i] / 2)", width: "@rectWidth", height: "@(model.heights[i])" }, [e.createElement("animate", { attributeName: "y", values: "@(point[1] - model.minHeights[i] / 2);@(point[1] - model.heights[i] / 2);@(point[1] - model.minHeights[i] / 2)", dur: "@(model.randoms[i])s", keyTimes: "0;0.5;1", calcMode: "spline", keySplines: "0.42,0,0.58,1;0.42,0,0.58,1", begin: "0s", repeatCount: "indefinite" }, []), e.createElement("animate", { attributeName: "height", values: "@(model.minHeights[i]);@(model.heights[i]);@(model.minHeights[i])", dur: "@(model.randoms[i])s", keyTimes: "0;0.5;1", calcMode: "spline", keySplines: "0.42,0,0.58,1;0.42,0,0.58,1", begin: "0s", repeatCount: "indefinite" }, [])])])])])];
-} }, jt = {
-  component: Xt
+} }, Qt = {
+  component: Ut
 };
 var re, ne;
-let Qt = class extends (ne = jt.component, re = d, ne) {
+let Vt = class extends (ne = Qt.component, re = d, ne) {
   constructor() {
     super(...arguments);
-    t(this, re, "2a7c89dd");
-    t(this, "template", Ut.render);
+    t(this, re, "b2dd06a3");
+    t(this, "template", jt.render);
   }
 };
-class Vt extends a {
+class qt extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -694,20 +703,20 @@ class Vt extends a {
     });
   }
 }
-let qt = { render: function(e) {
+let Zt = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "21px", height: "20px" }, [e.createElement("polyline", { "stroke-width": "4", fill: "transparent", stroke: "@(props.colors[0])", points: "10, 0 19, 10 10, 20" }, []), e.createElement("polyline", { "stroke-width": "2", fill: "transparent", stroke: "@(props.colors[1])", points: "2, 0 11, 10 2, 20" }, [])]), e.createCommand("RenderSection", ""), e.createElement("svg", { width: "21px", height: "20px" }, [e.createElement("polyline", { "stroke-width": "4", fill: "transparent", stroke: "@(props.colors[0])", points: "11, 0 2, 10 11, 20" }, []), e.createElement("polyline", { "stroke-width": "2", fill: "transparent", stroke: "@(props.colors[1])", points: "19, 0 10, 10 19, 20" }, [])])])];
-} }, Zt = {
-  component: Vt
+} }, Yt = {
+  component: qt
 };
 var se, de;
-let Yt = class extends (de = Zt.component, se = d, de) {
+let eo = class extends (de = Yt.component, se = d, de) {
   constructor() {
     super(...arguments);
     t(this, se, "6a75cfee");
-    t(this, "template", qt.render);
+    t(this, "template", Zt.render);
   }
 };
-class eo extends a {
+class to extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -718,20 +727,20 @@ class eo extends a {
     return this.props.reverse ? this.model.width - o : o;
   }
 }
-let to = { render: function(e) {
+let oo = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "@model.width", height: "@model.height" }, [e.createElement("polyline", { stroke: "@(props.colors[0])", "stroke-width": "2", fill: "transparent", points: "@xPos(0), 0 @xPos(30), @(model.height / 2)" }, []), e.createElement("polyline", { stroke: "@(props.colors[0])", "stroke-width": "2", fill: "transparent", points: "@xPos(20), 0 @xPos(50), @(model.height / 2) @xPos(model.width), @(model.height / 2)" }, []), e.createElement("polyline", { stroke: "@(props.colors[1])", fill: "transparent", "stroke-width": "3", points: "@xPos(0), @(model.height - 3), @xPos(200), @(model.height - 3)" }, [])])])];
-} }, oo = {
-  component: eo
+} }, lo = {
+  component: to
 };
 var ae, me;
-let lo = class extends (me = oo.component, ae = d, me) {
+let io = class extends (me = lo.component, ae = d, me) {
   constructor() {
     super(...arguments);
     t(this, ae, "597abf05");
-    t(this, "template", to.render);
+    t(this, "template", oo.render);
   }
 };
-class io extends a {
+class ro extends a {
   constructor() {
     super(...arguments);
     t(this, "model", {
@@ -754,20 +763,20 @@ class io extends a {
     this.model.svgScale = [this.model.width / o, this.model.height / i];
   }
 }
-let ro = { render: function(e) {
+let no = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "@(svgWH[0])px", height: "@(svgWH[1])px", style: "transform:scale(@(model.svgScale[0]),@(model.svgScale[1]));" }, [e.createElement("defs", {}, [e.createElement("polygon", { id: "@polygonId", points: "15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5" }, [])]), e.createElement("circle", { cx: "50", cy: "50", r: "45", fill: "transparent", stroke: "@(props.colors[1])", "stroke-width": "10", "stroke-dasharray": "80, 100, 30, 100" }, [e.createElement("animateTransform", { attributeName: "transform", type: "rotate", values: "0 50 50;360 50 50", dur: "@(props.dur)s", repeatCount: "indefinite" }, [])]), e.createElement("circle", { cx: "50", cy: "50", r: "45", fill: "transparent", stroke: "@(props.colors[0])", "stroke-width": "6", "stroke-dasharray": "50, 66, 100, 66" }, [e.createElement("animateTransform", { attributeName: "transform", type: "rotate", values: "0 50 50;-360 50 50", dur: "@(props.dur)s", repeatCount: "indefinite" }, [])]), e.createElement("circle", { cx: "50", cy: "50", r: "38", fill: "transparent", stroke: "@(fade(props.colors[1], 30))", "stroke-width": "1", "stroke-dasharray": "5, 1" }, []), e.createCommand("for", "let i = 0; i < 20; i++", [e.createElement("use", { "xlink:href": "#@(polygonId)", stroke: "@(props.colors[1])", fill: "@(Math.random() > 0.4 ? 'transparent' : props.colors[0])" }, [e.createElement("animateTransform", { attributeName: "transform", type: "rotate", values: "0 50 50;360 50 50", dur: "@(props.dur)s", begin: "@(i * props.dur / 20)s", repeatCount: "indefinite" }, [])])]), e.createElement("circle", { cx: "50", cy: "50", r: "26", fill: "transparent", stroke: "@(fade(props.colors[1], 30))", "stroke-width": "1", "stroke-dasharray": "5, 1" }, [])]), e.createCommand("RenderSection", "")])];
-} }, no = {
-  component: io
+} }, so = {
+  component: ro
 };
 var pe, ce;
-let so = class extends (ce = no.component, pe = d, ce) {
+let ao = class extends (ce = so.component, pe = d, ce) {
   constructor() {
     super(...arguments);
     t(this, pe, "ed9a8703");
-    t(this, "template", ro.render);
+    t(this, "template", no.render);
   }
 };
-class ao extends a {
+class mo extends a {
   constructor() {
     super(...arguments);
     t(this, "animationId1", `d10ani1${c()}`);
@@ -782,20 +791,20 @@ class ao extends a {
     });
   }
 }
-let mo = { render: function(e) {
+let po = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "@model.width", height: "@model.height" }, [e.createElement("polyline", { stroke: "@(props.colors[1])", "stroke-width": "2", points: "0, @(model.height / 2) @(model.width), @(model.height / 2)" }, []), e.createElement("polyline", { stroke: "@(props.colors[0])", "stroke-width": "2", points: "5, @(model.height / 2) @(model.width * 0.2 - 3), @(model.height / 2)", "stroke-dasharray": "0, @(model.width * 0.2)", fill: "freeze" }, [e.createElement("animate", { id: "@animationId2", attributeName: "stroke-dasharray", values: "0, @(model.width * 0.2);@(model.width * 0.2), 0;", dur: "3s", begin: "@(animationId1).end", fill: "freeze" }, []), e.createElement("animate", { attributeName: "stroke-dasharray", values: "@(model.width * 0.2), 0;0, @(model.width * 0.2)", dur: "0.01s", begin: "@(animationId7).end", fill: "freeze" }, [])]), e.createElement("polyline", { stroke: "@(props.colors[0])", "stroke-width": "2", points: "@(model.width * 0.2 + 3), @(model.height / 2) @(model.width * 0.8 - 3), @(model.height / 2)", "stroke-dasharray": "0, @(model.width * 0.6)" }, [e.createElement("animate", { id: "@animationId4", attributeName: "stroke-dasharray", values: "0, @(model.width * 0.6);@(model.width * 0.6), 0", dur: "3s", begin: "@(animationId3).end + 1s", fill: "freeze" }, []), e.createElement("animate", { attributeName: "stroke-dasharray", values: "@(model.width * 0.6), 0;0, @(model.width * 0.6)", dur: "0.01s", begin: "@(animationId7).end", fill: "freeze" }, [])]), e.createElement("polyline", { stroke: "@(props.colors[0])", "stroke-width": "2", points: "@(model.width * 0.8 + 3), @(model.height / 2) @(model.width - 5), @(model.height / 2)", "stroke-dasharray": "0, @(model.width * 0.2)" }, [e.createElement("animate", { id: "@animationId6", attributeName: "stroke-dasharray", values: "0, @(model.width * 0.2);@(model.width * 0.2), 0", dur: "3s", begin: "@(animationId5).end + 1s", fill: "freeze" }, []), e.createElement("animate", { attributeName: "stroke-dasharray", values: "@(model.width * 0.2), 0;0, @(model.width * 0.3)", dur: "0.01s", begin: "@(animationId7).end", fill: "freeze" }, [])]), e.createElement("circle", { cx: "2", cy: "@(model.height / 2)", r: "2", fill: "@(props.colors[1])" }, [e.createElement("animate", { id: "@animationId1", attributeName: "fill", values: "@(props.colors[1]);@(props.colors[0])", begin: "0s;@(animationId7).end", dur: "0.3s", fill: "freeze" }, [])]), e.createElement("circle", { cx: "@(model.width * 0.2)", cy: "@(model.height / 2)", r: "2", fill: "@(props.colors[1])" }, [e.createElement("animate", { id: "@animationId3", attributeName: "fill", values: "@(props.colors[1]);@(props.colors[0])", begin: "@(animationId2).end", dur: "0.3s", fill: "freeze" }, []), e.createElement("animate", { attributeName: "fill", values: "@(props.colors[1]);@(props.colors[1])", dur: "0.01s", begin: "@(animationId7).end", fill: "freeze" }, [])]), e.createElement("circle", { cx: "@(model.width * 0.8)", cy: "@(model.height / 2)", r: "2", fill: "@(props.colors[1])" }, [e.createElement("animate", { id: "@animationId5", attributeName: "fill", values: "@(props.colors[1]);@(props.colors[0])", begin: "@(animationId4).end", dur: "0.3s", fill: "freeze" }, []), e.createElement("animate", { attributeName: "fill", values: "@(props.colors[1]);@(props.colors[1])", dur: "0.01s", begin: "@(animationId7).end", fill: "freeze" }, [])]), e.createElement("circle", { cx: "@(model.width - 2)", cy: "@(model.height / 2)", r: "2", fill: "@(props.colors[1])" }, [e.createElement("animate", { id: "@animationId7", attributeName: "fill", values: "@(props.colors[1]);@(props.colors[0])", begin: "@(animationId6).end", dur: "0.3s", fill: "freeze" }, []), e.createElement("animate", { attributeName: "fill", values: "@(props.colors[1]);@(props.colors[1])", dur: "0.01s", begin: "@(animationId7).end", fill: "freeze" }, [])])])])];
-} }, po = {
-  component: ao
+} }, co = {
+  component: mo
 };
 var he, ge;
-let co = class extends (ge = po.component, he = d, ge) {
+let ho = class extends (ge = co.component, he = d, ge) {
   constructor() {
     super(...arguments);
     t(this, he, "72693e04");
-    t(this, "template", mo.render);
+    t(this, "template", po.render);
   }
 };
-class ho extends a {
+class go extends a {
   constructor() {
     super(...arguments);
     t(this, "propsOption", {
@@ -803,20 +812,20 @@ class ho extends a {
     });
   }
 }
-let go = { render: function(e) {
+let Eo = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "@model.width", height: "@model.height" }, [e.createElement("polygon", { fill: "@(fade(props.colors[1], 10))", stroke: "@(props.colors[1])", points: "20 10, 25 4, 55 4 60 10" }, []), e.createElement("polygon", { fill: "@(fade(props.colors[1], 10))", stroke: "@(props.colors[1])", points: "20 @(model.height - 10), 25 @(model.height - 4), 55 @(model.height - 4) 60 @(model.height - 10)" }, []), e.createElement("polygon", { fill: "@(fade(props.colors[1], 10))", stroke: "@(props.colors[1])", points: "@(model.width - 20) 10, @(model.width - 25) 4, @(model.width - 55) 4 @(model.width - 60) 10" }, []), e.createElement("polygon", { fill: "@(fade(props.colors[1], 10))", stroke: "@(props.colors[1])", points: "@(model.width - 20) @(model.height - 10), @(model.width - 25) @(model.height - 4), @(model.width - 55) @(model.height - 4) @(model.width - 60) @(model.height - 10)" }, []), e.createElement("polygon", { fill: "@(fade(props.colors[0] , 20))", stroke: "@(props.colors[0])", points: "20 10, 5 @(model.height / 2) 20 @(model.height - 10) @(model.width - 20) @(model.height - 10) @(model.width - 5) @(model.height / 2) @(model.width - 20) 10" }, []), e.createElement("polyline", { fill: "transparent", stroke: "@fade(props.colors[0] , 70)", points: "25 18, 15 @(model.height / 2) 25 @(model.height - 18)" }, []), e.createElement("polyline", { fill: "transparent", stroke: "@fade(props.colors[0] , 70)", points: "@(model.width - 25) 18, @(model.width - 15) @(model.height / 2) @(model.width - 25) @(model.height - 18)" }, [])]), e.createElement("div", { class: "decoration-content" }, [e.createCommand("RenderSection", "")])])];
-} }, Eo = {
-  component: ho
+} }, fo = {
+  component: go
 };
 var Ee, fe;
-let fo = class extends (fe = Eo.component, Ee = d, fe) {
+let _o = class extends (fe = fo.component, Ee = d, fe) {
   constructor() {
     super(...arguments);
     t(this, Ee, "be570701");
-    t(this, "template", go.render);
+    t(this, "template", Eo.render);
   }
 };
-class _o extends a {
+class wo extends a {
   constructor() {
     super(...arguments);
     t(this, "gId", `decoration-12-g-${c()}`);
@@ -879,48 +888,48 @@ class _o extends a {
     });
   }
 }
-let wo = { render: function(e) {
+let uo = { render: function(e) {
   return [e.createElement("div", { class: "@(['container', props.class])", style: "@props.style" }, [e.createElement("svg", { width: "@model.width", height: "@model.height" }, [e.createElement("defs", {}, [e.createElement("g", { id: "@gId" }, [e.createCommand("for", "let (i,d) in model.pathD", [e.createElement("path", { stroke: "@(model.pathColor[i])", "stroke-width": "@(model.width / 2)", fill: "transparent", d: "@d" }, [])])]), e.createElement("radialGradient", { id: "@gradientId", cx: "50%", cy: "50%", r: "50%" }, [e.createElement("stop", { offset: "0%", "stop-color": "transparent", "stop-opacity": "1" }, []), e.createElement("stop", { offset: "100%", "stop-color": "@fade(props.colors[1], 30)", "stop-opacity": "1" }, [])])]), e.createCommand("for", "let r of model.circleR", [e.createElement("circle", { r: "@r", cx: "@x", cy: "@y", stroke: "@(props.colors[1])", "stroke-width": "0.5", fill: "transparent" }, [])]), e.createElement("circle", { r: "1", cx: "@x", cy: "@y", stroke: "transparent", fill: "url(#@(gradientId))" }, [e.createElement("animate", { attributeName: "r", values: "1;@(model.width / 2)", dur: "@(props.haloDur)s", repeatCount: "indefinite" }, []), e.createElement("animate", { attributeName: "opacity", values: "1;0", dur: "@(props.haloDur)s", repeatCount: "indefinite" }, [])]), e.createElement("circle", { r: "2", cx: "@x", cy: "@y", fill: "@(props.colors[1])" }, []), e.createElement("g", {}, [e.createCommand("for", "let p of model.splitLinePoints", [e.createElement("polyline", { points: "@p", stroke: "@(props.colors[1])", "stroke-width": "0.5", opacity: "0.5" }, [])])]), e.createCommand("for", "let d of model.arcD", [e.createElement("path", { d: "@d", stroke: "@(props.colors[1])", "stroke-width": "2", fill: "transparent" }, [])]), e.createElement("use", { "xlink:href": "#@gId" }, [e.createElement("animateTransform", { attributeName: "transform", type: "rotate", values: "0, @x @y;360, @x @y", dur: "@(props.scanDur)s", repeatCount: "indefinite" }, [])])]), e.createElement("div", { class: "decoration-content" }, [e.createCommand("RenderSection", "")])])];
-} }, uo = {
-  component: _o
+} }, bo = {
+  component: wo
 };
 var _e, we;
-let bo = class extends (we = uo.component, _e = d, we) {
+let yo = class extends (we = bo.component, _e = d, we) {
   constructor() {
     super(...arguments);
     t(this, _e, "b78c6be8");
-    t(this, "template", wo.render);
+    t(this, "template", uo.render);
   }
 }, R = {
-  BorderBox1: Pe,
-  BorderBox2: $e,
-  BorderBox3: Je,
-  BorderBox4: ze,
-  BorderBox5: Ue,
-  BorderBox6: qe,
-  BorderBox7: tt,
-  BorderBox8: rt,
-  BorderBox9: at,
-  BorderBox10: ht,
-  BorderBox11: _t,
-  BorderBox12: yt,
-  BorderBox13: kt,
-  Decoration1: At,
-  Decoration2: Nt,
-  Decoration3: Dt,
-  Decoration4: Wt,
-  Decoration5: Gt,
-  Decoration6: Qt,
-  Decoration7: Yt,
-  Decoration8: lo,
-  Decoration9: so,
-  Decoration10: co,
-  Decoration11: fo,
-  Decoration12: bo
+  BorderBox1: Te,
+  BorderBox2: Me,
+  BorderBox3: Ke,
+  BorderBox4: Be,
+  BorderBox5: je,
+  BorderBox6: Ze,
+  BorderBox7: ot,
+  BorderBox8: nt,
+  BorderBox9: mt,
+  BorderBox10: gt,
+  BorderBox11: wt,
+  BorderBox12: Rt,
+  BorderBox13: St,
+  Decoration1: It,
+  Decoration2: Ot,
+  Decoration3: Ft,
+  Decoration4: Ht,
+  Decoration5: Xt,
+  Decoration6: Vt,
+  Decoration7: eo,
+  Decoration8: io,
+  Decoration9: ao,
+  Decoration10: ho,
+  Decoration11: _o,
+  Decoration12: yo
 };
 for (let e in R) {
-  let l = `dv-${Ce(e)}`;
-  ve({
+  let l = `dv-${ke(e)}`;
+  Ce({
     [l]: R[e]
   });
 }