carriera-intern 1.1.130 → 1.1.131

package/fesm2022/carriera-intern.mjs

@@ -12135,8 +12135,12 @@ const PREVIEW_HEIGHT = 81;
 const EXPORT_SCALE = 2;
 const EXPORT_WIDTH = PREVIEW_WIDTH * EXPORT_SCALE;
 const EXPORT_HEIGHT = PREVIEW_HEIGHT * EXPORT_SCALE;
-const PHONE_VIEWPORT_QUERY = '(max-width: 767px), (max-height: 500px)';
+const DEFAULT_MOBILE_BREAKPOINT = 575;
+const PHONE_VIEWPORT_MAX_HEIGHT = 500;
 const FULLSCREEN_EDGE_GAP = 20;
+function phoneViewportQuery(maxWidthPx) {
+    return `(max-width: ${maxWidthPx}px), (max-height: ${PHONE_VIEWPORT_MAX_HEIGHT}px)`;
+}
 const INK_STROKE_STYLE = {
     strokeStyle: '#000000',
     fillStyle: '#000000',
@@ -12233,12 +12237,13 @@ function toPadPoint(event, canvas, padSize) {
 }
 
 // constants
-function needsFullscreenPad() {
+function needsFullscreenPad(maxWidthPx) {
     if (typeof window === 'undefined') {
         return false;
     }
     const shortSide = Math.min(window.innerWidth, window.innerHeight);
-    return shortSide <= 500 || window.matchMedia(PHONE_VIEWPORT_QUERY).matches;
+    return (shortSide <= PHONE_VIEWPORT_MAX_HEIGHT ||
+        window.matchMedia(phoneViewportQuery(maxWidthPx)).matches);
 }
 function buildFullscreenStage(vw, vh) {
     const margin = FULLSCREEN_EDGE_GAP * 2;
@@ -12263,7 +12268,7 @@ function cloneStrokes(strokes) {
     return strokes.map((stroke) => stroke.map((point) => ({ ...point })));
 }
 
-function createSignatureVm(savedSignature) {
+function createSignatureVm(useSavedSignature) {
     const isPadOpen = signal(false, ...(ngDevMode ? [{ debugName: "isPadOpen" }] : []));
     const previewSrc = signal(null, ...(ngDevMode ? [{ debugName: "previewSrc" }] : []));
     const locksFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "locksFullscreen" }] : []));
@@ -12272,7 +12277,7 @@ function createSignatureVm(savedSignature) {
     const isStrokeInProgress = signal(false, ...(ngDevMode ? [{ debugName: "isStrokeInProgress" }] : []));
     const padSize = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "padSize" }] : []));
     const hasInk = computed(() => !!completedStrokes().length || isStrokeInProgress(), ...(ngDevMode ? [{ debugName: "hasInk" }] : []));
