@scania/tegel 1.38.0-handleValueChange-correct-logic-beta.0 → 1.38.0-support-paste-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/handlePasteEvent-901439bf.js +33 -0
- package/dist/cjs/index-ca8040ad.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tds-core-header-item_2.cjs.entry.js +1 -1
- package/dist/cjs/tds-dropdown_2.cjs.entry.js +21 -49
- package/dist/cjs/tds-side-menu-collapse-button.cjs.entry.js +6 -4
- package/dist/cjs/tds-side-menu-dropdown-list-item.cjs.entry.js +1 -1
- package/dist/cjs/tds-side-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/tds-slider.cjs.entry.js +10 -39
- package/dist/cjs/tds-text-field.cjs.entry.js +31 -6
- package/dist/cjs/tds-textarea.cjs.entry.js +18 -3
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +3 -13
- package/dist/collection/components/dropdown/dropdown.js +18 -48
- package/dist/collection/components/header/header-item/header-item.css +3 -3
- package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js +6 -4
- package/dist/collection/components/side-menu/side-menu-dropdown-list-item/side-menu-dropdown-list-item.css +6 -84
- package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css +6 -82
- package/dist/collection/components/slider/slider.css +28 -24
- package/dist/collection/components/slider/slider.js +9 -38
- package/dist/collection/components/text-field/text-field.js +31 -6
- package/dist/collection/components/textarea/textarea.js +18 -3
- package/dist/collection/utils/handlePasteEvent.js +29 -0
- package/dist/components/p-0cf97292.js +31 -0
- package/dist/components/{p-072bf53a.js → p-63437b77.js} +1 -1
- package/dist/components/{p-ad6babcd.js → p-6adb1ce3.js} +1 -1
- package/dist/components/{p-9a47d831.js → p-94bfc9f4.js} +19 -37
- package/dist/components/{p-c4318e35.js → p-d64878cb.js} +3 -13
- package/dist/components/{p-92c2da85.js → p-ea381f94.js} +1 -1
- package/dist/components/tds-dropdown-option.js +1 -1
- package/dist/components/tds-dropdown.js +1 -1
- package/dist/components/tds-header-brand-symbol.js +1 -1
- package/dist/components/tds-header-dropdown.js +1 -1
- package/dist/components/tds-header-hamburger.js +1 -1
- package/dist/components/tds-header-item.js +1 -1
- package/dist/components/tds-header-launcher-button.js +1 -1
- package/dist/components/tds-header-launcher.js +2 -2
- package/dist/components/tds-side-menu-collapse-button.js +7 -5
- package/dist/components/tds-side-menu-dropdown-list-item.js +1 -1
- package/dist/components/tds-side-menu-dropdown.js +1 -1
- package/dist/components/tds-side-menu-item.js +1 -1
- package/dist/components/tds-slider.js +12 -59
- package/dist/components/tds-table-footer.js +2 -2
- package/dist/components/tds-text-field.js +210 -1
- package/dist/components/tds-textarea.js +18 -3
- package/dist/esm/handlePasteEvent-eefa3884.js +31 -0
- package/dist/esm/index-51d04e39.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tds-core-header-item_2.entry.js +1 -1
- package/dist/esm/tds-dropdown_2.entry.js +21 -49
- package/dist/esm/tds-side-menu-collapse-button.entry.js +6 -4
- package/dist/esm/tds-side-menu-dropdown-list-item.entry.js +1 -1
- package/dist/esm/tds-side-menu-item.entry.js +1 -1
- package/dist/esm/tds-slider.entry.js +10 -39
- package/dist/esm/tds-text-field.entry.js +31 -6
- package/dist/esm/tds-textarea.entry.js +19 -4
- package/dist/esm/tegel.js +1 -1
- package/dist/tegel/p-06d3490c.entry.js +1 -0
- package/dist/tegel/p-0cf97292.js +1 -0
- package/dist/tegel/p-397c8969.entry.js +1 -0
- package/dist/tegel/p-5c077bb9.entry.js +1 -0
- package/dist/tegel/p-61a1dc59.entry.js +1 -0
- package/dist/tegel/p-a0591e58.entry.js +1 -0
- package/dist/tegel/p-a4f83463.entry.js +1 -0
- package/dist/tegel/p-a7a4fb4b.entry.js +1 -0
- package/dist/tegel/p-ae438c2e.entry.js +1 -0
- package/dist/tegel/tegel.css +1 -1
- package/dist/tegel/tegel.esm.js +1 -1
- package/dist/types/components/dropdown/dropdown.d.ts +0 -3
- package/dist/types/components/slider/slider.d.ts +0 -2
- package/dist/types/components/text-field/text-field.d.ts +1 -0
- package/dist/types/components/textarea/textarea.d.ts +2 -0
- package/dist/types/utils/handlePasteEvent.d.ts +9 -0
- package/package.json +1 -1
- package/dist/components/p-a0c21704.js +0 -187
- package/dist/tegel/p-2c9ea0be.entry.js +0 -1
- package/dist/tegel/p-2f9b15f6.entry.js +0 -1
- package/dist/tegel/p-336f2de3.entry.js +0 -1
- package/dist/tegel/p-7368906f.entry.js +0 -1
- package/dist/tegel/p-a98767ea.entry.js +0 -1
- package/dist/tegel/p-c465f9b8.entry.js +0 -1
- package/dist/tegel/p-c4f701f6.entry.js +0 -1
- package/dist/tegel/p-cd5103e3.entry.js +0 -1
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
|
|
2
2
|
import { g as generateUniqueId } from './p-11648030.js';
|
|
3
|
-
import { d as defineCustomElement$
|
|
4
|
-
import { d as defineCustomElement$4 } from './p-d3866be7.js';
|
|
5
|
-
import { d as defineCustomElement$3 } from './p-a0c21704.js';
|
|
6
|
-
import { d as defineCustomElement$2 } from './p-40253725.js';
|
|
3
|
+
import { d as defineCustomElement$2 } from './p-b390ece5.js';
|
|
7
4
|
|
|
8
|
-
const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}tds-slider .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-
|
|
5
|
+
const sliderCss = "tds-slider{box-sizing:border-box;width:100%}tds-slider *{box-sizing:border-box}tds-slider input[type=range].tds-slider-native-element{display:none}tds-slider .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-wrapper:focus-within{outline:2px solid var(--tds-blue-400);outline-offset:2px;border-radius:var(--tds-spacing-element-4)}.tds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.tds-slider .tds-slider-inner{width:100%;height:20px;position:relative}.tds-slider .tds-slider__controls{position:relative;top:-25px}.tds-slider .tds-slider__controls .tds-slider__control{cursor:pointer}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus{padding:18px 18px 18px 0}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus{padding:18px 0 18px 18px}.tds-slider .tds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.tds-slider .tds-slider__input-values .tds-slider__input-value{user-select:none;padding:18px;color:var(--tds-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 input.tds-slider__input-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-slider-inputfield-number-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--tds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0;appearance:textfield}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--tds-grey-600)}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--tds-blue-400);outline:0}.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-outer-spin-button,.tds-slider .tds-slider__input-values .tds-slider__input-field-wrapper input.tds-slider__input-field::-webkit-inner-spin-button{appearance:none;margin:0}.tds-slider label{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);user-select:none;position:absolute;color:var(--tds-slider-label-color);padding-bottom:16px;transform:translateY(-100%)}.tds-slider label.offset{padding-bottom:34px}.tds-slider .tds-slider__value{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--tds-slider-value-tooltip-background);color:var(--tds-slider-value-tooltip-color)}.tds-slider .tds-slider__value svg{color:var(--tds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.tds-slider .tds-slider__thumb{position:absolute}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner{width:20px;height:20px;border-radius:100%;background-color:var(--tds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner::before{content:\" \";display:none;width:48px;height:48px;background-color:var(--tds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner:hover::before{display:block;opacity:0.08}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed{width:24px;height:24px}.tds-slider .tds-slider__thumb .tds-slider__thumb-inner.pressed::before{display:block;opacity:0.16 !important}.tds-slider .tds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.tds-slider .tds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--tds-slider-divider-color);color:var(--tds-slider-divider-values-color);width:1px}.tds-slider .tds-slider__value-dividers .tds-slider__value-divider span{display:block;user-select:none;color:var(-tds-grey-700);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.tds-slider .tds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--tds-slider-track-color);position:relative;cursor:pointer}.tds-slider .tds-slider__track::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:default}.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-color)}.tds-slider.disabled .tds-slider__controls .tds-slider__control{cursor:default}.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-minus tds-icon,.tds-slider.disabled .tds-slider__controls .tds-slider__control.tds-slider__control-plus tds-icon{color:var(--tds-slider-controls-disabled)}";
|
|
9
6
|
const TdsSliderStyle0 = sliderCss;
|
|
10
7
|
|
|
11
8
|
const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
|
|
@@ -277,25 +274,6 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
|
|
|
277
274
|
const rounded = this.roundToStep(newValue);
|
|
278
275
|
this.forceValueUpdate(rounded.toString());
|
|
279
276
|
}
|
|
280
|
-
/** Updates the slider value when using tds-text-field (reads value from host element) */
|
|
281
|
-
updateSliderValueFromTextField(event) {
|
|
282
|
-
const hostEl = event.target; // tds-text-field host element exposes a value prop
|
|
283
|
-
const raw = hostEl && typeof hostEl.value !== 'undefined' ? hostEl.value : '';
|
|
284
|
-
let newValue = parseFloat(raw);
|
|
285
|
-
if (Number.isNaN(newValue)) {
|
|
286
|
-
return;
|
|
287
|
-
}
|
|
288
|
-
const minNum = parseFloat(this.min);
|
|
289
|
-
const maxNum = parseFloat(this.max);
|
|
290
|
-
if (newValue < minNum) {
|
|
291
|
-
newValue = minNum;
|
|
292
|
-
}
|
|
293
|
-
else if (newValue > maxNum) {
|
|
294
|
-
newValue = maxNum;
|
|
295
|
-
}
|
|
296
|
-
const rounded = this.roundToStep(newValue);
|
|
297
|
-
this.forceValueUpdate(rounded.toString());
|
|
298
|
-
}
|
|
299
277
|
/** Updates the slider value based on the current input value when enter is pressed */
|
|
300
278
|
handleInputFieldEnterPress(event) {
|
|
301
279
|
event.stopPropagation();
|
|
@@ -316,16 +294,7 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
|
|
|
316
294
|
}
|
|
317
295
|
}
|
|
318
296
|
calculateInputSizeFromMax() {
|
|
319
|
-
|
|
320
|
-
if (input) {
|
|
321
|
-
if (this.readOnly) {
|
|
322
|
-
// explicit size to fit suffix icon
|
|
323
|
-
input.style.width = `${52 + this.max.length * 8}px`;
|
|
324
|
-
}
|
|
325
|
-
else {
|
|
326
|
-
input.setAttribute('size', `${this.max.length}`);
|
|
327
|
-
}
|
|
328
|
-
}
|
|
297
|
+
return this.max.length;
|
|
329
298
|
}
|
|
330
299
|
controlsStep(delta, event) {
|
|
331
300
|
if (this.readOnly || this.disabled) {
|
|
@@ -396,7 +365,6 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
|
|
|
396
365
|
}
|
|
397
366
|
}
|
|
398
367
|
componentDidLoad() {
|
|
399
|
-
this.calculateInputSizeFromMax();
|
|
400
368
|
if (!this.resizeObserverAdded) {
|
|
401
369
|
this.resizeObserverAdded = true;
|
|
402
370
|
const resizeObserver = new ResizeObserver(() => {
|
|
@@ -440,30 +408,30 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
|
|
|
440
408
|
}
|
|
441
409
|
render() {
|
|
442
410
|
const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
|
|
443
|
-
return (h("div", { key: '
|
|
411
|
+
return (h("div", { key: 'b4dd7706df0be052f0028a5f8ba6b6158f403b13', class: {
|
|
444
412
|
'tds-slider-wrapper': true,
|
|
445
413
|
'read-only': this.readOnly,
|
|
446
|
-
} }, h("input", { key: '
|
|
414
|
+
} }, h("input", { key: '672c2aaa6dfee6489cd5e764ef151728c2af10fc', 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: '8c7200436a9ef6524a3b2d554a2556bda8cc6afd', class: "sr-only", "aria-live": "assertive", ref: (el) => {
|
|
447
415
|
this.ariaLiveElement = el;
|
|
448
|
-
} }), h("div", { key: '
|
|
416
|
+
} }), h("div", { key: '1ce8e7ddccd19ca15733683768900c8fcde514d3', class: {
|
|
449
417
|
'tds-slider': true,
|
|
450
418
|
'disabled': this.disabled,
|
|
451
419
|
'tds-slider-small': this.useSmall,
|
|
452
420
|
}, ref: (el) => {
|
|
453
421
|
this.wrapperElement = el;
|
|
454
|
-
}, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '
|
|
422
|
+
}, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '54616f1cb5e4c13541f6f5fa700ddf4b1c4a9493', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'f6b8283409e9fb74ebf5fe89af5d88c29fde904d', class: "tds-slider__input-values" }, h("div", { key: '30532947c70dc8e0612fea3c01c25a5e86dacfca', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '6c001b8caba4a396bb9f4f4f3ba7b9ee6ca36f84', class: "tds-slider__controls" }, h("div", { key: '7a5804b789f84a4cd749c21d0ecc4b73bf7bae09', 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: '41db4dc1a8fda4972303fd48400078035648ca5c', name: "minus", size: "16px" })))), h("div", { key: 'f3cb2039ec4245b1d5c58bb819675381c4490197', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '38bf8ca015894f3a42a0e9e33800cc7f0ff9c8d5', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '6a5aaa5d652d55f23db24b1b531664d125fc2a23', 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: '0c99475a8bdb1fdec04358421ec34630111a63b8', class: "tds-slider__track", ref: (el) => {
|
|
455
423
|
this.trackElement = el;
|
|
456
424
|
}, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
|
|
457
425
|
if (this.thumbElement) {
|
|
458
426
|
this.thumbElement.focus();
|
|
459
427
|
}
|
|
460
|
-
} }, h("div", { key: '
|
|
428
|
+
} }, h("div", { key: 'd3ece50db5fbc17e4ebbf4272faa17fcf201dccf', class: "tds-slider__track-fill", ref: (el) => {
|
|
461
429
|
this.trackFillElement = el;
|
|
462
|
-
} }), h("div", { key: '
|
|
430
|
+
} }), h("div", { key: 'c304176e6a240820418d80aa8bfad35fbbdaf0f4', class: "tds-slider__thumb", ref: (el) => {
|
|
463
431
|
this.thumbElement = el;
|
|
464
|
-
}, 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: '
|
|
432
|
+
}, 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: '7c46c4f8b3cc3bf3aeae7c841a2f38e7b3d1dfbb', class: "tds-slider__value" }, this.value, h("svg", { key: '871a05a8fc1560c8e94071172c57563d63e10f22', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0c99295a2049b3aac5d0472880e63acc4318fa07', 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: 'bf42f5b512d3041a88bd8cc420a5a4aaeb875e49', class: "tds-slider__thumb-inner", ref: (el) => {
|
|
465
433
|
this.thumbInnerElement = el;
|
|
466
|
-
} })))), this.useInput && (h("div", { key: '
|
|
434
|
+
} })))), this.useInput && (h("div", { key: '9a1ed941f13b84e738500921b12aeb21ace2464c', class: "tds-slider__input-values" }, h("div", { key: '2bdf5b0fb2687075b2fc12ce931859d2f26a0685', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '480825ddccd550527ac18f046c6a8ce26baaba87', class: "tds-slider__input-field-wrapper" }, h("input", { key: '94a1446990ea0ae3955e8db9f0119e4a0ec71970', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, "aria-label": this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max, step: this.step })))), this.useControls && (h("div", { key: 'b7415e621df023ffe0eca844d9970454d01c72ce', class: "tds-slider__controls" }, h("div", { key: '044a984a7212d56f8c1bcb5709608d90677d7647', 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: '0b6410f7fb4af32681c3f49f29c9696e871bfd5a', name: "plus", size: "16px" })))))));
|
|
467
435
|
}
|
|
468
436
|
get host() { return this; }
|
|
469
437
|
static get watchers() { return {
|
|
@@ -497,7 +465,7 @@ function defineCustomElement$1() {
|
|
|
497
465
|
if (typeof customElements === "undefined") {
|
|
498
466
|
return;
|
|
499
467
|
}
|
|
500
|
-
const components = ["tds-slider", "tds-icon"
|
|
468
|
+
const components = ["tds-slider", "tds-icon"];
|
|
501
469
|
components.forEach(tagName => { switch (tagName) {
|
|
502
470
|
case "tds-slider":
|
|
503
471
|
if (!customElements.get(tagName)) {
|
|
@@ -505,21 +473,6 @@ function defineCustomElement$1() {
|
|
|
505
473
|
}
|
|
506
474
|
break;
|
|
507
475
|
case "tds-icon":
|
|
508
|
-
if (!customElements.get(tagName)) {
|
|
509
|
-
defineCustomElement$5();
|
|
510
|
-
}
|
|
511
|
-
break;
|
|
512
|
-
case "tds-popover-core":
|
|
513
|
-
if (!customElements.get(tagName)) {
|
|
514
|
-
defineCustomElement$4();
|
|
515
|
-
}
|
|
516
|
-
break;
|
|
517
|
-
case "tds-text-field":
|
|
518
|
-
if (!customElements.get(tagName)) {
|
|
519
|
-
defineCustomElement$3();
|
|
520
|
-
}
|
|
521
|
-
break;
|
|
522
|
-
case "tds-tooltip":
|
|
523
476
|
if (!customElements.get(tagName)) {
|
|
524
477
|
defineCustomElement$2();
|
|
525
478
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
|
|
2
2
|
import { d as defineCustomElement$5 } from './p-44f5b5e1.js';
|
|
3
|
-
import { d as defineCustomElement$4 } from './p-
|
|
4
|
-
import { d as defineCustomElement$3 } from './p-
|
|
3
|
+
import { d as defineCustomElement$4 } from './p-94bfc9f4.js';
|
|
4
|
+
import { d as defineCustomElement$3 } from './p-d64878cb.js';
|
|
5
5
|
import { d as defineCustomElement$2 } from './p-b390ece5.js';
|
|
6
6
|
|
|
7
7
|
const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:74px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;width:28px}:host(.footer__horizontal-scroll){display:inline-table;position:absolute;margin-top:10px}@keyframes tds-shake-animation{10%,90%{transform:translate3d(-1px, 0, 0)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}";
|
|
@@ -1,4 +1,213 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
|
|
2
|
+
import { h as hasSlot } from './p-ae110fc2.js';
|
|
3
|
+
import { g as generateUniqueId } from './p-11648030.js';
|
|
4
|
+
import { h as handlePasteEvent } from './p-0cf97292.js';
|
|
5
|
+
import { d as defineCustomElement$4 } from './p-b390ece5.js';
|
|
6
|
+
import { d as defineCustomElement$3 } from './p-d3866be7.js';
|
|
7
|
+
import { d as defineCustomElement$2 } from './p-40253725.js';
|
|
8
|
+
|
|
9
|
+
const textFieldCss = ".text-field-input-lg.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-20) var(--tds-spacing-element-16)}.text-field-input-lg.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-lg.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-lg.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-lg.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-md.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-md.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-md.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-md.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-md.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-input-sm.sc-tds-text-field{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--tds-text-field-color);background-color:var(--tds-text-field-background);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:var(--tds-spacing-element-16)}.text-field-input-sm.sc-tds-text-field::placeholder{color:var(--tds-text-field-placeholder)}.text-field-input-sm.sc-tds-text-field:disabled{user-select:none;pointer-events:none;background-color:var(--tds-text-field-background-disabled);color:var(--tds-text-field-color-disabled)}.text-field-input-sm.sc-tds-text-field:disabled::placeholder{color:var(--tds-text-field-placeholder-disabled)}.text-field-input-sm.sc-tds-text-field:disabled~.text-field-label-inside.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.text-field-container.sc-tds-text-field{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--tds-text-field-background);border-bottom:1px solid var(--tds-text-field-border-bottom);border-top:1px solid transparent;transition:border-bottom-color 200ms ease}.text-field-container.sc-tds-text-field:hover{border-bottom-color:var(--tds-text-field-border-bottom-hover)}.form-text-field-md.sc-tds-text-field .text-field-container.sc-tds-text-field{height:48px}.form-text-field-sm.sc-tds-text-field .text-field-container.sc-tds-text-field{height:40px}.text-field-container.sc-tds-text-field:focus-within{border:2px solid var(--tds-focus-outline-color);margin:0 -2px}.text-field-input-container.sc-tds-text-field{position:relative;width:100%}.text-field-data.sc-tds-text-field,.text-field-input.sc-tds-text-field{color:var(--tds-text-field-data-color)}.text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:block;margin-bottom:var(--tds-spacing-element-8);color:var(--tds-text-field-label-color)}.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);position:absolute;pointer-events:none;color:var(--tds-text-field-label-inside-color);left:16px}.form-text-field.sc-tds-text-field{display:block;min-width:208px}.form-text-field-nomin.sc-tds-text-field{min-width:auto}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field{padding-top:var(--tds-spacing-element-24);padding-bottom:15px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:20px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-lg.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-md.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field{padding-top:var(--tds-spacing-element-20);padding-bottom:11px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{top:16px}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field .sc-tds-text-field::placeholder{color:transparent}.form-text-field.text-field-container-label-inside.sc-tds-text-field .text-field-input-sm.sc-tds-text-field:focus::placeholder{transition:color 0.35s ease;color:var(--tds-text-field-placeholder)}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-sm.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-md.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:8px}.form-text-field.text-field-container-label-inside.text-field-focus.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field,.form-text-field.text-field-container-label-inside.text-field-data.sc-tds-text-field .text-field-input-lg.sc-tds-text-field~.text-field-label-inside.sc-tds-text-field{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:0.1s ease all;top:12px}.text-field-helper.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--tds-spacing-element-4);color:var(--tds-text-field-helper)}.text-field-helper.sc-tds-text-field .text-field-textcounter.sc-tds-text-field{margin-left:auto}.form-text-field-disabled.sc-tds-text-field .text-field-container.sc-tds-text-field{cursor:not-allowed;border-bottom-color:transparent}.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-prefix.sc-tds-text-field>*.sc-tds-text-field,.form-text-field-disabled.sc-tds-text-field .text-field-slot-wrap-suffix.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-ps-color-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-label-outside.sc-tds-text-field>*.sc-tds-text-field{color:var(--tds-text-field-label-disabled)}.form-text-field-disabled.sc-tds-text-field .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-disabled)}.text-field-icon__readonly.sc-tds-text-field{display:none;position:absolute;right:18px;top:50%;transform:translateY(-50%);color:var(--tds-text-field-icon-read-only-label-color)}.text-field-icon__readonly.sc-tds-text-field .tds-tooltip.sc-tds-text-field{min-width:150px}.form-text-field-readonly.sc-tds-text-field{user-select:auto;caret-color:transparent;cursor:default}.form-text-field-readonly.sc-tds-text-field .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-readonly)}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-icon__readonly.sc-tds-text-field:hover~.text-field-icon__readonly-label.sc-tds-text-field{display:block}.form-text-field-readonly.sc-tds-text-field .text-field-input.sc-tds-text-field{background-color:transparent}.form-text-field-readonly.sc-tds-text-field:has(.text-field-icon__readonly) .text-field-input.sc-tds-text-field{padding-right:54px}.form-text-field-success.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-success)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-helper.sc-tds-text-field{color:var(--tds-text-field-helper-error)}.form-text-field-error.sc-tds-text-field:not(.form-text-field-readonly) .text-field-container.sc-tds-text-field{border-bottom-color:var(--tds-text-field-border-bottom-error)}.text-field-helper-error-state.sc-tds-text-field{display:flex;gap:8px;flex-wrap:nowrap}.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.sc-tds-text-field{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-text-field-textcounter);float:right}.text-field-textcounter.text-field-textcounter-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-disabled)}.text-field-textcounter.text-field-textcounter-divider.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider)}.text-field-textcounter.text-field-textcounter-divider-disabled.sc-tds-text-field{color:var(--tds-text-field-textcounter-divider-disabled)}.text-field-slot-wrap-prefix.sc-tds-text-field,.text-field-slot-wrap-suffix.sc-tds-text-field{align-self:center;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);margin:0 0 0 14px;color:var(--tds-text-field-ps-color)}.text-field-slot-wrap-prefix.sc-tds-text-field-s>:not(tds-icon),.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 0 0 2px}.text-field-slot-wrap-prefix.text-field-error.sc-tds-text-field,.text-field-slot-wrap-suffix.text-field-error.sc-tds-text-field{color:var(--tds-text-field-ps-color-error)}.text-field-slot-wrap-suffix.sc-tds-text-field{margin:0 14px 0 0}.text-field-slot-wrap-suffix.sc-tds-text-field-s>:not(tds-icon){margin:0 2px 0 0}";
|
|
10
|
+
const TdsTextFieldStyle0 = textFieldCss;
|
|
11
|
+
|
|
12
|
+
const TdsTextField$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextField extends H {
|
|
13
|
+
constructor() {
|
|
14
|
+
super();
|
|
15
|
+
this.__registerHost();
|
|
16
|
+
this.tdsChange = createEvent(this, "tdsChange", 6);
|
|
17
|
+
this.tdsInput = createEvent(this, "tdsInput", 6);
|
|
18
|
+
this.tdsFocus = createEvent(this, "tdsFocus", 6);
|
|
19
|
+
this.tdsBlur = createEvent(this, "tdsBlur", 6);
|
|
20
|
+
this.uuid = generateUniqueId();
|
|
21
|
+
this.type = 'text';
|
|
22
|
+
this.labelPosition = 'no-label';
|
|
23
|
+
this.label = '';
|
|
24
|
+
this.min = undefined;
|
|
25
|
+
this.max = undefined;
|
|
26
|
+
this.helper = undefined;
|
|
27
|
+
this.placeholder = '';
|
|
28
|
+
this.value = '';
|
|
29
|
+
this.disabled = false;
|
|
30
|
+
this.readOnly = false;
|
|
31
|
+
this.hideReadOnlyIcon = false;
|
|
32
|
+
this.size = 'lg';
|
|
33
|
+
this.modeVariant = null;
|
|
34
|
+
this.noMinWidth = false;
|
|
35
|
+
this.name = '';
|
|
36
|
+
this.state = 'default';
|
|
37
|
+
this.maxLength = undefined;
|
|
38
|
+
this.autofocus = false;
|
|
39
|
+
this.tdsAriaLabel = undefined;
|
|
40
|
+
this.focusInput = false;
|
|
41
|
+
}
|
|
42
|
+
handleChange(event) {
|
|
43
|
+
this.tdsChange.emit(event);
|
|
44
|
+
}
|
|
45
|
+
// Data input event in value prop
|
|
46
|
+
handleInput(event) {
|
|
47
|
+
const inputEl = event.target;
|
|
48
|
+
let { value } = inputEl;
|
|
49
|
+
// Custom handling of number inputs when min/max are set
|
|
50
|
+
if (this.type === 'number') {
|
|
51
|
+
const numericValue = Number(value);
|
|
52
|
+
if (this.min !== undefined && numericValue < Number(this.min)) {
|
|
53
|
+
value = String(this.min);
|
|
54
|
+
}
|
|
55
|
+
if (this.max !== undefined && numericValue > Number(this.max)) {
|
|
56
|
+
value = String(this.max);
|
|
57
|
+
}
|
|
58
|
+
inputEl.value = value;
|
|
59
|
+
}
|
|
60
|
+
this.value = value;
|
|
61
|
+
this.tdsInput.emit(event);
|
|
62
|
+
}
|
|
63
|
+
// Handle paste events to ensure input events are triggered
|
|
64
|
+
handlePaste(event) {
|
|
65
|
+
const inputEl = event.target;
|
|
66
|
+
// Create a value processor for number inputs with min/max validation
|
|
67
|
+
const valueProcessor = (value) => {
|
|
68
|
+
if (this.type === 'number') {
|
|
69
|
+
const numericValue = Number(value);
|
|
70
|
+
if (this.min !== undefined && numericValue < Number(this.min)) {
|
|
71
|
+
return String(this.min);
|
|
72
|
+
}
|
|
73
|
+
if (this.max !== undefined && numericValue > Number(this.max)) {
|
|
74
|
+
return String(this.max);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
return value;
|
|
78
|
+
};
|
|
79
|
+
// Create a callback to handle the synthetic input event
|
|
80
|
+
const onInputCallback = (syntheticEvent) => {
|
|
81
|
+
this.value = inputEl.value;
|
|
82
|
+
this.tdsInput.emit(syntheticEvent);
|
|
83
|
+
};
|
|
84
|
+
// Use the utility function
|
|
85
|
+
handlePasteEvent(inputEl, onInputCallback, valueProcessor);
|
|
86
|
+
}
|
|
87
|
+
/** Set the input as focus when clicking the whole Text Field with suffix/prefix */
|
|
88
|
+
handleFocus(event) {
|
|
89
|
+
this.textInput.focus();
|
|
90
|
+
this.focusInput = true;
|
|
91
|
+
this.tdsFocus.emit(event);
|
|
92
|
+
}
|
|
93
|
+
/** Set the input as focus when clicking the whole Text Field with suffix/prefix */
|
|
94
|
+
handleBlur(event) {
|
|
95
|
+
this.focusInput = false;
|
|
96
|
+
this.tdsBlur.emit(event);
|
|
97
|
+
}
|
|
98
|
+
/** Method to handle focus */
|
|
99
|
+
async focusElement() {
|
|
100
|
+
if (this.textInput) {
|
|
101
|
+
this.textInput.focus();
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
render() {
|
|
105
|
+
var _a;
|
|
106
|
+
const usesPrefixSlot = hasSlot('prefix', this.host);
|
|
107
|
+
const usesSuffixSlot = hasSlot('suffix', this.host);
|
|
108
|
+
return (h("div", { key: 'b37e6dd9aa339eeee50726de43b819c9a0dafad3', class: {
|
|
109
|
+
'form-text-field': true,
|
|
110
|
+
'form-text-field-nomin': this.noMinWidth,
|
|
111
|
+
'text-field-focus': this.focusInput && !this.disabled,
|
|
112
|
+
'text-field-data': this.value !== '' && this.value !== null,
|
|
113
|
+
'text-field-container-label-inside': this.labelPosition === 'inside' && this.size !== 'sm',
|
|
114
|
+
'form-text-field-disabled': this.disabled,
|
|
115
|
+
'form-text-field-readonly': this.disabled ? false : this.readOnly,
|
|
116
|
+
'tds-mode-variant-primary': this.readOnly
|
|
117
|
+
? this.modeVariant === 'secondary'
|
|
118
|
+
: this.modeVariant === 'primary',
|
|
119
|
+
'tds-mode-variant-secondary': this.readOnly
|
|
120
|
+
? this.modeVariant === 'primary'
|
|
121
|
+
: this.modeVariant === 'secondary',
|
|
122
|
+
'form-text-field-md': this.size === 'md',
|
|
123
|
+
'form-text-field-sm': this.size === 'sm',
|
|
124
|
+
'form-text-field-error': this.state === 'error',
|
|
125
|
+
'form-text-field-success': this.state === 'success',
|
|
126
|
+
} }, this.labelPosition === 'outside' && (h("div", { key: '7ac5bf6dec464b5216e77a1fefe765b5ebfabfbd', class: "text-field-label-outside" }, h("label", { key: '6b4e66e93f67a3e299e6777006c468bc17c7bef1', htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), h("div", { key: '2e14fcb37fecca77461e15cece8ae0086aa26ad4', onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { key: 'f6a4d22482c7a036e25386ed2173c9d8689664f7', class: {
|
|
127
|
+
'text-field-slot-wrap-prefix': true,
|
|
128
|
+
'text-field-error': this.state === 'error',
|
|
129
|
+
'text-field-success': this.state === 'success',
|
|
130
|
+
'text-field-default': this.state === 'default',
|
|
131
|
+
} }, h("slot", { key: '2ab91f5db4dcea2ee7c24e0705593b34f6eccc51', name: "prefix" }))), h("div", { key: '7a6114e3cce7c286292b7f16301a2d11e0ef535b', class: "text-field-input-container" }, h("input", { key: '51c00d7f54c8b49051d50ff5375da082ca4482b0', ref: (inputEl) => {
|
|
132
|
+
this.textInput = inputEl;
|
|
133
|
+
}, class: {
|
|
134
|
+
'text-field-input': true,
|
|
135
|
+
'text-field-input-sm': this.size === 'sm',
|
|
136
|
+
'text-field-input-md': this.size === 'md',
|
|
137
|
+
'text-field-input-lg': this.size === 'lg',
|
|
138
|
+
}, type: this.type, disabled: this.disabled, readonly: this.disabled ? false : this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, min: this.min, max: this.max, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onPaste: (event) => this.handlePaste(event), onFocus: (event) => {
|
|
139
|
+
if (!this.readOnly) {
|
|
140
|
+
this.handleFocus(event);
|
|
141
|
+
}
|
|
142
|
+
}, onBlur: (event) => {
|
|
143
|
+
if (!this.readOnly) {
|
|
144
|
+
this.handleBlur(event);
|
|
145
|
+
}
|
|
146
|
+
}, "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `text-field-helper-element-${this.uuid}`, "aria-readonly": this.readOnly, id: `text-field-input-element-${this.uuid}` }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { key: 'bcdcbaa0abfe6d15519c5bdf4a713c672e4ae039', class: "text-field-label-inside", htmlFor: `text-field-input-element-${this.uuid}` }, this.label))), usesSuffixSlot && (h("div", { key: '186d2831637d2e5817879a1b8f578c36fba07e06', class: {
|
|
147
|
+
'text-field-slot-wrap-suffix': true,
|
|
148
|
+
'text-field-error': this.state === 'error',
|
|
149
|
+
'text-field-success': this.state === 'success',
|
|
150
|
+
'text-field-default': this.state === 'default',
|
|
151
|
+
'tds-u-display-none': this.readOnly,
|
|
152
|
+
} }, h("slot", { key: 'ddb3f21a1189e36530ab62a3166115f0c805974a', name: "suffix" }))), this.readOnly && !this.hideReadOnlyIcon && (h("span", { key: '0a03400c53cdde6795474e38b55ac4a62c738f22', class: "text-field-icon__readonly" }, h("tds-tooltip", { key: 'f06d7f697adfe89a46b9255f5b2d1fc68c5c391b', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: 'b1a9cbadc4723e339835685a977978f268c497d3', id: "readonly-tooltip", name: "edit_inactive", size: "20px" })))), h("div", { key: 'bd0fe776e4b7d0500a9c6755635eb6b81dae1b31', "aria-live": "assertive" }, (this.helper || this.maxLength > 0) && (h("div", { key: '9e6db2662ec9e2e7f4045ae95b6d5c3de2cddc0f', class: "text-field-helper", id: `text-field-helper-element-${this.uuid}` }, this.state === 'error' && (h("div", { key: '498d9d7f555466aa7c32f7f68c63e06c56470b4e', class: "text-field-helper-error-state" }, !this.readOnly && h("tds-icon", { key: '3b90488f2e7e26317789b00d6e33bbb2b329e571', name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, !this.readOnly && this.maxLength > 0 && (h("span", { key: '0f6d239f926f0287b6e6be3806f57a44a64a422b', class: {
|
|
153
|
+
'text-field-textcounter-divider': true,
|
|
154
|
+
'text-field-textcounter-disabled': this.disabled,
|
|
155
|
+
} }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, " / ", this.maxLength)))))));
|
|
156
|
+
}
|
|
157
|
+
get host() { return this; }
|
|
158
|
+
static get style() { return TdsTextFieldStyle0; }
|
|
159
|
+
}, [6, "tds-text-field", {
|
|
160
|
+
"type": [513],
|
|
161
|
+
"labelPosition": [1, "label-position"],
|
|
162
|
+
"label": [1],
|
|
163
|
+
"min": [8],
|
|
164
|
+
"max": [8],
|
|
165
|
+
"helper": [1],
|
|
166
|
+
"placeholder": [1],
|
|
167
|
+
"value": [513],
|
|
168
|
+
"disabled": [4],
|
|
169
|
+
"readOnly": [4, "read-only"],
|
|
170
|
+
"hideReadOnlyIcon": [4, "hide-read-only-icon"],
|
|
171
|
+
"size": [1],
|
|
172
|
+
"modeVariant": [1, "mode-variant"],
|
|
173
|
+
"noMinWidth": [4, "no-min-width"],
|
|
174
|
+
"name": [1],
|
|
175
|
+
"state": [1],
|
|
176
|
+
"maxLength": [2, "max-length"],
|
|
177
|
+
"autofocus": [4],
|
|
178
|
+
"tdsAriaLabel": [1, "tds-aria-label"],
|
|
179
|
+
"focusInput": [32],
|
|
180
|
+
"focusElement": [64]
|
|
181
|
+
}]);
|
|
182
|
+
function defineCustomElement$1() {
|
|
183
|
+
if (typeof customElements === "undefined") {
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
const components = ["tds-text-field", "tds-icon", "tds-popover-core", "tds-tooltip"];
|
|
187
|
+
components.forEach(tagName => { switch (tagName) {
|
|
188
|
+
case "tds-text-field":
|
|
189
|
+
if (!customElements.get(tagName)) {
|
|
190
|
+
customElements.define(tagName, TdsTextField$1);
|
|
191
|
+
}
|
|
192
|
+
break;
|
|
193
|
+
case "tds-icon":
|
|
194
|
+
if (!customElements.get(tagName)) {
|
|
195
|
+
defineCustomElement$4();
|
|
196
|
+
}
|
|
197
|
+
break;
|
|
198
|
+
case "tds-popover-core":
|
|
199
|
+
if (!customElements.get(tagName)) {
|
|
200
|
+
defineCustomElement$3();
|
|
201
|
+
}
|
|
202
|
+
break;
|
|
203
|
+
case "tds-tooltip":
|
|
204
|
+
if (!customElements.get(tagName)) {
|
|
205
|
+
defineCustomElement$2();
|
|
206
|
+
}
|
|
207
|
+
break;
|
|
208
|
+
} });
|
|
209
|
+
}
|
|
210
|
+
defineCustomElement$1();
|
|
2
211
|
|
|
3
212
|
const TdsTextField = TdsTextField$1;
|
|
4
213
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, d as createEvent, h } from './p-28ef5186.js';
|
|
2
2
|
import { g as generateUniqueId } from './p-11648030.js';
|
|
3
|
+
import { h as handlePasteEvent } from './p-0cf97292.js';
|
|
3
4
|
import { d as defineCustomElement$4 } from './p-b390ece5.js';
|
|
4
5
|
import { d as defineCustomElement$3 } from './p-d3866be7.js';
|
|
5
6
|
import { d as defineCustomElement$2 } from './p-40253725.js';
|
|
@@ -49,6 +50,19 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
|
|
|
49
50
|
this.tdsInput.emit(event);
|
|
50
51
|
}
|
|
51
52
|
}
|
|
53
|
+
// Handle paste events to ensure input events are triggered
|
|
54
|
+
handlePaste(event) {
|
|
55
|
+
if (event.target instanceof HTMLTextAreaElement) {
|
|
56
|
+
const textareaEl = event.target;
|
|
57
|
+
// Create a callback to handle the synthetic input event
|
|
58
|
+
const onInputCallback = (syntheticEvent) => {
|
|
59
|
+
this.value = textareaEl.value;
|
|
60
|
+
this.tdsInput.emit(syntheticEvent);
|
|
61
|
+
};
|
|
62
|
+
// Use the utility function (no value processor needed for textarea)
|
|
63
|
+
handlePasteEvent(textareaEl, onInputCallback);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
52
66
|
/* Set the input as focus when clicking the whole textarea with suffix/prefix */
|
|
53
67
|
handleFocus(event) {
|
|
54
68
|
this.textEl.focus();
|
|
@@ -73,7 +87,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
|
|
|
73
87
|
}
|
|
74
88
|
render() {
|
|
75
89
|
var _a;
|
|
76
|
-
return (h("div", { key: '
|
|
90
|
+
return (h("div", { key: 'e723f8a641f578ffa97ada5746d900e49eb79252', class: {
|
|
77
91
|
'textarea-container': true,
|
|
78
92
|
'textarea-label-inside': this.labelPosition === 'inside',
|
|
79
93
|
'textarea-focus': this.focusInput,
|
|
@@ -83,7 +97,7 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
|
|
|
83
97
|
'textarea-data': this.value !== '',
|
|
84
98
|
[`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
|
|
85
99
|
'no-min-width': this.noMinWidth,
|
|
86
|
-
} }, this.labelPosition !== 'no-label' && (h("label", { key: '
|
|
100
|
+
} }, this.labelPosition !== 'no-label' && (h("label", { key: 'd2dbcc394a2790218f31738d5b5b9525b1fc0846', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '163cd6db0ad8bcbe3d50444c78eea1c38463c450', class: "textarea-wrapper" }, h("textarea", { key: 'b1311130a28ec0a9053d98aff1afd009f22628fb', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
|
|
87
101
|
this.textEl = inputEl;
|
|
88
102
|
}, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
|
|
89
103
|
if (!this.readOnly) {
|
|
@@ -93,8 +107,9 @@ const TdsTextarea$1 = /*@__PURE__*/ proxyCustomElement(class TdsTextarea extends
|
|
|
93
107
|
if (!this.readOnly) {
|
|
94
108
|
this.handleBlur(event);
|
|
95
109
|
}
|
|
96
|
-
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '
|
|
110
|
+
}, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onPaste: (event) => this.handlePaste(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'b423c1b6f9652c3aa95447f33100eba166b7de06', class: "textarea-resizer-icon" }, h("svg", { key: 'c254d5ac9fc72500c2263b49c3c4e3642b9097bb', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a6ee4ec8cbb32d6fbc11fb03cbdc9af6f456805b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '0e28490b93e622ad1322c1adc591329fde3920cd', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '792b4866942b26634f8cef72d00ca11b03ba3fbe', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '2b809a91f13c09be470feafd622389e78f1ed4ca', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: '0c8937b9279a72d4805bb880b38be59e086c5e39', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '77ab9eff4a502d6ebd6959bd4ed957b9a1aa1a58', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: 'a011f0e2c0e7a22fe243c967f67e022e0439d9b2', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: 'cba5a9f73a0c74826f8722eb1ae861e8ddce5bb5', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
|
|
97
111
|
}
|
|
112
|
+
get host() { return this; }
|
|
98
113
|
static get style() { return TdsTextareaStyle0; }
|
|
99
114
|
}, [2, "tds-textarea", {
|
|
100
115
|
"label": [1],
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Utility function to handle paste events and trigger input events
|
|
3
|
+
* This ensures that paste operations properly trigger tdsInput events
|
|
4
|
+
*
|
|
5
|
+
* @param element - The HTMLInputElement or HTMLTextAreaElement that received the paste
|
|
6
|
+
* @param onInputCallback - Callback function to handle the input event
|
|
7
|
+
* @param valueProcessor - Optional function to process the value before setting it
|
|
8
|
+
*/
|
|
9
|
+
function handlePasteEvent(element, onInputCallback, valueProcessor) {
|
|
10
|
+
// Use setTimeout to ensure the paste content is processed before we trigger the input event
|
|
11
|
+
setTimeout(() => {
|
|
12
|
+
let value = element.value;
|
|
13
|
+
// Apply value processing if provided (e.g., for number inputs with min/max validation)
|
|
14
|
+
if (valueProcessor) {
|
|
15
|
+
value = valueProcessor(value);
|
|
16
|
+
element.value = value;
|
|
17
|
+
}
|
|
18
|
+
// Create a synthetic input event to maintain consistency
|
|
19
|
+
const syntheticInputEvent = new InputEvent('input', {
|
|
20
|
+
bubbles: true,
|
|
21
|
+
cancelable: true,
|
|
22
|
+
inputType: 'insertFromPaste',
|
|
23
|
+
data: null,
|
|
24
|
+
isComposing: false,
|
|
25
|
+
});
|
|
26
|
+
// Trigger the callback with the synthetic event
|
|
27
|
+
onInputCallback(syntheticInputEvent);
|
|
28
|
+
}, 0);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export { handlePasteEvent as h };
|
|
@@ -304,6 +304,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
304
304
|
return import(
|
|
305
305
|
/* webpackMode: "lazy" */
|
|
306
306
|
'./tds-tag.entry.js').then(processMod, consoleError);
|
|
307
|
+
case 'tds-text-field':
|
|
308
|
+
return import(
|
|
309
|
+
/* webpackMode: "lazy" */
|
|
310
|
+
'./tds-text-field.entry.js').then(processMod, consoleError);
|
|
307
311
|
case 'tds-textarea':
|
|
308
312
|
return import(
|
|
309
313
|
/* webpackMode: "lazy" */
|
|
@@ -340,10 +344,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
340
344
|
return import(
|
|
341
345
|
/* webpackMode: "lazy" */
|
|
342
346
|
'./tds-side-menu-user-image_2.entry.js').then(processMod, consoleError);
|
|
343
|
-
case 'tds-text-field':
|
|
344
|
-
return import(
|
|
345
|
-
/* webpackMode: "lazy" */
|
|
346
|
-
'./tds-text-field.entry.js').then(processMod, consoleError);
|
|
347
347
|
case 'tds-popover-canvas':
|
|
348
348
|
return import(
|
|
349
349
|
/* webpackMode: "lazy" */
|