import { Component, EventEmitter, Input, Output } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { RpxTranslationService } from 'rpx-xui-translation';
import { map, tap } from 'rxjs/operators';
import { FlagType } from '../../../../../domain/case-flag';
import { CaseFlagFieldState, SearchLanguageInterpreterErrorMessage, SearchLanguageInterpreterStep } from '../../enums';
import { SearchLanguageInterpreterControlNames } from './search-language-interpreter-control-names.enum';
import { AbstractJourneyComponent } from '../../../base-field';
import { MultipageComponentStateService } from "../../../../../services";
import * as i0 from "@angular/core";
import * as i1 from "rpx-xui-translation";
import * as i2 from "../../../../../services";
const _c0 = a0 => ({ "form-group-error": a0 });
function SearchLanguageInterpreterComponent_div_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 18)(1, "span", 19);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "rpxTranslate");
    i0.ɵɵelementEnd();
    i0.ɵɵtext(4);
    i0.ɵɵpipe(5, "rpxTranslate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.languageNotSelectedErrorMessage), " ");
} }
function SearchLanguageInterpreterComponent_div_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 20)(1, "span", 19);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "rpxTranslate");
    i0.ɵɵelementEnd();
    i0.ɵɵtext(4);
    i0.ɵɵpipe(5, "rpxTranslate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.languageEnteredInBothFieldsErrorMessage), " ");
} }
function SearchLanguageInterpreterComponent_mat_option_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "mat-option", 21);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "languageInterpreterDisplay");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const language_r3 = ctx.$implicit;
    i0.ɵɵproperty("value", language_r3);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, language_r3), " ");
} }
function SearchLanguageInterpreterComponent_mat_option_17_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "mat-option", 22);
    i0.ɵɵtext(1);
    i0.ɵɵpipe(2, "rpxTranslate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, "No results found"));
} }
function SearchLanguageInterpreterComponent_div_24_div_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 28)(1, "span", 19);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "rpxTranslate");
    i0.ɵɵelementEnd();
    i0.ɵɵtext(4);
    i0.ɵɵpipe(5, "rpxTranslate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.languageNotEnteredErrorMessage), " ");
} }
function SearchLanguageInterpreterComponent_div_24_div_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 29)(1, "span", 19);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "rpxTranslate");
    i0.ɵɵelementEnd();
    i0.ɵɵtext(4);
    i0.ɵɵpipe(5, "rpxTranslate");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 2, "Error:"));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(5, 4, ctx_r1.languageCharLimitErrorMessage), " ");
} }
function SearchLanguageInterpreterComponent_div_24_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 23)(1, "div", 2)(2, "label", 24);
    i0.ɵɵtext(3);
    i0.ɵɵpipe(4, "rpxTranslate");
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(5, SearchLanguageInterpreterComponent_div_24_div_5_Template, 6, 6, "div", 25)(6, SearchLanguageInterpreterComponent_div_24_div_6_Template, 6, 6, "div", 26);
    i0.ɵɵelement(7, "input", 27);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(8, _c0, ctx_r1.languageNotEnteredErrorMessage || ctx_r1.languageCharLimitErrorMessage));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 6, ctx_r1.searchLanguageInterpreterStep.INPUT_LABEL));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r1.languageNotEnteredErrorMessage);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r1.languageCharLimitErrorMessage);
    i0.ɵɵadvance();
    i0.ɵɵproperty("name", ctx_r1.SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY)("formControlName", ctx_r1.SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY);
} }
export class SearchLanguageInterpreterComponent extends AbstractJourneyComponent {
    rpxTranslationService;
    get searchLanguageInterpreterStep() {
        return SearchLanguageInterpreterStep;
    }
    SearchLanguageInterpreterControlNames = SearchLanguageInterpreterControlNames;
    formGroup;
    flagType;
    caseFlagStateEmitter = new EventEmitter();
    minSearchCharacters = 3;
    filteredLanguages$;
    searchTerm = '';
    isCheckboxEnabled = false;
    searchLanguageInterpreterHint;
    errorMessages = [];
    languageNotSelectedErrorMessage = '';
    languageNotEnteredErrorMessage = '';
    languageCharLimitErrorMessage = '';
    languageEnteredInBothFieldsErrorMessage = '';
    noResults = false;
    languageMaxCharLimit = 80;
    signLanguageFlagCode = 'RA0042';
    constructor(rpxTranslationService, multipageComponentStateService) {
        super(multipageComponentStateService);
        this.rpxTranslationService = rpxTranslationService;
    }
    ngOnInit() {
        this.searchLanguageInterpreterHint = this.flagType.flagCode === this.signLanguageFlagCode
            ? SearchLanguageInterpreterStep.SIGN_HINT_TEXT
            : SearchLanguageInterpreterStep.HINT_TEXT;
        this.formGroup.addControl(SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM, new FormControl());
        this.formGroup.addControl(SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY, new FormControl());
        this.multipageComponentStateService.getJourneyCollectionMainObject().journeyPageNumber = CaseFlagFieldState.FLAG_LANGUAGE_INTERPRETER;
        this.filteredLanguages$ = this.formGroup.get(SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM).valueChanges.pipe(
        // Need to check type of input because it changes to object (i.e. Language) when a value is selected from the
        // autocomplete panel, instead of string when a value is being typed in
        map(input => typeof input === 'string' ? input : input.value), map(searchTerm => {
            // Update the current search term
            this.searchTerm = searchTerm;
            return this.filterLanguages(searchTerm);
        }), tap(languages => this.noResults = languages.length === 0));
    }
    onNext() {
        // Validate language interpreter entry
        this.validateLanguageEntry();
        // Return case flag field state and error messages to the parent
        this.caseFlagStateEmitter.emit({
            currentCaseFlagFieldState: CaseFlagFieldState.FLAG_LANGUAGE_INTERPRETER,
            errorMessages: this.errorMessages
        });
    }
    onEnterLanguageManually(event) {
        this.isCheckboxEnabled = event.target.checked;
        // If the checkbox is disabled, i.e. unchecked, then clear the manual language entry FormControl of any value to
        // prevent it being retained even when the field itself is hidden
        if (!this.isCheckboxEnabled) {
            this.formGroup.get(SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY).setValue(null);
        }
    }
    displayLanguage(language) {
        return language ? language.value : undefined;
    }
    validateLanguageEntry() {
        this.languageNotSelectedErrorMessage = null;
        this.languageNotEnteredErrorMessage = null;
        this.languageCharLimitErrorMessage = null;
        this.languageEnteredInBothFieldsErrorMessage = null;
        this.errorMessages = [];
        // Checkbox not enabled means the user has opted to search for and select the language
        if (!this.isCheckboxEnabled && !this.formGroup.get(SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM).value) {
            this.languageNotSelectedErrorMessage = SearchLanguageInterpreterErrorMessage.LANGUAGE_NOT_ENTERED;
            this.errorMessages.push({
                title: '',
                description: SearchLanguageInterpreterErrorMessage.LANGUAGE_NOT_ENTERED,
                fieldId: SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM
            });
        }
        // Checkbox enabled means the user has opted to enter the language manually
        if (this.isCheckboxEnabled) {
            if (!this.formGroup.get(SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY).value) {
                this.languageNotEnteredErrorMessage = SearchLanguageInterpreterErrorMessage.LANGUAGE_NOT_ENTERED;
                this.errorMessages.push({
                    title: '',
                    description: SearchLanguageInterpreterErrorMessage.LANGUAGE_NOT_ENTERED,
                    fieldId: SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY
                });
            }
            else if (this.formGroup.get(SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY).value.length > this.languageMaxCharLimit) {
                this.languageCharLimitErrorMessage = SearchLanguageInterpreterErrorMessage.LANGUAGE_CHAR_LIMIT_EXCEEDED;
                this.errorMessages.push({
                    title: '',
                    description: SearchLanguageInterpreterErrorMessage.LANGUAGE_CHAR_LIMIT_EXCEEDED,
                    fieldId: SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY
                });
            }
            else if (this.formGroup.get(SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM).value) {
                // Language entry is permitted in only one field at a time
                this.languageEnteredInBothFieldsErrorMessage = SearchLanguageInterpreterErrorMessage.LANGUAGE_ENTERED_IN_BOTH_FIELDS;
                this.errorMessages.push({
                    title: '',
                    description: SearchLanguageInterpreterErrorMessage.LANGUAGE_ENTERED_IN_BOTH_FIELDS,
                    fieldId: SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM
                });
            }
        }
    }
    filterLanguages(searchTerm) {
        if (searchTerm.length < this.minSearchCharacters) {
            return [];
        }
        return this.flagType.listOfValues
            ? this.flagType.listOfValues.filter(language => 
            // If a language has both English and Welsh values, match only on the value appropriate for the page language,
            // i.e. if RpxTranslationService.language is 'cy' then match on the value_cy property only. This is to prevent
            // cross-matches, where a user enters a search term in English and sees the corresponding Welsh value (because
            // the page language is Welsh) and vice versa
            this.rpxTranslationService.language === 'cy' && language.value && language.value_cy &&
                language.value_cy.toLowerCase().includes(searchTerm.toLowerCase(), 0) ||
                this.rpxTranslationService.language !== 'cy' && language.value && language.value_cy &&
                    language.value.toLowerCase().includes(searchTerm.toLowerCase(), 0) ||
                !language.value_cy && language.value.toLowerCase().includes(searchTerm.toLowerCase(), 0) ||
                !language.value && language.value_cy.toLowerCase().includes(searchTerm.toLowerCase(), 0))
            : [];
    }
    next() {
        this.onNext();
        if (this.errorMessages.length === 0) {
            super.next();
        }
    }
    static ɵfac = function SearchLanguageInterpreterComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchLanguageInterpreterComponent)(i0.ɵɵdirectiveInject(i1.RpxTranslationService), i0.ɵɵdirectiveInject(i2.MultipageComponentStateService)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchLanguageInterpreterComponent, selectors: [["ccd-search-language-interpreter"]], inputs: { formGroup: "formGroup", flagType: "flagType" }, outputs: { caseFlagStateEmitter: "caseFlagStateEmitter" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 25, consts: [["autoSearchLanguage", "matAutocomplete"], [3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], [1, "govuk-label", "govuk-label--m", 3, "for"], ["id", "language-search-box-hint", 1, "govuk-hint"], [1, "auto-complete-container"], ["id", "language-not-selected-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "language-entered-in-both-fields-error-message", "class", "govuk-error-message", 4, "ngIf"], ["aria-label", "Language search box", "matInput", "", "type", "text", 1, "govuk-input", "search-language__input", 3, "formControlName", "matAutocomplete"], ["autoActiveFirstOption", "", 1, "mat-autocomplete-panel-extend", 3, "displayWith"], [3, "value", 4, "ngFor", "ngForOf"], ["disabled", "", 4, "ngIf"], ["data-module", "govuk-checkboxes", 1, "govuk-checkboxes", "govuk-checkboxes--small", "govuk-checkboxes--conditional"], [1, "govuk-radios__item"], ["id", "enter-language-manually", "name", "enter-language-manually", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change"], ["for", "enter-language-manually", 1, "govuk-label", "govuk-checkboxes__label"], ["class", "govuk-radios__conditional", 4, "ngIf"], ["id", "language-not-selected-error-message", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "language-entered-in-both-fields-error-message", 1, "govuk-error-message"], [3, "value"], ["disabled", ""], [1, "govuk-radios__conditional"], ["for", "manual-language-entry", 1, "govuk-label"], ["id", "language-not-entered-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "language-char-limit-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "manual-language-entry", "type", "text", 1, "govuk-input", "govuk-input--width-20", 3, "name", "formControlName"], ["id", "language-not-entered-error-message", 1, "govuk-error-message"], ["id", "language-char-limit-error-message", 1, "govuk-error-message"]], template: function SearchLanguageInterpreterComponent_Template(rf, ctx) { if (rf & 1) {
            const _r1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementContainerStart(0, 1);
            i0.ɵɵelementStart(1, "div", 2)(2, "h1", 3)(3, "label", 4);
            i0.ɵɵtext(4);
            i0.ɵɵpipe(5, "flagFieldDisplay");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(6, "div", 5);
            i0.ɵɵtext(7);
            i0.ɵɵpipe(8, "rpxTranslate");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(9, "div", 6);
            i0.ɵɵtemplate(10, SearchLanguageInterpreterComponent_div_10_Template, 6, 6, "div", 7)(11, SearchLanguageInterpreterComponent_div_11_Template, 6, 6, "div", 8);
            i0.ɵɵelement(12, "input", 9);
            i0.ɵɵelementStart(13, "mat-autocomplete", 10, 0);
            i0.ɵɵtemplate(15, SearchLanguageInterpreterComponent_mat_option_15_Template, 3, 4, "mat-option", 11);
            i0.ɵɵpipe(16, "async");
            i0.ɵɵtemplate(17, SearchLanguageInterpreterComponent_mat_option_17_Template, 3, 3, "mat-option", 12);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(18, "div", 13)(19, "div", 14)(20, "input", 15);
            i0.ɵɵlistener("change", function SearchLanguageInterpreterComponent_Template_input_change_20_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEnterLanguageManually($event)); });
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(21, "label", 16);
            i0.ɵɵtext(22);
            i0.ɵɵpipe(23, "rpxTranslate");
            i0.ɵɵelementEnd()();
            i0.ɵɵtemplate(24, SearchLanguageInterpreterComponent_div_24_Template, 8, 10, "div", 17);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementContainerEnd();
        } if (rf & 2) {
            const autoSearchLanguage_r4 = i0.ɵɵreference(14);
            i0.ɵɵproperty("formGroup", ctx.formGroup);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(23, _c0, ctx.languageNotSelectedErrorMessage || ctx.languageEnteredInBothFieldsErrorMessage));
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("for", ctx.SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM);
            i0.ɵɵadvance();
            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(5, 14, ctx.flagType, "name"), " ");
            i0.ɵɵadvance(3);
            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 17, ctx.searchLanguageInterpreterHint), " ");
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("ngIf", ctx.languageNotSelectedErrorMessage);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.languageEnteredInBothFieldsErrorMessage);
            i0.ɵɵadvance();
            i0.ɵɵproperty("formControlName", ctx.SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM)("matAutocomplete", autoSearchLanguage_r4);
            i0.ɵɵadvance();
            i0.ɵɵproperty("displayWith", ctx.displayLanguage);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(16, 19, ctx.filteredLanguages$));
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.noResults && ctx.searchTerm && ctx.searchTerm.length >= ctx.minSearchCharacters);
            i0.ɵɵadvance(5);
            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 21, ctx.searchLanguageInterpreterStep.CHECKBOX_LABEL), " ");
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.isCheckboxEnabled);
        } }, styles: [".autocomplete__input--show-all-values[_ngcontent-%COMP%]{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down[_ngcontent-%COMP%]{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu[_ngcontent-%COMP%]{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible[_ngcontent-%COMP%]{display:block}.autocomplete__menu--hidden[_ngcontent-%COMP%]{display:none}.autocomplete__menu--overlay[_ngcontent-%COMP%]{box-shadow:#00000042 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline[_ngcontent-%COMP%]{position:relative}.autocomplete__option[_ngcontent-%COMP%]{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option[_ngcontent-%COMP%] > *[_ngcontent-%COMP%]{pointer-events:none}.autocomplete__option[_ngcontent-%COMP%]:first-of-type{border-top-width:0}.autocomplete__option[_ngcontent-%COMP%]:last-of-type{border-bottom-width:0}.autocomplete__option--odd[_ngcontent-%COMP%]{background-color:#fafafa}.autocomplete__option--focused[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results[_ngcontent-%COMP%]{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint[_ngcontent-%COMP%], .autocomplete__input[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]{font-size:13px;line-height:1.25}.autocomplete__hint[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]{padding:5px}@media (min-width: 641px){.autocomplete__hint[_ngcontent-%COMP%], .autocomplete__input[_ngcontent-%COMP%], .autocomplete__option[_ngcontent-%COMP%]{font-size:13px;line-height:1.31579}}.div-action[_ngcontent-%COMP%]{display:inline-block}.add-location[_ngcontent-%COMP%]{display:inline}.remove-location-button[_ngcontent-%COMP%]{margin:5px}.hide-autocomplete[_ngcontent-%COMP%]{display:none}.auto-complete-container[_ngcontent-%COMP%]{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input[_ngcontent-%COMP%]{line-height:24px;font-size:19px}.hidden[_ngcontent-%COMP%]{display:none}.search-language__input[_ngcontent-%COMP%]{position:relative;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='%23505a5f'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center left -2px;background-size:40px 40px;padding-left:35px}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchLanguageInterpreterComponent, [{
        type: Component,
        args: [{ selector: 'ccd-search-language-interpreter', template: "<ng-container [formGroup]=\"formGroup\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': languageNotSelectedErrorMessage || languageEnteredInBothFieldsErrorMessage}\">\n    <h1 class=\"govuk-label-wrapper\">\n      <label class=\"govuk-label govuk-label--m\" [for]=\"SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM\">\n        {{flagType | flagFieldDisplay:'name'}}\n      </label>\n    </h1>\n    <div id=\"language-search-box-hint\" class=\"govuk-hint\">\n      {{searchLanguageInterpreterHint | rpxTranslate}}\n    </div>\n    <div class=\"auto-complete-container\">\n      <div id=\"language-not-selected-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"languageNotSelectedErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageNotSelectedErrorMessage | rpxTranslate}}\n      </div>\n      <div id=\"language-entered-in-both-fields-error-message\" class=\"govuk-error-message\"\n        *ngIf=\"languageEnteredInBothFieldsErrorMessage\">\n        <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageEnteredInBothFieldsErrorMessage | rpxTranslate}}\n      </div>\n      <input aria-label=\"Language search box\" matInput [formControlName]=\"SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM\" [matAutocomplete]=\"autoSearchLanguage\"\n        class=\"govuk-input search-language__input\" type=\"text\">\n      <mat-autocomplete class=\"mat-autocomplete-panel-extend\" autoActiveFirstOption #autoSearchLanguage=\"matAutocomplete\"\n        [displayWith]=\"displayLanguage\">\n        <mat-option *ngFor=\"let language of filteredLanguages$ | async\" [value]=\"language\">\n          {{language | languageInterpreterDisplay}}\n        </mat-option>\n        <mat-option *ngIf=\"noResults && searchTerm && searchTerm.length >= minSearchCharacters\" disabled>{{'No results found' | rpxTranslate}}</mat-option>\n      </mat-autocomplete>\n    </div>\n    <div class=\"govuk-checkboxes govuk-checkboxes--small govuk-checkboxes--conditional\" data-module=\"govuk-checkboxes\">\n      <div class=\"govuk-radios__item\">\n        <input class=\"govuk-checkboxes__input\" id=\"enter-language-manually\" name=\"enter-language-manually\" type=\"checkbox\"\n          (change)=\"onEnterLanguageManually($event)\">\n        <label class=\"govuk-label govuk-checkboxes__label\" for=\"enter-language-manually\">\n          {{searchLanguageInterpreterStep.CHECKBOX_LABEL | rpxTranslate}}\n        </label>\n      </div>\n      <div class=\"govuk-radios__conditional\" *ngIf=\"isCheckboxEnabled\">\n        <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': languageNotEnteredErrorMessage || languageCharLimitErrorMessage }\">\n          <label class=\"govuk-label\" for=\"manual-language-entry\">{{searchLanguageInterpreterStep.INPUT_LABEL | rpxTranslate}}</label>\n          <div id=\"language-not-entered-error-message\" class=\"govuk-error-message\"\n            *ngIf=\"languageNotEnteredErrorMessage\">\n            <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageNotEnteredErrorMessage | rpxTranslate}}\n          </div>\n          <div id=\"language-char-limit-error-message\" class=\"govuk-error-message\"\n            *ngIf=\"languageCharLimitErrorMessage\">\n            <span class=\"govuk-visually-hidden\">{{'Error:' | rpxTranslate}}</span> {{languageCharLimitErrorMessage | rpxTranslate}}\n          </div>\n          <input class=\"govuk-input govuk-input--width-20\" id=\"manual-language-entry\" [name]=\"SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY\" type=\"text\"\n            [formControlName]=\"SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY\">\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", styles: [".autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:#00000042 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width: 641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:13px;line-height:1.31579}}.div-action{display:inline-block}.add-location{display:inline}.remove-location-button{margin:5px}.hide-autocomplete{display:none}.auto-complete-container{min-width:550px;display:inline-block;margin-right:4px}.autocomplete__input{line-height:24px;font-size:19px}.hidden{display:none}.search-language__input{position:relative;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' width='40' height='40'%3E%3Cpath d='M25.7 24.8L21.9 21c.7-1 1.1-2.2 1.1-3.5 0-3.6-2.9-6.5-6.5-6.5S10 13.9 10 17.5s2.9 6.5 6.5 6.5c1.6 0 3-.6 4.1-1.5l3.7 3.7 1.4-1.4zM12 17.5c0-2.5 2-4.5 4.5-4.5s4.5 2 4.5 4.5-2 4.5-4.5 4.5-4.5-2-4.5-4.5z' fill='%23505a5f'%3E%3C/path%3E%3C/svg%3E\");background-repeat:no-repeat;background-position:center left -2px;background-size:40px 40px;padding-left:35px}\n"] }]
    }], () => [{ type: i1.RpxTranslationService }, { type: i2.MultipageComponentStateService }], { formGroup: [{
            type: Input
        }], flagType: [{
            type: Input
        }], caseFlagStateEmitter: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchLanguageInterpreterComponent, { className: "SearchLanguageInterpreterComponent", filePath: "lib/shared/components/palette/case-flag/components/search-language-interpreter/search-language-interpreter.component.ts", lineNumber: 20 }); })();
//# sourceMappingURL=data:application/json;base64, 