@zerops/web-components 0.3.0 → 0.4.0

package/containers-cards.js

@@ -0,0 +1,872 @@
+var ce = (n) => {
+  throw TypeError(n);
+};
+var Q = (n, e, t) => e.has(n) || ce("Cannot " + t);
+var y = (n, e, t) => (Q(n, e, "read from private field"), t ? t.call(n) : e.get(n)), v = (n, e, t) => e.has(n) ? ce("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t), w = (n, e, t, s) => (Q(n, e, "write to private field"), s ? s.call(n, t) : e.set(n, t), t), T = (n, e, t) => (Q(n, e, "access private method"), t);
+import { a7 as m, r as ae, bh as Te, aW as xe, aQ as Ae, aX as ye, au as Ie, aw as Y, ax as Ye, az as l, l as k, aM as re, p as we, n as Me, F as oe, bD as U, ar as Fe, as as Ve, at as r, a2 as u, av as i, al as A, bE as Be, bF as $e, bq as Ne, br as qe } from "./chunks/app-CrO8M3t-.js";
+import { i as je, r as Ce, b as Qe, f as z, c as K, s as Ue, d as Je, p as Ke, v as Xe, e as Ze, g as en, h as nn, w as tn, n as Re, j as sn, a as be } from "./chunks/index-RTjd7i0F.js";
+function an(n) {
+  return je(n) && "offsetHeight" in n && !("ownerSVGElement" in n);
+}
+const F = /* @__PURE__ */ new WeakMap();
+let V;
+const Oe = (n, e, t) => (s, a) => a && a[0] ? a[0][n + "Size"] : Qe(s) && "getBBox" in s ? s.getBBox()[e] : s[t], rn = /* @__PURE__ */ Oe("inline", "width", "offsetWidth"), on = /* @__PURE__ */ Oe("block", "height", "offsetHeight");
+function ln({ target: n, borderBoxSize: e }) {
+  F.get(n)?.forEach((t) => {
+    t(n, {
+      get width() {
+        return rn(n, e);
+      },
+      get height() {
+        return on(n, e);
+      }
+    });
+  });
+}
+function cn(n) {
+  n.forEach(ln);
+}
+function dn() {
+  typeof ResizeObserver > "u" || (V = new ResizeObserver(cn));
+}
+function pn(n, e) {
+  V || dn();
+  const t = Ce(n);
+  return t.forEach((s) => {
+    let a = F.get(s);
+    a || (a = /* @__PURE__ */ new Set(), F.set(s, a)), a.add(e), V?.observe(s);
+  }), () => {
+    t.forEach((s) => {
+      const a = F.get(s);
+      a?.delete(e), a?.size || V?.unobserve(s);
+    });
+  };
+}
+const B = /* @__PURE__ */ new Set();
+let C;
+function fn() {
+  C = () => {
+    const n = {
+      get width() {
+        return window.innerWidth;
+      },
+      get height() {
+        return window.innerHeight;
+      }
+    };
+    B.forEach((e) => e(n));
+  }, window.addEventListener("resize", C);
+}
+function gn(n) {
+  return B.add(n), C || fn(), () => {
+    B.delete(n), !B.size && typeof C == "function" && (window.removeEventListener("resize", C), C = void 0);
+  };
+}
+function un(n, e) {
+  return typeof n == "function" ? gn(n) : pn(n, e);
+}
+function Pe(n, e) {
+  let t;
+  const s = () => {
+    const { currentTime: a } = e, c = (a === null ? 0 : a.value) / 100;
+    t !== c && n(c), t = c;
+  };
+  return z.preUpdate(s, !0), () => K(s);
+}
+function $(n) {
+  return typeof window > "u" ? !1 : n ? Ue() : Je();
+}
+const _n = 50, de = () => ({
+  current: 0,
+  offset: [],
+  progress: 0,
+  scrollLength: 0,
+  targetOffset: 0,
+  targetLength: 0,
+  containerLength: 0,
+  velocity: 0
+}), hn = () => ({
+  time: 0,
+  x: de(),
+  y: de()
+}), mn = {
+  x: {
+    length: "Width",
+    position: "Left"
+  },
+  y: {
+    length: "Height",
+    position: "Top"
+  }
+};
+function pe(n, e, t, s) {
+  const a = t[e], { length: o, position: c } = mn[e], f = a.current, g = t.time;
+  a.current = Math.abs(n[`scroll${c}`]), a.scrollLength = n[`scroll${o}`] - n[`client${o}`], a.offset.length = 0, a.offset[0] = 0, a.offset[1] = a.scrollLength, a.progress = Ke(0, a.scrollLength, a.current);
+  const d = s - g;
+  a.velocity = d > _n ? 0 : Xe(a.current - f, d);
+}
+function vn(n, e, t) {
+  pe(n, "x", e, t), pe(n, "y", e, t), e.time = t;
+}
+function xn(n, e) {
+  const t = { x: 0, y: 0 };
+  let s = n;
+  for (; s && s !== e; )
+    if (an(s))
+      t.x += s.offsetLeft, t.y += s.offsetTop, s = s.offsetParent;
+    else if (s.tagName === "svg") {
+      const a = s.getBoundingClientRect();
+      s = s.parentElement;
+      const o = s.getBoundingClientRect();
+      t.x += a.left - o.left, t.y += a.top - o.top;
+    } else if (s instanceof SVGGraphicsElement) {
+      const { x: a, y: o } = s.getBBox();
+      t.x += a, t.y += o;
+      let c = null, f = s.parentNode;
+      for (; !c; )
+        f.tagName === "svg" && (c = f), f = s.parentNode;
+      s = c;
+    } else
+      break;
+  return t;
+}
+const X = {
+  start: 0,
+  center: 0.5,
+  end: 1
+};
+function fe(n, e, t = 0) {
+  let s = 0;
+  if (n in X && (n = X[n]), typeof n == "string") {
+    const a = parseFloat(n);
+    n.endsWith("px") ? s = a : n.endsWith("%") ? n = a / 100 : n.endsWith("vw") ? s = a / 100 * document.documentElement.clientWidth : n.endsWith("vh") ? s = a / 100 * document.documentElement.clientHeight : n = a;
+  }
+  return typeof n == "number" && (s = e * n), t + s;
+}
+const yn = [0, 0];
+function wn(n, e, t, s) {
+  let a = Array.isArray(n) ? n : yn, o = 0, c = 0;
+  return typeof n == "number" ? a = [n, n] : typeof n == "string" && (n = n.trim(), n.includes(" ") ? a = n.split(" ") : a = [n, X[n] ? n : "0"]), o = fe(a[0], t, s), c = fe(a[1], e), o - c;
+}
+const E = {
+  Enter: [
+    [0, 1],
+    [1, 1]
+  ],
+  Exit: [
+    [0, 0],
+    [1, 0]
+  ],
+  Any: [
+    [1, 0],
+    [0, 1]
+  ],
+  All: [
+    [0, 0],
+    [1, 1]
+  ]
+}, Mn = { x: 0, y: 0 };
+function Cn(n) {
+  return "getBBox" in n && n.tagName !== "svg" ? n.getBBox() : { width: n.clientWidth, height: n.clientHeight };
+}
+function Rn(n, e, t) {
+  const { offset: s = E.All } = t, { target: a = n, axis: o = "y" } = t, c = o === "y" ? "height" : "width", f = a !== n ? xn(a, n) : Mn, g = a === n ? { width: n.scrollWidth, height: n.scrollHeight } : Cn(a), d = {
+    width: n.clientWidth,
+    height: n.clientHeight
+  };
+  e[o].offset.length = 0;
+  let p = !e[o].interpolate;
+  const h = s.length;
+  for (let _ = 0; _ < h; _++) {
+    const x = wn(s[_], d[c], g[c], f[o]);
+    !p && x !== e[o].interpolatorOffsets[_] && (p = !0), e[o].offset[_] = x;
+  }
+  p && (e[o].interpolate = Ze(e[o].offset, en(s), { clamp: !1 }), e[o].interpolatorOffsets = [...e[o].offset]), e[o].progress = nn(0, 1, e[o].interpolate(e[o].current));
+}
+function bn(n, e = n, t) {
+  if (t.x.targetOffset = 0, t.y.targetOffset = 0, e !== n) {
+    let s = e;
+    for (; s && s !== n; )
+      t.x.targetOffset += s.offsetLeft, t.y.targetOffset += s.offsetTop, s = s.offsetParent;
+  }
+  t.x.targetLength = e === n ? e.scrollWidth : e.clientWidth, t.y.targetLength = e === n ? e.scrollHeight : e.clientHeight, t.x.containerLength = n.clientWidth, t.y.containerLength = n.clientHeight, process.env.NODE_ENV !== "production" && n && e && e !== n && tn(getComputedStyle(n).position !== "static", "Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.");
+}
+function On(n, e, t, s = {}) {
+  return {
+    measure: (a) => {
+      bn(n, s.target, t), vn(n, t, a), (s.offset || s.target) && Rn(n, t, s);
+    },
+    notify: () => e(t)
+  };
+}
+const M = /* @__PURE__ */ new WeakMap(), ge = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), ue = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), _e = (n) => n === document.scrollingElement ? window : n;
+function Se(n, { container: e = document.scrollingElement, trackContentSize: t = !1, ...s } = {}) {
+  if (!e)
+    return Re;
+  let a = J.get(e);
+  a || (a = /* @__PURE__ */ new Set(), J.set(e, a));
+  const o = hn(), c = On(e, n, o, s);
+  if (a.add(c), !M.has(e)) {
+    const g = () => {
+      for (const _ of a)
+        _.measure(sn.timestamp);
+      z.preUpdate(d);
+    }, d = () => {
+      for (const _ of a)
+        _.notify();
+    }, p = () => z.read(g);
+    M.set(e, p);
+    const h = _e(e);
+    window.addEventListener("resize", p), e !== document.documentElement && ge.set(e, un(e, p)), h.addEventListener("scroll", p), p();
+  }
+  if (t && !I.has(e)) {
+    const g = M.get(e), d = {
+      width: e.scrollWidth,
+      height: e.scrollHeight
+    };
+    ue.set(e, d);
+    const p = () => {
+      const _ = e.scrollWidth, x = e.scrollHeight;
+      (d.width !== _ || d.height !== x) && (g(), d.width = _, d.height = x);
+    }, h = z.read(p, !0);
+    I.set(e, h);
+  }
+  const f = M.get(e);
+  return z.read(f, !1, !0), () => {
+    K(f);
+    const g = J.get(e);
+    if (!g || (g.delete(c), g.size))
+      return;
+    const d = M.get(e);
+    M.delete(e), d && (_e(e).removeEventListener("scroll", d), ge.get(e)?.(), window.removeEventListener("resize", d));
+    const p = I.get(e);
+    p && (K(p), I.delete(e)), ue.delete(e);
+  };
+}
+const Pn = [
+  [E.Enter, "entry"],
+  [E.Exit, "exit"],
+  [E.Any, "cover"],
+  [E.All, "contain"]
+], he = {
+  start: 0,
+  end: 1
+};
+function Sn(n) {
+  const e = n.trim().split(/\s+/);
+  if (e.length !== 2)
+    return;
+  const t = he[e[0]], s = he[e[1]];
+  if (!(t === void 0 || s === void 0))
+    return [t, s];
+}
+function zn(n) {
+  if (n.length !== 2)
+    return;
+  const e = [];
+  for (const t of n)
+    if (Array.isArray(t))
+      e.push(t);
+    else if (typeof t == "string") {
+      const s = Sn(t);
+      if (!s)
+        return;
+      e.push(s);
+    } else
+      return;
+  return e;
+}
+function En(n, e) {
+  const t = zn(n);
+  if (!t)
+    return !1;
+  for (let s = 0; s < 2; s++) {
+    const a = t[s], o = e[s];
+    if (a[0] !== o[0] || a[1] !== o[1])
+      return !1;
+  }
+  return !0;
+}
+function ze(n) {
+  if (!n)
+    return { rangeStart: "contain 0%", rangeEnd: "contain 100%" };
+  for (const [e, t] of Pn)
+    if (En(n, e))
+      return { rangeStart: `${t} 0%`, rangeEnd: `${t} 100%` };
+}
+const me = /* @__PURE__ */ new Map();
+function ve(n) {
+  const e = { value: 0 }, t = Se((s) => {
+    e.value = s[n.axis].progress * 100;
+  }, n);
+  return { currentTime: e, cancel: t };
+}
+function Ee({ source: n, container: e, ...t }) {
+  const { axis: s } = t;
+  n && (e = n);
+  let a = me.get(e);
+  a || (a = /* @__PURE__ */ new Map(), me.set(e, a));
+  const o = t.target ?? "self";
+  let c = a.get(o);
+  c || (c = {}, a.set(o, c));
+  const f = s + (t.offset ?? []).join(",");
+  return c[f] || (t.target && $(t.target) ? ze(t.offset) ? c[f] = new ViewTimeline({
+    subject: t.target,
+    axis: s
+  }) : c[f] = ve({
+    container: e,
+    ...t
+  }) : $() ? c[f] = new ScrollTimeline({
+    source: e,
+    axis: s
+  }) : c[f] = ve({
+    container: e,
+    ...t
+  })), c[f];
+}
+function kn(n, e) {
+  const t = Ee(e), s = e.target ? ze(e.offset) : void 0, a = e.target ? $(e.target) && !!s : $();
+  return n.attachTimeline({
+    timeline: a ? t : void 0,
+    ...s && a && {
+      rangeStart: s.rangeStart,
+      rangeEnd: s.rangeEnd
+    },
+    observe: (o) => (o.pause(), Pe((c) => {
+      o.time = o.iterationDuration * c;
+    }, t))
+  });
+}
+function Dn(n) {
+  return n.length === 2;
+}
+function Gn(n, e) {
+  return Dn(n) ? Se((t) => {
+    n(t[e.axis].progress, t);
+  }, e) : Pe(n, Ee(e));
+}
+function Hn(n, { axis: e = "y", container: t = document.scrollingElement, ...s } = {}) {
+  if (!t)
+    return Re;
+  const a = { axis: e, container: t, ...s };
+  return typeof n == "function" ? Gn(n, a) : kn(n, a);
+}
+const Ln = {
+  some: 0,
+  all: 1
+};
+function ke(n, e, { root: t, margin: s, amount: a = "some" } = {}) {
+  const o = Ce(n), c = /* @__PURE__ */ new WeakMap(), f = (d) => {
+    d.forEach((p) => {
+      const h = c.get(p.target);
+      if (p.isIntersecting !== !!h)
+        if (p.isIntersecting) {
+          const _ = e(p.target, p);
+          typeof _ == "function" ? c.set(p.target, _) : g.unobserve(p.target);
+        } else typeof h == "function" && (h(p), c.delete(p.target));
+    });
+  }, g = new IntersectionObserver(f, {
+    root: t,
+    rootMargin: s,
+    threshold: typeof a == "number" ? a : Ln[a]
+  });
+  return o.forEach((d) => g.observe(d)), () => g.disconnect();
+}
+function Wn(n, e) {
+  n & 1 && (xe(0, "span", 5), l(1, "zerops"), ye());
+}
+const R = class R {
+  constructor() {
+    this.mode = m("mark");
+  }
+};
+R.ɵfac = function(t) {
+  return new (t || R)();
+}, R.ɵcmp = /* @__PURE__ */ ae({ type: R, selectors: [["zui-logo"]], inputs: { mode: [1, "mode"] }, decls: 6, vars: 1, consts: [["xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 42.27 50.48", 1, "__svg"], ["d", "M20.19.7L3 7.27A4 4 0 0 0 .46 11v16.54L8.36 23v-9.3L21.6 8.62V.44a4 4 0 0 0-1.41.26z", "transform", "translate(-.46 -.44)", 1, "__main"], ["d", "M8.5 37.74l13.1-7.55v-9.12L1.36 32.74a1.82 1.82 0 0 0-.9 1.56v6.11A4 4 0 0 0 3 44.1l17.19 6.57a4 4 0 0 0 1.41.26v-8.18z", "transform", "translate(-.46 -.44)", 1, "__main"], ["d", "M41.9 18.47a1.67 1.67 0 0 0 .84-1.47v-6a4 4 0 0 0-2.54-3.73L23 .7a4 4 0 0 0-1.4-.26v8.18l13 5-13 7.49v9.12z", "transform", "translate(-.46 -.44)", 1, "__secondary"], ["d", "M23 50.67l17.2-6.57a4 4 0 0 0 2.54-3.69V23.7l-7.9 4.56v9.43L21.6 42.75v8.18a4 4 0 0 0 1.4-.26z", "transform", "translate(-.46 -.44)", 1, "__secondary"], [1, "__wordmark"]], template: function(t, s) {
+  t & 1 && (Te(), xe(0, "svg", 0), Ae(1, "path", 1)(2, "path", 2)(3, "path", 3)(4, "path", 4), ye(), Ie(5, Wn, 2, 0, "span", 5)), t & 2 && (Y(5), Ye(s.mode() === "full" ? 5 : -1));
+}, styles: [`[_nghost-%COMP%] {
+      display: inline-flex;
+      align-items: center;
+      gap: 4.27px;
+    }
+
+    .__svg[_ngcontent-%COMP%] {
+      width: 100%;
+      height: 100%;
+    }
+
+    [_nghost-%COMP%]:has(.__wordmark)   .__svg[_ngcontent-%COMP%] {
+      width: auto;
+    }
+
+    .__main[_ngcontent-%COMP%] {
+      fill: var(--mat-sys-primary);
+    }
+
+    .__secondary[_ngcontent-%COMP%] {
+      fill: var(--mat-sys-primary);
+    }
+
+    .__wordmark[_ngcontent-%COMP%] {
+      font-family: var(--font-family-brand);
+      font-weight: 600;
+      font-size: 17.32px;
+      line-height: 22px;
+      color: var(--mat-sys-on-surface);
+    }`], changeDetection: 0 });
+let Z = R;
+var D, G, N, De;
+const b = class b {
+  constructor() {
+    v(this, N);
+    v(this, D);
+    v(this, G);
+    this.scrollRevealY = m(0), this.scrollRevealDelay = m(0), this.scrollRevealDuration = m(0.4), this.scrollRevealMargin = m("-80px"), w(this, D, k(Me)), w(this, G, k(oe)), re(() => T(this, N, De).call(this));
+  }
+};
+D = new WeakMap(), G = new WeakMap(), N = new WeakSet(), De = function() {
+  const e = y(this, D).nativeElement, t = this.scrollRevealY();
+  t && (e.style.transform = `translateY(${t}px)`, e.style.willChange = "transform, opacity");
+  let s = !1;
+  const a = ke(e, () => {
+    if (s)
+      return;
+    s = !0;
+    const o = {
+      opacity: [0, 1]
+    };
+    t && (o.transform = [`translateY(${t}px)`, "translateY(0)"]), be(e, o, {
+      duration: this.scrollRevealDuration(),
+      delay: this.scrollRevealDelay(),
+      ease: [0.4, 0, 0.6, 1]
+    }).then(() => {
+      e.style.willChange = "auto";
+    }).catch(() => {
+    }), queueMicrotask(() => a());
+  }, { margin: this.scrollRevealMargin() });
+  y(this, G).onDestroy(() => a());
+}, b.ɵfac = function(t) {
+  return new (t || b)();
+}, b.ɵdir = /* @__PURE__ */ we({ type: b, selectors: [["", "zuiScrollReveal", ""]], hostAttrs: [2, "opacity", "0", "will-change", "opacity"], inputs: { scrollRevealY: [1, "scrollRevealY"], scrollRevealDelay: [1, "scrollRevealDelay"], scrollRevealDuration: [1, "scrollRevealDuration"], scrollRevealMargin: [1, "scrollRevealMargin"] } });
+let ee = b;
+var H, L, q, Ge;
+const O = class O {
+  constructor() {
+    v(this, q);
+    v(this, H);
+    v(this, L);
+    this.scrollRevealGroupY = m(0), this.scrollRevealGroupStagger = m(0.025), this.scrollRevealGroupDelay = m(0), this.scrollRevealGroupDuration = m(0.3), this.scrollRevealGroupMargin = m("-64px"), this.scrollRevealGroupSelector = m(":scope > *"), w(this, H, k(Me)), w(this, L, k(oe)), re(() => T(this, q, Ge).call(this));
+  }
+};
+H = new WeakMap(), L = new WeakMap(), q = new WeakSet(), Ge = function() {
+  const e = y(this, H).nativeElement, t = this.scrollRevealGroupY(), s = this.scrollRevealGroupSelector();
+  let a = !1;
+  const o = (d) => {
+    d.dataset.srHidden || (d.style.opacity = "0", t && (d.style.transform = `translateY(${t}px)`), d.style.willChange = "opacity", d.dataset.srHidden = "1");
+  };
+  e.querySelectorAll(s).forEach((d) => o(d));
+  const c = new MutationObserver(() => {
+    if (a) {
+      c.disconnect();
+      return;
+    }
+    e.querySelectorAll(s).forEach((d) => o(d));
+  });
+  c.observe(e, { childList: !0 });
+  const f = () => {
+    if (a)
+      return;
+    const d = Array.from(e.querySelectorAll(s));
+    if (d.length === 0)
+      return;
+    a = !0, c.disconnect();
+    const p = this.scrollRevealGroupStagger(), h = this.scrollRevealGroupDelay(), _ = this.scrollRevealGroupDuration(), x = [0.4, 0, 0.6, 1];
+    d.forEach((ie, Le) => {
+      const We = h + Le * p, le = { opacity: [0, 1] };
+      t && (le.transform = [`translateY(${t}px)`, "translateY(0)"]), be(ie, le, { duration: _, delay: We, ease: x }).then(() => {
+        ie.style.willChange = "auto";
+      }).catch(() => {
+      });
+    }), queueMicrotask(() => g());
+  }, g = ke(e, () => (f(), () => {
+  }), { margin: this.scrollRevealGroupMargin() });
+  y(this, L).onDestroy(() => {
+    g(), c.disconnect();
+  });
+}, O.ɵfac = function(t) {
+  return new (t || O)();
+}, O.ɵdir = /* @__PURE__ */ we({ type: O, selectors: [["", "zuiScrollRevealGroup", ""]], inputs: { scrollRevealGroupY: [1, "scrollRevealGroupY"], scrollRevealGroupStagger: [1, "scrollRevealGroupStagger"], scrollRevealGroupDelay: [1, "scrollRevealGroupDelay"], scrollRevealGroupDuration: [1, "scrollRevealGroupDuration"], scrollRevealGroupMargin: [1, "scrollRevealGroupMargin"], scrollRevealGroupSelector: [1, "scrollRevealGroupSelector"] } });
+let ne = O;
+const Tn = ["cardsStage"], An = ["appCard"], In = ["vmCard"];
+var W, j, He;
+const P = class P {
+  constructor() {
+    v(this, j);
+    v(this, W);
+    w(this, W, k(oe)), this.cardsStage = U("cardsStage"), this.appCard = U("appCard"), this.vmCard = U("vmCard"), re(() => T(this, j, He).call(this));
+  }
+};
+W = new WeakMap(), j = new WeakSet(), He = function() {
+  const e = this.cardsStage()?.nativeElement, t = this.appCard()?.nativeElement, s = this.vmCard()?.nativeElement;
+  if (!e || !t || !s)
+    return;
+  const a = window.matchMedia("(min-width: 1100px)");
+  let o = null;
+  const c = () => {
+    o = Hn((d) => {
+      const p = (d - 0.5) * 2;
+      t.style.translate = `0 ${p * -14}px`, s.style.translate = `0 ${p * 14}px`;
+    }, { target: e, offset: ["start end", "end start"] });
+  }, f = () => {
+    o?.(), o = null, t.style.translate = "", s.style.translate = "";
+  }, g = () => a.matches ? c() : f();
+  g(), a.addEventListener("change", g), y(this, W).onDestroy(() => {
+    f(), a.removeEventListener("change", g);
+  });
+}, P.ɵfac = function(t) {
+  return new (t || P)();
+}, P.ɵcmp = /* @__PURE__ */ ae({ type: P, selectors: [["zw-containers-cards"]], viewQuery: function(t, s) {
+  t & 1 && Be(s.cardsStage, Tn, 5)(s.appCard, An, 5)(s.vmCard, In, 5), t & 2 && $e(3);
+}, decls: 153, vars: 13, consts: [["cardsStage", ""], ["appCard", ""], ["vmCard", ""], ["zuiScrollRevealGroup", "", "scrollRevealGroupMargin", "-80px", "scrollRevealGroupSelector", ".__card", 1, "__cards-stage", 3, "scrollRevealGroupY", "scrollRevealGroupStagger", "scrollRevealGroupDelay", "scrollRevealGroupDuration"], [1, "__glow", "__glow--teal"], [1, "__glow", "__glow--orange"], ["zuiScrollReveal", "", "scrollRevealMargin", "-80px", 1, "__vline", "__vline--1", 3, "scrollRevealY", "scrollRevealDuration", "scrollRevealDelay"], [1, "__vline-rule"], ["zuiScrollReveal", "", "scrollRevealMargin", "-80px", 1, "__vline", "__vline--2", 3, "scrollRevealY", "scrollRevealDuration", "scrollRevealDelay"], ["zuiScrollReveal", "", "scrollRevealMargin", "-80px", 1, "__vline", "__vline--3", 3, "scrollRevealY", "scrollRevealDuration", "scrollRevealDelay"], [1, "__card", "__card--app"], [1, "__card-tech"], ["svgIcon", "docker", 1, "__card-tech-icon"], ["svgIcon", "oci", 1, "__card-tech-icon"], [1, "__card-title"], [1, "__features"], [1, "__feature", "__feature--yes"], [1, "__feature-dot"], [1, "__feature", "__feature--no"], [1, "__card", "__card--system"], [1, "__card-top"], [1, "__card-zerops"], [1, "__card-zerops-mark"], [1, "__card-zerops-name"], [1, "__card-subtitle"], [1, "__terminal"], [1, "__terminal-file"], [1, "__example"], [1, "__example-label"], [1, "__code"], [1, "__yk"], [1, "__ci"], [1, "__ci2"], [1, "__card", "__card--vm"], ["svgIcon", "proxmox", 1, "__card-tech-icon"], ["svgIcon", "linux", 1, "__card-tech-icon"]], template: function(t, s) {
+  t & 1 && (r(0, "div", 3, 0), u(2, "div", 4)(3, "div", 5), r(4, "div", 6), u(5, "div", 7), i(), r(6, "div", 8), u(7, "div", 7), i(), r(8, "div", 9), u(9, "div", 7), i(), r(10, "div", 10, 1)(12, "div", 11), u(13, "mat-icon", 12)(14, "mat-icon", 13), i(), r(15, "span", 14), l(16, "App Containers"), i(), r(17, "div", 15)(18, "div", 16), u(19, "span", 17), r(20, "span"), l(21, "Fast startup"), i()(), r(22, "div", 16), u(23, "span", 17), r(24, "span"), l(25, "High density"), i()(), r(26, "div", 18), u(27, "span", 17), r(28, "span"), l(29, "Install packages"), i()(), r(30, "div", 18), u(31, "span", 17), r(32, "span"), l(33, "Multiple processes"), i()(), r(34, "div", 18), u(35, "span", 17), r(36, "span"), l(37, "SSH access"), i()()()(), r(38, "div", 19)(39, "div", 20)(40, "div", 21), u(41, "zui-logo", 22), r(42, "span", 23), l(43, "Zerops"), i()(), r(44, "span", 14), l(45, "System Containers"), i(), r(46, "span", 24), l(47, "Powered by Incus"), i(), r(48, "div", 15)(49, "div", 16), u(50, "span", 17), r(51, "span"), l(52, "Fast startup"), i()(), r(53, "div", 16), u(54, "span", 17), r(55, "span"), l(56, "High density"), i()(), r(57, "div", 16), u(58, "span", 17), r(59, "span"), l(60, "Install packages"), i()(), r(61, "div", 16), u(62, "span", 17), r(63, "span"), l(64, "Multiple processes"), i()(), r(65, "div", 16), u(66, "span", 17), r(67, "span"), l(68, "SSH access"), i()()()(), r(69, "div", 25)(70, "span", 26), l(71, "zerops.yaml"), i(), r(72, "div", 27)(73, "span", 28), l(74, "Install any system package"), i(), r(75, "div", 29)(76, "div")(77, "span", 30), l(78, "prepareCommands"), i(), l(79, ":"), i(), r(80, "div", 31), l(81, "- sudo apt-get i -y ffmpeg"), i()()(), r(82, "div", 27)(83, "span", 28), l(84, "Run multiple processes"), i(), r(85, "div", 29)(86, "div")(87, "span", 30), l(88, "startCommands"), i(), l(89, ":"), i(), r(90, "div", 31), l(91, "- "), r(92, "span", 30), l(93, "name"), i(), l(94, ": api"), i(), r(95, "div", 32)(96, "span", 30), l(97, "command"), i(), l(98, ": npm start"), i(), r(99, "div", 31), l(100, "- "), r(101, "span", 30), l(102, "name"), i(), l(103, ": worker"), i(), r(104, "div", 32)(105, "span", 30), l(106, "command"), i(), l(107, ": npm run worker"), i()()(), r(108, "div", 27)(109, "span", 28), l(110, "Schedule recurring tasks"), i(), r(111, "div", 29)(112, "div")(113, "span", 30), l(114, "crontab"), i(), l(115, ":"), i(), r(116, "div", 31), l(117, "- "), r(118, "span", 30), l(119, "command"), i(), l(120, ": rm -rf /tmp/*"), i(), r(121, "div", 32)(122, "span", 30), l(123, "timing"), i(), l(124, ": 0 0 * * *"), i()()()()(), r(125, "div", 33, 2)(127, "div", 11), u(128, "mat-icon", 34)(129, "mat-icon", 35), i(), r(130, "span", 14), l(131, "Full VMs"), i(), r(132, "div", 15)(133, "div", 18), u(134, "span", 17), r(135, "span"), l(136, "Fast startup"), i()(), r(137, "div", 18), u(138, "span", 17), r(139, "span"), l(140, "High density"), i()(), r(141, "div", 16), u(142, "span", 17), r(143, "span"), l(144, "Install packages"), i()(), r(145, "div", 16), u(146, "span", 17), r(147, "span"), l(148, "Multiple processes"), i()(), r(149, "div", 16), u(150, "span", 17), r(151, "span"), l(152, "SSH access"), i()()()()()), t & 2 && (A("scrollRevealGroupY", 12)("scrollRevealGroupStagger", 0.06)("scrollRevealGroupDelay", 0.1)("scrollRevealGroupDuration", 0.45), Y(4), A("scrollRevealY", 0)("scrollRevealDuration", 0.6)("scrollRevealDelay", 0.15), Y(2), A("scrollRevealY", 0)("scrollRevealDuration", 0.6)("scrollRevealDelay", 0.25), Y(2), A("scrollRevealY", 0)("scrollRevealDuration", 0.6)("scrollRevealDelay", 0.35));
+}, dependencies: [Fe, Ve, Z, ee, ne], styles: [`[_nghost-%COMP%] {
+  display: block;
+  width: 100%;
+}
+
+.__cards-stage[_ngcontent-%COMP%] {
+  position: relative;
+  min-height: 440px;
+  overflow: visible;
+}
+@media (max-width: 649px) {
+  .__cards-stage[_ngcontent-%COMP%] {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    min-height: auto;
+  }
+}
+@media (min-width: 650px) {
+  .__cards-stage[_ngcontent-%COMP%] {
+    width: 580px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.__card[_ngcontent-%COMP%] {
+  background: var(--alt-card-bg);
+  border-radius: 10px;
+  padding: 16px;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  border: 1px solid light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+}
+@media (max-width: 649px) {
+  .__card[_ngcontent-%COMP%] {
+    position: static;
+  }
+}
+
+.__card--app[_ngcontent-%COMP%], 
+.__card--vm[_ngcontent-%COMP%] {
+  width: 185px;
+  background: color-mix(in srgb, var(--alt-card-bg) 88%, transparent);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
+  backdrop-filter: blur(12px);
+  will-change: transform;
+}
+@media (max-width: 649px) {
+  .__card--app[_ngcontent-%COMP%], 
+   .__card--vm[_ngcontent-%COMP%] {
+    width: auto;
+  }
+}
+
+.__card--app[_ngcontent-%COMP%] {
+  left: 0;
+  top: 55px;
+  z-index: 1;
+}
+@media (max-width: 649px) {
+  .__card--app[_ngcontent-%COMP%] {
+    left: auto;
+    top: auto;
+  }
+}
+
+.__card--vm[_ngcontent-%COMP%] {
+  left: 395px;
+  top: 70px;
+  z-index: 1;
+  padding-left: 24px;
+}
+@media (max-width: 649px) {
+  .__card--vm[_ngcontent-%COMP%] {
+    left: auto;
+    top: auto;
+  }
+}
+
+.__card--system[_ngcontent-%COMP%] {
+  width: 240px;
+  left: 165px;
+  top: 0;
+  z-index: 3;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid light-dark(rgba(21, 215, 196, 0.15), rgba(21, 215, 196, 0.12));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04), 0 12px 28px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(21, 215, 196, 0.06);
+}
+@media (max-width: 649px) {
+  .__card--system[_ngcontent-%COMP%] {
+    width: auto;
+    left: auto;
+    top: auto;
+    grid-column: 1/-1;
+    order: -1;
+  }
+}
+
+.__card-title[_ngcontent-%COMP%] {
+  font-family: var(--font-family-brand);
+  font-weight: 500;
+  font-size: 10px;
+  line-height: 12px;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--mat-sys-on-surface);
+  font-variation-settings: "CRSV" 0, "SHRP" 0, "slnt" 0;
+  margin: 0;
+}
+
+.__card--system[_ngcontent-%COMP%]   .__card-title[_ngcontent-%COMP%] {
+  color: var(--alt-card-accent);
+}
+
+.__card-tech[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-bottom: -4px;
+}
+
+.__card-tech-icon[_ngcontent-%COMP%] {
+  width: 18px !important;
+  height: 18px !important;
+  font-size: 18px !important;
+  line-height: 18px !important;
+  opacity: 0.35;
+}
+
+.__card-zerops[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.__card-zerops-mark[_ngcontent-%COMP%] {
+  height: 16px;
+  width: auto;
+}
+
+.__card-zerops-name[_ngcontent-%COMP%] {
+  font-family: var(--font-family-brand);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--mat-sys-on-surface);
+  letter-spacing: 0.02em;
+  font-variation-settings: "CRSV" 0, "SHRP" 100;
+}
+
+.__card-subtitle[_ngcontent-%COMP%] {
+  font-family: var(--font-family-brand);
+  font-size: 8px;
+  font-weight: 420;
+  letter-spacing: 0.04em;
+  color: var(--mat-sys-on-surface);
+  opacity: 0.3;
+  font-variation-settings: "CRSV" 0, "SHRP" 0;
+  margin-top: -10px;
+}
+
+.__card-top[_ngcontent-%COMP%] {
+  padding: 16px 16px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.__features[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.__feature[_ngcontent-%COMP%] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--font-family-brand);
+  font-size: 11.5px;
+  font-weight: 380;
+  line-height: 1;
+  letter-spacing: 0.01em;
+  color: var(--mat-sys-on-surface);
+  font-variation-settings: "CRSV" 0, "SHRP" 0;
+}
+
+.__feature-dot[_ngcontent-%COMP%] {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.__feature--yes[_ngcontent-%COMP%]   .__feature-dot[_ngcontent-%COMP%] {
+  background: var(--alt-card-accent);
+  box-shadow: 0 0 6px rgba(21, 215, 196, 0.4);
+}
+
+.__feature--no[_ngcontent-%COMP%] {
+  opacity: 0.3;
+}
+
+.__feature--no[_ngcontent-%COMP%]   .__feature-dot[_ngcontent-%COMP%] {
+  background: transparent;
+  border: 1px solid currentColor;
+}
+
+.__terminal[_ngcontent-%COMP%] {
+  background: var(--code-block-bg);
+  padding: 12px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.__terminal-file[_ngcontent-%COMP%] {
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 9px;
+  letter-spacing: 0.02em;
+  color: rgba(255, 255, 255, 0.25);
+  padding-bottom: 2px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.__example[_ngcontent-%COMP%] {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.__example-label[_ngcontent-%COMP%] {
+  font-family: var(--font-family-brand);
+  font-size: 9px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 1.2;
+  font-variation-settings: "CRSV" 0, "SHRP" 100;
+}
+
+.__code[_ngcontent-%COMP%] {
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 10px;
+  line-height: 15px;
+  color: #c8c8cd;
+}
+
+.__ci[_ngcontent-%COMP%] {
+  padding-left: 12px;
+}
+
+.__ci2[_ngcontent-%COMP%] {
+  padding-left: 24px;
+}
+
+.__yk[_ngcontent-%COMP%] {
+  color: #6ecab8;
+}
+
+.__glow[_ngcontent-%COMP%] {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 2;
+}
+@media (max-width: 649px) {
+  .__glow[_ngcontent-%COMP%] {
+    display: none;
+  }
+}
+
+.__glow--teal[_ngcontent-%COMP%] {
+  width: 120px;
+  height: 120px;
+  background: var(--alt-card-accent);
+  filter: blur(120px);
+  opacity: 0.5;
+  left: 220px;
+  top: 180px;
+}
+
+.__glow--orange[_ngcontent-%COMP%] {
+  width: 80px;
+  height: 80px;
+  background: #FF8233;
+  filter: blur(100px);
+  opacity: 0.4;
+  left: 300px;
+  top: 30px;
+}
+
+.__vline[_ngcontent-%COMP%] {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  top: 0;
+  z-index: 0;
+}
+@media (max-width: 649px) {
+  .__vline[_ngcontent-%COMP%] {
+    display: none;
+  }
+}
+
+.__vline--1[_ngcontent-%COMP%] {
+  left: 88px;
+}
+
+.__vline--2[_ngcontent-%COMP%] {
+  left: 285px;
+}
+
+.__vline--3[_ngcontent-%COMP%] {
+  left: 487px;
+}
+
+.__vline-rule[_ngcontent-%COMP%] {
+  flex: 1;
+  width: 0;
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+}`], changeDetection: 0 });
+let te = P;
+const S = class S {
+};
+S.ɵfac = function(t) {
+  return new (t || S)();
+}, S.ɵcmp = /* @__PURE__ */ ae({ type: S, selectors: [["zwe-containers-cards-element"]], decls: 2, vars: 0, consts: [[1, "zerops"]], template: function(t, s) {
+  t & 1 && (r(0, "div", 0), u(1, "zw-containers-cards"), i());
+}, dependencies: [te], styles: ["[_nghost-%COMP%] { display: block; }"], changeDetection: 0 });
+let se = S;
+Ne().then((n) => {
+  customElements.get("zerops-containers-cards") || customElements.define("zerops-containers-cards", qe(se, { injector: n.injector }));
+});