@globalpayments/vega 2.18.0 → 2.19.0

package/dist/esm/vega-signature-capture.entry.js

@@ -0,0 +1,507 @@
+import { h, H as Host, r as registerInstance, c as createEvent, g as getElement } from './index-c3505689.js';
+import { a as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-f2f52a50.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-a52b1c10.js';
+import { s as sanitizeVegaComponent } from './component-40be4402.js';
+import { D as DomNodeSubjectObserverFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
+import { a as VegaClick, e as VegaChange } from './vegaEventId-dc9cd6b8.js';
+import { b as FORM_ELEMENT_VALUE_CHANGE } from './staticSubjectTitle-3b88939a.js';
+import { C as ChangeManager } from './changeManager-d60d98c8.js';
+import { d as deepEqual } from './object-261e7344.js';
+import { c as createEventEmitSlimmer } from './eventEmitSlimmer-3087be32.js';
+import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-bd240f6a.js';
+import { R as RequiredFieldRule } from './requiredFieldRule-f549a39d.js';
+import './iconManager-48bebc43.js';
+import './dynamic-slimmer-ef83e258.js';
+import './internalVegaEventManager-7c0f128e.js';
+import './string-be824360.js';
+import './ui-28499aab.js';
+import './misc-c21a85c9.js';
+import './vegaInternalEventId-bde5d617.js';
+import './pageResizeObserverSlimmer-d36f30e8.js';
+import './breakpoints-e59edf8d.js';
+import './ui-df46cc20.js';
+import './mutationObserverSlimmer-2355cedf.js';
+import './mutationObserverFilters-243934f6.js';
+import './array-8c82516c.js';
+import './number-e2519d1c.js';
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaSignatureCaptureRenderer extends VegaSlimmer {
+  render() {
+    return h(Host, null, this.mode === 'written' && this.writtenModeRenderer.render());
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaSignatureCaptureRenderer.prototype, "mode", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaSignatureCaptureRenderer.prototype, "writtenModeRenderer", void 0);
+
+const Icons = {
+  signature: {
+    icon: `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M176 128c0-26.5 21.5-48 48-48s48 21.5 48 48v7.9c0 27.5-2.3 55-7 82.1L158 251.1c-36.9 11.4-62 45.5-62 84.1V410c0 38.6 31.3 70 70 70c24.6 0 47.4-12.9 60-34l15.9-26.4c29.6-49.4 51.1-103.3 63.6-159.5l1-4.7 110.8-34.3-23.9 66.8c-2.6 7.4-1.5 15.5 3 21.9s11.8 10.2 19.6 10.2H552c13.3 0 24-10.7 24-24s-10.7-24-24-24H450.1l28.5-79.9c3.1-8.6 1-18.1-5.3-24.7s-15.7-9-24.4-6.3l-133 41.2c2.7-22 4.1-44.2 4.1-66.4V128c0-53-43-96-96-96s-96 43-96 96v40c0 13.3 10.7 24 24 24s24-10.7 24-24V128zm-3.8 169l80.9-25c-11.7 43.2-29.4 84.5-52.4 123l-15.9 26.4c-4 6.6-11.1 10.7-18.8 10.7c-12.1 0-22-9.8-22-22V335.2c0-17.5 11.4-33 28.2-38.2zM64 368H24c-13.3 0-24 10.7-24 24s10.7 24 24 24H64.2c-.1-2-.2-4-.2-6V368zm216.8 48H616c13.3 0 24-10.7 24-24s-10.7-24-24-24H304.1c-7 16.3-14.8 32.4-23.3 48z"/></svg>`,
+  },
+};
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class WrittenModeRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-signature-capture-focus-e2e}
+     */
+    /* istanbul ignore next */
+    this.signatureCaptureFocus = () => {
+      this.signatureCaptureContainerRef.focus();
+    };
+  }
+  getSignatureCaptureContainer() {
+    return this.signatureCaptureContainerRef;
+  }
+  render() {
+    return (h("vega-flex", { direction: "col", gap: "size-8" },
+      this.renderLabel(),
+      this.renderContainer(),
+      this.renderFooter()));
+  }
+  renderLabel() {
+    return (this.label && (h("vega-field-label", { onClick: this.signatureCaptureFocus, isFieldRequired: this.required, label: this.label, disabled: this.disabled })));
+  }
+  renderContainer() {
+    return (h("div", { class: {
+        'signature-capture-written-container': true,
+        'disabled': this.disabled,
+      }, "aria-label": "Please sign here", role: "textbox", tabIndex: this.disabled ? -1 : 0, ref: (ref) => (this.signatureCaptureContainerRef = ref) },
+      this.renderPlaceholder(),
+      this.renderSignaturePad()));
+  }
+  renderPlaceholder() {
+    if (this.isDrawing || this.value)
+      return;
+    return (this.placeholder && (h("vega-flex", { class: "placeholder-container", gap: "size-8", justifyContent: "center", alignItems: "center", margin: {
+        left: 'size-24',
+        right: 'size-24',
+      } },
+      this.placeholderIcon && (h("vega-icon", { class: "placeholder-container-icon", size: "size-20", color: "text-secondary", icon: this.placeholderIcon })),
+      h("div", { class: "placeholder-container-content" }, this.placeholder))));
+  }
+  /*
+   * When the clear button is displayed, since the error message and the clear button are in the same line, this element is displayed.
+   */
+  renderSignaturePad() {
+    return (h("svg", { style: { width: '100%', height: '320px', touchAction: 'none' }, ref: (ref) => this.writtenModeSvgController.setSignatureContainerRef(ref) }));
+  }
+  renderFooter() {
+    return (this.showClearBtn && (h("vega-flex", { class: "signature-capture-written-footer", justifyContent: "space-between" },
+      h("div", { class: "vega-error vega-hidden vega-error-content" }),
+      this.renderClearBtn())));
+  }
+  renderClearBtn() {
+    return (h("div", { class: "clear-button" },
+      h("vega-button-link", { size: "small", disabled: this.disabled, ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+            this.writtenModeSvgController.clear();
+          });
+        } }, "Clear Signature")));
+  }
+}
+(() => {
+  VegaInternalIconManager.register(Icons);
+})();
+__decorate$2([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "label", void 0);
+__decorate$2([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "required", void 0);
+__decorate$2([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "showClearBtn", void 0);
+__decorate$2([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "placeholder", void 0);
+__decorate$2([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "placeholderIcon", void 0);
+__decorate$2([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "disabled", void 0);
+__decorate$2([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "value", void 0);
+__decorate$2([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "isDrawing", void 0);
+__decorate$2([
+  MapToComponentField()
+], WrittenModeRenderer.prototype, "writtenModeSvgController", void 0);
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Signature written mode controller
+ */
+class WrittenModeSvgController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.penWidth = '4px';
+    /**
+     * Clear the signature
+     */
+    this.clear = () => {
+      this.signatureContainerRef.innerHTML = '';
+      this.value = null;
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-signature-capture-on-draw-signature}
+     */
+    /* istanbul ignore next */
+    /**
+     * Start drawing the current path
+     *
+     * @param {MouseEvent} e - MouseEvent
+     */
+    this.startDrawing = (e) => {
+      if (this.disabled)
+        return;
+      this.isDrawing = true;
+      const { x, y } = this.getPoint(e);
+      this.currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      this.currentPath.setAttribute('d', `M ${x} ${y}`);
+      Object.assign(this.currentPath.style, {
+        stroke: 'rgba(4, 4, 28, 1)',
+        strokeWidth: this.penWidth,
+        fill: 'none',
+        strokeLinecap: 'round',
+        strokeLinejoin: 'round',
+      });
+      this.signatureContainerRef.appendChild(this.currentPath);
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-signature-capture-on-draw-signature}
+     */
+    /* istanbul ignore next */
+    /**
+     * Get the current mouse position
+     *
+     * @param {MouseEvent | TouchEvent} e - MouseEvent on desktop or TouchEvent on mobile
+     * @returns {VegaSignatureMousePosition} - Current mouse position
+     */
+    this.getPoint = (e) => {
+      const rect = this.signatureContainerRef.getBoundingClientRect();
+      const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+      const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+      return {
+        x: clientX - rect.left,
+        y: clientY - rect.top,
+      };
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-signature-capture-on-draw-signature}
+     */
+    /* istanbul ignore next */
+    /**
+     * Draw the current path to the end point
+     *
+     * @param {MouseEvent} e - Mouse event
+     */
+    this.draw = (e) => {
+      if (!this.isDrawing)
+        return;
+      const { x, y } = this.getPoint(e);
+      const d = this.currentPath.getAttribute('d');
+      this.currentPath.setAttribute('d', `${d} L ${x} ${y}`);
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-signature-capture-on-draw-signature}
+     */
+    /* istanbul ignore next */
+    /**
+     * Stop drawing and update the value
+     */
+    this.stopDrawing = () => {
+      if (!this.isDrawing)
+        return;
+      this.isDrawing = false;
+      this.value = { type: 'written', img: this.generateSignatureImage() };
+    };
+  }
+  /**
+   * Setup written listeners
+   */
+  componentDidLoad() {
+    this.setupListeners();
+    this.fillSignature(this.value);
+  }
+  /**
+   * Clear the signature
+   */
+  handleClear() {
+    this.clear();
+  }
+  /**
+   * Emit the vegaChange event when value changed
+   *
+   * @param {VegaSignatureValue} newValue - The `newValue` parameter is a object representing the new value for the signature capture.
+   * @param {VegaSignatureValue} oldValue - The `oldValue` parameter is a object representing the old value for the signature capture.
+   */
+  watchValue(newValue, oldValue) {
+    if (deepEqual(newValue, oldValue))
+      return;
+    this.changeEventEmitter.emit(newValue);
+    this.fillSignature(newValue);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: newValue,
+    });
+  }
+  /**
+   * Set the signature container ref
+   *
+   * @param {SVGElement} ref - signature container ref
+   */
+  setSignatureContainerRef(ref) {
+    this.signatureContainerRef = ref;
+  }
+  /**
+   * Setup the listeners, for desktop and mobile
+   */
+  setupListeners() {
+    const container = this.signatureContainerRef;
+    container.addEventListener('mousedown', this.startDrawing);
+    container.addEventListener('mousemove', this.draw);
+    container.addEventListener('mouseup', this.stopDrawing);
+    container.addEventListener('mouseleave', this.stopDrawing);
+    // For mobile
+    container.addEventListener('touchstart', this.startDrawing);
+    container.addEventListener('touchmove', this.draw);
+    container.addEventListener('touchend', this.stopDrawing);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-signature-capture-on-draw-signature}
+   */
+  /* istanbul ignore next */
+  /**
+   * Generate the signature base64 image string
+   *
+   * @returns {string} - base64 image string
+   */
+  generateSignatureImage() {
+    const serializer = new XMLSerializer();
+    const svgData = serializer.serializeToString(this.signatureContainerRef);
+    const base64Svg = btoa(unescape(encodeURIComponent(svgData)));
+    return `data:image/svg+xml;base64,${base64Svg}`;
+  }
+  /**
+   * Parse the value to svg
+   *
+   * @param {VegaSignatureValue} value - Signature value
+   * @returns {Nullable<HTMLElement>} - SVG element
+   */
+  fromDataURL(value) {
+    if (!value || !value.img)
+      return;
+    const base64Svg = this.value.img.replace('data:image/svg+xml;base64,', '');
+    return new DOMParser().parseFromString(atob(base64Svg), 'image/svg+xml').documentElement;
+  }
+  /**
+   * Fill the signature from the value.
+   * Not fill the signature if the signature container already has child nodes, that means in written status.
+   *
+   * @param {VegaSignatureValue} value - Signature value
+   */
+  fillSignature(value) {
+    this.signatureContainerRef.replaceChildren();
+    const signature = this.fromDataURL(value);
+    if (signature) {
+      const paths = Array.from(signature.childNodes);
+      this.signatureContainerRef.append(...paths);
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], WrittenModeSvgController.prototype, "changeEventEmitter", void 0);
+__decorate$1([
+  MapToComponentField()
+], WrittenModeSvgController.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], WrittenModeSvgController.prototype, "value", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], WrittenModeSvgController.prototype, "isDrawing", void 0);
+__decorate$1([
+  MapToComponentField()
+], WrittenModeSvgController.prototype, "disabled", void 0);
+__decorate$1([
+  MapToComponentMethod('componentDidLoad')
+], WrittenModeSvgController.prototype, "componentDidLoad", null);
+__decorate$1([
+  MapToComponentMethod('clear')
+], WrittenModeSvgController.prototype, "handleClear", null);
+__decorate$1([
+  MapToComponentMethod('watchValue')
+], WrittenModeSvgController.prototype, "watchValue", null);
+
+const vegaSignatureCaptureCss = ":host{display:block}.signature-capture-written-container{border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;overflow:hidden;width:100%;position:relative;background-color:rgb(252, 252, 252)}.signature-capture-written-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}.signature-capture-written-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}.signature-capture-written-container .placeholder-container{height:100%;position:absolute;top:0px;right:0px;bottom:0px;left:0px;pointer-events:none}.signature-capture-written-container .placeholder-container-content{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:500;line-height:28px;letter-spacing:0px;color:rgba(4, 4, 28, 0.64)}@media screen and (min-width: 768px) and (max-width: 1023px){.signature-capture-written-container .placeholder-container-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.signature-capture-written-container .placeholder-container-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.signature-capture-written-container .placeholder-container-content{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.signature-capture-written-container .placeholder-container-icon{flex-shrink:0;color:rgba(4, 4, 28, 0.64)}.signature-capture-written-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}.signature-capture-written-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}.signature-capture-written-container.error:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));border:1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1))}.signature-capture-written-container.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}.signature-capture-written-container.disabled:hover,.signature-capture-written-container.disabled:focus-within{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}.signature-capture-written-container.disabled:focus-within{outline:none}.signature-capture-written-container.disabled .placeholder-container-content,.signature-capture-written-container.disabled .placeholder-container-icon{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}.signature-capture-written-footer .clear-button{flex-grow:1;padding-right:8px;text-align:right}.signature-capture-written-footer .vega-error-content{padding-top:0px;padding-right:0px;flex-grow:1}.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;padding-right:8px;padding-left:8px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaSignatureCapture = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaSignatureCaptureRenderer = new VegaSignatureCaptureRenderer();
+    this.writtenModeRenderer = new WrittenModeRenderer();
+    this.writtenModeSvgController = new WrittenModeSvgController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaSignatureCapture, VegaChange);
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => (isRequired ? new RequiredFieldRule() : null),
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: null,
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.writtenModeRenderer.getSignatureCaptureContainer(),
+      touchableAreaGetter: () => [this.writtenModeRenderer.getSignatureCaptureContainer()],
+    });
+    /**
+     * Specifies the state of the signature
+     */
+    this.isDrawing = false;
+    /**
+     * Specifies the mode of the signature capture
+     */
+    this.mode = 'written';
+    /**
+     * Specifies the label or title for the signature capture.
+     *
+     * It provides descriptive text that helps identify the
+     *    purpose or content expected in the signature capture.
+     */
+    this.label = '';
+    /**
+     * Determines whether the signature capture field is required.
+     */
+    this.required = false;
+    /**
+     * Determines whether the clear button is displayed.
+     */
+    this.showClearBtn = true;
+    /**
+     * Specifies a placeholder string that displays as a temporary hint
+     *    or example inside the signature capture.
+     *
+     * It indicates the expected format or pattern of the signature capture.
+     */
+    this.placeholder = 'Please sign here';
+    /**
+     * Specifies an icon or symbol that appears before the placeholder,
+     *    providing visual context or enhancing the aesthetic appearance
+     *    of the signature capture.
+     */
+    this.placeholderIcon = VegaInternalIconManager.getIconKey('signature');
+    /**
+     * Specifies whether the signature capture is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Specifies the value of the signature capture
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.value = null;
+    /**
+     * Indicates whether the current value in the field is considered valid or
+     *    invalid based on the defined validation rules.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether the signature capture field should undergo automatic validation
+     *    during the user's sign.
+     */
+    this.autoValidation = true;
+    /**
+     * Defines custom validation rules for the signature capture field.
+     */
+    this.validationRules = [];
+  }
+  watchValue(newValue, oldValue) {
+  }
+  watchValidationRules() {
+  }
+  /**
+   * Invoke this method to clear the signature
+   */
+  async clear() {
+  }
+  render() {
+    return sanitizeVegaComponent(this.vegaSignatureCaptureRenderer.render(), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["watchValue"],
+    "validationRules": ["watchValidationRules"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaSignatureCapture.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSignatureCapture.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSignatureCapture.prototype, "vegaSignatureCaptureRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSignatureCapture.prototype, "writtenModeRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSignatureCapture.prototype, "writtenModeSvgController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSignatureCapture.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSignatureCapture.prototype, "formFieldController", void 0);
+VegaSignatureCapture.style = vegaSignatureCaptureCss;
+
+export { VegaSignatureCapture as vega_signature_capture };

package/dist/esm/{vega-skeleton-loader-controller-ef5c18ee.js → vega-skeleton-loader-controller-961112bb.js}

@@ -4,8 +4,8 @@ import { Z as ZIndexManager } from './zIndexManager-522f477e.js';
 import { I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-ef83e258.js';
 import { P as PageResizeObserverSlimmer } from './pageResizeObserverSlimmer-d36f30e8.js';
-import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-9943807e.js';
-import { I as InternalVegaEventManager } from './internalVegaEventManager-fc0821e2.js';
+import { c as createCommonjsModule, a as commonjsGlobal } from './index-dc8f8d91.js';
+import { i as internalVegaEventManager } from './internalVegaEventManager-7c0f128e.js';
 
 /**
  * Vega loader controller to control the loading indicator
@@ -3065,44 +3065,6 @@ class ThemeManager {
 }
 const VegaThemeManager = new ThemeManager();
 
-var FrameworkEnum;
-(function (FrameworkEnum) {
-  FrameworkEnum["Angular"] = "angular";
-  FrameworkEnum["Vue"] = "vue";
-  FrameworkEnum["React"] = "react";
-  FrameworkEnum["Next"] = "next";
-  FrameworkEnum["VanillaJs"] = "vanilla-js";
-})(FrameworkEnum || (FrameworkEnum = {}));
-/** The VegaEnvManager class manages vega environment parameters. */
-class VegaEnvManager {
-  constructor() {
-    // The `2.18.0` will be replaced to a version string when running publish script.
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.vegaVersion = '2.18.0';
-    this.framework = FrameworkEnum.VanillaJs;
-  }
-  /**
-   * The function "getVegaEnv" returns vega environment parameters.
-   *
-   * @returns {VegaEnvManagerType} The method is returning a VegaEnvManagerType object.
-   */
-  getVegaEnv() {
-    return {
-      version: this.vegaVersion,
-      framework: this.framework,
-    };
-  }
-  /**
-   * The function sets the Vega framework to the specified value.
-   *
-   * @param {FrameworkEnum} framework - The framework parameter is a type that can be one of the values in the FrameworkSafeList array.
-   */
-  setVegaFramework(framework) {
-    this.framework = framework;
-  }
-}
-const vegaEnvManager = new VegaEnvManager();
-
 /**
  * The VegaEventManager class provides methods for setting and retrieving event semantics configuration,
  * as well as getting the corresponding native event name for a given event.
@@ -3117,7 +3079,7 @@ class VegaEventManager {
    * semantics of the event.
    */
   setSemantics(config) {
-    InternalVegaEventManager.setSemantics(config);
+    internalVegaEventManager.setSemantics(config);
   }
   /**
    * The function "getSemantics" returns the event semantics of an HTML element.
@@ -3128,7 +3090,7 @@ class VegaEventManager {
    * @returns {EventSemantics} an object of type EventSemantics.
    */
   getSemantics(host) {
-    return InternalVegaEventManager.getSemantics(host);
+    return internalVegaEventManager.getSemantics(host);
   }
   /**
    * The function "getEnabledEventIdsByComponent" returns the all eventIds in component.
@@ -3138,7 +3100,7 @@ class VegaEventManager {
    * @returns {Nullable<VegaEventID[]>} All eventIds.
    */
   getEnabledEventIdsByComponent(componentName) {
-    return InternalVegaEventManager.getEnabledEventIdsByComponent(componentName);
+    return internalVegaEventManager.getEnabledEventIdsByComponent(componentName);
   }
 }
 const VegaEventManager$1 = new VegaEventManager();
@@ -3242,4 +3204,4 @@ class VegaSkeletonLoaderController {
 VegaSkeletonLoaderController.LOADER_DATA_SET_KEY = 'vegaSkeletonLoaderKey';
 const VegaSkeletonLoader = new VegaSkeletonLoaderController();
 
-export { FrameworkEnum as F, VegaLoader as V, VegaNotify as a, VegaThemeManager as b, VegaEventManager$1 as c, VegaSkeletonLoader as d, vegaEnvManager as v, waitForVega as w };
+export { VegaLoader as V, VegaNotify as a, VegaThemeManager as b, VegaEventManager$1 as c, VegaSkeletonLoader as d, waitForVega as w };

package/dist/esm/vega-skeleton.entry.js

@@ -1,6 +1,6 @@
 import { h, H as Host, F as Fragment, r as registerInstance, g as getElement } from './index-c3505689.js';
 import { a as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-f2f52a50.js';
 import { s as sanitizeVegaComponent } from './component-40be4402.js';
 import { p as parseToPixelString } from './pixel-f32c07ce.js';
 

package/dist/esm/vega-slot-container.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-c3505689.js';
 import { I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-f2f52a50.js';
 
 const vegaSlotContainerCss = ":host{display:contents}";
 

package/dist/esm/vega-stepper.entry.js

@@ -3,14 +3,14 @@ import { M as MinNumberRule, a as MaxNumberRule } from './minNumberRule-26af7868
 import { s as sanitizeVegaComponent } from './component-40be4402.js';
 import { c as convertToNumber, n as normalizeNumberByRanger } from './number-e2519d1c.js';
 import { I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
-import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-ea050a17.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-8e071cfd.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-f2f52a50.js';
+import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-bd240f6a.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-2d3364c6.js';
 import { D as DomNodeSubjectObserverFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
 import { t as VegaBlur, e as VegaChange, a as VegaClick } from './vegaEventId-dc9cd6b8.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE } from './staticSubjectTitle-3b88939a.js';
 import { C as ChangeManager } from './changeManager-d60d98c8.js';
-import { c as createEventEmitSlimmer } from './eventEmitSlimmer-2cd4efb4.js';
+import { c as createEventEmitSlimmer } from './eventEmitSlimmer-3087be32.js';
 import { a as arrayToClassString } from './ui-28499aab.js';
 import './string-be824360.js';
 import './misc-c21a85c9.js';
@@ -22,7 +22,10 @@ import './ui-df46cc20.js';
 import './mutationObserverSlimmer-2355cedf.js';
 import './mutationObserverFilters-243934f6.js';
 import './array-8c82516c.js';
-import './internalVegaEventManager-fc0821e2.js';
+import './internalVegaEventManager-7c0f128e.js';
+import './vegaEnvManager-e0c1fde1.js';
+import './featureFlagController-254d5886.js';
+import './index-dc8f8d91.js';
 
 const VegaStepperRuntimeMetricsPayloadDefinition = [
   {
@@ -75,7 +78,7 @@ const VegaStepperRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-const vegaStepperCss = ":host{display:inline-block;line-height:normal}:host>label{display:block;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){:host>label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host>label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host>label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host>div{display:inline-flex;justify-content:center;align-items:center;margin-top:8px}:host div.vega-stepper-container-edited vega-input::part(container-wrapper){padding-left:0px;padding-right:0px}:host(.disabled) vega-input::part(input-container){text-align:center;background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));padding:0px;border:0;box-shadow:unset}:host(.disabled) vega-input::part(input-container):hover{border:0}:host(.disabled) vega-input::part(input){background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));color:rgba(var(--v-text-primary, 32, 54, 69, 1));border:0}:host vega-input::part(input){width:48px;text-align:center;-moz-appearance:textfield}:host vega-input::part(input)::-webkit-inner-spin-button{-webkit-appearance:none}:host vega-input::part(input)::-webkit-outer-spin-button{-webkit-appearance:none}:host vega-input::part(error){display:none}:host vega-input::part(container-wrapper){padding-left:8px;padding-right:8px}:host .vega-error{display:none}:host .vega-stepper-container.error vega-input::part(input-container){border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-stepper-container.error vega-input::part(input-container):hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-stepper-container.error vega-input::part(input-container):focus-within{box-shadow:0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25))}";
+const vegaStepperCss = ":host{display:inline-block;line-height:normal}:host>label{display:block;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){:host>label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host>label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host>label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host>div{display:inline-flex;justify-content:center;align-items:center;margin-top:8px}:host div.vega-stepper-container-edited vega-input::part(container-wrapper){padding-left:0px;padding-right:0px}:host(.disabled) vega-input::part(input-container){text-align:center;background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));padding:0px;border:0;box-shadow:unset}:host(.disabled) vega-input::part(input-container):hover{border:0}:host(.disabled) vega-input::part(input){background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));color:rgba(var(--v-text-primary, 32, 54, 69, 1));border:0}:host vega-input::part(input){width:48px;text-align:center;-moz-appearance:textfield}:host vega-input::part(input)::-webkit-inner-spin-button{-webkit-appearance:none}:host vega-input::part(input)::-webkit-outer-spin-button{-webkit-appearance:none}:host vega-input::part(error){display:none}:host vega-input::part(container-wrapper){padding-left:8px;padding-right:8px}:host .vega-error{display:none}:host .vega-stepper-container.error vega-input::part(input-container){border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-stepper-container.error vega-input::part(input-container):hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-stepper-container.error vega-input::part(input-container):focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;