@scania/tegel 1.49.2-jsx-issue-beta.2 → 1.49.2-jsx-issue-beta.3
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-folder-tabs.cjs.entry.js +4 -2
- package/dist/cjs/tds-inline-tabs.cjs.entry.js +4 -2
- package/dist/cjs/tds-navigation-tabs.cjs.entry.js +6 -4
- package/dist/cjs/tds-slider.cjs.entry.js +9 -9
- package/dist/collection/components/slider/slider.js +9 -9
- package/dist/collection/components/tabs/folder-tabs/folder-tabs.js +4 -2
- package/dist/collection/components/tabs/inline-tabs/inline-tabs.js +4 -2
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +6 -4
- package/dist/components/tds-folder-tabs.js +1 -1
- package/dist/components/tds-inline-tabs.js +1 -1
- package/dist/components/tds-navigation-tabs.js +1 -1
- package/dist/components/tds-slider.js +1 -1
- package/dist/esm/tds-folder-tabs.entry.js +4 -2
- package/dist/esm/tds-inline-tabs.entry.js +4 -2
- package/dist/esm/tds-navigation-tabs.entry.js +6 -4
- package/dist/esm/tds-slider.entry.js +9 -9
- package/dist/tegel/p-2b77f6d6.entry.js +1 -0
- package/dist/tegel/p-2f8d6d31.entry.js +1 -0
- package/dist/tegel/p-354919ea.entry.js +1 -0
- package/dist/tegel/p-a4a3367d.entry.js +1 -0
- package/dist/tegel/tegel.esm.js +1 -1
- package/package.json +1 -1
- package/dist/tegel/p-2630d37d.entry.js +0 -1
- package/dist/tegel/p-5d71b4dc.entry.js +0 -1
- package/dist/tegel/p-6d70c3c3.entry.js +0 -1
- package/dist/tegel/p-d5b0634d.entry.js +0 -1
|
@@ -26,6 +26,8 @@ const TdsFolderTabs = class {
|
|
|
26
26
|
this.tabElements = [];
|
|
27
27
|
this.clickHandlers = new WeakMap();
|
|
28
28
|
this.addResizeObserver = () => {
|
|
29
|
+
if (typeof ResizeObserver === 'undefined')
|
|
30
|
+
return;
|
|
29
31
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
30
32
|
entries.forEach((entry) => {
|
|
31
33
|
const componentWidth = entry.contentRect.width;
|
|
@@ -180,9 +182,9 @@ const TdsFolderTabs = class {
|
|
|
180
182
|
this.removeEventListenerFromTabs();
|
|
181
183
|
}
|
|
182
184
|
render() {
|
|
183
|
-
return (index.h(index.Host, { key: '
|
|
185
|
+
return (index.h(index.Host, { key: 'c012eb13a3d87fd700f5aeebda39b5eab29ef867', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, index.h("div", { key: 'ebee1cf15b1c7425fb675cceedfdbdedacdf7057', class: "wrapper", ref: (el) => {
|
|
184
186
|
this.navWrapperElement = el;
|
|
185
|
-
} }, index.h("button", { key: '
|
|
187
|
+
} }, index.h("button", { key: 'f91db438a2374acc0569bccb5895b0061816cdb2', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, index.h("tds-icon", { key: '497c2b7709f37f12d6c507f9ef4a55851bcfad78', name: "chevron_left", size: "20px" })), index.h("slot", { key: '1b8be04cceec4793fffac9cf26ba603dd578299d', onSlotchange: () => this.handleSlotChange() }), index.h("button", { key: '210096e3f848f40fc3a976bfbeb76f623e06c2bc', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, index.h("tds-icon", { key: 'c1235de0754f7df8418b1609a713e2766be059bd', name: "chevron_right", size: "20px" })))));
|
|
186
188
|
}
|
|
187
189
|
get host() { return index.getElement(this); }
|
|
188
190
|
static get watchers() { return {
|
|
@@ -27,6 +27,8 @@ const TdsInlineTabs = class {
|
|
|
27
27
|
this.tabElements = [];
|
|
28
28
|
this.clickHandlers = new WeakMap();
|
|
29
29
|
this.addResizeObserver = () => {
|
|
30
|
+
if (typeof ResizeObserver === 'undefined')
|
|
31
|
+
return;
|
|
30
32
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
31
33
|
entries.forEach((entry) => {
|
|
32
34
|
const componentWidth = entry.contentRect.width;
|
|
@@ -181,9 +183,9 @@ const TdsInlineTabs = class {
|
|
|
181
183
|
this.removeEventListenerFromTabs();
|
|
182
184
|
}
|
|
183
185
|
render() {
|
|
184
|
-
return (index.h(index.Host, { key: '
|
|
186
|
+
return (index.h(index.Host, { key: 'b4d7b5c75a8e81e49fdb392580852077a44ebe0c', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}`, style: { '--padding-left': `${this.leftPadding}px` } }, index.h("div", { key: '3be2477f0c9f24987aa9b0ca5c43c05fb19a32e3', class: "wrapper", ref: (el) => {
|
|
185
187
|
this.navWrapperElement = el;
|
|
186
|
-
} }, index.h("button", { key: '
|
|
188
|
+
} }, index.h("button", { key: 'e6252b0e4bd02809a09db1183fe7dbea91103cbf', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, index.h("tds-icon", { key: 'd4ce2393b25f728ac2de1702d144f612902dc330', name: "chevron_left", size: "20px" })), index.h("slot", { key: 'd079e254442795f81737b5552ce5ce177683c9fb', onSlotchange: () => this.handleSlotChange() }), index.h("button", { key: '5e3db06d48f3109550974ba0675aef8367373df7', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, index.h("tds-icon", { key: 'cd00e5c5ad1b757104d5c3f7338a45c9243eb25d', name: "chevron_right", size: "20px" })))));
|
|
187
189
|
}
|
|
188
190
|
get host() { return index.getElement(this); }
|
|
189
191
|
static get watchers() { return {
|
|
@@ -27,6 +27,8 @@ const TdsNavigationTabs = class {
|
|
|
27
27
|
this.tabElements = [];
|
|
28
28
|
this.clickHandlers = new WeakMap();
|
|
29
29
|
this.addResizeObserver = () => {
|
|
30
|
+
if (typeof ResizeObserver === 'undefined')
|
|
31
|
+
return;
|
|
30
32
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
31
33
|
entries.forEach((entry) => {
|
|
32
34
|
const componentWidth = entry.contentRect.width;
|
|
@@ -187,15 +189,15 @@ const TdsNavigationTabs = class {
|
|
|
187
189
|
this.removeEventListenerFromTabs();
|
|
188
190
|
}
|
|
189
191
|
render() {
|
|
190
|
-
return (index.h(index.Host, { key: '
|
|
192
|
+
return (index.h(index.Host, { key: '0817601e2f5ca452bef28d7ffdeabf00ba49518b', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, index.h("div", { key: '9a0c29efcbd7120760a0eb0946343d4aceb963ec', class: "wrapper", ref: (el) => {
|
|
191
193
|
this.navWrapperElement = el;
|
|
192
|
-
}, style: { paddingLeft: `${this.leftPadding}px` } }, index.h("button", { key: '
|
|
194
|
+
}, style: { paddingLeft: `${this.leftPadding}px` } }, index.h("button", { key: '2283540cb7864e70445dd3303a9e617cabd5c1a3', "aria-label": this.tdsScrollLeftAriaLabel, class: {
|
|
193
195
|
'scroll-left-button': true,
|
|
194
196
|
'show': this.showLeftScroll,
|
|
195
|
-
}, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, index.h("tds-icon", { key: '
|
|
197
|
+
}, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, index.h("tds-icon", { key: '4de2e1da1fd959ae3ffe5f93298574b3a161f75d', name: "chevron_left", size: "20px" })), index.h("slot", { key: 'cb72d39a1d8f8e0289244cd023311e211ec148e5', onSlotchange: () => this.handleSlotChange() }), index.h("button", { key: '52e0ea24de069a6020e7902ea7222b6f52dc9895', "aria-label": this.tdsScrollRightAriaLabel, class: {
|
|
196
198
|
'scroll-right-button': true,
|
|
197
199
|
'show': this.showRightScroll,
|
|
198
|
-
}, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, index.h("tds-icon", { key: '
|
|
200
|
+
}, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, index.h("tds-icon", { key: '4a4a3a5234d74decb2106f902365b39c20977066', name: "chevron_right", size: "20px" })))));
|
|
199
201
|
}
|
|
200
202
|
get host() { return index.getElement(this); }
|
|
201
203
|
static get watchers() { return {
|
|
@@ -421,7 +421,7 @@ const TdsSlider = class {
|
|
|
421
421
|
}
|
|
422
422
|
componentDidLoad() {
|
|
423
423
|
this.calculateInputSizeFromMax();
|
|
424
|
-
if (!this.resizeObserverAdded) {
|
|
424
|
+
if (!this.resizeObserverAdded && typeof ResizeObserver !== 'undefined') {
|
|
425
425
|
this.resizeObserverAdded = true;
|
|
426
426
|
const resizeObserver = new ResizeObserver(() => {
|
|
427
427
|
this.calculateThumbLeftFromValue(this.value);
|
|
@@ -465,30 +465,30 @@ const TdsSlider = class {
|
|
|
465
465
|
}
|
|
466
466
|
render() {
|
|
467
467
|
const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
|
|
468
|
-
return (index.h("div", { key: '
|
|
468
|
+
return (index.h("div", { key: '8b3642548f48ff352395b4d3ebdf84abf464b51d', class: {
|
|
469
469
|
'tds-slider-wrapper': true,
|
|
470
470
|
'read-only': this.readOnly,
|
|
471
|
-
} }, index.h("input", { key: '
|
|
471
|
+
} }, index.h("input", { key: '9f35e897044114dd9a5c97a66e9a335d4c09975d', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), index.h("div", { key: '74fe5f97050ae8fa970d0d2d00145a1f20b9d728', class: "sr-only", "aria-live": "assertive", ref: (el) => {
|
|
472
472
|
this.ariaLiveElement = el;
|
|
473
|
-
} }), index.h("div", { key: '
|
|
473
|
+
} }), index.h("div", { key: '2af5ddfcb4cceb921ca8299438b6bc9b40bf1dd6', class: {
|
|
474
474
|
'tds-slider': true,
|
|
475
475
|
'disabled': this.disabled,
|
|
476
476
|
'tds-slider-small': this.useSmall,
|
|
477
477
|
}, ref: (el) => {
|
|
478
478
|
this.wrapperElement = el;
|
|
479
|
-
}, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("label", { key: '
|
|
479
|
+
}, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("label", { key: '7461b0e104ee03cf51c9e84ab8af06df78b6b12b', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (index.h("div", { key: 'ce065240c807cf75544efd3ecc2c5b1b45e0b987', class: "tds-slider__input-values" }, index.h("div", { key: 'ac8b1a0d7cd44e079e7739e9697912a7f8c65c62', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (index.h("div", { key: 'e85dfafe22e306fa8f9c2a0ee2c094caa0937abf', class: "tds-slider__controls" }, index.h("div", { key: 'b21861744b1ba29cc6d5566d2d466c507b55f54e', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, index.h("tds-icon", { key: 'b31ed68e1b5a96d85951c928abf4dae472889050', name: "minus", size: "16px" })))), index.h("div", { key: 'b4c46afe353a403e2f2ebb35e40bad3946f83e23', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (index.h("div", { key: '0c4662ea24810f52b6415f4bf205e1dff4250d7c', class: "tds-slider__value-dividers-wrapper" }, index.h("div", { key: '39f70859eecd83a4f962288e7d06f61719260297', 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: '9f6214318aaaec0c792a94b3241dbcd9ce321130', class: "tds-slider__track", ref: (el) => {
|
|
480
480
|
this.trackElement = el;
|
|
481
481
|
}, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
|
|
482
482
|
if (this.thumbElement) {
|
|
483
483
|
this.thumbElement.focus();
|
|
484
484
|
}
|
|
485
|
-
} }, index.h("div", { key: '
|
|
485
|
+
} }, index.h("div", { key: 'd70dbc3e02dda21538a1c709ee9fb94bf1517766', class: "tds-slider__track-fill", ref: (el) => {
|
|
486
486
|
this.trackFillElement = el;
|
|
487
|
-
} }), index.h("div", { key: '
|
|
487
|
+
} }), index.h("div", { key: 'aa5ceb99150a8387e9b01becd054e3beee185955', class: "tds-slider__thumb", ref: (el) => {
|
|
488
488
|
this.thumbElement = el;
|
|
489
|
-
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (index.h("div", { key: '
|
|
489
|
+
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (index.h("div", { key: 'b1b3ecfbedd63039e66aabc10db98b7b25c04b6d', class: "tds-slider__value" }, this.value, index.h("svg", { key: '80e22bbb6b56c85f754c7cfae63f21d7adb7eb56', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '4ce11c849ba43904f2d2d1540bb60c12a1e695ee', 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: '44205e90c8ff3e6506e155a66b6ce53aa191f25e', class: "tds-slider__thumb-inner", ref: (el) => {
|
|
490
490
|
this.thumbInnerElement = el;
|
|
491
|
-
} })))), this.useInput && (index.h("div", { key: '
|
|
491
|
+
} })))), this.useInput && (index.h("div", { key: '099b5dfac47680c3a2d882273856689d9bdd3953', class: "tds-slider__input-values" }, index.h("div", { key: '68f0c9d23bbadfe61a7edcb8ab38ed7a22b3a7b1', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), index.h("div", { key: '481a52db19f0bc035c43a252e005e5304a27bf9e', class: "tds-slider__input-field-wrapper" }, index.h("tds-text-field", { key: '5361928ed0dcf9cb5cb873a0b769ea0af76c809c', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (index.h("div", { key: 'abaa88dc33a0193360999df8ba6fe04569ff12aa', class: "tds-slider__controls" }, index.h("div", { key: '294ebb18d08ea797ee481f38f2b8c7f57b368ce2', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, index.h("tds-icon", { key: '637b1f5eb5744749b534be62848c2a5f33a20475', name: "plus", size: "16px" })))))));
|
|
492
492
|
}
|
|
493
493
|
get host() { return index.getElement(this); }
|
|
494
494
|
static get watchers() { return {
|
|
@@ -415,7 +415,7 @@ export class TdsSlider {
|
|
|
415
415
|
}
|
|
416
416
|
componentDidLoad() {
|
|
417
417
|
this.calculateInputSizeFromMax();
|
|
418
|
-
if (!this.resizeObserverAdded) {
|
|
418
|
+
if (!this.resizeObserverAdded && typeof ResizeObserver !== 'undefined') {
|
|
419
419
|
this.resizeObserverAdded = true;
|
|
420
420
|
const resizeObserver = new ResizeObserver(() => {
|
|
421
421
|
this.calculateThumbLeftFromValue(this.value);
|
|
@@ -459,30 +459,30 @@ export class TdsSlider {
|
|
|
459
459
|
}
|
|
460
460
|
render() {
|
|
461
461
|
const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
|
|
462
|
-
return (h("div", { key: '
|
|
462
|
+
return (h("div", { key: '8b3642548f48ff352395b4d3ebdf84abf464b51d', class: {
|
|
463
463
|
'tds-slider-wrapper': true,
|
|
464
464
|
'read-only': this.readOnly,
|
|
465
|
-
} }, h("input", { key: '
|
|
465
|
+
} }, h("input", { key: '9f35e897044114dd9a5c97a66e9a335d4c09975d', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '74fe5f97050ae8fa970d0d2d00145a1f20b9d728', class: "sr-only", "aria-live": "assertive", ref: (el) => {
|
|
466
466
|
this.ariaLiveElement = el;
|
|
467
|
-
} }), h("div", { key: '
|
|
467
|
+
} }), h("div", { key: '2af5ddfcb4cceb921ca8299438b6bc9b40bf1dd6', class: {
|
|
468
468
|
'tds-slider': true,
|
|
469
469
|
'disabled': this.disabled,
|
|
470
470
|
'tds-slider-small': this.useSmall,
|
|
471
471
|
}, ref: (el) => {
|
|
472
472
|
this.wrapperElement = el;
|
|
473
|
-
}, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '
|
|
473
|
+
}, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '7461b0e104ee03cf51c9e84ab8af06df78b6b12b', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: 'ce065240c807cf75544efd3ecc2c5b1b45e0b987', class: "tds-slider__input-values" }, h("div", { key: 'ac8b1a0d7cd44e079e7739e9697912a7f8c65c62', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'e85dfafe22e306fa8f9c2a0ee2c094caa0937abf', class: "tds-slider__controls" }, h("div", { key: 'b21861744b1ba29cc6d5566d2d466c507b55f54e', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'b31ed68e1b5a96d85951c928abf4dae472889050', name: "minus", size: "16px" })))), h("div", { key: 'b4c46afe353a403e2f2ebb35e40bad3946f83e23', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '0c4662ea24810f52b6415f4bf205e1dff4250d7c', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '39f70859eecd83a4f962288e7d06f61719260297', 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: '9f6214318aaaec0c792a94b3241dbcd9ce321130', class: "tds-slider__track", ref: (el) => {
|
|
474
474
|
this.trackElement = el;
|
|
475
475
|
}, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
|
|
476
476
|
if (this.thumbElement) {
|
|
477
477
|
this.thumbElement.focus();
|
|
478
478
|
}
|
|
479
|
-
} }, h("div", { key: '
|
|
479
|
+
} }, h("div", { key: 'd70dbc3e02dda21538a1c709ee9fb94bf1517766', class: "tds-slider__track-fill", ref: (el) => {
|
|
480
480
|
this.trackFillElement = el;
|
|
481
|
-
} }), h("div", { key: '
|
|
481
|
+
} }), h("div", { key: 'aa5ceb99150a8387e9b01becd054e3beee185955', class: "tds-slider__thumb", ref: (el) => {
|
|
482
482
|
this.thumbElement = el;
|
|
483
|
-
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: '
|
|
483
|
+
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'b1b3ecfbedd63039e66aabc10db98b7b25c04b6d', class: "tds-slider__value" }, this.value, h("svg", { key: '80e22bbb6b56c85f754c7cfae63f21d7adb7eb56', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4ce11c849ba43904f2d2d1540bb60c12a1e695ee', 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: '44205e90c8ff3e6506e155a66b6ce53aa191f25e', class: "tds-slider__thumb-inner", ref: (el) => {
|
|
484
484
|
this.thumbInnerElement = el;
|
|
485
|
-
} })))), this.useInput && (h("div", { key: '
|
|
485
|
+
} })))), this.useInput && (h("div", { key: '099b5dfac47680c3a2d882273856689d9bdd3953', class: "tds-slider__input-values" }, h("div", { key: '68f0c9d23bbadfe61a7edcb8ab38ed7a22b3a7b1', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '481a52db19f0bc035c43a252e005e5304a27bf9e', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '5361928ed0dcf9cb5cb873a0b769ea0af76c809c', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: 'abaa88dc33a0193360999df8ba6fe04569ff12aa', class: "tds-slider__controls" }, h("div", { key: '294ebb18d08ea797ee481f38f2b8c7f57b368ce2', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '637b1f5eb5744749b534be62848c2a5f33a20475', name: "plus", size: "16px" })))))));
|
|
486
486
|
}
|
|
487
487
|
static get is() { return "tds-slider"; }
|
|
488
488
|
static get originalStyleUrls() {
|
|
@@ -22,6 +22,8 @@ export class TdsFolderTabs {
|
|
|
22
22
|
this.tabElements = [];
|
|
23
23
|
this.clickHandlers = new WeakMap();
|
|
24
24
|
this.addResizeObserver = () => {
|
|
25
|
+
if (typeof ResizeObserver === 'undefined')
|
|
26
|
+
return;
|
|
25
27
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
26
28
|
entries.forEach((entry) => {
|
|
27
29
|
const componentWidth = entry.contentRect.width;
|
|
@@ -176,9 +178,9 @@ export class TdsFolderTabs {
|
|
|
176
178
|
this.removeEventListenerFromTabs();
|
|
177
179
|
}
|
|
178
180
|
render() {
|
|
179
|
-
return (h(Host, { key: '
|
|
181
|
+
return (h(Host, { key: 'c012eb13a3d87fd700f5aeebda39b5eab29ef867', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'ebee1cf15b1c7425fb675cceedfdbdedacdf7057', class: "wrapper", ref: (el) => {
|
|
180
182
|
this.navWrapperElement = el;
|
|
181
|
-
} }, h("button", { key: '
|
|
183
|
+
} }, h("button", { key: 'f91db438a2374acc0569bccb5895b0061816cdb2', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '497c2b7709f37f12d6c507f9ef4a55851bcfad78', name: "chevron_left", size: "20px" })), h("slot", { key: '1b8be04cceec4793fffac9cf26ba603dd578299d', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '210096e3f848f40fc3a976bfbeb76f623e06c2bc', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'c1235de0754f7df8418b1609a713e2766be059bd', name: "chevron_right", size: "20px" })))));
|
|
182
184
|
}
|
|
183
185
|
static get is() { return "tds-folder-tabs"; }
|
|
184
186
|
static get encapsulation() { return "shadow"; }
|
|
@@ -23,6 +23,8 @@ export class TdsInlineTabs {
|
|
|
23
23
|
this.tabElements = [];
|
|
24
24
|
this.clickHandlers = new WeakMap();
|
|
25
25
|
this.addResizeObserver = () => {
|
|
26
|
+
if (typeof ResizeObserver === 'undefined')
|
|
27
|
+
return;
|
|
26
28
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
27
29
|
entries.forEach((entry) => {
|
|
28
30
|
const componentWidth = entry.contentRect.width;
|
|
@@ -177,9 +179,9 @@ export class TdsInlineTabs {
|
|
|
177
179
|
this.removeEventListenerFromTabs();
|
|
178
180
|
}
|
|
179
181
|
render() {
|
|
180
|
-
return (h(Host, { key: '
|
|
182
|
+
return (h(Host, { key: 'b4d7b5c75a8e81e49fdb392580852077a44ebe0c', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}`, style: { '--padding-left': `${this.leftPadding}px` } }, h("div", { key: '3be2477f0c9f24987aa9b0ca5c43c05fb19a32e3', class: "wrapper", ref: (el) => {
|
|
181
183
|
this.navWrapperElement = el;
|
|
182
|
-
} }, h("button", { key: '
|
|
184
|
+
} }, h("button", { key: 'e6252b0e4bd02809a09db1183fe7dbea91103cbf', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'd4ce2393b25f728ac2de1702d144f612902dc330', name: "chevron_left", size: "20px" })), h("slot", { key: 'd079e254442795f81737b5552ce5ce177683c9fb', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '5e3db06d48f3109550974ba0675aef8367373df7', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'cd00e5c5ad1b757104d5c3f7338a45c9243eb25d', name: "chevron_right", size: "20px" })))));
|
|
183
185
|
}
|
|
184
186
|
static get is() { return "tds-inline-tabs"; }
|
|
185
187
|
static get encapsulation() { return "shadow"; }
|
|
@@ -23,6 +23,8 @@ export class TdsNavigationTabs {
|
|
|
23
23
|
this.tabElements = [];
|
|
24
24
|
this.clickHandlers = new WeakMap();
|
|
25
25
|
this.addResizeObserver = () => {
|
|
26
|
+
if (typeof ResizeObserver === 'undefined')
|
|
27
|
+
return;
|
|
26
28
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
27
29
|
entries.forEach((entry) => {
|
|
28
30
|
const componentWidth = entry.contentRect.width;
|
|
@@ -183,15 +185,15 @@ export class TdsNavigationTabs {
|
|
|
183
185
|
this.removeEventListenerFromTabs();
|
|
184
186
|
}
|
|
185
187
|
render() {
|
|
186
|
-
return (h(Host, { key: '
|
|
188
|
+
return (h(Host, { key: '0817601e2f5ca452bef28d7ffdeabf00ba49518b', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '9a0c29efcbd7120760a0eb0946343d4aceb963ec', class: "wrapper", ref: (el) => {
|
|
187
189
|
this.navWrapperElement = el;
|
|
188
|
-
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '
|
|
190
|
+
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '2283540cb7864e70445dd3303a9e617cabd5c1a3', "aria-label": this.tdsScrollLeftAriaLabel, class: {
|
|
189
191
|
'scroll-left-button': true,
|
|
190
192
|
'show': this.showLeftScroll,
|
|
191
|
-
}, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '
|
|
193
|
+
}, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '4de2e1da1fd959ae3ffe5f93298574b3a161f75d', name: "chevron_left", size: "20px" })), h("slot", { key: 'cb72d39a1d8f8e0289244cd023311e211ec148e5', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '52e0ea24de069a6020e7902ea7222b6f52dc9895', "aria-label": this.tdsScrollRightAriaLabel, class: {
|
|
192
194
|
'scroll-right-button': true,
|
|
193
195
|
'show': this.showRightScroll,
|
|
194
|
-
}, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '
|
|
196
|
+
}, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '4a4a3a5234d74decb2106f902365b39c20977066', name: "chevron_right", size: "20px" })))));
|
|
195
197
|
}
|
|
196
198
|
static get is() { return "tds-navigation-tabs"; }
|
|
197
199
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t,p as s,H as e,c as i,h as o,a as l}from"./index.js";import{d as h}from"./p-DMVs7mmW.js";const r=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tdsChange=i(this,"tdsChange",7),this.modeVariant=null,this.defaultSelectedIndex=0,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.buttonWidth=0,this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let e=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);e+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=e,this.scrollableWidth=e-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const e=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",e),this.clickHandlers.set(t,e),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){if(t<0||t>=this.tabElements.length)throw Error("Tab index out of bounds");return this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,e)=>(e===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){const t=Array.from(this.host.children);this.tabElements=t.map((t=>(t.setSelected(!1),t))),void 0!==this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last")}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return o(l,{key:"
|
|
1
|
+
import{t,p as s,H as e,c as i,h as o,a as l}from"./index.js";import{d as h}from"./p-DMVs7mmW.js";const r=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tdsChange=i(this,"tdsChange",7),this.modeVariant=null,this.defaultSelectedIndex=0,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.buttonWidth=0,this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{if("undefined"==typeof ResizeObserver)return;const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let e=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);e+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=e,this.scrollableWidth=e-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const e=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",e),this.clickHandlers.set(t,e),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){if(t<0||t>=this.tabElements.length)throw Error("Tab index out of bounds");return this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,e)=>(e===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){const t=Array.from(this.host.children);this.tabElements=t.map((t=>(t.setSelected(!1),t))),void 0!==this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last")}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return o(l,{key:"c012eb13a3d87fd700f5aeebda39b5eab29ef867",role:"tablist",class:this.modeVariant?"tds-mode-variant-"+this.modeVariant:""},o("div",{key:"ebee1cf15b1c7425fb675cceedfdbdedacdf7057",class:"wrapper",ref:t=>{this.navWrapperElement=t}},o("button",{key:"f91db438a2374acc0569bccb5895b0061816cdb2","aria-label":this.tdsScrollLeftAriaLabel,class:"scroll-left-button "+(this.showLeftScroll?"show":""),disabled:!this.showLeftScroll,onClick:()=>this.scrollLeft()},o("tds-icon",{key:"497c2b7709f37f12d6c507f9ef4a55851bcfad78",name:"chevron_left",size:"20px"})),o("slot",{key:"1b8be04cceec4793fffac9cf26ba603dd578299d",onSlotchange:()=>this.handleSlotChange()}),o("button",{key:"210096e3f848f40fc3a976bfbeb76f623e06c2bc","aria-label":this.tdsScrollRightAriaLabel,class:"scroll-right-button "+(this.showRightScroll?"show":""),disabled:!this.showRightScroll,onClick:()=>this.scrollRight()},o("tds-icon",{key:"c1235de0754f7df8418b1609a713e2766be059bd",name:"chevron_right",size:"20px"}))))}get host(){return this}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}static get style(){return':host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-within::before,:host .scroll-left-button:focus-within::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:"";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}'}},[257,"tds-folder-tabs",{modeVariant:[513,"mode-variant"],defaultSelectedIndex:[514,"default-selected-index"],selectedIndex:[514,"selected-index"],tdsScrollLeftAriaLabel:[513,"tds-scroll-left-aria-label"],tdsScrollRightAriaLabel:[513,"tds-scroll-right-aria-label"],buttonWidth:[32],showLeftScroll:[32],showRightScroll:[32],selectTab:[64],reinitialize:[64]},void 0,{selectedIndex:[{handleSelectedIndexUpdate:0}]}]);function c(){"undefined"!=typeof customElements&&["tds-folder-tabs","tds-icon"].forEach((s=>{switch(s){case"tds-folder-tabs":customElements.get(t(s))||customElements.define(t(s),r);break;case"tds-icon":customElements.get(t(s))||h()}}))}c();const n=r,a=c;export{n as TdsFolderTabs,a as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t,p as s,H as
|
|
1
|
+
import{t,p as s,H as e,c as i,h as o,a as l}from"./index.js";import{d as r}from"./p-DMVs7mmW.js";const h=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tdsChange=i(this,"tdsChange",7),this.modeVariant="primary",this.defaultSelectedIndex=0,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.leftPadding=32,this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{if("undefined"==typeof ResizeObserver)return;const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let e=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);e+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=e,this.scrollableWidth=e-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const e=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",e),this.clickHandlers.set(t,e),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){if(t<0||t>=this.tabElements.length)throw Error("Tab index out of bounds");return this.tabElements=Array.from(this.host.children),this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,e)=>(e===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){this.tabElements=Array.from(this.host.children).map((t=>(t.setSelected(!1),t))),void 0!==this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last")}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return o(l,{key:"b4d7b5c75a8e81e49fdb392580852077a44ebe0c",role:"tablist",class:this.modeVariant?"tds-mode-variant-"+this.modeVariant:"",style:{"--padding-left":this.leftPadding+"px"}},o("div",{key:"3be2477f0c9f24987aa9b0ca5c43c05fb19a32e3",class:"wrapper",ref:t=>{this.navWrapperElement=t}},o("button",{key:"e6252b0e4bd02809a09db1183fe7dbea91103cbf","aria-label":this.tdsScrollLeftAriaLabel,class:"scroll-left-button "+(this.showLeftScroll?"show":""),onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},o("tds-icon",{key:"d4ce2393b25f728ac2de1702d144f612902dc330",name:"chevron_left",size:"20px"})),o("slot",{key:"d079e254442795f81737b5552ce5ce177683c9fb",onSlotchange:()=>this.handleSlotChange()}),o("button",{key:"5e3db06d48f3109550974ba0675aef8367373df7","aria-label":this.tdsScrollRightAriaLabel,class:"scroll-right-button "+(this.showRightScroll?"show":""),onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},o("tds-icon",{key:"cd00e5c5ad1b757104d5c3f7338a45c9243eb25d",name:"chevron_right",size:"20px"}))))}get host(){return this}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}static get style(){return':host{box-sizing:border-box;--padding-left:0;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:" ";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px;padding-left:var(--padding-left)}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:calc(0px - var(--padding-left));z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-visible::before,:host .scroll-left-button:focus-visible::before{content:"";position:absolute;inset:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus-visible,:host .scroll-left-button:focus-visible{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}'}},[257,"tds-inline-tabs",{modeVariant:[513,"mode-variant"],defaultSelectedIndex:[514,"default-selected-index"],selectedIndex:[514,"selected-index"],tdsScrollLeftAriaLabel:[513,"tds-scroll-left-aria-label"],tdsScrollRightAriaLabel:[513,"tds-scroll-right-aria-label"],leftPadding:[514,"left-padding"],showLeftScroll:[32],showRightScroll:[32],selectTab:[64],reinitialize:[64]},void 0,{selectedIndex:[{handleSelectedIndexUpdate:0}]}]);function n(){"undefined"!=typeof customElements&&["tds-inline-tabs","tds-icon"].forEach((s=>{switch(s){case"tds-inline-tabs":customElements.get(t(s))||customElements.define(t(s),h);break;case"tds-icon":customElements.get(t(s))||r()}}))}n();const a=h,c=n;export{a as TdsInlineTabs,c as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t,p as s,H as
|
|
1
|
+
import{t,p as s,H as e,c as i,h as o,a as l}from"./index.js";import{d as h}from"./p-DMVs7mmW.js";const a=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tdsChange=i(this,"tdsChange",7),this.modeVariant="primary",this.defaultSelectedIndex=0,this.leftPadding=32,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{if("undefined"==typeof ResizeObserver)return;const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let e=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);e+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=e,this.scrollableWidth=e-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const e=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",e),this.clickHandlers.set(t,e),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){return this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,e)=>(e===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){this.tabElements=Array.from(this.host.children).map((t=>(t.setSelected(!1),t))),this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements.length>0&&(this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last"))}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}applyCustomLeftPadding(){this.navWrapperElement&&(this.navWrapperElement.style.paddingLeft=this.leftPadding+"px")}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver(),this.applyCustomLeftPadding()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return o(l,{key:"0817601e2f5ca452bef28d7ffdeabf00ba49518b",role:"tablist",class:{["tds-mode-variant-"+this.modeVariant]:null!==this.modeVariant}},o("div",{key:"9a0c29efcbd7120760a0eb0946343d4aceb963ec",class:"wrapper",ref:t=>{this.navWrapperElement=t},style:{paddingLeft:this.leftPadding+"px"}},o("button",{key:"2283540cb7864e70445dd3303a9e617cabd5c1a3","aria-label":this.tdsScrollLeftAriaLabel,class:{"scroll-left-button":!0,show:this.showLeftScroll},onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},o("tds-icon",{key:"4de2e1da1fd959ae3ffe5f93298574b3a161f75d",name:"chevron_left",size:"20px"})),o("slot",{key:"cb72d39a1d8f8e0289244cd023311e211ec148e5",onSlotchange:()=>this.handleSlotChange()}),o("button",{key:"52e0ea24de069a6020e7902ea7222b6f52dc9895","aria-label":this.tdsScrollRightAriaLabel,class:{"scroll-right-button":!0,show:this.showRightScroll},onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},o("tds-icon",{key:"4a4a3a5234d74decb2106f902365b39c20977066",name:"chevron_right",size:"20px"}))))}get host(){return this}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}static get style(){return':host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:" ";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:"";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}'}},[257,"tds-navigation-tabs",{modeVariant:[513,"mode-variant"],defaultSelectedIndex:[514,"default-selected-index"],selectedIndex:[514,"selected-index"],leftPadding:[514,"left-padding"],tdsScrollLeftAriaLabel:[513,"tds-scroll-left-aria-label"],tdsScrollRightAriaLabel:[513,"tds-scroll-right-aria-label"],showLeftScroll:[32],showRightScroll:[32],selectTab:[64],reinitialize:[64]},void 0,{selectedIndex:[{handleSelectedIndexUpdate:0}]}]);function r(){"undefined"!=typeof customElements&&["tds-navigation-tabs","tds-icon"].forEach((s=>{switch(s){case"tds-navigation-tabs":customElements.get(t(s))||customElements.define(t(s),a);break;case"tds-icon":customElements.get(t(s))||h()}}))}r();const n=a,c=r;export{n as TdsNavigationTabs,c as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as s,p as t,H as e,c as i,h as d}from"./index.js";import{g as r}from"./p-Cn4f8w1e.js";import{d as l}from"./p-DMVs7mmW.js";import{d as a}from"./p-CkGDaQ3D.js";import{d as o}from"./p-DynhdmI7.js";import{d as n}from"./p-T8F4U3Yc.js";const h=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.tdsChange=i(this,"tdsChange",6),this.tdsInput=i(this,"tdsInput",6),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.tdsAriaLabel="",this.sliderId=r(),this.tdsReadOnlyAriaLabel="",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.initialValue="0",this.resetEventListenerAdded=!1,this.formElement=null,this.ariaLiveElement=null,this.resetToInitialValue=()=>{this.forceValueUpdate(this.initialValue),this.reset()}}roundToStep(s){const t=parseFloat(this.step);return parseFloat(t?(Math.round(s/t)*t).toFixed(((""+t).split(".")[1]||"").length):s.toFixed())}async reset(){this.componentWillLoad(),this.componentDidLoad()}handleKeydown(s){switch(s.key){case"ArrowLeft":case"ArrowDown":case"-":this.stepLeft(s),this.announceValueChange();break;case"ArrowRight":case"ArrowUp":case"+":this.stepRight(s),this.announceValueChange();break;case"Home":this.setToMinValue(),this.announceValueChange();break;case"End":this.setToMaxValue(),this.announceValueChange()}}handleRelease(s){var t,e,i;this.thumbGrabbed?(this.thumbGrabbed=!1,null===(e=this.thumbInnerElement)||void 0===e||e.classList.remove("pressed"),this.thumbElement&&this.thumbElement.setAttribute("aria-grabbed","false"),this.updateValue(s),null===(i=this.trackElement)||void 0===i||i.focus()):(s.target===this.trackElement||s.target===this.trackFillElement)&&(this.thumbCore(s),null===(t=this.trackElement)||void 0===t||t.focus())}handleMove(s){this.thumbGrabbed&&this.thumbCore(s)}handleValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.updateTrack()}setToMinValue(){this.readOnly||this.disabled||this.forceValueUpdate(this.min)}setToMaxValue(){this.readOnly||this.disabled||this.forceValueUpdate(this.max)}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){var t;const e=parseInt(this.ticks),i=null===(t=this.trackElement)||void 0===t?void 0:t.getBoundingClientRect();if(!i)return;let d=0;"mousemove"===s.type||"mouseup"===s.type?d=s.clientX-i.left:"touchmove"===s.type?d=s.touches[0].clientX-i.left:console.warn("Slider component: Unsupported event!"),this.supposedValueSlot=-1,this.useSnapping&&e>0&&(d=this.updateSupposedValueSlot(d)),this.thumbLeft=this.constrainThumb(d),this.thumbElement&&(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+"%")}announceValueChange(){this.ariaLiveElement&&(clearTimeout(this.announcementDebounceTimeout),this.announcementDebounceTimeout=setTimeout((()=>{this.ariaLiveElement&&(this.ariaLiveElement.textContent=`${this.label?this.label+" ":""}${this.value} of ${this.max}`)}),50))}updateValue(s){const t=this.getTrackWidth(),e=parseFloat(this.min),i=parseFloat(this.max);if(this.useSnapping&&this.supposedValueSlot>=0){const s=this.tickValues[this.supposedValueSlot];this.value=""+s,this.calculateThumbLeftFromValue(s)}else this.value=""+this.roundToStep(e+this.thumbLeft/t*(i-e));this.updateTrack(),this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`)),this.tdsInput.emit({value:this.value}),"touchend"!==s.type&&"mouseup"!==s.type||(this.tdsChange.emit({value:this.value}),this.announceValueChange())}forceValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`)),this.tdsChange.emit({value:this.value}),this.updateTrack(),this.announceValueChange()}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();this.thumbLeft=(t-parseFloat(this.min))/(parseFloat(this.max)-parseFloat(this.min))*e,this.updateSupposedValueSlot(this.thumbLeft),this.thumbElement&&(this.thumbElement.style.left=this.thumbLeft+"px",this.thumbElement.setAttribute("aria-valuenow",this.value))}updateSliderValueOnInputChange(s){let t=parseFloat(s.target.value);if(t===parseFloat(this.value))return;const e=parseFloat(this.min),i=parseFloat(this.max);t<e?t=e:t>i&&(t=i);const d=this.roundToStep(t);this.forceValueUpdate(""+d)}updateSliderValueFromTextField(s){const t=s.target;let e=parseFloat(t&&void 0!==t.value?t.value:"");if(Number.isNaN(e))return;const i=parseFloat(this.min),d=parseFloat(this.max);e<i?e=i:e>d&&(e=d);const r=this.roundToStep(e);this.forceValueUpdate(""+r)}handleInputFieldEnterPress(s){s.stopPropagation(),"Enter"===s.key&&(this.updateSliderValueOnInputChange(s),s.target.blur())}grabThumb(){var s;this.readOnly||(this.thumbGrabbed=!0,null===(s=this.thumbInnerElement)||void 0===s||s.classList.add("pressed"),this.thumbElement&&this.thumbElement.setAttribute("aria-grabbed","true"))}calculateInputSizeFromMax(){const s=this.host.querySelector('tds-text-field input[type="number"]');s&&(this.readOnly?s.style.width=52+8*this.max.length+"px":s.setAttribute("size",""+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=this.roundToStep(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(-parseFloat(this.step),s)}stepRight(s){this.controlsStep(parseFloat(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),e=((""+parseFloat(this.step)).split(".")[1]||"").length;for(let i=1;i<=s;i++)this.tickValues.push(parseFloat((parseFloat(this.min)+t*i).toFixed(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(){if(this.calculateInputSizeFromMax(),!this.resizeObserverAdded){this.resizeObserverAdded=!0;const s=new ResizeObserver((()=>{this.calculateThumbLeftFromValue(this.value),this.updateTrack()}));this.wrapperElement&&s.observe(this.wrapperElement)}this.calculateThumbLeftFromValue(this.value),this.updateTrack(),this.initialValue||(this.initialValue=this.value),this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`),this.thumbElement.tabIndex=this.disabled?-1:0)}componentDidRender(){this.resetEventListenerAdded||(this.formElement=this.host.closest("form"),this.formElement&&(this.formElement.addEventListener("reset",this.resetToInitialValue),this.resetEventListenerAdded=!0))}connectedCallback(){this.readOnly&&!this.tdsReadOnlyAriaLabel&&console.warn("tds-slider: tdsAriaLabel is reccomended when readonly is true"),this.resetEventListenerAdded&&this.formElement&&(this.formElement.removeEventListener("reset",this.resetToInitialValue),this.resetEventListenerAdded=!1)}render(){const s=this.readOnly?this.tdsReadOnlyAriaLabel:this.label||this.tdsAriaLabel;return d("div",{key:"08e6bfb4def6bf2b22dbe4ce7ed3436d9913e33f",class:{"tds-slider-wrapper":!0,"read-only":this.readOnly}},d("input",{key:"6ea6aac7821176b7966c8f6d2a4f06d859a63a86",class:"tds-slider-native-element",type:"range",name:this.name,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.disabled}),d("div",{key:"892a1b2995fde81fd681e76d7b847f91ead8dc1e",class:"sr-only","aria-live":"assertive",ref:s=>{this.ariaLiveElement=s}}),d("div",{key:"de7c784bf52ea58c213b9bceefb9593db5425e72",class:{"tds-slider":!0,disabled:this.disabled,"tds-slider-small":this.useSmall},ref:s=>{this.wrapperElement=s},"aria-disabled":this.disabled?"true":"false"},d("label",{key:"dda630677cd509e689f0cc255454dc51d1a73a17",id:this.sliderId+"-label",class:{offset:this.showTickNumbers}},this.label),this.useInput&&d("div",{key:"f670491d5b74853d371d562549789b6e8d079e70",class:"tds-slider__input-values"},d("div",{key:"c2cef724188fdfff03dfe0557bbcbd483b538048",class:"tds-slider__input-value min-value"},this.min)),this.useControls&&d("div",{key:"8e207379b1765a624b0a00eed3f3a06320681984",class:"tds-slider__controls"},d("div",{key:"3c0265017ce4d02fa04e1ea68faea385021b04a9",class:"tds-slider__control tds-slider__control-minus",onClick:s=>this.stepLeft(s),role:"button","aria-label":"Decrease value",tabindex:this.disabled||this.readOnly?"-1":"0"},d("tds-icon",{key:"0d71e872703183a3f17c6955fa1cd6b075de7fa7",name:"minus",size:"16px"}))),d("div",{key:"149eef7a4d7d6d1b5ccdd9c7678fe4ca39f0942b",class:"tds-slider-inner",tabIndex:-1},this.tickValues.length>0&&d("div",{key:"daa8184160f0f236b9860219454b9832526ea62a",class:"tds-slider__value-dividers-wrapper"},d("div",{key:"9432d6894bcd6271803d7ac195d51d2c90acb791",class:"tds-slider__value-dividers"},this.tickValues.map((s=>d("div",{class:"tds-slider__value-divider"},this.showTickNumbers&&d("span",null,s)))))),d("div",{key:"65deabc78a80f57bc082b4ec8b61147ad4998db4",class:"tds-slider__track",ref:s=>{this.trackElement=s},tabindex:this.disabled?"-1":"0",role:"presentation",onFocus:()=>{this.thumbElement&&this.thumbElement.focus()}},d("div",{key:"807cbdbbccce4f451efb6d4660b9d616a8cf49ad",class:"tds-slider__track-fill",ref:s=>{this.trackFillElement=s}}),d("div",{key:"cd2cd9e1023ce693ef9ab2667d5ed00580af5602",class:"tds-slider__thumb",ref:s=>{this.thumbElement=s},onMouseDown:()=>this.grabThumb(),onTouchStart:()=>this.grabThumb(),role:"slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value,"aria-valuetext":`${this.value} of ${this.max}`,"aria-labelledby":this.sliderId+"-label","aria-grabbed":this.thumbGrabbed?"true":"false","aria-label":s,tabindex:this.disabled?"-1":"0"},this.tooltip&&d("div",{key:"ffc68e97df1f5a99b8e4d8460aab750cbf5ed979",class:"tds-slider__value"},this.value,d("svg",{key:"b94636f08f68b9c4144626ff11e694e88669b6ae",width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},d("path",{key:"431049ec3397135648be24d750a65ccd0984bd08",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"}))),d("div",{key:"99df797453a63f9526210e14fa9ddcccaa9d8cca",class:"tds-slider__thumb-inner",ref:s=>{this.thumbInnerElement=s}})))),this.useInput&&d("div",{key:"3f87e0793d362fd3032ccef61936bbce361cf008",class:"tds-slider__input-values"},d("div",{key:"327df1604d05618f7e8dc47c0b3a8c53799450c8",class:"tds-slider__input-value",onClick:s=>this.stepLeft(s)},this.max),d("div",{key:"226a8fc1259d703e99109960d9fb0103de5d4c4e",class:"tds-slider__input-field-wrapper"},d("tds-text-field",{key:"6c7081be57be3ebd921c3f3d40211dd74d4b55c3",noMinWidth:!0,size:"sm",type:"number",value:this.value,min:this.min,max:this.max,readOnly:this.readOnly,disabled:this.disabled,onTdsChange:s=>console.log(s),tdsAriaLabel:this.readOnly?this.tdsReadOnlyAriaLabel:void 0,onTdsBlur:s=>this.updateSliderValueFromTextField(s),onKeyDown:s=>this.handleInputFieldEnterPress(s)}))),this.useControls&&d("div",{key:"1d5ef13aa096f94c780c1021718006cc53ad517a",class:"tds-slider__controls"},d("div",{key:"08defa340f1611adc3b89b23ca9479425c125546",class:"tds-slider__control tds-slider__control-plus",onClick:s=>this.stepRight(s),role:"button","aria-label":"Increase value",tabindex:this.disabled||this.readOnly?"-1":"0"},d("tds-icon",{key:"32bfd49ebfb10fc7d4ecaa1030331e78d60ea003",name:"plus",size:"16px"})))))}get host(){return this}static get watchers(){return{value:[{handleValueUpdate:0}]}}static get style(){return'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 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.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-inner:focus-within .tds-slider__thumb-inner{outline:var(--tds-slider-thumb-focus-outline);box-shadow:var(--tds-slider-thumb-focus-box-shadow);outline-offset:var(--tds-slider-thumb-focus-outline-offset);z-index:1}.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-slider-input-value-color);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 tds-text-field .text-field-input[type=number]{width:auto;padding:12px;text-align:center;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only{text-align:left}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly{right:12px}.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 11px;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:hover .tds-slider__value{display:block}.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;background-color:var(--tds-slider-thumb-hover)}.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;background-color:var(--tds-slider-thumb-pressed)}.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::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.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 .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-label-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-input-value-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-inputfield-number-disabled);box-shadow:none;pointer-events:none;background:var(--tds-slider-inputfield-background-disabled)}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed;background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider{background-color:var(--tds-slider-divider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-divider-values-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-thumb-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:pointer}.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-controls-disabled)}'}},[0,"tds-slider",{label:[513],value:[1537],min:[513],max:[513],ticks:[513],showTickNumbers:[516,"show-tick-numbers"],tooltip:[516],disabled:[516],readOnly:[516,"read-only"],controls:[516],input:[516],step:[513],name:[513],thumbSize:[513,"thumb-size"],snap:[516],tdsAriaLabel:[513,"tds-aria-label"],sliderId:[513,"slider-id"],tdsReadOnlyAriaLabel:[513,"tds-read-only-aria-label"],reset:[64]},[[0,"keydown","handleKeydown"],[9,"mouseup","handleRelease"],[9,"touchend","handleRelease"],[9,"mousemove","handleMove"],[9,"touchmove","handleMove"]],{value:[{handleValueUpdate:0}]}]);function c(){"undefined"!=typeof customElements&&["tds-slider","tds-icon","tds-popover-core","tds-text-field","tds-tooltip"].forEach((t=>{switch(t){case"tds-slider":customElements.get(s(t))||customElements.define(s(t),h);break;case"tds-icon":customElements.get(s(t))||l();break;case"tds-popover-core":customElements.get(s(t))||a();break;case"tds-text-field":customElements.get(s(t))||o();break;case"tds-tooltip":customElements.get(s(t))||n()}}))}c();const u=h,p=c;export{u as TdsSlider,p as defineCustomElement}
|
|
1
|
+
import{t as s,p as t,H as e,c as i,h as d}from"./index.js";import{g as r}from"./p-Cn4f8w1e.js";import{d as l}from"./p-DMVs7mmW.js";import{d as a}from"./p-CkGDaQ3D.js";import{d as o}from"./p-DynhdmI7.js";import{d as n}from"./p-T8F4U3Yc.js";const h=t(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.tdsChange=i(this,"tdsChange",6),this.tdsInput=i(this,"tdsInput",6),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.tdsAriaLabel="",this.sliderId=r(),this.tdsReadOnlyAriaLabel="",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.initialValue="0",this.resetEventListenerAdded=!1,this.formElement=null,this.ariaLiveElement=null,this.resetToInitialValue=()=>{this.forceValueUpdate(this.initialValue),this.reset()}}roundToStep(s){const t=parseFloat(this.step);return parseFloat(t?(Math.round(s/t)*t).toFixed(((""+t).split(".")[1]||"").length):s.toFixed())}async reset(){this.componentWillLoad(),this.componentDidLoad()}handleKeydown(s){switch(s.key){case"ArrowLeft":case"ArrowDown":case"-":this.stepLeft(s),this.announceValueChange();break;case"ArrowRight":case"ArrowUp":case"+":this.stepRight(s),this.announceValueChange();break;case"Home":this.setToMinValue(),this.announceValueChange();break;case"End":this.setToMaxValue(),this.announceValueChange()}}handleRelease(s){var t,e,i;this.thumbGrabbed?(this.thumbGrabbed=!1,null===(e=this.thumbInnerElement)||void 0===e||e.classList.remove("pressed"),this.thumbElement&&this.thumbElement.setAttribute("aria-grabbed","false"),this.updateValue(s),null===(i=this.trackElement)||void 0===i||i.focus()):(s.target===this.trackElement||s.target===this.trackFillElement)&&(this.thumbCore(s),null===(t=this.trackElement)||void 0===t||t.focus())}handleMove(s){this.thumbGrabbed&&this.thumbCore(s)}handleValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.updateTrack()}setToMinValue(){this.readOnly||this.disabled||this.forceValueUpdate(this.min)}setToMaxValue(){this.readOnly||this.disabled||this.forceValueUpdate(this.max)}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){var t;const e=parseInt(this.ticks),i=null===(t=this.trackElement)||void 0===t?void 0:t.getBoundingClientRect();if(!i)return;let d=0;"mousemove"===s.type||"mouseup"===s.type?d=s.clientX-i.left:"touchmove"===s.type?d=s.touches[0].clientX-i.left:console.warn("Slider component: Unsupported event!"),this.supposedValueSlot=-1,this.useSnapping&&e>0&&(d=this.updateSupposedValueSlot(d)),this.thumbLeft=this.constrainThumb(d),this.thumbElement&&(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+"%")}announceValueChange(){this.ariaLiveElement&&(clearTimeout(this.announcementDebounceTimeout),this.announcementDebounceTimeout=setTimeout((()=>{this.ariaLiveElement&&(this.ariaLiveElement.textContent=`${this.label?this.label+" ":""}${this.value} of ${this.max}`)}),50))}updateValue(s){const t=this.getTrackWidth(),e=parseFloat(this.min),i=parseFloat(this.max);if(this.useSnapping&&this.supposedValueSlot>=0){const s=this.tickValues[this.supposedValueSlot];this.value=""+s,this.calculateThumbLeftFromValue(s)}else this.value=""+this.roundToStep(e+this.thumbLeft/t*(i-e));this.updateTrack(),this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`)),this.tdsInput.emit({value:this.value}),"touchend"!==s.type&&"mouseup"!==s.type||(this.tdsChange.emit({value:this.value}),this.announceValueChange())}forceValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`)),this.tdsChange.emit({value:this.value}),this.updateTrack(),this.announceValueChange()}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();this.thumbLeft=(t-parseFloat(this.min))/(parseFloat(this.max)-parseFloat(this.min))*e,this.updateSupposedValueSlot(this.thumbLeft),this.thumbElement&&(this.thumbElement.style.left=this.thumbLeft+"px",this.thumbElement.setAttribute("aria-valuenow",this.value))}updateSliderValueOnInputChange(s){let t=parseFloat(s.target.value);if(t===parseFloat(this.value))return;const e=parseFloat(this.min),i=parseFloat(this.max);t<e?t=e:t>i&&(t=i);const d=this.roundToStep(t);this.forceValueUpdate(""+d)}updateSliderValueFromTextField(s){const t=s.target;let e=parseFloat(t&&void 0!==t.value?t.value:"");if(Number.isNaN(e))return;const i=parseFloat(this.min),d=parseFloat(this.max);e<i?e=i:e>d&&(e=d);const r=this.roundToStep(e);this.forceValueUpdate(""+r)}handleInputFieldEnterPress(s){s.stopPropagation(),"Enter"===s.key&&(this.updateSliderValueOnInputChange(s),s.target.blur())}grabThumb(){var s;this.readOnly||(this.thumbGrabbed=!0,null===(s=this.thumbInnerElement)||void 0===s||s.classList.add("pressed"),this.thumbElement&&this.thumbElement.setAttribute("aria-grabbed","true"))}calculateInputSizeFromMax(){const s=this.host.querySelector('tds-text-field input[type="number"]');s&&(this.readOnly?s.style.width=52+8*this.max.length+"px":s.setAttribute("size",""+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=this.roundToStep(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(-parseFloat(this.step),s)}stepRight(s){this.controlsStep(parseFloat(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),e=((""+parseFloat(this.step)).split(".")[1]||"").length;for(let i=1;i<=s;i++)this.tickValues.push(parseFloat((parseFloat(this.min)+t*i).toFixed(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(){if(this.calculateInputSizeFromMax(),!this.resizeObserverAdded&&"undefined"!=typeof ResizeObserver){this.resizeObserverAdded=!0;const s=new ResizeObserver((()=>{this.calculateThumbLeftFromValue(this.value),this.updateTrack()}));this.wrapperElement&&s.observe(this.wrapperElement)}this.calculateThumbLeftFromValue(this.value),this.updateTrack(),this.initialValue||(this.initialValue=this.value),this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`),this.thumbElement.tabIndex=this.disabled?-1:0)}componentDidRender(){this.resetEventListenerAdded||(this.formElement=this.host.closest("form"),this.formElement&&(this.formElement.addEventListener("reset",this.resetToInitialValue),this.resetEventListenerAdded=!0))}connectedCallback(){this.readOnly&&!this.tdsReadOnlyAriaLabel&&console.warn("tds-slider: tdsAriaLabel is reccomended when readonly is true"),this.resetEventListenerAdded&&this.formElement&&(this.formElement.removeEventListener("reset",this.resetToInitialValue),this.resetEventListenerAdded=!1)}render(){const s=this.readOnly?this.tdsReadOnlyAriaLabel:this.label||this.tdsAriaLabel;return d("div",{key:"8b3642548f48ff352395b4d3ebdf84abf464b51d",class:{"tds-slider-wrapper":!0,"read-only":this.readOnly}},d("input",{key:"9f35e897044114dd9a5c97a66e9a335d4c09975d",class:"tds-slider-native-element",type:"range",name:this.name,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.disabled}),d("div",{key:"74fe5f97050ae8fa970d0d2d00145a1f20b9d728",class:"sr-only","aria-live":"assertive",ref:s=>{this.ariaLiveElement=s}}),d("div",{key:"2af5ddfcb4cceb921ca8299438b6bc9b40bf1dd6",class:{"tds-slider":!0,disabled:this.disabled,"tds-slider-small":this.useSmall},ref:s=>{this.wrapperElement=s},"aria-disabled":this.disabled?"true":"false"},d("label",{key:"7461b0e104ee03cf51c9e84ab8af06df78b6b12b",id:this.sliderId+"-label",class:{offset:this.showTickNumbers}},this.label),this.useInput&&d("div",{key:"ce065240c807cf75544efd3ecc2c5b1b45e0b987",class:"tds-slider__input-values"},d("div",{key:"ac8b1a0d7cd44e079e7739e9697912a7f8c65c62",class:"tds-slider__input-value min-value"},this.min)),this.useControls&&d("div",{key:"e85dfafe22e306fa8f9c2a0ee2c094caa0937abf",class:"tds-slider__controls"},d("div",{key:"b21861744b1ba29cc6d5566d2d466c507b55f54e",class:"tds-slider__control tds-slider__control-minus",onClick:s=>this.stepLeft(s),role:"button","aria-label":"Decrease value",tabindex:this.disabled||this.readOnly?"-1":"0"},d("tds-icon",{key:"b31ed68e1b5a96d85951c928abf4dae472889050",name:"minus",size:"16px"}))),d("div",{key:"b4c46afe353a403e2f2ebb35e40bad3946f83e23",class:"tds-slider-inner",tabIndex:-1},this.tickValues.length>0&&d("div",{key:"0c4662ea24810f52b6415f4bf205e1dff4250d7c",class:"tds-slider__value-dividers-wrapper"},d("div",{key:"39f70859eecd83a4f962288e7d06f61719260297",class:"tds-slider__value-dividers"},this.tickValues.map((s=>d("div",{class:"tds-slider__value-divider"},this.showTickNumbers&&d("span",null,s)))))),d("div",{key:"9f6214318aaaec0c792a94b3241dbcd9ce321130",class:"tds-slider__track",ref:s=>{this.trackElement=s},tabindex:this.disabled?"-1":"0",role:"presentation",onFocus:()=>{this.thumbElement&&this.thumbElement.focus()}},d("div",{key:"d70dbc3e02dda21538a1c709ee9fb94bf1517766",class:"tds-slider__track-fill",ref:s=>{this.trackFillElement=s}}),d("div",{key:"aa5ceb99150a8387e9b01becd054e3beee185955",class:"tds-slider__thumb",ref:s=>{this.thumbElement=s},onMouseDown:()=>this.grabThumb(),onTouchStart:()=>this.grabThumb(),role:"slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value,"aria-valuetext":`${this.value} of ${this.max}`,"aria-labelledby":this.sliderId+"-label","aria-grabbed":this.thumbGrabbed?"true":"false","aria-label":s,tabindex:this.disabled?"-1":"0"},this.tooltip&&d("div",{key:"b1b3ecfbedd63039e66aabc10db98b7b25c04b6d",class:"tds-slider__value"},this.value,d("svg",{key:"80e22bbb6b56c85f754c7cfae63f21d7adb7eb56",width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},d("path",{key:"4ce11c849ba43904f2d2d1540bb60c12a1e695ee",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"}))),d("div",{key:"44205e90c8ff3e6506e155a66b6ce53aa191f25e",class:"tds-slider__thumb-inner",ref:s=>{this.thumbInnerElement=s}})))),this.useInput&&d("div",{key:"099b5dfac47680c3a2d882273856689d9bdd3953",class:"tds-slider__input-values"},d("div",{key:"68f0c9d23bbadfe61a7edcb8ab38ed7a22b3a7b1",class:"tds-slider__input-value",onClick:s=>this.stepLeft(s)},this.max),d("div",{key:"481a52db19f0bc035c43a252e005e5304a27bf9e",class:"tds-slider__input-field-wrapper"},d("tds-text-field",{key:"5361928ed0dcf9cb5cb873a0b769ea0af76c809c",noMinWidth:!0,size:"sm",type:"number",value:this.value,min:this.min,max:this.max,readOnly:this.readOnly,disabled:this.disabled,onTdsChange:s=>console.log(s),tdsAriaLabel:this.readOnly?this.tdsReadOnlyAriaLabel:void 0,onTdsBlur:s=>this.updateSliderValueFromTextField(s),onKeyDown:s=>this.handleInputFieldEnterPress(s)}))),this.useControls&&d("div",{key:"abaa88dc33a0193360999df8ba6fe04569ff12aa",class:"tds-slider__controls"},d("div",{key:"294ebb18d08ea797ee481f38f2b8c7f57b368ce2",class:"tds-slider__control tds-slider__control-plus",onClick:s=>this.stepRight(s),role:"button","aria-label":"Increase value",tabindex:this.disabled||this.readOnly?"-1":"0"},d("tds-icon",{key:"637b1f5eb5744749b534be62848c2a5f33a20475",name:"plus",size:"16px"})))))}get host(){return this}static get watchers(){return{value:[{handleValueUpdate:0}]}}static get style(){return'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 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.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-inner:focus-within .tds-slider__thumb-inner{outline:var(--tds-slider-thumb-focus-outline);box-shadow:var(--tds-slider-thumb-focus-box-shadow);outline-offset:var(--tds-slider-thumb-focus-outline-offset);z-index:1}.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-slider-input-value-color);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 tds-text-field .text-field-input[type=number]{width:auto;padding:12px;text-align:center;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only{text-align:left}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly{right:12px}.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 11px;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:hover .tds-slider__value{display:block}.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;background-color:var(--tds-slider-thumb-hover)}.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;background-color:var(--tds-slider-thumb-pressed)}.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::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.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 .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-label-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-input-value-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-inputfield-number-disabled);box-shadow:none;pointer-events:none;background:var(--tds-slider-inputfield-background-disabled)}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed;background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider{background-color:var(--tds-slider-divider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-divider-values-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-thumb-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:pointer}.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-controls-disabled)}'}},[0,"tds-slider",{label:[513],value:[1537],min:[513],max:[513],ticks:[513],showTickNumbers:[516,"show-tick-numbers"],tooltip:[516],disabled:[516],readOnly:[516,"read-only"],controls:[516],input:[516],step:[513],name:[513],thumbSize:[513,"thumb-size"],snap:[516],tdsAriaLabel:[513,"tds-aria-label"],sliderId:[513,"slider-id"],tdsReadOnlyAriaLabel:[513,"tds-read-only-aria-label"],reset:[64]},[[0,"keydown","handleKeydown"],[9,"mouseup","handleRelease"],[9,"touchend","handleRelease"],[9,"mousemove","handleMove"],[9,"touchmove","handleMove"]],{value:[{handleValueUpdate:0}]}]);function c(){"undefined"!=typeof customElements&&["tds-slider","tds-icon","tds-popover-core","tds-text-field","tds-tooltip"].forEach((t=>{switch(t){case"tds-slider":customElements.get(s(t))||customElements.define(s(t),h);break;case"tds-icon":customElements.get(s(t))||l();break;case"tds-popover-core":customElements.get(s(t))||a();break;case"tds-text-field":customElements.get(s(t))||o();break;case"tds-tooltip":customElements.get(s(t))||n()}}))}c();const u=h,p=c;export{u as TdsSlider,p as defineCustomElement}
|
|
@@ -24,6 +24,8 @@ const TdsFolderTabs = class {
|
|
|
24
24
|
this.tabElements = [];
|
|
25
25
|
this.clickHandlers = new WeakMap();
|
|
26
26
|
this.addResizeObserver = () => {
|
|
27
|
+
if (typeof ResizeObserver === 'undefined')
|
|
28
|
+
return;
|
|
27
29
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
28
30
|
entries.forEach((entry) => {
|
|
29
31
|
const componentWidth = entry.contentRect.width;
|
|
@@ -178,9 +180,9 @@ const TdsFolderTabs = class {
|
|
|
178
180
|
this.removeEventListenerFromTabs();
|
|
179
181
|
}
|
|
180
182
|
render() {
|
|
181
|
-
return (h(Host, { key: '
|
|
183
|
+
return (h(Host, { key: 'c012eb13a3d87fd700f5aeebda39b5eab29ef867', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'ebee1cf15b1c7425fb675cceedfdbdedacdf7057', class: "wrapper", ref: (el) => {
|
|
182
184
|
this.navWrapperElement = el;
|
|
183
|
-
} }, h("button", { key: '
|
|
185
|
+
} }, h("button", { key: 'f91db438a2374acc0569bccb5895b0061816cdb2', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '497c2b7709f37f12d6c507f9ef4a55851bcfad78', name: "chevron_left", size: "20px" })), h("slot", { key: '1b8be04cceec4793fffac9cf26ba603dd578299d', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '210096e3f848f40fc3a976bfbeb76f623e06c2bc', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'c1235de0754f7df8418b1609a713e2766be059bd', name: "chevron_right", size: "20px" })))));
|
|
184
186
|
}
|
|
185
187
|
get host() { return getElement(this); }
|
|
186
188
|
static get watchers() { return {
|
|
@@ -25,6 +25,8 @@ const TdsInlineTabs = class {
|
|
|
25
25
|
this.tabElements = [];
|
|
26
26
|
this.clickHandlers = new WeakMap();
|
|
27
27
|
this.addResizeObserver = () => {
|
|
28
|
+
if (typeof ResizeObserver === 'undefined')
|
|
29
|
+
return;
|
|
28
30
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
29
31
|
entries.forEach((entry) => {
|
|
30
32
|
const componentWidth = entry.contentRect.width;
|
|
@@ -179,9 +181,9 @@ const TdsInlineTabs = class {
|
|
|
179
181
|
this.removeEventListenerFromTabs();
|
|
180
182
|
}
|
|
181
183
|
render() {
|
|
182
|
-
return (h(Host, { key: '
|
|
184
|
+
return (h(Host, { key: 'b4d7b5c75a8e81e49fdb392580852077a44ebe0c', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}`, style: { '--padding-left': `${this.leftPadding}px` } }, h("div", { key: '3be2477f0c9f24987aa9b0ca5c43c05fb19a32e3', class: "wrapper", ref: (el) => {
|
|
183
185
|
this.navWrapperElement = el;
|
|
184
|
-
} }, h("button", { key: '
|
|
186
|
+
} }, h("button", { key: 'e6252b0e4bd02809a09db1183fe7dbea91103cbf', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'd4ce2393b25f728ac2de1702d144f612902dc330', name: "chevron_left", size: "20px" })), h("slot", { key: 'd079e254442795f81737b5552ce5ce177683c9fb', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '5e3db06d48f3109550974ba0675aef8367373df7', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'cd00e5c5ad1b757104d5c3f7338a45c9243eb25d', name: "chevron_right", size: "20px" })))));
|
|
185
187
|
}
|
|
186
188
|
get host() { return getElement(this); }
|
|
187
189
|
static get watchers() { return {
|
|
@@ -25,6 +25,8 @@ const TdsNavigationTabs = class {
|
|
|
25
25
|
this.tabElements = [];
|
|
26
26
|
this.clickHandlers = new WeakMap();
|
|
27
27
|
this.addResizeObserver = () => {
|
|
28
|
+
if (typeof ResizeObserver === 'undefined')
|
|
29
|
+
return;
|
|
28
30
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
29
31
|
entries.forEach((entry) => {
|
|
30
32
|
const componentWidth = entry.contentRect.width;
|
|
@@ -185,15 +187,15 @@ const TdsNavigationTabs = class {
|
|
|
185
187
|
this.removeEventListenerFromTabs();
|
|
186
188
|
}
|
|
187
189
|
render() {
|
|
188
|
-
return (h(Host, { key: '
|
|
190
|
+
return (h(Host, { key: '0817601e2f5ca452bef28d7ffdeabf00ba49518b', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '9a0c29efcbd7120760a0eb0946343d4aceb963ec', class: "wrapper", ref: (el) => {
|
|
189
191
|
this.navWrapperElement = el;
|
|
190
|
-
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '
|
|
192
|
+
}, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '2283540cb7864e70445dd3303a9e617cabd5c1a3', "aria-label": this.tdsScrollLeftAriaLabel, class: {
|
|
191
193
|
'scroll-left-button': true,
|
|
192
194
|
'show': this.showLeftScroll,
|
|
193
|
-
}, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '
|
|
195
|
+
}, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '4de2e1da1fd959ae3ffe5f93298574b3a161f75d', name: "chevron_left", size: "20px" })), h("slot", { key: 'cb72d39a1d8f8e0289244cd023311e211ec148e5', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '52e0ea24de069a6020e7902ea7222b6f52dc9895', "aria-label": this.tdsScrollRightAriaLabel, class: {
|
|
194
196
|
'scroll-right-button': true,
|
|
195
197
|
'show': this.showRightScroll,
|
|
196
|
-
}, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '
|
|
198
|
+
}, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '4a4a3a5234d74decb2106f902365b39c20977066', name: "chevron_right", size: "20px" })))));
|
|
197
199
|
}
|
|
198
200
|
get host() { return getElement(this); }
|
|
199
201
|
static get watchers() { return {
|
|
@@ -419,7 +419,7 @@ const TdsSlider = class {
|
|
|
419
419
|
}
|
|
420
420
|
componentDidLoad() {
|
|
421
421
|
this.calculateInputSizeFromMax();
|
|
422
|
-
if (!this.resizeObserverAdded) {
|
|
422
|
+
if (!this.resizeObserverAdded && typeof ResizeObserver !== 'undefined') {
|
|
423
423
|
this.resizeObserverAdded = true;
|
|
424
424
|
const resizeObserver = new ResizeObserver(() => {
|
|
425
425
|
this.calculateThumbLeftFromValue(this.value);
|
|
@@ -463,30 +463,30 @@ const TdsSlider = class {
|
|
|
463
463
|
}
|
|
464
464
|
render() {
|
|
465
465
|
const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
|
|
466
|
-
return (h("div", { key: '
|
|
466
|
+
return (h("div", { key: '8b3642548f48ff352395b4d3ebdf84abf464b51d', class: {
|
|
467
467
|
'tds-slider-wrapper': true,
|
|
468
468
|
'read-only': this.readOnly,
|
|
469
|
-
} }, h("input", { key: '
|
|
469
|
+
} }, h("input", { key: '9f35e897044114dd9a5c97a66e9a335d4c09975d', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '74fe5f97050ae8fa970d0d2d00145a1f20b9d728', class: "sr-only", "aria-live": "assertive", ref: (el) => {
|
|
470
470
|
this.ariaLiveElement = el;
|
|
471
|
-
} }), h("div", { key: '
|
|
471
|
+
} }), h("div", { key: '2af5ddfcb4cceb921ca8299438b6bc9b40bf1dd6', class: {
|
|
472
472
|
'tds-slider': true,
|
|
473
473
|
'disabled': this.disabled,
|
|
474
474
|
'tds-slider-small': this.useSmall,
|
|
475
475
|
}, ref: (el) => {
|
|
476
476
|
this.wrapperElement = el;
|
|
477
|
-
}, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '
|
|
477
|
+
}, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '7461b0e104ee03cf51c9e84ab8af06df78b6b12b', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: 'ce065240c807cf75544efd3ecc2c5b1b45e0b987', class: "tds-slider__input-values" }, h("div", { key: 'ac8b1a0d7cd44e079e7739e9697912a7f8c65c62', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'e85dfafe22e306fa8f9c2a0ee2c094caa0937abf', class: "tds-slider__controls" }, h("div", { key: 'b21861744b1ba29cc6d5566d2d466c507b55f54e', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'b31ed68e1b5a96d85951c928abf4dae472889050', name: "minus", size: "16px" })))), h("div", { key: 'b4c46afe353a403e2f2ebb35e40bad3946f83e23', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '0c4662ea24810f52b6415f4bf205e1dff4250d7c', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '39f70859eecd83a4f962288e7d06f61719260297', 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: '9f6214318aaaec0c792a94b3241dbcd9ce321130', class: "tds-slider__track", ref: (el) => {
|
|
478
478
|
this.trackElement = el;
|
|
479
479
|
}, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
|
|
480
480
|
if (this.thumbElement) {
|
|
481
481
|
this.thumbElement.focus();
|
|
482
482
|
}
|
|
483
|
-
} }, h("div", { key: '
|
|
483
|
+
} }, h("div", { key: 'd70dbc3e02dda21538a1c709ee9fb94bf1517766', class: "tds-slider__track-fill", ref: (el) => {
|
|
484
484
|
this.trackFillElement = el;
|
|
485
|
-
} }), h("div", { key: '
|
|
485
|
+
} }), h("div", { key: 'aa5ceb99150a8387e9b01becd054e3beee185955', class: "tds-slider__thumb", ref: (el) => {
|
|
486
486
|
this.thumbElement = el;
|
|
487
|
-
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: '
|
|
487
|
+
}, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: 'b1b3ecfbedd63039e66aabc10db98b7b25c04b6d', class: "tds-slider__value" }, this.value, h("svg", { key: '80e22bbb6b56c85f754c7cfae63f21d7adb7eb56', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4ce11c849ba43904f2d2d1540bb60c12a1e695ee', 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: '44205e90c8ff3e6506e155a66b6ce53aa191f25e', class: "tds-slider__thumb-inner", ref: (el) => {
|
|
488
488
|
this.thumbInnerElement = el;
|
|
489
|
-
} })))), this.useInput && (h("div", { key: '
|
|
489
|
+
} })))), this.useInput && (h("div", { key: '099b5dfac47680c3a2d882273856689d9bdd3953', class: "tds-slider__input-values" }, h("div", { key: '68f0c9d23bbadfe61a7edcb8ab38ed7a22b3a7b1', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '481a52db19f0bc035c43a252e005e5304a27bf9e', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '5361928ed0dcf9cb5cb873a0b769ea0af76c809c', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: 'abaa88dc33a0193360999df8ba6fe04569ff12aa', class: "tds-slider__controls" }, h("div", { key: '294ebb18d08ea797ee481f38f2b8c7f57b368ce2', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '637b1f5eb5744749b534be62848c2a5f33a20475', name: "plus", size: "16px" })))))));
|
|
490
490
|
}
|
|
491
491
|
get host() { return getElement(this); }
|
|
492
492
|
static get watchers() { return {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as s,h as i,H as o,a as e}from"./p-BBBKPH5r.js";const h=class{constructor(i){t(this,i),this.tdsChange=s(this,"tdsChange",7),this.modeVariant=null,this.defaultSelectedIndex=0,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.buttonWidth=0,this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{if("undefined"==typeof ResizeObserver)return;const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let i=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);i+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=i,this.scrollableWidth=i-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const i=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",i),this.clickHandlers.set(t,i),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){if(t<0||t>=this.tabElements.length)throw new Error("Tab index out of bounds");return this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,i)=>(i===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){const t=Array.from(this.host.children);this.tabElements=t.map((t=>(t.setSelected(!1),t))),void 0!==this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last")}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return i(o,{key:"c012eb13a3d87fd700f5aeebda39b5eab29ef867",role:"tablist",class:this.modeVariant?`tds-mode-variant-${this.modeVariant}`:""},i("div",{key:"ebee1cf15b1c7425fb675cceedfdbdedacdf7057",class:"wrapper",ref:t=>{this.navWrapperElement=t}},i("button",{key:"f91db438a2374acc0569bccb5895b0061816cdb2","aria-label":this.tdsScrollLeftAriaLabel,class:"scroll-left-button "+(this.showLeftScroll?"show":""),disabled:!this.showLeftScroll,onClick:()=>this.scrollLeft()},i("tds-icon",{key:"497c2b7709f37f12d6c507f9ef4a55851bcfad78",name:"chevron_left",size:"20px"})),i("slot",{key:"1b8be04cceec4793fffac9cf26ba603dd578299d",onSlotchange:()=>this.handleSlotChange()}),i("button",{key:"210096e3f848f40fc3a976bfbeb76f623e06c2bc","aria-label":this.tdsScrollRightAriaLabel,class:"scroll-right-button "+(this.showRightScroll?"show":""),disabled:!this.showRightScroll,onClick:()=>this.scrollRight()},i("tds-icon",{key:"c1235de0754f7df8418b1609a713e2766be059bd",name:"chevron_right",size:"20px"}))))}get host(){return e(this)}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}};h.style=':host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-within::before,:host .scroll-left-button:focus-within::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:"";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}';export{h as tds_folder_tabs}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as s,h as i,H as e,a as o}from"./p-BBBKPH5r.js";const l=class{constructor(i){t(this,i),this.tdsChange=s(this,"tdsChange",7),this.modeVariant="primary",this.defaultSelectedIndex=0,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.leftPadding=32,this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{if("undefined"==typeof ResizeObserver)return;const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let i=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);i+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=i,this.scrollableWidth=i-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const i=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",i),this.clickHandlers.set(t,i),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){if(t<0||t>=this.tabElements.length)throw new Error("Tab index out of bounds");return this.tabElements=Array.from(this.host.children),this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,i)=>(i===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){this.tabElements=Array.from(this.host.children).map((t=>(t.setSelected(!1),t))),void 0!==this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last")}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return i(e,{key:"b4d7b5c75a8e81e49fdb392580852077a44ebe0c",role:"tablist",class:this.modeVariant?`tds-mode-variant-${this.modeVariant}`:"",style:{"--padding-left":`${this.leftPadding}px`}},i("div",{key:"3be2477f0c9f24987aa9b0ca5c43c05fb19a32e3",class:"wrapper",ref:t=>{this.navWrapperElement=t}},i("button",{key:"e6252b0e4bd02809a09db1183fe7dbea91103cbf","aria-label":this.tdsScrollLeftAriaLabel,class:"scroll-left-button "+(this.showLeftScroll?"show":""),onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},i("tds-icon",{key:"d4ce2393b25f728ac2de1702d144f612902dc330",name:"chevron_left",size:"20px"})),i("slot",{key:"d079e254442795f81737b5552ce5ce177683c9fb",onSlotchange:()=>this.handleSlotChange()}),i("button",{key:"5e3db06d48f3109550974ba0675aef8367373df7","aria-label":this.tdsScrollRightAriaLabel,class:"scroll-right-button "+(this.showRightScroll?"show":""),onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},i("tds-icon",{key:"cd00e5c5ad1b757104d5c3f7338a45c9243eb25d",name:"chevron_right",size:"20px"}))))}get host(){return o(this)}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}};l.style=':host{box-sizing:border-box;--padding-left:0;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:" ";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px;padding-left:var(--padding-left)}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:calc(0px - var(--padding-left));z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-visible::before,:host .scroll-left-button:focus-visible::before{content:"";position:absolute;inset:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus-visible,:host .scroll-left-button:focus-visible{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}';export{l as tds_inline_tabs}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as s,c as t,h as e,a as i}from"./p-BBBKPH5r.js";import{g as d}from"./p-Cn4f8w1e.js";const r=class{constructor(e){s(this,e),this.tdsChange=t(this,"tdsChange",6),this.tdsInput=t(this,"tdsInput",6),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.tdsAriaLabel="",this.sliderId=d(),this.tdsReadOnlyAriaLabel="",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.initialValue="0",this.resetEventListenerAdded=!1,this.formElement=null,this.ariaLiveElement=null,this.resetToInitialValue=()=>{this.forceValueUpdate(this.initialValue),this.reset()}}roundToStep(s){const t=parseFloat(this.step);if(!t)return parseFloat(s.toFixed());const e=Math.round(s/t)*t,i=(t.toString().split(".")[1]||"").length;return parseFloat(e.toFixed(i))}async reset(){this.componentWillLoad(),this.componentDidLoad()}handleKeydown(s){switch(s.key){case"ArrowLeft":case"ArrowDown":case"-":this.stepLeft(s),this.announceValueChange();break;case"ArrowRight":case"ArrowUp":case"+":this.stepRight(s),this.announceValueChange();break;case"Home":this.setToMinValue(),this.announceValueChange();break;case"End":this.setToMaxValue(),this.announceValueChange()}}handleRelease(s){var t,e,i;this.thumbGrabbed?(this.thumbGrabbed=!1,null===(e=this.thumbInnerElement)||void 0===e||e.classList.remove("pressed"),this.thumbElement&&this.thumbElement.setAttribute("aria-grabbed","false"),this.updateValue(s),null===(i=this.trackElement)||void 0===i||i.focus()):(s.target===this.trackElement||s.target===this.trackFillElement)&&(this.thumbCore(s),null===(t=this.trackElement)||void 0===t||t.focus())}handleMove(s){this.thumbGrabbed&&this.thumbCore(s)}handleValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.updateTrack()}setToMinValue(){this.readOnly||this.disabled||this.forceValueUpdate(this.min)}setToMaxValue(){this.readOnly||this.disabled||this.forceValueUpdate(this.max)}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){var t;const e=parseInt(this.ticks),i=null===(t=this.trackElement)||void 0===t?void 0:t.getBoundingClientRect();if(!i)return;let d=0;"mousemove"===s.type||"mouseup"===s.type?d=s.clientX-i.left:"touchmove"===s.type?d=s.touches[0].clientX-i.left:console.warn("Slider component: Unsupported event!"),this.supposedValueSlot=-1,this.useSnapping&&e>0&&(d=this.updateSupposedValueSlot(d)),this.thumbLeft=this.constrainThumb(d),this.thumbElement&&(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+"%")}announceValueChange(){this.ariaLiveElement&&(clearTimeout(this.announcementDebounceTimeout),this.announcementDebounceTimeout=setTimeout((()=>{this.ariaLiveElement&&(this.ariaLiveElement.textContent=`${this.label?this.label+" ":""}${this.value} of ${this.max}`)}),50))}updateValue(s){const t=this.getTrackWidth(),e=parseFloat(this.min),i=parseFloat(this.max);if(this.useSnapping&&this.supposedValueSlot>=0){const s=this.tickValues[this.supposedValueSlot];this.value=s.toString(),this.calculateThumbLeftFromValue(s)}else this.value=this.roundToStep(e+this.thumbLeft/t*(i-e)).toString();this.updateTrack(),this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`)),this.tdsInput.emit({value:this.value}),"touchend"!==s.type&&"mouseup"!==s.type||(this.tdsChange.emit({value:this.value}),this.announceValueChange())}forceValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`)),this.tdsChange.emit({value:this.value}),this.updateTrack(),this.announceValueChange()}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`,this.thumbElement.setAttribute("aria-valuenow",this.value))}updateSliderValueOnInputChange(s){let t=parseFloat(s.target.value);if(t===parseFloat(this.value))return;const e=parseFloat(this.min),i=parseFloat(this.max);t<e?t=e:t>i&&(t=i);const d=this.roundToStep(t);this.forceValueUpdate(d.toString())}updateSliderValueFromTextField(s){const t=s.target;let e=parseFloat(t&&void 0!==t.value?t.value:"");if(Number.isNaN(e))return;const i=parseFloat(this.min),d=parseFloat(this.max);e<i?e=i:e>d&&(e=d);const r=this.roundToStep(e);this.forceValueUpdate(r.toString())}handleInputFieldEnterPress(s){s.stopPropagation(),"Enter"===s.key&&(this.updateSliderValueOnInputChange(s),s.target.blur())}grabThumb(){var s;this.readOnly||(this.thumbGrabbed=!0,null===(s=this.thumbInnerElement)||void 0===s||s.classList.add("pressed"),this.thumbElement&&this.thumbElement.setAttribute("aria-grabbed","true"))}calculateInputSizeFromMax(){const s=this.host.querySelector('tds-text-field input[type="number"]');s&&(this.readOnly?s.style.width=52+8*this.max.length+"px":s.setAttribute("size",`${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=this.roundToStep(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(-parseFloat(this.step),s)}stepRight(s){this.controlsStep(parseFloat(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),e=(parseFloat(this.step).toString().split(".")[1]||"").length;for(let i=1;i<=s;i++){const s=parseFloat(this.min)+t*i;this.tickValues.push(parseFloat(s.toFixed(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(){if(this.calculateInputSizeFromMax(),!this.resizeObserverAdded&&"undefined"!=typeof ResizeObserver){this.resizeObserverAdded=!0;const s=new ResizeObserver((()=>{this.calculateThumbLeftFromValue(this.value),this.updateTrack()}));this.wrapperElement&&s.observe(this.wrapperElement)}this.calculateThumbLeftFromValue(this.value),this.updateTrack(),this.initialValue||(this.initialValue=this.value),this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`),this.thumbElement.tabIndex=this.disabled?-1:0)}componentDidRender(){this.resetEventListenerAdded||(this.formElement=this.host.closest("form"),this.formElement&&(this.formElement.addEventListener("reset",this.resetToInitialValue),this.resetEventListenerAdded=!0))}connectedCallback(){this.readOnly&&!this.tdsReadOnlyAriaLabel&&console.warn("tds-slider: tdsAriaLabel is reccomended when readonly is true"),this.resetEventListenerAdded&&this.formElement&&(this.formElement.removeEventListener("reset",this.resetToInitialValue),this.resetEventListenerAdded=!1)}render(){const s=this.readOnly?this.tdsReadOnlyAriaLabel:this.label||this.tdsAriaLabel;return e("div",{key:"8b3642548f48ff352395b4d3ebdf84abf464b51d",class:{"tds-slider-wrapper":!0,"read-only":this.readOnly}},e("input",{key:"9f35e897044114dd9a5c97a66e9a335d4c09975d",class:"tds-slider-native-element",type:"range",name:this.name,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.disabled}),e("div",{key:"74fe5f97050ae8fa970d0d2d00145a1f20b9d728",class:"sr-only","aria-live":"assertive",ref:s=>{this.ariaLiveElement=s}}),e("div",{key:"2af5ddfcb4cceb921ca8299438b6bc9b40bf1dd6",class:{"tds-slider":!0,disabled:this.disabled,"tds-slider-small":this.useSmall},ref:s=>{this.wrapperElement=s},"aria-disabled":this.disabled?"true":"false"},e("label",{key:"7461b0e104ee03cf51c9e84ab8af06df78b6b12b",id:`${this.sliderId}-label`,class:{offset:this.showTickNumbers}},this.label),this.useInput&&e("div",{key:"ce065240c807cf75544efd3ecc2c5b1b45e0b987",class:"tds-slider__input-values"},e("div",{key:"ac8b1a0d7cd44e079e7739e9697912a7f8c65c62",class:"tds-slider__input-value min-value"},this.min)),this.useControls&&e("div",{key:"e85dfafe22e306fa8f9c2a0ee2c094caa0937abf",class:"tds-slider__controls"},e("div",{key:"b21861744b1ba29cc6d5566d2d466c507b55f54e",class:"tds-slider__control tds-slider__control-minus",onClick:s=>this.stepLeft(s),role:"button","aria-label":"Decrease value",tabindex:this.disabled||this.readOnly?"-1":"0"},e("tds-icon",{key:"b31ed68e1b5a96d85951c928abf4dae472889050",name:"minus",size:"16px"}))),e("div",{key:"b4c46afe353a403e2f2ebb35e40bad3946f83e23",class:"tds-slider-inner",tabIndex:-1},this.tickValues.length>0&&e("div",{key:"0c4662ea24810f52b6415f4bf205e1dff4250d7c",class:"tds-slider__value-dividers-wrapper"},e("div",{key:"39f70859eecd83a4f962288e7d06f61719260297",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:"9f6214318aaaec0c792a94b3241dbcd9ce321130",class:"tds-slider__track",ref:s=>{this.trackElement=s},tabindex:this.disabled?"-1":"0",role:"presentation",onFocus:()=>{this.thumbElement&&this.thumbElement.focus()}},e("div",{key:"d70dbc3e02dda21538a1c709ee9fb94bf1517766",class:"tds-slider__track-fill",ref:s=>{this.trackFillElement=s}}),e("div",{key:"aa5ceb99150a8387e9b01becd054e3beee185955",class:"tds-slider__thumb",ref:s=>{this.thumbElement=s},onMouseDown:()=>this.grabThumb(),onTouchStart:()=>this.grabThumb(),role:"slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value,"aria-valuetext":`${this.value} of ${this.max}`,"aria-labelledby":`${this.sliderId}-label`,"aria-grabbed":this.thumbGrabbed?"true":"false","aria-label":s,tabindex:this.disabled?"-1":"0"},this.tooltip&&e("div",{key:"b1b3ecfbedd63039e66aabc10db98b7b25c04b6d",class:"tds-slider__value"},this.value,e("svg",{key:"80e22bbb6b56c85f754c7cfae63f21d7adb7eb56",width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"4ce11c849ba43904f2d2d1540bb60c12a1e695ee",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:"44205e90c8ff3e6506e155a66b6ce53aa191f25e",class:"tds-slider__thumb-inner",ref:s=>{this.thumbInnerElement=s}})))),this.useInput&&e("div",{key:"099b5dfac47680c3a2d882273856689d9bdd3953",class:"tds-slider__input-values"},e("div",{key:"68f0c9d23bbadfe61a7edcb8ab38ed7a22b3a7b1",class:"tds-slider__input-value",onClick:s=>this.stepLeft(s)},this.max),e("div",{key:"481a52db19f0bc035c43a252e005e5304a27bf9e",class:"tds-slider__input-field-wrapper"},e("tds-text-field",{key:"5361928ed0dcf9cb5cb873a0b769ea0af76c809c",noMinWidth:!0,size:"sm",type:"number",value:this.value,min:this.min,max:this.max,readOnly:this.readOnly,disabled:this.disabled,onTdsChange:s=>console.log(s),tdsAriaLabel:this.readOnly?this.tdsReadOnlyAriaLabel:void 0,onTdsBlur:s=>this.updateSliderValueFromTextField(s),onKeyDown:s=>this.handleInputFieldEnterPress(s)}))),this.useControls&&e("div",{key:"abaa88dc33a0193360999df8ba6fe04569ff12aa",class:"tds-slider__controls"},e("div",{key:"294ebb18d08ea797ee481f38f2b8c7f57b368ce2",class:"tds-slider__control tds-slider__control-plus",onClick:s=>this.stepRight(s),role:"button","aria-label":"Increase value",tabindex:this.disabled||this.readOnly?"-1":"0"},e("tds-icon",{key:"637b1f5eb5744749b534be62848c2a5f33a20475",name:"plus",size:"16px"})))))}get host(){return i(this)}static get watchers(){return{value:[{handleValueUpdate:0}]}}};r.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 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.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-inner:focus-within .tds-slider__thumb-inner{outline:var(--tds-slider-thumb-focus-outline);box-shadow:var(--tds-slider-thumb-focus-box-shadow);outline-offset:var(--tds-slider-thumb-focus-outline-offset);z-index:1}.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-slider-input-value-color);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 tds-text-field .text-field-input[type=number]{width:auto;padding:12px;text-align:center;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only{text-align:left}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly{right:12px}.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 11px;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:hover .tds-slider__value{display:block}.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;background-color:var(--tds-slider-thumb-hover)}.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;background-color:var(--tds-slider-thumb-pressed)}.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::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.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 .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-label-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-input-value-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-inputfield-number-disabled);box-shadow:none;pointer-events:none;background:var(--tds-slider-inputfield-background-disabled)}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed;background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider{background-color:var(--tds-slider-divider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-divider-values-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-thumb-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:pointer}.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-controls-disabled)}';export{r as tds_slider}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as s,h as i,H as o,a as e}from"./p-BBBKPH5r.js";const h=class{constructor(i){t(this,i),this.tdsChange=s(this,"tdsChange",7),this.modeVariant="primary",this.defaultSelectedIndex=0,this.leftPadding=32,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{if("undefined"==typeof ResizeObserver)return;const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let i=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);i+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=i,this.scrollableWidth=i-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const i=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",i),this.clickHandlers.set(t,i),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){return this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,i)=>(i===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){this.tabElements=Array.from(this.host.children).map((t=>(t.setSelected(!1),t))),this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements.length>0&&(this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last"))}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}applyCustomLeftPadding(){this.navWrapperElement&&(this.navWrapperElement.style.paddingLeft=`${this.leftPadding}px`)}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver(),this.applyCustomLeftPadding()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return i(o,{key:"0817601e2f5ca452bef28d7ffdeabf00ba49518b",role:"tablist",class:{[`tds-mode-variant-${this.modeVariant}`]:null!==this.modeVariant}},i("div",{key:"9a0c29efcbd7120760a0eb0946343d4aceb963ec",class:"wrapper",ref:t=>{this.navWrapperElement=t},style:{paddingLeft:`${this.leftPadding}px`}},i("button",{key:"2283540cb7864e70445dd3303a9e617cabd5c1a3","aria-label":this.tdsScrollLeftAriaLabel,class:{"scroll-left-button":!0,show:this.showLeftScroll},onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},i("tds-icon",{key:"4de2e1da1fd959ae3ffe5f93298574b3a161f75d",name:"chevron_left",size:"20px"})),i("slot",{key:"cb72d39a1d8f8e0289244cd023311e211ec148e5",onSlotchange:()=>this.handleSlotChange()}),i("button",{key:"52e0ea24de069a6020e7902ea7222b6f52dc9895","aria-label":this.tdsScrollRightAriaLabel,class:{"scroll-right-button":!0,show:this.showRightScroll},onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},i("tds-icon",{key:"4a4a3a5234d74decb2106f902365b39c20977066",name:"chevron_right",size:"20px"}))))}get host(){return e(this)}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}};h.style=':host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:" ";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:"";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}';export{h as tds_navigation_tabs}
|
package/dist/tegel/tegel.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,g as a,b as t}from"./p-BBBKPH5r.js";export{s as setNonce}from"./p-BBBKPH5r.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((async e=>(await a(),t(JSON.parse('[["p-b9f1bdfd",[[257,"tds-header-launcher",{"tdsAriaLabel":[513,"tds-aria-label"],"open":[32],"buttonEl":[32],"hasListTypeMenu":[32]},[[8,"click","onAnyClick"],[8,"keydown","handleKeyDown"]]]]],["p-6c292a59",[[257,"tds-header-dropdown",{"label":[513],"noDropdownIcon":[516,"no-dropdown-icon"],"selected":[516],"tdsAriaLabel":[513,"tds-aria-label"],"open":[32],"buttonEl":[32]},[[4,"click","onAnyClick"],[8,"keydown","handleKeyDown"]]]]],["p-6d70c3c3",[[0,"tds-slider",{"label":[513],"value":[1537],"min":[513],"max":[513],"ticks":[513],"showTickNumbers":[516,"show-tick-numbers"],"tooltip":[516],"disabled":[516],"readOnly":[516,"read-only"],"controls":[516],"input":[516],"step":[513],"name":[513],"thumbSize":[513,"thumb-size"],"snap":[516],"tdsAriaLabel":[513,"tds-aria-label"],"sliderId":[513,"slider-id"],"tdsReadOnlyAriaLabel":[513,"tds-read-only-aria-label"],"reset":[64]},[[0,"keydown","handleKeydown"],[9,"mouseup","handleRelease"],[9,"touchend","handleRelease"],[9,"mousemove","handleMove"],[9,"touchmove","handleMove"]],{"value":[{"handleValueUpdate":0}]}]]],["p-a424b80f",[[1,"tds-table-footer",{"pagination":[516],"paginationValue":[1538,"pagination-value"],"rowsperpage":[516],"rowsPerPageValues":[16],"rowsPerPageDropdownOpenDirection":[1,"rows-per-page-dropdown-open-direction"],"pages":[514],"cols":[514],"columnsNumber":[32],"compactDesign":[32],"multiselect":[32],"expandableRows":[32],"lastCorrectValue":[32],"tableId":[32],"horizontalScrollWidth":[32],"rowsPerPageValue":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]],{"cols":[{"colsChanged":0}],"multiselect":[{"updateColumnsNumber":0}],"expandableRows":[{"updateColumnsNumber":0}]}]]],["p-14d74306",[[257,"tds-card",{"modeVariant":[513,"mode-variant"],"imagePlacement":[513,"image-placement"],"header":[513],"subheader":[513],"bodyImg":[513,"body-img"],"bodyImgAlt":[513,"body-img-alt"],"bodyDivider":[516,"body-divider"],"clickable":[516],"stretch":[516],"cardId":[513,"card-id"],"expandable":[516],"expanded":[1540]}]]],["p-8b0e1b28",[[1,"tds-header-hamburger",{"tdsAriaLabel":[513,"tds-aria-label"]}]]],["p-9a15616f",[[2,"tds-textarea",{"label":[513],"name":[513],"helper":[513],"cols":[514],"rows":[514],"labelPosition":[513,"label-position"],"placeholder":[513],"value":[513],"disabled":[516],"readOnly":[516,"read-only"],"hideReadOnlyIcon":[516,"hide-read-only-icon"],"state":[513],"maxLength":[514,"max-length"],"modeVariant":[513,"mode-variant"],"autofocus":[516],"noMinWidth":[516,"no-min-width"],"tdsAriaLabel":[513,"tds-aria-label"],"focusInput":[32],"focusElement":[64]}]]],["p-28f3e764",[[257,"tds-header-brand-symbol"]]],["p-6f5456be",[[257,"tds-side-menu-dropdown",{"defaultOpen":[516,"default-open"],"buttonLabel":[513,"button-label"],"selected":[516],"open":[516],"hoverState":[32],"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapsedSideMenuEventHandler"],[1,"pointerenter","onEventPointerEnter"],[0,"focusin","onEventFocus"],[1,"pointerleave","onEventPointerLeave"],[0,"focusout","onEventBlur"],[0,"keydown","handleKeyDown"]]]]],["p-434da9d2",[[257,"tds-side-menu-user",{"heading":[513],"subheading":[513],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"]}]]],["p-1dd505c6",[[257,"tds-accordion-item",{"header":[513],"expandIconPosition":[513,"expand-icon-position"],"disabled":[516],"expanded":[516],"paddingReset":[516,"padding-reset"],"ariaLevelValue":[1,"aria-level-value"],"toggleAccordionItem":[64],"expand":[64],"collapse":[64],"isExpanded":[64]}]]],["p-0c20d1c7",[[257,"tds-banner",{"icon":[513],"header":[513],"subheader":[513],"variant":[513],"bannerId":[513,"banner-id"],"hidden":[516],"roleType":[513,"role-type"],"hideBanner":[64],"showBanner":[64]}]]],["p-313482df",[[2,"tds-datetime",{"type":[513],"value":[1537],"min":[513],"max":[513],"defaultValue":[513,"default-value"],"disabled":[516],"size":[513],"noMinWidth":[516,"no-min-width"],"modeVariant":[513,"mode-variant"],"name":[513],"state":[1537],"autofocus":[516],"label":[513],"labelPosition":[513,"label-position"],"helper":[513],"helperError":[513,"helper-error"],"helperErrorInvalid":[513,"helper-error-invalid"],"tdsAriaLabel":[513,"tds-aria-label"],"customValidator":[16],"focusInput":[32],"reset":[64],"setValue":[64],"focusElement":[64]},[[0,"focusin","handleFocusIn"],[0,"focusout","handleFocusOut"]],{"value":[{"onValueChanged":0}]}]]],["p-d5b0634d",[[257,"tds-folder-tabs",{"modeVariant":[513,"mode-variant"],"defaultSelectedIndex":[514,"default-selected-index"],"selectedIndex":[514,"selected-index"],"tdsScrollLeftAriaLabel":[513,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[513,"tds-scroll-right-aria-label"],"buttonWidth":[32],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":[{"handleSelectedIndexUpdate":0}]}]]],["p-01f3cc50",[[257,"tds-footer-group",{"titleText":[513,"title-text"],"tdsListAriaLabel":[513,"tds-list-aria-label"],"open":[32],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["p-2a58b2f8",[[257,"tds-header-cell",{"cellKey":[513,"cell-key"],"cellValue":[513,"cell-value"],"customWidth":[513,"custom-width"],"sortable":[516],"textAlign":[513,"text-align"],"disablePadding":[516,"disable-padding"],"tdsAriaLabelSortButton":[513,"tds-aria-label-sort-button"],"colSpan":[514,"col-span"],"rowSpan":[514,"row-span"],"textAlignState":[32],"sortingDirection":[32],"sortedByMyKey":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"multiselect":[32],"enableToolbarDesign":[32],"tableId":[32],"expandableRows":[32]},[[16,"internalTdsPropChange","internalTdsPropChangeListener"],[16,"internalSortButtonClicked","updateOptionsContent"]]]]],["p-5e09c7ce",[[260,"tds-header-launcher-list"]]],["p-9cf8c0f0",[[257,"tds-header-launcher-list-item"]]],["p-2630d37d",[[257,"tds-inline-tabs",{"modeVariant":[513,"mode-variant"],"defaultSelectedIndex":[514,"default-selected-index"],"selectedIndex":[514,"selected-index"],"tdsScrollLeftAriaLabel":[513,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[513,"tds-scroll-right-aria-label"],"leftPadding":[514,"left-padding"],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":[{"handleSelectedIndexUpdate":0}]}]]],["p-94e82d86",[[257,"tds-message",{"header":[513],"modeVariant":[513,"mode-variant"],"variant":[513],"noIcon":[516,"no-icon"],"minimal":[516],"tdsAlertDialog":[513,"tds-alert-dialog"],"tdsAriaLabel":[513,"tds-aria-label"]}]]],["p-98eac83d",[[257,"tds-modal",{"header":[513],"prevent":[516],"size":[513],"actionsPosition":[513,"actions-position"],"selector":[513],"referenceEl":[16],"show":[516],"closable":[516],"tdsAlertDialog":[513,"tds-alert-dialog"],"isShown":[32],"activeElementIndex":[32],"showModal":[64],"closeModal":[64],"isOpen":[64],"initializeModal":[64],"cleanupModal":[64]},[[10,"keydown","handleFocusTrap"]],{"show":[{"handleShowPropChange":0}]}]]],["p-5d71b4dc",[[257,"tds-navigation-tabs",{"modeVariant":[513,"mode-variant"],"defaultSelectedIndex":[514,"default-selected-index"],"selectedIndex":[514,"selected-index"],"leftPadding":[514,"left-padding"],"tdsScrollLeftAriaLabel":[513,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[513,"tds-scroll-right-aria-label"],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":[{"handleSelectedIndexUpdate":0}]}]]],["p-00aae27c",[[262,"tds-popover-menu",{"selector":[513],"referenceEl":[16],"show":[516],"defaultShow":[516,"default-show"],"placement":[513],"animation":[513],"offsetSkidding":[514,"offset-skidding"],"offsetDistance":[514,"offset-distance"],"fluidWidth":[516,"fluid-width"],"modeVariant":[513,"mode-variant"],"childRef":[32],"close":[64]}]]],["p-bf77aa74",[[1,"tds-side-menu-close-button"]]],["p-9c2ef80c",[[257,"tds-side-menu-collapse-button",{"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-07c66ff1",[[257,"tds-step",{"index":[513],"state":[513],"tdsAriaCurrent":[513,"tds-aria-current"],"hideLabels":[32],"size":[32],"orientation":[32],"labelPosition":[32]},[[16,"internalTdsPropsChange","handlePropsChange"]]]]],["p-ae5621f5",[[257,"tds-table-body-input-wrapper",{"showIcon":[516,"show-icon"],"renderSlot":[32],"inputFocused":[32],"compactDesign":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-1d066c1b",[[257,"tds-table-body-row",{"selected":[516],"disabled":[516],"clickable":[516],"multiselect":[32],"mainCheckBoxStatus":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-c01dce12",[[257,"tds-table-body-row-expandable",{"colSpan":[514,"col-span"],"rowId":[513,"row-id"],"expanded":[516],"overflow":[513],"autoCollapse":[516,"auto-collapse"],"tdsAriaLabelExpandButton":[513,"tds-aria-label-expand-button"],"selected":[516],"disabled":[516],"isExpanded":[32],"tableId":[32],"columnsNumber":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"modeVariant":[32],"multiselect":[32],"expand":[64],"collapse":[64]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"tdsChange","handleRowExpand"]],{"expanded":[{"watchExpanded":0}]}]]],["p-abd49ffe",[[257,"tds-table-header",{"allSelected":[1540,"all-selected"],"selected":[1540],"disabled":[1540],"indeterminate":[516],"multiselect":[32],"expandableRows":[32],"mainCheckboxSelected":[32],"mainExpendSelected":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"enableToolbarDesign":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"internalTdsRowExpanded","internalTdsRowExpandedListener"]]]]],["p-6e965be5",[[257,"tds-table-header-input-wrapper",{"showIcon":[516,"show-icon"],"compactDesign":[516,"compact-design"],"renderSlot":[32],"inputFocused":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-841d280c",[[257,"tds-table-toolbar",{"tableTitle":[513,"table-title"],"filter":[516],"tdsSearchAriaLabel":[513,"tds-search-aria-label"],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"tableId":[32],"horizontalScrollWidth":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-f08d1a17",[[257,"tds-toast",{"toastId":[513,"toast-id"],"header":[513],"subheader":[513],"variant":[513],"hidden":[516],"closable":[516],"toastRole":[513,"toast-role"],"tdsCloseAriaLabel":[513,"tds-close-aria-label"],"tdsAriaLive":[513,"tds-aria-live"],"hideToast":[64],"showToast":[64]}]]],["p-6fc15fd4",[[257,"tds-accordion",{"modeVariant":[513,"mode-variant"],"hideLastBorder":[516,"hide-last-border"]}]]],["p-0c4944e5",[[1,"tds-badge",{"value":[513],"hidden":[516],"size":[513],"tdsAriaLive":[513,"tds-aria-live"],"tdsAriaLabel":[32],"shape":[32],"text":[32]},null,{"value":[{"watchProps":0}],"size":[{"watchProps":0}]}]]],["p-a7b374a4",[[257,"tds-block",{"modeVariant":[513,"mode-variant"],"componentTag":[513,"component-tag"]}]]],["p-a3ef5f80",[[257,"tds-body-cell",{"cellValue":[520,"cell-value"],"cellKey":[513,"cell-key"],"disablePadding":[516,"disable-padding"],"textAlign":[513,"text-align"],"colSpan":[514,"col-span"],"rowSpan":[514,"row-span"],"textAlignState":[32],"activeSorting":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"tableId":[32]},[[16,"internalTdsPropChange","internalTdsPropChangeListener"],[16,"internalTdsHover","internalTdsHoverListener"],[16,"internalTdsTextAlign","internalTdsTextAlignListener"]]]]],["p-dbd3d34e",[[257,"tds-breadcrumb",{"current":[516]}]]],["p-305797a3",[[257,"tds-breadcrumbs",{"tdsAriaLabel":[513,"tds-aria-label"]}]]],["p-3c624875",[[262,"tds-chip",{"type":[513],"size":[513],"chipId":[513,"chip-id"],"checked":[1540],"name":[513],"value":[513],"disabled":[516],"tdsAriaLabel":[513,"tds-aria-label"]},[[16,"internalRadioOnChange","handleInternaRadioChange"]]]]],["p-974f7eb2",[[257,"tds-folder-tab",{"disabled":[516],"selected":[32],"tabWidth":[32],"setTabWidth":[64],"setSelected":[64]}]]],["p-583d9859",[[257,"tds-footer",{"modeVariant":[513,"mode-variant"]}]]],["p-aa1ae2c3",[[257,"tds-footer-item"]]],["p-dbb6eb5c",[[260,"tds-header"]]],["p-8a92f516",[[257,"tds-header-dropdown-list-user",{"imgUrl":[513,"img-url"],"imgAlt":[513,"img-alt"],"header":[513],"subheader":[513]}]]],["p-cff15a0b",[[260,"tds-header-launcher-grid",{"headingElement":[32]}]]],["p-e3c8271d",[[257,"tds-header-launcher-grid-item"]]],["p-b96f269c",[[260,"tds-header-launcher-grid-title"]]],["p-626c4422",[[260,"tds-header-launcher-list-title"]]],["p-9bec15bf",[[257,"tds-header-title"]]],["p-d26d4174",[[257,"tds-inline-tab",{"disabled":[516],"selected":[32],"setSelected":[64]}]]],["p-dedc2084",[[257,"tds-link",{"disabled":[516],"underline":[516],"standalone":[516]}]]],["p-b535d60d",[[257,"tds-navigation-tab",{"disabled":[516],"selected":[32],"setSelected":[64]}]]],["p-cb84aeb0",[[257,"tds-popover-menu-item",{"disabled":[516]}]]],["p-cbfaf8f6",[[262,"tds-radio-button",{"name":[513],"value":[513],"radioId":[513,"radio-id"],"checked":[516],"required":[516],"disabled":[516],"tdsAriaLabel":[513,"tds-aria-label"],"tdsTabIndex":[514,"tds-tab-index"],"focusElement":[64]}]]],["p-092de082",[[257,"tds-side-menu",{"open":[1540],"persistent":[516],"collapsed":[1540],"isMobile":[32],"isUpperSlotEmpty":[32],"isCollapsed":[32],"initialCollapsedState":[32],"activeElementIndex":[32]},[[8,"keydown","handleKeyDown"],[10,"keydown","handleFocusTrap"],[16,"internalTdsCollapse","collapsedSideMenuEventHandler"]],{"collapsed":[{"onCollapsedChange":0}],"open":[{"onOpenChange":0}]}]]],["p-e1bd2fa0",[[257,"tds-side-menu-dropdown-list",{"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapsedSideMenuEventHandler"]]]]],["p-05f55787",[[257,"tds-side-menu-dropdown-list-item",{"selected":[516],"dropdownHasIcon":[32],"dropdownHasUser":[32],"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-235903eb",[[1,"tds-side-menu-overlay"]]],["p-14844734",[[0,"tds-spinner",{"size":[513],"variant":[513]}]]],["p-c30ed630",[[257,"tds-stepper",{"orientation":[513],"labelPosition":[513,"label-position"],"size":[513],"hideLabels":[516,"hide-labels"],"stepperId":[513,"stepper-id"],"tdsAriaLabel":[513,"tds-aria-label"]},null,{"orientation":[{"handleDirectionChange":0}],"labelPosition":[{"handleLabelPositionChange":0}],"size":[{"handleSizeChange":0}],"hideLabels":[{"handleHideLabelsChange":0}]}]]],["p-6676150e",[[257,"tds-table",{"verticalDividers":[516,"vertical-dividers"],"compactDesign":[516,"compact-design"],"noMinWidth":[516,"no-min-width"],"multiselect":[516],"expandableRows":[516,"expandable-rows"],"responsive":[516],"modeVariant":[513,"mode-variant"],"zebraMode":[513,"zebra-mode"],"horizontalScrollWidth":[513,"horizontal-scroll-width"],"tableId":[513,"table-id"],"enableHorizontalScrollToolbarDesign":[32],"enableHorizontalScrollFooterDesign":[32],"getSelectedRows":[64]},null,{"multiselect":[{"multiselectChanged":0}],"expandableRows":[{"enableExpandableRowsChanged":0}],"compactDesign":[{"compactDesignChanged":0}],"verticalDividers":[{"verticalDividersChanged":0}],"noMinWidth":[{"noMinWidthChanged":0}],"zebraMode":[{"zebraModeChanged":0}],"modeVariant":[{"modeVariantChanged":0}],"horizontalScrollWidth":[{"widthChanged":0}]}]]],["p-9473abea",[[260,"tds-table-body",{"multiselect":[32],"enablePaginationTableBody":[32],"expandableRows":[32],"multiselectArray":[32],"multiselectArrayJSON":[32],"mainCheckboxStatus":[32],"columnsNumber":[32],"zebraMode":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"internalTdsRowChange","bodyCheckboxListener"]]]]],["p-a67979a0",[[262,"tds-tag",{"text":[513],"size":[513],"variant":[513]}]]],["p-80cd1b4c",[[262,"tds-toggle",{"checked":[516],"required":[516],"size":[513],"name":[513],"headline":[513],"disabled":[516],"toggleId":[513,"toggle-id"],"tdsAriaLabel":[513,"tds-aria-label"],"toggle":[64],"focusElement":[64]}]]],["p-6410f220",[[1,"tds-header-launcher-button",{"active":[516],"tdsAriaLabel":[513,"tds-aria-label"]}]]],["p-242583d2",[[262,"tds-text-field",{"type":[513],"labelPosition":[513,"label-position"],"label":[513],"min":[520],"max":[520],"step":[520],"helper":[513],"placeholder":[513],"value":[513],"disabled":[516],"readOnly":[516,"read-only"],"hideReadOnlyIcon":[516,"hide-read-only-icon"],"size":[513],"modeVariant":[513,"mode-variant"],"noMinWidth":[516,"no-min-width"],"name":[513],"state":[513],"maxLength":[514,"max-length"],"autofocus":[516],"tdsAriaLabel":[513,"tds-aria-label"],"required":[516],"autocomplete":[513],"hideNumberArrows":[516,"hide-number-arrows"],"focusInput":[32],"focusElement":[64]}]]],["p-cfc0ad1d",[[257,"tds-header-dropdown-list",{"size":[513],"headingElement":[32]}]]],["p-4ea9b826",[[257,"tds-header-dropdown-list-item",{"selected":[516],"size":[513]}]]],["p-ff25df42",[[273,"tds-dropdown-option",{"value":[520],"disabled":[516],"tdsAriaLabel":[513,"tds-aria-label"],"internalValue":[32],"selected":[32],"multiselect":[32],"size":[32],"setSelected":[64]},null,{"value":[{"valueWatcher":0}]}],[257,"tds-dropdown",{"name":[513],"disabled":[516],"helper":[513],"label":[513],"labelPosition":[513,"label-position"],"modeVariant":[513,"mode-variant"],"openDirection":[513,"open-direction"],"placeholder":[513],"size":[513],"animation":[513],"error":[516],"multiselect":[516],"filter":[516],"normalizeText":[516,"normalize-text"],"noResultText":[513,"no-result-text"],"defaultValue":[520,"default-value"],"value":[1032],"tdsAriaLabel":[513,"tds-aria-label"],"open":[32],"internalValue":[32],"filterResult":[32],"filterFocus":[32],"internalDefaultValue":[32],"selectedOptions":[32],"filterQuery":[32],"setValue":[64],"reset":[64],"removeValue":[64],"focusElement":[64],"close":[64],"updateDisplay":[64],"appendValue":[64]},[[9,"mousedown","onAnyClick"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"],[0,"keydown","onKeyDown"]],{"value":[{"handleValueChange":0}],"open":[{"handleOpenState":0}],"defaultValue":[{"handleDefaultValueChange":0}]}]]],["p-bd098be1",[[262,"tds-popover-canvas",{"selector":[513],"referenceEl":[16],"defaultShow":[516,"default-show"],"show":[516],"placement":[513],"offsetSkidding":[514,"offset-skidding"],"animation":[513],"offsetDistance":[514,"offset-distance"],"modifiers":[16],"tdsAlertDialog":[513,"tds-alert-dialog"],"modeVariant":[513,"mode-variant"],"childRef":[32],"close":[64]}]]],["p-c91a9648",[[262,"tds-button",{"text":[513],"type":[513],"variant":[513],"size":[513],"disabled":[516],"fullbleed":[516],"modeVariant":[513,"mode-variant"],"animation":[513],"tdsAriaLabel":[513,"tds-aria-label"],"name":[513],"value":[513],"onlyIcon":[32]},[[0,"keydown","handleKeyDown"],[0,"keyup","handleKeyUp"]]],[1,"tds-divider",{"orientation":[513],"variant":[513]}]]],["p-fba1269d",[[257,"tds-side-menu-user-image",{"src":[513],"alt":[513]}],[1,"tds-side-menu-user-label",{"heading":[513],"subheading":[513]}]]],["p-a3094874",[[257,"tds-side-menu-item",{"selected":[516],"active":[516],"collapsed":[32],"hasUserComponent":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-a679b838",[[262,"tds-popover-core",{"selector":[513],"referenceEl":[16],"defaultShow":[516,"default-show"],"animation":[513],"show":[516],"placement":[513],"offsetSkidding":[514,"offset-skidding"],"offsetDistance":[514,"offset-distance"],"modifiers":[16],"trigger":[513],"autoHide":[516,"auto-hide"],"renderedShowValue":[32],"popperInstance":[32],"target":[32],"isShown":[32],"disableLogic":[32],"hasShownAtLeastOnce":[32],"openedByKeyboard":[32],"close":[64]},[[8,"click","onAnyClick"],[8,"internalTdsShow","onTdsShow"],[8,"keydown","handleKeydown"]],{"show":[{"onShowChange":0}],"referenceEl":[{"onReferenceElChanged":0}],"trigger":[{"onTriggerChanged":0}],"isShown":[{"onIsShownChange":0}]}]]],["p-f80b5c4b",[[262,"tds-tooltip",{"text":[513],"selector":[513],"referenceEl":[16],"defaultShow":[516,"default-show"],"mouseOverTooltip":[516,"mouse-over-tooltip"],"trigger":[513],"show":[1540],"placement":[513],"offsetSkidding":[514,"offset-skidding"],"offsetDistance":[514,"offset-distance"],"tdsAriaDescribedby":[513,"tds-aria-describedby"]},[[8,"keydown","handleKeyDown"]]]]],["p-719fcc3b",[[262,"tds-checkbox",{"name":[513],"checkboxId":[513,"checkbox-id"],"disabled":[516],"required":[516],"checked":[1540],"indeterminate":[1540],"value":[513],"tdsAriaLabel":[513,"tds-aria-label"],"tdsAriaDescribedby":[513,"tds-aria-describedby"],"toggleCheckbox":[64],"focusElement":[64]},[[4,"reset","handleFormReset"]],{"indeterminate":[{"handleIndeterminateState":0}]}]]],["p-f1c8c48f",[[257,"tds-header-item",{"active":[516],"selected":[516]}],[257,"tds-core-header-item"]]],["p-b3465c24",[[1,"tds-icon",{"name":[513],"size":[513],"svgTitle":[513,"svg-title"],"tdsAriaHidden":[516,"tds-aria-hidden"],"svgDescription":[513,"svg-description"],"icons_object":[32],"arrayOfIcons":[32]}]]]]'),e))));
|
|
1
|
+
import{p as e,g as a,b as t}from"./p-BBBKPH5r.js";export{s as setNonce}from"./p-BBBKPH5r.js";(()=>{const a=import.meta.url,t={};return""!==a&&(t.resourcesUrl=new URL(".",a).href),e(t)})().then((async e=>(await a(),t(JSON.parse('[["p-b9f1bdfd",[[257,"tds-header-launcher",{"tdsAriaLabel":[513,"tds-aria-label"],"open":[32],"buttonEl":[32],"hasListTypeMenu":[32]},[[8,"click","onAnyClick"],[8,"keydown","handleKeyDown"]]]]],["p-6c292a59",[[257,"tds-header-dropdown",{"label":[513],"noDropdownIcon":[516,"no-dropdown-icon"],"selected":[516],"tdsAriaLabel":[513,"tds-aria-label"],"open":[32],"buttonEl":[32]},[[4,"click","onAnyClick"],[8,"keydown","handleKeyDown"]]]]],["p-354919ea",[[0,"tds-slider",{"label":[513],"value":[1537],"min":[513],"max":[513],"ticks":[513],"showTickNumbers":[516,"show-tick-numbers"],"tooltip":[516],"disabled":[516],"readOnly":[516,"read-only"],"controls":[516],"input":[516],"step":[513],"name":[513],"thumbSize":[513,"thumb-size"],"snap":[516],"tdsAriaLabel":[513,"tds-aria-label"],"sliderId":[513,"slider-id"],"tdsReadOnlyAriaLabel":[513,"tds-read-only-aria-label"],"reset":[64]},[[0,"keydown","handleKeydown"],[9,"mouseup","handleRelease"],[9,"touchend","handleRelease"],[9,"mousemove","handleMove"],[9,"touchmove","handleMove"]],{"value":[{"handleValueUpdate":0}]}]]],["p-a424b80f",[[1,"tds-table-footer",{"pagination":[516],"paginationValue":[1538,"pagination-value"],"rowsperpage":[516],"rowsPerPageValues":[16],"rowsPerPageDropdownOpenDirection":[1,"rows-per-page-dropdown-open-direction"],"pages":[514],"cols":[514],"columnsNumber":[32],"compactDesign":[32],"multiselect":[32],"expandableRows":[32],"lastCorrectValue":[32],"tableId":[32],"horizontalScrollWidth":[32],"rowsPerPageValue":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]],{"cols":[{"colsChanged":0}],"multiselect":[{"updateColumnsNumber":0}],"expandableRows":[{"updateColumnsNumber":0}]}]]],["p-14d74306",[[257,"tds-card",{"modeVariant":[513,"mode-variant"],"imagePlacement":[513,"image-placement"],"header":[513],"subheader":[513],"bodyImg":[513,"body-img"],"bodyImgAlt":[513,"body-img-alt"],"bodyDivider":[516,"body-divider"],"clickable":[516],"stretch":[516],"cardId":[513,"card-id"],"expandable":[516],"expanded":[1540]}]]],["p-8b0e1b28",[[1,"tds-header-hamburger",{"tdsAriaLabel":[513,"tds-aria-label"]}]]],["p-9a15616f",[[2,"tds-textarea",{"label":[513],"name":[513],"helper":[513],"cols":[514],"rows":[514],"labelPosition":[513,"label-position"],"placeholder":[513],"value":[513],"disabled":[516],"readOnly":[516,"read-only"],"hideReadOnlyIcon":[516,"hide-read-only-icon"],"state":[513],"maxLength":[514,"max-length"],"modeVariant":[513,"mode-variant"],"autofocus":[516],"noMinWidth":[516,"no-min-width"],"tdsAriaLabel":[513,"tds-aria-label"],"focusInput":[32],"focusElement":[64]}]]],["p-28f3e764",[[257,"tds-header-brand-symbol"]]],["p-6f5456be",[[257,"tds-side-menu-dropdown",{"defaultOpen":[516,"default-open"],"buttonLabel":[513,"button-label"],"selected":[516],"open":[516],"hoverState":[32],"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapsedSideMenuEventHandler"],[1,"pointerenter","onEventPointerEnter"],[0,"focusin","onEventFocus"],[1,"pointerleave","onEventPointerLeave"],[0,"focusout","onEventBlur"],[0,"keydown","handleKeyDown"]]]]],["p-434da9d2",[[257,"tds-side-menu-user",{"heading":[513],"subheading":[513],"imgSrc":[513,"img-src"],"imgAlt":[513,"img-alt"]}]]],["p-1dd505c6",[[257,"tds-accordion-item",{"header":[513],"expandIconPosition":[513,"expand-icon-position"],"disabled":[516],"expanded":[516],"paddingReset":[516,"padding-reset"],"ariaLevelValue":[1,"aria-level-value"],"toggleAccordionItem":[64],"expand":[64],"collapse":[64],"isExpanded":[64]}]]],["p-0c20d1c7",[[257,"tds-banner",{"icon":[513],"header":[513],"subheader":[513],"variant":[513],"bannerId":[513,"banner-id"],"hidden":[516],"roleType":[513,"role-type"],"hideBanner":[64],"showBanner":[64]}]]],["p-313482df",[[2,"tds-datetime",{"type":[513],"value":[1537],"min":[513],"max":[513],"defaultValue":[513,"default-value"],"disabled":[516],"size":[513],"noMinWidth":[516,"no-min-width"],"modeVariant":[513,"mode-variant"],"name":[513],"state":[1537],"autofocus":[516],"label":[513],"labelPosition":[513,"label-position"],"helper":[513],"helperError":[513,"helper-error"],"helperErrorInvalid":[513,"helper-error-invalid"],"tdsAriaLabel":[513,"tds-aria-label"],"customValidator":[16],"focusInput":[32],"reset":[64],"setValue":[64],"focusElement":[64]},[[0,"focusin","handleFocusIn"],[0,"focusout","handleFocusOut"]],{"value":[{"onValueChanged":0}]}]]],["p-2b77f6d6",[[257,"tds-folder-tabs",{"modeVariant":[513,"mode-variant"],"defaultSelectedIndex":[514,"default-selected-index"],"selectedIndex":[514,"selected-index"],"tdsScrollLeftAriaLabel":[513,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[513,"tds-scroll-right-aria-label"],"buttonWidth":[32],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":[{"handleSelectedIndexUpdate":0}]}]]],["p-01f3cc50",[[257,"tds-footer-group",{"titleText":[513,"title-text"],"tdsListAriaLabel":[513,"tds-list-aria-label"],"open":[32],"isMobile":[32]},[[9,"resize","handleResize"]]]]],["p-2a58b2f8",[[257,"tds-header-cell",{"cellKey":[513,"cell-key"],"cellValue":[513,"cell-value"],"customWidth":[513,"custom-width"],"sortable":[516],"textAlign":[513,"text-align"],"disablePadding":[516,"disable-padding"],"tdsAriaLabelSortButton":[513,"tds-aria-label-sort-button"],"colSpan":[514,"col-span"],"rowSpan":[514,"row-span"],"textAlignState":[32],"sortingDirection":[32],"sortedByMyKey":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"multiselect":[32],"enableToolbarDesign":[32],"tableId":[32],"expandableRows":[32]},[[16,"internalTdsPropChange","internalTdsPropChangeListener"],[16,"internalSortButtonClicked","updateOptionsContent"]]]]],["p-5e09c7ce",[[260,"tds-header-launcher-list"]]],["p-9cf8c0f0",[[257,"tds-header-launcher-list-item"]]],["p-2f8d6d31",[[257,"tds-inline-tabs",{"modeVariant":[513,"mode-variant"],"defaultSelectedIndex":[514,"default-selected-index"],"selectedIndex":[514,"selected-index"],"tdsScrollLeftAriaLabel":[513,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[513,"tds-scroll-right-aria-label"],"leftPadding":[514,"left-padding"],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":[{"handleSelectedIndexUpdate":0}]}]]],["p-94e82d86",[[257,"tds-message",{"header":[513],"modeVariant":[513,"mode-variant"],"variant":[513],"noIcon":[516,"no-icon"],"minimal":[516],"tdsAlertDialog":[513,"tds-alert-dialog"],"tdsAriaLabel":[513,"tds-aria-label"]}]]],["p-98eac83d",[[257,"tds-modal",{"header":[513],"prevent":[516],"size":[513],"actionsPosition":[513,"actions-position"],"selector":[513],"referenceEl":[16],"show":[516],"closable":[516],"tdsAlertDialog":[513,"tds-alert-dialog"],"isShown":[32],"activeElementIndex":[32],"showModal":[64],"closeModal":[64],"isOpen":[64],"initializeModal":[64],"cleanupModal":[64]},[[10,"keydown","handleFocusTrap"]],{"show":[{"handleShowPropChange":0}]}]]],["p-a4a3367d",[[257,"tds-navigation-tabs",{"modeVariant":[513,"mode-variant"],"defaultSelectedIndex":[514,"default-selected-index"],"selectedIndex":[514,"selected-index"],"leftPadding":[514,"left-padding"],"tdsScrollLeftAriaLabel":[513,"tds-scroll-left-aria-label"],"tdsScrollRightAriaLabel":[513,"tds-scroll-right-aria-label"],"showLeftScroll":[32],"showRightScroll":[32],"selectTab":[64],"reinitialize":[64]},null,{"selectedIndex":[{"handleSelectedIndexUpdate":0}]}]]],["p-00aae27c",[[262,"tds-popover-menu",{"selector":[513],"referenceEl":[16],"show":[516],"defaultShow":[516,"default-show"],"placement":[513],"animation":[513],"offsetSkidding":[514,"offset-skidding"],"offsetDistance":[514,"offset-distance"],"fluidWidth":[516,"fluid-width"],"modeVariant":[513,"mode-variant"],"childRef":[32],"close":[64]}]]],["p-bf77aa74",[[1,"tds-side-menu-close-button"]]],["p-9c2ef80c",[[257,"tds-side-menu-collapse-button",{"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-07c66ff1",[[257,"tds-step",{"index":[513],"state":[513],"tdsAriaCurrent":[513,"tds-aria-current"],"hideLabels":[32],"size":[32],"orientation":[32],"labelPosition":[32]},[[16,"internalTdsPropsChange","handlePropsChange"]]]]],["p-ae5621f5",[[257,"tds-table-body-input-wrapper",{"showIcon":[516,"show-icon"],"renderSlot":[32],"inputFocused":[32],"compactDesign":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-1d066c1b",[[257,"tds-table-body-row",{"selected":[516],"disabled":[516],"clickable":[516],"multiselect":[32],"mainCheckBoxStatus":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-c01dce12",[[257,"tds-table-body-row-expandable",{"colSpan":[514,"col-span"],"rowId":[513,"row-id"],"expanded":[516],"overflow":[513],"autoCollapse":[516,"auto-collapse"],"tdsAriaLabelExpandButton":[513,"tds-aria-label-expand-button"],"selected":[516],"disabled":[516],"isExpanded":[32],"tableId":[32],"columnsNumber":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"modeVariant":[32],"multiselect":[32],"expand":[64],"collapse":[64]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"tdsChange","handleRowExpand"]],{"expanded":[{"watchExpanded":0}]}]]],["p-abd49ffe",[[257,"tds-table-header",{"allSelected":[1540,"all-selected"],"selected":[1540],"disabled":[1540],"indeterminate":[516],"multiselect":[32],"expandableRows":[32],"mainCheckboxSelected":[32],"mainExpendSelected":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"enableToolbarDesign":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"internalTdsRowExpanded","internalTdsRowExpandedListener"]]]]],["p-6e965be5",[[257,"tds-table-header-input-wrapper",{"showIcon":[516,"show-icon"],"compactDesign":[516,"compact-design"],"renderSlot":[32],"inputFocused":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-841d280c",[[257,"tds-table-toolbar",{"tableTitle":[513,"table-title"],"filter":[516],"tdsSearchAriaLabel":[513,"tds-search-aria-label"],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"whiteBackground":[32],"tableId":[32],"horizontalScrollWidth":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"]]]]],["p-f08d1a17",[[257,"tds-toast",{"toastId":[513,"toast-id"],"header":[513],"subheader":[513],"variant":[513],"hidden":[516],"closable":[516],"toastRole":[513,"toast-role"],"tdsCloseAriaLabel":[513,"tds-close-aria-label"],"tdsAriaLive":[513,"tds-aria-live"],"hideToast":[64],"showToast":[64]}]]],["p-6fc15fd4",[[257,"tds-accordion",{"modeVariant":[513,"mode-variant"],"hideLastBorder":[516,"hide-last-border"]}]]],["p-0c4944e5",[[1,"tds-badge",{"value":[513],"hidden":[516],"size":[513],"tdsAriaLive":[513,"tds-aria-live"],"tdsAriaLabel":[32],"shape":[32],"text":[32]},null,{"value":[{"watchProps":0}],"size":[{"watchProps":0}]}]]],["p-a7b374a4",[[257,"tds-block",{"modeVariant":[513,"mode-variant"],"componentTag":[513,"component-tag"]}]]],["p-a3ef5f80",[[257,"tds-body-cell",{"cellValue":[520,"cell-value"],"cellKey":[513,"cell-key"],"disablePadding":[516,"disable-padding"],"textAlign":[513,"text-align"],"colSpan":[514,"col-span"],"rowSpan":[514,"row-span"],"textAlignState":[32],"activeSorting":[32],"verticalDividers":[32],"compactDesign":[32],"noMinWidth":[32],"tableId":[32]},[[16,"internalTdsPropChange","internalTdsPropChangeListener"],[16,"internalTdsHover","internalTdsHoverListener"],[16,"internalTdsTextAlign","internalTdsTextAlignListener"]]]]],["p-dbd3d34e",[[257,"tds-breadcrumb",{"current":[516]}]]],["p-305797a3",[[257,"tds-breadcrumbs",{"tdsAriaLabel":[513,"tds-aria-label"]}]]],["p-3c624875",[[262,"tds-chip",{"type":[513],"size":[513],"chipId":[513,"chip-id"],"checked":[1540],"name":[513],"value":[513],"disabled":[516],"tdsAriaLabel":[513,"tds-aria-label"]},[[16,"internalRadioOnChange","handleInternaRadioChange"]]]]],["p-974f7eb2",[[257,"tds-folder-tab",{"disabled":[516],"selected":[32],"tabWidth":[32],"setTabWidth":[64],"setSelected":[64]}]]],["p-583d9859",[[257,"tds-footer",{"modeVariant":[513,"mode-variant"]}]]],["p-aa1ae2c3",[[257,"tds-footer-item"]]],["p-dbb6eb5c",[[260,"tds-header"]]],["p-8a92f516",[[257,"tds-header-dropdown-list-user",{"imgUrl":[513,"img-url"],"imgAlt":[513,"img-alt"],"header":[513],"subheader":[513]}]]],["p-cff15a0b",[[260,"tds-header-launcher-grid",{"headingElement":[32]}]]],["p-e3c8271d",[[257,"tds-header-launcher-grid-item"]]],["p-b96f269c",[[260,"tds-header-launcher-grid-title"]]],["p-626c4422",[[260,"tds-header-launcher-list-title"]]],["p-9bec15bf",[[257,"tds-header-title"]]],["p-d26d4174",[[257,"tds-inline-tab",{"disabled":[516],"selected":[32],"setSelected":[64]}]]],["p-dedc2084",[[257,"tds-link",{"disabled":[516],"underline":[516],"standalone":[516]}]]],["p-b535d60d",[[257,"tds-navigation-tab",{"disabled":[516],"selected":[32],"setSelected":[64]}]]],["p-cb84aeb0",[[257,"tds-popover-menu-item",{"disabled":[516]}]]],["p-cbfaf8f6",[[262,"tds-radio-button",{"name":[513],"value":[513],"radioId":[513,"radio-id"],"checked":[516],"required":[516],"disabled":[516],"tdsAriaLabel":[513,"tds-aria-label"],"tdsTabIndex":[514,"tds-tab-index"],"focusElement":[64]}]]],["p-092de082",[[257,"tds-side-menu",{"open":[1540],"persistent":[516],"collapsed":[1540],"isMobile":[32],"isUpperSlotEmpty":[32],"isCollapsed":[32],"initialCollapsedState":[32],"activeElementIndex":[32]},[[8,"keydown","handleKeyDown"],[10,"keydown","handleFocusTrap"],[16,"internalTdsCollapse","collapsedSideMenuEventHandler"]],{"collapsed":[{"onCollapsedChange":0}],"open":[{"onOpenChange":0}]}]]],["p-e1bd2fa0",[[257,"tds-side-menu-dropdown-list",{"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapsedSideMenuEventHandler"]]]]],["p-05f55787",[[257,"tds-side-menu-dropdown-list-item",{"selected":[516],"dropdownHasIcon":[32],"dropdownHasUser":[32],"collapsed":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-235903eb",[[1,"tds-side-menu-overlay"]]],["p-14844734",[[0,"tds-spinner",{"size":[513],"variant":[513]}]]],["p-c30ed630",[[257,"tds-stepper",{"orientation":[513],"labelPosition":[513,"label-position"],"size":[513],"hideLabels":[516,"hide-labels"],"stepperId":[513,"stepper-id"],"tdsAriaLabel":[513,"tds-aria-label"]},null,{"orientation":[{"handleDirectionChange":0}],"labelPosition":[{"handleLabelPositionChange":0}],"size":[{"handleSizeChange":0}],"hideLabels":[{"handleHideLabelsChange":0}]}]]],["p-6676150e",[[257,"tds-table",{"verticalDividers":[516,"vertical-dividers"],"compactDesign":[516,"compact-design"],"noMinWidth":[516,"no-min-width"],"multiselect":[516],"expandableRows":[516,"expandable-rows"],"responsive":[516],"modeVariant":[513,"mode-variant"],"zebraMode":[513,"zebra-mode"],"horizontalScrollWidth":[513,"horizontal-scroll-width"],"tableId":[513,"table-id"],"enableHorizontalScrollToolbarDesign":[32],"enableHorizontalScrollFooterDesign":[32],"getSelectedRows":[64]},null,{"multiselect":[{"multiselectChanged":0}],"expandableRows":[{"enableExpandableRowsChanged":0}],"compactDesign":[{"compactDesignChanged":0}],"verticalDividers":[{"verticalDividersChanged":0}],"noMinWidth":[{"noMinWidthChanged":0}],"zebraMode":[{"zebraModeChanged":0}],"modeVariant":[{"modeVariantChanged":0}],"horizontalScrollWidth":[{"widthChanged":0}]}]]],["p-9473abea",[[260,"tds-table-body",{"multiselect":[32],"enablePaginationTableBody":[32],"expandableRows":[32],"multiselectArray":[32],"multiselectArrayJSON":[32],"mainCheckboxStatus":[32],"columnsNumber":[32],"zebraMode":[32],"tableId":[32]},[[16,"internalTdsTablePropChange","internalTdsPropChangeListener"],[16,"internalTdsRowChange","bodyCheckboxListener"]]]]],["p-a67979a0",[[262,"tds-tag",{"text":[513],"size":[513],"variant":[513]}]]],["p-80cd1b4c",[[262,"tds-toggle",{"checked":[516],"required":[516],"size":[513],"name":[513],"headline":[513],"disabled":[516],"toggleId":[513,"toggle-id"],"tdsAriaLabel":[513,"tds-aria-label"],"toggle":[64],"focusElement":[64]}]]],["p-6410f220",[[1,"tds-header-launcher-button",{"active":[516],"tdsAriaLabel":[513,"tds-aria-label"]}]]],["p-242583d2",[[262,"tds-text-field",{"type":[513],"labelPosition":[513,"label-position"],"label":[513],"min":[520],"max":[520],"step":[520],"helper":[513],"placeholder":[513],"value":[513],"disabled":[516],"readOnly":[516,"read-only"],"hideReadOnlyIcon":[516,"hide-read-only-icon"],"size":[513],"modeVariant":[513,"mode-variant"],"noMinWidth":[516,"no-min-width"],"name":[513],"state":[513],"maxLength":[514,"max-length"],"autofocus":[516],"tdsAriaLabel":[513,"tds-aria-label"],"required":[516],"autocomplete":[513],"hideNumberArrows":[516,"hide-number-arrows"],"focusInput":[32],"focusElement":[64]}]]],["p-cfc0ad1d",[[257,"tds-header-dropdown-list",{"size":[513],"headingElement":[32]}]]],["p-4ea9b826",[[257,"tds-header-dropdown-list-item",{"selected":[516],"size":[513]}]]],["p-ff25df42",[[273,"tds-dropdown-option",{"value":[520],"disabled":[516],"tdsAriaLabel":[513,"tds-aria-label"],"internalValue":[32],"selected":[32],"multiselect":[32],"size":[32],"setSelected":[64]},null,{"value":[{"valueWatcher":0}]}],[257,"tds-dropdown",{"name":[513],"disabled":[516],"helper":[513],"label":[513],"labelPosition":[513,"label-position"],"modeVariant":[513,"mode-variant"],"openDirection":[513,"open-direction"],"placeholder":[513],"size":[513],"animation":[513],"error":[516],"multiselect":[516],"filter":[516],"normalizeText":[516,"normalize-text"],"noResultText":[513,"no-result-text"],"defaultValue":[520,"default-value"],"value":[1032],"tdsAriaLabel":[513,"tds-aria-label"],"open":[32],"internalValue":[32],"filterResult":[32],"filterFocus":[32],"internalDefaultValue":[32],"selectedOptions":[32],"filterQuery":[32],"setValue":[64],"reset":[64],"removeValue":[64],"focusElement":[64],"close":[64],"updateDisplay":[64],"appendValue":[64]},[[9,"mousedown","onAnyClick"],[0,"focusin","onFocusIn"],[0,"focusout","onFocusOut"],[0,"keydown","onKeyDown"]],{"value":[{"handleValueChange":0}],"open":[{"handleOpenState":0}],"defaultValue":[{"handleDefaultValueChange":0}]}]]],["p-bd098be1",[[262,"tds-popover-canvas",{"selector":[513],"referenceEl":[16],"defaultShow":[516,"default-show"],"show":[516],"placement":[513],"offsetSkidding":[514,"offset-skidding"],"animation":[513],"offsetDistance":[514,"offset-distance"],"modifiers":[16],"tdsAlertDialog":[513,"tds-alert-dialog"],"modeVariant":[513,"mode-variant"],"childRef":[32],"close":[64]}]]],["p-c91a9648",[[262,"tds-button",{"text":[513],"type":[513],"variant":[513],"size":[513],"disabled":[516],"fullbleed":[516],"modeVariant":[513,"mode-variant"],"animation":[513],"tdsAriaLabel":[513,"tds-aria-label"],"name":[513],"value":[513],"onlyIcon":[32]},[[0,"keydown","handleKeyDown"],[0,"keyup","handleKeyUp"]]],[1,"tds-divider",{"orientation":[513],"variant":[513]}]]],["p-fba1269d",[[257,"tds-side-menu-user-image",{"src":[513],"alt":[513]}],[1,"tds-side-menu-user-label",{"heading":[513],"subheading":[513]}]]],["p-a3094874",[[257,"tds-side-menu-item",{"selected":[516],"active":[516],"collapsed":[32],"hasUserComponent":[32]},[[16,"internalTdsSideMenuPropChange","collapseSideMenuEventHandler"]]]]],["p-a679b838",[[262,"tds-popover-core",{"selector":[513],"referenceEl":[16],"defaultShow":[516,"default-show"],"animation":[513],"show":[516],"placement":[513],"offsetSkidding":[514,"offset-skidding"],"offsetDistance":[514,"offset-distance"],"modifiers":[16],"trigger":[513],"autoHide":[516,"auto-hide"],"renderedShowValue":[32],"popperInstance":[32],"target":[32],"isShown":[32],"disableLogic":[32],"hasShownAtLeastOnce":[32],"openedByKeyboard":[32],"close":[64]},[[8,"click","onAnyClick"],[8,"internalTdsShow","onTdsShow"],[8,"keydown","handleKeydown"]],{"show":[{"onShowChange":0}],"referenceEl":[{"onReferenceElChanged":0}],"trigger":[{"onTriggerChanged":0}],"isShown":[{"onIsShownChange":0}]}]]],["p-f80b5c4b",[[262,"tds-tooltip",{"text":[513],"selector":[513],"referenceEl":[16],"defaultShow":[516,"default-show"],"mouseOverTooltip":[516,"mouse-over-tooltip"],"trigger":[513],"show":[1540],"placement":[513],"offsetSkidding":[514,"offset-skidding"],"offsetDistance":[514,"offset-distance"],"tdsAriaDescribedby":[513,"tds-aria-describedby"]},[[8,"keydown","handleKeyDown"]]]]],["p-719fcc3b",[[262,"tds-checkbox",{"name":[513],"checkboxId":[513,"checkbox-id"],"disabled":[516],"required":[516],"checked":[1540],"indeterminate":[1540],"value":[513],"tdsAriaLabel":[513,"tds-aria-label"],"tdsAriaDescribedby":[513,"tds-aria-describedby"],"toggleCheckbox":[64],"focusElement":[64]},[[4,"reset","handleFormReset"]],{"indeterminate":[{"handleIndeterminateState":0}]}]]],["p-f1c8c48f",[[257,"tds-header-item",{"active":[516],"selected":[516]}],[257,"tds-core-header-item"]]],["p-b3465c24",[[1,"tds-icon",{"name":[513],"size":[513],"svgTitle":[513,"svg-title"],"tdsAriaHidden":[516,"tds-aria-hidden"],"svgDescription":[513,"svg-description"],"icons_object":[32],"arrayOfIcons":[32]}]]]]'),e))));
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as s,h as i,H as o,a as e}from"./p-BBBKPH5r.js";const l=class{constructor(i){t(this,i),this.tdsChange=s(this,"tdsChange",7),this.modeVariant="primary",this.defaultSelectedIndex=0,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.leftPadding=32,this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let i=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);i+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=i,this.scrollableWidth=i-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const i=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",i),this.clickHandlers.set(t,i),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){if(t<0||t>=this.tabElements.length)throw new Error("Tab index out of bounds");return this.tabElements=Array.from(this.host.children),this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,i)=>(i===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){this.tabElements=Array.from(this.host.children).map((t=>(t.setSelected(!1),t))),void 0!==this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last")}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return i(o,{key:"0e5247ba8acec870b9bb05298a5b026342357646",role:"tablist",class:this.modeVariant?`tds-mode-variant-${this.modeVariant}`:"",style:{"--padding-left":`${this.leftPadding}px`}},i("div",{key:"63a3aefb4e191e56992268d731a15059184be19c",class:"wrapper",ref:t=>{this.navWrapperElement=t}},i("button",{key:"932469fb8af5fe48162b2590ca9169ffbd1a5769","aria-label":this.tdsScrollLeftAriaLabel,class:"scroll-left-button "+(this.showLeftScroll?"show":""),onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},i("tds-icon",{key:"3bfa5b8bbd6b12a9f38b17e63e33cb688cb85334",name:"chevron_left",size:"20px"})),i("slot",{key:"3363d54fb1e2721d0ae54e5469508e555b680c01",onSlotchange:()=>this.handleSlotChange()}),i("button",{key:"930cbd19d6aa5a5a5aaf5aa97a80e00248583078","aria-label":this.tdsScrollRightAriaLabel,class:"scroll-right-button "+(this.showRightScroll?"show":""),onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},i("tds-icon",{key:"35def462aa0baafc0a0f783cc2c9ea197e853461",name:"chevron_right",size:"20px"}))))}get host(){return e(this)}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}};l.style=':host{box-sizing:border-box;--padding-left:0;display:flex;background-color:var(--tds-inline-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:" ";display:block;border-bottom:1px solid var(--tds-inline-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px;padding-left:var(--padding-left)}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:calc(0px - var(--padding-left));z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-visible::before,:host .scroll-left-button:focus-visible::before{content:"";position:absolute;inset:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus-visible,:host .scroll-left-button:focus-visible{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}';export{l as tds_inline_tabs}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as s,h as i,H as o,a as e}from"./p-BBBKPH5r.js";const h=class{constructor(i){t(this,i),this.tdsChange=s(this,"tdsChange",7),this.modeVariant="primary",this.defaultSelectedIndex=0,this.leftPadding=32,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let i=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);i+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=i,this.scrollableWidth=i-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const i=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",i),this.clickHandlers.set(t,i),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){return this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,i)=>(i===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){this.tabElements=Array.from(this.host.children).map((t=>(t.setSelected(!1),t))),this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements.length>0&&(this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last"))}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}applyCustomLeftPadding(){this.navWrapperElement&&(this.navWrapperElement.style.paddingLeft=`${this.leftPadding}px`)}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver(),this.applyCustomLeftPadding()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return i(o,{key:"354d2b26b3f43e7246143763458d6f3f55d8e79f",role:"tablist",class:{[`tds-mode-variant-${this.modeVariant}`]:null!==this.modeVariant}},i("div",{key:"a8eb26e45b15a39aaf5e11709ee96ed5f8e42a74",class:"wrapper",ref:t=>{this.navWrapperElement=t},style:{paddingLeft:`${this.leftPadding}px`}},i("button",{key:"262cc0c997e4ca104807a4f0ec993da44aeb934f","aria-label":this.tdsScrollLeftAriaLabel,class:{"scroll-left-button":!0,show:this.showLeftScroll},onClick:()=>this.scrollLeft(),disabled:!this.showLeftScroll},i("tds-icon",{key:"d054bf788417efcd7b90bf5a08938d742585cf53",name:"chevron_left",size:"20px"})),i("slot",{key:"6a68aa49460f36728da7041096fb6f465cbcfb89",onSlotchange:()=>this.handleSlotChange()}),i("button",{key:"568c22852054f134456c0e8fb8b1215627eaefe1","aria-label":this.tdsScrollRightAriaLabel,class:{"scroll-right-button":!0,show:this.showRightScroll},onClick:()=>this.scrollRight(),disabled:!this.showRightScroll},i("tds-icon",{key:"be511dab5fbd285d26885c52ebf63697198d2284",name:"chevron_right",size:"20px"}))))}get host(){return e(this)}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}};h.style=':host{box-sizing:border-box;display:flex;background-color:var(--tds-navigation-tabs-background);position:relative}:host *{box-sizing:border-box}:host::after{content:" ";display:block;border-bottom:1px solid var(--tds-navigation-tabs-horizontal-divider-background);left:0;right:0;bottom:0;position:absolute}:host .wrapper{display:flex;flex-wrap:nowrap;white-space:nowrap;width:100%;overflow-x:scroll;scrollbar-width:none;gap:16px}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{right:0;z-index:1}:host .scroll-left-button{left:0;z-index:1}:host .scroll-right-button,:host .scroll-left-button{color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-inline-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus::before,:host .scroll-left-button:focus::before{content:"";position:absolute;left:3px;right:3px;top:3px;bottom:3px;outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}';export{h as tds_navigation_tabs}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as s,c as t,h as e,a as i}from"./p-BBBKPH5r.js";import{g as d}from"./p-Cn4f8w1e.js";const r=class{constructor(e){s(this,e),this.tdsChange=t(this,"tdsChange",6),this.tdsInput=t(this,"tdsInput",6),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.tdsAriaLabel="",this.sliderId=d(),this.tdsReadOnlyAriaLabel="",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.initialValue="0",this.resetEventListenerAdded=!1,this.formElement=null,this.ariaLiveElement=null,this.resetToInitialValue=()=>{this.forceValueUpdate(this.initialValue),this.reset()}}roundToStep(s){const t=parseFloat(this.step);if(!t)return parseFloat(s.toFixed());const e=Math.round(s/t)*t,i=(t.toString().split(".")[1]||"").length;return parseFloat(e.toFixed(i))}async reset(){this.componentWillLoad(),this.componentDidLoad()}handleKeydown(s){switch(s.key){case"ArrowLeft":case"ArrowDown":case"-":this.stepLeft(s),this.announceValueChange();break;case"ArrowRight":case"ArrowUp":case"+":this.stepRight(s),this.announceValueChange();break;case"Home":this.setToMinValue(),this.announceValueChange();break;case"End":this.setToMaxValue(),this.announceValueChange()}}handleRelease(s){var t,e,i;this.thumbGrabbed?(this.thumbGrabbed=!1,null===(e=this.thumbInnerElement)||void 0===e||e.classList.remove("pressed"),this.thumbElement&&this.thumbElement.setAttribute("aria-grabbed","false"),this.updateValue(s),null===(i=this.trackElement)||void 0===i||i.focus()):(s.target===this.trackElement||s.target===this.trackFillElement)&&(this.thumbCore(s),null===(t=this.trackElement)||void 0===t||t.focus())}handleMove(s){this.thumbGrabbed&&this.thumbCore(s)}handleValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.updateTrack()}setToMinValue(){this.readOnly||this.disabled||this.forceValueUpdate(this.min)}setToMaxValue(){this.readOnly||this.disabled||this.forceValueUpdate(this.max)}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){var t;const e=parseInt(this.ticks),i=null===(t=this.trackElement)||void 0===t?void 0:t.getBoundingClientRect();if(!i)return;let d=0;"mousemove"===s.type||"mouseup"===s.type?d=s.clientX-i.left:"touchmove"===s.type?d=s.touches[0].clientX-i.left:console.warn("Slider component: Unsupported event!"),this.supposedValueSlot=-1,this.useSnapping&&e>0&&(d=this.updateSupposedValueSlot(d)),this.thumbLeft=this.constrainThumb(d),this.thumbElement&&(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+"%")}announceValueChange(){this.ariaLiveElement&&(clearTimeout(this.announcementDebounceTimeout),this.announcementDebounceTimeout=setTimeout((()=>{this.ariaLiveElement&&(this.ariaLiveElement.textContent=`${this.label?this.label+" ":""}${this.value} of ${this.max}`)}),50))}updateValue(s){const t=this.getTrackWidth(),e=parseFloat(this.min),i=parseFloat(this.max);if(this.useSnapping&&this.supposedValueSlot>=0){const s=this.tickValues[this.supposedValueSlot];this.value=s.toString(),this.calculateThumbLeftFromValue(s)}else this.value=this.roundToStep(e+this.thumbLeft/t*(i-e)).toString();this.updateTrack(),this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`)),this.tdsInput.emit({value:this.value}),"touchend"!==s.type&&"mouseup"!==s.type||(this.tdsChange.emit({value:this.value}),this.announceValueChange())}forceValueUpdate(s){this.calculateThumbLeftFromValue(s),this.value=s,this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`)),this.tdsChange.emit({value:this.value}),this.updateTrack(),this.announceValueChange()}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`,this.thumbElement.setAttribute("aria-valuenow",this.value))}updateSliderValueOnInputChange(s){let t=parseFloat(s.target.value);if(t===parseFloat(this.value))return;const e=parseFloat(this.min),i=parseFloat(this.max);t<e?t=e:t>i&&(t=i);const d=this.roundToStep(t);this.forceValueUpdate(d.toString())}updateSliderValueFromTextField(s){const t=s.target;let e=parseFloat(t&&void 0!==t.value?t.value:"");if(Number.isNaN(e))return;const i=parseFloat(this.min),d=parseFloat(this.max);e<i?e=i:e>d&&(e=d);const r=this.roundToStep(e);this.forceValueUpdate(r.toString())}handleInputFieldEnterPress(s){s.stopPropagation(),"Enter"===s.key&&(this.updateSliderValueOnInputChange(s),s.target.blur())}grabThumb(){var s;this.readOnly||(this.thumbGrabbed=!0,null===(s=this.thumbInnerElement)||void 0===s||s.classList.add("pressed"),this.thumbElement&&this.thumbElement.setAttribute("aria-grabbed","true"))}calculateInputSizeFromMax(){const s=this.host.querySelector('tds-text-field input[type="number"]');s&&(this.readOnly?s.style.width=52+8*this.max.length+"px":s.setAttribute("size",`${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=this.roundToStep(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(-parseFloat(this.step),s)}stepRight(s){this.controlsStep(parseFloat(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),e=(parseFloat(this.step).toString().split(".")[1]||"").length;for(let i=1;i<=s;i++){const s=parseFloat(this.min)+t*i;this.tickValues.push(parseFloat(s.toFixed(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(){if(this.calculateInputSizeFromMax(),!this.resizeObserverAdded){this.resizeObserverAdded=!0;const s=new ResizeObserver((()=>{this.calculateThumbLeftFromValue(this.value),this.updateTrack()}));this.wrapperElement&&s.observe(this.wrapperElement)}this.calculateThumbLeftFromValue(this.value),this.updateTrack(),this.initialValue||(this.initialValue=this.value),this.thumbElement&&(this.thumbElement.setAttribute("aria-valuenow",this.value),this.thumbElement.setAttribute("aria-valuetext",`${this.value} of ${this.max}`),this.thumbElement.tabIndex=this.disabled?-1:0)}componentDidRender(){this.resetEventListenerAdded||(this.formElement=this.host.closest("form"),this.formElement&&(this.formElement.addEventListener("reset",this.resetToInitialValue),this.resetEventListenerAdded=!0))}connectedCallback(){this.readOnly&&!this.tdsReadOnlyAriaLabel&&console.warn("tds-slider: tdsAriaLabel is reccomended when readonly is true"),this.resetEventListenerAdded&&this.formElement&&(this.formElement.removeEventListener("reset",this.resetToInitialValue),this.resetEventListenerAdded=!1)}render(){const s=this.readOnly?this.tdsReadOnlyAriaLabel:this.label||this.tdsAriaLabel;return e("div",{key:"08e6bfb4def6bf2b22dbe4ce7ed3436d9913e33f",class:{"tds-slider-wrapper":!0,"read-only":this.readOnly}},e("input",{key:"6ea6aac7821176b7966c8f6d2a4f06d859a63a86",class:"tds-slider-native-element",type:"range",name:this.name,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.disabled}),e("div",{key:"892a1b2995fde81fd681e76d7b847f91ead8dc1e",class:"sr-only","aria-live":"assertive",ref:s=>{this.ariaLiveElement=s}}),e("div",{key:"de7c784bf52ea58c213b9bceefb9593db5425e72",class:{"tds-slider":!0,disabled:this.disabled,"tds-slider-small":this.useSmall},ref:s=>{this.wrapperElement=s},"aria-disabled":this.disabled?"true":"false"},e("label",{key:"dda630677cd509e689f0cc255454dc51d1a73a17",id:`${this.sliderId}-label`,class:{offset:this.showTickNumbers}},this.label),this.useInput&&e("div",{key:"f670491d5b74853d371d562549789b6e8d079e70",class:"tds-slider__input-values"},e("div",{key:"c2cef724188fdfff03dfe0557bbcbd483b538048",class:"tds-slider__input-value min-value"},this.min)),this.useControls&&e("div",{key:"8e207379b1765a624b0a00eed3f3a06320681984",class:"tds-slider__controls"},e("div",{key:"3c0265017ce4d02fa04e1ea68faea385021b04a9",class:"tds-slider__control tds-slider__control-minus",onClick:s=>this.stepLeft(s),role:"button","aria-label":"Decrease value",tabindex:this.disabled||this.readOnly?"-1":"0"},e("tds-icon",{key:"0d71e872703183a3f17c6955fa1cd6b075de7fa7",name:"minus",size:"16px"}))),e("div",{key:"149eef7a4d7d6d1b5ccdd9c7678fe4ca39f0942b",class:"tds-slider-inner",tabIndex:-1},this.tickValues.length>0&&e("div",{key:"daa8184160f0f236b9860219454b9832526ea62a",class:"tds-slider__value-dividers-wrapper"},e("div",{key:"9432d6894bcd6271803d7ac195d51d2c90acb791",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:"65deabc78a80f57bc082b4ec8b61147ad4998db4",class:"tds-slider__track",ref:s=>{this.trackElement=s},tabindex:this.disabled?"-1":"0",role:"presentation",onFocus:()=>{this.thumbElement&&this.thumbElement.focus()}},e("div",{key:"807cbdbbccce4f451efb6d4660b9d616a8cf49ad",class:"tds-slider__track-fill",ref:s=>{this.trackFillElement=s}}),e("div",{key:"cd2cd9e1023ce693ef9ab2667d5ed00580af5602",class:"tds-slider__thumb",ref:s=>{this.thumbElement=s},onMouseDown:()=>this.grabThumb(),onTouchStart:()=>this.grabThumb(),role:"slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value,"aria-valuetext":`${this.value} of ${this.max}`,"aria-labelledby":`${this.sliderId}-label`,"aria-grabbed":this.thumbGrabbed?"true":"false","aria-label":s,tabindex:this.disabled?"-1":"0"},this.tooltip&&e("div",{key:"ffc68e97df1f5a99b8e4d8460aab750cbf5ed979",class:"tds-slider__value"},this.value,e("svg",{key:"b94636f08f68b9c4144626ff11e694e88669b6ae",width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e("path",{key:"431049ec3397135648be24d750a65ccd0984bd08",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:"99df797453a63f9526210e14fa9ddcccaa9d8cca",class:"tds-slider__thumb-inner",ref:s=>{this.thumbInnerElement=s}})))),this.useInput&&e("div",{key:"3f87e0793d362fd3032ccef61936bbce361cf008",class:"tds-slider__input-values"},e("div",{key:"327df1604d05618f7e8dc47c0b3a8c53799450c8",class:"tds-slider__input-value",onClick:s=>this.stepLeft(s)},this.max),e("div",{key:"226a8fc1259d703e99109960d9fb0103de5d4c4e",class:"tds-slider__input-field-wrapper"},e("tds-text-field",{key:"6c7081be57be3ebd921c3f3d40211dd74d4b55c3",noMinWidth:!0,size:"sm",type:"number",value:this.value,min:this.min,max:this.max,readOnly:this.readOnly,disabled:this.disabled,onTdsChange:s=>console.log(s),tdsAriaLabel:this.readOnly?this.tdsReadOnlyAriaLabel:void 0,onTdsBlur:s=>this.updateSliderValueFromTextField(s),onKeyDown:s=>this.handleInputFieldEnterPress(s)}))),this.useControls&&e("div",{key:"1d5ef13aa096f94c780c1021718006cc53ad517a",class:"tds-slider__controls"},e("div",{key:"08defa340f1611adc3b89b23ca9479425c125546",class:"tds-slider__control tds-slider__control-plus",onClick:s=>this.stepRight(s),role:"button","aria-label":"Increase value",tabindex:this.disabled||this.readOnly?"-1":"0"},e("tds-icon",{key:"32bfd49ebfb10fc7d4ecaa1030331e78d60ea003",name:"plus",size:"16px"})))))}get host(){return i(this)}static get watchers(){return{value:[{handleValueUpdate:0}]}}};r.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 .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.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-inner:focus-within .tds-slider__thumb-inner{outline:var(--tds-slider-thumb-focus-outline);box-shadow:var(--tds-slider-thumb-focus-box-shadow);outline-offset:var(--tds-slider-thumb-focus-outline-offset);z-index:1}.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-slider-input-value-color);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 tds-text-field .text-field-input[type=number]{width:auto;padding:12px;text-align:center;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input[type=number]::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-input:read-only{text-align:left}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper tds-text-field .text-field-icon__readonly{right:12px}.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 11px;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:hover .tds-slider__value{display:block}.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;background-color:var(--tds-slider-thumb-hover)}.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;background-color:var(--tds-slider-thumb-pressed)}.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::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px;cursor:pointer;z-index:0}.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 .tds-slider__track .tds-slider__thumb{z-index:1}.tds-slider.disabled{cursor:not-allowed}.tds-slider.disabled>*{pointer-events:none}.tds-slider.disabled label{color:var(--tds-slider-label-disabled)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__input-values .tds-slider__input-value{color:var(--tds-slider-input-value-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-inputfield-number-disabled);box-shadow:none;pointer-events:none;background:var(--tds-slider-inputfield-background-disabled)}.tds-slider.disabled .tds-slider__value{display:none}.tds-slider.disabled .tds-slider__track{cursor:not-allowed;background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__track .tds-slider__track-fill{background-color:var(--tds-slider-track-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider{background-color:var(--tds-slider-divider-disabled)}.tds-slider.disabled .tds-slider__value-dividers .tds-slider__value-divider span{color:var(--tds-slider-divider-values-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-thumb-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:pointer}.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-controls-disabled)}';export{r as tds_slider}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as s,h as i,H as o,a as e}from"./p-BBBKPH5r.js";const h=class{constructor(i){t(this,i),this.tdsChange=s(this,"tdsChange",7),this.modeVariant=null,this.defaultSelectedIndex=0,this.tdsScrollLeftAriaLabel="Scroll left",this.tdsScrollRightAriaLabel="Scroll right",this.buttonWidth=0,this.showLeftScroll=!1,this.showRightScroll=!1,this.navWrapperElement=null,this.componentWidth=0,this.buttonsWidth=0,this.scrollableWidth=0,this.tabElements=[],this.clickHandlers=new WeakMap,this.addResizeObserver=()=>{const t=new ResizeObserver((t=>{t.forEach((t=>{const s=t.contentRect.width;let i=0;Array.from(this.host.children).forEach((t=>{const s=window.getComputedStyle(t);i+=t.clientWidth+parseFloat(s.marginLeft)+parseFloat(s.marginRight)})),this.componentWidth=s,this.buttonsWidth=i,this.scrollableWidth=i-s,this.updateScrollButtons()}))}));this.navWrapperElement&&t.observe(this.navWrapperElement)},this.addEventListenerToTabs=()=>{this.tabElements=Array.from(this.host.children),this.tabElements.map(((t,s)=>{const i=()=>{t.disabled||this.tdsChange.emit({selectedTabIndex:this.tabElements.indexOf(t)}).defaultPrevented||(this.tabElements.forEach((t=>t.setSelected(!1))),t.setSelected(!0),this.selectedIndex=s)};return t.addEventListener("click",i),this.clickHandlers.set(t,i),t}))},this.removeEventListenerFromTabs=()=>{this.tabElements.forEach((t=>{const s=this.clickHandlers.get(t);s&&(t.removeEventListener("click",s),this.clickHandlers.delete(t))}))}}async selectTab(t){if(t<0||t>=this.tabElements.length)throw new Error("Tab index out of bounds");return this.tabElements[t].disabled||(this.tabElements.forEach((t=>t.setSelected(!1))),this.tabElements=this.tabElements.map(((s,i)=>(i===t&&(s.setSelected(!0),this.selectedIndex=t),s)))),{selectedTabIndex:this.selectedIndex}}async reinitialize(){this.handleSlotChange()}handleSelectedIndexUpdate(){const t=Array.from(this.host.children);this.tabElements=t.map((t=>(t.setSelected(!1),t))),void 0!==this.selectedIndex&&this.tabElements[this.selectedIndex].setSelected(!0)}scrollRight(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft+this.buttonsWidth,this.evaluateScrollButtons())}scrollLeft(){this.navWrapperElement&&(this.navWrapperElement.scrollLeft=this.navWrapperElement.scrollLeft-this.buttonsWidth,this.evaluateScrollButtons())}evaluateScrollButtons(){if(!this.navWrapperElement)return;const t=this.navWrapperElement.scrollLeft;this.showRightScroll=t<=this.scrollableWidth,this.showLeftScroll=t>0}initializeTabs(){this.tabElements=Array.from(this.host.children),this.tabElements.forEach((t=>{t.classList.remove("last"),t.classList.remove("first")})),this.tabElements[0].classList.add("first"),this.tabElements[this.tabElements.length-1].classList.add("last")}initializeSelectedTab(){void 0===this.selectedIndex?(this.addEventListenerToTabs(),this.tabElements[this.defaultSelectedIndex].setSelected(!0),this.selectedIndex=this.defaultSelectedIndex):this.tabElements[this.selectedIndex].setSelected(!0),this.tdsChange.emit({selectedTabIndex:this.selectedIndex})}updateScrollButtons(){this.buttonsWidth>this.componentWidth?this.evaluateScrollButtons():(this.showLeftScroll=!1,this.showRightScroll=!1)}handleSlotChange(){this.initializeTabs(),this.addEventListenerToTabs(),this.initializeSelectedTab(),this.updateScrollButtons(),this.addResizeObserver()}connectedCallback(){this.initializeTabs()}componentDidLoad(){this.initializeSelectedTab()}componentDidRender(){this.updateScrollButtons(),this.addResizeObserver()}disconnectedCallback(){this.removeEventListenerFromTabs()}render(){return i(o,{key:"4611a43b147d15586b6887a14ac06aae58d6a461",role:"tablist",class:this.modeVariant?`tds-mode-variant-${this.modeVariant}`:""},i("div",{key:"6009b8deff026d7add5478c0c4b47daac8b2a648",class:"wrapper",ref:t=>{this.navWrapperElement=t}},i("button",{key:"fb519fc937d88e17745a597f2121c1bd1d23c528","aria-label":this.tdsScrollLeftAriaLabel,class:"scroll-left-button "+(this.showLeftScroll?"show":""),disabled:!this.showLeftScroll,onClick:()=>this.scrollLeft()},i("tds-icon",{key:"bc8e0a391e168e447eaf4bba558977b99d6a72ae",name:"chevron_left",size:"20px"})),i("slot",{key:"6af22352dca70f5c37f742f5bf6dcad15d01a67e",onSlotchange:()=>this.handleSlotChange()}),i("button",{key:"4ef7a81a8802010d561d5e825d8f985dd4590f23","aria-label":this.tdsScrollRightAriaLabel,class:"scroll-right-button "+(this.showRightScroll?"show":""),disabled:!this.showRightScroll,onClick:()=>this.scrollRight()},i("tds-icon",{key:"7e40d7f370102608adcb9de0f356a1d1f66f59ba",name:"chevron_right",size:"20px"}))))}get host(){return e(this)}static get watchers(){return{selectedIndex:[{handleSelectedIndexUpdate:0}]}}};h.style=':host{box-sizing:border-box;overflow:hidden;outline:0}:host *{box-sizing:border-box}:host .wrapper{display:flex;overflow-x:scroll;scrollbar-width:none;position:relative}:host .wrapper::-webkit-scrollbar{display:none}:host .scroll-right-button{z-index:1;right:0}:host .scroll-left-button{z-index:1;left:0}:host .scroll-right-button,:host .scroll-left-button{height:50px;color:var(--tds-folder-tabs-scroll-btn-color);cursor:pointer;border:0;width:0;background-color:var(--tds-folder-tabs-scroll-btn-background);display:none;justify-content:center;align-items:center;opacity:0;pointer-events:none;position:sticky}:host .scroll-right-button.show,:host .scroll-left-button.show{min-width:48px;display:block;opacity:1;pointer-events:all}:host .scroll-right-button:hover,:host .scroll-left-button:hover{background-color:var(--tds-folder-tabs-scroll-btn-background-hover)}:host .scroll-right-button:active,:host .scroll-left-button:active{background-color:var(--tds-folder-tabs-scroll-btn-background-active)}:host .scroll-right-button:focus-within::before,:host .scroll-left-button:focus-within::before{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1;content:"";position:absolute;top:3px;bottom:3px;left:3px;right:3px}:host .scroll-right-button:focus,:host .scroll-left-button:focus{outline:0}:host .scroll-right-button svg,:host .scroll-left-button svg{fill:var(--tds-folder-tabs-scroll-btn-color)}';export{h as tds_folder_tabs}
|