@scania/tegel 1.21.0 → 1.21.1-config-for-china-beta.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 (89) hide show
  1. package/dist/cjs/tds-slider.cjs.entry.js +14 -9
  2. package/dist/collection/components/accordion/accordion-item/accordion-item.css +1 -0
  3. package/dist/collection/components/accordion/accordion.css +1 -0
  4. package/dist/collection/components/badge/badge.css +1 -0
  5. package/dist/collection/components/banner/banner.css +1 -0
  6. package/dist/collection/components/block/block.css +1 -0
  7. package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css +1 -0
  8. package/dist/collection/components/breadcrumbs/breadcrumbs.css +1 -0
  9. package/dist/collection/components/button/button.css +1 -0
  10. package/dist/collection/components/card/card.css +1 -0
  11. package/dist/collection/components/checkbox/checkbox.css +1 -0
  12. package/dist/collection/components/chip/chip.css +1 -0
  13. package/dist/collection/components/datetime/datetime.css +1 -0
  14. package/dist/collection/components/divider/divider.css +1 -0
  15. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css +1 -0
  16. package/dist/collection/components/dropdown/dropdown.css +1 -0
  17. package/dist/collection/components/footer/footer-group/footer-group.css +1 -0
  18. package/dist/collection/components/footer/footer-item/footer-item.css +1 -0
  19. package/dist/collection/components/footer/footer.css +1 -0
  20. package/dist/collection/components/header/core-header-item/core-header-item.css +1 -0
  21. package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.css +1 -0
  22. package/dist/collection/components/header/header-dropdown/header-dropdown.css +1 -0
  23. package/dist/collection/components/header/header-dropdown-list/header-dropdown-list.css +1 -0
  24. package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css +1 -0
  25. package/dist/collection/components/header/header-dropdown-list-user/header-dropdown-list-user.css +1 -0
  26. package/dist/collection/components/header/header-hamburger/header-hamburger.css +1 -1
  27. package/dist/collection/components/header/header-item/header-item.css +1 -0
  28. package/dist/collection/components/header/header-launcher/header-launcher.css +1 -0
  29. package/dist/collection/components/header/header-launcher-button/header-launcher-button.css +1 -0
  30. package/dist/collection/components/header/header-launcher-grid/header-launcher-grid.css +1 -0
  31. package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.css +1 -0
  32. package/dist/collection/components/header/header-launcher-grid-title/header-launcher-grid-title.css +1 -0
  33. package/dist/collection/components/header/header-launcher-list-item/header-launcher-list-item.css +1 -0
  34. package/dist/collection/components/header/header-launcher-list-title/header-launcher-list-title.css +1 -0
  35. package/dist/collection/components/header/header-title/header-title.css +1 -0
  36. package/dist/collection/components/header/header.css +1 -1
  37. package/dist/collection/components/icon/icon.css +1 -0
  38. package/dist/collection/components/link/link.css +1 -0
  39. package/dist/collection/components/message/message.css +1 -0
  40. package/dist/collection/components/modal/modal.css +1 -0
  41. package/dist/collection/components/popover-canvas/popover-canvas.css +1 -0
  42. package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.css +1 -0
  43. package/dist/collection/components/popover-menu/popover-menu.css +1 -0
  44. package/dist/collection/components/radio-button/radio-button.css +1 -0
  45. package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.css +1 -0
  46. package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.css +1 -1
  47. package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.css +1 -0
  48. package/dist/collection/components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.css +1 -0
  49. package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css +1 -0
  50. package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css +1 -1
  51. package/dist/collection/components/side-menu/side-menu-overlay/side-menu-overlay.css +1 -0
  52. package/dist/collection/components/side-menu/side-menu-user/side-menu-user.css +1 -0
  53. package/dist/collection/components/side-menu/side-menu-user-image/side-menu-user-image.css +1 -0
  54. package/dist/collection/components/side-menu/side-menu-user-label/side-menu-user-label.css +1 -0
  55. package/dist/collection/components/side-menu/side-menu.css +1 -1
  56. package/dist/collection/components/slider/slider.css +5 -0
  57. package/dist/collection/components/slider/slider.js +13 -8
  58. package/dist/collection/components/spinner/spinner.css +1 -0
  59. package/dist/collection/components/stepper/step/step.css +1 -0
  60. package/dist/collection/components/stepper/stepper.css +1 -0
  61. package/dist/collection/components/table/table/table.css +1 -0
  62. package/dist/collection/components/table/table-body/table-body.css +1 -0
  63. package/dist/collection/components/table/table-body-cell/table-body-cell.css +1 -0
  64. package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.css +1 -0
  65. package/dist/collection/components/table/table-body-row/table-body-row.css +1 -0
  66. package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css +1 -0
  67. package/dist/collection/components/table/table-footer/table-footer.css +1 -0
  68. package/dist/collection/components/table/table-header/table-header.css +1 -0
  69. package/dist/collection/components/table/table-header-cell/table-header-cell.css +1 -0
  70. package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.css +1 -0
  71. package/dist/collection/components/table/table-toolbar/table-toolbar.css +1 -0
  72. package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css +1 -0
  73. package/dist/collection/components/tabs/folder-tabs/folder-tabs.css +1 -0
  74. package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.css +1 -0
  75. package/dist/collection/components/tabs/inline-tabs/inline-tabs.css +1 -0
  76. package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.css +1 -0
  77. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +1 -0
  78. package/dist/collection/components/text-field/text-field.css +1 -0
  79. package/dist/collection/components/textarea/textarea.css +1 -0
  80. package/dist/collection/components/toast/toast.css +1 -0
  81. package/dist/collection/components/toggle/toggle.css +1 -0
  82. package/dist/collection/components/tooltip/tooltip.css +1 -0
  83. package/dist/components/tds-slider.js +14 -9
  84. package/dist/esm/tds-slider.entry.js +14 -9
  85. package/dist/tegel/p-c64f2fba.entry.js +1 -0
  86. package/dist/tegel/tegel.css +2 -2
  87. package/dist/tegel/tegel.esm.js +1 -1
  88. package/package.json +1 -1
  89. package/dist/tegel/p-f04a31b1.entry.js +0 -1
