@progress/kendo-vue-inputs 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431

package/dist/es/signature/Signature.js

@@ -0,0 +1,633 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __generator = this && this.__generator || function (thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function sent() {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (_) {
+      try {
+        if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+        if (y = 0, t) op = [op[0] & 2, t.value];
+        switch (op[0]) {
+          case 0:
+          case 1:
+            t = op;
+            break;
+          case 4:
+            _.label++;
+            return {
+              value: op[1],
+              done: false
+            };
+          case 5:
+            _.label++;
+            y = op[1];
+            op = [0];
+            continue;
+          case 7:
+            op = _.ops.pop();
+            _.trys.pop();
+            continue;
+          default:
+            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+              _ = 0;
+              continue;
+            }
+            if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+              _.label = op[1];
+              break;
+            }
+            if (op[0] === 6 && _.label < t[1]) {
+              _.label = t[1];
+              t = op;
+              break;
+            }
+            if (t && _.label < t[2]) {
+              _.label = t[2];
+              _.ops.push(op);
+              break;
+            }
+            if (t[2]) _.ops.pop();
+            _.trys.pop();
+            continue;
+        }
+        op = body.call(thisArg, _);
+      } catch (e) {
+        op = [6, e];
+        y = 0;
+      } finally {
+        f = t = 0;
+      }
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+import { Button } from '@progress/kendo-vue-buttons';
+import { kendoThemeMaps, setRef, getRef, validatePackage } from '@progress/kendo-vue-common';
+import { Dialog } from '@progress/kendo-vue-dialogs';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, signatureClear, signatureMaximize, signatureMinimize } from '../messages/main';
+import { packageMetadata } from '../package-metadata';
+import { SignatureCanvas } from './SignatureCanvas';
+import { hasParent } from './utils';
+import { hyperlinkOpenIcon, xIcon } from '@progress/kendo-svg-icons';
+var DEFAULT_WIDTH = 250;
+var DEFAULT_HEIGHT = 84;
+var DEFAULT_POPUP_SCALE = 3;
+var DEFAULT_EXPORT_SCALE = 2;
+var DEFAULT_COLOR = '#000000';
+var DEFAULT_BACKGROUND_COLOR = '#ffffff';
+/**
+ * @hidden
+ */
+var SignatureVue2 = {
+  name: 'KendoSignature',
+  model: {
+    event: 'changemodel'
+  },
+  // @ts-ignore
+  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: DEFAULT_POPUP_SCALE
+    },
+    exportScale: {
+      type: Number,
+      default: DEFAULT_EXPORT_SCALE
+    },
+    modelValue: String,
+    value: String,
+    tabIndex: Number,
+    dir: String,
+    ariaDescribedBy: String,
+    ariaLabelledBy: String,
+    ariaLabel: String,
+    hideLine: Boolean,
+    open: {
+      type: Boolean,
+      default: undefined
+    },
+    readOnly: Boolean,
+    disabled: Boolean,
+    validationMessage: String,
+    maximizable: {
+      type: Boolean,
+      default: true
+    },
+    color: String,
+    backgroundColor: String,
+    validityStyles: {
+      type: Boolean,
+      default: true
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'solid', 'flat', 'outline'].includes(value);
+      }
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      return __assign(__assign({}, this.openWrapperClass), {
+        'k-signature-maximized': false
+      });
+    },
+    openWrapperClass: function openWrapperClass() {
+      var _a;
+      var isValid =
+      // !this.validityStylesGetter() || 
+      this.validityGetter().valid;
+      return _a = {
+        'k-input': true,
+        'k-signature': true,
+        'k-signature-maximized': true
+      }, _a["k-signature-".concat(kendoThemeMaps.sizeMap[this.$props.size] || this.$props.size)] = this.$props.size, _a["k-input-".concat(this.$props.fillMode)] = this.$props.fillMode, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[this.$props.rounded] || this.$props.rounded)] = this.$props.rounded, _a['k-invalid'] = !isValid, _a['k-required'] = this.$props.required, _a['k-disabled'] = this.$props.disabled, _a['k-focus'] = this.focused, _a;
+    },
+    computedValue: function computedValue() {
+      return this.value !== undefined ? this.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentValue;
+    },
+    computedOpen: function computedOpen() {
+      return this.open !== undefined ? this.open : this.currentOpen;
+    },
+    computedColor: function computedColor() {
+      var defaultColor = DEFAULT_COLOR;
+      if (!this.$props.color && typeof document !== 'undefined' && this.$el) {
+        defaultColor = getComputedStyle(this.$el).color;
+      }
+      return this.$props.color || defaultColor;
+    },
+    computedBgColor: function computedBgColor() {
+      var defaultBackgroundColor = DEFAULT_BACKGROUND_COLOR;
+      if (!this.$props.backgroundColor && typeof document !== 'undefined' && this.$el) {
+        defaultBackgroundColor = getComputedStyle(this.$el).backgroundColor;
+      }
+      return this.$props.backgroundColor || defaultBackgroundColor;
+    }
+  },
+  data: function data() {
+    return {
+      focused: false,
+      isDrawing: false,
+      currentValue: undefined,
+      popupValue: undefined,
+      currentOpen: false
+    };
+  },
+  mounted: function mounted() {
+    this.canvas = getRef(this, 'canvas');
+    this.minimizeButton = getRef(this, 'minimizeButton');
+    this.maximizeButton = getRef(this, 'maximizeButton');
+    this.dialog = getRef(this, 'dialog');
+    this.popupWidth = this.popupSize().width;
+    this.popupHeight = this.popupSize().height;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    return {
+      v3: v3,
+      inputRef: inputRef
+    };
+  },
+  render: function render(createElement) {
+    var _this = this;
+    var h = gh || createElement;
+    var ls = provideLocalizationService(this);
+    var showMaximize = !(this.computedOpen || this.isDrawing || !this.$props.maximizable || this.$props.disabled);
+    var showMinimize = this.computedOpen && !this.isDrawing;
+    var isEmpty = !this.computedValue;
+    var showClear = !(isEmpty || this.isDrawing || this.$props.readOnly || this.$props.disabled);
+    var maximizeTitle = ls.toLanguageString(signatureMaximize, messages[signatureMaximize]);
+    var minimizeTitle = ls.toLanguageString(signatureMinimize, messages[signatureMinimize]);
+    var clearTitle = ls.toLanguageString(signatureClear, messages[signatureClear]);
+    var renderCanvas = function renderCanvas(refName) {
+      return h(SignatureCanvas, {
+        ref: setRef(this, refName),
+        value: this.computedValue,
+        attrs: this.v3 ? undefined : {
+          value: this.computedValue,
+          tabIndex: this.tabIndex,
+          disabled: this.disabled,
+          color: this.computedColor,
+          backgroundColor: this.computedBgColor,
+          strokeWidth: this.strokeWidth,
+          smooth: this.smooth,
+          popupScale: refName === 'openCanvas' ? this.$props.popupScale : 1,
+          scale: refName === 'openCanvas' ? 1 / this.popupScale * this.exportScale : this.exportScale,
+          elementSize: this.elementSize
+        },
+        tabIndex: this.tabIndex,
+        disabled: this.disabled,
+        color: this.computedColor,
+        backgroundColor: this.computedBgColor,
+        strokeWidth: this.strokeWidth,
+        smooth: this.smooth,
+        popupScale: refName === 'openCanvas' ? this.$props.popupScale : 1,
+        scale: refName === 'openCanvas' ? 1 / this.popupScale * this.exportScale : this.exportScale,
+        onChange: this.onValueChange,
+        on: this.v3 ? undefined : {
+          "change": this.onValueChange
+        },
+        elementSize: this.elementSize
+      });
+    };
+    var canvasDiv = renderCanvas.call(this, 'canvas');
+    var actions = h("div", {
+      "class": 'k-signature-actions k-signature-actions-top'
+    }, [showMaximize &&
+    // @ts-ignore
+    h(Button, {
+      "class": 'k-signature-action k-signature-maximize',
+      ref: setRef(this, 'maximizeButton'),
+      icon: 'hyperlink-open',
+      attrs: this.v3 ? undefined : {
+        icon: 'hyperlink-open',
+        svgIcon: hyperlinkOpenIcon,
+        shape: null,
+        fillMode: 'flat',
+        size: this.$props.size,
+        "aria-label": maximizeTitle,
+        title: maximizeTitle
+      },
+      svgIcon: hyperlinkOpenIcon,
+      shape: null,
+      fillMode: 'flat',
+      size: this.$props.size,
+      onClick: this.onMaximizeClick,
+      on: this.v3 ? undefined : {
+        "click": this.onMaximizeClick
+      },
+      "aria-label": maximizeTitle,
+      title: maximizeTitle
+    }), showMinimize &&
+    // @ts-ignore
+    h(Button, {
+      "class": 'k-signature-action k-signature-minimize k-rotate-180',
+      ref: setRef(this, 'minimizeButton'),
+      icon: 'hyperlink-open',
+      attrs: this.v3 ? undefined : {
+        icon: 'hyperlink-open',
+        svgIcon: hyperlinkOpenIcon,
+        shape: null,
+        fillMode: 'flat',
+        size: this.$props.size,
+        "aria-label": minimizeTitle,
+        title: minimizeTitle
+      },
+      svgIcon: hyperlinkOpenIcon,
+      shape: null,
+      fillMode: 'flat',
+      size: this.$props.size,
+      onClick: this.onMinimizeClick,
+      on: this.v3 ? undefined : {
+        "click": this.onMinimizeClick
+      },
+      "aria-label": minimizeTitle,
+      title: minimizeTitle
+    })]);
+    var hideLine = !this.$props.hideLine && h("div", {
+      "class": 'k-signature-line',
+      style: {
+        zIndex: 2,
+        pointerEvents: 'none'
+      }
+    });
+    var bottomActions = h("div", {
+      "class": 'k-signature-actions k-signature-actions-bottom'
+    }, [showClear &&
+    // @ts-ignore
+    h(Button, {
+      "class": 'k-signature-action k-signature-clear',
+      icon: 'x',
+      attrs: this.v3 ? undefined : {
+        icon: 'x',
+        svgIcon: xIcon,
+        shape: null,
+        fillMode: 'flat',
+        size: this.$props.size,
+        "aria-label": clearTitle,
+        title: clearTitle
+      },
+      svgIcon: xIcon,
+      shape: null,
+      fillMode: 'flat',
+      size: this.$props.size,
+      onClick: this.onClear,
+      on: this.v3 ? undefined : {
+        "click": this.onClear
+      },
+      "aria-label": clearTitle,
+      title: clearTitle
+    })]);
+    return h("div", {
+      dir: this.$props.dir,
+      attrs: this.v3 ? undefined : {
+        dir: this.$props.dir
+      },
+      "class": this.wrapperClass,
+      onFocus: this.onFocus,
+      on: this.v3 ? undefined : {
+        "focus": this.onFocus,
+        "blur": this.onBlur
+      },
+      onBlur: this.onBlur
+    }, [canvasDiv, actions, hideLine, bottomActions, this.computedOpen &&
+    // @ts-ignore function children
+    h(Dialog, {
+      ref: setRef(this, 'dialog'),
+      onOverlayclick: this.onOverlayClick,
+      on: this.v3 ? undefined : {
+        "overlayclick": this.onOverlayClick
+      }
+    }, this.v3 ? function () {
+      return [h("div", {
+        style: {
+          width: _this.popupWidth + 'px',
+          height: _this.popupHeight + 'px'
+        },
+        dir: _this.$props.dir,
+        attrs: _this.v3 ? undefined : {
+          dir: _this.$props.dir
+        },
+        "class": _this.openWrapperClass,
+        onFocus: _this.onFocus,
+        on: _this.v3 ? undefined : {
+          "focus": _this.onFocus,
+          "blur": _this.onBlur
+        },
+        onBlur: _this.onBlur
+      }, [renderCanvas.call(_this, 'openCanvas'), actions, hideLine, bottomActions])];
+    } : [h("div", {
+      style: {
+        width: _this.popupWidth + 'px',
+        height: _this.popupHeight + 'px'
+      },
+      dir: _this.$props.dir,
+      attrs: _this.v3 ? undefined : {
+        dir: _this.$props.dir
+      },
+      "class": _this.openWrapperClass,
+      onFocus: _this.onFocus,
+      on: _this.v3 ? undefined : {
+        "focus": _this.onFocus,
+        "blur": _this.onBlur
+      },
+      onBlur: _this.onBlur
+    }, [renderCanvas.call(_this, 'openCanvas'), actions, hideLine, bottomActions])])]);
+  },
+  methods: {
+    onOverlayClick: function onOverlayClick() {
+      this.currentOpen = false;
+    },
+    onValueChange: function onValueChange(nextValue) {
+      this.currentValue = nextValue;
+      this.$emit('changemodel', nextValue);
+      this.$emit('update:modelValue', nextValue);
+      this.$emit('change', {
+        value: nextValue
+      });
+    },
+    onDialogChange: function onDialogChange(e) {
+      this.onValueChange(e.value);
+    },
+    reset: function reset() {
+      this.onValueChange();
+    },
+    onDialogClose: function onDialogClose(event) {
+      var _a;
+      this.onMinimizeClick(event);
+      (_a = this.maximizeButton || this.canvas.$el) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    exportImage: function exportImage(exportSize) {
+      var _a;
+      return __awaiter(this, void 0, void 0, function () {
+        var width, height;
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              width = exportSize.width, height = exportSize.height;
+              return [4 /*yield*/, (_a = this.canvas.instance) === null || _a === void 0 ? void 0 : _a.exportImage({
+                width: width * this.exportScale,
+                height: height * this.exportScale
+              })];
+            case 1:
+              return [2 /*return*/, _b.sent()];
+          }
+        });
+      });
+    },
+    validityGetter: function validityGetter() {
+      var customError = this.$props.validationMessage !== undefined;
+      var currentValue = this.computedValue; // valueGetter();
+      var valueMissing = !currentValue;
+      var valid = this.$props.valid !== undefined ? this.$props.valid :
+      //   !requiredGetter() || 
+      !valueMissing;
+      return {
+        customError: customError,
+        valid: valid,
+        valueMissing: valueMissing
+      };
+    },
+    focusElement: function focusElement() {
+      this.canvas.$el.focus();
+    },
+    getImperativeHandle: function getImperativeHandle() {
+      var options = {
+        element: this.$el,
+        focus: this.focusElement()
+      };
+      // Object.defineProperty(options, 'name', { get: nameGetter });
+      // Object.defineProperty(options, 'value', { get: this.computedValue }); //valueGetter
+      // Object.defineProperty(options, 'validity', { get: validityGetter });
+      // Object.defineProperty(options, 'validityStyles', { get: validityStylesGetter });
+      // Object.defineProperty(options, 'required', { get: requiredGetter });
+      // Object.defineProperty(options, 'props', { get: propsGetter });
+      // Object.defineProperty(options, 'color', { get: colorGetter });
+      // Object.defineProperty(options, 'backgroundColor', { get: backgroundColorGetter });
+      return options;
+    },
+    onFocus: function onFocus(event) {
+      if (this.focused || this.computedOpen) {
+        return;
+      }
+      this.focused(true);
+      this.$emit('focus', __assign({
+        event: event
+      }, this.getImperativeHandle()));
+    },
+    onBlur: function onBlur(event) {
+      var insideWrapper = hasParent(event.relatedTarget, this.$el);
+      if (insideWrapper) {
+        return;
+      }
+      this.focused = false;
+      this.$emit('blur', __assign({
+        event: event
+      }, this.getImperativeHandle()));
+    },
+    onMaximizeClick: function onMaximizeClick(event) {
+      return __awaiter(this, void 0, void 0, function () {
+        var _a;
+        return __generator(this, function (_b) {
+          switch (_b.label) {
+            case 0:
+              _a = this;
+              return [4 /*yield*/, this.exportImage(this.popupSize())];
+            case 1:
+              _a.currentValue = _b.sent();
+              this.currentOpen = true;
+              this.$emit('open', __assign({
+                event: event
+              }, this.getImperativeHandle()));
+              return [2 /*return*/];
+          }
+        });
+      });
+    },
+
+    onMinimizeClick: function onMinimizeClick(event) {
+      this.currentOpen = false;
+      this.$emit('close', __assign({
+        event: event
+      }, this.getImperativeHandle()));
+    },
+    onClear: function onClear() {
+      this.reset();
+      this.focusElement();
+    },
+    elementSize: function elementSize() {
+      var width = this.$props.width || this.$el && this.$el.offsetWidth || DEFAULT_WIDTH;
+      var height = this.$props.height || this.$el && this.$el.offsetHeight || DEFAULT_HEIGHT;
+      return {
+        width: width,
+        height: height
+      };
+    },
+    popupSize: function popupSize() {
+      var _a = this.elementSize(),
+        width = _a.width,
+        height = _a.height;
+      return {
+        width: width * this.popupScale,
+        height: height * this.popupScale
+      };
+    }
+  }
+};
+var Signature = SignatureVue2;
+export { Signature, SignatureVue2 };

