igniteui-webcomponents 7.2.4 → 7.3.0-beta.0

package/{components/common → internals}/mixins/forms/associated.js

@@ -8,7 +8,8 @@ import { isServer } from 'lit';
 import { property } from 'lit/decorators.js';
 import { addInternalsController } from '../../controllers/internals.js';
 import { enterKey } from '../../controllers/key-bindings.js';
-import { addSafeEventListener, isFunction, isString } from '../../util.js';
+import { addSafeEventListener } from '../../utils/events.js';
+import { isFunction, isString } from '../../utils/types.js';
 import { InternalInvalidEvent, InternalResetEvent, } from './types.js';
 const INVALID_STATE = 'ig-invalid';
 const eventOptions = {
@@ -24,14 +25,14 @@ function emitFormResetEvent(host) {
 function BaseFormAssociated(base) {
     class BaseFormAssociatedElement extends base {
         static { this.formAssociated = true; }
-        get _hasUserInteraction() {
-            return this._touched || this._isFormSubmit;
-        }
         get _shouldApplyStyles() {
             if (this._isExternalInvalid) {
                 return true;
             }
-            return (this._invalid && this._hasUserInteraction && !this._isInternalValidation);
+            return (!this._disabled &&
+                this._invalid &&
+                this._touched &&
+                !this._isInternalValidation);
         }
         get __validators() {
             return [];
@@ -39,6 +40,9 @@ function BaseFormAssociated(base) {
         set disabled(value) {
             this._disabled = value;
             this.toggleAttribute('disabled', Boolean(this._disabled));
+            if (this.hasUpdated) {
+                this._setInvalidStyles();
+            }
         }
         get disabled() {
             return this._disabled;
@@ -48,7 +52,7 @@ function BaseFormAssociated(base) {
             this._setInvalidStyles();
         }
         get invalid() {
-            return this._isExternalInvalid || this._shouldApplyStyles;
+            return this._shouldApplyStyles;
         }
         get form() {
             return this._internals.form;
@@ -65,7 +69,6 @@ function BaseFormAssociated(base) {
         constructor(...args) {
             super(...args);
             this._internals = addInternalsController(this);
-            this._isFormSubmit = false;
             this._isInternalValidation = false;
             this._touched = false;
             this._isExternalInvalid = false;
@@ -76,36 +79,30 @@ function BaseFormAssociated(base) {
         }
         connectedCallback() {
             super.connectedCallback();
-            this._pristine = true;
-            this._touched = false;
+            if (!this.hasUpdated) {
+                this._pristine = true;
+                this._touched = false;
+            }
             this._validate();
         }
         _handleEnterKeydown(event) {
-            if (event.key !== enterKey)
-                return;
-            if (event.repeat)
+            if (event.key !== enterKey || event.repeat) {
                 return;
-            const canSubmit = this.form && (this.form.noValidate || this.checkValidity());
-            if (canSubmit) {
-                this.form?.requestSubmit();
             }
+            this.form?.requestSubmit();
         }
-        async _handleInvalid(event) {
+        _handleInvalid(event) {
             event.preventDefault();
             this._invalid = true;
             if (this._isInternalValidation) {
                 this._isInternalValidation = false;
             }
             else {
-                this._isFormSubmit = true;
+                this._setTouchedState();
                 emitFormInvalidEvent(this);
             }
             this._setInvalidStyles();
             this.requestUpdate();
-            if (this._isFormSubmit) {
-                await this.updateComplete;
-                this._isFormSubmit = false;
-            }
         }
         _setInvalidStyles() {
             this._internals.setState(INVALID_STATE, this._shouldApplyStyles);
@@ -114,33 +111,29 @@ function BaseFormAssociated(base) {
             this._isInternalValidation = false;
         }
         __runValidators() {
-            const validity = {};
+            let validity = {};
             let message = '';
-            let validationFailed = false;
             for (const validator of this.__validators) {
                 const isValid = validator.isValid(this);
                 validity[validator.key] = !isValid;
                 if (!isValid) {
-                    validationFailed = true;
                     message = isFunction(validator.message)
                         ? validator.message(this)
                         : validator.message;
+                    if (validator.key === 'valueMissing') {
+                        validity = { valueMissing: true };
+                        break;
+                    }
                 }
             }
-            this._invalid = validationFailed;
             return { validity, message };
         }
         _validate(userMessage) {
             if (isServer)
                 return;
-            let { validity, message } = this.__runValidators();
+            const { validity, message: validatorMessage } = this.__runValidators();
             const hasCustomError = this.validity.customError;
-            if (validity.valueMissing) {
-                validity = {
-                    valueMissing: true,
-                    customError: hasCustomError,
-                };
-            }
+            let message = validatorMessage;
             if (hasCustomError && userMessage === undefined) {
                 validity.customError = true;
                 message = this.validationMessage;
@@ -156,15 +149,14 @@ function BaseFormAssociated(base) {
             this._isInternalValidation = true;
             this._invalid = !this._internals.checkValidity();
             this._resolveInternalValidation();
+            this._setInvalidStyles();
         }
         _handleBlur() {
             this._setTouchedState();
             this._validate();
         }
         _setTouchedState() {
-            if (!this._touched) {
-                this._touched = true;
-            }
+            this._touched = true;
         }
         _setDefaultValue(current) {
             this._formValue.defaultValue = current;
@@ -178,11 +170,11 @@ function BaseFormAssociated(base) {
             this._pristine = false;
             this._internals.setFormValue(value, state);
             this._validate();
-            this._setInvalidStyles();
         }
         formAssociatedCallback(_form) { }
         formDisabledCallback(state) {
             this._disabled = state;
+            this._setInvalidStyles();
             this.requestUpdate();
         }
         formResetCallback() {
@@ -190,6 +182,7 @@ function BaseFormAssociated(base) {
             this._pristine = true;
             this._touched = false;
             this._invalid = false;
+            this._isExternalInvalid = false;
             this._setInvalidStyles();
             emitFormResetEvent(this);
         }
@@ -208,8 +201,6 @@ function BaseFormAssociated(base) {
         }
         setCustomValidity(message) {
             this._validate(message);
-            this._isInternalValidation = message === '';
-            this._setInvalidStyles();
             this.requestUpdate();
         }
     }
@@ -237,6 +228,14 @@ export function FormAssociatedMixin(base) {
         get defaultValue() {
             return this._formValue.defaultValue;
         }
+        _restoreDefaultValue() {
+            if ('value' in this) {
+                this.value = this.defaultValue;
+            }
+            else {
+                super._restoreDefaultValue();
+            }
+        }
         attributeChangedCallback(name, prev, current) {
             super.attributeChangedCallback(name, prev, current);
             if (name === 'value') {
@@ -262,6 +261,14 @@ export function FormAssociatedCheckboxMixin(base) {
         get defaultChecked() {
             return this._formValue.defaultValue;
         }
+        _restoreDefaultValue() {
+            if ('checked' in this) {
+                this.checked = this.defaultChecked;
+            }
+            else {
+                super._restoreDefaultValue();
+            }
+        }
         attributeChangedCallback(name, prev, current) {
             super.attributeChangedCallback(name, prev, current);
             if (name === 'checked') {

package/internals/mixins/forms/associated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"associated.js","sourceRoot":"","sources":["../../../../src/internals/mixins/forms/associated.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,QAAQ,EAAmB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAI5D,OAAO,EAKL,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,YAAY,CAAC;AAEpB,MAAM,aAAa,GAAG,YAAY,CAAC;AAEnC,MAAM,YAAY,GAAG;IACnB,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,SAAS,oBAAoB,CAAC,IAAgB;IAC5C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,oBAAoB,EAAE,YAAY,CAAC,CAAC,CAAC;AAC1E,CAAC;AAED,SAAS,kBAAkB,CAAC,IAAgB;IAC1C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE,YAAY,CAAC,CAAC,CAAC;AACxE,CAAC;AAED,SAAS,kBAAkB,CAAoC,IAAO;IACpE,MAAM,yBAA0B,SAAQ,IAAI;iBACnB,mBAAc,GAAG,IAAI,AAAP,CAAQ;QAiB7C,IAAY,kBAAkB;YAC5B,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC5B,OAAO,IAAI,CAAC;YACd,CAAC;YAID,OAAO,CACL,CAAC,IAAI,CAAC,SAAS;gBACf,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,QAAQ;gBACb,CAAC,IAAI,CAAC,qBAAqB,CAC5B,CAAC;QACJ,CAAC;QAMD,IAAc,YAAY;YACxB,OAAO,EAAE,CAAC;QACZ,CAAC;QAmBD,IAAW,QAAQ,CAAC,KAAc;YAChC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,eAAe,CAAC,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;YAC1D,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC;QAED,IAAW,QAAQ;YACjB,OAAO,IAAI,CAAC,SAAS,CAAC;QACxB,CAAC;QAaD,IAAW,OAAO,CAAC,KAAc;YAC/B,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;YAChC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;QAED,IAAW,OAAO;YAChB,OAAO,IAAI,CAAC,kBAAkB,CAAC;QACjC,CAAC;QAGD,IAAW,IAAI;YACb,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QAC9B,CAAC;QAMD,IAAW,QAAQ;YACjB,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;QAClC,CAAC;QAGD,IAAW,iBAAiB;YAC1B,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;QAC3C,CAAC;QAMD,IAAW,YAAY;YACrB,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;QACtC,CAAC;QAKD,YAAY,GAAG,IAAW;YACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAnHE,eAAU,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;YASrD,0BAAqB,GAAG,KAAK,CAAC;YAC9B,aAAQ,GAAG,KAAK,CAAC;YACjB,uBAAkB,GAAG,KAAK,CAAC;YAiBzB,cAAS,GAAG,KAAK,CAAC;YAClB,aAAQ,GAAG,KAAK,CAAC;YACjB,cAAS,GAAG,IAAI,CAAC;YAsFzB,oBAAoB,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC7D,CAAC;QAGe,iBAAiB;YAC/B,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAE1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;gBACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACxB,CAAC;YAED,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;QAMS,mBAAmB,CAAC,KAAoB;YAChD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;gBAC3C,OAAO;YACT,CAAC;YAED,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC;QAC7B,CAAC;QAMO,cAAc,CAAC,KAAY;YACjC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YAErB,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC/B,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;YACrC,CAAC;iBAAM,CAAC;gBAMN,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACxB,oBAAoB,CAAC,IAAI,CAAC,CAAC;YAC7B,CAAC;YAED,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAEO,iBAAiB;YACvB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,aAAa,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACnE,CAAC;QAQO,0BAA0B;YAChC,IAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;QACrC,CAAC;QAEO,eAAe;YAIrB,IAAI,QAAQ,GAAuB,EAAE,CAAC;YACtC,IAAI,OAAO,GAAG,EAAE,CAAC;YAEjB,KAAK,MAAM,SAAS,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gBAC1C,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBAExC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC;gBAEnC,IAAI,CAAC,OAAO,EAAE,CAAC;oBACb,OAAO,GAAG,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC;wBACrC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;wBACzB,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC;oBAEtB,IAAI,SAAS,CAAC,GAAG,KAAK,cAAc,EAAE,CAAC;wBACrC,QAAQ,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;wBAClC,MAAM;oBACR,CAAC;gBACH,CAAC;YACH,CAAC;YAED,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;QAC/B,CAAC;QAKS,SAAS,CAAC,WAAoB;YACtC,IAAI,QAAQ;gBAAE,OAAO;YACrB,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YACvE,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;YACjD,IAAI,OAAO,GAAG,gBAAgB,CAAC;YAE/B,IAAI,cAAc,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;gBAGhD,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC5B,OAAO,GAAG,IAAI,CAAC,iBAAiB,CAAC;YACnC,CAAC;iBAAM,IAAI,cAAc,IAAI,WAAW,KAAK,EAAE,EAAE,CAAC;gBAEhD,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC;YAC/B,CAAC;iBAAM,IAAI,WAAW,IAAI,WAAW,KAAK,EAAE,EAAE,CAAC;gBAE7C,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC;gBAC5B,OAAO,GAAG,WAAW,CAAC;YACxB,CAAC;YAED,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC/C,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;YACjD,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAClC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;QAES,WAAW;YACnB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;QAES,gBAAgB;YACxB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;QAES,gBAAgB,CAAC,OAAsB;YAC/C,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,OAAO,CAAC;QACzC,CAAC;QAES,oBAAoB;YAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;YACpC,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;YACnE,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACrC,CAAC;QAES,aAAa,CAAC,KAAoB,EAAE,KAAqB;YACjE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAC3C,IAAI,CAAC,SAAS,EAAE,CAAC;QACnB,CAAC;QAMS,sBAAsB,CAAC,KAAsB,IAAS,CAAC;QAEvD,oBAAoB,CAAC,KAAc;YAC3C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAES,iBAAiB;YACzB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;YAChC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAC3B,CAAC;QAGS,wBAAwB,CAChC,MAAqB,EACrB,KAAsB,IACf,CAAC;QAOH,cAAc;YACnB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC;YAC/C,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC;YACvB,OAAO,KAAK,CAAC;QACf,CAAC;QAGM,aAAa;YAClB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC;YAClC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;YAC9C,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC;YACvB,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAClC,OAAO,KAAK,CAAC;QACf,CAAC;QAMM,iBAAiB,CAAC,OAAe;YACtC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YACxB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;;IAjRM;QADN,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2DACP;IAQrB;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6DAO3B;IAiBD;QADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4DAI3B;IAmPH,OAAO,yBACJ,CAAC;AACN,CAAC;AAKD,MAAM,UAAU,mBAAmB,CACjC,IAAO;IAEP,MAAM,qBAAsB,SAAQ,kBAAkB,CAAC,IAAI,CAAC;QAG1D,IAAW,YAAY,CAAC,KAAc;YACpC,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;YAErC,IAAI,IAAI,CAAC,SAAS,IAAI,OAAO,IAAI,IAAI,EAAE,CAAC;gBACtC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;gBAC/B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,CAAC;QACH,CAAC;QAED,IAAW,YAAY;YACrB,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;QACtC,CAAC;QAQkB,oBAAoB;YACrC,IAAI,OAAO,IAAI,IAAI,EAAE,CAAC;gBACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;YACjC,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,oBAAoB,EAAE,CAAC;YAC/B,CAAC;QACH,CAAC;QAEe,wBAAwB,CACtC,IAAY,EACZ,IAAmB,EACnB,OAAsB;YAEtB,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;YACpD,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;gBACrB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;YACjC,CAAC;QACH,CAAC;KACF;IAtCC;QADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6DAS9B;IAgCH,OAAO,qBACJ,CAAC;AACN,CAAC;AAKD,MAAM,UAAU,2BAA2B,CACzC,IAAO;IAEP,MAAM,6BAA8B,SAAQ,kBAAkB,CAAC,IAAI,CAAC;QAGlE,IAAW,cAAc,CAAC,KAAc;YACtC,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,KAAK,CAAC;YAErC,IAAI,IAAI,CAAC,SAAS,IAAI,SAAS,IAAI,IAAI,EAAE,CAAC;gBACxC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;gBACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,CAAC;QACH,CAAC;QAED,IAAW,cAAc;YACvB,OAAO,IAAI,CAAC,UAAU,CAAC,YAAuB,CAAC;QACjD,CAAC;QAMkB,oBAAoB;YACrC,IAAI,SAAS,IAAI,IAAI,EAAE,CAAC;gBACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,oBAAoB,EAAE,CAAC;YAC/B,CAAC;QACH,CAAC;QAEe,wBAAwB,CACtC,IAAY,EACZ,IAAmB,EACnB,OAAsB;YAEtB,KAAK,CAAC,wBAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,CAAC;YACpD,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBACvB,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC;KACF;IApCC;QADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;uEAS9B;IA8BH,OAAO,6BACJ,CAAC;AACN,CAAC","sourcesContent":["import { isServer, type LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { addInternalsController } from '../../controllers/internals.js';\nimport { enterKey } from '../../controllers/key-bindings.js';\nimport { addSafeEventListener } from '../../utils/events.js';\nimport { isFunction, isString } from '../../utils/types.js';\nimport type { Validator } from '../../validators.js';\nimport type { Constructor } from '../constructor.js';\nimport type { FormValue } from './form-value.js';\nimport {\n  type FormAssociatedCheckboxElementInterface,\n  type FormAssociatedElementInterface,\n  type FormRestoreMode,\n  type FormValueType,\n  InternalInvalidEvent,\n  InternalResetEvent,\n} from './types.js';\n\nconst INVALID_STATE = 'ig-invalid';\n\nconst eventOptions = {\n  bubbles: false,\n  composed: false,\n};\n\nfunction emitFormInvalidEvent(host: LitElement): void {\n  host.dispatchEvent(new CustomEvent(InternalInvalidEvent, eventOptions));\n}\n\nfunction emitFormResetEvent(host: LitElement): void {\n  host.dispatchEvent(new CustomEvent(InternalResetEvent, eventOptions));\n}\n\nfunction BaseFormAssociated<T extends Constructor<LitElement>>(base: T) {\n  class BaseFormAssociatedElement extends base {\n    public static readonly formAssociated = true;\n\n    //#region Internal state and properties\n\n    protected readonly _internals = addInternalsController(this);\n    protected readonly _formValue!: FormValue<unknown>;\n\n    /**\n     * Suppresses invalid styling for a programmatic validation cycle\n     * (`checkValidity`/`_validate`). Scoped to the synchronous validity check:\n     * set immediately before it and cleared immediately after, so it never\n     * leaks into a later submission or user-interaction cycle.\n     */\n    private _isInternalValidation = false;\n    private _touched = false;\n    private _isExternalInvalid = false;\n\n    private get _shouldApplyStyles(): boolean {\n      if (this._isExternalInvalid) {\n        return true;\n      }\n\n      // A disabled control is barred from constraint validation, so it never\n      // carries invalid styling regardless of what its validators say.\n      return (\n        !this._disabled &&\n        this._invalid &&\n        this._touched &&\n        !this._isInternalValidation\n      );\n    }\n\n    protected _disabled = false;\n    protected _invalid = false;\n    protected _pristine = true;\n\n    protected get __validators(): Validator[] {\n      return [];\n    }\n\n    //#endregion\n\n    //#region Public properties and attributes\n\n    /**\n     * The name of the control, submitted with the form data.\n     * @attr\n     */\n    @property({ reflect: true })\n    public name!: string;\n\n    /**\n     * The disabled state of the component.\n     * @attr\n     * @default false\n     */\n    @property({ type: Boolean })\n    public set disabled(value: boolean) {\n      this._disabled = value;\n      this.toggleAttribute('disabled', Boolean(this._disabled));\n      if (this.hasUpdated) {\n        this._setInvalidStyles();\n      }\n    }\n\n    public get disabled(): boolean {\n      return this._disabled;\n    }\n\n    /**\n     * Sets the control into invalid state (visual state only).\n     *\n     * @remarks\n     * The property is not reflected back to the attribute. Reading it returns\n     * the effective visual state, so a touched control failing validation\n     * reads `true` even after assigning `false`.\n     * @attr\n     * @default false\n     */\n    @property({ type: Boolean })\n    public set invalid(value: boolean) {\n      this._isExternalInvalid = value;\n      this._setInvalidStyles();\n    }\n\n    public get invalid(): boolean {\n      return this._shouldApplyStyles;\n    }\n\n    /** Returns the HTMLFormElement associated with this element. */\n    public get form(): HTMLFormElement | null {\n      return this._internals.form;\n    }\n\n    /**\n     * Returns a ValidityState object which represents the different validity states\n     * the element can be in, with respect to constraint validation.\n     */\n    public get validity(): ValidityState {\n      return this._internals.validity;\n    }\n\n    /** A string containing the validation message of this element. */\n    public get validationMessage(): string {\n      return this._internals.validationMessage;\n    }\n\n    /**\n     * A boolean value which returns true if the element is a submittable element\n     * that is a candidate for constraint validation.\n     */\n    public get willValidate(): boolean {\n      return this._internals.willValidate;\n    }\n    //#endregion\n\n    //#region Life-cycle hooks\n\n    constructor(...args: any[]) {\n      super(...args);\n      addSafeEventListener(this, 'invalid', this._handleInvalid);\n    }\n\n    /** @internal */\n    public override connectedCallback(): void {\n      super.connectedCallback();\n\n      if (!this.hasUpdated) {\n        this._pristine = true;\n        this._touched = false;\n      }\n\n      this._validate();\n    }\n\n    //#endregion\n\n    //#region Enter key submission handling\n\n    protected _handleEnterKeydown(event: KeyboardEvent): void {\n      if (event.key !== enterKey || event.repeat) {\n        return;\n      }\n\n      this.form?.requestSubmit();\n    }\n\n    //#endregion\n\n    //#region Form value and validation states\n\n    private _handleInvalid(event: Event): void {\n      event.preventDefault();\n      this._invalid = true;\n\n      if (this._isInternalValidation) {\n        this._isInternalValidation = false;\n      } else {\n        // A failed submission counts as user interaction, and a lasting one: the\n        // control was asked for a value it could not provide. Keeping it touched\n        // is what makes `invalid` - and with it the validation messages the host\n        // projects - survive any later re-render, rather than holding only for\n        // the update the submission itself scheduled.\n        this._setTouchedState();\n        emitFormInvalidEvent(this);\n      }\n\n      this._setInvalidStyles();\n      this.requestUpdate();\n    }\n\n    private _setInvalidStyles(): void {\n      this._internals.setState(INVALID_STATE, this._shouldApplyStyles);\n    }\n\n    /**\n     * Closes a programmatic validation cycle. If the control was invalid, the\n     * synchronous `invalid` event already cleared the flag; if it was valid no\n     * event fired, so clear it here to stop it leaking into a later submission\n     * or user-interaction cycle.\n     */\n    private _resolveInternalValidation(): void {\n      this._isInternalValidation = false;\n    }\n\n    private __runValidators(): {\n      validity: ValidityStateFlags;\n      message: string;\n    } {\n      let validity: ValidityStateFlags = {};\n      let message = '';\n\n      for (const validator of this.__validators) {\n        const isValid = validator.isValid(this);\n\n        validity[validator.key] = !isValid;\n\n        if (!isValid) {\n          message = isFunction(validator.message)\n            ? validator.message(this)\n            : validator.message;\n\n          if (validator.key === 'valueMissing') {\n            validity = { valueMissing: true };\n            break;\n          }\n        }\n      }\n\n      return { validity, message };\n    }\n\n    /**\n     * Executes the component validators and updates the internal validity state.\n     */\n    protected _validate(userMessage?: string): void {\n      if (isServer) return;\n      const { validity, message: validatorMessage } = this.__runValidators();\n      const hasCustomError = this.validity.customError;\n      let message = validatorMessage;\n\n      if (hasCustomError && userMessage === undefined) {\n        // Internal validation cycle after the user has called setCustomValidity()\n        // with some message. Keep the customError flag and the passed in message.\n        validity.customError = true;\n        message = this.validationMessage;\n      } else if (hasCustomError && userMessage === '') {\n        // setCustomValidity with an empty message.\n        validity.customError = false;\n      } else if (userMessage && userMessage !== '') {\n        // setCustomValidity with a message.\n        validity.customError = true;\n        message = userMessage;\n      }\n\n      this._internals.setValidity(validity, message);\n      this._isInternalValidation = true;\n      this._invalid = !this._internals.checkValidity();\n      this._resolveInternalValidation();\n      this._setInvalidStyles();\n    }\n\n    protected _handleBlur(): void {\n      this._setTouchedState();\n      this._validate();\n    }\n\n    protected _setTouchedState(): void {\n      this._touched = true;\n    }\n\n    protected _setDefaultValue(current: string | null): void {\n      this._formValue.defaultValue = current;\n    }\n\n    protected _restoreDefaultValue(): void {\n      const value = this._formValue.value;\n      this._formValue.setValueAndFormState(this._formValue.defaultValue);\n      this.requestUpdate('value', value);\n    }\n\n    protected _setFormValue(value: FormValueType, state?: FormValueType): void {\n      this._pristine = false;\n      this._internals.setFormValue(value, state);\n      this._validate();\n    }\n\n    //#endregion\n\n    //#region Form associated callback hooks\n\n    protected formAssociatedCallback(_form: HTMLFormElement): void {}\n\n    protected formDisabledCallback(state: boolean): void {\n      this._disabled = state;\n      this._setInvalidStyles();\n      this.requestUpdate();\n    }\n\n    protected formResetCallback(): void {\n      this._restoreDefaultValue();\n      this._pristine = true;\n      this._touched = false;\n      this._invalid = false;\n      this._isExternalInvalid = false;\n      this._setInvalidStyles();\n      emitFormResetEvent(this);\n    }\n\n    /* c8 ignore next 4 */\n    protected formStateRestoreCallback(\n      _state: FormValueType,\n      _mode: FormRestoreMode\n    ): void {}\n\n    //#endregion\n\n    //#region Public API\n\n    /** Checks for validity of the control and shows the browser message if it's invalid. */\n    public reportValidity(): boolean {\n      const state = this._internals.reportValidity();\n      this._invalid = !state;\n      return state;\n    }\n\n    /** Checks for validity of the control and emits the invalid event if it's invalid. */\n    public checkValidity(): boolean {\n      this._isInternalValidation = true;\n      const state = this._internals.checkValidity();\n      this._invalid = !state;\n      this._resolveInternalValidation();\n      return state;\n    }\n\n    /**\n     * Sets a custom validation message for the control.\n     * As long as `message` is not empty, the control is considered invalid.\n     */\n    public setCustomValidity(message: string): void {\n      this._validate(message);\n      this.requestUpdate();\n    }\n\n    //#endregion\n  }\n  return BaseFormAssociatedElement as Constructor<BaseFormAssociatedElement> &\n    T;\n}\n\n/**\n * Mixes the passed in class and turns it into a form associated custom element.\n */\nexport function FormAssociatedMixin<T extends Constructor<LitElement>>(\n  base: T\n) {\n  class FormAssociatedElement extends BaseFormAssociated(base) {\n    /* blazorCSSuppress */\n    @property({ attribute: false })\n    public set defaultValue(value: unknown) {\n      this._formValue.defaultValue = value;\n\n      if (this._pristine && 'value' in this) {\n        this.value = this.defaultValue;\n        this._pristine = true;\n        this._validate();\n      }\n    }\n\n    public get defaultValue(): unknown {\n      return this._formValue.defaultValue;\n    }\n\n    /**\n     * Restores the default value through the public `value` setter so any\n     * clamping/normalization the component applies (slider bounds, rating max)\n     * also applies on form reset, and the correct reactive property is\n     * recorded for the update cycle.\n     */\n    protected override _restoreDefaultValue(): void {\n      if ('value' in this) {\n        this.value = this.defaultValue;\n      } else {\n        super._restoreDefaultValue();\n      }\n    }\n\n    public override attributeChangedCallback(\n      name: string,\n      prev: string | null,\n      current: string | null\n    ): void {\n      super.attributeChangedCallback(name, prev, current);\n      if (name === 'value') {\n        this._setDefaultValue(current);\n      }\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedElementInterface> &\n    T;\n}\n\n/**\n * Mixes the passed in class and turns it into a form associated custom element.\n */\nexport function FormAssociatedCheckboxMixin<T extends Constructor<LitElement>>(\n  base: T\n) {\n  class FormAssociatedCheckboxElement extends BaseFormAssociated(base) {\n    /* blazorCSSuppress */\n    @property({ attribute: false })\n    public set defaultChecked(value: boolean) {\n      this._formValue.defaultValue = value;\n\n      if (this._pristine && 'checked' in this) {\n        this.checked = this.defaultChecked;\n        this._pristine = true;\n        this._validate();\n      }\n    }\n\n    public get defaultChecked(): boolean {\n      return this._formValue.defaultValue as boolean;\n    }\n\n    /**\n     * Restores the default checked state through the public `checked` setter\n     * so the correct reactive property is recorded for the update cycle.\n     */\n    protected override _restoreDefaultValue(): void {\n      if ('checked' in this) {\n        this.checked = this.defaultChecked;\n      } else {\n        super._restoreDefaultValue();\n      }\n    }\n\n    public override attributeChangedCallback(\n      name: string,\n      prev: string | null,\n      current: string | null\n    ): void {\n      super.attributeChangedCallback(name, prev, current);\n      if (name === 'checked') {\n        this._setDefaultValue(isString(current) ? 'true' : null);\n      }\n    }\n  }\n\n  return FormAssociatedCheckboxElement as unknown as Constructor<FormAssociatedCheckboxElementInterface> &\n    T;\n}\n"]}

package/{components/common → internals}/mixins/forms/form-transformers.d.ts

@@ -1,4 +1,4 @@
-import type { DateRangeValue } from '../../../types.js';
+import type { DateRangeValue } from '../../../components/types.js';
 import type { FormValueType, IgcFormControl } from './types.js';
 export type FormValueTransformers<T> = {
     setValue: (value: T) => T;

package/{components/common → internals}/mixins/forms/form-transformers.js

@@ -1,5 +1,5 @@
-import { convertToDate, convertToDateRange, getDateFormValue, } from '../../../calendar/helpers.js';
-import { asNumber } from '../../util.js';
+import { convertToDate, convertToDateRange, getDateFormValue, } from '../../date/converters.js';
+import { asNumber } from '../../utils/math.js';
 export const FormValueDefaultTransformers = {
     setValue: (value) => value || '',
     getValue: (value) => value,

package/internals/mixins/forms/form-transformers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-transformers.js","sourceRoot":"","sources":["../../../../src/internals/mixins/forms/form-transformers.ts"],"names":[],"mappings":"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","sourcesContent":["import type { DateRangeValue } from '../../../components/types.js';\nimport {\n  convertToDate,\n  convertToDateRange,\n  getDateFormValue,\n} from '../../date/converters.js';\nimport { asNumber } from '../../utils/math.js';\nimport type { FormValueType, IgcFormControl } from './types.js';\n\nexport type FormValueTransformers<T> = {\n  setValue: (value: T) => T;\n  getValue: (value: T) => T;\n  setDefaultValue: (value: T) => T;\n  getDefaultValue: (value: T) => T;\n  setFormValue: (value: T, host: IgcFormControl) => FormValueType;\n};\n\nexport type FormValueConfig<T> = {\n  initialValue: T;\n  initialDefaultValue?: T;\n  transformers?: Partial<FormValueTransformers<T>>;\n};\n\n// Transformers\n\nexport const FormValueDefaultTransformers: FormValueTransformers<string> = {\n  setValue: (value) => value || '',\n  getValue: (value) => value,\n  setDefaultValue: (value) => value || '',\n  getDefaultValue: (value) => value,\n  setFormValue: (value, _) => value || null,\n};\n\nexport const FormValueBooleanTransformers: Partial<\n  FormValueTransformers<boolean>\n> = {\n  setValue: Boolean,\n  setDefaultValue: Boolean,\n  setFormValue: (checked, host) =>\n    checked && 'value' in host ? (host.value as string) || 'on' : null,\n};\n\nexport const FormValueNumberTransformers: Partial<\n  FormValueTransformers<number>\n> = {\n  setValue: asNumber,\n  setDefaultValue: asNumber,\n  setFormValue: (value) => value.toString(),\n};\n\nexport const FormValueDateTimeTransformers: Partial<\n  FormValueTransformers<Date | null>\n> = {\n  setValue: convertToDate,\n  setDefaultValue: convertToDate,\n  setFormValue: getDateFormValue,\n};\n\nexport const FormValueDateRangeTransformers: Partial<\n  FormValueTransformers<DateRangeValue | null>\n> = {\n  setValue: convertToDateRange,\n  setDefaultValue: convertToDateRange,\n  setFormValue: (value, host) => {\n    if (!host.name) {\n      return null;\n    }\n    const start = value?.start?.toISOString();\n    const end = value?.end?.toISOString();\n\n    const formData = new FormData();\n\n    if (start) {\n      formData.append(`${host.name}-start`, start);\n    }\n    if (end) {\n      formData.append(`${host.name}-end`, end);\n    }\n\n    return formData;\n  },\n};\n\n/* blazorSuppress */\nexport const FormValueFileListTransformers: FormValueTransformers<FileList | null> =\n  {\n    setValue: (value) => value || null,\n    getValue: (value) => value,\n    setDefaultValue: (value) => value || null,\n    getDefaultValue: (value) => value,\n    setFormValue: (files, host) => {\n      if (!(host.name && files)) {\n        return null;\n      }\n\n      const formData = new FormData();\n      for (const file of files) {\n        formData.append(host.name, file);\n      }\n\n      return formData;\n    },\n  };\n\nexport const FormValueSelectTransformers: Partial<\n  FormValueTransformers<string | undefined>\n> = {\n  setValue: (value) => value || undefined,\n  setDefaultValue: (value) => value || undefined,\n};\n"]}

package/internals/mixins/forms/form-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-value.js","sourceRoot":"","sources":["../../../../src/internals/mixins/forms/form-value.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,4BAA4B,GAE7B,MAAM,wBAAwB,CAAC;AAIhC,MAAM,OAAO,SAAS;aACI,oBAAe,GAAG,eAAwB,CAAC;IASnE,YAAY,IAAoB,EAAE,MAA0B;QAC1D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,YAAY,CAAC;QAClC,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,mBAAmB,IAAI,IAAI,CAAC,MAAM,CAAC;QAC/D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QAErD,IAAI,CAAC,aAAa,GAAG;YACnB,GAAG,4BAA4B;YAC/B,GAAG,MAAM,CAAC,YAAY;SACK,CAAC;IAChC,CAAC;IAEM,oBAAoB,CAAC,KAAQ;QAClC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,CACrB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CACxD,CAAC;IACJ,CAAC;IAED,IAAW,YAAY,CAAC,KAAQ;QAC9B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IACjE,CAAC;IAED,IAAW,YAAY;QACrB,OAAO,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAChE,CAAC;IAED,IAAW,KAAK,CAAC,KAAQ;QACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACnD,CAAC;IAED,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAClD,CAAC;;AAGH,MAAM,UAAU,oBAAoB,CAClC,IAAgB,EAChB,MAA0B;IAE1B,OAAO,IAAI,SAAS,CAAC,IAAsB,EAAE,MAAM,CAAC,CAAC;AACvD,CAAC","sourcesContent":["import type { LitElement } from 'lit';\nimport {\n  type FormValueConfig,\n  FormValueDefaultTransformers,\n  type FormValueTransformers,\n} from './form-transformers.js';\nimport type { IgcFormControl } from './types.js';\n\n/* blazorSuppress */\nexport class FormValue<T> {\n  private static readonly setFormValueKey = '_setFormValue' as const;\n\n  private readonly _host: IgcFormControl;\n  private readonly _transformers: FormValueTransformers<T>;\n  private readonly _setFormValue: IgcFormControl[typeof FormValue.setFormValueKey];\n\n  private _value: T;\n  private _defaultValue: T;\n\n  constructor(host: IgcFormControl, config: FormValueConfig<T>) {\n    this._host = host;\n    this._value = config.initialValue;\n    this._defaultValue = config.initialDefaultValue ?? this._value;\n    this._setFormValue = host[FormValue.setFormValueKey];\n\n    this._transformers = {\n      ...FormValueDefaultTransformers,\n      ...config.transformers,\n    } as FormValueTransformers<T>;\n  }\n\n  public setValueAndFormState(value: T): void {\n    this.value = value;\n    this._setFormValue.call(\n      this._host,\n      this._transformers.setFormValue(this.value, this._host)\n    );\n  }\n\n  public set defaultValue(value: T) {\n    this._defaultValue = this._transformers.setDefaultValue(value);\n  }\n\n  public get defaultValue(): T {\n    return this._transformers.getDefaultValue(this._defaultValue);\n  }\n\n  public set value(value: T) {\n    this._value = this._transformers.setValue(value);\n  }\n\n  public get value(): T {\n    return this._transformers.getValue(this._value);\n  }\n}\n\nexport function createFormValueState<T>(\n  host: LitElement,\n  config: FormValueConfig<T>\n): FormValue<T> {\n  return new FormValue(host as IgcFormControl, config);\n}\n"]}

package/{components/common → internals}/mixins/forms/types.d.ts

@@ -4,7 +4,7 @@ import type { Validator } from '../../validators.js';
 export type FormRestoreMode = 'autocomplete' | 'restore';
 export type FormValueType = string | File | FormData | null;
 export type IgcFormControl = LitElement & (FormAssociatedElementInterface | FormAssociatedCheckboxElementInterface);
-declare class BaseFormAssociatedElement {
+export declare class BaseFormAssociatedElement {
     static readonly formAssociated: boolean;
     protected readonly _internals: ElementInternalsController;
     protected readonly _formValue: unknown;
@@ -25,7 +25,7 @@ declare class BaseFormAssociatedElement {
      */
     invalid: boolean;
     /**
-     * The name attribute of the control.
+     * The name of the control, submitted with the form data.
      * @attr
      */
     name: string;
@@ -64,7 +64,7 @@ declare class BaseFormAssociatedElement {
     protected _setTouchedState(): void;
     /**
      * Sets the default value of the component.
-     * Called in `attributeChangedCallback`(i.e. when the `value` attribute of the control is set).
+     * Called in `attributeChangedCallback` (i.e. when the `value` attribute of the control is set).
      */
     protected _setDefaultValue(current: string | null): void;
     /**
@@ -108,9 +108,9 @@ declare class BaseFormAssociatedElement {
      * This is not implemented currently.
      */
     protected formStateRestoreCallback(state: FormValueType, mode: FormRestoreMode): void;
-    /** Checks for validity of the control and emits the invalid event if it invalid. */
+    /** Checks for validity of the control and emits the invalid event if it's invalid. */
     checkValidity(): boolean;
-    /** Checks for validity of the control and shows the browser message if it invalid. */
+    /** Checks for validity of the control and shows the browser message if it's invalid. */
     reportValidity(): boolean;
     /**
      * Sets a custom validation message for the control.
@@ -140,4 +140,3 @@ export declare class FormRequiredInterface {
 }
 export declare const InternalInvalidEvent = "igc-form-internal-invalid";
 export declare const InternalResetEvent = "igc-form-internal-reset";
-export {};

package/internals/mixins/forms/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/internals/mixins/forms/types.ts"],"names":[],"mappings":"AAuLA,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAA2B,CAAC;AAChE,MAAM,CAAC,MAAM,kBAAkB,GAAG,yBAAyB,CAAC","sourcesContent":["import type { LitElement } from 'lit';\nimport type { ElementInternalsController } from '../../controllers/internals.js';\nimport type { Validator } from '../../validators.js';\n\nexport type FormRestoreMode = 'autocomplete' | 'restore';\nexport type FormValueType = string | File | FormData | null;\nexport type IgcFormControl = LitElement &\n  (FormAssociatedElementInterface | FormAssociatedCheckboxElementInterface);\n\nexport declare class BaseFormAssociatedElement {\n  public static readonly formAssociated: boolean;\n\n  //#region Properties\n\n  protected readonly _internals: ElementInternalsController;\n  protected readonly _formValue: unknown;\n\n  protected _pristine: boolean;\n  protected _disabled: boolean;\n  protected _invalid: boolean;\n\n  protected get __validators(): Validator[];\n\n  /**\n   * The disabled state of the component.\n   * @attr\n   * @default false\n   */\n  public disabled: boolean;\n\n  /**\n   * Sets the control into invalid state (visual state only).\n   * @attr\n   * @default false\n   */\n  public invalid: boolean;\n\n  /**\n   * The name of the control, submitted with the form data.\n   * @attr\n   */\n  public name: string;\n\n  /** Returns the HTMLFormElement associated with this element. */\n  public get form(): HTMLFormElement | null;\n\n  /**\n   * Returns a ValidityState object which represents the different validity states\n   * the element can be in, with respect to constraint validation.\n   */\n  public get validity(): ValidityState;\n\n  /** A string containing the validation message of this element. */\n  public get validationMessage(): string;\n\n  /**\n   * A boolean value which returns true if the element is a submittable element\n   * that is a candidate for constraint validation.\n   */\n  public get willValidate(): boolean;\n\n  //#endregion\n\n  //#region Methods\n\n  /**\n   * Default implementation for handling the `Enter` key press on the component.\n   * Checks if the component is inside a form and if so, submits it.\n   */\n  protected _handleEnterKeydown(event: KeyboardEvent): void;\n\n  /**\n   * Sets the **touched** state of the component and invokes {@link BaseFormAssociatedElement._validate | `_validate()`} method.\n   *\n   * As the naming of the method suggests, this should be invoked either on **blur** or **focusout**, depending\n   * on the DOM structure and how focus state is managed by the component.\n   */\n  protected _handleBlur(): void;\n\n  /**\n   * Sets the **touched** state of the component and **DOES NOT** invoke {@link BaseFormAssociatedElement._validate | `_validate()`} method.\n   *\n   * This should be called whenever a user interaction triggers a response, usually an event, from the component in\n   * regards to its value.\n   */\n  protected _setTouchedState(): void;\n\n  /**\n   * Sets the default value of the component.\n   * Called in `attributeChangedCallback` (i.e. when the `value` attribute of the control is set).\n   */\n  protected _setDefaultValue(current: string | null): void;\n\n  /**\n   * Called when the associated parent form is reset.\n   */\n  protected _restoreDefaultValue(): void;\n\n  /**\n   * Executes the component validators and updates the internal validity state.\n   */\n  protected _validate(message?: string): void;\n\n  /**\n   * Sets the component's submission value and state.\n   */\n  protected _setFormValue(value: FormValueType, state?: FormValueType): void;\n\n  /**\n   * Called by the browser when it associates/disassociates the component with/from a given form element.\n   * Receives the form element as a parameter.\n   *\n   * @remarks\n   * This is not implemented currently.\n   */\n  protected formAssociatedCallback(form: HTMLFormElement): void;\n\n  /**\n   * Called whenever the component or a parent `fieldset` elements are disabled.\n   * Receives the current disabled state.\n   */\n  protected formDisabledCallback(state: boolean): void;\n\n  /**\n   * Called when the form is reset.\n   * Resets the component value/checked state to the default one, internal state and validation.\n   *\n   * @remarks\n   * The default implementation calls {@link BaseFormAssociatedElement._restoreDefaultValue | `_restoreDefaultValue`}.\n   * If additional customization is needed, it is better to override that method instead of this callback.\n   */\n  protected formResetCallback(): void;\n\n  /**\n   * Called when the browser attempts to automatically fill out the component.\n   *\n   * @remarks\n   * This is not implemented currently.\n   */\n  protected formStateRestoreCallback(\n    state: FormValueType,\n    mode: FormRestoreMode\n  ): void;\n\n  /** Checks for validity of the control and emits the invalid event if it's invalid. */\n  public checkValidity(): boolean;\n\n  /** Checks for validity of the control and shows the browser message if it's invalid. */\n  public reportValidity(): boolean;\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public setCustomValidity(message: string): void;\n\n  //#endregion\n}\n\nexport declare class FormAssociatedElementInterface extends BaseFormAssociatedElement {\n  /** The initial value of the component. */\n  public set defaultValue(value: unknown);\n  public get defaultValue(): unknown;\n}\n\nexport declare class FormAssociatedCheckboxElementInterface extends BaseFormAssociatedElement {\n  /** The initial checked state of the component. */\n  public set defaultChecked(value: boolean);\n  public get defaultChecked(): boolean;\n}\n\nexport declare class FormRequiredInterface {\n  protected _required: boolean;\n\n  /**\n   * When set, makes the component a required field for validation.\n   * @attr\n   * @default false\n   */\n  public set required(value: boolean);\n  public get required(): boolean;\n}\n\nexport const InternalInvalidEvent = 'igc-form-internal-invalid';\nexport const InternalResetEvent = 'igc-form-internal-reset';\n"]}

package/{components/common → internals}/mixins/mask-behavior.d.ts

@@ -1,6 +1,7 @@
 import type { LitElement } from 'lit';
-import type { MaskParser } from '../../mask-input/mask-parser.js';
-import type { RangeTextSelectMode, SelectionRangeDirection } from '../../types.js';
+import { type MaskEditKind, type MaskHistory } from '../../components/mask-input/mask-history.js';
+import type { MaskParser } from '../../components/mask-input/mask-parser.js';
+import type { RangeTextSelectMode, SelectionRangeDirection } from '../../components/types.js';
 import type { AbstractConstructor } from './constructor.js';
 export type MaskSelection = {
     start: number;
@@ -22,8 +23,10 @@ export declare class MaskBehaviorElementInterface {
     protected _compositionStart: number;
     protected _focused: boolean;
     protected _maskedValue: string;
+    protected readonly _history: MaskHistory;
     protected get _inputSelection(): MaskSelection;
     protected get _isEmptyMask(): boolean;
+    protected get _historyText(): string;
     /**
      * Makes the control a readonly field.
      * @attr readonly
@@ -44,12 +47,17 @@ export declare class MaskBehaviorElementInterface {
     get prompt(): string;
     set prompt(value: string);
     protected _handleInput(event: InputEvent): Promise<void>;
+    protected _handleBeforeInput(event: InputEvent): void;
     protected _updateInput(text: string, range: MaskSelection): Promise<void>;
+    protected _commitMaskedValue(value: string): void;
     protected _emitInputEvent(): void;
     protected _setMaskSelection(event: Event): void;
     protected _handleCompositionStart(): void;
     protected _handleCompositionEnd(event: CompositionEvent): void;
     protected _handleClick(): void;
+    protected _recordHistory(kind: MaskEditKind, next: string, caret: number, selection?: MaskSelection): void;
+    protected _historyStep(direction: 'undo' | 'redo'): Promise<void>;
+    protected _historyResync(): void;
     /** Sets the text selection range of the control. */
     setSelectionRange(start?: number, end?: number, direction?: SelectionRangeDirection): void;
     /** Replaces the selected text in the control and re-applies the mask. */
@@ -68,6 +76,6 @@ export declare class MaskBehaviorElementInterface {
  *
  * The host class must implement `_syncValueFromMask` to bridge the masked
  * text back into its public `value`. It is called by the default
- * `_updateInput` implementation and by `setRangeText`.
+ * `_commitMaskedValue` implementation.
  */
 export declare function MaskBehaviorMixin<T extends AbstractConstructor<LitElement>>(superClass: T): AbstractConstructor<MaskBehaviorElementInterface> & T;

package/{components/common → internals}/mixins/mask-behavior.js

@@ -5,16 +5,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property, state } from 'lit/decorators.js';
+import { createMaskHistory, } from '../../components/mask-input/mask-history.js';
+import { addKeybindings, ctrlKey, metaKey, shiftKey, } from '../controllers/key-bindings.js';
+const MaskEditKinds = new Map([
+    ['insertText', 'insert'],
+    ['deleteContentBackward', 'delete-backward'],
+    ['deleteContentForward', 'delete-forward'],
+    ['deleteByCut', 'atomic'],
+    ['insertFromPaste', 'atomic'],
+    ['insertFromDrop', 'atomic'],
+    ['', 'atomic'],
+]);
 export function MaskBehaviorMixin(superClass) {
     class MaskBehaviorElement extends superClass {
-        constructor() {
-            super(...arguments);
-            this._maskSelection = { start: 0, end: 0 };
-            this._compositionStart = 0;
-            this._focused = false;
-            this._maskedValue = '';
-            this.readOnly = false;
-        }
         get _inputSelection() {
             return {
                 start: this._input?.selectionStart || 0,
@@ -24,6 +27,32 @@ export function MaskBehaviorMixin(superClass) {
         get _isEmptyMask() {
             return this._maskedValue === this._parser.emptyMask;
         }
+        get _historyText() {
+            return this._maskedValue || this._parser.emptyMask;
+        }
+        constructor(...args) {
+            super(...args);
+            this._maskSelection = { start: 0, end: 0 };
+            this._compositionStart = 0;
+            this._history = createMaskHistory(() => `${this._parser.mask} ${this._parser.prompt}`);
+            this._focused = false;
+            this._maskedValue = '';
+            this.readOnly = false;
+            const step = (direction) => (event) => {
+                if (!event.isComposing) {
+                    this._historyStep(direction);
+                }
+            };
+            addKeybindings(this, {
+                skip: () => this.readOnly,
+                bindingDefaults: { repeat: true },
+            })
+                .set([ctrlKey, 'z'], step('undo'))
+                .set([metaKey, 'z'], step('undo'))
+                .set([ctrlKey, 'y'], step('redo'))
+                .set([ctrlKey, shiftKey, 'z'], step('redo'))
+                .set([metaKey, shiftKey, 'z'], step('redo'));
+        }
         set mask(value) {
             this._parser.mask = value;
         }
@@ -40,42 +69,58 @@ export function MaskBehaviorMixin(superClass) {
             const value = this._input?.value ?? '';
             const { start, end } = this._maskSelection;
             const deletePosition = this._parser.getNextNonLiteralPosition(end) + 1;
+            if (inputType === 'historyUndo' || inputType === 'historyRedo') {
+                return this._historyStep(inputType === 'historyUndo' ? 'undo' : 'redo');
+            }
+            if (inputType === 'deleteContentBackward' && isComposing) {
+                return;
+            }
+            const kind = MaskEditKinds.get(inputType ?? '');
+            if (kind === undefined) {
+                if (!isComposing) {
+                    this.requestUpdate();
+                }
+                return;
+            }
             this._setTouchedState();
             switch (inputType) {
-                case 'deleteContentForward':
-                    this._updateInput('', { start, end: deletePosition });
-                    await this.updateComplete;
-                    return this._input?.setSelectionRange(deletePosition, deletePosition);
+                case 'deleteContentForward': {
+                    await this._updateInput('', { start, end: deletePosition }, kind);
+                    this._input?.setSelectionRange(deletePosition, deletePosition);
+                    this._history.settle(this._historyText, deletePosition);
+                    return;
+                }
                 case 'deleteContentBackward':
-                    if (isComposing)
-                        return;
                     return this._updateInput('', {
                         start: this._parser.getPreviousNonLiteralPosition(this._inputSelection.start + 1),
                         end,
-                    });
+                    }, kind);
                 case 'deleteByCut':
-                    return this._updateInput('', this._maskSelection);
+                    return this._updateInput('', this._maskSelection, kind);
                 case 'insertText':
-                    return this._updateInput(value.substring(start, this._inputSelection.end), this._maskSelection);
+                    return this._updateInput(value.substring(start, this._inputSelection.end), this._maskSelection, kind);
                 case 'insertFromPaste':
                     return this._updateInput(value.substring(start, this._inputSelection.end), {
                         start,
                         end: this._inputSelection.start,
-                    });
+                    }, kind);
                 case 'insertFromDrop':
-                    return this._updateInput(value.substring(this._inputSelection.start, this._inputSelection.end), { ...this._inputSelection });
+                    return this._updateInput(value.substring(this._inputSelection.start, this._inputSelection.end), { ...this._inputSelection }, kind, {
+                        start: this._inputSelection.start,
+                        end: this._inputSelection.start,
+                    });
                 case undefined:
                 case '':
                     return this._updateInput(this._parser.parse(value.substring(start, this._inputSelection.end)), {
                         start,
                         end: this._inputSelection.end,
-                    });
+                    }, kind, { start, end: start });
             }
         }
-        async _updateInput(text, range) {
+        async _updateInput(text, range, kind = 'atomic', caretBefore) {
             const { value, end } = this._parser.replace(this._maskedValue, text, range.start, range.end);
-            this._maskedValue = value;
-            this._syncValueFromMask();
+            this._recordHistory(kind, value, end, caretBefore ?? this._maskSelection);
+            this._commitMaskedValue(value);
             this.requestUpdate();
             if (range.start !== this._parser.mask.length) {
                 this._emitInputEvent();
@@ -83,6 +128,10 @@ export function MaskBehaviorMixin(superClass) {
             await this.updateComplete;
             this._input?.setSelectionRange(end, end);
         }
+        _commitMaskedValue(value) {
+            this._maskedValue = value;
+            this._syncValueFromMask();
+        }
         _emitInputEvent() {
             this._setTouchedState();
             this.emitEvent('igcInput', { detail: this._maskedValue });
@@ -97,10 +146,7 @@ export function MaskBehaviorMixin(superClass) {
             this._compositionStart = this._inputSelection.start;
         }
         _handleCompositionEnd({ data }) {
-            this._updateInput(data, {
-                start: this._compositionStart,
-                end: this._inputSelection.end,
-            });
+            this._updateInput(data, { start: this._compositionStart, end: this._inputSelection.end }, 'atomic', { start: this._compositionStart, end: this._compositionStart });
         }
         _handleClick() {
             const { selectionStart: start, selectionEnd: end } = this._input ?? {
@@ -111,6 +157,47 @@ export function MaskBehaviorMixin(superClass) {
                 this.select();
             }
         }
+        _handleBeforeInput(event) {
+            const { inputType } = event;
+            if (inputType !== 'historyUndo' && inputType !== 'historyRedo') {
+                return;
+            }
+            event.preventDefault();
+            if (!this.readOnly) {
+                this._historyStep(inputType === 'historyUndo' ? 'undo' : 'redo');
+            }
+        }
+        _recordHistory(kind, next, caret, selection = this._inputSelection) {
+            const previous = this._historyText;
+            if (next !== previous) {
+                this._history.record(kind, { value: previous, ...selection });
+            }
+            this._history.settle(next, caret);
+        }
+        _historyResync() {
+            this._history.resync(this._historyText);
+        }
+        async _historyStep(direction) {
+            if (this.readOnly) {
+                return;
+            }
+            const current = {
+                value: this._historyText,
+                ...this._inputSelection,
+            };
+            const state = direction === 'undo'
+                ? this._history.undo(current)
+                : this._history.redo(current);
+            if (!state) {
+                return;
+            }
+            this._setTouchedState();
+            this._commitMaskedValue(state.value);
+            this.requestUpdate();
+            this._emitInputEvent();
+            await this.updateComplete;
+            this.setSelectionRange(state.start, state.end);
+        }
         setSelectionRange(start, end, direction = 'none') {
             this._input?.setSelectionRange(start ?? null, end ?? null, direction);
             this._maskSelection = { start: start ?? 0, end: end ?? 0 };
@@ -120,8 +207,9 @@ export function MaskBehaviorMixin(superClass) {
             const _start = start ?? current.start;
             const _end = end ?? current.end;
             const result = this._parser.replace(this._maskedValue || this._parser.emptyMask, replacement, _start, _end);
-            this._maskedValue = this._parser.apply(this._parser.parse(result.value));
-            this._syncValueFromMask();
+            const next = this._parser.apply(this._parser.parse(result.value));
+            this._recordHistory('atomic', next, _start, current);
+            this._commitMaskedValue(next);
             this.updateComplete.then(() => {
                 switch (selectMode) {
                     case 'select':