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

package/bundles/pepperi-addons-ngx-lib-search.umd.js

@@ -4,338 +4,338 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib'].search = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.core, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].icon, global.rxjs, global.ng.animations, global.rxjs.operators));
 }(this, (function (exports, core, common, forms, core$1, autocomplete, button, formField, icon$1, input, ngxLib, icon, rxjs, animations, operators) { 'use strict';
 
-    var PepSearchComponent = /** @class */ (function () {
-        function PepSearchComponent(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 core.EventEmitter();
-            this.autocompleteChange = new core.EventEmitter();
-            this.stateChange = new core.EventEmitter();
-            this._destroyed = new rxjs.Subject();
-            this.type = 'regular';
-            this.state = 'open';
-            this.lastValue = null;
-            this.showFloatSrcBtn = true;
-            this.isRtl = false;
-            this.isFloating = false;
-            //
-        }
-        Object.defineProperty(PepSearchComponent.prototype, "autoCompleteValues", {
-            get: function () {
-                return this._autoCompleteValues;
-            },
-            set: function (val) {
-                this.type = 'auto-complete';
-                this._autoCompleteValues = val;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepSearchComponent.prototype, "shrink", {
-            get: function () {
-                return this._shrink;
-            },
-            set: function (value) {
-                this._shrink = value;
-                this.setIsFloating();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepSearchComponent.prototype, "value", {
-            get: function () {
-                return this.searchControl.value || '';
-            },
-            set: function (val) {
-                this.createSearchControlIfNotExist();
-                this.searchControl.setValue(val);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepSearchComponent.prototype, "searchControl", {
-            get: function () {
-                return this._searchControl;
-            },
-            set: function (ctrl) {
-                this._searchControl = ctrl;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepSearchComponent.prototype, "useAsWebComponent", {
-            get: function () {
-                return this._useAsWebComponent;
-            },
-            set: function (value) {
-                if (value) {
-                    this.exportFunctionsOnHostElement();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepSearchComponent.prototype.setIsFloating = function () {
-            if (this.shrink === 'small-screen') {
-                this.isFloating = this.screenSize > ngxLib.PepScreenSizeType.SM;
-            }
-            else if (this.shrink === 'always') {
-                this.isFloating = true;
-            }
-            else { // never
-                this.isFloating = false;
-            }
-        };
-        PepSearchComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.layoutService.onResize$.pipe().subscribe(function (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(operators.debounceTime(1000), operators.takeUntil(this._destroyed))
-                .subscribe(function (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();
-                    }
-                }
-            });
-        };
-        PepSearchComponent.prototype.ngOnDestroy = function () {
-            this._destroyed.next();
-            this._destroyed.complete();
-        };
-        PepSearchComponent.prototype.exportFunctionsOnHostElement = function () {
-            // This is for web component usage for use those functions.
-            this.hostElement.nativeElement.initSearch = this.initSearch.bind(this);
-        };
-        PepSearchComponent.prototype.createSearchControlIfNotExist = function () {
-            if (!this.searchControl) {
-                this.searchControl = new forms.FormControl();
-            }
-        };
-        PepSearchComponent.prototype.blur = function () {
-            var _this = this;
-            setTimeout(function () {
-                _this.searchInput.nativeElement.blur();
-            }, 0);
-        };
-        PepSearchComponent.prototype.showFloatingButton = function () {
-            var _this = this;
-            this.fadeState = 'fadeOut';
-            setTimeout(function () {
-                _this.stateChange.emit({ state: 'close' });
-                _this.showFloatSrcBtn = true;
-            }, 500);
-            // close the phone keyboard
-            this.blur();
-        };
-        PepSearchComponent.prototype.initSearch = function () {
-            this.lastValue = null;
-            this.searchControl.setValue('');
-        };
-        PepSearchComponent.prototype.onClearClicked = function (event) {
-            if (this.type === 'auto-complete') {
-                this.autoCompleteValues = [];
-            }
-            this.initSearch();
-            this.search.emit({ value: '' });
-            event.preventDefault();
-            /*
-            if (this.isFloating) {
-                this.showFloatingButton();
-            } */
-        };
-        PepSearchComponent.prototype.onSearchClicked = function () {
-            if (this.isFloating) {
-                this.triggerSearch();
-            }
-            else {
-                if (this.state === 'open') {
-                    this.triggerSearch();
-                }
-                else {
-                    this.state = 'open';
-                }
-            }
-        };
-        PepSearchComponent.prototype.onFocusout = function () {
-            var _a;
-            if (this.isFloating && ((_a = this.searchControl.value) === null || _a === void 0 ? void 0 : _a.length) === 0) {
-                this.showFloatingButton();
-            }
-        };
-        PepSearchComponent.prototype.onSearch = function (event) {
-            // Stop the event propagation - cause we don't want fire two events.
-            event.stopPropagation();
-            this.triggerSearch();
-        };
-        PepSearchComponent.prototype.triggerSearch = function () {
-            if (this.type === 'auto-complete') {
-                this.autoCompleteValues = [];
-            }
-            this.blur();
-            this.emitSearchClick();
-        };
-        PepSearchComponent.prototype.animateSearch = function () {
-            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
-        PepSearchComponent.prototype.animateSearchDone = function () {
-            if (this.state !== 'open') {
-                this.stateChange.emit({ state: 'close' });
-            }
-        };
-        PepSearchComponent.prototype.emitSearchClick = function () {
-            var value = this.searchControl.value;
-            if (value !== this.lastValue) {
-                this.lastValue = value;
-                this.search.emit({ value: value });
-            }
-        };
-        return PepSearchComponent;
-    }());
-    PepSearchComponent.decorators = [
-        { type: core.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: [
-                        animations.trigger('slideInOut', [
-                            animations.state('close', animations.style({
-                                width: '0',
-                                padding: '0',
-                                border: 'none',
-                            })),
-                            animations.state('open', animations.style({
-                                width: 'inherit',
-                            })),
-                            animations.transition('close => open', animations.animate('500ms ease-in-out')),
-                            animations.transition('open => close', animations.animate('500ms ease-in-out')),
-                        ]),
-                        animations.trigger('fadeInOut', [
-                            animations.state('fadeOut', animations.style({
-                                opacity: 0,
-                                width: '1px',
-                            })),
-                            animations.state('fadeIn', animations.style({
-                                opacity: 1,
-                                width: '100%',
-                            })),
-                            animations.transition('fadeOut => fadeIn', animations.animate(300, animations.style({ opacity: 1, width: '100%' }))),
-                            animations.transition('fadeIn => fadeOut', animations.animate(350, animations.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: core.Injectable }
-    ];
-    PepSearchComponent.ctorParameters = function () { return [
-        { type: core.ElementRef },
-        { type: ngxLib.PepLayoutService }
-    ]; };
-    PepSearchComponent.propDecorators = {
-        triggerOn: [{ type: core.Input }],
-        autoCompleteTop: [{ type: core.Input }],
-        autoCompleteValues: [{ type: core.Input }],
-        shrink: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        searchControl: [{ type: core.Input }],
-        useAsWebComponent: [{ type: core.Input }],
-        sizeType: [{ type: core.Input }],
-        search: [{ type: core.Output }],
-        autocompleteChange: [{ type: core.Output }],
-        stateChange: [{ type: core.Output }],
-        searchInput: [{ type: core.ViewChild, args: ['searchInput',] }]
+    var PepSearchComponent = /** @class */ (function () {
+        function PepSearchComponent(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 core.EventEmitter();
+            this.autocompleteChange = new core.EventEmitter();
+            this.stateChange = new core.EventEmitter();
+            this._destroyed = new rxjs.Subject();
+            this.type = 'regular';
+            this.state = 'open';
+            this.lastValue = null;
+            this.showFloatSrcBtn = true;
+            this.isRtl = false;
+            this.isFloating = false;
+            //
+        }
+        Object.defineProperty(PepSearchComponent.prototype, "autoCompleteValues", {
+            get: function () {
+                return this._autoCompleteValues;
+            },
+            set: function (val) {
+                this.type = 'auto-complete';
+                this._autoCompleteValues = val;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepSearchComponent.prototype, "shrink", {
+            get: function () {
+                return this._shrink;
+            },
+            set: function (value) {
+                this._shrink = value;
+                this.setIsFloating();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepSearchComponent.prototype, "value", {
+            get: function () {
+                return this.searchControl.value || '';
+            },
+            set: function (val) {
+                this.createSearchControlIfNotExist();
+                this.searchControl.setValue(val);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepSearchComponent.prototype, "searchControl", {
+            get: function () {
+                return this._searchControl;
+            },
+            set: function (ctrl) {
+                this._searchControl = ctrl;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepSearchComponent.prototype, "useAsWebComponent", {
+            get: function () {
+                return this._useAsWebComponent;
+            },
+            set: function (value) {
+                if (value) {
+                    this.exportFunctionsOnHostElement();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepSearchComponent.prototype.setIsFloating = function () {
+            if (this.shrink === 'small-screen') {
+                this.isFloating = this.screenSize > ngxLib.PepScreenSizeType.SM;
+            }
+            else if (this.shrink === 'always') {
+                this.isFloating = true;
+            }
+            else { // never
+                this.isFloating = false;
+            }
+        };
+        PepSearchComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.layoutService.onResize$.pipe().subscribe(function (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(operators.debounceTime(1000), operators.takeUntil(this._destroyed))
+                .subscribe(function (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();
+                    }
+                }
+            });
+        };
+        PepSearchComponent.prototype.ngOnDestroy = function () {
+            this._destroyed.next();
+            this._destroyed.complete();
+        };
+        PepSearchComponent.prototype.exportFunctionsOnHostElement = function () {
+            // This is for web component usage for use those functions.
+            this.hostElement.nativeElement.initSearch = this.initSearch.bind(this);
+        };
+        PepSearchComponent.prototype.createSearchControlIfNotExist = function () {
+            if (!this.searchControl) {
+                this.searchControl = new forms.FormControl();
+            }
+        };
+        PepSearchComponent.prototype.blur = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.searchInput.nativeElement.blur();
+            }, 0);
+        };
+        PepSearchComponent.prototype.showFloatingButton = function () {
+            var _this = this;
+            this.fadeState = 'fadeOut';
+            setTimeout(function () {
+                _this.stateChange.emit({ state: 'close' });
+                _this.showFloatSrcBtn = true;
+            }, 500);
+            // close the phone keyboard
+            this.blur();
+        };
+        PepSearchComponent.prototype.initSearch = function () {
+            this.lastValue = null;
+            this.searchControl.setValue('');
+        };
+        PepSearchComponent.prototype.onClearClicked = function (event) {
+            if (this.type === 'auto-complete') {
+                this.autoCompleteValues = [];
+            }
+            this.initSearch();
+            this.search.emit({ value: '' });
+            event.preventDefault();
+            /*
+            if (this.isFloating) {
+                this.showFloatingButton();
+            } */
+        };
+        PepSearchComponent.prototype.onSearchClicked = function () {
+            if (this.isFloating) {
+                this.triggerSearch();
+            }
+            else {
+                if (this.state === 'open') {
+                    this.triggerSearch();
+                }
+                else {
+                    this.state = 'open';
+                }
+            }
+        };
+        PepSearchComponent.prototype.onFocusout = function () {
+            var _a;
+            if (this.isFloating && ((_a = this.searchControl.value) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+                this.showFloatingButton();
+            }
+        };
+        PepSearchComponent.prototype.onSearch = function (event) {
+            // Stop the event propagation - cause we don't want fire two events.
+            event.stopPropagation();
+            this.triggerSearch();
+        };
+        PepSearchComponent.prototype.triggerSearch = function () {
+            if (this.type === 'auto-complete') {
+                this.autoCompleteValues = [];
+            }
+            this.blur();
+            this.emitSearchClick();
+        };
+        PepSearchComponent.prototype.animateSearch = function () {
+            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
+        PepSearchComponent.prototype.animateSearchDone = function () {
+            if (this.state !== 'open') {
+                this.stateChange.emit({ state: 'close' });
+            }
+        };
+        PepSearchComponent.prototype.emitSearchClick = function () {
+            var value = this.searchControl.value;
+            if (value !== this.lastValue) {
+                this.lastValue = value;
+                this.search.emit({ value: value });
+            }
+        };
+        return PepSearchComponent;
+    }());
+    PepSearchComponent.decorators = [
+        { type: core.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: [
+                        animations.trigger('slideInOut', [
+                            animations.state('close', animations.style({
+                                width: '0',
+                                padding: '0',
+                                border: 'none',
+                            })),
+                            animations.state('open', animations.style({
+                                width: 'inherit',
+                            })),
+                            animations.transition('close => open', animations.animate('500ms ease-in-out')),
+                            animations.transition('open => close', animations.animate('500ms ease-in-out')),
+                        ]),
+                        animations.trigger('fadeInOut', [
+                            animations.state('fadeOut', animations.style({
+                                opacity: 0,
+                                width: '1px',
+                            })),
+                            animations.state('fadeIn', animations.style({
+                                opacity: 1,
+                                width: '100%',
+                            })),
+                            animations.transition('fadeOut => fadeIn', animations.animate(300, animations.style({ opacity: 1, width: '100%' }))),
+                            animations.transition('fadeIn => fadeOut', animations.animate(350, animations.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: core.Injectable }
+    ];
+    PepSearchComponent.ctorParameters = function () { return [
+        { type: core.ElementRef },
+        { type: ngxLib.PepLayoutService }
+    ]; };
+    PepSearchComponent.propDecorators = {
+        triggerOn: [{ type: core.Input }],
+        autoCompleteTop: [{ type: core.Input }],
+        autoCompleteValues: [{ type: core.Input }],
+        shrink: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        searchControl: [{ type: core.Input }],
+        useAsWebComponent: [{ type: core.Input }],
+        sizeType: [{ type: core.Input }],
+        search: [{ type: core.Output }],
+        autocompleteChange: [{ type: core.Output }],
+        stateChange: [{ type: core.Output }],
+        searchInput: [{ type: core.ViewChild, args: ['searchInput',] }]
     };
 
-    var PepSearchModule = /** @class */ (function () {
-        function PepSearchModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([
-                icon.pepIconSystemClose,
-                icon.pepIconSystemSearch,
-            ]);
-        }
-        return PepSearchModule;
-    }());
-    PepSearchModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        // Material modules,
-                        core$1.MatCommonModule,
-                        autocomplete.MatAutocompleteModule,
-                        button.MatButtonModule,
-                        formField.MatFormFieldModule,
-                        icon$1.MatIconModule,
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        icon.PepIconModule,
-                        input.MatInputModule,
-                    ],
-                    exports: [PepSearchComponent],
-                    declarations: [PepSearchComponent],
-                },] }
-    ];
-    PepSearchModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepSearchModule = /** @class */ (function () {
+        function PepSearchModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([
+                icon.pepIconSystemClose,
+                icon.pepIconSystemSearch,
+            ]);
+        }
+        return PepSearchModule;
+    }());
+    PepSearchModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.ReactiveFormsModule,
+                        // Material modules,
+                        core$1.MatCommonModule,
+                        autocomplete.MatAutocompleteModule,
+                        button.MatButtonModule,
+                        formField.MatFormFieldModule,
+                        icon$1.MatIconModule,
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        icon.PepIconModule,
+                        input.MatInputModule,
+                    ],
+                    exports: [PepSearchComponent],
+                    declarations: [PepSearchComponent],
+                },] }
+    ];
+    PepSearchModule.ctorParameters = function () { return [
+        { type: icon.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.
      */
 
     exports.PepSearchComponent = PepSearchComponent;