@libs-ui/components-dropdown 0.2.357-2 → 0.2.357-20
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.
- package/README.md +21 -10
- package/dropdown.component.d.ts +23 -3
- package/esm2022/dropdown.component.mjs +85 -13
- package/esm2022/interfaces/function-control-event.interface.mjs +1 -1
- package/fesm2022/libs-ui-components-dropdown.mjs +84 -12
- package/fesm2022/libs-ui-components-dropdown.mjs.map +1 -1
- package/interfaces/function-control-event.interface.d.ts +6 -0
- package/package.json +11 -11
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL2ludGVyZmFjZXMvZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgSURyb3Bkb3duRnVuY3Rpb25Db250cm9sRXZlbnQge1xuICBjaGVja0lzVmFsaWQ6ICgpID0+IFByb21pc2U8Ym9vbGVhbj47XG4gIHJlc2V0RXJyb3I6ICgpID0+IFByb21pc2U8dm9pZD47XG4gIHNldEVycm9yPzogKG1lc3NhZ2U6IHN0cmluZykgPT4gUHJvbWlzZTx2b2lkPjtcbiAgcmVtb3ZlTGlzdDogKCkgPT4gUHJvbWlzZTx2b2lkPjtcbiAgdXBkYXRlTGFiZWxJdGVtU2VsZWN0ZWQ6IChsYWJlbDogc3RyaW5nKSA9PiBQcm9taXNlPHZvaWQ+O1xuICByZXNldDogKCkgPT4gUHJvbWlzZTx2b2lkPjtcbiAgcmVmcmVzaExpc3Q6ICgpID0+IFByb21pc2U8dm9pZD47XG4gIHNldEl0ZW1TZWxlY3RlZEJ5S2V5OiAoaWQ6IHVua25vd24pID0+IFByb21pc2U8dm9pZD47XG4gIGdldERpc2FibGU6ICgpID0+IFByb21pc2U8Ym9vbGVhbj47XG59XG4iXX0=
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL2ludGVyZmFjZXMvZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgSURyb3Bkb3duRnVuY3Rpb25Db250cm9sRXZlbnQge1xuICBjaGVja0lzVmFsaWQ6ICgpID0+IFByb21pc2U8Ym9vbGVhbj47XG4gIHJlc2V0RXJyb3I6ICgpID0+IFByb21pc2U8dm9pZD47XG4gIHNldEVycm9yPzogKG1lc3NhZ2U6IHN0cmluZykgPT4gUHJvbWlzZTx2b2lkPjtcbiAgcmVtb3ZlTGlzdDogKCkgPT4gUHJvbWlzZTx2b2lkPjtcbiAgdXBkYXRlTGFiZWxJdGVtU2VsZWN0ZWQ6IChsYWJlbDogc3RyaW5nKSA9PiBQcm9taXNlPHZvaWQ+O1xuICByZXNldDogKCkgPT4gUHJvbWlzZTx2b2lkPjtcbiAgcmVmcmVzaExpc3Q6ICgpID0+IFByb21pc2U8dm9pZD47XG4gIHNldEl0ZW1TZWxlY3RlZEJ5S2V5OiAoaWQ6IHVua25vd24pID0+IFByb21pc2U8dm9pZD47XG4gIHNldFNlbGVjdGVkS2V5OiAoa2V5OiB1bmtub3duLCBvcHRpb25zPzogeyByZXNldD86IGJvb2xlYW4gfSkgPT4gUHJvbWlzZTx2b2lkPjtcbiAgc2V0U2VsZWN0ZWRNdWx0aUtleTogKGtleXM6IHVua25vd25bXSwgb3B0aW9ucz86IHsgcmVzZXQ/OiBib29sZWFuIH0pID0+IFByb21pc2U8dm9pZD47XG4gIGdldERpc2FibGU6ICgpID0+IFByb21pc2U8Ym9vbGVhbj47XG59XG4iXX0=
|
|
@@ -40,8 +40,21 @@ class LibsUiComponentsDropdownComponent {
|
|
|
40
40
|
loadingList = signal(false);
|
|
41
41
|
items = signal([]);
|
|
42
42
|
popoverItemSelected = signal(undefined);
|
|
43
|
+
/**
|
|
44
|
+
* Mốc z-index THỰC DÙNG của dropdown.
|
|
45
|
+
*
|
|
46
|
+
* 🔴 Panel và danh sách con bắt buộc dùng chung một giá trị. Trước đây panel lấy `zIndex() ?? 1000`
|
|
47
|
+
* còn danh sách con nhận thẳng `zIndex()`: khi nơi gọi không truyền `zIndex`, danh sách nhận
|
|
48
|
+
* `undefined`, các template con tính `zIndex() + 1` ra `NaN` nên tooltip của từng dòng mất hẳn
|
|
49
|
+
* z-index và chui xuống DƯỚI panel — người dùng hover vào dòng bị cắt chữ thì thấy tooltip nằm
|
|
50
|
+
* sau panel.
|
|
51
|
+
*/
|
|
52
|
+
zIndexResolved = computed(() => this.zIndex() ?? 1000);
|
|
43
53
|
labelItemSelectedComputed = computed(this.getLabelItemSelected.bind(this));
|
|
44
54
|
autoSelectedFirstItemCallOutsideBefore = signal(false);
|
|
55
|
+
// Cờ: true khi đang chọn item nội bộ → effect tự-chọn (constructor) bỏ qua, tránh race async.
|
|
56
|
+
// Đọc trong effect bằng untracked() để KHÔNG thành dependency (tránh effect tự kích lại khi reset cờ).
|
|
57
|
+
isSelectingInternally = signal(false);
|
|
45
58
|
keysSelected = signal([]);
|
|
46
59
|
popoverFunctionControl = signal(undefined);
|
|
47
60
|
fieldKey = signal('id');
|
|
@@ -107,6 +120,13 @@ class LibsUiComponentsDropdownComponent {
|
|
|
107
120
|
allowSelectItemMultiple = input();
|
|
108
121
|
focusInputSearch = input(true);
|
|
109
122
|
onlyEmitDataWhenReset = input(); // true khi muốn emit sự kiện thay đổi key
|
|
123
|
+
/**
|
|
124
|
+
* Chỉ emit outSelectMultiKey khi người dùng click tay.
|
|
125
|
+
* - `false` (mặc định): emit 1 lần lúc render nếu có sẵn key selected, các echo sau đó bị tắt.
|
|
126
|
+
* - `true`: bỏ luôn emit lần đầu khi render, chỉ emit khi click tay thật.
|
|
127
|
+
* @default false
|
|
128
|
+
*/
|
|
129
|
+
onlyEmitMultiKeyWhenManualClick = input(false);
|
|
110
130
|
resetKeyWhenSelectAllKey = input();
|
|
111
131
|
listConfigHasDivider = input(true);
|
|
112
132
|
classIncludeIcon = input('ml-[8px]', { transform: (value) => value || 'ml-[8px]' });
|
|
@@ -136,7 +156,9 @@ class LibsUiComponentsDropdownComponent {
|
|
|
136
156
|
}
|
|
137
157
|
});
|
|
138
158
|
effect(() => {
|
|
139
|
-
|
|
159
|
+
// Đọc cờ qua untracked để cờ KHÔNG trở thành dependency của effect (tránh tự kích lại khi set cờ).
|
|
160
|
+
const isSelectingInternally = untracked(() => this.isSelectingInternally());
|
|
161
|
+
if (!isNil(this.listKeySelected()) && this.listKeySelected() !== '' && !this.itemsSelected() && !this.autoSelectedFirstItemCallOutsideBefore() && !isSelectingInternally) {
|
|
140
162
|
untracked(() => {
|
|
141
163
|
this.handlerSelectedKey({ key: this.listKeySelected(), item: undefined, isClickManual: false });
|
|
142
164
|
});
|
|
@@ -148,7 +170,9 @@ class LibsUiComponentsDropdownComponent {
|
|
|
148
170
|
}
|
|
149
171
|
});
|
|
150
172
|
effect(() => {
|
|
151
|
-
|
|
173
|
+
// Đọc cờ qua untracked để không thành dependency (xem handlerSelectedKey / handlerSelectMultiKey).
|
|
174
|
+
const isSelectingInternally = untracked(() => this.isSelectingInternally());
|
|
175
|
+
if (this.listMultiKeySelected() && !this.autoSelectedFirstItemCallOutsideBefore() && !isSelectingInternally) {
|
|
152
176
|
untracked(() => {
|
|
153
177
|
const previousValue = this.keysSelected() || [];
|
|
154
178
|
const currentValue = this.listMultiKeySelected() || [];
|
|
@@ -202,6 +226,18 @@ class LibsUiComponentsDropdownComponent {
|
|
|
202
226
|
updateLabelItemSelected: async (label) => this.itemsSelected.update((value) => ({ ...value, [this.fieldLabel()]: this.translate.instant(label) })),
|
|
203
227
|
refreshList: async () => this.listFunctionControl()?.refresh(),
|
|
204
228
|
setItemSelectedByKey: this.setItemSelectedByKey.bind(this),
|
|
229
|
+
setSelectedKey: async (key, options) => {
|
|
230
|
+
if (options?.reset) {
|
|
231
|
+
await this.reset();
|
|
232
|
+
}
|
|
233
|
+
await this.handlerSelectedKey({ key, item: undefined, isClickManual: false });
|
|
234
|
+
},
|
|
235
|
+
setSelectedMultiKey: async (keys, options) => {
|
|
236
|
+
if (options?.reset) {
|
|
237
|
+
await this.reset();
|
|
238
|
+
}
|
|
239
|
+
await this.handlerSelectMultiKey({ keys, mapKeys: [], isClickManual: false });
|
|
240
|
+
},
|
|
205
241
|
};
|
|
206
242
|
}
|
|
207
243
|
defaultConvertItemSelected(item) {
|
|
@@ -301,6 +337,17 @@ class LibsUiComponentsDropdownComponent {
|
|
|
301
337
|
this.popoverFunctionControl.set(event);
|
|
302
338
|
}
|
|
303
339
|
async handlerSelectedKey(event) {
|
|
340
|
+
// Bật cờ đồng bộ ngay đầu để effect tự-chọn (constructor) bỏ qua trong lúc đang chọn nội bộ.
|
|
341
|
+
// Tránh race: listKeySelected.set() (đồng bộ) kích effect TRƯỚC khi itemsSelected.set() (sau await) kịp chạy.
|
|
342
|
+
this.isSelectingInternally.set(true);
|
|
343
|
+
try {
|
|
344
|
+
await this.processSelectedKey(event);
|
|
345
|
+
}
|
|
346
|
+
finally {
|
|
347
|
+
this.isSelectingInternally.set(false);
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
async processSelectedKey(event) {
|
|
304
351
|
const key = event?.key;
|
|
305
352
|
const item = event?.item;
|
|
306
353
|
const isClickManual = event?.isClickManual;
|
|
@@ -330,10 +377,22 @@ class LibsUiComponentsDropdownComponent {
|
|
|
330
377
|
this.outSelectKey.emit({ ...event, tabKeyActive: this.tabKeyActive() });
|
|
331
378
|
return;
|
|
332
379
|
}
|
|
333
|
-
this.itemsSelected.set(await this.
|
|
380
|
+
this.itemsSelected.set(await this.prepareItemSelectedDisplay(item));
|
|
334
381
|
this.outSelectKey.emit({ ...event, tabKeyActive: this.tabKeyActive() });
|
|
335
382
|
}
|
|
336
|
-
async handlerSelectMultiKey(event
|
|
383
|
+
async handlerSelectMultiKey(event) {
|
|
384
|
+
// Bật cờ đồng bộ để effect tự-chọn multi (constructor) bỏ qua trong lúc đang chọn nội bộ (tránh race async).
|
|
385
|
+
this.isSelectingInternally.set(true);
|
|
386
|
+
try {
|
|
387
|
+
await this.processSelectMultiKey(event);
|
|
388
|
+
}
|
|
389
|
+
finally {
|
|
390
|
+
this.isSelectingInternally.set(false);
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
async processSelectMultiKey(event) {
|
|
394
|
+
// Cờ click tay đọc trực tiếp từ event (list/group đã truyền đúng), không cần tham số.
|
|
395
|
+
const isClickManualEmit = event?.isClickManual ?? false;
|
|
337
396
|
if (this.listConfig()?.configTemplateGroup?.()?.singleSelectItem && event?.mapKeys?.length) {
|
|
338
397
|
const itemClickManual = event.mapKeys.find((mapKey) => mapKey.item?.isCheckManual);
|
|
339
398
|
if (itemClickManual) {
|
|
@@ -343,23 +402,36 @@ class LibsUiComponentsDropdownComponent {
|
|
|
343
402
|
this.popoverFunctionControl()?.removePopoverOverlay();
|
|
344
403
|
}
|
|
345
404
|
}
|
|
405
|
+
// Chặn echo: sau khi chọn, list ghi ngược multiKeySelected về gây emit lặp với cùng danh sách key.
|
|
406
|
+
// Nếu KHÔNG phải click tay và key không đổi so với selection hiện tại → bỏ qua để không emit trùng.
|
|
407
|
+
if (!isClickManualEmit && isEqual([...(event?.keys || [])], this.keysSelected())) {
|
|
408
|
+
return;
|
|
409
|
+
}
|
|
346
410
|
this.keysSelected.set([...(event?.keys || [])]);
|
|
347
411
|
this.listMultiKeySelected.set([...(event?.keys || [])]);
|
|
348
412
|
this.lengthKeys.set(event?.keys?.length || 0);
|
|
349
413
|
this.checkValid();
|
|
414
|
+
// Chế độ chỉ emit khi click tay: vẫn cập nhật state/label nhưng không emit event không phải click tay (kể cả lần render đầu).
|
|
415
|
+
const shouldEmit = isClickManualEmit || !this.onlyEmitMultiKeyWhenManualClick();
|
|
350
416
|
if (this.lengthKeys() > 1) {
|
|
351
|
-
|
|
417
|
+
if (shouldEmit) {
|
|
418
|
+
this.outSelectMultiKey.emit({ ...(event || {}), isClickManual: isClickManualEmit, tabKeyActive: this.tabKeyActive() });
|
|
419
|
+
}
|
|
352
420
|
return;
|
|
353
421
|
}
|
|
354
422
|
const key = event?.keys[0];
|
|
355
423
|
let item = event?.mapKeys?.find((item) => item.key === key)?.item;
|
|
356
424
|
if (this.lengthKeys() && !item && this.httpRequestDetailItemById()) {
|
|
357
425
|
item = await this.setItemSelectedByKey(key);
|
|
358
|
-
|
|
426
|
+
if (shouldEmit) {
|
|
427
|
+
this.outSelectMultiKey.emit({ keys: [key], mapKeys: [{ key, item }], isClickManual: isClickManualEmit, tabKeyActive: this.tabKeyActive() });
|
|
428
|
+
}
|
|
359
429
|
return;
|
|
360
430
|
}
|
|
361
|
-
this.itemsSelected.set(await this.
|
|
362
|
-
|
|
431
|
+
this.itemsSelected.set(await this.prepareItemSelectedDisplay(item));
|
|
432
|
+
if (shouldEmit) {
|
|
433
|
+
this.outSelectMultiKey.emit({ ...(event || {}), isClickManual: isClickManualEmit, tabKeyActive: this.tabKeyActive() });
|
|
434
|
+
}
|
|
363
435
|
}
|
|
364
436
|
async setItemSelectedByKey(key) {
|
|
365
437
|
const httpRequestDetailItemById = this.httpRequestDetailItemById();
|
|
@@ -371,7 +443,7 @@ class LibsUiComponentsDropdownComponent {
|
|
|
371
443
|
const { argumentsValue, guideAutoUpdateArgumentsValue } = httpRequestDetailItemById;
|
|
372
444
|
this.httpRequestService.updateArguments(argumentsValue, { key, dropdownTabKeyActive: this.tabKeyActive() }, {}, '', false, false, guideAutoUpdateArgumentsValue);
|
|
373
445
|
const result = await this.httpRequestService.callApi(httpRequestDetailItemById);
|
|
374
|
-
this.itemsSelected.set(await this.
|
|
446
|
+
this.itemsSelected.set(await this.prepareItemSelectedDisplay(result?.data?.[0] || result?.data));
|
|
375
447
|
this.loadingDetail.set(false);
|
|
376
448
|
return this.itemsSelected();
|
|
377
449
|
}
|
|
@@ -442,7 +514,7 @@ class LibsUiComponentsDropdownComponent {
|
|
|
442
514
|
this.keysSelected.set([]);
|
|
443
515
|
this.error.set(undefined);
|
|
444
516
|
}
|
|
445
|
-
async
|
|
517
|
+
async prepareItemSelectedDisplay(item) {
|
|
446
518
|
const itemClone = cloneDeep(item);
|
|
447
519
|
if (itemClone) {
|
|
448
520
|
this.convertItemSelected()(itemClone, this.translate);
|
|
@@ -467,11 +539,11 @@ class LibsUiComponentsDropdownComponent {
|
|
|
467
539
|
this.outChangStageFlagMouse.emit(flag);
|
|
468
540
|
}
|
|
469
541
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
470
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDropdownComponent, isStandalone: true, selector: "libs_ui-components-dropdown", inputs: { useXssFilter: { classPropertyName: "useXssFilter", publicName: "useXssFilter", isSignal: true, isRequired: false, transformFunction: null }, popoverElementRefCustom: { classPropertyName: "popoverElementRefCustom", publicName: "popoverElementRefCustom", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, flagMouseContent: { classPropertyName: "flagMouseContent", publicName: "flagMouseContent", isSignal: true, isRequired: false, transformFunction: null }, popoverCustomConfig: { classPropertyName: "popoverCustomConfig", publicName: "popoverCustomConfig", isSignal: true, isRequired: false, transformFunction: null }, isNgContent: { classPropertyName: "isNgContent", publicName: "isNgContent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, convertItemSelected: { classPropertyName: "convertItemSelected", publicName: "convertItemSelected", isSignal: true, isRequired: false, transformFunction: null }, getPopoverItemSelected: { classPropertyName: "getPopoverItemSelected", publicName: "getPopoverItemSelected", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDetailItemById: { classPropertyName: "httpRequestDetailItemById", publicName: "httpRequestDetailItemById", isSignal: true, isRequired: false, transformFunction: null }, lengthKeys: { classPropertyName: "lengthKeys", publicName: "lengthKeys", isSignal: true, isRequired: false, transformFunction: null }, textDisplayWhenNoSelect: { classPropertyName: "textDisplayWhenNoSelect", publicName: "textDisplayWhenNoSelect", isSignal: true, isRequired: false, transformFunction: null }, textDisplayWhenMultiSelect: { classPropertyName: "textDisplayWhenMultiSelect", publicName: "textDisplayWhenMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTextDisplayWhenNoSelect: { classPropertyName: "classIncludeTextDisplayWhenNoSelect", publicName: "classIncludeTextDisplayWhenNoSelect", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, fieldGetLabel: { classPropertyName: "fieldGetLabel", publicName: "fieldGetLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPopoverConfig: { classPropertyName: "labelPopoverConfig", publicName: "labelPopoverConfig", isSignal: true, isRequired: false, transformFunction: null }, labelPopoverFullWidth: { classPropertyName: "labelPopoverFullWidth", publicName: "labelPopoverFullWidth", isSignal: true, isRequired: false, transformFunction: null }, hasContentUnitRight: { classPropertyName: "hasContentUnitRight", publicName: "hasContentUnitRight", isSignal: true, isRequired: false, transformFunction: null }, listSearchNoDataTemplateRef: { classPropertyName: "listSearchNoDataTemplateRef", publicName: "listSearchNoDataTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, dropdownTemplateRefNotSearchNoData: { classPropertyName: "dropdownTemplateRefNotSearchNoData", publicName: "dropdownTemplateRefNotSearchNoData", isSignal: true, isRequired: false, transformFunction: null }, fieldGetImage: { classPropertyName: "fieldGetImage", publicName: "fieldGetImage", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, typeShape: { classPropertyName: "typeShape", publicName: "typeShape", isSignal: true, isRequired: false, transformFunction: null }, fieldGetIcon: { classPropertyName: "fieldGetIcon", publicName: "fieldGetIcon", isSignal: true, isRequired: false, transformFunction: null }, fieldGetTextAvatar: { classPropertyName: "fieldGetTextAvatar", publicName: "fieldGetTextAvatar", isSignal: true, isRequired: false, transformFunction: null }, fieldGetColorAvatar: { classPropertyName: "fieldGetColorAvatar", publicName: "fieldGetColorAvatar", isSignal: true, isRequired: false, transformFunction: null }, classAvatarInclude: { classPropertyName: "classAvatarInclude", publicName: "classAvatarInclude", isSignal: true, isRequired: false, transformFunction: null }, getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, linkImageError: { classPropertyName: "linkImageError", publicName: "linkImageError", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, showBorderError: { classPropertyName: "showBorderError", publicName: "showBorderError", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, listSearchConfig: { classPropertyName: "listSearchConfig", publicName: "listSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, listHiddenInputSearch: { classPropertyName: "listHiddenInputSearch", publicName: "listHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, listSearchPadding: { classPropertyName: "listSearchPadding", publicName: "listSearchPadding", isSignal: true, isRequired: false, transformFunction: null }, listKeySearch: { classPropertyName: "listKeySearch", publicName: "listKeySearch", isSignal: true, isRequired: false, transformFunction: null }, listDividerClassInclude: { classPropertyName: "listDividerClassInclude", publicName: "listDividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, listConfig: { classPropertyName: "listConfig", publicName: "listConfig", isSignal: true, isRequired: false, transformFunction: null }, listButtonsOther: { classPropertyName: "listButtonsOther", publicName: "listButtonsOther", isSignal: true, isRequired: false, transformFunction: null }, listHasButtonUnSelectOption: { classPropertyName: "listHasButtonUnSelectOption", publicName: "listHasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, listClickExactly: { classPropertyName: "listClickExactly", publicName: "listClickExactly", isSignal: true, isRequired: false, transformFunction: null }, listBackgroundCustom: { classPropertyName: "listBackgroundCustom", publicName: "listBackgroundCustom", isSignal: true, isRequired: false, transformFunction: null }, listMaxItemShow: { classPropertyName: "listMaxItemShow", publicName: "listMaxItemShow", isSignal: true, isRequired: false, transformFunction: null }, listKeySelected: { classPropertyName: "listKeySelected", publicName: "listKeySelected", isSignal: true, isRequired: false, transformFunction: null }, listMultiKeySelected: { classPropertyName: "listMultiKeySelected", publicName: "listMultiKeySelected", isSignal: true, isRequired: false, transformFunction: null }, listKeysDisable: { classPropertyName: "listKeysDisable", publicName: "listKeysDisable", isSignal: true, isRequired: false, transformFunction: null }, listKeysHidden: { classPropertyName: "listKeysHidden", publicName: "listKeysHidden", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMaxItemSelected: { classPropertyName: "validMaxItemSelected", publicName: "validMaxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, changeValidUndefinedResetError: { classPropertyName: "changeValidUndefinedResetError", publicName: "changeValidUndefinedResetError", isSignal: true, isRequired: false, transformFunction: null }, allowSelectItemMultiple: { classPropertyName: "allowSelectItemMultiple", publicName: "allowSelectItemMultiple", isSignal: true, isRequired: false, transformFunction: null }, focusInputSearch: { classPropertyName: "focusInputSearch", publicName: "focusInputSearch", isSignal: true, isRequired: false, transformFunction: null }, onlyEmitDataWhenReset: { classPropertyName: "onlyEmitDataWhenReset", publicName: "onlyEmitDataWhenReset", isSignal: true, isRequired: false, transformFunction: null }, resetKeyWhenSelectAllKey: { classPropertyName: "resetKeyWhenSelectAllKey", publicName: "resetKeyWhenSelectAllKey", isSignal: true, isRequired: false, transformFunction: null }, listConfigHasDivider: { classPropertyName: "listConfigHasDivider", publicName: "listConfigHasDivider", isSignal: true, isRequired: false, transformFunction: null }, classIncludeIcon: { classPropertyName: "classIncludeIcon", publicName: "classIncludeIcon", isSignal: true, isRequired: false, transformFunction: null }, classIncludeContent: { classPropertyName: "classIncludeContent", publicName: "classIncludeContent", isSignal: true, isRequired: false, transformFunction: null }, listIgnoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, tabKeyActive: { classPropertyName: "tabKeyActive", publicName: "tabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, tabsConfig: { classPropertyName: "tabsConfig", publicName: "tabsConfig", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderBottom: { classPropertyName: "ignoreBorderBottom", publicName: "ignoreBorderBottom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flagMouse: "flagMouseChange", flagMouseContent: "flagMouseContentChange", lengthKeys: "lengthKeysChange", showBorderError: "showBorderErrorChange", listKeySelected: "listKeySelectedChange", listMultiKeySelected: "listMultiKeySelectedChange", tabKeyActive: "tabKeyActiveChange", outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outFunctionsControl: "outFunctionsControl", outValidEvent: "outValidEvent", outChangStageFlagMouse: "outChangStageFlagMouse", outDataChange: "outDataChange", outClickButtonOther: "outClickButtonOther", outShowList: "outShowList", outChangeTabKeyActive: "outChangeTabKeyActive" }, ngImport: i0, template: "<div class=\"flex flex-col w-full\">\n @if (labelConfig(); as label) {\n <libs_ui-components-label\n [classInclude]=\"label.classInclude\"\n [labelLeft]=\"label.labelLeft\"\n [labelLeftClass]=\"label.labelLeftClass\"\n [required]=\"label.required\"\n [description]=\"label.description\"\n [descriptionClass]=\"label.descriptionClass\"\n [labelRight]=\"label.labelRight\"\n [labelRightClass]=\"label.labelRightClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [buttonsLeft]=\"label.buttonsLeft\"\n [buttonsRight]=\"label.buttonsRight\"\n [disableButtonsLeft]=\"label.disableButtonsLeft || disable() || loadingDetail()\"\n [disableButtonsRight]=\"label.disableButtonsRight || disable() || loadingDetail()\"\n [hasToggle]=\"label.hasToggle\"\n [toggleActive]=\"label.toggleActive\"\n [toggleDisable]=\"label.toggleDisable || disable() || loadingDetail()\"\n [popover]=\"label.popover\"\n [iconPopoverClass]=\"label.iconPopoverClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [limitLength]=\"label.limitLength\"\n [buttonsDescription]=\"label.buttonsDescription\"\n [disableButtonsDescription]=\"label.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"label.buttonsDescriptionContainerClass\"\n [count]=\"label.count\" />\n }\n <libs_ui-components-popover\n [ignoreShowPopover]=\"disable() || readonly() || loadingDetail()\"\n [class]=\"classInclude() || 'w-full'\"\n [mode]=\"'click-toggle'\"\n [flagMouse]=\"flagMouse()\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [ignoreCursorPointerModeLikeClick]=\"true\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n [elementRefCustom]=\"popoverElementRefCustom()\"\n [config]=\"{\n animationConfig: popoverCustomConfig()?.animationConfig || {},\n zIndex: zIndex() ?? 1000,\n widthByParent: popoverCustomConfig()?.widthByParent ?? true,\n parentBorderWidth: popoverCustomConfig()?.parentBorderWidth ?? 0,\n maxHeight: popoverCustomConfig()?.maxHeight ?? 2048,\n maxWidth: popoverCustomConfig()?.maxWidth ?? 2048,\n direction: popoverCustomConfig()?.direction ?? 'bottom',\n template: listViewEl,\n whiteTheme: true,\n timerDestroy: popoverCustomConfig()?.timerDestroy ?? 0,\n ignoreArrow: popoverCustomConfig()?.ignoreArrow ?? true,\n directionDistance: 2,\n classInclude: '!rounded-[4px] overflow-hidden ' + (popoverCustomConfig()?.classInclude ?? 'libs-ui-border-general '),\n position: popoverCustomConfig()?.position || { mode: 'start', distance: 0 },\n width: popoverCustomConfig()?.width,\n classIncludeOverlayBody: popoverCustomConfig()?.classIncludeOverlayBody,\n }\"\n (outFunctionsControl)=\"handlerPopoverControlEvent($event)\"\n (outEvent)=\"handlerEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n @if (!isNgContent()) {\n <div\n [class]=\"'libs-ui-dropdown ' + (classIncludeContent() || '')\"\n [class.libs-ui-border-general]=\"!error() && !showBorderError() && !showList()\"\n [class.libs-ui-border-primary-focus-general]=\"!error() && !showBorderError() && showList()\"\n [class.libs-ui-border-error-general]=\"error() || showBorderError()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.cursor-pointer]=\"!(disable() || loadingDetail() || readonly())\"\n [class.libs-ui-disable]=\"disable() || loadingDetail()\"\n [class.libs-ui-disable-background]=\"disable() || loadingDetail()\"\n [class.pointer-events-none]=\"loadingDetail()\"\n [class.rounded-tr-0]=\"hasContentUnitRight()\"\n [class.rounded-br-0]=\"hasContentUnitRight()\">\n <div class=\"flex items-center w-full\">\n <div class=\"flex items-center w-full relative\">\n <div\n class=\"flex items-center w-full absolute\"\n [class.libs-ui-dropdown-placeholder]=\"!lengthKeys()\">\n @if (lengthKeys() === 1) {\n @if (itemsSelected(); as itemsSelected) {\n @if (fieldGetImage(); as fieldGetImage) {\n <libs_ui-components-avatar\n [classInclude]=\"classAvatarInclude()\"\n [typeShape]=\"typeShape()\"\n [size]=\"imageSize()\"\n [linkAvatar]=\"itemsSelected[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError()\"\n [idGenColor]=\"itemsSelected[fieldGetColorAvatar() || fieldGetTextAvatar()]\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace()\"\n [textAvatar]=\"itemsSelected[fieldGetTextAvatar()]\" />\n }\n @if (fieldGetIcon(); as fieldGetIcon) {\n <i [class]=\"itemsSelected[fieldGetIcon] + ' mr-[8px]'\"></i>\n }\n }\n }\n <libs_ui-components-popover\n [type]=\"'text'\"\n [classInclude]=\"(labelPopoverFullWidth() ? 'w-100 ' : '') + classIncludeTextDisplayWhenNoSelect()\"\n [innerHTML]=\"labelItemSelectedComputed() | translate: { value: lengthKeys() } | LibsUiPipesSecurityTrustPipe: 'html' : useXssFilter() | async\"\n [config]=\"{ maxWidth: labelPopoverConfig()?.maxWidth || 250, direction: 'top', zIndex: labelPopoverConfig()?.zIndex, timerDestroy: labelPopoverConfig()?.timerDestroy || 0 }\"\n [ignoreStopPropagationEvent]=\"true\" />\n\n @if (popoverItemSelected(); as popoverItemSelected) {\n <libs_ui-components-popover\n [type]=\"popoverItemSelected.type || 'other'\"\n [config]=\"popoverItemSelected.config || {}\">\n @if (popoverItemSelected.dataView) {\n <div [innerHtml]=\"popoverItemSelected.dataView | translate\"></div>\n } @else {\n <i class=\"libs-ui-icon-tooltip-outline text-[16px] mx-[8px]\"></i>\n }\n </libs_ui-components-popover>\n }\n </div>\n </div>\n <i\n class=\"text-[16px] libs-ui-icon-move-right rotate-90 text-[#6a7383] {{ classIncludeIcon() }}\"\n [class.libs-ui-disable]=\"readonly() || disable()\"></i>\n </div>\n </div>\n } @else {\n <ng-content></ng-content>\n }\n </libs_ui-components-popover>\n @if (showError()) {\n @if (error(); as error) {\n @let constHtmlMessage = error.message || ' ';\n <div\n class=\"mt-[8px] libs-ui-text-error libs-ui-font-h7r\"\n [innerHtml]=\"constHtmlMessage | translate: error.interpolateParams || {}\"></div>\n }\n }\n</div>\n<ng-template #listViewEl>\n <div\n style=\"display: flex; flex-direction: column\"\n [class.h-full]=\"listMaxItemShow() === -1\">\n @if (tabsConfig(); as tabsConfig) {\n <libs_ui-components-dropdown-tabs\n [tabsConfig]=\"tabsConfig\"\n [(tabKeyActive)]=\"tabKeyActive\"\n [ignoreBorderBottom]=\"ignoreBorderBottom()\"\n [disable]=\"disable() || loadingDetail() || loadingList()\"\n (outChange)=\"handlerChangeTab()\" />\n }\n <libs_ui-components-list\n [searchConfig]=\"listSearchConfig()\"\n [isSearchOnline]=\"isSearchOnline()\"\n [dropdownTabKeyActive]=\"tabKeyActive()\"\n [keySearch]=\"listKeySearch()\"\n [config]=\"listConfig()\"\n [autoSelectedFirstItemCallOutsideBefore]=\"autoSelectedFirstItemCallOutsideBefore()\"\n [paddingLeftItem]=\"popoverCustomConfig()?.paddingLeftItem ?? false\"\n [disable]=\"disable() || loadingDetail()\"\n [disableLabel]=\"disableLabel()\"\n [hiddenInputSearch]=\"listHiddenInputSearch()\"\n [searchPadding]=\"listSearchPadding()\"\n [class.h-full]=\"listMaxItemShow() === -1\"\n [maxItemShow]=\"listMaxItemShow()\"\n [keySelected]=\"listKeySelected()\"\n [multiKeySelected]=\"listMultiKeySelected()\"\n [clickExactly]=\"popoverCustomConfig()?.clickExactly ?? false\"\n [dividerClassInclude]=\"listSearchConfig() ? listDividerClassInclude() : 'hidden'\"\n [buttonsOther]=\"listButtonsOther()\"\n [backgroundListCustom]=\"listBackgroundCustom()\"\n [keysDisableItem]=\"listKeysDisable()\"\n [keysHiddenItem]=\"listKeysHidden()\"\n [hasButtonUnSelectOption]=\"listHasButtonUnSelectOption() ?? (!popoverCustomConfig() && !labelConfig()?.required && !validRequired() && (listConfig()?.type === 'text' || listConfig()?.type === 'radio'))\"\n [templateRefSearchNoData]=\"listSearchNoDataTemplateRef()\"\n [templateRefNotSearchNoData]=\"dropdownTemplateRefNotSearchNoData()\"\n [focusInputSearch]=\"focusInputSearch()\"\n [zIndex]=\"zIndex()\"\n [resetKeyWhenSelectAllKeyDropdown]=\"resetKeyWhenSelectAllKey()\"\n [ignoreClassDisableDefaultWhenUseKeysDisableItem]=\"listIgnoreClassDisableDefaultWhenUseKeysDisableItem()\"\n [hasDivider]=\"listConfigHasDivider()\"\n (outSelectKey)=\"handlerSelectedKey($event)\"\n (outSelectMultiKey)=\"handlerSelectMultiKey($event, true)\"\n (outChangeView)=\"handlerDataChange($event)\"\n (outClickButtonOther)=\"handlerClickButtonOther($event)\"\n (outFunctionsControl)=\"handlerListFunctionsControl($event)\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outLoading)=\"handlerLoadingList($event)\" />\n </div>\n</ng-template>\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .libs-ui-dropdown{position:relative;width:100%;min-height:32px;display:flex;align-items:center;background-color:#fff;padding:0 16px;border-radius:4px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containerTextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "templateRefNotSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "component", type: LibsUiComponentsDropdownTabsComponent, selector: "libs_ui-components-dropdown-tabs", inputs: ["ignoreBorderBottom", "tabsConfig", "tabKeyActive", "disable"], outputs: ["tabKeyActiveChange", "outChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
542
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDropdownComponent, isStandalone: true, selector: "libs_ui-components-dropdown", inputs: { useXssFilter: { classPropertyName: "useXssFilter", publicName: "useXssFilter", isSignal: true, isRequired: false, transformFunction: null }, popoverElementRefCustom: { classPropertyName: "popoverElementRefCustom", publicName: "popoverElementRefCustom", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, flagMouseContent: { classPropertyName: "flagMouseContent", publicName: "flagMouseContent", isSignal: true, isRequired: false, transformFunction: null }, popoverCustomConfig: { classPropertyName: "popoverCustomConfig", publicName: "popoverCustomConfig", isSignal: true, isRequired: false, transformFunction: null }, isNgContent: { classPropertyName: "isNgContent", publicName: "isNgContent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, convertItemSelected: { classPropertyName: "convertItemSelected", publicName: "convertItemSelected", isSignal: true, isRequired: false, transformFunction: null }, getPopoverItemSelected: { classPropertyName: "getPopoverItemSelected", publicName: "getPopoverItemSelected", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDetailItemById: { classPropertyName: "httpRequestDetailItemById", publicName: "httpRequestDetailItemById", isSignal: true, isRequired: false, transformFunction: null }, lengthKeys: { classPropertyName: "lengthKeys", publicName: "lengthKeys", isSignal: true, isRequired: false, transformFunction: null }, textDisplayWhenNoSelect: { classPropertyName: "textDisplayWhenNoSelect", publicName: "textDisplayWhenNoSelect", isSignal: true, isRequired: false, transformFunction: null }, textDisplayWhenMultiSelect: { classPropertyName: "textDisplayWhenMultiSelect", publicName: "textDisplayWhenMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTextDisplayWhenNoSelect: { classPropertyName: "classIncludeTextDisplayWhenNoSelect", publicName: "classIncludeTextDisplayWhenNoSelect", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, fieldGetLabel: { classPropertyName: "fieldGetLabel", publicName: "fieldGetLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPopoverConfig: { classPropertyName: "labelPopoverConfig", publicName: "labelPopoverConfig", isSignal: true, isRequired: false, transformFunction: null }, labelPopoverFullWidth: { classPropertyName: "labelPopoverFullWidth", publicName: "labelPopoverFullWidth", isSignal: true, isRequired: false, transformFunction: null }, hasContentUnitRight: { classPropertyName: "hasContentUnitRight", publicName: "hasContentUnitRight", isSignal: true, isRequired: false, transformFunction: null }, listSearchNoDataTemplateRef: { classPropertyName: "listSearchNoDataTemplateRef", publicName: "listSearchNoDataTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, dropdownTemplateRefNotSearchNoData: { classPropertyName: "dropdownTemplateRefNotSearchNoData", publicName: "dropdownTemplateRefNotSearchNoData", isSignal: true, isRequired: false, transformFunction: null }, fieldGetImage: { classPropertyName: "fieldGetImage", publicName: "fieldGetImage", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, typeShape: { classPropertyName: "typeShape", publicName: "typeShape", isSignal: true, isRequired: false, transformFunction: null }, fieldGetIcon: { classPropertyName: "fieldGetIcon", publicName: "fieldGetIcon", isSignal: true, isRequired: false, transformFunction: null }, fieldGetTextAvatar: { classPropertyName: "fieldGetTextAvatar", publicName: "fieldGetTextAvatar", isSignal: true, isRequired: false, transformFunction: null }, fieldGetColorAvatar: { classPropertyName: "fieldGetColorAvatar", publicName: "fieldGetColorAvatar", isSignal: true, isRequired: false, transformFunction: null }, classAvatarInclude: { classPropertyName: "classAvatarInclude", publicName: "classAvatarInclude", isSignal: true, isRequired: false, transformFunction: null }, getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, linkImageError: { classPropertyName: "linkImageError", publicName: "linkImageError", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, showBorderError: { classPropertyName: "showBorderError", publicName: "showBorderError", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, listSearchConfig: { classPropertyName: "listSearchConfig", publicName: "listSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, listHiddenInputSearch: { classPropertyName: "listHiddenInputSearch", publicName: "listHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, listSearchPadding: { classPropertyName: "listSearchPadding", publicName: "listSearchPadding", isSignal: true, isRequired: false, transformFunction: null }, listKeySearch: { classPropertyName: "listKeySearch", publicName: "listKeySearch", isSignal: true, isRequired: false, transformFunction: null }, listDividerClassInclude: { classPropertyName: "listDividerClassInclude", publicName: "listDividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, listConfig: { classPropertyName: "listConfig", publicName: "listConfig", isSignal: true, isRequired: false, transformFunction: null }, listButtonsOther: { classPropertyName: "listButtonsOther", publicName: "listButtonsOther", isSignal: true, isRequired: false, transformFunction: null }, listHasButtonUnSelectOption: { classPropertyName: "listHasButtonUnSelectOption", publicName: "listHasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, listClickExactly: { classPropertyName: "listClickExactly", publicName: "listClickExactly", isSignal: true, isRequired: false, transformFunction: null }, listBackgroundCustom: { classPropertyName: "listBackgroundCustom", publicName: "listBackgroundCustom", isSignal: true, isRequired: false, transformFunction: null }, listMaxItemShow: { classPropertyName: "listMaxItemShow", publicName: "listMaxItemShow", isSignal: true, isRequired: false, transformFunction: null }, listKeySelected: { classPropertyName: "listKeySelected", publicName: "listKeySelected", isSignal: true, isRequired: false, transformFunction: null }, listMultiKeySelected: { classPropertyName: "listMultiKeySelected", publicName: "listMultiKeySelected", isSignal: true, isRequired: false, transformFunction: null }, listKeysDisable: { classPropertyName: "listKeysDisable", publicName: "listKeysDisable", isSignal: true, isRequired: false, transformFunction: null }, listKeysHidden: { classPropertyName: "listKeysHidden", publicName: "listKeysHidden", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMaxItemSelected: { classPropertyName: "validMaxItemSelected", publicName: "validMaxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, changeValidUndefinedResetError: { classPropertyName: "changeValidUndefinedResetError", publicName: "changeValidUndefinedResetError", isSignal: true, isRequired: false, transformFunction: null }, allowSelectItemMultiple: { classPropertyName: "allowSelectItemMultiple", publicName: "allowSelectItemMultiple", isSignal: true, isRequired: false, transformFunction: null }, focusInputSearch: { classPropertyName: "focusInputSearch", publicName: "focusInputSearch", isSignal: true, isRequired: false, transformFunction: null }, onlyEmitDataWhenReset: { classPropertyName: "onlyEmitDataWhenReset", publicName: "onlyEmitDataWhenReset", isSignal: true, isRequired: false, transformFunction: null }, onlyEmitMultiKeyWhenManualClick: { classPropertyName: "onlyEmitMultiKeyWhenManualClick", publicName: "onlyEmitMultiKeyWhenManualClick", isSignal: true, isRequired: false, transformFunction: null }, resetKeyWhenSelectAllKey: { classPropertyName: "resetKeyWhenSelectAllKey", publicName: "resetKeyWhenSelectAllKey", isSignal: true, isRequired: false, transformFunction: null }, listConfigHasDivider: { classPropertyName: "listConfigHasDivider", publicName: "listConfigHasDivider", isSignal: true, isRequired: false, transformFunction: null }, classIncludeIcon: { classPropertyName: "classIncludeIcon", publicName: "classIncludeIcon", isSignal: true, isRequired: false, transformFunction: null }, classIncludeContent: { classPropertyName: "classIncludeContent", publicName: "classIncludeContent", isSignal: true, isRequired: false, transformFunction: null }, listIgnoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, tabKeyActive: { classPropertyName: "tabKeyActive", publicName: "tabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, tabsConfig: { classPropertyName: "tabsConfig", publicName: "tabsConfig", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderBottom: { classPropertyName: "ignoreBorderBottom", publicName: "ignoreBorderBottom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flagMouse: "flagMouseChange", flagMouseContent: "flagMouseContentChange", lengthKeys: "lengthKeysChange", showBorderError: "showBorderErrorChange", listKeySelected: "listKeySelectedChange", listMultiKeySelected: "listMultiKeySelectedChange", tabKeyActive: "tabKeyActiveChange", outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outFunctionsControl: "outFunctionsControl", outValidEvent: "outValidEvent", outChangStageFlagMouse: "outChangStageFlagMouse", outDataChange: "outDataChange", outClickButtonOther: "outClickButtonOther", outShowList: "outShowList", outChangeTabKeyActive: "outChangeTabKeyActive" }, ngImport: i0, template: "<div class=\"flex flex-col w-full\">\n @if (labelConfig(); as label) {\n <libs_ui-components-label\n [classInclude]=\"label.classInclude\"\n [labelLeft]=\"label.labelLeft\"\n [labelLeftClass]=\"label.labelLeftClass\"\n [required]=\"label.required\"\n [description]=\"label.description\"\n [descriptionClass]=\"label.descriptionClass\"\n [labelRight]=\"label.labelRight\"\n [labelRightClass]=\"label.labelRightClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [buttonsLeft]=\"label.buttonsLeft\"\n [buttonsRight]=\"label.buttonsRight\"\n [disableButtonsLeft]=\"label.disableButtonsLeft || disable() || loadingDetail()\"\n [disableButtonsRight]=\"label.disableButtonsRight || disable() || loadingDetail()\"\n [hasToggle]=\"label.hasToggle\"\n [toggleActive]=\"label.toggleActive\"\n [toggleDisable]=\"label.toggleDisable || disable() || loadingDetail()\"\n [popover]=\"label.popover\"\n [iconPopoverClass]=\"label.iconPopoverClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [limitLength]=\"label.limitLength\"\n [buttonsDescription]=\"label.buttonsDescription\"\n [disableButtonsDescription]=\"label.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"label.buttonsDescriptionContainerClass\"\n [count]=\"label.count\" />\n }\n <libs_ui-components-popover\n [ignoreShowPopover]=\"disable() || readonly() || loadingDetail()\"\n [class]=\"classInclude() || 'w-full'\"\n [mode]=\"'click-toggle'\"\n [flagMouse]=\"flagMouse()\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [ignoreCursorPointerModeLikeClick]=\"true\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n [elementRefCustom]=\"popoverElementRefCustom()\"\n [config]=\"{\n animationConfig: popoverCustomConfig()?.animationConfig || {},\n zIndex: zIndexResolved(),\n widthByParent: popoverCustomConfig()?.widthByParent ?? true,\n parentBorderWidth: popoverCustomConfig()?.parentBorderWidth ?? 0,\n maxHeight: popoverCustomConfig()?.maxHeight ?? 2048,\n maxWidth: popoverCustomConfig()?.maxWidth ?? 2048,\n direction: popoverCustomConfig()?.direction ?? 'bottom',\n template: listViewEl,\n whiteTheme: true,\n timerDestroy: popoverCustomConfig()?.timerDestroy ?? 0,\n ignoreArrow: popoverCustomConfig()?.ignoreArrow ?? true,\n directionDistance: 2,\n classInclude: '!rounded-[4px] overflow-hidden ' + (popoverCustomConfig()?.classInclude ?? 'libs-ui-border-general '),\n position: popoverCustomConfig()?.position || { mode: 'start', distance: 0 },\n width: popoverCustomConfig()?.width,\n classIncludeOverlayBody: popoverCustomConfig()?.classIncludeOverlayBody,\n }\"\n (outFunctionsControl)=\"handlerPopoverControlEvent($event)\"\n (outEvent)=\"handlerEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n @if (!isNgContent()) {\n <div\n [class]=\"'libs-ui-dropdown ' + (classIncludeContent() || '')\"\n [class.libs-ui-border-general]=\"!error() && !showBorderError() && !showList()\"\n [class.libs-ui-border-primary-focus-general]=\"!error() && !showBorderError() && showList()\"\n [class.libs-ui-border-error-general]=\"error() || showBorderError()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.cursor-pointer]=\"!(disable() || loadingDetail() || readonly())\"\n [class.libs-ui-disable]=\"disable() || loadingDetail()\"\n [class.libs-ui-disable-background]=\"disable() || loadingDetail()\"\n [class.pointer-events-none]=\"loadingDetail()\"\n [class.rounded-tr-0]=\"hasContentUnitRight()\"\n [class.rounded-br-0]=\"hasContentUnitRight()\">\n <div class=\"flex items-center w-full\">\n <div class=\"flex items-center w-full relative\">\n <div\n class=\"flex items-center w-full absolute\"\n [class.libs-ui-dropdown-placeholder]=\"!lengthKeys()\">\n @if (lengthKeys() === 1) {\n @if (itemsSelected(); as itemsSelected) {\n @if (fieldGetImage(); as fieldGetImage) {\n <libs_ui-components-avatar\n [classInclude]=\"classAvatarInclude()\"\n [typeShape]=\"typeShape()\"\n [size]=\"imageSize()\"\n [linkAvatar]=\"itemsSelected[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError()\"\n [idGenColor]=\"itemsSelected[fieldGetColorAvatar() || fieldGetTextAvatar()]\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace()\"\n [textAvatar]=\"itemsSelected[fieldGetTextAvatar()]\" />\n }\n @if (fieldGetIcon(); as fieldGetIcon) {\n <i [class]=\"itemsSelected[fieldGetIcon] + ' mr-[8px]'\"></i>\n }\n }\n }\n <libs_ui-components-popover\n [type]=\"'text'\"\n [classInclude]=\"(labelPopoverFullWidth() ? 'w-100 ' : '') + classIncludeTextDisplayWhenNoSelect()\"\n [innerHTML]=\"labelItemSelectedComputed() | translate: { value: lengthKeys() } | LibsUiPipesSecurityTrustPipe: 'html' : useXssFilter() | async\"\n [config]=\"{ maxWidth: labelPopoverConfig()?.maxWidth || 250, direction: 'top', zIndex: labelPopoverConfig()?.zIndex, timerDestroy: labelPopoverConfig()?.timerDestroy || 0 }\"\n [ignoreStopPropagationEvent]=\"true\" />\n\n @if (popoverItemSelected(); as popoverItemSelected) {\n <libs_ui-components-popover\n [type]=\"popoverItemSelected.type || 'other'\"\n [config]=\"popoverItemSelected.config || {}\">\n @if (popoverItemSelected.dataView) {\n <div [innerHtml]=\"popoverItemSelected.dataView | translate\"></div>\n } @else {\n <i class=\"libs-ui-icon-tooltip-outline text-[16px] mx-[8px]\"></i>\n }\n </libs_ui-components-popover>\n }\n </div>\n </div>\n <i\n class=\"text-[16px] libs-ui-icon-move-right rotate-90 text-[#6a7383] {{ classIncludeIcon() }}\"\n [class.libs-ui-disable]=\"readonly() || disable()\"></i>\n </div>\n </div>\n } @else {\n <ng-content></ng-content>\n }\n </libs_ui-components-popover>\n @if (showError()) {\n @if (error(); as error) {\n @let constHtmlMessage = error.message || ' ';\n <div\n class=\"mt-[8px] libs-ui-text-error libs-ui-font-h7r\"\n [innerHtml]=\"constHtmlMessage | translate: error.interpolateParams || {}\"></div>\n }\n }\n</div>\n<ng-template #listViewEl>\n <div\n style=\"display: flex; flex-direction: column\"\n [class.h-full]=\"listMaxItemShow() === -1\">\n @if (tabsConfig(); as tabsConfig) {\n <libs_ui-components-dropdown-tabs\n [tabsConfig]=\"tabsConfig\"\n [(tabKeyActive)]=\"tabKeyActive\"\n [ignoreBorderBottom]=\"ignoreBorderBottom()\"\n [disable]=\"disable() || loadingDetail() || loadingList()\"\n (outChange)=\"handlerChangeTab()\" />\n }\n <libs_ui-components-list\n [searchConfig]=\"listSearchConfig()\"\n [isSearchOnline]=\"isSearchOnline()\"\n [dropdownTabKeyActive]=\"tabKeyActive()\"\n [keySearch]=\"listKeySearch()\"\n [config]=\"listConfig()\"\n [autoSelectedFirstItemCallOutsideBefore]=\"autoSelectedFirstItemCallOutsideBefore()\"\n [paddingLeftItem]=\"popoverCustomConfig()?.paddingLeftItem ?? false\"\n [disable]=\"disable() || loadingDetail()\"\n [disableLabel]=\"disableLabel()\"\n [hiddenInputSearch]=\"listHiddenInputSearch()\"\n [searchPadding]=\"listSearchPadding()\"\n [class.h-full]=\"listMaxItemShow() === -1\"\n [maxItemShow]=\"listMaxItemShow()\"\n [keySelected]=\"listKeySelected()\"\n [multiKeySelected]=\"listMultiKeySelected()\"\n [clickExactly]=\"popoverCustomConfig()?.clickExactly ?? false\"\n [dividerClassInclude]=\"listSearchConfig() ? listDividerClassInclude() : 'hidden'\"\n [buttonsOther]=\"listButtonsOther()\"\n [backgroundListCustom]=\"listBackgroundCustom()\"\n [keysDisableItem]=\"listKeysDisable()\"\n [keysHiddenItem]=\"listKeysHidden()\"\n [hasButtonUnSelectOption]=\"listHasButtonUnSelectOption() ?? (!popoverCustomConfig() && !labelConfig()?.required && !validRequired() && (listConfig()?.type === 'text' || listConfig()?.type === 'radio'))\"\n [templateRefSearchNoData]=\"listSearchNoDataTemplateRef()\"\n [templateRefNotSearchNoData]=\"dropdownTemplateRefNotSearchNoData()\"\n [focusInputSearch]=\"focusInputSearch()\"\n [zIndex]=\"zIndexResolved()\"\n [resetKeyWhenSelectAllKeyDropdown]=\"resetKeyWhenSelectAllKey()\"\n [ignoreClassDisableDefaultWhenUseKeysDisableItem]=\"listIgnoreClassDisableDefaultWhenUseKeysDisableItem()\"\n [hasDivider]=\"listConfigHasDivider()\"\n (outSelectKey)=\"handlerSelectedKey($event)\"\n (outSelectMultiKey)=\"handlerSelectMultiKey($event)\"\n (outChangeView)=\"handlerDataChange($event)\"\n (outClickButtonOther)=\"handlerClickButtonOther($event)\"\n (outFunctionsControl)=\"handlerListFunctionsControl($event)\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outLoading)=\"handlerLoadingList($event)\" />\n </div>\n</ng-template>\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .libs-ui-dropdown{position:relative;width:100%;min-height:32px;display:flex;align-items:center;background-color:#fff;padding:0 16px;border-radius:4px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containerTextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "templateRefNotSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "component", type: LibsUiComponentsDropdownTabsComponent, selector: "libs_ui-components-dropdown-tabs", inputs: ["ignoreBorderBottom", "tabsConfig", "tabKeyActive", "disable"], outputs: ["tabKeyActiveChange", "outChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
471
543
|
}
|
|
472
544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDropdownComponent, decorators: [{
|
|
473
545
|
type: Component,
|
|
474
|
-
args: [{ selector: 'libs_ui-components-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiPipesSecurityTrustPipe, AsyncPipe, LibsUiComponentsLabelComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsAvatarComponent, LibsUiComponentsListComponent, LibsUiComponentsDropdownTabsComponent], template: "<div class=\"flex flex-col w-full\">\n @if (labelConfig(); as label) {\n <libs_ui-components-label\n [classInclude]=\"label.classInclude\"\n [labelLeft]=\"label.labelLeft\"\n [labelLeftClass]=\"label.labelLeftClass\"\n [required]=\"label.required\"\n [description]=\"label.description\"\n [descriptionClass]=\"label.descriptionClass\"\n [labelRight]=\"label.labelRight\"\n [labelRightClass]=\"label.labelRightClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [buttonsLeft]=\"label.buttonsLeft\"\n [buttonsRight]=\"label.buttonsRight\"\n [disableButtonsLeft]=\"label.disableButtonsLeft || disable() || loadingDetail()\"\n [disableButtonsRight]=\"label.disableButtonsRight || disable() || loadingDetail()\"\n [hasToggle]=\"label.hasToggle\"\n [toggleActive]=\"label.toggleActive\"\n [toggleDisable]=\"label.toggleDisable || disable() || loadingDetail()\"\n [popover]=\"label.popover\"\n [iconPopoverClass]=\"label.iconPopoverClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [limitLength]=\"label.limitLength\"\n [buttonsDescription]=\"label.buttonsDescription\"\n [disableButtonsDescription]=\"label.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"label.buttonsDescriptionContainerClass\"\n [count]=\"label.count\" />\n }\n <libs_ui-components-popover\n [ignoreShowPopover]=\"disable() || readonly() || loadingDetail()\"\n [class]=\"classInclude() || 'w-full'\"\n [mode]=\"'click-toggle'\"\n [flagMouse]=\"flagMouse()\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [ignoreCursorPointerModeLikeClick]=\"true\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n [elementRefCustom]=\"popoverElementRefCustom()\"\n [config]=\"{\n animationConfig: popoverCustomConfig()?.animationConfig || {},\n zIndex: zIndex() ?? 1000,\n widthByParent: popoverCustomConfig()?.widthByParent ?? true,\n parentBorderWidth: popoverCustomConfig()?.parentBorderWidth ?? 0,\n maxHeight: popoverCustomConfig()?.maxHeight ?? 2048,\n maxWidth: popoverCustomConfig()?.maxWidth ?? 2048,\n direction: popoverCustomConfig()?.direction ?? 'bottom',\n template: listViewEl,\n whiteTheme: true,\n timerDestroy: popoverCustomConfig()?.timerDestroy ?? 0,\n ignoreArrow: popoverCustomConfig()?.ignoreArrow ?? true,\n directionDistance: 2,\n classInclude: '!rounded-[4px] overflow-hidden ' + (popoverCustomConfig()?.classInclude ?? 'libs-ui-border-general '),\n position: popoverCustomConfig()?.position || { mode: 'start', distance: 0 },\n width: popoverCustomConfig()?.width,\n classIncludeOverlayBody: popoverCustomConfig()?.classIncludeOverlayBody,\n }\"\n (outFunctionsControl)=\"handlerPopoverControlEvent($event)\"\n (outEvent)=\"handlerEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n @if (!isNgContent()) {\n <div\n [class]=\"'libs-ui-dropdown ' + (classIncludeContent() || '')\"\n [class.libs-ui-border-general]=\"!error() && !showBorderError() && !showList()\"\n [class.libs-ui-border-primary-focus-general]=\"!error() && !showBorderError() && showList()\"\n [class.libs-ui-border-error-general]=\"error() || showBorderError()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.cursor-pointer]=\"!(disable() || loadingDetail() || readonly())\"\n [class.libs-ui-disable]=\"disable() || loadingDetail()\"\n [class.libs-ui-disable-background]=\"disable() || loadingDetail()\"\n [class.pointer-events-none]=\"loadingDetail()\"\n [class.rounded-tr-0]=\"hasContentUnitRight()\"\n [class.rounded-br-0]=\"hasContentUnitRight()\">\n <div class=\"flex items-center w-full\">\n <div class=\"flex items-center w-full relative\">\n <div\n class=\"flex items-center w-full absolute\"\n [class.libs-ui-dropdown-placeholder]=\"!lengthKeys()\">\n @if (lengthKeys() === 1) {\n @if (itemsSelected(); as itemsSelected) {\n @if (fieldGetImage(); as fieldGetImage) {\n <libs_ui-components-avatar\n [classInclude]=\"classAvatarInclude()\"\n [typeShape]=\"typeShape()\"\n [size]=\"imageSize()\"\n [linkAvatar]=\"itemsSelected[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError()\"\n [idGenColor]=\"itemsSelected[fieldGetColorAvatar() || fieldGetTextAvatar()]\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace()\"\n [textAvatar]=\"itemsSelected[fieldGetTextAvatar()]\" />\n }\n @if (fieldGetIcon(); as fieldGetIcon) {\n <i [class]=\"itemsSelected[fieldGetIcon] + ' mr-[8px]'\"></i>\n }\n }\n }\n <libs_ui-components-popover\n [type]=\"'text'\"\n [classInclude]=\"(labelPopoverFullWidth() ? 'w-100 ' : '') + classIncludeTextDisplayWhenNoSelect()\"\n [innerHTML]=\"labelItemSelectedComputed() | translate: { value: lengthKeys() } | LibsUiPipesSecurityTrustPipe: 'html' : useXssFilter() | async\"\n [config]=\"{ maxWidth: labelPopoverConfig()?.maxWidth || 250, direction: 'top', zIndex: labelPopoverConfig()?.zIndex, timerDestroy: labelPopoverConfig()?.timerDestroy || 0 }\"\n [ignoreStopPropagationEvent]=\"true\" />\n\n @if (popoverItemSelected(); as popoverItemSelected) {\n <libs_ui-components-popover\n [type]=\"popoverItemSelected.type || 'other'\"\n [config]=\"popoverItemSelected.config || {}\">\n @if (popoverItemSelected.dataView) {\n <div [innerHtml]=\"popoverItemSelected.dataView | translate\"></div>\n } @else {\n <i class=\"libs-ui-icon-tooltip-outline text-[16px] mx-[8px]\"></i>\n }\n </libs_ui-components-popover>\n }\n </div>\n </div>\n <i\n class=\"text-[16px] libs-ui-icon-move-right rotate-90 text-[#6a7383] {{ classIncludeIcon() }}\"\n [class.libs-ui-disable]=\"readonly() || disable()\"></i>\n </div>\n </div>\n } @else {\n <ng-content></ng-content>\n }\n </libs_ui-components-popover>\n @if (showError()) {\n @if (error(); as error) {\n @let constHtmlMessage = error.message || ' ';\n <div\n class=\"mt-[8px] libs-ui-text-error libs-ui-font-h7r\"\n [innerHtml]=\"constHtmlMessage | translate: error.interpolateParams || {}\"></div>\n }\n }\n</div>\n<ng-template #listViewEl>\n <div\n style=\"display: flex; flex-direction: column\"\n [class.h-full]=\"listMaxItemShow() === -1\">\n @if (tabsConfig(); as tabsConfig) {\n <libs_ui-components-dropdown-tabs\n [tabsConfig]=\"tabsConfig\"\n [(tabKeyActive)]=\"tabKeyActive\"\n [ignoreBorderBottom]=\"ignoreBorderBottom()\"\n [disable]=\"disable() || loadingDetail() || loadingList()\"\n (outChange)=\"handlerChangeTab()\" />\n }\n <libs_ui-components-list\n [searchConfig]=\"listSearchConfig()\"\n [isSearchOnline]=\"isSearchOnline()\"\n [dropdownTabKeyActive]=\"tabKeyActive()\"\n [keySearch]=\"listKeySearch()\"\n [config]=\"listConfig()\"\n [autoSelectedFirstItemCallOutsideBefore]=\"autoSelectedFirstItemCallOutsideBefore()\"\n [paddingLeftItem]=\"popoverCustomConfig()?.paddingLeftItem ?? false\"\n [disable]=\"disable() || loadingDetail()\"\n [disableLabel]=\"disableLabel()\"\n [hiddenInputSearch]=\"listHiddenInputSearch()\"\n [searchPadding]=\"listSearchPadding()\"\n [class.h-full]=\"listMaxItemShow() === -1\"\n [maxItemShow]=\"listMaxItemShow()\"\n [keySelected]=\"listKeySelected()\"\n [multiKeySelected]=\"listMultiKeySelected()\"\n [clickExactly]=\"popoverCustomConfig()?.clickExactly ?? false\"\n [dividerClassInclude]=\"listSearchConfig() ? listDividerClassInclude() : 'hidden'\"\n [buttonsOther]=\"listButtonsOther()\"\n [backgroundListCustom]=\"listBackgroundCustom()\"\n [keysDisableItem]=\"listKeysDisable()\"\n [keysHiddenItem]=\"listKeysHidden()\"\n [hasButtonUnSelectOption]=\"listHasButtonUnSelectOption() ?? (!popoverCustomConfig() && !labelConfig()?.required && !validRequired() && (listConfig()?.type === 'text' || listConfig()?.type === 'radio'))\"\n [templateRefSearchNoData]=\"listSearchNoDataTemplateRef()\"\n [templateRefNotSearchNoData]=\"dropdownTemplateRefNotSearchNoData()\"\n [focusInputSearch]=\"focusInputSearch()\"\n [zIndex]=\"zIndex()\"\n [resetKeyWhenSelectAllKeyDropdown]=\"resetKeyWhenSelectAllKey()\"\n [ignoreClassDisableDefaultWhenUseKeysDisableItem]=\"listIgnoreClassDisableDefaultWhenUseKeysDisableItem()\"\n [hasDivider]=\"listConfigHasDivider()\"\n (outSelectKey)=\"handlerSelectedKey($event)\"\n (outSelectMultiKey)=\"handlerSelectMultiKey($event, true)\"\n (outChangeView)=\"handlerDataChange($event)\"\n (outClickButtonOther)=\"handlerClickButtonOther($event)\"\n (outFunctionsControl)=\"handlerListFunctionsControl($event)\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outLoading)=\"handlerLoadingList($event)\" />\n </div>\n</ng-template>\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .libs-ui-dropdown{position:relative;width:100%;min-height:32px;display:flex;align-items:center;background-color:#fff;padding:0 16px;border-radius:4px;cursor:pointer}\n"] }]
|
|
546
|
+
args: [{ selector: 'libs_ui-components-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiPipesSecurityTrustPipe, AsyncPipe, LibsUiComponentsLabelComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsAvatarComponent, LibsUiComponentsListComponent, LibsUiComponentsDropdownTabsComponent], template: "<div class=\"flex flex-col w-full\">\n @if (labelConfig(); as label) {\n <libs_ui-components-label\n [classInclude]=\"label.classInclude\"\n [labelLeft]=\"label.labelLeft\"\n [labelLeftClass]=\"label.labelLeftClass\"\n [required]=\"label.required\"\n [description]=\"label.description\"\n [descriptionClass]=\"label.descriptionClass\"\n [labelRight]=\"label.labelRight\"\n [labelRightClass]=\"label.labelRightClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [buttonsLeft]=\"label.buttonsLeft\"\n [buttonsRight]=\"label.buttonsRight\"\n [disableButtonsLeft]=\"label.disableButtonsLeft || disable() || loadingDetail()\"\n [disableButtonsRight]=\"label.disableButtonsRight || disable() || loadingDetail()\"\n [hasToggle]=\"label.hasToggle\"\n [toggleActive]=\"label.toggleActive\"\n [toggleDisable]=\"label.toggleDisable || disable() || loadingDetail()\"\n [popover]=\"label.popover\"\n [iconPopoverClass]=\"label.iconPopoverClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [limitLength]=\"label.limitLength\"\n [buttonsDescription]=\"label.buttonsDescription\"\n [disableButtonsDescription]=\"label.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"label.buttonsDescriptionContainerClass\"\n [count]=\"label.count\" />\n }\n <libs_ui-components-popover\n [ignoreShowPopover]=\"disable() || readonly() || loadingDetail()\"\n [class]=\"classInclude() || 'w-full'\"\n [mode]=\"'click-toggle'\"\n [flagMouse]=\"flagMouse()\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [ignoreCursorPointerModeLikeClick]=\"true\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n [elementRefCustom]=\"popoverElementRefCustom()\"\n [config]=\"{\n animationConfig: popoverCustomConfig()?.animationConfig || {},\n zIndex: zIndexResolved(),\n widthByParent: popoverCustomConfig()?.widthByParent ?? true,\n parentBorderWidth: popoverCustomConfig()?.parentBorderWidth ?? 0,\n maxHeight: popoverCustomConfig()?.maxHeight ?? 2048,\n maxWidth: popoverCustomConfig()?.maxWidth ?? 2048,\n direction: popoverCustomConfig()?.direction ?? 'bottom',\n template: listViewEl,\n whiteTheme: true,\n timerDestroy: popoverCustomConfig()?.timerDestroy ?? 0,\n ignoreArrow: popoverCustomConfig()?.ignoreArrow ?? true,\n directionDistance: 2,\n classInclude: '!rounded-[4px] overflow-hidden ' + (popoverCustomConfig()?.classInclude ?? 'libs-ui-border-general '),\n position: popoverCustomConfig()?.position || { mode: 'start', distance: 0 },\n width: popoverCustomConfig()?.width,\n classIncludeOverlayBody: popoverCustomConfig()?.classIncludeOverlayBody,\n }\"\n (outFunctionsControl)=\"handlerPopoverControlEvent($event)\"\n (outEvent)=\"handlerEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n @if (!isNgContent()) {\n <div\n [class]=\"'libs-ui-dropdown ' + (classIncludeContent() || '')\"\n [class.libs-ui-border-general]=\"!error() && !showBorderError() && !showList()\"\n [class.libs-ui-border-primary-focus-general]=\"!error() && !showBorderError() && showList()\"\n [class.libs-ui-border-error-general]=\"error() || showBorderError()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.cursor-pointer]=\"!(disable() || loadingDetail() || readonly())\"\n [class.libs-ui-disable]=\"disable() || loadingDetail()\"\n [class.libs-ui-disable-background]=\"disable() || loadingDetail()\"\n [class.pointer-events-none]=\"loadingDetail()\"\n [class.rounded-tr-0]=\"hasContentUnitRight()\"\n [class.rounded-br-0]=\"hasContentUnitRight()\">\n <div class=\"flex items-center w-full\">\n <div class=\"flex items-center w-full relative\">\n <div\n class=\"flex items-center w-full absolute\"\n [class.libs-ui-dropdown-placeholder]=\"!lengthKeys()\">\n @if (lengthKeys() === 1) {\n @if (itemsSelected(); as itemsSelected) {\n @if (fieldGetImage(); as fieldGetImage) {\n <libs_ui-components-avatar\n [classInclude]=\"classAvatarInclude()\"\n [typeShape]=\"typeShape()\"\n [size]=\"imageSize()\"\n [linkAvatar]=\"itemsSelected[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError()\"\n [idGenColor]=\"itemsSelected[fieldGetColorAvatar() || fieldGetTextAvatar()]\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace()\"\n [textAvatar]=\"itemsSelected[fieldGetTextAvatar()]\" />\n }\n @if (fieldGetIcon(); as fieldGetIcon) {\n <i [class]=\"itemsSelected[fieldGetIcon] + ' mr-[8px]'\"></i>\n }\n }\n }\n <libs_ui-components-popover\n [type]=\"'text'\"\n [classInclude]=\"(labelPopoverFullWidth() ? 'w-100 ' : '') + classIncludeTextDisplayWhenNoSelect()\"\n [innerHTML]=\"labelItemSelectedComputed() | translate: { value: lengthKeys() } | LibsUiPipesSecurityTrustPipe: 'html' : useXssFilter() | async\"\n [config]=\"{ maxWidth: labelPopoverConfig()?.maxWidth || 250, direction: 'top', zIndex: labelPopoverConfig()?.zIndex, timerDestroy: labelPopoverConfig()?.timerDestroy || 0 }\"\n [ignoreStopPropagationEvent]=\"true\" />\n\n @if (popoverItemSelected(); as popoverItemSelected) {\n <libs_ui-components-popover\n [type]=\"popoverItemSelected.type || 'other'\"\n [config]=\"popoverItemSelected.config || {}\">\n @if (popoverItemSelected.dataView) {\n <div [innerHtml]=\"popoverItemSelected.dataView | translate\"></div>\n } @else {\n <i class=\"libs-ui-icon-tooltip-outline text-[16px] mx-[8px]\"></i>\n }\n </libs_ui-components-popover>\n }\n </div>\n </div>\n <i\n class=\"text-[16px] libs-ui-icon-move-right rotate-90 text-[#6a7383] {{ classIncludeIcon() }}\"\n [class.libs-ui-disable]=\"readonly() || disable()\"></i>\n </div>\n </div>\n } @else {\n <ng-content></ng-content>\n }\n </libs_ui-components-popover>\n @if (showError()) {\n @if (error(); as error) {\n @let constHtmlMessage = error.message || ' ';\n <div\n class=\"mt-[8px] libs-ui-text-error libs-ui-font-h7r\"\n [innerHtml]=\"constHtmlMessage | translate: error.interpolateParams || {}\"></div>\n }\n }\n</div>\n<ng-template #listViewEl>\n <div\n style=\"display: flex; flex-direction: column\"\n [class.h-full]=\"listMaxItemShow() === -1\">\n @if (tabsConfig(); as tabsConfig) {\n <libs_ui-components-dropdown-tabs\n [tabsConfig]=\"tabsConfig\"\n [(tabKeyActive)]=\"tabKeyActive\"\n [ignoreBorderBottom]=\"ignoreBorderBottom()\"\n [disable]=\"disable() || loadingDetail() || loadingList()\"\n (outChange)=\"handlerChangeTab()\" />\n }\n <libs_ui-components-list\n [searchConfig]=\"listSearchConfig()\"\n [isSearchOnline]=\"isSearchOnline()\"\n [dropdownTabKeyActive]=\"tabKeyActive()\"\n [keySearch]=\"listKeySearch()\"\n [config]=\"listConfig()\"\n [autoSelectedFirstItemCallOutsideBefore]=\"autoSelectedFirstItemCallOutsideBefore()\"\n [paddingLeftItem]=\"popoverCustomConfig()?.paddingLeftItem ?? false\"\n [disable]=\"disable() || loadingDetail()\"\n [disableLabel]=\"disableLabel()\"\n [hiddenInputSearch]=\"listHiddenInputSearch()\"\n [searchPadding]=\"listSearchPadding()\"\n [class.h-full]=\"listMaxItemShow() === -1\"\n [maxItemShow]=\"listMaxItemShow()\"\n [keySelected]=\"listKeySelected()\"\n [multiKeySelected]=\"listMultiKeySelected()\"\n [clickExactly]=\"popoverCustomConfig()?.clickExactly ?? false\"\n [dividerClassInclude]=\"listSearchConfig() ? listDividerClassInclude() : 'hidden'\"\n [buttonsOther]=\"listButtonsOther()\"\n [backgroundListCustom]=\"listBackgroundCustom()\"\n [keysDisableItem]=\"listKeysDisable()\"\n [keysHiddenItem]=\"listKeysHidden()\"\n [hasButtonUnSelectOption]=\"listHasButtonUnSelectOption() ?? (!popoverCustomConfig() && !labelConfig()?.required && !validRequired() && (listConfig()?.type === 'text' || listConfig()?.type === 'radio'))\"\n [templateRefSearchNoData]=\"listSearchNoDataTemplateRef()\"\n [templateRefNotSearchNoData]=\"dropdownTemplateRefNotSearchNoData()\"\n [focusInputSearch]=\"focusInputSearch()\"\n [zIndex]=\"zIndexResolved()\"\n [resetKeyWhenSelectAllKeyDropdown]=\"resetKeyWhenSelectAllKey()\"\n [ignoreClassDisableDefaultWhenUseKeysDisableItem]=\"listIgnoreClassDisableDefaultWhenUseKeysDisableItem()\"\n [hasDivider]=\"listConfigHasDivider()\"\n (outSelectKey)=\"handlerSelectedKey($event)\"\n (outSelectMultiKey)=\"handlerSelectMultiKey($event)\"\n (outChangeView)=\"handlerDataChange($event)\"\n (outClickButtonOther)=\"handlerClickButtonOther($event)\"\n (outFunctionsControl)=\"handlerListFunctionsControl($event)\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outLoading)=\"handlerLoadingList($event)\" />\n </div>\n</ng-template>\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .libs-ui-dropdown{position:relative;width:100%;min-height:32px;display:flex;align-items:center;background-color:#fff;padding:0 16px;border-radius:4px;cursor:pointer}\n"] }]
|
|
475
547
|
}], ctorParameters: () => [] });
|
|
476
548
|
|
|
477
549
|
/**
|