@hmcts/opal-frontend-common 0.0.109 → 0.0.110

package/fesm2022/hmcts-opal-frontend-common-components-alphagov-alphagov-accessible-autocomplete.mjs

@@ -1,281 +1,284 @@
-import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, afterNextRender, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
-import { Subject, startWith, pairwise, takeUntil } from 'rxjs';
-
-class AlphagovAccessibleAutocompleteComponent {
-    changeDetector = inject(ChangeDetectorRef);
-    _control;
-    ngUnsubscribe = new Subject();
-    describedByObserver = null;
-    containerObserver = null;
-    labelText;
-    labelClasses;
-    inputId;
-    inputName;
-    inputClasses;
-    hintText;
-    autoCompleteItems = [];
-    showAllValues = true;
-    /** Formats suggestion HTML only; option names remain unchanged for input values and matching. */
-    suggestionTemplate;
-    errors = null;
-    autocompleteContainer;
-    autoCompleteId;
-    set control(abstractControl) {
-        // Form controls are passed in as abstract controls, we need to re-cast it.
-        this._control = abstractControl;
-    }
-    constructor() {
-        afterNextRender(() => {
-            // Only trigger the render of the component in the browser
-            this.configureAutoComplete();
-        });
-    }
-    /**
-     * Gets the control for the alphagov-accessible-autocomplete component.
-     * @returns The control for the component.
-     */
-    get getControl() {
-        return this._control;
-    }
-    /**
-     * Handles the confirmation of a selected name.
-     *
-     * @param selectedName - The selected name.
-     * @returns void
-     */
-    handleOnConfirm(selectedName) {
-        // selectedName is populated on selecting an option but is undefined onBlur, so we need to grab the input value directly from the input
-        const control = this._control;
-        const name = selectedName ?? document.querySelector(`#${this.autoCompleteId}`).value;
-        const selectedItem = this.autoCompleteItems.find((item) => item.name === name) ?? null;
-        const previousValue = control.value;
-        const selectedValue = selectedItem?.value ?? null;
-        control.setValue(selectedValue);
-        control.markAsTouched();
-        // Handles initial empty state when the user clicks away from the input
-        if (selectedItem === null && previousValue === null) {
-            control.markAsPristine();
-        }
-        else if (selectedItem?.value !== previousValue) {
-            control.markAsDirty();
-        }
-        control.updateValueAndValidity();
-        this.changeDetector.detectChanges();
-    }
-    /**
-     * Retrieves the default value for the autocomplete component.
-     *
-     * @returns The default value as a string.
-     */
-    getDefaultValue() {
-        return this.autoCompleteItems.find((item) => item.value === this._control.value)?.name ?? '';
-    }
-    /**
-     * Builds the props object for the AccessibleAutocomplete component.
-     * @returns The props object for the AccessibleAutocomplete component.
-     */
-    buildAutoCompleteProps() {
-        return {
-            id: this.autoCompleteId,
-            element: this.autocompleteContainer.nativeElement,
-            source: this.autoCompleteItems.map((item) => item.name),
-            name: this.autoCompleteId,
-            showAllValues: this.showAllValues,
-            defaultValue: this.getDefaultValue(),
-            ...(this.suggestionTemplate
-                ? {
-                    templates: {
-                        inputValue: (label) => label,
-                        suggestion: this.suggestionTemplate,
-                    },
-                }
-                : {}),
-            dropdownArrow: ({ className }) => this.renderDropdownArrow(className),
-            onConfirm: (selectedName) => this.handleOnConfirm(selectedName),
-        };
-    }
-    /**
-     * Renders a custom dropdown arrow.
-     * @param className – The class to apply to the SVG.
-     * @returns An SVG string for the dropdown arrow.
-     */
-    renderDropdownArrow(className) {
-        return `
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewChild, afterNextRender, inject } from "@angular/core";
+import * as i1 from "@angular/forms";
+import { ReactiveFormsModule } from "@angular/forms";
+import { Subject, pairwise, startWith, takeUntil } from "rxjs";
+var AlphagovAccessibleAutocompleteComponent = class AlphagovAccessibleAutocompleteComponent {
+	changeDetector = inject(ChangeDetectorRef);
+	_control;
+	ngUnsubscribe = new Subject();
+	describedByObserver = null;
+	containerObserver = null;
+	labelText;
+	labelClasses;
+	inputId;
+	inputName;
+	inputClasses;
+	hintText;
+	autoCompleteItems = [];
+	showAllValues = true;
+	suggestionTemplate;
+	errors = null;
+	autocompleteContainer;
+	autoCompleteId;
+	set control(abstractControl) {
+		this._control = abstractControl;
+	}
+	constructor() {
+		afterNextRender(() => {
+			this.configureAutoComplete();
+		});
+	}
+	get getControl() {
+		return this._control;
+	}
+	handleOnConfirm(selectedName) {
+		const control = this._control;
+		const name = selectedName ?? document.querySelector(`#${this.autoCompleteId}`).value;
+		const selectedItem = this.autoCompleteItems.find((item) => item.name === name) ?? null;
+		const previousValue = control.value;
+		const selectedValue = selectedItem?.value ?? null;
+		control.setValue(selectedValue);
+		control.markAsTouched();
+		if (selectedItem === null && previousValue === null) control.markAsPristine();
+		else if (selectedItem?.value !== previousValue) control.markAsDirty();
+		control.updateValueAndValidity();
+		this.changeDetector.detectChanges();
+	}
+	getDefaultValue() {
+		return this.autoCompleteItems.find((item) => item.value === this._control.value)?.name ?? "";
+	}
+	buildAutoCompleteProps() {
+		return {
+			id: this.autoCompleteId,
+			element: this.autocompleteContainer.nativeElement,
+			source: this.autoCompleteItems.map((item) => item.name),
+			name: this.autoCompleteId,
+			showAllValues: this.showAllValues,
+			defaultValue: this.getDefaultValue(),
+			...this.suggestionTemplate ? { templates: {
+				inputValue: (label) => label,
+				suggestion: this.suggestionTemplate
+			} } : {},
+			dropdownArrow: ({ className }) => this.renderDropdownArrow(className),
+			onConfirm: (selectedName) => this.handleOnConfirm(selectedName)
+		};
+	}
+	renderDropdownArrow(className) {
+		return `
    <svg class="${className}" style="top: 8px;" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
             <path d="M256,298.3L256,298.3L256,298.3l174.2-167.2c4.3-4.2,11.4-4.1,15.8,0.2l30.6,29.9
                     c4.4,4.3,4.5,11.3,0.2,15.5L264.1,380.9c-2.2,2.2-5.2,3.2-8.1,3c-3,0.1-5.9-0.9-8.1-3L35.2,176.7
                     c-4.3-4.2-4.2-11.2,0.2-15.5L66,131.3c4.4-4.3,11.5-4.4,15.8-0.2L256,298.3z"></path>
           </svg>`;
-    }
-    /**
-     * Configures the auto-complete functionality using the accessible-autocomplete library.
-     */
-    configureAutoComplete() {
-        import('accessible-autocomplete').then((accessibleAutocomplete) => {
-            accessibleAutocomplete.default(this.buildAutoCompleteProps());
-            this.waitForInputAndApply();
-        });
-    }
-    /**
-     * Gets the rendered autocomplete text input, if present.
-     */
-    getVisibleInput() {
-        return this.autocompleteContainer?.nativeElement?.querySelector(`#${this.autoCompleteId}`);
-    }
-    /**
-     * Builds the hint/error ids to apply to aria-describedby.
-     */
-    buildDescribedByIds() {
-        const ids = [];
-        if (this.hintText) {
-            ids.push(`${this.inputId}-hint`);
-        }
-        if (this.errors) {
-            ids.push(`${this.autoCompleteId}-error-message`);
-        }
-        return ids;
-    }
-    /**
-     * Updates aria-describedby on the visible input, preserving any non-managed ids.
-     */
-    applyDescribedBy() {
-        const input = this.getVisibleInput();
-        if (!input) {
-            return;
-        }
-        const managedIds = new Set([`${this.inputId}-hint`, `${this.autoCompleteId}-error-message`]);
-        const currentValue = input.getAttribute('aria-describedby') ?? '';
-        const currentIds = currentValue.split(' ').filter(Boolean);
-        const preservedIds = currentIds.filter((id) => !managedIds.has(id));
-        const nextIds = [...new Set([...preservedIds, ...this.buildDescribedByIds()])];
-        const nextValue = nextIds.length ? nextIds.join(' ') : '';
-        if (currentValue === nextValue) {
-            return;
-        }
-        if (nextValue) {
-            input.setAttribute('aria-describedby', nextValue);
-        }
-        else {
-            input.removeAttribute('aria-describedby');
-        }
-    }
-    /**
-     * Observes aria-describedby changes on the visible input to reapply managed ids.
-     */
-    observeDescribedBy() {
-        const input = this.getVisibleInput();
-        if (!input || typeof MutationObserver === 'undefined') {
-            return;
-        }
-        this.describedByObserver?.disconnect();
-        this.describedByObserver = new MutationObserver(() => this.applyDescribedBy());
-        this.describedByObserver.observe(input, { attributes: true, attributeFilter: ['aria-describedby'] });
-        this.applyDescribedBy();
-    }
-    /**
-     * Waits for the visible input to appear, then applies describedby and observers.
-     */
-    waitForInputAndApply() {
-        const input = this.getVisibleInput();
-        if (input) {
-            this.observeDescribedBy();
-            return;
-        }
-        if (typeof MutationObserver === 'undefined') {
-            return;
-        }
-        this.containerObserver?.disconnect();
-        this.containerObserver = new MutationObserver(() => {
-            if (this.getVisibleInput()) {
-                this.containerObserver?.disconnect();
-                this.observeDescribedBy();
-            }
-        });
-        this.containerObserver.observe(this.autocompleteContainer.nativeElement, { childList: true, subtree: true });
-    }
-    /**
-     * Sets up the control subscription for value changes.
-     * Whenever the control value changes, this method is called to handle the changes.
-     * If the new value is null, it clears the autocomplete container and configures the autocomplete.
-     */
-    setupControlSub() {
-        this._control.valueChanges
-            .pipe(startWith(null), pairwise(), takeUntil(this.ngUnsubscribe))
-            .subscribe(([prev, next]) => {
-            // If both values are null, we don't need to do anything
-            if (prev === null && next === null) {
-                return;
-            }
-            // Otherwise, next is null, we need to clear the autocomplete
-            if (next === null) {
-                this.autocompleteContainer.nativeElement.innerHTML = '';
-                this.configureAutoComplete();
-            }
-        });
-    }
-    ngOnInit() {
-        this.autoCompleteId = this.inputId + '-autocomplete';
-        this.setupControlSub();
-    }
-    ngOnChanges(changes) {
-        if (changes['hintText'] || changes['errors']) {
-            this.applyDescribedBy();
-        }
-    }
-    ngOnDestroy() {
-        this.ngUnsubscribe.next();
-        this.ngUnsubscribe.complete();
-        this.describedByObserver?.disconnect();
-        this.containerObserver?.disconnect();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AlphagovAccessibleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: AlphagovAccessibleAutocompleteComponent, isStandalone: true, selector: "opal-lib-alphagov-accessible-autocomplete", inputs: { labelText: "labelText", labelClasses: "labelClasses", inputId: "inputId", inputName: "inputName", inputClasses: "inputClasses", hintText: "hintText", autoCompleteItems: "autoCompleteItems", showAllValues: "showAllValues", suggestionTemplate: "suggestionTemplate", errors: "errors", control: "control" }, viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocomplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n  <label class=\"govuk-label {{ labelClasses }}\" [for]=\"autoCompleteId\"> {{ labelText }} </label>\n  @if (hintText) {\n    <div id=\"{{ inputId }}-hint\" class=\"govuk-hint\">\n      {{ hintText }}\n    </div>\n  }\n\n  @if (errors) {\n    <p id=\"{{ this.autoCompleteId }}-error-message\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n    </p>\n  }\n\n  <div #autocomplete id=\"{{ autoCompleteId }}-container\" class=\"{{ inputClasses }}\"></div>\n  <input\n    [id]=\"inputId\"\n    [name]=\"inputName\"\n    type=\"hidden\"\n    [formControl]=\"getControl\"\n    [attr.aria-describedby]=\"hintText ? inputId + '-hint' : null\"\n  />\n</div>\n", styles: [":host ::ng-deep .autocomplete__option{font-family:GDS Transport,arial,sans-serif}:host ::ng-deep .govuk-input--error input{border-color:#d4351c}:host ::ng-deep .autocomplete__input{background-color:#fff}:host ::ng-deep .autocomplete__dropdown-arrow-down{z-index:1!important;pointer-events:none!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AlphagovAccessibleAutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'opal-lib-alphagov-accessible-autocomplete', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n  <label class=\"govuk-label {{ labelClasses }}\" [for]=\"autoCompleteId\"> {{ labelText }} </label>\n  @if (hintText) {\n    <div id=\"{{ inputId }}-hint\" class=\"govuk-hint\">\n      {{ hintText }}\n    </div>\n  }\n\n  @if (errors) {\n    <p id=\"{{ this.autoCompleteId }}-error-message\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n    </p>\n  }\n\n  <div #autocomplete id=\"{{ autoCompleteId }}-container\" class=\"{{ inputClasses }}\"></div>\n  <input\n    [id]=\"inputId\"\n    [name]=\"inputName\"\n    type=\"hidden\"\n    [formControl]=\"getControl\"\n    [attr.aria-describedby]=\"hintText ? inputId + '-hint' : null\"\n  />\n</div>\n", styles: [":host ::ng-deep .autocomplete__option{font-family:GDS Transport,arial,sans-serif}:host ::ng-deep .govuk-input--error input{border-color:#d4351c}:host ::ng-deep .autocomplete__input{background-color:#fff}:host ::ng-deep .autocomplete__dropdown-arrow-down{z-index:1!important;pointer-events:none!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { labelText: [{
-                type: Input,
-                args: [{ required: true }]
-            }], labelClasses: [{
-                type: Input,
-                args: [{ required: false }]
-            }], inputId: [{
-                type: Input,
-                args: [{ required: true }]
-            }], inputName: [{
-                type: Input,
-                args: [{ required: true }]
-            }], inputClasses: [{
-                type: Input,
-                args: [{ required: false }]
-            }], hintText: [{
-                type: Input,
-                args: [{ required: false }]
-            }], autoCompleteItems: [{
-                type: Input,
-                args: [{ required: true }]
-            }], showAllValues: [{
-                type: Input
-            }], suggestionTemplate: [{
-                type: Input
-            }], errors: [{
-                type: Input,
-                args: [{ required: false }]
-            }], autocompleteContainer: [{
-                type: ViewChild,
-                args: ['autocomplete']
-            }], control: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+	}
+	configureAutoComplete() {
+		import("accessible-autocomplete").then((accessibleAutocomplete) => {
+			accessibleAutocomplete.default(this.buildAutoCompleteProps());
+			this.waitForInputAndApply();
+		});
+	}
+	getVisibleInput() {
+		return this.autocompleteContainer?.nativeElement?.querySelector(`#${this.autoCompleteId}`);
+	}
+	buildDescribedByIds() {
+		const ids = [];
+		if (this.hintText) ids.push(`${this.inputId}-hint`);
+		if (this.errors) ids.push(`${this.autoCompleteId}-error-message`);
+		return ids;
+	}
+	applyDescribedBy() {
+		const input = this.getVisibleInput();
+		if (!input) return;
+		const managedIds = /* @__PURE__ */ new Set([`${this.inputId}-hint`, `${this.autoCompleteId}-error-message`]);
+		const currentValue = input.getAttribute("aria-describedby") ?? "";
+		const preservedIds = currentValue.split(" ").filter(Boolean).filter((id) => !managedIds.has(id));
+		const nextIds = [.../* @__PURE__ */ new Set([...preservedIds, ...this.buildDescribedByIds()])];
+		const nextValue = nextIds.length ? nextIds.join(" ") : "";
+		if (currentValue === nextValue) return;
+		if (nextValue) input.setAttribute("aria-describedby", nextValue);
+		else input.removeAttribute("aria-describedby");
+	}
+	observeDescribedBy() {
+		const input = this.getVisibleInput();
+		if (!input || typeof MutationObserver === "undefined") return;
+		this.describedByObserver?.disconnect();
+		this.describedByObserver = new MutationObserver(() => this.applyDescribedBy());
+		this.describedByObserver.observe(input, {
+			attributes: true,
+			attributeFilter: ["aria-describedby"]
+		});
+		this.applyDescribedBy();
+	}
+	waitForInputAndApply() {
+		if (this.getVisibleInput()) {
+			this.observeDescribedBy();
+			return;
+		}
+		if (typeof MutationObserver === "undefined") return;
+		this.containerObserver?.disconnect();
+		this.containerObserver = new MutationObserver(() => {
+			if (this.getVisibleInput()) {
+				this.containerObserver?.disconnect();
+				this.observeDescribedBy();
+			}
+		});
+		this.containerObserver.observe(this.autocompleteContainer.nativeElement, {
+			childList: true,
+			subtree: true
+		});
+	}
+	setupControlSub() {
+		this._control.valueChanges.pipe(startWith(null), pairwise(), takeUntil(this.ngUnsubscribe)).subscribe(([prev, next]) => {
+			if (prev === null && next === null) return;
+			if (next === null) {
+				this.autocompleteContainer.nativeElement.innerHTML = "";
+				this.configureAutoComplete();
+			}
+		});
+	}
+	ngOnInit() {
+		this.autoCompleteId = this.inputId + "-autocomplete";
+		this.setupControlSub();
+	}
+	ngOnChanges(changes) {
+		if (changes["hintText"] || changes["errors"]) this.applyDescribedBy();
+	}
+	ngOnDestroy() {
+		this.ngUnsubscribe.next();
+		this.ngUnsubscribe.complete();
+		this.describedByObserver?.disconnect();
+		this.containerObserver?.disconnect();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "21.2.25",
+		ngImport: i0,
+		type: AlphagovAccessibleAutocompleteComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "21.2.25",
+		type: AlphagovAccessibleAutocompleteComponent,
+		isStandalone: true,
+		selector: "opal-lib-alphagov-accessible-autocomplete",
+		inputs: {
+			labelText: "labelText",
+			labelClasses: "labelClasses",
+			inputId: "inputId",
+			inputName: "inputName",
+			inputClasses: "inputClasses",
+			hintText: "hintText",
+			autoCompleteItems: "autoCompleteItems",
+			showAllValues: "showAllValues",
+			suggestionTemplate: "suggestionTemplate",
+			errors: "errors",
+			control: "control"
+		},
+		viewQueries: [{
+			propertyName: "autocompleteContainer",
+			first: true,
+			predicate: ["autocomplete"],
+			descendants: true
+		}],
+		usesOnChanges: true,
+		ngImport: i0,
+		template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n  <label class=\"govuk-label {{ labelClasses }}\" [for]=\"autoCompleteId\"> {{ labelText }} </label>\n  @if (hintText) {\n    <div id=\"{{ inputId }}-hint\" class=\"govuk-hint\">\n      {{ hintText }}\n    </div>\n  }\n\n  @if (errors) {\n    <p id=\"{{ this.autoCompleteId }}-error-message\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n    </p>\n  }\n\n  <div #autocomplete id=\"{{ autoCompleteId }}-container\" class=\"{{ inputClasses }}\"></div>\n  <input\n    [id]=\"inputId\"\n    [name]=\"inputName\"\n    type=\"hidden\"\n    [formControl]=\"getControl\"\n    [attr.aria-describedby]=\"hintText ? inputId + '-hint' : null\"\n  />\n</div>\n",
+		styles: [":host ::ng-deep .autocomplete__option{font-family:GDS Transport,arial,sans-serif}:host ::ng-deep .govuk-input--error input{border-color:#d4351c}:host ::ng-deep .autocomplete__input{background-color:#fff}:host ::ng-deep .autocomplete__dropdown-arrow-down{z-index:1!important;pointer-events:none!important}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: ReactiveFormsModule
+			},
+			{
+				kind: "directive",
+				type: i1.DefaultValueAccessor,
+				selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.FormControlDirective,
+				selector: "[formControl]",
+				inputs: [
+					"formControl",
+					"disabled",
+					"ngModel"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngForm"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "21.2.25",
+	ngImport: i0,
+	type: AlphagovAccessibleAutocompleteComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "opal-lib-alphagov-accessible-autocomplete",
+			imports: [ReactiveFormsModule],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"!!errors\">\n  <label class=\"govuk-label {{ labelClasses }}\" [for]=\"autoCompleteId\"> {{ labelText }} </label>\n  @if (hintText) {\n    <div id=\"{{ inputId }}-hint\" class=\"govuk-hint\">\n      {{ hintText }}\n    </div>\n  }\n\n  @if (errors) {\n    <p id=\"{{ this.autoCompleteId }}-error-message\" class=\"govuk-error-message\">\n      <span class=\"govuk-visually-hidden\">Error: </span> {{ errors }}\n    </p>\n  }\n\n  <div #autocomplete id=\"{{ autoCompleteId }}-container\" class=\"{{ inputClasses }}\"></div>\n  <input\n    [id]=\"inputId\"\n    [name]=\"inputName\"\n    type=\"hidden\"\n    [formControl]=\"getControl\"\n    [attr.aria-describedby]=\"hintText ? inputId + '-hint' : null\"\n  />\n</div>\n",
+			styles: [":host ::ng-deep .autocomplete__option{font-family:GDS Transport,arial,sans-serif}:host ::ng-deep .govuk-input--error input{border-color:#d4351c}:host ::ng-deep .autocomplete__input{background-color:#fff}:host ::ng-deep .autocomplete__dropdown-arrow-down{z-index:1!important;pointer-events:none!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		labelText: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		labelClasses: [{
+			type: Input,
+			args: [{ required: false }]
+		}],
+		inputId: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		inputName: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		inputClasses: [{
+			type: Input,
+			args: [{ required: false }]
+		}],
+		hintText: [{
+			type: Input,
+			args: [{ required: false }]
+		}],
+		autoCompleteItems: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		showAllValues: [{ type: Input }],
+		suggestionTemplate: [{ type: Input }],
+		errors: [{
+			type: Input,
+			args: [{ required: false }]
+		}],
+		autocompleteContainer: [{
+			type: ViewChild,
+			args: ["autocomplete"]
+		}],
+		control: [{
+			type: Input,
+			args: [{ required: true }]
+		}]
+	}
+});
 export { AlphagovAccessibleAutocompleteComponent };
-//# sourceMappingURL=hmcts-opal-frontend-common-components-alphagov-alphagov-accessible-autocomplete.mjs.map
+
+//# sourceMappingURL=hmcts-opal-frontend-common-components-alphagov-alphagov-accessible-autocomplete.mjs.map