ngx-tethys 19.1.0-next.5 → 19.1.0-next.7

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 (107) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/color-picker/coordinates.directive.d.ts +1 -2
  3. package/date-picker/abstract-picker.component.d.ts +50 -52
  4. package/date-picker/abstract-picker.directive.d.ts +15 -40
  5. package/date-picker/base-picker.component.d.ts +12 -40
  6. package/date-picker/date-picker.config.d.ts +1 -0
  7. package/date-picker/lib/calendar/calendar-footer.component.d.ts +24 -19
  8. package/date-picker/lib/calendar/calendar-header.component.d.ts +15 -15
  9. package/date-picker/lib/calendar/calendar-table.component.d.ts +15 -16
  10. package/date-picker/lib/date/date-table-cell.component.d.ts +2 -3
  11. package/date-picker/lib/date/date-table.component.d.ts +2 -3
  12. package/date-picker/lib/date-carousel/date-carousel.component.d.ts +2 -3
  13. package/date-picker/lib/decade/decade-header.component.d.ts +2 -5
  14. package/date-picker/lib/decade/decade-table.component.d.ts +3 -5
  15. package/date-picker/lib/month/month-table.component.d.ts +1 -2
  16. package/date-picker/lib/popups/date-popup.component.d.ts +33 -34
  17. package/date-picker/lib/popups/inner-popup.component.d.ts +22 -29
  18. package/date-picker/lib/quarter/quarter-table.component.d.ts +1 -4
  19. package/date-picker/lib/year/year-header.component.d.ts +2 -4
  20. package/date-picker/lib/year/year-table.component.d.ts +2 -4
  21. package/date-picker/month-picker.component.d.ts +2 -2
  22. package/date-picker/picker.component.d.ts +31 -36
  23. package/date-picker/picker.pipes.d.ts +4 -5
  24. package/date-picker/picker.util.d.ts +5 -5
  25. package/date-picker/picker.validators.d.ts +4 -8
  26. package/date-picker/quarter-picker.component.d.ts +2 -3
  27. package/date-picker/week-picker.component.d.ts +0 -1
  28. package/date-picker/year-picker.component.d.ts +2 -3
  29. package/dropdown/dropdown-menu.component.d.ts +1 -1
  30. package/dropdown/dropdown.directive.d.ts +4 -3
  31. package/fesm2022/ngx-tethys-autocomplete.mjs +4 -4
  32. package/fesm2022/ngx-tethys-autocomplete.mjs.map +1 -1
  33. package/fesm2022/ngx-tethys-checkbox.mjs +2 -2
  34. package/fesm2022/ngx-tethys-checkbox.mjs.map +1 -1
  35. package/fesm2022/ngx-tethys-color-picker.mjs +4 -6
  36. package/fesm2022/ngx-tethys-color-picker.mjs.map +1 -1
  37. package/fesm2022/ngx-tethys-copy.mjs +2 -2
  38. package/fesm2022/ngx-tethys-copy.mjs.map +1 -1
  39. package/fesm2022/ngx-tethys-date-picker.mjs +841 -1068
  40. package/fesm2022/ngx-tethys-date-picker.mjs.map +1 -1
  41. package/fesm2022/ngx-tethys-dropdown.mjs +9 -11
  42. package/fesm2022/ngx-tethys-dropdown.mjs.map +1 -1
  43. package/fesm2022/ngx-tethys-flexible-text.mjs +4 -5
  44. package/fesm2022/ngx-tethys-flexible-text.mjs.map +1 -1
  45. package/fesm2022/ngx-tethys-i18n.mjs +11 -6
  46. package/fesm2022/ngx-tethys-i18n.mjs.map +1 -1
  47. package/fesm2022/ngx-tethys-image.mjs +5 -7
  48. package/fesm2022/ngx-tethys-image.mjs.map +1 -1
  49. package/fesm2022/ngx-tethys-layout.mjs +291 -334
  50. package/fesm2022/ngx-tethys-layout.mjs.map +1 -1
  51. package/fesm2022/ngx-tethys-list.mjs +147 -166
  52. package/fesm2022/ngx-tethys-list.mjs.map +1 -1
  53. package/fesm2022/ngx-tethys-message.mjs +1 -2
  54. package/fesm2022/ngx-tethys-message.mjs.map +1 -1
  55. package/fesm2022/ngx-tethys-radio.mjs +4 -4
  56. package/fesm2022/ngx-tethys-radio.mjs.map +1 -1
  57. package/fesm2022/ngx-tethys-select.mjs +164 -228
  58. package/fesm2022/ngx-tethys-select.mjs.map +1 -1
  59. package/fesm2022/ngx-tethys-shared.mjs +386 -569
  60. package/fesm2022/ngx-tethys-shared.mjs.map +1 -1
  61. package/fesm2022/ngx-tethys-skeleton.mjs +1 -2
  62. package/fesm2022/ngx-tethys-skeleton.mjs.map +1 -1
  63. package/fesm2022/ngx-tethys-table.mjs +1 -2
  64. package/fesm2022/ngx-tethys-table.mjs.map +1 -1
  65. package/fesm2022/ngx-tethys-tooltip.mjs +109 -93
  66. package/fesm2022/ngx-tethys-tooltip.mjs.map +1 -1
  67. package/fesm2022/ngx-tethys-tree-select.mjs +215 -281
  68. package/fesm2022/ngx-tethys-tree-select.mjs.map +1 -1
  69. package/fesm2022/ngx-tethys.mjs +1 -1
  70. package/fesm2022/ngx-tethys.mjs.map +1 -1
  71. package/i18n/i18n.d.ts +2 -1
  72. package/i18n/locales/de-de.d.ts +2 -1
  73. package/i18n/locales/en-us.d.ts +2 -1
  74. package/i18n/locales/ja-jp.d.ts +2 -1
  75. package/i18n/locales/zh-hans.d.ts +2 -1
  76. package/i18n/locales/zh-hant.d.ts +2 -1
  77. package/image/preview/image-preview.component.d.ts +2 -2
  78. package/layout/header.component.d.ts +15 -19
  79. package/layout/layout.component.d.ts +3 -2
  80. package/layout/sidebar-header.component.d.ts +7 -8
  81. package/layout/sidebar.component.d.ts +32 -62
  82. package/list/selection/selection-list.d.ts +33 -46
  83. package/package.json +1 -1
  84. package/schematics/version.d.ts +1 -1
  85. package/schematics/version.js +1 -1
  86. package/select/custom-select/custom-select.component.d.ts +33 -56
  87. package/select/native-select/native-select.component.d.ts +7 -13
  88. package/shared/base-form-check.component.d.ts +6 -8
  89. package/shared/directives/string-or-template-outlet.directive.d.ts +5 -6
  90. package/shared/directives/thy-autofocus.directive.d.ts +4 -6
  91. package/shared/directives/thy-contextmenu.directive.d.ts +2 -2
  92. package/shared/directives/thy-ctrl-enter.directive.d.ts +2 -2
  93. package/shared/directives/thy-enter.directive.d.ts +2 -2
  94. package/shared/directives/thy-scroll.directive.d.ts +5 -8
  95. package/shared/directives/thy-show.d.ts +5 -6
  96. package/shared/directives/thy-stop-propagation.directive.d.ts +4 -4
  97. package/shared/directives/view-outlet.directive.d.ts +6 -7
  98. package/shared/ng-transclude.directive.d.ts +2 -3
  99. package/shared/option/group/option-group.component.d.ts +5 -9
  100. package/shared/option/list-option/list-option.component.d.ts +9 -13
  101. package/shared/option/option.component.d.ts +10 -17
  102. package/shared/option/option.token.d.ts +4 -3
  103. package/shared/option/options-container.component.d.ts +1 -1
  104. package/shared/select/select-control/select-control.component.d.ts +27 -47
  105. package/table/table-column.component.d.ts +15 -5
  106. package/tooltip/tooltip.directive.d.ts +20 -22
  107. package/tree-select/tree-select.component.d.ts +53 -70
