@getodk/web-forms 0.23.1 → 1.0.0

package/dist/CanvasBlock-DWoXGSW9.js

@@ -0,0 +1,1171 @@
+import { resolveComponent as T, openBlock as d, createElementBlock as m, mergeProps as P, createCommentVNode as k, createVNode as C, withCtx as U, Transition as Ue, createElementVNode as L, shallowRef as j, computed as w, onUnmounted as ge, defineComponent as be, inject as ke, ref as S, watch as ye, onBeforeUnmount as Ae, Fragment as Se, normalizeClass as $, unref as a, normalizeStyle as Ve, createBlock as B, useModel as $e, onMounted as Fe, createTextVNode as Ze, toDisplayString as G, renderList as Xe, mergeModels as re } from "vue";
+import { A as _e } from "./ActionsInfoDialog-B8AZQOuY.js";
+import { B as Ne, k as je, l as Ge, O as Ye, m as Ke, C as We, n as ae, r as qe, o as Je, q as Qe, Z as Y, T as Ce, I as x, _ as we, u as en, v as se, j as nn } from "./index-Cg9qvMI9.js";
+var tn = ({ dt: e }) => `
+.p-colorpicker {
+    display: inline-block;
+    position: relative;
+}
+
+.p-colorpicker-dragging {
+    cursor: pointer;
+}
+
+.p-colorpicker-preview {
+    width: ${e("colorpicker.preview.width")};
+    height: ${e("colorpicker.preview.height")};
+    padding: 0;
+    border: 0 none;
+    border-radius: ${e("colorpicker.preview.border.radius")};
+    transition: background ${e("colorpicker.transition.duration")}, color ${e("colorpicker.transition.duration")}, border-color ${e("colorpicker.transition.duration")}, outline-color ${e("colorpicker.transition.duration")}, box-shadow ${e("colorpicker.transition.duration")};
+    outline-color: transparent;
+    cursor: pointer;
+}
+
+.p-colorpicker-preview:enabled:focus-visible {
+    border-color: ${e("colorpicker.preview.focus.border.color")};
+    box-shadow: ${e("colorpicker.preview.focus.ring.shadow")};
+    outline: ${e("colorpicker.preview.focus.ring.width")} ${e("colorpicker.preview.focus.ring.style")} ${e("colorpicker.preview.focus.ring.color")};
+    outline-offset: ${e("colorpicker.preview.focus.ring.offset")};
+}
+
+.p-colorpicker-panel {
+    background: ${e("colorpicker.panel.background")};
+    border: 1px solid ${e("colorpicker.panel.border.color")};
+    border-radius: ${e("colorpicker.panel.border.radius")};
+    box-shadow: ${e("colorpicker.panel.shadow")};
+    width: 193px;
+    height: 166px;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.p-colorpicker-panel-inline {
+    box-shadow: none;
+    position: static;
+}
+
+.p-colorpicker-content {
+    position: relative;
+}
+
+.p-colorpicker-color-selector {
+    width: 150px;
+    height: 150px;
+    inset-block-start: 8px;
+    inset-inline-start: 8px;
+    position: absolute;
+}
+
+.p-colorpicker-color-background {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.p-colorpicker-color-handle {
+    position: absolute;
+    inset-block-start: 0px;
+    inset-inline-start: 150px;
+    border-radius: 100%;
+    width: 10px;
+    height: 10px;
+    border-width: 1px;
+    border-style: solid;
+    margin: -5px 0 0 -5px;
+    cursor: pointer;
+    opacity: 0.85;
+    border-color: ${e("colorpicker.handle.color")};
+}
+
+.p-colorpicker-hue {
+    width: 17px;
+    height: 150px;
+    inset-block-start: 8px;
+    inset-inline-start: 167px;
+    position: absolute;
+    opacity: 0.85;
+    background: linear-gradient(0deg,
+        red 0,
+        #ff0 17%,
+        #0f0 33%,
+        #0ff 50%,
+        #00f 67%,
+        #f0f 83%,
+        red);
+}
+
+.p-colorpicker-hue-handle {
+    position: absolute;
+    inset-block-start: 150px;
+    inset-inline-start: 0px;
+    width: 21px;
+    margin-inline-start: -2px;
+    margin-block-start: -5px;
+    height: 10px;
+    border-width: 2px;
+    border-style: solid;
+    opacity: 0.85;
+    cursor: pointer;
+    border-color: ${e("colorpicker.handle.color")};
+}
+`, on = {
+  root: "p-colorpicker p-component",
+  preview: function(n) {
+    var t = n.props;
+    return ["p-colorpicker-preview", {
+      "p-disabled": t.disabled
+    }];
+  },
+  panel: function(n) {
+    var t = n.instance, o = n.props;
+    return ["p-colorpicker-panel", {
+      "p-colorpicker-panel-inline": o.inline,
+      "p-disabled": o.disabled,
+      "p-invalid": t.$invalid
+    }];
+  },
+  colorSelector: "p-colorpicker-color-selector",
+  colorBackground: "p-colorpicker-color-background",
+  colorHandle: "p-colorpicker-color-handle",
+  hue: "p-colorpicker-hue",
+  hueHandle: "p-colorpicker-hue-handle"
+}, ln = Ne.extend({
+  name: "colorpicker",
+  style: tn,
+  classes: on
+}), rn = {
+  name: "BaseColorPicker",
+  extends: Ge,
+  props: {
+    defaultColor: {
+      type: null,
+      default: "ff0000"
+    },
+    inline: {
+      type: Boolean,
+      default: !1
+    },
+    format: {
+      type: String,
+      default: "hex"
+    },
+    tabindex: {
+      type: String,
+      default: null
+    },
+    autoZIndex: {
+      type: Boolean,
+      default: !0
+    },
+    baseZIndex: {
+      type: Number,
+      default: 0
+    },
+    appendTo: {
+      type: [String, Object],
+      default: "body"
+    },
+    inputId: {
+      type: String,
+      default: null
+    },
+    panelClass: null,
+    overlayClass: null
+  },
+  style: ln,
+  provide: function() {
+    return {
+      $pcColorPicker: this,
+      $parentInstance: this
+    };
+  }
+}, Ie = {
+  name: "ColorPicker",
+  extends: rn,
+  inheritAttrs: !1,
+  emits: ["change", "show", "hide"],
+  data: function() {
+    return {
+      overlayVisible: !1
+    };
+  },
+  hsbValue: null,
+  localHue: null,
+  outsideClickListener: null,
+  documentMouseMoveListener: null,
+  documentMouseUpListener: null,
+  scrollHandler: null,
+  resizeListener: null,
+  hueDragging: null,
+  colorDragging: null,
+  selfUpdate: null,
+  picker: null,
+  colorSelector: null,
+  colorHandle: null,
+  hueView: null,
+  hueHandle: null,
+  watch: {
+    modelValue: {
+      immediate: !0,
+      handler: function(n) {
+        this.hsbValue = this.toHSB(n), this.selfUpdate ? this.selfUpdate = !1 : this.updateUI();
+      }
+    }
+  },
+  beforeUnmount: function() {
+    this.unbindOutsideClickListener(), this.unbindDragListeners(), this.unbindResizeListener(), this.scrollHandler && (this.scrollHandler.destroy(), this.scrollHandler = null), this.picker && this.autoZIndex && Y.clear(this.picker), this.clearRefs();
+  },
+  mounted: function() {
+    this.updateUI();
+  },
+  methods: {
+    pickColor: function(n) {
+      var t = this.colorSelector.getBoundingClientRect(), o = t.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0), l = t.left + document.body.scrollLeft, i = Math.floor(100 * Math.max(0, Math.min(150, (n.pageX || n.changedTouches[0].pageX) - l)) / 150), u = Math.floor(100 * (150 - Math.max(0, Math.min(150, (n.pageY || n.changedTouches[0].pageY) - o))) / 150);
+      this.hsbValue = this.validateHSB({
+        h: this.localHue,
+        s: i,
+        b: u
+      }), this.selfUpdate = !0, this.updateColorHandle(), this.updateInput(), this.updateModel(n);
+    },
+    pickHue: function(n) {
+      var t = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+      this.localHue = Math.floor(360 * (150 - Math.max(0, Math.min(150, (n.pageY || n.changedTouches[0].pageY) - t))) / 150), this.hsbValue = this.validateHSB({
+        h: this.localHue,
+        s: 100,
+        b: 100
+      }), this.selfUpdate = !0, this.updateColorSelector(), this.updateHue(), this.updateModel(n), this.updateInput();
+    },
+    updateModel: function(n) {
+      var t = this.d_value;
+      switch (this.format) {
+        case "hex":
+          t = this.HSBtoHEX(this.hsbValue);
+          break;
+        case "rgb":
+          t = this.HSBtoRGB(this.hsbValue);
+          break;
+        case "hsb":
+          t = this.hsbValue;
+          break;
+      }
+      this.writeValue(t, n), this.$emit("change", {
+        event: n,
+        value: t
+      });
+    },
+    updateColorSelector: function() {
+      if (this.colorSelector) {
+        var n = this.validateHSB({
+          h: this.hsbValue.h,
+          s: 100,
+          b: 100
+        });
+        this.colorSelector.style.backgroundColor = "#" + this.HSBtoHEX(n);
+      }
+    },
+    updateColorHandle: function() {
+      this.colorHandle && (this.colorHandle.style.left = Math.floor(150 * this.hsbValue.s / 100) + "px", this.colorHandle.style.top = Math.floor(150 * (100 - this.hsbValue.b) / 100) + "px");
+    },
+    updateHue: function() {
+      this.hueHandle && (this.hueHandle.style.top = Math.floor(150 - 150 * this.hsbValue.h / 360) + "px");
+    },
+    updateInput: function() {
+      this.$refs.input && (this.$refs.input.style.backgroundColor = "#" + this.HSBtoHEX(this.hsbValue));
+    },
+    updateUI: function() {
+      this.updateHue(), this.updateColorHandle(), this.updateInput(), this.updateColorSelector();
+    },
+    validateHSB: function(n) {
+      return {
+        h: Math.min(360, Math.max(0, n.h)),
+        s: Math.min(100, Math.max(0, n.s)),
+        b: Math.min(100, Math.max(0, n.b))
+      };
+    },
+    validateRGB: function(n) {
+      return {
+        r: Math.min(255, Math.max(0, n.r)),
+        g: Math.min(255, Math.max(0, n.g)),
+        b: Math.min(255, Math.max(0, n.b))
+      };
+    },
+    validateHEX: function(n) {
+      var t = 6 - n.length;
+      if (t > 0) {
+        for (var o = [], l = 0; l < t; l++)
+          o.push("0");
+        o.push(n), n = o.join("");
+      }
+      return n;
+    },
+    HEXtoRGB: function(n) {
+      var t = parseInt(n.indexOf("#") > -1 ? n.substring(1) : n, 16);
+      return {
+        r: t >> 16,
+        g: (t & 65280) >> 8,
+        b: t & 255
+      };
+    },
+    HEXtoHSB: function(n) {
+      return this.RGBtoHSB(this.HEXtoRGB(n));
+    },
+    RGBtoHSB: function(n) {
+      var t = {
+        h: 0,
+        s: 0,
+        b: 0
+      }, o = Math.min(n.r, n.g, n.b), l = Math.max(n.r, n.g, n.b), i = l - o;
+      return t.b = l, t.s = l !== 0 ? 255 * i / l : 0, t.s !== 0 ? n.r === l ? t.h = (n.g - n.b) / i : n.g === l ? t.h = 2 + (n.b - n.r) / i : t.h = 4 + (n.r - n.g) / i : t.h = -1, t.h *= 60, t.h < 0 && (t.h += 360), t.s *= 100 / 255, t.b *= 100 / 255, t;
+    },
+    HSBtoRGB: function(n) {
+      var t = {
+        r: null,
+        g: null,
+        b: null
+      }, o = Math.round(n.h), l = Math.round(n.s * 255 / 100), i = Math.round(n.b * 255 / 100);
+      if (l === 0)
+        t = {
+          r: i,
+          g: i,
+          b: i
+        };
+      else {
+        var u = i, r = (255 - l) * i / 255, v = (u - r) * (o % 60) / 60;
+        o === 360 && (o = 0), o < 60 ? (t.r = u, t.b = r, t.g = r + v) : o < 120 ? (t.g = u, t.b = r, t.r = u - v) : o < 180 ? (t.g = u, t.r = r, t.b = r + v) : o < 240 ? (t.b = u, t.r = r, t.g = u - v) : o < 300 ? (t.b = u, t.g = r, t.r = r + v) : o < 360 ? (t.r = u, t.g = r, t.b = u - v) : (t.r = 0, t.g = 0, t.b = 0);
+      }
+      return {
+        r: Math.round(t.r),
+        g: Math.round(t.g),
+        b: Math.round(t.b)
+      };
+    },
+    RGBtoHEX: function(n) {
+      var t = [n.r.toString(16), n.g.toString(16), n.b.toString(16)];
+      for (var o in t)
+        t[o].length === 1 && (t[o] = "0" + t[o]);
+      return t.join("");
+    },
+    HSBtoHEX: function(n) {
+      return this.RGBtoHEX(this.HSBtoRGB(n));
+    },
+    toHSB: function(n) {
+      var t;
+      if (n)
+        switch (this.format) {
+          case "hex":
+            t = this.HEXtoHSB(n);
+            break;
+          case "rgb":
+            t = this.RGBtoHSB(n);
+            break;
+          case "hsb":
+            t = n;
+            break;
+        }
+      else
+        t = this.HEXtoHSB(this.defaultColor);
+      return this.localHue == null || !this.overlayVisible ? this.localHue = t.h : t.h = this.localHue, t;
+    },
+    onOverlayEnter: function(n) {
+      this.updateUI(), this.alignOverlay(), this.bindOutsideClickListener(), this.bindScrollListener(), this.bindResizeListener(), this.autoZIndex && Y.set("overlay", n, this.baseZIndex, this.$primevue.config.zIndex.overlay), this.$emit("show");
+    },
+    onOverlayLeave: function() {
+      this.unbindOutsideClickListener(), this.unbindScrollListener(), this.unbindResizeListener(), this.clearRefs(), this.$emit("hide");
+    },
+    onOverlayAfterLeave: function(n) {
+      this.autoZIndex && Y.clear(n);
+    },
+    alignOverlay: function() {
+      this.appendTo === "self" ? Je(this.picker, this.$refs.input) : Qe(this.picker, this.$refs.input);
+    },
+    onInputClick: function() {
+      this.disabled || (this.overlayVisible = !this.overlayVisible);
+    },
+    onInputKeydown: function(n) {
+      switch (n.code) {
+        case "Space":
+          this.overlayVisible = !this.overlayVisible, n.preventDefault();
+          break;
+        case "Escape":
+        case "Tab":
+          this.overlayVisible = !1;
+          break;
+      }
+    },
+    onInputBlur: function(n) {
+      var t, o;
+      (t = (o = this.formField).onBlur) === null || t === void 0 || t.call(o);
+    },
+    onColorMousedown: function(n) {
+      this.disabled || (this.bindDragListeners(), this.onColorDragStart(n));
+    },
+    onColorDragStart: function(n) {
+      this.disabled || (this.colorDragging = !0, this.pickColor(n), this.$el.setAttribute("p-colorpicker-dragging", "true"), !this.isUnstyled && ae(this.$el, "p-colorpicker-dragging"), n.preventDefault());
+    },
+    onDrag: function(n) {
+      this.colorDragging && (this.pickColor(n), n.preventDefault()), this.hueDragging && (this.pickHue(n), n.preventDefault());
+    },
+    onDragEnd: function() {
+      this.colorDragging = !1, this.hueDragging = !1, this.$el.setAttribute("p-colorpicker-dragging", "false"), !this.isUnstyled && qe(this.$el, "p-colorpicker-dragging"), this.unbindDragListeners();
+    },
+    onHueMousedown: function(n) {
+      this.disabled || (this.bindDragListeners(), this.onHueDragStart(n));
+    },
+    onHueDragStart: function(n) {
+      this.disabled || (this.hueDragging = !0, this.pickHue(n), !this.isUnstyled && ae(this.$el, "p-colorpicker-dragging"));
+    },
+    isInputClicked: function(n) {
+      return this.$refs.input && this.$refs.input.isSameNode(n.target);
+    },
+    bindDragListeners: function() {
+      this.bindDocumentMouseMoveListener(), this.bindDocumentMouseUpListener();
+    },
+    unbindDragListeners: function() {
+      this.unbindDocumentMouseMoveListener(), this.unbindDocumentMouseUpListener();
+    },
+    bindOutsideClickListener: function() {
+      var n = this;
+      this.outsideClickListener || (this.outsideClickListener = function(t) {
+        n.overlayVisible && n.picker && !n.picker.contains(t.target) && !n.isInputClicked(t) && (n.overlayVisible = !1);
+      }, document.addEventListener("click", this.outsideClickListener, !0));
+    },
+    unbindOutsideClickListener: function() {
+      this.outsideClickListener && (document.removeEventListener("click", this.outsideClickListener, !0), this.outsideClickListener = null);
+    },
+    bindScrollListener: function() {
+      var n = this;
+      this.scrollHandler || (this.scrollHandler = new We(this.$refs.container, function() {
+        n.overlayVisible && (n.overlayVisible = !1);
+      })), this.scrollHandler.bindScrollListener();
+    },
+    unbindScrollListener: function() {
+      this.scrollHandler && this.scrollHandler.unbindScrollListener();
+    },
+    bindResizeListener: function() {
+      var n = this;
+      this.resizeListener || (this.resizeListener = function() {
+        n.overlayVisible && !Ke() && (n.overlayVisible = !1);
+      }, window.addEventListener("resize", this.resizeListener));
+    },
+    unbindResizeListener: function() {
+      this.resizeListener && (window.removeEventListener("resize", this.resizeListener), this.resizeListener = null);
+    },
+    bindDocumentMouseMoveListener: function() {
+      this.documentMouseMoveListener || (this.documentMouseMoveListener = this.onDrag.bind(this), document.addEventListener("mousemove", this.documentMouseMoveListener));
+    },
+    unbindDocumentMouseMoveListener: function() {
+      this.documentMouseMoveListener && (document.removeEventListener("mousemove", this.documentMouseMoveListener), this.documentMouseMoveListener = null);
+    },
+    bindDocumentMouseUpListener: function() {
+      this.documentMouseUpListener || (this.documentMouseUpListener = this.onDragEnd.bind(this), document.addEventListener("mouseup", this.documentMouseUpListener));
+    },
+    unbindDocumentMouseUpListener: function() {
+      this.documentMouseUpListener && (document.removeEventListener("mouseup", this.documentMouseUpListener), this.documentMouseUpListener = null);
+    },
+    pickerRef: function(n) {
+      this.picker = n;
+    },
+    colorSelectorRef: function(n) {
+      this.colorSelector = n;
+    },
+    colorHandleRef: function(n) {
+      this.colorHandle = n;
+    },
+    hueViewRef: function(n) {
+      this.hueView = n;
+    },
+    hueHandleRef: function(n) {
+      this.hueHandle = n;
+    },
+    clearRefs: function() {
+      this.picker = null, this.colorSelector = null, this.colorHandle = null, this.hueView = null, this.hueHandle = null;
+    },
+    onOverlayClick: function(n) {
+      Ye.emit("overlay-click", {
+        originalEvent: n,
+        target: this.$el
+      });
+    }
+  },
+  components: {
+    Portal: je
+  }
+};
+function A(e) {
+  "@babel/helpers - typeof";
+  return A = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(n) {
+    return typeof n;
+  } : function(n) {
+    return n && typeof Symbol == "function" && n.constructor === Symbol && n !== Symbol.prototype ? "symbol" : typeof n;
+  }, A(e);
+}
+function ue(e, n) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    n && (o = o.filter(function(l) {
+      return Object.getOwnPropertyDescriptor(e, l).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function ce(e) {
+  for (var n = 1; n < arguments.length; n++) {
+    var t = arguments[n] != null ? arguments[n] : {};
+    n % 2 ? ue(Object(t), !0).forEach(function(o) {
+      an(e, o, t[o]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ue(Object(t)).forEach(function(o) {
+      Object.defineProperty(e, o, Object.getOwnPropertyDescriptor(t, o));
+    });
+  }
+  return e;
+}
+function an(e, n, t) {
+  return (n = sn(n)) in e ? Object.defineProperty(e, n, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[n] = t, e;
+}
+function sn(e) {
+  var n = un(e, "string");
+  return A(n) == "symbol" ? n : n + "";
+}
+function un(e, n) {
+  if (A(e) != "object" || !e) return e;
+  var t = e[Symbol.toPrimitive];
+  if (t !== void 0) {
+    var o = t.call(e, n);
+    if (A(o) != "object") return o;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (n === "string" ? String : Number)(e);
+}
+var cn = ["id", "tabindex", "disabled"];
+function dn(e, n, t, o, l, i) {
+  var u = T("Portal");
+  return d(), m("div", P({
+    ref: "container",
+    class: e.cx("root")
+  }, e.ptmi("root")), [e.inline ? k("", !0) : (d(), m("input", P({
+    key: 0,
+    ref: "input",
+    id: e.inputId,
+    type: "text",
+    class: e.cx("preview"),
+    readonly: "",
+    tabindex: e.tabindex,
+    disabled: e.disabled,
+    onClick: n[0] || (n[0] = function() {
+      return i.onInputClick && i.onInputClick.apply(i, arguments);
+    }),
+    onKeydown: n[1] || (n[1] = function() {
+      return i.onInputKeydown && i.onInputKeydown.apply(i, arguments);
+    }),
+    onBlur: n[2] || (n[2] = function() {
+      return i.onInputBlur && i.onInputBlur.apply(i, arguments);
+    })
+  }, e.ptm("preview")), null, 16, cn)), C(u, {
+    appendTo: e.appendTo,
+    disabled: e.inline
+  }, {
+    default: U(function() {
+      return [C(Ue, P({
+        name: "p-connected-overlay",
+        onEnter: i.onOverlayEnter,
+        onLeave: i.onOverlayLeave,
+        onAfterLeave: i.onOverlayAfterLeave
+      }, e.ptm("transition")), {
+        default: U(function() {
+          return [e.inline || l.overlayVisible ? (d(), m("div", P({
+            key: 0,
+            ref: i.pickerRef,
+            class: [e.cx("panel"), e.panelClass, e.overlayClass],
+            onClick: n[11] || (n[11] = function() {
+              return i.onOverlayClick && i.onOverlayClick.apply(i, arguments);
+            })
+          }, ce(ce({}, e.ptm("panel")), e.ptm("overlay"))), [L("div", P({
+            class: e.cx("content")
+          }, e.ptm("content")), [L("div", P({
+            ref: i.colorSelectorRef,
+            class: e.cx("colorSelector"),
+            onMousedown: n[3] || (n[3] = function(r) {
+              return i.onColorMousedown(r);
+            }),
+            onTouchstart: n[4] || (n[4] = function(r) {
+              return i.onColorDragStart(r);
+            }),
+            onTouchmove: n[5] || (n[5] = function(r) {
+              return i.onDrag(r);
+            }),
+            onTouchend: n[6] || (n[6] = function(r) {
+              return i.onDragEnd();
+            })
+          }, e.ptm("colorSelector")), [L("div", P({
+            class: e.cx("colorBackground")
+          }, e.ptm("colorBackground")), [L("div", P({
+            ref: i.colorHandleRef,
+            class: e.cx("colorHandle")
+          }, e.ptm("colorHandle")), null, 16)], 16)], 16), L("div", P({
+            ref: i.hueViewRef,
+            class: e.cx("hue"),
+            onMousedown: n[7] || (n[7] = function(r) {
+              return i.onHueMousedown(r);
+            }),
+            onTouchstart: n[8] || (n[8] = function(r) {
+              return i.onHueDragStart(r);
+            }),
+            onTouchmove: n[9] || (n[9] = function(r) {
+              return i.onDrag(r);
+            }),
+            onTouchend: n[10] || (n[10] = function(r) {
+              return i.onDragEnd();
+            })
+          }, e.ptm("hue")), [L("div", P({
+            ref: i.hueHandleRef,
+            class: e.cx("hueHandle")
+          }, e.ptm("hueHandle")), null, 16)], 16)], 16)], 16)) : k("", !0)];
+        }),
+        _: 1
+      }, 16, ["onEnter", "onLeave", "onAfterLeave"])];
+    }),
+    _: 1
+  }, 8, ["appendTo", "disabled"])], 16);
+}
+Ie.render = dn;
+const W = "000000", Me = 7, fn = 4, de = "image/jpeg", hn = "canvas.jpg", fe = 0.25, he = 4, ve = 0.25, vn = (e, n) => {
+  const { width: t, height: o } = q(n), { width: l, height: i } = q(e), u = l / t, r = i / o;
+  return Math.min(u, r, 1);
+}, q = ({ width: e = 0, height: n = 0 } = {}) => ({
+  width: Math.max(1, e),
+  height: Math.max(1, n)
+}), pe = async (e, n, t) => {
+  if (n <= 0)
+    return null;
+  const o = await e.toBlob({
+    pixelRatio: 1 / n,
+    mimeType: de,
+    quality: 0.9,
+    // Visible quality to 100% but lowers file size significantly.
+    ...t
+  });
+  return o ? new File([o], hn, { type: de }) : null;
+}, pn = (e, n) => {
+  const t = n.getClientRect({ relativeTo: e }), o = Math.max(0, t.x), l = Math.max(0, t.y), i = Math.min(e.width(), t.x + t.width) - o, u = Math.min(e.height(), t.y + t.height) - l;
+  return i <= 0 || u <= 0 ? null : { x: o, y: l, width: i, height: u };
+}, me = (e, n) => ({
+  points: e,
+  stroke: n,
+  strokeWidth: Me,
+  lineCap: "round",
+  lineJoin: "round",
+  tension: 0
+}), Le = (e) => ({ x: e.clientX, y: e.clientY }), K = (e) => e && !e.isPrimary, F = (e) => {
+  e.rafId !== null && (cancelAnimationFrame(e.rafId), e.rafId = null);
+}, mn = (e) => {
+  const n = e.stage?.getPointerPosition();
+  return n ? { x: n.x * e.scaleInv, y: n.y * e.scaleInv } : null;
+}, gn = (e, n, t) => {
+  if (!n.value)
+    return;
+  const o = Le(e.evt);
+  t.active = !0, t.lastX = o.x, t.lastY = o.y;
+}, bn = (e, n, t, o) => {
+  if (t.hasBackgroundImage && !t.imageEl.value)
+    return;
+  F(e), e.stage = t.stageRef.value?.getNode() ?? null, e.scaleInv = 1 / o.value;
+  const l = mn(e);
+  l && (e.active = !0, e.livePoints = [l.x, l.y, l.x, l.y], n.value = e.livePoints.slice());
+}, kn = (e, n, t) => {
+  if (!t.value)
+    return;
+  const o = Le(e);
+  t.value.scrollLeft += n.lastX - o.x, t.value.scrollTop += n.lastY - o.y, n.lastX = o.x, n.lastY = o.y;
+}, yn = (e, n) => {
+  const t = e.stage?.getPointerPosition();
+  t && (e.livePoints.push(t.x * e.scaleInv, t.y * e.scaleInv), e.rafId ??= requestAnimationFrame(() => {
+    n.value = e.livePoints.slice(), e.rafId = null;
+  }));
+}, Sn = (e, n, t) => {
+  n.value = [], t.value = [], e.active = !1, e.livePoints = [], F(e);
+}, Cn = (e) => {
+  const n = j([]), t = j([]), o = j(1), l = w(
+    () => vn(e.containerSize.value, e.imageSize.value)
+  ), i = w(() => l.value * o.value), u = w(() => o.value >= he), r = w(() => o.value <= fe), v = w(
+    () => me(t.value, e.activeColor.value)
+  ), h = {
+    active: !1,
+    livePoints: [],
+    rafId: null,
+    stage: null,
+    scaleInv: 1,
+    nextStrokeId: 0
+  }, I = {
+    active: !1,
+    lastX: 0,
+    lastY: 0
+  }, E = () => {
+    n.value.length && (n.value = [], e.onStrokeCommitted());
+  }, M = () => {
+    n.value.length && (n.value = n.value.slice(0, -1), e.onStrokeCommitted());
+  }, b = () => {
+    if (h.livePoints.length < fn)
+      return;
+    const c = {
+      id: h.nextStrokeId++,
+      config: me([...h.livePoints], e.activeColor.value)
+    };
+    n.value = [...n.value, c], e.onStrokeCommitted();
+  }, H = (c) => {
+    if (!K(c.evt)) {
+      if (I.active) {
+        I.active = !1;
+        return;
+      }
+      h.active && (h.active = !1, F(h), b(), h.livePoints = [], t.value = []);
+    }
+  }, f = (c) => {
+    if (!K(c.evt)) {
+      if (I.active) {
+        kn(c.evt, I, e.containerRef);
+        return;
+      }
+      if (h.active) {
+        yn(h, t);
+        return;
+      }
+    }
+  }, y = (c) => {
+    if (c.evt.preventDefault(), !K(c.evt)) {
+      if (!e.isStrokeActive.value) {
+        gn(c, e.containerRef, I);
+        return;
+      }
+      bn(h, t, e, i);
+    }
+  }, V = async () => {
+    const c = e.stageRef.value?.getNode();
+    if (!c)
+      return null;
+    if (e.hasBackgroundImage || e.imageEl.value)
+      return pe(c, l.value);
+    const O = e.strokesLayerRef.value?.getNode();
+    if (!O)
+      return null;
+    const D = pn(c, O);
+    return D ? pe(c, l.value, D) : null;
+  };
+  return ge(() => {
+    F(h), h.stage = null;
+  }), {
+    committedStrokes: n,
+    liveStrokePoints: t,
+    liveStrokeConfig: v,
+    effectiveScale: i,
+    isZoomInDisabled: u,
+    isZoomOutDisabled: r,
+    safeSize: (c) => q(c),
+    clearAll: () => E(),
+    flattenStage: () => V(),
+    resetDrawingState: () => Sn(h, n, t),
+    resetZoom: () => o.value = 1,
+    onPointerDown: (c) => y(c),
+    onPointerMove: (c) => f(c),
+    onPointerUp: (c) => H(c),
+    undo: () => M(),
+    zoomIn: () => o.value = Math.min(he, o.value + ve),
+    zoomOut: () => o.value = Math.max(fe, o.value - ve)
+  };
+}, wn = { class: "control-bar-vertical" }, In = ["aria-label"], Mn = ["aria-label"], Ln = ["aria-label"], Hn = ["aria-label"], Pn = {
+  key: 0,
+  class: "control-bar-zoom"
+}, Bn = ["aria-label", "disabled"], On = ["aria-label", "disabled"], Dn = {
+  key: 1,
+  class: "control-bar-horizontal"
+}, xn = ["aria-label", "disabled"], En = ["aria-label", "disabled"], Rn = /* @__PURE__ */ be({
+  __name: "CanvasControls",
+  props: {
+    modeConfig: {},
+    disableClearAll: { type: Boolean },
+    disableUndo: { type: Boolean },
+    disableZoomIn: { type: Boolean },
+    disableZoomOut: { type: Boolean },
+    isBlankCanvas: { type: Boolean },
+    isFullScreen: { type: Boolean },
+    isPanActive: { type: Boolean }
+  },
+  emits: [
+    "changePan",
+    "changeColor",
+    "clearAll",
+    "closeFullScreen",
+    "undo",
+    "zoomIn",
+    "zoomOut"
+  ],
+  setup(e, { emit: n }) {
+    const t = {
+      clearAll: "mdiTrashCanOutline",
+      closeFullScreen: "mdiArrowCollapse",
+      colorPicker: "mdiPalette",
+      exitAfterSave: "mdiCheck",
+      openInfo: "mdiInformationSlabCircleOutline",
+      pan: "mdiHandBackRightOutline",
+      undo: "mdiArrowULeftTop",
+      zoomIn: "mdiPlus",
+      zoomOut: "mdiMinus"
+    }, o = e, l = n, i = ke(Ce), u = S(), r = S(!1), v = S(W), h = S(!1), I = w(() => o.isBlankCanvas ? {
+      icon: t.closeFullScreen,
+      description: i("common_actions.close_full_screen.description"),
+      infoClasses: ["mobile-only"]
+    } : {
+      icon: t.exitAfterSave,
+      description: i("canvas_controls.exit_after_save.description"),
+      infoClasses: ["mobile-only"]
+    }), E = w(() => [
+      I.value,
+      { icon: t.colorPicker, description: i("canvas_controls.color_picker.description") },
+      { icon: t.pan, description: i("canvas_controls.pan.description") },
+      { icon: t.zoomIn, description: i("common_actions.zoom_in.description") },
+      { icon: t.zoomOut, description: i("common_actions.zoom_out.description") },
+      { icon: t.clearAll, description: i("canvas_controls.clear_all.description") },
+      { icon: t.undo, description: i("common_actions.undo.description") }
+    ]), M = (H) => {
+      l("changePan", !1), v.value = H.value, l("changeColor", `#${v.value}`);
+    }, b = (H) => {
+      u.value && !u.value.contains(H.target) && (r.value = !1);
+    };
+    return ye(r, (H) => {
+      if (H) {
+        document.addEventListener("pointerdown", b);
+        return;
+      }
+      document.removeEventListener("pointerdown", b);
+    }), Ae(() => {
+      document.removeEventListener("pointerdown", b);
+    }), (H, f) => (d(), m(Se, null, [
+      L("div", {
+        class: $(["control-bar", { "full-screen-active": e.isFullScreen }])
+      }, [
+        L("div", wn, [
+          e.isFullScreen ? (d(), m("button", {
+            key: 0,
+            "aria-label": I.value.description,
+            class: "close-fullscreen",
+            onClick: f[0] || (f[0] = (y) => l("closeFullScreen"))
+          }, [
+            C(x, {
+              name: I.value.icon
+            }, null, 8, ["name"])
+          ], 8, In)) : k("", !0),
+          e.modeConfig.hasColorPicker ? (d(), m("button", {
+            key: 1,
+            "aria-label": a(i)("canvas_controls.color_picker.description"),
+            class: "color-picker-btn",
+            onClick: f[1] || (f[1] = (y) => r.value = !r.value)
+          }, [
+            v.value !== a(W) ? (d(), m("span", {
+              key: 0,
+              class: "color-swatch",
+              style: Ve({ background: `#${v.value}` })
+            }, null, 4)) : (d(), B(x, {
+              key: 1,
+              name: t.colorPicker
+            }, null, 8, ["name"]))
+          ], 8, Mn)) : k("", !0),
+          e.modeConfig.hasPanToggle ? (d(), m("button", {
+            key: 2,
+            "aria-label": a(i)("canvas_controls.pan.description"),
+            class: $(["pan-btn", { "pan-active-btn": e.isPanActive }]),
+            onClick: f[2] || (f[2] = (y) => l("changePan", !e.isPanActive))
+          }, [
+            C(x, {
+              name: t.pan
+            }, null, 8, ["name"])
+          ], 10, Ln)) : k("", !0),
+          e.modeConfig.hasInfoDialog ? (d(), m("button", {
+            key: 3,
+            "aria-label": a(i)("common_actions.open_info.description"),
+            class: "info-dialog",
+            onClick: f[3] || (f[3] = (y) => h.value = !0)
+          }, [
+            C(x, {
+              name: t.openInfo
+            }, null, 8, ["name"])
+          ], 8, Hn)) : k("", !0)
+        ]),
+        e.modeConfig.hasZoom ? (d(), m("div", Pn, [
+          L("button", {
+            "aria-label": a(i)("common_actions.zoom_in.description"),
+            disabled: e.disableZoomIn,
+            onClick: f[4] || (f[4] = (y) => l("zoomIn"))
+          }, [
+            C(x, {
+              name: t.zoomIn
+            }, null, 8, ["name"])
+          ], 8, Bn),
+          L("button", {
+            "aria-label": a(i)("common_actions.zoom_out.description"),
+            disabled: e.disableZoomOut,
+            onClick: f[5] || (f[5] = (y) => l("zoomOut"))
+          }, [
+            C(x, {
+              name: t.zoomOut
+            }, null, 8, ["name"])
+          ], 8, On)
+        ])) : k("", !0),
+        e.modeConfig.hasDelete || e.modeConfig.hasUndo ? (d(), m("div", Dn, [
+          e.modeConfig.hasDelete ? (d(), m("button", {
+            key: 0,
+            "aria-label": a(i)("canvas_controls.clear_all.description"),
+            disabled: e.disableClearAll,
+            onClick: f[6] || (f[6] = (y) => l("clearAll"))
+          }, [
+            C(x, {
+              name: t.clearAll
+            }, null, 8, ["name"])
+          ], 8, xn)) : k("", !0),
+          e.modeConfig.hasUndo ? (d(), m("button", {
+            key: 1,
+            "aria-label": a(i)("common_actions.undo.description"),
+            disabled: e.disableUndo,
+            onClick: f[7] || (f[7] = (y) => l("undo"))
+          }, [
+            C(x, {
+              name: t.undo
+            }, null, 8, ["name"])
+          ], 8, En)) : k("", !0)
+        ])) : k("", !0)
+      ], 2),
+      r.value ? (d(), m("div", {
+        key: 0,
+        ref_key: "colorPickerPanel",
+        ref: u,
+        class: "color-picker-panel"
+      }, [
+        C(a(Ie), {
+          "model-value": v.value,
+          inline: "",
+          onChange: M
+        }, null, 8, ["model-value"])
+      ], 512)) : k("", !0),
+      C(_e, {
+        visible: h.value,
+        "onUpdate:visible": f[8] || (f[8] = (y) => h.value = y),
+        title: a(i)("common_actions.info_dialog.title"),
+        "actions-info": E.value
+      }, null, 8, ["visible", "title", "actions-info"])
+    ], 64));
+  }
+}), zn = /* @__PURE__ */ we(Rn, [["__scopeId", "data-v-4867e97c"]]), Tn = {
+  key: 2,
+  class: "canvas-status"
+}, Un = {
+  key: 3,
+  class: "canvas-status canvas-status-error"
+}, An = 500, Vn = 0.65, $n = /* @__PURE__ */ be({
+  __name: "CanvasBlock",
+  props: /* @__PURE__ */ re({
+    mode: {},
+    baseImageSrc: {},
+    isDisabled: { type: Boolean }
+  }, {
+    isFullScreen: { type: Boolean, default: !1 },
+    isFullScreenModifiers: {}
+  }),
+  emits: /* @__PURE__ */ re(["saveImage"], ["update:isFullScreen"]),
+  setup(e, { emit: n }) {
+    const t = { width: 1, height: 1 }, o = e, l = n, i = $e(e, "isFullScreen"), u = ke(Ce), r = en(o.mode), v = S(), h = S({ ...t }), I = S(), E = S(), M = S(), b = S({ ...t }), H = w(() => ({ x: 0, y: 0, fill: "white", ...b.value })), f = S(r.hasBackgroundImage || !!o.baseImageSrc), y = S(!1), V = S(`#${W}`), c = S(!0), O = { timerId: null }, D = () => {
+      O.timerId && (clearTimeout(O.timerId), O.timerId = null);
+    }, J = () => {
+      D(), O.timerId = setTimeout(() => {
+        O.timerId = null, ee();
+      }, An);
+    }, s = Cn({
+      stageRef: I,
+      strokesLayerRef: E,
+      containerRef: v,
+      containerSize: h,
+      imageSize: b,
+      isStrokeActive: c,
+      activeColor: V,
+      hasBackgroundImage: r.hasBackgroundImage,
+      imageEl: M,
+      onStrokeCommitted: J
+    }), He = w(() => {
+      const p = !o.baseImageSrc, g = !s.committedStrokes.value.length;
+      return o.mode === se.DRAW && !o.isDisabled && p && g;
+    }), Pe = w(() => ({
+      width: Math.round(b.value.width * s.effectiveScale.value),
+      height: Math.round(b.value.height * s.effectiveScale.value)
+    })), Be = w(() => ({ image: M.value, x: 0, y: 0, ...b.value })), Q = w(() => ({
+      scaleX: s.effectiveScale.value,
+      scaleY: s.effectiveScale.value,
+      listening: !1
+    })), Oe = w(() => {
+      const p = b.value.height * Vn;
+      return {
+        points: [0, p, b.value.width, p],
+        stroke: "#aaaaaa",
+        strokeWidth: Me / 2,
+        listening: !1
+      };
+    }), ee = async () => {
+      const p = await s.flattenStage();
+      p && l("saveImage", p);
+    }, R = { pending: null }, ne = () => {
+      if (R.pending) {
+        const p = R.pending;
+        R.pending = null, p.src = "";
+      }
+    }, te = (p) => p !== R.pending ? !1 : (R.pending = null, f.value = !1, !0), De = () => {
+      const p = v.value?.parentElement;
+      return p != null && getComputedStyle(p).getPropertyValue("--is-mobile-active") === "1";
+    }, Z = () => {
+      h.value = s.safeSize({
+        width: v.value?.clientWidth,
+        height: v.value?.clientHeight
+      }), i.value && !De() && ie(), !M.value && i.value && !s.committedStrokes.value.length && (b.value = {
+        width: h.value.width,
+        height: o.mode === se.SIGNATURE ? b.value.height : h.value.height
+      });
+    }, oe = (p) => {
+      b.value = p, f.value = !1, Z();
+    }, xe = (p) => {
+      f.value = !0, y.value = !1, M.value = void 0, s.resetZoom(), s.resetDrawingState(), D(), ne();
+      const g = new Image();
+      R.pending = g, g.onload = () => {
+        if (!te(g))
+          return;
+        M.value = g;
+        const _ = s.safeSize({ width: g.naturalWidth, height: g.naturalHeight });
+        oe(_), J();
+      }, g.onerror = () => {
+        te(g) && (y.value = !0);
+      }, g.src = p;
+    }, Ee = () => {
+      r.hasBackgroundImage || s.resetZoom(), i.value = !0;
+    }, ie = () => {
+      i.value = !1, s.resetZoom(), D(), ee();
+    };
+    ye(
+      () => s.committedStrokes.value.length,
+      (p, g) => {
+        !M.value && g > 0 && p === 0 && (D(), l("saveImage", null));
+      }
+    );
+    const Re = () => {
+      if (Z(), o.baseImageSrc) {
+        xe(o.baseImageSrc);
+        return;
+      }
+      r.hasBackgroundImage || oe({ ...h.value });
+    }, X = { current: null };
+    return Fe(() => {
+      Re(), X.current = new ResizeObserver(() => Z()), X.current.observe(v.value);
+    }), ge(() => {
+      X.current?.disconnect(), D(), ne();
+    }), (p, g) => {
+      const _ = T("v-image"), ze = T("v-rect"), N = T("v-line"), le = T("v-layer"), Te = T("v-stage");
+      return d(), m("div", {
+        class: $(["canvas-block", {
+          "canvas-full-screen": i.value,
+          "canvas-compact": a(r).isCompact,
+          "canvas-blank": !a(r).hasBackgroundImage
+        }])
+      }, [
+        e.isDisabled ? k("", !0) : (d(), B(zn, {
+          key: 0,
+          "is-pan-active": !c.value,
+          "mode-config": a(r),
+          "is-full-screen": i.value,
+          "is-blank-canvas": !a(s).committedStrokes.value.length,
+          "disable-clear-all": !a(s).committedStrokes.value.length,
+          "disable-undo": !a(s).committedStrokes.value.length,
+          "disable-zoom-in": a(s).isZoomInDisabled.value,
+          "disable-zoom-out": a(s).isZoomOutDisabled.value,
+          onChangePan: g[0] || (g[0] = (z) => c.value = !z),
+          onClearAll: a(s).clearAll,
+          onCloseFullScreen: ie,
+          onZoomIn: a(s).zoomIn,
+          onZoomOut: a(s).zoomOut,
+          onUndo: a(s).undo,
+          onChangeColor: g[1] || (g[1] = (z) => V.value = z)
+        }, null, 8, ["is-pan-active", "mode-config", "is-full-screen", "is-blank-canvas", "disable-clear-all", "disable-undo", "disable-zoom-in", "disable-zoom-out", "onClearAll", "onZoomIn", "onZoomOut", "onUndo"])),
+        L("div", {
+          ref_key: "containerRef",
+          ref: v,
+          class: "canvas-stage-wrap"
+        }, [
+          !i.value && !e.isDisabled ? (d(), m("div", {
+            key: 0,
+            class: "canvas-overlay full-screen-overlay",
+            onClick: Ee
+          })) : k("", !0),
+          He.value ? (d(), B(a(nn), {
+            key: 1,
+            severity: "contrast",
+            closable: "",
+            size: "small",
+            class: "canvas-snackbar"
+          }, {
+            default: U(() => [
+              Ze(G(a(u)("canvas_block.draw_instruction.message")), 1)
+            ]),
+            _: 1
+          })) : k("", !0),
+          f.value ? (d(), m("p", Tn, G(a(u)("canvas_block.loading_image.message")), 1)) : y.value ? (d(), m("p", Un, G(a(u)("canvas_block.load_image.error")), 1)) : (d(), B(Te, {
+            key: 4,
+            ref_key: "stageRef",
+            ref: I,
+            config: Pe.value,
+            class: $(["canvas-stage", { "canvas-pan-mode": !c.value, "canvas-disabled": e.isDisabled }]),
+            onPointerdown: a(s).onPointerDown,
+            onPointermove: a(s).onPointerMove,
+            onPointerup: a(s).onPointerUp,
+            onPointerleave: a(s).onPointerUp,
+            onPointercancel: a(s).onPointerUp
+          }, {
+            default: U(() => [
+              C(le, { config: Q.value }, {
+                default: U(() => [
+                  M.value ? (d(), B(_, {
+                    key: 0,
+                    config: Be.value
+                  }, null, 8, ["config"])) : (d(), B(ze, {
+                    key: 1,
+                    config: H.value
+                  }, null, 8, ["config"])),
+                  a(r).hasGuideLines && !M.value ? (d(), B(N, {
+                    key: 2,
+                    config: Oe.value
+                  }, null, 8, ["config"])) : k("", !0)
+                ]),
+                _: 1
+              }, 8, ["config"]),
+              C(le, {
+                ref_key: "strokesLayerRef",
+                ref: E,
+                config: Q.value
+              }, {
+                default: U(() => [
+                  (d(!0), m(Se, null, Xe(a(s).committedStrokes.value, (z) => (d(), B(N, {
+                    key: z.id,
+                    config: z.config
+                  }, null, 8, ["config"]))), 128)),
+                  a(s).liveStrokePoints.value.length >= 2 ? (d(), B(N, {
+                    key: 0,
+                    config: a(s).liveStrokeConfig.value
+                  }, null, 8, ["config"])) : k("", !0)
+                ]),
+                _: 1
+              }, 8, ["config"])
+            ]),
+            _: 1
+          }, 8, ["config", "class", "onPointerdown", "onPointermove", "onPointerup", "onPointerleave", "onPointercancel"]))
+        ], 512)
+      ], 2);
+    };
+  }
+}), _n = /* @__PURE__ */ we($n, [["__scopeId", "data-v-e18eacca"]]);
+export {
+  _n as default
+};