import { Component, HostListener, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../toolbar-button-visibility.service";
import * as i2 from "../toolbar-event.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/forms";
import * as i5 from "@angular/router";
import * as i6 from "rpx-xui-translation";
export class SearchBarComponent {
    constructor(toolbarButtons, toolbarEvents) {
        this.toolbarButtons = toolbarButtons;
        this.toolbarEvents = toolbarEvents;
        this.highlightAll = true;
        this.matchCase = false;
        this.wholeWord = false;
        this.resultsText = '';
        this.searchText = '';
        this.resultCount = 0;
        this.subscriptions = [];
        this.advancedSearchVisible = false;
    }
    ngOnInit() {
        this.subscriptions.push(this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results)));
    }
    ngAfterViewInit() {
        this.findInput.nativeElement.focus();
    }
    ngOnDestroy() {
        for (const subscription of this.subscriptions) {
            subscription.unsubscribe();
        }
    }
    onWindowKeyDown(e) {
        if (e.code === 'F3' || (e.ctrlKey && e.code === 'KeyF')) {
            e.preventDefault();
            this.toolbarEvents.searchBarHidden.next(false);
            setTimeout(() => this.findInput.nativeElement.focus(), 200);
        }
    }
    searchNext() {
        this.toolbarEvents.search({
            searchTerm: this.searchText,
            highlightAll: this.highlightAll,
            matchCase: this.matchCase,
            wholeWord: this.wholeWord,
            previous: false,
            reset: false
        });
    }
    searchPrev() {
        this.toolbarEvents.search({
            searchTerm: this.searchText,
            highlightAll: this.highlightAll,
            matchCase: this.matchCase,
            wholeWord: this.wholeWord,
            previous: true,
            reset: false
        });
    }
    search() {
        this.toolbarEvents.search({
            searchTerm: this.searchText,
            highlightAll: this.highlightAll,
            matchCase: this.matchCase,
            wholeWord: this.wholeWord,
            previous: false,
            reset: true
        });
    }
    setSearchResultsCount(results) {
        this.resultCount = results.total;
        this.resultsText = this.resultCount > 0
            ? `Found ${results.current} of ${results.total}`
            : 'No results found';
        if (this.resultCount && this.resultCount > 0 && !results.isPrevious) {
            setTimeout(() => {
                this.findNext.nativeElement.focus();
            }, 1000);
        }
    }
    onEscapeKeyPress(e) {
        this.toolbarEvents.searchBarHidden.next(true);
    }
    onEnterKeyPress(e) {
        this.search();
    }
    toggleAdvancedSearch() {
        this.advancedSearchVisible = !this.advancedSearchVisible;
    }
    toggleSearchBar() {
        this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.ToolbarButtonVisibilityService }, { token: i2.ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchBarComponent, selector: "mv-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }, { propertyName: "findNext", first: true, predicate: ["findNext"], descendants: true }], ngImport: i0, template: "<div\n  class=\"searchbar govuk-!-padding-3\"\n  [hidden]=\"toolbarEvents.searchBarHidden | async\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <input\n        class=\"govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-5 govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Search document\"\n        #findInput\n        [ngModel]=\"searchText\"\n        (ngModelChange)=\"searchText = $event\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n        title=\"Search document\"\n        placeholder=\"Search document for\u2026\"\n        tabindex=\"0\"\n        data-l10n-id=\"find_input\"\n      />\n      <button\n        class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\"\n        data-module=\"govuk-button\"\n        (click)=\"search()\"\n        style=\"position: absolute; top: 40px; right: 10px\"\n      >\n        Search\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span\n        id=\"findResultsCount\"\n        class=\"govuk-!-display-inline-block govuk-!-margin-right-4\"\n        role=\"status\"\n        >{{ resultsText }}</span\n      >\n      <a\n        *ngIf=\"resultCount > 0\"\n        id=\"findPrevious\"\n        [routerLink]=\"[]\"\n        role=\"button\"\n        class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\"\n        title=\"Find the previous occurrence of the phrase\"\n        data-l10n-id=\"find_previous\"\n        >{{ \"Prev\" | rpxTranslate }}</a\n      >\n      <a\n        *ngIf=\"resultCount > 0\"\n        id=\"findNext\"\n        #findNext\n        [routerLink]=\"[]\"\n        role=\"button\"\n        class=\"govuk-link govuk-link--no-visited-state\"\n        (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\"\n        data-l10n-id=\"find_next\"\n        >{{ \"Next\" | rpxTranslate }}</a\n      >\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a\n        [routerLink]=\"[]\"\n        class=\"govuk-link govuk-link--no-visited-state\"\n        role=\"button\"\n        (click)=\"toggleAdvancedSearch()\"\n        title=\"Advanced\"\n        [attr.aria-expanded]=\"advancedSearchVisible\"\n        aria-controls=\"advancedSearchVisible\"\n        data-l10n-id=\"find_advanced\"\n        style=\"position: absolute; top: 95px; right: 15px\"\n        >{{ \"Advanced\" | rpxTranslate }}</a\n      >\n    </div>\n  </div>\n\n  <div\n    id=\"advancedSearchVisible\"\n    class=\"govuk-grid-row\"\n    *ngIf=\"advancedSearchVisible\"\n  >\n    <div class=\"govuk-grid-column-full\">\n      <div\n        class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\"\n      >\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findHighlightAll\"\n                name=\"findHighlightAll\"\n                type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\"\n                [checked]=\"highlightAll\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findHighlightAll\"\n                data-l10n-id=\"find_highlight\"\n              >\n                {{ \"Highlight all\" | rpxTranslate }}\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findMatchCase\"\n                name=\"findMatchCase\"\n                type=\"checkbox\"\n                (change)=\"matchCase = !matchCase; search()\"\n                [checked]=\"matchCase\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findMatchCase\"\n                data-l10n-id=\"find_match_case_label\"\n              >\n                {{ \"Match text (exact case)\" | rpxTranslate }}\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findEntireWord\"\n                name=\"findMatchCase\"\n                type=\"checkbox\"\n                (change)=\"wholeWord = !wholeWord; search()\"\n                [checked]=\"wholeWord\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findEntireWord\"\n                data-l10n-id=\"find_entire_word_label\"\n              >\n                {{ \"Match whole words or sentences\" | rpxTranslate }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <div>\n    <button\n      id=\"mvCloseBtn\"\n      #mvCloseBtn\n      class=\"mv-button searchbar-button--close\"\n      title=\"Close Search\"\n      data-l10n-id=\"mvRedactBtn\"\n      (click)=\"toggleSearchBar()\"\n    ></button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.RpxTranslatePipe, name: "rpxTranslate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mv-search-bar', template: "<div\n  class=\"searchbar govuk-!-padding-3\"\n  [hidden]=\"toolbarEvents.searchBarHidden | async\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <input\n        class=\"govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-5 govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Search document\"\n        #findInput\n        [ngModel]=\"searchText\"\n        (ngModelChange)=\"searchText = $event\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n        title=\"Search document\"\n        placeholder=\"Search document for\u2026\"\n        tabindex=\"0\"\n        data-l10n-id=\"find_input\"\n      />\n      <button\n        class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\"\n        data-module=\"govuk-button\"\n        (click)=\"search()\"\n        style=\"position: absolute; top: 40px; right: 10px\"\n      >\n        Search\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span\n        id=\"findResultsCount\"\n        class=\"govuk-!-display-inline-block govuk-!-margin-right-4\"\n        role=\"status\"\n        >{{ resultsText }}</span\n      >\n      <a\n        *ngIf=\"resultCount > 0\"\n        id=\"findPrevious\"\n        [routerLink]=\"[]\"\n        role=\"button\"\n        class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\"\n        title=\"Find the previous occurrence of the phrase\"\n        data-l10n-id=\"find_previous\"\n        >{{ \"Prev\" | rpxTranslate }}</a\n      >\n      <a\n        *ngIf=\"resultCount > 0\"\n        id=\"findNext\"\n        #findNext\n        [routerLink]=\"[]\"\n        role=\"button\"\n        class=\"govuk-link govuk-link--no-visited-state\"\n        (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\"\n        data-l10n-id=\"find_next\"\n        >{{ \"Next\" | rpxTranslate }}</a\n      >\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a\n        [routerLink]=\"[]\"\n        class=\"govuk-link govuk-link--no-visited-state\"\n        role=\"button\"\n        (click)=\"toggleAdvancedSearch()\"\n        title=\"Advanced\"\n        [attr.aria-expanded]=\"advancedSearchVisible\"\n        aria-controls=\"advancedSearchVisible\"\n        data-l10n-id=\"find_advanced\"\n        style=\"position: absolute; top: 95px; right: 15px\"\n        >{{ \"Advanced\" | rpxTranslate }}</a\n      >\n    </div>\n  </div>\n\n  <div\n    id=\"advancedSearchVisible\"\n    class=\"govuk-grid-row\"\n    *ngIf=\"advancedSearchVisible\"\n  >\n    <div class=\"govuk-grid-column-full\">\n      <div\n        class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\"\n      >\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findHighlightAll\"\n                name=\"findHighlightAll\"\n                type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\"\n                [checked]=\"highlightAll\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findHighlightAll\"\n                data-l10n-id=\"find_highlight\"\n              >\n                {{ \"Highlight all\" | rpxTranslate }}\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findMatchCase\"\n                name=\"findMatchCase\"\n                type=\"checkbox\"\n                (change)=\"matchCase = !matchCase; search()\"\n                [checked]=\"matchCase\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findMatchCase\"\n                data-l10n-id=\"find_match_case_label\"\n              >\n                {{ \"Match text (exact case)\" | rpxTranslate }}\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findEntireWord\"\n                name=\"findMatchCase\"\n                type=\"checkbox\"\n                (change)=\"wholeWord = !wholeWord; search()\"\n                [checked]=\"wholeWord\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findEntireWord\"\n                data-l10n-id=\"find_entire_word_label\"\n              >\n                {{ \"Match whole words or sentences\" | rpxTranslate }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <div>\n    <button\n      id=\"mvCloseBtn\"\n      #mvCloseBtn\n      class=\"mv-button searchbar-button--close\"\n      title=\"Close Search\"\n      data-l10n-id=\"mvRedactBtn\"\n      (click)=\"toggleSearchBar()\"\n    ></button>\n  </div>\n</div>\n" }]
        }], ctorParameters: () => [{ type: i1.ToolbarButtonVisibilityService }, { type: i2.ToolbarEventService }], propDecorators: { findInput: [{
                type: ViewChild,
                args: ['findInput', { static: true }]
            }], findNext: [{
                type: ViewChild,
                args: ['findNext', { static: false }]
            }], onWindowKeyDown: [{
                type: HostListener,
                args: ['window:keydown', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 