@joker.front/datav 1.0.0

package/dist/index.mjs

@@ -0,0 +1,926 @@
+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";
+function c(e = 32) {
+  let l = [], o = [
+    "0",
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "a",
+    "b",
+    "c",
+    "d",
+    "e",
+    "f",
+    "g",
+    "h",
+    "i",
+    "j",
+    "k",
+    "l",
+    "m",
+    "n",
+    "o",
+    "p",
+    "q",
+    "r",
+    "s",
+    "t",
+    "u",
+    "v",
+    "w",
+    "x",
+    "y",
+    "z"
+  ];
+  for (let i = 0; i < e; i++) {
+    let r = Math.round(Math.random() * (o.length - 1));
+    l.push(o[r]);
+  }
+  return l.join("");
+}
+function Ce(e, l = "-") {
+  return e = e || "", e.split(/(?=[A-Z])/).map((i) => i.toLowerCase()).join(l);
+}
+function ke(e, l, o = {}) {
+  let i, r = !1, n = 0, s = () => {
+    i && clearTimeout(i);
+  }, g = (h) => {
+    s(), r = !h;
+  };
+  function m(...h) {
+    let E = Date.now() - n;
+    if (r)
+      return;
+    let p = () => {
+      n = Date.now(), l.apply(m, h);
+    };
+    function f() {
+      i = void 0;
+    }
+    !o.noLeading && o.debounceMode && !i && p(), s(), o.debounceMode === void 0 && E > e ? o.noLeading ? (n = Date.now(), o.noTrailing || (i = setTimeout(o.debounceMode ? f : p, e))) : p() : o.noTrailing !== !0 && (i = setTimeout(o.debounceMode ? f : p, o.debounceMode === void 0 ? e - E : e));
+  }
+  return m.cancel = g, m;
+}
+function Se(e, l, o = !1) {
+  return ke(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, "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.$on("beforeDestroy", () => {
+      this.unbindDomResizeCallback();
+    });
+  }
+  initSize() {
+    var o;
+    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));
+  }
+  unbindDomResizeCallback() {
+    this.container && (this.domObserver && (this.domObserver.disconnect(), this.domObserver.takeRecords()), window.removeEventListener("resize", this.debounceInitWHFun));
+  }
+  fade(o, i) {
+    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);
+    return `rgba(${r},${n},${s},${i / 100})`;
+  }
+}
+function Le(e, l) {
+  let o = new MutationObserver(l);
+  return o.observe(e, { attributes: !0, attributeFilter: ["style"], attributeOldValue: !0 }), o;
+}
+class xe extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#4fd2dd", "#235fa7"],
+      backgroundColor: "transparent"
+    });
+    t(this, "border", ["left-top", "right-top", "left-bottom", "right-bottom"]);
+  }
+}
+let Ae = { 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
+};
+var v, C;
+let Pe = class extends (C = Ie.component, v = d, C) {
+  constructor() {
+    super(...arguments);
+    t(this, v, "2b4d949b");
+    t(this, "template", Ae.render);
+  }
+};
+class Te extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#fff", "rgba(255, 255, 255, 0.6)"],
+      backgroundColor: "transparent"
+    });
+  }
+}
+let Ne = { 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
+};
+var k, S;
+let $e = class extends (S = Oe.component, k = d, S) {
+  constructor() {
+    super(...arguments);
+    t(this, k, "3b9d3fa6");
+    t(this, "template", Ne.render);
+  }
+};
+class Me extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#2862b7", "#2862b7"],
+      backgroundColor: "transparent"
+    });
+  }
+}
+let De = { 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
+};
+var L, x;
+let Je = class extends (x = Fe.component, L = d, x) {
+  constructor() {
+    super(...arguments);
+    t(this, L, "113d37b6");
+    t(this, "template", De.render);
+  }
+};
+class Ke extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["red", "rgba(0,0,255,0.8)"],
+      backgroundColor: "transparent"
+    });
+  }
+}
+let We = { 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
+};
+var A, I;
+let ze = class extends (I = He.component, A = d, I) {
+  constructor() {
+    super(...arguments);
+    t(this, A, "237a53e4");
+    t(this, "template", We.render);
+  }
+};
+class Be extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["rgba(255, 255, 255, 0.35)", "rgba(255, 255, 255, 0.20)"],
+      backgroundColor: "transparent"
+    });
+  }
+}
+let Ge = { 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
+};
+var P, T;
+let Ue = class extends (T = Xe.component, P = d, T) {
+  constructor() {
+    super(...arguments);
+    t(this, P, "6fd7b4d4");
+    t(this, "template", Ge.render);
+  }
+};
+class je extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["rgba(255, 255, 255, 0.35)", "gray"],
+      backgroundColor: "transparent"
+    });
+  }
+}
+let Qe = { 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
+};
+var N, O;
+let qe = class extends (O = Ve.component, N = d, O) {
+  constructor() {
+    super(...arguments);
+    t(this, N, "ebdf6a26");
+    t(this, "template", Qe.render);
+  }
+};
+class Ze extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["rgba(128,128,128,0.3)", "rgba(128,128,128,0.5)"],
+      backgroundColor: "transparent"
+    });
+  }
+}
+let Ye = { 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
+};
+var $, M;
+let tt = class extends (M = et.component, $ = d, M) {
+  constructor() {
+    super(...arguments);
+    t(this, $, "44fa29fb");
+    t(this, "template", Ye.render);
+  }
+};
+class ot extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "path", `border-box-8-path-${c()}`);
+    t(this, "gradient", `border-box-8-gradient-${c()}`);
+    t(this, "mask", `border-box-8-mask-${c()}`);
+    t(this, "propsOption", {
+      colors: ["#235fa7", "#4fd2dd"],
+      backgroundColor: "transparent",
+      dur: 3
+    });
+  }
+  get length() {
+    return (this.model.width + this.model.height - 5) * 2;
+  }
+  get pathD() {
+    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) {
+  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
+};
+var D, F;
+let rt = class extends (F = it.component, D = d, F) {
+  constructor() {
+    super(...arguments);
+    t(this, D, "df10b11e");
+    t(this, "template", lt.render);
+  }
+};
+class nt extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "gradient", `border-box-9-gradient-${c()}`);
+    t(this, "mask", `border-box-9-mask-${c()}`);
+    t(this, "propsOption", {
+      colors: ["#11eefd", "#0078d2"],
+      backgroundColor: "transparent",
+      dur: 3
+    });
+  }
+  get length() {
+    return (this.model.width + this.model.height - 5) * 2;
+  }
+  get pathD() {
+    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) {
+  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
+};
+var J, K;
+let at = class extends (K = dt.component, J = d, K) {
+  constructor() {
+    super(...arguments);
+    t(this, J, "e4c62a5f");
+    t(this, "template", st.render);
+  }
+};
+class mt extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#1d48c4", "#d3e1f8"],
+      backgroundColor: "transparent"
+    });
+    t(this, "border", ["left-top", "right-top", "left-bottom", "right-bottom"]);
+  }
+}
+let pt = { 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
+};
+var W, H;
+let ht = class extends (H = ct.component, W = d, H) {
+  constructor() {
+    super(...arguments);
+    t(this, W, "c1b255d6");
+    t(this, "template", pt.render);
+  }
+};
+class gt extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#8aaafb", "#1f33a2"],
+      backgroundColor: "transparent",
+      titleWidth: 250,
+      title: ""
+    });
+    t(this, "filterId", `border-box-11-filterId-${c()}`);
+  }
+}
+let Et = { 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
+};
+var z, B;
+let _t = class extends (B = ft.component, z = d, B) {
+  constructor() {
+    super(...arguments);
+    t(this, z, "639f3c2e");
+    t(this, "template", Et.render);
+  }
+};
+class wt extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#2e6099", "#7ce7fd"],
+      backgroundColor: "transparent"
+    });
+    t(this, "filterId", `borderr-box-12-filterId-${c()}`);
+  }
+}
+let ut = { 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
+};
+var G, X;
+let yt = class extends (X = bt.component, G = d, X) {
+  constructor() {
+    super(...arguments);
+    t(this, G, "9a8985f2");
+    t(this, "template", ut.render);
+  }
+};
+class Rt extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#6586ec", "#2cf7fe"],
+      backgroundColor: "transparent"
+    });
+  }
+}
+let vt = { 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
+};
+var U, j;
+let kt = class extends (j = Ct.component, U = d, j) {
+  constructor() {
+    super(...arguments);
+    t(this, U, "9f1d0629");
+    t(this, "template", vt.render);
+  }
+};
+class St extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#fff", "#0de7c2"]
+    });
+    t(this, "model", {
+      width: 0,
+      height: 0,
+      points: [],
+      rects: [],
+      svgScale: [1, 1]
+    });
+    t(this, "resize", () => {
+      this.calcPointsPosition(), this.calcRectsPosition(), this.calcScale();
+    });
+    t(this, "svgWH", [200, 50]);
+    t(this, "rowNum", 4);
+    t(this, "rowPoints", 20);
+    t(this, "pointSideLength", 2.5);
+    t(this, "halfPointSideLength", 2.5 / 2);
+  }
+  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(
+      (E, p) => new Array(r).fill(0).map((f, _) => [g * (_ + 1), m * (p + 1)])
+    );
+    this.model.points = h.reduce((E, p) => [...E, ...p], []);
+  }
+  calcRectsPosition() {
+    let o = this.model.points[this.rowPoints * 2 - 1], i = this.model.points[this.rowPoints * 2 - 3];
+    this.model.rects = [o, i];
+  }
+  calcScale() {
+    let [o, i] = this.svgWH;
+    this.model.svgScale = [this.model.width / o, this.model.height / i];
+  }
+}
+let Lt = { 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
+};
+var Q, V;
+let At = class extends (V = xt.component, Q = d, V) {
+  constructor() {
+    super(...arguments);
+    t(this, Q, "5d2cdceb");
+    t(this, "template", Lt.render);
+  }
+};
+class It extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#3faacb", "#fff"],
+      dur: 6
+    });
+    t(this, "model", {
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      w: 0,
+      h: 0
+    });
+    t(this, "resize", () => {
+      this.calcSVGData();
+    });
+  }
+  calcSVGData() {
+    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) {
+  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
+};
+var q, Z;
+let Nt = class extends (Z = Tt.component, q = d, Z) {
+  constructor() {
+    super(...arguments);
+    t(this, q, "2ceeebd3");
+    t(this, "template", Pt.render);
+  }
+};
+class Ot extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#7acaec", "transparent"]
+    });
+    t(this, "model", {
+      width: 0,
+      height: 0,
+      svgScale: [1, 1],
+      points: []
+    });
+    t(this, "resize", () => {
+      this.calcPointsPosition(), this.calcScale();
+    });
+    t(this, "svgWH", [300, 35]);
+    t(this, "rowNum", 2);
+    t(this, "rowPoints", 25);
+    t(this, "pointSideLength", 7);
+    t(this, "halfPointSideLength", this.pointSideLength / 2);
+  }
+  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(
+      (E, p) => new Array(r).fill(0).map((f, _) => [g * (_ + 1), m * (p + 1)])
+    );
+    this.model.points = h.reduce((E, p) => [...E, ...p], []);
+  }
+  calcScale() {
+    let [o, i] = this.svgWH;
+    this.model.svgScale = [this.model.width / o, this.model.height / i];
+  }
+}
+let $t = { 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
+};
+var Y, ee;
+let Dt = class extends (ee = Mt.component, Y = d, ee) {
+  constructor() {
+    super(...arguments);
+    t(this, Y, "e4dd1f59");
+    t(this, "template", $t.render);
+  }
+};
+class Ft extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["rgba(255, 255, 255, 0.3)", "rgba(255, 255, 255, 0.3)"],
+      dur: 3
+    });
+  }
+}
+let Jt = { 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
+};
+var te, oe;
+let Wt = class extends (oe = Kt.component, te = d, oe) {
+  constructor() {
+    super(...arguments);
+    t(this, te, "820e3df4");
+    t(this, "template", Jt.render);
+  }
+};
+function b(e) {
+  let l = 0;
+  for (let o = 1; o < e.length; o++) {
+    let i = e[o - 1], r = e[o], n = r[0] - i[0], s = r[1] - i[1];
+    l += Math.sqrt(n * n + s * s);
+  }
+  return l;
+}
+function y(e, l) {
+  return arguments.length === 1 ? parseInt((Math.random() * e + 1).toString(), 10) : parseInt((Math.random() * (l - e + 1) + e).toString(), 10);
+}
+function w(e, l, o, i) {
+  return [e + Math.cos(i) * o, l + Math.sin(i) * o];
+}
+class Ht extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#3f96a5", "#3f96a5"],
+      dur: 1.2
+    });
+    t(this, "model", {
+      width: 0,
+      height: 0,
+      line1Points: "",
+      line2Points: "",
+      line1Length: 0,
+      line2Length: 0
+    });
+    t(this, "resize", () => {
+      this.calcSVGData();
+    });
+  }
+  calcSVGData() {
+    let { width: o, height: i } = this.model, r = [
+      [0, i * 0.2],
+      [o * 0.18, i * 0.2],
+      [o * 0.2, i * 0.4],
+      [o * 0.25, i * 0.4],
+      [o * 0.27, i * 0.6],
+      [o * 0.72, i * 0.6],
+      [o * 0.75, i * 0.4],
+      [o * 0.8, i * 0.4],
+      [o * 0.82, i * 0.2],
+      [o, i * 0.2]
+    ], n = [
+      [o * 0.3, i * 0.8],
+      [o * 0.7, i * 0.8]
+    ], s = b(r), g = b(n);
+    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) {
+  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
+};
+var le, ie;
+let Gt = class extends (ie = Bt.component, le = d, ie) {
+  constructor() {
+    super(...arguments);
+    t(this, le, "165a82cd");
+    t(this, "template", zt.render);
+  }
+};
+class Xt extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#7acaec", "#7acaec"]
+    });
+    t(this, "model", {
+      width: 0,
+      height: 0,
+      svgScale: [1, 1],
+      points: [],
+      heights: [],
+      minHeights: [],
+      randoms: []
+    });
+    t(this, "svgWH", [300, 35]);
+    t(this, "rowNum", 1);
+    t(this, "rowPoints", 40);
+    t(this, "rectWidth", 7);
+    t(this, "halfRectWidth", this.rectWidth / 2);
+    t(this, "resize", () => {
+      this.calcPointsPosition(), this.calcScale();
+    });
+  }
+  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);
+  }
+  calcScale() {
+    let [o, i] = this.svgWH;
+    this.model.svgScale = [this.model.width / o, this.model.height / i];
+  }
+}
+let Ut = { 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
+};
+var re, ne;
+let Qt = class extends (ne = jt.component, re = d, ne) {
+  constructor() {
+    super(...arguments);
+    t(this, re, "2a7c89dd");
+    t(this, "template", Ut.render);
+  }
+};
+class Vt extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#1dc1f5", "#1dc1f5"]
+    });
+  }
+}
+let qt = { 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
+};
+var se, de;
+let Yt = class extends (de = Zt.component, se = d, de) {
+  constructor() {
+    super(...arguments);
+    t(this, se, "6a75cfee");
+    t(this, "template", qt.render);
+  }
+};
+class eo extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#3f96a5", "#3f96a5"]
+    });
+  }
+  xPos(o) {
+    return this.props.reverse ? this.model.width - o : o;
+  }
+}
+let to = { 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
+};
+var ae, me;
+let lo = class extends (me = oo.component, ae = d, me) {
+  constructor() {
+    super(...arguments);
+    t(this, ae, "597abf05");
+    t(this, "template", to.render);
+  }
+};
+class io extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "model", {
+      width: 0,
+      height: 0,
+      svgScale: [1, 1]
+    });
+    t(this, "polygonId", `decoration-9-polygon-${c()}`);
+    t(this, "propsOption", {
+      colors: ["rgba(3, 166, 224, 0.8)", "rgba(3, 166, 224, 0.5)"],
+      dur: 3
+    });
+    t(this, "resize", () => {
+      this.calcScale();
+    });
+    t(this, "svgWH", [100, 100]);
+  }
+  calcScale() {
+    let [o, i] = this.svgWH;
+    this.model.svgScale = [this.model.width / o, this.model.height / i];
+  }
+}
+let ro = { 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
+};
+var pe, ce;
+let so = class extends (ce = no.component, pe = d, ce) {
+  constructor() {
+    super(...arguments);
+    t(this, pe, "ed9a8703");
+    t(this, "template", ro.render);
+  }
+};
+class ao extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "animationId1", `d10ani1${c()}`);
+    t(this, "animationId2", `d10ani2${c()}`);
+    t(this, "animationId3", `d10ani3${c()}`);
+    t(this, "animationId4", `d10ani4${c()}`);
+    t(this, "animationId5", `d10ani5${c()}`);
+    t(this, "animationId6", `d10ani6${c()}`);
+    t(this, "animationId7", `d10ani7${c()}`);
+    t(this, "propsOption", {
+      colors: ["#00c2ff", "rgba(0, 194, 255, 0.3)"]
+    });
+  }
+}
+let mo = { 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
+};
+var he, ge;
+let co = class extends (ge = po.component, he = d, ge) {
+  constructor() {
+    super(...arguments);
+    t(this, he, "72693e04");
+    t(this, "template", mo.render);
+  }
+};
+class ho extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "propsOption", {
+      colors: ["#1a98fc", "#2cf7fe"]
+    });
+  }
+}
+let go = { 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
+};
+var Ee, fe;
+let fo = class extends (fe = Eo.component, Ee = d, fe) {
+  constructor() {
+    super(...arguments);
+    t(this, Ee, "be570701");
+    t(this, "template", go.render);
+  }
+};
+class _o extends a {
+  constructor() {
+    super(...arguments);
+    t(this, "gId", `decoration-12-g-${c()}`);
+    t(this, "gradientId", `decoration-12-gradient-${c()}`);
+    t(this, "propsOption", {
+      colors: ["#2783ce", "#2cf7fe"],
+      scanDur: 3,
+      haloDur: 2
+    });
+    t(this, "segment", 30);
+    t(this, "sectorAngle", Math.PI / 3);
+    t(this, "ringNum", 3);
+    t(this, "ringWidth", 1);
+    t(this, "model", {
+      width: 0,
+      height: 0,
+      pathD: [],
+      pathColor: [],
+      circleR: [],
+      splitLinePoints: [],
+      arcD: []
+    });
+    t(this, "resize", () => {
+      this.calcPathColor(), this.calcPathD(), this.calcCircleR(), this.calcSplitLinePoints(), this.calcArcD();
+    });
+  }
+  get x() {
+    return this.model.width / 2;
+  }
+  get y() {
+    return this.model.height / 2;
+  }
+  calcPathD() {
+    let { x: o, y: i, segment: r, sectorAngle: n } = this, s = -Math.PI / 2, g = n / r, m = this.model.width / 4, h = w(o, i, m, s);
+    this.model.pathD = new Array(r).fill("").map((E, p) => {
+      let f = w(o, i, m, s - (p + 1) * g).map((u) => u.toFixed(5)), _ = `M${h.join(",")} A${m}, ${m} 0 0 0 ${f.join(",")}`;
+      return h = f.map((u) => Number(u)), _;
+    });
+  }
+  calcPathColor() {
+    let o = 100 / (this.segment - 1);
+    this.model.pathColor = new Array(this.segment).fill(this.props.colors[0]).map((i, r) => this.fade(this.props.colors[0], 100 - r * o));
+  }
+  calcCircleR() {
+    let { ringNum: o, ringWidth: i } = this, r = (this.model.width / 2 - i / 2) / o;
+    this.model.circleR = new Array(o).fill(0).map((n, s) => r * (s + 1));
+  }
+  calcSplitLinePoints() {
+    let { x: o, y: i } = this, r = Math.PI / 6, n = this.model.width / 2;
+    this.model.splitLinePoints = new Array(6).fill("").map((s, g) => {
+      const m = r * (g + 1), h = m + Math.PI, E = w(o, i, n, m), p = w(o, i, n, h);
+      return `${E.join(",")} ${p.join(",")}`;
+    });
+  }
+  calcArcD() {
+    let { x: o, y: i } = this, r = Math.PI / 6, n = this.model.width / 2 - 1;
+    this.model.arcD = new Array(4).fill("").map((s, g) => {
+      let m = r * (3 * g + 1), h = m + r, E = w(o, i, n, m), p = w(o, i, n, h);
+      return `M${E.join(",")} A${o}, ${i} 0 0 1 ${p.join(",")}`;
+    });
+  }
+}
+let wo = { 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
+};
+var _e, we;
+let bo = class extends (we = uo.component, _e = d, we) {
+  constructor() {
+    super(...arguments);
+    t(this, _e, "b78c6be8");
+    t(this, "template", wo.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
+};
+for (let e in R) {
+  let l = `dv-${Ce(e)}`;
+  ve({
+    [l]: R[e]
+  });
+}