@weeehaoooz/talos-ui 0.1.1 → 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 (190) hide show
  1. package/README.md +2 -0
  2. package/fesm2022/{weeehaoooz-talos-ui-button-button-group.mjs → weeehaoooz-talos-ui-button.mjs} +91 -15
  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 +1316 -7
  15. package/fesm2022/weeehaoooz-talos-ui-layout.mjs.map +1 -1
  16. package/fesm2022/weeehaoooz-talos-ui-nav.mjs +3 -3
  17. package/fesm2022/weeehaoooz-talos-ui-nav.mjs.map +1 -1
  18. package/fesm2022/weeehaoooz-talos-ui.mjs +21592 -16293
  19. package/fesm2022/weeehaoooz-talos-ui.mjs.map +1 -1
  20. package/package.json +20 -139
  21. package/styles/_breadcrumb.scss +16 -0
  22. package/styles/_button-group.scss +2 -1
  23. package/styles/_buttons.scss +51 -0
  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 +33 -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 +1 -1
  46. package/types/weeehaoooz-talos-ui.d.ts +7148 -4629
  47. package/types/weeehaoooz-talos-ui.d.ts.map +1 -1
  48. package/fesm2022/weeehaoooz-talos-ui-button-button-group.mjs.map +0 -1
  49. package/fesm2022/weeehaoooz-talos-ui-button-button.mjs +0 -94
  50. package/fesm2022/weeehaoooz-talos-ui-button-button.mjs.map +0 -1
  51. package/fesm2022/weeehaoooz-talos-ui-data-display-badge.mjs +0 -233
  52. package/fesm2022/weeehaoooz-talos-ui-data-display-badge.mjs.map +0 -1
  53. package/fesm2022/weeehaoooz-talos-ui-data-display-data-grid.mjs +0 -1627
  54. package/fesm2022/weeehaoooz-talos-ui-data-display-data-grid.mjs.map +0 -1
  55. package/fesm2022/weeehaoooz-talos-ui-data-display-status-tag.mjs +0 -361
  56. package/fesm2022/weeehaoooz-talos-ui-data-display-status-tag.mjs.map +0 -1
  57. package/fesm2022/weeehaoooz-talos-ui-data-display-timeline.mjs +0 -312
  58. package/fesm2022/weeehaoooz-talos-ui-data-display-timeline.mjs.map +0 -1
  59. package/fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs +0 -235
  60. package/fesm2022/weeehaoooz-talos-ui-data-display-trend-indicator.mjs.map +0 -1
  61. package/fesm2022/weeehaoooz-talos-ui-data-viz-category-bar.mjs +0 -462
  62. package/fesm2022/weeehaoooz-talos-ui-data-viz-category-bar.mjs.map +0 -1
  63. package/fesm2022/weeehaoooz-talos-ui-data-viz-heatmap.mjs +0 -805
  64. package/fesm2022/weeehaoooz-talos-ui-data-viz-heatmap.mjs.map +0 -1
  65. package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-donut.mjs +0 -267
  66. package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-donut.mjs.map +0 -1
  67. package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-gauge.mjs +0 -351
  68. package/fesm2022/weeehaoooz-talos-ui-data-viz-mini-gauge.mjs.map +0 -1
  69. package/fesm2022/weeehaoooz-talos-ui-data-viz-sparkline.mjs +0 -566
  70. package/fesm2022/weeehaoooz-talos-ui-data-viz-sparkline.mjs.map +0 -1
  71. package/fesm2022/weeehaoooz-talos-ui-feedback-alert.mjs +0 -534
  72. package/fesm2022/weeehaoooz-talos-ui-feedback-alert.mjs.map +0 -1
  73. package/fesm2022/weeehaoooz-talos-ui-feedback-dialog.mjs +0 -446
  74. package/fesm2022/weeehaoooz-talos-ui-feedback-dialog.mjs.map +0 -1
  75. package/fesm2022/weeehaoooz-talos-ui-feedback-snackbar.mjs +0 -376
  76. package/fesm2022/weeehaoooz-talos-ui-feedback-snackbar.mjs.map +0 -1
  77. package/fesm2022/weeehaoooz-talos-ui-feedback-tooltip.mjs +0 -147
  78. package/fesm2022/weeehaoooz-talos-ui-feedback-tooltip.mjs.map +0 -1
  79. package/fesm2022/weeehaoooz-talos-ui-form-affix.mjs +0 -242
  80. package/fesm2022/weeehaoooz-talos-ui-form-affix.mjs.map +0 -1
  81. package/fesm2022/weeehaoooz-talos-ui-form-autocomplete.mjs +0 -514
  82. package/fesm2022/weeehaoooz-talos-ui-form-autocomplete.mjs.map +0 -1
  83. package/fesm2022/weeehaoooz-talos-ui-form-checkbox.mjs +0 -548
  84. package/fesm2022/weeehaoooz-talos-ui-form-checkbox.mjs.map +0 -1
  85. package/fesm2022/weeehaoooz-talos-ui-form-chips.mjs +0 -692
  86. package/fesm2022/weeehaoooz-talos-ui-form-chips.mjs.map +0 -1
  87. package/fesm2022/weeehaoooz-talos-ui-form-color-picker.mjs +0 -761
  88. package/fesm2022/weeehaoooz-talos-ui-form-color-picker.mjs.map +0 -1
  89. package/fesm2022/weeehaoooz-talos-ui-form-date-picker.mjs +0 -896
  90. package/fesm2022/weeehaoooz-talos-ui-form-date-picker.mjs.map +0 -1
  91. package/fesm2022/weeehaoooz-talos-ui-form-date-range-picker.mjs +0 -872
  92. package/fesm2022/weeehaoooz-talos-ui-form-date-range-picker.mjs.map +0 -1
  93. package/fesm2022/weeehaoooz-talos-ui-form-date-time-picker.mjs +0 -119
  94. package/fesm2022/weeehaoooz-talos-ui-form-date-time-picker.mjs.map +0 -1
  95. package/fesm2022/weeehaoooz-talos-ui-form-date-time-range-picker.mjs +0 -135
  96. package/fesm2022/weeehaoooz-talos-ui-form-date-time-range-picker.mjs.map +0 -1
  97. package/fesm2022/weeehaoooz-talos-ui-form-drop-zone.mjs +0 -666
  98. package/fesm2022/weeehaoooz-talos-ui-form-drop-zone.mjs.map +0 -1
  99. package/fesm2022/weeehaoooz-talos-ui-form-form-field.mjs +0 -147
  100. package/fesm2022/weeehaoooz-talos-ui-form-form-field.mjs.map +0 -1
  101. package/fesm2022/weeehaoooz-talos-ui-form-input.mjs +0 -33
  102. package/fesm2022/weeehaoooz-talos-ui-form-input.mjs.map +0 -1
  103. package/fesm2022/weeehaoooz-talos-ui-form-otp.mjs +0 -455
  104. package/fesm2022/weeehaoooz-talos-ui-form-otp.mjs.map +0 -1
  105. package/fesm2022/weeehaoooz-talos-ui-form-password-input.mjs +0 -379
  106. package/fesm2022/weeehaoooz-talos-ui-form-password-input.mjs.map +0 -1
  107. package/fesm2022/weeehaoooz-talos-ui-form-radio.mjs +0 -297
  108. package/fesm2022/weeehaoooz-talos-ui-form-radio.mjs.map +0 -1
  109. package/fesm2022/weeehaoooz-talos-ui-form-range-input.mjs +0 -661
  110. package/fesm2022/weeehaoooz-talos-ui-form-range-input.mjs.map +0 -1
  111. package/fesm2022/weeehaoooz-talos-ui-form-rating.mjs +0 -346
  112. package/fesm2022/weeehaoooz-talos-ui-form-rating.mjs.map +0 -1
  113. package/fesm2022/weeehaoooz-talos-ui-form-select-input.mjs +0 -896
  114. package/fesm2022/weeehaoooz-talos-ui-form-select-input.mjs.map +0 -1
  115. package/fesm2022/weeehaoooz-talos-ui-form-slide-toggle.mjs +0 -252
  116. package/fesm2022/weeehaoooz-talos-ui-form-slide-toggle.mjs.map +0 -1
  117. package/fesm2022/weeehaoooz-talos-ui-form-transfer-list.mjs +0 -916
  118. package/fesm2022/weeehaoooz-talos-ui-form-transfer-list.mjs.map +0 -1
  119. package/types/weeehaoooz-talos-ui-button-button-group.d.ts +0 -62
  120. package/types/weeehaoooz-talos-ui-button-button-group.d.ts.map +0 -1
  121. package/types/weeehaoooz-talos-ui-button-button.d.ts +0 -38
  122. package/types/weeehaoooz-talos-ui-button-button.d.ts.map +0 -1
  123. package/types/weeehaoooz-talos-ui-data-display-badge.d.ts +0 -119
  124. package/types/weeehaoooz-talos-ui-data-display-badge.d.ts.map +0 -1
  125. package/types/weeehaoooz-talos-ui-data-display-data-grid.d.ts +0 -272
  126. package/types/weeehaoooz-talos-ui-data-display-data-grid.d.ts.map +0 -1
  127. package/types/weeehaoooz-talos-ui-data-display-status-tag.d.ts +0 -135
  128. package/types/weeehaoooz-talos-ui-data-display-status-tag.d.ts.map +0 -1
  129. package/types/weeehaoooz-talos-ui-data-display-timeline.d.ts +0 -144
  130. package/types/weeehaoooz-talos-ui-data-display-timeline.d.ts.map +0 -1
  131. package/types/weeehaoooz-talos-ui-data-display-trend-indicator.d.ts +0 -83
  132. package/types/weeehaoooz-talos-ui-data-display-trend-indicator.d.ts.map +0 -1
  133. package/types/weeehaoooz-talos-ui-data-viz-category-bar.d.ts +0 -255
  134. package/types/weeehaoooz-talos-ui-data-viz-category-bar.d.ts.map +0 -1
  135. package/types/weeehaoooz-talos-ui-data-viz-heatmap.d.ts +0 -204
  136. package/types/weeehaoooz-talos-ui-data-viz-heatmap.d.ts.map +0 -1
  137. package/types/weeehaoooz-talos-ui-data-viz-mini-donut.d.ts +0 -101
  138. package/types/weeehaoooz-talos-ui-data-viz-mini-donut.d.ts.map +0 -1
  139. package/types/weeehaoooz-talos-ui-data-viz-mini-gauge.d.ts +0 -138
  140. package/types/weeehaoooz-talos-ui-data-viz-mini-gauge.d.ts.map +0 -1
  141. package/types/weeehaoooz-talos-ui-data-viz-sparkline.d.ts +0 -161
  142. package/types/weeehaoooz-talos-ui-data-viz-sparkline.d.ts.map +0 -1
  143. package/types/weeehaoooz-talos-ui-feedback-alert.d.ts +0 -212
  144. package/types/weeehaoooz-talos-ui-feedback-alert.d.ts.map +0 -1
  145. package/types/weeehaoooz-talos-ui-feedback-dialog.d.ts +0 -259
  146. package/types/weeehaoooz-talos-ui-feedback-dialog.d.ts.map +0 -1
  147. package/types/weeehaoooz-talos-ui-feedback-snackbar.d.ts +0 -147
  148. package/types/weeehaoooz-talos-ui-feedback-snackbar.d.ts.map +0 -1
  149. package/types/weeehaoooz-talos-ui-feedback-tooltip.d.ts +0 -32
  150. package/types/weeehaoooz-talos-ui-feedback-tooltip.d.ts.map +0 -1
  151. package/types/weeehaoooz-talos-ui-form-affix.d.ts +0 -88
  152. package/types/weeehaoooz-talos-ui-form-affix.d.ts.map +0 -1
  153. package/types/weeehaoooz-talos-ui-form-autocomplete.d.ts +0 -113
  154. package/types/weeehaoooz-talos-ui-form-autocomplete.d.ts.map +0 -1
  155. package/types/weeehaoooz-talos-ui-form-checkbox.d.ts +0 -165
  156. package/types/weeehaoooz-talos-ui-form-checkbox.d.ts.map +0 -1
  157. package/types/weeehaoooz-talos-ui-form-chips.d.ts +0 -152
  158. package/types/weeehaoooz-talos-ui-form-chips.d.ts.map +0 -1
  159. package/types/weeehaoooz-talos-ui-form-color-picker.d.ts +0 -144
  160. package/types/weeehaoooz-talos-ui-form-color-picker.d.ts.map +0 -1
  161. package/types/weeehaoooz-talos-ui-form-date-picker.d.ts +0 -138
  162. package/types/weeehaoooz-talos-ui-form-date-picker.d.ts.map +0 -1
  163. package/types/weeehaoooz-talos-ui-form-date-range-picker.d.ts +0 -148
  164. package/types/weeehaoooz-talos-ui-form-date-range-picker.d.ts.map +0 -1
  165. package/types/weeehaoooz-talos-ui-form-date-time-picker.d.ts +0 -44
  166. package/types/weeehaoooz-talos-ui-form-date-time-picker.d.ts.map +0 -1
  167. package/types/weeehaoooz-talos-ui-form-date-time-range-picker.d.ts +0 -48
  168. package/types/weeehaoooz-talos-ui-form-date-time-range-picker.d.ts.map +0 -1
  169. package/types/weeehaoooz-talos-ui-form-drop-zone.d.ts +0 -227
  170. package/types/weeehaoooz-talos-ui-form-drop-zone.d.ts.map +0 -1
  171. package/types/weeehaoooz-talos-ui-form-form-field.d.ts +0 -42
  172. package/types/weeehaoooz-talos-ui-form-form-field.d.ts.map +0 -1
  173. package/types/weeehaoooz-talos-ui-form-input.d.ts +0 -15
  174. package/types/weeehaoooz-talos-ui-form-input.d.ts.map +0 -1
  175. package/types/weeehaoooz-talos-ui-form-otp.d.ts +0 -111
  176. package/types/weeehaoooz-talos-ui-form-otp.d.ts.map +0 -1
  177. package/types/weeehaoooz-talos-ui-form-password-input.d.ts +0 -145
  178. package/types/weeehaoooz-talos-ui-form-password-input.d.ts.map +0 -1
  179. package/types/weeehaoooz-talos-ui-form-radio.d.ts +0 -84
  180. package/types/weeehaoooz-talos-ui-form-radio.d.ts.map +0 -1
  181. package/types/weeehaoooz-talos-ui-form-range-input.d.ts +0 -181
  182. package/types/weeehaoooz-talos-ui-form-range-input.d.ts.map +0 -1
  183. package/types/weeehaoooz-talos-ui-form-rating.d.ts +0 -110
  184. package/types/weeehaoooz-talos-ui-form-rating.d.ts.map +0 -1
  185. package/types/weeehaoooz-talos-ui-form-select-input.d.ts +0 -195
  186. package/types/weeehaoooz-talos-ui-form-select-input.d.ts.map +0 -1
  187. package/types/weeehaoooz-talos-ui-form-slide-toggle.d.ts +0 -79
  188. package/types/weeehaoooz-talos-ui-form-slide-toggle.d.ts.map +0 -1
  189. package/types/weeehaoooz-talos-ui-form-transfer-list.d.ts +0 -192
  190. package/types/weeehaoooz-talos-ui-form-transfer-list.d.ts.map +0 -1