package/dist/es/signature/SignatureCanvas.d.ts

@@ -0,0 +1,39 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { SignaturePad } from '@progress/kendo-inputs-common';
+import { SignatureCanvasProps } from './interfaces/SignatureCanvasProps';
+/**
+ * @hidden
+ */
+export interface SignatureCanvasData {
+}
+export interface SignatureCanvasState {
+    v3: boolean;
+    instance: SignaturePad;
+}
+/**
+ * @hidden
+ */
+export interface SignatureCanvasMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SignatureCanvasComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SignatureCanvasAll extends Vue2type, SignatureCanvasMethods, SignatureCanvasComputed, SignatureCanvasState, SignatureCanvasData {
+}
+/**
+ * @hidden
+ */
+declare let SignatureCanvasVue2: ComponentOptions<SignatureCanvasAll, DefaultData<SignatureCanvasData>, DefaultMethods<SignatureCanvasAll>, SignatureCanvasComputed, RecordPropsDefinition<SignatureCanvasProps>>;
+declare const SignatureCanvas: DefineComponent<SignatureCanvasProps, any, SignatureCanvasData, SignatureCanvasComputed, SignatureCanvasMethods, {}, {}, {}, string, SignatureCanvasProps, SignatureCanvasProps, {}>;
+export { SignatureCanvas, SignatureCanvasVue2 };