@everymatrix/bonus-elevate-powerups-lobby 0.5.1 → 0.5.3

package/dist/cjs/bonus-elevate-powerups_21.cjs.entry.js

@@ -20067,7 +20067,6 @@ const PasswordInput = class {
     }
     componentDidLoad() {
         this.handleClientStyling();
-        this.inputReference = this.element.shadowRoot.querySelector('input');
         this.passwordButton = this.element.shadowRoot.querySelector('vaadin-password-field-button');
         this.passwordButton.tabIndex = -1;
         this.passwordButton.addEventListener('click', (e) => {
@@ -20103,8 +20102,23 @@ const PasswordInput = class {
             return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
         });
     }
+    /**
+     * Same checks as the native `input.validity` flags, but computed from `this.value`.
+     * We can't trust the native flags here: per the HTML spec `tooShort`/`tooLong` only apply while the value was "last changed by the user". When the reveal (eye) button toggles the input `type` between `password` and `text`, WebKit (Safari / iOS) resets that flag, so a too-short password is suddenly reported as `valid`.
+     */
+    getValueValidity() {
+        var _a;
+        const value = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        const { mandatory, minLength, maxLength } = this.validation;
+        return {
+            valueMissing: !!mandatory && value === '',
+            tooShort: value !== '' && !!minLength && value.length < minLength,
+            tooLong: value !== '' && !!maxLength && value.length > maxLength,
+            patternMismatch: value !== '' && !!this.validationPattern && !new RegExp(`^(?:${this.validationPattern})$`).test(value),
+        };
+    }
     setValidity() {
-        var _a, _b;
+        var _a;
         if (this.noValidation) {
             return true;
         }
@@ -20115,7 +20129,8 @@ const PasswordInput = class {
             return false;
         }
         else {
-            return (_b = this.inputReference) === null || _b === void 0 ? void 0 : _b.validity.valid;
+            const { valueMissing, tooShort, tooLong, patternMismatch } = this.getValueValidity();
+            return !valueMissing && !tooShort && !tooLong && !patternMismatch;
         }
     }
     setPattern() {
@@ -20126,16 +20141,17 @@ const PasswordInput = class {
     }
     setErrorMessage() {
         var _a, _b, _c, _d, _e;
-        if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
+        const { valueMissing, tooShort, tooLong, patternMismatch } = this.getValueValidity();
+        if (tooShort || tooLong) {
             return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
         }
-        if (this.inputReference.validity.valueMissing) {
+        if (valueMissing) {
             return translate('requiredError', this.language);
         }
         if (this.isDuplicateInput && !this.originalValid) {
             return translate('invalidOriginalPasswordError', this.language);
         }
-        if (this.inputReference.validity.patternMismatch) {
+        if (patternMismatch) {
             const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
             const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
             return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
@@ -20145,10 +20161,17 @@ const PasswordInput = class {
             const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
             return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
         }
-        if (!((_e = this.passwordComplexity) === null || _e === void 0 ? void 0 : _e.every(complexity => complexity.passed)) && !this.showPopup) {
+        if (!((_e = this.passwordComplexity) === null || _e === void 0 ? void 0 : _e.every(complexity => complexity.passed))) {
             return translate('invalidPassword', this.language);
         }
     }
+    // Mirrors the condition used in `render()` for the complexity popup.
+    isComplexityPopupVisible() {
+        return !!this.passwordComplexity
+            && this.showPopup
+            && !this.hidePasswordComplexity
+            && !this.isDuplicateInput;
+    }
     renderTooltip() {
         if (this.showTooltip) {
             return (index.h("div", { class: `password__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
@@ -20173,11 +20196,9 @@ const PasswordInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return index.h("div", { key: '18213d251639938165f3e4ad58bdc904fb953fe2', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '092c431b178682d0006cf6ad5c14b0a7e6fb5569', class: 'password__wrapper--flex' }, index.h("label", { key: '64c101b7d70305ecf09735234d902a6b33823551', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: '189929eefa1caf71a1be39f0d663eef914d241d5', class: 'password__wrapper--relative' }, this.tooltip &&
-            index.h("img", { key: '95ee0d824b5be14ab4e62fc0b5f1731fe6ca5775', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: 'bf85dde83305233c566b1c50d0286548ba0f48a5', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && index.h("small", { key: '3acbe164ff532bcfcd9e4a237a6f352df0cfdc2d', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
-            this.showPopup &&
-            !this.hidePasswordComplexity &&
-            !this.isDuplicateInput &&
+        return index.h("div", { key: 'b4f26f39d749b45a85e4d3a05419ff74026b9c73', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, index.h("div", { key: '25ab8386ec960e36ec411a3142452bb1a7ffbe05', class: 'password__wrapper--flex' }, index.h("label", { key: '0ee895de1059e39fbde8723b1606f9f2a0f89d97', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), index.h("div", { key: 'd5d84181edfdfc638c6d35f91c555dd91c97b69a', class: 'password__wrapper--relative' }, this.tooltip &&
+            index.h("img", { key: '5a176a28a7efde57506a1db7690d57a86379a527', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), index.h("vaadin-password-field", { key: '70710167fc3a008c555e447e372e735e3c8af497', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && !this.isComplexityPopupVisible() &&
+            index.h("small", { key: 'd39c8e2c585e574bc31725e6935254d4bf634d0e', class: 'password__error-message' }, this.errorMessage), this.isComplexityPopupVisible() &&
             (this.enableSouthAfricanMode
                 ? this.renderCustomComplexityPopup()
                 : this.renderComplexityPopup()));

package/dist/esm/bonus-elevate-powerups_21.entry.js

@@ -20064,7 +20064,6 @@ const PasswordInput = class {
     }
     componentDidLoad() {
         this.handleClientStyling();
-        this.inputReference = this.element.shadowRoot.querySelector('input');
         this.passwordButton = this.element.shadowRoot.querySelector('vaadin-password-field-button');
         this.passwordButton.tabIndex = -1;
         this.passwordButton.addEventListener('click', (e) => {
@@ -20100,8 +20099,23 @@ const PasswordInput = class {
             return { rule: rule.displayName, ruleKey: rule.errorKey, passed };
         });
     }
+    /**
+     * Same checks as the native `input.validity` flags, but computed from `this.value`.
+     * We can't trust the native flags here: per the HTML spec `tooShort`/`tooLong` only apply while the value was "last changed by the user". When the reveal (eye) button toggles the input `type` between `password` and `text`, WebKit (Safari / iOS) resets that flag, so a too-short password is suddenly reported as `valid`.
+     */
+    getValueValidity() {
+        var _a;
+        const value = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        const { mandatory, minLength, maxLength } = this.validation;
+        return {
+            valueMissing: !!mandatory && value === '',
+            tooShort: value !== '' && !!minLength && value.length < minLength,
+            tooLong: value !== '' && !!maxLength && value.length > maxLength,
+            patternMismatch: value !== '' && !!this.validationPattern && !new RegExp(`^(?:${this.validationPattern})$`).test(value),
+        };
+    }
     setValidity() {
-        var _a, _b;
+        var _a;
         if (this.noValidation) {
             return true;
         }
@@ -20112,7 +20126,8 @@ const PasswordInput = class {
             return false;
         }
         else {
-            return (_b = this.inputReference) === null || _b === void 0 ? void 0 : _b.validity.valid;
+            const { valueMissing, tooShort, tooLong, patternMismatch } = this.getValueValidity();
+            return !valueMissing && !tooShort && !tooLong && !patternMismatch;
         }
     }
     setPattern() {
@@ -20123,16 +20138,17 @@ const PasswordInput = class {
     }
     setErrorMessage() {
         var _a, _b, _c, _d, _e;
-        if (this.inputReference.validity.tooShort || this.inputReference.validity.tooLong) {
+        const { valueMissing, tooShort, tooLong, patternMismatch } = this.getValueValidity();
+        if (tooShort || tooLong) {
             return translate('lengthError', this.language, { values: { minLength: this.validation.minLength, maxLength: this.validation.maxLength } });
         }
-        if (this.inputReference.validity.valueMissing) {
+        if (valueMissing) {
             return translate('requiredError', this.language);
         }
         if (this.isDuplicateInput && !this.originalValid) {
             return translate('invalidOriginalPasswordError', this.language);
         }
-        if (this.inputReference.validity.patternMismatch) {
+        if (patternMismatch) {
             const errorCode = (_a = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _a === void 0 ? void 0 : _a.errorKey;
             const errorMessage = (_b = this.validation.custom.find(customValidation => customValidation.rule === 'regex')) === null || _b === void 0 ? void 0 : _b.errorMessage;
             return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
@@ -20142,10 +20158,17 @@ const PasswordInput = class {
             const errorMessage = (_d = this.validation.custom.find(customRule => customRule.rule === 'duplicate-input')) === null || _d === void 0 ? void 0 : _d.errorMessage;
             return translate(`${errorCode}`, this.language) ? translate(`${errorCode}`, this.language) : errorMessage;
         }
-        if (!((_e = this.passwordComplexity) === null || _e === void 0 ? void 0 : _e.every(complexity => complexity.passed)) && !this.showPopup) {
+        if (!((_e = this.passwordComplexity) === null || _e === void 0 ? void 0 : _e.every(complexity => complexity.passed))) {
             return translate('invalidPassword', this.language);
         }
     }
+    // Mirrors the condition used in `render()` for the complexity popup.
+    isComplexityPopupVisible() {
+        return !!this.passwordComplexity
+            && this.showPopup
+            && !this.hidePasswordComplexity
+            && !this.isDuplicateInput;
+    }
     renderTooltip() {
         if (this.showTooltip) {
             return (h("div", { class: `password__tooltip ${this.showTooltip ? 'visible' : ''}`, ref: (el) => this.tooltipReference = el, innerHTML: this.tooltip }));
@@ -20170,11 +20193,9 @@ const PasswordInput = class {
         if (this.touched) {
             invalidClass = this.isValid == true || this.isValid == undefined ? '' : 'text__input--invalid';
         }
-        return h("div", { key: '18213d251639938165f3e4ad58bdc904fb953fe2', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '092c431b178682d0006cf6ad5c14b0a7e6fb5569', class: 'password__wrapper--flex' }, h("label", { key: '64c101b7d70305ecf09735234d902a6b33823551', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: '189929eefa1caf71a1be39f0d663eef914d241d5', class: 'password__wrapper--relative' }, this.tooltip &&
-            h("img", { key: '95ee0d824b5be14ab4e62fc0b5f1731fe6ca5775', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: 'bf85dde83305233c566b1c50d0286548ba0f48a5', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && h("small", { key: '3acbe164ff532bcfcd9e4a237a6f352df0cfdc2d', class: 'password__error-message' }, this.errorMessage), this.passwordComplexity &&
-            this.showPopup &&
-            !this.hidePasswordComplexity &&
-            !this.isDuplicateInput &&
+        return h("div", { key: 'b4f26f39d749b45a85e4d3a05419ff74026b9c73', class: `password__wrapper ${this.autofilled ? 'password__wrapper--autofilled' : ''} ${this.name}__input`, ref: el => this.stylingContainer = el }, h("div", { key: '25ab8386ec960e36ec411a3142452bb1a7ffbe05', class: 'password__wrapper--flex' }, h("label", { key: '0ee895de1059e39fbde8723b1606f9f2a0f89d97', class: `password__label  ${this.validation.mandatory ? 'password__label--required' : ''}`, htmlFor: `${this.name}__input` }, this.displayName), h("div", { key: 'd5d84181edfdfc638c6d35f91c555dd91c97b69a', class: 'password__wrapper--relative' }, this.tooltip &&
+            h("img", { key: '5a176a28a7efde57506a1db7690d57a86379a527', class: 'password__tooltip-icon', src: tooltipIcon, alt: "", ref: (el) => this.tooltipIconReference = el, onClick: () => this.showTooltip = !this.showTooltip }), this.renderTooltip())), h("vaadin-password-field", { key: '70710167fc3a008c555e447e372e735e3c8af497', type: "password", id: `${this.name}__input`, class: `password__input ${invalidClass}`, name: this.name, readOnly: this.autofilled, value: this.defaultValue, required: this.validation.mandatory, maxlength: this.validation.maxLength, minlength: this.validation.minLength, pattern: this.validationPattern, placeholder: `${this.placeholder}`, onInput: this.handleInput, onBlur: this.handleBlur, onFocus: this.handleFocus }), !this.noValidation && !this.isComplexityPopupVisible() &&
+            h("small", { key: 'd39c8e2c585e574bc31725e6935254d4bf634d0e', class: 'password__error-message' }, this.errorMessage), this.isComplexityPopupVisible() &&
             (this.enableSouthAfricanMode
                 ? this.renderCustomComplexityPopup()
                 : this.renderComplexityPopup()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/bonus-elevate-powerups-lobby",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",