@cling-se/widget 0.15.3 → 0.15.5

package/dist/CoverBlockSettings-WYZsCdky.js

@@ -0,0 +1,659 @@
+import { m as c } from "./mapFormMixin-BZf4RJIE.js";
+import { T as u } from "./ThemeColorRow-D3fav4Sl.js";
+import { d as o, b as h } from "./CDropdownItem-DiLisSei.js";
+import { n as r, X as p, P as m } from "./main-U22_wtg0.js";
+const f = {
+  name: "CSliderThumb",
+  inheritAttrs: !1,
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    type: {
+      type: String,
+      default: ""
+    },
+    tooltip: {
+      type: Boolean,
+      default: !0
+    },
+    customFormatter: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      isFocused: !1,
+      dragging: !1,
+      startX: 0,
+      startPosition: 0,
+      newPosition: null,
+      oldValue: this.value
+    };
+  },
+  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.value - this.min) / (this.max - this.min) * 100}%`;
+    },
+    wrapperStyle() {
+      return { left: this.currentPosition };
+    },
+    tooltipLabel() {
+      return typeof this.customFormatter == "function" ? this.customFormatter(this.value) : this.value.toString();
+    }
+  },
+  methods: {
+    onFocus() {
+      this.isFocused = !0;
+    },
+    onBlur() {
+      this.isFocused = !1;
+    },
+    onButtonDown(s) {
+      this.disabled || (s.preventDefault(), this.onDragStart(s), 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.value === 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.value === 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.value === this.min || (this.newPosition = 0, this.setPosition(this.newPosition), this.$parent.emitValue("change"));
+    },
+    onEndKeyDown() {
+      this.disabled || this.value === this.max || (this.newPosition = 100, this.setPosition(this.newPosition), this.$parent.emitValue("change"));
+    },
+    onDragStart(s) {
+      this.dragging = !0, this.$emit("dragstart"), s.type === "touchstart" && (s.clientX = s.touches[0].clientX), this.startX = s.clientX, this.startPosition = parseFloat(this.currentPosition), this.newPosition = this.startPosition;
+    },
+    onDragging(s) {
+      if (this.dragging) {
+        s.type === "touchmove" && (s.clientX = s.touches[0].clientX);
+        const t = (s.clientX - this.startX) / this.$parent.sliderSize() * 100;
+        this.newPosition = this.startPosition + t, this.setPosition(this.newPosition);
+      }
+    },
+    onDragEnd() {
+      this.dragging = !1, this.$emit("dragend"), this.value !== 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(s) {
+      if (s === null || isNaN(s))
+        return;
+      s < 0 ? s = 0 : s > 100 && (s = 100);
+      const t = 100 / ((this.max - this.min) / this.step);
+      let e = Math.round(s / t) * t / 100 * (this.max - this.min) + this.min;
+      e = parseFloat(e.toFixed(this.precision)), this.$emit("input", e), !this.dragging && e !== this.oldValue && (this.oldValue = e);
+    }
+  }
+};
+var g = function() {
+  var t = this, i = t._self._c;
+  return i("div", { staticClass: "c-slider-thumb-wrapper", class: { "is-dragging": t.dragging }, style: t.wrapperStyle }, [i("div", t._b({ staticClass: "c-slider-thumb", attrs: { tabindex: t.disabled ? !1 : 0 }, on: { mousedown: t.onButtonDown, touchstart: t.onButtonDown, focus: t.onFocus, blur: t.onBlur, keydown: [function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "left", 37, e.key, ["Left", "ArrowLeft"]) || "button" in e && e.button !== 0 ? null : (e.preventDefault(), t.onLeftKeyDown.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "right", 39, e.key, ["Right", "ArrowRight"]) || "button" in e && e.button !== 2 ? null : (e.preventDefault(), t.onRightKeyDown.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "down", 40, e.key, ["Down", "ArrowDown"]) ? null : (e.preventDefault(), t.onLeftKeyDown.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "up", 38, e.key, ["Up", "ArrowUp"]) ? null : (e.preventDefault(), t.onRightKeyDown.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "home", void 0, e.key, void 0) ? null : (e.preventDefault(), t.onHomeKeyDown.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "end", void 0, e.key, void 0) ? null : (e.preventDefault(), t.onEndKeyDown.apply(null, arguments));
+  }] } }, "div", t.$attrs, !1))]);
+}, v = [], y = /* @__PURE__ */ r(
+  f,
+  g,
+  v,
+  !1,
+  null,
+  null
+);
+const _ = y.exports, b = {
+  name: "CSliderTick",
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    position() {
+      const s = (this.value - this.$parent.min) / (this.$parent.max - this.$parent.min) * 100;
+      return s >= 0 && s <= 100 ? s : 0;
+    },
+    hidden() {
+      return this.value === this.$parent.min || this.value === this.$parent.max;
+    }
+  },
+  created() {
+    if (!this.$parent.$data._isSlider)
+      throw this.$destroy(), new Error("You should wrap bSliderTick on a bSlider");
+  },
+  methods: {
+    getTickStyle(s) {
+      return { left: `${s}%` };
+    }
+  }
+};
+var C = function() {
+  var t = this, i = t._self._c;
+  return i("div", { staticClass: "c-slider-tick", class: { "is-tick-hidden": t.hidden }, style: t.getTickStyle(t.position) }, [t.$slots.default ? i("span", { staticClass: "c-slider-tick-label" }, [t._t("default")], 2) : t._e()]);
+}, w = [], x = /* @__PURE__ */ r(
+  b,
+  C,
+  w,
+  !1,
+  null,
+  null
+);
+const k = x.exports, S = {
+  name: "CSlider",
+  components: {
+    CSliderThumb: _,
+    CSliderTick: k
+  },
+  props: {
+    value: {
+      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
+    }
+  },
+  data() {
+    return {
+      value1: null,
+      value2: null,
+      dragging: !1,
+      isRange: !1,
+      _isSlider: !0
+      // Used by Thumb and Tick
+    };
+  },
+  computed: {
+    newTooltipType() {
+      return this.tooltipType ? this.tooltipType : this.type;
+    },
+    tickValues() {
+      if (!this.ticks || this.min > this.max || this.step === 0)
+        return [];
+      const s = [];
+      for (let t = this.min + this.step; t < this.max; t += this.step)
+        s.push(t);
+      return s;
+    },
+    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 s = [this.min, this.max, this.step].map((t) => {
+        const i = `${t}`.split(".")[1];
+        return i ? i.length : 0;
+      });
+      return Math.max(...s);
+    },
+    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.
+     */
+    value(s) {
+      this.setValues(s);
+    },
+    value1() {
+      this.onInternalValueUpdate();
+    },
+    value2() {
+      this.onInternalValueUpdate();
+    },
+    min() {
+      this.setValues(this.value);
+    },
+    max() {
+      this.setValues(this.value);
+    }
+  },
+  created() {
+    this.isThumbReversed = !1, this.isTrackClickDisabled = !1, this.setValues(this.value);
+  },
+  methods: {
+    setValues(s) {
+      if (!(this.min > this.max))
+        if (Array.isArray(s)) {
+          this.isRange = !0;
+          const t = typeof s[0] != "number" || isNaN(s[0]) ? this.min : o(s[0], this.min, this.max), i = typeof s[1] != "number" || isNaN(s[1]) ? this.max : o(s[1], this.min, this.max);
+          this.value1 = this.isThumbReversed ? i : t, this.value2 = this.isThumbReversed ? t : i;
+        } else
+          this.isRange = !1, this.value1 = isNaN(s) ? this.min : o(s, this.min, this.max), this.value2 = null;
+    },
+    onInternalValueUpdate() {
+      this.isRange && (this.isThumbReversed = this.value1 > this.value2), (!this.lazy || !this.dragging) && this.emitValue("input"), this.dragging && this.emitValue("dragging");
+    },
+    sliderSize() {
+      return this.$refs.slider.getBoundingClientRect().width;
+    },
+    onSliderClick(s) {
+      if (this.disabled || this.isTrackClickDisabled)
+        return;
+      const t = this.$refs.slider.getBoundingClientRect().left, i = (s.clientX - t) / this.sliderSize() * 100, e = this.min + i * (this.max - this.min) / 100, a = Math.abs(e - this.value1);
+      if (this.isRange) {
+        const n = Math.abs(e - this.value2);
+        if (a <= n) {
+          if (a < this.step / 2)
+            return;
+          this.$refs.button1.setPosition(i);
+        } else {
+          if (n < this.step / 2)
+            return;
+          this.$refs.button2.setPosition(i);
+        }
+      } else {
+        if (a < this.step / 2)
+          return;
+        this.$refs.button1.setPosition(i);
+      }
+      this.emitValue("change");
+    },
+    onDragStart() {
+      this.dragging = !0, this.$emit("dragstart");
+    },
+    onDragEnd() {
+      this.isTrackClickDisabled = !0, setTimeout(() => {
+        this.isTrackClickDisabled = !1;
+      }, 0), this.dragging = !1, this.$emit("dragend"), this.lazy && this.emitValue("input");
+    },
+    emitValue(s) {
+      this.$emit(
+        s,
+        this.isRange ? [this.minValue, this.maxValue] : this.value1
+      );
+    }
+  }
+};
+var $ = function() {
+  var t = this, i = t._self._c;
+  return i("div", { staticClass: "c-slider", class: [`is-${t.size}`, `is-${t.type}`, t.rootClasses], on: { click: t.onSliderClick } }, [i("div", { ref: "slider", staticClass: "c-slider-track" }, [i("div", { staticClass: "c-slider-fill", style: t.barStyle }), t.ticks ? t._l(t.tickValues, function(e, a) {
+    return i("CSliderTick", { key: a, attrs: { value: e } });
+  }) : t._e(), t._t("default"), i("CSliderThumb", { ref: "button1", attrs: { type: `is-${t.newTooltipType}`, tooltip: t.tooltip, "custom-formatter": t.customFormatter, "aria-valuenow": t.value1, "aria-valuemin": t.min, "aria-valuemax": t.max, "aria-label": Array.isArray(t.ariaLabel) ? t.ariaLabel[0] : t.ariaLabel, "aria-disabled": t.disabled, role: "slider", "aria-orientation": "horizontal" }, on: { dragstart: t.onDragStart, dragend: t.onDragEnd }, model: { value: t.value1, callback: function(e) {
+    t.value1 = e;
+  }, expression: "value1" } }), t.isRange ? i("CSliderThumb", { ref: "button2", attrs: { type: t.newTooltipType, tooltip: t.tooltip, "custom-formatter": t.customFormatter, "aria-valuenow": t.value2, "aria-valuemin": t.min, "aria-valuemax": t.max, "aria-label": Array.isArray(t.ariaLabel) ? t.ariaLabel[1] : "", "aria-disabled": t.disabled, role: "slider", "aria-orientation": "horizontal" }, on: { dragstart: t.onDragStart, dragend: t.onDragEnd }, model: { value: t.value2, callback: function(e) {
+    t.value2 = e;
+  }, expression: "value2" } }) : t._e()], 2)]);
+}, D = [], P = /* @__PURE__ */ r(
+  S,
+  $,
+  D,
+  !1,
+  null,
+  null
+);
+const R = P.exports, T = (s, t, i, e) => Math.atan2(s - i, t - e) * (180 / Math.PI) * -1 + 180, L = {
+  name: "DegreePicker",
+  props: {
+    value: {
+      type: Number,
+      required: !0
+    }
+  },
+  computed: {
+    degreesStyle() {
+      return { transform: `rotate(${this.value}deg)` };
+    }
+  },
+  methods: {
+    onButtonDown(s) {
+      let t = this.mouseDownHandler(s);
+      const i = (e) => {
+        t = this.mouseMoveHandler(e, t) || t;
+      };
+      window.addEventListener("mousemove", i), window.addEventListener(
+        "mouseup",
+        () => {
+          window.removeEventListener("mousemove", i);
+        },
+        { once: !0 }
+      );
+    },
+    mouseMoveHandler(s, { centerX: t, centerY: i }) {
+      const e = T(
+        s.clientX,
+        s.clientY,
+        t,
+        i
+      );
+      this.$emit("input", parseInt(e, 10));
+    },
+    mouseDownHandler(s) {
+      const i = s.target.getBoundingClientRect(), e = i.top + parseInt(8 - window.pageYOffset, 10), a = i.left + parseInt(8 - window.pageXOffset, 10);
+      return { centerY: e, centerX: a };
+    }
+  }
+};
+var V = function() {
+  var t = this, i = t._self._c;
+  return i("div", { staticClass: "gradient-degrees-options" }, [i("div", { staticStyle: { "pointer-events": "none", "user-select": "none", "padding-right": "0.5em", opacity: "0.75" } }, [i("div", [t._v(t._s(t.value) + "°")])]), i("div", { staticClass: "gradient-degrees", on: { mousedown: t.onButtonDown } }, [i("div", { staticClass: "gradient-degree-center", style: t.degreesStyle }, [i("div", { staticClass: "gradient-degree-pointer" })])])]);
+}, F = [], E = /* @__PURE__ */ r(
+  L,
+  V,
+  F,
+  !1,
+  null,
+  "9d7cb204"
+);
+const z = E.exports, B = {
+  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: u,
+    DegreePicker: z
+  },
+  props: {
+    value: {
+      type: Object,
+      required: !0
+    }
+  },
+  data() {
+    return {
+      set: p,
+      defaultValue: {
+        type: "linear",
+        degree: 0,
+        colors: [
+          { percent: 0, color: "#000000" },
+          { percent: 100, color: "#0095FF" }
+        ]
+      }
+    };
+  },
+  computed: {
+    internalValue: {
+      get() {
+        return { ...this.defaultValue, ...this.value };
+      },
+      set(s) {
+        this.$emit("input", s);
+      }
+    }
+  },
+  methods: {
+    updateData(s, t) {
+      let i = t;
+      if (s === "colors") {
+        const { i: e, color: a, percent: n } = t || {};
+        i = this.internalValue.colors.map(
+          (l, d) => d === e ? { color: a, percent: n } : l
+        );
+      }
+      this.internalValue = { ...this.internalValue, [s]: i };
+    }
+  }
+};
+var M = function() {
+  var t = this, i = t._self._c;
+  return i("div", [i("ThemeColorRow", { staticClass: "d-option-title d-option", attrs: { value: t.internalValue.colors[0].color }, on: { change: function(e) {
+    return t.updateData("colors", { i: 0, percent: 0, color: e });
+  } } }, [t._v(" " + t._s(t.$t("startColor")) + " ")]), i("ThemeColorRow", { staticClass: "d-option-title d-option", attrs: { value: t.internalValue.colors[1].color }, on: { change: function(e) {
+    return t.updateData("colors", { i: 1, percent: 100, color: e });
+  } } }, [t._v(" " + t._s(t.$t("stopColor")) + " ")]), i("div", { staticClass: "d-option flex w-full items-center" }, [i("div", { staticClass: "d-option-title", staticStyle: { flex: "1 1 auto" } }, [t._v(" " + t._s(t.$t("rotation")) + " ")]), i("DegreePicker", { staticStyle: { "padding-right": "4px" }, attrs: { value: t.internalValue.degree }, on: { input: function(e) {
+    return t.updateData("degree", e);
+  } } })], 1)], 1);
+}, O = [], N = /* @__PURE__ */ r(
+  B,
+  M,
+  O,
+  !1,
+  null,
+  "8dae9e23"
+);
+const U = N.exports, X = {
+  image: () => import("./ImageSelectModal-De64vGSr.js"),
+  video: () => import("./VideoSelectModal-CzO8EMg9.js")
+}, A = {
+  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: u,
+    GradientPicker: U,
+    CSlider: R,
+    CSwitch: h
+  },
+  mixins: [
+    c(
+      [
+        "type",
+        "video",
+        "resourceUrl",
+        "filter",
+        "blur",
+        "position",
+        "overlay",
+        "overlayColor",
+        "gradient",
+        "backgroundColor"
+      ],
+      { useEmit: !1 }
+    )
+  ],
+  data() {
+    return {
+      getUnsplashResized: m
+    };
+  },
+  methods: {
+    toggleOverlay(s) {
+      s && !this.overlayColor ? (this.overlayColor = "hsla(205, 100%, 50%, 0.5)", this.overlay = !0) : this.overlay = s;
+    },
+    setType(s) {
+      s === "color" && !this.backgroundColor ? this.backgroundColor = "hsl(134, 74%, 39%)" : s === "video" && !this.video ? this.video = {
+        provider: "pexels",
+        id: "3214448",
+        thumbnail: "https://images.pexels.com/videos/3214448/free-video-3214448.jpg?fit=crop&w=1200&h=630&auto=compress&cs=tinysrgb",
+        url: "https://player.vimeo.com/external/372567192.hd.mp4?s=c186273e04cc5015efecd863d8256eb99bc034fd&profile_id=172&oauth2_token_id=57447761"
+      } : s === "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)) : s === "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 = s;
+    },
+    openResourceModal(s) {
+      this.$modal.show(
+        X[s],
+        {},
+        {},
+        {
+          input: (t) => {
+            s === "image" ? this.resourceUrl = t : s === "video" && (this.video = t);
+          }
+        }
+      );
+    }
+  }
+};
+var I = function() {
+  var t = this, i = t._self._c;
+  return i("div", { staticClass: "d-root" }, [i("div", { staticClass: "d-option", staticStyle: { "border-bottom": "none" } }, [i("div", { staticClass: "d-option-title" }, [t._v(" " + t._s(t.$t("_common:background").capitalize()) + " ")]), i("div", { staticClass: "flex w-full", staticStyle: { "flex-wrap": "wrap", "padding-top": "0.25em" } }, t._l([
+    { label: t.$t("_common:image"), value: "image" },
+    { label: t.$t("_common:color"), value: "color" },
+    { label: t.$t("_common:gradient"), value: "gradient" },
+    { label: t.$t("_common:video"), value: "video" }
+  ], function({ label: e, value: a }, n) {
+    return i("CButton", { key: e + n, staticStyle: { margin: "0 3px 3px 0", padding: "0 0.5em", height: "2em", "font-size": "15px", "border-radius": "4px" }, attrs: { type: t.type === a ? "secondary" : "none", pattern: t.type === a ? "primary" : "secondary", size: "normal" }, on: { click: function(l) {
+      return t.setType(a);
+    } } }, [t._v(" " + t._s(e.capitalize()) + " ")]);
+  }), 1)]), t.type === "image" ? [i("div", { staticClass: "d-option-button-image", style: { backgroundImage: `url(${t.resourceUrl})` }, on: { click: function(e) {
+    return t.openResourceModal(t.type);
+  } } }), t.resourceUrl ? i("div", { staticClass: "d-option" }, [i("div", { staticClass: "d-option-title" }, [t._v(" " + t._s(t.$t("_common:filter").capitalize()) + " ")]), i("div", { staticStyle: { display: "flex", "flex-direction": "row", "flex-wrap": "wrap", "padding-top": "0.25em" } }, t._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)"
+  ], function(e, a) {
+    return i("div", { key: a, staticClass: "bg-filter", class: { "is-active": t.filter === e }, on: { click: function(n) {
+      t.filter = e;
+    } } }, [i("div", { staticClass: "bg-filter-preview", style: {
+      filter: e,
+      backgroundImage: `url(${t.getUnsplashResized(t.resourceUrl, {
+        w: 200
+      })})`
+    } })]);
+  }), 0)]) : t._e(), i("div", { staticClass: "d-option", staticStyle: { "padding-bottom": "0.5em" } }, [i("div", { staticClass: "d-option-title" }, [i("div", { staticStyle: { flex: "1 1 auto" } }, [t._v(" " + t._s(t.$t("_common:position").capitalize()) + " ")]), i("CSlider", { staticStyle: { width: "80px", margin: "0" }, attrs: { value: t.position || 0, type: "secondary", size: "small", rounded: "" }, on: { input: function(e) {
+    t.position = e;
+  } } })], 1)])] : t._e(), t.type === "video" ? [i("div", { staticClass: "d-option-button-image", style: { backgroundImage: `url(${t.video.thumbnail})` }, on: { click: function(e) {
+    return t.openResourceModal(t.type);
+  } } })] : t.type === "color" ? i("div", { staticClass: "d-option" }, [i("ThemeColorRow", { staticClass: "d-option-title", attrs: { value: t.backgroundColor || "" }, on: { change: function(e) {
+    t.backgroundColor = e;
+  } } }, [t._v(" " + t._s(t.$t("colorLabel")) + " ")])], 1) : t.type === "gradient" ? i("GradientPicker", { attrs: { value: t.gradient || {} }, on: { input: function(e) {
+    t.gradient = e;
+  } } }) : t._e(), ["image", "video"].includes(t.type) ? i("div", { staticClass: "d-option", staticStyle: { "padding-bottom": "0.5em" } }, [i("div", { staticClass: "d-option-title" }, [i("div", { staticStyle: { flex: "1 1 auto" } }, [t._v(" " + t._s(t.$t("_common:blur").capitalize()) + " ")]), i("CSlider", { staticStyle: { width: "80px", margin: "0" }, attrs: { value: t.blur || 0, max: 30, type: "secondary", size: "small", rounded: "" }, on: { input: function(e) {
+    t.blur = e;
+  } } })], 1)]) : t._e(), ["image", "video"].includes(t.type) ? i("div", { staticClass: "d-option" }, [i("div", { staticClass: "d-option-title" }, [i("div", { staticStyle: { flex: "1 1 auto" } }, [t._v(t._s(t.$t("overlay.title")))]), i("CSwitch", { staticStyle: { "margin-right": "0" }, attrs: { value: !!t.overlay, size: "small", type: "secondary" }, on: { input: t.toggleOverlay } })], 1), t.overlay ? i("div", { staticClass: "d-option-row", staticStyle: { "padding-top": "1em" } }, [i("ThemeColorRow", { attrs: { value: t.overlayColor || "", placement: "top-end" }, on: { change: function(e) {
+    t.overlayColor = e;
+  } } }, [t._v(" " + t._s(t.$t("overlay.colorLabel")) + " ")])], 1) : t._e()]) : t._e()], 2);
+}, K = [], H = /* @__PURE__ */ r(
+  A,
+  I,
+  K,
+  !1,
+  null,
+  "ee1f0831"
+);
+const J = H.exports;
+export {
+  J as default
+};

package/dist/{DocAnswer-BlxFv_Gc.js → DocAnswer--FfsnnTB.js}

@@ -1,5 +1,5 @@
-import r from "./AnswerModal-Cnp43tGo.js";
-import { n as o } from "./main-BIwKzAN8.js";
+import r from "./AnswerModal-C3r9vyki.js";
+import { n as o } from "./main-U22_wtg0.js";
 const t = {
   components: {
     AnswerModal: r