@progress/kendo-vue-inputs 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/signature/Signature.mjs

@@ -0,0 +1,373 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as f, ref as C, createVNode as s } from "vue";
+import { Button as v } from "@progress/kendo-vue-buttons";
+import { validatePackage as S, kendoThemeMaps as l, setRef as a, getRef as n } from "@progress/kendo-vue-common";
+import { SignatureDialog as $ } from "./SignatureDialog.mjs";
+import { SignatureBottomActions as y } from "./SignatureBottomActions.mjs";
+import { SignatureLine as k } from "./SignatureLine.mjs";
+import { provideLocalizationService as b } from "@progress/kendo-vue-intl";
+import { signatureMaximize as u, messages as p, signatureClear as h } from "../messages/main.mjs";
+import { packageMetadata as z } from "../package-metadata.mjs";
+import { SignatureCanvas as O } from "./SignatureCanvas.mjs";
+import { hasParent as B } from "./utils/main.mjs";
+import { hyperlinkOpenIcon as w } from "@progress/kendo-svg-icons";
+const D = 250, x = 84, V = 3, I = 2, L = "#000000", E = "#ffffff", N = /* @__PURE__ */ f({
+  name: "KendoSignature",
+  model: {
+    event: "changemodel"
+  },
+  emits: {
+    change: null,
+    focus: null,
+    blur: null,
+    open: null,
+    close: null,
+    changemodel: null,
+    "update:modelValue": null
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  props: {
+    strokeWidth: {
+      type: Number,
+      default: 1
+    },
+    smooth: Boolean,
+    popupScale: {
+      type: Number,
+      default: V
+    },
+    exportScale: {
+      type: Number,
+      default: I
+    },
+    modelValue: String,
+    name: String,
+    value: String,
+    tabIndex: Number,
+    dir: String,
+    ariaDescribedBy: String,
+    ariaLabelledBy: String,
+    ariaLabel: String,
+    hideLine: Boolean,
+    open: {
+      type: Boolean,
+      default: void 0
+    },
+    readOnly: Boolean,
+    disabled: Boolean,
+    validationMessage: String,
+    maximizable: {
+      type: Boolean,
+      default: !0
+    },
+    color: String,
+    backgroundColor: String,
+    validityStyles: {
+      type: Boolean,
+      default: !0
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    valid: {
+      type: Boolean,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large"].includes(e);
+      }
+    },
+    rounded: {
+      type: String,
+      default: "medium",
+      validator: function(e) {
+        return [null, "small", "medium", "large"].includes(e);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: "solid",
+      validator: function(e) {
+        return [null, "solid", "flat", "outline"].includes(e);
+      }
+    }
+  },
+  created() {
+    S(z);
+  },
+  computed: {
+    wrapperClass() {
+      return {
+        ...this.openWrapperClass,
+        "k-signature-maximized": !1
+      };
+    },
+    openWrapperClass() {
+      const e = !this.validityStyles || this.validityGetter().valid;
+      return {
+        "k-input": !0,
+        "k-signature": !0,
+        "k-signature-maximized": !0,
+        [`k-signature-${l.sizeMap[this.$props.size] || this.$props.size}`]: this.$props.size,
+        [`k-input-${this.$props.fillMode}`]: this.$props.fillMode,
+        [`k-rounded-${l.roundedMap[this.$props.rounded] || this.$props.rounded}`]: this.$props.rounded,
+        "k-invalid": !e,
+        "k-required": this.$props.required,
+        "k-disabled": this.$props.disabled,
+        "k-focus": this.focused
+      };
+    },
+    computedValue() {
+      return this.value !== void 0 ? this.value : this.$props.modelValue !== void 0 ? this.$props.modelValue : this.currentValue;
+    },
+    computedOpen() {
+      return this.open !== void 0 ? this.open : this.currentOpen;
+    },
+    computedColor() {
+      let e = L;
+      return !this.$props.color && typeof document != "undefined" && this.$el && (e = getComputedStyle(this.$el).color), this.$props.color || e;
+    },
+    computedBgColor() {
+      let e = E;
+      return !this.$props.backgroundColor && typeof document != "undefined" && this.$el && (e = getComputedStyle(this.$el).backgroundColor), this.$props.backgroundColor || e;
+    }
+  },
+  watch: {
+    computedValue(e) {
+      e !== this.currentValue && this.loadImage(e);
+    },
+    computedOpen() {
+      this.loadImage(this.computedValue);
+    }
+  },
+  data() {
+    return {
+      focused: !1,
+      isDrawing: !1,
+      currentValue: void 0,
+      popupValue: void 0,
+      currentOpen: !1
+    };
+  },
+  mounted() {
+    this.setRefs();
+  },
+  updated() {
+    this.setRefs();
+  },
+  setup() {
+    return {
+      inputRef: C(null)
+    };
+  },
+  render() {
+    const e = b(this), t = !(this.computedOpen || this.isDrawing || !this.$props.maximizable || this.$props.disabled), o = !(!this.computedValue || this.isDrawing || this.$props.readOnly || this.$props.disabled), r = e.toLanguageString(u, p[u]), d = e.toLanguageString(h, p[h]), c = s("div", {
+      class: "k-signature-actions k-signature-actions-top"
+    }, [t && s(v, {
+      class: "k-signature-action k-signature-maximize",
+      ref: a(this, "maximizeButton"),
+      icon: "hyperlink-open",
+      svgIcon: w,
+      shape: null,
+      fillMode: "flat",
+      size: this.$props.size,
+      onClick: this.onMaximizeClick,
+      "aria-label": r,
+      title: r
+    }, null)]), m = !this.$props.hideLine && s(k, null, null), g = s(y, {
+      showClear: o,
+      size: this.size,
+      onClear: this.onClear,
+      title: d
+    }, null);
+    return s("div", {
+      dir: this.$props.dir,
+      class: this.wrapperClass,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur
+    }, [s(O, {
+      ref: a(this, "canvas"),
+      name: this.name,
+      value: this.computedValue,
+      tabIndex: this.tabIndex,
+      disabled: this.disabled,
+      readOnly: this.readOnly,
+      color: this.computedColor,
+      backgroundColor: this.computedBgColor,
+      strokeWidth: this.strokeWidth,
+      smooth: this.smooth,
+      popupScale: 1,
+      scale: this.exportScale,
+      onChange: this.onValueChange,
+      elementSize: this.elementSize,
+      onDraw: this.onDraw,
+      onDrawend: this.onDrawEnd
+    }, null), c, m, g, this.computedOpen && s($, {
+      ref: a(this, "dialog"),
+      openWrapperClass: this.openWrapperClass,
+      popupWidth: this.popupWidth,
+      popupHeight: this.popupHeight,
+      showClear: o,
+      onClose: this.onMinimizeClick,
+      onClear: this.onClear,
+      onOverlayclick: this.onOverlayClick,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      value: this.computedValue,
+      tabIndex: this.tabIndex,
+      disabled: this.disabled,
+      readOnly: this.readOnly,
+      color: this.computedColor,
+      backgroundColor: this.computedBgColor,
+      strokeWidth: this.strokeWidth,
+      smooth: this.smooth,
+      popupScale: this.$props.popupScale,
+      scale: 1 / this.popupScale * this.exportScale,
+      onChange: this.onValueChange,
+      elementSize: this.elementSize,
+      onDraw: this.onDraw,
+      onDrawend: this.onDrawEnd
+    }, null)]);
+  },
+  methods: {
+    setRefs() {
+      this.canvas = n(this, "canvas"), this.minimizeButton = n(this, "minimizeButton"), this.maximizeButton = n(this, "maximizeButton"), this.dialog = n(this, "dialog"), this.popupWidth = this.popupSize().width, this.popupHeight = this.popupSize().height;
+    },
+    onOverlayClick() {
+      this.currentOpen = !1;
+    },
+    onValueChange(e) {
+      this.currentValue = e, this.$emit("changemodel", e), this.$emit("update:modelValue", e), this.$emit("change", {
+        value: e
+      });
+    },
+    onDialogChange(e) {
+      this.onValueChange(e.value);
+    },
+    reset() {
+      this.clear(), this.onValueChange();
+    },
+    clear() {
+      this.canvas && this.canvas.clear(), this.dialog && this.dialog.openCanvas && this.dialog.openCanvas.clear();
+    },
+    loadImage(e) {
+      this.canvas && this.canvas.loadImage(e), this.dialog && this.dialog.openCanvas && this.dialog.openCanvas.loadImage(e);
+    },
+    onDialogClose(e) {
+      var t;
+      this.onMinimizeClick(e), (t = this.maximizeButton || this.canvas.$el) == null || t.focus();
+    },
+    exportImage(e) {
+      var o;
+      const {
+        width: t,
+        height: i
+      } = e;
+      return (o = this.canvas.instance) == null ? void 0 : o.exportImage({
+        width: t * this.exportScale,
+        height: i * this.exportScale
+      });
+    },
+    validityGetter() {
+      const e = this.$props.validationMessage !== void 0, i = !this.computedValue, o = this.$props.valid !== void 0 ? this.$props.valid : !this.required || !i;
+      return {
+        customError: e,
+        valid: o,
+        valueMissing: i
+      };
+    },
+    focusElement() {
+      this.canvas.$el.focus();
+    },
+    getImperativeHandle() {
+      const e = {
+        element: this.$el,
+        focus: this.focusElement()
+      };
+      return Object.defineProperty(e, "name", {
+        get: () => this.name
+      }), Object.defineProperty(e, "value", {
+        get: () => this.computedValue
+      }), Object.defineProperty(e, "validity", {
+        get: () => this.validityGetter()
+      }), Object.defineProperty(e, "validityStyles", {
+        get: () => this.validityStyles
+      }), Object.defineProperty(e, "required", {
+        get: () => this.required
+      }), Object.defineProperty(e, "color", {
+        get: () => this.computedColor
+      }), Object.defineProperty(e, "backgroundColor", {
+        get: () => this.computedBgColor
+      }), e;
+    },
+    onFocus(e) {
+      this.focused || this.computedOpen || (this.focused(!0), this.$emit("focus", {
+        event: e,
+        ...this.getImperativeHandle()
+      }));
+    },
+    onBlur(e) {
+      B(e.relatedTarget, this.$el) || (this.focused = !1, this.$emit("blur", {
+        event: e,
+        ...this.getImperativeHandle()
+      }));
+    },
+    onMaximizeClick: async function(t) {
+      this.exportImage(this.popupSize()).then((i) => {
+        this.currentValue = i;
+      }), this.currentOpen = !0, this.$emit("open", {
+        event: t,
+        ...this.getImperativeHandle()
+      });
+    },
+    onMinimizeClick(e) {
+      this.currentOpen = !1, this.$emit("close", {
+        event: e,
+        ...this.getImperativeHandle()
+      });
+    },
+    onClear() {
+      this.reset(), this.focusElement();
+    },
+    elementSize() {
+      const e = this.$props.width || this.$el && this.$el.offsetWidth || D, t = this.$props.height || this.$el && this.$el.offsetHeight || x;
+      return {
+        width: e,
+        height: t
+      };
+    },
+    popupSize() {
+      const {
+        width: e,
+        height: t
+      } = this.elementSize();
+      return {
+        width: e * this.popupScale,
+        height: t * this.popupScale
+      };
+    },
+    onDraw() {
+      this.isDrawing = !0;
+    },
+    onDrawEnd() {
+      this.isDrawing = !1;
+    }
+  }
+});
+export {
+  N as Signature
+};

package/signature/SignatureBottomActions.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),i=require("@progress/kendo-vue-buttons"),s=require("@progress/kendo-svg-icons"),r=t.defineComponent({name:"KendoSignatureBottomActions",emits:{clear:null},props:{showClear:Boolean,size:String,title:String},methods:{onClear(e){this.$emit("clear",e)}},render(){const{showClear:e,title:o,size:n}=this.$props;return t.createVNode("div",{class:"k-signature-actions k-signature-actions-bottom"},[e&&t.createVNode(i.Button,{class:"k-signature-action k-signature-clear",icon:"x",svgIcon:s.xIcon,shape:null,fillMode:"flat",size:n,onClick:this.onClear,"aria-label":o,title:o},null)])}});exports.SignatureBottomActions=r;

package/signature/SignatureBottomActions.mjs

@@ -0,0 +1,49 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as n, createVNode as e } from "vue";
+import { Button as r } from "@progress/kendo-vue-buttons";
+import { xIcon as s } from "@progress/kendo-svg-icons";
+const m = /* @__PURE__ */ n({
+  name: "KendoSignatureBottomActions",
+  emits: {
+    clear: null
+  },
+  props: {
+    showClear: Boolean,
+    size: String,
+    title: String
+  },
+  methods: {
+    onClear(t) {
+      this.$emit("clear", t);
+    }
+  },
+  render() {
+    const {
+      showClear: t,
+      title: o,
+      size: i
+    } = this.$props;
+    return e("div", {
+      class: "k-signature-actions k-signature-actions-bottom"
+    }, [t && e(r, {
+      class: "k-signature-action k-signature-clear",
+      icon: "x",
+      svgIcon: s,
+      shape: null,
+      fillMode: "flat",
+      size: i,
+      onClick: this.onClear,
+      "aria-label": o,
+      title: o
+    }, null)]);
+  }
+});
+export {
+  m as SignatureBottomActions
+};

