@dndbuilder.com/react/dist/packages/react/src/utils/style.js

Drag and drop builder for React

import { Breakpoint as nn } from "../types/responsive.js";
import { PseudoClass as rn, SizeType as g, BackgroundType as en, DisplayType as cn } from "../types/style.js";
import { createStyle as dn } from "../../../../utils.js";
import { d as un } from "../../../../_virtual/index5.js";
import mn from "../../../../_virtual/cjs.js";
import { l as v } from "../../../../_virtual/lodash.js";
import { isUnitValue as ln } from "./guard.js";
const $n = (e, n) => {
  const o = dn(), c = o.register(n);
  return o.get().replaceAll(c, e);
}, Fn = ({
  content: e,
  themeSettings: n,
  breakpoints: o,
  config: c
}) => Object.keys(e).length === 0 ? "" : Object.keys(e).filter((r) => r !== "root").reduce((r, t) => {
  var d;
  const i = e[t];
  if (!i) return r;
  const f = c[i.type];
  if (!f) return r;
  const u = {};
  if (f.style && Object.assign(
    u,
    f.style({
      blockId: i.id,
      settings: i.settings,
      themeSettings: n,
      breakpoints: o
    })
  ), !v.isEmpty(i.advancedSettings)) {
    const m = Sn({
      settings: i.advancedSettings,
      breakpoints: o
    }), l = mn(u, m);
    Object.assign(u, l);
  }
  return r += $n(i.id, u), !f.disableAdvancedSettings && ((d = i.advancedSettings) != null && d.customCss) && (r += i.advancedSettings.customCss.replaceAll("selector", `.${i.id}`)), r;
}, "");
function tn(e, n) {
  const o = {};
  return e.forEach((c) => {
    const r = n(c.key);
    if (c.key === nn.DESKTOP)
      Object.assign(o, r);
    else {
      const t = `@media (max-width: ${c.maxWidth}px)`;
      o[t] = r;
    }
  }), un.clean(v.cloneDeep(o));
}
function fn(e, n) {
  const o = {};
  return (n ?? Object.values(rn)).forEach((r) => {
    const t = v.pickBy(e(r), v.identity);
    if (Object.keys(t).length) {
      if (r === rn.DEFAULT) {
        Object.assign(o, t);
        return;
      }
      o[`&:${r}`] = t;
    }
  }), o;
}
function Sn({
  settings: e,
  breakpoints: n
}) {
  var r, t;
  const o = fn((i) => {
    var S, x, T, z, s, E, w, W, R, B, F, j, O, H, I, P, X, M, N, U, V, q, D, K, Q, _, p, J, Y, Z, A, C, L, k, a, b, h, G;
    const {
      top: f,
      right: u,
      bottom: d,
      left: m
    } = y((x = (S = e.border) == null ? void 0 : S.radius) == null ? void 0 : x[i]), l = (z = (T = e.border) == null ? void 0 : T.type) == null ? void 0 : z[i];
    return {
      borderTopLeftRadius: f,
      borderTopRightRadius: u,
      borderBottomRightRadius: d,
      borderBottomLeftRadius: m,
      borderStyle: l || void 0,
      borderColor: (E = (s = e.border) == null ? void 0 : s.color) == null ? void 0 : E[i],
      backgroundAttachment: (W = (w = e.background) == null ? void 0 : w.attachment) == null ? void 0 : W[i],
      backgroundColor: ((B = (R = e.background) == null ? void 0 : R.type) == null ? void 0 : B[i]) === en.CLASSIC ? (F = e.background.color) == null ? void 0 : F[i] : void 0,
      backgroundImage: xn({
        type: (O = (j = e.background) == null ? void 0 : j.type) == null ? void 0 : O[i],
        image: (P = (I = (H = e.background) == null ? void 0 : H.image) == null ? void 0 : I[i]) == null ? void 0 : P.url,
        angle: (N = (M = (X = e.background) == null ? void 0 : X.gradient) == null ? void 0 : M.angle) == null ? void 0 : N[i],
        color1: (q = (V = (U = e.background) == null ? void 0 : U.gradient) == null ? void 0 : V.color1) == null ? void 0 : q[i],
        color2: (Q = (K = (D = e.background) == null ? void 0 : D.gradient) == null ? void 0 : K.color2) == null ? void 0 : Q[i],
        location1: (J = (p = (_ = e.background) == null ? void 0 : _.gradient) == null ? void 0 : p.location1) == null ? void 0 : J[i],
        location2: (A = (Z = (Y = e.background) == null ? void 0 : Y.gradient) == null ? void 0 : Z.location2) == null ? void 0 : A[i],
        position: (k = (L = (C = e.background) == null ? void 0 : C.gradient) == null ? void 0 : L.position) == null ? void 0 : k[i],
        gradientType: (h = (b = (a = e.background) == null ? void 0 : a.gradient) == null ? void 0 : b.type) == null ? void 0 : h[i]
      }),
      // boxShadow: generateBoxShadow(settings.boxShadow?.[pseudoClass]),
      boxShadow: Tn((G = e.boxShadow) == null ? void 0 : G[i]),
      ...vn(n, e.display)
    };
  }), c = tn(n, (i) => {
    var z, s, E, w, W, R, B, F, j, O, H, I, P, X, M, N, U, V, q;
    const {
      top: f,
      right: u,
      bottom: d,
      left: m
    } = y((z = e.padding) == null ? void 0 : z[i]), {
      top: l,
      right: S,
      bottom: x,
      left: T
    } = y((s = e.margin) == null ? void 0 : s[i]);
    return {
      paddingTop: f,
      paddingRight: u,
      paddingBottom: d,
      paddingLeft: m,
      marginTop: l,
      marginRight: S,
      marginBottom: x,
      marginLeft: T,
      zIndex: (E = e.zIndex) == null ? void 0 : E[i],
      flexOrder: ((w = e.orderCustom) == null ? void 0 : w[i]) ?? ((W = e.order) == null ? void 0 : W[i]),
      alignSelf: (R = e.alignSelf) == null ? void 0 : R[i],
      flexSize: (B = e.size) == null ? void 0 : B[i],
      flexGrow: (F = e.grow) == null ? void 0 : F[i],
      flexShrink: (j = e.shrink) == null ? void 0 : j[i],
      position: (H = (O = e.position) == null ? void 0 : O.value) == null ? void 0 : H[i],
      [`${(P = (I = e.position) == null ? void 0 : I.horizontal) == null ? void 0 : P[i]}`]: $(
        (M = (X = e.position) == null ? void 0 : X.horizontalOffset) == null ? void 0 : M[i]
      ),
      [`${(U = (N = e.position) == null ? void 0 : N.vertical) == null ? void 0 : U[i]}`]: $(
        (q = (V = e.position) == null ? void 0 : V.verticalOffset) == null ? void 0 : q[i]
      ),
      ...fn((D) => {
        var J, Y, Z, A, C, L, k, a, b, h, G, on;
        const {
          top: K,
          right: Q,
          bottom: _,
          left: p
        } = y((Z = (Y = (J = e.border) == null ? void 0 : J.width) == null ? void 0 : Y[i]) == null ? void 0 : Z[D]);
        return {
          borderTopWidth: K,
          borderRightWidth: Q,
          borderBottomWidth: _,
          borderLeftWidth: p,
          backgroundPosition: (L = (C = (A = e.background) == null ? void 0 : A.position) == null ? void 0 : C[i]) == null ? void 0 : L[D],
          backgroundRepeat: (b = (a = (k = e.background) == null ? void 0 : k.repeat) == null ? void 0 : a[i]) == null ? void 0 : b[D],
          backgroundSize: (on = (G = (h = e.background) == null ? void 0 : h.size) == null ? void 0 : G[i]) == null ? void 0 : on[D]
        };
      })
    };
  });
  return un.clean(
    v.cloneDeep({
      borderTransitionDuration: (r = e.border) != null && r.transitionDuration ? `${(t = e.border) == null ? void 0 : t.transitionDuration}ms` : void 0,
      ...o,
      ...c
    })
  );
}
const vn = (e, n) => ({
  ...tn(e, (o) => {
    var r, t, i, f, u, d, m, l, S, x, T, z, s, E, w, W, R, B;
    const c = (r = n == null ? void 0 : n.value) == null ? void 0 : r[o];
    return c ? [cn.FLEX, cn.INLINE_FLEX].includes(c) ? {
      display: (t = n.value) == null ? void 0 : t[o],
      flexDirection: (i = n == null ? void 0 : n.flexDirection) == null ? void 0 : i[o],
      justifyContent: (f = n == null ? void 0 : n.justifyContent) == null ? void 0 : f[o],
      alignItems: (u = n == null ? void 0 : n.alignItems) == null ? void 0 : u[o],
      flexWrap: (d = n == null ? void 0 : n.flexWrap) == null ? void 0 : d[o],
      rowGap: ((l = (m = n == null ? void 0 : n.gap) == null ? void 0 : m[o]) == null ? void 0 : l.y) !== void 0 ? `${(x = (S = n == null ? void 0 : n.gap) == null ? void 0 : S[o]) == null ? void 0 : x.y}${(z = (T = n == null ? void 0 : n.gap) == null ? void 0 : T[o]) == null ? void 0 : z.unit}` : void 0,
      columnGap: ((E = (s = n == null ? void 0 : n.gap) == null ? void 0 : s[o]) == null ? void 0 : E.x) !== void 0 ? `${(W = (w = n == null ? void 0 : n.gap) == null ? void 0 : w[o]) == null ? void 0 : W.x}${(B = (R = n == null ? void 0 : n.gap) == null ? void 0 : R[o]) == null ? void 0 : B.unit}` : void 0
    } : {
      display: c
    } : {};
  })
}), jn = (e) => {
  const o = ((i) => {
    const f = i.match(/(?:font-family:\s*([^;}]+)[;}])/g);
    return f ? f == null ? void 0 : f.map((u) => u.replace(/font-family:|;|}/g, "").trim()).filter((u) => !u.startsWith("var")).flatMap((u) => u.split(",")) : [];
  })(e), c = [100, 200, 300, 400, 500, 600, 700, 800, 900];
  return `https://fonts.googleapis.com/css2?family=${[...new Set(o)].map((i) => {
    const f = `${i}:ital,wght`, u = c.map((m) => `0,${m}`).join(";"), d = c.map((m) => `1,${m}`).join(";");
    return `${f}@${u};${d}`;
  }).join("&family=")}&display=swap`;
};
function On(e) {
  switch (e) {
    case g.SM:
      return {
        fontSize: "0.875rem",
        lineHeight: "1.25rem"
      };
    case g.MD:
      return {
        fontSize: "1.2rem",
        lineHeight: "1.5rem"
      };
    case g.LG:
      return {
        fontSize: "1.875rem",
        lineHeight: "2.25rem"
      };
    case g.XL:
      return {
        fontSize: "2.25rem",
        lineHeight: "2.5rem"
      };
    case g.XXL:
      return {
        fontSize: "3rem",
        lineHeight: "1"
      };
    default:
      return {
        fontSize: "1.5rem",
        lineHeight: "2rem"
      };
  }
}
function y(e) {
  if (!e) return {};
  const { top: n, bottom: o, right: c, left: r, unit: t } = e;
  return t ? {
    top: $({ value: n, unit: t }),
    right: $({ value: c, unit: t }),
    bottom: $({ value: o, unit: t }),
    left: $({ value: r, unit: t })
  } : {};
}
function xn({
  type: e,
  image: n,
  angle: o,
  color1: c,
  color2: r,
  location1: t,
  location2: i,
  position: f,
  gradientType: u
}) {
  if (e === en.CLASSIC && n)
    return `url('${n}')`;
  if (e === en.GRADIENT) {
    const d = `${o == null ? void 0 : o.value}${o == null ? void 0 : o.unit}`, m = c ? `${c} ${t == null ? void 0 : t.value}${t == null ? void 0 : t.unit}` : "", l = r ? `, ${r} ${i == null ? void 0 : i.value}${i == null ? void 0 : i.unit}` : "", S = `${f}`;
    return u === "linear" ? `linear-gradient(${d}, ${m}${l})` : `radial-gradient(at ${S}, ${m}${l})`;
  }
}
function Hn({
  type: e,
  angle: n,
  color1: o,
  color2: c,
  location1: r,
  location2: t,
  position: i,
  gradientType: f
}) {
  if (e === en.GRADIENT) {
    const u = `${n == null ? void 0 : n.value}${n == null ? void 0 : n.unit}`, d = o ? `${o} ${r == null ? void 0 : r.value}${r == null ? void 0 : r.unit}` : "", m = c ? `, ${c} ${t == null ? void 0 : t.value}${t == null ? void 0 : t.unit}` : "", l = `${i}`;
    return f === "linear" ? `linear-gradient(${u}, ${d}${m})` : `radial-gradient(at ${l}, ${d}${m})`;
  }
  return "none";
}
function $(e) {
  if (e && e.value !== void 0 && ln(e))
    return `${e.value}${e.unit}`;
}
function In(e) {
  if (e)
    return {
      borderTopWidth: $({ value: e.top, unit: e.unit }),
      borderRightWidth: $({
        value: e.right,
        unit: e.unit
      }),
      borderBottomWidth: $({
        value: e.bottom,
        unit: e.unit
      }),
      borderLeftWidth: $({ value: e.left, unit: e.unit })
    };
}
function Pn(e) {
  if (e)
    return {
      borderTopLeftRadius: $({
        value: e.top,
        unit: e.unit
      }),
      borderTopRightRadius: $({
        value: e.right,
        unit: e.unit
      }),
      borderBottomRightRadius: $({
        value: e.bottom,
        unit: e.unit
      }),
      borderBottomLeftRadius: $({
        value: e.left,
        unit: e.unit
      })
    };
}
function Tn(e) {
  if (!e) return;
  const { color: n, blur: o, spread: c, horizontal: r, vertical: t, position: i } = e, f = [];
  if (r !== void 0 || t !== void 0) {
    const u = r !== void 0 ? `${r}px` : "0", d = t !== void 0 ? `${t}px` : "0";
    f.push(`${u} ${d}`);
  }
  return o !== void 0 && f.push(`${o}px`), c !== void 0 && f.push(`${c}px`), n !== void 0 && f.push(n), i !== void 0 && f.push(i), f.join(" ");
}
function Xn(e) {
  if (!e) return;
  const { color: n, blur: o, horizontal: c, vertical: r } = e, t = [];
  if (c !== void 0 || r !== void 0) {
    const i = c !== void 0 ? `${c}px` : "0", f = r !== void 0 ? `${r}px` : "0";
    t.push(`${i} ${f}`);
  }
  return o !== void 0 && t.push(`${o}px`), n !== void 0 && t.push(n), t.join(" ");
}
function Mn({
  hideOnDesktop: e,
  hideOnTablet: n,
  hideOnMobile: o,
  breakpoint: c
}) {
  return e && c === nn.DESKTOP ? { display: "none" } : n && c === nn.TABLET ? { display: "none" } : o && c === nn.MOBILE ? { display: "none" } : { display: void 0 };
}
function Nn(e, n) {
  return {
    ...tn(e, (o) => zn(o, n))
  };
}
function zn(e, n) {
  var l, S, x, T, z, s, E, w, W, R, B, F, j, O, H, I, P, X, M, N, U, V, q, D, K, Q, _;
  const o = ((l = n == null ? void 0 : n.fontSize) == null ? void 0 : l[e]) ?? ((S = n == null ? void 0 : n.fontSize) == null ? void 0 : S.tablet) ?? ((x = n == null ? void 0 : n.fontSize) == null ? void 0 : x.desktop), c = ((T = n == null ? void 0 : n.lineHeight) == null ? void 0 : T[e]) ?? ((z = n == null ? void 0 : n.lineHeight) == null ? void 0 : z.tablet) ?? ((s = n == null ? void 0 : n.lineHeight) == null ? void 0 : s.desktop), r = ((E = n == null ? void 0 : n.letterSpacing) == null ? void 0 : E[e]) ?? ((w = n == null ? void 0 : n.letterSpacing) == null ? void 0 : w.tablet) ?? ((W = n == null ? void 0 : n.letterSpacing) == null ? void 0 : W.desktop), t = ((R = n == null ? void 0 : n.wordSpacing) == null ? void 0 : R[e]) ?? ((B = n == null ? void 0 : n.wordSpacing) == null ? void 0 : B.tablet) ?? ((F = n == null ? void 0 : n.wordSpacing) == null ? void 0 : F.desktop), i = ((j = n == null ? void 0 : n.fontFamily) == null ? void 0 : j[e]) ?? ((O = n == null ? void 0 : n.fontFamily) == null ? void 0 : O.tablet) ?? ((H = n == null ? void 0 : n.fontFamily) == null ? void 0 : H.desktop), f = ((I = n == null ? void 0 : n.fontWeight) == null ? void 0 : I[e]) ?? ((P = n == null ? void 0 : n.fontWeight) == null ? void 0 : P.tablet) ?? ((X = n == null ? void 0 : n.fontWeight) == null ? void 0 : X.desktop), u = ((M = n == null ? void 0 : n.textTransform) == null ? void 0 : M[e]) ?? ((N = n == null ? void 0 : n.textTransform) == null ? void 0 : N.tablet) ?? ((U = n == null ? void 0 : n.textTransform) == null ? void 0 : U.desktop), d = ((V = n == null ? void 0 : n.fontStyle) == null ? void 0 : V[e]) ?? ((q = n == null ? void 0 : n.fontStyle) == null ? void 0 : q.tablet) ?? ((D = n == null ? void 0 : n.fontStyle) == null ? void 0 : D.desktop), m = ((K = n == null ? void 0 : n.textDecoration) == null ? void 0 : K[e]) ?? ((Q = n == null ? void 0 : n.textDecoration) == null ? void 0 : Q.tablet) ?? ((_ = n == null ? void 0 : n.textDecoration) == null ? void 0 : _.desktop);
  return {
    fontFamily: i,
    fontWeight: f,
    textTransform: u,
    fontStyle: d,
    textDecoration: m,
    fontSize: $(o),
    lineHeight: $(c),
    letterSpacing: $(r),
    wordSpacing: $(t)
  };
}
function Un(e, n, o) {
  const c = {};
  if (v.isEmpty(n))
    return c;
  const r = tn(o, (t) => {
    var i, f, u, d, m, l, S, x, T;
    return {
      fontFamily: v.isEmpty((i = n.fontFamily) == null ? void 0 : i[t]) ? void 0 : `var(--${e}-${t}-font-family)`,
      fontWeight: v.isEmpty((f = n.fontWeight) == null ? void 0 : f[t]) ? void 0 : `var(--${e}-${t}-font-weight)`,
      fontSize: v.isEmpty((u = n.fontSize) == null ? void 0 : u[t]) ? void 0 : `var(--${e}-${t}-font-size)`,
      textTransform: v.isEmpty((d = n.textTransform) == null ? void 0 : d[t]) ? void 0 : `var(--${e}-${t}-text-transform)`,
      fontStyle: v.isEmpty((m = n.fontStyle) == null ? void 0 : m[t]) ? void 0 : `var(--${e}-${t}-font-style)`,
      textDecoration: v.isEmpty((l = n.textDecoration) == null ? void 0 : l[t]) ? void 0 : `var(--${e}-${t}-text-decoration)`,
      lineHeight: v.isEmpty((S = n.lineHeight) == null ? void 0 : S[t]) ? void 0 : `var(--${e}-${t}-line-height)`,
      letterSpacing: v.isEmpty((x = n.letterSpacing) == null ? void 0 : x[t]) ? void 0 : `var(--${e}-${t}-letter-spacing)`,
      wordSpacing: v.isEmpty((T = n.wordSpacing) == null ? void 0 : T[t]) ? void 0 : `var(--${e}-${t}-word-spacing)`
    };
  });
  return Object.assign(c, r), c;
}
export {
  Sn as generateAdvancedStyle,
  Hn as generateBgGradient,
  xn as generateBgImageWithGradient,
  $n as generateBlockStyle,
  Pn as generateBorderRadius,
  In as generateBorderWidth,
  Tn as generateBoxShadow,
  Fn as generateContentStyles,
  vn as generateDisplayStyle,
  On as generateFontSize,
  jn as generateFontsUrl,
  fn as generatePseudoStyle,
  tn as generateResponsiveStyle,
  Mn as generateResponsiveVisibility,
  y as generateSpacingValue,
  Xn as generateTextShadow,
  Nn as generateTypography,
  zn as generateTypographyFromBreakpoint,
  Un as generateTypographyStyles,
  $ as generateUnitValue
};
//# sourceMappingURL=style.js.map