@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.
Files changed (187) hide show
  1. package/README.md +2 -0
  2. package/fesm2022/{weeehaoooz-talos-ui-button-button-group.mjs → weeehaoooz-talos-ui-button.mjs} +115 -18
  3. package/fesm2022/weeehaoooz-talos-ui-button.mjs.map +1 -0
  4. package/fesm2022/weeehaoooz-talos-ui-data-display.mjs +3110 -0
  5. package/fesm2022/weeehaoooz-talos-ui-data-display.mjs.map +1 -0
  6. package/fesm2022/weeehaoooz-talos-ui-data-viz.mjs +2414 -0
  7. package/fesm2022/weeehaoooz-talos-ui-data-viz.mjs.map +1 -0
  8. package/fesm2022/weeehaoooz-talos-ui-dropdown.mjs +1039 -0
  9. package/fesm2022/weeehaoooz-talos-ui-dropdown.mjs.map +1 -0
  10. package/fesm2022/weeehaoooz-talos-ui-feedback.mjs +2885 -0
  11. package/fesm2022/weeehaoooz-talos-ui-feedback.mjs.map +1 -0
  12. package/fesm2022/weeehaoooz-talos-ui-form.mjs +10799 -0
  13. package/fesm2022/weeehaoooz-talos-ui-form.mjs.map +1 -0
  14. package/fesm2022/weeehaoooz-talos-ui-layout.mjs +1320 -11
  15. package/fesm2022/weeehaoooz-talos-ui-layout.mjs.map +1 -1
  16. package/fesm2022/weeehaoooz-talos-ui-nav.mjs +119 -72
  17. package/fesm2022/weeehaoooz-talos-ui-nav.mjs.map +1 -1
  18. package/fesm2022/weeehaoooz-talos-ui.mjs +22190 -15213
  19. package/fesm2022/weeehaoooz-talos-ui.mjs.map +1 -1
  20. package/package.json +20 -135
  21. package/styles/_breadcrumb.scss +16 -0
  22. package/styles/_button-group.scss +156 -7
  23. package/styles/_buttons.scss +156 -8
  24. package/styles/_dropdown.scss +438 -0
  25. package/styles/_form-controls.scss +13 -0
  26. package/styles/_progress-bar.scss +43 -0
  27. package/styles/_skeleton.scss +176 -0
  28. package/styles/_spinner.scss +58 -0
  29. package/styles/_variables.scss +37 -0
  30. package/styles/index.scss +6 -1
  31. package/types/weeehaoooz-talos-ui-button.d.ts +92 -0
  32. package/types/weeehaoooz-talos-ui-button.d.ts.map +1 -0
  33. package/types/weeehaoooz-talos-ui-data-display.d.ts +1018 -0
  34. package/types/weeehaoooz-talos-ui-data-display.d.ts.map +1 -0
  35. package/types/weeehaoooz-talos-ui-data-viz.d.ts +839 -0
  36. package/types/weeehaoooz-talos-ui-data-viz.d.ts.map +1 -0
  37. package/types/weeehaoooz-talos-ui-dropdown.d.ts +187 -0
  38. package/types/weeehaoooz-talos-ui-dropdown.d.ts.map +1 -0
  39. package/types/weeehaoooz-talos-ui-feedback.d.ts +1495 -0
  40. package/types/weeehaoooz-talos-ui-feedback.d.ts.map +1 -0
  41. package/types/weeehaoooz-talos-ui-form.d.ts +2639 -0
  42. package/types/weeehaoooz-talos-ui-form.d.ts.map +1 -0
  43. package/types/weeehaoooz-talos-ui-layout.d.ts +851 -3
  44. package/types/weeehaoooz-talos-ui-layout.d.ts.map +1 -1
  45. package/types/weeehaoooz-talos-ui-nav.d.ts +36 -10
  46. package/types/weeehaoooz-talos-ui-nav.d.ts.map +1 -1
  47. package/types/weeehaoooz-talos-ui.d.ts +6949 -4137
  48. package/types/weeehaoooz-talos-ui.d.ts.map +1 -1
  49. package/fesm2022/weeehaoooz-talos-ui-button-button-group.mjs.map +0 -1
  50. package/fesm2022/weeehaoooz-talos-ui-button-button.mjs +0 -93
  51. package/fesm2022/weeehaoooz-talos-ui-button-button.mjs.map +0 -1
  52. package/fesm2022/weeehaoooz-talos-ui-data-display-badge.mjs +0 -233
  53. package/fesm2022/weeehaoooz-talos-ui-data-display-badge.mjs.map +0 -1
  54. package/fesm2022/weeehaoooz-talos-ui-data-display-status-tag.mjs +0 -361
  55. package/fesm2022/weeehaoooz-talos-ui-data-display-status-tag.mjs.map +0 -1
  56. package/fesm2022/weeehaoooz-talos-ui-data-display-timeline.mjs +0 -312
  57. package/fesm2022/weeehaoooz-talos-ui-data-display-timeline.mjs.map +0 -1
  58. package/fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs +0 -235
  59. package/fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs.map +0 -1
  60. package/fesm2022/weeehaoooz-talos-ui-data-viz-category-bar.mjs +0 -462
  61. package/fesm2022/weeehaoooz-talos-ui-data-viz-category-bar.mjs.map +0 -1
  62. package/fesm2022/weeehaoooz-talos-ui-data-viz-heatmap.mjs +0 -805
  63. package/fesm2022/weeehaoooz-talos-ui-data-viz-heatmap.mjs.map +0 -1
  64. package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-donut.mjs +0 -267
  65. package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-donut.mjs.map +0 -1
  66. package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-gauge.mjs +0 -351
  67. package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-gauge.mjs.map +0 -1
  68. package/fesm2022/weeehaoooz-talos-ui-data-viz-sparkline.mjs +0 -566
  69. package/fesm2022/weeehaoooz-talos-ui-data-viz-sparkline.mjs.map +0 -1
  70. package/fesm2022/weeehaoooz-talos-ui-feedback-alert.mjs +0 -534
  71. package/fesm2022/weeehaoooz-talos-ui-feedback-alert.mjs.map +0 -1
  72. package/fesm2022/weeehaoooz-talos-ui-feedback-dialog.mjs +0 -446
  73. package/fesm2022/weeehaoooz-talos-ui-feedback-dialog.mjs.map +0 -1
  74. package/fesm2022/weeehaoooz-talos-ui-feedback-snackbar.mjs +0 -376
  75. package/fesm2022/weeehaoooz-talos-ui-feedback-snackbar.mjs.map +0 -1
  76. package/fesm2022/weeehaoooz-talos-ui-feedback-tooltip.mjs +0 -147
  77. package/fesm2022/weeehaoooz-talos-ui-feedback-tooltip.mjs.map +0 -1
  78. package/fesm2022/weeehaoooz-talos-ui-form-affix.mjs +0 -242
  79. package/fesm2022/weeehaoooz-talos-ui-form-affix.mjs.map +0 -1
  80. package/fesm2022/weeehaoooz-talos-ui-form-autocomplete.mjs +0 -514
  81. package/fesm2022/weeehaoooz-talos-ui-form-autocomplete.mjs.map +0 -1
  82. package/fesm2022/weeehaoooz-talos-ui-form-checkbox.mjs +0 -548
  83. package/fesm2022/weeehaoooz-talos-ui-form-checkbox.mjs.map +0 -1
  84. package/fesm2022/weeehaoooz-talos-ui-form-chips.mjs +0 -692
  85. package/fesm2022/weeehaoooz-talos-ui-form-chips.mjs.map +0 -1
  86. package/fesm2022/weeehaoooz-talos-ui-form-color-picker.mjs +0 -761
  87. package/fesm2022/weeehaoooz-talos-ui-form-color-picker.mjs.map +0 -1
  88. package/fesm2022/weeehaoooz-talos-ui-form-date-picker.mjs +0 -896
  89. package/fesm2022/weeehaoooz-talos-ui-form-date-picker.mjs.map +0 -1
  90. package/fesm2022/weeehaoooz-talos-ui-form-date-range-picker.mjs +0 -872
  91. package/fesm2022/weeehaoooz-talos-ui-form-date-range-picker.mjs.map +0 -1
  92. package/fesm2022/weeehaoooz-talos-ui-form-date-time-picker.mjs +0 -119
  93. package/fesm2022/weeehaoooz-talos-ui-form-date-time-picker.mjs.map +0 -1
  94. package/fesm2022/weeehaoooz-talos-ui-form-date-time-range-picker.mjs +0 -135
  95. package/fesm2022/weeehaoooz-talos-ui-form-date-time-range-picker.mjs.map +0 -1
  96. package/fesm2022/weeehaoooz-talos-ui-form-drop-zone.mjs +0 -666
  97. package/fesm2022/weeehaoooz-talos-ui-form-drop-zone.mjs.map +0 -1
  98. package/fesm2022/weeehaoooz-talos-ui-form-form-field.mjs +0 -147
  99. package/fesm2022/weeehaoooz-talos-ui-form-form-field.mjs.map +0 -1
  100. package/fesm2022/weeehaoooz-talos-ui-form-input.mjs +0 -33
  101. package/fesm2022/weeehaoooz-talos-ui-form-input.mjs.map +0 -1
  102. package/fesm2022/weeehaoooz-talos-ui-form-otp.mjs +0 -455
  103. package/fesm2022/weeehaoooz-talos-ui-form-otp.mjs.map +0 -1
  104. package/fesm2022/weeehaoooz-talos-ui-form-password-input.mjs +0 -379
  105. package/fesm2022/weeehaoooz-talos-ui-form-password-input.mjs.map +0 -1
  106. package/fesm2022/weeehaoooz-talos-ui-form-radio.mjs +0 -297
  107. package/fesm2022/weeehaoooz-talos-ui-form-radio.mjs.map +0 -1
  108. package/fesm2022/weeehaoooz-talos-ui-form-range-input.mjs +0 -661
  109. package/fesm2022/weeehaoooz-talos-ui-form-range-input.mjs.map +0 -1
  110. package/fesm2022/weeehaoooz-talos-ui-form-rating.mjs +0 -346
  111. package/fesm2022/weeehaoooz-talos-ui-form-rating.mjs.map +0 -1
  112. package/fesm2022/weeehaoooz-talos-ui-form-select-input.mjs +0 -896
  113. package/fesm2022/weeehaoooz-talos-ui-form-select-input.mjs.map +0 -1
  114. package/fesm2022/weeehaoooz-talos-ui-form-slide-toggle.mjs +0 -252
  115. package/fesm2022/weeehaoooz-talos-ui-form-slide-toggle.mjs.map +0 -1
  116. package/fesm2022/weeehaoooz-talos-ui-form-transfer-list.mjs +0 -916
  117. package/fesm2022/weeehaoooz-talos-ui-form-transfer-list.mjs.map +0 -1
  118. package/types/weeehaoooz-talos-ui-button-button-group.d.ts +0 -59
  119. package/types/weeehaoooz-talos-ui-button-button-group.d.ts.map +0 -1
  120. package/types/weeehaoooz-talos-ui-button-button.d.ts +0 -38
  121. package/types/weeehaoooz-talos-ui-button-button.d.ts.map +0 -1
  122. package/types/weeehaoooz-talos-ui-data-display-badge.d.ts +0 -119
  123. package/types/weeehaoooz-talos-ui-data-display-badge.d.ts.map +0 -1
  124. package/types/weeehaoooz-talos-ui-data-display-status-tag.d.ts +0 -135
  125. package/types/weeehaoooz-talos-ui-data-display-status-tag.d.ts.map +0 -1
  126. package/types/weeehaoooz-talos-ui-data-display-timeline.d.ts +0 -144
  127. package/types/weeehaoooz-talos-ui-data-display-timeline.d.ts.map +0 -1
  128. package/types/weeehaoooz-talos-ui-data-display-trend-indicator.d.ts +0 -83
  129. package/types/weeehaoooz-talos-ui-data-display-trend-indicator.d.ts.map +0 -1
  130. package/types/weeehaoooz-talos-ui-data-viz-category-bar.d.ts +0 -255
  131. package/types/weeehaoooz-talos-ui-data-viz-category-bar.d.ts.map +0 -1
  132. package/types/weeehaoooz-talos-ui-data-viz-heatmap.d.ts +0 -204
  133. package/types/weeehaoooz-talos-ui-data-viz-heatmap.d.ts.map +0 -1
  134. package/types/weeehaoooz-talos-ui-data-viz-mini-donut.d.ts +0 -101
  135. package/types/weeehaoooz-talos-ui-data-viz-mini-donut.d.ts.map +0 -1
  136. package/types/weeehaoooz-talos-ui-data-viz-mini-gauge.d.ts +0 -138
  137. package/types/weeehaoooz-talos-ui-data-viz-mini-gauge.d.ts.map +0 -1
  138. package/types/weeehaoooz-talos-ui-data-viz-sparkline.d.ts +0 -161
  139. package/types/weeehaoooz-talos-ui-data-viz-sparkline.d.ts.map +0 -1
  140. package/types/weeehaoooz-talos-ui-feedback-alert.d.ts +0 -212
  141. package/types/weeehaoooz-talos-ui-feedback-alert.d.ts.map +0 -1
  142. package/types/weeehaoooz-talos-ui-feedback-dialog.d.ts +0 -259
  143. package/types/weeehaoooz-talos-ui-feedback-dialog.d.ts.map +0 -1
  144. package/types/weeehaoooz-talos-ui-feedback-snackbar.d.ts +0 -147
  145. package/types/weeehaoooz-talos-ui-feedback-snackbar.d.ts.map +0 -1
  146. package/types/weeehaoooz-talos-ui-feedback-tooltip.d.ts +0 -32
  147. package/types/weeehaoooz-talos-ui-feedback-tooltip.d.ts.map +0 -1
  148. package/types/weeehaoooz-talos-ui-form-affix.d.ts +0 -88
  149. package/types/weeehaoooz-talos-ui-form-affix.d.ts.map +0 -1
  150. package/types/weeehaoooz-talos-ui-form-autocomplete.d.ts +0 -113
  151. package/types/weeehaoooz-talos-ui-form-autocomplete.d.ts.map +0 -1
  152. package/types/weeehaoooz-talos-ui-form-checkbox.d.ts +0 -165
  153. package/types/weeehaoooz-talos-ui-form-checkbox.d.ts.map +0 -1
  154. package/types/weeehaoooz-talos-ui-form-chips.d.ts +0 -152
  155. package/types/weeehaoooz-talos-ui-form-chips.d.ts.map +0 -1
  156. package/types/weeehaoooz-talos-ui-form-color-picker.d.ts +0 -144
  157. package/types/weeehaoooz-talos-ui-form-color-picker.d.ts.map +0 -1
  158. package/types/weeehaoooz-talos-ui-form-date-picker.d.ts +0 -138
  159. package/types/weeehaoooz-talos-ui-form-date-picker.d.ts.map +0 -1
  160. package/types/weeehaoooz-talos-ui-form-date-range-picker.d.ts +0 -148
  161. package/types/weeehaoooz-talos-ui-form-date-range-picker.d.ts.map +0 -1
  162. package/types/weeehaoooz-talos-ui-form-date-time-picker.d.ts +0 -44
  163. package/types/weeehaoooz-talos-ui-form-date-time-picker.d.ts.map +0 -1
  164. package/types/weeehaoooz-talos-ui-form-date-time-range-picker.d.ts +0 -48
  165. package/types/weeehaoooz-talos-ui-form-date-time-range-picker.d.ts.map +0 -1
  166. package/types/weeehaoooz-talos-ui-form-drop-zone.d.ts +0 -227
  167. package/types/weeehaoooz-talos-ui-form-drop-zone.d.ts.map +0 -1
  168. package/types/weeehaoooz-talos-ui-form-form-field.d.ts +0 -42
  169. package/types/weeehaoooz-talos-ui-form-form-field.d.ts.map +0 -1
  170. package/types/weeehaoooz-talos-ui-form-input.d.ts +0 -15
  171. package/types/weeehaoooz-talos-ui-form-input.d.ts.map +0 -1
  172. package/types/weeehaoooz-talos-ui-form-otp.d.ts +0 -111
  173. package/types/weeehaoooz-talos-ui-form-otp.d.ts.map +0 -1
  174. package/types/weeehaoooz-talos-ui-form-password-input.d.ts +0 -145
  175. package/types/weeehaoooz-talos-ui-form-password-input.d.ts.map +0 -1
  176. package/types/weeehaoooz-talos-ui-form-radio.d.ts +0 -84
  177. package/types/weeehaoooz-talos-ui-form-radio.d.ts.map +0 -1
  178. package/types/weeehaoooz-talos-ui-form-range-input.d.ts +0 -181
  179. package/types/weeehaoooz-talos-ui-form-range-input.d.ts.map +0 -1
  180. package/types/weeehaoooz-talos-ui-form-rating.d.ts +0 -110
  181. package/types/weeehaoooz-talos-ui-form-rating.d.ts.map +0 -1
  182. package/types/weeehaoooz-talos-ui-form-select-input.d.ts +0 -195
  183. package/types/weeehaoooz-talos-ui-form-select-input.d.ts.map +0 -1
  184. package/types/weeehaoooz-talos-ui-form-slide-toggle.d.ts +0 -79
  185. package/types/weeehaoooz-talos-ui-form-slide-toggle.d.ts.map +0 -1
  186. package/types/weeehaoooz-talos-ui-form-transfer-list.d.ts +0 -192
  187. 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() }} &ldquo;<strong>{{ internalSourceQuery() }}</strong>&rdquo;</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() }} &ldquo;<strong>{{ internalTargetQuery() }}</strong>&rdquo;</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() }} &ldquo;<strong>{{ internalSourceQuery() }}</strong>&rdquo;</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() }} &ldquo;<strong>{{ internalTargetQuery() }}</strong>&rdquo;</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