@pepperi-addons/ngx-lib 0.4.0-angular14.36 → 0.4.0-angular14.39

package/esm2020/search/search.component.mjs

@@ -1,317 +1,317 @@
-import { Component, Injectable, Input, Output, EventEmitter, ViewChild, } from '@angular/core';
-import { Subject } from 'rxjs';
-import { trigger, state, style, transition, animate, } from '@angular/animations';
-import { FormControl } from '@angular/forms';
-import { PepScreenSizeType, } from '@pepperi-addons/ngx-lib';
-import { debounceTime, takeUntil } from 'rxjs/operators';
-import * as i0 from "@angular/core";
-import * as i1 from "@pepperi-addons/ngx-lib";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/forms";
-import * as i4 from "@angular/material/autocomplete";
-import * as i5 from "@angular/material/core";
-import * as i6 from "@angular/material/button";
-import * as i7 from "@angular/material/form-field";
-import * as i8 from "@angular/material/icon";
-import * as i9 from "@pepperi-addons/ngx-lib/icon";
-import * as i10 from "@angular/material/input";
-import * as i11 from "@ngx-translate/core";
-export class PepSearchComponent {
-    constructor(hostElement, layoutService) {
-        this.hostElement = hostElement;
-        this.layoutService = layoutService;
-        this.triggerOn = 'click';
-        this.autoCompleteTop = 20;
-        this._autoCompleteValues = [];
-        // @Input() shrinkInSmallScreen = true;
-        this._shrink = 'small-screen';
-        this._searchControl = null;
-        this._useAsWebComponent = false;
-        /**
-         * The size of the button.
-         *
-         * @type {PepSizeType}
-         * @memberof PepButtonComponent
-         */
-        this.sizeType = 'md';
-        this.search = new EventEmitter();
-        this.autocompleteChange = new EventEmitter();
-        this.stateChange = new EventEmitter();
-        this._destroyed = new Subject();
-        this.type = 'regular';
-        this.state = 'open';
-        this.lastValue = null;
-        this.showFloatSrcBtn = true;
-        this.isRtl = false;
-        this.isFloating = false;
-        //
-    }
-    set autoCompleteValues(val) {
-        this.type = 'auto-complete';
-        this._autoCompleteValues = val;
-    }
-    get autoCompleteValues() {
-        return this._autoCompleteValues;
-    }
-    set shrink(value) {
-        this._shrink = value;
-        this.setIsFloating();
-    }
-    get shrink() {
-        return this._shrink;
-    }
-    set value(val) {
-        this.createSearchControlIfNotExist();
-        this.searchControl.setValue(val);
-    }
-    get value() {
-        return this.searchControl.value || '';
-    }
-    set searchControl(ctrl) {
-        this._searchControl = ctrl;
-    }
-    get searchControl() {
-        return this._searchControl;
-    }
-    set useAsWebComponent(value) {
-        if (value) {
-            this.exportFunctionsOnHostElement();
-        }
-    }
-    get useAsWebComponent() {
-        return this._useAsWebComponent;
-    }
-    setIsFloating() {
-        if (this.shrink === 'small-screen') {
-            this.isFloating = this.screenSize > PepScreenSizeType.SM;
-        }
-        else if (this.shrink === 'always') {
-            this.isFloating = true;
-        }
-        else { // never
-            this.isFloating = false;
-        }
-    }
-    ngOnInit() {
-        this.layoutService.onResize$.pipe().subscribe((size) => {
-            this.screenSize = size;
-            this.setIsFloating();
-            // Just for the smoote animation
-            if (this.isFloating) {
-                this.showFloatSrcBtn = false;
-                this.showFloatingButton();
-            }
-            else {
-                this.fadeState = 'fadeIn';
-            }
-        });
-        this.isRtl = this.layoutService.isRtl();
-        this.createSearchControlIfNotExist();
-        this.searchControl.valueChanges
-            .pipe(debounceTime(1000), takeUntil(this._destroyed))
-            .subscribe((newValue) => {
-            if (this.type === 'auto-complete') {
-                this.autoCompleteValues = [];
-                if (newValue &&
-                    newValue.length > 2 &&
-                    newValue !== this.lastValue) {
-                    this.autocompleteChange.emit({
-                        value: newValue,
-                        top: this.autoCompleteTop,
-                    });
-                }
-            }
-            else if (this.type === 'regular') {
-                if (this.triggerOn === 'keydown') {
-                    this.emitSearchClick();
-                }
-            }
-        });
-    }
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-    exportFunctionsOnHostElement() {
-        // This is for web component usage for use those functions.
-        this.hostElement.nativeElement.initSearch = this.initSearch.bind(this);
-    }
-    createSearchControlIfNotExist() {
-        if (!this.searchControl) {
-            this.searchControl = new FormControl();
-        }
-    }
-    blur() {
-        setTimeout(() => {
-            this.searchInput.nativeElement.blur();
-        }, 0);
-    }
-    showFloatingButton() {
-        this.fadeState = 'fadeOut';
-        setTimeout(() => {
-            this.stateChange.emit({ state: 'close' });
-            this.showFloatSrcBtn = true;
-        }, 500);
-        // close the phone keyboard
-        this.blur();
-    }
-    initSearch() {
-        this.lastValue = null;
-        this.searchControl.setValue('');
-    }
-    onClearClicked(event) {
-        if (this.type === 'auto-complete') {
-            this.autoCompleteValues = [];
-        }
-        this.initSearch();
-        this.search.emit({ value: '' });
-        event.preventDefault();
-        /*
-        if (this.isFloating) {
-            this.showFloatingButton();
-        } */
-    }
-    onSearchClicked() {
-        if (this.isFloating) {
-            this.triggerSearch();
-        }
-        else {
-            if (this.state === 'open') {
-                this.triggerSearch();
-            }
-            else {
-                this.state = 'open';
-            }
-        }
-    }
-    onFocusout() {
-        if (this.isFloating && this.searchControl.value?.length === 0) {
-            this.showFloatingButton();
-        }
-    }
-    onSearch(event) {
-        // Stop the event propagation - cause we don't want fire two events.
-        event.stopPropagation();
-        this.triggerSearch();
-    }
-    triggerSearch() {
-        if (this.type === 'auto-complete') {
-            this.autoCompleteValues = [];
-        }
-        this.blur();
-        this.emitSearchClick();
-    }
-    animateSearch() {
-        if (this.state === 'open') {
-            this.fadeState =
-                this.fadeState === 'fadeOut' ? 'fadeIn' : 'fadeOut';
-            if (this.fadeState === 'fadeIn') {
-                this.stateChange.emit({ state: 'open' });
-                this.showFloatSrcBtn = false;
-                this.searchInput.nativeElement.focus();
-            }
-        }
-        else {
-            this.fadeState = 'fadeIn';
-        }
-    }
-    // do the emit just when done because of the line break when closing the search
-    // component and showen all other components before
-    animateSearchDone() {
-        if (this.state !== 'open') {
-            this.stateChange.emit({ state: 'close' });
-        }
-    }
-    emitSearchClick() {
-        const value = this.searchControl.value;
-        if (value !== this.lastValue) {
-            this.lastValue = value;
-            this.search.emit({ value });
-        }
-    }
-}
-PepSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSearchComponent, selector: "pep-search", inputs: { triggerOn: "triggerOn", autoCompleteTop: "autoCompleteTop", autoCompleteValues: "autoCompleteValues", shrink: "shrink", value: "value", searchControl: "searchControl", useAsWebComponent: "useAsWebComponent", sizeType: "sizeType" }, outputs: { search: "search", autocompleteChange: "autocompleteChange", stateChange: "stateChange" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n</ng-container> -->\n<ng-container *ngIf=\"shrink !== 'never'; then shrinkBlock; else staticBlock\"></ng-container>\n<ng-template #shrinkBlock>\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\" [ngClass]=\"{ 'pep-floating-search': isFloating}\"\n        [@fadeInOut]=\"fadeState\">\n        <div class=\"pep-search-input\">\n            <ng-container *ngIf=\"type === 'auto-complete'\">\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"type === 'regular'\">\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <button *ngIf=\"isFloating && fadeState !='fadeIn' && showFloatSrcBtn\"\n        class=\"pep-button icon-button {{ sizeType }} weak\" mat-button (click)=\"animateSearch()\">\n        <mat-icon>\n            <pep-icon name=\"system_search\"></pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n<ng-template #staticBlock>\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\">\n        <div class=\"pep-search-input\">\n            <ng-container *ngIf=\"type === 'auto-complete'\">\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"type === 'regular'\">\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #autoCompleteBlock>\n    <mat-form-field appearance=\"outline\">\n        <!-- (@slideInOut.done)=\"animateSearchDone()\" [@slideInOut]=\"state\" -->\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\" results=\"5\"\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" [matAutocomplete]=\"auto\" />\n        <mat-autocomplete #auto=\"matAutocomplete\" class=\"pep-select\">\n            <mat-option *ngFor=\"let value of autoCompleteValues\" [value]=\"value\" (click)=\"triggerSearch()\">\n                {{value}}\n            </mat-option>\n            <mat-option *ngIf=\"autoCompleteValues?.length > autoCompleteTop - 1\" [value]=\"value\"\n                (click)=\"triggerSearch()\">{{ 'SEARCH.MORE_RESULTS' | translate }}</mat-option>\n        </mat-autocomplete>\n        <div matSuffix class=\"flex align-center\">\n            <ng-container *ngIf=\"triggerOn === 'click'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </mat-form-field>\n</ng-template>\n\n<ng-template #regularBlock>\n    <mat-form-field appearance=\"outline\">\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\"\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" (focusout)=\"onFocusout()\" />\n        <div matSuffix class=\"flex align-center\">\n            <ng-container *ngIf=\"triggerOn === 'click'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </mat-form-field>\n</ng-template>\n<ng-template #triggerOnClickBlock>\n    <mat-icon class=\"pep-text-icon pep-pointer\"\n        [ngClass]=\"{'hide-clear-icon' : state == 'close' || searchControl.value?.length === 0}\"\n        (click)=\"onClearClicked($event)\">\n        <pep-icon name=\"system_close\"></pep-icon>\n    </mat-icon>\n    <span class=\"pep-text-icon pep-spacing-element pep-v-separator\"\n        [ngClass]=\"{'hide-clear-icon' : state == 'close' || searchControl.value?.length === 0}\">|</span>\n    <mat-icon class=\"pep-text-icon pep-pointer\" (click)=\"onSearchClicked()\">\n        <pep-icon name=\"system_search\"></pep-icon>\n    </mat-icon>\n</ng-template>\n\n<ng-template #triggerOnKeydownBlock>\n    <ng-container *ngIf=\"searchControl.value?.length > 0; then clearBlock; else searchBlock\"></ng-container>\n    <ng-template #clearBlock>\n        <button class=\"pep-button regular {{ sizeType }}\" mat-button (click)=\"onClearClicked($event)\">\n            <mat-icon>\n                <pep-icon name=\"system_close\"></pep-icon>\n            </mat-icon>\n        </button>\n    </ng-template>\n    <ng-template #searchBlock>\n        <mat-icon class=\"pep-text-icon\">\n            <pep-icon name=\"system_search\"></pep-icon>\n        </mat-icon>\n    </ng-template>\n</ng-template>", styles: [".pep-search-container .pep-search-input .mat-form-field{display:inherit}.pep-search-container .pep-search-input .pep-v-separator{padding:var(--pep-spacing-xs, .25rem) 0;height:100%}.pep-search-container .pep-search-input .pep-text-icon.pep-pointer{cursor:pointer}.pep-search-container .pep-search-input .hide-clear-icon{visibility:hidden}.pep-search-container.pep-floating-search{display:inline-block}.pep-search-container.pep-floating-search.pep-is-action-button-visable{width:calc(100% - (var(--pep-spacing-sm, .5rem) * 2 + var(--pep-spacing-xl, 1.5rem)))}@media (max-width: 599px){.pep-search-container ::ng-deep .mat-button-wrapper{max-width:3.125rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepRtlClassDirective, selector: "[pepRtlClass]" }, { kind: "component", type: i9.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }], animations: [
-        trigger('slideInOut', [
-            state('close', style({
-                width: '0',
-                padding: '0',
-                border: 'none',
-            })),
-            state('open', style({
-                width: 'inherit',
-            })),
-            transition('close => open', animate('500ms ease-in-out')),
-            transition('open => close', animate('500ms ease-in-out')),
-        ]),
-        trigger('fadeInOut', [
-            state('fadeOut', style({
-                opacity: 0,
-                width: '1px',
-            })),
-            state('fadeIn', style({
-                opacity: 1,
-                width: '100%',
-            })),
-            transition('fadeOut => fadeIn', animate(300, style({ opacity: 1, width: '100%' }))),
-            transition('fadeIn => fadeOut', animate(350, style({ opacity: 0, width: '1px' }))),
-        ]),
-    ] });
-PepSearchComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-search', animations: [
-                        trigger('slideInOut', [
-                            state('close', style({
-                                width: '0',
-                                padding: '0',
-                                border: 'none',
-                            })),
-                            state('open', style({
-                                width: 'inherit',
-                            })),
-                            transition('close => open', animate('500ms ease-in-out')),
-                            transition('open => close', animate('500ms ease-in-out')),
-                        ]),
-                        trigger('fadeInOut', [
-                            state('fadeOut', style({
-                                opacity: 0,
-                                width: '1px',
-                            })),
-                            state('fadeIn', style({
-                                opacity: 1,
-                                width: '100%',
-                            })),
-                            transition('fadeOut => fadeIn', animate(300, style({ opacity: 1, width: '100%' }))),
-                            transition('fadeIn => fadeOut', animate(350, style({ opacity: 0, width: '1px' }))),
-                        ]),
-                    ], template: "<!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n</ng-container> -->\n<ng-container *ngIf=\"shrink !== 'never'; then shrinkBlock; else staticBlock\"></ng-container>\n<ng-template #shrinkBlock>\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\" [ngClass]=\"{ 'pep-floating-search': isFloating}\"\n        [@fadeInOut]=\"fadeState\">\n        <div class=\"pep-search-input\">\n            <ng-container *ngIf=\"type === 'auto-complete'\">\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"type === 'regular'\">\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <button *ngIf=\"isFloating && fadeState !='fadeIn' && showFloatSrcBtn\"\n        class=\"pep-button icon-button {{ sizeType }} weak\" mat-button (click)=\"animateSearch()\">\n        <mat-icon>\n            <pep-icon name=\"system_search\"></pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n<ng-template #staticBlock>\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\">\n        <div class=\"pep-search-input\">\n            <ng-container *ngIf=\"type === 'auto-complete'\">\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"type === 'regular'\">\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #autoCompleteBlock>\n    <mat-form-field appearance=\"outline\">\n        <!-- (@slideInOut.done)=\"animateSearchDone()\" [@slideInOut]=\"state\" -->\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\" results=\"5\"\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" [matAutocomplete]=\"auto\" />\n        <mat-autocomplete #auto=\"matAutocomplete\" class=\"pep-select\">\n            <mat-option *ngFor=\"let value of autoCompleteValues\" [value]=\"value\" (click)=\"triggerSearch()\">\n                {{value}}\n            </mat-option>\n            <mat-option *ngIf=\"autoCompleteValues?.length > autoCompleteTop - 1\" [value]=\"value\"\n                (click)=\"triggerSearch()\">{{ 'SEARCH.MORE_RESULTS' | translate }}</mat-option>\n        </mat-autocomplete>\n        <div matSuffix class=\"flex align-center\">\n            <ng-container *ngIf=\"triggerOn === 'click'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </mat-form-field>\n</ng-template>\n\n<ng-template #regularBlock>\n    <mat-form-field appearance=\"outline\">\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\"\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" (focusout)=\"onFocusout()\" />\n        <div matSuffix class=\"flex align-center\">\n            <ng-container *ngIf=\"triggerOn === 'click'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </mat-form-field>\n</ng-template>\n<ng-template #triggerOnClickBlock>\n    <mat-icon class=\"pep-text-icon pep-pointer\"\n        [ngClass]=\"{'hide-clear-icon' : state == 'close' || searchControl.value?.length === 0}\"\n        (click)=\"onClearClicked($event)\">\n        <pep-icon name=\"system_close\"></pep-icon>\n    </mat-icon>\n    <span class=\"pep-text-icon pep-spacing-element pep-v-separator\"\n        [ngClass]=\"{'hide-clear-icon' : state == 'close' || searchControl.value?.length === 0}\">|</span>\n    <mat-icon class=\"pep-text-icon pep-pointer\" (click)=\"onSearchClicked()\">\n        <pep-icon name=\"system_search\"></pep-icon>\n    </mat-icon>\n</ng-template>\n\n<ng-template #triggerOnKeydownBlock>\n    <ng-container *ngIf=\"searchControl.value?.length > 0; then clearBlock; else searchBlock\"></ng-container>\n    <ng-template #clearBlock>\n        <button class=\"pep-button regular {{ sizeType }}\" mat-button (click)=\"onClearClicked($event)\">\n            <mat-icon>\n                <pep-icon name=\"system_close\"></pep-icon>\n            </mat-icon>\n        </button>\n    </ng-template>\n    <ng-template #searchBlock>\n        <mat-icon class=\"pep-text-icon\">\n            <pep-icon name=\"system_search\"></pep-icon>\n        </mat-icon>\n    </ng-template>\n</ng-template>", styles: [".pep-search-container .pep-search-input .mat-form-field{display:inherit}.pep-search-container .pep-search-input .pep-v-separator{padding:var(--pep-spacing-xs, .25rem) 0;height:100%}.pep-search-container .pep-search-input .pep-text-icon.pep-pointer{cursor:pointer}.pep-search-container .pep-search-input .hide-clear-icon{visibility:hidden}.pep-search-container.pep-floating-search{display:inline-block}.pep-search-container.pep-floating-search.pep-is-action-button-visable{width:calc(100% - (var(--pep-spacing-sm, .5rem) * 2 + var(--pep-spacing-xl, 1.5rem)))}@media (max-width: 599px){.pep-search-container ::ng-deep .mat-button-wrapper{max-width:3.125rem}}\n"] }]
-        }, {
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { triggerOn: [{
-                type: Input
-            }], autoCompleteTop: [{
-                type: Input
-            }], autoCompleteValues: [{
-                type: Input
-            }], shrink: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], searchControl: [{
-                type: Input
-            }], useAsWebComponent: [{
-                type: Input
-            }], sizeType: [{
-                type: Input
-            }], search: [{
-                type: Output
-            }], autocompleteChange: [{
-                type: Output
-            }], stateChange: [{
-                type: Output
-            }], searchInput: [{
-                type: ViewChild,
-                args: ['searchInput']
-            }] } });
+import { Component, Injectable, Input, Output, EventEmitter, ViewChild, } from '@angular/core';
+import { Subject } from 'rxjs';
+import { trigger, state, style, transition, animate, } from '@angular/animations';
+import { FormControl } from '@angular/forms';
+import { PepScreenSizeType, } from '@pepperi-addons/ngx-lib';
+import { debounceTime, takeUntil } from 'rxjs/operators';
+import * as i0 from "@angular/core";
+import * as i1 from "@pepperi-addons/ngx-lib";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+import * as i4 from "@angular/material/autocomplete";
+import * as i5 from "@angular/material/core";
+import * as i6 from "@angular/material/button";
+import * as i7 from "@angular/material/form-field";
+import * as i8 from "@angular/material/icon";
+import * as i9 from "@pepperi-addons/ngx-lib/icon";
+import * as i10 from "@angular/material/input";
+import * as i11 from "@ngx-translate/core";
+export class PepSearchComponent {
+    constructor(hostElement, layoutService) {
+        this.hostElement = hostElement;
+        this.layoutService = layoutService;
+        this.triggerOn = 'click';
+        this.autoCompleteTop = 20;
+        this._autoCompleteValues = [];
+        // @Input() shrinkInSmallScreen = true;
+        this._shrink = 'small-screen';
+        this._searchControl = null;
+        this._useAsWebComponent = false;
+        /**
+         * The size of the button.
+         *
+         * @type {PepSizeType}
+         * @memberof PepButtonComponent
+         */
+        this.sizeType = 'md';
+        this.search = new EventEmitter();
+        this.autocompleteChange = new EventEmitter();
+        this.stateChange = new EventEmitter();
+        this._destroyed = new Subject();
+        this.type = 'regular';
+        this.state = 'open';
+        this.lastValue = null;
+        this.showFloatSrcBtn = true;
+        this.isRtl = false;
+        this.isFloating = false;
+        //
+    }
+    set autoCompleteValues(val) {
+        this.type = 'auto-complete';
+        this._autoCompleteValues = val;
+    }
+    get autoCompleteValues() {
+        return this._autoCompleteValues;
+    }
+    set shrink(value) {
+        this._shrink = value;
+        this.setIsFloating();
+    }
+    get shrink() {
+        return this._shrink;
+    }
+    set value(val) {
+        this.createSearchControlIfNotExist();
+        this.searchControl.setValue(val);
+    }
+    get value() {
+        return this.searchControl.value || '';
+    }
+    set searchControl(ctrl) {
+        this._searchControl = ctrl;
+    }
+    get searchControl() {
+        return this._searchControl;
+    }
+    set useAsWebComponent(value) {
+        if (value) {
+            this.exportFunctionsOnHostElement();
+        }
+    }
+    get useAsWebComponent() {
+        return this._useAsWebComponent;
+    }
+    setIsFloating() {
+        if (this.shrink === 'small-screen') {
+            this.isFloating = this.screenSize > PepScreenSizeType.SM;
+        }
+        else if (this.shrink === 'always') {
+            this.isFloating = true;
+        }
+        else { // never
+            this.isFloating = false;
+        }
+    }
+    ngOnInit() {
+        this.layoutService.onResize$.pipe().subscribe((size) => {
+            this.screenSize = size;
+            this.setIsFloating();
+            // Just for the smoote animation
+            if (this.isFloating) {
+                this.showFloatSrcBtn = false;
+                this.showFloatingButton();
+            }
+            else {
+                this.fadeState = 'fadeIn';
+            }
+        });
+        this.isRtl = this.layoutService.isRtl();
+        this.createSearchControlIfNotExist();
+        this.searchControl.valueChanges
+            .pipe(debounceTime(1000), takeUntil(this._destroyed))
+            .subscribe((newValue) => {
+            if (this.type === 'auto-complete') {
+                this.autoCompleteValues = [];
+                if (newValue &&
+                    newValue.length > 2 &&
+                    newValue !== this.lastValue) {
+                    this.autocompleteChange.emit({
+                        value: newValue,
+                        top: this.autoCompleteTop,
+                    });
+                }
+            }
+            else if (this.type === 'regular') {
+                if (this.triggerOn === 'keydown') {
+                    this.emitSearchClick();
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    exportFunctionsOnHostElement() {
+        // This is for web component usage for use those functions.
+        this.hostElement.nativeElement.initSearch = this.initSearch.bind(this);
+    }
+    createSearchControlIfNotExist() {
+        if (!this.searchControl) {
+            this.searchControl = new FormControl();
+        }
+    }
+    blur() {
+        setTimeout(() => {
+            this.searchInput.nativeElement.blur();
+        }, 0);
+    }
+    showFloatingButton() {
+        this.fadeState = 'fadeOut';
+        setTimeout(() => {
+            this.stateChange.emit({ state: 'close' });
+            this.showFloatSrcBtn = true;
+        }, 500);
+        // close the phone keyboard
+        this.blur();
+    }
+    initSearch() {
+        this.lastValue = null;
+        this.searchControl.setValue('');
+    }
+    onClearClicked(event) {
+        if (this.type === 'auto-complete') {
+            this.autoCompleteValues = [];
+        }
+        this.initSearch();
+        this.search.emit({ value: '' });
+        event.preventDefault();
+        /*
+        if (this.isFloating) {
+            this.showFloatingButton();
+        } */
+    }
+    onSearchClicked() {
+        if (this.isFloating) {
+            this.triggerSearch();
+        }
+        else {
+            if (this.state === 'open') {
+                this.triggerSearch();
+            }
+            else {
+                this.state = 'open';
+            }
+        }
+    }
+    onFocusout() {
+        if (this.isFloating && this.searchControl.value?.length === 0) {
+            this.showFloatingButton();
+        }
+    }
+    onSearch(event) {
+        // Stop the event propagation - cause we don't want fire two events.
+        event.stopPropagation();
+        this.triggerSearch();
+    }
+    triggerSearch() {
+        if (this.type === 'auto-complete') {
+            this.autoCompleteValues = [];
+        }
+        this.blur();
+        this.emitSearchClick();
+    }
+    animateSearch() {
+        if (this.state === 'open') {
+            this.fadeState =
+                this.fadeState === 'fadeOut' ? 'fadeIn' : 'fadeOut';
+            if (this.fadeState === 'fadeIn') {
+                this.stateChange.emit({ state: 'open' });
+                this.showFloatSrcBtn = false;
+                this.searchInput.nativeElement.focus();
+            }
+        }
+        else {
+            this.fadeState = 'fadeIn';
+        }
+    }
+    // do the emit just when done because of the line break when closing the search
+    // component and showen all other components before
+    animateSearchDone() {
+        if (this.state !== 'open') {
+            this.stateChange.emit({ state: 'close' });
+        }
+    }
+    emitSearchClick() {
+        const value = this.searchControl.value;
+        if (value !== this.lastValue) {
+            this.lastValue = value;
+            this.search.emit({ value });
+        }
+    }
+}
+PepSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSearchComponent, selector: "pep-search", inputs: { triggerOn: "triggerOn", autoCompleteTop: "autoCompleteTop", autoCompleteValues: "autoCompleteValues", shrink: "shrink", value: "value", searchControl: "searchControl", useAsWebComponent: "useAsWebComponent", sizeType: "sizeType" }, outputs: { search: "search", autocompleteChange: "autocompleteChange", stateChange: "stateChange" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n</ng-container> -->\n<ng-container *ngIf=\"shrink !== 'never'; then shrinkBlock; else staticBlock\"></ng-container>\n<ng-template #shrinkBlock>\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\" [ngClass]=\"{ 'pep-floating-search': isFloating}\"\n        [@fadeInOut]=\"fadeState\">\n        <div class=\"pep-search-input\">\n            <ng-container *ngIf=\"type === 'auto-complete'\">\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"type === 'regular'\">\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <button *ngIf=\"isFloating && fadeState !='fadeIn' && showFloatSrcBtn\"\n        class=\"pep-button icon-button {{ sizeType }} weak\" mat-button (click)=\"animateSearch()\">\n        <mat-icon>\n            <pep-icon name=\"system_search\"></pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n<ng-template #staticBlock>\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\">\n        <div class=\"pep-search-input\">\n            <ng-container *ngIf=\"type === 'auto-complete'\">\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"type === 'regular'\">\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #autoCompleteBlock>\n    <mat-form-field appearance=\"outline\">\n        <!-- (@slideInOut.done)=\"animateSearchDone()\" [@slideInOut]=\"state\" -->\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\" results=\"5\"\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" [matAutocomplete]=\"auto\" />\n        <mat-autocomplete #auto=\"matAutocomplete\" class=\"pep-select\">\n            <mat-option *ngFor=\"let value of autoCompleteValues\" [value]=\"value\" (click)=\"triggerSearch()\">\n                {{value}}\n            </mat-option>\n            <mat-option *ngIf=\"autoCompleteValues?.length > autoCompleteTop - 1\" [value]=\"value\"\n                (click)=\"triggerSearch()\">{{ 'SEARCH.MORE_RESULTS' | translate }}</mat-option>\n        </mat-autocomplete>\n        <div matSuffix class=\"flex align-center\">\n            <ng-container *ngIf=\"triggerOn === 'click'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </mat-form-field>\n</ng-template>\n\n<ng-template #regularBlock>\n    <mat-form-field appearance=\"outline\">\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\"\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" (focusout)=\"onFocusout()\" />\n        <div matSuffix class=\"flex align-center\">\n            <ng-container *ngIf=\"triggerOn === 'click'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </mat-form-field>\n</ng-template>\n<ng-template #triggerOnClickBlock>\n    <mat-icon class=\"pep-text-icon pep-pointer\"\n        [ngClass]=\"{'hide-clear-icon' : state == 'close' || searchControl.value?.length === 0}\"\n        (click)=\"onClearClicked($event)\">\n        <pep-icon name=\"system_close\"></pep-icon>\n    </mat-icon>\n    <span class=\"pep-text-icon pep-spacing-element pep-v-separator\"\n        [ngClass]=\"{'hide-clear-icon' : state == 'close' || searchControl.value?.length === 0}\">|</span>\n    <mat-icon class=\"pep-text-icon pep-pointer\" (click)=\"onSearchClicked()\">\n        <pep-icon name=\"system_search\"></pep-icon>\n    </mat-icon>\n</ng-template>\n\n<ng-template #triggerOnKeydownBlock>\n    <ng-container *ngIf=\"searchControl.value?.length > 0; then clearBlock; else searchBlock\"></ng-container>\n    <ng-template #clearBlock>\n        <button class=\"pep-button regular {{ sizeType }}\" mat-button (click)=\"onClearClicked($event)\">\n            <mat-icon>\n                <pep-icon name=\"system_close\"></pep-icon>\n            </mat-icon>\n        </button>\n    </ng-template>\n    <ng-template #searchBlock>\n        <mat-icon class=\"pep-text-icon\">\n            <pep-icon name=\"system_search\"></pep-icon>\n        </mat-icon>\n    </ng-template>\n</ng-template>", styles: [".pep-search-container .pep-search-input .mat-form-field{display:inherit}.pep-search-container .pep-search-input .pep-v-separator{padding:var(--pep-spacing-xs, .25rem) 0;height:100%}.pep-search-container .pep-search-input .pep-text-icon.pep-pointer{cursor:pointer}.pep-search-container .pep-search-input .hide-clear-icon{visibility:hidden}.pep-search-container.pep-floating-search{display:inline-block}.pep-search-container.pep-floating-search.pep-is-action-button-visable{width:calc(100% - (var(--pep-spacing-sm, .5rem) * 2 + var(--pep-spacing-xl, 1.5rem)))}@media (max-width: 599px){.pep-search-container ::ng-deep .mat-button-wrapper{max-width:3.125rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.PepRtlClassDirective, selector: "[pepRtlClass]" }, { kind: "component", type: i9.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }], animations: [
+        trigger('slideInOut', [
+            state('close', style({
+                width: '0',
+                padding: '0',
+                border: 'none',
+            })),
+            state('open', style({
+                width: 'inherit',
+            })),
+            transition('close => open', animate('500ms ease-in-out')),
+            transition('open => close', animate('500ms ease-in-out')),
+        ]),
+        trigger('fadeInOut', [
+            state('fadeOut', style({
+                opacity: 0,
+                width: '1px',
+            })),
+            state('fadeIn', style({
+                opacity: 1,
+                width: '100%',
+            })),
+            transition('fadeOut => fadeIn', animate(300, style({ opacity: 1, width: '100%' }))),
+            transition('fadeIn => fadeOut', animate(350, style({ opacity: 0, width: '1px' }))),
+        ]),
+    ] });
+PepSearchComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-search', animations: [
+                        trigger('slideInOut', [
+                            state('close', style({
+                                width: '0',
+                                padding: '0',
+                                border: 'none',
+                            })),
+                            state('open', style({
+                                width: 'inherit',
+                            })),
+                            transition('close => open', animate('500ms ease-in-out')),
+                            transition('open => close', animate('500ms ease-in-out')),
+                        ]),
+                        trigger('fadeInOut', [
+                            state('fadeOut', style({
+                                opacity: 0,
+                                width: '1px',
+                            })),
+                            state('fadeIn', style({
+                                opacity: 1,
+                                width: '100%',
+                            })),
+                            transition('fadeOut => fadeIn', animate(300, style({ opacity: 1, width: '100%' }))),
+                            transition('fadeIn => fadeOut', animate(350, style({ opacity: 0, width: '1px' }))),
+                        ]),
+                    ], template: "<!-- <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false, hasParent: false }\">\n</ng-container> -->\n<ng-container *ngIf=\"shrink !== 'never'; then shrinkBlock; else staticBlock\"></ng-container>\n<ng-template #shrinkBlock>\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\" [ngClass]=\"{ 'pep-floating-search': isFloating}\"\n        [@fadeInOut]=\"fadeState\">\n        <div class=\"pep-search-input\">\n            <ng-container *ngIf=\"type === 'auto-complete'\">\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"type === 'regular'\">\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n    <button *ngIf=\"isFloating && fadeState !='fadeIn' && showFloatSrcBtn\"\n        class=\"pep-button icon-button {{ sizeType }} weak\" mat-button (click)=\"animateSearch()\">\n        <mat-icon>\n            <pep-icon name=\"system_search\"></pep-icon>\n        </mat-icon>\n    </button>\n</ng-template>\n<ng-template #staticBlock>\n    <div pepRtlClass class=\"pep-search-container {{ sizeType }}\">\n        <div class=\"pep-search-input\">\n            <ng-container *ngIf=\"type === 'auto-complete'\">\n                <ng-container *ngTemplateOutlet=\"autoCompleteBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"type === 'regular'\">\n                <ng-container *ngTemplateOutlet=\"regularBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #autoCompleteBlock>\n    <mat-form-field appearance=\"outline\">\n        <!-- (@slideInOut.done)=\"animateSearchDone()\" [@slideInOut]=\"state\" -->\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\" results=\"5\"\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" [matAutocomplete]=\"auto\" />\n        <mat-autocomplete #auto=\"matAutocomplete\" class=\"pep-select\">\n            <mat-option *ngFor=\"let value of autoCompleteValues\" [value]=\"value\" (click)=\"triggerSearch()\">\n                {{value}}\n            </mat-option>\n            <mat-option *ngIf=\"autoCompleteValues?.length > autoCompleteTop - 1\" [value]=\"value\"\n                (click)=\"triggerSearch()\">{{ 'SEARCH.MORE_RESULTS' | translate }}</mat-option>\n        </mat-autocomplete>\n        <div matSuffix class=\"flex align-center\">\n            <ng-container *ngIf=\"triggerOn === 'click'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </mat-form-field>\n</ng-template>\n\n<ng-template #regularBlock>\n    <mat-form-field appearance=\"outline\">\n        <input #searchInput class=\"body-sm pep-search-input\" matInput autocomplete=\"off\"\n            [ngStyle]=\"{ textAlign: isRtl ? 'right' : 'left' }\" type=\"text\" (keyup.enter)=\"onSearch($event)\"\n            [formControl]=\"searchControl\" placeholder=\"{{ 'SEARCH.HINT' | translate }}...\" (focusout)=\"onFocusout()\" />\n        <div matSuffix class=\"flex align-center\">\n            <ng-container *ngIf=\"triggerOn === 'click'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnClickBlock\"></ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"triggerOn === 'keydown'\">\n                <ng-container *ngTemplateOutlet=\"triggerOnKeydownBlock\"></ng-container>\n            </ng-container>\n        </div>\n    </mat-form-field>\n</ng-template>\n<ng-template #triggerOnClickBlock>\n    <mat-icon class=\"pep-text-icon pep-pointer\"\n        [ngClass]=\"{'hide-clear-icon' : state == 'close' || searchControl.value?.length === 0}\"\n        (click)=\"onClearClicked($event)\">\n        <pep-icon name=\"system_close\"></pep-icon>\n    </mat-icon>\n    <span class=\"pep-text-icon pep-spacing-element pep-v-separator\"\n        [ngClass]=\"{'hide-clear-icon' : state == 'close' || searchControl.value?.length === 0}\">|</span>\n    <mat-icon class=\"pep-text-icon pep-pointer\" (click)=\"onSearchClicked()\">\n        <pep-icon name=\"system_search\"></pep-icon>\n    </mat-icon>\n</ng-template>\n\n<ng-template #triggerOnKeydownBlock>\n    <ng-container *ngIf=\"searchControl.value?.length > 0; then clearBlock; else searchBlock\"></ng-container>\n    <ng-template #clearBlock>\n        <button class=\"pep-button regular {{ sizeType }}\" mat-button (click)=\"onClearClicked($event)\">\n            <mat-icon>\n                <pep-icon name=\"system_close\"></pep-icon>\n            </mat-icon>\n        </button>\n    </ng-template>\n    <ng-template #searchBlock>\n        <mat-icon class=\"pep-text-icon\">\n            <pep-icon name=\"system_search\"></pep-icon>\n        </mat-icon>\n    </ng-template>\n</ng-template>", styles: [".pep-search-container .pep-search-input .mat-form-field{display:inherit}.pep-search-container .pep-search-input .pep-v-separator{padding:var(--pep-spacing-xs, .25rem) 0;height:100%}.pep-search-container .pep-search-input .pep-text-icon.pep-pointer{cursor:pointer}.pep-search-container .pep-search-input .hide-clear-icon{visibility:hidden}.pep-search-container.pep-floating-search{display:inline-block}.pep-search-container.pep-floating-search.pep-is-action-button-visable{width:calc(100% - (var(--pep-spacing-sm, .5rem) * 2 + var(--pep-spacing-xl, 1.5rem)))}@media (max-width: 599px){.pep-search-container ::ng-deep .mat-button-wrapper{max-width:3.125rem}}\n"] }]
+        }, {
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { triggerOn: [{
+                type: Input
+            }], autoCompleteTop: [{
+                type: Input
+            }], autoCompleteValues: [{
+                type: Input
+            }], shrink: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], searchControl: [{
+                type: Input
+            }], useAsWebComponent: [{
+                type: Input
+            }], sizeType: [{
+                type: Input
+            }], search: [{
+                type: Output
+            }], autocompleteChange: [{
+                type: Output
+            }], stateChange: [{
+                type: Output
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }] } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VhcmNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1saWIvc2VhcmNoL3NlYXJjaC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbGliL3NlYXJjaC9zZWFyY2guY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNILFNBQVMsRUFFVCxVQUFVLEVBQ1YsS0FBSyxFQUVMLE1BQU0sRUFDTixZQUFZLEVBQ1osU0FBUyxHQUVaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUNILE9BQU8sRUFDUCxLQUFLLEVBQ0wsS0FBSyxFQUNMLFVBQVUsRUFDVixPQUFPLEdBQ1YsTUFBTSxxQkFBcUIsQ0FBQztBQUM3QixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUVILGlCQUFpQixHQUVwQixNQUFNLHlCQUF5QixDQUFDO0FBQ2pDLE9BQU8sRUFBRSxZQUFZLEVBQUUsU0FBUyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7Ozs7Ozs7Ozs7QUE0RHpELE1BQU0sT0FBTyxrQkFBa0I7SUFpRjNCLFlBQ1ksV0FBdUIsRUFDdkIsYUFBK0I7UUFEL0IsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFDdkIsa0JBQWEsR0FBYixhQUFhLENBQWtCO1FBbEZsQyxjQUFTLEdBQXlCLE9BQU8sQ0FBQztRQUMxQyxvQkFBZSxHQUFHLEVBQUUsQ0FBQztRQUN0Qix3QkFBbUIsR0FBRyxFQUFFLENBQUM7UUFVakMsdUNBQXVDO1FBRS9CLFlBQU8sR0FBd0IsY0FBYyxDQUFDO1FBbUI5QyxtQkFBYyxHQUFnQixJQUFJLENBQUM7UUFTbkMsdUJBQWtCLEdBQUcsS0FBSyxDQUFDO1FBV25DOzs7OztXQUtHO1FBQ00sYUFBUSxHQUFnQixJ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Z0NBQ1YsS0FBSyxFQUFFLEtBQUs7NkJBQ2YsQ0FBQyxDQUNMOzRCQUNELEtBQUssQ0FDRCxRQUFRLEVBQ1IsS0FBSyxDQUFDO2dDQUNGLE9BQU8sRUFBRSxDQUFDO2dDQUNWLEtBQUssRUFBRSxNQUFNOzZCQUNoQixDQUFDLENBQ0w7NEJBQ0QsVUFBVSxDQUNOLG1CQUFtQixFQUNuQixPQUFPLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxDQUFDLENBQUMsQ0FDckQ7NEJBQ0QsVUFBVSxDQUNOLG1CQUFtQixFQUNuQixPQUFPLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxFQUFFLE9BQU8sRUFBRSxDQUFDLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FDcEQ7eUJBQ0osQ0FBQztxQkFDTDs7a0JBRUosVUFBVTtnSUFFRSxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGVBQWU7c0JBQXZCLEtBQUs7Z0JBR0Ysa0JBQWtCO3NCQURyQixLQUFLO2dCQWFGLE1BQU07c0JBRFQsS0FBSztnQkFVRixLQUFLO3NCQURSLEtBQUs7Z0JBV0YsYUFBYTtzQkFEaEIsS0FBSztnQkFVRixpQkFBaUI7c0JBRHBCLEtBQUs7Z0JBZ0JHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBR04sTUFBTTtzQkFETCxNQUFNO2dCQUdQLGtCQUFrQjtzQkFEakIsTUFBTTtnQkFHUCxXQUFXO3NCQURWLE1BQU07Z0JBR21CLFdBQVc7c0JBQXBDLFNBQVM7dUJBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LFxuICAgIE9uSW5pdCxcbiAgICBJbmplY3RhYmxlLFxuICAgIElucHV0LFxuICAgIE9uRGVzdHJveSxcbiAgICBPdXRwdXQsXG4gICAgRXZlbnRFbWl0dGVyLFxuICAgIFZpZXdDaGlsZCxcbiAgICBFbGVtZW50UmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7XG4gICAgdHJpZ2dlcixcbiAgICBzdGF0ZSxcbiAgICBzdHlsZSxcbiAgICB0cmFuc2l0aW9uLFxuICAgIGFuaW1hdGUsXG59IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuaW1wb3J0IHsgRm9ybUNvbnRyb2wgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQge1xuICAgIFBlcExheW91dFNlcnZpY2UsXG4gICAgUGVwU2NyZWVuU2l6ZVR5cGUsXG4gICAgUGVwU2l6ZVR5cGUsXG59IGZyb20gJ0BwZXBwZXJpLWFkZG9ucy9uZ3gtbGliJztcbmltcG9ydCB7IGRlYm91bmNlVGltZSwgdGFrZVVudGlsIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHtcbiAgICBJUGVwU2VhcmNoQ2xpY2tFdmVudCxcbiAgICBJUGVwU2VhcmNoQXV0b2NvbXBsZXRlQ2hhbmdlRXZlbnQsXG4gICAgSVBlcFNlYXJjaFN0YXRlQ2hhbmdlRXZlbnQsXG4gICAgUGVwU2VhcmNoVHlwZSxcbiAgICBQZXBTZWFyY2hUcmlnZ2VyVHlwZSxcbiAgICBQZXBTZWFyY2hTaHJpbmtUeXBlLFxufSBmcm9tICcuL3NlYXJjaC5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAncGVwLXNlYXJjaCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NlYXJjaC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc2VhcmNoLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgYW5pbWF0aW9uczogW1xuICAgICAgICB0cmlnZ2VyKCdzbGlkZUluT3V0JywgW1xuICAgICAgICAgICAgc3RhdGUoXG4gICAgICAgICAgICAgICAgJ2Nsb3NlJyxcbiAgICAgICAgICAgICAgICBzdHlsZSh7XG4gICAgICAgICAgICAgICAgICAgIHdpZHRoOiAnMCcsXG4gICAgICAgICAgICAgICAgICAgIHBhZGRpbmc6ICcwJyxcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyOiAnbm9uZScsXG4gICAgICAgICAgICAgICAgfSlcbiAgICAgICAgICAgICksXG4gICAgICAgICAgICBzdGF0ZShcbiAgICAgICAgICAgICAgICAnb3BlbicsXG4gICAgICAgICAgICAgICAgc3R5bGUoe1xuICAgICAgICAgICAgICAgICAgICB3aWR0aDogJ2luaGVyaXQnLFxuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICApLFxuICAgICAgICAgICAgdHJhbnNpdGlvbignY2xvc2UgPT4gb3BlbicsIGFuaW1hdGUoJzUwMG1zIGVhc2UtaW4tb3V0JykpLFxuICAgICAgICAgICAgdHJhbnNpdGlvbignb3BlbiA9PiBjbG9zZScsIGFuaW1hdGUoJzUwMG1zIGVhc2UtaW4tb3V0JykpLFxuICAgICAgICBdKSxcbiAgICAgICAgdHJpZ2dlcignZmFkZUluT3V0JywgW1xuICAgICAgICAgICAgc3RhdGUoXG4gICAgICAgICAgICAgICAgJ2ZhZGVPdXQnLFxuICAgICAgICAgICAgICAgIHN0eWxlKHtcbiAgICAgICAgICAgICAgICAgICAgb3BhY2l0eTogMCxcbiAgICAgICAgICAgICAgICAgICAgd2lkdGg6ICcxcHgnLFxuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICApLFxuICAgICAgICAgICAgc3RhdGUoXG4gICAgICAgICAgICAgICAgJ2ZhZGVJbicsXG4gICAgICAgICAgICAgICAgc3R5bGUoe1xuICAgICAgICAgICAgICAgICAgICBvcGFjaXR5OiAxLFxuICAgICAgICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAgICAgICAgIH0pXG4gICAgICAgICAgICApLFxuICAgICAgICAgICAgdHJhbnNpdGlvbihcbiAgICAgICAgICAgICAgICAnZmFkZU91dCA9PiBmYWRlSW4nLFxuICAgICAgICAgICAgICAgIGFuaW1hdGUoMzAwLCBzdHlsZSh7IG9wYWNpdHk6IDEsIHdpZHRoOiAnMTAwJScgfSkpXG4gICAgICAgICAgICApLFxuICAgICAgICAgICAgdHJhbnNpdGlvbihcbiAgICAgICAgICAgICAgICAnZmFkZUluID0+IGZhZGVPdXQnLFxuICAgICAgICAgICAgICAgIGFuaW1hdGUoMzUwLCBzdHlsZSh7IG9wYWNpdHk6IDAsIHdpZHRoOiAnMXB4JyB9KSlcbiAgICAgICAgICAgICksXG4gICAgICAgIF0pLFxuICAgIF0sXG59KVxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIFBlcFNlYXJjaENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgICBASW5wdXQoKSB0cmlnZ2VyT246IFBlcFNlYXJjaFRyaWdnZXJUeXBlID0gJ2NsaWNrJztcbiAgICBASW5wdXQoKSBhdXRvQ29tcGxldGVUb3AgPSAyMDtcbiAgICBwcml2YXRlIF9hdXRvQ29tcGxldGVWYWx1ZXMgPSBbXTtcbiAgICBASW5wdXQoKVxuICAgIHNldCBhdXRvQ29tcGxldGVWYWx1ZXModmFsOiBhbnlbXSkge1xuICAgICAgICB0aGlzLnR5cGUgPSAnYXV0by1jb21wbGV0ZSc7XG4gICAgICAgIHRoaXMuX2F1dG9Db21wbGV0ZVZhbHVlcyA9IHZhbDtcbiAgICB9XG4gICAgZ2V0IGF1dG9Db21wbGV0ZVZhbHVlcygpOiBhbnlbXSB7XG4gICAgICAgIHJldHVybiB0aGlzLl9hdXRvQ29tcGxldGVWYWx1ZXM7XG4gICAgfVxuXG4gICAgLy8gQElucHV0KCkgc2hyaW5rSW5TbWFsbFNjcmVlbiA9IHRydWU7XG5cbiAgICBwcml2YXRlIF9zaHJpbms6IFBlcFNlYXJjaFNocmlua1R5cGUgPSAnc21hbGwtc2NyZWVuJztcbiAgICBASW5wdXQoKVxuICAgIHNldCBzaHJpbmsodmFsdWU6IFBlcFNlYXJjaFNocmlua1R5cGUpIHtcbiAgICAgICAgdGhpcy5fc2hyaW5rID0gdmFsdWU7XG4gICAgICAgIHRoaXMuc2V0SXNGbG9hdGluZygpXG4gICAgfVxuICAgIGdldCBzaHJpbmsoKTogUGVwU2VhcmNoU2hyaW5rVHlwZSB7XG4gICAgICAgIHJldHVybiB0aGlzLl9zaHJpbms7XG4gICAgfVxuXG4gICAgQElucHV0KClcbiAgICBzZXQgdmFsdWUodmFsOiBzdHJpbmcpIHtcbiAgICAgICAgdGhpcy5jcmVhdGVTZWFyY2hDb250cm9sSWZOb3RFeGlzdCgpO1xuICAgICAgICB0aGlzLnNlYXJjaENvbnRyb2wuc2V0VmFsdWUodmFsKTtcbiAgICB9XG4gICAgZ2V0IHZhbHVlKCk6IHN0cmluZyB7XG4gICAgICAgIHJldHVybiB0aGlzLnNlYXJjaENvbnRyb2wudmFsdWUgfHwgJyc7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBfc2VhcmNoQ29udHJvbDogRm9ybUNvbnRyb2wgPSBudWxsO1xuICAgIEBJbnB1dCgpXG4gICAgc2V0IHNlYXJjaENvbnRyb2woY3RybDogRm9ybUNvbnRyb2wpIHtcbiAgICAgICAgdGhpcy5fc2VhcmNoQ29udHJvbCA9IGN0cmw7XG4gICAgfVxuICAgIGdldCBzZWFyY2hDb250cm9sKCk6IEZvcm1Db250cm9sIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3NlYXJjaENvbnRyb2w7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBfdXNlQXNXZWJDb21wb25lbnQgPSBmYWxzZTtcbiAgICBASW5wdXQoKVxuICAgIHNldCB1c2VBc1dlYkNvbXBvbmVudCh2YWx1ZTogYm9vbGVhbikge1xuICAgICAgICBpZiAodmFsdWUpIHtcbiAgICAgICAgICAgIHRoaXMuZXhwb3J0RnVuY3Rpb25zT25Ib3N0RWxlbWVudCgpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGdldCB1c2VBc1dlYkNvbXBvbmVudCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3VzZUFzV2ViQ29tcG9uZW50O1xuICAgIH1cblxuICAgIC8qKlxuICAgICAqIFRoZSBzaXplIG9mIHRoZSBidXR0b24uXG4gICAgICpcbiAgICAgKiBAdHlwZSB7UGVwU2l6ZVR5cGV9XG4gICAgICogQG1lbWJlcm9mIFBlcEJ1dHRvbkNvbXBvbmVudFxuICAgICAqL1xuICAgIEBJbnB1dCgpIHNpemVUeXBlOiBQZXBTaXplVHlwZSA9ICdtZCc7XG5cbiAgICBAT3V0cHV0KClcbiAgICBzZWFyY2g6IEV2ZW50RW1pdHRlcjxJUGVwU2VhcmNoQ2xpY2tFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPElQZXBTZWFyY2hDbGlja0V2ZW50PigpO1xuICAgIEBPdXRwdXQoKVxuICAgIGF1dG9jb21wbGV0ZUNoYW5nZTogRXZlbnRFbWl0dGVyPElQZXBTZWFyY2hBdXRvY29tcGxldGVDaGFuZ2VFdmVudD4gPSBuZXcgRXZlbnRFbWl0dGVyPElQZXBTZWFyY2hBdXRvY29tcGxldGVDaGFuZ2VFdmVudD4oKTtcbiAgICBAT3V0cHV0KClcbiAgICBzdGF0ZUNoYW5nZTogRXZlbnRFbWl0dGVyPElQZXBTZWFyY2hTdGF0ZUNoYW5nZUV2ZW50PiA9IG5ldyBFdmVudEVtaXR0ZXI8SVBlcFNlYXJjaFN0YXRlQ2hhbmdlRXZlbnQ+KCk7XG5cbiAgICBAVmlld0NoaWxkKCdzZWFyY2hJbnB1dCcpIHNlYXJjaElucHV0OiBFbGVtZW50UmVmO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBfZGVzdHJveWVkID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcbiAgICB0eXBlOiBQZXBTZWFyY2hUeXBlID0gJ3JlZ3VsYXInO1xuICAgIGZhZGVTdGF0ZTogJ2ZhZGVPdXQnIHwgJ2ZhZGVJbic7XG4gICAgc3RhdGU6ICdvcGVuJyB8ICdjbG9zZScgPSAnb3Blbic7XG4gICAgbGFzdFZhbHVlID0gbnVsbDtcbiAgICBzaG93RmxvYXRTcmNCdG4gPSB0cnVlO1xuICAgIGlzUnRsID0gZmFsc2U7XG4gICAgaXNGbG9hdGluZyA9IGZhbHNlO1xuICAgIHNjcmVlblNpemU6IFBlcFNjcmVlblNpemVUeXBlO1xuXG4gICAgY29uc3RydWN0b3IoXG4gICAgICAgIHByaXZhdGUgaG9zdEVsZW1lbnQ6IEVsZW1lbnRSZWYsXG4gICAgICAgIHByaXZhdGUgbGF5b3V0U2VydmljZTogUGVwTGF5b3V0U2VydmljZVxuICAgICkge1xuICAgICAgICAvL1xuICAgIH1cblxuICAgIHByaXZhdGUgc2V0SXNGbG9hdGluZygpIHtcbiAgICAgICAgaWYgKHRoaXMuc2hyaW5rID09PSAnc21hbGwtc2NyZWVuJykge1xuICAgICAgICAgICAgdGhpcy5pc0Zsb2F0aW5nID0gdGhpcy5zY3JlZW5TaXplID4gUGVwU2NyZWVuU2l6ZVR5cGUuU007XG4gICAgICAgIH0gZWxzZSBpZiAodGhpcy5zaHJpbmsgPT09ICdhbHdheXMnKSB7XG4gICAgICAgICAgICB0aGlzLmlzRmxvYXRpbmcgPSB0cnVlO1xuICAgICAgICB9IGVsc2UgeyAvLyBuZXZlclxuICAgICAgICAgICAgdGhpcy5pc0Zsb2F0aW5nID0gZmFsc2U7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5sYXlvdXRTZXJ2aWNlLm9uUmVzaXplJC5waXBlKCkuc3Vic2NyaWJlKChzaXplKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnNjcmVlblNpemUgPSBzaXplO1xuICAgICAgICAgICAgdGhpcy5zZXRJc0Zsb2F0aW5nKCk7XG5cbiAgICAgICAgICAgIC8vIEp1c3QgZm9yIHRoZSBzbW9vdGUgYW5pbWF0aW9uXG4gICAgICAgICAgICBpZiAodGhpcy5pc0Zsb2F0aW5nKSB7XG4gICAgICAgICAgICAgICAgdGhpcy5zaG93RmxvYXRTcmNCdG4gPSBmYWxzZTtcblxuICAgICAgICAgICAgICAgIHRoaXMuc2hvd0Zsb2F0aW5nQnV0dG9uKCk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIHRoaXMuZmFkZVN0YXRlID0gJ2ZhZGVJbic7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0pO1xuXG4gICAgICAgIHRoaXMuaXNSdGwgPSB0aGlzLmxheW91dFNlcnZpY2UuaXNSdGwoKTtcbiAgICAgICAgdGhpcy5jcmVhdGVTZWFyY2hDb250cm9sSWZOb3RFeGlzdCgpO1xuXG4gICAgICAgIHRoaXMuc2VhcmNoQ29udHJvbC52YWx1ZUNoYW5nZXNcbiAgICAgICAgICAgIC5waXBlKGRlYm91bmNlVGltZSgxMDAwKSwgdGFrZVVudGlsKHRoaXMuX2Rlc3Ryb3llZCkpXG4gICAgICAgICAgICAuc3Vic2NyaWJlKChuZXdWYWx1ZSkgPT4ge1xuICAgICAgICAgICAgICAgIGlmICh0aGlzLnR5cGUgPT09ICdhdXRvLWNvbXBsZXRlJykge1xuICAgICAgICAgICAgICAgICAgICB0aGlzLmF1dG9Db21wbGV0ZVZhbHVlcyA9IFtdO1xuICAgICAgICAgICAgICAgICAgICBpZiAoXG4gICAgICAgICAgICAgICAgICAgICAgICBuZXdWYWx1ZSAmJlxuICAgICAgICAgICAgICAgICAgICAgICAgbmV3VmFsdWUubGVuZ3RoID4gMiAmJlxuICAgICAgICAgICAgICAgICAgICAgICAgbmV3VmFsdWUgIT09IHRoaXMubGFzdFZhbHVlXG4gICAgICAgICAgICAgICAgICAgICkge1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5hdXRvY29tcGxldGVDaGFuZ2UuZW1pdCh7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWU6IG5ld1ZhbHVlLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRvcDogdGhpcy5hdXRvQ29tcGxldGVUb3AsXG4gICAgICAgICAgICAgICAgICAgICAgICB9KTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH0gZWxzZSBpZiAodGhpcy50eXBlID09PSAncmVndWxhcicpIHtcbiAgICAgICAgICAgICAgICAgICAgaWYgKHRoaXMudHJpZ2dlck9uID09PSAna2V5ZG93bicpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHRoaXMuZW1pdFNlYXJjaENsaWNrKCk7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fZGVzdHJveWVkLm5leHQoKTtcbiAgICAgICAgdGhpcy5fZGVzdHJveWVkLmNvbXBsZXRlKCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBleHBvcnRGdW5jdGlvbnNPbkhvc3RFbGVtZW50KCkge1xuICAgICAgICAvLyBUaGlzIGlzIGZvciB3ZWIgY29tcG9uZW50IHVzYWdlIGZvciB1c2UgdGhvc2UgZnVuY3Rpb25zLlxuICAgICAgICB0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuaW5pdFNlYXJjaCA9IHRoaXMuaW5pdFNlYXJjaC5iaW5kKHRoaXMpO1xuICAgIH1cblxuICAgIHByaXZhdGUgY3JlYXRlU2VhcmNoQ29udHJvbElmTm90RXhpc3QoKTogdm9pZCB7XG4gICAgICAgIGlmICghdGhpcy5zZWFyY2hDb250cm9sKSB7XG4gICAgICAgICAgICB0aGlzLnNlYXJjaENvbnRyb2wgPSBuZXcgRm9ybUNvbnRyb2woKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHByaXZhdGUgYmx1cigpIHtcbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnNlYXJjaElucHV0Lm5hdGl2ZUVsZW1lbnQuYmx1cigpO1xuICAgICAgICB9LCAwKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIHNob3dGbG9hdGluZ0J1dHRvbigpIHtcbiAgICAgICAgdGhpcy5mYWRlU3RhdGUgPSAnZmFkZU91dCc7XG5cbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgICB0aGlzLnN0YXRlQ2hhbmdlLmVtaXQoeyBzdGF0ZTogJ2Nsb3NlJyB9KTtcbiAgICAgICAgICAgIHRoaXMuc2hvd0Zsb2F0U3JjQnRuID0gdHJ1ZTtcbiAgICAgICAgfSwgNTAwKTtcblxuICAgICAgICAvLyBjbG9zZSB0aGUgcGhvbmUga2V5Ym9hcmRcbiAgICAgICAgdGhpcy5ibHVyKCk7XG4gICAgfVxuXG4gICAgaW5pdFNlYXJjaCgpIHtcbiAgICAgICAgdGhpcy5sYXN0VmFsdWUgPSBudWxsO1xuICAgICAgICB0aGlzLnNlYXJjaENvbnRyb2wuc2V0VmFsdWUoJycpO1xuICAgIH1cblxuICAgIG9uQ2xlYXJDbGlja2VkKGV2ZW50OiBhbnkpIHtcbiAgICAgICAgaWYgKHRoaXMudHlwZSA9PT0gJ2F1dG8tY29tcGxldGUnKSB7XG4gICAgICAgICAgICB0aGlzLmF1dG9Db21wbGV0ZVZhbHVlcyA9IFtdO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5pbml0U2VhcmNoKCk7XG4gICAgICAgIHRoaXMuc2VhcmNoLmVtaXQoeyB2YWx1ZTogJycgfSk7XG5cbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcblxuICAgICAgICAvKlxuICAgICAgICBpZiAodGhpcy5pc0Zsb2F0aW5nKSB7XG4gICAgICAgICAgICB0aGlzLnNob3dGbG9hdGluZ0J1dHRvbigpO1xuICAgICAgICB9ICovXG4gICAgfVxuXG4gICAgb25TZWFyY2hDbGlja2VkKCkge1xuICAgICAgICBpZiAodGhpcy5pc0Zsb2F0aW5nKSB7XG4gICAgICAgICAgICB0aGlzLnRyaWdnZXJTZWFyY2goKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIGlmICh0aGlzLnN0YXRlID09PSAnb3BlbicpIHtcbiAgICAgICAgICAgICAgICB0aGlzLnRyaWdnZXJTZWFyY2goKTtcbiAgICAgICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICAgICAgdGhpcy5zdGF0ZSA9ICdvcGVuJztcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgIG9uRm9jdXNvdXQoKSB7XG4gICAgICAgIGlmICh0aGlzLmlzRmxvYXRpbmcgJiYgdGhpcy5zZWFyY2hDb250cm9sLnZhbHVlPy5sZW5ndGggPT09IDApIHtcbiAgICAgICAgICAgIHRoaXMuc2hvd0Zsb2F0aW5nQnV0dG9uKCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBvblNlYXJjaChldmVudDogRXZlbnQpIHtcbiAgICAgICAgLy8gU3RvcCB0aGUgZXZlbnQgcHJvcGFnYXRpb24gLSBjYXVzZSB3ZSBkb24ndCB3YW50IGZpcmUgdHdvIGV2ZW50cy5cbiAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgICAgIHRoaXMudHJpZ2dlclNlYXJjaCgpO1xuICAgIH1cblxuICAgIHRyaWdnZXJTZWFyY2goKSB7XG4gICAgICAgIGlmICh0aGlzLnR5cGUgPT09ICdhdXRvLWNvbXBsZXRlJykge1xuICAgICAgICAgICAgdGhpcy5hdXRvQ29tcGxldGVWYWx1ZXMgPSBbXTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuYmx1cigpO1xuICAgICAgICB0aGlzLmVtaXRTZWFyY2hDbGljaygpO1xuICAgIH1cblxuICAgIGFuaW1hdGVTZWFyY2goKSB7XG4gICAgICAgIGlmICh0aGlzLnN0YXRlID09PSAnb3BlbicpIHtcbiAgICAgICAgICAgIHRoaXMuZmFkZVN0YXRlID1cbiAgICAgICAgICAgICAgICB0aGlzLmZhZGVTdGF0ZSA9PT0gJ2ZhZGVPdXQnID8gJ2ZhZGVJbicgOiAnZmFkZU91dCc7XG4gICAgICAgICAgICBpZiAodGhpcy5mYWRlU3RhdGUgPT09ICdmYWRlSW4nKSB7XG4gICAgICAgICAgICAgICAgdGhpcy5zdGF0ZUNoYW5nZS5lbWl0KHsgc3RhdGU6ICdvcGVuJyB9KTtcbiAgICAgICAgICAgICAgICB0aGlzLnNob3dGbG9hdFNyY0J0biA9IGZhbHNlO1xuICAgICAgICAgICAgICAgIHRoaXMuc2VhcmNoSW5wdXQubmF0aXZlRWxlbWVudC5mb2N1cygpO1xuICAgICAgICAgICAgfVxuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgdGhpcy5mYWRlU3RhdGUgPSAnZmFkZUluJztcbiAgICAgICAgfVxuICAgIH1cblxuICAgIC8vIGRvIHRoZSBlbWl0IGp1c3Qgd2hlbiBkb25lIGJlY2F1c2Ugb2YgdGhlIGxpbmUgYnJlYWsgd2hlbiBjbG9zaW5nIHRoZSBzZWFyY2hcbiAgICAvLyBjb21wb25lbnQgYW5kIHNob3dlbiBhbGwgb3RoZXIgY29tcG9uZW50cyBiZWZvcmVcbiAgICBhbmltYXRlU2VhcmNoRG9uZSgpIHtcbiAgICAgICAgaWYgKHRoaXMuc3RhdGUgIT09ICdvcGVuJykge1xuICAgICAgICAgICAgdGhpcy5zdGF0ZUNoYW5nZS5lbWl0KHsgc3RhdGU6ICdjbG9zZScgfSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBlbWl0U2VhcmNoQ2xpY2soKSB7XG4gICAgICAgIGNvbnN0IHZhbHVlID0gdGhpcy5zZWFyY2hDb250cm9sLnZhbHVlO1xuXG4gICAgICAgIGlmICh2YWx1ZSAhPT0gdGhpcy5sYXN0VmFsdWUpIHtcbiAgICAgICAgICAgIHRoaXMubGFzdFZhbHVlID0gdmFsdWU7XG4gICAgICAgICAgICB0aGlzLnNlYXJjaC5lbWl0KHsgdmFsdWUgfSk7XG4gICAgICAgIH1cbiAgICB9XG59XG4iLCI8IS0tIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJwZXBUZW1wbGF0ZTsgY29udGV4dDogeyBpc0Zvcm1WaWV3OiBmYWxzZSwgaGFzUGFyZW50OiBmYWxzZSB9XCI+XG48L25nLWNvbnRhaW5lcj4gLS0+XG48bmctY29udGFpbmVyICpuZ0lmPVwic2hyaW5rICE9PSAnbmV2ZXInOyB0aGVuIHNocmlua0Jsb2NrOyBlbHNlIHN0YXRpY0Jsb2NrXCI+PC9uZy1jb250YWluZXI+XG48bmctdGVtcGxhdGUgI3Nocmlua0Jsb2NrPlxuICAgIDxkaXYgcGVwUnRsQ2xhc3MgY2xhc3M9XCJwZXAtc2VhcmNoLWNvbnRhaW5lciB7eyBzaXplVHlwZSB9fVwiIFtuZ0NsYXNzXT1cInsgJ3BlcC1mbG9hdGluZy1zZWFyY2gnOiBpc0Zsb2F0aW5nfVwiXG4gICAgICAgIFtAZmFkZUluT3V0XT1cImZhZGVTdGF0ZVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwicGVwLXNlYXJjaC1pbnB1dFwiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInR5cGUgPT09ICdhdXRvLWNvbXBsZXRlJ1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJhdXRvQ29tcGxldGVCbG9ja1wiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidHlwZSA9PT0gJ3JlZ3VsYXInXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInJlZ3VsYXJCbG9ja1wiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICAgIDxidXR0b24gKm5nSWY9XCJpc0Zsb2F0aW5nICYmIGZhZGVTdGF0ZSAhPSdmYWRlSW4nICYmIHNob3dGbG9hdFNyY0J0blwiXG4gICAgICAgIGNsYXNzPVwicGVwLWJ1dHRvbiBpY29uLWJ1dHRvbiB7eyBzaXplVHlwZSB9fSB3ZWFrXCIgbWF0LWJ1dHRvbiAoY2xpY2spPVwiYW5pbWF0ZVNlYXJjaCgpXCI+XG4gICAgICAgIDxtYXQtaWNvbj5cbiAgICAgICAgICAgIDxwZXAtaWNvbiBuYW1lPVwic3lzdGVtX3NlYXJjaFwiPjwvcGVwLWljb24+XG4gICAgICAgIDwvbWF0LWljb24+XG4gICAgPC9idXR0b24+XG48L25nLXRlbXBsYXRlPlxuPG5nLXRlbXBsYXRlICNzdGF0aWNCbG9jaz5cbiAgICA8ZGl2IHBlcFJ0bENsYXNzIGNsYXNzPVwicGVwLXNlYXJjaC1jb250YWluZXIge3sgc2l6ZVR5cGUgfX1cIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBlcC1zZWFyY2gtaW5wdXRcIj5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJ0eXBlID09PSAnYXV0by1jb21wbGV0ZSdcIj5cbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiYXV0b0NvbXBsZXRlQmxvY2tcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInR5cGUgPT09ICdyZWd1bGFyJ1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJyZWd1bGFyQmxvY2tcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjYXV0b0NvbXBsZXRlQmxvY2s+XG4gICAgPG1hdC1mb3JtLWZpZWxkIGFwcGVhcmFuY2U9XCJvdXRsaW5lXCI+XG4gICAgICAgIDwhLS0gKEBzbGlkZUluT3V0LmRvbmUpPVwiYW5pbWF0ZVNlYXJjaERvbmUoKVwiIFtAc2xpZGVJbk91dF09XCJzdGF0ZVwiIC0tPlxuICAgICAgICA8aW5wdXQgI3NlYXJjaElucHV0IGNsYXNzPVwiYm9keS1zbSBwZXAtc2VhcmNoLWlucHV0XCIgbWF0SW5wdXQgYXV0b2NvbXBsZXRlPVwib2ZmXCJcbiAgICAgICAgICAgIFtuZ1N0eWxlXT1cInsgdGV4dEFsaWduOiBpc1J0bCA/ICdyaWdodCcgOiAnbGVmdCcgfVwiIHR5cGU9XCJ0ZXh0XCIgKGtleXVwLmVudGVyKT1cIm9uU2VhcmNoKCRldmVudClcIiByZXN1bHRzPVwiNVwiXG4gICAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwic2VhcmNoQ29udHJvbFwiIHBsYWNlaG9sZGVyPVwie3sgJ1NFQVJDSC5ISU5UJyB8IHRyYW5zbGF0ZSB9fS4uLlwiIFttYXRBdXRvY29tcGxldGVdPVwiYXV0b1wiIC8+XG4gICAgICAgIDxtYXQtYXV0b2NvbXBsZXRlICNhdXRvPVwibWF0QXV0b2NvbXBsZXRlXCIgY2xhc3M9XCJwZXAtc2VsZWN0XCI+XG4gICAgICAgICAgICA8bWF0LW9wdGlvbiAqbmdGb3I9XCJsZXQgdmFsdWUgb2YgYXV0b0NvbXBsZXRlVmFsdWVzXCIgW3ZhbHVlXT1cInZhbHVlXCIgKGNsaWNrKT1cInRyaWdnZXJTZWFyY2goKVwiPlxuICAgICAgICAgICAgICAgIHt7dmFsdWV9fVxuICAgICAgICAgICAgPC9tYXQtb3B0aW9uPlxuICAgICAgICAgICAgPG1hdC1vcHRpb24gKm5nSWY9XCJhdXRvQ29tcGxldGVWYWx1ZXM/Lmxlbmd0aCA+IGF1dG9Db21wbGV0ZVRvcCAtIDFcIiBbdmFsdWVdPVwidmFsdWVcIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJ0cmlnZ2VyU2VhcmNoKClcIj57eyAnU0VBUkNILk1PUkVfUkVTVUxUUycgfCB0cmFuc2xhdGUgfX08L21hdC1vcHRpb24+XG4gICAgICAgIDwvbWF0LWF1dG9jb21wbGV0ZT5cbiAgICAgICAgPGRpdiBtYXRTdWZmaXggY2xhc3M9XCJmbGV4IGFsaWduLWNlbnRlclwiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInRyaWdnZXJPbiA9PT0gJ2NsaWNrJ1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0cmlnZ2VyT25DbGlja0Jsb2NrXCI+PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJ0cmlnZ2VyT24gPT09ICdrZXlkb3duJ1wiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJ0cmlnZ2VyT25LZXlkb3duQmxvY2tcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L21hdC1mb3JtLWZpZWxkPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNyZWd1bGFyQmxvY2s+XG4gICAgPG1hdC1mb3JtLWZpZWxkIGFwcGVhcmFuY2U9XCJvdXRsaW5lXCI+XG4gICAgICAgIDxpbnB1dCAjc2VhcmNoSW5wdXQgY2xhc3M9XCJib2R5LXNtIHBlcC1zZWFyY2gtaW5wdXRcIiBtYXRJbnB1dCBhdXRvY29tcGxldGU9XCJvZmZcIlxuICAgICAgICAgICAgW25nU3R5bGVdPVwieyB0ZXh0QWxpZ246IGlzUnRsID8gJ3JpZ2h0JyA6ICdsZWZ0JyB9XCIgdHlwZT1cInRleHRcIiAoa2V5dXAuZW50ZXIpPVwib25TZWFyY2goJGV2ZW50KVwiXG4gICAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwic2VhcmNoQ29udHJvbFwiIHBsYWNlaG9sZGVyPVwie3sgJ1NFQVJDSC5ISU5UJyB8IHRyYW5zbGF0ZSB9fS4uLlwiIChmb2N1c291dCk9XCJvbkZvY3Vzb3V0KClcIiAvPlxuICAgICAgICA8ZGl2IG1hdFN1ZmZpeCBjbGFzcz1cImZsZXggYWxpZ24tY2VudGVyXCI+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwidHJpZ2dlck9uID09PSAnY2xpY2snXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRyaWdnZXJPbkNsaWNrQmxvY2tcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInRyaWdnZXJPbiA9PT0gJ2tleWRvd24nXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cInRyaWdnZXJPbktleWRvd25CbG9ja1wiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvbWF0LWZvcm0tZmllbGQ+XG48L25nLXRlbXBsYXRlPlxuPG5nLXRlbXBsYXRlICN0cmlnZ2VyT25DbGlja0Jsb2NrPlxuICAgIDxtYXQtaWNvbiBjbGFzcz1cInBlcC10ZXh0LWljb24gcGVwLXBvaW50ZXJcIlxuICAgICAgICBbbmdDbGFzc109XCJ7J2hpZGUtY2xlYXItaWNvbicgOiBzdGF0ZSA9PSAnY2xvc2UnIHx8IHNlYXJjaENvbnRyb2wudmFsdWU/Lmxlbmd0aCA9PT0gMH1cIlxuICAgICAgICAoY2xpY2spPVwib25DbGVhckNsaWNrZWQoJGV2ZW50KVwiPlxuICAgICAgICA8cGVwLWljb24gbmFtZT1cInN5c3RlbV9jbG9zZVwiPjwvcGVwLWljb24+XG4gICAgPC9tYXQtaWNvbj5cbiAgICA8c3BhbiBjbGFzcz1cInBlcC10ZXh0LWljb24gcGVwLXNwYWNpbmctZWxlbWVudCBwZXAtdi1zZXBhcmF0b3JcIlxuICAgICAgICBbbmdDbGFzc109XCJ7J2hpZGUtY2xlYXItaWNvbicgOiBzdGF0ZSA9PSAnY2xvc2UnIHx8IHNlYXJjaENvbnRyb2wudmFsdWU/Lmxlbmd0aCA9PT0gMH1cIj58PC9zcGFuPlxuICAgIDxtYXQtaWNvbiBjbGFzcz1cInBlcC10ZXh0LWljb24gcGVwLXBvaW50ZXJcIiAoY2xpY2spPVwib25TZWFyY2hDbGlja2VkKClcIj5cbiAgICAgICAgPHBlcC1pY29uIG5hbWU9XCJzeXN0ZW1fc2VhcmNoXCI+PC9wZXAtaWNvbj5cbiAgICA8L21hdC1pY29uPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICN0cmlnZ2VyT25LZXlkb3duQmxvY2s+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cInNlYXJjaENvbnRyb2wudmFsdWU/Lmxlbmd0aCA+IDA7IHRoZW4gY2xlYXJCbG9jazsgZWxzZSBzZWFyY2hCbG9ja1wiPjwvbmctY29udGFpbmVyPlxuICAgIDxuZy10ZW1wbGF0ZSAjY2xlYXJCbG9jaz5cbiAgICAgICAgPGJ1dHRvbiBjbGFzcz1cInBlcC1idXR0b24gcmVndWxhciB7eyBzaXplVHlwZSB9fVwiIG1hdC1idXR0b24gKGNsaWNrKT1cIm9uQ2xlYXJDbGlja2VkKCRldmVudClcIj5cbiAgICAgICAgICAgIDxtYXQtaWNvbj5cbiAgICAgICAgICAgICAgICA8cGVwLWljb24gbmFtZT1cInN5c3RlbV9jbG9zZVwiPjwvcGVwLWljb24+XG4gICAgICAgICAgICA8L21hdC1pY29uPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L25nLXRlbXBsYXRlPlxuICAgIDxuZy10ZW1wbGF0ZSAjc2VhcmNoQmxvY2s+XG4gICAgICAgIDxtYXQtaWNvbiBjbGFzcz1cInBlcC10ZXh0LWljb25cIj5cbiAgICAgICAgICAgIDxwZXAtaWNvbiBuYW1lPVwic3lzdGVtX3NlYXJjaFwiPjwvcGVwLWljb24+XG4gICAgICAgIDwvbWF0LWljb24+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbjwvbmctdGVtcGxhdGU+Il19