@pepperi-addons/ngx-lib 0.4.1-cards-list-scroll.32 → 0.4.1

package/fesm2020/pepperi-addons-ngx-lib-search.mjs

@@ -25,367 +25,367 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import * as i11 from '@ngx-translate/core';
 
-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: i1$1.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']
+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: i1$1.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']
             }] } });
 
-class PepSearchModule {
-    constructor(pepIconRegistry) {
-        this.pepIconRegistry = pepIconRegistry;
-        this.pepIconRegistry.registerIcons([
-            pepIconSystemClose,
-            pepIconSystemSearch,
-        ]);
-    }
-}
-PepSearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
-PepSearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSearchModule, declarations: [PepSearchComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        // Material modules,
-        MatCommonModule,
-        MatAutocompleteModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatIconModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepIconModule,
-        MatInputModule], exports: [PepSearchComponent] });
-PepSearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        // Material modules,
-        MatCommonModule,
-        MatAutocompleteModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatIconModule,
-        // ngx-lib modules
-        PepNgxLibModule,
-        PepIconModule,
-        MatInputModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        // Material modules,
-                        MatCommonModule,
-                        MatAutocompleteModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatIconModule,
-                        // ngx-lib modules
-                        PepNgxLibModule,
-                        PepIconModule,
-                        MatInputModule,
-                    ],
-                    exports: [PepSearchComponent],
-                    declarations: [PepSearchComponent],
-                }]
+class PepSearchModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemClose,
+            pepIconSystemSearch,
+        ]);
+    }
+}
+PepSearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchModule, deps: [{ token: i1$1.PepIconRegistry }], target: i0.ɵɵFactoryTarget.NgModule });
+PepSearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PepSearchModule, declarations: [PepSearchComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        // Material modules,
+        MatCommonModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepIconModule,
+        MatInputModule], exports: [PepSearchComponent] });
+PepSearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchModule, imports: [CommonModule,
+        ReactiveFormsModule,
+        // Material modules,
+        MatCommonModule,
+        MatAutocompleteModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatIconModule,
+        // ngx-lib modules
+        PepNgxLibModule,
+        PepIconModule,
+        MatInputModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSearchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        // Material modules,
+                        MatCommonModule,
+                        MatAutocompleteModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        // ngx-lib modules
+                        PepNgxLibModule,
+                        PepIconModule,
+                        MatInputModule,
+                    ],
+                    exports: [PepSearchComponent],
+                    declarations: [PepSearchComponent],
+                }]
         }], ctorParameters: function () { return [{ type: i1$1.PepIconRegistry }]; } });
 
-/*
- * Public API Surface of ngx-lib/search
+/*
+ * Public API Surface of ngx-lib/search
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { PepSearchComponent, PepSearchModule };