@cling-se/widget 0.17.0 → 1.0.0-beta.2

package/dist/CoverBlockSettings-BA5L0Zee.js

@@ -0,0 +1,861 @@
+import { m as z } from "./mapFormMixin-D3BihYWW.js";
+import { T as R } from "./ThemeColorRow-sjGdMzGN.js";
+import { b as _ } from "./helpers-CPW--XIz.js";
+import { _ as w, ak as M, o as l, d as u, s as n, Z as x, af as f, ao as y, S as $, f as p, n as T, l as b, b as g, F as V, k as L, c as S, e as v, v as h, ae as U, w as k, B as C, av as N, z as B } from "./main-Cb-nyil1.js";
+import { b as I } from "./CDropdownItem-Dmq5gYzA.js";
+const K = {
+  name: "CSliderThumb",
+  mixins: [M],
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    type: {
+      type: String,
+      default: ""
+    },
+    customFormatter: {
+      type: Function,
+      default: null
+    }
+  },
+  emits: ["dragend", "dragstart", "update:modelValue"],
+  data() {
+    return {
+      isFocused: !1,
+      dragging: !1,
+      startX: 0,
+      startPosition: 0,
+      newPosition: null,
+      oldValue: this.modelValue
+    };
+  },
+  computed: {
+    disabled() {
+      return this.$parent.disabled;
+    },
+    max() {
+      return this.$parent.max;
+    },
+    min() {
+      return this.$parent.min;
+    },
+    step() {
+      return this.$parent.step;
+    },
+    precision() {
+      return this.$parent.precision;
+    },
+    currentPosition() {
+      return `${(this.modelValue - this.min) / (this.max - this.min) * 100}%`;
+    },
+    wrapperStyle() {
+      return { left: this.currentPosition };
+    }
+  },
+  beforeUnmount() {
+    document.removeEventListener("mousemove", this.onDragging), document.removeEventListener("touchmove", this.onDragging), document.removeEventListener("mouseup", this.onDragEnd), document.removeEventListener("touchend", this.onDragEnd), document.removeEventListener("contextmenu", this.onDragEnd);
+  },
+  methods: {
+    onFocus() {
+      this.isFocused = !0;
+    },
+    onBlur() {
+      this.isFocused = !1;
+    },
+    onButtonDown(e) {
+      this.disabled || (e.preventDefault(), this.onDragStart(e), typeof window < "u" && (document.addEventListener("mousemove", this.onDragging), document.addEventListener("touchmove", this.onDragging), document.addEventListener("mouseup", this.onDragEnd), document.addEventListener("touchend", this.onDragEnd), document.addEventListener("contextmenu", this.onDragEnd)));
+    },
+    onLeftKeyDown() {
+      this.disabled || this.modelValue === this.min || (this.newPosition = parseFloat(this.currentPosition) - this.step / (this.max - this.min) * 100, this.setPosition(this.newPosition), this.$parent.emitValue("change"));
+    },
+    onRightKeyDown() {
+      this.disabled || this.modelValue === this.max || (this.newPosition = parseFloat(this.currentPosition) + this.step / (this.max - this.min) * 100, this.setPosition(this.newPosition), this.$parent.emitValue("change"));
+    },
+    onHomeKeyDown() {
+      this.disabled || this.modelValue === this.min || (this.newPosition = 0, this.setPosition(this.newPosition), this.$parent.emitValue("change"));
+    },
+    onEndKeyDown() {
+      this.disabled || this.modelValue === this.max || (this.newPosition = 100, this.setPosition(this.newPosition), this.$parent.emitValue("change"));
+    },
+    onDragStart(e) {
+      this.dragging = !0, this.$emit("dragstart"), e.type === "touchstart" && (e.clientX = e.touches[0].clientX), this.startX = e.clientX, this.startPosition = parseFloat(this.currentPosition), this.newPosition = this.startPosition;
+    },
+    onDragging(e) {
+      if (this.dragging) {
+        e.type === "touchmove" && (e.clientX = e.touches[0].clientX);
+        const t = (e.clientX - this.startX) / this.$parent.sliderSize() * 100;
+        this.newPosition = this.startPosition + t, this.setPosition(this.newPosition);
+      }
+    },
+    onDragEnd() {
+      this.dragging = !1, this.$emit("dragend"), this.modelValue !== this.oldValue && this.$parent.emitValue("change"), this.setPosition(this.newPosition), typeof window < "u" && (document.removeEventListener("mousemove", this.onDragging), document.removeEventListener("touchmove", this.onDragging), document.removeEventListener("mouseup", this.onDragEnd), document.removeEventListener("touchend", this.onDragEnd), document.removeEventListener("contextmenu", this.onDragEnd));
+    },
+    setPosition(e) {
+      if (e === null || isNaN(e)) return;
+      e < 0 ? e = 0 : e > 100 && (e = 100);
+      const t = 100 / ((this.max - this.min) / this.step);
+      let a = Math.round(e / t) * t / 100 * (this.max - this.min) + this.min;
+      a = parseFloat(a.toFixed(this.precision)), this.$emit("update:modelValue", a), !this.dragging && a !== this.oldValue && (this.oldValue = a);
+    }
+  }
+}, O = ["tabindex"];
+function X(e, t, s, a, r, i) {
+  return l(), u("div", x({
+    class: [{ "is-dragging": r.dragging }, "c-slider-thumb-wrapper"],
+    style: i.wrapperStyle
+  }, e.rootAttrs), [
+    n("div", x(e.fallthroughAttrs, {
+      tabindex: i.disabled ? !1 : 0,
+      class: "c-slider-thumb",
+      onMousedown: t[0] || (t[0] = (...o) => i.onButtonDown && i.onButtonDown(...o)),
+      onTouchstart: t[1] || (t[1] = (...o) => i.onButtonDown && i.onButtonDown(...o)),
+      onFocus: t[2] || (t[2] = (...o) => i.onFocus && i.onFocus(...o)),
+      onBlur: t[3] || (t[3] = (...o) => i.onBlur && i.onBlur(...o)),
+      onKeydown: [
+        t[4] || (t[4] = f(y((...o) => i.onLeftKeyDown && i.onLeftKeyDown(...o), ["prevent"]), ["left"])),
+        t[5] || (t[5] = f(y((...o) => i.onRightKeyDown && i.onRightKeyDown(...o), ["prevent"]), ["right"])),
+        t[6] || (t[6] = f(y((...o) => i.onLeftKeyDown && i.onLeftKeyDown(...o), ["prevent"]), ["down"])),
+        t[7] || (t[7] = f(y((...o) => i.onRightKeyDown && i.onRightKeyDown(...o), ["prevent"]), ["up"])),
+        t[8] || (t[8] = f(y((...o) => i.onHomeKeyDown && i.onHomeKeyDown(...o), ["prevent"]), ["home"])),
+        t[9] || (t[9] = f(y((...o) => i.onEndKeyDown && i.onEndKeyDown(...o), ["prevent"]), ["end"]))
+      ]
+    }), null, 16, O)
+  ], 16);
+}
+const A = /* @__PURE__ */ w(K, [["render", X]]), H = {
+  name: "CSliderTick",
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    position() {
+      const e = (this.value - this.$parent.min) / (this.$parent.max - this.$parent.min) * 100;
+      return e >= 0 && e <= 100 ? e : 0;
+    },
+    hidden() {
+      return this.value === this.$parent.min || this.value === this.$parent.max;
+    }
+  },
+  created() {
+    if (!this.$parent.$data._isSlider)
+      throw new Error("You should wrap bSliderTick on a bSlider");
+  },
+  methods: {
+    getTickStyle(e) {
+      return { left: `${e}%` };
+    }
+  }
+}, G = {
+  key: 0,
+  class: "c-slider-tick-label"
+};
+function Y(e, t, s, a, r, i) {
+  return l(), u("div", {
+    class: T([{ "is-tick-hidden": i.hidden }, "c-slider-tick"]),
+    style: b(i.getTickStyle(i.position))
+  }, [
+    e.$slots.default ? (l(), u("span", G, [
+      $(e.$slots, "default")
+    ])) : p("", !0)
+  ], 6);
+}
+const j = /* @__PURE__ */ w(H, [["render", Y]]), q = {
+  name: "CSlider",
+  components: {
+    CSliderThumb: A,
+    CSliderTick: j
+  },
+  props: {
+    modelValue: {
+      type: [Number, Array],
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    type: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: ""
+    },
+    ticks: {
+      type: Boolean,
+      default: !1
+    },
+    tooltip: {
+      type: Boolean,
+      default: !0
+    },
+    tooltipType: {
+      type: String,
+      default: ""
+    },
+    rounded: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    lazy: {
+      type: Boolean,
+      default: !1
+    },
+    customFormatter: {
+      type: Function,
+      default: null
+    },
+    ariaLabel: {
+      type: [String, Array],
+      default: ""
+    },
+    biggerSliderFocus: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["change", "dragend", "dragging", "dragstart", "update:modelValue"],
+  data() {
+    return {
+      value1: null,
+      value2: null,
+      // internal is used to update value1 and value2 with a single shot.
+      // internal is also used to stop unnecessary propagation of update.
+      internal: {
+        value1: null,
+        value2: null
+      },
+      dragging: !1,
+      isRange: !1,
+      _isSlider: !0,
+      // Used by Thumb and Tick
+      timeOutID: null
+    };
+  },
+  computed: {
+    newTooltipType() {
+      return this.tooltipType ? this.tooltipType : this.type;
+    },
+    tickValues() {
+      if (!this.ticks || this.min > this.max || this.step === 0) return [];
+      const e = [];
+      for (let t = this.min + this.step; t < this.max; t += this.step)
+        e.push(t);
+      return e;
+    },
+    minValue() {
+      return Math.min(this.value1, this.value2);
+    },
+    maxValue() {
+      return Math.max(this.value1, this.value2);
+    },
+    barSize() {
+      return this.isRange ? `${100 * (this.maxValue - this.minValue) / (this.max - this.min)}%` : `${100 * (this.value1 - this.min) / (this.max - this.min)}%`;
+    },
+    barStart() {
+      return this.isRange ? `${100 * (this.minValue - this.min) / (this.max - this.min)}%` : "0%";
+    },
+    precision() {
+      const e = [this.min, this.max, this.step].map((t) => {
+        const s = `${t}`.split(".")[1];
+        return s ? s.length : 0;
+      });
+      return Math.max(...e);
+    },
+    barStyle() {
+      return {
+        width: this.barSize,
+        left: this.barStart
+      };
+    },
+    rootClasses() {
+      return {
+        "is-rounded": this.rounded,
+        "is-dragging": this.dragging,
+        "is-disabled": this.disabled,
+        "slider-focus": this.biggerSliderFocus
+      };
+    }
+  },
+  watch: {
+    /**
+     * When v-model is changed set the new active step.
+     */
+    modelValue(e) {
+      this.setValues(e);
+    },
+    internal({ value1: e, value2: t }) {
+      this.value1 = e, this.value2 = t;
+    },
+    value1(e) {
+      this.internal.value1 !== e && this.onInternalValueUpdate();
+    },
+    value2(e) {
+      this.internal.value2 !== e && this.onInternalValueUpdate();
+    },
+    min() {
+      this.setValues(this.modelValue);
+    },
+    max() {
+      this.setValues(this.modelValue);
+    }
+  },
+  created() {
+    this.isThumbReversed = !1, this.isTrackClickDisabled = !1, this.setValues(this.modelValue);
+  },
+  beforeUnmount() {
+    clearTimeout(this.timeOutID);
+  },
+  methods: {
+    setValues(e) {
+      if (!(this.min > this.max))
+        if (Array.isArray(e)) {
+          this.isRange = !0;
+          const t = typeof e[0] != "number" || isNaN(e[0]) ? this.min : _(e[0], this.min, this.max), s = typeof e[1] != "number" || isNaN(e[1]) ? this.max : _(e[1], this.min, this.max);
+          this.internal = {
+            value1: this.isThumbReversed ? s : t,
+            value2: this.isThumbReversed ? t : s
+          };
+        } else
+          this.isRange = !1, this.internal = {
+            value1: isNaN(e) ? this.min : _(e, this.min, this.max),
+            value2: null
+          };
+    },
+    onInternalValueUpdate() {
+      this.isRange && (this.isThumbReversed = this.value1 > this.value2), (!this.lazy || !this.dragging) && this.emitValue("update:modelValue"), this.dragging && this.emitValue("dragging");
+    },
+    sliderSize() {
+      return this.$refs.slider.getBoundingClientRect().width;
+    },
+    onSliderClick(e) {
+      if (this.disabled || this.isTrackClickDisabled) return;
+      const t = this.$refs.slider.getBoundingClientRect().left, s = (e.clientX - t) / this.sliderSize() * 100, a = this.min + s * (this.max - this.min) / 100, r = Math.abs(a - this.value1);
+      if (this.isRange) {
+        const i = Math.abs(a - this.value2);
+        if (r <= i) {
+          if (r < this.step / 2) return;
+          this.$refs.button1.setPosition(s);
+        } else {
+          if (i < this.step / 2) return;
+          this.$refs.button2.setPosition(s);
+        }
+      } else {
+        if (r < this.step / 2) return;
+        this.$refs.button1.setPosition(s);
+      }
+      this.emitValue("change");
+    },
+    onDragStart() {
+      this.dragging = !0, this.$emit("dragstart");
+    },
+    onDragEnd() {
+      this.isTrackClickDisabled = !0, this.timeOutID = setTimeout(() => {
+        this.isTrackClickDisabled = !1;
+      }, 0), this.dragging = !1, this.$emit("dragend"), this.lazy && this.emitValue("update:modelValue");
+    },
+    emitValue(e) {
+      this.$emit(
+        e,
+        this.isRange ? [this.minValue, this.maxValue] : this.value1
+      );
+    }
+  }
+}, J = {
+  ref: "slider",
+  class: "c-slider-track"
+};
+function Q(e, t, s, a, r, i) {
+  const o = g("CSliderTick"), c = g("CSliderThumb");
+  return l(), u("div", {
+    class: T([[`is-${s.size}`, `is-${s.type}`, i.rootClasses], "c-slider"]),
+    onClick: t[2] || (t[2] = (...m) => i.onSliderClick && i.onSliderClick(...m))
+  }, [
+    n("div", J, [
+      n("div", {
+        style: b(i.barStyle),
+        class: "c-slider-fill"
+      }, null, 4),
+      s.ticks ? (l(!0), u(V, { key: 0 }, L(i.tickValues, (m, P) => (l(), S(o, {
+        key: P,
+        value: m
+      }, null, 8, ["value"]))), 128)) : p("", !0),
+      $(e.$slots, "default"),
+      v(c, {
+        ref: "button1",
+        modelValue: r.value1,
+        "onUpdate:modelValue": t[0] || (t[0] = (m) => r.value1 = m),
+        type: `is-${i.newTooltipType}`,
+        tooltip: s.tooltip,
+        "custom-formatter": s.customFormatter,
+        "aria-valuenow": r.value1,
+        "aria-valuemin": s.min,
+        "aria-valuemax": s.max,
+        "aria-label": Array.isArray(s.ariaLabel) ? s.ariaLabel[0] : s.ariaLabel,
+        "aria-disabled": s.disabled || void 0,
+        role: "slider",
+        "aria-orientation": "horizontal",
+        onDragstart: i.onDragStart,
+        onDragend: i.onDragEnd
+      }, null, 8, ["modelValue", "type", "tooltip", "custom-formatter", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-label", "aria-disabled", "onDragstart", "onDragend"]),
+      r.isRange ? (l(), S(c, {
+        key: 1,
+        ref: "button2",
+        modelValue: r.value2,
+        "onUpdate:modelValue": t[1] || (t[1] = (m) => r.value2 = m),
+        type: i.newTooltipType,
+        tooltip: s.tooltip,
+        "custom-formatter": s.customFormatter,
+        "aria-valuenow": r.value2,
+        "aria-valuemin": s.min,
+        "aria-valuemax": s.max,
+        "aria-label": Array.isArray(s.ariaLabel) ? s.ariaLabel[1] : "",
+        "aria-disabled": s.disabled || void 0,
+        role: "slider",
+        "aria-orientation": "horizontal",
+        onDragstart: i.onDragStart,
+        onDragend: i.onDragEnd
+      }, null, 8, ["modelValue", "type", "tooltip", "custom-formatter", "aria-valuenow", "aria-valuemin", "aria-valuemax", "aria-label", "aria-disabled", "onDragstart", "onDragend"])) : p("", !0)
+    ], 512)
+  ], 2);
+}
+const W = /* @__PURE__ */ w(q, [["render", Q]]), Z = (e, t, s, a) => Math.atan2(e - s, t - a) * (180 / Math.PI) * -1 + 180, ee = {
+  name: "DegreePicker",
+  emits: ["input"],
+  props: {
+    value: {
+      type: Number,
+      required: !0
+    }
+  },
+  computed: {
+    degreesStyle() {
+      return { transform: `rotate(${this.value}deg)` };
+    }
+  },
+  methods: {
+    onButtonDown(e) {
+      let t = this.mouseDownHandler(e);
+      const s = (a) => {
+        t = this.mouseMoveHandler(a, t) || t;
+      };
+      window.addEventListener("mousemove", s), window.addEventListener(
+        "mouseup",
+        () => {
+          window.removeEventListener("mousemove", s);
+        },
+        { once: !0 }
+      );
+    },
+    mouseMoveHandler(e, { centerX: t, centerY: s }) {
+      const a = Z(
+        e.clientX,
+        e.clientY,
+        t,
+        s
+      );
+      this.$emit("input", parseInt(a, 10));
+    },
+    mouseDownHandler(e) {
+      const s = e.target.getBoundingClientRect(), a = s.top + parseInt(8 - window.pageYOffset, 10), r = s.left + parseInt(8 - window.pageXOffset, 10);
+      return { centerY: a, centerX: r };
+    }
+  }
+}, te = { class: "gradient-degrees-options" }, ie = { style: { "pointer-events": "none", "user-select": "none", "padding-right": "0.5em", opacity: "0.75" } };
+function se(e, t, s, a, r, i) {
+  return l(), u("div", te, [
+    n("div", ie, [
+      n("div", null, h(s.value) + "°", 1)
+    ]),
+    n("div", {
+      class: "gradient-degrees",
+      onMousedown: t[0] || (t[0] = (...o) => i.onButtonDown && i.onButtonDown(...o))
+    }, [
+      n("div", {
+        style: b(i.degreesStyle),
+        class: "gradient-degree-center"
+      }, t[1] || (t[1] = [
+        n("div", { class: "gradient-degree-pointer" }, null, -1)
+      ]), 4)
+    ], 32)
+  ]);
+}
+const oe = /* @__PURE__ */ w(ee, [["render", se], ["__scopeId", "data-v-fe95bfec"]]), ne = {
+  name: "GradientPicker",
+  i18nOptions: {
+    namespaces: "gradientPicker",
+    messages: {
+      en: {
+        startColor: "Start color",
+        stopColor: "Stop color",
+        rotation: "Rotation"
+      },
+      sv: {
+        startColor: "Startfärg",
+        stopColor: "Stoppfärg",
+        rotation: "Rotation"
+      }
+    }
+  },
+  components: {
+    ThemeColorRow: R,
+    DegreePicker: oe
+  },
+  emits: ["input"],
+  props: {
+    value: {
+      type: Object,
+      required: !0
+    }
+  },
+  data() {
+    return {
+      set: U,
+      defaultValue: {
+        type: "linear",
+        degree: 0,
+        colors: [
+          { percent: 0, color: "#000000" },
+          { percent: 100, color: "#0095FF" }
+        ]
+      }
+    };
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return { ...this.defaultValue, ...this.value };
+      },
+      set(e) {
+        this.$emit("input", e);
+      }
+    }
+  },
+  methods: {
+    updateData(e, t) {
+      let s = t;
+      if (e === "colors") {
+        const { i: a, color: r, percent: i } = t || {};
+        s = this.internalValue.colors.map(
+          (o, c) => c === a ? { color: r, percent: i } : o
+        );
+      }
+      this.internalValue = { ...this.internalValue, [e]: s };
+    }
+  }
+}, ae = { class: "d-option flex w-full items-center" }, re = {
+  class: "d-option-title",
+  style: { flex: "1 1 auto" }
+};
+function le(e, t, s, a, r, i) {
+  const o = g("ThemeColorRow"), c = g("DegreePicker");
+  return l(), u("div", null, [
+    v(o, {
+      value: i.internalValue.colors[0].color,
+      class: "d-option-title d-option",
+      onChange: t[0] || (t[0] = (m) => i.updateData("colors", { i: 0, percent: 0, color: m }))
+    }, {
+      default: k(() => [
+        C(h(e.$t("startColor")), 1)
+      ]),
+      _: 1
+    }, 8, ["value"]),
+    v(o, {
+      value: i.internalValue.colors[1].color,
+      class: "d-option-title d-option",
+      onChange: t[1] || (t[1] = (m) => i.updateData("colors", { i: 1, percent: 100, color: m }))
+    }, {
+      default: k(() => [
+        C(h(e.$t("stopColor")), 1)
+      ]),
+      _: 1
+    }, 8, ["value"]),
+    n("div", ae, [
+      n("div", re, h(e.$t("rotation")), 1),
+      v(c, {
+        value: i.internalValue.degree,
+        style: { "padding-right": "4px" },
+        onInput: t[2] || (t[2] = (m) => i.updateData("degree", m))
+      }, null, 8, ["value"])
+    ])
+  ]);
+}
+const de = /* @__PURE__ */ w(ne, [["render", le], ["__scopeId", "data-v-a0f7de54"]]), ue = {
+  image: B(
+    () => import("./ImageSelectModal-D3sP3lhR.js")
+  ),
+  video: B(
+    () => import("./VideoSelectModal-CW0OweCw.js")
+  )
+}, me = {
+  name: "CoverBlockSettings",
+  i18nOptions: {
+    namespaces: "coverBlockSettings",
+    messages: {
+      en: {
+        colorLabel: "Color",
+        overlay: {
+          title: "Overlay",
+          colorLabel: "Color",
+          opacityLabel: "Opacity"
+        }
+      },
+      sv: {
+        colorLabel: "Färg",
+        overlay: {
+          title: "Överlägg",
+          colorLabel: "Färg",
+          opacityLabel: "Opacitet"
+        }
+      }
+    }
+  },
+  components: {
+    ThemeColorRow: R,
+    GradientPicker: de,
+    CSlider: W,
+    CSwitch: I
+  },
+  mixins: [
+    z(
+      [
+        "type",
+        "video",
+        "resourceUrl",
+        "filter",
+        "blur",
+        "position",
+        "overlay",
+        "overlayColor",
+        "gradient",
+        "backgroundColor"
+      ],
+      { useEmit: !1 }
+    )
+  ],
+  data() {
+    return {
+      getUnsplashResized: N
+    };
+  },
+  methods: {
+    toggleOverlay(e) {
+      e && !this.overlayColor ? (this.overlayColor = "hsla(205, 100%, 50%, 0.5)", this.overlay = !0) : this.overlay = e;
+    },
+    setType(e) {
+      e === "color" && !this.backgroundColor ? this.backgroundColor = "hsl(134, 74%, 39%)" : e === "video" && !this.video ? this.video = {
+        id: "1409899",
+        url: "https://videos.pexels.com/video-files/1409899/1409899-hd_1920_1080_25fps.mp4",
+        thumbnail: "https://images.pexels.com/videos/1409899/free-video-1409899.jpg?auto=compress&cs=tinysrgb&fit=crop&h=630&w=1200",
+        provider: "pexels"
+      } : e === "image" ? (this.resourceUrl || (this.resourceUrl = "https://images.unsplash.com/photo-1520013817300-1f4c1cb245ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1987&q=80"), this.position || (this.position = 50)) : e === "gradient" && !this.gradient && (this.gradient = {
+        type: "linear",
+        degree: 45,
+        colors: [
+          { color: "hsla(324.71,100%,50%,1)", percent: 0 },
+          { color: "hsla(209.41,85.18%,40.65%,1)", percent: 100 }
+        ]
+      }), this.type = e;
+    },
+    openResourceModal(e) {
+      this.$modal.show(
+        ue[e],
+        {},
+        {},
+        {
+          input: (t) => {
+            e === "image" ? this.resourceUrl = t : e === "video" && (this.video = t);
+          }
+        }
+      );
+    }
+  }
+}, he = { class: "d-root" }, ce = {
+  class: "d-option",
+  style: { "border-bottom": "none" }
+}, pe = { class: "d-option-title" }, ge = {
+  class: "flex w-full",
+  style: { "flex-wrap": "wrap", "padding-top": "0.25em" }
+}, ve = { class: "d-option" }, fe = {
+  key: 0,
+  class: "d-option"
+}, ye = { class: "d-option-title" }, be = { style: { display: "flex", "flex-direction": "row", "flex-wrap": "wrap", "padding-top": "0.25em" } }, we = ["onClick"], De = {
+  class: "d-option",
+  style: { "padding-bottom": "0.5em" }
+}, ke = { class: "d-option-title" }, Ce = { style: { flex: "1 1 auto" } }, Ve = {
+  key: 1,
+  class: "d-option"
+}, Se = {
+  key: 2,
+  class: "d-option"
+}, Pe = {
+  key: 4,
+  class: "d-option",
+  style: { "padding-bottom": "0.5em" }
+}, _e = { class: "d-option-title" }, Le = { style: { flex: "1 1 auto" } }, Te = {
+  key: 5,
+  class: "d-option"
+}, Ee = { class: "d-option-title" }, xe = { style: { flex: "1 1 auto" } }, Be = {
+  key: 0,
+  class: "d-option-row",
+  style: { "padding-top": "1em" }
+};
+function Re(e, t, s, a, r, i) {
+  const o = g("CButton"), c = g("CSlider"), m = g("ThemeColorRow"), P = g("GradientPicker"), F = g("CSwitch");
+  return l(), u("div", he, [
+    n("div", ce, [
+      n("div", pe, h(e.$t("_common:background").capitalize()), 1),
+      n("div", ge, [
+        (l(!0), u(V, null, L([
+          { label: e.$t("_common:image"), value: "image" },
+          { label: e.$t("_common:color"), value: "color" },
+          { label: e.$t("_common:gradient"), value: "gradient" },
+          { label: e.$t("_common:video"), value: "video" }
+        ], ({ label: d, value: D }, E) => (l(), S(o, {
+          key: d + E,
+          type: e.type === D ? "secondary" : "none",
+          pattern: e.type === D ? "primary" : "secondary",
+          size: "normal",
+          style: { margin: "0 3px 3px 0", padding: "0 0.5em", height: "2em", "font-size": "15px", "border-radius": "4px" },
+          onClick: ($e) => i.setType(D)
+        }, {
+          default: k(() => [
+            C(h(d.capitalize()), 1)
+          ]),
+          _: 2
+        }, 1032, ["type", "pattern", "onClick"]))), 128))
+      ])
+    ]),
+    e.type === "image" ? (l(), u(V, { key: 0 }, [
+      n("div", ve, [
+        n("div", {
+          style: b({ backgroundImage: `url(${e.resourceUrl})` }),
+          class: "d-option-button-image",
+          onClick: t[0] || (t[0] = (d) => i.openResourceModal(e.type))
+        }, null, 4)
+      ]),
+      e.resourceUrl ? (l(), u("div", fe, [
+        n("div", ye, h(e.$t("_common:filter").capitalize()), 1),
+        n("div", be, [
+          (l(), u(V, null, L([
+            "",
+            "sepia(30%) brightness(110%) contrast(110%) grayscale(100%)",
+            "brightness(110%) contrast(90%) saturate(150%)",
+            "sepia(50%) contrast(140%)",
+            "sepia(25%) brightness(95%) contrast(95%) saturate(150%)",
+            "blur(0px) sepia(15%) saturate(130%) hue-rotate(-30deg)"
+          ], (d, D) => n("div", {
+            key: D,
+            class: T([{ "is-active": e.filter === d }, "bg-filter"]),
+            onClick: (E) => e.filter = d
+          }, [
+            n("div", {
+              style: b({
+                filter: d,
+                backgroundImage: `url(${r.getUnsplashResized(e.resourceUrl, {
+                  w: 200
+                })})`
+              }),
+              class: "bg-filter-preview"
+            }, null, 4)
+          ], 10, we)), 64))
+        ])
+      ])) : p("", !0),
+      n("div", De, [
+        n("div", ke, [
+          n("div", Ce, h(e.$t("_common:position").capitalize()), 1),
+          v(c, {
+            "model-value": e.position || 0,
+            type: "secondary",
+            size: "small",
+            rounded: "",
+            style: { width: "80px", margin: "0" },
+            "onUpdate:modelValue": t[1] || (t[1] = (d) => e.position = d)
+          }, null, 8, ["model-value"])
+        ])
+      ])
+    ], 64)) : p("", !0),
+    e.type === "video" ? (l(), u("div", Ve, [
+      n("div", {
+        style: b({ backgroundImage: `url(${e.video.thumbnail})` }),
+        class: "d-option-button-image",
+        onClick: t[2] || (t[2] = (d) => i.openResourceModal(e.type))
+      }, null, 4)
+    ])) : e.type === "color" ? (l(), u("div", Se, [
+      v(m, {
+        value: e.backgroundColor || "",
+        class: "d-option-title",
+        onChange: t[3] || (t[3] = (d) => e.backgroundColor = d)
+      }, {
+        default: k(() => [
+          C(h(e.$t("colorLabel")), 1)
+        ]),
+        _: 1
+      }, 8, ["value"])
+    ])) : e.type === "gradient" ? (l(), S(P, {
+      key: 3,
+      value: e.gradient || {},
+      onInput: t[4] || (t[4] = (d) => e.gradient = d)
+    }, null, 8, ["value"])) : p("", !0),
+    ["image", "video"].includes(e.type) ? (l(), u("div", Pe, [
+      n("div", _e, [
+        n("div", Le, h(e.$t("_common:blur").capitalize()), 1),
+        v(c, {
+          "model-value": e.blur || 0,
+          max: 30,
+          type: "secondary",
+          size: "small",
+          rounded: "",
+          style: { width: "80px", margin: "0" },
+          "onUpdate:modelValue": t[5] || (t[5] = (d) => e.blur = d)
+        }, null, 8, ["model-value"])
+      ])
+    ])) : p("", !0),
+    ["image", "video"].includes(e.type) ? (l(), u("div", Te, [
+      n("div", Ee, [
+        n("div", xe, h(e.$t("overlay.title")), 1),
+        v(F, {
+          "model-value": !!e.overlay,
+          size: "small",
+          type: "secondary",
+          style: { "margin-right": "0" },
+          "onUpdate:modelValue": i.toggleOverlay
+        }, null, 8, ["model-value", "onUpdate:modelValue"])
+      ]),
+      e.overlay ? (l(), u("div", Be, [
+        v(m, {
+          value: e.overlayColor || "",
+          placement: "top-end",
+          onChange: t[6] || (t[6] = (d) => e.overlayColor = d)
+        }, {
+          default: k(() => [
+            C(h(e.$t("overlay.colorLabel")), 1)
+          ]),
+          _: 1
+        }, 8, ["value"])
+      ])) : p("", !0)
+    ])) : p("", !0)
+  ]);
+}
+const Ie = /* @__PURE__ */ w(me, [["render", Re], ["__scopeId", "data-v-6f8a8437"]]);
+export {
+  Ie as default
+};