igniteui-webcomponents 1.0.0 → 2.0.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 (295) hide show
  1. package/CHANGELOG.md +45 -1
  2. package/README.md +17 -1
  3. package/components/avatar/avatar.d.ts +19 -3
  4. package/components/avatar/avatar.js.map +1 -1
  5. package/components/avatar/avatar.material.css.d.ts +0 -1
  6. package/components/avatar/avatar.material.css.js +1 -1
  7. package/components/avatar/avatar.material.css.js.map +1 -1
  8. package/components/badge/badge.d.ts +17 -5
  9. package/components/badge/badge.js.map +1 -1
  10. package/components/badge/badge.material.css.d.ts +0 -1
  11. package/components/badge/badge.material.css.js +1 -1
  12. package/components/badge/badge.material.css.js.map +1 -1
  13. package/components/button/button-base.d.ts +18 -1
  14. package/components/button/button-base.js +16 -0
  15. package/components/button/button-base.js.map +1 -1
  16. package/components/button/button.d.ts +20 -3
  17. package/components/button/button.js.map +1 -1
  18. package/components/button/button.material.css.d.ts +0 -1
  19. package/components/button/button.material.css.js +1 -1
  20. package/components/button/button.material.css.js.map +1 -1
  21. package/components/button/icon-button.d.ts +14 -3
  22. package/components/button/icon-button.js +15 -1
  23. package/components/button/icon-button.js.map +1 -1
  24. package/components/button/icon-button.material.css.d.ts +0 -1
  25. package/components/button/icon-button.material.css.js +1 -1
  26. package/components/button/icon-button.material.css.js.map +1 -1
  27. package/components/calendar/calendar.d.ts +39 -4
  28. package/components/calendar/calendar.js +34 -12
  29. package/components/calendar/calendar.js.map +1 -1
  30. package/components/calendar/calendar.material.css.d.ts +0 -1
  31. package/components/calendar/calendar.material.css.js +1 -1
  32. package/components/calendar/calendar.material.css.js.map +1 -1
  33. package/components/calendar/common/calendar-base.d.ts +17 -2
  34. package/components/calendar/common/calendar-base.js +28 -4
  35. package/components/calendar/common/calendar-base.js.map +1 -1
  36. package/components/calendar/common/calendar.model.d.ts +57 -1
  37. package/components/calendar/common/utils.d.ts +0 -1
  38. package/components/calendar/days-view/days-view.d.ts +23 -3
  39. package/components/calendar/days-view/days-view.js +38 -35
  40. package/components/calendar/days-view/days-view.js.map +1 -1
  41. package/components/calendar/days-view/days-view.material.css.d.ts +0 -1
  42. package/components/calendar/days-view/days-view.material.css.js +1 -1
  43. package/components/calendar/days-view/days-view.material.css.js.map +1 -1
  44. package/components/calendar/months-view/months-view.d.ts +15 -3
  45. package/components/calendar/months-view/months-view.js +4 -2
  46. package/components/calendar/months-view/months-view.js.map +1 -1
  47. package/components/calendar/months-view/months-view.material.css.d.ts +0 -1
  48. package/components/calendar/years-view/years-view.d.ts +13 -2
  49. package/components/calendar/years-view/years-view.js +4 -2
  50. package/components/calendar/years-view/years-view.js.map +1 -1
  51. package/components/calendar/years-view/years-view.material.css.d.ts +0 -1
  52. package/components/card/card.actions.d.ts +9 -3
  53. package/components/card/card.actions.js.map +1 -1
  54. package/components/card/card.actions.material.css.d.ts +0 -1
  55. package/components/card/card.actions.material.css.js +1 -1
  56. package/components/card/card.actions.material.css.js.map +1 -1
  57. package/components/card/card.content.d.ts +7 -3
  58. package/components/card/card.content.js.map +1 -1
  59. package/components/card/card.content.material.css.d.ts +0 -1
  60. package/components/card/card.content.material.css.js +1 -1
  61. package/components/card/card.content.material.css.js.map +1 -1
  62. package/components/card/card.d.ts +9 -4
  63. package/components/card/card.header.d.ts +12 -3
  64. package/components/card/card.header.js.map +1 -1
  65. package/components/card/card.header.material.css.d.ts +0 -1
  66. package/components/card/card.header.material.css.js +1 -1
  67. package/components/card/card.header.material.css.js.map +1 -1
  68. package/components/card/card.js +2 -2
  69. package/components/card/card.js.map +1 -1
  70. package/components/card/card.material.css.d.ts +0 -1
  71. package/components/card/card.material.css.js +1 -1
  72. package/components/card/card.material.css.js.map +1 -1
  73. package/components/card/card.media.d.ts +7 -3
  74. package/components/card/card.media.js.map +1 -1
  75. package/components/card/card.media.material.css.d.ts +0 -1
  76. package/components/card/card.media.material.css.js +1 -1
  77. package/components/card/card.media.material.css.js.map +1 -1
  78. package/components/checkbox/checkbox-base.d.ts +16 -1
  79. package/components/checkbox/checkbox-base.js.map +1 -1
  80. package/components/checkbox/checkbox.d.ts +20 -4
  81. package/components/checkbox/checkbox.js +25 -27
  82. package/components/checkbox/checkbox.js.map +1 -1
  83. package/components/checkbox/checkbox.material.css.d.ts +0 -1
  84. package/components/checkbox/checkbox.material.css.js +1 -1
  85. package/components/checkbox/checkbox.material.css.js.map +1 -1
  86. package/components/checkbox/switch.d.ts +18 -3
  87. package/components/checkbox/switch.js +17 -18
  88. package/components/checkbox/switch.js.map +1 -1
  89. package/components/checkbox/switch.material.css.d.ts +0 -1
  90. package/components/checkbox/switch.material.css.js +1 -1
  91. package/components/checkbox/switch.material.css.js.map +1 -1
  92. package/components/common/decorators/alternateName.d.ts +6 -1
  93. package/components/common/decorators/blazorInclude.d.ts +4 -1
  94. package/components/common/decorators/blazorIndirectRender.d.ts +4 -0
  95. package/components/common/decorators/blazorIndirectRender.js +2 -0
  96. package/components/common/decorators/blazorIndirectRender.js.map +1 -0
  97. package/components/common/decorators/blazorSuppress.d.ts +4 -1
  98. package/components/common/decorators/blazorSuppressComponent.d.ts +4 -0
  99. package/components/common/decorators/blazorSuppressComponent.js +2 -0
  100. package/components/common/decorators/blazorSuppressComponent.js.map +1 -0
  101. package/components/common/decorators/blazorTwoWayBind.d.ts +6 -1
  102. package/components/common/decorators/index.d.ts +2 -1
  103. package/components/common/decorators/index.js +2 -0
  104. package/components/common/decorators/index.js.map +1 -1
  105. package/components/common/decorators/watch.d.ts +0 -1
  106. package/components/common/definitions/defineAllComponents.d.ts +0 -1
  107. package/components/common/definitions/defineAllComponents.js +6 -0
  108. package/components/common/definitions/defineAllComponents.js.map +1 -1
  109. package/components/common/definitions/defineComponents.d.ts +0 -1
  110. package/components/common/i18n/calendar.resources.d.ts +0 -1
  111. package/components/common/mixins/constructor.d.ts +0 -1
  112. package/components/common/mixins/event-emitter.d.ts +0 -1
  113. package/components/common/mixins/event-emitter.js.map +1 -1
  114. package/components/common/mixins/sizable.d.ts +4 -1
  115. package/components/common/util.d.ts +0 -1
  116. package/components/form/form.d.ts +18 -3
  117. package/components/form/form.js +4 -1
  118. package/components/form/form.js.map +1 -1
  119. package/components/icon/icon.d.ts +23 -3
  120. package/components/icon/icon.js.map +1 -1
  121. package/components/icon/icon.material.css.d.ts +0 -1
  122. package/components/icon/icon.material.css.js +1 -1
  123. package/components/icon/icon.material.css.js.map +1 -1
  124. package/components/icon/icon.registry.d.ts +0 -1
  125. package/components/input/input.d.ts +54 -3
  126. package/components/input/input.dark.material.css.d.ts +1 -0
  127. package/components/input/input.dark.material.css.js +3 -0
  128. package/components/input/input.dark.material.css.js.map +1 -0
  129. package/components/input/input.js +3 -3
  130. package/components/input/input.js.map +1 -1
  131. package/components/input/input.material.css.d.ts +0 -1
  132. package/components/input/input.material.css.js +1 -1
  133. package/components/input/input.material.css.js.map +1 -1
  134. package/components/list/list-header.d.ts +9 -3
  135. package/components/list/list-header.js.map +1 -1
  136. package/components/list/list-header.material.css.d.ts +0 -1
  137. package/components/list/list-header.material.css.js +1 -1
  138. package/components/list/list-header.material.css.js.map +1 -1
  139. package/components/list/list-item.d.ts +21 -3
  140. package/components/list/list-item.js.map +1 -1
  141. package/components/list/list-item.material.css.d.ts +0 -1
  142. package/components/list/list-item.material.css.js +1 -1
  143. package/components/list/list-item.material.css.js.map +1 -1
  144. package/components/list/list.d.ts +9 -3
  145. package/components/list/list.js.map +1 -1
  146. package/components/list/list.material.css.d.ts +0 -1
  147. package/components/list/list.material.css.js +1 -1
  148. package/components/list/list.material.css.js.map +1 -1
  149. package/components/nav-drawer/nav-drawer-header-item.d.ts +8 -3
  150. package/components/nav-drawer/nav-drawer-header-item.js.map +1 -1
  151. package/components/nav-drawer/nav-drawer-header-item.material.css.d.ts +0 -1
  152. package/components/nav-drawer/nav-drawer-header-item.material.css.js +1 -1
  153. package/components/nav-drawer/nav-drawer-header-item.material.css.js.map +1 -1
  154. package/components/nav-drawer/nav-drawer-item.d.ts +16 -3
  155. package/components/nav-drawer/nav-drawer-item.js +2 -2
  156. package/components/nav-drawer/nav-drawer-item.js.map +1 -1
  157. package/components/nav-drawer/nav-drawer-item.material.css.d.ts +0 -1
  158. package/components/nav-drawer/nav-drawer-item.material.css.js +1 -1
  159. package/components/nav-drawer/nav-drawer-item.material.css.js.map +1 -1
  160. package/components/nav-drawer/nav-drawer.d.ts +21 -15
  161. package/components/nav-drawer/nav-drawer.js +1 -34
  162. package/components/nav-drawer/nav-drawer.js.map +1 -1
  163. package/components/nav-drawer/nav-drawer.material.css.d.ts +0 -1
  164. package/components/nav-drawer/nav-drawer.material.css.js +1 -1
  165. package/components/nav-drawer/nav-drawer.material.css.js.map +1 -1
  166. package/components/navbar/navbar.d.ts +17 -3
  167. package/components/navbar/navbar.js.map +1 -1
  168. package/components/navbar/navbar.material.css.d.ts +0 -1
  169. package/components/navbar/navbar.material.css.js +1 -1
  170. package/components/navbar/navbar.material.css.js.map +1 -1
  171. package/components/radio/radio.d.ts +33 -3
  172. package/components/radio/radio.js +15 -1
  173. package/components/radio/radio.js.map +1 -1
  174. package/components/radio/radio.material.css.d.ts +0 -1
  175. package/components/radio/radio.material.css.js +1 -1
  176. package/components/radio/radio.material.css.js.map +1 -1
  177. package/components/radio-group/radio-group.d.ts +4 -5
  178. package/components/radio-group/radio-group.js +21 -7
  179. package/components/radio-group/radio-group.js.map +1 -1
  180. package/components/radio-group/radio-group.material.css.d.ts +0 -1
  181. package/components/radio-group/radio-group.material.css.js +1 -1
  182. package/components/radio-group/radio-group.material.css.js.map +1 -1
  183. package/components/ripple/ripple.d.ts +8 -3
  184. package/components/ripple/ripple.js.map +1 -1
  185. package/components/ripple/ripple.material.css.d.ts +0 -1
  186. package/components/ripple/ripple.material.css.js +1 -1
  187. package/components/ripple/ripple.material.css.js.map +1 -1
  188. package/components/slider/range-slider.d.ts +85 -0
  189. package/components/slider/range-slider.js +141 -0
  190. package/components/slider/range-slider.js.map +1 -0
  191. package/components/slider/slider-base.d.ts +131 -0
  192. package/components/slider/slider-base.js +503 -0
  193. package/components/slider/slider-base.js.map +1 -0
  194. package/components/slider/slider-label.d.ts +6 -0
  195. package/components/slider/slider-label.js +13 -0
  196. package/components/slider/slider-label.js.map +1 -0
  197. package/components/slider/slider.d.ts +76 -0
  198. package/components/slider/slider.js +80 -0
  199. package/components/slider/slider.js.map +1 -0
  200. package/components/slider/slider.material.css.d.ts +1 -0
  201. package/components/slider/slider.material.css.js +3 -0
  202. package/components/slider/slider.material.css.js.map +1 -0
  203. package/custom-elements.json +1017 -45
  204. package/index.d.ts +5 -1
  205. package/index.js +4 -0
  206. package/index.js.map +1 -1
  207. package/package.json +5 -4
  208. package/themes/dark/bootstrap.css +1 -0
  209. package/themes/dark/fluent.css +1 -0
  210. package/themes/dark/indigo.css +1 -0
  211. package/themes/dark/material.css +1 -0
  212. package/themes/light/bootstrap.css +1 -0
  213. package/themes/light/fluent.css +1 -0
  214. package/themes/light/indigo.css +1 -0
  215. package/themes/light/material.css +1 -0
  216. package/vscode-html-custom-data.json +313 -56
  217. package/components/avatar/avatar.d.ts.map +0 -1
  218. package/components/avatar/avatar.material.css.d.ts.map +0 -1
  219. package/components/badge/badge.d.ts.map +0 -1
  220. package/components/badge/badge.material.css.d.ts.map +0 -1
  221. package/components/button/button-base.d.ts.map +0 -1
  222. package/components/button/button.d.ts.map +0 -1
  223. package/components/button/button.material.css.d.ts.map +0 -1
  224. package/components/button/icon-button.d.ts.map +0 -1
  225. package/components/button/icon-button.material.css.d.ts.map +0 -1
  226. package/components/calendar/calendar.d.ts.map +0 -1
  227. package/components/calendar/calendar.material.css.d.ts.map +0 -1
  228. package/components/calendar/common/calendar-base.d.ts.map +0 -1
  229. package/components/calendar/common/calendar.model.d.ts.map +0 -1
  230. package/components/calendar/common/utils.d.ts.map +0 -1
  231. package/components/calendar/days-view/days-view.d.ts.map +0 -1
  232. package/components/calendar/days-view/days-view.material.css.d.ts.map +0 -1
  233. package/components/calendar/months-view/months-view.d.ts.map +0 -1
  234. package/components/calendar/months-view/months-view.material.css.d.ts.map +0 -1
  235. package/components/calendar/years-view/years-view.d.ts.map +0 -1
  236. package/components/calendar/years-view/years-view.material.css.d.ts.map +0 -1
  237. package/components/card/card.actions.d.ts.map +0 -1
  238. package/components/card/card.actions.material.css.d.ts.map +0 -1
  239. package/components/card/card.content.d.ts.map +0 -1
  240. package/components/card/card.content.material.css.d.ts.map +0 -1
  241. package/components/card/card.d.ts.map +0 -1
  242. package/components/card/card.header.d.ts.map +0 -1
  243. package/components/card/card.header.material.css.d.ts.map +0 -1
  244. package/components/card/card.material.css.d.ts.map +0 -1
  245. package/components/card/card.media.d.ts.map +0 -1
  246. package/components/card/card.media.material.css.d.ts.map +0 -1
  247. package/components/checkbox/checkbox-base.d.ts.map +0 -1
  248. package/components/checkbox/checkbox.d.ts.map +0 -1
  249. package/components/checkbox/checkbox.material.css.d.ts.map +0 -1
  250. package/components/checkbox/switch.d.ts.map +0 -1
  251. package/components/checkbox/switch.material.css.d.ts.map +0 -1
  252. package/components/common/decorators/alternateName.d.ts.map +0 -1
  253. package/components/common/decorators/blazorInclude.d.ts.map +0 -1
  254. package/components/common/decorators/blazorSuppress.d.ts.map +0 -1
  255. package/components/common/decorators/blazorTwoWayBind.d.ts.map +0 -1
  256. package/components/common/decorators/index.d.ts.map +0 -1
  257. package/components/common/decorators/watch.d.ts.map +0 -1
  258. package/components/common/definitions/defineAllComponents.d.ts.map +0 -1
  259. package/components/common/definitions/defineComponents.d.ts.map +0 -1
  260. package/components/common/i18n/calendar.resources.d.ts.map +0 -1
  261. package/components/common/mixins/constructor.d.ts.map +0 -1
  262. package/components/common/mixins/event-emitter.d.ts.map +0 -1
  263. package/components/common/mixins/sizable.d.ts.map +0 -1
  264. package/components/common/util.d.ts.map +0 -1
  265. package/components/form/form.d.ts.map +0 -1
  266. package/components/icon/icon.d.ts.map +0 -1
  267. package/components/icon/icon.material.css.d.ts.map +0 -1
  268. package/components/icon/icon.registry.d.ts.map +0 -1
  269. package/components/input/input.d.ts.map +0 -1
  270. package/components/input/input.material.css.d.ts.map +0 -1
  271. package/components/list/list-header.d.ts.map +0 -1
  272. package/components/list/list-header.material.css.d.ts.map +0 -1
  273. package/components/list/list-item.d.ts.map +0 -1
  274. package/components/list/list-item.material.css.d.ts.map +0 -1
  275. package/components/list/list.d.ts.map +0 -1
  276. package/components/list/list.material.css.d.ts.map +0 -1
  277. package/components/nav-drawer/nav-drawer-header-item.d.ts.map +0 -1
  278. package/components/nav-drawer/nav-drawer-header-item.material.css.d.ts.map +0 -1
  279. package/components/nav-drawer/nav-drawer-item.d.ts.map +0 -1
  280. package/components/nav-drawer/nav-drawer-item.material.css.d.ts.map +0 -1
  281. package/components/nav-drawer/nav-drawer.d.ts.map +0 -1
  282. package/components/nav-drawer/nav-drawer.material.css.d.ts.map +0 -1
  283. package/components/navbar/navbar.d.ts.map +0 -1
  284. package/components/navbar/navbar.material.css.d.ts.map +0 -1
  285. package/components/radio/radio.d.ts.map +0 -1
  286. package/components/radio/radio.material.css.d.ts.map +0 -1
  287. package/components/radio-group/radio-group.d.ts.map +0 -1
  288. package/components/radio-group/radio-group.material.css.d.ts.map +0 -1
  289. package/components/ripple/ripple.d.ts.map +0 -1
  290. package/components/ripple/ripple.material.css.d.ts.map +0 -1
  291. package/index.d.ts.map +0 -1
  292. package/themes/bootstrap.css +0 -1
  293. package/themes/fluent.css +0 -1
  294. package/themes/indigo.css +0 -1
  295. package/themes/material.css +0 -1
