@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.
- package/dist/cjs/tds-slider.cjs.entry.js +14 -9
- package/dist/collection/components/accordion/accordion-item/accordion-item.css +1 -0
- package/dist/collection/components/accordion/accordion.css +1 -0
- package/dist/collection/components/badge/badge.css +1 -0
- package/dist/collection/components/banner/banner.css +1 -0
- package/dist/collection/components/block/block.css +1 -0
- package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css +1 -0
- package/dist/collection/components/breadcrumbs/breadcrumbs.css +1 -0
- package/dist/collection/components/button/button.css +1 -0
- package/dist/collection/components/card/card.css +1 -0
- package/dist/collection/components/checkbox/checkbox.css +1 -0
- package/dist/collection/components/chip/chip.css +1 -0
- package/dist/collection/components/datetime/datetime.css +1 -0
- package/dist/collection/components/divider/divider.css +1 -0
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css +1 -0
- package/dist/collection/components/dropdown/dropdown.css +1 -0
- package/dist/collection/components/footer/footer-group/footer-group.css +1 -0
- package/dist/collection/components/footer/footer-item/footer-item.css +1 -0
- package/dist/collection/components/footer/footer.css +1 -0
- package/dist/collection/components/header/core-header-item/core-header-item.css +1 -0
- package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.css +1 -0
- package/dist/collection/components/header/header-dropdown/header-dropdown.css +1 -0
- package/dist/collection/components/header/header-dropdown-list/header-dropdown-list.css +1 -0
- package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css +1 -0
- package/dist/collection/components/header/header-dropdown-list-user/header-dropdown-list-user.css +1 -0
- package/dist/collection/components/header/header-hamburger/header-hamburger.css +1 -1
- package/dist/collection/components/header/header-item/header-item.css +1 -0
- package/dist/collection/components/header/header-launcher/header-launcher.css +1 -0
- package/dist/collection/components/header/header-launcher-button/header-launcher-button.css +1 -0
- package/dist/collection/components/header/header-launcher-grid/header-launcher-grid.css +1 -0
- package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.css +1 -0
- package/dist/collection/components/header/header-launcher-grid-title/header-launcher-grid-title.css +1 -0
- package/dist/collection/components/header/header-launcher-list-item/header-launcher-list-item.css +1 -0
- package/dist/collection/components/header/header-launcher-list-title/header-launcher-list-title.css +1 -0
- package/dist/collection/components/header/header-title/header-title.css +1 -0
- package/dist/collection/components/header/header.css +1 -1
- package/dist/collection/components/icon/icon.css +1 -0
- package/dist/collection/components/link/link.css +1 -0
- package/dist/collection/components/message/message.css +1 -0
- package/dist/collection/components/modal/modal.css +1 -0
- package/dist/collection/components/popover-canvas/popover-canvas.css +1 -0
- package/dist/collection/components/popover-menu/popover-menu-item/popover-menu-item.css +1 -0
- package/dist/collection/components/popover-menu/popover-menu.css +1 -0
- package/dist/collection/components/radio-button/radio-button.css +1 -0
- package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.css +1 -0
- package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.css +1 -1
- package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.css +1 -0
- package/dist/collection/components/side-menu/side-menu-dropdown-list/side-menu-dropdown-list.css +1 -0
- package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css +1 -0
- package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css +1 -1
- package/dist/collection/components/side-menu/side-menu-overlay/side-menu-overlay.css +1 -0
- package/dist/collection/components/side-menu/side-menu-user/side-menu-user.css +1 -0
- package/dist/collection/components/side-menu/side-menu-user-image/side-menu-user-image.css +1 -0
- package/dist/collection/components/side-menu/side-menu-user-label/side-menu-user-label.css +1 -0
- package/dist/collection/components/side-menu/side-menu.css +1 -1
- package/dist/collection/components/slider/slider.css +5 -0
- package/dist/collection/components/slider/slider.js +13 -8
- package/dist/collection/components/spinner/spinner.css +1 -0
- package/dist/collection/components/stepper/step/step.css +1 -0
- package/dist/collection/components/stepper/stepper.css +1 -0
- package/dist/collection/components/table/table/table.css +1 -0
- package/dist/collection/components/table/table-body/table-body.css +1 -0
- package/dist/collection/components/table/table-body-cell/table-body-cell.css +1 -0
- package/dist/collection/components/table/table-body-input-wrapper/table-body-input-wrapper.css +1 -0
- package/dist/collection/components/table/table-body-row/table-body-row.css +1 -0
- package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css +1 -0
- package/dist/collection/components/table/table-footer/table-footer.css +1 -0
- package/dist/collection/components/table/table-header/table-header.css +1 -0
- package/dist/collection/components/table/table-header-cell/table-header-cell.css +1 -0
- package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.css +1 -0
- package/dist/collection/components/table/table-toolbar/table-toolbar.css +1 -0
- package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css +1 -0
- package/dist/collection/components/tabs/folder-tabs/folder-tabs.css +1 -0
- package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.css +1 -0
- package/dist/collection/components/tabs/inline-tabs/inline-tabs.css +1 -0
- package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.css +1 -0
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +1 -0
- package/dist/collection/components/text-field/text-field.css +1 -0
- package/dist/collection/components/textarea/textarea.css +1 -0
- package/dist/collection/components/toast/toast.css +1 -0
- package/dist/collection/components/toggle/toggle.css +1 -0
- package/dist/collection/components/tooltip/tooltip.css +1 -0
- package/dist/components/tds-slider.js +14 -9
- package/dist/esm/tds-slider.entry.js +14 -9
- package/dist/tegel/p-c64f2fba.entry.js +1 -0
- package/dist/tegel/tegel.css +2 -2
- package/dist/tegel/tegel.esm.js +1 -1
- package/package.json +1 -1
- package/dist/tegel/p-f04a31b1.entry.js +0 -1
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-ca8040ad.js');
|
|
6
6
|
const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
|
|
7
7
|
|
|
8
|
-
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)}";
|
|
8
|
+
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)}";
|
|
9
9
|
const TdsSliderStyle0 = sliderCss;
|
|
10
10
|
|
|
11
11
|
const TdsSlider = class {
|
|
@@ -65,6 +65,11 @@ const TdsSlider = class {
|
|
|
65
65
|
}
|
|
66
66
|
handleRelease(event) {
|
|
67
67
|
if (!this.thumbGrabbed) {
|
|
68
|
+
const clickedOnTrack = event.target === this.trackElement || event.target === this.trackFillElement;
|
|
69
|
+
if (clickedOnTrack) {
|
|
70
|
+
this.thumbCore(event);
|
|
71
|
+
this.trackElement.focus();
|
|
72
|
+
}
|
|
68
73
|
return;
|
|
69
74
|
}
|
|
70
75
|
this.thumbGrabbed = false;
|
|
@@ -105,7 +110,7 @@ const TdsSlider = class {
|
|
|
105
110
|
const numTicks = parseInt(this.ticks);
|
|
106
111
|
const trackRect = this.trackElement.getBoundingClientRect();
|
|
107
112
|
let localLeft = 0;
|
|
108
|
-
if (event.type === 'mousemove') {
|
|
113
|
+
if (event.type === 'mousemove' || event.type === 'mouseup') {
|
|
109
114
|
localLeft = event.clientX - trackRect.left;
|
|
110
115
|
}
|
|
111
116
|
else if (event.type === 'touchmove') {
|
|
@@ -297,24 +302,24 @@ const TdsSlider = class {
|
|
|
297
302
|
this.updateTrack();
|
|
298
303
|
}
|
|
299
304
|
render() {
|
|
300
|
-
return (index.h("div", { key: '
|
|
305
|
+
return (index.h("div", { key: 'c0097f8935d6c798124dd0248fd92a6e76b70a4d', class: {
|
|
301
306
|
'tds-slider-wrapper': true,
|
|
302
307
|
'read-only': this.readOnly,
|
|
303
|
-
} }, index.h("input", { key: '
|
|
308
|
+
} }, index.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 }), index.h("div", { key: '18a15cef6af652698595d57713accbbe34017fe1', class: {
|
|
304
309
|
'tds-slider': true,
|
|
305
310
|
'disabled': this.disabled,
|
|
306
311
|
'tds-slider-small': this.useSmall,
|
|
307
312
|
}, ref: (el) => {
|
|
308
313
|
this.wrapperElement = el;
|
|
309
|
-
} }, index.h("label", { key: '
|
|
314
|
+
} }, index.h("label", { key: 'b0770ce0a08a65aac30c95c499da756855c73dc9', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (index.h("div", { key: '3d4d2fc521b1803a027fa9b9f559480fee777901', class: "tds-slider__input-values" }, index.h("div", { key: '466ab197a801f21dc2f48921ea4fa665098054c6', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { key: '1ab9bb7ea8953c105e0b9796762fd5b16b805c64', class: "tds-slider__controls" }, index.h("div", { key: 'edc63369cec158c118a8b61021c4afd448acf7bc', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, index.h("tds-icon", { key: '08018f9bbfb0425e7983cbd6bd51bc8f3ec5e31b', name: "minus", size: "16px" })))), index.h("div", { key: '370efbc22ee6e7846a9d6ae655c5dd3c03378e36', class: "tds-slider-inner" }, this.tickValues.length > 0 && (index.h("div", { key: 'b6f4394ae47b01024e29280e648e8ff806bad78e', class: "tds-slider__value-dividers-wrapper" }, index.h("div", { key: '1e77a920f6765a4ecd1eaced040b2ed5c66a99ca', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (index.h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && index.h("span", null, value))))))), index.h("div", { key: 'c2890a8d8bc932c61226c79a01043d15bad740a7', class: "tds-slider__track", ref: (el) => {
|
|
310
315
|
this.trackElement = el;
|
|
311
|
-
}, tabindex: this.disabled ? '-1' : '0' }, index.h("div", { key: '
|
|
316
|
+
}, tabindex: this.disabled ? '-1' : '0' }, index.h("div", { key: 'f8b1bc023a6073f2c2a9703ef2cacfecd6e7cc1c', class: "tds-slider__track-fill", ref: (el) => {
|
|
312
317
|
this.trackFillElement = el;
|
|
313
|
-
} }), index.h("div", { key: '
|
|
318
|
+
} }), index.h("div", { key: '18b1514b75e398225513d01ebf8cc51a00efbf96', class: "tds-slider__thumb", ref: (el) => {
|
|
314
319
|
this.thumbElement = el;
|
|
315
|
-
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (index.h("div", { key: '
|
|
320
|
+
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (index.h("div", { key: '5ca02778d43da7f7b5b8d532c3aa1aeb325b1d3b', class: "tds-slider__value" }, this.value, index.h("svg", { key: '1fe3190597559141e241e6199ccc74ea5d491106', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" })))), index.h("div", { key: '1848440bcb20f1cf92ca61fcd40e9d5291cf79de', class: "tds-slider__thumb-inner", ref: (el) => {
|
|
316
321
|
this.thumbInnerElement = el;
|
|
317
|
-
} })))), this.useInput && (index.h("div", { key: '
|
|
322
|
+
} })))), this.useInput && (index.h("div", { key: '408e5d0d9e728b7ece3921e4c568ead90c8680f8', class: "tds-slider__input-values" }, index.h("div", { key: '7119add8d905c5319999647016195a0b7c1c182a', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), index.h("div", { key: '0996a111128ba9f78bcd63a19b81a55193292106', class: "tds-slider__input-field-wrapper" }, index.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 && (index.h("div", { key: 'f0e9bf533e66ec284231ab5da2f0c6e909ca3b5a', class: "tds-slider__controls" }, index.h("div", { key: 'b7f0f81bbadfc7c132d0ff0e8cb5441f9d7f6f55', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, index.h("tds-icon", { key: 'e44a34ef12e36b84c0907b467ca21f7c774e3736', name: "plus", size: "16px" })))))));
|
|
318
323
|
}
|
|
319
324
|
static get watchers() { return {
|
|
320
325
|
"value": ["handleValueUpdate"]
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/** The breakpoint at which the layout changes from fixed size to full-width. */
|
|
1
2
|
tds-slider {
|
|
2
3
|
box-sizing: border-box;
|
|
3
4
|
width: 100%;
|
|
@@ -189,6 +190,7 @@ tds-slider input[type=range].tds-slider-native-element {
|
|
|
189
190
|
border-radius: 1px;
|
|
190
191
|
background-color: var(--tds-slider-track-color);
|
|
191
192
|
position: relative;
|
|
193
|
+
cursor: pointer;
|
|
192
194
|
}
|
|
193
195
|
.tds-slider .tds-slider__track:focus {
|
|
194
196
|
outline: 0;
|
|
@@ -237,6 +239,9 @@ tds-slider input[type=range].tds-slider-native-element {
|
|
|
237
239
|
.tds-slider.disabled .tds-slider__value {
|
|
238
240
|
display: none;
|
|
239
241
|
}
|
|
242
|
+
.tds-slider.disabled .tds-slider__track {
|
|
243
|
+
cursor: not-allowed;
|
|
244
|
+
}
|
|
240
245
|
.tds-slider.disabled .tds-slider__track .tds-slider__track-fill {
|
|
241
246
|
background-color: var(--tds-slider-disabled);
|
|
242
247
|
}
|
|
@@ -56,6 +56,11 @@ export class TdsSlider {
|
|
|
56
56
|
}
|
|
57
57
|
handleRelease(event) {
|
|
58
58
|
if (!this.thumbGrabbed) {
|
|
59
|
+
const clickedOnTrack = event.target === this.trackElement || event.target === this.trackFillElement;
|
|
60
|
+
if (clickedOnTrack) {
|
|
61
|
+
this.thumbCore(event);
|
|
62
|
+
this.trackElement.focus();
|
|
63
|
+
}
|
|
59
64
|
return;
|
|
60
65
|
}
|
|
61
66
|
this.thumbGrabbed = false;
|
|
@@ -96,7 +101,7 @@ export class TdsSlider {
|
|
|
96
101
|
const numTicks = parseInt(this.ticks);
|
|
97
102
|
const trackRect = this.trackElement.getBoundingClientRect();
|
|
98
103
|
let localLeft = 0;
|
|
99
|
-
if (event.type === 'mousemove') {
|
|
104
|
+
if (event.type === 'mousemove' || event.type === 'mouseup') {
|
|
100
105
|
localLeft = event.clientX - trackRect.left;
|
|
101
106
|
}
|
|
102
107
|
else if (event.type === 'touchmove') {
|
|
@@ -288,24 +293,24 @@ export class TdsSlider {
|
|
|
288
293
|
this.updateTrack();
|
|
289
294
|
}
|
|
290
295
|
render() {
|
|
291
|
-
return (h("div", { key: '
|
|
296
|
+
return (h("div", { key: 'c0097f8935d6c798124dd0248fd92a6e76b70a4d', class: {
|
|
292
297
|
'tds-slider-wrapper': true,
|
|
293
298
|
'read-only': this.readOnly,
|
|
294
|
-
} }, h("input", { key: '
|
|
299
|
+
} }, 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: {
|
|
295
300
|
'tds-slider': true,
|
|
296
301
|
'disabled': this.disabled,
|
|
297
302
|
'tds-slider-small': this.useSmall,
|
|
298
303
|
}, ref: (el) => {
|
|
299
304
|
this.wrapperElement = el;
|
|
300
|
-
} }, h("label", { key: '
|
|
305
|
+
} }, 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) => {
|
|
301
306
|
this.trackElement = el;
|
|
302
|
-
}, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '
|
|
307
|
+
}, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: 'f8b1bc023a6073f2c2a9703ef2cacfecd6e7cc1c', class: "tds-slider__track-fill", ref: (el) => {
|
|
303
308
|
this.trackFillElement = el;
|
|
304
|
-
} }), h("div", { key: '
|
|
309
|
+
} }), h("div", { key: '18b1514b75e398225513d01ebf8cc51a00efbf96', class: "tds-slider__thumb", ref: (el) => {
|
|
305
310
|
this.thumbElement = el;
|
|
306
|
-
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '
|
|
311
|
+
}, 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) => {
|
|
307
312
|
this.thumbInnerElement = el;
|
|
308
|
-
} })))), this.useInput && (h("div", { key: '
|
|
313
|
+
} })))), 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" })))))));
|
|
309
314
|
}
|
|
310
315
|
static get is() { return "tds-slider"; }
|
|
311
316
|
static get originalStyleUrls() {
|