@pepperi-addons/ngx-lib 0.3.15-beta.19 → 0.3.15-beta.21

package/fesm2015/pepperi-addons-ngx-lib-search.js

@@ -13,313 +13,313 @@ import { Subject } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 
-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() {
-        var _a;
-        if (this.isFloating && ((_a = this.searchControl.value) === null || _a === void 0 ? void 0 : _a.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.decorators = [
-    { type: Component, args: [{
-                selector: 'pep-search',
-                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>",
-                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' }))),
-                    ]),
-                ],
-                styles: [".pep-search-container .pep-search-input .mat-form-field{display:inherit}.pep-search-container .pep-search-input .pep-v-separator{padding:.25rem 0;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-flex}.pep-search-container.pep-floating-search.pep-is-action-button-visable{width:calc(100% - (.5rem * 2 + 1.5rem));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}}"]
-            },] },
-    { type: Injectable }
-];
-PepSearchComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: PepLayoutService }
-];
-PepSearchComponent.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() {
+        var _a;
+        if (this.isFloating && ((_a = this.searchControl.value) === null || _a === void 0 ? void 0 : _a.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.decorators = [
+    { type: Component, args: [{
+                selector: 'pep-search',
+                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>",
+                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' }))),
+                    ]),
+                ],
+                styles: [".pep-search-container .pep-search-input .mat-form-field{display:inherit}.pep-search-container .pep-search-input .pep-v-separator{padding:.25rem 0;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-flex}.pep-search-container.pep-floating-search.pep-is-action-button-visable{width:calc(100% - (.5rem * 2 + 1.5rem));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}}"]
+            },] },
+    { type: Injectable }
+];
+PepSearchComponent.ctorParameters = () => [
+    { type: ElementRef },
+    { type: PepLayoutService }
+];
+PepSearchComponent.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.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule,
-                    // Material modules,
-                    MatCommonModule,
-                    MatAutocompleteModule,
-                    MatButtonModule,
-                    MatFormFieldModule,
-                    MatIconModule,
-                    // ngx-lib modules
-                    PepNgxLibModule,
-                    PepIconModule,
-                    MatInputModule,
-                ],
-                exports: [PepSearchComponent],
-                declarations: [PepSearchComponent],
-            },] }
-];
-PepSearchModule.ctorParameters = () => [
-    { type: PepIconRegistry }
+class PepSearchModule {
+    constructor(pepIconRegistry) {
+        this.pepIconRegistry = pepIconRegistry;
+        this.pepIconRegistry.registerIcons([
+            pepIconSystemClose,
+            pepIconSystemSearch,
+        ]);
+    }
+}
+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],
+            },] }
+];
+PepSearchModule.ctorParameters = () => [
+    { type: 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 };