Skip to content

Commit b219bba

Browse files
lskramarovlskramarov
authored
chore(filter-bar): added description in api (#DS-3501) (#663)
1 parent 4b594bd commit b219bba

22 files changed

+256
-264
lines changed

‎apps/docs/src/app/services/documentation-items.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import { DocsLocale } from '../constants/locale';
44

55
const expiresAt = (expiresAt: string) => {
66
const createdDate = DateTime.fromISO(expiresAt);
7+
78
if (!createdDate.isValid) {
89
throw new Error(createdDate.invalidReason);
910
}
11+
1012
return createdDate.diffNow('days').days > 0;
1113
};
1214

‎packages/components/filter-bar/filter-bar-button.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { KbqFilterBar } from './filter-bar';
1010
})
1111
export class KbqFilterBarButton {
1212
private readonly button = inject(KbqButton);
13+
/** KbqFilterBar instance */
1314
private readonly filterBar = inject(KbqFilterBar);
1415

1516
constructor() {

‎packages/components/filter-bar/filter-bar.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,18 @@ import { KbqFilters } from './filters';
5252
}
5353
})
5454
export class KbqFilterBar {
55+
/** @docs-private */
5556
protected readonly changeDetectorRef = inject(ChangeDetectorRef);
57+
/** @docs-private */
5658
protected readonly localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
59+
5760
readonly externalConfiguration = inject(KBQ_FILTER_BAR_CONFIGURATION, { optional: true });
5861

5962
configuration;
6063

64+
/** @docs-private */
6165
@ContentChild(KbqFilters) filters: KbqFilters;
66+
/** @docs-private */
6267
@ContentChild(KbqFilterReset) filterReset: KbqFilterReset;
6368

6469
/** Filter that is currently selected */
@@ -101,31 +106,41 @@ export class KbqFilterBar {
101106
/** Event that emits whenever the pipe deleted. */
102107
@Output() readonly onRemovePipe = new EventEmitter<KbqPipe>();
103108

109+
/** Whether the current filter is saved and changed */
104110
get isSavedAndChanged(): boolean {
105111
return this.isSaved && this.isChanged;
106112
}
107113

114+
/** Whether the current filter is saved */
108115
get isSaved(): boolean {
109116
return !!this.filter?.saved;
110117
}
111118

119+
/** Whether the current filter is changed */
112120
get isChanged(): boolean {
113121
return !!this.filter?.changed;
114122
}
115123

124+
/** Whether the current filter is readonly */
116125
get isReadOnly(): boolean {
117126
return !!this.filter?.readonly;
118127
}
119128

129+
/** Whether the current filter is disabled */
120130
get isDisabled(): boolean {
121131
return !!this.filter?.disabled;
122132
}
123133

124134
private savedFilter: KbqFilter | null = null;
125135

136+
/** all changes */
126137
readonly changes = new BehaviorSubject<void>(undefined);
138+
/** internal filter changes */
127139
readonly internalFilterChanges = new BehaviorSubject<KbqFilter | null>(null);
140+
/** internal changes in templates */
128141
readonly internalTemplatesChanges = new BehaviorSubject<KbqPipeTemplate[] | null>(null);
142+
/** this subject need for opens pipe after adding
143+
* @docs-private */
129144
readonly openPipe = new BehaviorSubject<string | number | null>(null);
130145

131146
constructor() {

‎packages/components/filter-bar/filter-bar.types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export enum KbqPipeTypes {
3232
Date = 'date',
3333
Datetime = 'datetime'
3434
}
35-
/** type of pipe */
35+
3636
export type KbqPipeType = `${KbqPipeTypes}` | string;
3737

3838
/** list of pipes available out of the box. */

‎packages/components/filter-bar/filter-reset.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { KbqFilter } from './filter-bar.types';
88
selector: 'kbq-filter-reset',
99
template: `
1010
<button [color]="'theme'" [kbqStyle]="'transparent'" (click)="resetFilter()" kbq-button>
11-
<ng-content>{{ filterBar.configuration.reset.buttonName }}</ng-content>
11+
<ng-content>{{ localeData }}</ng-content>
1212
</button>
1313
`,
1414
host: {
@@ -18,11 +18,18 @@ import { KbqFilter } from './filter-bar.types';
1818
imports: [KbqButtonModule]
1919
})
2020
export class KbqFilterReset {
21-
protected readonly filterBar = inject(KbqFilterBar);
21+
/** KbqFilterBar instance */
22+
private readonly filterBar = inject(KbqFilterBar);
2223

2324
/** Event that is generated whenever the user reset a filter. */
2425
@Output() readonly onResetFilter = new EventEmitter<KbqFilter | null>();
2526

27+
/** localized data
28+
* @docs-private */
29+
get localeData() {
30+
return this.filterBar.configuration.reset.buttonName;
31+
}
32+
2633
protected resetFilter() {
2734
this.onResetFilter.emit(this.filterBar.filter!);
2835

‎packages/components/filter-bar/filter-search.ts

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { KbqFilterBar } from './filter-bar';
2828
[kbqStyle]="'transparent'"
2929
(click)="openSearch()"
3030
kbq-button
31-
kbqTooltip="{{ filterBar.configuration.search.tooltip }}"
31+
kbqTooltip="{{ localeData.tooltip }}"
3232
>
3333
<i kbq-icon="kbq-magnifying-glass_16"></i>
3434
</button>
@@ -42,7 +42,7 @@ import { KbqFilterBar } from './filter-bar';
4242
(keydown.escape)="onEscape()"
4343
autocomplete="off"
4444
kbqInput
45-
placeholder="{{ filterBar.configuration.search.placeholder }}"
45+
placeholder="{{ localeData.placeholder }}"
4646
/>
4747
4848
<kbq-cleaner (click)="onClear()" />
@@ -65,17 +65,27 @@ import { KbqFilterBar } from './filter-bar';
6565
}
6666
})
6767
export class KbqFilterBarSearch {
68-
protected readonly filterBar = inject(KbqFilterBar);
69-
protected readonly changeDetectorRef = inject(ChangeDetectorRef);
68+
/** KbqFilterBar instance */
69+
private readonly filterBar = inject(KbqFilterBar);
70+
private readonly changeDetectorRef = inject(ChangeDetectorRef);
7071

71-
@ViewChild(KbqInput) input: KbqInput;
72-
@ViewChild(KbqButton) button: KbqButton;
73-
@ViewChild(KbqTooltipTrigger) tooltip: KbqTooltipTrigger;
72+
@ViewChild(KbqInput) private input: KbqInput;
73+
@ViewChild(KbqButton) private button: KbqButton;
74+
@ViewChild(KbqTooltipTrigger) private tooltip: KbqTooltipTrigger;
7475

76+
/** control for search */
7577
searchControl: UntypedFormControl = new UntypedFormControl();
7678

79+
/** Whether the search active */
7780
isSearchActive: boolean = false;
7881

82+
/** localized data
83+
* @docs-private */
84+
get localeData() {
85+
return this.filterBar.configuration.search;
86+
}
87+
88+
/** event that is generated whenever a user performs a search. */
7989
@Output() readonly onSearch = new EventEmitter<string>();
8090

8191
constructor() {
@@ -90,12 +100,14 @@ export class KbqFilterBarSearch {
90100
setTimeout(() => this.input.focus());
91101
}
92102

103+
/** @docs-private */
93104
onBlur(): void {
94105
if (this.searchControl.value) return;
95106

96107
this.onEscape();
97108
}
98109

110+
/** @docs-private */
99111
onEscape(): void {
100112
this.isSearchActive = false;
101113

@@ -104,6 +116,7 @@ export class KbqFilterBarSearch {
104116
this.tooltip.hide();
105117
}
106118

119+
/** @docs-private */
107120
onClear() {
108121
this.isSearchActive = false;
109122

@@ -114,6 +127,7 @@ export class KbqFilterBarSearch {
114127
});
115128
}
116129

130+
/** @docs-private */
117131
onReset = () => {
118132
this.changeDetectorRef.markForCheck();
119133
};

‎packages/components/filter-bar/filters.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
} @else {
2424
<ng-content>
2525
<i kbq-icon="kbq-list_16"></i>
26-
{{ filterBar.configuration.filters.defaultName }}
26+
{{ localeData.defaultName }}
2727
</ng-content>
2828
}
2929
</span>
@@ -33,7 +33,7 @@
3333
<button
3434
kbq-button
3535
kbqFilterBarButton
36-
kbqTooltip="{{ filterBar.configuration.filters.saveNewFilterTooltip }}"
36+
kbqTooltip="{{ localeData.saveNewFilterTooltip }}"
3737
class="kbq-button_action"
3838
[color]="colors.Empty"
3939
(click)="openSaveAsNewFilterPopover()"
@@ -68,7 +68,7 @@
6868
#search
6969
autocomplete="off"
7070
kbqInput
71-
placeholder="{{ filterBar.configuration.filters.searchPlaceholder }}"
71+
placeholder="{{ localeData.searchPlaceholder }}"
7272
[formControl]="searchControl"
7373
(click)="stopEventPropagation($event)"
7474
(keydown)="searchKeydownHandler($event)"
@@ -89,7 +89,7 @@
8989
</button>
9090
} @empty {
9191
<button kbq-dropdown-item [disabled]="true">
92-
{{ filterBar.configuration.filters.searchEmptyResult }}
92+
{{ localeData.searchEmptyResult }}
9393
</button>
9494
}
9595

@@ -98,7 +98,7 @@
9898

9999
<button kbq-dropdown-item (click)="openSaveAsNewFilterPopover()">
100100
<i kbq-icon="kbq-plus_16"></i>
101-
{{ filterBar.configuration.filters.saveAsNewFilter }}
101+
{{ localeData.saveAsNewFilter }}
102102
</button>
103103
</kbq-dropdown>
104104

@@ -110,21 +110,21 @@
110110
(click)="saveChanges()"
111111
>
112112
<i kbq-icon="kbq-floppy-disk_16"></i>
113-
{{ filterBar.configuration.filters.saveChanges }}
113+
{{ localeData.saveChanges }}
114114
@if (filterBar.isSavedAndChanged) {
115115
<i class="kbq kbq-icon kbq-icon-button kbq-circle-xs_16 kbq-warning layout-margin-left-xs"></i>
116116
}
117117
</button>
118118
}
119119
<button kbq-dropdown-item (click)="openSaveAsNewFilterPopover()">
120120
<i kbq-icon="kbq-plus_16"></i>
121-
{{ filterBar.configuration.filters.saveAsNew }}
121+
{{ localeData.saveAsNew }}
122122
</button>
123123

