@zerops/web-components 0.2.2 → 0.4.0

package/managed-service-diagram.js

@@ -0,0 +1,1050 @@
+var fn = (d) => {
+  throw TypeError(d);
+};
+var en = (d, e, n) => e.has(d) || fn("Cannot " + n);
+var s = (d, e, n) => (en(d, e, "read from private field"), n ? n.call(d) : e.get(d)), g = (d, e, n) => e.has(d) ? fn("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(d) : e.set(d, n), f = (d, e, n, t) => (en(d, e, "write to private field"), t ? t.call(d, n) : e.set(d, n), n), O = (d, e, n) => (en(d, e, "access private method"), n);
+import { a7 as K, l as w, B as Z, aM as H, b8 as pn, r as j, n as L, F as Y, ar as G, as as nn, at as a, aY as hn, a_ as gn, av as i, aw as k, aZ as un, b0 as _n, aT as tn, a2 as c, az as o, aW as W, aX as J, aQ as an, al as Q, bq as Cn, br as Pn } from "./chunks/app-CrO8M3t-.js";
+import { a as mn } from "./chunks/index-RTjd7i0F.js";
+const On = () => [0, 1, 2];
+function kn(d, e) {
+  d & 1 && (a(0, "div", 1)(1, "div", 2), c(2, "span", 3)(3, "span", 4)(4, "span", 5), i(), a(5, "div", 6)(6, "mat-icon"), o(7, "check"), i()()());
+}
+var S, T, b, $, xn, bn;
+const D = class D {
+  constructor() {
+    g(this, $);
+    g(this, S);
+    g(this, T);
+    g(this, b);
+    this.active = K(!0), f(this, S, w(L)), f(this, T, Z(!1)), f(this, b, null);
+    const e = w(Y);
+    H(() => {
+      O(this, $, xn).call(this), s(this, T).set(!0);
+    }), e.onDestroy(() => s(this, b)?.cancel()), pn(() => {
+      const n = this.active();
+      s(this, T).call(this) && (n && !s(this, b) ? f(this, b, O(this, $, bn).call(this)) : !n && s(this, b) && (s(this, b).cancel(), f(this, b, null)));
+    });
+  }
+};
+S = new WeakMap(), T = new WeakMap(), b = new WeakMap(), $ = new WeakSet(), xn = function() {
+  s(this, S).nativeElement.querySelectorAll(".card").forEach((e) => {
+    const n = e;
+    n.style.setProperty("--_d1", `-${(Math.random() * 30).toFixed(1)}s`), n.style.setProperty("--_d2", `-${(Math.random() * 30).toFixed(1)}s`), n.style.setProperty("--_d3", `-${(Math.random() * 30).toFixed(1)}s`);
+  });
+}, bn = function() {
+  const n = s(this, S).nativeElement.querySelectorAll(".card"), t = Array.from(n).map((p) => ({
+    card: p,
+    bars: p.querySelector(".bars"),
+    chk: p.querySelector(".chk mat-icon")
+  }));
+  for (const p of t)
+    p.chk.style.transform = "scale(0)", p.chk.style.opacity = "0";
+  const r = [0, 0, 0.58, 1], C = [0.42, 0, 1, 1], _ = [
+    { i: 1, s: 0.033 },
+    { i: 0, s: 0.283 },
+    { i: 2, s: 0.55 }
+  ], l = [];
+  for (const { i: p } of _) {
+    const m = t[p];
+    l.push([m.card, { scale: [1, 1], backgroundColor: ["#FDFDFD", "#FDFDFD"] }, { duration: 1e-3, at: 0 }], [m.bars, { scale: [1, 1], opacity: [1, 1] }, { duration: 1e-3, at: 0 }], [m.chk, { scale: [0, 0], opacity: [0, 0] }, { duration: 1e-3, at: 0 }]);
+  }
+  for (const { i: p, s: m } of _) {
+    const h = t[p], U = m + 0.55;
+    l.push([h.card, { scale: [1, 0.872] }, { duration: 0.133, at: m, ease: [0.3, 0, 0.7, 1] }]), l.push([h.card, { backgroundColor: ["#FDFDFD", "#08EB9D"] }, { duration: 0.083, at: m, ease: "linear" }]), l.push([h.bars, { scale: [1, 0], opacity: [1, 0] }, { duration: 0.05, at: m + 0.033, ease: C }]), l.push([h.card, { scale: [0.872, 0.894] }, { duration: 0.083, at: m + 0.167, ease: r }]), l.push([h.chk, { scale: [0, 1], opacity: [0, 1] }, { duration: 0.133, at: m + 0.133, ease: r }]), l.push([h.chk, { scale: [1, 0], opacity: [1, 0] }, { duration: 0.133, at: U, ease: C }]), l.push([h.card, { backgroundColor: ["#08EB9D", "#FDFDFD"] }, { duration: 0.133, at: U, ease: "linear" }]), l.push([h.card, { scale: [0.894, 1] }, { duration: 0.167, at: U, ease: r }]), l.push([h.bars, { scale: [0, 1], opacity: [0, 1] }, { duration: 0.083, at: U + 0.033, ease: r }]);
+  }
+  l.push([t[0].card, { opacity: [1, 1] }, { duration: 1e-3, at: 1.5 - 1e-3 }]);
+  let u = null, M, P = !0;
+  const x = () => {
+    P && (u = mn(l, { duration: 1.5 }), u.finished.then(() => {
+      P && (M = setTimeout(x, (2 + Math.random() * 2) * 1e3));
+    }));
+  };
+  return M = setTimeout(x, (0.5 + Math.random() * 1) * 1e3), {
+    cancel() {
+      P = !1, clearTimeout(M), u?.cancel();
+    }
+  };
+}, D.ɵfac = function(n) {
+  return new (n || D)();
+}, D.ɵcmp = /* @__PURE__ */ j({ type: D, selectors: [["zw-mgmt-health-anim"]], hostVars: 2, hostBindings: function(n, t) {
+  n & 2 && tn("__host--paused", !t.active());
+}, inputs: { active: [1, "active"] }, decls: 3, vars: 1, consts: [[1, "pill"], [1, "card"], [1, "bars"], [1, "bar", "bar--b"], [1, "bar", "bar--t"], [1, "bar", "bar--p"], [1, "chk"]], template: function(n, t) {
+  n & 1 && (a(0, "div", 0), hn(1, kn, 8, 0, "div", 1, gn), i()), n & 2 && (k(), un(_n(0, On)));
+}, dependencies: [G, nn], styles: [`[_nghost-%COMP%] { display: block; }
+
+    .pill[_ngcontent-%COMP%] {
+      display: inline-flex;
+      align-items: center;
+      padding: 5px;
+      gap: 6px;
+      background: #E8E7E7;
+      border-radius: 11px;
+    }
+
+    .card[_ngcontent-%COMP%] {
+      width: 30px;
+      height: 30px;
+      border-radius: 6px;
+      background: #FDFDFD;
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
+      flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .bars[_ngcontent-%COMP%] {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+    }
+
+    .bar[_ngcontent-%COMP%] {
+      display: block;
+      width: 20px;
+      height: 3px;
+      border-radius: 2px;
+      position: relative;
+      background: rgba(216, 215, 215, 0.4);
+      overflow: hidden;
+    }
+
+    .bar[_ngcontent-%COMP%]::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+      opacity: 0.7;
+      transform-origin: left center;
+      will-change: transform;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-fill-mode: both;
+    }
+
+    .bar--b[_ngcontent-%COMP%]::after {
+      background: #82AEE8;
+      animation-name: _ngcontent-%COMP%_drift-cpu;
+      animation-duration: 16s;
+      animation-delay: var(--_d1, 0s);
+    }
+
+    .bar--t[_ngcontent-%COMP%]::after {
+      background: #7FABA5;
+      animation-name: _ngcontent-%COMP%_drift-ram;
+      animation-duration: 23s;
+      animation-delay: var(--_d2, 0s);
+    }
+
+    .bar--p[_ngcontent-%COMP%]::after {
+      background: #C6758A;
+      animation-name: _ngcontent-%COMP%_drift-disk;
+      animation-duration: 29s;
+      animation-delay: var(--_d3, 0s);
+    }
+
+    @keyframes _ngcontent-%COMP%_drift-cpu {
+      0%   { transform: scaleX(0.40); }
+      8%   { transform: scaleX(0.42); }
+      18%  { transform: scaleX(0.68); }
+      24%  { transform: scaleX(0.75); }
+      32%  { transform: scaleX(0.52); }
+      45%  { transform: scaleX(0.44); }
+      60%  { transform: scaleX(0.48); }
+      72%  { transform: scaleX(0.58); }
+      85%  { transform: scaleX(0.43); }
+      100% { transform: scaleX(0.40); }
+    }
+
+    @keyframes _ngcontent-%COMP%_drift-ram {
+      0%   { transform: scaleX(0.58); }
+      20%  { transform: scaleX(0.62); }
+      40%  { transform: scaleX(0.56); }
+      60%  { transform: scaleX(0.60); }
+      80%  { transform: scaleX(0.64); }
+      100% { transform: scaleX(0.58); }
+    }
+
+    @keyframes _ngcontent-%COMP%_drift-disk {
+      0%   { transform: scaleX(0.38); }
+      25%  { transform: scaleX(0.42); }
+      50%  { transform: scaleX(0.36); }
+      75%  { transform: scaleX(0.40); }
+      100% { transform: scaleX(0.38); }
+    }
+
+    .__host--paused[_nghost-%COMP%]   .bar[_ngcontent-%COMP%]::after {
+      animation-play-state: paused;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .bar[_ngcontent-%COMP%]::after {
+        animation: none;
+        transform: scaleX(0.5);
+      }
+    }
+
+    .chk[_ngcontent-%COMP%] {
+      position: absolute;
+      inset: 0;
+      background: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+    }
+
+    .chk[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%] {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+      line-height: 20px;
+    }`], changeDetection: 0 });
+let on = D;
+var z, B, y, N, yn, vn;
+const E = class E {
+  constructor() {
+    g(this, N);
+    g(this, z);
+    g(this, B);
+    g(this, y);
+    this.active = K(!0), f(this, z, w(L)), f(this, B, Z(!1)), f(this, y, null);
+    const e = w(Y);
+    H(() => {
+      O(this, N, yn).call(this), s(this, B).set(!0);
+    }), e.onDestroy(() => s(this, y)?.cancel()), pn(() => {
+      const n = this.active();
+      s(this, B).call(this) && (n && !s(this, y) ? f(this, y, O(this, N, vn).call(this)) : !n && s(this, y) && (s(this, y).cancel(), f(this, y, null)));
+    });
+  }
+};
+z = new WeakMap(), B = new WeakMap(), y = new WeakMap(), N = new WeakSet(), yn = function() {
+  s(this, z).nativeElement.querySelectorAll(".card").forEach((e) => {
+    const n = e;
+    n.style.setProperty("--_d1", `-${(Math.random() * 30).toFixed(1)}s`), n.style.setProperty("--_d2", `-${(Math.random() * 30).toFixed(1)}s`), n.style.setProperty("--_d3", `-${(Math.random() * 30).toFixed(1)}s`);
+  });
+}, vn = function() {
+  const t = s(this, z).nativeElement, r = t.querySelector(".fo-p1"), C = t.querySelector(".fo-p1-bars"), _ = t.querySelector(".fo-warn"), l = t.querySelector(".fo-del"), u = t.querySelector(".fo-extra"), M = t.querySelector(".fo-extra-bars"), P = [
+    // === Resets at t=0 ===
+    [r, { x: [0, 0], opacity: [1, 1] }, { duration: 1e-3, at: 0 }],
+    [C, { scale: [1, 1], opacity: [1, 1] }, { duration: 1e-3, at: 0 }],
+    [_, { opacity: [0, 0], scale: [0, 0], x: [0, 0] }, { duration: 1e-3, at: 0 }],
+    [l, { opacity: [0, 0], scale: [0, 0], x: [0, 0] }, { duration: 1e-3, at: 0 }],
+    [u, { scale: [0, 0], opacity: [0, 0] }, { duration: 1e-3, at: 0 }],
+    [M, { scale: [0, 0], opacity: [0, 0] }, { duration: 1e-3, at: 0 }],
+    // === Phase 1: Alert formation ===
+    [r, { backgroundColor: ["#FDFDFD", "#FC6465"] }, { duration: 0.1, at: 0.017, ease: "linear" }],
+    [C, { scale: [1, 0], opacity: [1, 0] }, { duration: 0.1, at: 0.017, ease: "linear" }],
+    [r, { scale: [1, 0.883] }, { duration: 0.15, at: 0.017, ease: [0, 0.7, 0.35, 1] }],
+    [_, { opacity: [0, 1], scale: [0, 1] }, { duration: 0.117, at: 0.15, ease: [0, 0, 0.3, 1] }],
+    [r, { scale: [0.883, 1.011] }, { duration: 0.7, at: 0.2, ease: [0.15, 0.25, 0.85, 0.85] }],
+    // === Phase 2: Slide left + new card pop-in ===
+    [r, { x: [0, -41] }, { duration: 0.183, at: 1, ease: [0.42, 0, 0.58, 1] }],
+    [_, { x: [0, -41] }, { duration: 0.183, at: 1, ease: [0.42, 0, 0.58, 1] }],
+    [l, { x: [0, -41] }, { duration: 0.183, at: 1, ease: [0.42, 0, 0.58, 1] }],
+    [u, { opacity: [0, 1] }, { duration: 0.017, at: 1.133, ease: "linear" }],
+    [u, { scale: [0, 1.117] }, { duration: 0.15, at: 1.133, ease: [0, 0, 0.35, 1] }],
+    [u, { borderRadius: ["15px", "6px"] }, { duration: 0.1, at: 1.133, ease: [0, 0, 0.3, 1] }],
+    [M, { scale: [0, 1], opacity: [0, 1] }, { duration: 0.05, at: 1.2, ease: [0, 0, 0.3, 1] }],
+    [u, { scale: [1.117, 0.979] }, { duration: 0.234, at: 1.283, ease: [0.35, 0, 0.65, 1] }],
+    [u, { scale: [0.979, 1] }, { duration: 0.116, at: 1.517, ease: [0, 0, 0.3, 1] }],
+    // === Phase 3: Warning → Trash morph ===
+    [r, { scale: [1.011, 0.872] }, { duration: 0.167, at: 2.033, ease: [0.4, 0, 0.8, 1] }],
+    [_, { scale: [1, 0], opacity: [1, 0] }, { duration: 0.083, at: 2.1, ease: [0.4, 0, 1, 1] }],
+    [l, { scale: [0, 1], opacity: [0, 1] }, { duration: 0.067, at: 2.183, ease: [0, 0, 0.3, 1] }],
+    [r, { backgroundColor: ["#FC6465", "#D4D4D4"] }, { duration: 0.167, at: 2.167, ease: "ease-out" }],
+    [r, { scale: [0.872, 1] }, { duration: 0.733, at: 2.217, ease: [0.22, 1, 0.36, 1] }],
+    // === Phase 4: Portal closing ===
+    [r, { scale: [1, 0], borderRadius: ["6px", "15px"] }, { duration: 0.284, at: 3.033, ease: "linear" }],
+    [l, { clipPath: ["inset(0px round 6px)", "inset(15px round 15px)"] }, { duration: 0.284, at: 3.033, ease: "linear" }],
+    [r, { opacity: [1, 0] }, { duration: 0.184, at: 3.133, ease: "linear" }],
+    [l, { opacity: [1, 0] }, { duration: 0.184, at: 3.133, ease: "linear" }]
+  ];
+  let x = null, p, m = !0;
+  const h = () => {
+    m && (x = mn(P, { duration: 3.33 }), x.finished.then(() => {
+      m && (p = setTimeout(h, (2 + Math.random() * 2) * 1e3));
+    }));
+  };
+  return p = setTimeout(h, (0.5 + Math.random() * 1) * 1e3), {
+    cancel() {
+      m = !1, clearTimeout(p), x?.cancel();
+    }
+  };
+}, E.ɵfac = function(n) {
+  return new (n || E)();
+}, E.ɵcmp = /* @__PURE__ */ j({ type: E, selectors: [["zw-mgmt-failover-anim"]], hostVars: 2, hostBindings: function(n, t) {
+  n & 2 && tn("__host--paused", !t.active());
+}, inputs: { active: [1, "active"] }, decls: 27, vars: 0, consts: [[1, "pill"], [1, "card", "fo-p1"], [1, "bars", "fo-p1-bars"], [1, "bar", "bar--b"], [1, "bar", "bar--t"], [1, "bar", "bar--p"], [1, "card"], [1, "bars"], [1, "fo-warn"], [1, "fo-del"], [1, "card", "fo-extra"], [1, "bars", "fo-extra-bars"]], template: function(n, t) {
+  n & 1 && (a(0, "div", 0)(1, "div", 1)(2, "div", 2), c(3, "span", 3)(4, "span", 4)(5, "span", 5), i()(), a(6, "div", 6)(7, "div", 7), c(8, "span", 3)(9, "span", 4)(10, "span", 5), i()(), a(11, "div", 6)(12, "div", 7), c(13, "span", 3)(14, "span", 4)(15, "span", 5), i()(), a(16, "div", 8)(17, "mat-icon"), o(18, "warning_amber"), i()(), a(19, "div", 9)(20, "mat-icon"), o(21, "delete"), i()(), a(22, "div", 10)(23, "div", 11), c(24, "span", 3)(25, "span", 4)(26, "span", 5), i()()());
+}, dependencies: [G, nn], styles: [`[_nghost-%COMP%] { display: block; }
+
+    .pill[_ngcontent-%COMP%] {
+      display: inline-flex;
+      align-items: center;
+      padding: 5px;
+      gap: 6px;
+      background: #E8E7E7;
+      border-radius: 11px;
+      position: relative;
+      overflow: visible;
+    }
+
+    .card[_ngcontent-%COMP%] {
+      width: 30px;
+      height: 30px;
+      border-radius: 6px;
+      background: #FDFDFD;
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
+      flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .bars[_ngcontent-%COMP%] {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+    }
+
+    .bar[_ngcontent-%COMP%] {
+      display: block;
+      width: 20px;
+      height: 3px;
+      border-radius: 2px;
+      position: relative;
+      background: rgba(216, 215, 215, 0.4);
+      overflow: hidden;
+    }
+
+    .bar[_ngcontent-%COMP%]::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+      opacity: 0.7;
+      transform-origin: left center;
+      will-change: transform;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-fill-mode: both;
+    }
+
+    .bar--b[_ngcontent-%COMP%]::after {
+      background: #82AEE8;
+      animation-name: _ngcontent-%COMP%_drift-cpu;
+      animation-duration: 16s;
+      animation-delay: var(--_d1, 0s);
+    }
+
+    .bar--t[_ngcontent-%COMP%]::after {
+      background: #7FABA5;
+      animation-name: _ngcontent-%COMP%_drift-ram;
+      animation-duration: 23s;
+      animation-delay: var(--_d2, 0s);
+    }
+
+    .bar--p[_ngcontent-%COMP%]::after {
+      background: #C6758A;
+      animation-name: _ngcontent-%COMP%_drift-disk;
+      animation-duration: 29s;
+      animation-delay: var(--_d3, 0s);
+    }
+
+    @keyframes _ngcontent-%COMP%_drift-cpu {
+      0%   { transform: scaleX(0.40); }
+      8%   { transform: scaleX(0.42); }
+      18%  { transform: scaleX(0.68); }
+      24%  { transform: scaleX(0.75); }
+      32%  { transform: scaleX(0.52); }
+      45%  { transform: scaleX(0.44); }
+      60%  { transform: scaleX(0.48); }
+      72%  { transform: scaleX(0.58); }
+      85%  { transform: scaleX(0.43); }
+      100% { transform: scaleX(0.40); }
+    }
+
+    @keyframes _ngcontent-%COMP%_drift-ram {
+      0%   { transform: scaleX(0.58); }
+      20%  { transform: scaleX(0.62); }
+      40%  { transform: scaleX(0.56); }
+      60%  { transform: scaleX(0.60); }
+      80%  { transform: scaleX(0.64); }
+      100% { transform: scaleX(0.58); }
+    }
+
+    @keyframes _ngcontent-%COMP%_drift-disk {
+      0%   { transform: scaleX(0.38); }
+      25%  { transform: scaleX(0.42); }
+      50%  { transform: scaleX(0.36); }
+      75%  { transform: scaleX(0.40); }
+      100% { transform: scaleX(0.38); }
+    }
+
+    .__host--paused[_nghost-%COMP%]   .bar[_ngcontent-%COMP%]::after {
+      animation-play-state: paused;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .bar[_ngcontent-%COMP%]::after {
+        animation: none;
+        transform: scaleX(0.5);
+      }
+    }
+
+    .fo-p1[_ngcontent-%COMP%] { z-index: 1; }
+
+    .fo-warn[_ngcontent-%COMP%], .fo-del[_ngcontent-%COMP%] {
+      position: absolute;
+      left: 5px;
+      top: 5px;
+      width: 30px;
+      height: 30px;
+      z-index: 2;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+    }
+
+    .fo-warn[_ngcontent-%COMP%] { color: #fff; }
+
+    .fo-warn[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%] {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+    }
+
+    .fo-del[_ngcontent-%COMP%] { color: #3C5F58; }
+
+    .fo-del[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%] {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+      line-height: 16px;
+    }
+
+    .fo-extra[_ngcontent-%COMP%] {
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      border-radius: 15px;
+    }
+
+    .fo-extra-bars[_ngcontent-%COMP%] {
+      opacity: 0;
+      transform: scale(0);
+    }`], changeDetection: 0 });
+let sn = E;
+var q, R, v, V, wn, Mn;
+const F = class F {
+  constructor() {
+    g(this, V);
+    g(this, q);
+    g(this, R);
+    g(this, v);
+    this.active = K(!0), f(this, q, w(L)), f(this, R, Z(!1)), f(this, v, null);
+    const e = w(Y);
+    H(() => {
+      O(this, V, wn).call(this), s(this, R).set(!0);
+    }), e.onDestroy(() => s(this, v)?.cancel()), pn(() => {
+      const n = this.active();
+      s(this, R).call(this) && (n && !s(this, v) ? f(this, v, O(this, V, Mn).call(this)) : !n && s(this, v) && (s(this, v).cancel(), f(this, v, null)));
+    });
+  }
+};
+q = new WeakMap(), R = new WeakMap(), v = new WeakMap(), V = new WeakSet(), wn = function() {
+  s(this, q).nativeElement.querySelectorAll(".card").forEach((e) => {
+    const n = e;
+    n.style.setProperty("--_d1", `-${(Math.random() * 30).toFixed(1)}s`), n.style.setProperty("--_d2", `-${(Math.random() * 30).toFixed(1)}s`), n.style.setProperty("--_d3", `-${(Math.random() * 30).toFixed(1)}s`);
+  });
+}, Mn = function() {
+  const n = s(this, q).nativeElement, t = n.querySelector(".bk-ghost"), r = n.querySelector(".bk-lock"), C = -42, _ = 72, l = -42, u = 30, M = [0.42, 0, 0.58, 1], P = [
+    [t, { opacity: [0, 0], scale: [1, 1] }, { duration: 1e-3, at: 0 }],
+    [t, { left: ["0px", "0px"], width: ["30px", "30px"] }, { duration: 1e-3, at: 0 }],
+    [t, { backgroundColor: ["#FDFDFD", "#FDFDFD"] }, { duration: 1e-3, at: 0 }],
+    [t, { boxShadow: ["0 0 0 rgba(0,0,0,0)", "0 0 0 rgba(0,0,0,0)"] }, { duration: 1e-3, at: 0 }],
+    [r, { opacity: [0, 0], scale: [0, 0], x: ["0px", "0px"] }, { duration: 1e-3, at: 0 }],
+    [t, { opacity: [0, 1] }, { duration: 1e-3, at: 0.1 }],
+    [
+      t,
+      { left: ["0px", `${C}px`], width: ["30px", `${_}px`] },
+      { duration: 0.067, at: 0.1, ease: [0, 0, 0.58, 1] }
+    ],
+    [
+      t,
+      { width: [`${_}px`, `${u}px`] },
+      { duration: 0.25, at: 0.167, ease: M }
+    ],
+    [
+      t,
+      { boxShadow: ["0 0 0 rgba(0,0,0,0)", "0 2px 8px rgba(0,0,0,0.10)"] },
+      { duration: 0.05, at: 0.417 }
+    ],
+    [t, { backgroundColor: ["#FDFDFD", "#08EB9E"] }, { duration: 0.067, at: 0.533, ease: "linear" }],
+    [t, { boxShadow: ["0 2px 8px rgba(0,0,0,0.10)", "0 1px 6px rgba(8,235,158,0.3)"] }, { duration: 0.1, at: 0.533 }],
+    [r, { opacity: [0, 1] }, { duration: 0.017, at: 0.567 }],
+    [r, { scale: [0, 0.35] }, { duration: 0.033, at: 0.567, ease: [0, 0, 0.58, 1] }],
+    [r, { scale: [0.35, 1] }, { duration: 0.3, at: 0.6, ease: [0.1, 0, 0.58, 1] }],
+    [t, { scale: [1, 0.97] }, { duration: 0.167, at: 0.533 }],
+    [t, { scale: [0.97, 1.12] }, { duration: 0.217, at: 0.7, ease: [0, 0, 0.58, 1] }],
+    [t, { left: [`${l}px`, `${l - 65}px`] }, { duration: 0.25, at: 1.883, ease: [0.25, 0, 1, 1] }],
+    [t, { scale: [1.12, 0.82] }, { duration: 0.25, at: 1.883, ease: "linear" }],
+    [r, { x: ["0px", "-5px"] }, { duration: 0.175, at: 1.883, ease: [0.2, 0, 0.58, 1] }],
+    [r, { x: ["-5px", "-1px"] }, { duration: 0.075, at: 2.058, ease: [0, 0, 0.58, 1] }],
+    [t, { left: [`${l - 65}px`, `${l - 76}px`] }, { duration: 0.083, at: 2.133, ease: "linear" }],
+    [t, { scale: [0.82, 0.25] }, { duration: 0.083, at: 2.133, ease: "linear" }],
+    [t, { opacity: [1, 0] }, { duration: 0.067, at: 2.133, ease: "linear" }],
+    [t, { opacity: [0, 0] }, { duration: 1e-3, at: 2.333 - 1e-3 }]
+  ];
+  let x = null, p, m = !0;
+  const h = () => {
+    m && (x = mn(P, { duration: 2.333 }), x.finished.then(() => {
+      m && (p = setTimeout(h, (2 + Math.random() * 2) * 1e3));
+    }));
+  };
+  return p = setTimeout(h, (0.5 + Math.random() * 1) * 1e3), {
+    cancel() {
+      m = !1, clearTimeout(p), x?.cancel();
+    }
+  };
+}, F.ɵfac = function(n) {
+  return new (n || F)();
+}, F.ɵcmp = /* @__PURE__ */ j({ type: F, selectors: [["zw-mgmt-backup-anim"]], hostVars: 2, hostBindings: function(n, t) {
+  n & 2 && tn("__host--paused", !t.active());
+}, inputs: { active: [1, "active"] }, decls: 19, vars: 0, consts: [[1, "pill"], [1, "card", "bk-first"], [1, "bars"], [1, "bar", "bar--b"], [1, "bar", "bar--t"], [1, "bar", "bar--p"], [1, "bk-ghost"], [1, "bk-lock"], [1, "card"]], template: function(n, t) {
+  n & 1 && (a(0, "div", 0)(1, "div", 1)(2, "div", 2), c(3, "span", 3)(4, "span", 4)(5, "span", 5), i(), a(6, "div", 6)(7, "mat-icon", 7), o(8, "lock"), i()()(), a(9, "div", 8)(10, "div", 2), c(11, "span", 3)(12, "span", 4)(13, "span", 5), i()(), a(14, "div", 8)(15, "div", 2), c(16, "span", 3)(17, "span", 4)(18, "span", 5), i()()());
+}, dependencies: [G, nn], styles: [`[_nghost-%COMP%] { display: block; }
+
+    .pill[_ngcontent-%COMP%] {
+      display: inline-flex;
+      align-items: center;
+      padding: 5px;
+      gap: 6px;
+      background: #E8E7E7;
+      border-radius: 11px;
+      overflow: visible;
+    }
+
+    .card[_ngcontent-%COMP%] {
+      width: 30px;
+      height: 30px;
+      border-radius: 6px;
+      background: #FDFDFD;
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
+      flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+      z-index: 1;
+    }
+
+    .bars[_ngcontent-%COMP%] {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 3px;
+    }
+
+    .bar[_ngcontent-%COMP%] {
+      display: block;
+      width: 20px;
+      height: 3px;
+      border-radius: 2px;
+      position: relative;
+      background: rgba(216, 215, 215, 0.4);
+      overflow: hidden;
+    }
+
+    .bar[_ngcontent-%COMP%]::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 2px;
+      opacity: 0.7;
+      transform-origin: left center;
+      will-change: transform;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-fill-mode: both;
+    }
+
+    .bar--b[_ngcontent-%COMP%]::after {
+      background: #82AEE8;
+      animation-name: _ngcontent-%COMP%_drift-cpu;
+      animation-duration: 16s;
+      animation-delay: var(--_d1, 0s);
+    }
+
+    .bar--t[_ngcontent-%COMP%]::after {
+      background: #7FABA5;
+      animation-name: _ngcontent-%COMP%_drift-ram;
+      animation-duration: 23s;
+      animation-delay: var(--_d2, 0s);
+    }
+
+    .bar--p[_ngcontent-%COMP%]::after {
+      background: #C6758A;
+      animation-name: _ngcontent-%COMP%_drift-disk;
+      animation-duration: 29s;
+      animation-delay: var(--_d3, 0s);
+    }
+
+    @keyframes _ngcontent-%COMP%_drift-cpu {
+      0%   { transform: scaleX(0.40); }
+      8%   { transform: scaleX(0.42); }
+      18%  { transform: scaleX(0.68); }
+      24%  { transform: scaleX(0.75); }
+      32%  { transform: scaleX(0.52); }
+      45%  { transform: scaleX(0.44); }
+      60%  { transform: scaleX(0.48); }
+      72%  { transform: scaleX(0.58); }
+      85%  { transform: scaleX(0.43); }
+      100% { transform: scaleX(0.40); }
+    }
+
+    @keyframes _ngcontent-%COMP%_drift-ram {
+      0%   { transform: scaleX(0.58); }
+      20%  { transform: scaleX(0.62); }
+      40%  { transform: scaleX(0.56); }
+      60%  { transform: scaleX(0.60); }
+      80%  { transform: scaleX(0.64); }
+      100% { transform: scaleX(0.58); }
+    }
+
+    @keyframes _ngcontent-%COMP%_drift-disk {
+      0%   { transform: scaleX(0.38); }
+      25%  { transform: scaleX(0.42); }
+      50%  { transform: scaleX(0.36); }
+      75%  { transform: scaleX(0.40); }
+      100% { transform: scaleX(0.38); }
+    }
+
+    .__host--paused[_nghost-%COMP%]   .bar[_ngcontent-%COMP%]::after {
+      animation-play-state: paused;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .bar[_ngcontent-%COMP%]::after {
+        animation: none;
+        transform: scaleX(0.5);
+      }
+    }
+
+    .bk-first[_ngcontent-%COMP%] {
+      overflow: visible;
+    }
+
+    .bk-first[_ngcontent-%COMP%]   .bars[_ngcontent-%COMP%] { z-index: 2; }
+
+    .bk-ghost[_ngcontent-%COMP%] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: #FDFDFD;
+      border-radius: 6px;
+      box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+      opacity: 0;
+      color: #fff;
+    }
+
+    .bk-lock[_ngcontent-%COMP%] {
+      opacity: 0;
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+      line-height: 16px;
+    }`], changeDetection: 0 });
+let rn = F;
+const Dn = () => [0, 1, 2];
+function En(d, e) {
+  d & 1 && (W(0, "div", 1)(1, "div", 2), an(2, "div", 3), J(), W(3, "div", 4), an(4, "div", 3), J(), W(5, "div", 5), an(6, "div", 3), J()());
+}
+const X = class X {
+  constructor() {
+    this.active = K(!0);
+    const e = w(L).nativeElement;
+    H(() => {
+      e.querySelectorAll(".card").forEach((n) => {
+        n.style.setProperty("--_sd", `-${(Math.random() * 4).toFixed(2)}s`);
+      });
+    });
+  }
+};
+X.ɵfac = function(n) {
+  return new (n || X)();
+}, X.ɵcmp = /* @__PURE__ */ j({ type: X, selectors: [["zw-mgmt-scaling-anim"]], hostVars: 2, hostBindings: function(n, t) {
+  n & 2 && tn("__host--paused", !t.active());
+}, inputs: { active: [1, "active"] }, decls: 3, vars: 1, consts: [[1, "pill"], [1, "card"], [1, "row", "row--b"], [1, "fill"], [1, "row", "row--t"], [1, "row", "row--p"]], template: function(n, t) {
+  n & 1 && (W(0, "div", 0), hn(1, En, 7, 0, "div", 1, gn), J()), n & 2 && (k(), un(_n(0, Dn)));
+}, styles: [`[_nghost-%COMP%] { display: block; }
+
+    .pill[_ngcontent-%COMP%] {
+      display: inline-flex;
+      align-items: center;
+      padding: 5px;
+      gap: 6px;
+      background: #E8E7E7;
+      border-radius: 11px;
+    }
+
+    .card[_ngcontent-%COMP%] {
+      width: 30px;
+      height: 30px;
+      border-radius: 6px;
+      background: #FDFDFD;
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
+      flex-shrink: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 0 5px;
+      gap: 3px;
+    }
+
+    .row[_ngcontent-%COMP%] {
+      width: 20px;
+      height: 3px;
+      border-radius: 2px;
+      background: #EEEEEE;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .fill[_ngcontent-%COMP%] {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      border-radius: 2px;
+    }
+
+    .row--b[_ngcontent-%COMP%]   .fill[_ngcontent-%COMP%] {
+      background: #82AEE3;
+      animation: _ngcontent-%COMP%_sc-blue 4s linear infinite;
+      animation-delay: var(--_sd, 0s);
+    }
+
+    .row--t[_ngcontent-%COMP%]   .fill[_ngcontent-%COMP%] {
+      background: #80ACA4;
+      animation: _ngcontent-%COMP%_sc-teal 4s linear infinite;
+      animation-delay: var(--_sd, 0s);
+    }
+
+    .row--p[_ngcontent-%COMP%]   .fill[_ngcontent-%COMP%] {
+      background: #C9768E;
+      animation: _ngcontent-%COMP%_sc-red 4s linear infinite;
+      animation-delay: var(--_sd, 0s);
+    }
+
+    @keyframes _ngcontent-%COMP%_sc-blue {
+      0%    { width: 20%; }
+      37.5% { width: 20%; }
+      40%   { width: 39%; }
+      42.5% { width: 46%; }
+      50%   { width: 46%; }
+      52.5% { width: 50%; }
+      55%   { width: 61%; }
+      57.5% { width: 76%; }
+      60%   { width: 80%; }
+      67.5% { width: 80%; }
+      70%   { width: 83%; }
+      72.5% { width: 91%; }
+      75%   { width: 94%; }
+      87.5% { width: 94%; }
+      90%   { width: 89%; }
+      92.5% { width: 74%; }
+      95%   { width: 40%; }
+      97.5% { width: 28%; }
+      100%  { width: 20%; }
+    }
+
+    @keyframes _ngcontent-%COMP%_sc-teal {
+      0%    { width: 15%; }
+      37.5% { width: 15%; }
+      40%   { width: 40%; }
+      42.5% { width: 47%; }
+      50%   { width: 47%; }
+      52.5% { width: 51%; }
+      55%   { width: 58%; }
+      57.5% { width: 62%; }
+      67.5% { width: 62%; }
+      70%   { width: 66%; }
+      72.5% { width: 73%; }
+      75%   { width: 86%; }
+      87.5% { width: 86%; }
+      90%   { width: 73%; }
+      92.5% { width: 47%; }
+      95%   { width: 22%; }
+      97.5% { width: 15%; }
+      100%  { width: 15%; }
+    }
+
+    @keyframes _ngcontent-%COMP%_sc-red {
+      0%    { width: 20%; }
+      37.5% { width: 20%; }
+      40%   { width: 28%; }
+      42.5% { width: 35%; }
+      45%   { width: 39%; }
+      50%   { width: 39%; }
+      52.5% { width: 43%; }
+      55%   { width: 54%; }
+      57.5% { width: 61%; }
+      60%   { width: 72%; }
+      67.5% { width: 72%; }
+      70%   { width: 83%; }
+      72.5% { width: 91%; }
+      75%   { width: 98%; }
+      87.5% { width: 98%; }
+      90%   { width: 61%; }
+      92.5% { width: 28%; }
+      95%   { width: 17%; }
+      100%  { width: 20%; }
+    }
+
+    .__host--paused[_nghost-%COMP%]   .fill[_ngcontent-%COMP%] {
+      animation-play-state: paused;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .fill[_ngcontent-%COMP%] { animation: none; width: 50%; }
+    }`], changeDetection: 0 });
+let cn = X;
+const A = class A {
+  constructor() {
+    this.isInView = Z(!1);
+    const e = w(L), n = w(Y);
+    H(() => {
+      const t = new IntersectionObserver(([r]) => this.isInView.set(r.isIntersecting), { rootMargin: "200px 0px" });
+      t.observe(e.nativeElement), n.onDestroy(() => t.disconnect());
+    });
+  }
+};
+A.ɵfac = function(n) {
+  return new (n || A)();
+}, A.ɵcmp = /* @__PURE__ */ j({ type: A, selectors: [["zw-managed-service-diagram"]], decls: 97, vars: 4, consts: [[1, "__outer"], [1, "__title"], [1, "__mgmt-grid"], [1, "__mgmt-row"], [1, "__mgmt-feature"], [1, "__feature-label"], [3, "active"], [1, "__categories"], [1, "__cat-row"], [1, "__cat-card"], [1, "__cat-title"], [1, "__cat-items"], [1, "__cat-item"], ["svgIcon", "postgresql", 1, "__svc-icon"], [1, "__svc-label"], ["svgIcon", "mariadb", 1, "__svc-icon"], ["svgIcon", "clickhouse", 1, "__svc-icon"], ["svgIcon", "elasticsearch", 1, "__svc-icon"], ["svgIcon", "meilisearch", 1, "__svc-icon"], ["svgIcon", "typesense", 1, "__svc-icon"], ["svgIcon", "kafka", 1, "__svc-icon"], ["svgIcon", "nats", 1, "__svc-icon"], ["svgIcon", "valkey", 1, "__svc-icon"], ["svgIcon", "keydb", 1, "__svc-icon"], ["svgIcon", "qdrant", 1, "__svc-icon"], [1, "__cat-items", "__cat-items--text-only"]], template: function(n, t) {
+  n & 1 && (a(0, "div", 0)(1, "span", 1), o(2, "Zerops management"), i(), a(3, "div", 2)(4, "div", 3)(5, "div", 4)(6, "span", 5), o(7, "Health monitoring"), i(), c(8, "zw-mgmt-health-anim", 6), i(), a(9, "div", 4)(10, "span", 5), o(11, "Failover"), i(), c(12, "zw-mgmt-failover-anim", 6), i()(), a(13, "div", 3)(14, "div", 4)(15, "span", 5), o(16, "Backup"), i(), c(17, "zw-mgmt-backup-anim", 6), i(), a(18, "div", 4)(19, "span", 5), o(20, "Scaling"), i(), c(21, "zw-mgmt-scaling-anim", 6), i()()(), a(22, "div", 7)(23, "div", 8)(24, "div", 9)(25, "span", 10), o(26, "Databases"), i(), a(27, "div", 11)(28, "div", 12), c(29, "mat-icon", 13), a(30, "span", 14), o(31, "PostgreSQL"), i()(), a(32, "div", 12), c(33, "mat-icon", 15), a(34, "span", 14), o(35, "MariaDB"), i()(), a(36, "div", 12), c(37, "mat-icon", 16), a(38, "span", 14), o(39, "ClickHouse"), i()()()(), a(40, "div", 9)(41, "span", 10), o(42, "Search"), i(), a(43, "div", 11)(44, "div", 12), c(45, "mat-icon", 17), a(46, "span", 14), o(47, "Elasticsearch"), i()(), a(48, "div", 12), c(49, "mat-icon", 18), a(50, "span", 14), o(51, "Meilisearch"), i()(), a(52, "div", 12), c(53, "mat-icon", 19), a(54, "span", 14), o(55, "Typesense"), i()()()(), a(56, "div", 9)(57, "span", 10), o(58, "Queue"), i(), a(59, "div", 11)(60, "div", 12), c(61, "mat-icon", 20), a(62, "span", 14), o(63, "Kafka"), i()(), a(64, "div", 12), c(65, "mat-icon", 21), a(66, "span", 14), o(67, "NATS"), i()()()()(), a(68, "div", 8)(69, "div", 9)(70, "span", 10), o(71, "Cache"), i(), a(72, "div", 11)(73, "div", 12), c(74, "mat-icon", 22), a(75, "span", 14), o(76, "Valkey"), i()(), a(77, "div", 12), c(78, "mat-icon", 23), a(79, "span", 14), o(80, "KeyDB"), i()()()(), a(81, "div", 9)(82, "span", 10), o(83, "Vector"), i(), a(84, "div", 11)(85, "div", 12), c(86, "mat-icon", 24), a(87, "span", 14), o(88, "Qdrant"), i()()()(), a(89, "div", 9)(90, "span", 10), o(91, "Storage"), i(), a(92, "div", 25)(93, "span", 14), o(94, "S3-compatible object"), i(), a(95, "span", 14), o(96, "Shared POSIX"), i()()()()()()), n & 2 && (k(8), Q("active", t.isInView()), k(4), Q("active", t.isInView()), k(5), Q("active", t.isInView()), k(4), Q("active", t.isInView()));
+}, dependencies: [
+  G,
+  nn,
+  on,
+  sn,
+  rn,
+  cn
+], styles: [`[_nghost-%COMP%] {
+  display: block;
+  contain: layout style;
+}
+
+.__outer[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 8px 8px;
+  gap: 48px;
+  width: 536px;
+  min-width: 536px;
+  border: 1px solid #C6C5C5;
+  border-radius: 24px;
+}
+@media (max-width: 599px) {
+  .__outer[_ngcontent-%COMP%] {
+    width: 100%;
+    min-width: 0;
+    gap: 32px;
+  }
+}
+
+.__title[_ngcontent-%COMP%] {
+  font-family: var(--font-family-brand);
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 10px;
+  text-align: center;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-feature-settings: "tnum" on, "lnum" on;
+  color: #254E4A;
+  font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0;
+  align-self: stretch;
+}
+
+.__mgmt-grid[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  width: 100%;
+  padding: 0 16px;
+}
+@media (max-width: 599px) {
+  .__mgmt-grid[_ngcontent-%COMP%] {
+    gap: 24px;
+    padding: 0 8px;
+  }
+}
+
+.__mgmt-row[_ngcontent-%COMP%] {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: 100%;
+}
+
+.__mgmt-feature[_ngcontent-%COMP%] {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  border-radius: 16px;
+}
+
+.__feature-label[_ngcontent-%COMP%] {
+  font-family: "Roboto Mono", "JetBrains Mono", ui-monospace, monospace;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 13px;
+  text-align: center;
+  letter-spacing: 0.02em;
+  color: #254E4A;
+  align-self: stretch;
+}
+
+.__categories[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 8px;
+  border-radius: 16px;
+  width: 100%;
+}
+@media (max-width: 599px) {
+  .__categories[_ngcontent-%COMP%] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 4px;
+  }
+}
+
+.__cat-row[_ngcontent-%COMP%] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  width: 100%;
+}
+@media (max-width: 599px) {
+  .__cat-row[_ngcontent-%COMP%] {
+    display: contents;
+  }
+}
+
+.__cat-card[_ngcontent-%COMP%] {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  background: #E8E7E7;
+  border-radius: 12px;
+  min-height: 94px;
+}
+@media (max-width: 599px) {
+  .__cat-card[_ngcontent-%COMP%] {
+    flex: 0 0 calc(50% - 4px);
+    min-width: calc(50% - 4px);
+    gap: 10px;
+    padding: 12px;
+    min-height: 0;
+  }
+}
+
+.__cat-title[_ngcontent-%COMP%] {
+  font-family: var(--font-family-brand);
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 10px;
+  text-align: center;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-feature-settings: "tnum" on, "lnum" on;
+  color: #254E4A;
+  font-variation-settings: "CRSV" 0, "SHRP" 100, "slnt" 0;
+  align-self: stretch;
+}
+
+.__cat-items[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.__cat-items--text-only[_ngcontent-%COMP%] {
+  gap: 4px;
+}
+
+.__cat-item[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.__svc-icon[_ngcontent-%COMP%] {
+  width: 16px !important;
+  height: 16px !important;
+  font-size: 16px !important;
+  line-height: 16px !important;
+  color: #254E4A;
+  flex-shrink: 0;
+}
+
+.__svc-label[_ngcontent-%COMP%] {
+  font-family: "Roboto Mono", "JetBrains Mono", ui-monospace, monospace;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 13px;
+  letter-spacing: 0.02em;
+  color: #254E4A;
+  white-space: nowrap;
+}`], changeDetection: 0 });
+let dn = A;
+const I = class I {
+};
+I.ɵfac = function(n) {
+  return new (n || I)();
+}, I.ɵcmp = /* @__PURE__ */ j({ type: I, selectors: [["zwe-managed-service-diagram-element"]], decls: 2, vars: 0, consts: [[1, "zerops"]], template: function(n, t) {
+  n & 1 && (a(0, "div", 0), c(1, "zw-managed-service-diagram"), i());
+}, dependencies: [dn], styles: ["[_nghost-%COMP%] { display: block; }"], changeDetection: 0 });
+let ln = I;
+Cn().then((d) => {
+  customElements.get("zerops-managed-service-diagram") || customElements.define("zerops-managed-service-diagram", Pn(ln, { injector: d.injector }));
+});