q2-tecton-elements 1.51.1 → 1.52.1

package/dist/components/q2-input2.js

@@ -2931,6 +2931,11 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
             }
             this.setCursorPosition(cursorPosition);
         };
+        this.initMutationObserver = () => {
+            const observer = new MutationObserver(this.onMutationObserved);
+            observer.observe(this.hostElement, { childList: true });
+            this.mutationObserver = observer;
+        };
         this.onClearInput = () => {
             const eventDetail = {
                 value: '',
@@ -3082,16 +3087,13 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
         this.manageClearableResizeObserver(this.clearable);
     }
     componentDidLoad() {
-        if (!this.pseudo) {
+        overrideFocus(this.hostElement);
+        if (!this.pseudo)
             this.inputField.value = this.formattedValueObject.formattedValue;
-        }
-        if (this.autofocus === true) {
+        if (!!this.autofocus)
             this.inputField.focus();
-        }
-        overrideFocus(this.hostElement);
-        const observer = new MutationObserver(this.onMutationObserved);
-        observer.observe(this.hostElement, { childList: true });
-        this.mutationObserver = observer;
+        if ('MutationObserver' in window)
+            this.initMutationObserver();
     }
     componentDidRender() {
         this.scheduledAfterRender.forEach(fn => fn());
@@ -3100,7 +3102,10 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
     // #endregion
     // #region Listeners
     onHostElementChange(event) {
-        event.stopPropagation();
+        if (!(event instanceof CustomEvent)) {
+            event.stopPropagation();
+            return;
+        }
         if (event.target === this.hostElement && !this.hostElement.onchange) {
             this.value = event.detail.value;
         }
@@ -3115,7 +3120,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
     /**
      * Emulates firing checkValidity on `<input>`, emits `invalid` event if validation failed.
      */
-    checkValidity() {
+    async checkValidity() {
         this.inputRef.checkValidity();
         this.validateInput();
     }
@@ -3127,7 +3132,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
      *
      * @testOnly
      */
-    clearValue() {
+    async clearValue() {
         if (!this.clearable)
             return;
         this.onClearInput();
@@ -3154,6 +3159,8 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
     }
     manageClearableResizeObserver(clearable) {
         var _a;
+        if ('ResizeObserver' in window === false)
+            return;
         const isSmallThreshold = 190;
         if (clearable) {
             if (this.resizeObserver)
@@ -3251,7 +3258,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
         }
     }
     get hasCustomDisplaySlot() {
-        return !!this.hostElement.querySelector('[slot=custom-display]');
+        return hasSlotContent(this.hostElement, 'custom-display');
     }
     get hasError() {
         return Array.isArray(this.errors) && this.errors.length > 0;
@@ -3317,7 +3324,8 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
         return this.messages.length > 0 && !this.hideMessages;
     }
     get stringValue() {
-        return (this.value && String(this.value)) || '';
+        const notCoercable = Object.prototype.toString.call(this.value) === '[object Object]';
+        return notCoercable ? '' : (this.value && String(this.value)) || '';
     }
     get visibilityToggleAriaLabel() {
         return `tecton.element.input.toggleAriaLabel.${this.textHidden ? 'show' : 'hide'}`;
@@ -3364,7 +3372,7 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
             startingPosition,
             valueLength,
             previousValueLength: valueLength,
-            hasSelection: getSelection().toString().length > 0,
+            hasSelection: window.getSelection().toString().length > 0,
         };
     }
     calculateCursorPositionOnInput() {
@@ -3379,12 +3387,6 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
             hasSelection: false,
         };
     }
-    countDOM() {
-        if (!this.showCount)
-            return;
-        const { maxlength, formattedValueObject } = this;
-        return (h("div", { class: "count-tag" }, formattedValueObject.unformattedValue.length, maxlength && `/${maxlength}`));
-    }
     formatAndUpdateValueFromProp() {
         this.formattedValueObject = this.getFormattedValue(this.stringValue, true);
         if (!this.pseudo) {
@@ -3485,21 +3487,10 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
         }
         this.handleValueAndCursor();
     }
-    /* tslint:disable:cyclomatic-complexity */
-    inputContainerDOM() {
-        const { hasInputLeftSlot, hasInputRightSlot } = this;
-        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.pseudoInputDOM() : this.standardInputDOM(), h("div", { class: "input-icons-container-right" }, h("q2-btn", { class: this.clearClasses.join(' '), ariaLabel: loc('tecton.element.input.clear', [this.label]), "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
-    }
     placeCursorAtEnd() {
         const { inputField } = this;
         inputField.selectionStart = inputField.selectionEnd = inputField.value.length;
     }
-    /* tslint:enable:cyclomatic-complexity */
-    pseudoInputDOM() {
-        const showPlaceholder = !this.value && !!this.placeholder;
-        const { ariaOwns, ariaHaspopup, ariaExpanded, ariaActivedescendant } = this.ariaAttributes;
-        return (h("div", { class: "pseudo-input-container" }, h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-activedescendant": ariaActivedescendant, role: (this.role && `${this.role}`) || 'textbox', disabled: !!this.disabled, "test-id": "q2InputInnerClearButton", onFocus: this.onInputFocus, onBlur: this.onInputBlur }, h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }, h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value))))));
-    }
     setCursorPosition(cursorData) {
         if (this.canSetSelection && !cursorData.hasSelection) {
             const input = this.inputField;
@@ -3521,9 +3512,24 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
             }
         }
     }
-    /* tslint:enable:cyclomatic-complexity */
-    /* tslint:disable:cyclomatic-complexity */
-    standardInputDOM() {
+    // #endregion
+    // #region Render Methods
+    renderCountDOM() {
+        if (!this.showCount)
+            return;
+        const { maxlength, formattedValueObject } = this;
+        return (h("div", { class: "count-tag" }, formattedValueObject.unformattedValue.length, maxlength && `/${maxlength}`));
+    }
+    renderInputContainerDOM() {
+        const { hasInputLeftSlot, hasInputRightSlot } = this;
+        return (h("div", { class: "input-container", tabindex: -1, "test-id": "inputContainer" }, h("div", { class: "input-icons-container-left" }, this.formattedValueObject.prefix && (h("div", { class: "input-prefix" }, this.formattedValueObject.prefix)), this.computedIconLeft && (h("div", null, h("q2-icon", { type: this.computedIconLeft, class: this.computedClassForIconLeft }))), hasInputLeftSlot && h("slot", { name: "input-left" }), this.showIconSeparator && h("div", { class: "vertical-separator" }), this.hasError && this.type === 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" })))), this.pseudo ? this.renderPseudoInputDOM() : this.renderStandardInputDOM(), h("div", { class: "input-icons-container-right" }, h("q2-btn", { class: this.clearClasses.join(' '), label: loc('tecton.element.input.clear', [this.label]), hideLabel: true, "test-id": "clearButton", onClick: this.onClearInput }, h("q2-icon", { type: "close", class: "icon-clear" })), ['password', 'text', 'ssn', 'tin'].includes(this.type) && this.showVisibilityToggle && (h("q2-btn", { class: "btn-visibility-toggle", "test-id": "toggleVisibilityButton", onClick: this.onToggleVisibility, label: loc(this.visibilityToggleAriaLabel, { label: this.label }), "hide-label": true }, this.visibilityToggleText)), this.formattedValueObject.suffix && (h("span", { class: "input-suffix" }, this.formattedValueObject.suffix)), this.badgeValue && (h("q2-badge", { size: "large", theme: this.badgeTheme }, this.badgeValue)), this.hasError && this.type !== 'currency' && (h("div", { "test-id": "divIconError", onClick: this.onRefocusInput }, h("q2-icon", { type: "error", class: "icon-error", "test-id": "iconError" }))), this.iconRight && !this.formattedValueObject.suffix && (h("div", null, h("q2-icon", { type: this.iconRight, class: "icon-right" }))), hasInputRightSlot && h("slot", { name: "input-right" }))));
+    }
+    renderPseudoInputDOM() {
+        const showPlaceholder = !this.value && !!this.placeholder;
+        const { ariaOwns, ariaHaspopup, ariaExpanded, ariaActivedescendant } = this.ariaAttributes;
+        return (h("div", { class: "pseudo-input-container" }, h("button", { class: "input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-activedescendant": ariaActivedescendant, role: (this.role && `${this.role}`) || 'textbox', disabled: !!this.disabled, "test-id": "q2InputInnerClearButton", onFocus: this.onInputFocus, onBlur: this.onInputBlur }, h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }, h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? loc(this.placeholder) : loc(this.value)))))));
+    }
+    renderStandardInputDOM() {
         const { hasCustomDisplaySlot } = this;
         const inputClasses = ['input-field'];
         const { ariaOwns, ariaHaspopup, ariaExpanded, ariaActivedescendant } = this.ariaAttributes;
@@ -3531,10 +3537,8 @@ const Q2Input = /*@__PURE__*/ proxyCustomElement(class Q2Input extends HTMLEleme
             inputClasses.push('sr');
         return (h(Fragment, null, hasCustomDisplaySlot && (h("div", { class: "custom-display-container" }, h("slot", { name: "custom-display" }))), h("input", { ref: el => (this.inputRef = el), class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, maxlength: ['date', 'currency'].includes(this.type) ? undefined : this.maxlength || undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-activedescendant": ariaActivedescendant, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && loc(this.placeholder)) || undefined, role: this._role, "test-id": "inputField", readonly: this.readonly || this._preventEntry, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode, pattern: this.pattern || undefined })));
     }
-    // #endregion
-    // #region Render Methods
     render() {
-        return (h("div", { key: '14b5711778446c89258750a9529ff44dda463c60', class: this.wrapperClasses }, h("div", { key: '9fd4abbcc79c286104535e8f49fb1c3317f6affb', class: "label-wrapper" }, renderLabel(this), this.countDOM()), this.inputContainerDOM(), renderMessages(this)));
+        return (h("div", { key: '0f8acdf9b35d6fe0859a328037dc805102d451c5', class: this.wrapperClasses }, h("div", { key: 'e9d85bf0f092b1f823cf80b2fcdf4440c48511ad', class: "label-wrapper" }, renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), renderMessages(this)));
     }
     get hostElement() { return this; }
     static get watchers() { return {