124124
@if (!filterBar.isReadOnly) {
125125
<button kbq-dropdown-item (click)="openChangeFilterNamePopover()">
126126
<i kbq-icon="kbq-pencil_16"></i>
127-
{{ filterBar.configuration.filters.change }}
127+
{{ localeData.change }}
128128
</button>
129129
}
130130

@@ -135,13 +135,13 @@
135135
@if (filterBar.isSavedAndChanged) {
136136
<button kbq-dropdown-item (click)="resetFilterChanges()">
137137
<i kbq-icon="kbq-xmark-circle_16"></i>
138-
{{ filterBar.configuration.filters.resetChanges }}
138+
{{ localeData.resetChanges }}
139139
</button>
140140
}
141141
@if (!filterBar.isReadOnly) {
142142
<button kbq-dropdown-item (click)="this.onRemoveFilter.next(this.filter!)">
143143
<i kbq-icon="kbq-trash_16"></i>
144-
{{ filterBar.configuration.filters.remove }}
144+
{{ localeData.remove }}
145145
</button>
146146
}
147147
</kbq-dropdown>
@@ -156,13 +156,13 @@
156156
}
157157
<div class="kbq-form-vertical">
158158
<div class="kbq-form__row">
159-
<label class="kbq-form__label">{{ filterBar.configuration.filters.name }}</label>
159+
<label class="kbq-form__label">{{ localeData.name }}</label>
160160

161161
<kbq-form-field class="kbq-form__control">
162162
<input #newFilterName kbqInput type="text" [formControl]="filterName" />
163163

164164
@if (filterName.hasError('filterNameAlreadyExist')) {
165-
<kbq-hint [color]="'error'">{{ filterBar.configuration.filters.error }}</kbq-hint>
165+
<kbq-hint [color]="'error'">{{ localeData.error }}</kbq-hint>
166166
}
167167
</kbq-form-field>
168168
</div>
@@ -171,9 +171,9 @@
171171

172172
<ng-template #saveAsNewPopoverFooter>
173173
<button kbq-button class="layout-margin-right-l" [color]="'contrast'" [kbqStyle]="'filled'" (click)="saveAsNew()">
174-
{{ filterBar.configuration.filters.saveButton }}
174+
{{ localeData.saveButton }}
175175
</button>
176176
<button kbq-button [color]="'contrast-fade'" [kbqStyle]="'filled'" (click)="closePopover()">
177-
{{ filterBar.configuration.filters.cancelButton }}
177+
{{ localeData.cancelButton }}
178178
</button>
179179
</ng-template>

0 commit comments

Comments
 (0)