@hmcts/opal-frontend-common 0.0.110 → 0.0.112

package/fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-skip-link.mjs

@@ -0,0 +1,61 @@
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Input, inject } from "@angular/core";
+import { UtilsService } from "@hmcts/opal-frontend-common/services/utils-service";
+var GovukSkipLinkComponent = class GovukSkipLinkComponent {
+	document = inject(DOCUMENT);
+	utilsService = inject(UtilsService);
+	targetId = "main-content";
+	linkText = "Skip to main content";
+	get href() {
+		return `${this.document.location?.pathname ?? ""}#${this.targetId}`;
+	}
+	onSkipLink(event) {
+		event.preventDefault();
+		this.utilsService.focusElementById(this.targetId);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "21.2.25",
+		ngImport: i0,
+		type: GovukSkipLinkComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "21.2.25",
+		type: GovukSkipLinkComponent,
+		isStandalone: true,
+		selector: "opal-lib-govuk-skip-link",
+		inputs: {
+			targetId: "targetId",
+			linkText: "linkText"
+		},
+		ngImport: i0,
+		template: "<a class=\"govuk-skip-link\" [href]=\"href\" data-module=\"govuk-skip-link\" (click)=\"onSkipLink($event)\">{{ linkText }}</a>\n",
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "21.2.25",
+	ngImport: i0,
+	type: GovukSkipLinkComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "opal-lib-govuk-skip-link",
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<a class=\"govuk-skip-link\" [href]=\"href\" data-module=\"govuk-skip-link\" (click)=\"onSkipLink($event)\">{{ linkText }}</a>\n"
+		}]
+	}],
+	propDecorators: {
+		targetId: [{ type: Input }],
+		linkText: [{ type: Input }]
+	}
+});
+export { GovukSkipLinkComponent };
+
+//# sourceMappingURL=hmcts-opal-frontend-common-components-govuk-govuk-skip-link.mjs.map

package/fesm2022/hmcts-opal-frontend-common-components-moj-moj-sortable-table.mjs

