@types/govuk-frontend 5.4.1 → 5.7.0

govuk-frontend/README.md

@@ -8,7 +8,7 @@ This package contains type definitions for govuk-frontend (https://github.com/al
 Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/govuk-frontend.
 
 ### Additional Details
- * Last updated: Mon, 07 Oct 2024 17:07:30 GMT
+ * Last updated: Mon, 14 Oct 2024 16:41:00 GMT
  * Dependencies: none
 
 # Credits

govuk-frontend/dist/govuk/all.bundle.d.mts

@@ -1,4 +1,5 @@
 export { version } from "./common/govuk-frontend-version.mjs";
+export { isSupported } from "./common/index.mjs";
 export { Accordion } from "./components/accordion/accordion.mjs";
 export { Button } from "./components/button/button.mjs";
 export { CharacterCount } from "./components/character-count/character-count.mjs";
@@ -9,6 +10,8 @@ export { Header } from "./components/header/header.mjs";
 export { NotificationBanner } from "./components/notification-banner/notification-banner.mjs";
 export { PasswordInput } from "./components/password-input/password-input.mjs";
 export { Radios } from "./components/radios/radios.mjs";
+export { ServiceNavigation } from "./components/service-navigation/service-navigation.mjs";
 export { SkipLink } from "./components/skip-link/skip-link.mjs";
 export { Tabs } from "./components/tabs/tabs.mjs";
+export { GOVUKFrontendComponent as Component } from "./govuk-frontend-component.mjs";
 export { type Config, type ConfigKey, createAll, initAll } from "./init.mjs";

govuk-frontend/dist/govuk/all.bundle.d.ts

@@ -1,4 +1,5 @@
 import { version } from "./common/govuk-frontend-version.js";
+import { isSupported } from "./common/index.js";
 import { Accordion } from "./components/accordion/accordion.js";
 import { Button } from "./components/button/button.js";
 import { CharacterCount } from "./components/character-count/character-count.js";
@@ -9,8 +10,10 @@ import { Header } from "./components/header/header.js";
 import { NotificationBanner } from "./components/notification-banner/notification-banner.js";
 import { PasswordInput } from "./components/password-input/password-input.js";
 import { Radios } from "./components/radios/radios.js";
+import { ServiceNavigation } from "./components/service-navigation/service-navigation.js";
 import { SkipLink } from "./components/skip-link/skip-link.js";
 import { Tabs } from "./components/tabs/tabs.js";
+import { GOVUKFrontendComponent as Component } from "./govuk-frontend-component.js";
 import { type Config as ConfigImport, type ConfigKey as ConfigKeyImport, createAll, initAll } from "./init.js";
 
 declare namespace GOVUKFrontend {
@@ -20,6 +23,7 @@ declare namespace GOVUKFrontend {
 
 declare const GOVUKFrontend: {
     version: typeof version;
+    isSupported: typeof isSupported;
     Accordion: typeof Accordion;
     Button: typeof Button;
     CharacterCount: typeof CharacterCount;
@@ -30,8 +34,10 @@ declare const GOVUKFrontend: {
     NotificationBanner: typeof NotificationBanner;
     PasswordInput: typeof PasswordInput;
     Radios: typeof Radios;
+    ServiceNavigation: typeof ServiceNavigation;
     SkipLink: typeof SkipLink;
     Tabs: typeof Tabs;
+    Component: typeof Component;
     createAll: typeof createAll;
     initAll: typeof initAll;
 };

govuk-frontend/dist/govuk/common/index.d.ts

@@ -83,14 +83,23 @@ export function setFocus<FocusElement extends HTMLElement>(
     },
 ): void;
 
+/**
+ * Checks if component is already initialised
+ *
+ * @internal
+ * @param {Element} $root - HTML element to be checked
+ * @param {string} moduleName - name of component module
+ * @returns {boolean} Whether component is already initialised
+ */
+export function isInitialised($root: Element, moduleName: string): boolean;
+
 /**
  * Checks if GOV.UK Frontend is supported on this page
  *
  * Some browsers will load and run our JavaScript but GOV.UK Frontend
  * won't be supported.
  *
- * @internal
- * @param {HTMLElement | null} [$scope] - HTML element `<body>` checked for browser support
+ * @param {HTMLElement | null} [$scope] - (internal) `<body>` HTML element checked for browser support
  * @returns {boolean} Whether GOV.UK Frontend is supported on this page
  */
 export function isSupported($scope?: HTMLElement | null): boolean;
@@ -112,6 +121,16 @@ export function validateConfig(schema: Schema, config: {
     [key: string]: unknown;
 }): string[];
 
+/**
+ * Format error message
+ *
+ * @internal
+ * @param {ComponentWithModuleName} Component - Component that threw the error
+ * @param {string} message - Error message
+ * @returns {string} - Formatted error message
+ */
+export function formatErrorMessage(Component: ComponentWithModuleName, message: string): string;
+
 /**
  * Schema for component config
  */
@@ -153,7 +172,16 @@ export interface SchemaCondition {
      */
     errorMessage: string;
 }
+
 export type NestedKey = keyof ObjectNested;
+
 export interface ObjectNested {
     [key: string]: string | boolean | number | ObjectNested | undefined;
 }
+
+export interface ComponentWithModuleName {
+    /**
+     * - Name of the component
+     */
+    moduleName: string;
+}

govuk-frontend/dist/govuk/components/accordion/accordion.d.ts

@@ -12,7 +12,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
  * The state of each section is saved to the DOM via the `aria-expanded`
  * attribute, which also provides accessibility.
  */
-export class Accordion extends GOVUKFrontendComponent {
+export class Accordion extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -42,10 +42,10 @@ export class Accordion extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for accordion
+     * @param {Element | null} $root - HTML element to use for accordion
      * @param {AccordionConfig} [config] - Accordion config
      */
-    constructor($module: Element | null, config?: AccordionConfig);
+    constructor($root: Element | null, config?: AccordionConfig);
 
     /**
      * Get the identifier for a section

govuk-frontend/dist/govuk/components/button/button.d.ts

@@ -3,7 +3,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * JavaScript enhancements for the Button component
  */
-export class Button extends GOVUKFrontendComponent {
+export class Button extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -30,10 +30,10 @@ export class Button extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for button
+     * @param {Element | null} $root - HTML element to use for button
      * @param {ButtonConfig} [config] - Button config
      */
-    constructor($module: Element | null, config?: ButtonConfig);
+    constructor($root: Element | null, config?: ButtonConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/character-count/character-count.d.ts

@@ -11,7 +11,7 @@ import { type TranslationPluralForms } from "../../i18n.js";
  * You can configure the message to only appear after a certain percentage
  * of the available characters/words has been entered.
  */
-export class CharacterCount extends GOVUKFrontendComponent {
+export class CharacterCount extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -51,10 +51,10 @@ export class CharacterCount extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for character count
+     * @param {Element | null} $root - HTML element to use for character count
      * @param {CharacterCountConfig} [config] - Character count config
      */
-    constructor($module: Element | null, config?: CharacterCountConfig);
+    constructor($root: Element | null, config?: CharacterCountConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/checkboxes/checkboxes.d.ts

@@ -3,7 +3,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Checkboxes component
  */
-export class Checkboxes extends GOVUKFrontendComponent {
+export class Checkboxes extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -21,7 +21,7 @@ export class Checkboxes extends GOVUKFrontendComponent {
      * (for example if the user has navigated back), and set up event handlers to
      * keep the reveal in sync with the checkbox state.
      *
-     * @param {Element | null} $module - HTML element to use for checkboxes
+     * @param {Element | null} $root - HTML element to use for checkboxes
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/components/error-summary/error-summary.d.ts

@@ -6,7 +6,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
  * Takes focus on initialisation for accessible announcement, unless disabled in
  * configuration.
  */
-export class ErrorSummary extends GOVUKFrontendComponent {
+export class ErrorSummary extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -33,10 +33,10 @@ export class ErrorSummary extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for error summary
+     * @param {Element | null} $root - HTML element to use for error summary
      * @param {ErrorSummaryConfig} [config] - Error summary config
      */
-    constructor($module: Element | null, config?: ErrorSummaryConfig);
+    constructor($root: Element | null, config?: ErrorSummaryConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/exit-this-page/exit-this-page.d.ts

@@ -3,7 +3,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Exit this page component
  */
-export class ExitThisPage extends GOVUKFrontendComponent {
+export class ExitThisPage extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -30,10 +30,10 @@ export class ExitThisPage extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element that wraps the Exit This Page button
+     * @param {Element | null} $root - HTML element that wraps the Exit This Page button
      * @param {ExitThisPageConfig} [config] - Exit This Page config
      */
-    constructor($module: Element | null, config?: ExitThisPageConfig);
+    constructor($root: Element | null, config?: ExitThisPageConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/header/header.d.ts

@@ -3,7 +3,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Header component
  */
-export class Header extends GOVUKFrontendComponent {
+export class Header extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -13,7 +13,7 @@ export class Header extends GOVUKFrontendComponent {
      * Apply a matchMedia for desktop which will trigger a state sync if the
      * browser viewport moves between states.
      *
-     * @param {Element | null} $module - HTML element to use for header
+     * @param {Element | null} $root - HTML element to use for header
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/components/notification-banner/notification-banner.d.ts

@@ -3,7 +3,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Notification Banner component
  */
-export class NotificationBanner extends GOVUKFrontendComponent {
+export class NotificationBanner extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -30,10 +30,10 @@ export class NotificationBanner extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for notification banner
+     * @param {Element | null} $root - HTML element to use for notification banner
      * @param {NotificationBannerConfig} [config] - Notification banner config
      */
-    constructor($module: Element | null, config?: NotificationBannerConfig);
+    constructor($root: Element | null, config?: NotificationBannerConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/password-input/password-input.d.ts

@@ -3,7 +3,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Password input component
  */
-export class PasswordInput extends GOVUKFrontendComponent {
+export class PasswordInput extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -30,10 +30,10 @@ export class PasswordInput extends GOVUKFrontendComponent {
     }>;
 
     /**
-     * @param {Element | null} $module - HTML element to use for password input
+     * @param {Element | null} $root - HTML element to use for password input
      * @param {PasswordInputConfig} [config] - Password input config
      */
-    constructor($module: Element | null, config?: PasswordInputConfig);
+    constructor($root: Element | null, config?: PasswordInputConfig);
 }
 
 /**

govuk-frontend/dist/govuk/components/radios/radios.d.ts

@@ -3,7 +3,7 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Radios component
  */
-export class Radios extends GOVUKFrontendComponent {
+export class Radios extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
@@ -21,7 +21,7 @@ export class Radios extends GOVUKFrontendComponent {
      * (for example if the user has navigated back), and set up event handlers to
      * keep the reveal in sync with the radio state.
      *
-     * @param {Element | null} $module - HTML element to use for radios
+     * @param {Element | null} $root - HTML element to use for radios
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/components/service-navigation/service-navigation.d.mts

@@ -0,0 +1 @@
+export * from "./service-navigation.js";

govuk-frontend/dist/govuk/components/service-navigation/service-navigation.d.ts

@@ -0,0 +1,16 @@
+import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
+
+/**
+ * Service Navigation component
+ */
+export class ServiceNavigation extends GOVUKFrontendComponent<HTMLElement> {
+    /**
+     * Name for the component used when initialising using data-module attributes.
+     */
+    static moduleName: string;
+
+    /**
+     * @param {Element | null} $root - HTML element to use for header
+     */
+    constructor($root: Element | null);
+}

govuk-frontend/dist/govuk/components/skip-link/skip-link.d.ts

@@ -3,17 +3,22 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Skip link component
  */
-export class SkipLink extends GOVUKFrontendComponent {
+export class SkipLink extends GOVUKFrontendComponent<HTMLAnchorElement> {
+    static elementType: {
+        new(): HTMLAnchorElement;
+        prototype: HTMLAnchorElement;
+    };
+
     /**
      * Name for the component used when initialising using data-module attributes.
      */
     static moduleName: string;
 
     /**
-     * @param {Element | null} $module - HTML element to use for skip link
-     * @throws {ElementError} when $module is not set or the wrong type
-     * @throws {ElementError} when $module.hash does not contain a hash
+     * @param {Element | null} $root - HTML element to use for skip link
+     * @throws {ElementError} when $root is not set or the wrong type
+     * @throws {ElementError} when $root.hash does not contain a hash
      * @throws {ElementError} when the linked element is missing or the wrong type
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/components/tabs/tabs.d.ts

@@ -3,14 +3,14 @@ import { GOVUKFrontendComponent } from "../../govuk-frontend-component.js";
 /**
  * Tabs component
  */
-export class Tabs extends GOVUKFrontendComponent {
+export class Tabs extends GOVUKFrontendComponent<HTMLElement> {
     /**
      * Name for the component used when initialising using data-module attributes.
      */
     static moduleName: string;
 
     /**
-     * @param {Element | null} $module - HTML element to use for tabs
+     * @param {Element | null} $root - HTML element to use for tabs
      */
-    constructor($module: Element | null);
+    constructor($root: Element | null);
 }

govuk-frontend/dist/govuk/errors/index.d.ts

@@ -1,3 +1,5 @@
+import { type ComponentWithModuleName } from "../common/index.js";
+
 /**
  * GOV.UK Frontend error
  *
@@ -17,7 +19,7 @@
  * }
  * ```
  */
-export class GOVUKFrontendError extends Error {
+export abstract class GOVUKFrontendError extends Error {
 }
 
 /**
@@ -58,14 +60,20 @@ export class ElementError extends GOVUKFrontendError {
 }
 
 /**
- * Element error options
+ * Indicates that a component is already initialised
  */
-export interface ElementErrorOptions {
+export class InitError extends GOVUKFrontendError {
     /**
-     * - The name of the component throwing the error
+     * @internal
+     * @param {ComponentWithModuleName | string} componentOrMessage - name of the component module
      */
-    componentName: string;
+    constructor(componentOrMessage: ComponentWithModuleName | string);
+}
 
+/**
+ * Element error options
+ */
+export interface ElementErrorOptions {
     /**
      * - An identifier that'll let the user understand which element has an error. This is whatever makes the most sense
      */
@@ -80,4 +88,9 @@ export interface ElementErrorOptions {
      * - The type that was expected for the identifier
      */
     expectedType?: string | undefined;
+
+    /**
+     * - Component throwing the error
+     */
+    component: ComponentWithModuleName;
 }

govuk-frontend/dist/govuk/govuk-frontend-component.d.ts

@@ -2,8 +2,29 @@
  * Base Component class
  *
  * Centralises the behaviours shared by our components
- *
- * @internal
  */
-export class GOVUKFrontendComponent {
+export abstract class GOVUKFrontendComponent<RootElementType extends Element = HTMLElement> {
+    static elementType: typeof Element;
+
+    /**
+     * Validates whether components are supported
+     *
+     * @throws {SupportError} when the components are not supported
+     */
+    static checkSupport(): void;
+
+    /**
+     * Constructs a new component, validating that GOV.UK Frontend is supported
+     *
+     * @internal
+     * @param {Element | null} [$root] - HTML element to use for component
+     */
+    constructor($root?: Element | null);
+
+    /**
+     * Returns the root element of the component
+     *
+     * @returns {RootElementType} - the root element of component
+     */
+    protected get $root(): RootElementType;
 }

govuk-frontend/dist/govuk/init.d.ts

@@ -57,17 +57,49 @@ export interface Config {
  */
 export type ConfigKey = keyof Config;
 
+export interface ErrorContext<T extends CompatibleClass> {
+    /**
+     * - Element used for component module initialisation
+     */
+    element?: Element | undefined;
+
+    /**
+     * - Class of component
+     */
+    component?: T | undefined;
+
+    /**
+     * - Config supplied to component
+     */
+    config: T["defaults"];
+}
+
+export type OnErrorCallback<T extends CompatibleClass> = (error: unknown, context: ErrorContext<T>) => any;
+
+export interface CreateAllOptions<T extends CompatibleClass> {
+    /**
+     * - scope of the document to search within
+     */
+    scope?: Document | Element | undefined;
+
+    /**
+     * - callback function if error throw by component on init
+     */
+    onError?: OnErrorCallback<T> | undefined;
+}
+
 /**
  * Initialise all components
  *
  * Use the `data-module` attributes to find, instantiate and init all of the
  * components provided as part of GOV.UK Frontend.
  *
- * @param {Config & { scope?: Element }} [config] - Config for all components (with optional scope)
+ * @param {Config & { scope?: Element, onError?: OnErrorCallback<CompatibleClass> }} [config] - Config for all components (with optional scope)
  */
 export function initAll(
     config?: Config & {
         scope?: Element;
+        onError?: OnErrorCallback<CompatibleClass>;
     },
 ): void;
 
@@ -82,12 +114,12 @@ export function initAll(
  *
  * @template {CompatibleClass} T
  * @param {T} Component - class of the component to create
- * @param {T["defaults"]} [config] - config for the component
- * @param {Element|Document} [$scope] - scope of the document to search within
+ * @param {T["defaults"]} [config] - Config supplied to component
+ * @param {OnErrorCallback<T> | Element | Document | CreateAllOptions<T> } [createAllOptions] - options for createAll including scope of the document to search within and callback function if error throw by component on init
  * @returns {Array<InstanceType<T>>} - array of instantiated components
  */
 export function createAll<T extends CompatibleClass>(
     Component: T,
     config?: T["defaults"],
-    $scope?: Document | Element,
+    createAllOptions?: Document | Element | OnErrorCallback<T> | CreateAllOptions<T>,
 ): Array<InstanceType<T>>;

govuk-frontend/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@types/govuk-frontend",
-    "version": "5.4.1",
+    "version": "5.7.0",
     "description": "TypeScript definitions for govuk-frontend",
     "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/govuk-frontend",
     "license": "MIT",
@@ -32,6 +32,6 @@
     },
     "scripts": {},
     "dependencies": {},
-    "typesPublisherContentHash": "119b3d995ab239093ec36b6c242fab216abb9c9f5a66c8b30f4c296b4de1d951",
+    "typesPublisherContentHash": "08d1cc6a671dadd0e0e9c1113ea085b28a6b2510f52991c817bfb8d71bc308ae",
     "typeScriptVersion": "4.8"
 }