-    const hasExistingSignature = computed(() => !!(savedSignature() || previewSrc()), ...(ngDevMode ? [{ debugName: "hasExistingSignature" }] : []));
+    const hasExistingSignature = computed(() => !!useSavedSignature(), ...(ngDevMode ? [{ debugName: "hasExistingSignature" }] : []));
     const showsPreview = computed(() => !!previewSrc() && !isPadOpen(), ...(ngDevMode ? [{ debugName: "showsPreview" }] : []));
     const isFullscreenOpen = computed(() => isPadOpen() && locksFullscreen(), ...(ngDevMode ? [{ debugName: "isFullscreenOpen" }] : []));
     return {
@@ -12298,15 +12303,19 @@ class SignatureComponent {
     padSizeRef = viewChild('padSize', ...(ngDevMode ? [{ debugName: "padSizeRef" }] : []));
     // inputs
     savedSignature = input(null, ...(ngDevMode ? [{ debugName: "savedSignature" }] : []));
+    useSavedSignature = input(null, ...(ngDevMode ? [{ debugName: "useSavedSignature" }] : []));
     requiredInvalid = input(false, ...(ngDevMode ? [{ debugName: "requiredInvalid" }] : []));
+    isDisabled = input(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    mobileBreakpoint = input(DEFAULT_MOBILE_BREAKPOINT, ...(ngDevMode ? [{ debugName: "mobileBreakpoint" }] : []));
     // outputs
     signatureChange = output();
     // constants
     previewWidth = PREVIEW_WIDTH;
     previewHeight = PREVIEW_HEIGHT;
     // view models
-    viewModel = createSignatureVm(this.savedSignature);
+    viewModel = createSignatureVm(this.useSavedSignature);
     // state
+    isMobileViewport = signal(false, ...(ngDevMode ? [{ debugName: "isMobileViewport" }] : []));
     canvasContext = null;
     confirmedInk = [];
     padSizeObserver = null;
@@ -12315,6 +12324,7 @@ class SignatureComponent {
     prevPadHeight = 0;
     constructor() {
         this.setupSavedSignatureSync();
+        this.setupMobileBreakpointWatch();
         this.setupPadSizeWatch();
         this.setupCanvasSync();
         this.setupFullscreenViewport();
@@ -12329,6 +12339,23 @@ class SignatureComponent {
             this.viewModel.previewSrc.set(saved ? toSignatureDataUrl(saved) : null);
         });
     }
+    setupMobileBreakpointWatch() {
+        effect((onCleanup) => {
+            if (typeof window === 'undefined') {
+                return;
+            }
+            const maxWidthPx = this.mobileBreakpoint();
+            const mediaQuery = window.matchMedia(`(max-width: ${maxWidthPx}px)`);
+            const syncViewport = () => {
+                this.isMobileViewport.set(mediaQuery.matches);
+            };
+            syncViewport();
+            mediaQuery.addEventListener('change', syncViewport);
+            onCleanup(() => {
+                mediaQuery.removeEventListener('change', syncViewport);
+            });
+        });
+    }
     setupPadSizeWatch() {
         effect(() => {
             this.watchPadSize(this.padSizeRef()?.nativeElement);
@@ -12469,14 +12496,20 @@ class SignatureComponent {
     }
     openPad(event) {
         event?.stopPropagation();
-        if (this.viewModel.isPadOpen()) {
+        if (this.isDisabled() || this.viewModel.isPadOpen()) {
             return;
         }
         this.viewModel.completedStrokes.set(cloneStrokes(this.confirmedInk));
         this.endStrokeInProgress();
-        this.applyPadPresentation(needsFullscreenPad());
+        this.applyPadPresentation(needsFullscreenPad(this.mobileBreakpoint()));
         this.viewModel.isPadOpen.set(true);
     }
+    onPreviewClick(event) {
+        if (!this.isMobileViewport() || this.isDisabled()) {
+            return;
+        }
+        this.openPad(event);
+    }
     cancelPad() {
         this.clearInk();
         if (this.canvasContext) {
@@ -12508,14 +12541,17 @@ class SignatureComponent {
         this.commitSignature(dataUrl);
     }
     restoreSavedSignature() {
-        const saved = this.savedSignature() || this.viewModel.previewSrc();
-        if (!saved) {
+        const saved = this.useSavedSignature();
+        if (!saved || this.isDisabled()) {
             return;
         }
         this.clearInk({ forgetConfirmed: true });
         this.commitSignature(toSignatureDataUrl(saved));
     }
     clearSignature() {
+        if (this.isDisabled()) {
+            return;
+        }
         this.clearInk({ forgetConfirmed: true });
         this.commitSignature(null);
     }
@@ -12571,7 +12607,7 @@ class SignatureComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.32", ngImport: i0, type: SignatureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: SignatureComponent, isStandalone: true, selector: "cai-signature", inputs: { savedSignature: { classPropertyName: "savedSignature", publicName: "savedSignature", isSignal: true, isRequired: false, transformFunction: null }, requiredInvalid: { classPropertyName: "requiredInvalid", publicName: "requiredInvalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signatureChange: "signatureChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.signature--has-current": "viewModel.showsPreview()", "style.--signature-preview-width.px": "previewWidth", "style.--signature-preview-height.px": "previewHeight" }, classAttribute: "signature" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "padSizeRef", first: true, predicate: ["padSize"], descendants: true, isSignal: true }], ngImport: i0, template: "@let promptTitle = requiredInvalid() ? 'Signature Required' : 'Click Here';\n@let promptBody = requiredInvalid()\n  ? 'Click Here To Sign Using Your Mouse'\n  : 'To Sign Using Your Mouse';\n@let isFullscreen = viewModel.isFullscreenOpen();\n@let isInlinePad = viewModel.isPadOpen() && !isFullscreen;\n\n@if (viewModel.showsPreview()) {\n  <div class=\"signature__preview\">\n    <div class=\"signature__preview-frame\">\n      <div class=\"signature__preview-image\">\n        <img\n          [src]=\"viewModel.previewSrc()\"\n          [width]=\"previewWidth\"\n          [height]=\"previewHeight\"\n          alt=\"\"\n          draggable=\"false\"\n        />\n      </div>\n    </div>\n    <div class=\"signature__preview-actions\">\n      <button\n        type=\"button\"\n        class=\"signature__icon-button\"\n        (click)=\"openPad()\"\n      >\n        <svg-icon name=\"cai-edit\"></svg-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"signature__icon-button\"\n        (click)=\"clearSignature()\"\n      >\n        <svg-icon name=\"cai-delete\"></svg-icon>\n      </button>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"signature__pad\"\n    [class.signature__pad--invalid]=\"\n      requiredInvalid() && !viewModel.isPadOpen()\n    \"\n  >\n    <div\n      class=\"signature__surface\"\n      [class.signature__surface--drawing]=\"isInlinePad\"\n      (click)=\"openPad($event)\"\n    >\n      @if (!isInlinePad) {\n        <div\n          class=\"signature__prompt\"\n          [class.signature__prompt--invalid]=\"requiredInvalid()\"\n        >\n          <span class=\"signature__prompt-title\">{{ promptTitle }}</span>\n          <span class=\"signature__prompt-body\">{{ promptBody }}</span>\n        </div>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"signaturePad\" />\n      }\n    </div>\n  </div>\n\n  @if (isInlinePad) {\n    <div class=\"signature__actions\">\n      <ng-container *ngTemplateOutlet=\"signatureActions\" />\n    </div>\n  }\n}\n\n@if (isFullscreen) {\n  @let stage = viewModel.fullscreenStage();\n  <div class=\"signature__overlay\" (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"signature__overlay-stage\"\n      [class.signature__overlay-stage--rotated]=\"stage?.isRotated\"\n      [style.width.px]=\"stage?.width\"\n      [style.height.px]=\"stage?.height\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div class=\"signature__overlay-panel\">\n        <div class=\"signature__overlay-pad\">\n          <div class=\"signature__surface signature__surface--drawing\">\n            <ng-container *ngTemplateOutlet=\"signaturePad\" />\n          </div>\n        </div>\n        <div class=\"signature__actions signature__actions--overlay\">\n          <ng-container *ngTemplateOutlet=\"signatureActions\" />\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<ng-template #signaturePad>\n  <div class=\"signature__surface-measure\" #padSize>\n    <canvas\n      class=\"signature__canvas\"\n      #canvas\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointermove)=\"onPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerUp($event)\"\n    ></canvas>\n  </div>\n</ng-template>\n\n<ng-template #signatureActions>\n  <div class=\"signature__actions-start\">\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--secondary-neutral\"\n      (click)=\"cancelPad()\"\n    >\n      Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--secondary-neutral\"\n      (click)=\"undoLastStroke()\"\n    >\n      Undo\n    </button>\n    @if (viewModel.hasInk()) {\n      <span class=\"signature__actions-label\">Confirmation Required</span>\n    }\n  </div>\n  <div class=\"signature__actions-end\">\n    @if (viewModel.hasExistingSignature()) {\n      <button\n        type=\"button\"\n        class=\"signature__button signature__button--secondary-positive\"\n        (click)=\"restoreSavedSignature()\"\n      >\n        Use Saved Signature\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--primary-positive\"\n      [disabled]=\"!viewModel.hasInk()\"\n      (click)=\"confirmSignature()\"\n    >\n      Confirm\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:grid;gap:8px;width:100%;max-width:628px;-webkit-user-select:none;user-select:none}:host.signature--has-current{justify-items:center}:host:hover .signature__preview-image{background-color:#eee}:host:hover .signature__preview-actions{opacity:1;pointer-events:auto}.signature__preview{display:flex;align-items:center;gap:4px;margin-left:60px}.signature__preview-frame{box-sizing:border-box;border-bottom:1px solid #dadada;padding:4px}.signature__preview-image{width:var(--signature-preview-width, 302px);height:var(--signature-preview-height, 81px);border-radius:2px;overflow:hidden;transition:background-color .2s ease-in-out}.signature__preview-image img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}.signature__preview-actions{display:flex;gap:4px;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.signature__icon-button{width:26px;height:26px;padding:4px;border:0;border-radius:2px;background-color:#eee;transition:background-color .2s ease-in-out}.signature__icon-button:hover{background-color:#424242}.signature__icon-button:hover svg-icon svg path{fill:#fff}.signature__icon-button svg-icon{display:flex}.signature__icon-button svg-icon svg{width:18px;height:18px}.signature__icon-button svg-icon svg path{fill:#919191}.signature__pad{width:100%;height:178px;box-sizing:border-box;padding:4px;background-image:linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;border-radius:2px}.signature__pad--invalid{background-image:linear-gradient(to right,#ed9292 50%,#fff 50%),linear-gradient(to right,#ed9292 50%,#fff 50%),linear-gradient(to top,#ed9292 50%,#fff 50%),linear-gradient(to top,#ed9292 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y}.signature__surface{display:flex;justify-content:center;align-items:center;width:100%;height:100%;cursor:pointer;background-color:#fff;transition:background-color .2s ease-in-out}.signature__surface:hover{background-color:#eee}.signature__surface--drawing{display:block;cursor:default;background-color:#fff;min-width:0;min-height:0}.signature__surface--drawing:hover{background-color:#fff}.signature__surface-measure{width:100%;height:100%;min-width:0;min-height:0}.signature__prompt{display:flex;flex-direction:column;align-items:center;gap:4px}.signature__prompt--invalid .signature__prompt-title{color:#df3c3c}.signature__prompt-title{font-weight:700;font-size:14px;line-height:18px;color:#424242;text-align:center;text-transform:uppercase}.signature__prompt-body{font-weight:600;font-size:11px;line-height:14px;color:#424242;text-align:center;text-transform:uppercase}.signature__canvas{display:block;width:100%;height:100%;min-width:0;min-height:0;touch-action:none;cursor:default}.signature__actions{display:flex;gap:12px;width:100%;flex-shrink:0}.signature__actions--overlay .signature__button{padding:11px 8px}.signature__actions-start,.signature__actions-end{display:flex;align-items:center;gap:6px}.signature__actions-start{flex-grow:1}.signature__actions-label{flex-grow:1;font-weight:600;font-size:11px;line-height:15px;color:#df3c3c;text-align:right}.signature__button{padding:4px 8px;border:0;border-radius:2px;min-width:80px;font-weight:700;font-size:11px;line-height:14px;text-transform:uppercase;transition:background-color .2s ease-in-out,color .2s ease-in-out}.signature__button--secondary-neutral{background-color:#eee;color:#6c6c6c}.signature__button--secondary-neutral:hover{background-color:#424242;color:#fff}.signature__button--secondary-positive{background-color:#eee;color:#3b73ed}.signature__button--secondary-positive:hover{background-color:#0b49d1;color:#fff}.signature__button--primary-positive{background-color:#3b73ed;color:#fff}.signature__button--primary-positive:hover{background-color:#0b49d1;color:#fff}.signature__button:disabled,.signature__button[disabled]{background-color:#f7f7f7;color:#ccc;pointer-events:none}.signature__overlay{position:fixed;inset:0;z-index:1000;background-color:#00000073}.signature__overlay-stage{position:absolute;top:50%;left:50%;box-sizing:border-box;transform:translate(-50%,-50%)}.signature__overlay-stage--rotated{transform:translate(-50%,-50%) rotate(90deg)}.signature__overlay-panel{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:100%;height:100%;padding:12px;background-color:#fff;border-radius:2px}.signature__overlay-pad{box-sizing:border-box;padding:4px;background-image:linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;border-radius:2px;min-width:0;min-height:0;flex:1 1 auto;width:100%}.signature__overlay-pad .signature__surface{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.32", type: SignatureComponent, isStandalone: true, selector: "cai-signature", inputs: { savedSignature: { classPropertyName: "savedSignature", publicName: "savedSignature", isSignal: true, isRequired: false, transformFunction: null }, useSavedSignature: { classPropertyName: "useSavedSignature", publicName: "useSavedSignature", isSignal: true, isRequired: false, transformFunction: null }, requiredInvalid: { classPropertyName: "requiredInvalid", publicName: "requiredInvalid", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, mobileBreakpoint: { classPropertyName: "mobileBreakpoint", publicName: "mobileBreakpoint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { signatureChange: "signatureChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, properties: { "class.signature--has-current": "viewModel.showsPreview()", "class.signature--disabled": "isDisabled()", "class.signature--mobile": "isMobileViewport()", "style.--signature-preview-width.px": "previewWidth", "style.--signature-preview-height.px": "previewHeight" }, classAttribute: "signature" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }, { propertyName: "padSizeRef", first: true, predicate: ["padSize"], descendants: true, isSignal: true }], ngImport: i0, template: "@let promptTitle = requiredInvalid() ? 'Signature Required' : 'Click Here';\n@let promptBody = requiredInvalid()\n  ? 'Click Here To Sign Using Your Mouse'\n  : 'To Sign Using Your Mouse';\n@let isFullscreen = viewModel.isFullscreenOpen();\n@let isInlinePad = viewModel.isPadOpen() && !isFullscreen;\n@let showPreviewActions = !isDisabled() && !isMobileViewport();\n\n@if (viewModel.showsPreview()) {\n  <div class=\"signature__preview\" (click)=\"onPreviewClick($event)\">\n    <div class=\"signature__preview-frame\">\n      <div class=\"signature__preview-image\">\n        <img\n          [src]=\"viewModel.previewSrc()\"\n          [width]=\"previewWidth\"\n          [height]=\"previewHeight\"\n          alt=\"\"\n          draggable=\"false\"\n        />\n      </div>\n    </div>\n    @if (showPreviewActions) {\n      <div class=\"signature__preview-actions\">\n        <button\n          type=\"button\"\n          class=\"signature__icon-button\"\n          (click)=\"openPad($event)\"\n        >\n          <svg-icon name=\"cai-edit\"></svg-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"signature__icon-button\"\n          (click)=\"clearSignature()\"\n        >\n          <svg-icon name=\"cai-delete\"></svg-icon>\n        </button>\n      </div>\n    }\n  </div>\n} @else {\n  <div\n    class=\"signature__pad\"\n    [class.signature__pad--invalid]=\"\n      requiredInvalid() && !viewModel.isPadOpen()\n    \"\n  >\n    <div\n      class=\"signature__surface\"\n      [class.signature__surface--drawing]=\"isInlinePad\"\n      (click)=\"openPad($event)\"\n    >\n      @if (!isInlinePad) {\n        <div\n          class=\"signature__prompt\"\n          [class.signature__prompt--invalid]=\"requiredInvalid()\"\n        >\n          <span class=\"signature__prompt-title\">{{ promptTitle }}</span>\n          <span class=\"signature__prompt-body\">{{ promptBody }}</span>\n        </div>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"signaturePad\" />\n      }\n    </div>\n  </div>\n\n  @if (isInlinePad) {\n    <div class=\"signature__actions\">\n      <ng-container *ngTemplateOutlet=\"signatureActions\" />\n    </div>\n  }\n}\n\n@if (isFullscreen) {\n  @let stage = viewModel.fullscreenStage();\n  <div class=\"signature__overlay\" (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"signature__overlay-stage\"\n      [class.signature__overlay-stage--rotated]=\"stage?.isRotated\"\n      [style.width.px]=\"stage?.width\"\n      [style.height.px]=\"stage?.height\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div class=\"signature__overlay-panel\">\n        <div class=\"signature__overlay-pad\">\n          <div class=\"signature__surface signature__surface--drawing\">\n            <ng-container *ngTemplateOutlet=\"signaturePad\" />\n          </div>\n        </div>\n        <div class=\"signature__actions signature__actions--overlay\">\n          <ng-container *ngTemplateOutlet=\"signatureActions\" />\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<ng-template #signaturePad>\n  <div class=\"signature__surface-measure\" #padSize>\n    <canvas\n      class=\"signature__canvas\"\n      #canvas\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointermove)=\"onPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerUp($event)\"\n    ></canvas>\n  </div>\n</ng-template>\n\n<ng-template #signatureActions>\n  <div class=\"signature__actions-start\">\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--secondary-neutral\"\n      (click)=\"cancelPad()\"\n    >\n      Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--secondary-neutral\"\n      (click)=\"undoLastStroke()\"\n    >\n      Undo\n    </button>\n    @if (viewModel.hasInk()) {\n      <span class=\"signature__actions-label\">Confirmation Required</span>\n    }\n  </div>\n  <div class=\"signature__actions-end\">\n    @if (viewModel.hasExistingSignature()) {\n      <button\n        type=\"button\"\n        class=\"signature__button signature__button--secondary-positive\"\n        (click)=\"restoreSavedSignature()\"\n      >\n        Use Saved Signature\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--primary-positive\"\n      [disabled]=\"!viewModel.hasInk()\"\n      (click)=\"confirmSignature()\"\n    >\n      Confirm\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:grid;gap:8px;width:100%;max-width:628px;-webkit-user-select:none;user-select:none}:host.signature--has-current{justify-items:center}:host.signature--disabled{opacity:.6;pointer-events:none;cursor:default}:host.signature--mobile .signature__preview{cursor:pointer;margin-left:0}:host.signature--mobile .signature__preview-actions{display:none}:host.signature--mobile .signature__preview-image{transition:background-color .2s ease-in-out}@media(hover:hover){:host:hover:not(.signature--disabled):not(.signature--mobile) .signature__preview-image{background-color:#eee}:host:hover:not(.signature--disabled):not(.signature--mobile) .signature__preview-actions{opacity:1;pointer-events:auto}:host.signature--mobile:not(.signature--disabled):hover .signature__preview-image{background-color:#eee}}.signature__preview{display:flex;align-items:center;gap:4px;margin-left:60px}.signature__preview-frame{box-sizing:border-box;border-bottom:1px solid #dadada;padding:4px}.signature__preview-image{width:var(--signature-preview-width, 302px);height:var(--signature-preview-height, 81px);border-radius:2px;overflow:hidden;transition:background-color .2s ease-in-out}.signature__preview-image img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}.signature__preview-actions{display:flex;gap:4px;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.signature__icon-button{width:26px;height:26px;padding:4px;border:0;border-radius:2px;background-color:#eee;transition:background-color .2s ease-in-out}.signature__icon-button:hover{background-color:#424242}.signature__icon-button:hover svg-icon svg path{fill:#fff}.signature__icon-button svg-icon{display:flex}.signature__icon-button svg-icon svg{width:18px;height:18px}.signature__icon-button svg-icon svg path{fill:#919191;transition:fill .2s ease-in-out}.signature__pad{width:100%;height:178px;box-sizing:border-box;padding:4px;background-image:linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;border-radius:2px}.signature__pad--invalid{background-image:linear-gradient(to right,#ed9292 50%,#fff 50%),linear-gradient(to right,#ed9292 50%,#fff 50%),linear-gradient(to top,#ed9292 50%,#fff 50%),linear-gradient(to top,#ed9292 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y}.signature__surface{display:flex;justify-content:center;align-items:center;width:100%;height:100%;cursor:pointer;background-color:#fff;transition:background-color .2s ease-in-out}.signature__surface:hover{background-color:#eee}.signature__surface--drawing{display:block;cursor:default;background-color:#fff;min-width:0;min-height:0}.signature__surface--drawing:hover{background-color:#fff}.signature__surface-measure{width:100%;height:100%;min-width:0;min-height:0}.signature__prompt{display:flex;flex-direction:column;align-items:center;gap:4px}.signature__prompt--invalid .signature__prompt-title{color:#df3c3c}.signature__prompt-title{font-weight:700;font-size:14px;line-height:18px;color:#424242;text-align:center;text-transform:uppercase}.signature__prompt-body{font-weight:600;font-size:11px;line-height:14px;color:#424242;text-align:center;text-transform:uppercase}.signature__canvas{display:block;width:100%;height:100%;min-width:0;min-height:0;touch-action:none;cursor:default}.signature__actions{display:flex;gap:12px;width:100%;flex-shrink:0}.signature__actions--overlay .signature__button{padding:11px 8px}.signature__actions-start,.signature__actions-end{display:flex;align-items:center;gap:6px}.signature__actions-start{flex-grow:1}.signature__actions-label{flex-grow:1;font-weight:600;font-size:11px;line-height:15px;color:#df3c3c;text-align:right}.signature__button{padding:4px 8px;border:0;border-radius:2px;min-width:80px;font-weight:700;font-size:11px;line-height:14px;text-transform:uppercase;transition:background-color .2s ease-in-out,color .2s ease-in-out}.signature__button--secondary-neutral{background-color:#eee;color:#6c6c6c}.signature__button--secondary-neutral:hover{background-color:#424242;color:#fff}.signature__button--secondary-positive{background-color:#eee;color:#3b73ed}.signature__button--secondary-positive:hover{background-color:#0b49d1;color:#fff}.signature__button--primary-positive{background-color:#3b73ed;color:#fff}.signature__button--primary-positive:hover{background-color:#0b49d1;color:#fff}.signature__button:disabled,.signature__button[disabled]{background-color:#f7f7f7;color:#ccc;pointer-events:none}.signature__overlay{position:fixed;inset:0;z-index:1000;background-color:#00000073}.signature__overlay-stage{position:absolute;top:50%;left:50%;box-sizing:border-box;transform:translate(-50%,-50%)}.signature__overlay-stage--rotated{transform:translate(-50%,-50%) rotate(90deg)}.signature__overlay-panel{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:100%;height:100%;padding:12px;background-color:#fff;border-radius:2px}.signature__overlay-pad{box-sizing:border-box;padding:4px;background-image:linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;border-radius:2px;min-width:0;min-height:0;flex:1 1 auto;width:100%}.signature__overlay-pad .signature__surface{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 
                 // components
                 SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -12580,6 +12616,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
             args: [{ selector: 'cai-signature', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'signature',
                         '[class.signature--has-current]': 'viewModel.showsPreview()',
+                        '[class.signature--disabled]': 'isDisabled()',
+                        '[class.signature--mobile]': 'isMobileViewport()',
                         '[style.--signature-preview-width.px]': 'previewWidth',
                         '[style.--signature-preview-height.px]': 'previewHeight',
                         '(document:keydown.escape)': 'onEscape()',
@@ -12587,8 +12625,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                         NgTemplateOutlet,
                         // components
                         SvgIconComponent,
-                    ], template: "@let promptTitle = requiredInvalid() ? 'Signature Required' : 'Click Here';\n@let promptBody = requiredInvalid()\n  ? 'Click Here To Sign Using Your Mouse'\n  : 'To Sign Using Your Mouse';\n@let isFullscreen = viewModel.isFullscreenOpen();\n@let isInlinePad = viewModel.isPadOpen() && !isFullscreen;\n\n@if (viewModel.showsPreview()) {\n  <div class=\"signature__preview\">\n    <div class=\"signature__preview-frame\">\n      <div class=\"signature__preview-image\">\n        <img\n          [src]=\"viewModel.previewSrc()\"\n          [width]=\"previewWidth\"\n          [height]=\"previewHeight\"\n          alt=\"\"\n          draggable=\"false\"\n        />\n      </div>\n    </div>\n    <div class=\"signature__preview-actions\">\n      <button\n        type=\"button\"\n        class=\"signature__icon-button\"\n        (click)=\"openPad()\"\n      >\n        <svg-icon name=\"cai-edit\"></svg-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"signature__icon-button\"\n        (click)=\"clearSignature()\"\n      >\n        <svg-icon name=\"cai-delete\"></svg-icon>\n      </button>\n    </div>\n  </div>\n} @else {\n  <div\n    class=\"signature__pad\"\n    [class.signature__pad--invalid]=\"\n      requiredInvalid() && !viewModel.isPadOpen()\n    \"\n  >\n    <div\n      class=\"signature__surface\"\n      [class.signature__surface--drawing]=\"isInlinePad\"\n      (click)=\"openPad($event)\"\n    >\n      @if (!isInlinePad) {\n        <div\n          class=\"signature__prompt\"\n          [class.signature__prompt--invalid]=\"requiredInvalid()\"\n        >\n          <span class=\"signature__prompt-title\">{{ promptTitle }}</span>\n          <span class=\"signature__prompt-body\">{{ promptBody }}</span>\n        </div>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"signaturePad\" />\n      }\n    </div>\n  </div>\n\n  @if (isInlinePad) {\n    <div class=\"signature__actions\">\n      <ng-container *ngTemplateOutlet=\"signatureActions\" />\n    </div>\n  }\n}\n\n@if (isFullscreen) {\n  @let stage = viewModel.fullscreenStage();\n  <div class=\"signature__overlay\" (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"signature__overlay-stage\"\n      [class.signature__overlay-stage--rotated]=\"stage?.isRotated\"\n      [style.width.px]=\"stage?.width\"\n      [style.height.px]=\"stage?.height\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div class=\"signature__overlay-panel\">\n        <div class=\"signature__overlay-pad\">\n          <div class=\"signature__surface signature__surface--drawing\">\n            <ng-container *ngTemplateOutlet=\"signaturePad\" />\n          </div>\n        </div>\n        <div class=\"signature__actions signature__actions--overlay\">\n          <ng-container *ngTemplateOutlet=\"signatureActions\" />\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<ng-template #signaturePad>\n  <div class=\"signature__surface-measure\" #padSize>\n    <canvas\n      class=\"signature__canvas\"\n      #canvas\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointermove)=\"onPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerUp($event)\"\n    ></canvas>\n  </div>\n</ng-template>\n\n<ng-template #signatureActions>\n  <div class=\"signature__actions-start\">\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--secondary-neutral\"\n      (click)=\"cancelPad()\"\n    >\n      Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--secondary-neutral\"\n      (click)=\"undoLastStroke()\"\n    >\n      Undo\n    </button>\n    @if (viewModel.hasInk()) {\n      <span class=\"signature__actions-label\">Confirmation Required</span>\n    }\n  </div>\n  <div class=\"signature__actions-end\">\n    @if (viewModel.hasExistingSignature()) {\n      <button\n        type=\"button\"\n        class=\"signature__button signature__button--secondary-positive\"\n        (click)=\"restoreSavedSignature()\"\n      >\n        Use Saved Signature\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--primary-positive\"\n      [disabled]=\"!viewModel.hasInk()\"\n      (click)=\"confirmSignature()\"\n    >\n      Confirm\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:grid;gap:8px;width:100%;max-width:628px;-webkit-user-select:none;user-select:none}:host.signature--has-current{justify-items:center}:host:hover .signature__preview-image{background-color:#eee}:host:hover .signature__preview-actions{opacity:1;pointer-events:auto}.signature__preview{display:flex;align-items:center;gap:4px;margin-left:60px}.signature__preview-frame{box-sizing:border-box;border-bottom:1px solid #dadada;padding:4px}.signature__preview-image{width:var(--signature-preview-width, 302px);height:var(--signature-preview-height, 81px);border-radius:2px;overflow:hidden;transition:background-color .2s ease-in-out}.signature__preview-image img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}.signature__preview-actions{display:flex;gap:4px;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.signature__icon-button{width:26px;height:26px;padding:4px;border:0;border-radius:2px;background-color:#eee;transition:background-color .2s ease-in-out}.signature__icon-button:hover{background-color:#424242}.signature__icon-button:hover svg-icon svg path{fill:#fff}.signature__icon-button svg-icon{display:flex}.signature__icon-button svg-icon svg{width:18px;height:18px}.signature__icon-button svg-icon svg path{fill:#919191}.signature__pad{width:100%;height:178px;box-sizing:border-box;padding:4px;background-image:linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;border-radius:2px}.signature__pad--invalid{background-image:linear-gradient(to right,#ed9292 50%,#fff 50%),linear-gradient(to right,#ed9292 50%,#fff 50%),linear-gradient(to top,#ed9292 50%,#fff 50%),linear-gradient(to top,#ed9292 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y}.signature__surface{display:flex;justify-content:center;align-items:center;width:100%;height:100%;cursor:pointer;background-color:#fff;transition:background-color .2s ease-in-out}.signature__surface:hover{background-color:#eee}.signature__surface--drawing{display:block;cursor:default;background-color:#fff;min-width:0;min-height:0}.signature__surface--drawing:hover{background-color:#fff}.signature__surface-measure{width:100%;height:100%;min-width:0;min-height:0}.signature__prompt{display:flex;flex-direction:column;align-items:center;gap:4px}.signature__prompt--invalid .signature__prompt-title{color:#df3c3c}.signature__prompt-title{font-weight:700;font-size:14px;line-height:18px;color:#424242;text-align:center;text-transform:uppercase}.signature__prompt-body{font-weight:600;font-size:11px;line-height:14px;color:#424242;text-align:center;text-transform:uppercase}.signature__canvas{display:block;width:100%;height:100%;min-width:0;min-height:0;touch-action:none;cursor:default}.signature__actions{display:flex;gap:12px;width:100%;flex-shrink:0}.signature__actions--overlay .signature__button{padding:11px 8px}.signature__actions-start,.signature__actions-end{display:flex;align-items:center;gap:6px}.signature__actions-start{flex-grow:1}.signature__actions-label{flex-grow:1;font-weight:600;font-size:11px;line-height:15px;color:#df3c3c;text-align:right}.signature__button{padding:4px 8px;border:0;border-radius:2px;min-width:80px;font-weight:700;font-size:11px;line-height:14px;text-transform:uppercase;transition:background-color .2s ease-in-out,color .2s ease-in-out}.signature__button--secondary-neutral{background-color:#eee;color:#6c6c6c}.signature__button--secondary-neutral:hover{background-color:#424242;color:#fff}.signature__button--secondary-positive{background-color:#eee;color:#3b73ed}.signature__button--secondary-positive:hover{background-color:#0b49d1;color:#fff}.signature__button--primary-positive{background-color:#3b73ed;color:#fff}.signature__button--primary-positive:hover{background-color:#0b49d1;color:#fff}.signature__button:disabled,.signature__button[disabled]{background-color:#f7f7f7;color:#ccc;pointer-events:none}.signature__overlay{position:fixed;inset:0;z-index:1000;background-color:#00000073}.signature__overlay-stage{position:absolute;top:50%;left:50%;box-sizing:border-box;transform:translate(-50%,-50%)}.signature__overlay-stage--rotated{transform:translate(-50%,-50%) rotate(90deg)}.signature__overlay-panel{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:100%;height:100%;padding:12px;background-color:#fff;border-radius:2px}.signature__overlay-pad{box-sizing:border-box;padding:4px;background-image:linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;border-radius:2px;min-width:0;min-height:0;flex:1 1 auto;width:100%}.signature__overlay-pad .signature__surface{width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], padSizeRef: [{ type: i0.ViewChild, args: ['padSize', { isSignal: true }] }], savedSignature: [{ type: i0.Input, args: [{ isSignal: true, alias: "savedSignature", required: false }] }], requiredInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredInvalid", required: false }] }], signatureChange: [{ type: i0.Output, args: ["signatureChange"] }] } });
+                    ], template: "@let promptTitle = requiredInvalid() ? 'Signature Required' : 'Click Here';\n@let promptBody = requiredInvalid()\n  ? 'Click Here To Sign Using Your Mouse'\n  : 'To Sign Using Your Mouse';\n@let isFullscreen = viewModel.isFullscreenOpen();\n@let isInlinePad = viewModel.isPadOpen() && !isFullscreen;\n@let showPreviewActions = !isDisabled() && !isMobileViewport();\n\n@if (viewModel.showsPreview()) {\n  <div class=\"signature__preview\" (click)=\"onPreviewClick($event)\">\n    <div class=\"signature__preview-frame\">\n      <div class=\"signature__preview-image\">\n        <img\n          [src]=\"viewModel.previewSrc()\"\n          [width]=\"previewWidth\"\n          [height]=\"previewHeight\"\n          alt=\"\"\n          draggable=\"false\"\n        />\n      </div>\n    </div>\n    @if (showPreviewActions) {\n      <div class=\"signature__preview-actions\">\n        <button\n          type=\"button\"\n          class=\"signature__icon-button\"\n          (click)=\"openPad($event)\"\n        >\n          <svg-icon name=\"cai-edit\"></svg-icon>\n        </button>\n        <button\n          type=\"button\"\n          class=\"signature__icon-button\"\n          (click)=\"clearSignature()\"\n        >\n          <svg-icon name=\"cai-delete\"></svg-icon>\n        </button>\n      </div>\n    }\n  </div>\n} @else {\n  <div\n    class=\"signature__pad\"\n    [class.signature__pad--invalid]=\"\n      requiredInvalid() && !viewModel.isPadOpen()\n    \"\n  >\n    <div\n      class=\"signature__surface\"\n      [class.signature__surface--drawing]=\"isInlinePad\"\n      (click)=\"openPad($event)\"\n    >\n      @if (!isInlinePad) {\n        <div\n          class=\"signature__prompt\"\n          [class.signature__prompt--invalid]=\"requiredInvalid()\"\n        >\n          <span class=\"signature__prompt-title\">{{ promptTitle }}</span>\n          <span class=\"signature__prompt-body\">{{ promptBody }}</span>\n        </div>\n      } @else {\n        <ng-container *ngTemplateOutlet=\"signaturePad\" />\n      }\n    </div>\n  </div>\n\n  @if (isInlinePad) {\n    <div class=\"signature__actions\">\n      <ng-container *ngTemplateOutlet=\"signatureActions\" />\n    </div>\n  }\n}\n\n@if (isFullscreen) {\n  @let stage = viewModel.fullscreenStage();\n  <div class=\"signature__overlay\" (click)=\"onBackdropClick($event)\">\n    <div\n      class=\"signature__overlay-stage\"\n      [class.signature__overlay-stage--rotated]=\"stage?.isRotated\"\n      [style.width.px]=\"stage?.width\"\n      [style.height.px]=\"stage?.height\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <div class=\"signature__overlay-panel\">\n        <div class=\"signature__overlay-pad\">\n          <div class=\"signature__surface signature__surface--drawing\">\n            <ng-container *ngTemplateOutlet=\"signaturePad\" />\n          </div>\n        </div>\n        <div class=\"signature__actions signature__actions--overlay\">\n          <ng-container *ngTemplateOutlet=\"signatureActions\" />\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<ng-template #signaturePad>\n  <div class=\"signature__surface-measure\" #padSize>\n    <canvas\n      class=\"signature__canvas\"\n      #canvas\n      (pointerdown)=\"onPointerDown($event)\"\n      (pointermove)=\"onPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerUp($event)\"\n    ></canvas>\n  </div>\n</ng-template>\n\n<ng-template #signatureActions>\n  <div class=\"signature__actions-start\">\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--secondary-neutral\"\n      (click)=\"cancelPad()\"\n    >\n      Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--secondary-neutral\"\n      (click)=\"undoLastStroke()\"\n    >\n      Undo\n    </button>\n    @if (viewModel.hasInk()) {\n      <span class=\"signature__actions-label\">Confirmation Required</span>\n    }\n  </div>\n  <div class=\"signature__actions-end\">\n    @if (viewModel.hasExistingSignature()) {\n      <button\n        type=\"button\"\n        class=\"signature__button signature__button--secondary-positive\"\n        (click)=\"restoreSavedSignature()\"\n      >\n        Use Saved Signature\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"signature__button signature__button--primary-positive\"\n      [disabled]=\"!viewModel.hasInk()\"\n      (click)=\"confirmSignature()\"\n    >\n      Confirm\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:grid;gap:8px;width:100%;max-width:628px;-webkit-user-select:none;user-select:none}:host.signature--has-current{justify-items:center}:host.signature--disabled{opacity:.6;pointer-events:none;cursor:default}:host.signature--mobile .signature__preview{cursor:pointer;margin-left:0}:host.signature--mobile .signature__preview-actions{display:none}:host.signature--mobile .signature__preview-image{transition:background-color .2s ease-in-out}@media(hover:hover){:host:hover:not(.signature--disabled):not(.signature--mobile) .signature__preview-image{background-color:#eee}:host:hover:not(.signature--disabled):not(.signature--mobile) .signature__preview-actions{opacity:1;pointer-events:auto}:host.signature--mobile:not(.signature--disabled):hover .signature__preview-image{background-color:#eee}}.signature__preview{display:flex;align-items:center;gap:4px;margin-left:60px}.signature__preview-frame{box-sizing:border-box;border-bottom:1px solid #dadada;padding:4px}.signature__preview-image{width:var(--signature-preview-width, 302px);height:var(--signature-preview-height, 81px);border-radius:2px;overflow:hidden;transition:background-color .2s ease-in-out}.signature__preview-image img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}.signature__preview-actions{display:flex;gap:4px;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}.signature__icon-button{width:26px;height:26px;padding:4px;border:0;border-radius:2px;background-color:#eee;transition:background-color .2s ease-in-out}.signature__icon-button:hover{background-color:#424242}.signature__icon-button:hover svg-icon svg path{fill:#fff}.signature__icon-button svg-icon{display:flex}.signature__icon-button svg-icon svg{width:18px;height:18px}.signature__icon-button svg-icon svg path{fill:#919191;transition:fill .2s ease-in-out}.signature__pad{width:100%;height:178px;box-sizing:border-box;padding:4px;background-image:linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;border-radius:2px}.signature__pad--invalid{background-image:linear-gradient(to right,#ed9292 50%,#fff 50%),linear-gradient(to right,#ed9292 50%,#fff 50%),linear-gradient(to top,#ed9292 50%,#fff 50%),linear-gradient(to top,#ed9292 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y}.signature__surface{display:flex;justify-content:center;align-items:center;width:100%;height:100%;cursor:pointer;background-color:#fff;transition:background-color .2s ease-in-out}.signature__surface:hover{background-color:#eee}.signature__surface--drawing{display:block;cursor:default;background-color:#fff;min-width:0;min-height:0}.signature__surface--drawing:hover{background-color:#fff}.signature__surface-measure{width:100%;height:100%;min-width:0;min-height:0}.signature__prompt{display:flex;flex-direction:column;align-items:center;gap:4px}.signature__prompt--invalid .signature__prompt-title{color:#df3c3c}.signature__prompt-title{font-weight:700;font-size:14px;line-height:18px;color:#424242;text-align:center;text-transform:uppercase}.signature__prompt-body{font-weight:600;font-size:11px;line-height:14px;color:#424242;text-align:center;text-transform:uppercase}.signature__canvas{display:block;width:100%;height:100%;min-width:0;min-height:0;touch-action:none;cursor:default}.signature__actions{display:flex;gap:12px;width:100%;flex-shrink:0}.signature__actions--overlay .signature__button{padding:11px 8px}.signature__actions-start,.signature__actions-end{display:flex;align-items:center;gap:6px}.signature__actions-start{flex-grow:1}.signature__actions-label{flex-grow:1;font-weight:600;font-size:11px;line-height:15px;color:#df3c3c;text-align:right}.signature__button{padding:4px 8px;border:0;border-radius:2px;min-width:80px;font-weight:700;font-size:11px;line-height:14px;text-transform:uppercase;transition:background-color .2s ease-in-out,color .2s ease-in-out}.signature__button--secondary-neutral{background-color:#eee;color:#6c6c6c}.signature__button--secondary-neutral:hover{background-color:#424242;color:#fff}.signature__button--secondary-positive{background-color:#eee;color:#3b73ed}.signature__button--secondary-positive:hover{background-color:#0b49d1;color:#fff}.signature__button--primary-positive{background-color:#3b73ed;color:#fff}.signature__button--primary-positive:hover{background-color:#0b49d1;color:#fff}.signature__button:disabled,.signature__button[disabled]{background-color:#f7f7f7;color:#ccc;pointer-events:none}.signature__overlay{position:fixed;inset:0;z-index:1000;background-color:#00000073}.signature__overlay-stage{position:absolute;top:50%;left:50%;box-sizing:border-box;transform:translate(-50%,-50%)}.signature__overlay-stage--rotated{transform:translate(-50%,-50%) rotate(90deg)}.signature__overlay-panel{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;width:100%;height:100%;padding:12px;background-color:#fff;border-radius:2px}.signature__overlay-pad{box-sizing:border-box;padding:4px;background-image:linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to right,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%),linear-gradient(to top,#eee 50%,#fff 50%);background-size:16px 4px,16px 4px,4px 17px,4px 17px;background-position:left bottom,left top,left bottom,right bottom;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;border-radius:2px;min-width:0;min-height:0;flex:1 1 auto;width:100%}.signature__overlay-pad .signature__surface{width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], padSizeRef: [{ type: i0.ViewChild, args: ['padSize', { isSignal: true }] }], savedSignature: [{ type: i0.Input, args: [{ isSignal: true, alias: "savedSignature", required: false }] }], useSavedSignature: [{ type: i0.Input, args: [{ isSignal: true, alias: "useSavedSignature", required: false }] }], requiredInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "requiredInvalid", required: false }] }], isDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDisabled", required: false }] }], mobileBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileBreakpoint", required: false }] }], signatureChange: [{ type: i0.Output, args: ["signatureChange"] }] } });
 
 /*
  * Public API Surface of carriera-intern