@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,661 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { inject, ElementRef, input, computed, Directive, viewChild, output, signal, forwardRef, Component, NgModule } from '@angular/core';
3
- import { NG_VALUE_ACCESSOR } from '@angular/forms';
4
-
5
- class TalosRangeInputDirective {
6
- elementRef = inject(ElementRef);
7
- /** Size variant */
8
- size = input('md', /* @ts-ignore */
9
- ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
10
- /** Visual color variant */
11
- variant = input('primary', /* @ts-ignore */
12
- ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
13
- /** Error state */
14
- invalid = input(false, /* @ts-ignore */
15
- ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
16
- fillPercentStyle = computed(() => {
17
- const el = this.elementRef.nativeElement;
18
- const min = parseFloat(el.min) || 0;
19
- const max = parseFloat(el.max) || 100;
20
- const val = parseFloat(el.value) || min;
21
- const percent = max > min ? ((val - min) / (max - min)) * 100 : 0;
22
- return `${Math.max(0, Math.min(100, percent))}%`;
23
- }, /* @ts-ignore */
24
- ...(ngDevMode ? [{ debugName: "fillPercentStyle" }] : /* istanbul ignore next */ []));
25
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosRangeInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
26
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.1", type: TalosRangeInputDirective, isStandalone: true, selector: "input[type=\"range\"][talosRangeInput], input[type=\"range\"][talos-range-input]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.talos-range-input-sm": "size() === \"sm\"", "class.talos-range-input-md": "size() === \"md\"", "class.talos-range-input-lg": "size() === \"lg\"", "class.talos-range-input-primary": "variant() === \"primary\"", "class.talos-range-input-secondary": "variant() === \"secondary\"", "class.talos-range-input-success": "variant() === \"success\"", "class.talos-range-input-warning": "variant() === \"warning\"", "class.talos-range-input-danger": "variant() === \"danger\"", "class.talos-range-input-info": "variant() === \"info\"", "class.is-invalid": "invalid()", "style.--range-fill-percent": "fillPercentStyle()" }, classAttribute: "talos-range-native-input" }, ngImport: i0 });
27
- }
28
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosRangeInputDirective, decorators: [{
29
- type: Directive,
30
- args: [{
31
- selector: 'input[type="range"][talosRangeInput], input[type="range"][talos-range-input]',
32
- host: {
33
- 'class': 'talos-range-native-input',
34
- '[class.talos-range-input-sm]': 'size() === "sm"',
35
- '[class.talos-range-input-md]': 'size() === "md"',
36
- '[class.talos-range-input-lg]': 'size() === "lg"',
37
- '[class.talos-range-input-primary]': 'variant() === "primary"',
38
- '[class.talos-range-input-secondary]': 'variant() === "secondary"',
39
- '[class.talos-range-input-success]': 'variant() === "success"',
40
- '[class.talos-range-input-warning]': 'variant() === "warning"',
41
- '[class.talos-range-input-danger]': 'variant() === "danger"',
42
- '[class.talos-range-input-info]': 'variant() === "info"',
43
- '[class.is-invalid]': 'invalid()',
44
- '[style.--range-fill-percent]': 'fillPercentStyle()'
45
- }
46
- }]
47
- }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }] } });
48
-
49
- let rangeInputCounter = 0;
50
- class TalosRangeInputComponent {
51
- elementRef = inject(ElementRef);
52
- trackContainerRef = viewChild('sliderTrackContainer', /* @ts-ignore */
53
- ...(ngDevMode ? [{ debugName: "trackContainerRef" }] : /* istanbul ignore next */ []));
54
- thumb0Ref = viewChild('thumb0', /* @ts-ignore */
55
- ...(ngDevMode ? [{ debugName: "thumb0Ref" }] : /* istanbul ignore next */ []));
56
- thumb1Ref = viewChild('thumb1', /* @ts-ignore */
57
- ...(ngDevMode ? [{ debugName: "thumb1Ref" }] : /* istanbul ignore next */ []));
58
- /** Minimum allowed value */
59
- min = input(0, /* @ts-ignore */
60
- ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
61
- /** Maximum allowed value */
62
- max = input(100, /* @ts-ignore */
63
- ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
64
- /** Step increment for values */
65
- step = input(1, /* @ts-ignore */
66
- ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
67
- /** Step interval for tick marks / labels generation (e.g. 10, 20, 25) */
68
- interval = input(null, /* @ts-ignore */
69
- ...(ngDevMode ? [{ debugName: "interval" }] : /* istanbul ignore next */ []));
70
- /** Whether the slider operates in dual-thumb range mode */
71
- range = input(false, /* @ts-ignore */
72
- ...(ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []));
73
- /** Minimum distance between handles in dual mode */
74
- minRange = input(0, /* @ts-ignore */
75
- ...(ngDevMode ? [{ debugName: "minRange" }] : /* istanbul ignore next */ []));
76
- /** Maximum distance between handles in dual mode */
77
- maxRange = input(null, /* @ts-ignore */
78
- ...(ngDevMode ? [{ debugName: "maxRange" }] : /* istanbul ignore next */ []));
79
- /** Discrete tick marks with optional custom labels */
80
- marks = input(null, /* @ts-ignore */
81
- ...(ngDevMode ? [{ debugName: "marks" }] : /* istanbul ignore next */ []));
82
- /** Whether to show tick mark notches on the track */
83
- showTicks = input(false, /* @ts-ignore */
84
- ...(ngDevMode ? [{ debugName: "showTicks" }] : /* istanbul ignore next */ []));
85
- /** Whether to show interval/tick labels under the track */
86
- showIntervals = input(false, /* @ts-ignore */
87
- ...(ngDevMode ? [{ debugName: "showIntervals" }] : /* istanbul ignore next */ []));
88
- /** Alias for showIntervals */
89
- showLabels = input(false, /* @ts-ignore */
90
- ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
91
- /** Whether to snap slider thumb only to configured tick marks */
92
- snapToTicks = input(false, /* @ts-ignore */
93
- ...(ngDevMode ? [{ debugName: "snapToTicks" }] : /* istanbul ignore next */ []));
94
- /** Sizing variant */
95
- size = input('md', /* @ts-ignore */
96
- ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
97
- /** Visual color variant */
98
- variant = input('primary', /* @ts-ignore */
99
- ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
100
- /** Disabled state */
101
- disabled = input(false, /* @ts-ignore */
102
- ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
103
- /** Read-only state */
104
- readonly = input(false, /* @ts-ignore */
105
- ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
106
- /** Invalid error state */
107
- invalid = input(false, /* @ts-ignore */
108
- ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
109
- /** Top label text */
110
- label = input('', /* @ts-ignore */
111
- ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
112
- /** Floating label mode toggle */
113
- floatingLabel = input(false, /* @ts-ignore */
114
- ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
115
- floating = input(false, /* @ts-ignore */
116
- ...(ngDevMode ? [{ debugName: "floating" }] : /* istanbul ignore next */ []));
117
- /** Helper hint text */
118
- hint = input('', /* @ts-ignore */
119
- ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
120
- /** Whether to render synchronized number inputs */
121
- showInputs = input(false, /* @ts-ignore */
122
- ...(ngDevMode ? [{ debugName: "showInputs" }] : /* istanbul ignore next */ []));
123
- /** Whether to show top value badge when inputs are disabled */
124
- showValueBadge = input(true, /* @ts-ignore */
125
- ...(ngDevMode ? [{ debugName: "showValueBadge" }] : /* istanbul ignore next */ []));
126
- /** Tooltip display mode ('always' | 'hover' | 'drag' | 'none') */
127
- showTooltip = input('hover', /* @ts-ignore */
128
- ...(ngDevMode ? [{ debugName: "showTooltip" }] : /* istanbul ignore next */ []));
129
- /** Optional prefix string (e.g. '$') */
130
- prefix = input('', /* @ts-ignore */
131
- ...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
132
- /** Optional suffix string (e.g. '%', '°C') */
133
- suffix = input('', /* @ts-ignore */
134
- ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
135
- /** Custom value formatter function */
136
- formatter = input(null, /* @ts-ignore */
137
- ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
138
- /** Accessibility label for single slider */
139
- ariaLabel = input('Range slider', /* @ts-ignore */
140
- ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
141
- /** Accessibility label for start thumb in range mode */
142
- ariaLabelStart = input('Minimum range value', /* @ts-ignore */
143
- ...(ngDevMode ? [{ debugName: "ariaLabelStart" }] : /* istanbul ignore next */ []));
144
- /** Accessibility label for end thumb in range mode */
145
- ariaLabelEnd = input('Maximum range value', /* @ts-ignore */
146
- ...(ngDevMode ? [{ debugName: "ariaLabelEnd" }] : /* istanbul ignore next */ []));
147
- /** Element unique ID */
148
- id = input('', /* @ts-ignore */
149
- ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
150
- /** Standalone value input binding */
151
- value = input(null, /* @ts-ignore */
152
- ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
153
- /** Emitted when value changes */
154
- valueChange = output();
155
- /** Emitted during active dragging or keyboard movement */
156
- inputChange = output();
157
- /** Emitted on drag end, click release or input commit */
158
- change = output();
159
- // Internal reactive states
160
- defaultId = `talos-range-${++rangeInputCounter}`;
161
- elementId = computed(() => this.id() || this.defaultId, /* @ts-ignore */
162
- ...(ngDevMode ? [{ debugName: "elementId" }] : /* istanbul ignore next */ []));
163
- internalValue = signal(null, /* @ts-ignore */
164
- ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
165
- isCvaDisabled = signal(false, /* @ts-ignore */
166
- ...(ngDevMode ? [{ debugName: "isCvaDisabled" }] : /* istanbul ignore next */ []));
167
- isTouched = signal(false, /* @ts-ignore */
168
- ...(ngDevMode ? [{ debugName: "isTouched" }] : /* istanbul ignore next */ []));
169
- // Active interaction tracking
170
- focusedThumb = signal(null, /* @ts-ignore */
171
- ...(ngDevMode ? [{ debugName: "focusedThumb" }] : /* istanbul ignore next */ []));
172
- hoveredThumb = signal(null, /* @ts-ignore */
173
- ...(ngDevMode ? [{ debugName: "hoveredThumb" }] : /* istanbul ignore next */ []));
174
- draggingThumb = signal(null, /* @ts-ignore */
175
- ...(ngDevMode ? [{ debugName: "draggingThumb" }] : /* istanbul ignore next */ []));
176
- // Effective state computations
177
- isFloatingMode = computed(() => this.floatingLabel() || this.floating(), /* @ts-ignore */
178
- ...(ngDevMode ? [{ debugName: "isFloatingMode" }] : /* istanbul ignore next */ []));
179
- effectiveDisabled = computed(() => this.disabled() || this.isCvaDisabled(), /* @ts-ignore */
180
- ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
181
- effectiveInvalid = computed(() => this.invalid(), /* @ts-ignore */
182
- ...(ngDevMode ? [{ debugName: "effectiveInvalid" }] : /* istanbul ignore next */ []));
183
- /** Determines whether the component is in dual-handle range mode */
184
- isDualRange = computed(() => {
185
- if (this.range())
186
- return true;
187
- const v = this.internalValue() ?? this.value();
188
- return Array.isArray(v);
189
- }, /* @ts-ignore */
190
- ...(ngDevMode ? [{ debugName: "isDualRange" }] : /* istanbul ignore next */ []));
191
- /** Resolved start value (single value or lower bound of range) */
192
- startValue = computed(() => {
193
- const v = this.internalValue() ?? this.value();
194
- const min = this.min();
195
- const max = this.max();
196
- if (Array.isArray(v)) {
197
- const val = typeof v[0] === 'number' ? v[0] : min;
198
- return this.clamp(val, min, max);
199
- }
200
- const val = typeof v === 'number' ? v : min;
201
- return this.clamp(val, min, max);
202
- }, /* @ts-ignore */
203
- ...(ngDevMode ? [{ debugName: "startValue" }] : /* istanbul ignore next */ []));
204
- /** Resolved end value (upper bound of range mode) */
205
- endValue = computed(() => {
206
- const v = this.internalValue() ?? this.value();
207
- const min = this.min();
208
- const max = this.max();
209
- if (Array.isArray(v)) {
210
- const val = typeof v[1] === 'number' ? v[1] : max;
211
- return this.clamp(Math.max(this.startValue(), val), min, max);
212
- }
213
- return max;
214
- }, /* @ts-ignore */
215
- ...(ngDevMode ? [{ debugName: "endValue" }] : /* istanbul ignore next */ []));
216
- /** Overall span */
217
- span = computed(() => {
218
- const diff = this.max() - this.min();
219
- return diff > 0 ? diff : 1;
220
- }, /* @ts-ignore */
221
- ...(ngDevMode ? [{ debugName: "span" }] : /* istanbul ignore next */ []));
222
- /** Percentage position of thumb 0 */
223
- thumb0Percent = computed(() => {
224
- return this.valueToPercent(this.startValue());
225
- }, /* @ts-ignore */
226
- ...(ngDevMode ? [{ debugName: "thumb0Percent" }] : /* istanbul ignore next */ []));
227
- /** Percentage position of thumb 1 */
228
- thumb1Percent = computed(() => {
229
- return this.valueToPercent(this.endValue());
230
- }, /* @ts-ignore */
231
- ...(ngDevMode ? [{ debugName: "thumb1Percent" }] : /* istanbul ignore next */ []));
232
- /** Fill bar left percentage */
233
- fillLeftPercent = computed(() => {
234
- if (this.isDualRange()) {
235
- return this.thumb0Percent();
236
- }
237
- return 0;
238
- }, /* @ts-ignore */
239
- ...(ngDevMode ? [{ debugName: "fillLeftPercent" }] : /* istanbul ignore next */ []));
240
- /** Fill bar width percentage */
241
- fillWidthPercent = computed(() => {
242
- if (this.isDualRange()) {
243
- return Math.max(0, this.thumb1Percent() - this.thumb0Percent());
244
- }
245
- return this.thumb0Percent();
246
- }, /* @ts-ignore */
247
- ...(ngDevMode ? [{ debugName: "fillWidthPercent" }] : /* istanbul ignore next */ []));
248
- /** Computed list of tick marks */
249
- ticks = computed(() => {
250
- const min = this.min();
251
- const max = this.max();
252
- const customMarks = this.marks();
253
- const intervalVal = this.interval();
254
- const startVal = this.startValue();
255
- const endVal = this.isDualRange() ? this.endValue() : startVal;
256
- const isDual = this.isDualRange();
257
- if (customMarks && customMarks.length > 0) {
258
- return customMarks.map(m => {
259
- const val = typeof m === 'number' ? m : m.value;
260
- const label = typeof m === 'number' ? undefined : m.label;
261
- const tooltip = typeof m === 'number' ? undefined : m.tooltip;
262
- const percent = this.valueToPercent(val);
263
- const active = isDual
264
- ? val >= startVal && val <= endVal
265
- : val <= startVal;
266
- return { value: val, percent, label, tooltip, active };
267
- });
268
- }
269
- if (intervalVal && intervalVal > 0) {
270
- const list = [];
271
- for (let v = min; v <= max; v += intervalVal) {
272
- const percent = this.valueToPercent(v);
273
- const active = isDual
274
- ? v >= startVal && v <= endVal
275
- : v <= startVal;
276
- list.push({
277
- value: v,
278
- percent,
279
- label: this.formatDisplayValue(v),
280
- active
281
- });
282
- }
283
- // Ensure max is included if not strictly a multiple
284
- if ((max - min) % intervalVal !== 0) {
285
- list.push({
286
- value: max,
287
- percent: 100,
288
- label: this.formatDisplayValue(max),
289
- active: isDual ? endVal >= max : startVal >= max
290
- });
291
- }
292
- return list;
293
- }
294
- return [];
295
- }, /* @ts-ignore */
296
- ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
297
- /** Computed list of interval/tick labels */
298
- labels = computed(() => {
299
- const customMarks = this.marks();
300
- const ticksList = this.ticks();
301
- if (customMarks && customMarks.length > 0) {
302
- return ticksList.filter(t => t.label !== undefined);
303
- }
304
- return ticksList;
305
- }, /* @ts-ignore */
306
- ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
307
- isDragging = computed(() => this.draggingThumb() !== null, /* @ts-ignore */
308
- ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
309
- onChange = () => { };
310
- onTouched = () => { };
311
- // --- ControlValueAccessor Implementation ---
312
- writeValue(val) {
313
- if (val === null || val === undefined) {
314
- this.internalValue.set(this.range() ? [this.min(), this.max()] : this.min());
315
- }
316
- else {
317
- this.internalValue.set(val);
318
- }
319
- }
320
- registerOnChange(fn) {
321
- this.onChange = fn;
322
- }
323
- registerOnTouched(fn) {
324
- this.onTouched = fn;
325
- }
326
- setDisabledState(isDisabled) {
327
- this.isCvaDisabled.set(isDisabled);
328
- }
329
- // --- Value Helpers & Formatting ---
330
- clamp(value, min, max) {
331
- return Math.min(Math.max(value, min), max);
332
- }
333
- valueToPercent(value) {
334
- const min = this.min();
335
- const span = this.span();
336
- const percent = ((value - min) / span) * 100;
337
- return Math.max(0, Math.min(100, percent));
338
- }
339
- percentToValue(percent) {
340
- const min = this.min();
341
- const span = this.span();
342
- return min + (percent / 100) * span;
343
- }
344
- snapValue(value) {
345
- const min = this.min();
346
- const max = this.max();
347
- if (this.snapToTicks()) {
348
- const availableTicks = this.ticks();
349
- if (availableTicks.length > 0) {
350
- let closest = availableTicks[0].value;
351
- let minDiff = Math.abs(value - closest);
352
- for (const t of availableTicks) {
353
- const diff = Math.abs(value - t.value);
354
- if (diff < minDiff) {
355
- minDiff = diff;
356
- closest = t.value;
357
- }
358
- }
359
- return closest;
360
- }
361
- }
362
- const step = this.step();
363
- if (step <= 0)
364
- return this.clamp(value, min, max);
365
- const stepsCount = Math.round((value - min) / step);
366
- const steppedVal = min + stepsCount * step;
367
- // Handle floating-point rounding precision
368
- const stepDecimals = (step.toString().split('.')[1] || '').length;
369
- const roundedVal = parseFloat(steppedVal.toFixed(stepDecimals));
370
- return this.clamp(roundedVal, min, max);
371
- }
372
- formatDisplayValue(val) {
373
- const customFormatter = this.formatter();
374
- if (customFormatter) {
375
- return customFormatter(val);
376
- }
377
- const pre = this.prefix();
378
- const suf = this.suffix();
379
- return `${pre}${val.toLocaleString()}${suf}`;
380
- }
381
- isTooltipVisible(thumbIndex) {
382
- const mode = this.showTooltip();
383
- if (mode === 'none')
384
- return false;
385
- if (mode === 'always')
386
- return true;
387
- if (mode === 'drag')
388
- return this.draggingThumb() === thumbIndex;
389
- if (mode === 'hover') {
390
- return (this.hoveredThumb() === thumbIndex ||
391
- this.draggingThumb() === thumbIndex ||
392
- this.focusedThumb() === thumbIndex);
393
- }
394
- return false;
395
- }
396
- // --- Interaction & Event Handlers ---
397
- emitUpdate(newVal, source, isFinal = false) {
398
- this.internalValue.set(newVal);
399
- this.onChange(newVal);
400
- this.valueChange.emit(newVal);
401
- const event = { value: newVal, source };
402
- this.inputChange.emit(event);
403
- if (isFinal) {
404
- this.change.emit(event);
405
- this.markAsTouched();
406
- }
407
- }
408
- markAsTouched() {
409
- if (!this.isTouched()) {
410
- this.isTouched.set(true);
411
- this.onTouched();
412
- }
413
- }
414
- onThumbFocus(thumbIndex) {
415
- this.focusedThumb.set(thumbIndex);
416
- }
417
- onThumbBlur(thumbIndex) {
418
- if (this.focusedThumb() === thumbIndex) {
419
- this.focusedThumb.set(null);
420
- }
421
- this.markAsTouched();
422
- }
423
- onThumbMouseEnter(thumbIndex) {
424
- this.hoveredThumb.set(thumbIndex);
425
- }
426
- onThumbMouseLeave(thumbIndex) {
427
- if (this.hoveredThumb() === thumbIndex) {
428
- this.hoveredThumb.set(null);
429
- }
430
- }
431
- onThumbPointerDown(thumbIndex, event) {
432
- if (this.effectiveDisabled() || this.readonly())
433
- return;
434
- event.preventDefault();
435
- event.stopPropagation();
436
- this.draggingThumb.set(thumbIndex);
437
- this.focusedThumb.set(thumbIndex);
438
- const target = event.currentTarget;
439
- target.setPointerCapture(event.pointerId);
440
- const onPointerMove = (e) => {
441
- if (this.draggingThumb() !== thumbIndex)
442
- return;
443
- this.updateValueFromPointer(thumbIndex, e.clientX, 'drag', false);
444
- };
445
- const onPointerUp = (e) => {
446
- target.removeEventListener('pointermove', onPointerMove);
447
- target.removeEventListener('pointerup', onPointerUp);
448
- target.removeEventListener('pointercancel', onPointerUp);
449
- try {
450
- target.releasePointerCapture(e.pointerId);
451
- }
452
- catch { }
453
- if (this.draggingThumb() === thumbIndex) {
454
- this.updateValueFromPointer(thumbIndex, e.clientX, 'drag', true);
455
- this.draggingThumb.set(null);
456
- }
457
- };
458
- target.addEventListener('pointermove', onPointerMove);
459
- target.addEventListener('pointerup', onPointerUp);
460
- target.addEventListener('pointercancel', onPointerUp);
461
- }
462
- onTrackPointerDown(event) {
463
- if (this.effectiveDisabled() || this.readonly())
464
- return;
465
- const trackContainer = this.trackContainerRef()?.nativeElement;
466
- if (!trackContainer)
467
- return;
468
- const rect = trackContainer.getBoundingClientRect();
469
- const clickX = event.clientX;
470
- const clickRatio = (clickX - rect.left) / rect.width;
471
- const rawVal = this.percentToValue(clickRatio * 100);
472
- let chosenThumb = 0;
473
- if (this.isDualRange()) {
474
- const dist0 = Math.abs(rawVal - this.startValue());
475
- const dist1 = Math.abs(rawVal - this.endValue());
476
- chosenThumb = dist0 <= dist1 ? 0 : 1;
477
- }
478
- this.updateValueFromPointer(chosenThumb, clickX, 'track-click', true);
479
- // Focus chosen thumb
480
- if (chosenThumb === 0) {
481
- this.thumb0Ref()?.nativeElement.focus();
482
- }
483
- else {
484
- this.thumb1Ref()?.nativeElement.focus();
485
- }
486
- }
487
- updateValueFromPointer(thumbIndex, clientX, source, isFinal) {
488
- const trackContainer = this.trackContainerRef()?.nativeElement;
489
- if (!trackContainer)
490
- return;
491
- const rect = trackContainer.getBoundingClientRect();
492
- const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
493
- const rawVal = this.percentToValue(ratio * 100);
494
- const steppedVal = this.snapValue(rawVal);
495
- if (this.isDualRange()) {
496
- let start = this.startValue();
497
- let end = this.endValue();
498
- const minDistance = this.minRange();
499
- const maxDistance = this.maxRange();
500
- if (thumbIndex === 0) {
501
- start = Math.min(steppedVal, end - minDistance);
502
- if (maxDistance !== null && end - start > maxDistance) {
503
- start = end - maxDistance;
504
- }
505
- }
506
- else {
507
- end = Math.max(steppedVal, start + minDistance);
508
- if (maxDistance !== null && end - start > maxDistance) {
509
- end = start + maxDistance;
510
- }
511
- }
512
- this.emitUpdate([start, end], source, isFinal);
513
- }
514
- else {
515
- this.emitUpdate(steppedVal, source, isFinal);
516
- }
517
- }
518
- onThumbKeyDown(thumbIndex, event) {
519
- if (this.effectiveDisabled() || this.readonly())
520
- return;
521
- const step = this.step();
522
- const span = this.span();
523
- const largeStep = Math.max(step * 10, span / 10);
524
- let delta = 0;
525
- switch (event.key) {
526
- case 'ArrowRight':
527
- case 'ArrowUp':
528
- delta = step;
529
- break;
530
- case 'ArrowLeft':
531
- case 'ArrowDown':
532
- delta = -step;
533
- break;
534
- case 'PageUp':
535
- delta = largeStep;
536
- break;
537
- case 'PageDown':
538
- delta = -largeStep;
539
- break;
540
- case 'Home':
541
- delta = -(span + 1);
542
- break;
543
- case 'End':
544
- delta = span + 1;
545
- break;
546
- default:
547
- return;
548
- }
549
- event.preventDefault();
550
- if (this.isDualRange()) {
551
- let start = this.startValue();
552
- let end = this.endValue();
553
- const minDistance = this.minRange();
554
- if (thumbIndex === 0) {
555
- const nextVal = this.snapValue(start + delta);
556
- start = Math.min(nextVal, end - minDistance);
557
- }
558
- else {
559
- const nextVal = this.snapValue(end + delta);
560
- end = Math.max(nextVal, start + minDistance);
561
- }
562
- this.emitUpdate([start, end], 'keyboard', true);
563
- }
564
- else {
565
- const nextVal = this.snapValue(this.startValue() + delta);
566
- this.emitUpdate(nextVal, 'keyboard', true);
567
- }
568
- }
569
- onNumberInputChange(thumbIndex, event) {
570
- const inputEl = event.target;
571
- const parsed = parseFloat(inputEl.value);
572
- if (isNaN(parsed))
573
- return;
574
- const steppedVal = this.snapValue(parsed);
575
- if (this.isDualRange()) {
576
- let start = this.startValue();
577
- let end = this.endValue();
578
- const minDistance = this.minRange();
579
- if (thumbIndex === 0) {
580
- start = Math.min(steppedVal, end - minDistance);
581
- }
582
- else {
583
- end = Math.max(steppedVal, start + minDistance);
584
- }
585
- inputEl.value = (thumbIndex === 0 ? start : end).toString();
586
- this.emitUpdate([start, end], 'input', true);
587
- }
588
- else {
589
- inputEl.value = steppedVal.toString();
590
- this.emitUpdate(steppedVal, 'input', true);
591
- }
592
- }
593
- onTickClick(tick, event) {
594
- if (this.effectiveDisabled() || this.readonly())
595
- return;
596
- event.stopPropagation();
597
- const targetVal = tick.value;
598
- if (this.isDualRange()) {
599
- const dist0 = Math.abs(targetVal - this.startValue());
600
- const dist1 = Math.abs(targetVal - this.endValue());
601
- let start = this.startValue();
602
- let end = this.endValue();
603
- if (dist0 <= dist1) {
604
- start = Math.min(targetVal, end - this.minRange());
605
- }
606
- else {
607
- end = Math.max(targetVal, start + this.minRange());
608
- }
609
- this.emitUpdate([start, end], 'track-click', true);
610
- }
611
- else {
612
- this.emitUpdate(targetVal, 'track-click', true);
613
- }
614
- }
615
- onLabelClick(tick, event) {
616
- this.onTickClick(tick, event);
617
- }
618
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosRangeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
619
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosRangeInputComponent, isStandalone: true, selector: "talos-range-input, talos-range-slider, talos-slider", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, interval: { classPropertyName: "interval", publicName: "interval", isSignal: true, isRequired: false, transformFunction: null }, range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null }, minRange: { classPropertyName: "minRange", publicName: "minRange", isSignal: true, isRequired: false, transformFunction: null }, maxRange: { classPropertyName: "maxRange", publicName: "maxRange", isSignal: true, isRequired: false, transformFunction: null }, marks: { classPropertyName: "marks", publicName: "marks", isSignal: true, isRequired: false, transformFunction: null }, showTicks: { classPropertyName: "showTicks", publicName: "showTicks", isSignal: true, isRequired: false, transformFunction: null }, showIntervals: { classPropertyName: "showIntervals", publicName: "showIntervals", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, snapToTicks: { classPropertyName: "snapToTicks", publicName: "snapToTicks", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, showInputs: { classPropertyName: "showInputs", publicName: "showInputs", isSignal: true, isRequired: false, transformFunction: null }, showValueBadge: { classPropertyName: "showValueBadge", publicName: "showValueBadge", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelStart: { classPropertyName: "ariaLabelStart", publicName: "ariaLabelStart", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelEnd: { classPropertyName: "ariaLabelEnd", publicName: "ariaLabelEnd", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", inputChange: "inputChange", change: "change" }, host: { properties: { "class.talos-range-disabled": "effectiveDisabled()", "class.talos-range-invalid": "effectiveInvalid()", "class.is-floating": "isFloatingMode()" }, classAttribute: "talos-range-input-host" }, providers: [
620
- {
621
- provide: NG_VALUE_ACCESSOR,
622
- useExisting: forwardRef(() => TalosRangeInputComponent),
623
- multi: true
624
- }
625
- ], viewQueries: [{ propertyName: "trackContainerRef", first: true, predicate: ["sliderTrackContainer"], descendants: true, isSignal: true }, { propertyName: "thumb0Ref", first: true, predicate: ["thumb0"], descendants: true, isSignal: true }, { propertyName: "thumb1Ref", first: true, predicate: ["thumb1"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"talos-range-wrapper\" [class.is-disabled]=\"effectiveDisabled()\" [class.is-readonly]=\"readonly()\"\n [class.is-invalid]=\"effectiveInvalid()\" [class.is-range]=\"isDualRange()\" [class.size-sm]=\"size() === 'sm'\"\n [class.size-md]=\"size() === 'md'\" [class.size-lg]=\"size() === 'lg'\" [class.variant-primary]=\"variant() === 'primary'\"\n [class.variant-secondary]=\"variant() === 'secondary'\" [class.variant-success]=\"variant() === 'success'\"\n [class.variant-warning]=\"variant() === 'warning'\" [class.variant-danger]=\"variant() === 'danger'\"\n [class.variant-info]=\"variant() === 'info'\">\n <!-- Header: Label, Hint & Optional Value Display / Synchronized Number Inputs -->\n @if (label() || hint() || showValueBadge() || showInputs()) {\n <div class=\"talos-range-header\">\n <div class=\"talos-range-label-group\" [class.is-floating-label]=\"isFloatingMode()\">\n @if (label()) {\n <label class=\"talos-range-label\" [class.is-floated]=\"isFloatingMode()\" [attr.for]=\"elementId() + '-thumb-0'\">\n {{ label() }}\n </label>\n }\n @if (hint()) {\n <span class=\"talos-range-hint\">{{ hint() }}</span>\n }\n </div>\n\n @if (showInputs()) {\n <div class=\"talos-range-inputs-group\">\n @if (isDualRange()) {\n <div class=\"talos-range-number-box\">\n @if (prefix()) {\n <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n }\n <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-0'\" [min]=\"min()\"\n [max]=\"endValue()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n @if (suffix()) {\n <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n }\n </div>\n <span class=\"talos-range-inputs-separator\">\u2013</span>\n <div class=\"talos-range-number-box\">\n @if (prefix()) {\n <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n }\n <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-1'\" [min]=\"startValue()\"\n [max]=\"max()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"endValue()\"\n (change)=\"onNumberInputChange(1, $event)\" (keydown.enter)=\"onNumberInputChange(1, $event)\" />\n @if (suffix()) {\n <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n }\n </div>\n } @else {\n <div class=\"talos-range-number-box\">\n @if (prefix()) {\n <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n }\n <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num'\" [min]=\"min()\" [max]=\"max()\"\n [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n @if (suffix()) {\n <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n }\n </div>\n }\n </div>\n } @else if (showValueBadge()) {\n <div class=\"talos-range-value-badge\">\n @if (isDualRange()) {\n <span>{{ formatDisplayValue(startValue()) }} \u2013 {{ formatDisplayValue(endValue()) }}</span>\n } @else {\n <span>{{ formatDisplayValue(startValue()) }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Range Slider Container (Track, Fills, Ticks, Thumbs) -->\n <div #sliderTrackContainer class=\"talos-range-slider\" [class.is-active]=\"isDragging()\"\n (pointerdown)=\"onTrackPointerDown($event)\">\n <!-- Background Track -->\n <div class=\"talos-range-track\">\n <!-- Active Filled Range Segment -->\n <div class=\"talos-range-fill\" [style.left.%]=\"fillLeftPercent()\" [style.width.%]=\"fillWidthPercent()\"></div>\n\n <!-- Tick Marks -->\n @if (ticks().length > 0 && (showTicks() || marks())) {\n <div class=\"talos-range-ticks\">\n @for (tick of ticks(); track tick.value) {\n <div class=\"talos-range-tick\" [class.is-active]=\"tick.active\" [style.left.%]=\"tick.percent\"\n (click)=\"onTickClick(tick, $event)\"></div>\n }\n </div>\n }\n </div>\n\n <!-- Thumb 0 (Primary or Lower Bound Handle) -->\n <div #thumb0 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 0\"\n [class.is-dragging]=\"draggingThumb() === 0\" [class.is-tooltip-visible]=\"isTooltipVisible(0)\"\n [style.left.%]=\"thumb0Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-0'\"\n [attr.aria-label]=\"isDualRange() ? ariaLabelStart() : ariaLabel()\" [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"isDualRange() ? endValue() : max()\" [attr.aria-valuenow]=\"startValue()\"\n [attr.aria-valuetext]=\"formatDisplayValue(startValue())\"\n [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(0, $event)\"\n (keydown)=\"onThumbKeyDown(0, $event)\" (focus)=\"onThumbFocus(0)\" (blur)=\"onThumbBlur(0)\"\n (mouseenter)=\"onThumbMouseEnter(0)\" (mouseleave)=\"onThumbMouseLeave(0)\">\n <!-- Floating Value Tooltip -->\n @if (showTooltip() !== 'none') {\n <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(0)\">\n {{ formatDisplayValue(startValue()) }}\n </div>\n }\n </div>\n\n <!-- Thumb 1 (Upper Bound Handle for Dual Range) -->\n @if (isDualRange()) {\n <div #thumb1 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 1\"\n [class.is-dragging]=\"draggingThumb() === 1\" [class.is-tooltip-visible]=\"isTooltipVisible(1)\"\n [style.left.%]=\"thumb1Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-1'\"\n [attr.aria-label]=\"ariaLabelEnd()\" [attr.aria-valuemin]=\"startValue()\" [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"endValue()\" [attr.aria-valuetext]=\"formatDisplayValue(endValue())\"\n [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(1, $event)\"\n (keydown)=\"onThumbKeyDown(1, $event)\" (focus)=\"onThumbFocus(1)\" (blur)=\"onThumbBlur(1)\"\n (mouseenter)=\"onThumbMouseEnter(1)\" (mouseleave)=\"onThumbMouseLeave(1)\">\n <!-- Floating Value Tooltip -->\n @if (showTooltip() !== 'none') {\n <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(1)\">\n {{ formatDisplayValue(endValue()) }}\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Interval / Step Labels under track -->\n @if (labels().length > 0 && (showIntervals() || showLabels() || marks())) {\n <div class=\"talos-range-labels\">\n @for (item of labels(); track item.value) {\n <span class=\"talos-range-label-item\" [class.is-active]=\"item.active\" [style.left.%]=\"item.percent\"\n (click)=\"onLabelClick(item, $event)\">\n {{ item.label }}\n </span>\n }\n </div>\n }\n</div>", styles: [":root{--talos-font-sans: \"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--talos-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--talos-font-display: var(--talos-font-sans);--talos-radius-none: 0px;--talos-radius-xs: .125rem;--talos-radius-sm: .25rem;--talos-radius-md: .375rem;--talos-radius-lg: .5rem;--talos-radius-xl: .75rem;--talos-radius-2xl: 1rem;--talos-radius-full: 9999px;--talos-height-xs: 1.625rem;--talos-height-sm: 2rem;--talos-height-md: 2.25rem;--talos-height-lg: 2.625rem;--talos-font-size-2xs: .6875rem;--talos-font-size-xs: .75rem;--talos-font-size-sm: .8125rem;--talos-font-size-base: .875rem;--talos-font-size-md: .875rem;--talos-font-size-lg: 1rem;--talos-font-size-xl: 1.125rem;--talos-font-size-2xl: 1.25rem;--talos-font-size-3xl: 1.5rem;--talos-font-size-4xl: 1.875rem;--talos-font-size-5xl: 2.25rem;--talos-font-weight-light: 300;--talos-font-weight-regular: 400;--talos-font-weight-medium: 500;--talos-font-weight-semibold: 600;--talos-font-weight-bold: 700;--talos-font-weight-extrabold: 800;--talos-line-height-none: 1;--talos-line-height-tight: 1.25;--talos-line-height-snug: 1.375;--talos-line-height-normal: 1.5;--talos-line-height-relaxed: 1.625;--talos-line-height-loose: 2;--talos-control-padding-x: .625rem;--talos-control-font-size: var(--talos-font-size-sm);--talos-control-height: var(--talos-height-md);--talos-border-radius: var(--talos-radius-md);--talos-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--talos-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .05);--talos-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04);--talos-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);--talos-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);--talos-shadow-dialog: var(--talos-shadow-xl);--talos-shadow-dropdown: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04);--talos-transition: .18s cubic-bezier(.4, 0, .2, 1);--talos-transition-slow: .28s cubic-bezier(.4, 0, .2, 1);--talos-bg-canvas: #f8fafc;--talos-bg-surface: #ffffff;--talos-bg-subtle: #f1f5f9;--talos-bg-overlay: rgba(15, 23, 42, .5);--talos-border-subtle: #f1f5f9;--talos-border-default: #cbd5e1;--talos-border-hover: #94a3b8;--talos-border-focus: #2563eb;--talos-focus-ring: 0 0 0 3px rgba(37, 99, 235, .18);--talos-text-primary: #0f172a;--talos-text-secondary: #334155;--talos-text-muted: #64748b;--talos-text-inverse: #ffffff;--talos-bg-color: var(--talos-bg-canvas);--talos-card-bg: var(--talos-bg-surface);--talos-card-bg-subtle: var(--talos-bg-subtle);--talos-border-color: var(--talos-border-default);--talos-text-color: var(--talos-text-primary);--talos-error-color: #ef4444;--talos-warning-color: #d97706;--talos-success-color: #16a34a;--bg-color: var(--talos-bg-canvas);--bg-subtle: var(--talos-bg-subtle);--card-bg: var(--talos-bg-surface);--card-bg-subtle: var(--talos-bg-subtle);--border-color: var(--talos-border-default);--border-hover: var(--talos-border-hover);--border-focus: var(--talos-border-focus);--text-color: var(--talos-text-primary);--text-muted: var(--talos-text-muted);--primary-color: var(--talos-primary);--primary-hover: var(--talos-primary-hover);--primary-active: var(--talos-primary-active);--primary-light: var(--talos-primary-subtle-bg);--primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-primary: #2563eb;--talos-primary-hover: #1d4ed8;--talos-primary-active: #1e40af;--talos-primary-subtle-bg: #eff6ff;--talos-primary-subtle-bg-hover: #dbeafe;--talos-primary-subtle-border: #bfdbfe;--talos-primary-text: #1e40af;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-primary-color: var(--talos-primary);--talos-primary-light: var(--talos-primary-subtle-bg);--talos-primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-neutral: #475569;--talos-neutral-hover: #334155;--talos-neutral-active: #1e293b;--talos-neutral-subtle-bg: #f8fafc;--talos-neutral-subtle-bg-hover: #f1f5f9;--talos-neutral-subtle-border: #e2e8f0;--talos-neutral-text: #334155;--talos-neutral-solid-bg: #475569;--talos-neutral-solid-text: #ffffff;--talos-success: #16a34a;--talos-success-hover: #15803d;--talos-success-active: #166534;--talos-success-subtle-bg: #f0fdf4;--talos-success-subtle-bg-hover: #dcfce7;--talos-success-subtle-border: #bbf7d0;--talos-success-text: #166534;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #d97706;--talos-warning-hover: #b45309;--talos-warning-active: #92400e;--talos-warning-subtle-bg: #fffbeb;--talos-warning-subtle-bg-hover: #fef3c7;--talos-warning-subtle-border: #fde68a;--talos-warning-text: #92400e;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #dc2626;--talos-danger-active: #b91c1c;--talos-danger-subtle-bg: #fef2f2;--talos-danger-subtle-bg-hover: #fee2e2;--talos-danger-subtle-border: #fecaca;--talos-danger-text: #991b1b;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0284c7;--talos-info-hover: #0369a1;--talos-info-active: #075985;--talos-info-subtle-bg: #f0f9ff;--talos-info-subtle-bg-hover: #e0f2fe;--talos-info-subtle-border: #bae6fd;--talos-info-text: #0369a1;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #7c3aed;--talos-purple-hover: #6d28d9;--talos-purple-active: #5b21b6;--talos-purple-subtle-bg: #f5f3ff;--talos-purple-subtle-bg-hover: #ede9fe;--talos-purple-subtle-border: #ddd6fe;--talos-purple-text: #6d28d9;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-input-bg: var(--talos-bg-surface);--talos-input-border: var(--talos-border-default);--talos-input-border-hover: var(--talos-border-hover);--talos-input-border-focus: var(--talos-border-focus);--talos-input-color: var(--talos-text-primary);--talos-input-placeholder-color: var(--talos-text-muted);--talos-input-disabled-bg: var(--talos-bg-subtle);--talos-input-disabled-border: var(--talos-border-default);--talos-input-disabled-color: var(--talos-text-muted);--talos-input-radius: var(--talos-radius-md);--talos-input-height: var(--talos-height-md);--talos-affix-btn-size-sm: 1.375rem;--talos-affix-btn-size-md: 1.5rem;--talos-affix-btn-size-lg: 1.75rem;--talos-affix-btn-radius: var(--talos-radius-sm, .25rem);--talos-affix-btn-icon-size-sm: .8125rem;--talos-affix-btn-icon-size-md: .875rem;--talos-affix-btn-icon-size-lg: 1rem;--talos-affix-btn-color: var(--talos-text-muted, #64748b);--talos-affix-btn-hover-color: var(--talos-text-color, #0f172a);--talos-affix-btn-hover-bg: var(--talos-btn-ghost-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));--talos-affix-btn-active-bg: var(--talos-btn-ghost-active-bg, rgba(148, 163, 184, .25));--talos-sidebar-width: 260px;--talos-sidebar-collapsed-width: 68px;--talos-nav-bg: var(--talos-bg-surface);--talos-nav-border-color: var(--talos-border-subtle);--talos-active-nav-bg: var(--talos-primary-subtle-bg);--talos-active-nav-text: var(--talos-primary);--talos-nav-hover-bg: var(--talos-bg-subtle);--talos-nav-hover-text: var(--talos-text-primary);--talos-avatar-bg: var(--talos-primary-subtle-bg);--talos-avatar-text: var(--talos-primary-text);--talos-badge-bg: var(--talos-primary-subtle-bg);--talos-badge-text: var(--talos-primary-text);--talos-header-bg: var(--talos-bg-surface);--talos-header-border-color: var(--talos-border-subtle);--talos-right-panel-bg: var(--talos-bg-surface);--talos-right-panel-border: var(--talos-border-subtle);--talos-loading-overlay-bg: rgba(255, 255, 255, .75);--talos-dropdown-bg: var(--talos-bg-surface);--talos-dropdown-border: var(--talos-border-default);--talos-dropdown-shadow: var(--talos-shadow-dropdown);--talos-dropdown-hover-bg: var(--talos-bg-subtle);--talos-dropdown-selected-bg: var(--talos-primary-subtle-bg);--talos-btn-font-family: inherit;--talos-btn-border-radius: var(--talos-radius-md);--talos-btn-font-weight: 600;--talos-btn-transition: background-color var(--talos-transition), border-color var(--talos-transition), color var(--talos-transition), box-shadow var(--talos-transition), opacity var(--talos-transition);--talos-btn-ripple-color: rgba(255, 255, 255, .35);--talos-btn-primary-bg: var(--talos-primary-solid-bg);--talos-btn-primary-hover: var(--talos-primary-hover);--talos-btn-primary-active: var(--talos-primary-active);--talos-btn-primary-text: var(--talos-primary-solid-text);--talos-btn-secondary-bg: var(--talos-neutral-solid-bg);--talos-btn-secondary-hover: var(--talos-neutral-hover);--talos-btn-secondary-active: var(--talos-neutral-active);--talos-btn-secondary-text: var(--talos-neutral-solid-text);--talos-btn-outline-bg: transparent;--talos-btn-outline-border: var(--talos-border-default);--talos-btn-outline-hover-bg: var(--talos-bg-subtle);--talos-btn-outline-hover-border: var(--talos-border-hover);--talos-btn-outline-text: var(--talos-text-secondary);--talos-btn-ghost-bg: transparent;--talos-btn-ghost-text: var(--talos-text-muted);--talos-btn-ghost-hover-bg: var(--talos-bg-subtle);--talos-btn-ghost-hover-text: var(--talos-text-primary);--talos-btn-ghost-active-bg: var(--talos-neutral-subtle-bg-hover);--talos-btn-danger-bg: var(--talos-danger-solid-bg);--talos-btn-danger-hover: var(--talos-danger-hover);--talos-btn-danger-active: var(--talos-danger-active);--talos-btn-danger-text: var(--talos-danger-solid-text);--talos-btn-success-bg: var(--talos-success-solid-bg);--talos-btn-success-hover: var(--talos-success-hover);--talos-btn-success-active: var(--talos-success-active);--talos-btn-success-text: var(--talos-success-solid-text);--talos-btn-height-xs: var(--talos-height-xs, 1.625rem);--talos-btn-height-sm: var(--talos-height-sm);--talos-btn-height-md: var(--talos-height-md);--talos-btn-height-lg: var(--talos-height-lg);--talos-btn-padding-x-xs: .5rem;--talos-btn-padding-x-sm: .625rem;--talos-btn-padding-x-md: .875rem;--talos-btn-padding-x-lg: 1.125rem;--talos-btn-font-size-xs: var(--talos-font-size-2xs, .6875rem);--talos-btn-font-size-sm: var(--talos-font-size-xs);--talos-btn-font-size-md: var(--talos-font-size-sm);--talos-btn-font-size-lg: var(--talos-font-size-md);--talos-category-bar-gap: 2px;--talos-category-bar-track-bg: var(--talos-bg-subtle);--talos-category-bar-border-radius: var(--talos-radius-md);--talos-category-bar-height-xs: .25rem;--talos-category-bar-height-sm: .375rem;--talos-category-bar-height-md: .5rem;--talos-category-bar-height-lg: .75rem;--talos-category-bar-marker-ring: var(--talos-bg-surface);--talos-range-track-bg: var(--talos-border-default);--talos-range-track-fill: var(--talos-primary);--talos-range-track-disabled-bg: var(--talos-border-subtle);--talos-range-track-disabled-fill: var(--talos-text-muted);--talos-range-track-height-sm: .25rem;--talos-range-track-height-md: .375rem;--talos-range-track-height-lg: .5rem;--talos-range-thumb-size-sm: 1rem;--talos-range-thumb-size-md: 1.25rem;--talos-range-thumb-size-lg: 1.5rem;--talos-range-thumb-bg: var(--talos-bg-surface);--talos-range-thumb-border: var(--talos-primary);--talos-range-thumb-shadow: var(--talos-shadow-sm);--talos-range-thumb-hover-shadow: 0 0 0 4px rgba(37, 99, 235, .15);--talos-range-thumb-active-shadow: 0 0 0 6px rgba(37, 99, 235, .25);--talos-range-tick-color: var(--talos-text-muted);--talos-range-tick-active-color: #ffffff;--talos-range-tick-label-color: var(--talos-text-muted);--talos-range-tooltip-bg: #0f172a;--talos-range-tooltip-text: #ffffff;--talos-toggle-track-bg: var(--talos-border-default);--talos-toggle-track-bg-hover: var(--talos-border-hover);--talos-toggle-thumb-bg: var(--talos-bg-surface);--talos-snackbar-bg: var(--talos-bg-surface);--talos-snackbar-text: var(--talos-text-primary);--talos-snackbar-border: var(--talos-border-default);--talos-snackbar-border-radius: var(--talos-radius-lg);--talos-dialog-bg: var(--talos-bg-surface);--talos-dialog-border: var(--talos-border-default);--talos-dialog-radius: var(--talos-radius-xl);--talos-dialog-shadow: var(--talos-shadow-dialog);--talos-dialog-backdrop-bg: var(--talos-bg-overlay);--talos-dialog-backdrop-blur-bg: rgba(15, 23, 42, .35);--talos-dialog-title-color: var(--talos-text-primary);--talos-dialog-subtitle-color: var(--talos-text-muted);--talos-tooltip-bg: #0f172a;--talos-tooltip-text: #ffffff;--talos-dropzone-bg: var(--talos-bg-surface);--talos-dropzone-hover-bg: var(--talos-bg-subtle);--talos-dropzone-drag-bg: var(--talos-primary-subtle-bg);--talos-dropzone-border: var(--talos-border-default);--talos-dropzone-hover-border: var(--talos-border-hover);--talos-dropzone-drag-border: var(--talos-primary);--talos-dropzone-radius: var(--talos-radius-lg);--talos-dropzone-text: var(--talos-text-primary);--talos-dropzone-subtext: var(--talos-text-muted);--talos-dropzone-icon-color: var(--talos-primary);--talos-dropzone-file-bg: var(--talos-bg-surface);--talos-dropzone-file-border: var(--talos-border-default);--talos-rating-fill-warning: var(--talos-warning);--talos-rating-fill-primary: var(--talos-primary);--talos-rating-fill-danger: var(--talos-danger);--talos-rating-fill-success: var(--talos-success);--talos-rating-fill-purple: var(--talos-purple);--talos-rating-unfilled: var(--talos-border-default);--talos-rating-size-sm: 1.125rem;--talos-rating-size-md: 1.375rem;--talos-rating-size-lg: 1.75rem;--talos-rating-size-xl: 2.25rem}:root[data-theme=dark],:root.dark,[data-theme=dark],[data-mode=dark],.dark,.dark-theme{--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-shadow-dropdown: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);--talos-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1);--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-neutral-solid-bg: #334155;--talos-neutral-solid-text: #f8fafc;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc;--talos-loading-overlay-bg: rgba(9, 13, 22, .8);--talos-range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, .5)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not(.light){--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc}}:host{display:block;width:100%;box-sizing:border-box}.talos-range-wrapper{display:flex;flex-direction:column;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;font-family:inherit;--range-accent: var(--talos-range-track-fill, var(--talos-primary-color));--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--range-track-h: var(--talos-range-track-height-md, .375rem);--range-thumb-d: var(--talos-range-thumb-size-md, 1.25rem);--range-thumb-border-width: 2px;--range-tick-w: 2px;--range-tick-h: 8px;--range-font-size: var(--talos-control-font-size, .8125rem)}.talos-range-wrapper.size-sm{--range-track-h: var(--talos-range-track-height-sm, .25rem);--range-thumb-d: var(--talos-range-thumb-size-sm, 1rem);--range-font-size: .75rem;--range-tick-h: 6px}.talos-range-wrapper.size-lg{--range-track-h: var(--talos-range-track-height-lg, .5rem);--range-thumb-d: var(--talos-range-thumb-size-lg, 1.5rem);--range-font-size: .875rem;--range-tick-h: 10px}.talos-range-wrapper.variant-primary{--range-accent: var(--talos-primary-color, #2563eb);--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: 0 0 0 3px rgba(37, 99, 235, .2)}.talos-range-wrapper.variant-secondary{--range-accent: #475569;--range-accent-hover: #334155;--range-focus-glow: 0 0 0 3px rgba(71, 85, 105, .2)}.talos-range-wrapper.variant-success{--range-accent: #16a34a;--range-accent-hover: #15803d;--range-focus-glow: 0 0 0 3px rgba(22, 163, 74, .2)}.talos-range-wrapper.variant-warning{--range-accent: #d97706;--range-accent-hover: #b45309;--range-focus-glow: 0 0 0 3px rgba(217, 119, 6, .2)}.talos-range-wrapper.variant-danger{--range-accent: var(--talos-error-color, #ef4444);--range-accent-hover: #dc2626;--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .2)}.talos-range-wrapper.variant-info{--range-accent: #0284c7;--range-accent-hover: #0369a1;--range-focus-glow: 0 0 0 3px rgba(2, 132, 199, .2)}.talos-range-wrapper.is-invalid{--range-accent: var(--talos-error-color, #ef4444);--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .25)}.talos-range-wrapper.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.talos-range-wrapper.is-disabled .talos-range-thumb{cursor:not-allowed;border-color:var(--talos-range-track-disabled-fill, #94a3b8);background-color:var(--talos-range-track-disabled-bg, #cbd5e1);box-shadow:none}.talos-range-wrapper.is-disabled .talos-range-fill{background-color:var(--talos-range-track-disabled-fill, #94a3b8)}.talos-range-wrapper.is-readonly .talos-range-slider,.talos-range-wrapper.is-readonly .talos-range-thumb{cursor:default}.talos-range-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}.talos-range-label-group{display:flex;flex-direction:column;gap:.125rem}.talos-range-label{font-size:var(--range-font-size);font-weight:600;color:var(--talos-text-color, #0f172a)}.talos-range-hint{font-size:.75rem;color:var(--talos-text-muted, #64748b)}.talos-range-value-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:var(--talos-border-radius, .375rem);background-color:var(--talos-primary-light, #eff6ff);color:var(--range-accent)}.talos-range-inputs-group{display:flex;align-items:center;gap:.375rem}.talos-range-inputs-separator{color:var(--talos-text-muted, #64748b);font-weight:500}.talos-range-number-box{display:inline-flex;align-items:center;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .375rem);padding:0 .375rem;height:1.875rem;transition:border-color .15s ease,box-shadow .15s ease}.talos-range-number-box:focus-within{border-color:var(--range-accent);box-shadow:var(--range-focus-glow)}.talos-range-input-affix{font-size:.75rem;color:var(--talos-text-muted, #64748b);-webkit-user-select:none;user-select:none}.talos-range-number-input{width:3.5rem;border:none;background:transparent;padding:.125rem .25rem;font-size:.8125rem;font-weight:500;color:var(--talos-text-color, #0f172a);text-align:right;outline:none;font-family:inherit}.talos-range-number-input::-webkit-inner-spin-button,.talos-range-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.talos-range-number-input{-moz-appearance:textfield}.talos-range-slider{position:relative;width:100%;height:calc(var(--range-thumb-d) + .5rem);display:flex;align-items:center;cursor:pointer;touch-action:none;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-slider.is-active{cursor:grabbing}.talos-range-track{position:relative;width:100%;height:var(--range-track-h);background-color:var(--talos-range-track-bg, #e2e8f0);border-radius:9999px;overflow:visible}.talos-range-fill{position:absolute;top:0;bottom:0;background-color:var(--range-accent);border-radius:9999px;transition:background-color .18s ease;pointer-events:none}.talos-range-ticks{position:absolute;inset:0;pointer-events:none}.talos-range-tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-tick-w);height:var(--range-tick-h);background-color:var(--talos-range-tick-color, #94a3b8);border-radius:1px;pointer-events:auto;cursor:pointer;transition:transform .15s ease,background-color .15s ease}.talos-range-tick.is-active{background-color:var(--talos-range-tick-active-color, #ffffff);box-shadow:0 0 2px #0000004d}.talos-range-tick:hover{transform:translate(-50%,-50%) scale(1.4)}.talos-range-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-thumb-d);height:var(--range-thumb-d);background-color:var(--talos-range-thumb-bg, #ffffff);border:var(--range-thumb-border-width) solid var(--range-accent);border-radius:50%;box-shadow:var(--talos-range-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08));cursor:grab;outline:none;box-sizing:border-box;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s cubic-bezier(.4,0,.2,1),border-color .12s cubic-bezier(.4,0,.2,1);z-index:2}.talos-range-thumb:hover{box-shadow:var(--talos-range-thumb-hover-shadow, 0 0 0 4px rgba(37, 99, 235, .15));transform:translate(-50%,-50%) scale(1.08)}.talos-range-thumb.is-focused,.talos-range-thumb:focus-visible{box-shadow:var(--range-focus-glow);transform:translate(-50%,-50%) scale(1.12);z-index:3}.talos-range-thumb.is-dragging{cursor:grabbing;box-shadow:var(--talos-range-thumb-active-shadow, 0 0 0 6px rgba(37, 99, 235, .25));transform:translate(-50%,-50%) scale(1.16);z-index:4}.talos-range-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);background-color:var(--talos-range-tooltip-bg, #1e293b);color:var(--talos-range-tooltip-text, #ffffff);font-size:.6875rem;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;z-index:10}.talos-range-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:4px;border-style:solid;border-color:var(--talos-range-tooltip-bg, #1e293b) transparent transparent transparent}.talos-range-tooltip.visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.talos-range-labels{position:relative;width:100%;margin-top:.25rem;height:1.125rem;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-label-item{position:absolute;top:0;transform:translate(-50%);font-size:.6875rem;color:var(--talos-range-tick-label-color, var(--talos-text-muted, #64748b));white-space:nowrap;cursor:pointer;transition:color .15s ease,font-weight .15s ease}.talos-range-label-item.is-active{color:var(--range-accent);font-weight:600}.talos-range-label-item:hover{color:var(--talos-text-color, #0f172a)}\n"] });
626
- }
627
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosRangeInputComponent, decorators: [{
628
- type: Component,
629
- args: [{ selector: 'talos-range-input, talos-range-slider, talos-slider', providers: [
630
- {
631
- provide: NG_VALUE_ACCESSOR,
632
- useExisting: forwardRef(() => TalosRangeInputComponent),
633
- multi: true
634
- }
635
- ], host: {
636
- 'class': 'talos-range-input-host',
637
- '[class.talos-range-disabled]': 'effectiveDisabled()',
638
- '[class.talos-range-invalid]': 'effectiveInvalid()',
639
- '[class.is-floating]': 'isFloatingMode()'
640
- }, template: "<div class=\"talos-range-wrapper\" [class.is-disabled]=\"effectiveDisabled()\" [class.is-readonly]=\"readonly()\"\n [class.is-invalid]=\"effectiveInvalid()\" [class.is-range]=\"isDualRange()\" [class.size-sm]=\"size() === 'sm'\"\n [class.size-md]=\"size() === 'md'\" [class.size-lg]=\"size() === 'lg'\" [class.variant-primary]=\"variant() === 'primary'\"\n [class.variant-secondary]=\"variant() === 'secondary'\" [class.variant-success]=\"variant() === 'success'\"\n [class.variant-warning]=\"variant() === 'warning'\" [class.variant-danger]=\"variant() === 'danger'\"\n [class.variant-info]=\"variant() === 'info'\">\n <!-- Header: Label, Hint & Optional Value Display / Synchronized Number Inputs -->\n @if (label() || hint() || showValueBadge() || showInputs()) {\n <div class=\"talos-range-header\">\n <div class=\"talos-range-label-group\" [class.is-floating-label]=\"isFloatingMode()\">\n @if (label()) {\n <label class=\"talos-range-label\" [class.is-floated]=\"isFloatingMode()\" [attr.for]=\"elementId() + '-thumb-0'\">\n {{ label() }}\n </label>\n }\n @if (hint()) {\n <span class=\"talos-range-hint\">{{ hint() }}</span>\n }\n </div>\n\n @if (showInputs()) {\n <div class=\"talos-range-inputs-group\">\n @if (isDualRange()) {\n <div class=\"talos-range-number-box\">\n @if (prefix()) {\n <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n }\n <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-0'\" [min]=\"min()\"\n [max]=\"endValue()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n @if (suffix()) {\n <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n }\n </div>\n <span class=\"talos-range-inputs-separator\">\u2013</span>\n <div class=\"talos-range-number-box\">\n @if (prefix()) {\n <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n }\n <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num-1'\" [min]=\"startValue()\"\n [max]=\"max()\" [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"endValue()\"\n (change)=\"onNumberInputChange(1, $event)\" (keydown.enter)=\"onNumberInputChange(1, $event)\" />\n @if (suffix()) {\n <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n }\n </div>\n } @else {\n <div class=\"talos-range-number-box\">\n @if (prefix()) {\n <span class=\"talos-range-input-affix\">{{ prefix() }}</span>\n }\n <input type=\"number\" class=\"talos-range-number-input\" [id]=\"elementId() + '-num'\" [min]=\"min()\" [max]=\"max()\"\n [step]=\"step()\" [disabled]=\"effectiveDisabled() || readonly()\" [value]=\"startValue()\"\n (change)=\"onNumberInputChange(0, $event)\" (keydown.enter)=\"onNumberInputChange(0, $event)\" />\n @if (suffix()) {\n <span class=\"talos-range-input-affix\">{{ suffix() }}</span>\n }\n </div>\n }\n </div>\n } @else if (showValueBadge()) {\n <div class=\"talos-range-value-badge\">\n @if (isDualRange()) {\n <span>{{ formatDisplayValue(startValue()) }} \u2013 {{ formatDisplayValue(endValue()) }}</span>\n } @else {\n <span>{{ formatDisplayValue(startValue()) }}</span>\n }\n </div>\n }\n </div>\n }\n\n <!-- Range Slider Container (Track, Fills, Ticks, Thumbs) -->\n <div #sliderTrackContainer class=\"talos-range-slider\" [class.is-active]=\"isDragging()\"\n (pointerdown)=\"onTrackPointerDown($event)\">\n <!-- Background Track -->\n <div class=\"talos-range-track\">\n <!-- Active Filled Range Segment -->\n <div class=\"talos-range-fill\" [style.left.%]=\"fillLeftPercent()\" [style.width.%]=\"fillWidthPercent()\"></div>\n\n <!-- Tick Marks -->\n @if (ticks().length > 0 && (showTicks() || marks())) {\n <div class=\"talos-range-ticks\">\n @for (tick of ticks(); track tick.value) {\n <div class=\"talos-range-tick\" [class.is-active]=\"tick.active\" [style.left.%]=\"tick.percent\"\n (click)=\"onTickClick(tick, $event)\"></div>\n }\n </div>\n }\n </div>\n\n <!-- Thumb 0 (Primary or Lower Bound Handle) -->\n <div #thumb0 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 0\"\n [class.is-dragging]=\"draggingThumb() === 0\" [class.is-tooltip-visible]=\"isTooltipVisible(0)\"\n [style.left.%]=\"thumb0Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-0'\"\n [attr.aria-label]=\"isDualRange() ? ariaLabelStart() : ariaLabel()\" [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"isDualRange() ? endValue() : max()\" [attr.aria-valuenow]=\"startValue()\"\n [attr.aria-valuetext]=\"formatDisplayValue(startValue())\"\n [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(0, $event)\"\n (keydown)=\"onThumbKeyDown(0, $event)\" (focus)=\"onThumbFocus(0)\" (blur)=\"onThumbBlur(0)\"\n (mouseenter)=\"onThumbMouseEnter(0)\" (mouseleave)=\"onThumbMouseLeave(0)\">\n <!-- Floating Value Tooltip -->\n @if (showTooltip() !== 'none') {\n <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(0)\">\n {{ formatDisplayValue(startValue()) }}\n </div>\n }\n </div>\n\n <!-- Thumb 1 (Upper Bound Handle for Dual Range) -->\n @if (isDualRange()) {\n <div #thumb1 class=\"talos-range-thumb\" [class.is-focused]=\"focusedThumb() === 1\"\n [class.is-dragging]=\"draggingThumb() === 1\" [class.is-tooltip-visible]=\"isTooltipVisible(1)\"\n [style.left.%]=\"thumb1Percent()\" tabindex=\"0\" role=\"slider\" [attr.id]=\"elementId() + '-thumb-1'\"\n [attr.aria-label]=\"ariaLabelEnd()\" [attr.aria-valuemin]=\"startValue()\" [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"endValue()\" [attr.aria-valuetext]=\"formatDisplayValue(endValue())\"\n [attr.aria-disabled]=\"effectiveDisabled() ? 'true' : null\" (pointerdown)=\"onThumbPointerDown(1, $event)\"\n (keydown)=\"onThumbKeyDown(1, $event)\" (focus)=\"onThumbFocus(1)\" (blur)=\"onThumbBlur(1)\"\n (mouseenter)=\"onThumbMouseEnter(1)\" (mouseleave)=\"onThumbMouseLeave(1)\">\n <!-- Floating Value Tooltip -->\n @if (showTooltip() !== 'none') {\n <div class=\"talos-range-tooltip\" [class.visible]=\"isTooltipVisible(1)\">\n {{ formatDisplayValue(endValue()) }}\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Interval / Step Labels under track -->\n @if (labels().length > 0 && (showIntervals() || showLabels() || marks())) {\n <div class=\"talos-range-labels\">\n @for (item of labels(); track item.value) {\n <span class=\"talos-range-label-item\" [class.is-active]=\"item.active\" [style.left.%]=\"item.percent\"\n (click)=\"onLabelClick(item, $event)\">\n {{ item.label }}\n </span>\n }\n </div>\n }\n</div>", styles: [":root{--talos-font-sans: \"Inter\", system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;--talos-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--talos-font-display: var(--talos-font-sans);--talos-radius-none: 0px;--talos-radius-xs: .125rem;--talos-radius-sm: .25rem;--talos-radius-md: .375rem;--talos-radius-lg: .5rem;--talos-radius-xl: .75rem;--talos-radius-2xl: 1rem;--talos-radius-full: 9999px;--talos-height-xs: 1.625rem;--talos-height-sm: 2rem;--talos-height-md: 2.25rem;--talos-height-lg: 2.625rem;--talos-font-size-2xs: .6875rem;--talos-font-size-xs: .75rem;--talos-font-size-sm: .8125rem;--talos-font-size-base: .875rem;--talos-font-size-md: .875rem;--talos-font-size-lg: 1rem;--talos-font-size-xl: 1.125rem;--talos-font-size-2xl: 1.25rem;--talos-font-size-3xl: 1.5rem;--talos-font-size-4xl: 1.875rem;--talos-font-size-5xl: 2.25rem;--talos-font-weight-light: 300;--talos-font-weight-regular: 400;--talos-font-weight-medium: 500;--talos-font-weight-semibold: 600;--talos-font-weight-bold: 700;--talos-font-weight-extrabold: 800;--talos-line-height-none: 1;--talos-line-height-tight: 1.25;--talos-line-height-snug: 1.375;--talos-line-height-normal: 1.5;--talos-line-height-relaxed: 1.625;--talos-line-height-loose: 2;--talos-control-padding-x: .625rem;--talos-control-font-size: var(--talos-font-size-sm);--talos-control-height: var(--talos-height-md);--talos-border-radius: var(--talos-radius-md);--talos-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--talos-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .05);--talos-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .04);--talos-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .04);--talos-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);--talos-shadow-dialog: var(--talos-shadow-xl);--talos-shadow-dropdown: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 4px 6px -2px rgba(0, 0, 0, .04);--talos-transition: .18s cubic-bezier(.4, 0, .2, 1);--talos-transition-slow: .28s cubic-bezier(.4, 0, .2, 1);--talos-bg-canvas: #f8fafc;--talos-bg-surface: #ffffff;--talos-bg-subtle: #f1f5f9;--talos-bg-overlay: rgba(15, 23, 42, .5);--talos-border-subtle: #f1f5f9;--talos-border-default: #cbd5e1;--talos-border-hover: #94a3b8;--talos-border-focus: #2563eb;--talos-focus-ring: 0 0 0 3px rgba(37, 99, 235, .18);--talos-text-primary: #0f172a;--talos-text-secondary: #334155;--talos-text-muted: #64748b;--talos-text-inverse: #ffffff;--talos-bg-color: var(--talos-bg-canvas);--talos-card-bg: var(--talos-bg-surface);--talos-card-bg-subtle: var(--talos-bg-subtle);--talos-border-color: var(--talos-border-default);--talos-text-color: var(--talos-text-primary);--talos-error-color: #ef4444;--talos-warning-color: #d97706;--talos-success-color: #16a34a;--bg-color: var(--talos-bg-canvas);--bg-subtle: var(--talos-bg-subtle);--card-bg: var(--talos-bg-surface);--card-bg-subtle: var(--talos-bg-subtle);--border-color: var(--talos-border-default);--border-hover: var(--talos-border-hover);--border-focus: var(--talos-border-focus);--text-color: var(--talos-text-primary);--text-muted: var(--talos-text-muted);--primary-color: var(--talos-primary);--primary-hover: var(--talos-primary-hover);--primary-active: var(--talos-primary-active);--primary-light: var(--talos-primary-subtle-bg);--primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-primary: #2563eb;--talos-primary-hover: #1d4ed8;--talos-primary-active: #1e40af;--talos-primary-subtle-bg: #eff6ff;--talos-primary-subtle-bg-hover: #dbeafe;--talos-primary-subtle-border: #bfdbfe;--talos-primary-text: #1e40af;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-primary-color: var(--talos-primary);--talos-primary-light: var(--talos-primary-subtle-bg);--talos-primary-light-hover: var(--talos-primary-subtle-bg-hover);--talos-neutral: #475569;--talos-neutral-hover: #334155;--talos-neutral-active: #1e293b;--talos-neutral-subtle-bg: #f8fafc;--talos-neutral-subtle-bg-hover: #f1f5f9;--talos-neutral-subtle-border: #e2e8f0;--talos-neutral-text: #334155;--talos-neutral-solid-bg: #475569;--talos-neutral-solid-text: #ffffff;--talos-success: #16a34a;--talos-success-hover: #15803d;--talos-success-active: #166534;--talos-success-subtle-bg: #f0fdf4;--talos-success-subtle-bg-hover: #dcfce7;--talos-success-subtle-border: #bbf7d0;--talos-success-text: #166534;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #d97706;--talos-warning-hover: #b45309;--talos-warning-active: #92400e;--talos-warning-subtle-bg: #fffbeb;--talos-warning-subtle-bg-hover: #fef3c7;--talos-warning-subtle-border: #fde68a;--talos-warning-text: #92400e;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #dc2626;--talos-danger-active: #b91c1c;--talos-danger-subtle-bg: #fef2f2;--talos-danger-subtle-bg-hover: #fee2e2;--talos-danger-subtle-border: #fecaca;--talos-danger-text: #991b1b;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0284c7;--talos-info-hover: #0369a1;--talos-info-active: #075985;--talos-info-subtle-bg: #f0f9ff;--talos-info-subtle-bg-hover: #e0f2fe;--talos-info-subtle-border: #bae6fd;--talos-info-text: #0369a1;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #7c3aed;--talos-purple-hover: #6d28d9;--talos-purple-active: #5b21b6;--talos-purple-subtle-bg: #f5f3ff;--talos-purple-subtle-bg-hover: #ede9fe;--talos-purple-subtle-border: #ddd6fe;--talos-purple-text: #6d28d9;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-input-bg: var(--talos-bg-surface);--talos-input-border: var(--talos-border-default);--talos-input-border-hover: var(--talos-border-hover);--talos-input-border-focus: var(--talos-border-focus);--talos-input-color: var(--talos-text-primary);--talos-input-placeholder-color: var(--talos-text-muted);--talos-input-disabled-bg: var(--talos-bg-subtle);--talos-input-disabled-border: var(--talos-border-default);--talos-input-disabled-color: var(--talos-text-muted);--talos-input-radius: var(--talos-radius-md);--talos-input-height: var(--talos-height-md);--talos-affix-btn-size-sm: 1.375rem;--talos-affix-btn-size-md: 1.5rem;--talos-affix-btn-size-lg: 1.75rem;--talos-affix-btn-radius: var(--talos-radius-sm, .25rem);--talos-affix-btn-icon-size-sm: .8125rem;--talos-affix-btn-icon-size-md: .875rem;--talos-affix-btn-icon-size-lg: 1rem;--talos-affix-btn-color: var(--talos-text-muted, #64748b);--talos-affix-btn-hover-color: var(--talos-text-color, #0f172a);--talos-affix-btn-hover-bg: var(--talos-btn-ghost-hover-bg, var(--talos-bg-subtle, rgba(148, 163, 184, .15)));--talos-affix-btn-active-bg: var(--talos-btn-ghost-active-bg, rgba(148, 163, 184, .25));--talos-sidebar-width: 260px;--talos-sidebar-collapsed-width: 68px;--talos-nav-bg: var(--talos-bg-surface);--talos-nav-border-color: var(--talos-border-subtle);--talos-active-nav-bg: var(--talos-primary-subtle-bg);--talos-active-nav-text: var(--talos-primary);--talos-nav-hover-bg: var(--talos-bg-subtle);--talos-nav-hover-text: var(--talos-text-primary);--talos-avatar-bg: var(--talos-primary-subtle-bg);--talos-avatar-text: var(--talos-primary-text);--talos-badge-bg: var(--talos-primary-subtle-bg);--talos-badge-text: var(--talos-primary-text);--talos-header-bg: var(--talos-bg-surface);--talos-header-border-color: var(--talos-border-subtle);--talos-right-panel-bg: var(--talos-bg-surface);--talos-right-panel-border: var(--talos-border-subtle);--talos-loading-overlay-bg: rgba(255, 255, 255, .75);--talos-dropdown-bg: var(--talos-bg-surface);--talos-dropdown-border: var(--talos-border-default);--talos-dropdown-shadow: var(--talos-shadow-dropdown);--talos-dropdown-hover-bg: var(--talos-bg-subtle);--talos-dropdown-selected-bg: var(--talos-primary-subtle-bg);--talos-btn-font-family: inherit;--talos-btn-border-radius: var(--talos-radius-md);--talos-btn-font-weight: 600;--talos-btn-transition: background-color var(--talos-transition), border-color var(--talos-transition), color var(--talos-transition), box-shadow var(--talos-transition), opacity var(--talos-transition);--talos-btn-ripple-color: rgba(255, 255, 255, .35);--talos-btn-primary-bg: var(--talos-primary-solid-bg);--talos-btn-primary-hover: var(--talos-primary-hover);--talos-btn-primary-active: var(--talos-primary-active);--talos-btn-primary-text: var(--talos-primary-solid-text);--talos-btn-secondary-bg: var(--talos-neutral-solid-bg);--talos-btn-secondary-hover: var(--talos-neutral-hover);--talos-btn-secondary-active: var(--talos-neutral-active);--talos-btn-secondary-text: var(--talos-neutral-solid-text);--talos-btn-outline-bg: transparent;--talos-btn-outline-border: var(--talos-border-default);--talos-btn-outline-hover-bg: var(--talos-bg-subtle);--talos-btn-outline-hover-border: var(--talos-border-hover);--talos-btn-outline-text: var(--talos-text-secondary);--talos-btn-ghost-bg: transparent;--talos-btn-ghost-text: var(--talos-text-muted);--talos-btn-ghost-hover-bg: var(--talos-bg-subtle);--talos-btn-ghost-hover-text: var(--talos-text-primary);--talos-btn-ghost-active-bg: var(--talos-neutral-subtle-bg-hover);--talos-btn-danger-bg: var(--talos-danger-solid-bg);--talos-btn-danger-hover: var(--talos-danger-hover);--talos-btn-danger-active: var(--talos-danger-active);--talos-btn-danger-text: var(--talos-danger-solid-text);--talos-btn-success-bg: var(--talos-success-solid-bg);--talos-btn-success-hover: var(--talos-success-hover);--talos-btn-success-active: var(--talos-success-active);--talos-btn-success-text: var(--talos-success-solid-text);--talos-btn-height-xs: var(--talos-height-xs, 1.625rem);--talos-btn-height-sm: var(--talos-height-sm);--talos-btn-height-md: var(--talos-height-md);--talos-btn-height-lg: var(--talos-height-lg);--talos-btn-padding-x-xs: .5rem;--talos-btn-padding-x-sm: .625rem;--talos-btn-padding-x-md: .875rem;--talos-btn-padding-x-lg: 1.125rem;--talos-btn-font-size-xs: var(--talos-font-size-2xs, .6875rem);--talos-btn-font-size-sm: var(--talos-font-size-xs);--talos-btn-font-size-md: var(--talos-font-size-sm);--talos-btn-font-size-lg: var(--talos-font-size-md);--talos-category-bar-gap: 2px;--talos-category-bar-track-bg: var(--talos-bg-subtle);--talos-category-bar-border-radius: var(--talos-radius-md);--talos-category-bar-height-xs: .25rem;--talos-category-bar-height-sm: .375rem;--talos-category-bar-height-md: .5rem;--talos-category-bar-height-lg: .75rem;--talos-category-bar-marker-ring: var(--talos-bg-surface);--talos-range-track-bg: var(--talos-border-default);--talos-range-track-fill: var(--talos-primary);--talos-range-track-disabled-bg: var(--talos-border-subtle);--talos-range-track-disabled-fill: var(--talos-text-muted);--talos-range-track-height-sm: .25rem;--talos-range-track-height-md: .375rem;--talos-range-track-height-lg: .5rem;--talos-range-thumb-size-sm: 1rem;--talos-range-thumb-size-md: 1.25rem;--talos-range-thumb-size-lg: 1.5rem;--talos-range-thumb-bg: var(--talos-bg-surface);--talos-range-thumb-border: var(--talos-primary);--talos-range-thumb-shadow: var(--talos-shadow-sm);--talos-range-thumb-hover-shadow: 0 0 0 4px rgba(37, 99, 235, .15);--talos-range-thumb-active-shadow: 0 0 0 6px rgba(37, 99, 235, .25);--talos-range-tick-color: var(--talos-text-muted);--talos-range-tick-active-color: #ffffff;--talos-range-tick-label-color: var(--talos-text-muted);--talos-range-tooltip-bg: #0f172a;--talos-range-tooltip-text: #ffffff;--talos-toggle-track-bg: var(--talos-border-default);--talos-toggle-track-bg-hover: var(--talos-border-hover);--talos-toggle-thumb-bg: var(--talos-bg-surface);--talos-snackbar-bg: var(--talos-bg-surface);--talos-snackbar-text: var(--talos-text-primary);--talos-snackbar-border: var(--talos-border-default);--talos-snackbar-border-radius: var(--talos-radius-lg);--talos-dialog-bg: var(--talos-bg-surface);--talos-dialog-border: var(--talos-border-default);--talos-dialog-radius: var(--talos-radius-xl);--talos-dialog-shadow: var(--talos-shadow-dialog);--talos-dialog-backdrop-bg: var(--talos-bg-overlay);--talos-dialog-backdrop-blur-bg: rgba(15, 23, 42, .35);--talos-dialog-title-color: var(--talos-text-primary);--talos-dialog-subtitle-color: var(--talos-text-muted);--talos-tooltip-bg: #0f172a;--talos-tooltip-text: #ffffff;--talos-dropzone-bg: var(--talos-bg-surface);--talos-dropzone-hover-bg: var(--talos-bg-subtle);--talos-dropzone-drag-bg: var(--talos-primary-subtle-bg);--talos-dropzone-border: var(--talos-border-default);--talos-dropzone-hover-border: var(--talos-border-hover);--talos-dropzone-drag-border: var(--talos-primary);--talos-dropzone-radius: var(--talos-radius-lg);--talos-dropzone-text: var(--talos-text-primary);--talos-dropzone-subtext: var(--talos-text-muted);--talos-dropzone-icon-color: var(--talos-primary);--talos-dropzone-file-bg: var(--talos-bg-surface);--talos-dropzone-file-border: var(--talos-border-default);--talos-rating-fill-warning: var(--talos-warning);--talos-rating-fill-primary: var(--talos-primary);--talos-rating-fill-danger: var(--talos-danger);--talos-rating-fill-success: var(--talos-success);--talos-rating-fill-purple: var(--talos-purple);--talos-rating-unfilled: var(--talos-border-default);--talos-rating-size-sm: 1.125rem;--talos-rating-size-md: 1.375rem;--talos-rating-size-lg: 1.75rem;--talos-rating-size-xl: 2.25rem}:root[data-theme=dark],:root.dark,[data-theme=dark],[data-mode=dark],.dark,.dark-theme{--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-shadow-dropdown: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);--talos-shadow-dialog: 0 25px 50px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1);--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-primary-solid-bg: #2563eb;--talos-primary-solid-text: #ffffff;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-neutral-solid-bg: #334155;--talos-neutral-solid-text: #f8fafc;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-success-solid-bg: #16a34a;--talos-success-solid-text: #ffffff;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-warning-solid-bg: #d97706;--talos-warning-solid-text: #ffffff;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-danger-solid-bg: #dc2626;--talos-danger-solid-text: #ffffff;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-info-solid-bg: #0284c7;--talos-info-solid-text: #ffffff;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-purple-solid-bg: #7c3aed;--talos-purple-solid-text: #ffffff;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc;--talos-loading-overlay-bg: rgba(9, 13, 22, .8);--talos-range-thumb-shadow: 0 2px 4px rgba(0, 0, 0, .5)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]):not(.light){--talos-bg-canvas: #090d16;--talos-bg-surface: #0f172a;--talos-bg-subtle: #131d31;--talos-bg-overlay: rgba(3, 7, 18, .75);--talos-border-subtle: rgba(255, 255, 255, .06);--talos-border-default: rgba(255, 255, 255, .1);--talos-border-hover: rgba(255, 255, 255, .2);--talos-border-focus: #3b82f6;--talos-focus-ring: 0 0 0 3px rgba(59, 130, 246, .35);--talos-text-primary: #f8fafc;--talos-text-secondary: #e2e8f0;--talos-text-muted: #94a3b8;--talos-text-inverse: #090d16;--talos-primary: #3b82f6;--talos-primary-hover: #60a5fa;--talos-primary-active: #2563eb;--talos-primary-subtle-bg: rgba(59, 130, 246, .16);--talos-primary-subtle-bg-hover: rgba(59, 130, 246, .26);--talos-primary-subtle-border: rgba(59, 130, 246, .35);--talos-primary-text: #93c5fd;--talos-neutral: #94a3b8;--talos-neutral-hover: #cbd5e1;--talos-neutral-active: #f1f5f9;--talos-neutral-subtle-bg: rgba(148, 163, 184, .12);--talos-neutral-subtle-bg-hover: rgba(148, 163, 184, .2);--talos-neutral-subtle-border: rgba(148, 163, 184, .25);--talos-neutral-text: #e2e8f0;--talos-success: #22c55e;--talos-success-hover: #4ade80;--talos-success-active: #16a34a;--talos-success-subtle-bg: rgba(34, 197, 94, .16);--talos-success-subtle-bg-hover: rgba(34, 197, 94, .26);--talos-success-subtle-border: rgba(34, 197, 94, .35);--talos-success-text: #86efac;--talos-warning: #f59e0b;--talos-warning-hover: #fbbf24;--talos-warning-active: #d97706;--talos-warning-subtle-bg: rgba(245, 158, 11, .16);--talos-warning-subtle-bg-hover: rgba(245, 158, 11, .26);--talos-warning-subtle-border: rgba(245, 158, 11, .35);--talos-warning-text: #fde047;--talos-danger: #ef4444;--talos-danger-hover: #f87171;--talos-danger-active: #dc2626;--talos-danger-subtle-bg: rgba(239, 68, 68, .16);--talos-danger-subtle-bg-hover: rgba(239, 68, 68, .26);--talos-danger-subtle-border: rgba(239, 68, 68, .35);--talos-danger-text: #fca5a5;--talos-info: #0ea5e9;--talos-info-hover: #38bdf8;--talos-info-active: #0284c7;--talos-info-subtle-bg: rgba(14, 165, 233, .16);--talos-info-subtle-bg-hover: rgba(14, 165, 233, .26);--talos-info-subtle-border: rgba(14, 165, 233, .35);--talos-info-text: #7dd3fc;--talos-purple: #8b5cf6;--talos-purple-hover: #a78bfa;--talos-purple-active: #7c3aed;--talos-purple-subtle-bg: rgba(139, 92, 246, .16);--talos-purple-subtle-bg-hover: rgba(139, 92, 246, .26);--talos-purple-subtle-border: rgba(139, 92, 246, .35);--talos-purple-text: #c4b5fd;--talos-tooltip-bg: #1e293b;--talos-tooltip-text: #f8fafc;--talos-range-tooltip-bg: #1e293b;--talos-range-tooltip-text: #f8fafc;--talos-range-tick-active-color: #f8fafc}}:host{display:block;width:100%;box-sizing:border-box}.talos-range-wrapper{display:flex;flex-direction:column;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none;font-family:inherit;--range-accent: var(--talos-range-track-fill, var(--talos-primary-color));--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: var(--talos-focus-ring, 0 0 0 3px rgba(37, 99, 235, .15));--range-track-h: var(--talos-range-track-height-md, .375rem);--range-thumb-d: var(--talos-range-thumb-size-md, 1.25rem);--range-thumb-border-width: 2px;--range-tick-w: 2px;--range-tick-h: 8px;--range-font-size: var(--talos-control-font-size, .8125rem)}.talos-range-wrapper.size-sm{--range-track-h: var(--talos-range-track-height-sm, .25rem);--range-thumb-d: var(--talos-range-thumb-size-sm, 1rem);--range-font-size: .75rem;--range-tick-h: 6px}.talos-range-wrapper.size-lg{--range-track-h: var(--talos-range-track-height-lg, .5rem);--range-thumb-d: var(--talos-range-thumb-size-lg, 1.5rem);--range-font-size: .875rem;--range-tick-h: 10px}.talos-range-wrapper.variant-primary{--range-accent: var(--talos-primary-color, #2563eb);--range-accent-hover: var(--talos-primary-hover, #1d4ed8);--range-focus-glow: 0 0 0 3px rgba(37, 99, 235, .2)}.talos-range-wrapper.variant-secondary{--range-accent: #475569;--range-accent-hover: #334155;--range-focus-glow: 0 0 0 3px rgba(71, 85, 105, .2)}.talos-range-wrapper.variant-success{--range-accent: #16a34a;--range-accent-hover: #15803d;--range-focus-glow: 0 0 0 3px rgba(22, 163, 74, .2)}.talos-range-wrapper.variant-warning{--range-accent: #d97706;--range-accent-hover: #b45309;--range-focus-glow: 0 0 0 3px rgba(217, 119, 6, .2)}.talos-range-wrapper.variant-danger{--range-accent: var(--talos-error-color, #ef4444);--range-accent-hover: #dc2626;--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .2)}.talos-range-wrapper.variant-info{--range-accent: #0284c7;--range-accent-hover: #0369a1;--range-focus-glow: 0 0 0 3px rgba(2, 132, 199, .2)}.talos-range-wrapper.is-invalid{--range-accent: var(--talos-error-color, #ef4444);--range-focus-glow: 0 0 0 3px rgba(239, 68, 68, .25)}.talos-range-wrapper.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}.talos-range-wrapper.is-disabled .talos-range-thumb{cursor:not-allowed;border-color:var(--talos-range-track-disabled-fill, #94a3b8);background-color:var(--talos-range-track-disabled-bg, #cbd5e1);box-shadow:none}.talos-range-wrapper.is-disabled .talos-range-fill{background-color:var(--talos-range-track-disabled-fill, #94a3b8)}.talos-range-wrapper.is-readonly .talos-range-slider,.talos-range-wrapper.is-readonly .talos-range-thumb{cursor:default}.talos-range-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}.talos-range-label-group{display:flex;flex-direction:column;gap:.125rem}.talos-range-label{font-size:var(--range-font-size);font-weight:600;color:var(--talos-text-color, #0f172a)}.talos-range-hint{font-size:.75rem;color:var(--talos-text-muted, #64748b)}.talos-range-value-badge{display:inline-flex;align-items:center;padding:.125rem .5rem;font-size:.75rem;font-weight:600;border-radius:var(--talos-border-radius, .375rem);background-color:var(--talos-primary-light, #eff6ff);color:var(--range-accent)}.talos-range-inputs-group{display:flex;align-items:center;gap:.375rem}.talos-range-inputs-separator{color:var(--talos-text-muted, #64748b);font-weight:500}.talos-range-number-box{display:inline-flex;align-items:center;background-color:var(--talos-card-bg, #ffffff);border:1px solid var(--talos-border-color, #cbd5e1);border-radius:var(--talos-border-radius, .375rem);padding:0 .375rem;height:1.875rem;transition:border-color .15s ease,box-shadow .15s ease}.talos-range-number-box:focus-within{border-color:var(--range-accent);box-shadow:var(--range-focus-glow)}.talos-range-input-affix{font-size:.75rem;color:var(--talos-text-muted, #64748b);-webkit-user-select:none;user-select:none}.talos-range-number-input{width:3.5rem;border:none;background:transparent;padding:.125rem .25rem;font-size:.8125rem;font-weight:500;color:var(--talos-text-color, #0f172a);text-align:right;outline:none;font-family:inherit}.talos-range-number-input::-webkit-inner-spin-button,.talos-range-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.talos-range-number-input{-moz-appearance:textfield}.talos-range-slider{position:relative;width:100%;height:calc(var(--range-thumb-d) + .5rem);display:flex;align-items:center;cursor:pointer;touch-action:none;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-slider.is-active{cursor:grabbing}.talos-range-track{position:relative;width:100%;height:var(--range-track-h);background-color:var(--talos-range-track-bg, #e2e8f0);border-radius:9999px;overflow:visible}.talos-range-fill{position:absolute;top:0;bottom:0;background-color:var(--range-accent);border-radius:9999px;transition:background-color .18s ease;pointer-events:none}.talos-range-ticks{position:absolute;inset:0;pointer-events:none}.talos-range-tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-tick-w);height:var(--range-tick-h);background-color:var(--talos-range-tick-color, #94a3b8);border-radius:1px;pointer-events:auto;cursor:pointer;transition:transform .15s ease,background-color .15s ease}.talos-range-tick.is-active{background-color:var(--talos-range-tick-active-color, #ffffff);box-shadow:0 0 2px #0000004d}.talos-range-tick:hover{transform:translate(-50%,-50%) scale(1.4)}.talos-range-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--range-thumb-d);height:var(--range-thumb-d);background-color:var(--talos-range-thumb-bg, #ffffff);border:var(--range-thumb-border-width) solid var(--range-accent);border-radius:50%;box-shadow:var(--talos-range-thumb-shadow, 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08));cursor:grab;outline:none;box-sizing:border-box;transition:transform .12s cubic-bezier(.4,0,.2,1),box-shadow .12s cubic-bezier(.4,0,.2,1),border-color .12s cubic-bezier(.4,0,.2,1);z-index:2}.talos-range-thumb:hover{box-shadow:var(--talos-range-thumb-hover-shadow, 0 0 0 4px rgba(37, 99, 235, .15));transform:translate(-50%,-50%) scale(1.08)}.talos-range-thumb.is-focused,.talos-range-thumb:focus-visible{box-shadow:var(--range-focus-glow);transform:translate(-50%,-50%) scale(1.12);z-index:3}.talos-range-thumb.is-dragging{cursor:grabbing;box-shadow:var(--talos-range-thumb-active-shadow, 0 0 0 6px rgba(37, 99, 235, .25));transform:translate(-50%,-50%) scale(1.16);z-index:4}.talos-range-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%) translateY(4px);background-color:var(--talos-range-tooltip-bg, #1e293b);color:var(--talos-range-tooltip-text, #ffffff);font-size:.6875rem;font-weight:600;padding:.1875rem .4375rem;border-radius:.25rem;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;z-index:10}.talos-range-tooltip:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:4px;border-style:solid;border-color:var(--talos-range-tooltip-bg, #1e293b) transparent transparent transparent}.talos-range-tooltip.visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.talos-range-labels{position:relative;width:100%;margin-top:.25rem;height:1.125rem;padding:0 calc(var(--range-thumb-d) / 2);box-sizing:border-box}.talos-range-label-item{position:absolute;top:0;transform:translate(-50%);font-size:.6875rem;color:var(--talos-range-tick-label-color, var(--talos-text-muted, #64748b));white-space:nowrap;cursor:pointer;transition:color .15s ease,font-weight .15s ease}.talos-range-label-item.is-active{color:var(--range-accent);font-weight:600}.talos-range-label-item:hover{color:var(--talos-text-color, #0f172a)}\n"] }]
641
- }], propDecorators: { trackContainerRef: [{ type: i0.ViewChild, args: ['sliderTrackContainer', { isSignal: true }] }], thumb0Ref: [{ type: i0.ViewChild, args: ['thumb0', { isSignal: true }] }], thumb1Ref: [{ type: i0.ViewChild, args: ['thumb1', { isSignal: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: false }] }], minRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRange", required: false }] }], maxRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRange", required: false }] }], marks: [{ type: i0.Input, args: [{ isSignal: true, alias: "marks", required: false }] }], showTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTicks", required: false }] }], showIntervals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIntervals", required: false }] }], showLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabels", required: false }] }], snapToTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapToTicks", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", 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 }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], showInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInputs", required: false }] }], showValueBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueBadge", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelStart", required: false }] }], ariaLabelEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelEnd", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], change: [{ type: i0.Output, args: ["change"] }] } });
642
-
643
- class TalosRangeInputModule {
644
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosRangeInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
645
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.1", ngImport: i0, type: TalosRangeInputModule, imports: [TalosRangeInputComponent, TalosRangeInputDirective], exports: [TalosRangeInputComponent, TalosRangeInputDirective] });
646
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosRangeInputModule });
647
- }
648
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosRangeInputModule, decorators: [{
649
- type: NgModule,
650
- args: [{
651
- imports: [TalosRangeInputComponent, TalosRangeInputDirective],
652
- exports: [TalosRangeInputComponent, TalosRangeInputDirective]
653
- }]
654
- }] });
655
-
656
- /**
657
- * Generated bundle index. Do not edit.
658
- */
659
-
660
- export { TalosRangeInputComponent, TalosRangeInputDirective, TalosRangeInputModule };
661
- //# sourceMappingURL=weeehaoooz-talos-ui-form-range-input.mjs.map