@tet/tet-components 1.3.157-testing → 1.4.0-staging

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 function focusPreviousElement(element) {
     const previous = element.previousElementSibling;
-    previous === null || previous === void 0 ? void 0 : previous.focus();
+    previous?.focus();
 }
 /**
  * Utility function to focus the next element of an element.
@@ -15,7 +15,7 @@ function focusPreviousElement(element) {
  */
 function focusNextElement(element) {
     const next = element.nextElementSibling;
-    next === null || next === void 0 ? void 0 : next.focus();
+    next?.focus();
 }
 /**
  * The input enables the user to interact with and input content and data.
@@ -23,41 +23,6 @@ function focusNextElement(element) {
  */
 export class TetInput {
     constructor() {
-        /**
-         * Changes dropdown state
-         */
-        this.onChevronClick = () => {
-            this.isOpen = !this.isOpen;
-            this.onDropdownOpenChanged();
-        };
-        /**
-         * Closes dropdown
-         */
-        this.closeDropdown = () => {
-            this.isOpen = false;
-        };
-        /**
-         * Renders dropdown content
-         */
-        this.dropdownItemRefs = [];
-        this.renderDropdownContent = () => {
-            this.dropdownItemRefs = [];
-            if (!this.suffixes)
-                return [];
-            return this.suffixes.map((_suffix, i) => {
-                const isActive = this.suffix === _suffix;
-                return (h("div", { ref: el => { this.dropdownItemRefs[i] = el; }, onClick: () => this.onDropdownItemClick(_suffix), onKeyDown: this.handleOptionKeydown(() => this.onDropdownItemClick(_suffix)), class: { 'number-input__dropdown-item': true, 'active': isActive }, tabIndex: 0 }, _suffix.name, isActive && h("tet-icon", { class: "check", name: "check" })));
-            });
-        };
-        /**
-         * Move focus from input element to dropdown
-         */
-        this.handleContainerKeydown = (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                this.onChevronClick();
-            }
-        };
         this.label = undefined;
         this.theme = 'light';
         this.accessibilityLabel = '';
@@ -76,6 +41,17 @@ export class TetInput {
         this.isValueHidden = false;
         this.isKeyboardFocus = false;
     }
+    /** Reference to the input element. */
+    inputElement;
+    /** Reference to the dropdown element. */
+    dropdownElement;
+    /** Reference to the chevron element. */
+    chevronElement;
+    /** Reference to the hidden div input element. */
+    inputElementHidden;
+    inputWrapperElement;
+    /** The resize observer watching element resizes. */
+    resizeObserver;
     /**
      * Expose method to access value
      * @returns {number} value
@@ -91,6 +67,10 @@ export class TetInput {
             this.suffix = this.suffixes.find((_suffix) => _suffix.default) || this.suffixes[0];
         }
     }
+    /**
+     * Emits input event
+     */
+    inputValueChanged;
     /**
      * Event called once after component is fully loaded
      */
@@ -102,8 +82,7 @@ export class TetInput {
             this.isValueHidden = true;
         }
         this.resizeObserver = new ResizeObserver(() => {
-            var _a;
-            this.inputElement.style.width = `${(_a = this.inputElementHidden) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width}px`;
+            this.inputElement.style.width = `${this.inputElementHidden?.getBoundingClientRect().width}px`;
         });
         this.resizeObserver.observe(this.inputElementHidden);
     }
@@ -190,6 +169,32 @@ export class TetInput {
         this.value = num;
         inputElement.value = num.toString();
     }
+    /**
+     * Changes dropdown state
+     */
+    onChevronClick = () => {
+        this.isOpen = !this.isOpen;
+        this.onDropdownOpenChanged();
+    };
+    /**
+     * Closes dropdown
+     */
+    closeDropdown = () => {
+        this.isOpen = false;
+    };
+    /**
+     * Renders dropdown content
+     */
+    dropdownItemRefs = [];
+    renderDropdownContent = () => {
+        this.dropdownItemRefs = [];
+        if (!this.suffixes)
+            return [];
+        return this.suffixes.map((_suffix, i) => {
+            const isActive = this.suffix === _suffix;
+            return (h("div", { ref: el => { this.dropdownItemRefs[i] = el; }, onClick: () => this.onDropdownItemClick(_suffix), onKeyDown: this.handleOptionKeydown(() => this.onDropdownItemClick(_suffix)), class: { 'number-input__dropdown-item': true, 'active': isActive }, tabIndex: 0 }, _suffix.name, isActive && h("tet-icon", { class: "check", name: "check" })));
+        });
+    };
     /**
      * Handles keyboard input for an option item.
      *
@@ -238,6 +243,15 @@ export class TetInput {
             this.closeDropdown();
         }
     }
+    /**
+     * Move focus from input element to dropdown
+     */
+    handleContainerKeydown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.onChevronClick();
+        }
+    };
     /**
      * Move focus from input element to dropdown
      */
@@ -247,7 +261,7 @@ export class TetInput {
                 const activeSuffixIndex = this.suffixes.findIndex(suffixOption => suffixOption === this.suffix);
                 const indexToFocus = activeSuffixIndex !== -1 ? activeSuffixIndex : 0;
                 const dropdownOptionToFocus = this.dropdownItemRefs[indexToFocus];
-                dropdownOptionToFocus === null || dropdownOptionToFocus === void 0 ? void 0 : dropdownOptionToFocus.focus();
+                dropdownOptionToFocus?.focus();
             }, 0);
         }
     }
@@ -258,7 +272,7 @@ 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", Object.assign({ 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)));
+                '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)));
     }
     static get is() { return "tet-number-input"; }
     static get encapsulation() { return "shadow"; }