@globalpayments/vega 2.18.0 → 2.19.0

package/dist/collection/components/vega-calendar/vega-calendar-event-slot/vega-calendar-event-slot.js

@@ -0,0 +1,55 @@
+var __decorate = (this && this.__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;
+};
+import { Component, h, Host, Prop, Element } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { getCalendarEventSlotName } from '../utils';
+export class VegaCalendarEventSlot {
+  constructor() {
+    this.globalSlimmer = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { slot: getCalendarEventSlotName(this.eventKey) },
+      h("slot", null)), this.host);
+  }
+  static get is() { return "vega-calendar-event-slot"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-calendar-event-slot.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-calendar-event-slot.css"]
+  }; }
+  static get properties() { return {
+    "eventKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the event key."
+      },
+      "attribute": "event-key",
+      "reflect": true
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCalendarEventSlot.prototype, "globalSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendarEventSlot.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-calendar/vega-calendar.css

@@ -586,6 +586,57 @@
   box-sizing: border-box;
   padding-left: 3px;
 }
+.calendar-view-container .calendar-view-event-all .more-button {
+  display: inline-block;
+  height: 16px;
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-link, 19, 98, 226, 1));
+  cursor: pointer;
+  border-radius: 2px;
+  margin-left: 2px;
+  padding: 2px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .calendar-view-container .calendar-view-event-all .more-button {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .calendar-view-container .calendar-view-event-all .more-button {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  .calendar-view-container .calendar-view-event-all .more-button {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+.calendar-view-container .calendar-view-event-all .more-button:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
+}
+.calendar-view-container .calendar-view-event-all .event-all-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+}
 .calendar-view-container .day-event-col {
   position: relative;
 }
@@ -600,4 +651,8 @@
 }
 .calendar-view-container .day-event-col .time-event-block:focus-within {
   z-index: 60 !important;
+}
+
+.calendar-event-slot-container {
+  display: none;
 }

package/dist/collection/components/vega-calendar/vega-calendar.js

@@ -28,6 +28,7 @@ import { VegaCalendarTimedEventRenderer } from './slimmers/day-view/renderers/ti
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
 import { VegaCalendarFullDayEventLayoutRenderer } from './slimmers/common/renderers/vega-calendar-full-day-event-layout-renderer';
 import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/subStateNotifySlimmer';
