@weeehaoooz/talos-ui 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/fesm2022/{weeehaoooz-talos-ui-button-button-group.mjs → weeehaoooz-talos-ui-button.mjs} +115 -18
- package/fesm2022/weeehaoooz-talos-ui-button.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-data-display.mjs +3110 -0
- package/fesm2022/weeehaoooz-talos-ui-data-display.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-data-viz.mjs +2414 -0
- package/fesm2022/weeehaoooz-talos-ui-data-viz.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-dropdown.mjs +1039 -0
- package/fesm2022/weeehaoooz-talos-ui-dropdown.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-feedback.mjs +2885 -0
- package/fesm2022/weeehaoooz-talos-ui-feedback.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-form.mjs +10799 -0
- package/fesm2022/weeehaoooz-talos-ui-form.mjs.map +1 -0
- package/fesm2022/weeehaoooz-talos-ui-layout.mjs +1320 -11
- package/fesm2022/weeehaoooz-talos-ui-layout.mjs.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui-nav.mjs +119 -72
- package/fesm2022/weeehaoooz-talos-ui-nav.mjs.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui.mjs +22190 -15213
- package/fesm2022/weeehaoooz-talos-ui.mjs.map +1 -1
- package/package.json +20 -135
- package/styles/_breadcrumb.scss +16 -0
- package/styles/_button-group.scss +156 -7
- package/styles/_buttons.scss +156 -8
- package/styles/_dropdown.scss +438 -0
- package/styles/_form-controls.scss +13 -0
- package/styles/_progress-bar.scss +43 -0
- package/styles/_skeleton.scss +176 -0
- package/styles/_spinner.scss +58 -0
- package/styles/_variables.scss +37 -0
- package/styles/index.scss +6 -1
- package/types/weeehaoooz-talos-ui-button.d.ts +92 -0
- package/types/weeehaoooz-talos-ui-button.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-data-display.d.ts +1018 -0
- package/types/weeehaoooz-talos-ui-data-display.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-data-viz.d.ts +839 -0
- package/types/weeehaoooz-talos-ui-data-viz.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-dropdown.d.ts +187 -0
- package/types/weeehaoooz-talos-ui-dropdown.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-feedback.d.ts +1495 -0
- package/types/weeehaoooz-talos-ui-feedback.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-form.d.ts +2639 -0
- package/types/weeehaoooz-talos-ui-form.d.ts.map +1 -0
- package/types/weeehaoooz-talos-ui-layout.d.ts +851 -3
- package/types/weeehaoooz-talos-ui-layout.d.ts.map +1 -1
- package/types/weeehaoooz-talos-ui-nav.d.ts +36 -10
- package/types/weeehaoooz-talos-ui-nav.d.ts.map +1 -1
- package/types/weeehaoooz-talos-ui.d.ts +6949 -4137
- package/types/weeehaoooz-talos-ui.d.ts.map +1 -1
- package/fesm2022/weeehaoooz-talos-ui-button-button-group.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-button-button.mjs +0 -93
- package/fesm2022/weeehaoooz-talos-ui-button-button.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-display-badge.mjs +0 -233
- package/fesm2022/weeehaoooz-talos-ui-data-display-badge.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-display-status-tag.mjs +0 -361
- package/fesm2022/weeehaoooz-talos-ui-data-display-status-tag.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-display-timeline.mjs +0 -312
- package/fesm2022/weeehaoooz-talos-ui-data-display-timeline.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs +0 -235
- package/fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-viz-category-bar.mjs +0 -462
- package/fesm2022/weeehaoooz-talos-ui-data-viz-category-bar.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-viz-heatmap.mjs +0 -805
- package/fesm2022/weeehaoooz-talos-ui-data-viz-heatmap.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-donut.mjs +0 -267
- package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-donut.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-gauge.mjs +0 -351
- package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-gauge.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-data-viz-sparkline.mjs +0 -566
- package/fesm2022/weeehaoooz-talos-ui-data-viz-sparkline.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-feedback-alert.mjs +0 -534
- package/fesm2022/weeehaoooz-talos-ui-feedback-alert.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-feedback-dialog.mjs +0 -446
- package/fesm2022/weeehaoooz-talos-ui-feedback-dialog.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-feedback-snackbar.mjs +0 -376
- package/fesm2022/weeehaoooz-talos-ui-feedback-snackbar.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-feedback-tooltip.mjs +0 -147
- package/fesm2022/weeehaoooz-talos-ui-feedback-tooltip.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-affix.mjs +0 -242
- package/fesm2022/weeehaoooz-talos-ui-form-affix.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-autocomplete.mjs +0 -514
- package/fesm2022/weeehaoooz-talos-ui-form-autocomplete.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-checkbox.mjs +0 -548
- package/fesm2022/weeehaoooz-talos-ui-form-checkbox.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-chips.mjs +0 -692
- package/fesm2022/weeehaoooz-talos-ui-form-chips.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-color-picker.mjs +0 -761
- package/fesm2022/weeehaoooz-talos-ui-form-color-picker.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-date-picker.mjs +0 -896
- package/fesm2022/weeehaoooz-talos-ui-form-date-picker.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-date-range-picker.mjs +0 -872
- package/fesm2022/weeehaoooz-talos-ui-form-date-range-picker.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-date-time-picker.mjs +0 -119
- package/fesm2022/weeehaoooz-talos-ui-form-date-time-picker.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-date-time-range-picker.mjs +0 -135
- package/fesm2022/weeehaoooz-talos-ui-form-date-time-range-picker.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-drop-zone.mjs +0 -666
- package/fesm2022/weeehaoooz-talos-ui-form-drop-zone.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-form-field.mjs +0 -147
- package/fesm2022/weeehaoooz-talos-ui-form-form-field.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-input.mjs +0 -33
- package/fesm2022/weeehaoooz-talos-ui-form-input.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-otp.mjs +0 -455
- package/fesm2022/weeehaoooz-talos-ui-form-otp.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-password-input.mjs +0 -379
- package/fesm2022/weeehaoooz-talos-ui-form-password-input.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-radio.mjs +0 -297
- package/fesm2022/weeehaoooz-talos-ui-form-radio.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-range-input.mjs +0 -661
- package/fesm2022/weeehaoooz-talos-ui-form-range-input.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-rating.mjs +0 -346
- package/fesm2022/weeehaoooz-talos-ui-form-rating.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-select-input.mjs +0 -896
- package/fesm2022/weeehaoooz-talos-ui-form-select-input.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-slide-toggle.mjs +0 -252
- package/fesm2022/weeehaoooz-talos-ui-form-slide-toggle.mjs.map +0 -1
- package/fesm2022/weeehaoooz-talos-ui-form-transfer-list.mjs +0 -916
- package/fesm2022/weeehaoooz-talos-ui-form-transfer-list.mjs.map +0 -1
- package/types/weeehaoooz-talos-ui-button-button-group.d.ts +0 -59
- package/types/weeehaoooz-talos-ui-button-button-group.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-button-button.d.ts +0 -38
- package/types/weeehaoooz-talos-ui-button-button.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-display-badge.d.ts +0 -119
- package/types/weeehaoooz-talos-ui-data-display-badge.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-display-status-tag.d.ts +0 -135
- package/types/weeehaoooz-talos-ui-data-display-status-tag.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-display-timeline.d.ts +0 -144
- package/types/weeehaoooz-talos-ui-data-display-timeline.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-display-trend-indicator.d.ts +0 -83
- package/types/weeehaoooz-talos-ui-data-display-trend-indicator.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-viz-category-bar.d.ts +0 -255
- package/types/weeehaoooz-talos-ui-data-viz-category-bar.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-viz-heatmap.d.ts +0 -204
- package/types/weeehaoooz-talos-ui-data-viz-heatmap.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-viz-mini-donut.d.ts +0 -101
- package/types/weeehaoooz-talos-ui-data-viz-mini-donut.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-viz-mini-gauge.d.ts +0 -138
- package/types/weeehaoooz-talos-ui-data-viz-mini-gauge.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-data-viz-sparkline.d.ts +0 -161
- package/types/weeehaoooz-talos-ui-data-viz-sparkline.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-feedback-alert.d.ts +0 -212
- package/types/weeehaoooz-talos-ui-feedback-alert.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-feedback-dialog.d.ts +0 -259
- package/types/weeehaoooz-talos-ui-feedback-dialog.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-feedback-snackbar.d.ts +0 -147
- package/types/weeehaoooz-talos-ui-feedback-snackbar.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-feedback-tooltip.d.ts +0 -32
- package/types/weeehaoooz-talos-ui-feedback-tooltip.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-affix.d.ts +0 -88
- package/types/weeehaoooz-talos-ui-form-affix.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-autocomplete.d.ts +0 -113
- package/types/weeehaoooz-talos-ui-form-autocomplete.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-checkbox.d.ts +0 -165
- package/types/weeehaoooz-talos-ui-form-checkbox.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-chips.d.ts +0 -152
- package/types/weeehaoooz-talos-ui-form-chips.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-color-picker.d.ts +0 -144
- package/types/weeehaoooz-talos-ui-form-color-picker.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-date-picker.d.ts +0 -138
- package/types/weeehaoooz-talos-ui-form-date-picker.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-date-range-picker.d.ts +0 -148
- package/types/weeehaoooz-talos-ui-form-date-range-picker.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-date-time-picker.d.ts +0 -44
- package/types/weeehaoooz-talos-ui-form-date-time-picker.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-date-time-range-picker.d.ts +0 -48
- package/types/weeehaoooz-talos-ui-form-date-time-range-picker.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-drop-zone.d.ts +0 -227
- package/types/weeehaoooz-talos-ui-form-drop-zone.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-form-field.d.ts +0 -42
- package/types/weeehaoooz-talos-ui-form-form-field.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-input.d.ts +0 -15
- package/types/weeehaoooz-talos-ui-form-input.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-otp.d.ts +0 -111
- package/types/weeehaoooz-talos-ui-form-otp.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-password-input.d.ts +0 -145
- package/types/weeehaoooz-talos-ui-form-password-input.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-radio.d.ts +0 -84
- package/types/weeehaoooz-talos-ui-form-radio.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-range-input.d.ts +0 -181
- package/types/weeehaoooz-talos-ui-form-range-input.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-rating.d.ts +0 -110
- package/types/weeehaoooz-talos-ui-form-rating.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-select-input.d.ts +0 -195
- package/types/weeehaoooz-talos-ui-form-select-input.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-slide-toggle.d.ts +0 -79
- package/types/weeehaoooz-talos-ui-form-slide-toggle.d.ts.map +0 -1
- package/types/weeehaoooz-talos-ui-form-transfer-list.d.ts +0 -192
- package/types/weeehaoooz-talos-ui-form-transfer-list.d.ts.map +0 -1
|
@@ -1,916 +0,0 @@
|
|
|
1
|
-
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, ElementRef, input, computed, output, signal, DestroyRef, effect, untracked, forwardRef, Component, NgModule } from '@angular/core';
|
|
3
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
4
|
-
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
6
|
-
import { Subject, of, isObservable, from } from 'rxjs';
|
|
7
|
-
import { debounceTime, distinctUntilChanged, switchMap, catchError } from 'rxjs/operators';
|
|
8
|
-
import { moveItemInArray, transferArrayItem, CdkDropListGroup, CdkDropList, CdkDrag, CdkDragPlaceholder, CdkDragPreview, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
9
|
-
import { LucideChevronRight, LucideChevronLeft, LucideChevronsRight, LucideChevronsLeft, LucideChevronUp, LucideChevronDown, LucideChevronsUp, LucideChevronsDown, LucideSearch, LucideX, LucideLoader2, LucideGripVertical } from '@lucide/angular';
|
|
10
|
-
|
|
11
|
-
let uniqueTransferListIdCounter = 0;
|
|
12
|
-
class TalosTransferListComponent {
|
|
13
|
-
elementRef = inject((ElementRef));
|
|
14
|
-
// Signal Inputs
|
|
15
|
-
source = input([], /* @ts-ignore */
|
|
16
|
-
...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
|
|
17
|
-
target = input([], /* @ts-ignore */
|
|
18
|
-
...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
|
|
19
|
-
titles = input(['Available', 'Selected'], /* @ts-ignore */
|
|
20
|
-
...(ngDevMode ? [{ debugName: "titles" }] : /* istanbul ignore next */ []));
|
|
21
|
-
searchable = input(true, /* @ts-ignore */
|
|
22
|
-
...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
|
|
23
|
-
searchMode = input('client', /* @ts-ignore */
|
|
24
|
-
...(ngDevMode ? [{ debugName: "searchMode" }] : /* istanbul ignore next */ []));
|
|
25
|
-
searchPlaceholder = input('Search items...', /* @ts-ignore */
|
|
26
|
-
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
27
|
-
sourceSearchQuery = input('', /* @ts-ignore */
|
|
28
|
-
...(ngDevMode ? [{ debugName: "sourceSearchQuery" }] : /* istanbul ignore next */ []));
|
|
29
|
-
targetSearchQuery = input('', /* @ts-ignore */
|
|
30
|
-
...(ngDevMode ? [{ debugName: "targetSearchQuery" }] : /* istanbul ignore next */ []));
|
|
31
|
-
searchDebounce = input(300, /* @ts-ignore */
|
|
32
|
-
...(ngDevMode ? [{ debugName: "searchDebounce" }] : /* istanbul ignore next */ []));
|
|
33
|
-
searchHandler = input(null, /* @ts-ignore */
|
|
34
|
-
...(ngDevMode ? [{ debugName: "searchHandler" }] : /* istanbul ignore next */ []));
|
|
35
|
-
sourceSearchHandler = input(null, /* @ts-ignore */
|
|
36
|
-
...(ngDevMode ? [{ debugName: "sourceSearchHandler" }] : /* istanbul ignore next */ []));
|
|
37
|
-
targetSearchHandler = input(null, /* @ts-ignore */
|
|
38
|
-
...(ngDevMode ? [{ debugName: "targetSearchHandler" }] : /* istanbul ignore next */ []));
|
|
39
|
-
sourceLoading = input(false, /* @ts-ignore */
|
|
40
|
-
...(ngDevMode ? [{ debugName: "sourceLoading" }] : /* istanbul ignore next */ []));
|
|
41
|
-
targetLoading = input(false, /* @ts-ignore */
|
|
42
|
-
...(ngDevMode ? [{ debugName: "targetLoading" }] : /* istanbul ignore next */ []));
|
|
43
|
-
loading = input(false, /* @ts-ignore */
|
|
44
|
-
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
45
|
-
disabled = input(false, /* @ts-ignore */
|
|
46
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
47
|
-
showSelectAll = input(true, /* @ts-ignore */
|
|
48
|
-
...(ngDevMode ? [{ debugName: "showSelectAll" }] : /* istanbul ignore next */ []));
|
|
49
|
-
showMoveAll = input(true, /* @ts-ignore */
|
|
50
|
-
...(ngDevMode ? [{ debugName: "showMoveAll" }] : /* istanbul ignore next */ []));
|
|
51
|
-
showReorder = input(false, /* @ts-ignore */
|
|
52
|
-
...(ngDevMode ? [{ debugName: "showReorder" }] : /* istanbul ignore next */ []));
|
|
53
|
-
dragDrop = input(true, /* @ts-ignore */
|
|
54
|
-
...(ngDevMode ? [{ debugName: "dragDrop" }] : /* istanbul ignore next */ []));
|
|
55
|
-
dragMode = input('handle', /* @ts-ignore */
|
|
56
|
-
...(ngDevMode ? [{ debugName: "dragMode" }] : /* istanbul ignore next */ []));
|
|
57
|
-
dragHandle = input(null, /* @ts-ignore */
|
|
58
|
-
...(ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []));
|
|
59
|
-
size = input('md', /* @ts-ignore */
|
|
60
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
61
|
-
variant = input('outlined', /* @ts-ignore */
|
|
62
|
-
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
63
|
-
height = input(null, /* @ts-ignore */
|
|
64
|
-
...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
65
|
-
listWidth = input(null, /* @ts-ignore */
|
|
66
|
-
...(ngDevMode ? [{ debugName: "listWidth" }] : /* istanbul ignore next */ []));
|
|
67
|
-
itemKey = input(null, /* @ts-ignore */
|
|
68
|
-
...(ngDevMode ? [{ debugName: "itemKey" }] : /* istanbul ignore next */ []));
|
|
69
|
-
itemLabel = input(null, /* @ts-ignore */
|
|
70
|
-
...(ngDevMode ? [{ debugName: "itemLabel" }] : /* istanbul ignore next */ []));
|
|
71
|
-
itemDescription = input(null, /* @ts-ignore */
|
|
72
|
-
...(ngDevMode ? [{ debugName: "itemDescription" }] : /* istanbul ignore next */ []));
|
|
73
|
-
itemDisabled = input(null, /* @ts-ignore */
|
|
74
|
-
...(ngDevMode ? [{ debugName: "itemDisabled" }] : /* istanbul ignore next */ []));
|
|
75
|
-
filterFn = input(null, /* @ts-ignore */
|
|
76
|
-
...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
|
|
77
|
-
itemTemplate = input(null, /* @ts-ignore */
|
|
78
|
-
...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
|
|
79
|
-
emptySourceText = input('No items available', /* @ts-ignore */
|
|
80
|
-
...(ngDevMode ? [{ debugName: "emptySourceText" }] : /* istanbul ignore next */ []));
|
|
81
|
-
emptyTargetText = input('No items selected', /* @ts-ignore */
|
|
82
|
-
...(ngDevMode ? [{ debugName: "emptyTargetText" }] : /* istanbul ignore next */ []));
|
|
83
|
-
searchingText = input('Searching remote catalog...', /* @ts-ignore */
|
|
84
|
-
...(ngDevMode ? [{ debugName: "searchingText" }] : /* istanbul ignore next */ []));
|
|
85
|
-
noMatchesText = input('No matches found for', /* @ts-ignore */
|
|
86
|
-
...(ngDevMode ? [{ debugName: "noMatchesText" }] : /* istanbul ignore next */ []));
|
|
87
|
-
id = input('', /* @ts-ignore */
|
|
88
|
-
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
89
|
-
// Computed Search States
|
|
90
|
-
isSourceSearching = computed(() => Boolean(this.internalSourceQuery().trim()), /* @ts-ignore */
|
|
91
|
-
...(ngDevMode ? [{ debugName: "isSourceSearching" }] : /* istanbul ignore next */ []));
|
|
92
|
-
isTargetSearching = computed(() => Boolean(this.internalTargetQuery().trim()), /* @ts-ignore */
|
|
93
|
-
...(ngDevMode ? [{ debugName: "isTargetSearching" }] : /* istanbul ignore next */ []));
|
|
94
|
-
// Computed Drag Handle mode
|
|
95
|
-
useDragHandle = computed(() => {
|
|
96
|
-
const customHandle = this.dragHandle();
|
|
97
|
-
if (customHandle !== null && customHandle !== undefined) {
|
|
98
|
-
return Boolean(customHandle);
|
|
99
|
-
}
|
|
100
|
-
return this.dragMode() === 'handle';
|
|
101
|
-
}, /* @ts-ignore */
|
|
102
|
-
...(ngDevMode ? [{ debugName: "useDragHandle" }] : /* istanbul ignore next */ []));
|
|
103
|
-
// Signal Outputs
|
|
104
|
-
sourceChange = output();
|
|
105
|
-
targetChange = output();
|
|
106
|
-
transfer = output();
|
|
107
|
-
search = output();
|
|
108
|
-
sourceSearchChange = output();
|
|
109
|
-
targetSearchChange = output();
|
|
110
|
-
searchError = output();
|
|
111
|
-
selectionChange = output();
|
|
112
|
-
targetReorder = output();
|
|
113
|
-
// Unique ID
|
|
114
|
-
autoId = `talos-transfer-list-${uniqueTransferListIdCounter++}`;
|
|
115
|
-
componentId = computed(() => this.id() || this.autoId, /* @ts-ignore */
|
|
116
|
-
...(ngDevMode ? [{ debugName: "componentId" }] : /* istanbul ignore next */ []));
|
|
117
|
-
// Form Control Value Accessor state
|
|
118
|
-
formDisabled = signal(false, /* @ts-ignore */
|
|
119
|
-
...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
|
|
120
|
-
effectiveDisabled = computed(() => this.disabled() || this.formDisabled(), /* @ts-ignore */
|
|
121
|
-
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
122
|
-
// Internal Data State
|
|
123
|
-
internalSource = signal([], /* @ts-ignore */
|
|
124
|
-
...(ngDevMode ? [{ debugName: "internalSource" }] : /* istanbul ignore next */ []));
|
|
125
|
-
internalTarget = signal([], /* @ts-ignore */
|
|
126
|
-
...(ngDevMode ? [{ debugName: "internalTarget" }] : /* istanbul ignore next */ []));
|
|
127
|
-
// Selection Sets
|
|
128
|
-
sourceSelectedKeys = signal(new Set(), /* @ts-ignore */
|
|
129
|
-
...(ngDevMode ? [{ debugName: "sourceSelectedKeys" }] : /* istanbul ignore next */ []));
|
|
130
|
-
targetSelectedKeys = signal(new Set(), /* @ts-ignore */
|
|
131
|
-
...(ngDevMode ? [{ debugName: "targetSelectedKeys" }] : /* istanbul ignore next */ []));
|
|
132
|
-
// Search Queries & State
|
|
133
|
-
internalSourceQuery = signal('', /* @ts-ignore */
|
|
134
|
-
...(ngDevMode ? [{ debugName: "internalSourceQuery" }] : /* istanbul ignore next */ []));
|
|
135
|
-
internalTargetQuery = signal('', /* @ts-ignore */
|
|
136
|
-
...(ngDevMode ? [{ debugName: "internalTargetQuery" }] : /* istanbul ignore next */ []));
|
|
137
|
-
internalSourceLoading = signal(false, /* @ts-ignore */
|
|
138
|
-
...(ngDevMode ? [{ debugName: "internalSourceLoading" }] : /* istanbul ignore next */ []));
|
|
139
|
-
internalTargetLoading = signal(false, /* @ts-ignore */
|
|
140
|
-
...(ngDevMode ? [{ debugName: "internalTargetLoading" }] : /* istanbul ignore next */ []));
|
|
141
|
-
effectiveSourceLoading = computed(() => this.sourceLoading() || this.internalSourceLoading(), /* @ts-ignore */
|
|
142
|
-
...(ngDevMode ? [{ debugName: "effectiveSourceLoading" }] : /* istanbul ignore next */ []));
|
|
143
|
-
effectiveTargetLoading = computed(() => this.targetLoading() || this.internalTargetLoading(), /* @ts-ignore */
|
|
144
|
-
...(ngDevMode ? [{ debugName: "effectiveTargetLoading" }] : /* istanbul ignore next */ []));
|
|
145
|
-
// Debounced Search Subjects
|
|
146
|
-
sourceSearchSubject$ = new Subject();
|
|
147
|
-
targetSearchSubject$ = new Subject();
|
|
148
|
-
destroyRef = inject(DestroyRef);
|
|
149
|
-
// CVA callbacks
|
|
150
|
-
onChange = () => { };
|
|
151
|
-
onTouched = () => { };
|
|
152
|
-
constructor() {
|
|
153
|
-
// Sync external source
|
|
154
|
-
effect(() => {
|
|
155
|
-
const src = this.source();
|
|
156
|
-
untracked(() => {
|
|
157
|
-
this.internalSource.set(Array.isArray(src) ? [...src] : []);
|
|
158
|
-
this.pruneSelections();
|
|
159
|
-
});
|
|
160
|
-
});
|
|
161
|
-
// Sync external target
|
|
162
|
-
effect(() => {
|
|
163
|
-
const tgt = this.target();
|
|
164
|
-
untracked(() => {
|
|
165
|
-
this.internalTarget.set(Array.isArray(tgt) ? [...tgt] : []);
|
|
166
|
-
this.pruneSelections();
|
|
167
|
-
});
|
|
168
|
-
});
|
|
169
|
-
// Sync external search queries
|
|
170
|
-
effect(() => {
|
|
171
|
-
const q = this.sourceSearchQuery();
|
|
172
|
-
untracked(() => this.internalSourceQuery.set(q));
|
|
173
|
-
});
|
|
174
|
-
effect(() => {
|
|
175
|
-
const q = this.targetSearchQuery();
|
|
176
|
-
untracked(() => this.internalTargetQuery.set(q));
|
|
177
|
-
});
|
|
178
|
-
// Setup debounced server search pipeline
|
|
179
|
-
this.sourceSearchSubject$
|
|
180
|
-
.pipe(debounceTime(this.searchDebounce()), distinctUntilChanged(), switchMap(query => this.processSearchRequest(query, 'source')), takeUntilDestroyed(this.destroyRef))
|
|
181
|
-
.subscribe();
|
|
182
|
-
this.targetSearchSubject$
|
|
183
|
-
.pipe(debounceTime(this.searchDebounce()), distinctUntilChanged(), switchMap(query => this.processSearchRequest(query, 'target')), takeUntilDestroyed(this.destroyRef))
|
|
184
|
-
.subscribe();
|
|
185
|
-
}
|
|
186
|
-
// Placeholders
|
|
187
|
-
sourcePlaceholder = computed(() => {
|
|
188
|
-
const p = this.searchPlaceholder();
|
|
189
|
-
return Array.isArray(p) ? p[0] : p;
|
|
190
|
-
}, /* @ts-ignore */
|
|
191
|
-
...(ngDevMode ? [{ debugName: "sourcePlaceholder" }] : /* istanbul ignore next */ []));
|
|
192
|
-
targetPlaceholder = computed(() => {
|
|
193
|
-
const p = this.searchPlaceholder();
|
|
194
|
-
return Array.isArray(p) ? p[1] : p;
|
|
195
|
-
}, /* @ts-ignore */
|
|
196
|
-
...(ngDevMode ? [{ debugName: "targetPlaceholder" }] : /* istanbul ignore next */ []));
|
|
197
|
-
containerHeight = computed(() => {
|
|
198
|
-
const h = this.height();
|
|
199
|
-
if (h !== null && h !== undefined) {
|
|
200
|
-
return typeof h === 'number' ? `${h}px` : h;
|
|
201
|
-
}
|
|
202
|
-
switch (this.size()) {
|
|
203
|
-
case 'sm':
|
|
204
|
-
return '260px';
|
|
205
|
-
case 'lg':
|
|
206
|
-
return '380px';
|
|
207
|
-
case 'md':
|
|
208
|
-
default:
|
|
209
|
-
return '320px';
|
|
210
|
-
}
|
|
211
|
-
}, /* @ts-ignore */
|
|
212
|
-
...(ngDevMode ? [{ debugName: "containerHeight" }] : /* istanbul ignore next */ []));
|
|
213
|
-
effectivePaneWidth = computed(() => {
|
|
214
|
-
const w = this.listWidth();
|
|
215
|
-
if (w !== null && w !== undefined) {
|
|
216
|
-
return typeof w === 'number' ? `${w}px` : w;
|
|
217
|
-
}
|
|
218
|
-
return null;
|
|
219
|
-
}, /* @ts-ignore */
|
|
220
|
-
...(ngDevMode ? [{ debugName: "effectivePaneWidth" }] : /* istanbul ignore next */ []));
|
|
221
|
-
// Key / Label / Disabled extractors
|
|
222
|
-
getItemKey(item, fallbackIndex = 0) {
|
|
223
|
-
if (item === null || item === undefined)
|
|
224
|
-
return fallbackIndex;
|
|
225
|
-
const keyProp = this.itemKey();
|
|
226
|
-
if (typeof keyProp === 'function') {
|
|
227
|
-
return keyProp(item);
|
|
228
|
-
}
|
|
229
|
-
if (typeof keyProp === 'string' && item && typeof item === 'object') {
|
|
230
|
-
const val = item[keyProp];
|
|
231
|
-
if (val !== undefined && val !== null)
|
|
232
|
-
return String(val);
|
|
233
|
-
}
|
|
234
|
-
if (typeof item === 'object') {
|
|
235
|
-
const rec = item;
|
|
236
|
-
if (rec['id'] !== undefined && rec['id'] !== null)
|
|
237
|
-
return String(rec['id']);
|
|
238
|
-
if (rec['key'] !== undefined && rec['key'] !== null)
|
|
239
|
-
return String(rec['key']);
|
|
240
|
-
if (rec['value'] !== undefined && rec['value'] !== null)
|
|
241
|
-
return String(rec['value']);
|
|
242
|
-
}
|
|
243
|
-
return String(item);
|
|
244
|
-
}
|
|
245
|
-
getItemLabel(item) {
|
|
246
|
-
if (item === null || item === undefined)
|
|
247
|
-
return '';
|
|
248
|
-
const labelProp = this.itemLabel();
|
|
249
|
-
if (typeof labelProp === 'function') {
|
|
250
|
-
return labelProp(item);
|
|
251
|
-
}
|
|
252
|
-
if (typeof labelProp === 'string' && item && typeof item === 'object') {
|
|
253
|
-
const val = item[labelProp];
|
|
254
|
-
if (val !== undefined && val !== null)
|
|
255
|
-
return String(val);
|
|
256
|
-
}
|
|
257
|
-
if (typeof item === 'object') {
|
|
258
|
-
const rec = item;
|
|
259
|
-
if (rec['label'] !== undefined)
|
|
260
|
-
return String(rec['label']);
|
|
261
|
-
if (rec['name'] !== undefined)
|
|
262
|
-
return String(rec['name']);
|
|
263
|
-
if (rec['title'] !== undefined)
|
|
264
|
-
return String(rec['title']);
|
|
265
|
-
}
|
|
266
|
-
return String(item);
|
|
267
|
-
}
|
|
268
|
-
getItemDescription(item) {
|
|
269
|
-
if (item === null || item === undefined)
|
|
270
|
-
return undefined;
|
|
271
|
-
const descProp = this.itemDescription();
|
|
272
|
-
if (typeof descProp === 'function') {
|
|
273
|
-
return descProp(item);
|
|
274
|
-
}
|
|
275
|
-
if (typeof descProp === 'string' && item && typeof item === 'object') {
|
|
276
|
-
const val = item[descProp];
|
|
277
|
-
if (val !== undefined && val !== null)
|
|
278
|
-
return String(val);
|
|
279
|
-
}
|
|
280
|
-
if (typeof item === 'object') {
|
|
281
|
-
const rec = item;
|
|
282
|
-
if (rec['description'] !== undefined)
|
|
283
|
-
return String(rec['description']);
|
|
284
|
-
}
|
|
285
|
-
return undefined;
|
|
286
|
-
}
|
|
287
|
-
isItemDisabled(item) {
|
|
288
|
-
if (this.effectiveDisabled())
|
|
289
|
-
return true;
|
|
290
|
-
if (item === null || item === undefined)
|
|
291
|
-
return false;
|
|
292
|
-
const disProp = this.itemDisabled();
|
|
293
|
-
if (typeof disProp === 'function') {
|
|
294
|
-
return disProp(item);
|
|
295
|
-
}
|
|
296
|
-
if (typeof disProp === 'string' && item && typeof item === 'object') {
|
|
297
|
-
return Boolean(item[disProp]);
|
|
298
|
-
}
|
|
299
|
-
if (typeof item === 'object') {
|
|
300
|
-
const rec = item;
|
|
301
|
-
if (rec['disabled'] !== undefined)
|
|
302
|
-
return Boolean(rec['disabled']);
|
|
303
|
-
}
|
|
304
|
-
return false;
|
|
305
|
-
}
|
|
306
|
-
// Filtered Source & Target
|
|
307
|
-
filteredSource = computed(() => {
|
|
308
|
-
const list = this.internalSource();
|
|
309
|
-
if (this.searchMode() === 'server')
|
|
310
|
-
return list;
|
|
311
|
-
const q = this.internalSourceQuery().trim().toLowerCase();
|
|
312
|
-
if (!q)
|
|
313
|
-
return list;
|
|
314
|
-
const customFilter = this.filterFn();
|
|
315
|
-
if (customFilter) {
|
|
316
|
-
return list.filter(item => customFilter(item, q, 'source'));
|
|
317
|
-
}
|
|
318
|
-
return list.filter(item => {
|
|
319
|
-
const label = this.getItemLabel(item).toLowerCase();
|
|
320
|
-
const desc = (this.getItemDescription(item) || '').toLowerCase();
|
|
321
|
-
return label.includes(q) || desc.includes(q);
|
|
322
|
-
});
|
|
323
|
-
}, /* @ts-ignore */
|
|
324
|
-
...(ngDevMode ? [{ debugName: "filteredSource" }] : /* istanbul ignore next */ []));
|
|
325
|
-
filteredTarget = computed(() => {
|
|
326
|
-
const list = this.internalTarget();
|
|
327
|
-
if (this.searchMode() === 'server')
|
|
328
|
-
return list;
|
|
329
|
-
const q = this.internalTargetQuery().trim().toLowerCase();
|
|
330
|
-
if (!q)
|
|
331
|
-
return list;
|
|
332
|
-
const customFilter = this.filterFn();
|
|
333
|
-
if (customFilter) {
|
|
334
|
-
return list.filter(item => customFilter(item, q, 'target'));
|
|
335
|
-
}
|
|
336
|
-
return list.filter(item => {
|
|
337
|
-
const label = this.getItemLabel(item).toLowerCase();
|
|
338
|
-
const desc = (this.getItemDescription(item) || '').toLowerCase();
|
|
339
|
-
return label.includes(q) || desc.includes(q);
|
|
340
|
-
});
|
|
341
|
-
}, /* @ts-ignore */
|
|
342
|
-
...(ngDevMode ? [{ debugName: "filteredTarget" }] : /* istanbul ignore next */ []));
|
|
343
|
-
// Source Stats
|
|
344
|
-
sourceSelectedCount = computed(() => {
|
|
345
|
-
const sel = this.sourceSelectedKeys();
|
|
346
|
-
let count = 0;
|
|
347
|
-
for (const item of this.filteredSource()) {
|
|
348
|
-
if (sel.has(this.getItemKey(item)))
|
|
349
|
-
count++;
|
|
350
|
-
}
|
|
351
|
-
return count;
|
|
352
|
-
}, /* @ts-ignore */
|
|
353
|
-
...(ngDevMode ? [{ debugName: "sourceSelectedCount" }] : /* istanbul ignore next */ []));
|
|
354
|
-
isSourceAllSelected = computed(() => {
|
|
355
|
-
const list = this.filteredSource().filter(item => !this.isItemDisabled(item));
|
|
356
|
-
if (list.length === 0)
|
|
357
|
-
return false;
|
|
358
|
-
const sel = this.sourceSelectedKeys();
|
|
359
|
-
return list.every(item => sel.has(this.getItemKey(item)));
|
|
360
|
-
}, /* @ts-ignore */
|
|
361
|
-
...(ngDevMode ? [{ debugName: "isSourceAllSelected" }] : /* istanbul ignore next */ []));
|
|
362
|
-
isSourceIndeterminate = computed(() => {
|
|
363
|
-
const list = this.filteredSource().filter(item => !this.isItemDisabled(item));
|
|
364
|
-
if (list.length === 0)
|
|
365
|
-
return false;
|
|
366
|
-
const selCount = this.sourceSelectedCount();
|
|
367
|
-
return selCount > 0 && selCount < list.length;
|
|
368
|
-
}, /* @ts-ignore */
|
|
369
|
-
...(ngDevMode ? [{ debugName: "isSourceIndeterminate" }] : /* istanbul ignore next */ []));
|
|
370
|
-
// Target Stats
|
|
371
|
-
targetSelectedCount = computed(() => {
|
|
372
|
-
const sel = this.targetSelectedKeys();
|
|
373
|
-
let count = 0;
|
|
374
|
-
for (const item of this.filteredTarget()) {
|
|
375
|
-
if (sel.has(this.getItemKey(item)))
|
|
376
|
-
count++;
|
|
377
|
-
}
|
|
378
|
-
return count;
|
|
379
|
-
}, /* @ts-ignore */
|
|
380
|
-
...(ngDevMode ? [{ debugName: "targetSelectedCount" }] : /* istanbul ignore next */ []));
|
|
381
|
-
isTargetAllSelected = computed(() => {
|
|
382
|
-
const list = this.filteredTarget().filter(item => !this.isItemDisabled(item));
|
|
383
|
-
if (list.length === 0)
|
|
384
|
-
return false;
|
|
385
|
-
const sel = this.targetSelectedKeys();
|
|
386
|
-
return list.every(item => sel.has(this.getItemKey(item)));
|
|
387
|
-
}, /* @ts-ignore */
|
|
388
|
-
...(ngDevMode ? [{ debugName: "isTargetAllSelected" }] : /* istanbul ignore next */ []));
|
|
389
|
-
isTargetIndeterminate = computed(() => {
|
|
390
|
-
const list = this.filteredTarget().filter(item => !this.isItemDisabled(item));
|
|
391
|
-
if (list.length === 0)
|
|
392
|
-
return false;
|
|
393
|
-
const selCount = this.targetSelectedCount();
|
|
394
|
-
return selCount > 0 && selCount < list.length;
|
|
395
|
-
}, /* @ts-ignore */
|
|
396
|
-
...(ngDevMode ? [{ debugName: "isTargetIndeterminate" }] : /* istanbul ignore next */ []));
|
|
397
|
-
// Item Context Generator
|
|
398
|
-
getItemContext(item, pane, index) {
|
|
399
|
-
const key = this.getItemKey(item, index);
|
|
400
|
-
const sel = pane === 'source' ? this.sourceSelectedKeys() : this.targetSelectedKeys();
|
|
401
|
-
return {
|
|
402
|
-
$implicit: item,
|
|
403
|
-
item,
|
|
404
|
-
pane,
|
|
405
|
-
selected: sel.has(key),
|
|
406
|
-
disabled: this.isItemDisabled(item),
|
|
407
|
-
index
|
|
408
|
-
};
|
|
409
|
-
}
|
|
410
|
-
// Selection Toggles
|
|
411
|
-
toggleSourceItem(item) {
|
|
412
|
-
if (this.isItemDisabled(item))
|
|
413
|
-
return;
|
|
414
|
-
const key = this.getItemKey(item);
|
|
415
|
-
this.sourceSelectedKeys.update(set => {
|
|
416
|
-
const next = new Set(set);
|
|
417
|
-
if (next.has(key))
|
|
418
|
-
next.delete(key);
|
|
419
|
-
else
|
|
420
|
-
next.add(key);
|
|
421
|
-
return next;
|
|
422
|
-
});
|
|
423
|
-
this.emitSelectionChange();
|
|
424
|
-
}
|
|
425
|
-
toggleTargetItem(item) {
|
|
426
|
-
if (this.isItemDisabled(item))
|
|
427
|
-
return;
|
|
428
|
-
const key = this.getItemKey(item);
|
|
429
|
-
this.targetSelectedKeys.update(set => {
|
|
430
|
-
const next = new Set(set);
|
|
431
|
-
if (next.has(key))
|
|
432
|
-
next.delete(key);
|
|
433
|
-
else
|
|
434
|
-
next.add(key);
|
|
435
|
-
return next;
|
|
436
|
-
});
|
|
437
|
-
this.emitSelectionChange();
|
|
438
|
-
}
|
|
439
|
-
toggleSelectAllSource() {
|
|
440
|
-
if (this.effectiveDisabled())
|
|
441
|
-
return;
|
|
442
|
-
const list = this.filteredSource().filter(item => !this.isItemDisabled(item));
|
|
443
|
-
if (this.isSourceAllSelected()) {
|
|
444
|
-
// Unselect all in visible source
|
|
445
|
-
this.sourceSelectedKeys.update(set => {
|
|
446
|
-
const next = new Set(set);
|
|
447
|
-
for (const item of list)
|
|
448
|
-
next.delete(this.getItemKey(item));
|
|
449
|
-
return next;
|
|
450
|
-
});
|
|
451
|
-
}
|
|
452
|
-
else {
|
|
453
|
-
// Select all in visible source
|
|
454
|
-
this.sourceSelectedKeys.update(set => {
|
|
455
|
-
const next = new Set(set);
|
|
456
|
-
for (const item of list)
|
|
457
|
-
next.add(this.getItemKey(item));
|
|
458
|
-
return next;
|
|
459
|
-
});
|
|
460
|
-
}
|
|
461
|
-
this.emitSelectionChange();
|
|
462
|
-
}
|
|
463
|
-
toggleSelectAllTarget() {
|
|
464
|
-
if (this.effectiveDisabled())
|
|
465
|
-
return;
|
|
466
|
-
const list = this.filteredTarget().filter(item => !this.isItemDisabled(item));
|
|
467
|
-
if (this.isTargetAllSelected()) {
|
|
468
|
-
this.targetSelectedKeys.update(set => {
|
|
469
|
-
const next = new Set(set);
|
|
470
|
-
for (const item of list)
|
|
471
|
-
next.delete(this.getItemKey(item));
|
|
472
|
-
return next;
|
|
473
|
-
});
|
|
474
|
-
}
|
|
475
|
-
else {
|
|
476
|
-
this.targetSelectedKeys.update(set => {
|
|
477
|
-
const next = new Set(set);
|
|
478
|
-
for (const item of list)
|
|
479
|
-
next.add(this.getItemKey(item));
|
|
480
|
-
return next;
|
|
481
|
-
});
|
|
482
|
-
}
|
|
483
|
-
this.emitSelectionChange();
|
|
484
|
-
}
|
|
485
|
-
emitSelectionChange() {
|
|
486
|
-
const srcSelKeys = Array.from(this.sourceSelectedKeys());
|
|
487
|
-
const tgtSelKeys = Array.from(this.targetSelectedKeys());
|
|
488
|
-
const srcMap = new Map(this.internalSource().map(i => [this.getItemKey(i), i]));
|
|
489
|
-
const tgtMap = new Map(this.internalTarget().map(i => [this.getItemKey(i), i]));
|
|
490
|
-
const sourceSelected = srcSelKeys.map(k => srcMap.get(k)).filter((i) => i !== undefined);
|
|
491
|
-
const targetSelected = tgtSelKeys.map(k => tgtMap.get(k)).filter((i) => i !== undefined);
|
|
492
|
-
this.selectionChange.emit({
|
|
493
|
-
sourceSelected,
|
|
494
|
-
targetSelected,
|
|
495
|
-
sourceSelectedKeys: srcSelKeys,
|
|
496
|
-
targetSelectedKeys: tgtSelKeys
|
|
497
|
-
});
|
|
498
|
-
}
|
|
499
|
-
pruneSelections() {
|
|
500
|
-
const srcKeys = new Set(this.internalSource().map(i => this.getItemKey(i)));
|
|
501
|
-
const tgtKeys = new Set(this.internalTarget().map(i => this.getItemKey(i)));
|
|
502
|
-
this.sourceSelectedKeys.update(set => {
|
|
503
|
-
const next = new Set();
|
|
504
|
-
for (const k of set) {
|
|
505
|
-
if (srcKeys.has(k))
|
|
506
|
-
next.add(k);
|
|
507
|
-
}
|
|
508
|
-
return next;
|
|
509
|
-
});
|
|
510
|
-
this.targetSelectedKeys.update(set => {
|
|
511
|
-
const next = new Set();
|
|
512
|
-
for (const k of set) {
|
|
513
|
-
if (tgtKeys.has(k))
|
|
514
|
-
next.add(k);
|
|
515
|
-
}
|
|
516
|
-
return next;
|
|
517
|
-
});
|
|
518
|
-
}
|
|
519
|
-
// Search Handlers
|
|
520
|
-
onSourceSearch(value) {
|
|
521
|
-
this.internalSourceQuery.set(value);
|
|
522
|
-
if (this.searchMode() === 'server') {
|
|
523
|
-
this.sourceSearchSubject$.next(value);
|
|
524
|
-
}
|
|
525
|
-
else {
|
|
526
|
-
this.sourceSearchChange.emit(value);
|
|
527
|
-
this.search.emit({ query: value, pane: 'source' });
|
|
528
|
-
}
|
|
529
|
-
}
|
|
530
|
-
onTargetSearch(value) {
|
|
531
|
-
this.internalTargetQuery.set(value);
|
|
532
|
-
if (this.searchMode() === 'server') {
|
|
533
|
-
this.targetSearchSubject$.next(value);
|
|
534
|
-
}
|
|
535
|
-
else {
|
|
536
|
-
this.targetSearchChange.emit(value);
|
|
537
|
-
this.search.emit({ query: value, pane: 'target' });
|
|
538
|
-
}
|
|
539
|
-
}
|
|
540
|
-
clearSourceSearch() {
|
|
541
|
-
this.onSourceSearch('');
|
|
542
|
-
}
|
|
543
|
-
clearTargetSearch() {
|
|
544
|
-
this.onTargetSearch('');
|
|
545
|
-
}
|
|
546
|
-
/**
|
|
547
|
-
* Process asynchronous server-side search request via configured handlers.
|
|
548
|
-
*/
|
|
549
|
-
processSearchRequest(query, pane) {
|
|
550
|
-
this.search.emit({ query, pane });
|
|
551
|
-
if (pane === 'source') {
|
|
552
|
-
this.sourceSearchChange.emit(query);
|
|
553
|
-
}
|
|
554
|
-
else {
|
|
555
|
-
this.targetSearchChange.emit(query);
|
|
556
|
-
}
|
|
557
|
-
const handler = pane === 'source'
|
|
558
|
-
? (this.sourceSearchHandler() || this.searchHandler())
|
|
559
|
-
: (this.targetSearchHandler() || this.searchHandler());
|
|
560
|
-
if (!handler) {
|
|
561
|
-
return of(null);
|
|
562
|
-
}
|
|
563
|
-
if (pane === 'source')
|
|
564
|
-
this.internalSourceLoading.set(true);
|
|
565
|
-
else
|
|
566
|
-
this.internalTargetLoading.set(true);
|
|
567
|
-
try {
|
|
568
|
-
const result = handler(query, pane);
|
|
569
|
-
const obs$ = isObservable(result)
|
|
570
|
-
? result
|
|
571
|
-
: from(Promise.resolve(result));
|
|
572
|
-
return obs$.pipe(switchMap(items => {
|
|
573
|
-
if (Array.isArray(items)) {
|
|
574
|
-
if (pane === 'source') {
|
|
575
|
-
this.internalSource.set([...items]);
|
|
576
|
-
this.sourceChange.emit([...items]);
|
|
577
|
-
}
|
|
578
|
-
else {
|
|
579
|
-
this.internalTarget.set([...items]);
|
|
580
|
-
this.targetChange.emit([...items]);
|
|
581
|
-
}
|
|
582
|
-
this.pruneSelections();
|
|
583
|
-
}
|
|
584
|
-
if (pane === 'source')
|
|
585
|
-
this.internalSourceLoading.set(false);
|
|
586
|
-
else
|
|
587
|
-
this.internalTargetLoading.set(false);
|
|
588
|
-
return of(items);
|
|
589
|
-
}), catchError(err => {
|
|
590
|
-
if (pane === 'source')
|
|
591
|
-
this.internalSourceLoading.set(false);
|
|
592
|
-
else
|
|
593
|
-
this.internalTargetLoading.set(false);
|
|
594
|
-
this.searchError.emit({ error: err, query, pane });
|
|
595
|
-
return of(null);
|
|
596
|
-
}));
|
|
597
|
-
}
|
|
598
|
-
catch (err) {
|
|
599
|
-
if (pane === 'source')
|
|
600
|
-
this.internalSourceLoading.set(false);
|
|
601
|
-
else
|
|
602
|
-
this.internalTargetLoading.set(false);
|
|
603
|
-
this.searchError.emit({ error: err, query, pane });
|
|
604
|
-
return of(null);
|
|
605
|
-
}
|
|
606
|
-
}
|
|
607
|
-
// Move Actions
|
|
608
|
-
moveToTarget() {
|
|
609
|
-
if (this.effectiveDisabled() || this.sourceSelectedCount() === 0)
|
|
610
|
-
return;
|
|
611
|
-
const sel = this.sourceSelectedKeys();
|
|
612
|
-
const currentSource = this.internalSource();
|
|
613
|
-
const currentTarget = this.internalTarget();
|
|
614
|
-
const moved = [];
|
|
615
|
-
const remainingSource = [];
|
|
616
|
-
for (const item of currentSource) {
|
|
617
|
-
if (sel.has(this.getItemKey(item)) && !this.isItemDisabled(item)) {
|
|
618
|
-
moved.push(item);
|
|
619
|
-
}
|
|
620
|
-
else {
|
|
621
|
-
remainingSource.push(item);
|
|
622
|
-
}
|
|
623
|
-
}
|
|
624
|
-
if (moved.length === 0)
|
|
625
|
-
return;
|
|
626
|
-
const newTarget = [...currentTarget, ...moved];
|
|
627
|
-
this.internalSource.set(remainingSource);
|
|
628
|
-
this.internalTarget.set(newTarget);
|
|
629
|
-
this.sourceSelectedKeys.set(new Set());
|
|
630
|
-
this.notifyChanges(remainingSource, newTarget, moved, 'toTarget');
|
|
631
|
-
}
|
|
632
|
-
moveAllToTarget() {
|
|
633
|
-
if (this.effectiveDisabled() || this.filteredSource().length === 0)
|
|
634
|
-
return;
|
|
635
|
-
const currentSource = this.internalSource();
|
|
636
|
-
const currentTarget = this.internalTarget();
|
|
637
|
-
const visibleKeys = new Set(this.filteredSource().map(i => this.getItemKey(i)));
|
|
638
|
-
const moved = [];
|
|
639
|
-
const remainingSource = [];
|
|
640
|
-
for (const item of currentSource) {
|
|
641
|
-
if (visibleKeys.has(this.getItemKey(item)) && !this.isItemDisabled(item)) {
|
|
642
|
-
moved.push(item);
|
|
643
|
-
}
|
|
644
|
-
else {
|
|
645
|
-
remainingSource.push(item);
|
|
646
|
-
}
|
|
647
|
-
}
|
|
648
|
-
if (moved.length === 0)
|
|
649
|
-
return;
|
|
650
|
-
const newTarget = [...currentTarget, ...moved];
|
|
651
|
-
this.internalSource.set(remainingSource);
|
|
652
|
-
this.internalTarget.set(newTarget);
|
|
653
|
-
this.sourceSelectedKeys.set(new Set());
|
|
654
|
-
this.notifyChanges(remainingSource, newTarget, moved, 'toTarget');
|
|
655
|
-
}
|
|
656
|
-
moveToSource() {
|
|
657
|
-
if (this.effectiveDisabled() || this.targetSelectedCount() === 0)
|
|
658
|
-
return;
|
|
659
|
-
const sel = this.targetSelectedKeys();
|
|
660
|
-
const currentSource = this.internalSource();
|
|
661
|
-
const currentTarget = this.internalTarget();
|
|
662
|
-
const moved = [];
|
|
663
|
-
const remainingTarget = [];
|
|
664
|
-
for (const item of currentTarget) {
|
|
665
|
-
if (sel.has(this.getItemKey(item)) && !this.isItemDisabled(item)) {
|
|
666
|
-
moved.push(item);
|
|
667
|
-
}
|
|
668
|
-
else {
|
|
669
|
-
remainingTarget.push(item);
|
|
670
|
-
}
|
|
671
|
-
}
|
|
672
|
-
if (moved.length === 0)
|
|
673
|
-
return;
|
|
674
|
-
const newSource = [...currentSource, ...moved];
|
|
675
|
-
this.internalSource.set(newSource);
|
|
676
|
-
this.internalTarget.set(remainingTarget);
|
|
677
|
-
this.targetSelectedKeys.set(new Set());
|
|
678
|
-
this.notifyChanges(newSource, remainingTarget, moved, 'toSource');
|
|
679
|
-
}
|
|
680
|
-
moveAllToSource() {
|
|
681
|
-
if (this.effectiveDisabled() || this.filteredTarget().length === 0)
|
|
682
|
-
return;
|
|
683
|
-
const currentSource = this.internalSource();
|
|
684
|
-
const currentTarget = this.internalTarget();
|
|
685
|
-
const visibleKeys = new Set(this.filteredTarget().map(i => this.getItemKey(i)));
|
|
686
|
-
const moved = [];
|
|
687
|
-
const remainingTarget = [];
|
|
688
|
-
for (const item of currentTarget) {
|
|
689
|
-
if (visibleKeys.has(this.getItemKey(item)) && !this.isItemDisabled(item)) {
|
|
690
|
-
moved.push(item);
|
|
691
|
-
}
|
|
692
|
-
else {
|
|
693
|
-
remainingTarget.push(item);
|
|
694
|
-
}
|
|
695
|
-
}
|
|
696
|
-
if (moved.length === 0)
|
|
697
|
-
return;
|
|
698
|
-
const newSource = [...currentSource, ...moved];
|
|
699
|
-
this.internalSource.set(newSource);
|
|
700
|
-
this.internalTarget.set(remainingTarget);
|
|
701
|
-
this.targetSelectedKeys.set(new Set());
|
|
702
|
-
this.notifyChanges(newSource, remainingTarget, moved, 'toSource');
|
|
703
|
-
}
|
|
704
|
-
// Reordering Actions for Target List
|
|
705
|
-
moveTargetTop() {
|
|
706
|
-
if (this.effectiveDisabled() || this.targetSelectedCount() === 0)
|
|
707
|
-
return;
|
|
708
|
-
const sel = this.targetSelectedKeys();
|
|
709
|
-
const list = [...this.internalTarget()];
|
|
710
|
-
const selected = [];
|
|
711
|
-
const unselected = [];
|
|
712
|
-
for (const item of list) {
|
|
713
|
-
if (sel.has(this.getItemKey(item)))
|
|
714
|
-
selected.push(item);
|
|
715
|
-
else
|
|
716
|
-
unselected.push(item);
|
|
717
|
-
}
|
|
718
|
-
const reordered = [...selected, ...unselected];
|
|
719
|
-
this.internalTarget.set(reordered);
|
|
720
|
-
this.targetReorder.emit(reordered);
|
|
721
|
-
this.notifyChanges(this.internalSource(), reordered, [], 'toTarget');
|
|
722
|
-
}
|
|
723
|
-
moveTargetUp() {
|
|
724
|
-
if (this.effectiveDisabled() || this.targetSelectedCount() === 0)
|
|
725
|
-
return;
|
|
726
|
-
const sel = this.targetSelectedKeys();
|
|
727
|
-
const list = [...this.internalTarget()];
|
|
728
|
-
for (let i = 1; i < list.length; i++) {
|
|
729
|
-
const item = list[i];
|
|
730
|
-
if (item && sel.has(this.getItemKey(item))) {
|
|
731
|
-
const prevItem = list[i - 1];
|
|
732
|
-
if (prevItem && !sel.has(this.getItemKey(prevItem))) {
|
|
733
|
-
list[i] = prevItem;
|
|
734
|
-
list[i - 1] = item;
|
|
735
|
-
}
|
|
736
|
-
}
|
|
737
|
-
}
|
|
738
|
-
this.internalTarget.set(list);
|
|
739
|
-
this.targetReorder.emit(list);
|
|
740
|
-
this.notifyChanges(this.internalSource(), list, [], 'toTarget');
|
|
741
|
-
}
|
|
742
|
-
moveTargetDown() {
|
|
743
|
-
if (this.effectiveDisabled() || this.targetSelectedCount() === 0)
|
|
744
|
-
return;
|
|
745
|
-
const sel = this.targetSelectedKeys();
|
|
746
|
-
const list = [...this.internalTarget()];
|
|
747
|
-
for (let i = list.length - 2; i >= 0; i--) {
|
|
748
|
-
const item = list[i];
|
|
749
|
-
if (item && sel.has(this.getItemKey(item))) {
|
|
750
|
-
const nextItem = list[i + 1];
|
|
751
|
-
if (nextItem && !sel.has(this.getItemKey(nextItem))) {
|
|
752
|
-
list[i] = nextItem;
|
|
753
|
-
list[i + 1] = item;
|
|
754
|
-
}
|
|
755
|
-
}
|
|
756
|
-
}
|
|
757
|
-
this.internalTarget.set(list);
|
|
758
|
-
this.targetReorder.emit(list);
|
|
759
|
-
this.notifyChanges(this.internalSource(), list, [], 'toTarget');
|
|
760
|
-
}
|
|
761
|
-
moveTargetBottom() {
|
|
762
|
-
if (this.effectiveDisabled() || this.targetSelectedCount() === 0)
|
|
763
|
-
return;
|
|
764
|
-
const sel = this.targetSelectedKeys();
|
|
765
|
-
const list = [...this.internalTarget()];
|
|
766
|
-
const selected = [];
|
|
767
|
-
const unselected = [];
|
|
768
|
-
for (const item of list) {
|
|
769
|
-
if (sel.has(this.getItemKey(item)))
|
|
770
|
-
selected.push(item);
|
|
771
|
-
else
|
|
772
|
-
unselected.push(item);
|
|
773
|
-
}
|
|
774
|
-
const reordered = [...unselected, ...selected];
|
|
775
|
-
this.internalTarget.set(reordered);
|
|
776
|
-
this.targetReorder.emit(reordered);
|
|
777
|
-
this.notifyChanges(this.internalSource(), reordered, [], 'toTarget');
|
|
778
|
-
}
|
|
779
|
-
// CDK Drag and Drop
|
|
780
|
-
onCdkDrop(event) {
|
|
781
|
-
if (this.effectiveDisabled())
|
|
782
|
-
return;
|
|
783
|
-
if (event.previousContainer === event.container) {
|
|
784
|
-
// Reordering within the same list
|
|
785
|
-
const list = [...event.container.data];
|
|
786
|
-
moveItemInArray(list, event.previousIndex, event.currentIndex);
|
|
787
|
-
if (event.container.id.includes('source')) {
|
|
788
|
-
this.internalSource.set(list);
|
|
789
|
-
this.sourceChange.emit(list);
|
|
790
|
-
}
|
|
791
|
-
else {
|
|
792
|
-
this.internalTarget.set(list);
|
|
793
|
-
this.targetChange.emit(list);
|
|
794
|
-
this.targetReorder.emit(list);
|
|
795
|
-
this.onChange(list);
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
|
-
else {
|
|
799
|
-
// Moving between source and target lists
|
|
800
|
-
const sourceList = [...event.previousContainer.data];
|
|
801
|
-
const targetList = [...event.container.data];
|
|
802
|
-
transferArrayItem(sourceList, targetList, event.previousIndex, event.currentIndex);
|
|
803
|
-
const isToTarget = event.container.id.includes('target');
|
|
804
|
-
const movedItem = targetList[event.currentIndex];
|
|
805
|
-
if (isToTarget) {
|
|
806
|
-
this.internalSource.set(sourceList);
|
|
807
|
-
this.internalTarget.set(targetList);
|
|
808
|
-
this.notifyChanges(sourceList, targetList, [movedItem], 'toTarget');
|
|
809
|
-
}
|
|
810
|
-
else {
|
|
811
|
-
this.internalTarget.set(sourceList);
|
|
812
|
-
this.internalSource.set(targetList);
|
|
813
|
-
this.notifyChanges(targetList, sourceList, [movedItem], 'toSource');
|
|
814
|
-
}
|
|
815
|
-
this.pruneSelections();
|
|
816
|
-
this.emitSelectionChange();
|
|
817
|
-
}
|
|
818
|
-
}
|
|
819
|
-
notifyChanges(source, target, moved, direction) {
|
|
820
|
-
this.sourceChange.emit(source);
|
|
821
|
-
this.targetChange.emit(target);
|
|
822
|
-
this.transfer.emit({ source, target, moved, direction });
|
|
823
|
-
this.onChange(target);
|
|
824
|
-
this.onTouched();
|
|
825
|
-
}
|
|
826
|
-
// ControlValueAccessor Implementation
|
|
827
|
-
writeValue(value) {
|
|
828
|
-
if (Array.isArray(value)) {
|
|
829
|
-
this.internalTarget.set([...value]);
|
|
830
|
-
}
|
|
831
|
-
else {
|
|
832
|
-
this.internalTarget.set([]);
|
|
833
|
-
}
|
|
834
|
-
this.pruneSelections();
|
|
835
|
-
}
|
|
836
|
-
registerOnChange(fn) {
|
|
837
|
-
this.onChange = fn;
|
|
838
|
-
}
|
|
839
|
-
registerOnTouched(fn) {
|
|
840
|
-
this.onTouched = fn;
|
|
841
|
-
}
|
|
842
|
-
setDisabledState(isDisabled) {
|
|
843
|
-
this.formDisabled.set(isDisabled);
|
|
844
|
-
}
|
|
845
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTransferListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
846
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosTransferListComponent, isStandalone: true, selector: "talos-transfer-list", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, titles: { classPropertyName: "titles", publicName: "titles", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchMode: { classPropertyName: "searchMode", publicName: "searchMode", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sourceSearchQuery: { classPropertyName: "sourceSearchQuery", publicName: "sourceSearchQuery", isSignal: true, isRequired: false, transformFunction: null }, targetSearchQuery: { classPropertyName: "targetSearchQuery", publicName: "targetSearchQuery", isSignal: true, isRequired: false, transformFunction: null }, searchDebounce: { classPropertyName: "searchDebounce", publicName: "searchDebounce", isSignal: true, isRequired: false, transformFunction: null }, searchHandler: { classPropertyName: "searchHandler", publicName: "searchHandler", isSignal: true, isRequired: false, transformFunction: null }, sourceSearchHandler: { classPropertyName: "sourceSearchHandler", publicName: "sourceSearchHandler", isSignal: true, isRequired: false, transformFunction: null }, targetSearchHandler: { classPropertyName: "targetSearchHandler", publicName: "targetSearchHandler", isSignal: true, isRequired: false, transformFunction: null }, sourceLoading: { classPropertyName: "sourceLoading", publicName: "sourceLoading", isSignal: true, isRequired: false, transformFunction: null }, targetLoading: { classPropertyName: "targetLoading", publicName: "targetLoading", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, showMoveAll: { classPropertyName: "showMoveAll", publicName: "showMoveAll", isSignal: true, isRequired: false, transformFunction: null }, showReorder: { classPropertyName: "showReorder", publicName: "showReorder", isSignal: true, isRequired: false, transformFunction: null }, dragDrop: { classPropertyName: "dragDrop", publicName: "dragDrop", isSignal: true, isRequired: false, transformFunction: null }, dragMode: { classPropertyName: "dragMode", publicName: "dragMode", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, listWidth: { classPropertyName: "listWidth", publicName: "listWidth", isSignal: true, isRequired: false, transformFunction: null }, itemKey: { classPropertyName: "itemKey", publicName: "itemKey", isSignal: true, isRequired: false, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, itemDescription: { classPropertyName: "itemDescription", publicName: "itemDescription", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptySourceText: { classPropertyName: "emptySourceText", publicName: "emptySourceText", isSignal: true, isRequired: false, transformFunction: null }, emptyTargetText: { classPropertyName: "emptyTargetText", publicName: "emptyTargetText", isSignal: true, isRequired: false, transformFunction: null }, searchingText: { classPropertyName: "searchingText", publicName: "searchingText", isSignal: true, isRequired: false, transformFunction: null }, noMatchesText: { classPropertyName: "noMatchesText", publicName: "noMatchesText", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sourceChange: "sourceChange", targetChange: "targetChange", transfer: "transfer", search: "search", sourceSearchChange: "sourceSearchChange", targetSearchChange: "targetSearchChange", searchError: "searchError", selectionChange: "selectionChange", targetReorder: "targetReorder" }, host: { properties: { "class.transfer-size-sm": "size() === \"sm\"", "class.transfer-size-md": "size() === \"md\"", "class.transfer-size-lg": "size() === \"lg\"", "class.transfer-variant-outlined": "variant() === \"outlined\"", "class.transfer-variant-elevated": "variant() === \"elevated\"", "class.transfer-variant-flat": "variant() === \"flat\"", "class.transfer-variant-bordered": "variant() === \"bordered\"", "class.is-disabled": "effectiveDisabled()", "class.is-loading": "loading()", "class.is-card-drag": "dragDrop() && !useDragHandle()" }, classAttribute: "talos-transfer-list-host" }, providers: [
|
|
847
|
-
{
|
|
848
|
-
provide: NG_VALUE_ACCESSOR,
|
|
849
|
-
useExisting: forwardRef(() => TalosTransferListComponent),
|
|
850
|
-
multi: true
|
|
851
|
-
}
|
|
852
|
-
], ngImport: i0, template: "<div class=\"talos-transfer-list-container\" cdkDropListGroup [style.--transfer-height]=\"containerHeight()\">\n <!-- ========================================== -->\n <!-- SOURCE PANE (Available Items) -->\n <!-- ========================================== -->\n <div class=\"talos-transfer-pane talos-transfer-pane-source\" [style.width]=\"effectivePaneWidth()\">\n <!-- Pane Header -->\n <div class=\"talos-transfer-header\">\n <div class=\"talos-transfer-header-left\">\n @if (showSelectAll()) {\n <label class=\"talos-transfer-checkbox-wrap\" [class.is-disabled]=\"effectiveDisabled()\">\n <input\n type=\"checkbox\"\n class=\"talos-transfer-native-checkbox\"\n [checked]=\"isSourceAllSelected()\"\n [indeterminate]=\"isSourceIndeterminate()\"\n [disabled]=\"effectiveDisabled()\"\n (change)=\"toggleSelectAllSource()\"\n [attr.aria-label]=\"'Select all in ' + titles()[0]\"\n />\n <span class=\"talos-transfer-checkbox-custom\"></span>\n </label>\n }\n <span class=\"talos-transfer-title\">{{ titles()[0] }}</span>\n </div>\n <span class=\"talos-transfer-counter\" [attr.aria-live]=\"'polite'\">\n {{ sourceSelectedCount() }} / {{ filteredSource().length }}\n @if (isSourceSearching() && filteredSource().length !== internalSource().length) {\n <span class=\"talos-transfer-filter-tag\">filtered</span>\n }\n </span>\n </div>\n\n <!-- Optional Search Bar -->\n @if (searchable()) {\n <div class=\"talos-transfer-search-wrapper\">\n <svg lucideSearch class=\"talos-transfer-search-icon\" [size]=\"14\"></svg>\n <input\n type=\"text\"\n class=\"talos-transfer-search-input\"\n [placeholder]=\"sourcePlaceholder()\"\n [value]=\"internalSourceQuery()\"\n (input)=\"onSourceSearch($any($event.target).value)\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-label]=\"'Search ' + titles()[0]\"\n />\n @if (effectiveSourceLoading()) {\n <svg lucideLoader2 class=\"talos-transfer-search-spinner talos-spin\" [size]=\"14\"></svg>\n } @else if (internalSourceQuery()) {\n <button\n type=\"button\"\n class=\"talos-transfer-search-clear\"\n (click)=\"clearSourceSearch()\"\n [attr.aria-label]=\"'Clear source search'\"\n >\n <svg lucideX [size]=\"12\"></svg>\n </button>\n }\n\n @if (effectiveSourceLoading()) {\n <div class=\"talos-transfer-search-progress\"></div>\n }\n </div>\n }\n\n <!-- Source Items List -->\n <div\n class=\"talos-transfer-list-body\"\n cdkDropList\n [id]=\"componentId() + '-source-list'\"\n [cdkDropListData]=\"internalSource()\"\n [cdkDropListDisabled]=\"!dragDrop() || effectiveDisabled()\"\n (cdkDropListDropped)=\"onCdkDrop($event)\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"true\"\n [attr.aria-label]=\"titles()[0]\"\n >\n @if (effectiveSourceLoading()) {\n <div class=\"talos-transfer-loading-state\">\n <svg lucideLoader2 class=\"talos-spin\" [size]=\"20\"></svg>\n <span>{{ isSourceSearching() ? searchingText() : 'Loading items...' }}</span>\n </div>\n } @else if (filteredSource().length === 0) {\n <div class=\"talos-transfer-empty-state\">\n @if (isSourceSearching()) {\n <span>{{ noMatchesText() }} “<strong>{{ internalSourceQuery() }}</strong>”</span>\n <button type=\"button\" class=\"talos-transfer-clear-filter-btn\" (click)=\"clearSourceSearch()\">\n Clear filter\n </button>\n } @else {\n <span>{{ emptySourceText() }}</span>\n }\n </div>\n } @else {\n @for (item of filteredSource(); track getItemKey(item, $index); let i = $index) {\n @let isSel = sourceSelectedKeys().has(getItemKey(item, i));\n @let isDis = isItemDisabled(item);\n\n <div\n class=\"talos-transfer-item\"\n [class.is-selected]=\"isSel\"\n [class.is-disabled]=\"isDis\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"!dragDrop() || isDis || effectiveDisabled()\"\n (click)=\"toggleSourceItem(item)\"\n role=\"option\"\n [attr.aria-selected]=\"isSel\"\n [attr.aria-disabled]=\"isDis\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggleSourceItem(item)\"\n (keydown.enter)=\"$event.preventDefault(); toggleSourceItem(item)\"\n >\n <!-- CDK Drag Placeholder -->\n <div class=\"talos-transfer-drag-placeholder\" *cdkDragPlaceholder></div>\n\n <!-- CDK Drag Preview -->\n <div class=\"talos-transfer-drag-preview\" *cdkDragPreview>\n <span class=\"preview-label\">{{ getItemLabel(item) }}</span>\n </div>\n\n <!-- Drag Handle -->\n @if (dragDrop() && useDragHandle() && !isDis && !effectiveDisabled()) {\n <div class=\"talos-transfer-drag-handle\" cdkDragHandle (click)=\"$event.stopPropagation()\">\n <svg lucideGripVertical [size]=\"14\"></svg>\n </div>\n }\n\n <!-- Checkbox -->\n <label class=\"talos-transfer-checkbox-wrap\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"talos-transfer-native-checkbox\"\n [checked]=\"isSel\"\n [disabled]=\"isDis || effectiveDisabled()\"\n (change)=\"toggleSourceItem(item)\"\n [attr.aria-label]=\"'Select ' + getItemLabel(item)\"\n />\n <span class=\"talos-transfer-checkbox-custom\"></span>\n </label>\n\n <!-- Custom Template or Default View -->\n <div class=\"talos-transfer-item-content\">\n @if (itemTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"itemTemplate()!; context: getItemContext(item, 'source', i)\"\n ></ng-container>\n } @else {\n <div class=\"talos-transfer-item-text\">\n <span class=\"talos-transfer-item-label\">{{ getItemLabel(item) }}</span>\n @if (getItemDescription(item); as desc) {\n <span class=\"talos-transfer-item-desc\">{{ desc }}</span>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- ========================================== -->\n <!-- ACTION CONTROLS TOOLBAR -->\n <!-- ========================================== -->\n <div class=\"talos-transfer-actions\" role=\"toolbar\" aria-label=\"Transfer Actions\">\n <!-- Move Selected to Target (>) -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"sourceSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"sourceSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveToTarget()\"\n [attr.aria-label]=\"'Move selected to ' + titles()[1]\"\n title=\"Move selected right\"\n >\n <svg lucideChevronRight [size]=\"16\"></svg>\n </button>\n\n <!-- Move All to Target (>>) -->\n @if (showMoveAll()) {\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"filteredSource().length > 0 && !effectiveDisabled()\"\n [disabled]=\"filteredSource().length === 0 || effectiveDisabled()\"\n (click)=\"moveAllToTarget()\"\n [attr.aria-label]=\"'Move all to ' + titles()[1]\"\n title=\"Move all right\"\n >\n <svg lucideChevronsRight [size]=\"16\"></svg>\n </button>\n }\n\n <!-- Move Selected to Source (<) -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"targetSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"targetSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveToSource()\"\n [attr.aria-label]=\"'Move selected to ' + titles()[0]\"\n title=\"Move selected left\"\n >\n <svg lucideChevronLeft [size]=\"16\"></svg>\n </button>\n\n <!-- Move All to Source (<<) -->\n @if (showMoveAll()) {\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"filteredTarget().length > 0 && !effectiveDisabled()\"\n [disabled]=\"filteredTarget().length === 0 || effectiveDisabled()\"\n (click)=\"moveAllToSource()\"\n [attr.aria-label]=\"'Move all to ' + titles()[0]\"\n title=\"Move all left\"\n >\n <svg lucideChevronsLeft [size]=\"16\"></svg>\n </button>\n }\n </div>\n\n <!-- ========================================== -->\n <!-- TARGET PANE (Selected Items) -->\n <!-- ========================================== -->\n <div class=\"talos-transfer-pane talos-transfer-pane-target\" [style.width]=\"effectivePaneWidth()\">\n <!-- Pane Header -->\n <div class=\"talos-transfer-header\">\n <div class=\"talos-transfer-header-left\">\n @if (showSelectAll()) {\n <label class=\"talos-transfer-checkbox-wrap\" [class.is-disabled]=\"effectiveDisabled()\">\n <input\n type=\"checkbox\"\n class=\"talos-transfer-native-checkbox\"\n [checked]=\"isTargetAllSelected()\"\n [indeterminate]=\"isTargetIndeterminate()\"\n [disabled]=\"effectiveDisabled()\"\n (change)=\"toggleSelectAllTarget()\"\n [attr.aria-label]=\"'Select all in ' + titles()[1]\"\n />\n <span class=\"talos-transfer-checkbox-custom\"></span>\n </label>\n }\n <span class=\"talos-transfer-title\">{{ titles()[1] }}</span>\n </div>\n <span class=\"talos-transfer-counter\" [attr.aria-live]=\"'polite'\">\n {{ targetSelectedCount() }} / {{ filteredTarget().length }}\n @if (isTargetSearching() && filteredTarget().length !== internalTarget().length) {\n <span class=\"talos-transfer-filter-tag\">filtered</span>\n }\n </span>\n </div>\n\n <!-- Optional Search Bar -->\n @if (searchable()) {\n <div class=\"talos-transfer-search-wrapper\">\n <svg lucideSearch class=\"talos-transfer-search-icon\" [size]=\"14\"></svg>\n <input\n type=\"text\"\n class=\"talos-transfer-search-input\"\n [placeholder]=\"targetPlaceholder()\"\n [value]=\"internalTargetQuery()\"\n (input)=\"onTargetSearch($any($event.target).value)\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-label]=\"'Search ' + titles()[1]\"\n />\n @if (effectiveTargetLoading()) {\n <svg lucideLoader2 class=\"talos-transfer-search-spinner talos-spin\" [size]=\"14\"></svg>\n } @else if (internalTargetQuery()) {\n <button\n type=\"button\"\n class=\"talos-transfer-search-clear\"\n (click)=\"clearTargetSearch()\"\n [attr.aria-label]=\"'Clear target search'\"\n >\n <svg lucideX [size]=\"12\"></svg>\n </button>\n }\n\n @if (effectiveTargetLoading()) {\n <div class=\"talos-transfer-search-progress\"></div>\n }\n </div>\n }\n\n <!-- Target Items List -->\n <div\n class=\"talos-transfer-list-body\"\n cdkDropList\n [id]=\"componentId() + '-target-list'\"\n [cdkDropListData]=\"internalTarget()\"\n [cdkDropListDisabled]=\"!dragDrop() || effectiveDisabled()\"\n (cdkDropListDropped)=\"onCdkDrop($event)\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"true\"\n [attr.aria-label]=\"titles()[1]\"\n >\n @if (effectiveTargetLoading()) {\n <div class=\"talos-transfer-loading-state\">\n <svg lucideLoader2 class=\"talos-spin\" [size]=\"20\"></svg>\n <span>{{ isTargetSearching() ? searchingText() : 'Loading items...' }}</span>\n </div>\n } @else if (filteredTarget().length === 0) {\n <div class=\"talos-transfer-empty-state\">\n @if (isTargetSearching()) {\n <span>{{ noMatchesText() }} “<strong>{{ internalTargetQuery() }}</strong>”</span>\n <button type=\"button\" class=\"talos-transfer-clear-filter-btn\" (click)=\"clearTargetSearch()\">\n Clear filter\n </button>\n } @else {\n <span>{{ emptyTargetText() }}</span>\n }\n </div>\n } @else {\n @for (item of filteredTarget(); track getItemKey(item, $index); let i = $index) {\n @let isSel = targetSelectedKeys().has(getItemKey(item, i));\n @let isDis = isItemDisabled(item);\n\n <div\n class=\"talos-transfer-item\"\n [class.is-selected]=\"isSel\"\n [class.is-disabled]=\"isDis\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"!dragDrop() || isDis || effectiveDisabled()\"\n (click)=\"toggleTargetItem(item)\"\n role=\"option\"\n [attr.aria-selected]=\"isSel\"\n [attr.aria-disabled]=\"isDis\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggleTargetItem(item)\"\n (keydown.enter)=\"$event.preventDefault(); toggleTargetItem(item)\"\n >\n <!-- CDK Drag Placeholder -->\n <div class=\"talos-transfer-drag-placeholder\" *cdkDragPlaceholder></div>\n\n <!-- CDK Drag Preview -->\n <div class=\"talos-transfer-drag-preview\" *cdkDragPreview>\n <span class=\"preview-label\">{{ getItemLabel(item) }}</span>\n </div>\n\n <!-- Drag Handle -->\n @if (dragDrop() && useDragHandle() && !isDis && !effectiveDisabled()) {\n <div class=\"talos-transfer-drag-handle\" cdkDragHandle (click)=\"$event.stopPropagation()\">\n <svg lucideGripVertical [size]=\"14\"></svg>\n </div>\n }\n\n <!-- Checkbox -->\n <label class=\"talos-transfer-checkbox-wrap\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"talos-transfer-native-checkbox\"\n [checked]=\"isSel\"\n [disabled]=\"isDis || effectiveDisabled()\"\n (change)=\"toggleTargetItem(item)\"\n [attr.aria-label]=\"'Select ' + getItemLabel(item)\"\n />\n <span class=\"talos-transfer-checkbox-custom\"></span>\n </label>\n\n <!-- Custom Template or Default View -->\n <div class=\"talos-transfer-item-content\">\n @if (itemTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"itemTemplate()!; context: getItemContext(item, 'target', i)\"\n ></ng-container>\n } @else {\n <div class=\"talos-transfer-item-text\">\n <span class=\"talos-transfer-item-label\">{{ getItemLabel(item) }}</span>\n @if (getItemDescription(item); as desc) {\n <span class=\"talos-transfer-item-desc\">{{ desc }}</span>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- ========================================== -->\n <!-- OPTIONAL TARGET REORDER TOOLBAR -->\n <!-- ========================================== -->\n @if (showReorder()) {\n <div class=\"talos-transfer-reorder-actions\" role=\"toolbar\" aria-label=\"Reorder Target Items\">\n <!-- Move Top -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"targetSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"targetSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveTargetTop()\"\n title=\"Move to top\"\n aria-label=\"Move selected items to top\"\n >\n <svg lucideChevronsUp [size]=\"16\"></svg>\n </button>\n\n <!-- Move Up -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"targetSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"targetSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveTargetUp()\"\n title=\"Move up\"\n aria-label=\"Move selected items up\"\n >\n <svg lucideChevronUp [size]=\"16\"></svg>\n </button>\n\n <!-- Move Down -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"targetSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"targetSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveTargetDown()\"\n title=\"Move down\"\n aria-label=\"Move selected items down\"\n >\n <svg lucideChevronDown [size]=\"16\"></svg>\n </button>\n\n <!-- Move Bottom -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"targetSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"targetSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveTargetBottom()\"\n title=\"Move to bottom\"\n aria-label=\"Move selected items to bottom\"\n >\n <svg lucideChevronsDown [size]=\"16\"></svg>\n </button>\n </div>\n }\n</div>\n", styles: [":host{display:block;font-family:var(--talos-font-sans, system-ui, sans-serif);color:var(--talos-text-primary, #0f172a);width:100%;box-sizing:border-box}.talos-transfer-list-container{display:flex;align-items:stretch;justify-content:center;gap:.75rem;width:100%;box-sizing:border-box}@media(max-width:640px){.talos-transfer-list-container{flex-direction:column;align-items:stretch}}.talos-transfer-pane{flex:1 1 260px;min-width:220px;max-width:380px;display:flex;flex-direction:column;background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-md, .375rem);box-shadow:var(--talos-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .05));overflow:hidden;transition:border-color var(--talos-transition, .18s ease),box-shadow var(--talos-transition, .18s ease)}.talos-transfer-pane:focus-within{border-color:var(--talos-border-hover, #94a3b8)}:host(.transfer-variant-outlined) .talos-transfer-pane{background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-default, #cbd5e1);box-shadow:var(--talos-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .04));border-radius:var(--talos-radius-md, .375rem)}:host(.transfer-variant-elevated) .talos-transfer-pane{background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-subtle, rgba(226, 232, 240, .8));border-radius:var(--talos-radius-lg, .5rem);box-shadow:var(--talos-shadow-md, 0 4px 12px -2px rgba(0, 0, 0, .08), 0 2px 6px -1px rgba(0, 0, 0, .04));transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}:host(.transfer-variant-elevated) .talos-transfer-pane:hover{box-shadow:var(--talos-shadow-lg, 0 10px 20px -3px rgba(0, 0, 0, .1), 0 4px 8px -2px rgba(0, 0, 0, .05))}:host(.transfer-variant-elevated) .talos-transfer-header{background:linear-gradient(180deg,var(--talos-bg-surface, #ffffff) 0%,var(--talos-bg-subtle, #f8fafc) 100%);border-bottom:1px solid var(--talos-border-subtle, #e2e8f0)}:host(.transfer-variant-elevated) .talos-transfer-action-btn{box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .06))}:host(.transfer-variant-flat) .talos-transfer-pane{background-color:var(--talos-bg-subtle, #f1f5f9);border:1px solid transparent;box-shadow:none;border-radius:var(--talos-radius-lg, .5rem)}:host(.transfer-variant-flat) .talos-transfer-header{background-color:transparent;border-bottom:1px solid rgba(0,0,0,.06)}:host(.transfer-variant-flat) .talos-transfer-search-wrapper{background-color:transparent;border-bottom:1px solid rgba(0,0,0,.06)}:host(.transfer-variant-flat) .talos-transfer-search-wrapper .talos-transfer-search-input{background-color:var(--talos-bg-surface, #ffffff);border-color:transparent;box-shadow:0 1px 2px #0000000d}:host(.transfer-variant-flat) .talos-transfer-search-wrapper .talos-transfer-search-input:focus{background-color:var(--talos-bg-surface, #ffffff);border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb33}:host(.transfer-variant-flat) .talos-transfer-list-body{background-color:transparent}:host(.transfer-variant-flat) .talos-transfer-item{margin:.0625rem .375rem;border-radius:var(--talos-radius-sm, .25rem)}:host(.transfer-variant-flat) .talos-transfer-item:hover:not(.is-disabled){background-color:var(--talos-bg-surface, #ffffff);box-shadow:0 1px 2px #0000000a}:host(.transfer-variant-flat) .talos-transfer-item.is-selected{background-color:var(--talos-primary-subtle-bg, #eff6ff)}:host(.transfer-variant-flat) .talos-transfer-action-btn{background-color:var(--talos-bg-subtle, #f1f5f9);border-color:transparent}:host(.transfer-variant-flat) .talos-transfer-action-btn:hover:not(:disabled){background-color:var(--talos-bg-surface, #ffffff);box-shadow:0 1px 3px #00000014}:host(.transfer-variant-bordered) .talos-transfer-pane{background-color:var(--talos-bg-surface, #ffffff);border:2px solid var(--talos-border-default, #94a3b8);box-shadow:none;border-radius:var(--talos-radius-md, .375rem)}:host(.transfer-variant-bordered) .talos-transfer-header{border-bottom:2px solid var(--talos-border-default, #94a3b8);background-color:var(--talos-bg-subtle, #f1f5f9)}:host(.transfer-variant-bordered) .talos-transfer-search-wrapper{border-bottom:2px solid var(--talos-border-subtle, #e2e8f0)}:host(.transfer-variant-bordered) .talos-transfer-action-btn{border-width:2px;border-color:var(--talos-border-default, #94a3b8)}.talos-transfer-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background-color:var(--talos-bg-subtle, #f8fafc);border-bottom:1px solid var(--talos-border-subtle, #f1f5f9);-webkit-user-select:none;user-select:none;min-height:2.25rem;box-sizing:border-box}.talos-transfer-header .talos-transfer-header-left{display:flex;align-items:center;gap:.5rem;min-width:0}.talos-transfer-header .talos-transfer-title{font-size:var(--talos-font-size-sm, .8125rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.talos-transfer-header .talos-transfer-counter{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--talos-font-size-xs, .75rem);font-weight:var(--talos-font-weight-medium, 500);color:var(--talos-text-muted, #64748b);padding:.125rem .375rem;border-radius:var(--talos-radius-sm, .25rem);background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-subtle, #e2e8f0);line-height:1.2}.talos-transfer-header .talos-transfer-counter .talos-transfer-filter-tag{font-size:.625rem;text-transform:uppercase;letter-spacing:.025em;padding:.0625rem .25rem;background-color:var(--talos-primary-subtle-bg, #eff6ff);color:var(--talos-primary, #2563eb);border-radius:var(--talos-radius-xs, .125rem);font-weight:600}.talos-transfer-search-wrapper{position:relative;display:flex;align-items:center;padding:.375rem .5rem;border-bottom:1px solid var(--talos-border-subtle, #f1f5f9);background-color:var(--talos-bg-surface, #ffffff)}.talos-transfer-search-wrapper .talos-transfer-search-icon{position:absolute;left:.875rem;color:var(--talos-text-muted, #64748b);pointer-events:none}.talos-transfer-search-wrapper .talos-transfer-search-input{width:100%;height:2rem;padding-left:1.875rem;padding-right:1.75rem;font-size:var(--talos-font-size-xs, .75rem);font-family:inherit;color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-subtle, #e2e8f0);border-radius:var(--talos-radius-sm, .25rem);outline:none;transition:all var(--talos-transition, .18s ease)}.talos-transfer-search-wrapper .talos-transfer-search-input::placeholder{color:var(--talos-text-muted, #94a3b8)}.talos-transfer-search-wrapper .talos-transfer-search-input:focus{background-color:var(--talos-bg-surface, #ffffff);border-color:var(--talos-border-focus, #2563eb);box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .15))}.talos-transfer-search-wrapper .talos-transfer-search-clear{position:absolute;right:.75rem;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:transparent;color:var(--talos-text-muted, #64748b);cursor:pointer;border-radius:var(--talos-radius-xs, .125rem);padding:0}.talos-transfer-search-wrapper .talos-transfer-search-clear:hover{color:var(--talos-text-primary, #0f172a);background-color:#94a3b826}.talos-transfer-search-wrapper .talos-transfer-search-spinner{position:absolute;right:.75rem;color:var(--talos-primary, #2563eb)}.talos-transfer-search-wrapper .talos-transfer-search-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--talos-primary, #2563eb) 50%,transparent 100%);background-size:200% 100%;animation:talosSearchProgress 1.4s ease-in-out infinite}@keyframes talosSearchProgress{0%{background-position:200% 0}to{background-position:-200% 0}}.talos-transfer-list-body{height:var(--transfer-height, 320px);overflow-y:auto;overflow-x:hidden;padding:.25rem 0;background-color:var(--talos-bg-surface, #ffffff);scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.talos-transfer-list-body::-webkit-scrollbar{width:5px}.talos-transfer-list-body::-webkit-scrollbar-thumb{background-color:var(--talos-border-default, #cbd5e1);border-radius:4px}.talos-transfer-loading-state,.talos-transfer-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;height:100%;min-height:120px;padding:1.5rem 1rem;color:var(--talos-text-muted, #64748b);font-size:var(--talos-font-size-xs, .75rem);text-align:center}.talos-transfer-loading-state strong,.talos-transfer-empty-state strong{color:var(--talos-text-primary, #0f172a);font-weight:600}.talos-transfer-loading-state .talos-transfer-clear-filter-btn,.talos-transfer-empty-state .talos-transfer-clear-filter-btn{margin-top:.25rem;font-size:var(--talos-font-size-2xs, .6875rem);font-weight:500;color:var(--talos-primary, #2563eb);background:transparent;border:none;cursor:pointer;text-decoration:underline;padding:.125rem .375rem;border-radius:var(--talos-radius-xs, .125rem)}.talos-transfer-loading-state .talos-transfer-clear-filter-btn:hover,.talos-transfer-empty-state .talos-transfer-clear-filter-btn:hover{background-color:var(--talos-primary-subtle-bg, #eff6ff)}.talos-transfer-loading-state{color:var(--talos-primary, #2563eb);font-weight:500}.talos-transfer-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .625rem;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--talos-radius-xs, .125rem);margin:.0625rem .25rem;transition:background-color var(--talos-transition, .15s ease),color var(--talos-transition, .15s ease);outline:none}.talos-transfer-item:hover:not(.is-disabled){background-color:var(--talos-bg-subtle, #f1f5f9)}.talos-transfer-item.is-selected{background-color:var(--talos-primary-subtle-bg, #eff6ff);color:var(--talos-primary-text, #1e40af)}.talos-transfer-item.is-selected .talos-transfer-item-label{font-weight:var(--talos-font-weight-medium, 500);color:var(--talos-primary-text, #1e40af)}.talos-transfer-item:focus-visible{box-shadow:inset 0 0 0 2px var(--talos-border-focus, #2563eb)}.talos-transfer-item.is-disabled{opacity:.5;cursor:not-allowed}:host(.is-card-drag) .talos-transfer-item:not(.is-disabled){cursor:grab}:host(.is-card-drag) .talos-transfer-item:not(.is-disabled):active{cursor:grabbing}:host(.is-card-drag) .talos-transfer-item:not(.is-disabled) .talos-transfer-checkbox-wrap{cursor:pointer}.talos-transfer-drag-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #94a3b8);cursor:grab;padding:.125rem;border-radius:var(--talos-radius-xs, .125rem);flex-shrink:0}.talos-transfer-drag-handle:hover{color:var(--talos-text-primary, #0f172a);background-color:#94a3b833}.talos-transfer-drag-handle:active{cursor:grabbing}.talos-transfer-item-content{flex:1 1 0%;min-width:0}.talos-transfer-item-text{display:flex;flex-direction:column;min-width:0}.talos-transfer-item-text .talos-transfer-item-label{font-size:var(--talos-font-size-sm, .8125rem);color:var(--talos-text-primary, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}.talos-transfer-item-text .talos-transfer-item-desc{font-size:var(--talos-font-size-2xs, .6875rem);color:var(--talos-text-muted, #64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.0625rem;line-height:1.2}.talos-transfer-checkbox-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:0;padding:0;flex-shrink:0}.talos-transfer-checkbox-wrap.is-disabled{cursor:not-allowed;opacity:.5}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox{position:absolute;opacity:0;width:0;height:0;margin:0}.talos-transfer-checkbox-wrap .talos-transfer-checkbox-custom{display:inline-block;width:1rem;height:1rem;border:1.5px solid var(--talos-border-default, #94a3b8);border-radius:var(--talos-radius-xs, .1875rem);background-color:var(--talos-bg-surface, #ffffff);transition:all var(--talos-transition, .15s ease);position:relative;box-sizing:border-box}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox:checked+.talos-transfer-checkbox-custom{background-color:var(--talos-primary, #2563eb);border-color:var(--talos-primary, #2563eb)}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox:checked+.talos-transfer-checkbox-custom:after{content:\"\";position:absolute;left:.25rem;top:.09375rem;width:.3125rem;height:.5625rem;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox:indeterminate+.talos-transfer-checkbox-custom{background-color:var(--talos-primary, #2563eb);border-color:var(--talos-primary, #2563eb)}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox:indeterminate+.talos-transfer-checkbox-custom:after{content:\"\";position:absolute;left:.1875rem;top:.375rem;width:.5rem;height:2px;background-color:#fff;border-radius:1px}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox:focus-visible+.talos-transfer-checkbox-custom{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .3))}.talos-transfer-actions,.talos-transfer-reorder-actions{display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:center;gap:.375rem;padding:0 .125rem;flex-shrink:0}@media(max-width:640px){.talos-transfer-actions,.talos-transfer-reorder-actions{flex-direction:row;padding:.25rem 0}}.talos-transfer-action-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--talos-radius-md, .375rem);background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-default, #cbd5e1);color:var(--talos-text-muted, #64748b);cursor:pointer;transition:all var(--talos-transition, .18s ease);outline:none;box-shadow:var(--talos-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .04))}.talos-transfer-action-btn:hover:not(:disabled){background-color:var(--talos-bg-subtle, #f1f5f9);border-color:var(--talos-border-hover, #94a3b8);color:var(--talos-text-primary, #0f172a);transform:translateY(-1px)}.talos-transfer-action-btn:active:not(:disabled){transform:translateY(0)}.talos-transfer-action-btn.is-active{background-color:var(--talos-primary, #2563eb);border-color:var(--talos-primary, #2563eb);color:#fff;box-shadow:var(--talos-shadow-sm, 0 1px 3px 0 rgba(37, 99, 235, .2))}.talos-transfer-action-btn.is-active:hover:not(:disabled){background-color:#1d4ed8;border-color:#1d4ed8;color:#fff}.talos-transfer-action-btn:disabled{opacity:.45;cursor:not-allowed;background-color:var(--talos-bg-subtle, #f8fafc);border-color:var(--talos-border-subtle, #e2e8f0)}.talos-transfer-action-btn:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25))}.cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;padding:.5rem .875rem;border-radius:var(--talos-radius-md, .375rem);background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-primary, #2563eb);box-shadow:var(--talos-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .12));color:var(--talos-primary-text, #1e40af);font-size:var(--talos-font-size-sm, .8125rem);font-weight:var(--talos-font-weight-medium, 500);z-index:1000;pointer-events:none}.talos-transfer-drag-placeholder{min-height:2.25rem;background-color:var(--talos-primary-subtle-bg, #eff6ff);border:1.5px dashed var(--talos-primary, #2563eb);border-radius:var(--talos-radius-xs, .1875rem);margin:.125rem .25rem;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.talos-transfer-list-body.cdk-drop-list-dragging .talos-transfer-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.talos-spin{animation:talosSpin 1s linear infinite}@keyframes talosSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.transfer-size-sm) .talos-transfer-pane{flex-basis:210px;min-width:190px;max-width:300px}:host(.transfer-size-sm) .talos-transfer-header{padding:.375rem .5rem;min-height:1.875rem}:host(.transfer-size-sm) .talos-transfer-header .talos-transfer-title{font-size:var(--talos-font-size-xs, .75rem)}:host(.transfer-size-sm) .talos-transfer-header .talos-transfer-counter{font-size:var(--talos-font-size-2xs, .6875rem);padding:.0625rem .3125rem}:host(.transfer-size-sm) .talos-transfer-search-wrapper{padding:.25rem .375rem}:host(.transfer-size-sm) .talos-transfer-search-wrapper .talos-transfer-search-input{height:1.75rem;padding-left:1.625rem;padding-right:1.5rem;font-size:var(--talos-font-size-2xs, .6875rem)}:host(.transfer-size-sm) .talos-transfer-search-wrapper .talos-transfer-search-icon{left:.625rem}:host(.transfer-size-sm) .talos-transfer-item{padding:.25rem .5rem}:host(.transfer-size-sm) .talos-transfer-item .talos-transfer-item-label{font-size:var(--talos-font-size-xs, .75rem)}:host(.transfer-size-sm) .talos-transfer-item .talos-transfer-item-desc{font-size:.625rem}:host(.transfer-size-sm) .talos-transfer-checkbox-wrap .talos-transfer-checkbox-custom{width:.875rem;height:.875rem}:host(.transfer-size-sm) .talos-transfer-checkbox-wrap .talos-transfer-checkbox-custom:after{left:.1875rem;top:.0625rem;width:.25rem;height:.4375rem}:host(.transfer-size-sm) .talos-transfer-action-btn{width:1.625rem;height:1.625rem}:host(.transfer-size-sm) .talos-transfer-action-btn svg{width:13px;height:13px}:host(.transfer-size-lg) .talos-transfer-pane{flex-basis:300px;min-width:260px;max-width:440px}:host(.transfer-size-lg) .talos-transfer-header{padding:.625rem .875rem;min-height:2.625rem}:host(.transfer-size-lg) .talos-transfer-header .talos-transfer-title{font-size:var(--talos-font-size-base, .875rem)}:host(.transfer-size-lg) .talos-transfer-header .talos-transfer-counter{font-size:var(--talos-font-size-sm, .8125rem);padding:.1875rem .5rem}:host(.transfer-size-lg) .talos-transfer-search-wrapper{padding:.5rem .625rem}:host(.transfer-size-lg) .talos-transfer-search-wrapper .talos-transfer-search-input{height:2.25rem;padding-left:2.125rem;padding-right:2rem;font-size:var(--talos-font-size-sm, .8125rem)}:host(.transfer-size-lg) .talos-transfer-search-wrapper .talos-transfer-search-icon{left:1rem}:host(.transfer-size-lg) .talos-transfer-item{padding:.5rem .75rem}:host(.transfer-size-lg) .talos-transfer-item .talos-transfer-item-label{font-size:var(--talos-font-size-base, .875rem)}:host(.transfer-size-lg) .talos-transfer-item .talos-transfer-item-desc{font-size:var(--talos-font-size-xs, .75rem)}:host(.transfer-size-lg) .talos-transfer-checkbox-wrap .talos-transfer-checkbox-custom{width:1.125rem;height:1.125rem}:host(.transfer-size-lg) .talos-transfer-checkbox-wrap .talos-transfer-checkbox-custom:after{left:.28125rem;top:.125rem;width:.34375rem;height:.625rem}:host(.transfer-size-lg) .talos-transfer-action-btn{width:2.25rem;height:2.25rem}:host(.transfer-size-lg) .talos-transfer-action-btn svg{width:17px;height:17px}:host-context([data-theme=dark]) .talos-transfer-pane,:host-context(.dark-theme) .talos-transfer-pane{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-border-default, #334155);box-shadow:0 1px 3px #0000004d}:host-context([data-theme=dark]).transfer-variant-elevated .talos-transfer-pane,:host-context(.dark-theme).transfer-variant-elevated .talos-transfer-pane{background-color:var(--talos-bg-surface, #1e293b);border-color:#334155;box-shadow:0 10px 25px -5px #00000080,0 4px 10px -2px #0000004d}:host-context([data-theme=dark]).transfer-variant-elevated .talos-transfer-pane:hover,:host-context(.dark-theme).transfer-variant-elevated .talos-transfer-pane:hover{box-shadow:0 14px 28px -4px #0009,0 6px 14px -2px #0006}:host-context([data-theme=dark]).transfer-variant-elevated .talos-transfer-header,:host-context(.dark-theme).transfer-variant-elevated .talos-transfer-header{background:linear-gradient(180deg,var(--talos-bg-surface, #1e293b) 0%,var(--talos-bg-subtle, #0f172a) 100%);border-bottom-color:#334155}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-pane,:host-context(.dark-theme).transfer-variant-flat .talos-transfer-pane{background-color:#0f172a;border-color:transparent;box-shadow:none}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-header,:host-context(.dark-theme).transfer-variant-flat .talos-transfer-header{background-color:transparent;border-bottom-color:#ffffff0f}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-search-wrapper,:host-context(.dark-theme).transfer-variant-flat .talos-transfer-search-wrapper{background-color:transparent;border-bottom-color:#ffffff0f}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-search-wrapper .talos-transfer-search-input,:host-context(.dark-theme).transfer-variant-flat .talos-transfer-search-wrapper .talos-transfer-search-input{background-color:var(--talos-bg-surface, #1e293b);border-color:transparent}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-list-body,:host-context(.dark-theme).transfer-variant-flat .talos-transfer-list-body{background-color:transparent}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-item:hover:not(.is-disabled),:host-context(.dark-theme).transfer-variant-flat .talos-transfer-item:hover:not(.is-disabled){background-color:var(--talos-bg-surface, #1e293b)}:host-context([data-theme=dark]).transfer-variant-bordered .talos-transfer-pane,:host-context(.dark-theme).transfer-variant-bordered .talos-transfer-pane{border-color:#475569}:host-context([data-theme=dark]).transfer-variant-bordered .talos-transfer-header,:host-context(.dark-theme).transfer-variant-bordered .talos-transfer-header{border-bottom-color:#475569;background-color:#0f172a}:host-context([data-theme=dark]).transfer-variant-bordered .talos-transfer-search-wrapper,:host-context(.dark-theme).transfer-variant-bordered .talos-transfer-search-wrapper{border-bottom-color:#334155}:host-context([data-theme=dark]).transfer-variant-bordered .talos-transfer-action-btn,:host-context(.dark-theme).transfer-variant-bordered .talos-transfer-action-btn{border-color:#475569}:host-context([data-theme=dark]) .talos-transfer-header,:host-context(.dark-theme) .talos-transfer-header{background-color:var(--talos-bg-subtle, #0f172a);border-bottom-color:var(--talos-border-default, #334155)}:host-context([data-theme=dark]) .talos-transfer-header .talos-transfer-title,:host-context(.dark-theme) .talos-transfer-header .talos-transfer-title{color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-transfer-header .talos-transfer-counter,:host-context(.dark-theme) .talos-transfer-header .talos-transfer-counter{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-border-default, #334155);color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-transfer-search-wrapper,:host-context(.dark-theme) .talos-transfer-search-wrapper{background-color:var(--talos-bg-surface, #1e293b);border-bottom-color:var(--talos-border-default, #334155)}:host-context([data-theme=dark]) .talos-transfer-search-wrapper .talos-transfer-search-input,:host-context(.dark-theme) .talos-transfer-search-wrapper .talos-transfer-search-input{background-color:var(--talos-bg-subtle, #0f172a);border-color:var(--talos-border-default, #334155);color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-transfer-search-wrapper .talos-transfer-search-input:focus,:host-context(.dark-theme) .talos-transfer-search-wrapper .talos-transfer-search-input:focus{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-primary, #3b82f6);box-shadow:0 0 0 2px #3b82f640}:host-context([data-theme=dark]) .talos-transfer-list-body,:host-context(.dark-theme) .talos-transfer-list-body{background-color:var(--talos-bg-surface, #1e293b);scrollbar-color:var(--talos-border-default, #334155) transparent}:host-context([data-theme=dark]) .talos-transfer-list-body::-webkit-scrollbar-thumb,:host-context(.dark-theme) .talos-transfer-list-body::-webkit-scrollbar-thumb{background-color:var(--talos-border-default, #334155)}:host-context([data-theme=dark]) .talos-transfer-item:hover:not(.is-disabled),:host-context(.dark-theme) .talos-transfer-item:hover:not(.is-disabled){background-color:var(--talos-bg-subtle, #334155)}:host-context([data-theme=dark]) .talos-transfer-item.is-selected,:host-context(.dark-theme) .talos-transfer-item.is-selected{background-color:#3b82f633;color:#93c5fd}:host-context([data-theme=dark]) .talos-transfer-item.is-selected .talos-transfer-item-label,:host-context(.dark-theme) .talos-transfer-item.is-selected .talos-transfer-item-label{color:#93c5fd}:host-context([data-theme=dark]) .talos-transfer-item .talos-transfer-item-text .talos-transfer-item-label,:host-context(.dark-theme) .talos-transfer-item .talos-transfer-item-text .talos-transfer-item-label{color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-transfer-action-btn,:host-context(.dark-theme) .talos-transfer-action-btn{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-border-default, #334155);color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-transfer-action-btn:hover:not(:disabled),:host-context(.dark-theme) .talos-transfer-action-btn:hover:not(:disabled){background-color:var(--talos-bg-subtle, #334155);border-color:var(--talos-border-hover, #64748b);color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-transfer-action-btn.is-active,:host-context(.dark-theme) .talos-transfer-action-btn.is-active{background-color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6);color:#fff}:host-context([data-theme=dark]) .talos-transfer-action-btn.is-active:hover:not(:disabled),:host-context(.dark-theme) .talos-transfer-action-btn.is-active:hover:not(:disabled){background-color:#2563eb}:host-context([data-theme=dark]) .talos-transfer-action-btn:disabled,:host-context(.dark-theme) .talos-transfer-action-btn:disabled{background-color:var(--talos-bg-subtle, #0f172a);border-color:var(--talos-border-default, #334155)}:host-context([data-theme=dark]) .talos-transfer-checkbox-custom,:host-context(.dark-theme) .talos-transfer-checkbox-custom{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-border-default, #475569)}:host-context([data-theme=dark]) .cdk-drag-preview,:host-context(.dark-theme) .cdk-drag-preview{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-primary, #3b82f6);color:#93c5fd}:host-context([data-theme=dark]) .talos-transfer-drag-placeholder,:host-context(.dark-theme) .talos-transfer-drag-placeholder{background-color:#3b82f626;border-color:var(--talos-primary, #3b82f6)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronUp, selector: "svg[lucideChevronUp]" }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucideChevronsUp, selector: "svg[lucideChevronsUp]" }, { kind: "component", type: LucideChevronsDown, selector: "svg[lucideChevronsDown]" }, { kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideLoader2, selector: "svg[lucideLoaderCircle], svg[lucideLoader2]" }, { kind: "component", type: LucideGripVertical, selector: "svg[lucideGripVertical]" }] });
|
|
853
|
-
}
|
|
854
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTransferListComponent, decorators: [{
|
|
855
|
-
type: Component,
|
|
856
|
-
args: [{ selector: 'talos-transfer-list', imports: [
|
|
857
|
-
FormsModule,
|
|
858
|
-
NgTemplateOutlet,
|
|
859
|
-
CdkDropListGroup,
|
|
860
|
-
CdkDropList,
|
|
861
|
-
CdkDrag,
|
|
862
|
-
CdkDragPlaceholder,
|
|
863
|
-
CdkDragPreview,
|
|
864
|
-
CdkDragHandle,
|
|
865
|
-
LucideChevronRight,
|
|
866
|
-
LucideChevronLeft,
|
|
867
|
-
LucideChevronsRight,
|
|
868
|
-
LucideChevronsLeft,
|
|
869
|
-
LucideChevronUp,
|
|
870
|
-
LucideChevronDown,
|
|
871
|
-
LucideChevronsUp,
|
|
872
|
-
LucideChevronsDown,
|
|
873
|
-
LucideSearch,
|
|
874
|
-
LucideX,
|
|
875
|
-
LucideLoader2,
|
|
876
|
-
LucideGripVertical
|
|
877
|
-
], providers: [
|
|
878
|
-
{
|
|
879
|
-
provide: NG_VALUE_ACCESSOR,
|
|
880
|
-
useExisting: forwardRef(() => TalosTransferListComponent),
|
|
881
|
-
multi: true
|
|
882
|
-
}
|
|
883
|
-
], host: {
|
|
884
|
-
'class': 'talos-transfer-list-host',
|
|
885
|
-
'[class.transfer-size-sm]': 'size() === "sm"',
|
|
886
|
-
'[class.transfer-size-md]': 'size() === "md"',
|
|
887
|
-
'[class.transfer-size-lg]': 'size() === "lg"',
|
|
888
|
-
'[class.transfer-variant-outlined]': 'variant() === "outlined"',
|
|
889
|
-
'[class.transfer-variant-elevated]': 'variant() === "elevated"',
|
|
890
|
-
'[class.transfer-variant-flat]': 'variant() === "flat"',
|
|
891
|
-
'[class.transfer-variant-bordered]': 'variant() === "bordered"',
|
|
892
|
-
'[class.is-disabled]': 'effectiveDisabled()',
|
|
893
|
-
'[class.is-loading]': 'loading()',
|
|
894
|
-
'[class.is-card-drag]': 'dragDrop() && !useDragHandle()'
|
|
895
|
-
}, template: "<div class=\"talos-transfer-list-container\" cdkDropListGroup [style.--transfer-height]=\"containerHeight()\">\n <!-- ========================================== -->\n <!-- SOURCE PANE (Available Items) -->\n <!-- ========================================== -->\n <div class=\"talos-transfer-pane talos-transfer-pane-source\" [style.width]=\"effectivePaneWidth()\">\n <!-- Pane Header -->\n <div class=\"talos-transfer-header\">\n <div class=\"talos-transfer-header-left\">\n @if (showSelectAll()) {\n <label class=\"talos-transfer-checkbox-wrap\" [class.is-disabled]=\"effectiveDisabled()\">\n <input\n type=\"checkbox\"\n class=\"talos-transfer-native-checkbox\"\n [checked]=\"isSourceAllSelected()\"\n [indeterminate]=\"isSourceIndeterminate()\"\n [disabled]=\"effectiveDisabled()\"\n (change)=\"toggleSelectAllSource()\"\n [attr.aria-label]=\"'Select all in ' + titles()[0]\"\n />\n <span class=\"talos-transfer-checkbox-custom\"></span>\n </label>\n }\n <span class=\"talos-transfer-title\">{{ titles()[0] }}</span>\n </div>\n <span class=\"talos-transfer-counter\" [attr.aria-live]=\"'polite'\">\n {{ sourceSelectedCount() }} / {{ filteredSource().length }}\n @if (isSourceSearching() && filteredSource().length !== internalSource().length) {\n <span class=\"talos-transfer-filter-tag\">filtered</span>\n }\n </span>\n </div>\n\n <!-- Optional Search Bar -->\n @if (searchable()) {\n <div class=\"talos-transfer-search-wrapper\">\n <svg lucideSearch class=\"talos-transfer-search-icon\" [size]=\"14\"></svg>\n <input\n type=\"text\"\n class=\"talos-transfer-search-input\"\n [placeholder]=\"sourcePlaceholder()\"\n [value]=\"internalSourceQuery()\"\n (input)=\"onSourceSearch($any($event.target).value)\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-label]=\"'Search ' + titles()[0]\"\n />\n @if (effectiveSourceLoading()) {\n <svg lucideLoader2 class=\"talos-transfer-search-spinner talos-spin\" [size]=\"14\"></svg>\n } @else if (internalSourceQuery()) {\n <button\n type=\"button\"\n class=\"talos-transfer-search-clear\"\n (click)=\"clearSourceSearch()\"\n [attr.aria-label]=\"'Clear source search'\"\n >\n <svg lucideX [size]=\"12\"></svg>\n </button>\n }\n\n @if (effectiveSourceLoading()) {\n <div class=\"talos-transfer-search-progress\"></div>\n }\n </div>\n }\n\n <!-- Source Items List -->\n <div\n class=\"talos-transfer-list-body\"\n cdkDropList\n [id]=\"componentId() + '-source-list'\"\n [cdkDropListData]=\"internalSource()\"\n [cdkDropListDisabled]=\"!dragDrop() || effectiveDisabled()\"\n (cdkDropListDropped)=\"onCdkDrop($event)\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"true\"\n [attr.aria-label]=\"titles()[0]\"\n >\n @if (effectiveSourceLoading()) {\n <div class=\"talos-transfer-loading-state\">\n <svg lucideLoader2 class=\"talos-spin\" [size]=\"20\"></svg>\n <span>{{ isSourceSearching() ? searchingText() : 'Loading items...' }}</span>\n </div>\n } @else if (filteredSource().length === 0) {\n <div class=\"talos-transfer-empty-state\">\n @if (isSourceSearching()) {\n <span>{{ noMatchesText() }} “<strong>{{ internalSourceQuery() }}</strong>”</span>\n <button type=\"button\" class=\"talos-transfer-clear-filter-btn\" (click)=\"clearSourceSearch()\">\n Clear filter\n </button>\n } @else {\n <span>{{ emptySourceText() }}</span>\n }\n </div>\n } @else {\n @for (item of filteredSource(); track getItemKey(item, $index); let i = $index) {\n @let isSel = sourceSelectedKeys().has(getItemKey(item, i));\n @let isDis = isItemDisabled(item);\n\n <div\n class=\"talos-transfer-item\"\n [class.is-selected]=\"isSel\"\n [class.is-disabled]=\"isDis\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"!dragDrop() || isDis || effectiveDisabled()\"\n (click)=\"toggleSourceItem(item)\"\n role=\"option\"\n [attr.aria-selected]=\"isSel\"\n [attr.aria-disabled]=\"isDis\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggleSourceItem(item)\"\n (keydown.enter)=\"$event.preventDefault(); toggleSourceItem(item)\"\n >\n <!-- CDK Drag Placeholder -->\n <div class=\"talos-transfer-drag-placeholder\" *cdkDragPlaceholder></div>\n\n <!-- CDK Drag Preview -->\n <div class=\"talos-transfer-drag-preview\" *cdkDragPreview>\n <span class=\"preview-label\">{{ getItemLabel(item) }}</span>\n </div>\n\n <!-- Drag Handle -->\n @if (dragDrop() && useDragHandle() && !isDis && !effectiveDisabled()) {\n <div class=\"talos-transfer-drag-handle\" cdkDragHandle (click)=\"$event.stopPropagation()\">\n <svg lucideGripVertical [size]=\"14\"></svg>\n </div>\n }\n\n <!-- Checkbox -->\n <label class=\"talos-transfer-checkbox-wrap\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"talos-transfer-native-checkbox\"\n [checked]=\"isSel\"\n [disabled]=\"isDis || effectiveDisabled()\"\n (change)=\"toggleSourceItem(item)\"\n [attr.aria-label]=\"'Select ' + getItemLabel(item)\"\n />\n <span class=\"talos-transfer-checkbox-custom\"></span>\n </label>\n\n <!-- Custom Template or Default View -->\n <div class=\"talos-transfer-item-content\">\n @if (itemTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"itemTemplate()!; context: getItemContext(item, 'source', i)\"\n ></ng-container>\n } @else {\n <div class=\"talos-transfer-item-text\">\n <span class=\"talos-transfer-item-label\">{{ getItemLabel(item) }}</span>\n @if (getItemDescription(item); as desc) {\n <span class=\"talos-transfer-item-desc\">{{ desc }}</span>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- ========================================== -->\n <!-- ACTION CONTROLS TOOLBAR -->\n <!-- ========================================== -->\n <div class=\"talos-transfer-actions\" role=\"toolbar\" aria-label=\"Transfer Actions\">\n <!-- Move Selected to Target (>) -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"sourceSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"sourceSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveToTarget()\"\n [attr.aria-label]=\"'Move selected to ' + titles()[1]\"\n title=\"Move selected right\"\n >\n <svg lucideChevronRight [size]=\"16\"></svg>\n </button>\n\n <!-- Move All to Target (>>) -->\n @if (showMoveAll()) {\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"filteredSource().length > 0 && !effectiveDisabled()\"\n [disabled]=\"filteredSource().length === 0 || effectiveDisabled()\"\n (click)=\"moveAllToTarget()\"\n [attr.aria-label]=\"'Move all to ' + titles()[1]\"\n title=\"Move all right\"\n >\n <svg lucideChevronsRight [size]=\"16\"></svg>\n </button>\n }\n\n <!-- Move Selected to Source (<) -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"targetSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"targetSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveToSource()\"\n [attr.aria-label]=\"'Move selected to ' + titles()[0]\"\n title=\"Move selected left\"\n >\n <svg lucideChevronLeft [size]=\"16\"></svg>\n </button>\n\n <!-- Move All to Source (<<) -->\n @if (showMoveAll()) {\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"filteredTarget().length > 0 && !effectiveDisabled()\"\n [disabled]=\"filteredTarget().length === 0 || effectiveDisabled()\"\n (click)=\"moveAllToSource()\"\n [attr.aria-label]=\"'Move all to ' + titles()[0]\"\n title=\"Move all left\"\n >\n <svg lucideChevronsLeft [size]=\"16\"></svg>\n </button>\n }\n </div>\n\n <!-- ========================================== -->\n <!-- TARGET PANE (Selected Items) -->\n <!-- ========================================== -->\n <div class=\"talos-transfer-pane talos-transfer-pane-target\" [style.width]=\"effectivePaneWidth()\">\n <!-- Pane Header -->\n <div class=\"talos-transfer-header\">\n <div class=\"talos-transfer-header-left\">\n @if (showSelectAll()) {\n <label class=\"talos-transfer-checkbox-wrap\" [class.is-disabled]=\"effectiveDisabled()\">\n <input\n type=\"checkbox\"\n class=\"talos-transfer-native-checkbox\"\n [checked]=\"isTargetAllSelected()\"\n [indeterminate]=\"isTargetIndeterminate()\"\n [disabled]=\"effectiveDisabled()\"\n (change)=\"toggleSelectAllTarget()\"\n [attr.aria-label]=\"'Select all in ' + titles()[1]\"\n />\n <span class=\"talos-transfer-checkbox-custom\"></span>\n </label>\n }\n <span class=\"talos-transfer-title\">{{ titles()[1] }}</span>\n </div>\n <span class=\"talos-transfer-counter\" [attr.aria-live]=\"'polite'\">\n {{ targetSelectedCount() }} / {{ filteredTarget().length }}\n @if (isTargetSearching() && filteredTarget().length !== internalTarget().length) {\n <span class=\"talos-transfer-filter-tag\">filtered</span>\n }\n </span>\n </div>\n\n <!-- Optional Search Bar -->\n @if (searchable()) {\n <div class=\"talos-transfer-search-wrapper\">\n <svg lucideSearch class=\"talos-transfer-search-icon\" [size]=\"14\"></svg>\n <input\n type=\"text\"\n class=\"talos-transfer-search-input\"\n [placeholder]=\"targetPlaceholder()\"\n [value]=\"internalTargetQuery()\"\n (input)=\"onTargetSearch($any($event.target).value)\"\n [disabled]=\"effectiveDisabled()\"\n [attr.aria-label]=\"'Search ' + titles()[1]\"\n />\n @if (effectiveTargetLoading()) {\n <svg lucideLoader2 class=\"talos-transfer-search-spinner talos-spin\" [size]=\"14\"></svg>\n } @else if (internalTargetQuery()) {\n <button\n type=\"button\"\n class=\"talos-transfer-search-clear\"\n (click)=\"clearTargetSearch()\"\n [attr.aria-label]=\"'Clear target search'\"\n >\n <svg lucideX [size]=\"12\"></svg>\n </button>\n }\n\n @if (effectiveTargetLoading()) {\n <div class=\"talos-transfer-search-progress\"></div>\n }\n </div>\n }\n\n <!-- Target Items List -->\n <div\n class=\"talos-transfer-list-body\"\n cdkDropList\n [id]=\"componentId() + '-target-list'\"\n [cdkDropListData]=\"internalTarget()\"\n [cdkDropListDisabled]=\"!dragDrop() || effectiveDisabled()\"\n (cdkDropListDropped)=\"onCdkDrop($event)\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"true\"\n [attr.aria-label]=\"titles()[1]\"\n >\n @if (effectiveTargetLoading()) {\n <div class=\"talos-transfer-loading-state\">\n <svg lucideLoader2 class=\"talos-spin\" [size]=\"20\"></svg>\n <span>{{ isTargetSearching() ? searchingText() : 'Loading items...' }}</span>\n </div>\n } @else if (filteredTarget().length === 0) {\n <div class=\"talos-transfer-empty-state\">\n @if (isTargetSearching()) {\n <span>{{ noMatchesText() }} “<strong>{{ internalTargetQuery() }}</strong>”</span>\n <button type=\"button\" class=\"talos-transfer-clear-filter-btn\" (click)=\"clearTargetSearch()\">\n Clear filter\n </button>\n } @else {\n <span>{{ emptyTargetText() }}</span>\n }\n </div>\n } @else {\n @for (item of filteredTarget(); track getItemKey(item, $index); let i = $index) {\n @let isSel = targetSelectedKeys().has(getItemKey(item, i));\n @let isDis = isItemDisabled(item);\n\n <div\n class=\"talos-transfer-item\"\n [class.is-selected]=\"isSel\"\n [class.is-disabled]=\"isDis\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"!dragDrop() || isDis || effectiveDisabled()\"\n (click)=\"toggleTargetItem(item)\"\n role=\"option\"\n [attr.aria-selected]=\"isSel\"\n [attr.aria-disabled]=\"isDis\"\n tabindex=\"0\"\n (keydown.space)=\"$event.preventDefault(); toggleTargetItem(item)\"\n (keydown.enter)=\"$event.preventDefault(); toggleTargetItem(item)\"\n >\n <!-- CDK Drag Placeholder -->\n <div class=\"talos-transfer-drag-placeholder\" *cdkDragPlaceholder></div>\n\n <!-- CDK Drag Preview -->\n <div class=\"talos-transfer-drag-preview\" *cdkDragPreview>\n <span class=\"preview-label\">{{ getItemLabel(item) }}</span>\n </div>\n\n <!-- Drag Handle -->\n @if (dragDrop() && useDragHandle() && !isDis && !effectiveDisabled()) {\n <div class=\"talos-transfer-drag-handle\" cdkDragHandle (click)=\"$event.stopPropagation()\">\n <svg lucideGripVertical [size]=\"14\"></svg>\n </div>\n }\n\n <!-- Checkbox -->\n <label class=\"talos-transfer-checkbox-wrap\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n class=\"talos-transfer-native-checkbox\"\n [checked]=\"isSel\"\n [disabled]=\"isDis || effectiveDisabled()\"\n (change)=\"toggleTargetItem(item)\"\n [attr.aria-label]=\"'Select ' + getItemLabel(item)\"\n />\n <span class=\"talos-transfer-checkbox-custom\"></span>\n </label>\n\n <!-- Custom Template or Default View -->\n <div class=\"talos-transfer-item-content\">\n @if (itemTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"itemTemplate()!; context: getItemContext(item, 'target', i)\"\n ></ng-container>\n } @else {\n <div class=\"talos-transfer-item-text\">\n <span class=\"talos-transfer-item-label\">{{ getItemLabel(item) }}</span>\n @if (getItemDescription(item); as desc) {\n <span class=\"talos-transfer-item-desc\">{{ desc }}</span>\n }\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- ========================================== -->\n <!-- OPTIONAL TARGET REORDER TOOLBAR -->\n <!-- ========================================== -->\n @if (showReorder()) {\n <div class=\"talos-transfer-reorder-actions\" role=\"toolbar\" aria-label=\"Reorder Target Items\">\n <!-- Move Top -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"targetSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"targetSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveTargetTop()\"\n title=\"Move to top\"\n aria-label=\"Move selected items to top\"\n >\n <svg lucideChevronsUp [size]=\"16\"></svg>\n </button>\n\n <!-- Move Up -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"targetSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"targetSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveTargetUp()\"\n title=\"Move up\"\n aria-label=\"Move selected items up\"\n >\n <svg lucideChevronUp [size]=\"16\"></svg>\n </button>\n\n <!-- Move Down -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"targetSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"targetSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveTargetDown()\"\n title=\"Move down\"\n aria-label=\"Move selected items down\"\n >\n <svg lucideChevronDown [size]=\"16\"></svg>\n </button>\n\n <!-- Move Bottom -->\n <button\n type=\"button\"\n class=\"talos-transfer-action-btn\"\n [class.is-active]=\"targetSelectedCount() > 0 && !effectiveDisabled()\"\n [disabled]=\"targetSelectedCount() === 0 || effectiveDisabled()\"\n (click)=\"moveTargetBottom()\"\n title=\"Move to bottom\"\n aria-label=\"Move selected items to bottom\"\n >\n <svg lucideChevronsDown [size]=\"16\"></svg>\n </button>\n </div>\n }\n</div>\n", styles: [":host{display:block;font-family:var(--talos-font-sans, system-ui, sans-serif);color:var(--talos-text-primary, #0f172a);width:100%;box-sizing:border-box}.talos-transfer-list-container{display:flex;align-items:stretch;justify-content:center;gap:.75rem;width:100%;box-sizing:border-box}@media(max-width:640px){.talos-transfer-list-container{flex-direction:column;align-items:stretch}}.talos-transfer-pane{flex:1 1 260px;min-width:220px;max-width:380px;display:flex;flex-direction:column;background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-default, #cbd5e1);border-radius:var(--talos-radius-md, .375rem);box-shadow:var(--talos-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .05));overflow:hidden;transition:border-color var(--talos-transition, .18s ease),box-shadow var(--talos-transition, .18s ease)}.talos-transfer-pane:focus-within{border-color:var(--talos-border-hover, #94a3b8)}:host(.transfer-variant-outlined) .talos-transfer-pane{background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-default, #cbd5e1);box-shadow:var(--talos-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .04));border-radius:var(--talos-radius-md, .375rem)}:host(.transfer-variant-elevated) .talos-transfer-pane{background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-subtle, rgba(226, 232, 240, .8));border-radius:var(--talos-radius-lg, .5rem);box-shadow:var(--talos-shadow-md, 0 4px 12px -2px rgba(0, 0, 0, .08), 0 2px 6px -1px rgba(0, 0, 0, .04));transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1)}:host(.transfer-variant-elevated) .talos-transfer-pane:hover{box-shadow:var(--talos-shadow-lg, 0 10px 20px -3px rgba(0, 0, 0, .1), 0 4px 8px -2px rgba(0, 0, 0, .05))}:host(.transfer-variant-elevated) .talos-transfer-header{background:linear-gradient(180deg,var(--talos-bg-surface, #ffffff) 0%,var(--talos-bg-subtle, #f8fafc) 100%);border-bottom:1px solid var(--talos-border-subtle, #e2e8f0)}:host(.transfer-variant-elevated) .talos-transfer-action-btn{box-shadow:var(--talos-shadow-xs, 0 1px 2px rgba(0, 0, 0, .06))}:host(.transfer-variant-flat) .talos-transfer-pane{background-color:var(--talos-bg-subtle, #f1f5f9);border:1px solid transparent;box-shadow:none;border-radius:var(--talos-radius-lg, .5rem)}:host(.transfer-variant-flat) .talos-transfer-header{background-color:transparent;border-bottom:1px solid rgba(0,0,0,.06)}:host(.transfer-variant-flat) .talos-transfer-search-wrapper{background-color:transparent;border-bottom:1px solid rgba(0,0,0,.06)}:host(.transfer-variant-flat) .talos-transfer-search-wrapper .talos-transfer-search-input{background-color:var(--talos-bg-surface, #ffffff);border-color:transparent;box-shadow:0 1px 2px #0000000d}:host(.transfer-variant-flat) .talos-transfer-search-wrapper .talos-transfer-search-input:focus{background-color:var(--talos-bg-surface, #ffffff);border-color:var(--talos-primary, #2563eb);box-shadow:0 0 0 2px #2563eb33}:host(.transfer-variant-flat) .talos-transfer-list-body{background-color:transparent}:host(.transfer-variant-flat) .talos-transfer-item{margin:.0625rem .375rem;border-radius:var(--talos-radius-sm, .25rem)}:host(.transfer-variant-flat) .talos-transfer-item:hover:not(.is-disabled){background-color:var(--talos-bg-surface, #ffffff);box-shadow:0 1px 2px #0000000a}:host(.transfer-variant-flat) .talos-transfer-item.is-selected{background-color:var(--talos-primary-subtle-bg, #eff6ff)}:host(.transfer-variant-flat) .talos-transfer-action-btn{background-color:var(--talos-bg-subtle, #f1f5f9);border-color:transparent}:host(.transfer-variant-flat) .talos-transfer-action-btn:hover:not(:disabled){background-color:var(--talos-bg-surface, #ffffff);box-shadow:0 1px 3px #00000014}:host(.transfer-variant-bordered) .talos-transfer-pane{background-color:var(--talos-bg-surface, #ffffff);border:2px solid var(--talos-border-default, #94a3b8);box-shadow:none;border-radius:var(--talos-radius-md, .375rem)}:host(.transfer-variant-bordered) .talos-transfer-header{border-bottom:2px solid var(--talos-border-default, #94a3b8);background-color:var(--talos-bg-subtle, #f1f5f9)}:host(.transfer-variant-bordered) .talos-transfer-search-wrapper{border-bottom:2px solid var(--talos-border-subtle, #e2e8f0)}:host(.transfer-variant-bordered) .talos-transfer-action-btn{border-width:2px;border-color:var(--talos-border-default, #94a3b8)}.talos-transfer-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;background-color:var(--talos-bg-subtle, #f8fafc);border-bottom:1px solid var(--talos-border-subtle, #f1f5f9);-webkit-user-select:none;user-select:none;min-height:2.25rem;box-sizing:border-box}.talos-transfer-header .talos-transfer-header-left{display:flex;align-items:center;gap:.5rem;min-width:0}.talos-transfer-header .talos-transfer-title{font-size:var(--talos-font-size-sm, .8125rem);font-weight:var(--talos-font-weight-semibold, 600);color:var(--talos-text-primary, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.talos-transfer-header .talos-transfer-counter{display:inline-flex;align-items:center;gap:.25rem;font-size:var(--talos-font-size-xs, .75rem);font-weight:var(--talos-font-weight-medium, 500);color:var(--talos-text-muted, #64748b);padding:.125rem .375rem;border-radius:var(--talos-radius-sm, .25rem);background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-subtle, #e2e8f0);line-height:1.2}.talos-transfer-header .talos-transfer-counter .talos-transfer-filter-tag{font-size:.625rem;text-transform:uppercase;letter-spacing:.025em;padding:.0625rem .25rem;background-color:var(--talos-primary-subtle-bg, #eff6ff);color:var(--talos-primary, #2563eb);border-radius:var(--talos-radius-xs, .125rem);font-weight:600}.talos-transfer-search-wrapper{position:relative;display:flex;align-items:center;padding:.375rem .5rem;border-bottom:1px solid var(--talos-border-subtle, #f1f5f9);background-color:var(--talos-bg-surface, #ffffff)}.talos-transfer-search-wrapper .talos-transfer-search-icon{position:absolute;left:.875rem;color:var(--talos-text-muted, #64748b);pointer-events:none}.talos-transfer-search-wrapper .talos-transfer-search-input{width:100%;height:2rem;padding-left:1.875rem;padding-right:1.75rem;font-size:var(--talos-font-size-xs, .75rem);font-family:inherit;color:var(--talos-text-primary, #0f172a);background-color:var(--talos-bg-subtle, #f8fafc);border:1px solid var(--talos-border-subtle, #e2e8f0);border-radius:var(--talos-radius-sm, .25rem);outline:none;transition:all var(--talos-transition, .18s ease)}.talos-transfer-search-wrapper .talos-transfer-search-input::placeholder{color:var(--talos-text-muted, #94a3b8)}.talos-transfer-search-wrapper .talos-transfer-search-input:focus{background-color:var(--talos-bg-surface, #ffffff);border-color:var(--talos-border-focus, #2563eb);box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .15))}.talos-transfer-search-wrapper .talos-transfer-search-clear{position:absolute;right:.75rem;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;background:transparent;color:var(--talos-text-muted, #64748b);cursor:pointer;border-radius:var(--talos-radius-xs, .125rem);padding:0}.talos-transfer-search-wrapper .talos-transfer-search-clear:hover{color:var(--talos-text-primary, #0f172a);background-color:#94a3b826}.talos-transfer-search-wrapper .talos-transfer-search-spinner{position:absolute;right:.75rem;color:var(--talos-primary, #2563eb)}.talos-transfer-search-wrapper .talos-transfer-search-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--talos-primary, #2563eb) 50%,transparent 100%);background-size:200% 100%;animation:talosSearchProgress 1.4s ease-in-out infinite}@keyframes talosSearchProgress{0%{background-position:200% 0}to{background-position:-200% 0}}.talos-transfer-list-body{height:var(--transfer-height, 320px);overflow-y:auto;overflow-x:hidden;padding:.25rem 0;background-color:var(--talos-bg-surface, #ffffff);scrollbar-width:thin;scrollbar-color:var(--talos-border-default, #cbd5e1) transparent}.talos-transfer-list-body::-webkit-scrollbar{width:5px}.talos-transfer-list-body::-webkit-scrollbar-thumb{background-color:var(--talos-border-default, #cbd5e1);border-radius:4px}.talos-transfer-loading-state,.talos-transfer-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;height:100%;min-height:120px;padding:1.5rem 1rem;color:var(--talos-text-muted, #64748b);font-size:var(--talos-font-size-xs, .75rem);text-align:center}.talos-transfer-loading-state strong,.talos-transfer-empty-state strong{color:var(--talos-text-primary, #0f172a);font-weight:600}.talos-transfer-loading-state .talos-transfer-clear-filter-btn,.talos-transfer-empty-state .talos-transfer-clear-filter-btn{margin-top:.25rem;font-size:var(--talos-font-size-2xs, .6875rem);font-weight:500;color:var(--talos-primary, #2563eb);background:transparent;border:none;cursor:pointer;text-decoration:underline;padding:.125rem .375rem;border-radius:var(--talos-radius-xs, .125rem)}.talos-transfer-loading-state .talos-transfer-clear-filter-btn:hover,.talos-transfer-empty-state .talos-transfer-clear-filter-btn:hover{background-color:var(--talos-primary-subtle-bg, #eff6ff)}.talos-transfer-loading-state{color:var(--talos-primary, #2563eb);font-weight:500}.talos-transfer-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .625rem;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:var(--talos-radius-xs, .125rem);margin:.0625rem .25rem;transition:background-color var(--talos-transition, .15s ease),color var(--talos-transition, .15s ease);outline:none}.talos-transfer-item:hover:not(.is-disabled){background-color:var(--talos-bg-subtle, #f1f5f9)}.talos-transfer-item.is-selected{background-color:var(--talos-primary-subtle-bg, #eff6ff);color:var(--talos-primary-text, #1e40af)}.talos-transfer-item.is-selected .talos-transfer-item-label{font-weight:var(--talos-font-weight-medium, 500);color:var(--talos-primary-text, #1e40af)}.talos-transfer-item:focus-visible{box-shadow:inset 0 0 0 2px var(--talos-border-focus, #2563eb)}.talos-transfer-item.is-disabled{opacity:.5;cursor:not-allowed}:host(.is-card-drag) .talos-transfer-item:not(.is-disabled){cursor:grab}:host(.is-card-drag) .talos-transfer-item:not(.is-disabled):active{cursor:grabbing}:host(.is-card-drag) .talos-transfer-item:not(.is-disabled) .talos-transfer-checkbox-wrap{cursor:pointer}.talos-transfer-drag-handle{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #94a3b8);cursor:grab;padding:.125rem;border-radius:var(--talos-radius-xs, .125rem);flex-shrink:0}.talos-transfer-drag-handle:hover{color:var(--talos-text-primary, #0f172a);background-color:#94a3b833}.talos-transfer-drag-handle:active{cursor:grabbing}.talos-transfer-item-content{flex:1 1 0%;min-width:0}.talos-transfer-item-text{display:flex;flex-direction:column;min-width:0}.talos-transfer-item-text .talos-transfer-item-label{font-size:var(--talos-font-size-sm, .8125rem);color:var(--talos-text-primary, #0f172a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}.talos-transfer-item-text .talos-transfer-item-desc{font-size:var(--talos-font-size-2xs, .6875rem);color:var(--talos-text-muted, #64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.0625rem;line-height:1.2}.talos-transfer-checkbox-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin:0;padding:0;flex-shrink:0}.talos-transfer-checkbox-wrap.is-disabled{cursor:not-allowed;opacity:.5}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox{position:absolute;opacity:0;width:0;height:0;margin:0}.talos-transfer-checkbox-wrap .talos-transfer-checkbox-custom{display:inline-block;width:1rem;height:1rem;border:1.5px solid var(--talos-border-default, #94a3b8);border-radius:var(--talos-radius-xs, .1875rem);background-color:var(--talos-bg-surface, #ffffff);transition:all var(--talos-transition, .15s ease);position:relative;box-sizing:border-box}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox:checked+.talos-transfer-checkbox-custom{background-color:var(--talos-primary, #2563eb);border-color:var(--talos-primary, #2563eb)}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox:checked+.talos-transfer-checkbox-custom:after{content:\"\";position:absolute;left:.25rem;top:.09375rem;width:.3125rem;height:.5625rem;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox:indeterminate+.talos-transfer-checkbox-custom{background-color:var(--talos-primary, #2563eb);border-color:var(--talos-primary, #2563eb)}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox:indeterminate+.talos-transfer-checkbox-custom:after{content:\"\";position:absolute;left:.1875rem;top:.375rem;width:.5rem;height:2px;background-color:#fff;border-radius:1px}.talos-transfer-checkbox-wrap .talos-transfer-native-checkbox:focus-visible+.talos-transfer-checkbox-custom{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .3))}.talos-transfer-actions,.talos-transfer-reorder-actions{display:flex;flex-direction:column;justify-content:center;align-items:center;align-self:center;gap:.375rem;padding:0 .125rem;flex-shrink:0}@media(max-width:640px){.talos-transfer-actions,.talos-transfer-reorder-actions{flex-direction:row;padding:.25rem 0}}.talos-transfer-action-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--talos-radius-md, .375rem);background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-border-default, #cbd5e1);color:var(--talos-text-muted, #64748b);cursor:pointer;transition:all var(--talos-transition, .18s ease);outline:none;box-shadow:var(--talos-shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, .04))}.talos-transfer-action-btn:hover:not(:disabled){background-color:var(--talos-bg-subtle, #f1f5f9);border-color:var(--talos-border-hover, #94a3b8);color:var(--talos-text-primary, #0f172a);transform:translateY(-1px)}.talos-transfer-action-btn:active:not(:disabled){transform:translateY(0)}.talos-transfer-action-btn.is-active{background-color:var(--talos-primary, #2563eb);border-color:var(--talos-primary, #2563eb);color:#fff;box-shadow:var(--talos-shadow-sm, 0 1px 3px 0 rgba(37, 99, 235, .2))}.talos-transfer-action-btn.is-active:hover:not(:disabled){background-color:#1d4ed8;border-color:#1d4ed8;color:#fff}.talos-transfer-action-btn:disabled{opacity:.45;cursor:not-allowed;background-color:var(--talos-bg-subtle, #f8fafc);border-color:var(--talos-border-subtle, #e2e8f0)}.talos-transfer-action-btn:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .25))}.cdk-drag-preview{box-sizing:border-box;display:flex;align-items:center;padding:.5rem .875rem;border-radius:var(--talos-radius-md, .375rem);background-color:var(--talos-bg-surface, #ffffff);border:1px solid var(--talos-primary, #2563eb);box-shadow:var(--talos-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .12));color:var(--talos-primary-text, #1e40af);font-size:var(--talos-font-size-sm, .8125rem);font-weight:var(--talos-font-weight-medium, 500);z-index:1000;pointer-events:none}.talos-transfer-drag-placeholder{min-height:2.25rem;background-color:var(--talos-primary-subtle-bg, #eff6ff);border:1.5px dashed var(--talos-primary, #2563eb);border-radius:var(--talos-radius-xs, .1875rem);margin:.125rem .25rem;transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.talos-transfer-list-body.cdk-drop-list-dragging .talos-transfer-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.talos-spin{animation:talosSpin 1s linear infinite}@keyframes talosSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.transfer-size-sm) .talos-transfer-pane{flex-basis:210px;min-width:190px;max-width:300px}:host(.transfer-size-sm) .talos-transfer-header{padding:.375rem .5rem;min-height:1.875rem}:host(.transfer-size-sm) .talos-transfer-header .talos-transfer-title{font-size:var(--talos-font-size-xs, .75rem)}:host(.transfer-size-sm) .talos-transfer-header .talos-transfer-counter{font-size:var(--talos-font-size-2xs, .6875rem);padding:.0625rem .3125rem}:host(.transfer-size-sm) .talos-transfer-search-wrapper{padding:.25rem .375rem}:host(.transfer-size-sm) .talos-transfer-search-wrapper .talos-transfer-search-input{height:1.75rem;padding-left:1.625rem;padding-right:1.5rem;font-size:var(--talos-font-size-2xs, .6875rem)}:host(.transfer-size-sm) .talos-transfer-search-wrapper .talos-transfer-search-icon{left:.625rem}:host(.transfer-size-sm) .talos-transfer-item{padding:.25rem .5rem}:host(.transfer-size-sm) .talos-transfer-item .talos-transfer-item-label{font-size:var(--talos-font-size-xs, .75rem)}:host(.transfer-size-sm) .talos-transfer-item .talos-transfer-item-desc{font-size:.625rem}:host(.transfer-size-sm) .talos-transfer-checkbox-wrap .talos-transfer-checkbox-custom{width:.875rem;height:.875rem}:host(.transfer-size-sm) .talos-transfer-checkbox-wrap .talos-transfer-checkbox-custom:after{left:.1875rem;top:.0625rem;width:.25rem;height:.4375rem}:host(.transfer-size-sm) .talos-transfer-action-btn{width:1.625rem;height:1.625rem}:host(.transfer-size-sm) .talos-transfer-action-btn svg{width:13px;height:13px}:host(.transfer-size-lg) .talos-transfer-pane{flex-basis:300px;min-width:260px;max-width:440px}:host(.transfer-size-lg) .talos-transfer-header{padding:.625rem .875rem;min-height:2.625rem}:host(.transfer-size-lg) .talos-transfer-header .talos-transfer-title{font-size:var(--talos-font-size-base, .875rem)}:host(.transfer-size-lg) .talos-transfer-header .talos-transfer-counter{font-size:var(--talos-font-size-sm, .8125rem);padding:.1875rem .5rem}:host(.transfer-size-lg) .talos-transfer-search-wrapper{padding:.5rem .625rem}:host(.transfer-size-lg) .talos-transfer-search-wrapper .talos-transfer-search-input{height:2.25rem;padding-left:2.125rem;padding-right:2rem;font-size:var(--talos-font-size-sm, .8125rem)}:host(.transfer-size-lg) .talos-transfer-search-wrapper .talos-transfer-search-icon{left:1rem}:host(.transfer-size-lg) .talos-transfer-item{padding:.5rem .75rem}:host(.transfer-size-lg) .talos-transfer-item .talos-transfer-item-label{font-size:var(--talos-font-size-base, .875rem)}:host(.transfer-size-lg) .talos-transfer-item .talos-transfer-item-desc{font-size:var(--talos-font-size-xs, .75rem)}:host(.transfer-size-lg) .talos-transfer-checkbox-wrap .talos-transfer-checkbox-custom{width:1.125rem;height:1.125rem}:host(.transfer-size-lg) .talos-transfer-checkbox-wrap .talos-transfer-checkbox-custom:after{left:.28125rem;top:.125rem;width:.34375rem;height:.625rem}:host(.transfer-size-lg) .talos-transfer-action-btn{width:2.25rem;height:2.25rem}:host(.transfer-size-lg) .talos-transfer-action-btn svg{width:17px;height:17px}:host-context([data-theme=dark]) .talos-transfer-pane,:host-context(.dark-theme) .talos-transfer-pane{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-border-default, #334155);box-shadow:0 1px 3px #0000004d}:host-context([data-theme=dark]).transfer-variant-elevated .talos-transfer-pane,:host-context(.dark-theme).transfer-variant-elevated .talos-transfer-pane{background-color:var(--talos-bg-surface, #1e293b);border-color:#334155;box-shadow:0 10px 25px -5px #00000080,0 4px 10px -2px #0000004d}:host-context([data-theme=dark]).transfer-variant-elevated .talos-transfer-pane:hover,:host-context(.dark-theme).transfer-variant-elevated .talos-transfer-pane:hover{box-shadow:0 14px 28px -4px #0009,0 6px 14px -2px #0006}:host-context([data-theme=dark]).transfer-variant-elevated .talos-transfer-header,:host-context(.dark-theme).transfer-variant-elevated .talos-transfer-header{background:linear-gradient(180deg,var(--talos-bg-surface, #1e293b) 0%,var(--talos-bg-subtle, #0f172a) 100%);border-bottom-color:#334155}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-pane,:host-context(.dark-theme).transfer-variant-flat .talos-transfer-pane{background-color:#0f172a;border-color:transparent;box-shadow:none}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-header,:host-context(.dark-theme).transfer-variant-flat .talos-transfer-header{background-color:transparent;border-bottom-color:#ffffff0f}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-search-wrapper,:host-context(.dark-theme).transfer-variant-flat .talos-transfer-search-wrapper{background-color:transparent;border-bottom-color:#ffffff0f}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-search-wrapper .talos-transfer-search-input,:host-context(.dark-theme).transfer-variant-flat .talos-transfer-search-wrapper .talos-transfer-search-input{background-color:var(--talos-bg-surface, #1e293b);border-color:transparent}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-list-body,:host-context(.dark-theme).transfer-variant-flat .talos-transfer-list-body{background-color:transparent}:host-context([data-theme=dark]).transfer-variant-flat .talos-transfer-item:hover:not(.is-disabled),:host-context(.dark-theme).transfer-variant-flat .talos-transfer-item:hover:not(.is-disabled){background-color:var(--talos-bg-surface, #1e293b)}:host-context([data-theme=dark]).transfer-variant-bordered .talos-transfer-pane,:host-context(.dark-theme).transfer-variant-bordered .talos-transfer-pane{border-color:#475569}:host-context([data-theme=dark]).transfer-variant-bordered .talos-transfer-header,:host-context(.dark-theme).transfer-variant-bordered .talos-transfer-header{border-bottom-color:#475569;background-color:#0f172a}:host-context([data-theme=dark]).transfer-variant-bordered .talos-transfer-search-wrapper,:host-context(.dark-theme).transfer-variant-bordered .talos-transfer-search-wrapper{border-bottom-color:#334155}:host-context([data-theme=dark]).transfer-variant-bordered .talos-transfer-action-btn,:host-context(.dark-theme).transfer-variant-bordered .talos-transfer-action-btn{border-color:#475569}:host-context([data-theme=dark]) .talos-transfer-header,:host-context(.dark-theme) .talos-transfer-header{background-color:var(--talos-bg-subtle, #0f172a);border-bottom-color:var(--talos-border-default, #334155)}:host-context([data-theme=dark]) .talos-transfer-header .talos-transfer-title,:host-context(.dark-theme) .talos-transfer-header .talos-transfer-title{color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-transfer-header .talos-transfer-counter,:host-context(.dark-theme) .talos-transfer-header .talos-transfer-counter{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-border-default, #334155);color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-transfer-search-wrapper,:host-context(.dark-theme) .talos-transfer-search-wrapper{background-color:var(--talos-bg-surface, #1e293b);border-bottom-color:var(--talos-border-default, #334155)}:host-context([data-theme=dark]) .talos-transfer-search-wrapper .talos-transfer-search-input,:host-context(.dark-theme) .talos-transfer-search-wrapper .talos-transfer-search-input{background-color:var(--talos-bg-subtle, #0f172a);border-color:var(--talos-border-default, #334155);color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-transfer-search-wrapper .talos-transfer-search-input:focus,:host-context(.dark-theme) .talos-transfer-search-wrapper .talos-transfer-search-input:focus{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-primary, #3b82f6);box-shadow:0 0 0 2px #3b82f640}:host-context([data-theme=dark]) .talos-transfer-list-body,:host-context(.dark-theme) .talos-transfer-list-body{background-color:var(--talos-bg-surface, #1e293b);scrollbar-color:var(--talos-border-default, #334155) transparent}:host-context([data-theme=dark]) .talos-transfer-list-body::-webkit-scrollbar-thumb,:host-context(.dark-theme) .talos-transfer-list-body::-webkit-scrollbar-thumb{background-color:var(--talos-border-default, #334155)}:host-context([data-theme=dark]) .talos-transfer-item:hover:not(.is-disabled),:host-context(.dark-theme) .talos-transfer-item:hover:not(.is-disabled){background-color:var(--talos-bg-subtle, #334155)}:host-context([data-theme=dark]) .talos-transfer-item.is-selected,:host-context(.dark-theme) .talos-transfer-item.is-selected{background-color:#3b82f633;color:#93c5fd}:host-context([data-theme=dark]) .talos-transfer-item.is-selected .talos-transfer-item-label,:host-context(.dark-theme) .talos-transfer-item.is-selected .talos-transfer-item-label{color:#93c5fd}:host-context([data-theme=dark]) .talos-transfer-item .talos-transfer-item-text .talos-transfer-item-label,:host-context(.dark-theme) .talos-transfer-item .talos-transfer-item-text .talos-transfer-item-label{color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-transfer-action-btn,:host-context(.dark-theme) .talos-transfer-action-btn{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-border-default, #334155);color:var(--talos-text-muted, #94a3b8)}:host-context([data-theme=dark]) .talos-transfer-action-btn:hover:not(:disabled),:host-context(.dark-theme) .talos-transfer-action-btn:hover:not(:disabled){background-color:var(--talos-bg-subtle, #334155);border-color:var(--talos-border-hover, #64748b);color:var(--talos-text-primary, #f8fafc)}:host-context([data-theme=dark]) .talos-transfer-action-btn.is-active,:host-context(.dark-theme) .talos-transfer-action-btn.is-active{background-color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6);color:#fff}:host-context([data-theme=dark]) .talos-transfer-action-btn.is-active:hover:not(:disabled),:host-context(.dark-theme) .talos-transfer-action-btn.is-active:hover:not(:disabled){background-color:#2563eb}:host-context([data-theme=dark]) .talos-transfer-action-btn:disabled,:host-context(.dark-theme) .talos-transfer-action-btn:disabled{background-color:var(--talos-bg-subtle, #0f172a);border-color:var(--talos-border-default, #334155)}:host-context([data-theme=dark]) .talos-transfer-checkbox-custom,:host-context(.dark-theme) .talos-transfer-checkbox-custom{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-border-default, #475569)}:host-context([data-theme=dark]) .cdk-drag-preview,:host-context(.dark-theme) .cdk-drag-preview{background-color:var(--talos-bg-surface, #1e293b);border-color:var(--talos-primary, #3b82f6);color:#93c5fd}:host-context([data-theme=dark]) .talos-transfer-drag-placeholder,:host-context(.dark-theme) .talos-transfer-drag-placeholder{background-color:#3b82f626;border-color:var(--talos-primary, #3b82f6)}\n"] }]
|
|
896
|
-
}], ctorParameters: () => [], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], titles: [{ type: i0.Input, args: [{ isSignal: true, alias: "titles", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchMode", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], sourceSearchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceSearchQuery", required: false }] }], targetSearchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSearchQuery", required: false }] }], searchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounce", required: false }] }], searchHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchHandler", required: false }] }], sourceSearchHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceSearchHandler", required: false }] }], targetSearchHandler: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetSearchHandler", required: false }] }], sourceLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceLoading", required: false }] }], targetLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetLoading", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], showMoveAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMoveAll", required: false }] }], showReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showReorder", required: false }] }], dragDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragDrop", required: false }] }], dragMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragMode", required: false }] }], dragHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragHandle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], listWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "listWidth", required: false }] }], itemKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemKey", required: false }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], itemDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDescription", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptySourceText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptySourceText", required: false }] }], emptyTargetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTargetText", required: false }] }], searchingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchingText", required: false }] }], noMatchesText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noMatchesText", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], sourceChange: [{ type: i0.Output, args: ["sourceChange"] }], targetChange: [{ type: i0.Output, args: ["targetChange"] }], transfer: [{ type: i0.Output, args: ["transfer"] }], search: [{ type: i0.Output, args: ["search"] }], sourceSearchChange: [{ type: i0.Output, args: ["sourceSearchChange"] }], targetSearchChange: [{ type: i0.Output, args: ["targetSearchChange"] }], searchError: [{ type: i0.Output, args: ["searchError"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], targetReorder: [{ type: i0.Output, args: ["targetReorder"] }] } });
|
|
897
|
-
|
|
898
|
-
class TalosTransferListModule {
|
|
899
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTransferListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
900
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosTransferListModule, imports: [TalosTransferListComponent], exports: [TalosTransferListComponent] });
|
|
901
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTransferListModule, imports: [TalosTransferListComponent] });
|
|
902
|
-
}
|
|
903
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosTransferListModule, decorators: [{
|
|
904
|
-
type: NgModule,
|
|
905
|
-
args: [{
|
|
906
|
-
imports: [TalosTransferListComponent],
|
|
907
|
-
exports: [TalosTransferListComponent]
|
|
908
|
-
}]
|
|
909
|
-
}] });
|
|
910
|
-
|
|
911
|
-
/**
|
|
912
|
-
* Generated bundle index. Do not edit.
|
|
913
|
-
*/
|
|
914
|
-
|
|
915
|
-
export { TalosTransferListComponent, TalosTransferListModule };
|
|
916
|
-
//# sourceMappingURL=weeehaoooz-talos-ui-form-transfer-list.mjs.map
|