@@ -1,7 +1,7 @@
1
1
  import { ViewportRuler, CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
2
2
  import { isPlatformBrowser, NgTemplateOutlet, NgClass, NgStyle, CommonModule } from '@angular/common';
3
3
  import * as i0 from '@angular/core';
4
- import { inject, ElementRef, NgZone, ChangeDetectorRef, PLATFORM_ID, output, forwardRef, Input, ViewChild, ContentChild, HostBinding, Component, NgModule } from '@angular/core';
4
+ import { inject, ElementRef, NgZone, ChangeDetectorRef, PLATFORM_ID, DestroyRef, signal, computed, contentChild, viewChild, input, output, effect, forwardRef, Input, Component, NgModule } from '@angular/core';
5
5
  import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
6
6
  import { ThyEmpty, ThyEmptyModule } from 'ngx-tethys/empty';
7
7
  import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
@@ -9,11 +9,12 @@ import { ThyListModule } from 'ngx-tethys/list';
9
9
  import { ThySelectControl, ThyStopPropagationDirective, ThySelectCommonModule, ThySharedModule } from 'ngx-tethys/shared';
10
10
  import { TabIndexDisabledControlValueAccessorMixin, ThyClickDispatcher, EXPANDED_DROPDOWN_POSITIONS, scaleYMotion, injectPanelEmptyIcon } from 'ngx-tethys/core';
11
11
  import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
12
- import { warnDeprecation, isObject, elementMatchClosest, isArray, produce, coerceBooleanProperty } from 'ngx-tethys/util';
13
- import { Subject, of } from 'rxjs';
14
- import { takeUntil, take } from 'rxjs/operators';
12
+ import { isObject, coerceBooleanProperty, elementMatchClosest, isArray, produce } from 'ngx-tethys/util';
13
+ import { of } from 'rxjs';
14
+ import { take } from 'rxjs/operators';
15
15
  import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
16
16
  import { injectLocale } from 'ngx-tethys/i18n';
17
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
17
18
 
18
19
  function filterTreeData(treeNodes, searchText, searchKey = 'name') {
19
20
  const filterNodes = (node, result) => {
@@ -39,53 +40,13 @@ function filterTreeData(treeNodes, searchText, searchKey = 'name') {
39
40
  * @order 10
40
41
  */
41
42
  class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
42
- /**
43
- * treeNodes 数据
44
- * @type ThyTreeSelectNode[]
45
- */
46
- set thyTreeNodes(value) {
47
- this.treeNodes = value;
48
- this.originTreeNodes = value;
49
- if (this.initialled) {
50
- this.flattenTreeNodes = this.flattenNodes(this.treeNodes, this.flattenTreeNodes, []);
51
- this.setSelectedNodes();
52
- if (this.thyVirtualScroll) {
53
- this.buildFlattenTreeNodes();
54
- }
55
- }
56
- }
57
43
  get thyDisabled() {
58
- return this.thyDisable;
59
- }
60
- get placeholder() {
61
- return this.thyPlaceholder;
62
- }
63
- /**
64
- * 图标类型,支持 default | especial,已废弃
65
- * @deprecated
66
- */
67
- set thyIconType(type) {
68
- if (typeof ngDevMode === 'undefined' || ngDevMode) {
69
- warnDeprecation('This parameter has been deprecation');
70
- }
71
- // if (type === 'especial') {
72
- // this.icons = { expand: 'minus-square', collapse: 'plus-square', gap: 20 };
73
- // } else {
74
- // this.icons = { expand: 'caret-right-down', collapse: 'caret-right', gap: 15 };
75
- // }
76
- }
77
- _getNgModelType() {
78
- if (this.thyMultiple) {
79
- this.valueIsObject = !this.selectedValue[0] || isObject(this.selectedValue[0]);
80
- }
81
- else {
82
- this.valueIsObject = isObject(this.selectedValue);
83
- }
44
+ return this.thyDisable();
84
45
  }
85
46
  buildFlattenTreeNodes() {
86
- this.virtualTreeNodes = this.getFlattenTreeNodes(this.treeNodes);
47
+ this.virtualTreeNodes.set(this.getFlattenTreeNodes(this.treeNodes()));
87
48
  }
88
- getFlattenTreeNodes(rootTrees = this.treeNodes) {
49
+ getFlattenTreeNodes(rootTrees = this.treeNodes()) {
89
50
  const forEachTree = (tree, fn, result = []) => {
90
51
  tree.forEach(item => {
91
52
  result.push(item);
@@ -98,11 +59,7 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
98
59
  return forEachTree(rootTrees, (node) => !!node.expand);
99
60
  }
100
61
  writeValue(value) {
101
- this.selectedValue = value;
102
- if (value) {
103
- this._getNgModelType();
104
- }
105
- this.setSelectedNodes();
62
+ this.selectedValue.set(value);
106
63
  }
107
64
  constructor() {
108
65
  super();
@@ -112,85 +69,120 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
112
69
  this.platformId = inject(PLATFORM_ID);
113
70
  this.thyClickDispatcher = inject(ThyClickDispatcher);
114
71
  this.viewportRuler = inject(ViewportRuler);
115
- this.treeSelectClass = true;
116
- this.isTreeSelect = true;
72
+ this.destroyRef = inject(DestroyRef);
117
73
  // 菜单是否展开
118
- this.expandTreeSelectOptions = false;
119
- this.isMulti = false;
120
- this.selectedNodes = [];
121
- this.flattenTreeNodes = [];
122
- this.virtualTreeNodes = [];
123
- this.cdkConnectOverlayWidth = 0;
74
+ this.expandTreeSelectOptions = signal(false);
75
+ this.selectedValue = signal(undefined);
76
+ this.selectedNode = signal(null);
77
+ this.selectedNodes = signal([]);
78
+ this.flattenTreeNodes = signal([]);
79
+ this.virtualTreeNodes = signal([]);
80
+ this.cdkConnectOverlayWidth = signal(0);
124
81
  this.expandedDropdownPositions = EXPANDED_DROPDOWN_POSITIONS;
125
82
  this.icons = {
126
83
  expand: 'angle-down',
127
84
  collapse: 'angle-right',
128
85
  gap: 15
129
86
  };
130
- this.initialled = false;
131
- this.destroy$ = new Subject();
132
87
  this.locale = injectLocale('treeSelect');
133
- this.valueIsObject = false;
88
+ this.valueIsObject = computed(() => {
89
+ const selectedValue = this.selectedValue();
90
+ if (this.thyMultiple()) {
91
+ return selectedValue && (!selectedValue[0] || isObject(selectedValue[0]));
92
+ }
93
+ else {
94
+ return isObject(selectedValue);
95
+ }
96
+ });
97
+ this.searchText = signal('');
98
+ this.thyTreeSelectTriggerDisplayRef = contentChild('thyTreeSelectTriggerDisplay');
99
+ this.treeNodeTemplateRef = contentChild('treeNodeTemplate');
100
+ this.cdkOverlayOrigin = viewChild(CdkOverlayOrigin);
101
+ this.cdkConnectedOverlay = viewChild(CdkConnectedOverlay);
102
+ this.customDisplayTemplate = viewChild('customDisplayTemplate');
103
+ /**
104
+ * treeNodes 数据
105
+ * @type ThyTreeSelectNode[]
106
+ */
107
+ this.thyTreeNodes = input([]);
108
+ this.treeNodes = computed(() => {
109
+ return filterTreeData(this.thyTreeNodes(), this.searchText(), this.thyShowKey());
110
+ });
134
111
  /**
135
112
  * 开启虚拟滚动
136
113
  */
137
- this.thyVirtualScroll = false;
114
+ this.thyVirtualScroll = input(false, { transform: coerceBooleanProperty });
138
115
  /**
139
116
  * 树节点的唯一标识
140
117
  * @type string
141
118
  */
142
- this.thyPrimaryKey = '_id';
119
+ this.thyPrimaryKey = input('_id');
143
120
  /**
144
121
  * 树节点的显示的字段 key
145
122
  * @type string
146
123
  */
147
- this.thyShowKey = 'name';
148
- this.thyChildCountKey = 'childCount';
124
+ this.thyShowKey = input('name');
125
+ this.thyChildCountKey = input('childCount');
126
+ /**
127
+ * 单选时,是否显示清除按钮,当为 true 时,显示清除按钮
128
+ * @default false
129
+ */
130
+ this.thyAllowClear = input(false, { transform: coerceBooleanProperty });
149
131
  /**
150
132
  * 是否多选
151
133
  * @type boolean
152
134
  */
153
- this.thyMultiple = false;
135
+ this.thyMultiple = input(false, { transform: coerceBooleanProperty });
154
136
  /**
155
137
  * 是否禁用树选择器,当为 true 禁用树选择器
156
138
  * @type boolean
157
139
  */
158
- this.thyDisable = false;
140
+ this.thyDisable = input(false, { transform: coerceBooleanProperty });
159
141
  /**
160
142
  * 树选择框默认文字
161
143
  * @type string
162
144
  */
163
- this.thyPlaceholder = this.locale().placeholder;
145
+ this.thyPlaceholder = input(this.locale().placeholder);
146
+ /**
147
+ * 控制树选择的输入框大小
148
+ * @type xs | sm | md | default | lg
149
+ */
150
+ this.thySize = input(undefined);
164
151
  /**
165
152
  * 改变空选项的情况下的提示文本
166
153
  * @type string
167
154
  */
168
- this.thyEmptyOptionsText = this.locale().empty;
155
+ this.thyEmptyOptionsText = input(this.locale().empty);
169
156
  /**
170
157
  * 设置是否隐藏节点(不可进行任何操作),优先级高于 thyHiddenNodeFn
171
158
  * @type string
172
159
  */
173
- this.thyHiddenNodeKey = 'hidden';
160
+ this.thyHiddenNodeKey = input('hidden');
174
161
  /**
175
162
  * 设置是否禁用节点(不可进行任何操作),优先级高于 thyDisableNodeFn
176
163
  * @type string
177
164
  */
178
- this.thyDisableNodeKey = 'disabled';
165
+ this.thyDisableNodeKey = input('disabled');
179
166
  /**
180
167
  * 是否异步加载节点的子节点(显示加载状态),当为 true 时,异步获取
181
168
  * @type boolean
182
169
  */
183
- this.thyAsyncNode = false;
170
+ this.thyAsyncNode = input(false, { transform: coerceBooleanProperty });
184
171
  /**
185
172
  * 是否展示全名
186
173
  * @type boolean
187
174
  */
188
- this.thyShowWholeName = false;
175
+ this.thyShowWholeName = input(false, { transform: coerceBooleanProperty });
189
176
  /**
190
177
  * 是否展示搜索
191
178
  * @type boolean
192
179
  */
193
- this.thyShowSearch = false;
180
+ this.thyShowSearch = input(false, { transform: coerceBooleanProperty });
181
+ /**
182
+ * 图标类型,支持 default | especial,已废弃
183
+ * @deprecated
184
+ */
185
+ this.thyIconType = input(undefined);
194
186
  /**
195
187
  * 设置是否隐藏节点(不可进行任何操作),优先级低于 thyHiddenNodeKey。
196
188
  * @default (node: ThyTreeSelectNode) => boolean = (node: ThyTreeSelectNode) => node.hidden
@@ -210,34 +202,44 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
210
202
  * 树选择组件展开和折叠状态事件
211
203
  */
212
204
  this.thyExpandStatusChange = output();
205
+ this.selectedValueObject = computed(() => {
206
+ return this.thyMultiple() ? this.selectedNodes() : this.selectedNode();
207
+ });
208
+ this.bindClickEvent();
209
+ this.bindResizeEvent();
210
+ effect(() => {
211
+ this.setSelectedNodes();
212
+ });
213
+ effect(() => {
214
+ if (this.thyVirtualScroll()) {
215
+ this.buildFlattenTreeNodes();
216
+ }
217
+ });
218
+ effect(() => {
219
+ this.flattenTreeNodes.set(this.flattenNodes(this.treeNodes(), []));
220
+ });
213
221
  }
214
- ngOnInit() {
215
- this.isMulti = this.thyMultiple;
216
- this.flattenTreeNodes = this.flattenNodes(this.treeNodes, this.flattenTreeNodes, []);
217
- this.setSelectedNodes();
218
- this.initialled = true;
219
- if (this.thyVirtualScroll) {
220
- this.buildFlattenTreeNodes();
221
- }
222
+ bindClickEvent() {
222
223
  if (isPlatformBrowser(this.platformId)) {
223
224
  this.thyClickDispatcher
224
225
  .clicked(0)
225
- .pipe(takeUntil(this.destroy$))
226
+ .pipe(takeUntilDestroyed(this.destroyRef))
226
227
  .subscribe(event => {
227
228
  event.stopPropagation();
228
- if (!this.elementRef.nativeElement.contains(event.target) && this.expandTreeSelectOptions) {
229
+ if (!this.elementRef.nativeElement.contains(event.target) && this.expandTreeSelectOptions()) {
229
230
  this.ngZone.run(() => {
230
231
  this.close();
231
- this.ref.markForCheck();
232
232
  });
233
233
  }
234
234
  });
235
235
  }
236
+ }
237
+ bindResizeEvent() {
236
238
  this.viewportRuler
237
239
  .change()
238
- .pipe(takeUntil(this.destroy$))
240
+ .pipe(takeUntilDestroyed(this.destroyRef))
239
241
  .subscribe(() => {
240
- this.init();
242
+ this.cdkConnectOverlayWidth.set(this.cdkOverlayOrigin().elementRef.nativeElement.getBoundingClientRect().width);
241
243
  });
242
244
  }
243
245
  onFocus($event) {
@@ -252,109 +254,105 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
252
254
  }
253
255
  this.onTouchedFn();
254
256
  }
255
- ngOnDestroy() {
256
- this.destroy$.next();
257
- }
258
- get selectedValueObject() {
259
- return this.thyMultiple ? this.selectedNodes : this.selectedNode;
260
- }
261
257
  searchValue(searchText) {
262
- this.treeNodes = filterTreeData(this.originTreeNodes, searchText.trim(), this.thyShowKey);
258
+ this.searchText.set(searchText.trim());
263
259
  }
264
260
  setPosition() {
265
261
  this.ngZone.onStable
266
262
  .asObservable()
267
263
  .pipe(take(1))
268
264
  .subscribe(() => {
269
- this.cdkConnectedOverlay.overlayRef.updatePosition();
265
+ this.cdkConnectedOverlay().overlayRef.updatePosition();
270
266
  });
271
267
  }
272
- init() {
273
- this.cdkConnectOverlayWidth = this.cdkOverlayOrigin.elementRef.nativeElement.getBoundingClientRect().width;
274
- }
275
- flattenNodes(nodes = [], resultNodes = [], parentPrimaryValue = []) {
276
- resultNodes = resultNodes.concat(nodes);
277
- let nodesLeafs = [];
268
+ flattenNodes(nodes = [], parentPrimaryValue = []) {
269
+ let flattenedNodes = [];
278
270
  (nodes || []).forEach(item => {
279
271
  item.parentValues = parentPrimaryValue;
280
272
  item.level = item.parentValues.length;
273
+ flattenedNodes.push(item);
281
274
  if (item.children && isArray(item.children)) {
282
- const nodeLeafs = this.flattenNodes(item.children, resultNodes, [...parentPrimaryValue, item[this.thyPrimaryKey]]);
283
- nodesLeafs = [...nodesLeafs, ...nodeLeafs];
275
+ const childNodes = this.flattenNodes(item.children, [...parentPrimaryValue, item[this.thyPrimaryKey()]]);
276
+ flattenedNodes = flattenedNodes.concat(childNodes);
284
277
  }
285
278
  });
286
- return [...nodes, ...nodesLeafs];
279
+ return flattenedNodes;
287
280
  }
288
281
  _findTreeNode(value) {
289
- return (this.flattenTreeNodes || []).find(item => item[this.thyPrimaryKey] === value);
282
+ return (this.flattenTreeNodes() || []).find(item => item[this.thyPrimaryKey()] === value);
290
283
  }
291
284
  setSelectedNodes() {
292
- if (this.selectedValue) {
285
+ const isMultiple = this.thyMultiple();
286
+ const primaryKey = this.thyPrimaryKey();
287
+ const selectedValue = this.selectedValue();
288
+ const valueIsObject = this.valueIsObject();
289
+ if (selectedValue) {
293
290
  // 多选数据初始化
294
- if (this.thyMultiple) {
295
- if (this.selectedValue.length > 0) {
296
- if (this.valueIsObject && Object.keys(this.selectedValue[0]).indexOf(this.thyPrimaryKey) >= 0) {
297
- this.selectedNodes = this.selectedValue.map((item) => {
298
- return this._findTreeNode(item[this.thyPrimaryKey]);
299
- });
291
+ if (isMultiple) {
292
+ if (selectedValue.length > 0) {
293
+ if (valueIsObject && Object.keys(selectedValue[0]).indexOf(primaryKey) >= 0) {
294
+ this.selectedNodes.set(selectedValue.map((item) => {
295
+ return this._findTreeNode(item[primaryKey]);
296
+ }));
300
297
  }
301
298
  else {
302
- this.selectedNodes = this.selectedValue.map((item) => {
299
+ this.selectedNodes.set(selectedValue.map((item) => {
303
300
  return this._findTreeNode(item);
304
- });
301
+ }));
305
302
  }
306
303
  }
307
304
  }
308
305
  else {
309
306
  // 单选数据初始化
310
- if (this.valueIsObject) {
311
- if (Object.keys(this.selectedValue).indexOf(this.thyPrimaryKey) >= 0) {
312
- this.selectedNode = this._findTreeNode(this.selectedValue[this.thyPrimaryKey]);
307
+ if (valueIsObject) {
308
+ if (Object.keys(selectedValue).indexOf(primaryKey) >= 0) {
309
+ this.selectedNode.set(this._findTreeNode(selectedValue[primaryKey]));
313
310
  }
314
311
  }
315
312
  else {
316
- this.selectedNode = this._findTreeNode(this.selectedValue);
313
+ this.selectedNode.set(this._findTreeNode(selectedValue));
317
314
  }
318
315
  }
319
316
  }
320
317
  else {
321
- this.selectedNodes = [];
322
- this.selectedNode = null;
318
+ this.selectedNodes.set([]);
319
+ this.selectedNode.set(null);
323
320
  }
324
321
  }
325
322
  openSelectPop() {
326
- if (this.thyDisable) {
323
+ if (this.thyDisable()) {
327
324
  return;
328
325
  }
329
- this.cdkConnectOverlayWidth = this.cdkOverlayOrigin.elementRef.nativeElement.getBoundingClientRect().width;
330
- this.expandTreeSelectOptions = !this.expandTreeSelectOptions;
331
- this.thyExpandStatusChange.emit(this.expandTreeSelectOptions);
326
+ this.cdkConnectOverlayWidth.set(this.cdkOverlayOrigin().elementRef.nativeElement.getBoundingClientRect().width);
327
+ this.expandTreeSelectOptions.set(!this.expandTreeSelectOptions());
328
+ this.thyExpandStatusChange.emit(this.expandTreeSelectOptions());
332
329
  }
333
330
  close() {
334
- if (this.expandTreeSelectOptions) {
335
- this.expandTreeSelectOptions = false;
336
- this.thyExpandStatusChange.emit(this.expandTreeSelectOptions);
331
+ if (this.expandTreeSelectOptions()) {
332
+ this.expandTreeSelectOptions.set(false);
333
+ this.thyExpandStatusChange.emit(false);
337
334
  this.onTouchedFn();
338
335
  }
339
336
  }
340
337
  clearSelectedValue(event) {
341
338
  event.stopPropagation();
342
- this.selectedValue = null;
343
- this.selectedNode = null;
344
- this.selectedNodes = [];
345
- this.onChangeFn(this.selectedValue);
339
+ this.selectedValue.set(null);
340
+ this.selectedNode.set(null);
341
+ this.selectedNodes.set([]);
342
+ this.onChangeFn(null);
346
343
  }
347
344
  _changeSelectValue() {
348
- if (this.valueIsObject) {
349
- this.selectedValue = this.thyMultiple ? this.selectedNodes : this.selectedNode;
345
+ const selectedNodes = this.selectedNodes();
346
+ const selectedNode = this.selectedNode();
347
+ if (this.valueIsObject()) {
348
+ this.selectedValue.set(this.thyMultiple() ? selectedNodes : selectedNode);
350
349
  }
351
350
  else {
352
- this.selectedValue = this.thyMultiple
353
- ? this.selectedNodes.map(item => item[this.thyPrimaryKey])
354
- : this.selectedNode[this.thyPrimaryKey];
351
+ const value = this.thyMultiple() ? selectedNodes.map(item => item[this.thyPrimaryKey()]) : selectedNode[this.thyPrimaryKey()];
352
+ this.selectedValue.set(value);
355
353
  }
356
- this.onChangeFn(this.selectedValue);
357
- if (!this.thyMultiple) {
354
+ this.onChangeFn(this.selectedValue());
355
+ if (!this.thyMultiple()) {
358
356
  this.onTouchedFn();
359
357
  }
360
358
  }
@@ -366,31 +364,31 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
366
364
  if (event) {
367
365
  event.stopPropagation();
368
366
  }
369
- if (this.thyDisable) {
367
+ if (this.thyDisable()) {
370
368
  return;
371
369
  }
372
- if (this.thyMultiple) {
373
- this.selectedNodes = produce(this.selectedNodes).remove((item) => {
374
- return item[this.thyPrimaryKey] === node[this.thyPrimaryKey];
375
- });
370
+ if (this.thyMultiple()) {
371
+ this.selectedNodes.set(produce(this.selectedNodes()).remove((item) => {
372
+ return item[this.thyPrimaryKey()] === node[this.thyPrimaryKey()];
373
+ }));
376
374
  this._changeSelectValue();
377
375
  }
378
376
  }
379
377
  selectNode(node) {
380
- if (!this.thyMultiple) {
381
- this.selectedNode = node;
382
- this.expandTreeSelectOptions = false;
383
- this.thyExpandStatusChange.emit(this.expandTreeSelectOptions);
378
+ if (!this.thyMultiple()) {
379
+ this.selectedNode.set(node);
380
+ this.expandTreeSelectOptions.set(false);
381
+ this.thyExpandStatusChange.emit(false);
384
382
  this._changeSelectValue();
385
383
  }
386
384
  else {
387
- if (this.selectedNodes.find(item => {
388
- return item[this.thyPrimaryKey] === node[this.thyPrimaryKey];
385
+ if (this.selectedNodes().find(item => {
386
+ return item[this.thyPrimaryKey()] === node[this.thyPrimaryKey()];
389
387
  })) {
390
388
  this.removeSelectedNode(node);
391
389
  }
392
390
  else {
393
- this.selectedNodes = produce(this.selectedNodes).add(node);
391
+ this.selectedNodes.set(produce(this.selectedNodes()).add(node));
394
392
  this._changeSelectValue();
395
393
  }
396
394
  }
@@ -398,27 +396,28 @@ class ThyTreeSelect extends TabIndexDisabledControlValueAccessorMixin {
398
396
  getNodeChildren(node) {
399
397
  const result = this.thyGetNodeChildren(node);
400
398
  if (result && result.subscribe) {
401
- result.pipe().subscribe((data) => {
402
- const nodes = this.flattenNodes(data, this.flattenTreeNodes, [...node.parentValues, node[this.thyPrimaryKey]]);
399
+ result.subscribe((data) => {
400
+ const flattenTreeNodes = this.flattenTreeNodes();
401
+ const nodes = this.flattenNodes(data, [...node.parentValues, node[this.thyPrimaryKey()]]);
403
402
  const otherNodes = nodes.filter((item) => {
404
- return !this.flattenTreeNodes.find(hasItem => {
405
- return hasItem[this.thyPrimaryKey] === item[this.thyPrimaryKey];
403
+ return !flattenTreeNodes.find(hasItem => {
404
+ return hasItem[this.thyPrimaryKey()] === item[this.thyPrimaryKey()];
406
405
  });
407
406
  });
408
- this.flattenTreeNodes = [...this.flattenTreeNodes, ...otherNodes];
407
+ this.flattenTreeNodes.set(flattenTreeNodes.concat(otherNodes));
409
408
  node.children = data;
410
409
  });
411
410
  return result;
412
411
  }
413
412
  }
414
413
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
415
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelect, isStandalone: true, selector: "thy-tree-select", inputs: { thyTreeNodes: "thyTreeNodes", thyVirtualScroll: ["thyVirtualScroll", "thyVirtualScroll", coerceBooleanProperty], thyPrimaryKey: "thyPrimaryKey", thyShowKey: "thyShowKey", thyChildCountKey: "thyChildCountKey", thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty], thyMultiple: ["thyMultiple", "thyMultiple", coerceBooleanProperty], thyDisable: ["thyDisable", "thyDisable", coerceBooleanProperty], thyPlaceholder: "thyPlaceholder", thySize: "thySize", thyEmptyOptionsText: "thyEmptyOptionsText", thyHiddenNodeKey: "thyHiddenNodeKey", thyDisableNodeKey: "thyDisableNodeKey", thyAsyncNode: ["thyAsyncNode", "thyAsyncNode", coerceBooleanProperty], thyShowWholeName: ["thyShowWholeName", "thyShowWholeName", coerceBooleanProperty], thyShowSearch: ["thyShowSearch", "thyShowSearch", coerceBooleanProperty], thyIconType: "thyIconType", thyHiddenNodeFn: "thyHiddenNodeFn", thyDisableNodeFn: "thyDisableNodeFn", thyGetNodeChildren: "thyGetNodeChildren" }, outputs: { thyExpandStatusChange: "thyExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "tabIndex", "class.thy-select-custom": "this.treeSelectClass", "class.thy-select": "this.isTreeSelect", "class.menu-is-opened": "this.expandTreeSelectOptions", "class.thy-select-custom--multiple": "this.isMulti" } }, providers: [
414
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelect, isStandalone: true, selector: "thy-tree-select", inputs: { thyTreeNodes: { classPropertyName: "thyTreeNodes", publicName: "thyTreeNodes", isSignal: true, isRequired: false, transformFunction: null }, thyVirtualScroll: { classPropertyName: "thyVirtualScroll", publicName: "thyVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, thyPrimaryKey: { classPropertyName: "thyPrimaryKey", publicName: "thyPrimaryKey", isSignal: true, isRequired: false, transformFunction: null }, thyShowKey: { classPropertyName: "thyShowKey", publicName: "thyShowKey", isSignal: true, isRequired: false, transformFunction: null }, thyChildCountKey: { classPropertyName: "thyChildCountKey", publicName: "thyChildCountKey", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyMultiple: { classPropertyName: "thyMultiple", publicName: "thyMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyDisable: { classPropertyName: "thyDisable", publicName: "thyDisable", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyEmptyOptionsText: { classPropertyName: "thyEmptyOptionsText", publicName: "thyEmptyOptionsText", isSignal: true, isRequired: false, transformFunction: null }, thyHiddenNodeKey: { classPropertyName: "thyHiddenNodeKey", publicName: "thyHiddenNodeKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisableNodeKey: { classPropertyName: "thyDisableNodeKey", publicName: "thyDisableNodeKey", isSignal: true, isRequired: false, transformFunction: null }, thyAsyncNode: { classPropertyName: "thyAsyncNode", publicName: "thyAsyncNode", isSignal: true, isRequired: false, transformFunction: null }, thyShowWholeName: { classPropertyName: "thyShowWholeName", publicName: "thyShowWholeName", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thyIconType: { classPropertyName: "thyIconType", publicName: "thyIconType", isSignal: true, isRequired: false, transformFunction: null }, thyHiddenNodeFn: { classPropertyName: "thyHiddenNodeFn", publicName: "thyHiddenNodeFn", isSignal: false, isRequired: false, transformFunction: null }, thyDisableNodeFn: { classPropertyName: "thyDisableNodeFn", publicName: "thyDisableNodeFn", isSignal: false, isRequired: false, transformFunction: null }, thyGetNodeChildren: { classPropertyName: "thyGetNodeChildren", publicName: "thyGetNodeChildren", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { thyExpandStatusChange: "thyExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "class.thy-select-custom--multiple": "thyMultiple()", "class.menu-is-opened": "expandTreeSelectOptions()", "attr.tabindex": "tabIndex" }, classAttribute: "thy-select-custom thy-select" }, providers: [
416
415
  {
417
416
  provide: NG_VALUE_ACCESSOR,
418
417
  useExisting: forwardRef(() => ThyTreeSelect),
419
418
  multi: true
420
419
  }
421
- ], queries: [{ propertyName: "thyTreeSelectTriggerDisplayRef", first: true, predicate: ["thyTreeSelectTriggerDisplay"], descendants: true }, { propertyName: "treeNodeTemplateRef", first: true, predicate: ["treeNodeTemplate"], descendants: true }], viewQueries: [{ propertyName: "cdkOverlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, static: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "customDisplayTemplate", first: true, predicate: ["customDisplayTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n cdkOverlayOrigin\n thySelectControl\n (click)=\"openSelectPop()\"\n #origin=\"cdkOverlayOrigin\"\n [thyPanelOpened]=\"expandTreeSelectOptions\"\n [thySelectedOptions]=\"selectedValueObject\"\n [thyIsMultiple]=\"thyMultiple\"\n [thyAllowClear]=\"thyAllowClear\"\n [thySize]=\"thySize\"\n [thyPlaceholder]=\"placeholder\"\n [customDisplayTemplate]=\"customDisplayTemplate\"\n [thyShowSearch]=\"thyShowSearch\"\n [thyDisabled]=\"thyDisable\"\n (thyOnBlur)=\"onBlur($event)\"\n (thyOnClear)=\"clearSelectedValue($event)\"\n (thyOnRemove)=\"removeMultipleSelectedNode($event)\"\n (thyOnSearch)=\"searchValue($event)\">\n <ng-template #customDisplayTemplate let-node>\n @if (thyTreeSelectTriggerDisplayRef) {\n <ng-template [ngTemplateOutlet]=\"thyTreeSelectTriggerDisplayRef\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n {{ node[thyShowKey] }}\n }\n </ng-template>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayMinWidth]=\"cdkConnectOverlayWidth\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayOpen]=\"expandTreeSelectOptions\"\n cdkConnectedOverlayTransformOriginOn=\".thy-tree-select-dropdown\"\n [cdkConnectedOverlayPositions]=\"expandedDropdownPositions\"\n (detach)=\"close()\">\n <thy-tree-select-nodes\n thyStopPropagation\n [thyVirtualScroll]=\"thyVirtualScroll\"\n [treeNodes]=\"thyVirtualScroll ? virtualTreeNodes : treeNodes\"\n [@scaleYMotion]=\"'enter'\">\n </thy-tree-select-nodes>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => ThySelectControl), selector: "thy-select-control,[thySelectControl]", inputs: ["thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: i0.forwardRef(() => ThyTreeSelectNodes), selector: "thy-tree-select-nodes", inputs: ["treeNodes", "thyVirtualScroll"] }, { kind: "directive", type: i0.forwardRef(() => ThyStopPropagationDirective), selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }], animations: [scaleYMotion] }); }
420
+ ], queries: [{ propertyName: "thyTreeSelectTriggerDisplayRef", first: true, predicate: ["thyTreeSelectTriggerDisplay"], descendants: true, isSignal: true }, { propertyName: "treeNodeTemplateRef", first: true, predicate: ["treeNodeTemplate"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "cdkOverlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "customDisplayTemplate", first: true, predicate: ["customDisplayTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n cdkOverlayOrigin\n thySelectControl\n (click)=\"openSelectPop()\"\n #origin=\"cdkOverlayOrigin\"\n [thyPanelOpened]=\"expandTreeSelectOptions()\"\n [thySelectedOptions]=\"selectedValueObject()\"\n [thyIsMultiple]=\"thyMultiple()\"\n [thyAllowClear]=\"thyAllowClear()\"\n [thySize]=\"thySize()\"\n [thyPlaceholder]=\"thyPlaceholder()\"\n [customDisplayTemplate]=\"customDisplayTemplate\"\n [thyShowSearch]=\"thyShowSearch()\"\n [thyDisabled]=\"thyDisable()\"\n (thyOnBlur)=\"onBlur($event)\"\n (thyOnClear)=\"clearSelectedValue($event)\"\n (thyOnRemove)=\"removeMultipleSelectedNode($event)\"\n (thyOnSearch)=\"searchValue($event)\">\n <ng-template #customDisplayTemplate let-node>\n @if (thyTreeSelectTriggerDisplayRef()) {\n <ng-template [ngTemplateOutlet]=\"thyTreeSelectTriggerDisplayRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n {{ node[thyShowKey()] }}\n }\n </ng-template>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayMinWidth]=\"cdkConnectOverlayWidth()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayOpen]=\"expandTreeSelectOptions()\"\n cdkConnectedOverlayTransformOriginOn=\".thy-tree-select-dropdown\"\n [cdkConnectedOverlayPositions]=\"expandedDropdownPositions\"\n (detach)=\"close()\">\n <thy-tree-select-nodes\n thyStopPropagation\n [thyVirtualScroll]=\"thyVirtualScroll()\"\n [treeNodes]=\"thyVirtualScroll() ? virtualTreeNodes() : treeNodes()\"\n [@scaleYMotion]=\"'enter'\">\n </thy-tree-select-nodes>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i0.forwardRef(() => CdkOverlayOrigin), selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i0.forwardRef(() => ThySelectControl), selector: "thy-select-control,[thySelectControl]", inputs: ["thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => CdkConnectedOverlay), selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: i0.forwardRef(() => ThyTreeSelectNodes), selector: "thy-tree-select-nodes", inputs: ["treeNodes", "thyVirtualScroll"] }, { kind: "directive", type: i0.forwardRef(() => ThyStopPropagationDirective), selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }], animations: [scaleYMotion] }); }
422
421
  }
423
422
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelect, decorators: [{
424
423
  type: Component,
@@ -436,79 +435,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
436
435
  forwardRef(() => ThyTreeSelectNodes),
437
436
  ThyStopPropagationDirective
438
437
  ], host: {
438
+ class: 'thy-select-custom thy-select',
439
+ '[class.thy-select-custom--multiple]': 'thyMultiple()',
440
+ '[class.menu-is-opened]': 'expandTreeSelectOptions()',
439
441
  '[attr.tabindex]': 'tabIndex',
440
442
  '(focus)': 'onFocus($event)',
441
443
  '(blur)': 'onBlur($event)'
442
- }, animations: [scaleYMotion], template: "<div\n cdkOverlayOrigin\n thySelectControl\n (click)=\"openSelectPop()\"\n #origin=\"cdkOverlayOrigin\"\n [thyPanelOpened]=\"expandTreeSelectOptions\"\n [thySelectedOptions]=\"selectedValueObject\"\n [thyIsMultiple]=\"thyMultiple\"\n [thyAllowClear]=\"thyAllowClear\"\n [thySize]=\"thySize\"\n [thyPlaceholder]=\"placeholder\"\n [customDisplayTemplate]=\"customDisplayTemplate\"\n [thyShowSearch]=\"thyShowSearch\"\n [thyDisabled]=\"thyDisable\"\n (thyOnBlur)=\"onBlur($event)\"\n (thyOnClear)=\"clearSelectedValue($event)\"\n (thyOnRemove)=\"removeMultipleSelectedNode($event)\"\n (thyOnSearch)=\"searchValue($event)\">\n <ng-template #customDisplayTemplate let-node>\n @if (thyTreeSelectTriggerDisplayRef) {\n <ng-template [ngTemplateOutlet]=\"thyTreeSelectTriggerDisplayRef\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n {{ node[thyShowKey] }}\n }\n </ng-template>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayMinWidth]=\"cdkConnectOverlayWidth\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayOpen]=\"expandTreeSelectOptions\"\n cdkConnectedOverlayTransformOriginOn=\".thy-tree-select-dropdown\"\n [cdkConnectedOverlayPositions]=\"expandedDropdownPositions\"\n (detach)=\"close()\">\n <thy-tree-select-nodes\n thyStopPropagation\n [thyVirtualScroll]=\"thyVirtualScroll\"\n [treeNodes]=\"thyVirtualScroll ? virtualTreeNodes : treeNodes\"\n [@scaleYMotion]=\"'enter'\">\n </thy-tree-select-nodes>\n</ng-template>\n" }]
443
- }], ctorParameters: () => [], propDecorators: { treeSelectClass: [{
444
- type: HostBinding,
445
- args: ['class.thy-select-custom']
446
- }], isTreeSelect: [{
447
- type: HostBinding,
448
- args: ['class.thy-select']
449
- }], expandTreeSelectOptions: [{
450
- type: HostBinding,
451
- args: ['class.menu-is-opened']
452
- }], isMulti: [{
453
- type: HostBinding,
454
- args: ['class.thy-select-custom--multiple']
455
- }], thyTreeSelectTriggerDisplayRef: [{
456
- type: ContentChild,
457
- args: ['thyTreeSelectTriggerDisplay']
458
- }], treeNodeTemplateRef: [{
459
- type: ContentChild,
460
- args: ['treeNodeTemplate']
461
- }], cdkOverlayOrigin: [{
462
- type: ViewChild,
463
- args: [CdkOverlayOrigin, { static: true }]
464
- }], cdkConnectedOverlay: [{
465
- type: ViewChild,
466
- args: [CdkConnectedOverlay, { static: true }]
467
- }], customDisplayTemplate: [{
468
- type: ViewChild,
469
- args: ['customDisplayTemplate', { static: true }]
470
- }], thyTreeNodes: [{
471
- type: Input
472
- }], thyVirtualScroll: [{
473
- type: Input,
474
- args: [{ transform: coerceBooleanProperty }]
475
- }], thyPrimaryKey: [{
476
- type: Input
477
- }], thyShowKey: [{
478
- type: Input
479
- }], thyChildCountKey: [{
480
- type: Input
481
- }], thyAllowClear: [{
482
- type: Input,
483
- args: [{ transform: coerceBooleanProperty }]
484
- }], thyMultiple: [{
485
- type: Input,
486
- args: [{ transform: coerceBooleanProperty }]
487
- }], thyDisable: [{
488
- type: Input,
489
- args: [{ transform: coerceBooleanProperty }]
490
- }], thyPlaceholder: [{
491
- type: Input
492
- }], thySize: [{
493
- type: Input
494
- }], thyEmptyOptionsText: [{
495
- type: Input
496
- }], thyHiddenNodeKey: [{
497
- type: Input
498
- }], thyDisableNodeKey: [{
499
- type: Input
500
- }], thyAsyncNode: [{
501
- type: Input,
502
- args: [{ transform: coerceBooleanProperty }]
503
- }], thyShowWholeName: [{
504
- type: Input,
505
- args: [{ transform: coerceBooleanProperty }]
506
- }], thyShowSearch: [{
507
- type: Input,
508
- args: [{ transform: coerceBooleanProperty }]
509
- }], thyIconType: [{
510
- type: Input
511
- }], thyHiddenNodeFn: [{
444
+ }, animations: [scaleYMotion], template: "<div\n cdkOverlayOrigin\n thySelectControl\n (click)=\"openSelectPop()\"\n #origin=\"cdkOverlayOrigin\"\n [thyPanelOpened]=\"expandTreeSelectOptions()\"\n [thySelectedOptions]=\"selectedValueObject()\"\n [thyIsMultiple]=\"thyMultiple()\"\n [thyAllowClear]=\"thyAllowClear()\"\n [thySize]=\"thySize()\"\n [thyPlaceholder]=\"thyPlaceholder()\"\n [customDisplayTemplate]=\"customDisplayTemplate\"\n [thyShowSearch]=\"thyShowSearch()\"\n [thyDisabled]=\"thyDisable()\"\n (thyOnBlur)=\"onBlur($event)\"\n (thyOnClear)=\"clearSelectedValue($event)\"\n (thyOnRemove)=\"removeMultipleSelectedNode($event)\"\n (thyOnSearch)=\"searchValue($event)\">\n <ng-template #customDisplayTemplate let-node>\n @if (thyTreeSelectTriggerDisplayRef()) {\n <ng-template [ngTemplateOutlet]=\"thyTreeSelectTriggerDisplayRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n {{ node[thyShowKey()] }}\n }\n </ng-template>\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayMinWidth]=\"cdkConnectOverlayWidth()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayOpen]=\"expandTreeSelectOptions()\"\n cdkConnectedOverlayTransformOriginOn=\".thy-tree-select-dropdown\"\n [cdkConnectedOverlayPositions]=\"expandedDropdownPositions\"\n (detach)=\"close()\">\n <thy-tree-select-nodes\n thyStopPropagation\n [thyVirtualScroll]=\"thyVirtualScroll()\"\n [treeNodes]=\"thyVirtualScroll() ? virtualTreeNodes() : treeNodes()\"\n [@scaleYMotion]=\"'enter'\">\n </thy-tree-select-nodes>\n</ng-template>\n" }]
445
+ }], ctorParameters: () => [], propDecorators: { thyHiddenNodeFn: [{
512
446
  type: Input
513
447
  }], thyDisableNodeFn: [{
514
448
  type: Input
@@ -523,68 +457,73 @@ class ThyTreeSelectNodes {
523
457
  constructor() {
524
458
  this.parent = inject(ThyTreeSelect);
525
459
  this.emptyIcon = injectPanelEmptyIcon();
526
- this.nodeList = [];
527
- this.thyVirtualScroll = false;
528
- this.primaryKey = this.parent.thyPrimaryKey;
529
- this.showKey = this.parent.thyShowKey;
530
- this.isMultiple = this.parent.thyMultiple;
531
- this.valueIsObject = this.parent.valueIsObject;
532
- this.selectedValue = this.parent.selectedValue;
533
- this.childCountKey = this.parent.thyChildCountKey;
534
- this.treeNodeTemplateRef = this.parent.treeNodeTemplateRef;
460
+ this.treeNodes = input([]);
461
+ this.thyVirtualScroll = input(false);
462
+ this.isMultiple = computed(() => this.parent.thyMultiple());
463
+ this.childCountKey = computed(() => this.parent.thyChildCountKey());
464
+ this.treeNodeTemplateRef = computed(() => this.parent.treeNodeTemplateRef());
535
465
  this.defaultItemSize = DEFAULT_ITEM_SIZE;
536
- this.thyVirtualHeight = null;
537
- this.hasNodeChildren = false;
538
- }
539
- set treeNodes(value) {
540
- const treeSelectHeight = this.defaultItemSize * value.length;
541
- // 父级设置了max-height:300 & padding:10 0; 故此处最多设置280,否则将出现滚动条
542
- this.thyVirtualHeight = treeSelectHeight > 300 ? '280px' : `${treeSelectHeight}px`;
543
- this.nodeList = value;
544
- this.hasNodeChildren = this.nodeList.every(item => !item.hasOwnProperty('children') || (!item?.children?.length && !item?.childCount));
545
- }
546
- ngOnInit() {
547
- this.class = this.isMultiple ? 'thy-tree-select-dropdown thy-tree-select-dropdown-multiple' : 'thy-tree-select-dropdown';
466
+ this.thyPrimaryKey = computed(() => this.parent.thyPrimaryKey());
467
+ this.selectedNodes = computed(() => this.parent.selectedNodes());
468
+ this.selectedNode = computed(() => this.parent.selectedNode());
469
+ this.hiddenNodeKey = computed(() => this.parent.thyHiddenNodeKey());
470
+ this.disableNodeKey = computed(() => this.parent.thyDisableNodeKey());
471
+ this.thyVirtualHeight = computed(() => {
472
+ const treeSelectHeight = this.defaultItemSize * this.treeNodes().length;
473
+ // 父级设置了max-height:300 & padding:10 0; 故此处最多设置280,否则将出现滚动条
474
+ return treeSelectHeight > 300 ? '280px' : `${treeSelectHeight}px`;
475
+ });
476
+ this.hasNodeChildren = computed(() => {
477
+ return this.treeNodes().every(item => !item.hasOwnProperty('children') || (!item?.children?.length && !item?.childCount));
478
+ });
548
479
  }
549
480
  treeNodeIsSelected(node) {
550
- if (this.parent.thyMultiple) {
551
- return (this.parent.selectedNodes || []).find(item => {
552
- return item[this.primaryKey] === node[this.primaryKey];
481
+ const primaryKey = this.thyPrimaryKey();
482
+ const isMultiple = this.isMultiple();
483
+ if (isMultiple) {
484
+ const selectedNodes = this.selectedNodes() || [];
485
+ return selectedNodes.find(item => {
486
+ return item[primaryKey] === node[primaryKey];
553
487
  });
554
488
  }
555
489
  else {
556
- return this.parent.selectedNode && this.parent.selectedNode[this.primaryKey] === node[this.primaryKey];
490
+ return this.selectedNode() && this.selectedNode()[primaryKey] === node[primaryKey];
557
491
  }
558
492
  }
559
493
  treeNodeIsHidden(node) {
560
- if (this.parent.thyHiddenNodeKey) {
561
- return node[this.parent.thyHiddenNodeKey];
494
+ const hiddenNodeKey = this.hiddenNodeKey();
495
+ if (hiddenNodeKey) {
496
+ return node[hiddenNodeKey];
562
497
  }
563
- if (this.parent.thyHiddenNodeFn) {
564
- return this.parent.thyHiddenNodeFn(node);
498
+ const thyHiddenNodeFn = this.parent.thyHiddenNodeFn;
499
+ if (thyHiddenNodeFn) {
500
+ return thyHiddenNodeFn(node);
565
501
  }
566
502
  return false;
567
503
  }
568
504
  treeNodeIsDisable(node) {
569
- if (this.parent.thyDisableNodeKey) {
570
- return node[this.parent.thyDisableNodeKey];
505
+ const disableNodeKey = this.disableNodeKey();
506
+ if (disableNodeKey) {
507
+ return node[disableNodeKey];
571
508
  }
572
- if (this.parent.thyDisableNodeFn) {
573
- return this.parent.thyDisableNodeFn(node);
509
+ const thyDisableNodeFn = this.parent.thyDisableNodeFn;
510
+ if (thyDisableNodeFn) {
511
+ return thyDisableNodeFn(node);
574
512
  }
575
513
  return false;
576
514
  }
577
515
  treeNodeIsExpand(node) {
516
+ const isMultiple = this.isMultiple();
517
+ const primaryKey = this.thyPrimaryKey();
578
518
  let isSelectedNodeParent = false;
579
- if (this.parent.thyMultiple) {
580
- isSelectedNodeParent = !!(this.parent.selectedNodes || []).find(item => {
581
- return item.parentValues.indexOf(node[this.primaryKey]) > -1;
519
+ if (isMultiple) {
520
+ const selectedNodes = this.selectedNodes() || [];
521
+ isSelectedNodeParent = !!selectedNodes.find(item => {
522
+ return item.parentValues.indexOf(node[primaryKey]) > -1;
582
523
  });
583
524
  }
584
525
  else {
585
- isSelectedNodeParent = this.parent.selectedNode
586
- ? this.parent.selectedNode.parentValues.indexOf(node[this.primaryKey]) > -1
587
- : false;
526
+ isSelectedNodeParent = this.selectedNode() ? this.selectedNode().parentValues.indexOf(node[primaryKey]) > -1 : false;
588
527
  }
589
528
  const isExpand = node.expand || (Object.keys(node).indexOf('expand') < 0 && isSelectedNodeParent);
590
529
  node.expand = isExpand;
@@ -611,13 +550,13 @@ class ThyTreeSelectNodes {
611
550
  node.expand = true;
612
551
  }
613
552
  }
614
- if (node.expand && this.parent.thyAsyncNode) {
553
+ if (node.expand && this.parent.thyAsyncNode()) {
615
554
  this.getNodeChildren(node).subscribe(() => {
616
555
  this.parent.setPosition();
617
556
  });
618
557
  }
619
558
  // this.parent.setPosition();
620
- if (this.thyVirtualScroll) {
559
+ if (this.thyVirtualScroll()) {
621
560
  this.parent.buildFlattenTreeNodes();
622
561
  }
623
562
  }
@@ -625,7 +564,7 @@ class ThyTreeSelectNodes {
625
564
  return index;
626
565
  }
627
566
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelectNodes, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
628
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelectNodes, isStandalone: true, selector: "thy-tree-select-nodes", inputs: { treeNodes: "treeNodes", thyVirtualScroll: "thyVirtualScroll" }, host: { properties: { "attr.tabindex": "-1", "class": "this.class" } }, ngImport: i0, template: "@if (nodeList?.length > 0) {\n <div class=\"thy-tree-select-options\">\n <div class=\"thy-tree-select-node\">\n @if (!thyVirtualScroll) {\n @for (node of nodeList; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n }\n }\n @if (thyVirtualScroll) {\n <cdk-virtual-scroll-viewport #viewport [itemSize]=\"defaultItemSize\" [style.height]=\"thyVirtualHeight\">\n <ng-container *cdkVirtualFor=\"let node of nodeList; trackBy: tabTrackBy\">\n <ng-template [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n} @else {\n <thy-empty\n class=\"thy-select-empty-content\"\n thySize=\"sm\"\n [thyMessage]=\"parent.thyEmptyOptionsText\"\n [thyIconName]=\"emptyIcon()\"></thy-empty>\n}\n\n<ng-template #treeSelectNode let-node>\n <ng-container>\n @if (!treeNodeIsHidden(node)) {\n <a\n class=\"thy-option-item\"\n [ngClass]=\"{ active: treeNodeIsSelected(node), 'pl-0': hasNodeChildren }\"\n [class.disabled]=\"treeNodeIsDisable(node)\"\n [ngStyle]=\"{ 'padding-left.px': 20 * node.level + parent.icons.gap }\"\n (click)=\"selectTreeNode($event, node)\">\n <span\n class=\"thy-tree-select-option-icon\"\n [class.invisible]=\"!(node.children?.length > 0 || (node[childCountKey] && node[childCountKey] > 0))\"\n (click)=\"nodeExpandToggle($event, node)\">\n <thy-icon\n class=\"node-expand-icon\"\n [thyIconName]=\"treeNodeIsExpand(node) ? parent.icons.expand : parent.icons.collapse\"></thy-icon>\n </span>\n <span class=\"thy-tree-select-option-text\" [ngClass]=\"{ 'ml-1': hasNodeChildren }\">\n @if (treeNodeTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"treeNodeTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n <span thyFlexibleText [thyTooltipContent]=\"node[showKey]\">{{ node[showKey] }}</span>\n }\n </span>\n @if (isMultiple) {\n <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n }\n </a>\n }\n @if (!thyVirtualScroll && treeNodeIsExpand(node) && node.children?.length > 0) {\n @for (node of node.children; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n }\n }\n </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }] }); }
567
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyTreeSelectNodes, isStandalone: true, selector: "thy-tree-select-nodes", inputs: { treeNodes: { classPropertyName: "treeNodes", publicName: "treeNodes", isSignal: true, isRequired: false, transformFunction: null }, thyVirtualScroll: { classPropertyName: "thyVirtualScroll", publicName: "thyVirtualScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.tabindex": "-1", "class.thy-tree-select-dropdown-multiple": "isMultiple()" }, classAttribute: "thy-tree-select-dropdown" }, ngImport: i0, template: "@let nodeList = treeNodes();\n@let hasChildren = hasNodeChildren();\n@let virtualHeight = thyVirtualHeight();\n@let isVirtualScroll = thyVirtualScroll();\n@let showKey = this.parent.thyShowKey();\n\n@if (nodeList?.length > 0) {\n <div class=\"thy-tree-select-options\">\n <div class=\"thy-tree-select-node\">\n @if (!isVirtualScroll) {\n @for (node of nodeList; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n }\n }\n @if (isVirtualScroll) {\n <cdk-virtual-scroll-viewport #viewport [itemSize]=\"defaultItemSize\" [style.height]=\"virtualHeight\">\n <ng-container *cdkVirtualFor=\"let node of nodeList; trackBy: tabTrackBy\">\n <ng-template [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n} @else {\n <thy-empty\n class=\"thy-select-empty-content\"\n thySize=\"sm\"\n [thyMessage]=\"parent.thyEmptyOptionsText()\"\n [thyIconName]=\"emptyIcon()\"></thy-empty>\n}\n\n<ng-template #treeSelectNode let-node>\n <ng-container>\n @if (!treeNodeIsHidden(node)) {\n <a\n class=\"thy-option-item\"\n [ngClass]=\"{ active: treeNodeIsSelected(node), 'pl-0': hasChildren }\"\n [class.disabled]=\"treeNodeIsDisable(node)\"\n [ngStyle]=\"{ 'padding-left.px': 20 * node.level + parent.icons.gap }\"\n (click)=\"selectTreeNode($event, node)\">\n <span\n class=\"thy-tree-select-option-icon\"\n [class.invisible]=\"!(node.children?.length > 0 || (node[childCountKey()] && node[childCountKey()] > 0))\"\n (click)=\"nodeExpandToggle($event, node)\">\n <thy-icon\n class=\"node-expand-icon\"\n [thyIconName]=\"treeNodeIsExpand(node) ? parent.icons.expand : parent.icons.collapse\"></thy-icon>\n </span>\n <span class=\"thy-tree-select-option-text\" [ngClass]=\"{ 'ml-1': hasChildren }\">\n @if (treeNodeTemplateRef()) {\n <ng-template [ngTemplateOutlet]=\"treeNodeTemplateRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n <span thyFlexibleText [thyTooltipContent]=\"node[showKey]\">{{ node[showKey] }}</span>\n }\n </span>\n @if (isMultiple()) {\n <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n }\n </a>\n }\n @if (!isVirtualScroll && treeNodeIsExpand(node) && node.children?.length > 0) {\n @for (node of node.children; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n }\n }\n </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }] }); }
629
568
  }
630
569
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelectNodes, decorators: [{
631
570
  type: Component,
@@ -640,16 +579,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
640
579
  ThyIcon,
641
580
  ThyFlexibleText
642
581
  ], host: {
643
- '[attr.tabindex]': '-1'
644
- }, template: "@if (nodeList?.length > 0) {\n <div class=\"thy-tree-select-options\">\n <div class=\"thy-tree-select-node\">\n @if (!thyVirtualScroll) {\n @for (node of nodeList; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n }\n }\n @if (thyVirtualScroll) {\n <cdk-virtual-scroll-viewport #viewport [itemSize]=\"defaultItemSize\" [style.height]=\"thyVirtualHeight\">\n <ng-container *cdkVirtualFor=\"let node of nodeList; trackBy: tabTrackBy\">\n <ng-template [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n} @else {\n <thy-empty\n class=\"thy-select-empty-content\"\n thySize=\"sm\"\n [thyMessage]=\"parent.thyEmptyOptionsText\"\n [thyIconName]=\"emptyIcon()\"></thy-empty>\n}\n\n<ng-template #treeSelectNode let-node>\n <ng-container>\n @if (!treeNodeIsHidden(node)) {\n <a\n class=\"thy-option-item\"\n [ngClass]=\"{ active: treeNodeIsSelected(node), 'pl-0': hasNodeChildren }\"\n [class.disabled]=\"treeNodeIsDisable(node)\"\n [ngStyle]=\"{ 'padding-left.px': 20 * node.level + parent.icons.gap }\"\n (click)=\"selectTreeNode($event, node)\">\n <span\n class=\"thy-tree-select-option-icon\"\n [class.invisible]=\"!(node.children?.length > 0 || (node[childCountKey] && node[childCountKey] > 0))\"\n (click)=\"nodeExpandToggle($event, node)\">\n <thy-icon\n class=\"node-expand-icon\"\n [thyIconName]=\"treeNodeIsExpand(node) ? parent.icons.expand : parent.icons.collapse\"></thy-icon>\n </span>\n <span class=\"thy-tree-select-option-text\" [ngClass]=\"{ 'ml-1': hasNodeChildren }\">\n @if (treeNodeTemplateRef) {\n <ng-template [ngTemplateOutlet]=\"treeNodeTemplateRef\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n <span thyFlexibleText [thyTooltipContent]=\"node[showKey]\">{{ node[showKey] }}</span>\n }\n </span>\n @if (isMultiple) {\n <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n }\n </a>\n }\n @if (!thyVirtualScroll && treeNodeIsExpand(node) && node.children?.length > 0) {\n @for (node of node.children; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n }\n }\n </ng-container>\n</ng-template>\n" }]
645
- }], propDecorators: { class: [{
646
- type: HostBinding,
647
- args: ['class']
648
- }], treeNodes: [{
649
- type: Input
650
- }], thyVirtualScroll: [{
651
- type: Input
652
- }] } });
582
+ '[attr.tabindex]': '-1',
583
+ class: 'thy-tree-select-dropdown',
584
+ '[class.thy-tree-select-dropdown-multiple]': 'isMultiple()'
585
+ }, template: "@let nodeList = treeNodes();\n@let hasChildren = hasNodeChildren();\n@let virtualHeight = thyVirtualHeight();\n@let isVirtualScroll = thyVirtualScroll();\n@let showKey = this.parent.thyShowKey();\n\n@if (nodeList?.length > 0) {\n <div class=\"thy-tree-select-options\">\n <div class=\"thy-tree-select-node\">\n @if (!isVirtualScroll) {\n @for (node of nodeList; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-container>\n }\n }\n @if (isVirtualScroll) {\n <cdk-virtual-scroll-viewport #viewport [itemSize]=\"defaultItemSize\" [style.height]=\"virtualHeight\">\n <ng-container *cdkVirtualFor=\"let node of nodeList; trackBy: tabTrackBy\">\n <ng-template [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n} @else {\n <thy-empty\n class=\"thy-select-empty-content\"\n thySize=\"sm\"\n [thyMessage]=\"parent.thyEmptyOptionsText()\"\n [thyIconName]=\"emptyIcon()\"></thy-empty>\n}\n\n<ng-template #treeSelectNode let-node>\n <ng-container>\n @if (!treeNodeIsHidden(node)) {\n <a\n class=\"thy-option-item\"\n [ngClass]=\"{ active: treeNodeIsSelected(node), 'pl-0': hasChildren }\"\n [class.disabled]=\"treeNodeIsDisable(node)\"\n [ngStyle]=\"{ 'padding-left.px': 20 * node.level + parent.icons.gap }\"\n (click)=\"selectTreeNode($event, node)\">\n <span\n class=\"thy-tree-select-option-icon\"\n [class.invisible]=\"!(node.children?.length > 0 || (node[childCountKey()] && node[childCountKey()] > 0))\"\n (click)=\"nodeExpandToggle($event, node)\">\n <thy-icon\n class=\"node-expand-icon\"\n [thyIconName]=\"treeNodeIsExpand(node) ? parent.icons.expand : parent.icons.collapse\"></thy-icon>\n </span>\n <span class=\"thy-tree-select-option-text\" [ngClass]=\"{ 'ml-1': hasChildren }\">\n @if (treeNodeTemplateRef()) {\n <ng-template [ngTemplateOutlet]=\"treeNodeTemplateRef()\" [ngTemplateOutletContext]=\"{ $implicit: node }\"></ng-template>\n } @else {\n <span thyFlexibleText [thyTooltipContent]=\"node[showKey]\">{{ node[showKey] }}</span>\n }\n </span>\n @if (isMultiple()) {\n <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n }\n </a>\n }\n @if (!isVirtualScroll && treeNodeIsExpand(node) && node.children?.length > 0) {\n @for (node of node.children; track $index) {\n <ng-container [ngTemplateOutlet]=\"treeSelectNode\" [ngTemplateOutletContext]=\"{ $implicit: node }\"> </ng-container>\n }\n }\n </ng-container>\n</ng-template>\n" }]
586
+ }] });
653
587
 
654
588
  class ThyTreeSelectModule {
655
589
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTreeSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }