@acorex/components 22.1.0-next.31 → 22.1.0-next.32
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/emoji/README.md +3 -0
- package/emojipicker/README.md +3 -0
- package/fesm2022/acorex-components-accordion.mjs +13 -13
- package/fesm2022/acorex-components-accordion.mjs.map +1 -1
- package/fesm2022/acorex-components-action-sheet.mjs +13 -13
- package/fesm2022/acorex-components-alert.mjs +7 -7
- package/fesm2022/acorex-components-aspect-ratio.mjs +3 -3
- package/fesm2022/acorex-components-audio-wave.mjs +295 -271
- package/fesm2022/acorex-components-audio-wave.mjs.map +1 -1
- package/fesm2022/acorex-components-autocomplete.mjs +7 -7
- package/fesm2022/acorex-components-avatar.mjs +10 -10
- package/fesm2022/acorex-components-badge.mjs +7 -7
- package/fesm2022/acorex-components-bottom-navigation.mjs +10 -10
- package/fesm2022/acorex-components-breadcrumbs.mjs +10 -10
- package/fesm2022/acorex-components-bubble.mjs +71 -0
- package/fesm2022/acorex-components-bubble.mjs.map +1 -0
- package/fesm2022/acorex-components-button-group.mjs +22 -15
- package/fesm2022/acorex-components-button-group.mjs.map +1 -1
- package/fesm2022/acorex-components-button.mjs +14 -14
- package/fesm2022/acorex-components-button.mjs.map +1 -1
- package/fesm2022/acorex-components-calendar.mjs +332 -130
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-check-box.mjs +7 -7
- package/fesm2022/acorex-components-chips.mjs +7 -7
- package/fesm2022/acorex-components-circular-progress.mjs +7 -7
- package/fesm2022/acorex-components-code-editor.mjs +44 -19
- package/fesm2022/acorex-components-code-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-color-box.mjs +7 -7
- package/fesm2022/acorex-components-color-palette.mjs +28 -28
- package/fesm2022/acorex-components-combo-box.mjs +244 -54
- package/fesm2022/acorex-components-combo-box.mjs.map +1 -1
- package/fesm2022/acorex-components-command.mjs +7 -7
- package/fesm2022/acorex-components-comment.mjs +28 -28
- package/fesm2022/acorex-components-conversation-acorex-components-conversation-BBWe3tfe.mjs +19099 -0
- package/fesm2022/acorex-components-conversation-acorex-components-conversation-BBWe3tfe.mjs.map +1 -0
- package/fesm2022/acorex-components-conversation-composer-action-choice-dialog.component-F5fLD_SK.mjs +50 -0
- package/fesm2022/acorex-components-conversation-composer-action-choice-dialog.component-F5fLD_SK.mjs.map +1 -0
- package/fesm2022/acorex-components-conversation-image-picker-editor-dialog.component-Bk3ixvt2.mjs +87 -0
- package/fesm2022/acorex-components-conversation-image-picker-editor-dialog.component-Bk3ixvt2.mjs.map +1 -0
- package/fesm2022/acorex-components-conversation-picker-rename-file-dialog.component-OAHRGH_G.mjs +65 -0
- package/fesm2022/acorex-components-conversation-picker-rename-file-dialog.component-OAHRGH_G.mjs.map +1 -0
- package/fesm2022/acorex-components-conversation.mjs +1 -15470
- package/fesm2022/acorex-components-conversation.mjs.map +1 -1
- package/fesm2022/acorex-components-cron-job.mjs +47 -47
- package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
- package/fesm2022/acorex-components-data-list.mjs +3 -3
- package/fesm2022/acorex-components-data-pager.mjs +35 -35
- package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
- package/fesm2022/acorex-components-data-table.mjs +734 -165
- package/fesm2022/acorex-components-data-table.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-box.mjs +7 -7
- package/fesm2022/acorex-components-datetime-input.mjs +7 -7
- package/fesm2022/acorex-components-datetime-picker.mjs +8 -8
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-decorators.mjs +60 -30
- package/fesm2022/acorex-components-decorators.mjs.map +1 -1
- package/fesm2022/acorex-components-dialog.mjs +11 -11
- package/fesm2022/acorex-components-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-drawer.mjs +10 -10
- package/fesm2022/acorex-components-dropdown-button.mjs +8 -8
- package/fesm2022/acorex-components-dropdown-button.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown.mjs +14 -14
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-editor.mjs +15 -14
- package/fesm2022/acorex-components-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-emoji.mjs +74 -0
- package/fesm2022/acorex-components-emoji.mjs.map +1 -0
- package/fesm2022/acorex-components-emojipicker.mjs +425 -0
- package/fesm2022/acorex-components-emojipicker.mjs.map +1 -0
- package/fesm2022/acorex-components-fab.mjs +6 -6
- package/fesm2022/acorex-components-fab.mjs.map +1 -1
- package/fesm2022/acorex-components-file-viewer.mjs +372 -122
- package/fesm2022/acorex-components-file-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-form.mjs +17 -17
- package/fesm2022/acorex-components-form.mjs.map +1 -1
- package/fesm2022/acorex-components-grid-layout-builder.mjs +10 -10
- package/fesm2022/acorex-components-highlight.mjs +80 -0
- package/fesm2022/acorex-components-highlight.mjs.map +1 -0
- package/fesm2022/acorex-components-image-editor.mjs +780 -451
- package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-image.mjs +7 -7
- package/fesm2022/acorex-components-inline-reaction.mjs +111 -0
- package/fesm2022/acorex-components-inline-reaction.mjs.map +1 -0
- package/fesm2022/acorex-components-json-viewer.mjs +7 -7
- package/fesm2022/acorex-components-kanban.mjs +3 -3
- package/fesm2022/acorex-components-kanban.mjs.map +1 -1
- package/fesm2022/acorex-components-kbd.mjs +6 -6
- package/fesm2022/acorex-components-label.mjs +7 -7
- package/fesm2022/acorex-components-list.mjs +28 -9
- package/fesm2022/acorex-components-list.mjs.map +1 -1
- package/fesm2022/acorex-components-loading-dialog.mjs +10 -10
- package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-loading.mjs +16 -16
- package/fesm2022/acorex-components-lookup.mjs +764 -156
- package/fesm2022/acorex-components-lookup.mjs.map +1 -1
- package/fesm2022/acorex-components-map.mjs +20 -13
- package/fesm2022/acorex-components-map.mjs.map +1 -1
- package/fesm2022/acorex-components-media-viewer.mjs +215 -218
- package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +146 -45
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-message-status.mjs +71 -0
- package/fesm2022/acorex-components-message-status.mjs.map +1 -0
- package/fesm2022/acorex-components-message-time.mjs +36 -0
- package/fesm2022/acorex-components-message-time.mjs.map +1 -0
- package/fesm2022/acorex-components-message.mjs +120 -0
- package/fesm2022/acorex-components-message.mjs.map +1 -0
- package/fesm2022/acorex-components-navbar.mjs +7 -7
- package/fesm2022/acorex-components-notification.mjs +11 -11
- package/fesm2022/acorex-components-notification.mjs.map +1 -1
- package/fesm2022/acorex-components-number-box.mjs +7 -7
- package/fesm2022/acorex-components-otp.mjs +7 -7
- package/fesm2022/acorex-components-page.mjs +10 -10
- package/fesm2022/acorex-components-paint.mjs +25 -25
- package/fesm2022/acorex-components-paint.mjs.map +1 -1
- package/fesm2022/acorex-components-password-box.mjs +10 -10
- package/fesm2022/acorex-components-password-box.mjs.map +1 -1
- package/fesm2022/acorex-components-pdf-reader.mjs +7 -7
- package/fesm2022/acorex-components-phone-box.mjs +7 -7
- package/fesm2022/acorex-components-picker.mjs +13 -13
- package/fesm2022/acorex-components-popover.mjs +33 -15
- package/fesm2022/acorex-components-popover.mjs.map +1 -1
- package/fesm2022/acorex-components-popup.mjs +67 -56
- package/fesm2022/acorex-components-popup.mjs.map +1 -1
- package/fesm2022/acorex-components-progress-bar.mjs +7 -7
- package/fesm2022/acorex-components-qrcode.mjs +7 -7
- package/fesm2022/acorex-components-radio.mjs +7 -7
- package/fesm2022/acorex-components-rail-navigation.mjs +14 -14
- package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
- package/fesm2022/acorex-components-range-slider.mjs +9 -9
- package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
- package/fesm2022/acorex-components-rate-picker.mjs +7 -7
- package/fesm2022/acorex-components-reaction.mjs +144 -0
- package/fesm2022/acorex-components-reaction.mjs.map +1 -0
- package/fesm2022/acorex-components-rest-api-generator.mjs +22 -22
- package/fesm2022/acorex-components-rest-api-generator.mjs.map +1 -1
- package/fesm2022/acorex-components-result.mjs +7 -7
- package/fesm2022/acorex-components-routing-progress.mjs +7 -7
- package/fesm2022/acorex-components-rrule.mjs +9 -9
- package/fesm2022/acorex-components-rrule.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler-picker.mjs +56 -56
- package/fesm2022/acorex-components-scheduler-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +34 -34
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/fesm2022/acorex-components-search-box.mjs +7 -7
- package/fesm2022/acorex-components-select-box.mjs +7 -7
- package/fesm2022/acorex-components-selection-list.mjs +7 -8
- package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
- package/fesm2022/acorex-components-side-menu.mjs +55 -42
- package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-sidebar.mjs +28 -28
- package/fesm2022/acorex-components-skeleton.mjs +7 -7
- package/fesm2022/acorex-components-slider.mjs +7 -7
- package/fesm2022/acorex-components-sliding-item.mjs +13 -13
- package/fesm2022/acorex-components-step-wizard.mjs +16 -18
- package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
- package/fesm2022/acorex-components-switch.mjs +10 -10
- package/fesm2022/acorex-components-tabs.mjs +529 -78
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/fesm2022/acorex-components-tag-box.mjs +7 -7
- package/fesm2022/acorex-components-tag.mjs +7 -7
- package/fesm2022/acorex-components-text-area.mjs +7 -7
- package/fesm2022/acorex-components-text-box.mjs +7 -7
- package/fesm2022/acorex-components-time-duration.mjs +7 -7
- package/fesm2022/acorex-components-time-line.mjs +10 -10
- package/fesm2022/acorex-components-toast.mjs +10 -10
- package/fesm2022/acorex-components-toolbar.mjs +7 -7
- package/fesm2022/acorex-components-tooltip.mjs +10 -10
- package/fesm2022/acorex-components-tree-view.mjs +58 -15
- package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
- package/fesm2022/acorex-components-uploader.mjs +13 -13
- package/fesm2022/acorex-components-video-player.mjs +7 -7
- package/fesm2022/acorex-components-wysiwyg.mjs +109 -39
- package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
- package/highlight/README.md +13 -0
- package/inline-reaction/README.md +3 -0
- package/lookup/README.md +1 -1
- package/message/README.md +3 -0
- package/message-status/README.md +3 -0
- package/message-time/README.md +3 -0
- package/package.json +42 -12
- package/reaction/README.md +3 -0
- package/types/acorex-components-action-sheet.d.ts +1 -1
- package/types/acorex-components-audio-wave.d.ts +132 -73
- package/types/acorex-components-bubble.d.ts +31 -0
- package/types/acorex-components-button-group.d.ts +4 -0
- package/types/acorex-components-button.d.ts +1 -1
- package/types/acorex-components-calendar.d.ts +43 -12
- package/types/acorex-components-check-box.d.ts +1 -1
- package/types/acorex-components-code-editor.d.ts +4 -1
- package/types/acorex-components-color-box.d.ts +1 -1
- package/types/acorex-components-color-palette.d.ts +2 -2
- package/types/acorex-components-combo-box.d.ts +34 -4
- package/types/acorex-components-command.d.ts +1 -1
- package/types/acorex-components-conversation.d.ts +1771 -1342
- package/types/acorex-components-cron-job.d.ts +6 -6
- package/types/acorex-components-data-pager.d.ts +2 -2
- package/types/acorex-components-data-table.d.ts +194 -21
- package/types/acorex-components-datetime-box.d.ts +1 -1
- package/types/acorex-components-datetime-picker.d.ts +1 -1
- package/types/acorex-components-decorators.d.ts +13 -1
- package/types/acorex-components-dialog.d.ts +1 -1
- package/types/acorex-components-dropdown.d.ts +1 -1
- package/types/acorex-components-editor.d.ts +1 -1
- package/types/acorex-components-emoji.d.ts +42 -0
- package/types/acorex-components-emojipicker.d.ts +146 -0
- package/types/acorex-components-file-viewer.d.ts +50 -6
- package/types/acorex-components-highlight.d.ts +31 -0
- package/types/acorex-components-image-editor.d.ts +72 -50
- package/types/acorex-components-inline-reaction.d.ts +52 -0
- package/types/acorex-components-list.d.ts +12 -0
- package/types/acorex-components-loading-dialog.d.ts +1 -1
- package/types/acorex-components-loading.d.ts +1 -1
- package/types/acorex-components-lookup.d.ts +213 -82
- package/types/acorex-components-map.d.ts +7 -2
- package/types/acorex-components-media-viewer.d.ts +4 -3
- package/types/acorex-components-menu.d.ts +17 -5
- package/types/acorex-components-message-status.d.ts +23 -0
- package/types/acorex-components-message-time.d.ts +19 -0
- package/types/acorex-components-message.d.ts +59 -0
- package/types/acorex-components-notification.d.ts +1 -1
- package/types/acorex-components-number-box.d.ts +1 -1
- package/types/acorex-components-otp.d.ts +1 -1
- package/types/acorex-components-page.d.ts +2 -2
- package/types/acorex-components-paint.d.ts +2 -2
- package/types/acorex-components-password-box.d.ts +1 -1
- package/types/acorex-components-phone-box.d.ts +1 -1
- package/types/acorex-components-popover.d.ts +10 -4
- package/types/acorex-components-popup.d.ts +20 -10
- package/types/acorex-components-rail-navigation.d.ts +1 -1
- package/types/acorex-components-range-slider.d.ts +1 -1
- package/types/acorex-components-reaction.d.ts +85 -0
- package/types/acorex-components-rest-api-generator.d.ts +1 -1
- package/types/acorex-components-rrule.d.ts +1 -1
- package/types/acorex-components-scheduler-picker.d.ts +1 -1
- package/types/acorex-components-scheduler.d.ts +1 -1
- package/types/acorex-components-search-box.d.ts +1 -1
- package/types/acorex-components-selection-list.d.ts +1 -1
- package/types/acorex-components-side-menu.d.ts +6 -8
- package/types/acorex-components-slider.d.ts +1 -1
- package/types/acorex-components-step-wizard.d.ts +4 -4
- package/types/acorex-components-switch.d.ts +1 -1
- package/types/acorex-components-tabs.d.ts +150 -19
- package/types/acorex-components-tag-box.d.ts +2 -2
- package/types/acorex-components-text-area.d.ts +1 -1
- package/types/acorex-components-text-box.d.ts +1 -1
- package/types/acorex-components-time-duration.d.ts +1 -1
- package/types/acorex-components-toast.d.ts +1 -1
- package/types/acorex-components-tree-view.d.ts +32 -3
- package/types/acorex-components-wysiwyg.d.ts +15 -2
- package/fesm2022/acorex-components-conversation-composer-action-choice-dialog.component-DCcRJYfF.mjs +0 -50
- package/fesm2022/acorex-components-conversation-composer-action-choice-dialog.component-DCcRJYfF.mjs.map +0 -1
- package/fesm2022/acorex-components-conversation-open-composer-picker-for-files-DnSW908R.mjs +0 -210
- package/fesm2022/acorex-components-conversation-open-composer-picker-for-files-DnSW908R.mjs.map +0 -1
- package/fesm2022/acorex-components-flow-chart.mjs +0 -735
- package/fesm2022/acorex-components-flow-chart.mjs.map +0 -1
- package/fesm2022/acorex-components-query-builder.mjs +0 -267
- package/fesm2022/acorex-components-query-builder.mjs.map +0 -1
- package/flow-chart/README.md +0 -3
- package/query-builder/README.md +0 -3
- package/types/acorex-components-flow-chart.d.ts +0 -187
- package/types/acorex-components-query-builder.d.ts +0 -52
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AXDataSource, AXListDataSource, NXValueComponent,
|
|
1
|
+
import { AXDataSource, retryFrames, scrollNearestIntoView, AXListDataSource, NXValueComponent, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
|
|
2
2
|
import { AXButtonComponent } from '@acorex/components/button';
|
|
3
3
|
import { AXChipsComponent } from '@acorex/components/chips';
|
|
4
4
|
import * as i1$1 from '@acorex/components/decorators';
|
|
@@ -6,13 +6,14 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
|
|
|
6
6
|
import { AXPopoverComponent } from '@acorex/components/popover';
|
|
7
7
|
import { AXSearchBoxComponent } from '@acorex/components/search-box';
|
|
8
8
|
import { AXPlatform } from '@acorex/core/platform';
|
|
9
|
-
import { AXTranslatorPipe } from '@acorex/core/translation';
|
|
9
|
+
import { AXTranslatorPipe, AXTranslationService, toTranslatedSignal } from '@acorex/core/translation';
|
|
10
10
|
import { NgTemplateOutlet, AsyncPipe, DOCUMENT } from '@angular/common';
|
|
11
11
|
import * as i0 from '@angular/core';
|
|
12
|
-
import { input, output, signal, computed, viewChild, viewChildren, inject, NgZone, effect, untracked, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, DestroyRef, model,
|
|
12
|
+
import { input, output, signal, computed, viewChild, viewChildren, inject, NgZone, effect, untracked, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, afterRenderEffect, DestroyRef, model, booleanAttribute, linkedSignal, NgModule } from '@angular/core';
|
|
13
13
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
14
14
|
import * as i2 from '@acorex/cdk/list-navigation';
|
|
15
15
|
import { AXListNavigationDirective, AXListNavigationItemDirective, AXListNavigationModule } from '@acorex/cdk/list-navigation';
|
|
16
|
+
import { AXHighlightTextComponent } from '@acorex/components/highlight';
|
|
16
17
|
import * as i1 from '@angular/cdk/scrolling';
|
|
17
18
|
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
18
19
|
import { AXTreeViewComponent } from '@acorex/components/tree-view';
|
|
@@ -20,6 +21,143 @@ import { AXDataTableComponent, AXDataTableTextColumnComponent } from '@acorex/co
|
|
|
20
21
|
import { fromEvent, auditTime } from 'rxjs';
|
|
21
22
|
import { AXCheckBoxComponent } from '@acorex/components/check-box';
|
|
22
23
|
|
|
24
|
+
/** Whether a tree node may have descendants (embedded children or lazy metadata). */
|
|
25
|
+
function lookupTreeNodeMayHaveChildren(node) {
|
|
26
|
+
const raw = node['children'];
|
|
27
|
+
if (Array.isArray(raw) && raw.length > 0) {
|
|
28
|
+
return true;
|
|
29
|
+
}
|
|
30
|
+
const count = node['childrenCount'];
|
|
31
|
+
if (typeof count === 'number' && count > 0) {
|
|
32
|
+
return true;
|
|
33
|
+
}
|
|
34
|
+
return node['hasChild'] === true || node['hasChildren'] === true;
|
|
35
|
+
}
|
|
36
|
+
async function mapWithConcurrency(items, concurrency, fn, isCancelled) {
|
|
37
|
+
if (!items.length) {
|
|
38
|
+
return [];
|
|
39
|
+
}
|
|
40
|
+
const results = new Array(items.length);
|
|
41
|
+
let nextIndex = 0;
|
|
42
|
+
const worker = async () => {
|
|
43
|
+
while (nextIndex < items.length) {
|
|
44
|
+
if (isCancelled?.()) {
|
|
45
|
+
return;
|
|
46
|
+
}
|
|
47
|
+
const index = nextIndex++;
|
|
48
|
+
if (index >= items.length) {
|
|
49
|
+
break;
|
|
50
|
+
}
|
|
51
|
+
results[index] = await fn(items[index]);
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
const workers = Math.min(concurrency, items.length);
|
|
55
|
+
await Promise.all(Array.from({ length: workers }, () => worker()));
|
|
56
|
+
return results;
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Loads a lazy tree into a nested in-memory snapshot using bounded-concurrency BFS.
|
|
60
|
+
* Returns new node objects and never mutates the input nodes.
|
|
61
|
+
*/
|
|
62
|
+
async function hydrateLookupTree(roots, loadChildren, options) {
|
|
63
|
+
const { valueField, maxConcurrent = 6, maxNodes = 5000, isCancelled } = options;
|
|
64
|
+
const visited = new Set();
|
|
65
|
+
let nodeCount = 0;
|
|
66
|
+
const hydrateLevel = async (nodes) => {
|
|
67
|
+
if (!nodes.length || isCancelled?.()) {
|
|
68
|
+
return nodes.map((node) => ({ ...node }));
|
|
69
|
+
}
|
|
70
|
+
const hydrateNode = async (node) => {
|
|
71
|
+
if (isCancelled?.()) {
|
|
72
|
+
return { ...node };
|
|
73
|
+
}
|
|
74
|
+
const raw = node['children'];
|
|
75
|
+
if (Array.isArray(raw) && raw.length > 0) {
|
|
76
|
+
const children = await hydrateLevel(raw);
|
|
77
|
+
return { ...node, children };
|
|
78
|
+
}
|
|
79
|
+
const id = String(node[valueField] ?? '');
|
|
80
|
+
if (!id || visited.has(id) || !lookupTreeNodeMayHaveChildren(node)) {
|
|
81
|
+
return { ...node };
|
|
82
|
+
}
|
|
83
|
+
visited.add(id);
|
|
84
|
+
nodeCount++;
|
|
85
|
+
if (nodeCount > maxNodes) {
|
|
86
|
+
return { ...node };
|
|
87
|
+
}
|
|
88
|
+
const loaded = await loadChildren(id);
|
|
89
|
+
if (isCancelled?.() || !loaded.length) {
|
|
90
|
+
return { ...node };
|
|
91
|
+
}
|
|
92
|
+
const children = await hydrateLevel(loaded);
|
|
93
|
+
return children.length > 0 ? { ...node, children } : { ...node };
|
|
94
|
+
};
|
|
95
|
+
return mapWithConcurrency(nodes, maxConcurrent, hydrateNode, isCancelled);
|
|
96
|
+
};
|
|
97
|
+
return hydrateLevel(roots);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/** Whether an item label matches a search query (raw or translated). */
|
|
101
|
+
function matchesLookupText(text, query, translateText) {
|
|
102
|
+
const needle = query.trim().toLowerCase();
|
|
103
|
+
if (!needle) {
|
|
104
|
+
return true;
|
|
105
|
+
}
|
|
106
|
+
const raw = String(text ?? '').toLowerCase();
|
|
107
|
+
if (raw.includes(needle)) {
|
|
108
|
+
return true;
|
|
109
|
+
}
|
|
110
|
+
const value = String(text ?? '');
|
|
111
|
+
if (translateText && value.startsWith('@')) {
|
|
112
|
+
return translateText(value).toLowerCase().includes(needle);
|
|
113
|
+
}
|
|
114
|
+
return false;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* Array-backed datasource with optional i18n-aware text filtering.
|
|
118
|
+
*/
|
|
119
|
+
function convertLookupArrayToDataSource(items, options) {
|
|
120
|
+
const normalizedItems = items.map((candidate) => {
|
|
121
|
+
const isObjectItem = candidate != null && typeof candidate === 'object';
|
|
122
|
+
if (isObjectItem) {
|
|
123
|
+
return candidate;
|
|
124
|
+
}
|
|
125
|
+
return { [options.key]: candidate, text: String(candidate ?? '') };
|
|
126
|
+
});
|
|
127
|
+
const config = {
|
|
128
|
+
key: options.key,
|
|
129
|
+
pageSize: options.pageSize,
|
|
130
|
+
load: async (e) => {
|
|
131
|
+
const itemsForFilter = normalizedItems;
|
|
132
|
+
const resultNormalized = e.filter
|
|
133
|
+
? applyLookupArrayFilter(itemsForFilter, e.filter, options.textField, options.translateText)
|
|
134
|
+
: itemsForFilter;
|
|
135
|
+
const result = resultNormalized;
|
|
136
|
+
return {
|
|
137
|
+
items: result.slice(e.skip, e.skip + e.take),
|
|
138
|
+
total: resultNormalized.length,
|
|
139
|
+
};
|
|
140
|
+
},
|
|
141
|
+
byKey: (v) => normalizedItems.find((record) => record[options.key] == v),
|
|
142
|
+
};
|
|
143
|
+
return new AXDataSource(config);
|
|
144
|
+
}
|
|
145
|
+
function applyLookupArrayFilter(items, filter, textField, translateText) {
|
|
146
|
+
if (!filter?.field || filter.value === undefined || filter.value === null) {
|
|
147
|
+
return items;
|
|
148
|
+
}
|
|
149
|
+
const query = String(filter.value);
|
|
150
|
+
return items.filter((item) => {
|
|
151
|
+
const itemField = item[filter.field];
|
|
152
|
+
if (filter.field === textField) {
|
|
153
|
+
return matchesLookupText(String(itemField ?? ''), query, translateText);
|
|
154
|
+
}
|
|
155
|
+
if (typeof itemField === 'string' && typeof filter.value === 'string') {
|
|
156
|
+
return itemField.toLowerCase().includes(filter.value.toLowerCase());
|
|
157
|
+
}
|
|
158
|
+
return false;
|
|
159
|
+
});
|
|
160
|
+
}
|
|
23
161
|
/**
|
|
24
162
|
* Converts a drop-down-tree datasource (nested array or lazy callback) into an
|
|
25
163
|
* `AXDataSource` that a multi-column data table can load and expand.
|
|
@@ -30,7 +168,7 @@ function createLookupTreeTableDataSource(source, options) {
|
|
|
30
168
|
pageSize: 8,
|
|
31
169
|
key: options.valueField,
|
|
32
170
|
load: (query) => loadTreeTableRows(source, options, query, isCallback),
|
|
33
|
-
byKey: (key) => findTreeTableItem(source, options.valueField, key),
|
|
171
|
+
byKey: (key) => findTreeTableItem(source, options.valueField, key) ?? {},
|
|
34
172
|
});
|
|
35
173
|
}
|
|
36
174
|
async function loadTreeTableRows(source, options, query, isCallback) {
|
|
@@ -40,8 +178,13 @@ async function loadTreeTableRows(source, options, query, isCallback) {
|
|
|
40
178
|
const children = await loadChildren(source, options, parentFilter.value, isCallback);
|
|
41
179
|
return { items: children, total: children.length };
|
|
42
180
|
}
|
|
43
|
-
const
|
|
44
|
-
|
|
181
|
+
const rootNodes = textFilter && options.loadSearchRoots
|
|
182
|
+
? await options.loadSearchRoots()
|
|
183
|
+
: await loadRoots(source, isCallback);
|
|
184
|
+
const roots = mapTreeNodes(rootNodes, options);
|
|
185
|
+
const items = textFilter
|
|
186
|
+
? prepareFilteredTreeTableRows(filterTreeNodes(roots, options.searchFields?.length ? options.searchFields : options.textField, String(textFilter.value ?? '')))
|
|
187
|
+
: roots;
|
|
45
188
|
return { items, total: items.length };
|
|
46
189
|
}
|
|
47
190
|
async function loadRoots(source, isCallback) {
|
|
@@ -65,11 +208,7 @@ function mapTreeNodes(nodes, options) {
|
|
|
65
208
|
function mapTreeNode(node, options) {
|
|
66
209
|
const rawChildren = node['children'];
|
|
67
210
|
const children = Array.isArray(rawChildren) ? mapTreeNodes(rawChildren, options) : undefined;
|
|
68
|
-
const
|
|
69
|
-
const hasChildren = (children?.length ?? 0) > 0 ||
|
|
70
|
-
(typeof childrenCount === 'number' && childrenCount > 0) ||
|
|
71
|
-
node['hasChild'] === true ||
|
|
72
|
-
node['hasChildren'] === true;
|
|
211
|
+
const hasChildren = lookupTreeNodeMayHaveChildren(node) || (children?.length ?? 0) > 0;
|
|
73
212
|
return {
|
|
74
213
|
...node,
|
|
75
214
|
[options.hasChildrenField]: hasChildren,
|
|
@@ -82,26 +221,48 @@ function mapTreeNode(node, options) {
|
|
|
82
221
|
* all children. Every kept ancestor is a new object with `expanded: true` so
|
|
83
222
|
* nested hits are visible without mutating the original tree.
|
|
84
223
|
*/
|
|
85
|
-
|
|
224
|
+
/** Reads a possibly dotted field path off a node. */
|
|
225
|
+
function readNodeField(node, field) {
|
|
226
|
+
if (!field.includes('.')) {
|
|
227
|
+
return node[field];
|
|
228
|
+
}
|
|
229
|
+
return field.split('.').reduce((current, segment) => {
|
|
230
|
+
if (current == null || typeof current !== 'object') {
|
|
231
|
+
return undefined;
|
|
232
|
+
}
|
|
233
|
+
return current[segment];
|
|
234
|
+
}, node);
|
|
235
|
+
}
|
|
236
|
+
/** Whether any of `fields` on the node matches the query. */
|
|
237
|
+
function matchesLookupNode(node, fields, needle, translateText) {
|
|
238
|
+
return fields.some((field) => {
|
|
239
|
+
const value = readNodeField(node, field);
|
|
240
|
+
if (value == null) {
|
|
241
|
+
return false;
|
|
242
|
+
}
|
|
243
|
+
return matchesLookupText(String(value), needle, translateText);
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
function filterTreeNodes(nodes, textField, query, translateText) {
|
|
86
247
|
const needle = query.trim().toLowerCase();
|
|
87
248
|
if (!needle) {
|
|
88
249
|
return nodes;
|
|
89
250
|
}
|
|
251
|
+
const fields = (Array.isArray(textField) ? textField : [textField]).filter((field) => !!field);
|
|
90
252
|
const result = [];
|
|
91
253
|
for (const node of nodes) {
|
|
92
254
|
const rawChildren = node['children'];
|
|
93
255
|
const nested = Array.isArray(rawChildren) ? rawChildren : undefined;
|
|
94
|
-
const
|
|
95
|
-
const selfMatch = String(node[textField] ?? '')
|
|
96
|
-
.toLowerCase()
|
|
97
|
-
.includes(needle);
|
|
256
|
+
const selfMatch = matchesLookupNode(node, fields, needle, translateText);
|
|
98
257
|
if (selfMatch) {
|
|
99
258
|
result.push({
|
|
100
259
|
...node,
|
|
101
260
|
...(nested && nested.length > 0 ? { children: cloneTreeNodes(nested), expanded: true } : {}),
|
|
102
261
|
});
|
|
262
|
+
continue;
|
|
103
263
|
}
|
|
104
|
-
|
|
264
|
+
const children = nested ? filterTreeNodes(nested, fields, needle, translateText) : undefined;
|
|
265
|
+
if (children && children.length > 0) {
|
|
105
266
|
result.push({
|
|
106
267
|
...node,
|
|
107
268
|
children,
|
|
@@ -111,6 +272,30 @@ function filterTreeNodes(nodes, textField, query) {
|
|
|
111
272
|
}
|
|
112
273
|
return result;
|
|
113
274
|
}
|
|
275
|
+
/**
|
|
276
|
+
* Maps `filterTreeNodes` output to data-table row metadata so matching branches
|
|
277
|
+
* are expanded and nested rows are visible for search highlighting.
|
|
278
|
+
*/
|
|
279
|
+
function prepareFilteredTreeTableRows(nodes) {
|
|
280
|
+
return nodes.map((node) => prepareFilteredTreeTableNode(node, 0));
|
|
281
|
+
}
|
|
282
|
+
function prepareFilteredTreeTableNode(node, level) {
|
|
283
|
+
const rawChildren = node['children'];
|
|
284
|
+
const nested = Array.isArray(rawChildren) ? rawChildren : undefined;
|
|
285
|
+
const children = nested?.map((child) => prepareFilteredTreeTableNode(child, level + 1));
|
|
286
|
+
const hasChildren = (children?.length ?? 0) > 0;
|
|
287
|
+
const priorMeta = node['__meta__'];
|
|
288
|
+
const shouldExpand = hasChildren || node['expanded'] === true;
|
|
289
|
+
return {
|
|
290
|
+
...node,
|
|
291
|
+
...(children ? { children } : {}),
|
|
292
|
+
__meta__: {
|
|
293
|
+
...(typeof priorMeta === 'object' && priorMeta != null ? priorMeta : {}),
|
|
294
|
+
level,
|
|
295
|
+
expanded: shouldExpand,
|
|
296
|
+
},
|
|
297
|
+
};
|
|
298
|
+
}
|
|
114
299
|
function cloneTreeNodes(nodes) {
|
|
115
300
|
return nodes.map((node) => {
|
|
116
301
|
const raw = node['children'];
|
|
@@ -156,6 +341,58 @@ function findTreeNode(nodes, valueField, key) {
|
|
|
156
341
|
return null;
|
|
157
342
|
}
|
|
158
343
|
|
|
344
|
+
/**
|
|
345
|
+
* Scrolls a CDK virtual viewport so the row at `index` is visible using nearest-edge behavior.
|
|
346
|
+
* Uses offset math because the row may not be rendered in the DOM yet.
|
|
347
|
+
*/
|
|
348
|
+
function scrollNearestByOffset(viewport, index, itemHeight, totalCount) {
|
|
349
|
+
const viewportSize = viewport.getViewportSize();
|
|
350
|
+
const maxOffset = Math.max(0, totalCount * itemHeight - viewportSize);
|
|
351
|
+
const itemTop = index * itemHeight;
|
|
352
|
+
const itemBottom = itemTop + itemHeight;
|
|
353
|
+
const currentOffset = viewport.measureScrollOffset();
|
|
354
|
+
if (itemTop < currentOffset) {
|
|
355
|
+
viewport.scrollToOffset(itemTop);
|
|
356
|
+
}
|
|
357
|
+
else if (itemBottom > currentOffset + viewportSize) {
|
|
358
|
+
viewport.scrollToOffset(Math.min(maxOffset, itemBottom - viewportSize));
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
/**
|
|
362
|
+
* Scrolls a data-table body so the selected row is visible, accounting for a sticky header.
|
|
363
|
+
*/
|
|
364
|
+
function scrollTableToSelectedRow(host, attempts = 5) {
|
|
365
|
+
retryFrames(() => {
|
|
366
|
+
const wrapper = host.querySelector('.ax-data-table-wrapper');
|
|
367
|
+
const row = wrapper?.querySelector('tr.ax-state-selected');
|
|
368
|
+
if (!wrapper || !row) {
|
|
369
|
+
return false;
|
|
370
|
+
}
|
|
371
|
+
const thead = wrapper.querySelector('thead');
|
|
372
|
+
const topInset = thead?.offsetHeight ?? 0;
|
|
373
|
+
scrollNearestIntoView(wrapper, row, topInset);
|
|
374
|
+
return true;
|
|
375
|
+
}, attempts);
|
|
376
|
+
}
|
|
377
|
+
/**
|
|
378
|
+
* Scrolls a lookup tree container so the node with `selectedId` is visible.
|
|
379
|
+
* Nodes inside collapsed branches are not in the DOM and are skipped.
|
|
380
|
+
*/
|
|
381
|
+
function scrollTreeToSelectedNode(host, selectedId, attempts = 5) {
|
|
382
|
+
if (!selectedId) {
|
|
383
|
+
return;
|
|
384
|
+
}
|
|
385
|
+
retryFrames(() => {
|
|
386
|
+
const container = host.querySelector('.ax-lookup-tree');
|
|
387
|
+
const node = container?.querySelector(`[data-tree-node-id="${CSS.escape(selectedId)}"]`);
|
|
388
|
+
if (!container || !node) {
|
|
389
|
+
return false;
|
|
390
|
+
}
|
|
391
|
+
scrollNearestIntoView(container, node);
|
|
392
|
+
return true;
|
|
393
|
+
}, attempts);
|
|
394
|
+
}
|
|
395
|
+
|
|
159
396
|
/**
|
|
160
397
|
* Shared `AXDataSource` + CDK virtual scroll plumbing for the list-based lookup views
|
|
161
398
|
* (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`).
|
|
@@ -170,6 +407,16 @@ class AXLookupListViewBase {
|
|
|
170
407
|
return this.totalCount();
|
|
171
408
|
}
|
|
172
409
|
#ngZone;
|
|
410
|
+
/**
|
|
411
|
+
* Before the first page loads, `totalCount` is 0 but `cachedItems` is pre-sized to `pageSize`.
|
|
412
|
+
* After a completed load with no rows, `cachedItems` is an empty array.
|
|
413
|
+
*/
|
|
414
|
+
#hasPendingInitialLoad(source) {
|
|
415
|
+
return source.totalCount === 0 && source.cachedItems.length > 0 && !source.isLoading;
|
|
416
|
+
}
|
|
417
|
+
#syncLoadingState(source, isLoading) {
|
|
418
|
+
this.isLoading.set(isLoading || this.#hasPendingInitialLoad(source));
|
|
419
|
+
}
|
|
173
420
|
constructor() {
|
|
174
421
|
/**
|
|
175
422
|
* The datasource providing the items (paged, remote-capable).
|
|
@@ -207,7 +454,8 @@ class AXLookupListViewBase {
|
|
|
207
454
|
this.maxVisibleItems = input(8, /* @ts-ignore */
|
|
208
455
|
...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : /* istanbul ignore next */ []));
|
|
209
456
|
/**
|
|
210
|
-
* Custom template rendered for each item. Context: `$implicit` is the item
|
|
457
|
+
* Custom template rendered for each item. Context: `$implicit` is the item;
|
|
458
|
+
* `highlightText` is the active search query when result highlighting is enabled.
|
|
211
459
|
* Default option chrome is not applied on top of the template.
|
|
212
460
|
*/
|
|
213
461
|
this.itemTemplate = input(undefined, /* @ts-ignore */
|
|
@@ -227,6 +475,11 @@ class AXLookupListViewBase {
|
|
|
227
475
|
*/
|
|
228
476
|
this.alternate = input(false, /* @ts-ignore */
|
|
229
477
|
...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
|
|
478
|
+
/**
|
|
479
|
+
* When set, matching characters in the default option label are highlighted.
|
|
480
|
+
*/
|
|
481
|
+
this.highlightText = input('', /* @ts-ignore */
|
|
482
|
+
...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
|
|
230
483
|
/**
|
|
231
484
|
* Emitted when the user picks (or toggles) an item.
|
|
232
485
|
*/
|
|
@@ -280,20 +533,76 @@ class AXLookupListViewBase {
|
|
|
280
533
|
const list = new AXListDataSource({ source });
|
|
281
534
|
untracked(() => {
|
|
282
535
|
this.totalCount.set(source.totalCount);
|
|
283
|
-
this
|
|
536
|
+
this.#syncLoadingState(source, source.isLoading);
|
|
284
537
|
this.listDataSource.set(list);
|
|
285
538
|
});
|
|
286
|
-
const loadingSub = source.onLoadingChanged.subscribe((value) => this
|
|
287
|
-
const changedSub = source.onChanged.subscribe((e) =>
|
|
539
|
+
const loadingSub = source.onLoadingChanged.subscribe((value) => this.#syncLoadingState(source, value));
|
|
540
|
+
const changedSub = source.onChanged.subscribe((e) => {
|
|
541
|
+
this.totalCount.set(e.totalCount);
|
|
542
|
+
if (!source.isLoading) {
|
|
543
|
+
this.#syncLoadingState(source, false);
|
|
544
|
+
}
|
|
545
|
+
});
|
|
288
546
|
onCleanup(() => {
|
|
289
547
|
loadingSub.unsubscribe();
|
|
290
548
|
changedSub.unsubscribe();
|
|
291
549
|
});
|
|
292
550
|
});
|
|
551
|
+
// Scroll the selected row into view once the virtual viewport and data are ready.
|
|
552
|
+
effect(() => {
|
|
553
|
+
const viewport = this.viewportRef();
|
|
554
|
+
const loading = this.isLoading();
|
|
555
|
+
const count = this.totalCount();
|
|
556
|
+
const values = this.selectedValues();
|
|
557
|
+
const field = this.valueField();
|
|
558
|
+
const height = this.itemHeight();
|
|
559
|
+
const source = this.dataSource();
|
|
560
|
+
if (!viewport || loading || count === 0 || values.length === 0) {
|
|
561
|
+
return;
|
|
562
|
+
}
|
|
563
|
+
untracked(() => {
|
|
564
|
+
requestAnimationFrame(() => {
|
|
565
|
+
viewport.checkViewportSize();
|
|
566
|
+
const index = this.#resolveSelectedIndex(source, values, field);
|
|
567
|
+
if (index >= 0) {
|
|
568
|
+
scrollNearestByOffset(viewport, index, height, count);
|
|
569
|
+
}
|
|
570
|
+
});
|
|
571
|
+
});
|
|
572
|
+
});
|
|
293
573
|
}
|
|
294
|
-
|
|
574
|
+
#resolveSelectedIndex(source, values, valueField) {
|
|
575
|
+
const selectedValue = values[0];
|
|
576
|
+
if (selectedValue == null) {
|
|
577
|
+
return -1;
|
|
578
|
+
}
|
|
579
|
+
const items = source.cachedItems;
|
|
580
|
+
for (let index = 0; index < items.length; index++) {
|
|
581
|
+
const item = items[index];
|
|
582
|
+
if (item != null && item[valueField] == selectedValue) {
|
|
583
|
+
return index;
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
return -1;
|
|
587
|
+
}
|
|
588
|
+
/** Moves keyboard focus to the selected list option, or the first option when none is selected. */
|
|
295
589
|
focusFirst() {
|
|
296
|
-
this.listNavigation()
|
|
590
|
+
const nav = this.listNavigation();
|
|
591
|
+
if (!nav) {
|
|
592
|
+
return;
|
|
593
|
+
}
|
|
594
|
+
const viewport = this.viewportRef();
|
|
595
|
+
const selectedHost = viewport?.elementRef.nativeElement.querySelector('.ax-lookup-option-host.ax-state-selected');
|
|
596
|
+
if (selectedHost) {
|
|
597
|
+
const items = this.navItems();
|
|
598
|
+
const index = items.findIndex((item) => item.itemElem.nativeElement === selectedHost);
|
|
599
|
+
if (index >= 0) {
|
|
600
|
+
nav.activeIndex.set(index);
|
|
601
|
+
nav.navigateTo(items[index]);
|
|
602
|
+
return;
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
nav.focusOnIndex(0);
|
|
297
606
|
}
|
|
298
607
|
getValue(item) {
|
|
299
608
|
return item?.[this.valueField()];
|
|
@@ -373,12 +682,12 @@ class AXLookupListViewBase {
|
|
|
373
682
|
activateNavItem(nav, item) {
|
|
374
683
|
nav?.navigateTo(item);
|
|
375
684
|
}
|
|
376
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
377
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.
|
|
685
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupListViewBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
686
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.6", type: AXLookupListViewBase, isStandalone: true, inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", 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 }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", navigateOut: "navigateOut" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "listNavigation", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }, { propertyName: "navItems", predicate: AXListNavigationItemDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
378
687
|
}
|
|
379
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupListViewBase, decorators: [{
|
|
380
689
|
type: Directive
|
|
381
|
-
}], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], navigateOut: [{ type: i0.Output, args: ["navigateOut"] }], viewportRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], listNavigation: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXListNavigationDirective), { isSignal: true }] }], navItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXListNavigationItemDirective), { isSignal: true }] }] } });
|
|
690
|
+
}], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], navigateOut: [{ type: i0.Output, args: ["navigateOut"] }], viewportRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], listNavigation: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXListNavigationDirective), { isSignal: true }] }], navItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXListNavigationItemDirective), { isSignal: true }] }] } });
|
|
382
691
|
|
|
383
692
|
/**
|
|
384
693
|
* Internal mini component for the `drop-down-list` lookup mode:
|
|
@@ -387,8 +696,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
387
696
|
* @category Components
|
|
388
697
|
*/
|
|
389
698
|
class AXLookupDropDownListComponent extends AXLookupListViewBase {
|
|
390
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
391
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
699
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
700
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXLookupDropDownListComponent, isStandalone: true, selector: "ax-lookup-drop-down-list", providers: [{ provide: AXLookupListViewBase, useExisting: AXLookupDropDownListComponent }], usesInheritance: true, ngImport: i0, template: `
|
|
392
701
|
@if (isEmpty()) {
|
|
393
702
|
@if (emptyTemplate()) {
|
|
394
703
|
<ng-container [ngTemplateOutlet]="emptyTemplate()!" />
|
|
@@ -426,9 +735,14 @@ class AXLookupDropDownListComponent extends AXLookupListViewBase {
|
|
|
426
735
|
>
|
|
427
736
|
@if (item != null) {
|
|
428
737
|
@if (itemTemplate()) {
|
|
429
|
-
<ng-container
|
|
738
|
+
<ng-container
|
|
739
|
+
[ngTemplateOutlet]="itemTemplate()!"
|
|
740
|
+
[ngTemplateOutletContext]="{ $implicit: item, highlightText: highlightText() }"
|
|
741
|
+
/>
|
|
430
742
|
} @else {
|
|
431
|
-
<span class="ax-lookup-option-text">
|
|
743
|
+
<span class="ax-lookup-option-text">
|
|
744
|
+
<ax-highlight-text [text]="getText(item) | translate | async" [query]="highlightText()" />
|
|
745
|
+
</span>
|
|
432
746
|
@if (isSelected(item)) {
|
|
433
747
|
<span class="ax-lookup-option-check ax-icon ax-icon-check" aria-hidden="true"></span>
|
|
434
748
|
}
|
|
@@ -447,15 +761,15 @@ class AXLookupDropDownListComponent extends AXLookupListViewBase {
|
|
|
447
761
|
<span class="ax-lookup-option-loading">{{ '@acorex:common.status.loading' | translate | async }}</span>
|
|
448
762
|
}
|
|
449
763
|
</ng-template>
|
|
450
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i2.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i2.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
764
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i2.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i2.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
451
765
|
}
|
|
452
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupDropDownListComponent, decorators: [{
|
|
453
767
|
type: Component,
|
|
454
768
|
args: [{
|
|
455
769
|
selector: 'ax-lookup-drop-down-list',
|
|
456
770
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
457
771
|
encapsulation: ViewEncapsulation.None,
|
|
458
|
-
imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXListNavigationModule],
|
|
772
|
+
imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXListNavigationModule, AXHighlightTextComponent],
|
|
459
773
|
providers: [{ provide: AXLookupListViewBase, useExisting: AXLookupDropDownListComponent }],
|
|
460
774
|
template: `
|
|
461
775
|
@if (isEmpty()) {
|
|
@@ -495,9 +809,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
495
809
|
>
|
|
496
810
|
@if (item != null) {
|
|
497
811
|
@if (itemTemplate()) {
|
|
498
|
-
<ng-container
|
|
812
|
+
<ng-container
|
|
813
|
+
[ngTemplateOutlet]="itemTemplate()!"
|
|
814
|
+
[ngTemplateOutletContext]="{ $implicit: item, highlightText: highlightText() }"
|
|
815
|
+
/>
|
|
499
816
|
} @else {
|
|
500
|
-
<span class="ax-lookup-option-text">
|
|
817
|
+
<span class="ax-lookup-option-text">
|
|
818
|
+
<ax-highlight-text [text]="getText(item) | translate | async" [query]="highlightText()" />
|
|
819
|
+
</span>
|
|
501
820
|
@if (isSelected(item)) {
|
|
502
821
|
<span class="ax-lookup-option-check ax-icon ax-icon-check" aria-hidden="true"></span>
|
|
503
822
|
}
|
|
@@ -527,7 +846,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
527
846
|
* @category Components
|
|
528
847
|
*/
|
|
529
848
|
class AXLookupDropDownTreeComponent {
|
|
849
|
+
#host;
|
|
530
850
|
constructor() {
|
|
851
|
+
this.#host = inject((ElementRef));
|
|
531
852
|
/**
|
|
532
853
|
* The tree datasource: an array of nodes or a lazy children callback.
|
|
533
854
|
*/
|
|
@@ -563,6 +884,16 @@ class AXLookupDropDownTreeComponent {
|
|
|
563
884
|
*/
|
|
564
885
|
this.emptyTemplate = input(undefined, /* @ts-ignore */
|
|
565
886
|
...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
|
|
887
|
+
/**
|
|
888
|
+
* Custom template rendered while the tree is hydrating for search.
|
|
889
|
+
*/
|
|
890
|
+
this.loadingTemplate = input(undefined, /* @ts-ignore */
|
|
891
|
+
...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
|
|
892
|
+
/**
|
|
893
|
+
* When `true`, a loading placeholder is shown while lazy tree data is hydrated for search.
|
|
894
|
+
*/
|
|
895
|
+
this.loading = input(false, /* @ts-ignore */
|
|
896
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
566
897
|
/**
|
|
567
898
|
* When `true`, visible tree nodes use alternating background colors.
|
|
568
899
|
*/
|
|
@@ -573,6 +904,11 @@ class AXLookupDropDownTreeComponent {
|
|
|
573
904
|
*/
|
|
574
905
|
this.filterKey = input('0', /* @ts-ignore */
|
|
575
906
|
...(ngDevMode ? [{ debugName: "filterKey" }] : /* istanbul ignore next */ []));
|
|
907
|
+
/**
|
|
908
|
+
* When set, matching characters in the default node label are highlighted.
|
|
909
|
+
*/
|
|
910
|
+
this.highlightText = input('', /* @ts-ignore */
|
|
911
|
+
...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
|
|
576
912
|
/**
|
|
577
913
|
* Emitted when the user selects a node.
|
|
578
914
|
*/
|
|
@@ -586,6 +922,13 @@ class AXLookupDropDownTreeComponent {
|
|
|
586
922
|
...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
|
|
587
923
|
this.treeInstances = computed(() => [{ id: this.filterKey(), source: this.dataSource() }], /* @ts-ignore */
|
|
588
924
|
...(ngDevMode ? [{ debugName: "treeInstances" }] : /* istanbul ignore next */ []));
|
|
925
|
+
afterRenderEffect(() => {
|
|
926
|
+
const selectedId = this.selectedIds()[0];
|
|
927
|
+
if (!selectedId || this.isEmpty()) {
|
|
928
|
+
return;
|
|
929
|
+
}
|
|
930
|
+
scrollTreeToSelectedNode(this.#host.nativeElement, selectedId);
|
|
931
|
+
});
|
|
589
932
|
}
|
|
590
933
|
/** Whether the filtered tree currently has no nodes. */
|
|
591
934
|
hasNoMatches() {
|
|
@@ -601,9 +944,17 @@ class AXLookupDropDownTreeComponent {
|
|
|
601
944
|
}
|
|
602
945
|
this.itemClick.emit({ item: node, value: node[this.valueField()] });
|
|
603
946
|
}
|
|
604
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
605
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
606
|
-
@if (
|
|
947
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupDropDownTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
948
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXLookupDropDownTreeComponent, isStandalone: true, selector: "ax-lookup-drop-down-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, filterKey: { classPropertyName: "filterKey", publicName: "filterKey", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
|
|
949
|
+
@if (loading()) {
|
|
950
|
+
@if (loadingTemplate()) {
|
|
951
|
+
<ng-container [ngTemplateOutlet]="loadingTemplate()!" />
|
|
952
|
+
} @else {
|
|
953
|
+
<div class="ax-lookup-empty">
|
|
954
|
+
{{ '@acorex:common.status.loading' | translate | async }}
|
|
955
|
+
</div>
|
|
956
|
+
}
|
|
957
|
+
} @else if (isEmpty()) {
|
|
607
958
|
@if (emptyTemplate()) {
|
|
608
959
|
<ng-container [ngTemplateOutlet]="emptyTemplate()!" />
|
|
609
960
|
} @else {
|
|
@@ -623,24 +974,39 @@ class AXLookupDropDownTreeComponent {
|
|
|
623
974
|
[idField]="valueField()"
|
|
624
975
|
[titleField]="textField()"
|
|
625
976
|
[disabledField]="disabledField()"
|
|
626
|
-
[nodeTemplate]="nodeTemplate()"
|
|
977
|
+
[nodeTemplate]="nodeTemplate() ?? defaultNodeTemplate"
|
|
627
978
|
[alternate]="alternate()"
|
|
979
|
+
[highlightText]="highlightText()"
|
|
628
980
|
(onSelectionChange)="handleSelectionChange($event)"
|
|
629
981
|
/>
|
|
630
982
|
}
|
|
631
983
|
</div>
|
|
632
984
|
}
|
|
633
|
-
|
|
985
|
+
|
|
986
|
+
<ng-template #defaultNodeTemplate let-node>
|
|
987
|
+
<span class="ax-lookup-tree-node-label">
|
|
988
|
+
<ax-highlight-text [text]="node?.[textField()] | translate | async" [query]="highlightText()" />
|
|
989
|
+
</span>
|
|
990
|
+
</ng-template>
|
|
991
|
+
`, isInline: true, dependencies: [{ kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "highlightText", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
634
992
|
}
|
|
635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
993
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupDropDownTreeComponent, decorators: [{
|
|
636
994
|
type: Component,
|
|
637
995
|
args: [{
|
|
638
996
|
selector: 'ax-lookup-drop-down-tree',
|
|
639
997
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
640
998
|
encapsulation: ViewEncapsulation.None,
|
|
641
|
-
imports: [AXTreeViewComponent, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe],
|
|
999
|
+
imports: [AXTreeViewComponent, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXHighlightTextComponent],
|
|
642
1000
|
template: `
|
|
643
|
-
@if (
|
|
1001
|
+
@if (loading()) {
|
|
1002
|
+
@if (loadingTemplate()) {
|
|
1003
|
+
<ng-container [ngTemplateOutlet]="loadingTemplate()!" />
|
|
1004
|
+
} @else {
|
|
1005
|
+
<div class="ax-lookup-empty">
|
|
1006
|
+
{{ '@acorex:common.status.loading' | translate | async }}
|
|
1007
|
+
</div>
|
|
1008
|
+
}
|
|
1009
|
+
} @else if (isEmpty()) {
|
|
644
1010
|
@if (emptyTemplate()) {
|
|
645
1011
|
<ng-container [ngTemplateOutlet]="emptyTemplate()!" />
|
|
646
1012
|
} @else {
|
|
@@ -660,16 +1026,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
660
1026
|
[idField]="valueField()"
|
|
661
1027
|
[titleField]="textField()"
|
|
662
1028
|
[disabledField]="disabledField()"
|
|
663
|
-
[nodeTemplate]="nodeTemplate()"
|
|
1029
|
+
[nodeTemplate]="nodeTemplate() ?? defaultNodeTemplate"
|
|
664
1030
|
[alternate]="alternate()"
|
|
1031
|
+
[highlightText]="highlightText()"
|
|
665
1032
|
(onSelectionChange)="handleSelectionChange($event)"
|
|
666
1033
|
/>
|
|
667
1034
|
}
|
|
668
1035
|
</div>
|
|
669
1036
|
}
|
|
1037
|
+
|
|
1038
|
+
<ng-template #defaultNodeTemplate let-node>
|
|
1039
|
+
<span class="ax-lookup-tree-node-label">
|
|
1040
|
+
<ax-highlight-text [text]="node?.[textField()] | translate | async" [query]="highlightText()" />
|
|
1041
|
+
</span>
|
|
1042
|
+
</ng-template>
|
|
670
1043
|
`,
|
|
671
1044
|
}]
|
|
672
|
-
}], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], filterKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterKey", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
1045
|
+
}], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], filterKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterKey", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
673
1046
|
|
|
674
1047
|
/**
|
|
675
1048
|
* Internal mini component for the `multi-column-tree` lookup mode:
|
|
@@ -679,7 +1052,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
679
1052
|
* @category Components
|
|
680
1053
|
*/
|
|
681
1054
|
class AXLookupMultiColumnTreeComponent {
|
|
1055
|
+
#host;
|
|
682
1056
|
constructor() {
|
|
1057
|
+
this.#host = inject((ElementRef));
|
|
683
1058
|
/**
|
|
684
1059
|
* The datasource providing hierarchical rows (roots on load, children via `parentField`).
|
|
685
1060
|
*/
|
|
@@ -752,6 +1127,11 @@ class AXLookupMultiColumnTreeComponent {
|
|
|
752
1127
|
*/
|
|
753
1128
|
this.alternate = input(false, /* @ts-ignore */
|
|
754
1129
|
...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
|
|
1130
|
+
/**
|
|
1131
|
+
* When set, matching text in table cells is highlighted.
|
|
1132
|
+
*/
|
|
1133
|
+
this.highlightText = input('', /* @ts-ignore */
|
|
1134
|
+
...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
|
|
755
1135
|
/**
|
|
756
1136
|
* Emitted when the user picks a row (not when expanding/collapsing).
|
|
757
1137
|
*/
|
|
@@ -781,6 +1161,12 @@ class AXLookupMultiColumnTreeComponent {
|
|
|
781
1161
|
}
|
|
782
1162
|
return classes.join(' ');
|
|
783
1163
|
};
|
|
1164
|
+
afterRenderEffect(() => {
|
|
1165
|
+
if (this.selectedValues().length === 0) {
|
|
1166
|
+
return;
|
|
1167
|
+
}
|
|
1168
|
+
scrollTableToSelectedRow(this.#host.nativeElement);
|
|
1169
|
+
});
|
|
784
1170
|
}
|
|
785
1171
|
/** Stable unique key for `@for` — avoids NG0955 when `field` is missing or duplicated. */
|
|
786
1172
|
trackColumnKey(index, column) {
|
|
@@ -827,8 +1213,8 @@ class AXLookupMultiColumnTreeComponent {
|
|
|
827
1213
|
getValue(item) {
|
|
828
1214
|
return item?.[this.valueField()];
|
|
829
1215
|
}
|
|
830
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
831
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1216
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupMultiColumnTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1217
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXLookupMultiColumnTreeComponent, isStandalone: true, selector: "ax-lookup-multi-column-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, parentField: { classPropertyName: "parentField", publicName: "parentField", isSignal: true, isRequired: false, transformFunction: null }, hasChildrenField: { classPropertyName: "hasChildrenField", publicName: "hasChildrenField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", 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 }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.height.px": "tableHeight()" }, classAttribute: "ax-lookup-multi-column ax-lookup-multi-column-tree" }, ngImport: i0, template: `
|
|
832
1218
|
<ax-data-table
|
|
833
1219
|
class="ax-lookup-multi-column-table"
|
|
834
1220
|
look="minimal"
|
|
@@ -838,6 +1224,7 @@ class AXLookupMultiColumnTreeComponent {
|
|
|
838
1224
|
[itemHeight]="itemHeight()"
|
|
839
1225
|
[alternative]="alternate()"
|
|
840
1226
|
[emptyTemplate]="emptyTemplate()"
|
|
1227
|
+
[highlightText]="highlightText()"
|
|
841
1228
|
[loading]="loadingConfig()"
|
|
842
1229
|
[paging]="false"
|
|
843
1230
|
[showHeader]="true"
|
|
@@ -851,7 +1238,8 @@ class AXLookupMultiColumnTreeComponent {
|
|
|
851
1238
|
@for (column of columns(); track trackColumnKey($index, column)) {
|
|
852
1239
|
<ax-text-column
|
|
853
1240
|
[dataField]="column.field"
|
|
854
|
-
[caption]="column.title"
|
|
1241
|
+
[caption]="column.title | translate | async"
|
|
1242
|
+
[translate]="true"
|
|
855
1243
|
[width]="resolveColumnWidth(column)"
|
|
856
1244
|
[expandHandler]="isExpandColumn($index, column)"
|
|
857
1245
|
[allowSorting]="false"
|
|
@@ -872,21 +1260,21 @@ class AXLookupMultiColumnTreeComponent {
|
|
|
872
1260
|
@if (ctx.data != null && itemTemplate()) {
|
|
873
1261
|
<ng-container
|
|
874
1262
|
[ngTemplateOutlet]="itemTemplate()!"
|
|
875
|
-
[ngTemplateOutletContext]="{ $implicit: ctx.data }"
|
|
1263
|
+
[ngTemplateOutletContext]="{ $implicit: ctx.data, highlightText: highlightText() }"
|
|
876
1264
|
/>
|
|
877
1265
|
}
|
|
878
1266
|
</td>
|
|
879
1267
|
</tr>
|
|
880
1268
|
</ng-template>
|
|
881
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "hasTitle", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1269
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "hasTitle", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "translate", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
882
1270
|
}
|
|
883
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupMultiColumnTreeComponent, decorators: [{
|
|
884
1272
|
type: Component,
|
|
885
1273
|
args: [{
|
|
886
1274
|
selector: 'ax-lookup-multi-column-tree',
|
|
887
1275
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
888
1276
|
encapsulation: ViewEncapsulation.None,
|
|
889
|
-
imports: [NgTemplateOutlet, AXDataTableComponent, AXDataTableTextColumnComponent],
|
|
1277
|
+
imports: [NgTemplateOutlet, AsyncPipe, AXTranslatorPipe, AXDataTableComponent, AXDataTableTextColumnComponent],
|
|
890
1278
|
host: {
|
|
891
1279
|
class: 'ax-lookup-multi-column ax-lookup-multi-column-tree',
|
|
892
1280
|
'[style.height.px]': 'tableHeight()',
|
|
@@ -901,6 +1289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
901
1289
|
[itemHeight]="itemHeight()"
|
|
902
1290
|
[alternative]="alternate()"
|
|
903
1291
|
[emptyTemplate]="emptyTemplate()"
|
|
1292
|
+
[highlightText]="highlightText()"
|
|
904
1293
|
[loading]="loadingConfig()"
|
|
905
1294
|
[paging]="false"
|
|
906
1295
|
[showHeader]="true"
|
|
@@ -914,7 +1303,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
914
1303
|
@for (column of columns(); track trackColumnKey($index, column)) {
|
|
915
1304
|
<ax-text-column
|
|
916
1305
|
[dataField]="column.field"
|
|
917
|
-
[caption]="column.title"
|
|
1306
|
+
[caption]="column.title | translate | async"
|
|
1307
|
+
[translate]="true"
|
|
918
1308
|
[width]="resolveColumnWidth(column)"
|
|
919
1309
|
[expandHandler]="isExpandColumn($index, column)"
|
|
920
1310
|
[allowSorting]="false"
|
|
@@ -935,7 +1325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
935
1325
|
@if (ctx.data != null && itemTemplate()) {
|
|
936
1326
|
<ng-container
|
|
937
1327
|
[ngTemplateOutlet]="itemTemplate()!"
|
|
938
|
-
[ngTemplateOutletContext]="{ $implicit: ctx.data }"
|
|
1328
|
+
[ngTemplateOutletContext]="{ $implicit: ctx.data, highlightText: highlightText() }"
|
|
939
1329
|
/>
|
|
940
1330
|
}
|
|
941
1331
|
</td>
|
|
@@ -943,7 +1333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
943
1333
|
</ng-template>
|
|
944
1334
|
`,
|
|
945
1335
|
}]
|
|
946
|
-
}], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], parentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentField", required: false }] }], hasChildrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
1336
|
+
}], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], parentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentField", required: false }] }], hasChildrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
947
1337
|
|
|
948
1338
|
/**
|
|
949
1339
|
* Internal mini component for the `multi-column` lookup mode:
|
|
@@ -1021,6 +1411,11 @@ class AXLookupMultiColumnComponent {
|
|
|
1021
1411
|
*/
|
|
1022
1412
|
this.alternate = input(false, /* @ts-ignore */
|
|
1023
1413
|
...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
|
|
1414
|
+
/**
|
|
1415
|
+
* When set, matching text in table cells is highlighted.
|
|
1416
|
+
*/
|
|
1417
|
+
this.highlightText = input('', /* @ts-ignore */
|
|
1418
|
+
...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
|
|
1024
1419
|
/**
|
|
1025
1420
|
* Emitted when the user picks a row.
|
|
1026
1421
|
*/
|
|
@@ -1078,6 +1473,12 @@ class AXLookupMultiColumnComponent {
|
|
|
1078
1473
|
}
|
|
1079
1474
|
return classes.join(' ');
|
|
1080
1475
|
};
|
|
1476
|
+
afterRenderEffect(() => {
|
|
1477
|
+
if (this.selectedValues().length === 0 || this.#totalCount() === 0) {
|
|
1478
|
+
return;
|
|
1479
|
+
}
|
|
1480
|
+
scrollTableToSelectedRow(this.#host.nativeElement);
|
|
1481
|
+
});
|
|
1081
1482
|
effect((onCleanup) => {
|
|
1082
1483
|
const source = this.dataSource();
|
|
1083
1484
|
this.tableDataSource.config.key = source.config.key || this.valueField();
|
|
@@ -1177,8 +1578,8 @@ class AXLookupMultiColumnComponent {
|
|
|
1177
1578
|
getValue(item) {
|
|
1178
1579
|
return item?.[this.valueField()];
|
|
1179
1580
|
}
|
|
1180
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1181
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1581
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupMultiColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1582
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXLookupMultiColumnComponent, isStandalone: true, selector: "ax-lookup-multi-column", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", 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 }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.height.px": "tableHeight()" }, classAttribute: "ax-lookup-multi-column" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: AXDataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
1182
1583
|
<ax-data-table
|
|
1183
1584
|
class="ax-lookup-multi-column-table"
|
|
1184
1585
|
look="minimal"
|
|
@@ -1186,6 +1587,7 @@ class AXLookupMultiColumnComponent {
|
|
|
1186
1587
|
[itemHeight]="itemHeight()"
|
|
1187
1588
|
[alternative]="alternate()"
|
|
1188
1589
|
[emptyTemplate]="emptyTemplate()"
|
|
1590
|
+
[highlightText]="highlightText()"
|
|
1189
1591
|
[loading]="loadingConfig()"
|
|
1190
1592
|
[paging]="false"
|
|
1191
1593
|
[showHeader]="true"
|
|
@@ -1199,7 +1601,8 @@ class AXLookupMultiColumnComponent {
|
|
|
1199
1601
|
@for (column of columns(); track trackColumnKey($index, column)) {
|
|
1200
1602
|
<ax-text-column
|
|
1201
1603
|
[dataField]="column.field"
|
|
1202
|
-
[caption]="column.title"
|
|
1604
|
+
[caption]="column.title | translate | async"
|
|
1605
|
+
[translate]="true"
|
|
1203
1606
|
[width]="resolveColumnWidth(column)"
|
|
1204
1607
|
[allowSorting]="false"
|
|
1205
1608
|
[allowResizing]="false"
|
|
@@ -1219,21 +1622,21 @@ class AXLookupMultiColumnComponent {
|
|
|
1219
1622
|
@if (ctx.data != null && itemTemplate()) {
|
|
1220
1623
|
<ng-container
|
|
1221
1624
|
[ngTemplateOutlet]="itemTemplate()!"
|
|
1222
|
-
[ngTemplateOutletContext]="{ $implicit: ctx.data }"
|
|
1625
|
+
[ngTemplateOutletContext]="{ $implicit: ctx.data, highlightText: highlightText() }"
|
|
1223
1626
|
/>
|
|
1224
1627
|
}
|
|
1225
1628
|
</td>
|
|
1226
1629
|
</tr>
|
|
1227
1630
|
</ng-template>
|
|
1228
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "hasTitle", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1631
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "hasTitle", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "translate", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1229
1632
|
}
|
|
1230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1633
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupMultiColumnComponent, decorators: [{
|
|
1231
1634
|
type: Component,
|
|
1232
1635
|
args: [{
|
|
1233
1636
|
selector: 'ax-lookup-multi-column',
|
|
1234
1637
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1235
1638
|
encapsulation: ViewEncapsulation.None,
|
|
1236
|
-
imports: [NgTemplateOutlet, AXDataTableComponent, AXDataTableTextColumnComponent],
|
|
1639
|
+
imports: [NgTemplateOutlet, AsyncPipe, AXTranslatorPipe, AXDataTableComponent, AXDataTableTextColumnComponent],
|
|
1237
1640
|
host: {
|
|
1238
1641
|
class: 'ax-lookup-multi-column',
|
|
1239
1642
|
'[style.height.px]': 'tableHeight()',
|
|
@@ -1246,6 +1649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1246
1649
|
[itemHeight]="itemHeight()"
|
|
1247
1650
|
[alternative]="alternate()"
|
|
1248
1651
|
[emptyTemplate]="emptyTemplate()"
|
|
1652
|
+
[highlightText]="highlightText()"
|
|
1249
1653
|
[loading]="loadingConfig()"
|
|
1250
1654
|
[paging]="false"
|
|
1251
1655
|
[showHeader]="true"
|
|
@@ -1259,7 +1663,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1259
1663
|
@for (column of columns(); track trackColumnKey($index, column)) {
|
|
1260
1664
|
<ax-text-column
|
|
1261
1665
|
[dataField]="column.field"
|
|
1262
|
-
[caption]="column.title"
|
|
1666
|
+
[caption]="column.title | translate | async"
|
|
1667
|
+
[translate]="true"
|
|
1263
1668
|
[width]="resolveColumnWidth(column)"
|
|
1264
1669
|
[allowSorting]="false"
|
|
1265
1670
|
[allowResizing]="false"
|
|
@@ -1279,7 +1684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1279
1684
|
@if (ctx.data != null && itemTemplate()) {
|
|
1280
1685
|
<ng-container
|
|
1281
1686
|
[ngTemplateOutlet]="itemTemplate()!"
|
|
1282
|
-
[ngTemplateOutletContext]="{ $implicit: ctx.data }"
|
|
1687
|
+
[ngTemplateOutletContext]="{ $implicit: ctx.data, highlightText: highlightText() }"
|
|
1283
1688
|
/>
|
|
1284
1689
|
}
|
|
1285
1690
|
</td>
|
|
@@ -1287,7 +1692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1287
1692
|
</ng-template>
|
|
1288
1693
|
`,
|
|
1289
1694
|
}]
|
|
1290
|
-
}], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], tableRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXDataTableComponent), { isSignal: true }] }] } });
|
|
1695
|
+
}], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], tableRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXDataTableComponent), { isSignal: true }] }] } });
|
|
1291
1696
|
|
|
1292
1697
|
/**
|
|
1293
1698
|
* Internal mini component for the `multi-select-tree` lookup mode:
|
|
@@ -1296,7 +1701,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1296
1701
|
* @category Components
|
|
1297
1702
|
*/
|
|
1298
1703
|
class AXLookupMultiSelectTreeComponent {
|
|
1704
|
+
#host;
|
|
1299
1705
|
constructor() {
|
|
1706
|
+
this.#host = inject((ElementRef));
|
|
1300
1707
|
/**
|
|
1301
1708
|
* The tree datasource: an array of nodes or a lazy children callback.
|
|
1302
1709
|
*/
|
|
@@ -1337,6 +1744,16 @@ class AXLookupMultiSelectTreeComponent {
|
|
|
1337
1744
|
*/
|
|
1338
1745
|
this.emptyTemplate = input(undefined, /* @ts-ignore */
|
|
1339
1746
|
...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
|
|
1747
|
+
/**
|
|
1748
|
+
* Custom template rendered while the tree is hydrating for search.
|
|
1749
|
+
*/
|
|
1750
|
+
this.loadingTemplate = input(undefined, /* @ts-ignore */
|
|
1751
|
+
...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
|
|
1752
|
+
/**
|
|
1753
|
+
* When `true`, a loading placeholder is shown while lazy tree data is hydrated for search.
|
|
1754
|
+
*/
|
|
1755
|
+
this.loading = input(false, /* @ts-ignore */
|
|
1756
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
1340
1757
|
/**
|
|
1341
1758
|
* When `true`, visible tree nodes use alternating background colors.
|
|
1342
1759
|
*/
|
|
@@ -1347,6 +1764,11 @@ class AXLookupMultiSelectTreeComponent {
|
|
|
1347
1764
|
*/
|
|
1348
1765
|
this.filterKey = input('0', /* @ts-ignore */
|
|
1349
1766
|
...(ngDevMode ? [{ debugName: "filterKey" }] : /* istanbul ignore next */ []));
|
|
1767
|
+
/**
|
|
1768
|
+
* When set, matching characters in the default node label are highlighted.
|
|
1769
|
+
*/
|
|
1770
|
+
this.highlightText = input('', /* @ts-ignore */
|
|
1771
|
+
...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
|
|
1350
1772
|
/**
|
|
1351
1773
|
* Emitted when the user changes the tree selection.
|
|
1352
1774
|
*/
|
|
@@ -1360,6 +1782,13 @@ class AXLookupMultiSelectTreeComponent {
|
|
|
1360
1782
|
...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
|
|
1361
1783
|
this.treeInstances = computed(() => [{ id: this.filterKey(), source: this.dataSource() }], /* @ts-ignore */
|
|
1362
1784
|
...(ngDevMode ? [{ debugName: "treeInstances" }] : /* istanbul ignore next */ []));
|
|
1785
|
+
afterRenderEffect(() => {
|
|
1786
|
+
const selectedId = this.selectedIds()[0];
|
|
1787
|
+
if (!selectedId || this.isEmpty()) {
|
|
1788
|
+
return;
|
|
1789
|
+
}
|
|
1790
|
+
scrollTreeToSelectedNode(this.#host.nativeElement, selectedId);
|
|
1791
|
+
});
|
|
1363
1792
|
}
|
|
1364
1793
|
/** Whether the filtered tree currently has no nodes. */
|
|
1365
1794
|
hasNoMatches() {
|
|
@@ -1371,9 +1800,17 @@ class AXLookupMultiSelectTreeComponent {
|
|
|
1371
1800
|
}
|
|
1372
1801
|
this.selectionChange.emit({ ids: e.selectedIds, nodes: e.selectedNodes });
|
|
1373
1802
|
}
|
|
1374
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1375
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1376
|
-
@if (
|
|
1803
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupMultiSelectTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1804
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXLookupMultiSelectTreeComponent, isStandalone: true, selector: "ax-lookup-multi-select-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, filterKey: { classPropertyName: "filterKey", publicName: "filterKey", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: `
|
|
1805
|
+
@if (loading()) {
|
|
1806
|
+
@if (loadingTemplate()) {
|
|
1807
|
+
<ng-container [ngTemplateOutlet]="loadingTemplate()!" />
|
|
1808
|
+
} @else {
|
|
1809
|
+
<div class="ax-lookup-empty">
|
|
1810
|
+
{{ '@acorex:common.status.loading' | translate | async }}
|
|
1811
|
+
</div>
|
|
1812
|
+
}
|
|
1813
|
+
} @else if (isEmpty()) {
|
|
1377
1814
|
@if (emptyTemplate()) {
|
|
1378
1815
|
<ng-container [ngTemplateOutlet]="emptyTemplate()!" />
|
|
1379
1816
|
} @else {
|
|
@@ -1393,24 +1830,39 @@ class AXLookupMultiSelectTreeComponent {
|
|
|
1393
1830
|
[idField]="valueField()"
|
|
1394
1831
|
[titleField]="textField()"
|
|
1395
1832
|
[disabledField]="disabledField()"
|
|
1396
|
-
[nodeTemplate]="nodeTemplate()"
|
|
1833
|
+
[nodeTemplate]="nodeTemplate() ?? defaultNodeTemplate"
|
|
1397
1834
|
[alternate]="alternate()"
|
|
1835
|
+
[highlightText]="highlightText()"
|
|
1398
1836
|
(onSelectionChange)="handleSelectionChange($event)"
|
|
1399
1837
|
/>
|
|
1400
1838
|
}
|
|
1401
1839
|
</div>
|
|
1402
1840
|
}
|
|
1403
|
-
|
|
1841
|
+
|
|
1842
|
+
<ng-template #defaultNodeTemplate let-node>
|
|
1843
|
+
<span class="ax-lookup-tree-node-label">
|
|
1844
|
+
<ax-highlight-text [text]="node?.[textField()] | translate | async" [query]="highlightText()" />
|
|
1845
|
+
</span>
|
|
1846
|
+
</ng-template>
|
|
1847
|
+
`, isInline: true, dependencies: [{ kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "highlightText", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1404
1848
|
}
|
|
1405
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1849
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupMultiSelectTreeComponent, decorators: [{
|
|
1406
1850
|
type: Component,
|
|
1407
1851
|
args: [{
|
|
1408
1852
|
selector: 'ax-lookup-multi-select-tree',
|
|
1409
1853
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1410
1854
|
encapsulation: ViewEncapsulation.None,
|
|
1411
|
-
imports: [AXTreeViewComponent, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe],
|
|
1855
|
+
imports: [AXTreeViewComponent, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXHighlightTextComponent],
|
|
1412
1856
|
template: `
|
|
1413
|
-
@if (
|
|
1857
|
+
@if (loading()) {
|
|
1858
|
+
@if (loadingTemplate()) {
|
|
1859
|
+
<ng-container [ngTemplateOutlet]="loadingTemplate()!" />
|
|
1860
|
+
} @else {
|
|
1861
|
+
<div class="ax-lookup-empty">
|
|
1862
|
+
{{ '@acorex:common.status.loading' | translate | async }}
|
|
1863
|
+
</div>
|
|
1864
|
+
}
|
|
1865
|
+
} @else if (isEmpty()) {
|
|
1414
1866
|
@if (emptyTemplate()) {
|
|
1415
1867
|
<ng-container [ngTemplateOutlet]="emptyTemplate()!" />
|
|
1416
1868
|
} @else {
|
|
@@ -1430,16 +1882,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1430
1882
|
[idField]="valueField()"
|
|
1431
1883
|
[titleField]="textField()"
|
|
1432
1884
|
[disabledField]="disabledField()"
|
|
1433
|
-
[nodeTemplate]="nodeTemplate()"
|
|
1885
|
+
[nodeTemplate]="nodeTemplate() ?? defaultNodeTemplate"
|
|
1434
1886
|
[alternate]="alternate()"
|
|
1887
|
+
[highlightText]="highlightText()"
|
|
1435
1888
|
(onSelectionChange)="handleSelectionChange($event)"
|
|
1436
1889
|
/>
|
|
1437
1890
|
}
|
|
1438
1891
|
</div>
|
|
1439
1892
|
}
|
|
1893
|
+
|
|
1894
|
+
<ng-template #defaultNodeTemplate let-node>
|
|
1895
|
+
<span class="ax-lookup-tree-node-label">
|
|
1896
|
+
<ax-highlight-text [text]="node?.[textField()] | translate | async" [query]="highlightText()" />
|
|
1897
|
+
</span>
|
|
1898
|
+
</ng-template>
|
|
1440
1899
|
`,
|
|
1441
1900
|
}]
|
|
1442
|
-
}], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], filterKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterKey", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
1901
|
+
}], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], filterKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterKey", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
|
|
1443
1902
|
|
|
1444
1903
|
/**
|
|
1445
1904
|
* Internal mini component for the `multi-select` lookup mode:
|
|
@@ -1448,8 +1907,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1448
1907
|
* @category Components
|
|
1449
1908
|
*/
|
|
1450
1909
|
class AXLookupMultiSelectComponent extends AXLookupListViewBase {
|
|
1451
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1452
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
1910
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXLookupMultiSelectComponent, isStandalone: true, selector: "ax-lookup-multi-select", providers: [{ provide: AXLookupListViewBase, useExisting: AXLookupMultiSelectComponent }], usesInheritance: true, ngImport: i0, template: `
|
|
1453
1912
|
@if (isEmpty()) {
|
|
1454
1913
|
@if (emptyTemplate()) {
|
|
1455
1914
|
<ng-container [ngTemplateOutlet]="emptyTemplate()!" />
|
|
@@ -1494,9 +1953,14 @@ class AXLookupMultiSelectComponent extends AXLookupListViewBase {
|
|
|
1494
1953
|
[disabled]="isDisabled(item)"
|
|
1495
1954
|
></ax-check-box>
|
|
1496
1955
|
@if (itemTemplate()) {
|
|
1497
|
-
<ng-container
|
|
1956
|
+
<ng-container
|
|
1957
|
+
[ngTemplateOutlet]="itemTemplate()!"
|
|
1958
|
+
[ngTemplateOutletContext]="{ $implicit: item, highlightText: highlightText() }"
|
|
1959
|
+
/>
|
|
1498
1960
|
} @else {
|
|
1499
|
-
<span class="ax-lookup-option-text">
|
|
1961
|
+
<span class="ax-lookup-option-text">
|
|
1962
|
+
<ax-highlight-text [text]="getText(item) | translate | async" [query]="highlightText()" />
|
|
1963
|
+
</span>
|
|
1500
1964
|
}
|
|
1501
1965
|
} @else {
|
|
1502
1966
|
<ng-container [ngTemplateOutlet]="loadingRow" />
|
|
@@ -1512,15 +1976,15 @@ class AXLookupMultiSelectComponent extends AXLookupListViewBase {
|
|
|
1512
1976
|
<span class="ax-lookup-option-loading">{{ '@acorex:common.status.loading' | translate | async }}</span>
|
|
1513
1977
|
}
|
|
1514
1978
|
</ng-template>
|
|
1515
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i2.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i2.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1979
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i2.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i2.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1516
1980
|
}
|
|
1517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1981
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupMultiSelectComponent, decorators: [{
|
|
1518
1982
|
type: Component,
|
|
1519
1983
|
args: [{
|
|
1520
1984
|
selector: 'ax-lookup-multi-select',
|
|
1521
1985
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1522
1986
|
encapsulation: ViewEncapsulation.None,
|
|
1523
|
-
imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXListNavigationModule, AXCheckBoxComponent],
|
|
1987
|
+
imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXListNavigationModule, AXCheckBoxComponent, AXHighlightTextComponent],
|
|
1524
1988
|
providers: [{ provide: AXLookupListViewBase, useExisting: AXLookupMultiSelectComponent }],
|
|
1525
1989
|
template: `
|
|
1526
1990
|
@if (isEmpty()) {
|
|
@@ -1567,9 +2031,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1567
2031
|
[disabled]="isDisabled(item)"
|
|
1568
2032
|
></ax-check-box>
|
|
1569
2033
|
@if (itemTemplate()) {
|
|
1570
|
-
<ng-container
|
|
2034
|
+
<ng-container
|
|
2035
|
+
[ngTemplateOutlet]="itemTemplate()!"
|
|
2036
|
+
[ngTemplateOutletContext]="{ $implicit: item, highlightText: highlightText() }"
|
|
2037
|
+
/>
|
|
1571
2038
|
} @else {
|
|
1572
|
-
<span class="ax-lookup-option-text">
|
|
2039
|
+
<span class="ax-lookup-option-text">
|
|
2040
|
+
<ax-highlight-text [text]="getText(item) | translate | async" [query]="highlightText()" />
|
|
2041
|
+
</span>
|
|
1573
2042
|
}
|
|
1574
2043
|
} @else {
|
|
1575
2044
|
<ng-container [ngTemplateOutlet]="loadingRow" />
|
|
@@ -1595,6 +2064,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1595
2064
|
* Modes (each rendered by its own internal mini component):
|
|
1596
2065
|
* - `drop-down-list` — a predefined list of options for picking single values.
|
|
1597
2066
|
* - `multi-select` — a predefined list of options for multiple item selection (chips in the trigger).
|
|
2067
|
+
* In multi modes, Backspace with an empty trigger input removes the last chip; repeated presses clear
|
|
2068
|
+
* the whole selection.
|
|
1598
2069
|
* - `drop-down-tree` — a tree-like structure for single item selection; when searchable, the trigger
|
|
1599
2070
|
* input filters nested nodes as you type (on small screens the search field is inside the actionsheet).
|
|
1600
2071
|
* - `multi-select-tree` — a tree-like structure for multiple item selection; searchable the same way.
|
|
@@ -1614,17 +2085,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
1614
2085
|
class AXLookupComponent extends NXValueComponent {
|
|
1615
2086
|
#platform;
|
|
1616
2087
|
#destroyRef;
|
|
2088
|
+
#translation;
|
|
1617
2089
|
/** Whether search filters the tree datasource instead of `AXDataSource`. */
|
|
1618
2090
|
#isTreeOnlySearchMode() {
|
|
1619
2091
|
const mode = this.mode();
|
|
1620
2092
|
return mode === 'drop-down-tree' || mode === 'multi-select-tree';
|
|
1621
2093
|
}
|
|
1622
|
-
/**
|
|
1623
|
-
* Applied tree search query. Set only from `#applyFilterNow` so opening a single-select
|
|
2094
|
+
/** Applied tree search query. Set only from `#applyFilterNow` so opening a single-select
|
|
1624
2095
|
* with the selected label in the trigger does not filter the tree.
|
|
1625
2096
|
*/
|
|
1626
2097
|
#treeFilterQuery;
|
|
1627
2098
|
#treeFilterEpoch;
|
|
2099
|
+
#hydratedTreeNodes;
|
|
2100
|
+
#hydrationPromise;
|
|
2101
|
+
#hydrationRevision;
|
|
2102
|
+
/** Applied (debounced) search query used for result highlighting. */
|
|
2103
|
+
#appliedSearchQuery;
|
|
1628
2104
|
/** Reused so closing/reopening the popup does not create a new AXDataSource (which would miss cache). */
|
|
1629
2105
|
#multiColumnTreeTableSource;
|
|
1630
2106
|
#multiColumnTreeTableKey;
|
|
@@ -1634,6 +2110,8 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1634
2110
|
* drop-down-tree / multi-select-tree do not refetch on every open.
|
|
1635
2111
|
*/
|
|
1636
2112
|
#treeChildrenCache;
|
|
2113
|
+
/** Stable lazy loader for on-demand expansion when no search query is active. */
|
|
2114
|
+
#lazyTreeLoader;
|
|
1637
2115
|
#document;
|
|
1638
2116
|
#itemsCache;
|
|
1639
2117
|
#isUserInteraction;
|
|
@@ -1649,6 +2127,7 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1649
2127
|
super();
|
|
1650
2128
|
this.#platform = inject(AXPlatform);
|
|
1651
2129
|
this.#destroyRef = inject(DestroyRef);
|
|
2130
|
+
this.#translation = inject(AXTranslationService);
|
|
1652
2131
|
/**
|
|
1653
2132
|
* The name of the form field, used by validation rules and `ax-form.validate(names)`.
|
|
1654
2133
|
*/
|
|
@@ -1711,6 +2190,7 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1711
2190
|
* Whether the trigger accepts typing and filters the datasource (`true`),
|
|
1712
2191
|
* or is select-only with no writable input (`false`).
|
|
1713
2192
|
* Applies to all modes, including `drop-down-tree` and `multi-select-tree`.
|
|
2193
|
+
* Lazy callback trees are hydrated once per popup open and searched in full.
|
|
1714
2194
|
* On small screens with `adaptivityEnabled`, search is typed in the actionsheet instead of the trigger.
|
|
1715
2195
|
*/
|
|
1716
2196
|
this.searchable = input(true, /* @ts-ignore */
|
|
@@ -1724,6 +2204,7 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1724
2204
|
...(ngDevMode ? [{ debugName: "adaptivityEnabled" }] : /* istanbul ignore next */ []));
|
|
1725
2205
|
/**
|
|
1726
2206
|
* Title shown in the actionsheet header on small screens. Falls back to `placeholder`.
|
|
2207
|
+
* Supports i18n expressions (e.g. `@acorex:selectbox.popover.title`).
|
|
1727
2208
|
*/
|
|
1728
2209
|
this.caption = input('', /* @ts-ignore */
|
|
1729
2210
|
...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
|
|
@@ -1737,14 +2218,20 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1737
2218
|
* Placeholder for the trigger search input when items are already selected
|
|
1738
2219
|
* (mainly useful in `multi-select` / `multi-select-tree`), and for the in-sheet search field on small screens.
|
|
1739
2220
|
* Falls back to `placeholder` when the selection is empty on desktop.
|
|
2221
|
+
* Supports i18n expressions (e.g. `@acorex:common.actions.search`).
|
|
1740
2222
|
*/
|
|
1741
|
-
this.searchPlaceholder = input('
|
|
2223
|
+
this.searchPlaceholder = input('@acorex:common.actions.search', /* @ts-ignore */
|
|
1742
2224
|
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
1743
2225
|
/**
|
|
1744
2226
|
* The placeholder text shown when no value is selected.
|
|
2227
|
+
* Supports i18n expressions (e.g. `@acorex:chat.placeholders.select-conversation`).
|
|
1745
2228
|
*/
|
|
1746
2229
|
this.placeholder = input('', /* @ts-ignore */
|
|
1747
2230
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
2231
|
+
/** Resolved `placeholder` (i18n-aware). */
|
|
2232
|
+
this.translatedPlaceholder = toTranslatedSignal(this.placeholder);
|
|
2233
|
+
/** Resolved `searchPlaceholder` (i18n-aware). */
|
|
2234
|
+
this.translatedSearchPlaceholder = toTranslatedSignal(this.searchPlaceholder);
|
|
1748
2235
|
/**
|
|
1749
2236
|
* Whether the lookup is disabled.
|
|
1750
2237
|
*/
|
|
@@ -1776,7 +2263,13 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1776
2263
|
this.treeSelectionBehavior = input('all', /* @ts-ignore */
|
|
1777
2264
|
...(ngDevMode ? [{ debugName: "treeSelectionBehavior" }] : /* istanbul ignore next */ []));
|
|
1778
2265
|
/**
|
|
1779
|
-
*
|
|
2266
|
+
* When `true` (default), matching characters in popup result items are highlighted
|
|
2267
|
+
* while the user searches.
|
|
2268
|
+
*/
|
|
2269
|
+
this.highlightSearch = input(true, { ...(ngDevMode ? { debugName: "highlightSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
2270
|
+
/**
|
|
2271
|
+
* Custom template rendered for each item/node. Context: `$implicit` is the item;
|
|
2272
|
+
* `highlightText` is the active search query when result highlighting is enabled.
|
|
1780
2273
|
* Default option chrome (padding, typography, check icon) is not applied; only the
|
|
1781
2274
|
* template's styles are used. Selection and hover backgrounds remain on the row.
|
|
1782
2275
|
*/
|
|
@@ -1880,17 +2373,27 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1880
2373
|
/** Query typed in the actionsheet search field (independent of the trigger display text). */
|
|
1881
2374
|
this.sheetSearchText = signal('', /* @ts-ignore */
|
|
1882
2375
|
...(ngDevMode ? [{ debugName: "sheetSearchText" }] : /* istanbul ignore next */ []));
|
|
1883
|
-
/**
|
|
1884
|
-
* Applied tree search query. Set only from `#applyFilterNow` so opening a single-select
|
|
2376
|
+
/** Applied tree search query. Set only from `#applyFilterNow` so opening a single-select
|
|
1885
2377
|
* with the selected label in the trigger does not filter the tree.
|
|
1886
2378
|
*/
|
|
1887
2379
|
this.#treeFilterQuery = signal('', /* @ts-ignore */
|
|
1888
2380
|
...(ngDevMode ? [{ debugName: "#treeFilterQuery" }] : /* istanbul ignore next */ []));
|
|
1889
2381
|
this.#treeFilterEpoch = signal(0, /* @ts-ignore */
|
|
1890
2382
|
...(ngDevMode ? [{ debugName: "#treeFilterEpoch" }] : /* istanbul ignore next */ []));
|
|
2383
|
+
this.#hydratedTreeNodes = signal(undefined, /* @ts-ignore */
|
|
2384
|
+
...(ngDevMode ? [{ debugName: "#hydratedTreeNodes" }] : /* istanbul ignore next */ []));
|
|
2385
|
+
this.#hydrationRevision = 0;
|
|
2386
|
+
this.treeSearchLoading = signal(false, /* @ts-ignore */
|
|
2387
|
+
...(ngDevMode ? [{ debugName: "treeSearchLoading" }] : /* istanbul ignore next */ []));
|
|
2388
|
+
/** Applied (debounced) search query used for result highlighting. */
|
|
2389
|
+
this.#appliedSearchQuery = signal('', /* @ts-ignore */
|
|
2390
|
+
...(ngDevMode ? [{ debugName: "#appliedSearchQuery" }] : /* istanbul ignore next */ []));
|
|
1891
2391
|
/** Increments on every tree filter apply so the tree view remounts with a new instance. */
|
|
1892
2392
|
this.treeFilterKey = computed(() => String(this.#treeFilterEpoch()), /* @ts-ignore */
|
|
1893
2393
|
...(ngDevMode ? [{ debugName: "treeFilterKey" }] : /* istanbul ignore next */ []));
|
|
2394
|
+
/** Query passed to result-item highlighting (empty when disabled). */
|
|
2395
|
+
this.highlightQuery = computed(() => (this.highlightSearch() ? this.#appliedSearchQuery() : ''), /* @ts-ignore */
|
|
2396
|
+
...(ngDevMode ? [{ debugName: "highlightQuery" }] : /* istanbul ignore next */ []));
|
|
1894
2397
|
/** The datasource for list-based modes; plain arrays are converted. */
|
|
1895
2398
|
this.resolvedDataSource = computed(() => {
|
|
1896
2399
|
const tree = this.treeDataSource();
|
|
@@ -1911,15 +2414,26 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1911
2414
|
textField: this.textField(),
|
|
1912
2415
|
parentField: this.treeParentField(),
|
|
1913
2416
|
hasChildrenField: this.hasChildrenField(),
|
|
2417
|
+
loadSearchRoots: Array.isArray(tree) ? undefined : () => this.#ensureHydratedTree(),
|
|
1914
2418
|
});
|
|
1915
2419
|
return this.#multiColumnTreeTableSource;
|
|
1916
2420
|
}
|
|
1917
2421
|
const source = this.dataSource();
|
|
1918
2422
|
if (!source) {
|
|
1919
|
-
return
|
|
2423
|
+
return convertLookupArrayToDataSource([], {
|
|
2424
|
+
key: this.valueField(),
|
|
2425
|
+
pageSize: 20,
|
|
2426
|
+
textField: this.textField(),
|
|
2427
|
+
translateText: (text) => this.#translateItemText(text),
|
|
2428
|
+
});
|
|
1920
2429
|
}
|
|
1921
2430
|
return Array.isArray(source)
|
|
1922
|
-
?
|
|
2431
|
+
? convertLookupArrayToDataSource(source, {
|
|
2432
|
+
key: this.valueField(),
|
|
2433
|
+
pageSize: 20,
|
|
2434
|
+
textField: this.textField(),
|
|
2435
|
+
translateText: (text) => this.#translateItemText(text),
|
|
2436
|
+
})
|
|
1923
2437
|
: source;
|
|
1924
2438
|
}, /* @ts-ignore */
|
|
1925
2439
|
...(ngDevMode ? [{ debugName: "resolvedDataSource" }] : /* istanbul ignore next */ []));
|
|
@@ -1928,21 +2442,34 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1928
2442
|
* drop-down-tree / multi-select-tree do not refetch on every open.
|
|
1929
2443
|
*/
|
|
1930
2444
|
this.#treeChildrenCache = new WeakMap();
|
|
2445
|
+
/** Stable lazy loader for on-demand expansion when no search query is active. */
|
|
2446
|
+
this.#lazyTreeLoader = (nodeId) => {
|
|
2447
|
+
const source = this.treeDataSource();
|
|
2448
|
+
if (typeof source !== 'function') {
|
|
2449
|
+
return [];
|
|
2450
|
+
}
|
|
2451
|
+
return this.#loadCachedTreeNodes(source, nodeId);
|
|
2452
|
+
};
|
|
1931
2453
|
this.resolvedTreeDataSource = computed(() => {
|
|
1932
2454
|
this.#treeFilterEpoch();
|
|
1933
2455
|
const source = this.treeDataSource();
|
|
1934
|
-
const query = this.#treeFilterQuery();
|
|
2456
|
+
const query = this.#treeFilterQuery().trim();
|
|
1935
2457
|
const textField = this.textField();
|
|
2458
|
+
const translate = (text) => this.#translateItemTextForFilter(text);
|
|
1936
2459
|
if (!source) {
|
|
1937
2460
|
return [];
|
|
1938
2461
|
}
|
|
1939
2462
|
if (Array.isArray(source)) {
|
|
1940
|
-
return query ? filterTreeNodes(source, textField, query) : cloneLookupTreeNodes(source);
|
|
2463
|
+
return query ? filterTreeNodes(source, textField, query, translate) : cloneLookupTreeNodes(source);
|
|
1941
2464
|
}
|
|
1942
2465
|
if (!query) {
|
|
1943
|
-
return
|
|
2466
|
+
return this.#lazyTreeLoader;
|
|
2467
|
+
}
|
|
2468
|
+
const snapshot = this.#hydratedTreeNodes();
|
|
2469
|
+
if (snapshot) {
|
|
2470
|
+
return filterTreeNodes(snapshot, textField, query, translate);
|
|
1944
2471
|
}
|
|
1945
|
-
return
|
|
2472
|
+
return [];
|
|
1946
2473
|
}, /* @ts-ignore */
|
|
1947
2474
|
...(ngDevMode ? [{ debugName: "resolvedTreeDataSource" }] : /* istanbul ignore next */ []));
|
|
1948
2475
|
/** The current selection normalized to an array. */
|
|
@@ -1963,11 +2490,18 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1963
2490
|
return item ? this.getItemText(item) : '';
|
|
1964
2491
|
}, /* @ts-ignore */
|
|
1965
2492
|
...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
|
|
2493
|
+
/** Resolved display text for the trigger input (i18n-aware). */
|
|
2494
|
+
this.translatedDisplayText = toTranslatedSignal(this.displayText);
|
|
2495
|
+
/** Actionsheet header title with i18n fallback chain. */
|
|
2496
|
+
this.actionsheetTitleSource = computed(() => this.caption() || this.placeholder() || '@acorex:selectbox.popover.title', /* @ts-ignore */
|
|
2497
|
+
...(ngDevMode ? [{ debugName: "actionsheetTitleSource" }] : /* istanbul ignore next */ []));
|
|
2498
|
+
/** Resolved actionsheet title (i18n-aware). */
|
|
2499
|
+
this.actionsheetTitle = toTranslatedSignal(this.actionsheetTitleSource);
|
|
1966
2500
|
/**
|
|
1967
2501
|
* Text typed in the editable trigger input.
|
|
1968
2502
|
* Multi-select starts empty; single modes sync from the selected display text.
|
|
1969
2503
|
*/
|
|
1970
|
-
this.searchText = linkedSignal(() => (this.isMultiple() ? '' : this.
|
|
2504
|
+
this.searchText = linkedSignal(() => (this.isMultiple() ? '' : this.translatedDisplayText()), /* @ts-ignore */
|
|
1971
2505
|
...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
|
|
1972
2506
|
/**
|
|
1973
2507
|
* Whether the trigger should render `selectedTemplate` instead of the plain input text.
|
|
@@ -1981,18 +2515,18 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
1981
2515
|
if (!this.isEditableTrigger()) {
|
|
1982
2516
|
return true;
|
|
1983
2517
|
}
|
|
1984
|
-
return !this.expanded() && this.searchText() === this.
|
|
2518
|
+
return !this.expanded() && this.searchText() === this.translatedDisplayText();
|
|
1985
2519
|
}, /* @ts-ignore */
|
|
1986
2520
|
...(ngDevMode ? [{ debugName: "showSelectedTemplate" }] : /* istanbul ignore next */ []));
|
|
1987
2521
|
/** Placeholder for the editable trigger search input. */
|
|
1988
2522
|
this.triggerSearchPlaceholder = computed(() => {
|
|
1989
2523
|
if (this.isActionsheetStyle()) {
|
|
1990
|
-
return this.isMultiple() && this.selectedItems().length > 0 ? '' : this.
|
|
2524
|
+
return this.isMultiple() && this.selectedItems().length > 0 ? '' : this.translatedPlaceholder();
|
|
1991
2525
|
}
|
|
1992
2526
|
if (this.isMultiple() && this.selectedItems().length > 0) {
|
|
1993
|
-
return this.
|
|
2527
|
+
return this.translatedSearchPlaceholder();
|
|
1994
2528
|
}
|
|
1995
|
-
return this.
|
|
2529
|
+
return this.translatedPlaceholder();
|
|
1996
2530
|
}, /* @ts-ignore */
|
|
1997
2531
|
...(ngDevMode ? [{ debugName: "triggerSearchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
1998
2532
|
this.popoverRef = viewChild(AXPopoverComponent, /* @ts-ignore */
|
|
@@ -2006,10 +2540,6 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2006
2540
|
this.#document = inject(DOCUMENT);
|
|
2007
2541
|
this.listView = viewChild(AXLookupListViewBase, /* @ts-ignore */
|
|
2008
2542
|
...(ngDevMode ? [{ debugName: "listView" }] : /* istanbul ignore next */ []));
|
|
2009
|
-
this.dropDownTreeView = viewChild(AXLookupDropDownTreeComponent, /* @ts-ignore */
|
|
2010
|
-
...(ngDevMode ? [{ debugName: "dropDownTreeView" }] : /* istanbul ignore next */ []));
|
|
2011
|
-
this.multiSelectTreeView = viewChild(AXLookupMultiSelectTreeComponent, /* @ts-ignore */
|
|
2012
|
-
...(ngDevMode ? [{ debugName: "multiSelectTreeView" }] : /* istanbul ignore next */ []));
|
|
2013
2543
|
this.sheetSearchRef = viewChild('sheetSearch', /* @ts-ignore */
|
|
2014
2544
|
...(ngDevMode ? [{ debugName: "sheetSearchRef" }] : /* istanbul ignore next */ []));
|
|
2015
2545
|
this.#itemsCache = new Map();
|
|
@@ -2103,6 +2633,24 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2103
2633
|
}
|
|
2104
2634
|
queueMicrotask(() => this.#focusPopupSearchOrList());
|
|
2105
2635
|
}
|
|
2636
|
+
/**
|
|
2637
|
+
* Toggles the popup when the chevron button is clicked.
|
|
2638
|
+
*/
|
|
2639
|
+
onChevronClick(event) {
|
|
2640
|
+
event.stopPropagation();
|
|
2641
|
+
if (this.disabled() || this.readonly()) {
|
|
2642
|
+
return;
|
|
2643
|
+
}
|
|
2644
|
+
this.expanded.update((open) => !open);
|
|
2645
|
+
if (!this.expanded()) {
|
|
2646
|
+
return;
|
|
2647
|
+
}
|
|
2648
|
+
if (this.isEditableTrigger()) {
|
|
2649
|
+
queueMicrotask(() => this.triggerSearchInput()?.nativeElement.focus());
|
|
2650
|
+
return;
|
|
2651
|
+
}
|
|
2652
|
+
queueMicrotask(() => this.#focusPopupSearchOrList());
|
|
2653
|
+
}
|
|
2106
2654
|
/**
|
|
2107
2655
|
* Focuses the lookup trigger input.
|
|
2108
2656
|
*/
|
|
@@ -2114,6 +2662,8 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2114
2662
|
}
|
|
2115
2663
|
/**
|
|
2116
2664
|
* Handles keyboard interaction on the trigger input.
|
|
2665
|
+
* In multi modes, Backspace with an empty trigger input removes the last chip; repeated presses
|
|
2666
|
+
* clear the whole selection.
|
|
2117
2667
|
*/
|
|
2118
2668
|
onTriggerKeydown(e) {
|
|
2119
2669
|
if (this.disabled() || this.readonly()) {
|
|
@@ -2123,6 +2673,9 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2123
2673
|
this.close();
|
|
2124
2674
|
return;
|
|
2125
2675
|
}
|
|
2676
|
+
if (e.key === 'Backspace' && this.#removeLastChipOnBackspace(e)) {
|
|
2677
|
+
return;
|
|
2678
|
+
}
|
|
2126
2679
|
if (e.key === 'ArrowDown') {
|
|
2127
2680
|
e.preventDefault();
|
|
2128
2681
|
this.expanded.set(true);
|
|
@@ -2230,6 +2783,16 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2230
2783
|
}
|
|
2231
2784
|
}
|
|
2232
2785
|
async #resolvedFilteredTreeNodes() {
|
|
2786
|
+
const query = this.#treeFilterQuery().trim();
|
|
2787
|
+
const treeSource = this.treeDataSource();
|
|
2788
|
+
if (query && treeSource && typeof treeSource === 'function') {
|
|
2789
|
+
await this.#ensureHydratedTree();
|
|
2790
|
+
const snapshot = this.#hydratedTreeNodes();
|
|
2791
|
+
if (snapshot) {
|
|
2792
|
+
return filterTreeNodes(snapshot, this.textField(), query, (text) => this.#translateItemTextForFilter(text));
|
|
2793
|
+
}
|
|
2794
|
+
return [];
|
|
2795
|
+
}
|
|
2233
2796
|
const source = this.resolvedTreeDataSource();
|
|
2234
2797
|
if (Array.isArray(source)) {
|
|
2235
2798
|
return source;
|
|
@@ -2290,7 +2853,10 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2290
2853
|
return false;
|
|
2291
2854
|
}
|
|
2292
2855
|
if (!this.isSheetSearchEnabled() && !this.isMultiple()) {
|
|
2293
|
-
|
|
2856
|
+
const queryLower = query.toLowerCase();
|
|
2857
|
+
const translated = this.translatedDisplayText().trim().toLowerCase();
|
|
2858
|
+
const raw = this.displayText().trim().toLowerCase();
|
|
2859
|
+
return queryLower !== translated && queryLower !== raw;
|
|
2294
2860
|
}
|
|
2295
2861
|
return true;
|
|
2296
2862
|
}
|
|
@@ -2343,9 +2909,14 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2343
2909
|
*/
|
|
2344
2910
|
onPopoverClosed() {
|
|
2345
2911
|
this.expanded.set(false);
|
|
2346
|
-
this.searchText.set(this.isMultiple() ? '' : this.
|
|
2912
|
+
this.searchText.set(this.isMultiple() ? '' : this.translatedDisplayText());
|
|
2347
2913
|
this.sheetSearchText.set('');
|
|
2914
|
+
this.#appliedSearchQuery.set('');
|
|
2348
2915
|
this.#treeFilterQuery.set('');
|
|
2916
|
+
this.#hydratedTreeNodes.set(undefined);
|
|
2917
|
+
this.#hydrationPromise = undefined;
|
|
2918
|
+
this.#hydrationRevision++;
|
|
2919
|
+
this.treeSearchLoading.set(false);
|
|
2349
2920
|
this.#treeFilterEpoch.update((value) => value + 1);
|
|
2350
2921
|
if (this.#filterApplied) {
|
|
2351
2922
|
this.#filterApplied = false;
|
|
@@ -2402,7 +2973,7 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2402
2973
|
this.#emitItemSelected(e.item);
|
|
2403
2974
|
this.#itemsCache.set(e.value, e.item);
|
|
2404
2975
|
this.selectedItems.set([e.item]);
|
|
2405
|
-
this.searchText.set(this.getItemText(e.item));
|
|
2976
|
+
this.searchText.set(this.#translateItemText(this.getItemText(e.item)));
|
|
2406
2977
|
this.#isUserInteraction = true;
|
|
2407
2978
|
this.value.set(e.value);
|
|
2408
2979
|
this.close();
|
|
@@ -2528,6 +3099,24 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2528
3099
|
this.#isUserInteraction = true;
|
|
2529
3100
|
this.value.set(this.selectedValues().filter((v) => !(v == value)));
|
|
2530
3101
|
}
|
|
3102
|
+
/** Removes the last chip when Backspace is pressed with an empty trigger input (multi modes). */
|
|
3103
|
+
#removeLastChipOnBackspace(event) {
|
|
3104
|
+
if (!this.isMultiple() || !this.#isTriggerInputEmpty(event)) {
|
|
3105
|
+
return false;
|
|
3106
|
+
}
|
|
3107
|
+
const items = this.selectedItems();
|
|
3108
|
+
if (items.length === 0) {
|
|
3109
|
+
return false;
|
|
3110
|
+
}
|
|
3111
|
+
event.preventDefault();
|
|
3112
|
+
event.stopPropagation();
|
|
3113
|
+
this.removeChip(event, items[items.length - 1]);
|
|
3114
|
+
return true;
|
|
3115
|
+
}
|
|
3116
|
+
#isTriggerInputEmpty(event) {
|
|
3117
|
+
const input = event.target instanceof HTMLInputElement ? event.target : this.triggerSearchInput()?.nativeElement;
|
|
3118
|
+
return input ? input.value.length === 0 : !this.searchText();
|
|
3119
|
+
}
|
|
2531
3120
|
/**
|
|
2532
3121
|
* Seeds the item cache with known items so matching `value` keys resolve without `byKey`.
|
|
2533
3122
|
* Useful after an async parent-entity load when `valueItems` is not bound.
|
|
@@ -2612,51 +3201,59 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2612
3201
|
byParent.set(key, request);
|
|
2613
3202
|
return request;
|
|
2614
3203
|
}
|
|
2615
|
-
#nodeMayHaveChildren(node) {
|
|
2616
|
-
const raw = node['children'];
|
|
2617
|
-
if (Array.isArray(raw) && raw.length > 0) {
|
|
2618
|
-
return true;
|
|
2619
|
-
}
|
|
2620
|
-
const count = node['childrenCount'];
|
|
2621
|
-
if (typeof count === 'number' && count > 0) {
|
|
2622
|
-
return true;
|
|
2623
|
-
}
|
|
2624
|
-
return node['hasChild'] === true || node['hasChildren'] === true;
|
|
2625
|
-
}
|
|
2626
3204
|
/**
|
|
2627
|
-
*
|
|
2628
|
-
* so a query can match sub-items that have not been expanded yet.
|
|
3205
|
+
* Hydrates a lazy tree once per popup open so whole-tree search can filter in memory.
|
|
2629
3206
|
*/
|
|
2630
|
-
|
|
2631
|
-
const
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
3207
|
+
#ensureHydratedTree() {
|
|
3208
|
+
const cached = this.#hydratedTreeNodes();
|
|
3209
|
+
if (cached) {
|
|
3210
|
+
return Promise.resolve(cached);
|
|
3211
|
+
}
|
|
3212
|
+
if (this.#hydrationPromise) {
|
|
3213
|
+
return this.#hydrationPromise;
|
|
3214
|
+
}
|
|
3215
|
+
const source = this.treeDataSource();
|
|
3216
|
+
if (!source || Array.isArray(source)) {
|
|
3217
|
+
return Promise.resolve([]);
|
|
3218
|
+
}
|
|
3219
|
+
const revision = this.#hydrationRevision;
|
|
3220
|
+
this.treeSearchLoading.set(true);
|
|
3221
|
+
this.#hydrationPromise = (async () => {
|
|
3222
|
+
const roots = await this.#loadCachedTreeNodes(source, undefined);
|
|
3223
|
+
const hydrated = await hydrateLookupTree(roots, (id) => this.#loadCachedTreeNodes(source, id), {
|
|
3224
|
+
valueField: this.valueField(),
|
|
3225
|
+
isCancelled: () => revision !== this.#hydrationRevision,
|
|
3226
|
+
});
|
|
3227
|
+
if (revision !== this.#hydrationRevision) {
|
|
3228
|
+
return [];
|
|
2638
3229
|
}
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
3230
|
+
this.#hydratedTreeNodes.set(hydrated);
|
|
3231
|
+
this.treeSearchLoading.set(false);
|
|
3232
|
+
this.#treeFilterEpoch.update((value) => value + 1);
|
|
3233
|
+
return hydrated;
|
|
3234
|
+
})().finally(() => {
|
|
3235
|
+
if (revision === this.#hydrationRevision) {
|
|
3236
|
+
this.#hydrationPromise = undefined;
|
|
2642
3237
|
}
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
}
|
|
2649
|
-
async #loadFilteredCachedTreeNodes(source, nodeId, query) {
|
|
2650
|
-
const nodes = await this.#loadCachedTreeNodes(source, nodeId);
|
|
2651
|
-
const hydrated = await this.#hydrateTreeChildrenForSearch(source, nodes);
|
|
2652
|
-
return filterTreeNodes(hydrated, this.textField(), query);
|
|
3238
|
+
if (revision === this.#hydrationRevision && !this.#hydratedTreeNodes()) {
|
|
3239
|
+
this.treeSearchLoading.set(false);
|
|
3240
|
+
}
|
|
3241
|
+
});
|
|
3242
|
+
return this.#hydrationPromise;
|
|
2653
3243
|
}
|
|
2654
3244
|
#applyFilterNow(text) {
|
|
2655
3245
|
const query = text?.trim() ?? '';
|
|
3246
|
+
this.#appliedSearchQuery.set(query);
|
|
2656
3247
|
if (this.#isTreeOnlySearchMode()) {
|
|
2657
3248
|
this.#treeFilterQuery.set(query);
|
|
2658
|
-
this.#treeFilterEpoch.update((value) => value + 1);
|
|
2659
3249
|
this.#filterApplied = query.length > 0;
|
|
3250
|
+
this.#treeFilterEpoch.update((value) => value + 1);
|
|
3251
|
+
if (query) {
|
|
3252
|
+
const source = this.treeDataSource();
|
|
3253
|
+
if (source && typeof source === 'function') {
|
|
3254
|
+
void this.#ensureHydratedTree();
|
|
3255
|
+
}
|
|
3256
|
+
}
|
|
2660
3257
|
return;
|
|
2661
3258
|
}
|
|
2662
3259
|
const source = this.resolvedDataSource();
|
|
@@ -2698,7 +3295,7 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2698
3295
|
component: this,
|
|
2699
3296
|
htmlElement: this.nativeElement,
|
|
2700
3297
|
isUserInteraction: this.#isUserInteraction,
|
|
2701
|
-
items,
|
|
3298
|
+
items: items,
|
|
2702
3299
|
value: this.value(),
|
|
2703
3300
|
});
|
|
2704
3301
|
}
|
|
@@ -2809,15 +3406,26 @@ class AXLookupComponent extends NXValueComponent {
|
|
|
2809
3406
|
};
|
|
2810
3407
|
expanded ? this.onOpened.emit(event) : this.onClosed.emit(event);
|
|
2811
3408
|
}
|
|
2812
|
-
|
|
2813
|
-
|
|
3409
|
+
#translateItemText(text) {
|
|
3410
|
+
return this.#translation.translateSync(text, { waitForLoad: true });
|
|
3411
|
+
}
|
|
3412
|
+
/** Fast path for search filtering — skips sync translation for plain labels. */
|
|
3413
|
+
#translateItemTextForFilter(text) {
|
|
3414
|
+
const value = String(text ?? '');
|
|
3415
|
+
if (!value.startsWith('@')) {
|
|
3416
|
+
return value;
|
|
3417
|
+
}
|
|
3418
|
+
return this.#translation.translateSync(value, { waitForLoad: false });
|
|
3419
|
+
}
|
|
3420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXLookupComponent, isStandalone: true, selector: "ax-lookup", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, treeDataSource: { classPropertyName: "treeDataSource", publicName: "treeDataSource", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, treeParentField: { classPropertyName: "treeParentField", publicName: "treeParentField", isSignal: true, isRequired: false, transformFunction: null }, hasChildrenField: { classPropertyName: "hasChildrenField", publicName: "hasChildrenField", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, adaptivityEnabled: { classPropertyName: "adaptivityEnabled", publicName: "adaptivityEnabled", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", 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 }, treeSelectionBehavior: { classPropertyName: "treeSelectionBehavior", publicName: "treeSelectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, highlightSearch: { classPropertyName: "highlightSearch", publicName: "highlightSearch", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueItems: { classPropertyName: "valueItems", publicName: "valueItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange", value: "valueChange", onValueChanged: "onValueChanged", onSelectionChanged: "onSelectionChanged", onFocus: "onFocus", onBlur: "onBlur", onItemClick: "onItemClick", onItemSelected: "onItemSelected", onOpened: "onOpened", onClosed: "onClosed" }, providers: [
|
|
2814
3422
|
{ provide: AXComponent, useExisting: AXLookupComponent },
|
|
2815
3423
|
{ provide: AXClearableComponent, useExisting: AXLookupComponent },
|
|
2816
3424
|
{ provide: AXClosableComponent, useExisting: AXLookupComponent },
|
|
2817
3425
|
{ provide: AXValuableComponent, useExisting: AXLookupComponent },
|
|
2818
|
-
], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }, { propertyName: "originRef", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popup"], descendants: true, isSignal: true }, { propertyName: "triggerSearchInput", first: true, predicate: ["triggerSearchInput"], descendants: true, isSignal: true }, { propertyName: "listView", first: true, predicate: AXLookupListViewBase, descendants: true, isSignal: true }, { propertyName: "dropDownTreeView", first: true, predicate: AXLookupDropDownTreeComponent, descendants: true, isSignal: true }, { propertyName: "multiSelectTreeView", first: true, predicate: AXLookupMultiSelectTreeComponent, descendants: true, isSignal: true }, { propertyName: "sheetSearchRef", first: true, predicate: ["sheetSearch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n #origin\n class=\"ax-editor-container ax-{{ look() }} ax-default\"\n [class.ax-lookup-trigger]=\"!isEditableTrigger()\"\n [class.ax-lookup-trigger-multiple]=\"isMultiple()\"\n [class.ax-state-disabled]=\"disabled()\"\n [class.ax-state-readonly]=\"readonly()\"\n (click)=\"onTriggerClick()\"\n>\n <ng-content select=\"ax-prefix\"></ng-content>\n\n @if (isMultiple()) {\n <div class=\"ax-lookup-chips\">\n @for (item of selectedItems(); track trackSelectedKey(item)) {\n <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : getItemText(item)\">\n @if (selectedTemplate()) {\n <ax-prefix>\n <ng-container\n [ngTemplateOutlet]=\"selectedTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n </ax-prefix>\n }\n @if (!disabled() && !readonly()) {\n <ax-suffix>\n <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n <span class=\"ax-icon ax-icon-close\"></span>\n </button>\n </ax-suffix>\n }\n </ax-chips>\n }\n <input\n #triggerSearchInput\n type=\"text\"\n class=\"ax-input ax-lookup-trigger-search\"\n [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n [placeholder]=\"triggerSearchPlaceholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly() || !isEditableTrigger()\"\n [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n [value]=\"searchText()\"\n (input)=\"onTriggerSearchInput($any($event.target).value)\"\n (keydown)=\"onTriggerKeydown($event)\"\n (beforeinput)=\"onBeforeInput($event)\"\n (focus)=\"emitOnFocus($event)\"\n (blur)=\"emitOnBlur($event)\"\n />\n </div>\n } @else {\n <div class=\"ax-lookup-value\">\n @if (showSelectedTemplate()) {\n <div class=\"ax-lookup-selected-content\" aria-hidden=\"true\">\n <ng-container\n [ngTemplateOutlet]=\"selectedTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: selectedItems()[0] }\"\n />\n </div>\n }\n <input\n #triggerSearchInput\n type=\"text\"\n class=\"ax-input\"\n [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n [class.ax-lookup-input-overlay]=\"showSelectedTemplate()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly() || !isEditableTrigger()\"\n [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n [value]=\"searchText()\"\n (input)=\"onTriggerSearchInput($any($event.target).value)\"\n (keydown)=\"onTriggerKeydown($event)\"\n (beforeinput)=\"onBeforeInput($event)\"\n (focus)=\"emitOnFocus($event)\"\n (blur)=\"emitOnBlur($event)\"\n />\n </div>\n }\n\n @if (selectedValues().length > 0 && !disabled() && !readonly()) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n\n <button\n type=\"button\"\n class=\"ax-general-button-icon\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || readonly()\"\n >\n <span\n class=\"ax-icon\"\n [class.ax-icon-chevron-down]=\"!expanded()\"\n [class.ax-icon-chevron-up]=\"expanded()\"\n ></span>\n </button>\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n [target]=\"origin\"\n [openOn]=\"'manual'\"\n [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n [closeOnScroll]=\"!isActionsheetStyle()\"\n [placement]=\"'bottom-start'\"\n [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n [adaptivityEnabled]=\"isActionsheetStyle()\"\n [disabled]=\"disabled() || readonly()\"\n (onClosed)=\"onPopoverClosed()\"\n>\n <div\n #popup\n class=\"ax-lookup-popup\"\n [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n [class.ax-is-alternate]=\"alternate()\"\n (keydown.escape)=\"close()\"\n >\n @if (isActionsheetStyle()) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ caption() || placeholder() || ('@acorex:selectbox.popover.title' | translate | async) }}</ax-title>\n @if (isMultiple()) {\n <ax-button\n class=\"ax-sm\"\n color=\"primary\"\n look=\"solid\"\n text=\"@acorex:common.actions.apply\"\n (onClick)=\"close()\"\n ></ax-button>\n } @else {\n <ax-close-button></ax-close-button>\n }\n </ax-header>\n }\n @if (isSheetSearchEnabled()) {\n <div class=\"ax-lookup-sheet-search\">\n <ax-search-box\n #sheetSearch\n class=\"ax-sm\"\n look=\"fill\"\n [autoSearch]=\"false\"\n [delayTime]=\"0\"\n [placeholder]=\"searchPlaceholder()\"\n (onValueChanged)=\"onSheetSearchInput()\"\n (onKeyUp)=\"onSheetSearchInput()\"\n (onKeyDown)=\"onSheetSearchKeydown($event)\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n <ng-content select=\"ax-header\"></ng-content>\n @if (expanded()) {\n @switch (mode()) {\n @case ('drop-down-list') {\n <ax-lookup-drop-down-list\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n (itemClick)=\"handleSinglePick($event)\"\n (navigateOut)=\"onListNavigateOut($event)\"\n />\n }\n @case ('multi-select') {\n <ax-lookup-multi-select\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n (itemClick)=\"handleMultiToggle($event)\"\n (navigateOut)=\"onListNavigateOut($event)\"\n />\n }\n @case ('drop-down-tree') {\n <ax-lookup-drop-down-tree\n [dataSource]=\"resolvedTreeDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [nodeTemplate]=\"$any(itemTemplate())\"\n [emptyTemplate]=\"emptyTemplate()\"\n [filterKey]=\"treeFilterKey()\"\n [alternate]=\"alternate()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n @case ('multi-select-tree') {\n <ax-lookup-multi-select-tree\n [dataSource]=\"resolvedTreeDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [selectionBehavior]=\"treeSelectionBehavior()\"\n [nodeTemplate]=\"$any(itemTemplate())\"\n [emptyTemplate]=\"emptyTemplate()\"\n [filterKey]=\"treeFilterKey()\"\n [alternate]=\"alternate()\"\n (selectionChange)=\"handleTreeSelectionChange($event)\"\n />\n }\n @case ('multi-column') {\n <ax-lookup-multi-column\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [columns]=\"columns()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n @case ('multi-column-tree') {\n <ax-lookup-multi-column-tree\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [parentField]=\"treeParentField()\"\n [hasChildrenField]=\"hasChildrenField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [columns]=\"columns()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n }\n }\n <ng-content select=\"ax-footer\"></ng-content>\n </div>\n</ax-popover>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-lookup{display:block;width:100%}ax-lookup .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-trigger-multiple{height:auto;min-height:calc(var(--spacing, .25rem) * 9);padding-block:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-lookup .ax-lookup-chips{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-lookup .ax-lookup-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-placeholder{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}ax-lookup ax-chips ax-prefix,ax-lookup ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-lookup ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-lookup-popup.ax-is-actionsheet{border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup.ax-is-actionsheet>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-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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)}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-lookup-popup .ax-lookup-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-lookup-popup>ax-header:not(.ax-solid),.ax-lookup-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-lookup-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-lookup-viewport{width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow-x:hidden}.ax-lookup-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);width:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-lookup-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-lookup-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-option-host.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-lookup-option-host.ax-lookup-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-lookup-option-host.ax-lookup-option-multiple:not(.ax-lookup-option){padding-inline:calc(var(--spacing, .25rem) * 3)}.ax-lookup-option-host .ax-lookup-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-lookup-option-host .ax-lookup-option-loading{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host .ax-lookup-option-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-lookup-option.ax-state-selected{color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option.ax-lookup-option-multiple{justify-content:flex-start}.ax-lookup-option .ax-lookup-option-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-lookup-option .ax-lookup-option-check{margin-inline-start:auto;flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree{display:block;min-height:calc(var(--spacing, .25rem) * 0);width:100%}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) .ax-lookup-multi-column-table,:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0);border-style:var(--tw-border-style)!important;border-width:0px!important}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-disabled{pointer-events:none;opacity:50%}.ax-lookup-tree{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto;padding:calc(var(--spacing, .25rem) * 2)}.ax-lookup-tree .ax-tree-view-node{margin-block:0;border-radius:0}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: i1$1.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: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXLookupDropDownListComponent, selector: "ax-lookup-drop-down-list" }, { kind: "component", type: AXLookupMultiSelectComponent, selector: "ax-lookup-multi-select" }, { kind: "component", type: AXLookupDropDownTreeComponent, selector: "ax-lookup-drop-down-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "nodeTemplate", "emptyTemplate", "alternate", "filterKey"], outputs: ["itemClick"] }, { kind: "component", type: AXLookupMultiSelectTreeComponent, selector: "ax-lookup-multi-select-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "selectionBehavior", "nodeTemplate", "emptyTemplate", "alternate", "filterKey"], outputs: ["selectionChange"] }, { kind: "component", type: AXLookupMultiColumnComponent, selector: "ax-lookup-multi-column", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "itemHeight", "maxVisibleItems", "columns", "itemTemplate", "emptyTemplate", "loadingTemplate", "alternate"], outputs: ["itemClick"] }, { kind: "component", type: AXLookupMultiColumnTreeComponent, selector: "ax-lookup-multi-column-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "parentField", "hasChildrenField", "selectedValues", "itemHeight", "maxVisibleItems", "columns", "itemTemplate", "emptyTemplate", "loadingTemplate", "alternate"], outputs: ["itemClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3426
|
+
], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }, { propertyName: "originRef", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popup"], descendants: true, isSignal: true }, { propertyName: "triggerSearchInput", first: true, predicate: ["triggerSearchInput"], descendants: true, isSignal: true }, { propertyName: "listView", first: true, predicate: AXLookupListViewBase, descendants: true, isSignal: true }, { propertyName: "sheetSearchRef", first: true, predicate: ["sheetSearch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n #origin\n class=\"ax-editor-container ax-{{ look() }} ax-default\"\n [class.ax-lookup-trigger]=\"!isEditableTrigger()\"\n [class.ax-lookup-trigger-multiple]=\"isMultiple()\"\n [class.ax-state-disabled]=\"disabled()\"\n [class.ax-state-readonly]=\"readonly()\"\n (click)=\"onTriggerClick()\"\n>\n <ng-content select=\"ax-prefix\"></ng-content>\n\n @if (isMultiple()) {\n <div class=\"ax-lookup-chips\">\n @for (item of selectedItems(); track trackSelectedKey(item)) {\n <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : (getItemText(item) | translate | async)\">\n @if (selectedTemplate()) {\n <ax-prefix>\n <ng-container\n [ngTemplateOutlet]=\"selectedTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n </ax-prefix>\n }\n @if (!disabled() && !readonly()) {\n <ax-suffix>\n <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n <span class=\"ax-icon ax-icon-close\"></span>\n </button>\n </ax-suffix>\n }\n </ax-chips>\n }\n <input\n #triggerSearchInput\n type=\"text\"\n class=\"ax-input ax-lookup-trigger-search\"\n [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n [placeholder]=\"triggerSearchPlaceholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly() || !isEditableTrigger()\"\n [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n [value]=\"searchText()\"\n (input)=\"onTriggerSearchInput($any($event.target).value)\"\n (keydown)=\"onTriggerKeydown($event)\"\n (beforeinput)=\"onBeforeInput($event)\"\n (focus)=\"emitOnFocus($event)\"\n (blur)=\"emitOnBlur($event)\"\n />\n </div>\n } @else {\n <div class=\"ax-lookup-value\">\n @if (showSelectedTemplate()) {\n <div class=\"ax-lookup-selected-content\" aria-hidden=\"true\">\n <ng-container\n [ngTemplateOutlet]=\"selectedTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: selectedItems()[0] }\"\n />\n </div>\n }\n <input\n #triggerSearchInput\n type=\"text\"\n class=\"ax-input\"\n [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n [class.ax-lookup-input-overlay]=\"showSelectedTemplate()\"\n [placeholder]=\"translatedPlaceholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly() || !isEditableTrigger()\"\n [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n [value]=\"searchText()\"\n (input)=\"onTriggerSearchInput($any($event.target).value)\"\n (keydown)=\"onTriggerKeydown($event)\"\n (beforeinput)=\"onBeforeInput($event)\"\n (focus)=\"emitOnFocus($event)\"\n (blur)=\"emitOnBlur($event)\"\n />\n </div>\n }\n\n @if (selectedValues().length > 0 && !disabled() && !readonly()) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n\n <button\n type=\"button\"\n class=\"ax-general-button-icon\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"onChevronClick($event)\"\n >\n <span\n class=\"ax-icon\"\n [class.ax-icon-chevron-down]=\"!expanded()\"\n [class.ax-icon-chevron-up]=\"expanded()\"\n ></span>\n </button>\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n [target]=\"origin\"\n [openOn]=\"'manual'\"\n [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n [closeOnScroll]=\"!isActionsheetStyle()\"\n [placement]=\"'bottom-start'\"\n [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n [adaptivityEnabled]=\"isActionsheetStyle()\"\n [disabled]=\"disabled() || readonly()\"\n (onClosed)=\"onPopoverClosed()\"\n>\n <div\n #popup\n class=\"ax-lookup-popup\"\n [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n [class.ax-is-alternate]=\"alternate()\"\n (keydown.escape)=\"close()\"\n >\n @if (isActionsheetStyle()) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ actionsheetTitle() }}</ax-title>\n @if (isMultiple()) {\n <ax-button\n class=\"ax-sm\"\n color=\"primary\"\n look=\"solid\"\n text=\"@acorex:common.actions.apply\"\n (onClick)=\"close()\"\n ></ax-button>\n } @else {\n <ax-close-button></ax-close-button>\n }\n </ax-header>\n }\n @if (isSheetSearchEnabled()) {\n <div class=\"ax-lookup-sheet-search\">\n <ax-search-box\n #sheetSearch\n class=\"ax-sm\"\n look=\"fill\"\n [autoSearch]=\"false\"\n [delayTime]=\"0\"\n [placeholder]=\"searchPlaceholder()\"\n (onValueChanged)=\"onSheetSearchInput()\"\n (onKeyUp)=\"onSheetSearchInput()\"\n (onKeyDown)=\"onSheetSearchKeydown($event)\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n <ng-content select=\"ax-header\"></ng-content>\n @if (expanded()) {\n @switch (mode()) {\n @case ('drop-down-list') {\n <ax-lookup-drop-down-list\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (itemClick)=\"handleSinglePick($event)\"\n (navigateOut)=\"onListNavigateOut($event)\"\n />\n }\n @case ('multi-select') {\n <ax-lookup-multi-select\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (itemClick)=\"handleMultiToggle($event)\"\n (navigateOut)=\"onListNavigateOut($event)\"\n />\n }\n @case ('drop-down-tree') {\n <ax-lookup-drop-down-tree\n [dataSource]=\"resolvedTreeDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [nodeTemplate]=\"$any(itemTemplate())\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [loading]=\"treeSearchLoading()\"\n [filterKey]=\"treeFilterKey()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n @case ('multi-select-tree') {\n <ax-lookup-multi-select-tree\n [dataSource]=\"resolvedTreeDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [selectionBehavior]=\"treeSelectionBehavior()\"\n [nodeTemplate]=\"$any(itemTemplate())\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [loading]=\"treeSearchLoading()\"\n [filterKey]=\"treeFilterKey()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (selectionChange)=\"handleTreeSelectionChange($event)\"\n />\n }\n @case ('multi-column') {\n <ax-lookup-multi-column\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [columns]=\"columns()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n @case ('multi-column-tree') {\n <ax-lookup-multi-column-tree\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [parentField]=\"treeParentField()\"\n [hasChildrenField]=\"hasChildrenField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [columns]=\"columns()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n }\n }\n <ng-content select=\"ax-footer\"></ng-content>\n </div>\n</ax-popover>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-lookup{display:block;width:100%}ax-lookup .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-trigger-multiple{height:auto;min-height:calc(var(--spacing, .25rem) * 9);padding-block:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-lookup .ax-lookup-chips{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-lookup .ax-lookup-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-placeholder{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}ax-lookup ax-chips ax-prefix,ax-lookup ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-lookup ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup{--ax-comp-lookup-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-lookup-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-lookup-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-lookup-highlight-bg-color));color:rgb(var(--ax-comp-lookup-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-lookup-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-lookup-popup.ax-is-actionsheet{height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup.ax-is-actionsheet>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-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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)}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-lookup-popup.ax-is-actionsheet ax-lookup-drop-down-list,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-select,.ax-lookup-popup.ax-is-actionsheet ax-lookup-drop-down-tree,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-select-tree,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-column-tree{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;height:auto!important}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-viewport{min-height:calc(var(--spacing, .25rem) * 0);flex:1;height:auto!important;max-height:none!important}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-tree{max-height:none;min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-empty{display:flex;flex:1;align-items:center;justify-content:center}:is(.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column-tree) .ax-lookup-multi-column-table,:is(.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column-tree) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup .ax-lookup-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-lookup-popup>ax-header:not(.ax-solid),.ax-lookup-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-lookup-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-lookup-viewport{width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow-x:hidden}.ax-lookup-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);width:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-lookup-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-lookup-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-option-host.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-lookup-option-host.ax-lookup-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-lookup-option-host.ax-lookup-option-multiple:not(.ax-lookup-option){padding-inline:calc(var(--spacing, .25rem) * 3)}.ax-lookup-option-host .ax-lookup-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-lookup-option-host .ax-lookup-option-loading{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host .ax-lookup-option-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-lookup-option.ax-state-selected{color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option.ax-lookup-option-multiple{justify-content:flex-start}.ax-lookup-option .ax-lookup-option-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-lookup-option .ax-lookup-option-check{margin-inline-start:auto;flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree{display:block;min-height:calc(var(--spacing, .25rem) * 0);width:100%}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) .ax-lookup-multi-column-table,:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0);border-style:var(--tw-border-style)!important;border-width:0px!important}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-disabled{pointer-events:none;opacity:50%}.ax-lookup-tree{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto}.ax-lookup-tree .ax-tree-view-node{margin-block:0;border-radius:0}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: i1$1.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: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXLookupDropDownListComponent, selector: "ax-lookup-drop-down-list" }, { kind: "component", type: AXLookupMultiSelectComponent, selector: "ax-lookup-multi-select" }, { kind: "component", type: AXLookupDropDownTreeComponent, selector: "ax-lookup-drop-down-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "nodeTemplate", "emptyTemplate", "loadingTemplate", "loading", "alternate", "filterKey", "highlightText"], outputs: ["itemClick"] }, { kind: "component", type: AXLookupMultiSelectTreeComponent, selector: "ax-lookup-multi-select-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "selectionBehavior", "nodeTemplate", "emptyTemplate", "loadingTemplate", "loading", "alternate", "filterKey", "highlightText"], outputs: ["selectionChange"] }, { kind: "component", type: AXLookupMultiColumnComponent, selector: "ax-lookup-multi-column", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "itemHeight", "maxVisibleItems", "columns", "itemTemplate", "emptyTemplate", "loadingTemplate", "alternate", "highlightText"], outputs: ["itemClick"] }, { kind: "component", type: AXLookupMultiColumnTreeComponent, selector: "ax-lookup-multi-column-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "parentField", "hasChildrenField", "selectedValues", "itemHeight", "maxVisibleItems", "columns", "itemTemplate", "emptyTemplate", "loadingTemplate", "alternate", "highlightText"], outputs: ["itemClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2819
3427
|
}
|
|
2820
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupComponent, decorators: [{
|
|
2821
3429
|
type: Component,
|
|
2822
3430
|
args: [{ selector: 'ax-lookup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2823
3431
|
NgTemplateOutlet,
|
|
@@ -2839,12 +3447,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2839
3447
|
{ provide: AXClearableComponent, useExisting: AXLookupComponent },
|
|
2840
3448
|
{ provide: AXClosableComponent, useExisting: AXLookupComponent },
|
|
2841
3449
|
{ provide: AXValuableComponent, useExisting: AXLookupComponent },
|
|
2842
|
-
], template: "<div\n #origin\n class=\"ax-editor-container ax-{{ look() }} ax-default\"\n [class.ax-lookup-trigger]=\"!isEditableTrigger()\"\n [class.ax-lookup-trigger-multiple]=\"isMultiple()\"\n [class.ax-state-disabled]=\"disabled()\"\n [class.ax-state-readonly]=\"readonly()\"\n (click)=\"onTriggerClick()\"\n>\n <ng-content select=\"ax-prefix\"></ng-content>\n\n @if (isMultiple()) {\n <div class=\"ax-lookup-chips\">\n @for (item of selectedItems(); track trackSelectedKey(item)) {\n <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : getItemText(item)\">\n @if (selectedTemplate()) {\n <ax-prefix>\n <ng-container\n [ngTemplateOutlet]=\"selectedTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n </ax-prefix>\n }\n @if (!disabled() && !readonly()) {\n <ax-suffix>\n <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n <span class=\"ax-icon ax-icon-close\"></span>\n </button>\n </ax-suffix>\n }\n </ax-chips>\n }\n <input\n #triggerSearchInput\n type=\"text\"\n class=\"ax-input ax-lookup-trigger-search\"\n [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n [placeholder]=\"triggerSearchPlaceholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly() || !isEditableTrigger()\"\n [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n [value]=\"searchText()\"\n (input)=\"onTriggerSearchInput($any($event.target).value)\"\n (keydown)=\"onTriggerKeydown($event)\"\n (beforeinput)=\"onBeforeInput($event)\"\n (focus)=\"emitOnFocus($event)\"\n (blur)=\"emitOnBlur($event)\"\n />\n </div>\n } @else {\n <div class=\"ax-lookup-value\">\n @if (showSelectedTemplate()) {\n <div class=\"ax-lookup-selected-content\" aria-hidden=\"true\">\n <ng-container\n [ngTemplateOutlet]=\"selectedTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: selectedItems()[0] }\"\n />\n </div>\n }\n <input\n #triggerSearchInput\n type=\"text\"\n class=\"ax-input\"\n [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n [class.ax-lookup-input-overlay]=\"showSelectedTemplate()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly() || !isEditableTrigger()\"\n [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n [value]=\"searchText()\"\n (input)=\"onTriggerSearchInput($any($event.target).value)\"\n (keydown)=\"onTriggerKeydown($event)\"\n (beforeinput)=\"onBeforeInput($event)\"\n (focus)=\"emitOnFocus($event)\"\n (blur)=\"emitOnBlur($event)\"\n />\n </div>\n }\n\n @if (selectedValues().length > 0 && !disabled() && !readonly()) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n\n <button\n type=\"button\"\n class=\"ax-general-button-icon\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || readonly()\"\n >\n <span\n class=\"ax-icon\"\n [class.ax-icon-chevron-down]=\"!expanded()\"\n [class.ax-icon-chevron-up]=\"expanded()\"\n ></span>\n </button>\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n [target]=\"origin\"\n [openOn]=\"'manual'\"\n [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n [closeOnScroll]=\"!isActionsheetStyle()\"\n [placement]=\"'bottom-start'\"\n [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n [adaptivityEnabled]=\"isActionsheetStyle()\"\n [disabled]=\"disabled() || readonly()\"\n (onClosed)=\"onPopoverClosed()\"\n>\n <div\n #popup\n class=\"ax-lookup-popup\"\n [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n [class.ax-is-alternate]=\"alternate()\"\n (keydown.escape)=\"close()\"\n >\n @if (isActionsheetStyle()) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ caption() || placeholder() || ('@acorex:selectbox.popover.title' | translate | async) }}</ax-title>\n @if (isMultiple()) {\n <ax-button\n class=\"ax-sm\"\n color=\"primary\"\n look=\"solid\"\n text=\"@acorex:common.actions.apply\"\n (onClick)=\"close()\"\n ></ax-button>\n } @else {\n <ax-close-button></ax-close-button>\n }\n </ax-header>\n }\n @if (isSheetSearchEnabled()) {\n <div class=\"ax-lookup-sheet-search\">\n <ax-search-box\n #sheetSearch\n class=\"ax-sm\"\n look=\"fill\"\n [autoSearch]=\"false\"\n [delayTime]=\"0\"\n [placeholder]=\"searchPlaceholder()\"\n (onValueChanged)=\"onSheetSearchInput()\"\n (onKeyUp)=\"onSheetSearchInput()\"\n (onKeyDown)=\"onSheetSearchKeydown($event)\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n <ng-content select=\"ax-header\"></ng-content>\n @if (expanded()) {\n @switch (mode()) {\n @case ('drop-down-list') {\n <ax-lookup-drop-down-list\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n (itemClick)=\"handleSinglePick($event)\"\n (navigateOut)=\"onListNavigateOut($event)\"\n />\n }\n @case ('multi-select') {\n <ax-lookup-multi-select\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n (itemClick)=\"handleMultiToggle($event)\"\n (navigateOut)=\"onListNavigateOut($event)\"\n />\n }\n @case ('drop-down-tree') {\n <ax-lookup-drop-down-tree\n [dataSource]=\"resolvedTreeDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [nodeTemplate]=\"$any(itemTemplate())\"\n [emptyTemplate]=\"emptyTemplate()\"\n [filterKey]=\"treeFilterKey()\"\n [alternate]=\"alternate()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n @case ('multi-select-tree') {\n <ax-lookup-multi-select-tree\n [dataSource]=\"resolvedTreeDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [selectionBehavior]=\"treeSelectionBehavior()\"\n [nodeTemplate]=\"$any(itemTemplate())\"\n [emptyTemplate]=\"emptyTemplate()\"\n [filterKey]=\"treeFilterKey()\"\n [alternate]=\"alternate()\"\n (selectionChange)=\"handleTreeSelectionChange($event)\"\n />\n }\n @case ('multi-column') {\n <ax-lookup-multi-column\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [columns]=\"columns()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n @case ('multi-column-tree') {\n <ax-lookup-multi-column-tree\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [parentField]=\"treeParentField()\"\n [hasChildrenField]=\"hasChildrenField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [columns]=\"columns()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n }\n }\n <ng-content select=\"ax-footer\"></ng-content>\n </div>\n</ax-popover>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-lookup{display:block;width:100%}ax-lookup .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-trigger-multiple{height:auto;min-height:calc(var(--spacing, .25rem) * 9);padding-block:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-lookup .ax-lookup-chips{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-lookup .ax-lookup-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-placeholder{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}ax-lookup ax-chips ax-prefix,ax-lookup ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-lookup ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup{box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-lookup-popup.ax-is-actionsheet{border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup.ax-is-actionsheet>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-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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)}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-lookup-popup .ax-lookup-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-lookup-popup>ax-header:not(.ax-solid),.ax-lookup-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-lookup-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-lookup-viewport{width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow-x:hidden}.ax-lookup-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);width:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-lookup-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-lookup-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-option-host.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-lookup-option-host.ax-lookup-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-lookup-option-host.ax-lookup-option-multiple:not(.ax-lookup-option){padding-inline:calc(var(--spacing, .25rem) * 3)}.ax-lookup-option-host .ax-lookup-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-lookup-option-host .ax-lookup-option-loading{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host .ax-lookup-option-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-lookup-option.ax-state-selected{color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option.ax-lookup-option-multiple{justify-content:flex-start}.ax-lookup-option .ax-lookup-option-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-lookup-option .ax-lookup-option-check{margin-inline-start:auto;flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree{display:block;min-height:calc(var(--spacing, .25rem) * 0);width:100%}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) .ax-lookup-multi-column-table,:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0);border-style:var(--tw-border-style)!important;border-width:0px!important}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-disabled{pointer-events:none;opacity:50%}.ax-lookup-tree{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto;padding:calc(var(--spacing, .25rem) * 2)}.ax-lookup-tree .ax-tree-view-node{margin-block:0;border-radius:0}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
2843
|
-
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], treeDataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeDataSource", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], treeParentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeParentField", required: false }] }], hasChildrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenField", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], adaptivityEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "adaptivityEnabled", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], treeSelectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeSelectionBehavior", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], selectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueItems", required: false }] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onItemSelected: [{ type: i0.Output, args: ["onItemSelected"] }], onOpened: [{ type: i0.Output, args: ["onOpened"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }], originRef: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], popupRef: [{ type: i0.ViewChild, args: ['popup', { isSignal: true }] }], triggerSearchInput: [{ type: i0.ViewChild, args: ['triggerSearchInput', { isSignal: true }] }], listView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupListViewBase), { isSignal: true }] }],
|
|
3450
|
+
], template: "<div\n #origin\n class=\"ax-editor-container ax-{{ look() }} ax-default\"\n [class.ax-lookup-trigger]=\"!isEditableTrigger()\"\n [class.ax-lookup-trigger-multiple]=\"isMultiple()\"\n [class.ax-state-disabled]=\"disabled()\"\n [class.ax-state-readonly]=\"readonly()\"\n (click)=\"onTriggerClick()\"\n>\n <ng-content select=\"ax-prefix\"></ng-content>\n\n @if (isMultiple()) {\n <div class=\"ax-lookup-chips\">\n @for (item of selectedItems(); track trackSelectedKey(item)) {\n <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : (getItemText(item) | translate | async)\">\n @if (selectedTemplate()) {\n <ax-prefix>\n <ng-container\n [ngTemplateOutlet]=\"selectedTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: item }\"\n />\n </ax-prefix>\n }\n @if (!disabled() && !readonly()) {\n <ax-suffix>\n <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n <span class=\"ax-icon ax-icon-close\"></span>\n </button>\n </ax-suffix>\n }\n </ax-chips>\n }\n <input\n #triggerSearchInput\n type=\"text\"\n class=\"ax-input ax-lookup-trigger-search\"\n [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n [placeholder]=\"triggerSearchPlaceholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly() || !isEditableTrigger()\"\n [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n [value]=\"searchText()\"\n (input)=\"onTriggerSearchInput($any($event.target).value)\"\n (keydown)=\"onTriggerKeydown($event)\"\n (beforeinput)=\"onBeforeInput($event)\"\n (focus)=\"emitOnFocus($event)\"\n (blur)=\"emitOnBlur($event)\"\n />\n </div>\n } @else {\n <div class=\"ax-lookup-value\">\n @if (showSelectedTemplate()) {\n <div class=\"ax-lookup-selected-content\" aria-hidden=\"true\">\n <ng-container\n [ngTemplateOutlet]=\"selectedTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: selectedItems()[0] }\"\n />\n </div>\n }\n <input\n #triggerSearchInput\n type=\"text\"\n class=\"ax-input\"\n [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n [class.ax-lookup-input-overlay]=\"showSelectedTemplate()\"\n [placeholder]=\"translatedPlaceholder()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly() || !isEditableTrigger()\"\n [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n [value]=\"searchText()\"\n (input)=\"onTriggerSearchInput($any($event.target).value)\"\n (keydown)=\"onTriggerKeydown($event)\"\n (beforeinput)=\"onBeforeInput($event)\"\n (focus)=\"emitOnFocus($event)\"\n (blur)=\"emitOnBlur($event)\"\n />\n </div>\n }\n\n @if (selectedValues().length > 0 && !disabled() && !readonly()) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n\n <button\n type=\"button\"\n class=\"ax-general-button-icon\"\n tabindex=\"-1\"\n [disabled]=\"disabled() || readonly()\"\n (click)=\"onChevronClick($event)\"\n >\n <span\n class=\"ax-icon\"\n [class.ax-icon-chevron-down]=\"!expanded()\"\n [class.ax-icon-chevron-up]=\"expanded()\"\n ></span>\n </button>\n <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n [target]=\"origin\"\n [openOn]=\"'manual'\"\n [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n [closeOnScroll]=\"!isActionsheetStyle()\"\n [placement]=\"'bottom-start'\"\n [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n [adaptivityEnabled]=\"isActionsheetStyle()\"\n [disabled]=\"disabled() || readonly()\"\n (onClosed)=\"onPopoverClosed()\"\n>\n <div\n #popup\n class=\"ax-lookup-popup\"\n [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n [class.ax-is-alternate]=\"alternate()\"\n (keydown.escape)=\"close()\"\n >\n @if (isActionsheetStyle()) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ actionsheetTitle() }}</ax-title>\n @if (isMultiple()) {\n <ax-button\n class=\"ax-sm\"\n color=\"primary\"\n look=\"solid\"\n text=\"@acorex:common.actions.apply\"\n (onClick)=\"close()\"\n ></ax-button>\n } @else {\n <ax-close-button></ax-close-button>\n }\n </ax-header>\n }\n @if (isSheetSearchEnabled()) {\n <div class=\"ax-lookup-sheet-search\">\n <ax-search-box\n #sheetSearch\n class=\"ax-sm\"\n look=\"fill\"\n [autoSearch]=\"false\"\n [delayTime]=\"0\"\n [placeholder]=\"searchPlaceholder()\"\n (onValueChanged)=\"onSheetSearchInput()\"\n (onKeyUp)=\"onSheetSearchInput()\"\n (onKeyDown)=\"onSheetSearchKeydown($event)\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n <ng-content select=\"ax-header\"></ng-content>\n @if (expanded()) {\n @switch (mode()) {\n @case ('drop-down-list') {\n <ax-lookup-drop-down-list\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (itemClick)=\"handleSinglePick($event)\"\n (navigateOut)=\"onListNavigateOut($event)\"\n />\n }\n @case ('multi-select') {\n <ax-lookup-multi-select\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (itemClick)=\"handleMultiToggle($event)\"\n (navigateOut)=\"onListNavigateOut($event)\"\n />\n }\n @case ('drop-down-tree') {\n <ax-lookup-drop-down-tree\n [dataSource]=\"resolvedTreeDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [nodeTemplate]=\"$any(itemTemplate())\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [loading]=\"treeSearchLoading()\"\n [filterKey]=\"treeFilterKey()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n @case ('multi-select-tree') {\n <ax-lookup-multi-select-tree\n [dataSource]=\"resolvedTreeDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [selectionBehavior]=\"treeSelectionBehavior()\"\n [nodeTemplate]=\"$any(itemTemplate())\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [loading]=\"treeSearchLoading()\"\n [filterKey]=\"treeFilterKey()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (selectionChange)=\"handleTreeSelectionChange($event)\"\n />\n }\n @case ('multi-column') {\n <ax-lookup-multi-column\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [columns]=\"columns()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n @case ('multi-column-tree') {\n <ax-lookup-multi-column-tree\n [dataSource]=\"resolvedDataSource()\"\n [valueField]=\"valueField()\"\n [textField]=\"textField()\"\n [disabledField]=\"disabledField()\"\n [parentField]=\"treeParentField()\"\n [hasChildrenField]=\"hasChildrenField()\"\n [selectedValues]=\"selectedValues()\"\n [itemHeight]=\"itemHeight()\"\n [maxVisibleItems]=\"maxVisibleItems()\"\n [columns]=\"columns()\"\n [itemTemplate]=\"itemTemplate()\"\n [emptyTemplate]=\"emptyTemplate()\"\n [loadingTemplate]=\"loadingTemplate()\"\n [alternate]=\"alternate()\"\n [highlightText]=\"highlightQuery()\"\n (itemClick)=\"handleSinglePick($event)\"\n />\n }\n }\n }\n <ng-content select=\"ax-footer\"></ng-content>\n </div>\n</ax-popover>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-lookup{display:block;width:100%}ax-lookup .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-trigger-multiple{height:auto;min-height:calc(var(--spacing, .25rem) * 9);padding-block:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-lookup .ax-lookup-chips{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-lookup .ax-lookup-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-placeholder{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}ax-lookup ax-chips ax-prefix,ax-lookup ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-lookup ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup{--ax-comp-lookup-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-lookup-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-lookup-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-lookup-highlight-bg-color));color:rgb(var(--ax-comp-lookup-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-lookup-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-lookup-popup.ax-is-actionsheet{height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup.ax-is-actionsheet>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-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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)}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-lookup-popup.ax-is-actionsheet ax-lookup-drop-down-list,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-select,.ax-lookup-popup.ax-is-actionsheet ax-lookup-drop-down-tree,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-select-tree,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-column-tree{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;height:auto!important}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-viewport{min-height:calc(var(--spacing, .25rem) * 0);flex:1;height:auto!important;max-height:none!important}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-tree{max-height:none;min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-empty{display:flex;flex:1;align-items:center;justify-content:center}:is(.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column-tree) .ax-lookup-multi-column-table,:is(.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column-tree) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup .ax-lookup-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-lookup-popup>ax-header:not(.ax-solid),.ax-lookup-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-lookup-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-lookup-viewport{width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow-x:hidden}.ax-lookup-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);width:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-lookup-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-lookup-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-option-host.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-lookup-option-host.ax-lookup-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-lookup-option-host.ax-lookup-option-multiple:not(.ax-lookup-option){padding-inline:calc(var(--spacing, .25rem) * 3)}.ax-lookup-option-host .ax-lookup-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-lookup-option-host .ax-lookup-option-loading{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host .ax-lookup-option-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-lookup-option.ax-state-selected{color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option.ax-lookup-option-multiple{justify-content:flex-start}.ax-lookup-option .ax-lookup-option-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-lookup-option .ax-lookup-option-check{margin-inline-start:auto;flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree{display:block;min-height:calc(var(--spacing, .25rem) * 0);width:100%}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) .ax-lookup-multi-column-table,:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0);border-style:var(--tw-border-style)!important;border-width:0px!important}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-disabled{pointer-events:none;opacity:50%}.ax-lookup-tree{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto}.ax-lookup-tree .ax-tree-view-node{margin-block:0;border-radius:0}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3451
|
+
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], treeDataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeDataSource", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], treeParentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeParentField", required: false }] }], hasChildrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenField", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], adaptivityEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "adaptivityEnabled", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], treeSelectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeSelectionBehavior", required: false }] }], highlightSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightSearch", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], selectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueItems", required: false }] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onItemSelected: [{ type: i0.Output, args: ["onItemSelected"] }], onOpened: [{ type: i0.Output, args: ["onOpened"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }], originRef: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], popupRef: [{ type: i0.ViewChild, args: ['popup', { isSignal: true }] }], triggerSearchInput: [{ type: i0.ViewChild, args: ['triggerSearchInput', { isSignal: true }] }], listView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupListViewBase), { isSignal: true }] }], sheetSearchRef: [{ type: i0.ViewChild, args: ['sheetSearch', { isSignal: true }] }] } });
|
|
2844
3452
|
|
|
2845
3453
|
class AXLookupModule {
|
|
2846
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
2847
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.
|
|
3454
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3455
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXLookupModule, imports: [AXLookupComponent,
|
|
2848
3456
|
AXLookupDropDownListComponent,
|
|
2849
3457
|
AXLookupMultiSelectComponent,
|
|
2850
3458
|
AXLookupDropDownTreeComponent,
|
|
@@ -2857,7 +3465,7 @@ class AXLookupModule {
|
|
|
2857
3465
|
AXLookupMultiSelectTreeComponent,
|
|
2858
3466
|
AXLookupMultiColumnComponent,
|
|
2859
3467
|
AXLookupMultiColumnTreeComponent] }); }
|
|
2860
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.
|
|
3468
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupModule, imports: [AXLookupComponent,
|
|
2861
3469
|
AXLookupDropDownListComponent,
|
|
2862
3470
|
AXLookupMultiSelectComponent,
|
|
2863
3471
|
AXLookupDropDownTreeComponent,
|
|
@@ -2865,7 +3473,7 @@ class AXLookupModule {
|
|
|
2865
3473
|
AXLookupMultiColumnComponent,
|
|
2866
3474
|
AXLookupMultiColumnTreeComponent] }); }
|
|
2867
3475
|
}
|
|
2868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
3476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXLookupModule, decorators: [{
|
|
2869
3477
|
type: NgModule,
|
|
2870
3478
|
args: [{
|
|
2871
3479
|
imports: [
|
|
@@ -2893,5 +3501,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
2893
3501
|
* Generated bundle index. Do not edit.
|
|
2894
3502
|
*/
|
|
2895
3503
|
|
|
2896
|
-
export { AXLookupComponent, AXLookupDropDownListComponent, AXLookupDropDownTreeComponent, AXLookupModule, AXLookupMultiColumnComponent, AXLookupMultiColumnTreeComponent, AXLookupMultiSelectComponent, AXLookupMultiSelectTreeComponent };
|
|
3504
|
+
export { AXLookupComponent, AXLookupDropDownListComponent, AXLookupDropDownTreeComponent, AXLookupModule, AXLookupMultiColumnComponent, AXLookupMultiColumnTreeComponent, AXLookupMultiSelectComponent, AXLookupMultiSelectTreeComponent, cloneLookupTreeNodes, convertLookupArrayToDataSource, createLookupTreeTableDataSource, filterTreeNodes, flattenTreeNodes, hydrateLookupTree, lookupTreeNodeMayHaveChildren, matchesLookupText, prepareFilteredTreeTableRows };
|
|
2897
3505
|
//# sourceMappingURL=acorex-components-lookup.mjs.map
|