@ojiepermana/angular 22.1.14 → 22.2.0

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 (252) hide show
  1. package/README.md +8 -6
  2. package/SUPPORT.md +3 -3
  3. package/chart/README.md +1 -1
  4. package/component/README.md +2 -2
  5. package/component/calendar/README.md +3 -15
  6. package/component/drawer/README.md +1 -2
  7. package/fesm2022/ojiepermana-angular-chart-area.mjs +352 -137
  8. package/fesm2022/ojiepermana-angular-chart-bar.mjs +744 -524
  9. package/fesm2022/ojiepermana-angular-chart-core.mjs +1140 -1344
  10. package/fesm2022/ojiepermana-angular-chart-line.mjs +393 -147
  11. package/fesm2022/ojiepermana-angular-chart-pie.mjs +408 -179
  12. package/fesm2022/ojiepermana-angular-chart-primitives.mjs +1262 -920
  13. package/fesm2022/ojiepermana-angular-chart-radar.mjs +473 -205
  14. package/fesm2022/ojiepermana-angular-chart-radial.mjs +425 -182
  15. package/fesm2022/ojiepermana-angular-chart-scatter.mjs +386 -210
  16. package/fesm2022/ojiepermana-angular-chart.mjs +3 -19
  17. package/fesm2022/ojiepermana-angular-component-accordion.mjs +485 -243
  18. package/fesm2022/ojiepermana-angular-component-alert-dialog.mjs +963 -325
  19. package/fesm2022/ojiepermana-angular-component-alert.mjs +266 -103
  20. package/fesm2022/ojiepermana-angular-component-aspect-ratio.mjs +80 -35
  21. package/fesm2022/ojiepermana-angular-component-avatar.mjs +402 -135
  22. package/fesm2022/ojiepermana-angular-component-badge.mjs +109 -59
  23. package/fesm2022/ojiepermana-angular-component-breadcrumb.mjs +410 -142
  24. package/fesm2022/ojiepermana-angular-component-button-group.mjs +249 -96
  25. package/fesm2022/ojiepermana-angular-component-button.mjs +153 -75
  26. package/fesm2022/ojiepermana-angular-component-calendar.mjs +531 -418
  27. package/fesm2022/ojiepermana-angular-component-card.mjs +457 -171
  28. package/fesm2022/ojiepermana-angular-component-carousel.mjs +642 -272
  29. package/fesm2022/ojiepermana-angular-component-checkbox.mjs +312 -108
  30. package/fesm2022/ojiepermana-angular-component-collapsible.mjs +299 -115
  31. package/fesm2022/ojiepermana-angular-component-combobox.mjs +396 -183
  32. package/fesm2022/ojiepermana-angular-component-command.mjs +807 -347
  33. package/fesm2022/ojiepermana-angular-component-composer.mjs +807 -330
  34. package/fesm2022/ojiepermana-angular-component-context-menu.mjs +196 -161
  35. package/fesm2022/ojiepermana-angular-component-date-picker.mjs +650 -338
  36. package/fesm2022/ojiepermana-angular-component-dialog.mjs +710 -316
  37. package/fesm2022/ojiepermana-angular-component-drawer.mjs +2 -5
  38. package/fesm2022/ojiepermana-angular-component-dropdown-menu.mjs +1212 -646
  39. package/fesm2022/ojiepermana-angular-component-editor.mjs +987 -502
  40. package/fesm2022/ojiepermana-angular-component-empty.mjs +350 -137
  41. package/fesm2022/ojiepermana-angular-component-form.mjs +813 -434
  42. package/fesm2022/ojiepermana-angular-component-hover-card.mjs +486 -277
  43. package/fesm2022/ojiepermana-angular-component-icon.mjs +241 -140
  44. package/fesm2022/ojiepermana-angular-component-input-group.mjs +449 -176
  45. package/fesm2022/ojiepermana-angular-component-input-otp.mjs +891 -488
  46. package/fesm2022/ojiepermana-angular-component-input.mjs +86 -55
  47. package/fesm2022/ojiepermana-angular-component-item.mjs +713 -261
  48. package/fesm2022/ojiepermana-angular-component-kanban.mjs +714 -216
  49. package/fesm2022/ojiepermana-angular-component-kbd.mjs +124 -52
  50. package/fesm2022/ojiepermana-angular-component-label.mjs +82 -31
  51. package/fesm2022/ojiepermana-angular-component-menubar.mjs +479 -329
  52. package/fesm2022/ojiepermana-angular-component-native-select.mjs +167 -65
  53. package/fesm2022/ojiepermana-angular-component-navigation-menu.mjs +683 -380
  54. package/fesm2022/ojiepermana-angular-component-pagination.mjs +277 -94
  55. package/fesm2022/ojiepermana-angular-component-pillbox.mjs +1283 -607
  56. package/fesm2022/ojiepermana-angular-component-popover.mjs +291 -204
  57. package/fesm2022/ojiepermana-angular-component-progress.mjs +176 -53
  58. package/fesm2022/ojiepermana-angular-component-radio.mjs +449 -142
  59. package/fesm2022/ojiepermana-angular-component-resizable.mjs +659 -453
  60. package/fesm2022/ojiepermana-angular-component-scroll-area.mjs +117 -39
  61. package/fesm2022/ojiepermana-angular-component-segmented-control.mjs +351 -172
  62. package/fesm2022/ojiepermana-angular-component-select.mjs +475 -345
  63. package/fesm2022/ojiepermana-angular-component-separator.mjs +102 -35
  64. package/fesm2022/ojiepermana-angular-component-sheet.mjs +797 -347
  65. package/fesm2022/ojiepermana-angular-component-skeleton.mjs +62 -29
  66. package/fesm2022/ojiepermana-angular-component-slider.mjs +592 -376
  67. package/fesm2022/ojiepermana-angular-component-spinner.mjs +135 -38
  68. package/fesm2022/ojiepermana-angular-component-switch.mjs +315 -103
  69. package/fesm2022/ojiepermana-angular-component-table.mjs +440 -153
  70. package/fesm2022/ojiepermana-angular-component-tabs.mjs +590 -317
  71. package/fesm2022/ojiepermana-angular-component-textarea.mjs +85 -50
  72. package/fesm2022/ojiepermana-angular-component-timeline.mjs +609 -231
  73. package/fesm2022/ojiepermana-angular-component-toast.mjs +229 -243
  74. package/fesm2022/ojiepermana-angular-component-toggle-group.mjs +573 -288
  75. package/fesm2022/ojiepermana-angular-component-toggle.mjs +187 -78
  76. package/fesm2022/ojiepermana-angular-component-tooltip.mjs +798 -517
  77. package/fesm2022/ojiepermana-angular-component-utils-core.mjs +159 -292
  78. package/fesm2022/ojiepermana-angular-component-utils-overlay.mjs +46 -58
  79. package/fesm2022/ojiepermana-angular-component-utils-scale.mjs +76 -38
  80. package/fesm2022/ojiepermana-angular-component-utils.mjs +2 -8
  81. package/fesm2022/ojiepermana-angular-component.mjs +0 -10
  82. package/fesm2022/ojiepermana-angular-navigation-core.mjs +13 -23
  83. package/fesm2022/ojiepermana-angular-navigation-icon.mjs +35 -24
  84. package/fesm2022/ojiepermana-angular-navigation-navigation-badge-count.component-BKCeWzml.mjs +129 -0
  85. package/fesm2022/ojiepermana-angular-navigation-navigation-dockbar-menu.component-DFEJK2jD.mjs +811 -0
  86. package/fesm2022/{ojiepermana-angular-navigation-navigation-entry-grid.component-COQ-60DS.mjs → ojiepermana-angular-navigation-navigation-entry-grid.component-mpK9Ar08.mjs} +387 -183
  87. package/fesm2022/ojiepermana-angular-navigation-navigation-flyout-menu.component-BPgH7FJk.mjs +650 -0
  88. package/fesm2022/ojiepermana-angular-navigation-navigation-horizontal.component-DMpYcD9t.mjs +662 -0
  89. package/fesm2022/ojiepermana-angular-navigation-navigation-item.component-Basp5SIk.mjs +1228 -0
  90. package/fesm2022/ojiepermana-angular-navigation-navigation-list.component-YUzHI9Pj.mjs +311 -0
  91. package/fesm2022/ojiepermana-angular-navigation-service.mjs +542 -724
  92. package/fesm2022/ojiepermana-angular-navigation-types.mjs +27 -56
  93. package/fesm2022/ojiepermana-angular-navigation.mjs +3052 -4
  94. package/fesm2022/ojiepermana-angular-sdk.mjs +91 -201
  95. package/fesm2022/ojiepermana-angular-theme-component-settings.mjs +1115 -737
  96. package/fesm2022/ojiepermana-angular-theme-layout-services.mjs +245 -328
  97. package/fesm2022/ojiepermana-angular-theme-layout-types.mjs +35 -38
  98. package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs +1719 -552
  99. package/fesm2022/ojiepermana-angular-theme-layout.mjs +847 -496
  100. package/fesm2022/ojiepermana-angular-theme-page-core.mjs +288 -358
  101. package/fesm2022/ojiepermana-angular-theme-page-filter.mjs +362 -224
  102. package/fesm2022/ojiepermana-angular-theme-page-overview.mjs +88 -0
  103. package/fesm2022/ojiepermana-angular-theme-page-root.mjs +576 -254
  104. package/fesm2022/ojiepermana-angular-theme-page-side.mjs +317 -177
  105. package/fesm2022/ojiepermana-angular-theme-page-slots.mjs +256 -112
  106. package/fesm2022/ojiepermana-angular-theme-page.mjs +7 -12
  107. package/fesm2022/ojiepermana-angular-theme-shell-services.mjs +215 -326
  108. package/fesm2022/ojiepermana-angular-theme-shell-types.mjs +68 -129
  109. package/fesm2022/ojiepermana-angular-theme-shell.mjs +907 -378
  110. package/fesm2022/ojiepermana-angular-theme-styles.mjs +521 -720
  111. package/fesm2022/ojiepermana-angular-theme.mjs +0 -10
  112. package/fesm2022/ojiepermana-angular.mjs +5 -24
  113. package/navigation/README.md +1 -1
  114. package/package.json +16 -12
  115. package/sdk/README.md +1 -1
  116. package/sdk/src/writer/index.js +2 -2
  117. package/theme/README.md +1 -1
  118. package/theme/layout/README.md +2 -4
  119. package/theme/page/README.md +50 -0
  120. package/theme/styles/README.md +10 -10
  121. package/theme/styles/css/base/prefers-dark.css +1 -1
  122. package/theme/styles/css/base/status.css +1 -1
  123. package/theme/styles/css/color/amber.css +1 -1
  124. package/theme/styles/css/color/blue.css +1 -1
  125. package/theme/styles/css/color/cyan.css +1 -1
  126. package/theme/styles/css/color/emerald.css +1 -1
  127. package/theme/styles/css/color/fuchsia.css +1 -1
  128. package/theme/styles/css/color/green.css +1 -1
  129. package/theme/styles/css/color/indigo.css +1 -1
  130. package/theme/styles/css/color/lime.css +1 -1
  131. package/theme/styles/css/color/orange.css +1 -1
  132. package/theme/styles/css/color/pink.css +1 -1
  133. package/theme/styles/css/color/purple.css +1 -1
  134. package/theme/styles/css/color/red.css +1 -1
  135. package/theme/styles/css/color/rose.css +1 -1
  136. package/theme/styles/css/color/sky.css +1 -1
  137. package/theme/styles/css/color/teal.css +1 -1
  138. package/theme/styles/css/color/violet.css +1 -1
  139. package/theme/styles/css/color/yellow.css +1 -1
  140. package/theme/styles/css/neutral/gray.css +1 -1
  141. package/theme/styles/css/neutral/mauve.css +1 -1
  142. package/theme/styles/css/neutral/mist.css +1 -1
  143. package/theme/styles/css/neutral/neutral.css +1 -1
  144. package/theme/styles/css/neutral/olive.css +1 -1
  145. package/theme/styles/css/neutral/slate.css +1 -1
  146. package/theme/styles/css/neutral/stone.css +1 -1
  147. package/theme/styles/css/neutral/taupe.css +1 -1
  148. package/theme/styles/css/neutral/zinc.css +1 -1
  149. package/types/ojiepermana-angular-chart-area.d.ts +126 -63
  150. package/types/ojiepermana-angular-chart-bar.d.ts +244 -154
  151. package/types/ojiepermana-angular-chart-core.d.ts +409 -398
  152. package/types/ojiepermana-angular-chart-line.d.ts +141 -68
  153. package/types/ojiepermana-angular-chart-pie.d.ts +192 -121
  154. package/types/ojiepermana-angular-chart-primitives.d.ts +283 -214
  155. package/types/ojiepermana-angular-chart-radar.d.ts +189 -108
  156. package/types/ojiepermana-angular-chart-radial.d.ts +177 -106
  157. package/types/ojiepermana-angular-chart-scatter.d.ts +166 -110
  158. package/types/ojiepermana-angular-chart.d.ts +3 -2
  159. package/types/ojiepermana-angular-component-accordion.d.ts +135 -81
  160. package/types/ojiepermana-angular-component-alert-dialog.d.ts +271 -123
  161. package/types/ojiepermana-angular-component-alert.d.ts +69 -39
  162. package/types/ojiepermana-angular-component-aspect-ratio.d.ts +20 -12
  163. package/types/ojiepermana-angular-component-avatar.d.ts +103 -49
  164. package/types/ojiepermana-angular-component-badge.d.ts +36 -24
  165. package/types/ojiepermana-angular-component-breadcrumb.d.ts +79 -40
  166. package/types/ojiepermana-angular-component-button-group.d.ts +48 -24
  167. package/types/ojiepermana-angular-component-button.d.ts +44 -27
  168. package/types/ojiepermana-angular-component-calendar.d.ts +145 -107
  169. package/types/ojiepermana-angular-component-card.d.ts +112 -63
  170. package/types/ojiepermana-angular-component-carousel.d.ts +150 -81
  171. package/types/ojiepermana-angular-component-checkbox.d.ts +96 -38
  172. package/types/ojiepermana-angular-component-collapsible.d.ts +65 -39
  173. package/types/ojiepermana-angular-component-combobox.d.ts +100 -55
  174. package/types/ojiepermana-angular-component-command.d.ts +206 -121
  175. package/types/ojiepermana-angular-component-composer.d.ts +184 -84
  176. package/types/ojiepermana-angular-component-context-menu.d.ts +51 -41
  177. package/types/ojiepermana-angular-component-date-picker.d.ts +199 -109
  178. package/types/ojiepermana-angular-component-dialog.d.ts +200 -105
  179. package/types/ojiepermana-angular-component-drawer.d.ts +2 -1
  180. package/types/ojiepermana-angular-component-dropdown-menu.d.ts +324 -202
  181. package/types/ojiepermana-angular-component-editor.d.ts +215 -117
  182. package/types/ojiepermana-angular-component-empty.d.ts +80 -45
  183. package/types/ojiepermana-angular-component-form.d.ts +185 -121
  184. package/types/ojiepermana-angular-component-hover-card.d.ts +130 -72
  185. package/types/ojiepermana-angular-component-icon.d.ts +87 -57
  186. package/types/ojiepermana-angular-component-input-group.d.ts +93 -46
  187. package/types/ojiepermana-angular-component-input-otp.d.ts +243 -150
  188. package/types/ojiepermana-angular-component-input.d.ts +27 -17
  189. package/types/ojiepermana-angular-component-item.d.ts +160 -84
  190. package/types/ojiepermana-angular-component-kanban.d.ts +157 -62
  191. package/types/ojiepermana-angular-component-kbd.d.ts +24 -15
  192. package/types/ojiepermana-angular-component-label.d.ts +19 -11
  193. package/types/ojiepermana-angular-component-menubar.d.ts +120 -90
  194. package/types/ojiepermana-angular-component-native-select.d.ts +37 -24
  195. package/types/ojiepermana-angular-component-navigation-menu.d.ts +157 -98
  196. package/types/ojiepermana-angular-component-pagination.d.ts +78 -28
  197. package/types/ojiepermana-angular-component-pillbox.d.ts +361 -204
  198. package/types/ojiepermana-angular-component-popover.d.ts +94 -64
  199. package/types/ojiepermana-angular-component-progress.d.ts +45 -17
  200. package/types/ojiepermana-angular-component-radio.d.ts +129 -53
  201. package/types/ojiepermana-angular-component-resizable.d.ts +160 -112
  202. package/types/ojiepermana-angular-component-scroll-area.d.ts +33 -15
  203. package/types/ojiepermana-angular-component-segmented-control.d.ts +94 -50
  204. package/types/ojiepermana-angular-component-select.d.ts +94 -77
  205. package/types/ojiepermana-angular-component-separator.d.ts +26 -14
  206. package/types/ojiepermana-angular-component-sheet.d.ts +226 -116
  207. package/types/ojiepermana-angular-component-skeleton.d.ts +13 -10
  208. package/types/ojiepermana-angular-component-slider.d.ts +140 -75
  209. package/types/ojiepermana-angular-component-spinner.d.ts +31 -13
  210. package/types/ojiepermana-angular-component-switch.d.ts +97 -40
  211. package/types/ojiepermana-angular-component-table.d.ts +102 -50
  212. package/types/ojiepermana-angular-component-tabs.d.ts +174 -115
  213. package/types/ojiepermana-angular-component-textarea.d.ts +27 -17
  214. package/types/ojiepermana-angular-component-timeline.d.ts +141 -59
  215. package/types/ojiepermana-angular-component-toast.d.ts +51 -55
  216. package/types/ojiepermana-angular-component-toggle-group.d.ts +159 -88
  217. package/types/ojiepermana-angular-component-toggle.d.ts +47 -25
  218. package/types/ojiepermana-angular-component-tooltip.d.ts +222 -132
  219. package/types/ojiepermana-angular-component-utils-core.d.ts +81 -90
  220. package/types/ojiepermana-angular-component-utils-overlay.d.ts +7 -11
  221. package/types/ojiepermana-angular-component-utils-scale.d.ts +20 -12
  222. package/types/ojiepermana-angular-component-utils.d.ts +2 -2
  223. package/types/ojiepermana-angular-component.d.ts +1 -2
  224. package/types/ojiepermana-angular-navigation-core.d.ts +46 -50
  225. package/types/ojiepermana-angular-navigation-icon.d.ts +9 -12
  226. package/types/ojiepermana-angular-navigation-service.d.ts +112 -115
  227. package/types/ojiepermana-angular-navigation-types.d.ts +121 -125
  228. package/types/ojiepermana-angular-navigation.d.ts +663 -374
  229. package/types/ojiepermana-angular-sdk.d.ts +69 -71
  230. package/types/ojiepermana-angular-theme-component-settings.d.ts +115 -83
  231. package/types/ojiepermana-angular-theme-layout-services.d.ts +119 -124
  232. package/types/ojiepermana-angular-theme-layout-types.d.ts +27 -31
  233. package/types/ojiepermana-angular-theme-layout-wrapper.d.ts +399 -187
  234. package/types/ojiepermana-angular-theme-layout.d.ts +201 -113
  235. package/types/ojiepermana-angular-theme-page-core.d.ts +136 -142
  236. package/types/ojiepermana-angular-theme-page-filter.d.ts +112 -62
  237. package/types/ojiepermana-angular-theme-page-overview.d.ts +28 -0
  238. package/types/ojiepermana-angular-theme-page-root.d.ts +172 -88
  239. package/types/ojiepermana-angular-theme-page-side.d.ts +89 -49
  240. package/types/ojiepermana-angular-theme-page-slots.d.ts +58 -37
  241. package/types/ojiepermana-angular-theme-page.d.ts +7 -5
  242. package/types/ojiepermana-angular-theme-shell-services.d.ts +119 -125
  243. package/types/ojiepermana-angular-theme-shell-types.d.ts +38 -41
  244. package/types/ojiepermana-angular-theme-shell.d.ts +139 -61
  245. package/types/ojiepermana-angular-theme-styles.d.ts +184 -196
  246. package/types/ojiepermana-angular-theme.d.ts +1 -2
  247. package/types/ojiepermana-angular.d.ts +5 -5
  248. package/fesm2022/ojiepermana-angular-navigation-navigation-badge-count.component-Be3IqzG4.mjs +0 -91
  249. package/fesm2022/ojiepermana-angular-navigation-navigation-dockbar-menu.component-Bc7DWK3R.mjs +0 -522
  250. package/fesm2022/ojiepermana-angular-navigation-navigation-flyout-menu.component-DA8VPEn7.mjs +0 -404
  251. package/fesm2022/ojiepermana-angular-navigation-navigation-horizontal.component-U2TJTzlW.mjs +0 -466
  252. package/fesm2022/ojiepermana-angular-navigation-ojiepermana-angular-navigation-CIUhmytH.mjs +0 -2668
