tailjng 0.1.10 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/interfaces/crud/filter.interface.d.ts +6 -0
  2. package/package.json +1 -1
  3. package/src/lib/components/filter/filter-complete/complete-filter.component.html +62 -57
  4. package/src/lib/components/filter/filter-complete/complete-filter.component.ts +2 -1
  5. package/src/lib/components/select/select-dropdown/dropdown-select.component.html +20 -6
  6. package/src/lib/components/select/select-dropdown/dropdown-select.component.ts +371 -64
  7. package/src/lib/components/select/select-dropdown/dropdown-select.util.ts +154 -3
  8. package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.component.html +20 -5
  9. package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.component.ts +357 -59
  10. package/src/lib/components/select/select-multi-dropdown/multi-dropdown-select.util.ts +7 -0
package/lib/interfaces/crud/filter.interface.d.ts CHANGED
@@ -67,6 +67,8 @@ export interface DropdownFilterSelect {
67
67
  optionLabel?: string | string[];
68
68
  optionValue?: string;
69
69
  labelSeparator?: string;
70
+ optionLabelTemplate?: string;
71
+ optionLabelFn?: (option: Record<string, unknown>) => string;
70
72
  placeholder?: string;
71
73
  showClear?: boolean;
72
74
  options: any[];
@@ -85,6 +87,10 @@ export interface SearchableFilterSelect {
85
87
  optionLabel: string | string[];
86
88
  optionValue: string;
87
89
  labelSeparator?: string;
90
+ optionLabelTemplate?: string;
91
+ optionLabelFn?: (option: Record<string, unknown>) => string;
92
+ responseKey?: string;
93
+ dataPath?: string;
88
94
  placeholder?: string;
89
95
  showClear?: boolean;
90
96
  loadOnInit?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tailjng",
3
- "version": "0.1.10",
3
+ "version": "0.1.11",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^19.2.0",
6
6
  "@angular/core": "^19.2.0",
package/src/lib/components/filter/filter-complete/complete-filter.component.html CHANGED
@@ -139,63 +139,68 @@
139
139
  <div class="flex flex-col gap-2">
140
140
  @for (filter of filtersSelect; track $index) {
141
141
  @if (filter.isVisible ?? true) {
142
- @if (filter.type === "dropdown") {
143
- <div class="relative">
144
- <JDropdownSelect
145
- [type]="'dropdown'"
146
- [(ngModel)]="filter.selected"
147
- (selectionChange)="
148
- filter.onSelected ? filter.onSelected($event) : null
149
- "
150
- [optionLabel]="filter.optionLabel ?? ''"
151
- [optionValue]="filter.optionValue ?? ''"
152
- [labelSeparator]="filter.labelSeparator ?? ''"
153
- [placeholder]="filter.placeholder ?? ''"
154
- [showClear]="filter.showClear ?? false"
155
- [options]="filter.options"
156
- [sort]="filter.sort ?? 'ASC'"
157
- [showAllOption]="filter.showAllOption ?? false"
158
- [isFilterSelect]="true"
159
- />
160
- </div>
161
- }
162
-
163
- <!-- Searchable -->
164
- @if (filter.type === "searchable") {
165
- <div class="relative">
166
- <JDropdownSelect
167
- [type]="'searchable'"
168
- [(ngModel)]="filter.selected"
169
- (selectionChange)="filter.onSelected?.($event)"
170
- [endpoint]="filter.endpoint"
171
- [optionLabel]="filter.optionLabel"
172
- [optionValue]="filter.optionValue"
173
- [labelSeparator]="filter.labelSeparator ?? ''"
174
- [placeholder]="filter.placeholder ?? ''"
175
- [showClear]="filter.showClear ?? false"
176
- [loadOnInit]="filter.loadOnInit ?? false"
177
- [isSearch]="filter.isSearch ?? true"
178
- [searchFields]="filter.searchFields || []"
179
- [defaultFilters]="filter.defaultFilters || {}"
180
- [sort]="filter.sort ?? 'ASC'"
181
- [showAllOption]="filter.showAllOption ?? false"
182
- [isFilterSelect]="true"
183
- />
184
- </div>
185
- }
186
-
187
- @if (filter.type === "multi-table") {
188
- <div class="relative">
189
- <JMultiTableSelect
190
- [(ngModel)]="filter.selected"
191
- (selectionChange)="
192
- filter.onSelected ? filter.onSelected($event) : null
193
- "
194
- [columns]="filter.columns"
195
- [btnText]="filter.btnText ?? ''"
196
- [isFilterSelect]="true"
197
- />
198
- </div>
142
+ @switch (filter.type) {
143
+ @case ("dropdown") {
144
+ <div class="relative">
145
+ <JDropdownSelect
146
+ [type]="'dropdown'"
147
+ [(ngModel)]="filter.selected"
148
+ (selectionChange)="
149
+ filter.onSelected ? filter.onSelected($event) : null
150
+ "
151
+ [optionLabel]="filter.optionLabel ?? ''"
152
+ [optionValue]="filter.optionValue ?? ''"
153
+ [labelSeparator]="filter.labelSeparator ?? ''"
154
+ [optionLabelTemplate]="filter.optionLabelTemplate ?? ''"
155
+ [optionLabelFn]="filter.optionLabelFn"
156
+ [placeholder]="filter.placeholder ?? ''"
157
+ [showClear]="filter.showClear ?? false"
158
+ [options]="filter.options"
159
+ [sort]="filter.sort ?? 'ASC'"
160
+ [showAllOption]="filter.showAllOption ?? false"
161
+ [isFilterSelect]="true"
162
+ />
163
+ </div>
164
+ }
165
+ @case ("searchable") {
166
+ <div class="relative">
167
+ <JDropdownSelect
168
+ [type]="'searchable'"
169
+ [(ngModel)]="filter.selected"
170
+ (selectionChange)="filter.onSelected?.($event)"
171
+ [endpoint]="filter.endpoint"
172
+ [optionLabel]="filter.optionLabel"
173
+ [optionValue]="filter.optionValue"
174
+ [labelSeparator]="filter.labelSeparator ?? ''"
175
+ [optionLabelTemplate]="filter.optionLabelTemplate ?? ''"
176
+ [optionLabelFn]="filter.optionLabelFn"
177
+ [responseKey]="filter.responseKey ?? ''"
178
+ [dataPath]="filter.dataPath ?? ''"
179
+ [placeholder]="filter.placeholder ?? ''"
180
+ [showClear]="filter.showClear ?? false"
181
+ [loadOnInit]="filter.loadOnInit ?? false"
182
+ [isSearch]="filter.isSearch ?? true"
183
+ [searchFields]="filter.searchFields || []"
184
+ [defaultFilters]="filter.defaultFilters || {}"
185
+ [sort]="filter.sort ?? 'ASC'"
186
+ [showAllOption]="filter.showAllOption ?? false"
187
+ [isFilterSelect]="true"
188
+ />
189
+ </div>
190
+ }
191
+ @case ("multi-table") {
192
+ <div class="relative">
193
+ <JMultiTableSelect
194
+ [(ngModel)]="filter.selected"
195
+ (selectionChange)="
196
+ filter.onSelected ? filter.onSelected($event) : null
197
+ "
198
+ [columns]="filter.columns"
199
+ [btnText]="filter.btnText ?? ''"
200
+ [isFilterSelect]="true"
201
+ />
202
+ </div>
203
+ }
199
204
  }
200
205
  }
201
206
  }
package/src/lib/components/filter/filter-complete/complete-filter.component.ts CHANGED
@@ -2,7 +2,8 @@ import { Component, EventEmitter, Input, Output, OnDestroy, OnInit, ViewChild, E
2
2
  import { NgClass } from '@angular/common';
3
3
  import { FormsModule } from '@angular/forms';
4
4
  import { Subject, Subscription, debounceTime, filter, forkJoin } from 'rxjs';
5
- import { TableColumn, FilterButton, FilterSelect, JUploadFilterService, JAlertDialogService, JAlertToastService, JGenericCrudService, LoadingState, JExcelService, JExcelFilterService } from 'tailjng';
5
+ import { TableColumn, FilterButton, JUploadFilterService, JAlertDialogService, JAlertToastService, JGenericCrudService, LoadingState, JExcelService, JExcelFilterService } from 'tailjng';
6
+ import type { FilterSelect } from '../../../interfaces/crud/filter.interface';
6
7
  import { JDropdownSelectComponent } from '../../select/select-dropdown/dropdown-select.component';
7
8
  import { JMultiTableSelectComponent } from '../../select/select-multi-table/multi-table-select.component';
8
9
  import { JSwitchCheckboxComponent } from '../../checkbox/checkbox-switch/switch-checkbox.component';
package/src/lib/components/select/select-dropdown/dropdown-select.component.html CHANGED
@@ -115,9 +115,11 @@
115
115
 
116
116
  <!-- Option list -->
117
117
  <div
118
+ #optionsList
118
119
  class="jdropdown-options-list max-h-45 max-[400px]:max-h-38 overflow-x-hidden overflow-y-auto flex flex-col gap-1 scroll-element"
120
+ (scroll)="onOptionsListScroll($event)"
119
121
  >
120
- @if (isLoading) {
122
+ @if (isLoading && filteredOptions.length === 0) {
121
123
  <div
122
124
  class="flex gap-3 text-black/50 dark:text-white/50 items-center justify-center py-4"
123
125
  >
@@ -136,12 +138,11 @@
136
138
  (click)="selectOption(option)"
137
139
  class="flex gap-2 items-center border border-accent dark:border-dark-accent/50 px-3 py-2 rounded text-sm max-[400px]:h-[35px] max-[400px]:text-[12px] cursor-pointer text-black! dark:text-white! hover:bg-accent/50 hover:dark:bg-dark-accent/40"
138
140
  [ngClass]="{
139
- 'bg-accent! dark:bg-dark-accent/80!':
140
- selectedValue === option.value,
141
- 'text-black': selectedValue === option.value,
141
+ 'bg-accent! dark:bg-dark-accent/80!': isOptionSelected(option.value),
142
+ 'text-black': isOptionSelected(option.value),
142
143
  }"
143
144
  >
144
- @if (selectedValue === option.value) {
145
+ @if (isOptionSelected(option.value)) {
145
146
  <JIcon
146
147
  [icon]="Icons.Check"
147
148
  [size]="15"
@@ -164,11 +165,24 @@
164
165
  </div>
165
166
  </div>
166
167
  }
167
- @if (filteredOptions.length === 0) {
168
+ @if (filteredOptions.length === 0 && !isLoading) {
168
169
  <div class="px-3 py-2 text-sm text-gray-500">
169
170
  No hay opciones disponibles
170
171
  </div>
171
172
  }
173
+ @if (isLoadingMore) {
174
+ <div
175
+ class="flex gap-2 text-black/50 dark:text-white/50 items-center justify-center py-2"
176
+ >
177
+ <JIcon
178
+ [icon]="Icons.Loader2"
179
+ [size]="16"
180
+ iconClass="animate-spin"
181
+ [ariaHidden]="true"
182
+ />
183
+ Cargando más...
184
+ </div>
185
+ }
172
186
  }
173
187
  </div>
174
188
  </div>