@koobiq/components 18.38.1 → 18.39.0

package/fesm2022/koobiq-components-filter-bar.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectorRef, DestroyRef, afterNextRender, TemplateRef, Directive, ElementRef, Input, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, ContentChild, viewChild, ViewChild, ViewChildren, EventEmitter, Output, Injector, ViewContainerRef, NgModule } from '@angular/core';
+import { InjectionToken, inject, ChangeDetectorRef, DestroyRef, afterNextRender, TemplateRef, Directive, ElementRef, Input, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, ContentChild, viewChild, ViewChild, ViewChildren, EventEmitter, Output, input, numberAttribute, Injector, ViewContainerRef, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i5$1 from '@koobiq/components/core';
 import { isMac, KbqComponentColors, KBQ_TITLE_TEXT_REF, DateAdapter, DateFormatter, PopUpPlacements, kbqDisableLegacyValidationDirectiveProvider, KbqFormattersModule, KbqOption, KbqPseudoCheckboxModule, KbqHighlightModule, ruRULocaleData, PopUpSizes, KbqFormsModule, KBQ_LOCALE_SERVICE, KbqOptionModule, KbqSelectMatcher } from '@koobiq/components/core';
 import * as i4 from '@koobiq/components/divider';
 import { KbqDividerModule } from '@koobiq/components/divider';
-import { Subject, merge, Subscription, throttleTime, Observable, of, BehaviorSubject } from 'rxjs';
+import { Subject, merge, Subscription, throttleTime, Observable, of, BehaviorSubject, distinctUntilChanged as distinctUntilChanged$1, debounceTime as debounceTime$1 } from 'rxjs';
 import * as i1$1 from '@angular/forms';
 import { FormGroup, FormControl, ReactiveFormsModule, FormsModule, UntypedFormControl, Validators } from '@angular/forms';
 import { ENTER } from '@koobiq/cdk/keycodes';
@@ -1987,7 +1987,7 @@ class KbqFilterBar {
         </div>
 
         <div class="kbq-filter-bar__right">
-            <ng-content select="kbq-filter-search, [kbq-filter-search]" />
+            <ng-content select="kbq-filter-search, [kbq-filter-search], kbq-search-expandable" />
 
             <ng-content select="kbq-filter-refresher, [kbq-filter-refresher]" />
         </div>
@@ -2007,7 +2007,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
 
         <div class="kbq-filter-bar__right">
-            <ng-content select="kbq-filter-search, [kbq-filter-search]" />
+            <ng-content select="kbq-filter-search, [kbq-filter-search], kbq-search-expandable" />
 
             <ng-content select="kbq-filter-refresher, [kbq-filter-refresher]" />
         </div>
@@ -2067,28 +2067,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     }, styles: [".kbq-filter-refresher{display:flex;align-items:center;min-width:64px}\n"] }]
         }] });
 
