@hmcts/opal-frontend-common 0.0.110 → 0.0.111

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-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.111",
   "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-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.