package/signature/SignatureCanvas.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),a=require("@progress/kendo-inputs-common"),o=require("@progress/kendo-vue-common"),r=s.defineComponent({name:"KendoSignatureCanvas",emits:{change:null,draw:null,drawend:null},inject:{kendoIntlService:{default:null}},props:{strokeWidth:Number,popupScale:Number,scale:Number,name:String,value:String,tabIndex:Number,disabled:Boolean,readOnly:Boolean,color:String,backgroundColor:String,elementSize:Function,smooth:Boolean},watch:{color(){this.setOptions()},backgroundColor(){this.setOptions()},smooth(){this.setOptions()},strokeWidth(){this.setOptions()},readOnly(){this.setOptions()}},mounted(){this.canvas=this.$el;const e=new a.SignaturePad(this.canvas,this.getOptions());this.value&&e.loadImage(this.value),this.instance=e,this.instance.setOptions({onChange:this.onValueChange,onDraw:this.onDraw,onDrawEnd:this.onDrawEnd})},unmounted(){this.instance&&this.instance.destroy()},render(){return s.createVNode("div",{class:"k-signature-canvas",tabindex:o.getTabIndex(this.$props.tabIndex,this.$props.disabled),role:"img",id:this.$props.id,"aria-label":this.$props.ariaLabel,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-disabled":this.$props.disabled?"true":void 0},null)},methods:{onValueChange(){this.exportImage(this.elementSize()).then(e=>{this.$emit("change",e)})},onDraw(){this.$emit("draw")},onDrawEnd(){this.$emit("drawend")},loadImage(e){this.instance.loadImage(e)},clear(){this.instance.clear()},getOptions(){return{scale:this.popupScale,color:this.color,backgroundColor:this.backgroundColor,strokeWidth:this.$props.strokeWidth,smooth:this.$props.smooth,readonly:this.$props.readOnly}},exportImage(e){var t;const{width:n,height:i}=e;return(t=this.instance)==null?void 0:t.exportImage({width:n*this.scale,height:i*this.scale})},setOptions(){this.instance&&this.instance.setOptions(this.getOptions())}}});exports.SignatureCanvas=r;

package/signature/SignatureCanvas.mjs

@@ -0,0 +1,124 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as n, createVNode as a } from "vue";
+import { SignaturePad as o } from "@progress/kendo-inputs-common";
+import { getTabIndex as r } from "@progress/kendo-vue-common";
+const p = /* @__PURE__ */ n({
+  name: "KendoSignatureCanvas",
+  emits: {
+    change: null,
+    draw: null,
+    drawend: null
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    }
+  },
+  props: {
+    strokeWidth: Number,
+    popupScale: Number,
+    scale: Number,
+    name: String,
+    value: String,
+    tabIndex: Number,
+    disabled: Boolean,
+    readOnly: Boolean,
+    color: String,
+    backgroundColor: String,
+    elementSize: Function,
+    smooth: Boolean
+  },
+  watch: {
+    color() {
+      this.setOptions();
+    },
+    backgroundColor() {
+      this.setOptions();
+    },
+    smooth() {
+      this.setOptions();
+    },
+    strokeWidth() {
+      this.setOptions();
+    },
+    readOnly() {
+      this.setOptions();
+    }
+  },
+  mounted() {
+    this.canvas = this.$el;
+    const t = new o(this.canvas, this.getOptions());
+    this.value && t.loadImage(this.value), this.instance = t, this.instance.setOptions({
+      onChange: this.onValueChange,
+      onDraw: this.onDraw,
+      onDrawEnd: this.onDrawEnd
+    });
+  },
+  unmounted() {
+    this.instance && this.instance.destroy();
+  },
+  render() {
+    return a("div", {
+      class: "k-signature-canvas",
+      tabindex: r(this.$props.tabIndex, this.$props.disabled),
+      role: "img",
+      id: this.$props.id,
+      "aria-label": this.$props.ariaLabel,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      "aria-disabled": this.$props.disabled ? "true" : void 0
+    }, null);
+  },
+  methods: {
+    onValueChange() {
+      this.exportImage(this.elementSize()).then((t) => {
+        this.$emit("change", t);
+      });
+    },
+    onDraw() {
+      this.$emit("draw");
+    },
+    onDrawEnd() {
+      this.$emit("drawend");
+    },
+    loadImage(t) {
+      this.instance.loadImage(t);
+    },
+    clear() {
+      this.instance.clear();
+    },
+    getOptions() {
+      return {
+        scale: this.popupScale,
+        color: this.color,
+        backgroundColor: this.backgroundColor,
+        strokeWidth: this.$props.strokeWidth,
+        smooth: this.$props.smooth,
+        readonly: this.$props.readOnly
+      };
+    },
+    exportImage(t) {
+      var e;
+      const {
+        width: i,
+        height: s
+      } = t;
+      return (e = this.instance) == null ? void 0 : e.exportImage({
+        width: i * this.scale,
+        height: s * this.scale
+      });
+    },
+    setOptions() {
+      this.instance && this.instance.setOptions(this.getOptions());
+    }
+  }
+});
+export {
+  p as SignatureCanvas
+};

package/signature/SignatureDialog.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),D=require("@progress/kendo-vue-dialogs"),y=require("./SignatureBottomActions.js"),N=require("./SignatureLine.js"),V=require("@progress/kendo-vue-buttons"),B=require("@progress/kendo-vue-intl"),o=require("@progress/kendo-vue-common"),$=require("@progress/kendo-svg-icons"),q=require("./SignatureCanvas.js"),n=require("../messages/main.js"),O=i.defineComponent({name:"KendoSignatureDialog",emits:{change:null,clear:null,close:null,focus:null,blur:null,overlayclick:null,draw:null,drawend:null},props:{openWrapperClass:Object,size:String,dir:String,popupWidth:Number,popupHeight:Number,showClear:Boolean,strokeWidth:Number,popupScale:Number,scale:Number,value:String,tabIndex:Number,disabled:Boolean,readOnly:Boolean,color:String,backgroundColor:String,elementSize:Function,smooth:Boolean},inject:{kendoLocalizationService:{default:null}},data(){return{isDrawing:!1}},mounted(){this.openCanvas=o.getRef(this,"openCanvas")},render(){const{showClear:e,popupWidth:r,popupHeight:s,dir:l,size:u,value:c,tabIndex:d,disabled:g,readOnly:h,color:p,backgroundColor:m,strokeWidth:C,smooth:k,popupScale:S,scale:b,elementSize:v}=this.$props,t=B.provideLocalizationService(this),a=t.toLanguageString(n.signatureMinimize,n.messages[n.signatureMinimize]),w=t.toLanguageString(n.signatureClear,n.messages[n.signatureClear]),f=!this.$props.hideLine&&i.createVNode(N.SignatureLine,null,null),z=i.createVNode(y.SignatureBottomActions,{showClear:e,size:u,onClear:this.onClear,title:w},null);return i.createVNode(D.Dialog,{ref:o.setRef(this,"dialog"),onOverlayclick:this.onOverlayClick},{default:()=>[i.createVNode("div",{style:{width:r+"px",height:s+"px"},dir:l,class:this.openWrapperClass,onFocus:this.onFocus,onBlur:this.onBlur},[i.createVNode(q.SignatureCanvas,{ref:o.setRef(this,"openCanvas"),value:c,tabIndex:d,disabled:g,readOnly:h,color:p,backgroundColor:m,strokeWidth:C,smooth:k,popupScale:S,scale:b,onChange:this.onValueChange,elementSize:v,onDraw:this.onDraw,onDrawend:this.onDrawEnd},null),i.createVNode("div",{class:"k-signature-actions k-signature-actions-top"},[!this.isDrawing&&i.createVNode(V.Button,{class:"k-signature-action k-signature-minimize k-rotate-180",ref:o.setRef(this,"minimizeButton"),icon:"hyperlink-open",svgIcon:$.hyperlinkOpenIcon,shape:null,fillMode:"flat",size:this.$props.size,onClick:this.onMinimizeClick,"aria-label":a,title:a},null)]),f,z])]})},methods:{onDraw(){this.isDrawing=!0,this.$emit("draw")},onDrawEnd(){this.isDrawing=!1,this.$emit("drawend")},onValueChange(e){this.$emit("change",e)},onClear(){this.$emit("clear")},onMinimizeClick(){this.$emit("close")},onFocus(e){this.$emit("focus",e)},onBlur(e){this.$emit("blur",e)},onOverlayClick(e){this.$emit("overlayclick",e)}}});exports.SignatureDialog=O;