@hmcts/opal-frontend-common 0.0.30 → 0.0.31

package/components/alphagov/alphagov-accessible-autocomplete/index.d.ts

@@ -47,6 +47,12 @@ declare class AlphagovAccessibleAutocompleteComponent implements OnInit, OnDestr
      * @returns The props object for the AccessibleAutocomplete component.
      */
     private buildAutoCompleteProps;
+    /**
+     * Renders a custom dropdown arrow.
+     * @param className – The class to apply to the SVG.
+     * @returns An SVG string for the dropdown arrow.
+     */
+    private renderDropdownArrow;
     /**
      * Configures the auto-complete functionality using the accessible-autocomplete library.
      */

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

@@ -81,9 +81,23 @@ class AlphagovAccessibleAutocompleteComponent {
             name: this.autoCompleteId,
             showAllValues: this.showAllValues,
             defaultValue: this.getDefaultValue(),
+            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 `
+   <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.
      */
@@ -121,11 +135,11 @@ class AlphagovAccessibleAutocompleteComponent {
         this.ngUnsubscribe.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: AlphagovAccessibleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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", errors: "errors", control: "control" }, viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocomplete"], descendants: 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 [id]=\"inputId\" [name]=\"inputName\" type=\"hidden\" [formControl]=\"getControl\" />\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}\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", 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", errors: "errors", control: "control" }, viewQueries: [{ propertyName: "autocompleteContainer", first: true, predicate: ["autocomplete"], descendants: 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 [id]=\"inputId\" [name]=\"inputName\" type=\"hidden\" [formControl]=\"getControl\" />\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: "20.1.4", 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 [id]=\"inputId\" [name]=\"inputName\" type=\"hidden\" [formControl]=\"getControl\" />\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}\n"] }]
+            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 [id]=\"inputId\" [name]=\"inputName\" type=\"hidden\" [formControl]=\"getControl\" />\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 }]

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

@@ -1 +1 @@
-{"version":3,"file":"hmcts-opal-frontend-common-components-alphagov-alphagov-accessible-autocomplete.mjs","sources":["../../../projects/opal-frontend-common/components/alphagov/alphagov-accessible-autocomplete/alphagov-accessible-autocomplete.component.ts","../../../projects/opal-frontend-common/components/alphagov/alphagov-accessible-autocomplete/alphagov-accessible-autocomplete.component.html","../../../projects/opal-frontend-common/components/alphagov/alphagov-accessible-autocomplete/hmcts-opal-frontend-common-components-alphagov-alphagov-accessible-autocomplete.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  Input,\n  OnDestroy,\n  OnInit,\n  ViewChild,\n  afterNextRender,\n  inject,\n} from '@angular/core';\nimport { FormControl, AbstractControl, ReactiveFormsModule } from '@angular/forms';\nimport { IAlphagovAccessibleAutocompleteItem } from './interfaces/alphagov-accessible-autocomplete-item.interface';\nimport { AccessibleAutocompleteProps } from 'accessible-autocomplete';\nimport { Subject, pairwise, startWith, takeUntil } from 'rxjs';\n\n@Component({\n  selector: 'opal-lib-alphagov-accessible-autocomplete',\n  imports: [ReactiveFormsModule],\n  templateUrl: './alphagov-accessible-autocomplete.component.html',\n  styleUrl: './alphagov-accessible-autocomplete.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AlphagovAccessibleAutocompleteComponent implements OnInit, OnDestroy {\n  private readonly changeDetector: ChangeDetectorRef = inject(ChangeDetectorRef);\n  private _control!: FormControl;\n  private readonly ngUnsubscribe = new Subject<void>();\n\n  @Input({ required: true }) labelText!: string;\n  @Input({ required: false }) labelClasses!: string;\n  @Input({ required: true }) inputId!: string;\n  @Input({ required: true }) inputName!: string;\n  @Input({ required: false }) inputClasses!: string;\n  @Input({ required: false }) hintText!: string;\n  @Input({ required: true }) autoCompleteItems: IAlphagovAccessibleAutocompleteItem[] = [];\n  @Input() showAllValues = true;\n  @Input({ required: false }) errors: string | null = null;\n\n  @ViewChild('autocomplete') autocompleteContainer!: ElementRef<HTMLElement>;\n\n  public autoCompleteId!: string;\n\n  @Input({ required: true }) set control(abstractControl: AbstractControl | null) {\n    // Form controls are passed in as abstract controls, we need to re-cast it.\n    this._control = abstractControl as FormControl;\n  }\n\n  constructor() {\n    afterNextRender(() => {\n      // Only trigger the render of the component in the browser\n      this.configureAutoComplete();\n    });\n  }\n\n  /**\n   * Gets the control for the alphagov-accessible-autocomplete component.\n   * @returns The control for the component.\n   */\n  get getControl() {\n    return this._control;\n  }\n\n  /**\n   * Handles the confirmation of a selected name.\n   *\n   * @param selectedName - The selected name.\n   * @returns void\n   */\n\n  private handleOnConfirm(selectedName: string | undefined): void {\n    // selectedName is populated on selecting an option but is undefined onBlur, so we need to grab the input value directly from the input\n    const control = this._control;\n    const name = selectedName ?? (document.querySelector(`#${this.autoCompleteId}`) as HTMLInputElement).value;\n    const selectedItem = this.autoCompleteItems.find((item) => item.name === name) ?? null;\n    const previousValue = control.value;\n    const selectedValue = selectedItem?.value ?? null;\n\n    control.setValue(selectedValue);\n    control.markAsTouched();\n\n    // Handles initial empty state when the user clicks away from the input\n    if (selectedItem === null && previousValue === null) {\n      control.markAsPristine();\n    } else if (selectedItem?.value !== previousValue) {\n      control.markAsDirty();\n    }\n\n    control.updateValueAndValidity();\n    this.changeDetector.detectChanges();\n  }\n\n  /**\n   * Retrieves the default value for the autocomplete component.\n   *\n   * @returns The default value as a string.\n   */\n\n  private getDefaultValue() {\n    return this.autoCompleteItems.find((item) => item.value === this._control.value)?.name ?? '';\n  }\n\n  /**\n   * Builds the props object for the AccessibleAutocomplete component.\n   * @returns The props object for the AccessibleAutocomplete component.\n   */\n  private buildAutoCompleteProps(): AccessibleAutocompleteProps {\n    return {\n      id: this.autoCompleteId,\n      element: this.autocompleteContainer.nativeElement,\n      source: this.autoCompleteItems.map((item) => item.name),\n      name: this.autoCompleteId,\n      showAllValues: this.showAllValues,\n      defaultValue: this.getDefaultValue(),\n      onConfirm: (selectedName: string) => this.handleOnConfirm(selectedName),\n    };\n  }\n\n  /**\n   * Configures the auto-complete functionality using the accessible-autocomplete library.\n   */\n  private configureAutoComplete(): void {\n    import('accessible-autocomplete').then((accessibleAutocomplete) => {\n      accessibleAutocomplete.default(this.buildAutoCompleteProps());\n    });\n  }\n\n  /**\n   * Sets up the control subscription for value changes.\n   * Whenever the control value changes, this method is called to handle the changes.\n   * If the new value is null, it clears the autocomplete container and configures the autocomplete.\n   */\n  private setupControlSub(): void {\n    this._control.valueChanges\n      .pipe(startWith(null), pairwise(), takeUntil(this.ngUnsubscribe))\n      .subscribe(([prev, next]) => {\n        // If both values are null, we don't need to do anything\n        if (prev === null && next === null) {\n          return;\n        }\n\n        // Otherwise, next is null, we need to clear the autocomplete\n        if (next === null) {\n          this.autocompleteContainer.nativeElement.innerHTML = '';\n          this.configureAutoComplete();\n        }\n      });\n  }\n\n  ngOnInit(): void {\n    this.autoCompleteId = this.inputId + '-autocomplete';\n    this.setupControlSub();\n  }\n\n  ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n  }\n}\n","<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 [id]=\"inputId\" [name]=\"inputName\" type=\"hidden\" [formControl]=\"getControl\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAwBa,uCAAuC,CAAA;AACjC,IAAA,cAAc,GAAsB,MAAM,CAAC,iBAAiB,CAAC;AACtE,IAAA,QAAQ;AACC,IAAA,aAAa,GAAG,IAAI,OAAO,EAAQ;AAEzB,IAAA,SAAS;AACR,IAAA,YAAY;AACb,IAAA,OAAO;AACP,IAAA,SAAS;AACR,IAAA,YAAY;AACZ,IAAA,QAAQ;IACT,iBAAiB,GAA0C,EAAE;IAC/E,aAAa,GAAG,IAAI;IACD,MAAM,GAAkB,IAAI;AAE7B,IAAA,qBAAqB;AAEzC,IAAA,cAAc;IAErB,IAA+B,OAAO,CAAC,eAAuC,EAAA;;AAE5E,QAAA,IAAI,CAAC,QAAQ,GAAG,eAA8B;IAChD;AAEA,IAAA,WAAA,GAAA;QACE,eAAe,CAAC,MAAK;;YAEnB,IAAI,CAAC,qBAAqB,EAAE;AAC9B,QAAA,CAAC,CAAC;IACJ;AAEA;;;AAGG;AACH,IAAA,IAAI,UAAU,GAAA;QACZ,OAAO,IAAI,CAAC,QAAQ;IACtB;AAEA;;;;;AAKG;AAEK,IAAA,eAAe,CAAC,YAAgC,EAAA;;AAEtD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ;AAC7B,QAAA,MAAM,IAAI,GAAG,YAAY,IAAK,QAAQ,CAAC,aAAa,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,cAAc,CAAA,CAAE,CAAsB,CAAC,KAAK;QAC1G,MAAM,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI;AACtF,QAAA,MAAM,aAAa,GAAG,OAAO,CAAC,KAAK;AACnC,QAAA,MAAM,aAAa,GAAG,YAAY,EAAE,KAAK,IAAI,IAAI;AAEjD,QAAA,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC;QAC/B,OAAO,CAAC,aAAa,EAAE;;QAGvB,IAAI,YAAY,KAAK,IAAI,IAAI,aAAa,KAAK,IAAI,EAAE;YACnD,OAAO,CAAC,cAAc,EAAE;QAC1B;AAAO,aAAA,IAAI,YAAY,EAAE,KAAK,KAAK,aAAa,EAAE;YAChD,OAAO,CAAC,WAAW,EAAE;QACvB;QAEA,OAAO,CAAC,sBAAsB,EAAE;AAChC,QAAA,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;IACrC;AAEA;;;;AAIG;IAEK,eAAe,GAAA;QACrB,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,EAAE;IAC9F;AAEA;;;AAGG;IACK,sBAAsB,GAAA;QAC5B,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,cAAc;AACvB,YAAA,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,aAAa;AACjD,YAAA,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC;YACvD,IAAI,EAAE,IAAI,CAAC,cAAc;YACzB,aAAa,EAAE,IAAI,CAAC,aAAa;AACjC,YAAA,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE;YACpC,SAAS,EAAE,CAAC,YAAoB,KAAK,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC;SACxE;IACH;AAEA;;AAEG;IACK,qBAAqB,GAAA;QAC3B,OAAO,yBAAyB,CAAC,CAAC,IAAI,CAAC,CAAC,sBAAsB,KAAI;YAChE,sBAAsB,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC;AAC/D,QAAA,CAAC,CAAC;IACJ;AAEA;;;;AAIG;IACK,eAAe,GAAA;QACrB,IAAI,CAAC,QAAQ,CAAC;AACX,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC;aAC/D,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,KAAI;;YAE1B,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,EAAE;gBAClC;YACF;;AAGA,YAAA,IAAI,IAAI,KAAK,IAAI,EAAE;gBACjB,IAAI,CAAC,qBAAqB,CAAC,aAAa,CAAC,SAAS,GAAG,EAAE;gBACvD,IAAI,CAAC,qBAAqB,EAAE;YAC9B;AACF,QAAA,CAAC,CAAC;IACN;IAEA,QAAQ,GAAA;QACN,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,GAAG,eAAe;QACpD,IAAI,CAAC,eAAe,EAAE;IACxB;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;AACzB,QAAA,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE;IAC/B;uGArIW,uCAAuC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAvC,uCAAuC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA,cAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA,cAAA,EAAA,QAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,uBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxBpD,wrBAiBA,EAAA,MAAA,EAAA,CAAA,+MAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDEY,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,8MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKlB,uCAAuC,EAAA,UAAA,EAAA,CAAA;kBAPnD,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,2CAA2C,WAC5C,CAAC,mBAAmB,CAAC,EAAA,eAAA,EAGb,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,wrBAAA,EAAA,MAAA,EAAA,CAAA,+MAAA,CAAA,EAAA;wDAOpB,SAAS,EAAA,CAAA;sBAAnC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACG,YAAY,EAAA,CAAA;sBAAvC,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;gBACC,OAAO,EAAA,CAAA;sBAAjC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACE,SAAS,EAAA,CAAA;sBAAnC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBACG,YAAY,EAAA,CAAA;sBAAvC,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;gBACE,QAAQ,EAAA,CAAA;sBAAnC,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;gBACC,iBAAiB,EAAA,CAAA;sBAA3C,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAChB,aAAa,EAAA,CAAA;sBAArB;gBAC2B,MAAM,EAAA,CAAA;sBAAjC,KAAK;uBAAC,EAAE,QAAQ,EAAE,KAAK,EAAE;gBAEC,qBAAqB,EAAA,CAAA;sBAA/C,SAAS;uBAAC,cAAc;gBAIM,OAAO,EAAA,CAAA;sBAArC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;;AE3C3B;;AAEG;;;;"}
+{"version":3,"file":"hmcts-opal-frontend-common-components-alphagov-alphagov-accessible-autocomplete.mjs","sources":["../../../projects/opal-frontend-common/components/alphagov/alphagov-accessible-autocomplete/alphagov-accessible-autocomplete.component.ts","../../../projects/opal-frontend-common/components/alphagov/alphagov-accessible-autocomplete/alphagov-accessible-autocomplete.component.html","../../../projects/opal-frontend-common/components/alphagov/alphagov-accessible-autocomplete/hmcts-opal-frontend-common-components-alphagov-alphagov-accessible-autocomplete.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  Input,\n  OnDestroy,\n  OnInit,\n  ViewChild,\n  afterNextRender,\n  inject,\n} from '@angular/core';\nimport { FormControl, AbstractControl, ReactiveFormsModule } from '@angular/forms';\nimport { IAlphagovAccessibleAutocompleteItem } from './interfaces/alphagov-accessible-autocomplete-item.interface';\nimport { AccessibleAutocompleteProps } from 'accessible-autocomplete';\nimport { Subject, pairwise, startWith, takeUntil } from 'rxjs';\n\n@Component({\n  selector: 'opal-lib-alphagov-accessible-autocomplete',\n  imports: [ReactiveFormsModule],\n  templateUrl: './alphagov-accessible-autocomplete.component.html',\n  styleUrl: './alphagov-accessible-autocomplete.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AlphagovAccessibleAutocompleteComponent implements OnInit, OnDestroy {\n  private readonly changeDetector: ChangeDetectorRef = inject(ChangeDetectorRef);\n  private _control!: FormControl;\n  private readonly ngUnsubscribe = new Subject<void>();\n\n  @Input({ required: true }) labelText!: string;\n  @Input({ required: false }) labelClasses!: string;\n  @Input({ required: true }) inputId!: string;\n  @Input({ required: true }) inputName!: string;\n  @Input({ required: false }) inputClasses!: string;\n  @Input({ required: false }) hintText!: string;\n  @Input({ required: true }) autoCompleteItems: IAlphagovAccessibleAutocompleteItem[] = [];\n  @Input() showAllValues = true;\n  @Input({ required: false }) errors: string | null = null;\n\n  @ViewChild('autocomplete') autocompleteContainer!: ElementRef<HTMLElement>;\n\n  public autoCompleteId!: string;\n\n  @Input({ required: true }) set control(abstractControl: AbstractControl | null) {\n    // Form controls are passed in as abstract controls, we need to re-cast it.\n    this._control = abstractControl as FormControl;\n  }\n\n  constructor() {\n    afterNextRender(() => {\n      // Only trigger the render of the component in the browser\n      this.configureAutoComplete();\n    });\n  }\n\n  /**\n   * Gets the control for the alphagov-accessible-autocomplete component.\n   * @returns The control for the component.\n   */\n  get getControl() {\n    return this._control;\n  }\n\n  /**\n   * Handles the confirmation of a selected name.\n   *\n   * @param selectedName - The selected name.\n   * @returns void\n   */\n\n  private handleOnConfirm(selectedName: string | undefined): void {\n    // selectedName is populated on selecting an option but is undefined onBlur, so we need to grab the input value directly from the input\n    const control = this._control;\n    const name = selectedName ?? (document.querySelector(`#${this.autoCompleteId}`) as HTMLInputElement).value;\n    const selectedItem = this.autoCompleteItems.find((item) => item.name === name) ?? null;\n    const previousValue = control.value;\n    const selectedValue = selectedItem?.value ?? null;\n\n    control.setValue(selectedValue);\n    control.markAsTouched();\n\n    // Handles initial empty state when the user clicks away from the input\n    if (selectedItem === null && previousValue === null) {\n      control.markAsPristine();\n    } else if (selectedItem?.value !== previousValue) {\n      control.markAsDirty();\n    }\n\n    control.updateValueAndValidity();\n    this.changeDetector.detectChanges();\n  }\n\n  /**\n   * Retrieves the default value for the autocomplete component.\n   *\n   * @returns The default value as a string.\n   */\n\n  private getDefaultValue() {\n    return this.autoCompleteItems.find((item) => item.value === this._control.value)?.name ?? '';\n  }\n\n  /**\n   * Builds the props object for the AccessibleAutocomplete component.\n   * @returns The props object for the AccessibleAutocomplete component.\n   */\n  private buildAutoCompleteProps(): AccessibleAutocompleteProps {\n    return {\n      id: this.autoCompleteId,\n      element: this.autocompleteContainer.nativeElement,\n      source: this.autoCompleteItems.map((item) => item.name),\n      name: this.autoCompleteId,\n      showAllValues: this.showAllValues,\n      defaultValue: this.getDefaultValue(),\n      dropdownArrow: ({ className }) => this.renderDropdownArrow(className),\n      onConfirm: (selectedName: string) => this.handleOnConfirm(selectedName),\n    };\n  }\n\n  /**\n   * Renders a custom dropdown arrow.\n   * @param className – The class to apply to the SVG.\n   * @returns An SVG string for the dropdown arrow.\n   */\n  private renderDropdownArrow(className: string): string {\n    return `\n   <svg class=\"${className}\" style=\"top: 8px;\" viewBox=\"0 0 512 512\" xmlns=\"http://www.w3.org/2000/svg\">\n            <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\n                    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\n                    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>\n          </svg>`;\n  }\n\n  /**\n   * Configures the auto-complete functionality using the accessible-autocomplete library.\n   */\n  private configureAutoComplete(): void {\n    import('accessible-autocomplete').then((accessibleAutocomplete) => {\n      accessibleAutocomplete.default(this.buildAutoCompleteProps());\n    });\n  }\n\n  /**\n   * Sets up the control subscription for value changes.\n   * Whenever the control value changes, this method is called to handle the changes.\n   * If the new value is null, it clears the autocomplete container and configures the autocomplete.\n   */\n  private setupControlSub(): void {\n    this._control.valueChanges\n      .pipe(startWith(null), pairwise(), takeUntil(this.ngUnsubscribe))\n      .subscribe(([prev, next]) => {\n        // If both values are null, we don't need to do anything\n        if (prev === null && next === null) {\n          return;\n        }\n\n        // Otherwise, next is null, we need to clear the autocomplete\n        if (next === null) {\n          this.autocompleteContainer.nativeElement.innerHTML = '';\n          this.configureAutoComplete();\n        }\n      });\n  }\n\n  ngOnInit(): void {\n    this.autoCompleteId = this.inputId + '-autocomplete';\n    this.setupControlSub();\n  }\n\n  ngOnDestroy(): void {\n    this.ngUnsubscribe.next();\n    this.ngUnsubscribe.complete();\n  }\n}\n","<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 [id]=\"inputId\" [name]=\"inputName\" type=\"hidden\" [formControl]=\"getControl\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/opal-frontend-common",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^18.2.0 || ^19.0.0 || ^20.0.0",