+import { VegaCalendarFullDayEventMoreButtonRenderer } from './slimmers/day-view/renderers/full-day-event/vega-calendar-full-day-event-more-button-renderer';
 export class VegaCalendar {
   constructor() {
     this.globalSlimmer = {};
@@ -43,6 +44,7 @@ export class VegaCalendar {
     this.currentPeriodController = new VegaCalendarCurrentPeriodController();
     this.calendarViewController = new VegaCalendarViewController();
     this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
+    this.dayViewFullDayEventMoreButtonRenderer = new VegaCalendarFullDayEventMoreButtonRenderer();
     this.dayViewTimedEventRenderer = new VegaCalendarTimedEventRenderer();
     this.eventItemRenderer = new VegaCalendarEventItemRenderer();
     this.dayViewEventLayoutRenderer = new VegaCalendarDayViewEventLayoutRenderer();
@@ -54,6 +56,7 @@ export class VegaCalendar {
     this.dateDblClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateDblClick);
     this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
     this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
+    this.showAllEventsInDayOrWeekView = false;
     this.calendarEvents = [];
     /**
      * Specifies the current view mode of the calendar.
@@ -180,6 +183,7 @@ export class VegaCalendar {
   static get states() { return {
     "calendarView": {},
     "currentPeriod": {},
+    "showAllEventsInDayOrWeekView": {},
     "calendarEvents": {}
   }; }
   static get events() { return [{
@@ -357,6 +361,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewTimedEventRenderer", void 0);

package/dist/collection/components/vega-dropdown/vega-dropdown-content-box/vega-dropdown-content-box.css

@@ -70,8 +70,7 @@
 }
 
 :host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):focus-within {
-  --tw-shadow: 0 0 #0000;
-  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+  outline: none;
 }
 
 :host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):hover {

package/dist/collection/components/vega-dropdown/vega-dropdown-content-box/vega-dropdown-content-box.js

@@ -7,13 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Component, Host, h, Element } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/componentUsageRuntimeMetrics';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
 import { VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
-import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/componentUsageRuntimeMetrics';
 export class VegaDropdownContentBox {
   constructor() {
     this.globalSlimmers = {};
-    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host);
+    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
   }
   render() {

package/dist/collection/components/vega-input/vega-input.css

@@ -52,7 +52,9 @@ vega-field-label {
 }
 
 .vega-input-container:focus-within {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  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));
 }
 
 .vega-input-container.error {
@@ -64,8 +66,9 @@ vega-field-label {
 }
 
 .vega-input-container.error:focus-within {
-  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  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));
 }
 
 .vega-input-prefix {

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.css

@@ -22,9 +22,9 @@
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
 :host .vega-input-phone-number-container.error vega-input::part(input-container):focus-within {
-  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
   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));
   box-shadow: 0 0 0;
 }
 

package/dist/collection/components/vega-input-range/vega-input-range.css

@@ -52,7 +52,7 @@
 .vega-input-range-input-container vega-input::part(input-container):focus-within {
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
   outline-offset: 2px;
-  border: 1px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
   position: relative;
   box-shadow: 0 0 0;
   margin: -1px;
@@ -104,9 +104,9 @@
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
 .vega-input-range-container.error vega-input::part(input-container):focus-within {
-  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
   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));
 }
 
 .vega-input-range-hint {

package/dist/collection/components/vega-input-select/vega-input-select.css

@@ -81,9 +81,9 @@
   border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
 }
 :host .vega-input-select-container:focus {
-  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
-  outline: none;
+  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));
 }
 
 :host .error .vega-input-select-container {
@@ -93,8 +93,9 @@
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
 :host .error .vega-input-select-container:focus {
-  border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  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));
 }
 
 :host(.vega-input-select-disabled) .vega-input-select-label {

package/dist/collection/components/vega-page-notification/vega-page-notification.css

@@ -5,7 +5,6 @@
  */
 :host {
   display: inline-block;
-  padding: 24px;
   box-sizing: border-box;
   border-radius: 12px;
   max-width: 480px;
@@ -16,7 +15,6 @@
 :host(.mobile) {
   width: 100%;
   max-width: 100%;
-  padding: 16px;
   animation: fade-in-up 300ms ease-in-out;
 }
 

package/dist/collection/components/vega-page-notification/vega-page-notification.js

@@ -99,11 +99,12 @@ export class VegaPageNotification {
   render() {
     const classNames = arrayToClassString([this.type, this.isMobileDevice && 'mobile'].filter(Boolean));
     return sanitizeVegaComponent(h(Host, { class: classNames },
-      h("vega-flex", { gap: "size-16" },
-        this.renderPrefixIcon(),
-        this.renderContent(),
-        this.renderCloseButtons()),
-      this.renderActionButtons()), this.host);
+      h("vega-box", { padding: this.isMobileDevice ? 'size-16' : 'size-24' },
+        h("vega-flex", { gap: "size-16" },
+          this.renderPrefixIcon(),
+          this.renderContent(),
+          this.renderCloseButtons()),
+        this.renderActionButtons())), this.host);
   }
   renderCloseButtons() {
     if (!this.showCloseButton)

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.css

@@ -34,13 +34,16 @@
 :host(:not(.click-step-disabled)) .vega-progress-step.default:active .vega-progress-step__icon {
   background-color: rgba(var(--v-bg-action-quaternary-active, 205, 209, 211, 1));
 }
-:host(:not(.click-step-disabled)) .vega-progress-step.inProgress .vega-progress-step__icon:hover {
+:host(:not(.click-step-disabled)) .vega-progress-step.inProgress .vega-progress-step__icon:hover,
+:host(:not(.click-step-disabled)) .vega-progress-step.current .vega-progress-step__icon:hover {
   background-color: rgba(var(--v-bg-action-hover, 4, 112, 236, 1));
 }
-:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:hover .vega-progress-step__icon {
+:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:hover .vega-progress-step__icon,
+:host(:not(.click-step-disabled)) .vega-progress-step.current:hover .vega-progress-step__icon {
   background-color: rgba(var(--v-bg-action-hover, 4, 112, 236, 1));
 }
-:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:active .vega-progress-step__icon {
+:host(:not(.click-step-disabled)) .vega-progress-step.inProgress:active .vega-progress-step__icon,
+:host(:not(.click-step-disabled)) .vega-progress-step.current:active .vega-progress-step__icon {
   background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
 }
 :host(:not(.click-step-disabled)) .vega-progress-step.complete:hover .vega-progress-step__icon {
@@ -55,6 +58,9 @@
 :host(:not(.click-step-disabled)) .vega-progress-step.complete:active .vega-progress-step__icon vega-icon {
   color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
 }
+:host(:not(.click-step-disabled)) .vega-progress-step.complete.current .vega-progress-step__icon vega-icon {
+  color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
+}
 
 :host .vega-progress-step:focus-visible {
   outline-width: 0px;
@@ -199,12 +205,14 @@
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 
-:host .vega-progress-step.inProgress .vega-progress-step__icon {
+:host .vega-progress-step.inProgress .vega-progress-step__icon,
+:host .vega-progress-step.current .vega-progress-step__icon {
   background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
   box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
 }
-:host .vega-progress-step.inProgress .vega-progress-step__title {
+:host .vega-progress-step.inProgress .vega-progress-step__title,
+:host .vega-progress-step.current .vega-progress-step__title {
   font-family: "Inter", sans-serif;
   font-size: 16px;
   font-weight: 700;
@@ -213,7 +221,8 @@
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  :host .vega-progress-step.inProgress .vega-progress-step__title {
+  :host .vega-progress-step.inProgress .vega-progress-step__title,
+  :host .vega-progress-step.current .vega-progress-step__title {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
@@ -222,7 +231,8 @@
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  :host .vega-progress-step.inProgress .vega-progress-step__title {
+  :host .vega-progress-step.inProgress .vega-progress-step__title,
+  :host .vega-progress-step.current .vega-progress-step__title {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
@@ -231,7 +241,8 @@
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  :host .vega-progress-step.inProgress .vega-progress-step__title {
+  :host .vega-progress-step.inProgress .vega-progress-step__title,
+  :host .vega-progress-step.current .vega-progress-step__title {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.js

@@ -71,12 +71,12 @@ export class VegaProgressTracker {
      */
     this.canClickStep = true;
     this.getStepState = (index) => {
-      if (index === this.current) {
-        return ProgressStepStatus.IN_PROGRESS;
-      }
-      else if (this.deprecatedPropertySlimmer.getValue().includes(this.steps[index])) {
+      if (this.deprecatedPropertySlimmer.getValue().includes(this.steps[index])) {
         return ProgressStepStatus.COMPLETE;
       }
+      else if (index === this.current) {
+        return ProgressStepStatus.IN_PROGRESS;
+      }
       else {
         return ProgressStepStatus.DEFAULT;
       }
@@ -94,7 +94,7 @@ export class VegaProgressTracker {
       const prevStepCompleteStatus = this.deprecatedPropertySlimmer
         .getValue()
         .includes(this.steps[index - 1]);
-      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${progressStepStatus}`, "data-index": index, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": subTitle },
+      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${progressStepStatus} ${index === this.current ? 'current' : ''}`, "data-index": index, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": subTitle },
         h("div", { class: "vega-progress-step-icon-divider" },
           h("div", { class: `vega-progress-step__divider left ${prevStepCompleteStatus ? 'background' : ''}` }),
           this.renderStepIcon(index, progressStepStatus),

package/dist/collection/components/vega-signature-capture/assets/icons.js

@@ -0,0 +1,5 @@
+export 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>`,
+  },
+};

package/dist/collection/components/vega-signature-capture/slimmers/renderers/vega-signature-capture-renderer.js

@@ -0,0 +1,19 @@
+var __decorate = (this && this.__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;
+};
+import { h, Host } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+export class VegaSignatureCaptureRenderer extends VegaSlimmer {
+  render() {
+    return h(Host, null, this.mode === 'written' && this.writtenModeRenderer.render());
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSignatureCaptureRenderer.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSignatureCaptureRenderer.prototype, "writtenModeRenderer", void 0);

package/dist/collection/components/vega-signature-capture/slimmers/written-mode/controllers/written-mode-svg-controller.js

@@ -0,0 +1,220 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import ChangeManager from '../../../../../helpers/change-manager/changeManager';
+import { deepEqual } from '../../../../../utils/object';
+/**
+ * Signature written mode controller
+ */
+export 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([
+  MapToComponentField()
+], WrittenModeSvgController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeSvgController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], WrittenModeSvgController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], WrittenModeSvgController.prototype, "isDrawing", void 0);
+__decorate([
+  MapToComponentField()
+], WrittenModeSvgController.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], WrittenModeSvgController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('clear')
+], WrittenModeSvgController.prototype, "handleClear", null);
+__decorate([
+  MapToComponentMethod('watchValue')
+], WrittenModeSvgController.prototype, "watchValue", null);