@@ -1,331 +1,434 @@
1
- import * as i0 from '@angular/core';
2
- import { inject, ElementRef, input, computed, Component, DestroyRef, viewChild, numberAttribute, booleanAttribute, output, signal, effect, untracked } from '@angular/core';
3
- import { cn } from '@ojiepermana/angular/component/utils/core';
4
- import { DOCUMENT } from '@angular/common';
5
-
6
- /**
7
- * Styled native range input. Works with `ngModel` / `FormControl` via
8
- * Angular's built-in `RangeValueAccessor`. Keyboard + ARIA handled by the browser.
9
- */
10
- class SliderComponent {
11
- el = inject(ElementRef);
12
- class = input('', /* @ts-ignore */
13
- ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
14
- classes = computed(() => cn('Slider relative w-full appearance-none bg-transparent', 'focus-visible:outline-none', 'disabled:pointer-events-none disabled:opacity-50', this.class()), /* @ts-ignore */
15
- ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
16
- focus() {
17
- this.el.nativeElement.focus();
18
- }
19
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
20
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: SliderComponent, isStandalone: true, selector: "input[type=range][Slider]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true, styles: [":host.Slider{height:calc(var(--spacing-base) * 5);cursor:pointer}:host.Slider::-webkit-slider-runnable-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-moz-range-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:calc(var(--spacing-base) * -1);width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider::-moz-range-thumb{width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.Slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"] });
21
- }
22
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SliderComponent, decorators: [{
23
- type: Component,
24
- args: [{ selector: 'input[type=range][Slider]', host: { '[class]': 'classes()' }, template: '', styles: [":host.Slider{height:calc(var(--spacing-base) * 5);cursor:pointer}:host.Slider::-webkit-slider-runnable-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-moz-range-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:calc(var(--spacing-base) * -1);width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider::-moz-range-thumb{width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.Slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"] }]
25
- }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
26
-
27
- class SliderRootComponent {
28
- host = inject(ElementRef);
29
- document = inject(DOCUMENT);
30
- destroyRef = inject(DestroyRef);
31
- track = viewChild.required('track', /* @ts-ignore */
32
- ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
33
- value = input([0], /* @ts-ignore */
34
- ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
35
- min = input(0, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: numberAttribute });
36
- max = input(100, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
37
- step = input(1, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: numberAttribute });
38
- minStepsBetweenThumbs = input(0, { ...(ngDevMode ? { debugName: "minStepsBetweenThumbs" } : /* istanbul ignore next */ {}), transform: numberAttribute });
39
- orientation = input('horizontal', /* @ts-ignore */
40
- ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
41
- disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
42
- thumbLabels = input(null, /* @ts-ignore */
43
- ...(ngDevMode ? [{ debugName: "thumbLabels" }] : /* istanbul ignore next */ []));
44
- ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
45
- ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
46
- ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
47
- class = input('', /* @ts-ignore */
48
- ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
49
- valueChange = output();
50
- valueState = signal([0], /* @ts-ignore */
51
- ...(ngDevMode ? [{ debugName: "valueState" }] : /* istanbul ignore next */ []));
52
- activeThumbIndex = signal(0, /* @ts-ignore */
53
- ...(ngDevMode ? [{ debugName: "activeThumbIndex" }] : /* istanbul ignore next */ []));
54
- draggedThumbIndex = signal(null, /* @ts-ignore */
55
- ...(ngDevMode ? [{ debugName: "draggedThumbIndex" }] : /* istanbul ignore next */ []));
56
- pointerId = signal(null, /* @ts-ignore */
57
- ...(ngDevMode ? [{ debugName: "pointerId" }] : /* istanbul ignore next */ []));
58
- detachDragListeners = null;
59
- config = computed(() => ({
60
- min: Math.min(this.min(), this.max()),
61
- max: Math.max(this.min(), this.max()),
62
- step: this.step() > 0 ? this.step() : 1,
63
- minStepsBetweenThumbs: Math.max(0, Math.floor(this.minStepsBetweenThumbs())),
64
- }), /* @ts-ignore */
65
- ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
66
- hostClasses = computed(() => cn('slider-root relative flex touch-none select-none', this.orientation() === 'horizontal' ? 'h-5 w-full items-center' : 'h-32 w-5 justify-center', this.disabled() ? 'opacity-50' : '', this.class()), /* @ts-ignore */
67
- ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
68
- thumbs = computed(() => {
69
- const values = this.valueState();
70
- const config = this.config();
71
- return values.map((value, index) => {
72
- const bounds = thumbBounds(values, index, config);
73
- return {
74
- index,
75
- value,
76
- position: this.positionPercent(value),
77
- min: bounds.min,
78
- max: bounds.max,
79
- label: this.thumbLabel(index, values.length),
80
- };
81
- });
82
- }, /* @ts-ignore */
83
- ...(ngDevMode ? [{ debugName: "thumbs" }] : /* istanbul ignore next */ []));
84
- rangeOffset = computed(() => {
85
- const span = this.rangeSpan();
86
- return span.start;
87
- }, /* @ts-ignore */
88
- ...(ngDevMode ? [{ debugName: "rangeOffset" }] : /* istanbul ignore next */ []));
89
- rangeSize = computed(() => {
90
- const span = this.rangeSpan();
91
- return span.end - span.start;
92
- }, /* @ts-ignore */
93
- ...(ngDevMode ? [{ debugName: "rangeSize" }] : /* istanbul ignore next */ []));
94
- syncExternalValue = effect(() => {
95
- const normalized = normalizeSliderValues(this.value(), this.config());
96
- untracked(() => {
97
- if (!sameValues(normalized, this.valueState())) {
98
- this.valueState.set(normalized);
99
- }
100
- this.activeThumbIndex.set(clampIndex(this.activeThumbIndex(), normalized.length));
101
- });
102
- }, /* @ts-ignore */
103
- ...(ngDevMode ? [{ debugName: "syncExternalValue" }] : /* istanbul ignore next */ []));
104
- constructor() {
105
- this.destroyRef.onDestroy(() => this.endDrag());
106
- }
107
- onTrackPointerDown(event) {
108
- if (this.disabled() || event.button !== 0) {
109
- return;
110
- }
111
- event.preventDefault();
112
- const nextValue = this.valueFromPointer(event);
113
- if (nextValue == null) {
114
- return;
115
- }
116
- const thumbIndex = this.closestThumbIndex(nextValue);
117
- this.activeThumbIndex.set(thumbIndex);
118
- this.updateThumbValue(thumbIndex, nextValue);
119
- this.beginDrag(event, thumbIndex);
120
- }
121
- onThumbPointerDown(event, index) {
122
- if (this.disabled() || event.button !== 0) {
123
- return;
124
- }
125
- event.preventDefault();
126
- event.stopPropagation();
127
- this.activeThumbIndex.set(index);
128
- this.beginDrag(event, index);
129
- }
130
- onThumbFocus(index) {
131
- this.activeThumbIndex.set(index);
132
- }
133
- onThumbKeydown(event, index) {
134
- if (this.disabled()) {
135
- return;
136
- }
137
- const current = this.valueState()[index];
138
- const config = this.config();
139
- const pageStep = config.step * 10;
140
- const direction = this.resolvedDirection();
141
- let nextValue = null;
142
- switch (event.key) {
143
- case 'ArrowRight':
144
- nextValue =
145
- current +
146
- (direction === 'rtl' && this.orientation() === 'horizontal' ? -config.step : config.step);
147
- break;
148
- case 'ArrowLeft':
149
- nextValue =
150
- current +
151
- (direction === 'rtl' && this.orientation() === 'horizontal' ? config.step : -config.step);
152
- break;
153
- case 'ArrowUp':
154
- nextValue = current + config.step;
155
- break;
156
- case 'ArrowDown':
157
- nextValue = current - config.step;
158
- break;
159
- case 'PageUp':
160
- nextValue = current + pageStep;
161
- break;
162
- case 'PageDown':
163
- nextValue = current - pageStep;
164
- break;
165
- case 'Home':
166
- nextValue = thumbBounds(this.valueState(), index, config).min;
167
- break;
168
- case 'End':
169
- nextValue = thumbBounds(this.valueState(), index, config).max;
170
- break;
171
- default:
172
- return;
173
- }
174
- event.preventDefault();
175
- this.activeThumbIndex.set(index);
176
- this.updateThumbValue(index, nextValue);
177
- }
178
- /**
179
- * Pointer listeners live for exactly as long as the drag does.
180
- *
181
- * Angular's listener wrapper marks the view dirty BEFORE the handler runs, so
182
- * a permanently bound `pointermove` made every pointer move anywhere on the
183
- * page dirty every slider on screen -- the pointerId guard inside the handler
184
- * came far too late to stop it.
185
- */
186
- beginDrag(event, index) {
187
- this.endDrag();
188
- this.pointerId.set(event.pointerId);
189
- this.draggedThumbIndex.set(index);
190
- this.host.nativeElement.setPointerCapture(event.pointerId);
191
- const move = (next) => this.onDragMove(next);
192
- const end = (next) => this.endDrag(next);
193
- this.document.addEventListener('pointermove', move);
194
- this.document.addEventListener('pointerup', end);
195
- this.document.addEventListener('pointercancel', end);
196
- this.detachDragListeners = () => {
197
- this.document.removeEventListener('pointermove', move);
198
- this.document.removeEventListener('pointerup', end);
199
- this.document.removeEventListener('pointercancel', end);
200
- this.detachDragListeners = null;
201
- };
202
- this.focusThumb(index);
203
- }
204
- onDragMove(event) {
205
- if (this.pointerId() !== event.pointerId) {
206
- return;
207
- }
208
- const thumbIndex = this.draggedThumbIndex();
209
- if (thumbIndex == null) {
210
- return;
211
- }
212
- const nextValue = this.valueFromPointer(event);
213
- if (nextValue == null) {
214
- return;
215
- }
216
- event.preventDefault();
217
- this.updateThumbValue(thumbIndex, nextValue);
218
- }
219
- endDrag(event) {
220
- const pointerId = event ? event.pointerId : this.pointerId();
221
- if (pointerId == null || (event && this.pointerId() !== pointerId)) {
222
- return;
223
- }
224
- const host = this.host.nativeElement;
225
- if (host.hasPointerCapture(pointerId)) {
226
- host.releasePointerCapture(pointerId);
227
- }
228
- this.detachDragListeners?.();
229
- this.draggedThumbIndex.set(null);
230
- this.pointerId.set(null);
231
- }
232
- updateThumbValue(index, rawValue) {
233
- const current = this.valueState();
234
- const bounds = thumbBounds(current, index, this.config());
235
- const nextValues = current.slice();
236
- nextValues[index] = snapWithinBounds(rawValue, bounds.min, bounds.max, this.config());
237
- if (sameValues(nextValues, current)) {
238
- return;
239
- }
240
- this.valueState.set(nextValues);
241
- this.valueChange.emit(nextValues);
242
- }
243
- valueFromPointer(event) {
244
- const track = this.track().nativeElement;
245
- const rect = track.getBoundingClientRect();
246
- const config = this.config();
247
- if (rect.width <= 0 || rect.height <= 0) {
248
- return null;
249
- }
250
- let ratio = 0;
251
- if (this.orientation() === 'horizontal') {
252
- const physicalRatio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
253
- ratio = this.resolvedDirection() === 'rtl' ? 1 - physicalRatio : physicalRatio;
254
- }
255
- else {
256
- ratio = clamp((rect.bottom - event.clientY) / rect.height, 0, 1);
257
- }
258
- return config.min + ratio * (config.max - config.min);
259
- }
260
- closestThumbIndex(nextValue) {
261
- const values = this.valueState();
262
- let bestIndex = 0;
263
- let bestDistance = Number.POSITIVE_INFINITY;
264
- values.forEach((value, index) => {
265
- const distance = Math.abs(value - nextValue);
266
- if (distance < bestDistance) {
267
- bestDistance = distance;
268
- bestIndex = index;
269
- }
270
- });
271
- return bestIndex;
272
- }
273
- rangeSpan() {
274
- const positions = this.valueState().map((value) => this.positionPercent(value));
275
- if (!positions.length) {
276
- return { start: 0, end: 0 };
277
- }
278
- if (positions.length === 1) {
279
- const minBoundary = this.positionPercent(this.config().min);
280
- return {
281
- start: Math.min(minBoundary, positions[0]),
282
- end: Math.max(minBoundary, positions[0]),
283
- };
284
- }
285
- return {
286
- start: Math.min(...positions),
287
- end: Math.max(...positions),
288
- };
289
- }
290
- positionPercent(value) {
291
- const config = this.config();
292
- const range = config.max - config.min;
293
- if (range <= 0) {
294
- return this.orientation() === 'horizontal' && this.resolvedDirection() === 'rtl' ? 100 : 0;
295
- }
296
- const logicalRatio = (value - config.min) / range;
297
- const physicalRatio = this.orientation() === 'horizontal' && this.resolvedDirection() === 'rtl'
298
- ? 1 - logicalRatio
299
- : logicalRatio;
300
- return clamp(physicalRatio * 100, 0, 100);
301
- }
302
- thumbLabel(index, count) {
303
- const labels = this.thumbLabels();
304
- if (labels?.[index]) {
305
- return labels[index] ?? null;
306
- }
307
- if (count === 1) {
308
- return this.ariaLabel();
309
- }
310
- return this.ariaLabel() ? `${this.ariaLabel()} ${index + 1}` : `Slider thumb ${index + 1}`;
311
- }
312
- focusThumb(index) {
313
- const thumb = this.host.nativeElement.querySelector(`.slider__thumb[data-index="${index}"]`);
314
- thumb?.focus();
315
- }
316
- resolvedDirection() {
317
- const host = this.host.nativeElement;
318
- if (host.dir === 'ltr' || host.dir === 'rtl') {
319
- return host.dir;
320
- }
321
- const view = this.document.defaultView;
322
- if (!view) {
323
- return 'ltr';
324
- }
325
- return view.getComputedStyle(host).direction === 'rtl' ? 'rtl' : 'ltr';
326
- }
327
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SliderRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
328
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: SliderRootComponent, isStandalone: true, selector: "Slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, 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 }, minStepsBetweenThumbs: { classPropertyName: "minStepsBetweenThumbs", publicName: "minStepsBetweenThumbs", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, thumbLabels: { classPropertyName: "thumbLabels", publicName: "thumbLabels", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "hostClasses()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-orientation": "orientation()" } }, viewQueries: [{ propertyName: "track", first: true, predicate: ["track"], descendants: true, isSignal: true }], ngImport: i0, template: `
1
+ import * as i0 from "@angular/core";
2
+ import { Component, DestroyRef, ElementRef, booleanAttribute, computed, effect, inject, input, numberAttribute, output, signal, untracked, viewChild } from "@angular/core";
3
+ import { cn } from "@ojiepermana/angular/component/utils/core";
4
+ import { DOCUMENT } from "@angular/common";
5
+ var SliderComponent = class SliderComponent {
6
+ el = inject(ElementRef);
7
+ class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
8
+ classes = computed(() => cn("Slider relative w-full appearance-none bg-transparent", "focus-visible:outline-none", "disabled:pointer-events-none disabled:opacity-50", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
9
+ focus() {
10
+ this.el.nativeElement.focus();
11
+ }
12
+ static ɵfac = i0.ɵɵngDeclareFactory({
13
+ minVersion: "12.0.0",
14
+ version: "22.2.0",
15
+ ngImport: i0,
16
+ type: SliderComponent,
17
+ deps: [],
18
+ target: i0.ɵɵFactoryTarget.Component
19
+ });
20
+ static ɵcmp = i0.ɵɵngDeclareComponent({
21
+ minVersion: "17.1.0",
22
+ version: "22.2.0",
23
+ type: SliderComponent,
24
+ isStandalone: true,
25
+ selector: "input[type=range][Slider]",
26
+ inputs: { class: {
27
+ classPropertyName: "class",
28
+ publicName: "class",
29
+ isSignal: true,
30
+ isRequired: false,
31
+ transformFunction: null
32
+ } },
33
+ host: { properties: { "class": "classes()" } },
34
+ ngImport: i0,
35
+ template: "",
36
+ isInline: true,
37
+ styles: [":host.Slider{height:calc(var(--spacing-base) * 5);cursor:pointer}:host.Slider::-webkit-slider-runnable-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-moz-range-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:calc(var(--spacing-base) * -1);width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider::-moz-range-thumb{width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.Slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"]
38
+ });
39
+ };
40
+ i0.ɵɵngDeclareClassMetadata({
41
+ minVersion: "12.0.0",
42
+ version: "22.2.0",
43
+ ngImport: i0,
44
+ type: SliderComponent,
45
+ decorators: [{
46
+ type: Component,
47
+ args: [{
48
+ selector: "input[type=range][Slider]",
49
+ host: { "[class]": "classes()" },
50
+ template: "",
51
+ styles: [":host.Slider{height:calc(var(--spacing-base) * 5);cursor:pointer}:host.Slider::-webkit-slider-runnable-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-moz-range-track{height:calc(var(--spacing-base) * 2);border-radius:var(--radius-lg);background:hsl(var(--secondary))}:host.Slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:calc(var(--spacing-base) * -1);width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider::-moz-range-thumb{width:calc(var(--spacing-base) * 4);height:calc(var(--spacing-base) * 4);border-radius:var(--radius-lg);background:hsl(var(--background));border:var(--border-width) solid hsl(var(--primary));transition:box-shadow .15s cubic-bezier(.4,0,.2,1)}:host.Slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host.Slider:disabled::-webkit-slider-thumb{cursor:not-allowed}:host.Slider:disabled::-moz-range-thumb{cursor:not-allowed}\n"]
52
+ }]
53
+ }],
54
+ propDecorators: { class: [{
55
+ type: i0.Input,
56
+ args: [{
57
+ isSignal: true,
58
+ alias: "class",
59
+ required: false
60
+ }]
61
+ }] }
62
+ });
63
+ var SliderRootComponent = class SliderRootComponent {
64
+ host = inject(ElementRef);
65
+ document = inject(DOCUMENT);
66
+ destroyRef = inject(DestroyRef);
67
+ track = viewChild.required("track", ...ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []);
68
+ value = input([0], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
69
+ min = input(0, {
70
+ ...ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {},
71
+ transform: numberAttribute
72
+ });
73
+ max = input(100, {
74
+ ...ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {},
75
+ transform: numberAttribute
76
+ });
77
+ step = input(1, {
78
+ ...ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {},
79
+ transform: numberAttribute
80
+ });
81
+ minStepsBetweenThumbs = input(0, {
82
+ ...ngDevMode ? { debugName: "minStepsBetweenThumbs" } : /* istanbul ignore next */ {},
83
+ transform: numberAttribute
84
+ });
85
+ orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
86
+ disabled = input(false, {
87
+ ...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
88
+ transform: booleanAttribute
89
+ });
90
+ thumbLabels = input(null, ...ngDevMode ? [{ debugName: "thumbLabels" }] : /* istanbul ignore next */ []);
91
+ ariaLabel = input(null, {
92
+ ...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
93
+ alias: "aria-label"
94
+ });
95
+ ariaDescribedby = input(null, {
96
+ ...ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {},
97
+ alias: "aria-describedby"
98
+ });
99
+ ariaLabelledby = input(null, {
100
+ ...ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {},
101
+ alias: "aria-labelledby"
102
+ });
103
+ class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
104
+ valueChange = output();
105
+ valueState = signal([0], ...ngDevMode ? [{ debugName: "valueState" }] : /* istanbul ignore next */ []);
106
+ activeThumbIndex = signal(0, ...ngDevMode ? [{ debugName: "activeThumbIndex" }] : /* istanbul ignore next */ []);
107
+ draggedThumbIndex = signal(null, ...ngDevMode ? [{ debugName: "draggedThumbIndex" }] : /* istanbul ignore next */ []);
108
+ pointerId = signal(null, ...ngDevMode ? [{ debugName: "pointerId" }] : /* istanbul ignore next */ []);
109
+ detachDragListeners = null;
110
+ config = computed(() => ({
111
+ min: Math.min(this.min(), this.max()),
112
+ max: Math.max(this.min(), this.max()),
113
+ step: this.step() > 0 ? this.step() : 1,
114
+ minStepsBetweenThumbs: Math.max(0, Math.floor(this.minStepsBetweenThumbs()))
115
+ }), ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
116
+ hostClasses = computed(() => cn("slider-root relative flex touch-none select-none", this.orientation() === "horizontal" ? "h-5 w-full items-center" : "h-32 w-5 justify-center", this.disabled() ? "opacity-50" : "", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
117
+ thumbs = computed(() => {
118
+ const values = this.valueState();
119
+ const config = this.config();
120
+ return values.map((value, index) => {
121
+ const bounds = thumbBounds(values, index, config);
122
+ return {
123
+ index,
124
+ value,
125
+ position: this.positionPercent(value),
126
+ min: bounds.min,
127
+ max: bounds.max,
128
+ label: this.thumbLabel(index, values.length)
129
+ };
130
+ });
131
+ }, ...ngDevMode ? [{ debugName: "thumbs" }] : /* istanbul ignore next */ []);
132
+ rangeOffset = computed(() => {
133
+ return this.rangeSpan().start;
134
+ }, ...ngDevMode ? [{ debugName: "rangeOffset" }] : /* istanbul ignore next */ []);
135
+ rangeSize = computed(() => {
136
+ const span = this.rangeSpan();
137
+ return span.end - span.start;
138
+ }, ...ngDevMode ? [{ debugName: "rangeSize" }] : /* istanbul ignore next */ []);
139
+ syncExternalValue = effect(() => {
140
+ const normalized = normalizeSliderValues(this.value(), this.config());
141
+ untracked(() => {
142
+ if (!sameValues(normalized, this.valueState())) this.valueState.set(normalized);
143
+ this.activeThumbIndex.set(clampIndex(this.activeThumbIndex(), normalized.length));
144
+ });
145
+ }, ...ngDevMode ? [{ debugName: "syncExternalValue" }] : /* istanbul ignore next */ []);
146
+ constructor() {
147
+ this.destroyRef.onDestroy(() => this.endDrag());
148
+ }
149
+ onTrackPointerDown(event) {
150
+ if (this.disabled() || event.button !== 0) return;
151
+ event.preventDefault();
152
+ const nextValue = this.valueFromPointer(event);
153
+ if (nextValue == null) return;
154
+ const thumbIndex = this.closestThumbIndex(nextValue);
155
+ this.activeThumbIndex.set(thumbIndex);
156
+ this.updateThumbValue(thumbIndex, nextValue);
157
+ this.beginDrag(event, thumbIndex);
158
+ }
159
+ onThumbPointerDown(event, index) {
160
+ if (this.disabled() || event.button !== 0) return;
161
+ event.preventDefault();
162
+ event.stopPropagation();
163
+ this.activeThumbIndex.set(index);
164
+ this.beginDrag(event, index);
165
+ }
166
+ onThumbFocus(index) {
167
+ this.activeThumbIndex.set(index);
168
+ }
169
+ onThumbKeydown(event, index) {
170
+ if (this.disabled()) return;
171
+ const current = this.valueState()[index];
172
+ const config = this.config();
173
+ const pageStep = config.step * 10;
174
+ const direction = this.resolvedDirection();
175
+ let nextValue = null;
176
+ switch (event.key) {
177
+ case "ArrowRight":
178
+ nextValue = current + (direction === "rtl" && this.orientation() === "horizontal" ? -config.step : config.step);
179
+ break;
180
+ case "ArrowLeft":
181
+ nextValue = current + (direction === "rtl" && this.orientation() === "horizontal" ? config.step : -config.step);
182
+ break;
183
+ case "ArrowUp":
184
+ nextValue = current + config.step;
185
+ break;
186
+ case "ArrowDown":
187
+ nextValue = current - config.step;
188
+ break;
189
+ case "PageUp":
190
+ nextValue = current + pageStep;
191
+ break;
192
+ case "PageDown":
193
+ nextValue = current - pageStep;
194
+ break;
195
+ case "Home":
196
+ nextValue = thumbBounds(this.valueState(), index, config).min;
197
+ break;
198
+ case "End":
199
+ nextValue = thumbBounds(this.valueState(), index, config).max;
200
+ break;
201
+ default: return;
202
+ }
203
+ event.preventDefault();
204
+ this.activeThumbIndex.set(index);
205
+ this.updateThumbValue(index, nextValue);
206
+ }
207
+ beginDrag(event, index) {
208
+ this.endDrag();
209
+ this.pointerId.set(event.pointerId);
210
+ this.draggedThumbIndex.set(index);
211
+ this.host.nativeElement.setPointerCapture(event.pointerId);
212
+ const move = (next) => this.onDragMove(next);
213
+ const end = (next) => this.endDrag(next);
214
+ this.document.addEventListener("pointermove", move);
215
+ this.document.addEventListener("pointerup", end);
216
+ this.document.addEventListener("pointercancel", end);
217
+ this.detachDragListeners = () => {
218
+ this.document.removeEventListener("pointermove", move);
219
+ this.document.removeEventListener("pointerup", end);
220
+ this.document.removeEventListener("pointercancel", end);
221
+ this.detachDragListeners = null;
222
+ };
223
+ this.focusThumb(index);
224
+ }
225
+ onDragMove(event) {
226
+ if (this.pointerId() !== event.pointerId) return;
227
+ const thumbIndex = this.draggedThumbIndex();
228
+ if (thumbIndex == null) return;
229
+ const nextValue = this.valueFromPointer(event);
230
+ if (nextValue == null) return;
231
+ event.preventDefault();
232
+ this.updateThumbValue(thumbIndex, nextValue);
233
+ }
234
+ endDrag(event) {
235
+ const pointerId = event ? event.pointerId : this.pointerId();
236
+ if (pointerId == null || event && this.pointerId() !== pointerId) return;
237
+ const host = this.host.nativeElement;
238
+ if (host.hasPointerCapture(pointerId)) host.releasePointerCapture(pointerId);
239
+ this.detachDragListeners?.();
240
+ this.draggedThumbIndex.set(null);
241
+ this.pointerId.set(null);
242
+ }
243
+ updateThumbValue(index, rawValue) {
244
+ const current = this.valueState();
245
+ const bounds = thumbBounds(current, index, this.config());
246
+ const nextValues = current.slice();
247
+ nextValues[index] = snapWithinBounds(rawValue, bounds.min, bounds.max, this.config());
248
+ if (sameValues(nextValues, current)) return;
249
+ this.valueState.set(nextValues);
250
+ this.valueChange.emit(nextValues);
251
+ }
252
+ valueFromPointer(event) {
253
+ const rect = this.track().nativeElement.getBoundingClientRect();
254
+ const config = this.config();
255
+ if (rect.width <= 0 || rect.height <= 0) return null;
256
+ let ratio = 0;
257
+ if (this.orientation() === "horizontal") {
258
+ const physicalRatio = clamp((event.clientX - rect.left) / rect.width, 0, 1);
259
+ ratio = this.resolvedDirection() === "rtl" ? 1 - physicalRatio : physicalRatio;
260
+ } else ratio = clamp((rect.bottom - event.clientY) / rect.height, 0, 1);
261
+ return config.min + ratio * (config.max - config.min);
262
+ }
263
+ closestThumbIndex(nextValue) {
264
+ const values = this.valueState();
265
+ let bestIndex = 0;
266
+ let bestDistance = Number.POSITIVE_INFINITY;
267
+ values.forEach((value, index) => {
268
+ const distance = Math.abs(value - nextValue);
269
+ if (distance < bestDistance) {
270
+ bestDistance = distance;
271
+ bestIndex = index;
272
+ }
273
+ });
274
+ return bestIndex;
275
+ }
276
+ rangeSpan() {
277
+ const positions = this.valueState().map((value) => this.positionPercent(value));
278
+ if (!positions.length) return {
279
+ start: 0,
280
+ end: 0
281
+ };
282
+ if (positions.length === 1) {
283
+ const minBoundary = this.positionPercent(this.config().min);
284
+ return {
285
+ start: Math.min(minBoundary, positions[0]),
286
+ end: Math.max(minBoundary, positions[0])
287
+ };
288
+ }
289
+ return {
290
+ start: Math.min(...positions),
291
+ end: Math.max(...positions)
292
+ };
293
+ }
294
+ positionPercent(value) {
295
+ const config = this.config();
296
+ const range = config.max - config.min;
297
+ if (range <= 0) return this.orientation() === "horizontal" && this.resolvedDirection() === "rtl" ? 100 : 0;
298
+ const logicalRatio = (value - config.min) / range;
299
+ return clamp((this.orientation() === "horizontal" && this.resolvedDirection() === "rtl" ? 1 - logicalRatio : logicalRatio) * 100, 0, 100);
300
+ }
301
+ thumbLabel(index, count) {
302
+ const labels = this.thumbLabels();
303
+ if (labels?.[index]) return labels[index] ?? null;
304
+ if (count === 1) return this.ariaLabel();
305
+ return this.ariaLabel() ? `${this.ariaLabel()} ${index + 1}` : `Slider thumb ${index + 1}`;
306
+ }
307
+ focusThumb(index) {
308
+ this.host.nativeElement.querySelector(`.slider__thumb[data-index="${index}"]`)?.focus();
309
+ }
310
+ resolvedDirection() {
311
+ const host = this.host.nativeElement;
312
+ if (host.dir === "ltr" || host.dir === "rtl") return host.dir;
313
+ const view = this.document.defaultView;
314
+ if (!view) return "ltr";
315
+ return view.getComputedStyle(host).direction === "rtl" ? "rtl" : "ltr";
316
+ }
317
+ static ɵfac = i0.ɵɵngDeclareFactory({
318
+ minVersion: "12.0.0",
319
+ version: "22.2.0",
320
+ ngImport: i0,
321
+ type: SliderRootComponent,
322
+ deps: [],
323
+ target: i0.ɵɵFactoryTarget.Component
324
+ });
325
+ static ɵcmp = i0.ɵɵngDeclareComponent({
326
+ minVersion: "17.0.0",
327
+ version: "22.2.0",
328
+ type: SliderRootComponent,
329
+ isStandalone: true,
330
+ selector: "Slider",
331
+ inputs: {
332
+ value: {
333
+ classPropertyName: "value",
334
+ publicName: "value",
335
+ isSignal: true,
336
+ isRequired: false,
337
+ transformFunction: null
338
+ },
339
+ min: {
340
+ classPropertyName: "min",
341
+ publicName: "min",
342
+ isSignal: true,
343
+ isRequired: false,
344
+ transformFunction: null
345
+ },
346
+ max: {
347
+ classPropertyName: "max",
348
+ publicName: "max",
349
+ isSignal: true,
350
+ isRequired: false,
351
+ transformFunction: null
352
+ },
353
+ step: {
354
+ classPropertyName: "step",
355
+ publicName: "step",
356
+ isSignal: true,
357
+ isRequired: false,
358
+ transformFunction: null
359
+ },
360
+ minStepsBetweenThumbs: {
361
+ classPropertyName: "minStepsBetweenThumbs",
362
+ publicName: "minStepsBetweenThumbs",
363
+ isSignal: true,
364
+ isRequired: false,
365
+ transformFunction: null
366
+ },
367
+ orientation: {
368
+ classPropertyName: "orientation",
369
+ publicName: "orientation",
370
+ isSignal: true,
371
+ isRequired: false,
372
+ transformFunction: null
373
+ },
374
+ disabled: {
375
+ classPropertyName: "disabled",
376
+ publicName: "disabled",
377
+ isSignal: true,
378
+ isRequired: false,
379
+ transformFunction: null
380
+ },
381
+ thumbLabels: {
382
+ classPropertyName: "thumbLabels",
383
+ publicName: "thumbLabels",
384
+ isSignal: true,
385
+ isRequired: false,
386
+ transformFunction: null
387
+ },
388
+ ariaLabel: {
389
+ classPropertyName: "ariaLabel",
390
+ publicName: "aria-label",
391
+ isSignal: true,
392
+ isRequired: false,
393
+ transformFunction: null
394
+ },
395
+ ariaDescribedby: {
396
+ classPropertyName: "ariaDescribedby",
397
+ publicName: "aria-describedby",
398
+ isSignal: true,
399
+ isRequired: false,
400
+ transformFunction: null
401
+ },
402
+ ariaLabelledby: {
403
+ classPropertyName: "ariaLabelledby",
404
+ publicName: "aria-labelledby",
405
+ isSignal: true,
406
+ isRequired: false,
407
+ transformFunction: null
408
+ },
409
+ class: {
410
+ classPropertyName: "class",
411
+ publicName: "class",
412
+ isSignal: true,
413
+ isRequired: false,
414
+ transformFunction: null
415
+ }
416
+ },
417
+ outputs: { valueChange: "valueChange" },
418
+ host: { properties: {
419
+ "class": "hostClasses()",
420
+ "attr.data-disabled": "disabled() ? \"\" : null",
421
+ "attr.data-orientation": "orientation()"
422
+ } },
423
+ viewQueries: [{
424
+ propertyName: "track",
425
+ first: true,
426
+ predicate: ["track"],
427
+ descendants: true,
428
+ isSignal: true
429
+ }],
430
+ ngImport: i0,
431
+ template: `
329
432
  <div #track class="slider__track" (pointerdown)="onTrackPointerDown($event)">
330
433
  <div
331
434
  class="slider__range"
@@ -360,15 +463,26 @@ class SliderRootComponent {
360
463
  ></button>
361
464
  }
362
465
  </div>
363
- `, isInline: true, styles: [":host.slider-root{--slider-thumb-size: 1rem;--slider-track-size: .5rem;display:block}.slider__track{position:relative;flex:1 1 auto;border-radius:9999px;background:hsl(var(--secondary))}:host[data-orientation=horizontal] .slider__track{height:var(--slider-track-size);width:100%}:host[data-orientation=vertical] .slider__track{height:100%;width:var(--slider-track-size)}.slider__range{position:absolute;border-radius:inherit;background:hsl(var(--primary))}:host[data-orientation=horizontal] .slider__range{top:0;height:100%}:host[data-orientation=vertical] .slider__range{left:0;width:100%}.slider__thumb{position:absolute;height:var(--slider-thumb-size);width:var(--slider-thumb-size);border:var(--border-width) solid hsl(var(--primary));border-radius:9999px;background:hsl(var(--background));box-shadow:0 1px 2px hsl(var(--foreground) / .14);transition:box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}:host[data-orientation=horizontal] .slider__thumb{transform:translate(-50%,-50%)}:host[data-orientation=vertical] .slider__thumb{transform:translate(-50%,50%)}.slider__thumb:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host[data-disabled] .slider__track,:host[data-disabled] .slider__thumb{cursor:not-allowed}\n"] });
364
- }
365
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SliderRootComponent, decorators: [{
366
- type: Component,
367
- args: [{ selector: 'Slider', host: {
368
- '[class]': 'hostClasses()',
369
- '[attr.data-disabled]': 'disabled() ? "" : null',
370
- '[attr.data-orientation]': 'orientation()',
371
- }, template: `
466
+ `,
467
+ isInline: true,
468
+ styles: [":host.slider-root{--slider-thumb-size: 1rem;--slider-track-size: .5rem;display:block}.slider__track{position:relative;flex:1 1 auto;border-radius:9999px;background:hsl(var(--secondary))}:host[data-orientation=horizontal] .slider__track{height:var(--slider-track-size);width:100%}:host[data-orientation=vertical] .slider__track{height:100%;width:var(--slider-track-size)}.slider__range{position:absolute;border-radius:inherit;background:hsl(var(--primary))}:host[data-orientation=horizontal] .slider__range{top:0;height:100%}:host[data-orientation=vertical] .slider__range{left:0;width:100%}.slider__thumb{position:absolute;height:var(--slider-thumb-size);width:var(--slider-thumb-size);border:var(--border-width) solid hsl(var(--primary));border-radius:9999px;background:hsl(var(--background));box-shadow:0 1px 2px hsl(var(--foreground) / .14);transition:box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}:host[data-orientation=horizontal] .slider__thumb{transform:translate(-50%,-50%)}:host[data-orientation=vertical] .slider__thumb{transform:translate(-50%,50%)}.slider__thumb:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host[data-disabled] .slider__track,:host[data-disabled] .slider__thumb{cursor:not-allowed}\n"]
469
+ });
470
+ };
471
+ i0.ɵɵngDeclareClassMetadata({
472
+ minVersion: "12.0.0",
473
+ version: "22.2.0",
474
+ ngImport: i0,
475
+ type: SliderRootComponent,
476
+ decorators: [{
477
+ type: Component,
478
+ args: [{
479
+ selector: "Slider",
480
+ host: {
481
+ "[class]": "hostClasses()",
482
+ "[attr.data-disabled]": "disabled() ? \"\" : null",
483
+ "[attr.data-orientation]": "orientation()"
484
+ },
485
+ template: `
372
486
  <div #track class="slider__track" (pointerdown)="onTrackPointerDown($event)">
373
487
  <div
374
488
  class="slider__range"
@@ -403,58 +517,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
403
517
  ></button>
404
518
  }
405
519
  </div>
406
- `, styles: [":host.slider-root{--slider-thumb-size: 1rem;--slider-track-size: .5rem;display:block}.slider__track{position:relative;flex:1 1 auto;border-radius:9999px;background:hsl(var(--secondary))}:host[data-orientation=horizontal] .slider__track{height:var(--slider-track-size);width:100%}:host[data-orientation=vertical] .slider__track{height:100%;width:var(--slider-track-size)}.slider__range{position:absolute;border-radius:inherit;background:hsl(var(--primary))}:host[data-orientation=horizontal] .slider__range{top:0;height:100%}:host[data-orientation=vertical] .slider__range{left:0;width:100%}.slider__thumb{position:absolute;height:var(--slider-thumb-size);width:var(--slider-thumb-size);border:var(--border-width) solid hsl(var(--primary));border-radius:9999px;background:hsl(var(--background));box-shadow:0 1px 2px hsl(var(--foreground) / .14);transition:box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}:host[data-orientation=horizontal] .slider__thumb{transform:translate(-50%,-50%)}:host[data-orientation=vertical] .slider__thumb{transform:translate(-50%,50%)}.slider__thumb:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host[data-disabled] .slider__track,:host[data-disabled] .slider__thumb{cursor:not-allowed}\n"] }]
407
- }], ctorParameters: () => [], propDecorators: { track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], 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 }] }], minStepsBetweenThumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "minStepsBetweenThumbs", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], thumbLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbLabels", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
520
+ `,
521
+ styles: [":host.slider-root{--slider-thumb-size: 1rem;--slider-track-size: .5rem;display:block}.slider__track{position:relative;flex:1 1 auto;border-radius:9999px;background:hsl(var(--secondary))}:host[data-orientation=horizontal] .slider__track{height:var(--slider-track-size);width:100%}:host[data-orientation=vertical] .slider__track{height:100%;width:var(--slider-track-size)}.slider__range{position:absolute;border-radius:inherit;background:hsl(var(--primary))}:host[data-orientation=horizontal] .slider__range{top:0;height:100%}:host[data-orientation=vertical] .slider__range{left:0;width:100%}.slider__thumb{position:absolute;height:var(--slider-thumb-size);width:var(--slider-thumb-size);border:var(--border-width) solid hsl(var(--primary));border-radius:9999px;background:hsl(var(--background));box-shadow:0 1px 2px hsl(var(--foreground) / .14);transition:box-shadow .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}:host[data-orientation=horizontal] .slider__thumb{transform:translate(-50%,-50%)}:host[data-orientation=vertical] .slider__thumb{transform:translate(-50%,50%)}.slider__thumb:focus-visible{outline:none;box-shadow:0 0 0 calc(var(--border-width) + 3px) hsl(var(--ring) / .3)}:host[data-disabled] .slider__track,:host[data-disabled] .slider__thumb{cursor:not-allowed}\n"]
522
+ }]
523
+ }],
524
+ ctorParameters: () => [],
525
+ propDecorators: {
526
+ track: [{
527
+ type: i0.ViewChild,
528
+ args: ["track", { isSignal: true }]
529
+ }],
530
+ value: [{
531
+ type: i0.Input,
532
+ args: [{
533
+ isSignal: true,
534
+ alias: "value",
535
+ required: false
536
+ }]
537
+ }],
538
+ min: [{
539
+ type: i0.Input,
540
+ args: [{
541
+ isSignal: true,
542
+ alias: "min",
543
+ required: false
544
+ }]
545
+ }],
546
+ max: [{
547
+ type: i0.Input,
548
+ args: [{
549
+ isSignal: true,
550
+ alias: "max",
551
+ required: false
552
+ }]
553
+ }],
554
+ step: [{
555
+ type: i0.Input,
556
+ args: [{
557
+ isSignal: true,
558
+ alias: "step",
559
+ required: false
560
+ }]
561
+ }],
562
+ minStepsBetweenThumbs: [{
563
+ type: i0.Input,
564
+ args: [{
565
+ isSignal: true,
566
+ alias: "minStepsBetweenThumbs",
567
+ required: false
568
+ }]
569
+ }],
570
+ orientation: [{
571
+ type: i0.Input,
572
+ args: [{
573
+ isSignal: true,
574
+ alias: "orientation",
575
+ required: false
576
+ }]
577
+ }],
578
+ disabled: [{
579
+ type: i0.Input,
580
+ args: [{
581
+ isSignal: true,
582
+ alias: "disabled",
583
+ required: false
584
+ }]
585
+ }],
586
+ thumbLabels: [{
587
+ type: i0.Input,
588
+ args: [{
589
+ isSignal: true,
590
+ alias: "thumbLabels",
591
+ required: false
592
+ }]
593
+ }],
594
+ ariaLabel: [{
595
+ type: i0.Input,
596
+ args: [{
597
+ isSignal: true,
598
+ alias: "aria-label",
599
+ required: false
600
+ }]
601
+ }],
602
+ ariaDescribedby: [{
603
+ type: i0.Input,
604
+ args: [{
605
+ isSignal: true,
606
+ alias: "aria-describedby",
607
+ required: false
608
+ }]
609
+ }],
610
+ ariaLabelledby: [{
611
+ type: i0.Input,
612
+ args: [{
613
+ isSignal: true,
614
+ alias: "aria-labelledby",
615
+ required: false
616
+ }]
617
+ }],
618
+ class: [{
619
+ type: i0.Input,
620
+ args: [{
621
+ isSignal: true,
622
+ alias: "class",
623
+ required: false
624
+ }]
625
+ }],
626
+ valueChange: [{
627
+ type: i0.Output,
628
+ args: ["valueChange"]
629
+ }]
630
+ }
631
+ });
408
632
  function clamp(value, min, max) {
409
- return Math.min(Math.max(value, min), max);
633
+ return Math.min(Math.max(value, min), max);
410
634
  }
411
635
  function clampIndex(index, length) {
412
- return clamp(index, 0, Math.max(length - 1, 0));
636
+ return clamp(index, 0, Math.max(length - 1, 0));
413
637
  }
414
638
  function decimalPlaces(value) {
415
- const text = `${value}`;
416
- const fraction = text.split('.')[1];
417
- return fraction?.length ?? 0;
639
+ return `${value}`.split(".")[1]?.length ?? 0;
418
640
  }
419
641
  function normalizeSliderValues(values, config) {
420
- const incoming = values.length ? [...values] : [config.min];
421
- const sorted = incoming
422
- .map((value) => snapToStep(value, config))
423
- .sort((left, right) => left - right);
424
- const gap = config.step * config.minStepsBetweenThumbs;
425
- const normalized = [];
426
- sorted.forEach((value, index) => {
427
- const remaining = sorted.length - index - 1;
428
- const min = index === 0 ? config.min : normalized[index - 1] + gap;
429
- const max = Math.max(min, config.max - remaining * gap);
430
- normalized.push(snapWithinBounds(value, min, max, config));
431
- });
432
- return normalized;
642
+ const sorted = (values.length ? [...values] : [config.min]).map((value) => snapToStep(value, config)).sort((left, right) => left - right);
643
+ const gap = config.step * config.minStepsBetweenThumbs;
644
+ const normalized = [];
645
+ sorted.forEach((value, index) => {
646
+ const remaining = sorted.length - index - 1;
647
+ const min = index === 0 ? config.min : normalized[index - 1] + gap;
648
+ const max = Math.max(min, config.max - remaining * gap);
649
+ normalized.push(snapWithinBounds(value, min, max, config));
650
+ });
651
+ return normalized;
433
652
  }
434
653
  function sameValues(left, right) {
435
- return left.length === right.length && left.every((value, index) => value === right[index]);
654
+ return left.length === right.length && left.every((value, index) => value === right[index]);
436
655
  }
437
656
  function snapToStep(value, config) {
438
- const ratio = (value - config.min) / config.step;
439
- const snapped = config.min + Math.round(ratio) * config.step;
440
- const precision = Math.max(decimalPlaces(config.step), decimalPlaces(config.min));
441
- return Number(snapped.toFixed(precision));
657
+ const ratio = (value - config.min) / config.step;
658
+ const snapped = config.min + Math.round(ratio) * config.step;
659
+ const precision = Math.max(decimalPlaces(config.step), decimalPlaces(config.min));
660
+ return Number(snapped.toFixed(precision));
442
661
  }
443
662
  function snapWithinBounds(value, min, max, config) {
444
- const boundedMin = Math.min(min, max);
445
- const boundedMax = Math.max(min, max);
446
- const snapped = snapToStep(value, config);
447
- return clamp(snapped, boundedMin, boundedMax);
663
+ const boundedMin = Math.min(min, max);
664
+ const boundedMax = Math.max(min, max);
665
+ return clamp(snapToStep(value, config), boundedMin, boundedMax);
448
666
  }
449
667
  function thumbBounds(values, index, config) {
450
- const gap = config.step * config.minStepsBetweenThumbs;
451
- const min = index === 0 ? config.min : values[index - 1] + gap;
452
- const max = index === values.length - 1 ? config.max : values[index + 1] - gap;
453
- return { min: Math.min(min, max), max: Math.max(min, max) };
668
+ const gap = config.step * config.minStepsBetweenThumbs;
669
+ const min = index === 0 ? config.min : values[index - 1] + gap;
670
+ const max = index === values.length - 1 ? config.max : values[index + 1] - gap;
671
+ return {
672
+ min: Math.min(min, max),
673
+ max: Math.max(min, max)
674
+ };
454
675
  }
455
-
456
- /**
457
- * Generated bundle index. Do not edit.
458
- */
459
-
460
- export { SliderComponent, SliderComponent as SliderInputDirective, SliderRootComponent };
676
+ export { SliderComponent, SliderComponent as SliderInputDirective, SliderRootComponent };