@@ -1,896 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { inject, ElementRef, input, output, signal, Component, contentChildren, computed, effect, forwardRef, ViewChild, NgModule } from '@angular/core';
3
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
4
- export * from '@weeehaoooz/talos-ui/form/affix';
5
-
6
- class OptionComponent {
7
- elementRef = inject((ElementRef));
8
- value = input(null, /* @ts-ignore */
9
- ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
10
- label = input(undefined, /* @ts-ignore */
11
- ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
12
- disabled = input(false, /* @ts-ignore */
13
- ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
14
- selected = output();
15
- isSelected = signal(false, /* @ts-ignore */
16
- ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
17
- isActive = signal(false, /* @ts-ignore */
18
- ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
19
- hidden = signal(false, /* @ts-ignore */
20
- ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
21
- displayText() {
22
- const customLabel = this.label();
23
- if (customLabel !== undefined && customLabel !== null && customLabel !== '') {
24
- return customLabel;
25
- }
26
- const nativeText = this.elementRef.nativeElement.querySelector('.option-label-text')?.textContent?.trim()
27
- ?? this.elementRef.nativeElement.textContent?.trim();
28
- if (nativeText) {
29
- return nativeText;
30
- }
31
- const val = this.value();
32
- return val !== null && val !== undefined ? String(val) : '';
33
- }
34
- onClick(event) {
35
- event.stopPropagation();
36
- if (this.disabled() || this.hidden()) {
37
- return;
38
- }
39
- this.selected.emit(this);
40
- }
41
- scrollIntoViewIfNeeded() {
42
- if (typeof this.elementRef.nativeElement.scrollIntoView === 'function') {
43
- this.elementRef.nativeElement.scrollIntoView({
44
- block: 'nearest',
45
- behavior: 'smooth'
46
- });
47
- }
48
- }
49
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
50
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: OptionComponent, isStandalone: true, selector: "talos-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick($event)" }, properties: { "attr.aria-selected": "isSelected()", "attr.aria-disabled": "disabled()", "attr.tabindex": "-1", "class.talos-option": "true", "class.app-option": "true", "class.is-selected": "isSelected()", "class.is-active": "isActive()", "class.is-disabled": "disabled()", "class.is-hidden": "hidden()" } }, ngImport: i0, template: "<span class=\"option-label-text\">\n <ng-content>{{ label() }}</ng-content>\n</span>\n@if (isSelected()) {\n <svg class=\"option-check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:.375rem .625rem;font-size:.8125rem;font-weight:400;line-height:1.35;color:var(--select-option-color, var(--talos-text-color, var(--text-color, #1e293b)));background-color:var(--select-option-bg, transparent);border-radius:var(--talos-border-radius, var(--border-radius, .25rem));cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin:.0625rem 0;box-sizing:border-box}:host:hover:not(.is-disabled){background-color:var(--select-option-hover-bg, var(--talos-primary-light, #f1f5f9));color:var(--select-option-hover-color, var(--talos-text-color, #0f172a))}:host.is-active:not(.is-disabled){background-color:var(--select-option-active-bg, var(--talos-primary-light-hover, #e2e8f0));color:var(--select-option-active-color, var(--talos-text-color, #0f172a));outline:none}:host.is-selected{font-weight:600;color:var(--select-option-selected-color, var(--talos-primary-color, var(--primary-color, #2563eb)));background-color:var(--select-option-selected-bg, var(--talos-primary-light, #eff6ff))}:host.is-selected:hover:not(.is-disabled){background-color:var(--select-option-selected-hover-bg, var(--talos-primary-light-hover, #dbeafe))}:host.is-disabled{opacity:.45;cursor:not-allowed}:host.is-hidden{display:none!important}.option-label-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-check-icon{width:.875rem;height:.875rem;margin-left:.375rem;flex-shrink:0;stroke:currentColor}\n"] });
51
- }
52
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionComponent, decorators: [{
53
- type: Component,
54
- args: [{ selector: 'talos-option', host: {
55
- 'role': 'option',
56
- '[attr.aria-selected]': 'isSelected()',
57
- '[attr.aria-disabled]': 'disabled()',
58
- '[attr.tabindex]': '-1',
59
- '[class.talos-option]': 'true',
60
- '[class.app-option]': 'true',
61
- '[class.is-selected]': 'isSelected()',
62
- '[class.is-active]': 'isActive()',
63
- '[class.is-disabled]': 'disabled()',
64
- '[class.is-hidden]': 'hidden()',
65
- '(click)': 'onClick($event)'
66
- }, template: "<span class=\"option-label-text\">\n <ng-content>{{ label() }}</ng-content>\n</span>\n@if (isSelected()) {\n <svg class=\"option-check-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" aria-hidden=\"true\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n}\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;padding:.375rem .625rem;font-size:.8125rem;font-weight:400;line-height:1.35;color:var(--select-option-color, var(--talos-text-color, var(--text-color, #1e293b)));background-color:var(--select-option-bg, transparent);border-radius:var(--talos-border-radius, var(--border-radius, .25rem));cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin:.0625rem 0;box-sizing:border-box}:host:hover:not(.is-disabled){background-color:var(--select-option-hover-bg, var(--talos-primary-light, #f1f5f9));color:var(--select-option-hover-color, var(--talos-text-color, #0f172a))}:host.is-active:not(.is-disabled){background-color:var(--select-option-active-bg, var(--talos-primary-light-hover, #e2e8f0));color:var(--select-option-active-color, var(--talos-text-color, #0f172a));outline:none}:host.is-selected{font-weight:600;color:var(--select-option-selected-color, var(--talos-primary-color, var(--primary-color, #2563eb)));background-color:var(--select-option-selected-bg, var(--talos-primary-light, #eff6ff))}:host.is-selected:hover:not(.is-disabled){background-color:var(--select-option-selected-hover-bg, var(--talos-primary-light-hover, #dbeafe))}:host.is-disabled{opacity:.45;cursor:not-allowed}:host.is-hidden{display:none!important}.option-label-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-check-icon{width:.875rem;height:.875rem;margin-left:.375rem;flex-shrink:0;stroke:currentColor}\n"] }]
67
- }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
68
-
69
- class OptionGroupComponent {
70
- label = input.required(/* @ts-ignore */
71
- ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
72
- disabled = input(false, /* @ts-ignore */
73
- ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
74
- options = contentChildren(OptionComponent, /* @ts-ignore */
75
- ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
76
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
77
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.1", type: OptionGroupComponent, isStandalone: true, selector: "talos-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "label()", "class.talos-option-group": "true", "class.app-option-group": "true", "class.is-disabled": "disabled()" } }, queries: [{ propertyName: "options", predicate: OptionComponent, isSignal: true }], ngImport: i0, template: "<div class=\"option-group-label\" aria-hidden=\"true\">\n {{ label() }}\n</div>\n<div class=\"option-group-content\">\n <ng-content select=\"talos-option, app-option\"></ng-content>\n</div>\n", styles: [":host{display:block;padding:.125rem 0}:host.is-disabled{opacity:.5;pointer-events:none}.option-group-label{padding:.375rem .625rem .125rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--select-group-label-color, var(--talos-text-muted, #64748b));-webkit-user-select:none;user-select:none}.option-group-content{padding-left:.125rem}\n"] });
78
- }
79
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: OptionGroupComponent, decorators: [{
80
- type: Component,
81
- args: [{ selector: 'talos-option-group', host: {
82
- 'role': 'group',
83
- '[attr.aria-label]': 'label()',
84
- '[class.talos-option-group]': 'true',
85
- '[class.app-option-group]': 'true',
86
- '[class.is-disabled]': 'disabled()'
87
- }, template: "<div class=\"option-group-label\" aria-hidden=\"true\">\n {{ label() }}\n</div>\n<div class=\"option-group-content\">\n <ng-content select=\"talos-option, app-option\"></ng-content>\n</div>\n", styles: [":host{display:block;padding:.125rem 0}:host.is-disabled{opacity:.5;pointer-events:none}.option-group-label{padding:.375rem .625rem .125rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--select-group-label-color, var(--talos-text-muted, #64748b));-webkit-user-select:none;user-select:none}.option-group-content{padding-left:.125rem}\n"] }]
88
- }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { isSignal: true }] }] } });
89
-
90
- let uniqueIdCounter = 0;
91
- class SelectInputComponent {
92
- elementRef = inject((ElementRef));
93
- // Signal Inputs
94
- placeholder = input('Select an option', /* @ts-ignore */
95
- ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
96
- label = input('', /* @ts-ignore */
97
- ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
98
- floatingLabel = input(false, /* @ts-ignore */
99
- ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
100
- floating = input(false, /* @ts-ignore */
101
- ...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
102
- required = input(false, /* @ts-ignore */
103
- ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
104
- searchable = input(false, /* @ts-ignore */
105
- ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
106
- searchPlaceholder = input('Search options...', /* @ts-ignore */
107
- ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
108
- disabled = input(false, /* @ts-ignore */
109
- ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
110
- clearable = input(false, /* @ts-ignore */
111
- ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
112
- multiple = input(false, /* @ts-ignore */
113
- ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
114
- size = input('sm', /* @ts-ignore */
115
- ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
116
- // Signal Outputs
117
- selectionChange = output();
118
- opened = output();
119
- closed = output();
120
- searchChange = output();
121
- // Content Queries
122
- options = contentChildren(OptionComponent, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), descendants: true });
123
- optionGroups = contentChildren(OptionGroupComponent, /* @ts-ignore */
124
- ...(ngDevMode ? [{ debugName: "optionGroups" }] : /* istanbul ignore next */ []));
125
- // View Children
126
- searchInputEl;
127
- triggerEl;
128
- // Component ID for ARIA attributes
129
- componentId = `talos-select-${uniqueIdCounter++}`;
130
- listboxId = `${this.componentId}-listbox`;
131
- // Internal Reactive State
132
- value = signal(null, /* @ts-ignore */
133
- ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
134
- isOpen = signal(false, /* @ts-ignore */
135
- ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
136
- searchValue = signal('', /* @ts-ignore */
137
- ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
138
- focusedIndex = signal(-1, /* @ts-ignore */
139
- ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
140
- isDisabled = signal(false, /* @ts-ignore */
141
- ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
142
- isTouched = signal(false, /* @ts-ignore */
143
- ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
144
- hasPrefix = signal(false, /* @ts-ignore */
145
- ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
146
- hasSuffix = signal(false, /* @ts-ignore */
147
- ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
148
- // Computed state
149
- isFloatingMode = computed(() => this.floatingLabel() || this.floating(), /* @ts-ignore */
150
- ...(ngDevMode ? [{ debugName: "isFloatingMode" }] : /* istanbul ignore next */ []));
151
- isFloated = computed(() => {
152
- if (!this.isFloatingMode())
153
- return false;
154
- return this.isOpen() || this.selectedOption() !== null || (this.searchable() && !!this.searchValue());
155
- }, /* @ts-ignore */
156
- ...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
157
- effectiveDisabled = computed(() => this.disabled() || this.isDisabled(), /* @ts-ignore */
158
- ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
159
- selectedOption = computed(() => {
160
- const currentVal = this.value();
161
- if (currentVal === null || currentVal === undefined) {
162
- return null;
163
- }
164
- return this.options().find((opt) => opt.value() === currentVal) ?? null;
165
- }, /* @ts-ignore */
166
- ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
167
- displayLabel = computed(() => {
168
- const selected = this.selectedOption();
169
- return selected ? selected.displayText() : '';
170
- }, /* @ts-ignore */
171
- ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
172
- visibleOptions = computed(() => {
173
- return this.options().filter((opt) => !opt.hidden() && !opt.disabled());
174
- }, /* @ts-ignore */
175
- ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
176
- // ControlValueAccessor Callbacks
177
- onChange = () => { };
178
- onTouched = () => { };
179
- constructor() {
180
- // Sync options' selected state when value or options list updates
181
- effect(() => {
182
- const opts = this.options();
183
- const currentVal = this.value();
184
- for (const opt of opts) {
185
- opt.isSelected.set(opt.value() === currentVal);
186
- }
187
- });
188
- // Subscribe to option click events
189
- effect((onCleanup) => {
190
- const opts = this.options();
191
- const subs = opts.map((opt) => opt.selected.subscribe((selectedOpt) => {
192
- this.selectOption(selectedOpt);
193
- }));
194
- onCleanup(() => {
195
- subs.forEach((sub) => sub.unsubscribe());
196
- });
197
- });
198
- // Update active highlight when focusedIndex or options change
199
- effect(() => {
200
- const visibleOpts = this.visibleOptions();
201
- const index = this.focusedIndex();
202
- this.options().forEach((opt) => {
203
- const isActive = index >= 0 && visibleOpts[index] === opt;
204
- opt.isActive.set(isActive);
205
- if (isActive) {
206
- opt.scrollIntoViewIfNeeded();
207
- }
208
- });
209
- });
210
- }
211
- // --- ControlValueAccessor Interface ---
212
- writeValue(val) {
213
- this.value.set(val);
214
- }
215
- registerOnChange(fn) {
216
- this.onChange = fn;
217
- }
218
- registerOnTouched(fn) {
219
- this.onTouched = fn;
220
- }
221
- setDisabledState(isDisabled) {
222
- this.isDisabled.set(isDisabled);
223
- }
224
- // --- Open / Close Controls ---
225
- toggleOpen() {
226
- if (this.effectiveDisabled())
227
- return;
228
- if (this.isOpen()) {
229
- this.close();
230
- }
231
- else {
232
- this.open();
233
- }
234
- }
235
- open() {
236
- if (this.effectiveDisabled() || this.isOpen())
237
- return;
238
- this.isOpen.set(true);
239
- this.opened.emit();
240
- // Set initial keyboard focus index to selected option or first option
241
- const visibleOpts = this.visibleOptions();
242
- const selected = this.selectedOption();
243
- const selectedIdx = selected ? visibleOpts.indexOf(selected) : -1;
244
- this.focusedIndex.set(selectedIdx >= 0 ? selectedIdx : visibleOpts.length > 0 ? 0 : -1);
245
- if (this.searchable()) {
246
- setTimeout(() => {
247
- this.searchInputEl?.nativeElement.focus();
248
- }, 50);
249
- }
250
- }
251
- close() {
252
- if (!this.isOpen())
253
- return;
254
- this.isOpen.set(false);
255
- this.focusedIndex.set(-1);
256
- this.clearSearch();
257
- this.markAsTouched();
258
- this.closed.emit();
259
- }
260
- // --- Selection Logic ---
261
- selectOption(option) {
262
- const newValue = option ? option.value() : null;
263
- this.value.set(newValue);
264
- this.onChange(newValue);
265
- this.selectionChange.emit(newValue);
266
- this.close();
267
- }
268
- onClear(event) {
269
- event.stopPropagation();
270
- if (this.effectiveDisabled())
271
- return;
272
- this.selectOption(null);
273
- }
274
- markAsTouched() {
275
- if (!this.isTouched()) {
276
- this.isTouched.set(true);
277
- this.onTouched();
278
- }
279
- }
280
- // --- Search / Autocomplete Logic ---
281
- onSearchInput(event) {
282
- const query = event.target.value;
283
- this.searchValue.set(query);
284
- this.searchChange.emit(query);
285
- this.filterOptions(query);
286
- }
287
- clearSearch() {
288
- if (this.searchValue()) {
289
- this.searchValue.set('');
290
- this.searchChange.emit('');
291
- this.filterOptions('');
292
- }
293
- }
294
- filterOptions(query) {
295
- const term = query.toLowerCase().trim();
296
- for (const opt of this.options()) {
297
- if (!term) {
298
- opt.hidden.set(false);
299
- }
300
- else {
301
- const matches = opt.displayText().toLowerCase().includes(term);
302
- opt.hidden.set(!matches);
303
- }
304
- }
305
- const visibleOpts = this.visibleOptions();
306
- this.focusedIndex.set(visibleOpts.length > 0 ? 0 : -1);
307
- }
308
- // --- Keyboard & Document Click Event Handlers ---
309
- onKeyDown(event) {
310
- if (this.effectiveDisabled())
311
- return;
312
- const visibleOpts = this.visibleOptions();
313
- const count = visibleOpts.length;
314
- const currentIdx = this.focusedIndex();
315
- switch (event.key) {
316
- case 'ArrowDown':
317
- event.preventDefault();
318
- if (!this.isOpen()) {
319
- this.open();
320
- }
321
- else if (count > 0) {
322
- const nextIdx = (currentIdx + 1) % count;
323
- this.focusedIndex.set(nextIdx);
324
- }
325
- break;
326
- case 'ArrowUp':
327
- event.preventDefault();
328
- if (!this.isOpen()) {
329
- this.open();
330
- }
331
- else if (count > 0) {
332
- const prevIdx = (currentIdx - 1 + count) % count;
333
- this.focusedIndex.set(prevIdx);
334
- }
335
- break;
336
- case 'Enter':
337
- case ' ':
338
- if (event.key === ' ' && this.searchable() && this.isOpen()) {
339
- // Allow space key inside search input
340
- return;
341
- }
342
- event.preventDefault();
343
- if (!this.isOpen()) {
344
- this.open();
345
- }
346
- else if (currentIdx >= 0 && currentIdx < count) {
347
- this.selectOption(visibleOpts[currentIdx]);
348
- }
349
- break;
350
- case 'Escape':
351
- if (this.isOpen()) {
352
- event.preventDefault();
353
- this.close();
354
- this.triggerEl?.nativeElement.focus();
355
- }
356
- break;
357
- case 'Home':
358
- if (this.isOpen() && count > 0) {
359
- event.preventDefault();
360
- this.focusedIndex.set(0);
361
- }
362
- break;
363
- case 'End':
364
- if (this.isOpen() && count > 0) {
365
- event.preventDefault();
366
- this.focusedIndex.set(count - 1);
367
- }
368
- break;
369
- case 'Tab':
370
- if (this.isOpen()) {
371
- this.close();
372
- }
373
- break;
374
- }
375
- }
376
- ngAfterContentChecked() {
377
- this.checkAffixes();
378
- }
379
- checkAffixes() {
380
- const root = this.elementRef.nativeElement;
381
- const prefixEl = root.querySelector('.select-trigger > [talosPrefix], .select-trigger > [talosTextPrefix], .select-trigger > [talos-prefix], .select-trigger > [talos-text-prefix], .select-trigger > [talosLead], .select-trigger > [talosStart], .select-trigger > [prefix], .select-trigger > .talos-input-prefix');
382
- this.hasPrefix.set(!!prefixEl);
383
- const suffixEl = root.querySelector('.select-trigger > [talosSuffix], .select-trigger > [talosPostfix], .select-trigger > [talosTextSuffix], .select-trigger > [talosTextPostfix], .select-trigger > [talos-suffix], .select-trigger > [talos-postfix], .select-trigger > [talosTrail], .select-trigger > [talosEnd], .select-trigger > [suffix], .select-trigger > .talos-input-suffix');
384
- this.hasSuffix.set(!!suffixEl);
385
- if (prefixEl) {
386
- const prefixWidth = prefixEl.getBoundingClientRect().width;
387
- if (prefixWidth > 0) {
388
- root.style.setProperty('--talos-prefix-offset', `${Math.round(prefixWidth + 16)}px`);
389
- }
390
- }
391
- else {
392
- root.style.removeProperty('--talos-prefix-offset');
393
- }
394
- if (suffixEl) {
395
- const suffixWidth = suffixEl.getBoundingClientRect().width;
396
- if (suffixWidth > 0) {
397
- root.style.setProperty('--talos-suffix-offset', `${Math.round(suffixWidth + 16)}px`);
398
- }
399
- }
400
- else {
401
- root.style.removeProperty('--talos-suffix-offset');
402
- }
403
- }
404
- onDocumentClick(event) {
405
- if (this.isOpen() && !this.elementRef.nativeElement.contains(event.target)) {
406
- this.close();
407
- }
408
- }
409
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
410
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SelectInputComponent, isStandalone: true, selector: "talos-select-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed", searchChange: "searchChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "document:click": "onDocumentClick($event)" }, properties: { "class.is-open": "isOpen()", "class.is-disabled": "effectiveDisabled()", "class.has-label": "!!label()", "class.is-floating": "isFloatingMode()", "class.is-floated": "isFloated()", "class.has-prefix": "hasPrefix()", "class.has-suffix": "hasSuffix()", "class.select-sm": "size() === \"sm\"", "class.select-md": "size() === \"md\"", "class.select-lg": "size() === \"lg\"" }, classAttribute: "talos-select-host" }, providers: [
411
- {
412
- provide: NG_VALUE_ACCESSOR,
413
- useExisting: forwardRef(() => SelectInputComponent),
414
- multi: true
415
- }
416
- ], queries: [{ propertyName: "options", predicate: OptionComponent, descendants: true, isSignal: true }, { propertyName: "optionGroups", predicate: OptionGroupComponent, isSignal: true }], viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true }], ngImport: i0, template: "@if (label() && !isFloatingMode()) {\n <label class=\"talos-field-label\" (click)=\"toggleOpen()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n}\n\n<div class=\"select-control-container\">\n <!-- Select Control Trigger -->\n <div #triggerEl class=\"select-trigger\" role=\"combobox\" [attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\" [attr.aria-disabled]=\"effectiveDisabled()\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" (click)=\"toggleOpen()\">\n <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n <div class=\"select-value-container\">\n @if (selectedOption()) {\n <span class=\"select-value-label\">{{ displayLabel() }}</span>\n } @else if (!isFloatingMode() || isFloated()) {\n <span class=\"select-placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n <div class=\"select-actions\">\n @if (clearable() && selectedOption() && !effectiveDisabled()) {\n <button type=\"button\" class=\"select-clear-btn\" aria-label=\"Clear selection\" title=\"Clear selection\"\n (click)=\"onClear($event)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <span class=\"select-arrow\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </span>\n </div>\n </div>\n\n @if (label() && isFloatingMode()) {\n <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleOpen()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n<!-- Dropdown Panel -->\n@if (isOpen()) {\n<div class=\"select-dropdown-panel\" [id]=\"listboxId\" role=\"listbox\">\n @if (searchable()) {\n <div class=\"select-search-container\">\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input #searchInput type=\"text\" class=\"select-search-input\" [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Search options\" />\n @if (searchValue()) {\n <button type=\"button\" class=\"select-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n </div>\n }\n\n <div class=\"select-options-list\">\n <ng-content></ng-content>\n @if (visibleOptions().length === 0) {\n <div class=\"select-no-options\">\n No matching options\n </div>\n }\n </div>\n</div>\n}\n</div>", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--select-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--select-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--select-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--select-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--select-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--select-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--select-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--select-radius: var(--talos-border-radius, .375rem);--select-height: var(--talos-control-height, 2.25rem);--select-padding-x: var(--talos-control-padding-x, .625rem);--select-font-size: var(--talos-control-font-size, .8125rem);--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem);--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04))}:host.select-sm{--select-height: 2rem;--select-padding-x: .5rem;--select-font-size: .8125rem;--select-radius: .25rem;--talos-affix-btn-size: var(--talos-affix-btn-size-sm, 1.375rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-sm, .8125rem)}:host.select-md{--select-height: 2.25rem;--select-padding-x: .625rem;--select-font-size: .8125rem;--select-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem)}:host.select-lg{--select-height: 2.625rem;--select-padding-x: .75rem;--select-font-size: .875rem;--select-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-lg, 1.75rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-lg, 1rem)}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .select-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.select-control-container{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label{position:absolute;left:var(--select-padding-x, .625rem);top:calc(var(--select-height) / 2);transform:translateY(-50%);font-size:var(--select-font-size, .8125rem);font-weight:500;color:var(--select-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--select-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.select-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--select-height);min-height:var(--select-height);padding:0 var(--select-padding-x);background-color:var(--select-bg);border:1px solid var(--select-border);border-radius:var(--select-radius);color:var(--select-color);font-size:var(--select-font-size);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.select-trigger:hover:not([aria-disabled=true]){border-color:var(--select-border-hover)}.select-trigger:focus-visible{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}:host(.is-open) .select-trigger{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}.select-value-container{flex:1;min-width:0;display:flex;align-items:center}.select-value-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.select-placeholder{color:var(--select-placeholder-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.select-clear-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem);height:var(--talos-affix-btn-size, 1.5rem);min-width:var(--talos-affix-btn-size, 1.5rem);padding:0;background:transparent;border:none;outline:none;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));color:var(--talos-affix-btn-color, var(--talos-text-muted, #94a3b8));cursor:pointer;flex-shrink:0;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.select-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.select-clear-btn:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.select-clear-btn svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.select-arrow{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.select-arrow.is-open{transform:rotate(180deg)}.select-arrow svg{width:.875rem;height:.875rem}.select-dropdown-panel{--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04));--select-radius: var(--talos-border-radius, var(--border-radius, .375rem));--select-color: var(--talos-text-color, var(--text-color, #0f172a));position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background-color:var(--select-dropdown-bg);border:1px solid var(--select-dropdown-border);border-radius:var(--select-radius);box-shadow:var(--select-dropdown-shadow);color:var(--select-color);padding:.25rem;max-height:16rem;display:flex;flex-direction:column;animation:selectDropdownSlideIn .12s cubic-bezier(0,0,.2,1)}@keyframes selectDropdownSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-search-container{position:relative;display:flex;align-items:center;padding:.125rem .125rem .25rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);margin-bottom:.25rem}.select-search-container .search-icon{position:absolute;left:.5rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none}.select-search-input{width:100%;height:1.875rem;padding:.25rem 1.625rem .25rem 1.75rem;font-size:.8125rem;color:var(--select-color);background-color:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.25rem;outline:none;transition:border-color .15s ease,background-color .15s ease}.select-search-input:focus{background-color:var(--talos-card-bg, #ffffff);border-color:var(--select-border-focus)}.select-search-input::placeholder{color:var(--talos-placeholder-color, #94a3b8)}.select-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer}.select-search-clear:hover{color:var(--talos-text-color, #64748b)}.select-search-clear svg{width:.75rem;height:.75rem}.select-options-list{overflow-y:auto;max-height:13rem;padding-right:.125rem}.select-options-list::-webkit-scrollbar{width:4px}.select-options-list::-webkit-scrollbar-track{background:transparent}.select-options-list::-webkit-scrollbar-thumb{background:var(--talos-border-color, #cbd5e1);border-radius:2px}.select-options-list::-webkit-scrollbar-thumb:hover{background:var(--talos-border-hover, #94a3b8)}.select-no-options{padding:.875rem .625rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8);font-style:italic}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--select-padding-x, .625rem) + 1.625rem))!important}:host(.has-prefix.select-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.select-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.625rem)!important}::ng-deep .select-trigger>[talosPrefix],::ng-deep .select-trigger>[talosTextPrefix],::ng-deep .select-trigger>[talosLead],::ng-deep .select-trigger>[talosStart],::ng-deep .select-trigger>[prefix],::ng-deep .select-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosPrefix].affix-interactive,::ng-deep .select-trigger>[talosPrefix] button,::ng-deep .select-trigger>[talosPrefix] a,::ng-deep .select-trigger>[talosTextPrefix].affix-interactive,::ng-deep .select-trigger>[talosTextPrefix] button,::ng-deep .select-trigger>[talosTextPrefix] a,::ng-deep .select-trigger>[talosLead].affix-interactive,::ng-deep .select-trigger>[talosLead] button,::ng-deep .select-trigger>[talosLead] a,::ng-deep .select-trigger>[talosStart].affix-interactive,::ng-deep .select-trigger>[talosStart] button,::ng-deep .select-trigger>[talosStart] a,::ng-deep .select-trigger>[prefix].affix-interactive,::ng-deep .select-trigger>[prefix] button,::ng-deep .select-trigger>[prefix] a,::ng-deep .select-trigger>.talos-input-prefix.affix-interactive,::ng-deep .select-trigger>.talos-input-prefix button,::ng-deep .select-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .select-trigger>[talosPrefix]:hover,::ng-deep .select-trigger>[talosPrefix]:active,::ng-deep .select-trigger>[talosPrefix]:focus,::ng-deep .select-trigger>[talosPrefix]:focus-visible,::ng-deep .select-trigger>[talosTextPrefix]:hover,::ng-deep .select-trigger>[talosTextPrefix]:active,::ng-deep .select-trigger>[talosTextPrefix]:focus,::ng-deep .select-trigger>[talosTextPrefix]:focus-visible,::ng-deep .select-trigger>[talosLead]:hover,::ng-deep .select-trigger>[talosLead]:active,::ng-deep .select-trigger>[talosLead]:focus,::ng-deep .select-trigger>[talosLead]:focus-visible,::ng-deep .select-trigger>[talosStart]:hover,::ng-deep .select-trigger>[talosStart]:active,::ng-deep .select-trigger>[talosStart]:focus,::ng-deep .select-trigger>[talosStart]:focus-visible,::ng-deep .select-trigger>[prefix]:hover,::ng-deep .select-trigger>[prefix]:active,::ng-deep .select-trigger>[prefix]:focus,::ng-deep .select-trigger>[prefix]:focus-visible,::ng-deep .select-trigger>.talos-input-prefix:hover,::ng-deep .select-trigger>.talos-input-prefix:active,::ng-deep .select-trigger>.talos-input-prefix:focus,::ng-deep .select-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>[talosSuffix],::ng-deep .select-trigger>[talosPostfix],::ng-deep .select-trigger>[talosTextSuffix],::ng-deep .select-trigger>[talosTextPostfix],::ng-deep .select-trigger>[talosTrail],::ng-deep .select-trigger>[talosEnd],::ng-deep .select-trigger>[suffix],::ng-deep .select-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosSuffix].affix-interactive,::ng-deep .select-trigger>[talosSuffix] button,::ng-deep .select-trigger>[talosSuffix] a,::ng-deep .select-trigger>[talosPostfix].affix-interactive,::ng-deep .select-trigger>[talosPostfix] button,::ng-deep .select-trigger>[talosPostfix] a,::ng-deep .select-trigger>[talosTextSuffix].affix-interactive,::ng-deep .select-trigger>[talosTextSuffix] button,::ng-deep .select-trigger>[talosTextSuffix] a,::ng-deep .select-trigger>[talosTextPostfix].affix-interactive,::ng-deep .select-trigger>[talosTextPostfix] button,::ng-deep .select-trigger>[talosTextPostfix] a,::ng-deep .select-trigger>[talosTrail].affix-interactive,::ng-deep .select-trigger>[talosTrail] button,::ng-deep .select-trigger>[talosTrail] a,::ng-deep .select-trigger>[talosEnd].affix-interactive,::ng-deep .select-trigger>[talosEnd] button,::ng-deep .select-trigger>[talosEnd] a,::ng-deep .select-trigger>[suffix].affix-interactive,::ng-deep .select-trigger>[suffix] button,::ng-deep .select-trigger>[suffix] a,::ng-deep .select-trigger>.talos-input-suffix.affix-interactive,::ng-deep .select-trigger>.talos-input-suffix button,::ng-deep .select-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .select-trigger>[talosSuffix]:hover,::ng-deep .select-trigger>[talosSuffix]:active,::ng-deep .select-trigger>[talosSuffix]:focus,::ng-deep .select-trigger>[talosSuffix]:focus-visible,::ng-deep .select-trigger>[talosPostfix]:hover,::ng-deep .select-trigger>[talosPostfix]:active,::ng-deep .select-trigger>[talosPostfix]:focus,::ng-deep .select-trigger>[talosPostfix]:focus-visible,::ng-deep .select-trigger>[talosTextSuffix]:hover,::ng-deep .select-trigger>[talosTextSuffix]:active,::ng-deep .select-trigger>[talosTextSuffix]:focus,::ng-deep .select-trigger>[talosTextSuffix]:focus-visible,::ng-deep .select-trigger>[talosTextPostfix]:hover,::ng-deep .select-trigger>[talosTextPostfix]:active,::ng-deep .select-trigger>[talosTextPostfix]:focus,::ng-deep .select-trigger>[talosTextPostfix]:focus-visible,::ng-deep .select-trigger>[talosTrail]:hover,::ng-deep .select-trigger>[talosTrail]:active,::ng-deep .select-trigger>[talosTrail]:focus,::ng-deep .select-trigger>[talosTrail]:focus-visible,::ng-deep .select-trigger>[talosEnd]:hover,::ng-deep .select-trigger>[talosEnd]:active,::ng-deep .select-trigger>[talosEnd]:focus,::ng-deep .select-trigger>[talosEnd]:focus-visible,::ng-deep .select-trigger>[suffix]:hover,::ng-deep .select-trigger>[suffix]:active,::ng-deep .select-trigger>[suffix]:focus,::ng-deep .select-trigger>[suffix]:focus-visible,::ng-deep .select-trigger>.talos-input-suffix:hover,::ng-deep .select-trigger>.talos-input-suffix:active,::ng-deep .select-trigger>.talos-input-suffix:focus,::ng-deep .select-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element,::ng-deep .select-trigger>button[talosPrefix],::ng-deep .select-trigger>button[talosSuffix],::ng-deep .select-trigger>button[talosPostfix],::ng-deep .select-trigger>button[talosLead],::ng-deep .select-trigger>button[talosTrail],::ng-deep .select-trigger>button[talosStart],::ng-deep .select-trigger>button[talosEnd],::ng-deep .select-trigger>button[talosAffixButton],::ng-deep .select-trigger>button.talos-affix-btn,::ng-deep .select-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .select-trigger>button.talos-affix-element svg,::ng-deep .select-trigger>button.talos-affix-element i,::ng-deep .select-trigger>button.talos-affix-element [lucideIcon],::ng-deep .select-trigger>button.talos-affix-element .lucide,::ng-deep .select-trigger>button[talosPrefix] svg,::ng-deep .select-trigger>button[talosPrefix] i,::ng-deep .select-trigger>button[talosPrefix] [lucideIcon],::ng-deep .select-trigger>button[talosPrefix] .lucide,::ng-deep .select-trigger>button[talosSuffix] svg,::ng-deep .select-trigger>button[talosSuffix] i,::ng-deep .select-trigger>button[talosSuffix] [lucideIcon],::ng-deep .select-trigger>button[talosSuffix] .lucide,::ng-deep .select-trigger>button[talosPostfix] svg,::ng-deep .select-trigger>button[talosPostfix] i,::ng-deep .select-trigger>button[talosPostfix] [lucideIcon],::ng-deep .select-trigger>button[talosPostfix] .lucide,::ng-deep .select-trigger>button[talosLead] svg,::ng-deep .select-trigger>button[talosLead] i,::ng-deep .select-trigger>button[talosLead] [lucideIcon],::ng-deep .select-trigger>button[talosLead] .lucide,::ng-deep .select-trigger>button[talosTrail] svg,::ng-deep .select-trigger>button[talosTrail] i,::ng-deep .select-trigger>button[talosTrail] [lucideIcon],::ng-deep .select-trigger>button[talosTrail] .lucide,::ng-deep .select-trigger>button[talosStart] svg,::ng-deep .select-trigger>button[talosStart] i,::ng-deep .select-trigger>button[talosStart] [lucideIcon],::ng-deep .select-trigger>button[talosStart] .lucide,::ng-deep .select-trigger>button[talosEnd] svg,::ng-deep .select-trigger>button[talosEnd] i,::ng-deep .select-trigger>button[talosEnd] [lucideIcon],::ng-deep .select-trigger>button[talosEnd] .lucide,::ng-deep .select-trigger>button[talosAffixButton] svg,::ng-deep .select-trigger>button[talosAffixButton] i,::ng-deep .select-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .select-trigger>button[talosAffixButton] .lucide,::ng-deep .select-trigger>button.talos-affix-btn svg,::ng-deep .select-trigger>button.talos-affix-btn i,::ng-deep .select-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .select-trigger>button.talos-affix-btn .lucide,::ng-deep .select-trigger>.affix-interactive:is(button) svg,::ng-deep .select-trigger>.affix-interactive:is(button) i,::ng-deep .select-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .select-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .select-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .select-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] });
417
- }
418
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputComponent, decorators: [{
419
- type: Component,
420
- args: [{ selector: 'talos-select-input', providers: [
421
- {
422
- provide: NG_VALUE_ACCESSOR,
423
- useExisting: forwardRef(() => SelectInputComponent),
424
- multi: true
425
- }
426
- ], host: {
427
- 'class': 'talos-select-host',
428
- '[class.is-open]': 'isOpen()',
429
- '[class.is-disabled]': 'effectiveDisabled()',
430
- '[class.has-label]': '!!label()',
431
- '[class.is-floating]': 'isFloatingMode()',
432
- '[class.is-floated]': 'isFloated()',
433
- '[class.has-prefix]': 'hasPrefix()',
434
- '[class.has-suffix]': 'hasSuffix()',
435
- '[class.select-sm]': 'size() === "sm"',
436
- '[class.select-md]': 'size() === "md"',
437
- '[class.select-lg]': 'size() === "lg"',
438
- '(keydown)': 'onKeyDown($event)',
439
- '(document:click)': 'onDocumentClick($event)'
440
- }, template: "@if (label() && !isFloatingMode()) {\n <label class=\"talos-field-label\" (click)=\"toggleOpen()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n}\n\n<div class=\"select-control-container\">\n <!-- Select Control Trigger -->\n <div #triggerEl class=\"select-trigger\" role=\"combobox\" [attr.aria-expanded]=\"isOpen()\" [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\" [attr.aria-disabled]=\"effectiveDisabled()\"\n [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" (click)=\"toggleOpen()\">\n <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n <div class=\"select-value-container\">\n @if (selectedOption()) {\n <span class=\"select-value-label\">{{ displayLabel() }}</span>\n } @else if (!isFloatingMode() || isFloated()) {\n <span class=\"select-placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n <div class=\"select-actions\">\n @if (clearable() && selectedOption() && !effectiveDisabled()) {\n <button type=\"button\" class=\"select-clear-btn\" aria-label=\"Clear selection\" title=\"Clear selection\"\n (click)=\"onClear($event)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <span class=\"select-arrow\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </span>\n </div>\n </div>\n\n @if (label() && isFloatingMode()) {\n <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleOpen()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n<!-- Dropdown Panel -->\n@if (isOpen()) {\n<div class=\"select-dropdown-panel\" [id]=\"listboxId\" role=\"listbox\">\n @if (searchable()) {\n <div class=\"select-search-container\">\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input #searchInput type=\"text\" class=\"select-search-input\" [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Search options\" />\n @if (searchValue()) {\n <button type=\"button\" class=\"select-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n </div>\n }\n\n <div class=\"select-options-list\">\n <ng-content></ng-content>\n @if (visibleOptions().length === 0) {\n <div class=\"select-no-options\">\n No matching options\n </div>\n }\n </div>\n</div>\n}\n</div>", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--select-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--select-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--select-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--select-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--select-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--select-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--select-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--select-radius: var(--talos-border-radius, .375rem);--select-height: var(--talos-control-height, 2.25rem);--select-padding-x: var(--talos-control-padding-x, .625rem);--select-font-size: var(--talos-control-font-size, .8125rem);--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem);--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04))}:host.select-sm{--select-height: 2rem;--select-padding-x: .5rem;--select-font-size: .8125rem;--select-radius: .25rem;--talos-affix-btn-size: var(--talos-affix-btn-size-sm, 1.375rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-sm, .8125rem)}:host.select-md{--select-height: 2.25rem;--select-padding-x: .625rem;--select-font-size: .8125rem;--select-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem)}:host.select-lg{--select-height: 2.625rem;--select-padding-x: .75rem;--select-font-size: .875rem;--select-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-lg, 1.75rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-lg, 1rem)}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .select-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.select-control-container{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label{position:absolute;left:var(--select-padding-x, .625rem);top:calc(var(--select-height) / 2);transform:translateY(-50%);font-size:var(--select-font-size, .8125rem);font-weight:500;color:var(--select-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--select-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.select-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--select-height);min-height:var(--select-height);padding:0 var(--select-padding-x);background-color:var(--select-bg);border:1px solid var(--select-border);border-radius:var(--select-radius);color:var(--select-color);font-size:var(--select-font-size);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.select-trigger:hover:not([aria-disabled=true]){border-color:var(--select-border-hover)}.select-trigger:focus-visible{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}:host(.is-open) .select-trigger{border-color:var(--select-border-focus);box-shadow:var(--select-shadow-focus)}.select-value-container{flex:1;min-width:0;display:flex;align-items:center}.select-value-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.select-placeholder{color:var(--select-placeholder-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.select-clear-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem);height:var(--talos-affix-btn-size, 1.5rem);min-width:var(--talos-affix-btn-size, 1.5rem);padding:0;background:transparent;border:none;outline:none;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));color:var(--talos-affix-btn-color, var(--talos-text-muted, #94a3b8));cursor:pointer;flex-shrink:0;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.select-clear-btn:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.select-clear-btn:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.select-clear-btn svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.select-arrow{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.select-arrow.is-open{transform:rotate(180deg)}.select-arrow svg{width:.875rem;height:.875rem}.select-dropdown-panel{--select-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--select-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--select-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04));--select-radius: var(--talos-border-radius, var(--border-radius, .375rem));--select-color: var(--talos-text-color, var(--text-color, #0f172a));position:absolute;top:calc(100% + .25rem);left:0;right:0;z-index:1000;background-color:var(--select-dropdown-bg);border:1px solid var(--select-dropdown-border);border-radius:var(--select-radius);box-shadow:var(--select-dropdown-shadow);color:var(--select-color);padding:.25rem;max-height:16rem;display:flex;flex-direction:column;animation:selectDropdownSlideIn .12s cubic-bezier(0,0,.2,1)}@keyframes selectDropdownSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select-search-container{position:relative;display:flex;align-items:center;padding:.125rem .125rem .25rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);margin-bottom:.25rem}.select-search-container .search-icon{position:absolute;left:.5rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none}.select-search-input{width:100%;height:1.875rem;padding:.25rem 1.625rem .25rem 1.75rem;font-size:.8125rem;color:var(--select-color);background-color:var(--talos-bg-color, #f8fafc);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:.25rem;outline:none;transition:border-color .15s ease,background-color .15s ease}.select-search-input:focus{background-color:var(--talos-card-bg, #ffffff);border-color:var(--select-border-focus)}.select-search-input::placeholder{color:var(--talos-placeholder-color, #94a3b8)}.select-search-clear{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer}.select-search-clear:hover{color:var(--talos-text-color, #64748b)}.select-search-clear svg{width:.75rem;height:.75rem}.select-options-list{overflow-y:auto;max-height:13rem;padding-right:.125rem}.select-options-list::-webkit-scrollbar{width:4px}.select-options-list::-webkit-scrollbar-track{background:transparent}.select-options-list::-webkit-scrollbar-thumb{background:var(--talos-border-color, #cbd5e1);border-radius:2px}.select-options-list::-webkit-scrollbar-thumb:hover{background:var(--talos-border-hover, #94a3b8)}.select-no-options{padding:.875rem .625rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8);font-style:italic}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--select-padding-x, .625rem) + 1.625rem))!important}:host(.has-prefix.select-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.select-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.625rem)!important}::ng-deep .select-trigger>[talosPrefix],::ng-deep .select-trigger>[talosTextPrefix],::ng-deep .select-trigger>[talosLead],::ng-deep .select-trigger>[talosStart],::ng-deep .select-trigger>[prefix],::ng-deep .select-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosPrefix].affix-interactive,::ng-deep .select-trigger>[talosPrefix] button,::ng-deep .select-trigger>[talosPrefix] a,::ng-deep .select-trigger>[talosTextPrefix].affix-interactive,::ng-deep .select-trigger>[talosTextPrefix] button,::ng-deep .select-trigger>[talosTextPrefix] a,::ng-deep .select-trigger>[talosLead].affix-interactive,::ng-deep .select-trigger>[talosLead] button,::ng-deep .select-trigger>[talosLead] a,::ng-deep .select-trigger>[talosStart].affix-interactive,::ng-deep .select-trigger>[talosStart] button,::ng-deep .select-trigger>[talosStart] a,::ng-deep .select-trigger>[prefix].affix-interactive,::ng-deep .select-trigger>[prefix] button,::ng-deep .select-trigger>[prefix] a,::ng-deep .select-trigger>.talos-input-prefix.affix-interactive,::ng-deep .select-trigger>.talos-input-prefix button,::ng-deep .select-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .select-trigger>[talosPrefix]:hover,::ng-deep .select-trigger>[talosPrefix]:active,::ng-deep .select-trigger>[talosPrefix]:focus,::ng-deep .select-trigger>[talosPrefix]:focus-visible,::ng-deep .select-trigger>[talosTextPrefix]:hover,::ng-deep .select-trigger>[talosTextPrefix]:active,::ng-deep .select-trigger>[talosTextPrefix]:focus,::ng-deep .select-trigger>[talosTextPrefix]:focus-visible,::ng-deep .select-trigger>[talosLead]:hover,::ng-deep .select-trigger>[talosLead]:active,::ng-deep .select-trigger>[talosLead]:focus,::ng-deep .select-trigger>[talosLead]:focus-visible,::ng-deep .select-trigger>[talosStart]:hover,::ng-deep .select-trigger>[talosStart]:active,::ng-deep .select-trigger>[talosStart]:focus,::ng-deep .select-trigger>[talosStart]:focus-visible,::ng-deep .select-trigger>[prefix]:hover,::ng-deep .select-trigger>[prefix]:active,::ng-deep .select-trigger>[prefix]:focus,::ng-deep .select-trigger>[prefix]:focus-visible,::ng-deep .select-trigger>.talos-input-prefix:hover,::ng-deep .select-trigger>.talos-input-prefix:active,::ng-deep .select-trigger>.talos-input-prefix:focus,::ng-deep .select-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>[talosSuffix],::ng-deep .select-trigger>[talosPostfix],::ng-deep .select-trigger>[talosTextSuffix],::ng-deep .select-trigger>[talosTextPostfix],::ng-deep .select-trigger>[talosTrail],::ng-deep .select-trigger>[talosEnd],::ng-deep .select-trigger>[suffix],::ng-deep .select-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--select-font-size);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .select-trigger>[talosSuffix].affix-interactive,::ng-deep .select-trigger>[talosSuffix] button,::ng-deep .select-trigger>[talosSuffix] a,::ng-deep .select-trigger>[talosPostfix].affix-interactive,::ng-deep .select-trigger>[talosPostfix] button,::ng-deep .select-trigger>[talosPostfix] a,::ng-deep .select-trigger>[talosTextSuffix].affix-interactive,::ng-deep .select-trigger>[talosTextSuffix] button,::ng-deep .select-trigger>[talosTextSuffix] a,::ng-deep .select-trigger>[talosTextPostfix].affix-interactive,::ng-deep .select-trigger>[talosTextPostfix] button,::ng-deep .select-trigger>[talosTextPostfix] a,::ng-deep .select-trigger>[talosTrail].affix-interactive,::ng-deep .select-trigger>[talosTrail] button,::ng-deep .select-trigger>[talosTrail] a,::ng-deep .select-trigger>[talosEnd].affix-interactive,::ng-deep .select-trigger>[talosEnd] button,::ng-deep .select-trigger>[talosEnd] a,::ng-deep .select-trigger>[suffix].affix-interactive,::ng-deep .select-trigger>[suffix] button,::ng-deep .select-trigger>[suffix] a,::ng-deep .select-trigger>.talos-input-suffix.affix-interactive,::ng-deep .select-trigger>.talos-input-suffix button,::ng-deep .select-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .select-trigger>[talosSuffix]:hover,::ng-deep .select-trigger>[talosSuffix]:active,::ng-deep .select-trigger>[talosSuffix]:focus,::ng-deep .select-trigger>[talosSuffix]:focus-visible,::ng-deep .select-trigger>[talosPostfix]:hover,::ng-deep .select-trigger>[talosPostfix]:active,::ng-deep .select-trigger>[talosPostfix]:focus,::ng-deep .select-trigger>[talosPostfix]:focus-visible,::ng-deep .select-trigger>[talosTextSuffix]:hover,::ng-deep .select-trigger>[talosTextSuffix]:active,::ng-deep .select-trigger>[talosTextSuffix]:focus,::ng-deep .select-trigger>[talosTextSuffix]:focus-visible,::ng-deep .select-trigger>[talosTextPostfix]:hover,::ng-deep .select-trigger>[talosTextPostfix]:active,::ng-deep .select-trigger>[talosTextPostfix]:focus,::ng-deep .select-trigger>[talosTextPostfix]:focus-visible,::ng-deep .select-trigger>[talosTrail]:hover,::ng-deep .select-trigger>[talosTrail]:active,::ng-deep .select-trigger>[talosTrail]:focus,::ng-deep .select-trigger>[talosTrail]:focus-visible,::ng-deep .select-trigger>[talosEnd]:hover,::ng-deep .select-trigger>[talosEnd]:active,::ng-deep .select-trigger>[talosEnd]:focus,::ng-deep .select-trigger>[talosEnd]:focus-visible,::ng-deep .select-trigger>[suffix]:hover,::ng-deep .select-trigger>[suffix]:active,::ng-deep .select-trigger>[suffix]:focus,::ng-deep .select-trigger>[suffix]:focus-visible,::ng-deep .select-trigger>.talos-input-suffix:hover,::ng-deep .select-trigger>.talos-input-suffix:active,::ng-deep .select-trigger>.talos-input-suffix:focus,::ng-deep .select-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element,::ng-deep .select-trigger>button[talosPrefix],::ng-deep .select-trigger>button[talosSuffix],::ng-deep .select-trigger>button[talosPostfix],::ng-deep .select-trigger>button[talosLead],::ng-deep .select-trigger>button[talosTrail],::ng-deep .select-trigger>button[talosStart],::ng-deep .select-trigger>button[talosEnd],::ng-deep .select-trigger>button[talosAffixButton],::ng-deep .select-trigger>button.talos-affix-btn,::ng-deep .select-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .select-trigger>button.talos-affix-element svg,::ng-deep .select-trigger>button.talos-affix-element i,::ng-deep .select-trigger>button.talos-affix-element [lucideIcon],::ng-deep .select-trigger>button.talos-affix-element .lucide,::ng-deep .select-trigger>button[talosPrefix] svg,::ng-deep .select-trigger>button[talosPrefix] i,::ng-deep .select-trigger>button[talosPrefix] [lucideIcon],::ng-deep .select-trigger>button[talosPrefix] .lucide,::ng-deep .select-trigger>button[talosSuffix] svg,::ng-deep .select-trigger>button[talosSuffix] i,::ng-deep .select-trigger>button[talosSuffix] [lucideIcon],::ng-deep .select-trigger>button[talosSuffix] .lucide,::ng-deep .select-trigger>button[talosPostfix] svg,::ng-deep .select-trigger>button[talosPostfix] i,::ng-deep .select-trigger>button[talosPostfix] [lucideIcon],::ng-deep .select-trigger>button[talosPostfix] .lucide,::ng-deep .select-trigger>button[talosLead] svg,::ng-deep .select-trigger>button[talosLead] i,::ng-deep .select-trigger>button[talosLead] [lucideIcon],::ng-deep .select-trigger>button[talosLead] .lucide,::ng-deep .select-trigger>button[talosTrail] svg,::ng-deep .select-trigger>button[talosTrail] i,::ng-deep .select-trigger>button[talosTrail] [lucideIcon],::ng-deep .select-trigger>button[talosTrail] .lucide,::ng-deep .select-trigger>button[talosStart] svg,::ng-deep .select-trigger>button[talosStart] i,::ng-deep .select-trigger>button[talosStart] [lucideIcon],::ng-deep .select-trigger>button[talosStart] .lucide,::ng-deep .select-trigger>button[talosEnd] svg,::ng-deep .select-trigger>button[talosEnd] i,::ng-deep .select-trigger>button[talosEnd] [lucideIcon],::ng-deep .select-trigger>button[talosEnd] .lucide,::ng-deep .select-trigger>button[talosAffixButton] svg,::ng-deep .select-trigger>button[talosAffixButton] i,::ng-deep .select-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .select-trigger>button[talosAffixButton] .lucide,::ng-deep .select-trigger>button.talos-affix-btn svg,::ng-deep .select-trigger>button.talos-affix-btn i,::ng-deep .select-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .select-trigger>button.talos-affix-btn .lucide,::ng-deep .select-trigger>.affix-interactive:is(button) svg,::ng-deep .select-trigger>.affix-interactive:is(button) i,::ng-deep .select-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .select-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .select-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .select-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .select-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .select-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] }]
441
- }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionComponent), { ...{ descendants: true }, isSignal: true }] }], optionGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => OptionGroupComponent), { isSignal: true }] }], searchInputEl: [{
442
- type: ViewChild,
443
- args: ['searchInput']
444
- }], triggerEl: [{
445
- type: ViewChild,
446
- args: ['triggerEl']
447
- }] } });
448
-
449
- class CascadeSelectComponent {
450
- elementRef = inject((ElementRef));
451
- // Signal Inputs
452
- options = input([], /* @ts-ignore */
453
- ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
454
- placeholder = input('Select path...', /* @ts-ignore */
455
- ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
456
- label = input('', /* @ts-ignore */
457
- ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
458
- floatingLabel = input(false, /* @ts-ignore */
459
- ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
460
- floating = input(false, /* @ts-ignore */
461
- ...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
462
- required = input(false, /* @ts-ignore */
463
- ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
464
- disabled = input(false, /* @ts-ignore */
465
- ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
466
- clearable = input(false, /* @ts-ignore */
467
- ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
468
- searchable = input(false, /* @ts-ignore */
469
- ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
470
- searchPlaceholder = input('Search full hierarchy...', /* @ts-ignore */
471
- ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
472
- expandTrigger = input('click', /* @ts-ignore */
473
- ...(ngDevMode ? [{ debugName: "expandTrigger" }] : /* istanbul ignore next */ []));
474
- valueMode = input('path', /* @ts-ignore */
475
- ...(ngDevMode ? [{ debugName: "valueMode" }] : /* istanbul ignore next */ []));
476
- separator = input(' / ', /* @ts-ignore */
477
- ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
478
- size = input('md', /* @ts-ignore */
479
- ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
480
- // Signal Outputs
481
- pathChange = output();
482
- selectionChange = output();
483
- opened = output();
484
- closed = output();
485
- // Internal Reactive State
486
- isOpen = signal(false, /* @ts-ignore */
487
- ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
488
- activePath = signal([], /* @ts-ignore */
489
- ...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
490
- selectedPath = signal([], /* @ts-ignore */
491
- ...(ngDevMode ? [{ debugName: "selectedPath" }] : /* istanbul ignore next */ []));
492
- searchTerm = signal('', /* @ts-ignore */
493
- ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
494
- highlightedSearchIndex = signal(0, /* @ts-ignore */
495
- ...(ngDevMode ? [{ debugName: "highlightedSearchIndex" }] : /* istanbul ignore next */ []));
496
- hasPrefix = signal(false, /* @ts-ignore */
497
- ...(ngDevMode ? [{ debugName: "hasPrefix" }] : /* istanbul ignore next */ []));
498
- hasSuffix = signal(false, /* @ts-ignore */
499
- ...(ngDevMode ? [{ debugName: "hasSuffix" }] : /* istanbul ignore next */ []));
500
- // Form Control State
501
- hasError = signal(false, /* @ts-ignore */
502
- ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
503
- searchInputEl;
504
- triggerBoxEl;
505
- onChange = () => { };
506
- onTouched = () => { };
507
- isFloatingMode = computed(() => this.floatingLabel() || this.floating(), /* @ts-ignore */
508
- ...(ngDevMode ? [{ debugName: "isFloatingMode" }] : /* istanbul ignore next */ []));
509
- displayLabel = computed(() => {
510
- const sel = this.selectedPath();
511
- if (!sel || sel.length === 0) {
512
- return '';
513
- }
514
- return sel.map((opt) => opt.label).join(this.separator());
515
- }, /* @ts-ignore */
516
- ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
517
- isFloated = computed(() => {
518
- return this.isOpen() || !!this.displayLabel();
519
- }, /* @ts-ignore */
520
- ...(ngDevMode ? [{ debugName: "isFloated" }] : /* istanbul ignore next */ []));
521
- // Dynamic Column List for Cascade Panels
522
- activeColumns = computed(() => {
523
- const rootOptions = this.options();
524
- const currentActive = this.activePath();
525
- const columns = [];
526
- // Root column
527
- columns.push({
528
- depth: 0,
529
- options: rootOptions,
530
- selectedOption: currentActive[0] || null
531
- });
532
- // Sub-columns following the active path
533
- for (let i = 0; i < currentActive.length; i++) {
534
- const activeOpt = currentActive[i];
535
- if (activeOpt && activeOpt.children && activeOpt.children.length > 0) {
536
- columns.push({
537
- depth: i + 1,
538
- options: activeOpt.children,
539
- selectedOption: currentActive[i + 1] || null
540
- });
541
- }
542
- }
543
- return columns;
544
- }, /* @ts-ignore */
545
- ...(ngDevMode ? [{ debugName: "activeColumns" }] : /* istanbul ignore next */ []));
546
- // Flat Search Index for Typeahead Search
547
- allSearchablePaths = computed(() => {
548
- const results = [];
549
- const rootOptions = this.options();
550
- const traverse = (opts, currentPath) => {
551
- for (const opt of opts) {
552
- const nextPath = [...currentPath, opt];
553
- const isLeaf = !opt.children || opt.children.length === 0 || opt.leaf;
554
- if (isLeaf) {
555
- results.push({
556
- option: opt,
557
- path: nextPath,
558
- labelPath: nextPath.map((p) => p.label).join(this.separator()),
559
- valuePath: nextPath.map((p) => p.value),
560
- disabled: nextPath.some((p) => p.disabled)
561
- });
562
- }
563
- if (opt.children && opt.children.length > 0) {
564
- traverse(opt.children, nextPath);
565
- }
566
- }
567
- };
568
- traverse(rootOptions, []);
569
- return results;
570
- }, /* @ts-ignore */
571
- ...(ngDevMode ? [{ debugName: "allSearchablePaths" }] : /* istanbul ignore next */ []));
572
- filteredSearchResults = computed(() => {
573
- const term = this.searchTerm().toLowerCase().trim();
574
- if (!term) {
575
- return [];
576
- }
577
- return this.allSearchablePaths().filter((match) => match.labelPath.toLowerCase().includes(term));
578
- }, /* @ts-ignore */
579
- ...(ngDevMode ? [{ debugName: "filteredSearchResults" }] : /* istanbul ignore next */ []));
580
- // ControlValueAccessor Implementation
581
- writeValue(value) {
582
- if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
583
- this.selectedPath.set([]);
584
- this.activePath.set([]);
585
- return;
586
- }
587
- const matchedPath = this.findPathForValue(value, this.options());
588
- if (matchedPath) {
589
- this.selectedPath.set(matchedPath);
590
- this.activePath.set(matchedPath);
591
- }
592
- }
593
- registerOnChange(fn) {
594
- this.onChange = fn;
595
- }
596
- registerOnTouched(fn) {
597
- this.onTouched = fn;
598
- }
599
- setDisabledState(isDisabled) {
600
- // Handled via input or form state
601
- }
602
- toggleDropdown() {
603
- if (this.disabled()) {
604
- return;
605
- }
606
- if (this.isOpen()) {
607
- this.closeDropdown();
608
- }
609
- else {
610
- this.openDropdown();
611
- }
612
- }
613
- openDropdown() {
614
- if (this.disabled()) {
615
- return;
616
- }
617
- this.isOpen.set(true);
618
- this.searchTerm.set('');
619
- // Sync active path with selected path on open
620
- this.activePath.set([...this.selectedPath()]);
621
- this.opened.emit();
622
- if (this.searchable()) {
623
- setTimeout(() => {
624
- this.searchInputEl?.nativeElement.focus();
625
- }, 50);
626
- }
627
- }
628
- closeDropdown() {
629
- if (!this.isOpen()) {
630
- return;
631
- }
632
- this.isOpen.set(false);
633
- this.searchTerm.set('');
634
- this.onTouched();
635
- this.closed.emit();
636
- }
637
- onDocumentClick(event) {
638
- if (!this.elementRef.nativeElement.contains(event.target)) {
639
- this.closeDropdown();
640
- }
641
- }
642
- hasChildren(option) {
643
- return !!option.children && option.children.length > 0 && !option.leaf;
644
- }
645
- isOptionSelected(depth, option) {
646
- const sel = this.selectedPath();
647
- return sel[depth]?.value === option.value;
648
- }
649
- isOptionActiveBranch(depth, option) {
650
- const active = this.activePath();
651
- return active[depth]?.value === option.value;
652
- }
653
- onOptionHover(depth, option) {
654
- if (this.expandTrigger() !== 'hover' || option.disabled) {
655
- return;
656
- }
657
- this.expandOption(depth, option);
658
- }
659
- onOptionClick(depth, option) {
660
- if (option.disabled) {
661
- return;
662
- }
663
- if (this.hasChildren(option)) {
664
- this.expandOption(depth, option);
665
- }
666
- else {
667
- // Leaf Node Selection
668
- const newPath = [...this.activePath().slice(0, depth), option];
669
- this.commitSelection(newPath);
670
- }
671
- }
672
- expandOption(depth, option) {
673
- const newActive = [...this.activePath().slice(0, depth), option];
674
- this.activePath.set(newActive);
675
- }
676
- commitSelection(path) {
677
- this.selectedPath.set(path);
678
- this.activePath.set(path);
679
- const emittedValue = this.valueMode() === 'leaf'
680
- ? path[path.length - 1]?.value
681
- : path.map((p) => p.value);
682
- this.onChange(emittedValue);
683
- this.selectionChange.emit(emittedValue);
684
- this.pathChange.emit(path);
685
- this.closeDropdown();
686
- }
687
- onClear(event) {
688
- event.stopPropagation();
689
- this.selectedPath.set([]);
690
- this.activePath.set([]);
691
- const emptyVal = this.valueMode() === 'leaf' ? null : [];
692
- this.onChange(emptyVal);
693
- this.selectionChange.emit(emptyVal);
694
- this.pathChange.emit([]);
695
- }
696
- // Search Logic
697
- onSearchInput(event) {
698
- const input = event.target;
699
- this.searchTerm.set(input.value);
700
- this.highlightedSearchIndex.set(0);
701
- }
702
- clearSearch() {
703
- this.searchTerm.set('');
704
- this.searchInputEl?.nativeElement.focus();
705
- }
706
- selectSearchResult(match) {
707
- if (match.disabled) {
708
- return;
709
- }
710
- this.commitSelection(match.path);
711
- }
712
- onSearchKeyDown(event) {
713
- const results = this.filteredSearchResults();
714
- if (results.length === 0) {
715
- return;
716
- }
717
- if (event.key === 'ArrowDown') {
718
- event.preventDefault();
719
- this.highlightedSearchIndex.update((idx) => (idx + 1) % results.length);
720
- }
721
- else if (event.key === 'ArrowUp') {
722
- event.preventDefault();
723
- this.highlightedSearchIndex.update((idx) => (idx - 1 + results.length) % results.length);
724
- }
725
- else if (event.key === 'Enter') {
726
- event.preventDefault();
727
- const current = results[this.highlightedSearchIndex()];
728
- if (current) {
729
- this.selectSearchResult(current);
730
- }
731
- }
732
- else if (event.key === 'Escape') {
733
- event.preventDefault();
734
- this.closeDropdown();
735
- }
736
- }
737
- onKeyDown(event) {
738
- if (this.disabled()) {
739
- return;
740
- }
741
- if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
742
- if (!this.isOpen()) {
743
- event.preventDefault();
744
- this.openDropdown();
745
- }
746
- }
747
- else if (event.key === 'Escape') {
748
- if (this.isOpen()) {
749
- event.preventDefault();
750
- this.closeDropdown();
751
- }
752
- }
753
- }
754
- findPathForValue(val, options) {
755
- // If value is array of path keys: ['na', 'usa', 'sf']
756
- if (Array.isArray(val)) {
757
- let currentLevel = options;
758
- const resolvedPath = [];
759
- for (const segment of val) {
760
- const match = currentLevel.find((o) => o.value === segment);
761
- if (!match) {
762
- return null;
763
- }
764
- resolvedPath.push(match);
765
- if (match.children) {
766
- currentLevel = match.children;
767
- }
768
- }
769
- return resolvedPath.length === val.length ? resolvedPath : null;
770
- }
771
- // If value is single leaf key: 'sf'
772
- const searchLeaf = (opts, path) => {
773
- for (const opt of opts) {
774
- const nextPath = [...path, opt];
775
- if (opt.value === val) {
776
- return nextPath;
777
- }
778
- if (opt.children && opt.children.length > 0) {
779
- const res = searchLeaf(opt.children, nextPath);
780
- if (res) {
781
- return res;
782
- }
783
- }
784
- }
785
- return null;
786
- };
787
- return searchLeaf(options, []);
788
- }
789
- ngAfterContentChecked() {
790
- this.checkAffixes();
791
- }
792
- checkAffixes() {
793
- const root = this.elementRef.nativeElement;
794
- const prefixEl = root.querySelector('.cascade-trigger > [talosPrefix], .cascade-trigger > [talosTextPrefix], .cascade-trigger > [talos-prefix], .cascade-trigger > [talos-text-prefix], .cascade-trigger > [talosLead], .cascade-trigger > [talosStart], .cascade-trigger > [prefix], .cascade-trigger > .talos-input-prefix');
795
- this.hasPrefix.set(!!prefixEl);
796
- const suffixEl = root.querySelector('.cascade-trigger > [talosSuffix], .cascade-trigger > [talosPostfix], .cascade-trigger > [talosTextSuffix], .cascade-trigger > [talosTextPostfix], .cascade-trigger > [talos-suffix], .cascade-trigger > [talos-postfix], .cascade-trigger > [talosTrail], .cascade-trigger > [talosEnd], .cascade-trigger > [suffix], .cascade-trigger > .talos-input-suffix');
797
- this.hasSuffix.set(!!suffixEl);
798
- if (prefixEl) {
799
- const prefixWidth = prefixEl.getBoundingClientRect().width;
800
- if (prefixWidth > 0) {
801
- root.style.setProperty('--talos-prefix-offset', `${Math.round(prefixWidth + 16)}px`);
802
- }
803
- }
804
- else {
805
- root.style.removeProperty('--talos-prefix-offset');
806
- }
807
- if (suffixEl) {
808
- const suffixWidth = suffixEl.getBoundingClientRect().width;
809
- if (suffixWidth > 0) {
810
- root.style.setProperty('--talos-suffix-offset', `${Math.round(suffixWidth + 16)}px`);
811
- }
812
- }
813
- else {
814
- root.style.removeProperty('--talos-suffix-offset');
815
- }
816
- }
817
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CascadeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
818
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: CascadeSelectComponent, isStandalone: true, selector: "talos-cascade-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, expandTrigger: { classPropertyName: "expandTrigger", publicName: "expandTrigger", isSignal: true, isRequired: false, transformFunction: null }, valueMode: { classPropertyName: "valueMode", publicName: "valueMode", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pathChange: "pathChange", selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { attributes: { "role": "combobox" }, listeners: { "document:click": "onDocumentClick($event)" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-disabled": "disabled()", "class.talos-cascade-select": "true", "class.is-open": "isOpen()", "class.is-disabled": "disabled()", "class.has-prefix": "hasPrefix()", "class.has-suffix": "hasSuffix()", "class.cascade-sm": "size() === \"sm\"", "class.cascade-md": "size() === \"md\"", "class.cascade-lg": "size() === \"lg\"" } }, providers: [
819
- {
820
- provide: NG_VALUE_ACCESSOR,
821
- useExisting: forwardRef(() => CascadeSelectComponent),
822
- multi: true
823
- }
824
- ], viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "triggerBoxEl", first: true, predicate: ["triggerBox"], descendants: true }], ngImport: i0, template: "@if (label() && !isFloatingMode()) {\n <label class=\"talos-field-label\" (click)=\"toggleDropdown()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n}\n\n<div class=\"cascade-select-wrapper\" [class.is-focused]=\"isOpen()\">\n <!-- Main Select Trigger Box -->\n <div\n #triggerBox\n class=\"cascade-trigger\"\n [class.is-empty]=\"!displayLabel()\"\n [class.is-disabled]=\"disabled()\"\n [class.has-error]=\"hasError()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeyDown($event)\">\n\n <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n <!-- Display Value or Placeholder -->\n <div class=\"trigger-content\">\n @if (displayLabel()) {\n <span class=\"display-text\">{{ displayLabel() }}</span>\n } @else if (!isFloatingMode() || isFloated()) {\n <span class=\"placeholder-text\">{{ placeholder() }}</span>\n }\n </div>\n\n <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n <!-- Actions (Clear & Chevron) -->\n <div class=\"trigger-actions\">\n @if (clearable() && displayLabel() && !disabled()) {\n <button\n type=\"button\"\n class=\"clear-button\"\n aria-label=\"Clear selection\"\n title=\"Clear selection\"\n (click)=\"onClear($event)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <span class=\"chevron-icon\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </span>\n </div>\n </div>\n\n @if (label() && isFloatingMode()) {\n <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleDropdown()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <!-- Cascading Dropdown Overlay -->\n @if (isOpen()) {\n <div class=\"cascade-dropdown-panel\" (click)=\"$event.stopPropagation()\">\n <!-- Typeahead Search Container -->\n @if (searchable()) {\n <div class=\"cascade-search-container\">\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input\n #searchInput\n type=\"text\"\n class=\"cascade-search-input search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeyDown($event)\"\n aria-label=\"Search cascade hierarchy\" />\n\n @if (searchTerm()) {\n <button type=\"button\" class=\"cascade-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n </div>\n }\n\n <!-- Search Results View -->\n @if (searchTerm()) {\n <div class=\"search-results-list\">\n @if (filteredSearchResults().length === 0) {\n <div class=\"empty-state\">No matching paths found</div>\n } @else {\n @for (match of filteredSearchResults(); track match.labelPath; let idx = $index) {\n <div\n class=\"search-result-item\"\n [class.is-highlighted]=\"idx === highlightedSearchIndex()\"\n [class.is-disabled]=\"match.disabled\"\n (click)=\"selectSearchResult(match)\">\n <span class=\"match-path\">{{ match.labelPath }}</span>\n </div>\n }\n }\n </div>\n } @else {\n <!-- Side-by-Side Multi-Column Cascade Drilldown -->\n <div class=\"cascade-columns-container\">\n @for (col of activeColumns(); track col.depth; let colIdx = $index) {\n <div class=\"cascade-column\" [attr.data-depth]=\"colIdx\">\n @if (col.options.length === 0) {\n <div class=\"empty-column-state\">No options</div>\n } @else {\n <div class=\"column-options-list\">\n @for (opt of col.options; track opt.value; let rowIdx = $index) {\n <div\n class=\"cascade-option-item\"\n [class.is-selected]=\"isOptionSelected(colIdx, opt)\"\n [class.is-active-branch]=\"isOptionActiveBranch(colIdx, opt)\"\n [class.is-disabled]=\"opt.disabled\"\n (mouseenter)=\"onOptionHover(colIdx, opt)\"\n (click)=\"onOptionClick(colIdx, opt)\">\n \n @if (opt.icon) {\n <span class=\"option-icon\">{{ opt.icon }}</span>\n }\n \n <span class=\"option-label\">{{ opt.label }}</span>\n \n @if (hasChildren(opt)) {\n <span class=\"option-arrow\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n </span>\n } @else if (isOptionSelected(colIdx, opt)) {\n <span class=\"option-check\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--cascade-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--cascade-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--cascade-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--cascade-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--cascade-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--cascade-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--cascade-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--cascade-radius: var(--talos-border-radius, .375rem);--cascade-height: var(--talos-control-height, 2.25rem);--cascade-padding-x: var(--talos-control-padding-x, .625rem);--cascade-font-size: var(--talos-control-font-size, .8125rem);--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem);--cascade-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--cascade-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--cascade-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04))}:host.cascade-sm{--cascade-height: 2rem;--cascade-padding-x: .5rem;--cascade-font-size: .8125rem;--cascade-radius: .25rem;--talos-affix-btn-size: var(--talos-affix-btn-size-sm, 1.375rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-sm, .8125rem)}:host.cascade-md{--cascade-height: 2.25rem;--cascade-padding-x: .625rem;--cascade-font-size: .8125rem;--cascade-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem)}:host.cascade-lg{--cascade-height: 2.625rem;--cascade-padding-x: .75rem;--cascade-font-size: .875rem;--cascade-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-lg, 1.75rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-lg, 1rem)}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .cascade-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label,.cascade-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star,.cascade-label .required-star{color:var(--talos-error-color, var(--talos-danger-color, #ef4444));margin-left:.25rem}.cascade-select-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label,.floating-label{position:absolute;left:var(--cascade-padding-x, .625rem);top:calc(var(--cascade-height, 2.25rem) / 2);transform:translateY(-50%);font-size:var(--cascade-font-size, .8125rem);font-weight:500;color:var(--cascade-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--cascade-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star,.floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated,.floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-open) .floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.cascade-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--cascade-height, 2.25rem);min-height:var(--cascade-height, 2.25rem);padding:0 var(--cascade-padding-x, .625rem);background-color:var(--cascade-bg, #ffffff);border:1px solid var(--cascade-border, #cbd5e1);border-radius:var(--cascade-radius, .375rem);font-size:var(--cascade-font-size, .8125rem);color:var(--cascade-color, #0f172a);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.cascade-trigger:hover:not(.is-disabled){border-color:var(--cascade-border-hover, #64748b)}.cascade-trigger:focus-visible:not(.is-disabled),:host(.is-open) .cascade-trigger,.is-focused .cascade-trigger{border-color:var(--cascade-border-focus, #2563eb);box-shadow:var(--cascade-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .15))}.cascade-trigger.is-disabled{opacity:.55;background-color:var(--talos-bg-muted, #f8fafc);cursor:not-allowed}.cascade-trigger.has-error{border-color:var(--talos-danger-color, #ef4444)}.cascade-trigger.has-error:focus-visible{box-shadow:0 0 0 3px #ef444426}.trigger-content{flex:1;min-width:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:.5rem}.trigger-content .display-text{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-content .placeholder-text{color:var(--cascade-placeholder-color, var(--talos-text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.trigger-actions .clear-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem);height:var(--talos-affix-btn-size, 1.5rem);min-width:var(--talos-affix-btn-size, 1.5rem);padding:0;background:transparent;border:none;outline:none;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));color:var(--talos-affix-btn-color, var(--talos-text-muted, #94a3b8));cursor:pointer;flex-shrink:0;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.trigger-actions .clear-button:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.trigger-actions .clear-button:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.trigger-actions .clear-button svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.trigger-actions .chevron-icon{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.trigger-actions .chevron-icon svg{width:.875rem;height:.875rem}.trigger-actions .chevron-icon.is-open{transform:rotate(180deg)}.cascade-dropdown-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:var(--talos-border-radius, .375rem);box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000000d;display:flex;flex-direction:column;min-width:100%;max-width:90vw;overflow:hidden;animation:panelFadeIn .15s ease-out}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.cascade-search-container{position:relative;display:flex;align-items:center;padding:.375rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);background-color:var(--talos-bg-subtle, #f8fafc)}.cascade-search-container .search-icon{position:absolute;left:.875rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none;z-index:2}.cascade-search-container .cascade-search-input{width:100%;height:2rem;padding:.25rem 1.875rem .25rem 2.125rem;font-size:.8125rem;font-family:inherit;color:var(--talos-text-color, #0f172a);background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .25rem);outline:none;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.cascade-search-container .cascade-search-input:focus{border-color:var(--talos-primary-color, #3b82f6);box-shadow:0 0 0 2px #3b82f626}.cascade-search-container .cascade-search-input::placeholder{color:var(--talos-placeholder-color, var(--talos-text-muted, #94a3b8))}.cascade-search-container .cascade-search-clear{position:absolute;right:.75rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;z-index:2}.cascade-search-container .cascade-search-clear:hover{color:var(--talos-text-color, #0f172a)}.cascade-search-container .cascade-search-clear svg{width:.75rem;height:.75rem}.search-results-list{max-height:16rem;overflow-y:auto;padding:.25rem}.search-results-list .empty-state{padding:1.25rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8)}.search-results-list .search-result-item{padding:.5rem .75rem;font-size:.8125rem;border-radius:.25rem;cursor:pointer;transition:background-color .12s ease,color .12s ease;color:var(--talos-text-color, #1e293b)}.search-results-list .search-result-item:hover:not(.is-disabled),.search-results-list .search-result-item.is-highlighted:not(.is-disabled){background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb)}.search-results-list .search-result-item.is-disabled{opacity:.5;cursor:not-allowed}.search-results-list .search-result-item .match-path{font-weight:500}.cascade-columns-container{display:flex;flex-direction:row;overflow-x:auto;min-height:12rem;max-height:18rem}.cascade-column{min-width:11rem;max-width:16rem;border-right:1px solid var(--talos-border-color, #f1f5f9);overflow-y:auto;padding:.25rem}.cascade-column:last-child{border-right:none}.cascade-column .empty-column-state{padding:1rem;text-align:center;font-size:.75rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item{display:flex;align-items:center;padding:.4375rem .625rem;border-radius:.25rem;font-size:.8125rem;color:var(--talos-text-color, #1e293b);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin-bottom:.125rem}.cascade-option-item:hover:not(.is-disabled){background-color:var(--talos-primary-light, #f1f5f9);color:var(--talos-text-color, #0f172a)}.cascade-option-item.is-active-branch,.cascade-option-item.is-selected{background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb);font-weight:600}.cascade-option-item.is-disabled{opacity:.45;cursor:not-allowed}.cascade-option-item .option-icon{margin-right:.375rem;font-size:.9375rem}.cascade-option-item .option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cascade-option-item .option-arrow{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item .option-arrow svg{width:.75rem;height:.75rem}.cascade-option-item .option-check{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-primary-color, #2563eb)}.cascade-option-item .option-check svg{width:.875rem;height:.875rem}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--cascade-padding-x, .75rem) + 1.625rem))!important}:host(.has-prefix.cascade-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.cascade-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.75rem)!important}::ng-deep .cascade-trigger>[talosPrefix],::ng-deep .cascade-trigger>[talosTextPrefix],::ng-deep .cascade-trigger>[talosLead],::ng-deep .cascade-trigger>[talosStart],::ng-deep .cascade-trigger>[prefix],::ng-deep .cascade-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosPrefix] button,::ng-deep .cascade-trigger>[talosPrefix] a,::ng-deep .cascade-trigger>[talosTextPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPrefix] button,::ng-deep .cascade-trigger>[talosTextPrefix] a,::ng-deep .cascade-trigger>[talosLead].affix-interactive,::ng-deep .cascade-trigger>[talosLead] button,::ng-deep .cascade-trigger>[talosLead] a,::ng-deep .cascade-trigger>[talosStart].affix-interactive,::ng-deep .cascade-trigger>[talosStart] button,::ng-deep .cascade-trigger>[talosStart] a,::ng-deep .cascade-trigger>[prefix].affix-interactive,::ng-deep .cascade-trigger>[prefix] button,::ng-deep .cascade-trigger>[prefix] a,::ng-deep .cascade-trigger>.talos-input-prefix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-prefix button,::ng-deep .cascade-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosPrefix]:hover,::ng-deep .cascade-trigger>[talosPrefix]:active,::ng-deep .cascade-trigger>[talosPrefix]:focus,::ng-deep .cascade-trigger>[talosPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPrefix]:hover,::ng-deep .cascade-trigger>[talosTextPrefix]:active,::ng-deep .cascade-trigger>[talosTextPrefix]:focus,::ng-deep .cascade-trigger>[talosTextPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosLead]:hover,::ng-deep .cascade-trigger>[talosLead]:active,::ng-deep .cascade-trigger>[talosLead]:focus,::ng-deep .cascade-trigger>[talosLead]:focus-visible,::ng-deep .cascade-trigger>[talosStart]:hover,::ng-deep .cascade-trigger>[talosStart]:active,::ng-deep .cascade-trigger>[talosStart]:focus,::ng-deep .cascade-trigger>[talosStart]:focus-visible,::ng-deep .cascade-trigger>[prefix]:hover,::ng-deep .cascade-trigger>[prefix]:active,::ng-deep .cascade-trigger>[prefix]:focus,::ng-deep .cascade-trigger>[prefix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-prefix:hover,::ng-deep .cascade-trigger>.talos-input-prefix:active,::ng-deep .cascade-trigger>.talos-input-prefix:focus,::ng-deep .cascade-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>[talosSuffix],::ng-deep .cascade-trigger>[talosPostfix],::ng-deep .cascade-trigger>[talosTextSuffix],::ng-deep .cascade-trigger>[talosTextPostfix],::ng-deep .cascade-trigger>[talosTrail],::ng-deep .cascade-trigger>[talosEnd],::ng-deep .cascade-trigger>[suffix],::ng-deep .cascade-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosSuffix] button,::ng-deep .cascade-trigger>[talosSuffix] a,::ng-deep .cascade-trigger>[talosPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosPostfix] button,::ng-deep .cascade-trigger>[talosPostfix] a,::ng-deep .cascade-trigger>[talosTextSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosTextSuffix] button,::ng-deep .cascade-trigger>[talosTextSuffix] a,::ng-deep .cascade-trigger>[talosTextPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPostfix] button,::ng-deep .cascade-trigger>[talosTextPostfix] a,::ng-deep .cascade-trigger>[talosTrail].affix-interactive,::ng-deep .cascade-trigger>[talosTrail] button,::ng-deep .cascade-trigger>[talosTrail] a,::ng-deep .cascade-trigger>[talosEnd].affix-interactive,::ng-deep .cascade-trigger>[talosEnd] button,::ng-deep .cascade-trigger>[talosEnd] a,::ng-deep .cascade-trigger>[suffix].affix-interactive,::ng-deep .cascade-trigger>[suffix] button,::ng-deep .cascade-trigger>[suffix] a,::ng-deep .cascade-trigger>.talos-input-suffix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-suffix button,::ng-deep .cascade-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosSuffix]:hover,::ng-deep .cascade-trigger>[talosSuffix]:active,::ng-deep .cascade-trigger>[talosSuffix]:focus,::ng-deep .cascade-trigger>[talosSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosPostfix]:hover,::ng-deep .cascade-trigger>[talosPostfix]:active,::ng-deep .cascade-trigger>[talosPostfix]:focus,::ng-deep .cascade-trigger>[talosPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTextSuffix]:hover,::ng-deep .cascade-trigger>[talosTextSuffix]:active,::ng-deep .cascade-trigger>[talosTextSuffix]:focus,::ng-deep .cascade-trigger>[talosTextSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPostfix]:hover,::ng-deep .cascade-trigger>[talosTextPostfix]:active,::ng-deep .cascade-trigger>[talosTextPostfix]:focus,::ng-deep .cascade-trigger>[talosTextPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTrail]:hover,::ng-deep .cascade-trigger>[talosTrail]:active,::ng-deep .cascade-trigger>[talosTrail]:focus,::ng-deep .cascade-trigger>[talosTrail]:focus-visible,::ng-deep .cascade-trigger>[talosEnd]:hover,::ng-deep .cascade-trigger>[talosEnd]:active,::ng-deep .cascade-trigger>[talosEnd]:focus,::ng-deep .cascade-trigger>[talosEnd]:focus-visible,::ng-deep .cascade-trigger>[suffix]:hover,::ng-deep .cascade-trigger>[suffix]:active,::ng-deep .cascade-trigger>[suffix]:focus,::ng-deep .cascade-trigger>[suffix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-suffix:hover,::ng-deep .cascade-trigger>.talos-input-suffix:active,::ng-deep .cascade-trigger>.talos-input-suffix:focus,::ng-deep .cascade-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element,::ng-deep .cascade-trigger>button[talosPrefix],::ng-deep .cascade-trigger>button[talosSuffix],::ng-deep .cascade-trigger>button[talosPostfix],::ng-deep .cascade-trigger>button[talosLead],::ng-deep .cascade-trigger>button[talosTrail],::ng-deep .cascade-trigger>button[talosStart],::ng-deep .cascade-trigger>button[talosEnd],::ng-deep .cascade-trigger>button[talosAffixButton],::ng-deep .cascade-trigger>button.talos-affix-btn,::ng-deep .cascade-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .cascade-trigger>button.talos-affix-element svg,::ng-deep .cascade-trigger>button.talos-affix-element i,::ng-deep .cascade-trigger>button.talos-affix-element [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-element .lucide,::ng-deep .cascade-trigger>button[talosPrefix] svg,::ng-deep .cascade-trigger>button[talosPrefix] i,::ng-deep .cascade-trigger>button[talosPrefix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPrefix] .lucide,::ng-deep .cascade-trigger>button[talosSuffix] svg,::ng-deep .cascade-trigger>button[talosSuffix] i,::ng-deep .cascade-trigger>button[talosSuffix] [lucideIcon],::ng-deep .cascade-trigger>button[talosSuffix] .lucide,::ng-deep .cascade-trigger>button[talosPostfix] svg,::ng-deep .cascade-trigger>button[talosPostfix] i,::ng-deep .cascade-trigger>button[talosPostfix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPostfix] .lucide,::ng-deep .cascade-trigger>button[talosLead] svg,::ng-deep .cascade-trigger>button[talosLead] i,::ng-deep .cascade-trigger>button[talosLead] [lucideIcon],::ng-deep .cascade-trigger>button[talosLead] .lucide,::ng-deep .cascade-trigger>button[talosTrail] svg,::ng-deep .cascade-trigger>button[talosTrail] i,::ng-deep .cascade-trigger>button[talosTrail] [lucideIcon],::ng-deep .cascade-trigger>button[talosTrail] .lucide,::ng-deep .cascade-trigger>button[talosStart] svg,::ng-deep .cascade-trigger>button[talosStart] i,::ng-deep .cascade-trigger>button[talosStart] [lucideIcon],::ng-deep .cascade-trigger>button[talosStart] .lucide,::ng-deep .cascade-trigger>button[talosEnd] svg,::ng-deep .cascade-trigger>button[talosEnd] i,::ng-deep .cascade-trigger>button[talosEnd] [lucideIcon],::ng-deep .cascade-trigger>button[talosEnd] .lucide,::ng-deep .cascade-trigger>button[talosAffixButton] svg,::ng-deep .cascade-trigger>button[talosAffixButton] i,::ng-deep .cascade-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .cascade-trigger>button[talosAffixButton] .lucide,::ng-deep .cascade-trigger>button.talos-affix-btn svg,::ng-deep .cascade-trigger>button.talos-affix-btn i,::ng-deep .cascade-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-btn .lucide,::ng-deep .cascade-trigger>.affix-interactive:is(button) svg,::ng-deep .cascade-trigger>.affix-interactive:is(button) i,::ng-deep .cascade-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .cascade-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .cascade-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .cascade-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] });
825
- }
826
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: CascadeSelectComponent, decorators: [{
827
- type: Component,
828
- args: [{ selector: 'talos-cascade-select', providers: [
829
- {
830
- provide: NG_VALUE_ACCESSOR,
831
- useExisting: forwardRef(() => CascadeSelectComponent),
832
- multi: true
833
- }
834
- ], host: {
835
- 'role': 'combobox',
836
- '[attr.aria-expanded]': 'isOpen()',
837
- '[attr.aria-disabled]': 'disabled()',
838
- '[class.talos-cascade-select]': 'true',
839
- '[class.is-open]': 'isOpen()',
840
- '[class.is-disabled]': 'disabled()',
841
- '[class.has-prefix]': 'hasPrefix()',
842
- '[class.has-suffix]': 'hasSuffix()',
843
- '[class.cascade-sm]': 'size() === "sm"',
844
- '[class.cascade-md]': 'size() === "md"',
845
- '[class.cascade-lg]': 'size() === "lg"',
846
- '(document:click)': 'onDocumentClick($event)'
847
- }, template: "@if (label() && !isFloatingMode()) {\n <label class=\"talos-field-label\" (click)=\"toggleDropdown()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n}\n\n<div class=\"cascade-select-wrapper\" [class.is-focused]=\"isOpen()\">\n <!-- Main Select Trigger Box -->\n <div\n #triggerBox\n class=\"cascade-trigger\"\n [class.is-empty]=\"!displayLabel()\"\n [class.is-disabled]=\"disabled()\"\n [class.has-error]=\"hasError()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n (click)=\"toggleDropdown()\"\n (keydown)=\"onKeyDown($event)\">\n\n <ng-content select=\"[prefix], [talosPrefix], [talosTextPrefix], [talosLead], [talosStart]\"></ng-content>\n\n <!-- Display Value or Placeholder -->\n <div class=\"trigger-content\">\n @if (displayLabel()) {\n <span class=\"display-text\">{{ displayLabel() }}</span>\n } @else if (!isFloatingMode() || isFloated()) {\n <span class=\"placeholder-text\">{{ placeholder() }}</span>\n }\n </div>\n\n <ng-content select=\"[suffix], [talosSuffix], [talosPostfix], [talosTextSuffix], [talosTextPostfix], [talosTrail], [talosEnd]\"></ng-content>\n\n <!-- Actions (Clear & Chevron) -->\n <div class=\"trigger-actions\">\n @if (clearable() && displayLabel() && !disabled()) {\n <button\n type=\"button\"\n class=\"clear-button\"\n aria-label=\"Clear selection\"\n title=\"Clear selection\"\n (click)=\"onClear($event)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <span class=\"chevron-icon\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"6 9 12 15 18 9\"></polyline>\n </svg>\n </span>\n </div>\n </div>\n\n @if (label() && isFloatingMode()) {\n <label class=\"talos-floating-label\" [class.is-floated]=\"isFloated()\" (click)=\"toggleDropdown()\">\n {{ label() }}\n @if (required()) {\n <span class=\"required-star\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n <!-- Cascading Dropdown Overlay -->\n @if (isOpen()) {\n <div class=\"cascade-dropdown-panel\" (click)=\"$event.stopPropagation()\">\n <!-- Typeahead Search Container -->\n @if (searchable()) {\n <div class=\"cascade-search-container\">\n <svg class=\"search-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input\n #searchInput\n type=\"text\"\n class=\"cascade-search-input search-input\"\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeyDown($event)\"\n aria-label=\"Search cascade hierarchy\" />\n\n @if (searchTerm()) {\n <button type=\"button\" class=\"cascade-search-clear\" aria-label=\"Clear search\" (click)=\"clearSearch()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n </div>\n }\n\n <!-- Search Results View -->\n @if (searchTerm()) {\n <div class=\"search-results-list\">\n @if (filteredSearchResults().length === 0) {\n <div class=\"empty-state\">No matching paths found</div>\n } @else {\n @for (match of filteredSearchResults(); track match.labelPath; let idx = $index) {\n <div\n class=\"search-result-item\"\n [class.is-highlighted]=\"idx === highlightedSearchIndex()\"\n [class.is-disabled]=\"match.disabled\"\n (click)=\"selectSearchResult(match)\">\n <span class=\"match-path\">{{ match.labelPath }}</span>\n </div>\n }\n }\n </div>\n } @else {\n <!-- Side-by-Side Multi-Column Cascade Drilldown -->\n <div class=\"cascade-columns-container\">\n @for (col of activeColumns(); track col.depth; let colIdx = $index) {\n <div class=\"cascade-column\" [attr.data-depth]=\"colIdx\">\n @if (col.options.length === 0) {\n <div class=\"empty-column-state\">No options</div>\n } @else {\n <div class=\"column-options-list\">\n @for (opt of col.options; track opt.value; let rowIdx = $index) {\n <div\n class=\"cascade-option-item\"\n [class.is-selected]=\"isOptionSelected(colIdx, opt)\"\n [class.is-active-branch]=\"isOptionActiveBranch(colIdx, opt)\"\n [class.is-disabled]=\"opt.disabled\"\n (mouseenter)=\"onOptionHover(colIdx, opt)\"\n (click)=\"onOptionClick(colIdx, opt)\">\n \n @if (opt.icon) {\n <span class=\"option-icon\">{{ opt.icon }}</span>\n }\n \n <span class=\"option-label\">{{ opt.label }}</span>\n \n @if (hasChildren(opt)) {\n <span class=\"option-arrow\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <polyline points=\"9 18 15 12 9 6\"></polyline>\n </svg>\n </span>\n } @else if (isOptionSelected(colIdx, opt)) {\n <span class=\"option-check\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n </span>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;position:relative;width:100%;box-sizing:border-box;font-family:inherit;--cascade-bg: var(--talos-input-bg, var(--talos-card-bg, #ffffff));--cascade-border: var(--talos-input-border, var(--talos-border-color, #cbd5e1));--cascade-border-hover: var(--talos-input-border-hover, var(--talos-border-hover, #64748b));--cascade-border-focus: var(--talos-input-border-focus, var(--talos-border-focus, #2563eb));--cascade-shadow-focus: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--cascade-color: var(--talos-input-color, var(--talos-text-color, #0f172a));--cascade-placeholder-color: var(--talos-input-placeholder-color, #94a3b8);--cascade-radius: var(--talos-border-radius, .375rem);--cascade-height: var(--talos-control-height, 2.25rem);--cascade-padding-x: var(--talos-control-padding-x, .625rem);--cascade-font-size: var(--talos-control-font-size, .8125rem);--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem);--cascade-dropdown-bg: var(--talos-dropdown-bg, var(--talos-card-bg, #ffffff));--cascade-dropdown-border: var(--talos-dropdown-border, var(--talos-border-color, #e2e8f0));--cascade-dropdown-shadow: var(--talos-dropdown-shadow, 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04))}:host.cascade-sm{--cascade-height: 2rem;--cascade-padding-x: .5rem;--cascade-font-size: .8125rem;--cascade-radius: .25rem;--talos-affix-btn-size: var(--talos-affix-btn-size-sm, 1.375rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-sm, .8125rem)}:host.cascade-md{--cascade-height: 2.25rem;--cascade-padding-x: .625rem;--cascade-font-size: .8125rem;--cascade-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-md, 1.5rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-md, .875rem)}:host.cascade-lg{--cascade-height: 2.625rem;--cascade-padding-x: .75rem;--cascade-font-size: .875rem;--cascade-radius: .375rem;--talos-affix-btn-size: var(--talos-affix-btn-size-lg, 1.75rem);--talos-affix-btn-icon-size: var(--talos-affix-btn-icon-size-lg, 1rem)}:host.is-disabled{opacity:.6;pointer-events:none}:host.is-disabled .cascade-trigger{background-color:var(--talos-input-disabled-bg, var(--talos-bg-color, #f8fafc));border-color:var(--talos-input-disabled-border, #e2e8f0);cursor:not-allowed}.talos-field-label,.cascade-label{display:inline-flex;align-items:center;font-size:var(--talos-control-font-size, .8125rem);font-weight:600;color:var(--talos-text-color, #0f172a);margin-bottom:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease}.talos-field-label .required-star,.cascade-label .required-star{color:var(--talos-error-color, var(--talos-danger-color, #ef4444));margin-left:.25rem}.cascade-select-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.talos-floating-label,.floating-label{position:absolute;left:var(--cascade-padding-x, .625rem);top:calc(var(--cascade-height, 2.25rem) / 2);transform:translateY(-50%);font-size:var(--cascade-font-size, .8125rem);font-weight:500;color:var(--cascade-placeholder-color, #94a3b8);pointer-events:none;-webkit-user-select:none;user-select:none;background-color:var(--cascade-bg, #ffffff);padding:0 .25rem;border-radius:.25rem;line-height:1;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),font-size .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1),top .18s cubic-bezier(.4,0,.2,1)}.talos-floating-label .required-star,.floating-label .required-star{color:var(--talos-error-color, #ef4444);margin-left:.25rem}.talos-floating-label.is-floated,.floating-label.is-floated{top:0;transform:translateY(-50%) scale(.85);font-size:.75rem;font-weight:600;color:var(--talos-text-muted, #64748b)}:host(.is-open) .talos-floating-label.is-floated,:host(.is-open) .floating-label.is-floated{color:var(--talos-primary-color, #2563eb)}.cascade-trigger{display:flex;align-items:center;justify-content:space-between;height:var(--cascade-height, 2.25rem);min-height:var(--cascade-height, 2.25rem);padding:0 var(--cascade-padding-x, .625rem);background-color:var(--cascade-bg, #ffffff);border:1px solid var(--cascade-border, #cbd5e1);border-radius:var(--cascade-radius, .375rem);font-size:var(--cascade-font-size, .8125rem);color:var(--cascade-color, #0f172a);line-height:1.25rem;cursor:pointer;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;-webkit-user-select:none;user-select:none;box-sizing:border-box}.cascade-trigger:hover:not(.is-disabled){border-color:var(--cascade-border-hover, #64748b)}.cascade-trigger:focus-visible:not(.is-disabled),:host(.is-open) .cascade-trigger,.is-focused .cascade-trigger{border-color:var(--cascade-border-focus, #2563eb);box-shadow:var(--cascade-shadow-focus, 0 0 0 3px rgba(37, 99, 235, .15))}.cascade-trigger.is-disabled{opacity:.55;background-color:var(--talos-bg-muted, #f8fafc);cursor:not-allowed}.cascade-trigger.has-error{border-color:var(--talos-danger-color, #ef4444)}.cascade-trigger.has-error:focus-visible{box-shadow:0 0 0 3px #ef444426}.trigger-content{flex:1;min-width:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:.5rem}.trigger-content .display-text{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-content .placeholder-text{color:var(--cascade-placeholder-color, var(--talos-text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trigger-actions{display:flex;align-items:center;gap:.25rem;margin-left:.375rem;flex-shrink:0}.trigger-actions .clear-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem);height:var(--talos-affix-btn-size, 1.5rem);min-width:var(--talos-affix-btn-size, 1.5rem);padding:0;background:transparent;border:none;outline:none;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));color:var(--talos-affix-btn-color, var(--talos-text-muted, #94a3b8));cursor:pointer;flex-shrink:0;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}.trigger-actions .clear-button:hover{color:var(--talos-error-color, #ef4444);background-color:#ef444426}.trigger-actions .clear-button:focus-visible{box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}.trigger-actions .clear-button svg{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem)}.trigger-actions .chevron-icon{display:flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;color:var(--talos-text-muted, #64748b);transition:transform .2s cubic-bezier(.4,0,.2,1)}.trigger-actions .chevron-icon svg{width:.875rem;height:.875rem}.trigger-actions .chevron-icon.is-open{transform:rotate(180deg)}.cascade-dropdown-panel{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #e2e8f0);border-radius:var(--talos-border-radius, .375rem);box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000000d;display:flex;flex-direction:column;min-width:100%;max-width:90vw;overflow:hidden;animation:panelFadeIn .15s ease-out}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.cascade-search-container{position:relative;display:flex;align-items:center;padding:.375rem;border-bottom:1px solid var(--talos-border-color, #f1f5f9);background-color:var(--talos-bg-subtle, #f8fafc)}.cascade-search-container .search-icon{position:absolute;left:.875rem;width:.875rem;height:.875rem;color:var(--talos-text-muted, #94a3b8);pointer-events:none;z-index:2}.cascade-search-container .cascade-search-input{width:100%;height:2rem;padding:.25rem 1.875rem .25rem 2.125rem;font-size:.8125rem;font-family:inherit;color:var(--talos-text-color, #0f172a);background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .25rem);outline:none;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}.cascade-search-container .cascade-search-input:focus{border-color:var(--talos-primary-color, #3b82f6);box-shadow:0 0 0 2px #3b82f626}.cascade-search-container .cascade-search-input::placeholder{color:var(--talos-placeholder-color, var(--talos-text-muted, #94a3b8))}.cascade-search-container .cascade-search-clear{position:absolute;right:.75rem;display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;padding:0;background:transparent;border:none;color:var(--talos-text-muted, #94a3b8);cursor:pointer;z-index:2}.cascade-search-container .cascade-search-clear:hover{color:var(--talos-text-color, #0f172a)}.cascade-search-container .cascade-search-clear svg{width:.75rem;height:.75rem}.search-results-list{max-height:16rem;overflow-y:auto;padding:.25rem}.search-results-list .empty-state{padding:1.25rem;text-align:center;font-size:.8125rem;color:var(--talos-text-muted, #94a3b8)}.search-results-list .search-result-item{padding:.5rem .75rem;font-size:.8125rem;border-radius:.25rem;cursor:pointer;transition:background-color .12s ease,color .12s ease;color:var(--talos-text-color, #1e293b)}.search-results-list .search-result-item:hover:not(.is-disabled),.search-results-list .search-result-item.is-highlighted:not(.is-disabled){background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb)}.search-results-list .search-result-item.is-disabled{opacity:.5;cursor:not-allowed}.search-results-list .search-result-item .match-path{font-weight:500}.cascade-columns-container{display:flex;flex-direction:row;overflow-x:auto;min-height:12rem;max-height:18rem}.cascade-column{min-width:11rem;max-width:16rem;border-right:1px solid var(--talos-border-color, #f1f5f9);overflow-y:auto;padding:.25rem}.cascade-column:last-child{border-right:none}.cascade-column .empty-column-state{padding:1rem;text-align:center;font-size:.75rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item{display:flex;align-items:center;padding:.4375rem .625rem;border-radius:.25rem;font-size:.8125rem;color:var(--talos-text-color, #1e293b);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .12s ease,color .12s ease;margin-bottom:.125rem}.cascade-option-item:hover:not(.is-disabled){background-color:var(--talos-primary-light, #f1f5f9);color:var(--talos-text-color, #0f172a)}.cascade-option-item.is-active-branch,.cascade-option-item.is-selected{background-color:var(--talos-primary-light, #eff6ff);color:var(--talos-primary-color, #2563eb);font-weight:600}.cascade-option-item.is-disabled{opacity:.45;cursor:not-allowed}.cascade-option-item .option-icon{margin-right:.375rem;font-size:.9375rem}.cascade-option-item .option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cascade-option-item .option-arrow{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-text-muted, #94a3b8)}.cascade-option-item .option-arrow svg{width:.75rem;height:.75rem}.cascade-option-item .option-check{display:flex;align-items:center;margin-left:.375rem;color:var(--talos-primary-color, #2563eb)}.cascade-option-item .option-check svg{width:.875rem;height:.875rem}:host(.has-prefix) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, calc(var(--cascade-padding-x, .75rem) + 1.625rem))!important}:host(.has-prefix.cascade-sm) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 1.875rem)!important}:host(.has-prefix.cascade-lg) .talos-floating-label:not(.is-floated){left:var(--talos-prefix-offset, 2.75rem)!important}::ng-deep .cascade-trigger>[talosPrefix],::ng-deep .cascade-trigger>[talosTextPrefix],::ng-deep .cascade-trigger>[talosLead],::ng-deep .cascade-trigger>[talosStart],::ng-deep .cascade-trigger>[prefix],::ng-deep .cascade-trigger>.talos-input-prefix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-right:.5rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosPrefix] button,::ng-deep .cascade-trigger>[talosPrefix] a,::ng-deep .cascade-trigger>[talosTextPrefix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPrefix] button,::ng-deep .cascade-trigger>[talosTextPrefix] a,::ng-deep .cascade-trigger>[talosLead].affix-interactive,::ng-deep .cascade-trigger>[talosLead] button,::ng-deep .cascade-trigger>[talosLead] a,::ng-deep .cascade-trigger>[talosStart].affix-interactive,::ng-deep .cascade-trigger>[talosStart] button,::ng-deep .cascade-trigger>[talosStart] a,::ng-deep .cascade-trigger>[prefix].affix-interactive,::ng-deep .cascade-trigger>[prefix] button,::ng-deep .cascade-trigger>[prefix] a,::ng-deep .cascade-trigger>.talos-input-prefix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-prefix button,::ng-deep .cascade-trigger>.talos-input-prefix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosPrefix]:hover,::ng-deep .cascade-trigger>[talosPrefix]:active,::ng-deep .cascade-trigger>[talosPrefix]:focus,::ng-deep .cascade-trigger>[talosPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPrefix]:hover,::ng-deep .cascade-trigger>[talosTextPrefix]:active,::ng-deep .cascade-trigger>[talosTextPrefix]:focus,::ng-deep .cascade-trigger>[talosTextPrefix]:focus-visible,::ng-deep .cascade-trigger>[talosLead]:hover,::ng-deep .cascade-trigger>[talosLead]:active,::ng-deep .cascade-trigger>[talosLead]:focus,::ng-deep .cascade-trigger>[talosLead]:focus-visible,::ng-deep .cascade-trigger>[talosStart]:hover,::ng-deep .cascade-trigger>[talosStart]:active,::ng-deep .cascade-trigger>[talosStart]:focus,::ng-deep .cascade-trigger>[talosStart]:focus-visible,::ng-deep .cascade-trigger>[prefix]:hover,::ng-deep .cascade-trigger>[prefix]:active,::ng-deep .cascade-trigger>[prefix]:focus,::ng-deep .cascade-trigger>[prefix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-prefix:hover,::ng-deep .cascade-trigger>.talos-input-prefix:active,::ng-deep .cascade-trigger>.talos-input-prefix:focus,::ng-deep .cascade-trigger>.talos-input-prefix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>[talosSuffix],::ng-deep .cascade-trigger>[talosPostfix],::ng-deep .cascade-trigger>[talosTextSuffix],::ng-deep .cascade-trigger>[talosTextPostfix],::ng-deep .cascade-trigger>[talosTrail],::ng-deep .cascade-trigger>[talosEnd],::ng-deep .cascade-trigger>[suffix],::ng-deep .cascade-trigger>.talos-input-suffix{position:static!important;transform:none!important;display:inline-flex;align-items:center;justify-content:center;color:var(--talos-text-muted, #64748b);margin-left:.375rem;font-size:var(--cascade-font-size, .8125rem);font-weight:500;line-height:1;flex-shrink:0;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}::ng-deep .cascade-trigger>[talosSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosSuffix] button,::ng-deep .cascade-trigger>[talosSuffix] a,::ng-deep .cascade-trigger>[talosPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosPostfix] button,::ng-deep .cascade-trigger>[talosPostfix] a,::ng-deep .cascade-trigger>[talosTextSuffix].affix-interactive,::ng-deep .cascade-trigger>[talosTextSuffix] button,::ng-deep .cascade-trigger>[talosTextSuffix] a,::ng-deep .cascade-trigger>[talosTextPostfix].affix-interactive,::ng-deep .cascade-trigger>[talosTextPostfix] button,::ng-deep .cascade-trigger>[talosTextPostfix] a,::ng-deep .cascade-trigger>[talosTrail].affix-interactive,::ng-deep .cascade-trigger>[talosTrail] button,::ng-deep .cascade-trigger>[talosTrail] a,::ng-deep .cascade-trigger>[talosEnd].affix-interactive,::ng-deep .cascade-trigger>[talosEnd] button,::ng-deep .cascade-trigger>[talosEnd] a,::ng-deep .cascade-trigger>[suffix].affix-interactive,::ng-deep .cascade-trigger>[suffix] button,::ng-deep .cascade-trigger>[suffix] a,::ng-deep .cascade-trigger>.talos-input-suffix.affix-interactive,::ng-deep .cascade-trigger>.talos-input-suffix button,::ng-deep .cascade-trigger>.talos-input-suffix a{pointer-events:auto}::ng-deep .cascade-trigger>[talosSuffix]:hover,::ng-deep .cascade-trigger>[talosSuffix]:active,::ng-deep .cascade-trigger>[talosSuffix]:focus,::ng-deep .cascade-trigger>[talosSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosPostfix]:hover,::ng-deep .cascade-trigger>[talosPostfix]:active,::ng-deep .cascade-trigger>[talosPostfix]:focus,::ng-deep .cascade-trigger>[talosPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTextSuffix]:hover,::ng-deep .cascade-trigger>[talosTextSuffix]:active,::ng-deep .cascade-trigger>[talosTextSuffix]:focus,::ng-deep .cascade-trigger>[talosTextSuffix]:focus-visible,::ng-deep .cascade-trigger>[talosTextPostfix]:hover,::ng-deep .cascade-trigger>[talosTextPostfix]:active,::ng-deep .cascade-trigger>[talosTextPostfix]:focus,::ng-deep .cascade-trigger>[talosTextPostfix]:focus-visible,::ng-deep .cascade-trigger>[talosTrail]:hover,::ng-deep .cascade-trigger>[talosTrail]:active,::ng-deep .cascade-trigger>[talosTrail]:focus,::ng-deep .cascade-trigger>[talosTrail]:focus-visible,::ng-deep .cascade-trigger>[talosEnd]:hover,::ng-deep .cascade-trigger>[talosEnd]:active,::ng-deep .cascade-trigger>[talosEnd]:focus,::ng-deep .cascade-trigger>[talosEnd]:focus-visible,::ng-deep .cascade-trigger>[suffix]:hover,::ng-deep .cascade-trigger>[suffix]:active,::ng-deep .cascade-trigger>[suffix]:focus,::ng-deep .cascade-trigger>[suffix]:focus-visible,::ng-deep .cascade-trigger>.talos-input-suffix:hover,::ng-deep .cascade-trigger>.talos-input-suffix:active,::ng-deep .cascade-trigger>.talos-input-suffix:focus,::ng-deep .cascade-trigger>.talos-input-suffix:focus-visible{transform:none!important;box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element,::ng-deep .cascade-trigger>button[talosPrefix],::ng-deep .cascade-trigger>button[talosSuffix],::ng-deep .cascade-trigger>button[talosPostfix],::ng-deep .cascade-trigger>button[talosLead],::ng-deep .cascade-trigger>button[talosTrail],::ng-deep .cascade-trigger>button[talosStart],::ng-deep .cascade-trigger>button[talosEnd],::ng-deep .cascade-trigger>button[talosAffixButton],::ng-deep .cascade-trigger>button.talos-affix-btn,::ng-deep .cascade-trigger>.affix-interactive:is(button){pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;width:var(--talos-affix-btn-size, 1.5rem)!important;height:var(--talos-affix-btn-size, 1.5rem)!important;min-width:var(--talos-affix-btn-size, 1.5rem)!important;padding:0!important;margin:0!important;border-radius:var(--talos-affix-btn-radius, var(--talos-radius-sm, .25rem));background:transparent;border:none;outline:none;color:var(--talos-affix-btn-color, var(--talos-text-muted, #64748b));transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}::ng-deep .cascade-trigger>button.talos-affix-element svg,::ng-deep .cascade-trigger>button.talos-affix-element i,::ng-deep .cascade-trigger>button.talos-affix-element [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-element .lucide,::ng-deep .cascade-trigger>button[talosPrefix] svg,::ng-deep .cascade-trigger>button[talosPrefix] i,::ng-deep .cascade-trigger>button[talosPrefix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPrefix] .lucide,::ng-deep .cascade-trigger>button[talosSuffix] svg,::ng-deep .cascade-trigger>button[talosSuffix] i,::ng-deep .cascade-trigger>button[talosSuffix] [lucideIcon],::ng-deep .cascade-trigger>button[talosSuffix] .lucide,::ng-deep .cascade-trigger>button[talosPostfix] svg,::ng-deep .cascade-trigger>button[talosPostfix] i,::ng-deep .cascade-trigger>button[talosPostfix] [lucideIcon],::ng-deep .cascade-trigger>button[talosPostfix] .lucide,::ng-deep .cascade-trigger>button[talosLead] svg,::ng-deep .cascade-trigger>button[talosLead] i,::ng-deep .cascade-trigger>button[talosLead] [lucideIcon],::ng-deep .cascade-trigger>button[talosLead] .lucide,::ng-deep .cascade-trigger>button[talosTrail] svg,::ng-deep .cascade-trigger>button[talosTrail] i,::ng-deep .cascade-trigger>button[talosTrail] [lucideIcon],::ng-deep .cascade-trigger>button[talosTrail] .lucide,::ng-deep .cascade-trigger>button[talosStart] svg,::ng-deep .cascade-trigger>button[talosStart] i,::ng-deep .cascade-trigger>button[talosStart] [lucideIcon],::ng-deep .cascade-trigger>button[talosStart] .lucide,::ng-deep .cascade-trigger>button[talosEnd] svg,::ng-deep .cascade-trigger>button[talosEnd] i,::ng-deep .cascade-trigger>button[talosEnd] [lucideIcon],::ng-deep .cascade-trigger>button[talosEnd] .lucide,::ng-deep .cascade-trigger>button[talosAffixButton] svg,::ng-deep .cascade-trigger>button[talosAffixButton] i,::ng-deep .cascade-trigger>button[talosAffixButton] [lucideIcon],::ng-deep .cascade-trigger>button[talosAffixButton] .lucide,::ng-deep .cascade-trigger>button.talos-affix-btn svg,::ng-deep .cascade-trigger>button.talos-affix-btn i,::ng-deep .cascade-trigger>button.talos-affix-btn [lucideIcon],::ng-deep .cascade-trigger>button.talos-affix-btn .lucide,::ng-deep .cascade-trigger>.affix-interactive:is(button) svg,::ng-deep .cascade-trigger>.affix-interactive:is(button) i,::ng-deep .cascade-trigger>.affix-interactive:is(button) [lucideIcon],::ng-deep .cascade-trigger>.affix-interactive:is(button) .lucide{width:var(--talos-affix-btn-icon-size, .875rem);height:var(--talos-affix-btn-icon-size, .875rem);flex-shrink:0}::ng-deep .cascade-trigger>button.talos-affix-element:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:hover:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):hover:not(:disabled):not(.is-disabled){color:var(--talos-affix-btn-hover-color, var(--talos-text-color, #0f172a));background-color:var(--talos-affix-btn-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));box-shadow:none}::ng-deep .cascade-trigger>button.talos-affix-element:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:active:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):active:not(:disabled):not(.is-disabled){background-color:var(--talos-affix-btn-active-bg, rgba(148, 163, 184, .25))}::ng-deep .cascade-trigger>button.talos-affix-element:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPrefix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosSuffix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosPostfix]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosLead]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosTrail]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosStart]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosEnd]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button[talosAffixButton]:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>button.talos-affix-btn:focus-visible:not(:disabled):not(.is-disabled),::ng-deep .cascade-trigger>.affix-interactive:is(button):focus-visible:not(:disabled):not(.is-disabled){outline:none;box-shadow:var(--talos-focus-ring, 0 0 0 2px rgba(37, 99, 235, .25))}\n"] }]
848
- }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], floating: [{ type: i0.Input, args: [{ isSignal: true, alias: "floating", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], valueMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueMode", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], pathChange: [{ type: i0.Output, args: ["pathChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searchInputEl: [{
849
- type: ViewChild,
850
- args: ['searchInput']
851
- }], triggerBoxEl: [{
852
- type: ViewChild,
853
- args: ['triggerBox']
854
- }] } });
855
-
856
- /**
857
- * Convenience NgModule wrapping the standalone select input, option, and cascade select components.
858
- *
859
- * Allows developers who prefer `SelectInputModule` to import it into standalone components
860
- * or legacy NgModule-based applications.
861
- */
862
- class SelectInputModule {
863
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
864
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule, imports: [SelectInputComponent,
865
- OptionComponent,
866
- OptionGroupComponent,
867
- CascadeSelectComponent], exports: [SelectInputComponent,
868
- OptionComponent,
869
- OptionGroupComponent,
870
- CascadeSelectComponent] });
871
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule });
872
- }
873
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SelectInputModule, decorators: [{
874
- type: NgModule,
875
- args: [{
876
- imports: [
877
- SelectInputComponent,
878
- OptionComponent,
879
- OptionGroupComponent,
880
- CascadeSelectComponent
881
- ],
882
- exports: [
883
- SelectInputComponent,
884
- OptionComponent,
885
- OptionGroupComponent,
886
- CascadeSelectComponent
887
- ]
888
- }]
889
- }] });
890
-
891
- /**
892
- * Generated bundle index. Do not edit.
893
- */
894
-
895
- export { CascadeSelectComponent, OptionComponent, OptionGroupComponent, SelectInputComponent, SelectInputModule };
896
- //# sourceMappingURL=weeehaoooz-talos-ui-form-select-input.mjs.map