@hmcts/opal-frontend-common 0.0.111 → 0.0.112

package/fesm2022/hmcts-opal-frontend-common-directives-capitalisation.mjs

@@ -1,3 +1,4 @@
+import { DOCUMENT } from "@angular/common";
 import * as i0 from "@angular/core";
 import { Directive, Input, inject } from "@angular/core";
 import { Subject, takeUntil } from "rxjs";
@@ -5,15 +6,34 @@ import { UtilsService } from "@hmcts/opal-frontend-common/services/utils-service
 var CapitalisationDirective = class CapitalisationDirective {
 	destroy$ = new Subject();
 	utilsService = inject(UtilsService);
+	document = inject(DOCUMENT);
 	control;
+	captureSelection(value) {
+		const activeElement = this.document.activeElement;
+		if (activeElement?.tagName !== "INPUT" && activeElement?.tagName !== "TEXTAREA") return null;
+		const input = activeElement;
+		const { selectionStart, selectionEnd, selectionDirection } = input;
+		if (input.value !== value || typeof selectionStart !== "number" || typeof selectionEnd !== "number") return null;
+		return {
+			input,
+			start: this.utilsService.upperCaseAllLetters(value.slice(0, selectionStart)).length,
+			end: this.utilsService.upperCaseAllLetters(value.slice(0, selectionEnd)).length,
+			direction: selectionDirection ?? "none"
+		};
+	}
+	capitaliseControlValue(value) {
+		if (typeof value === "string" && value.length > 0) {
+			const upper = this.utilsService.upperCaseAllLetters(value);
+			if (value !== upper) {
+				const selection = this.captureSelection(value);
+				this.control.setValue(upper, { emitEvent: false });
+				if (selection?.input === this.document.activeElement && selection.input.value === upper) selection.input.setSelectionRange(selection.start, selection.end, selection.direction);
+			}
+		}
+	}
 	ngOnInit() {
 		if (!this.control) return;
-		this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => {
-			if (typeof value === "string" && value.length > 0) {
-				const upper = this.utilsService.upperCaseAllLetters(value);
-				if (value !== upper) this.control.setValue(upper, { emitEvent: false });
-			}
-		});
+		this.control.valueChanges.pipe(takeUntil(this.destroy$)).subscribe((value) => this.capitaliseControlValue(value));
 	}
 	ngOnDestroy() {
 		this.destroy$.next();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/opal-frontend-common",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "license": "MIT",
   "repository": {
     "type": "git",

package/types/hmcts-opal-frontend-common-directives-capitalisation.d.ts

@@ -4,7 +4,23 @@ import { AbstractControl } from "@angular/forms";
 export declare class CapitalisationDirective implements OnInit, OnDestroy {
   private readonly destroy$;
   private readonly utilsService;
+  private readonly document;
   control: AbstractControl;
+  /**
+   * Captures the focused input or textarea selection before its value is uppercased.
+   * Maps offsets through uppercase prefixes to account for expanding characters, such as ß becoming SS.
+   * Defaults missing selection direction to 'none' for document implementations with incomplete selection support.
+   *
+   * @param value The current control value, which must match the focused input's value.
+   * @returns The input and its mapped selection, or null when the value differs or selection is unsupported.
+   */
+  private captureSelection;
+  /**
+   * Uppercases a changed control value while preserving the focused input's selection.
+   *
+   * @param value The latest value emitted by the form control.
+   */
+  private capitaliseControlValue;
   ngOnInit(): void;
   ngOnDestroy(): void;
   static ɵfac: i0.ɵɵFactoryDeclaration<CapitalisationDirective, never>;