@tet/tet-components 1.4.6-testing → 1.4.7-staging

package/dist/collection/components/simple/inputs/tet-number-input/tet-number-input.js

@@ -271,8 +271,8 @@ export class TetInput {
      */
     render() {
         const { label, helperText, value, disabled, error, completed, isOpen, suffix } = this;
-        return (h("div", { key: '118205a8409c3704d725fac9f040811c3dec72ec', class: { 'number-input': true, [this.theme]: !!this.theme,
-                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: 'b10125318d3b01c20415474488cfea6dfff2c679', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: '3ac5e21d87dece1809f73a5e63ef2ea500de6c68', class: "number-input__input-container", onKeyDown: this.handleContainerKeydown, ref: (divElement) => (this.inputWrapperElement = divElement) }, h("input", { key: 'af84d4475b0477a43230c8b7540f459ef32a7738', onFocusin: () => this.toggleKeyboardFocus(true), onFocusout: () => this.toggleKeyboardFocus(false), ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: { 'number-input__input': true, 'number-input__input--hidden': this.isValueHidden }, disabled: disabled, value: value, type: "number", id: "number-input", ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}) }), h("div", { key: '824f8b9c97dbedc6dcd92da97234bb8046b64174', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: 'cd1813ebbc68637c8e1de72d9f06fbf23baff087', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '99525148702c09783d1ecd8b132e264f0a6bb2d3', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel, tabindex: "-1" }, !isOpen && h("tet-icon", { key: '9b46e466fd2d4539be9bb26c8158344cbadefe0c', name: "chevron-down" }), isOpen && h("tet-icon", { key: '9a381e3c4be32545cb3e94284fb9c2f8282762a3', name: "chevron-up" }))), isOpen && (h("div", { key: '60377dee2379132ca971f4b9f567932d295984d1', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: 'a55d2d842586674dfadcf846e1c0b855b45636a0', class: "number-input__helper-text" }, helperText)));
+        return (h("div", { key: '58306294b1d417609b3d2a864a8e9dc69966616d', class: { 'number-input': true, [this.theme]: !!this.theme,
+                'disabled': disabled, 'error': error, 'completed': completed } }, !!label && (h("label", { key: 'd8807961e899822ccc801ab1d7208a4b5c8b2e98', class: "number-input__label", htmlFor: "number-input" }, label)), h("div", { key: '52278bacc3db353e5a3e97af33751c9ee99a4def', class: "number-input__input-container", onKeyDown: this.handleContainerKeydown, ref: (divElement) => (this.inputWrapperElement = divElement) }, h("input", { key: '5bd0e7fef2a85d3d4b51e7447a2da51ea0324fb5', onFocusin: () => this.toggleKeyboardFocus(true), onFocusout: () => this.toggleKeyboardFocus(false), ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: { 'number-input__input': true, 'number-input__input--hidden': this.isValueHidden }, disabled: disabled, value: value, type: "number", id: "number-input", ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}) }), h("div", { key: 'e989d7b2002a97967d54a6acdf9b27d51cf57730', ref: (htmlInputElement) => (this.inputElementHidden = htmlInputElement), class: "number-input__input-invisible" }, value), !!suffix && h("div", { key: '28b5fd46ab07df329491d0ac310d171ab84b1d0d', class: "number-input__input-suffix" }, suffix.name), !!this.suffixes && this.suffixes.length > 1 && (h("tet-button", { key: '92d6a0e28ac640c0b6f43658bfefd954ca58a9d4', type: "ghost", size: "small", ref: (element) => (this.chevronElement = element), class: { 'number-input__cheveron': true }, onClick: this.onChevronClick, "accessibility-label": this.buttonAccessibilityLabel, tabindex: "-1" }, !isOpen && h("tet-icon", { key: 'a3d5c37e4d87bfdc340d173db68fbc95923f8bde', name: "chevron-down" }), isOpen && h("tet-icon", { key: '59ba90e98b52f7aeca966debdc76cfda941a9b7a', name: "chevron-up" }))), isOpen && (h("div", { key: '99608869c1d37aba3c93d1f2f7b6c267fa2ab639', class: "number-input__dropdown", ref: (htmlDivElement) => (this.dropdownElement = htmlDivElement) }, this.renderDropdownContent()))), !!helperText && h("div", { key: '94e94cf9e4540b15330e2c3b0485bfb190c47be8', class: "number-input__helper-text" }, helperText)));
     }
     static get is() { return "tet-number-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.js

@@ -760,31 +760,31 @@ export class TetRangeSlider {
         return dataListItem;
     };
     render() {
-        return (h(Host, { key: 'fe4d87f523c54b6d3bde6a4aeb062d3903571091' }, h("div", { key: 'c07051d59b5534b32df81830d998d874ed14fd8f', class: {
+        return (h(Host, { key: '7b6df525a01291a02538f9e3e5ed4fc4e0bf6f4d' }, h("div", { key: '64347e6a138a776253ef28ddf144ee5bd96f9793', class: {
                 'range-slider': true,
                 [`range-slider--${this.containerSize}`]: true,
                 [`range-slider--${this.type}`]: true,
                 'range-slider--no-controls': !this.withControls,
                 'range-slider--no-input': !this.withInput,
                 [this.theme]: true,
-            } }, h("div", { key: '6cf218ba806685aa060f835562f02c5b6cf9ace5', class: {
+            } }, h("div", { key: '0751c6222179ee07b1bea1204103a9f9321e4959', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", { key: '16067f25184f3b4a4a2dec1d3246b6f602e05985', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel, ...(this.containerSize !== 'large' ? { inputTabindex: 3 } : {}) })), h("div", { key: 'ec4bd9cb5b732089c8b3a02f1892aef4a3af7a89', class: "range-slider__container" }, h("tet-button", { key: '02061d179102586b3518bb8e47b561311e82b9c2', theme: this.theme, iconMode: true, class: {
+            } }, h("tet-input", { key: '1c5142cc0fc704181b0255de454b8b217b2560e1', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel, ...(this.containerSize !== 'large' ? { inputTabindex: 3 } : {}) })), h("div", { key: '4cfcf21065d4e8b13ceedb18133b8a3077adf6f3', class: "range-slider__container" }, h("tet-button", { key: '91bac1cd9267e19c35ca435eb95f6893df0b6a81', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--left': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlPreviousClick, ...(this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 2 } : {}) }, h("tet-icon", { key: 'f69c0f996709d6d4ee780b3b3601da2aecb0ef53', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '163bc4c424eb02a14f4aa5af3cb8dc15a95e8323', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '87faebff4efc96466b045cb30e2195aca1e7b125', class: "range-slider__slider-wrapper" }, h("input", { key: '395e6b19348b9db47c6a01e5e62d38540e15b631', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider", ...(this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 1 } : {}) })), h("div", { key: 'ce03add3fa4235f1dc1dec6ee4c2249b7c6ab411', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'b5fbdc67265f9bc567f193994f8d5bd8000a3cec', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'c7144b949d09573c4e2f446f80b54f0ba28ba854', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '576ed7c7f3e9d892eb19e74f61f229ea62383c63', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, clickCallback: this.onControlPreviousClick, ...(this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 2 } : {}) }, h("tet-icon", { key: '2c571ca63a933dc91e12c848e2a9938b0c0fb553', name: "remove", class: "range-slider__control--icon" })), h("div", { key: 'e6bee19f5587d8c218b64f44b988f7680ba8075a', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: 'fa4fd5b4aeacf122d6602be3eed3cb727d2e406d', class: "range-slider__slider-wrapper" }, h("input", { key: '71e6dbfc560f5c2df5fe03e61e07ba336d23c021', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider", ...(this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 1 } : {}) })), h("div", { key: '9d48abfbdd6e5bebd7b0e077c77d1befad826fcd', class: "range-slider__track range-slider__track--background" }), h("div", { key: 'f2a3996931d3d10c744b6abff8575c6358217e5e', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'fd6de45347d1a86580569e25875f28821df21103', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: 'e2d165f5d8287ec066da9be62f895c1407c13ddd', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
-            } })), h("div", { key: 'a479431596824a05d55a8775f73c9e7071950e3a', class: {
+            } })), h("div", { key: 'cf5a10bf14a684ef920a9e0c9652a4e1f81ac80c', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: 'e2c0a91402037601d8865476ae2d25623d0083bd', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: 'cf187a5376842141b09291db7029842e1b14577c', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '0a41fc6a3c162e1a2eb907551f592c58865c9836', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", { key: '06d21777945c8f42f83179546a35e6a3112d6bca', theme: this.theme, iconMode: true, class: {
+            } }, h("div", { key: 'ebcc9fe3ee4dc266eed71aa2e4200d32ce711235', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '812d5f2890024bf4920dd0e3fe5126fe13cd173e', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '94195c1ce698c9d386eeb3d8e1ee77bcdf5b5c8a', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", { key: '996619cf413eec42c94648ff0087c19462161f50', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--right': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlNextClick, ...(this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 4 } : {}) }, h("tet-icon", { key: '35a49113a21c71b1f79f871597c2feeb7ae112e1', name: "add", class: "range-slider__control--icon" }))))));
+            }, clickCallback: this.onControlNextClick, ...(this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), ...(this.containerSize !== 'large' ? { tabindex: 4 } : {}) }, h("tet-icon", { key: 'f54026e9957ab098656afc46589f44d5f12a89e0', name: "add", class: "range-slider__control--icon" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-stepper-input/tet-stepper-input.js

@@ -129,7 +129,7 @@ export class TetStepperInput {
      */
     render() {
         const { onMinusClick, value, onPlusClick } = this;
-        return (h("div", { key: '547aa8f4aaa5e32644ffd167b8414ce4aba15a1a', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: '1b42018358a0f74802674711b3a511083f419b58', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: '434bb70aca31a846a6b6b08f7537b6b301381c78', name: "remove" })), h("input", { key: 'df2f260f815a44d61805afec29efbe898a33c69c', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number", ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}) }), h("tet-button", { key: 'eef0803d6b69ce5fb7b88388f8cc832517c3c7ea', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: 'dfa3df6d1b3fb209a4b5831bfffd281bf6968e88', name: "add" }))));
+        return (h("div", { key: '78cbe4b6dbf86e93e6d5286e7209da59bc66deaa', class: { 'stepper-input': true, [this.theme]: !!this.theme } }, h("tet-button", { key: 'ad3291ad57d581fd399e013b716d7d463764caf1', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-decrease'), onKeyDown: this.handleOptionKeydown(onMinusClick), onClick: onMinusClick }, h("tet-icon", { key: '05538edc2b320de78d18590468197cdde0c5013b', name: "remove" })), h("input", { key: '60e78e5e742811791bf29ffa6ff0b1f21e9742c7', ref: (htmlInputElement) => (this.inputElement = htmlInputElement), class: "stepper-input__value", value: value, type: "number", ...(this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {}) }), h("tet-button", { key: 'e0d8619b694c385e97b9afebea892f734ef81634', type: "secondary", iconMode: true, theme: this.theme, size: 'small', accessibilityLabel: t('components-number-input-increase'), onKeyDown: this.handleOptionKeydown(onPlusClick), onClick: onPlusClick }, h("tet-icon", { key: '2faae11136e7316f84bb59c5952372342ab44066', name: "add" }))));
     }
     static get is() { return "tet-stepper-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-textarea/tet-textarea.js

@@ -50,8 +50,8 @@ export class TetTextarea {
             'error': (errorMessages.length > 0),
             'keyboard-focus': this.focusVisible,
         };
-        return (h(Host, { key: 'b91787eb44ff93db4ca624fec009ba56eaaa4798' }, h("label", { key: '0e61b1a5dae257fc287032588e2c820bd66130bd', class: { [`${theme}`]: true } }, label &&
-            h("span", { key: '0c325bca4b4eceefc4543248e7b5f8c658009c2e', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: '460389d35be06431a282858eb2b7c60862afe944', class: { 'textarea-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: 'eef72eb16bbafc8f568e709d0039b5b4be2fe2e4', onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, id: "textarea", class: textareaClasses, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value))), (this.errorMessages.length > 0) && renderErrorMessages()));
+        return (h(Host, { key: 'dfb7cba6cdb1e3389c2827418f6a5dce7759b7c7' }, h("label", { key: '600586e81fb87bf72466fa8dc721ee9158b198ca', class: { [`${theme}`]: true } }, label &&
+            h("span", { key: '7c752ea01e058c8f22c7247726ec42e10c139f4e', class: { 'tet-textarea__label': true, [`tet-textarea__${theme}`]: true } }, label), h("div", { key: '3d18f8d92caddfd008f4340de60d634dac8ff158', class: { 'textarea-container': true, [`tet-textarea__${theme}`]: true } }, h("textarea", { key: '42ac03f790a614ceae77dad19e93f170c6a99d6a', onFocus: this.addKeyboardFocus, onFocusout: this.removeKeyboardFocus, id: "textarea", class: textareaClasses, placeholder: placeholder, disabled: disabled, autocomplete: "off" }, value))), (this.errorMessages.length > 0) && renderErrorMessages()));
     }
     static get is() { return "tet-textarea"; }
     static get encapsulation() { return "shadow"; }