@@ -0,0 +1,503 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { html, LitElement } from 'lit';
8
+ import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
9
+ import { ifDefined } from 'lit/directives/if-defined.js';
10
+ import { styleMap } from 'lit/directives/style-map.js';
11
+ import { watch } from '../common/decorators';
12
+ import { styles } from './slider.material.css';
13
+ export class IgcSliderBaseComponent extends LitElement {
14
+ constructor() {
15
+ super();
16
+ this._min = 0;
17
+ this._max = 100;
18
+ this._step = 1;
19
+ this.pointerCaptured = false;
20
+ this.thumbLabelsVisible = false;
21
+ this.disabled = false;
22
+ this.discreteTrack = false;
23
+ this.hideTooltip = false;
24
+ this.primaryTicks = 0;
25
+ this.secondaryTicks = 0;
26
+ this.tickOrientation = 'end';
27
+ this.hidePrimaryLabels = false;
28
+ this.hideSecondaryLabels = false;
29
+ this.locale = 'en';
30
+ this.tickLabelRotation = 0;
31
+ this.pointerDown = (event) => {
32
+ const thumb = this.closestHandle(event);
33
+ thumb.focus();
34
+ this.startValue = this.activeValue;
35
+ this.updateSlider(event.clientX);
36
+ this.setPointerCapture(event.pointerId);
37
+ this.pointerCaptured = true;
38
+ this.showThumbLabels();
39
+ event.preventDefault();
40
+ };
41
+ this.pointerMove = (event) => {
42
+ if (this.pointerCaptured) {
43
+ this.updateSlider(event.clientX);
44
+ }
45
+ };
46
+ this.lostPointerCapture = () => {
47
+ this.pointerCaptured = false;
48
+ this.hideThumbLabels();
49
+ if (this.startValue !== this.activeValue) {
50
+ this.emitChangeEvent();
51
+ }
52
+ this.startValue = undefined;
53
+ };
54
+ this.handleKeydown = (event) => {
55
+ if (this.disabled) {
56
+ return;
57
+ }
58
+ const { key } = event;
59
+ let increment = 0;
60
+ const value = this.activeValue;
61
+ const step = this.step ? this.step : 1;
62
+ switch (key) {
63
+ case 'ArrowLeft':
64
+ increment += this.isLTR ? -step : step;
65
+ break;
66
+ case 'ArrowRight':
67
+ increment += this.isLTR ? step : -step;
68
+ break;
69
+ case 'ArrowUp':
70
+ increment = step;
71
+ break;
72
+ case 'ArrowDown':
73
+ increment = -step;
74
+ break;
75
+ case 'Home':
76
+ increment = this.actualMin - value;
77
+ break;
78
+ case 'End':
79
+ increment = this.actualMax - value;
80
+ break;
81
+ case 'PageUp':
82
+ increment = Math.max((this.actualMax - this.actualMin) / 10, step);
83
+ break;
84
+ case 'PageDown':
85
+ increment = -Math.max((this.actualMax - this.actualMin) / 10, step);
86
+ break;
87
+ default:
88
+ return;
89
+ }
90
+ if (increment) {
91
+ const updated = this.updateValue(increment);
92
+ this.showThumbLabels();
93
+ this.hideThumbLabels();
94
+ if (updated) {
95
+ this.emitChangeEvent();
96
+ }
97
+ }
98
+ };
99
+ this.handleThumbPointerEnter = () => {
100
+ this.showThumbLabels();
101
+ };
102
+ this.handleThumbPointerLeave = () => {
103
+ this.hideThumbLabels();
104
+ };
105
+ this.addEventListener('pointerdown', this.pointerDown);
106
+ this.addEventListener('pointermove', this.pointerMove);
107
+ this.addEventListener('lostpointercapture', this.lostPointerCapture);
108
+ this.addEventListener('keydown', this.handleKeydown);
109
+ }
110
+ set min(value) {
111
+ if (value < this.max) {
112
+ const oldVal = this._min;
113
+ this._min = this.labels ? 0 : value;
114
+ this.requestUpdate('min', oldVal);
115
+ if (typeof this.lowerBound === 'number' && this.lowerBound < value) {
116
+ this.lowerBound = value;
117
+ }
118
+ }
119
+ }
120
+ get min() {
121
+ return this._min;
122
+ }
123
+ set max(value) {
124
+ if (value > this.min) {
125
+ const oldVal = this._max;
126
+ this._max = this.labels ? this.labels.length - 1 : value;
127
+ this.requestUpdate('max', oldVal);
128
+ if (typeof this.upperBound === 'number' && this.upperBound > value) {
129
+ this.upperBound = value;
130
+ }
131
+ }
132
+ }
133
+ get max() {
134
+ return this._max;
135
+ }
136
+ set lowerBound(value) {
137
+ const oldVal = this._lowerBound;
138
+ if (typeof value === 'number') {
139
+ this._lowerBound = this.valueInRange(value, this.min, this.actualMax);
140
+ }
141
+ else {
142
+ this._lowerBound = value;
143
+ }
144
+ this.requestUpdate('lowerBound', oldVal);
145
+ }
146
+ get lowerBound() {
147
+ return this._lowerBound;
148
+ }
149
+ set upperBound(value) {
150
+ const oldVal = this._upperBound;
151
+ if (typeof value === 'number') {
152
+ this._upperBound = this.valueInRange(value, this.actualMin, this.max);
153
+ }
154
+ else {
155
+ this._upperBound = value;
156
+ }
157
+ this.requestUpdate('upperBound', oldVal);
158
+ }
159
+ get upperBound() {
160
+ return this._upperBound;
161
+ }
162
+ set step(value) {
163
+ const oldVal = this._step;
164
+ this._step = this.labels ? 1 : value;
165
+ this.requestUpdate('step', oldVal);
166
+ }
167
+ get step() {
168
+ return this._step;
169
+ }
170
+ constraintsChange() {
171
+ this.normalizeValue();
172
+ }
173
+ labelsChange() {
174
+ if (this.labels) {
175
+ this.min = 0;
176
+ this.max = this.labels.length - 1;
177
+ this.step = 1;
178
+ }
179
+ }
180
+ connectedCallback() {
181
+ super.connectedCallback();
182
+ this.normalizeValue();
183
+ }
184
+ handleSlotChange() {
185
+ this.labels =
186
+ this.labelElements && this.labelElements.length
187
+ ? this.labelElements.map((e) => e.textContent)
188
+ : undefined;
189
+ }
190
+ get activeValue() {
191
+ return 0;
192
+ }
193
+ normalizeValue() { }
194
+ getTrackStyle() {
195
+ return {};
196
+ }
197
+ updateValue(_increment) {
198
+ return false;
199
+ }
200
+ renderThumbs() {
201
+ return html ``;
202
+ }
203
+ emitInputEvent() { }
204
+ emitChangeEvent() { }
205
+ get actualMin() {
206
+ return typeof this.lowerBound === 'number'
207
+ ? this.lowerBound
208
+ : this.min;
209
+ }
210
+ get actualMax() {
211
+ return typeof this.upperBound === 'number'
212
+ ? this.upperBound
213
+ : this.max;
214
+ }
215
+ get isLTR() {
216
+ const styles = window.getComputedStyle(this);
217
+ return styles.getPropertyValue('direction') === 'ltr';
218
+ }
219
+ validateValue(value) {
220
+ value = this.valueInRange(value, this.actualMin, this.actualMax);
221
+ value = this.normalizeByStep(value);
222
+ return value;
223
+ }
224
+ formatValue(value) {
225
+ return this.valueFormat
226
+ ? this.valueFormat.replace('{0}', value.toLocaleString(this.locale, this.valueFormatOptions))
227
+ : value.toLocaleString(this.locale, this.valueFormatOptions);
228
+ }
229
+ normalizeByStep(value) {
230
+ return this.step ? value - ((value - this.actualMin) % this.step) : value;
231
+ }
232
+ closestHandle(_event) {
233
+ return this.thumb;
234
+ }
235
+ totalTickCount() {
236
+ const primaryTicks = this.labels
237
+ ? this.primaryTicks > 0
238
+ ? this.labels.length
239
+ : 0
240
+ : this.primaryTicks === 1
241
+ ? 2
242
+ : this.primaryTicks;
243
+ return primaryTicks > 0
244
+ ? (primaryTicks - 1) * this.secondaryTicks + primaryTicks
245
+ : this.secondaryTicks > 0
246
+ ? this.secondaryTicks
247
+ : 0;
248
+ }
249
+ tickValue(idx) {
250
+ const tickCount = this.totalTickCount();
251
+ const labelStep = tickCount > 1
252
+ ? (this.max - this.min) / (tickCount - 1)
253
+ : this.max - this.min;
254
+ const labelVal = labelStep * idx;
255
+ return this.min + labelVal;
256
+ }
257
+ isPrimary(idx) {
258
+ return this.primaryTicks <= 0
259
+ ? false
260
+ : idx % (this.secondaryTicks + 1) === 0;
261
+ }
262
+ showThumbLabels() {
263
+ if (this.disabled || this.hideTooltip) {
264
+ return;
265
+ }
266
+ if (this.thumbHoverTimer) {
267
+ clearTimeout(this.thumbHoverTimer);
268
+ this.thumbHoverTimer = null;
269
+ }
270
+ this.thumbLabelsVisible = true;
271
+ }
272
+ hideThumbLabels() {
273
+ if (this.pointerCaptured || !this.thumbLabelsVisible) {
274
+ return;
275
+ }
276
+ this.thumbHoverTimer = setTimeout(() => {
277
+ this.thumbLabelsVisible = false;
278
+ }, 750);
279
+ }
280
+ valueInRange(value, min = 0, max = 100) {
281
+ return Math.max(Math.min(value, max), min);
282
+ }
283
+ valueToFraction(value) {
284
+ return (value - this.min) / (this.max - this.min);
285
+ }
286
+ calculateTrackUpdate(mouseX) {
287
+ if (!this.activeThumb) {
288
+ return 0;
289
+ }
290
+ const thumbBoundaries = this.activeThumb.getBoundingClientRect();
291
+ const thumbCenter = (thumbBoundaries.right - thumbBoundaries.left) / 2;
292
+ const thumbPositionX = thumbBoundaries.left + thumbCenter;
293
+ const scale = this.getBoundingClientRect().width / (this.max - this.min);
294
+ const change = this.isLTR
295
+ ? mouseX - thumbPositionX
296
+ : thumbPositionX - mouseX;
297
+ if (this.step) {
298
+ const stepDistance = scale * this.step;
299
+ const stepDistanceCenter = stepDistance / 2;
300
+ const scaleXPositive = Math.abs(change);
301
+ if (scaleXPositive < stepDistanceCenter) {
302
+ return 0;
303
+ }
304
+ return Math.round(change / stepDistance) * this.step;
305
+ }
306
+ else {
307
+ return change / scale;
308
+ }
309
+ }
310
+ updateSlider(mouseX) {
311
+ if (this.disabled) {
312
+ return;
313
+ }
314
+ const increment = this.calculateTrackUpdate(mouseX);
315
+ if (this.activeThumb && increment !== 0) {
316
+ this.updateValue(increment);
317
+ }
318
+ }
319
+ renderTicks() {
320
+ const groups = [];
321
+ for (let i = 0, totalCount = this.totalTickCount(); i < totalCount; i++) {
322
+ const isPrimary = this.isPrimary(i);
323
+ groups.push(html `
324
+ <div part="tick-group">
325
+ <div part="tick" data-primary=${isPrimary}>
326
+ ${(isPrimary ? this.hidePrimaryLabels : this.hideSecondaryLabels)
327
+ ? html ``
328
+ : html `
329
+ <div part="tick-label">
330
+ <span part="tick-label-inner">
331
+ ${this.labels
332
+ ? isPrimary
333
+ ? this.labels[Math.round(i / (this.secondaryTicks + 1))]
334
+ : ''
335
+ : this.formatValue(this.tickValue(i))}
336
+ </span>
337
+ </div>
338
+ `}
339
+ </div>
340
+ </div>
341
+ `);
342
+ }
343
+ return groups;
344
+ }
345
+ renderThumb(value, ariaLabel, thumbId) {
346
+ const percent = `${this.valueToFraction(value) * 100}%`;
347
+ return html `
348
+ <div
349
+ part="thumb"
350
+ id=${ifDefined(thumbId)}
351
+ tabindex=${this.disabled ? -1 : 0}
352
+ style=${styleMap({ insetInlineStart: percent })}
353
+ role="slider"
354
+ aria-valuemin=${this.actualMin}
355
+ aria-valuemax=${this.actualMax}
356
+ aria-valuenow=${value}
357
+ aria-valuetext=${ifDefined(this.labels
358
+ ? this.labels[value]
359
+ : this.valueFormat || this.valueFormatOptions
360
+ ? this.formatValue(value)
361
+ : undefined)}
362
+ aria-label=${ifDefined(ariaLabel)}
363
+ aria-disabled=${this.disabled ? 'true' : 'false'}
364
+ @pointerenter=${this.handleThumbPointerEnter}
365
+ @pointerleave=${this.handleThumbPointerLeave}
366
+ @focus=${(ev) => (this.activeThumb = ev.target)}
367
+ @blur=${() => (this.activeThumb = undefined)}
368
+ ></div>
369
+ ${this.hideTooltip
370
+ ? html ``
371
+ : html `
372
+ <div
373
+ part="thumb-label"
374
+ style=${styleMap({
375
+ opacity: this.thumbLabelsVisible ? '1' : '0',
376
+ insetInlineStart: percent,
377
+ })}
378
+ >
379
+ <div part="thumb-label-inner">
380
+ ${this.labels ? this.labels[value] : this.formatValue(value)}
381
+ </div>
382
+ </div>
383
+ `}
384
+ `;
385
+ }
386
+ renderSteps() {
387
+ if (!this.discreteTrack || !this.step) {
388
+ return html ``;
389
+ }
390
+ const trackRange = this.max - this.min;
391
+ const interval = ((100 / (trackRange / this.step)) * 10) / 10;
392
+ return html `
393
+ <div part="steps">
394
+ <svg width="100%" height="100%" style="display: flex">
395
+ <line
396
+ x1="0"
397
+ y1="1"
398
+ x2="100%"
399
+ y2="1"
400
+ stroke="currentColor"
401
+ stroke-dasharray="1.5px, calc(${interval * Math.sqrt(2)}% - 1.5px)"
402
+ stroke-linecap="round"
403
+ stroke-width="2px"
404
+ ></line>
405
+ </svg>
406
+ </div>
407
+ `;
408
+ }
409
+ render() {
410
+ return html `
411
+ <div part="base">
412
+ ${this.tickOrientation === 'mirror' || this.tickOrientation === 'start'
413
+ ? html `<div part="ticks">${this.renderTicks()}</div>`
414
+ : html ``}
415
+ <div part="track">
416
+ <div part="inactive"></div>
417
+ <div part="fill" style=${styleMap(this.getTrackStyle())}></div>
418
+ ${this.renderSteps()}
419
+ </div>
420
+ ${this.tickOrientation !== 'start'
421
+ ? html `<div part="ticks">${this.renderTicks()}</div>`
422
+ : html ``}
423
+ <div part="thumbs">${this.renderThumbs()}</div>
424
+ <slot @slotchange=${this.handleSlotChange}></slot>
425
+ </div>
426
+ `;
427
+ }
428
+ }
429
+ IgcSliderBaseComponent.styles = [styles];
430
+ __decorate([
431
+ query(`[part='thumb']`)
432
+ ], IgcSliderBaseComponent.prototype, "thumb", void 0);
433
+ __decorate([
434
+ queryAssignedElements({ selector: 'igc-slider-label' })
435
+ ], IgcSliderBaseComponent.prototype, "labelElements", void 0);
436
+ __decorate([
437
+ state()
438
+ ], IgcSliderBaseComponent.prototype, "thumbLabelsVisible", void 0);
439
+ __decorate([
440
+ state()
441
+ ], IgcSliderBaseComponent.prototype, "labels", void 0);
442
+ __decorate([
443
+ property({ type: Number })
444
+ ], IgcSliderBaseComponent.prototype, "min", null);
445
+ __decorate([
446
+ property({ type: Number })
447
+ ], IgcSliderBaseComponent.prototype, "max", null);
448
+ __decorate([
449
+ property({ type: Number, attribute: 'lower-bound' })
450
+ ], IgcSliderBaseComponent.prototype, "lowerBound", null);
451
+ __decorate([
452
+ property({ type: Number, attribute: 'upper-bound' })
453
+ ], IgcSliderBaseComponent.prototype, "upperBound", null);
454
+ __decorate([
455
+ property({ type: Boolean, reflect: true })
456
+ ], IgcSliderBaseComponent.prototype, "disabled", void 0);
457
+ __decorate([
458
+ property({ type: Boolean, attribute: 'discrete-track' })
459
+ ], IgcSliderBaseComponent.prototype, "discreteTrack", void 0);
460
+ __decorate([
461
+ property({ type: Boolean, attribute: 'hide-tooltip' })
462
+ ], IgcSliderBaseComponent.prototype, "hideTooltip", void 0);
463
+ __decorate([
464
+ property({ type: Number })
465
+ ], IgcSliderBaseComponent.prototype, "step", null);
466
+ __decorate([
467
+ property({ type: Number, attribute: 'primary-ticks' })
468
+ ], IgcSliderBaseComponent.prototype, "primaryTicks", void 0);
469
+ __decorate([
470
+ property({ type: Number, attribute: 'secondary-ticks' })
471
+ ], IgcSliderBaseComponent.prototype, "secondaryTicks", void 0);
472
+ __decorate([
473
+ property({ attribute: 'tick-orientation' })
474
+ ], IgcSliderBaseComponent.prototype, "tickOrientation", void 0);
475
+ __decorate([
476
+ property({ type: Boolean, attribute: 'hide-primary-labels' })
477
+ ], IgcSliderBaseComponent.prototype, "hidePrimaryLabels", void 0);
478
+ __decorate([
479
+ property({ type: Boolean, attribute: 'hide-secondary-labels' })
480
+ ], IgcSliderBaseComponent.prototype, "hideSecondaryLabels", void 0);
481
+ __decorate([
482
+ property()
483
+ ], IgcSliderBaseComponent.prototype, "locale", void 0);
484
+ __decorate([
485
+ property({ attribute: 'value-format' })
486
+ ], IgcSliderBaseComponent.prototype, "valueFormat", void 0);
487
+ __decorate([
488
+ property({ attribute: false })
489
+ ], IgcSliderBaseComponent.prototype, "valueFormatOptions", void 0);
490
+ __decorate([
491
+ property({ type: Number, reflect: true, attribute: 'tick-label-rotation' })
492
+ ], IgcSliderBaseComponent.prototype, "tickLabelRotation", void 0);
493
+ __decorate([
494
+ watch('min', { waitUntilFirstUpdate: true }),
495
+ watch('max', { waitUntilFirstUpdate: true }),
496
+ watch('lowerBound', { waitUntilFirstUpdate: true }),
497
+ watch('upperBound', { waitUntilFirstUpdate: true }),
498
+ watch('step', { waitUntilFirstUpdate: true })
499
+ ], IgcSliderBaseComponent.prototype, "constraintsChange", null);
500
+ __decorate([
501
+ watch('labels')
502
+ ], IgcSliderBaseComponent.prototype, "labelsChange", null);
503
+ //# sourceMappingURL=slider-base.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"slider-base.js","sourceRoot":"","sources":["../../../src/components/slider/slider-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACvD,OAAO,EACL,QAAQ,EACR,KAAK,EACL,qBAAqB,EACrB,KAAK,GACN,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,MAAM,OAAO,sBAAuB,SAAQ,UAAU;IAiNpD;QACE,KAAK,EAAE,CAAC;QAvMF,SAAI,GAAG,CAAC,CAAC;QACT,SAAI,GAAG,GAAG,CAAC;QACX,UAAK,GAAG,CAAC,CAAC;QAEV,oBAAe,GAAG,KAAK,CAAC;QAKxB,uBAAkB,GAAG,KAAK,CAAC;QAuF5B,aAAQ,GAAG,KAAK,CAAC;QAOjB,kBAAa,GAAG,KAAK,CAAC;QAMtB,gBAAW,GAAG,KAAK,CAAC;QAqBpB,iBAAY,GAAG,CAAC,CAAC;QAMjB,mBAAc,GAAG,CAAC,CAAC;QAMnB,oBAAe,GAA+B,KAAK,CAAC;QAMpD,sBAAiB,GAAG,KAAK,CAAC;QAM1B,wBAAmB,GAAG,KAAK,CAAC;QAM5B,WAAM,GAAG,IAAI,CAAC;QAkBd,sBAAiB,GAAiB,CAAC,CAAC;QAwNnC,gBAAW,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,KAAK,CAAC,KAAK,EAAE,CAAC;YAEd,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAEjC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,KAAK,CAAC,cAAc,EAAE,CAAC;QACzB,CAAC,CAAC;QAEM,gBAAW,GAAG,CAAC,KAAmB,EAAE,EAAE;YAC5C,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;aAClC;QACH,CAAC,CAAC;QAEM,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,CAAC,eAAe,EAAE,CAAC;YAEvB,IAAI,IAAI,CAAC,UAAW,KAAK,IAAI,CAAC,WAAW,EAAE;gBACzC,IAAI,CAAC,eAAe,EAAE,CAAC;aACxB;YACD,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC9B,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;YAEtB,IAAI,SAAS,GAAG,CAAC,CAAC;YAClB,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;YAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;YAEvC,QAAQ,GAAG,EAAE;gBACX,KAAK,WAAW;oBACd,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;oBACvC,MAAM;gBACR,KAAK,YAAY;oBACf,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;oBACvC,MAAM;gBACR,KAAK,SAAS;oBACZ,SAAS,GAAG,IAAI,CAAC;oBACjB,MAAM;gBACR,KAAK,WAAW;oBACd,SAAS,GAAG,CAAC,IAAI,CAAC;oBAClB,MAAM;gBACR,KAAK,MAAM;oBACT,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;oBACnC,MAAM;gBACR,KAAK,KAAK;oBACR,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;oBACnC,MAAM;gBACR,KAAK,QAAQ;oBACX,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC,CAAC;oBACnE,MAAM;gBACR,KAAK,UAAU;oBACb,SAAS,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC,CAAC;oBACpE,MAAM;gBACR;oBACE,OAAO;aACV;YAED,IAAI,SAAS,EAAE;gBACb,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;gBAC5C,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,IAAI,CAAC,eAAe,EAAE,CAAC;gBAEvB,IAAI,OAAO,EAAE;oBACX,IAAI,CAAC,eAAe,EAAE,CAAC;iBACxB;aACF;QACH,CAAC,CAAC;QAEM,4BAAuB,GAAG,GAAG,EAAE;YACrC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC;QAEM,4BAAuB,GAAG,GAAG,EAAE;YACrC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC;QAxRA,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACvD,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACrE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACvD,CAAC;IA9LD,IAAW,GAAG,CAAC,KAAa;QAC1B,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACpB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACpC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YAElC,IAAI,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE;gBAClE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;aACzB;SACF;IACH,CAAC;IAMD,IAAW,GAAG;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,IAAW,GAAG,CAAC,KAAa;QAC1B,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE;YACpB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;YACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACzD,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YAElC,IAAI,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE;gBAClE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;aACzB;SACF;IACH,CAAC;IAMD,IAAW,GAAG;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,IAAW,UAAU,CAAC,KAAyB;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;QAEhC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACvE;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC1B;QACD,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAMD,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,IAAW,UAAU,CAAC,KAAyB;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;QAEhC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;SACvE;aAAM;YACL,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;SAC1B;QACD,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAMD,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAqBD,IAAW,IAAI,CAAC,KAAa;QAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QACrC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,CAAC;IAOD,IAAW,IAAI;QACb,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IA6DS,iBAAiB;QACzB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGS,YAAY;QACpB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;YACb,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YAClC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;SACf;IACH,CAAC;IAUe,iBAAiB;QAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAES,gBAAgB;QACxB,IAAI,CAAC,MAAM;YACT,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM;gBAC7C,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAqB,CAAC;gBACxD,CAAC,CAAC,SAAS,CAAC;IAClB,CAAC;IAGD,IAAc,WAAW;QACvB,OAAO,CAAC,CAAC;IACX,CAAC;IAGS,cAAc,KAAU,CAAC;IAGzB,aAAa;QACrB,OAAO,EAAE,CAAC;IACZ,CAAC;IAGS,WAAW,CAAC,UAAkB;QACtC,OAAO,KAAK,CAAC;IACf,CAAC;IAGS,YAAY;QACpB,OAAO,IAAI,CAAA,EAAE,CAAC;IAChB,CAAC;IAGS,cAAc,KAAI,CAAC;IAGnB,eAAe,KAAI,CAAC;IAE9B,IAAY,SAAS;QACnB,OAAO,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ;YACxC,CAAC,CAAE,IAAI,CAAC,UAAqB;YAC7B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IACf,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ;YACxC,CAAC,CAAE,IAAI,CAAC,UAAqB;YAC7B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IACf,CAAC;IAED,IAAY,KAAK;QACf,MAAM,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC7C,OAAO,MAAM,CAAC,gBAAgB,CAAC,WAAW,CAAC,KAAK,KAAK,CAAC;IACxD,CAAC;IAES,aAAa,CAAC,KAAa;QACnC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACjE,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QAEpC,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,WAAW,CAAC,KAAa;QAC/B,OAAO,IAAI,CAAC,WAAW;YACrB,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CACtB,KAAK,EACL,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAC3D;YACH,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACjE,CAAC;IAEO,eAAe,CAAC,KAAa;QACnC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAC5E,CAAC;IAES,aAAa,CAAC,MAAoB;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAEO,cAAc;QACpB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM;YAC9B,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC;gBACrB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;gBACpB,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,IAAI,CAAC,YAAY,KAAK,CAAC;gBACzB,CAAC,CAAC,CAAC;gBACH,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;QAEtB,OAAO,YAAY,GAAG,CAAC;YACrB,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,cAAc,GAAG,YAAY;YACzD,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC;gBACzB,CAAC,CAAC,IAAI,CAAC,cAAc;gBACrB,CAAC,CAAC,CAAC,CAAC;IACR,CAAC;IAEO,SAAS,CAAC,GAAW;QAC3B,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QACxC,MAAM,SAAS,GACb,SAAS,GAAG,CAAC;YACX,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC;YACzC,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QAC1B,MAAM,QAAQ,GAAG,SAAS,GAAG,GAAG,CAAC;QAEjC,OAAO,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC;IAC7B,CAAC;IAEO,SAAS,CAAC,GAAW;QAC3B,OAAO,IAAI,CAAC,YAAY,IAAI,CAAC;YAC3B,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE;YACrC,OAAO;SACR;QAED,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACnC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;SAC7B;QAED,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;IACjC,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YACpD,OAAO;SACR;QAED,IAAI,CAAC,eAAe,GAAG,UAAU,CAAC,GAAG,EAAE;YACrC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAClC,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC;IAEO,YAAY,CAAC,KAAa,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,GAAG;QACpD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IAC7C,CAAC;IAES,eAAe,CAAC,KAAa;QACrC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;IACpD,CAAC;IAEO,oBAAoB,CAAC,MAAc;QACzC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO,CAAC,CAAC;SACV;QAED,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,qBAAqB,EAAE,CAAC;QACjE,MAAM,WAAW,GAAG,CAAC,eAAe,CAAC,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvE,MAAM,cAAc,GAAG,eAAe,CAAC,IAAI,GAAG,WAAW,CAAC;QAE1D,MAAM,KAAK,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QACzE,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK;YACvB,CAAC,CAAC,MAAM,GAAG,cAAc;YACzB,CAAC,CAAC,cAAc,GAAG,MAAM,CAAC;QAE5B,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,YAAY,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;YACvC,MAAM,kBAAkB,GAAG,YAAY,GAAG,CAAC,CAAC;YAI5C,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACxC,IAAI,cAAc,GAAG,kBAAkB,EAAE;gBACvC,OAAO,CAAC,CAAC;aACV;YAED,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;SACtD;aAAM;YACL,OAAO,MAAM,GAAG,KAAK,CAAC;SACvB;IACH,CAAC;IAEO,YAAY,CAAC,MAAc;QACjC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,IAAI,CAAC,WAAW,IAAI,SAAS,KAAK,CAAC,EAAE;YACvC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;SAC7B;IACH,CAAC;IA0FS,WAAW;QACnB,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,EAAE;YACvE,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YACpC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAA;;0CAEoB,SAAS;cACrC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC;gBAC/D,CAAC,CAAC,IAAI,CAAA,EAAE;gBACR,CAAC,CAAC,IAAI,CAAA;;;wBAGI,IAAI,CAAC,MAAM;oBACX,CAAC,CAAC,SAAS;wBACT,CAAC,CAAC,IAAI,CAAC,MAAM,CACT,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,CAAC,CAC1C;wBACH,CAAC,CAAC,EAAE;oBACN,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;;;iBAG5C;;;OAGV,CAAC,CAAC;SACJ;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAES,WAAW,CAAC,KAAa,EAAE,SAAkB,EAAE,OAAgB;QACvE,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;QAExD,OAAO,IAAI,CAAA;;;aAGF,SAAS,CAAC,OAAO,CAAC;mBACZ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACzB,QAAQ,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,CAAC;;wBAE/B,IAAI,CAAC,SAAS;wBACd,IAAI,CAAC,SAAS;wBACd,KAAK;yBACJ,SAAS,CACxB,IAAI,CAAC,MAAM;YACT,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;YACpB,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB;gBAC7C,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;gBACzB,CAAC,CAAC,SAAS,CACd;qBACY,SAAS,CAAC,SAAS,CAAC;wBACjB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;wBAChC,IAAI,CAAC,uBAAuB;wBAC5B,IAAI,CAAC,uBAAuB;iBACnC,CAAC,EAAS,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,MAAqB,CAAC;gBAC7D,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;;QAE5C,IAAI,CAAC,WAAW;YAChB,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,CAAC,CAAC,IAAI,CAAA;;;sBAGQ,QAAQ,CAAC;gBACf,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;gBAC5C,gBAAgB,EAAE,OAAO;aAC1B,CAAC;;;kBAGE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;;;WAGjE;KACN,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACrC,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACvC,MAAM,QAAQ,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC;QAE9D,OAAO,IAAI,CAAA;;;;;;;;;4CAS6B,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;;;;;;KAM9D,CAAC;IACJ,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,eAAe,KAAK,QAAQ,IAAI,IAAI,CAAC,eAAe,KAAK,OAAO;YACrE,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,WAAW,EAAE,QAAQ;YACrD,CAAC,CAAC,IAAI,CAAA,EAAE;;;mCAGiB,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACrD,IAAI,CAAC,WAAW,EAAE;;UAEpB,IAAI,CAAC,eAAe,KAAK,OAAO;YAChC,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,WAAW,EAAE,QAAQ;YACrD,CAAC,CAAC,IAAI,CAAA,EAAE;6BACW,IAAI,CAAC,YAAY,EAAE;4BACpB,IAAI,CAAC,gBAAgB;;KAE5C,CAAC;IACJ,CAAC;;AAlmBsB,6BAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAGzC;IADC,KAAK,CAAC,gBAAgB,CAAC;qDACM;AAG9B;IADC,qBAAqB,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAC;6DAClB;AAatC;IADC,KAAK,EAAE;kEAC2B;AAGnC;IADC,KAAK,EAAE;sDACkB;AAkB1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAG1B;AAkBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAG1B;AAiBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;wDAGpD;AAiBD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;wDAGpD;AAMD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDACnB;AAOxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;6DAC5B;AAM7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2DAC5B;AAa3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAG1B;AAMD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;4DAC/B;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;8DAC/B;AAM1B;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;+DACe;AAM3D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;iEAC7B;AAMjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;mEAC7B;AAMnC;IADC,QAAQ,EAAE;sDACU;AAMrB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2DACZ;AAM5B;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kEACsB;AAMrD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;iEACjC;AAO3C;IALC,KAAK,CAAC,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;IAC5C,KAAK,CAAC,KAAK,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;IAC5C,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;IACnD,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;IACnD,KAAK,CAAC,MAAM,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;+DAG7C;AAGD;IADC,KAAK,CAAC,QAAQ,CAAC;0DAOf","sourcesContent":["import { html, LitElement, TemplateResult } from 'lit';\nimport {\n property,\n query,\n queryAssignedElements,\n state,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { watch } from '../common/decorators';\nimport { styles } from './slider.material.css';\n\nexport class IgcSliderBaseComponent extends LitElement {\n public static override styles = [styles];\n\n @query(`[part='thumb']`)\n protected thumb!: HTMLElement;\n\n @queryAssignedElements({ selector: 'igc-slider-label' })\n private labelElements!: HTMLElement[];\n\n private _lowerBound?: number;\n private _upperBound?: number;\n private _min = 0;\n private _max = 100;\n private _step = 1;\n private startValue?: number;\n private pointerCaptured = false;\n private thumbHoverTimer: any;\n protected activeThumb?: HTMLElement;\n\n @state()\n private thumbLabelsVisible = false;\n\n @state()\n private labels?: string[];\n\n public set min(value: number) {\n if (value < this.max) {\n const oldVal = this._min;\n this._min = this.labels ? 0 : value;\n this.requestUpdate('min', oldVal);\n\n if (typeof this.lowerBound === 'number' && this.lowerBound < value) {\n this.lowerBound = value;\n }\n }\n }\n\n /**\n * The minimum value of the slider scale. Defaults to 0.\n */\n @property({ type: Number })\n public get min() {\n return this._min;\n }\n\n public set max(value: number) {\n if (value > this.min) {\n const oldVal = this._max;\n this._max = this.labels ? this.labels.length - 1 : value;\n this.requestUpdate('max', oldVal);\n\n if (typeof this.upperBound === 'number' && this.upperBound > value) {\n this.upperBound = value;\n }\n }\n }\n\n /**\n * The maximum value of the slider scale. Defaults to 100.\n */\n @property({ type: Number })\n public get max() {\n return this._max;\n }\n\n public set lowerBound(value: number | undefined) {\n const oldVal = this._lowerBound;\n\n if (typeof value === 'number') {\n this._lowerBound = this.valueInRange(value, this.min, this.actualMax);\n } else {\n this._lowerBound = value;\n }\n this.requestUpdate('lowerBound', oldVal);\n }\n\n /**\n * The lower bound of the slider value. If not set, the `min` value is applied.\n */\n @property({ type: Number, attribute: 'lower-bound' })\n public get lowerBound(): number | undefined {\n return this._lowerBound;\n }\n\n public set upperBound(value: number | undefined) {\n const oldVal = this._upperBound;\n\n if (typeof value === 'number') {\n this._upperBound = this.valueInRange(value, this.actualMin, this.max);\n } else {\n this._upperBound = value;\n }\n this.requestUpdate('upperBound', oldVal);\n }\n\n /**\n * The upper bound of the slider value. If not set, the `max` value is applied.\n */\n @property({ type: Number, attribute: 'upper-bound' })\n public get upperBound(): number | undefined {\n return this._upperBound;\n }\n\n /**\n * Disables the UI interactions of the slider.\n */\n @property({ type: Boolean, reflect: true })\n public disabled = false;\n\n /**\n * Marks the slider track as discrete so it displays the steps.\n * If the `step` is 0, the slider will remain continuos even if `discreteTrack` is `true`.\n */\n @property({ type: Boolean, attribute: 'discrete-track' })\n public discreteTrack = false;\n\n /**\n * Hides the thumb tooltip.\n */\n @property({ type: Boolean, attribute: 'hide-tooltip' })\n public hideTooltip = false;\n\n public set step(value: number) {\n const oldVal = this._step;\n this._step = this.labels ? 1 : value;\n this.requestUpdate('step', oldVal);\n }\n\n /**\n * Specifies the granularity that the value must adhere to.\n * If set to 0 no stepping is implied and any value in the range is allowed.\n */\n @property({ type: Number })\n public get step() {\n return this._step;\n }\n\n /**\n * The number of primary ticks. It defaults to 0 which means no primary ticks are displayed.\n */\n @property({ type: Number, attribute: 'primary-ticks' })\n public primaryTicks = 0;\n\n /**\n * The number of secondary ticks. It defaults to 0 which means no secondary ticks are displayed.\n */\n @property({ type: Number, attribute: 'secondary-ticks' })\n public secondaryTicks = 0;\n\n /**\n * Changes the orientation of the ticks.\n */\n @property({ attribute: 'tick-orientation' })\n public tickOrientation: 'mirror' | 'start' | 'end' = 'end';\n\n /**\n * Hides the primary tick labels.\n */\n @property({ type: Boolean, attribute: 'hide-primary-labels' })\n public hidePrimaryLabels = false;\n\n /**\n * Hides the secondary tick labels.\n */\n @property({ type: Boolean, attribute: 'hide-secondary-labels' })\n public hideSecondaryLabels = false;\n\n /**\n * The locale used to format the thumb and tick label values in the slider.\n */\n @property()\n public locale = 'en';\n\n /**\n * String format used for the thumb and tick label values in the slider.\n */\n @property({ attribute: 'value-format' })\n public valueFormat?: string;\n\n /**\n * Number format options used for the thumb and tick label values in the slider.\n */\n @property({ attribute: false })\n public valueFormatOptions?: Intl.NumberFormatOptions;\n\n /**\n * The degrees for the rotation of the tick labels. Defaults to 0.\n */\n @property({ type: Number, reflect: true, attribute: 'tick-label-rotation' })\n public tickLabelRotation: 0 | 90 | -90 = 0;\n\n @watch('min', { waitUntilFirstUpdate: true })\n @watch('max', { waitUntilFirstUpdate: true })\n @watch('lowerBound', { waitUntilFirstUpdate: true })\n @watch('upperBound', { waitUntilFirstUpdate: true })\n @watch('step', { waitUntilFirstUpdate: true })\n protected constraintsChange() {\n this.normalizeValue();\n }\n\n @watch('labels')\n protected labelsChange() {\n if (this.labels) {\n this.min = 0;\n this.max = this.labels.length - 1;\n this.step = 1;\n }\n }\n\n constructor() {\n super();\n this.addEventListener('pointerdown', this.pointerDown);\n this.addEventListener('pointermove', this.pointerMove);\n this.addEventListener('lostpointercapture', this.lostPointerCapture);\n this.addEventListener('keydown', this.handleKeydown);\n }\n\n public override connectedCallback() {\n super.connectedCallback();\n this.normalizeValue();\n }\n\n protected handleSlotChange() {\n this.labels =\n this.labelElements && this.labelElements.length\n ? this.labelElements.map((e) => e.textContent as string)\n : undefined;\n }\n\n /* c8 ignore next 3 */\n protected get activeValue() {\n return 0;\n }\n\n /* c8 ignore next */\n protected normalizeValue(): void {}\n\n /* c8 ignore next 3 */\n protected getTrackStyle(): StyleInfo {\n return {};\n }\n\n /* c8 ignore next 3 */\n protected updateValue(_increment: number): boolean {\n return false;\n }\n\n /* c8 ignore next 3 */\n protected renderThumbs(): TemplateResult<1> {\n return html``;\n }\n\n /* c8 ignore next */\n protected emitInputEvent() {}\n\n /* c8 ignore next */\n protected emitChangeEvent() {}\n\n private get actualMin(): number {\n return typeof this.lowerBound === 'number'\n ? (this.lowerBound as number)\n : this.min;\n }\n\n private get actualMax(): number {\n return typeof this.upperBound === 'number'\n ? (this.upperBound as number)\n : this.max;\n }\n\n private get isLTR(): boolean {\n const styles = window.getComputedStyle(this);\n return styles.getPropertyValue('direction') === 'ltr';\n }\n\n protected validateValue(value: number) {\n value = this.valueInRange(value, this.actualMin, this.actualMax);\n value = this.normalizeByStep(value);\n\n return value;\n }\n\n private formatValue(value: number) {\n return this.valueFormat\n ? this.valueFormat.replace(\n '{0}',\n value.toLocaleString(this.locale, this.valueFormatOptions)\n )\n : value.toLocaleString(this.locale, this.valueFormatOptions);\n }\n\n private normalizeByStep(value: number) {\n return this.step ? value - ((value - this.actualMin) % this.step) : value;\n }\n\n protected closestHandle(_event: PointerEvent): HTMLElement {\n return this.thumb;\n }\n\n private totalTickCount() {\n const primaryTicks = this.labels\n ? this.primaryTicks > 0\n ? this.labels.length\n : 0\n : this.primaryTicks === 1\n ? 2\n : this.primaryTicks;\n\n return primaryTicks > 0\n ? (primaryTicks - 1) * this.secondaryTicks + primaryTicks\n : this.secondaryTicks > 0\n ? this.secondaryTicks\n : 0;\n }\n\n private tickValue(idx: number) {\n const tickCount = this.totalTickCount();\n const labelStep =\n tickCount > 1\n ? (this.max - this.min) / (tickCount - 1)\n : this.max - this.min;\n const labelVal = labelStep * idx;\n\n return this.min + labelVal;\n }\n\n private isPrimary(idx: number) {\n return this.primaryTicks <= 0\n ? false\n : idx % (this.secondaryTicks + 1) === 0;\n }\n\n private showThumbLabels() {\n if (this.disabled || this.hideTooltip) {\n return;\n }\n\n if (this.thumbHoverTimer) {\n clearTimeout(this.thumbHoverTimer);\n this.thumbHoverTimer = null;\n }\n\n this.thumbLabelsVisible = true;\n }\n\n private hideThumbLabels() {\n if (this.pointerCaptured || !this.thumbLabelsVisible) {\n return;\n }\n\n this.thumbHoverTimer = setTimeout(() => {\n this.thumbLabelsVisible = false;\n }, 750);\n }\n\n private valueInRange(value: number, min = 0, max = 100) {\n return Math.max(Math.min(value, max), min);\n }\n\n protected valueToFraction(value: number) {\n return (value - this.min) / (this.max - this.min);\n }\n\n private calculateTrackUpdate(mouseX: number): number {\n if (!this.activeThumb) {\n return 0;\n }\n\n const thumbBoundaries = this.activeThumb.getBoundingClientRect();\n const thumbCenter = (thumbBoundaries.right - thumbBoundaries.left) / 2;\n const thumbPositionX = thumbBoundaries.left + thumbCenter;\n\n const scale = this.getBoundingClientRect().width / (this.max - this.min);\n const change = this.isLTR\n ? mouseX - thumbPositionX\n : thumbPositionX - mouseX;\n\n if (this.step) {\n const stepDistance = scale * this.step;\n const stepDistanceCenter = stepDistance / 2;\n\n // If the thumb scale range (slider update) is less than a half step,\n // the position stays the same.\n const scaleXPositive = Math.abs(change);\n if (scaleXPositive < stepDistanceCenter) {\n return 0;\n }\n\n return Math.round(change / stepDistance) * this.step;\n } else {\n return change / scale;\n }\n }\n\n private updateSlider(mouseX: number) {\n if (this.disabled) {\n return;\n }\n\n const increment = this.calculateTrackUpdate(mouseX);\n if (this.activeThumb && increment !== 0) {\n this.updateValue(increment);\n }\n }\n\n private pointerDown = (event: PointerEvent) => {\n const thumb = this.closestHandle(event);\n thumb.focus();\n\n this.startValue = this.activeValue;\n this.updateSlider(event.clientX);\n\n this.setPointerCapture(event.pointerId);\n this.pointerCaptured = true;\n this.showThumbLabels();\n event.preventDefault();\n };\n\n private pointerMove = (event: PointerEvent) => {\n if (this.pointerCaptured) {\n this.updateSlider(event.clientX);\n }\n };\n\n private lostPointerCapture = () => {\n this.pointerCaptured = false;\n this.hideThumbLabels();\n\n if (this.startValue! !== this.activeValue) {\n this.emitChangeEvent();\n }\n this.startValue = undefined;\n };\n\n private handleKeydown = (event: KeyboardEvent) => {\n if (this.disabled) {\n return;\n }\n\n const { key } = event;\n\n let increment = 0;\n const value = this.activeValue;\n const step = this.step ? this.step : 1;\n\n switch (key) {\n case 'ArrowLeft':\n increment += this.isLTR ? -step : step;\n break;\n case 'ArrowRight':\n increment += this.isLTR ? step : -step;\n break;\n case 'ArrowUp':\n increment = step;\n break;\n case 'ArrowDown':\n increment = -step;\n break;\n case 'Home':\n increment = this.actualMin - value;\n break;\n case 'End':\n increment = this.actualMax - value;\n break;\n case 'PageUp':\n increment = Math.max((this.actualMax - this.actualMin) / 10, step);\n break;\n case 'PageDown':\n increment = -Math.max((this.actualMax - this.actualMin) / 10, step);\n break;\n default:\n return;\n }\n\n if (increment) {\n const updated = this.updateValue(increment);\n this.showThumbLabels();\n this.hideThumbLabels();\n\n if (updated) {\n this.emitChangeEvent();\n }\n }\n };\n\n private handleThumbPointerEnter = () => {\n this.showThumbLabels();\n };\n\n private handleThumbPointerLeave = () => {\n this.hideThumbLabels();\n };\n\n protected renderTicks() {\n const groups = [];\n for (let i = 0, totalCount = this.totalTickCount(); i < totalCount; i++) {\n const isPrimary = this.isPrimary(i);\n groups.push(html`\n <div part=\"tick-group\">\n <div part=\"tick\" data-primary=${isPrimary}>\n ${(isPrimary ? this.hidePrimaryLabels : this.hideSecondaryLabels)\n ? html``\n : html`\n <div part=\"tick-label\">\n <span part=\"tick-label-inner\">\n ${this.labels\n ? isPrimary\n ? this.labels[\n Math.round(i / (this.secondaryTicks + 1))\n ]\n : ''\n : this.formatValue(this.tickValue(i))}\n </span>\n </div>\n `}\n </div>\n </div>\n `);\n }\n return groups;\n }\n\n protected renderThumb(value: number, ariaLabel?: string, thumbId?: string) {\n const percent = `${this.valueToFraction(value) * 100}%`;\n\n return html`\n <div\n part=\"thumb\"\n id=${ifDefined(thumbId)}\n tabindex=${this.disabled ? -1 : 0}\n style=${styleMap({ insetInlineStart: percent })}\n role=\"slider\"\n aria-valuemin=${this.actualMin}\n aria-valuemax=${this.actualMax}\n aria-valuenow=${value}\n aria-valuetext=${ifDefined(\n this.labels\n ? this.labels[value]\n : this.valueFormat || this.valueFormatOptions\n ? this.formatValue(value)\n : undefined\n )}\n aria-label=${ifDefined(ariaLabel)}\n aria-disabled=${this.disabled ? 'true' : 'false'}\n @pointerenter=${this.handleThumbPointerEnter}\n @pointerleave=${this.handleThumbPointerLeave}\n @focus=${(ev: Event) => (this.activeThumb = ev.target as HTMLElement)}\n @blur=${() => (this.activeThumb = undefined)}\n ></div>\n ${this.hideTooltip\n ? html``\n : html`\n <div\n part=\"thumb-label\"\n style=${styleMap({\n opacity: this.thumbLabelsVisible ? '1' : '0',\n insetInlineStart: percent,\n })}\n >\n <div part=\"thumb-label-inner\">\n ${this.labels ? this.labels[value] : this.formatValue(value)}\n </div>\n </div>\n `}\n `;\n }\n\n private renderSteps() {\n if (!this.discreteTrack || !this.step) {\n return html``;\n }\n\n const trackRange = this.max - this.min;\n const interval = ((100 / (trackRange / this.step)) * 10) / 10;\n\n return html`\n <div part=\"steps\">\n <svg width=\"100%\" height=\"100%\" style=\"display: flex\">\n <line\n x1=\"0\"\n y1=\"1\"\n x2=\"100%\"\n y2=\"1\"\n stroke=\"currentColor\"\n stroke-dasharray=\"1.5px, calc(${interval * Math.sqrt(2)}% - 1.5px)\"\n stroke-linecap=\"round\"\n stroke-width=\"2px\"\n ></line>\n </svg>\n </div>\n `;\n }\n\n protected override render() {\n return html`\n <div part=\"base\">\n ${this.tickOrientation === 'mirror' || this.tickOrientation === 'start'\n ? html`<div part=\"ticks\">${this.renderTicks()}</div>`\n : html``}\n <div part=\"track\">\n <div part=\"inactive\"></div>\n <div part=\"fill\" style=${styleMap(this.getTrackStyle())}></div>\n ${this.renderSteps()}\n </div>\n ${this.tickOrientation !== 'start'\n ? html`<div part=\"ticks\">${this.renderTicks()}</div>`\n : html``}\n <div part=\"thumbs\">${this.renderThumbs()}</div>\n <slot @slotchange=${this.handleSlotChange}></slot>\n </div>\n `;\n }\n}\n"]}
@@ -0,0 +1,6 @@
1
+ import { LitElement } from 'lit';
2
+ export default class IgcSliderLabelComponent extends LitElement {
3
+ static styles: import("lit").CSSResult;
4
+ static readonly tagName = "igc-slider-label";
5
+ protected createRenderRoot(): this;
6
+ }
@@ -0,0 +1,13 @@
1
+ import { css, LitElement } from 'lit';
2
+ export default class IgcSliderLabelComponent extends LitElement {
3
+ createRenderRoot() {
4
+ return this;
5
+ }
6
+ }
7
+ IgcSliderLabelComponent.styles = css `
8
+ :host {
9
+ display: none;
10
+ }
11
+ `;
12
+ IgcSliderLabelComponent.tagName = 'igc-slider-label';
13
+ //# sourceMappingURL=slider-label.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"slider-label.js","sourceRoot":"","sources":["../../../src/components/slider/slider-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC,MAAM,CAAC,OAAO,OAAO,uBAAwB,SAAQ,UAAU;IAS1C,gBAAgB;QACjC,OAAO,IAAI,CAAC;IACd,CAAC;;AAVsB,8BAAM,GAAG,GAAG,CAAA;;;;GAIlC,CAAC;AAEqB,+BAAO,GAAG,kBAAkB,CAAC","sourcesContent":["import { css, LitElement } from 'lit';\n\nexport default class IgcSliderLabelComponent extends LitElement {\n public static override styles = css`\n :host {\n display: none;\n }\n `;\n\n public static readonly tagName = 'igc-slider-label';\n\n protected override createRenderRoot() {\n return this;\n }\n}\n"]}
@@ -0,0 +1,76 @@
1
+ import { Constructor } from '../common/mixins/constructor';
2
+ import { IgcSliderBaseComponent } from './slider-base';
3
+ export interface IgcSliderEventMap {
4
+ /**
5
+ * Emitted when a value is changed via thumb drag or keyboard interaction.
6
+ */
7
+ igcInput: CustomEvent<number>;
8
+ /**
9
+ * Emitted when a value change is committed on a thumb drag end or keyboard interaction.
10
+ */
11
+ igcChange: CustomEvent<number>;
12
+ }
13
+ declare const IgcSliderComponent_base: Constructor<import("../common/mixins/event-emitter").EventEmitterInterface<IgcSliderEventMap>> & Constructor<IgcSliderBaseComponent>;
14
+ /**
15
+ * A slider component used to select numeric value within a range.
16
+ *
17
+ * @element igc-slider
18
+ *
19
+ * @fires igcInput - Emitted when a value is changed via thumb drag or keyboard interaction.
20
+ * @fires igcChange - Emitted when a value change is committed on a thumb drag end or keyboard interaction.
21
+ *
22
+ * @csspart base - The base wrapper of the slider.
23
+ * @csspart ticks - The ticks container.
24
+ * @csspart tick-group - The tick group container.
25
+ * @csspart tick - The tick element.
26
+ * @csspart tick-label - The tick label element.
27
+ * @csspart tick-label-inner - The inner element of the tick label.
28
+ * @csspart thumbs - The thumbs container.
29
+ * @csspart thumb - The thumb element.
30
+ * @csspart thumb-label - The thumb tooltip label container.
31
+ * @csspart thumb-label-inner - The thumb tooltip label inner element.
32
+ * @csspart track - The track container.
33
+ * @csspart steps - The track steps element.
34
+ * @csspart inactive - The inactive element of the track.
35
+ * @csspart fill - The filled part of the track.
36
+ */
37
+ export default class IgcSliderComponent extends IgcSliderComponent_base {
38
+ static readonly tagName = "igc-slider";
39
+ private _value;
40
+ private _ariaLabel;
41
+ set value(val: number);
42
+ /**
43
+ * The current value of the slider.
44
+ */
45
+ get value(): number;
46
+ set ariaLabel(value: string);
47
+ /**
48
+ * The aria label of the slider thumb.
49
+ */
50
+ get ariaLabel(): string;
51
+ protected get activeValue(): number;
52
+ protected normalizeValue(): void;
53
+ protected getTrackStyle(): {
54
+ width: string;
55
+ };
56
+ protected updateValue(increment: number): boolean;
57
+ protected emitInputEvent(): void;
58
+ protected emitChangeEvent(): void;
59
+ /**
60
+ * Increments the value of the slider by `stepIncrement * step`, where `stepIncrement` defaults to 1.
61
+ * @param stepIncrement Optional step increment. If no parameter is passed, it defaults to 1.
62
+ */
63
+ stepUp(stepIncrement?: number): void;
64
+ /**
65
+ * Decrements the value of the slider by `stepDecrement * step`, where `stepDecrement` defaults to 1.
66
+ * @param stepDecrement Optional step decrement. If no parameter is passed, it defaults to 1.
67
+ */
68
+ stepDown(stepDecrement?: number): void;
69
+ protected renderThumbs(): import("lit-html").TemplateResult<1>;
70
+ }
71
+ declare global {
72
+ interface HTMLElementTagNameMap {
73
+ 'igc-slider': IgcSliderComponent;
74
+ }
75
+ }
76
+ export {};