@@ -331,7 +331,7 @@ var MojSortableTableComponent = class MojSortableTableComponent {
 		selector: "opal-lib-moj-sortable-table",
 		inputs: { tableClasses: "tableClasses" },
 		ngImport: i0,
-		template: "<table class=\"govuk-table {{ tableClasses }}\" data-module=\"moj-sortable-table\">\n  <caption class=\"govuk-table__caption\">\n    <ng-content select=\"[caption]\"></ng-content>\n  </caption>\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <ng-content select=\"[row]\"></ng-content>\n    <ng-content select=\"[results]\"></ng-content>\n  </tbody>\n</table>\n<ng-content select=\"[status]\"></ng-content>\n",
+		template: "<table class=\"govuk-table {{ tableClasses }}\" data-module=\"moj-sortable-table\">\n  <caption class=\"govuk-table__caption\">\n    <ng-content select=\"[caption]\">\n      <span class=\"govuk-visually-hidden\">Column headers with buttons are sortable</span>\n    </ng-content>\n  </caption>\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <ng-content select=\"[row]\"></ng-content>\n    <ng-content select=\"[results]\"></ng-content>\n  </tbody>\n</table>\n<ng-content select=\"[status]\"></ng-content>\n",
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -345,7 +345,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "opal-lib-moj-sortable-table",
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<table class=\"govuk-table {{ tableClasses }}\" data-module=\"moj-sortable-table\">\n  <caption class=\"govuk-table__caption\">\n    <ng-content select=\"[caption]\"></ng-content>\n  </caption>\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <ng-content select=\"[row]\"></ng-content>\n    <ng-content select=\"[results]\"></ng-content>\n  </tbody>\n</table>\n<ng-content select=\"[status]\"></ng-content>\n"
+			template: "<table class=\"govuk-table {{ tableClasses }}\" data-module=\"moj-sortable-table\">\n  <caption class=\"govuk-table__caption\">\n    <ng-content select=\"[caption]\">\n      <span class=\"govuk-visually-hidden\">Column headers with buttons are sortable</span>\n    </ng-content>\n  </caption>\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <ng-content select=\"[head]\"></ng-content>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n    <ng-content select=\"[row]\"></ng-content>\n    <ng-content select=\"[results]\"></ng-content>\n  </tbody>\n</table>\n<ng-content select=\"[status]\"></ng-content>\n"
 		}]
 	}],
 	propDecorators: { tableClasses: [{

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/fesm2022/hmcts-opal-frontend-common-services-utils-service.mjs

@@ -30,15 +30,17 @@ var UtilsService = class UtilsService {
 	scrollToTop() {
 		this.viewportScroller.scrollToPosition([0, 0]);
 	}
-	focusAndScrollToTop() {
-		const mainContent = this.document.getElementById("main-content");
-		if (mainContent) {
-			if (!mainContent.hasAttribute("tabindex")) {
-				mainContent.setAttribute("tabindex", "-1");
-				mainContent.addEventListener("blur", () => mainContent.removeAttribute("tabindex"), { once: true });
-			}
-			mainContent.focus({ preventScroll: true });
+	focusElementById(elementId, options) {
+		const element = this.document.getElementById(elementId);
+		if (!element) return;
+		if (!element.hasAttribute("tabindex")) {
+			element.setAttribute("tabindex", "-1");
+			element.addEventListener("blur", () => element.removeAttribute("tabindex"), { once: true });
 		}
+		element.focus(options);
+	}
+	focusAndScrollToTop() {
+		this.focusElementById("main-content", { preventScroll: true });
 		this.scrollToTop();
 	}
 	checkFormValues(form) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/opal-frontend-common",
-  "version": "0.0.110",
+  "version": "0.0.112",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -416,6 +416,11 @@
       "types": "./types/hmcts-opal-frontend-common-components-govuk-govuk-select-interfaces.d.ts",
       "default": "./fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-select-interfaces.mjs"
     },
+    "./components/govuk/govuk-skip-link": {
+      "import": "./fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-skip-link.mjs",
+      "types": "./types/hmcts-opal-frontend-common-components-govuk-govuk-skip-link.d.ts",
+      "default": "./fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-skip-link.mjs"
+    },
     "./components/govuk/govuk-summary-card-list": {
       "import": "./fesm2022/hmcts-opal-frontend-common-components-govuk-govuk-summary-card-list.mjs",
       "types": "./types/hmcts-opal-frontend-common-components-govuk-govuk-summary-card-list.d.ts",

package/types/hmcts-opal-frontend-common-components-govuk-govuk-skip-link.d.ts

@@ -0,0 +1,20 @@
+import * as i0 from "@angular/core";
+export declare class GovukSkipLinkComponent {
+  private readonly document;
+  private readonly utilsService;
+  targetId: string;
+  linkText: string;
+  get href(): string;
+  onSkipLink(event: Event): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<GovukSkipLinkComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<GovukSkipLinkComponent, "opal-lib-govuk-skip-link", never, {
+    "targetId": {
+      "alias": "targetId";
+      "required": false;
+    };
+    "linkText": {
+      "alias": "linkText";
+      "required": false;
+    };
+  }, {}, never, never, true, never>;
+}

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>;

package/types/hmcts-opal-frontend-common-services-utils-service.d.ts

@@ -39,6 +39,14 @@ export declare class UtilsService {
    * Utilizes the `viewportScroller` service to scroll to the position [0, 0].
    */
   scrollToTop(): void;
+  /**
+   * Moves focus to an element by ID.
+   * A temporary tabindex allows a normally non-focusable element to receive programmatic focus.
+   *
+   * @param elementId - The ID of the element to focus.
+   * @param options - Options passed to the element's focus method.
+   */
+  focusElementById(elementId: string, options?: FocusOptions): void;
   /**
    * Moves focus to the main content landmark and scrolls the viewport to the top of the page.
    * A temporary tabindex allows the normally non-focusable landmark to receive programmatic focus.