@acorex/components 22.0.0-next.20 → 22.0.0-next.22

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 (42) hide show
  1. package/fesm2022/acorex-components-calendar.mjs +2 -2
  2. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  3. package/fesm2022/acorex-components-color-palette.mjs +2 -2
  4. package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
  5. package/fesm2022/acorex-components-cron-job.mjs +12 -12
  6. package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
  7. package/fesm2022/acorex-components-datetime-box.mjs +10 -12
  8. package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
  9. package/fesm2022/acorex-components-datetime-input.mjs +49 -30
  10. package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
  11. package/fesm2022/acorex-components-form.mjs +3 -4
  12. package/fesm2022/acorex-components-form.mjs.map +1 -1
  13. package/fesm2022/acorex-components-list.mjs +17 -73
  14. package/fesm2022/acorex-components-list.mjs.map +1 -1
  15. package/fesm2022/acorex-components-phone-box.mjs +6 -6
  16. package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
  17. package/fesm2022/acorex-components-query-builder.mjs +2 -6
  18. package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
  19. package/fesm2022/acorex-components-rest-api-generator.mjs +2 -2
  20. package/fesm2022/acorex-components-rest-api-generator.mjs.map +1 -1
  21. package/fesm2022/acorex-components-rrule.mjs +2 -2
  22. package/fesm2022/acorex-components-rrule.mjs.map +1 -1
  23. package/fesm2022/acorex-components-scheduler-picker.mjs +16 -16
  24. package/fesm2022/acorex-components-scheduler-picker.mjs.map +1 -1
  25. package/fesm2022/acorex-components-scheduler.mjs +2 -2
  26. package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
  27. package/fesm2022/acorex-components-select-box.mjs +451 -176
  28. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  29. package/fesm2022/acorex-components-selection-list.mjs +4 -0
  30. package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
  31. package/package.json +3 -7
  32. package/select-box/README.md +0 -2
  33. package/types/acorex-components-datetime-input.d.ts +14 -5
  34. package/types/acorex-components-list.d.ts +1 -12
  35. package/types/acorex-components-phone-box.d.ts +2 -2
  36. package/types/acorex-components-query-builder.d.ts +9 -10
  37. package/types/acorex-components-select-box.d.ts +147 -36
  38. package/types/acorex-components-selection-list.d.ts +2 -1
  39. package/combo-box/README.md +0 -3
  40. package/fesm2022/acorex-components-combo-box.mjs +0 -650
  41. package/fesm2022/acorex-components-combo-box.mjs.map +0 -1
  42. package/types/acorex-components-combo-box.d.ts +0 -197