+const defaultOnSearchTimeout = 0;
 class KbqFilterBarSearch {
-    /** localized data
-     * @docs-private */
-    get localeData() {
-        return this.filterBar.configuration.search;
-    }
     constructor() {
         /** KbqFilterBar instance */
         this.filterBar = inject(KbqFilterBar);
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
         /** control for search */
         this.searchControl = new UntypedFormControl();
         /** Whether the search active */
         this.isSearchActive = false;
+        /**
+        /** Timeout in milliseconds for emit event. The default value is taken from defaultOnSearchTimeout
+         * @default 0
+         */
+        this.onSearchTimeout = input(defaultOnSearchTimeout, { transform: numberAttribute });
+        /** Emit event by enter or not. Default is false */
+        this.emitValueByEnter = input(false, { transform: booleanAttribute });
+        /** Value of the field after initialization */
+        this.initialValue = input();
         /** event that is generated whenever a user performs a search. */
         this.onSearch = new EventEmitter();
         /** @docs-private */
         this.onReset = () => {
             this.changeDetectorRef.markForCheck();
         };
-        this.searchControl.valueChanges.subscribe(this.onSearch);
-        this.filterBar.filterReset?.onResetFilter.pipe(takeUntilDestroyed()).subscribe(this.onReset);
+    }
+    /** localized data
+     * @docs-private */
+    get localeData() {
+        return this.filterBar.configuration.search;
+    }
+    ngAfterViewInit() {
+        this.filterBar.filterReset?.onResetFilter.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.onReset);
+        if (this.initialValue()) {
+            this.searchControl.setValue(this.initialValue(), { emitEvent: false });
+        }
+        this.searchControl.valueChanges
+            .pipe(distinctUntilChanged$1(), filter(() => !this.emitValueByEnter()), debounceTime$1(this.onSearchTimeout()), takeUntilDestroyed(this.destroyRef))
+            .subscribe(this.onSearch);
     }
     openSearch() {
         this.isSearchActive = true;
@@ -2107,6 +2125,12 @@ class KbqFilterBarSearch {
         this.tooltip.hide();
     }
     /** @docs-private */
+    onEnter() {
+        if (this.emitValueByEnter()) {
+            this.onSearch.emit(this.searchControl.value);
+        }
+    }
+    /** @docs-private */
     onClear() {
         this.isSearchActive = false;
         setTimeout(() => {
@@ -2115,7 +2139,7 @@ class KbqFilterBarSearch {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqFilterBarSearch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: KbqFilterBarSearch, isStandalone: true, selector: "kbq-filter-search, [kbq-filter-search]", outputs: { onSearch: "onSearch" }, host: { classAttribute: "kbq-filter-search" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }, { propertyName: "tooltip", first: true, predicate: KbqTooltipTrigger, descendants: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: KbqFilterBarSearch, isStandalone: true, selector: "kbq-filter-search, [kbq-filter-search]", inputs: { onSearchTimeout: { classPropertyName: "onSearchTimeout", publicName: "onSearchTimeout", isSignal: true, isRequired: false, transformFunction: null }, emitValueByEnter: { classPropertyName: "emitValueByEnter", publicName: "emitValueByEnter", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch" }, host: { classAttribute: "kbq-filter-search" }, viewQueries: [{ propertyName: "input", first: true, predicate: KbqInput, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }, { propertyName: "tooltip", first: true, predicate: KbqTooltipTrigger, descendants: true }], ngImport: i0, template: `
         <button
             kbq-button
             [class.kbq-filter_hidden]="isSearchActive"
@@ -2137,6 +2161,7 @@ class KbqFilterBarSearch {
                 placeholder="{{ localeData.placeholder }}"
                 (blur)="onBlur()"
                 (keydown.escape)="onEscape()"
+                (keydown.enter)="onEnter()"
             />
 
             <kbq-cleaner (click)="onClear()" />
@@ -2167,6 +2192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 placeholder="{{ localeData.placeholder }}"
                 (blur)="onBlur()"
                 (keydown.escape)="onEscape()"
+                (keydown.enter)="onEnter()"
             />
 
             <kbq-cleaner (click)="onClear()" />
@@ -2182,7 +2208,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], host: {
                         class: 'kbq-filter-search'
                     }, styles: [".kbq-filter-search{display:flex;align-items:start}.kbq-filter-search .kbq-form-field{width:260px}.kbq-filter-search .kbq-filter_hidden{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { input: [{
+        }], propDecorators: { input: [{
                 type: ViewChild,
                 args: [KbqInput]
             }], button: [{
@@ -2408,5 +2434,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_FILTER_BAR_CONFIGURATION, KBQ_FILTER_BAR_DEFAULT_CONFIGURATION, KBQ_FILTER_BAR_PIPES, KBQ_PIPE_DATA, KbqBasePipe, KbqFilterBar, KbqFilterBarButton, KbqFilterBarModule, KbqFilterBarRefresher, KbqFilterBarSearch, KbqFilterReset, KbqFilters, KbqPipeAdd, KbqPipeButton, KbqPipeDateComponent, KbqPipeDatetimeComponent, KbqPipeDirective, KbqPipeMinWidth, KbqPipeMultiSelectComponent, KbqPipeReadonlyComponent, KbqPipeSelectComponent, KbqPipeState, KbqPipeTextComponent, KbqPipeTitleDirective, KbqPipeTreeSelectComponent, KbqPipeTypes, KbqSaveFilterStatuses, KbqTreeSelectFlatNode, defaultFilterBarPipes, getId, kbqBuildTree, kbqFilterBarPipesProvider };
+export { KBQ_FILTER_BAR_CONFIGURATION, KBQ_FILTER_BAR_DEFAULT_CONFIGURATION, KBQ_FILTER_BAR_PIPES, KBQ_PIPE_DATA, KbqBasePipe, KbqFilterBar, KbqFilterBarButton, KbqFilterBarModule, KbqFilterBarRefresher, KbqFilterBarSearch, KbqFilterReset, KbqFilters, KbqPipeAdd, KbqPipeButton, KbqPipeDateComponent, KbqPipeDatetimeComponent, KbqPipeDirective, KbqPipeMinWidth, KbqPipeMultiSelectComponent, KbqPipeReadonlyComponent, KbqPipeSelectComponent, KbqPipeState, KbqPipeTextComponent, KbqPipeTitleDirective, KbqPipeTreeSelectComponent, KbqPipeTypes, KbqSaveFilterStatuses, KbqTreeSelectFlatNode, defaultFilterBarPipes, defaultOnSearchTimeout, getId, kbqBuildTree, kbqFilterBarPipesProvider };
 //# sourceMappingURL=koobiq-components-filter-bar.mjs.map