diff --git a/packages/components-dev/filter-bar/module.ts b/packages/components-dev/filter-bar/module.ts index 0678b64bb..587ed874c 100644 --- a/packages/components-dev/filter-bar/module.ts +++ b/packages/components-dev/filter-bar/module.ts @@ -18,6 +18,7 @@ import { KbqFilter, KbqFilterBar, KbqFilterBarModule, + KbqPipe, KbqPipeTemplate, KbqPipeTypes } from '@koobiq/components/filter-bar'; @@ -170,6 +171,7 @@ export class DevApp implements AfterViewInit { pipes: [ { name: 'required', + id: 'MultiSelect', value: [ { name: 'Не определен', id: '1' }, { name: 'Легитимное действие', id: '2' } @@ -182,6 +184,7 @@ export class DevApp implements AfterViewInit { }, { name: 'required', + id: 'MultiSelect', value: [{ name: 'Не определен', id: '1' }], type: KbqPipeTypes.MultiSelect, @@ -191,6 +194,7 @@ export class DevApp implements AfterViewInit { }, { name: 'empty', + id: 'MultiSelect', type: KbqPipeTypes.MultiSelect, value: null, @@ -200,6 +204,7 @@ export class DevApp implements AfterViewInit { }, { name: 'cleanable', + id: 'MultiSelect', value: [{ name: 'Не определен', id: '1' }], type: KbqPipeTypes.MultiSelect, @@ -209,6 +214,7 @@ export class DevApp implements AfterViewInit { }, { name: 'removable', + id: 'MultiSelect', value: [{ name: 'Не определен', id: '1' }], type: KbqPipeTypes.MultiSelect, @@ -218,6 +224,7 @@ export class DevApp implements AfterViewInit { }, { name: 'disabled', + id: 'MultiSelect', value: [{ name: 'Не определен', id: '1' }], type: KbqPipeTypes.MultiSelect, @@ -583,7 +590,7 @@ export class DevApp implements AfterViewInit { } ]; pipeTemplates: KbqPipeTemplate[]; - defaultFilter: KbqFilter | null = this.filters[9]; + defaultFilter: KbqFilter | null = this.filters[1]; activeFilter: KbqFilter | null = this.defaultFilter; ngAfterViewInit(): void { @@ -630,6 +637,7 @@ export class DevApp implements AfterViewInit { }, { name: 'MultiSelect', + id: 'MultiSelect', type: KbqPipeTypes.MultiSelect, values: [ { name: 'Option 1', id: '1', type: 'error' }, @@ -820,4 +828,8 @@ export class DevApp implements AfterViewInit { onSearch(value: string) { console.log('onSearch: ', value); } + + onClosePipe($event: KbqPipe) { + console.log('onClosePipe: ', $event); + } } diff --git a/packages/components-dev/filter-bar/template.html b/packages/components-dev/filter-bar/template.html index 09e904a2a..88be84d36 100644 --- a/packages/components-dev/filter-bar/template.html +++ b/packages/components-dev/filter-bar/template.html @@ -10,6 +10,7 @@ [pipeTemplates]="pipeTemplates" [(filter)]="activeFilter" (filterChange)="onFilterChange($event)" + (onClosePipe)="onClosePipe($event)" > (); /** Event that emits whenever the pipe deleted. */ @Output() readonly onRemovePipe = new EventEmitter(); + /** Event that emits whenever the select or multiselect pipe closed. */ + @Output() readonly onClosePipe = new EventEmitter(); /** Whether the current filter is saved and changed */ get isSavedAndChanged(): boolean { diff --git a/packages/components/filter-bar/pipes/base-pipe.ts b/packages/components/filter-bar/pipes/base-pipe.ts index c1c88edac..e788af089 100644 --- a/packages/components/filter-bar/pipes/base-pipe.ts +++ b/packages/components/filter-bar/pipes/base-pipe.ts @@ -2,6 +2,7 @@ import { afterNextRender, AfterViewInit, ChangeDetectorRef, + DestroyRef, Directive, ElementRef, inject, @@ -45,6 +46,8 @@ export abstract class KbqBasePipe implements AfterViewInit { protected readonly filterBar = inject(KbqFilterBar, { optional: true }); /** @docs-private */ protected readonly changeDetectorRef = inject(ChangeDetectorRef); + /** @docs-private */ + protected readonly destroyRef = inject(DestroyRef); /** values to select from the pipe template */ protected values; diff --git a/packages/components/filter-bar/pipes/pipe-multi-select.ts b/packages/components/filter-bar/pipes/pipe-multi-select.ts index 66f88e026..07a91d094 100644 --- a/packages/components/filter-bar/pipes/pipe-multi-select.ts +++ b/packages/components/filter-bar/pipes/pipe-multi-select.ts @@ -1,5 +1,6 @@ import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common'; import { + AfterViewInit, ChangeDetectionStrategy, Component, OnInit, @@ -8,6 +9,7 @@ import { ViewChildren, ViewEncapsulation } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'; import { KbqBadgeModule } from '@koobiq/components/badge'; import { KbqButtonModule } from '@koobiq/components/button'; @@ -59,7 +61,7 @@ import { KbqPipeTitleDirective } from './pipe-title'; KbqPseudoCheckboxModule ] }) -export class KbqPipeMultiSelectComponent extends KbqBasePipe implements OnInit { +export class KbqPipeMultiSelectComponent extends KbqBasePipe implements AfterViewInit, OnInit { /** control for search options */ searchControl: UntypedFormControl = new UntypedFormControl(); /** filtered by search options */ @@ -110,6 +112,15 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe i ); } + /** @docs-private */ + override ngAfterViewInit() { + super.ngAfterViewInit(); + + this.select.closedStream + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe(() => this.filterBar?.onClosePipe.next(this.data)); + } + /** @docs-private */ onSelect(item: KbqSelectValue[]) { this.data.value = item; diff --git a/packages/components/filter-bar/pipes/pipe-select.ts b/packages/components/filter-bar/pipes/pipe-select.ts index 348a20aa6..d4473c8eb 100644 --- a/packages/components/filter-bar/pipes/pipe-select.ts +++ b/packages/components/filter-bar/pipes/pipe-select.ts @@ -1,5 +1,6 @@ import { AsyncPipe, NgClass, NgTemplateOutlet } from '@angular/common'; -import { ChangeDetectionStrategy, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { AfterViewInit, ChangeDetectionStrategy, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms'; import { KbqButtonModule } from '@koobiq/components/button'; import { KbqDividerModule } from '@koobiq/components/divider'; @@ -47,7 +48,7 @@ import { KbqPipeTitleDirective } from './pipe-title'; AsyncPipe ] }) -export class KbqPipeSelectComponent extends KbqBasePipe implements OnInit { +export class KbqPipeSelectComponent extends KbqBasePipe implements AfterViewInit, OnInit { /** control for search options */ searchControl: UntypedFormControl = new UntypedFormControl(); /** filtered by search options */ @@ -66,6 +67,7 @@ export class KbqPipeSelectComponent extends KbqBasePipe implemen return !this.data.value; } + /** @docs-private */ ngOnInit(): void { this.filteredOptions = merge( of(this.values), @@ -73,6 +75,15 @@ export class KbqPipeSelectComponent extends KbqBasePipe implemen ); } + /** @docs-private */ + override ngAfterViewInit() { + super.ngAfterViewInit(); + + this.select.closedStream + .pipe(takeUntilDestroyed(this.destroyRef)) + .subscribe(() => this.filterBar?.onClosePipe.next(this.data)); + } + onSelect(item: KbqSelectValue) { this.data.value = item; this.filterBar?.onChangePipe.emit(this.data); diff --git a/tools/public_api_guard/components/filter-bar.api.md b/tools/public_api_guard/components/filter-bar.api.md index 1852796b1..90091205e 100644 --- a/tools/public_api_guard/components/filter-bar.api.md +++ b/tools/public_api_guard/components/filter-bar.api.md @@ -8,6 +8,7 @@ import { AfterContentInit } from '@angular/core'; import { AfterViewInit } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; import { ChangeDetectorRef } from '@angular/core'; +import { DestroyRef } from '@angular/core'; import { ElementRef } from '@angular/core'; import { EventEmitter } from '@angular/core'; import { FormControl } from '@angular/forms'; @@ -102,6 +103,7 @@ export abstract class KbqBasePipe implements AfterViewInit { constructor(); protected readonly changeDetectorRef: ChangeDetectorRef; readonly data: KbqPipeData; + protected readonly destroyRef: DestroyRef; protected readonly filterBar: KbqFilterBar | null; get isEmpty(): boolean; isMac: boolean; @@ -172,6 +174,7 @@ export class KbqFilterBar { get isSavedAndChanged(): boolean; protected readonly localeService: KbqLocaleService | null; readonly onChangePipe: EventEmitter; + readonly onClosePipe: EventEmitter; readonly onRemovePipe: EventEmitter; readonly openPipe: BehaviorSubject; get pipeTemplates(): KbqPipeTemplate[]; @@ -181,7 +184,7 @@ export class KbqFilterBar { restoreFilterState(filter?: KbqFilter): void; saveFilterState(filter?: KbqFilter): void; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -507,11 +510,12 @@ export class KbqPipeMinWidth { } // @public (undocumented) -export class KbqPipeMultiSelectComponent extends KbqBasePipe implements OnInit { +export class KbqPipeMultiSelectComponent extends KbqBasePipe implements AfterViewInit, OnInit { get checkboxState(): KbqPseudoCheckboxState; compareByValue: (o1: any, o2: any) => boolean; filteredOptions: Observable; get isEmpty(): boolean; + ngAfterViewInit(): void; ngOnInit(): void; onClear(): void; onSelect(item: KbqSelectValue[]): void; @@ -539,11 +543,11 @@ export class KbqPipeReadonlyComponent extends KbqBasePipe { } // @public (undocumented) -export class KbqPipeSelectComponent extends KbqBasePipe implements OnInit { +export class KbqPipeSelectComponent extends KbqBasePipe implements AfterViewInit, OnInit { compareByValue: (o1: any, o2: any) => boolean; filteredOptions: Observable; get isEmpty(): boolean; - // (undocumented) + ngAfterViewInit(): void; ngOnInit(): void; // (undocumented) onSelect(item: KbqSelectValue): void;