@@ -1,650 +0,0 @@
1
- import { MXSelectionValueComponent, MXLookComponent, AXHotkeysService, convertArrayToDataSource, AX_SELECTION_DATA_TOKEN, AXDataSource, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent, AXClosableComponent, AXSearchableComponent, MXSelectionBridgeService, AXCommonModule } from '@acorex/cdk/common';
2
- import { AXDecoratorGenericComponent, AXDecoratorCloseButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
3
- import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent, AXDropdownModule } from '@acorex/components/dropdown';
4
- import { AXListComponent, AXListModule } from '@acorex/components/list';
5
- import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/loading';
6
- import { AXSearchBoxComponent } from '@acorex/components/search-box';
7
- import { AXTagComponent } from '@acorex/components/tag';
8
- import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
9
- import { AXUnsubscriber } from '@acorex/core/utils';
10
- import { NgTemplateOutlet, NgClass, AsyncPipe, CommonModule } from '@angular/common';
11
- import * as i0 from '@angular/core';
12
- import { input, inject, signal, linkedSignal, afterNextRender, forwardRef, HostListener, ViewChild, ContentChild, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
13
- import * as i1 from '@angular/forms';
14
- import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
15
- import { isEqual, get, last, findLastIndex, nth } from 'lodash-es';
16
- import { classes } from 'polytype';
17
- import { AXBadgeModule } from '@acorex/components/badge';
18
- import { AXCheckBoxModule } from '@acorex/components/check-box';
19
- import { AXPopoverModule } from '@acorex/components/popover';
20
- import { A11yModule } from '@angular/cdk/a11y';
21
- import { AXTextBoxModule } from '@acorex/components/text-box';
22
-
23
- /**
24
- * The ComboBox is a component which supports static arrays and advanced AXDataSource with lazy loading.
25
- * @category
26
- */
27
- class AXComboBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXLookComponent) {
28
- constructor() {
29
- super(...arguments);
30
- /**
31
- * Determines if an item is truncated.
32
- *
33
- * @defaultValue true
34
- */
35
- this.isItemTruncated = input(true, /* @ts-ignore */
36
- ...(ngDevMode ? [{ debugName: "isItemTruncated" }] : /* istanbul ignore next */ []));
37
- /**
38
- * Determines if a tooltip is shown for an item.
39
- *
40
- * @defaultValue false
41
- */
42
- this.showItemTooltip = input(false, /* @ts-ignore */
43
- ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : /* istanbul ignore next */ []));
44
- /** Height of each list item in pixels, or 'auto' to let list measure. */
45
- this.itemHeight = input(40, /* @ts-ignore */
46
- ...(ngDevMode ? [{ debugName: "itemHeight" }] : /* istanbul ignore next */ []));
47
- /** Maximum number of visible items before scrolling. */
48
- this.maxVisibleItems = input(5, /* @ts-ignore */
49
- ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : /* istanbul ignore next */ []));
50
- /** @ignore */
51
- this.hotKeyService = inject(AXHotkeysService);
52
- /** @ignore */
53
- this.isLoading = signal(false, /* @ts-ignore */
54
- ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
55
- /** @ignore */
56
- this.searchValue = signal('', /* @ts-ignore */
57
- ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
58
- /** @ignore */
59
- this.renderList = signal(false, /* @ts-ignore */
60
- ...(ngDevMode ? [{ debugName: "renderList" }] : /* istanbul ignore next */ []));
61
- /** @ignore */
62
- this._dropdownWidth = linkedSignal(() => this.dropdownWidth(), /* @ts-ignore */
63
- ...(ngDevMode ? [{ debugName: "_dropdownWidth" }] : /* istanbul ignore next */ []));
64
- /** @ignore */
65
- this._dropdownHeight = signal('auto', /* @ts-ignore */
66
- ...(ngDevMode ? [{ debugName: "_dropdownHeight" }] : /* istanbul ignore next */ []));
67
- /** @ignore */
68
- this._listDataSource = convertArrayToDataSource([], {
69
- key: this.valueField,
70
- pageSize: 10,
71
- });
72
- this.#init = afterNextRender(() => {
73
- const formField = this.getHostElement().closest('ax-form-field');
74
- if (formField?.classList.contains('ax-state-floating-label')) {
75
- this.getHostElement().classList.add('ax-float-label');
76
- }
77
- });
78
- /**
79
- * The width of the dropdown in pixels.
80
- * @defaultValue null
81
- */
82
- this.dropdownWidth = input(null, /* @ts-ignore */
83
- ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
84
- this.searchBoxAutoFocus = input(true, /* @ts-ignore */
85
- ...(ngDevMode ? [{ debugName: "searchBoxAutoFocus" }] : /* istanbul ignore next */ []));
86
- /**
87
- * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
88
- */
89
- this.selectionService = inject(AX_SELECTION_DATA_TOKEN);
90
- /** @ignore */
91
- this._unsubscriber = inject(AXUnsubscriber);
92
- }
93
- #init;
94
- /**
95
- * Gets the data source for the component, which can be either an `AXDataSource` or an array of items.
96
- * @returns {AXDataSource<any> | any[]}
97
- */
98
- get dataSource() {
99
- return this._originalDataSource;
100
- }
101
- /**
102
- * Sets the data source, either as an `AXDataSource` or an array.
103
- * @param {AXDataSource<any> | any[]} v
104
- */
105
- set dataSource(v) {
106
- // check if the data source is the same
107
- if (Array.isArray(v) && Array.isArray(this._originalDataSource) && isEqual(v, this._originalDataSource)) {
108
- return;
109
- }
110
- if (v instanceof AXDataSource && v == this._originalDataSource) {
111
- return;
112
- }
113
- //
114
- this._originalDataSource = v;
115
- if (Array.isArray(v)) {
116
- this._listDataSource = convertArrayToDataSource(v, {
117
- key: this.valueField,
118
- pageSize: v.length || 10,
119
- });
120
- }
121
- else {
122
- this._listDataSource = this.dataSource;
123
- }
124
- //
125
- this.onChangedSubscription?.unsubscribe();
126
- this.onChangedSubscription = this._listDataSource.onChanged
127
- .pipe(this._unsubscriber.takeUntilDestroy)
128
- .subscribe(() => {
129
- this.updateDropdownSize();
130
- // Force refresh of selected items when data source changes
131
- this.forceRefreshSelectedItems();
132
- });
133
- //
134
- this.onLoadingChangedSubscription?.unsubscribe();
135
- this.onLoadingChangedSubscription = this._listDataSource.onLoadingChanged
136
- .pipe(this._unsubscriber.takeUntilDestroy)
137
- .subscribe((loading) => {
138
- this.isLoading.set(loading);
139
- });
140
- // After setting data source, try to fetch item data if needed
141
- setTimeout(() => this.fetchItemDataIfNeeded(), 0);
142
- }
143
- /** @ignore */
144
- ngOnInit() {
145
- super.ngOnInit();
146
- //
147
- this.registerValidation();
148
- // Proactively fetch item data if we have a value but no corresponding item
149
- this.fetchItemDataIfNeeded();
150
- }
151
- /**
152
- * Proactively fetches item data if the component has a value but no corresponding item data.
153
- * This prevents showing "loading..." when the component has a value.
154
- */
155
- async fetchItemDataIfNeeded() {
156
- const isEmptyValue = this.value == null || (Array.isArray(this.value) && this.value.length === 0);
157
- if (!isEmptyValue && this._listDataSource && !this.selectedItems?.length) {
158
- try {
159
- const item = await this.getItemByKey(this.value);
160
- if (item) {
161
- // Force refresh to update the display
162
- this.forceRefreshSelectedItems();
163
- }
164
- }
165
- catch (error) {
166
- console.warn('Failed to fetch item data:', error);
167
- }
168
- }
169
- }
170
- /** @ignore */
171
- ngOnDestroy() {
172
- this.searchBox?.onKeyDown.unsubscribe();
173
- this.onChangedSubscription?.unsubscribe();
174
- this.onLoadingChangedSubscription?.unsubscribe();
175
- }
176
- /**
177
- * Retrieves an item by its key.
178
- * @param {any} key
179
- */
180
- getItemByKey(key) {
181
- // Static array data sources resolve synchronously to avoid a false loading state
182
- // for primitive values (e.g. color format "hex" / "rgba").
183
- if (Array.isArray(this._originalDataSource)) {
184
- for (const candidate of this._originalDataSource) {
185
- if (candidate != null && typeof candidate === 'object') {
186
- if (get(candidate, this.valueField) == key || get(candidate, this.textField) == key) {
187
- return candidate;
188
- }
189
- }
190
- else if (candidate == key) {
191
- return { [this.valueField]: candidate, [this.textField]: String(candidate ?? '') };
192
- }
193
- }
194
- return null;
195
- }
196
- if (this._listDataSource && typeof this._listDataSource.find === 'function') {
197
- return this._listDataSource.find(key);
198
- }
199
- // If neither method is available, return null
200
- console.warn('No find method available on data source');
201
- return null;
202
- }
203
- /** @ignore */
204
- _handleOnOpenedEvent(e) {
205
- if (!this.renderList()) {
206
- this.renderList.set(true);
207
- }
208
- else if (!this._listDataSource.totalCount || this._listDataSource.totalCount == 0) {
209
- this.list?.refresh(false);
210
- }
211
- this._handleFocus();
212
- //
213
- this.onOpened.emit({
214
- component: this,
215
- isUserInteraction: e.isUserInteraction,
216
- });
217
- this.updateDropdownSize();
218
- // Force refresh of selected items when opening to show updated text
219
- this.forceRefreshSelectedItems();
220
- }
221
- /** @ignore */
222
- _handleOnClosedEvent(e) {
223
- this.onClosed.emit({
224
- component: this,
225
- isUserInteraction: e.isUserInteraction,
226
- });
227
- this._unsubscriber.unsubscribe();
228
- }
229
- /** @ignore */
230
- _handleFocus() {
231
- // Wait a tick so the list is created (first open) and dropdown height is applied.
232
- setTimeout(() => {
233
- this.list?.scrollTo();
234
- if (this.searchBox) {
235
- this.searchBox.look = 'flat';
236
- if (this.searchBoxAutoFocus()) {
237
- this.searchBox.focus();
238
- }
239
- //TODO: unsubscribe
240
- this.hotKeyService
241
- .addShortcut({ keys: 'Control.f', element: this.panel.nativeElement })
242
- .pipe(this._unsubscriber.takeUntilDestroy)
243
- .subscribe(() => {
244
- this.searchBox.focus();
245
- });
246
- this.searchBox.onKeyDown.pipe(this._unsubscriber.takeUntilDestroy).subscribe((e) => {
247
- if (e.nativeEvent.code === 'ArrowDown' || e.nativeEvent.key === 'ArrowDown') {
248
- this.list?.focus();
249
- e.nativeEvent.preventDefault();
250
- }
251
- });
252
- }
253
- else {
254
- this.list?.focus();
255
- }
256
- });
257
- }
258
- /** @ignore */
259
- _handleBadgeRemove(e, item) {
260
- this.unselectItems(item);
261
- e.stopPropagation();
262
- }
263
- /** @ignore */
264
- _handleValueChanged(e) {
265
- if (e.isUserInteraction) {
266
- if (!this.multiple) {
267
- this.close();
268
- }
269
- this.commitValue(e.component.selectedItems, true);
270
- }
271
- }
272
- /** @ignore */
273
- _handleItemClick(e) {
274
- this.onItemClick.emit(e);
275
- if (!this.multiple) {
276
- this.close();
277
- }
278
- }
279
- /** @ignore */
280
- _handleItemSelected(e) {
281
- this.onItemSelected.emit(e);
282
- this.resetSearchAfterSelection();
283
- if (!this.multiple) {
284
- this.close();
285
- }
286
- }
287
- resetSearchAfterSelection() {
288
- if (!this.searchBox && !this.searchBox?.value)
289
- return;
290
- if (this.searchBox && this.searchBox?.value)
291
- this.searchBox.commitValue('', false);
292
- }
293
- /** @ignore */
294
- setDropdownSize(count = 0) {
295
- const itemPx = typeof this.itemHeight() === 'number' ? this.itemHeight() : 40;
296
- const isActionsheet = this.dropdown.isActionsheetStyle;
297
- if (isActionsheet) {
298
- this._dropdownWidth.set('100%');
299
- // Prefer maxVisibleItems on actionsheet too; still clamp to the pane afterwards.
300
- const maxItems = Math.max(Number(this.maxVisibleItems()) || 5, 1);
301
- this._dropdownHeight.set(`${Math.min(maxItems, Math.max(count, 1)) * itemPx}px`);
302
- }
303
- else {
304
- const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
305
- const maxItems = Number(this.maxVisibleItems());
306
- this._dropdownWidth.set(`${hostWidth}px`);
307
- this._dropdownHeight.set(count == 0 ? 'auto' : `${Math.min(maxItems, count) * itemPx}px`);
308
- }
309
- setTimeout(() => {
310
- this._fitListHeightToAvailableSpace(itemPx);
311
- this.dropdown.updatePosition();
312
- this.list?.render();
313
- // Second pass after the overlay pane applies max-height / overflow constraints.
314
- // Height changes invalidate the previous scroll offset — scroll again after fit.
315
- requestAnimationFrame(() => {
316
- setTimeout(() => {
317
- this._fitListHeightToAvailableSpace(itemPx);
318
- this.list?.render();
319
- requestAnimationFrame(() => this.list?.scrollTo());
320
- }, 0);
321
- });
322
- });
323
- }
324
- /**
325
- * Shrinks list height to the visible overlay area so virtual scroll ends on fully
326
- * visible rows instead of inside an overflow:hidden clipped region.
327
- * @ignore
328
- */
329
- _fitListHeightToAvailableSpace(itemPx) {
330
- if (itemPx <= 0 || this._dropdownHeight() === 'auto') {
331
- return;
332
- }
333
- const panel = this.panel?.nativeElement;
334
- const listEl = this.list?.getHostElement?.();
335
- if (!panel || !listEl) {
336
- return;
337
- }
338
- const pane = panel.closest('.ax-overlay-pane');
339
- if (!pane) {
340
- return;
341
- }
342
- const listRect = listEl.getBoundingClientRect();
343
- const paneRect = pane.getBoundingClientRect();
344
- const paneOverflow = listRect.bottom - paneRect.bottom;
345
- const viewportOverflow = listRect.bottom - window.innerHeight;
346
- const overflow = Math.max(paneOverflow, viewportOverflow);
347
- let nextHeight = listEl.clientHeight || parseFloat(this._dropdownHeight());
348
- if (!Number.isFinite(nextHeight) || nextHeight <= 0) {
349
- return;
350
- }
351
- // When the list extends past the overlay pane or screen, shrink it to the visible area.
352
- if (overflow > 1) {
353
- nextHeight = Math.max(itemPx, nextHeight - overflow);
354
- }
355
- // Keep height as whole rows so the last item is never permanently cropped.
356
- nextHeight = Math.max(itemPx, Math.floor(nextHeight / itemPx) * itemPx);
357
- const current = parseFloat(this._dropdownHeight());
358
- if (!Number.isFinite(current) || nextHeight !== current) {
359
- this._dropdownHeight.set(`${nextHeight}px`);
360
- }
361
- }
362
- updateDropdownPosition() {
363
- setTimeout(() => {
364
- this.dropdown.updatePosition();
365
- });
366
- }
367
- updateDropdownSize() {
368
- setTimeout(() => {
369
- this.setDropdownSize(this._listDataSource.totalCount);
370
- this.updateDropdownPosition();
371
- this.list?.render();
372
- if (!this.isItemTruncated()) {
373
- setTimeout(() => {
374
- this._fitDropdownToContent();
375
- setTimeout(() => this._fitDropdownToContent(), 100);
376
- });
377
- }
378
- });
379
- }
380
- _fitDropdownToContent() {
381
- const panel = this.panel?.nativeElement;
382
- if (!panel)
383
- return;
384
- const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
385
- let contentWidth = hostWidth;
386
- panel.querySelectorAll('li.list-item').forEach((item) => {
387
- const label = item.querySelector('.ax-label-container span');
388
- if (label) {
389
- const labelContainer = label.parentElement;
390
- const horizontalPadding = labelContainer ? item.offsetWidth - labelContainer.clientWidth : 0;
391
- contentWidth = Math.max(contentWidth, label.scrollWidth + horizontalPadding);
392
- }
393
- else {
394
- contentWidth = Math.max(contentWidth, item.scrollWidth);
395
- }
396
- });
397
- const nextWidth = `${Math.max(hostWidth, contentWidth)}px`;
398
- if (this._dropdownWidth() !== nextWidth) {
399
- this._dropdownWidth.set(nextWidth);
400
- this.dropdown.updatePosition();
401
- }
402
- }
403
- internalValueChanged(value) {
404
- super.internalValueChanged(value);
405
- this.updateDropdownPosition();
406
- // Try to fetch item data when value changes
407
- setTimeout(() => this.fetchItemDataIfNeeded(), 0);
408
- }
409
- /** @ignore */
410
- _handleKeydown(e) {
411
- if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {
412
- this.selectItemByNav(e.code === 'ArrowDown' ? 1 : -1);
413
- e.preventDefault();
414
- }
415
- else if (e.code === 'Backspace') {
416
- this.unselectItems(this.selectedItems.pop());
417
- e.preventDefault();
418
- }
419
- }
420
- /** @ignore */
421
- selectItemByNav(sign) {
422
- if (Array.isArray(this.dataSource) && !this.multiple) {
423
- const items = this.normalizeItemsList(this.dataSource);
424
- const _last = last(this.selectedItems);
425
- let i = -1;
426
- if (_last) {
427
- i = findLastIndex(items, [this.valueField, get(_last, this.valueField)]);
428
- }
429
- i += sign;
430
- if (i < 0 || i >= items.length)
431
- return;
432
- const next = nth(items, i);
433
- if (next) {
434
- this.selectItems(next);
435
- }
436
- }
437
- else {
438
- this.open();
439
- }
440
- }
441
- /**
442
- * Filters the data source based on the provided search term.
443
- * @param {string} term
444
- */
445
- search(term) {
446
- this.searchValue.set(term);
447
- if (term) {
448
- this._listDataSource.filter({
449
- field: this.textField,
450
- value: term,
451
- operator: { type: 'contains' },
452
- });
453
- }
454
- else {
455
- this._listDataSource.clearFilter();
456
- }
457
- this._listDataSource.refresh();
458
- }
459
- /**
460
- * Refreshes the component by resetting state, clearing selection cache, refreshing the list, and closing the component.
461
- */
462
- refresh() {
463
- this.reset(false);
464
- this.clearSelectionCache();
465
- this.list?.refresh();
466
- this.close();
467
- }
468
- hostClickListener() {
469
- this.toggle();
470
- }
471
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
472
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXComboBoxComponent, isStandalone: true, selector: "ax-combo-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, textTemplate: { classPropertyName: "textTemplate", publicName: "textTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, isItemTruncated: { classPropertyName: "isItemTruncated", publicName: "isItemTruncated", isSignal: true, isRequired: false, transformFunction: null }, showItemTooltip: { classPropertyName: "showItemTooltip", publicName: "showItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, minRecordsForSearch: { classPropertyName: "minRecordsForSearch", publicName: "minRecordsForSearch", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: false, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: false, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, searchBoxAutoFocus: { classPropertyName: "searchBoxAutoFocus", publicName: "searchBoxAutoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onOpened: "onOpened", onClosed: "onClosed", onItemSelected: "onItemSelected", onItemClick: "onItemClick" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "keydown": "_handleKeydown($event)", "click": "hostClickListener()" } }, providers: [
473
- { provide: AXComponent, useExisting: AXComboBoxComponent },
474
- { provide: AXFocusableComponent, useExisting: AXComboBoxComponent },
475
- { provide: AXValuableComponent, useExisting: AXComboBoxComponent },
476
- { provide: AXClearableComponent, useExisting: AXComboBoxComponent },
477
- { provide: AXClosableComponent, useExisting: AXComboBoxComponent },
478
- { provide: AXSearchableComponent, useExisting: AXComboBoxComponent },
479
- {
480
- provide: NG_VALUE_ACCESSOR,
481
- useExisting: forwardRef(() => AXComboBoxComponent),
482
- multi: true,
483
- },
484
- {
485
- provide: AX_SELECTION_DATA_TOKEN,
486
- useClass: MXSelectionBridgeService,
487
- },
488
- AXUnsubscriber,
489
- ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n [class.ax-state-multiple]=\"multiple\"\n (onOpened)=\"_handleOnOpenedEvent($event)\"\n (onClosed)=\"_handleOnClosedEvent($event)\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [disabled]=\"disabled\"\n [look]=\"look\"\n [popoverWidth]=\"dropdownWidth()\"\n>\n <ng-container input>\n <ng-content select=\"ax-prefix\"> </ng-content>\n <div\n class=\"ax-editor ax-chips-container ax-content ax-input\"\n [class.ax-state-multiple]=\"multiple\"\n [tabindex]=\"tabIndex\"\n >\n @if (selectedItems.length === 0) {\n <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n {{ placeholder | translate | async }}\n </div>\n }\n @for (item of selectedItems; track $index) {\n @if (selectedTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n ></ng-template>\n } @else {\n @if (multiple) {\n <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n @if (!disabled && !readonly && multiple) {\n <ax-suffix>\n <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n </ax-suffix>\n }\n </ax-tag>\n } @else {\n {{ getDisplayText(item) | translate | async }}\n }\n }\n }\n </div>\n @if (selectedItems?.length && !disabled && !readonly) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button-icon\">\n @if (isLoading()) {\n <ax-loading-spinner [size]=\"16\" [stroke]=\"1\"></ax-loading-spinner>\n } @else {\n <span\n class=\"ax-icon\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': !isOpen,\n 'ax-icon-chevron-up': isOpen,\n }\"\n ></span>\n }\n </button>\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-template #search>\n <ng-content select=\"ax-search-box\"> </ng-content>\n </ng-template>\n </ng-container>\n <ng-container panel>\n <div\n #panel\n class=\"ax-combo-box-panel\"\n [class.ax-no-truncate]=\"!isItemTruncated()\"\n [style.min-width]=\"_dropdownWidth()\"\n >\n @if (dropdown.isActionsheetStyle) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n </ax-header>\n }\n @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n <div class=\"ax-search-container\">\n <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n </div>\n }\n @if (renderList()) {\n <ax-list\n [name]=\"name\"\n [ngModel]=\"value\"\n [readonly]=\"readonly\"\n [multiple]=\"multiple\"\n [textField]=\"textField\"\n [selectionMode]=\"'item'\"\n [valueField]=\"valueField\"\n [itemHeight]=\"itemHeight()\"\n [itemTemplate]=\"itemTemplate\"\n [textTemplate]=\"textTemplate\"\n [dataSource]=\"_listDataSource\"\n [style.height]=\"_dropdownHeight()\"\n [loadingTemplate]=\"loadingTemplate\"\n [isItemTruncated]=\"isItemTruncated()\"\n [showItemTooltip]=\"showItemTooltip()\"\n (onItemClick)=\"_handleItemClick($event)\"\n [emptyTemplate]=\"emptyTemplate ?? empty\"\n (onValueChanged)=\"_handleValueChanged($event)\"\n (onItemSelected)=\"_handleItemSelected($event)\"\n >\n </ax-list>\n <ng-template #empty>\n {{ '@acorex:common.general.no-result-found' | translate | async }}\n </ng-template>\n }\n\n @if (isLoading()) {\n @if (loadingTemplate) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n }\n }\n\n <ng-content select=\"ax-footer\"> </ng-content>\n </div>\n </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box .ax-editor-container{padding-block:calc(var(--spacing, .25rem) * 0)}ax-combo-box .ax-editor-container.ax-state-multiple{padding-inline:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-combo-box .ax-editor-container .ax-input,ax-combo-box .ax-editor-container .ax-editor{padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box ax-dropdown-box.ax-state-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);--ax-comp-editor-space-start-size: 0}ax-combo-box .ax-chips-container{display:flex;min-height:var(--ax-sys-size-base);min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:pointer!important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--ax-comp-combo-box-chips-gap,.25rem);outline-style:var(--tw-outline-style);outline-width:0px;outline-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-chips-container .ax-selectbox-input{width:calc(var(--spacing, .25rem) * 0);opacity:0%}ax-combo-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-combo-box-chips-container-padding, .25rem)}ax-combo-box .ax-chips-container ax-tag ax-prefix,ax-combo-box .ax-chips-container ax-tag ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}.ax-combo-box-panel{display:flex;height:fit-content;max-height:100%;flex-direction:column;overflow:hidden}.ax-combo-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-combo-box-panel .ax-combo-box-loading-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}.ax-combo-box-panel ax-list{min-height:calc(var(--spacing, .25rem) * 0);flex:1 1 auto}.ax-combo-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-panel>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-panel>ax-header.ax-solid ax-title{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(max-width:40rem){.ax-combo-box-panel .list-item{padding-inline:1rem}}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTagComponent, selector: "ax-tag", inputs: ["color", "look", "text"], outputs: ["onClick", "onDblClick", "onContextMenu"] }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
490
- }
491
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxComponent, decorators: [{
492
- type: Component,
493
- args: [{ selector: 'ax-combo-box', inputs: [
494
- 'disabled',
495
- 'readonly',
496
- 'tabIndex',
497
- 'placeholder',
498
- 'minValue',
499
- 'maxValue',
500
- 'value',
501
- 'state',
502
- 'name',
503
- 'id',
504
- 'type',
505
- 'look',
506
- 'multiple',
507
- 'valueField',
508
- 'textField',
509
- 'disabledField',
510
- 'textTemplate',
511
- 'selectedItems',
512
- ], outputs: [
513
- 'valueChange',
514
- 'stateChange',
515
- 'onValueChanged',
516
- 'onBlur',
517
- 'onFocus',
518
- 'readonlyChange',
519
- 'disabledChange',
520
- 'onOpened',
521
- 'onClosed',
522
- 'onItemSelected',
523
- 'onItemClick',
524
- ], encapsulation: ViewEncapsulation.None, providers: [
525
- { provide: AXComponent, useExisting: AXComboBoxComponent },
526
- { provide: AXFocusableComponent, useExisting: AXComboBoxComponent },
527
- { provide: AXValuableComponent, useExisting: AXComboBoxComponent },
528
- { provide: AXClearableComponent, useExisting: AXComboBoxComponent },
529
- { provide: AXClosableComponent, useExisting: AXComboBoxComponent },
530
- { provide: AXSearchableComponent, useExisting: AXComboBoxComponent },
531
- {
532
- provide: NG_VALUE_ACCESSOR,
533
- useExisting: forwardRef(() => AXComboBoxComponent),
534
- multi: true,
535
- },
536
- {
537
- provide: AX_SELECTION_DATA_TOKEN,
538
- useClass: MXSelectionBridgeService,
539
- },
540
- AXUnsubscriber,
541
- ], host: { ngSkipHydration: 'true' }, imports: [
542
- AXDropdownBoxComponent,
543
- NgTemplateOutlet,
544
- NgClass,
545
- AXDecoratorGenericComponent,
546
- AXDecoratorCloseButtonComponent,
547
- AXListComponent,
548
- FormsModule,
549
- AsyncPipe,
550
- AXTranslatorPipe,
551
- AXTagComponent,
552
- AXLoadingSpinnerComponent,
553
- ], template: "<ax-dropdown-box\n [class.ax-state-multiple]=\"multiple\"\n (onOpened)=\"_handleOnOpenedEvent($event)\"\n (onClosed)=\"_handleOnClosedEvent($event)\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [disabled]=\"disabled\"\n [look]=\"look\"\n [popoverWidth]=\"dropdownWidth()\"\n>\n <ng-container input>\n <ng-content select=\"ax-prefix\"> </ng-content>\n <div\n class=\"ax-editor ax-chips-container ax-content ax-input\"\n [class.ax-state-multiple]=\"multiple\"\n [tabindex]=\"tabIndex\"\n >\n @if (selectedItems.length === 0) {\n <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n {{ placeholder | translate | async }}\n </div>\n }\n @for (item of selectedItems; track $index) {\n @if (selectedTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n ></ng-template>\n } @else {\n @if (multiple) {\n <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n @if (!disabled && !readonly && multiple) {\n <ax-suffix>\n <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n </ax-suffix>\n }\n </ax-tag>\n } @else {\n {{ getDisplayText(item) | translate | async }}\n }\n }\n }\n </div>\n @if (selectedItems?.length && !disabled && !readonly) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button-icon\">\n @if (isLoading()) {\n <ax-loading-spinner [size]=\"16\" [stroke]=\"1\"></ax-loading-spinner>\n } @else {\n <span\n class=\"ax-icon\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': !isOpen,\n 'ax-icon-chevron-up': isOpen,\n }\"\n ></span>\n }\n </button>\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-template #search>\n <ng-content select=\"ax-search-box\"> </ng-content>\n </ng-template>\n </ng-container>\n <ng-container panel>\n <div\n #panel\n class=\"ax-combo-box-panel\"\n [class.ax-no-truncate]=\"!isItemTruncated()\"\n [style.min-width]=\"_dropdownWidth()\"\n >\n @if (dropdown.isActionsheetStyle) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n </ax-header>\n }\n @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n <div class=\"ax-search-container\">\n <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n </div>\n }\n @if (renderList()) {\n <ax-list\n [name]=\"name\"\n [ngModel]=\"value\"\n [readonly]=\"readonly\"\n [multiple]=\"multiple\"\n [textField]=\"textField\"\n [selectionMode]=\"'item'\"\n [valueField]=\"valueField\"\n [itemHeight]=\"itemHeight()\"\n [itemTemplate]=\"itemTemplate\"\n [textTemplate]=\"textTemplate\"\n [dataSource]=\"_listDataSource\"\n [style.height]=\"_dropdownHeight()\"\n [loadingTemplate]=\"loadingTemplate\"\n [isItemTruncated]=\"isItemTruncated()\"\n [showItemTooltip]=\"showItemTooltip()\"\n (onItemClick)=\"_handleItemClick($event)\"\n [emptyTemplate]=\"emptyTemplate ?? empty\"\n (onValueChanged)=\"_handleValueChanged($event)\"\n (onItemSelected)=\"_handleItemSelected($event)\"\n >\n </ax-list>\n <ng-template #empty>\n {{ '@acorex:common.general.no-result-found' | translate | async }}\n </ng-template>\n }\n\n @if (isLoading()) {\n @if (loadingTemplate) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n }\n }\n\n <ng-content select=\"ax-footer\"> </ng-content>\n </div>\n </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box .ax-editor-container{padding-block:calc(var(--spacing, .25rem) * 0)}ax-combo-box .ax-editor-container.ax-state-multiple{padding-inline:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-combo-box .ax-editor-container .ax-input,ax-combo-box .ax-editor-container .ax-editor{padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box ax-dropdown-box.ax-state-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);--ax-comp-editor-space-start-size: 0}ax-combo-box .ax-chips-container{display:flex;min-height:var(--ax-sys-size-base);min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:pointer!important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--ax-comp-combo-box-chips-gap,.25rem);outline-style:var(--tw-outline-style);outline-width:0px;outline-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-chips-container .ax-selectbox-input{width:calc(var(--spacing, .25rem) * 0);opacity:0%}ax-combo-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-combo-box-chips-container-padding, .25rem)}ax-combo-box .ax-chips-container ax-tag ax-prefix,ax-combo-box .ax-chips-container ax-tag ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}.ax-combo-box-panel{display:flex;height:fit-content;max-height:100%;flex-direction:column;overflow:hidden}.ax-combo-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-combo-box-panel .ax-combo-box-loading-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}.ax-combo-box-panel ax-list{min-height:calc(var(--spacing, .25rem) * 0);flex:1 1 auto}.ax-combo-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-panel>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-panel>ax-header.ax-solid ax-title{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(max-width:40rem){.ax-combo-box-panel .list-item{padding-inline:1rem}}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style: solid;--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
554
- }], propDecorators: { isItemTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemTruncated", required: false }] }], showItemTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemTooltip", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], dataSource: [{
555
- type: Input
556
- }], placeholder: [{
557
- type: Input
558
- }], minRecordsForSearch: [{
559
- type: Input
560
- }], caption: [{
561
- type: Input
562
- }], itemTemplate: [{
563
- type: Input
564
- }], selectedTemplate: [{
565
- type: Input
566
- }], emptyTemplate: [{
567
- type: Input
568
- }], loadingTemplate: [{
569
- type: Input
570
- }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], panel: [{
571
- type: ViewChild,
572
- args: ['panel']
573
- }], list: [{
574
- type: ViewChild,
575
- args: [AXListComponent]
576
- }], searchBox: [{
577
- type: ContentChild,
578
- args: [AXSearchBoxComponent]
579
- }], searchBoxAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBoxAutoFocus", required: false }] }], dropdown: [{
580
- type: ViewChild,
581
- args: [AXDropdownBoxComponent, { static: true }]
582
- }], _handleKeydown: [{
583
- type: HostListener,
584
- args: ['keydown', ['$event']]
585
- }], hostClickListener: [{
586
- type: HostListener,
587
- args: ['click']
588
- }] } });
589
-
590
- class AXComboBoxModule {
591
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
592
- static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, imports: [CommonModule,
593
- AXCommonModule,
594
- FormsModule,
595
- AXCheckBoxModule,
596
- AXBadgeModule,
597
- AXDecoratorModule,
598
- AXTranslationModule,
599
- AXPopoverModule,
600
- AXLoadingModule,
601
- A11yModule,
602
- AXTextBoxModule,
603
- AXDropdownModule,
604
- AXListModule,
605
- AXComboBoxComponent], exports: [AXComboBoxComponent] }); }
606
- static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, imports: [CommonModule,
607
- AXCommonModule,
608
- FormsModule,
609
- AXCheckBoxModule,
610
- AXBadgeModule,
611
- AXDecoratorModule,
612
- AXTranslationModule,
613
- AXPopoverModule,
614
- AXLoadingModule,
615
- A11yModule,
616
- AXTextBoxModule,
617
- AXDropdownModule,
618
- AXListModule,
619
- AXComboBoxComponent] }); }
620
- }
621
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, decorators: [{
622
- type: NgModule,
623
- args: [{
624
- imports: [
625
- CommonModule,
626
- AXCommonModule,
627
- FormsModule,
628
- AXCheckBoxModule,
629
- AXBadgeModule,
630
- AXDecoratorModule,
631
- AXTranslationModule,
632
- AXPopoverModule,
633
- AXLoadingModule,
634
- A11yModule,
635
- AXTextBoxModule,
636
- AXDropdownModule,
637
- AXListModule,
638
- AXComboBoxComponent,
639
- ],
640
- exports: [AXComboBoxComponent],
641
- providers: [],
642
- }]
643
- }] });
644
-
645
- /**
646
- * Generated bundle index. Do not edit.
647
- */
648
-
649
- export { AXComboBoxComponent, AXComboBoxModule };
650
- //# sourceMappingURL=acorex-components-combo-box.mjs.map