package/dist/collection/components/table/table-header/table-header.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host {
2
3
  box-sizing: border-box;
3
4
  display: table-header-group;
package/dist/collection/components/table/table-header-cell/table-header-cell.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host(.tds-table__header-cell) {
2
3
  box-sizing: border-box;
3
4
  font: var(--tds-headline-07);
package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host {
2
3
  position: relative;
3
4
  }
package/dist/collection/components/table/table-toolbar/table-toolbar.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host {
2
3
  box-sizing: border-box;
3
4
  display: table-caption;
package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host {
2
3
  box-sizing: border-box;
3
4
  position: relative;
package/dist/collection/components/tabs/folder-tabs/folder-tabs.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host {
2
3
  box-sizing: border-box;
3
4
  overflow: hidden;
package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host {
2
3
  box-sizing: border-box;
3
4
  display: block;
package/dist/collection/components/tabs/inline-tabs/inline-tabs.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host {
2
3
  box-sizing: border-box;
3
4
  display: flex;
package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host {
2
3
  box-sizing: border-box;
3
4
  display: block;
package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host {
2
3
  box-sizing: border-box;
3
4
  display: flex;
package/dist/collection/components/text-field/text-field.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  .text-field-input-lg {
2
3
  all: unset;
3
4
  border-radius: 4px 4px 0 0;
package/dist/collection/components/textarea/textarea.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  .textarea-container {
2
3
  border-radius: 4px 4px 0 0;
3
4
  position: relative;
package/dist/collection/components/toast/toast.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  :host(.hide) {
2
3
  display: none;
3
4
  visibility: hidden;
package/dist/collection/components/toggle/toggle.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  .tds-toggle .disabled {
2
3
  cursor: not-allowed;
3
4
  }
package/dist/collection/components/tooltip/tooltip.css CHANGED
@@ -1,3 +1,4 @@
1
+ /** The breakpoint at which the layout changes from fixed size to full-width. */
1
2
  .tds-tooltip {
2
3
  box-sizing: border-box;
3
4
  font: var(--tds-detail-05);
package/dist/components/tds-slider.js CHANGED
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js
2
2
  import { g as generateUniqueId } from './p-11648030.js';
3
3
  import { d as defineCustomElement$2 } from './p-8a5ff20b.js';
4
4
 
5
- const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-disabled)}";
5
+ const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-disabled)}";
6
6
  const TdsSliderStyle0 = sliderCss;
7
7
 
8
8
  const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
@@ -63,6 +63,11 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
63
63
  }
64
64
  handleRelease(event) {
65
65
  if (!this.thumbGrabbed) {
66
+ const clickedOnTrack = event.target === this.trackElement || event.target === this.trackFillElement;
67
+ if (clickedOnTrack) {
68
+ this.thumbCore(event);
69
+ this.trackElement.focus();
70
+ }
66
71
  return;
67
72
  }
68
73
  this.thumbGrabbed = false;
@@ -103,7 +108,7 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
103
108
  const numTicks = parseInt(this.ticks);
104
109
  const trackRect = this.trackElement.getBoundingClientRect();
105
110
  let localLeft = 0;
106
- if (event.type === 'mousemove') {
111
+ if (event.type === 'mousemove' || event.type === 'mouseup') {
107
112
  localLeft = event.clientX - trackRect.left;
108
113
  }
109
114
  else if (event.type === 'touchmove') {
@@ -295,24 +300,24 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
295
300
  this.updateTrack();
296
301
  }
297
302
  render() {
298
- return (h("div", { key: '97876b74bf59cd573e1152be8cbb63230699254c', class: {
303
+ return (h("div", { key: 'c0097f8935d6c798124dd0248fd92a6e76b70a4d', class: {
299
304
  'tds-slider-wrapper': true,
300
305
  'read-only': this.readOnly,
301
- } }, h("input", { key: '2c4da5a98faa64da0b1dfcf50d24a12e40a4a5eb', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '4d73062c50424d9fa2dd0fb39e037b05b683bac4', class: {
306
+ } }, h("input", { key: 'd646fb0d7cd1c1faacdfb3e4b90587e7545d7477', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '18a15cef6af652698595d57713accbbe34017fe1', class: {
302
307
  'tds-slider': true,
303
308
  'disabled': this.disabled,
304
309
  'tds-slider-small': this.useSmall,
305
310
  }, ref: (el) => {
306
311
  this.wrapperElement = el;
307
- } }, h("label", { key: '06ebaa8e65dbd756e791397ac973f2e4b48a236f', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '6d4630fa95a07dd2aa759dc704ec5644c90b2ae8', class: "tds-slider__input-values" }, h("div", { key: 'f2c7a0aea572e9fc676ff13bdeb844cf826d6ebd', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '38f8de49b45422b0d8350f949b6aa19821850fbf', class: "tds-slider__controls" }, h("div", { key: 'd4d68a938005efa66086ff27eec8bd645afb3064', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '4242ca8c4906247d6787dfe57f3d51957e7e258b', name: "minus", size: "16px" })))), h("div", { key: '93f9dbbd8eac37200585c44ebe4333f9525c6e43', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: '168d4f7f5161176a9f4ea1f6a1fc9a77d7c6cd03', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '74839e00f3272e3ca055d95a2ee3cf049e7cb356', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '4aabccacc7ac85450ed1cb49509acf2a944d8d2f', class: "tds-slider__track", ref: (el) => {
312
+ } }, h("label", { key: 'b0770ce0a08a65aac30c95c499da756855c73dc9', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '3d4d2fc521b1803a027fa9b9f559480fee777901', class: "tds-slider__input-values" }, h("div", { key: '466ab197a801f21dc2f48921ea4fa665098054c6', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '1ab9bb7ea8953c105e0b9796762fd5b16b805c64', class: "tds-slider__controls" }, h("div", { key: 'edc63369cec158c118a8b61021c4afd448acf7bc', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '08018f9bbfb0425e7983cbd6bd51bc8f3ec5e31b', name: "minus", size: "16px" })))), h("div", { key: '370efbc22ee6e7846a9d6ae655c5dd3c03378e36', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: 'b6f4394ae47b01024e29280e648e8ff806bad78e', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '1e77a920f6765a4ecd1eaced040b2ed5c66a99ca', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: 'c2890a8d8bc932c61226c79a01043d15bad740a7', class: "tds-slider__track", ref: (el) => {
308
313
  this.trackElement = el;
309
- }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: 'f220598a0d0716b4ae4ee1e0abaf757e8319cda4', class: "tds-slider__track-fill", ref: (el) => {
314
+ }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: 'f8b1bc023a6073f2c2a9703ef2cacfecd6e7cc1c', class: "tds-slider__track-fill", ref: (el) => {
310
315
  this.trackFillElement = el;
311
- } }), h("div", { key: 'd8c8d70fd482f1593c1ace3460704f4a621fce93', class: "tds-slider__thumb", ref: (el) => {
316
+ } }), h("div", { key: '18b1514b75e398225513d01ebf8cc51a00efbf96', class: "tds-slider__thumb", ref: (el) => {
312
317
  this.thumbElement = el;
313
- }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '7de8a958e438039c05d750f12edc989c2b57fd38', class: "tds-slider__value" }, this.value, h("svg", { key: 'd2d6da13d2f9dda11f78a7fecea775fcd09ab67a', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '83749d10d407c5abd8cf31f014c7f65d5185f1ea', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: 'da9426a77f8ac684e36c4b0a56a5ddf0c0d57ec7', class: "tds-slider__thumb-inner", ref: (el) => {
318
+ }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '5ca02778d43da7f7b5b8d532c3aa1aeb325b1d3b', class: "tds-slider__value" }, this.value, h("svg", { key: '1fe3190597559141e241e6199ccc74ea5d491106', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '50f9133e51d6e5bfa38b94c56758a1480c2e567d', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '1848440bcb20f1cf92ca61fcd40e9d5291cf79de', class: "tds-slider__thumb-inner", ref: (el) => {
314
319
  this.thumbInnerElement = el;
315
- } })))), this.useInput && (h("div", { key: '8ec8f9b8ba71f9eb8e1fcad271c7233546c4b275', class: "tds-slider__input-values" }, h("div", { key: '4c98168105901713177ace6bcdec08e097dae964', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '5d93b7b2263b72fad8aac6eff379f2fe44518da3', class: "tds-slider__input-field-wrapper" }, h("input", { key: '30374a2e686e3bb7b01fa81028a7bb04320696ba', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'aa81729bae550c1a6dc0a6eaa3f8b04fd8e5fe7f', class: "tds-slider__controls" }, h("div", { key: '087ff877023f4db8d6fcb6317cbdb57cec458a0c', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: 'df4b1dbb4ec735ded7032545bbcfda2757462862', name: "plus", size: "16px" })))))));
320
+ } })))), this.useInput && (h("div", { key: '408e5d0d9e728b7ece3921e4c568ead90c8680f8', class: "tds-slider__input-values" }, h("div", { key: '7119add8d905c5319999647016195a0b7c1c182a', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '0996a111128ba9f78bcd63a19b81a55193292106', class: "tds-slider__input-field-wrapper" }, h("input", { key: '0c392592e44cbaa741f01cd9d5269a4213d52de4', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'f0e9bf533e66ec284231ab5da2f0c6e909ca3b5a', class: "tds-slider__controls" }, h("div", { key: 'b7f0f81bbadfc7c132d0ff0e8cb5441f9d7f6f55', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: 'e44a34ef12e36b84c0907b467ca21f7c774e3736', name: "plus", size: "16px" })))))));
316
321
  }
317
322
  static get watchers() { return {
318
323
  "value": ["handleValueUpdate"]
package/dist/esm/tds-slider.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-51d04e39.js';
2
2
  import { g as generateUniqueId } from './generateUniqueId-7934d315.js';
3
3
 
4
- const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-disabled)}";
4
+ const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-disabled)}";
5
5
  const TdsSliderStyle0 = sliderCss;
6
6
 
7
7
  const TdsSlider = class {
@@ -61,6 +61,11 @@ const TdsSlider = class {
61
61
  }
62
62
  handleRelease(event) {
63
63
  if (!this.thumbGrabbed) {
64
+ const clickedOnTrack = event.target === this.trackElement || event.target === this.trackFillElement;
65
+ if (clickedOnTrack) {
66
+ this.thumbCore(event);
67
+ this.trackElement.focus();
68
+ }
64
69
  return;
65
70
  }
66
71
  this.thumbGrabbed = false;
@@ -101,7 +106,7 @@ const TdsSlider = class {
101
106
  const numTicks = parseInt(this.ticks);
102
107
  const trackRect = this.trackElement.getBoundingClientRect();
103
108
  let localLeft = 0;
104
- if (event.type === 'mousemove') {
109
+ if (event.type === 'mousemove' || event.type === 'mouseup') {
105
110
  localLeft = event.clientX - trackRect.left;
106
111
  }
107
112
  else if (event.type === 'touchmove') {
@@ -293,24 +298,24 @@ const TdsSlider = class {
293
298
  this.updateTrack();
294
299
  }
295
300
  render() {
296
- return (h("div", { key: '97876b74bf59cd573e1152be8cbb63230699254c', class: {
301
+ return (h("div", { key: 'c0097f8935d6c798124dd0248fd92a6e76b70a4d', class: {
297
302
  'tds-slider-wrapper': true,
298
303
  'read-only': this.readOnly,
299
- } }, h("input", { key: '2c4da5a98faa64da0b1dfcf50d24a12e40a4a5eb', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '4d73062c50424d9fa2dd0fb39e037b05b683bac4', class: {
304
+ } }, h("input", { key: 'd646fb0d7cd1c1faacdfb3e4b90587e7545d7477', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '18a15cef6af652698595d57713accbbe34017fe1', class: {
300
305
  'tds-slider': true,
301
306
  'disabled': this.disabled,
302
307
  'tds-slider-small': this.useSmall,
303
308
  }, ref: (el) => {
304
309
  this.wrapperElement = el;
305
- } }, h("label", { key: '06ebaa8e65dbd756e791397ac973f2e4b48a236f', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '6d4630fa95a07dd2aa759dc704ec5644c90b2ae8', class: "tds-slider__input-values" }, h("div", { key: 'f2c7a0aea572e9fc676ff13bdeb844cf826d6ebd', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '38f8de49b45422b0d8350f949b6aa19821850fbf', class: "tds-slider__controls" }, h("div", { key: 'd4d68a938005efa66086ff27eec8bd645afb3064', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '4242ca8c4906247d6787dfe57f3d51957e7e258b', name: "minus", size: "16px" })))), h("div", { key: '93f9dbbd8eac37200585c44ebe4333f9525c6e43', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: '168d4f7f5161176a9f4ea1f6a1fc9a77d7c6cd03', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '74839e00f3272e3ca055d95a2ee3cf049e7cb356', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '4aabccacc7ac85450ed1cb49509acf2a944d8d2f', class: "tds-slider__track", ref: (el) => {
310
+ } }, h("label", { key: 'b0770ce0a08a65aac30c95c499da756855c73dc9', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '3d4d2fc521b1803a027fa9b9f559480fee777901', class: "tds-slider__input-values" }, h("div", { key: '466ab197a801f21dc2f48921ea4fa665098054c6', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '1ab9bb7ea8953c105e0b9796762fd5b16b805c64', class: "tds-slider__controls" }, h("div", { key: 'edc63369cec158c118a8b61021c4afd448acf7bc', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '08018f9bbfb0425e7983cbd6bd51bc8f3ec5e31b', name: "minus", size: "16px" })))), h("div", { key: '370efbc22ee6e7846a9d6ae655c5dd3c03378e36', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: 'b6f4394ae47b01024e29280e648e8ff806bad78e', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '1e77a920f6765a4ecd1eaced040b2ed5c66a99ca', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: 'c2890a8d8bc932c61226c79a01043d15bad740a7', class: "tds-slider__track", ref: (el) => {
306
311
  this.trackElement = el;
307
- }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: 'f220598a0d0716b4ae4ee1e0abaf757e8319cda4', class: "tds-slider__track-fill", ref: (el) => {
312
+ }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: 'f8b1bc023a6073f2c2a9703ef2cacfecd6e7cc1c', class: "tds-slider__track-fill", ref: (el) => {
308
313
  this.trackFillElement = el;
309
- } }), h("div", { key: 'd8c8d70fd482f1593c1ace3460704f4a621fce93', class: "tds-slider__thumb", ref: (el) => {
314
+ } }), h("div", { key: '18b1514b75e398225513d01ebf8cc51a00efbf96', class: "tds-slider__thumb", ref: (el) => {
310
315
  this.thumbElement = el;
311
- }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '7de8a958e438039c05d750f12edc989c2b57fd38', class: "tds-slider__value" }, this.value, h("svg", { key: 'd2d6da13d2f9dda11f78a7fecea775fcd09ab67a', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '83749d10d407c5abd8cf31f014c7f65d5185f1ea', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: 'da9426a77f8ac684e36c4b0a56a5ddf0c0d57ec7', class: "tds-slider__thumb-inner", ref: (el) => {
316
+ }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '5ca02778d43da7f7b5b8d532c3aa1aeb325b1d3b', class: "tds-slider__value" }, this.value, h("svg", { key: '1fe3190597559141e241e6199ccc74ea5d491106', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '50f9133e51d6e5bfa38b94c56758a1480c2e567d', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '1848440bcb20f1cf92ca61fcd40e9d5291cf79de', class: "tds-slider__thumb-inner", ref: (el) => {
312
317
  this.thumbInnerElement = el;
313
- } })))), this.useInput && (h("div", { key: '8ec8f9b8ba71f9eb8e1fcad271c7233546c4b275', class: "tds-slider__input-values" }, h("div", { key: '4c98168105901713177ace6bcdec08e097dae964', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '5d93b7b2263b72fad8aac6eff379f2fe44518da3', class: "tds-slider__input-field-wrapper" }, h("input", { key: '30374a2e686e3bb7b01fa81028a7bb04320696ba', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'aa81729bae550c1a6dc0a6eaa3f8b04fd8e5fe7f', class: "tds-slider__controls" }, h("div", { key: '087ff877023f4db8d6fcb6317cbdb57cec458a0c', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: 'df4b1dbb4ec735ded7032545bbcfda2757462862', name: "plus", size: "16px" })))))));
318
+ } })))), this.useInput && (h("div", { key: '408e5d0d9e728b7ece3921e4c568ead90c8680f8', class: "tds-slider__input-values" }, h("div", { key: '7119add8d905c5319999647016195a0b7c1c182a', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '0996a111128ba9f78bcd63a19b81a55193292106', class: "tds-slider__input-field-wrapper" }, h("input", { key: '0c392592e44cbaa741f01cd9d5269a4213d52de4', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'f0e9bf533e66ec284231ab5da2f0c6e909ca3b5a', class: "tds-slider__controls" }, h("div", { key: 'b7f0f81bbadfc7c132d0ff0e8cb5441f9d7f6f55', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: 'e44a34ef12e36b84c0907b467ca21f7c774e3736', name: "plus", size: "16px" })))))));
314
319
  }
315
320
  static get watchers() { return {
316
321
  "value": ["handleValueUpdate"]
package/dist/tegel/p-c64f2fba.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as s,c as t,h as e}from"./p-2049fab2.js";import{g as i}from"./p-11648030.js";const d=class{constructor(e){s(this,e),this.tdsChange=t(this,"tdsChange",6),this.tdsInput=t(this,"tdsInput",6),this.wrapperElement=null,this.thumbElement=null,this.thumbInnerElement=null,this.trackElement=null,this.trackFillElement=null,this.thumbGrabbed=!1,this.thumbLeft=0,this.tickValues=[],this.useControls=!1,this.useInput=!1,this.useSmall=!1,this.useSnapping=!1,this.supposedValueSlot=-1,this.resizeObserverAdded=!1,this.label="",this.value="0",this.min="0",this.max="100",this.ticks="0",this.showTickNumbers=!1,this.tooltip=!1,this.disabled=!1,this.readOnly=!1,this.controls=!1,this.input=!1,this.step="1",this.name="",this.thumbSize="lg",this.snap=!1,this.sliderId=i()}async reset(){this.componentWillLoad(),this.componentDidLoad()}handleKeydown(s){switch(s.key){case"ArrowLeft":case"ArrowDown":case"-":this.stepLeft(s);break;case"ArrowRight":case"ArrowUp":case"+":this.stepRight(s)}}handleRelease(s){this.thumbGrabbed?(this.thumbGrabbed=!1,this.thumbInnerElement.classList.remove("pressed"),this.updateValue(s),this.trackElement.focus()):(s.target===this.trackElement||s.target===this.trackFillElement)&&(this.thumbCore(s),this.trackElement.focus())}handleMove(s){this.thumbGrabbed&&this.thumbCore(s)}handleValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.updateTrack()}updateSupposedValueSlot(s){const t=parseInt(this.ticks),e=this.getTrackWidth(),i=Math.round(e/(t+1)),d=Math.round(s/i)*i;let r=0;return d>=0&&d<=e?r=d:d>e?r=e:d<0&&(r=0),this.supposedValueSlot=Math.round(r/i),d}thumbCore(s){const t=parseInt(this.ticks),e=this.trackElement.getBoundingClientRect();let i=0;"mousemove"===s.type||"mouseup"===s.type?i=s.clientX-e.left:"touchmove"===s.type?i=s.touches[0].clientX-e.left:console.warn("Slider component: Unsupported event!"),this.supposedValueSlot=-1,this.useSnapping&&t>0&&(i=this.updateSupposedValueSlot(i)),this.thumbLeft=this.constrainThumb(i),this.thumbElement.style.left=`${this.thumbLeft}px`,this.updateValue(s)}updateTrack(){const s=this.getTrackWidth();this.trackFillElement&&(this.trackFillElement.style.width=this.thumbLeft/s*100+"%")}updateValue(s){const t=this.getTrackWidth(),e=parseInt(this.ticks);if(this.useSnapping&&e){const s=this.tickValues[this.supposedValueSlot];this.value=`${s}`,this.calculateThumbLeftFromValue(s)}else{const s=this.thumbLeft/t;this.value=`${Math.trunc(parseFloat(this.min)+s*(parseFloat(this.max)-parseFloat(this.min)))}`}this.updateTrack(),this.tdsInput.emit({value:this.value}),"touchend"!==s.type&&"mouseup"!==s.type||this.tdsChange.emit({value:this.value})}forceValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.tdsChange.emit({value:this.value}),this.updateTrack()}constrainThumb(s){const t=this.getTrackWidth();return s<0?0:s>t?t:s}getTrackWidth(){if(!this.trackElement)return 0;const s=this.trackElement.getBoundingClientRect();return s.right-s.left}calculateThumbLeftFromValue(s){const t=s,e=this.getTrackWidth(),i=t-parseFloat(this.min),d=parseFloat(this.max)-parseFloat(this.min);this.thumbLeft=i/d*e,this.updateSupposedValueSlot(this.thumbLeft),this.thumbElement&&(this.thumbElement.style.left=`${this.thumbLeft}px`)}updateSliderValueOnInputChange(s){let t=parseInt(s.target.value);t!==parseInt(this.value)&&(t<parseFloat(this.min)?t=parseFloat(this.min):t>parseFloat(this.max)&&(t=parseFloat(this.max)),this.forceValueUpdate(String(t)))}handleInputFieldEnterPress(s){s.stopPropagation(),"Enter"===s.key&&(this.updateSliderValueOnInputChange(s),s.target.blur())}grabThumb(){this.readOnly||(this.thumbGrabbed=!0,this.thumbInnerElement.classList.add("pressed"))}calculateInputSizeFromMax(){return this.max.length}controlsStep(s,t){if(this.readOnly||this.disabled)return;const e=parseInt(this.ticks);if(this.useSnapping&&e>0)this.supposedValueSlot+=s>0?1:-1,this.supposedValueSlot<0?this.supposedValueSlot=0:this.supposedValueSlot>e+1&&(this.supposedValueSlot=e+1),this.updateValue(t);else{const t=this.getTrackWidth(),e=this.thumbLeft/t;let i=parseFloat(this.min)+e*(parseFloat(this.max)-parseFloat(this.min));i+=s,i=Math.round(i),i<parseFloat(this.min)?i=parseFloat(this.min):i>parseFloat(this.max)&&(i=parseFloat(this.max)),this.value=`${i}`,this.forceValueUpdate(this.value)}}stepLeft(s){this.controlsStep(-parseInt(this.step),s)}stepRight(s){this.controlsStep(parseInt(this.step),s)}componentWillLoad(){const s=parseInt(this.ticks);if(s>0){this.tickValues=[parseFloat(this.min)];const t=(parseFloat(this.max)-parseFloat(this.min))/(s+1);for(let e=1;e<s+1;e++)this.tickValues.push(parseFloat(this.min)+Math.round(t*e));this.tickValues.push(parseFloat(this.max))}this.useInput=!1,this.useControls=!1,this.controls?this.useControls=!0:this.input&&(this.useInput=!0),this.useSmall="sm"===this.thumbSize,this.useSnapping=this.snap,parseFloat(this.min)>parseFloat(this.max)&&(console.warn("min-prop must have a higher value than max-prop for the component to work correctly."),this.disabled=!0)}componentDidLoad(){this.resizeObserverAdded||(this.resizeObserverAdded=!0,new ResizeObserver((()=>{this.calculateThumbLeftFromValue(this.value),this.updateTrack()})).observe(this.wrapperElement)),this.calculateThumbLeftFromValue(this.value),this.updateTrack()}render(){return e("div",{key:"c0097f8935d6c798124dd0248fd92a6e76b70a4d",class:{"tds-slider-wrapper":!0,"read-only":this.readOnly}},e("input",{key:"d646fb0d7cd1c1faacdfb3e4b90587e7545d7477",class:"tds-slider-native-element",type:"range",name:this.name,min:this.min,max:this.max,value:this.value,disabled:this.disabled}),e("div",{key:"18a15cef6af652698595d57713accbbe34017fe1",class:{"tds-slider":!0,disabled:this.disabled,"tds-slider-small":this.useSmall},ref:s=>{this.wrapperElement=s}},e("label",{key:"b0770ce0a08a65aac30c95c499da756855c73dc9",class:this.showTickNumbers&&"offset"},this.label),this.useInput&&e("div",{key:"3d4d2fc521b1803a027fa9b9f559480fee777901",class:"tds-slider__input-values"},e("div",{key:"466ab197a801f21dc2f48921ea4fa665098054c6",class:"tds-slider__input-value min-value"},this.min)),this.useControls&&e("div",{key:"1ab9bb7ea8953c105e0b9796762fd5b16b805c64",class:"tds-slider__controls"},e("div",{key:"edc63369cec158c118a8b61021c4afd448acf7bc",class:"tds-slider__control tds-slider__control-minus",onClick:s=>this.stepLeft(s)},e("tds-icon",{key:"08018f9bbfb0425e7983cbd6bd51bc8f3ec5e31b",name:"minus",size:"16px"}))),e("div",{key:"370efbc22ee6e7846a9d6ae655c5dd3c03378e36",class:"tds-slider-inner"},this.tickValues.length>0&&e("div",{key:"b6f4394ae47b01024e29280e648e8ff806bad78e",class:"tds-slider__value-dividers-wrapper"},e("div",{key:"1e77a920f6765a4ecd1eaced040b2ed5c66a99ca",class:"tds-slider__value-dividers"},this.tickValues.map((s=>e("div",{class:"tds-slider__value-divider"},this.showTickNumbers&&e("span",null,s)))))),e("div",{key:"c2890a8d8bc932c61226c79a01043d15bad740a7",class:"tds-slider__track",ref:s=>{this.trackElement=s},tabindex:this.disabled?"-1":"0"},e("div",{key:"f8b1bc023a6073f2c2a9703ef2cacfecd6e7cc1c",class:"tds-slider__track-fill",ref:s=>{this.trackFillElement=s}}),e("div",{key:"18b1514b75e398225513d01ebf8cc51a00efbf96",class:"tds-slider__thumb",ref:s=>{this.thumbElement=s},onMouseDown:()=>this.grabThumb(),onTouchStart:()=>this.grabThumb()},this.tooltip&&e("div",{key:"5ca02778d43da7f7b5b8d532c3aa1aeb325b1d3b",class:"tds-slider__value"},this.value,e("svg",{key:"1fe3190597559141e241e6199ccc74ea5d491106",width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"50f9133e51d6e5bfa38b94c56758a1480c2e567d",d:"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z",fill:"currentColor"}))),e("div",{key:"1848440bcb20f1cf92ca61fcd40e9d5291cf79de",class:"tds-slider__thumb-inner",ref:s=>{this.thumbInnerElement=s}})))),this.useInput&&e("div",{key:"408e5d0d9e728b7ece3921e4c568ead90c8680f8",class:"tds-slider__input-values"},e("div",{key:"7119add8d905c5319999647016195a0b7c1c182a",class:"tds-slider__input-value",onClick:s=>this.stepLeft(s)},this.max),e("div",{key:"0996a111128ba9f78bcd63a19b81a55193292106",class:"tds-slider__input-field-wrapper"},e("input",{key:"0c392592e44cbaa741f01cd9d5269a4213d52de4",size:this.calculateInputSizeFromMax(),class:"tds-slider__input-field",value:this.value,readOnly:this.readOnly,onBlur:s=>this.updateSliderValueOnInputChange(s),onKeyDown:s=>this.handleInputFieldEnterPress(s),type:"number",min:this.min,max:this.max}))),this.useControls&&e("div",{key:"f0e9bf533e66ec284231ab5da2f0c6e909ca3b5a",class:"tds-slider__controls"},e("div",{key:"b7f0f81bbadfc7c132d0ff0e8cb5441f9d7f6f55",class:"tds-slider__control tds-slider__control-plus",onClick:s=>this.stepRight(s)},e("tds-icon",{key:"e44a34ef12e36b84c0907b467ca21f7c774e3736",name:"plus",size:"16px"})))))}static get watchers(){return{value:["handleValueUpdate"]}}};d.style='tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}.tds-slider-wrapper{width:100%}.tds-slider-wrapper.read-only{pointer-events:none}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-grey-700);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}.tds-slider .tds-slider__input-values .tds-slider__input-value.min-value{padding-left:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper{background-color:var(--tds-slider-inputfield-background);display:flex;align-items:center;justify-content:center;border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:" ";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track:focus{outline:0}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner{width:24px;height:24px}.tds-slider .tds-slider__track:focus .tds-slider__thumb .tds-slider__thumb-inner::before{display:block;opacity:0.08}.tds-slider .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus svg,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus svg{fill:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper{pointer-events:none}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field{color:var(--tds-slider-disabled);pointer-events:none}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-disabled)}.tds-slider.disabled .tds-slider__thumb{pointer-events:none}.tds-slider.disabled .tds-slider__thumb .tds-slider__thumb-inner{background-color:var(--tds-slider-disabled);cursor:default}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner{width:16px;height:16px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner::before{width:40px;height:40px}.tds-slider.tds-slider-small .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:20px;height:20px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-disabled)}';export{d as tds_slider}